/* ═══════════════════════════════════════════════════════════════
   TALBIYA UMRAH — PREMIUM HOMEPAGE STYLES
   Color Palette: Deep Green · Gold · White · Black
   Fonts: Cormorant Garamond (headings) · Poppins (body)
═══════════════════════════════════════════════════════════════ */

/* ─── CSS VARIABLES ─────────────────────────────────────────── */
:root {
  --green-dark: #585454;
  --green-mid: #5e5a5a;
  --green-light: #6b6868;
  --green-pale: #e8f5ee;
  --gold: #f5ca04;
  --gold-light: #e8c84a;
  --gold-dark: #f5ca04;
  --gold-pale: #fdf8d0;
  --gold-500: #c8962e;
  --gold-600: #a67728;
  --white: #ffffff;
  --off-white: #f8f5f0;
  --cream: #fdf9f2;
  --black: #0a0a0a;
  --gray-dark: #2d2d2d;
  --gray-mid: #666666;
  --gray-light: #ebebeb;
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Poppins", -apple-system, sans-serif;
  --font-number: "Poppins", sans-serif;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.18);
  --shadow-gold: 0 4px 20px rgba(203, 170, 0, 0.35);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --transition: 0.3s ease;
  --nav-height: 76px;
  --topbar-height: 38px;
}

/* ─── RESET & BASE ──────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  color: var(--gray-dark);
  background: var(--white);
  line-height: 1.7;
  /* `clip` prevents horizontal overflow without creating a scroll container.
     A scroll container (from `hidden`) breaks `background-attachment: fixed`
     on descendants such as .lux-section — kills the Luxury-section parallax. */
  overflow-x: clip;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-body);
}

input,
select,
textarea {
  font-family: var(--font-body);
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────────── */
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  line-height: 1.25;
}

h1 {
  font-size: clamp(2.2rem, 5vw, 4rem);
}

h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}

h3 {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

/* ─── UTILITY ────────────────────────────────────────────────── */
.container {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 24px;
}

.d-none-mobile {
  display: inline;
}

.gold-text {
  color: var(--gold);
}

.white-text {
  color: var(--white);
}

.light-text {
  color: rgba(255, 255, 255, 0.82);
}

.gold-icon {
  color: var(--gold);
}

.green-icon {
  color: var(--green-mid);
}

/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-sm {
  padding: 8px 18px;
  font-size: 0.82rem;
}

.btn-lg {
  padding: 15px 34px;
  font-size: 1rem;
}

.btn-xl {
  padding: 18px 42px;
  font-size: 1.05rem;
}

.btn-gold {
  background: linear-gradient(
    135deg,
    var(--gold) 0%,
    var(--gold-light) 60%,
    var(--gold) 100%
  );
  background-size: 200% auto;
  color: var(--black);
  box-shadow: var(--shadow-gold);
}

.btn-gold:hover {
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(201, 168, 76, 0.45);
}

.btn-green {
  background: var(--green-dark);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn-green:hover {
  background: var(--green-mid);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline-green {
  background: transparent;
  color: var(--green-dark);
  border: 2px solid var(--green-dark);
}

.btn-outline-green:hover {
  background: var(--green-dark);
  color: var(--white);
}

.btn-outline-gold {
  background: transparent;
  color: var(--gold-light);
  border: 2px solid var(--gold);
}

.btn-outline-gold:hover {
  background: var(--gold);
  color: var(--black);
}

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.7);
}

.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--white);
}

/* ─── SECTION COMMON ─────────────────────────────────────────── */
.section {
  padding: 90px 0;
}

.section-light {
  background: var(--off-white);
}

.section-dark {
  background: var(--green-dark);
}

.section-green {
  background: linear-gradient(135deg, var(--green-dark) 0%, #0d4f3b 100%);
}

.section-cream {
  background: var(--cream);
}

.section-ramadan {
  background: linear-gradient(135deg, #0f0a2a 0%, #1a0b3d 50%, #0b2a1a 100%);
  position: relative;
  overflow: hidden;
}

.section-header {
  text-align: center;
  margin-bottom: 52px;
}

.section-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--green-mid);
  background: var(--green-pale);
  padding: 5px 16px;
  border-radius: 50px;
  margin-bottom: 14px;
}

.section-tag-gold {
  color: var(--gold-dark);
  background: var(--gold-pale);
}

.section-title {
  margin-bottom: 14px;
}

.section-subtitle {
  color: var(--gray-mid);
  max-width: 640px;
  margin: 0 auto 24px;
  font-size: 1rem;
}

.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--gold);
  font-size: 1.1rem;
  margin-top: 16px;
}

.section-divider span {
  display: block;
  width: 60px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}

.divider-gold {
  color: var(--gold-light);
}

.divider-gold span {
  background: var(--gold-light);
}

.section-cta {
  text-align: center;
  margin-top: 48px;
}

/* ─── TRUST BAR ICON IMAGES ─────────────────────────────────── */
.trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trust-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

/* ─── TOP BAR ────────────────────────────────────────────────── */
#top-bar {
  background: var(--green-dark);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.78rem;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  position: relative;
  z-index: 1001;
}

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.top-bar-left,
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.top-bar-left a,
.top-bar-right a {
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color var(--transition);
}

.top-bar-left a:hover,
.top-bar-right a:hover {
  color: var(--gold-light);
}

.wa-link {
  color: #25d366 !important;
  font-weight: 600;
}

.wa-link:hover {
  color: #1da851 !important;
}

.wa-channel {
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.35);
  border-radius: 50px;
  padding: 2px 10px 2px 8px;
  font-size: 0.72rem;
  animation: wa-channel-blink 1.6s ease-in-out infinite;
}

@keyframes wa-channel-blink {
  0%,
  100% {
    background: rgba(37, 211, 102, 0.12);
    border-color: rgba(37, 211, 102, 0.35);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
  50% {
    background: rgba(37, 211, 102, 0.32);
    border-color: rgba(37, 211, 102, 0.85);
    box-shadow:
      0 0 0 6px rgba(37, 211, 102, 0.2),
      0 0 14px rgba(37, 211, 102, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-channel {
    animation: none;
  }
}

.trust-tag {
  color: var(--gold-light);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

.social-links {
  display: flex;
  gap: 10px;
}

.social-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  transition: color var(--transition);
}

.social-links a:hover {
  color: var(--gold-light);
}

/* ─── NAVIGATION ─────────────────────────────────────────── */
#header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
  transition:
    box-shadow var(--transition),
    background var(--transition);
}

#header.scrolled {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.14);
}

.navbar {
  height: var(--nav-height);
  position: relative;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 8px;
}

/* ── Logo ── */
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity var(--transition);
}

.logo:hover {
  opacity: 0.85;
}

.logo img {
  height: 58px;
  width: auto;
  display: block;
}

.logo-text {
  display: none;
}

.logo-icon {
  display: none;
}

/* ── Nav links ── */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  flex: 1;
  justify-content: center;
}

.nav-links > li > a {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--green-dark);
  padding: 6px 10px;
  border-radius: 4px;
  transition:
    color var(--transition),
    background var(--transition);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
  position: relative;
}

.nav-links > li > a .fa-chevron-down {
  font-size: 0.55rem;
  opacity: 0.7;
  transition: transform var(--transition);
}

.nav-links > li:hover > a {
  color: var(--gold-dark);
  background: var(--gold-pale);
}

.nav-links > li:hover > a .fa-chevron-down {
  transform: rotate(180deg);
}

/* Current-page indicator */
.nav-links > li > a.active-nav {
  color: var(--gold-dark);
  background: var(--gold-pale);
}
.nav-links > li > a.active-nav::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold-dark),
    transparent
  );
  border-radius: 2px;
}

/* ── Standard 2-level Dropdown ── */
.has-dropdown {
  position: relative;
}

.dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background: var(--white);
  border-top: 3px solid var(--gold);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.13);
  min-width: 230px;
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.25s ease;
  list-style: none;
  z-index: 200;
}

.has-dropdown:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown li a {
  display: block;
  padding: 9px 18px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gray-dark);
  transition:
    background var(--transition),
    color var(--transition),
    padding-left var(--transition);
}

.dropdown li a:hover {
  background: var(--gold-pale);
  color: var(--gold-dark);
  padding-left: 24px;
}

/* ── Flyout Child Dropdown ── */
.has-child {
  position: relative;
}

.has-child > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.child-arrow {
  font-size: 0.6rem !important;
  color: var(--gray-mid) !important;
  margin-left: auto;
  flex-shrink: 0;
  transition: color 0.2s;
}

.has-child:hover .child-arrow {
  color: var(--gold-dark) !important;
}

.child-dropdown {
  position: absolute;
  top: -6px;
  left: 100%;
  background: var(--white);
  border-top: 3px solid var(--gold);
  border-radius: 0 0 10px 10px;
  box-shadow: 6px 16px 48px rgba(0, 0, 0, 0.13);
  min-width: 210px;
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: all 0.22s ease;
  list-style: none;
  z-index: 300;
}

.has-child:hover .child-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.child-dropdown li a {
  display: block;
  padding: 8px 18px;
  font-size: 0.81rem;
  font-weight: 500;
  color: var(--gray-dark);
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s,
    padding-left 0.2s;
}

.child-dropdown li a:hover {
  background: var(--gold-pale);
  color: var(--gold-dark);
  padding-left: 24px;
}

/* Cities child — slightly wider */
.child-dropdown--cities {
  min-width: 180px;
}

/* ── Umrah Mega Menu ── */
.has-mega {
  position: static;
}

.mega-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: min(1160px, 96vw);
  background: var(--white);
  border-top: 3px solid var(--gold);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
  z-index: 200;
}

.has-mega:hover .mega-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-inner {
  padding: 28px 32px 24px;
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.5fr;
  gap: 0 24px;
}

/* Column headings */
.mega-heading {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold-dark);
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--gold-pale);
  text-decoration: none;
  transition: color var(--transition);
}

.mega-heading:hover {
  color: var(--black);
}

/* Column list items */
.mega-col {
  padding: 0 0 4px;
}

.mega-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mega-col ul li a {
  display: block;
  padding: 6px 8px 6px 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gray-dark);
  text-decoration: none;
  transition:
    color var(--transition),
    padding-left var(--transition);
  border-bottom: 1px solid transparent;
}

.mega-col ul li a:hover {
  color: var(--gold-dark);
  padding-left: 6px;
}

/* Cities column — 2-column inner grid */
.mega-cities-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0 8px;
}

/* ── Single Book Now button ── */
.nav-book-btn {
  flex-shrink: 0;
  background: linear-gradient(91deg, #b58e00, #e7d32e);
  border: 1px solid #ead201;
  color: #fff;
  padding: 9px 22px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: all var(--transition);
  box-shadow: 0 3px 14px rgba(184, 134, 44, 0.3);
}

.nav-book-btn:hover {
  background: linear-gradient(91deg, #e7d32e, #b58e00);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(184, 134, 44, 0.42);
}

/* ── Hamburger ── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  flex-shrink: 0;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--green-dark);
  border-radius: 2px;
  transition: all var(--transition);
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ─── HERO SECTION — FULL-SCREEN SLIDER ────────────────────── */
.hero-section {
  position: relative;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background: var(--green-dark);
}

/* ─────────────────────────────────────────────
   Inner-page hero variants
   • .hero-section--inner       → shorter, no fullscreen
   • .hero-section--banner      → centered title + breadcrumb only
   • .hero-banner-overlay       → fixed title above rotating slides
   ───────────────────────────────────────────── */
.hero-section.hero-section--inner {
  height: auto;
  min-height: 460px;
}
.hero-section--inner .slide .container {
  /* Inner-page slides only carry image+overlay; content lives in overlay */
  padding-top: 0;
  padding-bottom: 0;
}

/* Slow-zoom Ken Burns is fine on inner pages too (inherited from .slide.active) */

/* Fixed overlay holding title + breadcrumb (does not fade with slides) */
.hero-banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 70px 0 50px;
  pointer-events: none;
}
.hero-banner-overlay .container {
  width: 100%;
  pointer-events: auto;
}
.hero-banner-overlay .slide-content {
  opacity: 1;
  transform: none;
  border-left: none;
  padding-left: 0;
  max-width: none;
  width: 100%;
  text-align: center;
}

/* Banner title + thin gold underline */
.hero-section--banner .slide-title {
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  position: relative;
  padding-bottom: 22px;
}
.hero-section--banner .slide-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 70px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: translateX(-50%);
}

/* Breadcrumb pill — slightly more presence */
.slide-breadcrumb {
  font-family: "Poppins", sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  padding: 12px 26px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(245, 202, 4, 0.36);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 50px;
}
.slide-breadcrumb a {
  color: var(--gold);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.slide-breadcrumb a:hover {
  opacity: 0.8;
}
.slide-breadcrumb i {
  color: var(--gold);
  font-size: 0.55rem;
  opacity: 0.85;
}

/* Bismillah watermark stays centered behind title on banner heroes */
.hero-section--banner .hero-bismillah-deco {
  font-size: clamp(1.3rem, 2.5vw, 2.2rem);
  color: rgba(255, 255, 255, 0.07);
}

@media (max-width: 768px) {
  .hero-section.hero-section--inner {
    min-height: 360px;
  }
  .hero-banner-overlay {
    padding: 50px 0 36px;
  }
  .hero-section--banner .slide-title {
    font-size: 2.2rem;
    margin-bottom: 20px;
    padding-bottom: 18px;
  }
  .hero-section--banner .slide-title::after {
    width: 56px;
  }
  .slide-breadcrumb {
    font-size: 0.66rem;
    padding: 10px 22px;
    letter-spacing: 0.18em;
  }
}

/* ── Slider container ── */
.hero-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Each Slide ── */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide.active {
  opacity: 1;
  z-index: 2;
}

/* ── Slide Background + Ken Burns ── */
.slide-bg {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 8s ease-out;
  will-change: transform;
}

.slide.active .slide-bg {
  transform: scale(1.06);
}

/* ── Overlays ── */
.slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Bottom fade for content readability */
.slide-overlay::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, transparent 100%);
}

/* Gradient: deep on left where text sits, image shows on right */
.slide-overlay-1 {
  background: linear-gradient(
    105deg,
    rgba(11, 61, 46, 0.92) 0%,
    rgba(11, 61, 46, 0.72) 35%,
    rgba(11, 61, 46, 0.28) 62%,
    transparent 100%
  );
}

.slide-overlay-2 {
  background: linear-gradient(
    105deg,
    rgba(4, 14, 8, 0.94) 0%,
    rgba(4, 14, 8, 0.72) 36%,
    rgba(4, 14, 8, 0.25) 62%,
    transparent 100%
  );
}

.slide-overlay-3 {
  background: linear-gradient(
    105deg,
    rgba(11, 61, 46, 0.92) 0%,
    rgba(11, 61, 46, 0.7) 36%,
    rgba(11, 61, 46, 0.25) 62%,
    transparent 100%
  );
}

.slide-overlay-4 {
  background: linear-gradient(
    105deg,
    rgba(6, 14, 26, 0.93) 0%,
    rgba(6, 14, 26, 0.7) 36%,
    rgba(6, 14, 26, 0.22) 62%,
    transparent 100%
  );
}

/* ── Bismillah decorative watermark (right side) ── */
.hero-bismillah-deco {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  font-family: "Scheherazade New", Georgia, serif;
  font-size: clamp(1.6rem, 3.2vw, 2.8rem);
  color: rgba(255, 255, 255, 0.08);
  direction: rtl;
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 0.06em;
  text-shadow: 0 0 40px rgba(203, 170, 0, 0.1);
  transition: opacity 1s ease;
}

/* ── Slide Content ── */
.slide .container {
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 3;
  /* Push content up to leave room for search widget at bottom */
  padding-bottom: 200px;
}

.slide-content {
  /* max-width: 620px; */
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1s ease 0.45s,
    transform 1s ease 0.45s;
  /* Left gold accent bar — premium editorial feel */
  border-left: 3px solid var(--gold);
  padding-left: 28px;
}

.slide.active .slide-content {
  opacity: 1;
  transform: translateY(0);
}

/* Eyebrow */
.slide-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-light);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 18px;
  opacity: 0.95;
}

.slide-eyebrow i {
  font-size: 0.6rem;
}

.slide-eyebrow-urgent {
  color: #fca5a5;
}

/* Headline */
.slide-title {
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  font-weight: 700;
  line-height: 1.08;
  color: var(--white);
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}

.slide-title .gold-text {
  color: var(--gold);
}

/* Subtitle */
.slide-subtitle {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.8;
  margin-bottom: 32px;
  max-width: 500px;
  font-weight: 300;
}

/* CTAs */
.slide-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ─── HERO CONTACT FORM (right side overlay) ─── */
.hero-contact-form {
  position: absolute;
  top: 40%;
  right: 120px;
  transform: translateY(-50%);
  z-index: 20;
  width: 320px;
  background: rgb(89 84 84 / 10%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(203, 170, 0, 0.35);
  border-radius: 16px;
  overflow: hidden;
  /* box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04); */
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.hero-form-header {
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%);
  padding: 20px 24px 16px;
  text-align: center;
}

.hero-form-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--gold-dark);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.hero-form-badge i {
  color: var(--gold-dark);
  font-size: 0.7rem;
}

.hero-form-header h3 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
  line-height: 1.2;
}

.hero-form-header p {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.hero-form-body {
  padding: 20px 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hero-form-field label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-light);
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-form-field label i {
  font-size: 0.65rem;
  opacity: 0.8;
}

.hero-form-field input,
.hero-form-field select {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-body);
  font-size: 0.85rem;
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
  box-sizing: border-box;
  /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
}

.hero-form-field input::placeholder {
  color: rgba(255, 255, 255, 0.744);
}

.hero-form-field input:focus,
.hero-form-field select:focus {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.16);
}

.hero-form-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.85) 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.85) 50%, transparent 50%),
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0.25),
      rgba(255, 255, 255, 0.25)
    );
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px),
    calc(100% - 38px) 50%;
  background-size:
    5px 5px,
    5px 5px,
    1px 16px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

.hero-form-field select:required:invalid {
  color: rgba(255, 255, 255, 0.744);
}

.hero-form-field select option,
.hero-form-field select optgroup {
  color: #111;
}

.hero-form-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--green-dark);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    opacity 0.2s,
    transform 0.2s;
  letter-spacing: 0.03em;
}

.hero-form-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.hero-form-note {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* ─── HERO SEARCH WIDGET (pinned inside hero at bottom) ─── */
.hero-search-wrap {
  position: absolute;
  bottom: 28px;
  left: 0;
  right: 0;
  z-index: 20;
}

.hero-search-box {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 14px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(203, 170, 0, 0.2);
  overflow: hidden;
  max-width: 980px;
  margin: 0 auto;
}

/* ── Package type tabs ── */
.search-tabs {
  display: flex;
  background: var(--green-dark);
}

.search-tab {
  flex: 1;
  padding: 11px 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  letter-spacing: 0.03em;
  transition:
    color 0.2s,
    background 0.2s,
    border-color 0.2s;
  white-space: nowrap;
}

.search-tab i {
  font-size: 0.65rem;
}

.search-tab:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
}

.search-tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  background: rgba(255, 255, 255, 0.09);
}

/* ── Search fields row ── */
.search-fields {
  display: flex;
  align-items: stretch;
}

.search-field {
  flex: 1;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.search-field label {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-mid);
  display: flex;
  align-items: center;
  gap: 5px;
}

.search-field label i {
  color: var(--gold-dark);
}

.search-select {
  border: none;
  outline: none;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--green-dark);
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-body);
  padding: 2px 0;
}

.search-divider {
  width: 1px;
  background: var(--gray-light);
  margin: 8px 0;
  flex-shrink: 0;
}

.search-go-btn {
  flex-shrink: 0;
  background: linear-gradient(
    135deg,
    var(--gold-dark) 0%,
    var(--gold) 50%,
    var(--gold-light) 100%
  );
  background-size: 200% auto;
  color: var(--black);
  border: none;
  padding: 0 36px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  transition:
    background-position var(--transition),
    box-shadow var(--transition);
  white-space: nowrap;
  letter-spacing: 0.02em;
  font-family: var(--font-body);
}

.search-go-btn:hover {
  background-position: right center;
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.06);
}

/* ── Slider Arrows ── */
.slider-arrow {
  position: absolute;
  top: 15%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 19px;
  height: 48px;
  background: #58545461;
  border: none;
  color: var(--gold);
  cursor: pointer;
  transition: background 0.25s ease;
}

.slider-arrow:hover {
  background: #1a0f02;
}

.arrow-label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
}

.slider-arrow i {
  font-size: 0.7rem;
  color: var(--gold);
}

/* PREV — flat left edge, rounded right end */
.slider-prev {
  left: 0;
  border-radius: 0 50px 50px 0;
}

/* NEXT — rounded left end, flat right edge */
.slider-next {
  right: 0;
  border-radius: 50px 0 0 50px;
  flex-direction: row-reverse;
}

/* ── Slide Counter (01 / 04) ── */
.slide-counter {
  position: absolute;
  bottom: 46px;
  right: 40px;
  z-index: 20;
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

#slide-current {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}

.counter-sep {
  opacity: 0.4;
  font-size: 1.1rem;
}

.slide-total {
  font-size: 0.85rem;
}

/* ── Slide Dots + Progress ── */
.slider-bottom {
  position: absolute;
  bottom: 46px;
  left: 40px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.slider-dots {
  display: flex;
  gap: 8px;
}

.slider-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.slider-dot.active {
  background: var(--gold);
  border-color: var(--gold);
  width: 30px;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(203, 170, 0, 0.55);
}

.slider-progress-wrap {
  width: 120px;
  height: 2px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 2px;
  overflow: hidden;
}

.slider-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  width: 0%;
  border-radius: 2px;
  transition: width 0.1s linear;
}

/* Legacy alias (used elsewhere if needed) */
.bismillah {
  font-family: "Scheherazade New", "Amiri", serif;
  font-size: 1.8rem;
  color: rgba(255, 255, 255, 0.65);
  direction: rtl;
  margin-bottom: 16px;
}

.scroll-arrow {
  margin-top: 8px;
  animation: bounce 2s infinite;
  font-size: 1.1rem;
  color: var(--gold-light);
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(8px);
  }
}

/* ── Scroll Down Indicator ── */
.hero-scroll-down {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color var(--transition);
}

.hero-scroll-down:hover {
  color: var(--gold);
}

.scroll-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.scroll-icon {
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  animation: scrollBounce 2.4s ease-in-out infinite;
}

.hero-scroll-down:hover .scroll-icon {
  border-color: var(--gold);
  background: rgba(203, 170, 0, 0.12);
}

@keyframes scrollBounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }

  50% {
    transform: translateY(5px);
    opacity: 1;
  }
}

/* ─── STATS BAR ──────────────────────────────────────────────── */
.stats-bar {
  background: var(--green-dark);
  border-bottom: 3px solid var(--gold);
  padding: 0;
}

.stats-inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 12px 8px;
  flex-wrap: wrap;
  gap: 20px;
}

.stat-item {
  text-align: center;
  color: var(--white);
  line-height: 1.2;
}

.stat-number {
  font-family: var(--font-number);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: -0.01em;
}

.stat-suffix {
  font-family: var(--font-number);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gold);
}

.stat-label {
  display: block;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.stat-divider {
  width: 1px;
  height: 50px;
  background: rgba(255, 255, 255, 0.15);
}

/* ─── PACKAGE CARDS ──────────────────────────────────────────── */
.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.package-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 1px solid var(--gray-light);
  display: flex;
  flex-direction: column;
}

.package-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(11, 61, 46, 0.16);
  border-color: rgba(203, 170, 0, 0.4);
}

/* Gold top accent bar on hover */
.package-card::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--gold-dark),
    var(--gold),
    var(--gold-dark)
  );
  transform: scaleX(0);
  transition: transform 0.35s ease;
  transform-origin: left;
}

.package-card:hover::before {
  transform: scaleX(1);
}

