/* ════════════════════════════════════════════════════════════════════════
   El Sherif Law Firm — new-site.css
   DARK BELTONE-STYLE REDESIGN 2026
   ════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════
   1. CSS VARIABLES  (light grey palette)
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --void:              transparent;             /* Let cyber-pattern shine through */
  --deep:              #E6E7E8;                 /* Beltone's black-20 slate */
  --surface:           rgba(255, 255, 255, 0.85); /* Pure surface white */
  --surface2:          rgba(241, 242, 242, 0.85); /* Beltone's black-10 light grey */
  --text:              #171717;                 /* Beltone's primary dark text */
  --muted:             rgba(23,23,23,0.62);     /* Slate muted text */
  --dim:               rgba(23,23,23,0.38);     /* Slate dim text */
  --gold:              #B8922E;                 /* El Sherif's original prestigious gold */
  --gold2:             #D4A83A;                 /* El Sherif's original warm gold */
  --gold-dim:          rgba(184,146,46,0.14);   /* Warm gold dim glow */
  --gold-glow:         rgba(184,146,46,0.08);   /* Warm gold background glow */
  --border:            rgba(65,64,66,0.12);     /* Beltone's stroke-dark border */
  --border-gold:       rgba(184,146,46,0.35);   /* Gold accent border */
  --glass-bg:          rgba(255,255,255,0.80);  /* Glassmorphic elements */
  --glass-bg-strong:   rgba(255,255,255,0.96);
  --glass-hover:       rgba(241,242,242,0.98);
  --glass-border:      rgba(65,64,66,0.08);
  --glass-border-gold: rgba(184,146,46,0.50);
  --glass-blur:        blur(24px) saturate(1.2);
  --glass-shadow:
    0 2px 12px rgba(0,0,0,0.12),
    0 8px 32px rgba(0,0,0,0.16);
  --glass-shadow-hover:
    0 4px 20px rgba(0,0,0,0.20),
    0 16px 48px rgba(0,0,0,0.28);
  --trans: all 0.35s cubic-bezier(0.4,0,0.2,1);
}


/* ════════════════════════════════════════════════════════════════════════
   2. BASE RESET
   ════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (min-width: 768px)  { .container { width: 820px; } }
@media (min-width: 992px)  { .container { width: 1060px; } }
@media (min-width: 1200px) { .container { width: 1300px; } }

html, body {
  background: var(--void);
  color: var(--text);
}

body {
  font-family: 'Cairo', sans-serif;
  font-size: 15px;
  direction: rtl;
  text-align: right;
  line-height: 1.7;
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.3s;
}
a:hover { color: var(--gold2); }

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

h1, h2, h3, h4, h5, h6 {
  color: var(--text);
  line-height: 1.3;
}

p {
  color: var(--muted);
  font-size: 15px;
}


/* ════════════════════════════════════════════════════════════════════════
   3. LANGUAGE TOGGLE
   ════════════════════════════════════════════════════════════════════════ */
.ar-text { display: block; }
.en-text { display: none; }
body.lang-en .ar-text { display: none; }
body.lang-en .en-text { display: block; }

span.ar-text { display: inline; }
span.en-text { display: none; }
body.lang-en span.ar-text { display: none; }
body.lang-en span.en-text { display: inline; }

.ar-text,
[dir="rtl"] .marquee-content,
[dir="rtl"] .btn-submit,
[dir="rtl"] .btn-contact-submit,
[dir="rtl"] .btn-hero-primary,
[dir="rtl"] .btn-hero-secondary {
  letter-spacing: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   4. RTL BOOTSTRAP 3 FIXES
   ════════════════════════════════════════════════════════════════════════ */
html[lang="ar"] .row.align-items-center,
html[lang="ar"] .pmv-section .row,
html[lang="ar"] .values-section .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
html[lang="ar"] .row.align-items-center {
    align-items: center;
}
html[lang="ar"] .row.justify-content-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Remove clearfix from flexed rows to prevent layout breaks */
html[lang="ar"] .pmv-section .row::before,
html[lang="ar"] .pmv-section .row::after,
html[lang="ar"] .values-section .row::before,
html[lang="ar"] .values-section .row::after {
    display: none !important;
}
body.lang-en {
  font-family: 'Inter', sans-serif;
  direction: ltr;
  text-align: left;
}

/* ════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY STANDARDIZATION
   ════════════════════════════════════════════════════════════════════════ */
.section-heading {
  font-size: 40px;
  line-height: 1.4;
  margin-bottom: 24px;
}

.text-reveal-p,
.about-body-text {
  font-size: 18px;
  line-height: 2;
  color: var(--muted);
}

.about-badge .small {
  font-size: 14px;
  letter-spacing: 0.08em;
}

.btn-hero-primary {
  font-size: 18px;
}

/* ════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES & PAGE OVERRIDES
   ════════════════════════════════════════════════════════════════════════ */
.container-wide {
  padding-left: 13% !important;
  padding-right: 13% !important;
}
.dir-ltr {
  direction: ltr;
  display: inline-block;
}

/* Margin Utilities */
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-10 { margin-bottom: 10px !important; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-40 { margin-bottom: 40px !important; }
.mb-50 { margin-bottom: 50px !important; }
.mb-60 { margin-bottom: 60px !important; }

/* Layout Utilities */
.bg-surface-light { background: #F5F3EE; }
.section-pad-80 { padding: 80px 0; }
.section-pad-100 { padding: 100px 0; }

/* ════════════════════════════════════════════════════════════════════════
   5. GLASS PILL NAV
   ════════════════════════════════════════════════════════════════════════ */
.page-logo {
  line-height: 0;
  flex-shrink: 0;
}

.page-logo img {
  height: 64px;
  width: auto;
  display: block;
}

/* Base nav styles — layout overridden by section 31 (APEX overrides) */
.glass-pill-nav {
  font-family: 'Figtree', 'Cairo', sans-serif;
}

.glass-pill-nav .pill {
  display: flex;
  align-items: center;
  gap: 20px;
}

.glass-pill-nav .pill-menu {
  display: flex;
  gap: 4px;
  flex: 1;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.glass-pill-nav .pill-menu > li > a {
  color: rgba(255,255,255,0.88);
  font-size: 16px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 20px;
  text-decoration: none;
  white-space: nowrap;
  display: block;
  position: relative;
  transition: color 0.2s, background 0.2s;
}

.glass-pill-nav .pill-menu > li > a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 12px;
  right: 12px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.38s cubic-bezier(0.19, 1, 0.22, 1);
}

[dir="rtl"] .glass-pill-nav .pill-menu > li > a::after {
  transform-origin: right center;
}

.glass-pill-nav .pill-menu > li.active > a::after,
.glass-pill-nav .pill-menu > li > a:hover::after {
  transform: scaleX(1);
}

.glass-pill-nav .pill-menu > li.active > a,
.glass-pill-nav .pill-menu > li > a:hover {
  color: var(--gold);
  background: rgba(200,168,72,0.10);
}

.glass-pill-nav .pill-menu li.dropdown { position: relative; }

.glass-pill-nav .pill-menu li.dropdown > ul {
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,15,30,0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(200,168,72,0.22);
  border-radius: 12px;
  padding: 16px 0 8px;
  min-width: 180px;
  list-style: none;
  margin: 0;
  box-shadow: 0 8px 30px rgba(0,0,0,0.60);
  z-index: 200;
}

.glass-pill-nav .pill-menu li.dropdown:hover > ul {
  opacity: 1;
  visibility: visible;
}

.glass-pill-nav .pill-menu li.dropdown > ul li a {
  color: rgba(255,255,255,0.82);
  font-size: 14px;
  padding: 8px 16px;
  text-decoration: none;
  display: block;
  transition: color 0.2s;
}

.glass-pill-nav .pill-menu li.dropdown > ul li a:hover {
  color: var(--gold);
}

[dir="rtl"] .glass-pill-nav .pill-menu li.dropdown > ul {
  left: auto;
  right: 50%;
  transform: translateX(50%);
}

.glass-pill-nav .pill-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.glass-pill-nav .pill-lang-btn {
  background: rgba(200,168,72,0.15);
  color: var(--gold);
  border: 1px solid rgba(200,168,72,0.35);
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  font-family: inherit;
}

.glass-pill-nav .pill-lang-btn:hover {
  background: rgba(200,168,72,0.30);
}

.glass-pill-nav .pill-hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.glass-pill-nav .pill-hamburger span {
  width: 20px;
  height: 2px;
  background: rgba(255,255,255,0.85);
  display: block;
  border-radius: 2px;
}

.glass-pill-nav .pill-hamburger:hover span {
  background: var(--text);
}


/* ════════════════════════════════════════════════════════════════════════
   5c. PILL MOBILE OVERLAY MENU
   ════════════════════════════════════════════════════════════════════════ */
#pill-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(248,248,248,0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 9998;
  padding: 32px 28px 40px;
  flex-direction: column;
  overflow-y: auto;
}

#pill-mobile-menu.open { display: flex; }

#pill-mobile-menu .pill-mobile-close {
  align-self: flex-end;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-bottom: 28px;
  font-family: inherit;
  transition: color 0.2s;
}

#pill-mobile-menu .pill-mobile-close:hover { color: var(--text); }

#pill-mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

#pill-mobile-menu ul li a {
  display: block;
  color: var(--muted);
  font-size: 18px;
  font-weight: 500;
  padding: 14px 0;
  text-decoration: none;
  border-bottom: 1px solid rgba(232,228,220,0.08);
  transition: color 0.2s;
}

#pill-mobile-menu ul li a:hover,
#pill-mobile-menu ul li.active > a { color: var(--gold); }

#pill-mobile-menu .pill-mobile-lang { margin-top: 28px; }

#pill-mobile-menu .pill-mobile-lang .pill-lang-btn {
  background: rgba(200,168,72,0.12);
  color: var(--gold);
  border: 1px solid rgba(200,168,72,0.35);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}


/* ════════════════════════════════════════════════════════════════════════
   6. HERO SECTION
   ════════════════════════════════════════════════════════════════════════ */
#hero {
  position: relative;
  min-height: 130vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-top: 0;
  padding: 0;
  background: #07111E;
}

#hero::after { display: none !important; }

#hero .container {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  padding: 0 40px;
  overflow: visible;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

#hero .row {
  justify-content: center;
  align-items: center;
  flex: 1;
  width: 100%;
  padding-top: 200px;
  padding-bottom: 60px;
  overflow: visible;
  margin: 0;
}

[dir="rtl"] #hero .row { justify-content: center; }

#hero .col-lg-7,
#hero .hero-content,
#hero .col-lg-7.hero-content {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  padding: 0 40px;
  text-align: center;
  overflow: visible;
  position: relative;
  z-index: 2;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}

