/* GENERATED by admin/_tools/build_css_bundle.py - do not edit.
 * Edit the sources below and re-run the tool.
 */

/* ---------- assets/css/style.css ---------- */
/* ===== CSS Variables & Theme Configuration ===== */
:root {
  /* Brand Colors */
  --primary-color: #0b7e41;   /* 5.15:1 on white - was #0f9d58 at 3.51:1 */
  --primary-dark: #096331;    /* 7.39:1 - stays darker than the base so hover still reads */
  --primary-light: #14b866;

  /* Neutral Colors */
  --white: #ffffff;
  --black: #000000;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Accent Colors */
  --accent-gold: #fcd34d;
  --accent-blue: #60a5fa;

  /* Typography */
  --font-family-en: "Inter", sans-serif;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;

  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  /* How much vertical room the fixed header takes.
     Measured, not guessed: 73px on desktop, where the nav is one row of links,
     and 126px below 1200px, where the row becomes the brand plus the menu
     button on a taller bar. Anything that starts at the top of the page has to
     clear this, or the header sits on top of it. */
  --header-h: 73px;
  /* Referenced by .form-message but never defined, so every use has been
     riding its own fallback. Declared here with exactly those fallback values,
     which keeps the rendering identical and gives the tokens one home. */
  --error-color: #ef4444;
  --info-color: #3b82f6;
  --success-color: #10b981;
}

/* ===== Typing and Counting Animations ===== */
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  background-color: var(--primary-color);
  animation: blink 1s infinite;
  margin-left: 2px;
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

.typing-text {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--primary-color);
  animation: typing-cursor 0.5s step-end infinite;
}

@keyframes typing-cursor {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: var(--primary-color);
  }
}

.counting-number {
  display: inline-block;
  position: relative;
}

.counting-number::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(15, 157, 88, 0.3),
    transparent
  );
  animation: numberShine 2s ease-in-out;
  pointer-events: none;
}

@keyframes numberShine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Enhanced loading text animation */
.loading-text.typing {
  position: relative;
}

.loading-text.typing::after{
  content: "|";
  position: absolute;
  right: -10px;
  color: var(--white);
  animation: blink 1s infinite;
  pointer-events: none;
}

/* Hero section typing enhancements */
.hero-title.typing,
.hero-subtitle.typing {
  overflow: hidden;
  white-space: nowrap;
  max-width: fit-content;
}

.hero-title.typing::after,
.hero-subtitle.typing::after {
  content: "|";
  color: var(--primary-color);
  animation: blink 1s infinite;
  margin-left: 2px;
}

/* Remove cursor after typing completes */
.typing-complete::after {
  display: none;
}

/* Nothing may widen the page sideways.

   overflow-x on <body> alone does not do this. When <html> is left `visible`
   the browser hands the viewport's scrolling to <body>, and the `hidden` on
   <body> stops applying — so the guard that was here read as if it worked and
   did nothing. It has to be on <html> as well.

   clip rather than hidden: hidden turns the element into a scroll container,
   which breaks position:sticky inside it. clip refuses the overflow without
   creating one. hidden is left first as the fallback for older engines.

   What it was hiding: the scroll-in animation on cards offsets them 100px to
   the right until they scroll into view. Any such card still waiting below the
   fold was stretching the page ~84px wider than the screen, so the whole
   layout could be dragged sideways and every label read as cut off down its
   left edge. */
html {
  overflow-x: hidden;
  overflow-x: clip;
}

/* ===== Global Animated Backgrounds ===== */
body {
  position: relative;
  overflow-x: hidden;
  overflow-x: clip;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 20% 20%,
      rgba(15, 157, 88, 0.03) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(20, 184, 102, 0.03) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 40% 60%,
      rgba(15, 157, 88, 0.02) 0%,
      transparent 50%
    );
  animation: backgroundFloat 20s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes backgroundFloat {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(10px, -10px) rotate(1deg);
  }
  50% {
    transform: translate(-10px, 10px) rotate(-1deg);
  }
  75% {
    transform: translate(5px, 5px) rotate(0.5deg);
  }
}

/* Floating particles */
.floating-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.floating-particles::before,
.floating-particles::after{
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(15, 157, 88, 0.1);
  border-radius: 50%;
  animation: floatUp 15s infinite linear;
  pointer-events: none;
}

.floating-particles::before {
  left: 10%;
  animation-delay: 0s;
}

.floating-particles::after {
  left: 80%;
  animation-delay: 5s;
}

@keyframes floatUp {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) scale(1);
    opacity: 0;
  }
}

/* Enhanced text clarity */
/* Only text-shadow survives here. color, font-weight and line-height were all
   re-declared by the second bare h1-h6 block further down this same file, at
   equal specificity, so this block's versions never rendered - they just made
   the file read as if the brand green applied to every heading when it did
   not. The live values live in that later block. */
h1,
h2,
h3,
h4,
h5,
h6 {
}

p {
  /* colour omitted on purpose - the later bare p block sets --gray-600 and wins. */
  font-weight: 400;
  line-height: 1.7;
  max-width: none;
}

/* Card enhancements with animated backgrounds */
.about-card,
.stat-card,
.oncology-card,
.service-card,
.hospital-card,
.story-card {
  position: relative;
  overflow: hidden;
}

.about-card::before{
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(15, 157, 88, 0.05) 50%,
    transparent 70%
  );
  animation: shimmer 3s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes shimmer {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    transform: translate(-30%, -30%) rotate(180deg);
  }
}

/* Hero section animated background */
.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-section::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 30% 40%,
      rgba(15, 157, 88, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 70% 60%,
      rgba(20, 184, 102, 0.1) 0%,
      transparent 50%
    );
  animation: heroPulse 10s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes heroPulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

.hero-content {
  position: relative;
  z-index: 2;
}

/* Section backgrounds */
.service-category,
.journey-features,
.network-stats-section {
  position: relative;
}

.service-category::before,
.journey-features::before,
.network-stats-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
      135deg,
      rgba(15, 157, 88, 0.02) 0%,
      transparent 70%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(20, 184, 102, 0.03) 0%,
      transparent 50%
    );
  z-index: 0;
  pointer-events: none;
}

.service-category > *,
.journey-features > *,
.network-stats-section > * {
  position: relative;
  z-index: 1;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-family-en);
  line-height: 1.6;
  color: var(--gray-800);
  background-color: var(--white);
  transition: background-color var(--transition-normal),
    color var(--transition-normal);
  overflow-x: hidden;
}

/* ===== Typography ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 1.3;
  color: var(--primary-color);
  margin-bottom: var(--spacing-md);
}

h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2.5rem;
}
h3 {
  font-size: 2rem;
}
h4 {
  font-size: 1.5rem;
}
h5 {
  font-size: 1.25rem;
}
h6 {
  font-size: 1.125rem;
}

p {
  margin-bottom: var(--spacing-md);
  color: var(--gray-600);
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* Inline links inside prose carry a cue that is not colour. Measured against
   the body text (--gray-800, #1f2937) the link green reaches 2.85:1, and WCAG
   asks for 3:1 when colour is the only thing separating a link from the text
   around it. An underline removes the dependence on colour entirely. Links
   that carry a class -- nav items, buttons, cards -- are excluded, because
   they already read as controls from their own styling. */
p > a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.06em;
}


a:hover {
  color: var(--primary-dark);
}

/* ===== Container ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* ===== Loading Screen ===== */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--primary-light) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  transition: opacity var(--transition-slow);
}

.loading-screen::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 20% 80%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 50%
    );
  animation: loadingFloating 20s ease-in-out infinite;
  pointer-events: none;
}

@keyframes loadingFloating {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(1deg);
  }
  66% {
    transform: translateY(20px) rotate(-1deg);
  }
}

.loading-content {
  text-align: center;
  color: var(--white);
  position: relative;
  z-index: 2;
}

.loading-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-2xl);
  animation: logoPulse 2s ease-in-out infinite;
}

@keyframes logoPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.loading-logo i {
  font-size: 4rem;
  color: var(--white);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.loading-logo span {
  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.loading-spinner {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.loading-spinner i {
  font-size: 3rem;
  color: var(--white);
  animation: spin 1s linear infinite;
  margin-bottom: var(--spacing-md);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--white);
  opacity: 0.9;
  animation: textFade 2s ease-in-out infinite;
}

@keyframes textFade {
  0%,
  100% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.6;
  }
}

.loading-progress {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  margin: var(--spacing-lg) auto 0;
  overflow: hidden;
}

.loading-progress-bar {
  height: 100%;
  background: var(--white);
  border-radius: 2px;
  animation: progressLoad 2s ease-in-out infinite;
}

@keyframes progressLoad {
  0% {
    width: 0%;
  }
  50% {
    width: 70%;
  }
  100% {
    width: 100%;
  }
}

.loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ===== Header & Navigation ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: var(--z-sticky);
  transition: all var(--transition-normal);
  border-bottom: 1px solid rgba(15, 157, 88, 0.15);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar {
  padding: var(--spacing-md) 0;
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary-color);
  transition: all var(--transition-normal);
  position: relative;
  text-shadow: 0 2px 4px rgba(15, 157, 88, 0.1);
  white-space: nowrap;
  flex: 0 0 auto;
}

.nav-logo::before{
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: linear-gradient(
    45deg,
    var(--primary-color),
    var(--primary-light),
    var(--primary-color)
  );
  border-radius: 12px;
  opacity: 0;
  z-index: -1;
  transition: opacity var(--transition-normal);
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
  pointer-events: none;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.nav-logo:hover::before {
  opacity: 0.1;
}

.nav-logo:hover {
  color: var(--primary-dark);
}

.nav-logo .logo-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-right: var(--spacing-sm);
  flex-shrink: 0;
  /* No frame. The mark is a circular badge on a transparent background, and a
     1px border with a 4px radius drew a rounded square around it — the corners
     of a box that is not there. */
}

.nav-logo .logo-img-visible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.nav-logo i {
  font-size: 1.8rem;
  color: var(--primary-color);
  transition: all var(--transition-normal);
  filter: drop-shadow(0 2px 4px rgba(15, 157, 88, 0.2));
}

.nav-logo:hover i {
  transform: rotate(10deg) scale(1.1);
  filter: drop-shadow(0 4px 8px rgba(15, 157, 88, 0.3));
}

.nav-menu {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  list-style: none;
  gap: 6px;
  align-items: center;
}

/* Nine links plus the brand need 1294px on one line, and the bar is 1200px.
   Left to itself the flex row solved that by breaking labels mid-phrase
   ("Our / Network") — at every width, 1600px included. nowrap forbids the
   break, the tighter side padding buys back the missing ~110px, and below
   1200px responsive.css swaps the whole row for the menu button. */
.nav-link {
  color: var(--gray-600);
  font-weight: 500;
  padding: var(--spacing-sm) 11px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-normal);
  position: relative;
  font-size: 0.9rem;
  text-decoration: none;
  display: block;
  white-space: nowrap;
}

.nav-link::after{
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 0;
  height: 1px;
  background: var(--primary-color);
  transition: all var(--transition-normal);
  border-radius: 1px;
  pointer-events: none;
}

.nav-link:hover {
  color: var(--primary-color);
  background: rgba(15, 157, 88, 0.03);
}

.nav-link:hover::after {
  transform: translateX(-50%) scaleX(1);
  width: 60%;
}

/* The markup has always carried .active on the current page's link, but nothing
   styled it, so the underline stayed at width 0 and the only green mark under
   the bar was a decorative 60px stub pinned to the centre of the navbar. It read
   as a broken "you are here" indicator because it sat under no link at all. The
   stub is gone; the underline now marks the page you are actually on. */
