/* ==================================================
   NOVACARE HOSPITAL – CLEAN FINAL CSS (RESPONSIVE)
   Single source of truth (NO duplicates)
   ================================================== */

:root{
  --primary:#0a6cff;
  --secondary:#11b5c8;
  --ink:#0b1b2a;
  --muted:#607086;
  --line:#e6eef6;
  --soft:#f6fbff;
  --white:#ffffff;
  --shadow: 0 14px 40px rgba(11,27,42,.08);
}

/* ---------------- BASE ---------------- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--white);
  color: var(--ink);
}
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; height:auto; display:block; }

.fw-black{ font-weight:900; letter-spacing:-.4px; }
.text-muted{ color:var(--muted)!important; }

/* ---------------- UTIL / SECTION ---------------- */
.section-pad{ padding:56px 0; }
@media (max-width:768px){ .section-pad{ padding:44px 0; } }
.bg-soft{ background:var(--soft); }

.section-kicker{
  font-weight:800;
  letter-spacing:.14em;
  font-size:12px;
  color:var(--primary);
  text-transform:uppercase;
  margin-bottom:8px;
}

/* ---------------- TOPBAR ---------------- */
.topbar{
  background:#f0f6ff;
  border-bottom:1px solid var(--line);
  font-size:14px;
}
.topbar i{ color:var(--primary); }

/* ---------------- NAVBAR ---------------- */
.navbar{
  background:#ffffff!important;
  border-bottom:1px solid var(--line);
}
.logo{
  width:44px;
  height:44px;
  object-fit:contain;
}
.brand-name{ font-weight:900; line-height:1.1; }
.brand-tagline{ font-size:12px; color:var(--muted); }

.nav-link{
  font-weight:700;
  color:var(--ink);
}
.nav-link:hover{ color:var(--primary); }
.nav-link.active{ color:var(--primary); }

/* ---------------- BUTTONS ---------------- */
.btn{
  border-radius:14px;
  padding:12px 20px;
  font-weight:800;
}
.btn-lg{ padding:14px 24px; border-radius:16px; }

.btn-primary{ background:var(--primary); border:0; }
.btn-primary:hover{ background:#0857cc; }

.btn-outline-primary{
  border:1px solid #cfe1ff;
  color:var(--primary);
  background:transparent;
}
.btn-outline-primary:hover{ background:#eaf3ff; }

/* ---------------- CARDS ---------------- */
.card-soft{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:20px;
}
.mini-card{
  border-radius:18px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mini-card:hover{
  transform: translateY(-4px);
  border-color:#b9d6ff;
  box-shadow: var(--shadow);
}

/* ---------------- FORMS ---------------- */
.form-control{
  border-radius:14px;
  padding:12px 14px;
  border:1px solid #dce7f3;
}
.form-control:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(10,108,255,.15);
}

/* =========================================================
   HERO (FINAL) — TEXT STAYS ON IMAGE ALWAYS
   Works with your HTML structure:
   .carousel-item > .hero-media img + .hero-overlay + .hero-content
   ========================================================= */

.hero-wrap{ position:relative; margin:0; padding:0; }

/* Slide canvas */
.hero-wrap .carousel,
.hero-wrap .carousel-inner,
.hero-wrap .carousel-item{
  position:relative !important;
  width:100%;
  height:78vh !important;
  min-height:520px !important;
  overflow:hidden !important;
  border-radius:0 0 26px 26px !important;
}

/* Mobile canvas */
@media (max-width:576px){
  .hero-wrap .carousel,
  .hero-wrap .carousel-inner,
  .hero-wrap .carousel-item{
    height:88vh !important;
    min-height:560px !important;
    border-radius:0 0 22px 22px !important;
  }
}

/* Image layer */
.hero-wrap .carousel-item .hero-media{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
}
.hero-wrap .carousel-item .hero-media img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* Overlay layer */
.hero-wrap .carousel-item .hero-overlay{
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  background:linear-gradient(
    to right,
    rgba(255,255,255,.82) 0%,
    rgba(255,255,255,.52) 46%,
    rgba(255,255,255,.10) 100%
  ) !important;
}

/* Mobile overlay (stronger) */
@media (max-width:576px){
  .hero-wrap .carousel-item .hero-overlay{
    background:linear-gradient(
      to bottom,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.60) 55%,
      rgba(255,255,255,.95) 100%
    ) !important;
  }
}

/* Content layer */
.hero-wrap .carousel-item .hero-content{
  position:absolute !important;
  inset:0 !important;
  z-index:3 !important;
  display:flex !important;
  align-items:center !important;
  padding:22px 0 34px !important;
  pointer-events:none;
}
.hero-wrap .hero-content a,
.hero-wrap .hero-content button{ pointer-events:auto; }

/* Mobile content anchor */
@media (max-width:576px){
  .hero-wrap .carousel-item .hero-content{
    align-items:flex-end !important;
    padding:14px 0 54px !important;
  }
}

/* Eyebrow pill */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:999px;
  font-weight:800;
}
.eyebrow .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--secondary);
}

