/* ==========================================================================
   Al Nisar Umrah & Travel Services
   Exact Pixel-Perfect Styles matching Figma Design & Dev Mode Specs
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Cinzel:wght@600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&family=Hind+Siliguri:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&family=Noto+Sans+Bengali:wght@400;500;600;700&display=swap');
@import url('schedule-board.css');

/* ==========================================================================
   Bengali Digit '১' (One) Dedicated Crisp Font Override
   Hind Siliguri has an unreadable closed loop for numeral '১' (looks like 0).
   This targets ONLY character '১' (U+09E7) and renders it using Noto Sans Bengali,
   while retaining 100% of Hind Siliguri for all other letters and numbers!
   ========================================================================== */
@font-face {
  font-family: 'BengaliDigitOne';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../assets/fonts/NotoSansBengali-Regular.ttf') format('truetype'),
       url('assets/fonts/NotoSansBengali-Regular.ttf') format('truetype'),
       local('Noto Sans Bengali'), local('Kalpurush'), local('SolaimanLipi'), local('Vrinda'),
       url('https://fonts.gstatic.com/s/notosansbengali/v33/Cn-SJsCGWQxOjaGwMQ6fIiMywrNJIky6nvd8BjzVMvJx2mcSPVFpVEqE-6KmsolLudA.ttf') format('truetype');
  unicode-range: U+09E7;
}

@font-face {
  font-family: 'BengaliDigitOne';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url('../assets/fonts/NotoSansBengali-Bold.ttf') format('truetype'),
       url('assets/fonts/NotoSansBengali-Bold.ttf') format('truetype'),
       local('Noto Sans Bengali Bold'), local('Noto Sans Bengali'), local('Kalpurush'), local('SolaimanLipi'),
       url('https://fonts.gstatic.com/s/notosansbengali/v33/Cn-SJsCGWQxOjaGwMQ6fIiMywrNJIky6nvd8BjzVMvJx2mcSPVFpVEqE-6Kmsm5MudA.ttf') format('truetype');
  unicode-range: U+09E7;
}

:root {
  /* Brand Colors from Figma */
  --color-green-primary: #146356;  /* rgb(20, 99, 86) */
  --color-green-hover:   #0f4f44;
  --color-dark-bg:       #0B1D26;  /* rgb(11, 29, 38) */
  --color-gold-text:     #E8D5A6;  /* rgb(232, 213, 166) */
  --color-gold-logo:     #CC992D;  /* rgb(204, 153, 45) */
  --color-gold-accent:   #C6A15B;  /* exact Figma gold for tags and accents */
  --color-cream-text:    #FBF7EE;  /* rgb(251, 247, 238) */
  --color-cream-bg:      #FBF7EE;  /* rgb(251, 247, 238) exact Figma canvas bg */
  --color-white:         #FFFFFF;

  /* Typography */
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-stats:   'Cinzel', 'Cormorant Garamond', Georgia, serif;

  /* Layout */
  --container-max-w: 1134px;
}

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

html, body {
  background-color: #FBF7EE;
}

h1, h2, h3, h4, h5, h6 {
  font-variant-numeric: lining-nums;
  -webkit-font-feature-settings: "lnum" 1;
  font-feature-settings: "lnum" 1;
}

