/* page background for entire site */
  html, body {
    background: #f1f1f1 !important; /* ← change this hex to your color */
    min-height: 100vh;
  }
  /* Splash overlay styles (self-contained) */
  #splash-overlay {
    position: fixed;
    inset: 0;
    background: #483d8b; /* requested plain background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999; /* above everything */
    flex-direction: column;
    pointer-events: all;
    transition: opacity .5s ease, visibility .5s ease;
    opacity: 1;
    visibility: visible;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  #splash-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 18px;
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
  }

/* SPLASH LOGO — smaller on desktop, comfortable on mobile */
#splash-logo {
  width: clamp(120px, 14vw, 220px); /* desktop baseline: smaller than before */
  height: auto;
  display: block;
  margin-bottom: 20px;               /* gap between logo and progress bar */
  filter: drop-shadow(0 10px 28px rgba(0,0,0,0.14));
}

/* Mobile tweak: keep logo readable on small screens */
@media (max-width: 767px) {
  #splash-logo {
    width: clamp(160px, 40vw, 260px); /* slightly larger on mobile for legibility */
    margin-bottom: 18px;
  }
}


  /* Progress bar container */
  .splash-progress-wrap {
    width: 70%;
    max-width: 360px;
    min-width: 160px;
    height: 8px;
    background: rgba(255,255,255,0.12);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  }

  /* Animated progress filler */
  .splash-progress {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffffff); /* subtle light progress */
    transform-origin: left center;
    animation: splashProgress 2s linear forwards;
  }

  @keyframes splashProgress {
    0%   { width: 0%; }
    100% { width: 100%; }
  }

  /* Fade-out state */
  #splash-overlay.splash-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* Accessibility: reduce motion respects */
  @media (prefers-reduced-motion: reduce) {
    .splash-progress { animation: none; width: 100%; }
    /* logo remains static */
  }

  /* Keep page scroll disabled while splash is visible */
  body.splash-lock { overflow: hidden !important; touch-action: none; }
/* =========================
   TWO UNIQUE MODERN TAB STYLES
   Variables for quick tuning:
     --card-right-width    = desktop image width
     --card-right-width-sm = mobile image width
     --card-right-width-xs = tiny phones
   Colors: main brand #483d8b
   ========================= */
:root{
  --brand: #483d8b;
  --accent: #6c63ff;
  --muted: #f3f2fb;
  --card-right-width: 120px;
  --card-right-width-sm: 120px;  /* adjusted smaller so headline fits on mobile */
  --card-right-width-xs: 40px;
  --shadow-strong: 0 26px 56px rgba(72,61,139,0.12);
  --shadow-soft: 0 8px 20px rgba(72,61,139,0.06);
}
:root{
  --brand: #483d8b;
  --accent: #6c63ff;
  --muted: #f3f2fb;
  --card-right-width: 120px;
  --card-right-width-sm: 120px;  /* adjusted smaller so headline fits on mobile */
  --card-right-width-xs: 40px;
  --shadow-strong: 0 26px 56px rgba(72,61,139,0.12);
  --shadow-soft: 0 8px 20px rgba(72,61,139,0.06);
}

/* -------------------------
   NEW: Animated heading above the two tabs
   - fits one line on all viewports using clamp()
   - nowrap ensures single-line render
   - subtle shimmer + pop animation
   ------------------------- */
.services-heading-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 35px 18px 15px 18px;
}

