* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --coral: #f16e5e;
  --blue: #8ac3e8;
  --grey: #f0f0f0;
  --dark: #070b0d;
}

body {
  font-family: "Inter", sans-serif;
  overflow-x: hidden;
  color: #777;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
}
button {
  font-family: "Inter", sans-serif;
}
.container {
  max-width: 1250px;
  margin: 0 auto;
}
.stitle {
  font-size: 60px;
  color: var(--coral);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.text-center {
  text-align: center;
}

.flight-sec,
.fare-sec,
.why-sec,
.routes-sec,
.reviews-sec,
.offers-sec,
.blogs-sec {
  padding: 100px 0;
}

/* ══════════════════════════════════════
   NAVBAR
══════════════════════════════════════ */
.nav-wrap {
  position: absolute;
  left: 0;
  top: 20px;
  z-index: 999;
  width: 100%;
}
.nav-container {
  width: 1340px;
  margin: 0 auto;
  max-width: 100%;
}

nav {
  background: #fff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 40px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  height: 72px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.logo img {
  width: 200px;
}

.logo-icon {
  flex-shrink: 0;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo-text .brand {
  font-size: 26px;
  font-weight: 800;
  color: var(--coral);
  font-style: italic;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.logo-text .brand .air {
  color: var(--blue);
}

.logo-text .tag {
  font-size: 9.5px;
  color: #888;
  font-weight: 500;
  letter-spacing: 0.2px;
  margin-top: 1px;
}

/* Nav links */
.nav-links {
  display: flex;
  gap: 60px;
  list-style: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 22px;
}

.nav-links a {
  text-decoration: none;
  color: #444;
  font-size: 18px;
  font-weight: 500;
  transition: color 0.2s;
  white-space: nowrap;
}

.nav-links a.active {
  color: var(--coral);
  border-bottom: 2px solid var(--coral);
  padding-bottom: 2px;
  font-weight: 600;
}

.nav-links a:hover {
  color: var(--coral);
}

/* Right support block */
.nav-sup {
  text-align: right;
  flex-shrink: 0;
}

.nav-sup .lbl {
  font-size: 16px;
  color: var(--coral);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.nav-sup .ph {
  font-size: 24px;
  font-weight: 600;
  color: var(--coral);
  letter-spacing: 0.3px;
  line-height: 1.2;
}

/* ══════════════════════════════════════
   HERO  — key fixes here
══════════════════════════════════════ */
.hero {
  background: #f26545;
  position: relative;
  overflow: hidden;
  /* increased padding so content clears the sticky nav */
  padding: 150px 40px 80px 40px;
  /* tall enough to fully show left text + booking card */
  min-height: 620px;
}

/* ── World map globe lines ── */
.hero-globe {
    position: absolute;
    left: -80px;
    top: -80px;
    width: 580px;
    height: 580px;
    pointer-events: none;
    opacity: 0.3;
    object-fit: contain;
}

/* ── Dashed arc paths ── */
.hero-arc-1 {
  position: absolute;
  top: 30px;
  left: 60px;
  width: 520px;
  height: 380px;
  border: 2px dashed rgba(255, 255, 255, 0.45);
  border-radius: 0 60% 0 0;
  border-left: none;
  border-bottom: none;
  pointer-events: none;
}

.hero-arc-2 {
  position: absolute;
  bottom: 60px;
  left: -30px;
  width: 420px;
  height: 280px;
  border: 2px dashed rgba(255, 255, 255, 0.3);
  border-radius: 0 0 60% 0;
  border-left: none;
  border-top: none;
  pointer-events: none;
}

/* ── Planes on arc paths ── */
.arc-plane {
  position: absolute;
  pointer-events: none;
}

.arc-plane svg {
  display: block;
}

.arc-plane-1 {
  top: 155px;
  left: 44%;
}

.arc-plane-2 {
  top: 310px;
  left: 12%;
}

.arc-plane-3 {
  bottom: 115px;
  left: 5%;
}

/* ── Toronto CN Tower Skyline ── */
.hero-skyline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 48%;
  height: 260px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 260'%3E%3C!-- CN Tower center --%3E%3Crect x='340' y='10' width='8' height='250' fill='rgba(180,55,15,0.55)'/%3E%3Cellipse cx='344' cy='105' rx='22' ry='10' fill='rgba(180,55,15,0.55)'/%3E%3Crect x='330' y='100' width='28' height='160' fill='rgba(180,55,15,0.52)'/%3E%3Crect x='336' y='8' width='3' height='30' fill='rgba(180,55,15,0.6)'/%3E%3C!-- Buildings left --%3E%3Crect x='8' y='110' width='32' height='150' fill='rgba(180,55,15,0.38)'/%3E%3Crect x='48' y='80' width='22' height='180' fill='rgba(180,55,15,0.32)'/%3E%3Crect x='78' y='120' width='44' height='140' fill='rgba(180,55,15,0.28)'/%3E%3Crect x='130' y='55' width='14' height='205' fill='rgba(180,55,15,0.42)'/%3E%3Ccircle cx='137' cy='55' r='8' fill='rgba(180,55,15,0.42)'/%3E%3Crect x='152' y='90' width='50' height='170' fill='rgba(180,55,15,0.3)'/%3E%3Crect x='210' y='68' width='24' height='192' fill='rgba(180,55,15,0.35)'/%3E%3Crect x='242' y='100' width='46' height='160' fill='rgba(180,55,15,0.26)'/%3E%3Crect x='296' y='50' width='18' height='210' fill='rgba(180,55,15,0.3)'/%3E%3C!-- Buildings right --%3E%3Crect x='370' y='78' width='56' height='182' fill='rgba(180,55,15,0.28)'/%3E%3Crect x='434' y='60' width='30' height='200' fill='rgba(180,55,15,0.25)'/%3E%3Crect x='472' y='40' width='18' height='220' fill='rgba(180,55,15,0.3)'/%3E%3Crect x='498' y='72' width='60' height='188' fill='rgba(180,55,15,0.22)'/%3E%3Crect x='566' y='55' width='24' height='205' fill='rgba(180,55,15,0.25)'/%3E%3Crect x='598' y='88' width='50' height='172' fill='rgba(180,55,15,0.2)'/%3E%3Crect x='656' y='46' width='16' height='214' fill='rgba(180,55,15,0.24)'/%3E%3Crect x='680' y='80' width='62' height='180' fill='rgba(180,55,15,0.18)'/%3E%3Crect x='750' y='60' width='10' height='200' fill='rgba(180,55,15,0.2)'/%3E%3C!-- windows --%3E%3Crect x='155' y='96' width='6' height='5' fill='rgba(255,200,150,0.2)'/%3E%3Crect x='166' y='96' width='6' height='5' fill='rgba(255,200,150,0.2)'/%3E%3Crect x='155' y='108' width='6' height='5' fill='rgba(255,200,150,0.25)'/%3E%3Crect x='166' y='108' width='6' height='5' fill='rgba(255,200,150,0.2)'/%3E%3C/svg%3E")
    bottom/auto 100% no-repeat;
}

/* ── Hero inner layout ── */
.hero-inner {
  width: 100%;
  display: flex;
  gap: 32px;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

/* ── Left content ── */
.hero-left {
  flex: 1;
  color: #fff;
  padding-bottom: 80px;
  padding-top: 16px;
}

.hero-plane-icon {
  display: block;
  text-align: center;
  margin-bottom: 2px;
}
.hero-plane-icon img {
  width: 100px;
}

.hero-left h1 {
  font-size: 88px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3);
  color: #fdf3e5;
}

.hero-sub {
  font-size: 21px;
  margin-top: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #fdf3e5;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

/* Blue rating pill */
.rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--blue);
  border-radius: 50px;
  padding: 11px 22px;
  margin-top: 24px;
}

.rating-pill .stars {
  display: flex;
  gap: 2px;
}
.rating-pill .stars svg path {
  fill: #FFD700 !important;
}

.rating-pill .rt {
  font-size: 17px;
  color: #fff;
  white-space: nowrap;
}

.rating-pill .rt span {
  color: var(--dark);
}

/* ── Booking card ── */
.booking-card {
  background: #fff;
  border-radius: 20px;
  padding: 30px 25px;
  width: 500px;
  flex-shrink: 0;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.28);
  /* pull card down slightly so it anchors at the top of hero content area */
  margin-top: 0;
  /* allow card to extend below hero if needed */
  position: relative;
  z-index: 3;
}

.bk-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.bk-tab {
  padding: 7px 20px 6px 20px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid var(--blue);
  background: #fff;
  color: var(--dark);

  transition: all 0.2s;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.bk-tab.active {
  background: var(--blue);
  color: var(--dark);
  border-color: var(--blue);
}

/* Field label */
.fl {
  font-size: 15px;
  color: var(--dark);
  font-weight: 700;
  margin-bottom: 4px;
  display: block;
}

/* Field wrapper */
.fw {
  position: relative;
  margin-bottom: 9px;
}

.fw input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  border: none;
  border-radius: 50px;
  font-size: 15px;

  color: var(--dark);
  background: #f2f2f2;
  outline: none;
}

.fw input::placeholder {
  color: #bbb;
  font-size: 15px;
}

.fw.no-icon input {
  padding-left: 16px;
}

.fw .fi {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

/* 3-col date row */
.f3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 9px;
}

/* .f3-col .fl {
    font-size: 11px;
    margin-bottom: 4px;
} */

.f3-col .fw {
  margin-bottom: 0;
}

.f3-col .fw input {
  padding: 9px 8px 9px 30px;
}

.f3-col .fw.no-icon input {
  padding-left: 10px;
}

/* Submit */
.submit-btn {
  padding: 12px 40px;
  background: var(--blue);
  color: var(--dark);
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  cursor: pointer;

  transition: background 0.2s;
  text-transform: uppercase;
  margin-top: 16px;
  display: block;
}

.submit-btn:hover {
  background: #3597c5;
}

/* ══════════════════════════════════════
   REST OF PAGE
══════════════════════════════════════ */
.flight-sec {
}
.flight-sec .stitle {
  margin-bottom: 20px;
}
.ssub {
  text-align: center;
  font-size: 18px;
  /* color: #bbb; */
  margin-bottom: 28px;
}

.city-tabs {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.city-tab {
  padding: 10px 26px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;

  transition: all 0.2s;
  border: none;
}

.city-tab.active {
  background: var(--coral);
  color: #fff;
}

.city-tab:not(.active) {
  background: #fde8e2;
  color: var(--coral);
}

.city-tab:hover:not(.active) {
  background: var(--coral);
  color: #fff;
}

.dest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 50px;
}

.dest-card {
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.22s,
    box-shadow 0.22s;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.dest-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
}

.dest-img {
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  position: relative;
}
.dest-img img {
  width: 100%;
}
.dest-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  /* background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .2) 50%, transparent 100%); */
}