.nav-link.active {
  color: var(--primary-color);
  font-weight: 600;
}

.nav-link.active::after {
  transform: translateX(-50%) scaleX(1);
  width: 60%;
  height: 2px;
}

/* Language switch.

   One anchor per language was fine at two and breaks at five: the note above
   already has nine links needing 1294px in a 1200px bar. So the alternates live
   behind a single control that opens.

   <details> and not a script: the browser gives the open/close, the keyboard
   handling and the screen-reader announcement for free, which is more than a
   hand-rolled menu usually gets right. It also keeps working on a page whose
   JavaScript failed to load — which is the state the nav must never be in,
   because it is the only way off the page. */
.lang-switch {
  position: relative;
}

.lang-menu > summary {
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Safari draws its own triangle unless this is removed. */
.lang-menu > summary::-webkit-details-marker {
  display: none;
}

.lang-menu > summary .fa-globe {
  font-size: 0.85em;
  opacity: 0.75;
}

.lang-menu[open] > summary {
  color: var(--primary-color);
  background: rgba(15, 157, 88, 0.03);
}

.lang-list {
  position: absolute;
  top: calc(100% + 6px);
  /* Logical, so the panel hangs off the correct edge in Arabic without a
     second rule and without rtlcss having to guess. */
  inset-inline-end: 0;
  min-width: 170px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
}

.lang-option {
  /* 44px is the minimum comfortable tap target, and this control is used on
     touch screens as much as anywhere. Measured at 43px with padding alone. */
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--gray-700);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  /* Each option is its own language, so it is set in its own direction. */
  text-align: start;
}

.lang-option:hover,
.lang-option:focus-visible {
  background: var(--gray-100);
  color: var(--primary-color);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  padding: 6px;
  background: rgba(15, 157, 88, 0.05);
  border: 1px solid rgba(15, 157, 88, 0.1);
  border-radius: var(--radius-sm);
  color: rgba(15, 157, 88, 0.4);
  cursor: pointer;
  transition: all var(--transition-normal);
  width: 32px;
  height: 32px;
  font-size: 0.9rem;
}

.mobile-menu-toggle:hover {
  background: rgba(15, 157, 88, 0.1);
  border-color: rgba(15, 157, 88, 0.2);
  color: rgba(15, 157, 88, 0.6);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-size: 1rem;
  line-height: 1;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.btn::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  /* was 0.3 — it washed the green out to 2.4:1 under the white label on hover */
  background: rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
  /* negative: paints above the button background but under the label, so a
     label written as a bare text node (no <span>) is never covered */
  z-index: -1;
  pointer-events: none;
}

.btn:hover::after {
  width: 300px;
  height: 300px;
}

.btn:active {
  transform: translateY(-1px) scale(0.98);
  transition: all 0.1s ease;
}

.btn-primary {
  /* darker stops than --primary-color: white label needs >=4.5:1 (WCAG AA); #0f9d58 is only 3.5:1 */
  background: linear-gradient(135deg, #0a7040 0%, #0b7d46 100%);
  color: var(--white);
  border: 2px solid var(--primary-color);
  position: relative;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 4px 15px rgba(15, 157, 88, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
}

.btn-primary span,
.btn-primary i {
  position: relative;
  z-index: 4;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.btn-primary:hover span,
.btn-primary:hover i {
  transform: translateY(-1px);
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.btn-primary.green-text {
  color: var(--white);
}

.btn-primary::before{
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  /* hover shade must stay dark enough for the white label (>=4.5:1) */
  background: linear-gradient(135deg, #0b7d46 0%, #096339 100%);
  transition: left 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: -1;
  pointer-events: none;
}

.btn-primary:hover::before {
  left: 0;
}

.btn-primary:hover {
  color: var(--white);
  transform: translateY(-4px) rotateX(5deg);
  box-shadow: 0 12px 35px rgba(15, 157, 88, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border-color: var(--primary-color);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.15);
  /* #0f9d58 on a light card is only 3.5:1; #0a7040 is 6.2:1 (WCAG AA) */
  color: #0a7040;
  border: 2px solid var(--primary-color);
  position: relative;
  overflow: hidden;
  z-index: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
}

.btn-secondary span,
.btn-secondary i {
  position: relative;
  z-index: 4;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.btn-secondary:hover span,
.btn-secondary:hover i {
  transform: translateY(-1px);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-secondary::before{
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0b7d46 0%, #096339 100%);
  transition: left 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: -1;
  pointer-events: none;
}

.btn-secondary:hover::before {
  left: 0;
}

.btn-secondary:hover {
  color: var(--white);
  transform: translateY(-4px) rotateX(5deg);
  box-shadow: 0 12px 35px rgba(15, 157, 88, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  border-color: var(--primary-color);
}

.btn-outline {
  background: var(--white);
  /* #0f9d58 on white is only 3.5:1; #0a7040 is 6.2:1 (WCAG AA) */
  color: #0a7040;
  border: 2px solid var(--primary-color);
  position: relative;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 4px 15px rgba(15, 157, 88, 0.2);
  transition: all 0.3s ease;
}

.btn-outline span,
.btn-outline i {
  position: relative;
  z-index: 4;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-outline::before{
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0b7d46 0%, #096339 100%);
  transition: left 0.4s ease;
  z-index: -1;
  pointer-events: none;
}

.btn-outline:hover::before {
  left: 0;
}

.btn-outline:hover {
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 157, 88, 0.3);
}

.btn-whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  border: none;
  color: white;
  padding: 14px 28px;
  border-radius: 8px;
  position: relative;
  z-index: 1;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  min-height: 44px;
}

.btn-whatsapp span,
.btn-whatsapp i {
  position: relative;
  z-index: 2;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.btn-whatsapp i {
  font-size: 16px;
}

.btn-whatsapp:hover {
  background: linear-gradient(135deg, #128c7e 0%, #0a6d5f 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.btn-whatsapp:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(37, 211, 102, 0.3);
}

.btn-outline span {
  position: relative;
  z-index: 2;
}

/* ===== Scroll Animations ===== */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.scroll-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animations for cards */
.scroll-animate.hospital-card,
.scroll-animate.stat-card,
.scroll-animate.oncology-card,
.scroll-animate.service-card,
.scroll-animate.about-card,
.scroll-animate.story-card {
  transition-delay: 0.1s;
}

.scroll-animate.hospital-card:nth-child(2),
.scroll-animate.stat-card:nth-child(2),
.scroll-animate.oncology-card:nth-child(2),
.scroll-animate.service-card:nth-child(2),
.scroll-animate.about-card:nth-child(2),
.scroll-animate.story-card:nth-child(2) {
  transition-delay: 0.2s;
}

.scroll-animate.hospital-card:nth-child(3),
.scroll-animate.stat-card:nth-child(3),
.scroll-animate.oncology-card:nth-child(3),
.scroll-animate.service-card:nth-child(3),
.scroll-animate.about-card:nth-child(3),
.scroll-animate.story-card:nth-child(3) {
  transition-delay: 0.3s;
}

.scroll-animate.hospital-card:nth-child(4),
.scroll-animate.stat-card:nth-child(4),
.scroll-animate.oncology-card:nth-child(4),
.scroll-animate.service-card:nth-child(4),
.scroll-animate.about-card:nth-child(4),
.scroll-animate.story-card:nth-child(4) {
  transition-delay: 0.4s;
}

/* Special animations for sections */
.scroll-animate.journey-cta {
  transform: translateY(50px) scale(0.95);
}

.scroll-animate.journey-cta.animate-in {
  transform: translateY(0) scale(1);
}

.scroll-animate.page-header {
  transform: translateY(-30px);
}

.scroll-animate.page-header.animate-in {
  transform: translateY(0);
}
/* The banner every page except the home page opens with.

   padding-top clears the fixed header. Without it the heading is centred in a
   box that starts at y=0 — underneath the header — and a heading tall enough to
   fill that box grows upwards into it. Short headings happened to land below
   the header and looked fine; the six-line article titles did not, and on
   desktop the clearance was down to 4px, so it was one longer title away from
   breaking there too.

   min-height grows by the same amount so the visible banner stays 60vh rather
   than losing the top of it to the padding. */
.page-header {
  position: relative;
  min-height: calc(60vh + var(--header-h));
  padding-top: var(--header-h);
  display: flex;
  align-items: center;
  background: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--primary-light) 100%
  );
  color: var(--white);
  overflow: hidden;
}

.page-header::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.page-header-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.page-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-lg);
  line-height: 1.2;
  color: var(--white);
}

.page-subtitle {
  font-size: 1.25rem;
  font-weight: 400;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
  color: var(--white);
}

/* ===== Service Categories ===== */
.service-category {
  padding: var(--spacing-xl) 0;
  background: var(--gray-50);
}

.service-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
  text-align: left;
}

.service-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-color) 0%, #0d9d68 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 2rem;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(15, 157, 88, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.service-icon::before{
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transform: rotate(45deg);
  transition: all 0.6s ease;
  opacity: 0;
  pointer-events: none;
}

.service-icon:hover::before {
  opacity: 1;
  animation: shine 0.6s ease;
}

.service-icon:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(15, 157, 88, 0.4);
}

.service-icon i {
  font-size: 2rem;
  color: var(--white);
  transition: all 0.3s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.service-icon:hover i {
  transform: rotate(10deg);
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

@keyframes shine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.service-title h2 {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-sm);
  color: var(--primary-color);
}

.service-title p {
  font-size: 1.125rem;
  color: var(--gray-600);
  margin: 0;
}

/* ===== Journey Features ===== */
.journey-features {
  padding: var(--spacing-xl) 0;
  background: var(--gray-50);
}

/* ===== Network Stats ===== */
.network-stats-section {
  padding: var(--spacing-xl) 0;
  background: var(--gray-50);
}

/* ===== Laboratories ===== */
.laboratories-section {
  padding: var(--spacing-xl) 0;
  background: var(--gray-50);
}

/* ===== Diagnostic Services ===== */
.diagnostic-services {
  padding: var(--spacing-xl) 0;
  background: var(--gray-50);
}

/* ===== Patient Support ===== */
.patient-support {
  padding: var(--spacing-xl) 0;
  background: var(--gray-50);
}

/* ===== Office Locations ===== */
.office-locations {
  padding: var(--spacing-xl) 0;
  background: var(--gray-50);
}

/* ===== Contact Form ===== */
.contact-form-section {
  padding: var(--spacing-xl) 0;
  background: var(--gray-50);
}

/* ===== Hospital Cards ===== */
.hospital-card {
  background: var(--white);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.hospital-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(34, 197, 94, 0.08) 50%,
    transparent 60%
  );
  transform: translateX(-100%) skewX(-15deg);
  transition: transform 0.7s ease;
  pointer-events: none;
}

.hospital-card:hover::before {
  transform: translateX(100%) skewX(-15deg);
}

.hospital-card::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(34, 197, 94, 0.03) 10px,
    rgba(34, 197, 94, 0.03) 20px
  );
  opacity: 0;
  transition: opacity var(--transition-normal);
  animation: hospitalStripes 1s linear infinite;
  pointer-events: none;
}

@keyframes hospitalStripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 20px 20px;
  }
}

.hospital-card:hover::after {
  opacity: 1;
}

[data-theme="dark"] .hospital-card {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
}

.hospital-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

.hospital-image {
  height: 250px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.hospital-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.hospital-image img:hover {
  transform: scale(1.05);
}

.hospital-content {
  text-align: center;
}

.hospital-content h3 {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
}

.hospital-content p {
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

[data-theme="dark"] .hospital-content p {
  color: var(--gray-400);
}

.hospital-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
}

.feature {
  background: var(--gray-100);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

[data-theme="dark"] .feature {
  background: var(--gray-700);
  color: var(--gray-300);
}

.feature i {
  color: var(--primary-color);
  font-size: 0.75rem;
}

/* ===== Timeline ===== */
.journey-timeline-section {
  padding: var(--spacing-3xl) 0;
}

.journey-timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.journey-timeline::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--primary-color);
  transform: translateX(-50%);
  pointer-events: none;
}

