/* ==========================================================================
   Vishwaratna Hospital — brand overrides for the Pluxes theme.
   Loaded AFTER css/custom.css. Theme files are left untouched so the theme
   can be updated without losing these changes.
   ========================================================================== */

:root {
  /* Sampled from the hospital logo: teal arc + navy wordmark. The theme's
     stock accent (#00A8BC) was already close; this matches the logo exactly. */
  --primary-color   : #123C68;   /* logo navy — dark sections, headings */
  --secondary-color : #EAF7F7;   /* pale teal — tinted section grounds */
  --accent-color    : #00A39F;   /* logo teal — buttons, highlights */
  --text-color      : #5A6E78;
  --divider-color   : #123C681A;
}

/* --- Brand lockup in the header ----------------------------------------- */
/* The theme ships a single white wordmark SVG. The hospital logo is a colour
   mark, so it is paired with live text that stays legible on dark and light. */

.navbar-brand.vh-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* images/vh-logo-mark.png is the emblem cropped out of the full lockup — the
   supplied logo carries "Your Health Our Priority" as script type underneath,
   which turned to mush at header size and repeated the tagline set beside it.
   The mark is wider than tall, so it sits on a rounded plate, not a circle. */
.navbar-brand.vh-brand img {
  height: 54px;
  width: auto;
  background: #fff;
  border-radius: 12px;
  padding: 4px 7px;
}
.vh-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.vh-brand-name {
  font-size: 19px;
  font-weight: 700;
  color: var(--white-color);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.vh-brand-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-color);
  white-space: nowrap;
}
@media only screen and (max-width: 575px) {
  .navbar-brand.vh-brand img { height: 38px; padding: 4px 6px; border-radius: 10px; }
  .vh-brand-name { font-size: 16px; }
  .vh-brand-tag { display: none; }
}

.footer-logo-prime.vh-footer-logo img {
  height: 82px;
  width: auto;
  background: #fff;
  border-radius: 14px;
  padding: 8px 12px;
}

/* Header emergency button needs to stay readable at its longer label. */
.header-btn .btn-default { white-space: nowrap; }

/* --- Free patient service links in the footer ---------------------------- */
/* This block reuses .footer-social-links-prime, whose theme styling expects
   round social icons: the <a> is a 40x40 flex circle. Text links must undo
   that on the anchor itself, or each label is squeezed into a 40px column and
   collides with the heading above it. */

.footer-social-links-prime ul.vh-footer-services {
  display: block;
  margin-top: 10px;
}
.footer-social-links-prime ul.vh-footer-services li {
  width: auto;
  height: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 10px;
  line-height: 1.5;
}
.footer-social-links-prime ul.vh-footer-services li:last-child { margin-bottom: 0; }

.footer-social-links-prime ul.vh-footer-services li a {
  display: inline-block;
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  padding: 0 0 0 18px;
  position: relative;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
  color: var(--white-color);
  opacity: 0.85;
}
/* Teal dot, matching the marker on the other footer link columns. */
.footer-social-links-prime ul.vh-footer-services li a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-color);
}
.footer-social-links-prime ul.vh-footer-services li a:hover {
  background: transparent;
  color: var(--accent-color);
  opacity: 1;
}

/* --- Doctor cards ------------------------------------------------------- */
/* The client supplied no photography. Rather than putting a stock model's
   face beside a real doctor's name and KMC registration number, profiles use
   an initials panel. Swap in real portraits when they are available. */

.vh-doctor-initials {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  background: linear-gradient(150deg, var(--primary-color), #0A2A48);
  overflow: hidden;
}
.vh-doctor-initials::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(320px 240px at 50% 10%, rgba(0, 163, 159, 0.38), transparent 62%);
}
.vh-doctor-initials span {
  position: relative;
  z-index: 1;
  font-size: 62px;
  font-weight: 700;
  color: var(--white-color);
  letter-spacing: -0.02em;
}

.vh-doctor-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);
  background: var(--secondary-color);
  border-radius: 8px;
  padding: 6px 12px;
  margin-bottom: 16px;
}

.vh-chip-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 24px; list-style: none; }
.vh-chip-list li {
  font-size: 13px;
  font-weight: 600;
  color: #00706D;
  background: var(--secondary-color);
  border: 1px solid rgba(0, 163, 159, 0.18);
  border-radius: 999px;
  padding: 6px 14px;
}

