:root {
  /* Yeh local variables hain jo sirf is page mein use hote hain */
  --dd-hero-height: 560px;
  /* Hero section ki minimum height */
  --dd-sidebar-width: 320px;
  /* Right side sticky card width */
  --dd-layout-gap: 48px;
  /* Left column aur sidebar ke beech gap */
  --dd-section-gap: 56px;
  /* Har section ke beech vertical gap */
  --dd-card-radius: 18px;
  /* Rounded corners sabhi cards ke liye */
  --dd-check-color: #2E7D32;
  /* Checklist tick icon ka green color */
  --dd-season-best: #1B5E20;
  /* Best season badge — dark green */
  --dd-season-avg: #E65100;
  /* Average season badge — deep orange */
  --dd-season-ok: #1565C0;
  /* Ok season badge — blue */
}

.dd-hero {
  position: relative;
  min-height: var(--dd-hero-height);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Content pushes to the bottom */
  overflow: hidden;
  background: var(--maroon-deep);
  /* Fallback color agar image load na ho */
}

.dd-hero__bg {
  position: absolute;
  inset: 0;
  /* top:0; left:0; right:0; bottom:0; shorthand */
  z-index: 0;
}

.dd-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Image ko crop karke fill karo */
  object-position: center 30%;
  /* Image ka top part dikhao (temples/ghats) */
  display: block;
  /* Subtle zoom animation on page load */
  animation: ddHeroZoom 12s ease-in-out infinite alternate;
}

@keyframes ddHeroZoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.06);
  }
}

.dd-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(44, 17, 9, 0.92) 0%,
      /* Maroon-deep at bottom */
      rgba(44, 17, 9, 0.55) 45%,
      /* Semi-transparent middle */
      rgba(44, 17, 9, 0.25) 100%
      /* Light at top */
    );
  z-index: 1;
}

.dd-hero__content {
  position: relative;
  z-index: 2;
  /* Above bg and overlay */
  padding-top: 56px;
  padding-bottom: 56px;
  display: flex;
  align-items: flex-end;
  /* Vertically align to the bottom of hero */
  justify-content: space-between;
  gap: 32px;
}

/* Left text block inside hero */
.dd-hero__text {
  flex: 1;
  max-width: 640px;
}

/* Small label above main title — "Pilgrimage Destination" */
.dd-hero__label {
  display: inline-block;
  background: rgba(244, 169, 59, 0.22);
  /* Marigold tint */
  border: 1px solid rgba(244, 169, 59, 0.45);
  color: var(--marigold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
  font-family: 'Manrope', sans-serif;
}

/* Main destination title H1 */
.dd-hero__title {
  color: var(--white);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  /* Responsive font size */
  font-family: 'Fraunces', serif;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  /* Text shadow for extra readability */
  text-shadow: 0 2px 20px rgba(44, 17, 9, 0.4);
}

/* Hero sub-description */
.dd-hero__sub {
  color: rgba(255, 253, 249, 0.82);
  /* Off-white, slightly muted */
  font-size: 1.05rem;
  max-width: 520px;
  line-height: 1.65;
  margin: 0 0 24px;
}

/* Row of quick-fact badges below the description */
.dd-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Individual badge pill — shows location, season, group type, rating */
.dd-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 253, 249, 0.14);
  /* Frosted glass effect */
  border: 1px solid rgba(255, 253, 249, 0.28);
  color: rgba(255, 253, 249, 0.9);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  /* Glass blur */
  font-family: 'Manrope', sans-serif;
  transition: background 0.25s;
}

/* Badge hover — slightly more opaque */
.dd-badge:hover {
  background: rgba(255, 253, 249, 0.22);
}

/* ----------------------------------------------------------------
   HERO BOOKING CARD (Desktop — shown inside hero on right side)
   Mobile pe yeh hidden hota hai, sidebar card use hota hai
   ---------------------------------------------------------------- */