/* space-between is what keeps the numbered marker clear. With the card alone at
   45% the remaining space sat wherever flex-start left it; once the photograph
   took the other 45%, the two packed together against one edge and the centre
   line — and the marker on it — ran straight through the card. Pushing them to
   opposite ends leaves the middle 10% empty, which is where the line and the
   marker have always been drawn. */
.timeline-item {
  position: relative;
  margin-bottom: var(--spacing-2xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.timeline-item:nth-child(odd) {
  flex-direction: row;
}

.timeline-item:nth-child(even) {
  flex-direction: row-reverse;
}

/* top is load-bearing: without it, this absolutely positioned circle falls
   back to its flex static position, which — under .timeline-item's
   align-items:center — is the vertical middle of the card, landing on
   whatever paragraph text happens to be there. Fixed at desktop widths too;
   the mobile/tablet rules in responsive.css already pin it the same way. */
.timeline-marker {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 700;
  font-size: 1.25rem;
  z-index: 2;
  box-shadow: var(--shadow-lg);
}

.timeline-content {
  width: 45%;
  background: var(--white);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  text-align: center;
}

/* The photograph for a step, sitting in the half of the row the card leaves
   empty. It needs no side of its own: .timeline-item already alternates
   row/row-reverse, so the figure lands opposite its card either way, and the
   two 45% halves leave the centre clear for the numbered marker.

   line-height: 0 removes the few pixels of descender space an inline image
   element reserves under itself, which would otherwise show as a pale strip
   below the photo inside the rounded corners. */
.timeline-figure {
  width: calc(50% - 40px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  line-height: 0;
}

/* The neighbour links at the foot of an article. Deliberately plain: this is a
   way out of the page for a reader who finished it, not a promotion, and it
   sits between the body and the back link where a finished reader is already
   looking. */
.entry-related {
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--gray-200);
}

[data-theme="dark"] .entry-related {
  border-top-color: var(--gray-700);
}

.entry-related h2 {
  font-size: 1.125rem;
  margin-bottom: var(--spacing-sm);
}

.entry-related ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.entry-related li + li {
  margin-top: var(--spacing-xs);
}

/* The width/height attributes on the tag already reserve the square, so the
   aspect-ratio here is a guard rather than the mechanism: it keeps the box
   square even if an image is ever replaced with one that is not. */
/* No aspect-ratio and no object-fit here on purpose. These are finished
   posters, not photographs to be framed: cropping one to fit a box cuts into
   the gold border and the composition, which is the thing that makes them look
   designed rather than stock. The intrinsic ratio is allowed to decide the
   height, and the width/height attributes on the tag reserve the right box
   before the file arrives so nothing shifts as it loads. */
.timeline-figure img {
  display: block;
  width: 100%;
  height: auto;
}

[data-theme="dark"] .timeline-content {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
}

.timeline-content h3 {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
}

.timeline-content p {
  color: var(--gray-600);
  margin-bottom: var(--spacing-md);
  line-height: 1.6;
}

[data-theme="dark"] .timeline-content p {
  color: var(--gray-400);
}

.timeline-details ul {
  list-style: none;
  padding: 0;
}

.timeline-details li {
  padding: var(--spacing-xs) 0;
  color: var(--gray-600);
  font-size: 0.875rem;
  position: relative;
  padding-left: var(--spacing-md);
  line-height: 1.5;
}

[data-theme="dark"] .timeline-details li {
  color: var(--gray-400);
}

.timeline-details li::before{
  content: "•";
  position: absolute;
  left: 0;
  color: var(--primary-color);
  pointer-events: none;
}

/* ===== Contact Form ===== */
.contact-form-section {
  padding: var(--spacing-3xl) 0;
  background: var(--gray-50);
}

.form-container {
  max-width: 800px;
  margin: 0 auto;
  background: var(--white);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .form-container {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
}

.form-header h2 {
  font-size: 2rem;
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
}

.form-header p {
  color: var(--gray-600);
  line-height: 1.6;
}

[data-theme="dark"] .form-header p {
  color: var(--gray-400);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: 500;
  margin-bottom: var(--spacing-sm);
  color: var(--gray-700);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: var(--spacing-md);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: 1rem;
  transition: border-color var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(15, 157, 88, 0.45);
}

.file-upload {
  position: relative;
}

.file-upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-xl);
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.file-upload-label:hover {
  border-color: var(--primary-color);
  background: var(--gray-50);
}

.file-upload input[type="file"] {
  display: none;
}

.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.checkbox-group input[type="checkbox"] {
  margin-top: var(--spacing-xs);
}

.form-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 768px) {
  .page-title {
    font-size: 2.5rem;
  }

  .service-header {
    flex-direction: column;
    text-align: center;
  }

  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    flex-direction: column;
  }

  .timeline-content {
    width: 100%;
  }

  .journey-timeline::before {
    left: 20px;
  }

  .timeline-marker {
    left: 20px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }
}

/* ===== Service Grid ===== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.service-item {
  background: var(--white);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  text-align: center;
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .service-item {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
}

.service-item::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent, rgba(34, 197, 94, 0.05));
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.service-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.service-item:hover::before {
  opacity: 1;
}

.item-icon {
  width: 80px;
  height: 80px;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 2rem;
  margin: 0 auto var(--spacing-lg);
}

.item-icon i {
  font-size: 2rem;
  color: var(--white);
}

.service-item h3 {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
}

.service-item p {
  color: var(--gray-600);
  line-height: 1.6;
}

[data-theme="dark"] .service-item p {
  color: var(--gray-400);
}

/* ===== Surgery Types ===== */
.surgery-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
  padding: var(--spacing-xl) 0;
}

.surgery-card {
  background: var(--white);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  text-align: center;
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .surgery-card {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
}

.surgery-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent, rgba(34, 197, 94, 0.05));
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.surgery-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.surgery-card:hover::before {
  opacity: 1;
}

.surgery-icon {
  width: 80px;
  height: 80px;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 2rem;
  margin: 0 auto var(--spacing-lg);
}

.surgery-icon i {
  font-size: 2rem;
  color: var(--white);
}

.surgery-card h3 {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
}

.surgery-card p {
  color: var(--gray-600);
  line-height: 1.6;
}

[data-theme="dark"] .surgery-card p {
  color: var(--gray-400);
}

.surgery-list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-md) 0 0 0;
}

.surgery-list li {
  background: var(--white);
  color: var(--primary-color);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-xs);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  border: 1px solid var(--gray-200);
}

[data-theme="dark"] .surgery-list li {
  background: var(--gray-800);
  color: var(--primary-color);
  border-color: var(--gray-700);
}

/* ===== Diagnostic Grid ===== */
.diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
  padding: var(--spacing-xl) 0;
}

.diagnostic-item {
  background: var(--white);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  text-align: center;
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .diagnostic-item {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
}

.diagnostic-item::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(34, 197, 94, 0.03) 0%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.diagnostic-item:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 35px 70px rgba(34, 197, 94, 0.15);
}

.diagnostic-item:hover::before {
  opacity: 1;
}

.diagnostic-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 2rem;
  margin: 0 auto var(--spacing-lg);
  position: relative;
  overflow: hidden;
}

.diagnostic-icon::after{
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transform: rotate(45deg);
  transition: all 0.6s ease;
  pointer-events: none;
}

.diagnostic-item:hover .diagnostic-icon::after {
  transform: rotate(45deg) translate(50%, 50%);
}

.diagnostic-icon i {
  font-size: 2rem;
  color: var(--white);
  position: relative;
  z-index: 1;
}

.diagnostic-item h3 {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
  font-weight: 600;
}

.diagnostic-item p {
  color: var(--gray-600);
  line-height: 1.7;
  font-size: 1rem;
}

[data-theme="dark"] .diagnostic-item p {
  color: var(--gray-400);
}

/* ===== Follow-up Services ===== */
.followup-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
  padding: var(--spacing-xl) 0;
}

.followup-card {
  background: var(--white);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  text-align: center;
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .followup-card {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
}

.followup-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(34, 197, 94, 0.03) 0%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.followup-card:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 35px 70px rgba(34, 197, 94, 0.15);
}

.followup-card:hover::before {
  opacity: 1;
}

.followup-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 2rem;
  margin: 0 auto var(--spacing-lg);
  position: relative;
  overflow: hidden;
}

.followup-icon::after{
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transform: rotate(45deg);
  transition: all 0.6s ease;
  pointer-events: none;
}

.followup-card:hover .followup-icon::after {
  transform: rotate(45deg) translate(50%, 50%);
}

.followup-icon i {
  font-size: 2rem;
  color: var(--white);
  position: relative;
  z-index: 1;
}

.followup-card h3 {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
  font-weight: 600;
}

.followup-card p {
  color: var(--gray-600);
  line-height: 1.7;
  font-size: 1rem;
}

[data-theme="dark"] .followup-card p {
  color: var(--gray-400);
}

