/* ==========================================================================
   Sparsh Ayurveda Clinic — theme
   --------------------------------------------------------------------------
   Layout: modern "bento" wellness style — rounded photo cards, soft sandal
   cards on a cotton-white page, pill buttons with a round arrow at the end,
   small chips laid over photos.

   Colour: the logo blue (#2E3190) is treated as natural indigo, the dye from
   Neeli, itself an Ayurvedic herb. It is the only accent. It sits on cotton
   and sandalwood neutrals beside herbal greens, and the two meet in gradients
   (indigo → neem → leaf), the green dyers get by dipping indigo cloth in turmeric.

   Type: Plus Jakarta Sans for headings and text. Single accent words in a
   heading (<em>) switch to Cormorant Garamond italic in indigo.
   Arabic: IBM Plex Sans Arabic, with Amiri for the accent words.
   ========================================================================== */

:root {
  --brand-50: #F0F1F7;
  --brand-200: #C3C7E1;
  --brand-300: #9CA1CD;
  --brand-500: #4D51A0;
  --brand-700: #2E3190;   /* logo */
  --brand-800: #25286F;
  --brand-900: #1C1F54;
  --brand-950: #12153A;
  --mist-100: #E7E8F0;
  --lagoon-500: #3F7563;
  --lagoon-600: #2D5E4F;
  --lagoon-800: #1B3A36;
  --forest-100: #E1E8D6;
  --forest-700: #2F4A28;
  --forest-800: #23391F;
  --forest-900: #192A17;
  --forest-950: #111C10;
  --cream-25: #FDFBF6;    /* cotton white: page background */
  --cream-50: #F8F4EC;    /* unbleached cotton: alternate bands */
  --cream-100: #F1EBDF;   /* sandal: cards */
  --cream-200: #E6DDCB;
  --ink: #1A1F18;
  --muted: #56604F;
  --line: rgba(26, 31, 24, .12);
  --header-h: 76px;
  /* One corner radius for photos and cards. Change it here to restyle every page. */
  --img-radius: 1.75rem;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--cream-25); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--brand-200); color: var(--brand-950); }

/* Full-width layout: no centered max-width container. Every section spans the screen and keeps
   one fluid side margin — about 20px on phones, growing to 96px on very wide monitors. */
.gutter { width: 100%; padding-inline: clamp(1.25rem, 5vw, 6rem); }

