/* ===================================
   KUTA EMERGENCY - Bangkok Hospital Style
   Matching bangkokhospital.com design
   =================================== */

/* --- Fonts & Reset --- */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,600,700,800,900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea { font-family: inherit; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: #002D73;
  background: #fafbfe;
  line-height: 1.5;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* --- CSS Variables (Bangkok Hospital palette) --- */
:root {
  --primary: #002D73;
  --primary-hover: #001d4f;
  --accent: #0147a3;
  --red: #E8192C;
  --red-dark: #b21e28;
  --orange: #ff5c00;
  --blue-50: #f0f4ff;
  --blue-100: #e0e8f5;
  --bg-page: #fbfbfc;
  --bg-section: #f0f1f5;
  --gray-50: #f8f9fb;
  --gray-100: #f0f1f5;
  --gray-200: #e2e6ee;
  --gray-300: #c8cdd8;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --white: #ffffff;
  /* Backward compat aliases for inner pages */
  --navy: #002D73;
  --navy-dark: #001d4f;
  --navy-light: #0147a3;
  --blue-light: #f0f4ff;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow: 0 4px 20px rgba(74,74,74,0.10);
  --shadow-lg: 0 8px 30px rgba(0,45,115,0.12);
  --shadow-xl: 0 12px 40px rgba(0,45,115,0.15);
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --container: 1440px;
}

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

/* --- Emergency Top Bar --- */
.emergency-bar {
  background: var(--red);
  color: white;
  text-align: center;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.emergency-bar a { color: white; font-weight: 700; text-decoration: underline; }
.emergency-bar a:hover { opacity: 0.9; }
.emergency-bar i { margin-right: 6px; }

/* ============================================
   NAVIGATION - Bangkok Hospital Style
   ============================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,45,115,0.08);
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  height: 72px;
  gap: 24px;
}
.nav-logo img { height: 44px; }
.nav-logo { flex-shrink: 0; }

/* Nav menu - horizontal links */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.nav-item { position: relative; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  cursor: pointer;
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active {
  color: var(--primary);
  background: var(--blue-50);
}
.nav-link .chevron { font-size: 10px; transition: transform var(--transition); }
.nav-item:hover .chevron { transform: rotate(180deg); }

/* Dropdown */
.dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--gray-200);
  padding: 8px;
  z-index: 100;
}
.nav-item:hover .dropdown { display: block; }
.dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 14px;
  color: var(--gray-600);
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}
.dropdown a:hover { background: var(--blue-50); color: var(--primary); }
.dropdown a i { width: 18px; text-align: center; font-size: 13px; color: var(--accent); }

/* Nav actions */
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-action-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  background: var(--blue-50);
  border-radius: var(--radius);
  transition: all var(--transition);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.nav-action-btn:hover { background: var(--blue-100); border-color: var(--primary); }
.nav-action-btn i { font-size: 15px; color: var(--accent); }
.nav-action-btn.primary {
  background: var(--primary);
  color: white;
}
.nav-action-btn.primary:hover { background: var(--primary-hover); }
.nav-action-btn.primary i { color: white; }

/* Language toggle */
.lang-toggle {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--gray-200);
  border-radius: 20px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
}
.lang-btn {
  padding: 5px 12px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  color: var(--gray-400);
  text-transform: uppercase;
}
.lang-btn.active {
  background: var(--primary);
  color: white;
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}
.nav-hamburger span {
  width: 22px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transition: all 0.3s;
}

/* ============================================
   BUTTONS - Bangkok Hospital Style
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  white-space: nowrap;
  font-family: inherit;
}
.btn-primary {
  background: var(--primary);
  color: white;
}
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-accent {
  background: var(--accent);
  color: white;
}
.btn-accent:hover { background: #013d8a; transform: translateY(-1px); }
.btn-red {
  background: var(--red);
  color: white;
}
.btn-red:hover { background: var(--red-dark); transform: translateY(-1px); }
.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn-outline:hover { background: var(--primary); color: white; }
.btn-outline-white {
  background: transparent;
  color: white;
  border: 2px solid rgba(255,255,255,0.5);
}
.btn-outline-white:hover { background: #fff; color: var(--primary); }
.btn-ghost {
  background: transparent;
  color: var(--primary);
  padding: 8px 16px;
}
.btn-ghost:hover { background: var(--blue-50); }
.btn-sm { padding: 8px 18px; font-size: 13px; }
.btn-lg { padding: 15px 36px; font-size: 15px; }
.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* ============================================
   BH - Exact Bangkok Hospital Components
   ============================================ */

/* -- Gradient strip (5px top bar) -- */
.bh-gradient-strip {
  height: 5px;
  background: linear-gradient(90deg, #002D73 0%, #0147a3 25%, #E8192C 50%, #ff5c00 75%, #002D73 100%);
  position: sticky;
  top: 0;
  z-index: 1001;
}

/* -- Top Nav Bar: light blue left (location), dark blue right (links) with diagonal split -- */
.bh-topbar {
  position: sticky;
  top: 5px;
  z-index: 1000;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  background: var(--primary);
}
.bh-topbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: var(--topbar-light-width, 72%);
  height: 100%;
  background: #dce4f2;
  clip-path: polygon(0 0, 93% 0, 100% 100%, 0 100%);
}
.bh-topbar-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.bh-topbar-left a {
  color: var(--primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
  font-weight: 700;
}
.bh-topbar-left a:hover { color: var(--accent); }
.bh-topbar-left i { font-size: 11px; }
.bh-topbar-right {
  display: flex;
  align-items: center;
  gap: 0;
}
.bh-topbar-link {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: 4px 20px;
  border-left: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.bh-topbar-link:first-child { border-left: none; }
.bh-topbar-link:hover { color: #fff; }
.bh-topbar-link i { font-size: 11px; }
.bh-topbar-link.active { display: none; }

/* -- CTA Bar (blue gradient bar with 3 links) -- */
.bh-cta-bar {
  background: linear-gradient(to left, var(--primary), #003991);
  color: white;
}
.bh-cta-bar-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bh-cta-left {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}
.bh-cta-logo img { height: 28px; filter: brightness(10); }
.bh-cta-hotline { font-size: 12px; color: rgba(255,255,255,0.8); }
.bh-cta-hotline a { color: white; font-weight: 700; }
.bh-cta-nav { display: flex; height: 100%; }
.bh-cta-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  color: white;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  border-left: 1px solid rgba(255,255,255,0.15);
  transition: background var(--transition);
  white-space: nowrap;
}
.bh-cta-link:first-child { border-left: none; }
.bh-cta-link:hover { background: rgba(255,255,255,0.1); }
.bh-cta-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* -- Main navbar (white, like BH) -- */
.bh-navbar {
  background: #fafbfe;
  position: relative;
  z-index: 999;
  padding-top: 12px;
}
.bh-navbar-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  height: clamp(70px, 8vw, 110px);
  gap: 12px;
  margin-bottom: 24px;
}
.bh-nav-logo img { height: clamp(60px, 8vw, 120px); }
.bh-nav-phone-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 16px;
  margin-left: 4px;
  border-left: 2px solid var(--gray-200);
}
.bh-nav-phone-sep {
  color: var(--gray-300);
  font-size: 20px;
  font-weight: 300;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.bh-nav-phone-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bh-nav-phone-label {
  font-size: 16px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
}
.bh-nav-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.bh-nav-phone i.fa-phone { color: var(--red); font-size: 16px; }
.bh-phone-red { color: var(--red); }
.bh-phone-blue { color: var(--primary); }
.bh-nav-logo { flex-shrink: 0; margin-right: 8px; }
.bh-nav-menu {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bh-nav-menu li a {
  display: block;
  padding: 10px 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}
.bh-nav-menu li a:hover { color: var(--accent); background: var(--blue-50); }

/* Dropdown menu (BH style) */
.bh-nav-item { position: relative; display: flex; align-items: center; gap: 0; }
.bh-nav-link { display: block !important; padding-right: 2px !important; }
.bh-nav-arrow { font-size: 12px; color: var(--accent); transition: transform 0.25s ease; cursor: pointer; margin-right: 8px; }
.bh-nav-item.open .bh-nav-arrow { transform: rotate(90deg); }
.bh-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: #f8fafd;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,45,115,0.12);
  border: 1px solid var(--gray-200);
  padding: 12px;
  z-index: 1001;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
}
.bh-nav-item.open .bh-dropdown {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.bh-drop-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.15s, color 0.15s;
}
.bh-drop-link:hover {
  background: var(--blue-50);
  color: var(--accent);
}
.bh-drop-link i {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--accent);
  background: var(--blue-50);
  border-radius: 50%;
  flex-shrink: 0;
}
.bh-drop-link:hover i {
  background: var(--accent);
  color: white;
}

.bh-nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  margin-left: auto;
}
/* Language dropdown */
.lang-dropdown {
  position: relative;
  cursor: pointer;
}
.lang-current {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  padding: 6px 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.lang-current::after {
  content: '\f107';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 12px;
  margin-left: 2px;
}
.lang-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  min-width: 48px;
  text-align: center;
  z-index: 100;
  padding: 4px 0;
}
.lang-dropdown:hover .lang-dropdown-menu { display: block; }
.lang-option {
  display: block;
  padding: 8px 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  transition: background var(--transition);
}
.lang-option:hover { background: var(--blue-50); }
/* Search button */
.bh-nav-search {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 20px;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition);
}
.bh-nav-search:hover { color: var(--accent); }
/* Search bar */
.search-bar {
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  padding: 12px 0;
  display: none;
}
.search-bar.open { display: block; }
.search-bar-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.search-bar-input {
  flex: 1;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 16px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition);
}
.search-bar-input:focus { border-color: var(--primary); }
.search-bar-close {
  background: none;
  border: none;
  color: var(--gray-400);
  font-size: 18px;
  cursor: pointer;
  padding: 6px;
}
.search-bar-close:hover { color: var(--primary); }
.search-results { max-width: var(--container); margin: 0 auto; padding: 0 24px 8px; }
.search-result-item { display: block; padding: 10px 16px; color: var(--gray-600); text-decoration: none; font-size: 15px; border-bottom: 1px solid var(--gray-100); transition: background var(--transition); }
.search-result-item:hover { background: var(--blue-50); color: var(--primary); }
.search-result-item i { font-size: 11px; margin-right: 8px; color: var(--accent); }
.search-no-result { padding: 12px 16px; color: var(--gray-400); font-size: 14px; }
.bh-hamburger {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--gray-200);
  color: var(--primary);
  font-size: 16px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* -- Main content area -- */