.dest-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  z-index: 2;
}

.dest-info h4 {
  font-size: 17px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.dest-info .dfrom {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
  margin-bottom: 10px;
}

.dest-info .drow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dest-info .dprice {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  font-style: italic;
  display: flex;
  align-items: baseline;
}

.dest-info .dprice sub {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.85;
}

.dest-info .dbook {
  padding: 8px 18px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.fare-sec {
  background: #efefef;
  background-image: url(images/map.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  overflow: hidden;
}

.fare-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 500'%3E%3Cellipse cx='600' cy='250' rx='580' ry='230' fill='none' stroke='rgba(0,0,0,0.05)' stroke-width='2'/%3E%3Cellipse cx='600' cy='250' rx='400' ry='230' fill='none' stroke='rgba(0,0,0,0.04)' stroke-width='1.5'/%3E%3Cellipse cx='600' cy='250' rx='200' ry='230' fill='none' stroke='rgba(0,0,0,0.03)' stroke-width='1'/%3E%3Cline x1='20' y1='250' x2='1180' y2='250' stroke='rgba(0,0,0,0.03)' stroke-width='1'/%3E%3Cline x1='600' y1='20' x2='600' y2='480' stroke='rgba(0,0,0,0.03)' stroke-width='1'/%3E%3C/svg%3E")
    center/cover;
  pointer-events: none;
}

.fare-deco-plane {
  position: absolute;
  top: 28px;
  right: 52px;
  opacity: 0.2;
}

/*.fare-inner{max-width:1200px;margin:0 auto;display:flex;gap:80px;align-items:center;position:relative;z-index:1;}*/
.fare-left {
  flex: 0 0 300px;
}

.fare-left h2 {
  margin: 0;
}

.fare-left p {
  font-size: 18px;
  margin-top: 0;
  line-height: 1.65;
}

.fare-right {
  flex: 1;
}

.fare-cols {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.fare-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 110px;
}

.fare-badge {
  padding: 7px 18px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  background: var(--blue);
  width: 90%;
  text-align: center;
}

.fare-badge.active {
  background: var(--coral);
}

.fare-logo-box {
  width: 68px;
  height: 120px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.fare-logo-box img {
  transform: rotate(90deg);
  width: 200%;
}

.fare-logo-txt {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-weight: 800;
  line-height: 1.1;
  user-select: none;
}

.fare-pill-btn {
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  border: none;
  transition: all 0.2s;
}

.fare-pill-btn.active {
  background: var(--coral);
  color: #fff;
}

.fare-pill-btn:not(.active) {
  background: var(--blue);
  color: var(--dark);
}

.why-sec {
}

.why-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 80px;
  align-items: center;
}

.why-title-wrap {
  text-align: center;
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 0 20px;
}

.why-content {
  flex: 1;
}

/* Subtitle — normal grey, centered */
.why-sub {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.why-sub a {
  color: var(--coral);
  text-decoration: none;
  font-weight: 600;
}

/* 2×2 feature grid */
.feat-grid {
  display: flex;
  column-gap: 0;
  row-gap: 0;
  flex-wrap: wrap;
}

/* CARD */
.feat-item {
  max-width: 50%;
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 30px;
}

/* Outer ring — light blue outline circle */
.feat-circle-outer {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}

/* Inner filled blue circle */
.feat-circle-inner {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  /* background: var(--blue); */
  display: flex;
  align-items: center;
  justify-content: center;
}
.feat-circle-inner img {
  width: 60px;
}
.feat-item h4 {
  font-family: "Inter", sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--coral);
  margin-bottom: 10px;
}

.feat-item p {
  font-size: 15px;
  line-height: 1.55;

  text-align: justify;
}

/* Expert card — right side */
.exp-card {
  width: 370px;
  flex-shrink: 0;
  background: #f0f0f0;
  border-radius: 28px;
  padding: 80px 40px;
  text-align: center;
}

/* Avatar — bigger coral circle with silhouette */
..exp-avatar-wrap {
  width: 100%;
  height: auto;
  border-radius: 0;
  background: none;
  margin: 0 auto 16px;
  position: static;
  overflow: visible;
}

.exp-avatar-wrap::before,
.exp-avatar-wrap::after {
  display: none !important;
  content: none !important;
}

.exp-avatar-wrap img {
  width: 200px;        /* ← fixed width */
  height: 200px;       /* ← fixed height */
  display: block;
  object-fit: cover;   /* ← image crop hogi circle mein fit hone ke liye */
  object-position: top; /* ← upar se crop hogi */
  border-radius: 50%;  /* ← circle shape */
  margin: 0 auto 20px;
}

/* Head circle */
/* .exp-avatar-wrap::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #f0b09a;
} */

/* Shoulders */
/* .exp-avatar-wrap::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 58px;
  border-radius: 50% 50% 0 0;
  background: #f0b09a;
} */

.exp-card p {
  font-size: 17px;
  color: var(--coral);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 26px;
}

.exp-speak {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;

  letter-spacing: 1.4px;
  margin-bottom: 30px;
  text-transform: uppercase;
}

.exp-speak:hover {
  background: #3597c5;
}

.exp-phone {
  font-size: 26px;
  font-weight: 800;
  color: var(--coral);
  letter-spacing: 0.5px;
}

.routes-sec {
  background: var(--coral);
}

.routes-sec .stitle {
  color: #fdf3e5;
}

.routes-sec .ssub {
  color: #fdf3e5;
}

.routes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.route-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s;
}

.route-card:hover {
  transform: translateY(-5px);
}

.route-img {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  overflow: hidden;
}
.route-img img {
  width: 100%;
}

.route-body {
  padding: 14px 18px;
}

.route-city {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 10px;
}

.route-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ac-logo-unit {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ac-logo {
  width: 30px;
  height: 30px;
  /* border-radius: 50%;
    border: 2px solid #dc0000;
    background: #fff; */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ac-logo img {
  width: 100%;
}

.route-airline {
  font-size: 13px;
  color: #555;
  font-weight: 500;
}

.route-div {
  width: 1px;
  height: 34px;
  background: #e0e0e0;
}

.route-code {
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 4px;
}
.route-code span {
  color: #dc0000;
}

.route-dates {
  font-size: 12px;
  color: var(--dark);
  margin-top: 2px;
}

.cta-banner {
  display: flex;
  align-items: stretch;
  position: relative;
  min-height: 120px;
}

.cta-left-half {
  flex: 1;
  background: var(--blue);
  display: flex;
  align-items: center;
  padding: 28px 48px;
}

.cta-right-half {
  flex: 1;
  background: var(--coral);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 28px 48px;
}

.cta-text h3 {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.cta-text p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 3px;
}

.cta-plane-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -58%);
  z-index: 5;
  pointer-events: none;
}

.cta-phone-pill {
  background: #fff;
  color: var(--coral);
  padding: 15px 32px;
  border-radius: 50px;
  font-size: 20px;
  font-weight: 800;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}

.reviews-sec {
  background: #f5f5f5;
  /* 👈 PERFECT PDF GREY */
  /* padding: 70px 48px; */
}
.reviews-slider {
  position: static !important;
}
.reviews-slider .owl-dots {
  position: absolute;
  left: 0;
  bottom: -35px;
  width: 100%;
}
.reviews-slider .owl-item {
  /* padding: 10px 0; */
}
.reviews-grid {
  position: relative;
  padding-left: 300px;
  /* grid-template-columns: 240px 1fr 1fr 1fr; 
    gap: 16px;*/
  margin-top: 40px;
}

.score-card {
  background: #fff;
  border-radius: 16px;
  padding: 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.07);
  text-align: center;
  width: 260px;
  position: absolute;
  left: 0;
  top: 0;
}