/* ---------- Bilingual switching ---------------------------------------- */
html:not([data-lang="ar"]) .ar { display: none !important; }
html[data-lang="ar"] .en { display: none !important; }
[lang="ar"], html[data-lang="ar"] body { font-family: "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif; }
html[data-lang="ar"] body { line-height: 1.8; }
html[dir="rtl"] .flip-rtl { transform: scaleX(-1); }
html[data-lang="ar"] .italic { font-style: normal; }

/* ---------- Typography --------------------------------------------------- */
.display { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 500; line-height: 1.04; letter-spacing: -0.035em; }
/* Accent word: a serif italic in indigo (Cormorant is small, so it is scaled up to match the sans) */
.display em { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.16em;
  line-height: .8; letter-spacing: -0.01em; color: var(--em, var(--brand-700)); padding-inline-end: .03em; }
.on-dark .display em, .display.on-dark em { --em: var(--brand-200); }
html[data-lang="ar"] .display, .display[lang="ar"], .display [lang="ar"] { font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
html[data-lang="ar"] .display em, .display [lang="ar"] em { font-family: "Amiri", serif; font-style: normal; font-weight: 700; font-size: 1.04em; line-height: 1; }

/* "Ayurveda" in the home headline: a strong herbal green gradient, from fresh tulsi leaf where the word
   starts to deep forest at its end (mirrored in Arabic). Every stop stays readable on cream. */
.text-grad-green {
  background-image: linear-gradient(to right, #569A45 0%, #3E8640 38%, #276A35 72%, #1A502A 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  padding-bottom: .08em;   /* keeps descenders inside the painted area */
}
html[dir="rtl"] .text-grad-green { background-image: linear-gradient(to left, #569A45 0%, #3E8640 38%, #276A35 72%, #1A502A 100%); }

/* Small uppercase label above a heading. .with-rule adds a small square; .with-line adds a hairline to the edge. */
.eyebrow { display: inline-flex; align-items: center; gap: .65rem; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; }
.eyebrow.with-rule::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; flex-shrink: 0; }
.eyebrow.with-line { display: flex; width: 100%; }
.eyebrow.with-line::after { content: ""; flex: 1; height: 1px; margin-inline-start: .6rem; background: currentColor; opacity: .18; }
html[data-lang="ar"] .eyebrow { letter-spacing: 0; text-transform: none; font-size: 14px; }

.lede { font-size: 1.0625rem; line-height: 1.7; }
@media (min-width: 640px) { .lede { font-size: 1.125rem; } }

/* Gradient hairline: indigo turning to neem green, then fading out */
.rule-grad { height: 1px; background: linear-gradient(90deg, var(--brand-700), var(--lagoon-500) 55%, rgba(47, 74, 40, 0)); }
html[dir="rtl"] .rule-grad { background: linear-gradient(270deg, var(--brand-700), var(--lagoon-500) 55%, rgba(47, 74, 40, 0)); }

/* ---------- Buttons & links --------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem; padding: 0 1.6rem;
  border-radius: 999px; font-size: 15px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap;
  transition: background-color .25s ease, background-position .5s ease, color .25s ease, border-color .25s ease, transform .25s ease; }
.btn:active { transform: scale(.98); }
html[data-lang="ar"] .btn { font-size: 15.5px; }
.btn-brand { background: var(--brand-700); color: #fff; }
.btn-brand:hover { background: var(--brand-800); }
/* Indigo turning green: the middle stays a deep indigo navy so the blend never passes through a bright steel blue */
.btn-grad { color: #fff; background: linear-gradient(110deg, var(--brand-700) 0%, #283C70 48%, var(--lagoon-600) 100%); background-size: 160% 100%; background-position: 0 0; }
.btn-grad:hover { background-position: 100% 0; }
.btn-soft { background: var(--cream-100); color: var(--ink); }
.btn-soft:hover { background: var(--cream-200); }
.btn-outline, .btn-line { border: 1px solid rgba(26, 31, 24, .16); color: var(--ink); }
.btn-outline:hover, .btn-line:hover { background: var(--cream-100); border-color: rgba(26, 31, 24, .24); }
.btn-cream { background: var(--cream-25); color: var(--brand-900); }
.btn-cream:hover { background: #fff; }
.btn-line-light { border: 1px solid rgba(255, 255, 255, .5); color: #fff; }
.btn-line-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* Pill with a round arrow at its end */
.btn.has-dot { padding-inline-end: .375rem; gap: 1rem; }
.btn .dot { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 999px;
  background: var(--mist-100); color: var(--brand-700); transition: transform .35s ease; }
.btn .dot svg { width: 1rem; height: 1rem; }
.btn-brand .dot, .btn-grad .dot { background: #fff; color: var(--brand-700); }
.btn-cream .dot { background: var(--brand-700); color: #fff; }
.btn:hover .dot { transform: rotate(45deg); }
html[dir="rtl"] .btn:hover .dot { transform: rotate(-45deg); }

/* Round arrow button */
.circle-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: 999px;
  border: 1px solid rgba(26, 31, 24, .14); color: var(--ink); transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .35s ease; }
.circle-btn svg { width: 1rem; height: 1rem; }
.circle-btn.solid { background: var(--cream-25); border-color: transparent; }
.circle-btn:hover, .group:hover .circle-btn { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }

.link-u { display: inline-flex; align-items: center; gap: .5rem; padding-bottom: .2rem; border-bottom: 1px solid currentColor;
  font-size: 14.5px; font-weight: 600; transition: gap .25s ease; }
.link-u:hover { gap: .8rem; }

/* ---------- Chips ------------------------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.1rem; padding: .3rem .95rem; border-radius: 999px;
  font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
html[data-lang="ar"] .chip { font-size: 14px; }
.chip-outline { border: 1px solid rgba(26, 31, 24, .16); color: var(--ink); }
.chip-soft { background: var(--cream-100); color: var(--ink); }
.chip-white { background: var(--cream-25); color: var(--ink); }
.chip-sage { background: var(--forest-100); color: var(--forest-700); }
.chip-indigo { background: var(--mist-100); color: var(--brand-700); }
.chip-glass { background: rgba(14, 16, 12, .3); border: 1px solid rgba(255, 255, 255, .24); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
a.chip-glass:hover { background: rgba(14, 16, 12, .45); }

/* ---------- Cards & glass ------------------------------------------------ */
.card { background: var(--cream-100); border-radius: var(--img-radius); }
.rounded-photo { border-radius: var(--img-radius); }
.photo-4x5 { aspect-ratio: 4 / 5; border-radius: var(--img-radius); }
/* Translucent panel laid over a photo */
.glass { background: rgba(253, 251, 246, .16); border: 1px solid rgba(255, 255, 255, .3); color: #fff;
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.glass-light { background: rgba(253, 251, 246, .86); color: var(--ink); box-shadow: 0 20px 40px -24px rgba(17, 19, 58, .45);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* Doctor portraits sit three-up; on very wide screens a square keeps the row from getting too tall */
@media (min-width: 1536px) { .doc-photo { aspect-ratio: 1 / 1; } }

/* "Why Sparsh?" — concentric rings behind the centre title */
.why-rings { position: absolute; top: 50%; left: 50%; width: min(36rem, 92vw); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.why-rings span { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(28, 31, 84, .13); }
.why-rings span:nth-child(2) { inset: 10%; border-color: rgba(28, 31, 84, .1); }
.why-rings span:nth-child(3) { inset: 20%; border-color: rgba(28, 31, 84, .08); background: radial-gradient(circle, rgba(231, 232, 240, .55), rgba(231, 232, 240, 0) 70%); }
@media (max-width: 1023px) { .why-rings { width: min(24rem, 86vw); } }

/* ---------- Header ------------------------------------------------------ */
#siteHeader { background: rgba(253, 251, 246, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: box-shadow .3s ease; }
#siteHeader.is-solid { box-shadow: 0 1px 0 rgba(28, 31, 84, .08), 0 12px 30px -24px rgba(17, 19, 58, .35); }

/* Main navigation sits in a soft pill; the current page is a raised white pill */
.nav-pill { align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--cream-100); }
.nav-link { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1.05rem; border-radius: 999px;
  font-size: 14.5px; font-weight: 500; color: rgba(26, 31, 24, .75); transition: background-color .25s ease, color .25s ease; }
.nav-link:hover { color: var(--ink); background: rgba(253, 251, 246, .6); }
.nav-link[aria-current="page"] { background: var(--cream-25); color: var(--brand-700); font-weight: 600; box-shadow: 0 1px 2px rgba(17, 19, 58, .08); }
html[data-lang="ar"] .nav-link { font-size: 15.5px; }
/* Small laptops: slightly tighter menu so the logo keeps clear space beside it */
@media (min-width: 1024px) and (max-width: 1279px) { .nav-link { padding: 0 .8rem; } }
.mnav-link[aria-current="page"] { color: var(--brand-700); }

/* English / Arabic switch */
.lang-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid rgba(26, 31, 24, .14); color: var(--ink); }
.lang-toggle button { min-height: 2.35rem; min-width: 2.6rem; padding: 0 .8rem; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .06em; color: inherit; opacity: .8; transition: background-color .25s ease, color .25s ease, opacity .25s ease; }
.lang-toggle button[lang="ar"] { font-family: "IBM Plex Sans Arabic", sans-serif; font-size: 14px; letter-spacing: 0; }
.lang-toggle button:hover { opacity: 1; }
.lang-toggle button[aria-pressed="true"] { background: var(--brand-700); color: #fff; opacity: 1; }
.lang-toggle button[lang="ml"] { font-family: "Anek Malayalam", "Noto Sans Malayalam", "Nirmala UI", sans-serif; font-size: 13.5px; letter-spacing: 0; }
.lang-toggle.on-light button { min-width: 0; padding: 0 1rem; font-size: 13.5px; letter-spacing: .02em; }
/* Phones: the language pill is replaced by a translate button with a dropdown (#langBtn / #langMenu) */
@media (max-width: 639px) { #siteHeader .circle-btn { width: 2.6rem; height: 2.6rem; } }
.lang-opt { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.9rem; padding: 0 .9rem;
  border-radius: .9rem; font-size: 15px; font-weight: 500; text-align: start; color: var(--ink); transition: background-color .2s ease, color .2s ease; }
.lang-opt:hover { background: var(--cream-100); }
.lang-opt[lang="ar"] { font-family: "IBM Plex Sans Arabic", sans-serif; }
.lang-opt[lang="ml"] { font-family: "Anek Malayalam", "Noto Sans Malayalam", "Nirmala UI", sans-serif; font-weight: 600; }
.lang-opt .chk { flex-shrink: 0; opacity: 0; }
.lang-opt[aria-pressed="true"] { background: var(--brand-700); color: #fff; }
.lang-opt[aria-pressed="true"] .chk { opacity: 1; }

/* Google Translate notice ("മലയാളം · Google Translate  [Show original]"): it never blocks taps on the page
   except on its own button, and on phones it sits just under the header, clear of the hero buttons and WhatsApp */
#gtBar { pointer-events: none; }
#gtBar button { pointer-events: auto; }
@media (max-width: 639px) { #gtBar { bottom: auto; top: calc(var(--header-h) + 10px); } }

/* ---------- Malayalam (Google Translate of the English page) ------------
   Without this block Malayalam inherits the English type: tight negative letter-spacing that crushes
   the joined letters, very tight line spacing that makes the tall marks collide, huge display sizes,
   and a fake slanted italic for accent words (the serif has no Malayalam letters).
   Here Malayalam gets its own font (Anek Malayalam, loaded only when chosen), natural spacing,
   generous line height and a smaller heading scale. Latin words that stay in English
   (translate="no", e.g. therapy names) keep the Plus Jakarta Sans styling. */
html[data-gt="ml"] body { font-family: "Plus Jakarta Sans", "Anek Malayalam", "Noto Sans Malayalam", "Nirmala UI", sans-serif; line-height: 1.8; }
html[data-gt="ml"] .display { font-family: "Plus Jakarta Sans", "Anek Malayalam", "Noto Sans Malayalam", "Nirmala UI", sans-serif; font-weight: 500; }
/* Never tighten or widen Malayalam letters */
html[data-gt="ml"] body *:not([translate="no"]):not([translate="no"] *) { letter-spacing: 0; text-transform: none; }
/* Room between lines */
html[data-gt="ml"] :is(p, li, dd, dt, summary, label, blockquote),
html[data-gt="ml"] [class*="leading-"]:not([translate="no"]) { line-height: 1.75; }
html[data-gt="ml"] .lede { font-size: 1.0625rem; line-height: 1.85; }
/* Headings: :not(#_) only raises priority above the general rule above */
html[data-gt="ml"] :is(h1, h2, h3, h4, .display):not(#_),
html[data-gt="ml"] :is(h1, h2, h3, h4, .display) [class*="leading-"]:not(#_) { line-height: 1.4; }
/* A calmer heading scale: Malayalam words are longer and its letters taller */
html[data-gt="ml"] h1.display { font-size: clamp(2.1rem, 3.5vw, 3.6rem); }
html[data-gt="ml"] h2.display { font-size: clamp(1.6rem, 2.35vw, 2.4rem); }
html[data-gt="ml"] .display:not(h1, h2) { font-size: clamp(1.3rem, 1.9vw, 1.75rem); }
/* Accent words: same font, upright, in indigo (Malayalam has no italics) */
html[data-gt="ml"] .display em { font-family: inherit; font-style: normal; font-size: 1em; font-weight: inherit; line-height: inherit; padding: 0; }
html[data-gt="ml"] .text-grad-green { padding-bottom: .22em; }
/* Small labels: 12px is too small for Malayalam */
html[data-gt="ml"] .eyebrow { font-size: 13.5px; font-weight: 600; }
html[data-gt="ml"] :is([class*="text-[11"], [class*="text-[12"]):not([translate="no"]) { font-size: 13px !important; }
html[data-gt="ml"] .chip { font-size: 13.5px; line-height: 1.45; white-space: normal; }
/* Longer button and menu labels may wrap instead of overflowing */
html[data-gt="ml"] .btn { white-space: normal; text-align: center; line-height: 1.35; padding-block: .5rem; font-weight: 600; }
html[data-gt="ml"] .nav-link { font-size: 14px; padding: 0 .8rem; }

/* ---------- Gradients: blue × green ------------------------------------- */
/* Dark panels: deep indigo → indigo navy → neem → leaf green, with muted glows like dyed cloth */
.bg-blue-green {
  background:
    radial-gradient(80% 70% at 0% 0%, rgba(60, 64, 158, .42) 0%, rgba(60, 64, 158, 0) 60%),
    radial-gradient(75% 70% at 100% 100%, rgba(92, 128, 64, .36) 0%, rgba(92, 128, 64, 0) 60%),
    linear-gradient(135deg, #1C1F54 0%, #1C2A4B 34%, #1D3A37 64%, #192A17 100%);
}
/* Same palette, reversed: leaf → neem → indigo */
.bg-green-blue {
  background:
    radial-gradient(80% 70% at 100% 0%, rgba(60, 64, 158, .38) 0%, rgba(60, 64, 158, 0) 60%),
    radial-gradient(75% 70% at 0% 100%, rgba(92, 128, 64, .4) 0%, rgba(92, 128, 64, 0) 60%),
    linear-gradient(135deg, #192A17 0%, #1D3A37 40%, #1C2A4B 72%, #1C1F54 100%);
}

/* Paper grain */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Details / accordions --------------------------------------- */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] .open-rotate { transform: rotate(45deg); }

/* ---------- Form fields ------------------------------------------------- */
.label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
html[data-lang="ar"] .label { font-size: 14px; }
.field { width: 100%; min-height: 3.25rem; margin-top: .5rem; padding: .7rem 1rem; background: var(--cream-25); border: 1px solid rgba(26, 31, 24, .14);
  border-radius: 1rem; color: var(--ink); font-size: 1rem; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.field::placeholder { color: rgba(86, 96, 79, .6); }
.field:focus { border-color: var(--brand-700); box-shadow: 0 0 0 3px rgba(46, 49, 144, .14); }
.field:focus-visible { outline: none; }
textarea.field { resize: vertical; }
select.field { -webkit-appearance: none; appearance: none; padding-inline-end: 2.5rem; cursor: pointer;
  background: var(--cream-25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232E3190' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center; }
html[dir="rtl"] select.field { background-position: left 1rem center; }
.field[aria-invalid="true"] { border-color: #B42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }

/* ---------- Motion ------------------------------------------------------ */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
html.js .reveal.is-in { opacity: 1; transform: none; }
.hero-in { animation: heroIn 1s cubic-bezier(.2, .7, .2, 1) both; }
.hero-in.d1 { animation-delay: .08s; }
.hero-in.d2 { animation-delay: .16s; }
.hero-in.d3 { animation-delay: .24s; }
.hero-in.d4 { animation-delay: .32s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero-img { animation: heroZoom 14s ease-out both; }
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Dialog ------------------------------------------------------ */
dialog.therapy-dialog { padding: 0; border: 0; background: transparent; max-width: min(60rem, calc(100vw - 2rem)); width: 100%; max-height: calc(100dvh - 2rem); }
dialog.therapy-dialog::backdrop { background: rgba(17, 19, 58, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.therapy-dialog[open] .dialog-card { animation: dialogIn .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes dialogIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Focus ------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible, .bg-blue-green :focus-visible { outline-color: var(--brand-200); }

/* ---------- Google Translate: hide Google's UI, keep ours --------------- */
body { top: 0 !important; position: static !important; }
iframe.skiptranslate, .goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame,
.goog-tooltip, .goog-tooltip:hover, .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-l4eHX-hSRGPd, .VIpgJd-yAWNEb-L7lbkb { display: none !important; visibility: hidden !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
font { background: transparent !important; box-shadow: none !important; }
#google_translate_element { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------- "What is Ayurveda" panel (About) ----------------------------
   A white centre with a soft light-green fade from every edge inward (no hard green), built from inset
   shadows so it follows the rounded corners. Accent words in headings turn leaf green here instead of indigo. */
.ayur-panel { --em: #3E7A3B; background-color: #FFFFFF;
  --mid: 128, 190, 84;      /* light green at the edge */
  --soft: 205, 232, 186;    /* palest green, fading into white */
  box-shadow:
    inset 0 0 0 1px rgba(var(--mid), .32),
    inset 0 0 40px 10px rgba(var(--mid), .45),
    inset 0 0 150px 30px rgba(var(--soft), .65); }
@media (max-width: 639px) {
  .ayur-panel { box-shadow:
    inset 0 0 0 1px rgba(var(--mid), .32),
    inset 0 0 26px 6px rgba(var(--mid), .45),
    inset 0 0 90px 16px rgba(var(--soft), .65); }
}

/* ---------- Home "Health care packages": photo cards --------------------
   Blue and white. Each card carries its treatment photo, sharp (no blur) and toned into indigo
   (mix-blend-mode: luminosity keeps the photo's light and shade but takes the card's colour).
   A soft shade behind the text keeps it crisp. On hover (desktop) the photo brightens and zooms gently.
   Per card: --o sets how strongly the photo shows (bright photos use less). */
.pkg-band { background-color: #F3F5FB; }
.pkg-card { position: relative; isolation: isolate; overflow: hidden; background-color: var(--pkg, #26307A); }
.pkg-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: -2;
  opacity: var(--o, .42); mix-blend-mode: luminosity; transition: opacity .7s ease, transform 1.4s ease; }
.pkg-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(14, 16, 48, .55) 0%, rgba(14, 16, 48, 0) 62%); }
@media (hover: hover) { .pkg-card:hover .pkg-bg { opacity: calc(var(--o, .42) + .14); transform: scale(1.04); } }
.pkg-card:focus-visible .pkg-bg { opacity: calc(var(--o, .42) + .14); }