.bh-main { background: transparent; }
.bh-container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* -- HERO grid: 12 cols, left 4, right 8 -- */
.bh-hero-grid {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  align-items: stretch;
  gap: 28px;
  padding: 12px 0;
}
.bh-hero-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bh-hero-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.bh-hero-card-top {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bh-card-label { font-size: 12px; color: var(--gray-500); margin-bottom: 4px; }
.bh-card-title { font-size: 1.5rem; font-weight: 800; color: var(--primary); line-height: 1.2; }

/* Hero name card */
.bh-hero-name-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 18px 24px;
}
.bh-card-location-static {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 15px;
  color: var(--gray-500);
  text-decoration: none;
  transition: color 0.2s;
}
.bh-card-location-static:hover { color: var(--accent); }
.bh-card-location-static i { color: var(--accent); font-size: 14px; }

/* Hero maps card (banner 2) */
.bh-hero-maps-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: all var(--transition);
}
.bh-hero-maps-card:hover { background: #e4edfb; }
.bh-maps-label {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 4px;
}
.bh-maps-cta {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.bh-maps-cta i { font-size: 11px; color: var(--accent); transition: transform var(--transition); }
.bh-hero-maps-card:hover .bh-maps-cta i { transform: translateX(3px); }
.bh-maps-icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--accent); flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,45,115,0.08);
}
.bh-badge-accent {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--blue-50); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.bh-hero-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
}
.bh-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  transition: background var(--transition);
  cursor: pointer;
  border-right: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}
.bh-action-btn:nth-child(2n) { border-right: none; }
.bh-action-btn:nth-child(n+3) { border-bottom: none; }
.bh-action-btn:hover { background: rgba(255,255,255,0.5); }
.bh-action-btn i { font-size: 32px; }
.bh-icon-red { color: var(--red) !important; }
.bh-icon-blue { color: var(--accent) !important; }
.bh-icon-primary { color: var(--primary) !important; }
.bh-icon-gray { color: var(--gray-500) !important; }

.bh-hero-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(16px);
  border-radius: 16px;
  border: 1px solid var(--gray-200);
  font-size: 14px;
  color: var(--primary);
  text-decoration: none;
  transition: background var(--transition);
}
.bh-hero-link-card:hover { background: rgba(255,255,255,0.95); }
.bh-hero-link-card i { font-size: 12px; color: var(--gray-400); }

/* Right banner */
.bh-hero-right { display: flex; }
.bh-banner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  min-height: 440px;
  background: var(--gray-100);
}
.bh-banner > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
/* Banner carousel slides */
.bh-slides { position: absolute; inset: 0; }
.bh-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.bh-slide.active { opacity: 1; }
.bh-slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.05);
  color: var(--primary);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  z-index: 5;
}
.bh-slide-arrow:hover { background: #fff; box-shadow: var(--shadow); }
.bh-arrow-left { left: 12px; }
.bh-arrow-right { right: 12px; }
.bh-slide-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
}
.bh-slide-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all var(--transition);
  border: none;
}
.bh-slide-dot.active { background: #fff; width: 20px; border-radius: 4px; }

/* -- Location section (like BH "Our Hospitals") -- */
.bh-section-locations {
  padding: 16px 0 48px;
}
.bh-section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
}
.bh-section-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
}
.bh-see-all {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--transition);
  white-space: nowrap;
}
.bh-see-all:hover { gap: 10px; }
.bh-location-card {
  display: inline-flex;
  align-items: stretch;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--gray-200);
  overflow: hidden;
  text-decoration: none;
  transition: all var(--transition);
}
.bh-location-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); transform: translateY(-2px); }
.bh-location-img { width: 200px; flex-shrink: 0; overflow: hidden; }
.bh-location-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh-location-info { padding: 18px 22px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.bh-location-info h3 { font-size: 1.05rem; font-weight: 700; color: var(--primary); margin-bottom: 2px; }
.bh-location-info p { font-size: 13px; color: var(--gray-500); display: flex; align-items: center; gap: 8px; }
.bh-location-info p i { color: var(--accent); font-size: 12px; width: 14px; text-align: center; flex-shrink: 0; }
.bh-location-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 6px 14px;
  background: var(--primary); color: white;
  border-radius: 6px; font-size: 13px; font-weight: 600;
  width: fit-content; transition: background var(--transition);
}
.bh-location-card:hover .bh-location-btn { background: var(--accent); }

/* -- Services section (BH style: title left, icon grid right, no cards) -- */
.bh-section-services {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: 28px;
  align-items: start;
  padding: 48px 0 56px;
}
.bh-services-left {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.bh-services-left .bh-section-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
  margin-bottom: 8px;
}
.bh-services-left .bh-see-all {
  font-size: 15px;
  color: var(--accent);
}
.bh-services-right { }
.bh-services-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 32px 24px;
}
.bh-service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  padding: 0;
  background: none;
  border: none;
  transition: opacity var(--transition);
}
.bh-service-item:hover {
  opacity: 0.7;
}
.bh-service-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: var(--accent);
  background: none;
  border: none;
}
.bh-service-icon i {
  -webkit-text-stroke: 1.5px;
  -webkit-text-fill-color: transparent;
}

/* -- Packages section -- */
.bh-section-packages {
  padding: 32px;
  border-radius: var(--radius-lg);
  margin: 0 109px 32px 112px;
  background: #fff;
  box-shadow: var(--shadow);
}
.bh-section-packages .bh-section-title {
  font-size: 2rem;
  font-weight: 700;
  font-family: 'Satoshi', sans-serif;
  color: var(--primary);
}
.bh-package-card {
  display: block;
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: 12px;
  padding: 24px;
  text-decoration: none;
  transition: all var(--transition);
  position: relative;
}
.bh-package-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.bh-pkg-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: white;
  background: var(--red);
  padding: 3px 10px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.bh-package-card h3 { font-size: 1rem; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
.bh-pkg-price { font-size: 14px; color: var(--accent); font-weight: 600; margin-bottom: 12px; }
.bh-pkg-link { font-size: 13px; color: var(--accent); font-weight: 600; }

/* -- Pre-footer: Stay Connected / Follow Us (BH style) -- */
.bh-prefooter {
  padding: 32px 0;
  border-top: 1px solid var(--gray-200);
}
.bh-prefooter-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 136px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 48px;
}
.bh-stay-connected {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bh-stay-label {
  font-family: 'Satoshi', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 16px;
}
.bh-stay-btns {
  display: flex;
  gap: 12px;
}
.bh-review-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  background: var(--primary);
  border: none;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  transition: all 0.2s;
}
.bh-review-btn:hover { background: var(--accent); }
.bh-review-btn i { font-size: 16px; }
.bh-prefooter-divider {
  width: 1px;
  height: 80px;
  background: var(--gray-200);
  flex-shrink: 0;
  align-self: center;
}
.bh-follow-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bh-follow-label {
  font-family: 'Satoshi', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 16px;
}
.bh-follow-icons {
  display: flex;
  gap: 24px;
}
.bh-follow-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--primary);
  text-decoration: none;
  transition: all 0.2s;
  background: transparent;
  border: 2px solid var(--primary);
}
.bh-follow-icon:hover { background: var(--primary); color: #fff; }
.bh-follow-icon.ig { }
.bh-follow-icon.fb { }
.bh-follow-icon.wa { }
.bh-follow-icon.tg { }

/* -- Footer -- */
.bh-footer { background: var(--primary); }
.bh-footer-gradient {
  height: 5px;
  background: linear-gradient(90deg, #002D73 0%, #0147a3 25%, #E8192C 50%, #ff5c00 75%, #002D73 100%);
}
.bh-footer-top {
  background: #f0f2f5;
  border-top: none;
  padding: 32px 0 20px;
}
.bh-footer-top .bh-container {
  padding: 0 100px;
}
.bh-footer-grid {
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: space-between;
}
.bh-footer-brand { }
.bh-footer-logo { height: 60px; margin-bottom: 10px; }
.bh-footer-brand p { font-size: 13px; color: var(--gray-500); line-height: 1.7; max-width: 280px; }
.bh-footer-emergency { display: none; }
.bh-footer-col h5 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); margin-bottom: 14px; }
.bh-footer-col--wide h5 { text-align: center; }
.bh-footer-col--wide .bh-footer-2col { display: grid; grid-template-columns: auto auto; gap: 0 16px; justify-content: center; }
.bh-footer-col--wide .bh-footer-2col li { margin-bottom: 8px; }
.bh-footer-col ul { list-style: none; padding: 0; margin: 0; }
.bh-footer-col ul li { margin-bottom: 8px; }
.bh-footer-col ul li a { font-size: 13px; color: var(--gray-500); text-decoration: none; transition: color var(--transition); }
.bh-footer-col ul li a:hover { color: var(--primary); }
.bh-footer-bottom {
  background: var(--primary);
  padding: 28px 0;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
}
.bh-footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bh-footer-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bh-footer-links a { color: #fff; text-decoration: none; transition: opacity var(--transition); font-size: 13px; }
.bh-footer-links a:hover { opacity: 0.8; }
.bh-footer-links span.bh-footer-sep { color: rgba(255,255,255,0.5); }
.bh-footer-links .bh-copyright { margin-left: 12px; color: #fff !important; font-size: 13px; font-weight: 400; }
.bh-footer-right-bottom { padding-top: 0; }
.bh-member-of {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff !important;
  background: rgba(255,255,255,0.15);
  padding: 8px 20px;
  border-radius: 6px;
  text-decoration: none;
}

/* Keep old hero for inner pages */
.hero {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #002D73 0%, #0147a3 40%, #3b7ddb 70%, #89b4f0 100%);
}
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.25; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,45,115,0.85) 0%, rgba(1,71,163,0.6) 50%, rgba(59,125,219,0.4) 100%); }

/* ============================================
   STATS BAR
   ============================================ */
