/* =====================================================================
   Roshan's Foot Care - Main Stylesheet
   Blue + Green theme (from clinic logo), heavy button/section animation
   ===================================================================== */

:root{
  --blue-900:#0a2a4d;
  --blue-800:#0d356a;
  --blue-700:#0f4483;
  --blue-600:#1257a3;
  --blue-500:#1a6fca;
  --blue-100:#e8f2fc;
  --blue-50:#f3f9ff;
  --green-700:#0f7d33;
  --green-600:#18a147;
  --green-500:#22c05a;
  --green-100:#e5f8ec;
  --red-600:#c0392b;
  --gray-900:#1c2430;
  --gray-700:#465063;
  --gray-500:#7a8494;
  --gray-200:#e3e8ef;
  --gray-100:#f2f5f9;
  --white:#ffffff;
  --radius:14px;
  --radius-sm:8px;
  --shadow-sm:0 2px 8px rgba(10,42,77,.08);
  --shadow-md:0 8px 28px rgba(10,42,77,.14);
  --shadow-lg:0 18px 48px rgba(10,42,77,.22);
  --font-main:'Poppins', 'Segoe UI', sans-serif;
  --transition:.28s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-main);
  color:var(--gray-900);
  background:var(--white);
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{font-weight:700;line-height:1.25;margin:0 0 .5em;color:var(--blue-900);}
/* Body copy set as justified paragraphs sitewide (flush on both edges,
   like a printed block of text) instead of ragged-left/right, with proper
   paragraph spacing. text-align-last:start keeps the final, often-short
   line of each paragraph reading normally (left in English, right in
   Urdu/RTL) instead of being stretched edge-to-edge. hyphens:auto softens
   the word-spacing that justified text can otherwise create on narrow
   columns; it only takes effect where the browser has a hyphenation
   dictionary for the page's own language (set via <html lang> already),
   and is a harmless no-op for Urdu script. Anything that should stay
   centered or left-aligned (buttons, tags, quotes, captions, etc.) already
   sets its own text-align elsewhere and is unaffected -- this only
   changes plain paragraph text. */
p{
  margin:0 0 1.1em;
  color:var(--gray-700);
  text-align:justify;
  text-align-last:start;
  line-height:1.75;
  -webkit-hyphens:auto;
  hyphens:auto;
}
.container{max-width:1220px;margin:0 auto;padding:0 20px;}
section{padding:64px 0;}

/* ---------------- Foot-print cursor on interactive elements ---------------- */
/* Rest of the site keeps the normal system cursor. Buttons, links, nav items
   and menu items show a blue paw/foot-print cursor on hover (desktop only -
   touch devices have no hover state, so mobile taps are unaffected). */
