/* Mobile Menu Base Styles */
    #mobile-menu {
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(to right, #f0fdf4, #dcfce7);
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        backdrop-filter: blur(10px);
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 40;
    }

    /* Mobile Menu Active State */
    #mobile-menu.menu-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    /* Menu Button Animation */
    @keyframes floating {
        0% {
            transform: translateY(-3px);
        }

        50% {
            transform: translateY(3px);
        }

        100% {
            transform: translateY(-3px);
        }
    }

    /* Smooth body padding transition */
    body {
        transition: padding-top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        padding-top: 80px;
    }

    #mobile-menu-button {
        transition: transform 0.3s ease;
    }

    #mobile-menu-button.active {
        transform: rotate(180deg);
    }

    /* Navigation Links */
    .nav-link {
        @apply flex items-center text-emerald-700 hover:text-emerald-900 transition-colors duration-200 font-medium;
        background: linear-gradient(90deg, #e8f4f8, #d4edf3, #e8f4f8);
        background-size: 200% 100%;
        animation: gradient-flow 3s ease infinite;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        border: 1px solid transparent;
        transition: all 0.3s ease;
        font-family: 'Montserrat', sans-serif !important;
    }

    .nav-link:hover {
        border-color: #34bed3;
        box-shadow: 0 0 15px #34bed3;
        transform: translateY(-1px);
    }

    /* Mobile Navigation */
    .mobile-nav-link {
        background: linear-gradient(90deg, #e8f4f8, #d4edf3, #e8f4f8);
        background-size: 200% 100%;
        animation: gradient-flow 3s ease infinite;
        border-radius: 0.5rem;
        padding: 0.75rem 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 'Montserrat', sans-serif !important;
        margin: 0.5rem;
        transition: all 0.3s ease;
    }

    .mobile-nav-link:hover {
        border-color: #34bed3;
        box-shadow: 0 0 15px #34bed3;
        transform: translateY(-2px);
    }

    /* Select Elements - Desktop and Mobile */
    .hidden.lg\:flex select,
    #mobile-menu select,
    .desktop-selectors select {
        background: linear-gradient(90deg, #f0fdf4, #dcfce7, #f0fdf4);
        background-size: 200% 100%;
        animation: gradient-flow 3s ease infinite;
        border: 1px solid #34d399;
        box-shadow: 0 0 15px rgba(52, 211, 153, 0.2);
        border-radius: 0.5rem;
        padding: 0.5rem 2rem 0.5rem 1rem;
        transition: all 0.3s ease;
        color: #065f46;
        font-weight: 500;
    }

    /* Desktop Selectors Specific */
    .desktop-selectors {
        display: flex;
        gap: 1rem;
    }

    .desktop-selectors select {
        min-width: 120px;
        text-align: left;
        background-color: white;
    }

    /* Mobile Select Styles */
    #mobile-menu select {
        width: 90%;
        margin: 0.5rem auto;
        text-align: center;
        text-align-last: center;
    }

    /* Hover & Focus Effects */
    .hidden.lg\:flex select:hover,
    #mobile-menu select:hover,
    .desktop-selectors select:hover {
        box-shadow: 0 0 20px rgba(52, 211, 153, 0.4);
        transform: translateY(-1px);
    }

    .hidden.lg\:flex select:focus,
    #mobile-menu select:focus,
    .desktop-selectors select:focus {
        box-shadow: 0 0 25px rgba(52, 211, 153, 0.5);
        outline: none;
    }

    /* Animation Keyframes */
    @keyframes gradient-flow {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    /* RTL Support */
    body[lang="ur"] nav a,
    body[lang="ar"] nav a,
    body[lang="ur"] #mobile-menu a,
    body[lang="ar"] #mobile-menu a {
        font-family: 'Montserrat', sans-serif !important;
        direction: ltr;
        text-align: left;
    }

    /* Responsive Adjustments for screens below 1200px */
    @media (max-width: 1199px) {
        .container {
            padding-top: 1rem;
        }

        #mobile-menu .flex.flex-col {
            align-items: center;
            padding: 1rem 0;
        }

        .mobile-nav-link {
            min-width: 120px;
        }

        /* Show mobile menu and button */
        #mobile-menu-button {
            display: block !important;
        }

        /* Hide desktop navigation */
        .hidden.lg\:flex {
            display: none !important;
        }

        /* Ensure mobile menu is visible */
        #mobile-menu {
            display: block;
        }

        /* Hide desktop selectors */
        .desktop-selectors {
            display: none !important;
        }
    }

    /* Desktop screens (1200px and above) */
    @media (min-width: 1200px) {
        #mobile-menu {
            display: none !important;
        }

        #mobile-menu-button {
            display: none !important;
        }

        .hidden.lg\:flex {
            display: flex !important;
        }

        /* Show desktop selectors */
        .desktop-selectors {
            display: flex !important;
        }
    }

    /* Wave Effect */
    .wave-effect {
        position: absolute;
        top: -3px;
        left: 0;
        width: 100%;
        height: 4px;
        background: white;
        border-radius: 100% 100% 0 0;
        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
    }