.stats-bar {
  background: var(--primary);
  padding: 0;
  position: relative;
  z-index: 5;
}
.stats-bar-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.stat-item {
  padding: 28px 24px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.stat-item:last-child { border-right: none; }
.stat-num {
  font-size: 2.2rem;
  font-weight: 800;
  color: white;
  line-height: 1;
}
.stat-num .accent { color: #8bbaff; }
.stat-label { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 6px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }

/* ============================================
   SECTIONS
   ============================================ */
.section {
  padding: 80px 24px;
}
.section-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.section-white { background: transparent; }
.section-gray { background: transparent; }
.section-primary { background: var(--primary); color: white; }
.section-dark { background: #001a45; color: white; }
/* Backward compat aliases */
.section-alt { background: var(--bg-section); }
.section-navy { background: var(--primary); color: white; }
.section-navy .section-header h2 { color: white; }
.section-navy .section-header p { color: rgba(255,255,255,0.65); }
.divider { width: 48px; height: 3px; background: var(--accent); border-radius: 2px; margin: 14px 0; }
.divider.center { margin: 14px auto; }
.quick-actions { position: relative; z-index: 10; margin-top: -40px; }
.quick-actions-inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.quick-card { background: #fff; border-radius: var(--radius-lg); padding: 24px 20px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 14px; transition: all var(--transition); cursor: pointer; }
.quick-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.quick-card-icon { width: 48px; height: 48px; border-radius: var(--radius); background: var(--blue-50); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; color: var(--accent); }
.quick-card.emergency .quick-card-icon { background: rgba(232,25,44,0.08); color: var(--red); }
.quick-card h4 { font-size: 14px; font-weight: 700; color: var(--primary); margin-bottom: 2px; }
.quick-card p { font-size: 12px; color: var(--gray-500); line-height: 1.4; }
.card-icon { width: 52px; height: 52px; border-radius: var(--radius); background: var(--blue-50); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; color: var(--accent); }
.card-icon.red { background: rgba(232,25,44,0.08); color: var(--red); }
.card h3 { font-size: 15px; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
.card p { font-size: 13px; color: var(--gray-500); line-height: 1.6; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; background: var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; }

/* Section headers - Bangkok Hospital style */
.section-header {
  margin-bottom: 48px;
}
.section-header.center { text-align: center; }
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 12px;
}
.section-tag::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--accent);
  display: inline-block;
}
.section-primary .section-tag { color: rgba(255,255,255,0.6); }
.section-primary .section-tag::before { background: rgba(255,255,255,0.4); }
.section-header h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.section-primary .section-header h2 { color: white; }
.section-dark .section-header h2 { color: white; }
.section-header p {
  font-size: 15px;
  color: var(--gray-500);
  max-width: 560px;
  line-height: 1.7;
}
.section-header.center p { margin: 0 auto; }
.section-primary .section-header p { color: rgba(255,255,255,0.65); }
.section-header .see-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  transition: gap var(--transition);
}
.section-header .see-all:hover { gap: 10px; }

/* Header with flex between */
.section-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
  gap: 24px;
}
.section-header-row .section-header { margin-bottom: 0; }

/* ============================================
   CARDS - Bangkok Hospital glass style
   ============================================ */
.card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: all var(--transition);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card-body { padding: 24px; }
.card-img { overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.card:hover .card-img img { transform: scale(1.05); }

/* Service cards - icon + text style like Bangkok Hospital */
.service-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 28px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  transition: all var(--transition);
  cursor: pointer;
}
.service-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.service-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--blue-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--accent);
}
.service-icon.red { background: rgba(232,25,44,0.08); color: var(--red); }
.service-card h3 { font-size: 15px; font-weight: 700; color: var(--primary); margin-bottom: 6px; }
.service-card p { font-size: 13px; color: var(--gray-500); line-height: 1.6; }
.service-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--blue-50);
  padding: 3px 10px;
  border-radius: 10px;
  margin-top: 8px;
}
.service-badge.red { color: var(--red); background: rgba(232,25,44,0.08); }
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin-top: 12px;
  transition: gap var(--transition);
}
.card-link:hover { gap: 10px; }

/* Grid layouts */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }

/* ============================================
   SERVICES GRID CARDS (Bangkok Hospital style)
   ============================================ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.svc-card {
  display: block;
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: all var(--transition);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,45,115,0.04);
  text-decoration: none;
  color: inherit;
}
.svc-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.svc-icon {
  width: 56px;
  height: 56px;
  background: var(--blue-50);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.svc-icon i {
  font-size: 24px;
  color: var(--primary);
}
.svc-card h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 8px;
}
.svc-card p {
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .svc-card { padding: 20px 16px; }
}
@media (max-width: 480px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .svc-card { padding: 14px 10px; }
  .svc-icon { width: 44px; height: 44px; margin-bottom: 10px; }
  .svc-icon i { font-size: 18px; }
  .svc-card h3 { font-size: 14px; margin-bottom: 4px; }
  .svc-card p { font-size: 11px; -webkit-line-clamp: 4; }
}

/* ============================================
   PACKAGE CARDS (Bangkok Hospital style with images)
   ============================================ */
/* Package carousel */
.pkg-carousel-wrap {
  position: relative;
  padding: 0 40px;
}
.pkg-carousel {
  display: flex;
  gap: 20px;
  overflow: hidden;
}
.pkg-carousel-inner {
  display: flex;
  gap: 20px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: max-content;
}
.pkg-card {
  flex-shrink: 0;
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
}
.pkg-card:hover {
  box-shadow: 0 8px 24px rgba(0,45,115,0.1);
  transform: translateY(-3px);
}
.pkg-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--gray-200);
  color: var(--primary);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all var(--transition);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.pkg-arrow:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.pkg-arrow-left { left: 8px; }
.pkg-arrow-right { right: 8px; }
.pkg-img {
  width: 100%;
  aspect-ratio: 5 / 4;
  overflow: hidden;
}
.pkg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.pkg-card:hover .pkg-img img {
  transform: scale(1.05);
}
.pkg-body {
  padding: 16px 18px 20px;
}
.pkg-body h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
  line-height: 1.3;
}
.pkg-clinic {
  display: inline-block;
  font-size: 12px;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 20px;
  padding: 3px 12px;
  margin-bottom: 10px;
  font-weight: 500;
}
.pkg-price {
  font-size: 14px;
  color: var(--gray-600);
  font-weight: 500;
}
.pkg-price i {
  color: var(--accent);
  margin-right: 4px;
  font-size: 13px;
}
/* Package detail page */
.pkg-detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.pkg-detail-price {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 20px;
}
.pkg-detail-features ul {
  list-style: none;
  padding: 0;
}
.pkg-detail-features li {
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: 15px;
  color: var(--primary);
}
@media (max-width: 768px) {
  .pkg-detail-layout { grid-template-columns: 1fr; gap: 24px; }
}

/* Package card buttons */
.pkg-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.pkg-btn-detail, .pkg-btn-buy {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  border: none;
  font-family: inherit;
}
.pkg-btn-detail {
  background: #fff;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.pkg-btn-detail:hover { background: var(--blue-50); }
.pkg-btn-buy {
  background: var(--accent);
  color: white;
}
.pkg-btn-buy:hover { background: var(--primary); }

/* Payment Modal */
.payment-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,20,50,0.6);
  z-index: 10001;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.payment-modal.open { display: flex; }
.payment-modal-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  width: 90%;
  max-width: 420px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.payment-modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--gray-400);
  cursor: pointer;
  transition: color var(--transition);
}
.payment-modal-close:hover { color: var(--primary); }
.payment-modal-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
  padding-right: 32px;
}
.payment-modal-price {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 20px;
}
.payment-modal-label {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 12px;
  font-weight: 500;
}
.payment-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.payment-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  text-decoration: none;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  transition: all var(--transition);
}
.payment-method:hover {
  border-color: var(--accent);
  background: var(--blue-50);
  color: var(--accent);
}
.payment-method i {
  font-size: 24px;
  color: var(--accent);
}

@media (max-width: 1100px) {
  .bh-section-packages { margin: 0 24px 32px; padding: 24px; }
  .pkg-carousel-wrap { padding: 0 40px; }
  .bh-services-left .bh-section-title { font-size: 1.5rem; }
  .bh-about-row { padding: 0 24px; }
  .bh-about-title { padding-left: 24px; }
}
@media (max-width: 768px) {
  .bh-section-packages { margin: 0 12px 24px; padding: 16px; }
  .pkg-carousel-wrap { padding: 0 36px; }
  .pkg-arrow { width: 32px; height: 32px; font-size: 12px; }
  .bh-about-row { padding: 0 16px; flex-wrap: wrap; }
  .bh-about-title { padding-left: 16px; }
}
@media (max-width: 480px) {
  .bh-section-packages { margin: 0 8px 20px; padding: 12px; }
  .pkg-carousel-wrap { padding: 0 28px; }
  .pkg-arrow { width: 28px; height: 28px; font-size: 11px; }
  .pkg-actions { flex-direction: column; }
}

/* ============================================
   DOCTOR MESSAGE - Minimal style
   ============================================ */
.doctor-msg {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 64px;
  align-items: center;
}
.doctor-img {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--gray-100);
}
.doctor-img img { width: 100%; height: 100%; object-fit: cover; }
.doctor-quote {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-style: italic;
  color: var(--primary);
  line-height: 1.7;
  margin-bottom: 24px;
  position: relative;
  padding-left: 24px;
  border-left: 3px solid var(--accent);
}
.doctor-name { font-size: 1rem; font-weight: 700; color: var(--primary); }
.doctor-title { font-size: 13px; color: var(--accent); margin-top: 4px; font-weight: 600; }
.doctor-bio { font-size: 14px; color: var(--gray-500); margin-top: 14px; line-height: 1.7; }

/* ============================================
   PARTNERS
   ============================================ */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.partner-logo {
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 20px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  transition: all var(--transition);
  text-align: center;
}
.partner-logo:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.partner-logo img { max-height: 60px; object-fit: contain; transition: all var(--transition); }
.partner-logo:hover img { transform: scale(1.05); }
.partner-text { display: none; }
.partner-logo:not(:has(img)) { display: none; }

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonial-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow);
  transition: all var(--transition);
}
.testimonial-card:hover { box-shadow: var(--shadow-lg); }
.testimonial-stars { color: #F59E0B; font-size: 14px; margin-bottom: 14px; letter-spacing: 2px; }
.testimonial-text { font-size: 14px; color: var(--gray-600); line-height: 1.7; margin-bottom: 20px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--blue-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
}
.testimonial-name { font-size: 14px; font-weight: 700; color: var(--primary); }
.testimonial-country { font-size: 12px; color: var(--gray-500); }

/* ============================================
   PAYMENT METHODS
   ============================================ */
.payment-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.payment-item {
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  transition: all var(--transition);
}
.payment-item:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.payment-item .icon { font-size: 22px; }

/* ============================================
   GALLERY
   ============================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--gray-100);
  cursor: pointer;
  position: relative;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item.tall { grid-row: span 2; aspect-ratio: auto; }
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,45,115,0.5);
  opacity: 0;
  transition: opacity var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }

/* ============================================
   FORMS
   ============================================ */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 6px;
}
.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--gray-700);
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(1,71,163,0.1); }
.form-control::placeholder { color: var(--gray-400); }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 120px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow);
}

