/* ═══════════════════════════════════════════════
       CSS CUSTOM PROPERTIES & RESET
    ═══════════════════════════════════════════════ */
    :root {
        --navy:      #0B1F3A;
        --navy-mid:  #122848;
        --gold:      #C9A84C;
        --gold-lt:   #E4C97A;
        --coral:     #E05C3A;
        --cream:     #F8F4EE;
        --cream-dk:  #EDE8E0;
        --white:     #FFFFFF;
        --text-dark: #1a1a2e;
        --text-mid:  #4a5568;
        --text-lt:   #8896a5;
        --radius:    12px;
        --radius-lg: 20px;
        --shadow-sm: 0 2px 12px rgba(11,31,58,.08);
        --shadow-md: 0 8px 32px rgba(11,31,58,.14);
        --shadow-lg: 0 20px 60px rgba(11,31,58,.2);
        --trans:     0.3s cubic-bezier(.4,0,.2,1);
        --font-display: 'Playfair Display', serif;
        --font-body:    'DM Sans', sans-serif;
      }
  
      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  
      html {
        scroll-behavior: smooth;
        font-size: 16px;
        overflow-x: hidden;
        max-width: 100%;
      }
  
      body {
        font-family: var(--font-body);
        background: var(--cream);
        color: var(--text-dark);
        overflow-x: hidden;
        line-height: 1.6;
        max-width: 100vw;
        position: relative;
      }
  
      img { max-width: 100%; display: block; }
      a  { text-decoration: none; color: inherit; }
      ul { list-style: none; }
  
      .container {
        width: 90%;
        max-width: 1200px;
        margin-inline: auto;
      }
  
      .section-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: .78rem;
        font-weight: 600;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 12px;
      }
      .section-label::before,
      .section-label::after {
        content: '';
        width: 24px; height: 1px;
        background: var(--gold);
      }
  
      .section-title {
        font-family: var(--font-display);
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 700;
        color: var(--navy);
        line-height: 1.2;
        margin-bottom: 16px;
      }
      .section-title span { color: var(--gold); font-style: italic; }
  
      .section-sub {
        font-size: 1.05rem;
        color: var(--text-mid);
        max-width: 560px;
      }
  
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 14px 32px;
        border-radius: 50px;
        font-family: var(--font-body);
        font-weight: 600;
        font-size: .95rem;
        cursor: pointer;
        border: none;
        transition: var(--trans);
        white-space: nowrap;
      }
      .btn-primary {
        background: linear-gradient(135deg, var(--gold) 0%, var(--gold-lt) 100%);
        color: var(--navy);
        box-shadow: 0 4px 20px rgba(201,168,76,.4);
      }
      .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(201,168,76,.55); }
      .btn-outline {
        border: 2px solid var(--white);
        color: var(--white);
        background: transparent;
      }
      .btn-outline:hover { background: var(--white); color: var(--navy); }
      .btn-navy {
        background: var(--navy);
        color: var(--white);
      }
      .btn-navy:hover { background: var(--navy-mid); transform: translateY(-2px); box-shadow: var(--shadow-md); }
  
      /* ═══════════════════════════════════════════════
         LOADER
      ═══════════════════════════════════════════════ */
      #loader {
        position: fixed; inset: 0;
        background: var(--navy);
        z-index: 9999;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: opacity .5s, visibility .5s;
      }
      #loader.hidden { opacity: 0; visibility: hidden; }
      .loader-logo {
        font-family: var(--font-display);
        font-size: 2.5rem;
        color: var(--white);
        font-weight: 700;
        margin-bottom: 8px;
      }
      .loader-logo span { color: var(--gold); }
      .loader-plane {
        font-size: 2rem;
        animation: fly 1.5s ease-in-out infinite;
      }
      .loader-bar {
        width: 200px; height: 2px;
        background: rgba(255,255,255,.15);
        border-radius: 2px;
        margin-top: 24px;
        overflow: hidden;
      }
      .loader-bar-fill {
        height: 100%;
        background: var(--gold);
        border-radius: 2px;
        animation: load 1.8s ease-in-out forwards;
      }
      @keyframes fly {
        0%,100% { transform: translateX(-8px) translateY(0); }
        50%      { transform: translateX(8px)  translateY(-6px); }
      }
      @keyframes load {
        from { width: 0; }
        to   { width: 100%; }
      }
  
      /* ═══════════════════════════════════════════════
         HEADER / NAV
      ═══════════════════════════════════════════════ */
      #header {
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 1000;
        transition: var(--trans);
        padding: 20px 0;
      }
      #header.scrolled {
        background: rgba(11,31,58,.96);
        backdrop-filter: blur(16px);
        padding: 12px 0;
        box-shadow: 0 4px 30px rgba(0,0,0,.25);
      }
      .nav-wrap {
        display: flex;
        align-items: center !important;
        gap: 24px;
        width: 100%;
      }
      
      .nav-wrap ul{
        margin-bottom: 0 !important;
      }
  
      .nav-logo {
        font-family: var(--font-display);
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--white);
        white-space: nowrap;
        flex-shrink: 0;
      }
      .nav-logo span { color: var(--gold); }
  
      .nav-links {
        display: flex;
        align-items: center;
        gap: 4px;
        flex: 1;
        justify-content: center;
      }
      .nav-links a {
        color: rgba(255,255,255,.82);
        font-size: .88rem;
        font-weight: 500;
        padding: 8px 12px;
        border-radius: 8px;
        transition: var(--trans);
        white-space: nowrap;
      }
      .nav-links a:hover { color: var(--gold); background: rgba(255,255,255,.06); }
  
      .nav-right {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
      }
      .lang-switcher {
        display: flex;
        background: rgba(255,255,255,.1);
        border-radius: 50px;
        overflow: hidden;
      }
      .lang-switcher button {
        background: none;
        border: none;
        color: rgba(255,255,255,.7);
        padding: 6px 12px;
        font-family: var(--font-body);
        font-size: .8rem;
        font-weight: 600;
        cursor: pointer;
        transition: var(--trans);
        text-transform: uppercase;
      }
      .lang-switcher button.active {
        background: var(--gold);
        color: var(--navy);
        border-radius: 50px;
      }
  
      /* Hamburger */
      .nav-toggle {
        display: none;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: 4px;
      }
      .nav-toggle span {
        display: block;
        width: 24px; height: 2px;
        background: var(--white);
        border-radius: 2px;
        transition: var(--trans);
      }
      .nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
      .nav-toggle.open span:nth-child(2) { opacity: 0; }
      .nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
  
      .mobile-menu {
        display: none;
        position: fixed;
        inset: 0;
        background: var(--navy);
        z-index: 1001;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        overflow-y: auto;
        padding: 20px 0;
      }
      .mobile-menu.open { display: flex; }
      .mobile-menu a {
        color: var(--white);
        font-size: 1.3rem;
        font-weight: 500;
        padding: 14px 32px;
        border-radius: 12px;
        transition: var(--trans);
        text-align: center;
      }
      .mobile-menu a:hover { background: rgba(255,255,255,.08); color: var(--gold); }
      .mobile-lang {
        display: flex;
        gap: 12px;
        margin-top: 24px;
      }
      .mobile-lang button {
        background: rgba(255,255,255,.1);
        border: 1px solid rgba(255,255,255,.2);
        color: var(--white);
        padding: 8px 20px;
        border-radius: 50px;
        font-size: .9rem;
        font-weight: 600;
        cursor: pointer;
        transition: var(--trans);
      }
      .mobile-lang button.active { background: var(--gold); color: var(--navy); border-color: var(--gold); }
  
      @media (max-width: 768px) {
        .nav-links {
          display: none;
        }
  
        .nav-toggle {
          display: flex;
        }
  
        /* .lang-switcher,
        .btn.btn-primary {
          display: none;
        } */
  
        .nav-wrap {
          justify-content: space-between;
        }
      }
  
      /* #home {
        padding-top: 100px;
      } */
  
      .section:first-of-type {
        padding-top: 100px;
      }
  
      @media (max-width: 768px) {
        .nav-right {
          gap: 8px;
        }
  
        .nav-logo {
          font-size: 1.3rem;
        }
      }
  
      .nav-toggle {
        margin-left: auto;
      }
  
      /* ═══════════════════════════════════════════════
         HERO
      ═══════════════════════════════════════════════ */
      #hero {
        position: relative;
        height: 100vh;
        min-height: 600px;
        overflow: hidden;
        width: 100%;
      }
      .hero-slider {
        position: absolute; inset: 0;
      }
      .hero-slide {
        position: absolute; inset: 0;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transition: opacity 1.2s ease;
      }
      .hero-slide.active { opacity: 1; }
      .hero-slide::after {
        content: '';
        position: absolute; inset: 0;
        background: linear-gradient(135deg,
          rgba(6,17,30,.75) 0%,
          rgba(11,31,58,.5) 50%,
          rgba(6,17,30,.3) 100%
        );
      }
      .hero-content {
        position: relative;
        z-index: 2;
        height: 100%;
        display: flex;
        align-items: center;
      }
      .hero-text {
        max-width: 880px;
        color: var(--white);
      }
      .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(201,168,76,.2);
        border: 1px solid rgba(201,168,76,.4);
        color: var(--gold-lt);
        padding: 8px 20px;
        border-radius: 50px;
        font-size: .82rem;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        margin-bottom: 24px;
        backdrop-filter: blur(8px);
      }
      .hero-title {
        font-family: var(--font-display);
        font-size: clamp(2.6rem, 6vw, 5rem);
        font-weight: 700;
        line-height: 1.1;
        margin-bottom: 20px;
      }
      .hero-title span { color: var(--gold); font-style: italic; }
      .hero-sub {
        font-size: 1.15rem;
        color: rgba(255,255,255,.8);
        margin-bottom: 36px;
        line-height: 1.7;
      }
      .hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }
  
      /* Hero Search */
      .hero-search {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 900px;
        background: var(--white);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding: 28px 32px;
        box-shadow: var(--shadow-lg);
        z-index: 3;
      }
      .hero-search-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr auto;
        gap: 16px;
        align-items: end;
      }
      .search-field label {
        display: block;
        font-size: .78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--text-mid);
        margin-bottom: 8px;
      }
      .search-field input, .search-field select {
        width: 100%;
        padding: 12px 16px;
        border: 1.5px solid var(--cream-dk);
        border-radius: var(--radius);
        font-family: var(--font-body);
        font-size: .95rem;
        color: var(--text-dark);
        background: var(--cream);
        transition: var(--trans);
        outline: none;
      }
      .search-field input:focus, .search-field select:focus {
        border-color: var(--gold);
        background: var(--white);
      }
  
      /* Hero dots */
      .hero-dots {
        position: absolute;
        bottom: 220px;
        right: 5%;
        z-index: 3;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .hero-dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        background: rgba(255,255,255,.3);
        cursor: pointer;
        transition: var(--trans);
      }
      .hero-dot.active { background: var(--gold); transform: scale(1.4); }
  
      /* ═══════════════════════════════════════════════
         STATS BAR
      ═══════════════════════════════════════════════ */
      .stats-bar {
        background: var(--navy);
        padding: 36px 0;
      }
      .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        text-align: center;
      }
      .stat-item { color: var(--white); }
      .stat-num {
        font-family: var(--font-display);
        font-size: 2.4rem;
        font-weight: 700;
        color: var(--gold);
        line-height: 1;
      }
      .stat-label {
        font-size: .85rem;
        color: rgba(255,255,255,.65);
        margin-top: 4px;
        font-weight: 500;
      }
  
      /* ═══════════════════════════════════════════════
         TOURS SECTION
      ═══════════════════════════════════════════════ */
      .section { padding: 96px 0; }
      .section-header { margin-bottom: 52px; }
      .section-header.center { text-align: center; }
      .section-header.center .section-sub { margin-inline: auto; }
  
      .tours-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
      }
  
      .tour-card {
        background: var(--white);
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        transition: var(--trans);
        cursor: pointer;
      }
      .tour-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
      }
      .tour-img {
        position: relative;
        height: 220px;
        overflow: hidden;
      }
      .tour-img img {
        width: 100%; height: 100%;
        object-fit: cover;
        transition: transform .6s ease;
      }
      .tour-card:hover .tour-img img { transform: scale(1.07); }
      .tour-badge {
        position: absolute;
        top: 16px; left: 16px;
        background: var(--navy);
        color: var(--white);
        padding: 5px 14px;
        border-radius: 50px;
        font-size: .75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
      }
      .tour-body { padding: 24px; }
      .tour-location {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--text-lt);
        font-size: .82rem;
        margin-bottom: 8px;
      }
      .tour-title {
        font-family: var(--font-display);
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 10px;
        line-height: 1.3;
      }
      .tour-desc { font-size: .88rem; color: var(--text-mid); margin-bottom: 16px; line-height: 1.6; }
      .tour-meta {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        padding: 14px 0;
        border-top: 1px solid var(--cream-dk);
        border-bottom: 1px solid var(--cream-dk);
        margin-bottom: 16px;
      }
      .tour-meta-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: .82rem;
        color: var(--text-mid);
      }
      .tour-meta-item i { color: var(--gold); }
      .tour-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      /* .tour-price { } */
      .tour-price .from { font-size: .75rem; color: var(--text-lt); display: block; }
      .tour-price .amount {
        font-family: var(--font-display);
        font-size: 1.35rem;
        font-weight: 700;
        color: var(--coral);
      }
  
      /* ═══════════════════════════════════════════════
         HOT TOURS
      ═══════════════════════════════════════════════ */
      #hot-tours { background: var(--navy); }
      #hot-tours .section-title { color: var(--white); }
      #hot-tours .section-sub { color: rgba(255,255,255,.65); }
  
      .hot-grid {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 24px;
      }
      .hot-card {
        position: relative;
        border-radius: var(--radius-lg);
        overflow: hidden;
        cursor: pointer;
      }
      .hot-card:first-child { grid-row: span 2; }
      .hot-card img {
        width: 100%; height: 100%;
        object-fit: cover;
        transition: transform .6s ease;
        min-height: 220px;
      }
      .hot-card:first-child img { min-height: 460px; }
      .hot-card:hover img { transform: scale(1.06); }
      .hot-card-overlay {
        position: absolute; inset: 0;
        background: linear-gradient(0deg, rgba(6,17,30,.85) 0%, rgba(6,17,30,.1) 60%);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 28px;
      }
      .hot-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--coral);
        color: var(--white);
        padding: 4px 14px;
        border-radius: 50px;
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        margin-bottom: 10px;
        width: fit-content;
        animation: pulse 2s infinite;
      }
      @keyframes pulse {
        0%,100% { box-shadow: 0 0 0 0 rgba(224,92,58,.4); }
        50%      { box-shadow: 0 0 0 8px rgba(224,92,58,0); }
      }
      .hot-card-title {
        font-family: var(--font-display);
        font-size: 1.35rem;
        font-weight: 600;
        color: var(--white);
        margin-bottom: 6px;
      }
      .hot-card:first-child .hot-card-title { font-size: 1.8rem; }
      .hot-card-price { color: var(--gold-lt); font-weight: 700; font-size: 1.1rem; }
      .old-price { text-decoration: line-through; color: rgba(255,255,255,.5); font-size: .85rem; margin-right: 8px; }
  
      /* Countdown */
      .countdown {
        display: flex;
        gap: 10px;
        margin-top: 14px;
      }
      .countdown-item {
        text-align: center;
        background: rgba(255,255,255,.12);
        backdrop-filter: blur(8px);
        border-radius: 8px;
        padding: 8px 12px;
        min-width: 52px;
      }
      .countdown-num {
        font-family: var(--font-display);
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--gold-lt);
        line-height: 1;
      }
      .countdown-lbl { font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.6); margin-top: 3px; }
  
      /* ═══════════════════════════════════════════════
         EXCURSIONS
      ═══════════════════════════════════════════════ */
      .exc-tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 40px;
        flex-wrap: wrap;
      }
      .exc-tab {
        padding: 10px 24px;
        border-radius: 50px;
        border: 2px solid var(--cream-dk);
        background: var(--white);
        color: var(--text-mid);
        font-weight: 600;
        font-size: .88rem;
        cursor: pointer;
        transition: var(--trans);
      }
      .exc-tab.active, .exc-tab:hover {
        border-color: var(--gold);
        background: var(--gold);
        color: var(--navy);
      }
      .exc-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 22px;
      }
      .exc-card {
        background: var(--white);
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        transition: var(--trans);
      }
      .exc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
      .exc-img {
        height: 180px;
        overflow: hidden;
      }
      .exc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
      .exc-card:hover .exc-img img { transform: scale(1.08); }
      .exc-body { padding: 18px; }
      .exc-title {
        font-family: var(--font-display);
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 6px;
      }
      .exc-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
      }
      .exc-duration { font-size: .82rem; color: var(--text-mid); }
      .exc-price { font-weight: 700; color: var(--gold); font-size: 1rem; }
  
      /* ═══════════════════════════════════════════════
         HOTELS
      ═══════════════════════════════════════════════ */
      #hotels { background: var(--cream); }
      .hotels-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
      }
      .hotel-card {
        background: var(--white);
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        transition: var(--trans);
      }
      .hotel-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
      .hotel-img {
        position: relative;
        height: 200px;
        overflow: hidden;
      }
      .hotel-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
      .hotel-card:hover .hotel-img img { transform: scale(1.06); }
      .hotel-stars {
        position: absolute;
        bottom: 14px; left: 14px;
        color: var(--gold);
        font-size: .9rem;
      }
      .hotel-body { padding: 22px; }
      .hotel-title {
        font-family: var(--font-display);
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 6px;
      }
      .hotel-location {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--text-lt);
        font-size: .83rem;
        margin-bottom: 14px;
      }
      .hotel-amenities {
        display: flex;
        gap: 12px;
        margin-bottom: 16px;
        flex-wrap: wrap;
      }
      .amenity {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: .78rem;
        color: var(--text-mid);
        background: var(--cream);
        padding: 4px 10px;
        border-radius: 50px;
      }
      .amenity i { color: var(--gold); }
      .hotel-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 16px;
        border-top: 1px solid var(--cream-dk);
      }
      .hotel-price .per { font-size: .78rem; color: var(--text-lt); }
      .hotel-price .amount {
        font-family: var(--font-display);
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--coral);
      }
  
      /* ═══════════════════════════════════════════════
         FLIGHTS
      ═══════════════════════════════════════════════ */
      #flights { background: var(--navy); overflow: hidden; position: relative; }
      #flights::before {
        content: '';
        position: absolute;
        top: -100px; right: -150px;
        width: 600px; height: 600px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(201,168,76,.12) 0%, transparent 70%);
      }
      #flights .section-title { color: var(--white); }
      #flights .section-sub { color: rgba(255,255,255,.65); }
  
      .flight-form {
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.1);
        border-radius: var(--radius-lg);
        padding: 40px;
        backdrop-filter: blur(16px);
        max-width: 800px;
        margin: 0 auto;
      }
      .flight-tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 28px;
      }
      .flight-tab {
        padding: 10px 24px;
        border-radius: 50px;
        border: 1.5px solid rgba(255,255,255,.2);
        background: transparent;
        color: rgba(255,255,255,.7);
        font-weight: 600;
        font-size: .88rem;
        cursor: pointer;
        transition: var(--trans);
      }
      .flight-tab.active { background: var(--gold); border-color: var(--gold); color: var(--navy); }
      .flight-grid {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 16px;
        align-items: end;
        margin-bottom: 16px;
      }
      .swap-btn {
        background: rgba(201,168,76,.2);
        border: 1px solid rgba(201,168,76,.4);
        color: var(--gold);
        width: 44px; height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: var(--trans);
        margin-bottom: 4px;
      }
      .swap-btn:hover { background: var(--gold); color: var(--navy); transform: rotate(180deg); }
      .flight-input-label {
        display: block;
        font-size: .75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: rgba(255,255,255,.55);
        margin-bottom: 8px;
      }
      .flight-input {
        width: 100%;
        padding: 14px 18px;
        background: rgba(255,255,255,.08);
        border: 1.5px solid rgba(255,255,255,.12);
        border-radius: var(--radius);
        color: var(--white);
        font-family: var(--font-body);
        font-size: 1rem;
        outline: none;
        transition: var(--trans);
      }
      .flight-input:focus { border-color: var(--gold); background: rgba(255,255,255,.12); }
      .flight-input::placeholder { color: rgba(255,255,255,.35); }
      .flight-input-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 16px;
        margin-bottom: 24px;
      }
  
      /* ═══════════════════════════════════════════════
         ABOUT US
      ═══════════════════════════════════════════════ */
      .about-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 72px;
        align-items: center;
      }
      .about-img-wrap {
        position: relative;
      }
      .about-img-main {
        border-radius: var(--radius-lg);
        overflow: hidden;
        height: 480px;
      }
      .about-img-main img { width: 100%; height: 100%; object-fit: cover; }
      .about-img-accent {
        position: absolute;
        bottom: -28px; right: -28px;
        width: 200px; height: 200px;
        border-radius: var(--radius-lg);
        overflow: hidden;
        border: 6px solid var(--white);
        box-shadow: var(--shadow-md);
      }
      .about-img-accent img { width: 100%; height: 100%; object-fit: cover; }
      .about-badge-float {
        position: absolute;
        top: 32px; right: -20px;
        background: var(--gold);
        color: var(--navy);
        padding: 16px 20px;
        border-radius: var(--radius-lg);
        text-align: center;
        box-shadow: var(--shadow-md);
      }
      .about-badge-float .num {
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 700;
        line-height: 1;
      }
      .about-badge-float .lbl { font-size: .75rem; font-weight: 600; opacity: .8; }
  
      .about-features { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
      .about-feature {
        display: flex;
        gap: 16px;
        align-items: flex-start;
      }
      .about-icon {
        width: 48px; height: 48px;
        background: linear-gradient(135deg, var(--gold) 0%, var(--gold-lt) 100%);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--navy);
        font-size: 1.1rem;
        flex-shrink: 0;
      }
      .about-feat-title { font-weight: 700; color: var(--navy); margin-bottom: 3px; font-size: .95rem; }
      .about-feat-desc { font-size: .85rem; color: var(--text-mid); line-height: 1.6; }
  
      .director-card {
        background: var(--navy);
        color: var(--white);
        border-radius: var(--radius-lg);
        padding: 24px;
        display: flex;
        gap: 20px;
        align-items: center;
        margin-top: 28px;
      }
      .director-avatar {
        width: 72px; height: 72px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--gold), var(--gold-lt));
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        font-family: var(--font-display);
        font-weight: 700;
        color: var(--navy);
        flex-shrink: 0;
      }
      .director-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; margin-bottom: 2px; }
      .director-title { font-size: .82rem; color: rgba(255,255,255,.6); }
  
      /* ═══════════════════════════════════════════════
         TESTIMONIALS
      ═══════════════════════════════════════════════ */
      #testimonials { background: var(--cream-dk); }
      .testimonials-slider {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
      .testimonial-card {
        background: var(--white);
        border-radius: var(--radius-lg);
        padding: 32px;
        box-shadow: var(--shadow-sm);
        position: relative;
      }
      .testimonial-card::before {
        content: '"';
        font-family: var(--font-display);
        font-size: 5rem;
        color: var(--gold);
        opacity: .15;
        position: absolute;
        top: 12px; left: 24px;
        line-height: 1;
      }
      .testimonial-stars { color: var(--gold); margin-bottom: 14px; }
      .testimonial-text { font-size: .92rem; color: var(--text-mid); line-height: 1.8; margin-bottom: 20px; font-style: italic; }
      .testimonial-author {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .author-avatar {
        width: 46px; height: 46px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--navy), var(--navy-mid));
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gold);
        font-weight: 700;
        font-size: .9rem;
      }
      .author-name { font-weight: 700; color: var(--navy); font-size: .9rem; }
      .author-loc { font-size: .78rem; color: var(--text-lt); }
  
      /* ═══════════════════════════════════════════════
         FAQ
      ═══════════════════════════════════════════════ */
      .faq-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        max-width: 900px;
        margin: 0 auto;
      }
      .faq-item {
        background: var(--white);
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
      }
      .faq-question {
        padding: 20px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        font-weight: 600;
        color: var(--navy);
        font-size: .95rem;
        gap: 12px;
      }
      .faq-question i { color: var(--gold); transition: var(--trans); flex-shrink: 0; }
      .faq-item.open .faq-question i { transform: rotate(45deg); }
      .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s ease, padding .35s ease;
      }
      .faq-item.open .faq-answer { max-height: 200px; }
      .faq-answer-inner {
        padding: 0 24px 20px;
        color: var(--text-mid);
        font-size: .88rem;
        line-height: 1.7;
      }
  
      /* ═══════════════════════════════════════════════
         BOOKING FORM
      ═══════════════════════════════════════════════ */
      #booking {
        background: linear-gradient(135deg, var(--navy) 0%, #162d52 100%);
        position: relative;
        overflow: hidden;
      }
      #booking::before {
        content: '';
        position: absolute;
        bottom: -200px; left: -200px;
        width: 700px; height: 700px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(201,168,76,.1) 0%, transparent 65%);
      }
      #booking .section-title { color: var(--white); }
      #booking .section-sub { color: rgba(255,255,255,.65); }
  
      .booking-wrap {
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        gap: 60px;
        align-items: center;
      }
      .booking-info { color: var(--white); }
      .booking-point {
        display: flex;
        gap: 16px;
        margin-bottom: 24px;
      }
      .booking-point-icon {
        width: 44px; height: 44px;
        background: rgba(201,168,76,.2);
        border: 1px solid rgba(201,168,76,.35);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gold);
        flex-shrink: 0;
      }
      .booking-point-title { font-weight: 700; margin-bottom: 3px; font-size: .95rem; }
      .booking-point-desc { font-size: .85rem; color: rgba(255,255,255,.6); line-height: 1.5; }
  
      .booking-form {
        background: var(--white);
        border-radius: var(--radius-lg);
        padding: 40px;
        box-shadow: var(--shadow-lg);
      }
      .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
      .form-group { margin-bottom: 18px; }
      .form-group label {
        display: block;
        font-size: .8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--text-mid);
        margin-bottom: 8px;
      }
      .form-group input,
      .form-group select,
      .form-group textarea {
        width: 100%;
        padding: 13px 16px;
        border: 1.5px solid var(--cream-dk);
        border-radius: var(--radius);
        font-family: var(--font-body);
        font-size: .95rem;
        color: var(--text-dark);
        background: var(--cream);
        outline: none;
        transition: var(--trans);
      }
      .form-group input:focus,
      .form-group select:focus,
      .form-group textarea:focus {
        border-color: var(--gold);
        background: var(--white);
        box-shadow: 0 0 0 4px rgba(201,168,76,.12);
      }
      .form-group textarea { resize: vertical; min-height: 100px; }
      .form-success {
        display: none;
        text-align: center;
        padding: 32px;
      }
      .form-success.show { display: block; }
      .success-icon { font-size: 3.5rem; color: #22c55e; margin-bottom: 12px; }
      .success-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
  
      /* ═══════════════════════════════════════════════
         CONTACT
      ═══════════════════════════════════════════════ */
      .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 60px;
        align-items: start;
      }
      .contact-card {
        background: var(--navy);
        border-radius: var(--radius-lg);
        padding: 40px;
        color: var(--white);
      }
      .contact-card-title {
        font-family: var(--font-display);
        font-size: 1.6rem;
        font-weight: 700;
        margin-bottom: 28px;
        color: var(--white);
      }
      .contact-item {
        display: flex;
        gap: 16px;
        margin-bottom: 22px;
      }
      .contact-icon {
        width: 44px; height: 44px;
        background: rgba(201,168,76,.15);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gold);
        flex-shrink: 0;
      }
      .contact-item-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.45); margin-bottom: 3px; }
      .contact-item-value { color: var(--white); font-weight: 500; font-size: .95rem; }
      .contact-item-value a { color: var(--gold-lt); }
  
      .map-wrap {
        border-radius: var(--radius-lg);
        overflow: hidden;
        height: 400px;
        box-shadow: var(--shadow-md);
      }
      .map-wrap iframe { width: 100%; height: 100%; border: none; }
  
      /* ═══════════════════════════════════════════════
         FOOTER
      ═══════════════════════════════════════════════ */
      #footer {
        background: #06111E;
        color: var(--white);
        padding: 72px 0 32px;
      }
      .footer-grid {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
        gap: 48px;
        margin-bottom: 48px;
      }
      .footer-logo {
        font-family: var(--font-display);
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 12px;
      }
      .footer-logo span { color: var(--gold); }
      .footer-desc { font-size: .88rem; color: rgba(255,255,255,.55); line-height: 1.8; margin-bottom: 20px; }
      .footer-social { display: flex; gap: 10px; }
      .social-link {
        width: 40px; height: 40px;
        border-radius: 10px;
        background: rgba(255,255,255,.07);
        border: 1px solid rgba(255,255,255,.1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255,255,255,.6);
        transition: var(--trans);
        font-size: .9rem;
      }
      .social-link:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
  
      .footer-heading {
        font-size: .8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .12em;
        color: var(--gold);
        margin-bottom: 18px;
      }
      .footer-links { display: flex; flex-direction: column; gap: 10px; }
      .footer-links a {
        color: rgba(255,255,255,.55);
        font-size: .88rem;
        transition: var(--trans);
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .footer-links a::before { content: '→'; color: var(--gold); font-size: .75rem; opacity: 0; transition: var(--trans); }
      .footer-links a:hover { color: var(--white); padding-left: 4px; }
      .footer-links a:hover::before { opacity: 1; }
  
      .footer-contact-item {
        display: flex;
        gap: 10px;
        margin-bottom: 12px;
        font-size: .88rem;
        color: rgba(255,255,255,.55);
      }
      .footer-contact-item i { color: var(--gold); width: 16px; flex-shrink: 0; margin-top: 2px; }
      .footer-contact-item a { color: rgba(255,255,255,.7); }
  
      .footer-bottom {
        border-top: 1px solid rgba(255,255,255,.08);
        padding-top: 28px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
      }
      .footer-bottom p { font-size: .83rem; color: rgba(255,255,255,.35); }
  
      /* ═══════════════════════════════════════════════
         FLOATING BUTTONS
      ═══════════════════════════════════════════════ */
      .float-btns {
        position: fixed;
        bottom: 28px; right: 24px;
        z-index: 900;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .float-btn {
        width: 54px; height: 54px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        color: var(--white);
        box-shadow: 0 4px 20px rgba(0,0,0,.25);
        transition: var(--trans);
        cursor: pointer;
        text-decoration: none;
      }
      .float-btn:hover { transform: scale(1.12); }
      .float-whatsapp { background: #25D366; }
      .float-telegram { background: #2CA5E0; }
      .float-btn-label {
        position: absolute;
        right: 64px;
        background: var(--navy);
        color: var(--white);
        padding: 5px 12px;
        border-radius: 6px;
        font-size: .78rem;
        font-weight: 600;
        white-space: nowrap;
        opacity: 0;
        transition: var(--trans);
        pointer-events: none;
      }
      @media (max-width: 768px) { .float-btn-label { display: none; } }
      .float-btn:hover .float-btn-label { opacity: 1; }
  
      /* ═══════════════════════════════════════════════
         SCROLL TO TOP
      ═══════════════════════════════════════════════ */
      #scroll-top {
        position: fixed;
        bottom: 28px; left: 24px;
        width: 46px; height: 46px;
        background: var(--gold);
        color: var(--navy);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 0;
        transform: translateY(20px);
        transition: var(--trans);
        z-index: 900;
        box-shadow: var(--shadow-md);
      }
      #scroll-top.visible { opacity: 1; transform: translateY(0); }
      #scroll-top:hover { background: var(--gold-lt); }
  
      /* ═══════════════════════════════════════════════
         RESPONSIVE
      ═══════════════════════════════════════════════ */
      @media (max-width: 1024px) {
        .tours-grid, .hotels-grid { grid-template-columns: repeat(2, 1fr); }
        .exc-grid { grid-template-columns: repeat(2, 1fr); }
        .hot-grid { grid-template-columns: 1fr 1fr; }
        .hot-card:first-child { grid-column: span 2; grid-row: span 1; }
        .about-grid, .booking-wrap, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
        .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
        .testimonials-slider { grid-template-columns: 1fr 1fr; }
        .faq-grid { grid-template-columns: 1fr; }
        .flight-grid { grid-template-columns: 1fr 1fr; }
        .flight-input-row { grid-template-columns: 1fr 1fr; }
        .about-img-accent { display: none; }
        .about-badge-float { right: 16px; }
        .hero-search-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
      }
  
      @media (max-width: 768px) {
        .nav-links { display: none; }
        .nav-toggle { display: flex; }
        .nav-right .btn { display: none; }
        .lang-switcher { display: none; }
        .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
        .tours-grid, .hotels-grid, .exc-grid { grid-template-columns: 1fr; }
        .hot-grid { grid-template-columns: 1fr; }
        .hot-card:first-child { grid-column: span 1; }
        .hero-search { display: none; }
        .hero-search-grid { grid-template-columns: 1fr; }
        .testimonials-slider { grid-template-columns: 1fr; }
        .footer-grid { grid-template-columns: 1fr; gap: 32px; }
        .form-row { grid-template-columns: 1fr; }
        .flight-grid { grid-template-columns: 1fr; }
        .flight-input-row { grid-template-columns: 1fr; }
        .swap-btn { transform: rotate(90deg); }
        .section { padding: 56px 0; }
        .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
        .section-title { font-size: clamp(1.6rem, 6vw, 2.4rem); }
        .hero-title { font-size: clamp(2rem, 7vw, 3rem); }
        .hero-sub { font-size: .98rem; }
        .hero-btns { flex-direction: column; gap: 12px; }
        .hero-btns .btn { width: 100%; justify-content: center; max-width: 300px; }
        .hero-dots { bottom: 30px; right: 50%; transform: translateX(50%); flex-direction: row; }
        .stats-bar { padding: 28px 0; }
        .stat-num { font-size: 1.8rem; }
        .about-grid { gap: 32px; }
        .about-img-main { height: 300px; }
        .about-badge-float { display: none; }
        .about-features { gap: 14px; }
        .booking-wrap { gap: 32px; }
        .booking-form { padding: 24px 20px; }
        .contact-grid { gap: 28px; }
        .contact-card { padding: 28px 20px; }
        .flight-form { padding: 24px 20px; }
        .flight-tabs { gap: 6px; }
        .flight-tab { padding: 8px 14px; font-size: .82rem; }
        .hot-card img { min-height: 260px; }
        .hot-card:first-child img { min-height: 280px; }
        .tour-footer { flex-direction: column; align-items: flex-start; gap: 14px; }
        .tour-footer .btn { width: 100%; justify-content: center; }
        .hotel-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
        .hotel-footer .btn { width: 100%; justify-content: center; }
        .exc-tabs { gap: 6px; }
        .exc-tab { padding: 8px 16px; font-size: .82rem; }
        .float-btns { bottom: 20px; right: 16px; }
        .float-btn { width: 48px; height: 48px; font-size: 1.1rem; }
        #scroll-top { bottom: 20px; left: 16px; width: 40px; height: 40px; }
        .faq-grid { gap: 10px; }
        .map-wrap { height: 300px; }
        .nav-logo { font-size: 1.3rem; }
        .footer-logo { font-size: 1.5rem; }
      }
  
      @media (max-width: 480px) {
        .container { width: 94%; }
        .hero-content { padding-top: 80px; }
        .hero-text { max-width: 100%; }
        .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .section { padding: 48px 0; }
        .section-title { font-size: 1.5rem; }
        .tour-meta-item { font-size: .76rem; }
        .booking-form { padding: 20px 16px; }
        .booking-info { display: none; }
        .testimonials-slider { gap: 16px; }
        .hot-card-overlay { padding: 18px; }
        .countdown { gap: 7px; }
        .countdown-item { min-width: 42px; padding: 6px 8px; }
        .countdown-num { font-size: 1.1rem; }
        .footer-grid { gap: 24px; }
        .footer-social { gap: 8px; }
      }
  
      /* ═══════════════════════════════════════════════
         UTILS
      ═══════════════════════════════════════════════ */
      [data-lang] { display: none; }
      [data-lang].active { display: block; }
      [data-lang-inline] { display: none; }
      [data-lang-inline].active { display: inline; }
      .text-center { text-align: center; }
      .mt-2 { margin-top: 8px; }
      .mt-4 { margin-top: 16px; }
      .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  
      /* ========================================================
     MOBIL QURILMALAR UCHUN MOSLASHTIRISH (MAX-WIDTH: 768PX)
     ======================================================== */
      @media screen and (max-width: 768px) {
        
        /* 1. Umumiy ekranda o'ngga-chapga siljishni to'xtatish */
        html, body {
          overflow-x: hidden;
          width: 100%;
          margin: 0;
          padding: 0;
        }
  
        /* 2. Asosiy ekran (Hero section) matnlari va joylashuvi */
        .hero {
          padding-top: 100px !important; /* Tepadagi menyu yopib qo'ymasligi uchun */
          padding-left: 15px !important;
          padding-right: 15px !important;
          min-height: auto !important;
          padding-bottom: 50px !important;
        }
  
        .hero h1 {
          font-size: 2.2rem !important; /* Matn o'lchamini mobilga moslash */
          line-height: 1.3 !important;
          margin-bottom: 15px !important;
        }
  
        .hero p {
          font-size: 1rem !important;
        }
  
        /* 3. Kartalar (Tur paketlar, Yo'nalishlar, Mijozlar fikri) */
        /* Agar sizda grid ishlagan bo'lsa: */
        .tours-grid, 
        .destinations-grid, 
        .testimonials-grid,
        .offers-grid {
          display: grid !important;
          grid-template-columns: 1fr !important; /* 1 ta qatorga tushirish */
          gap: 20px !important;
          padding: 0 15px !important;
        }
  
        /* Agar kartalar flexboxda bo'lsa, ustun shakliga keltirish: */
        .tours-container, 
        .reviews-container,
        .contact-container {
          display: flex !important;
          flex-direction: column !important;
          width: 100% !important;
          padding: 0 15px !important;
          box-sizing: border-box;
        }
  
        .card, .tour-card, .review-card {
          width: 100% !important;
          margin: 0 auto !important;
        }
  
        /* 4. Xarita (Map) moslashuvchanligi */
        iframe {
          width: 100% !important;
          max-width: 100% !important;
          height: 350px !important; /* Balandlikni mobilga qulay qilish */
          border: none !important;
        }
  
        /* 5. Bron qilish formasi va qidiruv qismi */
        .booking-form, 
        .search-container {
          width: 90% !important;
          margin: 0 auto !important;
          padding: 20px !important;
          flex-direction: column !important;
        }
  
        .booking-form input, 
        .booking-form button {
          width: 100% !important;
          margin-bottom: 10px !important;
        }
      }