/* --- Department service lists ------------------------------------------- */

.vh-service-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 0; list-style: none; }
.vh-service-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--primary-color);
  background: var(--bg-color);
  border: 1px solid var(--divider-color);
  border-radius: 10px;
  padding: 12px 16px;
}
.vh-service-list li i { color: var(--accent-color); font-size: 13px; }
@media only screen and (max-width: 991px) { .vh-service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media only screen and (max-width: 575px) { .vh-service-list { grid-template-columns: minmax(0, 1fr); } }

/* --- Patient convenience band ------------------------------------------- */

.vh-convenience-item {
  height: 100%;
  background: var(--bg-color);
  border: 1px solid var(--divider-color);
  border-radius: 20px;
  padding: 36px;
}
.vh-convenience-item .icon-box {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--accent-color);
  margin-bottom: 22px;
}
.vh-convenience-item .icon-box i { font-size: 26px; color: var(--white-color); }
.vh-free-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-color);
  background: var(--secondary-color);
  border-radius: 999px;
  padding: 4px 12px;
  margin-left: 10px;
  vertical-align: middle;
}
.vh-convenience-list { padding: 0; margin: 18px 0 24px; list-style: none; }
.vh-convenience-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--divider-color);
  color: var(--text-color);
  font-size: 15px;
}
.vh-convenience-list li:last-child { border-bottom: none; }
.vh-convenience-list li i { color: var(--accent-color); }
.vh-phone-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--secondary-color);
  border-radius: 999px;
  padding: 10px 18px;
  margin: 0 8px 8px 0;
  font-weight: 600;
  color: var(--primary-color);
  font-size: 15px;
}
.vh-phone-pill small { display: block; font-size: 11px; font-weight: 500; color: var(--text-color); }
.vh-phone-pill:hover { background: var(--accent-color); color: var(--white-color); }
.vh-phone-pill:hover small { color: rgba(255, 255, 255, 0.85); }

/* --- Location cards ----------------------------------------------------- */

.vh-location-card {
  height: 100%;
  background: var(--bg-color);
  border: 1px solid var(--divider-color);
  border-radius: 20px;
  overflow: hidden;
}
.vh-location-map { height: 240px; background: var(--secondary-color); }
.vh-location-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.vh-location-body { padding: 30px; }
.vh-location-row { display: flex; gap: 14px; margin-bottom: 18px; }
.vh-location-row i { color: var(--accent-color); margin-top: 4px; }
.vh-location-row strong { display: block; color: var(--primary-color); font-size: 15px; }
.vh-location-row span, .vh-location-row a { color: var(--text-color); font-size: 15px; }

/* --- Placeholder marking ------------------------------------------------ */
/* These blocks carry no real content yet. The banding is deliberately loud so
   the site cannot be published with them still in place. */

.vh-placeholder {
  position: relative;
  border: 2px dashed rgba(230, 87, 87, 0.55);
  border-radius: 20px;
  background: repeating-linear-gradient(
      45deg, rgba(230, 87, 87, 0.035), rgba(230, 87, 87, 0.035) 12px,
      transparent 12px, transparent 24px);
}
.vh-placeholder-flag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--error-color);
  border-radius: 0 0 10px 0;
  padding: 6px 14px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.vh-placeholder-note {
  font-size: 14px;
  color: var(--error-color);
  font-weight: 600;
  margin-top: 14px;
}

/* --- Form notes and states ---------------------------------------------- */

.vh-form-note { font-size: 13px; color: var(--text-color); margin-top: 14px; line-height: 1.6; }
.dark-section .vh-form-note { color: rgba(255, 255, 255, 0.7); }
.dark-section .vh-form-note a { color: var(--accent-color); }

.form-control.vh-invalid { border-color: var(--error-color) !important; }
.help-block.with-errors { color: var(--error-color); font-size: 13px; margin-top: 6px; }

