/* ── NAVBAR BASE ── */
    .custom-navbar {
      background: #020617;
      padding: 18px 0;
      transition: 0.4s;
      z-index: 99999;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      top: 0;
      left: 0;
      right: 0;
      margin: 0 !important;
    }
 
    .custom-navbar .container {
      max-width: 1320px;
    }
 
    /* ── LOGO ── */
    .navbar-brand img {
      height: 52px;
      width: auto;
      object-fit: contain;
    }
 
    /* ── NAV LINKS ── */
    .navbar-nav {
      gap: 26px;
    }
 
    .nav-link {
      color: #fff !important;
      font-size: 15px;
      font-weight: 500;
      position: relative;
      padding: 10px 0 !important;
      transition: 0.3s;
      white-space: nowrap;
    }
 
    .nav-link.active,
    .nav-link:hover {
      color: #ff6b00 !important;
    }
 
    .nav-link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -6px;
      width: 0;
      height: 2px;
      border-radius: 20px;
      background: #ff6b00;
      transition: 0.4s;
    }
 
    .nav-link.active::after,
    .nav-link:hover::after {
      width: 100%;
    }
 
    /* ── DROPDOWN ── */
    .dropdown-menu {
      background: #fff;
      border: none;
      border-radius: 18px;
      padding: 12px;
      min-width: 240px;
      box-shadow: 0 15px 50px rgba(0,0,0,0.08);
    }
 
    .dropdown-item {
      padding: 12px 16px;
      border-radius: 12px;
      font-weight: 500;
      transition: 0.3s;
    }
 
    .dropdown-item:hover {
      background: #f8fafc;
      color: #ff6b00;
    }
 
    /* Desktop hover dropdown */
    @media (min-width: 1200px) {
      .dropdown:hover > .dropdown-menu {
        display: block;
      }
    }
 
    /* ── THEME BUTTON ── */
    .theme-btn {
      background: linear-gradient(to right, #ff6b00, #ff8c00);
      color: #fff;
      padding: 14px 28px;
      border-radius: 14px;
      font-weight: 600;
      font-size: 15px;
      transition: 0.4s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      white-space: nowrap;
    }
 
    .theme-btn:hover {
      transform: translateY(-4px);
      color: #fff;
      box-shadow: 0 10px 25px rgba(255,107,0,0.3);
    }
 
    /* ── TOGGLER ── */
    .navbar-toggler {
      color: #fff;
      font-size: 28px;
      border: none !important;
      box-shadow: none !important;
      position: relative;
      z-index: 100001;
    }
 
    /* ── CUSTOM DROPDOWN LINK ── */
    .navbar .custom-dropdown {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
 
    /* ══════════════════════════════════════
       MOBILE SLIDE PANEL  (< 1200px)
    ══════════════════════════════════════ */
    @media (max-width: 1199px) {
 
      /* Slide-out panel */
      .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        width: 300px;
        max-width: 85vw;
        height: 100vh;
        background: #020617;
        padding: 0;           /* reset – logo header handles top space */
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.4s ease-in-out;
        z-index: 999999;
        display: block !important;
      }
 
      .navbar-collapse.show {
        transform: translateX(0);
      }
 
      /* Dark overlay behind panel */
      .navbar-collapse::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.55);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
        z-index: -1;
        pointer-events: none;
      }
 
      .navbar-collapse.show::before {
        opacity: 1;
        visibility: visible;
      }
 
      /* ── LOGO HEADER inside the panel ── */
      .mobile-nav-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.07);
        background: #020617;
        position: sticky;
        top: 0;
        z-index: 10;
      }
 
      .mobile-nav-header .mobile-logo img {
        height: 44px;
        width: auto;
        object-fit: contain;
      }
 
      /* ── CLOSE BUTTON ── */
      .close-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 50%;
        background: #ff6b00;
        color: #fff;
        font-size: 20px;
        transition: 0.3s;
        flex-shrink: 0;
        cursor: pointer;
      }
 
      .close-nav:hover {
        transform: rotate(90deg);
      }
 
      /* Nav links area */
      .mobile-nav-body {
        padding: 23px 17px 32px;
      }
 
      /* Nav list layout */
      .navbar-nav {
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
        width: 100%;
      }
 
      .navbar-nav .nav-item {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.05);
      }
 
      .navbar-nav .nav-item:last-child {
        border-bottom: none;
      }
 
      .nav-link {
        font-size: 15px;
        padding: 13px 0 !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
 
      .nav-link::after {
        display: none; /* hide underline on mobile */
      }
 
      /* Mobile dropdown */
      .dropdown-menu {
        background: #0f172a;
        border: none;
        border-radius: 12px;
        padding: 6px;
        margin: 0 0 8px 0;
        box-shadow: none;
        min-width: 100%;
        display: none;
      }
 
      .dropdown-menu.show {
        display: block !important;
      }
 
      .dropdown-item {
        color: #cbd5e1;
        padding: 10px 14px;
        font-size: 14px;
      }
 
      .dropdown-item:hover {
        background: #1e293b;
        color: #ff6b00;
      }
 
      /* CTA button */
      .theme-btn {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        border-radius: 12px;
        padding: 13px 20px;
      }
 
      /* Hide the Bootstrap collapse toggle default arrow */
      .navbar-toggler-icon { display: none; }
    }
 
    /* Desktop: hide mobile-only elements */
    @media (min-width: 1200px) {
      .mobile-nav-header { display: none; }
      .mobile-nav-body { display: contents; }
    }