/* ---------- design knobs ---------- */
:root{
  --text:#1f2430;
  --muted:#7b8894;
  --link:#4b5563;
  --link-active:#2c3440;
  --divider:#edf0f4;
  --container:1080px;       /* desktop width */
  --header-h:84px;          /* header height */
  --underline-w:36px;       /* active-tab underline width */
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:#fff;
}
.container{max-width:var(--container); margin:0 auto; padding:0 24px}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50; background:#fff;
  border-bottom:20px solid var(--divider);
}
.site-header .container{
  min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
}

/* brand (logo + 2-line wordmark) */
.brand{display:flex; align-items:center; gap:14px; text-decoration:none}
.brand img{height:40px; width:auto; display:block; object-fit:contain}
.brand-text{line-height:1}
.brand-title{font-weight:700; letter-spacing:.02em; font-size:22px; color:var(--text)}
.brand-sub{margin-top:6px; font-size:12px; letter-spacing:.3em; color:var(--muted); text-transform:capitalize}

/* nav */
.nav{display:flex; align-items:center; gap:32px}
.nav a{
  text-decoration:none; text-transform:uppercase;
  font-weight:700; font-size:15px; letter-spacing:.04em;
  color:var(--link); padding:8px 0; position:relative;
  transition:color .15s ease, opacity .15s ease;
}
.nav a:hover{color:var(--link-active)}
.nav a.active{color:var(--link-active)}
.nav a.active::after{
  content:""; position:absolute; left:50%; bottom:-14px;
  width:var(--underline-w); height:2px; background:var(--link-active);
  transform:translateX(-50%); border-radius:2px; opacity:.9;
}

/* mobile menu button */
.nav-toggle{
  display:none; width:42px; height:36px; padding:6px;
  background:#fff; border:1px solid var(--divider); border-radius:8px; cursor:pointer;
}
.nav-toggle .bar{display:block; height:2px; margin:6px 0; background:#111}

/* ---------- responsive ---------- */
@media (max-width:880px){
  :root{ --header-h:72px }
  .brand img{height:34px}
  .brand-title{font-size:20px}
  .brand-sub{letter-spacing:.26em}

  .nav-toggle{display:inline-block}
  .nav{
    position:absolute; inset-inline:0; top:var(--header-h);
    background:#fff; border-bottom:1px solid var(--divider);
    display:none; flex-direction:column; align-items:stretch;
  }
  .nav.open{display:flex}
  .nav a{padding:14px 24px; border-top:1px solid var(--divider)}
  .nav a.active::after{display:none}
}

/* page spacing */
main{padding:28px 0 80px}

/*  ===== Header Ends  =====*/


/* ===== Footer ===== */
.site-footer{
  --footer-bg:url('/assets/footer.png');        /* replace with your image */
  position:relative; color:#e9eef5; background:#0e1318;
  margin-top:64px;
}
.site-footer::before{
  /* dark overlay over background image */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,14,18,.88), rgba(10,14,18,.88)),
    var(--footer-bg) center/cover no-repeat;
  z-index:0;
}
.footer-cut{
  /* angled top edge */
  position:absolute; left:0; right:0; top:-40px; height:40px; z-index:1;
  background:linear-gradient(to right, transparent 0%, transparent 40%, rgba(10,14,18,.9) 40%, rgba(10,14,18,.9) 100%);
  clip-path:polygon(0 0,100% 40%,100% 100%,0 100%);
}
.site-footer > *{position:relative; z-index:2}

.footer-grid{
  display:grid; gap:40px; padding:56px 0 28px;
  grid-template-columns: 1.2fr 1fr 1fr;
}
.footer-col{min-width:0}

