/* ============================================================
   CMC Health — site stylesheet
   Built on Bootstrap 5 (CDN). Colors/typography match the
   original Oreo Hospital template customizations.
   ============================================================ */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/montserrat-300.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/montserrat-400.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/montserrat-500.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/montserrat-600.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/montserrat-700.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/montserrat-800.woff2') format('woff2');}

:root{
  --navy:#212956;
  --teal:#0fc78d;
  --blue:#1799e2;
  --btn-blue:#007bff;
  --light-bg:#eef1f5;
  --text-dark:#222b45;
  --text-muted:#5b6478;
}

html{scroll-behavior:smooth;}
body{
  font-family:'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text-dark);
  padding-top:130px; /* fixed header height */
}
@media (max-width:767.98px){ body{ padding-top:100px; } }

a{text-decoration:none;}
img{max-width:100%;}
section{scroll-margin-top:130px;}

.section-title{margin-bottom:2.5rem;}
.section-title .eyebrow{
  display:block;
  color:var(--teal);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.85rem;
  margin-bottom:.4rem;
}
.section-title h2{
  font-weight:700;
  color:var(--navy);
  font-size:2.1rem;
}
.section-title p{color:var(--text-muted); max-width:640px;}
.section-title.text-center p{margin-left:auto;margin-right:auto;}

/* ---------- Header / Nav ---------- */
.main_header{
  position:fixed; top:0; left:0; right:0; z-index:1030;
  background:var(--navy);
  padding:10px 0;
  min-height:130px;
  display:flex;
  align-items:center;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  transition:min-height .3s ease, padding .3s ease;
}
@media (max-width:767.98px){ .main_header{min-height:100px;padding:8px 0;} }

.main_header .navbar-brand img{width:150px;transition:width .3s ease;}
@media (max-width:767.98px){ .main_header .navbar-brand img{width:88px;} }

/* Compact state: triggered once the hero section has scrolled fully behind the fixed header */
.main_header.header-compact{min-height:65px;padding:6px 0;}
.main_header.header-compact .navbar-brand img{width:75px;}
@media (max-width:767.98px){
  .main_header.header-compact{min-height:50px;padding:4px 0;}
  .main_header.header-compact .navbar-brand img{width:44px;}
}
.main_header .navbar-nav .nav-link{
  color:#fff;
  font-weight:600;
  font-size:.95rem;
  padding:.5rem 1rem;
  transition:color .2s;
}
.main_header .navbar-nav .nav-link:hover,
.main_header .navbar-nav .nav-link.active{color:var(--teal);}