#hero .col-lg-7.hero-content::before,
#hero .hero-content::before,
#hero .col-lg-7.hero-content::after,
#hero .hero-content::after,
[dir="rtl"] #hero .col-lg-7.hero-content::before,
[dir="rtl"] #hero .hero-content::before { display: none; }

#hero .col-lg-7.hero-content > *,
#hero .hero-content > * {
  position: relative;
  z-index: 1;
  overflow: visible;
}

/* Hero dark atmospheric background */
#hero .hero-bg {
  display: block;
  position: absolute;
  inset: 0;
  background-image: image-set(
    url('../../images/backgrounds/hero-bg.webp') type("image/webp"),
    url('../../images/backgrounds/hero-bg.jpg') type("image/jpeg")
  );
  background-size: cover;
  background-position: center;
  opacity: 0.62;
  filter: grayscale(15%) brightness(0.62);
  z-index: 0;
}

/* Dark gradient over hero */
#hero::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 20%, rgba(200,168,72,0.06) 0%, transparent 65%),
    radial-gradient(ellipse 100% 100% at 50% 100%, rgba(7,11,18,0.90) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

#hero .hero-lines, #hero .hero-gold-bar { display: none; }

.hero-title {
  font-family: 'Playfair Display', 'Cairo', serif;
  font-size: clamp(44px, 7.5vw, 96px);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.25;
  letter-spacing: -0.04em;
  margin-bottom: 44px;
  overflow: visible;
}

[dir="rtl"] .hero-title {
  letter-spacing: 0;
  padding-bottom: 10px;
  line-height: 1.4;
}

.hero-title .gold { color: var(--gold); }

.hero-subtitle {
  font-size: 18px;
  color: rgba(255,255,255,0.72);
  line-height: 2;
  max-width: 560px;
  margin: 0 auto 40px;
  font-weight: 400;
}

/* Hero CTA buttons */
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--gold);
  color: #070B12;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 18px 48px;
  min-width: 220px;
  border-radius: 40px;
  text-decoration: none;
  transition: background 0.4s, transform 0.4s cubic-bezier(0.19,1,0.22,1), box-shadow 0.4s, color 0.4s;
  margin-left: 12px;
  border: none;
  cursor: pointer;
}

.btn-hero-primary:hover {
  background: var(--gold2);
  color: #070B12;
  transform: translateY(-5px);
  box-shadow: 0 24px 56px rgba(200,168,72,0.40);
}

#hero .hero-content > div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

#hero .btn-hero-primary { margin-left: 0; }

[dir="rtl"] .btn-hero-primary { margin-left: 0; margin-right: 0; }

.btn-hero-secondary,
a.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.40);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.20);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 18px 48px;
  min-width: 220px;
  border-radius: 40px;
  text-decoration: none;
  transition: border-color 0.4s, color 0.4s, background 0.4s, transform 0.4s cubic-bezier(0.19,1,0.22,1);
}

.btn-hero-secondary:hover,
a.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.45);
  color: #070B12;
  border-color: #ffffff;
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(255,255,255,0.15);
}

.btn-hero-secondary span,
a.btn-hero-secondary span { color: inherit; }

/* Scroll hint — raised above the hero marquee */
.hero-scroll-hint {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.hero-scroll-hint span {
  display: block;
  width: 1px;
  height: 80px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  margin: 0 auto;
  animation: scrollHint 2.4s ease-in-out infinite;
}

@keyframes scrollHint {
  0%   { opacity: 1; transform: scaleY(1) translateY(0); }
  50%  { opacity: 0.4; transform: scaleY(0.5) translateY(8px); }
  100% { opacity: 1; transform: scaleY(1) translateY(0); }
}

.hero-glass-box {
  padding: 40px 48px;
  max-width: 680px;
  margin: 0 auto;
}

/* Marquee strip floated at the bottom of the hero */
#hero .marquee-strip {
  width: 100%;
  background: rgba(4,10,20,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(200,168,72,0.22);
  border-bottom: none;
  padding: 14px 0;
  z-index: 5;
  flex-shrink: 0;
}

#hero .marquee-strip .marquee-content {
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.30em;
}


/* ════════════════════════════════════════════════════════════════════════
   7. STATS BAR
   ════════════════════════════════════════════════════════════════════════ */
.stats-bar {
  background: linear-gradient(135deg, #EBEBEB 0%, #F5F5F5 50%, #EBEBEB 100%);
  border-top: 1px solid rgba(200,168,72,0.25);
  border-bottom: 3px solid rgba(200,168,72,0.45);
  box-shadow: 0 8px 30px rgba(0,0,0,0.10);
  padding: 48px 0;
}

.stats-bar .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.stats-bar [class*="col-"] {
  float: none;
  flex: 0 0 auto;
  width: auto;
  padding: 12px 28px;
}

.stats-bar .col-md-auto {
  display: flex;
  align-items: center;
}

.stat-item { text-align: center; }

.stat-number {
  font-family: 'Playfair Display', serif;
  font-size: 54px;
  font-weight: 700;
  color: var(--gold);
  line-height: 0.92;
  letter-spacing: -0.04em;
  display: block;
}

.stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 12px;
  display: block;
  letter-spacing: 0.12em;
}

.stat-divider {
  width: 1px;
  background: rgba(232,228,220,0.10);
  height: 56px;
}


/* ════════════════════════════════════════════════════════════════════════
   8. SERVICES / WHAT WE DO SECTION
   Beltone-style: dark image cards with hover text reveal
   ════════════════════════════════════════════════════════════════════════ */
.services-section {
  background: var(--void);
  position: relative;
}

.services-section::before { display: none !important; }

/* Tab navigation */
.services-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}

.svc-tab-btn {
  background: rgba(232,228,220,0.05);
  border: 1px solid rgba(232,228,220,0.12);
  color: var(--muted);
  border-radius: 20px;
  padding: 8px 20px;
  cursor: pointer;
  transition: var(--trans);
  font-family: 'Cairo', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.svc-tab-btn:hover,
.svc-tab-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #070B12;
}

/* Service cards — Beltone "What We Do" style */
.svc-card {
  background: var(--surface);
  border: 1px solid rgba(200,168,72,0.12);
  border-radius: 2px;
  padding: 0;
  height: 100%;
  min-height: 260px;
  cursor: default;
  transition: border-color 0.45s ease, transform 0.45s cubic-bezier(0.19,1,0.22,1), box-shadow 0.45s ease;
  position: relative;
  margin-bottom: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Gradient background per card — gives each card depth and visual character */
.svc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    rgba(200,168,72,0.04) 0%,
    transparent 60%,
    rgba(200,168,72,0.02) 100%
  );
  z-index: 0;
  transition: opacity 0.45s;
}

/* Bottom gold line accent */
.svc-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transition: transform 0.55s cubic-bezier(0.19,1,0.22,1);
}

.svc-card:hover {
  border-color: rgba(200,168,72,0.40);
  transform: translateY(-8px);
  box-shadow:
    0 4px 16px rgba(0,0,0,0.60),
    0 20px 60px rgba(0,0,0,0.70),
    0 0 40px rgba(200,168,72,0.06);
}

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

/* Icon area */
.svc-card-icon {
  font-size: 40px;
  color: var(--gold);
  padding: 36px 28px 20px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.19,1,0.22,1);
}

.svc-card:hover .svc-card-icon {
  transform: translateY(-4px);
}

/* Card content */
.svc-card-title {
  font-family: 'Playfair Display', 'Cairo', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  padding: 0 28px 14px;
  position: relative;
  z-index: 1;
  line-height: 1.4;
}

/* Text: hidden by default, revealed on hover */
.svc-card .svc-card-text {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  padding: 0 28px;
  margin-bottom: 0;
  transition: max-height 0.5s ease, opacity 0.3s ease, padding-bottom 0.4s ease;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
  position: relative;
  z-index: 1;
}

.svc-card:hover .svc-card-text {
  max-height: 200px;
  opacity: 1;
  padding-bottom: 28px;
  transition: max-height 0.5s ease, opacity 0.4s ease 0.1s, padding-bottom 0.4s ease;
}

/* Arrow indicator */
.svc-card-arrow {
  position: absolute;
  bottom: 24px;
  inset-inline-end: 24px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(200,168,72,0.30);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 14px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s, transform 0.4s cubic-bezier(0.19,1,0.22,1), background 0.3s;
  z-index: 2;
}

.svc-card:hover .svc-card-arrow {
  opacity: 1;
  transform: translateY(0);
}

.svc-card:hover .svc-card-arrow:hover {
  background: var(--gold);
  color: #070B12;
}

/* Feature panel wrapper */
.apex-feature-panel {
  border: 1px solid rgba(200,168,72,0.14);
  border-radius: 4px;
  background: rgba(10,15,30,0.60);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: visible;
}

.apex-feature-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(200,168,72,0.10);
  padding: 20px 28px;
  background: rgba(200,168,72,0.04);
  border-radius: 4px 4px 0 0;
}

.apex-panel-mono {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(160,128,40,0.90);
  font-weight: 600;
}

.apex-feature-deco {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.apex-tri {
  display: inline-block;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid rgba(200,168,72,0.40);
}

.apex-tri-line {
  display: inline-block;
  width: 22px;
  height: 1px;
  background: rgba(200,168,72,0.30);
  margin-inline-start: 3px;
  vertical-align: middle;
}

.apex-feature-inner { padding: 20px; }

#servicesGrid .svc-item { align-self: stretch; }


/* ════════════════════════════════════════════════════════════════════════
   9. ABOUT SECTION
   ════════════════════════════════════════════════════════════════════════ */
.about-section {
  background: var(--deep);
  position: relative;
}

.about-section::before { display: none !important; }

.about-section p { color: var(--muted); }

.about-section h1, .about-section h2,
.about-section h3, .about-section h4,
.about-section h5 { color: var(--text); }

/* Founder section */
section[style*="background:#fff"] {
  background: var(--surface) !important;
}

.about-image-wrap {
  position: relative;
  padding: 20px;
  will-change: transform;
}

.about-image-wrap::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80%; height: 80%;
  border-top: 3px solid var(--gold);
  border-right: 3px solid var(--gold);
}

.about-image-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 80%; height: 80%;
  border-bottom: 3px solid var(--gold);
  border-left: 3px solid var(--gold);
}

[dir="rtl"] .about-image-wrap::before {
  right: auto; left: 0;
  border-right: none;
  border-left: 3px solid var(--gold);
}

[dir="rtl"] .about-image-wrap::after {
  left: auto; right: 0;
  border-left: none;
  border-right: 3px solid var(--gold);
}

.about-image-wrap img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 2px;
}

.about-body-text {
  font-size: 15px;
  color: var(--muted);
  line-height: 2;
}

.about-badge {
  background: var(--gold);
  border: none;
  box-shadow: 0 20px 60px rgba(0,0,0,0.40);
  border-radius: 12px;
  padding: 20px 24px;
}