.sc-exc {
  font-size: 22px;
  font-weight: 800;
  color: var(--coral);
  margin-bottom: 6px;
}

.sc-stars {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-bottom: 8px;
}

.sc-rating {
  font-size: 15px;
  color: #555;
  font-weight: 500;
}

.sc-based {
  font-size: 14px;
  color: var(--dark);
  font-weight: 700;
  margin-top: 4px;
}

.rv-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  /* box-shadow: 0 3px 14px rgba(0, 0, 0, .07); */
}

.rv-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}

.rv-stars {
  display: flex;
  gap: 3px;
}

.rv-good {
  font-size: 12px;
  color: #1ea28a;
  font-weight: 600;
  margin-top: 10px;
}

.rv-date {
  font-size: 11px;
  color: #bbb;
  display: flex;
  align-items: center;
  gap: 4px;
}

.rv-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
  margin: 6px 0 8px;
}

.rv-text {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

.dots-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition: background 0.2s;
}

.dot.on {
  background: var(--coral);
}

.offers-sec {
  background: #fff;
}

.offers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* CARD */
.offer-card {
  border-radius: 22px;
  overflow: visible;
  /* IMPORTANT */
  background: transparent;
  /* box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); */
  transition: 0.25s;
  padding: 25px;
}

.offer-card:hover {
  /* transform: translateY(-6px); */
}

