/* ─── LOCAL FONTS ─── */
@font-face {
  font-family: 'Gulzar';
  src: url('../fonts/Gulzar-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/IBMPlexSansArabic-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/IBMPlexSansArabic-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/IBMPlexSansArabic-Light-2.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/IBMPlexSansArabic-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/IBMPlexSansArabic-Bold-3.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --gold: #C19741;
  --gold-dark: #A98239;
  --gold-light: #D4AA5A;
  --crimson: #851532;
  --pink: #F4949E;
  --lime: #E0E785;
  --text-dark: #1A1818;
  --text-gray: #676666;
  --bg-light: #F9F9F9;
  --teal: #2D7B8A;
  --teal-light: #A2DADF;
  --white: #FFFFFF;
  --border: #E0E0E0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { direction: rtl; scroll-behavior: smooth; }

body {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; }

/* ─── BUTTONS ─── */
.btn {
  display: inline-block;
  padding: 10px 28px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .25s;
}
.btn-primary { background: var(--gold); color: var(--white); }
.btn-primary:hover { background: var(--gold-dark); }
.btn-outline { background: transparent; color: var(--text-dark); border-color: var(--text-dark); }
.btn-outline:hover { background: var(--text-dark); color: var(--white); }
.btn-white { background: var(--white); color: var(--gold-dark); }
.btn-white:hover { background: var(--gold); color: var(--white); }
.btn-crimson { background: var(--crimson); color: var(--white); }
.btn-crimson:hover { background: #6b1028; }

/* ─── HEADER ─── */
header {
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 16px;
}
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo img { height: 52px; width: auto; object-fit: contain; }
.footer-logo img { height: 48px; width: auto; object-fit: contain; }

nav { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; }
nav a {
  color: var(--text-dark);
  font-size: 14px;
  font-weight: 400;
  padding: 6px 10px;
  border-radius: 5px;
  transition: color .2s, background .2s;
  white-space: nowrap;
  position: relative;
}
nav a:hover, nav a.active { color: var(--gold-dark); background: rgba(193,151,65,.08); }
.nav-arrow { font-size: 10px; margin-right: 2px; }

/* dropdown — padding-top bridges the gap so hover isn't lost */
.nav-dropdown { position: relative; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: 8px;
  min-width: 190px;
  z-index: 200;
}
.dropdown-menu-inner {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  overflow: hidden;
}
.nav-dropdown.open .dropdown-menu,
.nav-dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu a {
  display: block;
  color: var(--text-dark);
  font-size: 14px;
  font-weight: 400;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  transition: background .15s, color .15s;
}
.dropdown-menu a:last-child { border-bottom: none; }
.dropdown-menu a:hover { background: var(--bg-light); color: var(--gold-dark); }

.header-actions { display: flex; gap: 10px; flex-shrink: 0; align-items: center; }
.btn-header-outline {
  background: transparent;
  color: var(--teal);
  border: 1.5px solid var(--teal);
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  transition: background .2s, color .2s;
}
.btn-header-outline:hover { background: var(--teal); color: var(--white); }
.btn-header-fill {
  background: var(--teal);
  color: var(--white);
  border: 1.5px solid var(--teal);
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  transition: background .2s, border-color .2s;
}
.btn-header-fill:hover { background: #245f6b; border-color: #245f6b; }

.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-dark);
  margin: 5px 0;
  transition: all .3s;
}

/* ─── HERO ─── */
.hero {
  background: var(--white);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-img-left {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 88%;
  width: auto;
  max-width: 42%;
  object-fit: contain;
  object-position: bottom left;
  pointer-events: none;
  user-select: none;
}
.hero-img-right {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 88%;
  width: auto;
  max-width: 42%;
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
  user-select: none;
  transform: scaleX(-1);
}
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 40px;
}

/* PNG is 3508×2481 — top ~45% is blank space.
   Negative margin clips it so only the artwork is visible. */
.hero-title-img {
  display: block;
  width: min(1000px, 90vw);
  max-width: none;
  /* trim blank top: -(image_height * 0.45) = -(width * 0.7075 * 0.45) ≈ -31.8% of own width
     expressed as % of parent → ~-28vw at full width */
  margin-top: -27%;
  margin-bottom: -2%;
  pointer-events: none;
  user-select: none;
}

.hero-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: nowrap;
}

.btn-hero {
  background: var(--teal-light);
  color: var(--text-dark);
  border: none;
  border-radius: 30px;
  padding: 10px 30px;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  transition: background .2s, transform .15s;
  display: inline-block;
  text-decoration: none;
}
.btn-hero:hover { background: var(--teal); color: var(--white); transform: translateY(-1px); }

/* ─── SECTION LABELS ─── */
.section-label {
  display: inline-block;
  background: var(--crimson);
  color: var(--white);
  font-size: 12px;
  font-weight: 400;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
  letter-spacing: .5px;
}
.section-label.gold { background: var(--gold-dark); }
.section-label.teal { background: var(--teal); }

/* ─── SECTIONS ─── */
section { padding: 64px 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section-heading { font-family: 'Gulzar', serif; font-size: clamp(22px, 2.5vw, 30px); font-weight: 400; color: var(--text-dark); margin-bottom: 40px; }
.section-heading.white { color: var(--white); }
.section-intro { font-size: 16px; color: var(--text-gray); max-width: 700px; margin-bottom: 48px; line-height: 1.8; }

/* ─── STATS ─── */
.stats-section { background: var(--white); padding: 60px 0 48px; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  position: relative;
  margin-top: 32px;
}
.stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 12px 16px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border-bottom: 3px solid #8B8A3C;
}
.stat-icon-wrap {
  width: 44px;
  height: 44px;
  background: #8B8A3C;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-icon-wrap svg { width: 22px; height: 22px; }
.stat-card .number { font-size: 28px; font-weight: 500; color: var(--text-dark); line-height: 1.1; direction: ltr; unicode-bidi: isolate; }
.stat-card .label { font-size: 12px; font-weight: 400; color: var(--text-gray); margin-top: 6px; }
/* Pattern -01.png carries ~14.6% transparent padding on each side and ~24.5% top/bottom.
   Scaling the background to 141.24% and centering crops that away so the artwork
   fills the box exactly, which keeps the motif flush left at any viewport width. */
.diamond-deco {
  width: 330px;
  max-width: 60vw;
  aspect-ratio: 1312 / 454;
  background: url("../images/Pattern -01.png") center / 141.24% auto no-repeat;
  margin-top: 40px;
  margin-right: auto;
  margin-left: calc(50% - 50vw + 16px);
}

/* ─── PROGRAMS ─── */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.program-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  transition: box-shadow .25s, transform .25s;
}
.program-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.1); transform: translateY(-3px); }
.program-card-img {
  height: 160px;
  background: var(--bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.program-card-img img { width: 100%; height: 100%; object-fit: cover; }
.program-card-body { padding: 16px; }
.program-card-tag {
  display: inline-block;
  background: var(--gold);
  color: var(--white);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}
.program-card-body h3 { font-size: 20px; font-weight: 300; color: var(--text-dark); margin-bottom: 12px; }
.program-card-body .details-link {
  font-size: 16px;
  color: var(--gold-dark);
  font-weight: 500;
  border-bottom: 1px solid var(--gold-dark);
  padding-bottom: 1px;
}
.program-card-body .details-link:hover { color: var(--crimson); border-color: var(--crimson); }

/* ─── PROGRAMS THEME (programs.html, program-detail.html) ───
   Scoped to a body class: .page-hero is shared by every inner page and
   .program-card is also used on the home page, both of which keep their look. */
.theme-programs .page-hero { background: var(--crimson); }
.theme-programs .program-card {
  display: flex;
  flex-direction: column;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}
.theme-programs .program-card:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, .13); }
.theme-programs .program-card-body { display: flex; flex-direction: column; flex: 1; }
.theme-programs .program-card-tag { align-self: flex-start; background: var(--pink); }
.theme-programs .program-card-body h3 { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.theme-programs .program-card-subtitle { font-size: 13px; color: var(--text-gray); margin-bottom: 16px; }
.theme-programs .program-card-body .details-link {
  align-self: flex-end;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-dark);
}
.theme-programs .program-card-body .details-link:hover { border-color: var(--crimson); color: var(--crimson); }
.theme-programs .details-link svg { width: 14px; height: 14px; flex-shrink: 0; }
.theme-programs .program-section-title { border-bottom-color: var(--crimson); }