.vh-form-success { display: none; text-align: center; padding: 30px 20px; }
.vh-form-success .icon-box {
  width: 68px; height: 68px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--accent-color);
  display: grid;
  place-items: center;
}
.vh-form-success .icon-box i { font-size: 28px; color: #fff; }

/* --- Misc --------------------------------------------------------------- */

/* The date input renders short on iOS without this. */
input[type="date"].form-control { min-height: 56px; }

/* --- Header legibility --------------------------------------------------- */
/* Before it sticks, the header floats over the hero photograph, whose upper
   band is bright. Without a scrim the white wordmark is unreadable. */

header.main-header .header-sticky:not(.active) {
  background: linear-gradient(180deg, rgba(9, 34, 56, 0.62) 0%, rgba(9, 34, 56, 0.28) 60%, transparent 100%);
  border-bottom-color: transparent;
}
.vh-brand-name { text-shadow: 0 1px 12px rgba(6, 23, 42, 0.55); }
.vh-brand-tag { color: #5FD8D4; text-shadow: 0 1px 10px rgba(6, 23, 42, 0.6); }
header.main-header .header-sticky.active .vh-brand-name,
header.main-header .header-sticky.active .vh-brand-tag { text-shadow: none; }
header.main-header .header-sticky.active .vh-brand-tag { color: var(--accent-color); }

/* --- Current page in the menu -------------------------------------------- */
/* Bootstrap's own .nav-link.active paints --bs-navbar-active-color, a near
   black that all but vanishes against the dark header. The theme itself
   styles no active state, so it is set here: the brand teal plus a short
   underline, in the light tint over the hero and the full accent once the
   header sticks to white. */

.main-menu .navbar-nav li a.nav-link.active,
.main-menu .navbar-nav li a.nav-link.active:hover,
.main-menu .navbar-nav li a.nav-link.active:focus {
  color: #5FD8D4;
  position: relative;
}
.main-menu .navbar-nav li a.nav-link.active::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
header.main-header .header-sticky.active .main-menu .navbar-nav li a.nav-link.active {
  color: var(--accent-color);
}

/* The mobile menu is a SlickNav clone of the same markup, on a white sheet. */
.slicknav_nav a.active { color: var(--accent-color); }

/* --- Dark overlays re-tinted to the brand navy --------------------------- */
/* The theme hardcodes its own dark teal in these gradients, so changing the
   CSS variable alone leaves them out of step with the new palette. */

.hero-prime::before {
  /* Held darker further right so the headline stays legible over the bright
     side of the photograph. */
  background: linear-gradient(90deg,
      rgba(9, 34, 56, 0.90) 0%,
      rgba(9, 34, 56, 0.78) 42%,
      rgba(9, 34, 56, 0.44) 68%,
      rgba(9, 34, 56, 0.18) 100%);
}
.our-faqs-prime::before {
  background: linear-gradient(90deg, rgba(9, 34, 56, 0.86) 36.54%, rgba(9, 34, 56, 0.20) 63.02%);
}
.page-header::before {
  background: linear-gradient(90deg, rgba(9, 34, 56, 0.86) 30%, rgba(9, 34, 56, 0.42) 100%);
}

/* --- Breadcrumb divider -------------------------------------------------- */
/* The theme's bundled bootstrap.min.css ships --bs-breadcrumb-divider set to
   the literal string "https://html.arisetheme.com/" (the vendor's site mirror
   mangled the original "/"). Left alone, every breadcrumb prints that URL. */

.breadcrumb { --bs-breadcrumb-divider: "/"; }

/* --- Inline icons -------------------------------------------------------- */
/* Sized here because the theme's Font Awesome webfonts are missing from the
   package, so all icons on this site are inline SVG instead. */

.vh-icon { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }
.icon-box .vh-icon { width: 26px; height: 26px; color: var(--white-color); }
.vh-convenience-list .vh-icon,
.vh-service-list .vh-icon { width: 16px; height: 16px; color: var(--accent-color); }
.vh-location-row .vh-icon { width: 18px; height: 18px; color: var(--accent-color); margin-top: 3px; }
.vh-phone-pill .vh-icon { width: 16px; height: 16px; }
.vh-doctor-meta .vh-icon { width: 14px; height: 14px; color: var(--accent-color); }
.vh-form-success .icon-box .vh-icon { width: 28px; height: 28px; }

/* --- Appointment block used away from the hero --------------------------- */
/* .hero-cta-box-prime carries margin-top:-275px so it can ride up over the
   hero image. Reused mid-page it swallows the section above it. */

.hero-cta-box-prime.vh-standalone-cta {
  margin: 0;
  padding: 100px 0;
}
.hero-cta-box-prime.vh-standalone-cta .hero-cta-body-prime { margin-top: 0; }

/* --- Hero without the overlapping appointment box ------------------------ */
/* The theme pads .hero-prime with 380px at the bottom so .hero-cta-box-prime
   can ride up into it. That box is gone from the home page, so the padding
   would otherwise leave a large empty band under the hero copy. */

.hero-prime { padding-bottom: 160px; }

@media only screen and (max-width: 991px) {
  .hero-prime { padding-bottom: 120px; }
}

@media only screen and (max-width: 767px) {
  .hero-prime { padding-bottom: 100px; }
}

/* --- Standalone counter strip -------------------------------------------- */
/* .about-counter-box-prime is built for the single tile that floats over the
   About image: 270px wide, pulled up 55px, with a looping translateX drift,
   and a two-column split that gives the figure a fixed 38% of the tile. Reused
   as a four-up row that split clipped "24x7", which then overlapped its label.
   The .vh-counter-strip wrapper turns the tile into a plain row: figure sized
   to its own text, label taking the rest. */

.vh-counter-strip .about-counter-box-prime {
  max-width: none;
  margin-top: 0;
  animation: none;
  /* Equal height across the row — "Emergency & Casualty" wraps to two lines
     and would otherwise leave the other three tiles short. */
  height: 100%;
  display: flex;
  align-items: center;
}
.vh-counter-strip .about-counter-content-prime { width: 100%; }
.vh-counter-strip .about-counter-content-prime {
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
}
.vh-counter-strip .about-counter-content-prime h2 {
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}
.vh-counter-strip .about-counter-content-prime p {
  width: auto;
  flex: 1 1 auto;
}

@media only screen and (max-width: 991px) {
  /* Two per row at this width; the columns need their own bottom gap once the
     tiles no longer carry the theme's negative top margin. */
  .vh-counter-strip [class*="col-"] { margin-bottom: 20px; }
  .vh-counter-strip .row { margin-bottom: -20px; }
}

/* --- Menu dropdown caret -------------------------------------------------- */
/* The theme draws the submenu caret with the 'FontAwesome' webfont, which is
   missing from the package, so it rendered as an empty box. A CSS chevron
   stands in. */

.main-menu ul li.submenu > a:after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  margin-left: 9px;
  font-family: inherit;
}

/* --- Inner page sections (Facilities, Insurance) ------------------------- */

.vh-page-section { padding: 110px 0; }
.vh-page-section-tinted { padding: 110px 0; }
.vh-section-aside { margin-bottom: 40px; line-height: 1.7; }

@media only screen and (max-width: 991px) {
  .vh-page-section,
  .vh-page-section-tinted { padding: 70px 0; }
  .vh-section-aside { margin-top: -20px; }
}

/* Highlight cards: four headline facilities above the full directory. */
.vh-facility-highlights { row-gap: 30px; }
.vh-facility-feature {
  position: relative;
  height: 100%;
  background: var(--bg-color);
  border: 1px solid var(--divider-color);
  border-radius: 24px;
  padding: 34px 30px;
  overflow: hidden;
  box-shadow: var(--vh-depth-1, none);
  transition: box-shadow .35s ease, border-color .35s ease;
}
.vh-facility-feature:hover { border-color: rgba(0, 163, 159, .35); box-shadow: var(--vh-depth-2, none); }
.vh-facility-feature-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--secondary-color);
  color: var(--accent-color);
  margin-bottom: 26px;
}
.vh-facility-feature-icon .vh-icon { width: 26px; height: 26px; }
.vh-facility-feature h3 { font-size: 20px; margin-bottom: 12px; }
.vh-facility-feature p { margin: 0; line-height: 1.65; }