a, button, .btn, .nav-link, .pill, .filter-btn, .fab, .card-link,
.modal-close, .hamburger, .lang-switch-btn, .social-ico, .submenu li a,
.footer-col ul li a, .qty-stepper button, input[type="submit"],
[data-open-contact], .add-to-cart-btn, .cart-remove-btn{
  cursor:url('../images/paw-cursor-32.png') 6 26, pointer;
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:50px;font-weight:600;font-size:15px;
  border:2px solid transparent;position:relative;overflow:hidden;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
  white-space:nowrap;
}
.btn:active{transform:scale(.96);}
.btn-primary{background:var(--green-600);color:#fff;box-shadow:0 6px 18px rgba(24,161,71,.35);}
.btn-primary:hover{background:var(--green-700);transform:translateY(-3px);box-shadow:0 12px 26px rgba(24,161,71,.4);}
.btn-outline{background:transparent;border-color:var(--green-600);color:var(--green-700);}
.btn-outline:hover{background:var(--green-600);color:#fff;transform:translateY(-3px);}
.btn-whatsapp{background:#fff;color:var(--green-700);border-color:var(--green-500);}
.btn-whatsapp:hover{background:var(--green-500);color:#fff;transform:translateY(-3px);}
.btn-block{width:100%;}
.btn-sm{padding:9px 18px;font-size:13px;}
.btn::after{
  content:'';position:absolute;inset:0;background:radial-gradient(circle at center, rgba(255,255,255,.5) 0%, transparent 70%);
  opacity:0;transform:scale(0);transition:transform .5s, opacity .5s;
}
.btn:hover::after{opacity:1;transform:scale(2);}

/* ---------------- Top bar ---------------- */
.topbar{background:var(--blue-900);color:#dce8f7;font-size:13px;padding:8px 0;}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.topbar-left{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.topbar-link{display:inline-flex;align-items:center;gap:6px;color:#dce8f7;transition:color var(--transition);}
.topbar-link:hover{color:var(--green-500);}
.topbar-tagline{opacity:.8;display:none;}
@media(min-width:760px){.topbar-tagline{display:inline;}}
.topbar-right{display:flex;align-items:center;gap:14px;}
.social-ico{display:inline-flex;color:#dce8f7;transition:transform var(--transition),color var(--transition);}
.social-ico:hover{color:var(--green-500);transform:translateY(-2px) scale(1.15);}
.lang-switch-btn{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.12);padding:5px 12px;border-radius:20px;transition:background var(--transition);font-weight:600;}
.lang-switch-btn:hover{background:var(--green-600);}
.staff-login-btn{display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(255,255,255,.35);padding:4px 11px;border-radius:20px;transition:background var(--transition),border-color var(--transition);font-weight:600;color:#dce8f7;}
.staff-login-btn:hover{background:var(--green-600);border-color:var(--green-600);color:#fff;}
.staff-login-text{display:none;}
@media(min-width:760px){.staff-login-text{display:inline;}}

/* ---------------- Info carousel ---------------- */
.info-carousel-wrap{background:var(--green-600);color:#fff;overflow:hidden;position:relative;height:38px;}
.info-carousel{display:flex;position:absolute;white-space:nowrap;animation:marqueeLTR 46s linear infinite reverse;will-change:transform;}
.info-slide{display:inline-flex;align-items:center;gap:8px;padding:8px 40px;font-size:13.5px;}
.info-slide strong{font-weight:700;}
.info-slide-link{text-decoration:underline;opacity:.9;}
@keyframes marqueeLTR{from{transform:translateX(-100%);}to{transform:translateX(100vw);}}
.info-carousel-wrap:hover .info-carousel{animation-play-state:paused;}

/* ---------------- Header / Nav ---------------- */
.site-header{background:#fff;box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:500;transition:box-shadow var(--transition);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 20px;}
.brand-logo{height:58px;width:auto;transition:transform var(--transition);}
.brand:hover .brand-logo{transform:scale(1.04);}
.main-nav ul{display:flex;gap:4px;align-items:center;}
.nav-item{position:relative;}
.nav-link{display:flex;align-items:center;gap:4px;padding:12px 14px;font-weight:600;color:var(--blue-900);border-radius:8px;transition:color var(--transition),background var(--transition);}
.nav-link .caret{font-size:10px;transition:transform var(--transition);}
.nav-item:hover .nav-link{color:var(--green-700);background:var(--green-100);}
.nav-item:hover .caret{transform:rotate(180deg);}
.nav-item::after{content:'';position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--green-600);transform:scaleX(0);transition:transform var(--transition);transform-origin:left;}
.nav-item:hover::after{transform:scaleX(1);}
/* `.main-nav ul{display:flex}` (above) matches this <ul> too since it's
   nested under .main-nav -- same class+type-vs-single-class specificity
   collision already hit once on this project's other dropdown/accordion
   (.dnav ul vs .ddrop). Qualifying with .main-nav here, same fix as
   there, so the submenu renders as a normal vertical list instead of
   silently inheriting the top nav's flex row. */
.main-nav .submenu{display:block;position:absolute;top:100%;left:0;background:#fff;min-width:240px;box-shadow:var(--shadow-lg);border-radius:12px;padding:8px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity var(--transition),visibility var(--transition),transform var(--transition);z-index:50;overflow:hidden;}
.submenu::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--green-500),var(--blue-600));}
.nav-item.has-children:hover .submenu{opacity:1;visibility:visible;transform:translateY(4px);}
/* Services / Products get a wider, real-data-driven panel instead of the
   plain short dropdown. */
.submenu-mega{min-width:300px;padding:10px;}
.submenu li{position:relative;}
/* Each row cascades in on its own slight delay (--i, set inline per row)
   instead of the whole panel appearing at once. */
@keyframes submenuRowIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.nav-item.has-children:hover .submenu li{animation:submenuRowIn .4s cubic-bezier(.4,0,.2,1) backwards;animation-delay:calc(var(--i,0) * 35ms);}
/* align-items:flex-start (+ the dot's own top nudge below) instead of
   center -- a short "General Podiatry" row looks identical either way,
   but a longer blog title that wraps to 2-3 lines otherwise strands the
   dot in the middle of the block instead of next to the first line. */
.submenu li a{position:relative;display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:8px;color:var(--gray-900);font-weight:500;line-height:1.35;overflow:hidden;transition:background var(--transition),color var(--transition),padding var(--transition);}
/* The light-sweep: a soft green band that slides across the row on
   hover, same technique used on the site's other hover "glow" moments. */
.submenu li a::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(34,192,90,.22) 50%,transparent 70%);transform:translateX(-130%);transition:transform .6s cubic-bezier(.4,0,.2,1);pointer-events:none;}
.submenu li a:hover{background:var(--blue-100);color:var(--blue-700);padding-left:20px;}
.submenu li a:hover::before{transform:translateX(130%);}
.submenu-dot{flex:none;width:7px;height:7px;margin-top:8px;border-radius:50%;background:var(--green-500);transition:box-shadow var(--transition),transform var(--transition);}
.submenu li a:hover .submenu-dot{box-shadow:0 0 0 5px rgba(34,192,90,.2),0 0 10px rgba(34,192,90,.7);transform:scale(1.2);}
.submenu-viewall{border-top:1px solid var(--gray-200);margin-top:6px;padding-top:6px;}
.submenu-viewall a{justify-content:space-between;color:var(--green-700);font-weight:700;}
.submenu-viewall a:hover{background:var(--green-100);color:var(--green-700);}
.submenu-viewall .submenu-arrow{transition:transform var(--transition);}
.submenu-viewall a:hover .submenu-arrow{transform:translateX(4px);}
.header-cta{display:flex;align-items:center;gap:10px;}
/* z-index:650 (and position so z-index applies) keeps this tappable to
   CLOSE the menu once .main-nav slides open above it at z-index:600 --
   pre-existing, found while testing the new dropdown: without this the
   open panel visually and functionally covers the button that opens it. */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:none;border:none;position:relative;z-index:650;}
.hamburger span{height:3px;background:var(--blue-900);border-radius:3px;width:100%;transition:transform var(--transition),opacity var(--transition);}
.hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ---------------- Hero ---------------- */
.hero{background:linear-gradient(120deg,var(--blue-900),var(--blue-700) 60%,var(--blue-600));position:relative;overflow:hidden;padding:80px 0 100px;}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 85% 20%, rgba(34,192,90,.25), transparent 55%);}
.hero-inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;text-align:center;}}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);color:#fff;padding:7px 16px;border-radius:30px;font-size:13px;font-weight:600;margin-bottom:18px;animation:pulseBadge 2.4s ease-in-out infinite;}
@keyframes pulseBadge{0%,100%{box-shadow:0 0 0 0 rgba(34,192,90,.5);}50%{box-shadow:0 0 0 8px rgba(34,192,90,0);}}
.hero h1{color:#fff;font-size:clamp(28px,4vw,46px);animation:fadeInUp .8s ease both;}
.hero p.lead{color:#d6e6f9;font-size:17px;max-width:520px;animation:fadeInUp .8s .15s ease both;}
@media(max-width:900px){.hero p.lead{margin-left:auto;margin-right:auto;text-align:center;text-align-last:center;}}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;animation:fadeInUp .8s .3s ease both;}
@media(max-width:900px){.hero-ctas{justify-content:center;}}
.hero-stats{display:flex;gap:26px;margin-top:44px;flex-wrap:wrap;animation:fadeInUp .8s .45s ease both;}
@media(max-width:900px){.hero-stats{justify-content:center;}}
.stat-box{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:18px 24px;text-align:center;backdrop-filter:blur(6px);}
.stat-num{font-size:30px;font-weight:800;color:var(--green-500);display:block;}
.stat-label{font-size:12.5px;color:#cfe0f5;}
.hero-visual{position:relative;animation:floatY 5s ease-in-out infinite;display:flex;justify-content:center;}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}
.hero-visual img{width:380px;height:380px;max-width:82vw;max-height:82vw;border-radius:50%;object-fit:cover;object-position:center 42%;box-shadow:var(--shadow-lg);border:7px solid var(--green-500);outline:3px solid rgba(255,255,255,.25);outline-offset:-8px;}
@media(max-width:900px){.hero-visual img{width:240px;height:240px;border-width:6px;outline-offset:-6px;}}
@media(max-width:480px){.hero-visual img{width:200px;height:200px;}}

/* ---------------- Marquee strips ---------------- */
.strip-section{padding:40px 0;background:var(--blue-50);overflow:hidden;}
.strip-title{text-align:center;margin-bottom:22px;}
.marquee-row{overflow:hidden;position:relative;direction:ltr;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
/* direction:ltr is forced here regardless of page language: this is a purely
   decorative auto-scrolling strip, and its seamless loop math (each track is
   the list doubled, animated from -50% to 0) only lands correctly when the
   browser lays the flex items out left-to-right. Under the site's dir="rtl"
   (Urdu) mode this inherited RTL flex layout, which shifted where the track's
   "0" position actually sat and caused the two duplicated copies to jump/
   overlap at the loop restart. Urdu pill text still shapes and reads
   correctly RTL on its own -- that is handled by Unicode's bidi algorithm at
   the character level, not by this container's direction property. */
.marquee-track{display:flex;gap:16px;width:max-content;direction:ltr;}
.marquee-track.ltr{animation:scrollLTR 58s linear infinite;}
.marquee-track.rtl2{animation:scrollRTL 58s linear infinite;}
.marquee-row:hover .marquee-track{animation-play-state:paused;}
@keyframes scrollLTR{from{transform:translateX(-50%);}to{transform:translateX(0);}}
@keyframes scrollRTL{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--gray-200);padding:10px 20px;border-radius:40px;font-weight:600;font-size:14px;color:var(--blue-800);box-shadow:var(--shadow-sm);white-space:nowrap;transition:transform var(--transition),box-shadow var(--transition),background var(--transition);}
.pill:hover{transform:translateY(-4px) scale(1.03);box-shadow:var(--shadow-md);background:var(--green-100);}
.pill.pill-green{border-color:var(--green-500);color:var(--green-700);}

/* ---------------- Section headings ---------------- */
.section-head{text-align:center;max-width:680px;margin:0 auto 42px;}
/* The sitewide p{text-align:justify} rule below matches <p> directly, which
   beats inherited centering from a container like .section-head -- so any
   centered subtitle/caption paragraph needs its own explicit center rule
   here, otherwise it would silently go justified/left instead of staying
   centered under its heading or icon. */
.section-head p{text-align:center;text-align-last:center;}
.section-tag{display:inline-block;color:var(--green-700);background:var(--green-100);padding:5px 16px;border-radius:20px;font-size:12.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:10px;}
.section-head h2{font-size:clamp(24px,3vw,34px);}

/* ---------------- Cards: services / blog / products ---------------- */
.grid{display:grid;gap:26px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.grid-3,.grid-4{grid-template-columns:1fr;}}

.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);transition:transform var(--transition),box-shadow var(--transition);position:relative;}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);}
.card-img{height:180px;overflow:hidden;background:var(--blue-100);}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.card:hover .card-img img{transform:scale(1.1);}
.card-body{padding:20px;}

/* Press feature cards (About page): source photos have very different
   aspect ratios (a portrait newspaper scan, wide landscape stills), so
   these use a fixed, equal-size box with object-fit:contain so nothing
   is ever cropped/cut off, instead of the cover-crop used elsewhere. */
.press-card-img{height:210px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;padding:14px;}
.press-card-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .5s ease;}
.card:hover .press-card-img img{transform:scale(1.06);}
@media(max-width:600px){.press-card-img{height:180px;padding:10px;}}
.card-body h3{font-size:17px;margin-bottom:8px;}
.card-body p{font-size:14px;margin-bottom:14px;}
.card-link{color:var(--green-700);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px;}
.card-link svg{transition:transform var(--transition);}
.card:hover .card-link svg{transform:translateX(5px);}
.card-ribbon{position:absolute;top:14px;right:14px;background:var(--red-600);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;}

/* ---------------- Topic grid (Our Services / Our Products photo tiles) ---------------- */
.topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 22px;}
@media(max-width:980px){.topic-grid{grid-template-columns:repeat(3,1fr);gap:22px 16px;}}
@media(max-width:600px){.topic-grid{grid-template-columns:repeat(2,1fr);gap:20px 14px;}}
.topic-tile{display:block;text-align:center;text-decoration:none;}
.topic-tile-photo{aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:var(--blue-100);box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition);}
.topic-tile-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.topic-tile:hover .topic-tile-photo,.topic-tile:active .topic-tile-photo{transform:translateY(-6px) scale(1.03);box-shadow:var(--shadow-lg);}
.topic-tile:hover .topic-tile-photo img{transform:scale(1.12);}
.topic-tile-caption{display:block;margin-top:12px;font-weight:700;font-size:14.5px;color:var(--green-700);transition:color var(--transition),transform var(--transition);}
.topic-tile:hover .topic-tile-caption,.topic-tile:active .topic-tile-caption,.topic-tile:focus-visible .topic-tile-caption{color:var(--green-500);transform:scale(1.06);}
.topic-tile-price{display:block;margin-top:4px;font-size:13px;font-weight:700;color:var(--blue-800);}
.topic-tile-price .price-old{margin-left:6px;}