.about-badge .big,
.about-badge .small,
.about-badge * { color: #070B12; }


/* ════════════════════════════════════════════════════════════════════════
   10. PMV SECTION
   ════════════════════════════════════════════════════════════════════════ */
.pmv-section {
  background: var(--deep);
  padding: 120px 0;
}

.pmv-section::before { display: none !important; }

.pmv-card {
  background: var(--surface);
  border: 1px solid rgba(200,168,72,0.14);
  border-top: 3px solid rgba(200,168,72,0.55);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.40), 0 10px 32px rgba(0,0,0,0.50);
  padding: 52px 40px;
  height: 100%;
  transition: background 0.45s ease, box-shadow 0.45s ease, transform 0.45s cubic-bezier(0.19,1,0.22,1);
  position: relative;
  margin-bottom: 24px;
}

.pmv-card::before, .pmv-card::after { display: none; }

.pmv-card:hover {
  background: var(--surface2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.60), 0 16px 48px rgba(0,0,0,0.70);
  transform: translateY(-10px);
}

.pmv-icon { font-size: 44px; color: var(--gold); margin-bottom: 28px; }
.pmv-icon i { color: var(--gold); }

.pmv-title {
  font-family: 'Playfair Display', 'Cairo', serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
}

.pmv-text { color: var(--muted); font-size: 18px; line-height: 2; }

.pmv-list { list-style: none; padding: 0; margin: 16px 0 0; }

.pmv-list li {
  color: var(--muted);
  font-size: 18px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(232,228,220,0.06);
}

.pmv-list li::before {
  content: '◆ ';
  color: var(--gold);
  font-size: 8px;
  vertical-align: middle;
}


/* ════════════════════════════════════════════════════════════════════════
   11. CORE VALUES
   ════════════════════════════════════════════════════════════════════════ */
.values-section {
  padding: 120px 0;
  background: var(--void);
}

.values-section::before { display: none !important; }

.value-card {
  text-align: center;
  padding: 52px 32px;
  border: 1px solid rgba(200,168,72,0.14);
  border-radius: 4px;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0,0,0,0.40), 0 10px 32px rgba(0,0,0,0.50);
  transition: background 0.45s ease, box-shadow 0.45s ease, transform 0.45s cubic-bezier(0.19,1,0.22,1);
  height: 100%;
  margin-bottom: 24px;
}

.value-card:hover {
  background: var(--surface2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.60), 0 16px 48px rgba(0,0,0,0.70);
  transform: translateY(-10px);
}

.value-icon {
  width: 88px;
  height: 88px;
  background: rgba(200,168,72,0.08);
  border: 1px solid rgba(200,168,72,0.28);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  font-size: 32px;
  color: var(--gold);
  transition: var(--trans);
}

.value-card:hover .value-icon {
  background: var(--gold);
  color: #070B12;
  border-color: var(--gold);
}

.value-title {
  font-family: 'Playfair Display', 'Cairo', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
}

.value-text { font-size: 18px; color: var(--muted); line-height: 1.8; }


/* ════════════════════════════════════════════════════════════════════════
   12. WHY CHOOSE US
   ════════════════════════════════════════════════════════════════════════ */
.why-section {
  background: var(--deep);
  position: relative;
}

.why-section::before { display: none !important; }
.why-section .section-label { color: rgba(200,168,72,0.90); }
.why-section .section-label::before { background: rgba(200,168,72,0.70); }
.why-section .section-heading { color: var(--text); }
.why-section p { color: var(--muted); }
.why-section .btn-hero-primary { background: var(--gold); }

/* Uiverse 3D Flipping Cards Redesign */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 30px;
}

@media (max-width: 991px) {
  .why-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.why-card {
  position: relative;
  width: 100%;
  height: 280px;
  perspective: 1000px;
  cursor: pointer;
}

.back, .front {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  backface-visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Idle/Initial side: .back */
.back {
  background: #ffffff; /* Opaque white so the loop only shows on the border */
  border: 1px solid var(--border);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateY(0deg);
  z-index: 2;
}

.back::before {
  content: '';
  position: absolute;
  width: 150px;
  height: 150%;
  background: linear-gradient(180deg, var(--gold), var(--gold2));
  animation: rotateBorder 4s linear infinite;
  transition: all 0.2s linear;
}

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

.back-content {
  position: absolute;
  background: #ffffff; /* Opaque white to hide loop in the center */
  inset: 4px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  z-index: 3;
}

.back-content svg {
  margin-bottom: 8px;
  transition: transform 0.3s ease;
}

.why-card:hover .back-content svg {
  transform: scale(1.1);
}

.back-content h5 {
  font-family: 'Playfair Display', 'Cairo', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  text-align: center;
}

.hover-tip {
  font-size: 11px;
  color: var(--muted);
  background: var(--surface2);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  margin: 0;
}

/* Active/Hovered side: .front */
.front {
  background: #ffffff; /* Opaque white */
  border: 1px solid var(--border-gold);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: rotateY(180deg);
  z-index: 1;
  padding: 24px;
}

.front-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  backdrop-filter: var(--glass-blur);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.front-content h5 {
  font-family: 'Playfair Display', 'Cairo', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  text-align: center;
}

.front-content p {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
  text-align: center;
}

/* 3D Flip Transitions on Hover */
.why-card:hover .back {
  transform: rotateY(-180deg);
}

.why-card:hover .front {
  transform: rotateY(0deg);
  z-index: 2;
}

/* Floating Brand Circles on Active Side */
.circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.45;
  z-index: 1;
}

.circle-1 {
  width: 110px;
  height: 110px;
  background: var(--gold);
  left: -20px;
  top: -20px;
  animation: floatCircle1 5s ease-in-out infinite alternate;
}

.circle-2 {
  width: 110px;
  height: 110px;
  background: var(--gold2);
  right: -20px;
  bottom: -20px;
  animation: floatCircle2 5s ease-in-out infinite alternate;
}

@keyframes floatCircle1 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(25px, 20px) scale(1.15);
  }
}

@keyframes floatCircle2 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(-25px, -20px) scale(1.15);
  }
}



/* ════════════════════════════════════════════════════════════════════════
   13. NEWS SECTION
   ════════════════════════════════════════════════════════════════════════ */
.news-section {
  background: var(--void);
  position: relative;
}

.news-section::before { display: none !important; }

.news-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  transition: background 0.45s cubic-bezier(0.19,1,0.22,1),
              transform 0.45s cubic-bezier(0.19,1,0.22,1),
              border-color 0.45s cubic-bezier(0.19,1,0.22,1);
  position: relative;
}

[dir="rtl"] .news-card {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 4px solid var(--gold);
}

.news-card::before, .news-card::after { display: none; }

.news-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-left-color: var(--gold);
  box-shadow: none !important;
  transform: translateY(-8px);
}

[dir="rtl"] .news-card:hover {
  border-right-color: var(--gold);
}

.news-card-img {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 260px;
  flex-shrink: 0;
}

.news-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.7s ease;
  filter: brightness(0.75) saturate(0.85);
}

.news-card:hover .news-card-img img {
  transform: scale(1.06);
  filter: brightness(0.90) saturate(1);
}

.news-card-img a { display: block; height: 100%; }

.news-card-body { padding: 32px; }

.news-date {
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}

.news-card-title {
  font-family: 'Playfair Display', 'Cairo', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 14px;
}

.news-card-text { font-size: 15px; color: var(--muted); line-height: 1.9; }

.newspaper-badge {
  display: inline-block;
  background: rgba(200, 168, 72, 0.15);
  color: var(--gold);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid rgba(200, 168, 72, 0.25);
}

.punch-line {
  font-size: 14.5px !important;
  color: var(--text) !important;
  opacity: 0.9;
  line-height: 1.8;
  padding-left: 14px;
  border-left: 3px solid rgba(200, 168, 72, 0.5);
  font-style: italic;
  margin: 16px 0 !important;
}
[dir="rtl"] .punch-line {
  padding-left: 0;
  padding-right: 14px;
  border-left: none;
  border-right: 3px solid rgba(200, 168, 72, 0.5);
}

.news-read-more {
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  transition: gap 0.3s, color 0.3s;
}

.news-read-more:hover { color: var(--gold2); gap: 10px; }

/* News Carousel */
.news-slider .item { padding: 4px 15px 16px; }

.news-slider .news-card { flex-direction: row; height: 440px !important; }

.news-slider .news-card-img {
  width: 29%;
  height: calc(100% - 24px);
  margin: 12px;
  border-radius: 8px;
  flex-shrink: 0;
}

.news-slider .news-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 52px;
}

.news-slider .owl-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.news-slider .owl-nav button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(200,168,72,0.50) !important;
  background: rgba(255,255,255,0.90) !important;
  color: var(--gold) !important;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
  line-height: 1;
}

.news-slider .owl-nav button:hover {
  background: var(--gold) !important;
  color: #070B12 !important;
  border-color: var(--gold) !important;
}

.news-slider .owl-nav button.disabled { opacity: 0.35; pointer-events: none; }

.news-slider .owl-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.news-slider .owl-dot span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(200,168,72,0.25);
  display: block;
  transition: background 0.3s, width 0.3s, border-radius 0.3s;
}

.news-slider .owl-dot.active span {
  background: var(--gold);
  width: 24px;
  border-radius: 4px;
}

@media (max-width: 767px) {
  .news-slider .news-card { flex-direction: column; min-height: 0; }
  .news-slider .news-card-img { width: 100%; height: 200px; }
  .news-slider .news-card-body { padding: 28px 24px; }
}


/* ════════════════════════════════════════════════════════════════════════
   14. CAREER SECTION
   ════════════════════════════════════════════════════════════════════════ */
.career-card {
  background: var(--surface);
  border: 1px solid rgba(200,168,72,0.14);
  border-top: 3px solid rgba(200,168,72,0.50);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.40), 0 10px 32px rgba(0,0,0,0.50);
  padding: 48px 40px;
  margin-bottom: 24px;
  transition: background 0.45s ease, box-shadow 0.45s ease, transform 0.45s cubic-bezier(0.19,1,0.22,1);
  position: relative;
}

.career-card::before, .career-card::after { display: none; }

.career-card:hover {
  background: var(--surface2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.60), 0 16px 48px rgba(0,0,0,0.70);
  transform: translateY(-10px);
}

.career-title {
  font-family: 'Playfair Display', 'Cairo', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 20px;
}

.career-desc { font-size: 14px; color: var(--muted); line-height: 1.9; margin-bottom: 16px; }

.career-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }

.career-requirements, .career-req-list { margin: 16px 0; }

.career-req-list { list-style: none; padding: 0; }

.career-req-list li {
  font-size: 14px;
  color: var(--muted);
  padding: 4px 0;
}

.career-req-list li::before {
  content: '◆ ';
  color: var(--gold);
  font-size: 8px;
  vertical-align: middle;
}