/* IMAGE */
.offer-img {
  position: relative;
  height: 340px;
  border-radius: 40px;
  overflow: hidden;
  /* box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); */
}

.offer-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* DARK OVERLAY */
.offer-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent);
}

/* TEXT OVER IMAGE */
.offer-overlay-text {
  position: absolute;
  right: 20px;
  bottom: 90px;
  /* transform: translateY(-50%); */
  color: #fff;
  font-size: 44px;
  font-weight: 900;
  line-height: 1.1;
  text-align: right;
  z-index: 7;
  opacity: 0.95;
}

/* PRICE BADGE */
.offer-badge {
  position: absolute;
  bottom: 38px;
  left: 18px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.offer-badge span {
  font-size: 19px;
  font-weight: 700;
  color: var(--coral);
  white-space: nowrap;
}

.offer-badge strong {
  font-size: 34px;
  color: var(--blue);
}

/* BUTTON OVERLAP */
.offer-footer {
  position: relative;
  /* MAGIC */
  z-index: 5;

  background: var(--coral);
  border: 5px solid #fff;
  color: #fff;
  padding: 14px 16px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  border-radius: 50px;
  margin-left: -30px;
  margin-right: -30px;
  margin-top: -75px;

  /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); */
}

.offer-card {
  /* padding-bottom: 0px; */
  /* NEW */
}

.blogs-sec {
  background: var(--coral);
}

.blogs-sec .stitle {
  color: #fff;
}

.blogs-wrap {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.blogs-slider {
  margin-top: 40px;
}
.owl-nav {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
}
.owl-nav button {
  position: absolute;
  top: -44px;
  /* transform: translateY(-50%); */
  width: 44px;
  height: 44px;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.28) !important;
  color: #777 !important;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 30px !important;
  z-index: 5;
  transition: background 0.2s;
}

.owl-nav button:hover {
  background: rgba(255, 255, 255, 0.5) !important;
  color: #777 !important;
}

.owl-nav button.owl-prev {
  left: -22px;
}

.owl-nav button.owl-next {
  right: -22px;
}

.blogs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}

.blog-card {
  background: #fff;
  height: 100%;
  border-radius: 38px;
  overflow: hidden;
  padding: 20px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}

.blog-img {
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  border-radius: 40px;
  overflow: hidden;
}

