@import "tailwindcss";


@layer base{
  body{
    @apply 
    bg-cinza 
    text-branco 
    font-display
    overflow-x-hidden
  }

  html{
    @apply
    overflow-x-hidden;
  }

  h1{
    @apply md:text-[50px] text-[35px] font-['Playfair',serif] w-fit
  }

  h2{
    @apply text-3xl w-fit
  }

  p{
    @apply text-base w-fit
  }
}

@layer components {
  .btn{
    @apply p-3 px-4 text-black bg-dourado rounded-3xl shadow-[-4px_-3px_5px_#00000030] transition duration-300 text-nowrap w-fit cursor-pointer
  }
  .btn:hover{
    @apply shadow-none bg-[#B2B2B2] translate-x-[-3px] translate-y-[-1px]
  }

  .btn-advogados-esquerda{
    @apply bg-dourado py-3 pl-3 pr-5 rounded-[14px]
         md:w-fit
         shadow-[-3px_-3px_10px_#00000040]
         flex items-center justify-between gap-2
         transition-transform duration-200 ease-out
         md:translate-x-10
         w-full
         md:text-[14px]
         text-[12px]
         font-bold;
  }
  .btn-advogados-esquerda:hover{
    @apply md:translate-x-8 md:translate-y-0 -translate-y-1
  }

  .btn-advogados-direita{
    @apply bg-dourado py-3 pl-3 pr-5 rounded-[14px]
         md:w-fit
         shadow-[-3px_-3px_10px_#00000040]
         flex items-center justify-between gap-2
         transition-transform duration-200 ease-out
         md:-translate-x-10
         md:text-[14px]
         text-[12px]
         font-bold;
  }
  .btn-advogados-direita:hover{
    @apply md:-translate-x-8 md:translate-y-0 -translate-y-1
  }

  .name-l{
    @apply flex text-branco text-[30px] font-['Playfair',serif] transition-colors duration-300 ease-in-out
  }

  .name-r{
    @apply flex justify-start text-branco text-[30px] font-['Playfair',serif] transition-colors duration-300 ease-in-out
  }

  .img-l{
    @apply lg:w-[280px] lg:h-[320px] md:w-[200px]  transition-all duration-300 ease-in-out object-cover;
  }

  .img-r{
    @apply lg:w-[280px] lg:h-[320px] md:w-[200px] w-full  transition-all duration-300 ease-in-out object-cover;
  }

  .half-l:hover .img-l{
    @apply lg:w-[300px] md:w-[230px]
  }

  .half-l:hover .name-l{
    @apply text-dourado
  }

  .half-r:hover .img-r{
    @apply lg:w-[300px] md:w-[230px]
  }

  .half-r:hover .name-r{
    @apply text-dourado
  }

  @keyframes scroll {
    from {
        translate:0%;
    }
    to {
        translate:-50%;
    }
}}

.animate-scroll {
    animation: scroll 20s linear infinite;
    will-change: transform;
}

.animate-scroll:hover {
    animation-play-state: paused;
}

@theme {
  --color-cinza: #13243A;
  --color-branco: #F8F8F8;
  --color-dourado: #E1A730;

  --font-display: "Inter", sans-seriff;
}