@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
body{
    @apply text-sm font-medium;
}
.btn{
    @apply inline-flex items-center px-5 h-11 rounded-md text-sm font-bold;
    &.btn-dark{
        @apply bg-[#1E1E2C] text-white;
        &.btn-outline{
            @apply border border-[#1E1E2C] bg-transparent text-[#1E1E2C] hover:bg-[#1E1E2C] hover:text-white;
        }
    }
}

.mainMenu{
    @apply fixed w-full invisible md:visible top-0 left-0 bottom-0 md:static md:max-w-none;
    ul{ 
        @apply flex-col gap-y-10 md:*:border-t-0 md:flex-row *:text-dark md:*:text-sm *:text-xl *:ml-8 md:*:ml-0 *:opacity-0 md:*:opacity-100 *:-translate-x-12 md:*:translate-x-0;
        li{
            transition: all 0.5s;
        }
    }
    .contact{
        @apply invisible opacity-0 translate-y-12;
        transition: all 0.5s;
    }
    &.active{
        @apply visible;
        ul{ @apply *:opacity-100 *:translate-x-0;
            li{
                transition: all 0.5s;
                &:nth-child(1){
                    @apply delay-[200ms];
                }
                &:nth-child(2){
                    @apply delay-[500ms];
                }
                &:nth-child(3){
                    @apply delay-[700ms];
                }
                &:nth-child(4){
                    @apply delay-[900ms];
                }
                &:nth-child(5){
                    @apply delay-[1100ms];
                }
            }
        }
        .contact{
            @apply visible opacity-100 translate-y-0 transition-all;
            transition: all 0.5s 1200ms;
        }
    }
}
.menuOverlay{
    @apply transition-all duration-700 w-0 h-0;
    &.active{
        @apply scale-[60] transition-all duration-700 w-10 h-10;
    }
}
.hamburger {
    @apply w-8 h-8 relative inline-flex flex-col justify-around cursor-pointer p-2
    *:w-full *:bg-white *:h-[2px] *:block *:rounded-s-3xl *:relative before:absolute before:top-0 before:left-0 before:right-0 before:bottom-0 before:rounded-lg before:bg-gradient-to-r before:from-[#f04e23] before:to-[#fbaf40] before:rotate-0;;
    &.active{
        @apply before:-rotate-45 before:bg-white;
        .hamburger-line {
            @apply bg-white;
            &.second {@apply -rotate-45;}
            &.first {@apply translate-x-[1px] translate-y-[2px] -rotate-[135deg];}
            &.third {@apply translate-x-[6px] translate-y-[1px] -rotate-[135deg];}
        }
    }
    
    &:before {
      transition: all 0.4s cubic-bezier(0.54, -0.10, 0.57, 0.57);
    }
    
    .hamburger-line {
      transition: transform 0.4s cubic-bezier(0.54, -0.81, 0.57, 0.57);
      
      &.first,
      &.third {
        @apply w-1/2;
      }
      
      &.third {
        @apply ml-[50%] origin-left;
      }
    }
  }

.list1{
    @apply flex flex-col gap-y-3;
    li{
        @apply bg-[url(../images/list1.svg)] bg-no-repeat bg-left-top pl-7;
    }
}