/* Loyola Hospital — 2026 visual redesign */
:root {
  --blue-dark: #073b4c;
  --blue-mid: #087f8c;
  --blue-light: #e9f7f7;
  --green: #16a085;
  --text-dark: #102a43;
  --text-body: #52667a;
  --text-muted: #7b8da0;
  --border: #dce8ec;
  --bg-light: #f5f9fa;
  --shadow-xs: 0 2px 8px rgba(7, 59, 76, .05);
  --shadow-sm: 0 10px 30px rgba(7, 59, 76, .09);
  --shadow-md: 0 20px 50px rgba(7, 59, 76, .13);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
}

body { color: var(--text-body); font-size: 15.5px; background: #fff; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -.025em; color: var(--text-dark); }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
p { color: var(--text-body); }
.container { max-width: 1180px; }
.section-padding { padding: 96px 0; }
.bg-accent, .bg-clean, body.bg-accent { background: var(--bg-light) !important; }
.section-label, .section-badge, .text-secondary.fw-bold.text-uppercase {
  display: inline-flex; align-items: center; gap: 8px; width: auto;
  color: var(--blue-mid) !important; background: var(--blue-light);
  border: 1px solid #cde9e9; border-radius: 999px; padding: 7px 13px;
  font-size: .72rem; font-weight: 800; letter-spacing: .11em; margin-bottom: 16px;
}
.section-label::before, .section-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

.top-bar { background: var(--blue-dark); padding: 9px 0; font-size: .78rem; }
.site-header { border: 0; box-shadow: 0 1px 0 var(--border); }
.site-header.scrolled { box-shadow: 0 10px 35px rgba(7,59,76,.1); }
.navbar { min-height: 78px; }
.navbar-brand img { height: 60px; width: auto; }
.nav-link { padding: 10px 13px !important; border-radius: 9px; font-weight: 600; color: #314b5b !important; }
.nav-link:hover, .nav-link.active { color: var(--blue-mid) !important; background: var(--blue-light); }
.navbar-toggler { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(8,127,140,.12); }

.btn-custom, .btn { border-radius: 10px; }
.btn-custom { min-height: 44px; justify-content: center; padding: 11px 21px; }
.btn-primary-custom { background: var(--blue-mid); }
.btn-primary-custom:hover { background: var(--blue-dark); }
.btn-outline-custom { border-color: var(--blue-mid); color: var(--blue-mid); }
.btn-outline-custom:hover { background: var(--blue-mid); }
.btn-success { background: #148f77; border-color: #148f77; }

.hero-section { min-height: min(760px, 78vh); }
.hero-overlay { background: linear-gradient(90deg, rgba(4,31,43,.9) 0%, rgba(4,31,43,.72) 44%, rgba(4,31,43,.18) 78%, rgba(4,31,43,.08) 100%); }
.hero-title {
  max-width: 760px;
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.65rem, 4.25vw, 4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.035em;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .12);
}
.hero-highlight { color: #ffd166; }
.hero-subtitle { font-size: 1.05rem; line-height: 1.8; max-width: 610px; }
.hero-section .btn { padding: 13px 23px !important; border-radius: 10px !important; }
.hero-section .swiper-pagination-bullet { width: 28px; height: 4px; border-radius: 10px; background: #fff; }

.quick-bar { position: relative; z-index: 5; border: 0 !important; box-shadow: 0 15px 45px rgba(7,59,76,.08) !important; }
.quick-item { padding: 22px 18px; gap: 14px; }
.quick-item .qi-icon, .cinfo-icon { background: var(--blue-light); color: var(--blue-mid); border-radius: 12px; }
.quick-item .qi-label, .cinfo-item .cl { color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.quick-item .qi-value, .cinfo-item .cv { color: var(--text-dark); }

.service-card, .clean-card, .review-card, .testimonial-card, .stat-box,
.section-padding .bg-white.border.rounded-3, .section-padding .bg-white.rounded-4.shadow-sm {
  border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.service-card:hover, .clean-card:hover, .review-card:hover, .doctor-card:hover {
  transform: translateY(-6px); box-shadow: var(--shadow-sm); border-color: #b9dcdf !important;
}
.service-card { padding: 30px; }
.service-card::after { height: 4px; background: linear-gradient(90deg, var(--blue-mid), var(--green)); }
.service-card > img { height: 230px !important; object-fit: cover; }
.service-card .service-whatsapp { background: #148f77; color: #fff; border: 1px solid #148f77; }
.service-card .service-whatsapp:hover { background: #0d725f; border-color: #0d725f; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,143,119,.2); }
.service-icon, .dept-icon { background: var(--blue-light); color: var(--blue-mid); border-radius: 14px; }
.dept-card { border-color: var(--border); border-radius: var(--radius-md); padding: 26px 16px; box-shadow: var(--shadow-xs); }
.dept-card:hover { border-color: #a9d4d7; box-shadow: var(--shadow-sm); }
.dept-card:hover .dept-icon { background: var(--blue-mid); }
.why-num { background: var(--blue-mid); border-radius: 10px; }
.why-item { padding: 18px 0; }

.stats-strip { background: linear-gradient(120deg, var(--blue-dark), #075b68); }
.stat-item { padding: 40px 16px; }
.stat-item .snum { color: #fff; }
.appt-strip { background: #eaf8f7; border-color: #cde9e9; padding: 12px 0; }

.doctor-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); overflow: hidden; transition: .3s ease; }
.doctor-img-wrap { background: linear-gradient(145deg, #edf7f8, #dceff0) !important; }
.doctor-img-wrap img { width: 100%; height: 290px; object-fit: cover; object-position: center top; }
.doctor-dept-badge { background: rgba(255,255,255,.94) !important; color: var(--blue-dark) !important; border: 1px solid rgba(220,232,236,.9); box-shadow: 0 4px 16px rgba(7,59,76,.1); }
.doctor-body { background: #fff; padding: 24px !important; text-align: center; }
.doctor-body h5 { font-size: 1.08rem; }
.doctor-body .qualification { color: var(--blue-mid) !important; }

.gallery-thumb { border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.gallery-thumb img { transition: transform .5s ease; }
.gallery-thumb:hover img { transform: scale(1.07); }
.section-padding .rounded-4.overflow-hidden.shadow-sm { border-radius: var(--radius-md) !important; box-shadow: var(--shadow-xs) !important; min-height: 280px; }
.section-padding .rounded-4.overflow-hidden.shadow-sm img { object-fit: cover !important; transition: transform .5s ease; }
.section-padding .rounded-4.overflow-hidden.shadow-sm:hover img { transform: scale(1.05); }
.review-card { padding: 28px; }
.review-card p { font-style: normal; line-height: 1.8; }
.rev-initial { background: var(--blue-mid); }

.page-header { position: relative; padding: 105px 0 80px; background: linear-gradient(90deg, rgba(4,31,43,.9), rgba(7,59,76,.66)), url('../Gallery/loyal-image.webp') center 38%/cover no-repeat; }
.page-header::after { content: ''; position: absolute; inset: auto 0 0; height: 1px; background: rgba(255,255,255,.2); }
.page-header h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); letter-spacing: -.04em; }
.breadcrumb { margin-bottom: 0; }

.form-control, .form-select { min-height: 49px; border-color: var(--border); border-radius: 10px; background: #fbfdfe; }
textarea.form-control { min-height: 130px; }
.form-control:focus, .form-select:focus { border-color: var(--blue-mid); box-shadow: 0 0 0 4px rgba(8,127,140,.11); background: #fff; }
.contact-bar { background: #fff; }
.cinfo-item { min-height: 102px; }
iframe { filter: saturate(.8) contrast(.96); }

.site-footer { background: #062f3c; padding-top: 78px; }
.site-footer h5::after { background: #58c9c3; }
.footer-links a, .site-footer, .site-footer p { color: #a9bec7; }
.footer-links a:hover { color: #fff; }
.social-icons a { border-radius: 10px; }
.social-icons a:hover { background: var(--blue-mid); }
.footer-bottom { margin-top: 55px; border-color: rgba(255,255,255,.1); }
.floating-btn { width: 50px; height: 50px; box-shadow: 0 8px 24px rgba(7,59,76,.22); }
.floating-call { background: var(--blue-mid); }

@media (max-width: 991px) {
  .section-padding { padding: 72px 0; }
  .navbar { min-height: 72px; }
  .navbar-brand img { height: 54px; }
  .navbar-collapse { padding: 14px 0 20px; }
  .navbar-nav { padding: 8px 0; }
  .nav-link { padding: 11px 13px !important; }
  .navbar-collapse .d-flex { align-items: stretch !important; }
  .hero-section { min-height: 680px; }
  .hero-overlay { background: rgba(4,31,43,.76); }
  .quick-item, .cinfo-item { border-bottom: 1px solid #eef3f5; }
}

@media (max-width: 576px) {
  body { font-size: 15px; }
  .section-padding { padding: 58px 0; }
  .hero-section { min-height: 650px; text-align: center; }
  .hero-title { font-size: 2.3rem; line-height: 1.16; letter-spacing: -.025em; }
  .hero-subtitle { font-size: .96rem; }
  .hero-section .d-flex { justify-content: center; }
  .quick-item { padding: 16px 10px; gap: 9px; }
  .quick-item .qi-icon { width: 36px; height: 36px; }
  .quick-item .qi-value { font-size: .79rem; }
  .service-card > img { height: 210px !important; }
  .doctor-img-wrap img { height: 260px; }
  .page-header { padding: 76px 0 58px; }
  .page-header h1 { font-size: 2.25rem; }
  .section-padding .p-5 { padding: 1.5rem !important; }
  .cinfo-item { border-right: 0; padding: 17px 8px; }
  .floating-btn { right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}