/* ====== NAVBAR MOBILE FIX - MODERN & SMOOTH ====== */

/* Mobile screens ONLY (≤992px) */
@media only screen and (max-width: 992px) {
    /* === NAVBAR CONTAINER === */
    .header-area {
        height: 70px !important;
        padding: 0px 15px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        position: relative;
            z-index: 1000;
    }
    
    .background-header {
        height: 70px !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
    }
    
    /* === LOGO === */
    .header-area .main-nav .logo {
        position: absolute;
        left: 20px;
        top: 50%;
            transform: translateY(-50%);
            z-index: 1002;
    }
    
    .background-header .main-nav .logo {
        top: 50%;
            transform: translateY(-50%);
    }
    
    .header-area .main-nav .logo img {
        width: 140px !important;
        margin-top: 0px !important;
    }
    
    .background-header .main-nav .logo img {
        width: 140px !important;
        margin-top: 0px !important;
    }
    
    /* === HAMBURGER MENU TRIGGER === */
    .header-area .menu-trigger {
        display: block !important;
        position: absolute !important;
        right: 15px;
        top: 50% !important;
            transform: translateY(-50%) !important;
            z-index: 1002;
            margin: 0 !important;
        }
        
        /* === BLUR OVERLAY === */
        .header-area .main-nav::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 998;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            pointer-events: none;
        }
        
        .header-area .main-nav.menu-open::before {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
    }
    
    /* === HIDE NAV MENU BY DEFAULT === */
    .header-area .main-nav .nav {
        display: none !important;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        width: 100%;
        background: #ffffff;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        z-index: 999;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        padding: 0;
            margin: 0 !important;
            /* Smooth slide-down animation */
            transform: translateY(-20px);
            opacity: 0;
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* === SHOW NAV MENU WHEN ACTIVE === */
    .header-area .main-nav .nav.active {
        display: block !important;
        transform: translateY(0);
            opacity: 1;
    }
    
    /* === MENU ITEMS STYLING === */
    .header-area .main-nav .nav li {
        width: 100%;
        background: transparent;
        border-bottom: 1px solid #f0f0f0;
        padding: 0 !important;
        margin: 0;
    }
    
    .header-area .main-nav .nav li:first-child {
        border-top: none;
    }
    
    .header-area .main-nav .nav li:last-child {
        border-bottom: none;
    }
    
    /* === MENU LINKS === */
    .header-area .main-nav .nav li a {
        height: 54px !important;
        line-height: 54px !important;
        padding: 0 24px !important;
        border: none !important;
        background: transparent !important;
        color: #2a2a2a !important;
        display: block;
        text-align: left;
        font-size: 15px;
        font-weight: 500;
        transition: all 0.25s ease;
        border-radius: 0 !important;
    }
    
    /* === HOVER STATE === */
    .header-area .main-nav .nav li a:hover {
        background: linear-gradient(to right, rgba(34, 179, 193, 0.08), transparent) !important;
        color: #22b3c1 !important;
        padding-left: 28px !important;
    }
    
    /* === ACTIVE STATE === */
    .header-area .main-nav .nav li a.active,
    .header-area .main-nav .nav li a.nav-btn.active {
        background: linear-gradient(to right, rgba(34, 179, 193, 0.12), transparent) !important;
        color: #22b3c1 !important;
        font-weight: 600;
        border-left: 4px solid #22b3c1 !important;
        padding-left: 20px !important;
    }
    
    /* === ADMIN BUTTON SPECIAL STYLING === */
    .header-area .main-nav .nav li a.admin-btn {
        background: linear-gradient(135deg, #22b3c1, #1a8a96) !important;
        color: #ffffff !important;
        font-weight: 600;
        margin: 12px;
        border-radius: 12px !important;
        height: 48px !important;
        line-height: 48px !important;
        text-align: center;
        box-shadow: 0 4px 12px rgba(34, 179, 193, 0.25);
        border: none !important;
        padding: 0 24px !important;
    }
    
    .header-area .main-nav .nav li a.admin-btn:hover {
        background: linear-gradient(135deg, #1a8a96, #146d78) !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(34, 179, 193, 0.35);
        color: #ffffff !important;
        padding-left: 24px !important;
    }
    
    .header-area .main-nav .nav li a.admin-btn.active {
        background: linear-gradient(135deg, #102a27, #0a1f1c) !important;
        box-shadow: 0 4px 12px rgba(16, 42, 39, 0.4);
        border-left: none !important;
        padding-left: 24px !important;
    }
    
    .header-area .main-nav .nav li a.admin-btn i {
        margin-right: 6px;
        font-size: 16px;
    }
    
    /* === SMOOTH SCROLLBAR === */
    .header-area .main-nav .nav::-webkit-scrollbar {
        width: 4px;
    }
    
    .header-area .main-nav .nav::-webkit-scrollbar-track {
        background: #f5f5f5;
    }
    
    .header-area .main-nav .nav::-webkit-scrollbar-thumb {
        background: #22b3c1;
        border-radius: 2px;
    }
    
    .header-area .main-nav .nav::-webkit-scrollbar-thumb:hover {
        background: #1a8a96;
    }
}

/* === EXTRA SMALL MOBILE (≤768px) === */
@media only screen and (max-width: 768px) {
    .header-area .main-nav .logo img {
        width: 130px !important;
    }
    
    .background-header .main-nav .logo img {
        width: 130px !important;
    }
    
    .header-area .main-nav .nav li a {
        font-size: 14px;
        height: 50px !important;
        line-height: 50px !important;
        padding: 0 20px !important;
    }
    
    .header-area .main-nav .nav li a:hover {
        padding-left: 24px !important;
    }
    
    .header-area .main-nav .nav li a.admin-btn {
        font-size: 14px;
        margin: 10px;
    }
}

/* === VERY SMALL DEVICES (≤375px) === */
@media only screen and (max-width: 375px) {
    .header-area .main-nav .logo img {
        width: 120px !important;
    }
    
    .background-header .main-nav .logo img {
        width: 120px !important;
    }
    
    .header-area .main-nav .nav li a {
        font-size: 13px;
        padding: 0 16px !important;
    }
    
    .header-area .main-nav .nav li a:hover {
        padding-left: 20px !important;
    }
    
    .header-area .main-nav .nav li a.admin-btn {
        font-size: 13px;
        margin: 8px;
        padding: 0 20px !important;
    }
}