/* Card Image Area */
.card-image {
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-size: cover !important;
  background-position: center !important;
}

/* Gradient overlay for real-photo cards */
.card-image[style*="background-image"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.12) 40%,
    rgba(0, 0, 0, 0.55) 100%
  );
  z-index: 1;
}

/* Ensure badge and duration tag show above gradient */
.card-image .card-badge,
.card-image .card-duration-tag,
.card-image .card-img-icon {
  z-index: 2;
}

.card-img-makkah {
  background: linear-gradient(135deg, #0b3d2e 0%, #1a6b47 100%);
}

.card-img-madinah {
  background: linear-gradient(135deg, #1a3d2e 0%, #2d8060 100%);
}

.card-img-family {
  background: linear-gradient(135deg, #0b3d1a 0%, #2d7a3a 100%);
}

.card-img-budget {
  background: linear-gradient(135deg, #1a3a0b 0%, #3a6b1a 100%);
}

.card-img-extended {
  background: linear-gradient(135deg, #0d3d3d 0%, #1a6b6b 100%);
}

.card-img-premium-eco {
  background: linear-gradient(135deg, #3d2e0b 0%, #6b5420 100%);
}

.card-img-luxury-1 {
  background: linear-gradient(135deg, #1a0f00 0%, #5a3c0a 100%);
}

.card-img-luxury-2 {
  background: linear-gradient(135deg, #2a1a00 0%, #7a5010 100%);
}

.card-img-luxury-3 {
  background: linear-gradient(135deg, #0a0a00 0%, #4a3000 100%);
}

.card-img-ramadan-1 {
  background: linear-gradient(135deg, #1a0b2e 0%, #3d1a6b 100%);
}

.card-img-ramadan-2 {
  background: linear-gradient(135deg, #0b1a3d 0%, #1a2e6b 100%);
}

.card-img-ramadan-3 {
  background: linear-gradient(135deg, #2e0b3d 0%, #6b1a5a 100%);
}

.card-img-hajj-1 {
  background: linear-gradient(135deg, #0b3d2e 0%, #1a5c3a 100%);
}

.card-img-hajj-2 {
  background: linear-gradient(135deg, #1a3d0b 0%, #3a6b1a 100%);
}

.card-img-hajj-3 {
  background: linear-gradient(135deg, #3d2e0b 0%, #7a5c1a 100%);
}

.card-img-dubai {
  background: linear-gradient(135deg, #3d2000 0%, #8b5500 100%);
}

.card-img-istanbul {
  background: linear-gradient(135deg, #3d0b0b 0%, #8b2020 100%);
}

.card-img-morocco {
  background: linear-gradient(135deg, #3d3d0b 0%, #8b7020 100%);
}

.card-img-karbala {
  background: linear-gradient(135deg, #0b1a3d 0%, #1a2e6b 100%);
}

.card-img-iraq-complete {
  background: linear-gradient(135deg, #0b0b3d 0%, #1a1a7a 100%);
}

.card-img-arbaeen {
  background: linear-gradient(135deg, #1a0b3d 0%, #3d1a6b 100%);
}

.card-img-corporate-1 {
  background: linear-gradient(135deg, #1a1a2e 0%, #2e2e50 100%);
}

.card-img-corporate-2 {
  background: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%);
}

.card-img-corporate-3 {
  background: linear-gradient(135deg, #0b0b1a 0%, #1a1a3d 100%);
}

.card-img-land-1 {
  background: linear-gradient(135deg, #1a3d1a 0%, #3a7a3a 100%);
}

.card-img-land-2 {
  background: linear-gradient(135deg, #0b3d1a 0%, #1a6b3a 100%);
}

.card-img-land-3 {
  background: linear-gradient(135deg, #3d3d0b 0%, #6b6b1a 100%);
}

.card-img-turkey {
  background: linear-gradient(135deg, #3d0b0b 0%, #7a1a1a 100%);
}

.card-img-morocco-intl {
  background: linear-gradient(135deg, #3d2e0b 0%, #8b6b1a 100%);
}

.card-img-egypt {
  background: linear-gradient(135deg, #3d2e00 0%, #9b7000 100%);
}

/* Decorative Islamic pattern overlay on card images */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpolygon points='30,4 33,14 43,14 35,20 38,30 30,24 22,30 25,20 17,14 27,14' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='0.8'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

.card-img-icon {
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.3);
  z-index: 1;
}

.card-duration-tag {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(11, 61, 46, 0.82);
  color: var(--white);
  font-family: var(--font-number);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 5px 13px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Card Badges */
.card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  z-index: 2;
}

.badge-popular {
  background: var(--gold);
  color: var(--black);
}

.badge-value {
  background: #22c55e;
  color: var(--white);
}

.badge-family {
  background: #3b82f6;
  color: var(--white);
}

.badge-budget {
  background: #f97316;
  color: var(--white);
}

.badge-luxury {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: var(--black);
}

.badge-urgent {
  background: #ef4444;
  color: var(--white);
  animation: pulse-badge 1.8s infinite;
}

.badge-hajj {
  background: var(--green-mid);
  color: var(--white);
}

.badge-ziyarat {
  background: #6366f1;
  color: var(--white);
}

@keyframes pulse-badge {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
}

/* Card Body */
.card-body {
  padding: 20px 22px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 10px;
  line-height: 1.35;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--gray-light);
}

.card-meta span {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gray-mid);
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--off-white);
  padding: 3px 8px;
  border-radius: 4px;
}

.card-meta span .gold-icon {
  color: var(--gold-dark);
}

.card-features {
  margin-bottom: 14px;
  flex: 1;
}

.card-features li {
  font-size: 0.8rem;
  color: var(--gray-dark);
  padding: 3px 0;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  letter-spacing: 0.01em;
}

.card-features li i {
  color: var(--green-mid);
  font-size: 0.7rem;
  margin-top: 4px;
  flex-shrink: 0;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 20px;
  border-top: 1px solid var(--gray-light);
  margin-top: auto;
  flex-wrap: wrap;
  gap: 10px;
}

.card-price {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.price-from {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--gray-mid);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.price-amount {
  font-family: var(--font-number);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--green-dark);
  letter-spacing: -0.01em;
  line-height: 1;
}

.price-pp {
  font-size: 0.65rem;
  color: var(--gray-mid);
  letter-spacing: 0.02em;
}

.gold-price {
  color: var(--gold-dark) !important;
}

.card-ctas {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-ctas .btn-sm {
  text-align: center;
  min-width: 90px;
  font-size: 0.75rem;
  padding: 7px 14px;
}

/* ═══════════════════════════════════════════════════════════════
   POPULAR PACKAGES — Horizontal split card layout
═══════════════════════════════════════════════════════════════ */

.pop-section {
  background-color: #fdf8ef;
  /* Repeating Islamic 8-pointed star tile */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cpolygon points='35,9 39.21,24.84 53.38,16.62 45.16,30.79 61,35 45.16,39.21 53.38,53.38 39.21,45.16 35,61 30.79,45.16 16.62,53.38 24.84,39.21 9,35 24.84,30.79 16.62,16.62 30.79,24.84' fill='none' stroke='rgba(203,170,0,0.13)' stroke-width='0.8'/%3E%3C/svg%3E");
  background-size: 70px 70px;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

/* Top-right: Mosque silhouette — dome, minarets, crescent */
.pop-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  width: 540px;
  height: 360px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 220'%3E%3Cg fill='rgba(203,170,0,0.15)'%3E%3Crect x='20' y='65' width='20' height='130' rx='2'/%3E%3Cpolygon points='20,65 30,28 40,65'/%3E%3Crect x='15' y='58' width='30' height='8' rx='1'/%3E%3Crect x='15' y='105' width='30' height='5' rx='1'/%3E%3Crect x='260' y='65' width='20' height='130' rx='2'/%3E%3Cpolygon points='260,65 270,28 280,65'/%3E%3Crect x='255' y='58' width='30' height='8' rx='1'/%3E%3Crect x='255' y='105' width='30' height='5' rx='1'/%3E%3Crect x='55' y='135' width='190' height='60' rx='2'/%3E%3Cpath d='M55 135 Q80 100 105 135 Z'/%3E%3Cpath d='M195 135 Q220 100 245 135 Z'/%3E%3Cpath d='M85 135 Q150 45 215 135 Z'/%3E%3Cpath d='M133 195 L133 160 Q150 148 167 160 L167 195 Z' fill='rgba(253,248,239,0.6)'/%3E%3Cpath d='M72 155 Q82 143 92 155 L92 168 L72 168 Z' fill='rgba(253,248,239,0.5)'/%3E%3Cpath d='M208 155 Q218 143 228 155 L228 168 L208 168 Z' fill='rgba(253,248,239,0.5)'/%3E%3Cpath d='M143 58 A12 12 0 1 1 163 72 A8 8 0 1 0 143 58 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right top;
  pointer-events: none;
  z-index: 0;
}

/* Bottom-left: Crescent moon + 8-pointed Islamic star */
.pop-section::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: -10px;
  width: 320px;
  height: 320px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='rgba(203,170,0,0.13)'%3E%3Cpath d='M100 25 C48 25 12 60 12 100 C12 140 48 175 100 175 C72 160 58 132 58 100 C58 68 72 40 100 25 Z'/%3E%3Cpolygon points='145,47 147.87,58.07 157.73,52.27 151.93,62.13 163,65 151.93,67.87 157.73,77.73 147.87,71.93 145,83 142.13,71.93 132.27,77.73 138.07,67.87 127,65 138.07,62.13 132.27,52.27 142.13,58.07'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

/* Keep content above the decorative layers */
.pop-section .container {
  position: relative;
  z-index: 1;
}

/* ── Header ── */
.pop-header {
  text-align: center;
  max-width: 1150px;
  margin: 0 auto 52px;
}

.pop-main-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.pop-main-title a {
  color: var(--green-dark);
  text-decoration: none;
  transition: color 0.25s;
}

.pop-main-title a:hover {
  color: var(--green-mid);
}

.pop-main-title i {
  color: var(--gold);
  font-size: 1.5rem;
  vertical-align: middle;
  margin-left: 6px;
}

.pop-quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold-dark);
  font-weight: 600;
  margin-bottom: 18px;
  line-height: 1.6;
}

.pop-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px auto;
  color: var(--gold);
}

.pop-divider span {
  display: block;
  height: 1px;
  width: 60px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.pop-divider span:last-child {
  background: linear-gradient(90deg, var(--gold), transparent);
}

.pop-divider i {
  font-size: 1.1rem;
}

.pop-desc {
  font-size: 0.92rem;
  color: var(--gray-mid);
  line-height: 1.85;
}

/* ── 2×2 Grid ── */
.pop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* ── Card ── */
.pop-card {
  display: flex;
  flex-direction: row;
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 4px 28px rgba(180, 140, 0, 0.09),
    0 1px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(203, 170, 0, 0.15);
  border-top: 3px solid var(--gold);
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
}

.pop-card:hover {
  transform: translateY(-7px);
  box-shadow:
    0 22px 56px rgba(180, 140, 0, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.07);
  border-color: rgba(203, 170, 0, 0.5);
  border-top-color: var(--gold);
}

.pop-card-featured {
  border-top-width: 4px;
  box-shadow:
    0 8px 36px rgba(203, 170, 0, 0.22),
    0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ── Image ── */
.pop-img-wrap {
  position: relative;
  width: 210px;
  flex-shrink: 0;
  overflow: hidden;
}

.pop-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.55) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.pop-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s ease;
}

.pop-card:hover .pop-img-wrap img {
  transform: scale(1.07);
}

/* ── Badge ── */
.pop-badge {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 50px;
  line-height: 1;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.pop-badge-gold {
  background: var(--gold);
  color: #1a0f00;
}

.pop-badge-green {
  background: #16a34a;
  color: #fff;
}

.pop-badge-blue {
  background: #2563eb;
  color: #fff;
}

.pop-badge-orange {
  background: #ea580c;
  color: #fff;
}

/* Match Affordable badge color across all popular package badges */
.pop-badge-green,
.pop-badge-blue,
.pop-badge-orange {
  background: var(--gold);
  color: #1a0f00;
}

/* Days tag — bottom of image */
.pop-days-tag {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(11, 61, 46, 0.85);
  color: var(--white);
  font-family: var(--font-number);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 4px 14px;
  border-radius: 50px;
  white-space: nowrap;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── Content ── */
.pop-body {
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.pop-title {
  font-family: var(--font-heading);
  font-size: 1.22rem;
  font-weight: 900;
  -webkit-text-stroke: 0.4px currentColor;
  color: #1a2f28;
  margin: 0 -4px 12px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  background: linear-gradient(
    90deg,
    rgba(203, 170, 0, 0.22),
    rgba(203, 170, 0, 0.06)
  );
  border-left: 4px solid var(--gold);
  border-radius: 0 8px 8px 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pop-title-text {
  flex: 1 1 auto;
  min-width: 0;
}

.pop-title-tag {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid rgba(180, 83, 9, 0.2);
  padding: 4px 9px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  -webkit-text-stroke: 0;
}

.pop-title-tag i {
  font-size: 0.6rem;
  color: #b45309;
}

/* Price block */
.pop-price-block {
  display: flex;
  align-items: baseline;
  gap: 6px;
  background: linear-gradient(
    135deg,
    rgba(203, 170, 0, 0.09),
    rgba(203, 170, 0, 0.04)
  );
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  padding: 6px 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.pop-price-tag {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #7a5500;
  background: rgba(203, 170, 0, 0.18);
  border: 1px solid rgba(203, 170, 0, 0.4);
  padding: 4px 10px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  align-self: center;
}

.pop-price-tag i {
  font-size: 0.6rem;
  color: #7a5500;
}

.pop-price {
  font-family: var(--font-number);
  font-size: 1.65rem;
  font-weight: 700;
  color: #7a5500;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 1px;
}

.pop-rupee {
  font-size: 1.15rem;
  font-weight: 700;
}

.pop-slash {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--gray-mid);
}

.pop-pp {
  font-size: 0.68rem;
  color: var(--gray-mid);
  letter-spacing: 0.02em;
}

/* Info rows */
.pop-info-row {
  font-size: 0.8rem;
  color: var(--gray-dark);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.pop-info-row i {
  width: 22px;
  height: 22px;
  background: var(--green-pale);
  color: var(--green-mid);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  flex-shrink: 0;
}

/* Hotel tags */
.pop-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 10px 0;
}

.pop-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--green-dark);
  background: var(--green-pale);
  border: 1px solid rgba(11, 61, 46, 0.12);
  padding: 2px 7px;
  border-radius: 50px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.pop-tag i {
  font-size: 0.55rem;
  color: var(--green-mid);
}

.pop-tag-muted {
  color: #b45309;
  background: #fef3c7;
  border-color: rgba(180, 83, 9, 0.15);
}

.pop-tag-muted i {
  color: #b45309;
}

/* Action buttons */
.pop-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}

.pop-btn-details {
  flex: 1;
  text-align: center;
  background: transparent;
  color: var(--green-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  border: 2px solid var(--green-mid);
  transition: all 0.25s ease;
}

.pop-btn-details:hover {
  background: var(--green-dark);
  color: var(--white);
  border-color: var(--green-dark);
}

.pop-btn-book {
  flex: 1;
  text-align: center;
  background: linear-gradient(91deg, #b58e00, #e7d32e);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid #ead201;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.pop-btn-book:hover {
  background: linear-gradient(91deg, #e7d32e, #b58e00);
  border-color: #ead201;
  transform: translateY(-1px);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .pop-grid {
    grid-template-columns: 1fr;
  }

  .pop-img-wrap {
    width: 190px;
  }
}

@media (max-width: 600px) {
  .pop-card {
    flex-direction: column;
    border-left: none;
    border-top: 4px solid var(--green-mid);
  }

  .pop-card-featured {
    border-top-color: var(--gold);
  }

  .pop-img-wrap {
    width: 100%;
    height: 210px;
  }

  .pop-actions {
    flex-direction: column;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LUXURY UMRAH PACKAGES — Parallax fixed background
═══════════════════════════════════════════════════════════════ */

.lux-section {
  position: relative;
  background-image: url("../assets/img/lu-background.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  padding: 80px 0;
  overflow: hidden;
}

/* Soft overlay — image stays visible, but enough darkening for white text legibility */
.lux-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(5, 20, 12, 0.55) 0%,
    rgba(11, 40, 24, 0.48) 50%,
    rgba(20, 10, 0, 0.55) 100%
  );
  z-index: 0;
}

/* Gold geometric pattern on overlay */
.lux-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Tiled Islamic 8-pointed star (Rub el Hizb) — very subtle gold */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg fill='none' stroke='rgba(203,170,0,0.07)' stroke-width='0.8' stroke-linejoin='round'%3E%3Crect x='22' y='22' width='56' height='56' rx='2'/%3E%3Crect x='22' y='22' width='56' height='56' rx='2' transform='rotate(45 50 50)'/%3E%3Ccircle cx='50' cy='50' r='24'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100px 100px;
  pointer-events: none;
}

.lux-container {
  position: relative;
  z-index: 1;
}

/* ── Header ── */
.lux-header {
  text-align: center;
  max-width: 1150px;
  margin: 0 auto 52px;
}

.lux-tagline {
  color: #fff;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 10px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}

.lux-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 16px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}

.lux-title a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.25s;
}

.lux-title a:hover {
  color: var(--gold-light);
}

.lux-title i {
  font-size: 1.5rem;
  vertical-align: middle;
  margin-left: 6px;
}

.lux-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px auto;
  color: var(--gold);
}

.lux-divider span {
  display: block;
  height: 1px;
  width: 70px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.lux-divider span:last-child {
  background: linear-gradient(90deg, var(--gold), transparent);
}

.lux-divider i {
  font-size: 1.1rem;
}

.lux-desc {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.92rem;
  line-height: 1.85;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

/* ── 3-column grid ── */
.lux-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: start;
}

/* ── Card ── */
.lux-card {
  background: rgb(55, 51, 51);
  border: 1px solid rgba(203, 170, 0, 0.2);
  border-top: 2px solid rgba(203, 170, 0, 0.55);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(203, 170, 0, 0.12);
  transition: all 0.38s ease;
  position: relative;
}

.lux-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(203, 170, 0, 0.08);
  pointer-events: none;
  transition: box-shadow 0.38s ease;
}

.lux-card:hover {
  transform: translateY(-10px);
  border-top-color: var(--gold);
  border-color: rgba(203, 170, 0, 0.45);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.65),
    0 0 30px rgba(203, 170, 0, 0.1),
    inset 0 1px 0 rgba(203, 170, 0, 0.2);
}

.lux-card:hover::after {
  box-shadow: inset 0 0 0 1px rgba(203, 170, 0, 0.2);
}

/* Featured middle card */
.lux-card-featured {
  border-top: 2px solid var(--gold);
  border-color: rgba(203, 170, 0, 0.45);
  background: rgb(55, 51, 51);
  transform: translateY(-14px) scale(1.03);
  box-shadow:
    0 20px 56px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(203, 170, 0, 0.4),
    0 0 48px rgba(203, 170, 0, 0.1),
    inset 0 1px 0 rgba(203, 170, 0, 0.25);
}

.lux-card-featured:hover {
  transform: translateY(-22px) scale(1.03);
  box-shadow:
    0 36px 72px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(203, 170, 0, 0.6),
    0 0 60px rgba(203, 170, 0, 0.18),
    inset 0 1px 0 rgba(203, 170, 0, 0.3);
}

.lux-featured-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #b8920a, var(--gold), #b8920a);
  color: #1a0f00;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 22px;
  border-radius: 0 0 12px 12px;
  white-space: nowrap;
  z-index: 3;
  box-shadow: 0 4px 16px rgba(203, 170, 0, 0.4);
}

/* ── Image area ── */
.lux-card-img {
  position: relative;
  overflow: hidden;
  height: 248px;
}

.lux-card-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 30%,
    rgba(8, 4, 0, 0.72) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.lux-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
  filter: brightness(0.9);
}

.lux-card:hover .lux-card-img img {
  transform: scale(1.09);
  filter: brightness(1);
}

/* Price badge — centered tab at bottom of image */
.lux-price-tag {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(
    135deg,
    rgba(18, 10, 0, 0.96),
    rgba(50, 30, 0, 0.96)
  );
  border-top: 1.5px solid var(--gold);
  border-left: 1.5px solid rgba(203, 170, 0, 0.6);
  border-right: 1.5px solid rgba(203, 170, 0, 0.6);
  color: var(--gold);
  font-family: var(--font-number);
  font-weight: 700;
  padding: 8px 22px 10px;
  border-radius: 12px 12px 0 0;
  letter-spacing: 0.03em;
  line-height: 1.1;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 -4px 20px rgba(203, 170, 0, 0.18);
  text-align: center;
}

/* Price tag content (optional sub line) */
.lux-price-main {
  font-size: 1.2rem;
}

.lux-price-main span {
  font-size: 0.95rem;
  opacity: 0.85;
}

.lux-price-main .lux-price-pp {
  margin-left: 5px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-decoration: none;
  cursor: help;
  border-bottom: 0;
}

.lux-price-sub {
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
}

/* ── Card body ── */
.lux-card-body {
  padding: 22px 26px 28px;
  text-align: center;
}

.lux-card-title {
  font-family: var(--font-heading);
  font-size: 1.22rem;
  font-weight: 900;
  -webkit-text-stroke: 0.4px currentColor;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  border-bottom: 2px solid rgba(200, 157, 0, 0.35);
  padding-bottom: 8px;
}

.lux-card-sub {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 8px;
  margin-bottom: 22px;
  line-height: 1.55;
}

.lux-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.lux-btn {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(
    90deg,
    rgba(203, 170, 0, 0.12),
    rgba(203, 170, 0, 0.06)
  );
  border: 1px solid rgba(203, 170, 0, 0.45);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 11px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.28s ease;
  white-space: nowrap;
}

.lux-btn:hover {
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  border-color: var(--gold);
  color: #1a0f00;
  box-shadow: 0 6px 24px rgba(203, 170, 0, 0.35);
  transform: translateY(-2px);
}

.lux-btn-book {
  background: linear-gradient(91deg, #b58e00, #e7d32e);
  border: 1px solid #ead201;
  color: #fff;
  box-shadow: 0 6px 18px rgba(184, 134, 44, 0.3);
}

.lux-btn-book i {
  font-size: 0.95rem;
}

.lux-btn-book:hover {
  background: linear-gradient(91deg, #e7d32e, #b58e00);
  border-color: #ead201;
  color: #fff;
  box-shadow: 0 12px 28px rgba(184, 134, 44, 0.4);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .lux-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin: 0 auto;
  }

  .lux-card-featured {
    transform: none;
  }

  .lux-section {
    background-attachment: scroll;
    /* iOS fix */
  }
}

@media (max-width: 600px) {
  .lux-grid {
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   WHY TALBIYA UMRAH — Asymmetric Split Layout
═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════
   WHY TALBIYA UMRAH
════════════════════════════════════════════ */
.why-section {
  background:
    radial-gradient(
      900px 320px at 10% 0%,
      rgba(245, 202, 4, 0.14),
      transparent 62%
    ),
    radial-gradient(
      760px 320px at 95% 22%,
      rgba(11, 61, 46, 0.08),
      transparent 58%
    ),
    linear-gradient(180deg, #fbf9f5 0%, #f8f5f0 55%, #fbf9f5 100%);
  padding: 96px 0 90px;
  overflow: hidden;
  position: relative;
}

/* Subtle dot grid background */
.why-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(11, 61, 46, 0.055) 1px,
    transparent 1px
  );
  background-size: 28px 28px;
  pointer-events: none;
}

/* soft vignette + gold accent */
.why-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      520px 280px at 50% 10%,
      rgba(245, 202, 4, 0.08),
      transparent 65%
    ),
    radial-gradient(
      820px 420px at 50% 110%,
      rgba(0, 0, 0, 0.04),
      transparent 55%
    );
}

/* ── Heading area ── */
.why-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
  position: relative;
}

.why-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.3);
  padding: 5px 18px;
  border-radius: 50px;
  margin-bottom: 18px;
}

.why-title {
  font-family: var(--font-heading);
  font-size: clamp(2.15rem, 3.6vw, 2.85rem);
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.why-title em {
  font-style: italic;
  color: var(--gold-dark);
}

.why-subtitle {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--gray-mid);
  line-height: 1.75;
}

.why-flip-hint {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--gray-mid);
  margin: 14px 0 0;
  line-height: 1.5;
}

/* ── Feature cards — flip (matches about-us Vision / Mission / Promise) ── */
.why-vmp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.why-vmp-card {
  position: relative;
  height: 400px;
  perspective: 1600px;
  cursor: pointer;
  border-radius: 12px;
}

.why-vmp-card:focus {
  outline: none;
}

.why-vmp-card:focus-visible {
  outline: 2px solid rgba(203, 170, 0, 0.75);
  outline-offset: 4px;
}

.why-vmp-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.85s cubic-bezier(0.6, 0.05, 0.28, 1);
  transform-style: preserve-3d;
}

.why-vmp-card:hover .why-vmp-inner,
.why-vmp-card.flipped .why-vmp-inner {
  transform: rotateY(180deg);
}

.why-vmp-front,
.why-vmp-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 22px 48px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.why-vmp-front::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    110deg,
    transparent 35%,
    rgba(201, 168, 76, 0.22) 50%,
    transparent 65%
  );
  transform: skewX(-18deg);
  transition: left 1s cubic-bezier(0.2, 0.7, 0.3, 1);
  pointer-events: none;
}

.why-vmp-card:hover .why-vmp-front::after {
  left: 130%;
}

.why-vmp-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(
      circle at 18% 22%,
      rgba(245, 202, 4, 0.18),
      transparent 55%
    ),
    linear-gradient(135deg, var(--green-dark) 0%, var(--green-mid) 100%);
  color: #faf6ec;
  border-color: rgba(201, 168, 76, 0.35);
  justify-content: center;
  text-align: center;
}

.why-vmp-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(203, 170, 0, 0.85);
  pointer-events: none;
  transition:
    width 0.4s ease,
    height 0.4s ease;
  z-index: 3;
}

.why-vmp-corner.tl {
  top: 12px;
  left: 12px;
  border-right: none;
  border-bottom: none;
}
.why-vmp-corner.tr {
  top: 12px;
  right: 12px;
  border-left: none;
  border-bottom: none;
}
.why-vmp-corner.bl {
  bottom: 12px;
  left: 12px;
  border-right: none;
  border-top: none;
}
.why-vmp-corner.br {
  bottom: 12px;
  right: 12px;
  border-left: none;
  border-top: none;
}

.why-vmp-card:hover .why-vmp-corner {
  width: 30px;
  height: 30px;
}

.why-vmp-medal {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-pale) 0%, #fbecc2 100%);
  border: 1px solid rgba(201, 168, 76, 0.55);
  box-shadow:
    0 0 0 8px rgba(201, 168, 76, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  position: relative;
  transition: transform 0.6s cubic-bezier(0.5, 1.6, 0.4, 1);
}

.why-vmp-medal::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px dashed rgba(201, 168, 76, 0.45);
  transition: transform 1.4s ease;
}

.why-vmp-card:hover .why-vmp-medal {
  transform: scale(1.06) rotate(-5deg);
}

.why-vmp-card:hover .why-vmp-medal::before {
  transform: rotate(60deg);
}

.why-vmp-medal i {
  font-size: 1.85rem;
  background: linear-gradient(135deg, var(--gold) 0%, #a17e00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.why-vmp-front h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 600;
  color: var(--green-dark);
  margin: 0 0 6px;
  text-align: center;
  line-height: 1.25;
}

.why-vmp-tag {
  font-style: italic;
  color: var(--gold-dark);
  font-size: 0.88rem;
  margin-bottom: 12px;
  text-align: center;
}

.why-vmp-front p:not(.why-vmp-tag) {
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--gray-mid);
  text-align: center;
  margin: 0;
  flex: 1;
  overflow: auto;
}

.why-vmp-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.62rem;
  color: var(--gold-dark);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.88;
  white-space: nowrap;
}

.why-vmp-hint i {
  margin-right: 5px;
}

.why-vmp-back h3 {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  color: #fff;
  margin: 0 0 14px;
}

.why-vmp-back h3 em {
  font-style: italic;
  color: var(--gold);
}

.why-vmp-back blockquote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.93);
  max-width: 260px;
  margin: 0 auto;
  position: relative;
}

.why-vmp-back blockquote::before {
  content: "\201C";
  font-size: 2.6rem;
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold);
  line-height: 1;
  font-family: var(--font-heading);
}

@media (hover: none) {
  .why-vmp-card:hover .why-vmp-inner {
    transform: none;
  }

  .why-vmp-card.flipped .why-vmp-inner {
    transform: rotateY(180deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-vmp-inner {
    transition: none !important;
    transform: none !important;
  }

  .why-vmp-card.flipped .why-vmp-inner {
    transform: rotateY(180deg) !important;
  }
}

/* ── Stats strip ── */
.why-stats-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-dark);
  margin-top: 64px;
  padding: 36px 48px;
  gap: 0;
  position: relative;
}

.why-stat-block {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.why-stat-big {
  font-family: var(--font-number);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}

.why-stat-big sup {
  font-size: 1rem;
}

.why-stat-lbl {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.why-stat-sep {
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.why-discover-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: var(--green-dark);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 18px rgba(201, 168, 76, 0.35);
}

.why-discover-btn:hover {
  background: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .why-vmp-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 720px;
  }
}

@media (max-width: 1024px) {
  .why-vmp-card {
    height: 380px;
  }
}

@media (max-width: 600px) {
  .why-vmp-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  .why-vmp-card {
    height: auto;
    min-height: 360px;
  }

  .why-title {
    font-size: 1.9rem;
  }
}

@media (max-width: 600px) {
  .why-stats-strip {
    flex-wrap: wrap;
    gap: 24px;
    padding: 32px 24px;
  }

  .why-stat-sep {
    display: none;
  }

  .why-stat-block {
    flex: 1 1 40%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HOW WE ARE DIFFERENT — Full BG Image, Content Left
═══════════════════════════════════════════════════════════════ */

.hwd-section {
  position: relative;
  min-height: 540px;
  background-image: url("../assets/img/img3.png");
  background-color: #f1f1f0;
  /* Scale image to ~90% of the section height so the woman reads at a
     proportionate size instead of being blown up by `cover`. Right-anchored
     so she sits cleanly on the right half; the left fade gradient still
     masks anything that leaks behind the text column. */
  background-size: auto 90%;
  background-position: right center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 28px;
}

.hwd-section1 {
  position: relative;
  min-height: 540px;
  background-image: url("../assets/img/img2.jpeg");
  background-color: #f6f6f6;
  background-size: auto 93%;
  background-position: right -152px center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.12);
}

.hwd-section2 {
  position: relative;
  min-height: 540px;
  background-image: url("../assets/img/img3.jpeg");
  background-color: #fefefe;
  background-size: auto 98%;
  background-position: right 36px center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.12);
}

/* Left-side white-to-transparent fade so text is readable */
.hwd-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 42%,
    rgba(255, 255, 255, 0.85) 58%,
    rgba(255, 255, 255, 0.15) 76%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 0;
}

/* ── Left: Content ── */
.hwd-content {
  padding: 80px 40px 80px 80px;
  max-width: 52%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* Faint top-left green radial wash */
.hwd-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 320px;
  background: radial-gradient(
    ellipse at 0% 0%,
    rgba(11, 61, 46, 0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.hwd-quote-tag {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gray-dark);
  margin-bottom: 18px;
  display: block;
  position: relative;
  padding-left: 16px;
}

.hwd-quote-tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--green-mid), var(--gold));
  border-radius: 2px;
}

.hwd-heading {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.25;
  margin-bottom: 24px;
}

.hwd-heading em {
  font-style: normal;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.hwd-desc {
  font-size: 0.88rem;
  color: var(--gray-mid);
  line-height: 1.9;
  margin-bottom: 28px;
}

/* Pillar chips */
.hwd-pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}

.hwd-pillar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #ffffff;
  background: #be9908;
  border: 1px solid rgb(194 159 12);
  padding: 7px 16px;
  border-radius: 50px;
}

.hwd-pillar i {
  color: #ffffff;
  font-size: 0.75rem;
}

/* Action buttons */
.hwd-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hwd-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-dark);
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 13px 28px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 18px rgba(11, 61, 46, 0.25);
}

.hwd-btn-primary:hover {
  background: var(--green-mid);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(11, 61, 46, 0.35);
}

.hwd-btn-primary i {
  transition: transform 0.3s ease;
}

.hwd-btn-primary:hover i {
  transform: translateX(4px);
}

.hwd-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--green-dark);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 12px 24px;
  border-radius: 50px;
  text-decoration: none;
  border: 2px solid rgba(11, 61, 46, 0.2);
  transition: all 0.3s ease;
}

.hwd-btn-secondary:hover {
  border-color: var(--green-mid);
  background: var(--green-pale);
}

/* ── Right: Visual ── */
.hwd-visual {
  position: relative;
  background: linear-gradient(135deg, #f0f7f3 0%, #fdfcf5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 48px;
  overflow: hidden;
}

/* Subtle diagonal stripe bg */
.hwd-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(11, 61, 46, 0.025) 0px,
    rgba(11, 61, 46, 0.025) 1px,
    transparent 1px,
    transparent 28px
  );
  pointer-events: none;
}

/* Image frame */
.hwd-img-frame {
  position: relative;
  width: 100%;
  max-width: 420px;
  z-index: 1;
}

/* Outer decorative gold ring */
.hwd-img-ring {
  position: absolute;
  top: -14px;
  left: -14px;
  right: -14px;
  bottom: -14px;
  border: 2px dashed rgba(203, 170, 0, 0.35);
  border-radius: 32px;
  pointer-events: none;
}

/* Inner image container */
.hwd-img-inner {
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(11, 61, 46, 0.18),
    0 0 0 4px var(--white),
    0 0 0 6px rgba(203, 170, 0, 0.3);
  position: relative;
}

.hwd-img-inner img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.6s ease;
}