/* ===== Contact Methods ===== */
.contact-methods {
  padding: var(--spacing-3xl) 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.contact-card {
  background: var(--white);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  text-align: center;
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .contact-card {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
}

.contact-card::before{
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(34, 197, 94, 0.1) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: all 0.4s ease;
  transform: scale(0.5);
  pointer-events: none;
}

.contact-card:hover {
  transform: translateY(-10px) rotateX(5deg);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.contact-card:hover::before {
  opacity: 1;
  transform: scale(1);
}

.contact-icon {
  width: 80px;
  height: 80px;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 2rem;
  margin: 0 auto var(--spacing-lg);
}

.contact-icon i {
  font-size: 2rem;
  color: var(--white);
}

.contact-card h3 {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
}

.contact-card p {
  color: var(--gray-600);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}

[data-theme="dark"] .contact-card p {
  color: var(--gray-400);
}

/* ===== Office Locations ===== */
.office-locations {
  padding: var(--spacing-3xl) 0;
  background: var(--gray-50);
}

.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.location-card {
  background: var(--white);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  text-align: center;
}

[data-theme="dark"] .location-card {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
}

.location-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

.location-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.location-header i {
  color: var(--primary-color);
  font-size: 1.5rem;
}

.location-header h3 {
  font-size: 1.25rem;
  color: var(--primary-color);
  margin: 0;
}

.location-details {
  display: none;
}

[data-theme="dark"] .location-details {
  color: var(--gray-300);
}

.location-details p {
  margin-bottom: var(--spacing-sm);
}

.location-details strong {
  color: var(--white);
}

[data-theme="dark"] .location-details strong {
  color: var(--gray-100);
}

/* ===== FAQ Section ===== */
.faq-section {
  padding: var(--spacing-3xl) 0;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.faq-item {
  background: var(--white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
}

[data-theme="dark"] .faq-item {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
}

.faq-item:hover {
  box-shadow: var(--shadow-xl);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  background: #1f2937;
  color: var(--white);
  cursor: pointer;
  transition: all var(--transition-normal);
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
}

.faq-question::before{
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left 0.5s ease;
  pointer-events: none;
}

.faq-question:hover::before {
  left: 100%;
}

.faq-question:hover {
  background: #374151;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.faq-question h3 {
  font-size: 1.125rem;
  margin: 0;
}

.faq-question i {
  transition: transform var(--transition-fast);
}

.faq-answer {
  padding: var(--spacing-lg);
  color: var(--gray-600);
  display: none;
  line-height: 1.6;
}

[data-theme="dark"] .faq-answer {
  color: var(--gray-400);
}

.faq-item.active .faq-answer {
  display: block;
}

.faq-item.active .faq-question i {
  transform: rotate(180deg);
}

/* ===== Journey Features ===== */
.journey-features {
  padding: var(--spacing-3xl) 0;
  background: var(--gray-50);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.feature-card {
  background: var(--white);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  text-align: center;
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .feature-card {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
}

.feature-card::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #22c55e, #16a34a, #22c55e);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  pointer-events: none;
}

.feature-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 60px rgba(34, 197, 94, 0.2);
}

.feature-card:hover::after {
  transform: scaleX(1);
}

.feature-icon {
  width: 80px;
  height: 80px;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 2rem;
  margin: 0 auto var(--spacing-lg);
}

.feature-icon i {
  font-size: 2rem;
  color: var(--white);
}

.feature-card h3 {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
}

.feature-card p {
  color: var(--gray-600);
  line-height: 1.6;
}

[data-theme="dark"] .feature-card p {
  color: var(--gray-400);
}

/* ===== Journey CTA ===== */
.journey-cta {
  padding: var(--spacing-xl) 0;
  /* Deliberately darker than the brand green used everywhere else. White body
     text on the old #0f9d58 -> #14b866 measured 3.51:1 falling to 2.60:1 across
     the sweep, against the 4.5:1 the text needs. These two greens are already in
     the palette (--primary-dark, and the shade .btn-outline:hover uses) and hold
     4.73:1 at the worst point even after the 5% white wash ::before lays on top. */
  background: linear-gradient(
    135deg,
    #0a7040 0%,
    #0b7e41 100%
  );
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.journey-cta::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 20% 80%,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 50%
    );
  animation: ctaFloating 20s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ctaFloating {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-10px) rotate(1deg);
  }
  66% {
    transform: translateY(10px) rotate(-1deg);
  }
}

.journey-cta > * {
  position: relative;
  z-index: 2;
}

.cta-content {
  max-width: 600px;
  margin: 0 auto;
}

.cta-content h2 {
  font-size: 2rem;
  margin-bottom: var(--spacing-md);
}

.journey-cta .btn-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  position: relative;
  overflow: hidden;
  z-index: 1;
  font-weight: 600;
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 1.1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.journey-cta .btn-outline::before{
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--white);
  transition: left 0.4s ease;
  z-index: -1;
  pointer-events: none;
}

.journey-cta .btn-outline:hover::before {
  left: 0;
}

.journey-cta .btn-outline:hover {
  /* green-on-white after the overlay slides in: #0f9d58 is 3.5:1, #0a7040 is 6.2:1 */
  color: #0a7040;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  border-color: var(--white);
}

.cta-content p {
  font-size: 1.125rem;
  margin-bottom: var(--spacing-xl);
  opacity: 0.9;
}

.cta-buttons {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* Form Messages */
.form-message {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  border-radius: var(--radius-md);
  font-weight: 500;
  text-align: center;
}

.form-message.success {
  background: var(--success-color, #10b981);
  color: var(--white);
}

.form-message.error {
  background: var(--error-color, #ef4444);
  color: var(--white);
}

.form-message.info {
  background: var(--info-color, #3b82f6);
  color: var(--white);
}

/* File Upload */
.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm);
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-xs);
  font-size: 0.875rem;
}

.file-item i {
  margin-right: var(--spacing-xs);
  color: var(--primary-color);
}

[data-theme="dark"] .file-item {
  background: var(--gray-700);
  color: var(--gray-300);
}

/* ===== Network Stats ===== */
.network-stats-section {
  padding: var(--spacing-3xl) 0;
  background: var(--gray-50);
}

.network-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.stat-card {
  background: var(--white);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  text-align: center;
  transition: all var(--transition-normal);
}

.stat-icon {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: var(--spacing-md);
  display: block;
}

.stat-card:nth-child(1) .stat-icon {
  color: var(--accent-blue);
}

.stat-card:nth-child(2) .stat-icon {
  color: var(--primary-color);
}

.stat-card:nth-child(3) .stat-icon {
  color: var(--accent-gold);
}

.stat-card:nth-child(4) .stat-icon {
  color: var(--primary-dark);
}

[data-theme="dark"] .stat-card {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

.stat-number {
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-sm);
  position: relative;
  display: inline-block;
}

.stat-number::before {
  content: "+";
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-right: 2px;
  vertical-align: baseline;
  line-height: 1;
}

.stat-number::after {
  display: none;
}

.stat-label {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: var(--spacing-xs);
}

[data-theme="dark"] .stat-label {
  color: var(--gray-200);
}

.stat-desc {
  color: var(--gray-600);
  font-size: 0.875rem;
}

[data-theme="dark"] .stat-desc {
  color: var(--gray-400);
}

/* ===== Hospital Category ===== */
.hospital-category {
  padding: var(--spacing-3xl) 0;
}

.category-header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.category-title {
  font-size: 2rem;
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
}

.category-desc {
  color: var(--gray-600);
  max-width: 600px;
  margin: 0 auto;
}

.hospitals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

/* ===== Laboratories ===== */
.laboratories-section {
  padding: var(--spacing-3xl) 0;
  background: var(--gray-50);
}

.labs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

/* ===== Radiology Centers ===== */
.radiology-section {
  padding: var(--spacing-3xl) 0;
  background: var(--gray-50);
}

.radiology-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.radiology-card {
  background: var(--white);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  text-align: center;
}

.radiology-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

.radiology-image {
  height: 250px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.radiology-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.radiology-image img:hover {
  transform: scale(1.05);
}

.radiology-content {
  text-align: center;
}

.radiology-content h3 {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
}

.radiology-content p {
  color: var(--gray-600);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}

.radiology-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
  margin-top: var(--spacing-md);
}

[data-theme="dark"] .radiology-card p {
  color: var(--gray-400);
}

[data-theme="dark"] .radiology-card {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
}

.lab-card {
  background: var(--white);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  text-align: center;
}

.lab-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

.lab-image {
  height: 250px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.lab-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.lab-image img:hover {
  transform: scale(1.05);
}

.lab-content {
  text-align: center;
}

.lab-content h3 {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
}

.lab-content p {
  color: var(--gray-600);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}

.lab-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
  margin-top: var(--spacing-md);
}

[data-theme="dark"] .lab-card p {
  color: var(--gray-400);
}

.lab-icon {
  width: 80px;
  height: 80px;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 2rem;
  margin: 0 auto var(--spacing-lg);
}

.lab-icon i {
  font-size: 2rem;
  color: var(--white);
}

.lab-card h3 {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
}

.lab-card p {
  color: var(--gray-600);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}

[data-theme="dark"] .lab-card p {
  color: var(--gray-400);
}

.lab-services {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lab-services li {
  padding: var(--spacing-xs) 0;
  color: var(--gray-600);
  font-size: 0.875rem;
  position: relative;
  padding-left: var(--spacing-md);
  line-height: 1.5;
}

[data-theme="dark"] .lab-services li {
  color: var(--gray-400);
}

.lab-services li::before{
  content: "•";
  position: absolute;
  left: 0;
  color: var(--primary-color);
  pointer-events: none;
}

/* ===== Oncology Overview ===== */
.oncology-overview {
  padding: var(--spacing-3xl) 0;
}

.overview-content {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.overview-text h2 {
  font-size: 2rem;
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
}

.overview-text p {
  color: var(--gray-600);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}

.key-features {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.feature-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.feature-item i {
  color: var(--primary-color);
  font-size: 1.25rem;
}

.feature-item span {
  color: var(--gray-700);
  font-weight: 500;
}

.overview-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
}

.overview-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/* ===== Diagnostic Services ===== */
.diagnostic-services {
  padding: var(--spacing-3xl) 0;
  background: var(--gray-50);
}

.diagnostics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.diagnostic-card {
  background: var(--white);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  text-align: center;
}

[data-theme="dark"] .diagnostic-card {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
}

.diagnostic-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

.diagnostic-icon {
  width: 80px;
  height: 80px;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 2rem;
  margin: 0 auto var(--spacing-lg);
}

.diagnostic-icon i {
  font-size: 2rem;
  color: var(--white);
}

.diagnostic-card h3 {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
}

.diagnostic-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.diagnostic-list li {
  padding: var(--spacing-xs) 0;
  color: var(--gray-600);
  font-size: 0.875rem;
  position: relative;
  padding-left: var(--spacing-md);
  line-height: 1.5;
}

[data-theme="dark"] .diagnostic-list li {
  color: var(--gray-400);
}

.diagnostic-list li::before{
  content: "•";
  position: absolute;
  left: 0;
  color: var(--primary-color);
  pointer-events: none;
}

/* ===== Treatment Modalities ===== */
.treatment-modalities {
  padding: var(--spacing-3xl) 0;
}

.treatments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
  padding: var(--spacing-xl) 0;
}

.treatment-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  transform: translateZ(0);
  position: relative;
}

[data-theme="dark"] .treatment-card {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
}

.treatment-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(34, 197, 94, 0.03) 0%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.treatment-card:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 35px 70px rgba(34, 197, 94, 0.15);
}

.treatment-card:hover::before {
  opacity: 1;
}

.treatment-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.treatment-header h3 {
  font-size: 1.5rem;
  margin: 0;
  font-weight: 700;
  color: var(--white) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  z-index: 2;
  position: relative;
}

.treatment-icon {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--white) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  z-index: 2;
  position: relative;
}

.treatment-content {
  padding: var(--spacing-xl);
}

.treatment-content p {
  color: var(--gray-600);
  margin-bottom: var(--spacing-lg);
  line-height: 1.7;
  font-size: 1rem;
}

[data-theme="dark"] .treatment-content p {
  color: var(--gray-400);
}

.treatment-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.treatment-features span {
  background: var(--white);
  color: var(--primary-color);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--gray-200);
  transition: all var(--transition-fast);
}

.treatment-features span:hover {
  background: var(--gray-50);
  transform: translateY(-2px);
}

[data-theme="dark"] .treatment-features span {
  background: var(--gray-800);
  color: var(--primary-color);
  border-color: var(--gray-700);
}

/* ===== Patient Support ===== */
.patient-support {
  padding: var(--spacing-3xl) 0;
  background: var(--gray-50);
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
  padding: var(--spacing-xl) 0;
}

.support-card {
  background: var(--white);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  text-align: center;
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .support-card {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
}

.support-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(34, 197, 94, 0.03) 0%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.support-card:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 35px 70px rgba(34, 197, 94, 0.15);
}

.support-card:hover::before {
  opacity: 1;
}

.support-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 2rem;
  margin: 0 auto var(--spacing-lg);
  position: relative;
  overflow: hidden;
}

.support-icon::after{
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transform: rotate(45deg);
  transition: all 0.6s ease;
  pointer-events: none;
}

.support-card:hover .support-icon::after {
  transform: rotate(45deg) translate(50%, 50%);
}

.support-icon i {
  font-size: 2rem;
  color: var(--white);
  position: relative;
  z-index: 1;
}

.support-card h3 {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
  font-weight: 600;
}

.support-card p {
  color: var(--gray-600);
  line-height: 1.7;
  font-size: 1rem;
}

/* ===== Success Stories ===== */
.success-stories {
  padding: var(--spacing-3xl) 0;
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
  padding: var(--spacing-xl) 0;
}

.story-card {
  background: var(--white);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  text-align: center;
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
}

.story-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(34, 197, 94, 0.03) 0%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.story-card::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at top,
    rgba(34, 197, 94, 0.1) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity var(--transition-normal);
  animation: storyGlow 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes storyGlow {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.3;
    transform: scale(1.2);
  }
}

