/* ==========================================================================
   موقع المداواة — Mdawa Hospital
   Master stylesheet — RTL-first Arabic, Bootstrap 4.6.2 ORIGINAL
   ========================================================================== */

/* ==========================================================================
   1. CSS Variables — Design Tokens
   ========================================================================== */

:root,
[data-theme="light"] {
  /* Surfaces */
  --bg-canvas:       #ffffff;
  --bg-surface:      #f4f5f8;
  --bg-chrome:       #f8f9fa;
  --bg-ice:          #f5f7f9;
  --bg-frost:        #f6f6f6;
  --bg-mist:         #f3f3f3;
  --bg-soft:         #f4f5f8;

  /* Text */
  --text-primary:    #14364c;
  --text-body:       #5d6b72;
  --text-muted:      #707070;
  --text-soft:       #7d7d7d;
  --text-faint:      #898989;
  --text-on-brand:   #ffffff;
  --text-900:        #1a1a1a;

  /* Borders */
  --border-hair:     #939393;
  --border-input:    #bcbcbc;
  --border-card:     #aeaeae;

  /* Brand */
  --brand-navy:      #14364c;
  --brand-navy-dark: #00243a;
  --brand-blue:      #2a74b1;
  --brand-blue-alt:  #2272b1;
  --accent-green:    #4c953c;
  --accent-teal:     #257ca5;

  /* Form inputs */
  --input-bg:        #ffffff;
  --input-text:      #14364c;

  /* Shadows */
  --shadow-card:     0 0 14px 0 rgba(0, 0, 0, 0.25);
  --shadow-search:   0 0 13px 0 rgba(0, 0, 0, 0.25);
  --shadow-specialty:0 4px 4px 0 rgba(0, 0, 0, 0.25);
  --shadow-appt:     0 0 10px 6px rgba(0, 0, 0, 0.08);
  --shadow-ink:      rgba(0, 0, 0, 0.25);
  --shadow-soft:     rgba(0, 0, 0, 0.08);
  --overlay-hero:    rgba(0, 0, 0, 0.6);
  --overlay-grey-57: rgba(15, 15, 15, 0.57);

  /* Radii */
  --r-xs:    2px;
  --r-sm:    5px;
  --r-md:   10px;
  --r-lg:   20px;
  --r-xl:   24px;
  --r-2xl:  29px;
  --r-3xl:  30px;
  --r-4xl:  32px;
  --r-pill:    100px;
  --r-pill-lg: 200px;

  /* Layout */
  --canvas-width:   1440px;
  --content-width:  1270px;
  --rail-width:       60px;
  --utility-h:        40px;
  --navbar-h:        100px;
  --navbar-h-stuck:   70px;
  --page-title-h:     80px;
  --footer-h:        490px;

  /* Fonts */
  --font-neo:   'Neo Sans Arabic', 'Tahoma', sans-serif;
  --font-bukra: '29LT Bukra', 'Tahoma', sans-serif;
  --font-bahij: 'Bahij TheSansArabic', 'Tahoma', sans-serif;
  --font-inter: 'Inter', sans-serif;
}

html[data-theme="dark"] {
  --bg-canvas:       #0b1a28;
  --bg-surface:      #14364c;
  --bg-chrome:       #102434;
  --bg-ice:          #153349;
  --bg-frost:        #0e2535;
  --bg-mist:         #0e2535;
  --bg-soft:         #14364c;

  --text-primary:    #ffffff;
  --text-body:       #c9c9c9;
  --text-muted:      #898989;
  --text-soft:       #979797;
  --text-faint:      #707070;
  --text-on-brand:   #ffffff;
  --text-900:        #ffffff;

  --border-hair:     #2a3e4f;
  --border-input:    #425563;
  --border-card:     #2a3e4f;

  --brand-navy:      #ffffff;
  --brand-navy-dark: #0b1a28;
  --brand-blue:      #2a74b1;
  --brand-blue-alt:  #3a8cc9;
  --accent-green:    #4c953c;
  --accent-teal:     #257ca5;

  --input-bg:        #102434;
  --input-text:      #ffffff;

  --shadow-card:     0 0 14px 0 rgba(0, 0, 0, 0.6);
  --shadow-search:   0 0 13px 0 rgba(0, 0, 0, 0.55);
  --shadow-specialty:0 4px 4px 0 rgba(0, 0, 0, 0.55);
  --shadow-appt:     0 0 10px 6px rgba(0, 0, 0, 0.35);
  --shadow-ink:      rgba(0, 0, 0, 0.55);
  --shadow-soft:     rgba(0, 0, 0, 0.35);
  --overlay-hero:    rgba(0, 0, 0, 0.75);
  --overlay-grey-57: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   2. Reset / Normalize
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  transition: background-color 300ms ease, color 300ms ease;
  overflow-x: clip;
}
body { overflow-x: clip; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-neo);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
  background-color: var(--bg-canvas);
  text-align: start;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