/* ─── HERITAGE / TOWERS ─── */
/* The gold band is baked into the bottom ~14.6% of this PNG, so the image alone
   produces the full composition. The -1px margin stops a sub-pixel hairline from
   showing where the image's gold meets .news-section's gold. */
.heritage-section {
  background: var(--white);
  padding: 0;
}
.heritage-gate-img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -1px;
  pointer-events: none;
}

/* ─── NEWS ─── */
/* Media centre: news + gallery share this one gold block. Background is sampled
   from the gold baked into "w blue line 2.png" (var(--gold) is #C19741, one step
   off) so the heritage image and this section read as one continuous band.
   overflow clips the divider motif where it bleeds past the left edge. */
.news-section { background: #C29841; padding: 64px 0; overflow: hidden; }
.media-subheading {
  font-family: 'Gulzar', serif;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 24px;
}
/* Pattern -02.png sits in ~27% transparent padding each side; scaling the
   background to 219.4% crops it so the motif fills the box. */
.media-divider {
  width: clamp(150px, 19vw, 260px);
  aspect-ratio: 845 / 658;
  background: url("../images/Pattern -02.png") 50% 45.7% / 219.4% auto no-repeat;
  margin: 40px auto 44px 0;
  /* Half its own width, so the left half runs off the edge and only the right
     half of the motif shows. Section overflow clips the rest. */
  transform: translateX(-50%);
}
.news-section .section-label { background: var(--crimson); }
.news-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  gap: 0;
  max-width: 700px;
}
.news-card-img { width: 260px; flex-shrink: 0; }
.news-card-img img { width: 100%; height: 100%; object-fit: cover; }
.news-card-body { padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.news-card-body .date { font-size: 12px; color: var(--text-gray); margin-bottom: 8px; }
.news-card-body h3 { font-size: 14px; font-weight: 400; color: var(--text-dark); margin-bottom: 12px; line-height: 1.5; }
.news-card-body p { font-size: 14px; color: var(--text-gray); line-height: 1.7; margin-bottom: 16px; }
.read-more { font-size: 13px; color: var(--crimson); font-weight: 500; }
.read-more:hover { text-decoration: underline; }

/* ─── NEWS LIST (news.html) ─── */
.news-page { background: var(--white); padding: 72px 0 88px; }
.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 24px;
}
.news-grid-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .09);
  transition: box-shadow .25s ease, transform .25s ease;
}
.news-grid-card:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, .14); transform: translateY(-3px); }
.news-grid-card > img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.news-grid-card-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.news-grid-card-body h3 { font-size: 14px; font-weight: 600; line-height: 1.7; color: var(--text-dark); margin-bottom: 10px; }
.news-grid-card-body p { font-size: 12px; line-height: 1.9; color: var(--text-gray); margin-bottom: 16px; }
.news-grid-card-body .partner-card-link { margin-top: auto; }
/* Crimson date tag, shared by the news list and article page. */
.news-date {
  align-self: flex-start;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--crimson);
  color: var(--white);
  font-size: 10px;
  margin-bottom: 10px;
}