.career-apply,
.career-apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(200,168,72,0.10);
  border: 1px solid rgba(200,168,72,0.40);
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 10px 24px;
  border-radius: 20px;
  text-decoration: none;
  transition: var(--trans);
  margin-top: 20px;
  cursor: pointer;
}

.career-apply:hover,
.career-apply-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #070B12;
}


/* ════════════════════════════════════════════════════════════════════════
   15. GALLERY SECTION
   ════════════════════════════════════════════════════════════════════════ */
.gallery-section {
  padding: 80px 0;
  background: var(--deep);
}

.gallery-section::before { display: none !important; }

.gallery-grid { margin-top: 40px; }

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 24px;
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
  filter: brightness(0.80) saturate(0.80);
}

.gallery-item:hover img {
  transform: scale(1.07);
  filter: brightness(0.90) saturate(1);
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7,11,18,0.70);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--trans);
}

.gallery-item:hover .gallery-overlay { opacity: 1; }

.gallery-overlay i { font-size: 28px; color: var(--gold); }


/* ════════════════════════════════════════════════════════════════════════
   16. BOOKS SECTION
   ════════════════════════════════════════════════════════════════════════ */
.book-card {
  background: var(--surface);
  border: 1px solid rgba(200,168,72,0.14);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.40), 0 10px 32px rgba(0,0,0,0.50);
  overflow: hidden;
  transition: background 0.45s ease, box-shadow 0.45s ease, transform 0.45s cubic-bezier(0.19,1,0.22,1);
  height: 100%;
  margin-bottom: 24px;
}

.book-card:hover {
  background: var(--surface2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.60), 0 16px 48px rgba(0,0,0,0.70);
  transform: translateY(-10px);
}

.book-cover, .book-cover-wrap { height: 360px; overflow: hidden; position: relative; }

.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  filter: brightness(0.85) saturate(0.90);
}

.book-card:hover .book-cover img {
  transform: scale(1.04);
  filter: brightness(0.95) saturate(1);
}

.book-cover-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%);
  pointer-events: none;
}

.book-title {
  font-family: 'Playfair Display', 'Cairo', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
}

.book-desc { font-size: 13.5px; color: var(--muted); line-height: 1.9; margin-bottom: 10px; }

.book-info { font-size: 12px; color: var(--dim); margin-bottom: 6px; }

.book-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
  display: block;
}


/* ════════════════════════════════════════════════════════════════════════
   17. CHANNELS / ACCORDION
   ════════════════════════════════════════════════════════════════════════ */
.channels-accordion {
  padding: 80px 0;
  background: var(--void);
}

.channels-accordion::before { display: none !important; }

.channel-item {
  border: 1px solid rgba(200,168,72,0.14);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: var(--trans);
}

.channel-item.open { border-color: rgba(200,168,72,0.40); }

.channel-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  cursor: pointer;
  background: rgba(232,228,220,0.02);
  transition: background 0.3s ease;
}

.channel-trigger:hover,
.channel-item.open .channel-trigger { background: rgba(200,168,72,0.07); }

.channel-title, .channel-trigger-title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(26,26,26,0.85);
}

.channel-trigger-title i.question-icon { color: var(--gold); font-size: 16px; }

.channel-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.12em;
  margin-left: 8px;
}

.channel-chevron { color: var(--gold); font-size: 14px; transition: transform 0.3s ease; }

.channel-item.open .channel-trigger .toggle-icon,
.channel-item.open .channel-chevron { transform: rotate(180deg); }

.channel-body {
  display: none;
  padding: 0 24px 24px;
  background: rgba(232,228,220,0.01);
}

.channel-item.open .channel-body { display: block; }

.channel-video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  margin-top: 16px;
}

.channel-video-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.yt-poster { position: relative; cursor: pointer; overflow: hidden; border-radius: 8px; }

.yt-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
  transition: background 0.3s;
}

.yt-poster:hover .yt-play-btn { background: rgba(0,0,0,0.50); }
.yt-play-btn i { font-size: 24px; color: #fff; }

.video-offline-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
  border-radius: 8px;
  background: rgba(232,228,220,0.03);
  border: 1px solid rgba(200,168,72,0.15);
  gap: 12px;
}

.video-offline-card i { font-size: 2.4rem; color: var(--gold); opacity: 0.7; }
.video-offline-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.video-offline-card small { font-size: 11px; color: var(--dim); margin-top: 4px; }


/* ════════════════════════════════════════════════════════════════════════
   18. CONTACT SECTION
   ════════════════════════════════════════════════════════════════════════ */
.contact-section {
  background: var(--deep);
  position: relative;
  overflow: hidden;
}

.contact-section::before { display: none !important; }
.contact-section .section-heading { color: var(--text); }

.contact-info-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 24px;
  background: var(--surface);
  border: 1px solid rgba(200,168,72,0.14);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.30), 0 8px 24px rgba(0,0,0,0.40);
  padding: 20px 24px;
}

.contact-info-item * { color: var(--text); }

.contact-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: rgba(200,168,72,0.08);
  border: 1px solid rgba(200,168,72,0.28);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 18px;
}

.contact-icon i { color: var(--gold); }

.contact-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

.contact-value { color: var(--muted); font-size: 14px; line-height: 1.8; direction: ltr; text-align: left; }

#contactForm,
#contact-form-premium {
  background: var(--surface);
  border: 1px solid rgba(200,168,72,0.14);
  border-radius: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.30), 0 10px 32px rgba(0,0,0,0.40);
  padding: 52px;
  position: relative;
}

.contact-form-field {
  width: 100%;
  background: var(--surface2);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 30px;
  padding: 14px 18px;
  color: var(--text);
  font-size: 14px;
  font-family: 'Cairo', 'Inter', sans-serif;
  margin-bottom: 16px;
  transition: border-color 0.3s, background 0.3s;
  outline: none;
  resize: vertical;
}

.contact-form-field:focus {
  border-color: var(--gold);
  background: var(--surface);
}

.contact-form-field::placeholder { color: var(--dim); }

.btn-submit, .btn-contact-submit {
  background: var(--gold);
  color: #070B12;
  border: none;
  padding: 14px 40px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
  font-family: 'Cairo', 'Inter', sans-serif;
  width: 100%;
}

.btn-submit:hover, .btn-contact-submit:hover {
  background: var(--gold2);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(200,168,72,0.35);
}

#formFeedback { color: var(--gold2); margin-top: 8px; }


/* ════════════════════════════════════════════════════════════════════════
   19. CLIENTS / SPONSORS
   ════════════════════════════════════════════════════════════════════════ */
.clients-section {
  background: var(--deep);
  position: relative;
}

.clients-section::before { display: none !important; }
.clients-section .section-heading { color: var(--text); }

.clients-slider { overflow: hidden; }

.sponsors-box-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 32px;
  background: var(--surface);
  border: 1px solid rgba(200,168,72,0.10);
  border-radius: 4px;
  transition: background 0.45s ease, box-shadow 0.45s ease, transform 0.45s cubic-bezier(0.19,1,0.22,1);
  margin: 8px;
}

.sponsors-box-item:hover {
  background: var(--surface2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.60), 0 16px 40px rgba(0,0,0,0.70);
  transform: translateY(-6px);
}

.sponsors-box-item img {
  max-height: 72px;
  width: auto;
  object-fit: contain;
  filter: grayscale(40%) brightness(1.2);
  opacity: 0.70;
  transition: filter 0.45s ease, opacity 0.45s ease;
}

.sponsors-box-item:hover img {
  filter: grayscale(0%) brightness(1.1);
  opacity: 1;
}


/* ════════════════════════════════════════════════════════════════════════
   20. FOOTER
   ════════════════════════════════════════════════════════════════════════ */
.site-footer {
  background: #E0E0E0;
  border-top: 1px solid rgba(200,168,72,0.20);
  padding: 100px 0 40px;
}

.footer-logo img { height: 80px; margin-bottom: 16px; }

.footer-desc { font-size: 13px; color: var(--muted); line-height: 1.9; margin-bottom: 20px; }

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(232,228,220,0.05);
  border: 1px solid rgba(232,228,220,0.10);
  border-radius: 50%;
  color: var(--muted);
  font-size: 14px;
  margin-left: 8px;
  transition: var(--trans);
}

.footer-social a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #070B12;
}

.footer-heading {
  font-family: 'Playfair Display', 'Cairo', serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(232,228,220,0.08);
}

.footer-links { list-style: none; padding: 0; margin: 0; }

.footer-links li { margin-bottom: 10px; }

.footer-links a {
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  transition: var(--trans);
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-links a::before {
  content: '→';
  color: var(--gold);
  font-size: 12px;
}

[dir="rtl"] .footer-links a::before { content: '←'; }

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

.footer-contact-line {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.footer-contact-line .icon,
.footer-contact-line .icon i { color: var(--gold); font-size: 14px; margin-top: 3px; }

.footer-contact-line .text { color: var(--muted); font-size: 12.5px; line-height: 1.8; }

.footer-bottom {
  border-top: 1px solid rgba(232,228,220,0.05);
  padding-top: 24px;
  margin-top: 40px;
}

.footer-copy { color: var(--dim); font-size: 11.5px; text-align: center; }

.site-footer,
.site-footer p,
.site-footer span,
.site-footer div,
.site-footer li,
.site-footer a { color: var(--muted); }

.site-footer a:hover { color: var(--gold); }
.site-footer .gold, .footer-copy span { color: var(--gold); }


/* ════════════════════════════════════════════════════════════════════════
   21. SCROLL-UP BUTTON
   ════════════════════════════════════════════════════════════════════════ */
#scroll-up-custom {
  position: fixed;
  bottom: 30px;
  left: 30px;
  width: 46px;
  height: 46px;
  background: rgba(200,168,72,0.12);
  border: 1px solid rgba(200,168,72,0.35);
  color: var(--gold);
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  z-index: 9999;
  opacity: 0;
  transform: translateY(20px);
  transition: var(--trans);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(16px);
}

#scroll-up-custom.show { opacity: 1; transform: translateY(0); }

#scroll-up-custom:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #070B12;
  transform: translateY(-3px);
}


/* ════════════════════════════════════════════════════════════════════════
   22. INNER PAGE HERO BANNER
   ════════════════════════════════════════════════════════════════════════ */
.inner-page-hero {
  position: relative;
  z-index: 10;
  background: url('../../images/index/main-slider/bg-slide-3.jpg') center/cover no-repeat;
  min-height: 240px;
}

.inner-page-hero .section-heading { color: #fff; }
.inner-page-hero p { color: rgba(255,255,255,0.78); }

.inner-page-hero-content {
  position: relative;
  z-index: 1;
  padding-top: 140px;
  padding-bottom: 80px;
  text-align: center;
  pointer-events: none;
}

.inner-page-hero { position: relative; isolation: isolate; }

.inner-page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7,11,18,0.65) 0%,
    rgba(7,11,18,0.80) 60%,
    rgba(7,11,18,0.95) 85%,
    rgba(7,11,18,1) 100%
  );
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
  z-index: 1;
}

