/* Simple stylesheet for the Parumala Hospital homepage. */
/* This version avoids too many advanced helper classes so it is easier to study. */

/* These Google imports load the text font and icon font used by the page. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Atkinson+Hyperlegible+Next:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* Variables keep repeated values in one place. */
:root {
  --primary: #111827; /* Main dark color. */
  --secondary: #006a61; /* Main green brand color. */
  --danger: #ba1a1a; /* Red color for emergency buttons. */
  --light-bg: #f8f9ff; /* Very light page background. */
  --soft-bg: #eff4ff; /* Light blue section background. */
  --dark-bg: #131b2e; /* Dark section background. */
  --card-bg: #ffffff; /* White card background. */
  --text: #0b1c30; /* Normal text color. */
  --muted-text: #45464d; /* Softer text color. */
  --border: #c6c6cd; /* Light border color. */
  --heading-font: 'Plus Jakarta Sans', sans-serif; /* Font used for headings. */
  --body-font: 'Atkinson Hyperlegible Next', sans-serif; /* Font used for body text. */
  --container-width: 1280px; /* Maximum content width. */
  --section-space: 80px; /* Top and bottom spacing for big sections. */
  --page-padding: 48px; /* Left and right desktop spacing. */
  --mobile-padding: 16px; /* Left and right mobile spacing. */
  --radius: 16px; /* Normal rounded corner size. */
  --radius-large: 28px; /* Larger rounded corner size for cards. */
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.12); /* Reusable shadow. */
}

/* This makes width and height easier to understand. */
* {
  box-sizing: border-box; /* Padding and border are included inside element width. */
  margin: 0; /* Remove browser default outer spacing. */
  padding: 0; /* Remove browser default inner spacing. */
}

/* Smooth scrolling makes menu links glide to sections. */
html {
  scroll-behavior: smooth; /* Animate anchor link scrolling. */
}

/* Main page styles. */
body {
  font-family: var(--body-font); /* Use the readable body font. */
  font-size: 16px; /* Set the base text size. */
  line-height: 1.6; /* Add comfortable line spacing. */
  color: var(--text); /* Set normal text color. */
  background: var(--light-bg); /* Set page background color. */
}

body.modal-open {
  overflow: hidden; /* Prevent page scroll behind modal. */
}

/* Images should never overflow their parent. */
img {
  display: block; /* Removes tiny space below images. */
  max-width: 100%; /* Makes images responsive. */
}

/* Links inherit color so each section can style them. */
a {
  color: inherit; /* Use parent text color. */
  text-decoration: none; /* Remove underline by default. */
}

/* Remove bullet points from lists by default. */
ul {
  list-style: none; /* Hide browser list bullets. */
}

/* Shared container used inside most sections. */
.container {
  max-width: var(--container-width); /* Stop content from becoming too wide. */
  margin: 0 auto; /* Center the container. */
  padding: 0 var(--page-padding); /* Add left and right spacing. */
}

/* Google Material Symbols icon setup. */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; /* Normal outline icon style. */
  display: inline-block; /* Allows the icon to sit beside text. */
  vertical-align: middle; /* Align icon with nearby text. */
  font-size: 1.25rem; /* Default icon size. */
}

/* Filled icons are useful for stars and hearts. */
.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; /* Filled icon style. */
}

/* Small icon helper used in the feature list. */
.text-sm {
  font-size: 0.875rem; /* Make an icon/text smaller. */
}