.hwd-img-frame:hover .hwd-img-inner img {
  transform: scale(1.04);
}

/* Trust badge pinned bottom-left */
.hwd-img-badge {
  position: absolute;
  bottom: -18px;
  left: -18px;
  background: var(--green-dark);
  color: var(--white);
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 28px rgba(11, 61, 46, 0.35);
  border: 3px solid var(--white);
  z-index: 2;
}

.hwd-img-badge i {
  color: var(--gold);
  font-size: 1.4rem;
  flex-shrink: 0;
}

.hwd-img-badge span {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
}

.hwd-img-badge strong {
  color: var(--gold);
  font-family: var(--font-number);
  font-size: 1rem;
  font-weight: 600;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .hwd-content {
    padding: 60px 40px 60px 48px;
  }

  .hwd-visual {
    padding: 48px 36px;
  }

  .hwd-heading {
    font-size: 1.7rem;
  }
}

@media (max-width: 768px) {
  .hwd-section {
    grid-template-columns: 1fr;
  }

  .hwd-content {
    padding: 56px 32px 48px;
    order: 2;
  }

  .hwd-visual {
    padding: 48px 32px 24px;
    order: 1;
  }

  .hwd-img-inner img {
    height: 300px;
  }
}

@media (max-width: 500px) {
  .hwd-content {
    padding: 44px 24px;
  }

  .hwd-heading {
    font-size: 1.5rem;
  }

  .hwd-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ─── LUXURY SECTION (old — kept for other selectors) ─────────── */
.luxury-section {
  position: relative;
  overflow: hidden;
}

.luxury-pattern {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpolygon points='50,5 56,30 80,30 60,46 67,71 50,55 33,71 40,46 20,30 44,30' fill='none' stroke='rgba(201,168,76,0.08)' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none;
}

.luxury-card {
  background: #0f1a14;
  border-color: rgba(201, 168, 76, 0.2);
}

.luxury-card .card-title {
  color: var(--gold-light);
}

.luxury-card .card-meta span {
  color: rgba(255, 255, 255, 0.6);
}

.luxury-card .card-features li {
  color: rgba(255, 255, 255, 0.8);
}

.luxury-card .card-features li i {
  color: var(--gold);
}

.luxury-card .card-footer {
  border-color: rgba(201, 168, 76, 0.15);
}

.gold-meta span {
  color: rgba(255, 255, 255, 0.7) !important;
}

.luxury-card:hover {
  border-color: rgba(201, 168, 76, 0.5);
  box-shadow: 0 8px 40px rgba(201, 168, 76, 0.15);
}

/* Featured card for popular packages section */
.card-featured {
  border-color: var(--gold) !important;
  box-shadow: 0 4px 28px rgba(203, 170, 0, 0.22) !important;
  position: relative;
}

.card-featured::after {
  content: "★ Most Popular";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 0 0 10px 10px;
  white-space: nowrap;
  z-index: 5;
}

.featured-luxury {
  transform: scale(1.04);
  border-color: var(--gold) !important;
  position: relative;
}

.featured-luxury:hover {
  transform: scale(1.04) translateY(-6px);
}

.luxury-featured-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: var(--black);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 18px;
  border-radius: 50px;
  white-space: nowrap;
  z-index: 10;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ─── RAMADAN SECTION ────────────────────────────────────────── */
.ramadan-overlay {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='60' cy='60' r='55' fill='none' stroke='rgba(201,168,76,0.04)' stroke-width='1'/%3E%3Cpolygon points='60,8 66,36 94,36 72,52 80,80 60,63 40,80 48,52 26,36 54,36' fill='none' stroke='rgba(201,168,76,0.05)' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none;
}

.ramadan-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

.ramadan-card .card-title {
  color: var(--white);
}

.ramadan-card .card-meta span {
  color: rgba(255, 255, 255, 0.65);
}

.ramadan-card .card-features li {
  color: rgba(255, 255, 255, 0.8);
}

.ramadan-card .card-features li i {
  color: var(--gold-light);
}

.ramadan-card .card-footer {
  border-color: rgba(255, 255, 255, 0.1);
}

.ramadan-card .price-amount {
  color: var(--gold-light);
}

.ramadan-card .price-from,
.ramadan-card .price-pp {
  color: rgba(255, 255, 255, 0.5);
}

.ramadan-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(201, 168, 76, 0.4);
}

/* Countdown */
.countdown-wrapper {
  text-align: center;
  margin-bottom: 52px;
}

.countdown-label {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 16px;
}

.countdown-timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: var(--radius-lg);
  padding: 20px 36px;
  backdrop-filter: blur(8px);
}

.countdown-unit {
  text-align: center;
  min-width: 56px;
}

.count-number {
  display: block;
  font-family: var(--font-number);
  font-size: 3rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  letter-spacing: 0.02em;
}

.count-label {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
}

.countdown-sep {
  font-size: 2rem;
  color: var(--gold);
  opacity: 0.5;
  margin-bottom: 16px;
}

.seats-alert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ff6b6b;
  font-weight: 600;
  font-size: 0.88rem;
  margin-top: 16px;
  background: rgba(239, 68, 68, 0.1);
  padding: 6px 20px;
  border-radius: 50px;
  border: 1px solid rgba(239, 68, 68, 0.2);
  animation: pulse-badge 2s infinite;
}

/* ════════════════════════════════════════════
   RAMADAN UMRAH PACKAGES — new design
════════════════════════════════════════════ */
.pkg-inclusions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 18px;
  padding: 0;
  list-style: none;
}

.pkg-inclusions--center {
  justify-content: center;
}

.pkg-inclusions li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
  font-weight: 600;
  color: rgba(45, 45, 45, 0.85);
  background: rgba(11, 61, 46, 0.06);
  border: 1px solid rgba(11, 61, 46, 0.12);
  padding: 6px 12px;
  border-radius: 999px;
  line-height: 1;
}

.pkg-inclusions li i {
  color: var(--gold-dark);
  font-size: 0.78rem;
}

/* Ramadan cards: 3 chips per row × 2 rows */
.ram-card .pkg-inclusions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 6px;
  overflow: visible;
}

/* Umrah Land cards — inclusion list as a plain 2-column icon+label grid
   (no colored pill backgrounds). Icons on the left of each label. */
#land-packages .corp-card .pkg-inclusions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  margin: 4px 0 14px;
  overflow: visible;
  list-style: none;
  padding: 0;
}
#land-packages .corp-card .pkg-inclusions li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 600;
  color: #2c2c2c;
  padding: 0;
  background: none;
  border: 0;
  min-width: 0;
}
#land-packages .corp-card .pkg-inclusions li i {
  font-size: 1rem;
  color: #2c2c2c;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
@media (max-width: 480px) {
  #land-packages .corp-card .pkg-inclusions {
    gap: 8px 14px;
  }
}

.ram-card .pkg-inclusions li {
  justify-content: center;
  white-space: nowrap;
  font-size: 0.62rem;
  padding: 5px 8px;
  gap: 5px;
  font-weight: 600;
  color: var(--green-dark);
  background: var(--green-pale);
  border-color: rgba(11, 61, 46, 0.12);
  min-width: 0;
}

.ram-card .pkg-inclusions li i {
  font-size: 0.65rem;
  color: var(--green-mid);
  flex-shrink: 0;
}

@media (max-width: 420px) {
  .ram-card .pkg-inclusions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ram-section {
  background-color: #f8f5f0;
  /* Repeating crescent + lantern + star tile */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='rgba(203,170,0,0.13)' stroke-width='1'%3E%3C!-- crescent moon --%3E%3Cpath d='M38 22 C22 22 12 34 12 48 C12 62 22 74 38 74 C30 70 24 60 24 48 C24 36 30 26 38 22 Z' stroke='none' fill='rgba(203,170,0,0.11)'/%3E%3C!-- 8pt star top-right --%3E%3Cpolygon points='118,18 120.5,26 129,26 122.5,31 125,39 118,34 111,39 113.5,31 107,26 115.5,26' stroke-width='0.9'/%3E%3C!-- lantern body --%3E%3Cellipse cx='118' cy='105' rx='11' ry='16' stroke-width='0.9'/%3E%3Cline x1='118' y1='89' x2='118' y2='83'/%3E%3Cline x1='107' y1='121' x2='129' y2='121'/%3E%3Cline x1='118' y1='121' x2='115' y2='130'/%3E%3Cline x1='113' y1='95' x2='123' y2='95' stroke-width='0.7'/%3E%3Cline x1='111' y1='105' x2='125' y2='105' stroke-width='0.7'/%3E%3Cline x1='113' y1='115' x2='123' y2='115' stroke-width='0.7'/%3E%3C!-- small dots / stars --%3E%3Ccircle cx='70' cy='35' r='1.5' fill='rgba(203,170,0,0.18)' stroke='none'/%3E%3Ccircle cx='20' cy='110' r='1.2' fill='rgba(203,170,0,0.15)' stroke='none'/%3E%3Ccircle cx='145' cy='60' r='1' fill='rgba(203,170,0,0.14)' stroke='none'/%3E%3Ccircle cx='55' cy='140' r='1.3' fill='rgba(203,170,0,0.13)' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 160px 160px;
  background-repeat: repeat;
  padding: 88px 0 160px;
  position: relative;
  overflow: hidden;
}

.ram-kaaba {
  position: absolute;
  z-index: 0;
  color: rgba(203, 170, 0, 0.14);
  pointer-events: none;
  filter: blur(0.1px);
}

.ram-kaaba i {
  font-size: 54px;
}

.ram-kaaba-1 {
  top: 120px;
  left: 6%;
  transform: rotate(-10deg);
  opacity: 0.55;
}

.ram-kaaba-2 {
  top: 260px;
  right: 10%;
  transform: rotate(12deg);
  opacity: 0.45;
}

.ram-kaaba-3 {
  bottom: 220px;
  left: 18%;
  transform: rotate(6deg);
  opacity: 0.35;
}

.ram-kaaba-4 {
  bottom: 170px;
  right: 18%;
  transform: rotate(-8deg);
  opacity: 0.35;
}

.ram-section .container {
  position: relative;
  z-index: 1;
}

.ram-deco {
  display: none;
}

/* Crescent moon + stars — top right */
.ram-section::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -60px;
  width: 480px;
  height: 480px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cg%3E%3Cpath d='M200 22 C112 22 52 92 52 180 C52 268 112 338 200 338 C156 316 128 254 128 180 C128 106 156 44 200 22 Z' fill='rgba(203,170,0,0.14)'/%3E%3Ccircle cx='242' cy='62' r='4' fill='rgba(203,170,0,0.35)'/%3E%3Ccircle cx='265' cy='125' r='2.5' fill='rgba(203,170,0,0.25)'/%3E%3Ccircle cx='46' cy='98' r='3' fill='rgba(203,170,0,0.2)'/%3E%3Ccircle cx='38' cy='210' r='2' fill='rgba(203,170,0,0.15)'/%3E%3Ccircle cx='260' cy='180' r='1.8' fill='rgba(203,170,0,0.2)'/%3E%3Cpath d='M236 88 L238.5 81 L241 88 L248 90.5 L241 93 L238.5 100 L236 93 L229 90.5 Z' fill='rgba(203,170,0,0.45)'/%3E%3Cpath d='M58 155 L59.5 150 L61 155 L66 157 L61 159 L59.5 164 L58 159 L53 157 Z' fill='rgba(203,170,0,0.3)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

/* Mosque panorama skyline — bottom left */
.ram-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 200' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='rgba(203,170,0,0.1)' stroke='rgba(203,170,0,0.06)' stroke-width='0.5'%3E%3Crect x='20' y='95' width='12' height='105'/%3E%3Cpolygon points='20,95 26,62 32,95'/%3E%3Crect x='15' y='88' width='22' height='8' rx='1'/%3E%3Crect x='60' y='125' width='120' height='75'/%3E%3Cpath d='M60 125 Q120 62 180 125 Z'/%3E%3Cpath d='M60 125 Q85 102 110 125 Z'/%3E%3Cpath d='M130 125 Q155 102 180 125 Z'/%3E%3Crect x='52' y='95' width='12' height='105'/%3E%3Cpolygon points='52,95 58,62 64,95'/%3E%3Crect x='176' y='95' width='12' height='105'/%3E%3Cpolygon points='176,95 182,62 188,95'/%3E%3Crect x='275' y='110' width='10' height='90'/%3E%3Cpolygon points='275,110 280,84 285,110'/%3E%3Crect x='380' y='100' width='320' height='100'/%3E%3Cpath d='M380 100 Q540 14 700 100 Z'/%3E%3Cpath d='M380 100 Q435 68 490 100 Z'/%3E%3Cpath d='M590 100 Q645 68 700 100 Z'/%3E%3Crect x='358' y='48' width='18' height='152'/%3E%3Cpolygon points='358,48 367,12 376,48'/%3E%3Crect x='355' y='36' width='24' height='12' rx='1'/%3E%3Crect x='702' y='48' width='18' height='152'/%3E%3Cpolygon points='702,48 711,12 720,48'/%3E%3Crect x='699' y='36' width='24' height='12' rx='1'/%3E%3Cpath d='M531 22 A11 11 0 1 1 552 36 A7 7 0 1 0 531 22 Z'/%3E%3Crect x='748' y='115' width='10' height='85'/%3E%3Cpolygon points='748,115 753,89 758,115'/%3E%3Crect x='818' y='108' width='10' height='92'/%3E%3Cpolygon points='818,108 823,82 828,108'/%3E%3Crect x='890' y='125' width='130' height='75'/%3E%3Cpath d='M890 125 Q955 62 1020 125 Z'/%3E%3Crect x='882' y='95' width='12' height='105'/%3E%3Cpolygon points='882,95 888,62 894,95'/%3E%3Crect x='1018' y='95' width='12' height='105'/%3E%3Cpolygon points='1018,95 1024,62 1030,95'/%3E%3Crect x='1068' y='112' width='10' height='88'/%3E%3Cpolygon points='1068,112 1073,86 1078,112'/%3E%3Crect x='1118' y='100' width='12' height='100'/%3E%3Cpolygon points='1118,100 1124,68 1130,100'/%3E%3Crect x='1114' y='94' width='20' height='8' rx='1'/%3E%3Crect x='1200' y='118' width='110' height='82'/%3E%3Cpath d='M1200 118 Q1255 62 1310 118 Z'/%3E%3Crect x='1308' y='95' width='10' height='105'/%3E%3Cpolygon points='1308,95 1313,68 1318,95'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

/* ── Header ── */
.ram-header {
  text-align: center;
  margin: 0 auto 52px;
}

.ram-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.3);
  padding: 6px 18px;
  border-radius: 50px;
  margin-bottom: 16px;
}