/* Product tiles: quick "Reserve" button under the link, so an order can start
   straight from the grid (homepage + products hub) without opening the product page.
   The tile is a flex column stretched to the grid row's full height (grid's default
   align-items:stretch), so the Reserve button always sits flush with the card's
   bottom edge and lines up across a row, even when a product name or discount price
   wraps onto a different number of lines than its neighbours. */
.topic-tile-product{display:flex;flex-direction:column;height:100%;}
.topic-tile-product>a{display:block;text-decoration:none;color:inherit;}
.topic-tile-add-btn{display:block;width:100%;margin-top:10px;}
.topic-tile-product .topic-tile-add-btn{margin-top:auto;}

/* Inline enquiry form embedded directly in page content (blog posts, homepage) */
.inline-contact-box{background:var(--blue-50);border:1px solid var(--gray-200);border-radius:var(--radius);padding:26px;max-width:480px;margin:0 auto;}
.inline-contact-box h3{margin-bottom:6px;}

/* Homepage teaser row: always exactly 3 columns (mobile + desktop), colorful animated captions */
.topic-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 20px;}
@media(max-width:600px){.topic-grid-3{gap:12px 10px;}}
@media(max-width:420px){.topic-grid-3{gap:8px 7px;}}
.topic-grid-3 .topic-tile-photo{aspect-ratio:1/1;border-radius:16px;box-shadow:var(--shadow-sm);transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow var(--transition);animation:tileGlow 3.6s ease-in-out infinite;}
.topic-grid-3 .topic-tile:nth-child(2) .topic-tile-photo{animation-delay:.4s;}
.topic-grid-3 .topic-tile:nth-child(3) .topic-tile-photo{animation-delay:.8s;}
.topic-grid-3 .topic-tile:hover .topic-tile-photo,.topic-grid-3 .topic-tile:active .topic-tile-photo{transform:translateY(-8px) scale(1.05) rotate(-1deg);box-shadow:var(--shadow-lg);}
.topic-grid-3 .topic-tile-caption{margin-top:10px;font-size:14px;font-weight:800;letter-spacing:.2px;}
@media(max-width:420px){.topic-grid-3 .topic-tile-caption{font-size:11.5px;margin-top:6px;}}
.topic-grid-3 .topic-tile:nth-child(3n+1) .topic-tile-caption{color:var(--green-600);}
.topic-grid-3 .topic-tile:nth-child(3n+2) .topic-tile-caption{color:var(--blue-600);}
.topic-grid-3 .topic-tile:nth-child(3n+3) .topic-tile-caption{color:var(--red-600);}
.topic-grid-3 .topic-tile:nth-child(3n+1):hover .topic-tile-caption,.topic-grid-3 .topic-tile:nth-child(3n+1):active .topic-tile-caption{color:var(--green-500);}
.topic-grid-3 .topic-tile:nth-child(3n+2):hover .topic-tile-caption,.topic-grid-3 .topic-tile:nth-child(3n+2):active .topic-tile-caption{color:var(--blue-500);}
.topic-grid-3 .topic-tile:nth-child(3n+3):hover .topic-tile-caption,.topic-grid-3 .topic-tile:nth-child(3n+3):active .topic-tile-caption{color:#e0523f;}
.topic-grid-3 .topic-tile:hover .topic-tile-caption,.topic-grid-3 .topic-tile:active .topic-tile-caption{transform:scale(1.1);}
@keyframes tileGlow{0%,100%{box-shadow:var(--shadow-sm);}50%{box-shadow:0 10px 26px rgba(24,161,71,.18);}}

/* "View More" button under a capped homepage grid (centered, stands out from the plain outline btn) */
.view-more-wrap{display:flex;justify-content:center;margin-top:38px;}
.btn-view-more{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(120deg,var(--green-600),var(--green-500));color:#fff;font-weight:700;font-size:15px;padding:15px 36px;border-radius:50px;text-decoration:none;box-shadow:0 10px 28px rgba(24,161,71,.32);transition:transform var(--transition),box-shadow var(--transition);animation:viewMorePulse 2.8s ease-in-out infinite;}
.btn-view-more svg{transition:transform var(--transition);}
.btn-view-more:hover,.btn-view-more:focus-visible{transform:translateY(-4px) scale(1.05);box-shadow:0 16px 38px rgba(24,161,71,.45);animation-play-state:paused;}
.btn-view-more:hover svg,.btn-view-more:focus-visible svg{transform:translateX(6px);}
@keyframes viewMorePulse{0%,100%{box-shadow:0 10px 28px rgba(24,161,71,.32);}50%{box-shadow:0 10px 32px rgba(24,161,71,.5);}}

/* Product card specific */
.product-card .price-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.price-now{font-size:18px;font-weight:800;color:var(--green-700);}
.price-old{font-size:13px;color:var(--gray-500);text-decoration:line-through;}
.discount-badge{background:var(--red-600);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;}
.stock-badge{font-size:12px;font-weight:600;}
.stock-badge.in{color:var(--green-700);}
.stock-badge.out{color:var(--red-600);}

/* ---------------- About / stats / why-us ---------------- */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center;}
/* Grid items default to min-width:auto, which lets a max-content child (the
   awards mini-carousel's marquee track, added below) grow the whole column
   -- and the page -- past the viewport instead of being clipped by its own
   overflow:hidden. min-width:0 here is what makes that clipping actually
   take effect. */
.about-grid > *{min-width:0;}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;}}
.about-grid img{width:100%;height:auto;max-height:420px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-md);}
@media(max-width:900px){.about-grid img{max-height:280px;}}
.about-grid-specialist{grid-template-columns:.85fr 1.15fr;}
@media(max-width:900px){.about-grid-specialist{grid-template-columns:1fr;}}
.about-grid-circle img{border-radius:50%;aspect-ratio:1/1;max-height:none;width:min(100%,380px);margin:0 auto;display:block;border:6px solid var(--green-500);}
@media(max-width:900px){.about-grid-circle img{width:min(70%,260px);}}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media(max-width:980px){.why-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.why-grid{grid-template-columns:1fr;}}
.why-card{text-align:center;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:30px 20px;transition:transform var(--transition),box-shadow var(--transition);}
.why-card p{text-align:center;text-align-last:center;}
.why-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--green-500);}
.why-icon{width:56px;height:56px;border-radius:50%;background:var(--green-100);color:var(--green-700);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:26px;}

/* ---------------- Credential highlight (About Us -- Meet the CEO) ---------------- */
.credential-highlight{display:flex;align-items:flex-start;gap:16px;background:var(--blue-50);border:1px solid var(--blue-100);border-left:4px solid var(--green-600);border-radius:var(--radius-sm);padding:18px 20px;margin:22px 0;transition:box-shadow var(--transition),transform var(--transition);}
.credential-highlight:hover{box-shadow:var(--shadow-sm);transform:translateX(2px);}
.credential-highlight-icon{flex:none;width:44px;height:44px;border-radius:50%;background:var(--green-100);color:var(--green-700);display:flex;align-items:center;justify-content:center;font-size:22px;}
.credential-highlight strong{display:block;color:var(--blue-900);font-size:15.5px;margin-bottom:4px;}
.credential-highlight p{margin:0;font-size:14px;color:var(--gray-700);}
[dir="rtl"] .credential-highlight{border-left:1px solid var(--blue-100);border-right:4px solid var(--green-600);}

/* ---------------- How It Works: 4-step flow with a walking-footprint relay
   animation between each pair of steps. Desktop: paused by default, plays
   only while the cursor is over the section (the pointer itself also swaps
   to a small footprint icon). Mobile: no hover exists, so it auto-plays.
   The three connectors take turns "walking" using one shared animation
   duration with staggered start delays -- step1->2, then step2->3, then
   step3->4, looping forever at a medium pace. ---------------- */