/* Simple color helpers used in the HTML. */
.text-secondary { color: var(--secondary); } /* Green text. */
.text-primary { color: var(--primary); } /* Dark text. */
.text-on-surface-variant { color: var(--muted-text); } /* Muted text. */
.bg-primary-fixed { background: #e6efff; color: #18406f; } /* Soft blue icon background. */
.bg-secondary-fixed { background: #d9fff7; color: var(--secondary); } /* Soft green icon background. */
.text-label-md { font-size: 14px; font-weight: 600; } /* Small bold label text. */
.text-headline-md { font-family: var(--heading-font); font-size: 24px; font-weight: 600; } /* Medium heading text. */
.text-body-md { font-size: 16px; } /* Normal body text helper. */
.h-14 { height: 3.5rem; } /* Logo height helper. */

.medical-icon {
  width: var(--icon-size, 34px); /* Keep medical icons consistent. */
  height: var(--icon-size, 34px); /* Keep medical icons consistent. */
  display: block; /* Avoid inline alignment gaps. */
  background: currentColor; /* Let each card control the icon color. */
  -webkit-mask: var(--icon-url) center / contain no-repeat; /* Recolor local SVGs. */
  mask: var(--icon-url) center / contain no-repeat; /* Recolor local SVGs. */
}

.icon-oncology { --icon-url: url("icons/medical/oncology.svg"); }
.icon-cardiothoracic { --icon-url: url("icons/medical/cardiothoracic.svg"); }
.icon-renal { --icon-url: url("icons/medical/renal.svg"); }
.icon-neurology { --icon-url: url("icons/medical/neurology.svg"); }
.icon-gastroenterology { --icon-url: url("icons/medical/gastroenterology.svg"); }
.icon-critical-care { --icon-url: url("icons/medical/critical-care.svg"); }
.icon-surgery { --icon-url: url("icons/medical/surgery.svg"); }
.icon-orthopedics { --icon-url: url("icons/medical/orthopedics.svg"); }
.icon-radiology { --icon-url: url("icons/medical/radiology.svg"); }
.icon-anesthesia { --icon-url: url("icons/medical/anesthesia.svg"); }
.icon-dental { --icon-url: url("icons/medical/dental.svg"); }
.icon-dermatology { --icon-url: url("icons/medical/dermatology.svg"); }
.icon-pediatrics { --icon-url: url("icons/medical/pediatrics.svg"); }
.icon-ophthalmology { --icon-url: url("icons/medical/ophthalmology.svg"); }
.icon-pulmonology { --icon-url: url("icons/medical/pulmonology.svg"); }
.icon-urology { --icon-url: url("icons/medical/urology.svg"); }
.icon-psychiatry { --icon-url: url("icons/medical/psychiatry.svg"); }
.icon-endocrinology { --icon-url: url("icons/medical/endocrinology.svg"); }
.icon-view-all { --icon-url: url("icons/medical/view-all.svg"); }

.department-png-icon {
  width: var(--department-icon-size, 42px); /* Keep department PNG masks consistent. */
  height: var(--department-icon-size, 42px); /* Keep department PNG masks consistent. */
  display: block; /* Avoid inline alignment gaps. */
  flex-shrink: 0; /* Keep icon size stable in card layouts. */
  background: currentColor; /* Recolor monochrome PNG masks. */
  -webkit-mask: var(--department-icon-url) center / contain no-repeat; /* Fit PNG mask. */
  mask: var(--department-icon-url) center / contain no-repeat; /* Fit PNG mask. */
}

.icon-dept-anaesthesiology { --department-icon-url: url("icons/department/anaesthesiology.png"); }
.icon-dept-cardiology { --department-icon-url: url("icons/department/cardiology.png"); }
.icon-dept-cardiothoracic { --department-icon-url: url("icons/department/cardiothoracic.png"); }
.icon-dept-child-care { --department-icon-url: url("icons/department/child-care.png"); }
.icon-dept-rehab-psychology { --department-icon-url: url("icons/department/rehab-psychology.png"); }
.icon-dept-critical-care { --department-icon-url: url("icons/department/critical-care.png"); }
.icon-dept-dental { --department-icon-url: url("icons/department/dental.png"); }
.icon-dept-dermatology { --department-icon-url: url("icons/department/dermatology.png"); }
.icon-dept-emergency { --department-icon-url: url("icons/department/emergency.png"); }
.icon-dept-endocrinology { --department-icon-url: url("icons/department/endocrinology.png"); }
.icon-dept-ent { --department-icon-url: url("icons/department/ent.png"); }
.icon-dept-gastroenterology { --department-icon-url: url("icons/department/gastroenterology.png"); }
.icon-dept-surgery { --department-icon-url: url("icons/department/surgery.png"); }
.icon-dept-general-medicine { --department-icon-url: url("icons/department/general-medicine.png"); }
.icon-dept-head-neck { --department-icon-url: url("icons/department/head-neck.png"); }
.icon-dept-interventional-neurology { --department-icon-url: url("icons/department/interventional-neurology.png"); }
.icon-dept-radiology { --department-icon-url: url("icons/department/radiology.png"); }
.icon-dept-microbiology { --department-icon-url: url("icons/department/microbiology.png"); }
.icon-dept-neonatology { --department-icon-url: url("icons/department/neonatology.png"); }
.icon-dept-nephrology { --department-icon-url: url("icons/department/nephrology.png"); }
.icon-dept-neuro-surgery { --department-icon-url: url("icons/department/neuro-surgery.png"); }
.icon-dept-neurology { --department-icon-url: url("icons/department/neurology.png"); }
.icon-dept-nuclear-medicine { --department-icon-url: url("icons/department/nuclear-medicine.png"); }
.icon-dept-obstetrics-gynaecology { --department-icon-url: url("icons/department/obstetrics-gynaecology.png"); }
.icon-dept-oncology { --department-icon-url: url("icons/department/oncology.png"); }
.icon-dept-ophthalmology { --department-icon-url: url("icons/department/ophthalmology.png"); }
.icon-dept-orthopedics { --department-icon-url: url("icons/department/orthopedics.png"); }
.icon-dept-paediatric-neurology { --department-icon-url: url("icons/department/paediatric-neurology.png"); }
.icon-dept-palliative-medicine { --department-icon-url: url("icons/department/palliative-medicine.png"); }
.icon-dept-pathology { --department-icon-url: url("icons/department/pathology.png"); }
.icon-dept-pediatrics { --department-icon-url: url("icons/department/pediatrics.png"); }
.icon-dept-paediatric-intensive-care { --department-icon-url: url("icons/department/paediatric-intensive-care.png"); }
.icon-dept-physiotherapy { --department-icon-url: url("icons/department/physiotherapy.png"); }
.icon-dept-plastic-surgery { --department-icon-url: url("icons/department/plastic-surgery.png"); }
.icon-dept-psychiatry { --department-icon-url: url("icons/department/psychiatry.png"); }
.icon-dept-pulmonology { --department-icon-url: url("icons/department/pulmonology.png"); }
.icon-dept-rheumatology { --department-icon-url: url("icons/department/rheumatology.png"); }
.icon-dept-urology { --department-icon-url: url("icons/department/urology.png"); }
.icon-dept-view-all { --department-icon-url: url("icons/department/view-all.png"); }

/* Header stays at the top while scrolling. */
.site-header {
  position: sticky; /* Keep header visible at top. */
  top: 0; /* Stick to the top edge. */
  z-index: 50; /* Keep header above other content. */
  background: var(--light-bg); /* Header background. */
  border-bottom: 1px solid var(--border); /* Thin line below header. */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); /* Light shadow. */
}

/* Navigation layout. */
.nav-inner {
  max-width: var(--container-width); /* Match site width. */
  height: 80px; /* Header height. */
  margin: 0 auto; /* Center nav content. */
  padding: 0 var(--page-padding); /* Desktop side spacing. */
  display: flex; /* Put logo, links, and buttons in one row. */
  align-items: center; /* Vertically center nav items. */
  justify-content: space-between; /* Put space between nav groups. */
  gap: 24px; /* Space between nav groups. */
}

/* Logo link layout. */
.nav-logo a {
  display: flex; /* Put logo image and text side by side. */
  align-items: center; /* Center logo and text vertically. */
  gap: 12px; /* Space between logo image and text. */
}

/* Logo image size. */
.nav-logo-img {
  width: 56px; /* Keep logo image compact in the navbar. */
  height: 56px; /* Keep logo image square. */
  border-radius: 12px; /* Slightly round the logo corners. */
  object-fit: cover; /* Crop image neatly inside the square. */
}

/* Brand text beside the logo. */
.brand-text {
  display: flex; /* Stack name and subtitle. */
  flex-direction: column; /* Put subtitle under the name. */
  line-height: 1.15; /* Keep the two text lines close. */
}

/* Main hospital name in the navbar. */
.brand-name {
  max-width: 270px; /* Keep the long hospital name inside the navbar. */
  color: var(--primary); /* Use dark heading color. */
  font-family: var(--heading-font); /* Use heading font for the brand name. */
  font-size: 16px; /* Keep the long name readable. */
  font-weight: 800; /* Make the name stand out. */
}

/* Small subtitle below the hospital name. */
.brand-subtitle {
  color: var(--muted-text); /* Use softer color for secondary text. */
  font-size: 12px; /* Smaller subtitle text. */
  font-weight: 700; /* Keep subtitle clear. */
}

/* Main desktop menu. */
.nav-links {
  display: flex; /* Show links in a row. */
  align-items: center; /* Center links vertically. */
  gap: 24px; /* Space between each link. */
}

/* Individual menu link. */
.nav-link {
  color: var(--muted-text); /* Softer text color. */
  font-size: 14px; /* Small menu text. */
  font-weight: 600; /* Make menu text bold. */
  padding-bottom: 4px; /* Space for active underline. */
}

/* Menu link hover and active state. */
.nav-link:hover,
.nav-link.active {
  color: var(--secondary); /* Turn green. */
  border-bottom: 2px solid var(--secondary); /* Add underline. */
}

/* Right side nav buttons. */
.nav-actions {
  display: flex; /* Put items in a row. */
  align-items: center; /* Center items vertically. */
  gap: 12px; /* Add space between items. */
}

/* Shared button style. */
.btn {
  display: inline-flex; /* Allows text and icon side by side. */
  align-items: center; /* Center content vertically. */
  gap: 8px; /* Space between text and icon. */
  border: 0; /* Remove default border. */
  border-radius: var(--radius); /* Round corners. */
  padding: 10px 18px; /* Button spacing. */
  font: inherit; /* Use the page font. */
  font-weight: 700; /* Make button text bold. */
  cursor: pointer; /* Show pointer on hover. */
  transition: transform 0.2s, opacity 0.2s, background 0.2s; /* Smooth hover changes. */
}

/* Small button hover movement. */
.btn:hover {
  transform: translateY(-1px); /* Lift button slightly. */
  opacity: 0.92; /* Slightly fade button. */
}

/* Green primary button. */
.btn-primary {
  background: var(--secondary); /* Green background. */
  color: white; /* White text. */
}

/* Contact button used in the header. */
.btn-contact {
  background: var(--primary); /* Dark background. */
  color: white; /* White text. */
}

/* Outline button used in hero. */
.btn-ghost {
  background: transparent; /* No background. */
  border: 2px solid var(--secondary); /* Green border. */
  color: var(--secondary); /* Green text. */
}

/* Bigger hero buttons. */
.btn-large {
  padding: 16px 28px; /* Larger spacing. */
  font-family: var(--heading-font); /* Heading font. */
  font-size: 22px; /* Bigger text. */
}

/* Mobile menu button is hidden on desktop. */
.menu-toggle {
  display: none; /* Only show on small screens. */
  background: transparent; /* No background. */
  border: 0; /* No border. */
  cursor: pointer; /* Clickable cursor. */
}

/* Hero section background. */
.hero-section {
  background: linear-gradient(135deg, var(--light-bg), var(--soft-bg)); /* Light gradient. */
  overflow: hidden; /* Hide anything outside the section. */
}

/* Hero content layout. */
.hero-inner {
  display: flex; /* Text and image side by side. */
  align-items: center; /* Vertically align text and image. */
  gap: 32px; /* Space between columns. */
  padding-top: 24px; /* Small breathing room below the header. */
  padding-bottom: var(--section-space); /* Bottom spacing. */
}

/* Hero text column. */
.hero-text {
  flex: 1; /* Take half the row. */
}

/* Small green label above the main heading. */
.established {
  display: block; /* Put label on its own line. */
  margin-bottom: 8px; /* Space below label. */
  color: var(--secondary); /* Green text. */
  font-size: 14px; /* Small label size. */
  font-weight: 700; /* Bold label. */
  text-transform: uppercase; /* Capital letters. */
  letter-spacing: 0.08em; /* Extra letter spacing. */
}

/* Main hero heading. */
.hero-text h1 {
  max-width: 650px; /* Keep heading from stretching too wide. */
  margin-bottom: 16px; /* Space below heading. */
  font-family: var(--heading-font); /* Heading font. */
  font-size: 48px; /* Large desktop heading. */
  line-height: 1.2; /* Tight heading line height. */
}

/* Hero paragraph. */
.hero-text p {
  max-width: 520px; /* Keep paragraph readable. */
  margin-bottom: 32px; /* Space before buttons. */
  color: var(--muted-text); /* Softer text color. */
  font-size: 18px; /* Slightly larger text. */
}

/* Hero button row. */
.hero-actions {
  display: flex; /* Put buttons in one row. */
  flex-wrap: wrap; /* Allow wrapping on small screens. */
  gap: 16px; /* Space between buttons. */
}

/* Search panel below the hero buttons. */
.hero-search {
  max-width: 620px; /* Keep the search panel from becoming too wide. */
  margin-top: 26px; /* Add space below the hero buttons. */
  padding: 16px; /* Add space inside the search panel. */
  background: rgba(255, 255, 255, 0.86); /* Light panel background. */
  border: 1px solid var(--border); /* Add a thin border. */
  border-radius: 20px; /* Round the search panel corners. */
  box-shadow: 0 8px 22px rgba(11, 28, 48, 0.10); /* Add a soft shadow. */
}

/* Doctor and department switch row. */
.search-type {
  display: inline-flex; /* Put switch buttons in one row. */
  padding: 4px; /* Add space around the buttons. */
  margin-bottom: 12px; /* Add space below the switch row. */
  background: var(--soft-bg); /* Soft background for the switch. */
  border-radius: 999px; /* Make the switch pill shaped. */
}

/* Search type button. */
.search-type-btn {
  border: 0; /* Remove default button border. */
  padding: 8px 14px; /* Add space inside the button. */
  background: transparent; /* Keep inactive buttons transparent. */
  color: var(--muted-text); /* Use muted text for inactive buttons. */
  border-radius: 999px; /* Make each button rounded. */
  font: inherit; /* Use the page font. */
  font-weight: 800; /* Make button text bold. */
  cursor: pointer; /* Show pointer cursor on hover. */
}

/* Active search type button. */
.search-type-btn.active {
  background: var(--secondary); /* Make the active button green. */
  color: white; /* Make active button text white. */
}

/* Search input row. */
.search-row {
  display: flex; /* Put icon, input, and button in one row. */
  align-items: center; /* Center items vertically. */
  gap: 10px; /* Add space between search controls. */
}

/* Search icon. */
.search-row .material-symbols-outlined {
  color: var(--secondary); /* Make the search icon green. */
}

/* Search text input. */
.search-row input {
  min-width: 0; /* Allow the input to shrink on small screens. */
  flex: 1; /* Make the input take available space. */
  border: 0; /* Remove default border. */
  outline: 0; /* Remove default focus outline. */
  background: transparent; /* Keep the input background clean. */
  color: var(--text); /* Use normal text color. */
  font: inherit; /* Use the page font. */
}

/* Search input placeholder text. */
.search-row input::placeholder {
  color: var(--muted-text); /* Use muted placeholder color. */
}

/* Message below search box. */
.search-message {
  min-height: 22px; /* Reserve space so layout does not jump. */
  margin-top: 10px; /* Add space above the message. */
  color: var(--muted-text); /* Use muted message text. */
  font-size: 14px; /* Make message text smaller. */
  font-weight: 700; /* Make message text readable. */
}

/* Highlight a department card after search. */
.dept-card.search-highlight {
  border-color: var(--secondary); /* Highlight matching card border. */
  box-shadow: var(--shadow); /* Add a stronger shadow. */
  background: #f2fffc; /* Add a light green background. */
}

/* Hero image column. */
.hero-image-wrap {
  position: relative; /* Lets badge position inside this area. */
  flex: 1; /* Take half the row. */
}

/* Rounded image box. */
.hero-img-container {
  position: relative; /* Allows overlay to sit on image. */
  overflow: hidden; /* Clip image corners. */
  border-radius: var(--radius-large); /* Large rounded corners. */
  box-shadow: var(--shadow); /* Add depth. */
}

.hero-slider-track {
  display: flex; /* Put hero slides in one moving row. */
  width: 100%; /* Match image container width. */
  transition: transform 800ms ease; /* Smooth slide movement. */
  will-change: transform; /* Keep animation fluid. */
}

/* Hero slide image itself. */
.hero-slide {
  width: 100%; /* Each slide fills the image box. */
  min-width: 100%; /* Keep slides from shrinking. */
  height: 500px; /* Fixed desktop height. */
  object-fit: cover; /* Crop image nicely. */
}

@media (max-width: 1024px) {
  [data-tablet-position] {
    object-position: var(--tablet-object-position, center center) !important;
    background-position: var(--tablet-object-position, center center) !important;
  }
}

@media (max-width: 768px) {
  .hero-slide[data-mobile-position] {
    object-position: var(--mobile-object-position, center center) !important;
  }

  [data-mobile-position] {
    object-position: var(--mobile-object-position, center center) !important;
    background-position: var(--mobile-object-position, center center) !important;
  }
}

.hero-img-container.is-static .hero-slider-track {
  transition: none; /* No movement when only one image exists. */
}

/* Dark fade over the bottom of the hero image. */
.hero-img-overlay {
  position: absolute; /* Place over image. */
  inset: 0; /* Cover whole image. */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent); /* Bottom fade. */
}

/* Accreditation badge on the hero image. */
.trust-badge {
  position: absolute; /* Float over hero image. */
  top: -28px; /* Move upward. */
  left: -28px; /* Move left. */
  display: flex; /* Put logo and text side by side. */
  align-items: center; /* Center badge content. */
  gap: 12px; /* Space between logo and text. */
  padding: 16px; /* Inner spacing. */
  background: rgba(255, 255, 255, 0.85); /* Semi-transparent white. */
  border: 1px solid white; /* Soft border. */
  border-radius: var(--radius); /* Rounded badge. */
  box-shadow: var(--shadow); /* Badge shadow. */
}

/* Badge logo size. */
.trust-badge-logo {
  width: 48px; /* Logo box width. */
  height: 48px; /* Logo box height. */
}

/* Badge text styles. */
.trust-badge p { font-weight: 700; font-size: 12px; } /* Top badge text. */
.trust-badge span { color: var(--muted-text); font-size: 10px; } /* Bottom badge text. */

/* Dark statistics bar. */
.stats-bar {
  background: var(--dark-bg); /* Dark background. */
  padding: 32px 0; /* Top and bottom spacing. */
}

/* Stats grid layout. */
.stats-grid {
  max-width: var(--container-width); /* Match page width. */
  margin: 0 auto; /* Center grid. */
  padding: 0 var(--page-padding); /* Side spacing. */
  display: grid; /* Use CSS grid. */
  grid-template-columns: repeat(4, 1fr); /* Four equal columns. */
  gap: 24px; /* Space between stats. */
  text-align: center; /* Center stat text. */
}

/* Big stat number. */
.stat-number {
  color: var(--secondary); /* Green number. */
  font-family: var(--heading-font); /* Heading font. */
  font-size: 48px; /* Big number size. */
  font-weight: 800; /* Extra bold. */
}

/* Small stat label. */
.stat-label {
  color: #aeb6cc; /* Light muted text on dark background. */
  font-size: 14px; /* Small label. */
  font-weight: 700; /* Bold label. */
  text-transform: uppercase; /* Capital letters. */
}

/* Shared spacing for main sections. */
.centers-section,
.departments-section,
.news-section,
.testimonials-section {
  padding: var(--section-space) 0; /* Same top and bottom spacing. */
}

/* Alternate section background. */
.departments-section {
  background: var(--soft-bg); /* Light blue background. */
}

/* Section heading row. */
.section-header {
  display: flex; /* Title left, button right. */
  align-items: flex-end; /* Align bottom edges. */
  justify-content: space-between; /* Push items apart. */
  gap: 16px; /* Space if they get close. */
  margin-bottom: 32px; /* Space before cards. */
}

/* Centered section heading style. */
.section-header-centered {
  text-align: center; /* Center text. */
  margin-bottom: 32px; /* Space before department grid. */
}

/* Big section title. */
.section-title,
.testimonials-header h2 {
  font-family: var(--heading-font); /* Heading font. */
  font-size: 48px; /* Large title size. */
  line-height: 1.2; /* Tight title line height. */
  margin-bottom: 8px; /* Space below title. */
}