.ram-eyebrow-icon {
  width: 14px;
  height: 14px;
  color: var(--gold-dark);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.ram-title {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 16px;
  line-height: 1.2;
}

.ram-title a {
  color: inherit;
  text-decoration: none;
}

.ram-title a:hover {
  color: var(--gold-dark);
}

.ram-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--gray-mid);
  line-height: 1.75;
  max-width: 1050px;
  margin: 0 auto;
}

/* ── Slider wrapper ── */
.ram-slider-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ram-track-outer {
  flex: 1;
  overflow: hidden;
}

.ram-track {
  display: flex;
  gap: 24px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* ── Card ── */
.ram-card {
  flex: 0 0 calc((100% - 48px) / 3);
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(11, 61, 46, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.ram-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(11, 61, 46, 0.15);
}

.ram-card-img {
  height: 280px;
  position: relative;
  background-size: cover;
  background-position: center;
}

.ram-img-1 {
  background-image: url("../assets/img/1st-20days-ramadan-umrah-package.jpg");
}

.ram-img-2 {
  background-image: url("../assets/img/last-18days-ramadan-umrah-package.jpg");
}

.ram-img-3 {
  background-image: url("../assets/img/rp-3.jpg");
}

.ram-img-4 {
  background-image: url("../assets/img/rp-6.jpg");
}

.ram-img-5 {
  background-image: url("../assets/img/rp-7.jpg");
}

.ram-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 31, 21, 0.85) 0%,
    transparent 60%
  );
}

.ram-price-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--gold);
  color: #0a1f15;
  font-family: var(--font-number);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 50px;
  z-index: 1;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.ram-card-body {
  padding: 24px 24px 28px;
}

.ram-duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.ram-card-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 900;
  -webkit-text-stroke: 0.4px currentColor;
  color: var(--green-dark);
  line-height: 1.4;
  margin-bottom: 20px;
  border-bottom: 2px solid rgba(200, 157, 0, 0.25);
  padding-bottom: 8px;
}

.ram-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--green-dark);
  border: 1px solid var(--green-dark);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.25s ease;
  white-space: nowrap;
  flex: 1;
}

.ram-btn:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: var(--white);
}

.ram-actions {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  align-items: center;
}

.ram-btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #25d366;
  border: 1px solid #25d366;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.25s ease;
  white-space: nowrap;
  flex: 1;
}

.ram-btn-wa:hover {
  background: #1eb057;
  border-color: #1eb057;
}

/* ── Arrows ── */
.ram-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(11, 61, 46, 0.2);
  background: var(--white);
  color: var(--green-dark);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.ram-arrow:hover {
  background: var(--green-dark);
  color: var(--white);
  border-color: var(--green-dark);
}

/* ── Dots ── */
.ram-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}

.ram-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(11, 61, 46, 0.18);
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
}

.ram-dot.active {
  background: var(--green-dark);
  width: 24px;
  border-radius: 4px;
}

@media (max-width: 900px) {
  .ram-card {
    flex: 0 0 calc((100% - 24px) / 2);
  }
}

@media (max-width: 600px) {
  .ram-card {
    flex: 0 0 100%;
  }

  .ram-title {
    font-size: 1.8rem;
  }
}

/* ════════════════════════════════════════════
   HAJJ PACKAGES 2026
════════════════════════════════════════════ */
.hajj-section {
  background-color: #fdfaf5;
  /* Minimal crescent + star tile */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M60 18 C48 18 40 27 40 38 C40 49 48 58 60 58 C53 54 48 47 48 38 C48 29 53 22 60 18 Z' fill='rgba(203%2C170%2C0%2C0.09)'/%3E%3Cpolygon points='74%2C22 75.2%2C26.5 80%2C26.5 76.2%2C29.3 77.4%2C34 74%2C31.5 70.6%2C34 71.8%2C29.3 68%2C26.5 72.8%2C26.5' fill='rgba(203%2C170%2C0%2C0.12)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  background-repeat: repeat;
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}

.hajj-header {
  text-align: center;
  margin-bottom: 52px;
}

.hajj-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.3);
  padding: 6px 18px;
  border-radius: 50px;
  margin-bottom: 16px;
}

.hajj-eyebrow-icon {
  width: 14px;
  height: 14px;
  color: var(--gold-dark);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.hajj-title {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 16px;
  line-height: 1.2;
}

.hajj-title a {
  color: inherit;
  text-decoration: none;
}

.hajj-title a:hover {
  color: var(--gold-dark);
}

.hajj-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--gray-mid);
  line-height: 1.75;
  max-width: 1050px;
  margin: 0 auto;
}

/* ── 4-column card grid ── */
.hajj-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.hajj-card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(11, 61, 46, 0.08);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.hajj-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(11, 61, 46, 0.15);
}

.hajj-card-img {
  height: 240px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.hajj-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11, 61, 46, 0.75) 0%,
    transparent 55%
  );
}

.hajj-cat-tag,
.hajj-days-tag {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--green-dark);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 50px;
  z-index: 2;
  letter-spacing: 0.02em;
  max-width: calc(100% - 32px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.hajj-days-tag {
  font-family: var(--font-number);
  font-size: 0.82rem;
}

/* Umrah with Holiday cards — 3-line meta strip sitting on the bottom of the
 * image: 15 Days Package · 09 N Makkah / 05 N Madina · 03 N Destination. */
.hajj-card-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
.hajj-card-meta > div {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.hajj-card-meta i {
  color: #ffd955;
  font-size: 0.85em;
  margin-right: 2px;
}

.hajj-card-body {
  padding: 20px 20px 24px;
}

.hajj-price-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: nowrap;
}

.hajj-price-block {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
}

.hajj-card-body > .hajj-price-block {
  margin-bottom: 10px;
}

#iraq-ziyarat .hajj-price-block {
  flex-direction: column;
  align-items: flex-start;
  row-gap: 4px;
}

/* Umrah With Holiday — Sharing pill sits AFTER (right of) the price on
   the same row. */
#umrah-holiday .hajj-price-block {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  column-gap: 10px;
  row-gap: 0;
}
#umrah-holiday .hajj-sharing {
  background: rgba(203, 170, 0, 0.15);
  color: var(--gold-dark);
  border: 1px solid rgba(203, 170, 0, 0.4);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.hajj-duration {
  flex: 0 0 auto;
  font-family: var(--font-number);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--green-dark);
  background: var(--gold);
  padding: 6px 14px;
  border-radius: 999px;
  line-height: 1.2;
  white-space: nowrap;
}

.hajj-price {
  font-family: var(--font-number);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.2;
}

.hajj-sharing {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-mid);
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.hajj-card-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.35;
  margin-bottom: 16px;
  border-bottom: 2px solid rgba(200, 157, 0, 0.25);
  padding-bottom: 8px;
}

#hajj-packages .hajj-card-title {
  font-size: 1.15rem;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hajj-actions {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

.hajj-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-dark);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.25s ease;
  border: 1px solid var(--green-dark);
  white-space: nowrap;
  flex: 1;
  justify-content: center;
}

.hajj-btn:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
}

.hajj-btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #25d366;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.25s ease;
  border: 1px solid #25d366;
  white-space: nowrap;
  flex: 1;
  justify-content: center;
}

.hajj-btn-wa:hover {
  background: #1eb057;
  border-color: #1eb057;
}

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

@media (max-width: 600px) {
  .hajj-grid {
    grid-template-columns: 1fr;
  }

  .hajj-title {
    font-size: 1.9rem;
  }
}

/* ════════════════════════════════════════════
   UMRAH WITH HOLIDAY PACKAGES
════════════════════════════════════════════ */
.uwh-section {
  background-color: #fdf6ee;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-opacity='0.10' stroke-width='1'%3E%3Ccircle cx='50' cy='50' r='30'/%3E%3Ccircle cx='50' cy='50' r='20'/%3E%3Ccircle cx='50' cy='50' r='10'/%3E%3Cline x1='50' y1='20' x2='50' y2='80'/%3E%3Cline x1='20' y1='50' x2='80' y2='50'/%3E%3Cline x1='29' y1='29' x2='71' y2='71'/%3E%3Cline x1='71' y1='29' x2='29' y2='71'/%3E%3Cpolygon points='50,20 56,38 75,38 60,49 66,68 50,57 34,68 40,49 25,38 44,38' stroke-width='0.7' stroke-opacity='0.07'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
  padding: 88px 0 80px;
}

/* ════════════════════════════════════════════
   CORPORATE SHORT STAY UMRAH PACKAGES
════════════════════════════════════════════ */
.corp-section {
  background-color: #fdfaf5;
  /* Match Hajj section — minimal crescent + star tile */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M60 18 C48 18 40 27 40 38 C40 49 48 58 60 58 C53 54 48 47 48 38 C48 29 53 22 60 18 Z' fill='rgba(203%2C170%2C0%2C0.09)'/%3E%3Cpolygon points='74%2C22 75.2%2C26.5 80%2C26.5 76.2%2C29.3 77.4%2C34 74%2C31.5 70.6%2C34 71.8%2C29.3 68%2C26.5 72.8%2C26.5' fill='rgba(203%2C170%2C0%2C0.12)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  background-repeat: repeat;
  padding: 88px 0 80px;
}

.corp-header {
  text-align: center;
  margin-bottom: 52px;
}

.corp-question {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold-dark);
  margin: 0 0 6px;
  letter-spacing: 0.01em;
}

.corp-question i {
  margin-right: 8px;
  font-size: 1rem;
}

.corp-title {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--green-dark);
  margin: 16px 0 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.corp-subtitle-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(245, 202, 4, 0.14);
  border: 1px solid rgba(245, 202, 4, 0.32);
  color: #1b1b1b;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}

.corp-title a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}

.corp-title a:hover {
  color: var(--gold-dark);
}

.corp-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #555;
  max-width: 1050px;
  margin: 0 auto;
  line-height: 1.75;
}

/* Corporate Short Stay cards — new compact layout */
.corp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: stretch;
}
/* Land Only Umrah — carousel: 4 cards visible at a time, prev/next arrows,
 * auto-plays every 4s. Track holds all 5 (or more) cards; only viewport-worth
 * shows; JS translates the track by one card-width per step. */
.land-slider-wrap {
  position: relative;
  padding: 0 56px; /* room for the arrows */
}
.land-viewport {
  overflow: hidden;
  width: 100%;
}
#land-packages .corp-grid {
  display: flex !important;
  flex-wrap: nowrap;
  grid-template-columns: none;
  gap: 18px;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change: transform;
}
#land-packages .corp-card {
  display: flex !important;
  flex-direction: column;
  flex: 0 0 calc((100% - 3 * 18px) / 4); /* 4 cards visible per view */
  min-width: 0;
}
.land-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: #0d2b16;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 10px 24px rgba(11, 61, 46, 0.16);
  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}
.land-arrow:hover {
  background: linear-gradient(135deg, #e8c358 0%, #c89d00 100%);
  transform: translateY(-50%) scale(1.05);
}
.land-prev {
  left: 0;
}
.land-next {
  right: 0;
}

@media (max-width: 1100px) {
  .land-slider-wrap {
    padding: 0 44px;
  }
  #land-packages .corp-card {
    flex: 0 0 calc((100% - 18px) / 2); /* 2 visible on tablet */
  }
}
@media (max-width: 640px) {
  .land-slider-wrap {
    padding: 0 34px;
  }
  #land-packages .corp-card {
    flex: 0 0 100%; /* 1 visible on mobile */
  }
  .land-arrow {
    width: 40px;
    height: 40px;
  }
}

.corp-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(11, 61, 46, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.corp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(11, 61, 46, 0.14);
  border-color: rgba(201, 168, 76, 0.3);
}

.corp-card-img {
  position: relative;
  height: 170px;
  background-size: cover;
  background-position: center;
}

.corp-card-img::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
}

.corp-card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  background: #fff;
  color: #7a5500;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.corp-card-tag--dark {
  background: #fff;
  color: #7a5500;
}

.corp-card-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
.corp-card-meta > div {
  display: flex;
  align-items: center;
  gap: 6px;
}
.corp-card-meta i {
  font-size: 0.82rem;
  color: #ffd955;
  margin-right: 2px;
}

.corp-card-body {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: left;
}

.corp-card-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0 0 8px;
  line-height: 1.35;
}

.corp-card-sub {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.7;
  color: #6a6a6a;
  margin: 0 0 16px;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  min-height: 3.2em;
}

.corp-card-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.corp-card-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: #3a3a3a;
  line-height: 1.5;
}

.corp-card-list li i {
  width: 16px;
  flex-shrink: 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--green-mid);
}

.corp-card-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.corp-card-price {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.corp-card-from {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #9a9a9a;
  margin-bottom: 4px;
}

.corp-card-price strong {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--green-dark);
  letter-spacing: 0.01em;
}
.corp-slash,
.pop-slash,
.price-slash {
  font-size: 0.75em;
  margin-left: 1px;
}

.corp-card-pp {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  color: #9a9a9a;
  margin-top: 5px;
}

.corp-card-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: transparent;
  color: var(--green-dark);
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.corp-card-view:hover {
  background: var(--green-dark);
  color: #fff;
  border-color: var(--green-dark);
  transform: translateY(-1px);
}

.corp-card-view--dark {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}

.corp-card-view--dark:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* Corporate Short Stay & Umrah Land — slightly tighter typography so 4-column layout aligns cleanly */
#corporate-packages .corp-card-body,
#land-packages .corp-card-body {
  padding: 20px 18px 18px;
}
#corporate-packages .corp-card-title,
#land-packages .corp-card-title {
  font-size: 1rem;
  line-height: 1.3;
  margin-bottom: 6px;
}
#corporate-packages .corp-card-sub,
#land-packages .corp-card-sub {
  font-size: 0.82rem;
  line-height: 1.65;
  margin-bottom: 14px;
  min-height: 3.3em;
}
#corporate-packages .corp-card-list,
#land-packages .corp-card-list {
  gap: 6px;
  margin-bottom: 14px;
}
#corporate-packages .corp-card-list li,
#land-packages .corp-card-list li {
  font-size: 0.84rem;
  gap: 9px;
  line-height: 1.45;
}
#corporate-packages .corp-card-list li i,
#land-packages .corp-card-list li i {
  font-size: 0.8rem;
  width: 15px;
}
#corporate-packages .corp-card-meta,
#land-packages .corp-card-meta {
  font-size: 0.74rem;
  gap: 7px;
}
#corporate-packages .corp-card-meta i,
#land-packages .corp-card-meta i {
  font-size: 0.78rem;
}
#corporate-packages .corp-card-tag,
#land-packages .corp-card-tag {
  font-size: 0.62rem;
  padding: 6px 14px;
}
#corporate-packages .corp-card-from,
#land-packages .corp-card-from {
  font-size: 0.6rem;
  margin-bottom: 3px;
}
#corporate-packages .corp-card-price strong,
#land-packages .corp-card-price strong {
  font-size: 1.08rem;
}
#corporate-packages .corp-card-pp,
#land-packages .corp-card-pp {
  font-size: 0.66rem;
  margin-top: 4px;
}
#corporate-packages .corp-card-view,
#land-packages .corp-card-view {
  font-size: 0.78rem;
  padding: 9px 18px;
}
#corporate-packages .corp-card-foot,
#land-packages .corp-card-foot {
  gap: 10px;
}

/* Corporate Short Stay & Umrah Land — bolder/bigger titles, 2-col inclusions, dual action buttons */
#corporate-packages .corp-card-title,
#land-packages .corp-card-title {
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 0.005em;
  margin-bottom: 10px;
  line-height: 1.25;
}
#corporate-packages .corp-card-list {
  grid-template-columns: repeat(2, 1fr);
  column-gap: 14px;
  row-gap: 8px;
  margin-bottom: 16px;
}
#land-packages .corp-card-list {
  grid-template-columns: repeat(3, 1fr);
  column-gap: 10px;
  row-gap: 8px;
  margin-bottom: 16px;
}
/* Corporate Short Stay + Umrah Land — horizontal: stacked View More / Book Now (left) + DEAL PRICE block (right) */
#corporate-packages .corp-card-foot,
#land-packages .corp-card-foot {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#corporate-packages .corp-card-actions,
#land-packages .corp-card-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-shrink: 0;
}
#corporate-packages .corp-card-actions .hajj-btn,
#corporate-packages .corp-card-actions .hajj-btn-wa,
#land-packages .corp-card-actions .hajj-btn,
#land-packages .corp-card-actions .hajj-btn-wa {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 6px;
  min-width: 104px;
  flex: 0 0 auto;
  white-space: nowrap;
  justify-content: center;
}
#corporate-packages .corp-card-actions .hajj-btn,
#land-packages .corp-card-actions .hajj-btn {
  background: #fff;
  color: var(--green-dark);
  border: 1.5px solid var(--green-dark);
}
#corporate-packages .corp-card-actions .hajj-btn:hover,
#land-packages .corp-card-actions .hajj-btn:hover {
  background: var(--green-dark);
  color: #fff;
  border-color: var(--green-dark);
}
#corporate-packages .corp-card-actions .hajj-btn-wa,
#land-packages .corp-card-actions .hajj-btn-wa {
  background: #25d366;
  color: #fff;
  border: 1.5px solid #25d366;
}
#corporate-packages .corp-card-actions .hajj-btn-wa:hover,
#land-packages .corp-card-actions .hajj-btn-wa:hover {
  background: #1eb057;
  border-color: #1eb057;
}
#corporate-packages .corp-card-price,
#land-packages .corp-card-price {
  align-items: flex-end;
  text-align: right;
  line-height: 1.1;
}
#corporate-packages .corp-card-from,
#land-packages .corp-card-from {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: #7a7a7a;
  margin-bottom: 5px;
}
#corporate-packages .corp-card-price strong,
#land-packages .corp-card-price strong {
  font-size: 1.3rem;
  color: var(--green-mid);
  font-weight: 800;
  letter-spacing: 0.01em;
}
#corporate-packages .corp-card-pp,
#land-packages .corp-card-pp {
  font-size: 0.66rem;
  color: #8a8a8a;
  margin-top: 4px;
}

/* At 1-card width, stack the foot vertically so it doesn't look cramped */
@media (max-width: 560px) {
  #corporate-packages .corp-card-foot,
  #land-packages .corp-card-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  #corporate-packages .corp-card-actions,
  #land-packages .corp-card-actions {
    flex-direction: row;
    width: 100%;
  }
  #corporate-packages .corp-card-actions .hajj-btn,
  #corporate-packages .corp-card-actions .hajj-btn-wa,
  #land-packages .corp-card-actions .hajj-btn,
  #land-packages .corp-card-actions .hajj-btn-wa {
    flex: 1;
    min-width: 0;
  }
  #corporate-packages .corp-card-price,
  #land-packages .corp-card-price {
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 1100px) {
  .corp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* on tablet the cards have more room — return them to default scale */
  #corporate-packages .corp-card-title,
  #land-packages .corp-card-title {
    font-size: 1.55rem;
  }
  #corporate-packages .corp-card-sub,
  #land-packages .corp-card-sub {
    font-size: 0.88rem;
  }
  #corporate-packages .corp-card-list li,
  #land-packages .corp-card-list li {
    font-size: 0.9rem;
  }
  #corporate-packages .corp-card-actions .hajj-btn,
  #corporate-packages .corp-card-actions .hajj-btn-wa,
  #land-packages .corp-card-actions .hajj-btn,
  #land-packages .corp-card-actions .hajj-btn-wa {
    font-size: 0.78rem;
    padding: 10px 16px;
  }
}

@media (max-width: 560px) {
  .corp-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .corp-card-img {
    height: 180px;
  }
}

@media (max-width: 600px) {
  .corp-title {
    font-size: 1.9rem;
  }

  .corp-subtitle-badge {
    display: inline-flex;
    margin: 0 auto;
  }
}

/* ════════════════════════════════════════════
   LAND-ONLY UMRAH — Reference look (cream, ornament, italic gold title)
════════════════════════════════════════════ */
#land-packages {
  background-color: #f3e9d3;
  background-image: none;
}

#land-packages .land-header {
  text-align: center;
  max-width: 1150px;
  margin: 0 auto 56px;
}

#land-packages .land-ornament {
  color: var(--gold-dark);
  margin: 0 auto 16px;
  display: flex;
  justify-content: center;
}

#land-packages .land-eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--gold-dark);
  text-transform: uppercase;
  margin: 0 0 18px;
}

/* Warmer cream section background so the title sits on the beige tone
   shown in the reference (Image #13), not the near-white default cream. */
#land-packages.corp-section {
  background-color: #f5eed6;
}

#land-packages .land-title {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 600;
  /* Base title in dark charcoal (was dark-green — didn't match ref) so
     "Land-Only Umrah," reads as neutral dark and the italic gold "Without
     Flight" em stays as the only colored accent. */
  color: #2c2c2c;
  line-height: 1.2;
  margin: 0 0 18px;
}

#land-packages .land-title a {
  color: inherit;
  text-decoration: none;
}

#land-packages .land-title em {
  font-style: italic;
  font-family: var(--font-heading);
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
}

#land-packages .land-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #6a6a6a;
  line-height: 1.75;
  margin: 0 auto;
  max-width: 1050px;
}

/* Bullet list — single column, small green dots */
#land-packages .corp-card-list {
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

#land-packages .corp-card-list li {
  font-size: 0.88rem;
  color: #3a3a3a;
  font-weight: 500;
}

#land-packages .corp-card-list li i {
  font-size: 0.42rem;
  color: var(--gold-dark);
  width: 12px;
}

@media (max-width: 768px) {
  #land-packages .land-title {
    font-size: 2rem;
  }
  #land-packages .land-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
  }
}

/* ════════════════════════════════════════════
   DISCOVER THE BEST PACKAGE (FILTER TABS)
════════════════════════════════════════════ */
.discover-section {
  background: #fff;
}

.discover-header {
  text-align: center;
  padding: 60px 0 36px;
}

.discover-title {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gold-dark);
  margin: 0 0 14px;
}

.discover-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #555;
  max-width: 1050px;
  margin: 0 auto;
  line-height: 1.75;
}

/* ── Tab bar ── */
.discover-tabs-wrap {
  background: #f1efeb;
  border-top: 1px solid #e0dbd2;
  border-bottom: 1px solid #e0dbd2;
}

.discover-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.dtab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 22px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  background: transparent;
  color: #555;
  border-right: 1px solid #ddd;
  transition:
    background 0.2s,
    color 0.2s;
}

.dtab i {
  font-size: 1rem;
  color: #bbb;
  transition: color 0.2s;
}

.dtab:hover {
  background: #e8e4dc;
  color: var(--green-dark);
}

.dtab:hover i {
  color: var(--gold);
}

.dtab.active {
  background: #2b2b2b;
  color: var(--gold);
}

.dtab.active i {
  color: var(--gold);
}

/* ── Content panel with bg image ── */
.discover-panel {
  position: relative;
  padding: 52px 0 60px;
  min-height: 380px;
}

.discover-panel-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.discover-panel-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

/* ── Cards grid ── */
.discover-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* each card */
.dcard {
  display: none;
  /* hidden by default, shown by JS */
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  flex-direction: row;
  align-items: stretch;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  border-left: 4px solid var(--gold);
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}

.dcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.25);
}

/* show as flex when active category */
.dcard.visible {
  display: flex;
}

.dcard-img {
  width: 140px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}

.dcard-body {
  padding: 18px 7px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1;
}

.dcard .pkg-inclusions {
  margin: 10px 0 12px;
  gap: 8px;
  /* Single-line chip row per client spec — never wrap, allow horizontal
   * scroll if the card is narrow. Hide the scrollbar for a cleaner look. */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.dcard .pkg-inclusions::-webkit-scrollbar {
  display: none;
}
.dcard .pkg-inclusions li {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.68rem;
  padding: 5px 11px;
}

/* Belt-and-braces: if the ul ever renders empty, don't reserve any space. */
.dcard .pkg-inclusions:empty {
  display: none;
  margin: 0;
}

.dcard .pkg-inclusions li {
  font-size: 0.7rem;
  padding: 5px 10px;
}

/* Hajj Category label below the price — Hajj tab only. Dark-green pill
 * with a tag icon, styled as a distinctive badge (not an inclusion). */
.dcard-hajj-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(11, 61, 46, 0.09);
  border: 1px solid rgba(11, 61, 46, 0.16);
  color: #0d2b16;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 6px 0 4px;
}
.dcard-hajj-cat i {
  color: var(--gold-dark);
  font-size: 0.85em;
}

/* "Without Meal" chip rendered next to the title — matches the standard
 * inclusion chip pill (see .pkg-inclusions li) but smaller so it sits
 * cleanly inline with a large title. */
.dcard-nomeal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(11, 61, 46, 0.06);
  border: 1px solid rgba(11, 61, 46, 0.12);
  color: rgba(45, 45, 45, 0.85);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  vertical-align: middle;
  margin-left: 6px;
  white-space: nowrap;
  position: relative;
  top: -2px;
}
.dcard-nomeal i {
  font-size: 0.68rem;
  color: var(--gold-dark);
}

/* Hajj tab (no chips): balance the shorter body so the meta + actions don't
   stick to the top with a big empty gap below the price. */
.dcard.no-chips .dcard-body {
  justify-content: center;
  gap: 10px;
}
.dcard.no-chips .dcard-actions {
  margin-top: 8px;
}

.dcard-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
}

.dcard-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
  white-space: nowrap;
}

.dcard-btn-more {
  background: #4a4a4a;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.dcard-btn-more:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.dcard-btn-book {
  background: linear-gradient(91deg, #b58e00, #e7d32e);
  border: 1px solid #ead201;
  color: #fff;
  box-shadow: 0 6px 18px rgba(184, 134, 44, 0.28);
}

.dcard-btn-book:hover {
  background: linear-gradient(91deg, #e7d32e, #b58e00);
  border-color: #ead201;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(184, 134, 44, 0.35);
}

.dcard-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 900;
  -webkit-text-stroke: 0.4px currentColor;
  color: #1a1a1a;
  margin: 0 0 10px;
  line-height: 1.4;
  border-bottom: 2px solid rgba(200, 157, 0, 0.25);
  padding-bottom: 8px;
}

/* Discover section: remove title underline (requested) */
.discover-section .dcard-title {
  border-bottom: 0;
  padding-bottom: 0;
  font-size: 1.08rem;
  font-weight: 900;
}

.dcard-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* Sharing: 4/5 line above the price row — Popular tab only. Plain text
 * matching the surrounding .dcard-meta style, not a chip. */
.dcard-sharing {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #0d2b16;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  margin: 4px 0 6px;
}
.dcard-sharing i {
  color: #c89d00;
  font-size: 0.9em;
}

.dcard-days {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-dark);
}

.dcard-sep {
  color: var(--gold-dark);
  font-weight: 700;
}

.dcard-price {
  font-family: var(--font-number);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold-dark);
}

/* Append "PP" (per person) suffix after every Discover card price. */
.dcard-price::after {
  content: " PP";
  font-size: 0.55em;
  font-weight: 600;
  opacity: 0.75;
  letter-spacing: 0.04em;
  margin-left: 3px;
}

/* Discover section — View More top-right; Book Now hidden (client request) */
.discover-section .dcard-body {
  position: relative;
}

.discover-section .dcard-actions {
  position: absolute;
  top: 16px;
  right: 18px;
  margin: 0;
  padding: 0;
  gap: 0;
}

.discover-section .dcard-btn-book {
  display: none !important;
}

.discover-section .dcard-title {
  padding-right: 104px;
}

.discover-section .dcard-btn-more {
  background: #4a4a4a;
  color: #fff;
  border: 1px solid #4a4a4a;
  padding: 10px 18px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.discover-section .dcard-btn-more::after {
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: 8px;
  font-size: 0.85rem;
}

.discover-section .dcard-btn-more:hover,
.discover-section .dcard-btn-more:focus-visible,
.discover-section .dcard-btn-more:active {
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(201, 168, 76, 0.45);
}

@media (max-width: 768px) {
  .discover-grid {
    grid-template-columns: 1fr;
  }

  .dtab {
    padding: 12px 14px;
    font-size: 0.75rem;
  }

  .discover-title {
    font-size: 1.8rem;
  }
}

/* ════════════════════════════════════════════
   INTERNATIONAL TOUR PACKAGES SLIDER
════════════════════════════════════════════ */
/* International Tours — filter chips (matches blog filter design, brand gold theme) */
.intl-filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 38px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 202, 4, 0.45) transparent;
  padding: 4px 4px 8px;
}
.intl-filter-bar::-webkit-scrollbar {
  height: 6px;
}
.intl-filter-bar::-webkit-scrollbar-thumb {
  background: rgba(245, 202, 4, 0.45);
  border-radius: 4px;
}
.intl-filter-bar::-webkit-scrollbar-track {
  background: transparent;
}

.intl-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--green-dark);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition:
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease;
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
}
.intl-filter-chip i {
  font-size: 0.78rem;
  color: var(--gold);
  transition: color 0.25s ease;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .intl-filter-bar {
    gap: 6px;
    margin-bottom: 24px;
  }
  .intl-filter-chip {
    padding: 5px 10px;
    font-size: 0.68rem;
    gap: 5px;
  }
  .intl-filter-chip i {
    font-size: 0.72rem;
  }
}
.intl-filter-chip:hover {
  background: rgba(245, 202, 4, 0.06);
  border-color: rgba(245, 202, 4, 0.45);
  transform: translateY(-1px);
}
.intl-filter-chip.active {
  background: linear-gradient(135deg, var(--gold), #ffe27a);
  color: #1a1206;
  border-color: var(--gold);
  box-shadow: 0 8px 20px rgba(245, 202, 4, 0.35);
}
.intl-filter-chip.active i {
  color: #1a1206;
}

/* Filter state — hide non-matching tiles when a category is active */
.intl-tile.intl-tile--hidden {
  display: none !important;
}

@media (max-width: 900px) {
  .intl-filter-bar {
    justify-content: flex-start;
  }
  .intl-filter-chip {
    padding: 9px 14px;
    font-size: 0.78rem;
  }
}

.intl-section {
  background-color: #fdf6ee;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Cg fill='none' stroke='%231A3D6B' stroke-opacity='0.07' stroke-width='0.9'%3E%3C!-- globe rings --%3E%3Ccircle cx='55' cy='55' r='36'/%3E%3Cellipse cx='55' cy='55' rx='20' ry='36'/%3E%3Cellipse cx='55' cy='55' rx='36' ry='14'/%3E%3Cline x1='55' y1='19' x2='55' y2='91'/%3E%3Cline x1='19' y1='55' x2='91' y2='55'/%3E%3C!-- compass points --%3E%3Cpolygon points='55,19 58,32 55,28 52,32' fill='%231A3D6B' fill-opacity='0.07' stroke='none'/%3E%3Cpolygon points='55,91 58,78 55,82 52,78' fill='%231A3D6B' fill-opacity='0.07' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 110px 110px;
  background-repeat: repeat;
  padding: 88px 0 80px;
}

/* International Tour Packages — overlay tile grid (4×2, flex so filtered tiles center) */
.intl-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.intl-tile {
  position: relative;
  display: block;
  flex: 0 0 calc((100% - 60px) / 4);
  max-width: calc((100% - 60px) / 4);
  aspect-ratio: 4 / 5;
  max-height: 320px;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #1a1a1a;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 10px 24px rgba(11, 61, 46, 0.1);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.intl-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(11, 61, 46, 0.18);
}

.intl-tile::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.78) 100%);
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.intl-tile-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--green-dark);
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.intl-tile-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 18px 20px 18px;
}

.intl-tile-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 10px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.intl-tile-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.intl-tile-duration {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.02em;
}

.intl-tile-duration i {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.88);
}

.intl-tile-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.01em;
  margin-top: 2px;
}
.intl-tile-price b {
  display: block;
  width: 100%;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.95;
}
.intl-tile-price::after {
  content: "/-PP";
  font-size: 1em;
  font-weight: 700;
  opacity: 1;
  margin-left: 3px;
  color: var(--gold);
  letter-spacing: 0.02em;
}

.intl-tile-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.intl-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.intl-btn-view {
  background: #2b2b2b;
  color: #fff;
}
.intl-btn-view:hover {
  background: #1a1a1a;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
.intl-btn-book {
  background: linear-gradient(91deg, #b58e00, #e7d32e);
  color: #fff;
  border: 1px solid #ead201;
}
.intl-btn-book:hover {
  background: linear-gradient(91deg, #e7d32e, #b58e00);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(181, 142, 0, 0.4);
}

@media (max-width: 1100px) {
  .intl-tile {
    flex: 0 0 calc((100% - 40px) / 3);
    max-width: calc((100% - 40px) / 3);
  }
}

@media (max-width: 820px) {
  .intl-tile {
    flex: 0 0 calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
  }
}

@media (max-width: 480px) {
  .intl-grid {
    gap: 16px;
  }
  .intl-tile {
    flex: 0 0 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
  }
}

/* slider wrapper */
.intl-slider-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.intl-slider-viewport {
  overflow: hidden;
  flex: 1;
}

.intl-slider-track {
  display: flex;
  gap: 24px;
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
}

/* card */
.intl-card {
  flex: 0 0 calc((100% - 48px) / 3);
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(11, 61, 46, 0.08);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.intl-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(11, 61, 46, 0.15);
}

.intl-card-img {
  height: 240px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.intl-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11, 61, 46, 0.55) 0%,
    transparent 55%
  );
}

.intl-stars {
  position: absolute;
  bottom: 12px;
  left: 14px;
  display: flex;
  gap: 3px;
  color: var(--gold);
  font-size: 0.75rem;
}

.intl-card-body {
  padding: 18px 20px 22px;
}

.intl-card-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 900;
  -webkit-text-stroke: 0.4px currentColor;
  color: var(--green-dark);
  margin: 0 0 8px;
}

.intl-card-title a {
  color: inherit;
  text-decoration: none;
}

.intl-card-title a:hover {
  color: var(--gold-dark);
}

.intl-days {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: #888;
  margin: 0 0 4px;
}

.intl-days i {
  margin-right: 4px;
  color: var(--gold);
}

.intl-price {
  font-family: var(--font-number);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0 0 14px;
}

.intl-price span {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  color: #999;
}

/* prev/next buttons */
.intl-prev,
.intl-next {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: #fff;
  color: var(--gold-dark);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.25s,
    color 0.25s;
}

.intl-prev:hover,
.intl-next:hover {
  background: var(--gold);
  color: #fff;
}

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

.intl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  cursor: pointer;
  padding: 0;
  transition:
    background 0.25s,
    transform 0.25s;
}

.intl-dot.active {
  background: var(--gold);
  transform: scale(1.35);
}

@media (max-width: 1024px) {
  .intl-card {
    flex: 0 0 calc((100% - 24px) / 2);
  }
}

@media (max-width: 600px) {
  .intl-card {
    flex: 0 0 100%;
  }

  .intl-prev,
  .intl-next {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
  }
}

/* ════════════════════════════════════════════
   SATISFIED CUSTOMER + YOUTUBE
════════════════════════════════════════════ */
/* ════════════════════════════════════════════
   SATISFIED CUSTOMER
════════════════════════════════════════════ */
.sc-section {
  background-color: #fdfbf6;
  background-image:
    radial-gradient(
      ellipse 70% 50% at 50% 0%,
      rgba(201, 168, 76, 0.06) 0%,
      transparent 65%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='rgba(201,168,76,0.08)' stroke-width='1'%3E%3Cpath d='M52 26 C34 26 22 40 22 56 C22 72 34 86 52 86 C42 82 36 70 36 56 C36 42 42 30 52 26 Z' fill='rgba(201,168,76,0.06)' stroke='none'/%3E%3Cpolygon points='100,30 102.5,38 111,38 104.5,43 107,51 100,46 93,51 95.5,43 89,38 97.5,38'/%3E%3Ccircle cx='112' cy='92' r='2' fill='rgba(201,168,76,0.10)' stroke='none'/%3E%3Ccircle cx='30' cy='110' r='2' fill='rgba(11,61,46,0.06)' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size:
    auto,
    140px 140px;
  background-repeat: no-repeat, repeat;
  padding: 84px 0;
  overflow: hidden;
}

.sc-row {
  display: grid;
  grid-template-columns: 45% 55%;
  min-height: 700px;
  max-width: 1360px;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(203, 170, 0, 0.18);
}

/* ── Left: Video (photo background + vignette — Real Testimonials) ── */
.sc-video-col {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 36px;
  overflow: hidden;
  /* Mosque banner background, RAW — no cream tint, no dark overlay,
   * no radial vignette. Just the image. */
  background-image: url("../assets/img/slider/home-banner1.jpeg");
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}
.sc-video-col::before { content: none; }

.sc-video-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.sc-v-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 215, 90, 0.95);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.sc-v-eyebrow i {
  color: #ff0000;
  font-size: 1rem;
}

.sc-v-title {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
.sc-v-title em {
  font-style: italic;
  color: var(--gold, #d4a72c);
  font-weight: 700;
}

/* ── Portrait video pair with chevron nav (Real Testimonials) ──
   Two portrait video cards side by side over a moody backdrop, with
   round chevron nav buttons floating just outside on each side. */
.sc-video-pair {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 14px auto 0;
}
.sc-video-pair-viewport {
  width: 100%;
  overflow: hidden;
}
.sc-video-pair-track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.sc-video-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 14;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  border: 4px solid #fff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.12);
  background: #000;
  transition: transform 0.25s ease;
}
.sc-video-thumb:hover {
  transform: translateY(-3px);
}
.sc-video-thumb img,
.sc-video-thumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}
/* YouTube-style play button — larger red rounded rectangle */
.sc-video-thumb .sc-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 50px;
  border-radius: 14px;
  border: 0;
  background: #ff0000;
  color: #fff;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s, background 0.2s;
  z-index: 2;
}
.sc-video-thumb:hover .sc-video-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: #ff1a1a;
}
/* Chevron nav — floats just outside the video pair on each side. */
.sc-video-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: #333;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  z-index: 3;
}
.sc-video-nav--prev { left: -22px; }
.sc-video-nav--next { right: -22px; }
.sc-video-nav:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}
.sc-video-nav[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.sc-video-frame {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(203, 170, 0, 0.35);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(203, 170, 0, 0.1);
  aspect-ratio: 16/9;
}

.sc-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Two-video carousel — 2 slides visible at a time, arrows navigate. */
.sc-video-slider {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.sc-video-viewport {
  flex: 1;
  overflow: hidden;
  border-radius: 14px;
}
.sc-video-track {
  display: flex;
  gap: 18px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.sc-video-slide {
  flex: 0 0 calc((100% - 18px) / 2);
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(203, 170, 0, 0.35);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(203, 170, 0, 0.1);
  aspect-ratio: 9 / 12;
  background: #000;
}
.sc-video-slide iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
/* Poster image (YouTube thumbnail) fills the slide until user clicks play. */
.sc-video-slide { cursor: pointer; }
.sc-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Red YouTube-style play button in center */
.sc-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 54px;
  border: 0;
  border-radius: 14px;
  background: #ff0000;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, background 0.25s ease;
  z-index: 2;
}
.sc-video-slide:hover .sc-video-play {
  transform: translate(-50%, -50%) scale(1.06);
  background: #e00000;
}
.sc-video-play i { pointer-events: none; }
.sc-video-arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a1a;
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition:
    transform 0.2s ease,
    background 0.2s ease;
  z-index: 3;
}
.sc-video-arrow:hover {
  background: #fff;
  transform: scale(1.06);
}
.sc-video-arrow:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 640px) {
  .sc-video-slide {
    flex: 0 0 100%;
    aspect-ratio: 16 / 10;
  }
  .sc-video-arrow {
    width: 38px;
    height: 38px;
  }
}

.sc-yt-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.83rem;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 50px;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition:
    background 0.2s,
    border-color 0.2s;
  width: fit-content;
}

.sc-yt-btn i {
  color: #ff0000;
  font-size: 1.05rem;
}

.sc-yt-btn:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ── Right: Reviews ── */
.sc-reviews-col {
  background: #fdfaf5;
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
}

.sc-reviews-inner {
  width: 100%;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sc-reviews-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 4px;
}

.sc-reviews-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 10px;
  line-height: 1.2;
}
.sc-reviews-title em {
  font-style: italic;
  color: var(--gold-dark, #b58e00);
  font-weight: 800;
}

.sc-reviews-subtitle {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: #666;
  margin: 0 0 18px;
  max-width: 92%;
}

.sc-rating-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(203, 170, 0, 0.22);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.sc-rating-row--wide {
  padding: 14px 20px;
  gap: 18px;
}
.sc-rating-row--wide .sc-rating-score {
  font-size: 1.6rem;
  font-weight: 700;
  color: #1a1a1a;
}
.sc-rating-row--wide .sc-rating-stars {
  margin: 0;
  font-size: 1.05rem;
}
.sc-rating-row--wide .sc-rating-label {
  font-size: 0.82rem;
  color: #666;
}

.sc-rating-score {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  color: #0b3d2e;
  line-height: 1;
}

.sc-rating-stars {
  color: #fbbc05;
  font-size: 0.95rem;
  letter-spacing: 2px;
  margin-bottom: 2px;
}

.sc-rating-label {
  font-family: var(--font-body);
  font-size: 0.73rem;
  color: #888;
}

.sc-google-logo {
  margin-left: auto;
  font-family: Arial, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
}

/* Slide area */
.sc-reviews-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Reviews carousel (multi-card like screenshot) */
.sc-carousel-viewport {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 6px 4px;
}

.sc-carousel-track {
  display: flex;
  gap: 18px;
}

.sc-review {
  /* show exactly 2 cards per view */
  flex: 0 0 calc((100% - 18px) / 2);
  scroll-snap-align: start;
  border-top: 3px solid var(--gold);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

@media (max-width: 600px) {
  .sc-review {
    flex-basis: 100%;
  }
}

.sc-review .review-text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sc-nav {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(203, 170, 0, 0.35);
  background: #fff;
  color: var(--green-dark);
  font-size: 0.82rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.sc-nav:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}

/* (Reverted) carousel styles removed */

.sc-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding-top: 4px;
}

.sc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ddd;
  border: none;
  cursor: pointer;
  padding: 0;
  transition:
    background 0.2s,
    transform 0.2s;
}

.sc-dot.active {
  background: var(--gold);
  transform: scale(1.5);
}

@media (max-width: 900px) {
  .sc-row {
    grid-template-columns: 1fr;
  }

  .sc-video-col {
    padding: 48px 24px;
  }

  .sc-reviews-inner {
    padding: 40px 24px;
  }
}

/* (Reverted) removed carousel responsive overrides */

/* ════════════════════════════════════════════
   VIDEO TESTIMONIALS
════════════════════════════════════════════ */
.vtestimonial-section {
  background-color: #fdfbf6;
  background-image:
    radial-gradient(
      ellipse 70% 50% at 50% 0%,
      rgba(201, 168, 76, 0.08) 0%,
      transparent 65%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-opacity='0.07' stroke-width='0.8'%3E%3Cpolygon points='60,8 63.5,26 82,26 68,36 73,54 60,44 47,54 52,36 38,26 56.5,26'/%3E%3Ccircle cx='60' cy='60' r='36' stroke-opacity='0.05'/%3E%3Ccircle cx='60' cy='60' r='20' stroke-opacity='0.05'/%3E%3Cline x1='60' y1='24' x2='60' y2='96' stroke-opacity='0.04'/%3E%3Cline x1='24' y1='60' x2='96' y2='60' stroke-opacity='0.04'/%3E%3Ccircle cx='10' cy='10' r='1.5' fill='%23C9A84C' fill-opacity='0.1' stroke='none'/%3E%3Ccircle cx='110' cy='10' r='1.5' fill='%23C9A84C' fill-opacity='0.1' stroke='none'/%3E%3Ccircle cx='10' cy='110' r='1.5' fill='%23C9A84C' fill-opacity='0.1' stroke='none'/%3E%3Ccircle cx='110' cy='110' r='1.5' fill='%23C9A84C' fill-opacity='0.1' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size:
    auto,
    120px 120px;
  background-repeat: no-repeat, repeat;
  padding: 80px 0 72px;
  overflow: hidden;
}

.vtestimonial-header {
  text-align: center;
  margin-bottom: 48px;
}

.vtestimonial-title {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--gold);
  margin: 10px 0 8px;
  letter-spacing: 0.02em;
  text-shadow: none;
}

.vtestimonial-sub {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--gray-mid);
  margin: 0;
}

.hajj-eyebrow.vt-eyebrow,
.vtestimonial-header .hajj-eyebrow {
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.3);
  color: var(--gold);
}

/* slider */
.vtestimonial-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vt-viewport {
  overflow: hidden;
  flex: 1;
}

.vt-track {
  display: flex;
  gap: 20px;
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
}

/* phone-frame card */
.vt-card {
  flex: 0 0 calc((100% - 80px) / 5);
  cursor: pointer;
  background: #fff;
  border-radius: 20px;
  padding: 10px 10px 14px;
  border: 1.5px solid rgba(201, 168, 76, 0.22);
  border-top: 3px solid var(--gold);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.07),
    0 1px 3px rgba(0, 0, 0, 0.04);
  transition:
    transform 0.3s,
    box-shadow 0.3s,
    border-color 0.3s;
}

.vt-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 16px 40px rgba(11, 61, 46, 0.12),
    0 4px 12px rgba(201, 168, 76, 0.15);
  border-color: var(--gold);
  border-top-color: var(--gold-dark);
}

.vt-phone {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  border: none;
  outline: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  transition: none;
  aspect-ratio: 9 / 16;
}

.vt-card:hover .vt-phone {
  transform: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.vt-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.85;
  transition: opacity 0.25s;
}

.vt-card:hover .vt-phone img {
  opacity: 1;
}

.vt-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, transparent 60%);
}

.vt-play i {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, #e8c96a 100%);
  color: #1a0e00;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 6px rgba(201, 168, 76, 0.2),
    0 6px 20px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.25s,
    box-shadow 0.25s;
  padding-left: 4px;
}

.vt-card:hover .vt-play i {
  transform: scale(1.18);
  box-shadow:
    0 0 0 8px rgba(201, 168, 76, 0.3),
    0 8px 28px rgba(0, 0, 0, 0.55);
}

/* prev/next */
.vt-prev,
.vt-next {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 168, 76, 0.4);
  background: #fff;
  color: var(--gold-dark);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.25s,
    border-color 0.25s,
    box-shadow 0.25s,
    color 0.25s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.vt-prev:hover,
.vt-next:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 4px 16px rgba(201, 168, 76, 0.35);
}

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

.vt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  cursor: pointer;
  padding: 0;
  transition:
    background 0.25s,
    transform 0.25s;
}

.vt-dot.active {
  background: var(--gold);
  transform: scale(1.4);
}

/* lightbox */
.vt-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.88);
  align-items: center;
  justify-content: center;
}