/* ─── GALLERY ─── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.gallery-item {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--bg-light);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* ─── GALLERY COVERFLOW CAROUSEL ─── */
.gallery-carousel {
  position: relative;
  height: clamp(230px, 32vw, 400px);
  overflow: hidden;
}
.carousel-track { position: relative; width: 100%; height: 100%; }
.carousel-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(210px, 30vw, 380px);
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-light);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
  transition: transform .6s cubic-bezier(.22, .61, .36, 1), opacity .6s ease;
  will-change: transform, opacity;
}
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel-btn {
  position: absolute;
  top: 50%;
  z-index: 20;
  width: 42px;
  height: 42px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--text-dark);
  font-size: 26px;
  line-height: 1;
  /* ‹ and › are bidi-mirrored inside the page's RTL run, which swaps them */
  direction: ltr;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .2);
  transition: background .2s ease, transform .2s ease;
}
.carousel-btn:hover { background: var(--white); transform: translateY(-50%) scale(1.08); }
.carousel-prev { left: 14px; }
.carousel-next { right: 14px; }

/* ─── PARTNERS ─── */
.partners-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  align-items: center;
}
.partner-item {
  width: 130px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  transition: box-shadow .2s;
}
.partner-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.partner-item img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Partner card — shared by the home carousel and the partners page grid.
   The card is RTL, so cross-axis flex-end puts the logo and button on the
   physical left while the names stay right-aligned. */