.inner-page-hero > .page-logo { z-index: 110; }

.inner-page-hero > .inner-page-hero-content,
.inner-page-hero > .container {
  position: relative;
  z-index: 2;
}


/* ════════════════════════════════════════════════════════════════════════
   23. SHARED UTILITIES
   ════════════════════════════════════════════════════════════════════════ */
.section-pad   { padding: 140px 0; }
.section-pad-sm { padding: 90px 0; }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--gold);
}

.section-label::after { content: none; }

.section-label span { color: var(--gold); }

.section-heading {
  font-family: 'Playfair Display', 'Cairo', serif;
  font-size: clamp(29px, 4.25vw, 58px);
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  padding-bottom: 4px;
}

[dir="rtl"] .section-heading {
  letter-spacing: 0;
  line-height: 1.45;
  padding-bottom: 12px;
}

.section-heading .gold { color: var(--gold); }
.section-heading.white { color: var(--text); }

.gold-rule {
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold2) 50%, var(--gold) 100%);
  margin: 32px 0;
  border-radius: 0;
}

.gold-rule.center { margin-left: auto; margin-right: auto; }

/* Marquee ticker strip */
.marquee-strip {
  overflow: hidden;
  border-top: 1px solid rgba(200,168,72,0.18);
  border-bottom: 1px solid rgba(200,168,72,0.18);
  padding: 22px 0;
  background: rgba(200,168,72,0.03);
}

.marquee-track {
  display: flex;
  white-space: nowrap;
  animation: marquee-scroll 30s linear infinite;
  will-change: transform;
}

[dir="rtl"] .marquee-track { animation-direction: reverse; }

.marquee-content {
  flex-shrink: 0;
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  padding-right: 0;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

.logos-marquee-track { align-items: center; }
.logos-marquee-set { display: inline-flex; align-items: center; flex-shrink: 0; }
.client-marquee-logo {
  height: 46px;
  max-width: 110px;
  width: auto;
  object-fit: contain;
  filter: grayscale(20%);
  opacity: 0.8;
  margin: 0 28px;
  vertical-align: middle;
  transition: filter 0.3s, opacity 0.3s;
}
.client-marquee-logo:hover { filter: none; opacity: 1; }

.gold, span.gold { color: var(--gold); }

/* Remove section top-fade for dark theme */
body section:not(#hero):not(.inner-page-hero):not(.page-hero) {
  position: relative;
  overflow: clip;
  
  /* Glassmorphism Box effect */
  background: rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(6px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.2) !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  margin: 0;
  width: 100%;
}

body section:not(#hero):not(.inner-page-hero):not(.page-hero)::before {
  display: none !important;
}

body section:not(#hero):not(.inner-page-hero):not(.page-hero) > .container,
body section:not(#hero):not(.inner-page-hero):not(.page-hero) > .container-fluid {
  position: relative;
  z-index: 2;
}

#about .container { position: relative; z-index: 2; }

/* Fade-up animation */
@media (prefers-reduced-motion: no-preference) {
  .fade-up {
    opacity: 0;
    transform: translateY(64px);
    transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1),
                transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .fade-up.visible {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ════════════════════════════════════════════════════════════════════════
   25. LTR / ENGLISH OVERRIDES
   ════════════════════════════════════════════════════════════════════════ */
html[dir="ltr"] body { text-align: left; direction: ltr; }
html[dir="ltr"] .why-item { text-align: left; }
html[dir="ltr"] .why-body { text-align: left; }
html[dir="ltr"] .stats-bar .stat-item { text-align: center; }
html[dir="ltr"] .news-card-body { text-align: left; }
html[dir="ltr"] .footer-links a::before { content: '→'; }
html[dir="ltr"] .glass-pill-nav .pill-menu li.dropdown > ul {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
html[dir="ltr"] #hero .row { justify-content: flex-start; }


/* ════════════════════════════════════════════════════════════════════════
   26. RESPONSIVE / MOBILE
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .glass-pill-nav .pill-menu { display: none; }
  .glass-pill-nav .pill-hamburger { display: flex; }
  .glass-pill-nav .pill { padding: 0 20px; }
}

@media (max-width: 768px) {
  .section-pad { padding: 60px 0; }

  #hero .col-lg-7,
  #hero .hero-content,
  #hero .col-lg-7.hero-content {
    flex: 0 0 90%;
    max-width: 90%;
    width: 90%;
    padding: 40px 28px;
  }

  .hero-title { font-size: clamp(26px, 6vw, 44px); }
  .hero-subtitle { font-size: 16px; }
  .stat-number { font-size: 32px; }
  .stats-bar { padding: 28px 0; }
  .stats-bar [class*="col-"] { padding: 8px 16px; }

  .svc-card, .career-card, .pmv-card,
  .value-card, .book-card, .why-item { margin-bottom: 20px; }

  #scroll-up-custom { left: 16px; bottom: 16px; }
  .channel-trigger-title { font-size: 13px; }

  .btn-hero-primary, .btn-hero-secondary { padding: 12px 24px; font-size: 10px; min-width: 160px; }

  .why-item { flex-direction: column; gap: 12px; }
  .why-num { font-size: 48px; min-width: 48px; }
  .news-card-img { height: 180px; }
  .inner-page-hero-content { padding-top: 80px; padding-bottom: 40px; }
}

@media (max-width: 480px) {
  #hero .col-lg-7,
  #hero .hero-content,
  #hero .col-lg-7.hero-content {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding: 32px 20px;
  }

  .news-card-img { height: 160px; }
  .book-cover, .book-cover-wrap { height: 220px; }
}


/* ════════════════════════════════════════════════════════════════════════
   27. PREMIUM LUSION INTERACTIONS
   ════════════════════════════════════════════════════════════════════════ */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold2), var(--gold));
  z-index: 99999;
  pointer-events: none;
  transition: width 0.1s linear;
}

#cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  mix-blend-mode: difference;
  will-change: transform;
  transition: width 0.3s cubic-bezier(0.19, 1, 0.22, 1),
              height 0.3s cubic-bezier(0.19, 1, 0.22, 1),
              opacity 0.3s;
}

#cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(200,168,72,0.55);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999998;
  will-change: transform;
  transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1),
              height 0.4s cubic-bezier(0.19, 1, 0.22, 1),
              opacity 0.3s;
}

body.cursor-hover #cursor-ring { width: 54px; height: 54px; }

/* Hero word-by-word reveal */
.hero-title .word {
  display: inline-block;
  overflow: visible;
  vertical-align: bottom;
  padding-bottom: 0.1em;
}

.hero-title .word-inner {
  display: inline-block;
  transform: translateY(120%) rotate(6deg);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.7s ease;
}

.hero-title.words-revealed .word-inner {
  transform: translateY(0) rotate(0deg);
  opacity: 1;
}

.about-image-wrap img, .news-card-img img {
  transition: filter 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

@media (prefers-reduced-motion: reduce) {
  .hero-title .word-inner { transition: none; opacity: 1; transform: none; }
  #cursor, #cursor-ring { display: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   APEX VISUAL LAYER
   ════════════════════════════════════════════════════════════════════════ */

/* Hero dot-grid overlay */
.apex-hero-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(200,168,72,0.18) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%);
}

/* Hero data panel */
.apex-hero-panel {
  position: absolute;
  bottom: 80px;
  inset-inline-start: 60px;
  width: 220px;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 4px 24px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.60) inset;
  z-index: 3;
}

.apex-hero-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 14px 18px;
  background: rgba(0,0,0,0.03);
}

.apex-hero-panel-body { padding: 20px 18px; }

.apex-hero-panel-big {
  font-size: 34px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 8px;
}

.apex-hero-panel-sub { font-size: 11px; color: rgba(26,26,26,0.55); letter-spacing: 0.06em; }

/* Hero stats strip */
.apex-hero-strip {
  position: absolute;
  bottom: 80px;
  inset-inline-end: 60px;
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 4px 24px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.60) inset;
  z-index: 3;
}

.apex-hero-strip-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 26px;
  gap: 5px;
}

.apex-strip-num {
  font-size: 24px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  font-family: 'Playfair Display', serif;
}

.apex-strip-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(26,26,26,0.58);
  font-weight: 600;
}

.apex-strip-sep { width: 1px; background: rgba(0,0,0,0.10); flex-shrink: 0; }

/* Hero side label */
.apex-side-label {
  position: absolute;
  bottom: 180px;
  inset-inline-start: 28px;
  writing-mode: vertical-rl;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(232,228,220,0.18);
  pointer-events: none;
  z-index: 3;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .apex-hero-panel, .apex-hero-strip, .apex-side-label { display: none; }
}

/* Hero → Stats diagonal cut */
.apex-cut-hero-stats {
  display: block;
  height: 80px;
  margin: 0; padding: 0;
  line-height: 0; font-size: 0;
  background: var(--deep);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* About year box panel */
.apex-year-box {
  border: 1px solid rgba(200,168,72,0.18);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 32px;
  background: var(--surface);
}

.apex-year-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(200,168,72,0.10);
  padding: 16px 24px;
}

.apex-year-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(200,168,72,0.55);
  flex-shrink: 0;
}

.apex-year-box-body { padding: 24px; }

.apex-year-big {
  font-size: 72px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 20px;
}

.apex-timeline {
  position: relative;
  width: 100%;
  height: 8px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(200,168,72,0.50) 0,
    rgba(200,168,72,0.50) 6px,
    transparent 6px,
    transparent 16px
  );
  border-radius: 4px;
}

.apex-timeline::after {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(200,168,72,0.60);
}

/* Contact info boxes */
.apex-contact-grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.apex-contact-box {
  flex: 1 1 160px;
  border: 1px solid rgba(200,168,72,0.18);
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  background: var(--surface);
  transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.19,1,0.22,1);
  cursor: default;
}

.apex-contact-box:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
}

.apex-contact-icon { font-size: 22px; color: var(--gold); margin-bottom: 14px; }

.apex-contact-text { font-size: 13px; color: var(--muted); line-height: 1.7; }


/* ════════════════════════════════════════════════════════════════════════
   28. BELTONE-STYLE SECTION DIVIDER — Cinematic dark separator
   ════════════════════════════════════════════════════════════════════════ */
.section-divider {
  position: relative;
  height: 220px;
  background: var(--surface2);
  overflow: hidden;
  pointer-events: none;
  /* Parallax scroll effect via CSS */
  will-change: transform;
}

/* Horizontal gold line — the central Beltone divider element */
.section-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200,168,72,0.12) 10%,
    rgba(200,168,72,0.55) 30%,
    var(--gold) 50%,
    rgba(200,168,72,0.55) 70%,
    rgba(200,168,72,0.12) 90%,
    transparent 100%
  );
  transform: translateY(-50%);
  z-index: 1;
}