.story-card:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 35px 70px rgba(34, 197, 94, 0.15);
}

.story-card:hover::before {
  opacity: 1;
}

.story-card:hover::after {
  opacity: 0.5;
}

.story-content p {
  color: var(--gray-600);
  font-style: italic;
  line-height: 1.7;
  margin-bottom: var(--spacing-lg);
  font-size: 1rem;
}

.story-author strong {
  color: var(--primary-color);
  display: block;
  margin-bottom: var(--spacing-xs);
  font-size: 1.1rem;
  font-weight: 600;
}

.story-author span {
  color: var(--gray-500);
  font-size: 0.875rem;
}

/* ===== Section Headers ===== */
.section-header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.section-title {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
}

.section-subtitle {
  color: var(--gray-600);
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.125rem;
}
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--primary-light) 50%,
    var(--primary-color) 100%
  );
  background-size: 400% 400%;
  animation: heroGradient 15s ease infinite;
}

@keyframes heroGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.hero-section::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 20% 80%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 40% 40%,
      rgba(34, 197, 94, 0.1) 0%,
      transparent 50%
    );
  animation: floatingBubbles 20s ease-in-out infinite;
  pointer-events: none;
}

@keyframes floatingBubbles {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(120deg);
  }
  66% {
    transform: translateY(20px) rotate(240deg);
  }
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--white);
  max-width: 800px;
  margin: 0 auto;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-lg);
  color: var(--white);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-2xl);
  color: rgba(255, 255, 255, 0.9);
}

.hero-actions {
  display: flex;
  gap: var(--spacing-lg);
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== Section Styles ===== */
.section-header {
  text-align: center;
  margin-bottom: var(--spacing-3xl);
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}

.section-subtitle {
  font-size: 1.125rem;
  color: var(--gray-600);
  max-width: 600px;
  margin: 0 auto;
}

/* ===== About Section ===== */
.about-section {
  padding: var(--spacing-3xl) 0;
  background: var(--gray-50);
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--spacing-xl);
}

.about-card {
  background: var(--white);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  text-align: center;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.about-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(34, 197, 94, 0.1),
    transparent
  );
  transition: left 0.6s ease;
  pointer-events: none;
}

.about-card:hover::before {
  left: 100%;
}

.about-card::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.03) 0%,
    transparent 50%,
    rgba(34, 197, 94, 0.03) 100%
  );
  opacity: 0;
  transition: opacity var(--transition-normal);
  animation: cardShimmer 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cardShimmer {
  0%,
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
  50% {
    opacity: 1;
    transform: translateX(100%);
  }
}

.about-card:hover::after {
  opacity: 0.3;
}

.about-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

.about-icon {
  width: 80px;
  height: 80px;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-lg);
}

.about-icon i {
  font-size: 2rem;
  color: var(--white);
}

.about-card h3 {
  color: var(--primary-color);
  font-size: 1.25rem;
  margin-bottom: var(--spacing-md);
}

.about-card p {
  color: var(--gray-600);
  line-height: 1.6;
}

/* ===== Network Preview Section ===== */
.network-preview-section {
  padding: var(--spacing-3xl) 0;
}

.network-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
}

.stat-card {
  background: var(--white);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  text-align: center;
  transition: all var(--transition-normal);
  border: 2px solid var(--primary-color);
  position: relative;
  overflow: hidden;
}

.stat-icon {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: var(--spacing-md);
  display: block;
}

.stat-card:nth-child(1) .stat-icon {
  color: var(--accent-blue);
}

.stat-card:nth-child(2) .stat-icon {
  color: var(--primary-color);
}

.stat-card:nth-child(3) .stat-icon {
  color: var(--accent-gold);
}

.stat-card:nth-child(4) .stat-icon {
  color: var(--primary-dark);
}

.stat-card::before{
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--primary-color) 90deg,
    var(--primary-light) 180deg,
    transparent 270deg,
    transparent 360deg
  );
  animation: statRotate 4s linear infinite;
  opacity: 0.1;
  pointer-events: none;
}

@keyframes statRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.stat-card::after{
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: var(--white);
  border-radius: calc(var(--radius-xl) - 2px);
  z-index: 1;
  pointer-events: none;
}

.stat-card > * {
  position: relative;
  z-index: 2;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

.stat-number {
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-sm);
  position: relative;
  display: inline-block;
}

.stat-number::before {
  content: "+";
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-right: 2px;
  vertical-align: baseline;
  line-height: 1;
}

.stat-number::after {
  display: none;
}

.stat-label {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: var(--spacing-xs);
}

.stat-desc {
  font-size: 0.875rem;
  color: var(--gray-600);
}

.network-cta {
  text-align: center;
}

/* ===== Oncology Preview Section ===== */
.oncology-preview-section {
  padding: var(--spacing-3xl) 0;
  background: var(--gray-50);
}

.oncology-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
}

.oncology-card {
  background: var(--white);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.oncology-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(34, 197, 94, 0.05) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.8s ease;
  pointer-events: none;
}

.oncology-card:hover::before {
  transform: translateX(100%);
}

.oncology-card::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(34, 197, 94, 0.08) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--transition-normal);
  animation: oncologyPulse 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes oncologyPulse {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.oncology-card:hover::after {
  opacity: 0.5;
}

.oncology-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

.oncology-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-light)
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-lg);
}

.oncology-icon i {
  font-size: 2rem;
  color: var(--white);
}

.oncology-card h3 {
  color: var(--primary-color);
  font-size: 1.25rem;
  margin-bottom: var(--spacing-md);
}

.oncology-card p {
  color: var(--gray-600);
  line-height: 1.6;
}

.oncology-cta {
  text-align: center;
}

/* ===== Services Preview Section ===== */
.services-preview-section {
  padding: var(--spacing-3xl) 0;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--spacing-xl);
}

.service-card {
  background: var(--white);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  text-align: center;
  border: 1px solid var(--gray-200);
  position: relative;
  overflow: hidden;
}

.service-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.1) 0%,
    transparent 25%,
    transparent 75%,
    rgba(34, 197, 94, 0.1) 100%
  );
  transform: translateY(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.service-card:hover::before {
  transform: translateY(100%);
}

.service-card::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(
    circle,
    rgba(34, 197, 94, 0.15) 0%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  transition: all 0.8s ease;
  border-radius: 50%;
  pointer-events: none;
}

.service-card:hover::after {
  width: 300px;
  height: 300px;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-color);
}

.service-icon {
  width: 80px;
  height: 80px;
  background: var(--gray-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-lg);
  transition: all var(--transition-normal);
}

.service-card:hover .service-icon {
  background: var(--primary-color);
}

.service-icon i {
  font-size: 2rem;
  color: var(--primary-color);
  transition: color var(--transition-normal);
}

.service-card:hover .service-icon i {
  color: var(--white);
}

.service-card h3 {
  color: var(--primary-color);
  font-size: 1.25rem;
  margin-bottom: var(--spacing-md);
}

.service-card p {
  color: var(--gray-600);
  line-height: 1.6;
}

/* ===== Patient Journey Section ===== */
.journey-preview-section {
  padding: var(--spacing-3xl) 0;
  background: var(--gray-50);
}

[data-theme="dark"] .journey-preview-section {
  background: var(--gray-900);
}

.journey-timeline {
  max-width: 800px;
  margin: 0 auto var(--spacing-2xl);
  position: relative;
}

.journey-timeline::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: var(--primary-color);
  pointer-events: none;
}

.timeline-item {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-2xl);
  position: relative;
}

.timeline-item:nth-child(odd) {
  flex-direction: row;
}

.timeline-item:nth-child(even) {
  flex-direction: row-reverse;
}

/* Same fix as the .timeline-marker rule above — this is a second,
   pre-existing definition of the same class for the journey-timeline variant.
   Left as-is rather than merged: both are live on ~23 pages and only `top`
   was actually missing. */
.timeline-marker {
  width: 50px;
  height: 50px;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 700;
  font-size: 1.25rem;
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  box-shadow: var(--shadow-lg);
}

.timeline-content {
  background: var(--white);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: calc(50% - 40px);
  transition: all var(--transition-normal);
}

[data-theme="dark"] .timeline-content {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
}

.timeline-item:nth-child(odd) .timeline-content {
  margin-right: auto;
  margin-left: 0;
}

.timeline-item:nth-child(even) .timeline-content {
  margin-left: auto;
  margin-right: 0;
}

/* The photograph beside a step, sized to match the card exactly so the pair is
   symmetrical about the centre line whatever the container width. This block
   is a second definition of the timeline that wins on cascade order over the
   one earlier in this file, so the figure has to be sized here too — setting
   it only above left it agreeing with the card at one width and drifting at
   every other.

   The auto margin is the reason for the sibling rule. It was how a lone card
   was pushed to its side of the line; with a figure filling the other half it
   instead swallows all the free space and drags the two together across the
   centre, putting the numbered marker on top of the card. Scoped to
   `.timeline-figure + .timeline-content` so the timelines on other pages,
   which have no photograph, keep the behaviour they have always had. */
.timeline-figure {
  width: calc(50% - 40px);
  line-height: 0;
}

/* Both nth-child selectors are spelled out because the auto-margin rules above
   are written that way: `.timeline-figure + .timeline-content` alone is one
   class less specific and loses to them, silently, leaving the margin in place
   and the layout exactly as broken as before the rule was added. */
.timeline-item:nth-child(odd) .timeline-figure + .timeline-content,
.timeline-item:nth-child(even) .timeline-figure + .timeline-content {
  margin-left: 0;
  margin-right: 0;
}

.timeline-content:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-xl);
}

.timeline-content h3 {
  color: var(--primary-color);
  font-size: 1.125rem;
  margin-bottom: var(--spacing-sm);
}

.timeline-content p {
  color: var(--gray-600);
  font-size: 0.875rem;
}

.journey-cta {
  text-align: center;
}

/* ===== Contact Preview Section ===== */
.contact-preview-section {
  padding: var(--spacing-3xl) 0;
}

.contact-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--spacing-xl);
}

.contact-card {
  background: var(--white);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  text-align: center;
  transition: all var(--transition-normal);
  border: 1px solid var(--gray-200);
}

[data-theme="dark"] .contact-card {
  background: var(--gray-800);
  border-color: var(--gray-700);
}

.contact-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-color);
}

.contact-icon {
  width: 80px;
  height: 80px;
  background: var(--gray-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-lg);
  transition: all var(--transition-normal);
}

.contact-card:hover .contact-icon {
  background: var(--primary-color);
}

.contact-icon i {
  font-size: 2rem;
  color: var(--primary-color);
  transition: color var(--transition-normal);
}

.contact-card:hover .contact-icon i {
  color: var(--white);
}

.contact-card h3 {
  color: var(--primary-color);
  font-size: 1.25rem;
  margin-bottom: var(--spacing-sm);
}

.contact-card p {
  color: var(--gray-600);
  margin-bottom: var(--spacing-lg);
}

/* ===== Footer ===== */
.footer {
  background: var(--gray-900);
  color: var(--gray-300);
  /* Bottom padding is deliberately bigger than the top: the chat launcher
     (#hmap-bubble, 60px at this width) sits fixed at bottom/inset-inline-end
     20px, so anyone scrolled to the true end of the page always has it
     hovering over the last ~80px of the viewport. Reserving that much space
     below .footer-legal — inside the footer's own dark background, not as
     blank page margin — means Privacy/Terms are never the thing sitting
     under it. Mobile widths use a smaller widget and get a smaller reserve
     below, in responsive.css. */
  padding: var(--spacing-3xl) 0 96px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: var(--spacing-2xl);
  margin-bottom: var(--spacing-2xl);
}