/* h1 style: one line only, responsive size, bold */
.services-heading {
  margin: 0;
  padding: 0;
  font-weight: 700;
  /* responsive font-size that scales between mobile and desktop */
  font-size: clamp(20px, 5.2vw, 34px);
  line-height: 1;
  color: var(--brand);
  white-space: nowrap;        /* force single line */
  overflow: hidden;
  text-overflow: ellipsis;   /* fallback if extremely small screens */
  letter-spacing: 0.6px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  /* shimmer gradient */
  background: linear-gradient(#000);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  /* entry pop */
  transform-origin: center;
  animation: services-pop 700ms cubic-bezier(.2,.9,.2,1) 1, shimmer-heading 2.4s linear infinite;
}

/* small subtle scale up then settle */
@keyframes services-pop {
  0% { transform: scale(0.96); opacity: 0; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* shimmer slide of gradient left->right */
@keyframes shimmer-heading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* new subheading above carousel */
.services-subheading {
  text-align: center;
  color: #6e6e6e; /* grey color requested */
  font-size: clamp(19px, 2.1vw, 16px);
  margin: 50px 0 12px 0;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* shared box-sizing */
.service-tabs *, .service-tabs *::before, .service-tabs *::after { box-sizing: border-box; font-size:13px; }

 /* wrapper spacing */
.service-tabs {
  max-width: 1200px;
  margin: 0px auto 36px;
  padding: 0 18px;
}

/* desktop layout: two columns */
.service-tabs .tabs-row{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: stretch;
}

/* Ensure 1-Day (quick-card) appears first and Daily (cleaning-card) second
   across desktop & mobile without changing HTML order */
.quick-card { order: 1; }
.cleaning-card { order: 2; }

/* base tab card */
.tab-card{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  min-height: 120px;
  position: relative;
  overflow: visible;
  transition: transform .22s ease, box-shadow .22s ease;
  cursor: pointer; /* clickable whole card */
}

/* subtle ring */
.tab-card::after{
  content: "";
  position: absolute;
  left: -10px;
  top: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}

/* shared left column */
.tab-card .card-left{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-width:0;
  padding-right:6px;
}

/* headline */
.tab-card h3{
  margin:0;
  font-size: 35px;            /* desktop baseline */
  font-weight:900;
  color: #201536;
  line-height:1.05;
  white-space: normal;        /* desktop: allow wrap if needed */
  overflow: visible;
  text-overflow: unset;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin-bottom: 4px;
}

/* action area (bottom-left) */
.tab-card .action{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-top:8px;
}

/* book button: new modern boxed style */
.tab-card .book-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:12px;
  font-weight:800;
  font-size:20px;
  text-decoration:none;
  color:#fff;
  border:none;
  cursor:pointer;
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s;
}

/* right image holder */
.card-right{
  display:flex;
  align-items:center;
  justify-content:center;
  width: var(--card-right-width);
  aspect-ratio: 3 / 4;
  pointer-events: none;
  position: relative;
  background: transparent; /* ensure no white box behind by default */
}

/* actual image behavior */
.card-right img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter: none;
  background: transparent;
  z-index:1;
  box-shadow: 0 8px 22px rgba(72,61,139,0.06);
}
/* ---------- Fix: prevent heading truncation + stop image overlap on mobile ---------- */
/* Place this immediately after your .tab-card / .card-right rules */

.tab-card { 
  /* ensure the whole card uses a safe min-height and allows content to wrap */
  min-height: 120px; /* keep your existing value or raise slightly if needed */
  align-items: center; /* stable vertical alignment across breakpoints */
}

/* Make left column flexible and allowed to shrink so text never overflows */
.tab-card .card-left {
  min-width: 0;           /* REQUIRED for flex children to ellipsize correctly */
  flex: 1 1 auto;         /* allow left to grow and shrink while image keeps fixed width */
  padding-right: 12px;    /* breathing room between text and image */
}

/* Headline: allow wrapping on narrow screens and prevent clipping */
.tab-card h3 {
  margin-bottom: 70px;
  line-height: 1.05;          /* tight but readable */
  word-break: break-word;     /* wrap long words if necessary */
  white-space: normal !important;  /* override any forced nowrap */
  overflow: visible;
  font-size: clamp(18px, 4.4vw, 28px); /* responsive sizing */
}

/* Right image: reduce width on mobile so it doesn't push text out */
.card-right {
  width: var(--card-right-width, 140px); /* default, overridable by your variables */
  flex: 0 0 auto;                         /* keep right column fixed width */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-sizing: border-box;
}

/* Force images inside tabs to fill the right area without growing the area */
.card-right img {
  width: 100%;
  height: auto;
  max-height: 120px;    /* prevents very tall images from stretching the card */
  object-fit: contain;
  display: block;
}

/* Mobile-specific adjustments: smaller image, allow left text to take priority */
@media (max-width: 767px) {
  .tab-card {
    grid-template-columns: 1fr auto; /* left (text) and right (image) */
    gap: 10px;
    padding: 12px;
    min-height: 110px;
  }

  /* Reduce image width on mobile to free space for text */
  .card-right {
    width: min(92px, 26vw);   /* small but readable; tweak value if you want larger */
  }

  .card-right img {
    max-height: 96px;        /* keep images compact on phones */
  }

  /* Make the book button stack visually and keep text readable */
  .tab-card .book-btn {
    padding: 8px 12px;
    font-size: 16px;
  }

  /* Heading: don't force single-line on mobile */
  .tab-card h3 {
    white-space: normal !important;
    font-size: clamp(16px, 4.6vw, 20px);
  }
}

/* Extra safety to ensure Monthly Cleaning picture doesn't overflow */
.cleaning-card .card-right img,
.quick-card .card-right img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ========== Style: Daily Cleaning (left card) ========== */
.cleaning-card{
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(72,61,139,0.06);
  box-shadow: var(--shadow-soft);
  overflow: visible;
}
.cleaning-card::after{
  box-shadow: 0 18px 44px rgba(108,99,255,0.06);
  opacity:1;
  background: radial-gradient(600px 120px at 10% 20%, rgba(108,99,255,0.06), transparent 30%);
}
.cleaning-card h3{
  color: #483d8b;
}
.cleaning-card .book-btn{
  background: linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow: 0 12px 30px rgba(72,61,139,0.12);
  color: #fff;
}

/* special mask on the image: rounded figure; keep subtle shadow on desktop */
.cleaning-card .card-right img{
    width: 100% !important;
height: 100% !important;
object-fit: contain !important;

    width: 180px;     /* change this value */
  height: auto;     /* keep aspect ratio */
  border-radius: 8px;
}
/* ========== CONSISTENT TAB IMAGES: Desktop / Tablet / Mobile ========== */
:root {
  --card-right-width-desktop: 220px;
  --card-right-width-tablet: 160px;
  --card-right-width-mobile: 110px;
}

.card-right{
  width: var(--card-right-width-desktop);
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 6px;
  box-sizing: border-box;
}

.card-right img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 10px 28px rgba(72,61,139,0.06);
}

.cleaning-card .card-right img,
.quick-card .card-right img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

@media (max-width: 991px) {
  .card-right { width: var(--card-right-width-tablet); }
}

@media (max-width: 767px) {
  .card-right {
    width: min(var(--card-right-width-mobile), 30vw);
    aspect-ratio: 1 / 1;
    padding: 6px;
  }

  @media (max-width: 380px) {
    .card-right { width: min(46px, 28vw); }
  }

  .tab-card {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 12px;
  }

  .tab-card h3 {
    font-size: clamp(16px, 4.4vw, 18px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

/* ========== Style: 1-Day Cleaning (right card) ========== */
.quick-card{
  background:#fff;
  border-radius: 20px;
  border: 1px solid rgba(72,61,139,0.09);
  box-shadow: 0 14px 36px rgba(72,61,139,0.06);
  overflow: visible;
}

/* ===== ADDED: Smooth looping gradient animation for 1-Day Cleaning tab =====
   - transitions between brand purple (#483d8b) and black
   - background-size increased so it animates smoothly across the card
   - text color changed to white within quick-card so it remains legible
   - animation respects prefers-reduced-motion by disabling it when user requests reduced motion
*/
.quick-card {
  background: linear-gradient(90deg, #483d8b 0%, #000000 100%);
  background-size: 200% 200%;
  animation: quickCardGlow 4s ease-in-out infinite;
  border: 1px solid rgba(0,0,0,0.08);
  color: #ffffff; /* ensures fallback text is white while gradient animates */
}

/* ensure headings / paragraphs inside .quick-card are readable */
.quick-card ,
.quick-card p,
.quick-card .book-btn {
  color: #ffffff !important;
}

/* subtle highlight ring to match the animation */
.quick-card::after{
  box-shadow: 0 14px 40px rgba(72,61,139,0.05);
  opacity:1;
  background: radial-gradient(500px 120px at 95% 80%, rgba(72,61,139,0.06), transparent 30%);
}

/* animation keyframes */
@keyframes quickCardGlow {
  0%   { background-position: 0% 50%; filter: none; }
  25%  { background-position: 50% 50%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 50% 50%; }
  100% { background-position: 0% 50%; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .quick-card { animation: none; background: linear-gradient(90deg, #483d8b 0%, #000000 100%); }
}

/* image style for quick-card: slightly larger icon vibe */
.quick-card .card-right img{
  border-radius: 8px;
  background: transparent;
  box-shadow: 0 10px 28px rgba(72,61,139,0.06);
}

/* hover lift */
.tab-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-strong); }

 /* ========== Responsive: stack for mobile (stacked but landscape tabs) ========== */
@media (max-width: 767px) {
  .service-tabs .tabs-row{ grid-template-columns: 1fr; gap: 15px; }

  .tab-card{
    grid-template-columns: 1fr auto; /* left text, right image */
    align-items: center;
    padding: 12px;
    gap: 10px;
    min-height: 110px;
  }

  /* === MODIFIED: Mobile-only headline rules ===
     - Force single-line rendering for h3 on mobile so "Quick Home Cleaning" and "Daily Cleaning"
       appear on a single line where possible.
     - Use ellipsis when space is insufficient.
     - Keep font-size tuned for mobile, scoped to this media query only so desktop sizes remain unchanged.
     - Ensure left column can shrink (min-width:0 already set above on .card-left).
  */
  .tab-card h3{
    font-size: clamp(18px, 5vw, 22px);
    white-space: normal !important;   /* allow wrapping */
    line-height: 1.20;
    overflow: visible;
    text-overflow: unset;
    margin-bottom: 4px;
  }

  .card-right{
    width: var(--card-right-width-sm);
    aspect-ratio: 1 / 1;
    background: transparent; /* remove any white fill behind image on mobile */
  }

  /* remove image box-shadow on mobile so it blends into tab */
  .tab-card .card-right img{
    box-shadow: none;
    background: transparent;
  }

  .tab-card .book-btn{
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 17px;
  }

  /* ensure action (book) sits bottom-left visually */
  .tab-card .card-left{ justify-content: space-between; height: 100%; }
}

/* very small phones */
@media (max-width: 380px) {
  .card-right{ width: var(--card-right-width-xs); aspect-ratio: 1/1; }
  .tab-card h3{ font-size: 1.3rem; }
  .tab-card .book-btn{ padding: 7px 10px; font-size: 12px; }
}

/* accessibility focus */
.tab-card .book-btn:focus{ outline: 3px solid rgba(127,115,255,0.18); outline-offset: 2px; }
/* Make the tab card a positioning container */
.tab-card.quick-card {
  position: relative;
}

/* NEW: "New" badge — inside top-right corner of the tab */
.new-badge {
  position: absolute;
  top: 6px;                      /* sits slightly inside from top */
  right: 6px;                    /* sits slightly inside from right */
  left: auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 5px 9px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--brand, #483d8b);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.4px;

  box-shadow: 0 8px 18px rgba(72,61,139,0.12);
  border: 1px solid rgba(72,61,139,0.05);

  z-index: 60;
  pointer-events: none;
  transform: translateZ(0);
}

/* Pulse animation */
@keyframes newBadgePulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .new-badge {
    animation: newBadgePulse 2200ms ease-in-out infinite;
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .new-badge {
    top: 5px;                  /* slightly lower to avoid cutting image */
    right: 5px;
    padding: 4px 7px;
    font-size: 11px;
  }
}

/* =========================
   Monthly Cleaning modal — namespaced fixes
   Targets only the modal with id="daily-modal-backdrop"
   Place this block at the END of your homepage CSS or in a <style> before </body>
   ========================= */

/* Backdrop & modal container (namespaced) */
#daily-modal-backdrop.ds-modal-backdrop {
  z-index: 1500000; /* ensure on top */
  background: rgba(10,12,16,0.48);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

/* Modal card (constrained, responsive and scroll-safe) */
#daily-modal-backdrop .ds-modal {
    max-height: calc(92vh - 140px) !important;
  width: min(760px, 96vw) !important;
  max-height: 90vh !important;
  padding: 16px !important;
  gap: 8px;
}

/* Make modal content scrollable within visible area */
#daily-modal-backdrop .ds-tab-panels {
  max-height: calc(92vh - 140px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-right: 8px;
  box-sizing: border-box;
  margin-top: 6px !important;
}

/* Tab list (pills) inside modal — avoid overlap and negative margins */
#daily-modal-backdrop .ds-tabs {
  margin-bottom: 8px !important;
  gap: 10px;
  padding: 6px 4px !important;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
}

/* Individual tab style (modal-scoped) */
#daily-modal-backdrop .ds-tab {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  height: 46px;
  padding: 8px 12px;
  box-sizing: border-box;
}

/* Panel inner layout: left content + right visual — responsive clamp */
#daily-modal-backdrop .ds-panel-inner {
  display: grid !important;
  grid-template-columns: 1fr min(360px, 36%) !important;
  gap: 18px;
  align-items: start;
  box-sizing: border-box;
}

/* Right carousel/wrap must never overflow modal width */
#daily-modal-backdrop .ds-carousel-wrap,
#daily-modal-backdrop .ds-carousel-wrap,
#daily-modal-backdrop .ds-carousel {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Carousel slide images responsive and capped height */
#daily-modal-backdrop .ds-carousel .ds-slide img {
  width: 100% !important;
  height: auto !important;
  max-height: 420px !important;
  object-fit: contain !important;
  display: block !important;
  box-sizing: border-box;
}

/* Make the modal close icon reliably above everything */
#daily-modal-backdrop .ds-modal-close {
  z-index: 10050 !important;
}