/* Section description text. */
.section-subtitle {
  color: var(--muted-text); /* Softer color. */
  font-size: 18px; /* Slightly bigger than body. */
}

/* Text-style button. */
.link-btn,
.read-more {
  display: inline-flex; /* Align text and icon. */
  align-items: center; /* Vertically center. */
  gap: 4px; /* Small icon gap. */
  background: transparent; /* No button background. */
  border: 0; /* No border. */
  color: var(--secondary); /* Green text. */
  font: inherit; /* Use body font. */
  font-weight: 700; /* Bold text. */
  cursor: pointer; /* Clickable cursor. */
}

/* Underline text-style buttons on hover. */
.link-btn:hover,
.read-more:hover {
  text-decoration: underline; /* Show it is clickable. */
}

/* Centers card grid. */
.bento-grid {
  display: grid; /* Use grid layout. */
  grid-template-columns: repeat(12, 1fr); /* 12-column layout. */
  gap: 24px; /* Space between cards. */
}

/* Shared card style for centers. */
.bento-card {
  position: relative; /* Allows decorative circle. */
  overflow: hidden; /* Hide decoration outside card. */
  background: var(--card-bg); /* White card. */
  border: 1px solid var(--border); /* Light border. */
  border-radius: var(--radius-large); /* Rounded corners. */
  padding: 32px; /* Card spacing. */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* Soft card shadow. */
  transition: transform 0.2s, box-shadow 0.2s; /* Smooth hover. */
}

/* Card hover style. */
.bento-card:hover,
.news-card:hover,
.dept-card:hover {
  box-shadow: var(--shadow); /* Add larger shadow. */
}

/* Different card sizes in the 12-column grid. */
.bento-cancer { grid-column: span 8; } /* Large card. */
.bento-cardio { grid-column: span 4; background: #006a61; color: white; border-color: #006a61; } /* Small green card. */
.bento-renal { grid-column: span 6; display: flex; gap: 16px; } /* Half-width card. */
.bento-neuro { grid-column: span 6; display: flex; gap: 16px; } /* Half-width card. */
.bento-gastro { grid-column: span 6; display: flex; gap: 16px; } /* Half-width card. */
.bento-critical { grid-column: span 6; display: flex; gap: 16px; } /* Half-width card. */
.bento-headneck { grid-column: span 6; display: flex; gap: 16px; } /* Half-width card. */
.bento-ortho { grid-column: span 6; display: flex; gap: 16px; } /* Half-width card. */
.bento-stairs { grid-column: span 6; display: flex; gap: 16px; } /* Half-width card. */

/* Decorative circle inside cancer card. */
.deco-circle {
  position: absolute; /* Float inside card. */
  top: -80px; /* Move above card. */
  right: -80px; /* Move to right. */
  width: 256px; /* Circle width. */
  height: 256px; /* Circle height. */
  border-radius: 50%; /* Make it a circle. */
  background: rgba(0, 106, 97, 0.08); /* Light green decoration. */
}

/* Small pill labels. */
.tag {
  display: inline-block; /* Keep pill around text. */
  margin-bottom: 16px; /* Space below pill. */
  padding: 4px 12px; /* Pill spacing. */
  border-radius: 999px; /* Fully rounded pill. */
  font-size: 12px; /* Small text. */
  font-weight: 800; /* Bold text. */
}

/* Green pill. */
.tag-secondary {
  background: rgba(0, 106, 97, 0.12); /* Light green background. */
  color: var(--secondary); /* Green text. */
}

/* White pill for green card. */
.tag-white {
  background: rgba(255, 255, 255, 0.92); /* Clear white pill. */
  color: #005049; /* Green text. */
}

.center-card-icon-row {
  display: flex; /* Keep centre icon and label together. */
  align-items: center; /* Align icon and tag vertically. */
  gap: 12px; /* Space between icon and label. */
  margin-bottom: 16px; /* Match old tag spacing. */
}

.center-card-icon-row .tag {
  margin-bottom: 0; /* Row handles the bottom spacing. */
}

/* Center card headings and text. */
.bento-card h3 { font-family: var(--heading-font); font-size: 34px; line-height: 1.25; margin-bottom: 16px; } /* Main card heading. */
.bento-card h4 { margin-bottom: 8px; } /* Small card heading. */
.bento-card p { color: var(--muted-text); margin-bottom: 24px; } /* Card paragraph. */
.bento-cardio h3,
.bento-cardio .read-more { color: white; } /* Keep text readable on green. */
.bento-cardio p { color: #d8fff8; } /* Light paragraph on green. */

.center-card-body {
  display: flex; /* Stack copy and link neatly. */
  flex-direction: column; /* Keep title, text, and link vertical. */
  align-items: flex-start; /* Align content with the card text. */
}

.center-card-body p {
  margin-bottom: 16px; /* Space before Know More link. */
}

/* Feature list inside the cancer card. */
.feature-list {
  display: grid; /* Use grid for two columns. */
  grid-template-columns: 1fr 1fr; /* Two equal columns. */
  gap: 8px; /* Space between list items. */
  margin-bottom: 32px; /* Space before button. */
}

/* Feature list item. */
.feature-list li {
  display: flex; /* Icon and text side by side. */
  align-items: center; /* Center icon and text. */
  gap: 8px; /* Space between icon and text. */
  color: var(--muted-text); /* Softer text. */
  font-weight: 700; /* Bold text. */
}

/* Big heart icon box. */
.cardio-icon,
.mini-card-icon {
  display: flex; /* Center icon. */
  align-items: center; /* Vertical center. */
  justify-content: center; /* Horizontal center. */
  flex-shrink: 0; /* Do not shrink icon box. */
}

/* Heart icon box size. */
.cardio-icon {
  width: 64px; /* Icon box width. */
  height: 64px; /* Icon box height. */
  margin: 32px 0 16px; /* Space around icon box. */
  background: white; /* White background. */
  border-radius: var(--radius); /* Rounded box. */
  color: #ba1a1a; /* Heart icon color. */
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14); /* Lift icon from dark card. */
}

/* Small icon box size. */
.mini-card-icon {
  width: 48px; /* Icon box width. */
  height: 48px; /* Icon box height. */
  border-radius: var(--radius); /* Rounded box. */
  box-shadow: inset 0 0 0 1px rgba(0, 106, 97, 0.12); /* Define pale icon boxes. */
}

/* Detail pages for Center of Excellence. */
.center-detail-hero {
  padding: 92px 0 72px; /* Spacious hero for detail pages. */
  color: white; /* Hero text is on a dark background. */
  background: linear-gradient(135deg, rgba(0, 30, 44, 0.96), rgba(0, 106, 97, 0.86)); /* Brand gradient. */
}

.center-detail-hero .container {
  display: grid; /* Put text and badge beside each other. */
  grid-template-columns: minmax(0, 1fr) 220px; /* Main text plus visual icon. */
  align-items: center; /* Center the icon vertically. */
  gap: 40px; /* Space between text and icon. */
}

.center-detail-kicker {
  display: inline-flex; /* Pill label. */
  margin-bottom: 18px; /* Space under label. */
  padding: 7px 14px; /* Pill spacing. */
  border-radius: 999px; /* Rounded pill. */
  background: rgba(255, 255, 255, 0.14); /* Subtle white overlay. */
  font-size: 12px; /* Small label text. */
  font-weight: 800; /* Bold label. */
  text-transform: uppercase; /* Section label style. */
}

.center-detail-hero h1 {
  max-width: 880px; /* Keep title readable. */
  font-family: var(--heading-font); /* Heading font. */
  font-size: 52px; /* Large page title. */
  line-height: 1.12; /* Tight heading lines. */
  margin-bottom: 18px; /* Space below heading. */
}

.center-detail-hero p {
  max-width: 760px; /* Keep hero copy readable. */
  color: #d7fff8; /* Soft readable text. */
  font-size: 18px; /* Slightly larger intro. */
}

.center-detail-icon {
  display: flex; /* Center icon. */
  align-items: center; /* Vertical center. */
  justify-content: center; /* Horizontal center. */
  width: 170px; /* Icon circle size. */
  height: 170px; /* Icon circle size. */
  justify-self: end; /* Place at right of hero. */
  border-radius: 50%; /* Circle badge. */
  background: rgba(255, 255, 255, 0.14); /* Glassy badge. */
  border: 1px solid rgba(255, 255, 255, 0.28); /* Thin border. */
}

.center-detail-icon .material-symbols-outlined {
  color: white; /* White outline icon. */
  font-size: 78px; /* Large icon. */
}

.center-detail-icon .department-png-icon {
  --department-icon-size: 86px; /* Large department detail icon. */
  color: white; /* White masked icon. */
}

.center-detail-section {
  padding: 72px 0; /* Page section spacing. */
  background: white; /* White detail background. */
}

.center-detail-layout {
  display: grid; /* Main body and side panel. */
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); /* Flexible columns. */
  gap: 36px; /* Space between columns. */
  align-items: start; /* Align top edges. */
}

.center-detail-copy h2,
.center-detail-panel h2 {
  margin-bottom: 16px; /* Space below section headings. */
  font-family: var(--heading-font); /* Heading font. */
  font-size: 34px; /* Detail heading size. */
}

.center-detail-copy p {
  margin-bottom: 18px; /* Paragraph spacing. */
  color: var(--muted-text); /* Softer body text. */
}

.center-service-list {
  display: grid; /* Grid list for services. */
  grid-template-columns: 1fr 1fr; /* Two columns on desktop. */
  gap: 12px; /* Space between services. */
  margin-top: 24px; /* Space above list. */
}

.center-service-list li {
  display: flex; /* Icon and text side by side. */
  gap: 10px; /* Space between check and text. */
  align-items: flex-start; /* Align check to first text line. */
  padding: 14px; /* Service item spacing. */
  background: var(--light-bg); /* Soft tile background. */
  border: 1px solid #dfe5ef; /* Tile border. */
  border-radius: var(--radius); /* Rounded tile. */
  color: var(--muted-text); /* Softer text. */
  font-weight: 700; /* Service names bold. */
}

.center-service-list .material-symbols-outlined {
  color: var(--secondary); /* Green checks. */
}

.center-detail-panel {
  padding: 28px; /* Side panel spacing. */
  background: var(--soft-bg); /* Soft side panel. */
  border: 1px solid #dce4f1; /* Panel border. */
  border-radius: var(--radius-large); /* Large rounded panel. */
}

.center-detail-panel ul {
  display: grid; /* Stack contact rows. */
  gap: 14px; /* Space between rows. */
  margin-bottom: 24px; /* Space before button. */
}

.center-detail-panel li {
  display: flex; /* Icon and text row. */
  gap: 10px; /* Space between icon and text. */
  color: var(--muted-text); /* Softer text. */
  font-weight: 700; /* Bold details. */
}

.center-detail-panel .material-symbols-outlined {
  color: var(--secondary); /* Brand green side icons. */
}

.center-detail-actions {
  display: flex; /* Detail action buttons. */
  flex-wrap: wrap; /* Wrap on narrow widths. */
  gap: 12px; /* Button gap. */
}

/* Full departments page. */
.departments-page-hero {
  padding: 92px 0 68px; /* Hero spacing. */
  color: white; /* White text on dark background. */
  background: linear-gradient(135deg, rgba(0, 30, 44, 0.96), rgba(0, 106, 97, 0.86)); /* Brand hero background. */
}

.departments-page-hero h1 {
  margin-bottom: 16px; /* Space below title. */
  font-family: var(--heading-font); /* Heading font. */
  font-size: 56px; /* Big title. */
  line-height: 1.1; /* Tight line height. */
}

.departments-page-hero p {
  max-width: 760px; /* Keep intro readable. */
  color: #d7fff8; /* Soft white-green text. */
  font-size: 18px; /* Slightly larger intro. */
}

.departments-page-section {
  padding: 72px 0; /* Main page spacing. */
  background: white; /* Clean white section. */
}

.departments-toolbar {
  display: flex; /* Put title and search in a row. */
  align-items: flex-end; /* Align bottom edge. */
  justify-content: space-between; /* Separate title and search. */
  gap: 20px; /* Space on smaller widths. */
  margin-bottom: 28px; /* Space before grid. */
}