/* The lead card is navy, with the 24x7 figure set large as a watermark-style
   numeral so the row has one clear focal point. */
.vh-facility-feature-dark {
  background: linear-gradient(155deg, #1A4E82 0%, var(--primary-color) 55%, #0B2A4A 100%);
  border-color: transparent;
}
.vh-facility-feature-dark::after {
  content: '';
  position: absolute;
  right: -60px;
  top: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 163, 159, .45) 0%, transparent 70%);
  pointer-events: none;
}
.vh-facility-feature-dark .vh-facility-feature-icon { background: rgba(255, 255, 255, .1); color: #5FD8D4; }
.vh-facility-feature-dark h3 { color: var(--white-color); }
.vh-facility-feature-dark p { color: rgba(255, 255, 255, .72); }
.vh-facility-feature-figure {
  position: absolute;
  top: 30px;
  right: 28px;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(95, 216, 212, .7);
}

/* Directory groups: a bento of one tall navy card and two stacked light ones. */
.vh-facility-group {
  position: relative;
  background: var(--bg-color);
  border-radius: 24px;
  padding: 36px;
  margin-bottom: 30px;
  box-shadow: var(--vh-depth-1, none);
}
.vh-facility-group-dark {
  height: calc(100% - 30px);
  background: linear-gradient(160deg, #164878 0%, var(--primary-color) 60%, #0B2A4A 100%);
  overflow: hidden;
}
/* Faint cross motif in the corner of the navy card. */
.vh-facility-group-dark::before {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 220px;
  height: 220px;
  background:
    linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05)) center / 34% 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05)) center / 100% 34% no-repeat;
  border-radius: 24px;
  transform: rotate(12deg);
  pointer-events: none;
}
.vh-facility-group-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 24px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--divider-color);
}
.vh-facility-group-dark .vh-facility-group-head { border-bottom-color: var(--dark-divider-color); }
.vh-facility-group-icon {
  width: 54px;
  height: 54px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--accent-color);
  color: var(--white-color);
}
.vh-facility-group-icon .vh-icon { width: 24px; height: 24px; }
.vh-facility-group h3 { font-size: 22px; margin-bottom: 6px; }
.vh-facility-group-dark h3 { color: var(--white-color); }
.vh-facility-count {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-color);
}
.vh-facility-group-dark .vh-facility-count { color: #5FD8D4; }

/* Square teal bullets with an inner ring, echoing the printed brochure. */
.vh-facility-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px 24px; }
.vh-facility-list-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vh-facility-list li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--primary-color);
}
.vh-facility-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--accent-color);
  box-shadow: inset 0 0 0 2.5px var(--bg-color), inset 0 0 0 4px var(--accent-color);
  transition: transform .3s ease;
}
.vh-facility-list li:hover::before { transform: rotate(45deg); }
.vh-facility-group-dark .vh-facility-list li { color: var(--white-color); }
.vh-facility-group-dark .vh-facility-list li::before {
  background: #5FD8D4;
  box-shadow: inset 0 0 0 2.5px var(--primary-color), inset 0 0 0 4px #5FD8D4;
}
.vh-facility-group-dark .vh-facility-list { gap: 20px 24px; }

