:root {
      --black:      #0A0A0A;
      --dark:       #1C1C1C;
      --gray:       #6B6B6B;
      --lgray:      #D4D4D4;
      --white:      #FFFFFF;
      --beige-lt:   #FAF8F4;   /* light beige  – odd sections  */
      --beige-warm: #EDE8DC;   /* warm beige   – even sections */
      --offwhite:   #F9F7F2;
      --yellow:     #F5C518;
      --amber:      #E6A800;
      --logo-dark:  #31363C;   /* "Tick" + tagline — brand logo dark slate */
      --logo-gold:  #C49F50;   /* "sol" — brand logo muted gold */
      --radius:     17px;
      --shadow:     0 4px 24px rgba(0,0,0,0.08);
      --shadow-md:  0 8px 40px rgba(0,0,0,0.12);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
    body { font-family: 'Inter', sans-serif; color: var(--black); background: var(--beige-lt); overflow-x: hidden; max-width: 100%; }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; display: block; }
    ul { list-style: none; }

    .container  { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
    .section-pad { padding: 96px 0; position: relative; overflow: hidden; }
    /* Sitewide subtle yellow diagonal line texture */
    .section-pad::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0.05;
      background-image: repeating-linear-gradient(45deg, var(--yellow) 0, var(--yellow) 1.5px, transparent 0, transparent 26px);
    }
    .eyebrow    { font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--amber); margin-bottom: 12px; }

    /* DESTINATION GROUP SUBHEADINGS (Explore Pakistan / International Destinations) */
    .dest-subhead {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 32px;
    }
    .dest-subhead-badge {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--black);
      border-radius: 100px;
      padding: 10px 24px 10px 14px;
      box-shadow: var(--shadow-md);
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
    }
    .dest-subhead-badge::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 0%, rgba(245,197,24,0.18) 50%, transparent 100%);
      background-size: 200% 100%;
      animation: destSheen 4s ease-in-out infinite;
    }
    @keyframes destSheen {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .dest-subhead-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      min-width: 34px;
      background: var(--yellow);
      border-radius: 50%;
      font-size: 16px;
      position: relative;
      z-index: 1;
    }
    .dest-subhead-text {
      font-family: 'Playfair Display', serif;
      font-size: clamp(17px, 2vw, 22px);
      font-weight: 700;
      letter-spacing: 0.3px;
      color: var(--white);
      text-transform: none;
      position: relative;
      z-index: 1;
      white-space: nowrap;
    }
    .dest-subhead-line {
      flex: 1;
      height: 2px;
      background: linear-gradient(90deg, var(--yellow) 0%, var(--lgray) 100%);
      border-radius: 2px;
      opacity: 0.6;
    }
    @media (max-width: 640px) {
      .dest-subhead-text { font-size: 15px; }
      .dest-subhead-badge { padding: 8px 16px 8px 10px; gap: 8px; }
      .dest-subhead-icon { width: 28px; height: 28px; font-size: 13px; }
      .dest-subhead { gap: 12px; margin-bottom: 24px; }
    }
    .h2         { font-family: 'Playfair Display', serif; font-size: clamp(28px, 4vw, 44px); font-weight: 700; line-height: 1.2; color: var(--black); }
    .h3         { font-family: 'Playfair Display', serif; font-size: clamp(20px, 2.5vw, 28px); font-weight: 600; line-height: 1.3; }
    .body-text  { font-size: 16px; line-height: 1.75; color: var(--gray); }
    .tag        { display: inline-block; background: var(--yellow); color: var(--black); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 17px; }
    .section-header { text-align: center; max-width: 620px; margin: 0 auto; }

    /* BUTTONS */
    .btn         { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius); font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all .2s ease; }
    .btn-primary { background: var(--yellow); color: var(--black); }
    .btn-primary:hover { background: var(--amber); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(245,197,24,0.4); }
    .btn-outline { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.6); }
    .btn-outline:hover { background: var(--white); color: var(--black); }
    .btn-dark    { background: var(--black); color: var(--white); }
    .btn-dark:hover  { background: var(--dark); transform: translateY(-1px); }
    .btn-sm      { padding: 10px 20px; font-size: 13px; }
    .btn-wa      { background: #25D366; color: var(--white); }
    .btn-wa:hover    { background: #1da851; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,211,102,0.4); }
    /* ── Gold Trip Planner Button ─────────────────────────── */
    .btn-gold-trip { background: linear-gradient(135deg, #F5C518 0%, #e6a800 100%); color: #0A0A0A; font-weight: 800; letter-spacing: 0.3px; box-shadow: 0 4px 18px rgba(245,197,24,0.45); border: none; }
    .btn-gold-trip:hover { background: linear-gradient(135deg, #ffd633 0%, #F5C518 100%); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(245,197,24,0.6); color: #0A0A0A; text-decoration: none; }

    /* ── Futuristic "Consult to Expert" nav button ── */
    .btn-consult {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .3px;
      color: var(--black);
      background: linear-gradient(135deg, var(--yellow), var(--amber));
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 17px;
      overflow: hidden;
      isolation: isolate;
      transition: transform .2s ease, box-shadow .2s ease;
      box-shadow: 0 4px 16px rgba(245,197,24,0.35);
      white-space: nowrap;
    }
    .btn-consult i { font-size: 13px; }
    .btn-consult::before {
      content: '';
      position: absolute;
      top: 0; left: -120%;
      width: 60%; height: 100%;
      background: linear-gradient(120deg, transparent, rgba(255,255,255,0.65), transparent);
      transform: skewX(-20deg);
      z-index: -1;
      transition: left .6s ease;
    }
    .btn-consult:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 26px rgba(245,197,24,0.5), 0 0 0 1px rgba(10,10,10,0.06) inset;
    }
    .btn-consult:hover::before { left: 130%; }
    .btn-consult::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 17px;
      border: 1px solid rgba(10,10,10,0.15);
      z-index: -1;
    }
    .btn-email   { background: #1a73e8; color: var(--white); }
    .btn-email:hover { background: #1557b0; transform: translateY(-1px); }

    /* Full-size ".btn"-class variant of the dark mirror-glass Book Now button, for hero/CTA spots */
    .btn-book-now-cta {
      color: #fff;
      background: linear-gradient(145deg, rgba(50,50,55,0.95) 0%, rgba(15,15,18,0.95) 45%, rgba(40,40,46,0.95) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 6px rgba(0,0,0,0.5),
        0 6px 16px rgba(0,0,0,0.35);
      position: relative;
      overflow: hidden;
      text-decoration: none;
    }
    .btn-book-now-cta::before {
      content: "";
      position: absolute;
      top: 0; left: -60%;
      width: 50%; height: 100%;
      background: linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent);
      transform: skewX(-20deg);
      transition: left .5s ease;
    }
    .btn-book-now-cta:hover {
      transform: translateY(-2px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -1px 6px rgba(0,0,0,0.5),
        0 10px 24px rgba(0,0,0,0.45);
      background: linear-gradient(145deg, rgba(65,65,70,0.95) 0%, rgba(20,20,24,0.95) 45%, rgba(55,55,62,0.95) 100%);
      color: #fff;
    }
    .btn-book-now-cta:hover::before { left: 120%; }

    .consult-icon-dark { background: linear-gradient(145deg, #3a3a3f, #0e0e10) !important; }

    /* Compact "Consult Now" button — shows only in mobile navbar, replacing the old Book Now slot */
    .btn-consult-mobile { display: none; padding: 8px 14px; font-size: 12px; }
    @media (max-width: 768px) {
      .btn-consult-mobile { display: inline-flex; order: -1; }
    }

    /* ── "Consult to Expert" dropdown menu (WhatsApp / Email / Phone) ── */
    .consult-wrap { position: relative; display: inline-flex; }
    .consult-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      min-width: 220px;
      background: var(--white);
      border-radius: 17px;
      box-shadow: 0 16px 44px rgba(0,0,0,0.22);
      border: 1px solid rgba(0,0,0,0.06);
      overflow: hidden;
      z-index: 2000;
      animation: consultIn .18s ease;
    }
    .consult-dropdown.open { display: block; }
    @keyframes consultIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
    .consult-option {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 13px 16px;
      background: none;
      border: none;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--dark);
      text-align: left;
      transition: background .15s;
      border-bottom: 1px solid var(--beige-lt);
    }
    .consult-option:last-child { border-bottom: none; }
    .consult-option .consult-icon {
      width: 34px; height: 34px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 15px;
      color: white;
      flex-shrink: 0;
    }
    .consult-option.wa-opt:hover { background: #f0fff5; }
    .consult-option.wa-opt .consult-icon { background: #25D366; }
    .consult-option.email-opt:hover { background: #f0f6ff; }
    .consult-option.email-opt .consult-icon { background: #1a73e8; }
    .consult-option.phone-opt:hover { background: #fff8e8; }
    .consult-option.phone-opt .consult-icon { background: var(--amber); }
    .consult-option small { display: block; font-size: 11px; font-weight: 400; color: var(--gray); margin-top: 1px; }
    .mobile-menu .consult-wrap { display: block; width: 100%; }
    .mobile-menu .consult-dropdown { position: static; width: 100%; margin-top: 10px; animation: none; box-shadow: 0 6px 20px rgba(0,0,0,0.12); }

    /* ══════════════════════════════════════════════════════
       PREMIUM GLASSMORPHISM NAVBAR
       Floating pill design — luxury travel aesthetic
    ══════════════════════════════════════════════════════ */
    :root {
      --gn-gold:        #D4AF37;
      --gn-gold-light:  #F5D77A;
      --gn-gold-dark:   #A8860C;
      --gn-black:       #111111;
      --gn-glass:       rgba(255,255,255,0.76);
      --gn-border:      rgba(255,255,255,0.58);
      --gn-shadow:      0 8px 40px rgba(17,17,17,0.13), 0 2px 8px rgba(212,175,55,0.09);
      --gn-t:           300ms cubic-bezier(.4,0,.2,1);
      --gn-r:           17px;
    }

    /* Outer wrapper — provides the top padding that creates the "floating" look */
    .gn-wrapper {
      position: fixed;
      top: 34px; left: 0; right: 0;
      z-index: 1000;
      padding: 16px 24px;
      pointer-events: none;
    }

    /* The navbar pill itself */
    #navbar {
      pointer-events: all;
      max-width: 1380px;
      margin: 0 auto;
      height: 92px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 10px 14px 10px 14px;
      background: var(--gn-glass);
      backdrop-filter: blur(22px) saturate(190%);
      -webkit-backdrop-filter: blur(22px) saturate(190%);
      border: 1px solid var(--gn-border);
      border-radius: 17px;
      box-shadow: var(--gn-shadow);
      transition: box-shadow var(--gn-t), background var(--gn-t);
    }
    #navbar.scrolled {
      background: rgba(255,255,255,0.90);
      box-shadow: 0 12px 52px rgba(17,17,17,0.17), 0 2px 10px rgba(212,175,55,0.13);
    }

    /* ── ON-HERO: black × gold × beige gradient navbar ── */
    #navbar.on-hero {
      background: linear-gradient(
        135deg,
        rgba(10,8,4,0.96) 0%,
        rgba(30,22,4,0.94) 30%,
        rgba(50,38,8,0.92) 55%,
        rgba(245,197,24,0.18) 78%,
        rgba(250,248,244,0.14) 100%
      );
      border-color: rgba(245,197,24,0.30);
      box-shadow:
        0 8px 40px rgba(0,0,0,0.45),
        0 0 0 1px rgba(245,197,24,0.12),
        inset 0 1px 0 rgba(245,197,24,0.15);
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
    }
    /* Text turns white/gold on hero */
    #navbar.on-hero .gn-link {
      color: rgba(255,255,255,0.85);
    }
    #navbar.on-hero .gn-link:hover,
    #navbar.on-hero .gn-link.active {
      color: var(--gn-gold-light);
      background: rgba(245,197,24,0.12);
    }
    /* Logo pill goes dark */
    #navbar.on-hero .gn-logo {
      background: linear-gradient(135deg, #FAF8F4 0%, #EDE8DC 30%, #F5D77A 65%, #D4AF37 100%);
      border: none;
      box-shadow: 0 2px 14px rgba(212,175,55,0.35), inset 0 1px 0 rgba(255,255,255,0.6);
    }
    #navbar.on-hero .gn-logo-name { color: #111; }
    #navbar.on-hero .gn-logo-tag  { color: rgba(10,8,4,0.6); }
    /* Links pill bg goes dark */
    #navbar.on-hero .gn-links-pill {
      background: rgba(255,255,255,0.06);
      border-color: rgba(245,197,24,0.15);
    }
    /* Hamburger lines go white */
    #navbar.on-hero .gn-hamburger span { background: #fff; }

    /* ── Logo block ─────────────────────────────────────── */
    .gn-logo {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 11px;
      background: linear-gradient(135deg, #FAF8F4 0%, #EDE8DC 30%, #F5D77A 65%, #D4AF37 100%);
      border-radius: 17px;
      padding: 7px 16px 7px 9px;
      box-shadow: 0 2px 14px rgba(212,175,55,0.25), inset 0 1px 0 rgba(255,255,255,0.6);
      text-decoration: none;
      transition: box-shadow var(--gn-t), transform var(--gn-t);
    }
    .gn-logo:hover {
      box-shadow: 0 4px 22px rgba(212,175,55,0.22);
      transform: translateY(-1px);
    }
    .gn-logo img {
      height: 50px;
      width: auto;
      display: block;
      border-radius: 17px;
      background: #1e1e1e;
      padding: 4px;
      object-fit: contain;
    }
    .gn-logo-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .gn-logo-name {
      font-family: 'Poppins', sans-serif;
      font-size: 20px;
      font-weight: 800;
      color: #31363C;
      line-height: 1;
      letter-spacing: -0.2px;
    }
    .gn-logo-name em { color: #C49F50; font-style: normal; }
    .gn-logo-tag {
      font-family: 'Poppins', sans-serif;
      font-size: 8px;
      font-weight: 500;
      letter-spacing: 1.3px;
      color: #31363C;
      opacity: 0.72;
    }

    /* ── Centre links pill ──────────────────────────────── */
    .gn-links-pill {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(17,17,17,0.04);
      border: 1px solid rgba(17,17,17,0.055);
      border-radius: var(--gn-r);
      padding: 7px 6px;
      gap: 1px;
      max-width: 830px;
      overflow: hidden;
    }
    .gn-link {
      position: relative;
      display: inline-flex;
      align-items: center;
      font-family: 'Inter', sans-serif;
      font-size: 11.5px;
      font-weight: 500;
      letter-spacing: 0.03em;
      color: var(--gn-black);
      text-decoration: none;
      padding: 7px 11px;
      border-radius: var(--gn-r);
      transition: color var(--gn-t), background var(--gn-t);
      white-space: nowrap;
    }
    .gn-link::after {
      content: '';
      position: absolute;
      bottom: 3px;
      left: 50%;
      transform: translateX(-50%) scaleX(0);
      width: 16px; height: 2px;
      border-radius: 17px;
      background: linear-gradient(90deg, var(--gn-gold-light), var(--gn-gold));
      transition: transform var(--gn-t);
    }
    .gn-link:hover,
    .gn-link.active {
      color: var(--gn-gold-dark);
      background: rgba(212,175,55,0.09);
    }
    .gn-link:hover::after,
    .gn-link.active::after { transform: translateX(-50%) scaleX(1); }

    /* ── Right side: CTA + hamburger ───────────────────── */
    .gn-right {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* Gold gradient CTA pill */
    .gn-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 22px;
      border-radius: var(--gn-r);
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #111;
      text-decoration: none;
      background: linear-gradient(135deg, var(--gn-gold-light) 0%, var(--gn-gold) 50%, #c49a1c 100%);
      box-shadow: 0 4px 18px rgba(212,175,55,0.40), inset 0 1px 0 rgba(255,255,255,0.32);
      transition: transform var(--gn-t), box-shadow var(--gn-t), background var(--gn-t);
      white-space: nowrap;
      border: none;
      cursor: pointer;
    }
    .gn-cta:hover {
      transform: translateY(-2px) scale(1.03);
      background: linear-gradient(135deg, var(--gn-gold) 0%, var(--gn-gold-dark) 100%);
      box-shadow: 0 8px 28px rgba(212,175,55,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
    }
    .gn-cta i { font-size: 12px; }

    /* ── Hamburger ──────────────────────────────────────── */
    .gn-hamburger {
      display: none;
      background: rgba(17,17,17,0.05);
      border: 1px solid rgba(17,17,17,0.08);
      border-radius: 17px;
      padding: 10px 12px;
      cursor: pointer;
      flex-direction: column;
      gap: 5px;
      align-items: center;
      transition: background var(--gn-t);
    }
    .gn-hamburger:hover { background: rgba(212,175,55,0.12); }
    .gn-hamburger span {
      display: block;
      width: 22px; height: 2px;
      background: var(--gn-black);
      border-radius: 17px;
      transition: transform var(--gn-t), opacity var(--gn-t);
    }
    .gn-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .gn-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .gn-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ── Mobile drawer ──────────────────────────────────── */
    .gn-mobile-drawer {
      display: none;
      max-width: 1380px;
      margin: 0 auto;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(22px) saturate(180%);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      border: 1px solid var(--gn-border);
      border-radius: 17px;
      box-shadow: 0 20px 60px rgba(17,17,17,0.15);
      padding: 22px 18px;
      flex-direction: column;
      gap: 2px;
      margin-top: 10px;
      pointer-events: all;
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity var(--gn-t), transform var(--gn-t);
    }
    .gn-mobile-drawer.open {
      display: flex;
      opacity: 1;
      transform: translateY(0);
    }
    .gn-mobile-link {
      display: flex;
      align-items: center;
      padding: 11px 15px;
      border-radius: 17px;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.03em;
      color: var(--gn-black);
      text-decoration: none;
      transition: background var(--gn-t), color var(--gn-t);
    }
    .gn-mobile-link:hover { background: rgba(212,175,55,0.1); color: var(--gn-gold-dark); }
    .gn-mobile-divider {
      height: 1px;
      background: rgba(17,17,17,0.07);
      margin: 10px 0 8px;
      border-radius: 17px;
    }

    /* ── Hero padding adjustment (now uses wrapper height) ── */
    #hero { padding-top: 158px; } /* 34px ticker + 124px navbar */

    /* ── Tablet: tighten spacing ────────────────────────── */
    @media (max-width: 1180px) {
      .gn-link { font-size: 10.5px; padding: 6px 8px; }
      .gn-cta  { padding: 10px 16px; font-size: 11px; }
      .gn-logo-name { font-size: 17px; }
    }

    /* ── Mobile: hamburger mode ─────────────────────────── */
    /* NOTE: 11 nav links don't actually fit in the pill until ~1340px wide
       (verified: .gn-links-pill silently clips overflowing links with no
       scrollbar between 961px–1340px, on very common widths like 1024/1280).
       The breakpoint below is set past that point so no link is ever hidden. */
    @media (max-width: 1366px) {
      .gn-links-pill { display: none; }
      .gn-right .consult-wrap { display: none; }
      .gn-hamburger { display: flex; }
    }

    @media (max-width: 520px) {
      .gn-wrapper { padding: 12px 12px; }
      #navbar { height: 76px; border-radius: 17px; padding: 8px 10px; }
      .gn-logo img { height: 42px; }
      .gn-logo { border-radius: 17px; padding: 6px 12px 6px 8px; }
      .gn-logo-name { font-size: 15px; }
      .gn-right { gap: 6px; }
      .gn-icon-btn { width: 34px; height: 34px; margin-right: 0; font-size: 13px; }
      .gn-icon-btn .wishlist-count { width: 14px; height: 14px; min-width: 14px; font-size: 9px; }
      .gn-hamburger { padding: 8px 9px; }
      .gn-hamburger span { width: 18px; }
    }

    /* ── Very small screens: the full logo lockup (icon + name + tagline)
       plus the icon cluster (theme toggle + wishlist + hamburger) don't
       both fit at once — this was causing the hamburger to spill out past
       the pill's rounded edge on most phones (320px–430px wide). Dropping
       the tagline frees up enough room for everything to fit cleanly. ── */
    @media (max-width: 430px) {
      .gn-logo-tag { display: none; }
      .gn-logo-text { justify-content: center; }
      .gn-logo { padding: 6px 10px 6px 6px; gap: 8px; }
      .gn-logo img { height: 36px; }
    }
    @media (max-width: 340px) {
      .gn-logo img { height: 32px; }
      .gn-logo { padding: 5px 8px 5px 5px; gap: 6px; }
      .gn-logo-name { font-size: 14px; }
      .gn-right { gap: 4px; }
      .gn-icon-btn { width: 30px; height: 30px; }
      .gn-hamburger { padding: 7px 8px; }
    }

    /* ── Keep consult-dropdown working as before ─────────── */
    .consult-wrap { position: relative; display: inline-flex; }

    /* Legacy classes used by rest of site — keep working */
    .hamburger { display: none; }
    .mobile-menu { display: none; }

    /* ────────────────────────── HERO ────────────────────────── */
    #hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: #0A0A0A url('images/backgrounds/hero_custom_bg.webp') center center / cover no-repeat;
      position: relative;
      overflow: hidden;
      padding-top: 114px; /* 34px ticker + 80px wrapper */
    }
    #hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.35) 100%);
      z-index: 1;
      pointer-events: none;
    }
    #hero .container { position: relative; z-index: 2; }
    /* Subtle grid texture */
    .hero-bg-pattern {
      position: absolute; inset: 0; opacity: 0.06;
      background-image:
        repeating-linear-gradient(45deg, var(--yellow) 0, var(--yellow) 1px, transparent 0, transparent 50%),
        repeating-linear-gradient(-45deg, rgba(255,255,255,0.4) 0, rgba(255,255,255,0.4) 1px, transparent 0, transparent 60px);
      background-size: 30px 30px, 42px 42px;
    }
    .hero-slash   { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 500px; height: 500px; background: var(--yellow); opacity: 0.06; border-radius: 17px; rotate: -15deg; }
    .hero-slash-2 { position: absolute; right: 80px;  top: 18%; width: 180px; height: 180px; background: var(--yellow); opacity: 0.10; border-radius: 17px; rotate: -15deg; }
    /* Yellow dots fading out from left toward the middle */
    .hero-dots-left {
      position: absolute; left: 0; top: 230px; bottom: 0; width: 55%;
      pointer-events: none;
      background-image: radial-gradient(var(--yellow) 1.5px, transparent 1.6px);
      background-size: 26px 26px;
      opacity: 0.45;
      -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 85%);
      mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 85%);
    }

    /* ─── HERO CONTENT: centered, more vertical breathing room ─── */
    .hero-content {
      position: relative; z-index: 2;
      width: 100%;
      max-width: 760px;
      margin: 0 auto;
      padding: 56px 0 72px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
    }

    /* ─── TRUST BADGE ROW ─── */
    .hero-trust-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 36px;
      animation: fadeSlideUp .4s ease both;
      animation-delay: .1s;
    }
    @keyframes fadeSlideUp {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .hero-trust-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(212,175,55,0.08);
      border: 1px solid rgba(212,175,55,0.30);
      color: #D4AF37;
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      padding: 6px 14px;
      border-radius: 17px;
      white-space: nowrap;
      transition: background .3s, border-color .3s;
    }
    .hero-trust-badge:hover {
      background: rgba(212,175,55,0.15);
      border-color: rgba(212,175,55,0.55);
    }
    .hero-trust-badge i { font-size: 9px; opacity: .9; }
    .hero-trust-divider {
      width: 3px; height: 3px;
      border-radius: 50%;
      background: rgba(212,175,55,0.35);
      flex-shrink: 0;
    }

    /* Main headline */
    .hero-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(28px, 3.8vw, 52px);
      font-weight: 700;
      color: var(--white);
      line-height: 1.18;
      margin-bottom: 22px;
      letter-spacing: -0.3px;
      animation: fadeSlideUp .4s ease both;
      animation-delay: .22s;
    }
    .hero-title span {
      background: linear-gradient(90deg, #F5D77A, #D4AF37, #F5D77A);
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: goldShimmer 4s linear infinite;
    }
    @keyframes goldShimmer {
      0%   { background-position: 0% center; }
      100% { background-position: 200% center; }
    }

    /* Subtext */
    .hero-sub {
      font-size: 15px;
      color: rgba(255,255,255,0.52);
      line-height: 1.75;
      margin-bottom: 36px;
      max-width: 500px;
      animation: fadeSlideUp .4s ease both;
      animation-delay: .34s;
    }

    /* CTA row */
    .hero-btns {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 52px;
      animation: fadeSlideUp .4s ease both;
      animation-delay: .46s;
    }

    /* Stats */
    .hero-stats {
      position: relative; z-index: 2;
      display: flex;
      flex-direction: row;
      align-items: stretch;
      justify-content: center;
      gap: 22px;
      margin-bottom: 44px;
      animation: fadeSlideUp .4s ease both;
      animation-delay: .58s;
    }
    .hero-stat {
      background: linear-gradient(160deg, rgba(212,175,55,0.12), rgba(255,255,255,0.03));
      border: 1px solid rgba(212,175,55,0.3);
      border-radius: 17px;
      padding: 20px 28px;
      backdrop-filter: blur(6px);
      box-shadow: 0 10px 26px rgba(0,0,0,0.28);
      transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
    }
    .hero-stat:hover {
      transform: translateY(-6px);
      border-color: rgba(212,175,55,0.65);
      background: linear-gradient(160deg, rgba(212,175,55,0.18), rgba(255,255,255,0.05));
      box-shadow: 0 16px 34px rgba(0,0,0,0.32), 0 0 26px rgba(212,175,55,0.22);
    }
    .hero-stat strong {
      display: block;
      font-size: 36px;
      font-weight: 800;
      color: #D4AF37;
      font-family: 'Playfair Display', serif;
      line-height: 1;
      text-shadow: 0 0 22px rgba(212,175,55,0.4);
    }
    .hero-stat span {
      font-size: 11.5px;
      color: rgba(255,255,255,0.72);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.3px;
      margin-top: 7px;
      display: block;
    }

    /* ─── CREDIBILITY STRIP ─── */
    .hero-cred-strip {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      padding: 14px 28px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 17px;
      animation: fadeSlideUp .4s ease both;
      animation-delay: .70s;
    }
    .hero-cred-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: 'Inter', sans-serif;
      font-size: 10.5px;
      font-weight: 500;
      color: rgba(255,255,255,0.44);
      letter-spacing: 0.4px;
      white-space: nowrap;
    }
    .hero-cred-item i {
      font-size: 10px;
      color: #D4AF37;
      opacity: .85;
    }
    .hero-cred-dot {
      width: 3px; height: 3px;
      border-radius: 50%;
      background: rgba(255,255,255,0.18);
      flex-shrink: 0;
    }

    /* ─── Removed: old logo block, old badge bar ─── */
    .hero-top-bar    { display: none; }
    .hero-badge-bar  { display: none; }
    .hero-logo       { display: none; }
    .hero-logo-icon  { display: none; }
    .hero-badge      { display: none; }
    /* ── Futuristic hero add-ons ── */
    .hero-particles {
      position: absolute; inset: 0; width: 100%; height: 100%;
      z-index: 1; pointer-events: none;
      -webkit-mask-image: radial-gradient(ellipse 480px 420px at 50% 52%, transparent 0%, transparent 55%, black 100%);
      mask-image: radial-gradient(ellipse 480px 420px at 50% 52%, transparent 0%, transparent 55%, black 100%);
    }
    .hero-spotlight {
      position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(245,197,24,0.14), transparent 70%);
      transition: background .1s ease-out;
    }
    .hero-rotate-word {
      color: var(--yellow);
      font-weight: 700;
      position: relative;
      display: inline-block;
      width: 168px; /* fixed to fit the longest rotating word ("Corporate Travel") so the
                        surrounding sentence never re-wraps and the hero never shifts/resizes */
      white-space: nowrap;
      overflow: hidden;
      vertical-align: bottom;
    }
    .hero-rotate-word.swap { animation: rotateWordIn .35s ease; }
    @keyframes rotateWordIn { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
    .hero-stat-dup-removed { display: none; } /* placeholder — duplicate removed */

    /* ── Sitewide scroll progress bar ── */
    #scroll-progress {
      position: fixed; top: 0; left: 0; height: 3px; width: 0%;
      background: linear-gradient(90deg, var(--amber), var(--yellow));
      box-shadow: 0 0 10px rgba(245,197,24,0.6);
      z-index: 9999;
      transition: width .1s ease-out;
    }

    /* ────────────── ANNOUNCEMENT TICKER ────────────── */
    #announcements { display: none; }
    .announce-ticker { display: flex; align-items: center; height: 44px; }
    .announce-label { background: var(--black); color: var(--yellow); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; padding: 0 20px; height: 100%; display: flex; align-items: center; white-space: nowrap; flex-shrink: 0; }
    .announce-track { flex: 1; overflow: hidden; }
    .announce-inner { display: flex; gap: 64px; animation: ticker 28s linear infinite; white-space: nowrap; padding: 0 32px; align-items: center; height: 44px; }
    .announce-inner:hover { animation-play-state: paused; }
    .announce-item { font-size: 13px; font-weight: 600; color: var(--black); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .announce-dot  { width: 6px; height: 6px; background: var(--black); border-radius: 50%; }
    @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

    /* ────────────── HOW TO BOOK (section 0) ─── beige-warm ── */
    #how-to-book {
      background:
        url('images/backgrounds/how_to_book_bg.webp') center / cover no-repeat;
      padding: 56px 0;
      position: relative;
      overflow: hidden;
    }
    /* Dark gradient overlay — keeps text readable */
    #how-to-book::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(
        to right,
        rgba(4,3,1,0.82) 0%,
        rgba(4,3,1,0.60) 50%,
        rgba(4,3,1,0.45) 100%
      );
    }
    .htb-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; position: relative; z-index: 3; }
    .htb-text h2 {
      font-family: 'Playfair Display', serif;
      font-size: 28px; font-weight: 700; margin-bottom: 8px;
      color: #fff;
      text-shadow: 0 2px 12px rgba(0,0,0,0.7), 0 0 30px rgba(245,197,24,0.25);
    }
    .htb-text p  {
      font-size: 15px;
      color: rgba(255,255,255,0.88);
      max-width: 420px;
      text-shadow: 0 1px 6px rgba(0,0,0,0.65);
    }
    .htb-actions { display: flex; gap: 12px; flex-wrap: wrap; }

    /* ────────────── 1. DESTINATIONS  ─── beige-lt ─── */
    #destinations { background: var(--beige-lt); }
    #destinations::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        url('images/backgrounds/airplane_clouds_bg.webp');
      background-size: cover;
      background-position: center 55%;
      background-repeat: no-repeat;
      opacity: 0.60;
    }
    .dest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .dest-grid > * { min-width: 0; }
    .dest-card { border-radius: 17px; overflow: hidden; cursor: pointer; position: relative; }
    .dest-img  { height: 260px; position: relative; overflow: hidden; background: #111; }
    .dest-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 50%); z-index: 1; transition: all .3s; }
    .dest-card:hover .dest-grad { background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.1) 100%); }
    .dest-info { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 20px; }
    .dest-name { font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 8px; font-family: 'Playfair Display', serif; }
    .dest-wa-btn { display: inline-flex; align-items: center; gap: 6px; background: #25D366; color: white; font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: 17px; opacity: 0; transition: opacity .25s; border: none; cursor: pointer; }
    .dest-card:hover .dest-wa-btn { opacity: 1; }
    @media (hover: none) { .dest-wa-btn { opacity: 1; } }
    .dest-book-now { width: auto; padding: 7px 14px; font-size: 12px; opacity: 0; }
    .dest-card:hover .dest-book-now { opacity: 1; }
    @media (hover: none) { .dest-book-now { opacity: 1; } }

    /* Any destination card */
    .any-dest-card { cursor: pointer; }
    .any-dest-img  { height: 260px; position: relative; overflow: hidden; background: #0A0A0A; display: flex; align-items: center; justify-content: center; border: 2px dashed rgba(245,197,24,0.35); border-radius: 17px; transition: all .3s; }
    .any-dest-card:hover .any-dest-img { border-color: var(--yellow); background: #151209; }
    .any-dest-inner { text-align: center; padding: 28px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 100%; }
    .any-plus-ring  { width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--yellow); display: flex; align-items: center; justify-content: center; background: rgba(245,197,24,0.08); transition: all .3s; flex-shrink: 0; }
    .any-dest-card:hover .any-plus-ring { background: var(--yellow); transform: scale(1.1); }
    .any-plus { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 38px; font-weight: 300; color: var(--yellow); line-height: 1; transition: color .3s; }
    .any-dest-card:hover .any-plus { color: var(--black); }
    .any-dest-title { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--white); line-height: 1.3; }
    .any-dest-btn   { display: inline-flex; align-items: center; gap: 6px; background: #25D366; color: white; font-size: 12px; font-weight: 700; padding: 9px 18px; border-radius: 17px; border: none; cursor: pointer; transition: all .2s; margin-top: 4px; }
    .any-dest-btn:hover { background: #1da851; transform: translateY(-1px); }
    .any-dest-book-now { width: auto; padding: 9px 18px; font-size: 12px; margin-top: 4px; }

    /* ────────────── 2B. PACKAGES  ─── beige-lt ─── */
    #packages { background: #0A0A0A; }
    #packages::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        linear-gradient(to bottom, rgba(0,0,0,0.48) 0%, rgba(0,0,0,0.32) 45%, rgba(0,0,0,0.52) 100%),
        url('images/backgrounds/paris_eiffel_tower_bg.webp');
      background-size: cover, cover;
      background-position: center center, center center;
      background-repeat: no-repeat, no-repeat;
      opacity: 1;
    }
    #packages .section-header .eyebrow { color: #f5c518; text-shadow: 0 1px 8px rgba(0,0,0,0.9); }
    #packages .section-header h2,
    #packages .section-header p { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.95), 0 4px 32px rgba(0,0,0,0.85); }
    #packages .section-header { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; padding: 0; display: block; width: auto; max-width: 620px; margin: 0 auto; }
    #packages .section-header,
    #packages .pkg-grid { position: relative; z-index: 1; }
    .pkg-grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
    .pkg-grid > * { min-width: 0; }
    .pkg-card  { border-radius: 17px; overflow: hidden; box-shadow: var(--shadow); transition: all .25s; border: 1px solid rgba(0,0,0,0.05); background: var(--white); }
    .pkg-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
    .pkg-any-card { border: 2px dashed rgba(212,175,55,0.35); background: #0f0f0f !important; }
    .pkg-any-card:hover { border-color: var(--yellow); box-shadow: 0 0 24px rgba(212,175,55,0.18); }
    .pkg-any-card h3 { color: #fff !important; }
    .pkg-any-card p  { color: rgba(255,255,255,0.55) !important; }
    .pkg-img   { height: 220px; position: relative; overflow: hidden; background: #111; }
    .pkg-img img { transition: transform .4s ease; }
    .pkg-card:hover .pkg-img img { transform: scale(1.05); }
    .pkg-body  { padding: 24px; }
    .pkg-meta  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .pkg-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--black); }
    .pkg-card p  { font-size: 13px; color: var(--gray); margin-bottom: 16px; line-height: 1.6; }
    .pkg-includes { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
    .pkg-incl  { font-size: 12px; color: var(--gray); display: flex; align-items: center; gap: 4px; }
    .pkg-incl i { color: var(--amber); }
    .pkg-footer { display: flex; align-items: center; justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--beige-lt); gap: 8px; }
    .pkg-book-btns { display: flex; gap: 6px; }
    .pkg-book-btns button { border: none; border-radius: 17px; padding: 9px 13px; font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all .2s; }
    .btn-pkg-wa    { background: #25D366; color: white; }
    .btn-pkg-wa:hover { background: #1da851; transform: translateY(-1px); }
    .btn-pkg-email { background: #1a73e8; color: white; }
    .btn-pkg-email:hover { background: #1557b0; transform: translateY(-1px); }

    /* ── Dark mirror-glass "Book Now" button (replaces Book + Email pairs) ── */
    .btn-book-now {
      border: none;
      border-radius: 17px;
      padding: 10px 18px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.2px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      width: 100%;
      color: #fff;
      background: linear-gradient(145deg, rgba(50,50,55,0.95) 0%, rgba(15,15,18,0.95) 45%, rgba(40,40,46,0.95) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 6px rgba(0,0,0,0.5),
        0 6px 16px rgba(0,0,0,0.35);
      position: relative;
      overflow: hidden;
      transition: transform .2s ease, box-shadow .2s ease, background .3s ease;
    }
    .btn-book-now::before {
      content: "";
      position: absolute;
      top: 0; left: -60%;
      width: 50%; height: 100%;
      background: linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent);
      transform: skewX(-20deg);
      transition: left .5s ease;
    }
    .btn-book-now:hover {
      transform: translateY(-2px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -1px 6px rgba(0,0,0,0.5),
        0 10px 24px rgba(0,0,0,0.45);
      background: linear-gradient(145deg, rgba(65,65,70,0.95) 0%, rgba(20,20,24,0.95) 45%, rgba(55,55,62,0.95) 100%);
    }
    .btn-book-now:hover::before { left: 120%; }
    .btn-book-now i { font-size: 12px; opacity: 0.9; }



    /* ────────────── 2. SPIRITUAL TOURS  ─── beige-warm ─── */
    #spiritual { background: var(--beige-warm); }
    #spiritual::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        url('images/backgrounds/sheikh_zayed_mosque_bg.webp');
      background-size: cover;
      background-position: center 35%;
      background-repeat: no-repeat;
      opacity: 0.55;
    }
    .spirit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
    .spirit-grid > * { min-width: 0; }
    .spirit-card { border-radius: 17px; overflow: hidden; box-shadow: var(--shadow); transition: all .25s; border: 1px solid rgba(0,0,0,0.05); background: var(--white); cursor: pointer; }
    .spirit-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
    .spirit-img  { height: 220px; position: relative; overflow: hidden; background: #111; }
    .spirit-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform .4s ease; }
    .spirit-card:hover .spirit-img img { transform: scale(1.05); }
    .spirit-body { padding: 24px; }
    .spirit-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--black); font-family: 'Playfair Display', serif; }
    .spirit-card p  { font-size: 13px; color: var(--gray); margin-bottom: 16px; line-height: 1.6; min-height: 42px; }
    .spirit-footer { display: flex; align-items: center; justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--beige-lt); gap: 8px; }
    .spirit-book-btns { display: flex; gap: 6px; }
    .spirit-book-btns button { border: none; border-radius: 17px; padding: 9px 13px; font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all .2s; }

    /* Spiritual "Any Destination"-style plus card */
    .spirit-any-card { cursor: pointer; background: transparent; box-shadow: none; border: none; }
    .spirit-any-card:hover { transform: none; box-shadow: none; }
    .spirit-any-inner { height: 100%; min-height: 320px; position: relative; overflow: hidden; background: linear-gradient(rgba(10,8,4,0.92), rgba(10,8,4,0.92)), url('images/spiritual/spiritual_any_bg.webp') center/cover no-repeat; display: flex; align-items: center; justify-content: center; border: 2px dashed rgba(245,197,24,0.35); border-radius: 17px; transition: all .3s; }
    .spirit-any-card:hover .spirit-any-inner { border-color: var(--yellow); background: linear-gradient(rgba(10,8,4,0.82), rgba(10,8,4,0.82)), url('images/spiritual/spiritual_any_bg.webp') center/cover no-repeat; }
    .spirit-any-content { text-align: center; padding: 28px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 100%; }
    .spirit-any-content .any-plus-ring  { width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--yellow); display: flex; align-items: center; justify-content: center; background: rgba(245,197,24,0.08); transition: all .3s; flex-shrink: 0; }
    .spirit-any-card:hover .any-plus-ring { background: var(--yellow); transform: scale(1.1); }
    .spirit-any-content .any-plus { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 38px; font-weight: 300; color: var(--yellow); line-height: 1; transition: color .3s; }
    .spirit-any-card:hover .any-plus { color: var(--black); }
    .spirit-any-content .any-dest-title { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--white); line-height: 1.3; }
    .spirit-any-content .any-dest-btn   { display: inline-flex; align-items: center; gap: 6px; background: #25D366; color: white; font-size: 12px; font-weight: 700; padding: 9px 18px; border-radius: 17px; border: none; cursor: pointer; transition: all .2s; margin-top: 4px; }
    .spirit-any-content .any-dest-btn:hover { background: #1da851; transform: translateY(-1px); }
    @media (max-width: 860px) {
      .spirit-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
      .spirit-grid { grid-template-columns: 1fr; }
    }

    /* ────────────── 3. VISA  ─── photo bg ─── */
    #visa { background: #0A0A0A; }
    #visa::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        linear-gradient(to bottom, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.42) 45%, rgba(0,0,0,0.68) 100%),
        url('images/backgrounds/visa_city_skyline_bg.webp');
      background-size: cover, cover;
      background-position: center center, center center;
      background-repeat: no-repeat, no-repeat;
      opacity: 1;
    }
    #visa .section-header .eyebrow { color: #f5c518; text-shadow: 0 1px 8px rgba(0,0,0,0.9); }
    #visa .section-header h2,
    #visa .section-header p { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.95), 0 4px 32px rgba(0,0,0,0.85); }
    #visa .process-step h4 { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.9); }
    #visa .process-step p  { color: rgba(255,255,255,0.82); text-shadow: 0 1px 8px rgba(0,0,0,0.85); }
    #visa .process-step:not(:last-child)::after { background: rgba(255,255,255,0.25); }
    .visa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; max-width: 920px; margin-left: auto; margin-right: auto; }
    .visa-grid > * { min-width: 0; }
    .visa-card { background: var(--white); border-radius: 17px; overflow: hidden; border: 1.5px solid transparent; transition: all .25s; cursor: pointer; }
    .visa-card:hover { border-color: var(--yellow); transform: translateY(-3px); box-shadow: var(--shadow); }
    .visa-img  { height: 140px; position: relative; overflow: hidden; background: #111; }
    .visa-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
    .visa-card:hover .visa-img img { transform: scale(1.06); }
    .visa-body { padding: 18px; position: relative; }
    .visa-icon { font-size: 18px; margin-top: -30px; margin-bottom: 8px; width: 38px; height: 38px; background: var(--white); border-radius: 17px; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
    .visa-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
    .visa-card p  { font-size: 12.5px; color: var(--gray); line-height: 1.5; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .visa-card .btn-sm { padding: 9px 10px; font-size: 12px; }
    .visa-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 56px; }
    .visa-process > * { min-width: 0; }
    .process-step { text-align: center; padding: 32px 20px; position: relative; }
    .process-step:not(:last-child)::after { content:''; position: absolute; right: 0; top: 48px; width: 1px; height: 40px; background: var(--lgray); }
    .step-num  { width: 48px; height: 48px; border-radius: 50%; background: var(--yellow); color: var(--black); font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-family: 'Playfair Display', serif; }
    .process-step h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
    .process-step p  { font-size: 13px; color: var(--gray); line-height: 1.55; }

    /* ────────────── 4. SERVICES  ─── photo bg ─── */
    #services { background: var(--white); }
    #services::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        url('images/backgrounds/beach_sunset_bg.webp');
      background-size: cover;
      background-position: center 40%;
      background-repeat: no-repeat;
      opacity: 0.62;
    }
    .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
    .services-grid > * { min-width: 0; }
    .service-card { background: var(--white); border-radius: var(--radius); padding: 32px 28px; transition: all .25s; border: 1.5px solid transparent; cursor: pointer; }
    .service-card:hover { border-color: var(--yellow); transform: translateY(-4px); box-shadow: var(--shadow-md); }
    .svc-icon { width: 52px; height: 52px; background: rgba(245,197,24,0.15); border-radius: 17px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-size: 22px; color: var(--amber); transition: all .25s; }
    .service-card:hover .svc-icon { background: var(--yellow); color: var(--black); }
    .service-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
    .service-card p  { font-size: 14px; color: var(--gray); line-height: 1.65; margin-bottom: 16px; }
    .service-card a  { font-size: 13px; font-weight: 600; color: var(--amber); display: inline-flex; align-items: center; gap: 5px; }
    .service-card a:hover { gap: 9px; }

    /* ────────────── 5. CORPORATE  ─── photo bg ─── */
    #corporate { background: var(--beige-warm); }
    #corporate::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        url('images/backgrounds/airplane_stars_bg.webp');
      background-size: cover;
      background-position: center 38%;
      background-repeat: no-repeat;
      opacity: 0.60;
    }
    .corp-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; min-width: 0; }
    .corp-inner > * { min-width: 0; }
    .corp-services { display: grid; gap: 12px; margin-top: 32px; }
    .corp-svc { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--white); border-radius: 17px; font-size: 14px; font-weight: 500; border-left: 3px solid var(--yellow); min-width: 0; }
    .corp-svc i { color: var(--amber); width: 18px; }
    .corp-svc span { min-width: 0; overflow-wrap: break-word; }
    .corp-right { background: var(--black); border-radius: 17px; padding: 48px; color: var(--white); min-width: 0; }
    .corp-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 32px; }
    .corp-stat-grid > * { min-width: 0; }
    .corp-stat strong { display: block; font-family: 'Playfair Display', serif; font-size: 40px; font-weight: 700; color: var(--yellow); overflow-wrap: break-word; }
    .corp-stat span   { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 4px; display: block; }

    /* ────────────── 6. BLOG  ─── photo bg ─── */
    #blog { background: var(--beige-lt); }
    #blog::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        url('images/backgrounds/beach_resort_bg.webp');
      background-size: cover;
      background-position: center 30%;
      background-repeat: no-repeat;
      opacity: 0.58;
    }
    .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
    .blog-grid > * { min-width: 0; }
    .blog-card { border-radius: 17px; overflow: hidden; border: 1px solid rgba(0,0,0,0.06); transition: all .3s; background: var(--white); box-shadow: var(--shadow); display: flex; flex-direction: column; }
    .blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
    .blog-img-real { height: 220px; position: relative; overflow: hidden; background: #111; flex-shrink: 0; }
    .blog-img-real img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; display: block; }
    .blog-card:hover .blog-img-real img { transform: scale(1.06); }
    .blog-img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 60%); }
    .blog-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
    .blog-cat  { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--amber); margin-bottom: 12px; }
    .blog-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 12px; line-height: 1.4; color: var(--black); font-family: 'Playfair Display', serif; }
    .blog-card p  { font-size: 13px; color: var(--gray); line-height: 1.75; margin-bottom: 18px; flex: 1; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
    .blog-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
    .blog-tag  { font-size: 11px; font-weight: 600; padding: 4px 10px; background: var(--beige-lt); color: var(--gray); border-radius: 17px; border: 1px solid var(--lgray); }
    .blog-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--beige-lt); gap: 8px; flex-wrap: wrap; }
    .blog-meta { font-size: 12px; color: var(--lgray); }
    .blog-read-btn {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 12px; font-weight: 700; padding: 8px 14px; border-radius: 17px;
      border: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .3s ease;
      white-space: nowrap; color: #fff;
      background: linear-gradient(145deg, rgba(50,50,55,0.95) 0%, rgba(15,15,18,0.95) 45%, rgba(40,40,46,0.95) 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 6px rgba(0,0,0,0.5), 0 6px 16px rgba(0,0,0,0.35);
      position: relative; overflow: hidden;
    }
    .blog-read-btn::before {
      content: ""; position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
      background: linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent);
      transform: skewX(-20deg); transition: left .5s ease;
    }
    .blog-read-btn:hover {
      transform: translateY(-1px);
      background: linear-gradient(145deg, rgba(65,65,70,0.95) 0%, rgba(20,20,24,0.95) 45%, rgba(55,55,62,0.95) 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 6px rgba(0,0,0,0.5), 0 10px 24px rgba(0,0,0,0.45);
    }
    .blog-read-btn:hover::before { left: 120%; }

    /* ────────────── 7. WHY US  ─── photo bg ─── */
    #why { background: var(--white); }
    #why::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        url('images/backgrounds/venice_bg.webp');
      background-size: cover;
      background-position: center 30%;
      background-repeat: no-repeat;
      opacity: 0.60;
    }
    .why-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; min-width: 0; }
    .why-inner > * { min-width: 0; }
    .why-features { display: grid; gap: 16px; margin-top: 32px; }
    .why-feat { display: flex; align-items: flex-start; gap: 16px; padding: 20px; background: var(--white); border-radius: 17px; min-width: 0; }
    .feat-icon { width: 44px; height: 44px; min-width: 44px; background: var(--yellow); border-radius: 17px; display: flex; align-items: center; justify-content: center; color: var(--black); font-size: 18px; }
    .feat-text { min-width: 0; flex: 1; }
    .feat-text strong { display: block; font-size: 15px; font-weight: 700; margin-bottom: 4px; }
    .feat-text p { font-size: 13px; color: var(--gray); line-height: 1.55; overflow-wrap: break-word; }
    .why-right { background: var(--black); border-radius: 17px; padding: 48px; color: var(--white); text-align: center; min-width: 0; }
    .why-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 28px; }
    .why-stat-grid > * { min-width: 0; }
    .why-stat strong { display: block; font-family: 'Playfair Display', serif; font-size: 42px; font-weight: 700; color: var(--yellow); overflow-wrap: break-word; }
    .why-stat span   { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 4px; display: block; }

    /* ────────────── 8. FLIGHTS  ─── photo bg ─── */
    #flights { background: var(--beige-lt); }
    #team { background: #0A0A0A; }
    #team::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        linear-gradient(to bottom, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0.68) 100%),
        url('images/backgrounds/team_hot_air_balloons_bg.jpg');
      background-size: cover, cover;
      background-position: center center, center center;
      background-repeat: no-repeat, no-repeat;
      opacity: 1;
    }
    #team .section-header .eyebrow { color: #f5c518; text-shadow: 0 1px 8px rgba(0,0,0,0.9); }
    #team .section-header h2,
    #team .section-header p { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.95), 0 4px 32px rgba(0,0,0,0.85); }
    #team .section-header,
    #team .team-lead-row,
    #team .team-grid { position: relative; z-index: 1; }
    #flights::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        url('images/backgrounds/runway_night_bg.webp');
      background-size: cover;
      background-position: center 50%;
      background-repeat: no-repeat;
      opacity: 0.55;
    }
    .flights-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; min-width: 0; }
    .flights-inner > * { min-width: 0; }
    .flights-left .eyebrow { color: var(--amber); }
    .flights-left .h2 { color: var(--black); margin-bottom: 20px; }
    .flights-left p   { color: var(--gray); margin-bottom: 36px; }
    .flight-services  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 36px; }
    .flight-services > * { min-width: 0; }
    .flight-svc { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--dark); min-width: 0; }
    .flight-svc i { color: var(--amber); width: 16px; }
    .flight-svc span { min-width: 0; overflow-wrap: break-word; }
    .airlines-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .airlines-grid > * { min-width: 0; }
    .airlines-grid > * { min-width: 0; }
    .airline-card { background: var(--white); border: 1.5px solid rgba(0,0,0,0.08); border-radius: 17px; padding: 20px; text-align: center; transition: all .2s; box-shadow: var(--shadow); }
    .airline-card:hover { border-color: var(--yellow); transform: translateY(-3px); box-shadow: var(--shadow-md); }
    .airline-logo { background: var(--beige-lt); border-radius: 17px; padding: 10px 12px; height: 52px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
    .airline-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
    .airline-name { font-size: 13px; font-weight: 700; color: var(--black); }
    .airline-type { font-size: 11px; color: var(--gray); margin-top: 2px; }

    /* ────────────── 9. REVIEWS  ─── photo bg ─── */
    #reviews { background: var(--beige-warm); }
    #reviews::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        url('images/backgrounds/safari_sunset_bg.webp');
      background-size: cover;
      background-position: center 50%;
      background-repeat: no-repeat;
      opacity: 0.55;
    }
    .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
    .reviews-grid > * { min-width: 0; }
    /* Override section-header for light bg */
    #reviews .eyebrow { color: var(--amber); }
    #reviews .h2      { color: var(--black); }
    /* Cards sit as soft white panels */
    .review-card { background: var(--white); border-radius: 17px; padding: 32px 28px; position: relative; border: 1px solid rgba(0,0,0,0.06); box-shadow: var(--shadow); }
    .review-card::before { content: '"'; font-family: 'Playfair Display', serif; font-size: 80px; color: var(--yellow); position: absolute; top: 16px; right: 24px; line-height: 1; opacity: 0.5; }

    /* ── Read More Reviews (small / tablet & mobile devices only) ── */
    .rv-readmore-wrap { display: none; justify-content: center; margin-top: 32px; }
    .rv-readmore-btn { background: var(--yellow); color: var(--black); border: 2px solid var(--yellow); }
    .rv-readmore-btn i { transition: transform .25s ease; }
    .rv-readmore-btn:hover { background: var(--amber); border-color: var(--amber); color: var(--black); }
    .rv-readmore-btn[aria-expanded="true"] i { transform: rotate(180deg); }
    @media (max-width: 1024px) {
      .rv-readmore-wrap.is-active { display: flex; }
      .review-card.rv-extra { display: none; }
      .review-card.rv-extra.rv-show { display: block; }
    }
    .stars { color: var(--amber); font-size: 14px; margin-bottom: 16px; letter-spacing: 2px; }
    .review-text { font-size: 15px; line-height: 1.75; color: var(--dark); margin-bottom: 24px; font-style: italic; }
    .reviewer { display: flex; align-items: center; gap: 12px; }
    .rev-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--yellow); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: var(--black); }
    .rev-name  { font-weight: 700; font-size: 14px; color: var(--black); }
    .rev-title { font-size: 12px; color: var(--gray); }

    /* ────────────── 10. CONTACT  ─── photo bg ─── */
    #contact { background: var(--white); }
    #contact::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        url('images/backgrounds/contact_sunset_plane_bg.webp');
      background-size: cover;
      background-position: center 40%;
      background-repeat: no-repeat;
      opacity: 0.58;
    }
    .contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; min-width: 0; }
    .contact-inner > * { min-width: 0; }
    .contact-form-box { background: var(--white); border-radius: 17px; padding: 40px; box-shadow: var(--shadow-md); min-width: 0; }
    .form-group { margin-bottom: 16px; min-width: 0; }
    .form-group label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--gray); margin-bottom: 8px; }
    .form-group input, .form-group select, .form-group textarea { width: 100%; max-width: 100%; padding: 13px 16px; border: 1.5px solid var(--lgray); border-radius: 17px; font-size: 14px; font-family: 'Inter', sans-serif; color: var(--black); background: var(--white); outline: none; transition: border-color .2s; }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--yellow); }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-row > * { min-width: 0; }

    /* ────────────── CTA ─── photo bg ─── */
    #cta { background: var(--beige-lt); text-align: center; padding: 100px 24px; position: relative; overflow: hidden; }
    #cta::before { content:'✈'; font-size: 300px; position: absolute; left: -60px; top: 50%; transform: translateY(-50%) rotate(-15deg); opacity: 0.05; color: var(--yellow); z-index: 0; }
    #cta::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        url('images/backgrounds/milkyway_plane_bg.webp');
      background-size: cover;
      background-position: center 45%;
      background-repeat: no-repeat;
      opacity: 0.62;
    }
    #cta .h2, #cta p, #cta .cta-btns { position: relative; z-index: 1; }
    #cta .h2 { color: var(--black); margin-bottom: 16px; }
    #cta p   { color: var(--gray); font-size: 17px; margin-bottom: 40px; }
    .cta-btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
    #cta .btn-outline { color: var(--black); border: 2px solid rgba(10,10,10,0.25); }
    #cta .btn-outline:hover { background: var(--black); color: var(--white); border-color: var(--black); }

    /* ────────────── FOOTER  ─── deep black ─── */
    /* ═══════════════════════════════════════════════════════
       FOOTER — PREMIUM REDESIGN
    ═══════════════════════════════════════════════════════ */

    /* Newsletter Banner */
    .footer-newsletter {
      background: linear-gradient(135deg, #111 0%, #1a1500 100%);
      border-top: 1px solid rgba(245,197,24,0.25);
      border-bottom: 1px solid rgba(245,197,24,0.15);
      padding: 36px 0;
    }
    .newsletter-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      flex-wrap: wrap;
    }
    .newsletter-text h3 {
      font-size: 20px; font-weight: 700; color: var(--yellow);
      margin: 0 0 6px;
    }
    .newsletter-text p {
      font-size: 14px; color: rgba(255,255,255,0.55); margin: 0;
    }
    .newsletter-form {
      display: flex; gap: 10px; flex-wrap: wrap;
    }
    .newsletter-form input {
      padding: 12px 18px; border-radius: 17px;
      border: 1px solid rgba(245,197,24,0.3);
      background: rgba(255,255,255,0.06);
      color: #fff; font-size: 14px; min-width: 240px;
      outline: none; transition: border-color .2s;
    }
    .newsletter-form input::placeholder { color: rgba(255,255,255,0.35); }
    .newsletter-form input:focus { border-color: var(--yellow); }
    .newsletter-form button {
      padding: 12px 24px; border-radius: 17px;
      background: var(--yellow); color: #0A0A0A;
      font-weight: 700; font-size: 14px;
      border: none; cursor: pointer;
      transition: opacity .2s, transform .2s;
    }
    .newsletter-form button:hover { opacity: .85; transform: translateY(-1px); }

    /* Main footer bg */
    footer {
      background: #0A0A0A;
      color: rgba(255,255,255,0.6);
      position: relative; overflow: hidden;
    }
    /* Dot pattern layer */
    footer > .container::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image: radial-gradient(var(--yellow) 1px, transparent 1.1px);
      background-size: 28px 28px;
      opacity: 0.07; z-index: 0;
    }
    footer > .container { position: relative; z-index: 1; }

    /* Trust badges row */
    .footer-trust {
      display: flex; flex-wrap: wrap; gap: 12px;
      padding: 36px 0 0;
      border-bottom: 1px solid rgba(245,197,24,0.1);
      padding-bottom: 28px;
    }
    .trust-badge {
      display: flex; align-items: center; gap: 8px;
      font-size: 13px; color: rgba(255,255,255,0.7);
      background: rgba(245,197,24,0.07);
      border: 1px solid rgba(245,197,24,0.18);
      border-radius: 17px;
      padding: 6px 14px;
      font-weight: 500;
    }
    .trust-badge i { color: var(--yellow); font-size: 12px; }

    /* Four-column grid — equal widths */
    .footer-top {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 44px;
      padding: 60px 0 52px;
    }
    .footer-top > * { min-width: 0; }

    /* ── Col 1: Brand ── */
    .footer-logo-link {
      display: flex; align-items: center; gap: 14px;
      text-decoration: none; margin-bottom: 18px;
    }
    .footer-logo-img {
      width: 48px; height: 48px; object-fit: contain;
      border-radius: 17px;
      background: rgba(255,255,255,0.06);
      padding: 6px;
      flex-shrink: 0;
    }
    .footer-logo-name {
      font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.3px;
    }
    .footer-logo-name span { color: var(--yellow); }
    .footer-logo-sub {
      font-size: 11px; color: rgba(255,255,255,0.45); letter-spacing: .5px;
      margin-top: 2px;
    }
    .footer-about {
      font-size: 13.5px; line-height: 1.8;
      color: rgba(255,255,255,0.45);
      margin: 0 0 20px;
    }

    /* Certifications */
    .footer-certs {
      display: flex; flex-direction: column; gap: 7px;
      margin-bottom: 22px;
    }
    .cert-badge {
      font-size: 12.5px; color: rgba(255,255,255,0.6);
      display: flex; align-items: center; gap: 7px;
    }
    .cert-badge i { color: var(--yellow); font-size: 11px; }

    /* Social icons — glass circular */
    .footer-social { display: flex; gap: 10px; flex-wrap: wrap; }
    .social-btn {
      width: 40px; height: 40px; border-radius: 50%;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; color: rgba(255,255,255,0.55);
      transition: background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s;
    }
    .social-btn:hover {
      background: var(--yellow);
      color: #0A0A0A;
      border-color: var(--yellow);
      transform: translateY(-3px) scale(1.08);
      box-shadow: 0 6px 20px rgba(245,197,24,0.35);
    }

    /* ── Col 2 & 3: Links ── */
    .footer-col h4 {
      font-size: 14px; font-weight: 700; letter-spacing: .6px;
      text-transform: uppercase; color: var(--white);
      margin-bottom: 22px;
      display: flex; align-items: center; gap: 8px;
    }
    .footer-col-icon { color: var(--yellow); font-size: 14px; }
    .footer-col a {
      display: block; font-size: 14.5px; font-weight: 400;
      color: rgba(255,255,255,0.5);
      padding: 7px 0;
      transition: color .25s, transform .25s;
      position: relative;
    }
    .footer-col a::after {
      content: ''; position: absolute;
      bottom: 4px; left: 0;
      height: 1px; width: 0;
      background: var(--yellow);
      transition: width .25s;
    }
    .footer-col a:hover {
      color: var(--yellow);
      transform: translateX(4px);
    }
    .footer-col a:hover::after { width: 100%; }

    /* ── Col 4: Contact Cards ── */
    .contact-card {
      display: flex; align-items: center; gap: 12px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 17px;
      padding: 11px 14px;
      margin-bottom: 10px;
      font-size: 13.5px;
      transition: border-color .2s, background .2s;
    }
    .contact-card:hover {
      border-color: rgba(245,197,24,0.3);
      background: rgba(245,197,24,0.05);
    }
    .contact-card i { color: var(--yellow); width: 16px; flex-shrink: 0; font-size: 14px; }
    .contact-card a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color .2s; }
    .contact-card a:hover { color: var(--yellow); }
    .contact-card span { color: rgba(255,255,255,0.65); }

    /* QR Premium Card */
    .footer-qr {
      display: block;
      margin-top: 14px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(245,197,24,0.25);
      border-radius: 17px;
      overflow: hidden;
      text-decoration: none;
      transition: border-color .25s, background .25s, transform .25s, box-shadow .25s;
    }
    .footer-qr:hover {
      border-color: rgba(245,197,24,0.55);
      background: rgba(245,197,24,0.06);
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(245,197,24,0.12);
    }
    .qr-top-bar {
      background: rgba(245,197,24,0.1);
      border-bottom: 1px solid rgba(245,197,24,0.2);
      padding: 9px 14px;
      font-size: 12px; font-weight: 600;
      color: var(--yellow);
      letter-spacing: .4px;
      display: flex; align-items: center; gap: 6px;
    }
    .qr-body {
      display: flex; align-items: center; gap: 14px;
      padding: 14px;
    }
    .footer-qr img {
      width: 62px; height: 62px;
      border-radius: 17px;
      background: #fff;
      padding: 4px; flex-shrink: 0;
    }
    .qr-label {
      display: block;
      font-size: 13px; font-weight: 600;
      color: rgba(255,255,255,0.8);
      margin-bottom: 5px;
    }
    .qr-sub {
      display: block;
      font-size: 12px;
      color: rgba(255,255,255,0.45);
      transition: color .2s;
    }
    .footer-qr:hover .qr-sub { color: var(--yellow); }

    /* Gold divider */
    .footer-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(245,197,24,0.35) 40%, rgba(245,197,24,0.35) 60%, transparent);
      opacity: 0.8;
      margin-bottom: 0;
    }

    /* Bottom bar */
    .footer-bottom {
      padding: 22px 0;
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 12px;
      font-size: 13px; color: rgba(255,255,255,0.4);
    }
    .footer-bottom span { color: var(--yellow); }
    .footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
    .footer-legal a {
      color: rgba(255,255,255,0.4); text-decoration: none;
      transition: color .2s;
    }
    .footer-legal a:hover { color: var(--yellow); }
    .footer-credit {
      color: #ffffff; /* fallback if background-clip:text isn't supported */
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: .3px;
      text-shadow: 0 0 8px rgba(245,197,24,0.45), 0 1px 3px rgba(0,0,0,0.6);
      position: relative;
      display: inline-block;
      background: linear-gradient(90deg, #ffffff 0%, #ffffff 40%, #fff7d6 50%, #ffffff 60%, #ffffff 100%);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: footerCreditShine 4s linear infinite;
    }
    .footer-credit-brand {
      color: var(--yellow);
      -webkit-text-fill-color: var(--yellow);
      font-weight: 800;
      text-shadow: 0 0 10px rgba(245,197,24,0.7), 0 1px 3px rgba(0,0,0,0.6);
    }
    @keyframes footerCreditShine {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* ────────────── WHATSAPP WIDGET ─── */
    #wa-widget { position: fixed; bottom: 28px; right: 28px; z-index: 9999; font-family: 'Inter', sans-serif; }
    .wa-bubble  { width: 60px; height: 60px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: white; box-shadow: 0 6px 24px rgba(37,211,102,0.5); cursor: pointer; transition: all .2s; position: relative; margin-left: auto; }
    .wa-bubble:hover { transform: scale(1.08); box-shadow: 0 8px 30px rgba(37,211,102,0.6); }
    .wa-pulse   { position: absolute; top: -3px; right: -3px; width: 18px; height: 18px; background: #ff4444; border-radius: 50%; border: 2px solid white; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: white; animation: pulse-ring 2s infinite; }
    @keyframes pulse-ring { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }
    .wa-panel   { display: none; position: absolute; bottom: 76px; right: 0; width: 340px; background: white; border-radius: 17px; box-shadow: 0 20px 60px rgba(0,0,0,0.18); overflow: hidden; }
    .wa-panel.open { display: block; }
    .wa-panel-head { background: #25D366; padding: 20px; color: white; }
    .wa-panel-head h4 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
    .wa-panel-head p  { font-size: 12px; opacity: 0.85; }
    .wa-panel-head .online-dot { display: inline-block; width: 8px; height: 8px; background: #a8ff78; border-radius: 50%; margin-right: 5px; animation: blink 1.4s infinite; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
    .wa-panel-body { padding: 20px; }
    .wa-panel-body p { font-size: 14px; color: var(--gray); margin-bottom: 16px; line-height: 1.6; }
    .wa-quick-btns  { display: grid; gap: 10px; }
    .wa-quick-btn   { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 17px; border: none; cursor: pointer; font-size: 14px; font-weight: 600; text-align: left; transition: all .2s; width: 100%; }
    .wa-quick-btn.green { background: #f0fff5; color: #1a7a3a; border: 1.5px solid #c3f0d0; }
    .wa-quick-btn.green:hover { background: #25D366; color: white; }
    .wa-quick-btn.blue  { background: #f0f6ff; color: #1a4a8a; border: 1.5px solid #c3d8f0; }
    .wa-quick-btn.blue:hover  { background: #1a73e8; color: white; }
    .wa-quick-btn i { font-size: 18px; }
    .wa-tip { font-size: 11px; color: var(--lgray); text-align: center; margin-top: 14px; }

    /* ────────────── BOOKING MODAL ─── */
    #booking-modal { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,0.65); backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
    #booking-modal.open { display: flex; }
    .modal-box  { background: white; border-radius: 17px; width: 100%; max-width: 520px; box-shadow: 0 30px 80px rgba(0,0,0,0.3); animation: modalIn .25s ease; }
    @keyframes modalIn { from{transform:scale(.95);opacity:0} to{transform:scale(1);opacity:1} }
    .modal-head { background: var(--black); padding: 28px 32px; display: flex; justify-content: space-between; align-items: center; border-radius: 17px 17px 0 0; }
    .modal-head h3 { font-family: 'Playfair Display', serif; font-size: 22px; color: white; }
    .modal-head p  { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 4px; }
    .modal-close   { width: 36px; height: 36px; border-radius: 17px; background: rgba(255,255,255,0.1); border: none; color: white; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .modal-close:hover { background: rgba(255,255,255,0.2); }
    .modal-body { padding: 28px 32px; }
    .pkg-summary { background: var(--beige-lt); border-radius: 17px; padding: 16px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
    .pkg-summary-name  { font-weight: 700; font-size: 15px; }
    .pkg-summary-price { font-size: 18px; font-weight: 700; color: var(--amber); font-family: 'Playfair Display', serif; }
    .modal-input { width: 100%; padding: 12px 16px; border: 1.5px solid var(--lgray); border-radius: 17px; font-size: 14px; font-family: 'Inter', sans-serif; color: var(--black); outline: none; transition: border-color .2s; margin-bottom: 12px; }
    .modal-input:focus { border-color: var(--yellow); }
    .modal-send-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
    .modal-send-btns button { padding: 14px; border: none; border-radius: 17px; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all .2s; }
    .msb-wa    { background: #25D366; color: white; }
    .msb-wa:hover    { background: #1da851; }
    .msb-email { background: #1a73e8; color: white; }
    .msb-email:hover { background: #1557b0; }
    /* ── Trip Planner Modal ───────────────────────────────── */
    /* ── Custom Dropdown (replaces native <select> popups, which can't be
       styled with gradients/text-shadow due to browser limitations) ── */
    .cs-wrap { position: relative; margin-bottom: 12px; }
    .cs-native-hidden { position: absolute !important; opacity: 0 !important; pointer-events: none !important; height: 1px !important; width: 1px !important; overflow: hidden !important; margin: 0 !important; }
    .cs-trigger {
      width: 100%; text-align: left; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 14px;
      padding: 12px 40px 12px 16px; border-radius: 17px; border: 1.5px solid #F5C518;
      background: linear-gradient(135deg, #1a1200 0%, #0A0A0A 55%, #2a1d00 100%);
      color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.7);
      position: relative; transition: box-shadow .2s, border-color .2s;
    }
    .cs-trigger::after {
      content: '▾'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
      color: #F5C518; font-size: 13px;
    }
    .cs-trigger:hover, .cs-wrap.cs-open .cs-trigger { border-color: #ffd633; box-shadow: 0 0 0 3px rgba(245,197,24,0.18); }
    .cs-trigger.cs-placeholder { color: rgba(255,255,255,0.65); }
    .cs-panel {
      display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 200;
      max-height: 280px; overflow-y: auto; border-radius: 17px; border: 1.5px solid #F5C518;
      background: linear-gradient(160deg, #0A0A0A 0%, #1a1200 55%, #241900 100%);
      box-shadow: 0 20px 50px rgba(0,0,0,0.5);
      padding: 6px;
    }
    .cs-panel.open { display: block; }
    .cs-optgroup-label {
      font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
      color: #F5C518; text-shadow: 0 1px 2px rgba(0,0,0,0.7);
      padding: 10px 12px 4px;
    }
    .cs-option {
      padding: 10px 12px; border-radius: 17px; font-size: 13.5px; cursor: pointer;
      color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.7);
      transition: background .15s;
    }
    .cs-option:hover { background: rgba(245,197,24,0.18); }
    .cs-option.cs-option-selected { background: rgba(245,197,24,0.28); font-weight: 700; }
    .cs-option.cs-option-disabled { opacity: 0.4; cursor: not-allowed; }
    .cs-panel::-webkit-scrollbar { width: 8px; }
    .cs-panel::-webkit-scrollbar-thumb { background: rgba(245,197,24,0.4); border-radius: 17px; }
    #trip-planner-modal { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,0.65); backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
    #trip-planner-modal.open { display: flex; }

    /* ── Card Detail Modal (destination / package / spiritual cards) ── */
    .cd-modal { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,0.72); backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
    .cd-modal.open { display: flex; }
    .cd-modal-box { background: white; border-radius: 17px; width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; box-shadow: 0 30px 80px rgba(0,0,0,0.4); animation: modalIn .25s ease; position: relative; }
    .cd-modal-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 17px; background: rgba(0,0,0,0.45); border: none; color: white; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background .2s; }
    .cd-modal-close:hover { background: rgba(0,0,0,0.7); }
    .cd-modal-img { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: var(--black); }
    .cd-modal-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .cd-modal-content { padding: 28px 32px 32px; }
    .cd-modal-tag { display: inline-block; margin-bottom: 10px; }
    .cd-modal-content h2 { font-family: 'Playfair Display', serif; font-size: 26px; color: var(--black); margin-bottom: 12px; }
    .cd-modal-content > p { font-size: 15px; line-height: 1.6; color: #444; margin-bottom: 22px; }
    .cd-modal-reviews { background: var(--beige-lt); border-radius: 17px; padding: 18px 20px; margin-bottom: 22px; }
    .cd-reviews-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
    .cd-reviews-head h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--black); display: flex; align-items: center; gap: 8px; margin: 0; }
    .cd-reviews-head h4 i { color: var(--amber); }
    .cd-sample-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #a15c00; background: #FCE8B8; border-radius: 17px; padding: 3px 8px; white-space: nowrap; }
    .cd-verified-badge { color: #1a7f37; background: #dcf5e3; display: inline-flex; align-items: center; gap: 4px; }
    .cd-verified-badge i { font-size: 11px; }
    .cd-stars-summary { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
    .cd-stars { color: #F5C518; font-size: 16px; letter-spacing: 2px; }
    .cd-stars-num { font-weight: 700; font-size: 14px; color: var(--black); }
    .cd-stars-count { font-size: 12px; color: #888; }
    .cd-review-list { display: flex; flex-direction: column; gap: 10px; }
    .cd-review-card { background: white; border-radius: 17px; padding: 12px 14px; border: 1px solid rgba(0,0,0,0.06); }
    .cd-review-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
    .cd-review-name { font-weight: 700; font-size: 13px; color: var(--black); }
    .cd-review-stars { color: #F5C518; font-size: 12px; letter-spacing: 1px; }
    .cd-review-text { font-size: 13px; line-height: 1.5; color: #555; margin: 0; }
    .cd-reviews-note { font-size: 11.5px; color: #999; font-style: italic; margin: 12px 0 0; text-align: center; }
    .cd-modal-book { width: 100%; justify-content: center; padding: 15px; font-size: 15px; }
    @media (max-width: 640px) {
      .cd-modal-content { padding: 22px 20px 26px; }
      .cd-modal-content h2 { font-size: 21px; }
    }

    #visa-modal { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,0.65); backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
    #visa-modal.open { display: flex; }
    .tp-modal-box { max-width: 600px; }
    .tp-modal-head { background: linear-gradient(135deg, #0A0A0A 60%, #1a1200 100%); border-bottom: 3px solid #F5C518; }
    .tp-modal-head h3 { font-size: 24px; }
    .tp-modal-body { padding: 24px 32px; }
    .tp-label { display: block; font-size: 12px; font-weight: 700; color: #555; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 5px; }
    .tp-input { margin-bottom: 0; }
    .tp-input.tp-input-error { border-color: #e0353d !important; background: #fff5f5; }
    .tp-input.tp-input-error:focus { border-color: #e0353d; }
    .tp-error-text { display: none; font-size: 11.5px; font-weight: 600; color: #e0353d; margin-top: 5px; }
    .tp-field.tp-has-error .tp-error-text { display: block; }
    @keyframes tpShake { 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} }
    .tp-modal-box.tp-shake { animation: tpShake .4s; }
    .tp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
    .tp-field { display: flex; flex-direction: column; }
    .tp-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
    .tp-travelers-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 4px; }
    .tp-counter-box { background: #f8f8f8; border: 1.5px solid #e8e8e8; border-radius: 17px; padding: 12px 8px; text-align: center; }
    .tp-counter-label { display: block; font-size: 11px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
    .tp-counter { display: flex; align-items: center; justify-content: center; gap: 10px; }
    .tp-counter button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #F5C518; background: #fff; color: #0A0A0A; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; transition: all .15s; }
    .tp-counter button:hover { background: #F5C518; }
    .tp-counter span { font-size: 18px; font-weight: 800; color: #0A0A0A; min-width: 22px; display: inline-block; }
    @media (max-width: 540px) {
      .tp-row { grid-template-columns: 1fr; }
      .tp-modal-body { padding: 20px 18px; }
    }
    .modal-note { font-size: 12px; color: var(--gray); text-align: center; margin-top: 14px; line-height: 1.6; }

    /* ────────────── BACK TO TOP ─── */
    #back-top { position: fixed; bottom: 100px; right: 28px; width: 42px; height: 42px; background: var(--yellow); color: var(--black); border-radius: 17px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; box-shadow: var(--shadow); transition: all .2s; opacity: 0; z-index: 998; border: none; }
    #back-top.show { opacity: 1; }
    #back-top i { transition: transform .25s ease; }
    #back-top:hover { background: var(--amber); transform: translateY(-2px); }
    #back-top:hover i { transform: translateY(-3px); }

    /* ── Scroll-hint popup (right side) ── */
    .scroll-hint {
      position: fixed;
      top: 50%;
      right: 28px;
      transform: translateY(-50%);
      width: 190px;
      background: var(--white);
      border-radius: 17px;
      box-shadow: var(--shadow-md);
      padding: 20px 16px 18px;
      text-align: center;
      z-index: 997;
      border: 2px solid var(--yellow);
      animation: scrollHintIn .5s ease 1.2s both;
    }
    .scroll-hint.hide { display: none; }
    .scroll-hint-close {
      position: absolute; top: 6px; right: 8px;
      background: none; border: none; font-size: 18px;
      line-height: 1; cursor: pointer; color: var(--gray);
    }
    .scroll-hint-close:hover { color: var(--black); }
    .scroll-hint-icon {
      width: 38px; height: 38px; margin: 0 auto 10px;
      background: var(--yellow); color: var(--black);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: 16px; animation: bounceDown 1.4s infinite;
    }
    .scroll-hint p { font-size: 13px; font-weight: 600; color: var(--dark); line-height: 1.5; }
    @keyframes scrollHintIn { from { opacity: 0; transform: translateY(-50%) translateX(20px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } }
    @keyframes bounceDown { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
    @media (max-width: 768px) { .scroll-hint { display: none; } }
    @media (max-width: 768px) {
      .hero-particles {
        -webkit-mask-image: radial-gradient(ellipse 220px 320px at 50% 48%, transparent 0%, transparent 50%, black 100%);
        mask-image: radial-gradient(ellipse 220px 320px at 50% 48%, transparent 0%, transparent 50%, black 100%);
      }
    }

    /* ── Limited-time offer sticky badge ── */
    .offer-badge {
      position: fixed;
      bottom: 28px;
      left: 28px;
      max-width: 280px;
      background: var(--black);
      color: var(--white);
      border-radius: 17px;
      padding: 14px 36px 14px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      box-shadow: var(--shadow-md);
      z-index: 996;
      transition: transform .2s, opacity .2s;
      opacity: 0;
      transform: translateY(20px);
      animation: offerBadgeIn .5s ease 2s forwards;
    }
    .offer-badge.hide { animation: none; opacity: 0 !important; transform: translateY(20px) !important; pointer-events: none; }
    .offer-badge:hover { transform: translateY(-3px); }
    .offer-badge-pulse {
      width: 10px; height: 10px; min-width: 10px; border-radius: 50%;
      background: var(--yellow); position: relative;
    }
    .offer-badge-pulse::after {
      content: ''; position: absolute; inset: 0; border-radius: 50%;
      background: var(--yellow); animation: pulseRing 1.6s infinite;
    }
    @keyframes pulseRing { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3); opacity: 0; } }
    .offer-badge-text { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
    .offer-badge-text strong { font-size: 13px; }
    .offer-badge-text span { font-size: 12px; color: var(--lgray); }
    .offer-badge-close {
      position: absolute; top: 6px; right: 8px;
      background: none; border: none; color: var(--lgray);
      font-size: 16px; cursor: pointer;
    }
    .offer-badge-close:hover { color: var(--white); }
    @keyframes offerBadgeIn { to { opacity: 1; transform: translateY(0); } }
    @media (max-width: 768px) { .offer-badge { left: 14px; bottom: 14px; max-width: 220px; padding: 10px 30px 10px 12px; transition: transform .2s, opacity .4s; } }

    /* ────────────── ANIMATIONS ─── */
    @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
    .fade-up  { animation: fadeUp .4s ease both; }
    .delay-1  { animation-delay: .15s; }
    .delay-2  { animation-delay: .3s; }

    /* ────────────── RESPONSIVE ─── */
    @media (max-width: 1140px) {
      .btn-consult { padding: 9px 14px; font-size: 12px; }
    }
    @media (max-width: 1024px) {
      .services-grid { grid-template-columns: repeat(2, 1fr); }
      .dest-grid     { grid-template-columns: repeat(2, 1fr); }
      .pkg-grid      { grid-template-columns: repeat(2, 1fr); }
      .why-inner, .flights-inner, .corp-inner, .contact-inner { grid-template-columns: 1fr; gap: 48px; }
      .footer-top    { grid-template-columns: 1fr 1fr; gap: 36px; }
      /* Switch to hamburger earlier so the nav never overflows on tablets */
      .nav-links, .nav-cta .btn:not(.btn-wa), .nav-cta .btn-consult:not(.btn-consult-mobile), .nav-accent { display: none; }
      .hamburger   { display: flex; }
      .btn-consult-mobile { display: inline-flex; }
      /* Hero is too tall on tablet viewports — let it size to content instead of forcing full viewport height */
      #hero { min-height: auto; padding-top: 90px; padding-bottom: 24px; }
      .hero-content { padding: 0 0 32px; }
    }
    @media (max-width: 768px) {
      .services-grid, .pkg-grid, .reviews-grid, .blog-grid { grid-template-columns: 1fr; }
      .dest-grid   { grid-template-columns: 1fr 1fr; }
      .visa-grid   { grid-template-columns: 1fr 1fr; max-width: 480px; gap: 16px; }
      .visa-process { grid-template-columns: 1fr 1fr; }
      .visa-process .process-step::after { display: none; }
      .hero-top-bar { display: none; }
      .hero-dots-left { top: 210px; }
      .hero-badge-bar { display: none; }
      #hero { min-height: auto; padding-top: 98px; }
      .hero-content { padding: 32px 0 40px; }
      .hero-trust-row { gap: 6px; margin-bottom: 26px; }
      .hero-trust-badge { font-size: 9px; padding: 5px 10px; letter-spacing: 1px; }
      .hero-trust-divider { display: none; }
      .hero-title  { margin-bottom: 14px; }
      .hero-sub    { margin-bottom: 20px; }
      .hero-btns   { margin-bottom: 28px; }
      .hero-stats  { gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
      .hero-stat   { padding: 14px 18px; }
      .hero-stat strong { font-size: 26px; }
      .hero-stat span { font-size: 10px; }
      .hero-cred-strip { gap: 8px; padding: 12px 16px; border-radius: 17px; }
      .hero-cred-dot { display: none; }
      .hero-cred-item { font-size: 9.5px; gap: 5px; }
      .corp-stat-grid, .why-stat-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
      .why-right, .corp-right { padding: 28px 20px; }
      .why-stat strong { font-size: 30px; }
      .corp-stat strong { font-size: 28px; }
      .why-stat span, .corp-stat span { font-size: 11.5px; }
      .footer-top  { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
      .footer-legal { justify-content: center; }
      .newsletter-inner { flex-direction: column; align-items: flex-start; }
      /* Hide newsletter section, trust badges & Quick Links column on ≤768px */
      .footer-newsletter { display: none; }
      .footer-trust { display: none; }
      .footer-col.footer-quicklinks { display: none; }
      .airlines-grid { grid-template-columns: 1fr 1fr; }
      .wa-panel    { width: 300px; }
      .htb-inner   { flex-direction: column; }
    }
    @media (max-width: 480px) {
      .why-right, .corp-right { padding: 24px 16px; }
      .why-stat-grid, .corp-stat-grid { gap: 16px; }
      .why-stat strong { font-size: 26px; }
      .corp-stat strong { font-size: 24px; }
      .visa-grid   { grid-template-columns: 1fr 1fr; max-width: 360px; gap: 14px; }
      .visa-img    { height: 100px; }
      .dest-grid   { grid-template-columns: 1fr; }
      .hero-btns   { flex-direction: column; }
      .modal-send-btns { grid-template-columns: 1fr; }
      .tp-travelers-row { gap: 6px; }
      .tp-counter-box { padding: 10px 4px; }
      .tp-counter-label { font-size: 9.5px; margin-bottom: 6px; }
      .tp-counter { gap: 4px; }
      .tp-counter button { width: 24px; height: 24px; font-size: 14px; }
      .tp-counter span { font-size: 15px; min-width: 16px; }
    }

    /* ══════════════════════════════════════════════════════
       SCROLL-REVEAL CARD ANIMATIONS
       Cards pop in crisply as they enter the viewport —
       replacing the old fog edge transitions with a more
       dynamic "sudden appear" effect.
    ══════════════════════════════════════════════════════ */
    @keyframes snapIn {
      0%   { opacity: 0; transform: translateY(24px) scale(0.97); }
      70%  { opacity: 1; transform: translateY(-3px) scale(1.005); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes snapInLeft {
      0%   { opacity: 0; transform: translateX(-28px) scale(0.97); }
      70%  { opacity: 1; transform: translateX(2px) scale(1.005); }
      100% { opacity: 1; transform: translateX(0) scale(1); }
    }
    @keyframes snapInRight {
      0%   { opacity: 0; transform: translateX(28px) scale(0.97); }
      70%  { opacity: 1; transform: translateX(-2px) scale(1.005); }
      100% { opacity: 1; transform: translateX(0) scale(1); }
    }
    @keyframes snapFadeIn {
      0%   { opacity: 0; }
      40%  { opacity: 0; }
      100% { opacity: 1; }
    }

    /* Elements start invisible; JS adds .revealed */
    .reveal-card,
    .reveal-left,
    .reveal-right,
    .reveal-up {
      opacity: 0;
    }
    .reveal-card.revealed {
      animation: snapIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .reveal-left.revealed {
      animation: snapInLeft 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .reveal-right.revealed {
      animation: snapInRight 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .reveal-up.revealed {
      animation: snapIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* Stagger delays for grids */
    .reveal-card:nth-child(1).revealed, .reveal-up:nth-child(1).revealed { animation-delay: 0ms; }
    .reveal-card:nth-child(2).revealed, .reveal-up:nth-child(2).revealed { animation-delay: 30ms; }
    .reveal-card:nth-child(3).revealed, .reveal-up:nth-child(3).revealed { animation-delay: 60ms; }
    .reveal-card:nth-child(4).revealed, .reveal-up:nth-child(4).revealed { animation-delay: 90ms; }
    .reveal-card:nth-child(5).revealed, .reveal-up:nth-child(5).revealed { animation-delay: 120ms; }
    .reveal-card:nth-child(6).revealed, .reveal-up:nth-child(6).revealed { animation-delay: 150ms; }
    .reveal-card:nth-child(7).revealed, .reveal-up:nth-child(7).revealed { animation-delay: 180ms; }
    .reveal-card:nth-child(8).revealed, .reveal-up:nth-child(8).revealed { animation-delay: 210ms; }

    /* Section header reveal */
    .section-header.reveal-up.revealed { animation-delay: 0ms; }

    /* Respect reduced-motion preference */
    @media (prefers-reduced-motion: reduce) {
      .reveal-card,
      .reveal-left,
      .reveal-right,
      .reveal-up {
        opacity: 1;
        animation: none !important;
      }
    }

    /* Section backgrounds and opacities set above */


    /* ══════════════════════════════════════════════════════
       SECTION BOUNDARY FOG — pinkish-golden-white shimmer
       A very soft, barely-there luminous glow exactly at
       the top and bottom edge of each section. Sections
       stay in full contact (zero gap). The effect is like
       a warm light spilling between them — not a fade-out
       of the content, just a delicate atmospheric border.
    ══════════════════════════════════════════════════════ */

    /* The fog color: a warm mix of blush-pink, soft gold, and white.
       Three overlapping radial glows create depth without harshness. */
    :root {
      --fog-pink:   rgba(255, 210, 180, 0.22);   /* blush-pink    */
      --fog-gold:   rgba(255, 220, 130, 0.18);   /* soft gold     */
      --fog-white:  rgba(255, 248, 240, 0.30);   /* warm white    */
    }

    /* Applied to every section-pad and key sections */
    .section-fog-edge {
      position: relative;
    }
    .section-fog-edge::before {
      content: '';
      position: absolute;
      left: 0; right: 0;
      top: 0;
      height: 90px;
      z-index: 2;
      pointer-events: none;
      background:
        /* Centered golden glow at top edge */
        radial-gradient(ellipse 70% 100% at 50% 0%,  var(--fog-gold),  transparent 75%),
        /* Left-leaning pink accent */
        radial-gradient(ellipse 50% 80% at 20% 0%,  var(--fog-pink),  transparent 80%),
        /* Right-leaning white highlight */
        radial-gradient(ellipse 50% 80% at 80% 0%,  var(--fog-white), transparent 80%);
      mix-blend-mode: screen;
    }
    .section-fog-edge::after {
      content: '';
      position: absolute;
      left: 0; right: 0;
      bottom: 0;
      height: 90px;
      z-index: 2;
      pointer-events: none;
      background:
        radial-gradient(ellipse 70% 100% at 50% 100%, var(--fog-gold),  transparent 75%),
        radial-gradient(ellipse 50% 80% at 30% 100%, var(--fog-pink),  transparent 80%),
        radial-gradient(ellipse 50% 80% at 70% 100%, var(--fog-white), transparent 80%);
      mix-blend-mode: screen;
    }

    /* For dark sections (packages), use a different fog so it's visible */
    .section-fog-dark::before {
      background:
        radial-gradient(ellipse 70% 100% at 50% 0%,   rgba(245, 200, 100, 0.14), transparent 75%),
        radial-gradient(ellipse 50% 80% at 20% 0%,   rgba(255, 180, 140, 0.10), transparent 80%),
        radial-gradient(ellipse 50% 80% at 80% 0%,   rgba(255, 240, 200, 0.12), transparent 80%);
    }
    .section-fog-dark::after {
      background:
        radial-gradient(ellipse 70% 100% at 50% 100%, rgba(245, 200, 100, 0.14), transparent 75%),
        radial-gradient(ellipse 50% 80% at 30% 100%, rgba(255, 180, 140, 0.10), transparent 80%),
        radial-gradient(ellipse 50% 80% at 70% 100%, rgba(255, 240, 200, 0.12), transparent 80%);
    }

    /* Ensure the section bg-image ::after doesn't occlude the fog
       by making sure the fog z-index is above content bg but below actual content */
    /* The bg image ::after on sections is z-index:0, container is z-index:1,
       fog ::before/::after is z-index:2 — so fog overlays background but sits
       behind all card/text content (which is z-index >= 1 inside container) */

    /* Override: for sections that already use ::before for the diagonal texture,
       fog is handled via ::after only on those — but section-fog-edge adds its
       own ::before which would overwrite. We use the .section-fog-edge class
       only on elements that don't already use both pseudo-elements for other things.
       For .section-pad (which uses ::before for the diagonal lines), we instead
       use a wrapper div .fog-top / .fog-bottom injected by JS, OR we use a
       separate dedicated fog layer element added per section. */

    /* Cleaner approach: use inset box-shadow on section elements to create
       the glowing boundary — this doesn't conflict with any pseudo-elements */

    /* FINAL APPROACH: dedicated .section-edge-fog divs injected at top/bottom
       of each section by JS — these are simple positioned child divs */
    .edge-fog-top,
    .edge-fog-bottom {
      position: absolute;
      left: 0; right: 0;
      height: 80px;
      pointer-events: none;
      z-index: 3;         /* above bg images, below card content */
    }
    .edge-fog-top {
      top: 0;
      background:
        radial-gradient(ellipse 80% 100% at 50% 0%,   rgba(255, 215, 150, 0.20), transparent 70%),
        radial-gradient(ellipse 55% 90% at 18% 0%,   rgba(255, 190, 170, 0.16), transparent 80%),
        radial-gradient(ellipse 55% 90% at 82% 0%,   rgba(255, 248, 220, 0.18), transparent 80%);
    }
    .edge-fog-bottom {
      bottom: 0;
      background:
        radial-gradient(ellipse 80% 100% at 50% 100%, rgba(255, 215, 150, 0.20), transparent 70%),
        radial-gradient(ellipse 55% 90% at 22% 100%, rgba(255, 190, 170, 0.16), transparent 80%),
        radial-gradient(ellipse 55% 90% at 78% 100%, rgba(255, 248, 220, 0.18), transparent 80%);
    }

    /* For dark section (#packages) use slightly stronger gold fog */
    #packages .edge-fog-top,
    #packages .edge-fog-bottom {
      background: none; /* let the dark section keep its clean edge */
    }
    #packages .edge-fog-top {
      background:
        radial-gradient(ellipse 80% 100% at 50% 0%,   rgba(245, 200, 80,  0.18), transparent 70%),
        radial-gradient(ellipse 55% 90% at 18% 0%,   rgba(255, 180, 120, 0.10), transparent 80%),
        radial-gradient(ellipse 55% 90% at 82% 0%,   rgba(255, 240, 190, 0.12), transparent 80%);
    }
    #packages .edge-fog-bottom {
      background:
        radial-gradient(ellipse 80% 100% at 50% 100%, rgba(245, 200, 80,  0.18), transparent 70%),
        radial-gradient(ellipse 55% 90% at 22% 100%, rgba(255, 180, 120, 0.10), transparent 80%),
        radial-gradient(ellipse 55% 90% at 78% 100%, rgba(255, 240, 190, 0.12), transparent 80%);
    }

    /* Also do the same for the hero section bottom edge */
    #hero .edge-fog-bottom {
      height: 100px;
      background:
        radial-gradient(ellipse 80% 100% at 50% 100%, rgba(255, 215, 150, 0.22), transparent 70%),
        radial-gradient(ellipse 55% 90% at 22% 100%, rgba(255, 190, 170, 0.14), transparent 80%),
        radial-gradient(ellipse 55% 90% at 78% 100%, rgba(255, 248, 220, 0.16), transparent 80%);
    }