.departments-toolbar h2 {
  font-family: var(--heading-font); /* Heading font. */
  font-size: 34px; /* Toolbar heading size. */
}

.departments-toolbar p {
  color: var(--muted-text); /* Muted count text. */
  font-weight: 700; /* Make count clear. */
}

.department-search {
  display: flex; /* Icon and input. */
  align-items: center; /* Center icon and input. */
  gap: 10px; /* Space between icon and input. */
  min-width: 320px; /* Useful search width. */
  padding: 12px 14px; /* Search field spacing. */
  background: var(--light-bg); /* Soft input background. */
  border: 1px solid #dfe5ef; /* Input border. */
  border-radius: var(--radius); /* Rounded search box. */
}

.department-search input {
  width: 100%; /* Fill search label. */
  background: transparent; /* Let label background show. */
  border: 0; /* Remove native border. */
  outline: 0; /* Remove native focus outline. */
  color: var(--text); /* Text color. */
  font: inherit; /* Use site font. */
}

.departments-all-grid {
  display: grid; /* Card grid. */
  grid-template-columns: repeat(3, 1fr); /* Three columns on desktop. */
  gap: 16px; /* Card gap. */
}

.department-list-card {
  display: grid; /* Icon, copy, arrow. */
  grid-template-columns: 48px minmax(0, 1fr) 24px; /* Stable columns. */
  gap: 14px; /* Column gap. */
  align-items: center; /* Center card content. */
  min-height: 128px; /* Keep cards balanced. */
  padding: 18px; /* Card spacing. */
  background: white; /* Card background. */
  border: 1px solid #dfe5ef; /* Soft border. */
  border-radius: var(--radius); /* Rounded card. */
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; /* Smooth hover. */
}

.department-list-card:hover {
  transform: translateY(-2px); /* Lift on hover. */
  border-color: rgba(0, 106, 97, 0.38); /* Brand border. */
  box-shadow: 0 10px 24px rgba(11, 28, 48, 0.10); /* Soft shadow. */
}

.department-list-icon {
  display: flex; /* Center icon. */
  align-items: center; /* Vertical center. */
  justify-content: center; /* Horizontal center. */
  width: 48px; /* Icon box size. */
  height: 48px; /* Icon box size. */
  color: var(--secondary); /* Brand icon color. */
  background: rgba(0, 106, 97, 0.10); /* Soft green icon background. */
  border-radius: 14px; /* Rounded icon box. */
}

.department-list-icon .department-png-icon {
  --department-icon-size: 30px; /* Fit PNG icon inside list icon box. */
}

.department-list-card strong {
  display: block; /* Title on its own line. */
  margin-bottom: 6px; /* Space below title. */
  font-family: var(--heading-font); /* Heading font. */
  font-size: 18px; /* Card title size. */
  line-height: 1.25; /* Tight title lines. */
}

.department-list-card small {
  display: block; /* Summary on its own line. */
  color: var(--muted-text); /* Muted summary. */
  font-size: 14px; /* Summary size. */
  line-height: 1.45; /* Readable summary lines. */
}

.department-doctor-matches {
  display: block; /* Put matched doctor names under the department summary. */
  margin-top: 8px; /* Separate names from the summary. */
  color: var(--secondary); /* Brand color for search matches. */
  font-size: 13px; /* Keep names compact. */
  font-weight: 800; /* Make matching doctors easy to notice. */
  line-height: 1.35; /* Keep wrapped names readable. */
}

/* Insurance and health package sections. */
.insurance-section,
.health-packages-section {
  padding: var(--section-space) 0; /* Match other homepage sections. */
  background: white; /* Clean section background. */
}

.health-packages-section {
  background: var(--soft-bg); /* Separate packages from insurance. */
}

.insurance-grid {
  display: grid; /* Three support cards. */
  grid-template-columns: repeat(3, 1fr); /* Desktop columns. */
  gap: 18px; /* Card gap. */
  margin-bottom: 28px; /* Space before partners. */
}

.insurance-card,
.package-card {
  padding: 24px; /* Card spacing. */
  background: white; /* Card surface. */
  border: 1px solid #dfe5ef; /* Soft border. */
  border-radius: var(--radius-large); /* Rounded cards. */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); /* Soft depth. */
}

.insurance-card .material-symbols-outlined {
  display: inline-flex; /* Icon badge. */
  align-items: center; /* Center icon. */
  justify-content: center; /* Center icon. */
  width: 52px; /* Badge width. */
  height: 52px; /* Badge height. */
  margin-bottom: 16px; /* Space below icon. */
  color: var(--secondary); /* Brand icon. */
  background: rgba(0, 106, 97, 0.10); /* Soft green badge. */
  border-radius: 16px; /* Rounded badge. */
}

.insurance-card h3,
.package-card h3 {
  margin-bottom: 10px; /* Space under heading. */
  font-family: var(--heading-font); /* Heading font. */
  font-size: 24px; /* Card heading size. */
  line-height: 1.25; /* Compact heading. */
}

.insurance-card p,
.package-card p {
  color: var(--muted-text); /* Muted card copy. */
}

.insurance-partners {
  display: grid; /* Logo-name grid. */
  grid-template-columns: repeat(4, 1fr); /* Four partners per row. */
  gap: 12px; /* Partner gap. */
}

.insurance-partners span {
  display: flex; /* Center text. */
  align-items: center; /* Vertical center. */
  justify-content: center; /* Horizontal center. */
  min-height: 58px; /* Partner tile height. */
  padding: 12px; /* Partner tile spacing. */
  text-align: center; /* Center label. */
  color: var(--primary); /* Strong text. */
  background: var(--light-bg); /* Soft tile. */
  border: 1px solid #dfe5ef; /* Soft border. */
  border-radius: var(--radius); /* Rounded tile. */
  font-weight: 800; /* Strong partner name. */
}

.package-grid {
  display: grid; /* Package cards. */
  grid-template-columns: repeat(4, 1fr); /* Four package cards on desktop. */
  gap: 18px; /* Package gap. */
}

.package-tag {
  display: inline-flex; /* Pill label. */
  margin-bottom: 14px; /* Space below label. */
  padding: 5px 10px; /* Pill spacing. */
  color: var(--secondary); /* Brand label. */
  background: rgba(0, 106, 97, 0.10); /* Soft brand label. */
  border-radius: 999px; /* Pill. */
  font-size: 12px; /* Small label. */
  font-weight: 800; /* Bold label. */
}

/* Careers page. */
.careers-hero {
  padding: 92px 0 68px; /* Hero spacing. */
  color: white; /* White text on dark background. */
  background: linear-gradient(135deg, rgba(0, 30, 44, 0.96), rgba(0, 106, 97, 0.86)); /* Brand hero background. */
}

.careers-hero h1 {
  margin-bottom: 16px; /* Space below title. */
  font-family: var(--heading-font); /* Heading font. */
  font-size: 56px; /* Large title. */
  line-height: 1.1; /* Tight heading line height. */
}

.careers-hero p {
  max-width: 760px; /* Keep intro readable. */
  color: #d7fff8; /* Soft white-green text. */
  font-size: 18px; /* Slightly larger intro. */
}

.careers-section {
  padding: 72px 0; /* Section spacing. */
  background: white; /* Clean background. */
}

.career-grid {
  display: grid; /* Vacancy grid. */
  grid-template-columns: repeat(2, 1fr); /* Two vacancy cards per row. */
  gap: 20px; /* Card gap. */
}

.career-card {
  display: flex; /* Stack card content. */
  flex-direction: column; /* Vertical card layout. */
  min-height: 360px; /* Keep cards balanced. */
  padding: 28px; /* Card spacing. */
  background: var(--light-bg); /* Soft card background. */
  border: 1px solid #dfe5ef; /* Soft border. */
  border-radius: var(--radius-large); /* Rounded vacancy cards. */
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; /* Smooth hover. */
}

.career-card:hover {
  transform: translateY(-2px); /* Lift card. */
  border-color: rgba(0, 106, 97, 0.34); /* Brand hover border. */
  box-shadow: 0 12px 28px rgba(11, 28, 48, 0.10); /* Soft hover shadow. */
}

.career-card-head {
  display: inline-flex; /* Icon and label. */
  align-items: center; /* Center icon and label. */
  gap: 8px; /* Space between icon and label. */
  width: fit-content; /* Fit to label. */
  margin-bottom: 18px; /* Space below label. */
  padding: 8px 12px; /* Label spacing. */
  color: var(--secondary); /* Brand label. */
  background: rgba(0, 106, 97, 0.10); /* Soft green label bg. */
  border-radius: 999px; /* Pill label. */
  font-size: 13px; /* Small label text. */
  font-weight: 800; /* Bold label. */
}

.career-card h3 {
  margin-bottom: 10px; /* Space below title. */
  font-family: var(--heading-font); /* Heading font. */
  font-size: 28px; /* Vacancy title size. */
  line-height: 1.2; /* Compact title line height. */
}

.career-card p {
  margin-bottom: 18px; /* Space below description. */
  color: var(--muted-text); /* Muted description. */
}

.career-card ul {
  display: grid; /* Stack details. */
  gap: 8px; /* Detail gap. */
  margin-bottom: 24px; /* Space before apply button. */
  color: var(--muted-text); /* Muted detail text. */
  font-weight: 700; /* Make details readable. */
}

.career-apply {
  width: fit-content; /* Keep apply button compact. */
  margin-top: auto; /* Push button to card bottom. */
}

/* Virtual tour modal. */
.tour-modal {
  position: fixed; /* Cover the current page. */
  inset: 0; /* Fill viewport. */
  z-index: 100; /* Sit above header and floating buttons. */
  display: none; /* Hidden until opened. */
  align-items: center; /* Center dialog vertically. */
  justify-content: center; /* Center dialog horizontally. */
  padding: 24px; /* Edge breathing room. */
  background: rgba(0, 18, 28, 0.76); /* Dim page behind tour. */
}

.tour-modal.open {
  display: flex; /* Show modal. */
}

.tour-dialog {
  width: min(1180px, 100%); /* Large but responsive tour window. */
  max-height: min(760px, 92vh); /* Keep dialog inside viewport. */
  overflow: hidden; /* Clip rounded corners. */
  background: white; /* Dialog surface. */
  border-radius: var(--radius-large); /* Rounded dialog. */
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34); /* Strong modal depth. */
}

.tour-dialog-header {
  display: flex; /* Title and close button. */
  align-items: center; /* Center vertically. */
  justify-content: space-between; /* Push close to right. */
  gap: 18px; /* Header gap. */
  padding: 20px 24px; /* Header spacing. */
  border-bottom: 1px solid #dfe5ef; /* Header divider. */
}

.tour-kicker {
  margin-bottom: 2px; /* Tight label spacing. */
  color: var(--secondary); /* Brand label. */
  font-size: 12px; /* Small label. */
  font-weight: 800; /* Bold label. */
  text-transform: uppercase; /* Label style. */
}

.tour-dialog h2 {
  font-family: var(--heading-font); /* Heading font. */
  font-size: 24px; /* Dialog title size. */
  line-height: 1.2; /* Compact title. */
}

.tour-close {
  display: flex; /* Center icon. */
  align-items: center; /* Vertical center. */
  justify-content: center; /* Horizontal center. */
  width: 44px; /* Button size. */
  height: 44px; /* Button size. */
  flex-shrink: 0; /* Keep button size. */
  color: white; /* White icon. */
  background: var(--secondary); /* Brand button. */
  border: 0; /* Remove border. */
  border-radius: 50%; /* Circular close button. */
  cursor: pointer; /* Clickable. */
}

.tour-frame-wrap {
  position: relative; /* Allows loader and iframe to share the same area. */
  height: min(640px, calc(92vh - 86px)); /* Responsive tour height. */
  background: #001e2c; /* Dark loading background. */
}

.tour-loader {
  display: flex; /* Center loader content. */
  flex-direction: column; /* Stack loader text and button. */
  align-items: center; /* Center horizontally. */
  justify-content: center; /* Center vertically. */
  gap: 14px; /* Space between loader items. */
  height: 100%; /* Fill tour area. */
  padding: 28px; /* Loader spacing. */
  text-align: center; /* Center loader text. */
  color: white; /* Loader text color. */
  background: radial-gradient(circle at center, rgba(0, 106, 97, 0.45), rgba(0, 30, 44, 0.98)); /* Lightweight preview background. */
}

