/* ============================================================
   ESPAC – Main Stylesheet
   Theme (logo-aligned): Charcoal #1A2620 | Green #8DC63F | Red #C1272D | White
   Note: legacy variable names (--navy / --gold) are kept so existing
   class references continue to work; their VALUES now map to the new
   logo-aligned palette.
   ============================================================ */

:root {
  /* Dark "ink" tones (logo text + dark backgrounds) */
  --navy: #1A2620;        /* charcoal with subtle green undertone */
  --navy-mid: #243329;
  --navy-light: #2F4135;
  --ink: #1A1A1A;         /* near-black for body copy on light bg */

  /* Brand green (matches the green bars in the ESPAC "E") */
  --gold: #8DC63F;        /* primary brand accent */
  --gold-light: #A8D75F;
  --gold-dark: #6FA82E;

  /* Brand red (matches the red middle bar in the "E") */
  --brand-red: #C1272D;
  --brand-red-light: #E04A4F;
  --brand-red-dark: #971D22;

  --white: rgb(226, 226, 222);
  --off-white:rgb(209, 209, 207);
  --gray-light: #eef0ec;
  --gray-mid: #c4c8c4;
  --gray-text: #5d6663;
  --border: rgba(141,198,63,0.22);

  --shadow-sm: 0 2px 16px rgba(26,38,32,0.08);
  --shadow-md: 0 8px 40px rgba(26,38,32,0.14);
  --shadow-lg: 0 20px 60px rgba(26,38,32,0.18);
  --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  --radius: 6px;
  --radius-lg: 12px;

  /* ──────────────────────────────────────────────────────────────
     Geometric "Islamic" tile pattern (replaces old grid pattern).
     One tile (80×80) contains:
       1. The outer square (tile boundary) — when tiled, makes the
          aligned "big square" grid that's the dominant feature.
       2. Two corner-to-corner diagonals — when 4 tiles meet at a
          corner, the 4 diagonals + the 4 square corners form an
          8-pointed star at every grid intersection.
       3. An inner aligned square + an inner rotated square (same
          size, rotated 45°) — these compose the small 8-pointed
          star sitting inside every "big square".
     The same artwork is exported in two flavours: a faint white
     base pattern and a saturated dark-green version that's revealed
     only inside a small radial mask around the cursor for the
     hover-glow effect.
     ────────────────────────────────────────────────────────────── */
  --geo-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g fill='none' stroke='%23ffffff' stroke-opacity='0.085' stroke-width='1'><rect x='0' y='0' width='80' height='80'/><line x1='0' y1='0' x2='80' y2='80'/><line x1='80' y1='0' x2='0' y2='80'/><rect x='24' y='24' width='32' height='32'/><rect x='24' y='24' width='32' height='32' transform='rotate(45 40 40)'/></g></svg>");

  --geo-pattern-glow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g fill='none' stroke='%234f7a1e' stroke-opacity='1' stroke-width='1.6'><rect x='0' y='0' width='80' height='80'/><line x1='0' y1='0' x2='80' y2='80'/><line x1='80' y1='0' x2='0' y2='80'/><rect x='24' y='24' width='32' height='32'/><rect x='24' y='24' width='32' height='32' transform='rotate(45 40 40)'/></g></svg>");
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* overflow-x:CLIP (not hidden) stops horizontal overflow — which in RTL
     pushes the whole page sideways on mobile — WITHOUT creating a scroll
     container that would break the sticky navbar. */
  overflow-x: clip;
}

/* Accessibility / low-end devices: when the OS requests reduced motion, drop
   the heavier visual effects (cursor-follow glow overlays, smooth scrolling)
   so the site stays responsive on older / weaker hardware. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-section::after,
  .cta-section::after,
  .page-hero::after,
  .quote-hero::after,
  .services-section::after,
  .bod1-section::after { display: none !important; }
}
body.espac-body {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #1a1a2e;
  background: var(--white);
  width: 100%;
  max-width: 100%;
  /* Use clip here too so neither axis ancestor establishes a scroll box
     that breaks position:sticky on the navbar. */
  overflow-x: clip;
  /* Long Arabic words / English words in headings must break cleanly
     instead of pushing past the viewport edge. */
  overflow-wrap: break-word;
  word-wrap: break-word;
}
h1,h2,h3,h4,h5,h6 { font-family: 'Playfair Display', serif; font-weight: 600; color: var(--navy); line-height: 1.25; }
a { color: var(--gold); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--gold-dark); }
img { max-width: 100%; }
p { color: var(--gray-text); }

/* ── Pre-loader (ESPAC "E" mark: 2 green bars + 1 red loading bar) ── */
#preloader {
  position: fixed; inset: 0; background: #ffffff; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  /* The "E" logo bars are constructed with flex + negative margin-left
     for the red bar offset. In Arabic (dir="rtl") the entire layout
     mirrors and the bars flip + the red offset jumps to the right.
     Force LTR direction on the preloader so the logo always renders
     identically to the English version. */
  direction: ltr;
  unicode-bidi: isolate;
}
#preloader.loaded { opacity: 0; visibility: hidden; }
.preloader-inner { text-align: center; direction: ltr; }
.preloader-e {
  display: inline-flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  direction: ltr;
}
.preloader-e .pl-bar {
  display: block;
  height: 30px;
  border-radius: 2px;
}
.preloader-e .pl-bar-top,
.preloader-e .pl-bar-bot {
  width: 180px;
  background: #8DC63F; /* green */
}
.preloader-e .pl-bar-mid {
  width: 130px;
  background: rgba(193, 39, 45, 0.15); /* faint red track */
  position: relative;
  overflow: hidden;
  /* In the ESPAC logo the red bar pokes slightly to the LEFT of the green
     bars rather than starting flush with them. Negative margin gives that
     same offset on the preloader. */
  margin-left: -14px;
}
.preloader-e .pl-bar-mid-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: #C1272D; /* red loading fill */
  border-radius: 2px;
  animation: pl-load 1.6s cubic-bezier(.65,.05,.36,1) infinite;
}
@keyframes pl-load {
  0%   { width: 0;    left: 0; }
  55%  { width: 100%; left: 0; }
  100% { width: 0;    left: 100%; }
}
@media (max-width: 480px) {
  .preloader-e .pl-bar { height: 22px; }
  .preloader-e .pl-bar-top,
  .preloader-e .pl-bar-bot { width: 130px; }
  .preloader-e .pl-bar-mid { width: 95px; margin-left: -10px; }
  .preloader-e { gap: 12px; }
}

/* ── Top Bar ── */
.topbar {
  background: var(--navy); color: rgba(255,255,255,0.78); font-size: 13px;
  border-bottom: 1px solid rgba(141,198,63,0.18);
}
.topbar-left span { display:flex; align-items:center; }
.topbar-left i, .topbar-right i { color: var(--gold); }
.topbar-admin-link { color: var(--gold); font-weight: 600; }
.topbar-admin-link:hover { color: var(--gold-light); }

/* ── Navbar (light/white so the logo's dark text stays readable) ── */
.espac-navbar {
  background: var(--white); padding: 0.75rem 0;
  border-bottom: 1px solid var(--gray-light);
  box-shadow: 0 2px 14px rgba(26,38,32,0.06);
  /* Fixed min-height + no transition = no layout shift on scroll at all. */
  min-height: 68px;
}
/* .scrolled only upgrades the shadow; padding and logo size stay fixed
   so the navbar never changes height on scroll. */
.espac-navbar.scrolled { box-shadow: 0 4px 22px rgba(26,38,32,0.10); }
.espac-brand { display:flex; align-items:center; gap:0; text-decoration:none; }
.brand-letter {
  font-family:'Playfair Display',serif; font-size:2rem; font-weight:700; color:var(--gold-dark);
  line-height:1; margin-right:0;
}
.brand-name { font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:700; color:var(--ink); letter-spacing:2px; }

/* ── Site logo (admin-uploaded) ── */
.site-logo-img {
  display: block;
  height: 46px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
}
/* Logo height is fixed — no shrink on scroll. */

/* On dark surfaces (footer / admin sidebar) wrap the logo in a white card
   so the dark text + green/red marks stay clearly visible regardless of
   what colour the section background uses. */
.site-logo-img--footer,
.site-logo-img--admin {
  background: var(--white);
  padding: 8px 14px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.site-logo-img--footer { height: 64px; max-width: 240px; }
.site-logo-img--admin  { height: 48px; max-width: 180px; }
.site-logo-img--login  { height: 70px; margin: 0 auto; max-width: 240px; }

.site-name-text {
  font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:700;
  color:var(--ink); letter-spacing:2px; line-height:1;
}
.footer-brand .site-name-text { color: var(--white); }
.site-name-text--login { font-size: 2.4rem; color: var(--ink); text-align:center; }

.espac-navbar .nav-link {
  color: var(--ink) !important; font-size:13.5px; font-weight:600;
  letter-spacing:.5px; padding: .5rem .85rem !important; position:relative;
  text-transform:uppercase;
}
.espac-navbar .nav-link::after {
  content:''; position:absolute; bottom:0; left:.85rem; right:.85rem; height:2px;
  background:var(--gold); transform:scaleX(0); transition:var(--transition); border-radius:2px;
}
.espac-navbar .nav-link:hover, .espac-navbar .nav-link.active { color:var(--gold-dark) !important; }
.espac-navbar .nav-link:hover::after, .espac-navbar .nav-link.active::after { transform:scaleX(1); }
.navbar-toggler { border:1px solid var(--gray-light); padding:.5rem; }
.navbar-toggler i { color:var(--gold-dark); font-size:1.4rem; }

/* ── Buttons ──
   .btn-espac-gold is intentionally kept as a class name (used widely) but now
   renders in the new brand green. */
.btn-espac-gold {
  background: var(--gold); color: var(--navy); font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:1px; border:none; border-radius:var(--radius);
  padding:.6rem 1.5rem; transition:var(--transition);
}
.btn-espac-gold:hover { background:var(--gold-dark); color:var(--white); transform:translateY(-1px); box-shadow:0 6px 22px rgba(141,198,63,0.45); }
.btn-espac-outline {
  background:transparent; color:var(--gold-dark); border:1.5px solid var(--gold); font-weight:600;
  font-size:13px; text-transform:uppercase; letter-spacing:1px; border-radius:var(--radius);
  padding:.6rem 1.5rem; transition:var(--transition);
}
.btn-espac-outline:hover { background:var(--gold); color:var(--navy); }
.btn-espac-white {
  background:var(--white); color:var(--navy); font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:1px; border:none; border-radius:var(--radius); padding:.75rem 2rem; transition:var(--transition);
}
.btn-espac-white:hover { background:var(--gold); color:var(--navy); }
.btn-espac-outline-white {
  background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,0.55); font-weight:600;
  font-size:13px; text-transform:uppercase; letter-spacing:1px; border-radius:var(--radius); padding:.75rem 2rem; transition:var(--transition);
}
.btn-espac-outline-white:hover { border-color:var(--white); background:rgba(255,255,255,0.12); color:var(--white); }
/* Red accent button (uses logo's red) */
.btn-espac-red {
  background:var(--brand-red); color:var(--white); font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:1px; border:none; border-radius:var(--radius);
  padding:.6rem 1.5rem; transition:var(--transition);
}
.btn-espac-red:hover { background:var(--brand-red-dark); color:var(--white); transform:translateY(-1px); box-shadow:0 6px 22px rgba(193,39,45,0.4); }