.partner-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .07);
  transition: box-shadow .25s ease, transform .25s ease;
}
.partner-card:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .12); transform: translateY(-3px); }
.partner-card-logo {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.partner-card-names { margin-top: auto; text-align: right; }
.partner-card-names h3 { font-size: 14px; font-weight: 500; color: var(--text-dark); line-height: 1.5; }
.partner-card-names p {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-gray);
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}
.partner-card-link {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dark);
  background: var(--white);
  transition: border-color .2s ease, color .2s ease;
}
.partner-card-link:hover { border-color: var(--teal); color: var(--teal); }
.partner-card-link svg { width: 13px; height: 13px; flex-shrink: 0; }
.partner-card-link[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Pattern -03 straddles the boundary between the gold media section and the
   light partners section. It lives in the partners section because that one
   doesn't clip its overflow, and being later in the DOM lets it paint over the
   gold above. The negative top margin cancels the section's 64px padding and
   then lifts it by half its own height (width / aspect / 2), so the section
   boundary cuts through the middle of the motif at any viewport width. */
.partners-divider-wrap {
  --divider-w: clamp(160px, 20vw, 280px);
  height: calc(var(--divider-w) / 1.2827);
  overflow: hidden;
  margin-top: calc(-64px - var(--divider-w) / 2.5654);
}
.partners-divider {
  width: var(--divider-w);
  height: 100%;
  background: url("../images/Pattern -03.png") 50% 45.7% / 219.67% auto no-repeat;
  /* Pushed half its width past the wrapper's right edge, so only the left half
     shows and it sits flush to the viewport edge. The wrapper clips the rest —
     the section itself can't clip, since that would cut off the upward straddle. */
  margin-left: auto;
  margin-right: calc(var(--divider-w) / -2);
}

/* ─── PARTNERS CAROUSEL (home) ─── */
.partners-carousel { position: relative; }
.partners-viewport { overflow: hidden; }
.partners-track {
  display: flex;
  gap: 20px;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.partners-track .partner-card { flex: 0 0 calc((100% - 40px) / 3); min-height: 150px; }
.partners-carousel .carousel-btn { top: 50%; }
.partners-carousel.is-static .carousel-btn { display: none; }
.partners-carousel.is-static .partners-track { justify-content: center; }

/* ─── CTA JOIN ─── */
.cta-section {
  background: var(--teal-light);
  padding: 64px 0;
  text-align: center;
}
.cta-section h2 { font-family: 'Gulzar', serif; font-size: 30px; font-weight: 400; color: var(--text-dark); margin-bottom: 16px; }
.cta-section p { font-size: 16px; color: var(--text-dark); max-width: 600px; margin: 0 auto 32px; line-height: 1.8; }

/* ─── PAGE HERO (inner pages) ─── */
.page-hero {
  background: var(--gold);
  padding: 60px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero h1 { font-family: 'Gulzar', serif; font-size: clamp(24px, 3.5vw, 38px); font-weight: 400; color: var(--white); margin-bottom: 12px; }
.page-hero p { font-size: 16px; color: rgba(255,255,255,.85); max-width: 600px; margin: 0 auto; }
.page-hero .breadcrumb {
  font-size: 13px;
  color: rgba(255,255,255,.7);
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.page-hero .breadcrumb a { color: rgba(255,255,255,.8); }
.page-hero .breadcrumb a:hover { color: var(--white); }
.page-hero .breadcrumb span { opacity: .6; }

/* ─── ABOUT PAGE ─── */
.about-body {
  position: relative;
  overflow: hidden;
  background: var(--white);
  padding: 72px 0 clamp(90px, 9vw, 140px);
}
.about-body .container { position: relative; z-index: 1; }
.about-block { margin-bottom: 56px; }
.about-block:last-child { margin-bottom: 0; }
.about-block-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Gulzar', serif;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 14px;
}
/* about.png is a 135×171 icon inside a 478×484 canvas; the size and position
   crop the empty canvas away so the icon fills this box exactly. */
.about-block-title::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: calc(16px * 171 / 135);
  background: url("../images/about.png") 58.6% 42.8% / 354.1% auto no-repeat;
}
.about-block-text { max-width: 760px; font-size: 15px; line-height: 1.9; color: var(--text-dark); }

/* Cards are capped at ~half the width so the lower-left stays open for the arch. */
.about-values,
.about-goals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  max-width: 660px;
}
/* Column-major so 1–3 run down the first (right) column and 4–5 down the
   second, matching the design; this leaves the bottom-left cell empty. */
.about-goals {
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  list-style: none;
  counter-reset: goal;
}
.about-card {
  background: var(--white);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
}
.about-card h3 { font-size: 15px; font-weight: 500; color: var(--text-dark); margin-bottom: 6px; }
.about-card p { font-size: 13px; line-height: 1.7; color: var(--text-gray); }
.about-goals li {
  counter-increment: goal;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dark);
}
.about-goals li::before {
  content: counter(goal) ".";
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--gold);
}
/* Drawn larger than the viewport and pushed a third of its own width off the
   left edge, so the arch opening and right-hand rock show while the left of the
   image is cropped — as in the design. The PNG is 3:1, so -width/3 = -height. */
