/* ============================================================
   Chaudhary Clinic — Main Stylesheet
   Dr. Shivam Chaudhary, Satpuli, Uttarakhand
   ============================================================ */

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
       color: #222; line-height: 1.65; background: #fff; }
img  { max-width: 100%; height: auto; display: block; }
a    { color: #1a6b8a; text-decoration: none; transition: color .2s; }
a:hover { text-decoration: underline; color: #145571; }
address { font-style: normal; }
ul, ol  { padding-left: 1.4rem; }

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
h1 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); font-weight: 800; line-height: 1.2; }
h2 { font-size: clamp(1.35rem, 3vw,  1.9rem); font-weight: 700; line-height: 1.3; }
h3 { font-size: clamp(1.05rem, 2.2vw, 1.3rem); font-weight: 700; }
h4 { font-size: 1rem; font-weight: 600; }
p  { margin-bottom: 1rem; }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.section   { padding: 4rem 0; }
.section--alt  { background: #f4f9fc; }
.section--dark { background: #0c1e28; color: #e8f4f8; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn { display: inline-block; padding: .72rem 1.5rem; border-radius: 6px;
       font-weight: 700; font-size: .95rem; letter-spacing: .01em;
       transition: all .2s; border: 2px solid transparent; }
.btn:hover { text-decoration: none; }
.btn--green   { background: #27ae60; color: #fff; border-color: #27ae60; }
.btn--green:hover   { background: #1e9652; border-color: #1e9652; }
.btn--white   { background: #fff; color: #1a6b8a; }
.btn--white:hover   { background: #e8f4f8; }
.btn--teal    { background: #1a6b8a; color: #fff; }
.btn--teal:hover    { background: #145571; }
.btn--outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.65); }
.btn--outline-white:hover { background: rgba(255,255,255,.12); }

/* ── SITE HEADER / NAV ──────────────────────────────────────── */
.site-header { background: #1a6b8a; position: sticky; top: 0; z-index: 200;
               box-shadow: 0 2px 12px rgba(0,0,0,.18); }
.nav { display: flex; align-items: center; justify-content: space-between;
       max-width: 1100px; margin: 0 auto; padding: .85rem 1.25rem; }
.nav__logo       { color: #fff; font-size: 1.05rem; font-weight: 800; line-height: 1.25; }
.nav__logo small { display: block; font-size: .68rem; font-weight: 400;
                   color: #a8d8ea; letter-spacing: .04em; }
.nav__menu { display: flex; list-style: none; gap: 1.35rem;
             padding-left: 0; margin: 0; align-items: center; }
.nav__menu a { color: rgba(255,255,255,.88); font-size: .88rem; font-weight: 500;
               padding: .2rem 0; border-bottom: 2px solid transparent; transition: all .2s; }
.nav__menu a:hover,
.nav__menu a[aria-current="page"] { color: #fff; border-color: #a8d8ea; text-decoration: none; }
.nav__cta { background: #27ae60 !important; color: #fff !important;
            padding: .38rem .95rem !important; border-radius: 5px;
            border: none !important; font-weight: 700 !important; }
.nav__cta:hover { background: #1e9652 !important; border-bottom-color: transparent !important; }
.nav__burger { display: none; flex-direction: column; gap: 5px; cursor: pointer;
               background: none; border: none; padding: .25rem; }
.nav__burger span { display: block; width: 24px; height: 2px; background: #fff;
                    transition: .3s; border-radius: 2px; }

/* ── BREADCRUMB ─────────────────────────────────────────────── */
.breadcrumb { background: #eaf4f9; padding: .6rem 0;
              border-bottom: 1px solid #d5e8f0; }
.breadcrumb ol { display: flex; list-style: none; padding: 0;
                 gap: .4rem; font-size: .8rem; flex-wrap: wrap; }
.breadcrumb a  { color: #1a6b8a; }
.breadcrumb li + li::before { content: "›"; margin-right: .4rem; color: #aaa; }

/* ── HERO (home) ─────────────────────────────────────────────── */
.hero { background: linear-gradient(140deg, #0d4a63 0%, #1a6b8a 55%, #1e7d9e 100%);
        color: #fff; padding: 4.5rem 0; }
.hero__grid { display: grid; grid-template-columns: 1fr .9fr; gap: 3rem; align-items: center; }
.hero__eyebrow { display: inline-block; background: rgba(255,255,255,.12);
                 border: 1px solid rgba(255,255,255,.25); padding: .3rem .9rem;
                 border-radius: 20px; font-size: .78rem; letter-spacing: .06em;
                 text-transform: uppercase; margin-bottom: 1rem; color: #c9e8f5; }
.hero__h1      { color: #fff; margin-bottom: 1rem; }
.hero__h1 em   { font-style: normal; color: #a8d8ea; }
.hero__lead    { font-size: 1.05rem; opacity: .9; margin-bottom: 1.75rem; max-width: 520px; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.hero__trust   { display: flex; gap: 1.4rem; font-size: .82rem; opacity: .8; flex-wrap: wrap; }
.hero__trust span::before { content: "✓ "; color: #a8d8ea; font-weight: 800; }
.hero__card    { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
                 border-radius: 14px; padding: 1.75rem; }
.hero__card-name     { font-size: 1.2rem; font-weight: 800; margin-bottom: .2rem; }
.hero__card-cred     { color: #a8d8ea; font-size: .85rem; margin-bottom: 1.25rem;
                        padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255,255,255,.15); }
.hero__card-list     { list-style: none; padding: 0; }
.hero__card-list li  { padding: .48rem 0; border-bottom: 1px solid rgba(255,255,255,.08);
                        font-size: .91rem; display: flex; align-items: center; gap: .6rem; }
.hero__card-list li:last-child { border-bottom: none; }

/* ── PAGE HERO (inner pages) ─────────────────────────────────── */
.page-hero { background: linear-gradient(140deg, #0d4a63 0%, #1a6b8a 100%);
             color: #fff; padding: 3rem 0 2.5rem; }
.page-hero .label  { color: #a8d8ea; }
.page-hero h1      { color: #fff; margin-bottom: .75rem; }
.page-hero__lead   { font-size: 1.05rem; opacity: .9; max-width: 640px; }

/* ── SECTION HEADER ──────────────────────────────────────────── */
.label { display: inline-block; color: #1a6b8a; font-weight: 700;
         font-size: .76rem; text-transform: uppercase; letter-spacing: .1em;
         margin-bottom: .5rem; }
.section__header { margin-bottom: 2.5rem; }
.section__header h2 { color: #0d2d3a; margin-bottom: .6rem; }
.section__header p  { color: #555; max-width: 620px; }
.section__header--center { text-align: center; }
.section__header--center p { margin: 0 auto; }

/* ── SERVICE CARDS ───────────────────────────────────────────── */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.card { background: #fff; border: 1px solid #dce8f0; border-radius: 10px;
        padding: 1.75rem; transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: 0 8px 24px rgba(26,107,138,.13); transform: translateY(-3px); }
.card__icon  { font-size: 2.4rem; margin-bottom: 1rem; }
.card__title { font-size: 1.08rem; font-weight: 700; color: #0d2d3a; margin-bottom: .5rem; }
.card__text  { font-size: .9rem; color: #556; margin-bottom: 1.1rem; line-height: 1.65; }
.card__link  { font-size: .88rem; font-weight: 700; color: #1a6b8a;
               display: inline-flex; align-items: center; gap: .3rem; }
.card__link::after { content: " →"; }

/* ── TWO-COLUMN ──────────────────────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
.two-col--wide { grid-template-columns: 1.35fr 1fr; }

/* ── CHECK LIST ──────────────────────────────────────────────── */
.check-list { list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
.check-list li { padding: .45rem 0 .45rem 1.9rem; position: relative;
                 font-size: .94rem; color: #333;
                 border-bottom: 1px solid #f0f4f6; }
.check-list li:last-child { border-bottom: none; }
.check-list li::before { content: "✓"; position: absolute; left: 0;
                          color: #27ae60; font-weight: 800; }

/* ── INFO BOXES ──────────────────────────────────────────────── */
.infobox { border-radius: 0 10px 10px 0; padding: 1.2rem 1.5rem; margin: 1.5rem 0; }
.infobox--blue  { background: #e8f4f8; border-left: 4px solid #1a6b8a; }
.infobox--green { background: #eafaf1; border-left: 4px solid #27ae60; }
.infobox--amber { background: #fef9e7; border-left: 4px solid #f39c12; }
.infobox--red   { background: #fdecea; border-left: 4px solid #e74c3c; }
.infobox__title { font-weight: 700; color: #0d2d3a; margin-bottom: .35rem; font-size: .95rem; }
.infobox p, .infobox ul { font-size: .91rem; color: #444; margin-bottom: 0; }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq { margin-top: 1.5rem; }
.faq__item { border: 1px solid #dce8f0; border-radius: 9px; margin-bottom: .7rem; }
.faq__q { padding: 1rem 1.25rem; font-weight: 700; color: #0d2d3a;
          font-size: .93rem; cursor: pointer; display: flex;
          justify-content: space-between; align-items: center;
          background: #f7fbfd; user-select: none; border-radius: 9px; }
.faq__q::after { content: "+"; font-size: 1.35rem; color: #1a6b8a; flex-shrink: 0; }
.faq__a { padding: 1rem 1.25rem; font-size: .9rem; color: #444;
          border-top: 1px solid #dce8f0; line-height: 1.7; }
.faq__a p:last-child { margin-bottom: 0; }

/* ── STATS ROW ───────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 2rem 0; }
.stat  { text-align: center; background: #fff; border: 1px solid #dce8f0;
         border-radius: 10px; padding: 1.5rem 1rem; }
.stat__num   { font-size: 2rem; font-weight: 800; color: #1a6b8a;
               line-height: 1; margin-bottom: .35rem; }
.stat__label { font-size: .8rem; color: #666; }

/* ── TESTIMONIALS ─────────────────────────────────────────────── */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.testi { background: #fff; border: 1px solid #dce8f0; border-radius: 10px; padding: 1.5rem; }
.testi__stars { color: #f39c12; font-size: 1rem; letter-spacing: .05em; margin-bottom: .75rem; }
.testi__body  { font-size: .88rem; color: #444; font-style: italic;
                line-height: 1.65; margin-bottom: 1rem; }
.testi__name  { font-weight: 700; font-size: .85rem; color: #0d2d3a; }
.testi__from  { font-size: .78rem; color: #999; }

/* ── NAP CONTACT CARD ────────────────────────────────────────── */
.nap { background: #1a6b8a; color: #fff; border-radius: 12px; padding: 2rem 2.25rem; }
.nap h3 { color: #a8d8ea; margin-bottom: 1.25rem; font-size: 1.05rem; }
.nap__row { display: flex; gap: .8rem; margin-bottom: 1rem;
            align-items: flex-start; font-size: .92rem; }
.nap__row:last-child { margin-bottom: 0; }
.nap__icon { font-size: 1.1rem; flex-shrink: 0; margin-top: .15rem; }
.nap__tel  { font-size: 1.5rem; font-weight: 800; color: #a8d8ea;
             display: block; margin: .3rem 0 .9rem; }

/* ── MAP ─────────────────────────────────────────────────────── */
.map-wrap { border-radius: 12px; overflow: hidden; border: 3px solid #dce8f0; }
.map-wrap iframe { width: 100%; height: 380px; border: none; display: block; }

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer { background: #071e28; color: rgba(255,255,255,.72); padding: 3.5rem 0 1.5rem; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr;
                gap: 3rem; margin-bottom: 2.5rem; }
.footer__logo    { font-size: 1.1rem; font-weight: 800; color: #fff; margin-bottom: .75rem; }
.footer__tagline { font-size: .85rem; line-height: 1.75; color: rgba(255,255,255,.55); }
.footer__heading { font-size: .76rem; font-weight: 700; text-transform: uppercase;
                   letter-spacing: .1em; color: #a8d8ea; margin-bottom: 1rem; }
.footer__links   { list-style: none; padding: 0; }
.footer__links li{ margin-bottom: .55rem; }
.footer__links a { color: rgba(255,255,255,.62); font-size: .87rem; transition: color .2s; }
.footer__links a:hover { color: #fff; text-decoration: none; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.25rem;
                  font-size: .79rem; color: rgba(255,255,255,.38);
                  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }

/* ── UTILITY ─────────────────────────────────────────────────── */
.mt-1 { margin-top: .75rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.5rem; }
.mb-0 { margin-bottom: 0 !important; }
.text-center  { text-align: center; }
.text-teal    { color: #1a6b8a; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0;
           margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero__grid, .two-col, .two-col--wide, .cards-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr 1fr; }
  .stats      { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .section    { padding: 2.5rem 0; }
  .nav__menu  { display: none; }
  .nav__burger { display: flex; }
  .nav__menu.is-open {
    display: flex; flex-direction: column; position: fixed;
    top: 57px; left: 0; right: 0; background: #145571;
    padding: 1.5rem; gap: .9rem; z-index: 199;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
  }
  .nav__menu.is-open li { border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: .65rem; }
  .testi-grid, .footer__grid { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; }
  .btn   { width: 100%; text-align: center; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}