body {
  font-family: var(--font-body);
  color: var(--color-dark-bg);
  background-color: #FBF7EE;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* 1134px Centered Container (Leaves exact 153px on left & right in 1440px viewport) */
.figma-container {
  width: 100%;
  max-width: var(--container-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 1180px) {
  .figma-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ==========================================================================
   1. TOPBAR (Height: 36px, Background: #0B1D26, Gold text #E8D5A6)
   ========================================================================== */
.topbar {
  background-color: var(--color-dark-bg);
  height: 36px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(232, 213, 166, 0.08);
  position: relative;
  z-index: 10001;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.topbar__contact {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* Phone & Email: Flexible width, prevent collision & clipping */
.topbar__contact-phone1,
.topbar__contact-phone2,
.topbar__contact-email {
  width: auto !important;
  max-width: none !important;
  height: auto;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0%;
  color: var(--color-gold-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}

.topbar__contact-phone1:hover,
.topbar__contact-phone2:hover,
.topbar__contact-email:hover {
  opacity: 0.8;
}

/* Dot separator: 4px circle */
.topbar__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-gold-text);
  display: inline-block;
  flex-shrink: 0;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Social icons: WhatsApp, Facebook, Instagram - all uniform 15px */
.topbar__social {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar__social a {
  color: var(--color-gold-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.topbar__social a:hover {
  opacity: 0.75;
  transform: translateY(-1px);
}

.topbar__social svg {
  width: 15px;
  height: 15px;
  fill: var(--color-gold-text);
  display: block;
}

.topbar__lang {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  border: 1px solid transparent;
}

.topbar__lang:hover,
.topbar__lang.is-open {
  background-color: rgba(232, 213, 166, 0.15);
  border-color: rgba(232, 213, 166, 0.3);
}

/* Flag: 24px x 16px, radius: 2px */
.topbar__lang-flag {
  width: 24px;
  height: 16px;
  border-radius: 2px;
  object-fit: cover;
  display: block;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.topbar__lang-text {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  color: var(--color-gold-text);
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
}

.topbar__lang-caret {
  transition: transform 0.2s ease;
}

.topbar__lang.is-open .topbar__lang-caret {
  transform: rotate(180deg);
}

/* Dropdown Menu */
.topbar__lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 165px;
  background-color: #0B1D26;
  border: 1px solid rgba(232, 213, 166, 0.35);
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
  padding: 6px;
  z-index: 1000000;
  display: none;
  flex-direction: column;
  gap: 3px;
}

.topbar__lang.is-open .topbar__lang-dropdown {
  display: flex;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #FFFFFF;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.lang-option:hover {
  background-color: rgba(20, 99, 86, 0.6);
  color: #E8D5A6;
}

.lang-option.is-active {
  background-color: rgba(20, 99, 86, 0.9);
  color: #E8D5A6;
  font-weight: 700;
}

.lang-option__flag {
  width: 22px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.lang-option__label {
  flex: 1;
  white-space: nowrap;
}

.lang-option__check {
  font-size: 12px;
  color: #E8D5A6;
  opacity: 0;
}

.lang-option.is-active .lang-option__check {
  opacity: 1;
}

/* Mobile Drawer Language Switcher - Strictly Hidden on Desktop */
.navbar__mobile-lang-group {
  display: none !important;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #ECE7DE;
}

.navbar__mobile-lang-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  color: #146356;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.navbar__mobile-lang-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.mobile-lang-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  background-color: #FBF7EE;
  border: 1px solid rgba(196, 171, 118, 0.4);
  border-radius: 8px;
  cursor: pointer;
  color: #0B1D26;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.mobile-lang-btn img {
  width: 22px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.mobile-lang-btn:hover {
  background-color: #146356;
  color: #FFFFFF;
}

.mobile-lang-btn.is-active {
  background-color: #146356;
  color: #FFFFFF;
  border-color: #146356;
  box-shadow: 0 2px 8px rgba(20, 99, 86, 0.25);
}

/* RTL / Arabic & Urdu Language Enhancements */
html[dir="rtl"] {
  direction: rtl;
  text-align: right;
  font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .about-heading,
html[dir="rtl"] .airline-heading,
html[dir="rtl"] .airline-feature-title,
html[dir="rtl"] .services-heading,
html[dir="rtl"] .packages-heading,
html[dir="rtl"] .package-card__title,
html[dir="rtl"] .schedule-title,
html[dir="rtl"] .departure-day,
html[dir="rtl"] .faqs-heading,
html[dir="rtl"] .testimonials-title,
html[dir="rtl"] .booking-title,
html[dir="rtl"] .cta-banner-title,
html[dir="rtl"] .service-modal-title,
html[dir="rtl"] .about-hero__title,
html[dir="rtl"] .about-story__title,
html[dir="rtl"] .about-services-banner__title,
html[dir="rtl"] .contact-hero__title,
html[dir="rtl"] .contact-office__title {
  font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

html[dir="rtl"] .phone-ltr,
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] .topbar__contact {
  direction: ltr !important;
  display: inline-block;
  unicode-bidi: embed;
}

html[dir="rtl"] .topbar__inner {
  flex-direction: row-reverse;
}

html[dir="rtl"] .topbar__lang-dropdown {
  right: auto;
  left: 0;
}

html[dir="rtl"] .lang-option {
  text-align: right;
  flex-direction: row-reverse;
}

html[dir="rtl"] .hero-actions {
  flex-direction: row-reverse;
}

html[dir="rtl"] .departure-row {
  direction: rtl;
}

html[dir="rtl"] .departure-meta {
  border-left: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding-left: 0 !important;
  padding-right: 12px !important;
}

html[dir="rtl"] .service-modal-close {
  right: auto !important;
  left: 16px !important;
}

html[dir="rtl"] .service-item__link-arrow,
html[dir="rtl"] .package-card__btn-arrow {
  transform: rotate(180deg);
}

html[dir="rtl"] .service-item:hover .service-item__link-arrow,
html[dir="rtl"] .package-card__btn:hover .package-card__btn-arrow {
  transform: rotate(180deg) translateX(4px);
}

html[dir="rtl"] .package-card__route {
  direction: ltr !important;
}
html[dir="rtl"] .package-card__image {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
}

/* Bengali (BN) Typography Enhancements with Hind Siliguri & BengaliDigitOne */
html[lang="bn"],
body.lang-bn,
html[lang="bn"] body {
  direction: ltr;
  text-align: left;
  font-family: 'BengaliDigitOne', 'Hind Siliguri', 'Noto Sans Bengali', 'Manrope', 'Segoe UI', Arial, sans-serif !important;
}

html[lang="bn"] h1,
html[lang="bn"] h2,
html[lang="bn"] h3,
html[lang="bn"] h4,
html[lang="bn"] h5,
html[lang="bn"] h6,
html[lang="bn"] p,
html[lang="bn"] span,
html[lang="bn"] a,
html[lang="bn"] button,
html[lang="bn"] input,
html[lang="bn"] textarea,
html[lang="bn"] label,
html[lang="bn"] .hero-title,
html[lang="bn"] .about-heading,
html[lang="bn"] .services-heading,
html[lang="bn"] .packages-heading,
html[lang="bn"] .package-card__title,
html[lang="bn"] .schedule-title,
html[lang="bn"] .departure-day,
html[lang="bn"] .faqs-heading,
html[lang="bn"] .testimonials-title,
html[lang="bn"] .booking-title,
html[lang="bn"] .cta-banner-title,
html[lang="bn"] .service-modal-title,
html[lang="bn"] .about-hero__title,
html[lang="bn"] .about-story__title,
html[lang="bn"] .about-services-banner__title,
html[lang="bn"] .contact-hero__title,
html[lang="bn"] .contact-office__title,
html[lang="bn"] .navbar__menu-link,
html[lang="bn"] .navbar__cta-btn,
html[lang="bn"] .faq-help-card__btn {
  font-family: 'BengaliDigitOne', 'Hind Siliguri', 'Noto Sans Bengali', 'Manrope', 'Segoe UI', Arial, sans-serif !important;
}

/* Bengali Navbar Link: Never line break, natural letter spacing */
html[lang="bn"] .navbar__menu-link {
  white-space: nowrap !important;
  word-break: keep-all !important;
  letter-spacing: normal !important;
}

/* Bengali FAQ Button: Single line, no squish */
html[lang="bn"] .faq-help-card__btn {
  font-size: 14px !important;
  white-space: nowrap !important;
  letter-spacing: normal !important;
  width: 100% !important;
  max-width: 288px !important;
}

html[lang="bn"] .faq-help-card__btn span {
  white-space: nowrap !important;
}

/* Bengali Hero Title Specific Sizing (4 clean balanced lines) */
html[lang="bn"] .hero-title {
  font-size: 42px !important;
  line-height: 52px !important;
}

@media (max-width: 992px) {
  html[lang="bn"] .hero-title {
    font-size: 36px !important;
    line-height: 44px !important;
  }
}

@media (max-width: 640px) {
  html[lang="bn"] .hero-title {
    font-size: 28px !important;
    line-height: 36px !important;
  }
}

/* Bengali CTA Banner Title Specific Sizing (Balanced 3-4 lines) */
html[lang="bn"] .cta-banner-title {
  font-size: 38px !important;
  line-height: 48px !important;
  max-width: 580px !important;
}

@media (max-width: 992px) {
  html[lang="bn"] .cta-banner-title {
    font-size: 32px !important;
    line-height: 40px !important;
  }
}

@media (max-width: 640px) {
  html[lang="bn"] .cta-banner-title {
    font-size: 24px !important;
    line-height: 32px !important;
  }
}

html[lang="bn"] .stat-number,
html[lang="bn"] .about-mini-card__num {
  font-family: 'BengaliDigitOne', 'Hind Siliguri', var(--font-body), sans-serif !important;
  white-space: nowrap !important;
}
html[lang="bn"] .stat-number {
  font-size: 38px !important;
}

html[dir="rtl"] .stat-number,
html[dir="rtl"] .about-mini-card__num {
  font-family: 'Cairo', var(--font-body), sans-serif !important;
  white-space: nowrap !important;
}
html[dir="rtl"] .stat-number {
  font-size: 38px !important;
}

/* Testimonials Slider Track must ALWAYS maintain LTR layout so translate3d mathematics never break */
.testimonials-slider-wrapper,
.testimonials-grid,
.testimonial-slider-controls {
  direction: ltr !important;
}

html[dir="rtl"] .testimonial-card {
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .testimonial-text {
  text-align: right !important;
  font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

html[dir="rtl"] .testimonial-author-row {
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .testimonial-name {
  font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

html[dir="rtl"] .testimonial-location {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  direction: rtl !important;
  font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

html[dir="rtl"] .footer-links a svg {
  transform: rotate(180deg);
  margin-right: 0 !important;
  margin-left: 8px !important;
}

html[dir="rtl"] .footer-col {
  text-align: right;
}

/* ==========================================================================
   2. MAIN NAVBAR (Height: 80px, Background: #FFFFFF)
   ========================================================================== */
.navbar {
  background-color: #FFFFFF;
  height: 80px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

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

.navbar__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.navbar__logo img {
  height: 40px;
  width: 136px;
  display: block;
}

.navbar__menu {
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  gap: clamp(12px, 1.8vw, 36px) !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
}

.navbar__menu li {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.navbar__mobile-contact-group {
  display: none !important;
}

.navbar__menu-link {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 24.6px;
  letter-spacing: 0.5px;
  color: var(--color-dark-bg);
  text-decoration: none;
  transition: color 0.2s ease;
  padding: 4px 0;
  display: inline-block;
  position: relative;
  white-space: nowrap !important;
  word-break: keep-all !important;
}

/* Hover state: brand green #146356 (no font-weight change, prevents layout shift) */
.navbar__menu-link:hover {
  color: var(--color-green-primary);
}

/* Active state: brand green #146356, bold 700 */
.navbar__menu-link.active {
  color: var(--color-green-primary);
  font-weight: 700;
}

/* CTA Button: Min 167px x 42px, Radius 8px, Fill #146356 */
.navbar__cta-btn {
  background-color: var(--color-green-primary);
  min-width: 167px;
  width: auto;
  padding: 0 18px;
  height: 42px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.navbar__cta-btn:hover {
  background-color: #0e4c42;
  transform: translateY(-1px);
}

/* CTA Text inside button: Flexible width, perfectly centered */
.navbar__cta-text {
  width: auto;
  min-width: 0;
  height: auto;
  font-family: var(--font-body);
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #FFFFFF;
  text-align: center;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Mobile Toggle */
.navbar__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.navbar__toggle span {
  width: 24px;
  height: 2px;
  background-color: var(--color-dark-bg);
  transition: 0.3s;
}

/* ==========================================================================
   3. HERO SECTION (Background: #0B1D26 + Ambient Green Glow)
   ========================================================================== */
.hero-section {
  background-color: var(--color-dark-bg);
  background-image: 
    radial-gradient(circle at 75% 45%, rgba(20, 99, 86, 0.42) 0%, rgba(11, 29, 38, 0.92) 65%, var(--color-dark-bg) 100%),
    url('../assets/images/hero-bg.webp');
  background-size: cover;
  background-position: center;
  padding: 65px 0 80px;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(11, 29, 38, 0.65);
  z-index: 1;
}

.hero-section .figma-container {
  position: relative;
  z-index: 2;
}

.hero-grid {
  display: grid;
  grid-template-columns: 510px 519px;
  gap: 45px;
  align-items: center;
  justify-content: space-between;
}

/* Left Content */
.hero-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-calligraphy {
  margin-bottom: 2px;
}

.hero-calligraphy img {
  height: 38px;
  width: auto;
  display: block;
}

/* Heading: Cormorant Garamond 700 65px/70px */
.hero-title {
  font-family: var(--font-heading);
  font-size: 65px;
  font-weight: 700;
  line-height: 70px;
  color: #FFFFFF;
  letter-spacing: 0;
  margin: 0;
}

/* Highlighted "Haramain" in Gold #E8D5A6 Bold Italic */
.hero-title-highlight {
  color: var(--color-gold-text);
  font-style: italic;
  font-weight: 700;
}

/* Description: Width 448px, Height 87px, Manrope 400 16px/25px, #FBF7EE */
.hero-description {
  width: 448px;
  min-height: 87px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 25px;
  letter-spacing: 0px;
  color: var(--color-cream-text);
  margin: 0;
}

/* Buttons Container */
.hero-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* Button 1: Plan Your Umrah → (Min 186px x 50px, Radius 12px, Background #146356) */
.btn-primary-hero {
  background-color: var(--color-green-primary);
  min-width: 186px;
  width: auto;
  padding: 0 24px;
  height: 50px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.btn-primary-hero:hover {
  background-color: #0e4c42;
  transform: translateY(-1px);
}

/* Button 1 Text: Flexible width, perfectly centered */
.btn-primary-hero-text {
  width: auto;
  min-width: 0;
  height: auto;
  font-family: var(--font-body);
  font-weight: 500;
  font-style: normal;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #FFFFFF;
  text-align: center;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Button 2: WhatsApp Us (Min 173px x 50px, Radius 12px, 1px White Border, Crisp White Icon) */
.btn-whatsapp-hero {
  background-color: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.85);
  min-width: 173px;
  width: auto;
  padding: 0 20px;
  height: 50px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  flex-shrink: 0;
  white-space: nowrap;
}

.btn-whatsapp-hero:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #FFFFFF;
  transform: translateY(-1px);
}

.btn-whatsapp-hero svg {
  width: 20px;
  height: 20px;
  fill: #FFFFFF;
  display: inline-block;
  flex-shrink: 0;
}

.btn-whatsapp-hero span {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
  color: #FFFFFF;
  white-space: nowrap;
}

/* Right Arched Window Slider Card (519px x 522px, Radius 16px) */
.hero-card-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.hero-slider-card {
  width: 519px;
  height: 522px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  background-color: #0c2830;
}

.hero-slider-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.03);
  transition: opacity 0.4s ease;
}

/* Slider Navigation Buttons: Ellipse 1972 & 1971 (42px x 42px) */
.slider-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(18, 18, 18, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  color: #FFFFFF;
}

.slider-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #FFFFFF;
  transform: translateY(-50%) scale(1.05);
}

.slider-btn--prev {
  left: 14px;
}

.slider-btn--next {
  right: 14px;
}

/* Slider Pagination Dots (Group 2085664332: 12px circles) */
.slider-dots {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
}

.slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #FFFFFF;
  opacity: 0.9;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
  border: none;
  padding: 0;
}

.slider-dot.active {
  background-color: var(--color-green-primary);
  opacity: 1;
  transform: scale(1.1);
}

@media (max-width: 520px) {
  .slider-dots {
    bottom: 14px;
    gap: 5px;
    max-width: 90%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .slider-dot {
    width: 7px;
    height: 7px;
  }
}

/* ==========================================================================
   4. STATS BAR (Height: 145px, Background: #146356)
   ========================================================================== */
.stats-bar {
  background-color: var(--color-green-primary);
  height: 145px;
  display: flex;
  align-items: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  text-align: center;
  width: 100%;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Number: 45px White, flexible line-height, never wraps */
.stat-number {
  font-family: var(--font-stats);
  font-size: 45px;
  font-weight: 700;
  line-height: 1.15;
  color: #FFFFFF;
  letter-spacing: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

/* Label: Manrope 400 16px/24px White */
.stat-label {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #FFFFFF;
  white-space: nowrap;
  text-align: center;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .hero-description {
    width: 100%;
  }
  .hero-slider-card {
    width: 100%;
    max-width: 480px;
    height: 480px;
  }
  .hero-title {
    font-size: 52px;
    line-height: 58px;
  }
}

@media (max-width: 992px) {
  .topbar {
    height: auto;
    padding: 8px 0;
  }
  .topbar__inner {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .topbar__contact {
    justify-content: center;
    flex-wrap: wrap;
  }
  .topbar__contact-phone1,
  .topbar__contact-phone2,
  .topbar__contact-email {
    width: auto;
    height: auto;
  }
  .navbar__menu,
  .navbar__cta-btn {
    display: none;
  }
  .navbar__toggle {
    display: flex;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .hero-content {
    align-items: flex-start;
  }
  .hero-description {
    text-align: left;
  }
  .hero-buttons {
    justify-content: flex-start;
  }
  .hero-card-wrapper {
    justify-content: center;
  }
  .stats-bar {
    height: auto;
    padding: 35px 0;
  }
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 24px;
  }
}

@media (max-width: 640px) {
  .hero-title {
    font-size: 38px;
    line-height: 44px;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-number {
    font-size: 36px;
    line-height: 50px;
  }
  .stat-label {
    font-size: 14px;
    line-height: 22px;
  }
  .hero-slider-card {
    height: 380px;
  }
}

/* ==========================================================================
   GLOBAL SECTION ELEMENTS (Tags, Headings, Subtitles)
   ========================================================================== */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-gold-accent);
  margin-bottom: 12px;
}

.section-tag__line {
  width: 21px;
  height: 1.5px;
  background-color: var(--color-gold-accent);
  display: inline-block;
}

.section-tag__diamond {
  width: 7px;
  height: 7px;
  background-color: var(--color-gold-accent);
  transform: rotate(45deg);
  display: inline-block;
}

.section-tag--center {
  justify-content: center;
  width: 100%;
}

.section-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: var(--color-dark-bg);
  margin: 0 0 16px;
}

.section-title--light {
  color: #FFFFFF;
}

.section-title--center {
  text-align: center;
}

.section-subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #0C282D;
  margin: 0 0 32px;
}

.section-subtitle--light {
  color: var(--color-cream-bg);
  opacity: 0.9;
}

.section-subtitle--center {
  text-align: center;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   4. ABOUT US SECTION (WHO WE ARE)
   ========================================================================== */
.about-section {
  padding: 100px 0;
  background-color: var(--color-cream-bg); /* #FBF7EE exact Figma canvas background */
}

.about-grid {
  display: grid;
  grid-template-columns: 552px 1fr;
  gap: 48px;
  align-items: center;
}

.about-image-card {
  width: 552px;
  height: 750px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(11, 29, 38, 0.12);
  position: relative;
}

.about-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-content {
  display: flex;
  flex-direction: column;
}

/* Tag: WHO WE ARE (width: 98px; height: 12px; font-size: 16px; line-height: 25px; color: #C6A15B) */
.about-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.about-tag__icon {
  width: 34px;
  height: 10px;
  display: block;
  flex-shrink: 0;
}

.about-tag__text {
  width: 98px;
  height: 12px;
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0%;
  color: var(--color-gold-accent);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

/* Heading: One office in Dammam, handling the whole journey. */
.about-heading {
  width: 100%;
  max-width: 538px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-style: normal;
  font-size: 40px;
  line-height: 45px;
  letter-spacing: 0px;
  color: #0C282D;
  margin: 0 0 28px;
}

.about-heading-br-mobile {
  display: none;
}
.about-heading-br-desktop {
  display: inline;
}

/* Features Block */
.about-features {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 32px;
}

.about-feature {
  display: flex;
  flex-direction: column;
}

/* Headline: Your trusted partner for Umrah & travel (width: 296px; height: 12px; font-weight: 600; font-size: 16px; line-height: 25px; color: #146356) */
.about-feature__title {
  width: 296px;
  height: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-style: normal;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0%;
  color: var(--color-green-primary);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
}

/* Body: width: 552px; height: 62px; font-weight: 400; font-size: 16px; line-height: 25px; color: #0C282D */
.about-feature__desc {
  width: 100%;
  max-width: 552px;
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0%;
  color: #0C282D;
  margin: 0;
}

/* 4 Mini Cards Grid (2x2) */
.about-cards-grid {
  display: grid;
  grid-template-columns: 261px 261px;
  gap: 16px;
  margin-bottom: 32px;
}

/* Card Container: 261x97px, bg #FFFFFF, border 1px rgba(12, 40, 45, 0.16), radius 12px */
.about-mini-card {
  width: 261px;
  height: 97px;
  background-color: #FFFFFF !important;
  border: 1px solid rgba(12, 40, 45, 0.12) !important;
  border-radius: 14px !important;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  box-shadow: 0 4px 16px rgba(12, 40, 45, 0.05) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-mini-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(12, 40, 45, 0.09) !important;
}

/* Round Green Icon Badge (Ellipse 2016): 48x48px, #146356 */
.about-mini-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-green-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  flex-shrink: 0;
}

.about-mini-card__content {
  flex: 1;
}

/* Card Number: Cinzel Bold 20px, line-height 24px, color #0C282D */
.about-mini-card__num {
  font-family: var(--font-cinzel);
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #0C282D;
  display: block;
  margin: 0 0 3px;
}

/* Card Subtitle: Manrope 400 13px/16px, color #0C282D */
.about-mini-card__label {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0px;
  color: #0C282D;
  opacity: 0.85;
  margin: 0;
  display: block;
}

/* About Us CTA Button: Min 166px x 50px, radius 12px; Flexible text */
.btn-about {
  min-width: 166px;
  width: auto;
  height: 50px;
  border-radius: 12px;
  background-color: var(--color-green-primary);
  color: #FFFFFF;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  box-sizing: border-box;
  transition: background-color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.btn-about:hover {
  background-color: var(--color-green-hover);
  transform: translateY(-2px);
}

.btn-about__text {
  width: auto;
  min-width: 0;
  height: auto;
  font-family: var(--font-body);
  font-weight: 500;
  font-style: normal;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  white-space: nowrap;
}

/* ==========================================================================
   4B. AIRLINE TICKETING SECTION (Book Your Flight with Ease!)
   Exact Pixel-Perfect Match to Figma node 243:1092
   ========================================================================== */
.airline-ticketing-section {
  padding: 90px 0 100px;
  background-color: var(--color-cream-bg, #FBF7EE);
  position: relative;
  overflow: hidden;
}

.airline-ticketing-grid {
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: clamp(30px, 4vw, 56px);
  align-items: center;
}

/* Left Column */
.airline-content-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.airline-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.airline-tag__icon {
  width: 33px;
  height: 10px;
  object-fit: contain;
}

.airline-tag__text {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #C6A15B;
  text-transform: uppercase;
}

.airline-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(38px, 4.4vw, 58px);
  font-weight: 700;
  line-height: 1.05;
  color: #0C282D;
  margin: 0 0 16px;
  letter-spacing: -0.5px;
}

.airline-heading__ease {
  font-style: italic;
  font-weight: 700;
  color: #146356;
}

.airline-desc {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 25px;
  color: #3A4B4F;
  max-width: 514px;
  margin: 0 0 28px;
}

/* 2x2 Features Grid */
.airline-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
  margin-bottom: 34px;
}

.airline-feature-card {
  background: #FFFFFF;
  border: 1px solid rgba(12, 40, 45, 0.15);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 4px 14px rgba(12, 40, 45, 0.03);
  box-sizing: border-box;
}

.airline-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(12, 40, 45, 0.08);
  border-color: rgba(20, 99, 86, 0.4);
}

.airline-feature-icon-wrap {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 50%;
  background-color: #146356;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(20, 99, 86, 0.25);
}

.airline-feature-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

.airline-feature-info {
  flex: 1;
  min-width: 0;
}

.airline-feature-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: #0C282D;
  line-height: 1.15;
  margin: 0 0 3px;
}

.airline-feature-desc {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  line-height: 17px;
  color: #55666A;
  margin: 0;
}

/* CTA Button */
.airline-cta-wrap {
  display: flex;
  align-items: center;
}

.btn-airline-booking {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 32px;
  background-color: #146356;
  color: #FFFFFF;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 700;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(20, 99, 86, 0.28);
  text-decoration: none;
}

.btn-airline-booking:hover {
  background-color: #0D4A40;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(20, 99, 86, 0.38);
  color: #FFFFFF;
}

/* Right Visual Card */
.airline-visual-col {
  display: flex;
  justify-content: center;
}

.airline-visual-card {
  position: relative;
  max-width: 552px;
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(12, 40, 45, 0.12), 0 6px 18px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  background-color: #FFFFFF;
}

.airline-visual-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 56px rgba(12, 40, 45, 0.18), 0 8px 22px rgba(0, 0, 0, 0.06);
}

.airline-card-img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 552 / 606;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .airline-ticketing-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .airline-content-col {
    align-items: center;
    text-align: center;
  }
  .airline-desc {
    margin-left: auto;
    margin-right: auto;
  }
  .airline-features-grid {
    max-width: 600px;
  }
}

@media (max-width: 640px) {
  .airline-ticketing-section {
    padding: 60px 0 70px;
  }
  .airline-heading {
    font-size: 34px;
  }
  .airline-desc {
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 22px;
  }
  .airline-features-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 26px;
  }
  .airline-feature-card {
    padding: 12px 14px;
    text-align: left;
  }
  .btn-airline-booking {
    width: 100%;
    justify-content: center;
  }
}

/* RTL Support (Arabic & Urdu) */
html[dir="rtl"] .airline-tag {
  flex-direction: row-reverse;
}
html[dir="rtl"] .airline-feature-card {
  flex-direction: row-reverse;
  text-align: right;
}
html[dir="rtl"] .airline-content-col {
  text-align: right;
  align-items: flex-end;
}
@media (max-width: 1024px) {
  html[dir="rtl"] .airline-content-col {
    text-align: center;
    align-items: center;
  }
}

/* ==========================================================================
   5. SERVICES SECTION (WHAT WE HANDLE)
   ========================================================================== */
.services-section {
  padding: 100px 0;
  background-color: var(--color-dark-bg); /* #0B1D26 */
}

.services-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.services-tag__icon {
  width: 34px;
  height: 10px;
  display: block;
  flex-shrink: 0;
}

.services-tag__text {
  width: auto;
  height: auto;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0%;
  color: var(--color-gold-accent);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

.services-heading {
  width: 100%;
  max-width: 447px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-style: normal;
  font-size: 40px;
  line-height: 45px;
  letter-spacing: 0px;
  color: #FFFFFF;
  margin: 0 0 36px;
}

.services-box {
  background-color: #122C38;
  border: 1px solid #395B6B;
  border-radius: 27px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  max-width: 1134px;
}

.service-item {
  padding: 28px 24px 34px;
  border-right: 1px solid #395B6B;
  border-bottom: 1px solid #395B6B;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 175px;
  box-sizing: border-box;
  background-color: #122C38;
  transition: background-color 0.25s ease;
}

.service-item:nth-child(4n) {
  border-right: none;
}

.service-item:nth-child(n+5) {
  border-bottom: none;
}

.service-item:hover {
  background-color: #193C4C;
}

.service-item__top {
  display: flex;
  flex-direction: column;
}

.service-item__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-style: normal;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #FFFFFF;
  margin: 0 0 8px;
}

.service-item__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0%;
  color: rgba(251, 247, 238, 0.75);
  margin: 0 0 16px;
}

.service-item__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #E8D5A6;
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0px;
  text-transform: uppercase;
  margin-top: auto;
  width: fit-content;
  transition: color 0.2s ease;
}

.service-item__link:hover {
  color: #FFFFFF;
}

.service-item__link-text {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 0.8px;
}

.service-item__link-arrow {
  font-size: 13px;
  line-height: 18px;
  transition: transform 0.2s ease;
  display: inline-block;
}

.service-item:hover .service-item__link-arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   6. UMRAH PACKAGES SECTION
   ========================================================================== */
.packages-section {
  padding: 60px 0 30px;
  background-color: var(--color-cream-bg); /* #FBF7EE */
}

.packages-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
  width: 100%;
}

.packages-tag__icon {
  width: 34px;
  height: 10px;
  display: block;
  flex-shrink: 0;
}

.packages-tag__icon--reverse {
  transform: scaleX(-1);
}

.packages-tag__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0%;
  color: var(--color-gold-accent);
  text-transform: uppercase;
}

.packages-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-style: normal;
  font-size: 40px;
  line-height: 45px;
  letter-spacing: 0px;
  color: #0B1D26;
  text-align: center;
  margin: 0 auto 40px;
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(2, 552px);
  gap: 30px;
  justify-content: center;
  width: 100%;
  max-width: 1134px;
  margin: 0 auto;
}

/* Card: 552x264px, bg #F9F2E3, border 1px solid #C4AB76, radius 17px */
.package-card {
  width: 552px;
  height: 264px;
  background-color: #F9F2E3;
  border: 1px solid #C4AB76;
  border-radius: 17px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  box-sizing: border-box;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.package-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(12, 40, 45, 0.08);
}

/* Image: 219x262px with 16px left radii */
.package-card__image {
  width: 219px;
  height: 262px;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

/* Content Area */
.package-card__content {
  padding: 24px 15px 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  box-sizing: border-box;
}

/* Tag: UMRAH PACKAGE (97x9px, Manrope 400 12px, gold #C6A15B) */
.package-card__tag {
  width: 97px;
  height: 9px;
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0px;
  color: var(--color-gold-accent);
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}

/* Title: Cormorant Garamond 700 30px/45px #0C282D */
.package-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-style: normal;
  font-size: 30px;
  line-height: 45px;
  letter-spacing: 0px;
  color: #0C282D;
  margin: 0 0 6px;
}

/* Number in Cinzel Bold 700 (Exact Figma Dev Mode match) */
.package-card__num {
  font-family: var(--font-cinzel);
  font-weight: 700;
  font-style: normal;
}

/* Currency SAR: 15px bold matching Figma Dev Mode */
.package-card__currency {
  font-family: var(--font-heading), 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  vertical-align: baseline;
  letter-spacing: 0.5px;
  margin-left: 2px;
}
html[dir="rtl"] .package-card__currency {
  margin-left: 0;
  margin-right: 2px;
}

/* Route: DMM --- MAK --- MED */
.package-card__route {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.route-code {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0px;
  color: var(--color-green-primary);
}

.route-dash {
  display: inline-flex;
  align-items: center;
}

/* Description: Manrope 400 14px */
.package-card__desc {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
  color: #0C282D;
  opacity: 0.85;
  margin: 0 0 16px;
}

.desc-line {
  white-space: nowrap;
  display: inline-block;
}

/* Button: BOOK NOW -> (Min 147x50px, border-radius 12px, border 1px #146356, text 16px) */
.package-card__btn {
  min-width: 147px;
  width: auto;
  height: 50px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid var(--color-green-primary);
  background-color: transparent;
  color: var(--color-green-primary);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  margin-top: auto;
  white-space: nowrap;
}

.package-card__btn:hover {
  background-color: var(--color-green-primary);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.package-card__btn-arrow {
  font-size: 16px;
  transition: transform 0.2s ease;
  display: inline-block;
}

.package-card__btn:hover .package-card__btn-arrow {
  transform: translateX(4px);
}

/* Full Width Featured Package: 1134x264px */
.package-card--full {
  grid-column: 1 / -1;
  width: 1134px;
  height: 264px;
}

.package-card--full .package-card__image {
  width: 655px;
  height: 262px;
}

.package-card--full .package-card__content {
  padding: 24px 32px 22px 32px;
}

.package-card--full .package-card__desc {
  max-width: 380px;
}

.package-card--full .package-card__image {
  width: 58%;
  max-width: 655px;
}

.package-card--full .package-card__content {
  width: 42%;
}

/* ==========================================================================
   6B. VISA PRICING SECTION (Under Packages)
   ========================================================================== */
.visa-pricing-section {
  padding: 50px 0 70px;
  background-color: var(--color-cream-bg); /* #FBF7EE */
}

.visa-pricing-header {
  text-align: center;
  margin-bottom: 40px;
}

.visa-pricing-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  width: 100%;
}

.visa-pricing-tag__text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--color-gold-accent);
  text-transform: uppercase;
}

.visa-pricing-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: #0B1D26;
  text-align: center;
  margin: 0 auto 16px;
}

.visa-pricing-subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  color: #5A6E72;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.visa-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.visa-card {
  background: #FFFFFF;
  border: 1px solid rgba(20, 99, 86, 0.12);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(11, 29, 38, 0.05);
  padding: 36px 28px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-sizing: border-box;
}

.visa-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(20, 99, 86, 0.12);
}

.visa-card__flag-wrapper {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.visa-card__flag {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: block;
}

.visa-card__country {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  line-height: 34px;
  color: #0B1D26;
  margin: 0 0 4px;
}

.visa-card__visa-type {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: #5A6E72;
  margin: 0 0 20px;
}

.visa-card__price-box {
  width: 100%;
  background-color: #EBF3F0;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.visa-card__price-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  color: #4A6065;
}

.visa-card__price-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 2px;
  color: #0B1D26;
}

.visa-card__currency {
  font-family: var(--font-stats);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
}

.visa-card__number {
  font-family: var(--font-stats);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}

.visa-card__price-sub {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #6E8286;
}

.visa-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.visa-card__features li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.visa-feature-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.visa-feature-text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.4;
  color: #4A6065;
}

.visa-card__btn {
  width: 100%;
  height: 48px;
  background-color: #146356;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: #FFFFFF;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.15s ease;
  box-sizing: border-box;
}

.visa-card__btn:hover {
  background-color: #0E4B41;
  transform: translateY(-1px);
}

.visa-card__btn-arrow {
  transition: transform 0.2s ease;
}

.visa-card__btn:hover .visa-card__btn-arrow {
  transform: translateX(4px);
}

/* RTL Support for Visa Pricing */
html[dir="rtl"] .visa-pricing-header {
  text-align: center;
}

html[dir="rtl"] .visa-card__features {
  text-align: right;
}

html[dir="rtl"] .visa-card__btn:hover .visa-card__btn-arrow {
  transform: translateX(-4px);
}

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

@media (max-width: 768px) {
  .visa-pricing-section {
    padding: 35px 0 50px;
  }
  .visa-pricing-header {
    text-align: center;
  }
  .visa-pricing-subtitle {
    margin: 0 auto;
  }
  .visa-pricing-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .visa-pricing-title {
    font-size: 32px;
    line-height: 38px;
  }
}

/* ==========================================================================
   7. DEPARTURE BOARD / SCHEDULE SECTION
   ========================================================================== */
.schedule-section {
  padding: 30px 0;
  background-color: var(--color-cream-bg); /* #FBF7EE exact Figma canvas */
}

.schedule-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
  width: 100%;
}

.schedule-tag__icon {
  width: 34px;
  height: 10px;
  display: block;
  flex-shrink: 0;
}

.schedule-tag__icon--reverse {
  transform: scaleX(-1);
}

.schedule-tag__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0%;
  color: var(--color-gold-accent);
  text-transform: uppercase;
}

.schedule-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-style: normal;
  font-size: 40px;
  line-height: 45px;
  letter-spacing: 0px;
  color: #0B1D26;
  text-align: center;
  margin: 0 auto 16px;
}

.schedule-title-br-mobile,
.testimonials-title-br-mobile {
  display: none !important;
}

.schedule-subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0px;
  color: #0C282D;
  opacity: 0.85;
  text-align: center;
  max-width: 620px;
  margin: 0 auto 40px;
}