/* Floating booking card inside hero — appears as a glass card on right */
.dd-hero-booking-card {
  background: rgba(251, 242, 228, 0.97);
  /* Sand-colored glass */
  backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  /* 28px from main design system */
  padding: 28px 26px;
  width: var(--dd-sidebar-width);
  /* 320px fixed width */
  flex-shrink: 0;
  box-shadow:
    0 30px 60px -20px rgba(44, 17, 9, 0.55),
    0 0 0 1px rgba(244, 169, 59, 0.25);
  /* Subtle marigold ring */
  animation: ddCardFadeIn 0.7s ease both;
  /* Fade-in on load */
}

/* Fade-in animation for the hero booking card */
@keyframes ddCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* "Starting from" chip label inside booking card */
.dd-booking-card__chip {
  display: inline-block;
  background: var(--flame-grad);
  /* Ember to Marigold gradient */
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
  font-family: 'Manrope', sans-serif;
}

/* Price display inside booking card */
.dd-booking-card__price {
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--maroon-deep);
  line-height: 1.1;
  margin-bottom: 10px;
}

/* "per adult, double sharing" subtext below price */
.dd-booking-card__price span {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ash-soft);
  margin-top: 4px;
}

/* Booking card meta info (inclusions, cancellation) */
.dd-booking-card__meta {
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Each meta line — small checkmark text */
.dd-booking-card__meta span {
  font-size: 0.8rem;
  color: var(--ash-soft);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Green dot before each meta item */
.dd-booking-card__meta span::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ember);
  flex-shrink: 0;
}

.dd-layout {
  display: grid;
  grid-template-columns: 1fr var(--dd-sidebar-width);
  /* Content | Sidebar */
  gap: var(--dd-layout-gap);
  align-items: start;
  /* Both columns start from top, don't stretch */
}

/* Left main content column */
.dd-main-col {
  min-width: 0;
  /* Prevents overflow in grid */
}

/* Right sidebar — only visible on desktop */
.dd-sidebar {
  position: sticky;
  top: 90px;
  /* Sticky ke liye header height se thoda neeche */
  align-self: start;
}

/* Card inside the sidebar — same styling as hero booking card but without glass */
.dd-sidebar__card {
  background: var(--white);
  border-radius: var(--dd-card-radius);
  padding: 28px 24px;
  box-shadow: var(--shadow-soft);
  /* From main design system */
  border: 1px solid var(--line);
}

/* ----------------------------------------------------------------
   TRUST BADGES — Inside sidebar card at the bottom
   Rating, Groups, Safe Booking icons with text
   ---------------------------------------------------------------- */
.dd-trust-row {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  /* Dashed separator */
}

/* Individual trust item (icon + text) */
.dd-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}

/* Trust item icon — ember colored */
.dd-trust-item svg {
  stroke: var(--ember);
}

/* Trust item label text */
.dd-trust-item span {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ash-soft);
  font-family: 'Manrope', sans-serif;
}


/* ================================================================
   SECTION: CONTENT SECTION BLOCKS
   Har section (.dd-section-block) ek bordered block hai
   jisme section heading, divider, aur content hota hai

   Structure:
   .dd-section-block
     .dd-section-title     — Icon + H2 heading row
       .dd-section-icon    — Emoji icon on left
       h2                  — Section heading
     .dd-divider           — Decorative gradient line
     <content>             — Paragraphs, grids, etc.
   ================================================================ */

/* Each content section block */
.dd-section-block {
  margin-bottom: var(--dd-section-gap);
  scroll-margin-top: 100px;
  /* Anchor scroll ke liye header height account */
}

/* Section heading row — icon + h2 */
.dd-section-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

/* Emoji icon beside section heading */
.dd-section-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  /* Subtle filter to match warm color palette */
  filter: saturate(1.2) brightness(1.1);
}

/* Section H2 heading style */
.dd-section-title h2 {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-family: 'Fraunces', serif;
  color: var(--maroon-deep);
  margin: 0;
  line-height: 1.15;
}

/* Decorative gradient divider line below section title */
.dd-divider {
  width: 60px;
  height: 3px;
  background: var(--flame-grad);
  /* Ember to marigold gradient */
  border-radius: 3px;
  margin-bottom: 22px;
  /* Animate in on scroll (JS adds .in-view class) */
  transition: width 0.6s ease;
}

/* Intro paragraph — bold opener for About section */
.dd-intro {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ash);
  margin-bottom: 14px;
}