.vt-lightbox.open {
  display: flex;
}

.vt-lightbox-inner {
  position: relative;
  width: min(560px, 90vw);
  aspect-ratio: 9/16;
}

.vt-lightbox-inner iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px;
}

.vt-lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.vt-lightbox-close:hover {
  opacity: 1;
}

@media (max-width: 1024px) {
  .vt-card {
    flex: 0 0 calc((100% - 60px) / 4);
  }
}

@media (max-width: 768px) {
  .vt-card {
    flex: 0 0 calc((100% - 40px) / 3);
  }

  .vtestimonial-title {
    font-size: 1.9rem;
  }
}

@media (max-width: 480px) {
  .vt-card {
    flex: 0 0 calc((100% - 20px) / 2);
  }
}

/* ════════════════════════════════════════════
   IRAQ ZIYARAT TOUR PACKAGES
════════════════════════════════════════════ */
.ziyarat-section {
  background: linear-gradient(180deg, #f5e8c8 0%, #faf3df 55%, #f5e8c8 100%);
  padding: 88px 0 80px;
  position: relative;
  overflow: hidden;
}

.ziyarat-section .container {
  position: relative;
  z-index: 1;
}

/* Top-right: Karbala/Najaf/Baghdad dome vibe */
.ziyarat-section::before {
  content: "";
  position: absolute;
  top: -46px;
  right: -70px;
  width: 520px;
  height: 520px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 520'%3E%3Cg fill='rgba(203,170,0,0.10)' stroke='rgba(203,170,0,0.12)' stroke-width='1'%3E%3C!-- big dome --%3E%3Cpath d='M160 310 Q260 150 360 310 Z'/%3E%3Crect x='160' y='310' width='200' height='110' rx='8'/%3E%3C!-- dome finial --%3E%3Ccircle cx='260' cy='150' r='6' fill='rgba(203,170,0,0.16)' stroke='none'/%3E%3Cpath d='M260 138 L260 120'/%3E%3Ccircle cx='260' cy='116' r='5' fill='rgba(10,10,10,0.08)' stroke='none'/%3E%3C!-- minaret left --%3E%3Crect x='96' y='210' width='28' height='210' rx='6'/%3E%3Cpolygon points='96,210 110,150 124,210'/%3E%3Crect x='90' y='235' width='40' height='10' rx='4'/%3E%3C!-- minaret right --%3E%3Crect x='396' y='220' width='28' height='200' rx='6'/%3E%3Cpolygon points='396,220 410,158 424,220'/%3E%3Crect x='390' y='245' width='40' height='10' rx='4'/%3E%3C!-- smaller shrine domes --%3E%3Cpath d='M60 360 Q110 300 160 360 Z'/%3E%3Crect x='60' y='360' width='100' height='60' rx='8'/%3E%3Cpath d='M360 360 Q410 300 460 360 Z'/%3E%3Crect x='360' y='360' width='100' height='60' rx='8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* Bottom skyline band */
.ziyarat-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 180' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='rgba(10,10,10,0.04)' stroke='rgba(203,170,0,0.08)' stroke-width='0.6'%3E%3Crect x='0' y='120' width='1400' height='60' stroke='none'/%3E%3C!-- domes --%3E%3Cpath d='M90 130 Q130 70 170 130 Z'/%3E%3Crect x='90' y='130' width='80' height='50' rx='6'/%3E%3Cpath d='M290 130 Q330 70 370 130 Z'/%3E%3Crect x='290' y='130' width='80' height='50' rx='6'/%3E%3Cpath d='M520 130 Q600 45 680 130 Z'/%3E%3Crect x='520' y='130' width='160' height='50' rx='8'/%3E%3Cpath d='M780 130 Q820 70 860 130 Z'/%3E%3Crect x='780' y='130' width='80' height='50' rx='6'/%3E%3Cpath d='M980 130 Q1020 70 1060 130 Z'/%3E%3Crect x='980' y='130' width='80' height='50' rx='6'/%3E%3C!-- minarets --%3E%3Crect x='210' y='78' width='12' height='102' rx='3'/%3E%3Cpolygon points='210,78 216,52 222,78'/%3E%3Crect x='910' y='78' width='12' height='102' rx='3'/%3E%3Cpolygon points='910,78 916,52 922,78'/%3E%3Crect x='1140' y='72' width='12' height='108' rx='3'/%3E%3Cpolygon points='1140,72 1146,46 1152,72'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

.ziyarat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Iraq Ziyarat header — mirror the Umrah Land Packages header treatment
   (ornament + plain gold uppercase eyebrow + heading with italic gold em). */
#iraq-ziyarat .hajj-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}

#iraq-ziyarat .land-ornament {
  color: var(--gold-dark);
  margin: 0 auto 16px;
  display: flex;
  justify-content: center;
}

/* Iraq eyebrow — render as the same gold-pill card-box tab used by the
   other section eyebrows (Hajj, Ramadan). No more flat uppercase text. */
#iraq-ziyarat .hajj-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.35);
  padding: 8px 20px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold-dark);
  text-transform: uppercase;
  margin: 0 auto 18px;
  box-shadow: 0 4px 14px rgba(184, 134, 44, 0.12);
}
#iraq-ziyarat .hajj-eyebrow-icon {
  width: 15px;
  height: 15px;
  color: var(--gold-dark);
  flex-shrink: 0;
}

#iraq-ziyarat .hajj-title {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--green-dark);
  line-height: 1.2;
  margin: 0 0 18px;
}

#iraq-ziyarat .hajj-title a {
  color: inherit;
  text-decoration: none;
}

#iraq-ziyarat .hajj-title em {
  font-style: italic;
  font-family: var(--font-heading);
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
}

#iraq-ziyarat .hajj-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #6a6a6a;
  line-height: 1.75;
  margin: 0 auto;
  max-width: 640px;
}

@media (max-width: 768px) {
  #iraq-ziyarat .hajj-title {
    font-size: 2rem;
  }
  #iraq-ziyarat .hajj-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
  }
}

/* Ziyarat cards: 3 chips per row × 2 rows */
.ziyarat-section .hajj-card .pkg-inclusions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  flex-wrap: initial;
  overflow: visible;
  gap: 6px;
}

.ziyarat-section .hajj-card .pkg-inclusions li {
  justify-content: center;
  white-space: nowrap;
  font-size: 0.66rem;
  padding: 5px 8px;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ziyarat-section .hajj-card .pkg-inclusions li i {
  font-size: 0.7rem;
  flex-shrink: 0;
}

@media (max-width: 420px) {
  .ziyarat-section .hajj-card .pkg-inclusions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .ziyarat-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── HAJJ SECTION ───────────────────────────────────────────── */
.hajj-trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 44px;
  padding: 18px 24px;
  background: var(--green-pale);
  border-radius: var(--radius-md);
  border: 1px solid rgba(11, 61, 46, 0.1);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green-dark);
}

.featured-hajj {
  position: relative;
  border: 2px solid var(--green-mid) !important;
}

.hajj-featured-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green-mid);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 18px;
  border-radius: 50px;
  white-space: nowrap;
  z-index: 10;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hajj-disclaimer {
  margin-top: 36px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--gray-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.hajj-disclaimer i {
  color: var(--gold);
}

/* ─── URGENT STRIP ───────────────────────────────────────────── */
.urgent-strip {
  background: linear-gradient(
    135deg,
    var(--gold-dark) 0%,
    var(--gold) 40%,
    var(--gold-light) 60%,
    var(--gold) 100%
  );
  background-size: 200% auto;
  animation: shimmer-strip 4s linear infinite;
  padding: 14px 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}

@keyframes shimmer-strip {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 200% center;
  }
}

.urgent-strip-inner {
  flex: 1;
  overflow: hidden;
}

.urgent-marquee {
  display: flex;
  white-space: nowrap;
  animation: marquee 25s linear infinite;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
}

.urgent-marquee span {
  padding: 0 8px;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.urgent-cta {
  background: var(--green-dark);
  color: var(--white);
  padding: 10px 24px;
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-right: 4px;
  transition: background var(--transition);
}

.urgent-cta:hover {
  background: var(--green-mid);
}

/* ─── WHY CHOOSE US ──────────────────────────────────────────── */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.usp-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-light);
  transition: all 0.4s ease;
}

.usp-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: rgba(11, 61, 46, 0.2);
}

.usp-icon-wrap {
  width: 68px;
  height: 68px;
  background: linear-gradient(135deg, var(--green-dark), var(--green-mid));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 1.6rem;
  color: var(--gold-light);
  box-shadow: 0 4px 16px rgba(11, 61, 46, 0.3);
}

.usp-card h3 {
  font-size: 1.05rem;
  color: var(--green-dark);
  margin-bottom: 10px;
}

.usp-card p {
  font-size: 0.87rem;
  color: var(--gray-mid);
  line-height: 1.7;
}

/* ─── PRESS SECTION ──────────────────────────────────────────── */
/* ════════════════════════════════════════════
   PRESS & MEDIA
════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   Press & Media — "What India's press is saying"
   Cream section · gold hairline eyebrow · serif+italic-gold
   title · white logo cards in a horizontal strip.
   ═══════════════════════════════════════════════════════ */
.press-section {
  background: #f5eed6;
  padding: 80px 0 72px;
}

.press-header {
  text-align: center;
  margin: 0 auto 38px;
  max-width: 780px;
}

.press-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--gold-dark);
  text-transform: uppercase;
  margin: 0 0 14px;
}
.press-eyebrow-line {
  display: block;
  width: 46px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold-dark),
    transparent
  );
}

.press-title {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 700;
  color: #2c2c2c;
  line-height: 1.15;
  margin: 0 0 12px;
  letter-spacing: 0.005em;
}
.press-title em {
  font-style: italic;
  background: linear-gradient(
    135deg,
    var(--gold-dark),
    var(--gold),
    var(--gold-dark)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 600;
}

.press-desc {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: #6a6a6a;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 620px;
}

/* Horizontal strip of white logo cards */
.press-strip-wrap {
  position: relative;
  margin-top: 6px;
  /* soft fade on either side hints at scrollable content */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 40px,
    #000 calc(100% - 40px),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 40px,
    #000 calc(100% - 40px),
    transparent 100%
  );
}

/* Continuous marquee — flat card list; each card carries its own
   margin-right for uniform spacing, so translateX(-50%) hits an
   identical visual state every cycle. No gap flash on loop. */
.press-marquee {
  display: flex;
  width: max-content;
  animation: pressMarquee 32s linear infinite;
  will-change: transform;
}
.press-marquee:hover {
  animation-play-state: paused;
}

@keyframes pressMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--marquee-shift, -50%));
  }
}

.press-card {
  flex: 0 0 auto;
  width: 170px;
  height: 90px;
  margin-right: 18px;
  background: #fff;
  border-radius: 12px;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.07),
    0 2px 5px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.press-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.1),
    0 4px 10px rgba(0, 0, 0, 0.05);
}
.press-card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .press-marquee {
    animation: none;
  }
}

/* Article snippet cards row — colored top-tab accent, publication dot,
   headline with italic gold highlights, small uppercase tag, read link. */
.press-articles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 40px;
}

.press-article {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px 20px;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}
.press-article-tab {
  position: absolute;
  top: -3px;
  left: 22px;
  width: 60px;
  height: 4px;
  background: var(--press-accent, var(--gold-dark));
  border-radius: 0 0 4px 4px;
}
.press-article-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.press-article-source {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: #2c2c2c;
  margin: 6px 0 12px;
}
.press-article-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--press-accent, var(--gold-dark));
  flex-shrink: 0;
}
.press-article-headline {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 500;
  color: #2c2c2c;
  line-height: 1.45;
  margin: 0 0 14px;
}
.press-article-headline em {
  font-style: italic;
  color: var(--gold-dark);
  font-weight: 500;
}
.press-article-tag {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a7a7a;
  font-weight: 700;
  margin: 0 0 16px;
}
.press-article-link {
  margin-top: auto;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.02em;
  transition:
    color 0.2s ease,
    gap 0.2s ease;
}
.press-article-link:hover {
  color: #7a5500;
  gap: 10px;
}
.press-article-link i {
  font-size: 0.72rem;
}

@media (max-width: 900px) {
  .press-articles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .press-section {
    padding: 60px 0 56px;
  }
  .press-title {
    font-size: 1.75rem;
  }
  .press-desc {
    font-size: 0.86rem;
  }
  .press-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.24em;
  }
  .press-eyebrow-line {
    width: 32px;
  }
  .press-marquee {
    animation-duration: 24s;
  }
  .press-card {
    width: 130px;
    height: 72px;
    margin-right: 12px;
    padding: 10px 14px;
    border-radius: 10px;
  }
  .press-articles {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 28px;
  }
  .press-article {
    padding: 16px 18px 18px;
  }
  .press-article-headline {
    font-size: 0.98rem;
  }
}

/* ─── HOLIDAY, CORPORATE, ZIYARAT, LAND, INTL (shared overrides) */
.corporate-card {
  background: #0f1a14;
  border-color: rgba(201, 168, 76, 0.2);
}

.corporate-card .card-title {
  color: var(--gold-light);
}

.corporate-card .card-meta span {
  color: rgba(255, 255, 255, 0.6);
}

.corporate-card .card-features li {
  color: rgba(255, 255, 255, 0.8);
}

.corporate-card .card-features li i {
  color: var(--gold);
}

.corporate-card .card-footer {
  border-color: rgba(255, 255, 255, 0.1);
}

.corporate-card .price-from,
.corporate-card .price-pp {
  color: rgba(255, 255, 255, 0.5);
}

.ziyarat-card {
  border-top: 3px solid #6366f1;
}

.land-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
}

.land-card .card-title {
  color: var(--white);
}

.land-card .card-meta span {
  color: rgba(255, 255, 255, 0.65);
}

.land-card .card-features li {
  color: rgba(255, 255, 255, 0.8);
}

.land-card .card-features li i {
  color: var(--gold-light);
}

.land-card .card-footer {
  border-color: rgba(255, 255, 255, 0.1);
}

.land-card .price-amount {
  color: var(--gold-light);
}

.land-card .price-from,
.land-card .price-pp {
  color: rgba(255, 255, 255, 0.5);
}

.land-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(201, 168, 76, 0.3);
}

.intl-card {
  border-top: 3px solid var(--gold);
}

/* ─── DISCOVER PACKAGE TABS ──────────────────────────────────── */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
}

.filter-tab {
  padding: 9px 20px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-mid);
  background: var(--white);
  border: 1.5px solid var(--gray-light);
  transition: all var(--transition);
  cursor: pointer;
}

.filter-tab:hover {
  border-color: var(--green-mid);
  color: var(--green-mid);
}

.filter-tab.active {
  background: var(--green-dark);
  color: var(--white);
  border-color: var(--green-dark);
}

.mini-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.mini-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1.5px solid var(--gray-light);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: all var(--transition);
}

.mini-card:hover {
  border-color: var(--green-mid);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.mini-card.hidden {
  display: none;
}

.mini-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.mini-card-info {
  flex: 1;
  min-width: 0;
}

.mini-card-info h4 {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--green-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-card-info span {
  font-size: 0.72rem;
  color: var(--gray-mid);
}

.mini-card-cta {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--green-mid);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  transition: gap var(--transition);
}

.mini-card:hover .mini-card-cta {
  gap: 8px;
}

/* ─── VIDEO TESTIMONIALS ─────────────────────────────────────── */
.testimonial-carousel-wrapper {
  position: relative;
  overflow: hidden;
}

.testimonial-carousel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  transition: transform 0.5s ease;
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
}

.testimonial-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(201, 168, 76, 0.3);
}

.video-thumb {
  position: relative;
  height: 200px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.video-thumb-1 {
  background: linear-gradient(135deg, #0b3d2e 0%, #1a6b47 100%);
}

.video-thumb-2 {
  background: linear-gradient(135deg, #1a0b3d 0%, #3d1a6b 100%);
}

.video-thumb-3 {
  background: linear-gradient(135deg, #3d2e0b 0%, #8b6b1a 100%);
}

.video-thumb-4 {
  background: linear-gradient(135deg, #0b2a3d 0%, #1a5a7a 100%);
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

.play-btn {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-dark);
  font-size: 1.2rem;
  z-index: 2;
  transition: all var(--transition);
  padding-left: 4px;
}

.video-thumb:hover .play-btn {
  transform: scale(1.1);
  background: var(--gold);
}

.testimonial-info {
  padding: 22px;
}

.testimonial-stars {
  color: var(--gold);
  font-size: 0.85rem;
  margin-bottom: 10px;
  display: flex;
  gap: 3px;
}

.testimonial-quote {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.7;
  margin-bottom: 16px;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 42px;
  height: 42px;
  background: var(--green-mid);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}

.testimonial-author strong {
  display: block;
  font-size: 0.88rem;
  color: var(--white);
}

.testimonial-author span {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}

/* Carousel Controls */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.carousel-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.carousel-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}

.carousel-dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: all var(--transition);
  cursor: pointer;
}

.dot.active {
  background: var(--gold);
  width: 24px;
  border-radius: 4px;
}

/* ─── GOOGLE REVIEWS ─────────────────────────────────────────── */
.google-overall {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 20px auto 30px;
}

.google-score {
  font-family: var(--font-heading);
  font-size: 4rem;
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1;
}

.google-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.google-stars {
  color: #fbbc04;
  font-size: 1.2rem;
  display: flex;
  gap: 3px;
}

.google-details span {
  font-size: 0.85rem;
  color: var(--gray-mid);
}

.google-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--green-mid);
  font-weight: 600;
}

.google-link:hover {
  color: var(--green-dark);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.review-card {
  background: var(--white);
  border: 1.5px solid var(--gray-light);
  border-radius: var(--radius-md);
  padding: 22px;
  transition: all var(--transition);
}

.review-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(11, 61, 46, 0.2);
  transform: translateY(-3px);
}

.review-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green-mid);
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.review-author-info {
  flex: 1;
}

.review-author-info strong {
  display: block;
  font-size: 0.88rem;
  color: var(--gray-dark);
}

.review-author-info span {
  font-size: 0.75rem;
  color: var(--gray-mid);
}

.google-badge {
  color: #4285f4;
  font-size: 1rem;
}

.review-stars {
  color: #fbbc04;
  font-size: 0.8rem;
  margin-bottom: 10px;
  display: flex;
  gap: 2px;
}

.review-text {
  font-size: 0.84rem;
  color: var(--gray-mid);
  line-height: 1.65;
}

/* ─── FINAL CTA ──────────────────────────────────────────────── */
.final-cta-section {
  position: relative;
  padding: 120px 0;
  background:
    linear-gradient(
      to bottom right,
      rgba(11, 61, 46, 0.96) 0%,
      rgba(5, 20, 15, 0.95) 100%
    ),
    radial-gradient(ellipse at 30% 50%, #1a6b47 0%, #0b3d2e 100%);
  overflow: hidden;
}

.final-cta-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 80% 20%,
    rgba(201, 168, 76, 0.08) 0%,
    transparent 60%
  );
}

.final-cta-pattern {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpolygon points='60,5 68,35 98,35 73,53 83,83 60,65 37,83 47,53 22,35 52,35' fill='none' stroke='rgba(201,168,76,0.05)' stroke-width='1'/%3E%3C/svg%3E");
}

.final-cta-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--white);
}

.final-cta-title {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--white);
  margin-bottom: 20px;
}

.final-cta-subtitle {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.78);
  max-width: 640px;
  margin: 0 auto 44px;
  line-height: 1.8;
}

.final-cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.final-trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}

.final-trust-bar span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.final-trust-bar i {
  color: var(--gold);
}

/* ─── FOOTER ─────────────────────────────────────────────────── */
footer {
  background: #03060c;
  color: rgba(255, 255, 255, 0.75);
}
footer #footer,
footer .ft-main,
footer .ft-utility-bar,
footer .ft-extra-section,
footer .ft-sub-section,
footer .ft-bottom {
  background: #03060c !important;
}

.footer-top {
  padding: 72px 0 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 48px;
}

.footer-col h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul a {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-col ul a:hover {
  color: var(--gold-light);
  padding-left: 4px;
}

.footer-brand .logo {
  margin-bottom: 16px;
}

.footer-brand p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Footer logo image sizing */
.footer-logo img {
  height: 52px;
  width: auto;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.footer-social a {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  transition: all var(--transition);
}

.footer-social a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}

.footer-trust-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.f-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold-light);
  background: rgba(203, 170, 0, 0.1);
  border: 1px solid rgba(203, 170, 0, 0.25);
  padding: 4px 12px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.65);
}

.contact-item i {
  color: var(--gold);
  margin-top: 2px;
  width: 14px;
  flex-shrink: 0;
}

.contact-item a {
  color: rgba(255, 255, 255, 0.65);
  transition: color var(--transition);
}

.contact-item a:hover {
  color: var(--gold-light);
}

/* Newsletter */
.footer-newsletter {
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 32px 0;
}

.newsletter-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.newsletter-text h4 {
  color: var(--white);
  font-size: 1rem;
  margin-bottom: 4px;
}

.newsletter-text p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}

.newsletter-form {
  display: flex;
  flex: 1;
  gap: 0;
  min-width: 260px;
}