/* ── Section Headings ── */
.section-label {
  font-family:'Montserrat',sans-serif; font-size:11px; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:var(--gold); display:block; margin-bottom:.5rem;
}
.section-title { font-size:clamp(1.6rem,3vw,2.4rem); color:var(--navy); margin-bottom:1rem; }
.section-title.light { color:var(--white); }
.section-divider { width:50px; height:3px; background:var(--gold); margin:0 auto 1.5rem; border-radius:2px; }
.section-divider.left { margin:0 0 1.5rem; }
.section-desc { color:var(--gray-text); font-size:15px; max-width:600px; }

/* ── Hero ── */
.hero-section {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 55%, #15201B 100%);
  position:relative; overflow:hidden;
}
.hero-bg-pattern {
  position:absolute; inset:0; pointer-events:none;
  background-image: var(--geo-pattern);
  background-size: 80px 80px;
}
.hero-bg-circle {
  position:absolute; border-radius:50%; opacity:.09;
  background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
}
.hero-bg-circle.c2 { background: radial-gradient(circle, var(--brand-red) 0%, transparent 70%); opacity:.06; }
.hero-bg-circle.c1 { width:700px;height:700px;right:-200px;top:-200px; }
.hero-bg-circle.c2 { width:400px;height:400px;left:-100px;bottom:-100px; }
.hero-content { position:relative; z-index:2; padding:1rem 0 4rem; }
.hero-eyebrow { font-family:'Montserrat',sans-serif; font-size:11px; font-weight:700; letter-spacing:4px; color:var(--gold); text-transform:uppercase; margin-bottom:1.5rem; }
.hero-title { font-size:clamp(2.2rem,5vw,3.8rem); color:var(--white); line-height:1.15; margin-bottom:1.5rem; }
.hero-title span.highlight { color:var(--gold); position:relative; }
.hero-title span.highlight::after { content:''; position:absolute; left:0; right:0; bottom:-4px; height:3px; background:var(--brand-red); border-radius:2px; }
.hero-subtitle { color:rgba(255,255,255,0.78); font-size:16px; max-width:540px; margin-bottom:2.5rem; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }
.hero-stats { display:flex; gap:2.5rem; margin-top:4rem; flex-wrap:wrap; }
.hero-stats--center { justify-content:center; text-align:center; margin-top:3rem; }
.hero-stat-item { }
.hero-stat-number { font-family:'Playfair Display',serif; font-size:2.4rem; font-weight:700; color:var(--gold); line-height:1; }
.hero-stat-label { font-size:12px; color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:1.5px; margin-top:.25rem; }
.hero-stat-divider { width:1px; background:rgba(141,198,63,0.32); align-self:stretch; }
.hero-visual { position:relative; z-index:2; }
.hero-card-stack { position:relative; }
.hero-main-card {
  background:rgba(255,255,255,0.06); backdrop-filter:blur(10px); border:1px solid rgba(141,198,63,0.22);
  border-radius:var(--radius-lg); padding:2rem; color:var(--white);
}
.hero-badge { display:inline-flex; align-items:center; gap:.5rem; background:rgba(141,198,63,0.15); border:1px solid rgba(141,198,63,0.35); border-radius:20px; padding:.25rem .75rem; font-size:12px; color:var(--gold); margin-bottom:1rem; }
.hero-floating-card {
  position:absolute; background:var(--white); border-radius:var(--radius); padding:1rem 1.25rem; box-shadow:var(--shadow-lg);
}
.hero-floating-card.fc1 { bottom:-2rem; left:-2rem; }
.hero-floating-card.fc2 { top:-1.5rem; right:-1.5rem; }
.fc-icon { width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(141,198,63,.14); }
.fc-icon i { color:var(--gold-dark); font-size:1rem; }
.fc-label { font-size:11px; color:var(--gray-text); }
.fc-value { font-size:14px; font-weight:700; color:var(--navy); }
.scroll-indicator { position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); z-index:2; text-align:center; }
.scroll-mouse { width:24px;height:38px;border:2px solid rgba(141,198,63,0.55);border-radius:12px;margin:0 auto .5rem;position:relative; }
.scroll-mouse::after { content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:4px;height:8px;background:var(--gold);border-radius:2px;animation:scroll-anim 1.6s ease-in-out infinite; }
@keyframes scroll-anim { 0%{opacity:1;transform:translateX(-50%) translateY(0)} 100%{opacity:0;transform:translateX(-50%) translateY(14px)} }
.scroll-label { font-size:11px; color:rgba(255,255,255,0.5); letter-spacing:2px; text-transform:uppercase; }

/* ── Stats Strip ── */
.stats-strip { background:var(--gold); padding:3rem 0; }
.stat-item { text-align:center; }
.stat-number { font-family:'Playfair Display',serif; font-size:2.4rem; font-weight:700; color:var(--navy); }
.stat-label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; color:var(--navy); opacity:.8; }
.stats-divider { width:1px; background:rgba(26,38,32,.22); align-self:stretch; }