.tour-loader .material-symbols-outlined {
  display: flex; /* Center symbol in circle. */
  align-items: center; /* Vertical center. */
  justify-content: center; /* Horizontal center. */
  width: 86px; /* Preview icon size. */
  height: 86px; /* Preview icon size. */
  color: white; /* Icon color. */
  background: rgba(255, 255, 255, 0.14); /* Glassy icon bg. */
  border: 1px solid rgba(255, 255, 255, 0.28); /* Soft border. */
  border-radius: 50%; /* Circle icon. */
  font-size: 42px; /* Large 360 symbol. */
}

.tour-loader h3 {
  font-family: var(--heading-font); /* Heading font. */
  font-size: 28px; /* Loader title. */
}

.tour-loader p {
  max-width: 440px; /* Keep loader copy readable. */
  color: #d7fff8; /* Soft text. */
}

.tour-fallback-link {
  color: #d7fff8; /* Subtle fallback link. */
  font-size: 14px; /* Small helper link. */
  font-weight: 700; /* Keep it readable. */
  text-decoration: underline; /* Make link obvious. */
}

.tour-frame-wrap iframe {
  width: 100%; /* Fill dialog width. */
  height: 100%; /* Fill dialog height. */
  border: 0; /* No iframe border. */
  display: none; /* Load and show only after user clicks. */
}

.tour-frame-wrap.tour-loaded iframe {
  display: block; /* Show iframe after loading starts. */
}

.tour-frame-wrap.tour-loaded .tour-loader {
  display: none; /* Hide preview after tour loads. */
}

.booking-modal {
  position: fixed; /* Cover page for appointment form. */
  inset: 0; /* Full viewport. */
  z-index: 70; /* Above site UI. */
  display: none; /* Hidden until opened. */
  align-items: center; /* Center dialog vertically. */
  justify-content: center; /* Center dialog horizontally. */
  padding: 24px; /* Edge spacing. */
  background: rgba(10, 20, 30, 0.62); /* Dim page. */
}

.booking-modal.open {
  display: flex; /* Show booking modal. */
}

.booking-dialog {
  width: min(860px, 100%); /* Spacious but responsive. */
  max-height: min(92vh, 820px); /* Fit viewport. */
  overflow: auto; /* Scroll form if needed. */
  background: white; /* Clean form background. */
  border-radius: var(--radius-large); /* Match site modal. */
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34); /* Strong modal depth. */
}

.booking-dialog-header {
  display: flex; /* Title and close button. */
  align-items: center; /* Center title row. */
  justify-content: space-between; /* Push close right. */
  gap: 18px; /* Header gap. */
  padding: 22px 24px; /* Header spacing. */
  border-bottom: 1px solid var(--border); /* Header divider. */
}

.booking-dialog h2 {
  margin: 0; /* Remove default margin. */
  font-family: var(--heading-font); /* Heading font. */
  font-size: 28px; /* Modal title size. */
}

.booking-form {
  padding: 24px; /* Form spacing. */
}

.appointment-page-form {
  padding: 24px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.booking-alert-note {
  margin: 0 0 16px;
  padding: 12px 14px;
  color: #8a1f11;
  background: #fff0ea;
  border: 1px solid #ffb199;
  border-left: 5px solid #e23d28;
  border-radius: 10px;
  font-weight: 900;
  line-height: 1.45;
}

.booking-grid {
  display: grid; /* Two column form. */
  grid-template-columns: repeat(2, 1fr); /* Desktop fields. */
  gap: 14px; /* Field gap. */
}

.booking-grid label {
  display: grid; /* Label over input. */
  gap: 7px; /* Label gap. */
  color: var(--text); /* Text color. */
  font-weight: 800; /* Strong labels. */
}

.booking-grid input,
.booking-grid select,
.booking-grid textarea {
  width: 100%; /* Fill field. */
  min-height: 46px; /* Touch-friendly. */
  padding: 11px 12px; /* Field spacing. */
  color: var(--text); /* Input color. */
  background: var(--light-bg); /* Soft field background. */
  border: 1px solid var(--border); /* Field border. */
  border-radius: 12px; /* Rounded fields. */
  outline: 0; /* Remove native outline. */
  font: inherit; /* Site font. */
}

.booking-grid textarea {
  min-height: 110px; /* Message room. */
  resize: vertical; /* Allow resizing. */
}

.booking-wide {
  grid-column: 1 / -1; /* Message spans both columns. */
}

.booking-actions {
  display: flex; /* Button row. */
  justify-content: flex-end; /* Align actions right. */
  gap: 12px; /* Button gap. */
  margin-top: 18px; /* Space above actions. */
}

.booking-message {
  min-height: 22px; /* Prevent jump. */
  margin-top: 12px; /* Space above message. */
  color: var(--muted-text); /* Muted helper. */
  font-weight: 800; /* Visible status. */
}

.patient-account-btn {
  white-space: nowrap; /* Keep login label compact. */
}

.patient-dialog {
  width: min(760px, 100%); /* Patient account modal width. */
}

.patient-panel {
  display: grid; /* Stack auth/account panels. */
  gap: 18px; /* Panel spacing. */
  padding: 24px; /* Modal body spacing. */
}

.patient-auth-form {
  display: grid; /* Auth form stack. */
  gap: 14px; /* Auth field spacing. */
}

.patient-auth-tabs {
  display: inline-flex; /* Sign in/create segmented buttons. */
  width: fit-content; /* Compact tab group. */
  padding: 4px; /* Tab group padding. */
  background: var(--soft-bg); /* Soft segmented background. */
  border-radius: 999px; /* Pill group. */
}

.patient-auth-tabs button {
  min-height: 38px; /* Touch friendly tabs. */
  padding: 0 14px; /* Tab spacing. */
  color: var(--muted-text); /* Inactive tab color. */
  background: transparent; /* Inactive background. */
  border: 0; /* Reset button border. */
  border-radius: 999px; /* Pill tab. */
  font-weight: 800; /* Bold tab label. */
  cursor: pointer; /* Clickable tab. */
}

.patient-auth-tabs button.active {
  color: white; /* Active tab text. */
  background: var(--secondary); /* Active tab fill. */
}

.patient-auth-form label {
  display: grid; /* Label above field. */
  gap: 7px; /* Field gap. */
  font-weight: 800; /* Strong labels. */
}

.patient-auth-form input {
  min-height: 46px; /* Touch friendly fields. */
  padding: 11px 12px; /* Input spacing. */
  background: var(--light-bg); /* Soft field background. */
  border: 1px solid var(--border); /* Field border. */
  border-radius: 12px; /* Rounded fields. */
  font: inherit; /* Site font. */
}

.patient-data-head {
  display: flex; /* Email and sign out row. */
  align-items: center; /* Center row. */
  justify-content: space-between; /* Push sign out right. */
  gap: 14px; /* Row gap. */
  padding: 14px; /* Header spacing. */
  background: var(--light-bg); /* Soft account header. */
  border: 1px solid var(--border); /* Header border. */
  border-radius: var(--radius); /* Rounded header. */
}

.patient-data-head strong,
.patient-data-head small {
  display: block; /* Stack patient account labels. */
}

.patient-data-head small {
  color: var(--muted-text); /* Muted sublabel. */
  font-weight: 800; /* Readable sublabel. */
}

.patient-bookings-list {
  display: grid; /* Booking cards stack. */
  gap: 10px; /* Booking gap. */
}

.patient-booking-card {
  padding: 14px; /* Card spacing. */
  background: white; /* Booking card background. */
  border: 1px solid var(--border); /* Booking border. */
  border-radius: var(--radius); /* Rounded booking card. */
}

.patient-booking-card strong {
  display: block; /* Booking title line. */
  margin-bottom: 4px; /* Title spacing. */
  font-family: var(--heading-font); /* Heading font. */
}

.patient-booking-card span {
  display: inline-flex; /* Status pill. */
  margin-top: 8px; /* Status spacing. */
  padding: 4px 8px; /* Pill spacing. */
  color: var(--secondary); /* Status text. */
  background: #e6faf7; /* Status bg. */
  border-radius: 999px; /* Pill status. */
  font-size: 12px; /* Compact status. */
  font-weight: 900; /* Strong status. */
  text-transform: uppercase; /* Status style. */
}

.department-doctors-section {
  margin-top: 44px; /* Separate doctors from service list. */
  padding-top: 34px; /* Space above doctors section. */
  border-top: 1px solid #dfe5ef; /* Soft divider. */
}

.department-doctors-section h2 {
  margin-bottom: 18px; /* Space before doctor cards. */
  font-family: var(--heading-font); /* Heading font. */
  font-size: 34px; /* Match detail headings. */
}

.department-doctors-grid {
  display: grid; /* Doctor cards grid. */
  grid-template-columns: repeat(2, 1fr); /* Two cards per row on desktop. */
  gap: 14px; /* Card spacing. */
}

.doctor-card {
  display: grid; /* Avatar and copy. */
  grid-template-columns: 112px minmax(0, 1fr); /* Stable square photo column. */
  gap: 18px; /* Space between avatar and copy. */
  align-items: center; /* Center vertically. */
  min-height: 148px; /* Balanced card height for square photos. */
  padding: 16px; /* Card spacing. */
  background: var(--light-bg); /* Soft card background. */
  border: 1px solid #dfe5ef; /* Soft border. */
  border-radius: var(--radius); /* Rounded card. */
  color: inherit; /* Keep linked doctor cards looking like cards. */
  text-decoration: none; /* Remove link underline on doctor cards. */
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; /* Smooth card hover. */
}

.doctor-card:hover {
  transform: translateY(-2px); /* Lift linked doctor cards. */
  border-color: rgba(0, 106, 97, 0.38); /* Brand hover border. */
  box-shadow: 0 10px 24px rgba(11, 28, 48, 0.10); /* Soft hover shadow. */
}

.doctor-card-wide {
  grid-column: 1 / -1; /* Placeholder spans full width. */
}

.doctor-avatar {
  display: flex; /* Center avatar icon. */
  align-items: center; /* Vertical center. */
  justify-content: center; /* Horizontal center. */
  width: 112px; /* Avatar size. */
  height: 112px; /* Avatar size. */
  color: white; /* White icon. */
  background: var(--secondary); /* Brand avatar background. */
  border-radius: 16px; /* Square avatar with soft corners. */
}

.doctor-photo {
  width: 112px; /* Larger square doctor photo. */
  height: 112px; /* Larger square doctor photo. */
  border-radius: 16px; /* Square image with soft corners. */
  object-fit: cover; /* Crop face neatly. */
  background: var(--soft-bg); /* Soft fallback while image loads. */
  border: 2px solid rgba(0, 106, 97, 0.18); /* Brand photo ring. */
}

.doctor-card h3 {
  margin-bottom: 4px; /* Space below doctor name. */
  font-family: var(--heading-font); /* Heading font. */
  font-size: 18px; /* Doctor name size. */
  line-height: 1.25; /* Tight line height. */
}

.doctor-card p {
  margin-bottom: 0; /* No extra paragraph spacing in cards. */
  color: var(--muted-text); /* Muted doctor role. */
  font-size: 14px; /* Role size. */
  line-height: 1.4; /* Readable role line height. */
}

.doctor-card-link {
  display: inline-flex; /* Small profile link label. */
  margin-top: 10px; /* Separate from role text. */
  color: var(--secondary); /* Brand color. */
  font-size: 13px; /* Compact link text. */
  font-weight: 800; /* Make the action visible. */
}

.doctor-detail-hero {
  padding: 72px 0; /* Hero breathing room. */
  background: linear-gradient(135deg, #f4fbff 0%, #effaf7 100%); /* Soft profile hero. */
}

.doctor-profile-layout {
  display: grid; /* Photo and profile copy. */
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); /* Stable profile columns. */
  gap: clamp(28px, 5vw, 64px); /* Responsive gap. */
  align-items: center; /* Center profile content. */
}

.doctor-profile-photo-wrap {
  margin: 0; /* Reset figure margin. */
  padding: 12px; /* Photo frame space. */
  background: white; /* Clean frame. */
  border: 1px solid #dfe5ef; /* Soft border. */
  border-radius: var(--radius-large); /* Large profile frame. */
  box-shadow: var(--shadow); /* Profile depth. */
}

.doctor-profile-photo {
  width: 100%; /* Fill frame width. */
  aspect-ratio: 1; /* Square profile image. */
  height: auto; /* Respect aspect ratio. */
  object-fit: cover; /* Crop photos neatly. */
  border-radius: calc(var(--radius-large) - 8px); /* Inner frame radius. */
  background: var(--soft-bg); /* Fallback background. */
}

.doctor-profile-copy h1 {
  max-width: 760px; /* Keep long names readable. */
  margin-bottom: 14px; /* Space before post. */
  font-family: var(--heading-font); /* Heading font. */
  font-size: clamp(40px, 5vw, 66px); /* Profile title size. */
  line-height: 1.05; /* Tight title. */
}

.doctor-post {
  max-width: 680px; /* Keep post readable. */
  color: var(--muted-text); /* Softer post text. */
  font-size: 20px; /* Prominent post. */
  line-height: 1.55; /* Readable post line height. */
}

.doctor-profile-actions {
  display: flex; /* Buttons in a row. */
  flex-wrap: wrap; /* Wrap on mobile. */
  gap: 14px; /* Button spacing. */
  margin-top: 28px; /* Space above actions. */
}

.doctor-info-list {
  display: grid; /* Stack profile facts. */
  gap: 14px; /* Fact gap. */
  padding: 0; /* Reset list padding. */
  margin: 22px 0 0; /* Space below heading. */
  list-style: none; /* Remove bullets. */
}

.doctor-info-list li {
  display: grid; /* Icon and text. */
  grid-template-columns: 44px minmax(0, 1fr); /* Icon column. */
  gap: 14px; /* Column gap. */
  align-items: start; /* Align text from top. */
  padding: 16px; /* Fact card spacing. */
  background: var(--light-bg); /* Soft fact background. */
  border: 1px solid #dfe5ef; /* Soft border. */
  border-radius: var(--radius); /* Rounded fact card. */
}

.doctor-info-list .material-symbols-outlined {
  display: flex; /* Center icon. */
  align-items: center; /* Vertical center. */
  justify-content: center; /* Horizontal center. */
  width: 44px; /* Icon size. */
  height: 44px; /* Icon size. */
  color: var(--secondary); /* Brand icon. */
  background: rgba(0, 106, 97, 0.10); /* Soft icon background. */
  border-radius: 12px; /* Icon box radius. */
}

.doctor-info-list strong {
  display: block; /* Fact label line. */
  margin-bottom: 4px; /* Space before value. */
  font-family: var(--heading-font); /* Label font. */
}

.doctor-info-list p {
  margin: 0; /* Remove default paragraph margin. */
  color: var(--muted-text); /* Softer values. */
  line-height: 1.5; /* Readable value text. */
}

/* Department grid. */
.dept-grid {
  display: grid; /* Use grid layout. */
  grid-template-columns: repeat(6, 1fr); /* Six columns on desktop. */
  gap: 16px; /* Space between cards. */
}

/* Department card. */
.dept-card {
  display: flex; /* Stack icon and text. */
  flex-direction: column; /* Vertical layout. */
  align-items: center; /* Center content. */
  gap: 8px; /* Space between icon and text. */
  padding: 18px; /* Card spacing. */
  text-align: center; /* Center department name. */
  background: white; /* White card. */
  border: 1px solid var(--border); /* Light border. */
  border-radius: var(--radius); /* Rounded corners. */
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; /* Smooth hover. */
}

/* Department icon. */
.dept-card .material-symbols-outlined,
.dept-card .medical-icon,
.dept-card .department-png-icon {
  color: var(--muted-text); /* Muted icon color. */
  font-size: 28px; /* Icon size. */
}

.dept-card .department-png-icon {
  color: var(--secondary); /* Keep custom PNG icons clearly visible. */
}

.dept-card .medical-icon,
.dept-card .department-png-icon {
  --icon-size: 42px; /* Match department icon sizing. */
  --department-icon-size: 42px; /* Match department PNG icon sizing. */
  transition: transform 0.2s, opacity 0.2s; /* Smooth hover. */
}

/* Department hover effect. */
.dept-card:hover {
  border-color: var(--secondary); /* Green border on hover. */
}

/* Department icon hover effect. */
.dept-card:hover .material-symbols-outlined,
.dept-card:hover .medical-icon,
.dept-card:hover .department-png-icon {
  color: var(--secondary); /* Green icon on hover. */
}

.dept-card:hover .medical-icon,
.dept-card:hover .department-png-icon {
  transform: translateY(-2px); /* Give image icons a clear hover state. */
  opacity: 0.9; /* Subtle hover feedback for bitmap icons. */
}

/* Special view-all department card. */
.dept-card.view-all {
  background: var(--secondary); /* Green background. */
  color: white; /* White text. */
  border-color: var(--secondary); /* Green border. */
}

/* View-all icon color. */
.dept-card.view-all .material-symbols-outlined,
.dept-card.view-all .medical-icon,
.dept-card.view-all .department-png-icon {
  color: white; /* White icon. */
}

/* News card grid. */
.news-grid {
  display: grid; /* Use grid layout. */
  grid-template-columns: 1fr 1fr; /* Two news cards per row. */
  gap: 24px; /* Space between cards. */
}

/* News card. */
.news-card {
  display: flex; /* Image left, text right. */
  overflow: hidden; /* Clip rounded image corners. */
  background: white; /* White card. */
  border: 1px solid var(--border); /* Light border. */
  border-radius: var(--radius-large); /* Large rounded corners. */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* Soft shadow. */
  transition: transform 0.2s, box-shadow 0.2s; /* Smooth hover. */
}

/* News image area. */
.news-img {
  width: 34%; /* Image takes about one-third of card. */
  flex-shrink: 0; /* Keep image width. */
}

/* News image. */
.news-img img {
  width: 100%; /* Fill image area. */
  height: 100%; /* Fill card height. */
  object-fit: cover; /* Crop nicely. */
}

/* News text area. */
.news-body {
  padding: 32px; /* Text spacing. */
}

/* News date. */
.news-date {
  margin-bottom: 8px; /* Space below date. */
  color: var(--secondary); /* Green date. */
  font-size: 12px; /* Small text. */
  font-weight: 800; /* Bold date. */
}

/* News title. */
.news-title {
  margin-bottom: 12px; /* Space below title. */
  font-family: var(--heading-font); /* Heading font. */
  font-size: 24px; /* Title size. */
  line-height: 1.35; /* Comfortable line height. */
}

/* News summary. */
.news-excerpt {
  margin-bottom: 16px; /* Space before read more link. */
  color: var(--muted-text); /* Softer text. */
}

.news-detail-section {
  padding: 120px 0 70px;
  background: var(--light-bg);
}

.news-detail-article {
  max-width: 900px;
  margin: 0 auto;
}

.news-detail-article > img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: var(--shadow);
  margin: 20px 0 24px;
}