/* Hero text readability (floating directly on image) */
.hero-wrap h1, .hero-wrap h2{
  color:#071726 !important;
  text-shadow:0 10px 28px rgba(0,0,0,.12) !important;
}
.hero-lead{
  font-size:17px;
  max-width:62ch;
  color:rgba(7,23,38,.78) !important;
  text-shadow:0 6px 18px rgba(0,0,0,.08) !important;
}
@media (max-width:768px){ .hero-lead{ font-size:16px; } }

/* Remove any gap after hero */
.hero-wrap + section{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* Controls */
.hero-wrap .carousel-control-prev,
.hero-wrap .carousel-control-next{
  width:52px !important;
  height:52px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.85) !important;
  opacity:1 !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:6 !important;
}
.hero-wrap .carousel-control-prev{ left:14px !important; }
.hero-wrap .carousel-control-next{ right:14px !important; }

@media (max-width:576px){
  .hero-wrap .carousel-control-prev,
  .hero-wrap .carousel-control-next{
    top:44% !important;
    width:46px !important;
    height:46px !important;
  }
}

/* ---------------- FEATURE BOX ---------------- */
.feature-box{
  display:flex;
  gap:12px;
  padding:14px;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:16px;
}
.feature-box i{
  font-size:22px;
  color:var(--primary);
}

/* ---------------- IMAGE CARD ---------------- */
.img-card{
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
}
.img-card img{
  width:100%;
  max-height:420px;
  object-fit:cover;
}
@media (max-width:768px){
  .img-card img{ max-height:320px; }
}

/* ---------------- SERVICES ---------------- */
.svc-card{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px;
  height:100%;
}
.svc-card.enhanced{
  border-radius:26px;
  padding:26px;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-card.enhanced:hover{
  transform: translateY(-8px);
  box-shadow: 0 22px 55px rgba(11,27,42,.14);
  border-color:#b9d6ff;
}
.svc-icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#eaf3ff;
  color:var(--primary);
  font-size:26px;
}
.svc-link{
  display:inline-flex;
  gap:7px;
  align-items:center;
  font-weight:900;
  color:var(--primary);
  margin-top:8px;
}

/* ---------------- GALLERY ---------------- */
.gallery-thumb{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  display:block;
  border:1px solid var(--line);
  background:#fff;
}
.gallery-thumb img{
  width:100%;
  height:180px;
  object-fit:cover;
  transition: transform .35s ease;
}
.gallery-thumb:hover img{ transform: scale(1.06); }
@media (min-width:768px){
  .gallery-thumb img{ height:210px; }
}

/* ---------------- STEPS ---------------- */
.step-card{ border-radius:22px; }
.step-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  border-radius:18px;
  background:#eaf3ff;
  color:var(--primary);
  font-weight:900;
  letter-spacing:.04em;
}

/* ---------------- TESTIMONIALS ---------------- */
.testimonial-card{ border-radius:22px; }
.stars i{ color:#f6b400; margin-right:2px; }

/* ---------------- BOOK STRIP ---------------- */
.book-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:24px;
}

/* ---------------- MAP CARD ---------------- */
.map-card{
  border-radius:24px;
  overflow:hidden;
}
.map-card iframe{ display:block; width:100%; }

/* ---------------- FOOTER ---------------- */
.footer{
  background:#f7fbff;
  border-top:1px solid var(--line);
}
.footer .link{
  font-weight:700;
  color:var(--ink);
}
.footer .link:hover{ color:var(--primary); }

.social{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#eaf3ff;
  color:var(--primary);
}

/* ================= SERVICES MODERN ================= */
.svc-modern{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:20px;
  height:100%;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.svc-modern:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 55px rgba(11,27,42,.12);
  border-color:#b9d6ff;
}

.svc-top{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:10px;
}
.svc-icon{
  width:54px;
  height:54px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:#eaf3ff;
  color:var(--primary);
  font-size:24px;
  flex:0 0 auto;
}
.svc-sub{
  font-size:13px;
  color:var(--muted);
  font-weight:700;
}

.svc-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-weight:900;
  color:var(--primary);
}

/* Mobile "carousel" using scroll snap */
.svc-snap{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: 88%;
  gap:12px;
  overflow-x:auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.svc-snap > a{
  scroll-snap-align: start;
}
.svc-snap::-webkit-scrollbar{ height: 6px; }
.svc-snap::-webkit-scrollbar-thumb{
  background: #d7e7ff;
  border-radius: 999px;
}
/* ================= SERVICES (Modern) ================= */
.svc-modern{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:20px;
  height:100%;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.svc-modern:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 55px rgba(11,27,42,.12);
  border-color:#b9d6ff;
}

.svc-top{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:10px;
}
.svc-sub{
  font-size:13px;
  color:var(--muted);
  font-weight:700;
}

/* Mobile swipe using scroll snap (no library needed) */
.svc-snap{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:88%;
  gap:12px;
  overflow-x:auto;
  padding-bottom:10px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
}
.svc-snap > a{ scroll-snap-align:start; }
.svc-snap::-webkit-scrollbar{ height:6px; }
.svc-snap::-webkit-scrollbar-thumb{
  background:#d7e7ff;
  border-radius:999px;
}
/* services modern cards */
.svc-modern{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:20px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.svc-modern:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 55px rgba(11,27,42,.12);
  border-color:#b9d6ff;
}
.svc-top{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:10px;
}
.svc-sub{
  font-size:13px;
  color:var(--muted);
  font-weight:700;
}