.newsletter-form input {
  flex: 1;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: var(--white);
  font-size: 0.88rem;
  outline: none;
  transition: border-color var(--transition);
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.newsletter-form input:focus {
  border-color: rgba(201, 168, 76, 0.4);
}

.newsletter-form .btn {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Footer Bottom */
.footer-bottom {
  padding: 18px 0;
  background: rgba(0, 0, 0, 0.3);
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom p {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
}

.footer-bottom-links {
  display: flex;
  gap: 18px;
}

.footer-bottom-links a {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
  transition: color var(--transition);
}

.footer-bottom-links a:hover {
  color: var(--gold-light);
}

/* ─── FLOATING WHATSAPP ──────────────────────────────────────── */
.floating-whatsapp {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 58px;
  height: 58px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.6rem;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  z-index: 999;
  transition: all var(--transition);
  animation: wa-pulse 3s infinite;
}

.floating-whatsapp:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
}

@keyframes wa-pulse {
  0%,
  100% {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  }

  50% {
    box-shadow:
      0 4px 30px rgba(37, 211, 102, 0.7),
      0 0 0 10px rgba(37, 211, 102, 0.08);
  }
}

.wa-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  background: var(--green-dark);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 50px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: all var(--transition);
  pointer-events: none;
}

.floating-whatsapp:hover .wa-tooltip {
  opacity: 1;
  transform: translateX(0);
}

/* ─── FLOATING CALL ─────────────────────────────────────────── */
.floating-call {
  position: fixed;
  bottom: 28px;
  left: 28px;
  right: auto;
  width: auto;
  max-width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px 0 16px;
  height: 52px;
  background: #1a6b47;
  border-radius: 50px;
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(26, 107, 71, 0.45);
  z-index: 999;
  transition: all var(--transition);
  animation: call-pulse 3s infinite;
}

.floating-call i {
  font-size: 1.1rem;
  transform: scaleX(-1);
}

.floating-call:hover {
  background: #0b3d2e;
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(26, 107, 71, 0.65);
  color: var(--white);
}

.call-text {
  font-family: var(--font-body);
  letter-spacing: 0.02em;
}

@keyframes call-pulse {
  0%,
  100% {
    box-shadow: 0 4px 20px rgba(26, 107, 71, 0.45);
  }

  50% {
    box-shadow: 0 4px 32px rgba(26, 107, 71, 0.75);
  }
}

/* ─── BACK TO TOP ────────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 96px;
  right: 28px;
  width: 42px;
  height: 42px;
  background: var(--green-dark);
  border-radius: 50%;
  color: var(--white);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--green-mid);
}

/* ─── SCROLL ANIMATIONS ──────────────────────────────────────── */
.animate-fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.animate-fade-up.animated {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 {
  transition-delay: 0.15s !important;
}

.delay-2 {
  transition-delay: 0.3s !important;
}

.delay-3 {
  transition-delay: 0.45s !important;
}

.delay-4 {
  transition-delay: 0.6s !important;
}

.delay-5 {
  transition-delay: 0.75s !important;
}

/* ─── LUXURY GRID OVERRIDE ───────────────────────────────────── */
.luxury-grid {
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */

/* Tablet: 1024px */
@media (max-width: 1024px) {
  .packages-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .luxury-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .mini-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

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

  .nav-links {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .testimonial-carousel {
    grid-template-columns: 1fr;
  }
}

/* Tablet: hero form adjustments */
@media (max-width: 1100px) {
  .hero-contact-form {
    right: 24px;
    width: 290px;
  }
}

@media (max-width: 900px) {
  .hero-contact-form {
    position: static;
    transform: none;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    border-radius: 12px;
  }
}

/* Mobile: 768px */
@media (max-width: 768px) {
  :root {
    --nav-height: 64px;
    --topbar-height: 0px;
  }

  #top-bar {
    display: none;
  }

  .logo img {
    height: 46px;
  }

  /* Slider mobile */
  .hero-bismillah-deco {
    display: none;
  }

  .slide-title {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }

  .slide-subtitle {
    font-size: 0.9rem;
    margin-bottom: 24px;
  }

  .slide-eyebrow {
    font-size: 0.63rem;
    letter-spacing: 0.12em;
    margin-bottom: 14px;
  }

  .slider-prev {
    left: 0;
  }

  .slider-next {
    right: 0;
  }

  .slider-arrow {
    height: 44px;
    padding: 0 18px;
    gap: 12px;
  }

  .arrow-label {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
  }

  .slider-arrow i {
    font-size: 0.6rem;
  }

  .slide-counter {
    display: none;
  }

  .slide-ctas {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .slide .container {
    padding-bottom: 100px;
  }

  .hero-scroll-down {
    display: none;
  }

  .slider-bottom {
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
  }

  /* Search widget on mobile — stack fields */
  .hero-search-wrap {
    bottom: 12px;
  }

  .search-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .search-tab {
    font-size: 0.66rem;
    padding: 10px 8px;
    flex-shrink: 0;
  }

  .search-fields {
    flex-direction: column;
  }

  .search-field {
    padding: 12px 16px;
  }

  .search-divider {
    width: 100%;
    height: 1px;
    margin: 0;
  }

  .search-go-btn {
    padding: 16px;
    justify-content: center;
    width: 100%;
  }

  .slide .container {
    padding-bottom: 340px;
  }

  .section {
    padding: 60px 0;
  }

  .packages-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

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

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

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

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

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .featured-luxury {
    transform: scale(1);
  }

  .featured-luxury:hover {
    transform: translateY(-6px);
  }

  .countdown-timer {
    padding: 16px 20px;
    gap: 6px;
  }

  .count-number {
    font-size: 2rem;
  }

  .stats-inner {
    gap: 12px;
  }

  .stat-divider {
    display: none;
  }

  .d-none-mobile {
    display: none;
  }

  .urgent-strip {
    flex-direction: column;
  }

  .urgent-cta {
    width: 100%;
    justify-content: center;
  }

  .press-logos {
    gap: 12px;
  }

  .press-logo-item {
    padding: 10px 18px;
  }

  .newsletter-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .newsletter-form {
    width: 100%;
  }

  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
  }

  .footer-bottom-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .hajj-trust-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .final-cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .final-trust-bar {
    flex-direction: column;
    gap: 12px;
  }

  .google-overall {
    flex-direction: column;
  }

  .carousel-controls {
    flex-wrap: wrap;
  }
}

/* Small mobile: 480px */
@media (max-width: 480px) {
  .mini-cards-grid {
    grid-template-columns: 1fr;
  }

  .hero-badge {
    font-size: 0.72rem;
    padding: 6px 14px;
  }

  .bismillah {
    font-size: 1.4rem;
  }

  .filter-tabs {
    gap: 6px;
  }

  .filter-tab {
    padding: 7px 14px;
    font-size: 0.76rem;
  }
}

/* iOS / touch: disable parallax (background-attachment: fixed doesn't work on iOS) */
@supports (-webkit-overflow-scrolling: touch) {
  .hero-section {
    background-attachment: scroll;
  }
}

@media (hover: none) and (pointer: coarse) {
  .hero-section {
    background-attachment: scroll;
    background-position: center center;
  }
}

/* ─── MOBILE / TABLET NAV (hamburger at 1200px for 11 menu items) ─── */
@media (max-width: 1200px) {
  .hamburger {
    display: flex;
  }

  .nav-links {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 20px 32px;
    border-top: 3px solid var(--gold);
    box-shadow: 4px 0 40px rgba(0, 0, 0, 0.15);
    z-index: 999;
    overflow-y: auto;
    gap: 2px;
  }

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

  .nav-links > li {
    width: 100%;
  }

  .nav-links > li > a {
    width: 100%;
    padding: 11px 16px;
    font-size: 0.88rem;
    justify-content: space-between;
    border-radius: 6px;
  }

  /* Flatten dropdowns in mobile */
  .dropdown,
  .mega-dropdown {
    position: static;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none;
    border: none;
    border-top: none;
    padding: 0;
    background: transparent;
    display: none;
    width: 100%;
  }

  .has-dropdown.open > .dropdown,
  .has-mega.open > .mega-dropdown {
    display: block;
  }

  .dropdown li a {
    padding: 9px 16px 9px 32px;
    font-size: 0.82rem;
    border-bottom: none;
  }

  .dropdown li a:hover {
    padding-left: 36px;
  }

  /* Mega menu flattened */
  .mega-dropdown .container {
    padding: 0;
  }

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

  .mega-col {
    padding: 0;
    border-right: none;
  }

  .mega-promo {
    display: none;
  }

  .mega-label {
    padding: 10px 16px 10px 32px;
    margin: 0;
    border-bottom: 1px solid var(--gray-light);
    font-size: 0.68rem;
  }

  .mega-col ul li a {
    padding: 8px 16px 8px 44px;
    font-size: 0.82rem;
  }

  .mega-inner {
    padding: 0;
  }

  .mega-heading {
    display: block;
    padding: 10px 16px 10px 32px;
    margin-bottom: 0;
    font-size: 0.68rem;
    border-bottom: 1px solid var(--gray-light);
    letter-spacing: 0.06em;
  }

  .mega-cities-list {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════
   TRUSTED BY — AUTHORITY LOGOS CAROUSEL
═══════════════════════════════════════════ */
.logo-carousel-section {
  background: #fff;
  padding: 60px 0 50px;
  overflow: hidden;
}

.logo-carousel-section .section-header {
  text-align: center;
  margin-bottom: 40px;
}

.logo-carousel-section .section-title {
  font-size: 1.8rem;
  color: var(--green-dark);
  margin-bottom: 0;
}

.logo-marquee-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Fade edges */
.logo-marquee-wrapper::before,
.logo-marquee-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.logo-marquee-wrapper::before {
  left: 0;
  background: linear-gradient(to right, #fff 0%, transparent 100%);
}

.logo-marquee-wrapper::after {
  right: 0;
  background: linear-gradient(to left, #fff 0%, transparent 100%);
}

.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: logoScroll 22s linear infinite;
}

.logo-marquee-track:hover {
  animation-play-state: paused;
}

.logo-slide {
  flex: 0 0 auto;
  padding: 10px 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #e8e0d5;
}

.logo-slide:last-child {
  border-right: none;
}

.logo-slide img {
  height: 56px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(40%);
  opacity: 0.8;
  transition:
    filter 0.3s,
    opacity 0.3s,
    transform 0.3s;
}

.logo-slide img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.08);
}

@keyframes logoScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .logo-slide {
    padding: 8px 28px;
  }

  .logo-slide img {
    height: 42px;
    max-width: 100px;
  }

  .logo-marquee-wrapper::before,
  .logo-marquee-wrapper::after {
    width: 60px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER STYLES
   ft-ticker · ft-main · ft-sub-section · ft-bottom
═══════════════════════════════════════════════════════════════ */

/* ─── News Ticker (premium redesign) ─────────────────────────── */
.ft-ticker-bar {
  background: #ffffff;
  padding: 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  overflow: hidden;
}

.ft-ticker-inner {
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border: none;
  border-radius: 0;
  overflow: hidden;
  position: relative;
}

.ft-ticker-label {
  flex-shrink: 0;
  background: var(--gold);
  color: #0b3d2e;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 36px 0 22px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 100%, 0 100%);
}
.ft-ticker-label i {
  font-size: 1rem;
}

.ft-ticker-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 56px;
  display: flex;
  align-items: center;
}

.ft-ticker-viewport::before,
.ft-ticker-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  z-index: 2;
  pointer-events: none;
}
.ft-ticker-viewport::before {
  left: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}
.ft-ticker-viewport::after {
  right: 0;
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.ft-ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  white-space: nowrap;
  animation: ftTicker 70s linear infinite;
  will-change: transform;
}

.ft-news-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  background: #000;
  border: 1px solid #000;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}
.ft-news-item:hover,
.ft-news-item:focus-visible {
  background: #1a1a1a;
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-1px);
  outline: none;
}

.ft-news-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--gold);
  color: #0b3d2e;
  line-height: 1;
  flex-shrink: 0;
}
.ft-news-item[data-cat="hajj"] .ft-news-chip,
.ft-news-item[data-cat="umrah"] .ft-news-chip,
.ft-news-item[data-cat="news"] .ft-news-chip,
.ft-news-item[data-cat="guide"] .ft-news-chip,
.ft-news-item[data-cat="tips"] .ft-news-chip,
.ft-news-item[data-cat="compare"] .ft-news-chip {
  background: var(--gold);
  color: #0b3d2e;
}

.ft-news-title {
  display: inline-block;
  font-family: var(--font-body);
}

@keyframes ftTicker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Pause when hovering any item, not the whole bar — feels more deliberate */
.ft-ticker-track:hover,
.ft-ticker-track:focus-within {
  animation-play-state: paused;
}

@media (max-width: 720px) {
  .ft-ticker-bar {
    padding: 0;
  }
  .ft-ticker-label {
    padding: 0 14px;
    height: 52px;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    gap: 8px;
  }
  .ft-ticker-label i {
    font-size: 0.82rem;
  }
  .ft-ticker-label span {
    display: none;
  }
  .ft-ticker-viewport {
    height: 52px;
  }
  .ft-news-item {
    font-size: 0.78rem;
    padding: 7px 14px 7px 7px;
  }
  .ft-news-chip {
    font-size: 0.58rem;
    padding: 4px 9px;
  }
  .ft-ticker-track {
    gap: 10px;
  }
  .ft-ticker-viewport::before,
  .ft-ticker-viewport::after {
    width: 28px;
  }
}

/* ─── Footer Main ────────────────────────────────────────────── */
#footer {
  background: #000000;
  color: #b8c8c0;
  font-family: var(--font-body);
  font-size: 0.875rem;
}

.ft-main {
  padding: 32px 0;
  background: #000;
}

.ft-main-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}

/* ─── Brand Column ───────────────────────────────────────────── */
.ft-logo-img {
  height: 64px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  margin-bottom: 10px;
  display: block;
}

.ft-company-name {
  color: var(--gold);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 4px 0 18px;
}

.ft-contact-list {
  margin-bottom: 20px;
}

.ft-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.83rem;
  line-height: 1.5;
  color: #a8bab2;
}

.ft-contact-item i {
  color: var(--gold);
  font-size: 0.85rem;
  margin-top: 2px;
  transform: scaleX(-1);
  flex-shrink: 0;
  width: 14px;
}

.ft-contact-item a {
  color: #a8bab2;
  text-decoration: none;
  transition: color 0.2s;
}

.ft-contact-item a:hover {
  color: var(--gold);
}

/* ─── Social Icons ───────────────────────────────────────────── */
.ft-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.ft-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.25);
  color: #a8bab2;
  font-size: 0.82rem;
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    transform 0.2s;
}

.ft-social a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #0b3d2e;
  transform: translateY(-2px);
}

/* ─── Quick Links inside Brand Column ────────────────────────── */
.ft-brand-quick {
  margin: 14px 0 0;
  padding: 0;
  border: none;
}

.ft-brand-quick-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 12px;
  align-items: center;
}

.ft-brand-quick-nav a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #9ab0a6;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0;
  border: none;
  background: transparent;
  transition:
    color 0.2s,
    transform 0.2s;
  line-height: 1.3;
}

.ft-brand-quick-nav a i {
  color: var(--gold);
  font-size: 0.95rem;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  transition: transform 0.2s;
}

.ft-brand-quick-nav a:hover {
  color: var(--gold);
}

.ft-brand-quick-nav a:hover i {
  transform: scale(1.15);
}

/* Title placed ABOVE the links */
.ft-brand-quick-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 0;
  margin: 0 0 10px;
  border: none;
}

/* ─── Quick Links Utility Bar ────────────────────────────────── */
.ft-utility-bar {
  background: #000000;
  border-top: 1px solid rgba(201, 168, 76, 0.18);
  border-bottom: 1px solid rgba(201, 168, 76, 0.1);
  padding: 28px 0 26px;
}

.ft-utility-inner {
  display: block;
  text-align: center;
}

.ft-utility-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 0 0 18px;
  border: none;
  text-align: center;
  white-space: nowrap;
}

.ft-utility-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto;
}

.ft-utility-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: #cfd9d4;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 12px 16px;
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 6px;
  background: transparent;
  transition:
    color 0.2s,
    border-color 0.2s,
    background 0.2s;
  white-space: nowrap;
}

.ft-utility-nav a:last-child {
  border-right: 1px solid rgba(201, 168, 76, 0.3);
}

.ft-utility-nav a i {
  color: var(--gold);
  font-size: 0.9rem;
  opacity: 1;
}

.ft-utility-nav a:hover {
  color: var(--gold);
  background: rgba(201, 168, 76, 0.08);
  border-color: rgba(201, 168, 76, 0.55);
}

.ft-utility-nav a:hover i {
  opacity: 1;
}

/* ─── Footer Headings ────────────────────────────────────────── */
.ft-heading {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  letter-spacing: 0.02em;
}

/* ─── Footer Link Lists ──────────────────────────────────────── */
.ft-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ft-col ul li a {
  color: #9ab0a6;
  text-decoration: none;
  font-size: 0.83rem;
  line-height: 1.4;
  transition:
    color 0.2s,
    padding-left 0.2s;
  display: block;
}

.ft-col ul li a:hover {
  color: var(--gold);
  padding-left: 5px;
}

/* ─── Sub-section Rows (Hajj / Tour of Arabia) ───────────────── */
/* ─── Hajj + Tour of Arabia Extra Section ──────────────────── */
/* ── Hajj + Tour of Arabia footer block ── */
.ft-extra-section {
  background: #000000;
  padding: 28px 0 36px;
  border: none;
}

.ft-panels-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ft-panels-row .ft-tab-panels {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  box-shadow: none;
  min-height: auto;
}

.ft-panels-row .ft-tab-panels::before,
.ft-panels-row .ft-tab-panels::after {
  display: none;
}

.ft-panels-row .ft-tab-panel {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.ft-tab-panel {
  display: none;
}

.ft-tab-panel.active {
  display: flex;
}

.ft-extra-block-heading {
  flex: 0 0 150px;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold);
  margin: 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.2;
}

.ft-links-grid {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.ft-links-grid a {
  color: #9ab0a6;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  display: inline-block;
  padding: 12px 12px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition:
    color 0.2s,
    background 0.2s,
    border-color 0.2s;
}

.ft-links-grid a:hover {
  color: #fff;
  background: rgba(201, 168, 76, 0.1);
  border-color: rgba(201, 168, 76, 0.55);
}

.ft-links-grid a:focus-visible {
  outline: 2px solid rgba(245, 202, 4, 0.55);
  outline-offset: 2px;
}

/* Align footer extra-section panels with the main 4-col grid
   (heading sits under Brand col, chips start under Packages List col) */
.ft-panels-row .ft-tab-panel,
.ft-panels-row .ft-tab-panel.active {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.ft-panels-row .ft-extra-block-heading {
  flex: none;
  width: auto;
  margin: 0;
  grid-column: 1 / 2;
  text-align: left;
  align-self: center;
}
.ft-panels-row .ft-links-grid {
  grid-column: 2 / -1;
  align-self: center;
}

/* Hajj Packages (first panel in the row) — display links in a clean 4×2 grid */
.ft-panels-row .ft-tab-panels:first-child .ft-links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.ft-panels-row .ft-tab-panels:first-child .ft-links-grid a {
  text-align: center;
}

/* Tour of Arabia (second panel in the row) — display links in a clean 4×2 grid */
.ft-panels-row .ft-tab-panels:nth-child(2) .ft-links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.ft-panels-row .ft-tab-panels:nth-child(2) .ft-links-grid a {
  text-align: center;
}
.ft-panels-row .ft-links-grid a i {
  margin-right: 7px;
  color: var(--gold);
  font-size: 0.78rem;
}

@media (max-width: 1024px) {
  .ft-panels-row .ft-tab-panel,
  .ft-panels-row .ft-tab-panel.active {
    grid-template-columns: 1fr 3fr;
    gap: 24px;
  }
  .ft-panels-row .ft-extra-block-heading {
    grid-column: 1 / 2;
  }
  .ft-panels-row .ft-links-grid {
    grid-column: 2 / -1;
  }
}

@media (max-width: 640px) {
  .ft-panels-row .ft-tab-panel,
  .ft-panels-row .ft-tab-panel.active,
  .ft-tab-panel.active {
    grid-template-columns: 1fr;
    flex-direction: column;
    gap: 10px;
  }
  .ft-panels-row .ft-extra-block-heading,
  .ft-panels-row .ft-links-grid {
    grid-column: 1 / -1;
  }
  .ft-extra-block-heading {
    flex: 0 0 auto;
    margin: 0;
  }
  .ft-links-grid a {
    font-size: 0.74rem;
    padding: 8px 14px;
  }
}

/* (FAQ in umrah-packages.html uses the existing T&C collapsible layout: .pd-tnc-*) */

/* ── T&C / FAQ Collapsible (from package detail layout) ── */
.pd-tnc-details {
  border: 1px solid rgba(203, 170, 0, 0.18);
  border-radius: 10px;
  overflow: hidden;
}
.pd-tnc-details + .pd-tnc-details {
  margin-top: 8px;
}

.pd-tnc-summary {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--green-dark);
  padding: 14px 18px;
  cursor: pointer;
  background: #f8f5f0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  user-select: none;
}
.pd-tnc-summary::-webkit-details-marker {
  display: none;
}
.pd-tnc-summary::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.7rem;
  color: var(--gold-dark);
  transition: transform 0.25s;
}

/* FAQ page: left-align question text */
.faq-wrap .pd-tnc-summary {
  justify-content: flex-start;
}

.faq-wrap .pd-tnc-summary::after {
  margin-left: auto;
}

/* Better hover/click affordance */
.faq-wrap .pd-tnc-details {
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}

.faq-wrap .pd-tnc-details:hover {
  border-color: rgba(245, 202, 4, 0.34);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.faq-wrap .pd-tnc-summary:hover {
  background: rgba(203, 170, 0, 0.1);
}
.pd-tnc-details[open] .pd-tnc-summary::after {
  transform: rotate(180deg);
}
.pd-tnc-details[open] .pd-tnc-summary {
  background: rgba(203, 170, 0, 0.08);
}

.pd-tnc-body {
  padding: 16px 20px;
  border-top: 1px solid rgba(203, 170, 0, 0.15);
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: #555;
  line-height: 1.65;
}

.pd-tnc-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pd-tnc-body ul li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: #555;
  line-height: 1.6;
}

.pd-tnc-body ul li::before {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.72rem;
  color: var(--gold-dark);
  flex-shrink: 0;
  margin-top: 3px;
}

.ft-sub-section {
  background: #000000;
  border-top: 1px solid rgba(201, 168, 76, 0.14);
  padding: 18px 0;
}

.ft-sub-row {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Label */
.ft-sub-label {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  min-width: 178px;
  padding-right: 24px;
  margin-right: 24px;
  border-right: 1px solid rgba(201, 168, 76, 0.18);
}

.ft-sub-label i {
  color: var(--gold);
  font-size: 1rem;
  opacity: 0.85;
  flex-shrink: 0;
}

.ft-sub-label h5 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ft-sub-label h5 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.ft-sub-label h5 a:hover {
  color: #e8c96a;
}

/* Tag cloud */
.ft-sub-tags {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.ft-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 50px;
  border: 1px solid rgba(201, 168, 76, 0.2);
  background: rgba(255, 255, 255, 0.03);
  color: #9ab0a6;
  font-family: var(--font-body);
  font-size: 0.775rem;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.22s,
    border-color 0.22s,
    color 0.22s,
    transform 0.22s;
  letter-spacing: 0.01em;
}

.ft-tag:hover {
  background: rgba(201, 168, 76, 0.1);
  border-color: rgba(201, 168, 76, 0.55);
  color: var(--gold);
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .ft-sub-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .ft-sub-label {
    border-right: none;
    border-bottom: 1px solid rgba(201, 168, 76, 0.15);
    padding-right: 0;
    padding-bottom: 10px;
    margin-right: 0;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .ft-tag {
    font-size: 0.73rem;
    padding: 4px 10px;
  }
}

/* ─── Footer Bottom Bar ──────────────────────────────────────── */
.ft-bottom {
  background: #000;
  border-top: 0;
  padding: 20px 0 16px;
}

.ft-bottom-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.12);
  text-align: center;
}
.ft-bottom-tagline {
  margin: 0;
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ft-bottom-logo-img {
  height: 64px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: inline-block;
}

/* Accreditation strip — matches Image #33: bigger logos over a light
   plate (needed so dark-blue crests read on the dark footer bg), tiny
   caption below each. Row wraps on narrow viewports. */
.ft-accreditations {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 8px;
  padding: 6px 0 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.12);
}
.ft-accred-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 150px;
  transition: transform 0.2s ease;
}
.ft-accred-item:hover {
  transform: translateY(-2px);
}
.ft-accred-item img {
  height: 60px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.ft-accred-item figcaption {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d9c07a;
  line-height: 1.3;
  text-align: center;
  max-width: 140px;
}

@media (max-width: 640px) {
  .ft-accreditations {
    gap: 8px 4px;
    padding: 4px 0 14px;
  }
  .ft-accred-item {
    max-width: 110px;
    gap: 6px;
  }
  .ft-accred-item img {
    height: 46px;
    padding: 0;
    border-radius: 0;
  }
  .ft-accred-item figcaption {
    font-size: 0.58rem;
    letter-spacing: 0.05em;
  }
}

/* Text-based payment icons (UPI, Razorpay) — match the FontAwesome
   payment icons' visual weight next to real card glyphs. */
.ft-payment-text {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  color: #cbd5cf;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.ft-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  gap: 12px;
}

.ft-bottom-inner p {
  margin: 0;
  font-size: 0.8rem;
  color: #6a8078;
}

.ft-bottom-inner a {
  color: var(--gold);
  text-decoration: none;
}

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

.ft-payment {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ft-payment span {
  font-size: 0.78rem;
  color: #6a8078;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.ft-payment i {
  font-size: 1.6rem;
  color: #8aa09a;
  transition: color 0.2s;
}

.ft-payment i:hover {
  color: var(--gold);
}

/* Uploaded payment logos (image_file) — match the FA icon visual weight
   (which is 1.6rem tall). Width auto keeps aspect ratio (PayPal, Razorpay,
   UPI logos are wider than tall). */
.ft-payment-img {
  display: inline-block;
  height: 22px;
  width: auto;
  max-width: 60px;
  object-fit: contain;
  vertical-align: middle;
  filter: brightness(0.95);
  transition: filter 0.2s, transform 0.2s;
}

.ft-payment-img:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* Anchor wrapper (when payment method has link_url) — reset inline styling
   so the icon/image inside sits flush with siblings. */
.ft-payment a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ft-main-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .ft-sub-grid {
    grid-template-columns: 160px 1fr 1fr;
  }

  .ft-sub-grid .ft-sub-links:last-child {
    grid-column: 2 / span 2;
  }
}

@media (max-width: 768px) {
  .ft-main-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ft-main {
    padding: 32px 0;
  }

  .ft-sub-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .ft-sub-label {
    grid-column: 1 / -1;
  }

  .ft-sub-grid .ft-sub-links:last-child {
    grid-column: auto;
  }

  .ft-bottom-inner {
    flex-direction: column;
    text-align: center;
  }

  .ft-utility-label {
    font-size: 1.25rem;
    letter-spacing: 0.16em;
    padding-bottom: 14px;
  }

  .ft-utility-nav {
    max-width: 420px;
    gap: 8px;
  }

  .ft-utility-nav a {
    padding: 10px 12px;
    font-size: 0.78rem;
  }
}

@media (max-width: 480px) {
  .ft-sub-grid {
    grid-template-columns: 1fr;
  }

  .ft-social a {
    width: 30px;
    height: 30px;
    font-size: 0.75rem;
  }
}

/* ═══════════════════════════════════════════
   5C. UMRAH PACKAGES BY DURATION — Choose Your Umrah Journey
   ═══════════════════════════════════════════ */
.uj-section {
  background: #f8f5ef;
  padding: 96px 0 88px;
  position: relative;
  overflow: hidden;
}
.uj-header {
  text-align: center;
  max-width: 1150px;
  margin: 0 auto 40px;
}
.uj-ornament {
  color: var(--gold);
  font-size: 1.15rem;
  margin-bottom: 14px;
  letter-spacing: 6px;
}
.uj-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-dark);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.uj-title {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 3.6vw, 2.85rem);
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.2;
  margin: 0 0 14px;
}
.uj-title em {
  font-style: italic;
  color: var(--gold-dark);
}
.uj-desc {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--gray-mid);
  margin: 0;
}
.uj-pretitle {
  margin: 0 0 10px !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(1.9rem, 3vw, 2.4rem) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: var(--green-dark) !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
}
.uj-pretitle em {
  font-style: italic !important;
  font-weight: 600 !important;
  color: var(--gold-dark) !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
}