.about-body-arch {
  --arch-w: min(90vw, 1350px);
  position: absolute;
  left: calc(var(--arch-w) / -3);
  bottom: 0;
  z-index: 0;
  width: var(--arch-w);
  max-width: none;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 0 6px var(--crimson)) drop-shadow(0 0 3px var(--crimson));
}

/* ─── SERVICES PAGE ─── */
.theme-services .page-hero { background: var(--teal-light); }
.services-page { background: var(--white); padding: 64px 0 80px; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
.service-card {
  min-height: 270px;
  background: var(--white);
  border-radius: 16px;
  padding: 22px 24px 30px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
}
.service-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 26px;
}
.service-card-head h3 {
  margin-top: 16px;
  font-family: 'Gulzar', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--text-dark);
}
/* about.png used as a mask, so one petal asset can be tinted any colour.
   Shared by the services and governance member cards; size is set per use. */
.service-card-icon,
.member-card-icon {
  flex-shrink: 0;
  background: var(--gold);
  -webkit-mask: url("../images/about.png") 58.6% 42.8% / 354.1% auto no-repeat;
  mask: url("../images/about.png") 58.6% 42.8% / 354.1% auto no-repeat;
}
.service-card-icon { width: 16px; height: calc(16px * 171 / 135); }
.service-card-icon.is-crimson { background: var(--crimson); }
.service-card-icon.is-pink { background: var(--pink); }
.service-list { list-style: none; counter-reset: service; }
.service-list li {
  counter-increment: service;
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-dark);
}
.service-list li:last-child { margin-bottom: 0; }
.service-list li::before {
  content: counter(service) ".";
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 600;
}

/* ─── GOVERNANCE (assembly gold · board crimson · branches lime) ─── */
.theme-board .page-hero { background: var(--crimson); }
.theme-branches .page-hero { background: var(--lime); }

.gov-page { background: var(--white); padding: 48px 0 88px; }
.gov-intro { max-width: 460px; font-size: 14px; line-height: 2; color: var(--text-dark); margin-bottom: 64px; }

.members-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 44px 22px;
  max-width: 1000px;
  margin: 0 auto;
}
.member-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 112px;
  padding: 18px 14px 10px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .09);
}
.member-card-icon {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 11px;
  height: calc(11px * 171 / 135);
}
.theme-board .member-card-icon { background: var(--crimson); }
.member-card h3 { font-size: 22px; line-height: 1.4; color: var(--text-dark); }
.member-card p { margin-top: 4px; font-size: 10px; color: var(--text-gray); text-align: left; }