/* Dot-grid pattern overlay */
.section-divider::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(200,168,72,0.22) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 0%, transparent 100%);
  z-index: 0;
}

/* Angular dark wedge inside divider */
.section-divider-fade-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  will-change: transform;
  background: linear-gradient(
    135deg,
    rgba(19,24,40,0.97) 0%,
    rgba(10,15,30,0.65) 55%,
    rgba(19,24,40,0.97) 100%
  );
  clip-path: polygon(0 0, 58% 0, 100% 100%, 0 100%);
  z-index: 0;
  pointer-events: none;
}

/* Top & bottom fade to blend into adjacent dark sections */
.section-divider-fade-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  /* Double gradient: fade in from top section color, fade out to bottom section color */
  background: linear-gradient(
    180deg,
    var(--deep) 0%,
    transparent 25%,
    transparent 75%,
    var(--void) 100%
  );
}

/* Scroll-triggered parallax via JS class */
.section-divider.in-view .section-divider::before {
  animation: dividerLineReveal 1.2s cubic-bezier(0.19,1,0.22,1) forwards;
}

@keyframes dividerLineReveal {
  from { opacity: 0; transform: translateY(-50%) scaleX(0); }
  to   { opacity: 1; transform: translateY(-50%) scaleX(1); }
}

/* Founder section override (was white) */
section.section-pad:not(.about-section):not(.services-section):not(.clients-section):not(.news-section):not(.why-section):not(.pmv-section):not(.values-section) {
  background: var(--surface);
}

/* ════════════════════════════════════════════════════════════════════════
   30. BELTONE-STYLE WHAT WE DO — Cinematic service grid with image overlays
   ════════════════════════════════════════════════════════════════════════ */

/* Each service card gets a unique accent via nth-child */
#servicesGrid .svc-item:nth-child(4n+1) .svc-card { border-top: 2px solid rgba(200,168,72,0.40); }
#servicesGrid .svc-item:nth-child(4n+2) .svc-card { border-top: 2px solid rgba(200,168,72,0.25); }
#servicesGrid .svc-item:nth-child(4n+3) .svc-card { border-top: 2px solid rgba(200,168,72,0.55); }
#servicesGrid .svc-item:nth-child(4n+4) .svc-card { border-top: 2px solid rgba(200,168,72,0.18); }

/* On hover, ALL show full gold */
.svc-card:hover { border-top-color: var(--gold) !important; }

/* The arrow direction flips for RTL */
[dir="rtl"] .svc-card-arrow i { transform: rotate(180deg); }


/* ════════════════════════════════════════════════════════════════════════
   29. INLINE STYLE OVERRIDES  (catch hardcoded styles)
   ════════════════════════════════════════════════════════════════════════ */

/* Override inline background:#fff on founder section */
body section[style*="background:#fff"],
body section[style*="background: #fff"],
body section[style*="background:white"],
body section[style*="background: white"] {
  background: var(--surface) !important;
}

/* All inline color:var(--muted) to light muted */
[style*="color:var(--muted)"],
[style*="color: var(--muted)"] {
  color: var(--muted) !important;
}

/* Section heading on light backgrounds forced dark — override */
.about-section .section-heading,
.services-section .section-heading,
.clients-section .section-heading,
.news-section .section-heading,
.why-section .section-heading {
  color: var(--text);
}