.hiw-node-badge{position:relative;width:104px;height:104px;border-radius:50%;background:var(--green-100);color:var(--green-700);display:flex;align-items:center;justify-content:center;margin:0 auto;font-size:48px;box-shadow:0 0 0 8px #fff;transition:transform .3s ease,background .3s ease,color .3s ease;}
.hiw-node-num{position:absolute;top:-8px;right:-8px;width:34px;height:34px;border-radius:50%;background:var(--blue-800);color:#fff;font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px #fff;}
.hiw-cnode .hiw-node-badge{width:92px;height:92px;font-size:42px;}
.hiw-cnode .hiw-node-num{width:30px;height:30px;font-size:14px;}

/* ---- Desktop: a winding path connects all 4 steps in one row, and a pair
   of footprints walk the full length of that path on hover (using CSS
   motion-path, so they follow the exact curve of the line, feet oriented
   to the direction of travel automatically). Plays automatically on load,
   on a continuous loop; the pointer becomes a small footprint while over
   the section. ---------- */
.hiw-wave-wrap{display:block;margin-top:26px;cursor:url('../images/icons/footprint-cursor.png') 14 55,pointer;}
.hiw-wave{position:relative;width:100%;max-width:900px;margin:0 auto;aspect-ratio:900/300;}
.hiw-wave-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.hiw-wave-line{fill:none;stroke:var(--green-300,#bfe6cb);stroke-width:4;stroke-dasharray:1 14;stroke-linecap:round;}
/* The sweep animation itself only runs once main.js adds .hiw-playing (when
   this section actually scrolls into view) -- see the shared keyframe note
   below. Until then every footprint just sits at opacity:0 (inherited from
   .hiw-fp), so the very first thing a visitor sees, every time they reach
   this section, is the full empty path lighting up from step 1 -- never a
   segment already mid-way through, which is what happened when the 8s loop
   simply ran from page load regardless of scroll position. */
.hiw-fp{opacity:0;transform-origin:0 0;fill:var(--green-700);}
.hiw-wave-wrap.hiw-playing .hiw-fp{animation:hiwFpPulse 8s ease-in-out infinite;}
/* One shared pulse shape for every footprint, in both the desktop wave and
   the mobile circle: invisible, then a quick stamp-in, a brief hold, and a
   stamp-out -- all within the first 16% of its own animation duration. The
   footprint stays invisible for the rest of the cycle (16%-100%). Combined
   with a per-footprint animation-delay, this makes each *step group* light
   up and fully fade out in turn (1->2, then 2->3, then 3->4) rather than
   the whole path being lit at once, with a brief empty pause before the
   next full loop starts back at step 1. */
@keyframes hiwFpPulse{
  0%{opacity:0;transform:scale(.5);}
  3%{opacity:1;transform:scale(1.15);}
  9%{opacity:1;transform:scale(1);}
  13%{opacity:1;transform:scale(1);}
  16%{opacity:0;transform:scale(.85);}
  100%{opacity:0;transform:scale(.85);}
}
.hiw-node{position:absolute;transform:translate(-50%,-50%);z-index:2;}
.hiw-node1{left:12.8%;top:68.3%}
.hiw-node2{left:37.2%;top:23.3%}
.hiw-node3{left:62.8%;top:68.3%}
.hiw-node4{left:87.2%;top:23.3%}
.hiw-wave-labels{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px;text-align:center;}
.hiw-wave-labels h4{font-size:15px;margin-bottom:6px;}
.hiw-wave-labels p{font-size:13.5px;color:var(--gray-600);line-height:1.55;text-align:center;text-align-last:center;}

/* ---- Mobile: same idea, bent into a loop -- 4 steps arranged around a
   circle, connected by a circular path, footprints auto-walk around it
   continuously (no hover on touch devices). Titles/descriptions listed
   underneath, numbered to match the badges on the circle. ------------- */
.hiw-circle-wrap{display:none;}
.hiw-circle{position:relative;width:320px;height:320px;max-width:100%;margin:16px auto 28px;}
.hiw-circle-svg{position:absolute;inset:0;width:100%;height:100%;}
.hiw-circle-line{fill:none;stroke:var(--green-300,#bfe6cb);stroke-width:4;stroke-dasharray:1 12;}
.hiw-fp-circle{opacity:0;transform-origin:0 0;fill:var(--green-700);}
.hiw-circle-wrap.hiw-playing .hiw-fp-circle{animation:hiwFpPulse 8s ease-in-out infinite;}
.hiw-cnode{position:absolute;transform:translate(-50%,-50%);}
.hiw-cnode1{left:50%;top:8.3%}
.hiw-cnode2{left:91.7%;top:50%}
.hiw-cnode3{left:50%;top:91.7%}
.hiw-cnode4{left:8.3%;top:50%}
.hiw-circle-labels{display:grid;grid-template-columns:1fr;gap:16px;}
.hiw-circle-item{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:16px;}
.hiw-circle-item .hiw-node-badge{width:52px;height:52px;font-size:24px;flex:0 0 52px;box-shadow:none;}
.hiw-circle-item .hiw-node-num{width:22px;height:22px;font-size:11px;top:-6px;right:-6px;}
.hiw-circle-item h4{font-size:15px;margin-bottom:4px;}
.hiw-circle-item p{font-size:13.5px;color:var(--gray-600);line-height:1.5;}

@media(max-width:820px){
  .hiw-wave-wrap{display:none;}
  .hiw-circle-wrap{display:block;}
}

/* ---------------- Patient testimonials: right-to-left auto-scrolling
   carousel, reusing the same marquee technique as the services/products
   strips (seamless loop via duplicated cards + translateX -50%). Pauses
   on hover/touch like the other marquees; runs at a slower, calmer pace
   since these are full sentences, not short pills. ---------------- */
/* Testimonials: exactly one card per testimonial exists in the page -- no
   duplicated content. One slide is "active" (shown) at a time; every few
   seconds it slides out to the left while the next slides in from the
   right (JS in testimonial-lightbox.js). All slides share the same grid
   cell so the container's height auto-fits the tallest one without a
   guessed min-height. With only one testimonial the JS does nothing, so
   it just sits there, shown once. */
.testi-slider{position:relative;max-width:640px;margin:0 auto;display:grid;overflow:hidden;}
/* align-self:stretch (the grid default) so every slide fills the row's full
   height -- which is already sized to the tallest testimonial -- rather
   than sitting only as tall as its own text. Combined with .testi-card
   below, this is what keeps the View button at the exact same height on
   every testimonial, short or long, on mobile and desktop alike. */
/* translateX(100%)/(-100%) -- a full card-width, not a small nudge -- so the
   next testimonial genuinely slides in from off-screen right and the
   previous one slides fully away to the left: a real moving carousel, at a
   medium (not rushed, not sluggish) pace. */
.testi-slide{grid-column:1;grid-row:1;opacity:0;transform:translateX(100%);transition:opacity .9s ease,transform .9s ease;pointer-events:none;align-self:stretch;}
.testi-slide.active{opacity:1;transform:translateX(0);pointer-events:auto;}
.testi-slide.leaving{opacity:0;transform:translateX(-100%);}
/* Flex column filling the slide's full height: the quote/name sit in their
   natural flow at the top, and margin-top:auto on the View button pins it
   to the bottom edge of the card every time -- so the button lines up at
   the same height across all testimonials regardless of quote length. */
.testi-card{display:flex;flex-direction:column;align-items:center;height:100%;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-sm);text-align:center;}
.testi-stars{color:#f5a623;font-size:18px;margin-bottom:12px;letter-spacing:2px;}
.testi-quote{font-style:italic;color:var(--gray-700);font-size:16px;line-height:1.7;text-align:center;text-align-last:center;}
.testi-name{font-weight:700;color:var(--blue-800);margin-top:16px;font-size:14.5px;}
.testi-view-btn{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding:7px 18px;background:none;border:1.5px solid var(--green-600);color:var(--green-700);font-weight:700;font-size:12.5px;border-radius:30px;cursor:pointer;transition:background var(--transition),color var(--transition),transform var(--transition);}
.testi-view-btn:hover,.testi-view-btn:focus-visible{background:var(--green-600);color:#fff;transform:translateY(-2px);}
/* One shared progress bar, not one dot per testimonial -- stays exactly
   the same width whether there are 2 reviews or 200. It fills over each
   review's 4s on-screen time and resets as the next one slides in
   (JS in testimonial-lightbox.js); freezes in place while hovered or
   while the popup is open, same as the slide itself. */
.testi-progress{position:relative;max-width:200px;margin:34px auto 0;height:4px;background:var(--gray-200);border-radius:4px;}
/* Positioned (not normal block flow) and anchored explicitly per direction,
   rather than relying on the browser's own RTL block-layout rules -- the
   Urdu marquee strips taught us those aren't safe to assume, so here both
   directions are spelled out. English: anchored left, fills left to right.
   Urdu: anchored right, fills right to left, so it still reads "forward"
   in that language's own direction. */
.testi-progress-fill{position:absolute;top:0;left:0;height:100%;width:0%;background:var(--green-600);border-radius:4px;}
.testi-progress-fill.running{animation:testiProgressFill 4s linear forwards;}
.testi-progress-fill.paused{animation-play-state:paused;}
@keyframes testiProgressFill{from{width:0%;}to{width:100%;}}
[dir="rtl"] .testi-progress-fill{left:auto;right:0;}
/* A tiny footprint walks along the bar in step with the fill -- the same
   shape used in the How It Works animation, at its natural (unrotated)
   orientation. In English it travels left to right, toes leading. In Urdu
   it travels right to left instead (matching the fill above), but keeps
   its toes pointing the same way (right) rather than mirroring -- this is
   a deliberate choice, not left over from the English version. Runs on
   the exact same timing/pause as the fill (both driven together in
   testimonial-lightbox.js) so the foot always sits at the fill's leading
   edge. */
.testi-progress-foot{position:absolute;top:50%;left:0%;width:20px;height:12px;transform:translate(-50%,-50%);fill:var(--green-700);pointer-events:none;}
.testi-progress-foot.running{animation:testiProgressFoot 4s linear forwards;}
.testi-progress-foot.paused{animation-play-state:paused;}
@keyframes testiProgressFoot{from{left:0%;}to{left:100%;}}
[dir="rtl"] .testi-progress-foot{left:auto;right:0%;transform:translate(50%,-50%);}
[dir="rtl"] .testi-progress-foot.running{animation:testiProgressFootRtl 4s linear forwards;}
@keyframes testiProgressFootRtl{from{right:0%;}to{right:100%;}}
@media(max-width:600px){.testi-card{padding:24px 20px;}.testi-quote{font-size:15px;}}

/* Testimonial "View" popup: full review + optional before/after photos */
.testi-modal-box{max-width:560px;}
.testi-modal-stars{color:#f5a623;font-size:18px;letter-spacing:2px;margin:0 30px 10px 0;}
.testi-modal-quote{font-style:italic;color:var(--gray-700);font-size:15.5px;line-height:1.65;}
.testi-modal-name{font-weight:700;color:var(--blue-800);margin-top:10px;font-size:14.5px;}
.testi-modal-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;}
.testi-modal-photo{text-align:center;}
.testi-modal-photo-tag{display:inline-block;font-size:12px;font-weight:700;color:var(--green-700);background:var(--green-100);padding:4px 12px;border-radius:20px;margin-bottom:8px;}
.testi-modal-photo img{width:100%;height:180px;object-fit:cover;border-radius:10px;background:var(--gray-100);display:block;}
@media(max-width:600px){.testi-modal-photos{grid-template-columns:1fr;}.testi-modal-photo img{height:220px;}}
/* Second close button at the bottom of the popup, in addition to the X at
   the top right -- both close the same way. */
.testi-modal-close-bottom{display:block;width:100%;text-align:center;margin-top:24px;}

/* ---------------- Forms / modal ---------------- */
.form-group{margin-bottom:16px;text-align:left;}
.form-group label{display:block;font-weight:600;font-size:13.5px;margin-bottom:6px;color:var(--blue-900);}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);
  font-family:var(--font-main);font-size:14.5px;transition:border-color var(--transition),box-shadow var(--transition);background:#fff;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 4px rgba(34,192,90,.15);}
.hp-field{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;opacity:0;}
.form-feedback{margin-top:12px;font-size:13.5px;font-weight:600;min-height:18px;}
.form-feedback.success{color:var(--green-700);}
.form-feedback.error{color:var(--red-600);}

.modal-overlay{position:fixed;inset:0;background:rgba(10,26,50,.6);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:2000;opacity:0;visibility:hidden;transition:opacity var(--transition),visibility var(--transition);padding:20px;}
.modal-overlay.open{opacity:1;visibility:visible;}
.modal-box{background:#fff;border-radius:20px;padding:32px;max-width:460px;width:100%;max-height:90vh;overflow-y:auto;transform:translateY(30px) scale(.95);transition:transform var(--transition);position:relative;box-shadow:var(--shadow-lg);}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1);}
.modal-close{position:absolute;top:14px;right:16px;background:var(--gray-100);border:none;width:34px;height:34px;border-radius:50%;font-size:20px;line-height:1;transition:background var(--transition),transform var(--transition);}
.modal-close:hover{background:var(--red-600);color:#fff;transform:rotate(90deg);}
.modal-sub{font-size:13.5px;margin-bottom:18px;}

/* "View Details" button on the press-feature cards + the full-size image lightbox it opens */
.press-view-details-btn{display:inline-flex;align-items:center;gap:7px;margin-top:12px;background:none;border:1.5px solid var(--green-600);color:var(--green-700);font-weight:700;font-size:13px;padding:9px 18px;border-radius:30px;cursor:pointer;transition:background var(--transition),color var(--transition),transform var(--transition);}
.press-view-details-btn:hover,.press-view-details-btn:focus-visible{background:var(--green-600);color:#fff;transform:translateY(-2px);}
.lightbox-box{max-width:640px;padding:20px;}
.lightbox-title{font-size:16px;margin:0 30px 14px 0;color:var(--blue-900);}
.lightbox-img-wrap{max-height:78vh;overflow:auto;border-radius:10px;background:var(--gray-100);text-align:center;}
.lightbox-img-wrap img{width:100%;height:auto;display:block;}
@media(max-width:600px){.lightbox-box{padding:16px;max-width:94vw;}.lightbox-title{font-size:14.5px;margin-right:26px;}.lightbox-img-wrap{max-height:74vh;}}

/* ---------------- Floating action buttons ---------------- */
.fab-stack{position:fixed;right:22px;bottom:22px;display:flex;flex-direction:column;gap:14px;z-index:900;transition:opacity var(--transition),visibility var(--transition);}
body.nav-open .fab-stack{opacity:0;visibility:hidden;}
.fab{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);transition:transform var(--transition),box-shadow var(--transition);border:none;}
.fab-whatsapp{background:var(--green-500);color:#fff;animation:pulseFab 2.2s ease-in-out infinite;}
.fab-contact{background:var(--blue-700);color:#fff;}
.fab-top{background:#fff;color:var(--blue-800);border:1.5px solid var(--gray-200);opacity:0;pointer-events:none;}
.fab-top.show{opacity:1;pointer-events:auto;}
.fab:hover{transform:translateY(-5px) scale(1.08);box-shadow:var(--shadow-lg);}
@keyframes pulseFab{0%,100%{box-shadow:0 0 0 0 rgba(34,192,90,.5);}50%{box-shadow:0 0 0 12px rgba(34,192,90,0);}}

/* ---------------- Footer ---------------- */
.site-footer{background:var(--blue-900);color:#f2f7fd;padding-top:56px;}
.site-footer p{color:#f2f7fd;}
.site-footer p a:hover{color:var(--green-500);}
.footer-col ul li a{color:#f2f7fd;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1);}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-col h4{color:#fff;font-size:15px;margin-bottom:16px;}
.footer-col ul li{margin-bottom:9px;}
.footer-col ul li a{transition:color var(--transition),padding var(--transition);display:inline-block;}
.footer-col ul li a:hover{color:var(--green-500);padding-left:5px;}
.footer-logo{height:50px;margin-bottom:14px;border-radius:8px;}
.footer-social{display:flex;gap:12px;margin-top:14px;}
.footer-social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:background var(--transition),transform var(--transition);}
.footer-social a:hover{background:var(--green-600);transform:translateY(-3px);}
.footer-address{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;}
.footer-bottom{padding:18px 0;}
.footer-bottom-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:12.5px;color:#dbe7f5;}
.site-footer .payment-disclaimer{color:#ffe0d8;font-weight:600;max-width:520px;text-align:right;}
@media(max-width:700px){.payment-disclaimer{text-align:left;}}

/* ---------------- Utility animation classes (JS adds .in-view) ---------------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}
.reveal.delay-1{transition-delay:.1s;}
.reveal.delay-2{transition-delay:.2s;}
.reveal.delay-3{transition-delay:.3s;}
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}

/* ---------------- Page header (inner pages) ---------------- */
.page-header{background:linear-gradient(120deg,var(--blue-900),var(--blue-600));padding:70px 0 60px;text-align:center;position:relative;overflow:hidden;}
.page-header h1{color:#fff;margin-bottom:8px;font-size:clamp(26px,3.6vw,38px);}
.page-header p{color:#d6e6f9;max-width:640px;margin:0 auto;text-align:center;text-align-last:center;}
.breadcrumb{display:flex;gap:8px;justify-content:center;margin-bottom:14px;font-size:13px;color:#bcd4ef;}
.breadcrumb a:hover{color:var(--green-500);}

/* ---------------- Detail pages (service / blog) ---------------- */
.detail-layout{display:grid;grid-template-columns:2.1fr 1fr;gap:44px;align-items:start;}
@media(max-width:900px){.detail-layout{grid-template-columns:1fr;}}
.detail-content{background:#fff;}
.detail-content img.hero-img{border-radius:var(--radius);margin-bottom:26px;box-shadow:var(--shadow-sm);}
.detail-content h2{margin-top:34px;font-size:22px;}
.detail-content h3{margin-top:26px;font-size:18px;color:var(--blue-700);}
.detail-content p{font-size:15.5px;}
.sidebar-box{background:var(--blue-50);border:1px solid var(--gray-200);border-radius:var(--radius);padding:24px;margin-bottom:24px;position:sticky;top:100px;}
.sidebar-box h4{font-size:15px;margin-bottom:14px;}
.sidebar-list li a{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--gray-200);font-size:14px;transition:color var(--transition),padding var(--transition);}
.sidebar-list li:last-child a{border-bottom:none;}
.sidebar-list li a:hover{color:var(--green-700);padding-left:6px;}
.cta-box{background:var(--green-600);color:#fff;border-radius:var(--radius);padding:26px;text-align:center;}
.cta-box p{text-align:center;text-align-last:center;}
.cta-box h4{color:#fff;margin-bottom:10px;}
.cta-box .btn{background:#fff;color:var(--green-700);margin-top:10px;}
.cta-box .btn:hover{background:var(--blue-900);color:#fff;}

/* ---------------- FAQ accordion (service pages) ---------------- */
.faq-section{padding-top:0;}
.faq-list{display:flex;flex-direction:column;gap:12px;}
.faq-item{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:16px 20px;}
.faq-item summary{font-weight:700;font-size:15.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--blue-900);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';font-size:22px;font-weight:400;color:var(--green-600);flex-shrink:0;transition:transform var(--transition);}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{margin-top:12px;color:var(--gray-700);font-size:14.5px;line-height:1.7;}

/* ---------------- Category filter (products page) ---------------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:34px;}
.filter-btn{padding:9px 18px;border-radius:30px;border:1.5px solid var(--gray-200);background:#fff;font-weight:600;font-size:13.5px;color:var(--blue-800);transition:all var(--transition);}
.filter-btn.active,.filter-btn:hover{background:var(--green-600);border-color:var(--green-600);color:#fff;}

/* ---------------- Misc ---------------- */
.text-center{text-align:center;}
.mt-2{margin-top:2rem;}
.badge-pkr{display:inline-flex;align-items:center;gap:4px;background:var(--blue-100);color:var(--blue-700);padding:2px 10px;border-radius:16px;font-size:12px;font-weight:700;}
.alert{padding:14px 18px;border-radius:var(--radius-sm);margin-bottom:20px;font-size:14px;font-weight:600;}
.alert-success{background:var(--green-100);color:var(--green-700);border:1px solid var(--green-500);}
.alert-error{background:#fdeceb;color:var(--red-600);border:1px solid var(--red-600);}
.alert-warning{background:#fff6e5;color:#a05a00;border:1px solid #e0a530;}

.video-frame{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);background:#000;}
.video-frame video{width:100%;display:block;}

/* ---------------- Cart bar / drawer / checkout ---------------- */
.cart-bar{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);background:var(--blue-900);color:#fff;padding:14px 22px;border-radius:50px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:16px;z-index:950;transition:transform var(--transition);}
.cart-bar.show{transform:translate(-50%,0);}
.cart-bar-count{background:var(--green-600);border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.cart-bar button{background:var(--green-600);color:#fff;border:none;padding:8px 18px;border-radius:30px;font-weight:700;font-size:13px;transition:background var(--transition);}
.cart-bar button:hover{background:var(--green-700);}

.drawer-overlay{position:fixed;inset:0;background:rgba(10,26,50,.55);z-index:2100;opacity:0;visibility:hidden;transition:opacity var(--transition),visibility var(--transition);}
.drawer-overlay.open{opacity:1;visibility:visible;}
.drawer-panel{position:absolute;top:0;right:0;height:100%;width:100%;max-width:420px;background:#fff;padding:26px;overflow-y:auto;transform:translateX(100%);transition:transform var(--transition);}
.drawer-overlay.open .drawer-panel{transform:translateX(0);}
body.rtl .drawer-panel{right:auto;left:0;transform:translateX(-100%);}
body.rtl .drawer-overlay.open .drawer-panel{transform:translateX(0);}
.drawer-close{position:absolute;top:18px;right:20px;background:var(--gray-100);border:none;width:34px;height:34px;border-radius:50%;font-size:20px;}
.cart-item{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--gray-200);}
.cart-item-info{flex:1;display:flex;flex-direction:column;font-size:13.5px;}
.cart-qty-input{width:56px;padding:6px;border:1px solid var(--gray-200);border-radius:6px;text-align:center;}
.cart-remove-btn{background:none;border:none;color:var(--red-600);font-size:20px;}
.cart-drawer-footer{margin-top:20px;padding-top:16px;border-top:2px solid var(--gray-200);}
.cart-total-row{display:flex;justify-content:space-between;font-weight:700;font-size:16px;margin-bottom:14px;}
.qty-stepper{display:inline-flex;align-items:center;border:1.5px solid var(--gray-200);border-radius:30px;overflow:hidden;}
.qty-stepper button{width:32px;height:32px;background:var(--gray-100);border:none;font-size:16px;}
.qty-stepper input{width:42px;text-align:center;border:none;font-size:14px;}

/* Mobile nav */
@media(max-width:980px){
  .hamburger{display:flex;}
  .header-cta{display:none;}
  .main-nav{position:fixed;top:0;right:-100%;width:78%;max-width:340px;height:100vh;background:#fff;box-shadow:var(--shadow-lg);padding:90px 24px 24px;transition:right .35s ease;overflow-y:auto;z-index:600;}
  .main-nav.open{right:0;}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:2px;}
  .nav-item::after{display:none;}
  .main-nav .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;display:none;padding-left:14px;}
  /* min-width made sense for the floating desktop panel; here the panel
     is just part of the page's own column, so force it back to the
     column's width instead of letting it push past the phone screen's
     edge the way the fan-slider cards once did. */
  .submenu-mega{min-width:0;padding:6px 0;}
  .submenu::before{display:none;}
  .nav-item.has-children.open .submenu{display:block;animation:submenuPanelIn .35s ease;}
  @keyframes submenuPanelIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
  .nav-item.has-children.open .submenu li{animation:submenuRowIn .4s cubic-bezier(.4,0,.2,1) backwards;animation-delay:calc(var(--i,0) * 35ms);}
  .submenu li a{padding:11px 10px;border-left:2px solid transparent;border-radius:6px;}
  /* Devices without real hover (almost all phones) get the same color +
     light-sweep + glow on tap instead of on hover. */
  .submenu li a:active,
  .submenu li a:hover{background:var(--blue-100);color:var(--blue-700);border-left-color:var(--green-500);padding-left:14px;}
  .submenu li a:active::before,
  .submenu li a:hover::before{transform:translateX(130%);}
  .submenu li a:active .submenu-dot,
  .submenu li a:hover .submenu-dot{box-shadow:0 0 0 5px rgba(34,192,90,.2),0 0 10px rgba(34,192,90,.7);transform:scale(1.2);}
  .nav-link{justify-content:space-between;}
}

/* ==================================================================
   Curved photo fan-slider -- sits above "Our Services" and above
   "Our Products" on the homepage. Server-rendered real <a> links to
   each service/product page; JS (fan-slider.js) only repositions the
   existing cards in 3D, it never builds them, so the page still works
   (as a plain row of photo links) with JS disabled.
   ================================================================== */
.pic-fan-section{padding-top:36px;}
.pic-fan-section .container{padding-bottom:4px;}
/* Clip to the section's own width (the same column the rest of the page's
   content sits in) instead of letting the fanned-out side cards bleed past
   it -- without this, cards past the edge were only hidden by the page's
   global overflow-x:hidden, which crops them at the true edge of the
   screen with no margin, flush against it. Clipping here instead, plus a
   soft edge fade, keeps the same page aligned with the rest of the site
   and turns the cut into an intentional fade rather than a hard slice. */
.fan-stage-outer{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);}
.fan-stage{position:relative;height:300px;perspective:1500px;margin:0 auto;max-width:1000px;touch-action:pan-y;cursor:grab;}
.fan-stage.grabbing{cursor:grabbing;}
/* Force ltr regardless of page language -- the same reason the
   testimonial marquee and progress bar force explicit direction: the
   browser's RTL box-model rules are not reliable for JS that positions
   things in plain left-to-right pixel math via transforms. The photos
   still read correctly either way since this only affects layout, not
   text. */
.fan-track{position:absolute;inset:0;transform-style:preserve-3d;direction:ltr;}
.fan-card{position:absolute;top:50%;left:50%;width:160px;aspect-ratio:3/4;margin:-104px 0 0 -80px;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-md);background:var(--gray-200);will-change:transform,opacity;backface-visibility:hidden;display:block;}
.fan-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none;user-select:none;}
.fan-card-veil{position:absolute;inset:0;background:var(--blue-900);opacity:0;transition:opacity .25s ease;}
.fan-card.is-center{cursor:pointer;}
.fan-card.is-center .fan-card-veil{opacity:0;}
.fan-card:not(.is-center):hover .fan-card-veil{opacity:.14;}
.fan-card-label{position:absolute;left:0;right:0;bottom:0;padding:11px 12px 9px;font-size:12.5px;font-weight:700;color:#fff;background:linear-gradient(to top,rgba(10,26,50,.88),transparent);opacity:0;transition:opacity .25s ease;text-align:center;}
.fan-card.is-center .fan-card-label{opacity:1;}
.fan-hint{text-align:center;font-size:12.5px;color:var(--gray-500);margin-top:14px;}

@media(max-width:620px){
  .fan-stage-outer{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);}
  .fan-stage{height:220px;}
  .fan-card{width:110px;margin:-73px 0 0 -55px;}
  .fan-card-label{font-size:11px;padding:8px 8px 7px;}
}

/* ==================================================================
   Awards & Achievements -- animated right-to-left logo carousel.
   Full-size version lives on the About Us page; a smaller "mini"
   version of the same markup/track is reused on the homepage "About
   Roshan's Foot Care" snippet. Managed by the CEO from
   Admin -> Awards & Achievements.
   ================================================================== */
.awards-section{position:relative;padding:56px 0;overflow:hidden;background:linear-gradient(135deg,var(--blue-50) 0%,#eef8f1 55%,var(--blue-50) 100%);}
.awards-section::before{content:'';position:absolute;inset:0;background:
    radial-gradient(circle at 12% 20%,rgba(34,192,90,.12),transparent 40%),
    radial-gradient(circle at 88% 78%,rgba(20,90,180,.10),transparent 42%);
  pointer-events:none;}
.awards-head{position:relative;text-align:center;max-width:640px;margin:0 auto 30px;}
.awards-head p{text-align:center;text-align-last:center;}
.awards-head .section-tag{background:linear-gradient(90deg,var(--green-500),var(--blue-600));color:#fff;}

.awards-marquee-row{position:relative;overflow:hidden;direction:ltr;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.awards-marquee-track{display:flex;align-items:stretch;gap:22px;width:max-content;direction:ltr;animation:scrollRTL 34s linear infinite;}
.awards-marquee-row:hover .awards-marquee-track{animation-play-state:paused;}

.award-card{flex:none;width:176px;background:#fff;border-radius:16px;padding:18px 14px 16px;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;text-decoration:none;position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s ease,border-color .35s ease;}
.award-card::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 35%,rgba(34,192,90,.16) 50%,transparent 65%);transform:translateX(-140%);transition:transform .8s cubic-bezier(.4,0,.2,1);pointer-events:none;}
.award-card:hover{transform:translateY(-8px) scale(1.035);box-shadow:0 18px 34px -14px rgba(15,60,40,.28);border-color:var(--green-500);}
.award-card:hover::before{transform:translateX(140%);}
.award-logo-frame{width:100%;height:92px;display:flex;align-items:center;justify-content:center;background:#f7faf8;border-radius:10px;padding:8px;}
.award-logo-frame img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.06));}
.award-name{font-size:12.5px;font-weight:800;line-height:1.3;letter-spacing:.1px;transition:letter-spacing .35s ease;}
.award-card:hover .award-name{letter-spacing:.3px;}

.awards-note{position:relative;text-align:center;color:var(--gray-500);font-size:12.5px;margin-top:18px;}

/* ---- Mini/preview version used on the homepage About snippet ---- */
.awards-mini-wrap{margin:0 0 20px;width:100%;min-width:0;}
.awards-mini-label{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--green-700);margin:0 0 8px;display:flex;align-items:center;gap:6px;}
.awards-mini-label::before{content:'🏆';font-size:12px;}
.awards-mini-row{position:relative;overflow:hidden;direction:ltr;padding:2px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.awards-mini-track{display:flex;align-items:stretch;gap:12px;width:max-content;direction:ltr;animation:scrollRTL 26s linear infinite;}
.awards-mini-row:hover .awards-mini-track{animation-play-state:paused;}
.award-mini-card{flex:none;width:82px;background:#fff;border-radius:10px;padding:8px 6px 7px;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;}
.award-mini-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--green-500);}
.award-mini-logo{width:100%;height:36px;display:flex;align-items:center;justify-content:center;background:#f7faf8;border-radius:6px;}
.award-mini-logo img{max-width:100%;max-height:100%;object-fit:contain;}
.award-mini-name{font-size:9px;font-weight:800;line-height:1.2;}

@media(max-width:620px){
  .awards-section{padding:42px 0;}
  .award-card{width:132px;padding:14px 10px 12px;border-radius:13px;}
  .award-logo-frame{height:70px;}
  .award-name{font-size:11px;}
  .awards-marquee-track{gap:14px;animation-duration:26s;}
  .award-mini-card{width:70px;}
  .award-mini-logo{height:30px;}
  .award-mini-name{font-size:8.5px;}
}

@media (prefers-reduced-motion: reduce){
  .awards-marquee-track,.awards-mini-track{animation:none;}
}

/* ---------------------------------------------------------------------
   Services page: "Featured Care" 3D rotating wheel carousel.
   One card fronts the wheel while the rest recede in perspective and
   continuously cycle around - built from six evenly-spaced copies of the
   same animation, staggered with negative delays (no JS needed).
--------------------------------------------------------------------- */
.featured-wheel-stage{position:relative;height:340px;perspective:1200px;margin-top:8px;}
.featured-wheel-floor{position:absolute;left:50%;bottom:34px;width:460px;max-width:70%;height:28px;transform:translateX(-50%);background:radial-gradient(ellipse at center, rgba(10,42,77,.14), transparent 70%);}
.featured-wheel-ring{position:absolute;left:50%;top:50%;width:0;height:0;}
.featured-wheel-card{position:absolute;left:-100px;top:-122px;width:200px;height:244px;border-radius:18px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;box-shadow:var(--shadow-lg);transform-style:preserve-3d;animation:featuredWheel 20s linear infinite;text-decoration:none;overflow:hidden;background:var(--blue-800);}
.featured-wheel-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .6s ease;}
.featured-wheel-card:hover .featured-wheel-photo{transform:scale(1.08);}
.featured-wheel-card::after{content:"";position:absolute;inset:0;border-radius:18px;background:linear-gradient(180deg,rgba(6,24,44,.05) 0%,rgba(6,24,44,.35) 45%,rgba(6,24,44,.88) 100%);}
.featured-wheel-card b{position:relative;z-index:1;font-size:14.5px;font-weight:700;line-height:1.3;text-shadow:0 1px 6px rgba(0,0,0,.35);}
.featured-wheel-icon{position:relative;z-index:1;width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.26);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
.featured-wheel-icon svg{width:17px;height:17px;}
.featured-wheel-card.fw-1{animation-delay:0s;}
.featured-wheel-card.fw-2{animation-delay:-3.33s;}
.featured-wheel-card.fw-3{animation-delay:-6.66s;}
.featured-wheel-card.fw-4{animation-delay:-10s;}
.featured-wheel-card.fw-5{animation-delay:-13.33s;}
.featured-wheel-card.fw-6{animation-delay:-16.66s;}
@keyframes featuredWheel{
  0%,3%{transform:translate3d(0,0,130px) rotateY(0deg) scale(1);opacity:1;z-index:6;}
  16.66%{transform:translate3d(200px,10px,30px) rotateY(-38deg) scale(.8);opacity:.92;z-index:5;}
  33.33%{transform:translate3d(320px,18px,-70px) rotateY(-58deg) scale(.6);opacity:.5;z-index:3;}
  46%,54%{transform:translate3d(0,24px,-200px) rotateY(180deg) scale(.46);opacity:0;z-index:1;}
  66.66%{transform:translate3d(-320px,18px,-70px) rotateY(58deg) scale(.6);opacity:.5;z-index:3;}
  83.33%{transform:translate3d(-200px,10px,30px) rotateY(38deg) scale(.8);opacity:.92;z-index:5;}
  97%,100%{transform:translate3d(0,0,130px) rotateY(0deg) scale(1);opacity:1;z-index:6;}
}
.featured-wheel-stage:hover .featured-wheel-card{animation-play-state:paused;}
.featured-wheel-card:focus-visible{outline:3px solid var(--green-500);outline-offset:3px;animation-play-state:paused;}

@media(max-width:900px){
  .featured-wheel-stage{height:290px;perspective:900px;}
  .featured-wheel-card{width:168px;height:206px;left:-84px;top:-103px;padding:14px;border-radius:16px;}
  .featured-wheel-card b{font-size:13px;}
}
@media(max-width:600px){
  .featured-wheel-stage{height:250px;perspective:700px;}
  .featured-wheel-card{width:148px;height:182px;left:-74px;top:-91px;}
  @keyframes featuredWheel{
    0%,3%{transform:translate3d(0,0,90px) rotateY(0deg) scale(1);opacity:1;z-index:6;}
    16.66%{transform:translate3d(130px,8px,20px) rotateY(-38deg) scale(.78);opacity:.9;z-index:5;}
    33.33%{transform:translate3d(210px,14px,-46px) rotateY(-58deg) scale(.58);opacity:.45;z-index:3;}
    46%,54%{transform:translate3d(0,18px,-140px) rotateY(180deg) scale(.44);opacity:0;z-index:1;}
    66.66%{transform:translate3d(-210px,14px,-46px) rotateY(58deg) scale(.58);opacity:.45;z-index:3;}
    83.33%{transform:translate3d(-130px,8px,20px) rotateY(38deg) scale(.78);opacity:.9;z-index:5;}
    97%,100%{transform:translate3d(0,0,90px) rotateY(0deg) scale(1);opacity:1;z-index:6;}
  }
}
@media(prefers-reduced-motion:reduce){
  .featured-wheel-card{animation:none;position:relative;left:auto;top:auto;display:inline-flex;margin:0 8px 8px 0;transform:none !important;opacity:1 !important;}
  .featured-wheel-ring{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:0;transform:none;}
  .featured-wheel-stage{height:auto;perspective:none;padding:0 20px;}
}

/* ============================================================
   Product / service detail pages: medical notice, richer prose
   styling for descriptions, and an end-of-page CTA. Added so
   every service and product page (current and any added later)
   gets the same animated, colourful, consistently-structured
   treatment automatically - none of this depends on per-item
   data beyond what's already in the description/content field.
   ============================================================ */

/* ---- Medical safety notice - shown near the top of every product
   and service detail page. Amber/warning tone is deliberately
   different from the site's blue/green palette so it reads as
   "important" without looking like an error. ---- */
.medical-notice{
  display:flex;align-items:flex-start;gap:14px;
  background:#fff8e8;border:1.5px solid #f3c56b;border-left:5px solid #e2941a;
  border-radius:var(--radius-sm);padding:16px 18px;margin:18px 0 28px;
}
.medical-notice-icon{flex-shrink:0;width:26px;height:26px;color:#b7660a;margin-top:1px;}
.medical-notice-icon svg{width:100%;height:100%;}
.medical-notice-text strong{display:block;color:#7a4a06;font-size:15px;margin-bottom:4px;}
.medical-notice-text p{margin:0;color:#7a5a1f;font-size:13.8px;line-height:1.65;}
[dir="rtl"] .medical-notice,.lang-ur .medical-notice{border-left:1.5px solid #f3c56b;border-right:5px solid #e2941a;}

/* ---- Prose wrapper around each product/service's own description or
   content field - colourful headings, clearly bold callouts, styled
   lists, all reveal-animated section by section as the visitor scrolls. ---- */
.detail-prose{background:#fff;}
.detail-prose h2{margin-top:36px;font-size:21px;color:var(--blue-900);padding-bottom:8px;border-bottom:2px solid var(--green-100);}
.detail-prose h3{margin-top:28px;font-size:17.5px;color:var(--blue-700);}
.detail-prose h2:first-child,.detail-prose h3:first-child{margin-top:0;}
.detail-prose p{font-size:15.5px;line-height:1.75;color:var(--gray-700);}
.detail-prose strong,.detail-prose b{color:var(--blue-800);font-weight:700;}
.detail-prose ul,.detail-prose ol{margin:14px 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px;}
.detail-prose ul li,.detail-prose ol li{position:relative;padding-left:30px;font-size:15px;line-height:1.6;color:var(--gray-700);}
.detail-prose ul li::before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:50%;background:var(--green-100);}
.detail-prose ul li::after{content:"";position:absolute;left:6px;top:9px;width:6px;height:10px;border-right:2px solid var(--green-600);border-bottom:2px solid var(--green-600);transform:rotate(45deg);}
.detail-prose a{color:var(--blue-600);text-decoration:underline;}
[dir="rtl"] .detail-prose ul li,[dir="rtl"] .detail-prose ol li{padding-left:0;padding-right:30px;}
[dir="rtl"] .detail-prose ul li::before{left:auto;right:0;}
[dir="rtl"] .detail-prose ul li::after{left:auto;right:6px;}

/* Numbered lists (from the "numbered list" button in the description
   editor) get a coloured number badge instead of the checkmark used for
   bullet lists, so the two stay visually distinct. */
.detail-prose ol{counter-reset:prose-ol;}
.detail-prose ol li{counter-increment:prose-ol;}
.detail-prose ol li::before{content:counter(prose-ol);position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--green-600);color:#fff;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;}
[dir="rtl"] .detail-prose ol li::before{left:auto;right:0;}

/* ---- Formatting produced by the Description / Full Content editor in
   the CEO dashboard: text size, font style, colour, alignment and
   indents. Colours use inline styles from the editor so they need no
   CSS here - these classes cover the rest. ---- */
.detail-prose .ql-size-small{font-size:0.75em;}
.detail-prose .ql-size-large{font-size:1.5em;}
.detail-prose .ql-size-huge{font-size:2.25em;}
.detail-prose .ql-font-serif{font-family:Georgia,'Times New Roman',Times,serif;}
.detail-prose .ql-font-monospace{font-family:'SFMono-Regular',Menlo,Consolas,'Courier New',monospace;}
/* text-align-last is set explicitly here too because the site's global
   "p{text-align-last:start}" rule (used to keep normal paragraphs from
   looking odd when justified) would otherwise win for a short, one-line
   centered/right-aligned paragraph and pull it back to the left. */
.detail-prose .ql-align-center{text-align:center;text-align-last:center;}
.detail-prose .ql-align-right{text-align:right;text-align-last:right;}
.detail-prose .ql-align-justify{text-align:justify;}
.detail-prose .ql-indent-1{padding-left:3em;}
.detail-prose .ql-indent-2{padding-left:6em;}
.detail-prose .ql-indent-3{padding-left:9em;}
.detail-prose .ql-indent-4{padding-left:12em;}
.detail-prose .ql-indent-5{padding-left:15em;}
.detail-prose .ql-indent-6{padding-left:18em;}
.detail-prose .ql-indent-7{padding-left:21em;}
.detail-prose .ql-indent-8{padding-left:24em;}
[dir="rtl"] .detail-prose .ql-indent-1{padding-left:0;padding-right:3em;}
[dir="rtl"] .detail-prose .ql-indent-2{padding-left:0;padding-right:6em;}
[dir="rtl"] .detail-prose .ql-indent-3{padding-left:0;padding-right:9em;}
[dir="rtl"] .detail-prose .ql-indent-4{padding-left:0;padding-right:12em;}
[dir="rtl"] .detail-prose .ql-indent-5{padding-left:0;padding-right:15em;}
[dir="rtl"] .detail-prose .ql-indent-6{padding-left:0;padding-right:18em;}
[dir="rtl"] .detail-prose .ql-indent-7{padding-left:0;padding-right:21em;}
[dir="rtl"] .detail-prose .ql-indent-8{padding-left:0;padding-right:24em;}

/* The editor's "highlight box" (blockquote) button - same amber tone as
   the medical notice, so marking a paragraph as a quote/highlight in the
   editor turns it into an eye-catching box on the live page, no extra
   button needed. */
.detail-prose blockquote{
  background:#fff8e8;border:1.5px solid #f3c56b;border-left:5px solid #e2941a;
  border-radius:var(--radius-sm);padding:14px 16px;margin:18px 0;
  font-size:14.5px;line-height:1.65;color:#7a5a1f;font-style:normal;
}
[dir="rtl"] .detail-prose blockquote{border-left:1.5px solid #f3c56b;border-right:5px solid #e2941a;}

/* ---- Each heading + its content, auto-wrapped so the description
   fades/slides in section by section as the visitor scrolls, instead
   of appearing as one flat block. Purely a scroll-reveal + spacing
   wrapper - no border/background of its own, so it never fights the
   headings/lists it contains. ---- */
.prose-section{margin-bottom:6px;}
.prose-section:last-child{margin-bottom:0;}

/* ---- Highlighted callout box for "Important:/Note:/Warning:/Caution:/
   Disclaimer:" lines inside a description - same amber warning tone as
   the medical notice above, so it reads as "pay attention" wherever it
   appears on the page. ---- */
.prose-callout{
  display:flex;align-items:flex-start;gap:10px;
  background:#fff8e8;border:1.5px solid #f3c56b;border-left:5px solid #e2941a;
  border-radius:var(--radius-sm);padding:14px 16px;margin:18px 0!important;
  font-size:14.5px!important;line-height:1.65;color:#7a5a1f!important;
}
.prose-callout strong{color:#7a4a06!important;}
[dir="rtl"] .prose-callout{border-left:1.5px solid #f3c56b;border-right:5px solid #e2941a;}

/* ---- End-of-description call to action ---- */
.detail-end-cta{
  margin-top:34px;padding:26px;border-radius:var(--radius);
  background:linear-gradient(135deg,var(--blue-800),var(--blue-600));
  color:#fff;text-align:center;
}
.detail-end-cta h3{color:#fff;margin:0 0 8px;font-size:19px;}
.detail-end-cta p{color:#dcebfb;margin:0 0 18px;font-size:14.5px;}
.detail-end-cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.detail-end-cta-actions .btn-whatsapp{background:var(--green-500);color:#fff;border:none;}
.detail-end-cta-actions .btn-whatsapp:hover{background:var(--green-600);}
.detail-end-cta-actions .btn-primary{background:#fff;color:var(--blue-800);}
.detail-end-cta-actions .btn-primary:hover{background:var(--green-100);}

/* ---- General product safety FAQ (Urdu, RTL) ---- */
.general-faq-section{background:var(--blue-50);}
.faq-source-link{font-size:12.5px;color:var(--blue-600);margin-inline-start:4px;white-space:nowrap;}
.general-faq-note{margin-top:18px;font-size:12.5px;color:var(--gray-500);line-height:1.7;text-align:center;}

@media(max-width:600px){
  .medical-notice{padding:14px;gap:10px;}
  .detail-end-cta{padding:20px;}
  .prose-callout{padding:12px 14px;}
}