.footer-section h3 {
  color: var(--primary-color);
  font-size: 1.125rem;
  margin-bottom: var(--spacing-lg);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-md);
}

.footer-logo i {
  font-size: 1.5rem;
}

.footer-description {
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.footer-social {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  max-width: 280px;
}

.footer-social a {
  width: 40px;
  height: 40px;
  background: var(--gray-800);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  transition: all var(--transition-fast);
  text-decoration: none;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.footer-social a:hover {
  background: var(--primary-color);
  color: var(--white);
  transform: translateY(-3px) scale(1.05);
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(15, 157, 88, 0.3);
}

.footer-social a i {
  font-size: 16px;
  z-index: 2;
  position: relative;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: var(--spacing-sm);
}

.footer-links a {
  color: var(--gray-400);
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--primary-color);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.contact-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--gray-400);
}

.contact-item i {
  color: var(--primary-color);
  width: 20px;
}

/* Email, phone, WhatsApp and the address are all links in the footer, so they
   all light up the same way. These two declarations used to be written inline
   on each <a> as style="color:inherit;text-decoration:none" — an inline
   declaration beats any selector, so no :hover rule could ever repaint them
   and only the address (the one link without the attribute) responded. */
a.contact-item {
  color: var(--gray-400);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a.contact-item:hover,
a.contact-item:focus-visible {
  color: var(--primary-dark);
}

a.contact-item:hover i,
a.contact-item:focus-visible i {
  /* Matches the text beside it. --primary-light is 2.60:1 on white, which
     fails the 3:1 WCAG asks of a meaningful icon, and it was lighter than the
     resting state - a hover that made the control harder to see. */
  color: var(--primary-dark);
}

/* The address on the contact page sits in running text on a light background,
   where --primary-light does not carry enough contrast. It gets the darker
   brand green and an underline on hover instead. */
.map-link {
  color: #0a7040;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.map-link:hover,
.map-link:focus-visible {
  color: var(--primary-dark);
  border-bottom-color: currentColor;
}

.footer-bottom {
  border-top: 1px solid var(--gray-800);
  padding-top: var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.footer-copyright p {
  color: var(--gray-400);
  margin: 0;
}

.footer-legal {
  display: flex;
  gap: var(--spacing-lg);
}

.footer-legal a {
  color: var(--gray-400);
  transition: color var(--transition-fast);
}

.footer-legal a:hover {
  color: var(--primary-color);
}

/* ===== Back to Top Button ===== */
.back-to-top {
  position: fixed;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  width: 50px;
  height: 50px;
  background: var(--primary-color);
  color: var(--white);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--transition-normal);
  z-index: var(--z-fixed);
  box-shadow: var(--shadow-lg);
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

/* ===== Utility Classes ===== */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

.hidden {
  display: none;
}
.visible {
  display: block;
}

.mb-0 {
  margin-bottom: 0;
}
.mb-1 {
  margin-bottom: var(--spacing-xs);
}
.mb-2 {
  margin-bottom: var(--spacing-sm);
}
.mb-3 {
  margin-bottom: var(--spacing-md);
}
.mb-4 {
  margin-bottom: var(--spacing-lg);
}
.mb-5 {
  margin-bottom: var(--spacing-xl);
}

.mt-0 {
  margin-top: 0;
}
.mt-1 {
  margin-top: var(--spacing-xs);
}
.mt-2 {
  margin-top: var(--spacing-sm);
}
.mt-3 {
  margin-top: var(--spacing-md);
}
.mt-4 {
  margin-top: var(--spacing-lg);
}
.mt-5 {
  margin-top: var(--spacing-xl);
}


/* Accessibility: skip link + visible keyboard focus (SEO sprint 2026-07-28) */
.skip-link {
  position: absolute;
  top: -48px;
  left: 8px;
  z-index: 3000;
  padding: 10px 18px;
  background: #0a7040;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: top 0.15s ease-out;
}
.skip-link:focus {
  top: 8px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #0a7040;
  outline-offset: 2px;
}


/* Post/article cards (generated by the admin panel) */
.post-date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #64748b;
  margin-bottom: 8px;
  justify-content: center;
}
.post-date i { color: #0a7040; font-size: 0.75rem; }
.hospital-content h3 a { color: inherit; text-decoration: none; }
.hospital-content h3 a:hover { text-decoration: underline; }

/* ===== Touch targets =====
   Measured at 390px: the menu button was 32x32, the footer social circles 40x40,
   the footer contact links 26px tall and the consent checkbox 13x13 — all below
   the 44px minimum, and the menu button is now the only way to navigate on
   anything under 1200px. Grow the hit area without moving the visible design:
   padding on the links, a real box on the button and checkbox. */
.mobile-menu-toggle {
  width: 44px;
  height: 44px;
  font-size: 1rem;
}

.footer-social a {
  width: 44px;
  height: 44px;
}

.footer-contact .contact-item,
.footer-section .contact-item {
  padding-block: 9px;
  min-height: 44px;
}

.checkbox-group input[type="checkbox"] {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  accent-color: var(--primary-color);
  margin-top: 0;
}

.checkbox-group .checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 44px;
}

/* The privacy and terms links sit in their own row, so padding here costs
   nothing visually and takes them from 26px tall to 44px. */
.footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
}

/* The honeypot field. Hidden the careful way: off-canvas rather than
   display:none, because some bots skip fields that are display:none, and
   aria-hidden + tabindex=-1 keep it away from screen readers and the keyboard
   so no real visitor can ever land in it. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ===== Floating buttons =====
   The chat launcher is injected by app.hospitalscoegypt.com/widget.js as
   #hmap-bubble (60px) inside a fixed container at bottom/inset-inline-end 20px,
   with z-index 2147483000. Our own .back-to-top sat in exactly the same corner
   at bottom/right 24px, so it was being buried by a button 2 billion layers
   above it — invisible and unclickable whenever it appeared. Stack them
   instead, and give the launcher a smaller footprint on a phone, where a 60px
   circle over a 390px column covers real words.
   Not an iframe, so these rules do reach it; if the widget ever stops loading,
   .back-to-top simply sits a little higher than before. */
.back-to-top {
  inset-inline-end: var(--spacing-lg);
  right: auto;
  bottom: 96px;
}

@media (max-width: 767px) {
  #hmap-bubble {
    width: 52px;
    height: 52px;
    font-size: 22px;
    transition: opacity 0.15s ease;
  }
  /* Only below 768px: this is where the widget's footprint is wide relative
     to the column of text running underneath it. main.js toggles the class;
     reduced-motion visitors just get an instant hide with no transition. */
  html.is-scrolling #hmap-bubble {
    opacity: 0.25;
    pointer-events: none;
  }
  .back-to-top {
    bottom: 84px;
  }
  .footer {
    padding-bottom: 88px;   /* 52px widget + 20px inset + margin */
  }
}

@media (max-width: 480px) {
  #hmap-bubble {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  .back-to-top {
    bottom: 76px;
  }
  .footer {
    padding-bottom: 84px;   /* 48px widget + 20px inset + margin */
  }
}

/* ===== Reading-page image =====
   The cards use .hospital-image: a fixed 250px box with object-fit:cover, which
   is right for a grid of hospital photos and wrong for an article, where it
   cropped a 1400x750 photo to a 250px band and cut the subjects' heads off.
   Here the image keeps its own shape. aspect-ratio reserves the space before
   the file arrives, so nothing below it jumps once it loads. */
.entry-image {
  margin: 0 auto var(--spacing-lg);
  max-width: 860px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background: var(--gray-100);
  aspect-ratio: 1400 / 750;
}

.entry-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* only trims if the upload is a different shape */
}

/* The card's own way in. The title is a link as well, but a small line of type
   is a poor target — this gives the card an obvious, full-width one. */
.entry-more {
  margin: var(--spacing-md) 0 0;
}

.entry-more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  color: #0a7040;
  text-decoration: none;
}

.entry-more a::after {
  content: "\2192";          /* arrow, flipped automatically in the RTL build */
  transition: transform var(--transition-fast);
}

.entry-more a:hover::after,
.entry-more a:focus-visible::after {
  transform: translateX(3px);
}

/* ------------------------------------------------------------------
   Sections that paint their own background get their text colour back.

   This file declares `h1..h6 { color: var(--primary-color) }` and
   `p { color: var(--gray-600) }` globally. A rule that matches an element
   directly always beats a colour inherited from an ancestor, so every
   section that sets a dark or brand background on itself silently lost its
   text colour: the CTA heading rendered green on green (1.54:1 measured)
   and the footer paragraph grey on near-black (2.35:1) on all 42 pages.
   `inherit` hands each element back the colour its section already declares.
   ------------------------------------------------------------------ */
.journey-cta h1,
.journey-cta h2,
.journey-cta h3,
.journey-cta p,
.faq-question h1,
.faq-question h2,
.faq-question h3,
.faq-question h4,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer p {
  color: inherit;
}

/* ---------- assets/css/responsive.css ---------- */
/* ===== Mobile First Enhancements ===== */

/* Mobile (480px - 767px) */
@media (max-width: 767px) {
  /* Scroll-in animations move vertically here, never sideways.

     fade-left and fade-right start an element offset 100px horizontally and
     slide it back as it scrolls into view. On a phone that offset is a quarter
     of the screen, and any card still below the fold is holding the page that
     much wider than the viewport. The overflow guard in style.css catches it,
     but the honest fix is not to push content off-screen in the first place —
     the effect reads the same going up, and vertical is the direction the
     reader is already moving. */
  [data-aos^="fade-"][data-aos^="fade-"] {
    transform: translate3d(0, 20px, 0);
  }

  [data-aos^="fade-"].aos-animate[data-aos^="fade-"] {
    transform: translate3d(0, 0, 0);
  }

  /* Enhanced Mobile Loading Screen */
  .loading-screen {
    padding: var(--spacing-md);
  }

  .loading-logo i {
    font-size: 3rem;
  }

  .loading-logo span {
    font-size: 1.5rem;
  }

  .loading-text {
    font-size: 1rem;
  }

  .loading-progress {
    width: 150px;
  }

  /* Mobile Navigation */
  .nav-container {
    padding: 0 var(--spacing-sm);
  }

  .nav-logo {
    font-size: 1.2rem;
  }

  .nav-logo i {
    font-size: 1.5rem;
  }

  /* The navigation itself is handled once, at 1199px — see "Navigation" near
     the end of this file. It used to be duplicated here and at 767px with
     conflicting slide directions. */

  /* Mobile Hero Section */
  .hero-section {
    min-height: 90vh;
    padding: var(--spacing-xl) var(--spacing-md);
  }

  .hero-title {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: var(--spacing-lg);
  }

  .hero-subtitle {
    font-size: 1rem;
    line-height: 1.6;
  }

  .hero-actions {
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
    padding: var(--spacing-lg);
    font-size: 1.1rem;
  }

  /* Mobile Cards Grid */
  .about-grid,
  .services-grid,
  .hospitals-grid,
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .network-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  /* Mobile Cards */
  .about-card,
  .stat-card,
  .oncology-card,
  .service-card,
  .hospital-card,
  .story-card {
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
  }

  /* Mobile Sections */
  .service-category,
  .journey-features,
  .journey-cta,
  .network-stats-section {
    padding: var(--spacing-lg) 0;
  }

  .section-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
  }

  .section-title {
    font-size: 1.8rem;
    margin-bottom: var(--spacing-md);
  }

  .section-subtitle {
    font-size: 1rem;
    padding: 0 var(--spacing-md);
  }

  /* Mobile CTA */
  .journey-cta {
    text-align: center;
  }

  .cta-content h2 {
    font-size: 1.5rem;
  }

  .cta-buttons {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .cta-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  /* Mobile Touch Optimizations */
  .btn {
    min-height: 44px;
    touch-action: manipulation;
  }

  .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Mobile Animations */
  .scroll-animate {
    transform: translateY(20px);
  }

  .scroll-animate.animate-in {
    transform: translateY(0);
  }
}