/* When modal is active, reduce large margins from external rules that might push content */
#daily-modal-backdrop .tab-card .book-btn,
#daily-modal-backdrop .book-btn {
  margin-top: 12px !important; /* keep button visually balanced inside modal */
}

/* Prevent any .card-right inside modal from forcing height/overflow */
#daily-modal-backdrop .card-right {
  width: min(360px, 36%) !important;
  max-width: 36% !important;
  aspect-ratio: 1 / 1;
  box-sizing: border-box !important;
  padding: 6px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Ensure images inside card-right scale to available area (modal-scoped) */
#daily-modal-backdrop .card-right img {
  width: 100% !important;
  height: auto !important;
  max-height: 420px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Responsive tweaks for small devices (modal remains usable) */
@media (max-width: 767px) {
  #daily-modal-backdrop .ds-modal {
    padding: 14px !important;
    width: 96vw !important;
    max-height: 94vh !important;
  }

  #daily-modal-backdrop .ds-panel-inner {
    display: block !important;
  }

  #daily-modal-backdrop .ds-tabs {
    gap: 8px;
    padding: 6px 4px !important;
    margin-bottom: 8px !important;
  }

  /* Make tab cards compact (prevents pushing modal height) */
  #daily-modal-backdrop .service-tabs .tab-card,
  #daily-modal-backdrop .tab-card {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    padding: 10px 10px !important;
    margin: 0 auto !important;
    box-sizing: border-box;
  }

  /* Reduce image width so left text has priority */
  #daily-modal-backdrop .card-right { width: min(84px, 24vw) !important; aspect-ratio: 1/1; }
  #daily-modal-backdrop .card-right img { max-height: 120px !important; }

  /* modal panel height allowance */
  #daily-modal-backdrop .ds-tab-panels { max-height: calc(92vh - 110px) !important; }
}

