/* ============================================================
   AILIFFA — HEADER
   Font  : Kumbh Sans (Google Fonts)
   Color : #ffffff links, #FF4C4C hover
  ============================================================ */

        @import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;500;600;700&display=swap');


        /* ── BASE ─────────────────────────────────────────────────── */
        .header-section {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 9999;
            -webkit-backdrop-filter: blur(4px);
            transition: background 0.3s ease;
        }

        .header-section.scrolled {
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        /* ── DESKTOP WRAPPER ──────────────────────────────────────── */
        .desktop-nav {
            width: 100%;
            padding: 0 20px;
            min-height: 70px;
            gap: 10px;
        }

        /* ── LOGOS ────────────────────────────────────────────────── */
        .brand-logo-left,
        .brand-logo-right {
            display: block;
            object-fit: contain;
        }

        @media (min-width:992px) and (max-width:1023px) {
            .desktop-nav {
                padding: 0 10px;
                gap: 4px;
                min-height: 60px;
            }

            .brand-logo-left {
                height: 44px;
            }

            .brand-logo-right {
                height: 36px;
            }
        }

        @media (min-width:1024px) and (max-width:1199px) {
            .desktop-nav {
                padding: 0 12px;
                gap: 6px;
                min-height: 64px;
            }

            .brand-logo-left {
                height: 50px;
            }

            .brand-logo-right {
                height: 40px;
            }
        }

        @media (min-width:1200px) and (max-width:1439px) {
            .desktop-nav {
                padding: 0 18px;
                gap: 8px;
                min-height: 68px;
            }

            .brand-logo-left {
                height: 58px;
            }

            .brand-logo-right {
                height: 46px;
            }
        }

        @media (min-width:1440px) {
            .desktop-nav {
                padding: 0 24px;
                gap: 12px;
                min-height: 90px;
            }

            .brand-logo-left {
                height: 105px;
            }

            .brand-logo-right {
                height: 105px;
            }
        }

        /* ── NAV LIST ─────────────────────────────────────────────── */
        .desktop-nav-list {
            flex: 1 1 0;
            flex-wrap: nowrap;
            justify-content: center;
            gap: 0;
            padding: 0;
            min-width: 0;
            overflow: visible;
        }

        /* ── NAV LINK ─────────────────────────────────────────────── */
        .dnav-link,
        .dnav-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: #ffffff;
            text-decoration: none;
            font-family: "Kumbh Sans", sans-serif;
            font-weight: 600;
            text-transform: uppercase;
            white-space: nowrap;
            background: none;
            border: none;
            cursor: pointer;
            line-height: 1;
            transition: color 0.2s ease;
        }

        .dnav-link:hover,
        .dnav-btn:hover {
            color: #FF4C4C;
            text-decoration: none;
        }

        @media (min-width:992px) and (max-width:1023px) {

            .dnav-link,
            .dnav-btn {
                font-size: 10px;
                letter-spacing: 0.04em;
                padding: 20px 4px;
            }
        }

        @media (min-width:1024px) and (max-width:1099px) {

            .dnav-link,
            .dnav-btn {
                font-size: 10.5px;
                letter-spacing: 0.045em;
                padding: 20px 5px;
            }
        }

        @media (min-width:1100px) and (max-width:1199px) {

            .dnav-link,
            .dnav-btn {
                font-size: 11px;
                letter-spacing: 0.05em;
                padding: 20px 6px;
            }
        }

        @media (min-width:1200px) and (max-width:1299px) {

            .dnav-link,
            .dnav-btn {
                font-size: 12px;
                letter-spacing: 0.06em;
                padding: 22px 7px;
            }
        }

        @media (min-width:1300px) and (max-width:1439px) {

            .dnav-link,
            .dnav-btn {
                font-size: 13px;
                letter-spacing: 0.07em;
                padding: 22px 9px;
            }
        }

        @media (min-width:1440px) {

            .dnav-link,
            .dnav-btn {
                font-size: 14px;
                letter-spacing: 0.08em;
                padding: 22px 11px;
            }
        }

        /* ── DROPDOWN ARROW ───────────────────────────────────────── */
        .drop-arrow {
            width: 9px;
            height: 6px;
            flex-shrink: 0;
            transition: transform 0.25s ease;
        }

        .has-dropdown:hover .drop-arrow {
            transform: rotate(180deg);
        }

        /* ── DESKTOP DROPDOWN MENU ────────────────────────────────── */
        .has-dropdown {
            position: relative;
        }

        .dropdown-menu-custom {
            position: absolute;
            top: calc(100% + 0px);
            left: 50%;
            transform: translateX(-50%) translateY(8px);
            background: rgb(0 16 11 / 99%);
            border-radius: 4px;
            min-width: 150px;
            padding: 8px 0;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
            z-index: 500;
        }

        .has-dropdown:hover .dropdown-menu-custom {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0);
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .drop-link {
            display: block;
            padding: 9px 20px;
            font-family: "Kumbh Sans", sans-serif;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #ccc;
            text-decoration: none;
            white-space: nowrap;
            transition: color 0.2s, background 0.2s;
        }

        .drop-link:hover {
            color: #FF4C4C;
        }

        /* ── MOBILE TOPBAR ────────────────────────────────────────── */
      
        .mobile-brand-logo {
            height: 60px;
            width: auto;
            object-fit: contain;
            display: block;
        }

        /* ── HAMBURGER ────────────────────────────────────────────── */
        .hamburger {
            background: none;
            border: none;
            padding: 4px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .hamburger span {
            display: block;
            width: 26px;
            height: 2px;
            background: #ffffff;
            border-radius: 2px;
            transition: transform 0.3s ease, opacity 0.3s ease;
            transform-origin: center;
        }

        /* Hamburger open state — hidden when drawer is open (close btn shown inside drawer) */
        .hamburger.open span:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }

        .hamburger.open span:nth-child(2) {
            opacity: 0;
            transform: scaleX(0);
        }

        .hamburger.open span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }

        /* ══════════════════════════════════════════════════════════
   MOBILE DRAWER  —  FULL-SCREEN OVERLAY  (KEY FIX)
   ══════════════════════════════════════════════════════════ */
        .mobile-drawer {
            /* Fixed full-screen overlay */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 99999;

            background: rgb(0 16 11 / 99%);
            /* dark green-black like screenshot */
            display: flex;
            flex-direction: column;

            /* Hidden state */
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateX(-100%);
            transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s 0.35s;
        }

        .mobile-drawer.open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(0);
            transition: opacity 0.35s ease, transform 0.35s ease;
        }

        /* ── DRAWER HEADER (sticky logo + close btn) ──────────────── */
        .drawer-header {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 24px 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .drawer-logo-link {
            display: inline-block;
        }

        .drawer-logo {
            height: 70px;
            width: auto;
            object-fit: contain;
            display: block;
        }

        /* Close (×) button */
        .drawer-close {
            background: none;
            border: none;
            color: #ffffff;
            font-size: 22px;
            line-height: 1;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: color 0.2s, background 0.2s;
            font-weight: 300;
        }

        .drawer-close:hover {
            color: #FF4C4C;
            background: rgb(0 16 11 / 99%);
        }

        /* ── DRAWER BODY (scrollable) ─────────────────────────────── */
        .drawer-body {
            flex: 1 1 0;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            /* Custom scrollbar */
            scrollbar-width: thin;
            scrollbar-color: rgb(0 16 11 / 99%);
        }

        .drawer-body::-webkit-scrollbar {
            width: 4px;
        }

        .drawer-body::-webkit-scrollbar-track {
            background: transparent;
        }

        .drawer-body::-webkit-scrollbar-thumb {
            background: rgb(0 16 11 / 99%);
            border-radius: 2px;
        }

        /* ── MOBILE NAV LIST ──────────────────────────────────────── */
        .mobile-nav-list {
            padding: 8px 0 32px;
            margin: 0;
        }

        /* ── MOBILE LINKS ─────────────────────────────────────────── */
        .mnav-link,
        .mnav-dropdown-btn {
            display: block;
            padding: 14px 28px;
            font-family: "Kumbh Sans", sans-serif;
            font-size: 15px;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #ffffff;
            text-decoration: none;
            border: none;
            background: none;
            cursor: pointer;
            transition: color 0.2s, background 0.2s;
            line-height: 1.4;
            width: 100%;
            text-align: left;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        }

        .mnav-link:hover,
        .mnav-dropdown-btn:hover {
            color: #FF4C4C;
            background: rgba(255, 255, 255, 0.03);
            text-decoration: none;
        }

        /* Arrow in mobile dropdown btn */
        .mdrop-arrow {
            width: 10px;
            height: 6px;
            margin-left: 8px;
            vertical-align: middle;
            transition: transform 0.25s ease;
        }

        .mobile-has-dropdown.open .mdrop-arrow {
            transform: rotate(180deg);
        }

        /* ── MOBILE SUBMENU ───────────────────────────────────────── */
        .mobile-sub-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            padding: 0;
            background: rgba(0, 0, 0, 0.25);
        }

        .mobile-has-dropdown.open .mobile-sub-menu {
            max-height: 200px;
        }

        .msub-link {
            display: block;
            padding: 11px 48px;
            font-family: "Kumbh Sans", sans-serif;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #aaaaaa;
            text-decoration: none;
            transition: color 0.2s;
            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        }

        .msub-link:hover {
            color: #FF4C4C;
        }

		/* ── iOS Safari viewport fix ── */
		.mobile-drawer {
		    height: 100vh;
		    height: -webkit-fill-available;
		}
		
		/* ── Prevent iOS bounce/scroll bleed when drawer is open ── */
		body.drawer-open {
		    position: fixed;
		    width: 100%;
		    overflow: hidden;
		}