@media only screen and (max-width: 991px) {
  .vh-facility-group-dark { height: auto; }
}
@media only screen and (max-width: 575px) {
  .vh-facility-group { padding: 28px 22px; }
  .vh-facility-list-2 { grid-template-columns: minmax(0, 1fr); }
}

/* --- Closing call-to-action band ----------------------------------------- */

.vh-page-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-radius: 30px;
  padding: 50px 56px;
  overflow: hidden;
}
.vh-steps + .vh-page-cta { margin-top: 70px; }
.vh-page-cta::after {
  content: '';
  position: absolute;
  left: 35%;
  top: -120px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 163, 159, .35) 0%, transparent 70%);
  pointer-events: none;
}
.vh-page-cta-content,
.vh-page-cta-actions { position: relative; z-index: 1; }
.vh-page-cta-content { max-width: 620px; }
.vh-page-cta-kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5FD8D4;
  margin-bottom: 12px;
}
.vh-page-cta h2 { font-size: 30px; line-height: 1.3; color: var(--white-color); margin: 0; }
.vh-page-cta-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; flex: none; }
.vh-page-cta-phone {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white-color);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  padding: 10px 20px;
  transition: background .3s ease, border-color .3s ease;
}
.vh-page-cta-phone small { display: block; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .7); }
.vh-page-cta-phone:hover { color: var(--white-color); background: rgba(0, 163, 159, .35); border-color: var(--accent-color); }

@media only screen and (max-width: 991px) {
  .vh-page-cta { flex-direction: column; align-items: flex-start; padding: 40px 32px; }
  .vh-page-cta h2 { font-size: 24px; }
}

/* --- Ayushman Bharat banner ---------------------------------------------- */

.vh-scheme-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 34px;
  border-radius: 30px;
  padding: 44px 50px;
  overflow: hidden;
}
/* Saffron-to-green hairline along the top: a quiet nod to the national
   scheme without repainting the card in flag colours. */