/* Duration tabs */
.uj-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 42px;
}
.uj-tab {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--green-dark);
  background: #fff;
  border: 1px solid rgba(11, 61, 46, 0.12);
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.22s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.uj-tab:hover {
  border-color: var(--gold);
  color: var(--gold-dark);
}
.uj-tab-active {
  background: var(--gold);
  border-color: var(--gold-dark);
  color: var(--green-dark);
  box-shadow: 0 4px 14px rgba(203, 170, 0, 0.35);
}

/* Slider */
.uj-slider-wrap {
  position: relative;
  padding: 0 44px;
}
.uj-viewport {
  overflow: hidden;
}
.uj-track {
  display: flex;
  gap: 20px;
  scroll-behavior: smooth;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px 4px 8px;
}
.uj-track::-webkit-scrollbar {
  display: none;
}

/* Cards */
.uj-card {
  flex: 0 0 calc((100% - 60px) / 4);
  min-width: 240px;
  height: 500px;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow: 0 10px 28px rgba(30, 24, 12, 0.14);
  background: #1a1410;
}
@media (max-width: 900px) {
  .uj-card {
    height: 520px;
  }
}
@media (max-width: 560px) {
  .uj-card {
    height: 540px;
  }
}
.uj-card-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}
.uj-card:hover .uj-card-img {
  transform: scale(1.06);
}
.uj-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11, 30, 20, 0.86) 0%,
    rgba(11, 30, 20, 0.55) 40%,
    rgba(11, 30, 20, 0.05) 70%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Card inner content stack */
.uj-card-content {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
}
.uj-badge {
  align-self: flex-start;
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 0 !important;
  border-radius: 0 !important;
  white-space: nowrap;
  background: transparent !important;
  color: #fff;
  border: 0 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  box-shadow: none;
}
.uj-badge-gold,
.uj-badge-light,
.uj-badge-dark {
  background: transparent !important;
  color: #fff;
  border: 0 !important;
}

.uj-card-body {
  margin-top: auto;
  padding-bottom: 0;
  color: #fff;
}
.uj-card-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.2;
}

/* Day tab — replaces the plain "03 Days Umrah" heading. Bold number on
   left, "Days / Umrah" label on right, wrapped in a gold gradient pill so
   it reads like a proper tab badge. */
.uj-day-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 8px 16px 8px 12px;
  margin: 0 0 12px;
  background: linear-gradient(
    91deg,
    rgba(203, 170, 0, 0.28),
    rgba(203, 170, 0, 0.08)
  );
  border: 1px solid rgba(245, 202, 4, 0.55);
  border-radius: 12px;
  color: #fff;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}
.uj-day-num {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  letter-spacing: 0.02em;
}
.uj-day-text {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.1;
}

/* Price + sharing row — replaces the old "Quick Spiritual Reset" tag.
   Sharing pill on the left, price on the right. */
.uj-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 0;
}
.uj-share-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
.uj-share-badge i {
  color: var(--gold);
  font-size: 0.62rem;
}
.uj-price {
  font-family: var(--font-number);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--gold);
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.uj-price-slash {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-left: 1px;
  font-weight: 600;
}
.uj-pills {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.uj-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.uj-pill i {
  color: var(--gold);
  font-size: 0.7rem;
}
.uj-tag {
  align-self: flex-start;
  background: var(--gold);
  color: var(--green-dark);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  margin-top: 2px;
}
.uj-cta {
  display: block;
  margin: 16px 0 0;
  padding: 14px 16px;
  background: var(--gold);
  color: var(--green-dark);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
  transition: background 0.2s ease;
}
.uj-cta:hover {
  background: var(--gold-dark);
  color: #fff;
}

/* View All Packages footer — two-line CTA styled as the site's standard
 * gold-gradient button: small eyebrow "10 Days Umrah Packages" above the
 * bold "View All Packages" title, dark-green text on gold gradient. */
.uj-footer {
  text-align: center;
  margin-top: 44px;
}
.uj-view-all {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 16px 44px;
  background: linear-gradient(135deg, #e8c358 0%, #c89d00 100%);
  color: var(--green-dark);
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(200, 157, 0, 0.32);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    filter 0.3s ease;
}
.uj-view-all-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--green-dark);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.15;
  opacity: 0.85;
}
.uj-view-all-title {
  display: block;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--green-dark);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;
}
.uj-view-all:hover {
  transform: translateY(-3px);
  filter: brightness(1.05);
  box-shadow: 0 20px 42px rgba(200, 157, 0, 0.44);
}
@media (max-width: 640px) {
  .uj-view-all {
    padding: 14px 32px;
  }
  .uj-view-all-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
  }
  .uj-view-all-title {
    font-size: 1rem;
  }
}

/* Arrows */
.uj-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--green-dark);
  border: 1px solid rgba(11, 61, 46, 0.12);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  z-index: 3;
  transition: all 0.2s ease;
}
.uj-arrow:hover {
  background: var(--gold);
  color: var(--green-dark);
  border-color: var(--gold-dark);
}
.uj-prev {
  left: 0;
}
.uj-next {
  right: 0;
}

@media (max-width: 900px) {
  .uj-card {
    flex: 0 0 calc((100% - 20px) / 2);
  }
}
@media (max-width: 560px) {
  .uj-slider-wrap {
    padding: 0 8px;
  }
  .uj-card {
    flex: 0 0 82%;
  }
  .uj-arrow {
    width: 36px;
    height: 36px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Mobile polish — general shrink/adjust for the sections we've
   touched: section eyebrows, Short Umrah tabs, Umrah Land meta,
   Umrah With Holiday price row, Book Now popup safe-area.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Section eyebrow pills — pack tighter */
  .pop-quote,
  .lux-tagline,
  .ram-eyebrow,
  .hajj-eyebrow,
  #iraq-ziyarat .hajj-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    padding: 5px 12px;
  }
  .ram-eyebrow-icon,
  .hajj-eyebrow-icon,
  #iraq-ziyarat .hajj-eyebrow-icon {
    width: 11px;
    height: 11px;
  }

  /* Short Umrah tabs — smaller & scroll horizontally */
  .uj-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    padding: 4px 4px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 202, 4, 0.45) transparent;
    -webkit-overflow-scrolling: touch;
  }
  .uj-tab {
    padding: 7px 14px;
    font-size: 0.7rem;
    flex-shrink: 0;
  }

  /* Umrah Land card image bottom-left meta */
  .corp-card-meta {
    font-size: 0.7rem;
    gap: 6px;
    left: 10px;
    bottom: 10px;
  }
  .corp-card-meta i {
    font-size: 0.72rem;
  }

  /* Umrah With Holiday — allow sharing pill to wrap under price */
  #umrah-holiday .hajj-price-block {
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 4px;
  }
  #umrah-holiday .hajj-sharing {
    font-size: 0.62rem;
    padding: 3px 10px;
  }

  /* Iraq / Umrah With Holiday cards — tighter chips */
  #iraq-ziyarat .hajj-card .pkg-inclusions {
    gap: 4px;
  }

  /* Discover section — smaller PP suffix and tighter meta on mobile */
  .dcard-price::after {
    font-size: 0.5em;
  }
  .intl-tile-price::after {
    font-size: 0.9em;
  }
}

/* Extra-small screens (≤ 400px) */
@media (max-width: 400px) {
  .pop-main-title,
  .lux-title,
  .ram-title,
  .hajj-title,
  #land-packages .land-title {
    font-size: 1.55rem;
  }
  .pop-desc,
  .lux-desc,
  .ram-desc,
  .hajj-desc,
  #land-packages .land-desc {
    font-size: 0.86rem;
    line-height: 1.65;
  }
  .intl-filter-chip {
    padding: 4px 9px;
    font-size: 0.65rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Home FAQ — cream section, gold sunburst, dark master accordion
   containing a stack of cream Q&A rows with rotating +/- icons.
   ═══════════════════════════════════════════════════════════════ */
.hf-section {
  background: #faf3e3;
  padding: 80px 0 90px;
}
.hf-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 40px;
}
.hf-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #b8862c;
  margin: 0 auto 14px;
}
.hf-star svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hf-eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  color: #b8862c;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.hf-title {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.15;
  margin: 0;
  letter-spacing: 0.005em;
}
.hf-title em {
  font-style: italic;
  color: #b8862c;
  font-weight: 600;
}

.hf-accordion {
  max-width: 940px;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.1),
    0 4px 14px rgba(0, 0, 0, 0.04);
  background: #fbf5e2;
}

.hf-master-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #16221c;
  color: #fff;
  border: none;
  padding: 22px 28px;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.005em;
  transition: background 0.25s ease;
}
.hf-master-toggle:hover {
  background: #1c2b23;
}
.hf-master-icon {
  color: #d9a94d;
  font-size: 1rem;
  transition: transform 0.3s ease;
}
.hf-accordion:not(.is-open) .hf-master-icon {
  transform: rotate(180deg);
}

.hf-body {
  padding: 22px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hf-accordion:not(.is-open) .hf-body {
  display: none;
}

.hf-item {
  background: #faf3e3;
  border: 1px solid rgba(184, 134, 44, 0.18);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.hf-item[open] {
  border-color: rgba(184, 134, 44, 0.4);
  box-shadow: 0 6px 18px rgba(184, 134, 44, 0.1);
}
.hf-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: 0.005em;
}
.hf-item summary::-webkit-details-marker {
  display: none;
}
.hf-q {
  flex: 1;
  min-width: 0;
}
.hf-plus {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #b8862c;
}
.hf-plus::before,
.hf-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 1px;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}
.hf-plus::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.hf-plus::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}
.hf-item[open] .hf-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.hf-a {
  padding: 0 22px 20px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.65;
  color: #4a4a4a;
}

@media (max-width: 640px) {
  .hf-section {
    padding: 60px 0 70px;
  }
  .hf-title {
    font-size: 1.85rem;
  }
  .hf-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.24em;
  }
  .hf-master-toggle {
    font-size: 1.08rem;
    padding: 18px 20px;
  }
  .hf-body {
    padding: 16px 14px 22px;
    gap: 10px;
  }
  .hf-item summary {
    padding: 14px 18px;
    font-size: 0.98rem;
  }
  .hf-a {
    padding: 0 18px 16px;
    font-size: 0.86rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   RAMADAN BENTO — 4-card mosaic: 1 big left, 2 medium top-right, 1 wide bottom
   Fills the existing #ramadan-packages section. Cards use background-image
   media + dark veil for readable overlay text. Idempotent — safe to hydrate.
   ═══════════════════════════════════════════════════════════════════════ */
.ram-bento {
  display: grid;
  gap: 20px;
  grid-template-columns: 1.35fr 1fr 1fr;
  grid-template-rows: 260px 260px;
  grid-template-areas:
    "big  wide wide"
    "big  tl   tr";
  max-width: 1180px;
  margin: 0 auto;
}
.ram-bento-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(45, 38, 22, 0.14);
  transition:
    transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.45s ease;
  isolation: isolate;
  min-height: 260px;
}
.ram-bento-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 48px rgba(45, 38, 22, 0.22);
}
.ram-bento-card--big {
  grid-area: big;
}
.ram-bento-card--tl {
  grid-area: tl;
}
.ram-bento-card--tr {
  grid-area: tr;
}
.ram-bento-card--wide {
  grid-area: wide;
}

/* Card media (background image, full-cover, subtle zoom on hover) */
.ram-bento-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
  z-index: 0;
}
.ram-bento-card:hover .ram-bento-media {
  transform: scale(1.06);
}

/* Veil for text readability — image shows through cleanly at top, dark only
 * in the bottom third where title/price/CTA sit. Pure black (not green
 * tint) so the photo's real colors stay accurate — no washed-out look. */
.ram-bento-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 45%,
    rgba(0, 0, 0, 0.55) 78%,
    rgba(0, 0, 0, 0.88) 100%
  );
  z-index: 1;
}
.ram-bento-veil--dark {
  /* Same treatment as light — no extra darkening. Keeps Shaban image crisp. */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 45%,
    rgba(0, 0, 0, 0.55) 78%,
    rgba(0, 0, 0, 0.88) 100%
  );
}

/* Top-left dark chip (duration label: "First 10 Days" etc.) */
.ram-bento-chip {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.92);
  color: #0d2b16;
  font-family: "Poppins", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}

/* Top-right gold pill badge (category: "First Ashra" etc.) */
.ram-bento-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  padding: 7px 16px;
  background: linear-gradient(135deg, #e8c358 0%, #c89d00 100%);
  color: #0d2b16;
  font-family: "Poppins", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(200, 157, 0, 0.35);
}
.ram-bento-badge--green {
  background: linear-gradient(135deg, #e8c358 0%, #c89d00 100%);
  color: #0d2b16;
  box-shadow: 0 4px 12px rgba(200, 157, 0, 0.35);
}

/* Card body — anchored to bottom-left */
.ram-bento-body {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  z-index: 2;
}
.ram-bento-title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.ram-bento-card--big .ram-bento-title {
  font-size: 2rem;
}
.ram-bento-card--tl .ram-bento-title,
.ram-bento-card--tr .ram-bento-title {
  font-size: 1.35rem;
}
.ram-bento-card--wide .ram-bento-title {
  font-size: 1.55rem;
}

.ram-bento-price {
  font-family: "Poppins", sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}
.ram-bento-price b {
  font-weight: 700;
  color: #ffd955;
  font-size: 1.05em;
  margin: 0 4px;
}
.ram-bento-price span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85em;
}

.ram-bento-view {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: "Poppins", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #f0d97a !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  box-shadow: none !important;
  width: max-content;
  max-width: 100%;
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}
.ram-bento-card:hover .ram-bento-view {
  color: #ffe066 !important;
}
.ram-bento-view i {
  font-size: 0.85em;
  transition: transform 0.35s ease;
}
.ram-bento-card:hover .ram-bento-view i {
  transform: translateX(3px);
}

.ram-bento-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 22px !important;
  background: linear-gradient(91deg, #b58e00, #e7d32e) !important;
  border: 1px solid #ead201 !important;
  border-radius: 50px !important;
  font-family: "Poppins", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(181, 142, 0, 0.4);
  width: max-content;
  max-width: 100%;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}
.ram-bento-card:hover .ram-bento-cta {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(181, 142, 0, 0.55);
  background: linear-gradient(91deg, #e7d32e, #b58e00) !important;
}
.ram-bento-cta i {
  font-size: 0.85em;
  transition: transform 0.35s ease;
}
.ram-bento-card:hover .ram-bento-cta i {
  transform: translateX(3px);
}

.ram-bento-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}
.ram-bento-cta-row .btn {
  padding: 14px 34px;
  border-radius: 999px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #e8c358 0%, #c89d00 100%);
  color: #0d2b16;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 24px rgba(200, 157, 0, 0.28);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}
.ram-bento-cta-row .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(200, 157, 0, 0.4);
}

@media (max-width: 1024px) {
  .ram-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 320px 220px 220px;
    grid-template-areas:
      "big  big"
      "wide wide"
      "tl   tr";
  }
  .ram-bento-card--big .ram-bento-title {
    font-size: 1.75rem;
  }
}
@media (max-width: 640px) {
  .ram-bento {
    grid-template-columns: 1fr;
    grid-template-rows: 260px 200px 200px 220px;
    grid-template-areas:
      "big"
      "wide"
      "tl"
      "tr";
    gap: 14px;
  }
  .ram-bento-body {
    left: 18px;
    right: 18px;
    bottom: 16px;
  }
  .ram-bento-card--big .ram-bento-title {
    font-size: 1.55rem;
  }
  .ram-bento-card--tl .ram-bento-title,
  .ram-bento-card--tr .ram-bento-title,
  .ram-bento-card--wide .ram-bento-title {
    font-size: 1.25rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   REAL TESTIMONIALS + GOOGLE REVIEWS (.tst)
   Two-column card: dark video panel (left) + cream reviews (right).
   Portrait video thumbnails scroll horizontally; review cards
   likewise scroll with chevron nav buttons on each side.
   ═══════════════════════════════════════════════════════════════ */
.tst {
  background: #faf6ef;
  padding: 80px 0;
}
.tst-grid {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(20, 22, 21, 0.10);
  background: #fff;
}
.tst-grid > * { min-width: 0; }

/* Left column — dark video panel */
.tst-video {
  position: relative;
  padding: 48px 40px;
  color: #fff;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(20,24,26,0.55), rgba(20,24,26,0.82)),
    url('../assets/img/slider/home-banner1.jpeg') center/cover no-repeat;
}
.tst-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #e6c869;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.tst-eyebrow svg {
  color: #ff0000;
  background: #fff;
  border-radius: 5px;
  padding: 2px;
}
.tst-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
  margin: 0 0 26px;
  color: #fff;
}
.tst-title em {
  font-style: italic;
  color: #e6c869;
  font-weight: 700;
}

/* Portrait video card scroller */
.tst-vid-wrap {
  position: relative;
  margin-bottom: 0;
}
.tst-vid-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 14px;
}
.tst-vid-track::-webkit-scrollbar { display: none; }
.tst-thumb {
  position: relative;
  display: block;
  flex: 0 0 calc(50% - 7px);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 14px;
  padding: 5px;
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.5);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tst-thumb:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.6);
}
.tst-thumb img {
  display: block;
  width: 100%;
  height: 307px;
  object-fit: cover;
  border-radius: 10px;
}
.tst-thumb .tst-play {
  position: absolute;
  inset: 5px;
  margin: auto;
  width: 64px;
  height: 46px;
  background: #ff0000;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
.tst-thumb:hover .tst-play {
  transform: scale(1.08);
  background: #e60000;
}
.tst-thumb .tst-play svg { fill: #fff; }

/* Right column — cream reviews panel */
.tst-reviews {
  background: #fffdf6;
  padding: 48px 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tst-rev-h {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  color: #1a1d1c;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.18;
  margin: 0 0 8px;
  text-align: center;
}
.tst-rev-h em {
  color: #d4af37;
  font-style: normal;
}
.tst-rev-sub {
  color: #71776f;
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
  margin: 0 0 24px;
}

/* Rating summary bar */
.tst-rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
  border: 1px solid rgba(58, 63, 60, 0.14);
  border-radius: 10px;
  padding: 8px 18px;
  box-shadow: 0 2px 8px rgba(20, 22, 21, 0.06);
  margin-bottom: 18px;
}
.tst-rate-score {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.tst-rate-num {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 24px;
  color: #1a1d1c;
  line-height: 1;
}
.tst-rate-stars {
  color: #d4af37;
  font-size: 14px;
  letter-spacing: 1.5px;
}
.tst-rate-sub {
  font-size: 12px;
  color: #71776f;
  white-space: nowrap;
}
.tst-g {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.5px;
}
.tst-g .b { color: #4285F4; }
.tst-g .r { color: #EA4335; }
.tst-g .y { color: #FBBC05; }
.tst-g .g { color: #34A853; }

/* Review carousel */
.tst-track-wrap {
  position: relative;
  min-width: 0;
}
.tst-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.tst-track::-webkit-scrollbar { display: none; }

.tst-review {
  flex: 0 0 calc(50% - 8px);
  min-width: 240px;
  background: #fff;
  border: 1px solid rgba(58, 63, 60, 0.14);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 2px 8px rgba(20, 22, 21, 0.06);
}
.tst-review .tst-review-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.tst-review .tst-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 15px;
  overflow: hidden;
}
.tst-review .tst-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tst-review .tst-name {
  font-size: 15px;
  font-weight: 700;
  color: #161a18;
  display: block;
}
.tst-review .tst-ago {
  font-size: 12.5px;
  color: #71776f;
}
.tst-review .tst-gi {
  margin-left: auto;
  align-self: flex-start;
  font-weight: 700;
  color: #4285F4;
  font-size: 15px;
}
.tst-review .tst-review-stars {
  color: #d4af37;
  font-size: 15px;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.tst-review p {
  font-size: 14px;
  color: #2f3431;
  line-height: 1.6;
  margin: 0;
}

/* Chevron nav — round white buttons floating just outside the tracks */
.tst-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(58, 63, 60, 0.14);
  box-shadow: 0 2px 8px rgba(20, 22, 21, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1a1d1c;
  z-index: 2;
  transition: background 0.2s ease;
}
.tst-nav:hover { background: #faf6ef; }
.tst-vid-wrap .tst-nav.prev,
.tst-track-wrap .tst-nav.prev { left: -18px; }
.tst-vid-wrap .tst-nav.next,
.tst-track-wrap .tst-nav.next { right: -18px; }

/* Responsive — stack columns on tablets */
@media (max-width: 900px) {
  .tst-grid { grid-template-columns: 1fr; }
  .tst-review { flex-basis: 80%; }
  .tst-nav.prev { left: 4px; }
  .tst-nav.next { right: 4px; }
}
@media (max-width: 600px) {
  .tst-thumb { flex-basis: 100%; }
  .tst-thumb img { height: 300px; }
  .tst-video, .tst-reviews { padding: 40px 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   BOOK NOW BUTTON — unified gold-gradient theme.
   Overrides the WhatsApp-green defaults still present in several
   inline <style> blocks (.pd-cta-wa, .r-wa, .vs-pack-btn--wa) and
   the global .hajj-btn-wa. !important is used because the inline
   template styles cascade after this file — this block must win.
   ═══════════════════════════════════════════════════════════════ */
.hajj-btn-wa,
.pd-cta-wa,
.r-wa,
.vs-pack-btn--wa {
  background: linear-gradient(91deg, #b58e00, #e7d32e) !important;
  border: 1px solid #ead201 !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(184, 134, 44, 0.3) !important;
}

.hajj-btn-wa:hover,
.pd-cta-wa:hover,
.r-wa:hover,
.vs-pack-btn--wa:hover {
  background: linear-gradient(91deg, #e7d32e, #b58e00) !important;
  border-color: #ead201 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(184, 134, 44, 0.42) !important;
  transform: translateY(-1px);
}