.news-detail-article h1 {
  max-width: 820px;
  margin: 10px 0 14px;
  font-family: var(--heading-font);
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05;
}

.news-full-copy {
  display: grid;
  gap: 14px;
  max-width: 760px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.75;
}


/* Social updates section. */
.social-section {
  padding: var(--section-space) 0; /* Match spacing used by other sections. */
  background: var(--soft-bg); /* Light blue background. */
}

/* Social section layout. */
.social-layout {
  display: grid; /* Put the two social screens side by side. */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* Keep YouTube and Facebook the same size. */
  gap: 24px; /* Space between the two cards. */
  align-items: start; /* Keep cards aligned at the top. */
}

/* Shared card style for social screens. */
.social-card {
  background: white; /* White card background. */
  border: 1px solid var(--border); /* Light border. */
  border-radius: var(--radius-large); /* Rounded card corners. */
  padding: 20px; /* Inner card spacing. */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* Soft shadow. */
}

/* Heading row inside social cards. */
.social-card-heading {
  display: flex; /* Icon and heading sit in one row. */
  align-items: center; /* Vertically center icon and heading. */
  gap: 10px; /* Space between icon and heading. */
  margin-bottom: 16px; /* Space before the screen. */
}

/* Social card heading text. */
.social-card-heading h3 {
  font-family: var(--heading-font); /* Use heading font. */
  font-size: 22px; /* Card heading size. */
  line-height: 1.25; /* Tight heading line height. */
}

/* The screen frame for YouTube and Facebook. */
.media-screen {
  position: relative; /* Lets iframe fill the frame. */
  overflow: hidden; /* Clips iframe corners. */
  background: #0b1c30; /* Dark screen background while content loads. */
  border: 1px solid var(--border); /* Screen border. */
  border-radius: 18px; /* Rounded screen corners. */
}

/* All embedded content fills its screen. */
.media-screen iframe {
  position: absolute; /* Place iframe inside the screen. */
  inset: 0; /* Stretch iframe to all edges. */
  width: 100%; /* Full iframe width. */
  height: 100%; /* Full iframe height. */
  border: 0; /* Remove default iframe border. */
}

/* YouTube screen ratio. */
.small-social-screen {
  aspect-ratio: 16 / 9; /* Standard video shape. */
}

/* Facebook screen matches the YouTube screen size. */
.facebook-screen {
  aspect-ratio: 16 / 9; /* Match YouTube video shape. */
  background: #f0f2f5; /* Facebook-like light background. */
  border-color: #d8dee8; /* Softer frame border for the post view. */
}

/* Hide the Facebook page header while keeping the frame the same size as YouTube. */
.facebook-screen iframe {
  top: -112px; /* Move the page header above the visible area. */
  bottom: auto; /* Let the iframe extend below after cropping. */
  height: calc(100% + 112px); /* Preserve content height after cropping. */
}

/* Make the Facebook card feel like a post viewer. */
.facebook-card {
  background: #ffffff; /* Keep the card clean and bright. */
  box-shadow: 0 10px 28px rgba(11, 28, 48, 0.10); /* Add a softer post-view shadow. */
}

/* Add space above social card actions. */
.social-card .link-btn {
  margin-top: 16px; /* Space between controls/screen and action. */
}

/* Institutions section. */
.institutions-section {
  padding: var(--section-space) 0; /* Match spacing used by other sections. */
  background: white; /* Keep this section clean and bright. */
}

/* Institutions card grid. */
.institutions-grid {
  display: grid; /* Use grid layout for institution cards. */
  grid-template-columns: repeat(3, 1fr); /* Show three cards in a row on desktop. */
  gap: 24px; /* Add space between institution cards. */
}

/* Institution card. */
.institution-card {
  min-height: 360px; /* Keep institution cards visually balanced with details. */
  padding: 28px; /* Add inner spacing. */
  background: var(--card-bg); /* Use white card background. */
  border: 1px solid var(--border); /* Add a light card border. */
  border-radius: var(--radius-large); /* Match the site's large card corners. */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* Add a soft card shadow. */
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; /* Smooth hover states. */
  display: flex; /* Let the content stack neatly. */
  flex-direction: column; /* Stack icon, text, and action vertically. */
}

/* Institution hover style. */
.institution-card:hover {
  transform: translateY(-2px); /* Lift card slightly on hover. */
  border-color: var(--secondary); /* Turn border green on hover. */
  box-shadow: var(--shadow); /* Add stronger hover shadow. */
}