/* ============================================
   ROOMS
   ============================================ */
.room-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all var(--transition);
}
.room-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.room-img { aspect-ratio: 16/10; background: var(--gray-100); overflow: hidden; }
.room-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.room-card:hover .room-img img { transform: scale(1.05); }
.room-body { padding: 24px; }
.room-body h3 { font-size: 1.1rem; font-weight: 700; color: var(--primary); margin-bottom: 10px; }
.room-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.room-feature {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--gray-500);
  background: var(--gray-50);
  padding: 5px 10px;
  border-radius: 20px;
}
.room-feature i { color: var(--accent); font-size: 10px; }

/* ============================================
   PAGE TITLE (Bangkok Hospital style)
   ============================================ */
.bh-page-title {
  background: #fff;
  padding: 48px 24px 0;
  text-align: center;
}
.bh-page-title h1 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.bh-title-line {
  width: 240px;
  height: 4px;
  margin: 0 auto;
  background: linear-gradient(90deg, #002D73 0%, #8B2040 40%, #0147a3 100%);
  border-radius: 2px;
}

/* ============================================
   PAGE HERO (inner pages)
   ============================================ */
/* BH-style page title (white bg, gradient underline) */
.bh-page-title-bar {
  text-align: center;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bh-page-title-bar h1 {
  font-family: 'Satoshi', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 2px;
  display: inline-block;
}
.bh-title-gradient {
  height: 4px;
  margin: 0 auto 16px;
  background: linear-gradient(90deg, var(--red) 0%, var(--primary) 100%);
  border-radius: 2px;
}
.bh-title-gradient--left {
  margin: 0 0 16px;
  width: 48px;
  background: var(--primary);
}
.bh-banner-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}

.page-hero {
  background: linear-gradient(135deg, #002D73 0%, #0147a3 60%, #3b7ddb 100%);
  padding: 80px 24px 56px;
  color: white;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  right: -100px;
  top: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
}
.page-hero::before {
  content: '';
  position: absolute;
  left: -50px;
  bottom: -50px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
}
.page-hero-inner { max-width: var(--container); margin: 0 auto; position: relative; z-index: 1; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 16px; }
.breadcrumb a { color: rgba(255,255,255,0.6); transition: color var(--transition); }
.breadcrumb a:hover { color: white; }
.breadcrumb span { color: rgba(255,255,255,0.35); }
.page-hero h1 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.page-hero p { font-size: 15px; color: rgba(255,255,255,0.7); max-width: 520px; line-height: 1.6; }

/* ============================================
   TABS
   ============================================ */
.tabs { display: flex; gap: 4px; margin-bottom: 32px; border-bottom: 2px solid var(--gray-200); }
.tab-btn {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition);
  font-family: inherit;
}
.tab-btn:hover { color: var(--primary); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ============================================
   ACCORDION
   ============================================ */
.accordion-item {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 8px;
}
.accordion-header {
  padding: 18px 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  user-select: none;
}
.accordion-header:hover { background: var(--blue-50); }
.accordion-icon { transition: transform 0.3s; font-size: 12px; }
.accordion-item.open .accordion-icon { transform: rotate(180deg); }
.accordion-body {
  display: none;
  padding: 0 22px 20px;
  font-size: 14px;
  color: var(--gray-500);
  line-height: 1.7;
}
.accordion-item.open .accordion-body { display: block; }

/* ============================================
   FOOTER - Bangkok Hospital Style
   ============================================ */
footer {
  background: #001433;
  color: rgba(255,255,255,0.7);
}
.footer-top {
  max-width: var(--container);
  margin: 0 auto;
  padding: 60px 24px 44px;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
}
.footer-brand .footer-logo img { height: 48px; margin-bottom: 16px; }
.footer-brand p { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.55); max-width: 260px; }
.footer-brand .emergency-contact {
  margin-top: 20px;
  background: rgba(232,25,44,0.12);
  border: 1px solid rgba(232,25,44,0.25);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.footer-brand .emergency-contact .ec-label { font-size: 10px; color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.footer-brand .emergency-contact .ec-num { font-size: 1.1rem; font-weight: 700; color: white; margin-top: 4px; }
.footer-col h5 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.9);
  margin-bottom: 18px;
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 13px; color: rgba(255,255,255,0.55); transition: color var(--transition); }
.footer-col ul li a:hover { color: white; }
.footer-social { margin-top: 4px; }
.footer-social .follow-label {
  font-size: 14px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.social-icons { display: flex; gap: 10px; }
.social-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--blue-50);
  border: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 16px;
  text-decoration: none;
  transition: all var(--transition);
}
.social-icon:hover { background: var(--accent); border-color: var(--accent); color: white; transform: translateY(-2px); }
.social-icon.instagram:hover { background: #E1306C; border-color: #E1306C; }
.social-icon.facebook:hover { background: #1877F2; border-color: #1877F2; }
.social-icon.whatsapp:hover { background: #25D366; border-color: #25D366; }
.social-icon.youtube:hover { background: #FF0000; border-color: #FF0000; }
.footer-contact-info { margin-top: 4px; }
.footer-contact-item { display: flex; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.footer-contact-item i { color: var(--accent); margin-top: 2px; flex-shrink: 0; font-size: 12px; }
.footer-contact-item a { color: rgba(255,255,255,0.55); }
.footer-contact-item a:hover { color: white; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container);
  margin: 0 auto;
  font-size: 12px;
  color: rgba(255,255,255,0.35);
}
.footer-bottom a { color: rgba(255,255,255,0.35); transition: color var(--transition); }
.footer-bottom a:hover { color: rgba(255,255,255,0.6); }
.footer-bottom-links { display: flex; gap: 20px; }

/* ============================================
   AI CHAT WIDGET
   ============================================ */
/* Contact FAB (floating action button) */
.contact-fab {
  position: fixed;
  bottom: 24px;
  right: 16px;
  z-index: 9999;
}
.contact-fab-btn {
  width: 56px;
  height: 56px;
  background: rgba(0, 45, 115, 0.75);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,45,115,0.35);
  transition: all 0.2s;
  font-size: 22px;
  color: white;
  border: none;
}
.contact-fab-btn:hover { background: rgba(1, 71, 163, 0.8); transform: scale(1.06); }
.contact-fab-menu {
  display: none;
  position: absolute;
  bottom: 68px;
  right: 0;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
.contact-fab-menu.open { display: flex; }
.contact-fab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  white-space: nowrap;
}
.contact-fab-item span {
  background: #fff;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.contact-fab-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.contact-fab-icon.wa { background: rgba(0, 45, 115, 0.75); }
.contact-fab-icon.email { background: rgba(0, 45, 115, 0.75); }
.contact-fab-icon.phone { background: rgba(0, 45, 115, 0.75); }
/* Hide old chat styles */
.chat-widget { display: none !important; }
.chat-panel {
  display: none;
  position: absolute;
  bottom: 68px;
  right: 0;
  width: 340px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--gray-200);
  overflow: hidden;
}
.chat-panel.open { display: flex; flex-direction: column; }
.chat-header {
  background: var(--primary);
  color: white;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-header-avatar {
  width: 36px;
  height: 36px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.chat-header-info h4 { font-size: 14px; font-weight: 700; }
.chat-header-info p { font-size: 11px; color: rgba(255,255,255,0.7); }
.chat-close { margin-left: auto; cursor: pointer; font-size: 16px; opacity: 0.7; background: none; border: none; color: white; }
.chat-close:hover { opacity: 1; }
.chat-messages { padding: 16px; flex: 1; max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 82%; }
.chat-msg.bot { align-self: flex-start; }
.chat-msg.user { align-self: flex-end; }
.chat-msg-bubble {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
}
.chat-msg.bot .chat-msg-bubble { background: var(--blue-50); color: var(--primary); border-radius: 4px 12px 12px 12px; }
.chat-msg.user .chat-msg-bubble { background: var(--primary); color: white; border-radius: 12px 4px 12px 12px; }
.chat-quick-replies { padding: 0 16px 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.chat-quick-reply {
  padding: 6px 12px;
  border: 1.5px solid var(--accent);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  transition: all var(--transition);
  background: none;
  font-family: inherit;
}
.chat-quick-reply:hover { background: var(--accent); color: white; }
.chat-input-area { padding: 12px 16px; border-top: 1px solid var(--gray-200); display: flex; gap: 8px; }
.chat-input {
  flex: 1;
  padding: 9px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: 20px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
  transition: border-color var(--transition);
}
.chat-input:focus { border-color: var(--accent); }
.chat-send {
  width: 34px;
  height: 34px;
  background: var(--primary);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: background var(--transition);
}
.chat-send:hover { background: var(--primary-hover); }

/* ============================================
   JOBS
   ============================================ */
.job-card {
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: all var(--transition);
}
.job-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.job-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
.job-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.job-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--gray-500);
}
.job-tag i { font-size: 11px; color: var(--accent); }
.job-card p { font-size: 13.5px; color: var(--gray-500); line-height: 1.6; margin-bottom: 16px; }

/* ============================================
   LIGHTBOX
   ============================================ */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox-img { max-width: 90vw; max-height: 88vh; border-radius: var(--radius); object-fit: contain; }
.lightbox-close { position: absolute; top: 20px; right: 24px; color: white; font-size: 28px; cursor: pointer; background: none; border: none; }

/* ============================================
   TIMELINE
   ============================================ */
.timeline { position: relative; padding-left: 32px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--gray-200); }
.timeline-item { position: relative; margin-bottom: 36px; }
.timeline-item::before { content: ''; position: absolute; left: -28px; top: 6px; width: 12px; height: 12px; background: var(--accent); border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 3px var(--accent); }
.timeline-year { font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.timeline-title { font-size: 1rem; font-weight: 700; color: var(--primary); margin-bottom: 6px; }
.timeline-text { font-size: 13.5px; color: var(--gray-500); line-height: 1.6; }

/* ============================================
   TWO COLUMN / CONTENT LAYOUTS
   ============================================ */
.two-col-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.two-col-layout.reverse { direction: rtl; }
.two-col-layout.reverse > * { direction: ltr; }
.img-rounded { border-radius: var(--radius-lg); overflow: hidden; }
.img-rounded img { width: 100%; height: 100%; object-fit: cover; }
.check-list { display: flex; flex-direction: column; gap: 10px; }
.check-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--gray-600); }
.check-item i { color: var(--accent); margin-top: 3px; flex-shrink: 0; font-size: 13px; }
.highlight-box {
  background: var(--blue-50);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  font-size: 14px;
  color: var(--primary);
  line-height: 1.7;
}
.map-embed { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }

/* ============================================
   TEAM CARDS
   ============================================ */
.team-card {
  display: block;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: all var(--transition);
  color: inherit;
}
.team-card:not(.no-link):hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
.team-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #e8f0fb 0%, #f5f8fc 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b8c5d6;
  font-size: 64px;
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-info {
  padding: 18px 18px 22px;
  text-align: center;
}
.team-info h3 {
  font-family: 'Satoshi', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 6px;
  line-height: 1.35;
  min-height: 40px;
}
.team-info p {
  font-size: 13px;
  color: var(--gray-500);
  margin: 0;
  font-weight: 500;
}
@media (max-width: 1100px) {
  .team-card + .team-card,
  .section-inner > div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 768px) {
  .section-inner > div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 500px) {
  .section-inner > div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   PACKAGES
   ============================================ */
.package-card {
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.package-card:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.package-card .package-price {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 6px;
}
.package-card .package-price small { font-size: 0.75rem; font-weight: 500; color: var(--gray-500); }
.package-card ul { flex: 1; margin: 14px 0 20px; }
.package-card ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  color: var(--gray-600);
  border-bottom: 1px solid var(--gray-100);
}
.package-card ul li:last-child { border-bottom: none; }
.package-card ul li i { color: var(--accent); margin-top: 3px; flex-shrink: 0; font-size: 11px; }
.package-card .package-duration { font-size: 12px; color: var(--gray-500); margin-bottom: 14px; }
.package-card .badge-popular {
  position: absolute;
  top: -1px;
  right: 20px;
  background: var(--red);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 0 0 8px 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================
   CONTACT / WHY / NETWORK / ACCREDITATION CARDS
   ============================================ */
.contact-card {
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
  transition: all var(--transition);
}
.contact-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.contact-card .contact-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--accent);
  margin: 0 auto 14px;
}
.contact-card.emergency .contact-icon { background: rgba(232,25,44,0.08); color: var(--red); }
.contact-card h4 { font-size: 15px; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
.contact-card p { font-size: 13px; color: var(--gray-500); line-height: 1.6; }
.contact-card a { color: var(--accent); font-weight: 600; }
.contact-card a:hover { color: var(--primary); }

.why-card {
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  transition: all var(--transition);
}
.why-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.why-card .why-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--blue-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--accent);
  margin: 0 auto 16px;
}
.why-card h3 { font-size: 15px; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
.why-card p { font-size: 13px; color: var(--gray-500); line-height: 1.6; }

.network-card {
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
  transition: all var(--transition);
}
.network-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.network-card h3 { font-size: 1rem; font-weight: 700; color: var(--primary); margin: 14px 0 8px; }
.network-card p { font-size: 13px; color: var(--gray-500); line-height: 1.6; }
.network-card .network-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--blue-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--accent);
  margin: 0 auto;
}