/* ── About Strip ── */
.about-strip { background:var(--off-white); }
.about-img-wrap { position:relative; }
.about-img-wrap img,
.about-img-wrap video { width:100%;height:480px;object-fit:cover;border-radius:var(--radius-lg); }
.about-photo { display:block; }
.about-photo-fallback {
    width:100%;
    height:480px;
    border-radius:var(--radius-lg);
    background:linear-gradient(135deg,#1A2620 0%,#2F4135 100%);
    display:flex;
    align-items:center;
    justify-content:center;
}
.about-photo-fallback span {
    font-family:'Playfair Display',serif;
    font-size:7rem;
    font-weight:700;
    color:rgba(141,198,63,.35);
}
.about-exp-badge {
  position:absolute;bottom:1.5rem;left:-1.25rem;background:var(--navy);color:var(--white);padding:.85rem 1rem;border-radius:var(--radius);
  border-left:3px solid var(--brand-red);
}
.about-exp-number { font-family:'Playfair Display',serif; font-size:1.7rem; font-weight:700; color:var(--gold); line-height:1; }
.about-exp-label { font-size:10.5px; opacity:.8; max-width:88px; }
.about-feature { display:flex; gap:1rem; margin-bottom:1.25rem; }
.about-feature-icon { width:44px;height:44px;min-width:44px;border-radius:var(--radius);background:rgba(141,198,63,.12);display:flex;align-items:center;justify-content:center; }
.about-feature-icon i { color:var(--gold-dark);font-size:1.2rem; }
.about-feature-text h6 { color:var(--navy);font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;margin:0 0 .2rem; }
.about-feature-text p { margin:0;font-size:13px; }

/* ── Services Section ── */
.services-section {
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%);
  position:relative;
  overflow:hidden;
}
.services-section::before {
  content:'';
  position:absolute;
  inset:0;
  background-image:var(--geo-pattern);
  background-size:80px 80px;
  pointer-events:none;
}
.services-section > .container { position:relative; z-index:2; }
.service-card {
  background:rgba(255,255,255,0.04); border:1px solid rgba(141,198,63,0.18); border-radius:var(--radius-lg);
  padding:2rem; height:100%; transition:var(--transition); position:relative; overflow:hidden;
}
.service-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(141,198,63,.08) 0%,transparent 60%); opacity:0; transition:var(--transition); }
.service-card:hover { border-color:var(--gold); transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,0.3); }
.service-card:hover::before { opacity:1; }
.service-icon { width:56px;height:56px;border-radius:var(--radius);background:rgba(141,198,63,0.12);border:1px solid rgba(141,198,63,0.25);display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem; }
.service-icon i { font-size:1.5rem;color:var(--gold); }
.service-card h5 { color:var(--white);font-family:'Montserrat',sans-serif;font-size:15px;font-weight:700;margin-bottom:.6rem; }
.service-card p { color:rgba(255,255,255,0.6);font-size:13.5px;margin:0; }
.service-card .service-arrow { color:rgba(141,198,63,0);margin-top:1.25rem;transition:var(--transition); }
.service-card:hover .service-arrow { color:var(--gold); }
/* Home "What We Do" tiles: solid dark background instead of transparent */
.services-section .service-card { background:#0d1f17; }
.services-section .service-card:hover { background:#10271c; }

/* ── Featured Projects ── */
.projects-section { background:var(--white); }
.project-card { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:var(--transition); height:100%; background:var(--white); }
a.project-card { display:flex; flex-direction:column; text-decoration:none; color:inherit; cursor:pointer; }
a.project-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); text-decoration:none; }
.project-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.project-img-wrap { position:relative; overflow:hidden; height:240px; }
.project-img-wrap img { width:100%;height:100%;object-fit:cover;transition:transform .5s ease; }
.project-card:hover .project-img-wrap img { transform:scale(1.05); }
.project-overlay {
  position:absolute;inset:0;background:linear-gradient(to top,rgba(26,38,32,.9) 0%,transparent 50%);
  display:flex;align-items:flex-end;padding:1.25rem;
}
.project-status-badge { position:absolute;top:1rem;right:1rem;background:var(--gold);color:var(--navy);font-size:11px;font-weight:700;padding:.25rem .75rem;border-radius:20px;text-transform:uppercase;letter-spacing:1px; }
.project-body { padding:1.5rem; background:var(--white); flex:1 1 auto; }
.project-meta { display:flex;gap:1rem;font-size:12px;color:var(--gray-text);margin-bottom:.75rem; }
.project-meta span { display:flex;align-items:center;gap:.25rem; }
.project-body h5 { color:var(--navy);font-size:16px;margin-bottom:.5rem; }
.project-body p { font-size:13.5px;color:var(--gray-text);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.project-footer { padding:1rem 1.5rem;border-top:1px solid var(--gray-light);display:flex;justify-content:space-between;align-items:center;margin-top:auto; }
.project-footer a,
.project-footer .view-details-link { font-size:13px;font-weight:600;color:var(--gold); }

/* ── 3D Viewer ── */
.model-viewer-wrap {
    position:relative;
    width:100%;
    /* The 3D model must stay LTR internally — RTL causes the WebGL canvas
       to shift/drift within its container. */
    direction: ltr;
    height:560px;
    border-radius:var(--radius-lg);
    overflow:hidden;
    /* Matches the site's dark-green hero background. */
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 55%, #15201B 100%);
    box-shadow:inset 0 -1px 0 rgba(255,255,255,.04), 0 8px 30px rgba(0,0,0,.18);
}
model-viewer {
    width:100%;
    height:100%;
    /* Force LTR on the WebGL canvas — inheriting RTL from the document causes
       the 3D scene to drift/shift inside its container in Arabic view. */
    direction: ltr !important;
    --poster-color:transparent;
    background-color:transparent;
    --progress-bar-color:var(--gold);
    --progress-bar-height:3px;
}
.model-loading {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:100%;
    width:100%;
    gap:.75rem;
    background:transparent;
    color:rgba(255,255,255,.7);
    font-size:14px;
    letter-spacing:.4px;
}
.model-loading i { font-size:3rem;color:var(--gold); }
/* ── Home-Page Showcase (hero right side) ── */
.home-showcase {
    position:relative;
    background:transparent;
    border:0;
    border-radius:0;
    padding:0;
    box-shadow:none;
    /* Fill the right column on large screens so the stage matches the
       visual height of the hero text on the left and there's no empty
       gap above/around it. */
    height:100%;
    display:flex;
    flex-direction:column;
}
/* The showcase column on lg+ screens sits inside a stretched row, so the
   showcase grows to match the text column. */
.hero-row > [class*="col-"] { display:flex; flex-direction:column; }
/* Compact tab pills floating at the top-right corner of the showcase */
.home-showcase-tabs {
    position:absolute;
    top:.65rem;
    right:.65rem;
    z-index:5;
    display:inline-flex;
    gap:.35rem;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.1);
    border-radius:999px;
    padding:.2rem;
}
.hs-tab {
    appearance:none;
    border:0;
    background:transparent;
    color:rgba(255,255,255,.75);
    border-radius:999px;
    padding:.3rem .75rem;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    cursor:pointer;
    transition:all .2s ease;
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    line-height:1;
}
.hs-tab i { font-size:.95rem; }
.hs-tab:hover { color:#fff; }
.hs-tab.active {
    background:var(--gold);
    color:#fff;
    box-shadow:0 2px 8px rgba(141,198,63,.4);
}
.hs-count {
    font-size:10px;
    background:rgba(0,0,0,.25);
    color:inherit;
    padding:.05rem .4rem;
    border-radius:20px;
}
.hs-tab.active .hs-count { background:rgba(255,255,255,.3); }

.hs-panel { display:none; }
.hs-panel.active { display:block; animation:hsFade .25s ease; }
@keyframes hsFade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* Larger stage — fills the right column of the hero */
.hs-stage {
    position:relative;
    border-radius:16px;
    overflow:hidden;
    width:100%;
    /* Default (mobile / md) — viewport-based height. */
    height:clamp(360px, 62vh, 600px);
    background:#0e1812;
    box-shadow:0 22px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05);
    flex:1 1 auto;          /* fill the showcase wrapper */
}
/* Large screens (≥992px): let the stage GROW to match the text column.
   The hero row uses align-items-lg-stretch, so when the left column is
   tall (heading + subtitle + CTAs + stats), the right column stretches
   to match — and the stage fills that whole height. We still enforce a
   floor & ceiling so it always looks intentional. */
@media (min-width: 992px) {
    .hs-stage {
        height:auto;
        min-height: clamp(560px, 72vh, 820px);
    }
}
.hs-stage--model {
    /* Matches the site's dark-green hero background. */
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 55%, #15201B 100%);
    /* The 3D model stage must stay LTR internally — RTL causes the WebGL
       canvas to shift/drift within its container. */
    direction: ltr;
}
.hs-slide {
    position:absolute; inset:0;
    opacity:0; visibility:hidden;
    transition:opacity .55s ease;
}
.hs-slide.active { opacity:1; visibility:visible; }
/* Each slide carries a blurred copy of its own image as a soft backdrop so
   the stage always looks filled, while the foreground <img> stays
   `object-fit:contain` and shows the WHOLE picture — never cropped. */
.hs-slide::before {
    content:"";
    position:absolute; inset:0;
    background-image: var(--bg, none);
    background-size: cover;
    background-position: center;
    filter: blur(28px) saturate(1.05) brightness(.55);
    transform: scale(1.15);
    z-index:0;
}
.hs-slide img {
    position:relative;
    z-index:1;
    width:100%; height:100%;
    object-fit:contain;
    display:block;
    /* Generous bottom padding reserves space for the caption + dots so
       the image is never visually overlapped by the title text. */
    padding:1.25rem 1.25rem 5.5rem;
}
.hs-slide model-viewer,
.hs-slide .hs-mv {
    width:100%; height:100%; display:block;
    direction: ltr !important; /* Prevent RTL from shifting the 3D scene */
    --progress-bar-color:var(--gold);
    --progress-bar-height:3px;
    background:transparent;
}
.hs-caption {
    position:absolute; left:0; right:0; bottom:0;
    padding:1rem 1.2rem 2.5rem;     /* extra bottom space leaves room for dots */
    color:#fff;
    font-size:14px;
    font-weight:600;
    letter-spacing:.3px;
    background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.92) 100%);
    pointer-events:none;
    /* Must sit ABOVE the contained <img> (z-index:1) and the blurred
       backdrop (z-index:0) so the title is never clipped behind them. */
    z-index:3;
    /* Truncate runaway titles instead of letting them wrap onto a third line */
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.hs-nav {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:38px; height:38px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.25);
    background:rgba(0,0,0,.45);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:all .2s ease;
    z-index:3;
    backdrop-filter:blur(4px);
}
.hs-nav:hover { background:var(--gold); border-color:var(--gold); }
.hs-prev { left:.65rem; }
.hs-next { right:.65rem; }

/* Slider dots overlaid at the bottom of the stage */
.hs-dots {
    position:absolute;
    left:0; right:0;
    bottom:1rem;
    display:flex;
    justify-content:center;
    gap:.4rem;
    z-index:4;
    pointer-events:auto;
}
.hs-dot {
    width:8px; height:8px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.4);
    cursor:pointer;
    transition:all .2s ease;
    box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.hs-dot:hover { background:rgba(255,255,255,.7); }
.hs-dot.active { background:var(--gold); width:22px; border-radius:5px; }

/* ── Thumbnail gallery strip (images panel only) ──
   Replaces the dotted indicator with a row of mini-previews so the
   visitor can see what's coming up next. Sits at the bottom-right of
   the stage on top of the dark caption gradient, scrolls horizontally
   when there are more thumbs than fit. */