.vh-scheme-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50px;
  width: 132px;
  height: 5px;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(90deg, #FF9933 0%, #FF9933 33%, #FFFFFF 33%, #FFFFFF 66%, #138808 66%);
}
.vh-scheme-emblem {
  width: 92px;
  height: 92px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 26px;
  background: var(--vh-glass, rgba(255, 255, 255, .08));
  box-shadow: var(--vh-glass-rim, none);
  color: #5FD8D4;
}
.vh-scheme-emblem .vh-icon { width: 44px; height: 44px; }
.vh-scheme-content { flex: 1 1 auto; }
.vh-scheme-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5FD8D4;
  margin-bottom: 10px;
}
.vh-scheme-content h3 { font-size: 30px; color: var(--white-color); margin-bottom: 10px; }
.vh-scheme-content p { color: rgba(255, 255, 255, .75); margin: 0; line-height: 1.65; max-width: 620px; }
.vh-scheme-btn { flex: none; }

@media only screen and (max-width: 991px) {
  .vh-scheme-banner { flex-direction: column; align-items: flex-start; padding: 40px 30px; gap: 24px; }
  .vh-scheme-emblem { width: 72px; height: 72px; border-radius: 20px; }
  .vh-scheme-emblem .vh-icon { width: 34px; height: 34px; }
  .vh-scheme-content h3 { font-size: 24px; }
}

/* --- Insurance partner grid ---------------------------------------------- */

.vh-insurer-filter {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}
.vh-insurer-filter button {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary-color);
  background: var(--bg-color);
  border: 1px solid var(--divider-color);
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.vh-insurer-filter button span {
  display: inline-block;
  min-width: 24px;
  font-size: 12px;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--secondary-color);
  color: var(--primary-color);
}
.vh-insurer-filter button:hover { border-color: var(--accent-color); }
.vh-insurer-filter button.active { background: var(--primary-color); border-color: var(--primary-color); color: var(--white-color); }
.vh-insurer-filter button.active span { background: var(--accent-color); color: var(--white-color); }
.vh-insurer-filter button:focus-visible { outline: 3px solid #5FD8D4; outline-offset: 3px; }

.vh-insurer-grid { row-gap: 24px; }
.vh-insurer-grid > [data-type].vh-hidden { display: none; }
.vh-insurer-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-color);
  border-radius: 22px;
  padding: 18px 18px 22px;
  box-shadow: var(--vh-depth-1, none);
  transition: box-shadow .35s ease, transform .35s ease;
}
.vh-insurer-card:hover { box-shadow: var(--vh-depth-2, none); }
/* Logo well: fixed height so logos of any aspect ratio line up row to row.
   Supplied logos sit in greyscale and come to full colour on hover, as on a
   sponsors wall, so a dozen brand palettes don't fight each other. */
.vh-insurer-logo {
  height: 110px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(145deg, #F6FBFB 0%, var(--secondary-color) 100%);
  margin-bottom: 18px;
  padding: 16px;
  overflow: hidden;
}
.vh-insurer-logo img {
  max-width: 100%;
  max-height: 70px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .75;
  transition: filter .4s ease, opacity .4s ease;
}
.vh-insurer-card:hover .vh-insurer-logo img { filter: none; opacity: 1; }
.vh-insurer-mark {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--white-color);
  background: linear-gradient(145deg, var(--accent-color) 0%, var(--primary-color) 100%);
  box-shadow: 0 10px 20px -8px rgba(18, 60, 104, .5);
  transition: transform .4s var(--vh-ease, ease);
}
.vh-insurer-card:hover .vh-insurer-mark { transform: scale(1.08) rotate(-4deg); }
.vh-insurer-card h3 {
  font-size: 16px;
  line-height: 1.4;
  margin: 0 4px 12px;
  flex: 1 1 auto;
}
.vh-insurer-type {
  align-self: flex-start;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-color);
  background: var(--secondary-color);
  border-radius: 999px;
  padding: 4px 10px;
}
[data-type="tpa"] .vh-insurer-type { color: var(--primary-color); background: rgba(18, 60, 104, .08); }

