.main-header-nav{
    @apply xl:relative xl:z-[1];
}
.main-navigation-hamburger{
    @apply relative py-1 px-2 flex justify-center items-center gap-x-2 rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none hover:bg-transparent focus:bg-transparent;
    @apply text-white;
    // @apply  text-gray-800;
    // @apply  dark:text-white;
}
.main-navigation-wrapper{
    @apply flex flex-col gap-y-5 gap-x-12 mt-5;
    @screen xl{
        @apply flex-row items-center justify-end mt-0;
    }
    @screen 2xl{
        @apply justify-center;
    }
}
.main-navigation-area{
    @apply overflow-hidden transition-all duration-300 basis-full grow;
    @screen <xl{
        @apply bg-white;
        @apply dark:bg-dark;
        @apply absolute top-[calc(100%+8px)] left-0 right-0 w-full z-[2] pb-4 shadow-lg -mt-1;
    }
}
%navigation-style{
    @apply flex items-center gap-x-3.5 focus:outline-none;
    @apply text-white hover:text-white focus:text-white;
    @screen <xl{
        @apply text-gray-800 hover:text-gray-600 focus:text-gray-600;
        @apply dark:text-white dark:hover:text-white dark:focus:text-white;
    }
}
.main-navigation-item{
    @extend %navigation-style;
    @apply font-medium;
}
.dropdown-submenu-button{
    @extend %navigation-style;
    @apply w-full font-medium gap-x-1;
}
.dropdown-submenu-caret{
    @apply hs-dropdown-open:-rotate-180 duration-300 ms-1 shrink-0;
    @screen xl{
        @apply hs-dropdown-open:rotate-0 ;
    }
}
.dropdown-submenu-wrapper{
    @apply transition-[opacity,margin] ease-in-out duration-[150ms] hs-dropdown-open:opacity-100 opacity-0 z-10 bg-white rounded-lg p-1 space-y-1 top-full before:-top-5 before:start-0 before:w-full before:h-5;
    @screen xl{
        @apply w-48 shadow-md before:absolute border;
    }
}
.dropdown-submenu-item{
    @apply py-2 px-3 rounded-lg hover:bg-gray-100 focus:bg-gray-100;
}