.hs-thumbs {
    position:absolute;
    bottom:.75rem;
    right:.75rem;
    z-index:4;
    display:flex;
    gap:.4rem;
    padding:.3rem;
    max-width:60%;
    overflow-x:auto;
    overflow-y:hidden;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.10);
    border-radius:10px;
    scrollbar-width:none;        /* Firefox */
}
.hs-thumbs::-webkit-scrollbar { display:none; }
.hs-thumb {
    flex:0 0 auto;
    width:64px;
    height:42px;
    padding:0;
    border:1.5px solid transparent;
    border-radius:6px;
    background:transparent;
    overflow:hidden;
    cursor:pointer;
    opacity:.55;
    transition:opacity .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.hs-thumb img {
    width:100%; height:100%;
    object-fit:cover;
    display:block;
}
.hs-thumb:hover { opacity:.9; }
.hs-thumb.active {
    opacity:1;
    border-color:var(--gold);
    box-shadow:0 4px 14px rgba(0,0,0,.45), 0 0 0 1px rgba(141,198,63,.35);
}
/* RTL: pin the thumb strip to bottom-LEFT instead of bottom-right */
html[dir="rtl"] .hs-thumbs { right:auto; left:.75rem; }

/* In the images panel the caption shares the bottom strip with the
   thumbnails — keep the caption to the left half so titles never run
   behind the thumb gallery (and vice-versa in RTL). */
#hs-images .hs-caption { right:42%; }
html[dir="rtl"] #hs-images .hs-caption { right:0; left:42%; }

.home-showcase--empty .hs-empty {
    width:100%;
    flex:1 1 auto;
    min-height:clamp(360px, 62vh, 600px);
    border:1px dashed rgba(255,255,255,.2);
    border-radius:16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,.65);
    text-align:center;
    padding:1.5rem;
}
.hs-empty i { font-size:2.6rem;color:var(--gold);margin-bottom:.75rem; }
.hs-empty h5 { color:#fff;margin:0 0 .35rem 0; }
.hs-empty p { font-size:13px;margin:0;opacity:.75; }

/* ── Showcase responsive adjustments ── */
@media (min-width: 992px) {
    /* Same growth behaviour for the empty-state placeholder */
    .home-showcase--empty .hs-empty {
        min-height: clamp(560px, 72vh, 820px);
    }
}
@media (max-width: 991.98px) {
    .hs-stage { height:clamp(380px, 56vh, 520px); }
    .home-showcase--empty .hs-empty { min-height:clamp(380px, 56vh, 520px); }
    .hs-slide img { padding:1rem 1rem 4.25rem; }
}
@media (max-width: 767.98px) {
    .hs-stage { height:clamp(320px, 50vh, 440px); }
    .home-showcase--empty .hs-empty { min-height:clamp(320px, 50vh, 440px); }
    .hs-slide img { padding:.85rem .85rem 3.75rem; }
    .hs-caption { padding:.7rem .9rem 2rem; font-size:13px; }
    .hs-nav { width:32px; height:32px; }
    .hs-prev { left:.4rem; } .hs-next { right:.4rem; }
    .hs-thumbs { bottom:.5rem; right:.5rem; padding:.25rem; gap:.3rem; max-width:55%; }
    .hs-thumb { width:48px; height:32px; }
    html[dir="rtl"] .hs-thumbs { left:.5rem; right:auto; }
}
@media (max-width: 575.98px) {
    .hs-stage { height:340px; }
    .home-showcase--empty .hs-empty { min-height:340px; }
    .hs-slide img { padding:.6rem .6rem 3.25rem; }
    .hs-caption { padding:.55rem .8rem 1.7rem; font-size:12px; }
    .hs-tab { font-size:11px; padding:.3rem .55rem; }
    .hs-tab i { font-size:.85rem; }
    .hs-count { padding:1px 5px; font-size:9px; }
    .home-showcase-tabs { top:.5rem; right:.5rem; gap:.3rem; padding:.15rem; }
    .hs-dots { bottom:.6rem; }
    .hs-dot { width:7px; height:7px; }
    .hs-dot.active { width:18px; }
    .hs-thumbs { bottom:.45rem; right:.45rem; padding:.2rem; gap:.25rem; max-width:60%; border-radius:8px; }
    .hs-thumb { width:40px; height:28px; border-width:1px; border-radius:4px; }
    html[dir="rtl"] .hs-thumbs { left:.45rem; right:auto; }
    /* Caption must give up more room on tiny screens since thumbs take 60% */
    #hs-images .hs-caption { right:50%; }
    html[dir="rtl"] #hs-images .hs-caption { right:0; left:50%; }
}

.viewer-tabs { gap:.5rem; }
.viewer-tab {
    appearance:none;
    border:1px solid var(--gray-light);
    background:#fff;
    color:var(--gray-text);
    border-radius:var(--radius);
    padding:.45rem 1rem;
    font-size:13px;
    font-weight:600;
    letter-spacing:.3px;
    cursor:pointer;
    transition:all .2s ease;
    display:inline-flex;
    align-items:center;
}
.viewer-tab:hover { border-color:var(--gold);color:var(--navy); }
.viewer-tab.active {
    background:var(--gold);
    border-color:var(--gold);
    color:#fff;
    box-shadow:0 4px 12px rgba(141,198,63,.25);
}
.viewer-tab.active i { color:#fff !important; }

/* ── Clients Marquee ── */
.clients-section { padding:4rem 0 3rem; background:var(--white); overflow:hidden; }
.clients-marquee { position:relative; width:100%; overflow:hidden; padding:1.5rem 0; }
.clients-marquee::before,
.clients-marquee::after {
  content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none;
}
.clients-marquee::before { left:0; background:linear-gradient(to right, var(--white), transparent); }
.clients-marquee::after  { right:0; background:linear-gradient(to left, var(--white), transparent); }
.clients-track {
  display:flex; align-items:center; gap:3.5rem; width:max-content;
  animation: marquee-scroll 40s linear infinite;
  will-change: transform;
}
.clients-marquee:hover .clients-track { animation-play-state:paused; }
.client-logo-item {
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  height:110px; min-width:210px; padding:1rem 2rem;
  background:var(--off-white); border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius); transition:var(--transition);
}
.client-logo-item:hover { border-color:var(--gold); box-shadow:0 4px 16px rgba(0,0,0,.08); }
.client-logo-item img { max-height:84px; max-width:170px; object-fit:contain; filter:grayscale(.4); transition:filter .3s; }
.client-logo-item:hover img { filter:grayscale(0); }
@keyframes marquee-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
[dir="rtl"] .clients-track { animation-name:marquee-scroll-rtl; }
@keyframes marquee-scroll-rtl { from { transform:translateX(0); } to { transform:translateX(50%); } }

/* ── News Section ── */
.news-section { background:var(--off-white); }
.news-card { background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--transition);height:100%; }
.news-card:hover { box-shadow:var(--shadow-md);transform:translateY(-3px); }
.news-img-wrap { height:200px;overflow:hidden; }
.news-img-wrap img { width:100%;height:100%;object-fit:cover;transition:transform .5s ease; }
.news-card:hover .news-img-wrap img { transform:scale(1.04); }
.news-body { padding:1.5rem; }
.news-category { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--gold);margin-bottom:.5rem; }
.news-body h5 { color:var(--navy);font-size:16px;line-height:1.35;margin-bottom:.75rem; }
.news-body p { font-size:13.5px;color:var(--gray-text);margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
.news-footer { padding:1rem 1.5rem;border-top:1px solid var(--gray-light);display:flex;justify-content:space-between;align-items:center; }
.news-date { font-size:12px;color:var(--gray-text); }
.news-footer a { font-size:13px;font-weight:600;color:var(--gold); }

/* ── CTA Section ── */
.cta-section { background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%);position:relative;overflow:hidden; }
.cta-section::before { content:'';position:absolute;inset:0;background-image:var(--geo-pattern);background-size:80px 80px;pointer-events:none; }

/* ── Quote Form ── */
.quote-form { }
.quote-section-card {
  background:#fff;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.07);
  padding:2rem 2rem 1.5rem;
  margin-bottom:1.5rem;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.quote-section-title {
  display:flex;align-items:center;gap:.75rem;
  font-family:'Montserrat',sans-serif;
  font-size:15px;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;
  color:var(--navy);
  margin-bottom:1.5rem;
  padding-bottom:.75rem;
  border-bottom:2px solid rgba(141,198,63,.25);
}
.quote-section-num {
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--gold);color:#fff;
  font-size:14px;font-weight:700;flex-shrink:0;
}
.qf-label {
  display:block;
  font-size:13px;font-weight:600;
  color:var(--navy);
  margin-bottom:.35rem;
}
.qf-label .req { color:#dc2626; margin-left:2px; }
.qf-input {
  border:1px solid rgba(0,0,0,.13);
  border-radius:7px;
  font-size:14px;
  color:var(--navy);
  padding:.55rem .85rem;
  transition:border-color .2s,box-shadow .2s;
  background:#fff;
}
.qf-input:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(141,198,63,.15);
  outline:none;
}
select.qf-input { appearance:auto; }
textarea.qf-input { resize:vertical;min-height:120px; }
@media (max-width:575px) {
  .quote-section-card { padding:1.25rem 1rem 1rem; }
}

/* ── Inner page hero ── */
.page-hero {
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%);
  padding:6rem 0 4rem;position:relative;overflow:hidden;
}
.page-hero::before { content:'';position:absolute;inset:0;background-image:var(--geo-pattern);background-size:80px 80px;pointer-events:none; }

/* ── Quote hero pattern overlay (matches page-hero) ── */
.quote-hero { position:relative; overflow:hidden; }
.quote-hero::before { content:'';position:absolute;inset:0;background-image:var(--geo-pattern);background-size:80px 80px;pointer-events:none; }

/* ──────────────────────────────────────────────────────────────
   Cursor-follow GLOW overlay
   Each pattern section gets an ::after that paints the SAME tile
   in saturated dark-green, but is masked to only show inside a
   ~96px (1 inch @ 96dpi) circle that follows the mouse.
   The drop-shadow filters give the lines their "glow".
   --mx / --my are set per-section by main.js on mousemove.
   ────────────────────────────────────────────────────────────── */
.hero-section::after,
.cta-section::after,
.page-hero::after,
.quote-hero::after,
.services-section::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: var(--geo-pattern-glow);
  background-size: 80px 80px;
  filter: drop-shadow(0 0 4px rgba(79,122,30,0.95))
          drop-shadow(0 0 10px rgba(79,122,30,0.7));
  -webkit-mask: radial-gradient(circle 48px at var(--mx, -200px) var(--my, -200px),
                  rgba(0,0,0,1) 0%,
                  rgba(0,0,0,1) 35%,
                  rgba(0,0,0,0) 100%);
          mask: radial-gradient(circle 48px at var(--mx, -200px) var(--my, -200px),
                  rgba(0,0,0,1) 0%,
                  rgba(0,0,0,1) 35%,
                  rgba(0,0,0,0) 100%);
}
.hero-section { position: relative; }
.page-hero-content { position:relative;z-index:2; }
.breadcrumb-item.active,.breadcrumb-item+.breadcrumb-item::before { color:rgba(255,255,255,0.5); }
.breadcrumb-item a { color:var(--gold); }
[dir="rtl"] .breadcrumb-item+.breadcrumb-item { padding-right:.5rem; padding-left:0; }
[dir="rtl"] .breadcrumb-item+.breadcrumb-item::before { float:right; padding-left:.5rem; padding-right:0; }
.page-hero h1 { color:var(--white);font-size:clamp(2rem,4vw,3rem);margin-bottom:.75rem; }
.page-hero p { color:rgba(255,255,255,0.7);font-size:16px;max-width:600px; }