/* ================================================================
   SECTION: CHECKLIST GRID (What You Can Expect)
   2 columns on desktop, 1 column on mobile
   Each row has a green check icon + text

   Structure:
   .dd-checklist-grid
     .dd-check-item
       .dd-check-icon    — Green circle with checkmark SVG
       span              — The check item text
   ================================================================ */

/* 2-column grid for checklist items */
.dd-checklist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin-bottom: 28px;
}

/* Single checklist row */
.dd-check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.92rem;
  color: var(--ash);
  font-weight: 500;
  line-height: 1.5;
}

/* Green circular icon holding the checkmark SVG */
.dd-check-icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background: rgba(46, 125, 50, 0.12);
  /* Very light green fill */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* Checkmark SVG inside icon — green stroke */
.dd-check-icon svg {
  stroke: var(--dd-check-color);
  /* #2E7D32 green */
}


/* ================================================================
   SECTION: PHOTO STRIP (Horizontal image gallery)
   3 side-by-side photos below the checklist
   On mobile: horizontal scroll with snap

   Structure:
   .dd-photo-strip
     .dd-photo-item    — Single image container
       img             — Destination photo
   ================================================================ */

/* 3-column photo strip */
.dd-photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 6px;
}

/* Single photo wrapper — fixed aspect ratio */
.dd-photo-item {
  aspect-ratio: 4 / 3;
  /* 4:3 landscape ratio */
  border-radius: var(--radius-sm);
  /* 10px from main design system */
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-card);
}

/* Photo image — fills container, zooms on hover */
.dd-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

/* Zoom effect on hover */
.dd-photo-item:hover img {
  transform: scale(1.08);
}


/* ================================================================
   SECTION: SEASON CARDS (Best Time to Visit)
   3 cards: Winter (Best), Summer (Warm), Monsoon (Humid)
   Each has a color badge, emoji, heading, months, description, temp

   Structure:
   .dd-season-grid
     .dd-season-card.dd-season--best     — Winter card (green top border)
     .dd-season-card.dd-season--avg      — Summer card (orange top border)
     .dd-season-card.dd-season--ok       — Monsoon card (blue top border)
       .dd-season-badge                  — "Best" / "Warm" / "Humid" label
       .dd-season-icon-big               — Large emoji
       h4                                — Season name
       .dd-season-months                 — Month range
       p                                 — Description
       .dd-season-temp                   — Temperature range
   ================================================================ */

/* 3-column grid for season cards */
.dd-season-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 20px 0 24px;
}

/* Base season card style */
.dd-season-card {
  background: var(--white);
  border-radius: var(--dd-card-radius);
  padding: 22px 20px;
  position: relative;
  box-shadow: var(--shadow-card);
  border-top: 4px solid transparent;
  /* Color overridden per variant */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover lift effect for season cards */
.dd-season-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

/* WINTER — Best season (dark green border top) */
.dd-season--best {
  border-top-color: var(--dd-season-best);
  /* #1B5E20 dark green */
}

/* SUMMER — Average season (orange border top) */
.dd-season--avg {
  border-top-color: var(--dd-season-avg);
  /* #E65100 deep orange */
}

/* MONSOON — Ok season (blue border top) */
.dd-season--ok {
  border-top-color: var(--dd-season-ok);
  /* #1565C0 blue */
}

/* Season badge label — top right corner of card */
.dd-season-badge {
  position: absolute;
  top: 16px;
  right: 14px;
  background: var(--dd-season-best);
  /* Green by default */
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'Manrope', sans-serif;
}

/* Summer badge override — orange */
.dd-badge--avg {
  background: var(--dd-season-avg) !important;
}

/* Monsoon badge override — blue */
.dd-badge--ok {
  background: var(--dd-season-ok) !important;
}

/* Large emoji icon in each season card */
.dd-season-icon-big {
  font-size: 2rem;
  margin-bottom: 10px;
  display: block;
}

/* Season heading (Winter, Summer, Monsoon) */
.dd-season-card h4 {
  font-size: 1.1rem;
  font-family: 'Fraunces', serif;
  color: var(--maroon-deep);
  margin: 0 0 4px;
}

/* Month range text (Oct - Feb, etc.) */
.dd-season-months {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ash-soft);
  font-family: 'Manrope', sans-serif;
  display: block;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}