.blog-img.bi1 {
  background: linear-gradient(135deg, #3a8fc5, #1a5580);
}

.blog-img.bi2 {
  background: linear-gradient(135deg, #777, #444);
}

.blog-img.bi3 {
  background: linear-gradient(135deg, #667788, #334455);
}

.blog-body {
  padding: 20px 5px 0 5px;
}

.blog-body h4 {
  font-size: 18px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  color: var(--coral);
  line-height: 1.4;
  margin-bottom: 16px;
}

.read-more {
  display: inline-block;
  padding: 9px 22px;
  background: var(--blue);
  color: #fff;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

footer {
  background: #efefef;
  padding: 80px 0 20px 0;
}

.foot-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.foot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.4fr;
  gap: 40px;
  margin-bottom: 44px;
}

/* All column headings coral */
.fcol h4 {
  font-size: 19px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  color: var(--coral);
  margin-bottom: 18px;
}

/* Link lists — grey text, no hover color change except subtle */
.fcol ul {
  list-style: none;
}

.fcol ul li {
  margin-bottom: 8px;
}

.fcol ul li a {
  color: #888;
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  transition: color 0.2s;
}

.fcol ul li a:hover {
  color: var(--coral);
}

/* Address block — flag circle + text */
.faddr {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.fflag {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #ddd;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.fflag svg {
  width: 38px;
  height: 38px;
}

.faddr p {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  padding-top: 4px;
}

/* Phone / email rows */
.fline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-left: 62px;
}

.ficon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fline a {
  color: var(--coral);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.fline a:hover {
  text-decoration: underline;
}

/* Social icons — outlined coral circles */
.social-row {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  padding-left: 62px;
}

.soc {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--coral);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition:
    background 0.2s,
    border-color 0.2s;
}

.soc:hover {
  background: var(--coral);
}

.soc:hover svg path,
.soc:hover svg rect,
.soc:hover svg circle,
.soc:hover svg polyline {
  stroke: #fff !important;
}

.soc:hover svg path[fill="#F26545"] {
  fill: #fff !important;
}

/* Bottom bar */
.foot-bottom {
  border-top: 1px solid #ddd;
  padding: 18px 0 20px;
  text-align: center;
  font-size: 14px;
  color: var(--coral);
  font-weight: 500;
}

.foot-bottom a {
  color: var(--coral);
  text-decoration: none;
}

.foot-bottom a:hover {
  text-decoration: underline;
}

@media (max-width: 1100px) {
  .dest-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .routes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .reviews-grid {
    grid-template-columns: 1fr 1fr;
  }

  .offers-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1024px) {
  nav {
    padding: 12px 20px;
  }

  .nav-links {
    position: static;
    transform: none;
    display: none;
  }

  .hero {
    padding: 28px 20px 0;
  }

  .hero-inner {
    flex-direction: column;
    padding-top: 20px;
  }

  .hero-left h1 {
    font-size: 38px;
  }

  .booking-card {
    width: 100%;
  }

  .flight-sec,
  .fare-sec,
  .why-sec,
  .routes-sec,
  .reviews-sec,
  .offers-sec,
  .blogs-sec {
    padding: 40px 20px;
  }

  footer {
    padding: 40px 20px 20px;
  }

  .fare-inner {
    flex-direction: column;
    gap: 32px;
  }

  .fare-left {
    flex: none;
  }

  .why-inner {
    flex-direction: column;
  }

  .exp-card {
    width: 100%;
  }

  .cta-left-half,
  .cta-right-half {
    padding: 20px 24px;
  }

  .cta-text h3 {
    font-size: 18px;
  }

  .cta-plane-center {
    display: none;
  }

  .cta-phone-pill {
    font-size: 15px;
    padding: 12px 20px;
  }

  .blogs-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .dest-grid,
  .routes-grid,
  .offers-grid {
    grid-template-columns: 1fr;
  }

  .reviews-grid {
    grid-template-columns: 1fr;
  }

  .foot-grid {
    grid-template-columns: 1fr;
  }

  .feat-grid {
    /* grid-template-columns: 1fr; */
  }

  .blogs-grid {
    grid-template-columns: 1fr;
  }

  .hero-left h1 {
    font-size: 30px;
  }

  .f3 {
    grid-template-columns: 1fr;
  }

  .cta-banner {
    flex-direction: column;
  }

  .cta-left-half,
  .cta-right-half {
    flex: none;
    width: 100%;
  }

  .cta-right-half {
    justify-content: center;
  }
}

/* ===== WHY SECTION FINAL CLEAN ===== */

/* LAYOUT */
.why-inner {
  display: flex;
  align-items: center;
  gap: 100px;
}

/* LEFT BLOCK */

/* HEADING */

/* GRID */
.feat-grid {
  /* display: flex;
    column-gap: 0;
    row-gap: 0;
    flex-wrap: wrap; */
}

/* CARD */
.feat-item {
  /* max-width: 50%;
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    align-items: center; */
}

/* ICON */
.feat-circle-outer {
  margin-bottom: 14px;
}

/* HEADING */
.feat-item h4 {
  /* text-align: center;
    margin-bottom: 10px; */
}

/* DESCRIPTION (FINAL PERFECT) */
.feat-item p {
  /* text-align: left;
    width: 100%;
    max-width: 240px;
    line-height: 1.7;
    color: #777;
    margin: 0 auto; */
}

/* WHITE STRIP */
.route-divider {
  height: 40px;
  background: #fff;
}

/* CTA FINAL */
.cta-banner-wrap {
  background: linear-gradient(to right, #74b9dd 50%, #f26545 50%);
  margin: 30px 0 15px 0;
}
.cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin: 50px 0;
}

/* LEFT TEXT */
.cta-left {
  color: #fff;
  z-index: 2;
}

.cta-left h3 {
  font-size: 30px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  line-height: 1.3;
}

.cta-left p {
  font-size: 13px;
  opacity: 0.9;
}

/* RIGHT PHONE */
.cta-right {
  z-index: 2;
}

.cta-phone {
  background: #fff;
  color: #f26545;
  padding: 12px 26px;
  border-radius: 30px;
  font-size: 28px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 1px;
}

/* CENTER PLANE */
.cta-plane {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-55%, -55%);
  z-index: 1;
}

.cta-plane img {
  width: 280px;
}

.cta-plane::after {
  /* content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 12px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    filter: blur(4px); */
}

.reviews-sec {
  border-top: 30px solid #fff;
}

.score-card,
.rv-card {
  /* box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); */
  border-radius: 18px;
}

.cta-banner {
  margin-bottom: 0;
}

.ssub {
  margin-bottom: 40px;
}

/* ===== SPECIAL FARE DEALS FIXED ===== */

/* ===== SPECIAL FARE DEALS FINAL ===== */

.fare-sec {
  /* position: relative;
    overflow: hidden; */
  /* 🔥 proper spacing */
}

/* INNER WRAPPER */
.fare-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 100px;
  /* 🔥 spacing between left & right */
}

/* LEFT SIDE */
.fare-left {
  flex: 0 0 600px;
  /* 🔥 enough width for one-line heading */
}

/* RIGHT SIDE */
.fare-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

/* COLUMNS WRAPPER */
.fare-cols {
  display: flex;
  align-items: flex-end; /* bottom-align so bars grow upward like a chart */
  gap: 20px;
}

/* EACH COLUMN */
.fare-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* PRICE BADGE */
.fare-badge {
  /* padding: 8px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    background: #4BA8D8;
    color: #fff; */
}

.fare-badge.active {
  background: #f26545;
}

/* LOGO BOX (ALL SAME — NO CIRCLE) */
.fare-logo-box {
  width: 70px;
  height: 150px;
  border-radius: 14px !important;
  /* 🔥 force rectangle */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

/* ROTATED TEXT */
.fare-logo-txt {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  font-weight: 700;
}

/* BUTTON */
.fare-pill-btn {
  /* padding: 10px 22px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    background: #4BA8D8;
    color: #fff;
    cursor: pointer;
    white-space: nowrap; */
}

.fare-pill-btn.active {
  /* background: #F26545; */
}

/* REMOVE ANY OVAL/CIRCLE EFFECT */
.fare-logo-box.round {
  border-radius: 14px !important;
  width: 70px;
  height: 150px;
}

/* BAR GRAPH — each column taller than the previous (proportional to price) */
.fare-col:nth-child(1) .fare-logo-box {
  height: 80px;
}
.fare-col:nth-child(2) .fare-logo-box {
  height: 120px;
}
.fare-col:nth-child(3) .fare-logo-box {
  height: 150px;
}
.fare-col:nth-child(4) .fare-logo-box {
  height: 180px;
}

.fare-col {
  gap: 12px;
  /* thoda tight */
}

/* ===== STICKY HEADER ===== */
.nav-wrap.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  animation: slideDown 0.3s ease;
  z-index: 999;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.nav-wrap.sticky nav {
  box-shadow: none;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* ===== MOBILE MENU ===== */
.menu-toggle {
  display: none;
  font-size: 26px;
  cursor: pointer;
}

/* Mobile styles */
@media (max-width: 992px) {
  nav {
    position: relative;
    padding: 10px 20px;
  }

  .menu-toggle {
    display: block;
  }

  .nav-links {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: #fff;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px 0;

    display: none; /* hidden by default */
  }

  .nav-links.active {
    display: flex;
  }

  .nav-sup {
    display: none;
  }
}

/* ============================================================
   METAIRFARE — RESPONSIVE STYLES
   Add this file as: <link rel="stylesheet" href="responsive.css">
   Place AFTER style.css in the <head>
   ============================================================ */

/* ── Reset box-sizing globally ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ================================================================
   HAMBURGER / MOBILE NAV
   ================================================================ */

/* Hide hamburger on desktop */
.menu-toggle {
  display: none;
  font-size: 26px;
  cursor: pointer;
  color: #fff;
  background: none;
  border: none;
  padding: 4px 8px;
  line-height: 1;
  z-index: 1001;
  transition: color 0.2s;
}
.menu-toggle:hover {
  color: #f26545;
}

/* Hamburger becomes 3-line icon via CSS */
.hamburger-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 24px;
  cursor: pointer;
}
.hamburger-icon span {
  display: block;
  height: 2.5px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.hamburger-icon.open span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.hamburger-icon.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger-icon.open span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ================================================================
   NAVBAR RESPONSIVE
   ================================================================ */
.nav-container {
  width: 100%;
  padding: 0 16px;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

/* ================================================================
   HERO SECTION RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
  .hero-inner {
    flex-direction: column !important;
    gap: 32px;
    padding: 40px 20px !important;
  }
  .hero-left {
    max-width: 100% !important;
  }
  .hero-left h1 {
    font-size: clamp(28px, 6vw, 48px) !important;
  }
  .booking-card {
    width: 100% !important;
    max-width: 600px;
    margin: 0 auto;
  }
}

/* ================================================================
   TABLET  (≤ 900px)
   ================================================================ */
@media (max-width: 1024px) {
  /* --- NAV --- */
  .menu-toggle {
    display: flex;
  }

  .nav-links {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    background: #0b1d3a;
    flex-direction: column;
    padding: 80px 30px 30px;
    gap: 0;
    z-index: 1000;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(100%);
    list-style: none;
    margin: 0;
  }

  .nav-links.active {
    display: flex;
    transform: translateX(0);
  }

  .nav-links li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .nav-links li a {
    display: block;
    padding: 14px 0;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
  }
  .nav-links li a:hover,
  .nav-links li a.active {
    color: #f26545;
  }

  /* Overlay when menu open */
  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
  .nav-overlay.active {
    display: block;
  }

  /* Keep logo and support visible */
  .nav-sup {
    display: flex;
    flex-direction: column;
    font-size: 12px;
  }
  .nav-sup .ph {
    font-size: 13px;
  }

  /* --- HERO --- */
  .hero {
    padding: 0 !important;
    min-height: auto !important;
  }
  .hero-inner {
    flex-direction: column !important;
    padding: 40px 20px 30px !important;
    gap: 30px;
  }
  .hero-left {
    text-align: center;
  }
  .hero-left h1 {
    font-size: 32px !important;
  }
  .hero-sub {
    font-size: 15px !important;
  }
  .rating-pill {
    justify-content: center;
  }

  .booking-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    padding: 20px !important;
  }

  /* --- FLIGHT SECTION --- */
  .dest-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* --- FARE DEALS --- */
  .fare-inner {
    flex-direction: column !important;
    gap: 24px;
    text-align: center;
  }
  .fare-cols {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
  }

  /* --- WHY CHOOSE --- */
  .why-inner {
    flex-direction: column !important;
    padding: 40px 20px !important;
    gap: 32px;
  }
  .feat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
  .exp-card {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* --- ROUTES GRID --- */
  .routes-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }

  /* --- CTA BANNER --- */
  .cta-banner {
    flex-direction: column !important;
    text-align: center;
    gap: 20px;
    padding: 30px 20px !important;
  }
  .cta-plane {
    display: none;
  }
  .cta-phone {
    font-size: 22px !important;
  }

  /* --- REVIEWS --- */
  .reviews-grid {
    flex-direction: column !important;
    gap: 20px;
  }
  .score-card {
    width: 100% !important;
  }

  /* --- FOOTER --- */
  .foot-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
  }
}

/* ================================================================
   MOBILE  (≤ 600px)
   ================================================================ */
@media (max-width: 600px) {
  /* --- NAV --- */
  .nav-wrap {
    padding: 12px 16px !important;
  }
  .logo img {
    height: 36px !important;
    max-width: 140px;
  }
  .nav-sup {
    display: none;
  } /* hide on small phones to save space */

  /* --- HERO --- */
  .hero-inner {
    padding: 30px 16px 24px !important;
  }
  .hero-left h1 {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }
  .hero-sub {
    font-size: 14px !important;
  }
  .hero-plane-icon img {
    width: 32px !important;
  }

  .booking-card {
    padding: 16px !important;
  }
  .bk-tabs {
    gap: 4px !important;
  }
  .bk-tab {
    font-size: 12px !important;
    padding: 8px 12px !important;
  }

  .f3 {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .f3-col {
    width: 100% !important;
  }

  .submit-btn {
    font-size: 14px !important;
    padding: 14px !important;
  }

  /* --- FLIGHT SECTION --- */
  .stitle {
    font-size: clamp(20px, 5vw, 28px) !important;
  }

  .city-tabs {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center;
  }
  .city-tab {
    font-size: 12px !important;
    padding: 7px 12px !important;
  }

  .dest-grid {
    grid-template-columns: 1fr !important;
    padding: 0 16px !important;
  }
  .dest-card {
    max-width: 100%;
  }

  /* --- FARE DEALS --- */
  .fare-cols {
    grid-template-columns: repeat(2, 1fr) !important;
    display: grid !important;
  }

  /* --- WHY CHOOSE --- */
  .feat-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .feat-item {
    text-align: center;
  }

  /* --- ROUTES --- */
  .routes-grid {
    grid-template-columns: 1fr !important;
    padding: 0 16px !important;
  }

  /* --- CTA --- */
  .cta-banner h3 {
    font-size: 18px !important;
  }
  .cta-phone {
    font-size: 20px !important;
  }

  /* --- REVIEWS Owl --- */
  /* override owl to show 1 card on mobile */
  .reviews-slider .owl-item {
    width: 100% !important;
  }

  /* --- BLOGS Owl --- */

  /* --- FOOTER --- */
  .foot-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 30px 16px !important;
  }
  .foot-bottom {
    font-size: 12px !important;
    text-align: center;
    padding: 16px !important;
  }

  /* --- General spacing --- */
  .sec,
  .flight-sec,
  .fare-sec,
  .why-sec,
  .routes-sec,
  .reviews-sec,
  .offers-sec,
  .blogs-sec {
    padding: 40px 0 !important;
  }

  .container {
    padding: 0 16px !important;
  }
}

/* ================================================================
   OVERLAY CLOSE AREA  (injected via JS)
   ================================================================ */
body.menu-open {
  overflow: hidden;
}

/* ================================================================
   OWL CAROUSEL RESPONSIVE OVERRIDES
   ================================================================ */
@media (max-width: 600px) {
  .reviews-slider.owl-carousel {
    padding: 0 16px;
  }
  .offers-slider.owl-carousel {
    padding: 0 16px;
  }
}

/* ================================================================
   HERO GLOBE / DECORATIONS — hide on small screens
   ================================================================ */
@media (max-width: 768px) {
  .hero-globe {
    opacity: 0.15 !important;
  }
  .hero-arc-1,
  .hero-arc-2 {
    display: none;
  }
  .arc-plane {
    display: none;
  }
}

/* ================================================================
   SMOOTH TRANSITIONS
   ================================================================ */
.nav-links {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   PASTE THIS AT THE VERY BOTTOM OF style.css
   (replaces/overrides the old @media 992px nav block)
   ============================================================ */

/* ── Remove old conflicting mobile nav rules ── */
@media (max-width: 1100px) {
  /* Override old "display:none" on nav-links — 
     responsive-fix.css uses transform instead */
  .nav-links {
    display: flex !important; /* keep flex for transform to work */
    transform: translateX(110%); /* hidden off-screen by default */
  }

  .nav-links.active {
    transform: translateX(0) !important;
  }

  /* Show hamburger */
  .menu-toggle {
    display: flex !important;
  }

  /* Hide support */
  .nav-sup {
    display: none !important;
  }
}

/* ── Fix why-inner on mobile (it had gap:100px on all sizes) ── */
@media (max-width: 1024px) {
  .why-inner {
    gap: 36px !important;
    flex-direction: column !important;
  }
  .why-sub {
    width: 100% !important;
  }
}

/* ── Fix reviews-grid positioning on mobile ── */
@media (max-width: 1024px) {
  .reviews-grid {
    padding-left: 0 !important;
    position: static !important;
    margin-top: 24px !important;
  }
  .score-card {
    position: static !important;
    width: 100% !important;
  }
}

/* ============================================================
   PASTE THIS AT VERY BOTTOM OF style.css
   Fixes the old display:none nav rule that breaks drawer animation
   ============================================================ */

/* ── Override old 992px nav rule ── */
@media (max-width: 1100px) {
  /* Keep nav-links as flex always (transform handles show/hide) */
  .nav-links {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    bottom: 0;
    width: 260px;
    height: 100vh;
    background: #fff;
    flex-direction: column;
    padding: 80px 28px 30px;
    margin: 0;
    gap: 0;
    list-style: none;
    z-index: 1000;
    box-shadow: -4px 0 28px rgba(0, 0, 0, 0.15);
    transform: translateX(110%);
    transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
  }
  .nav-links.active {
    transform: translateX(0);
  }

  /* Remove old "position:absolute; top:70px" styling */
  nav {
    position: relative !important;
  }
}

/* ── Fix offer-card white space — overflow from negative margins ── */
.offers-sec {
  overflow: hidden;
}
.owl-carousel .offer-card {
  overflow: visible;
}

/* ── Fix blogs owl-nav arrows position ── */
@media (max-width: 768px) {
  .blogs-sec .owl-nav {
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    gap: 14px !important;
    margin-top: 16px !important;
    width: 100% !important;
  }

  .blogs-sec .owl-nav button {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }
}

/* ── Footer — center links on mobile ── */
@media (max-width: 600px) {
  .fcol {
    text-align: center;
  }
  .fcol h4 {
    text-align: center;
  }
  .fcol ul li {
    text-align: center;
  }
  .faddr {
    justify-content: center;
  }
  .fline {
    padding-left: 0;
    justify-content: center;
  }
  .social-row {
    padding-left: 0;
    justify-content: center;
  }
}

/* ── Footer alignment fix ── */
.foot-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    align-items: start;
}

.fcol {
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* desktop/tablet: left align */
    text-align: left;
}

.fcol h4 {
    text-align: left;
    width: 100%;
}

.fcol ul {
    padding-left: 0;
    list-style: none;
    width: 100%;
    text-align: left;
}

.fcol ul li {
    text-align: left;
}

/* Get In Touch column */
.fcol .faddr,
.fcol .fline,
.fcol .social-row {
    text-align: left;
    justify-content: flex-start;
}

/* ── Mobile: center sab kuch ── */
@media (max-width: 768px) {
    .foot-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .fcol {
        align-items: center;
        text-align: center;
    }

    .fcol h4 {
        text-align: center;
    }

    .fcol ul {
        text-align: center;
    }

    .fcol ul li {
        text-align: center;
    }

    .fcol .faddr {
        justify-content: center;
        text-align: center;
    }

    .fcol .faddr p {
        text-align: center;
    }

    .fcol .fline {
        justify-content: center;
    }

    .fcol .social-row {
        justify-content: center;
    }
}

/* ── Tablet ── */
@media (min-width: 769px) and (max-width: 1024px) {
    .foot-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    .fcol {
        align-items: flex-start;
        text-align: left;
    }
}

/* ── Get In Touch: phone, email, social — left aligned ── */
.fline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    justify-content: flex-start;
}

.ficon {
    width: 32px;
    height: 32px;
    background: #F26545;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.social-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 6px;
}

.faddr {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.faddr .fflag {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.faddr p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.soc {
    width: 36px;
    height: 36px;
    border: 1.5px solid #F26545;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Get In Touch: force left align like other footer columns ── */
.fcol:last-child .fline {
    justify-content: flex-start !important;
    text-align: left;
}

.fcol:last-child .social-row {
    justify-content: flex-start !important;
}

.fcol:last-child .fline a {
    text-align: left;
}

footer .fcol:last-child .fline {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px;
    margin-bottom: 10px;
}

footer .fcol:last-child .social-row {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.consent-text {
    font-size: 14px;
    color: #F26545;
    text-align: center;
    margin-top: 8px;
    margin-bottom: 0;
    line-height: 1.4;
    font-weight: 600;
    width: 100%;
    display: block;
}

.submit-btn {
    width: 100%;      
    text-align: center;
}

@media (max-width: 600px) {
    .consent-text {
        font-size: 12px;
        margin-top: 6px;
    }
    
    .submit-btn {
        font-size: 14px !important;
        padding: 14px !important;
        width: 100% !important;
    }
}

.hero-bg-img {
    position: absolute;
    inset: 0;           /* top:0, left:0, right:0, bottom:0 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.15;      /* halka dikh sake orange pe */
    pointer-events: none;
    z-index: 0;
}

#wrap-dep, #wrap-ret {
    cursor: pointer;
}
#wrap-dep input, #wrap-ret input {
    cursor: pointer;
}

.city-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    z-index: 9999;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.city-suggestions div {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    color: #333;
}
.city-suggestions div:hover {
    background: #f5f5f5;
    color: #F26545;
}

#from-list, #to-list {
    display: none;
}

/* ── Site Disclaimer ── */
.site_disclamer {
    background: rgba(0, 0, 0, 0.2);
    padding: 20px 0;
    margin-top: 20px;
}

.site_disclamer p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 16px;
}

.site_more_contact {
    margin: 16px 0;
}

.other_contact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.country_flag img {
    width: 32px;
    height: 22px;
    object-fit: cover;
    border-radius: 3px;
}

.other_contact .contact p {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}

.other_contact:hover .contact p {
    color: #F26545;
}

/* ── WhatsApp Button ── */
.met_whatsapp {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
}

.met_whatsapp a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #25D366;
    border-radius: 50%;
    color: #fff !important;
    font-size: 28px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: transform 0.2s, box-shadow 0.2s;
}

.met_whatsapp a:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

/* ── Site Disclaimer — footer ke saath merge ── */
.site_disclamer {
    background: #f5f5f5;  /* same as footer */
    border-top: 1px solid #ddd;
    padding: 24px 0;
}

.site_disclamer .container > p {
    color: #666;
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: left;
    border: none;
    padding: 0;
}

.site_more_contact {
    background: transparent;
    padding: 0;
    margin: 16px 0;
}

.other_contact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border: none;
    background: transparent;
}

.country_flag img {
    width: 28px;
    height: 19px;
    border-radius: 2px;
    object-fit: cover;
}

.other_contact .contact p {
    color: #444 !important;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}

.other_contact:hover .contact p {
    color: #F26545 !important;
}

/* ── Disclaimer box removal ── */

.site_disclamer {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-top: 3px solid #F26545 !important;
    padding: 24px 0 !important;
    margin-top: 20px !important;
}

.site_disclamer .container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}