/* Centre the hero header (breadcrumb + title + subtitle) so the wide hero
   never looks empty on the right. Only the header's own elements are
   centred — nested grids/rows below keep their own alignment. Scoped to
   .page-hero--center so article/contact heroes are unaffected. */
.page-hero--center .page-hero-content > nav .breadcrumb { justify-content:center; }
.page-hero--center .page-hero-content > h1 { text-align:center; }
.page-hero--center .page-hero-content > p {
  text-align:center;
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
}

/* ── Cards generic ── */
.espac-card { background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;transition:var(--transition); }
.espac-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }

/* ── Member Card ── */
.member-card { text-align:center; }
.member-photo-wrap { position:relative;display:inline-block; }
.member-photo { width:150px;height:150px;border-radius:50%;object-fit:cover;border:4px solid var(--gold);margin-bottom:1.25rem; }
.member-badge { position:absolute;bottom:1rem;right:-8px;background:var(--gold);border-radius:20px;padding:.15rem .6rem;font-size:11px;font-weight:700;color:var(--navy);text-transform:uppercase; }
.member-card h5 { color:var(--navy);font-size:16px;margin-bottom:.25rem; }
.member-card .member-title { color:var(--gold);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:.75rem; }
.member-card p { font-size:13.5px;color:var(--gray-text); }

/* ── Board of Directors 1: full-width featured card ── */
.member-card-featured { border-left:3px solid var(--gold); }
.member-card-featured h5 { color:var(--navy);font-size:17px;margin-bottom:.25rem; }
.member-card-featured .member-title { color:var(--gold);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:.5rem; }
.member-card-featured__photo { min-width:160px; text-align:center; }
[dir="rtl"] .member-card-featured { border-left:none;border-right:3px solid var(--gold); }

/* ── Board of Directors 1 – premium dark card ── */
.bod1-section {
  padding: 5rem 0;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  position: relative;
  overflow: hidden;
}
.bod1-section::before {
  content:'';
  position:absolute;inset:0;
  background-image: var(--geo-pattern);
  background-size: 80px 80px;
  pointer-events:none;
}
.bod1-section::after {
  content:'';
  position:absolute;inset:0;
  background-image: var(--geo-pattern-glow);
  background-size: 80px 80px;
  filter: drop-shadow(0 0 4px rgba(79,122,30,0.95))
          drop-shadow(0 0 10px rgba(79,122,30,0.7));
  -webkit-mask: radial-gradient(circle 48px at var(--mx,-200px) var(--my,-200px),
                black 0%,transparent 100%);
  mask: radial-gradient(circle 48px at var(--mx,-200px) var(--my,-200px),
        black 0%,transparent 100%);
  pointer-events:none;
  z-index:1;
}
.bod1-section > .container { position:relative; z-index:2; }

.bod1-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(141,198,63,.18);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 2rem;
  backdrop-filter: blur(6px);
  transition: box-shadow .3s;
}
.bod1-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(141,198,63,.3); }

/* Identity panel */
.bod1-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 2.5rem 2rem;
  min-width: 220px;
  max-width: 220px;
  background: rgba(141,198,63,.06);
  border-right: 1px solid rgba(141,198,63,.15);
  text-align: center;
}
[dir="rtl"] .bod1-identity { border-right: none; border-left: 1px solid rgba(141,198,63,.15); }

.bod1-photo-ring {
  width: 150px; height: 150px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 6px rgba(141,198,63,.12), 0 8px 24px rgba(0,0,0,.35);
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: .25rem;
}
.bod1-photo-ring img { width:100%;height:100%;object-fit:cover;display:block; }
.bod1-initials {
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg,var(--navy),#1a3a28);
  font-size:2.8rem;font-weight:700;color:var(--gold);font-family:'Playfair Display',serif;
}
.bod1-name {
  font-family:'Playfair Display',serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-top: .5rem;
  line-height: 1.3;
}
.bod1-role {
  font-size: 10.5px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--gold);
  margin-top: .15rem;
}
.bod1-social {
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  border-radius:50%;
  border:1px solid rgba(141,198,63,.35);
  color:rgba(255,255,255,.65);
  font-size:14px;
  margin:.3rem .2rem 0;
  transition:background .2s,color .2s,border-color .2s;
  text-decoration:none;
}
.bod1-social:hover { background:var(--gold);border-color:var(--gold);color:#0d1f17; }

/* Gold divider */
.bod1-divider {
  width: 3px;
  background: linear-gradient(to bottom, transparent 5%, var(--gold) 30%, var(--gold) 70%, transparent 95%);
  flex-shrink: 0;
}

/* Bio / description panel */
.bod1-bio {
  flex: 1;
  padding: 2.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.bod1-quote-mark {
  font-size: 5rem;
  line-height: 1;
  color: var(--gold);
  opacity: .2;
  font-family: 'Playfair Display', serif;
  position: absolute;
  top: .75rem;
  left: 2rem;
  pointer-events: none;
  user-select: none;
}
[dir="rtl"] .bod1-quote-mark { left:auto;right:2rem; }
.bod1-desc {
  font-size: 15px;
  color: rgba(255,255,255,.78);
  line-height: 1.85;
  text-align: left;
  position: relative;
  z-index: 1;
}
[dir="rtl"] .bod1-desc { text-align: right; }

/* Responsive */
@media (max-width: 767px) {
  .bod1-card { flex-direction: column; }
  .bod1-identity { min-width:unset;max-width:100%;border-right:none;border-bottom:1px solid rgba(141,198,63,.15);padding:2rem 1.5rem; }
  [dir="rtl"] .bod1-identity { border-left:none;border-bottom:1px solid rgba(141,198,63,.15); }
  .bod1-divider { display: none; }
  .bod1-bio { padding: 1.75rem 1.5rem 2rem; }
}

/* ── Board of Directors 2 – dark cards inside bod1-section ── */
.bod2-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(141,198,63,.18);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  transition: transform .25s, box-shadow .25s, background .25s;
}
.bod2-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.09);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(141,198,63,.25);
}
.bod2-photo-wrap {
  width: 145px; height: 145px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: 0 4px 14px rgba(141,198,63,.25);
}
.bod2-photo-wrap img { width:100%;height:100%;object-fit:cover;display:block; }
.bod2-initials {
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg,var(--navy),#1a3a28);
  font-size:2.2rem;font-weight:700;color:var(--gold);font-family:'Playfair Display',serif;
}
.bod2-name {
  font-family:'Playfair Display',serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .25rem;
}
.bod2-role {
  font-size: 10.5px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--gold);
}
.bod2-social {
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;
  border-radius:50%;
  border:1px solid rgba(141,198,63,.3);
  color:rgba(255,255,255,.65);
  font-size:13px;
  margin-top:.6rem;
  transition:background .2s,color .2s,border-color .2s;
  text-decoration:none;
}
.bod2-social:hover { background:var(--gold);border-color:var(--gold);color:#0d1f17; }

/* ── Applications ── */
.app-card { background:var(--navy);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--transition);height:100%; }
.app-card:hover { box-shadow:var(--shadow-lg);transform:translateY(-4px); }
.app-img { height:200px;object-fit:cover;width:100%; }
.app-body { padding:1.5rem; }
.app-number { font-family:'Playfair Display',serif;font-size:2.5rem;font-weight:700;color:rgba(141,198,63,.22);line-height:1; }
.app-body h5 { color:var(--white);font-size:16px;margin-bottom:.5rem; }
.app-body p { color:rgba(255,255,255,.65);font-size:13.5px;margin:0; }

/* ── Career ── */
.career-card { background:var(--white);border-radius:var(--radius-lg);border-left:4px solid var(--gold);padding:1.75rem;box-shadow:var(--shadow-sm);transition:var(--transition); }
.career-card:hover { box-shadow:var(--shadow-md);transform:translateX(4px);border-left-color:var(--brand-red); }
.career-card h5 { color:var(--navy);font-size:17px;margin-bottom:.5rem; }
.career-badges .badge { font-size:11px;padding:.35rem .75rem;margin-right:.35rem;font-weight:600; }
.badge-navy { background:rgba(26,38,32,.08);color:var(--navy); }
.badge-gold { background:rgba(141,198,63,.14);color:var(--gold-dark); }
.badge-red { background:rgba(193,39,45,.10);color:var(--brand-red); }

/* ── Contact ── */
.contact-info-card { background:var(--navy);border-radius:var(--radius-lg);padding:2.5rem;color:var(--white); }
.contact-info-item { display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.75rem; }
.contact-info-icon { width:46px;height:46px;min-width:46px;border-radius:var(--radius);background:rgba(141,198,63,.12);border:1px solid rgba(141,198,63,.25);display:flex;align-items:center;justify-content:center; }
.contact-info-icon i { color:var(--gold);font-size:1.1rem; }
.contact-info-text h6 { color:var(--white);margin:0 0 .25rem;font-family:'Montserrat',sans-serif;font-weight:700; }
.contact-info-text p { color:rgba(255,255,255,.65);margin:0;font-size:14px; }