.parallax-divider-heading { color: #FFFFFF; }
.parallax-divider-label   { color: var(--gold); }


/* ══════════════════════════════════════════════════
   HORIZONTAL SCROLL SERVICES — .hscroll-services
   ══════════════════════════════════════════════════ */

/* Card gradient palette — clean neutral grey tones */
:root {
  --card-grad-1:  linear-gradient(145deg, #EDECEA 0%, #E4E2DF 100%);
  --card-grad-2:  linear-gradient(145deg, #E8E8E8 0%, #DEDEDE 100%);
  --card-grad-3:  linear-gradient(145deg, #ECEAE6 0%, #E2E0DB 100%);
  --card-grad-4:  linear-gradient(145deg, #EBEBEB 0%, #E0E0E0 100%);
  --card-grad-5:  linear-gradient(145deg, #EEF0EE 0%, #E3E5E3 100%);
  --card-grad-6:  linear-gradient(145deg, #EDECEA 0%, #E4E2DF 100%);
  --card-grad-7:  linear-gradient(145deg, #E8E8E8 0%, #DEDEDE 100%);
  --card-grad-8:  linear-gradient(145deg, #ECEAE6 0%, #E2E0DB 100%);
  --card-grad-9:  linear-gradient(145deg, #EBEBEB 0%, #E0E0E0 100%);
  --card-grad-10: linear-gradient(145deg, #EEF0EE 0%, #E3E5E3 100%);
  --card-grad-11: linear-gradient(145deg, #EDECEA 0%, #E4E2DF 100%);
  --card-grad-12: linear-gradient(145deg, #E8E8E8 0%, #DEDEDE 100%);
}

/* Horizontal scroll container */
.hscroll-services {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  padding: 8px 4px 24px;
  direction: rtl;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
  -webkit-overflow-scrolling: touch;
}

.hscroll-services::-webkit-scrollbar {
  height: 5px;
}
.hscroll-services::-webkit-scrollbar-track {
  background: transparent;
}
.hscroll-services::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 3px;
}

/* Individual card */
.svc-hcard {
  flex: 0 0 280px;
  height: 360px;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  cursor: default;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.svc-hcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}

/* Per-card gradient backgrounds via nth-child */
.svc-hcard:nth-child(1)  .svc-hcard-bg { background: var(--card-grad-1); }
.svc-hcard:nth-child(2)  .svc-hcard-bg { background: var(--card-grad-2); }
.svc-hcard:nth-child(3)  .svc-hcard-bg { background: var(--card-grad-3); }
.svc-hcard:nth-child(4)  .svc-hcard-bg { background: var(--card-grad-4); }
.svc-hcard:nth-child(5)  .svc-hcard-bg { background: var(--card-grad-5); }
.svc-hcard:nth-child(6)  .svc-hcard-bg { background: var(--card-grad-6); }
.svc-hcard:nth-child(7)  .svc-hcard-bg { background: var(--card-grad-7); }
.svc-hcard:nth-child(8)  .svc-hcard-bg { background: var(--card-grad-8); }
.svc-hcard:nth-child(9)  .svc-hcard-bg { background: var(--card-grad-9); }
.svc-hcard:nth-child(10) .svc-hcard-bg { background: var(--card-grad-10); }
.svc-hcard:nth-child(11) .svc-hcard-bg { background: var(--card-grad-11); }
.svc-hcard:nth-child(12) .svc-hcard-bg { background: var(--card-grad-12); }

.svc-hcard-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Inner content layer */
.svc-hcard-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 20px 20px;
  gap: 6px;
}

/* Category badge */
.svc-hcard-cat {
  font-size: 10px;
  font-variant: small-caps;
  letter-spacing: 0.15em;
  color: rgba(160,128,48,0.85);
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.2;
}

/* Justice icon */
.svc-hcard-icon {
  font-size: 36px;
  color: var(--gold);
  margin: 12px 0 8px;
}

/* Service title — always visible */
.svc-hcard-title {
  font-size: 15px;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1.4;
}

/* Description — hidden at rest, appears on hover */
.svc-hcard-text {
  font-size: 13px;
  color: #555555;
  line-height: 1.6;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.svc-hcard:hover .svc-hcard-text {
  opacity: 1;
  transform: translateY(0);
}

/* Gold bottom bar — expands on hover */
.svc-hcard-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.19,1,0.22,1);
}

.svc-hcard:hover .svc-hcard-bar {
  transform: scaleX(1);
  transform-origin: left;
}

/* Mobile: narrower cards */
@media (max-width: 576px) {
  .svc-hcard {
    flex: 0 0 240px;
    height: 320px;
  }
}

/* ══════════════════════════════════════════════════
   DEPARTMENT CARDS — .svc-dept-*
   ══════════════════════════════════════════════════ */

.svc-dept-intro {
  max-width: 680px;
  margin: 0 auto 40px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.75;
}

.svc-exec-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 auto 48px;
}
.svc-exec-badge::before,
.svc-exec-badge::after {
  content: '';
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: var(--border-gold);
}
.svc-exec-badge-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

/* ══ WHAT WE DO — Flip Cards with Uiverse outer shell ══ */
.svc-dept-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 768px) {
  .svc-dept-grid { grid-template-columns: 1fr; }
}

/* ── Outer glowing border shell — perspective lives HERE ── */
.svc-dept-outer {
  border-radius: 12px;
  padding: 2px;
  background: radial-gradient(circle 260px at 0% 0%, rgba(184,146,46,0.85), rgba(184,146,46,0.08));
  position: relative;
  height: 360px;
  perspective: 1200px;        /* ← perspective on the PARENT of the flipping element */
  /* NO overflow: hidden — that breaks backface-visibility */
}

/* ── Animated orbiting gold dot ── */
.svc-dept-dot {
  width: 6px;
  aspect-ratio: 1;
  position: absolute;
  background-color: var(--gold);
  box-shadow: 0 0 10px var(--gold), 0 0 22px rgba(184,146,46,0.4);
  border-radius: 100px;
  z-index: 10;
  right: 10%;
  top: 10%;
  animation: deptDotMove 7s linear infinite;
}
@keyframes deptDotMove {
  0%,100% { top: 10%;               right: 10%; }
  25%      { top: 10%;               right: calc(100% - 35px); }
  50%      { top: calc(100% - 30px); right: calc(100% - 35px); }
  75%      { top: calc(100% - 30px); right: 10%; }
}

/* ── The card IS the rotating element ── */
.svc-dept-card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;   /* ← 3D context on the rotating element */
  transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
  cursor: pointer;
  border-radius: 10px;
}
.svc-dept-outer:hover .svc-dept-card {
  transform: rotateY(180deg);     /* ← flip the card, not an inner wrapper */
}

/* ── Shared face styles ── */
.svc-dept-front,
.svc-dept-back {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* ── FRONT face — explicitly at 0 to prevent flicker ── */
.svc-dept-front {
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotateY(0deg);
}

.svc-dept-front-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 48px 72px 42px 72px;
  width: 100%;
}

/* Light-ray shimmer */
.svc-dept-ray {
  width: 220px;
  height: 40px;
  border-radius: 100px;
  position: absolute;
  background-color: rgba(184,146,46,0.35);
  opacity: 0.22;
  box-shadow: 0 0 40px rgba(184,146,46,0.25);
  filter: blur(14px);
  transform-origin: 10%;
  top: -5%;
  left: -10px;
  transform: rotate(38deg);
  pointer-events: none;
}

/* Corner accent lines */
.svc-dept-line {
  position: absolute;
  pointer-events: none;
}
.svc-dept-line.topl {
  width: 100%; height: 1px; top: 10%;
  background: linear-gradient(90deg, rgba(184,146,46,0.45) 30%, transparent 70%);
}
.svc-dept-line.bottoml {
  width: 100%; height: 1px; bottom: 10%;
  background: rgba(184,146,46,0.08);
}
.svc-dept-line.leftl {
  left: 10%; width: 1px; height: 100%; top: 0;
  background: linear-gradient(180deg, rgba(184,146,46,0.38) 30%, transparent 70%);
}
.svc-dept-line.rightl {
  right: 10%; width: 1px; height: 100%; top: 0;
  background: rgba(184,146,46,0.06);
}

/* Department icon */
.svc-dept-icon {
  font-size: 36px;
  margin-bottom: 18px;
  line-height: 1;
  filter: grayscale(0.2);
}

/* Title — centered on front */
.svc-dept-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  margin: 0 0 16px 0;
}

/* Gold underline rule */
.svc-dept-rule {
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin: 0 auto 20px;
}

/* Hover hint */
.svc-dept-flip-hint {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0.75;
}
.svc-dept-hint-arrow {
  transition: transform 0.3s ease;
}
.svc-dept-outer:hover .svc-dept-hint-arrow {
  transform: translateX(4px);
}

/* ── BACK face ── */
.svc-dept-back {
  background: var(--surface2);
  border: 1px solid rgba(184,146,46,0.18);
  transform: rotateY(180deg);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.svc-dept-back-content {
  padding: 48px 72px 42px 72px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Sub-service tag line */
.svc-dept-combines {
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--gold);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 18px;
  line-height: 1.6;
  border-left: 2px solid var(--gold);
  padding-left: 8px;
  opacity: 0.8;
}

/* Individual service block */
.svc-dept-block {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(184,146,46,0.1);
}
.svc-dept-block:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.svc-dept-block-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold2);
  margin-bottom: 5px;
}

.svc-dept-block-desc {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.6;
  opacity: 0.82;
}

[dir="rtl"] .svc-dept-block-name {
  font-size: 14px;
}

[dir="rtl"] .svc-dept-block-desc {
  font-size: 14px;
}

/* ══════════════════════════════════════════════════
   PARALLAX DIVIDER — .parallax-divider
   ══════════════════════════════════════════════════ */

.parallax-divider {
  position: relative;
  height: 840px;
  background-image: url(../../images/index/main-slider/slider-bg.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.parallax-divider-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 11, 18, 0.45);
  z-index: 1;
}

.parallax-divider-callout {
  position: absolute;
  bottom: 60px;
  left: 60px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* RTL: callout moves to bottom-right */
[dir="rtl"] .parallax-divider-callout,
.rtl .parallax-divider-callout {
  left: auto;
  right: 60px;
}

.parallax-divider-label {
  display: block;
  font-size: 10px;
  font-variant: small-caps;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 600;
}

.parallax-divider-heading {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  margin: 0;
}

/* Mobile: background-attachment:fixed is broken on iOS — fall back to scroll */
@media (max-width: 768px) {
  .parallax-divider {
    background-attachment: scroll;
    height: 640px;
  }
  .parallax-divider-callout {
    bottom: 40px;
    left: 24px;
  }
  [dir="rtl"] .parallax-divider-callout,
  .rtl .parallax-divider-callout {
    left: auto;
    right: 24px;
  }
  .parallax-divider-heading {
    font-size: 22px;
  }
}


/* ════════════════════════════════════════════════════════════════
   PIXEL IMAGE — hero overlay grid (MagicUI equivalent)
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   TEXT 3D FLIP — GSAP-driven (MagicUI equivalent)
   ════════════════════════════════════════════════════════════════ */
.flip-hero-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}

.flip-hero-lead {
  font-size: 20px;
  color: #ffffff;
  letter-spacing: 0.04em;
  line-height: 1.8;
  text-align: center;
  margin-bottom: 24px;
}

.flip-hero-cycling {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(1.5rem, 3.8vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* perspective lives on the BOX — GSAP rotates the inner element */
.flip-word-box {
  perspective: 800px;
  display: inline-block;
  min-width: 200px;
  text-align: center;
}

.flip-word-inner {
  display: inline-block;
  color: var(--gold);
  transform-origin: center center;
  will-change: transform, opacity;
  /* NO CSS transition — GSAP owns this element entirely */
}

.flip-sep {
  width: 2px;
  height: 1.1em;
  background: var(--gold);
  border-radius: 2px;
  display: inline-block;
  opacity: 0.45;
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════════
   TEXT REVEAL — word-by-word scroll scrub (MagicUI equivalent)
   ════════════════════════════════════════════════════════════════ */
.text-reveal-p {
  overflow: visible;
}

/* tr-word opacity is driven entirely by GSAP */
.text-reveal-p .tr-word {
  display: inline;
  will-change: opacity;
}


/* ════════════════════════════════════════════════════════════════
   TEXT PARALLAX CONTENT — MagicUI / services replacement
   ════════════════════════════════════════════════════════════════ */

/* Section header above the parallax panels */
.tpc-section-header {
  text-align: center;
  padding: 80px 24px 56px;
  max-width: 860px;
  margin: 0 auto;
}
.tpc-section-lead {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.9;
  margin-top: 20px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.tpc-wrapper {
  background: var(--surface);
}

/* Each 150vh panel */
.tpc-panel {
  padding-left: 12px;
  padding-right: 12px;
}

/* The 150vh scroll-area that contains the sticky image */
.tpc-scroll-area {
  position: relative;
  height: 150vh;
}

/* Sticky image */
.tpc-sticky-img {
  position: sticky;
  top: 12px;
  height: calc(100vh - 24px);
  border-radius: 24px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  z-index: 0;
  will-change: transform, opacity;
}

/* Dark overlay inside sticky image — fades as you scroll */
.tpc-img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.65);
  will-change: opacity;
}

/* Overlay heading text that parallaxes */
.tpc-overlay-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-align: center;
  padding: 0 24px;
  will-change: transform, opacity;
}
.tpc-subheading {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 10px;
}
.tpc-heading {
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
  margin: 0;
}

/* Content grid below each sticky panel */
.tpc-content {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 24px 80px;
}
@media (max-width: 768px) {
  .tpc-content { grid-template-columns: 1fr; }
}

.tpc-content-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.tpc-block {
  margin-bottom: 28px;
}
.tpc-block:last-child { margin-bottom: 0; }

.tpc-block-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.tpc-block-desc {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.85;
}
.tpc-learn-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  padding: 14px 32px;
  background: #1A1A1A;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.3s ease;
}
.tpc-learn-btn:hover {
  background: #333;
  color: #fff;
}
.tpc-learn-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   RADIAL ORBITAL TIMELINE
   ════════════════════════════════════════════════════════════════════════ */
.ort-section { background: #0D1B2A; }
.ort-lead { color: rgba(255,255,255,0.55); font-size: 0.95rem; margin-top: 8px; }
.ort-section .section-heading { color: #fff; }
.ort-section .gold-rule.center { background: var(--gold); }

#ort-container {
  position: relative;
  width: 100%;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

/* ── Center orb ── */
.ort-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b6914 0%, var(--gold) 50%, #C8A848 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  box-shadow: 0 0 24px rgba(200,168,72,0.45);
}
.ort-center-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(200,168,72,0.25);
  animation: ort-ping 2s cubic-bezier(0,0,0.2,1) infinite;
}
.ort-center-ring.r1 { width: 84px; height: 84px; animation-delay: 0s; }
.ort-center-ring.r2 { width: 108px; height: 108px; animation-delay: 0.5s; }
.ort-center-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  color: #0D1B2A;
}

@keyframes ort-ping {
  0%   { transform: scale(1);   opacity: 0.7; }
  75%, 100% { transform: scale(1.35); opacity: 0; }
}
@keyframes ort-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ── Orbit ring ── */
.ort-orbit-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 400px; height: 400px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(200,168,72,0.12);
  pointer-events: none;
}

/* ── Nodes ── */
.ort-node {
  position: absolute;
  top: 50%; left: 50%;
  cursor: pointer;
  transition: opacity 0.6s ease;
  /* JS sets transform: translate(calc(-50% + Xpx), calc(-50% + Ypx)) */
}
.ort-node-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,168,72,0.25) 0%, transparent 70%);
  pointer-events: none;
}
.ort-node-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #0D1B2A;
  color: #fff;
  border: 2px solid rgba(200,168,72,0.4);
  font-size: 14px;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}
