/* Extracted from dist-html/index.html <style> */

/* Base palette derived from src/styles.css (Tailwind theme variables) */
:root{
  --radius:0.875rem;
  --background: oklch(0.995 0.004 230);
  --foreground: oklch(0.22 0.04 240);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.22 0.04 240);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.22 0.04 240);
  --primary: oklch(0.55 0.13 230);
  --primary-foreground: oklch(0.99 0.005 230);
  --primary-soft: oklch(0.95 0.04 220);
  --secondary: oklch(0.72 0.12 195);
  --secondary-foreground: oklch(0.18 0.03 220);
  --muted: oklch(0.97 0.01 230);
  --muted-foreground: oklch(0.48 0.03 235);
  --accent: oklch(0.94 0.05 195);
  --accent-foreground: oklch(0.25 0.06 220);
  --destructive: oklch(0.6 0.22 27);
  --destructive-foreground: oklch(0.99 0 0);
  --success: oklch(0.68 0.14 160);
  --warning: oklch(0.78 0.15 80);
  --border: oklch(0.92 0.015 230);
  --input: oklch(0.94 0.015 230);
  --ring: oklch(0.55 0.13 230);
  --gradient-hero: linear-gradient(135deg, oklch(0.97 0.03 220) 0%, oklch(0.95 0.05 195) 100%);
  --gradient-primary: linear-gradient(135deg, oklch(0.55 0.13 230), oklch(0.65 0.13 200));
  --shadow-soft: 0 4px 20px -8px oklch(0.55 0.13 230 / 0.18);
  --shadow-card: 0 10px 30px -12px oklch(0.4 0.08 230 / 0.15);
  --shadow-glow: 0 0 40px oklch(0.7 0.14 200 / 0.35);
}