/* ── Footer ── */
.espac-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.72);
  position: relative;
}
.espac-footer::before {
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--brand-red) 50%, var(--gold) 100%);
  opacity:.85;
}
.footer-top { padding: 4rem 0 3rem; }
.footer-brand { display:inline-block; }
.footer-about {
  color: rgba(255,255,255,0.68); font-size: 14px; line-height: 1.7; margin: 0;
}
.footer-heading {
  color: var(--white); font-family:'Montserrat',sans-serif;
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; margin-bottom: 1.25rem; position: relative;
  padding-bottom: .6rem;
}
.footer-heading::after {
  content:''; position:absolute; left:0; bottom:0;
  width:32px; height:2px; background: var(--gold); border-radius:2px;
}
.footer-links { list-style:none; padding:0; margin:0; }
.footer-links li { margin-bottom:.55rem; }
.footer-links a {
  color: rgba(255,255,255,0.68); font-size: 13.5px; text-decoration:none;
  transition: var(--transition); display:inline-flex; align-items:center; gap:.4rem;
}
.footer-links a::before {
  content:''; width:6px; height:1px; background: var(--gold);
  transition: var(--transition); opacity:.5;
}
.footer-links a:hover { color: var(--gold); padding-left: 4px; }
.footer-links a:hover::before { width:14px; opacity:1; }

.footer-contact-list { list-style:none; padding:0; margin:0; }
.footer-contact-list li {
  display:flex; gap:.75rem; align-items:flex-start;
  font-size: 13.5px; color: rgba(255,255,255,0.72);
  margin-bottom: .85rem; line-height:1.55;
}
.footer-contact-list i { color: var(--gold); font-size:1rem; margin-top:3px; min-width:18px; }
.footer-contact-list span { flex:1; }

.footer-social { display:flex; gap:.6rem; }
.footer-social .social-link {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(141,198,63,0.25);
  color: var(--gold); font-size: 14px;
  transition: var(--transition); text-decoration:none;
}
.footer-social .social-link:hover {
  background: var(--gold); color: var(--navy);
  border-color: var(--gold); transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(141,198,63,0.35);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.25rem 0;
  background: rgba(0,0,0,0.18);
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
}
.footer-bottom p { color: rgba(255,255,255,0.55); margin:0; }
.footer-bottom-links { display:flex; gap:1.25rem; }
.footer-bottom-links a {
  color: rgba(255,255,255,0.55); text-decoration:none;
  transition: var(--transition);
}
.footer-bottom-links a:hover { color: var(--gold); }

/* In the footer, use a smaller logo card so the footer feels balanced */
.footer-brand .site-logo-img--footer { height: 56px; max-width: 200px; }

/* ── Form Styles ── */
.espac-form .form-control, .espac-form .form-select {
  border:1.5px solid #e0ddd6;border-radius:var(--radius);padding:.75rem 1rem;font-size:14px;
  transition:var(--transition); background:var(--off-white);
}
.espac-form .form-control:focus, .espac-form .form-select:focus {
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(141,198,63,.18);background:var(--white);
}
.espac-form label { font-size:13px;font-weight:600;color:var(--navy);margin-bottom:.4rem; }
.form-section { background:var(--white);border-radius:var(--radius-lg);padding:2.5rem;box-shadow:var(--shadow-sm); }

/* ── Quote Page ── */
.quote-hero { background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%);padding:5rem 0; }
.quote-step { display:flex;gap:1rem;margin-bottom:1.5rem;padding:1.25rem;background:var(--off-white);border-radius:var(--radius); }
.quote-step-num { width:32px;height:32px;min-width:32px;border-radius:50%;background:var(--gold);color:var(--navy);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center; }

