/* ============ RESET / GLOBALS ============ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --navy: #0E4D70;
  --gold: #EDB81A;
  --black: #000;
  --white: #fff;
  --text: #333;
  --sys: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: var(--text);
  background-color: #fff;
  background-image: url('img/bg-islamic-2-2.png');
  background-size: contain;
  background-repeat: repeat;
  background-position: 50% 50%;
  overflow-x: hidden;
}
/* Justify website content */
p{
    text-align: justify;
    text-justify: inter-word;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select { font-family: inherit; }

.container { max-width: 1300px; margin: 0 auto; }
@media (max-width: 1360px) { .container { padding-left: 30px; padding-right: 30px; } }
@media (max-width: 767px)  { .container { padding-left: 20px; padding-right: 20px; } }

/* ============ TYPOGRAPHY ============ */
.sec-title {
  font-family: 'Poppins', sans-serif;
  font-size: 64px;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: -4px;
  text-transform: capitalize;
  color: var(--black);
}
.sec-title .accent {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -4px;
  line-height: 1em;
  color: var(--gold);
}
@media (max-width: 1024px) { .sec-title { font-size: 44.8px; letter-spacing: -1px; } .sec-title .accent { letter-spacing: -1px; } }
@media (max-width: 767px)  { .sec-title { font-size: 32px; letter-spacing: -1px; } }

/* eyebrow label */
.eyebrow {
  display: flex; align-items: center;
  font-size: 17.6px; line-height: 26.4px;
  text-transform: capitalize; color: var(--black);
}
.eyebrow svg { width: 24px; height: 24px; flex: 0 0 24px; margin-right: 6px; fill: var(--gold); }
.eyebrow.center { justify-content: center; }
.eyebrow.light { color: #fff; }

/* premium button */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 17px 30px; border-radius: 20px;
  font-family: var(--sys);
  font-size: 16px; line-height: 21px; text-transform: capitalize;
  transition: all .3s ease-in-out;
}
.btn svg { width: 16px; height: 16px; margin-left: 13px; transition: transform .3s ease-in-out; }
.btn:hover svg { transform: translateX(4px); }
.btn-green { background: var(--navy); color: #fff; }
/* Every button — navy or white — flips to the brand gold on hover/press,
   matching the yellow CTA behaviour site-wide. */
.btn-green:hover, .btn-green:active { background: var(--gold); color: var(--black); }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover, .btn-white:active { background: var(--gold); color: var(--black); }
.btn-white.btn-dark-text { color: var(--black); }

/* scroll entrance animation — animate.css fadeInUp/Left/Right (matches reference) */
@keyframes fadeInUp   { from { opacity: 0; transform: translate3d(0, 60px, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-60px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight{ from { opacity: 0; transform: translate3d(60px, 0, 0); } to { opacity: 1; transform: none; } }
.anim { opacity: 0; }
.anim.in { opacity: 1; animation: fadeInUp 1.25s ease both; }
.anim-left.in  { animation-name: fadeInLeft; }
.anim-right.in { animation-name: fadeInRight; }

/* directional entrances on paired columns (reference uses fadeInLeft/Right here) */
.about-left.anim.in   { animation-name: fadeInLeft; }
.about-right.anim.in  { animation-name: fadeInRight; }

/* staggered reveal for grids/rows (reference staggers siblings ~150ms) */
.steps-grid .anim.in:nth-child(2), .pkg-grid .anim.in:nth-child(2),
.why-grid .anim.in:nth-child(2), .team-grid .anim.in:nth-child(2),
.blog-grid .anim.in:nth-child(2), .pricing-grid .anim.in:nth-child(2),
.offers-grid .anim.in:nth-child(2) { animation-delay: .15s; }
.steps-grid .anim.in:nth-child(3), .pkg-grid .anim.in:nth-child(3),
.why-grid .anim.in:nth-child(3), .team-grid .anim.in:nth-child(3),
.blog-grid .anim.in:nth-child(3), .pricing-grid .anim.in:nth-child(3) { animation-delay: .3s; }
.steps-grid .anim.in:nth-child(4), .why-grid .anim.in:nth-child(4),
.team-grid .anim.in:nth-child(4) { animation-delay: .45s; }
.team-grid .anim.in:nth-child(n+5) { animation-delay: .55s; }

@media (prefers-reduced-motion: reduce) {
  .anim, .anim.in { opacity: 1 !important; animation: none !important; }
}

/* Subtle Islamic geometric texture on dark-green surfaces (matches reference) */
.pricing, .footer-box, .svc-box, .testi-card, .offer-card,
.detail-journey, .why-card.highlight, .faq-item.open .faq-head, .faq-item.open .faq-body {
  position: relative;
}
.pricing::before, .footer-box::before, .svc-box::before, .testi-card::before, .offer-card::before,
.detail-journey::before, .why-card.highlight::before,
.faq-item.open .faq-head::before, .faq-item.open .faq-body::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background: url('img/bg-islamic-1.png') center / cover no-repeat;
  opacity: .07;
}
/* keep content above the texture */
.pricing > .container, .footer-box > .container,
.svc-box > *, .testi-card > *, .offer-card > *,
.detail-journey > *, .why-card.highlight > *,
.faq-item.open .faq-head > *, .faq-item.open .faq-body > * {
  position: relative; z-index: 1;
}

/* ============ HEADER ============ */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 100;
}
.site-header .container {
  padding-top: 47px;
  display: flex; align-items: center; justify-content: space-between;
}
.site-header .logo img { width: auto; height: 76px; }
@media (max-width: 767px) { .site-header .logo img { height: 56px; } }
.main-nav ul.menu { display: flex; }
.main-nav li { position: relative; }
.main-nav a.menu-link {
  display: flex; align-items: center;
  padding: 15px 20px;
  font-size: 16px; line-height: 16px; color: #fff;
  transition: opacity .3s ease;
}
.main-nav a.menu-link:hover { opacity: .75; }
.main-nav a.menu-link.active { color: var(--gold); }
.main-nav .sub-menu a.active { color: var(--navy); font-weight: 500; }
.main-nav .arrow { margin-left: 8px; width: 10px; height: 10px; }
.main-nav .arrow svg { display: block; width: 10px; height: 10px; fill: #fff; }
.main-nav .sub-menu {
  position: absolute; top: 100%; left: 0;
  min-width: 220px; background: #fff; border-radius: 20px;
  visibility: hidden; opacity: 0; transition: 300ms ease-out;
  overflow: hidden;
}
.main-nav li:hover > .sub-menu { visibility: visible; opacity: 1; }
.main-nav .sub-menu a {
  display: block; padding: 15px 20px 15px 40px;
  font-size: 16px; line-height: 16px; color: #000;
}
.main-nav .sub-menu a:hover { background: #f3f3f3; }
.nav-toggle { display: none; }

@media (max-width: 1024px) {
  .site-header .container { padding-top: 24px; padding-bottom: 16px; }
  .nav-toggle { display: block; }
  .nav-toggle svg { width: 28px; height: 28px; fill: #fff; }
  .main-nav {
    display: none;
    position: absolute; left: 10px; right: 10px; top: 100%;
    background: #fff; border-radius: 0 0 12px 12px; padding: 10px 0 14px;
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
  }
  .main-nav.open { display: block; }
  .main-nav ul.menu { flex-direction: column; }
  .main-nav a.menu-link { color: #000; padding: 14px 20px; justify-content: space-between; }
  .main-nav .arrow svg { fill: #000; }
  .main-nav .sub-menu {
    position: static; visibility: visible; opacity: 1; border-radius: 0;
    display: none; background: #fafafa;
  }
  .main-nav li.sub-open > .sub-menu { display: block; }
}

/* ============ HERO ============ */
.hero { padding: 10px; }
/* No overflow clipping here: the form's dropdowns sit near the bottom edge and
   have to escape the box. The slider clips itself to the same radius instead,
   which is all the rounded corners ever needed. */
.hero-box {
    position: relative;
    background-color: var(--navy);
    border-radius: 20px;
}

.hero-slider {
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
    border-radius:20px;
}

.hero-slide {
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity 1s ease;
}

.hero-slide.active {
    opacity:1;
}

.hero-slider:after {
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.6);
}

.hero-inner {
    position:relative;
    z-index:2;
}
.hero-inner {
  padding-top: 160px; padding-bottom: 50px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.hero-left {
  width: 723px; max-width: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
}
.hero-left .eyebrow {
  color: #fff;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}
.hero-left .eyebrow svg {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  margin-right: 0;
}
.hero-title {
  margin-top: 20px;
  font-size: 96px; font-weight: 400; line-height: 1em; letter-spacing: -4px;
  text-transform: capitalize; color: #fff;
}
.hero-title .accent {
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500;
  line-height: 1em;
  color: var(--gold);
}
.hero-actions { display: flex; align-items: center; gap: 20px; margin-top: 60px; }
.play-btn {
  position: relative;
  width: 55px; height: 55px; border-radius: 50%;
  background: var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .4s ease;
}
/* jkit-ripple: two staggered expanding rings (matches reference) */
.play-btn::before, .play-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  animation: jkit-ripple-gold 3s infinite ease;
}
.play-btn::after { animation-delay: 1.5s; }
.play-btn:hover { transform: scale(1.08); }
.play-btn svg { position: relative; z-index: 1; width: 18px; height: 21px; fill: var(--black); margin-left: 3px; }
@keyframes jkit-ripple {
  0%   { box-shadow: 0 0 0 0 rgba(14,77,112,.55); opacity: 1; }
  70%  { box-shadow: 0 0 0 16px rgba(14,77,112,0); opacity: 0; }
  100% { box-shadow: 0 0 0 0 rgba(14,77,112,0); opacity: 0; }
}
/* gold ripple for the gold testimonial play button */
.testi-video .play-btn::before, .testi-video .play-btn::after { animation-name: jkit-ripple-gold; }
@keyframes jkit-ripple-gold {
  0%   { box-shadow: 0 0 0 0 rgba(237,184,26,.6); opacity: 1; }
  70%  { box-shadow: 0 0 0 16px rgba(237,184,26,0); opacity: 0; }
  100% { box-shadow: 0 0 0 0 rgba(237,184,26,0); opacity: 0; }
}

.hero-right {
  width: 557px; max-width: 100%; flex-shrink: 0;
  position: relative;
  z-index: 4;
  display: flex; flex-direction: column; justify-content: space-between;
}
@media (min-width: 1025px) { .hero-right { min-height: 420px; } }
.hero-form-card {
  position: relative;
  z-index: 6;
  background: rgba(0,0,0,.1);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px;
  padding: 15px;
  min-height: 376px;
}
.hero-tab-nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  column-gap: 10px;
  row-gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hero-tab-nav::-webkit-scrollbar { display: none; }
.hero-tab-btn {
  flex: 0 0 auto;
  padding: 10px 18px; border-radius: 100px;
  font-size: 15px; line-height: 24px; text-transform: capitalize;
  white-space: nowrap;
  background: #fff; color: var(--navy);
  transition: background-color .3s ease, color .3s ease;
}
.hero-tab-btn.active { background: var(--gold); color: var(--black); }
.hero-tab-panel { width: 100%; padding-top: 16px; display: none; }
.hero-tab-panel.active { display: block; }
/* The three panels have different numbers of rows, so switching pills would
   resize the card. Stack them all in one grid cell and keep the inactive ones
   laid out but hidden, so the card always sizes to the tallest panel.
   Desktop only — on mobile the panels stack full-width and mobile-design.js
   relocates the forms, so equal height there would just add dead space. */
@media (min-width: 1025px) {
  .hero-tabs { display: grid; grid-template-columns: 100%; }
  .hero-tab-nav { grid-area: 1 / 1; }
  .hero-tab-panel,
  .hero-tab-panel.active { grid-area: 2 / 1; display: block; }
  .hero-tab-panel:not(.active) { visibility: hidden; pointer-events: none; }
}
.hf-row { display: flex; gap: 20px; margin-bottom: 20px; }
form .hf-row:last-of-type { margin-bottom: 0; }
.hf-field {
  flex: 1; display: flex; align-items: center; position: relative;
  background: rgba(0,0,0,.6); border-radius: 15px; padding: 15px;
}
.hf-field svg { width: 21px; height: 21px; flex: 0 0 21px; stroke: #fff; fill: none; stroke-width: 1.5; margin-right: 13px; }
.hf-field input, .hf-field select {
  width: 100%; height: 26px; background: transparent; border: none; outline: none;
  font-family: var(--sys);
  font-size: 16px; line-height: 21px; color: #fff;
  padding-bottom: 5px;
  -webkit-appearance: none; appearance: none;
}
.hf-field input::placeholder { color: #fff; opacity: 1; }
.hf-field input[readonly] { cursor: pointer; }
.hf-field select { color: #fff; cursor: pointer; }
.hf-field.hf-select { cursor: pointer; }
.hf-field.is-disabled {
  opacity: .66;
}
.hf-field select:disabled {
  cursor: not-allowed;
}
.hf-field select option { color: #0E4D70; background: #fff; }
/* extra right padding so the chevron never overlaps the option text */
.hf-select select { padding-right: 26px; }
/* Date fields: keep the white hero-form look and let a tap anywhere open the
   calendar. The native indicator overlays the whole field (invisible) so the
   designed SVG icon stays the only visible icon. */
.hf-field input[type="date"], .cf-field input[type="date"] { color: #fff; cursor: pointer; }
.hf-field input[type="date"]::-webkit-datetime-edit,
.cf-field input[type="date"]::-webkit-datetime-edit { color: #fff; }
.hf-field input[type="date"]::-webkit-calendar-picker-indicator,
.cf-field input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; opacity: 0; cursor: pointer;
}
.hf-field input[type="date"]::-webkit-inner-spin-button { display: none; }
.hf-select { position: relative; }
.hf-select::after {
  content: ""; position: absolute; right: 18px; top: 50%; margin-top: -3px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid #fff; pointer-events: none;
}
.hf-submit {
  width: 100%; margin-top: 10px;
  background: #fff; color: var(--navy); border-radius: 15px;
  padding: 16px 20px;
  font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 500; line-height: 20px;
  text-transform: capitalize;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .3s ease, color .3s ease;
}
.hf-submit:hover { background: var(--gold); color: var(--black); }
.hf-submit svg { width: 15px; height: 15px; margin-left: 9px; }
.hf-passenger-field { cursor: pointer; }
.hf-passenger-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 120;
  display: none;
  width: min(320px, calc(100vw - 42px));
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(14,77,112,.16);
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(0,0,0,.22);
  color: var(--navy);
  cursor: default;
}
.hf-passenger-menu.is-open { display: block; }
.hf-passenger-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 2px 10px;
  margin: 0 0 2px;
  border-bottom: 1px solid rgba(14,77,112,.14);
  color: var(--navy);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}
.hf-passenger-head svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  stroke: var(--gold);
  fill: none;
}
.hf-passenger-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 34px 34px 34px;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  border-bottom: 1px solid rgba(14,77,112,.12);
}
.hf-passenger-row:last-child { border-bottom: 0; }
.hf-passenger-label strong {
  display: block;
  color: var(--navy);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.15;
}
.hf-passenger-label span {
  display: block;
  margin-top: 3px;
  color: rgba(14,77,112,.68);
  font-size: 12px;
  font-style: italic;
  line-height: 1.15;
}
.hf-passenger-step {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(14,77,112,.07);
  color: var(--navy);
  font-size: 19px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hf-passenger-step:disabled {
  opacity: .38;
  cursor: not-allowed;
}
.hf-passenger-plus {
  background: var(--gold);
  color: var(--black);
}
.hf-passenger-count {
  color: var(--navy);
  font-size: 14px;
  text-align: center;
}
.hf-passenger-done {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  margin: 10px 0 0;
  border-radius: 8px;
  border: 1px solid var(--navy);
  background-color: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(14,77,112,.22);
}
.hf-passenger-done:hover {
  border-color: var(--gold);
  background-color: var(--gold);
  color: var(--black);
}
/* ── Compact hero forms ───────────────────────────────────────────
   The Custom Package and Group Umrah pills share one set of metrics. They sit
   in the same card and swap on a pill, so any difference in field height, text
   size or icon size reads as the form resizing when you switch tabs — which it
   was doing (10 vs 11px gaps, 12.25 vs 12.75px text, 17 vs 18px icons).
   Only the column tracks differ below, because the two forms ask for a
   different number of things. */
.hero-custom-form .hf-row,
.hero-group-umrah-form .hf-row {
  display: grid;
  gap: 11px;
  margin-bottom: 11px;
}
/* Row width follows how many fields are actually visible — any of them can
   be switched off in Quotation Setup → Form Fields, and the row has to
   close up rather than leave a gap where the field used to be. */
.hero-custom-form .hf-row-1 { grid-template-columns: minmax(0, 1fr); }
/* The hotel rows share the 3-field rows' track, with the hotel select spanning
   two columns so it ends where Preferred Travel Date does above it. */
.hero-custom-form .hf-row-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.05fr); }
.hero-custom-form .hf-row-2 .hf-field:first-child { grid-column: span 2; }
.hero-custom-form .hf-row-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.05fr); }
.hero-custom-form .hf-field,
.hero-group-umrah-form .hf-field {
  min-width: 0;
  border-radius: 8px;
  padding: 11px 12px;
}
.hero-custom-form .hf-field svg,
.hero-group-umrah-form .hf-field svg {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  margin-right: 8px;
}
.hero-custom-form .hf-field input,
.hero-custom-form .hf-field select,
.hero-group-umrah-form .hf-field input,
.hero-group-umrah-form .hf-field select {
  height: 23px;
  min-width: 0;
  font-size: 12.75px;
  line-height: 19px;
  padding-bottom: 3px;
  text-overflow: ellipsis;
}
.hero-custom-form .hf-select select,
.hero-group-umrah-form .hf-select select { padding-right: 18px; }
.hero-custom-form .hf-select::after,
.hero-group-umrah-form .hf-select::after { right: 12px; }
.hero-custom-form .hf-submit,
.hero-group-umrah-form .hf-submit {
  width: 100%;
  margin-top: 11px;
  min-height: 52px;
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
}
/* Group Umrah asks for fewer things than Custom, so only its tracks differ.
   Everything else comes from the shared block above. */
.hero-group-umrah-form .hf-row-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.05fr); }
.hero-group-umrah-form .hf-row-package { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.05fr); }
.hero-group-umrah-form .hf-row-package .hf-field:first-child { grid-column: span 2; }
/* One row shorter than Custom. The card already sizes to the tallest panel, so
   rather than leaving this form floating at the top of the space, it fills the
   same height and lets the gap fall between the rows. */
@media (min-width: 1025px) {
  .hero-group-umrah-form {
    min-height: 284px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.hero-bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; margin-top: 44px; }
.hero-bottom p { width: 277px; max-width: 55%; font-size: 16px; line-height: 24px; color: #fff; }
.hero-rating { width: 210px; text-align: left; }
.hero-rating .from { display: flex; align-items: center; gap: 9px; font-size: 16px; line-height: 24px; color: #fff; }
.hero-rating .from svg { width: 24px; height: 24px; fill: var(--gold); flex: 0 0 auto; }
.video-modal[hidden] { display: none !important; }
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.78);
}
.video-dialog {
  position: relative;
  width: min(920px, 100%);
}
.video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(0,0,0,.35);
}
.video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-close {
  position: absolute;
  right: -12px;
  top: -12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--black);
  font-size: 28px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(0,0,0,.3);
}

@media (max-width: 1024px) {
  .hero-inner { padding-top: 160px; padding-bottom: 90px; }
  .hero-title { font-size: 60.8px; }
  .hero-left { width: 50%; }
  .hero-right { width: 45%; }
  .hf-row { flex-direction: column; gap: 20px; }
  .hero-custom-form .hf-row,
  .hero-custom-form .hf-row-3,
  .hero-group-umrah-form .hf-row,
  .hero-group-umrah-form .hf-row-3,
  .hero-group-umrah-form .hf-row-package { grid-template-columns: 1fr; }
  .hero-group-umrah-form .hf-row-package .hf-field:first-child { grid-column: auto; }
  .hero-custom-form .hf-row-2 .hf-field:first-child { grid-column: auto; }
  .hero-custom-form .hf-submit,
  .hero-group-umrah-form .hf-submit { width: 100%; }
}
@media (max-width: 767px) {
  .hero-inner { flex-direction: column; padding-top: 130px; padding-bottom: 60px; }
  .hero-left, .hero-right { width: 100%; }
  .hero-title { font-size: 33.6px; line-height: 1.1em; letter-spacing: -1px; margin-top: 25px; }
  .hero-actions { margin-top: 35px; }
  /* swipeable chip row above the form (matches the services strip) */
  .hero-tab-nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    column-gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .hero-tab-nav::-webkit-scrollbar { display: none; }
  .hero-tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
    padding-inline: 20px;
  }
  .hero-bottom { flex-direction: column; align-items: center; gap: 30px; margin-top: 40px; text-align: center; }
  .hero-bottom p { max-width: 100%; text-align: center; }
  .hero-rating { text-align: center; }
  .hero-rating .score { justify-content: center; }
}

/* ============ S2 PARTNERS ============ */
.partners { padding: 75px 0 70px; }
.partners .container { display: flex; align-items: center; gap: 60px; }
.partners-title {
  flex: 0 0 250px;
  font-size: 22.4px; font-weight: 500; line-height: 33.6px;
  text-transform: capitalize; color: var(--black);
}
.partners-title .accent {
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700;
  line-height: 1em;
  color: var(--navy);
}
.marquee { flex: 1; min-width: 0; max-width: 100%; width: 100%; overflow: hidden; }
.marquee-track { display: flex; align-items: center; width: max-content; animation: marquee 25s linear infinite; }
.marquee-track img { width: 141px; margin: 0 35px; filter: grayscale(100%); transition: filter 0.3s ease; }
.marquee-track img:hover { filter: grayscale(0%); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 767px) {
  .partners .container { flex-direction: column; gap: 35px; text-align: center; }
  .partners-title { flex: none; }
}

/* ============ S3 ABOUT ============ */
.about { padding: 50px 0 70px; }
.about--noheading { padding-top: 30px; }
.about .eyebrow { margin-bottom: 28px; }
.about .sec-title { text-align: center; max-width: 600px; margin: 0 auto 90px; }
.about-grid { display: flex; justify-content: space-between; gap: 50px; }
.about-left {
  width: 400px; max-width: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
}
.about-left h5 { font-size: 19.2px; font-weight: 400; line-height: 28.8px; color: var(--black); text-transform: capitalize; }
.about-stat .stat-row { display: flex; align-items: center; gap: 10px; }
.about-stat .stat-row svg { width: 49px; height: 49px; fill: var(--gold); }
.about-stat .stat-row .num { font-size: 48px; font-weight: 400; line-height: 1em; color: var(--black); }
.about-stat .stat-label { margin-top: 24px; font-size: 17.6px; line-height: 1.3em; text-transform: capitalize; color: var(--black); }
.about-stat .stat-label .accent { font-weight: 500; color: var(--navy); }
.about-img {
  width: 444px; height: 498px; flex-shrink: 0;
  border-radius: 20px;
  background-image: url('img/pilgrimage-to-mecca-saudi-arabia-the-holiest-cit-2026-01-09-09-37-24-utc-1.jpg');
  background-size: cover; background-position: 50% 50%;
}
.about-right { width: 356px; flex-shrink: 0; }
.about-card {
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 20px; padding: 25px;
  height: 336px;
  display: flex; flex-direction: column;
}
.about-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.about-pill {
  background: #b6b6b6; border-radius: 100px; padding: 8px 16px;
  font-size: 14.4px; line-height: 21.6px; color: var(--black); text-transform: capitalize;
}
.about-card-top svg { width: 45px; height: 45px; fill: var(--black); }
.about-card h4 {
  margin-top: auto;
  font-family: 'Playfair Display', serif; font-size: 22.4px; font-weight: 600; line-height: 1.4em;
  text-transform: capitalize; color: var(--black);
}
.about-card p { margin-top: 15px; font-family: var(--sys); font-size: 16px; line-height: 24px; color: var(--text); }
.about-right .btn { margin-top: 19px; }
@media (max-width: 1024px) {
  .about-grid { flex-direction: column; align-items: center; }
  .about-left { width: 100%; gap: 40px; }
  .about-img { width: 100%; max-width: 444px; }
  .about-right { width: 100%; max-width: 444px; }
}

/* ============ S4 SERVICES ============ */
.services { padding: 70px 0; }
.services-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.services-head .eyebrow { margin-bottom: 28px; }
.services-head .sec-title { max-width: 704px; }
.services-head-right { width: 480px; flex-shrink: 0; padding-top: 65px; }
.services-head-right p { font-family: var(--sys); font-size: 16px; line-height: 24px; color: var(--text); }
.services-head-right .btn { margin-top: 34px; }
.services-tabs { margin-top: 70px; }
.svc-tab-nav { display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 10px; }
.svc-tab-btn {
  padding: 15px 35px; border-radius: 20px;
  font-size: 16px; line-height: 24px; text-transform: capitalize;
  background: #fff; color: var(--black);
  box-shadow: 0 0 10px 0 rgba(0,0,0,.08);
  transition: background-color .3s ease, color .3s ease;
}
.svc-tab-btn.active { background: var(--navy); color: #fff; box-shadow: none; }
.svc-tab-panel { width: 100%; padding-top: 25px; display: none; }
.svc-tab-panel.active { display: block; }
.svc-box {
  background: var(--navy); border-radius: 30px; padding: 0 50px;
  min-height: 410px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.svc-box-left { max-width: 665px; padding: 50px 0; }
.svc-icon {
  width: 70px; height: 70px; border-radius: 50%; background: var(--gold);
  display: flex; align-items: center; justify-content: center;
}
.svc-icon svg { width: 35px; height: 35px; fill: var(--black); }
.svc-box h3 {
  margin-top: 26px;
  font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 600; line-height: 1em;
  text-transform: capitalize; color: #fff;
}
.svc-box p { margin-top: 20px; max-width: 612px; font-size: 16px; line-height: 24px; color: #fff; }
.svc-box .btn { margin-top: 34px; }
.svc-box img { width: 465px; height: 306px; object-fit: cover; border-radius: 25px; flex-shrink: 0; }
@media (max-width: 1024px) {
  .services-head { flex-direction: column; }
  .services-head-right { width: 100%; padding-top: 0; }
  .svc-box { flex-direction: column; align-items: flex-start; padding: 0 30px 40px; }
  .svc-box img { width: 100%; height: auto; }
}
@media (max-width: 767px) {
  /* horizontal swipeable chip strip above a single card */
  .svc-tab-nav {
    flex-wrap: nowrap;
    column-gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;            /* Firefox */
    /* fade the right edge to hint there's more */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    padding-right: 4px;
  }
  .svc-tab-nav::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
  .svc-tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
    padding: 12px 22px;
  }
  .svc-tab-panel { padding-top: 20px; }
}

/* ============ S5 STEPS ============ */
.steps { padding: 70px 0 107px; }
.steps .eyebrow { margin-bottom: 28px; }
.steps .sec-title { text-align: center; max-width: 700px; margin: 0 auto; }
.steps-grid { margin-top: 59px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step { text-align: center; }
.step-shape {
  height: 255px;
  background-image: url('img/step-shape.png');
  background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.step-shape svg { width: 64px; height: 64px; stroke: #fff; fill: none; stroke-width: 1.2; }
.step-shape svg.solid { fill: #fff; stroke: none; width: 84px; height: 84px; }
.step h4 {
  margin: 20px auto 0; max-width: 242px;
  font-family: 'Playfair Display', serif; font-size: 22.4px; font-weight: 600; line-height: 1.4em;
  text-transform: capitalize; color: var(--black);
}
.step p { margin-top: 20px; font-size: 16px; line-height: 24px; color: var(--text); }
@media (max-width: 1024px) { .steps-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; gap: 50px; } }


/* ============ S6 PRICING ============ */
.pricing { background: var(--navy); padding: 100px 0; }
.pricing-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.pricing-head .eyebrow { color: #fff; margin-bottom: 28px; }
.pricing-head .sec-title { max-width: 727px; color: #fff; }
.pricing-head .sec-title .accent { color: var(--gold); }
.pricing-head-right { width: 454px; flex-shrink: 0; padding-top: 65px; }
.pricing-head-right p { font-family: var(--sys); font-size: 16px; line-height: 24px; color: #fff; }
.pricing-head-right .btn { margin-top: 34px; }
.pricing-grid {
  margin-top: 159px;
  display: grid; grid-template-columns: 404fr 431fr 404fr; gap: 30px;
  align-items: start;
}
.price-card { background: #fff; border-radius: 20px; padding: 30px; text-align: center; position: relative; }
/* Center package description */
.price-card p {
    text-align: center !important;
}
.price-card.popular { margin-top: -58px; padding: 20px; }
/* Dynamic counts (1, 2, 4+ cards): responsive auto-fit grid. The classic
   3-card layout above is left untouched to preserve the original identity. */
.pricing-grid.pricing-grid-flex {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: stretch;
  max-width: 1200px; margin-left: auto; margin-right: auto;
}
.pricing-grid.pricing-grid-flex .price-card { display: flex; flex-direction: column; }
.pricing-grid.pricing-grid-flex .price-card .btn { margin-top: auto; }
.pricing-grid.pricing-grid-flex .price-card.popular { margin-top: 0; }
.popular-pill {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  background: var(--gold); border-radius: 100px; padding: 10px 20px;
  font-size: 17.6px; line-height: 21px; text-transform: capitalize; color: var(--black);
  white-space: nowrap;
}
.price-card h3 {
  margin-top: 0;
  font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 600; line-height: 1em;
  text-transform: capitalize; color: var(--black);
}
.price-card.popular h3 { margin-top: 33px; }
.price-card .desc { margin: 20px auto 0; max-width: 289px; font-size: 16px; line-height: 24px; color: var(--text); }
.price-row { width: max-content; max-width: 100%; margin: 35px auto 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; }
.price-row .amount { font-size: 72px; font-weight: 500; line-height: 1em; color: var(--black); white-space: nowrap; }
.price-row .amount .counter { font-weight: 500; }
.price-row .price-meta { display: inline-flex; flex-direction: row; align-items: baseline; justify-content: flex-end; gap: 5px; white-space: nowrap; }
.price-row .price-meta .cur { font-size: 16px; font-weight: 600; line-height: 1.1; color: var(--black); }
.price-row .per { font-size: 16px; font-weight: 600; line-height: 1.1; color: var(--black); text-transform: capitalize; }
.price-divider { margin: 30px 0 25px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.price-divider::after { content: ""; width: 138px; height: 1px; background: rgba(237,184,26,.64); }
.price-divider svg { width: 21px; height: 21px; fill: var(--gold); }
.price-features { text-align: left; }
.price-card.popular .price-features { background: #f4f4f4; border-radius: 20px; padding: 18px; }
.price-features li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.price-features li:last-child { padding-bottom: 0; }
.price-features img { width: 21px; height: 21px; }
.price-features h6 { font-size: 17.6px; font-weight: 400; line-height: 1.4em; text-transform: capitalize; color: var(--black); }
.price-card .btn { margin-top: 47px; width: 100%; }
@media (max-width: 1024px) {
  .pricing-head { flex-direction: column; }
  .pricing-head-right { width: 100%; padding-top: 0; }
  .pricing-grid { gap: 14px; }
  .price-card, .price-card.popular { padding: 18px; }
}
@media (max-width: 900px) {
  /* Three pricing cards no longer fit once the large price numbers reach full
     value below ~833px, so stack to a single centred column at tablet width.
     The dynamic-count grid (.pricing-grid-flex) needs naming here too — its
     auto-fit columns otherwise win on specificity and cram two cards per row. */
  .pricing-grid, .pricing-grid.pricing-grid-flex { grid-template-columns: 1fr; gap: 30px; max-width: 470px; margin-left: auto; margin-right: auto; }
  .price-card.popular { margin-top: 20px; }
}

/* ============ S7 WHY CHOOSE US ============ */
.why { padding: 100px 0 70px; }
.why .eyebrow { margin-bottom: 28px; }
.why .sec-title { text-align: center; max-width: 560px; margin: 0 auto; }
.why .lead { margin: 30px auto 0; max-width: 481px; text-align: center; font-family: var(--sys); font-size: 16px; line-height: 24px; color: var(--text); }
.why-grid { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; align-items: start; }
.why-card {
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 20px; padding: 50px 35px;
  margin-top: 40px;
}
.why-card.highlight { background: var(--navy); border-color: var(--navy); margin-top: 0; }
.why-card .num { font-size: 60.8px; font-weight: 500; line-height: 1em; color: var(--black); white-space: nowrap; }
.why-card.highlight .num { color: #fff; }
.why-card h5 {
  margin-top: 20px;
  font-family: 'Playfair Display', serif; font-size: 19.2px; font-weight: 600; line-height: 1em;
  text-transform: capitalize; color: var(--navy);
}
.why-card.highlight h5 { color: var(--gold); }
@media (max-width: 1024px) { .why-grid { grid-template-columns: repeat(2, 1fr); } .why-card { margin-top: 0; } }
@media (max-width: 600px)  { .why-grid { grid-template-columns: repeat(2, 1fr); column-gap: 14px; row-gap: 28px; } }

/* ============ S8 TESTIMONIALS ============ */
.testimonials { padding: 70px 0; }
.testimonials .container { display: flex; gap: 70px; align-items: flex-start; }
.testi-card {
  width: 472px; flex-shrink: 0;
  background: var(--navy); border-radius: 20px; padding: 20px;
}
.testi-video {
  position: relative; height: 234px; border-radius: 15px;
  background-image: url('img/a-family-in-a-park-2026-03-11-00-59-23-utc-1.jpg');
  background-size: cover; background-position: 50% 50%;
  display: flex; align-items: center; justify-content: center;
}
.testi-video .play-btn { background: var(--gold); }
.testi-video .play-btn svg { fill: var(--black); }
.testi-score { margin-top: 25px; display: flex; align-items: center; justify-content: space-between; }
.testi-score .num { font-size: 40px; font-weight: 500; line-height: 1em; color: #fff; }
.testi-score .stars { display: flex; gap: 2px; }
.testi-score .stars svg { width: 20px; height: 20px; fill: #F8D73E; }
.testi-card > p { margin-top: 20px; font-size: 16px; line-height: 24px; color: #fff; }
.testi-profile { margin-top: 40px; display: flex; align-items: center; }
.testi-profile img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.testi-profile .who { margin-left: 15px; }
.testi-profile .who h5 { font-size: 17.6px; font-weight: 400; line-height: 1em; color: #fff; text-transform: capitalize; }
.testi-profile .who h6 { margin-top: 5px; font-size: 16px; font-weight: 400; line-height: 1.2em; color: rgba(255,255,255,.76); text-transform: capitalize; }
.testi-profile .socials { margin-left: auto; display: flex; gap: 9px; }
.socials a {
  width: 40px; height: 40px; border-radius: 10px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .3s ease;
}
.socials a:hover { background: var(--gold); }
.socials a svg { width: 20px; height: 20px; fill: var(--black); }

.testi-right { flex: 1; min-width: 0; }
.testi-right .eyebrow { margin-bottom: 28px; }
.testi-right .sec-title { max-width: 478px; }
.testi-slider { position: relative; margin-top: 54px; }
.testi-slide { display: none; }
.testi-slide.active { display: block; animation: fadeSlide .6s ease; }
@keyframes fadeSlide { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.testi-slide blockquote { max-width: 738px; padding-right: 40px; font-size: 19.2px; line-height: 28.8px; color: var(--black); }
.testi-slide .stars { margin-top: 43px; display: flex; gap: 4px; }
.testi-slide .stars svg { width: 17px; height: 15px; fill: #FFC402; }
.testi-slide-foot { margin-top: 24px; display: flex; align-items: center; }
.testi-slide-foot img { width: 53px; height: 53px; border-radius: 50%; object-fit: cover; }
.testi-slide-foot .who { margin-left: 16px; }
.testi-slide-foot .who strong { display: block; font-family: var(--sys); font-weight: 600; font-size: 16px; line-height: 23px; color: var(--black); }
.testi-slide-foot .who p { font-size: 14.4px; line-height: 21.6px; color: var(--navy); text-transform: capitalize; }
.testi-slide-foot .quote-mark { margin-left: auto; margin-right: 48px; }
.testi-slide-foot .quote-mark svg { width: 40px; height: 53px; fill: var(--navy); }
.testi-dots { margin-top: 20px; display: flex; gap: 8px; }
.testi-dots button { width: 10px; height: 10px; border-radius: 50%; background: rgba(14,77,112,.25); transition: background-color .3s ease; }
.testi-dots button.active { background: var(--navy); }
@media (max-width: 1024px) {
  .testimonials .container { flex-direction: column; }
  .testi-card { width: 100%; max-width: 472px; }
}

/* ============ S9 FAQ ============ */
.faq { padding: 70px 0 64px; }
.faq .eyebrow { margin-bottom: 28px; }
.faq .sec-title { text-align: center; }
.faq-list { max-width: 1040px; margin: 59px auto 0; }
.faq-item { margin-bottom: 20px; border-radius: 20px; overflow: hidden; }
.faq-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 25px 40px 20px; border-radius: 20px;
  background: #efefef; color: var(--black);
  font-size: 17.6px; font-weight: 500; line-height: 26.4px; text-align: left;
  transition: background-color .3s ease, color .3s ease, border-radius .3s ease;
}
.faq-head .title { padding-right: 10px; }
.faq-head svg { width: 20px; height: 20px; flex: 0 0 20px; fill: var(--navy); }
.faq-head .icon-minus { display: none; }
.faq-item.open .faq-head { background: var(--navy); color: #fff; border-radius: 20px 20px 0 0; }
.faq-item.open .faq-head svg { fill: var(--gold); }
.faq-item.open .faq-head .icon-plus { display: none; }
.faq-item.open .faq-head .icon-minus { display: block; }
.faq-body { max-height: 0; overflow: hidden; background: var(--navy); border-radius: 0 0 20px 20px; transition: max-height .4s ease; }
.faq-body p { padding: 1px 40px 30px; max-width: 1000px; font-family: var(--sys); font-size: 16px; line-height: 24px; color: #fff; }
@media (max-width: 767px) { .faq-head { padding: 20px 24px 16px; } .faq-body p { padding: 1px 24px 24px; } }

/* ============ S10 BLOG ============ */
.blog { padding: 70px 0 70px; }
.blog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.blog-head .eyebrow { margin-bottom: 14px; }
.blog-head .sec-title { max-width: 668px; margin-top: -14px; }
.blog-head-right { width: 577px; flex-shrink: 0; padding-top: 40px; }
.blog-head-right p { font-family: var(--sys); font-size: 16px; line-height: 24px; color: var(--text); }
.blog-head-right .btn { margin-top: 24px; }
.blog-grid { margin-top: 71px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.blog-card {
    border-radius: 20px;   /* Increase or decrease as needed */
    overflow: hidden;
}
.blog-card img { width: 100%; height: 232px; object-fit: cover; }
.blog-card-body { background: #fff; padding: 26px 30px 32px; }
.blog-card h6 a {
  font-size: 23px; font-weight: 400; line-height: 34.5px; color: var(--black);
  transition: color .3s ease;
}
.blog-card h6 a:hover { color: var(--navy); }
.blog-meta { margin-top: 22px; display: flex; align-items: center; gap: 7px; font-size: 13.2px; line-height: 15.6px; color: var(--navy); }
.blog-meta svg { width: 13px; height: 13px; fill: var(--navy); }
.blog-meta .dot { color: var(--gold); font-size: 12px; }
.blog-card-body > p {
  display: -webkit-box;
  margin-top: 16px;
  font-family: var(--sys);
  font-size: 14px;
  line-height: 22px;
  color: #666;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .blog-head { flex-direction: column; }
  .blog-head .sec-title { margin-top: 0; }
  .blog-head-right { width: 100%; padding-top: 0; }
  .blog-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
}

/* ============ MOBILE FIDELITY (matches reference at 390px) ============ */
@media (max-width: 767px) {
  /* hero */
  .hero-inner { padding-bottom: 100px; }
  .hero-title { line-height: 1em; margin-top: 18px; }
  .hero-actions { margin-top: 31px; }
  .hero-bottom { margin-top: 70px; }
  .hf-row { gap: 10px; margin-bottom: 10px; }
  form .hf-row:last-of-type { margin-bottom: 10px; }
  .hero-tab-panel.active { padding-bottom: 192px; }
  /* partners */
  .partners { padding: 55px 0 45px; }
  .partners .container { gap: 45px; }
  /* about */
  .about .sec-title { margin-bottom: 60px; }
  .about-left h5 { font-size: 16px; line-height: 24px; }
  .about-left { gap: 100px; justify-content: flex-start; }
  .about-stat .stat-row svg { width: 40px; height: 40px; }
  .about-stat .stat-row .num { font-size: 40px; }
  .about-grid { gap: 40px; }
  .about-img { height: 259px; }
  .about-card { height: 368px; }
  /* services */
  .svc-tab-nav { column-gap: 8px; }
  .svc-tab-panel { padding-top: 15px; }
  .svc-box { padding: 0 20px 20px; min-height: 0; }
  .svc-box-left { padding: 40px 0 0; }
  .svc-box h3 { font-size: 22.4px; margin-top: 0; }
  .svc-box img { height: 155px; object-fit: cover; }
  /* steps */
  .steps-grid { gap: 40px; }
  .step h4 { font-size: 20.8px; }
  /* pricing */
  .pricing-grid { margin-top: 69px; gap: 70px; }
  .price-card h3 { font-size: 22.4px; }
  .price-card .desc { font-size: 14.4px; line-height: 21.6px; }
  .price-row .amount,
  .price-row .amount .counter { font-size: 54px; font-weight: 500; }
  .price-features h6 { font-size: 16px; }
  .price-card.popular { margin-top: 0; }
  /* why choose us */
  .why .lead { margin-top: 0; }
  .why-grid { margin-top: 54px; }
  .why-card .num { font-size: 40px; }
  /* testimonials: heading + slider first, green card second */
  .testimonials .container { gap: 50px; }
  .testi-card { order: 2; padding: 15px; }
  .testi-video { height: 150px; }
  .testi-score { margin-top: 20px; }
  .testi-score .num { font-size: 32px; }
  .testi-card > p { margin-top: 15px; }
  .testi-profile { margin-top: 20px; flex-wrap: wrap; row-gap: 20px; }
  .testi-slide blockquote { font-size: 16px; line-height: 24px; padding-right: 0; }
  /* faq */
  .faq-item { margin-bottom: 15px; }
  .faq-head { padding: 20px 50px 20px 20px; font-size: 16px; line-height: 24px; }
  .faq-body p { padding: 1px 20px 24px; }
  /* blog */
  .blog-grid { margin-top: 45px; gap: 20px; }
  .blog-card h6 a { font-size: 16px; line-height: 24px; }
  .blog-card-body { padding: 20px; }
}

/* ============ FOOTER ============ */
.site-footer { padding: 0 10px 10px; }
.footer-box { background: var(--navy); border-radius: 20px; padding: 64px 0 32px; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.footer-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.footer-top img { width: auto; height: 64px; position: relative; top: -14px; }
.footer-top h5 { min-height: 64px; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; position: relative; top: -32px; font-size: 16px; font-weight: 400; line-height: 1.35; color: #fff; text-align: right; max-width: none; white-space: nowrap; }
.footer-socials-mobile { display: none; }
.footer-tagline-head,
.footer-tagline-tail,
.footer-tagline-separator { display: inline; white-space: nowrap; }
.footer-cols { margin-top: 48px; display: flex; gap: 20px; }
.footer-col { width: 232px; }
.footer-col h4 { font-size: 20.8px; font-weight: 500; line-height: 29px; color: #fff; text-transform: capitalize; }
.footer-col ul { margin-top: 20px; }
.footer-col li { padding-bottom: 12px; }
.footer-col li:last-child { padding-bottom: 0; }
.footer-col li a, .footer-col li span { font-family: var(--sys); font-size: 16px; line-height: 24px; color: rgba(255,255,255,.68); transition: color .3s ease; }
.footer-col li a:hover { color: #fff; }
.footer-right { margin-left: auto; text-align: right; position: relative; display: flex; flex-direction: column; align-items: flex-end; }
.footer-right .socials { position: absolute; top: -76px; right: 0; justify-content: flex-end; display: flex; gap: 9px; }
.footer-right h4 { margin-top: 0; font-size: 20.8px; font-weight: 500; line-height: 29px; color: #fff; text-transform: capitalize; }
.newsletter { margin-top: 20px; display: flex; gap: 10px; justify-content: flex-end; }
.newsletter input {
  width: 233px; height: 53px;
  background: #fafafa; border: 1px solid #eaeaea; border-radius: 15px;
  padding: 15px 15px 15px 20px; font-family: var(--sys); font-size: 16px; color: #000; outline: none;
}
.newsletter button {
  width: 50px; height: 50px; flex-shrink: 0;
  background: var(--gold); border-radius: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .3s ease;
}
.newsletter button:hover { background: #e6a916; }
.newsletter button svg { width: 15px; height: 15px; }
/* Footer location map — clickable box that opens Google Maps */
.footer-map {
  position: relative; display: block; margin: 0 0 0 auto;
  width: 433px; max-width: none; min-height: 160px; flex: 1 1 auto;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 6px 20px rgba(0,0,0,.20);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.footer-map::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(15,58,90,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  transition: background-color .3s ease;
}
.footer-map:hover { border-color: rgba(240,178,32,.55); box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.footer-map:hover::after { background: rgba(15,58,90,.10); }
.footer-map iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; pointer-events: none; filter: grayscale(.35) contrast(.95) brightness(.97);
}
.footer-map-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end; gap: 6px;
  padding: 12px; font-family: var(--sys); font-size: 14px; font-weight: 600;
  color: #fff; text-decoration: none; text-transform: none;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.05) 45%, transparent 70%);
  opacity: 0; transition: opacity .3s ease;
}
.footer-map:hover .footer-map-overlay { opacity: 1; }
.footer-map-overlay svg { width: 18px; height: 18px; flex-shrink: 0; }
.footer-bottom { margin-top: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.footer-bottom .copy { font-family: var(--sys); font-size: 16px; line-height: 1.2em; color: #fff; }
.footer-bottom ul { display: flex; gap: 12px; }
.footer-bottom ul a { font-family: var(--sys); font-size: 16px; line-height: 24px; color: rgba(255,255,255,.68); text-transform: capitalize; transition: color .3s ease; }
.footer-bottom ul a:hover { color: #fff; }
@media (max-width: 1024px) {
  .footer-cols { flex-wrap: wrap; row-gap: 40px; }
  .footer-right { margin-left: 0; text-align: left; width: 100%; }
  .footer-right .socials { position: static; margin-bottom: 20px; }
  .footer-right .socials, .newsletter { justify-content: flex-start; }
  .footer-map { margin: 0 auto 0 0; }
}
@media (max-width: 767px) {
  .footer-box { padding-top: 100px; }
  .footer-top { flex-direction: column; align-items: center; }
  .footer-top img { width: auto; height: 56px; }
  .footer-top h5 { flex-direction: column; align-items: center; text-align: center; white-space: normal; }
  .footer-socials-mobile { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
  .footer-socials-desktop { display: none !important; }
  .footer-tagline-separator { display: none; }
  .footer-tagline-head,
  .footer-tagline-tail { white-space: normal; }
  .footer-col { width: 100%; }
  .footer-bottom { flex-direction: column; align-items: center; }
  /* Show the map on mobile too: full-width card above the copyright. */
  .footer-map { display: block; width: 100%; margin: 4px 0 0; min-height: 180px; }
}

/* ============================================================
   INNER-PAGE COMPONENTS (added for full multi-page site)
   ============================================================ */

/* ---- Banner hero (inner page header) ---- */
.banner { padding: 10px; }
.banner-box {
  position: relative;
  background-color: var(--navy);
  background-image:
    linear-gradient(rgba(6,26,42,.78), rgba(6,26,42,.78)),
    url('img/prophet-mohammed-mosque-al-masjid-an-nabawi-me-2026-01-09-00-53-50-utc-1.jpg');
  background-size: cover; background-position: 50% 30%;
  border-radius: 20px;
  min-height: 575px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 130px 20px;
}
.banner .banner-box {
    border-radius: 20px;
    overflow: hidden;
}

.banner-box .crescent { display: block; width: 80px; height: 80px; margin: 0 auto 18px; }
.banner-title {
  font-size: 96px; font-weight: 400; line-height: 1em; letter-spacing: -4px;
  text-transform: capitalize; color: #fff;
}
.banner-title .accent {
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500; line-height: 1em;
  color: var(--gold);
}
.breadcrumb { margin-top: 26px; display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 16px; color: #fff; text-transform: capitalize; }
.breadcrumb .sep { color: var(--gold); }
.breadcrumb a:hover { color: var(--gold); }
@media (max-width: 1024px) { .banner-box { min-height: 420px; } .banner-title { font-size: 60.8px; } }
@media (max-width: 767px)  { .banner-box { min-height: 320px; padding: 100px 20px; } .banner-title { font-size: 33.6px; letter-spacing: -1px; } }

/* ---- Team cards ---- */
.team-section { padding: 100px 0 80px; }
.team-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.team-head .eyebrow { margin-bottom: 28px; }
.team-head .sec-title { max-width: 560px; }
.team-head-right { width: 480px; flex-shrink: 0; padding-top: 65px; }
.team-head-right p { font-family: var(--sys); font-size: 16px; line-height: 24px; color: var(--text); }
.team-head-right .btn { margin-top: 34px; }
.team-grid { margin-top: 100px; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 36px; row-gap: 70px; max-width: 1040px; margin-left: auto; margin-right: auto; }
.team-card {
  position: relative; height: 420px; border-radius: 20px; overflow: hidden;
  background: var(--navy);
  display: flex; align-items: flex-end; justify-content: center;
}
/* faint white geometric motif behind the person */
.team-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url('img/bg-islamic-1.png') no-repeat center / cover;
  opacity: .12;
}
.team-card .photo {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: center bottom;
}
.team-card .team-info {
  position: relative; z-index: 2; width: calc(100% - 30px); margin: 0 15px 15px;
  background: transparent; border-radius: 14px;
  padding: 6px 4px; display: flex; align-items: center; justify-content: space-between;
}
.team-card.light .team-info { background: #f3f1e8; padding: 14px 18px; }
.team-card .team-info h5 {
  font-family: 'Playfair Display', serif; font-size: 22.4px; font-weight: 600; line-height: 1.3em;
  text-transform: capitalize; color: #fff;
}
.team-card .team-info h6 { font-size: 17.6px; font-weight: 400; line-height: 1.2em; text-transform: capitalize; color: rgba(255,255,255,.85); }
.team-card.light .team-info h5, .team-card.light .team-info h6 { color: var(--navy); }
.team-card .team-btn {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--gold); display: inline-flex; align-items: center; justify-content: center;
  transition: transform .3s ease;
}
.team-card .team-btn:hover { transform: scale(1.1); }
.team-card .team-btn svg { width: 15px; height: 15px; fill: var(--black); transform: rotate(90deg); transition: transform .3s ease; }
.team-card .team-btn.open svg { transform: rotate(-90deg); }
/* Team member popup — opens above the name bar on click */
.team-popup {
  position: absolute; left: 15px; right: 15px; bottom: 92px; z-index: 3;
  background: #fff; border-radius: 14px; padding: 16px 18px; text-align: left;
  box-shadow: 0 14px 34px rgba(14,77,112,.28);
  opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.team-card.popup-open .team-popup { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.team-popup h5 { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 600; line-height: 1.2; color: var(--navy); }
.team-popup .team-popup-role { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--gold); text-transform: capitalize; }
.team-popup p { margin: 9px 0 13px; font-family: var(--sys); font-size: 13px; line-height: 1.45; color: #555; }
.team-popup .btn { width: 100%; justify-content: center; padding: 10px 14px; font-size: 13px; }
.team-popup .btn svg { width: 15px; height: 15px; }
@media (max-width: 1024px) { .team-head { flex-direction: column; } .team-head-right { width: 100%; padding-top: 0; } .team-grid { grid-template-columns: repeat(3, 1fr); max-width: none; column-gap: 24px; } }
@media (max-width: 767px)  { .team-grid { grid-template-columns: 1fr; max-width: 340px; margin-left: auto; margin-right: auto; } }

/* ---- Offer cards (packages) ---- */
.offers { padding: 50px 0 70px; }
.offers-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.offers-head .eyebrow { margin-bottom: 28px; }
.offers-head .sec-title { max-width: 560px; }
.offers-head-right { width: 480px; flex-shrink: 0; padding-top: 50px; }
.offers-head-right p { font-family: var(--sys); font-size: 16px; line-height: 24px; color: var(--text); }
.offers-head-right .btn { margin-top: 30px; }
.offers-grid { margin-top: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.offer-card { background: var(--navy); border-radius: 20px; overflow: hidden; display: flex; align-items: stretch; }
/* height:100% keeps the image from leaking its natural height into the grid's
   auto-row sizing (which blew the navy card up to ~1024px); it fills the
   body-defined card height instead. */
.offer-img { width: 210px; flex-shrink: 0; object-fit: cover; align-self: stretch; height: 100%; }
.offer-body { flex: 1; min-width: 0; padding: 28px 25px; display: flex; flex-direction: column; }
.offer-badge { display: inline-block; align-self: flex-start; background: rgba(255,255,255,.14); border-radius: 100px; padding: 6px 14px; font-size: 13px; color: #fff; text-transform: capitalize; margin-bottom: 14px; }
.offer-body h3 { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 600; line-height: 1.1em; text-transform: capitalize; color: #fff; }
.offer-body h3 .accent { font-style: italic; color: var(--gold); }
.offer-avatars { display: flex; margin-top: 16px; }
.offer-avatars img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--navy); object-fit: cover; margin-left: -8px; }
.offer-avatars img:first-child { margin-left: 0; }
.offer-body p { margin-top: 16px; font-family: var(--sys); font-size: 14px; line-height: 22px; color: rgba(255,255,255,.85); }
.offer-body .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 900px)  { .offers-head { flex-direction: column; } .offers-head-right { width: 100%; padding-top: 0; } .offers-grid { grid-template-columns: 1fr; } }
/* Column-stack at 767px; mobile-design.css also covers this range cleanly. */
@media (max-width: 767px)  { .offer-card { flex-direction: column; } .offer-img { width: 100%; height: 220px; } }

/* ---- Package cards (packages) ---- */
.pkg-section { padding: 50px 0 70px; }
.pkg-section .eyebrow { margin-bottom: 28px; }
.pkg-section .sec-title { text-align: center; max-width: 700px; margin: 0 auto; }
.pkg-grid { margin-top: 70px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.pkg-card {
  position: relative; min-height: 599px; border-radius: 20px; overflow: hidden;
  display: flex;
}
.pkg-card .pkg-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.pkg-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,77,112,.97) 42%, rgba(14,77,112,.15) 75%); z-index: 1; }
.pkg-card-inner { position: relative; z-index: 2; padding: 40px; width: 100%; align-self: center; display: flex; flex-direction: column; }
.pkg-card-text { max-width: 62%; }
.pkg-cta-row { margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pkg-cta-row .btn { margin-top: 0; flex-shrink: 0; }
.pkg-tag { display: inline-block; background: rgba(255,255,255,.14); border-radius: 100px; padding: 7px 16px; font-size: 13px; color: #fff; text-transform: capitalize; margin-bottom: 20px; }
.pkg-card h3 { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 600; line-height: 1em; text-transform: capitalize; color: #fff; }
.pkg-card-text p { margin-top: 16px; font-family: var(--sys); font-size: 15px; line-height: 23px; color: rgba(255,255,255,.85); }
.pkg-features { margin-top: 22px; }
.pkg-features li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 15px; color: #fff; }
.pkg-features li svg { width: 18px; height: 18px; flex: 0 0 18px; fill: var(--gold); }
.pkg-price { position: absolute; z-index: 2; bottom: 40px; right: 34px; width: max-content; max-width: 55%; display: flex; align-items: center; justify-content: flex-end; gap: 7px; text-align: left; }
.pkg-price .amt { font-size: 48px; font-weight: 500; line-height: 1em; color: #fff; white-space: nowrap; }
.pkg-price .price-meta { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding-top: 6px; white-space: nowrap; }
.pkg-price .cur { font-size: 14px; font-weight: 500; line-height: 1; color: #fff; }
.pkg-price .per { display: block; margin-top: 0; font-size: 14px; font-weight: 600; line-height: 1; color: rgba(255,255,255,.85); text-transform: capitalize; }
@media (max-width: 900px) { .pkg-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .pkg-card { min-height: 0; flex-direction: column; }
  .pkg-card::after { background: linear-gradient(180deg, rgba(14,77,112,.85), rgba(14,77,112,.97)); }
  .pkg-card-inner { max-width: 100%; padding: 30px; }
  .pkg-price { justify-content: flex-start; text-align: left; padding: 0; }
}

/* ---- Detail-packages pricing ---- */
.detail-section { padding: 60px 0 70px; }
.detail-grid { display: flex; gap: 30px; align-items: flex-start; }
.detail-pricecard { width: 404px; flex-shrink: 0; background: rgba(0,0,0,.015); border: 1px solid rgba(0,0,0,.06); border-radius: 20px; padding: 30px; text-align: center; }
.detail-pricecard .eyebrow { margin-bottom: 14px; justify-content: center; }
.detail-pricecard > p { font-family: var(--sys); font-size: 15px; line-height: 23px; color: var(--text); }
.detail-pricecard .price-row { width: 100%; max-width: none; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: baseline; gap: 5px; margin: 26px 0 0; }
.detail-pricecard .price-row .amount { display: inline-flex; align-items: baseline; gap: 2px; }
.detail-pricecard .price-row .amount .price-symbol { font-size: .82em; line-height: 1; }
.detail-pricecard .price-row .per { align-self: baseline; font-weight: 600; }
.detail-pricecard .price-divider { align-items: center; }
.detail-pricecard .price-features { margin-top: 4px; text-align: left; }
.detail-pricecard .price-features li { justify-content: flex-start; }
.detail-pricecard .btn { margin-top: 28px; width: 100%; }
.detail-right { flex: 1; min-width: 0; }
.detail-right .stars { display: flex; gap: 4px; margin-bottom: 16px; }
.detail-right .stars svg { width: 18px; height: 18px; fill: var(--gold); }
.detail-right h2 { font-family: 'Playfair Display', serif; font-size: 40px; font-weight: 600; line-height: 1.1em; text-transform: capitalize; color: var(--black); }
.detail-right h2 .accent { font-style: italic; color: var(--navy); }
.detail-right > p { margin-top: 16px; font-family: var(--sys); font-size: 16px; line-height: 24px; color: var(--text); }
/* Single framed box holding two aligned rows: spec strip (top) + occupancy tiers (bottom). */
.specs-box { --strip-icon-col: 48px; margin-top: 28px; border: 1px solid rgba(0,0,0,.1); border-radius: 16px; background: rgba(0,0,0,.015); padding: 22px 20px; }
.detail-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.detail-spec { width: 100%; display: grid; grid-template-columns: var(--strip-icon-col) minmax(0, 1fr); align-items: center; justify-content: stretch; column-gap: 8px; min-height: 54px; padding: 0 6px; text-align: left; }
.detail-spec svg { width: 26px; height: 26px; flex: 0 0 26px; fill: var(--gold); }
.detail-spec > svg,
.detail-spec > .detail-spec-symbol { justify-self: center; }
.detail-spec > span:not(.detail-spec-symbol) { justify-self: start; }
.detail-spec-symbol {
  width: 30px;
  height: 26px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--gold);
  font-family: var(--sys);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.detail-spec-symbol-currency { font-size: 25px; }
.detail-spec span { max-width: 100%; font-size: 14px; line-height: 18px; color: var(--black); text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail-spec .detail-spec-symbol,
.detail-spec .detail-spec-symbol span {
  color: var(--gold);
  font-size: 18px;
  line-height: 1;
}
.detail-spec .detail-spec-symbol-currency { font-size: 25px; }
.detail-spec-airline { justify-content: center; min-width: 0; }
.detail-spec-airline svg {
  transform: rotate(-18deg);
}
.detail-spec-airline span,
.detail-spec-price .detail-spec-amount {
  max-width: 100%;
  color: var(--black);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.detail-spec-price .detail-spec-currency {
  color: var(--black);
  font-size: 1em;
  line-height: 1;
  text-transform: none;
}
.detail-spec-price .detail-spec-pkr {
  color: var(--black);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  text-transform: uppercase;
  vertical-align: baseline;
}
.detail-spec-price .detail-spec-per {
  color: var(--black);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  text-transform: capitalize;
  white-space: nowrap;
  align-self: center;
  margin-bottom: 0;
}
.detail-tabs { margin-top: 26px; display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.detail-tabs::-webkit-scrollbar { display: none; }
.detail-tab { padding: 12px 24px; border-radius: 100px; font-size: 14px; text-transform: capitalize; background: rgba(0,0,0,.05); color: var(--black); border: none; cursor: pointer; font-family: var(--sys); transition: background-color .25s ease, color .25s ease; flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
.detail-tab.active { background: var(--black); color: #fff; }
.detail-journey { margin-top: 30px; background: var(--navy); border-radius: 20px; padding: 34px; display: none; gap: 26px; align-items: center; }
.detail-journey.active { display: flex; }
.detail-journey-left { flex: 1; }
.detail-journey-left h4 { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 600; color: #fff; text-transform: capitalize; }
.detail-journey-left ul { margin-top: 18px; }
.detail-journey-left li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 15px; color: #fff; }
.detail-journey-left li svg { width: 18px; height: 18px; flex: 0 0 18px; fill: var(--gold); }
.detail-journey img { width: 320px; height: 200px; object-fit: cover; border-radius: 16px; flex-shrink: 0; }
/* Room occupancy / sharing tiers — second row inside the same framed box, no inner borders. */
/* Same 4-column grid as .detail-specs above so the two rows align symmetrically.
   No divider — the box reads as one whole strip. */
.occupancy-tiers { margin-top: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* Each tier mirrors the strip spec layout above, with the price beside the
   people icon/label group. */
.occ-card { width: 100%; min-width: 0; display: grid; grid-template-columns: var(--strip-icon-col) minmax(0, 1fr); align-items: center; justify-content: stretch; column-gap: 8px; padding: 0 6px; text-align: left; }
/* Icon with its label directly beneath; the price sits on the side. */
.occ-main { width: var(--strip-icon-col); min-width: 0; display: flex; flex-direction: column; align-items: center; justify-self: center; gap: 4px; }
/* Illustrated pilgrim-group image, sized to match the 26px strip icons above.
   flex-shrink 0 + max-width none so the row can never squash it into a sliver. */
.occ-people { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.occ-people img { height: 28px; width: auto; max-width: none; display: block; flex: 0 0 auto; }
.occ-line { display: flex; align-items: baseline; justify-content: center; gap: 8px; white-space: nowrap; }
.occ-text { max-width: 100%; font-size: 13px; line-height: 16px; color: var(--black); text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.occ-price { max-width: 100%; display: block; justify-self: start; font-size: 14px; font-weight: 400; line-height: 18px; color: var(--black); white-space: nowrap; overflow: visible; text-overflow: clip; }
.occ-amount { color: var(--black); }
.occ-pkr { color: var(--black); font-weight: 400; text-transform: uppercase; }
.occ-per { color: var(--black); text-transform: capitalize; }
@media (max-width: 1024px) { .detail-grid { flex-direction: column; align-items: stretch; } .detail-pricecard { width: 100%; } .detail-right { width: 100%; min-width: 0; } .detail-specs { grid-template-columns: repeat(2, 1fr); } .detail-spec-airline, .detail-spec-price { justify-content: center; } .occupancy-tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  {
  /* The whole box slides sideways as ONE strip: the framed box is the single
     scroll container, and both rows inside share the same 4 columns so they
     stay aligned while scrolling together. */
  .specs-box {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 16px 14px;
  }
  .specs-box::-webkit-scrollbar { display: none; }
  .detail-specs, .occupancy-tiers {
    grid-template-columns: repeat(4, minmax(190px, 1fr));
    min-width: 808px;
    gap: 12px;
  }
  .detail-spec,
  .detail-spec-airline,
  .detail-spec-price {
    min-height: 48px;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    text-align: center;
  }
  .detail-spec svg { width: 24px; height: 24px; flex-basis: 24px; }
  .detail-spec span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
  .detail-spec-symbol { flex: 0 0 26px; width: 26px; }
  .occupancy-tiers { margin-top: 14px; }
  .occ-card {
    min-height: 70px;
    justify-content: center;
    gap: 6px;
    text-align: center;
  }
  .occ-main { gap: 3px; }
  .occ-people img { height: 25px; }
  .occ-text {
    font-size: 12px;
    line-height: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .occ-price {
    font-size: 14px;
    line-height: 18px;
    overflow: visible;
    text-overflow: clip;
  }
  .detail-right h2 { font-size: 30px; overflow-wrap: anywhere; }
  .detail-journey { flex-direction: column; align-items: flex-start; }
  .detail-journey img { width: 100%; }
  /* Tabs slide horizontally (base rule already sets nowrap/overflow);
     here just bleed the strip to the card edges so the last tab peeks. */
  .detail-tabs {
    margin-left: -20px; margin-right: -20px;
    padding: 4px 20px;
  }
  /* Center the "Package Pricing" card content on mobile. */
  .detail-pricecard { text-align: center; }
  .detail-pricecard .eyebrow { justify-content: center; }
  /* price-row centering handled after its base block (see .detail-pricecard
     price lockup rules) so it wins the cascade. */
  .detail-pricecard .price-features { text-align: left; }
  .detail-pricecard .price-features li { justify-content: flex-start; }
}

/* ---- Contact hero ---- */
.contact-hero .hero-left { justify-content: center; }
.contact-hero .hero-form-card { background: rgba(0,0,0,.25); }
.contact-form .cf-row { display: flex; gap: 16px; margin-bottom: 16px; }
.contact-form .cf-field { flex: 1; display: flex; align-items: center; position: relative; background: rgba(0,0,0,.45); border-radius: 12px; padding: 15px; }
.contact-form .cf-field svg { width: 20px; height: 20px; flex: 0 0 20px; stroke: #fff; fill: none; stroke-width: 1.5; margin-right: 12px; }
.contact-form .cf-field.cf-select::after { content: ""; margin-left: auto; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #fff; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; background: transparent; border: none; outline: none;
  font-family: var(--sys); font-size: 16px; color: #fff; -webkit-appearance: none; appearance: none;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,.8); }
/* select's placeholder option matches the input placeholders; turns solid once a real choice is made */
.contact-form select { color: rgba(255,255,255,.8); }
.contact-form select:has(option:checked:not([value=""])) { color: #fff; }
.contact-form select option { color: #0E4D70; }
.contact-form .cf-msg { display: block; background: rgba(0,0,0,.45); border-radius: 12px; padding: 15px; margin-bottom: 16px; }
.contact-form .cf-msg textarea { min-height: 120px; resize: vertical; }
.contact-form .hf-submit { margin-top: 0; }
.contact-left-foot { margin-top: 30px; }
.contact-left-foot .email { display: block; font-size: 16px; color: #fff; margin-bottom: 22px; }
.contact-left-foot .email:hover { color: var(--gold); }
.contact-actions { display: flex; align-items: center; gap: 20px; }
.contact-note { margin-top: 26px; font-size: 18px; color: #fff; text-transform: capitalize; }

/* ---- Two-column FAQ (faq page) ---- */
.faq2 { padding: 60px 0 64px; }
.faq2-grid { display: flex; gap: 50px; align-items: flex-start; }
.faq2-left { width: 360px; flex-shrink: 0; }
.faq2-left .eyebrow { margin-bottom: 24px; }
.faq2-left .sec-title { font-size: 56px; }
.faq2-left .note { margin-top: 30px; font-size: 16px; color: var(--text); }
.faq2-left .btn { margin-top: 22px; }
.faq2-right { flex: 1; min-width: 0; }
@media (max-width: 1024px) { .faq2-grid { flex-direction: column; } .faq2-left { width: 100%; } .faq2-left .sec-title { font-size: 40px; } }

/* ---- 404 page ---- */
body.page-404 { background-image: none; }
.nf-wrap { display: flex; min-height: 100vh; }
.nf-left { width: 40%; position: relative; padding: 10px; }
.nf-left img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px 0 0 20px; }
.nf-right {
  width: 60%; background: var(--navy);
  background-image: url('img/bg-islamic-2-2.png');
  background-size: 460px; background-blend-mode: soft-light;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 60px 40px;
}
.nf-404 { display: flex; align-items: center; justify-content: center; gap: 10px; }
.nf-404 span { font-size: 200px; font-weight: 700; line-height: 1; color: #fff; }
.nf-404 img { width: 180px; height: 180px; }
.nf-right h2 { margin-top: 10px; font-family: 'Playfair Display', serif; font-size: 44px; font-weight: 700; color: #fff; text-transform: capitalize; }
.nf-right p { margin-top: 18px; max-width: 440px; font-family: var(--sys); font-size: 16px; line-height: 24px; color: rgba(255,255,255,.85); }
.nf-right .btn { margin-top: 30px; background: var(--gold); color: var(--black); border-radius: 100px; }
/* 404 has a solid header variant */
.site-header.solid { position: static; background: transparent; }
.site-header.solid .menu-link { color: #fff; }
@media (max-width: 900px) {
  .nf-wrap { flex-direction: column; }
  .nf-left { width: 100%; height: 240px; }
  .nf-left img { border-radius: 20px; height: 100%; }
  .nf-right { width: 100%; padding: 60px 24px; }
  .nf-404 span { font-size: 110px; }
  .nf-404 img { width: 100px; height: 100px; }
  .nf-right h2 { font-size: 30px; }
}

/* ---- generic inner page section reuse spacing ---- */
.inner-partners { padding: 70px 0; }

/* ---- Floating WhatsApp chat bubble (all viewports) ---- */
.wa-float {
  position: fixed; right: 18px; z-index: 350;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff;
  box-shadow: 0 10px 26px rgba(37,211,102,.45);
  transition: box-shadow .2s ease, opacity .3s ease, visibility .3s ease, transform .3s ease;
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;
  /* Hidden until the user scrolls down a little (toggled by JS). */
  opacity: 0; visibility: hidden; transform: translateY(24px); pointer-events: none;
}
/* Revealed after a small scroll; hidden again while a form is on-screen. */
.wa-float.is-visible { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.wa-float.is-hidden  { opacity: 0; visibility: hidden; transform: translateY(24px); pointer-events: none; }
/* Smooth glide while snapping to the nearest screen edge after a drag. */
.wa-float.is-snapping { transition: box-shadow .2s ease, left .28s cubic-bezier(.22,1,.36,1), top .28s cubic-bezier(.22,1,.36,1); }
.wa-float:active { cursor: grabbing; }
.wa-float:hover { transform: scale(1.07); box-shadow: 0 12px 30px rgba(37,211,102,.55); }
.wa-float svg { width: 32px; height: 32px; fill: #fff; }
@media (max-width: 767px) {
  .wa-float { width: 52px; height: 52px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .wa-float svg { width: 28px; height: 28px; }
}

/* ── Customer reviews ─────────────────────────────────────── */
/* The modal must stay hidden until opened — a class `display` would otherwise
   override the [hidden] attribute, so make [hidden] win explicitly. */
.review-modal[hidden] { display: none !important; }
/* Secondary "ghost" CTA: outlined navy pill with a gold star, so it reads as
   a lighter action next to the solid green Book/Enquire buttons. Fills navy on
   hover with a subtle lift. */
.review-open-btn {
  margin-top: 26px;
  gap: 10px;
  cursor: pointer;
  padding: 13px 28px;
  font-weight: 600;
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.review-open-btn svg { width: 18px; height: 18px; fill: var(--gold); margin-left: 0; }
.review-open-btn:hover {
  background: var(--navy);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(14, 77, 112, .30);
}
.review-open-btn:hover svg { fill: var(--gold); transform: scale(1.12); }
.review-open-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.review-note {
  margin-top: 20px; padding: 12px 16px; border-radius: 12px;
  font-size: 15px; line-height: 1.4; display: flex; align-items: center; gap: 8px;
}
.review-note svg { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; }
.review-note-ok  { background: rgba(34,197,94,.12); color: #15803d; }
.review-note-err { background: rgba(220,38,38,.10); color: #b91c1c; }

/* Initials avatar (reviews have no photo) */
.testi-initials {
  width: 53px; height: 53px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff; font-family: var(--sys);
  font-weight: 700; font-size: 18px; letter-spacing: .02em;
}

/* Modal */
.review-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(14,77,112,.55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: reviewFade .18s ease;
}
@keyframes reviewFade { from { opacity: 0; } to { opacity: 1; } }
.review-dialog {
  position: relative; background: #fff; border-radius: 20px;
  width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto;
  padding: 34px 32px; box-shadow: 0 30px 80px rgba(14,77,112,.35);
}
.review-close {
  position: absolute; top: 16px; right: 18px; border: none; background: none;
  font-size: 30px; line-height: 1; color: #9aa5ad; cursor: pointer;
}
.review-close:hover { color: var(--navy); }
.review-dialog h3 {
  font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 600;
  color: var(--black); margin-bottom: 6px;
}
.review-sub { font-family: var(--sys); font-size: 15px; line-height: 1.5; color: var(--text); margin-bottom: 22px; }
.review-form label { display: block; font-family: var(--sys); font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 14px; }
.review-form label .req { color: #dc2626; font-weight: 700; }
.review-form label .opt { color: #9aa5ad; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.review-form input[type="text"],
.review-form textarea {
  width: 100%; margin-top: 7px; padding: 11px 14px; border: 1px solid #dbe3ea;
  border-radius: 10px; font-family: var(--sys); font-size: 15px; color: var(--black);
  background: #fff; outline: none; transition: border-color .15s;
}
.review-form input[type="text"]:focus,
.review-form textarea:focus { border-color: var(--gold); }
.review-form textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.review-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.review-flabel { display: block; font-size: 14px; font-weight: 600; color: var(--navy); }
.review-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Star rating (reverse-order radios) */
.review-stars-field { margin-bottom: 16px; }
.review-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; margin-top: 8px; }
.review-stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.review-stars label { margin: 0; cursor: pointer; padding: 2px; }
.review-stars label svg { width: 30px; height: 30px; fill: #dbe3ea; transition: fill .12s; }
.review-stars label:hover svg,
.review-stars label:hover ~ label svg,
.review-stars input:checked ~ label svg { fill: var(--gold); }
.review-stars input:focus-visible + label svg { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 4px; }

.review-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.review-actions .btn { cursor: pointer; }
@media (max-width: 560px) {
  .review-row { grid-template-columns: 1fr; }
  .review-dialog { padding: 28px 20px; }
}

/* ---- Long price figures (e.g. Pkr 4,444,000) scale down instead of distorting the card ---- */
.price-row { flex-wrap: wrap; }
.price-row .amount { max-width: 100%; overflow-wrap: anywhere; }
.price-row .amount.amount-lg { font-size: 54px; }
.price-row .amount.amount-xl { font-size: 42px; }
.pkg-price .amt { overflow-wrap: anywhere; }
.pkg-price .amt.amt-lg { font-size: 38px; }
.pkg-price .amt.amt-xl { font-size: 30px; }
.detail-spec span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 980px) {
  .price-row .amount.amount-lg { font-size: 44px; }
  .price-row .amount.amount-xl { font-size: 36px; }
  .price-row .amount,
  .price-row .amount .counter { font-weight: 500; }
}

/* ---- Testimonials: one-line heading, clamped quotes so the slider never
   drops below the featured card, and a stronger Write a Review CTA ---- */
.testi-right .sec-title { max-width: none; font-size: clamp(30px, 3.3vw, 48px); letter-spacing: -2px; }
.testi-right .sec-title .accent { letter-spacing: -2px; }
.testi-right .eyebrow { margin-bottom: 18px; }
.testi-slider { margin-top: 36px; }
.testi-slide blockquote { display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.testi-slide .stars { margin-top: 24px; }
.review-open-btn {
  margin-top: 20px;
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  box-shadow: 0 8px 20px rgba(14, 77, 112, .22);
}
.review-open-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
  box-shadow: 0 12px 28px rgba(224, 168, 21, .35);
}
.review-open-btn:hover svg { fill: var(--black); }

/* ---- "Share Your Experience" CTA: larger, unmissable, still professional ---- */
.review-open-btn {
  padding: 16px 38px;
  font-size: 16.5px;
  letter-spacing: .01em;
  min-width: 300px;
  justify-content: center;
}
.review-open-btn .review-btn-arrow { width: 16px; height: 16px; fill: currentColor; margin-left: 2px; transition: transform .3s ease; }
.review-open-btn:hover .review-btn-arrow { transform: translateX(4px); }
@media (max-width: 560px) { .review-open-btn { width: 100%; min-width: 0; } }

/* ---- Single blog post page + blog empty state ---- */
.blog-post { padding: 60px 0 80px; }
.blog-post-article { max-width: 860px; margin: 0 auto; }
.blog-post-cover { width: 100%; max-height: 440px; object-fit: cover; border-radius: 20px; }
.blog-post-article .blog-meta { margin: 24px 0 6px; }
.blog-post-content { font-family: var(--sys); font-size: 17px; line-height: 1.75; color: var(--text); }
.blog-post-content h2, .blog-post-content h3 { margin: 28px 0 12px; font-family: 'Playfair Display', serif; color: var(--black); line-height: 1.25; }
.blog-post-content h2 { font-size: 30px; }
.blog-post-content h3 { font-size: 24px; }
.blog-post-content p { margin: 14px 0; }
.blog-post-content ul, .blog-post-content ol { margin: 14px 0 14px 24px; }
.blog-post-content li { margin: 6px 0; }
.blog-post-content a { color: var(--navy); text-decoration: underline; }
.blog-post-content img { max-width: 100%; height: auto; border-radius: 14px; }
.blog-post-content table { width: 100%; border-collapse: collapse; margin: 16px 0; display: block; overflow-x: auto; }
.blog-post-content td, .blog-post-content th { border: 1px solid rgba(0,0,0,.12); padding: 8px 12px; text-align: left; }
.blog-post-foot { margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; }
.blog-post-foot .arrow-back { transform: rotate(180deg); }
.blog-empty { margin: 60px auto 20px; max-width: 520px; text-align: center; font-family: var(--sys); color: var(--text); }
.blog-empty svg { width: 40px; height: 40px; fill: var(--gold); margin-bottom: 14px; }
.blog-empty a { color: var(--navy); text-decoration: underline; }

/* ---- About "Excellence" card: content fills the card instead of a dead
   middle gap — heading follows the pill row, trust points anchor the bottom ---- */
.about-card { height: auto; min-height: 336px; }
.about-card h4 { margin-top: 24px; }
.about-card-points { margin-top: auto; padding-top: 20px; }
.about-card-points li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-family: var(--sys); font-size: 14.5px; line-height: 1.4; color: var(--black); }
.about-card-points li svg { width: 18px; height: 18px; flex: 0 0 18px; fill: var(--gold); }

/* ---- Package prices show "255,000 (PKR)" — currency label rendered smaller
   than the figure so long PKR amounts stay compact inside the card ---- */
.pkg-price .amt .cur { font-size: .5em; font-weight: 500; opacity: .92; }
.price-row .amount .cur { font-size: .4em; font-weight: 500; }
@media (max-width: 767px) {
  /* price is static (not overlaid) on phones — the 55% overlay cap no longer applies */
  .pkg-price { max-width: none; }
}
/* raise the small (PKR) label so it centers against the tall digits instead
   of sitting on their baseline */
.price-row .amount .cur { vertical-align: .5em; }
.pkg-price .amt .cur { vertical-align: .3em; }

/* ---- (PKR) label matches the "/ Person" label size exactly ---- */
.price-row .amount .cur { font-size: 16px; font-weight: 500; vertical-align: 8px; }
.pkg-price .amt .cur { font-size: 14px; font-weight: 500; vertical-align: 5px; }

/* ---- Keep amount + currency together, with "/ Person" below. ---- */
@media (max-width: 767px) {
  .pkg-price .amt .cur { vertical-align: baseline; }
}

/* ---- Hero rating: gold star + big score, clients line beneath ---- */
.hero-rating .score { display: flex; align-items: center; gap: 10px; }
.hero-rating .score svg { width: 28px; height: 28px; fill: var(--gold); flex: 0 0 auto; }
.hero-rating .score .num { font-family: 'Poppins', sans-serif; font-size: 36px; font-weight: 600; line-height: 1.15; color: #fff; }
.hero-rating .from { margin-top: 2px; }

/* ---- Price row: amount and (PKR) stay together; / Person sits below. ---- */
.price-row .per { padding-bottom: 0; position: static; }
.price-row .amount .cur { vertical-align: 10px; }
@media (max-width: 767px) {
  .price-row .amount .cur { vertical-align: 6px; }
}

/* ---- Detail package price card: reference-style single-line price lockup ---- */
.detail-pricecard .price-row {
  width: max-content;
  max-width: 100%;
  margin: 26px auto 0;
  transform: translateX(12px);
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.detail-pricecard .price-row .amount {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.detail-pricecard .price-row .price-meta {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-end;
  align-self: flex-end;
  gap: 5px;
  padding-top: 0;
  white-space: nowrap;
}
.detail-pricecard .price-row .price-meta .cur {
  color: var(--black);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  vertical-align: baseline;
}
.detail-pricecard .price-row .price-meta .per {
  display: block;
  color: var(--black);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: capitalize;
  white-space: nowrap;
}
/* Mobile: keep the detail price lockup matching desktop. */
@media (max-width: 767px) {
  .detail-pricecard .price-row { align-items: flex-end; transform: translateX(8px); }
  .detail-pricecard .price-row .amount { font-size: 58px; font-weight: 500; }
  .detail-pricecard .price-row .amount.amount-lg { font-size: 48px; }
  .detail-pricecard .price-row .amount.amount-xl { font-size: 40px; }
  .detail-pricecard .price-row .price-meta {
    align-self: flex-end;
    justify-content: flex-end;
    text-align: right;
  }
}

/* ---- Package listing cards: amount with (PKR) stacked above / Person ---- */
.pkg-price .price-meta {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding-top: 6px;
  white-space: nowrap;
}
.pkg-price .price-meta .cur {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  vertical-align: baseline;
}
.pkg-price .price-meta .per {
  color: rgba(255,255,255,.85);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  margin-top: 0;
  text-transform: capitalize;
}
.pkg-price {
  position: static;
  top: auto;
  bottom: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  width: max-content;
  max-width: 45%;
  flex-shrink: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.pkg-price .price-meta {
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
  padding-top: 0;
}
.pkg-price .price-meta .cur { font-size: 16px; font-weight: 600; color: #fff; }
.pkg-price .price-meta .per { font-size: 16px; font-weight: 600; color: #fff; }
@media (max-width: 767px) {
  /* Keep the button and price side by side (same lockup as desktop) rather
     than stacking. Button + price are fluid (clamp) so they hit a comfortable
     size on big phones and shrink gracefully on narrow ones without the price
     ever clipping off the card edge. */
  .pkg-cta-row { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: clamp(8px, 2.5vw, 14px); }
  .pkg-cta-row .btn { padding: clamp(9px, 2.7vw, 12px) clamp(13px, 4.2vw, 20px); font-size: clamp(12px, 3.4vw, 14.5px); line-height: 1.25; border-radius: 14px; }
  .pkg-cta-row .btn svg { width: 14px; height: 14px; margin-left: clamp(6px, 2vw, 9px); }
  .pkg-price { max-width: 52%; align-items: flex-end; text-align: right; }
  .pkg-price .amt { font-size: clamp(34px, 10vw, 42px); font-weight: 500; }
  .pkg-price .amt.amt-lg { font-size: clamp(28px, 8.4vw, 36px); }
  .pkg-price .amt.amt-xl { font-size: clamp(23px, 7vw, 30px); }
  .pkg-price .price-meta .cur, .pkg-price .price-meta .per { font-size: clamp(13px, 3.6vw, 16px); }
  .pkg-price .price-meta { justify-content: flex-end; align-self: flex-end; text-align: right; }
}
/* ===========================
   Global Section Spacing
=========================== */

.about,
.about.about--noheading,
.services,
.steps,
.pricing,
.why,
.partners,
.team-section,
.faq,
.faq2,
.blog,
.blog-post,
.offers,
.detail-section,
.legal,
.testimonials,
.cta {
    padding-top: 50px;
    padding-bottom: 50px;
}

/* Partners section (smaller spacing) */
.partners {
    padding-top: 20px;
    padding-bottom: 20px;
}
/* Justify testimonial feedback text */
.testi-card > p,
.testi-slide blockquote {
    text-align: justify;
    text-justify: inter-word;
}
@media (max-width: 768px) {

    /* Footer tagline to social icons spacing */
    .site-footer .footer-top h5 {
        margin-top: 30px;
        margin-bottom: 0px !important;
    }

    .site-footer .footer-socials-mobile {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .site-footer .footer-top {
        gap: 0px !important;
    }

}
/* Landing Popup */
/* Popup same size as Hero */
.landing-popup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
/* Popup Box */
.popup-box {
    width: 90%;
    max-width: 900px;
    height: auto;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

/* Popup Slider */
.popup-slider {
    width: 100%;
    height: auto;
    position: relative;
}

.popup-slide {
    display: none;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.popup-slide.active {
    display: block;
}
.popup-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.popup-content {
    padding:25px;
    text-align:center;
}

/* Popup Close Button */
.popup-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    font-size: 28px;
    line-height: 38px;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s ease;
}

.popup-close:hover {
    transform: rotate(90deg);
    opacity: .9;
}
.popup-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}
.popup-dots button {
    background: rgba(255,255,255,.7);
}
.popup-dots button.active {
    background: var(--gold);
}

.whatsapp-btn {
    margin-left:10px;
}
@media (max-width:768px){

    .popup-box {
        width: calc(100% - 30px);
        max-width: 100%;
    }

    .popup-slide {
        width:100%;
        height:auto;
    }

}

.popup-slider,
.testi-slider {
    touch-action: pan-y;
}

/* ── Popup: promotion mode & visibility ─────────────────────────
   .landing-popup shipped as display:flex, so it painted before popup.js could
   decide whether this visitor should see it — a flash on every load, even when
   the popup was switched off or already dismissed. It now starts hidden and
   popup.js is the only thing that opens it. */
.landing-popup { display: none; }
body.popup-open { overflow: hidden; }

.landing-popup.is-promo .popup-box { max-width: 560px; }
.landing-popup.is-promo .popup-slide { max-height: 300px; object-fit: cover; }

.popup-promo {
  padding: 26px 28px 30px;
  text-align: center;
}
.popup-promo-title {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--navy, #0E4D70);
  margin: 0 0 10px;
}
.popup-promo-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text, #333);
  margin: 0 auto 18px;
  max-width: 42ch;
  text-align: center;
}
.popup-promo-cta {
  display: inline-block;
  padding: 13px 30px;
  border-radius: 8px;
  background: var(--gold, #EDB81A);
  color: #0E4D70;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.popup-promo-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(237, 184, 26, .4);
}

@media (max-width: 600px) {
  .popup-promo { padding: 20px 18px 24px; }
  .popup-promo-title { font-size: 20px; }
  .popup-promo-text { font-size: 14px; }
}