.branches-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  max-width: 920px;
  margin: 24px auto 0;
}
.branch-card {
  display: flex;
  flex-direction: column;
  min-height: 170px;
  padding: 20px 22px 16px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .09);
}
.branch-card h3 { font-size: 17px; font-weight: 600; color: var(--text-dark); margin-bottom: 14px; }
.branch-card p { font-size: 12px; color: var(--text-dark); margin-bottom: 8px; }
.branch-phone { direction: ltr; unicode-bidi: isolate; text-align: right; }
.branch-card .partner-card-link { margin-top: auto; }

/* ─── FORMS ─── */
.form-section { background: var(--white); padding: 64px 0; }
.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
  max-width: 800px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 14px; font-weight: 500; color: var(--text-dark); }
.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-dark);
  background: var(--white);
  transition: border-color .2s;
  direction: rtl;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-submit { margin-top: 24px; }
.form-fieldset { border: 0; padding: 0; margin: 0 0 36px; }
.form-fieldset:last-of-type { margin-bottom: 0; }
.form-legend {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
}
.form-group input[type="file"] { padding: 9px 12px; font-size: 13px; background: var(--bg-light); cursor: pointer; }
.form-hint { font-size: 11px; color: var(--text-gray); }
.form-status { margin-top: 14px; font-size: 13px; line-height: 1.8; }
.form-status.is-ok { color: #2A7B5E; }
.form-status.is-error { color: var(--crimson); }
/* Spam trap: off-screen rather than display:none, which bots skip. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.membership-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.membership-info-card {
  background: var(--bg-light);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  border-top: 4px solid var(--gold);
}
.membership-info-card h3 { font-size: 16px; font-weight: 500; margin-bottom: 8px; }
.membership-info-card p { font-size: 14px; color: var(--text-gray); line-height: 1.7; }
.price-tag { font-size: 28px; font-weight: 500; color: var(--gold-dark); }

/* ─── CONTACT PAGE ───
   Form overrides scoped to the body class; .form-card / .form-group are shared
   with volunteer.html and membership.html. */
.theme-contact .page-hero { background: var(--lime); }
.contact-page { background: var(--white); padding: 56px 0 88px; }
.contact-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 56px; }
.contact-info-card {
  min-height: 110px;
  padding: 18px 20px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .09);
}
.contact-info-card h3 { font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 18px; }
.contact-info-card a,
.contact-info-card p { display: block; font-size: 12px; color: var(--text-gray); }
.contact-info-card a:hover { color: var(--text-dark); }
/* Latin values keep their own direction so "+966…" isn't reordered in RTL. */
.contact-info-card .ltr { direction: ltr; unicode-bidi: isolate; text-align: right; }