/* ==========================================================================
   7. DEPARTURE BOARD / WEEKLY TRIPS SECTION (Figma Node 266:295)
   ========================================================================== */
.departure-board-section {
  padding: 60px 0 80px;
  background-color: var(--color-cream-bg, #FBF7EE);
  position: relative;
}

.departure-board-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
  width: 100%;
}

.departure-board-tag__icon {
  width: 33px;
  height: 10px;
  display: block;
  flex-shrink: 0;
}

.departure-board-tag__icon--reverse {
  transform: scaleX(-1);
}

.departure-board-tag__text {
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-weight: 700;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: 2px;
  color: #C6A15B;
  text-transform: uppercase;
}

.departure-board-title {
  font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: #0B1D26;
  text-align: center;
  margin: 0 auto 45px;
  max-width: 650px;
}

/* Grid Architecture */
.departure-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 1134px;
  margin: 0 auto;
}

.departure-board-grid,
.departure-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 30px !important;
  max-width: 1134px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.departure-board-row--top,
.departure-row--top {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
  width: 100% !important;
}

.departure-board-row--bottom,
.departure-row--bottom {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 30px !important;
  width: 100% !important;
}

/* Card Design */
.departure-card {
  background: #FFFFFF !important;
  border-radius: 16px !important;
  padding: 34px 28px 30px !important;
  border: 1px solid rgba(20, 99, 86, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.departure-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px rgba(20, 99, 86, 0.08) !important;
}

.departure-card__thumb {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  margin: 0 auto 16px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  flex-shrink: 0 !important;
  background-color: #F4EBD8 !important;
}

.departure-card__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.departure-card__days {
  font-family: 'Cinzel', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  line-height: 28px !important;
  color: #146356 !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.5px !important;
}

.departure-card__route {
  font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 26px !important;
  color: #146356 !important;
  margin-bottom: 6px !important;
  white-space: nowrap !important;
}

.departure-card__frequency {
  font-family: var(--font-body, 'Manrope', sans-serif) !important;
  font-weight: 500 !important;
  font-size: 14.5px !important;
  line-height: 20px !important;
  color: #000000 !important;
  margin-bottom: 22px !important;
}

/* Timings Box */
.departure-card__timings {
  background: rgba(20, 99, 86, 0.07) !important;
  border-radius: 15px !important;
  padding: 16px 22px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: auto !important;
}

.departure-timing-row {
  font-family: var(--font-body, 'Manrope', sans-serif) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  color: #146356 !important;
  text-align: center !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
}

/* Wide Cards in Row 2 */
.departure-card--wide {
  padding: 34px 44px 32px !important;
}

.departure-card--wide .departure-card__timings {
  max-width: 440px !important;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .departure-board-row--top,
  .departure-row--top {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .departure-board-row--top .departure-card:nth-child(3),
  .departure-row--top .departure-card:nth-child(3) {
    grid-column: span 2 !important;
    max-width: 552px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  .departure-board-row--bottom,
  .departure-row--bottom {
    gap: 20px !important;
  }
}

/* Mobile: Single Column Stack, Clean, Spacious, and Fully Responsive */
@media (max-width: 768px) {
  .departure-board-section {
    padding: 45px 0 55px !important;
  }
  .departure-board-title {
    font-size: 28px !important;
    line-height: 36px !important;
    margin-bottom: 24px !important;
    padding: 0 16px !important;
  }
  .departure-board-grid,
  .departure-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }
  .departure-board-row--top,
  .departure-board-row--bottom,
  .departure-row--top,
  .departure-row--bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    width: 100% !important;
  }
  .departure-board-row--top .departure-card:nth-child(3),
  .departure-row--top .departure-card:nth-child(3) {
    grid-column: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .departure-card,
  .departure-card--wide {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 18px 22px !important;
    border-radius: 16px !important;
  }
  .departure-card__thumb {
    width: 72px !important;
    height: 72px !important;
    margin-bottom: 12px !important;
  }
  .departure-card__days {
    font-size: 22px !important;
    line-height: 26px !important;
    margin-bottom: 4px !important;
  }
  .departure-card__route {
    font-size: 20px !important;
    line-height: 24px !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
  }
  .departure-card__frequency {
    font-size: 14px !important;
    line-height: 20px !important;
    margin-bottom: 16px !important;
  }
  .departure-card__timings,
  .departure-card--wide .departure-card__timings {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    gap: 8px !important;
  }
  .departure-timing-row {
    font-size: 13.5px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 380px) {
  .departure-card__route {
    font-size: 18px !important;
  }
  .departure-timing-row {
    font-size: 12px !important;
  }
}

/* Multilingual Font Support */
html[lang="bn"] .departure-card__days,
html[lang="bn"] .departure-card__route,
html[lang="bn"] .departure-card__frequency,
html[lang="bn"] .departure-timing-row {
  font-family: 'Hind Siliguri', 'Noto Sans Bengali', var(--font-body), sans-serif !important;
}

html[dir="rtl"] .departure-card__days,
html[dir="rtl"] .departure-card__route,
html[dir="rtl"] .departure-card__frequency,
html[dir="rtl"] .departure-timing-row {
  font-family: 'Cairo', var(--font-body), sans-serif !important;
}

/* ==========================================================================
   8. FAQS SECTION
   ========================================================================== */
.faqs-section {
  padding: 30px 0 60px;
  background-color: var(--color-cream-bg);
  position: relative;
  overflow: hidden;
}

/* ============================================================
       8. FAQS SECTION - Exact Figma node 6005:519
       ============================================================ */
    .faqs-section {
      position: relative !important;
      overflow: hidden !important;
      background-color: #FBF7EE !important;
      padding: 30px 0 60px !important;
    }
    .faq-bg-illustration {
      position: absolute !important;
      top: 230px !important;
      bottom: auto !important;
      left: max(0px, calc(50% - 720px)) !important;
      width: 774px !important;
      max-width: 54% !important;
      height: 516px !important;
      object-fit: contain !important;
      object-position: left top !important;
      pointer-events: none !important;
      z-index: 0 !important;
      opacity: 0.85 !important;
    }
    .faqs-section .figma-container {
      position: relative !important;
      z-index: 1 !important;
      max-width: 1134px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    .faqs-grid {
      display: grid !important;
      grid-template-columns: 336px 1fr !important;
      gap: 52px !important;
      align-items: flex-start !important;
    }
    .faqs-tag {
      justify-content: flex-start !important;
      margin-bottom: 14px !important;
    }
    .faqs-heading {
      font-family: 'Cormorant Garamond', Georgia, serif !important;
      font-weight: 700 !important;
      font-size: 40px !important;
      line-height: 45px !important;
      color: #0B1D26 !important;
      margin: 0 0 16px !important;
    }
    .faqs-subheading {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 16px !important;
      line-height: 25px !important;
      color: #0C282D !important;
      opacity: 0.85 !important;
      margin: 0 0 32px !important;
    }

    /* Need More Help? Card (Figma node 6005:531) */
    .faq-help-card {
      width: 336px !important;
      min-height: 263px !important;
      background-color: #F9F2E3 !important;
      border: 1px solid #C4AB76 !important;
      border-radius: 17px !important;
      padding: 30px 24px 26px !important;
      text-align: center !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      box-shadow: 0 4px 20px rgba(12, 40, 45, 0.04) !important;
    }
    .faq-help-card__icon {
      width: 57px !important;
      height: 57px !important;
      border-radius: 50% !important;
      background-color: #D5E0D5 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin-bottom: 14px !important;
      flex-shrink: 0 !important;
    }
    .faq-help-card__title {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 600 !important;
      font-size: 16px !important;
      line-height: 22px !important;
      color: #0B1D26 !important;
      margin: 0 0 6px !important;
    }
    .faq-help-card__desc {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 14px !important;
      line-height: 20px !important;
      color: #0C282D !important;
      opacity: 0.85 !important;
      margin: 0 0 20px !important;
      text-align: center !important;
    }
    .faq-help-card__btn {
      width: 100% !important;
      max-width: 288px !important;
      min-height: 48px !important;
      height: auto !important;
      padding: 10px 14px !important;
      background-color: #146356 !important;
      color: #FFFFFF !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 500 !important;
      font-size: 14px !important;
      border-radius: 8px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      text-decoration: none !important;
      box-sizing: border-box !important;
      white-space: nowrap !important;
      transition: background-color 0.2s ease, transform 0.2s ease !important;
    }
    .faq-help-card__btn span {
      white-space: nowrap !important;
    }
    .faq-help-card__btn:hover {
      background-color: #0E4B41 !important;
      transform: translateY(-2px) !important;
    }
    .faq-btn-arrow {
      font-size: 16px !important;
      transition: transform 0.2s ease !important;
      display: inline-block !important;
    }
    .faq-help-card__btn:hover .faq-btn-arrow {
      transform: translateX(4px) !important;
    }

    /* Accordion Column */
    .faq-accordion {
      display: flex !important;
      flex-direction: column !important;
      gap: 14px !important;
      width: 100% !important;
      max-width: 746px !important;
    }
    .faq-item {
      background-color: #FFFFFF !important;
      border: 1px solid #FFEAC2 !important;
      border-radius: 16px !important;
      overflow: hidden !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
      transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    }
    .faq-item:hover {
      border-color: #E8D5A6 !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
    }
    .faq-question {
      width: 100% !important;
      padding: 18px 22px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      background: none !important;
      border: none !important;
      cursor: pointer !important;
      text-align: left !important;
      gap: 16px !important;
      box-sizing: border-box !important;
    }
    .faq-question__left {
      display: flex !important;
      align-items: center !important;
      gap: 14px !important;
    }
    .faq-toggle-circle {
      width: 26px !important;
      height: 26px !important;
      border-radius: 50% !important;
      background-color: #146356 !important;
      color: #FFFFFF !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-shrink: 0 !important;
      transition: background-color 0.2s ease !important;
    }
    .faq-toggle-circle .icon-plus {
      display: block !important;
    }
    .faq-toggle-circle .icon-minus {
      display: none !important;
    }
    .faq-item.active .faq-toggle-circle .icon-plus {
      display: none !important;
    }
    .faq-item.active .faq-toggle-circle .icon-minus {
      display: block !important;
    }
    .faq-question__text {
      font-family: 'Cormorant Garamond', Georgia, serif !important;
      font-weight: 600 !important;
      font-size: 18px !important;
      line-height: 24px !important;
      color: #0B1D26 !important;
      margin: 0 !important;
    }
    .faq-chevron {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-shrink: 0 !important;
      transition: transform 0.3s ease !important;
      color: #141B34 !important;
    }
    .faq-item.active .faq-chevron {
      transform: rotate(180deg) !important;
    }
    .faq-answer {
      max-height: 0 !important;
      overflow: hidden !important;
      opacity: 0 !important;
      transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.3s ease !important;
      margin: 0 18px !important;
    }
    .faq-item.active .faq-answer {
      max-height: 300px !important;
      opacity: 1 !important;
      margin: 0 18px 18px 18px !important;
    }
    .faq-answer__inner {
      background-color: #FBF7EE !important;
      border-radius: 12px !important;
      padding: 16px 20px !important;
    }
    .faq-answer__inner p {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 15px !important;
      line-height: 24px !important;
      color: #0C282D !important;
      opacity: 0.85 !important;
      margin: 0 !important;
    }


    /* ============================================================
       9. TESTIMONIALS / PILGRIMS' EXPERIENCES SECTION - Exact Figma Group 2085664720
       ============================================================ */
    .testimonials-section {
      padding: 90px 0 80px !important;
      background-color: #FBF7EE !important;
      position: relative !important;
    }
    .testimonials-section .figma-container {
      max-width: 1134px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }
    .testimonials-tag {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 12px !important;
      margin: 0 auto 16px !important;
      width: fit-content !important;
      text-align: center !important;
    }
    .testimonials-tag__icon {
      width: 33px !important;
      height: 10px !important;
      display: block !important;
      flex-shrink: 0 !important;
    }
    .testimonials-tag__icon--reverse {
      transform: scaleX(-1) !important;
    }
    .testimonials-tag__text {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 16px !important;
      line-height: 25px !important;
      letter-spacing: 0% !important;
      color: #C4AB76 !important;
      text-transform: uppercase !important;
    }
    .testimonials-title {
      width: 100% !important;
      max-width: 450px !important;
      margin: 0 auto 16px !important;
      font-family: 'Cormorant Garamond', Georgia, serif !important;
      font-weight: 700 !important;
      font-size: 40px !important;
      line-height: 45px !important;
      letter-spacing: 0px !important;
      text-align: center !important;
      color: #0B1D26 !important;
    }
    .testimonials-subtitle {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 16px !important;
      line-height: 25px !important;
      letter-spacing: 0px !important;
      color: #0C282D !important;
      margin: 0 auto !important;
      text-align: center !important;
      max-width: 410px !important;
    }
    .testimonials-slider-wrapper {
      width: 100% !important;
      max-width: 1084px !important;
      margin: 40px auto 0 !important;
      overflow: hidden !important;
      position: relative !important;
      box-sizing: border-box !important;
      border-radius: 18px !important;
      direction: ltr !important;
    }
    .testimonials-grid {
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: 26px !important;
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
      box-sizing: border-box !important;
      transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
      will-change: transform !important;
      direction: ltr !important;
    }
    .testimonial-card {
      width: calc((100% - 52px) / 3) !important;
      min-width: calc((100% - 52px) / 3) !important;
      max-width: calc((100% - 52px) / 3) !important;
      flex: 0 0 calc((100% - 52px) / 3) !important;
      flex-shrink: 0 !important;
      height: auto !important;
      min-height: 250px !important;
      background-color: #FFFFFF !important;
      border-radius: 18px !important;
      padding: 32px 30px 28px !important;
      border: 1px solid rgba(0, 0, 0, 0.05) !important;
      box-shadow: 0 8px 30px rgba(11, 29, 38, 0.06) !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    .testimonial-card:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 12px 36px rgba(11, 29, 38, 0.1) !important;
    }
    .testimonial-top {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      width: 100% !important;
      margin-bottom: 16px !important;
    }
    .testimonial-stars {
      display: flex !important;
      align-items: center !important;
      gap: 4px !important;
    }
    .testimonial-stars svg {
      width: 20px !important;
      height: 20px !important;
      fill: #146356 !important;
      flex-shrink: 0 !important;
    }
    .testimonial-quote-svg {
      width: 26px !important;
      height: 25px !important;
      fill: #B2D4CC !important;
      flex-shrink: 0 !important;
    }
    .testimonial-text {
      width: 100% !important;
      max-width: 100% !important;
      min-height: auto !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 15.5px !important;
      line-height: 25px !important;
      color: #0B1D26 !important;
      opacity: 0.85 !important;
      margin: 0 0 20px !important;
    }
    .testimonial-author-row {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
    }
    .testimonial-avatar {
      width: 48px !important;
      height: 48px !important;
      border-radius: 50% !important;
      object-fit: cover !important;
      flex-shrink: 0 !important;
      display: block !important;
    }
    .testimonial-avatar-fallback {
      width: 48px !important;
      height: 48px !important;
      border-radius: 50% !important;
      background-color: #146356 !important;
      color: #FFFFFF !important;
      font-weight: 700 !important;
      font-size: 16px !important;
      display: none;
      align-items: center !important;
      justify-content: center !important;
    }
    .testimonial-author-info {
      display: flex !important;
      flex-direction: column !important;
      gap: 2px !important;
    }
    .testimonial-name {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 600 !important;
      font-size: 16.5px !important;
      line-height: 22px !important;
      color: #0B1D26 !important;
      margin: 0 !important;
    }
    .testimonial-location {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 13px !important;
      line-height: 18px !important;
      color: #718096 !important;
      display: flex !important;
      align-items: center !important;
      gap: 4px !important;
      margin: 0 !important;
    }
    .testimonial-slider-controls {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 20px !important;
      margin: 32px auto 0 !important;
      width: auto !important;
    }
    .testimonial-arrow-btn {
      width: 48px !important;
      height: 48px !important;
      border-radius: 50% !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      transition: all 0.25s ease !important;
      box-sizing: border-box !important;
      background-color: #FFFFFF !important;
      border: 1px solid rgba(20, 99, 86, 0.25) !important;
      color: #146356 !important;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
    }
    .testimonial-arrow-btn:hover {
      background-color: #146356 !important;
      color: #FFFFFF !important;
      border-color: #146356 !important;
      transform: translateY(-2px) scale(1.05) !important;
      box-shadow: 0 6px 18px rgba(20, 99, 86, 0.25) !important;
    }
    .testimonial-arrow-btn svg {
      width: 22px !important;
      height: 22px !important;
      stroke: currentColor !important;
    }
    .testimonials-dots {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
    }
    .testimonial-dot {
      width: 10px !important;
      height: 10px !important;
      border-radius: 50% !important;
      background-color: rgba(20, 99, 86, 0.22) !important;
      border: none !important;
      cursor: pointer !important;
      padding: 0 !important;
      transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }
    .testimonial-dot.active {
      width: 28px !important;
      border-radius: 20px !important;
      background-color: #146356 !important;
      box-shadow: 0 6px 18px rgba(20, 99, 86, 0.35) !important;
    }

    /* ============================================================
       10. BOOKING / PLAN YOUR JOURNEY SECTION - Exact Figma Group 2085664710
       ============================================================ */
    .booking-section {
      padding: 90px 0 85px !important;
      background-color: #0B1D26 !important;
      position: relative !important;
    }
    .booking-section .figma-container {
      max-width: 1134px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      box-sizing: border-box !important;
      width: 100% !important;
    }
    .booking-grid {
      display: grid !important;
      grid-template-columns: 376px 746px !important;
      gap: 12px !important;
      align-items: start !important;
      width: 100% !important;
    }
    .booking-left {
      width: 376px !important;
      max-width: 376px !important;
      box-sizing: border-box !important;
    }
    .booking-tag {
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      margin-bottom: 20px !important;
      width: auto !important;
      height: 12px !important;
      white-space: nowrap !important;
    }
    .booking-tag__decor {
      display: inline-flex !important;
      align-items: center !important;
      gap: 4px !important;
      flex-shrink: 0 !important;
    }
    .booking-tag__decor::before {
      content: '' !important;
      width: 18px !important;
      height: 1.5px !important;
      background-color: #C4AB76 !important;
      display: inline-block !important;
    }
    .booking-tag__decor::after {
      content: '' !important;
      width: 5px !important;
      height: 5px !important;
      background-color: #C4AB76 !important;
      display: inline-block !important;
      transform: rotate(45deg) !important;
    }
    .booking-tag__text {
      color: #C4AB76 !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-style: normal !important;
      font-size: 16px !important;
      line-height: 25px !important;
      letter-spacing: 0% !important;
      text-transform: uppercase !important; white-space: nowrap !important;
      white-space: nowrap !important;
      display: inline-block !important;
    }
    .booking-title {
      width: 340px !important;
      max-width: 340px !important;
      font-family: 'Cormorant Garamond', Georgia, serif !important;
      font-weight: 700 !important;
      font-size: 40px !important;
      line-height: 45px !important;
      color: #FFFFFF !important;
      margin: 0 0 20px !important;
      letter-spacing: 0px !important;
    }
    .booking-subtitle {
      width: 376px !important;
      max-width: 376px !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 16px !important;
      line-height: 25px !important;
      color: #FBF7EE !important;
      margin: 0 0 28px !important;
    }
    .booking-points {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
      width: 100% !important;
    }
    .booking-point {
      display: flex !important;
      align-items: center !important;
      gap: 16px !important;
      color: #FFFFFF !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 15px !important;
      line-height: 25px !important;
      letter-spacing: 0% !important;
    }
    .booking-point__check {
      width: 18px !important;
      height: 18px !important;
      border-radius: 4px !important;
      border: 1px solid rgba(196, 171, 118, 0.45) !important;
      background-color: transparent !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-shrink: 0 !important;
      box-sizing: border-box !important;
    }
    .booking-point__check svg {
      width: 8px !important;
      height: 7px !important;
      display: block !important;
    }
    .booking-form-card {
      width: 746px !important;
      max-width: 746px !important;
      min-height: 502px !important;
      background-color: #FBF7EE !important;
      border: 1px solid rgba(196, 171, 118, 0.5) !important;
      border-radius: 22px !important;
      padding: 30px 24px 26px !important;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25) !important;
      box-sizing: border-box !important;
    }
    .form-label,
    .form-plan-label {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 14px !important;
      line-height: 25px !important;
      letter-spacing: 0% !important;
      color: #0B1D26 !important;
      margin-bottom: 6px !important;
      display: block !important;
      text-transform: uppercase !important;
    }
    .booking-form-card .form-row {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 16px !important;
      margin-bottom: 14px !important;
    }
    .booking-form-card .form-group {
      display: flex !important;
      flex-direction: column !important;
      margin-bottom: 14px !important;
    }
    .booking-form-card .form-group:last-child {
      margin-bottom: 0 !important;
    }
    .booking-form-card .form-input {
      width: 100% !important;
      height: 44px !important;
      padding: 0 14px !important;
      border: 1px solid #E5DAC1 !important;
      border-radius: 7px !important;
      background-color: #FFFFFF !important;
      font-family: 'Manrope', sans-serif !important;
      font-size: 14px !important;
      color: #0B1D26 !important;
      outline: none !important;
      box-sizing: border-box !important;
      transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    }
    .booking-form-card .form-input::placeholder {
      color: #A0AEC0 !important;
      font-size: 14px !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
    }
    .booking-form-card .form-input:focus {
      border-color: #146356 !important;
      box-shadow: 0 0 0 2px rgba(20, 99, 86, 0.15) !important;
    }
    .plan-options {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 8px 12px !important;
    }
    .plan-pill {
      position: relative !important;
      display: inline-flex !important;
    }
    .plan-pill input {
      position: absolute !important;
      opacity: 0 !important;
      width: 0 !important;
      height: 0 !important;
      cursor: pointer !important;
    }
    .plan-pill label {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 6px 16px !important;
      height: 35px !important;
      background-color: #F9F2E3 !important;
      border: 1px solid #E7DABF !important;
      border-radius: 9999px !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 15px !important;
      line-height: 25px !important;
      letter-spacing: 0% !important;
      color: #0B1D26 !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
      box-sizing: border-box !important;
      white-space: nowrap !important;
    }
    .plan-pill input:checked + label {
      background-color: #146356 !important;
      color: #FFFFFF !important;
      border-color: #146356 !important;
    }
    .btn-form-submit {
      width: 100% !important;
      height: 52px !important;
      background-color: #146356 !important;
      color: #FFFFFF !important;
      border: none !important;
      border-radius: 9999px !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 500 !important;
      font-size: 16px !important;
      line-height: 25px !important;
      letter-spacing: 0% !important;
      text-align: center !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
      margin-top: 20px !important;
    }
    .btn-form-submit:hover {
      background-color: #0E4B41 !important;
      transform: translateY(-1px) !important;
      box-shadow: 0 4px 14px rgba(20, 99, 86, 0.3) !important;
    }

    /* ============================================================
       11. CTA BANNER SECTION - Exact Figma Group 2085664731
       ============================================================ */
    .cta-banner-section {
      padding: 100px 0 !important;
      background-color: #032325 !important;
      position: relative !important;
    }
    .cta-banner-section .figma-container {
      max-width: 1134px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      box-sizing: border-box !important;
      width: 100% !important;
    }
    .cta-banner-grid {
      display: grid !important;
      grid-template-columns: 560px 529px !important;
      gap: 45px !important;
      align-items: center !important;
      width: 100% !important;
    }
    .cta-banner-content {
      width: 560px !important;
      max-width: 560px !important;
      box-sizing: border-box !important;
    }
    .cta-banner-title {
      font-family: 'Cormorant Garamond', Georgia, serif !important;
      font-weight: 700 !important;
      font-size: 65px !important;
      line-height: 75px !important;
      letter-spacing: 0px !important;
      color: #FFFFFF !important;
      margin: 0 0 20px !important;
      max-width: 560px !important;
    }
    .cta-banner-desc,
    .cta-banner-subtitle {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 16px !important;
      line-height: 25px !important;
      letter-spacing: 0px !important;
      color: #FFFFFF !important;
      opacity: 0.9 !important;
      margin: 0 0 36px !important;
      max-width: 560px !important;
    }
    .cta-banner-buttons {
      display: flex !important;
      align-items: center !important;
      gap: 16px !important;
      flex-wrap: nowrap !important;
      width: auto !important;
    }
    .cta-btn-packages,
    .cta-banner-btn,
    .cta-banner-btn--primary {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      height: 50px !important;
      padding: 0 28px !important;
      border-radius: 9999px !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 500 !important;
      font-size: 15px !important;
      text-decoration: none !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
      box-sizing: border-box !important;
      white-space: nowrap !important;
      background-color: #146356 !important;
      color: #FFFFFF !important;
      border: 1px solid #146356 !important;
    }
    .cta-btn-packages:hover,
    .cta-banner-btn--primary:hover {
      background-color: #0E4B41 !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 18px rgba(20, 99, 86, 0.3) !important;
    }
    .cta-btn-whatsapp,
    .cta-banner-btn--secondary {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      height: 50px !important;
      padding: 0 28px !important;
      border-radius: 9999px !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 500 !important;
      font-size: 15px !important;
      text-decoration: none !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
      box-sizing: border-box !important;
      white-space: nowrap !important;
      background-color: transparent !important;
      color: #FFFFFF !important;
      border: 1px solid rgba(255, 255, 255, 0.4) !important;
    }
    .cta-btn-whatsapp:hover,
    .cta-banner-btn--secondary:hover {
      background-color: rgba(255, 255, 255, 0.1) !important;
      border-color: #FFFFFF !important;
      transform: translateY(-2px) !important;
    }
    .cta-banner-image {
      width: 529px !important;
      height: 353px !important;
      border-radius: 26px !important;
      overflow: hidden !important;
      box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4) !important;
      flex-shrink: 0 !important;
    }
    .cta-banner-image img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display: block !important;
    }

    /* ============================================================
       12. FOOTER SECTION - Exact Figma Group 2085664726
       ============================================================ */
    .site-footer {
      background-color: #0B1D26 !important;
      padding: 85px 0 0 !important;
      color: #FFFFFF !important;
      position: relative !important;
    }
    .site-footer .figma-container {
      max-width: 1134px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      box-sizing: border-box !important;
      width: 100% !important;
    }
    .footer-grid {
      display: grid !important;
      grid-template-columns: 350px 1fr 1fr 1fr !important;
      gap: 40px !important;
      padding-bottom: 60px !important;
      width: 100% !important;
    }
    .footer-brand__logo {
      display: inline-block !important;
      text-decoration: none !important;
      margin-bottom: 24px !important;
      width: 164px !important;
      height: 48px !important;
    }
    .footer-brand__logo img {
      width: 164px !important;
      height: 47.63px !important;
      display: block !important;
    }
    .footer-brand__desc {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 14px !important;
      line-height: 24px !important;
      color: #A0AEC0 !important;
      width: 297px !important;
      max-width: 297px !important;
      margin: 0 0 30px !important;
      opacity: 1 !important;
    }
    .footer-features {
      display: flex !important;
      flex-direction: column !important;
      gap: 18px !important;
    }
    .footer-feature-item {
      display: flex !important;
      align-items: center !important;
      gap: 15px !important;
    }
    .footer-feature-icon {
      width: 45px !important;
      height: 45px !important;
      flex-shrink: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    .footer-feature-icon img {
      width: 45px !important;
      height: 45px !important;
      display: block !important;
    }
    .footer-feature-text {
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
    }
    .footer-feature-text strong {
      font-family: 'Cormorant Garamond', Georgia, serif !important;
      font-weight: 700 !important;
      font-style: normal !important;
      font-size: 15px !important;
      line-height: 28px !important;
      letter-spacing: 0% !important;
      color: #FFFFFF !important;
      margin: 0 !important;
    }
    .footer-feature-text span {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-style: normal !important;
      font-size: 13px !important;
      line-height: 18px !important;
      letter-spacing: 0% !important;
      color: #A0AEC0 !important;
      margin: 0 !important;
    }
    .footer-col__title {
      font-family: 'Playfair Display', Georgia, serif !important;
      font-weight: 600 !important;
      font-size: 20px !important;
      line-height: 28px !important;
      letter-spacing: 0% !important;
      color: #FFFFFF !important;
      margin: 0 0 24px !important;
    }
    .footer-service-area-intro {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 14px !important;
      line-height: 22px !important;
      color: rgba(255, 255, 255, 0.7) !important;
      margin: 0 0 16px !important;
    }
    .footer-links {
      list-style: none !important;
      padding: 0 !important;
      margin: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
    }
    .footer-links li a {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 16px !important;
      line-height: 18px !important;
      letter-spacing: 0% !important;
      color: rgba(255, 255, 255, 0.75) !important;
      text-decoration: none !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 14px !important;
      transition: color 0.2s ease !important;
    }
    .footer-links li a:hover {
      color: #E8D5A6 !important;
    }
    .footer-chevron-svg {
      width: 6px !important;
      height: 12px !important;
      flex-shrink: 0 !important;
      display: inline-block !important;
    }
    .footer-bottom-bar {
      background-color: #104E44 !important;
      min-height: 51px !important;
      display: flex !important;
      align-items: center !important;
      width: 100% !important;
    }
    .footer-bottom-container {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      width: 100% !important;
      max-width: 1134px !important;
      margin: 0 auto !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 16px !important;
      line-height: 28px !important;
      letter-spacing: 0% !important;
      color: #FFFFFF !important;
    }
    .designer-link {
      color: #E8D5A6 !important;
      font-weight: 700 !important;
      text-decoration: none !important;
      display: inline-block !important;
      padding: 1px 9px !important;
      margin-left: 4px !important;
      background: rgba(232, 213, 166, 0.12) !important;
      border: 1px solid rgba(232, 213, 166, 0.4) !important;
      border-radius: 6px !important;
      transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
      vertical-align: middle !important;
    }
    .designer-link:hover {
      color: #0B1D26 !important;
      background-color: #E8D5A6 !important;
      border-color: #E8D5A6 !important;
      box-shadow: 0 0 14px rgba(232, 213, 166, 0.6) !important;
      transform: translateY(-1px) !important;
    }
    html[dir="rtl"] .designer-link {
      margin-left: 0 !important;
      margin-right: 4px !important;
    }

@media (max-width: 1024px) {
  .about-grid,
  .booking-grid,
  .faqs-grid,
  .cta-banner-grid {
    grid-template-columns: 1fr;
  }
  .about-image-card {
    max-width: 100%;
    height: 480px;
  }
  .services-box {
    grid-template-columns: repeat(2, 1fr);
  }
  .service-item:nth-child(2n) {
    border-right: none;
  }
  .service-item:nth-child(n+7) {
    border-bottom: none;
  }
  .packages-grid {
    grid-template-columns: 1fr;
  }
  .package-card {
    height: auto;
    flex-direction: column;
  }
  .package-card__image {
    width: 100%;
    height: 220px;
  }
  .package-card--full {
    flex-direction: column;
    height: auto;
  }
  .package-card--full .package-card__image {
    width: 100%;
    max-width: 100%;
    height: 220px;
  }
  .package-card--full .package-card__content {
    width: 100%;
  }
  .departure-board {
    overflow-x: auto;
  }
  .departure-row {
    min-width: 700px;
  }
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .services-box {
    grid-template-columns: 1fr;
  }
  .service-item {
    border-right: none;
  }
  .service-item:last-child {
    border-bottom: none;
  }
  .form-row,
  .plan-options {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .cta-banner-image {
    height: 240px;
  }
}


    /* Exact Figma Pixel-Perfect Testimonials Section */
    .testimonials-section {
      padding: 90px 0 80px !important;
      background-color: #FBF7EE !important;
    }
    .testimonials-section .figma-container {
      max-width: 1084px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      width: 100% !important;
    }
    .testimonials-tag {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 12px !important;
      margin: 0 auto 16px !important;
      width: fit-content !important;
      text-align: center !important;
    }
    .testimonials-tag__icon {
      width: 34px !important;
      height: 10px !important;
      display: block !important;
      flex-shrink: 0 !important;
    }
    .testimonials-tag__icon--reverse {
      transform: scaleX(-1) !important;
    }
    .testimonials-tag__text {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 16px !important;
      line-height: 25px !important;
      letter-spacing: 0% !important;
      color: #C4AB76 !important;
      text-transform: uppercase !important;
    }
    .testimonials-title {
      width: 100% !important;
      max-width: 450px !important;
      margin: 0 auto 16px !important;
      font-family: 'Cormorant Garamond', Georgia, serif !important;
      font-weight: 700 !important;
      font-size: 40px !important;
      line-height: 45px !important;
      letter-spacing: 0px !important;
      text-align: center !important;
      color: #0B1D26 !important;
    }
    .testimonials-subtitle {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 15px !important;
      line-height: 24px !important;
      letter-spacing: 0px !important;
      color: #0C282D !important;
      opacity: 0.85 !important;
      margin: 0 auto !important;
      text-align: center !important;
      max-width: 580px !important;
    }
    .testimonials-grid {
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: 26px !important;
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
      box-sizing: border-box !important;
      transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
      will-change: transform !important;
    }
    .testimonial-card {
      width: calc((100% - 52px) / 3) !important;
      min-width: calc((100% - 52px) / 3) !important;
      max-width: calc((100% - 52px) / 3) !important;
      flex: 0 0 calc((100% - 52px) / 3) !important;
      flex-shrink: 0 !important;
      background-color: #FFFFFF !important;
      border-radius: 18px !important;
      padding: 32px 30px 28px !important;
      border: 1px solid rgba(0, 0, 0, 0.05) !important;
      box-shadow: 0 8px 30px rgba(11, 29, 38, 0.06) !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    .testimonial-card:hover {
      transform: translateY(-4px) !important;
      box-shadow: 0 12px 30px rgba(11, 29, 38, 0.08) !important;
    }
    .testimonial-top {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      width: 100% !important;
      margin-bottom: 24px !important;
    }
    .testimonial-stars {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      width: 156px !important;
      height: 23px !important;
    }
    .testimonial-stars svg {
      width: 22px !important;
      height: 22px !important;
      fill: #146356 !important;
      flex-shrink: 0 !important;
    }
    .testimonial-quote-svg {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    .testimonial-text {
      width: 308px !important;
      max-width: 308px !important;
      min-height: 83px !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 14px !important;
      line-height: 21px !important;
      letter-spacing: 0px !important;
      color: #0B1D26 !important;
      opacity: 0.6 !important;
      margin: 0 0 28px !important;
      box-sizing: border-box !important;
    }
    .testimonial-author-row {
      display: flex !important;
      align-items: center !important;
      gap: 14px !important;
      width: 100% !important;
    }
    .testimonial-avatar {
      width: 48px !important;
      height: 48px !important;
      border-radius: 50% !important;
      object-fit: cover !important;
      flex-shrink: 0 !important;
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      display: block !important;
    }
    .testimonial-author-info {
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      gap: 2px !important;
    }
    .testimonial-name {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 600 !important;
      font-size: 17px !important;
      line-height: 28px !important;
      letter-spacing: 0% !important;
      color: #0B1D26 !important;
      opacity: 1 !important;
      margin: 0 !important;
      white-space: nowrap !important;
    }
    .testimonial-location {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 13px !important;
      line-height: 18px !important;
      letter-spacing: 0% !important;
      color: #0B1D26 !important;
      opacity: 0.6 !important;
      margin: 0 !important;
      display: flex !important;
      align-items: center !important;
      gap: 4px !important;
      white-space: nowrap !important;
    }
    .testimonial-slider-controls {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 16px !important;
      margin-top: 40px !important;
    }
    .testimonial-arrow-btn {
      width: 48px !important;
      height: 48px !important;
      border-radius: 50% !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
      box-sizing: border-box !important;
    }
    .testimonial-arrow-btn--prev {
      background-color: #FFFFFF !important;
      border: 1px solid transparent !important;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
    }
    .testimonial-arrow-btn--prev:hover {
      background-color: #FFFFFF !important;
      border: 1px solid #146356 !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 18px rgba(20, 99, 86, 0.2) !important;
    }
    .testimonial-arrow-btn--next {
      background-color: #146356 !important;
      border: none !important;
      box-shadow: 0 4px 14px rgba(20, 99, 86, 0.25) !important;
    }
    .testimonial-arrow-btn--next:hover {
      background-color: #0E4B41 !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 18px rgba(20, 99, 86, 0.35) !important;
    }


    /* ============================================================
       10. BOOKING / PLAN YOUR JOURNEY SECTION (Exact Figma Dev Mode: 376px + 12px + 746px = 1134px)
       ============================================================ */
    .booking-section {
      padding: 90px 0 85px !important;
      background-color: #0B1D26 !important;
      position: relative !important;
    }
    .booking-section .figma-container {
      max-width: 1134px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      box-sizing: border-box !important;
      width: 100% !important;
    }
    .booking-grid {
      display: grid !important;
      grid-template-columns: 376px 746px !important;
      gap: 12px !important;
      align-items: start !important;
      width: 100% !important;
    }
    /* Left Column (376px x 364px, Top: 6071px, Left: 153px) */
    .booking-left {
      width: 376px !important;
      max-width: 376px !important;
      box-sizing: border-box !important;
    }
    .booking-tag {
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      margin-bottom: 20px !important;
      width: auto !important; white-space: nowrap !important;
      height: 12px !important;
    }
    .booking-tag__decor {
      display: inline-flex !important;
      align-items: center !important;
      gap: 4px !important;
    }
    .booking-tag__decor::before {
      content: '' !important;
      width: 18px !important;
      height: 1.5px !important;
      background-color: #C4AB76 !important;
      display: inline-block !important;
    }
    .booking-tag__decor::after {
      content: '' !important;
      width: 5px !important;
      height: 5px !important;
      background-color: #C4AB76 !important;
      display: inline-block !important;
      transform: rotate(45deg) !important;
    }
    .booking-tag__text {
      color: #C4AB76 !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 500 !important;
      font-size: 13.5px !important;
      letter-spacing: 0.8px !important;
      text-transform: uppercase !important; white-space: nowrap !important;
    }
    /* Heading (Width: 340px, Height: 70px, Top: 6113px, Left: 153px) */
    .booking-title {
      width: 340px !important;
      max-width: 340px !important;
      font-family: 'Cormorant Garamond', Georgia, serif !important;
      font-weight: 700 !important;
      font-size: 38px !important;
      line-height: 42px !important;
      color: #FFFFFF !important;
      margin: 0 0 20px !important;
      letter-spacing: -0.3px !important;
    }
    /* Subtitle (Width: 376px, Height: 62px, Top: 6213px, Left: 153px) */
    .booking-subtitle {
      width: 376px !important;
      max-width: 376px !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 14px !important;
      line-height: 21px !important;
      color: rgba(255, 255, 255, 0.7) !important;
      margin: 0 0 28px !important;
    }
    .booking-points {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
      width: 100% !important;
    }
    /* Checklist Item (Width: 279px, Top: 6309px, Left: 184px, Manrope Regular 400 15px/25px) */
    .booking-point {
      display: flex !important;
      align-items: center !important;
      gap: 16px !important;
      color: rgba(255, 255, 255, 0.9) !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 15px !important;
      line-height: 25px !important;
      letter-spacing: 0% !important;
    }
    /* Vector 6662 Checkbox (8x7 tick, stroke 1px #FFF) */
    .booking-point__check {
      width: 18px !important;
      height: 18px !important;
      border-radius: 4px !important;
      border: 1px solid rgba(255, 255, 255, 0.4) !important;
      background-color: transparent !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-shrink: 0 !important;
      box-sizing: border-box !important;
    }
    .booking-point__check svg {
      width: 8px !important;
      height: 7px !important;
      display: block !important;
    }
    /* Form Card (Width: 746px, Height: 502px, Top: 6071px, Left: 541px, Border: 1px #C4AB76 50%, Radius: 16px) */
    .booking-form-card {
      width: 746px !important;
      max-width: 746px !important;
      min-height: 502px !important;
      background-color: #FBF7EE !important;
      border: 1px solid rgba(196, 171, 118, 0.5) !important;
      border-radius: 16px !important;
      padding: 34px 32px 30px !important;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25) !important;
      box-sizing: border-box !important;
    }
    /* Form Labels (Width: 86px, Height: 10px, Manrope Regular 400, 14px, line-height 25px, letter-spacing 0%) */
    .form-label,
    .form-plan-label {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 14px !important;
      line-height: 25px !important;
      letter-spacing: 0% !important;
      color: #0B1D26 !important;
      margin-bottom: 6px !important;
      display: block !important;
      text-transform: uppercase !important;
    }
    .booking-form-card .form-row {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 16px !important;
      margin-bottom: 14px !important;
    }
    .booking-form-card .form-group {
      display: flex !important;
      flex-direction: column !important;
      margin-bottom: 14px !important;
    }
    .booking-form-card .form-group:last-child {
      margin-bottom: 0 !important;
    }
    .booking-form-card .form-input {
      width: 100% !important;
      height: 44px !important;
      padding: 0 14px !important;
      border: 1px solid #E5DAC1 !important;
      border-radius: 8px !important;
      background-color: #FFFFFF !important;
      font-family: 'Manrope', sans-serif !important;
      font-size: 14px !important;
      color: #0B1D26 !important;
      outline: none !important;
      box-sizing: border-box !important;
      transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    }
    .booking-form-card .form-input::placeholder {
      color: #A0AEC0 !important;
      font-size: 14px !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
    }
    .booking-form-card .form-input:focus {
      border-color: #146356 !important;
      box-shadow: 0 0 0 2px rgba(20, 99, 86, 0.15) !important;
    }
    /* Pills: (Width: 182px, Height: 11px, Manrope Regular 400, 15px, line-height 25px, letter-spacing 0%) */
    .plan-options {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 8px 12px !important;
    }
    .plan-pill {
      position: relative !important;
      display: inline-flex !important;
    }
    .plan-pill input {
      position: absolute !important;
      opacity: 0 !important;
      width: 0 !important;
      height: 0 !important;
      cursor: pointer !important;
    }
    .plan-pill label {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 6px 16px !important;
      height: 35px !important;
      background-color: #F9F2E3 !important;
      border: 1px solid #E7DABF !important;
      border-radius: 9999px !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 15px !important;
      line-height: 25px !important;
      letter-spacing: 0% !important;
      color: #0B1D26 !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
      box-sizing: border-box !important;
      white-space: nowrap !important;
    }
    .plan-pill input:checked + label {
      background-color: #146356 !important;
      color: #FFFFFF !important;
      border-color: #146356 !important;
    }
    /* Submit Button: (Width: 131px text, Manrope Medium 500, 16px, line-height 25px, text-align center) */
    .btn-form-submit {
      width: 100% !important;
      height: 52px !important;
      background-color: #146356 !important;
      color: #FFFFFF !important;
      border: none !important;
      border-radius: 9999px !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 500 !important;
      font-size: 16px !important;
      line-height: 25px !important;
      letter-spacing: 0% !important;
      text-align: center !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
      margin-top: 20px !important;
    }
    .btn-form-submit:hover {
      background-color: #0E4B41 !important;
      transform: translateY(-1px) !important;
      box-shadow: 0 4px 14px rgba(20, 99, 86, 0.3) !important;
    }

/* ============================================================
       11. CTA BANNER SECTION (Exact Figma Match)
       ============================================================ */
    .cta-banner-section {
      padding: 60px 0 90px !important;
      background-color: #0B1D26 !important;
    }
    .cta-banner-section .figma-container {
      max-width: 1140px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 20px !important;
      padding-right: 20px !important;
      box-sizing: border-box !important;
    }
    .cta-banner-grid {
      display: grid !important;
      grid-template-columns: 1fr 520px !important;
      gap: 50px !important;
      align-items: center !important;
    }
    .cta-banner-title {
      font-family: 'Cormorant Garamond', Georgia, serif !important;
      font-weight: 700 !important;
      font-size: 44px !important;
      line-height: 48px !important;
      color: #FFFFFF !important;
      margin: 0 0 18px !important;
    }
    .cta-banner-desc {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 14.5px !important;
      line-height: 23px !important;
      color: rgba(255, 255, 255, 0.7) !important;
      margin: 0 0 28px !important;
      max-width: 500px !important;
    }
    .cta-banner-buttons {
      display: flex !important;
      align-items: center !important;
      gap: 16px !important;
      flex-wrap: nowrap !important;
      width: auto !important;
    }
    .cta-btn-packages {
      display: inline-flex !important;
      align-items: center !important;
      gap: 10px !important;
      background-color: #146356 !important;
      color: #FFFFFF !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 500 !important;
      font-size: 14.5px !important;
      height: 44px !important;
      padding: 0 24px !important;
      border-radius: 9999px !important;
      text-decoration: none !important;
      transition: all 0.2s ease !important;
      box-shadow: 0 4px 14px rgba(20, 99, 86, 0.25) !important;
      box-sizing: border-box !important;
    }
    .cta-btn-packages:hover {
      background-color: #0E4B41 !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 18px rgba(20, 99, 86, 0.35) !important;
    }
    .cta-btn-whatsapp {
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      background-color: transparent !important;
      color: #FFFFFF !important;
      border: 1px solid rgba(255, 255, 255, 0.35) !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 500 !important;
      font-size: 14.5px !important;
      height: 44px !important;
      padding: 0 22px !important;
      border-radius: 9999px !important;
      text-decoration: none !important;
      transition: all 0.2s ease !important;
      box-sizing: border-box !important;
    }
    .cta-btn-whatsapp:hover {
      background-color: rgba(255, 255, 255, 0.08) !important;
      border-color: #FFFFFF !important;
      transform: translateY(-2px) !important;
    }
    .cta-banner-image {
      width: 100% !important;
      max-width: 520px !important;
      height: 310px !important;
      border-radius: 20px !important;
      overflow: hidden !important;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3) !important;
      box-sizing: border-box !important;
    }
    .cta-banner-image img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display: block !important;
    }


    /* ============================================================
       10. BOOKING / PLAN YOUR JOURNEY SECTION (Exact Figma Dev Mode Match)
       ============================================================ */
    .booking-section {
      padding: 90px 0 85px !important;
      background-color: #0B1D26 !important;
      position: relative !important;
    }
    .booking-section .figma-container {
      max-width: 1134px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 20px !important;
      padding-right: 20px !important;
      box-sizing: border-box !important;
    }
    .booking-grid {
      display: grid !important;
      grid-template-columns: 440px 1fr !important;
      gap: 54px !important;
      align-items: center !important;
    }
    .booking-tag {
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      margin-bottom: 18px !important;
    }
    .booking-tag__decor {
      display: inline-flex !important;
      align-items: center !important;
      gap: 4px !important;
    }
    .booking-tag__decor::before {
      content: '' !important;
      width: 18px !important;
      height: 1.5px !important;
      background-color: #C4AB76 !important;
      display: inline-block !important;
    }
    .booking-tag__decor::after {
      content: '' !important;
      width: 5px !important;
      height: 5px !important;
      background-color: #C4AB76 !important;
      display: inline-block !important;
      transform: rotate(45deg) !important;
    }
    .booking-tag__text {
      color: #C4AB76 !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 500 !important;
      font-size: 13.5px !important;
      letter-spacing: 0.8px !important;
      text-transform: uppercase !important; white-space: nowrap !important;
    }
    .booking-title {
      font-family: 'Cormorant Garamond', Georgia, serif !important;
      font-weight: 700 !important;
      font-size: 44px !important;
      line-height: 48px !important;
      color: #FFFFFF !important;
      margin: 0 0 18px !important;
      letter-spacing: -0.3px !important;
    }
    .booking-subtitle {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 14.5px !important;
      line-height: 22px !important;
      color: rgba(255, 255, 255, 0.7) !important;
      margin: 0 0 28px !important;
      max-width: 420px !important;
    }
    .booking-points {
      display: flex !important;
      flex-direction: column !important;
      gap: 14px !important;
    }
    .booking-point {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
      color: rgba(255, 255, 255, 0.85) !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 14px !important;
      line-height: 20px !important;
    }
    .booking-point__check {
      width: 18px !important;
      height: 18px !important;
      border-radius: 4px !important;
      border: 1px solid rgba(255, 255, 255, 0.4) !important;
      background-color: transparent !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-shrink: 0 !important;
      box-sizing: border-box !important;
    }
    .booking-point__check svg {
      width: 8px !important;
      height: 7px !important;
      display: block !important;
    }
    .booking-form-card {
      background-color: #FBF7EE !important;
      border-radius: 20px !important;
      padding: 34px 30px 30px !important;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25) !important;
      box-sizing: border-box !important;
      width: 100% !important;
      max-width: 620px !important;
      margin-left: auto !important;
    }
    /* Form Labels: Dev Mode exact (Manrope Regular 400, 14px, line-height 25px, letter-spacing 0%) */
    .form-label,
    .form-plan-label {
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 14px !important;
      line-height: 25px !important;
      letter-spacing: 0% !important;
      color: #0B1D26 !important;
      margin-bottom: 6px !important;
      display: block !important;
      text-transform: uppercase !important;
    }
    .booking-form-card .form-row {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 16px !important;
      margin-bottom: 14px !important;
    }
    .booking-form-card .form-group {
      display: flex !important;
      flex-direction: column !important;
      margin-bottom: 14px !important;
    }
    .booking-form-card .form-group:last-child {
      margin-bottom: 0 !important;
    }
    .booking-form-card .form-input {
      width: 100% !important;
      height: 46px !important;
      padding: 0 16px !important;
      border: 1px solid #E5DAC1 !important;
      border-radius: 8px !important;
      background-color: #FFFFFF !important;
      font-family: 'Manrope', sans-serif !important;
      font-size: 14px !important;
      color: #0B1D26 !important;
      outline: none !important;
      box-sizing: border-box !important;
      transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    }
    .booking-form-card .form-input::placeholder {
      color: #A0AEC0 !important;
      font-size: 14px !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
    }
    .booking-form-card .form-input:focus {
      border-color: #146356 !important;
      box-shadow: 0 0 0 2px rgba(20, 99, 86, 0.15) !important;
    }
    /* Pills: Dev Mode exact (Manrope Regular 400, 15px, line-height 25px, letter-spacing 0%) */
    .plan-options {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 8px 10px !important;
    }
    .plan-pill {
      position: relative !important;
      display: inline-flex !important;
    }
    .plan-pill input {
      position: absolute !important;
      opacity: 0 !important;
      width: 0 !important;
      height: 0 !important;
      cursor: pointer !important;
    }
    .plan-pill label {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 7px 16px !important;
      height: 35px !important;
      background-color: #F9F2E3 !important;
      border: 1px solid #E7DABF !important;
      border-radius: 9999px !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 15px !important;
      line-height: 25px !important;
      letter-spacing: 0% !important;
      color: #0B1D26 !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
      box-sizing: border-box !important;
      white-space: nowrap !important;
    }
    .plan-pill input:checked + label {
      background-color: #146356 !important;
      color: #FFFFFF !important;
      border-color: #146356 !important;
    }
    /* Submit Button: Dev Mode exact (Manrope Medium 500, 16px, line-height 25px, text-align center) */
    .btn-form-submit {
      width: 100% !important;
      height: 52px !important;
      background-color: #146356 !important;
      color: #FFFFFF !important;
      border: none !important;
      border-radius: 9999px !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 500 !important;
      font-size: 16px !important;
      line-height: 25px !important;
      letter-spacing: 0% !important;
      text-align: center !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
      margin-top: 20px !important;
    }
    .btn-form-submit:hover {
      background-color: #0E4B41 !important;
      transform: translateY(-1px) !important;
      box-shadow: 0 4px 14px rgba(20, 99, 86, 0.3) !important;
    }

    /* ============================================================
       11. CTA BANNER SECTION (Exact Figma Dev Mode Match)
       ============================================================ */
    .cta-banner-section {
      padding: 80px 0 100px !important;
      background-color: #0B1D26 !important;
    }
    .cta-banner-section .figma-container {
      max-width: 1134px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 20px !important;
      padding-right: 20px !important;
      box-sizing: border-box !important;
    }
    .cta-banner-grid {
      display: grid !important;
      grid-template-columns: 560px 1fr !important;
      gap: 48px !important;
      align-items: center !important;
    }
    /* CTA Title: Dev Mode exact (Cormorant Garamond Bold 700, 65px, line-height 75px, width 560px) */
    .cta-banner-title {
      width: 100% !important;
      max-width: 560px !important;
      font-family: 'Cormorant Garamond', Georgia, serif !important;
      font-weight: 700 !important;
      font-size: 65px !important;
      line-height: 75px !important;
      letter-spacing: 0px !important;
      color: #FFFFFF !important;
      margin: 0 0 28px !important;
    }
    /* CTA Subtitle: Dev Mode exact (Manrope Regular 400, 16px, line-height 25px, width 560px) */
    .cta-banner-desc {
      width: 100% !important;
      max-width: 560px !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      font-size: 16px !important;
      line-height: 25px !important;
      letter-spacing: 0% !important;
      color: rgba(255, 255, 255, 0.75) !important;
      margin: 0 0 36px !important;
    }
    .cta-banner-buttons {
      display: flex !important;
      align-items: center !important;
      gap: 16px !important;
      flex-wrap: nowrap !important;
      width: auto !important;
    }
    .cta-btn-packages {
      display: inline-flex !important;
      align-items: center !important;
      gap: 10px !important;
      background-color: #146356 !important;
      color: #FFFFFF !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 500 !important;
      font-size: 15px !important;
      height: 46px !important;
      padding: 0 26px !important;
      border-radius: 9999px !important;
      text-decoration: none !important;
      transition: all 0.2s ease !important;
      box-shadow: 0 4px 14px rgba(20, 99, 86, 0.25) !important;
      box-sizing: border-box !important;
    }
    .cta-btn-packages:hover {
      background-color: #0E4B41 !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 18px rgba(20, 99, 86, 0.35) !important;
    }
    .cta-btn-whatsapp {
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      background-color: transparent !important;
      color: #FFFFFF !important;
      border: 1px solid rgba(255, 255, 255, 0.35) !important;
      font-family: 'Manrope', sans-serif !important;
      font-weight: 500 !important;
      font-size: 15px !important;
      height: 46px !important;
      padding: 0 24px !important;
      border-radius: 9999px !important;
      text-decoration: none !important;
      transition: all 0.2s ease !important;
      box-sizing: border-box !important;
    }
    .cta-btn-whatsapp:hover {
      background-color: rgba(255, 255, 255, 0.08) !important;
      border-color: #FFFFFF !important;
      transform: translateY(-2px) !important;
    }
    .cta-banner-image {
      width: 100% !important;
      max-width: 520px !important;
      height: 330px !important;
      border-radius: 20px !important;
      overflow: hidden !important;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35) !important;
      box-sizing: border-box !important;
      margin-left: auto !important;
    }
    .cta-banner-image img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display: block !important;
    }

    @media (max-width: 1024px) {
      .booking-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
      }
      .cta-banner-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
      }
      .cta-banner-title {
        font-size: 48px !important;
        line-height: 54px !important;
      }
      .cta-banner-image {
        max-width: 100% !important;
        margin-left: 0 !important;
      }
    }
    @media (max-width: 640px) {
      .cta-banner-title {
        font-size: 36px !important;
        line-height: 42px !important;
      }
    }


    /* ==========================================================================
       SUPER MOBILE & TABLET RESPONSIVE SYSTEM (100% Zero-Overflow, Flawless)
       * Desktop view (min-width: 1025px) remains 100% untouched and pixel-perfect.
       ========================================================================== */

    /* Root & Global Container Constraints */
    html, body {
      overflow-x: hidden !important;
      width: 100% !important;
      max-width: 100% !important;
    }

    @media (max-width: 1180px) {
      .figma-container,
      .site-footer .figma-container,
      .testimonials-section .figma-container,
      .faqs-section .figma-container,
      .cta-banner-section .figma-container,
      .booking-section .figma-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }
    }

    @media (max-width: 480px) {
      .figma-container,
      .site-footer .figma-container,
      .testimonials-section .figma-container,
      .faqs-section .figma-container,
      .cta-banner-section .figma-container,
      .booking-section .figma-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
      }
    }

    /* --------------------------------------------------------------------------
       TABLET BREAKPOINT (max-width: 1024px)
       -------------------------------------------------------------------------- */
    @media (max-width: 1024px) {
      /* Topbar */
      .topbar {
        height: auto !important;
        padding: 8px 0 !important;
      }
      .topbar__inner {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
      }
      .topbar__left {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 14px !important;
      }

      /* Navbar & Mobile Slide-down Menu */
      .navbar {
        height: 72px !important;
        position: relative !important;
      }
      .navbar__inner {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
      }
      .navbar__menu {
        display: none !important;
        position: absolute !important;
        top: 72px !important;
        left: 0 !important;
        width: 100% !important;
        background-color: #FFFFFF !important;
        flex-direction: column !important;
        padding: 16px 24px 20px !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12) !important;
        border-top: 1px solid #ECE7DE !important;
        z-index: 99999 !important;
        gap: 0 !important;
        box-sizing: border-box !important;
      }
      .navbar__menu.open {
        display: flex !important;
        animation: navSlideDown 0.25s ease-out forwards;
      }
      .navbar__menu li {
        width: 100% !important;
      }
      .navbar__menu-link {
        display: block !important;
        padding: 12px 0 !important;
        font-size: 16px !important;
        border-bottom: 1px solid #F4EFE6 !important;
        color: #0B1D26 !important;
        text-decoration: none !important;
      }
      .navbar__menu-link.active,
      .navbar__menu-link:hover {
        color: #146356 !important;
        font-weight: 700 !important;
      }
      .navbar__cta-btn {
        display: none !important;
      }
      .navbar__mobile-lang-group {
        display: flex !important;
      }
      .navbar__toggle {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        padding: 8px !important;
        z-index: 10 !important;
      }
      .navbar__toggle span {
        width: 24px !important;
        height: 2.5px !important;
        background-color: #0B1D26 !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
      }

      /* Hero Section */
      .hero-section {
        padding: 40px 0 50px !important;
      }
      .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
        text-align: left !important;
      }
      .hero-content {
        align-items: flex-start !important;
        display: flex !important;
        flex-direction: column !important;
        max-width: 100% !important;
        margin: 0 !important;
        text-align: left !important;
      }
      .hero-calligraphy {
        align-self: flex-start !important;
        margin-bottom: 20px !important;
      }
      .hero-title {
        font-size: 42px !important;
        line-height: 48px !important;
        text-align: left !important;
        margin-top: 0 !important;
        margin-bottom: 20px !important;
      }
      .hero-description {
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        margin-top: 0 !important;
        margin-bottom: 20px !important;
      }
      .hero-buttons {
        justify-content: flex-start !important;
        align-items: flex-start !important;
        display: flex !important;
        gap: 16px !important;
        margin-top: 0 !important;
      }
      .hero-card-wrapper {
        justify-content: center !important;
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 auto !important;
      }
      .hero-slider-card {
        width: 100% !important;
        max-width: 520px !important;
        height: 400px !important;
      }

      /* Stats Bar */
      .stats-bar {
        height: auto !important;
        padding: 30px 0 !important;
      }
      .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
      }
      .stat-item {
        border-right: none !important;
      }

      /* About Section */
      .about-section {
        padding: 60px 0 !important;
      }
      .about-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 40px !important;
      }
      .about-image-card {
        width: 100% !important;
        max-width: 100% !important;
        height: 380px !important;
        margin: 0 auto !important;
      }
      .about-content {
        max-width: 100% !important;
      }
      .about-heading {
        font-size: 36px !important;
        line-height: 42px !important;
      }

      /* Services Section */
      .services-section {
        padding: 60px 0 !important;
      }
      .services-box {
        grid-template-columns: repeat(2, 1fr) !important;
      }
      .service-item:nth-child(2n) {
        border-right: none !important;
      }
      .service-item:nth-child(n+7) {
        border-bottom: none !important;
      }

      /* Packages Section */
      .packages-section {
        padding: 50px 0 30px !important;
      }
      .packages-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
      }
      .package-card {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        flex-direction: column !important;
      }
      .package-card__image {
        width: 100% !important;
        height: 240px !important;
      }
      .package-card--full {
        flex-direction: column !important;
        height: auto !important;
      }
      .package-card--full .package-card__image {
        width: 100% !important;
        max-width: 100% !important;
        height: 240px !important;
      }
      .package-card--full .package-card__content {
        width: 100% !important;
        padding: 24px 20px !important;
      }
      .package-card__btn {
        width: 100% !important;
        justify-content: center !important;
      }

      /* Departure Schedule Section - Stacked Mobile Cards */
      .schedule-section {
        padding: 40px 0 45px !important;
        background-color: #FBF7EE !important;
      }
      .schedule-tag {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
      }
      .schedule-tag__text {
        font-family: 'Cinzel', Georgia, serif !important;
        font-size: 12px !important;
        letter-spacing: 2px !important;
        color: #C99436 !important;
        font-weight: 700 !important;
      }
      .schedule-title {
        font-family: 'Cormorant Garamond', Georgia, serif !important;
        font-size: 32px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        color: #0C282D !important;
        margin-bottom: 10px !important;
      }
      .schedule-subtitle {
        font-family: 'Manrope', sans-serif !important;
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        text-align: center !important;
        color: #5A6E72 !important;
        max-width: 380px !important;
        margin: 0 auto 26px !important;
      }
      .departure-board {
        background: #142C34 !important;
        border: 1px solid rgba(232, 213, 166, 0.16) !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
      }
      .departure-row.departure-row--header {
        display: none !important;
      }
      .departure-row {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: auto !important;
        min-height: 80px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(232, 213, 166, 0.12) !important;
        padding: 16px 16px !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: unset !important;
      }
      .departure-row:last-child {
        border-bottom: none !important;
      }
      .departure-left {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        flex: 1 !important;
        min-width: 0 !important;
        padding-right: 10px !important;
      }
      .departure-day {
        font-family: 'Cormorant Garamond', Georgia, serif !important;
        font-weight: 700 !important;
        font-size: 24px !important;
        line-height: 1.15 !important;
        color: #E8D5A6 !important;
        margin-bottom: 8px !important;
      }
      .departure-routes {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        align-items: center !important;
      }
      .route-badge {
        background-color: rgba(16, 42, 51, 0.9) !important;
        border: 1px solid rgba(165, 214, 206, 0.25) !important;
        border-radius: 30px !important;
        height: auto !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        color: #A5D6CE !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
      }
      .departure-meta {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        padding-left: 12px !important;
        min-width: 110px !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
      }
      .departure-meta__item {
        display: flex !important;
        flex-direction: column !important;
      }
      .departure-meta__label {
        display: block !important;
        font-family: 'Manrope', sans-serif !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        color: #8FA4A0 !important;
        text-transform: none !important;
        margin-bottom: 2px !important;
        letter-spacing: 0.2px !important;
        white-space: nowrap !important;
      }
      .departure-time {
        font-family: 'Cinzel', Georgia, serif !important;
        font-weight: 700 !important;
        font-size: 13.5px !important;
        line-height: 1.2 !important;
        color: #FFFFFF !important;
        white-space: nowrap !important;
      }
      .departure-duration {
        font-family: 'Manrope', sans-serif !important;
        font-weight: 700 !important;
        font-size: 13.5px !important;
        line-height: 1.2 !important;
        color: #FFFFFF !important;
        white-space: nowrap !important;
      }
      .departure-meta__divider {
        display: block !important;
        height: 1px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        margin: 6px 0 !important;
        width: 100% !important;
      }
      .departure-row--multi {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 16px 16px !important;
        gap: 12px !important;
      }
      .departure-row--multi .departure-left {
        padding-right: 0 !important;
        margin-bottom: 2px !important;
      }
      .departure-row--multi .departure-multi-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
      }
      .departure-row--multi .departure-subrow {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 0 !important;
        border-top: 1px solid rgba(232, 213, 166, 0.08) !important;
        width: 100% !important;
      }
      .departure-row--multi .departure-subrow:first-child {
        border-top: none !important;
        padding-top: 0 !important;
      }
      .departure-row--multi .departure-subrow .departure-meta {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        padding-left: 12px !important;
        min-width: 110px !important;
        flex-shrink: 0 !important;
      }
      .departure-row--multi .departure-subrow .departure-meta__item {
        display: flex !important;
        flex-direction: column !important;
      }
      .departure-row--multi .departure-subrow .departure-meta__label {
        display: block !important;
        font-family: 'Manrope', sans-serif !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        color: #8FA4A0 !important;
        margin-bottom: 2px !important;
        white-space: nowrap !important;
      }
      .departure-row--multi .departure-subrow .departure-time {
        font-family: 'Cinzel', Georgia, serif !important;
        font-weight: 700 !important;
        font-size: 13.5px !important;
        line-height: 1.2 !important;
        color: #FFFFFF !important;
      }
      .departure-row--multi .departure-subrow .departure-duration {
        font-family: 'Manrope', sans-serif !important;
        font-weight: 700 !important;
        font-size: 12.5px !important;
        color: #E8D5A6 !important;
      }
      .departure-row--multi .departure-subrow .departure-meta__divider {
        display: block !important;
        height: 1px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        margin: 4px 0 !important;
        width: 100% !important;
      }

      /* FAQs Section */
      .faqs-section {
        padding: 40px 0 50px !important;
      }
      .faqs-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
      }
      .faqs-heading {
        font-size: 34px !important;
        line-height: 40px !important;
      }
      .faqs-subheading {
        font-size: 15px !important;
        line-height: 23px !important;
        margin-bottom: 24px !important;
      }
      .faq-help-card {
        width: 100% !important;
        max-width: 420px !important;
        margin: 24px auto 0 !important;
      }
      .faq-accordion {
        max-width: 100% !important;
      }
      .faq-bg-illustration {
        opacity: 0.35 !important;
        max-width: 80% !important;
        pointer-events: none !important;
      }

      /* Testimonials Section */
      .testimonials-section {
        padding: 60px 0 50px !important;
      }
      .testimonials-title {
        font-size: 34px !important;
        line-height: 40px !important;
      }
      .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-top: 36px !important;
      }
      .testimonial-card {
        width: 100% !important;
        max-width: 540px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
      }

      /* Booking Form Section */
      .booking-section {
        padding: 60px 0 !important;
      }
      .booking-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
      }
      .booking-form-card {
        width: 100% !important;
        max-width: 600px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        padding: 32px 24px !important;
      }
      .booking-heading {
        font-size: 36px !important;
        line-height: 42px !important;
      }

      /* CTA Banner Section */
      .cta-banner-section {
        padding: 50px 0 !important;
      }
      .cta-banner-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
        text-align: center !important;
      }
      .cta-banner-content {
        max-width: 600px !important;
        margin: 0 auto !important;
      }
      .cta-banner-title {
        font-size: 36px !important;
        line-height: 42px !important;
      }
      .cta-banner-desc {
        margin-bottom: 24px !important;
      }
      .cta-banner-buttons {
        justify-content: center !important;
        flex-wrap: wrap !important;
      }
      .cta-banner-image {
        width: 100% !important;
        max-width: 500px !important;
        height: 300px !important;
        margin: 0 auto !important;
      }

      /* Footer Section */
      .site-footer {
        padding: 60px 0 0 !important;
      }
      .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 40px 30px !important;
        padding-bottom: 45px !important;
      }
      .footer-brand {
        grid-column: span 2 !important;
      }
      .footer-brand__desc {
        max-width: 480px !important;
      }
    }

    /* --------------------------------------------------------------------------
       MOBILE SMARTPHONES BREAKPOINT (max-width: 640px)
       -------------------------------------------------------------------------- */
    @media (max-width: 640px) {
      /* Topbar */
      .topbar__item:nth-child(2),
      .topbar__item:nth-child(3) {
        display: none !important;
      }
      .topbar__social {
        display: none !important;
      }

      /* Hero */
      .hero-section {
        padding: 28px 0 36px !important;
      }
      .hero-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
      }
      .hero-calligraphy {
        align-self: flex-start !important;
        margin-bottom: 0 !important;
      }
      .hero-calligraphy img {
        width: 125px !important;
        height: auto !important;
      }
      .hero-title {
        font-size: 30px !important;
        line-height: 36px !important;
        text-align: left !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
      }
      .hero-description {
        font-size: 14px !important;
        line-height: 22px !important;
        text-align: left !important;
        margin-top: 0 !important;
        margin-bottom: 6px !important;
      }
      .hero-buttons {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
        margin-top: 0 !important;
      }
      .btn-primary-hero,
      .btn-whatsapp-hero {
        width: 100% !important;
        justify-content: center !important;
        height: 46px !important;
      }
      .hero-slider-card {
        height: 280px !important;
      }

      /* Stats */
      .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px 14px !important;
      }
      .stat-item:last-child {
        grid-column: span 2 !important;
      }
      .stat-number {
        font-size: 30px !important;
        line-height: 34px !important;
      }
      .stat-label {
        font-size: 12.5px !important;
        line-height: 18px !important;
      }

      /* About */
      /* About Section - Mobile View matching User Reference */
      .about-section {
        padding: 44px 0 50px !important;
      }
      .about-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        width: 100% !important;
      }
      .about-content {
        display: contents !important;
      }

      /* 1. Tag (Centered) */
      .about-tag {
        order: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        margin: 0 auto 16px !important;
        width: auto !important;
      }
      .about-tag__icon {
        width: 34px !important;
        height: 10px !important;
        display: block !important;
        flex-shrink: 0 !important;
      }
      .about-tag__text {
        width: auto !important;
        height: auto !important;
        font-family: var(--font-body), sans-serif !important;
        font-weight: 500 !important;
        font-size: 15px !important;
        line-height: normal !important;
        color: var(--color-gold-accent) !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        display: inline-block !important;
      }

      /* 2. Heading (Centered) */
      .about-heading {
        order: 2 !important;
        font-family: var(--font-heading), 'Cormorant Garamond', Georgia, serif !important;
        font-weight: 700 !important;
        font-size: 28px !important;
        line-height: 35px !important;
        color: #0C282D !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 22px !important;
      }
      .about-heading-br-desktop {
        display: none !important;
      }
      .about-heading-br-mobile {
        display: inline !important;
      }

      /* 3. Features Block (Centered) */
      .about-features {
        order: 3 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        margin-bottom: 26px !important;
        width: 100% !important;
        text-align: center !important;
      }
      .about-feature {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
      }
      .about-feature__title {
        width: auto !important;
        height: auto !important;
        font-family: var(--font-body), sans-serif !important;
        font-weight: 600 !important;
        font-size: 15.5px !important;
        line-height: 22px !important;
        color: var(--color-green-primary) !important;
        text-align: center !important;
        justify-content: center !important;
        margin: 0 0 8px 0 !important;
        display: block !important;
      }
      .about-feature__desc {
        width: 100% !important;
        max-width: 100% !important;
        font-family: var(--font-body), sans-serif !important;
        font-weight: 400 !important;
        font-size: 14px !important;
        line-height: 22px !important;
        color: #2D3748 !important;
        text-align: center !important;
        margin: 0 !important;
      }
      .about-feature__desc br {
        display: none !important;
      }

      /* 4. Collage Image (Between Text and Stats) */
      .about-image-card {
        order: 4 !important;
        width: 100% !important;
        max-width: 480px !important;
        height: auto !important;
        aspect-ratio: 1148 / 1370 !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        box-shadow: 0 10px 30px rgba(11, 29, 38, 0.08) !important;
        margin: 0 auto 28px !important;
      }
      .about-image-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
      }

      /* 5. Stats Cards (2x2 Clean Grid, Transparent, Icon Left + Text Right) */
      .about-cards-grid {
        order: 5 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px 14px !important;
        width: 100% !important;
        margin-bottom: 28px !important;
      }
      .about-mini-card {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        background: #FFFFFF !important;
        border: 1px solid rgba(12, 40, 45, 0.08) !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 16px rgba(11, 29, 38, 0.04) !important;
        padding: 12px 12px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        box-sizing: border-box !important;
      }
      .about-mini-card:hover {
        transform: none !important;
        box-shadow: 0 4px 16px rgba(11, 29, 38, 0.04) !important;
      }
      .about-mini-card__icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 50% !important;
        background: var(--color-green-primary) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        color: #FFFFFF !important;
      }
      .about-mini-card__icon svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #FFFFFF !important;
      }
      .about-mini-card__content {
        display: flex !important;
        flex-direction: column !important;
        border-left: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        flex: 1 !important;
        text-align: left !important;
        min-width: 0 !important;
      }
      .about-mini-card__num {
        font-family: var(--font-cinzel), 'Cormorant Garamond', Georgia, serif !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        color: #0C282D !important;
        margin: 0 0 2px 0 !important;
        white-space: nowrap !important;
      }
      .about-mini-card__label {
        font-family: var(--font-body), sans-serif !important;
        font-size: 11.5px !important;
        line-height: 1.35 !important;
        color: #4A5568 !important;
        margin: 0 !important;
        opacity: 0.9 !important;
      }

      /* 6. CTA Button (Centered Pill) */
      .btn-about {
        order: 6 !important;
        width: auto !important;
        min-width: 140px !important;
        height: 44px !important;
        border-radius: 9999px !important;
        background-color: var(--color-green-primary) !important;
        color: #FFFFFF !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 28px !important;
        margin: 0 auto !important;
        align-self: center !important;
        box-shadow: 0 4px 14px rgba(20, 99, 86, 0.25) !important;
      }
      .btn-about__text {
        font-family: var(--font-body), sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #FFFFFF !important;
      }

      /* ========================================================
         UNIFIED SECTION HEADERS & TYPOGRAPHY ACROSS ALL SECTIONS
         ======================================================== */
      .about-tag,
      .services-tag,
      .packages-tag,
      .schedule-tag,
      .faqs-tag,
      .testimonials-tag,
      .booking-tag {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        margin: 0 auto 8px !important;
        text-align: center !important;
        width: fit-content !important;
      }
      .about-tag__icon,
      .services-tag__icon,
      .packages-tag__icon,
      .testimonials-tag__icon,
      .schedule-tag__icon {
        width: 34px !important;
        height: 10px !important;
        display: block !important;
        flex-shrink: 0 !important;
      }
      .services-tag__icon--reverse,
      .booking-tag__decor--reverse,
      .schedule-tag__icon--reverse,
      .testimonials-tag__icon--reverse {
        transform: scaleX(-1) !important;
      }
      .about-tag__text,
      .services-tag__text,
      .packages-tag__text,
      .schedule-tag__text,
      .faqs-tag .schedule-tag__text,
      .testimonials-tag__text,
      .booking-tag__text {
        width: auto !important;
        height: auto !important;
        white-space: nowrap !important;
        display: inline-block !important;
        font-family: 'Cinzel', Georgia, serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 2px !important;
        color: #C6A15B !important;
        text-transform: uppercase !important;
      }

      /* Unified Section Headings (Headlines) on Mobile */
      .about-heading,
      .services-heading,
      .packages-heading,
      .schedule-title,
      .schedule-heading,
      .faqs-heading,
      .testimonials-title,
      .testimonials-heading,
      .booking-title,
      .booking-heading,
      .cta-banner-title {
        font-family: 'Cormorant Garamond', Georgia, serif !important;
        font-size: 26px !important;
        line-height: 33px !important;
        font-weight: 700 !important;
        text-align: center !important;
        margin: 0 auto 8px !important;
        color: #0C282D !important;
        width: 100% !important;
        max-width: 330px !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
      }
      .services-section .services-heading,
      .booking-section .booking-title,
      .booking-section .booking-heading,
      .cta-banner-section .cta-banner-title {
        color: #FFFFFF !important;
      }
      body.contact-page .booking-section .booking-title,
      body.contact-page .booking-section .booking-heading,
      .contact-page .booking-title,
      .contact-page .booking-heading {
        color: #0C282D !important;
      }
      body.contact-page .booking-section .booking-subtitle,
      body.contact-page .booking-section .booking-desc,
      .contact-page .booking-subtitle,
      .contact-page .booking-desc {
        color: #5A6E72 !important;
      }
      .schedule-title br,
      .faqs-heading br,
      .booking-title br,
      .cta-banner-title br {
        display: inline !important;
      }
      .schedule-title-br-mobile,
      .testimonials-title br {
        display: block !important;
      }
      .testimonials-title {
        max-width: 380px !important;
        font-size: 25px !important;
        line-height: 32px !important;
      }
      .services-heading,
      .packages-heading {
        max-width: 100% !important;
        font-size: clamp(18px, 5.4vw, 24px) !important;
        line-height: 1.25 !important;
        text-align: center !important;
        margin: 0 auto 20px !important;
      }
      .services-heading__line1,
      .packages-heading__line1 {
        display: block !important;
        white-space: nowrap !important;
        text-align: center !important;
        margin: 0 auto 2px !important;
        line-height: 1.25 !important;
      }
      .services-heading__line2,
      .packages-heading__line2 {
        display: block !important;
        white-space: nowrap !important;
        text-align: center !important;
        margin: 0 auto !important;
        line-height: 1.25 !important;
      }
      .services-heading-br,
      .packages-heading-br {
        display: none !important;
      }

      /* Unified Section Subtitles (Taglines) on Mobile */
      .services-subtitle,
      .services-desc,
      .schedule-subtitle,
      .schedule-subheading,
      .faqs-subheading,
      .faqs-subtitle,
      .testimonials-subtitle,
      .testimonials-subheading,
      .booking-subtitle,
      .booking-desc,
      .cta-banner-desc {
        font-family: 'Manrope', sans-serif !important;
        font-size: 14px !important;
        line-height: 22px !important;
        font-weight: 400 !important;
        text-align: center !important;
        margin: 0 auto 20px !important;
        max-width: 330px !important;
        box-sizing: border-box !important;
        color: #5A6E72 !important;
        opacity: 0.9 !important;
      }
      .services-section .services-subtitle,
      .booking-section .booking-subtitle,
      .booking-section .booking-desc,
      .cta-banner-section .cta-banner-desc {
        color: #B2D4CC !important;
      }
      .schedule-subtitle br,
      .faqs-subheading br,
      .faqs-subtitle br,
      .testimonials-subtitle br,
      .booking-subtitle br,
      .cta-banner-desc br {
        display: inline !important;
      }
      .testimonials-subtitle {
        max-width: 100% !important;
        width: 100% !important;
        font-size: clamp(12.5px, 3.4vw, 14px) !important;
        line-height: 20px !important;
        margin: 0 auto 20px !important;
        text-align: center !important;
      }
      .testimonials-subtitle__line {
        display: block !important;
        white-space: nowrap !important;
        text-align: center !important;
      }
      .booking-left {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
      }

      /* Services Grid Mobile */
      .services-section {
        padding: 45px 0 !important;
      }
      .services-box {
        grid-template-columns: 1fr !important;
      }
      .service-item {
        border-right: none !important;
        border-bottom: 1px solid rgba(232, 213, 166, 0.2) !important;
        padding: 22px 16px !important;
      }
      .service-item:last-child {
        border-bottom: none !important;
      }

      /* Packages Grid Mobile */
      .package-card__image,
      .package-card--full .package-card__image {
        height: 200px !important;
      }
      .package-card__content {
        padding: 20px 16px !important;
      }
      .package-card__desc {
        font-size: 14px !important;
        line-height: 22px !important;
      }

      /* Departure Board Mobile: Continuous Board, Zero Gap, Hairline Dividers */
      .schedule-section {
        padding: 40px 0 45px !important;
      }
      .departure-board {
        background: #142C34 !important;
        border: 1px solid rgba(232, 213, 166, 0.16) !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 auto !important;
      }
      .departure-row.departure-row--header {
        display: none !important;
      }
      .departure-row {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: auto !important;
        min-height: 76px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(232, 213, 166, 0.12) !important;
        padding: 14px 16px !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 !important;
      }
      .departure-row:last-child {
        border-bottom: none !important;
      }
      .departure-row--multi {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 16px 16px !important;
        gap: 12px !important;
      }
      .departure-row--multi .departure-left {
        padding-right: 0 !important;
        margin-bottom: 2px !important;
      }
      .departure-row--multi .departure-multi-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
      }
      .departure-row--multi .departure-subrow {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 0 !important;
        border-top: 1px solid rgba(232, 213, 166, 0.08) !important;
        width: 100% !important;
      }
      .departure-row--multi .departure-subrow:first-child {
        border-top: none !important;
        padding-top: 0 !important;
      }
      .departure-row--multi .departure-subrow .departure-meta {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        padding-left: 12px !important;
        min-width: 110px !important;
        flex-shrink: 0 !important;
      }
      .departure-row--multi .departure-subrow .departure-meta__item {
        display: flex !important;
        flex-direction: column !important;
      }
      .departure-row--multi .departure-subrow .departure-meta__label {
        display: block !important;
        font-family: 'Manrope', sans-serif !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        color: #8FA4A0 !important;
        margin-bottom: 2px !important;
        white-space: nowrap !important;
      }
      .departure-row--multi .departure-subrow .departure-time {
        font-family: 'Cinzel', Georgia, serif !important;
        font-weight: 700 !important;
        font-size: 13.5px !important;
        line-height: 1.2 !important;
        color: #FFFFFF !important;
      }
      .departure-row--multi .departure-subrow .departure-duration {
        font-family: 'Manrope', sans-serif !important;
        font-weight: 700 !important;
        font-size: 12.5px !important;
        color: #E8D5A6 !important;
      }
      .departure-row--multi .departure-subrow .departure-meta__divider {
        display: block !important;
        height: 1px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        margin: 4px 0 !important;
        width: 100% !important;
      }

      /* FAQs Mobile: Centered header, questions, then Help Card below */
      .faqs-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        width: 100% !important;
      }
      .faqs-left {
        display: contents !important;
      }
      .faqs-tag {
        order: 1 !important;
        margin: 0 auto 8px !important;
      }
      .faqs-heading {
        order: 2 !important;
        margin: 0 auto 8px !important;
      }
      .faqs-subheading {
        order: 3 !important;
        margin: 0 auto 20px !important;
      }
      .faq-accordion {
        order: 4 !important;
        width: 100% !important;
        max-width: 100% !important;
      }
      .faq-question {
        padding: 15px 16px !important;
        gap: 10px !important;
      }
      .faq-question__left {
        gap: 10px !important;
      }
      .faq-question__text {
        font-size: 16px !important;
        line-height: 22px !important;
      }
      .faq-answer {
        margin: 0 12px !important;
      }
      .faq-item.active .faq-answer {
        margin: 0 12px 14px 12px !important;
      }
      .faq-answer__inner {
        padding: 14px 14px !important;
      }
      .faq-answer__inner p {
        font-size: 14px !important;
        line-height: 22px !important;
      }
      .faq-help-card {
        order: 5 !important;
        padding: 24px 18px !important;
        min-height: auto !important;
        width: 100% !important;
        max-width: 360px !important;
        margin: 28px auto 0 !important;
      }
      .faq-help-card__btn {
        width: 100% !important;
      }

      /* Testimonials Slider Mobile: Seamless 1-card sliding, 100% width, zero gap */
      .testimonials-slider-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        margin: 28px auto 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        border-radius: 18px !important;
        direction: ltr !important;
      }
      .testimonials-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
        direction: ltr !important;
      }
      .testimonial-card {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        height: auto !important;
        min-height: 240px !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        padding: 26px 20px 22px !important;
      }
      .testimonial-text {
        font-size: 14.5px !important;
        line-height: 23px !important;
      }
      .testimonial-slider-controls {
        margin-top: 24px !important;
        gap: 16px !important;
      }
      .testimonial-arrow-btn {
        width: 48px !important;
        height: 48px !important;
      }

      /* Booking Form */
      .booking-section {
        padding: 45px 0 !important;
      }
      .booking-heading {
        font-size: 28px !important;
        line-height: 34px !important;
      }
      .booking-form-card {
        padding: 24px 16px !important;
        border-radius: 18px !important;
      }
      .form-row {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
      }
      .plan-options {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
      }
      .plan-pill label {
        font-size: 12px !important;
        padding: 8px 6px !important;
      }

      /* CTA Banner */
      .cta-banner-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin: 0 auto !important;
        padding: 0 16px !important;
      }
      .cta-banner-title {
        font-size: 28px !important;
        line-height: 34px !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 14px !important;
      }
      .cta-banner-desc {
        font-size: 14.5px !important;
        line-height: 22px !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 24px !important;
      }
      .cta-banner-buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
        margin: 0 auto !important;
      }
      .cta-btn-packages,
      .cta-btn-whatsapp {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 280px !important;
        height: 50px !important;
        padding: 0 24px !important;
        border-radius: 9999px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        text-align: center !important;
      }
      .cta-banner-image {
        width: 100% !important;
        max-width: 320px !important;
        height: 220px !important;
        border-radius: 18px !important;
        margin: 0 auto !important;
        overflow: hidden !important;
      }
      .cta-banner-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 18px !important;
      }

      /* Footer */
      .site-footer {
        padding: 50px 0 0 !important;
      }
      .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
        padding-bottom: 40px !important;
      }
      .footer-brand {
        grid-column: span 1 !important;
      }
      .footer-brand__desc {
        width: 100% !important;
        max-width: 100% !important;
      }
      .footer-bottom-bar {
        min-height: auto !important;
        padding: 16px 0 !important;
      }
      .footer-bottom-container {
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
        font-size: 14px !important;
        line-height: 22px !important;
      }
      .services-heading,
      .packages-heading {
        font-size: 21px !important;
        line-height: 27px !important;
        max-width: 100% !important;
      }
    }

    /* --------------------------------------------------------------------------
       EXTRA NARROW PHONES (max-width: 380px)
       -------------------------------------------------------------------------- */
    @media (max-width: 380px) {
      .hero-title {
        font-size: 28px !important;
        line-height: 34px !important;
      }
      .hero-slider-card {
        height: 240px !important;
      }
      .stat-number {
        font-size: 26px !important;
      }
      .booking-heading,
      .booking-title,
      .packages-heading,
      .about-heading,
      .services-heading,
      .schedule-title,
      .schedule-heading,
      .faqs-heading,
      .testimonials-title,
      .testimonials-heading,
      .cta-banner-title {
        font-size: 24px !important;
        line-height: 30px !important;
      }
      .services-subtitle,
      .services-desc,
      .schedule-subtitle,
      .schedule-subheading,
      .faqs-subheading,
      .faqs-subtitle,
      .testimonials-subtitle,
      .testimonials-subheading,
      .booking-subtitle,
      .booking-desc,
      .cta-banner-desc {
        font-size: 13px !important;
        line-height: 20px !important;
      }
      .services-heading,
      .packages-heading {
        font-size: 19px !important;
        line-height: 25px !important;
        max-width: 100% !important;
      }
    }

    @keyframes navSlideDown {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }

/* ==========================================================================
   LUXURY SMOOTH SCROLL & REVEAL ANIMATIONS
   ========================================================================== */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Service Booking Popup Modals */
body.modal-open .site-header {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-20px) !important;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease !important;
}
.service-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(11, 29, 38, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  z-index: 99999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.service-modal-overlay.is-active {
  opacity: 1 !important;
  visibility: visible !important;
}
.service-modal-dialog {
  background-color: #FBF7EE !important;
  border: 1px solid rgba(196, 171, 118, 0.6) !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 560px !important;
  max-height: calc(100vh - 40px) !important;
  overflow-y: auto !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important;
  padding: 24px 26px 20px !important;
  box-sizing: border-box !important;
  position: relative !important;
  margin: auto !important;
  transform: translateY(16px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-modal-overlay.is-active .service-modal-dialog {
  transform: translateY(0) scale(1) !important;
}
.service-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(11, 29, 38, 0.08);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0B1D26;
  transition: background 0.2s, transform 0.2s, color 0.2s;
  padding: 0;
}
.service-modal-close:hover {
  background: #146356;
  color: #FFFFFF;
  transform: rotate(90deg);
}
.service-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(20, 99, 86, 0.1);
  color: #146356;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}
.service-modal-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #0B1D26 !important;
  margin: 0 0 4px !important;
  line-height: 1.25 !important;
}
.service-modal-subtitle {
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  color: #556972 !important;
  margin: 0 0 14px !important;
  line-height: 1.4 !important;
}
.service-modal-form .form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
}
.service-modal-form .form-group {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 10px !important;
}
.service-modal-form .form-label {
  font-family: 'Manrope', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #0B1D26 !important;
  margin-bottom: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.service-modal-form .form-input {
  width: 100% !important;
  height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid #E5DAC1 !important;
  border-radius: 7px !important;
  background-color: #FFFFFF !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 13.5px !important;
  color: #0B1D26 !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.service-modal-form .form-input:focus {
  border-color: #146356 !important;
  box-shadow: 0 0 0 2px rgba(20, 99, 86, 0.15) !important;
}
.service-modal-form .file-upload-box {
  border: 2px dashed #D3C6A9 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  padding: 10px 14px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: border-color 0.2s, background-color 0.2s !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
}
.service-modal-form .file-upload-box:hover {
  border-color: #146356 !important;
  background-color: #F4EFE3 !important;
}
.service-modal-form .file-upload-box svg {
  color: #146356 !important;
}
.file-upload-label-main {
  font-family: 'Manrope', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #0B1D26 !important;
}
.file-upload-label-sub {
  font-family: 'Manrope', sans-serif !important;
  font-size: 11px !important;
  color: #718096 !important;
}
.file-upload-selected {
  margin-top: 6px !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #146356 !important;
  display: none !important;
  align-items: center !important;
  gap: 5px !important;
}
.service-modal-submit-btn {
  width: 100% !important;
  height: 44px !important;
  background-color: #146356 !important;
  border: none !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  margin-top: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: background-color 0.2s, transform 0.15s !important;
}
.service-modal-submit-btn:hover {
  background-color: #0B1D26 !important;
  transform: translateY(-1px) !important;
}
@media (max-width: 600px) {
  .service-modal-dialog {
    padding: 20px 16px 16px !important;
    border-radius: 16px !important;
  }
  .service-modal-form .form-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .service-modal-title {
    font-size: 21px !important;
  }
}

/* ============================================================
   SCHEDULE POSTER BOARD (Image-based 1:1 Desktop & Mobile)
   ============================================================ */
.schedule-poster-wrap {
  width: 100%;
  max-width: 1134px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0 16px 40px rgba(12, 40, 45, 0.09));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.schedule-poster-wrap:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 22px 48px rgba(12, 40, 45, 0.13));
}

.schedule-poster-picture {
  display: block;
  width: 100%;
}

.schedule-poster-img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 18px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

@media (max-width: 768px) {
  .schedule-poster-wrap {
    max-width: 520px;
    padding: 0 12px;
  }
  .schedule-poster-img {
    border-radius: 16px;
  }
}

@media (max-width: 480px) {
  .schedule-poster-wrap {
    max-width: 100%;
    padding: 0 8px;
  }
  .schedule-poster-img {
    border-radius: 14px;
  }
}