*{box-sizing:border-box}
body {
  /* Premium light gradient tailored to our brand: Starts white and transitions to a soft clinical mist */
  background: linear-gradient(180deg, #ffffff 0%, #f0f7f9 50%, #e6f2f5 100%) !important;

  /* Keeps the gradient fixed in place so it stays perfectly smooth when scrolling */
  background-attachment: fixed !important;

  /* Inherits our high-contrast navy text color seamlessly */
  color: var(--foreground, #0f2d4a) !important;

  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


a{color:inherit; text-decoration:none}
.container{max-width:1120px; margin:0 auto; padding:0 16px}
.btn-primary{display:inline-flex; align-items:center; gap:10px; padding:12px 22px; border-radius:999px; background:var(--gradient-primary); color:var(--primary-foreground); font-weight:700; box-shadow:var(--shadow-soft); transition:transform .2s}
.btn-primary:hover{transform:translateY(-2px)}
.btn-outline{display:inline-flex; align-items:center; gap:10px; padding:12px 22px; border-radius:999px; border:1px solid var(--border); background:var(--card); font-weight:700; transition:.2s}
.btn-outline:hover{border-color:var(--primary); color:var(--primary)}
.chip{display:inline-flex; align-items:center; gap:8px; border:1px solid color-mix(in oklab, var(--primary) 20%, transparent); background:var(--primary-soft); padding:6px 14px; border-radius:999px; font-size:12px; font-weight:600; color:var(--primary)}
.card{background:var(--card); border:1px solid var(--border); border-radius:calc(var(--radius) + 6px)}
.section{padding:64px 0}
.hero{background:var(--gradient-hero); overflow:hidden}
.grid{display:grid; gap:32px}
.two{grid-template-columns:1fr 1fr}
.center{text-align:center}
.h1{font-size:48px; line-height:1.05; margin:12px 0 0}
.h2{font-size:34px; line-height:1.15; margin:0}
.muted{color:var(--muted-foreground)}
.pill-list{display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:24px; padding:0; list-style:none}
.pill{display:flex; align-items:center; gap:10px}
.badge-icon{width:28px; height:28px; display:grid; place-items:center; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-size:14px}
.hero-img-wrap{position:relative}
.hero-img{width:100%; height:100%; object-fit:cover; border-radius:24px; display:block}
.float-review{position:absolute; bottom:-20px; left:-16px; display:none}
.float-smiles{position:absolute; right:-12px; top:24px; display:none}
.stars{display:flex; gap:3px}
.star{width:16px; height:16px; fill:var(--warning)}
.trust-strip{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:color-mix(in oklab, var(--card) 80%, var(--muted) 20%); overflow:hidden}
/* Trust strip marquee (Flexbox, seamless, no shrink/overlap) */

.trust-strip{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:color-mix(in oklab, var(--card) 80%, var(--muted) 20%); overflow:hidden}

.trust-marquee{padding:24px 0}

.trust-track{
  display:flex;
  flex-wrap:nowrap;
  gap:24px;
  width:max-content;
  animation:trust-marquee-left 18s linear infinite;
  will-change:transform;
}

.trust-strip:hover .trust-track{animation-play-state:paused}

@keyframes trust-marquee-left{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Keep cards fully visible and equal sized */
.stat {
  text-align: center;
  min-width: 220px;
  flex: 0 0 220px;
  height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  border-radius: 16px;
  border: 1px solid transparent;
}

.stat:hover {
  transform: scale(1.05);
  background: var(--card);
  border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
  box-shadow: 0 0 20px oklch(0.7 0.14 200 / 0.15);
}

.stat b{display:block; font-size:28px; line-height:1}

.trust-card{pointer-events:auto}

@media (max-width: 980px){
  .trust-track{gap:18px}
  .stat{min-width:180px; flex-basis:180px}
}



.section-title span{display:inline-block; font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:var(--primary); font-weight:700}
.section-title h2{margin-top:10px}
.three{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Services + Testimonials uniform card heights (stretch to tallest content in each row) */
[data-services-grid],
[data-testimonials-grid] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
  width: 100%;
}

@media (max-width: 980px) {
  [data-services-grid],
  [data-testimonials-grid] {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Ensure injected cards stretch to equal height and never collapse */
.service-card {
  padding: 22px;
  border-radius: 24px;
  background: var(--card);
  border: 1px solid var(--border);
  transition: .2s;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-card:hover {
  transform: translateY(-4px);
  /* Mixes 50% of the primary color to light up the border */
  border-color: color-mix(in oklab, var(--primary) 50%, var(--border));
  /* Luminous theme glow */
  box-shadow: 0 0 25px oklch(0.7 0.14 200 / 0.25), var(--shadow-card);
  /* Slight background brightness boost */
  background: color-mix(in oklab, var(--card) 95%, white);
}

.iconbox{width:48px; height:48px; border-radius:16px; background:var(--primary-soft); display:grid; place-items:center; font-size:26px}
.why-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
.mini-card {
  padding: 22px;
  border-radius: 24px;
  background: var(--card);
  border: 1px solid var(--border);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.mini-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--primary) 50%, var(--border));
  box-shadow: 0 0 25px oklch(0.7 0.14 200 / 0.2), var(--shadow-card);
  background: color-mix(in oklab, var(--card) 96%, white);
}
details{border:1px solid var(--border); border-radius:24px; background:var(--card); padding:18px 20px}
summary{display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight:700}
.plus{width:28px; height:28px; border-radius:999px; background:var(--primary-soft); color:var(--primary); display:grid; place-items:center; transition:transform .2s}
details[open] .plus{transform:rotate(45deg)}
/* Booking form */
.form-card{border-radius:28px; background:var(--card); border:1px solid var(--border); padding:26px}
label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted-foreground); font-weight:800; margin-bottom:6px}
input,select,textarea{width:100%; border-radius:16px; border:1px solid var(--border); background:var(--background); padding:12px 14px; color:var(--foreground); outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in oklab, var(--primary) 20%, transparent)}
.form-grid{display:grid; gap:16px; grid-template-columns:1fr 1fr}
.form-grid-1{display:grid; gap:16px; grid-template-columns:1fr}
.submit{margin-top:14px; width:100%; border:none; cursor:pointer}
.fineprint{font-size:12px; color:var(--muted-foreground); text-align:center; margin:10px 0 0}
/* Header */
header{position:sticky; top:0; z-index:50; background:color-mix(in oklab, var(--background) 85%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.nav-row{height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:12px; font-weight:800}
.brand-mark{width:36px; height:36px; border-radius:12px; display:grid; place-items:center; background:var(--gradient-primary); color:var(--primary-foreground)}
nav{display:flex; gap:28px; font-size:14px; font-weight:700}
.nav-link{opacity:.9}
.nav-link:hover{color:var(--primary)}
.actions{display:flex; align-items:center; gap:14px}
.floating{position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:12px; z-index:40}
.fab{width:48px; height:48px; border-radius:999px; display:grid; place-items:center; background:var(--primary-foreground); color:white; box-shadow:var(--shadow-card)}
.fab.primary{background:var(--gradient-primary); color:var(--primary-foreground)}
footer {
  border-top: 1px solid var(--border);
  /* Premium deep dark gradient transition matching the OKLCH design space */
  background: linear-gradient(180deg, oklch(0.25 0.04 240) 0%, oklch(0.18 0.03 240) 100%);
  padding: 48px 0 0 0;
  color: #ffffff !important; /* Forces all standard text inside the footer to pure white */
}
.footer-grid{display:grid; align-items:center; justify-items:center; grid-template-columns:2fr 1fr 1fr; gap:24px; padding:48px 0; color:#ffffff}
.small{font-size:14px}
.footer-title {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 900;
  font-size: 12px;
  color: #ffffff; /* Bright white for primary column headers */
}
.footer-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.footer-list li,
.footer-list li a {
  margin: 8px 0;
  color: #ffffff !important;
  text-decoration: none;
}

.footer-list li a:hover {
  text-decoration: underline;
  opacity: 0.8; /* Subtle shift on hover without changing color */
}
.footer-list li,
.footer-list li a {
  margin: 8px 0;
  color: #ffffff !important;
  text-decoration: none;
}
.copy-row {
  grid-column: 1 / -1 !important; /* Forces layout to span all grid columns */
  border-top: 1px solid oklch(0.35 0.03 240);
  margin-top: 40px;
  padding-top: 24px;
  padding-bottom: 32px;
  background: transparent;
  
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 16px;
}

/* Base text resets for full containment */
.copy-row p,
.copy-row div {
  max-width: 100% !important;
  color: #ffffff !important;
}

/* Credits Line Styling */
.design-credit {
  font-size: 13px;
  letter-spacing: 0.05em;
  color: oklch(0.85 0.01 230) !important;
  margin: 0;
}
.design-credit span {
  font-weight: 700;
  color: #ffffff !important;
}

/* Click-to-call / click-to-email button layout (footer advertising) */
.advertising-container {
  margin-top: 4px !important;
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px;
}
.advertising-label {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: oklch(0.9 0.02 220) !important;
  margin: 0;
}

.contact-buttons-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.contact-cta-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  background: oklch(0.35 0.05 240);
  padding: 6px 14px;
  border-radius: 20px;
  transition: background-color 0.2s ease, transform 0.1s ease;
}
.contact-cta-link:hover {
  background: oklch(0.45 0.06 240);
  transform: scale(1.03);
}
.contact-cta-link span {
  font-weight: 700;
  font-size: 13px;
  color: #ffffff !important;
  line-height: 1;
}

.contact-svg-icon {
  stroke: #ffffff !important;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}


/* Copyright line structural limits */
.copyright-text {
  font-size: 12px;
  opacity: 0.85;
  margin: 0;
}

/* Legal Links Layout */
.footer-bottom-links {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-bottom-links a.muted {
  font-size: 12px;
  color: #ffffff !important;
  opacity: 0.7;
  text-decoration: none;
}
.footer-bottom-links a.muted:hover {
  opacity: 1;
  text-decoration: underline;
}


/* Main Interactive Ad Container */
.advertising-container {
  margin-top: 4px !important;
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px;
}
.advertising-label {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: oklch(0.9 0.02 220) !important;
  margin: 0;
}

/* Flex wrapper to place buttons cleanly side-by-side on desktop, stacked on mobile */
.contact-buttons-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

/* Styled Interactive Pill Callout Buttons */
.contact-cta-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  background: oklch(0.35 0.05 240);
  padding: 6px 14px;
  border-radius: 20px;
  transition: background-color 0.2s ease, transform 0.1s ease;
}
.contact-cta-link:hover {
  background: oklch(0.45 0.06 240);
  transform: scale(1.03);
}
.contact-cta-link span {
  font-weight: 700;
  font-size: 13px;
  color: #ffffff !important;
  line-height: 1;
}

/* Custom Vector Icon Controls */
.contact-svg-icon {
  stroke: #ffffff !important;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}


/* 3. Ensure the direct children block elements are also centered and don't float left */
.copy-row p,
.copy-row div {
  width: 100% !important;
  margin: 0 auto !important;
  color: #ffffff !important;
}

/* 4. Retain white text colors for links inside the row */
.copy-row a.muted {
  color: #ffffff !important;
  text-decoration: none;
}

.copy-row a.muted:hover {
  text-decoration: underline;
}

/* Step: footer bottom block styles (used by updated HTML) */
.design-credit {
  font-size: 13px;
  letter-spacing: 0.05em;
  color: oklch(0.85 0.01 230) !important;
  margin: 0;
}
.design-credit span {
  font-weight: 700;
  color: #ffffff !important;
}

.copyright-text {
  font-size: 12px;
  opacity: 0.85;
  margin: 0;
}

.footer-bottom-links {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 18px;
  flex-wrap: wrap;
}
.footer-bottom-links a.muted {
  font-size: 12px;
  color: oklch(0.75 0.02 235) !important;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.footer-bottom-links a.muted:hover {
  text-decoration: underline;
  opacity: 1;
}

.advertising-line {
  margin-top: 8px !important;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: oklch(0.9 0.02 220) !important;
}
.advertising-line span {
  font-weight: 900;
  color: #ffffff !important;
  background: oklch(0.35 0.05 240);
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-block;
  margin-left: 4px;
}
/* Responsiveness */
@media (max-width: 980px){
  .two{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  nav{display:none}
  .float-review,.float-smiles{display:none}
  .why-grid{grid-template-columns:1fr}
  .three{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .pill-list{grid-template-columns:1fr}
  .h1{font-size:38px}
}

/* Doctors Layout with a Premium Flowing Gradient */
.doctors-section {
  padding: 80px 24px;

  /* Blends from the body's light mist into a soft, professional ice-blue tone */
  background: linear-gradient(180deg, #f0f7f9 0%, #e6f2f5 100%) !important;

  width: 100%;
  box-sizing: border-box;
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.section-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  /* Deep navy for readability */
  color: #0f2d4a !important;
  margin: 0 0 12px 0;
}

.section-subtitle {
  font-size: 16px;
  line-height: 1.6;
  /* Crisp muted tone on the gradient */
  color: #3a536b !important;
  max-width: 700px;
  margin: 0 auto 48px auto;
}

/* Keeps the doctor card pristine white so it pops off the gradient background */
.doctor-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 162, 177, 0.15);
  border-radius: 16px;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  /* Soft, deep 3D shadow effect */
  box-shadow: 0 15px 35px -5px rgba(15, 45, 74, 0.08), 0 10px 15px -6px rgba(15, 45, 74, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.doctor-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 40px -5px rgba(15, 45, 74, 0.15);
}

/* Image Presentation Handler */
.doctor-image-wrapper {
  width: 100%;
  height: 380px;
  background-color: oklch(0.96 0.01 240);
  overflow: hidden;
}

.doctor-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Content Element Rules */
.doctor-info-content {
  padding: 28px;
  text-align: left;
}

.doctor-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--foreground);
  margin: 0 0 4px 0;
}

.doctor-title {
  font-size: 14px;
  font-weight: 600;
  color: oklch(0.6 0.12 240);
  letter-spacing: 0.02em;
  margin: 0 0 16px 0;
}

.doctor-divider {
  border: 0;
  height: 1px;
  background-color: var(--border, oklch(0.92 0.01 240));
  margin: 0 0 16px 0;
}

.doctor-bio {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-foreground);
  font-style: italic;
  margin: 0;
}

/* Responsiveness */
@media (max-width: 980px) {
  .doctors-section { padding: 60px 16px; }
  .doctor-image-wrapper { height: 320px; }
  .doctor-info-content { padding: 22px; }
}