body * {
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1rem;
  font-family: var(--font-neo);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

p {
  margin: 0 0 1rem;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 250ms ease;
}

a:hover,
a:focus {
  color: var(--brand-blue);
  text-decoration: none;
  outline: none;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: transparent;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

::selection {
  background: var(--brand-blue);
  color: #fff;
}

/* ==========================================================================
   3. Font Face declarations
   ========================================================================== */

/* Neo Sans Arabic — single TTF file covers 400–700 (browser synthesizes bold). */
@font-face {
  font-family: 'Neo Sans Arabic';
  src: url('../fonts/NeoSansArabicr.ttf') format('truetype');
  font-weight: 400 ;
  font-style: normal;
  font-display: swap;
}@font-face {
  font-family: 'Neo Sans Arabic';
  src: url('../fonts/NeoSansArabic.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 29LT Bukra — full family, .ttf preferred over .otf for browser compatibility */
@font-face {
  font-family: '29LT Bukra';
  src: url('../fonts/29ltbukra/29ltbukralight.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: '29LT Bukra';
  src: url('../fonts/29ltbukra/29ltbukraregular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: '29LT Bukra';
  src: url('../fonts/29ltbukra/29ltbukrabold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: '29LT Bukra';
  src: url('../fonts/29ltbukra/29ltbukrabolditalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Bahij TheSansArabic — Bold only (used on contact submit button per design) */
@font-face {
  font-family: 'Bahij TheSansArabic';
  src: url('../fonts/Bahij_TheSansArabic-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   4. Bootstrap 4 physical → logical overrides (RTL)
   ========================================================================== */

[dir="rtl"] .text-left  { text-align: start !important; }
[dir="rtl"] .text-right { text-align: end !important; }
[dir="rtl"] .float-left  { float: inline-start !important; }
[dir="rtl"] .float-right { float: inline-end !important; }

/* Ban Bootstrap physical margin/padding utilities by making them silent no-ops
   in RTL context. Use BEM classes with logical properties instead. */
[dir="rtl"] .ml-auto { margin-inline-start: auto !important; margin-left: 0 !important; }
[dir="rtl"] .mr-auto { margin-inline-end: auto !important; margin-right: 0 !important; }

/* ==========================================================================
   5. Layout primitives — container, rails, sections
   ========================================================================== */

.container,
.container-fluid {
  max-width: var(--content-width);
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding-inline-start: 15px;
  padding-inline-end: 15px;
}

.site-wrap {
  position: relative;
  width: 100%;
  background: var(--bg-canvas);
}

.section {
  position: relative;
  padding-block: 60px;
}

.section__heading {
  font-family: var(--font-neo);
  font-weight: 700;
  font-size: 28px;
  color: var(--text-primary);
  margin: 0 0 30px;
  text-align: center;
}

/* ==========================================================================
   6. Top Utility Strip
   ========================================================================== */

.top-bar {
  position: relative;
  height: var(--utility-h);
  background: var(--bg-chrome);
  border-block-start: 0.5px solid var(--border-hair);
  display: flex;
  align-items: center;
  padding-inline-start: 100px;
  padding-inline-end: 100px;
  font-size: 12.8px;
  line-height: 28.8px;
  color: var(--text-faint);
  z-index: 10;
}

.top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.top-bar__menu {
  display: flex;
  gap: 20px;
  font-family: var(--font-neo);
  font-weight: 400;
  font-size: 14px;
  color: var(--text-body);
}

.top-bar__menu a:hover { color: var(--brand-blue); }

.top-bar__socials {
  display: flex;
  align-items: center;
  gap: 7px;
}

.top-bar__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23.244px;
  height: 23.244px;
  border-radius: 50%;
  background-color: #E6E8EB;
  color: #6E8A9E;
  font-size: 11px;
  text-decoration: none;
  transition: opacity 200ms ease, background-color 200ms ease;
}

.top-bar__social-link:hover { opacity: 0.8; }

.top-bar__social-link img,
.top-bar__social-link svg { width: 100%; height: 100%; }

.top-bar__lang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-neo);
  font-weight: 700;
  font-size: 12.8px;
  color: var(--text-faint);
  cursor: pointer;
  transition: color 200ms ease, transform 200ms ease, opacity 200ms ease;
}
.top-bar__lang:hover { color: var(--brand-blue); transform: translateY(-1px); }
.top-bar__lang:active { transform: translateY(0); }

.top-bar__lang-icon {
  width: 27px;
  height: 27px;
}

.top-bar__end {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ==========================================================================
   7. Main Navbar
   ========================================================================== */
.end-nav{
  display: flex;
  align-items: center;
  gap: 10px;
}
.navbar {
  position: sticky;
  top: 0;
  height: var(--navbar-h);
  background: var(--bg-canvas);
  border-block-end: 1px solid var(--border-hair);
  display: flex;
  align-items: center;
  padding-inline-start: 100px;
  padding-inline-end: 100px;
  z-index: 20;
  transition: height 300ms ease, box-shadow 300ms ease, background-color 300ms ease;
}

.navbar.is-stuck {
   box-shadow: var(--shadow-card);
  border-block-end: none;
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
}

.navbar__brand {
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.navbar__logo {
  width: 68px;
  height: 71px;
  max-width: none;
  display: block;
  object-fit: contain;
}

.navbar__menu {
  display: flex;
  gap: 34px;
  align-items: center;
  margin: 0;
  margin-inline-end: auto;
  margin-inline-start: 10px;
}

/* NavWalker-output classes (must stay verbatim) */
.sub-list.depth-0 {
  display: flex;
  gap: 34px;
  align-items: center;
}

.sub-list .link {
  position: relative;
  padding: 0;
}

.sub-list .link > a {
  font-family: var(--font-neo);
  font-weight: 400;
  font-size: 14px;
  color: #000;
  line-height: 80px;
  display: inline-block;
  white-space: nowrap;
  transition: color 250ms ease;
}

[data-theme="dark"] .sub-list .link > a { color: #fff; }

.sub-list .link > a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0px;
  height: 2px;
  width: 100%;
  background: var(--brand-blue);
  transform: scaleX(0);
   transition: transform 250ms ease;
}

.sub-list .link:hover > a::after,
.sub-list .link.active > a::after {
  transform: scaleX(1);
 }

.sub-list .link:hover > a,
.sub-list .link.active > a {
  color: var(--brand-blue);
}

.sub-list .has_sub_menu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Desktop nav dropdown (submenu) ---------- */
.sub-list .link.has-dropdown { position: relative; }
.sub-list .link .nav-caret {
  font-size: 11px;
  margin-inline-start: 5px;
  transition: transform .25s ease;
}
.sub-list .link.has-dropdown:hover .nav-caret { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 240px;
  margin: 0;
  padding: 8px 0;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border-hair, #eee);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .13);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 400;
  max-height: 72vh;
  overflow-y: auto;
}
.sub-list .link.has-dropdown:hover .nav-dropdown,
.sub-list .link.has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown li { padding: 0; }
.nav-dropdown li > a {
  display: block;
  padding: 10px 18px;
  font-family: var(--font-neo);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary, #111);
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.nav-dropdown li > a:hover {
  background: var(--bg-soft, #f4f7fb);
  color: var(--brand-blue);
}
[data-theme="dark"] .nav-dropdown { background: #102434; border-color: rgba(255, 255, 255, .08); }
[data-theme="dark"] .nav-dropdown li > a { color: #fff; }
[data-theme="dark"] .nav-dropdown li > a:hover { background: rgba(42, 116, 177, .22); }

/* ---------- Mobile nav accordion (submenu) ---------- */
.mobile-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mobile-nav__row > a { flex: 1; }
.mobile-nav__sub-toggle {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 18px;
  transition: transform .25s ease;
}
.mobile-nav__sub-toggle.is-open { transform: rotate(180deg); }
.mobile-nav__sub {
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  transition: max-height .32s ease;
}
.mobile-nav__sub.is-open { max-height: 1200px; }
.mobile-nav__menu .mobile-nav__sub li { border-block-end: none; }
.mobile-nav__sub li > a {
  display: block;
  padding: 12px 0;
  padding-inline-start: 14px;
  font-family: var(--font-neo);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-body, #556);
  text-decoration: none;
}
.mobile-nav__sub li > a::before {
  content: "•";
  margin-inline-end: 9px;
  color: var(--brand-blue);
}
.mobile-nav__sub li > a:hover { color: var(--brand-blue); }

.navbar__actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ---------- Hamburger toggle (hidden on desktop) ---------- */
.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background-color 200ms ease;
}
.navbar__toggle:hover { background: var(--bg-soft); }
.navbar__toggle-icon {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 250ms ease, opacity 250ms ease;
}
.navbar__toggle.is-open .navbar__toggle-icon:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar__toggle.is-open .navbar__toggle-icon:nth-child(2) { opacity: 0; }
.navbar__toggle.is-open .navbar__toggle-icon:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Mobile nav overlay ---------- */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg-canvas);
  flex-direction: column;
  overflow-y: auto;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav__inner {
  display: flex;
  flex-direction: column;
  padding: 16px 20px 40px;
  min-height: 100%;
}
.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 24px;
  padding-block: 8px;
}
.mobile-nav__logo { width: 44px; height: 44px; }
.mobile-nav__close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  border: none;
  border-radius: 50%;
  font-size: 18px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 200ms ease;
}
.mobile-nav__close:hover { background: var(--border-soft); }
.mobile-nav__menu { flex: 1; }
.mobile-nav__menu ul { padding: 0; margin: 0; list-style: none; }
.mobile-nav__menu li { border-block-end: 1px solid var(--border-hair); }
.mobile-nav__menu a {
  display: block;
  padding: 16px 0;
  font-family: var(--font-neo);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
}
.mobile-nav__menu a:active,
.mobile-nav__menu a:hover { color: var(--brand-blue); }
.mobile-nav__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-block-start: 32px;
}
.mobile-nav__actions .btn-pill {
  display: block;
  text-align: center;
  padding: 13px 20px;
  width: 100%;
}
body.nav-open { overflow: hidden; }

/* ==========================================================================
   8. Theme Toggle (dark/light buttons in navbar)
   ========================================================================== */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.theme-toggle__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: 0;
  opacity: 0.4;
  transition: opacity 250ms ease, background-color 250ms ease, transform 250ms ease;
  color: var(--text-primary);
}

.theme-toggle__btn:hover {
  opacity: 0.8;
  transform: scale(1.05);
}

.theme-toggle__btn--active {
  opacity: 1;
}

.theme-toggle__btn--moon.theme-toggle__btn--active {
  background-color: #14364C;
  color: #ffffff;
}

.theme-toggle__btn--sun {
  color: #F5A623;
}

.theme-toggle__btn--sun.theme-toggle__btn--active {
  background-color: #E9E9E9;
}

.theme-toggle__btn svg,
.theme-toggle__btn img {
  width: 22.453px;
  height: 22.453px;
}

/* شكل الهلال — عربي (rtl) والعكس المقابل في الإنجليزي (ltr) */
.theme-toggle__btn--moon svg { transform: rotate(50deg); }
html[dir="ltr"] .theme-toggle__btn--moon svg { transform: rotate(235deg); }

/* ==========================================================================
   9. Primary CTA pill (buttons, repeated across the site)
   ========================================================================== */

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding-inline-start: 24px;
  padding-inline-end: 24px;
  border-radius: var(--r-pill);
  background: var(--brand-blue);
  color: #fff;
  font-family: var(--font-neo);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  transition: background-color 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              color 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.btn-pill:hover {
  background: var(--brand-navy);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -10px rgba(20, 54, 76, 0.5),
              0 4px 10px -6px rgba(20, 54, 76, 0.35);
}

.btn-pill:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -6px rgba(20, 54, 76, 0.4);
  transition-duration: 80ms;
}

.btn-pill:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-pill { transition: background-color 250ms ease; }
  .btn-pill:hover, .btn-pill:active { transform: none; }
}

.btn-pill--nav {
  width: 150px;
  font-size: 18px;
}

.btn-pill--hero {
  width: max-content;
  font-size: 14px;
  border-radius: var(--r-pill-lg);
  padding-inline-end: 0;
  padding-inline-start: 20px;
  gap: 12px;
  justify-content: space-between;
}

.btn-pill--hero .btn-pill__arrow {
  width: 50px;
  height: 50px;
  border-radius: var(--r-2xl);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: 0;
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1), background-color 260ms ease;
}

.btn-pill--hero:hover .btn-pill__arrow {
  transform: translateX(-5px);
}

@media (prefers-reduced-motion: reduce) {
  .btn-pill--hero:hover .btn-pill__arrow { transform: none; }
}

.btn-pill__arrow svg,
.btn-pill__arrow i {
 }

/* ==========================================================================
   English (LTR) direction fixes
   "forward / more" arrows are drawn as fa-arrow-left (correct for Arabic RTL);
   flip them to point right in English, and mirror the hover nudge.
   ========================================================================== */
html[dir="ltr"] .btn-pill__arrow i,
html[dir="ltr"] .icon-flip,
html[dir="ltr"] .award-card__more i,
html[dir="ltr"] .blog-card__more i,
html[dir="ltr"] .stories__item-more i,
html[dir="ltr"] .stories__more i,
html[dir="ltr"] .dept-doc__link i {
  transform: scaleX(-1);
  display: inline-block;
}
html[dir="ltr"] .btn-pill--hero:hover .btn-pill__arrow {
  transform: translateX(5px);
}
/* Search button: icon comes AFTER the word in English */
html[dir="ltr"] .hero-search__btn {
  flex-direction: row-reverse;
}

/* ==========================================================================
   10. Footer
   ========================================================================== */

.site-footer {
  position: relative;
  min-height: var(--footer-h);
  background: var(--bg-soft);
  padding-block-start: 60px;
  padding-block-end: 0;
  color: var(--text-body);
  /* Contain the AOS translate offset so footer reveals don't add page height
     (prevents the "whole site shifts up from the bottom" jump). */
  overflow: hidden;
}

/* Gentler rise for footer items (individual elements ease in, not big blocks).
   Excludes social links so their hover lift keeps working without conflict. */
.site-footer [data-aos="fade-up"]:not(.site-footer__social-link) { transform: translate3d(0, 26px, 0); }
.site-footer [data-aos="fade-up"]:not(.site-footer__social-link).aos-animate { transform: translate3d(0, 0, 0); }

[data-theme="dark"] .site-footer { background: #0b1a28; }

.site-footer__grid {
  display: grid;
  grid-template-columns:2fr 2fr 2fr 2fr;
  gap: 40px;
  padding-block-end: 40px;
  align-items: flex-start;
}

.site-footer__col-title {
  font-family: var(--font-neo);
  font-weight: 700;
  font-size: 24px;
  color: var(--brand-blue);
  margin: 0 0 16px;
  letter-spacing: -0.48px;
}

/* Contact info items */
.site-footer__contact-item {
  display: flex;
  flex-direction: column;
  margin-block-end: 14px;
}
.site-footer__contact-label {
  font-family: var(--font-neo);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-primary);
  line-height: 28px;
  letter-spacing: 0.18px;
}
.site-footer__contact-value {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.7;
  letter-spacing: -0.28px;
  text-decoration: none;
}
.site-footer__contact-value:hover { color: var(--brand-blue); }

/* Footer nav lists */
.site-footer__list {
  list-style: disc;
  padding-inline-start: 21px;
  margin: 0;
  font-size: 14px;
  color: var(--text-body);
  letter-spacing: -0.28px;
}
.site-footer__list li { line-height: 2.8; }
.site-footer__list a { color: var(--text-body); text-decoration: none; }
.site-footer__list a:hover { color: var(--brand-blue); }

/* Logo column */
.site-footer__brand { display: block; }
.site-footer__logo { max-width: 224px; height: auto; display: block; }

/* Bottom bar */
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-block-start: 1px solid #e4e4e4;
  padding-block: 16px;
}

.site-footer__copyright-text {
  font-size: 14px;
  color: #898989;
  letter-spacing: -0.28px;
  margin: 0;
}

/* Social icons row */
.site-footer__socials {
  display: flex;
  gap: 14px;
}

.site-footer__social-link {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #E6E8EB;
  color: #6E8A9E;
  font-size: 14px;
  transition: background-color 250ms ease, color 250ms ease, transform 250ms ease;
}

/* Keep hover smooth even when AOS overrides transition-property to opacity/transform */
.site-footer__social-link[data-aos] {
  transition-property: opacity, transform, background-color, color;
  transition-duration: 250ms;
}

.site-footer__social-link:hover {
  background: var(--brand-blue);
  color: #fff;
  transform: translateY(-2px);
}

.site-footer__copyright-hospital {
  color: var(--brand-blue-alt);
  text-decoration: none;
}
.site-footer__copyright-hospital:hover { text-decoration: underline; }

/* ==========================================================================
   11. Back-to-top button
   ========================================================================== */

.back-to-top {
  position: fixed;
  inset-inline-end: 30px;
  bottom: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--brand-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 300ms ease, transform 300ms ease, visibility 300ms ease, background-color 250ms ease;
  z-index: 999;
}

.back-to-top:hover { background: var(--brand-navy); color: #fff; }
.back-to-top.is-visible:hover { transform: translateY(0) scale(1.08); box-shadow: 0 12px 28px -8px rgba(20, 54, 76, 0.5); }
.back-to-top.is-visible:active { transform: translateY(0) scale(0.96); }
@media (prefers-reduced-motion: reduce) {
  .back-to-top.is-visible:hover, .back-to-top.is-visible:active { transform: translateY(0); }
}

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

/* ==========================================================================
   12. Page title band (shared across inner pages)
   ========================================================================== */

.page-title {
  position: relative;
  height: var(--page-title-h);
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  border-block-end: 1px solid var(--border-hair);
}

.page-title__text {
  font-family: var(--font-neo);
  font-weight: 700;
  font-size: 38px;
  color: var(--text-primary);
  margin: 0;
}

/* ==========================================================================
   13. Utility helpers (BEM-compatible, logical-property only)
   ========================================================================== */

.u-flex        { display: flex; }
.u-flex-col    { display: flex; flex-direction: column; }
.u-items-center{ align-items: center; }
.u-justify-between { justify-content: space-between; }
.u-gap-12      { gap: 12px; }
.u-gap-20      { gap: 20px; }
.u-gap-30      { gap: 30px; }

.u-text-center { text-align: center; }
.u-text-start  { text-align: start; }
.u-text-end    { text-align: end; }

.u-mt-20 { margin-block-start: 20px; }
.u-mt-40 { margin-block-start: 40px; }
.u-mt-60 { margin-block-start: 60px; }
.u-mb-20 { margin-block-end: 20px; }
.u-mb-40 { margin-block-end: 40px; }
.u-mb-60 { margin-block-end: 60px; }

/* Directional icon helper (flip in RTL) */

/* Visually hidden (accessibility) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   14. SHARED HOME PRIMITIVES
   ========================================================================== */
.navbar__logo { width: 68px; height: 71px; max-width: none; display: block; object-fit: contain; }
.section__heading {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 28px;
  text-align: center;
}

/* ==========================================================================
   15. HERO
   ========================================================================== */
.hero { padding-block: 25px; background: var(--bg-canvas); }
.hero__inner {
  display: flex;
  gap: 26px;
  align-items: stretch;
}

/* Main slider — RIGHT in RTL (first in DOM) */
.hero__main-slider {
  flex: 1;
  min-width: 0;
}
/* wrapper حركة دخول السلايدر — ياخد مكان الفلكس بدل السلايدر */
.hero__slider-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
}
/* wrapper حركة دخول بانل الكروت — ياخد مكان الفلكس بدل الـ aside */
.hero__features-wrap {
  width: 350px;
  flex-shrink: 0;
  display: flex;
}
.hero__features-wrap > .hero__features { width: 100%; }
.hero__main-slider.owl-carousel {
  border-radius: var(--r-3xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.hero__slide {
  position: relative;
  height: 450px;
  overflow: hidden;
}
.hero__main-slider .hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__main-slider .hero__overlay {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 32px 36px;
  height: 100%;
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 64.78%, rgba(0, 0, 0, 0.70) 100%);
  display: flex;
  align-items: end;
  justify-content: space-between;
}
/* ---------- Hero video stage (مشغّل الفيديو) ---------- */
.hero__stage {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 450px;
  overflow: hidden;
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-card);
  background: #0b1a26;
}
.hero__media {
  position: absolute;
  inset: 0;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}
/* يوتيوب: تكبير الإطار لإخفاء الحواف السوداء */
.hero__media iframe.hero__video {
  width: 100%;
  height: 100%;
  transform: scale(1.35);
  transform-origin: center center;
  pointer-events: none;
}
.hero__video--img { object-fit: cover; }
.hero__stage .hero__overlay {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 32px 36px;
  height: 100%;
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 55%, rgba(0, 0, 0, 0.72) 100%);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
}
.hero__stage .hero__overlay > * { pointer-events: auto; }
/* زر الصوت */
.hero__sound {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-start: 16px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .2s ease, transform .2s ease;
  z-index: 4;
}
.hero__sound:hover { background: rgba(0, 0, 0, .78); transform: scale(1.07); }
.hero__sound.is-on { background: var(--brand-blue); border-color: var(--brand-blue); }
.hero__sound[hidden] { display: none; }
/* زر تشغيل للروابط اللي مش بتشتغل تلقائي (ريلز/تيك توك) */
.hero__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--brand-blue);
  font-size: 24px;
  cursor: pointer;
  z-index: 3;
  transition: transform .2s ease;
}
.hero__play:hover { transform: scale(1.08); }
.hero-card { cursor: pointer; }

.hero__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 10px;
  color: #fff;
}
.hero__desc {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0;
  opacity: 0.92;
  font-weight: 400;
}

/* Feature cards — LEFT in RTL (second in DOM) */
.hero__features {
  width: 350px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-frost);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.hero-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  border-block-end: 1px solid var(--border-card);
  border-inline-start: 4px solid transparent;
  cursor: pointer;
  transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hero-card:last-child { border-block-end: 0; }
.hero-card:hover,
.hero-card--active {
  background-color:#FFF;
}
/* hero-card: side accent bar slides in + title darkens */
.hero-card:hover {
  border-inline-start-color: var(--brand-blue);
  box-shadow: 0 8px 22px -14px rgba(20, 54, 76, 0.30);
}
.hero-card:hover .hero-card__title { color: var(--brand-navy); }
html[data-theme="dark"] .hero-card:hover,
html[data-theme="dark"] .hero-card--active {
  background-color:#14364c;
}
.hero-card--active .hero-card__title { color: var(--brand-navy); }
.hero-card__body {
  flex: 1;
  min-width: 0;
}
.hero-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
}
.hero-card__text {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
  margin: 0;
}
.hero-card__icon {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: #14364c;
  border-radius: 20px;
  color: #fff;
}
.hero-card__icon img { width: 52px; height: 52px; object-fit: contain; }

/* ==========================================================================
   16. HERO SEARCH PILL
   ========================================================================== */
.hero-search { padding-block: 24px 40px; }
.hero-search__pill {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 200px;
  align-items: center;
  min-height: 80px;
  max-width: 1110px;
  margin-inline: auto;
  padding: 15px;
  background: #fff;
  border-radius: var(--r-pill);
  box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.2s ease;
}
.hero-search__pill:focus-within {
  box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(42, 116, 177, 0.28);
}
.hero-search__field {
  display: flex;
  align-items: center;
  gap: 12px;
  width:85%;
  padding-inline: 18px;
}
.hero-search__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 22px;
  object-fit: contain;
}
/* Un-mirror the stethoscope search icon (both languages) */
.hero-search__icon[src*="stethoscope"] { transform: scaleX(-1); }
.hero-search__select {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 18px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23707070' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 8px center;
  padding-inline-end: 28px;
}
/* English (LTR): dropdown caret on the right (end side) instead of left */
html[dir="ltr"] .hero-search__select {
  background-position: right 8px center;
}
.hero-search__select:invalid { color: var(--text-muted); }
.hero-search__select:valid { color: var(--brand-navy); }
.hero-search__select option { color: var(--brand-navy); }
.hero-search__divider {
  width: 1px;
  height: 50px;
  background: #c9c9c9;
  justify-self: center;
}
.hero-search__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  width: 200px;
  border-radius: var(--r-pill);
  background: var(--brand-blue);
  color: #fff;
  fill: #fff;
  border: 0;
  font-weight: 700;
  font-size: 20px;
  cursor: pointer;
  transition: background-color 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              color 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-search__btn:hover {
  background: var(--brand-navy);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -10px rgba(20, 54, 76, 0.5),
              0 4px 10px -6px rgba(20, 54, 76, 0.35);
}
.hero-search__btn:active { transform: translateY(-1px); transition-duration: 80ms; }
.hero-search__btn:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .hero-search__btn:hover, .hero-search__btn:active { transform: none; }
}
.hero-search__btn-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  object-fit: contain;
}

/* ==========================================================================
   17. HOME SPECIALTIES
   ========================================================================== */