/* Accessibility: focus outlines inside modal */
#daily-modal-backdrop .ds-tab:focus,
#daily-modal-backdrop .ds-carousel .ds-slide:focus {
  outline: 3px solid rgba(108,99,255,0.12) !important;
  outline-offset: 4px !important;
}

/* Defensive safety: ensure any earlier global negative margins do not hide panels */
#daily-modal-backdrop .ds-tabs + .ds-tab-panels,
#daily-modal-backdrop .ds-tab-panels {
  margin-top: 6px !important;
}

/* Keep modal scrollbars visually inside modal (non-invasive) */
#daily-modal-backdrop .ds-tab-panels::-webkit-scrollbar { width: 10px; }
#daily-modal-backdrop .ds-tab-panels::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 6px; }

/* =========================
   END TABS — Keep rest of original CSS unchanged
   (Below is your previous site CSS preserved)
   ========================= */

/* Container and row adjustments */
.package-section .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem; /* gap between cards horizontally and vertically */
}

/* Card general */
.card-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  height: 100%;
  border-radius: 18px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  box-sizing: border-box;
  min-height: 280px; /* ensure consistent height */
}

/* Basic Package - Clean and Classic */
.pkg-basic {
  background: #fff;
  border: 2px solid #483d8b;
  box-shadow: 0 6px 15px rgba(72, 61, 139, 0.15);
  color: #483d8b;
  margin-top: 1.5rem; /* gap above Basic Package */
  margin-bottom: 0rem; /* gap below Basic Package */
}
.pkg-basic:hover {
  box-shadow: 0 12px 25px rgba(72, 61, 139, 0.3);
  transform: translateY(-6px);
}
.pkg-basic p.baby {
  font-weight: 700;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}