.theme-contact .form-card {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 28px 28px;
  border: none;
  border-radius: 14px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, .08);
}
.contact-form-title { font-size: 16px; font-weight: 600; color: var(--text-dark); margin-bottom: 26px; }
.theme-contact .form-grid { grid-template-columns: 1fr; gap: 18px; }
.theme-contact .form-group label { font-size: 12px; font-weight: 400; }
.theme-contact .form-group input,
.theme-contact .form-group textarea { min-height: 44px; border: 1px solid #BDBDBD; border-radius: 10px; }
.theme-contact .form-group textarea { min-height: 120px; }
.theme-contact .form-submit { margin-top: 32px; text-align: left; }
.btn-lime { padding: 6px 28px; border-radius: 8px; font-size: 13px; font-weight: 400; background: var(--lime); color: var(--text-dark); }
.btn-lime:hover { background: #D2DA6B; }

/* ─── PARTNERS PAGE ───
   Hero themes are scoped to a body class because .page-hero is shared by every
   inner page. Light hero backgrounds (partners, services) need dark text. */
.theme-partners .page-hero { background: var(--lime); }
:is(.theme-partners, .theme-services, .theme-branches, .theme-contact) .page-hero h1,
:is(.theme-partners, .theme-services, .theme-branches, .theme-contact) .page-hero p { color: var(--text-dark); }
:is(.theme-partners, .theme-services, .theme-branches, .theme-contact) .page-hero .breadcrumb,
:is(.theme-partners, .theme-services, .theme-branches, .theme-contact) .page-hero .breadcrumb a { color: rgba(26, 24, 24, .65); }
:is(.theme-partners, .theme-services, .theme-branches, .theme-contact) .page-hero .breadcrumb a:hover { color: var(--text-dark); }

.partners-page { background: var(--white); padding: 72px 0 88px; }
.partners-page-title {
  font-family: 'Gulzar', serif;
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.partners-page-intro { max-width: 420px; font-size: 15px; line-height: 2; color: var(--text-dark); margin-bottom: 56px; }
.partners-page-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 12%; }
.partners-page-grid .partner-card { width: min(290px, 100%); min-height: 180px; }

/* ─── VOLUNTEER PAGE ───
   Form overrides are scoped to the body class: .form-card / .form-group are
   shared with contact.html and membership.html, which keep the default look. */
.theme-volunteer .page-hero { background: var(--pink); }
.volunteer-page { background: var(--white); padding: 56px 0 96px; }
.volunteer-intro-title {
  font-family: 'Gulzar', serif;
  font-size: clamp(26px, 2.8vw, 32px);
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.volunteer-intro { max-width: 460px; font-size: 14px; line-height: 2; color: var(--text-dark); margin-bottom: 56px; }

.theme-volunteer .form-card {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 28px 28px;
  border: none;
  border-radius: 14px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, .08);
}
.volunteer-form-title { font-size: 16px; font-weight: 600; color: var(--text-dark); margin-bottom: 26px; }
.theme-volunteer .form-grid { gap: 22px 28px; }
.theme-volunteer .form-group label { font-size: 12px; font-weight: 400; }
.theme-volunteer .form-group input,
.theme-volunteer .form-group select,
.theme-volunteer .form-group textarea { min-height: 44px; border: 1px solid #BDBDBD; border-radius: 10px; }
.theme-volunteer .form-group input:focus,
.theme-volunteer .form-group select:focus,
.theme-volunteer .form-group textarea:focus { border-color: var(--pink); }
.theme-volunteer .form-group textarea { min-height: 96px; }
.theme-volunteer .form-submit { margin-top: 48px; text-align: left; }
.btn-pink { padding: 6px 28px; border-radius: 8px; font-size: 13px; font-weight: 400; background: var(--pink); color: var(--white); }
.btn-pink:hover { background: #E27B87; }

/* ─── NEWS DETAIL (news-detail.html) ───
   The cover photo sits at the foot of a gold band, flush with its bottom edge. */
.news-detail-hero { background: var(--gold); padding-top: 44px; }
.news-detail-cover {
  display: block;
  width: 100%;
  height: clamp(200px, 26vw, 360px);
  object-fit: cover;
  border-radius: 14px 14px 0 0;
}
.news-detail { background: var(--white); padding: 40px 0 72px; }
.news-detail-title {
  max-width: 640px;
  margin: 4px 0 56px;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.7;
  color: var(--text-dark);
}
.news-detail-lead { max-width: 760px; margin-bottom: 64px; font-size: 15px; font-weight: 500; line-height: 2.1; color: var(--text-dark); }
.news-detail-body p { margin-bottom: 16px; font-size: 14px; line-height: 2.1; color: var(--text-dark); }
.news-detail-subtitle { margin: 48px 0 40px; font-size: 15px; font-weight: 600; color: var(--text-dark); }
.theme-news .article-images { gap: 32px; margin-top: 0; }
.theme-news .article-images img { height: auto; aspect-ratio: 6 / 5; border-radius: 14px; }
.news-detail-back { margin-top: 48px; text-align: left; }
.article-images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 32px; }
.article-images img { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--gold-dark);
  font-weight: 500;
  margin-bottom: 32px;
}
.back-link:hover { color: var(--crimson); }

/* ─── PROGRAM DETAIL ─── */
.program-detail-header { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-bottom: 48px; }
.program-detail-header img { width: 100%; border-radius: 12px; }
.program-section-title { font-size: 20px; font-weight: 500; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--gold); }

/* ─── FOOTER ─── */
footer {
  background: var(--text-dark);
  color: rgba(255,255,255,.75);
  padding: 48px 0 0;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand .logo { margin-bottom: 16px; }
.footer-brand .logo-text .ar { font-size: 16px; }
.footer-brand p { font-size: 13px; line-height: 1.8; }
.footer-col h4 { font-size: 15px; font-weight: 500; color: var(--white); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.15); }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 13px; color: rgba(255,255,255,.65); transition: color .2s; }
.footer-col ul li a:hover { color: var(--gold-light); }
.footer-col .contact-item { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 10px; direction: ltr; unicode-bidi: embed; text-align: right; }
.footer-col a.contact-item { color: rgba(255,255,255,.65); transition: color .2s; }
.footer-col a.contact-item:hover { color: var(--gold-light); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 16px 24px;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,.4);
  max-width: 1200px;
  margin: 0 auto;
}