/* Small Mobile (320px - 479px) */
@media (max-width: 479px) {
  .container {
    padding: 0 var(--spacing-sm);
  }

  /* Extra Small Loading Screen */
  .loading-logo i {
    font-size: 2.5rem;
  }

  .loading-logo span {
    font-size: 1.2rem;
  }

  .loading-text {
    font-size: 0.9rem;
  }

  /* Extra Small Navigation */
  .nav-logo {
    font-size: 1rem;
  }

  .nav-logo i {
    font-size: 1.2rem;
  }

  .nav-menu {
    width: 90%;
    max-width: 280px;
  }

  /* Extra Small Hero */
  .hero-title {
    font-size: 1.8rem;
  }

  .hero-subtitle {
    font-size: 0.95rem;
  }

  /* Extra Small Cards */
  .about-card,
  .stat-card,
  .oncology-card,
  .service-card,
  .hospital-card,
  .story-card {
    padding: var(--spacing-lg);
  }

  .network-stats {
    grid-template-columns: 1fr;
  }

  /* Extra Small Sections */
  .section-title {
    font-size: 1.5rem;
  }

  .cta-content h2 {
    font-size: 1.3rem;
  }

  /* Extra Small Buttons */
  .btn {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 0.95rem;
  }
}

/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {
  .container {
    max-width: 1400px;
  }

  .hero-title {
    font-size: 4rem;
  }

  .section-title {
    font-size: 3rem;
  }
}

