@tailwind base;
@tailwind components;
@tailwind utilities;


.over-input{
  @apply w-full rounded-lg border border-stroke bg-transparent py-4 pl-6 pr-10 outline-none focus:border-primary focus-visible:shadow-none border-none bg-bodydark text-white;
}

.over-input--s{
  @apply py-2;
}

.over-button-blue{
  @apply relative flex items-center justify-center gap-3 cursor-pointer rounded-[18px]  px-5 md:px-7 md:py-4 py-3 overflow-hidden hover:translate-y-[-5px] transition-all duration-300 ease-in-out font-semibold w-max;
  
  &::after {
    content: "";
    @apply absolute inset-0 bg-gradient-to-r from-[#7026ED] to-[#0195FF] transition-opacity duration-300 z-[-1];
    opacity: 1;
  }
  &::before{
    content: "";
    @apply absolute inset-0 bg-[#0195FF] z-[-1];
    opacity: 1;
  }
  
  &:hover::after {
    opacity: 0;
  }
}


.over-button-blue-menu{
  @apply text-[17px] relative flex items-center justify-center gap-2 cursor-pointer md:rounded-[18px] rounded-[14px] px-3 md:px-7 md:py-4 py-2 overflow-hidden hover:translate-y-[-5px] transition-all duration-300 ease-in-out font-semibold;
  
  &::after {
    content: "";
    @apply absolute inset-0 bg-gradient-to-r from-[#7026ED] to-[#0195FF] transition-opacity duration-300 z-[-1];
    opacity: 1;
  }
  &::before{
    content: "";
    @apply absolute inset-0 bg-[#0195FF] z-[-1];
    opacity: 1;
  }
  
  &:hover::after {
    opacity: 0;
  }
}


.over-container{
  @apply h-full flex px-5 sm:px-8 lg:px-12 gap-12 max-w-[1400px] m-auto max-lg:flex-col-reverse pt-10;
}

.over-container-lg{
  @apply h-full flex px-5 sm:px-8 lg:px-12 gap-12 max-w-[1600px] m-auto max-lg:flex-col-reverse pt-10;
}

.over-container-col{
  @apply flex-col-reverse lg:flex-row sm:flex h-full flex-col px-5 sm:px-8 lg:px-12 gap-12 max-w-[1400px] m-auto sm:pt-10;
}

.over-button-hollow{
  @apply flex items-center justify-center gap-3 cursor-pointer border-2  hover:translate-y-[-5px] transition duration-300 ease-in-out rounded-[18px] w-max text-lg font-bold px-5 md:px-12 md:py-3 py-2;
}
.over-button-gray{
  @apply flex items-center bg-[#AFB9D2] justify-center gap-3 cursor-pointer border-2 border-none hover:translate-y-[-5px] transition duration-300 ease-in-out rounded-[18px] w-max text-lg font-bold px-5 md:px-12 md:py-3 py-2;
}

.over-home-portrait-video{
  max-width: 250px;
  margin: 0 30px;
}
@media screen and (max-width: 768px) {
  .over-home-portrait-video{
    max-width: 200px;
    margin: 0 auto;
  }
}