.ort-node:hover .ort-node-btn,
.ort-node-btn.ort-node-active {
  background: var(--gold);
  color: #0D1B2A;
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(200,168,72,0.4);
  transform: scale(1.3);
}
.ort-node-label {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.65);
  text-align: center;
  transition: color 0.3s ease;
  pointer-events: none;
}
.ort-node.ort-expanded .ort-node-label,
.ort-node:hover .ort-node-label { color: #fff; }

/* ── Related pulse ── */
.ort-node.ort-related-pulse .ort-node-btn {
  background: rgba(200,168,72,0.4);
  border-color: var(--gold);
  animation: ort-pulse 1s ease-in-out infinite;
}

/* ── Expanded card ── */
.ort-card {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  background: rgba(13,27,42,0.96);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(200,168,72,0.3);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(200,168,72,0.1);
  padding: 16px;
  display: none;
  z-index: 300;
}
.ort-node.ort-expanded .ort-card { display: block; }
.ort-card-arrow {
  position: absolute;
  top: -6px; left: 50%; transform: translateX(-50%);
  width: 1px; height: 6px;
  background: rgba(200,168,72,0.5);
}
.ort-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ort-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
}
.ort-badge-core { background: var(--gold); color: #0D1B2A; border-color: var(--gold); }
.ort-badge-active { background: transparent; color: var(--gold); border-color: var(--gold); }
.ort-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.4;
}
.ort-card-body {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
  margin-bottom: 14px;
}
.ort-energy { margin-bottom: 12px; }
.ort-energy-label {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 5px;
}
.ort-energy-track {
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.ort-energy-bar {
  height: 100%;
  background: linear-gradient(90deg, #8b6914, var(--gold));
  border-radius: 2px;
}
.ort-related { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 12px; }
.ort-related-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ort-related-btns { display: flex; flex-wrap: wrap; gap: 5px; }
.ort-related-btn {
  background: transparent;
  border: 1px solid rgba(200,168,72,0.25);
  color: rgba(255,255,255,0.75);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  line-height: 1.5;
}
.ort-related-btn:hover {
  background: rgba(200,168,72,0.15);
  border-color: var(--gold);
  color: #fff;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  #ort-container { height: 420px; }
  .ort-orbit-ring { width: 280px; height: 280px; }
  .ort-card { width: 220px; font-size: 0.78rem; }
  .ort-node-label { font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════════════════
   31. APEX 2026 UNIFIED STYLES — Beltone Layout Adaptations (Homepage-Only)
   ════════════════════════════════════════════════════════════════════════ */

/* Full-width corporate header overlay */
.glass-pill-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  justify-content: center !important;
  padding: 0 !important;
  width: 100% !important;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Make it full width and align logo & menu */
.glass-pill-nav .pill {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 40px !important;
  gap: 24px !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: none !important;
  width: 100% !important;
  height: 90px !important;             /* Increased from 80px */
}

/* Scrolled solid state */
.glass-pill-nav.scrolled {
  background: rgba(7, 17, 30, 0.92) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom-color: rgba(200, 168, 72, 0.20) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
}

/* Logo placement inside navbar */
.glass-pill-nav .pill .page-logo {
  position: relative !important;
  top: auto !important;
  inset-inline-start: auto !important;
  z-index: 10 !important;
  line-height: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.glass-pill-nav .pill .page-logo img {
  height: 64px !important;             /* Increased from 52px */
  width: auto !important;
  transition: transform 0.3s ease !important;
}

.glass-pill-nav .pill .page-logo img:hover {
  transform: scale(1.05) !important;
}

/* Menu items flat text alignment */
.glass-pill-nav .pill-menu {
  display: flex !important;
  gap: 32px !important;                 /* Increased spacing between links */
  margin: 0 !important;
  padding: 0 !important;
}

.glass-pill-nav .pill-menu > li > a {
  font-family: 'Figtree', 'Cairo', sans-serif !important;
  font-size: 16.5px !important;         /* Increased from 15px */
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  transition: color 0.3s ease !important;
  position: relative !important;
  padding: 8px 0 !important;
}

.glass-pill-nav .pill-menu > li.active > a,
.glass-pill-nav .pill-menu > li > a:hover {
  color: var(--gold) !important;
}

.glass-pill-nav .pill-lang-btn {
  font-size: 14px !important;           /* Increased from 12px */
  padding: 6px 16px !important;         /* Increased padding */
}

/* Strip capsule indicators */
.glass-pill-nav .pill-menu > li > a::after {
  display: none !important;
}

/* Video container layout inside #hero */
#hero video.hero-video-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

#hero .hero-video-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(7, 17, 30, 0.55) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Stock ticker widget visual styling */
.ticker-widget {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
  padding: 16px 24px !important;
  color: #ffffff !important;
  max-width: 400px !important;
  font-family: 'Figtree', 'Cairo', sans-serif !important;
  z-index: 5 !important;
  position: absolute !important;
  bottom: 60px !important;
  inset-inline-start: 60px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.ticker-label {
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  color: rgba(255, 255, 255, 0.6) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

.ticker-grid {
  display: flex !important;
  gap: 20px !important;
  align-items: center !important;
}

.ticker-val {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.ticker-change {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #FF4D4F !important; /* down color */
}

.ticker-change.up {
  color: #52C41A !important; /* up color */
}

/* Clean about section 2-column styling overrides */
.about-section {
  background: var(--surface2) !important;
  padding: 100px 0 !important;
  margin: 0 !important;
}

.about-section .about-image-wrap {
  max-width: 85%;
  width: 85%;
  aspect-ratio: 1/1;
  border-radius: 4px;
  overflow: hidden;
}

.about-section .about-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Grey pill button styling to match Beltone secondary buttons */
.btn-secondary-pill {
  display: inline-flex !important;
  align-items: center !important;
  background: #3A4047 !important;
  color: #ffffff !important;
  border-radius: 2px !important;
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: background 0.3s ease, transform 0.3s ease !important;
  gap: 8px !important;
  border: none !important;
}

.btn-secondary-pill:hover {
  background: #23272B !important;
  color: var(--gold) !important;
  transform: translateY(-2px) !important;
}

.btn-secondary-pill i {
  transition: transform 0.3s ease !important;
}

.btn-secondary-pill:hover i {
  transform: translateX(-4px) !important;
}

[dir="ltr"] .btn-secondary-pill:hover i {
  transform: translateX(4px) !important;
}

/* Cinematic Background Video Footer */
footer.video-footer {
  position: relative !important;
  background: #07111E !important;
  overflow: hidden !important;
  padding: 80px 0 40px !important;
}

footer.video-footer video.footer-video-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
  opacity: 0.25 !important;
  pointer-events: none !important;
}

footer.video-footer .container {
  position: relative !important;
  z-index: 1 !important;
}

/* Responsive Overrides */
@media (max-width: 991px) {
  .glass-pill-nav .pill {
    padding: 0 20px !important;
  }
  .glass-pill-nav .pill-menu {
    display: none !important;
  }
  .ticker-widget {
    bottom: 40px !important;
    inset-inline-start: 20px !important;
    max-width: calc(100% - 40px) !important;
  }
}

/* Beltone-style Section Divider */
.beltone-divider {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 16px !important;
  margin-bottom: 50px !important;
  padding-top: 20px !important;
}

.beltone-divider .divider-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  height: fit-content !important;
  justify-content: flex-start !important;
}

.beltone-divider .divider-header svg {
  flex-shrink: 0 !important;
  width: 22px !important;
  height: 14px !important;
}

.beltone-divider .divider-header h2 {
  font-family: 'Figtree', 'Cairo', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--gold) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.beltone-divider hr {
  border: 0 !important;
  border-top: 2px solid var(--gold) !important;
  margin: 0 !important;
  opacity: 0.85 !important;
  width: 100% !important;
}

/* Custom Monospace Flow Diagram Styling */
.svc-diagram-container {
  margin: 40px auto 60px;
  max-width: 800px;
  background: rgba(10, 15, 26, 0.45);
  border: 1px solid rgba(184, 146, 46, 0.25);
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.svc-diagram-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.svc-diagram-scroll-wrapper {
  overflow-x: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.svc-diagram-scroll-wrapper::-webkit-scrollbar {
  height: 6px;
}

.svc-diagram-scroll-wrapper::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.svc-diagram-scroll-wrapper::-webkit-scrollbar-thumb {
  background: var(--gold-dim);
  border-radius: 3px;
}

.svc-diagram-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

.svc-diagram-pre {
  margin: 0;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--gold);
  white-space: pre;
  display: block;
  text-align: left;
}

[dir="rtl"] .svc-diagram-pre {
  direction: ltr; /* Keeps structural box-drawing aligned */
  text-align: left;
}

.svc-diagram-hint {
  display: none;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-top: 12px;
}

@media (max-width: 768px) {
  .svc-diagram-hint {
    display: block;
  }
}

/* From Uiverse.io by sunn_2633 */ 
.cyber-pattern {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  background-color: #E6E7E8; /* Light cyber grey */

  /* C'est ici que la magie opère. On empile plusieurs couches : */
  background-image: 
    /* 1. La Vignette (Ombre sur les bords pour l'effet cinéma) */
    radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.1) 90%),
    /* 2. GRILLE PRINCIPALE (Black - Grande) - Lignes Verticales & Horizontales */
      linear-gradient(rgba(0, 0, 0, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 1px, transparent 1px),
    /* 3. GRILLE SECONDAIRE (Black - Petite) - Lignes Verticales & Horizontales */
      linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);

  /* On définit la taille des grilles */
  background-size:
    100% 100%,
    /* Vignette */ 60px 60px,
    /* Grande grille Cyan (60px) */ 60px 60px,
    20px 20px,
    /* Petite grille Magenta (20px) */ 20px 20px;

  /* On lance l'animation */
  animation: cyber-move 10s linear infinite;
}

/* L'animation qui fait bouger les grilles */
@keyframes cyber-move {
  0% {
    background-position:
      0 0,
      /* Vignette (ne bouge pas) */ 0 0,
      0 0,
      /* Grille Cyan (Départ) */ 0 0,
      0 0; /* Grille Magenta (Départ) */
  }
  100% {
    background-position:
      0 0,
      /* Vignette */ 60px 60px,
      60px 60px,
      /* Grille Cyan bouge de 60px (1 carreau) */ 40px 40px,
      40px 40px; /* Grille Magenta bouge de 40px (plus vite/décalé) */
  }
}




/* Force Left Alignment Utility - Scoped to LTR so Arabic can naturally right-align */
[dir="ltr"] .force-left {
  text-align: left !important;
}
[dir="ltr"] .force-left p, [dir="ltr"] .force-left h2, [dir="ltr"] .force-left h3, [dir="ltr"] .force-left h4, [dir="ltr"] .force-left h5 {
  text-align: left !important;
}
.force-left .beltone-divider .divider-header {
  justify-content: flex-start !important;
  flex-direction: row !important;
}
.force-left .beltone-divider hr {
  margin-left: 0 !important;
  margin-right: auto !important;
}
[dir="rtl"] .force-left .beltone-divider .divider-header {
  justify-content: flex-end !important;
  flex-direction: row-reverse !important;
}
[dir="rtl"] .force-left .row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row !important; /* Fixed: was row-reverse which broke RTL flow */
}

[dir="rtl"] .force-left .offset-lg-1 {
  margin-right: 8.33333333%;
  margin-left: 0;
}

/* Restore centering for specific cards inside force-left wrappers */
.force-left .svc-dept-title,
.force-left .front-content h5 {
  text-align: center !important;
}

/* News slider: fixed card height — no flex override on owl-stage (breaks RTL transforms) */
.news-slider .item {
  width: 100%;
}
.news-slider .news-card {
  height: 440px;
}

/* ════════════════════════════════════════════════════════════════════════
   ABOUT US PAGE OVERRIDES
   ════════════════════════════════════════════════════════════════════════ */
  .hero-glass-box .section-label::before,
  .hero-glass-box .section-label::after { display:none!important; content:none!important; width:0!important; height:0!important; background:transparent!important; }
  
  .pmv-section .section-heading,
  .values-section .section-heading {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  section.aboutus-pmv .row.justify-content-center,
  section.aboutus-values .row.justify-content-center {
    justify-content: center !important;
  }

  section.aboutus-pmv .col-lg-7.text-center,
  section.aboutus-values .col-lg-7.text-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .values-section {
    background: #f4ebd9 !important;
  }

  .values-section .value-card {
    background: #f8f1e2 !important;
    border: 1px solid #dec9a0 !important;
    box-shadow: 0 12px 30px rgba(20, 27, 39, 0.08) !important;
  }

  .values-section .value-title,
  .values-section .value-text {
    color: #1d2530 !important;
  }

  .inner-page-hero .hero-glass-box > .section-label.en-text {
    font-size: 14px !important;
  }

  section.aboutus-founder {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }

  body#body-root section.aboutus-pmv {
    background: linear-gradient(to bottom, #ffffff 0px, #e8e3d8 200px, #e8e3d8 100%) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body#body-root section.aboutus-values {
    background: linear-gradient(to bottom, #e8e3d8 0px, #f4ebd9 200px, #f4ebd9 100%) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .section-label.ar-text { font-size: 18px !important; }