/* Desktop (992px - 1199px) */
@media (max-width: 1199px) {
  .container {
    max-width: 960px;
  }

  .hero-title {
    font-size: 3rem;
  }

  .section-title {
    font-size: 2.25rem;
  }

  .about-grid,
  .services-grid,
  .contact-options {
    grid-template-columns: repeat(2, 1fr);
  }

  .network-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ===== Navigation =====
     The single place the bar turns into a drawer. Nine English links plus the
     brand need 1294px on one line; below 1200px there is no honest way to show
     them, so the whole row becomes the slide-in menu instead of wrapping.
     This used to live in two separate 767px blocks that disagreed on which
     side the drawer came from. */
  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* The header is taller here: the link row is gone, but the bar carries the
     brand and the menu button on a roomier line. Measured at 126px. Everything
     that clears the header reads this one value. */
  :root {
    --header-h: 126px;
  }

  /* No backdrop blur on the header at drawer sizes.
     Two things go wrong with it here, and both of them are this drawer:

     1. backdrop-filter makes the header a containing block for anything
        position:fixed inside it — so the drawer stops being positioned against
        the screen and starts being positioned against the header.
     2. The drawer slides across the header, so the blurred backdrop has to be
        recomputed for every frame of the slide. That is expensive enough on a
        phone to stall the animation partway, leaving the drawer parked around
        a third of the way out with the labels sheared off down the left.

     Nothing is lost visually: the header's background is rgba(255,255,255,.95),
     so the blur is happening behind a surface that is already 95% opaque. */
  .header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* The drawer sits at the edge and is slid off with a transform, rather than
     living at -100% and having its inset animated.

     Animating inset-inline-start makes the browser redo layout on every frame
     of the slide. On a phone that stutters, and a stutter that lands mid-slide
     leaves the drawer parked half off-screen with the labels cut down the left
     — "Our Network" reading as "work". A transform is composited: it moves the
     already-painted layer and touches no layout at all.

     translateX is physical, so the Arabic build needs the opposite sign; rtlcss
     flips it when it generates responsive-rtl.css. */
  .nav-menu {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    transform: translateX(-100%);
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background: var(--white);
    box-shadow: var(--shadow-xl);
    transition: transform var(--transition-normal);
    will-change: transform;
    z-index: var(--z-modal);
    overflow-y: auto;
    align-items: stretch;
  }

  .nav-menu.active {
    transform: translateX(0);
  }

  .nav-list {
    flex-direction: column;
    padding: var(--spacing-xl) var(--spacing-lg);
    gap: 0;
    width: 100%;
    align-items: stretch;
  }

  .nav-item {
    border-bottom: 1px solid var(--gray-200);
  }

  .nav-link {
    display: block;
    padding: var(--spacing-lg) 0;
    font-size: 1rem;
    white-space: normal;
  }

  /* The language list floats on desktop. In the drawer it cannot: the drawer
     is the scrolling box, so an absolutely positioned panel gets clipped by
     its own container the moment the list is longer than the space beneath the
     control. Here it opens in place instead, pushing the rest of the menu
     down — which is also the behaviour a drawer already implies. */
  .lang-list {
    position: static;
    min-width: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 var(--spacing-sm);
  }

  .lang-option {
    padding: var(--spacing-md) var(--spacing-md);
    font-size: 1rem;
    white-space: normal;
  }

  .nav-actions {
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    border-top: 1px solid var(--gray-200);
  }
}

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
  .container {
    max-width: 720px;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-subtitle {
    font-size: 1.125rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .nav-container {
    padding: 0 var(--spacing-md);
  }

  /* No .nav-list/.nav-link sizing here any more: below 1200px the row is a
     drawer, and these were quietly cancelling its column layout. */

  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
  }

  .about-grid,
  .services-grid,
  .contact-options {
    grid-template-columns: 1fr;
  }

  .network-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .oncology-grid {
    grid-template-columns: 1fr;
  }

  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }

  .journey-timeline::before {
    left: 30px;
  }

  /* The badge belongs on the timeline rule, level with the card's heading.
     It had no `top`, so as an absolutely positioned child of a flex item with
     align-items:center it fell back to its static position — the vertical
     middle of the card — and landed on the paragraph text. `left` was measured
     from the item box, which already starts 60px in, so it also sat on the
     card's edge instead of on the line 60px to its left. */
  .timeline-marker {
    inset-inline-start: -30px;
    top: 14px;
    transform: translateX(-50%);
  }

  /* flex-wrap is what stacks the photograph above its card here. The row
     direction is forced to `row` at this width so every step reads down the
     same side of the line. */
  .timeline-item {
    flex-direction: row !important;
    flex-wrap: wrap;
    margin-inline-start: 60px;
    align-items: flex-start;
  }

  /* `width: 100%` alone did NOT stack these. A flex line only wraps once its
     items can shrink no further, and the default flex-shrink:1 let both of
     them squeeze down to share one row — at 375px that produced two 117px
     columns side by side, a photograph too small to read and a card too narrow
     for a sentence. Disabling the shrink is what forces the wrap. */
  .timeline-content,
  .timeline-figure {
    flex: 0 0 100%;
  }

  .timeline-content {
    margin: 0 !important;
  }

  .timeline-figure {
    margin-bottom: var(--spacing-lg);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* Mobile (576px - 767px) */
@media (max-width: 767px) {
  .container {
    max-width: 540px;
    padding: 0 var(--spacing-sm);
  }

  .hero-title {
    font-size: 2rem;
    line-height: 1.2;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .section-title {
    font-size: 1.75rem;
  }

  .section-subtitle {
    font-size: 1rem;
  }

  /* Mobile Sections */
  .hero-section {
    min-height: 90vh;
    padding: var(--spacing-2xl) 0;
  }

  .hero-content {
    padding: 0 var(--spacing-md);
  }

  .section-header {
    margin-bottom: var(--spacing-2xl);
    padding: 0 var(--spacing-md);
  }

  .about-card,
  .stat-card,
  .oncology-card,
  .service-card,
  .contact-card {
    padding: var(--spacing-lg);
    margin: 0 var(--spacing-md);
  }

  .about-icon,
  .oncology-icon,
  .service-icon,
  .contact-icon {
    width: 60px;
    height: 60px;
  }

  .about-icon i,
  .oncology-icon i,
  .service-icon i,
  .contact-icon i {
    font-size: 1.5rem;
  }

  .network-stats {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .stat-number {
    font-size: 2.5rem;
  }

  .timeline-item {
    margin-inline-start: 40px;
    margin-bottom: var(--spacing-lg);
  }

  .journey-timeline::before {
    left: 20px;
  }

  .timeline-marker {
    width: 40px;
    height: 40px;
    inset-inline-start: -20px;
    top: 12px;
    font-size: 1rem;
  }

  .timeline-content {
    padding: var(--spacing-md);
  }

  /* The bottom value is not decoration: the chat launcher is fixed at
     bottom 20px and is 52px tall at this width, so without a reserve the
     Privacy/Terms row ends up underneath it for anyone scrolled to the end of
     the page. style.css reserves it; this rule is loaded afterwards and used
     to reset the whole padding shorthand, which silently undid that. */
  .footer {
    padding: var(--spacing-2xl) 0 88px;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    text-align: center;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-contact {
    align-items: center;
  }

  .back-to-top {
    width: 45px;
    height: 45px;
  }

  /* RTL Adjustments */
  body[dir="rtl"] .journey-timeline::before {
    left: auto;
    right: 20px;
  }

  body[dir="rtl"] .back-to-top {
    right: auto;
    left: var(--spacing-md);
  }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
  .container {
    max-width: 100%;
    padding: 0 var(--spacing-sm);
  }

  .hero-title {
    font-size: 1.75rem;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .nav-container {
    padding: 0 var(--spacing-sm);
  }

  .hero-actions {
    width: 100%;
  }

  .btn {
    width: 100%;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .about-card,
  .stat-card,
  .oncology-card,
  .service-card,
  .contact-card {
    padding: var(--spacing-md);
    margin: 0 var(--spacing-sm);
  }

  .about-icon,
  .oncology-icon,
  .service-icon,
  .contact-icon {
    width: 50px;
    height: 50px;
  }

  .about-icon i,
  .oncology-icon i,
  .service-icon i,
  .contact-icon i {
    font-size: 1.25rem;
  }

  .stat-number {
    font-size: 2rem;
  }

  .timeline-item {
    margin-left: 30px;
  }

  .journey-timeline::before {
    left: 15px;
  }

  .timeline-marker {
    width: 30px;
    height: 30px;
    left: 15px;
    font-size: 0.875rem;
  }

  .timeline-content {
    padding: var(--spacing-sm);
  }

  .timeline-content h3 {
    font-size: 1rem;
  }

  .timeline-content p {
    font-size: 0.8rem;
  }

  /* 48px launcher + 20px inset + margin at this width — same reason as the
     767px block above. */
  .footer {
    padding: var(--spacing-xl) 0 84px;
  }

  .footer-section h3 {
    font-size: 1rem;
  }

  .footer-logo {
    font-size: 1.125rem;
  }

  .footer-logo i {
    font-size: 1.25rem;
  }

  .back-to-top {
    width: 40px;
    height: 40px;
  }

  /* RTL Small Mobile */
  body[dir="rtl"] .timeline-item {
    margin-left: 0;
    margin-right: 30px;
  }

  body[dir="rtl"] .journey-timeline::before {
    left: auto;
    right: 15px;
  }

  body[dir="rtl"] .timeline-marker {
    left: auto;
    right: 15px;
  }

  body[dir="rtl"] .back-to-top {
    right: auto;
    left: var(--spacing-sm);
  }
}

/* Landscape Orientation Adjustments */
@media (max-height: 600px) and (orientation: landscape) {
  .hero-section {
    min-height: 100vh;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: var(--spacing-lg);
  }

  .section-header {
    margin-bottom: var(--spacing-lg);
  }

  .about-section,
  .network-preview-section,
  .oncology-preview-section,
  .services-preview-section,
  .journey-preview-section,
  .contact-preview-section {
    padding: var(--spacing-xl) 0;
  }
}

/* High DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero-background {
    background-size: cover;
  }

  .about-icon,
  .oncology-icon,
  .service-icon,
  .contact-icon {
    background-image: none;
  }
}

/* Print Styles */
@media print {
  .header,
  .footer,
  .back-to-top,
  .mobile-menu-toggle,
  .theme-toggle,
  .language-switcher {
    display: none !important;
  }

  .hero-section {
    min-height: 0;
    padding: var(--spacing-lg) 0;
  }

  .section-header {
    margin-bottom: var(--spacing-lg);
  }

  .about-section,
  .network-preview-section,
  .oncology-preview-section,
  .services-preview-section,
  .journey-preview-section,
  .contact-preview-section {
    padding: var(--spacing-lg) 0;
  }

  body {
    color: var(--black);
    background: var(--white);
  }

  .about-card,
  .stat-card,
  .oncology-card,
  .service-card,
  .contact-card {
    box-shadow: none;
    border: 1px solid var(--gray-300);
    break-inside: avoid;
  }

  .timeline-item {
    break-inside: avoid;
  }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-section {
    background-attachment: scroll;
  }
}

/* Focus Visible for Better Accessibility */
@media (hover: hover) and (pointer: fine) {
  .btn:focus-visible,
  .nav-link:focus-visible,
  .theme-toggle:focus-visible,
  .back-to-top:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
  }
}

/* Touch Devices */
@media (hover: none) and (pointer: coarse) {
  .nav-link:hover,
  .btn:hover,
  .about-card:hover,
  .stat-card:hover,
  .oncology-card:hover,
  .service-card:hover,
  .contact-card:hover,
  .timeline-content:hover {
    transform: none;
  }

  .nav-link:active,
  .btn:active {
    transform: scale(0.95);
  }
}

/* ===== Content first, animation second =====
   aos.css sets [data-aos^=fade]{opacity:0} the moment it parses, so on a slow
   connection 51 blocks on the homepage stay invisible until aos.js has
   downloaded and run — the visitor gets a mostly blank page and leaves.
   Everything stays visible until the library is genuinely ready; main.js adds
   .aos-ready on <html> in the same tick it calls AOS.init(), so there is no
   frame where content is hidden without something about to reveal it.
   The doubled attribute selector is deliberate: it outranks aos.css's own
   [data-aos^=fade][data-aos^=fade] regardless of stylesheet order. */
html:not(.aos-ready) [data-aos][data-aos] {
  opacity: 1;
  transform: none;
}

/* Someone who asked the system for less motion should never wait on an
   animation to read the page. */
@media (prefers-reduced-motion: reduce) {
  [data-aos][data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- assets/vendor/aos.css ---------- */
[data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,transform}[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;transform:translateZ(0)}[data-aos=fade-up]{transform:translate3d(0,100px,0)}[data-aos=fade-down]{transform:translate3d(0,-100px,0)}[data-aos=fade-right]{transform:translate3d(-100px,0,0)}[data-aos=fade-left]{transform:translate3d(100px,0,0)}[data-aos=fade-up-right]{transform:translate3d(-100px,100px,0)}[data-aos=fade-up-left]{transform:translate3d(100px,100px,0)}[data-aos=fade-down-right]{transform:translate3d(-100px,-100px,0)}[data-aos=fade-down-left]{transform:translate3d(100px,-100px,0)}[data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,transform}[data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;transform:translateZ(0) scale(1)}[data-aos=zoom-in]{transform:scale(.6)}[data-aos=zoom-in-up]{transform:translate3d(0,100px,0) scale(.6)}[data-aos=zoom-in-down]{transform:translate3d(0,-100px,0) scale(.6)}[data-aos=zoom-in-right]{transform:translate3d(-100px,0,0) scale(.6)}[data-aos=zoom-in-left]{transform:translate3d(100px,0,0) scale(.6)}[data-aos=zoom-out]{transform:scale(1.2)}[data-aos=zoom-out-up]{transform:translate3d(0,100px,0) scale(1.2)}[data-aos=zoom-out-down]{transform:translate3d(0,-100px,0) scale(1.2)}[data-aos=zoom-out-right]{transform:translate3d(-100px,0,0) scale(1.2)}[data-aos=zoom-out-left]{transform:translate3d(100px,0,0) scale(1.2)}[data-aos^=slide][data-aos^=slide]{transition-property:transform}[data-aos^=slide][data-aos^=slide].aos-animate{transform:translateZ(0)}[data-aos=slide-up]{transform:translate3d(0,100%,0)}[data-aos=slide-down]{transform:translate3d(0,-100%,0)}[data-aos=slide-right]{transform:translate3d(-100%,0,0)}[data-aos=slide-left]{transform:translate3d(100%,0,0)}[data-aos^=flip][data-aos^=flip]{backface-visibility:hidden;transition-property:transform}[data-aos=flip-left]{transform:perspective(2500px) rotateY(-100deg)}[data-aos=flip-left].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-right]{transform:perspective(2500px) rotateY(100deg)}[data-aos=flip-right].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-up]{transform:perspective(2500px) rotateX(-100deg)}[data-aos=flip-up].aos-animate{transform:perspective(2500px) rotateX(0)}[data-aos=flip-down]{transform:perspective(2500px) rotateX(100deg)}[data-aos=flip-down].aos-animate{transform:perspective(2500px) rotateX(0)}

/* ---------- assets/css/fa-subset.css ---------- */
/* Font Awesome Free 6.4.0 — subset: only the icons this site uses.
 * Codepoints and woff2 both taken from 6.4.0, so rendering matches the
 * CDN build it replaces. Licence: CC BY 4.0 / SIL OFL 1.1 / MIT.
 * https://fontawesome.com  — regenerate if new icons are added.
 */
@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url("../webfonts/fa-solid-900.woff2?v=20260804a") format("woff2")}
@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url("../webfonts/fa-brands-400.woff2?v=20260804a") format("woff2")}
.fa,.fas,.fa-solid,.fab,.fa-brands{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}
.fa,.fas,.fa-solid{font-family:"Font Awesome 6 Free";font-weight:900}
.fab,.fa-brands{font-family:"Font Awesome 6 Brands";font-weight:400}
.fa-arrow-up:before{content:"\f062"}
.fa-atom:before{content:"\f5d2"}
.fa-bars:before{content:"\f0c9"}
.fa-bolt:before{content:"\f0e7"}
.fa-bone:before{content:"\f5d7"}
.fa-building:before{content:"\f1ad"}
.fa-bus:before{content:"\f207"}
.fa-calendar-check:before{content:"\f274"}
.fa-camera:before{content:"\f030"}
.fa-car:before{content:"\f1b9"}
.fa-check:before{content:"\f00c"}
.fa-chevron-down:before{content:"\f078"}
.fa-child:before{content:"\f1ae"}
.fa-circle-nodes:before{content:"\e4e2"}
.fa-clinic-medical:before{content:"\f7f2"}
.fa-clock:before{content:"\f017"}
.fa-cloud-upload-alt:before{content:"\f0ee"}
.fa-comments:before{content:"\f086"}
.fa-concierge-bell:before{content:"\f562"}
.fa-crutch:before{content:"\f7f7"}
.fa-cut:before{content:"\f0c4"}
.fa-disease:before{content:"\f7fa"}
.fa-dna:before{content:"\f471"}
.fa-dot-circle:before{content:"\f192"}
.fa-droplet:before{content:"\f043"}
.fa-dumbbell:before{content:"\f44b"}
.fa-envelope:before{content:"\f0e0"}
.fa-exchange-alt:before{content:"\f362"}
.fa-facebook-f:before{content:"\f39e"}
.fa-file:before{content:"\f15b"}
.fa-file-contract:before{content:"\f56c"}
.fa-file-invoice-dollar:before{content:"\f571"}
.fa-file-medical:before{content:"\f477"}
.fa-file-medical-alt:before{content:"\f478"}
.fa-flask:before{content:"\f0c3"}
.fa-globe:before{content:"\f0ac"}
.fa-hand-holding-heart:before{content:"\f4be"}
.fa-hands-helping:before{content:"\f4c4"}
.fa-head-side-mask:before{content:"\e063"}
.fa-head-side-virus:before{content:"\e064"}
.fa-headset:before{content:"\f590"}
.fa-heart:before{content:"\f004"}
.fa-heartbeat:before{content:"\f21e"}
.fa-home:before{content:"\f015"}
.fa-hospital:before{content:"\f0f8"}
.fa-hospital-alt:before{content:"\f0f8"}
.fa-hospital-user:before{content:"\f80d"}
.fa-hotel:before{content:"\f594"}
.fa-instagram:before{content:"\f16d"}
.fa-language:before{content:"\f1ab"}
.fa-laptop:before{content:"\f109"}
.fa-laptop-medical:before{content:"\f812"}
.fa-lock:before{content:"\f023"}
.fa-lungs:before{content:"\f604"}
.fa-magnifying-glass:before{content:"\f002"}
.fa-map-marker-alt:before{content:"\f3c5"}
.fa-mars:before{content:"\f222"}
.fa-microscope:before{content:"\f610"}
.fa-notes-medical:before{content:"\f481"}
.fa-passport:before{content:"\f5ab"}
.fa-phone:before{content:"\f095"}
.fa-pills:before{content:"\f484"}
.fa-plane:before{content:"\f072"}
.fa-prescription-bottle-medical:before{content:"\f486"}
.fa-procedures:before{content:"\f487"}
.fa-radiation:before{content:"\f7b9"}
.fa-redo-alt:before{content:"\f2f9"}
.fa-ribbon:before{content:"\f4d6"}
.fa-route:before{content:"\f4d7"}
.fa-running:before{content:"\f70c"}
.fa-scale-balanced:before{content:"\f24e"}
.fa-shield-alt:before{content:"\f3ed"}
.fa-spa:before{content:"\f5bb"}
.fa-stethoscope:before{content:"\f0f1"}
.fa-times:before{content:"\f00d"}
.fa-user-circle:before{content:"\f2bd"}
.fa-user-clock:before{content:"\f4fd"}
.fa-user-friends:before{content:"\f500"}
.fa-user-injured:before{content:"\f728"}
.fa-user-lock:before{content:"\f502"}
.fa-user-md:before{content:"\f0f0"}
.fa-user-nurse:before{content:"\f82f"}
.fa-user-shield:before{content:"\f505"}
.fa-utensils:before{content:"\f2e7"}
.fa-vial:before{content:"\f492"}
.fa-vials:before{content:"\f493"}
.fa-video:before{content:"\f03d"}
.fa-walking:before{content:"\f554"}
.fa-wave-square:before{content:"\f83e"}
.fa-weight:before{content:"\f496"}
.fa-whatsapp:before{content:"\f232"}
.fa-wheelchair:before{content:"\f193"}
.fa-x-ray:before{content:"\f497"}

/* ---------- assets/css/inter.css ---------- */
/* Inter — self-hosted, latin subset only. Source: Google Fonts, OFL 1.1.
 * The site contains zero latin-ext/cyrillic/greek characters, so those
 * subsets were dropped.
 * Self-hosting also stops leaking visitor IPs to Google on a site that
 * collects medical information.
 *
 * ONE @font-face, not five. Google Fonts serves Inter as a variable font
 * (wght axis 100-900), so the five requests this file used to make -- 400,
 * 500, 600, 700, 800 -- returned the same 48 KB file five times under five
 * names. Measured on the live homepage: 5 font requests, 242,780 bytes, for
 * 48,556 bytes of actual font. The weight range below covers every weight
 * style.css asks for out of the single file.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-400.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}