.whatsapp-nav-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:#25D366;
  color:#fff !important;
  font-weight:700;
  font-size:.9rem;
  padding:.5rem 1rem;
  border-radius:30px;
  margin-left:.75rem;
}
.whatsapp-nav-btn svg{width:18px;height:18px;fill:#fff;}
.whatsapp-nav-btn:hover{background:#1ebe57;}

@media (max-width:991.98px){
  .navbar-collapse{
    position:absolute; top:100%; left:0; right:0;
    background:var(--navy);
    padding:1rem 1.25rem;
    z-index:1029;
  }
  .whatsapp-nav-btn{margin:.75rem 0 0;justify-content:center;}
}

/* Floating WhatsApp bubble (all pages) */
.whatsapp-float{
  position:fixed;
  bottom:22px; right:22px;
  width:58px;height:58px;
  background:#25D366;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  z-index:1040;
  transition:transform .2s;
}
.whatsapp-float:hover{transform:scale(1.08);}
.whatsapp-float svg{width:30px;height:30px;fill:#fff;}

/* ---------- Hero ---------- */
#hero{
  position:relative;
  min-height:600px;
  display:flex;align-items:center;
  background-size:cover;background-position:center;
  color:#fff;
}
#hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg, rgba(23,35,80,.88) 0%, rgba(23,153,226,.72) 100%);
}
#hero .slider{position:relative;z-index:1;padding:80px 0;}
#hero .slider .title{font-weight:300;font-size:1.5rem;margin-bottom:.25rem;}
#hero .slider .title b{font-weight:800;}
#hero .slider .sub-title{font-size:1.15rem;max-width:560px;margin-bottom:1.75rem;opacity:.95;}
.btn-primary-cmc{
  background:var(--btn-blue);border:none;color:#fff;
  padding:.8rem 2rem;border-radius:30px;font-weight:700;
  display:inline-block; transition:background .2s;
}
.btn-primary-cmc:hover{background:#0669d1;color:#fff;}

/* ---------- About ---------- */
#about{padding:90px 0;}
#about img.about-img{border-radius:12px;width:100%;object-fit:cover;}
.hospital-badge{
  display:inline-flex;align-items:center;gap:.75rem;
  background:var(--light-bg);border-radius:10px;padding:.6rem 1rem;
  margin-bottom:1.25rem;
}
.hospital-badge img{height:44px;width:44px;object-fit:contain;}
.hospital-badge span{font-weight:700;color:var(--navy);font-size:.9rem;}
#about p{color:var(--text-muted);line-height:1.75;}

.stats-band{
  background:var(--blue);
  padding:45px 0;
  color:#fff;
}
.stat-item{text-align:center;}
.stat-item img{width:50px;height:50px;margin-bottom:.75rem;filter:brightness(0) invert(1);}
.stat-item .num{font-size:2rem;font-weight:800;display:block;}
.stat-item .label{font-size:.9rem;opacity:.9;}

/* ---------- Hospitals ---------- */
#hospitals{padding:90px 0;background:#fff;}
.hospital-card{
  border-radius:12px;overflow:hidden;
  box-shadow:0 6px 24px rgba(33,41,86,.1);
  height:100%;display:flex;flex-direction:column;
  transition:transform .25s;
}
.hospital-card:hover{transform:translateY(-6px);}
.hospital-card .logo-wrap{
  height:220px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#f4f7fb 0%,#eef1f5 100%);
  padding:1.5rem;
}
.hospital-card .logo-wrap img{max-height:100%;max-width:100%;object-fit:contain;}
.hospital-card .body{padding:1.5rem;display:flex;flex-direction:column;flex:1;}
.hospital-card .loc{color:var(--teal);font-weight:700;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;}
.hospital-card h3{color:var(--navy);font-weight:700;font-size:1.25rem;margin:.35rem 0 .5rem;}
.hospital-card .beds{font-weight:700;color:var(--btn-blue);margin-bottom:.6rem;}
.hospital-card p{color:var(--text-muted);font-size:.92rem;flex:1;}
.hospital-card .btn-learn{
  margin-top:1rem;align-self:flex-start;
  color:var(--btn-blue);font-weight:700;font-size:.9rem;
  border-bottom:2px solid var(--btn-blue);padding-bottom:2px;
}

/* ---------- Services ---------- */
#services{padding:90px 0;background:var(--light-bg);}
.service-tile{text-align:center;padding:1.5rem 1rem;}
.service-tile img{
  width:96px;height:96px;object-fit:contain;
  margin-bottom:1rem;
}
.service-tile .name{font-weight:700;color:var(--navy);font-size:.95rem;}

/* ---------- Emergency CTA banner ---------- */
.emergency-banner{
  background:var(--btn-blue);
  color:#fff;text-align:center;padding:55px 0;
}
.emergency-banner h2{font-weight:800;margin-bottom:1.25rem;}
.btn-outline-light-cmc{
  border:1px solid #fff;color:#fff;padding:.7rem 1.8rem;
  border-radius:30px;font-weight:700;display:inline-block;
}
.btn-outline-light-cmc:hover{background:#fff;color:var(--btn-blue);}

/* ---------- Hospital-page-only sections ---------- */
.contact-block{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 6px 24px rgba(33,41,86,.08);}
.contact-block h4{color:var(--navy);font-weight:700;margin-bottom:1rem;}
.contact-block ul{list-style:none;padding:0;margin:0 0 1.25rem;}
.contact-block ul li{margin-bottom:.6rem;color:var(--text-muted);}
.contact-block ul li strong{color:var(--text-dark);display:inline-block;min-width:110px;}
.service-list-col ul{list-style:none;padding:0;}
.service-list-col ul li{
  padding:.5rem 0 .5rem 1.6rem;
  position:relative;color:var(--text-muted);
  border-bottom:1px solid #e8ebf1;
}
.service-list-col ul li::before{
  content:"";position:absolute;left:0;top:1rem;
  width:8px;height:8px;border-radius:50%;background:var(--teal);
}
.service-list-col h5{color:var(--navy);font-weight:700;margin-bottom:1rem;}

/* Specializations icon grid (hospital pages only) — icons for the specializations that
   have a matching homepage service icon; any without one stay in the plain list below. */
.spec-icon-grid{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.25rem;}
.spec-icon-grid .service-tile-sm{width:82px;text-align:center;}
.spec-icon-grid .service-tile-sm img{width:52px;height:52px;object-fit:contain;margin-bottom:.4rem;}
.spec-icon-grid .service-tile-sm .name{font-size:.72rem;font-weight:700;color:var(--navy);line-height:1.2;}
.spec-text-extra{list-style:none;padding:0;margin:0;}
.spec-text-extra li{
  padding:.5rem 0 .5rem 1.6rem;position:relative;color:var(--text-muted);
  border-bottom:1px solid #e8ebf1;
}
.spec-text-extra li::before{
  content:"";position:absolute;left:0;top:1rem;
  width:8px;height:8px;border-radius:50%;background:var(--teal);
}

/* ---------- Footer ---------- */
footer{background:#1a2140;color:#c7cbe0;padding-top:70px;}
footer h5{color:#fff;font-weight:700;margin-bottom:1.25rem;}
footer p{color:#a7acc9;}
footer a{color:#a7acc9;}
footer a:hover{color:var(--teal);}
footer ul{list-style:none;padding:0;margin:0;}
footer ul li{margin-bottom:.6rem;}
footer .hospital-col{font-size:.92rem;}
footer .hospital-col .hname{color:#fff;font-weight:700;display:block;margin-bottom:.5rem;}
footer .hospital-col p{margin-bottom:.35rem;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:50px;padding:22px 0;
  font-size:.85rem;color:#8489a8;
}
.social-icons{display:flex;align-items:center;gap:.55rem;margin:0;}
.social-icons a{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;
  background:rgba(255,255,255,.08);
  transition:transform .15s ease;
}
.social-icons a svg{width:16px;height:16px;display:block;}
.social-icons a:hover{transform:scale(1.08);}
.social-icons a.facebook{background:#1877F2;}
.social-icons a.instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);}

/* Per-hospital footer actions: Google Maps button + that hospital's own social icons */
.footer-hospital-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.9rem;margin-top:.5rem;}
.footer-maps-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--teal);font-weight:700;font-size:.85rem;
}
.footer-maps-btn svg{width:15px;height:15px;}
.footer-maps-btn:hover{color:#fff;}