@media only screen and (max-width: 991px) {
  .vh-insurer-filter { justify-content: flex-start; margin-top: -10px; }
}
@media only screen and (max-width: 575px) {
  .vh-insurer-grid { row-gap: 14px; margin: 0 -7px; }
  .vh-insurer-grid > [data-type] { padding: 0 7px; }
  .vh-insurer-card { padding: 12px 12px 16px; border-radius: 18px; }
  .vh-insurer-logo { height: 86px; margin-bottom: 14px; }
  .vh-insurer-mark { width: 52px; height: 52px; font-size: 17px; }
  .vh-insurer-card h3 { font-size: 14px; }
}

/* --- Numbered steps ------------------------------------------------------- */

.vh-steps { row-gap: 30px; counter-reset: none; }
.vh-step {
  position: relative;
  height: 100%;
  border: 1px solid var(--divider-color);
  border-radius: 24px;
  padding: 36px 32px;
}
/* Dashed connector between steps on wide screens. */
.vh-steps > [class*="col-"]:not(:last-child) .vh-step::after {
  content: '';
  position: absolute;
  top: 62px;
  right: -31px;
  width: 32px;
  border-top: 2px dashed rgba(0, 163, 159, .45);
}
.vh-step-num {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  font-size: 20px;
  font-weight: 800;
  color: var(--white-color);
  background: linear-gradient(180deg, #14BDB8 0%, var(--accent-color) 55%, #008E8A 100%);
  box-shadow: 0 10px 20px -8px rgba(0, 110, 107, .6);
  margin-bottom: 24px;
}
.vh-step h3 { font-size: 20px; margin-bottom: 10px; }
.vh-step p { margin: 0; line-height: 1.65; }

@media only screen and (max-width: 991px) {
  .vh-steps > [class*="col-"] .vh-step::after { display: none; }
}

/* The tall navy card stretches to match the two stacked cards beside it; the
   booking link is pinned to its foot so the extra height reads as intended. */
.vh-facility-group-dark { display: flex; flex-direction: column; }
.vh-facility-group-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 34px;
  font-weight: 600;
  color: #5FD8D4;
}
.vh-facility-group-link .vh-icon { width: 18px; height: 18px; transition: transform .3s ease; }
.vh-facility-group-link:hover { color: var(--white-color); }
.vh-facility-group-link:hover .vh-icon { transform: translateX(4px); }

/* --- Home page previews: facilities, doctors, insurance ------------------- */
/* Condensed versions of facilities.html, team.html and insurance.html. They
   reuse the page components above and add only what the summaries need. */

/* Facilities: the three directory groups collapse into one summary bar. */
.vh-home-directory {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 30px;
  margin-top: 30px;
  padding: 30px 34px;
  border: 1px solid var(--divider-color);
  border-radius: 24px;
  background: linear-gradient(145deg, #F6FBFB 0%, var(--secondary-color) 100%);
}
.vh-home-directory-item { display: flex; align-items: flex-start; gap: 16px; }
.vh-home-directory-item + .vh-home-directory-item { border-left: 1px solid var(--divider-color); padding-left: 30px; }
.vh-home-directory h3 { font-size: 18px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.vh-home-directory .vh-facility-count {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--white-color);
  background: var(--primary-color);
  border-radius: 999px;
  padding: 5px 9px;
}
.vh-home-directory p { margin: 0; font-size: 14px; line-height: 1.6; }
.vh-home-directory-btn { margin-top: 40px; text-align: center; }

@media only screen and (max-width: 1199px) {
  .vh-home-directory { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .vh-home-directory-item + .vh-home-directory-item { border-left: none; padding-left: 0; border-top: 1px solid var(--divider-color); padding-top: 22px; }
}
@media only screen and (max-width: 575px) {
  .vh-home-directory { padding: 24px 20px; }
}

/* Doctors: the two lead consultants keep their full cards; everyone else
   sits in a compact row underneath. */
.vh-doctors-featured { row-gap: 30px; }
.vh-doc-grid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 60px 0 24px;
}
.vh-doc-grid-head h3 { font-size: 22px; margin: 0; }
.vh-doc-grid-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent-color); }
.vh-doc-grid-link .vh-icon { width: 18px; height: 18px; transition: transform .3s ease; }
.vh-doc-grid-link:hover { color: var(--primary-color); }
.vh-doc-grid-link:hover .vh-icon { transform: translateX(4px); }