/* ── Admin Styles ── */
.admin-body { font-family:'Montserrat',sans-serif; background:#f4f5f7; }
.admin-sidebar {
  width:260px;height:100vh;max-height:100vh;background:var(--navy);position:fixed;top:0;left:0;z-index:1040;
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  transition:transform .25s ease;
}
.admin-sidebar-brand { padding:1.75rem 1.5rem;border-bottom:1px solid rgba(141,198,63,.18);text-align:center;flex-shrink:0; }
.admin-main { margin-left:260px;min-height:100vh; }
.admin-topbar { background:var(--white);border-bottom:1px solid #eee;padding:.85rem 2rem;display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 4px rgba(0,0,0,.05);position:sticky;top:0;z-index:50; }
.admin-topbar .admin-hamburger { display:none;background:transparent;border:1px solid var(--border);border-radius:8px;padding:.35rem .6rem;color:var(--navy);font-size:1.25rem;line-height:1;cursor:pointer; }
.admin-topbar .admin-hamburger:hover { background:var(--off-white); }
.admin-content { padding:2rem; }

/* Sidebar nav list — scrollable middle section, bottom user block is sticky-fixed at the bottom */
.sidebar-nav { padding:1rem 0;flex:1;display:flex;flex-direction:column;min-height:0; }
.sidebar-nav > a, .sidebar-nav > .sidebar-section-label { flex-shrink:0; }
.sidebar-nav a {
  display:flex;align-items:center;gap:.75rem;padding:.7rem 1.5rem;color:rgba(255,255,255,.7);
  font-size:13.5px;font-weight:500;transition:var(--transition);text-decoration:none;
  border-left:3px solid transparent;
}
.sidebar-nav a:hover,.sidebar-nav a.active { color:var(--gold);background:rgba(141,198,63,.10);border-left-color:var(--gold); }
.sidebar-user-block { margin-top:auto;flex-shrink:0; }

/* Slim, themed scrollbar inside the admin sidebar */
.admin-sidebar { scrollbar-width:thin; scrollbar-color:rgba(141,198,63,.35) transparent; }
.admin-sidebar::-webkit-scrollbar { width:6px; }
.admin-sidebar::-webkit-scrollbar-track { background:transparent; }
.admin-sidebar::-webkit-scrollbar-thumb { background:rgba(141,198,63,.35); border-radius:3px; }
.admin-sidebar::-webkit-scrollbar-thumb:hover { background:rgba(141,198,63,.6); }
.sidebar-nav a i { width:20px;text-align:center;font-size:1rem; }
.sidebar-section-label { font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(141,198,63,.55);padding:.75rem 1.5rem .25rem; }

/* Sidebar overlay (mobile drawer backdrop) */
.admin-sidebar-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1030; }
.admin-sidebar-overlay.show { display:block; }
.admin-card { background:var(--white);border-radius:var(--radius-lg);box-shadow:0 2px 12px rgba(0,0,0,.06);padding:1.5rem;margin-bottom:1.5rem; }
.admin-card-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid #f0efe9; }
.admin-card-header h5 { color:var(--navy);margin:0;font-size:16px; }
.stat-card { background:var(--white);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:0 2px 12px rgba(0,0,0,.06);border-top:3px solid var(--gold); }
.stat-card .stat-num { font-family:'Playfair Display',serif;font-size:2.2rem;font-weight:700;color:var(--navy); }
.stat-card .stat-lbl { font-size:13px;color:var(--gray-text);font-weight:500; }
.stat-card .stat-icon { width:48px;height:48px;border-radius:var(--radius);background:rgba(141,198,63,.12);display:flex;align-items:center;justify-content:center; }
.stat-card .stat-icon i { color:var(--gold);font-size:1.3rem; }
.table-espac th { font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--gray-text);border-bottom:2px solid #f0efe9;padding:.75rem 1rem; }
.table-espac td { font-size:13.5px;padding:.75rem 1rem;vertical-align:middle;border-bottom:1px solid #f7f6f2; }
.admin-login-wrap { min-height:100vh;background:var(--navy);display:flex;align-items:center;justify-content:center;padding:2rem; }
.admin-login-card { background:var(--white);border-radius:var(--radius-lg);padding:2.5rem;width:100%;max-width:420px;box-shadow:var(--shadow-lg); }
.admin-login-logo { text-align:center;margin-bottom:2rem; }

/* ── Alerts ── */
.alert-espac-success { background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.3);color:#166534;border-radius:var(--radius); }
.alert-espac-error { background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.3);color:#991b1b;border-radius:var(--radius); }

/* ── Gallery grid ── */
.gallery-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem; }
.gallery-item { position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;cursor:pointer;background:#0e1812; }
.gallery-item img,
.gallery-item video { width:100%;height:100%;object-fit:cover;transition:transform .4s ease;display:block; }
.gallery-item:hover img,
.gallery-item:hover video { transform:scale(1.06); }
/* Play badge overlaid on video thumbnails */
.gallery-play {
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  background:rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.6rem;pointer-events:none;
  transition:all .25s ease;z-index:2;
}
.gallery-item--video:hover .gallery-play { background:var(--gold);border-color:var(--gold);transform:translate(-50%,-50%) scale(1.08); }

/* ── Lightbox (photo + video carousel) ── */
.lightbox-overlay { position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9000;display:none;align-items:center;justify-content:center; }
.lightbox-overlay.active { display:flex; }
.lightbox-stage { max-width:90vw;max-height:85vh;display:flex;align-items:center;justify-content:center; }
.lightbox-img { max-width:90vw;max-height:85vh;border-radius:var(--radius);display:block; }
.lightbox-video { max-width:90vw;max-height:85vh;border-radius:var(--radius);background:#000;display:block; }
.lightbox-close { position:absolute;top:1.5rem;right:1.5rem;background:transparent;border:none;color:var(--white);font-size:2rem;cursor:pointer;z-index:2;line-height:1; }
.lightbox-nav {
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.45);
  color:#fff;font-size:1.3rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s ease;z-index:2;
}
.lightbox-nav:hover { background:var(--gold);border-color:var(--gold); }
.lightbox-prev { left:1.5rem; }
.lightbox-next { right:1.5rem; }
html[dir="rtl"] .lightbox-prev { left:auto;right:1.5rem; }
html[dir="rtl"] .lightbox-next { right:auto;left:1.5rem; }
@media (max-width:575.98px){
  .lightbox-nav { width:40px;height:40px;font-size:1.1rem; }
  .lightbox-prev { left:.5rem; } .lightbox-next { right:.5rem; }
}

/* Gallery section heading on the project page */
.pd-media-title { color:var(--navy);font-size:1.15rem;margin-bottom:1rem; }

/* ── Placeholder images ── */
.img-placeholder { background:linear-gradient(135deg,#e8e4d9 0%,#d5d0c5 100%);display:flex;align-items:center;justify-content:center;color:#999; }

/* ── Misc utilities ── */
.text-gold { color:var(--gold) !important; }
.bg-navy { background:var(--navy) !important; }
.bg-gold { background:var(--gold) !important; }
.border-gold { border-color:var(--gold) !important; }
.rounded-espac { border-radius:var(--radius-lg) !important; }
section { padding:5rem 0; }
.sticky-top { top:0; }

/* ── Responsive ── */
@media(max-width:991px){
  .about-exp-badge { left:1rem; }
  /* Sidebar becomes a slide-in drawer on tablets and phones */
  .admin-sidebar { width:280px;transform:translateX(-100%);box-shadow:4px 0 24px rgba(0,0,0,.25); }
  .admin-sidebar.show { transform:translateX(0); }
  .admin-main { margin-left:0; }
  .admin-topbar .admin-hamburger { display:inline-flex;align-items:center;justify-content:center; }
  .admin-content { padding:1.25rem; }
  .hero-content { padding:.75rem 0 3rem; }
  .hero-stats { margin-top:2.5rem; gap:2rem; }
  .footer-top { padding: 3rem 0 2rem; }
  .footer-bottom { text-align:center; }
  .footer-bottom-links { justify-content:center; margin-top:.5rem; }
  section { padding:4rem 0; }
}
@media(max-width:767px){
  section { padding:3rem 0; }
  /* Bootstrap's `.row.g-5` applies negative margins of -1.5rem each side,
     which makes the row wider than the viewport on phones and causes
     visible overflow (especially in RTL where the document scrolls
     differently). Tighten the gutter on phones. */
  .row.g-5, .row.g-lg-5 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
  .hero-title { font-size:clamp(1.85rem,7vw,2.6rem); margin-bottom:1rem;
                overflow-wrap:break-word; word-wrap:break-word; hyphens:auto; }
  .hero-subtitle { font-size:15px; margin-bottom:1.75rem; max-width:100%; }
  .hero-actions { gap:.65rem; }
  .hero-actions .btn { padding:.6rem 1.1rem; font-size:13px; }
  .hero-stats { gap:1.5rem; margin-top:2rem; }
  .section-title { font-size:clamp(1.5rem,5vw,2rem); }
  .container, .container-lg, .container-md, .container-sm, .container-xl { padding-left:1rem; padding-right:1rem; }
  .about-exp-badge { left:1rem; bottom:1rem; padding:.85rem 1rem; }
  /* Stack nav links cleanly via Bootstrap collapse — but tighten paddings */
  .navbar > .container { padding-left:.75rem; padding-right:.75rem; }
  .navbar-brand { padding-top:0; padding-bottom:0; min-width:0; }
  .navbar-brand img,
  .navbar-brand .site-logo-img { height:34px; max-width:140px; }
  .lang-switcher { margin-inline:.35rem; padding:2px; }
  .lang-pill { min-width:28px; height:22px; font-size:10px; padding:0 .45rem; }
  .navbar-toggler { padding:.35rem .55rem; }
  .navbar-toggler i { font-size:1.2rem; }
}
@media(max-width:380px){
  .navbar-brand img,
  .navbar-brand .site-logo-img { max-width:110px; height:30px; }
  .lang-pill { min-width:26px; padding:0 .35rem; font-size:9.5px; }
}
@media(max-width:576px){
  section { padding:2.5rem 0; }
  .hero-stats { gap:1.25rem; }
  .stat-number,.hero-stat-number { font-size:1.6rem; }
  .stat-label,.hero-stat-label { font-size:11px; }
  .hero-title { font-size:clamp(1.6rem,8vw,2.2rem); }
  .section-subtitle { font-size:11px; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-actions .btn { width:100%; justify-content:center; }
  /* Cards / grids tighten on tiny screens */
  .service-card, .news-card, .project-card { padding:1.25rem; }
  .footer-top { padding: 2.5rem 0 1.5rem; }
}

/* ============================================================
   Language switcher (EN / AR pills next to the logo)
   ============================================================ */
.lang-switcher {
  display:inline-flex;
  align-items:center;
  gap:2px;
  margin-inline:.85rem;
  background:rgba(141,198,63,.10);
  border:1px solid rgba(141,198,63,.28);
  border-radius:999px;
  padding:3px;
  order:0;
}
.lang-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:26px;
  padding:0 .65rem;
  border-radius:999px;
  font-family:'Montserrat',sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
  color:var(--ink);
  text-decoration:none;
  transition:all .2s ease;
  line-height:1;
}
.lang-pill:hover { color:var(--gold-dark); }
.lang-pill.active {
  background:var(--gold);
  color:#fff;
  box-shadow:0 2px 8px rgba(141,198,63,.4);
}
@media (max-width: 991.98px) {
  .lang-switcher { margin-inline:auto .5rem; order:2; }
}
@media (max-width: 480px) {
  .lang-pill { min-width:30px;font-size:10px;padding:0 .5rem; }
}

/* ============================================================
   Right-to-left layout adjustments for Arabic
   ============================================================ */
html[dir="rtl"] body,
html[lang="ar"] body {
  font-family:'Tajawal','Montserrat',sans-serif;
  letter-spacing:0;
}
html[lang="ar"] .hero-title,
html[lang="ar"] .section-title,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6 {
  font-family:'Tajawal','Playfair Display',serif;
  letter-spacing:0;
}
html[lang="ar"] .hero-eyebrow,
html[lang="ar"] .section-label,
html[lang="ar"] .hero-stat-label,
html[lang="ar"] .stat-label {
  letter-spacing:1px;
}

/* Mirror inline icons that point in a direction (arrows, chevrons) */
html[dir="rtl"] .bi-arrow-right::before    { content:"\f12f"; } /* arrow-left */
html[dir="rtl"] .bi-arrow-left::before     { content:"\f138"; } /* arrow-right */
html[dir="rtl"] .bi-chevron-right::before  { content:"\f284"; }
html[dir="rtl"] .bi-chevron-left::before   { content:"\f285"; }

/* Bootstrap "ms-auto" pushes nav to the right in LTR; in RTL we want it on
   the left — Bootstrap 5 already handles ms-/me- via logical props, but
   we keep this explicit to override any older styles. */
html[dir="rtl"] .navbar-nav.ms-auto { margin-left:0;margin-right:auto; }

/* Hero text alignment in Arabic — section dividers + features stay on the
   correct visual side. */
html[dir="rtl"] .section-divider.left { margin-left:auto;margin-right:0; }
html[dir="rtl"] .about-feature {
  flex-direction:row-reverse;
  text-align:right;
}
html[dir="rtl"] .footer-links a,
html[dir="rtl"] .footer-contact-list li { text-align:right; }
html[dir="rtl"] .footer-contact-list li i { margin-left:.6rem;margin-right:0; }
html[dir="rtl"] .topbar-left { flex-direction:row-reverse; }

/* Showcase tabs cluster: pin to top-LEFT instead of top-right in RTL */
html[dir="rtl"] .home-showcase-tabs { right:auto;left:.65rem; }

/* Project / news card meta items use icon-on-the-right in RTL */
html[dir="rtl"] .project-meta span i,
html[dir="rtl"] .news-meta span i { margin-left:.35rem;margin-right:0; }

/* ============================================================
   Bilingual EN/AR field pairs in the Admin Portal
   ============================================================ */
.bilingual-info {
  background:rgba(141,198,63,.10);
  border:1px solid rgba(141,198,63,.30);
  color:var(--navy);
  border-radius:6px;
  font-size:13px;
}
.bilingual-field { margin-bottom:1rem; }
.bilingual-label {
  display:block;
  font-size:12px;
  font-weight:700;
  color:var(--navy);
  margin-bottom:.4rem;
  letter-spacing:.3px;
  text-transform:uppercase;
}
.bilingual-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.65rem;
}
.bilingual-pair--stacked {
  grid-template-columns:1fr;
  gap:1rem;
}

/* ── Summernote rich-editor integration ── */
.note-editor.note-frame {
  border-radius:8px;
  border:1px solid rgba(26,38,32,.2);
  /* No overflow:hidden — dropdowns must escape the frame */
}
.note-editor.note-frame .note-toolbar {
  background:#f8f9fa;
  border-bottom:1px solid rgba(26,38,32,.12);
  padding:.35rem .5rem;
  direction:ltr !important; /* toolbar always left-to-right */
  border-radius:8px 8px 0 0;
}
.note-editor.note-frame .note-editable {
  background:#fff;
  font-family:'Montserrat',sans-serif;
  font-size:14px;
  color:#1a2620;
  min-height:120px;
  padding:.75rem 1rem;
}
.note-editor.note-frame .note-statusbar {
  background:#f8f9fa;
  border-top:1px solid rgba(26,38,32,.12);
  border-radius:0 0 8px 8px;
}
.note-editor.note-frame.focused {
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(141,198,63,.15);
}
.note-btn { border-radius:5px !important; }
.note-color-btn .note-current-color-button { border-radius:5px !important; }
/* Dropdowns rendered at body level via container:'body' — ensure high z-index */
body > .note-popover,
body > .note-modal,
body > .note-dropdown-menu {
  z-index:99999 !important;
}
.note-dropdown-menu {
  z-index:99999 !important;
}

/* Scrollable font & size dropdowns */
.note-fontname .note-dropdown-menu,
.note-fontsize .note-dropdown-menu {
  max-height:260px;
  overflow-y:auto;
  overflow-x:hidden;
  min-width:200px;
  padding:.35rem 0;
  border-radius:8px;
  box-shadow:0 8px 24px rgba(26,38,32,.14);
  scrollbar-width:thin;
  scrollbar-color:rgba(26,38,32,.2) transparent;
}
.note-fontname .note-dropdown-menu::-webkit-scrollbar,
.note-fontsize .note-dropdown-menu::-webkit-scrollbar { width:5px; }
.note-fontname .note-dropdown-menu::-webkit-scrollbar-thumb,
.note-fontsize .note-dropdown-menu::-webkit-scrollbar-thumb {
  background:rgba(26,38,32,.2); border-radius:4px;
}
/* Font preview — each item renders in its own typeface */
.note-fontname .note-dropdown-item {
  font-size:14px;
  padding:.4rem .9rem;
  line-height:1.5;
  transition:background .15s;
}
.note-fontname .note-dropdown-item:hover,
.note-fontsize  .note-dropdown-item:hover {
  background:rgba(141,198,63,.1);
  color:var(--navy);
}
.note-fontname .note-dropdown-item.checked,
.note-fontsize  .note-dropdown-item.checked {
  background:rgba(141,198,63,.15);
  font-weight:700;
  color:var(--navy);
}
/* Size dropdown */
.note-fontsize .note-dropdown-menu {
  min-width:90px;
}
.note-fontsize .note-dropdown-item {
  font-size:13px;
  padding:.35rem .9rem;
  text-align:center;
}
.bilingual-pair--stacked .note-editor.note-frame {
  width:100% !important;
}

/* ── Rich content output (frontend rendering of WYSIWYG-edited fields) ── */
.rich-content p { margin-bottom:.5em; }
.rich-content p:last-child { margin-bottom:0; }
.rich-content ul, .rich-content ol { padding-left:1.25rem; margin-bottom:.5em; }
.rich-content strong, .rich-content b { font-weight:700; }
.rich-content em, .rich-content i { font-style:italic; }
.rich-content u { text-decoration:underline; }
.rich-content s { text-decoration:line-through; }
.rich-content a { color:var(--gold); }
/* Prevent site-level decorative pseudo-elements from firing on editor spans */
.rich-content span::after,
.hero-title .rich-content span::after,
.hero-eyebrow span::after { content:none !important; }
/* Inline on hero elements (not wrapped in .rich-content div) */
.hero-title span:not(.highlight)::after,
.hero-eyebrow span::after { content:none !important; }

/* Compact (title/heading) editor variant */
.rich-editor--compact + .note-editor .note-editable {
  min-height:44px !important;
  padding:.4rem .75rem;
  font-size:14px;
  font-weight:500;
}
.rich-editor--compact + .note-editor .note-toolbar {
  padding:.2rem .4rem;
}
.rich-editor--compact + .note-editor .note-statusbar {
  display:none;
}
.bilingual-col {
  position:relative;
  border:1px solid rgba(141,198,63,.18);
  border-radius:6px;
  padding:.45rem .5rem .5rem;
  background:#fafaf7;
}
.bilingual-flag {
  display:inline-block;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:1.2px;
  color:var(--gold-dark);
  background:rgba(141,198,63,.15);
  border-radius:3px;
  padding:1px 6px;
  margin-bottom:.35rem;
}
.bilingual-col[dir="rtl"] .bilingual-flag {
  color:var(--brand-red);
  background:rgba(193,39,45,.10);
}
.bilingual-col .form-control {
  border:0;
  background:#fff;
  padding:.45rem .55rem;
  font-size:13.5px;
}
.bilingual-col .form-control:focus { box-shadow:0 0 0 2px rgba(141,198,63,.25); }
.bilingual-col[dir="rtl"] .form-control {
  font-family:'Tajawal',sans-serif;
  text-align:right;
}
@media (max-width: 575.98px) {
  .bilingual-pair { grid-template-columns:1fr;gap:.5rem; }
}

/* ============================================================
   Floating WhatsApp Button
   ============================================================ */
.whatsapp-float {
  position:fixed;
  bottom:1.5rem;
  right:1.5rem;
  width:60px;
  height:60px;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.75rem;
  box-shadow:0 4px 20px rgba(37,211,102,.4);
  z-index:999;
  transition:all .25s ease;
  text-decoration:none;
}
.whatsapp-float:hover {
  background:#20bd5a;
  color:#fff;
  transform:scale(1.08);
  box-shadow:0 6px 28px rgba(37,211,102,.5);
}
.whatsapp-float:active {
  transform:scale(.96);
}
html[dir="rtl"] .whatsapp-float {
  right:auto;
  left:1.5rem;
}
@media (max-width:575.98px) {
  .whatsapp-float {
    width:54px;
    height:54px;
    font-size:1.5rem;
    bottom:1rem;
    right:1rem;
  }
  html[dir="rtl"] .whatsapp-float {
    right:auto;
    left:1rem;
  }
}

/* ============================================================
   Project detail — media viewer moved up into the hero
   ============================================================ */
.project-hero { padding:4rem 0 3.5rem; }
.project-hero .breadcrumb { margin-bottom:.75rem; }
.pd-viewer { position:relative; }

/* On the dark hero, the inactive viewer tabs read better as translucent
   light pills (the shared .viewer-tab base is designed for white pages). */
.project-hero .viewer-tab {
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.2);
  color:rgba(255,255,255,.85);
}
.project-hero .viewer-tab:hover { border-color:var(--gold); color:#fff; }
.project-hero .viewer-tab.active {
  background:var(--gold); border-color:var(--gold); color:#fff;
}
.pd-model-count {
  display:inline-block; margin-left:.35rem;
  font-size:10px; font-weight:700;
  background:rgba(0,0,0,.25); color:inherit;
  padding:.05rem .4rem; border-radius:20px;
}

/* Image panel inside the hero */
.pd-cover { border-radius:14px; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.35); }
.pd-cover img { width:100%; height:clamp(280px, 42vh, 460px); object-fit:cover; display:block; }
.pd-gallery { margin-top:.85rem; }

/* 3D model stage inside the hero */
.pd-model-stage {
  position:relative;
  width:100%;
  height:clamp(320px, 52vh, 540px);
  border-radius:16px;
  overflow:hidden;
  /* Matches the site's dark-green hero background. */
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 55%, #15201B 100%);
  box-shadow:0 22px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06);
  /* The 3D model stage must stay LTR internally — RTL causes the WebGL
     canvas to shift/drift within its container. */
  direction: ltr;
}

/* ── 3D viewer stages: site geo-pattern background ──
   The model-viewer canvas is transparent around the model, so this static
   pattern shows behind the 3D model — matching the rest of the site.
   NOTE: the cursor-follow glow (masked + filtered ::after) is deliberately
   NOT applied here. Recomputing a radial mask + drop-shadow filter on every
   mousemove ON TOP OF the live WebGL canvas caused severe flickering/glitching
   on low-end / older GPUs. A static pattern renders identically everywhere. */
.model-viewer-wrap::before,
.hs-stage--model::before,
.pd-model-stage::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: var(--geo-pattern);
  background-size: 80px 80px;
}
/* Keep the model slides (and their controls) above the bg pattern/glow. */
.pd-model-slide, .hs-slide { z-index:2; }