/* Larger first institution card. */
.featured-institution {
  grid-column: span 2; /* Make the nursing card wider than others. */
  display: grid; /* Put icon and text in a grid. */
  grid-template-columns: auto 1fr; /* Keep icon beside the text. */
  gap: 22px; /* Add space between icon and content. */
  align-items: start; /* Align content to the top. */
  background: linear-gradient(135deg, #f7fffd, #eff4ff); /* Add a gentle featured background. */
}

/* Smaller institution cards. */
.compact-institution {
  min-height: 320px; /* Make compact cards slightly shorter. */
}

/* Institution icon box. */
.institution-icon {
  display: inline-flex; /* Center icon inside a box. */
  align-items: center; /* Center icon vertically. */
  justify-content: center; /* Center icon horizontally. */
  width: 56px; /* Icon box width. */
  height: 56px; /* Icon box height. */
  margin-bottom: 18px; /* Add space below icon. */
  background: #89f5e7; /* Soft green icon background. */
  color: var(--secondary); /* Green icon color. */
  border-radius: 18px; /* Round icon box corners. */
}

/* Institution icon size. */
.institution-icon .material-symbols-outlined {
  font-size: 30px; /* Make institution icons larger. */
}

/* Institution card heading. */
.institution-card h3 {
  margin-bottom: 12px; /* Add space below card heading. */
  color: var(--primary); /* Use dark heading color. */
  font-family: var(--heading-font); /* Use heading font. */
  font-size: 24px; /* Set institution heading size. */
  line-height: 1.25; /* Keep heading lines tidy. */
}

/* Institution card paragraph. */
.institution-card p {
  margin-bottom: 16px; /* Add space below description text. */
  color: var(--muted-text); /* Use muted body text. */
  font-size: 16px; /* Use normal readable text size. */
}

/* Institution facts list. */
.institution-facts {
  display: grid; /* Stack facts neatly. */
  gap: 8px; /* Add space between facts. */
  margin: 0 0 22px; /* Add space below the facts list. */
}

/* Institution fact item. */
.institution-facts li {
  display: flex; /* Put icon and fact text in one row. */
  align-items: flex-start; /* Align icon with the first line of text. */
  gap: 8px; /* Add space between icon and text. */
  color: var(--muted-text); /* Use softer fact text. */
  font-weight: 700; /* Make facts easy to scan. */
}

/* Institution fact icon. */
.institution-facts .material-symbols-outlined {
  color: var(--secondary); /* Make fact icons green. */
  font-size: 18px; /* Keep fact icons compact. */
  line-height: 1.5; /* Align icons with text. */
}

/* Institution action button. */
.institution-action {
  width: fit-content; /* Keep Know More button compact. */
  margin-top: auto; /* Push button to the bottom of normal cards. */
}
/* Testimonials section has a dark background. */
.testimonials-section {
  background: var(--dark-bg); /* Dark background. */
  color: white; /* White text. */
}

/* Testimonials title area. */
.testimonials-header {
  text-align: center; /* Center heading. */
  margin-bottom: 32px; /* Space before cards. */
}

/* Small green line below testimonials title. */
.testimonials-divider {
  width: 96px; /* Line width. */
  height: 4px; /* Line height. */
  margin: 0 auto; /* Center line. */
  background: var(--secondary); /* Green line. */
  border-radius: 999px; /* Rounded line ends. */
}

/* Testimonials grid. */
.testimonials-grid {
  display: grid; /* Use grid layout. */
  grid-template-columns: repeat(3, 1fr); /* Three cards on desktop. */
  gap: 24px; /* Space between cards. */
}

/* Testimonial card. */
.testimonial-card {
  position: relative; /* Allows quote icon placement. */
  padding: 32px; /* Card spacing. */
  background: rgba(255, 255, 255, 0.08); /* Transparent white card. */
  border: 1px solid rgba(255, 255, 255, 0.12); /* Soft white border. */
  border-radius: var(--radius-large); /* Rounded corners. */
}

/* Quote icon. */
.testimonial-quote-icon {
  position: absolute; /* Put icon in corner. */
  top: 24px; /* Distance from top. */
  right: 24px; /* Distance from right. */
  color: var(--secondary); /* Green icon. */
  font-size: 36px; /* Large quote icon. */
  opacity: 0.6; /* Make it subtle. */
}

/* Star row. */
.stars {
  display: flex; /* Place stars in a row. */
  gap: 2px; /* Tiny gap between stars. */
  margin-bottom: 16px; /* Space below stars. */
  color: var(--secondary); /* Green stars. */
}

/* Testimonial quote text. */
.testimonial-text {
  margin-bottom: 24px; /* Space before author. */
  font-style: italic; /* Quote style. */
}

/* Testimonial author name. */
.testimonial-author p {
  font-weight: 800; /* Bold name. */
}

/* Testimonial author location. */
.testimonial-author span {
  font-size: 12px; /* Small location text. */
  opacity: 0.75; /* Softer location text. */
}

/* Footer background and spacing. */
.site-footer {
  padding: 48px 0; /* Footer spacing. */
  background: #001e2c; /* Dark blue footer. */
  color: #7bd0ff; /* Footer text color. */
}

/* Footer columns. */
.footer-grid {
  display: grid; /* Use grid layout. */
  grid-template-columns: repeat(4, 1fr); /* Four footer columns. */
  gap: 24px; /* Space between columns. */
  margin-bottom: 32px; /* Space before bottom footer. */
}

/* Footer logo. */
.footer-logo img {
  height: 48px; /* Logo height. */
  margin-bottom: 16px; /* Space below logo. */
}

/* Footer about text. */
.footer-about {
  margin-bottom: 24px; /* Space before social icons. */
  color: #c4e7ff; /* Light footer text. */
}

/* Footer social links. */
.footer-socials {
  display: flex; /* Put social icons in a row. */
  gap: 16px; /* Space between icons. */
}

/* Footer column heading. */
.footer-col h4 {
  margin-bottom: 16px; /* Space below heading. */
  color: white; /* White heading. */
  font-family: var(--heading-font); /* Heading font. */
  font-size: 22px; /* Heading size. */
}

/* Footer links spacing. */
.footer-links li + li {
  margin-top: 10px; /* Space between footer links. */
}

/* Footer link and contact text. */
.footer-links a,
.footer-contact li,
.footer-contact a {
  color: #c4e7ff; /* Light footer text. */
}

/* Footer contact row. */
.footer-contact li {
  display: flex; /* Icon and text side by side. */
  align-items: flex-start; /* Keep icons aligned with multi-line address text. */
  gap: 12px; /* Space between icon and text. */
  margin-bottom: 12px; /* Space between contact rows. */
}

.footer-contact a {
  text-decoration: none; /* Keep contact links visually clean. */
}

.footer-email {
  white-space: nowrap; /* Keep the email on one line. */
}

/* Footer bottom row. */
.footer-bottom {
  display: flex; /* Copyright left, legal links right. */
  align-items: center; /* Center items vertically. */
  justify-content: space-between; /* Push sides apart. */
  gap: 16px; /* Space if items wrap. */
  padding-top: 24px; /* Space above bottom row. */
  border-top: 1px solid rgba(255, 255, 255, 0.15); /* Top divider. */
}

/* Footer copyright and legal link text. */
.footer-copyright,
.footer-legal a {
  color: #c4e7ff; /* Light footer text. */
  font-size: 12px; /* Small text. */
  font-weight: 700; /* Bold text. */
}

/* Footer legal link row. */
.footer-legal {
  display: flex; /* Put legal links in a row. */
  align-items: center; /* Vertically align footer legal links. */
  gap: 16px; /* Space between legal links. */
  flex-wrap: wrap; /* Allow sitemap to wrap before squeezing the credit. */
  justify-content: flex-end; /* Keep legal links on the right on desktop. */
}

.built-by-credit {
  display: inline-flex; /* Keep the credit visible as one item. */
  white-space: nowrap; /* Prevent the built-by credit from breaking. */
}

@media (min-width: 769px) {
  .footer-bottom {
    padding-right: 104px; /* Keep the fixed WhatsApp button from covering the credit. */
  }

  .footer-legal {
    min-width: max-content; /* Keep the built-by credit readable on desktop. */
  }
}

/* Floating appointment button. */
.fab {
  position: fixed; /* Keep button on screen while scrolling. */
  right: 32px; /* Distance from right edge. */
  bottom: 32px; /* Distance from bottom edge. */
  z-index: 40; /* Keep above page content. */
  display: flex; /* Center icon inside button. */
  align-items: center; /* Vertical center. */
  justify-content: center; /* Horizontal center. */
  width: 56px; /* Button width. */
  height: 56px; /* Button height. */
  background: var(--secondary); /* Green background. */
  color: white; /* White icon. */
  border: 0; /* No border. */
  border-radius: 50%; /* Circle button. */
  box-shadow: var(--shadow); /* Button shadow. */
  cursor: pointer; /* Clickable cursor. */
  text-decoration: none; /* Keep anchor version clean. */
}

.whatsapp-fab {
  overflow: hidden;
  background: #25d366;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 28px rgba(0, 0, 0, 0.18);
}

.whatsapp-logo {
  width: 38px;
  height: 38px;
  display: block;
}

.whatsapp-bubble {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4.7;
}

.whatsapp-phone {
  fill: currentColor;
}

/* Floating button hover effect. */
.fab:hover {
  transform: scale(1.06); /* Grow slightly. */
}

/* Tooltip beside the floating button. */
.fab-tooltip {
  position: absolute; /* Place beside button. */
  right: 76px; /* Move left of button. */
  padding: 8px 14px; /* Tooltip spacing. */
  background: var(--primary); /* Dark tooltip. */
  color: white; /* White text. */
  border-radius: 12px; /* Rounded tooltip. */
  font-size: 14px; /* Tooltip text size. */
  white-space: nowrap; /* Keep tooltip on one line. */
  opacity: 0; /* Hide tooltip normally. */
  pointer-events: none; /* Tooltip does not block clicks. */
}

/* Show tooltip on hover. */
.fab:hover .fab-tooltip {
  opacity: 1; /* Make tooltip visible. */
}

/* Tablet layout changes. */
@media (max-width: 1180px) {
  .nav-inner { gap: 12px; } /* Keep longer nav from overflowing. */
  .nav-links { gap: 12px; } /* Reduce nav spacing on medium screens. */
  .nav-link { font-size: 13px; } /* Slightly smaller nav labels. */
  .brand-name { max-width: 220px; font-size: 14px; } /* Compact brand. */
  .btn { padding: 9px 13px; } /* Compact buttons. */
  .package-grid { grid-template-columns: repeat(2, 1fr); } /* Packages fit tablets. */
  .departments-all-grid { grid-template-columns: repeat(2, 1fr); } /* Departments fit tablets. */
}

@media (max-width: 1024px) {
  .brand-name { max-width: 230px; font-size: 15px; } /* Slightly smaller tablet brand name. */
  .brand-subtitle { display: block; font-size: 11px; } /* Keep subtitle visible on tablets. */
  .nav-links { display: none; } /* Hide menu links behind hamburger on tablets. */
  .menu-toggle { display: block; } /* Show menu button on tablets. */
  .nav-links.open { display: flex; position: absolute; top: 80px; left: 0; right: 0; flex-direction: column; padding: 16px; background: var(--light-bg); border-bottom: 1px solid var(--border); } /* Tablet mobile menu. */
  .trust-badge { display: none; } /* Hide floating badge on smaller screens. */
  .dept-grid { grid-template-columns: repeat(4, 1fr); } /* Four department columns. */
  .insurance-grid { grid-template-columns: 1fr; } /* Stack insurance support cards. */
  .insurance-partners { grid-template-columns: repeat(3, 1fr); } /* Three insurance partners per row. */
  .footer-grid { grid-template-columns: repeat(2, 1fr); } /* Footer fits tablets. */
}

/* Mobile layout changes. */
@media (max-width: 768px) {
  .container { padding: 0 var(--mobile-padding); } /* Smaller side spacing. */
  .nav-inner { padding: 0 var(--mobile-padding); gap: 12px; } /* Smaller nav spacing. */
  .nav-logo-img { width: 48px; height: 48px; } /* Slightly smaller mobile logo. */
  .brand-name { max-width: 165px; font-size: 13px; line-height: 1.15; } /* Smaller mobile brand name. */
  .brand-subtitle { display: block; font-size: 10px; line-height: 1.1; } /* Keep subtitle visible but compact. */
  .nav-links { display: none; } /* Hide menu links by default. */
  .menu-toggle { display: block; } /* Show menu button. */
  .nav-links.open { display: flex; position: absolute; top: 80px; left: 0; right: 0; flex-direction: column; padding: 16px; background: var(--light-bg); border-bottom: 1px solid var(--border); } /* Show mobile menu when JS adds .open. */
  .hero-inner { flex-direction: column; padding-top: 16px; padding-bottom: 48px; } /* Stack hero columns. */
  .hero-text h1 { font-size: 32px; } /* Smaller hero heading. */
  .hero-search { max-width: 100%; } /* Let the search panel fit mobile width. */
  .search-row { flex-wrap: wrap; } /* Allow search controls to wrap on mobile. */
  .search-row input { flex-basis: calc(100% - 34px); } /* Put input beside the icon on mobile. */
  .search-row .btn { width: 100%; justify-content: center; } /* Make search button full width on mobile. */
  .hero-slide { height: 280px; } /* Shorter hero image. */
  .stats-grid { grid-template-columns: repeat(2, 1fr); } /* Two stats per row. */
  .stat-number { font-size: 36px; } /* Smaller stat number. */
  .section-header { flex-direction: column; align-items: flex-start; } /* Stack section title and button. */
  .section-title, .testimonials-header h2 { font-size: 32px; } /* Smaller section titles. */
  .bento-grid { grid-template-columns: 1fr; } /* One card per row. */
  .bento-cancer, .bento-cardio, .bento-renal, .bento-neuro, .bento-gastro, .bento-critical, .bento-headneck, .bento-ortho, .bento-stairs { grid-column: span 1; } /* Cards take full width. */
  .feature-list { grid-template-columns: 1fr; } /* One feature per row. */
  .center-detail-hero .container { grid-template-columns: 1fr; } /* Stack detail hero on mobile. */
  .center-detail-hero h1 { font-size: 34px; } /* Smaller detail hero heading. */
  .center-detail-icon { justify-self: start; width: 120px; height: 120px; } /* Smaller detail icon. */
  .center-detail-icon .material-symbols-outlined { font-size: 58px; } /* Smaller detail icon glyph. */
  .center-detail-layout { grid-template-columns: 1fr; } /* Stack detail content and panel. */
  .doctor-profile-layout { grid-template-columns: 1fr; } /* Stack doctor profile on mobile. */
  .doctor-profile-photo-wrap { max-width: 320px; } /* Keep profile photo from becoming too large. */
  .doctor-profile-copy h1 { font-size: 36px; } /* Smaller doctor profile title. */
  .center-service-list { grid-template-columns: 1fr; } /* One service item per row. */
  .department-doctors-grid { grid-template-columns: 1fr; } /* One doctor card per row on mobile. */
  .departments-page-hero h1 { font-size: 36px; } /* Smaller departments page title. */
  .departments-toolbar { flex-direction: column; align-items: stretch; } /* Stack title and search. */
  .department-search { min-width: 0; } /* Let search fit mobile width. */
  .departments-all-grid { grid-template-columns: 1fr; } /* One department card per row. */
  .careers-hero h1 { font-size: 36px; } /* Smaller careers title. */
  .career-grid { grid-template-columns: 1fr; } /* One vacancy card per row. */
  .insurance-grid, .package-grid { grid-template-columns: 1fr; } /* Stack cards. */
  .insurance-partners { grid-template-columns: repeat(2, 1fr); } /* Two partner tiles per row. */
  .tour-modal { padding: 12px; } /* Smaller modal margin on mobile. */
  .tour-dialog-header { padding: 16px; } /* Compact modal header. */
  .tour-dialog h2 { font-size: 19px; } /* Smaller modal title. */
  .tour-frame-wrap { height: min(520px, calc(92vh - 78px)); } /* Tour fits mobile viewport. */
  .booking-grid { grid-template-columns: 1fr; } /* Stack booking fields. */
  .booking-actions { justify-content: flex-start; flex-wrap: wrap; } /* Keep booking buttons compact. */
  .booking-actions .btn { width: auto; } /* Avoid oversized mobile buttons. */
  .dept-grid { grid-template-columns: repeat(3, 1fr); } /* Three department columns. */
  .news-grid { grid-template-columns: 1fr; } /* One news card per row. */
  .social-layout { grid-template-columns: 1fr; } /* Stack social screens on mobile. */
  .institutions-grid { grid-template-columns: 1fr; } /* Stack institution cards on mobile. */
  .featured-institution { grid-column: span 1; grid-template-columns: 1fr; } /* Make featured institution full width. */
  .news-card { flex-direction: column; } /* Stack news image and text. */
  .news-img { width: 100%; height: 190px; } /* Full-width news image. */
  .testimonials-grid { grid-template-columns: 1fr; } /* One testimonial per row. */
  .footer-grid { grid-template-columns: 1fr 1fr; } /* Two footer columns. */
  .footer-bottom { flex-direction: column; text-align: center; } /* Stack footer bottom. */
  .footer-legal { justify-content: center; } /* Keep footer credit centered when stacked. */
}

/* Very small phone layout changes. */
@media (max-width: 480px) {
  .btn-contact { display: none; } /* Hide contact button in header to save space. */
  .brand-name { max-width: 135px; } /* Keep brand text from pushing buttons off screen. */
  .brand-subtitle { font-size: 9px; }
  .dept-grid { grid-template-columns: repeat(2, 1fr); } /* Two department columns. */
  .doctor-card { grid-template-columns: 1fr; text-align: center; justify-items: center; } /* Stack doctor photo and text. */
  .doctor-photo, .doctor-avatar { width: 136px; height: 136px; } /* Bigger visible doctor image on phones. */
  .insurance-partners { grid-template-columns: 1fr; } /* One insurance partner per row. */
  .department-list-card { grid-template-columns: 44px minmax(0, 1fr); } /* Hide arrow column naturally on phones. */
  .department-list-card > .material-symbols-outlined:last-child { display: none; } /* Remove trailing arrow on narrow cards. */
  .footer-grid { grid-template-columns: 1fr; } /* One footer column. */
  .fab { right: 20px; bottom: 20px; } /* Move floating button inward. */
}





.appointment-hero {
  min-height: calc(100vh - 86px);
  display: grid;
  align-items: center;
  padding: clamp(56px, 8vw, 104px) 0;
  background:
    linear-gradient(120deg, rgba(0, 106, 97, 0.08), rgba(255, 255, 255, 0) 52%),
    #f7fbff;
}

.appointment-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}