/* Season description paragraph */
.dd-season-card p {
  font-size: 0.88rem;
  color: var(--ash-soft);
  line-height: 1.55;
  margin: 0 0 12px;
}

/* Temperature range text — shown at bottom of card */
.dd-season-temp {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ember-dark);
  font-family: 'Manrope', sans-serif;
}

/* "See Ayodhya Packages" link below season grid */
.dd-more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ember-dark);
  font-weight: 700;
  font-size: 0.92rem;
  font-family: 'Manrope', sans-serif;
  text-decoration: none;
  border-bottom: 2px solid var(--marigold);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}

.dd-more-link:hover {
  color: var(--maroon);
  border-color: var(--ember);
}


/* ================================================================
   SECTION: ACCORDION (FAQ)
   Reuses existing .accordion / .accordion-item / .accordion-q
   / .accordion-a styles from main style.css and main.js logic.

   Only overrides are specific to this page's layout.
   ================================================================ */

/* Override accordion item margin on this page */
.dd-section-block .accordion-item {
  border-radius: var(--radius-sm);
}


/* ================================================================
   SECTION: PACKAGES RAIL SLIDER
   Uses existing .rail and .dest-card from main style.css
   Only adds the duration badge and view-all button
   ================================================================ */

/* Duration badge inside dest-card (new addition for this page) */
.dest-card__duration {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ember-dark);
  font-family: 'Manrope', sans-serif;
  margin-bottom: 3px;
}

