/* Header */
.header-container {
    @apply bg-white
        shadow-md;
}

.header {
    @apply fixed w-full;
}

.nav {
    @apply bg-white 
        border-gray-200 
        py-2.5 
        dark:bg-gray-900;
}

.nav-wrapper {
    @apply flex flex-wrap items-center justify-between 
        max-w-screen-xl 
        px-4 mx-auto;
}

.logo-link {
    @apply flex items-center
        mb-2 lg:mb-0;
}

.logo {
    @apply h-9 sm:h-9
        mr-3;
}

.logo-text {
    @apply self-center text-xl font-semibold 
    whitespace-nowrap
    dark:text-white;
}

.nav-menu {
    @apply items-center justify-between lg:flex lg:w-auto lg:order-1
        w-full;
}

.nav-menu > ul {
    @apply flex flex-col lg:flex-row lg:space-x-8
        mt-4 lg:mt-0
        font-medium;
}

.nav-menu > ul > li {
    @apply block 
        py-2 pl-3 pr-4 lg:p-0
        text-gray-700
        lg:hover:text-purple-700
        hover:bg-gray-50 lg:hover:bg-transparent
        bg-white lg:bg-transparent
        rounded    
        border-b border-gray-100 lg:border-0
        dark:text-gray-400 dark:text-white dark:hover:text-white
        dark:hover:bg-gray-700 lg:dark:hover:text-white
        lg:dark:hover:bg-transparent
        dark:border-gray-700;
}

.nav-btn-secondary {
    @apply text-gray-800 dark:text-white hover:bg-gray-50 
        focus:ring-4 focus:ring-gray-300 focus:outline-none
        font-medium text-sm
        rounded-lg
        border border-gray-300        
        px-4 lg:px-5 py-2 lg:py-2.5 
        sm:mr-2 
        dark:hover:bg-gray-700 
        dark:focus:ring-gray-800;
}
.nav-btn {
    @apply text-white font-medium text-sm
        bg-purple-700 
        hover:bg-purple-800 
        focus:ring-4 focus:ring-purple-300 focus:outline-none
        rounded-lg
        px-4 lg:px-5 py-2 lg:py-2.5
        sm:mr-2 lg:mr-0
        dark:bg-purple-600 dark:hover:bg-purple-700 
        dark:focus:ring-purple-800;
}