.footer-brand{display:flex; align-items:center; gap:16px; margin-bottom:14px}
.footer-brand img{width:72px; height:auto; border-radius:50%; background:#fff}
.brand-lockup{margin:0; line-height:1.05}
.brand-1,.brand-2,.brand-3{font-weight:800; letter-spacing:.04em}
.brand-1{font-size:20px}
.brand-2{font-size:18px}
.brand-3{font-size:18px}

.footer-copy{margin:10px 0 16px; color:#cfd8e3}
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; margin-right:10px; border-radius:50%;
  background:rgba(255,255,255,.08); color:#fff; text-decoration:none; transition:opacity .2s ease;
}
.footer-social a:hover{opacity:.85}

.footer-title{margin:0 0 6px; font-size:22px; font-weight:800; color:#fff}
.footer-divider{width:36px; height:2px; background:#e8edf5; opacity:.85; margin:8px 0 18px; border-radius:2px}

.footer-line{display:flex; gap:12px; align-items:flex-start; margin:12px 0; color:#d7deea}
.footer-line i{margin-top:3px; width:18px; text-align:center; color:#ff5858}
.footer-line a{color:#fff; text-decoration:none}
.footer-line a:hover{opacity:.9}

.map-wrap{border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.15); background:rgba(0,0,0,.2)}
.map-wrap iframe{display:block; width:100%; height:190px}

/* hours row */
.footer-hours{border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12)}
.hours-grid{
  display:grid; gap:12px; padding:16px 0;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.hour{display:flex; align-items:center; gap:10px; color:#e3eaf3; font-size:14.5px}
.hour i{color:#f24d4d}

/* bottom bar */
.footer-bottom{background:rgba(0,0,0,.25)}
.bottom-row{display:flex; align-items:center; justify-content:space-between; padding:14px 0; font-size:14px; color:#cfd8e3}
.bottom-row a{color:#fff; text-decoration:none}
.bottom-row a:hover{opacity:.9}

/* responsive */
@media (max-width: 1024px){
  .footer-grid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 760px){
  .footer-grid{grid-template-columns: 1fr}
  .hours-grid{grid-template-columns: 1fr}
  .footer-brand img{width:64px}
  .map-wrap iframe{height:220px}
}


/*  ===== Footer Ends  ===== */

/* Make footer hug bottom even if content is short */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }              /* page content grows */
.site-footer { margin-top: 0; }        /* no gap above footer */

/* Large map banner above footer */
.map-hero{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0 0;                   /* small breathing room above angled footer */
  background: #fff;
}
.map-hero iframe{
  width: min(1100px, 92vw);            /* wide but contained */
  height: clamp(320px, 42vh, 520px);   /* tall on large screens, sensible on mobile */
  border: 0;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  display: block;
}

.footer-cut{ display:none; }
.site-footer::before{ clip-path: none; }
.map-hero{ margin-bottom:0; }


/* Contact us start */

/* Page title */
.section-title{
  margin: 28px 0 6px;
  font-size: 32px; font-weight: 800;
}
.title-underline{
  width: 44px; height: 3px; background:#2c3440; border-radius:2px;
  margin-bottom: 18px;
}

/* Grid */
.contact-grid{
  display: grid; gap: 28px; align-items: start;
  grid-template-columns: 1.05fr 1fr;
  margin-bottom: 28px;
}
@media (max-width: 980px){ .contact-grid{ grid-template-columns: 1fr; } }

.contact-card{
  background:#fff;
  border:1px solid #edf0f4;
  border-radius: 12px;
  padding: 18px 18px 20px;
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
}

/* Left column styles */
.h6{ font-size: 14px; margin: 0; font-weight: 800; }
.muted{ color:#7b8894; }
.thin{ border:0; border-top:1px solid #edf0f4; margin:10px 0 16px; }

.info-line{ display:flex; gap:12px; align-items:flex-start; margin:10px 0; }
.info-line i{ color:#e64949; width:18px; text-align:center; margin-top:3px; }
.info-line a{ color:#2c3440; text-decoration:none; }
.info-line a:hover{ text-decoration:underline; }

.map-wrap.small{ border:1px solid rgba(0,0,0,.08); border-radius:10px; overflow:hidden; }
.map-wrap.small iframe{ width:100%; height:220px; display:block; border:0; }

/* Right column (form) */
.form-title{ margin:0 0 6px; font-weight:800; font-size:22px; }
.appointment-note{ color:#e64949; font-weight:700; margin:0 0 14px; }

#contactForm label{ display:block; font-weight:700; margin:12px 0 6px; }
#contactForm .req{ color:#e64949; }
#contactForm input, #contactForm textarea{
  width:100%; padding:12px 14px; border:1px solid #e5e7eb; border-radius:10px;
  font:inherit; outline: none; transition: border-color .15s, box-shadow .15s;
  background:#fff;
}
#contactForm input:focus, #contactForm textarea:focus{
  border-color:#9aa4b2; box-shadow: 0 0 0 3px rgba(156,163,175,.25);
}
.hp-field{ position:absolute; left:-9999px; } /* honeypot hidden */

.btn-primary{
  margin-top:14px; padding:12px 18px; border:0; border-radius:10px; cursor:pointer;
  font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  background:#2c3440; color:#fff;
}
.btn-primary:hover{ filter:brightness(1.05); }

.form-msg{ margin-top:10px; font-weight:700; }

/* Large interactive map banner above footer */
.map-hero{ display:flex; justify-content:center; align-items:center; padding:16px 0 0; background:#fff; margin-bottom:-1px; line-height:0; position:relative; z-index:1; }
.map-hero iframe{
  width: min(1100px, 92vw);
  height: clamp(320px, 42vh, 520px);
  border:0; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* Keep footer at bottom on short pages */
html, body { height:100%; }
body{ min-height:100vh; display:flex; flex-direction:column; }
main.container{ flex:1 0 auto; }


/* Contact ends */




/* -------------------Services Start ----------------------- */
/* Services */
.services-wrap{ padding: 24px 0 10px; }
.svc-head .section-title{ margin: 6px 0 6px; }
.svc-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 1100px){ .svc-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 820px){  .svc-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){  .svc-grid{ grid-template-columns: 1fr; } }

.svc-card{
  border:1px solid #e9edf3; border-radius:16px; padding:18px; background:
    linear-gradient(180deg, #f9fbff 0%, #ffffff 70%);
  box-shadow: 0 10px 22px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.svc-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.07); }

.svc-icon{
  width:56px; height:56px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; color:#1f66ff; background: #eaf1ff;
  margin-bottom:12px;
}
.svc-card h3{ margin:0 0 6px; font-size:18px; font-weight:800; }
.svc-card p{ margin:0 0 12px; color:#6b7280; }

.svc-btn{
  display:inline-block; border:0; background:#1f2937; color:#fff;
  padding:10px 14px; border-radius:10px; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em; cursor:pointer;
}
.svc-btn:hover{ filter:brightness(1.05); }

/* Modal */
.svc-modal{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(0,0,0,.45); z-index:1000; padding:18px;
}
.svc-modal[aria-hidden="false"]{ display:grid; }
.svc-dialog{
  width:min(720px, 92vw); background:#fff; color:#111; border-radius:16px;
  border:1px solid #e7ebf2; padding:20px 18px;
  box-shadow:0 20px 44px rgba(0,0,0,.18);
}
.svc-close{
  position:absolute; right:18px; top:12px; border:0; background:#fff;
  font-size:28px; line-height:1; cursor:pointer; color:#64748b;
}
.svc-blurb{ color:#4b5563; margin-top:6px; }
.svc-points{ margin:12px 0 14px 18px; color:#374151; }
.svc-points li{ margin:6px 0; }
.svc-cta{
  display:inline-block; background:#1f2937; color:#fff; text-decoration:none;
  padding:10px 14px; border-radius:10px; font-weight:800; letter-spacing:.04em;
}
.svc-cta:hover{ filter:brightness(1.05); }


/* -------------------Services End ----------------------- */


/* ---------- Aboutus start ---------- */

/* About page additions – plug into your theme */
.about-page{ padding: 18px 0 28px; }

/* Hero */
.about-hero{
  display:grid; gap:26px;
  grid-template-columns: 360px 1fr;
  align-items:center;
  margin-bottom: 24px;
}
@media (max-width: 920px){
  .about-hero{ grid-template-columns: 1fr; }
}
.about-photo img{
  width:100%; height:auto; border-radius:18px;
  border:1px solid #edf0f4; box-shadow:0 12px 28px rgba(0,0,0,.06);
  object-fit:cover;
}
.about-copy p{ color:#4b5563; margin-top:8px; }
.about-facts{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.about-facts .fact{
  display:flex; gap:8px; align-items:center;
  background:#fff; border:1px solid #e9edf3; border-radius:12px; padding:8px 12px;
  color:#374151;
}
.about-facts i{ color:#ff6a00; }

/* Expertise cards */
.about-cards{ margin: 12px 0 10px; }
.h2{ font-size:26px; font-weight:800; margin:0; }
.spec-grid{
  display:grid; gap:18px; margin-top:12px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width:1100px){ .spec-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:800px){ .spec-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .spec-grid{ grid-template-columns: 1fr; } }

.spec-card{
  background:#fff; border:1px solid #edf0f4; border-radius:16px; padding:18px;
  box-shadow:0 10px 22px rgba(0,0,0,.04);
}
.spec-card h3{ margin:10px 0 6px; font-weight:800; }
.spec-card p{ color:#6b7280; margin:0; }
.spec-icon{
  width:64px; height:64px; display:flex; align-items:center; justify-content:center;
  border-radius:16px; background:#fff3ec; color:#ff6a00; font-size:26px;
}

/* Marquee rows (auto-scroll) */
.marquee-block{ margin: 16px 0 8px; }
.marquee{
  position:relative; overflow:hidden; border-radius:16px;
  border:1px solid #edf0f4; background:#fff;
}
.marquee .track{
  display:flex; gap:12px; padding:12px; align-items:stretch;
  will-change: transform;
}
.pill{
  white-space:nowrap; padding:12px 16px; border-radius:999px;
  background:#eef5ff; color:#1f2937; border:1px solid #dbe7ff;
  font-weight:700; display:flex; gap:10px; align-items:center;
}
.pill i{ color:#1f66ff; }

.card-lite{
  min-width: 280px;
  background:#ffffff; border:1px solid #edf0f4; border-radius:14px;
  padding:12px 14px; box-shadow:0 8px 20px rgba(0,0,0,.04);
}
.card-lite h4{ margin:0 0 6px; font-weight:800; }
.card-lite p{ margin:0; color:#6b7280; }

/* underline from your theme */
.title-underline{
  width: 44px; height: 3px; background:#2c3440; border-radius:2px; margin:6px 0 12px;
}
.brand{ color:#ff6a00; }


/* ---------- Aboutus End ---------- */




/* ---------- Home start ---------- */

/* Red rotating banner */
/* ===== Fixed red banner under the header ===== */
:root{
  /* Adjust this to your header height so the banner sits right below it */
  --header-h: 64px;
  --banner-h: 40px;
}

/* Push the page down so the fixed banner doesn't cover the hero */
:root{
  --header-h: 64px;
  --banner-h: 40px;
  /* NEW: extra spacing below the banner */
  --banner-gap: 12px;   /* tweak to 8–20px as you like */
}

/* previously: body.has-banner { padding-top: var(--banner-h); } */
body.has-banner{
  padding-top: calc(var(--banner-h) + var(--banner-gap));
}

.alert-ticker{
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  height: var(--banner-h);
  background: #e63b2e;     /* red */
  color: #fff;
  z-index: 9999;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  border-bottom: 1px solid rgba(255,255,255,.2);
}

.alert-track{
  display: inline-flex;
  gap: 48px;
  white-space: nowrap;
  padding: 0 16px;
  animation: ticker 24s linear infinite;
  font-weight: 800;
  letter-spacing: .02em;
}

.alert-track span { opacity: .98; }
.alert-track:hover{ animation-play-state: paused; }

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Mobile tweaks */
@media (max-width: 768px){
  :root{ --header-h: 56px; --banner-h: 38px; }
  .alert-track{ gap: 32px; }
}
/* ===== Fixed red banner under the header ===== */

/* HERO carousel */
.hero{ background:#f8fafc; }
.carousel{
  position:relative; overflow:hidden; max-width: 1240px; margin: 0 auto;
  border-radius:18px; border:1px solid #edf0f4;
}
.slides{ position:relative; height:min(64vh, 560px); }
.slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  background-image: var(--bg);
  opacity:0; transform: scale(1.02);
  transition: opacity .5s ease, transform .6s ease;
}
.slide.is-active{ opacity:1; transform: scale(1); }
.slide .overlay{
  position:absolute; inset:0; background:linear-gradient( to right, rgba(0,0,0,.48), rgba(0,0,0,.15) 50%, rgba(0,0,0,0) 70% );
  display:flex; flex-direction:column; justify-content:center; padding:26px;
  color:#fff;
}
.slide h1{ font-weight:800; font-size: clamp(24px, 4vw, 42px); margin:0 0 8px; }
.slide h1 .tiny{ font-size:.65em; opacity:.9; font-weight:800; }
.slide p{ margin:0 0 14px; opacity:.95; }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-primary{
  background:#1f2937; color:#fff; text-decoration:none; padding:10px 14px;
  border-radius:10px; font-weight:800; letter-spacing:.03em;
}
.btn-ghost{
  background:rgba(255,255,255,.15); color:#fff; text-decoration:none;
  padding:10px 14px; border-radius:10px; font-weight:800;
  backdrop-filter: blur(4px);
}
.c-prev,.c-next{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  border:0; width:44px; height:44px; border-radius:999px;
  background: rgba(0,0,0,.35); color:#fff; cursor:pointer;
}
.c-prev{ left:10px; } .c-next{ right:10px; }
.dots{ position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:6px; }
.dots button{ width:9px; height:9px; border-radius:999px; border:0; background:#ffffff66; }
.dots button.is-active{ background:#fff; }

/* Quick services grid (reuses your service styles) */
.services-wrap{ padding: 18px 0 8px; }
.svc-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width:1100px){ .svc-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width:820px){ .svc-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:560px){ .svc-grid{ grid-template-columns: 1fr;} }
.svc-card{
  display:block; text-decoration:none; color:inherit;
  border:1px solid #e9edf3; border-radius:16px; padding:18px; background:#fff;
  box-shadow:0 10px 22px rgba(0,0,0,.04);
}
.svc-card:hover{ transform: translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.07); }
.svc-icon{
  width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:24px; color:#1f66ff; background:#eaf1ff; margin-bottom:12px;
}
.svc-card h3{ margin:0 0 6px; font-size:18px; font-weight:800; }
.svc-card p{ margin:0; color:#6b7280; }

/* Doctor intro (reuse about styles lightly) */
.about-hero{
  display:grid; gap:26px; grid-template-columns: 360px 1fr; align-items:center;
  margin: 16px auto 10px; max-width: 1240px;
}
@media (max-width:940px){ .about-hero{ grid-template-columns:1fr; } }
.about-photo img{
  width:100%; border-radius:16px; border:1px solid #edf0f4; box-shadow:0 12px 28px rgba(0,0,0,.06);
}
.about-facts{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.about-facts .fact{ display:flex; gap:8px; align-items:center; background:#fff; border:1px solid #e9edf3; border-radius:12px; padding:8px 12px; color:#374151; }

/* Why choose us */
.why-grid{
  display:grid; gap:16px; margin-top:10px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width:900px){ .why-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .why-grid{ grid-template-columns: 1fr; } }
.why-card{
  background:#fff; border:1px solid #e9edf3; border-radius:16px; padding:16px;
  box-shadow:0 10px 22px rgba(0,0,0,.04);
}
.why-card i{ color:#ff6a00; font-size:24px; }
.why-card h3{ margin:8px 0 4px; font-weight:800; }
.why-card p{ margin:0; color:#6b7280; }

/* Testimonials */
.testimonials{ padding: 12px 0 8px; }
.t-slider{ position:relative; overflow:hidden; border:1px solid #e9edf3; border-radius:16px; background:#fff; }
.t-track{ display:flex; transition: transform .45s ease; }
.t-card{
  min-width: 100%; padding:20px; margin:0; display:flex; flex-direction:column; gap:10px;
}
.t-card blockquote{ margin:0; font-size:20px; line-height:1.5; color:#111; font-weight:700; }
.t-card figcaption{ color:#6b7280; }
.t-prev,.t-next{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; width:38px; height:38px; border-radius:999px; background:#e7eefc; color:#1f2937; cursor:pointer;
}
.t-prev{ left:10px; } .t-next{ right:10px; }

/* WhatsApp FAB */
.wa-fab{
  position: fixed; right:16px; bottom:18px; z-index:70;
  background:#25D366; color:#fff; width:52px; height:52px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  box-shadow:0 10px 24px rgba(37,211,102,.35);
  font-size:26px;
}



/*---------- Home End ---------- */