.pd-model-slide {
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .45s ease;
}
.pd-model-slide.active { opacity:1; visibility:visible; }
.pd-model-slide model-viewer,
.pd-model-slide .pd-mv {
  width:100%; height:100%; display:block;
  direction: ltr !important; /* Prevent RTL from shifting the 3D scene */
  background:transparent;
  --progress-bar-color:var(--gold);
  --progress-bar-height:3px;
}
.pd-model-caption {
  position:absolute; left:0; right:0; bottom:0;
  padding:1.5rem 1.1rem .9rem;
  color:#fff; font-size:13px; font-weight:600; letter-spacing:.3px;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.7) 100%);
  pointer-events:none; z-index:3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pd-model-index { opacity:.7; font-weight:500; margin-left:.35rem; }

/* Side arrows to switch between a project's models */
.pd-model-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.5); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s ease; z-index:4;
  backdrop-filter:blur(4px); font-size:1.1rem;
}
.pd-model-nav:hover { background:var(--gold); border-color:var(--gold); }
.pd-model-prev { left:.6rem; }
.pd-model-next { right:.6rem; }

.pd-model-dots {
  position:absolute; left:0; right:0; bottom:.75rem;
  display:flex; justify-content:center; gap:.4rem; z-index:4;
}
.pd-model-dot {
  width:8px; height:8px; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.4); cursor:pointer; transition:all .2s ease;
}
.pd-model-dot:hover { background:rgba(255,255,255,.7); }
.pd-model-dot.active { background:var(--gold); width:22px; border-radius:5px; }

.pd-model-hint {
  margin:.75rem 0 0;
  font-size:12px; color:rgba(255,255,255,.55);
}

/* ── Shared 3D zoom controls (project page + homepage showcase) ── */
.model-zoom {
  position:absolute;
  bottom:.75rem; right:.75rem;
  display:flex; flex-direction:column; gap:.4rem;
  z-index:5;
}
.model-zoom-btn {
  width:38px; height:38px; padding:0;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.5); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s ease;
  backdrop-filter:blur(4px); font-size:1rem;
}
.model-zoom-btn:hover { background:var(--gold); border-color:var(--gold); }
.model-zoom-btn:active { transform:scale(.92); }

/* RTL: flip the side arrows and move zoom controls to the right */
html[dir="rtl"] .pd-model-prev { left:auto; right:.6rem; }
html[dir="rtl"] .pd-model-next { right:auto; left:.6rem; }
html[dir="rtl"] .model-zoom { right:auto; left:.75rem; }
html[dir="rtl"] .project-hero .viewer-tab { margin-left:0; }

@media (max-width: 991.98px) {
  .project-hero { padding:3rem 0 2.5rem; }
  .pd-viewer { margin-top:1.5rem; }
}