.accreditation-card {
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 36px;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.accreditation-card .acc-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--blue-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--accent);
  margin: 0 auto 18px;
}
.accreditation-card h3 { font-size: 1.3rem; font-weight: 800; color: var(--primary); margin-bottom: 14px; }
.accreditation-card p { font-size: 14px; color: var(--gray-500); line-height: 1.7; }

.emergency-banner {
  background: var(--red);
  color: white;
  padding: 40px 24px;
  text-align: center;
}
.emergency-banner h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: 8px; }
.emergency-banner p { font-size: 15px; opacity: 0.9; margin-bottom: 20px; }

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
}

.video-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fff;
  transition: all var(--transition);
}
.video-card:hover { box-shadow: var(--shadow-lg); }
.video-card video { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; background: #000; }
.video-card .card-body { padding: 18px; }
.video-card h4 { font-size: 14px; font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.video-card p { font-size: 12px; color: var(--gray-500); }

.rating-display { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.rating-number { font-size: 3.5rem; font-weight: 800; color: var(--primary); line-height: 1; }
.rating-stars { color: #F59E0B; font-size: 22px; display: flex; gap: 3px; }
.rating-count { font-size: 14px; color: var(--gray-500); }

.future-card {
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: all var(--transition);
}
.future-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.future-card .future-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--blue-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--accent);
  margin-bottom: 14px;
}
.future-card h4 { font-size: 14px; font-weight: 700; color: var(--primary); margin-bottom: 6px; }
.future-card p { font-size: 13px; color: var(--gray-500); line-height: 1.6; }

.payment-category { margin-bottom: 40px; }
.payment-category h3 { font-size: 1rem; font-weight: 700; color: var(--primary); margin-bottom: 6px; }
.payment-category p { font-size: 14px; color: var(--gray-500); margin-bottom: 16px; }

/* ============================================
   BADGES
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.badge-blue { background: var(--blue-50); color: var(--accent); }
.badge-red { background: rgba(232,25,44,0.08); color: var(--red); }
.badge-green { background: rgba(16,185,129,0.08); color: #059669; }

/* ============================================
   MOBILE NAV
   ============================================ */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: #fafbfe;
  z-index: 2000;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
.mobile-nav.open { display: flex; }
@media (min-width: 769px) { .mobile-nav.open { display: none; } }
/* -- Mobile nav: reuse desktop header classes -- */
.mobile-nav .bh-gradient-strip { position: static; }
.mobile-nav .bh-topbar { position: static; top: auto; }
.mobile-nav .bh-topbar-left { display: none; }
.mobile-nav .bh-topbar::before { display: none; }
.mobile-nav .bh-topbar-right { justify-content: center; width: 100%; }
.mobile-nav .bh-topbar-link { flex: 1; justify-content: center; }
.mobile-nav .mobile-nav-navbar {
  display: flex;
  align-items: center;
  padding: 12px 24px 0;
  min-height: clamp(70px, 8vw, 110px);
  gap: 12px;
  background: #fafbfe;
  box-sizing: content-box;
}
.mobile-nav .mobile-nav-navbar .bh-nav-logo { flex-shrink: 0; margin-right: 8px; }
.mobile-nav .mobile-nav-navbar .bh-nav-phone-wrap { flex: 1; min-width: 0; }
.mobile-nav .mobile-nav-navbar .bh-nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  margin-left: auto;
}
.mobile-nav .mobile-nav-navbar .bh-nav-right .bh-hamburger { display: none; }
.mobile-nav-close { font-size: 22px; cursor: pointer; color: var(--primary); background: none; border: none; }
.mobile-nav-body { padding: 16px 20px; flex: 1; }
.mobile-nav-link {
  display: block;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  border-bottom: 1px solid var(--gray-100);
}
.mobile-nav-group { border-bottom: 1px solid var(--gray-100); }
.mobile-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
}
.mobile-nav-toggle i { font-size: 11px; transition: transform 0.2s; }
.mobile-nav-toggle.open i { transform: rotate(180deg); }
.mobile-nav-sub {
  display: none;
  padding: 0 0 8px 8px;
}
.mobile-nav-sub.open { display: block; }
.mobile-nav-sub a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--gray-600);
  border-radius: 8px;
  transition: background 0.15s;
}
.mobile-nav-sub a:hover { background: var(--blue-50); }
.mobile-nav-sub a i { width: 20px; text-align: center; font-size: 13px; color: var(--accent); }

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.animate-on-scroll.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-center { text-align: center; }
.text-primary { color: var(--primary); }
.text-accent { color: var(--accent); }
.text-red { color: var(--red); }
.text-gray { color: var(--gray-500); }
.mb-0 { margin-bottom: 0 !important; }
.mb-8 { margin-bottom: 8px !important; }
.mb-16 { margin-bottom: 16px !important; }
.mb-24 { margin-bottom: 24px !important; }
.mb-32 { margin-bottom: 32px !important; }
.mt-16 { margin-top: 16px !important; }
.mt-24 { margin-top: 24px !important; }
.mt-32 { margin-top: 32px !important; }
.w-full { width: 100%; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.hidden { display: none; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1100px) {
  .footer-top { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 3; }
  .bh-hero-grid { grid-template-columns: 1fr; }
  .bh-hero-right { order: -1; }
  .bh-banner { min-height: 280px; }
  .bh-section-services { grid-template-columns: 1fr; gap: 24px; }
  .bh-services-grid { grid-template-columns: repeat(7, 1fr); gap: 24px 16px; }
  .bh-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .bh-footer-brand { grid-column: span 2; }
  .bh-footer-col--wide { grid-column: span 2; }
  .bh-footer-col--wide h5 { text-align: left; }
  .bh-footer-col--wide .bh-footer-2col { justify-content: start; gap: 0 40px; }
  .hero-content { grid-template-columns: 1fr; gap: 40px; }
  .stats-bar-inner { grid-template-columns: repeat(2, 1fr); }
  .doctor-msg { grid-template-columns: 1fr; gap: 32px; }
  .doctor-img { aspect-ratio: 16/9; max-height: 400px; }
  .partners-grid { grid-template-columns: repeat(4, 1fr); }
  .section-inner[style*="112px"], .bh-about-bar [style*="112px"] { padding-left: 24px !important; padding-right: 24px !important; }
  .section-inner [style*="repeat(3,1fr)"], .bh-container [style*="repeat(3,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  .bh-footer-top .bh-container { padding: 0 24px; }
}
/* Prevent any element from forcing horizontal scroll on narrow viewports */
html, body { overflow-x: hidden; max-width: 100vw; }

/* Collapse desktop nav to hamburger earlier (half-screen desktop / small laptops / iPad landscape) */
@media (max-width: 1024px) {
  .bh-nav-menu { display: none; }
  .bh-hamburger { display: flex; }
  .bh-nav-right { flex-shrink: 0; }
  .bh-navbar-inner { gap: 8px; flex-wrap: wrap; align-items: center; }
  .bh-nav-phone-wrap { flex-wrap: wrap; gap: 4px 10px; }
  .bh-nav-phone-sep { display: none; }
  .bh-nav-cta { order: 10 !important; flex: 0 0 auto !important; margin-left: auto !important; padding: 6px 14px !important; font-size: 12.5px !important; border-radius: 999px !important; }
}
@media (max-width: 768px) {
  .section { padding: 56px 20px; }
  .nav-menu { display: none; }
  .nav-hamburger { display: flex; }
  .nav-actions .nav-action-btn:not(.primary) { display: none; }
  .nav-inner { gap: 12px; }
  /* Hide the dual phone block from the top navbar on tablet/phone (still accessible via mobile nav drawer) */
  .bh-navbar .bh-navbar-inner > .bh-nav-phone-wrap { display: none; }
  .bh-navbar-inner { justify-content: space-between; }
  /* BH mobile */
  .bh-topbar-left { display: none; }
  .bh-topbar::before { display: none; }
  .bh-topbar-right { justify-content: center; width: 100%; }
  .bh-topbar-link { flex: 1; justify-content: center; }
  .bh-prefooter-inner { padding: 0 24px; flex-direction: column; gap: 24px; }
  .bh-prefooter-divider { width: 100%; height: 1px; }
  .bh-follow-section { align-items: flex-start; }
  .bh-cta-left { display: none; }
  .bh-cta-nav { width: 100%; }
  .bh-cta-link { flex: 1; justify-content: center; padding: 8px 12px; font-size: 11px; }
  .bh-nav-menu { display: none; }
  .bh-hamburger { display: flex; }
  .bh-hero-grid { grid-template-columns: 1fr; }
  .bh-hero-right { order: -1; }
  .bh-banner { min-height: 220px; }
  .bh-services-grid { grid-template-columns: repeat(5, 1fr); gap: 20px 12px; }
  .bh-service-item { font-size: 13px; }
  .bh-service-icon { width: 48px; height: 48px; font-size: 30px; }
  .bh-location-card { display: flex; flex-direction: column; }
  .bh-location-img { width: 100%; height: 160px; }
  .bh-desktop-only { display: none !important; }
  .bh-accreditations-section { padding-top: 28px !important; }
  .bh-footer-top { padding-top: 16px; }
  .bh-footer-top .bh-container { padding: 0 !important; }
  .bh-footer-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 8px 0 22px; }
  .bh-footer-brand { grid-column: span 4; display: flex; align-items: flex-start; gap: 14px; margin-bottom: 10px; }
  .bh-footer-brand > a { flex-shrink: 0; }
  .bh-footer-brand p { display: block !important; font-size: 11px !important; line-height: 1.5 !important; max-width: none !important; margin: 0 !important; }
  .bh-footer-logo { height: 44px !important; margin-bottom: 0 !important; width: auto !important; max-width: none !important; }
  .bh-footer-col--wide { grid-column: span 2; }
  .bh-footer-col--wide h5 { text-align: left; }
  .bh-footer-col--wide .bh-footer-2col { display: grid; grid-template-columns: auto auto; gap: 0 6px; }
  .bh-footer-col--wide .bh-footer-2col li a { white-space: nowrap; }
  .bh-footer-col h5 { font-size: 8.5px; letter-spacing: 0; margin-bottom: 8px; }
  .bh-footer-col ul li a { font-size: 10.5px; }
  .bh-footer-col ul li { margin-bottom: 5px; }
  .bh-footer-bottom-inner { flex-direction: column; gap: 8px; text-align: center; }
  .bh-footer-right-bottom { padding-top: 12px; }
  .bh-section-services { grid-template-columns: 1fr; }
  .bh-section-header-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .grid-2, .grid-3, .grid-4, .two-col-layout { grid-template-columns: 1fr; }
  .section-inner [style*="grid-template-columns:280px"] { grid-template-columns: 1fr !important; }
  .section-inner [style*="grid-template-columns:1fr 1fr"], .section-inner [style*="grid-template-columns:1fr 2fr"] { grid-template-columns: 1fr !important; }
  .section-inner [style*="padding:0 112px"] { padding: 0 24px !important; }
  .section-inner [style*="repeat(3,1fr)"], .bh-container [style*="repeat(3,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  .two-col-layout.reverse { direction: ltr; }
  .grid-auto { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero-content { padding: 60px 20px 40px; }
  .hero-cards { grid-template-columns: 1fr 1fr; max-width: 100%; }
  .stats-bar-inner { grid-template-columns: repeat(2, 1fr); }
  .stat-item { padding: 20px 16px; }
  .stat-num { font-size: 1.6rem; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .footer-brand { grid-column: span 1; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .partners-grid { grid-template-columns: repeat(2, 1fr); }
  .form-card { padding: 24px 20px; }
  .chat-panel { width: 300px; }
  .page-hero { padding: 60px 20px 40px; }
  .section-header-row { flex-direction: column; align-items: flex-start; }
  .contact-card { text-align: left; }
  .contact-card .contact-icon { margin: 0 0 14px; }
  .rating-number { font-size: 2.5rem; }
}
@media (max-width: 480px) {
  .hero-cards { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .stats-bar-inner { grid-template-columns: 1fr; }
  .bh-services-grid { grid-template-columns: repeat(4, 1fr); gap: 16px 10px; }
  .bh-service-item { font-size: 12px; gap: 8px; }
  .bh-service-icon { width: 40px; height: 40px; font-size: 24px; }
  .section-inner [style*="repeat(3,1fr)"], .bh-container [style*="repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
}

/* ===== ABOUT SECTION (BH style) ===== */
/* About bar background */
.bh-about-bar {
  background: transparent;
  padding: 32px 0 8px;
}
.bh-about-section {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.bh-about-title {
  padding-left: 112px;
}
.bh-about-title .bh-section-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
}
.bh-about-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 112px;
}
.bh-about-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  transition: opacity var(--transition);
}
.bh-about-item:hover { opacity: 0.7; }
.bh-about-icon {
  width: 90px; height: 90px; border-radius: 16px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; color: var(--accent); flex-shrink: 0;
  box-shadow: var(--shadow);
}
.bh-about-icon i {
  -webkit-text-stroke: 1.5px;
  -webkit-text-fill-color: transparent;
}
.bh-about-item span {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  text-align: center;
}
.bh-about-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 320px;
}
.bh-about-logo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px 40px;
  min-height: 100px;
}
.bh-about-logo img { max-height: 85px; width: auto; }
.bh-about-logo-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  text-align: center;
  margin-top: 12px;
}

/* ===== MILESTONES SECTION ===== */
.bh-milestones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 16px 0 32px;
}
.bh-milestone-item {
  flex: 1;
  text-align: center;
  padding: 12px 16px;
}
.bh-milestone-number {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1.1;
  margin-bottom: 8px;
}
.bh-milestone-label {
  font-size: 13px;
  color: var(--gray-500);
  font-weight: 500;
}
.bh-milestone-divider {
  width: 1px;
  height: 60px;
  background: var(--gray-200);
  flex-shrink: 0;
}

/* About & Milestones responsive */
@media (max-width: 1100px) {
  .bh-about-row { gap: 20px; }
  .bh-about-icon { width: 64px; height: 64px; font-size: 26px; }
}
@media (max-width: 768px) {
  .bh-about-row { flex-wrap: wrap; gap: 20px; }
  .bh-about-logo-wrap { width: 100%; }
  .bh-about-logo { padding: 16px; }
  .bh-milestones { flex-wrap: wrap; }
  .bh-milestone-divider { display: none; }
  .bh-milestone-item { flex: 0 0 50%; }
}
@media (max-width: 480px) {
  .bh-about-row { gap: 12px; }
  .bh-about-icon { width: 56px; height: 56px; font-size: 22px; }
  .bh-about-item span { font-size: 12px; }
  .bh-milestone-item { flex: 0 0 50%; }
}

/* =============================================
   MOBILE FIXES (KE2) — comprehensive overrides
   ============================================= */
@media (max-width: 768px) {
  /* HOME — about us & accreditations: padding & wrap */
  .bh-section-about { padding-left: 16px !important; padding-right: 16px !important; }
  .bh-about-bar > .bh-container > div[style*="padding:0 112px"],
  .bh-about-bar > .bh-container > div[style*="padding: 0 112px"] { padding: 0 16px !important; }
  /* Force accreditation cards 1col on mobile */
  .bh-about-bar > .bh-container > div > div[style*="grid-template-columns:repeat(3,1fr)"],
  .bh-about-bar > .bh-container > div > div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* About-us 2col on mobile becomes 1col */
  .bh-about-content[style*="grid-template-columns:1fr 1fr"],
  .bh-about-content[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* SERVICES PAGE — 2 columns on mobile */
  .services-grid,
  div[style*="grid-template-columns:repeat(4,1fr)"][style*="gap:20px"],
  div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* OUR SERVICES SECTION (home) — already 5col, force 3 cols on mobile */
  .bh-services-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }

  /* PACKAGES home carousel — single 100% slide */
  .bh-section-packages .pkg-carousel-wrap, .bh-section-packages .pkg-carousel { overflow: hidden !important; }
  .pkg-img img { height: auto !important; aspect-ratio: 4/3 !important; }

  /* WHY-KE — keep title and icon in row, no force right */
  .why-card, .reason-card {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    padding: 18px !important;
  }
  .why-card .reason-icon, .reason-card .reason-icon { margin-bottom: 12px !important; }
  /* Generic grid cards used on why-ke */
  div[style*="grid-template-columns:repeat(2,1fr)"][style*="gap"] {
    grid-template-columns: 1fr !important;
  }

  /* APPOINTMENTS / JOBS / CONTACT — center submit buttons */
  form button[type="submit"],
  form .submit-btn,
  form .btn-primary {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
  }
  /* Generic file upload area centering */
  .file-upload-label,
  label[for*="cv"], label[for*="file"] {
    text-align: center !important;
    display: block !important;
  }

  #paripurna img,
  #paripurna .award-icon { width: 56px !important; height: 56px !important; flex-shrink: 0 !important; }

  /* GALLERY — grid mobile */
  .gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 12px !important;
  }
  .gallery-item { width: 100% !important; }
  .gallery-item img, .gallery-item video {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4/3 !important;
    object-fit: cover !important;
  }
  .gallery-categories,
  .gallery-tabs {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 12px !important;
  }
  .gallery-categories button, .gallery-tabs button { font-size: 12px !important; padding: 6px 10px !important; }

  /* CONTACT — cards stack & button centered */
  .contact-grid {
    grid-template-columns: 1fr !important;
    padding: 0 12px !important;
  }
  .contact-card { width: 100% !important; }

  /* INSURANCE — center email and phone, phone on new line */
  .insurance-dept-info,
  .insurance-contact {
    text-align: center !important;
  }
  .insurance-dept-info .email,
  .insurance-dept-info .phone,
  .insurance-contact a {
    display: block !important;
    text-align: center !important;
    margin: 4px auto !important;
  }

  /* TEAM PAGES — DIRECTOR & email left aligned */
  .team-role,
  .team-email,
  .team-info,
  div[style*="text-align:center"][style*="DIRECTOR"],
  div[class*="director"] {
    text-align: left !important;
  }
  .team-detail .role,
  .team-detail .email,
  .team-detail h2,
  .team-detail h3 { text-align: left !important; }

  /* VEHICLES — quad/jetski icon color */
  a[href*="quad"] i, a[href*="jetski"] i,
  .bh-service-item[href*="quad"] i,
  .bh-service-item[href*="jetski"] i {
    color: var(--accent) !important;
  }
  .bh-service-icon i { color: var(--accent) !important; }

  /* MOBILE NAV FIXES */
  .mobile-nav .bh-topbar-link,
  .mobile-nav .bh-topbar-right {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    font-size: 11px !important;
  }
  .mobile-nav .bh-topbar-link span { font-size: 11px !important; }
  /* Prevent overlap with phone lines */
  .mobile-nav .bh-topbar { overflow: hidden !important; }
  .mobile-nav .bh-topbar-right { gap: 10px !important; padding: 0 10px !important; }
  /* Nav blue bar (Our Team etc) - prevent wrapping */
  .bh-topbar-link span,
  .bh-topbar-link {
    white-space: nowrap !important;
  }
  /* Mobile nav sub menu items aligned */
  .mobile-nav-sub a { white-space: nowrap !important; }
  .mobile-nav-toggle, .mobile-nav-link { white-space: normal !important; }

  /* FOOTER — privacy policy alignment */
  .bh-footer-bottom,
  .footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: center !important;
  }
  .bh-footer-bottom > *, .footer-bottom > * {
    text-align: center !important;
  }
  .bh-footer-copyright,
  .footer-copyright {
    display: block !important;
  }
  .bh-footer-copyright .all-rights,
  .footer-copyright br { display: block !important; }

  /* PAYMENT page — ensure category sections show their content under their title */
  .payment-category { display: block !important; margin-bottom: 24px !important; }
  .payment-category .payment-detail-content { display: block !important; }

  /* ROOMS — restaurant logos above info card on mobile */
  .partner-restaurants-row {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .partner-restaurants-logos {
    flex-direction: row !important;
    gap: 12px !important;
    justify-content: center !important;
  }

  /* Table layouts mobile */
  table { font-size: 12px !important; }
}