/* View all packages CTA below the rail */
.dd-view-all {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

/* View all button styling — outline variant with arrow icon */
.dd-view-all .btn-outline svg {
  stroke: currentColor;
  transition: transform 0.25s;
}

.dd-view-all .btn-outline:hover svg {
  transform: translateX(4px);
  /* Arrow moves right on hover */
}


/* ================================================================
   SECTION: MOBILE BOTTOM BAR
   Yeh bar sirf mobile screens pe dikhta hai
   Page pe scroll karte waqt appear hota hai (JS controls this)
   Shows price on left and Enquire button on right

   Structure:
   .dd-mobile-bar               — Fixed bottom bar (hidden on desktop)
     .dd-mobile-bar__price      — Left side: "From Rs. 5,999 /person"
       .dd-mobile-bar__label    — "From" label text
       strong                   — Price amount
       small                    — "/person" text
     .btn.btn-primary           — Enquire Now button
   ================================================================ */

/* Fixed bottom bar — hidden by default, shown on mobile via media query */
.dd-mobile-bar {
  display: none;
  /* Default hide — shown only on mobile */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  /* Above everything including FAB */
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 12px 20px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 -8px 24px -8px rgba(44, 17, 9, 0.18);
  /* Slide up animation from bottom */
  animation: ddBarSlideUp 0.4s ease both;
}

@keyframes ddBarSlideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Left price section of mobile bar */
.dd-mobile-bar__price {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

/* "From" small label */
.dd-mobile-bar__label {
  font-size: 0.72rem;
  color: var(--ash-soft);
  font-weight: 600;
}

/* Bold price amount */
.dd-mobile-bar__price strong {
  font-family: 'Fraunces', serif;
  font-size: 1.3rem;
  color: var(--maroon-deep);
  font-weight: 700;
}

/* "/person" small text */
.dd-mobile-bar__price small {
  font-size: 0.72rem;
  color: var(--ash-soft);
}


/* ================================================================
   SECTION: WHATSAPP FAB (Floating Action Button)
   Already in main style.css — only adding here if not present
   ================================================================ */

/* WhatsApp sticky floating button — right bottom corner */
.whatsapp-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 190;
  width: 54px;
  height: 54px;
  background: #25D366;
  /* Official WhatsApp green */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-fab:hover {
  transform: scale(1.1) translateY(-3px);
  box-shadow: 0 16px 32px rgba(37, 211, 102, 0.5);
}


/* ================================================================
   SECTION: SCROLL-IN ANIMATION
   .in-view class JS (main.js IntersectionObserver) add karta hai
   Cards aur section blocks fade-in slide-up effect ke saath aate hain
   ================================================================ */

/* Initial state — hidden and shifted down */
.dd-season-card,
.dd-photo-item,
.dd-check-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* When .in-view is added by JS — element becomes visible */
.dd-season-card.in-view,
.dd-photo-item.in-view,
.dd-check-item.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delay for season cards — each card appears after previous */
.dd-season-card:nth-child(1) {
  transition-delay: 0.05s;
}

.dd-season-card:nth-child(2) {
  transition-delay: 0.15s;
}

.dd-season-card:nth-child(3) {
  transition-delay: 0.25s;
}

/* Staggered delay for photo strip items */
.dd-photo-item:nth-child(1) {
  transition-delay: 0.05s;
}

.dd-photo-item:nth-child(2) {
  transition-delay: 0.15s;
}

.dd-photo-item:nth-child(3) {
  transition-delay: 0.22s;
}


/* ================================================================
   SECTION: RESPONSIVE STYLES
   Mobile-first breakpoints

   992px — iPad landscape / small laptop: hide sidebar, adjust hero
   768px — Tablet portrait: single column layouts
   576px — Mobile: full stack, mobile bar visible
   ================================================================ */

/* ---- 992px and below (Tablet / iPad Landscape) ---- */
@media (max-width: 992px) {

  /* Hide right sidebar — booking card goes to mobile bar */
  .dd-sidebar {
    display: none;
  }

  /* Hero booking card ke andar ka card — tablet pe right side mein rehne wala */
  .dd-hero-booking-card {
    display: none;
    /* Hero card bhi hide, mobile bar handle karega */
  }

  /* Full width content column jab sidebar nahi hai */
  .dd-layout {
    grid-template-columns: 1fr;
    /* Single column layout */
  }

  /* Hero content pe flex adjust karo */
  .dd-hero__content {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Season grid — 3 column se 2 column ho jata hai tablet pe */
  .dd-season-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* ---- 768px and below (Tablet Portrait) ---- */
@media (max-width: 768px) {

  /* Hero height thoda kam karo */
  .dd-hero {
    min-height: 480px;
  }

  /* Hero title font size small screen ke liye */
  .dd-hero__title {
    font-size: clamp(1.9rem, 6vw, 2.8rem);
  }

  /* Checklist 2 column se 1 column ho jata hai */
  .dd-checklist-grid {
    grid-template-columns: 1fr;
  }

  /* Photo strip horizontal scroll on small screens */
  .dd-photo-strip {
    grid-template-columns: repeat(3, 200px);
    /* Fixed width cards */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 8px;
  }

  .dd-photo-strip::-webkit-scrollbar {
    display: none;
  }

  /* Each photo snaps into view */
  .dd-photo-item {
    scroll-snap-align: start;
  }

  /* Season grid — 1 column on mobile */
  .dd-season-grid {
    grid-template-columns: 1fr;
  }

  /* Section spacing reduce on mobile */
  .dd-section-block {
    margin-bottom: 40px;
  }

  /* Hero padding reduce on small screens */
  .dd-hero__content {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* Hide hero booking card on mobile */
  .dd-hero-booking-card {
    display: none;
  }

  /* Show mobile bottom bar on mobile — flex layout */
  .dd-mobile-bar {
    display: flex;
  }

  /* Adjust WhatsApp FAB position to not overlap mobile bar */
  .whatsapp-fab {
    bottom: 80px;
    /* Above the mobile bar height */
  }

  /* Give space for mobile bar at bottom of page
  body {
    padding-bottom: 80px;
  } */

}

/* ---- 576px and below (Small Mobile) ---- */
@media (max-width: 576px) {

  /* Hero badges wrap neatly on very small screens */
  .dd-hero__badges {
    gap: 7px;
  }

  /* Smaller badge pills on mobile */
  .dd-badge {
    font-size: 0.72rem;
    padding: 5px 10px;
  }

  /* Hero subtitle shorter on very small screens */
  .dd-hero__sub {
    font-size: 0.94rem;
  }

  /* View all button full width on mobile */
  .dd-view-all .btn-outline {
    width: 100%;
    justify-content: center;
  }

}



.dd-checklist li {
  display: flex;
  gap: 10px;
}