/* ─── ABOUT INTRO ─── */
.about-intro-section {
  background: var(--gold);
  position: relative;
  overflow: hidden;
  min-height: 500px;
  display: flex;
  align-items: center;
  padding: 0;
}
.about-intro-arch {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  max-width: 700px;
  pointer-events: none;
  user-select: none;
  /* Crimson outline following the arch silhouette */
  filter: drop-shadow(0 0 6px var(--crimson)) drop-shadow(0 0 3px var(--crimson));
}
.about-intro-content {
  position: relative;
  z-index: 2;
  width: 100%;
  /* push content into the right half, away from the arch */
  padding: 80px 60px 80px 52%;
  text-align: right;
}
.about-intro-title {
  font-family: 'Gulzar', serif;
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 400;
  color: var(--white);
  line-height: 1.55;
  margin: 14px 0 20px;
}
.about-intro-body {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.95;
  max-width: 520px;
  margin-right: 0;
}

/* ─── GULZAR — large Arabic title headings ─── */
/* Covers inline h2/h3 used as section titles in inner pages and program/news details */
.program-section-title,
.member-card h3,
.membership-info-card h3 {
  font-family: 'Gulzar', serif;
  font-weight: 400;
}

/* ─── UTILITIES ─── */
.text-center { text-align: center; }
.text-gold { color: var(--gold-dark); }
.bg-gold { background: var(--gold); }
.bg-light { background: var(--bg-light); }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .programs-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .contact-info-grid { grid-template-columns: repeat(2, 1fr); }
  .members-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .membership-info { grid-template-columns: 1fr 1fr; }
  .news-card { flex-direction: column; }
  .news-card-img { width: 100%; height: 200px; }
  .program-detail-header { grid-template-columns: 1fr; }
  .branches-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  nav { display: none; }
  nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 72px;
    right: 0;
    left: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    gap: 2px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    z-index: 999;
  }
  nav.open a { padding: 10px 16px; color: var(--text-dark); }
  .nav-dropdown .dropdown-menu { position: static; display: none; padding-top: 0; }
  .nav-dropdown .dropdown-menu .dropdown-menu-inner { border-radius: 6px; box-shadow: none; border: none; background: var(--bg-light); margin: 4px 8px; }
  .nav-dropdown.open .dropdown-menu { display: block; }
  .nav-dropdown.open .dropdown-menu a { color: var(--text-dark); font-size: 13px; padding: 8px 16px; }
  .hamburger { display: block; }
  header { position: relative; }
  .header-inner { position: relative; }
  .header-actions { display: none; }

  .hero-img-left, .hero-img-right { max-width: 48%; opacity: .5; }
  .hero-content h1 { font-size: clamp(32px, 7vw, 56px); }
  .about-intro-arch { width: 70%; opacity: .35; }
  .about-intro-content { padding: 60px 24px; text-align: center; }
  .about-intro-body { max-width: 100%; margin: 0 auto; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .programs-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .members-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: 1fr; }
  .branches-grid { grid-template-columns: 1fr; }
  .contact-info-grid { grid-template-columns: 1fr 1fr; }
  .membership-info { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .about-values,
  .about-goals { grid-template-columns: 1fr; max-width: none; }
  .about-goals { grid-template-rows: none; grid-auto-flow: row; }
  .about-body { padding-bottom: 130px; }
  .article-images { grid-template-columns: 1fr 1fr; }
  .hero-bg-right, .hero-bg-left { opacity: .35; }
  .footer-brand { display: none; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .members-grid { grid-template-columns: 1fr 1fr; }
  .contact-info-grid { grid-template-columns: 1fr; }
  .hero-content h1 { font-size: 30px; }
  .form-card { padding: 24px 16px; }
}