.vh-doc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.vh-doc-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  background: var(--bg-color);
  border: 1px solid var(--divider-color);
  border-radius: 20px;
  padding: 24px 22px;
  box-shadow: var(--vh-depth-1, none);
  transition: box-shadow .35s ease, border-color .35s ease;
}
.vh-doc-card:hover { border-color: rgba(0, 163, 159, .35); box-shadow: var(--vh-depth-2, none); }
.vh-doc-card .vh-doctor-initials { width: 64px; border-radius: 16px; margin-bottom: 18px; }
/* :not() matches the specificity of the vh-3d.css rule, which loads later. */
.vh-doc-card .vh-doctor-initials span:not(.vh-doctor-seal) { font-size: 22px; }
.vh-doc-card .vh-doctor-initials::before { inset: 5px; border-radius: 11px; }
.vh-doc-card-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #00706D;
  background: var(--secondary-color);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 12px;
}
.vh-doc-card h4 { font-size: 18px; line-height: 1.3; margin-bottom: 8px; }
.vh-doc-card p { font-size: 14px; line-height: 1.55; margin: 0; }
.vh-doc-card-reg { margin-top: auto; padding-top: 14px; font-size: 12px; font-weight: 600; color: var(--primary-color); }

@media only screen and (max-width: 1199px) { .vh-doc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media only screen and (max-width: 767px)  { .vh-doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .vh-doc-grid-head { margin-top: 44px; } }
@media only screen and (max-width: 420px)  { .vh-doc-grid { grid-template-columns: minmax(0, 1fr); } }

/* Insurance: logo wall beside a vertical version of the cashless steps. */
.vh-home-insurance-body { row-gap: 30px; margin-top: 30px; }
.vh-logo-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; height: 100%; }
.vh-logo-tile {
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: 16px;
  border-radius: 18px;
  background: var(--bg-color);
  box-shadow: var(--vh-depth-1, none);
  transition: box-shadow .35s ease;
}
.vh-logo-tile:hover { box-shadow: var(--vh-depth-2, none); }
/* Greyscale until hover, as on the insurance page's partner wall. */
.vh-logo-tile img {
  max-width: 100%;
  max-height: 52px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .75;
  transition: filter .4s ease, opacity .4s ease;
}
.vh-logo-tile:hover img { filter: none; opacity: 1; }
.vh-logo-tile-more {
  align-content: center;
  gap: 2px;
  text-align: center;
  background: var(--primary-color);
  color: var(--white-color);
}
.vh-logo-tile-more strong { font-size: 16px; }
.vh-logo-tile-more small { font-size: 12px; color: #5FD8D4; }
.vh-logo-tile-more:hover { color: var(--white-color); background: var(--accent-color); }
.vh-logo-tile-more:hover small { color: var(--white-color); }

.vh-home-steps {
  height: 100%;
  background: var(--bg-color);
  border-radius: 24px;
  padding: 32px 30px;
  box-shadow: var(--vh-depth-1, none);
}
.vh-home-steps h3 { font-size: 20px; margin-bottom: 24px; }
.vh-home-steps ol { list-style: none; padding: 0; margin: 0 0 24px; }
.vh-home-steps li { position: relative; display: flex; gap: 16px; padding-bottom: 22px; }
.vh-home-steps li:last-child { padding-bottom: 0; }
/* Dashed line joining the step badges, the vertical twin of .vh-step::after. */
.vh-home-steps li:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 48px;
  bottom: 4px;
  border-left: 2px dashed rgba(0, 163, 159, .45);
}
.vh-home-steps .vh-step-num { flex: none; width: 44px; height: 44px; border-radius: 13px; font-size: 15px; margin: 0; }
.vh-home-steps strong { display: block; color: var(--primary-color); margin-bottom: 4px; }
.vh-home-steps p { margin: 0; font-size: 14px; line-height: 1.55; }
.vh-home-steps-phone {
  display: block;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--secondary-color);
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-color);
}
.vh-home-steps-phone small { display: block; font-size: 12px; font-weight: 500; color: var(--text-color); }
.vh-home-steps-phone:hover { background: var(--accent-color); color: var(--white-color); }
.vh-home-steps-phone:hover small { color: rgba(255, 255, 255, .8); }

@media only screen and (max-width: 991px) { .vh-logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media only screen and (max-width: 575px) {
  .vh-logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vh-logo-tile { min-height: 80px; }
  .vh-home-steps { padding: 26px 22px; }
}