.pkg-basic p.package-details {
  font-size: 1rem;
  color: #2c2a6c;
  margin-bottom: 0.5rem;
}
.btn-basic {
  background-color: #483d8b;
  color: #fff;
  border-radius: 50px;
  padding: 10px 25px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.btn-basic:hover {
  background-color: #6c63ff;
}

/* Customized Package - Elegant Purple Gradient */
.pkg-custom {
  background: linear-gradient(135deg, #6c63ff, #a99bff);
  color: white;
  box-shadow: 0 8px 30px rgba(108, 99, 255, 0.3);
  border-radius: 18px; /* match others */
  margin-bottom: 2rem; /* gap between packages */
}
.pkg-custom:hover {
  box-shadow: 0 16px 50px rgba(108, 99, 255, 0.6);
  transform: translateY(-8px);
}
.pkg-custom p.baby {
  font-weight: 700;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}
.pkg-custom p.package-details {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 0.5rem;
}
.btn-custom {
  background-color: #fff;
  color: #483d8b;
  border-radius: 50px;
  padding: 10px 25px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-custom:hover {
  background-color: #d9d7ff;
  color: #483d8b;
}

/* Premium Package - Dark & Luxurious */
.pkg-premium {
  background: linear-gradient(135deg, #483d8b, #000000);
  color: #f4f3fc;
  box-shadow: 0 10px 40px rgba(72, 61, 139, 0.7);
  border-radius: 18px; /* match others */
  position: relative;
  overflow: hidden;
  border: 2px solid #a99bff;
  margin: 0 0 1rem 0; /* gap between packages */
}
.pkg-premium:hover {
  box-shadow: 0 20px 60px rgba(72, 61, 139, 0.9);
  transform: translateY(-10px);
}
.pkg-premium p.baby1 {
  font-weight: 800;
  margin-bottom: 1rem;
  font-size: 1.4rem;
  letter-spacing: 1.2px;
}
.pkg-premium p.package-details1 {
  font-size: 1.05rem;
  line-height: 1.5;
  opacity: 0.95;
  margin-bottom: 0.5rem;
}
.btn-premium {
  background-color: #fff;
  color: #483d8b;
  border-radius: 50px;
  padding: 12px 30px;
  font-weight: 700;
  border: none;
  box-shadow: 0 0 15px #6c63ff;
  cursor: pointer;
  transition: box-shadow 0.4s ease, background-color 0.4s ease;
}
.btn-premium:hover {
  background-color: #483d8b;
  box-shadow: 0 0 25px #483d8b;
}
.package-section .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem; /* gap between cards horizontally and vertically */
  margin: 0; /* remove default negative margins */
}

/* Remove padding/margin from column divs to prevent misalignment */
.col-lg-5, .col-md-6, .col-sm-12 {
  display: flex;
  flex-direction: column;
  padding: 0; /* remove padding */
  margin: 0; /* remove margin */
  flex-grow: 1;
}

/* Card-box fills entire column height */
.card-box {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 18px;
  padding: 20px;
  min-height: 280px; /* keep consistent height */
  box-sizing: border-box;
}

/* Responsive widths */
@media (max-width: 767px) {
  .col-lg-5, .col-md-6, .col-sm-12 {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .col-lg-5, .col-md-6 {
    flex: 1 1 calc(50% - 1.5rem);
    max-width: calc(50% - 1.5rem);
  }
}

@media (min-width: 992px) {
  .col-lg-5 {
    flex: 1 1 calc(33.33% - 1rem);
    max-width: calc(33.33% - 1rem);
  }
}

/* Margin for vertical spacing only on mobile */
.pkg-basic {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.pkg-custom,
.pkg-premium {
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  /* Remove vertical margin on desktop, gap handled by flex gap */
  .pkg-basic,
  .pkg-custom,
  .pkg-premium {
    margin: 0;
  }
}

/* Make all card-box have equal height */
.col-lg-5, .col-md-6, .col-sm-12 {
  display: flex;
  flex-direction: column;
}

.card-box {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .services-pill { padding: 18px; margin: 12px 12px 28px; border-radius: 18px; }
}

/* headline inside pill: white, bold, centered */
.services-pill .services-subheading {
  color: #ffffff;
  font-size: clamp(18px, 2.6vw, 20px);
  margin: 0 0 18px 0;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.2px;
}

/* position carousel inside pill and give it breathing room */
.services-pill .services-carousel {
  padding: 20px 6px 6px 6px;
  background: transparent;
  border-radius: 14px;
}

/* captions inside pill should be white for contrast */
.services-pill .service-caption {
  color: #ffffff;
  margin-top: 18px;
  font-weight: 800;
}

/* slightly adjust slide images shadow to pop against dark pill */
.services-pill .service-slide img {
  box-shadow: 0 12px 36px rgba(0,0,0,0.28);
}

/* Override desktop caption color to remain white */
@media (min-width: 768px) {
  .services-pill .service-caption { font-size: 18px; }
}
    .three-steps-headline { margin-bottom: 12px; } /* consistent spacing */

    @media (max-width: 767px) {
      .three-steps-grid { grid-template-columns: 1fr; gap: 18px; justify-items:center; }
      .three-steps-headline h1 { font-size: clamp(26px, 9vw, 44px); }
      .three-steps-headline p { font-size: clamp(16px, 3.6vw, 18px); }
      /* When the grid becomes an Owl carousel, ensure the items look good */
      .three-steps-grid.owl-carousel .step-item { max-width: 86vw; margin: 0 auto; }
      .three-steps-grid.owl-carousel .step-item img { border-radius: 12px; display:block; width:100%; height:auto; }
    }

    /* Ensure when Owl is active we don't keep grid display */
    .three-steps-grid.owl-carousel { display: block !important; }
    /* ------------------------------------------------------------------
   Card color tweaks per your request:
   - 1-Day Cleaning (quick-card): headline & subline white; Book Now = white bg + #483d8b text
   - Monthly Cleaning (cleaning-card): headline & subline = #483d8b; Book Now = #483d8b bg + white text
   Place this at the end of your CSS to ensure it overrides earlier rules.
   ------------------------------------------------------------------ */

.quick-card h3,
.quick-card p {
  color: #ffffff !important;        /* headline + subline white for 1-Day Cleaning */
}

/* Book button in 1-Day: white bg, brand text */
.quick-card .book-btn,
.quick-card a.book-btn {
  background: #ffffff !important;
  color: var(--brand) !important;   /* #483d8b from :root */
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Monthly card headline/subline */
.cleaning-card h3,
.cleaning-card p {
  color: var(--brand) !important;   /* #483d8b for Monthly Cleaning headline/subline */
}

/* Monthly Book Now: brand bg, white text */
.cleaning-card .book-btn,
.cleaning-card a.book-btn {
  background: var(--brand) !important; /* #483d8b */
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 12px 30px rgba(72,61,139,0.12) !important; /* keep subtle depth */
}

/* Defensive: some global rules set .tab-card .book-btn { background:#fff; } on desktop.
   Make sure cleaning-card keeps its brand background on desktop too. */
@media (min-width: 992px) {
  .cleaning-card .book-btn { background: var(--brand) !important; color: #fff !important; }
  .quick-card .book-btn    { background: #fff !important; color: var(--brand) !important; }
}
  /* =========================
     MODIFIED: services-carousel square images
     - all images are forced to a square size using CSS variable --service-size
     - non-center slides are NOT scaled (kept same size)
     - desktop: show 3 squares; mobile: show 1 square
     ========================= */

  /* default --service-size (desktop) */
  :root {
    --service-size: 250px; /* <-- CHANGED: desktop square size increased to 420px */
  }

  .services-carousel .service-slide {
    display: flex;
    flex-direction: column;         /* stack image + caption */
    align-items: center;
    justify-content: center;
    padding: 6px;
    box-sizing: border-box;
    user-select: none;
    pointer-events: none !important; /* === ADDED: disable clicks on slides === */
  }

  /* Square, equal-sized images */
  .services-carousel .service-slide img {
    width: var(--service-size);
    height: var(--service-size);
    object-fit: cover;              /* crop to fill square cleanly */
    border-radius: 12px;
    transition: transform 300ms ease, box-shadow 300ms ease;
    will-change: transform;
    display:block;
    margin: 0 auto;
    box-shadow: 0 10px 28px rgba(72,61,139,0.08);
  }

  /* caption styling (bold names under each image) */
  .services-carousel .service-caption {
    margin-top: 12px;
    font-weight: 700;
    color: #483d8b;
    text-align: center;
    font-size: 18px;
    letter-spacing: 0.2px;
    max-width: 100%;
    white-space: normal;
  }

  /* Remove scale differences — keep all slides visually consistent */
  .services-carousel .owl-item img {
    transform: none !important;
    opacity: 1 !important;
  }

  /* When center slide is present, optionally lift slightly (subtle) */
  .services-carousel .owl-item.active.center img,
  .services-carousel .owl-item.center img {
    transform: translateY(-6px);
    box-shadow: 0 22px 56px rgba(72,61,139,0.12);
  }

  /* responsive adjustments: mobile uses smaller --service-size and one item visible */
  @media (max-width: 767px) {
    :root { --service-size: min(86vw, 300px); } /* mobile square fits viewport */
    .services-carousel .service-caption {
      font-size: 20px;
      margin-top: 14px;
    }
    .services-carousel .owl-stage-outer {
      padding-left: 6px;
      padding-right: 6px;
    }
  }

  /* tablet intermediate */
  @media (min-width: 768px) and (max-width: 991px) {
    :root { --service-size: 280px; }
    .services-carousel .service-caption { font-size: 16px; }
  }

  /* accessibility focus outline for slides if needed */
  .services-carousel .service-slide:focus {
    outline: 3px solid rgba(108,99,255,0.12);
    outline-offset: 6px;
  }

  /* MOBILE GRID — REVISED (replace your current .mobile-img-wrap and related rules) */
/* The default state is visible; .hidden class controls the entrance animation. */
.mobile-services-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  gap: 15px;
  justify-items: stretch;
  align-items: start;
  padding: 0;
  box-sizing: border-box;
}

/* cell wrapper */
.mobile-services-grid .mobile-grid-cell {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  background: transparent;
}

/* image container is a square. Default: visible, no forced transform/opacity.
   Use .hidden to hide and animate in. This avoids leaving the grid permanently invisible
   if JS initializes late. */
.mobile-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  display: block;
  position: relative;
  box-shadow: 0 10px 26px rgba(18,22,45,0.06);
  will-change: transform, opacity;
  transition: opacity 420ms ease, transform 420ms cubic-bezier(.2,.9,.2,1);
  opacity: 1;
  transform: translateY(0);
}

/* Hidden state used by JS to hide before image loads */
.mobile-img-wrap.hidden {
  opacity: 0;
  transform: translateY(8px);
}

/* revealed state (kept for clarity) */
.mobile-img-wrap.show {
  opacity: 1;
  transform: translateY(0);
}

/* image fill */
.mobile-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
  background: transparent;
}

/* caption removed on mobile */
.mobile-caption { display: none !important; }

/* Hide the mobile grid by default via CSS but allow JS to enable it when ready.
   NOTE: this remains compatible with your earlier logic; when JS enables mobile grid it will
   set display:grid inline. Keeping the CSS minimal avoids !important conflicts. */
.mobile-services-grid { display: none; opacity: 0; pointer-events: none; }

@media (max-width: 767px) {
  .services-carousel { display: none !important; }
  .mobile-services-grid { display: grid !important; opacity: 1; pointer-events: auto; padding: 8px; }
  .services-pill { padding: 8px 6px 16px 6px; }
}
  /* Radar tab background */
  .radar-tab {
    background: linear-gradient(180deg, #483d8b 6%, #000000 100%);
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.32);
    margin-top: 18px;
  }

  /* Radar viewport — center and responsive sizing */
  .radar-viewport {
    width: clamp(260px, 55vw, 620px); /* big on desktop, fits on mobile */
    height: clamp(260px, 55vw, 620px);
    max-width: 100%;
    max-height: 100%;
    border-radius: 9999px;
    position: relative;
    display: block;
    overflow: visible;
    box-sizing: border-box;
    padding: 0; /* reduced padding to keep rings centered */
    background: transparent;
    margin: 0 auto; /* center the viewport reliably */
  }

  /* concentric rings - tuned percentages for precise alignment with SVG circle (r=98) */
  .radar-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-sizing: border-box;
    pointer-events: none;
  }
  /* adjust widths so rings sit perfectly inside svg circle */
  .radar-ring.ring-4 { width: 92%; height: 92%; border: 2px solid rgba(255,255,255,0.9); box-shadow: none; }
  .radar-ring.ring-3 { width: 74%; height: 74%; border: 2px solid rgba(255,255,255,0.82); }
  .radar-ring.ring-2 { width: 56%; height: 56%; border: 2px solid rgba(255,255,255,0.72); }
  .radar-ring.ring-1 { width: 38%; height: 38%; border: 2px solid rgba(255,255,255,0.95); }

  /* ensure sweep draws above markers and isn't clipped */
.radar-sweep {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
  will-change: transform;
  overflow: visible;
  z-index: 8; /* higher than .radar-marker (which is z-index:2) so the tip can overlap */
  animation: radar-rotate 3.6s linear infinite;
  transform-origin: 50% 50%;
}

/* tip appearance */
.radar-pointer-fill {
  fill: #ffffff;
  opacity: 0.98;
  filter: drop-shadow(0 10px 24px rgba(255,255,255,0.06));
}
 /* ======= Make radar sweep appear BEHIND the markers ======= */

/* ensure markers are clearly above the sweep */
.radar-marker {
  z-index: 5; /* was 2 — increased so markers float above the sweep */
  position: absolute;
  transform: translate(-50%,-50%);
  pointer-events: none; /* ensure they don't capture mouse events */
  will-change: transform;
}
/* --- Make radar "1" badges smaller (override previous sizes) --- */
.radar-marker {
  /* new smaller badge size (desktop/tablet) */
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  min-height: 44px;

  padding: 6px !important;          /* gives breathing room around the svg */
  border-radius: 9999px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 20px rgba(0,0,0,0.14); /* slightly reduced shadow */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;                       /* keep above sweep */
  position: absolute;
  transform: translate(-50%,-50%);
  pointer-events: none;
}

/* make the inner svg/logo scale to the badge */
.radar-marker img {
  width: 70%;     /* controls the visible size of the "1" inside the white circle */
  height: 70%;
  object-fit: contain;
  display: block;
  max-width: 100%;
  max-height: 100%;
  filter: none;
  z-index: 60;
}

/* smaller on very small screens for better fit */
@media (max-width: 480px) {
  .radar-marker {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px;
    min-height: 26px;
    padding: 5px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  }
  .radar-marker img {
    width: 20%;
    height: 20%;
  }
}

/* place the sweep behind markers */
.radar-sweep {
  z-index: 1 !important;        /* force sweep to draw behind markers */
  pointer-events: none;
  /* keep rotation and sizing from your existing rules */
  /* if you have animation here already, don't remove it */
}

/* optional: slightly reduce the sweep's brightness so markers read clearly on top */
.radar-wedge { opacity: 0.92; }

 /* optional: if pointer drop-shadow causes halo over markers, reduce it */
.radar-pointer-fill { filter: drop-shadow(0 6px 12px rgba(255,255,255,0.04)); }

 /* ----- NEW: Force marker svg sizing so it never grows to cover page ----- */
/* ========================= IMPORTANT MARKER VISIBILITY FIX =========================
   - add visible white circular background with subtle border and shadow so the white
     svg stands out on dark radar background
   - increase default size for clarity on desktop
   - keep responsive smaller size for small screens
   - ensure higher z-index than sweep & rings
   ============================================================================ */
.radar-marker {
  z-index: 20;                 /* ensure markers are top-most inside radar */
  position: absolute;
  transform: translate(-50%,-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;

  /* circular badge behind svg for contrast */
  background: #ffffff;
  border-radius: 9999px;
  padding: 8px;                /* space around SVG so shape reads clearly */
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.06);
  width: 64px;                 /* badge size */
  height: 64px;
  min-width: 44px;
  min-height: 44px;
}

/* SVG inside marker fills badge area */
.radar-marker img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: none;
  z-index: 22;
}

/* Provide default positions for markers (relative to radar-viewport).
   If you have specific classes .marker-tl etc. set in your layout, keep them */
.radar-marker.marker-center { left: 50%; top: 50%; }
.radar-marker.marker-tl     { left: 18%; top: 26%; }
.radar-marker.marker-ur     { left: 82%; top: 26%; }
.radar-marker.marker-lr     { left: 74%; top: 74%; }
.radar-marker.marker-bl     { left: 24%; top: 74%; }
.radar-marker.marker-r      { left: 88%; top: 50%; }

<!-- Small screens tweak -->
@media (max-width: 480px) {
  .radar-marker { width: 44px; height: 44px; padding: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.14); }
  .radar-marker img { width: 100%; height: 100%; }
}

/* Add rotation keyframe (if you had it earlier) */
@keyframes radar-rotate {
  0% { transform: translate(-50%,-50%) rotate(0deg); }
  100% { transform: translate(-50%,-50%) rotate(360deg); }
}
#impact-section {
  margin-top: 14px;
}

.impact-stats-desktop {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.impact-card {
  background: #fff;
  border-radius: 22px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: 0 14px 36px rgba(0,0,0,0.06);
}

.impact-number {
  font-weight: 900;
  font-size: clamp(40px, 4vw, 84px);
  color: #483d8b;
  line-height:1;
  margin-bottom: 10px;
}

.impact-caption {
  color: #7b7b7b;
  font-weight: 700;
  font-size: clamp(16px, 2.5vw, 16px);
}

/* MOBILE VERSION — force-hide mobile carousel on desktop to prevent Owl inline styles showing it */
.impact-stats-mobile { display: none !important; }
.impact-stats-desktop { display: grid !important; }

@media (max-width: 767px) {
  .impact-stats-desktop { display: none !important; } /* hide desktop grid on mobile */
  .impact-stats-mobile { display: block !important; } /* show mobile carousel on mobile */
}
/* ---------- Desktop fixes for tab headline + subline ---------- */
/* Add this after your existing .tab-card / .card-left / .card-right rules so it overrides them */
@media (min-width: 992px) {

  /* make the whole card align items at the top so the image and text align visually,
     but we'll center text content vertically for a balanced look */
  .tab-card {
    align-items: flex-start;    /* allows image to sit flush while left column controls vertical flow */
    min-height: 160px;          /* slightly taller on desktop so content breathes */
    padding: 20px;
    gap: 18px;
  }

  /* left column: center the headline+subline block vertically, but keep CTA pinned lower */
  .tab-card .card-left {
    display: flex;
    flex-direction: column;
    justify-content: center;    /* vertically center headline/subline */
    align-items: flex-start;
    padding-right: 18px;
    min-width: 0;               /* keep overflow behaviour correct in flex/grid */
  }

  /* ensure action (button) isn't shoved under the image - push it down slightly */
  .tab-card .action {
    margin-top: 12px;
  }

  /* headline: consistent desktop size, tighter letter-spacing, readable line-height */
  .tab-card h3 {
    font-size: 28px !important;      /* desktop headline size — adjust to taste */
    line-height: 1.08 !important;
    font-weight: 800;
    margin: 0 0 8px 0;               /* small gap to the subline */
    color: #201536;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* subline / paragraph under headline */
  .tab-card p {
    margin-top: 10px;
    color: #4f4f58;
    font-size: 12px;
    line-height: 1.45;
    max-width: calc(100% - 16px);    /* keeps line length comfortable */
    display: block;
    word-break: break-word;
  }

  /* right image: keep fixed desktop width so layout doesn't reflow oddly */
  .card-right {
    width: var(--card-right-width-desktop, 220px) !important;
    aspect-ratio: 1 / 1;
    padding: 8px;
    align-self: center; /* vertically center the image in the card */
  }

  .card-right img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }

  /* CTA style tuning for desktop */
  .tab-card .book-btn {
      background: #fff;
      margin-top:60px;
    font-size: 18px;
    padding: 10px 14px;
    border-radius: 12px;
  }

  /* final safety: if any earlier rule tried to force h3 bigger, this clamps it */
  .service-tabs .tab-card h3 { font-size: 28px; }
}
  /* Backdrop */
  .ds-modal-backdrop {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1500000;
    background: rgba(10,12,16,0.45);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    transition: opacity 260ms ease, visibility 260ms ease;
    opacity: 0;
    visibility: hidden;
    padding: 12px;
  }
  .ds-modal-backdrop.active {
    display: flex;
    opacity: 1;
    visibility: visible;
  }

  /* Modal card (modern & clean) - match attached design */
  /* NOTE: default width lowered to better fit mobile while remaining roomy on desktop */
  .ds-modal {
    width: min(760px, 96vw); /* widened slightly so content fits on desktop */
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(180deg, #f5f5f6, #ffffff);
    border-radius: 20px;
    box-shadow: 0 40px 120px rgba(18, 22, 45, 0.18);
    padding: 18px 18px 16px;
    position: relative;
    transform: translateY(12px) scale(.985);
    opacity: 0;
    transition: transform 320ms cubic-bezier(.2,.9,.25,1), opacity 260ms ease;
    will-change: transform, opacity;
    border: 1px solid rgba(32,21,46,0.04);
    box-sizing: border-box;
    max-width: 96vw;
    display: flex;
    flex-direction: column;
  }
  /* Enter state */
  .ds-modal-backdrop.active .ds-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  /* Close icon top-right (large) */
  .ds-modal-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 999px;
    font-size: 28px;
    color: #141414;
    position: absolute;
    right: 20px;
    top: 18px;
    line-height: 1;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002; /* ensure above tabs on small screens */
  }
  .ds-modal-close:hover { background: rgba(72,61,139,0.06); color:#483d8b; }

  /* Modal header title (centered) */
  .ds-modal-header {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
   margin-bottom: 10px;
    padding-top: 6px;
  }
  .ds-modal-header h3 {
    margin:0;
    font-size:25px;
    color:#0f1724;
    font-weight:700;
    letter-spacing:-0.6px;
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

  /* Tabs - big rounded pills like the design */
  /* Keep horizontal layout on all viewports and ensure all three pills fit without horizontal scrolling.
     Use flexible sizing so each pill shares available width. */
  /* Base tabs (keep as is if already present) */
.ds-tabs {
  display: flex;
  gap: 12px;
  margin-top: 0px;
  background: transparent;
  padding: 4px 4px;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  margin-bottom: 6px;
}

.ds-tab {
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
  font-size: 16px;
  background: #fff;
  border: 1.2px solid rgba(32,21,46,0.08);
  color: #222;
  box-shadow: 0 8px 20px rgba(18,22,45,0.04), inset 0 1px 0 rgba(255,255,255,0.6);
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  height: 48px;
}

/* MOBILE: Basic + Premium side-by-side, Customised full width under */
@media (max-width: 767px) {

  .ds-tabs {
    display: flex;
    flex-wrap: wrap;       /* allow breaking into 2 rows */
    gap: 10px;
    padding: 8px 6px;
  }

  /* Basic + Premium (first 2 tabs) */
  .ds-tab:nth-child(1),
  .ds-tab:nth-child(2) {
    flex: 1 1 calc(50% - 10px);   /* exactly two per row */
    height: 42px;
    font-size: 13px;
    padding: 10px 0;
    text-align: center;
    border-radius: 30px;
  }

  /* Customised = full width on second row */
  .ds-tab:nth-child(3) {
    flex: 1 1 100%;               /* full row */
    height: 42px;
    font-size: 13px;
    padding: 10px 0;
    text-align: center;
    border-radius: 30px;
  }
}

/* ----- Mobile: make the tab cards smaller + centered ----- */
@media (max-width: 767px) {
  /* Container padding to give left/right breathing room */
  .service-tabs {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Limit width of each tab card & center it */
  .service-tabs .tab-card {
    width: calc(100% - 32px);   /* leaves 16px horizontal margin on each side */
    max-width: 540px;           /* cap the card width for larger phones */
    margin: 0 auto;             /* center the card */
    border-radius: 14px;        /* keeps the pill look but smaller */
    padding: 10px 12px;         /* tighten padding so card is compact */
    min-height: 0;              /* prevent filling entire screen height */
    box-shadow: 0 10px 28px rgba(0,0,0,0.06);
  }

  /* Optional: allow the two cards to stack with space between */
  .service-tabs .tabs-row {
    gap: 12px;
    grid-template-columns: 1fr; /* ensure single-column stacking */
    justify-items: center;
  }

  /* Reduce right image size a little more on small phones */
  .card-right {
    width: min(84px, 24vw);
    aspect-ratio: 1 / 1;
    padding: 6px;
  }

  /* Headline on the card: allow wrapping and smaller size so it doesn't force height */
  .tab-card h3 {
    font-size: clamp(15px, 4.2vw, 18px);
    white-space: normal !important;
    margin-bottom: 6px;
    line-height: 1.25;
  }

  /* Make the book button compact */
  .tab-card .book-btn {
    padding: 8px 10px;
    font-size: 14px;
  }

  /* Ensure the modal/new-badge doesn't push layout */
  .new-badge { top: 8px; right: 8px; padding: 4px 8px; font-size: 11px; }
}

  .ds-tab:hover { transform: translateY(-2px); }

  /* Active tab: only color change (no scale & no padding changes) */
  .ds-tab.active {
    background: #483d8b; /* user requested color */
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(72,61,139,0.12);
    border-color: transparent;
    transform: none;      /* ensure it doesn't grow or move */
    padding-left:12px;    /* keep padding consistent across states */
    padding-right:12px;
  }

  /* make the non-active pills slightly smaller weight and keep white background */
  .ds-tab:not(.active) { font-weight:700; color:#201536; }

  /* Tab panels container: always allow scrolling when needed so content never overlaps */
  .ds-tab-panels {
    margin-top: 18px;
   max-height: calc(92vh - 180px); /* more space for tabs */
  overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 8px; /* give some room for scrollbar */
  }

  /* Single panel layout: white card with left text and right image carousel */
  .ds-tab-panel {
    display: none;
    opacity: 0;
    transform: translateY(6px);
    transition: transform 220ms ease, opacity 220ms ease;
  }
  .ds-tab-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }

  .ds-panel-inner {
   margin-top: 10px;
    display: grid;
    grid-template-columns: 1.3fr 1fr; /* left text area + right image area - increased right area to give images room */
    gap: 18px;
    align-items: flex-start;
  }

  .ds-package-card {
      margin-top:40px;
    background: #fff;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 14px 40px rgba(32,21,46,0.06);
    border: 1px solid rgba(32,21,46,0.04);
  }

  .ds-package-card h4 {
    margin: 0 0 12px 0;
    font-size: 26px;
    color: #483d8b;
    font-weight: 900;
    letter-spacing: -0.4px;
  }
  .ds-package-card p {
    margin: 0 0 18px 0;
    color: #333;
    font-size: 16px;
    line-height: 1.45;
  }

  .ds-package-actions {
    display:flex;
    gap: 12px;
    align-items:center;
  }

  .ds-choose-btn {
    display:inline-block;
    padding:14px 22px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    color:#fff;
    font-weight:900;
    text-decoration:none;
    font-size:18px;
    box-shadow: 0 14px 40px rgba(72,61,139,0.12);
  }

  /* right side carousel container */
  .ds-carousel-wrap {
    width: 100%;
    max-width: 360px; /* allow sufficient width so 800x800 images scale correctly */
    height: auto;
    display:flex;
    align-items:center;
    justify-content:center;
    background: transparent;
  }
  /* Ensure slides/images scale responsively and do not overflow the modal.
     Images that are originally 800x800 will be constrained to the ds-carousel-wrap.
  */
  .ds-carousel { width:100%; box-sizing: border-box; }
  .ds-carousel .ds-slide { display:flex; align-items:center; justify-content:center; padding:6px; box-sizing:border-box; }
  .ds-carousel .ds-slide img {
    width: 100%;
    height: auto;          /* preserve aspect ratio */
    max-width: 100%;
    max-height: 420px;     /* caps height so modal doesn't overflow forever */
    object-fit: contain;   /* show entire image without cropping */
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(32,21,46,0.08);
    display: block;
  }
/* MOBILE — show 3 small images in carousel below package details */
@media (max-width: 767px) {

  /* Stack card + carousel vertically */
  @media (max-width: 767px) {
  .ds-panel-inner {
    margin-top: 6px;                 /* keep small top margin on mobile */
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .ds-package-card {
    padding: 16px;
  }

  .ds-carousel-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding: 4px 0 8px 0;
  }

  .ds-carousel .ds-slide img {
    max-width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: contain;
  }
}

  /* spacing */
  .ds-carousel .owl-item {
    padding: 0 5px;
  }
}

  /* ---------- MOBILE ADJUSTMENTS (TARGETED) ----------

  ... (modal & JS unchanged, omitted here to keep response compact)

  */