.home-specialties { padding-block: 40px 60px; }
.home-specialties__head {
  margin-block-end: 24px;
}
.home-specialties__head .section__heading { margin: 0; }
.home-specialties__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.spec-card {
  position: relative;
  display: block;
  height: 200px;
  background-color: var(--brand-navy);
  border-radius: var(--r-xl);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 4px 4px 0 rgba(0,0,0,0.25);
  transition: transform .3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow .3s ease;
}
.spec-card:hover {
  color: #fff;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%);
  text-decoration: none;
  transform: translateY(-6px);
  box-shadow: 0 0 0 3px var(--brand-blue), 0 18px 38px -12px rgba(20, 54, 76, 0.5);
}
.spec-card__title span {
  display: block;
}
.spec-card__logo {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  width: 135px;
  height: 135px;
  object-fit: contain;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 2;
}
.spec-card:hover .spec-card__logo {
  opacity: 0;
}
.spec-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 0;
}
.spec-card:hover .spec-card__img {
  opacity: 0.4;
}
.spec-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 35%, rgba(0,0,0,0) 70%);
  z-index: 1;
  pointer-events: none;
}
.spec-card__title {
  position: absolute;
  inset-block-end: 16px;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 2;
  margin: 0;
  padding-inline: 14px;
  font-family: var(--font-neo);
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  text-align: start;
}
.home-specialties__cta {
  display: flex;
  justify-content: center;
  margin-block-start: 30px;
}

/* ==========================================================================
   18. STORIES
   ========================================================================== */
.stories { padding-block: 60px; background: var(--bg-mist); }
.stories__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 28px;
  max-width: 1110px;
  margin-inline: auto;
}
.stories .section__heading {
  font-size: 38px;
  color: var(--brand-navy);
  text-align: start;
  margin-block-end: 0;
}
.stories__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  align-items: start;
  max-width: 1110px;
  margin-inline: auto;
}
.stories__featured {
   border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform .3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow .3s ease;
}
.stories__featured:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px -14px rgba(20, 54, 76, 0.34);
}
.stories__media {
  height: 284px;
  overflow: hidden;
  background: var(--brand-ice);
  border-radius: 24px 24px 0 0;
}
.stories__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.stories__featured:hover .stories__media img { transform: scale(1.06); }
.stories__title { transition: color .25s ease; }
.stories__featured:hover .stories__title { color: var(--brand-blue); }
.stories__title {
  font-size: 18px;
  font-weight: 700;
  margin-block: 18px 10px;
  padding-inline: 22px;
   color: #0a033c;
}
.stories__desc {
  font-size: 14px;
  line-height: 1.7;
  color: #686868;
  margin-block: 0 12px;
  padding-inline: 22px;
 }
.stories__more {
  display: inline-block;
  margin-block: 0 24px;
  margin-inline-start: 22px;
   color: var(--brand-blue);
  font-weight: 700;
  font-size: 16px;
  text-decoration: underline;
  letter-spacing: -0.64px;
}
.stories__more:hover { color: rgba(255, 255, 255, 0.82); }
.stories__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.stories__item {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  align-items: start;
  padding-block: 16px;
  border-block-end: 1px solid #d9d9d9;
  border-radius: 8px;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.stories__item:first-child { padding-block-start: 0; }
.stories__item:last-child { border-block-end: none; }
.stories__item:hover {
  background-color: rgba(42, 116, 177, 0.09);
  box-shadow: 0 8px 22px -14px rgba(20, 54, 76, 0.35);
}
.stories__item-title { transition: color .25s ease; }
.stories__item:hover .stories__item-title { color: var(--brand-blue); }
.stories__thumb {
  width: 180px;
  height: 116px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--brand-ice);
  flex-shrink: 0;
}
.stories__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.stories__item:hover .stories__thumb img { transform: scale(1.06); }

/* Respect reduced-motion for all card hover movements */
@media (prefers-reduced-motion: reduce) {
  .hero-card:hover, .spec-card:hover, .stats__card:hover, .award-card:hover,
  .news-card:hover, .stories__featured:hover { transform: none; }
  .hero-card:hover .hero-card__icon img,
  .award-card:hover .award-card__img,
  .news-card:hover .news-card__media img,
  .stories__featured:hover .stories__media img,
  .stories__item:hover .stories__thumb img { transform: none; }
}
.stories__item-title {
  font-size: 16px;
  font-weight: 700;
  color: #0a033c;
  margin-block: 0 6px;
}
.stories__item-text {
  font-size: 14px;
  color: #686868;
  line-height: 1.786;
  margin-block: 0 8px;
}
.stories__item-more {
  font-size: 14px;
  font-weight: 400;
  color: #0d47a1;
  text-decoration: underline;
}
.stories__item-more:hover { color: #0a3580; }

/* ==========================================================================
   19. STATS BAND
   ========================================================================== */
.stats { padding-block: 70px; background: #fff; }
.stats__inner {
  display: grid;
  grid-template-columns: 330px 730px;
  gap: 50px;
  justify-content: center;
  align-items: center;
  max-width: 1110px;
  margin-inline: auto;
}
.stats__copy { }
.stats__title {
  font-size: 33px;
  font-weight: 800;
  color: var(--text-primary);
  margin-block: 0 12px;
}
.stats__desc {
  font-size: 18px;
  color: #000;
  line-height: 32px;
  margin-block: 0 24px;
}
.stats__panel {
  display: grid;
  grid-template-columns: 320px 320px;
  grid-template-rows: 120px 120px;
  gap: 30px;
  padding: 30px;
  background: #f5f7f9;
  border-radius: 30px;
}
.stats__card {
  display: grid;
  justify-content: space-around;
  grid-template-areas: "number icon"
    "label icon";
  align-items: center;
  column-gap: 16px;
  padding: 10px 15px;
  background: #fff;
  border-radius: 20px 0;
  transition: background-color .3s ease, transform .25s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow .25s ease;
}
.stats__card:hover {
  background: var(--brand-navy);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -12px rgba(20, 54, 76, 0.42);
}
.stats__card:hover .stats__number,
.stats__card:hover .stats__label { color: #fff; }
.stats__number, .stats__label { transition: color .3s ease; }
.stats__icon {
  grid-area: icon;
  width: 70px;
  height: 70px;
  object-fit: contain;
}
.stats__number {
  grid-area: number;
  font-size: 48px;
  font-weight: 800;
  color: #2272b1;
  line-height: 1;
  letter-spacing: -0.96px;
}
.stats__label {
  grid-area: label;
  font-size: 18px;
  color: #707070;
  letter-spacing: -0.36px;
  margin-block-start: 4px;
}

/* ==========================================================================
   20. AWARDS
   ========================================================================== */
.awards { padding-block: 60px; }
.awards__panel {
  padding: 50px 30px;
  background: var(--bg-ice);
  border-radius: 30px;
  max-width: 1110px;
  margin-inline: auto;
}
.awards__head { text-align: center; margin-block-end: 30px; max-width: 1110px; margin-inline: auto; }
.awards__title {
  font-size: 38px;
  font-weight: 700;
  color: #000;
  margin: 0 0 8px;
}
.awards__sub {
  font-size: 18px;
  color: #425563;
  margin: 0;
}
.awards__grid {
  display: grid;
  grid-template-columns: repeat(4, 240px);
  gap: 30px;
  justify-content: center;
}
.award-card {
  position: relative;
  background: #fff;
  border-radius: 30px;
  padding: 14px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  border-block-start: 3px solid transparent;
  transition: transform .25s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow .25s ease, border-color .25s ease;
}
.award-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px -12px rgba(20, 54, 76, 0.30);
  border-block-start-color: var(--accent-teal);
}
.award-card__title { transition: color .25s ease; }
.award-card:hover .award-card__title { color: var(--brand-navy); }
.award-card__img { transition: box-shadow .25s ease; }
.award-card:hover .award-card__img { box-shadow: 0 0 0 3px rgba(42, 116, 177, 0.30); }
.award-card__img {
  inset-block-start: 5px;
  inset-inline-start: 15px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
}
.award-card__title {
  font-size: 14px;
  font-weight: 700;
  color: #2272b1;
  margin: 0;
  line-height: 1.3;
}
.award-card__sub {
  font-size: 14px;
  color: #707070;
  margin: 0;
  line-height: 1.3;
}
.award-card__more {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 400;
  color: #14364c;
  text-decoration: none;
  margin-block-start: 6px;
}
.award-card__more:hover {  }
.awards__cta {
  display: flex;
  justify-content: center;
  margin-block-start: 30px;
}

/* ==========================================================================
   21. SOCIAL POSTS
   ========================================================================== */
.social-posts { padding-block-start: 60px; padding-block-end: 60px; }
.social-posts .section__heading {
  font-size: 38px;
  color: #000;
}
.social-posts__slider { width: 100%; }
.social-posts__slider .owl-stage { display: flex; }
.social-card {
  position: relative;
  height: 327px;
  border-radius: 32px;
  overflow: hidden;
  background: var(--bg-chrome);
}
.social-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.social-card:hover .social-card__img { transform: scale(1.03); }
.social-card__overlay {
  position: absolute;
  inset: 0;
  border-radius: 32px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, rgba(17,109,173,0.7) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 24px 20px;
  gap: 14px;
  opacity: 0;
  transition: opacity .35s ease;
}
.social-card:hover .social-card__overlay { opacity: 1; }
.social-card__title {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  line-height: 1.6;
  letter-spacing: -0.56px;
  color: #fff;
}

/* وقت الهوفر: العنوان والزرار يطلعوا من تحت لفوق */
.social-card__title {
  transform: translateY(26px);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.social-card__overlay .btn-pill--hero {
  transform: translateY(26px);
  transition-delay: .09s; /* الزرار يطلع بعد العنوان بشوية */
}
.social-card:hover .social-card__title,
.social-card:hover .social-card__overlay .btn-pill--hero {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .social-card__title,
  .social-card__overlay .btn-pill--hero { transform: none; }
}

/* ==========================================================================
   22. NEWS
   ========================================================================== */
.news { padding-block: 60px; background: var(--bg-canvas); }
.news .section__heading { font-size: 38px; color: #000; }
.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-block-start: 30px;
}
.news-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-block-end: 3px solid transparent;
  transition: transform .25s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow .25s ease, border-color .25s ease;
}
.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px -12px rgba(20, 54, 76, 0.28);
  border-block-end-color: var(--brand-blue);
}
.news-card:hover .news-card__media img { transform: scale(1.08); }
.news-card__title { transition: color .25s ease; }
.news-card:hover .news-card__title { color: var(--brand-blue); }
.news-card__media {
  height: 188px;
  overflow: hidden;
  border-radius: 20px;
}
.news-card__media img {
  transition: transform .35s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-card__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: #1a1a1a;
  letter-spacing: -0.36px;
  margin-block-start: 19px;
  margin-block-end: 0;
  margin-inline: 20px;
}
.news-card__text {
  font-size: 14px;
  color: #686868;
  line-height: 25px;
  margin-block-start: 23px;
  margin-block-end: 0;
  margin-inline: 20px;
  flex: 1;
  text-align: justify;
}
.news-card .btn-pill {
  margin-block-start: 20px;
  margin-block-end: 20px;
  margin-inline: 20px;
  align-self: flex-start;
}

/* ==========================================================================
   23. RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
  .home-specialties__grid { grid-template-columns: repeat(3, 1fr); }
  .awards__grid { grid-template-columns: repeat(2, 1fr); }
  .stats__inner { grid-template-columns: 1fr; }
}
@media (max-width: 991px) {
  /* Navbar collapse */
  .top-bar {
    padding-inline: 16px;
    height: auto;
    min-height: var(--utility-h);
    padding-block: 4px;
  }
  /* ====== التوب بار في الجوال يبقى صفّين ======
     صف فوق: القائمة لوحدها (تمرير أفقي scroll-x لو العرض صغير)
     صف تحت: اللغة + السوشال ميديا */
  .top-bar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .top-bar__menu {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    min-width: 0;                 /* يسمح للشريط بالتقلّص فيشتغل الـ scroll */
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;        /* Firefox: إخفاء شريط التمرير */
    scroll-snap-type: x proximity;
    padding-block: 6px;
    padding-inline: 2px;          /* مسافة بسيطة تبان معاها أول وآخر كلمة كاملة */
  }
  .top-bar__menu::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge */
  .top-bar__menu a {
    flex: 0 0 auto;
    scroll-snap-align: start;
    font-size: 13.5px;
  }
  /* الصف التاني: اللغة + السوشال ميديا تحت القائمة */
  .end-nav {
    justify-content: center;
    gap: 14px;
    padding-block: 2px;
    border-block-start: 0.5px solid var(--border-hair);
    padding-block-start: 8px;
  }
  .navbar { padding-inline: 16px; }
  .navbar__menu, .navbar__actions { display: none; }
  .navbar__toggle { display: flex; }
  /* إظهار زرار الدارك/لايت مود جنب زرار المنيو في الجوال */
  .navbar__actions {
    display: flex;
    margin-inline-start: auto;
    gap: 10px;
  }
  .navbar__actions > :not(.theme-toggle) { display: none; }
  .navbar__toggle { order: 1; }
  /* Content layout */
  .hero__inner { flex-direction: column; }
  .hero__features { width: 100%; }
  .hero__features-wrap { width: 100%; }
  .hero__slide { height: 340px; }
  .hero__stage { height: 340px; width: 100%; }
  .hero__stage .hero__overlay { padding: 22px 20px; }
  .hero__title { font-size: 22px; }
  /* Slightly smaller headings on tablet/mobile */
  .section__heading { font-size: 24px; }
  .news .section__heading { font-size: 24px; }
  .stats__title, .awards__title { font-size: 24px; }
  .hero-search__pill {
    grid-template-columns: 1fr;
    border-radius: var(--r-xl);
    padding: 12px;
  }
  .hero-search__divider { display: none; }
  .hero-search__btn { height: 48px; width: 100%; }
  .home-specialties__grid { grid-template-columns: repeat(2, 1fr); }
  .stories__grid { grid-template-columns: 1fr; }
  .stats__panel { grid-template-columns: repeat(2, 1fr); }
  .news__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
  /* Logo first (full width, centered); the two links columns sit side by side */
  .site-footer__col--logo { order: -1; grid-column: 1 / -1; display: flex; justify-content: center; }
  .site-footer__col--contact { grid-column: 1 / -1; }
  .site-footer__bottom { flex-direction: column; gap: 16px; text-align: center; }
}
@media (max-width: 575px) {
  /* موبايل صغير: نفس نظام الصفّين — القائمة فوق، واللغة + السوشيال تحت */
  .top-bar__menu { gap: 14px; }
  .top-bar__menu a { font-size: 13px; }
  /* Hero */
  .hero { padding-block: 16px; }
  .hero__slide { height: 280px; }
  .hero__stage { height: 260px; }
  .hero__stage .hero__overlay { padding: 16px 16px; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 10px; }
  .hero__sound { width: 38px; height: 38px; font-size: 14px; inset-block-start: 10px; inset-inline-start: 10px; }
  .hero__title { font-size: 16px; }
  .hero__desc { font-size: 14px; }
  /* Grids */
  .home-specialties__grid { grid-template-columns: 1fr; }
  .awards__grid { grid-template-columns: 1fr; }
  .news__grid { grid-template-columns: 1fr; }
  .stories__item { grid-template-columns: 90px 1fr; }
  .stories__thumb { width: 100%; height: 90px; }
  .stories__media { height: 210px; }
  .stories__title, .stories__desc { padding-inline: 16px; }
  .stories__more { margin-inline-start: 16px; }
  .section__heading { font-size: 20px; }
  .news .section__heading { font-size: 20px; }
  .stats__title, .awards__title { font-size: 20px; }
  .page-title-band .page-title-band__title { font-size: 23px; }
  .stats__panel { grid-template-columns: 1fr; }
  /* Buttons scale down on small mobile */
  .btn-pill { height: 44px; font-size: 15px; padding-inline-start: 18px; padding-inline-end: 18px; }
  .btn-pill--hero { font-size: 13px; padding-inline-start: 16px; padding-inline-end: 0; gap: 8px; }
  .btn-pill--hero .btn-pill__arrow { width: 42px; height: 42px; }
  .btn-pill--nav { width: 100%; font-size: 15px; }
  .hero-search__btn { font-size: 16px; }
  .hero-search__select { font-size: 15px; }
  /* Footer */
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  .site-footer__bottom { flex-direction: column; gap: 12px; }
}