/* Footer alignment ALL screens: privacy policy with copyright + new line for "all rights reserved" */
.bh-footer-bottom,
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.bh-footer-rights, .footer-rights {
  display: block;
  width: 100%;
  margin-top: 4px;
}

/* ============================================================
   MOBILE FIXES v2 — targeted overrides with high specificity
   ============================================================ */
@media (max-width: 768px) {
  /* PACKAGES — mobile 2 columns + reduced padding */
  .packages-pad { padding: 0 14px !important; }
  .bh-container .pkg-grid-3,
  .section-inner .pkg-grid-3,
  div.pkg-grid-3,
  .pkg-grid-3[style*="repeat(3,1fr)"] { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  /* Packages page: info cards stacked one under the other */
  .packages-info-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .packages-info-grid > div {
    flex-direction: column !important;
    align-items: center !important;
    padding: 14px 6px !important;
  }
  .packages-info-grid > div > div[style*="flex:1"] {
    width: 100% !important;
    text-align: center !important;
  }
  section[style*="padding:32px 0 40px"] { padding-top: 12px !important; padding-bottom: 12px !important; }
  section[style*="padding:40px 0"] { padding-bottom: 12px !important; }
  .packages-info-grid > div .btn-sm {
    margin-top: 10px !important;
    width: auto !important;
    align-self: center !important;
    justify-content: center !important;
  }
  .pkg-card { min-width: 0 !important; max-width: 100% !important; flex: 0 0 100% !important; }
  .pkg-img { aspect-ratio: 4/3 !important; }
  .pkg-body h3 { font-size: 14px !important; }
  .pkg-actions { flex-direction: column !important; gap: 6px !important; }
  .pkg-actions a { font-size: 12px !important; padding: 7px 10px !important; }

  /* HOME — about us section: padding reduce */
  .bh-section-about,
  section.bh-about-bar,
  .bh-about-bar {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .bh-section-about > .bh-container,
  .bh-about-bar > .bh-container {
    padding: 0 !important;
  }
  /* Inline padding overrides */
  .bh-container[style*="padding:0 112px"],
  .bh-container[style*="padding: 0 112px"],
  div[style*="padding:0 112px"],
  div[style*="padding: 0 112px"] {
    padding: 0 14px !important;
  }
  /* Section-inner with desktop padding */
  .section-inner[style*="padding:0 112px"],
  .section-inner[style*="padding: 0 112px"] {
    padding: 0 14px !important;
  }

  /* HOME — health packages on home: 2 cards visible carousel */
  .bh-section-packages .pkg-carousel-inner { gap: 12px !important; }
  .bh-section-packages .pkg-card { font-size: 12px !important; }
  .bh-section-packages .pkg-body h3 { font-size: 13px !important; }
  .bh-section-packages .pkg-actions { flex-direction: column !important; gap: 6px !important; }
  .bh-section-packages .pkg-actions a { font-size: 11px !important; padding: 6px 8px !important; }

  /* WHY-KE — single column mobile, compact cards */
  .why-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 14px !important;
  }
  .why-grid > div {
    padding: 16px !important;
  }
  .why-grid > div > div {
    gap: 12px !important;
  }
  .why-grid h3 {
    font-size: 1rem !important;
    margin-bottom: 4px !important;
  }
  .why-grid p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .why-grid > div > div > div:first-child {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
  }
  .why-grid > div > div > div:first-child i {
    font-size: 20px !important;
  }

  /* ACCREDITATIONS - reduce padding around PARIPURNA card */
  #paripurna {
    padding: 14px 20px !important;
    margin-bottom: 12px !important;
  }

  /* ACCREDITATIONS - awards.html: stack logo above text on mobile */
  #paripurna > div[style*="display:flex"],
  [id="10k"] > div[style*="display:flex"],
  [id="15k"] > div[style*="display:flex"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  #paripurna > div[style*="display:flex"] > div,
  [id="10k"] > div[style*="display:flex"] > div,
  [id="15k"] > div[style*="display:flex"] > div {
    width: 100% !important;
    text-align: left !important;
  }
  #paripurna img[alt="Ministry of Health"],
  #paripurna img {
    width: 110px !important;
    height: 110px !important;
    flex-shrink: 0 !important;
  }
  [id="10k"] > div > div:first-child,
  [id="15k"] > div > div:first-child {
    width: 56px !important;
    height: 56px !important;
    flex-shrink: 0 !important;
  }
  #paripurna h2 {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
  }
  /* Home accreditation card */
  a[href*="paripurna"] img,
  a[href*="awards.html"] img[alt="Ministry of Health"] {
    width: 48px !important;
    height: 48px !important;
  }
  a[href*="paripurna"] h3 { font-size: 13px !important; }
  a[href*="paripurna"] p { font-size: 11px !important; }

  /* JOBS — center "attach your CV" upload area */
  .jobs-form .upload-area,
  form .upload-area,
  form .file-upload,
  form input[type="file"] + label,
  label[for*="cv"], label[for*="file"], label[for*="resume"] {
    text-align: center !important;
    margin: 0 auto !important;
    display: block !important;
  }
  /* Generic centering for form labels and inputs */
  form .file-upload-area,
  div[class*="upload"] { text-align: center !important; }

  /* GALLERY — fix image cropping & categories */
  .gallery-grid,
  .gallery-items,
  div[id="galleryGrid"],
  div[class*="gallery-grid"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 12px !important;
  }
  .gallery-item {
    aspect-ratio: 1/1 !important;
    width: 100% !important;
  }
  .gallery-item img,
  .gallery-grid img,
  div[class*="gallery"] img,
  div[class*="gallery"] video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  /* Gallery tabs filter — wrap on mobile */
  #galleryTabs,
  .tabs#galleryTabs {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 0 8px 0 8px !important;
    border-bottom: none !important;
  }
  #galleryTabs .tab-btn,
  .tabs#galleryTabs .tab-btn {
    font-size: 12px !important;
    padding: 6px 10px !important;
    flex: 0 0 auto !important;
  }
  /* Gallery categories filter buttons */
  .gallery-categories,
  .gallery-tabs,
  .gallery-filters,
  div[class*="filter"][class*="categor"],
  .filter-btn,
  div[class*="gallery"] > div:first-child {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 12px !important;
  }
  .gallery-categories button,
  .gallery-tabs button,
  .filter-btn,
  .gallery-categories a,
  .gallery-categories div { font-size: 11px !important; padding: 5px 8px !important; }

  /* CONTACT — cards 1 column on phone, no white space */
  .contact-cards-grid,
  .contact-grid,
  .contact-cards,
  div[class*="contact-row"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 14px !important;
    max-width: 100% !important;
  }
  .contact-cards-grid > .card,
  .contact-cards-grid > div {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px !important;
  }
  .contact-card,
  .contact-info-card {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px !important;
  }

  /* INSURANCE — center email and phone in INSURANCE DEPARTMENT section */
  .insurance-dept,
  .insurance-department,
  div[class*="insurance"][class*="dept"] {
    text-align: center !important;
  }
  .insurance-dept a,
  .insurance-dept .email,
  .insurance-dept .phone,
  .insurance-department a {
    display: block !important;
    text-align: center !important;
    margin: 4px auto !important;
  }

  /* TEAM PAGES — left-align all team text including role and email */
  .team-detail-info,
  .team-info,
  .team-bio,
  div[class*="team-detail"],
  .team-info h3,
  .team-info p,
  .team-card .team-info,
  .team-card .team-info h3,
  .team-card .team-info p {
    text-align: left !important;
  }
  .team-info h3 { min-height: 0 !important; }
  .team-role, .team-email,
  .doctor-name, .doctor-title,
  div[class*="team"] [class*="role"],
  div[class*="team"] [class*="email"] {
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  /* Generic team page: any centered text in team-related divs */
  body[class*="team"] [style*="text-align:center"],
  body[class*="team"] [style*="text-align: center"] {
    text-align: left !important;
  }

  /* MOBILE NAV — fix overlap of EMERGENCY/SAR with INSURANCE DEPT phone numbers */
  .mobile-nav .bh-nav-phone-wrap {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .mobile-nav .bh-nav-phone-info {
    width: 100% !important;
  }
  .mobile-nav .bh-nav-phone-sep { display: none !important; }
  .mobile-nav .bh-nav-phone {
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  .mobile-nav .bh-nav-phone-label {
    font-size: 9px !important;
    letter-spacing: 0.04em !important;
  }
  /* OUR TEAM topbar link: keep on one line */
  .mobile-nav .bh-topbar-link span,
  .mobile-nav .bh-topbar-link {
    white-space: nowrap !important;
    font-size: 10px !important;
  }
  .mobile-nav .bh-topbar-right {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
  }

}

/* ============================================================
   MOBILE FIXES v3 — comprehensive overrides (portrait mobile)
   ============================================================ */
@media (max-width: 768px) {

  /* HOME — about-us row: center icons so they align evenly when wrapping */
  .bh-about-row {
    justify-content: center !important;
    gap: 12px !important;
    padding: 0 12px !important;
  }
  .bh-about-item {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 64px !important;
    align-items: center !important;
  }
  .bh-about-icon {
    width: 64px !important;
    height: 64px !important;
    font-size: 26px !important;
  }
  .bh-about-item span {
    font-size: 11px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .bh-about-logo-wrap {
    width: 100% !important;
    max-width: 260px !important;
    margin: 0 auto !important;
  }

  /* HOME — health packages: mobile carousel, 1 card at a time */
  .bh-section-packages .pkg-carousel-wrap {
    padding: 0 36px !important;
    overflow: visible !important;
  }
  .bh-section-packages .pkg-carousel {
    overflow: hidden !important;
  }
  .bh-section-packages .pkg-carousel-inner {
    display: flex !important;
    gap: 20px !important;
    width: max-content !important;
  }
  .bh-section-packages .pkg-card {
    flex: 0 0 auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .bh-section-packages .pkg-arrow { display: flex !important; }
  .bh-section-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
  }

  /* WHY-KE — outer 2-col grid to single column + fix inner icon layout */
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Keep the icon+text row inside why-ke cards */
  div[style*="display:flex"][style*="align-items:flex-start"][style*="gap:16px"] {
    flex-direction: row !important;
    align-items: flex-start !important;
  }

  /* CONTACT — grid repeat(2,1fr) → single column */
  div[style*="grid-template-columns:repeat(2,1fr)"],
  div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* TEAM PAGES — profile grid 280px 1fr → single column, photo centered */
  div[style*="grid-template-columns:280px 1fr"],
  div[style*="grid-template-columns: 280px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  div[style*="grid-template-columns:280px 1fr"] > div:first-child,
  div[style*="grid-template-columns: 280px 1fr"] > div:first-child {
    width: 180px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    justify-self: center !important;
    aspect-ratio: 1/1 !important;
  }
  /* Team text: left-align all */
  div[style*="grid-template-columns:280px 1fr"] > div:last-child,
  div[style*="grid-template-columns: 280px 1fr"] > div:last-child {
    text-align: left !important;
  }
  div[style*="grid-template-columns:280px 1fr"] .doctor-name,
  div[style*="grid-template-columns:280px 1fr"] .doctor-title,
  div[style*="grid-template-columns: 280px 1fr"] .doctor-name,
  div[style*="grid-template-columns: 280px 1fr"] .doctor-title {
    text-align: left !important;
  }

  /* ACCREDITATIONS (awards.html) — inner 2-col checkmarks grid → single col */
  #paripurna div[style*="grid-template-columns:1fr 1fr"],
  [id="10k"] div[style*="grid-template-columns:1fr 1fr"],
  [id="15k"] div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  /* GALLERY — fix .tabs and .tab-btn (gallery filter tabs) */
  .tabs,
  #galleryTabs {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 8px !important;
    border-bottom: none !important;
    margin-bottom: 20px !important;
    overflow-x: visible !important;
  }
  .tab-btn {
    font-size: 12px !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
    border: 1.5px solid var(--gray-200) !important;
    border-radius: 20px !important;
    background: #fff !important;
    color: var(--primary) !important;
  }
  .tab-btn.active,
  .tab-btn:active {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
  }
  /* Gallery images: 2-col grid, square aspect */
  .gallery-grid,
  #galleryGrid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 8px !important;
  }
  .gallery-item {
    width: 100% !important;
    aspect-ratio: 1/1 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }
  .gallery-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 1/1 !important;
  }

  /* JOBS — center CV attachment paragraph */
  .cv-attach-note {
    text-align: center !important;
  }

  /* PACKAGES page — info cards (Custom Package + Important Notes) stack vertically */
  .packages-info-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* MOBILE NAV — fix EMERGENCY/SAR and INSURANCE overlap */
  .mobile-nav .mobile-nav-navbar {
    flex-wrap: wrap !important;
    padding: 8px 12px !important;
  }
  .mobile-nav .mobile-nav-navbar .bh-nav-logo {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: 140px !important;
  }
  .mobile-nav .mobile-nav-navbar .bh-nav-right {
    flex-shrink: 0 !important;
  }
  .mobile-nav-dp {
    padding: 0 0 10px;
  }
  .mobile-nav .mobile-nav-navbar > .bh-nav-phone-wrap {
    order: 3 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    padding: 6px 0 2px !important;
    border-top: none !important;
    border-left: none !important;
    flex-wrap: nowrap !important;
  }
  .mobile-nav .mobile-nav-navbar .bh-nav-phone-info {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .mobile-nav .mobile-nav-navbar .bh-nav-phone-sep {
    display: none !important;
  }
  .mobile-nav .mobile-nav-navbar .bh-nav-phone-label {
    font-size: 10px !important;
    letter-spacing: 0.05em !important;
    display: block !important;
    color: var(--accent) !important;
  }
  .mobile-nav .mobile-nav-navbar .bh-nav-phone {
    font-size: 12px !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* VEHICLES — icon sizing handled inline in vehicles.html via mask approach */

  /* OUR-TEAM grid — 2 cards per row on mobile */
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

}

/* ============================================================
   MOBILE FIXES v4 — targeted overrides
   ============================================================ */
@media (max-width: 768px) {
  /* HOME — package carousel: all cards visible, clipped by overflow:hidden */
  .bh-section-packages .pkg-card:nth-child(n+3) { display: block !important; }
  .bh-section-packages .pkg-carousel { overflow: hidden !important; }

  /* VEHICLES — fix icon sizes for custom PNG icons */
  div[role="img"][aria-label="Quad"] {
    height: 3rem !important;
    width: 3rem !important;
  }
  div[role="img"][aria-label="Jetski"] {
    height: 2rem !important;
    width: 3.5rem !important;
  }
}

/* ============================================================
   MOBILE FIXES v5 — portrait mobile overrides
   ============================================================ */
@media (max-width: 768px) {

  /* HOME — About Us: prevent "Patient Stories" label from wrapping */
  .bh-about-item span { white-space: nowrap !important; }

  /* CONTACT — horizontal card layout: icon left, text right */
  .contact-cards-grid .card-body {
    display: grid !important;
    grid-template-columns: 50px 1fr !important;
    gap: 0 12px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .contact-cards-grid .card-body .card-icon {
    grid-row: 1 / -1 !important;
    margin-bottom: 0 !important;
    align-self: start !important;
  }
  .contact-cards-grid .card-body > *:not(.card-icon) {
    grid-column: 2 !important;
  }
  .contact-cards-grid .card-body h3 {
    margin-bottom: 4px !important;
  }
  .contact-cards-grid .card-body p {
    margin-bottom: 2px !important;
    margin-top: 2px !important;
    line-height: 1.4 !important;
  }

  /* TEAM PAGES — Director/email badges: remove indent, align with other text */
  div[style*="grid-template-columns:280px 1fr"] > div:last-child .badge,
  div[style*="grid-template-columns: 280px 1fr"] > div:last-child .badge {
    padding-left: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    color: var(--primary) !important;
    font-size: 12px !important;
  }
}

@media (max-width: 480px) {
  .bh-about-row { gap: 10px !important; }
  .bh-about-item { width: auto !important; }
  .bh-about-icon { width: 60px !important; height: 60px !important; font-size: 22px !important; }

  /* Team photo smaller on very small screens */
  div[style*="grid-template-columns:280px 1fr"] > div:first-child,
  div[style*="grid-template-columns: 280px 1fr"] > div:first-child {
    width: 140px !important;
    justify-self: center !important;
  }
}

@media (max-width: 768px) {
  /* FOOTER — privacy policy + copyright on same line, "all rights reserved" wraps */
  .bh-footer-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center !important;
  }
  .bh-footer-links a, .bh-footer-links span {
    font-size: 12px !important;
  }
  .bh-footer-rights {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 4px !important;
    font-size: 12px !important;
  }
  .bh-copyright {
    display: inline !important;
    text-align: center !important;
  }
}


/* ============================================================
   MOBILE FIXES v6 — accreditations, contact, gallery
   ============================================================ */
@media (max-width: 768px) {

  /* ACCREDITATIONS — reduce section top/bottom padding */
  section[style*="padding:32px 0 48px"] {
    padding-top: 12px !important;
    padding-bottom: 16px !important;
  }
  /* Reduce card padding and gap between logo and text */
  #paripurna {
    padding: 12px 16px !important;
  }
  #paripurna > div[style*="display:flex"],
  [id="10k"] > div[style*="display:flex"],
  [id="15k"] > div[style*="display:flex"] {
    gap: 8px !important;
  }

  /* CONTACT — reduce section-header bottom margin */
  .section-header {
    margin-bottom: 20px !important;
  }
  .section-header h2 {
    margin-bottom: 6px !important;
  }
  .section-header .divider {
    margin: 8px auto !important;
  }
  .section-header p {
    margin-bottom: 0 !important;
  }

}

/* ============================================================
   CONTACT — desktop: replicate mobile horizontal layout
   (icon at left, title + content stacked on right)
   ============================================================ */
@media (min-width: 769px) {
  .contact-cards-grid .card-body {
    display: grid !important;
    grid-template-columns: 56px 1fr !important;
    gap: 0 14px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    align-items: start !important;
  }
  .contact-cards-grid .card-body .card-icon {
    grid-row: 1 / -1 !important;
    margin-bottom: 0 !important;
    align-self: start !important;
  }
  .contact-cards-grid .card-body > *:not(.card-icon) {
    grid-column: 2 !important;
  }
  .contact-cards-grid .card-body h3 {
    margin-bottom: 6px !important;
  }
  .contact-cards-grid .card-body p {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    line-height: 1.5 !important;
  }
}

/* ============================================================
   FOOTER — mobile: center "About Us" heading and 2-col list
   to match desktop styling
   ============================================================ */
@media (max-width: 768px) {
  .bh-footer-col--wide h5 { text-align: center !important; }
  .bh-footer-col--wide .bh-footer-2col { justify-content: center !important; }
}

/* ============================================================
   NAVBAR — hide desktop Digital Payments CTA on mobile/tablet,
   keep it only inside the slide-out mobile menu
   ============================================================ */
@media (max-width: 1024px) {
  .bh-navbar .bh-nav-right > .bh-nav-cta { display: none !important; }
}