.appointment-copy {
  max-width: 720px;
}

.appointment-copy h1 {
  margin: 12px 0 20px;
  color: var(--text);
  font: 800 clamp(38px, 5vw, 70px)/1.06 var(--heading-font);
  letter-spacing: 0;
}

.appointment-copy p {
  max-width: 660px;
  color: var(--muted-text);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.7;
}

.appointment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.appointment-panel {
  padding: clamp(18px, 3vw, 28px);
  background: #ffffff;
  border: 1px solid rgba(22, 35, 58, 0.12);
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(22, 35, 58, 0.12);
}

.portal-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  margin-bottom: 18px;
  color: var(--secondary);
  font-weight: 800;
}

.portal-status .material-symbols-outlined {
  color: var(--secondary);
}

.portal-feature-grid {
  display: grid;
  gap: 12px;
}

.portal-feature-grid article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 4px 12px;
  align-items: start;
  padding: 16px;
  background: #f6f9fb;
  border: 1px solid rgba(22, 35, 58, 0.08);
  border-radius: 8px;
}

.portal-feature-grid .material-symbols-outlined {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: var(--secondary);
  border-radius: 8px;
}

.portal-feature-grid strong {
  color: var(--text);
  font: 800 15px/1.2 var(--heading-font);
}

.portal-feature-grid small {
  color: var(--muted-text);
  line-height: 1.5;
}

.appointment-steps {
  padding: clamp(48px, 7vw, 86px) 0;
  background: #ffffff;
}

@media (max-width: 900px) {
  .appointment-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .appointment-actions .btn {
    width: auto;
  }
}

/* Site-wide responsive hardening for phones, tablets, and wide screens. */
html {
  overflow-x: hidden;
}

body {
  overflow-x: clip;
}

p,
li,
a,
button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
strong,
small {
  overflow-wrap: anywhere;
}

input,
select,
textarea,
button {
  max-width: 100%;
  font: inherit;
}

.hero-inner,
.center-detail-layout,
.doctor-profile-layout,
.appointment-shell {
  min-width: 0;
}

.bento-card,
.department-list-card,
.doctor-card,
.news-card,
.testimonial-card,
.institution-card,
.insurance-card,
.package-card,
.admin-card,
.appointment-panel {
  min-width: 0;
}

@media (min-width: 1440px) {
  :root {
    --container-width: 1360px;
  }

  .hero-text h1 {
    max-width: 820px;
  }
}

@media (max-width: 1180px) {
  .nav-actions {
    gap: 8px;
  }

  .nav-actions .btn {
    white-space: nowrap;
  }

  .hero-inner {
    gap: 36px;
  }
}

@media (max-width: 1024px) {
  .site-header {
    position: sticky;
  }

  .nav-inner {
    position: relative;
  }

  .nav-links.open {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    box-shadow: 0 18px 34px rgba(17, 24, 39, 0.12);
  }

  .nav-links.open .nav-link {
    width: 100%;
    min-height: 44px;
  }

  .hero-inner,
  .center-detail-hero .container,
  .center-detail-layout,
  .doctor-profile-layout,
  .appointment-shell {
    grid-template-columns: 1fr;
  }

  .hero-inner {
    display: grid;
  }

  .hero-text,
  .hero-image-wrap,
  .appointment-copy {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  :root {
    --section-space: 56px;
  }

  .site-header {
    top: 0;
  }

  .nav-inner {
    min-height: 72px;
    height: auto;
    padding-block: 10px;
  }

  .nav-logo a {
    min-width: 0;
  }

  .nav-actions {
    margin-left: auto;
  }

  .nav-actions .btn-primary {
    display: none;
  }

  .nav-links.open {
    top: 72px;
  }

  .departments-page-hero,
  .careers-hero,
  .center-detail-hero,
  .appointment-hero {
    padding-block: 44px;
  }

  .hero-image-wrap {
    order: -1;
  }

  .hero-text {
    order: 1;
  }

  .hero-text h1,
  .departments-page-hero h1,
  .careers-hero h1,
  .center-detail-hero h1,
  .doctor-profile-copy h1,
  .appointment-copy h1 {
    font-size: clamp(32px, 9vw, 44px);
    line-height: 1.08;
  }

  .hero-actions {
    gap: 10px;
  }

  .hero-actions .btn,
  .appointment-actions .btn,
  .center-detail-actions .btn {
    flex: 0 1 auto;
  }

  .hero-image-wrap,
  .hero-img-container,
  .hero-slide {
    min-height: 0;
  }

  .hero-slide,
  .news-img,
  .institution-image,
  .doctor-profile-photo-wrap {
    aspect-ratio: 16 / 10;
  }

  .hero-slide {
    height: auto;
  }

  .department-list-card,
  .doctor-card {
    align-items: center;
  }

  .admin-table-wrap,
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 680px;
  }

  .booking-dialog,
  .tour-dialog {
    width: min(100%, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }

  .fab {
    width: 54px;
    height: 54px;
    right: 18px;
    bottom: 18px;
  }
}

@media (max-width: 560px) {
  .container {
    padding-inline: 14px;
  }

  .brand-text {
    min-width: 0;
  }

  .brand-name {
    max-width: 42vw;
  }

  .menu-toggle {
    width: 42px;
    min-width: 42px;
  }

  .hero-actions,
  .appointment-actions,
  .center-detail-actions,
  .booking-actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .hero-actions .btn,
  .appointment-actions .btn,
  .center-detail-actions .btn,
  .booking-actions .btn {
    width: auto;
    min-width: 0;
    flex: 0 1 auto;
  }

  .btn-large {
    min-height: 44px;
    padding: 10px 15px;
    font-size: 15px;
  }

  .search-type {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .search-type-btn {
    min-width: 0;
  }

  .stats-grid {
    gap: 10px;
  }

  .dept-card,
  .department-list-card,
  .insurance-card,
  .package-card,
  .testimonial-card,
  .portal-feature-grid article {
    padding: 16px;
  }

  .portal-feature-grid article {
    grid-template-columns: 38px 1fr;
  }

  .portal-feature-grid .material-symbols-outlined {
    width: 38px;
    height: 38px;
  }

  .footer-legal {
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 380px) {
  .nav-logo-img {
    width: 42px;
    height: 42px;
  }

  .brand-name {
    max-width: 38vw;
    font-size: 12px;
  }

  .brand-subtitle {
    font-size: 8px;
  }

  .hero-text h1,
  .departments-page-hero h1,
  .careers-hero h1,
  .center-detail-hero h1,
  .doctor-profile-copy h1,
  .appointment-copy h1 {
    font-size: 30px;
  }

  .btn {
    min-height: 40px;
    padding: 8px 11px;
    font-size: 13px;
  }

  .fab {
    width: 50px;
    height: 50px;
    right: 14px;
    bottom: 14px;
  }

  .whatsapp-logo {
    width: 31px;
    height: 31px;
  }
}