/* ============================================================
   === ABOUT PAGE ===
   ============================================================ */

/* =========================================================
 * §24 — About page : page-title-band + intro heading
 * ========================================================= */
.page-title-band {
  position: relative;
  background-image:
    linear-gradient(120deg, rgba(20, 54, 76, 0.95) 0%, rgba(20, 54, 76, 0.82) 50%, rgba(42, 116, 177, 0.70) 100%),
    url('../images/common/inner-page-hero-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 156px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 0;
  overflow: hidden;
}
/* Soft brand glow accent in the corner */
.page-title-band::before {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -6%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(76, 149, 60, 0.28) 0%, rgba(76, 149, 60, 0) 70%);
  pointer-events: none;
}
.page-title-band__title {
  position: relative;
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}
.page-title-band__title::after {
  content: "";
  display: block;
  width: 66px;
  height: 4px;
  margin: 16px auto 0;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--accent-teal, #257ca5), var(--brand-blue, #2a74b1));
}

@media (max-width: 991px) {
  .page-title-band { min-height: 120px; padding: 34px 0; }
}
@media (max-width: 575px) {
  .page-title-band { min-height: 96px; padding: 26px 0; }
  .page-title-band__title::after { width: 52px; height: 3px; margin-top: 12px; }
}

.about-intro-heading {
  padding-block: 56px 24px;
}
.about-intro-heading__title {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-bahij);
  font-size: 28px;
  font-weight: 800;
  color: var(--brand-navy, #14364c);
  line-height: 1.6;
}
.about-intro-heading__line {
  display: block;
}

/* =========================================================
 * §25 — About page : intro split (text + image)
 * ========================================================= */
.about-split {
  padding-block: 24px 48px;
}
.about-split__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr ;
  gap: 40px;
  align-items: center;
}
.about-split__text {
  text-align: start;
}
.about-split__kicker {
  margin: 0 0 18px;
  font-size: 28px;
  font-weight: 800;
  color: var(--accent-teal, #257ca5);
  line-height: 1.3;
  text-align: start;
}
.about-split__body {
  margin: 0;
  font-size: 19px;
  line-height: 2.1;
  color: var(--text-body, #5d6b72);
  text-align: start;
}
.about-split__media {
  margin: 0;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--shadow-card, 0 10px 30px rgba(7,35,66,0.12));
  aspect-ratio: 674 / 390;
}
.about-split__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
 * §26 — About page : pull quote band
 * ========================================================= */
.about-quote {
  padding-block: 48px 56px;
}
.about-quote__text {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--brand-navy, #14364c);
  line-height: 1.7;
  font-style: normal;
}

/* =========================================================
 * §27 — About page : vision + mission split
 * ========================================================= */
.vm-split {
  padding-block: 32px 72px;
}
.vm-split__grid {
  display: grid;
  grid-template-columns:  1fr 1.35fr;
  gap: 40px;
  align-items: center;
}
.vm-split__media {
  margin: 0;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--shadow-card, 0 10px 30px rgba(7,35,66,0.12));
  aspect-ratio: 674 / 390;
}
.vm-split__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vm-split__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.vm-card {
  background: transparent;
}
.vm-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block-end: 14px;
}
.vm-card__icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex: 0 0 46px;
}
.vm-card__title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  color: var(--brand-navy, #14364c);
  line-height: 1.3;
  text-align: start;
}
.vm-card__body {
  margin: 0;
  font-size: 16px;
  line-height: 2.5;
  color: var(--text-body, #5d6b72);
  text-align: start;
}

/* Responsive — about page */
@media (max-width: 991.98px) {
  .about-split__grid,
  .vm-split__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .page-title-band__title { font-size: 26px; }
  .about-intro-heading__title { font-size: 22px; }
  .about-quote__text { font-size: 20px; }
  .vm-card__title { font-size: 24px; }
}




/* ============================================================
   §28 — SPECIALTIES PAGE
   ============================================================ */

.specialties { padding-block: 40px 56px; }

.specialties__grid {
  display: grid;
  grid-template-columns: 255px 1fr;
  gap: 30px;
  align-items: start;
}

/* right sidebar: vertical tab list */
.specialties__sidebar {
  position: sticky;
  top: 90px;
  border: 1px solid var(--c-gray-350, #aeaeae);
  border-radius: 24px;
  padding: 14px 12px;
  background:transparent  ;
}

.spec-tabs { list-style: none; margin: 0; padding: 0; }

.spec-tabs__item { display: block; margin: 0; }

.spec-tabs__item > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  color: var(--text-body, #000);
  font-size: 12px;
  line-height: 1.6;
  text-align: start;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color .2s ease, color .2s ease;
}

.spec-tabs__item > a:hover,
.spec-tabs__item > a:focus {
  background: rgba(42, 116, 177, 0.08);
  color: #2a74b1;
}

.spec-tabs__marker {
  flex: 0 0 36px;
  width: 36px;
  height: 20px;
  border-radius: 100px;
  border: none;
  background: var(--c-gray-300, #d0d0d0);
  position: relative;
  transition: background-color .2s ease;
}

.spec-tabs__marker::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  transition: transform .15s ease;
}

.spec-tabs__label { flex: 1 1 auto; min-width: 0; }

.spec-tabs__item > a.active { color: var(--c-primary-blue, #2a74b1); font-weight: 700; }

.spec-tabs__item > a.active:hover,
.spec-tabs__item > a.active:focus {
  background: transparent;
  color: var(--c-primary-blue, #2a74b1);
}

.spec-tabs__item > a.active .spec-tabs__marker {
  background: var(--c-primary-blue, #2a74b1);
  box-shadow: 0 0 0 2px rgba(42, 116, 177, 0.18);
}

.spec-tabs__item > a.active .spec-tabs__marker::after {
  /* Shift circle to inline-end side (ON position) — 36px toggle, 14px circle, 3px margin each side = 16px travel */
  transform: translateX(-16px);
}

/* left: content cards — Bootstrap manages tab-pane visibility */
.specialties__content { /* tab-content wrapper — no flex needed */ }

.specialties__cards {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.spec-card--hidden { display: none; }

.specialties__grid .spec-card {
  position: relative;
  display: flex;
  gap: 30px;
  align-items: center;
  min-height: 305px;
  border-radius: 20px 0;
  background: var(--bg-canvas, #ffffff);
  padding: 30px 25px;
  border: 1px solid #000;
  overflow: hidden;
}

.specialties__grid .spec-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1;  /* gap between body text and image on inline-start (RIGHT in RTL) */
}

.specialties__grid .spec-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 12px;
  color: var(--text-muted, #a2a2a2);
  font-size: 14px;
}

.specialties__grid .spec-card__meta-icon {
  width: 19px;
  height: 19px;
  object-fit: contain;
  flex: 0 0 19px;
}

.specialties__grid .spec-card__title {
  position: static;
  font-size: 18px;
  font-weight: 800;
  color: var(--brand-navy, #14364c);
  text-align: start;
  padding-inline: 0;
  margin-block-start: 0;
  margin-block-end: 14px;
  inset: auto;
  z-index: auto;
}

.specialties__grid .spec-card__text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-body, #000);
  text-align: start;
  margin-block-end: 20px;
  max-width: 471px;
}

.specialties__grid .spec-card__foot {
  display: flex;
  align-items: self-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-block-start: auto;
  position: relative;
  z-index: 1;
  flex-direction: column;
}

.specialties__grid .spec-card__author {
  font-size: 14px;
  color: var(--text-body, #000);
  margin: 0;
  text-align: start;
}

.specialties__grid .spec-card__author-label { color: var(--text-body, #000); }
.specialties__grid .spec-card__author-name { color: #a2a2a2; margin-inline-start: 4px; }

.specialties__grid .spec-card__cta {
  padding: 5px 20px;
  font-size: 14px;
  min-width: 138px;
  height: 37px;
  justify-content: space-between;
}

.specialties__grid .spec-card__cta i { margin-inline-start: 6px; }

.specialties__grid .spec-card__glyph {
  position: absolute;
  inset-inline-end: 15px;   /* physical LEFT in RTL = bottom-left corner of body/card */
  inset-block-end: 5px;
  font-size: 80px;
  line-height: 1;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--c-gray-350, #aeaeae);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -8px;
  user-select: none;
}

.specialties__grid .spec-card__media {
  margin: 0;
  overflow: hidden;
  width: 255px;
  height: 243px;
  border-radius: 20px 0;
  background: #d9d9d9;
  /* border-radius clipped by parent card's overflow:hidden */
}

.specialties__grid .spec-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 10px;
  margin-block-start: 20px;
}

.pagination__item,
.pagination__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 100px;
  font-family: 'Inter', 'Neo Sans Arabic', sans-serif;
  font-weight: 800;
  font-size: 18px;
  text-decoration: none;
  background: var(--bg-canvas, #fff);
  color: #2272b1;
  border: 1px solid #2272b1;
  transition: background-color .2s ease, color .2s ease, transform .2s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow .2s ease, border-color .2s ease;
  cursor: pointer;
}

.pagination__item:hover,
.pagination__chev:hover {
  transform: translateY(-2px);
  background: #2272b1;
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(34, 114, 177, 0.55);
}

.pagination__item--active {
  background: #2a74b1;
  color: #fff;
  border-color: #2a74b1;
}

.pagination__chev { color: #bcbcbc; border-color: #bcbcbc; }
.pagination__chev:hover { color: #2a74b1; border-color: #2a74b1; }

/* responsive — specialties */
@media (max-width: 991.98px) {
  .specialties__grid { grid-template-columns: 1fr; }
  .specialties__sidebar { position: static; }
  .specialties__grid .spec-card {
    flex-direction: column;
    height: auto;
  }
  .specialties__grid .spec-card__media { aspect-ratio: 16 / 9; min-height: 220px; }
  .specialties__grid .spec-card__image { min-height: unset; }
   .pagination__item,
  .pagination__chev { width: 48px; height: 48px; font-size: 15px; }
  .pagination { gap: 10px; }
}


/* ==========================================================================
   §29 SPECIALTY-INTERNAL PAGE
   ========================================================================== */

/* ----- About department intro ----- */
.dept-intro {
  padding-block: 48px 40px;
}
.dept-intro__grid {
  display: grid;
  grid-template-columns: 674px 1fr ;
  gap: 40px;
  align-items: center;
}
.dept-intro__heading {
  font-family: 'Bahij TheSansArabic', 'Neo Sans Arabic', 'Tajawal', sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 50px;
  color: #14364c;
  margin: 0 0 10px;
}
.dept-intro__paragraph {
  font-size: 16px;
  line-height: 37px;
  color: #000;
  margin: 0 0 12px;
  text-align: start;
}
.dept-intro__media {
  margin: 0;
}
.dept-intro__image {
  width: 100%;
  max-width: 674px;
  height: 390px;
  object-fit: cover;
  border-radius: 30px;
  display: block;
}

/* ----- Services list card ----- */
.dept-services {
  padding-block: 20px;
}
.dept-services__card {
  background: #f4f5f8;
  border-radius: 30px;
  padding: 40px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 48px;
}
.dept-services__col {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dept-services__col li {
  position: relative;
  padding-inline-start: 18px;
  font-size: 14px;
  line-height: 30px;
  color: #000;
  text-align: start;
}
.dept-services__col li::before {
  content: "\00B7";
  position: absolute;
  inset-inline-start: 0;
  top: 2px;
  font-size: 18px;
  font-weight: 700;
  color: #000;
}
[data-theme="dark"] .dept-services__card,[data-theme="dark"] .dept-cta__card{
  background: #00243a;
}
[data-theme="dark"] .dept-services__card .dept-services__col li,[data-theme="dark"] .dp-achievements__list li,[data-theme="dark"] .dp-timeline__text,[data-theme="dark"] .dp-about__list li,[data-theme="dark"] .dp-about__intro,[data-theme="dark"] .dp-hero__specialty,[data-theme="dark"] .dp-hero__facts li,[data-theme="dark"] .dept-cta__subhead,[data-theme="dark"] .dept-doctors__title,[data-theme="dark"] .dept-intro__paragraph ,[data-theme="dark"] .dept-services__col li::before{
  color:#FFF
}
[data-theme="dark"] .dept-cta__headline,[data-theme="dark"] .dp-timeline__ribbon,[data-theme="dark"] .dp-achievements__heading,[data-theme="dark"] .dp-about__heading,[data-theme="dark"] .dp-hero__name,[data-theme="dark"] .dept-intro__heading,[data-theme="dark"] .dp-hero__facts strong{
  color:var(--brand-blue);
}
[data-theme="dark"] .dp-timeline__ribbon,[data-theme="dark"] .dp-timeline__item--right::before,[data-theme="dark"] .dp-timeline__item--left::before,[data-theme="dark"] .dp-timeline__spine{
  background-color:var(--brand-blue);
}
/* ----- Appointment CTA card ----- */
.dept-cta {
  padding-block: 40px;
}
.dept-cta__card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.08);
  padding: 24px 60px;
  min-height: 382px;
  display: grid;
  grid-template-columns: 1fr 334px;
  gap: 40px;
  align-items: center;
}
.dept-cta__text {
  text-align: start;
}
.dept-cta__headline {
  font-family: 'Neo Sans Arabic', 'Tajawal', sans-serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 91px;
  color: #14364c;
  margin: 0 0 10px;
  text-align: start;
}
.dept-cta__subhead {
  font-size: 40px;
  line-height: 50px;
  color: #707070;
  margin: 0 0 24px;
  text-align: start;
}
.dept-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 180px;
  height: 50px;
  padding-inline: 26px 8px;
  border-radius: 200px;
  background: #2a74b1;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  position: relative;
}
.dept-cta__btn-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
}
.dept-cta__media {
  margin: 0;
  display: flex;
  justify-content: center;
}
.dept-cta__image {
  width: 334px;
  height: 334px;
  object-fit: contain;
  display: block;
}

/* ----- Department doctors ----- */
.dept-doctors {
  padding-block: 40px 56px;
  position: relative;
}
.dept-doctors__head {
  margin-bottom: 24px;
}
.dept-doctors__title {
  font-family: 'Neo Sans Arabic', 'Tajawal', sans-serif;
  font-size: 45px;
  font-weight: 700;
  line-height: 50px;
  letter-spacing: -2px;
  color: #000;
  margin: 0;
  text-align: center;
}

.dept-doctors__carousel.owl-carousel {
  position: relative;
}
.dept-doctors__carousel .owl-stage-outer {
  padding: 10px 0;
}

.dept-doc {
  position: relative;
  width: 100%;
  max-width: 255px;
  margin-inline: auto;
  padding-bottom: 8px;
}
.dept-doc__photo {
  margin: 0;
  height: 255px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  position: relative;
  z-index: 2;
}
.dept-doc__image {
  max-height: 255px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.dept-doc__panel {
  /* صورة خلفية + أوفر لاي (لايت مود) */
  background-image: linear-gradient(160deg, rgb(0 0 0 / 80%) 0%, #244335 100%), url(../images/bg-f.jpg.jpeg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 20px;
  padding: 20px 22px 22px;
  margin-top: -10px;
  position: relative;
  z-index: 2;
  text-align: center;
}
.dept-doc__name {
  font-family: 'Neo Sans Arabic', 'Tajawal', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 31px;
  color: #4c953c;
  margin: 0 0 4px;
  text-align: center;
}
.dept-doc__role {
  font-size: 16px;
  line-height: 28px;
  color: #ffffff;
  margin: 0 0 8px;
  text-align: center;
}
.dept-doc__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #4c953c;
  text-decoration: none;
  transition: color 0.2s ease;
}
.dept-doc__link:hover {
  color: #3d7a30;
  text-decoration: none;
}

/* هوفر كارت الطبيب — تكبير الصورة + ظل للبانل */
.dept-doc__image {
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  transform-origin: bottom center;
}
.dept-doc__panel {
  transition: box-shadow .4s ease;
}
.dept-doc:hover .dept-doc__image {
  transform: scale(1.06);
}
.dept-doc:hover .dept-doc__panel {
  box-shadow: 0 22px 46px -22px rgba(20, 54, 76, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  .dept-doc__image { transition: none; }
  .dept-doc:hover .dept-doc__image { transform: none; }
}

/* الدارك مود: نفس الصورة بس بأوفر لاي أغمق يناسب الوضع الداكن */
html[data-theme="dark"] .dept-doc__panel {
  background-image:
    linear-gradient(160deg, rgba(3, 16, 24, 0.88) 0%, rgba(6, 30, 40, 0.82) 100%),
    url("../images/bg-f.jpg.jpeg");
}
/* الدارك مود: ألوان كارت الطبيب — الاسم أبيض، التخصص أخضر، الرابط أبيض */
html[data-theme="dark"] .dept-doc__name { color: var(--text-primary); }
html[data-theme="dark"] .dept-doc__role { color: var(--accent-green); }
html[data-theme="dark"] .dept-doc__link { color: var(--text-primary); }
html[data-theme="dark"] .dept-doc__link:hover { color: var(--text-body); }

/* Owl nav arrows for doctors carousel */
.dept-doctors__carousel .owl-nav {
  position: absolute;
  top: 50%;
  inset-inline-start: -80px;
  inset-inline-end: -80px;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  margin: 0;
  width: auto;
}
.dept-doctors__carousel .owl-nav button.owl-prev,
.dept-doctors__carousel .owl-nav button.owl-next {
  pointer-events: auto;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
.dept-doctors__carousel .owl-nav button.owl-prev:hover,
.dept-doctors__carousel .owl-nav button.owl-next:hover {
  background: transparent !important;
}
.dept-doctors__nav {
  width: 60px;
  height: 60px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  transition: transform 0.2s ease, background 0.2s ease;
}
.dept-doctors__nav--prev { background: #707070; }
.dept-doctors__nav--next { background: #14364c; }
.dept-doctors__nav:hover { transform: scale(1.06); }

/* ----- Responsive ----- */
@media (max-width: 1199.98px) {
  .dept-intro__grid {
    grid-template-columns: 1fr 420px;
  }
  .dept-intro__image { height: 320px; }
}
@media (max-width: 991.98px) {
  .dept-intro__grid {
    grid-template-columns: 1fr;
  }
  .dept-intro__image { height: 300px; max-width: 100%; }
  .dept-services__card {
    grid-template-columns: 1fr;
    padding: 28px 24px;
  }
  .dept-cta__card {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    text-align: center;
  }
  .dept-cta__headline { font-size: 42px; line-height: 56px; text-align: center; }
  .dept-cta__subhead { font-size: 20px; line-height: 32px; text-align: center; }
  .dept-cta__text { text-align: center; }
  .dept-cta__media { order: -1; }
  .dept-cta__image { width: 240px; height: 240px; }
  .dept-doctors__title { font-size: 32px; line-height: 40px; letter-spacing: -1px; }
  .dept-doctors__carousel .owl-nav {
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: auto;
    bottom: -70px;
    transform: none;
    position: relative;
    margin-top: 20px;
  }
}
@media (max-width: 575.98px) {
  .dept-cta__headline { font-size: 32px; line-height: 42px; }
  .dept-cta__subhead { font-size: 16px; line-height: 26px; }
  .dept-intro__heading { font-size: 22px; line-height: 34px; }
  .dept-intro__paragraph { font-size: 14px; line-height: 28px; }
}

/* ==========================================================
   §30 DOCTORS LISTING PAGE
   ========================================================== */
.doctors-page {
    padding-block: 80px;
}

.doctors-page__grid {
    display: grid;
    grid-template-columns: 255px 1fr;
    gap: 30px;
    align-items: start;
}

.doctors-page__content {
    min-width: 0;
}

.doctors-page__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 30px;
    row-gap: 60px;
    margin-block-end: 60px;
}

.doctors-page__cards .dept-doc {
    margin: 0 auto;
    max-width: 300px;
    width: 100%;
}

.specialties__sidebar--doctors {
    position: sticky;
    top: 120px;
}

.pagination__chev--grey {
    border-color: #bcbcbc !important;
    color: #5d6b72 !important;
}

.pagination__chev--grey:hover {
    background: #bcbcbc;
    color: #ffffff !important;
}

/* Responsive */
@media (max-width: 1199.98px) {
    .doctors-page__cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991.98px) {
    .doctors-page__grid {
        grid-template-columns: 1fr;
    }
    .specialties__sidebar--doctors {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .doctors-page {
        padding-block: 40px;
    }
    .doctors-page__cards {
        grid-template-columns: 1fr;
        row-gap: 40px;
    }
}

/* ==========================================================================
   §31 DOCTOR PROFILE PAGE (doctor-profile.html)
   ========================================================================== */

/* ---------- Hero ---------- */
.dp-hero { padding-block: 0 60px; }
.dp-hero .container { display: flex; flex-direction: column; gap: 0; }

.dp-hero__card {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  height: 500px;
  width: 100%;
  margin-top:30px;
}
.dp-hero__media { margin: 0; width: 100%; height: 100%; }
.dp-hero__image { width: 100%; height: 100%; object-fit: fill; display: block; }

.dp-hero__caption {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  padding: 32px 24px 20px;
  background: linear-gradient(to top, rgba(14, 37, 52, 0.88) 0%, rgba(14, 37, 52, 0.45) 60%, transparent 100%);
}
.dp-hero__caption-name {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px;
}
.dp-hero__caption-role {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

.dp-hero__meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
  padding-block: 32px 0;
}
.dp-hero__info { flex: 0 0 auto; }
.dp-hero__name { font-size: 38px; font-weight: 700; color: #14364c; margin: 0 0 8px; }
.dp-hero__specialty { font-size: 22px; color: #989898; margin: 0; font-weight: 500; }

.dp-hero__facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  width: 100%;
  gap: 30px;
  justify-content: space-around;
}
.dp-hero__facts li { font-size: 18px; color: #5d6b72; line-height: 1.8; }
.dp-hero__facts strong { color: #14364c; font-weight: 700; margin-inline-end: 8px; }

.dp-hero__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-inline: 28px;
  height: 56px;
  font-size: 16px;
  font-weight: 600;
}
.dp-hero__cta-circle,
.dp-pub__cta-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: #ffffff; color: #14364c;
  font-size: 12px;
}

/* ---------- Tabs ---------- */
.dp-tabs { padding-block: 40px; }

.dp-tabs__card {
  background: #f4f5f8;
  border-radius: 30px;
  padding: 24px 32px;
  margin-block-end: 50px;
}
[data-theme="dark"] .dp-tabs__card { background: #1f2a33; }

.dp-tabs__nav {
  list-style: none; padding: 0; margin: 0;
  display: flex; justify-content: space-around; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
.dp-tabs__item {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
  color: #5d6b72;
  font-size: 18px;
  font-weight: 600;
  position: relative;
  padding-block: 10px;
  transition: color 0.2s ease;
}
.dp-tabs__item:hover { color: #14364c; }
.dp-tabs__icon { display: inline-flex; font-size: 18px; }
.dp-tabs__item--active { color: #14364c; }
.dp-tabs__item--active::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  bottom: -4px;
  transform: translateX(50%);
  width: 71px; height: 5px;
  background: #14364c;
  border-radius: 4px;
}
[dir="rtl"] .dp-tabs__item--active::after { transform: translateX(50%); }
[data-theme="dark"] .dp-tabs__item { color: #b4bec4; }
[data-theme="dark"] .dp-tabs__item:hover,
[data-theme="dark"] .dp-tabs__item--active { color: #ffffff; }
[data-theme="dark"] .dp-tabs__item--active::after { background: #ffffff; }

.dp-tabs__panel { display: none; }
.dp-tabs__panel--active { display: block; animation: dpFade 0.3s ease; }
@keyframes dpFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Panel 1: About ---------- */
.dp-about__intro {
  font-size: 18px; line-height: 2; color: #5d6b72;
  margin-block-end: 32px;
}
.dp-about__heading {
  font-size: 24px; font-weight: 700; color: #14364c;
  margin-block-end: 20px;
}
.dp-about__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.dp-about__list li {
  position: relative;
  padding-inline-start: 28px;
  font-size: 16px; line-height: 1.9; color: #5d6b72;
}
.dp-about__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 12px;
  width: 10px; height: 10px;
  background: #2a74b1;
  border-radius: 50%;
}

/* ---------- Panel 2: Career Timeline ---------- */
.dp-timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding-block: 20px;
}
.dp-timeline__spine {
  position: absolute;
  inset-inline-start: 50%;
  top: 0; bottom: 0;
  width: 2px;
  background: #14364c;
  transform: translateX(-50%);
}
.dp-timeline__item {
  position: relative;
  width: 50%;
  padding: 20px 40px;
  min-height: 80px;
}
.dp-timeline__item--right { margin-inline-start: auto; text-align: center; }
.dp-timeline__item--left  { margin-inline-end: auto   ;text-align:center; }

/* Horizontal connector lines from spine to text */
.dp-timeline__item--right::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-start: 0;
  width: 60px;
  height: 1px;
  background: #14364c;
}
.dp-timeline__item--left::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-end: 0;
  width: 60px;
  height: 1px;
  background: #14364c;
}

/* Circle nodes — replace year ribbon badges */
.dp-timeline__ribbon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 0;
  padding: 0;
  margin: 0;
  background: #14364c;
  border-radius: 50%;
}
.dp-timeline__ribbon span { display: none; }
.dp-timeline__ribbon::before,
.dp-timeline__ribbon--mirrored::before { display: none; }

.dp-timeline__item--right .dp-timeline__ribbon { inset-inline-start: -20px; }
.dp-timeline__item--left  .dp-timeline__ribbon { inset-inline-end: -20px; }

.dp-timeline__text {
  font-size: 16px; line-height: 1.8; color: #000;
  margin: 0;
}

/* ---------- Panel 3: Achievements ---------- */
.dp-achievements { max-width: 900px; }
.dp-achievements__heading {
  font-size: 22px; font-weight: 700; color: #14364c;
  margin-block: 24px 16px;
}
.dp-achievements__heading:first-child { margin-block-start: 0; }
.dp-achievements__list {
  list-style: none; padding: 0; margin: 0 0 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.dp-achievements__list li {
  position: relative;
  padding-inline-start: 28px;
  font-size: 16px; line-height: 1.9; color: #5d6b72;
}
.dp-achievements__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 12px;
  width: 5px; height: 5px;
  background: #5D6B72;
  border-radius: 50%;
}

/* ---------- Panel 4: Publications ---------- */
.dp-pubs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.dp-pub {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(20, 54, 76, 0.06);
  display: flex; flex-direction: column;
  padding-block-end: 20px;
}
[data-theme="dark"] .dp-pub { background: #1f2a33; box-shadow: none; border: 1px solid #2e3d48; }
.dp-pub__media { margin: 0; }
.dp-pub__image {
  width: 100%;
  aspect-ratio: 350 / 188;
  object-fit: cover;
  display: block;
}
.dp-pub__body { padding: 20px; flex: 1 1 auto; }
.dp-pub__title {
  font-size: 18px; font-weight: 700; color: #1a1a1a;
  margin: 0 0 10px;
}
[data-theme="dark"] .dp-pub__title { color: #ffffff; }
.dp-pub__excerpt {
  font-size: 14px; line-height: 1.8; color: #686868;
  margin: 0;
}
.dp-pub__cta {
  align-self: flex-start;
  margin-inline-start: 20px;
  display: inline-flex; align-items: center; gap: 10px;
  padding-inline: 20px;
  height: 44px;
  font-size: 14px;
  font-weight: 600;
}

/* ---------- Booking Form ---------- */
.dp-booking { padding-block: 60px; }
.dp-booking__card {
  background: #f4f5f8;
  border-radius: 30px;
  padding: 50px;
}
[data-theme="dark"] .dp-booking__card { background: #1f2a33; }
.dp-booking__title {
  font-size: 32px; font-weight: 700; color: #14364c;
  text-align: center;
  margin: 0 0 36px;
}
[data-theme="dark"] .dp-booking__title { color: #ffffff; }

.dp-booking__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.dp-booking__col--fields { display: flex; flex-direction: column; gap: 18px; }

.dp-field { display: flex; flex-direction: column; gap: 8px; }
.dp-field__label {
  font-size: 15px; font-weight: 600; color: #14364c;
  margin: 0;
}
[data-theme="dark"] .dp-field__label { color: #ffffff; }
.dp-field__input {
  border: 1px solid #bcbcbc;
  border-radius: 100px;
  height: 50px;
  padding-inline: 24px;
  background: #ffffff;
  color: #14364c;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dp-field__input:hover { border-color: #7ea6c6; }
.dp-field__input:focus {
  border-color: #2a74b1;
  box-shadow: 0 0 0 3px rgba(42, 116, 177, 0.22);
}
.dp-field__input--filled { background: #ffffff; }
.dp-field__input::placeholder { color: #989898; }

.dp-field__phone {
  position: relative;
  display: flex;
  align-items: center;
}
.dp-field__phone .dp-field__input {
  width: 100%;
  direction: rtl;
}
.dp-field__flag {
  position: absolute;
  inset-inline-start: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  left: 15px;
  right: unset;
  font-size: 14px;
  color: #5d6b72;
  pointer-events: none;
}
.dp-field__flag .fa-flag { color: #2a74b1; }

.dp-field__textarea {
  border: 1px solid #bcbcbc;
  border-radius: 24px;
  padding: 18px 24px;
  min-height: 258px;
  background: #ffffff;
  color: #14364c;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  resize: vertical;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dp-field__textarea:hover { border-color: #7ea6c6; }
.dp-field__textarea:focus {
  border-color: #2a74b1;
  box-shadow: 0 0 0 3px rgba(42, 116, 177, 0.22);
}
.dp-field__textarea::placeholder { color: #989898; }

/* Bootstrap-based fields (modals / misc forms): stronger, branded hover + focus */
.form-control { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.form-control:hover { border-color: #7ea6c6; }
.form-control:focus {
  border-color: #2a74b1;
  box-shadow: 0 0 0 3px rgba(42, 116, 177, 0.22);
}

.dp-booking__col--message { display: flex; flex-direction: column; }
.dp-booking__col--message .dp-field { flex: 1 1 auto; }

.dp-booking__actions { margin-block-start: 28px; display: flex; justify-content: center; }
.dp-booking__submit {
  min-width: 220px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 16px; font-weight: 600;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .dp-pubs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991.98px) {
  .dp-hero__card { aspect-ratio: 16 / 7; }
  .dp-hero__meta { flex-direction: column; align-items: flex-start; gap: 20px; padding-block: 24px 0; }
  .dp-hero__cta { margin-inline-start: 0; }
  .dp-tabs__nav { justify-content: flex-start; gap: 24px; overflow-x: auto; flex-wrap: nowrap; }
  .dp-tabs__item { white-space: nowrap; }
  .dp-timeline__spine { inset-inline-start: 20px; transform: none; }
  .dp-timeline__item { width: 100%; padding-inline-start: 50px; padding-inline-end: 0; margin: 0 !important; text-align: start !important; }
  .dp-timeline__ribbon::before,
  .dp-timeline__ribbon--mirrored::before {
    inset-inline-start: -10px;
    inset-inline-end: auto;
    border-inline-end: 10px solid #2a74b1;
    border-inline-start: none;
  }
  .dp-booking__grid { grid-template-columns: 1fr; }
  .dp-pubs { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .dp-hero { padding-block: 0 40px; }
  .dp-hero__name { font-size: 28px; }
  .dp-hero__specialty { font-size: 18px; }
  .dp-tabs__card { padding: 16px; }
  .dp-tabs__item { font-size: 15px; }
  .dp-booking__card { padding: 24px; }
  .dp-booking__title { font-size: 24px; }
}

/* ==========================================================================
   §32 CONTACT / BOOKING PAGE (contact.html)
   ========================================================================== */

.contact-section { padding-block: 50px 80px; }

.contact-form {
  max-width: 1110px;
  margin: 0 auto;
  background: #f4f5f8;
  border-radius: 20px;
  padding: 50px 60px;
}
[data-theme="dark"] .contact-form { background: #1f2a33; }

.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}

.contact-form__col--fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form__col--message { height: 100%; }
.contact-form__col--message .dp-field { height: 100%; display: flex; flex-direction: column; }
.contact-form__textarea {
    height: 200px;
 
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

/* Emphasized (filled/focused) name field */
.dp-field__label--emphasis { color: #14364c; }
.dp-field__input--emphasis {
  border-color: #14364c !important;
  color: #14364c;
  font-weight: 700;
}
[data-theme="dark"] .dp-field__label--emphasis { color: #ffffff; }
[data-theme="dark"] .dp-field__input--emphasis { border-color: #ffffff !important; color: #ffffff; }

/* Select wrapper with caret */
.dp-field__select { position: relative; }
.dp-field__input--select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  cursor: pointer;
  padding-inline-start: 40px;
  padding-inline-end: 24px;
  background-image: none;
}
.dp-field__caret {
  position: absolute;
  inset-inline-start: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #5d6b72;
  font-size: 14px;
  pointer-events: none;
}

/* Enhanced flag chip for phone */
.dp-field__flag-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 18px;
  border-radius: 5px;
  overflow: hidden;
  background: #2a74b1;
  color: #ffffff;
  font-size: 10px;
}
.dp-field__flag-chip img { width: 100%; height: 100%; object-fit: cover; }
.dp-field__flag-caret { color: #5d6b72; font-size: 12px; }

/* Submit button alignment — right-aligned within right column */
.contact-form__actions {
  margin-block-start: 10px;
  display: flex;
  justify-content: flex-start;
}
.contact-form__submit {
  min-width: 180px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-inline: 20px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 200px;
}
.contact-form__submit .dp-hero__cta-circle {
  background:transparent;
  color: #FFF;
  width: auto;
  height: auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .contact-form { padding: 30px; }
  .contact-form__grid { grid-template-columns: 1fr; gap: 20px; }
  .contact-form__textarea { min-height: 240px; }
}
@media (max-width: 575.98px) {
  .contact-section { padding-block: 30px 50px; }
  .contact-form { padding: 20px; border-radius: 16px; }
  .contact-form__row { grid-template-columns: 1fr; gap: 18px; }
  .contact-form__submit { width: 100%; }
}

/* ==========================================================================
   §40 — Dark mode component overrides
   (CSS-variable changes in html[data-theme="dark"] cover most cases;
    these rules handle the few components that use hardcoded hex colors.)
   ========================================================================== */

/* Top-bar social icon chips */
[data-theme="dark"] .top-bar__social-link {
  background-color: #1f3447;
  color: #8aafca;
}

/* Hero search pill */
[data-theme="dark"] .hero-search__pill {
  background: #102434;
  box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .hero-search__divider { background: #2a3e4f; }
[data-theme="dark"] .hero-search__select { color: #c9c9c9; }
[data-theme="dark"] .hero-search__select:valid { color: #ffffff; }
[data-theme="dark"] .hero-search__select option { background: #102434; color: #ffffff; }

/* Patient stories section */
[data-theme="dark"] .stories__featured {
  background: #102434;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .stories__title { color: #ffffff; }
[data-theme="dark"] .stories__desc { color: #c9c9c9; }
[data-theme="dark"] .stories__item { border-color: #2a3e4f; }
[data-theme="dark"] .stories__item-title { color: #ffffff; }
[data-theme="dark"] .stories__item-text { color: #c9c9c9; }
[data-theme="dark"] .stories__item-more { color: #ffffff; }
[data-theme="dark"] .stories__item-more:hover { color: rgba(255, 255, 255, 0.82); }

/* Stats band */
[data-theme="dark"] .stats { background: #0b1a28; }
[data-theme="dark"] .stats__desc { color: #c9c9c9; }
[data-theme="dark"] .stats__panel { background: #102434; }
[data-theme="dark"] .stats__card { background: #14364c; }

/* Awards section */
[data-theme="dark"] .awards__title { color: #ffffff; }
[data-theme="dark"] .awards__sub { color: #c9c9c9; }
[data-theme="dark"] .award-card {
  background: #14364c;
  box-shadow: none;
  border: 1px solid #2a3e4f;
}
[data-theme="dark"] .award-card__more { color: #8aafca; }

/* Social posts section heading */
[data-theme="dark"] .social-posts .section__heading { color: #ffffff; }

/* News section */
[data-theme="dark"] .news .section__heading { color: #ffffff; }
[data-theme="dark"] .news-card {
  background: #102434;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .news-card__title { color: #ffffff; }
[data-theme="dark"] .news-card__text { color: #c9c9c9; }

/* Footer bottom bar border */
[data-theme="dark"] .site-footer__bottom { border-color: #2a3e4f; }

/* Specialty cards (background uses --brand-navy which flips to white in dark mode) */
[data-theme="dark"] .spec-card { background-color: #14364c; }

/* Button hover (--brand-navy hover would give white bg + white text in dark) */
[data-theme="dark"] .btn-pill:hover { background: #0b1a28; color: #fff; }

/* Search button hover: same fix (base hover uses --brand-navy = white in dark) */
[data-theme="dark"] .hero-search__btn:hover { background: #0b1a28; color: #fff; }
[data-theme="dark"] .hero-search__btn:focus-visible { outline-color: #7bbde8; }

/* Hero-card active title uses --brand-navy (white in dark) — keep it readable */
[data-theme="dark"] .hero-card--active .hero-card__title { color: #ffffff; }

/* Navbar stuck shadow on dark */
[data-theme="dark"] .navbar.is-stuck { background: #0b1a28; }

/* ==========================================================================
   NEW INNER PAGES — SHARED UTILITIES
   ========================================================================== */

/* Section subtitle */
.section__sub {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-body);
  text-align: center;
  max-width: 700px;
  margin-inline: auto;
  margin-top: 12px;
  margin-bottom: 25px;
}

/* btn-pill modifier: primary (blue fill) */
.btn-pill--primary {
  background: var(--brand-blue);
  color: #fff;
}
.btn-pill--primary:hover,
.btn-pill--primary:focus {
  background: var(--brand-navy);
  color: #fff;
}

/* btn-pill modifier: small */
.btn-pill--sm {
  height: 38px;
  padding-inline: 22px;
  font-size: 14px;
  line-height: 38px;
}

/* btn-pill modifier: outline */
.btn-pill--outline {
  background: transparent;
  border: 2px solid var(--brand-blue);
  color: var(--brand-blue);
}
.btn-pill--outline:hover,
.btn-pill--outline:focus {
  background: var(--brand-blue);
  color: #fff;
}

/* ==========================================================================
   PATIENT VOICE PAGE — .voice-card
   ========================================================================== */

.voice-card {
  background: var(--bg-canvas);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.voice-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.18);
}

.voice-card__quote-icon {
  font-size: 36px;
  color: var(--brand-blue);
  line-height: 1;
}

.voice-card__text {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-body);
  border: none;
  padding: 0;
  margin: 0;
  flex: 1;
}

.voice-card__author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}

.voice-card__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.voice-card__avatar-placeholder {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--brand-blue);
  flex-shrink: 0;
}

.voice-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.voice-card__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.voice-card__dept {
  font-size: 13px;
  color: var(--text-muted);
}

.voice-card__stars {
  color: #f7a800;
  font-size: 13px;
  margin-top: 2px;
  letter-spacing: 2px;
}

/* ==========================================================================
   MY RECORDS PAGE — .records-feature-card
   ========================================================================== */

.records-feature-card {
  background: var(--bg-canvas);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: 36px 28px 32px;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.records-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.18);
}

.records-feature-card__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--brand-blue);
  flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease;
}
.records-feature-card:hover .records-feature-card__icon {
  background: var(--brand-blue);
  color: #fff;
}

.records-feature-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.records-feature-card__text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-body);
  margin: 0;
}

/* ==========================================================================
   OFFERS PAGE — .offer-card
   ========================================================================== */

.offer-card {
  background: var(--bg-canvas);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.offer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.18);
}

.offer-card__media {
  position: relative;
  overflow: hidden;
}
.offer-card__media img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.offer-card:hover .offer-card__media img {
  transform: scale(1.04);
}

.offer-card__badge {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  background: var(--accent-green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.offer-card__body {
  padding: 22px 22px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.offer-card__dept {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-blue);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.offer-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.5;
}

.offer-card__text {
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-body);
  margin: 0;
  flex: 1;
}

.offer-card__footer {
  padding: 14px 22px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.offer-card__validity {
  font-size: 12px;
  color: var(--text-muted);
}
.offer-card__validity i {
  margin-inline-end: 4px;
  color: var(--accent-teal);
}

/* ==========================================================================
   EVENTS PAGE — .event-card
   ========================================================================== */

.event-card {
  background: var(--bg-canvas);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.18);
}

.event-card__media {
  position: relative;
  overflow: hidden;
}
.event-card__media img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.event-card:hover .event-card__media img {
  transform: scale(1.04);
}

.event-card__date {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-start: 16px;
  background: var(--brand-blue);
  color: #fff;
  border-radius: var(--r-md);
  padding: 8px 14px;
  text-align: center;
  line-height: 1.2;
}

.event-card__date-day {
  display: block;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.event-card__date-month {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.9;
}

.event-card__body {
  padding: 22px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.event-card__category {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-blue);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.event-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.5;
}

.event-card__text {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-body);
  margin: 0;
  flex: 1;
}

.event-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: var(--text-muted);
}
.event-card__meta i {
  margin-inline-end: 5px;
  color: var(--brand-blue);
}

/* ==========================================================================
   PODCAST PAGE — .podcast__platforms + .podcast-card
   ========================================================================== */

.podcast__platforms {
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 52px;
}

.podcast__platforms-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-inline-end: 8px;
}

.podcast__platform-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding-inline: 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--brand-blue);
  background: transparent;
  color: var(--brand-blue);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
              color 0.22s ease, transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.22s ease;
}
.podcast__platform-btn:hover {
  background: var(--brand-blue);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px rgba(42, 116, 177, 0.5);
}
.podcast__platform-btn i {
  font-size: 16px;
}

.podcast-card {
  background: var(--bg-canvas);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.podcast-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.18);
}

.podcast-card__media {
  position: relative;
  overflow: hidden;
}
.podcast-card__media img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.podcast-card:hover .podcast-card__media img {
  transform: scale(1.04);
}

.podcast-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 54, 76, 0.45);
  transition: background 0.3s ease;
}
.podcast-card:hover .podcast-card__play {
  background: rgba(20, 54, 76, 0.65);
}

.podcast-card__play-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--brand-blue);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease;
}
.podcast-card:hover .podcast-card__play-btn {
  transform: scale(1.1);
}

.podcast-card__episode {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  background: var(--brand-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--r-pill);
}

.podcast-card__body {
  padding: 20px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.podcast-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.5;
}

.podcast-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: var(--text-muted);
}
.podcast-card__meta i {
  margin-inline-end: 5px;
  color: var(--brand-blue);
}

.podcast-card__text {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-body);
  margin: 0;
  flex: 1;
}

/* ==========================================================================
   CAREERS PAGE — .careers-why + .job-card
   ========================================================================== */

.careers-why {
  background: var(--bg-surface);
  padding-block: 60px;
}

.careers-why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.careers-why__item {
  background: var(--bg-canvas);
  border-radius: var(--r-xl);
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.careers-why__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.18);
}

.careers-why__icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--brand-blue);
  transition: background 0.3s ease, color 0.3s ease;
}
.careers-why__item:hover .careers-why__icon {
  background: var(--brand-blue);
  color: #fff;
}

.careers-why__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.careers-why__text {
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-body);
  margin: 0;
}

/* Jobs list */
.careers-jobs__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.job-card {
  background: var(--bg-canvas);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.job-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.18);
}

.job-card__icon {
  width: 58px;
  height: 58px;
  border-radius: var(--r-md);
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--brand-blue);
  flex-shrink: 0;
}

.job-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.job-card__dept {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-blue);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.job-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.job-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.job-card__tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  background: var(--bg-surface);
  color: var(--text-body);
  border: 1px solid transparent;
}
.job-card__tag--type {
  background: rgba(42, 116, 177, 0.1);
  color: var(--brand-blue);
}
.job-card__tag--location {
  background: rgba(76, 149, 60, 0.1);
  color: var(--accent-green);
}

.job-card__action {
  flex-shrink: 0;
}

/* ==========================================================================
   DARK MODE — NEW PAGES
   ========================================================================== */

/* Shared */
[data-theme="dark"] .section__sub { color: #c9c9c9; }

/* Voice card */
[data-theme="dark"] .voice-card {
  background: #102434;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .voice-card__text { color: #c9c9c9; }
[data-theme="dark"] .voice-card__name { color: #ffffff; }
[data-theme="dark"] .voice-card__dept,
[data-theme="dark"] .voice-card__stars { color: #9ab; }
[data-theme="dark"] .voice-card__avatar-placeholder { background: #1a3a52; }

/* Records feature card */
[data-theme="dark"] .records-feature-card {
  background: #102434;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .records-feature-card__icon { background: #1a3a52; }
[data-theme="dark"] .records-feature-card__title { color: #ffffff; }
[data-theme="dark"] .records-feature-card__text { color: #c9c9c9; }

/* Offer card */
[data-theme="dark"] .offer-card {
  background: #102434;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .offer-card__title { color: #ffffff; }
[data-theme="dark"] .offer-card__text { color: #c9c9c9; }
[data-theme="dark"] .offer-card__validity { color: #9ab; }

/* Event card */
[data-theme="dark"] .event-card {
  background: #102434;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .event-card__title { color: #ffffff; }
[data-theme="dark"] .event-card__text { color: #c9c9c9; }
[data-theme="dark"] .event-card__meta { color: #9ab; }

/* Podcast */
[data-theme="dark"] .podcast__platforms { background: #0d1e2c; }
[data-theme="dark"] .podcast__platforms-label { color: #ffffff; }
[data-theme="dark"] .podcast__platform-btn {
  border-color: #2a74b1;
  color: #7bbde8;
}
[data-theme="dark"] .podcast__platform-btn:hover {
  background: var(--brand-blue);
  color: #fff;
}
[data-theme="dark"] .podcast-card {
  background: #102434;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .podcast-card__title { color: #ffffff; }
[data-theme="dark"] .podcast-card__text { color: #c9c9c9; }
[data-theme="dark"] .podcast-card__meta { color: #9ab; }
[data-theme="dark"] .podcast-card__play-btn { background: #0d1e2c; color: #7bbde8; }

/* Careers */
[data-theme="dark"] .careers-why { background: #0d1e2c; }
[data-theme="dark"] .careers-why__item {
  background: #102434;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .careers-why__icon { background: #1a3a52; }
[data-theme="dark"] .careers-why__title { color: #ffffff; }
[data-theme="dark"] .careers-why__text { color: #c9c9c9; }

[data-theme="dark"] .job-card {
  background: #102434;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .job-card__icon { background: #1a3a52; }
[data-theme="dark"] .job-card__title { color: #ffffff; }
[data-theme="dark"] .job-card__tag { background: #1a3a52; color: #c9c9c9; border-color: #2a3e4f; }
[data-theme="dark"] .job-card__tag--type { background: rgba(42, 116, 177, 0.2); color: #7bbde8; }
[data-theme="dark"] .job-card__tag--location { background: rgba(76, 149, 60, 0.2); color: #7ec86e; }

/* btn-pill outline dark */
[data-theme="dark"] .btn-pill--outline {
  border-color: #7bbde8;
  color: #7bbde8;
}
[data-theme="dark"] .btn-pill--outline:hover {
  background: var(--brand-blue);
  color: #fff;
}

/* ==========================================================================
   INVESTORS PAGE — .investors-intro + .investors-stat + .report-card
   ========================================================================== */

.investors-intro { background: #fff; padding-block: 70px; }

.investors-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.investors-intro__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.investors-intro__body {
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-body);
  margin: 0;
}

.investors-intro__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.investors-stat {
  background: var(--bg-canvas);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  transition: transform 0.3s ease;
}
.investors-stat:hover { transform: translateY(-3px); }

.investors-stat__num {
  font-size: 42px;
  font-weight: 800;
  color: var(--brand-blue);
  line-height: 1;
}

.investors-stat__unit {
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-blue);
  line-height: 1;
  margin-inline-start: 2px;
}

.investors-stat__label {
  font-size: 14px;
  color: var(--text-body);
  margin-top: 4px;
}

/* Reports section */
.investors-reports { background: var(--bg-canvas); padding-block: 70px; }

.investors-reports__grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-block-start: 36px;
}

.report-card {
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.report-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.report-card__icon {
  width: 54px;
  height: 54px;
  border-radius: var(--r-md);
  background: rgba(42, 116, 177, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--brand-blue);
  flex-shrink: 0;
}

.report-card__body { flex: 1; min-width: 0; }

.report-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.report-card__text {
  font-size: 13px;
  color: var(--text-body);
  margin: 0;
}

.report-card__btn { flex-shrink: 0; }

/* Dark mode — investors */
[data-theme="dark"] .investors-intro { background: #0d1e2c; }
[data-theme="dark"] .investors-stat {
  background: #102434;
  box-shadow: 0 0 14px 0 rgba(0,0,0,0.5);
}
[data-theme="dark"] .investors-stat__label { color: #c9c9c9; }
[data-theme="dark"] .investors-reports { background: #0b1a28; }
[data-theme="dark"] .report-card { background: #102434; }
[data-theme="dark"] .report-card:hover { box-shadow: 0 0 14px 0 rgba(0,0,0,0.5); }
[data-theme="dark"] .report-card__title { color: #ffffff; }
[data-theme="dark"] .report-card__text { color: #c9c9c9; }
[data-theme="dark"] .report-card__icon { background: rgba(42,116,177,0.2); }

/* ==========================================================================
   LOGIN PAGE — .login-card + .login-form
   ========================================================================== */

.login-section { background: var(--bg-surface); padding-block: 70px; }

.login-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.login-card {
  background: var(--bg-canvas);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: 44px 40px;
  width: 100%;
  max-width: 480px;
}

.login-card__header {
  text-align: center;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.login-card__logo {
  height: 52px;
  width: auto;
  object-fit: contain;
}

.login-card__title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.login-card__sub {
  font-size: 14px;
  color: var(--text-body);
  margin: 0;
  line-height: 1.7;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-form__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-form__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.login-form__input {
  width: 100%;
  height: 50px;
  border: 1.5px solid #d8dee3;
  border-radius: var(--r-md);
  background: var(--bg-surface);
  padding-inline: 16px;
  font-size: 15px;
  color: var(--text-primary);
  transition: border-color 0.25s ease, background 0.25s ease;
  outline: none;
  direction: rtl;
}
.login-form__input:hover { border-color: #7ea6c6; }
.login-form__input:focus {
  border-color: var(--brand-blue);
  background: var(--bg-canvas);
  box-shadow: 0 0 0 3px rgba(42, 116, 177, 0.22);
}
.login-form__input::placeholder { color: #aab; }

.login-form__password-wrap {
  position: relative;
}
.login-form__password-wrap .login-form__input {
  padding-inline-end: 48px;
}

.login-form__eye {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 14px;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  transition: color 0.2s ease;
}
.login-form__eye:hover { color: var(--brand-blue); }

.login-form__options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: -4px;
}

.login-form__remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-body);
  cursor: pointer;
  margin: 0;
}

.login-form__checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-blue);
  cursor: pointer;
}

.login-form__forgot {
  font-size: 14px;
  color: var(--brand-blue);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.login-form__forgot:hover { text-decoration: underline; }

.login-form__submit {
  width: 100%;
  height: 52px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
}

.login-form__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 13px;
}
.login-form__divider::before,
.login-form__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #d8dee3;
}

.login-form__register {
  text-align: center;
  font-size: 14px;
  color: var(--text-body);
  margin: 0;
}

.login-form__register-link {
  color: var(--brand-blue);
  font-weight: 700;
  text-decoration: none;
}
.login-form__register-link:hover { text-decoration: underline; }

/* Dark mode — login */
[data-theme="dark"] .login-section { background: #0d1e2c; }
[data-theme="dark"] .login-card {
  background: #102434;
  box-shadow: 0 0 14px 0 rgba(0,0,0,0.5);
}
[data-theme="dark"] .login-card__title { color: #ffffff; }
[data-theme="dark"] .login-card__sub { color: #c9c9c9; }
[data-theme="dark"] .login-form__label { color: #ffffff; }
[data-theme="dark"] .login-form__input {
  background: #0b1a28;
  border-color: #2a3e4f;
  color: #ffffff;
}
[data-theme="dark"] .login-form__input:focus { border-color: var(--brand-blue); background: #0b1a28; }
[data-theme="dark"] .login-form__eye { color: #9ab; }
[data-theme="dark"] .login-form__remember { color: #c9c9c9; }
[data-theme="dark"] .login-form__divider { color: #9ab; }
[data-theme="dark"] .login-form__divider::before,
[data-theme="dark"] .login-form__divider::after { background: #2a3e4f; }
[data-theme="dark"] .login-form__register { color: #c9c9c9; }

/* ==========================================================================
   FACILITIES PAGE — .facilities-card
   ========================================================================== */

.facilities { background: var(--bg-canvas); padding-block: 70px; }

.facilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-block-start: 36px;
}

.facilities-card {
  background: var(--bg-surface);
  border-radius: var(--r-xl);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.facilities-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  background: var(--bg-canvas);
}

.facilities-card__icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(42, 116, 177, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--brand-blue);
  flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease;
}
.facilities-card:hover .facilities-card__icon {
  background: var(--brand-blue);
  color: #fff;
}

.facilities-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.facilities-card__text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-body);
  margin: 0;
}

/* Dark mode — facilities */
[data-theme="dark"] .facilities { background: #0b1a28; }
[data-theme="dark"] .facilities-card { background: #102434; }
[data-theme="dark"] .facilities-card:hover { background: #102434; box-shadow: 0 8px 28px rgba(0,0,0,0.4); }
[data-theme="dark"] .facilities-card__icon { background: rgba(42,116,177,0.2); }
[data-theme="dark"] .facilities-card__title { color: #ffffff; }
[data-theme="dark"] .facilities-card__text { color: #c9c9c9; }

/* ==========================================================================
   BLOG PAGE — .blog-card
   ========================================================================== */

.blog { background: var(--bg-canvas); padding-block: 70px; }

.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-block-start: 36px;
}

.blog-card {
  background: var(--bg-canvas);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px 0 rgba(0,0,0,0.18);
}

.blog-card__media {
  position: relative;
  overflow: hidden;
  margin: 0;
}
.blog-card__media img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.blog-card:hover .blog-card__media img { transform: scale(1.04); }

.blog-card__tag {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 14px;
  background: var(--brand-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: var(--r-pill);
}

.blog-card__body {
  padding: 22px 22px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.blog-card__meta {
  font-size: 12px;
  color: var(--text-muted);
}
.blog-card__meta i { margin-inline-end: 4px; color: var(--brand-blue); }

.blog-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.6;
}

.blog-card__text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-body);
  margin: 0;
  flex: 1;
}

.blog-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-blue);
  text-decoration: none;
  margin-top: auto;
  transition: gap 0.2s ease;
}
.blog-card__more:hover { gap: 10px; color: var(--brand-navy); text-decoration: none; }
.blog-card__more i { font-size: 12px; }

/* Dark mode — blog */
[data-theme="dark"] .blog { background: #0b1a28; }
[data-theme="dark"] .blog-card {
  background: #102434;
  box-shadow: 0 0 14px 0 rgba(0,0,0,0.5);
}
[data-theme="dark"] .blog-card__meta { color: #9ab; }
[data-theme="dark"] .blog-card__title { color: #ffffff; }
[data-theme="dark"] .blog-card__text { color: #c9c9c9; }

/* ==========================================================================
   NEWS PAGE — add missing .news-card__body + .news-card__date
   ========================================================================== */

.news-card__body {
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-card__date {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-blue);
  margin-block-start: 16px;
  margin-inline: 20px;
  display: block;
}

[data-theme="dark"] .news-card__date { color: #7bbde8; }

/* ==========================================================================
   PATIENTS PAGE — .patients-info-card + .patients-steps
   ========================================================================== */

.patients-intro { background: var(--bg-canvas); padding-block: 70px; }

.patients-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-block-start: 36px;
}

.patients-info-card {
  background: var(--bg-surface);
  border-radius: var(--r-xl);
  padding: 30px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.patients-info-card:hover .patients-info-card__title {
  color: var(--brand-blue);
}
.patients-info-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  background: var(--bg-canvas);
}

.patients-info-card__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(42, 116, 177, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--brand-blue);
  flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease;
}
.patients-info-card:hover .patients-info-card__icon {
  background: var(--brand-blue);
  color: #fff;
}

.patients-info-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.patients-info-card__text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-body);
  margin: 0;
}

/* Patients steps */
.patients-steps { background: #fff; padding-block: 70px; }

.patients-steps__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-block-start: 36px;
  position: relative;
}
.patients-steps__list::before {
  content: "";
  position: absolute;
  inset-inline-start: 28px;
  inset-block-start: 28px;
  inset-block-end: 28px;
  width: 2px;
  background: var(--brand-blue);
  opacity: 0.2;
}

.patients-steps__item {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 28px 0;
  position: relative;
}
.patients-steps__item + .patients-steps__item {
  border-block-start: 1px solid rgba(42, 116, 177, 0.1);
}

.patients-steps__num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-blue);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 16px rgba(42, 116, 177, 0.3);
}

.patients-steps__content {
  flex: 1;
  padding-block-start: 6px;
}

.patients-steps__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.patients-steps__text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-body);
  margin: 0;
}

/* Dark mode — patients */
[data-theme="dark"] .patients-intro { background: #0b1a28; }
[data-theme="dark"] .patients-info-card { background: #102434; }
[data-theme="dark"] .patients-info-card:hover { background: #102434; box-shadow: 0 8px 28px rgba(0,0,0,0.4); }
[data-theme="dark"] .patients-info-card__icon { background: rgba(42,116,177,0.2); }
[data-theme="dark"] .patients-info-card__title { color: #ffffff; }
[data-theme="dark"] .patients-info-card__text { color: #c9c9c9; }
[data-theme="dark"] .patients-steps { background: #0d1e2c; }
[data-theme="dark"] .patients-steps__item { border-color: #2a3e4f; }
[data-theme="dark"] .patients-steps__title { color: #ffffff; }
[data-theme="dark"] .patients-steps__text { color: #c9c9c9; }

/* ==========================================================================
   RESPONSIVE — NEW PAGES
   ========================================================================== */

@media (max-width: 991px) {
  .careers-why__grid { grid-template-columns: repeat(2, 1fr); }
  .job-card { flex-wrap: wrap; }
  .job-card__action { width: 100%; text-align: end; }

  /* Investors */
  .investors-intro__grid { grid-template-columns: 1fr; gap: 40px; }

  /* Facilities + Blog */
  .facilities-grid { grid-template-columns: repeat(2, 1fr); }
  .blog__grid { grid-template-columns: repeat(2, 1fr); }

  /* Patients */
  .patients-info-grid { grid-template-columns: repeat(2, 1fr); }
  .patients-steps__list::before { display: none; }
}

@media (max-width: 575px) {
  .careers-why__grid { grid-template-columns: 1fr; }
  .podcast__platforms { padding: 20px; }
  .podcast__platforms-label { width: 100%; }
  .offer-card__footer { flex-direction: column; align-items: flex-start; }
  .job-card { padding: 20px; }
  .voice-card { padding: 24px 20px 20px; }

  /* Investors */
  .investors-intro__stats { grid-template-columns: 1fr 1fr; }
  .investors-stat__num { font-size: 32px; }

  /* Login */
  .login-card { padding: 32px 22px; }

  /* Facilities + Blog */
  .facilities-grid { grid-template-columns: 1fr; }
  .blog__grid { grid-template-columns: 1fr; }

  /* Patients */
  .patients-info-grid { grid-template-columns: 1fr; }
  .patients-steps__item { gap: 16px; }
  .patients-steps__num { width: 46px; height: 46px; font-size: 16px; }
}

.dept-services__card {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    background: #ffffff !important;
    border-radius: 18px !important;
}

.dept-services__card table {
    width: 100% !important;
    min-width: 900px !important;
    max-width: none !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid rgba(20, 54, 76, 0.14) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 18px 45px rgba(20, 54, 76, 0.10) !important;
    table-layout: auto !important;
}

.dept-services__card table tr {
    background: #ffffff !important;
}

.dept-services__card table tr:nth-child(even) {
    background: #f5f7f9 !important;
}

.dept-services__card table td {
    padding: 22px 28px !important;
    border: 0 !important;
    border-left: 1px solid rgba(20, 54, 76, 0.12) !important;
    border-bottom: 1px solid rgba(20, 54, 76, 0.12) !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: #14364c !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
}

.dept-services__card table tr td:last-child {
    border-left: 0 !important;
}

.dept-services__card table tr:last-child td {
    border-bottom: 0 !important;
}

.dept-services__card table td:hover {
    background: #f4f5f8 !important;
    color: #00243a !important;
}

.dept-services__card table ul,
.dept-services__card table ol {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    list-style-type: none !important;
}

.dept-services__card table li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    list-style-type: none !important;
    color: #14364c !important;
    white-space: nowrap !important;
}

.dept-services__card table li::marker {
    content: "" !important;
    font-size: 0 !important;
}

.dept-services__card table li::before,
.dept-services__card table li::after,
.dept-services__card table ul li::before,
.dept-services__card table ul li::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

.dept-services__card #gtx-trans {
    display: none !important;
}

@media (max-width: 991px) {
    .dept-services__card table {
        min-width: 820px !important;
    }

    .dept-services__card table td {
        padding: 18px 22px !important;
        font-size: 15px !important;
    }
    .hero-search__field{
        margin-bottom : 20px;
        width: 100%;
    }
}

        /* ======================================================
           ======================================================
                            ** BackEnd Style **
           ======================================================
           ====================================================== */


/* ######## ######## ######## */
/* ######## active navbar ######## */
/* ######## ######## ######## */

.top-bar__menu a {
  position: relative;
  padding: 4px 0;
  color: var(--text-body);
  text-decoration: none;
  transition: color 0.25s ease;
}

/* لما يكون الرابط فعال */
.top-bar__menu a.active {
  color: var(--brand-blue); /* لون النص للرابط الحالي */
}

/* خط تحت الرابط الحالي */
.top-bar__menu a.active::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  height: 3px; /* سماكة الخط */
  width: 100%;
  background-color: var(--brand-blue);
  border-radius: 2px;
}

/* لو حبيت التظليل بدل الخط */
.top-bar__menu a.active.highlight {
  background-color: rgba(42, 116, 177, 0.1);
  border-radius: 6px;
  padding: 4px 6px;
}

 /* ######## ######## ######## */
 /* ######## HTML dir ######## */
 /* ######## ######## ######## */

/* جسم الصفحة */
html[dir="ltr"] body {
  direction: ltr;
  text-align: left;
}

html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

/* عناصر متوافقة مع LTR/RTL */
html[dir="ltr"] .text-start  { text-align: left !important; }
html[dir="ltr"] .text-end    { text-align: right !important; }
html[dir="ltr"] .float-start { float: left !important; }
html[dir="ltr"] .float-end   { float: right !important; }

html[dir="rtl"] .text-start  { text-align: right !important; }
html[dir="rtl"] .text-end    { text-align: left !important; }
html[dir="rtl"] .float-start { float: right !important; }
html[dir="rtl"] .float-end   { float: left !important; }

/* تعديل الفليكس والـ grid */
html[dir="ltr"] .d-flex, html[dir="ltr"] .flex-row { flex-direction: row !important; }
html[dir="rtl"] .d-flex, html[dir="rtl"] .flex-row { flex-direction: row-reverse !important; }

html[dir="ltr"] .justify-start { justify-content: flex-start !important; }
html[dir="ltr"] .justify-end   { justify-content: flex-end !important; }
html[dir="rtl"] .justify-start { justify-content: flex-end !important; }
html[dir="rtl"] .justify-end   { justify-content: flex-start !important; }

/* تعديل الهوامش padding/margin منطقية */
html[dir="ltr"] [class*="pl-"] { padding-left: var(--pl-value) !important; }
html[dir="ltr"] [class*="pr-"] { padding-right: var(--pr-value) !important; }
html[dir="rtl"] [class*="pl-"] { padding-right: var(--pl-value) !important; }
html[dir="rtl"] [class*="pr-"] { padding-left: var(--pr-value) !important; }

html[dir="ltr"] [class*="ml-"] { margin-left: var(--ml-value) !important; }
html[dir="ltr"] [class*="mr-"] { margin-right: var(--mr-value) !important; }
html[dir="rtl"] [class*="ml-"] { margin-right: var(--ml-value) !important; }
html[dir="rtl"] [class*="mr-"] { margin-left: var(--mr-value) !important; }

/* Pagination, Hero cards, Tab markers flip تلقائيًا */
html[dir="rtl"] .pagination__chev { transform: rotate(180deg); }

html[dir="rtl"] .spec-tabs__item > a.active .spec-tabs__marker::after { transform: translateX(0); }
html[dir="ltr"] .dp-tabs__item--active::after{
        inset-inline-end: 50%;
            inset-inline-start: unset;
}



/*
 * درع الحماية من أي سكربت تاني:
 * أثناء الكتابة (is-typing) وبعدها (typed-done)
 * العنصر مجبور يفضل ظاهر — !important بيكسب أي inline style
 */
[data-hero-slider] .js-hero-title.is-typing,
[data-hero-slider] .js-hero-title.typed-done,
[data-hero-slider] .hero__desc.is-typing,
[data-hero-slider] .hero__desc.typed-done {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
}
 
/* مؤشر الكتابة | — بيظهر في الشريحة النشطة بس */
[data-hero-slider] .owl-item.active .js-hero-title.is-typing::after,
[data-hero-slider] .owl-item.active .hero__desc.is-typing::after {
  content: "|";
  display: inline-block;
  margin-inline-start: 2px;
  animation: heroCursorBlink 0.7s step-end infinite;
}
@keyframes heroCursorBlink { 50% { opacity: 0; } }
 
/* عشان الارتفاع ميتنططش أثناء الكتابة */
[data-hero-slider] .js-hero-title,
[data-hero-slider] .hero__desc { min-height: 1.5em; }

/* ========================================================================
   Reusable reveal (slide-in) — right / left
   الاستخدام:
     .reveal-x           → حسب اتجاه الصفحة (عربي: من الشمال | إنجليزي: من اليمين)
     .reveal-from-left   → يدخل دايمًا من الشمال (يتحرك لليمين)
     .reveal-from-right  → يدخل دايمًا من اليمين (يتحرك للشمال)
   ستاجر اختياري: data-reveal-delay="120" (بالملي ثانية)
   بيتفعّل تلقائيًا بـ RevealX في main.js (بعد اللودينج في الهوم).
   ======================================================================== */
.reveal-x,
.reveal-x-reverse,
.reveal-from-left,
.reveal-from-right,
.reveal-down,
.reveal-up {
  opacity: 0;
  will-change: opacity, transform;
}
/* reveal-x: حسب اتجاه الصفحة (rtl: من الشمال | ltr: من اليمين) */
html[dir="rtl"] .reveal-x { transform: translateX(-48px); }
html[dir="ltr"] .reveal-x { transform: translateX(48px); }
/* reveal-x-reverse: عكس اتجاه الصفحة (rtl: من اليمين | ltr: من الشمال) */
html[dir="rtl"] .reveal-x-reverse { transform: translateX(48px); }
html[dir="ltr"] .reveal-x-reverse { transform: translateX(-48px); }
/* ثابت بغض النظر عن الاتجاه */
.reveal-from-left  { transform: translateX(-48px); }
.reveal-from-right { transform: translateX(48px); }
/* reveal-down: نزول من فوق | reveal-up: طلوع من تحت */
.reveal-down { transform: translateY(-24px); }
.reveal-up   { transform: translateY(24px); }

.reveal-x.is-in,
.reveal-x-reverse.is-in,
.reveal-from-left.is-in,
.reveal-from-right.is-in,
.reveal-down.is-in,
.reveal-up.is-in {
  animation: revealSlideIn 1.7s cubic-bezier(.22, .61, .36, 1) both;
}
/* مُعدّل: حركة أبطأ لعناصر معيّنة */
.reveal-x.reveal-slow.is-in,
.reveal-x-reverse.reveal-slow.is-in,
.reveal-from-left.reveal-slow.is-in,
.reveal-from-right.reveal-slow.is-in,
.reveal-down.reveal-slow.is-in,
.reveal-up.reveal-slow.is-in {
  animation-duration: 2.2s;
}
@keyframes revealSlideIn {
  from { opacity: 0; }
  to   { opacity: 1; transform: translate(0, 0); }
}

/* عنوان الصفحة (أعلى الصفحة): زوم + نزول من فوق */
.page-title-band__title.reveal-down {
  transform: translateY(-30px) scale(0.9);
}
.page-title-band__title.reveal-down.is-in {
  animation: revealZoomDown 2.3s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes revealZoomDown {
  from { opacity: 0; }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* عناوين السكاشن: زوم + دخول من اليمين (rtl) / من الشمال (ltr) */
html[dir="rtl"] .section__heading.reveal-down { transform: translateX(42px) scale(0.9); }
html[dir="ltr"] .section__heading.reveal-down { transform: translateX(-42px) scale(0.9); }
.section__heading.reveal-down.is-in {
  animation: revealZoomRight 2.3s cubic-bezier(.22, .61, .36, 1) both;
}

/* الوصف اللي تحت عنوان السكشن: دخول من الشمال (rtl) / من اليمين (ltr) */
html[dir="rtl"] .section__sub.reveal-down { transform: translateX(-42px); }
html[dir="ltr"] .section__sub.reveal-down { transform: translateX(42px); }

/* reveal-zoom-right: يجي من اليمين + زوم (rtl) / من الشمال (ltr) */
.reveal-zoom-right { opacity: 0; }
html[dir="rtl"] .reveal-zoom-right { transform: translateX(48px) scale(0.9); }
html[dir="ltr"] .reveal-zoom-right { transform: translateX(-48px) scale(0.9); }
.reveal-zoom-right.is-in {
  animation: revealZoomRight 1.9s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes revealZoomRight {
  from { opacity: 0; }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-zoom-right {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-x,
  .reveal-x-reverse,
  .reveal-from-left,
  .reveal-from-right,
  .reveal-down,
  .reveal-up {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}
/* ==================================================
   Hero side cards
   إظهار 3 كروت فقط مع Scroll على كل المقاسات
================================================== */

.hero__inner {
    align-items: stretch !important;
    min-width: 0;
}

.hero__features.hero__side-slider {
    /* قيم احتياطية للديسكتوب */
    --hero-side-height: 455px;
    --hero-card-height: 150px;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0 !important;

    width: 100% !important;
    min-width: 0 !important;

    height: var(--hero-side-height, 510px) !important;
    min-height: var(--hero-side-height, 510px) !important;
    max-height: var(--hero-side-height, 510px) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    box-sizing: border-box;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;

    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #119c95 #e6f5f4;
}

/* كل كارت يأخذ ثلث ارتفاع القائمة */
.hero__features.hero__side-slider > .hero-card {
    box-sizing: border-box;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: var(--hero-card-height, 170px) !important;
    min-height: var(--hero-card-height, 170px) !important;
    max-height: var(--hero-card-height, 170px) !important;

    flex: 0 0 var(--hero-card-height, 170px) !important;

    margin: 0 !important;
    overflow: hidden;
}

.hero__features.hero__side-slider .hero-card__icon {
    flex-shrink: 0;
}

.hero__features.hero__side-slider .hero-card__icon img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.hero__features.hero__side-slider .hero-card__body {
    min-width: 0;
    overflow: hidden;
}

/* Chrome / Edge / Safari */
.hero__features.hero__side-slider::-webkit-scrollbar {
    width: 7px;
}

.hero__features.hero__side-slider::-webkit-scrollbar-track {
    background: #e6f5f4;
    border-radius: 999px;
}

.hero__features.hero__side-slider::-webkit-scrollbar-thumb {
    background: #119c95;
    border-radius: 999px;
    border: 1px solid #e6f5f4;
}

.hero__features.hero__side-slider::-webkit-scrollbar-thumb:hover {
    background: #087b76;
}

/* ==================================================
   Tablet
   3 كروت × 150px = 450px
================================================== */

@media (max-width: 991px) {
    .hero__features.hero__side-slider {
        --hero-side-height: 450px;
        --hero-card-height: 150px;

        height: var(--hero-side-height, 450px) !important;
        min-height: var(--hero-side-height, 450px) !important;
        max-height: var(--hero-side-height, 450px) !important;
    }

    .hero__features.hero__side-slider > .hero-card {
        height: var(--hero-card-height, 150px) !important;
        min-height: var(--hero-card-height, 150px) !important;
        max-height: var(--hero-card-height, 150px) !important;

        flex: 0 0 var(--hero-card-height, 150px) !important;

        padding: 14px 16px !important;
    }

    .hero__features.hero__side-slider::-webkit-scrollbar {
        width: 6px;
    }
}

/* ==================================================
   Mobile
   3 كروت × 132px = 396px
================================================== */

@media (max-width: 575px) {
    .hero__features.hero__side-slider {
        --hero-side-height: 396px;
        --hero-card-height: 132px;

        height: var(--hero-side-height, 396px) !important;
        min-height: var(--hero-side-height, 396px) !important;
        max-height: var(--hero-side-height, 396px) !important;
    }

    .hero__features.hero__side-slider > .hero-card {
        height: var(--hero-card-height, 132px) !important;
        min-height: var(--hero-card-height, 132px) !important;
        max-height: var(--hero-card-height, 132px) !important;

        flex: 0 0 var(--hero-card-height, 132px) !important;

        padding: 10px 12px !important;
        gap: 10px !important;
    }

    .hero__features.hero__side-slider .hero-card__title {
        font-size: 16px !important;
        line-height: 1.4;
        margin-bottom: 5px;
    }

    .hero__features.hero__side-slider .hero-card__text {
        font-size: 13px !important;
        line-height: 1.5;
        margin-bottom: 0;
    }

    .hero__features.hero__side-slider::-webkit-scrollbar {
        width: 5px;
    }
}