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

html,
body {
  height: 100%;
  /* background-color: ; */
}

:root {
  --fs: 16px;
  --dim: .35;
  /* layout */
  --panel-left-w: 50vw;
  /* فيديو */
  --panel-right-w: 50vw;
  /* نافبار */
  /* colors */
  --accent: #0d7f6f;
  --accent-2: #0aa37a;
  --nav-bg: #d9efe9;
  /* لون النافبار زي الفيجما */
  --text-dark: #2d2f33;
  --muted: #8c9aa3;
  --diamond: #e79032;
  /* zigzag */
  --zigzag-h: 57px;
  --zigzag-bg: #e8e0d3;
  --zigzag-fill: #e9d7bf;
  --zigzag-speed: 3s;
  /* أسرع */
  /* nav feel */
  --nav-hover: #fff8eb;
  --submenu-speed: .6s;
  /* أبطأ */
}

body {
  margin: 0;
  font-size: var(--fs);
  font-family: "Cairo", "Tajawal", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #0b0c0f;
  color: #fff;
  overflow-x: hidden
}

/* ===== Hero ===== */
.hero {
  position: relative;
  width: 100vw;
  height: 120vh;
  direction: rtl;
  overflow: hidden;
  isolation: isolate
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.03) contrast(1.02)
}

.hero__dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--dim))
}

.icon-btn.ghost {
  position: absolute;
  top: 20px;
  left: 24px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  /* border-radius: 10px; */
  border: 0;
  background: transparent;
  color: #fff;
  /* backdrop-filter: blur(14px); */
  cursor: pointer;
  transition: transform .25s ease, background-color .25s ease;
}

.icon-btn.ghost:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .12)
}

.top-right {
  position: absolute;
  top: 28px;
  right: 40px;
  z-index: 2;
  text-align: right;
  text-shadow: 0 2px 28px rgba(0, 0, 0, .45)
}

.kicker {
  margin: 0;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  font-size: clamp(18px, 2.2vw, 28px)
}

.bottom-right {
  position: absolute;
  right: 40px;
  bottom: clamp(36px, 7vh, 72px);
  z-index: 2;
  text-align: right;
  text-shadow: 0 2px 28px rgba(0, 0, 0, .45)
}

.display {
  margin: 0;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: #fff;
  font-size: clamp(28px, 8.4vw, 90px)
}

/* ===== Overlay Panel ===== */
.panel {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: var(--panel-left-w) var(--panel-right-w);
  background: #000;
  opacity: 0;
  transform: translateX(4%);
  pointer-events: none;
  transition: opacity 1s cubic-bezier(.2, .7, .2, 1), transform 1.1s cubic-bezier(.2, .7, .2, 1);
  /* فتح بطيء */
}

body.menu-open .panel {
  opacity: 1;
  transform: none;
  pointer-events: auto
}

/* دخول العمودين بنعومة */
.panel__media,
.panel__nav {
  opacity: 0;
  transform: translateX(18px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
}

body.menu-open .panel__media,
body.menu-open .panel__nav {
  opacity: 1;
  transform: none
}

/* يسار: فيديو (50%) */
.panel__media {
  position: relative;
  overflow: hidden
}

.panel__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

/* أيقونات زجاجية أسفل-يسار الفيديو الثاني */
.util-bar {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 3
}

.util-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .2s ease
}

.util-btn.mono {
  font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace
}

.util-btn--glass {
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  backdrop-filter: blur(14px)
}

.util-btn--glass:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .3)
}

/* يمين: نافبار (50%) */
.panel__nav {
  position: relative;
  background: var(--nav-bg);
  color: var(--text-dark);
  overflow-y: auto;
}

/* fling icon (اختياري) */
.fling-icon {
  position: absolute;
  top: 14px;
  left: -8px;
  color: #7b6bff;
  opacity: .0;
  pointer-events: none;
}

.panel__nav:hover .fling-icon {
  animation: fling-left .8s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes fling-left {
  0% {
    transform: translateX(40px) scale(.9);
    opacity: 0;
    filter: blur(2px)
  }

  40% {
    opacity: 1;
    filter: blur(0)
  }

  100% {
    transform: translateX(-40px) scale(1);
    opacity: 0;
    filter: blur(2px)
  }
}

/* mega nav */
.nav__brand {
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 28px);
  margin: 24px 24px 12px;
  text-align: right
}

.mega__list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0 18px
}

.mega__item {
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  padding: 8px 6px;
  position: relative
}

/* عنوان القسم */
.mega__head {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 10px;
  justify-content: flex-end;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 12px 14px;
  color: #5C4B43 !important;
  transition: color .25s ease, transform .25s ease;
  z-index: 1;
}

.mega__head .num {
  color: var(--muted);
  font-weight: 800;
  transition: color .25s ease
}

.mega__head .title {
  font-weight: 500;
  font-size: clamp(22px, 3.0vw, 42px);
  line-height: 1.15;
  font-family: "Tajawal", "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.mega__item:hover .mega__head {
  transform: translateY(-2px)
}

/* خلفية الزجزاج داخل العنوان — active فقط */
.mega__head::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  background-color: var(--zigzag-fill);
  background-image: repeating-linear-gradient(90deg, transparent 0 56px, transparent 56px, transparent 112px), conic-gradient(from 45deg, var(--zigzag-bg) 0 90deg, transparent 90deg 180deg, var(--zigzag-bg) 180deg 270deg, transparent 270deg 360deg);
  background-size: 112px var(--zigzag-h), 56px 28px;
  background-repeat: repeat;
  background-position: 0 center, 0 center;
  animation: zigzag-scroll var(--zigzag-speed) linear infinite;
  opacity: 0;
  transition: opacity .35s ease;
}

.mega__item.active .mega__head::after {
  opacity: 1
}

/* Submenu (أبطأ) */
.mega__submenu {
  list-style: none;
  margin: 6px 0 12px;
  padding: 0 0 12px 0;
  display: grid;
  gap: 10px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height var(--submenu-speed) ease, opacity var(--submenu-speed) ease, transform var(--submenu-speed) ease;
}

.mega__submenu li {
  position: relative;
  padding-inline-end: 18px;
  text-align: right
}

.mega__submenu li::before {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: .65em;
  width: 8px;
  height: 8px;
  background: var(--accent-2);
  transform: rotate(45deg);
  border-radius: 1px
}

.mega__submenu a {
  color: #3a3d41;
  text-decoration: none;
  transition: color .25s ease, padding-inline-start .25s ease
}

.mega__submenu a:hover {
  color: #000;
  padding-inline-start: 4px
}

.mega__item.active .mega__submenu {
  opacity: 1;
  transform: none;
  max-height: 60vh
}

/* close button (orange diamond) */
.close-diamond {
  position: absolute;
  top: 14px;
  left: 16px;
  width: 32px;
  height: 32px;
  background: var(--diamond);
  border: none;
  cursor: pointer;
  z-index: 2;
  transform: rotate(45deg);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25)
}

.close-diamond__x {
  position: absolute;
  inset: 0;
  transform: rotate(-45deg);
  display: block
}

.close-diamond__x::before,
.close-diamond__x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: #fff;
  transform-origin: center
}

.close-diamond__x::before {
  transform: translate(-50%, -50%) rotate(45deg)
}

.close-diamond__x::after {
  transform: translate(-50%, -50%) rotate(-45deg)
}

/* Responsive */
@media (max-width:900px) {
  :root {
    --panel-left-w: 100vw;
    --panel-right-w: 100vw
  }

  .panel {
    grid-template-columns: 1fr
  }

  .panel__nav {
    order: 2
  }
}

/* Zigzag keyframes */
@keyframes zigzag-scroll {
  0% {
    background-position: 0 center, 0 center
  }

  100% {
    background-position: -112px center, -56px center
  }
}

/* العنوان هو الحاوي للخلفية */
.mega__head {
  position: relative;
  overflow: hidden;
  /* قصّ الخلفية على الـ radius */
  border-radius: 12px;
  background: transparent;
  /* مهم */
  z-index: 1;
}

/* خلفية الزجزاج داخل العنوان */
.mega__head::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  /* تحت النص */
  pointer-events: none;
  background-color: var(--zigzag-fill);
  background-image: repeating-linear-gradient(90deg, transparent 0 56px, transparent 56px, transparent 112px), conic-gradient(from 45deg, var(--zigzag-bg) 0 90deg, transparent 90deg 180deg, var(--zigzag-bg) 180deg 270deg, transparent 270deg 360deg);
  background-size: 112px var(--zigzag-h), 56px 28px;
  background-repeat: repeat;
  background-position: 0 center, 0 center;
  animation: zigzag-scroll var(--zigzag-speed) linear infinite;
  opacity: 0;
  /* مخفية افتراضياً */
  transition: opacity .35s ease;
}

/* تظهر فقط للعنصر الـ active */
.mega__item.active .mega__head::after {
  opacity: 1;
}

/* خلّي نص العنوان فوق الخلفية */
.mega__head>* {
  position: relative;
  z-index: 1;
}

/* احذف أي خلفية صلبة على الأكتيف */
.mega__item.active .mega__head {
  background: transparent;
}

/* لو فيه أي ستايل قديم للـ div.zigzag عطّله تماماً */
.zigzag {
  display: none !important;
}

/* ========== Section 2 Styles ========== */
:root {
  --geo-maxw: 1100px;
  /* أقصى عرض للستيج – عدّلها لقيمة الـ Frame من Figma */
  --geo-ratio: 2 / 1;
  /* نسبة الأبعاد بالملّي (بدّلها من الفيجما) */
  --geo-pad: 24px;
  --geo-radius: 16px;
  --geo-dur: .6s;
  /* مدة الانتقال بين الحالات */
  --geo-ease: cubic-bezier(.2, .7, .2, 1);
  --geo-stagger: 90ms;
  /* خفّة stagger لو احتجت */
  --geo-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

/* ======= Geo section skin ======= */
:root {
  --geo-maxw: 1100px;
  /* حطه = عرض الفريم في الفيجما أو أقل */
  --geo-ratio: 2 / 1;
  /* ← غيّرها لنسبة العرض/الارتفاع من الفيجما (مثال 1440×720 = 2/1) */
  --geo-radius: 16px;
  /* ← نصف قطر الزوايا من الفيجما */
  --geo-fade: .45s;
  /* مدة الفيد بين الحالات */
  --geo-ease: cubic-bezier(.2, .7, .2, 1);
}

#geo {
  padding: clamp(28px, 4vw, 48px) 0;
}

.geo-wrap {
  width: min(92vw, var(--geo-maxw));
  margin-inline: auto;
}

.geo-title {
  margin: 0 0 14px;
  font: 800 clamp(22px, 3.2vw, 36px) "Cairo", sans-serif;
}

/* المسرح: يحافظ على أبعاد الفيجما */
.geo-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--geo-ratio);
  border-radius: var(--geo-radius);
  overflow: hidden;
  background: #f3f4f4;
  /* لو في لون خلفية بالفيجما عدّله هنا */
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s var(--geo-ease), transform .6s var(--geo-ease);
}

.geo-stage[data-ready="true"] {
  opacity: 1;
  transform: none;
}

/* الإطارات (مطابقة بالملي لأنهم صور نهائية) */
.geo-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--geo-fade) var(--geo-ease);
}

.geo-stage.state-0 .f1 {
  opacity: 1;
}

.geo-stage.state-1 .f2 {
  opacity: 1;
}

.geo-stage.state-2 .f3 {
  opacity: 1;
}

/* نقاط الحالة (شكل بسيط) */
.geo-dots {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  gap: 8px;
  z-index: 2;
}

.geo-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .18);
  border: 0;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease;
}

.geo-dots .dot.is-active {
  background: #0aa37a;
  transform: scale(1.15);
}

/* فل-ويدث بالكامل، من غير أي عناصر زيادة */
#geoFull {
  width: 100vw;
  background: #000;
  /* لو الصورة فيها شفافية */
}

#geoFull img {
  display: block;
  width: 100%;
  height: auto;
  /* يحافظ على نسبة أبعاد الصورة */
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: opacity .35s ease;
  /* فيد بسيط بين الحالات */
}

#geoFull img.is-fading {
  opacity: .25;
}

/* ===== Section 2: Full-width slider (no UI) ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: #000;
}

/* الحاوية فل-ويدث وتقصّ الحركة خارج الإطار */
#geoFull {
  width: 100vw;
  position: relative;
  overflow: hidden;
  background: #000;
  /* لو الصور فيها شفافية */
}

/* ستاك الصور */
.slide-stack {
  position: relative;
  width: 100%;
  outline: none;
  /* بنعتمد على tabindex في HTML */
  cursor: pointer;
}

/* الطبقات: صورتين فوق بعض، نبدّل بينهم */
.slide-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  /* يحافظ على النسبة الأصلية للصورة */
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: none;
  /* الكليك يكون على الحاوية نفسها */
  opacity: 0;
}

/* أول صورة فقط نخليها static علشان تحدد ارتفاع الحاوية ومايبقاش فيه قفز */
.slide-stack img.is-baseline {
  position: static;
  inset: auto;
}

/* الصورة المعروضة حاليًا */
.slide-stack img.is-current {
  opacity: 1;
}

/* ==== أنيميشن الخروج والدخول ==== */
@keyframes slideOutUpFade {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-14%);
    opacity: 0;
  }
}

@keyframes slideInUpFade {
  0% {
    transform: translateY(14%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* نطبّق الأنيميشن بكلاسات مؤقتة */
.slide-stack img.anim-out {
  animation: slideOutUpFade .5s cubic-bezier(.2, .7, .2, 1) forwards;
  z-index: 3;
}

.slide-stack img.anim-in {
  animation: slideInUpFade .5s cubic-bezier(.2, .7, .2, 1) forwards;
  z-index: 2;
}

/* تحسين بسيط للموبايل: مساحة لمس مريحة */
@media (hover:none) {
  .slide-stack {
    padding-bottom: 0;
  }
}

#geoFull {
  width: 100vw;
  position: relative;
  overflow: hidden;
  background: #000;
}

.slide-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* ← عدّلها لنسبة صورك (مثلاً 1920×1080 = 16/9) */
  outline: none;
  cursor: pointer;
}

/* الحاوية: نخلي فيها عمق ثلاثي الأبعاد */
.slide-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* عدّلها لنسبة صورك لو حابب */
  cursor: pointer;
  outline: none;
  /* 3D */
  perspective: 1200px;
  transform-style: preserve-3d;
  overflow: hidden;
}

/* الصور */
.slide-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: none;
  opacity: 0;
}

.slide-stack img.is-baseline {
  position: static;
  inset: auto;
}

.slide-stack img.is-current {
  opacity: 1;
}

/* طبقة تأثير خفيفة وقت الانتقال (pulse/vignette) */
.slide-stack::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .25) 100%), linear-gradient(180deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, .0));
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}

.slide-stack.fx-pulse::after {
  opacity: 1;
}

/* ===== انيميشن “العمق” ===== */
@keyframes outDepth {
  0% {
    transform: translateZ(0) scale(1) translateY(0);
    opacity: 1;
    filter: blur(0) brightness(1);
  }

  55% {
    transform: translateZ(-160px) scale(.94) translateY(-2%);
    opacity: .65;
    filter: blur(2px) brightness(.94);
  }

  100% {
    transform: translateZ(-260px) scale(.90) translateY(-8%);
    opacity: 0;
    filter: blur(4px) brightness(.88);
  }
}

@keyframes inDepth {
  0% {
    transform: translateZ(220px) scale(1.08) translateY(10%);
    opacity: 0;
    filter: blur(6px) brightness(1.05);
  }

  45% {
    transform: translateZ(90px) scale(1.02) translateY(3%);
    opacity: .75;
    filter: blur(2px) brightness(1);
  }

  100% {
    transform: translateZ(0) scale(1) translateY(0);
    opacity: 1;
    filter: blur(0) brightness(1);
  }
}

/* طبق الكي فريمز */
.slide-stack img.anim-out {
  animation: outDepth .6s cubic-bezier(.2, .7, .2, 1) forwards;
  z-index: 3;
}

.slide-stack img.anim-in {
  animation: inDepth .6s cubic-bezier(.2, .7, .2, 1) forwards;
  z-index: 2;
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  .slide-stack::after {
    display: none;
  }

  .slide-stack img.anim-out,
  .slide-stack img.anim-in {
    animation-duration: .25s;
    filter: none !important;
  }
}

:root {
  --c-bg: #EFE6D4;
  --c-bg-2: #E6DCC7;
  --c-band: #BFE6E4;
  --c-brand: #17A3A1;
  --c-text: #202424;
  --radius: 16px;
}

/* أساسيات */
* {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  padding: 0
}

body {
  background: #f7f4ec;
  color: var(--c-text);
  font-family: "Tajawal", system-ui
}

.container {
  width: min(1200px, 92%);
  margin-inline: auto
}

/* شريط مثلثات */
.tri-band {
  --h: 28px;
  height: var(--h);
  background: conic-gradient(from -45deg at 50% 100%, #E86 0 25%, #D54 0 50%, #E86 0 75%, #D54 0) 0 0/60px var(--h) repeat-x, conic-gradient(from 45deg at 50% 0, #E86 0 25%, #D54 0 50%, #E86 0 75%, #D54 0) 30px 0/60px var(--h) repeat-x;
  opacity: .85
}

/* هيدر */
.soto {
  background: var(--c-band);
  position: relative;
  padding-bottom: 100px;
}
.headband{
    padding: 58px 56px 46px;

}
.headband__inner {
  position: relative
}

.headband__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: var(--c-brand)
}

.headband__kicker {
  margin: 0 0 8px;
  font: 800 35px/1.2 "Cairo", "Tajawal", sans-serif
}

.headband__title {
  margin: 0;
  font: 800 52px/1.2 "Cairo", "Tajawal", sans-serif
}

/* خلفية السكشن */
.sectors {
  padding: 79px 0 139px;
  background: radial-gradient(120px 120px at 30% 30%, var(--c-bg-2) 0 40%, #0000 41%) 0 0/420px 420px, radial-gradient(120px 120px at 70% 70%, var(--c-bg-2) 0 40%, #0000 41%) 0 0/420px 420px, var(--c-bg);
  background-image: url(images/back.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ====== الروتيتور بنظام GRID ====== */
.rotator {
  position: relative
}

.row {
  display: grid;
  /* أوزان الأعمدة تتغير من JS */
  grid-template-columns: var(--w1, 2.4fr) var(--w2, 1fr) var(--w3, 1fr);
  gap: 28px;
  transition: grid-template-columns .45s cubic-bezier(.2, .7, 0, 1);
}

.card {
  position: relative;
  min-height: clamp(340px, 45vw, 320px);
  border-radius: 1px;
  overflow: hidden;
  background: #ccc;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  box-shadow: 0 8px 26px #00000014;
}

.card .veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .00) 10%, rgba(0, 0, 0, .45) 60%, rgba(0, 0, 0, .78) 100%);
  pointer-events: none;
}

/* محتوى الكبير يظهر فقط للبطاقة النشطة */
.big-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px;
  color: #fff
}

.big-text {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.9;
  text-shadow: 0 1px 2px #00000070;
  max-width: 70ch
}

.big-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  color: #fff;
  border-radius: 999px;
  font-weight: 800;
  backdrop-filter: blur(2px)
}

.mini-label {
  position: absolute;
  inset: auto 0 16px 0;
  margin-inline: auto;
  width: max-content;
  padding: 8px 16px;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  z-index: 2;
  backdrop-filter: blur(1px)
}

.card.is-big .mini-label {
  display: none
}

.card:not(.is-big) .big-panel {
  display: none
}

/* أزرار الألماس */
.slider-nav {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  gap: 12px;
  z-index: 5
}

.diamond-btn {
  width: 40px;
  height: 40px;
  border: none;
  cursor: pointer;
  background: #00a79d;
  transform: rotate(45deg);
  border-radius: 10px;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px #0000001f;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease
}

.diamond-btn svg {
  transform: rotate(-45deg)
}

.diamond-btn:hover {
  background: #fff;
  transform: rotate(45deg) translateY(-2px);
  box-shadow: 0 10px 24px #0000002a
}

/* موبايل */
@media (max-width:820px) {
  .row {
    grid-template-columns: 1fr;
    transition: none
  }

  .slider-nav {
    left: 12px;
    bottom: 12px
  }

  .headband__title {
    font-size: 30px
  }

  .headband__kicker {
    font-size: 22px
  }
}

/* 1) خلي سكشن القطاعات فل-ويدث */
.sectors .container {
  width: 100%;
  max-width: 100%;
  /* padding جانبي خفيف بدل الـmargin الكبير */
  padding-inline: clamp(16px, 4vw, 48px);
}

/* 2) خَلّي الأزرار تحت الكروت مش فوقها */
.slider-nav {
  position: static;
  /* مش absolute */
  left: auto;
  bottom: auto;
  margin-top: 16px;
  /* مسافة تحت الصف */
  display: flex;
  gap: 12px;
  justify-content: center;
  /* لو عايزها شمال استخدم flex-start */
}

/* 3) عنوان الهيدر ونصوصه يمين، والشريط الفيروزي في اليمين */
.headband .container {
  text-align: right;
  direction: rtl;
}

.headband__bar {
  left: auto;
  /* كان مثبت على الشمال */
  right: 0;
  /* خليه يمين */
}

/* كمان تأكد إن نص السلايد الكبير يمين */
.big-panel {
  text-align: right;
  direction: rtl;
}

.headband .container {
  width: 100%;
  max-width: 100%;
  padding-inline: clamp(16px, 4vw, 26px);
}

.slider-nav {
  margin-top: 50px;
  margin-left: 20px;
  float: left;
}

/* بدل 100vw خليها 100% */
.hero,
.tri-band,
.headband,
.sectors,
#geoFull {
  width: 100%;
  max-width: 100%;
  overflow: clip;
  /* يمنع أي تجاوز داخلي */
}

/* ====== Partners Section ====== */
.partners {
  width: 100%;
  background: #fff;
  padding: 48px 0 0px;
  overflow: hidden;
}

/* رأس السكشن: شريط زخرفي يسار + نص يمين */
.partners__head {
  width: 100%;
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(240px, 40vw) 1fr;
  align-items: center;
  gap: 24px;
  margin-bottom: 60px;
  padding-inline: clamp(16px, 4vw, 48px);
}

.partners__pattern {
  height: 96px;
  background: linear-gradient(#c8ecea, #c8ecea) padding-box, repeating-linear-gradient(45deg, #c8ecea 0 32px, #9fd3d1 32px 64px) border-box;
  border: 12px solid transparent;
  /* زخرفة ماسية بسيطة */
  --s: 72px;
  --c1: #c8ecea;
  --c2: #ffffff;
  --c3: #5d8b8a;
  --c4: #1aa7a6;
  background: radial-gradient(closest-side, #c8ecea 70%, #0000 71%) 0 0/var(--s) var(--s), conic-gradient(from 45deg, #c2c2c2 90deg, #0000 0) 0 0/var(--s) var(--s), linear-gradient(#c8ecea, #c8ecea);
  mask: radial-gradient(circle at 25% 50%, #000 34%, #0000 35%) 0 0/var(--s) var(--s), radial-gradient(circle at 75% 50%, #000 34%, #0000 35%) calc(var(--s)/2) 0/var(--s) var(--s);
  opacity: .9;
}

.partners__text {
  text-align: right;
  padding-inline: clamp(8px, 2vw, 16px);
}

.partners__title {
  margin: 0 0 8px;
  font: 900 clamp(32px, 4.8vw, 56px)/1.2 "Cairo", "Tajawal", system-ui;
  color: #3c3c3c;
}

.partners__lead {
  margin: 0 0 16px;
  font: 500 18px/1.9 "Tajawal", system-ui;
  color: #5b5b5b;
}

/* زر مشاهدة المزيد */
.partners__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #eee;
  border-radius: 8px;
  color: #333;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid #d8d8d8;
}

.partners__cta .cta__diamond {
  width: 18px;
  height: 18px;
  display: inline-block;
  transform: rotate(45deg);
  border: 3px solid #00A79D;
  border-radius: 4px;
  margin-inline-start: 8px;
}

.partners__cta .cta__arrow svg {
  display: block
}

/* شبكة الشعارات */
.partners__logos {
  margin-top: 32px;
  padding-inline: clamp(16px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

/* كل عمود */
.marquee__col {
  overflow: hidden;
  position: relative;
  /* ارتفاع واحد لكل الأعمدة */
  height: 520px;
  /* background: radial-gradient(40px 40px at 10% 15%, #0000 80%, #00000006 85%), #ffffff; */
  border-radius: 16px;
  padding: 18px;
  /* box-shadow: 0 10px 30px #0000000d inset, 0 10px 24px #00000010; */
}

/* مسار الحركة (يتضاعف JS) */
.marquee__track {
  display: grid;
  gap: 22px;
  animation: scroll-up var(--dur, 28s) linear infinite;
}

@keyframes scroll-up {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }

  /* لأننا بنكرر المحتوى */
}

/* بطاقة الشعار */
.logo {
display: grid;
    place-items: center;
    background: transparent;
    /* border-radius: 12px; */
    /* padding: 18px 16px; */
    border: 1px solid transparent;
    box-shadow: 0 6px 18px transparent;
     min-height: auto ;
}

.logo img {
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(0);
  /* لو عايزها رمادية استخدم grayscale(1) */
}

/* خطوط مقترحة */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;800;900&family=Cairo:wght@700;800;900&display=swap');

:root {
  --bg: #f1efec;
  --ink: #4a403b;
  --ink-2: #6f625a;
  --chip: #8c776a;
  --chip-active: #f3a76d;
  --accent: #1aa7a6;
  --card: #ffffff;
  --radius: 16px;
}

/* أساسيات */
* {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  padding: 0
}

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

body {
  font-family: "Tajawal", system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--ink)
}

/* ====== السكشن ====== */
.media {
  width: 100%;
  padding: 20px 0 48px;
  background-color: #F2EEEE;
  overflow: hidden;
}

/* شريط المثلثات العلوي (اختياري) */
/* .media::before{ content:""; display:block; height:28px; background: conic-gradient(from -45deg at 50% 100%, #E86 0 25%, #D54 0 50%, #E86 0 75%, #D54 0) 0 0/60px 28px repeat-x, conic-gradient(from 45deg at 50% 0, #E86 0 25%, #D54 0 50%, #E86 0 75%, #D54 0) 30px 0/60px 28px repeat-x; opacity:.85; } */
/* شريط زخرفي ماسي يسار */
.media__pattern {
  width: min(680px, 45vw);
  background-color: #ffffff;
  height: 148px;
  margin: 12px 0 8px 0;
  /* background: repeating-linear-gradient(90deg, #80d9d6 0 10px, #bfe6e4 10px 100px) border-box; */
  border: 14px solid transparent;
  position: relative;
  isolation: isolate;
  background-position: center center;
  background-image: url(images/frame1.png);
}

.media__pattern::after {
  content: "";
  position: absolute;
  background-position: center center;
  /* inset:-14px 2px; */
  background-image: url(images/frame1.png);
  opacity: .95;
}

/* هيدر السكشن */
.media__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 clamp(16px, 3.8vw, 48px);
}

.more-chip {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  padding: 0px 15px 0px 18px;
  border-radius: 2px;
  color: #333;
  text-decoration: none;
  font-weight: 800;
}

.more-chip__diamond {
  width: 18px;
  height: 18px;
  display: inline-block;
  transform: rotate(45deg);
  border: 3px solid #00A79D;
  border-radius: 4px;
  margin-inline-start: 12px
}

.more-chip__arrow svg {
  display: block
}

.headline {
  text-align: right;
}

.headline__title {
  margin: 6px 0 12px;
  font: 900 clamp(30px, 5.8vw, 68px)/1.05 "Cairo", "Tajawal", system-ui;
  color: #5a4d46;
}

.headline__badge {
  display: inline-block;
  background: #f7f4f1;
  color: #6b5e56;
  border: 1px solid #e6e2de;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 900;
}

/* عنوان فرعي */
.media__sub {
  margin: 18px clamp(16px, 3.8vw, 48px) 12px;
  font: 900 30px/1.2 "Cairo", "Tajawal", system-ui;
  color: #6a5e57;
}

/* فلاتر */
.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 18px;
  padding: 0 clamp(16px, 3.8vw, 48px);
}

.filter {
  position: relative;
  border: none;
  cursor: pointer;
  padding: 12px 18px;
  border-radius: 6px;
  background: var(--chip);
  color: #fff;
  font-weight: 900;
}

.filter.is-active {
  background: var(--chip-active);
  color: #fff;
}

.filter__mark {
  width: 22px;
  height: 22px;
  display: inline-block;
  margin-inline-start: 10px;
  border: 3px solid #00A79D;
  transform: rotate(45deg);
  border-radius: 4px;
  vertical-align: middle;
}

/* الجاليري: 3 صور فقط */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 1px clamp(-2px, 26.8vw, -41px);
}

@media (max-width: 1000px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

.card {
  position: relative;
  border-radius: 1px;
  overflow: hidden;
  background: #ccc;
  box-shadow: 0 10px 26px #00000018;
}

.card img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .3s ease;
}

.card:hover img {
  transform: scale(1.05)
}

.card .dl {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  background: #c7e7ea;
  color: #2e6063;
  box-shadow: 0 6px 16px #0000001a;
}

.card .dl svg {
  display: block
}

/* زر المزيد أسفل */
.media__more-bottom {
  margin-top: 18px;
  padding: 0 clamp(0px, 3.8vw, 0px);
}

/* ---- ألوان من فيجما تقريبية ---- */
:root {
  --m-ink: #5a4a43;
  /* بني داكن للعناوين */
  --m-ink-2: #6b5d55;
  /* بني أفتح للنصوص الثانوية */
  --m-band: #bfe6e4;
  /* تركواز شريط الزخرفة */
  --m-tab: #8a7a6a;
  /* تبويب غير نشط */
  --m-tab-2: #7c6e61;
  /* تباين بسيط */
  --m-active: #e9b079;
  /* برتقالي للتبويب النشط */
  --m-stamp: #00A79D;
  /* ختم برتقالي صغير */
}

/* تغليف */
.media {
  padding: 0 0 46px;
}

.media .container.media__wrap {
  width: min(1300px, 92%);
  margin-inline: auto
}

/* الصف العلوي */
.media__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* يسار زخرفة + يمين عنوان */
  align-items: end;
  gap: 24px;
  padding-top: 12px;
}

/* عمود اليسار */
.media__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px
}



.more-chip__diamond {
  width: 18px;
  height: 18px;
  display: inline-block;
  transform: rotate(45deg);
  border: 3px solid var(--m-stamp);
  border-radius: 4px;
  margin-inline-start: 12px
}

.more-chip__arrow svg {
  display: block
}

/* عمود اليمين (العنوان) */
.media__right {
  text-align: right
}

.media__title {
  margin: 18px 0 4px;
  font: 900 clamp(38px, 6.4vw, 49px)/1.05 "Cairo", "Tajawal", system-ui;
  font-weight: 700 !important;
  color: var(--m-ink);
  letter-spacing: -.02em;
}

.media__subhead {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 8px;
}

.media__subtext {
  font: 700 clamp(20px, 2.6vw, 29px)/1.1 "Cairo", "Tajawal", system-ui;
  color: var(--m-ink-2);
}

/* الختم البرتقالي الصغير يمين النص */
.media__stamp {
  width: 28px;
  height: 28px;
  transform: rotate(0);
  background: var(--m-stamp);
  border-radius: 4px;
  position: relative;
  display: inline-block;
}

.media__stamp::before,
.media__stamp::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid #fff;
  border-radius: 2px;
  transform: rotate(45deg);
}

.media__stamp::after {
  inset: 10px;
  border-width: 2px;
}

/* التبويبات وسط الشاشة مثل فيجما */
.media__tabs {
  display: flex;

  justify-content: right;
  align-items: center;
  margin: 18px 0 15px;
  direction: rtl;
  padding-inline: clamp(0px, 3.6vw, 0px);
}

.media__tabs .filter {
  position: relative;
  border: none;
  cursor: pointer;
  color: #fff;
  margin-right: 3px;
  font-weight: 900;
  padding: 0px;
  border-radius: 1px;
  display: flex;
  background: var(--m-tab);
  box-shadow: 0 6px 14px #00000010;
  font-family: "Cairo", "Tajawal", system-ui;
}

.media__tabs .filter span {
  padding: 10px;
  text-align: center;
  align-items: center;
}

.media__tabs .filter strong {
  padding: 12px 23px;
  text-align: center;
  align-items: center;
}

.media__tabs .filter img {
  height: 48px;
}

.media__tabs .filter:nth-child(2) {
  background: var(--m-tab-2);
}

.media__tabs .filter:nth-child(4) {
  background: #6f6358;
}

.media__tabs .filter.is-active {
  background: var(--m-active);
  color: #fff;
  /* padding-inline-end: 46px; */
}

.media__tabs .filter.is-active .filter__mark {
  position: absolute;
  inset-inline-end: 10px;
  top: 50%;

  transform: translateY(-50%) rotate(45deg);
  border: 3px solid var(--m-stamp);
  border-radius: 4px;
  background: #fff;
}

/* عنوان "معرض الصور" يسار */
.media__gallery-title {
  margin: 18px 0 21.5px;
  padding-inline: clamp(0px, 3.6vw, 0px);
  text-align: left;
  /* يظهر يسار كما في فيجما */
  direction: rtl;
  font: 900 30px/1.2 "Cairo", "Tajawal", system-ui;
  color: var(--m-ink-2);
}

/* ريسبونسِف */
@media (max-width: 900px) {
  .media__top {
    grid-template-columns: 1fr;
  }

  .media__right {
    order: 2
  }

  .media__left {
    order: 1
  }

  .media__pattern {
    width: 100%
  }

  .media__tabs {
    justify-content: center
  }

  .media__gallery-title {
    text-align: center
  }
}

.mt-10 {
  margin-top: 30px;
}

.layout1 {
  background-image: url(images/layout1.png);
  width: 100%;
  height: 45px;
}

.layout2 {
  background-image: url(images/layout2.png);
  width: 100%;
  height: 45px;
}

/* ====== Reports Section ====== */
:root {
  --reports-bg: #ffffff;
  --reports-panel: var(--nav-bg, #d9efe9);
  /* نفس لون البانل عندك */
  --reports-ink: #5C4B43;
  --reports-muted: #6f625a;
  --reports-radius: 16px;
}

.reports {
  width: 100%;
  padding: 28px 0 48px;
  overflow: hidden;
}

/* رأس السكشن: يمين العنوان / يسار رابط المزيد */
.reports__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 16px;
}

.reports__title {
  margin: 0;
  text-align: right;
  font: 900 clamp(22px, 4.2vw, 32px)/1.1 "Cairo", "Tajawal", system-ui;
  color: var(--reports-ink);
}

.reports__head .more-chip {
  justify-self: start;
}

/* البانل الأساسي */
.reports__panel {
  background: var(--reports-panel);
      width: 1300px;
    margin: auto;
}

.reports__grid-wrap {
  display: grid;
  grid-template-columns: 1.35fr .7fr;
  /* يسار الشبكة / يمين النص */
  gap: 0px;
  align-items: start;
  padding: 29px;
}

/* شبكة البطاقات */
.reports__grid {
  position: relative;
  display: grid;
  align-items: end;
  gap: 0px;
  padding-bottom: 60px;
  /* مكان الشريط الزخرفي */
}

.report-card {
  position: relative;
  display: block;
  height: clamp(190px, 22vw, 240px);
  border-radius: 1px;
  overflow: hidden;
  background: #ccc;
  transition: transform .25s ease, box-shadow .25s ease;
}

.report-card.is-featured {
  height: clamp(260px, 28vw, 340px);
}



.report-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

/* تظليل علوي خفيف للنص */
.report-card__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0 32%, rgba(0, 0, 0, 0) 46%),
    linear-gradient(0deg, rgba(0, 0, 0, .55) 0 18%, rgba(0, 0, 0, 0) 38%);
  pointer-events: none;
}

/* نص أعلى الصورة */
.report-card__top {
  position: absolute;
  inset-inline-end: 12px;
  top: 10px;
  color: #fff;
  text-align: right;
  font: 800 clamp(12px, 1.6vw, 16px)/1.3 "Cairo", "Tajawal", system-ui;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

/* شريط سفلي داكن */
.report-card__bar {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 14px 10px 16px;
  background: rgba(28, 28, 28, .76);
  color: #fff;
  font-family: "Tajawal", system-ui;
}

.report-card__bar strong {
  font-weight: 900;
  letter-spacing: .2px;
}

.report-card__bar span {
  opacity: .92;
  font-weight: 700;
  font-size: .95em;
}

/* الشريط الزخرفي الماسي تحت الشبكة */
.reports__band {
  position: absolute;
  left: -29px;
  right: 0;
  bottom: -30px;
  height: 63px;
  opacity: .9;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(images/layout3.png);
  background-position: center center;
}

/* عمود النص */
.reports__copy {
  text-align: right;
  color: var(--reports-ink);
  margin-right: 28px;
}

.reports__kicker {
  font: 800 clamp(16px, 2.4vw, 22px) "Cairo", "Tajawal", system-ui;
  color: var(--reports-muted);
  margin-bottom: 8px;
}

.reports__headline {
  margin: 0 0 10px;
  font: 900 clamp(22px, 4.8vw, 42px)/1.2 "Cairo", "Tajawal", system-ui;
  color: var(--reports-ink);
}

.reports__lead {
  margin: 0;
  font: 500 clamp(14px, 2vw, 18px)/2 "Tajawal", system-ui;
  color: #4f4a45;
}

/* ريسبونسف */
@media (max-width: 1060px) {
  .reports__grid-wrap {
    grid-template-columns: 1fr;
  }

  .reports__copy {
    order: -1;
    margin-bottom: 10px;
  }
}

@media (max-width: 720px) {
  .reports__grid {
    grid-template-columns: 1fr 1fr;
  }

  .report-card.is-featured {
    grid-column: span 2;
  }
}

@media (max-width: 480px) {
  .reports__grid {
    grid-template-columns: 1fr;
  }

  .report-card.is-featured {
    grid-column: auto;
  }
}

/* ===== ترتيب من اليمين للشمال + أحجام متفاوتة ===== */



/* ترتيب العناصر: الكبير أولاً (يمين) ثم المتوسط (وسط) ثم الصغير (يسار) */
.reports__grid .report-card:nth-child(2) {
  order: -2;
}

/* الكبير */
.reports__grid .report-card:nth-child(3) {
  order: -1;
}

/* المتوسط */
.reports__grid .report-card:nth-child(1) {
  order: 0;
}

/* الصغير  */

/* أحجام الكروت (قيَم تقريبية مثل الـ XD) */
.report-card {
  --h: clamp(180px, 22vw, 230px);
  height: var(--h);
}

.reports__grid .report-card:nth-child(2) {
  /* الكبير (يمين) */
  --h: clamp(260px, 30vw, 340px);
}

.reports__grid .report-card:nth-child(3) {
  /* المتوسط (وسط) */
  --h: clamp(220px, 26vw, 280px);
}



/* لو عايز الإطار أنحف/أغمق: غيّر اللون والمسافة في drop-shadow الثاني */
/* === Fix: keep all three cards on the same row (desktop) === */
.reports__grid {
  /* grid-template-columns: repeat(3, minmax(0, 1fr)); */
  direction: ltr;
  /* زي ما طلبت */
  grid-auto-flow: dense;
  /* يملّي الفراغات بدل ما ينزل صف جديد */
  align-items: end;
}

/* ثبّت الصف الأول للكروت على الديسكتوب */
.reports__grid>.report-card {
  grid-row: 1;
}

/* الكبير يمين (عمود 3) */
.reports__grid>.report-card.is-featured {
    grid-column: 3;
    width: 293px;
    margin-top: -97px !important;
    --h: clamp(260px, 30vw, 340px);

}

/* الصغير يسار (عمود 1) */
.reports__grid>.report-card:nth-of-type(1) {
  grid-column: 1;
  --h: clamp(190px, 22vw, 240px);
}

/* المتوسط في النص (عمود 2) */
.reports__grid>.report-card:nth-of-type(3) {
  grid-column: 2;
  --h: clamp(220px, 26vw, 280px);
}

/* === Responsive: سيّب الترتيب الطبيعي في الشاشات الصغيرة === */
@media (max-width: 720px) {
  .reports__grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
  }

  .reports__grid>.report-card {
    grid-row: auto;
    grid-column: auto;
  }

  .reports__grid>.report-card.is-featured {
    grid-column: 1 / -1;
  }

  /* ياخد السطر */
}

@media (max-width: 480px) {
  .reports__grid {
    grid-template-columns: 1fr;
  }
}

/* —— HUD أيقونة السلايدر —— */
/* ===== X Stream Section ===== */
:root {
  --x-bg: #d2eee8;
  /* لون تحتي لو الصورة مش جاهزة */
  --x-ink: #5C4B43;
  --x-ink-2: #5f5852;
  --x-brand: #1aa7a6;
  --x-chip: #0aa37a;
  --x-surface: #8FCDD1;
  /* بوكس النص */
  --x-radius: 1px;
}

.x-stream {
  position: relative;
  width: 100%;
  padding: clamp(32px, 5vw, 56px) 0 42px;
  overflow: hidden;
  /* background: var(--x-bg); */
  background-image: url(images/Photo.png);
  background-position: center center;
  background-position: cover;
  background-repeat: no-repeat;
}

.x-stream__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .35)),
    url("x-section-bg.jpg") center/cover no-repeat;
  opacity: .9;
  pointer-events: none;
}

.x-stream__head {
  padding-inline: clamp(16px, 5vw, 56px);
}

.x-stream__title {
  margin: 0 0 18px;
  text-align: right;
  font: 700 clamp(26px, 5.6vw, 51px)/1.1 "Cairo", "Tajawal", system-ui;
  color: var(--x-ink);
}

/* مساحة داخلية يمين/شمال للسلايدر */
.x-slider {
  position: relative;
  padding-inline: clamp(16px, 5vw, 56px);
}

/* أيقونة السلايدر أعلى يسار */
.x-slider__hud {
  position: relative;
  height: 0;
  /* عشان تبقى فوق السلايدز */
}

.x-slider__icon {
  position: absolute;
  left: 0;
  top: -14px;
  width: 44px;
  height: 28px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}

.x-slider__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  border: 3px solid #00A79D;
  border-radius: 4px;
  top: 5px;
  left: 12px;
}

/* Swiper */
.x-swiper {
  position: relative;
}

.x-swiper .swiper-wrapper {
  align-items: stretch;
}

.x-card.swiper-slide {
  height: auto;
}

/* الكارت */
.x-card {
  border-radius: var(--x-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .10);
  display: grid;
  grid-template-rows: auto 1fr;
}

/* صورة الكارت */
.x-card__media {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.x-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

.x-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 42%);
  pointer-events: none;
}

/* شارة التاريخ أعلى يسار */
.x-chip {
  position: absolute;
  left: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  color: #eafff7;
  font: 800 12px/1 "Tajawal", system-ui;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.x-chip svg {
  color: #00A79D;
  display: block;
  font-size: 20px;
}

/* عنوان أبيض أعلى يمين */
.x-card__title {
  position: absolute;
  right: 22px;
  top: 12px;
  color: #fff;
  text-align: right;
  font: 800 clamp(14px, 2.2vw, 22px)/1.2 "Cairo", "Tajawal", system-ui;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

/* وترمارك أسفل يسار */
.x-card__mark {
  position: absolute;
  left: 14px;
  bottom: 10px;
  color: #dbe7e6;
  font: 800 12px/1 "Tajawal", system-ui;
}

/* بوكس النص السفلي (مطابق للّون والشكل في XD) */
.x-card__body {
  position: relative;
  background: var(--x-surface);
  color: var(--x-ink-2);
  padding: 18px 18px 20px;
  /* border-radius: 0 0 var(--x-radius) var(--x-radius); */
}


/* نص */
.x-card__body p {
  margin: 0 0 10px;
  line-height: 2;
  font-weight: 700;
}

/* زر "اقرأ المزيد" كتشيب */
.x-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #e9e3db;
  color: #2d2f33;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 900;
}

.x-cta__diamond {
  width: 16px;
  height: 16px;
  display: inline-block;
  transform: rotate(45deg);
  border: 3px solid #00A79D;
  border-radius: 3px;
}

/* أسهم */
.x-nav {
  pointer-events: none;
}

.x-prev,
.x-next {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 42px;
  height: 42px;
  border-radius: 1px;
  border: 0;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
  cursor: pointer;
  pointer-events: auto;
}

.x-prev {
  left: 6px;
}

.x-next {
  right: 6px;
}

.x-prev::before,
.x-next::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin: auto;
  margin-top: 13px;
  border: 3px solid #2d2f33;
  transform: rotate(45deg);
  border-left-color: transparent;
  border-top-color: transparent;
}

.x-prev::before {
  transform: rotate(-135deg);
}

/* ريسبونسف */
@media (max-width: 900px) {
  .x-swiper {
    padding-bottom: 6px;
  }
}

.x-slider {
  position: relative;
  padding-inline: clamp(16px, 5vw, 56px);
  /* البادينج يمين/شمال */
}

.x-slider__hud {
  position: absolute;
  left: clamp(16px, 5vw, 56px);
  top: 0;
  height: 0;
  z-index: 3;
  /* عشان تكون فوق الكروت */
  pointer-events: none;
  /* ديكور فقط */
}

/* كبسولة بيضاء بظل خفيف + ألماسة داخلها + نتوء صغير فوق اليسار */
.x-slider__icon {
  position: absolute;
  top: -18px;
  /* ارفعها فوق الحافة */
  left: 0;
  width: 48px;
  height: 30px;
  background: #ffffff;
  border: 1px solid #e6e2de;
  border-radius: 999px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
}

.x-slider__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  margin: auto;
  transform: rotate(45deg);
  border: 3px solid #00A79D;
  /* لون الألماسة */
  border-radius: 4px;
}

.x-slider__icon::after {
  /* النتوء الصغير أعلى اليسار */
  content: "";
  position: absolute;
  left: 8px;
  top: -8px;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 1px solid #e6e2de;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
}

/* تصغير طفيف على الشاشات الصغيرة */
@media (max-width: 600px) {
  .x-slider__icon {
    width: 44px;
    height: 28px;
    top: -16px;
  }

  .x-slider__icon::before {
    width: 14px;
    height: 14px;
  }

  .x-slider__icon::after {
    left: 7px;
    top: -7px;
    width: 14px;
    height: 14px;
  }
}

/* =========== 1) أيقونة السلايدر — كبسولة نظيفة مع ألماسة =========== */
/* تثبيت الهَد أعلى يسار مع نفس الـ padding الجانبي للسلايدر */
.x-slider {
  position: relative;
  padding-inline: clamp(16px, 5vw, 56px);
}

.x-slider__hud {
  position: absolute;
  inset: 0 auto auto 0;
  height: 0;
  z-index: 5;
  pointer-events: none;
}

/* كبسولة بيضاء ظل خفيف + ألماسة فقط (بدون أي زوائد) */
.x-slider__icon {
  position: absolute;
  left: clamp(16px, 5vw, 56px);
  top: -14px;
  /* طلّعها فوق الحافة شوي */
  width: 46px;
  height: 28px;
  background: #fff;
  border: 1px solid #e6e2de;
  border-radius: 999px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.x-slider__icon::before {
  content: "";
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  border: 3px solid #00A79D;
  /* لون الألماسة */
  border-radius: 4px;
}

/* لو كان عندك كود قديم لـ ::after على .x-slider__icon احذفه أو عطّله: */
.x-slider__icon::after {
  content: none !important;
}

/* =========== 2) شارة التاريخ داخل الصورة =========== */
/* خلي محتوى الشارة LTR عشان التاريخ الإنجليزي يقرأ صح */
.x-chip {
  direction: rtl;
  /* مهم للتاريخ */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  color: #eafff7;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

/* خلّي الأيقونة في طرف الشارة (يمين الشارة لأنها مثبتة أعلى-يسار الكارت) */
.x-chip svg {
  order: 2;
  /* النص أولاً ثم الأيقونة */
  display: block;
  color: #00A79D;
  font-weight: 800;
}

.x-chip b {
  order: 1;
  font-weight: 800;
  font-size: 20px;
  color: #fff;
}

/* (اختياري) صغّر الكبسولة على الشاشات الصغيرة */
@media (max-width:600px) {
  .x-slider__icon {
    width: 44px;
    height: 26px;
    top: -12px;
  }

  .x-slider__icon::before {
    width: 12px;
    height: 12px;
  }
}

/* أخفي الكبسولة القديمة إن وُجدت */
.x-slider__icon {
  display: none !important;
}

/* مجموعة الأزرار أعلى-يسار داخل padding السلايدر */
.x-slider__hud {
  position: absolute;
  left: clamp(16px, 5vw, 56px);
  top: 70px;
  /* طلّعها فوق حافة الكروت شوية */
  z-index: 10;
  display: flex;
  gap: 8px;
}

/* زر دائري أبيض بظل خفيف + حافة ناعمة + دايموند صغيرة خلف السهم */
.x-hud-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid #e6e2de;
  border-radius: 50%;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
  color: #2d2f33;
  cursor: pointer;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}

.x-hud-btn::before {
  content: "";
  /* ألماسة صغيرة ديكورية */
  position: absolute;
  inset: 6px auto auto 12px;
  /* أسفل يسار الزر */
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  border: 2px solid #00A79D;
  border-radius: 3px;
  opacity: .9;
}

.x-hud-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .16);
}

.x-hud-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
}

/* أيقونة السهم */
.x-hud-btn svg {
  display: block;
}

/* موبايل: قرّبها من الكروت وصغّرها قليلاً */
@media (max-width:600px) {
  .x-slider__hud {
    top: -12px;
  }

  .x-hud-btn {
    width: 32px;
    height: 32px;
  }
}

/* أخفي الأيقونة القديمة إن وُجدت */
.x-slider__icon {
  display: none !important;
}

/* HUD: أعلى-يسار وبنفس padding السلايدر */
.x-slider {
  position: relative;
}

/* الأزرار */
.x-hud-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #2d2f33;
  border: 1px solid #e6e2de;
  border-radius: 50%;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
  cursor: pointer;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
  pointer-events: auto !important;
  /* مهم */
}

.x-hud-prev::before {
  content: "";
  position: absolute;
  inset: 6px auto auto 6px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  border: 2px solid #00A79D;
  border-radius: 3px;
  opacity: .9;
}

.x-hud-next::before {
  content: "";
  position: absolute;
  inset: 6px auto auto 13px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  border: 2px solid #00A79D;
  border-radius: 3px;
  opacity: .9;
}

.x-hud-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .16);
}

.x-hud-btn:active {
  transform: none;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
}

.x-hud-btn svg {
  display: block;
}

/* موبايل */
@media (max-width:600px) {
  .x-slider__hud {
    top: -12px;
  }

  .x-hud-btn {
    width: 32px;
    height: 32px;
  }
}

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

/* HUD أعلى-يسار داخل نفس padding السلايدر */
.x-slider {
  position: relative;
  padding-inline: clamp(16px, 5vw, 56px);
}

.x-slider__hud {
  position: absolute;
  left: clamp(16px, 5vw, 56px);
  top: 70px;
  z-index: 10;
  display: flex;
  gap: 5px;
}

/* الدائرة البيضاء */
.x-hud-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid #e6e2de;
  border-radius: 50%;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
  cursor: pointer;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
  pointer-events: auto;
}

/* الألماسة في الوسط (بدل السهم) */
.x-hud-btn svg {
  display: none;
}

/* اخفي السهم لو كنت حاطه */
.x-hud-prev::before {
  content: "";
  width: 14px;
  right: 5px;
  height: 14px;
  transform: rotate(45deg);
  border: 3px solid #00A79D;
  /* لون الألماسة */
  border-radius: 4px;
  background-color: #00A79D;
  top: 8px;
}

.x-hud-next::before {
  content: "";
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  border: 3px solid #00A79D;
  border-radius: 4px;
  background-color: #00A79D;
  top: 8px;
  left: 5px;
}

.z-hud-next::before {
  content: "";
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  border: 3px solid #00A79D;
  border-radius: 4px;
  background-color: #00A79D;
  top: 8px;
  right: 5px;
}

/* أوفست بسيط يخليهم شكلهم زي الديزاين */
.x-hud-prev {
  margin-right: 6px;
  transform: translateY(0);
}

.x-hud-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .16);
}

.x-hud-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
}

/* موبايل تصغير بسيط */
@media (max-width:600px) {
  .x-slider__hud {
    top: -10px;
  }

  .x-hud-btn {
    width: 32px;
    height: 32px;
  }

  .x-hud-btn::before {
    width: 12px;
    height: 12px;
  }

}

/* ===== اشتراك القائمة البريدية (Hero) ===== */
:root {
  --nl-overlay: rgba(0, 0, 0, .35);
  --nl-title: #fff;
  --nl-sub: #f0f3f4;
  --nl-radius: 12px;
  --diamond: #f39d48;
  /* نفس اللون البرتقالي المستخدم عندك */
}

/* شريط زخارف أعلى */
.nl-ornament {
  height: 30px;
  background:
    conic-gradient(from -45deg at 50% 100%, #E86 0 25%, #D54 0 50%, #E86 0 75%, #D54 0) 0 0/60px 30px repeat-x,
    conic-gradient(from 45deg at 50% 0%, #E86 0 25%, #D54 0 50%, #E86 0 75%, #D54 0) 30px 0/60px 30px repeat-x;
  opacity: .9;
}

.nl-hero {
  position: relative;
  width: 100%;
  isolation: isolate;
  background: #0b0c0f;
  /* عند تحميل الصورة */
}

.nl-hero__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, var(--nl-overlay), var(--nl-overlay)),
    url("images/Email.png") center/cover no-repeat;
  filter: saturate(1.02) contrast(1.02);
  z-index: -1;
}

/* المحتوى */
.nl-hero__inner {
  padding: clamp(42px, 7vw, 96px) 0 clamp(36px, 6vw, 72px);
  text-align: center;
  color: var(--nl-title);
}

.nl-title {
  margin: 0 0 8px;
  font: 900 clamp(28px, 6.2vw, 64px)/1.1 "Cairo", "Tajawal", system-ui;
  color: var(--nl-title);
  letter-spacing: -.02em;
  text-shadow: 0 3px 26px rgba(0, 0, 0, .35);
}

.nl-sub {
  margin: 0 0 18px;
  font: 700 clamp(14px, 2vw, 18px)/1.9 "Tajawal", system-ui;
  color: var(--nl-sub);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
}

/* الفورم */
.nl-form {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.nl-input {
  position: relative;
  width: min(720px, 92vw);
}

.nl-input input {
  width: 100%;
  height: 58px;
  border-radius: var(--nl-radius);
  border: 1px solid rgba(255, 255, 255, .65);
  background: rgba(255, 255, 255, .94);
  color: #2d2f33;
  font: 700 16px/1 "Tajawal", system-ui;
  padding: 0 16px 0 64px;
  /* مكان زر السهم يسار */
  box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
}

.nl-input input::placeholder {
  color: #7a8591;
  font-weight: 600;
}

/* زر السهم داخل الحقل (يسار) */
.nl-submit {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: 1px solid #e6e2de;
  border-radius: 8px;
  background: #fff;
  color: #2d2f33;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
}

.nl-submit:hover {
  transform: translateY(-50%) translateY(-1px);
}

/* رسائل قصيرة */
.nl-hint {
  margin: 0;
  color: #ffe0d1;
  font-weight: 700;
  min-height: 20px;
}

/* إخفاء بصري لليبل */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/* ===== فوتر ===== */
:root {
  --f-ink: #eef2f3;
  --f-ink-2: #d7e0e2;
  --f-bg: #5a4d46;
  /* بني داكن */
  --f-accent: #8fcfca;
  /* أخضر مزرق خفيف للأيقونات */
  --f-border: #d6cbbf;
  /* حد علوي */
}

.site-footer {
  background: var(--f-bg);
  direction: rtl;
  color: var(--f-ink);
  padding-top: 10px;
}

.site-footer__topline {
  height: 3px;
  background: linear-gradient(90deg, #e4d8c8 0 40%, #bfa78a 40% 60%, #e4d8c8 60% 100%);
  opacity: .7;
}

/* الأعمدة */
.footer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(18px, 3vw, 40px);
  padding: 28px 0 18px;
  align-items: start;
}

.f-col {
  min-width: 0;
}

.f-title {
  margin: 0 0 10px;
  font: 900 clamp(18px, 3vw, 24px)/1.2 "Cairo", "Tajawal", system-ui;
  color: #eaf3f4;
}

.f-desc {
  margin: 0 0 10px;
  color: var(--f-ink-2);
  font: 700 14px/1.8 "Tajawal", system-ui;
}

.f-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.f-list a {
  color: var(--f-ink-2);
  text-decoration: none;
  font-weight: 700;
}

.f-list a:hover {
  color: #ffffff;
}

/* شبكة ثنائية للوسط */
.f-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
}

/* سوشيال */
.f-social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.soc {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: #8ccbc6;
  color: #0f3f3c;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
}

/* سطر سفلي */
.footer__bottom {
  display: grid;
  direction: ltr;
  grid-template-columns: 1.1fr 1fr auto;
  gap: 18px;
  align-items: end;
  padding: 18px 0 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.footer__legal {
  font: 700 12px/1.8 "Tajawal", system-ui;
  color: #e9e1d8;
}

.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.footer__links a {
  color: #f0e9df;
  text-decoration: none;
  font-weight: 800;
}

.footer__links a:hover {
  color: #fff;
}

.footer__brand-big {
  text-align: right;
  font: 900 clamp(18px, 3vw, 26px)/1.2 "Cairo", "Tajawal", system-ui;
  color: #ffffff;
}

/* ريسبونسف */
@media (max-width: 980px) {
  .footer__cols {
    grid-template-columns: 1fr 1fr;
  }

  .footer__bottom {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer__brand-big {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .footer__cols {
    grid-template-columns: 1fr;
  }

  .f-grid-2 {
    grid-template-columns: 1fr;
  }
}

.mt-16 {
  margin-top: 16px;
}

.mt-1 {
  margin-top: 10px;
}

/* ==========================================================================
   ⬇⬇⬇ Mobile Responsive Patch (Append-only) — أضِفه في آخر ملف الـCSS ⬇⬇⬇
   لا يغيّر أو يحذف أي كود سابق — مجرد تحسينات موبايل فقط
   ========================================================================== */

/* موبايل عام */
@media (max-width: 760px) {

  /* حاويات ومسافات عامة */
  .container {
    width: min(96vw, 560px)
  }

  /* ===== Hero ===== */
  .icon-btn.ghost {
    left: 12px;
    top: 12px;
    width: 40px;
    height: 40px
  }

  .top-right,
  .bottom-right {
    right: 16px
  }

  /* ===== Overlay Panel (النافبار الجانبي) ===== */
  .panel {
    grid-template-columns: 1fr
  }

  .panel__nav {
    order: 2
  }

  /* ===== Headband / قطاع القطاعات ===== */
  .headband {
    padding: 32px 16px
  }

  .headband .container {
    padding-inline: 16px
  }

  /* ===== Rotator (Sectors) =====
     صف الكروت عمود واحد + ارتفاعات مريحة للموبايل */
  .row {
    grid-template-columns: 1fr
  }

  .sectors .card {
    min-height: clamp(230px, 58vw, 360px)
  }

  .mini-label {
    inset: auto 0 12px
  }

  .slider-nav {
    justify-content: center;
    margin: 14px 0 0
  }

  /* ===== Media Center (المركز الإعلامي) ===== */
  .media__header {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 16px
  }

  .media__sub {
    margin: 12px 16px
  }

  .media .gallery {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 16px
  }

  .media .card img {
    height: clamp(220px, 56vw, 360px)
  }

  /* ===== Partners (شركاء النجاح) ===== */
  .partners__head {
    grid-template-columns: 1fr;
    padding-inline: 16px
  }

  .media__pattern {
    width: 100%
  }

  .partners__logos {
    padding-inline: 16px
  }

  /* مرّة 2–3 لوجوه في الصف حسب العرض */
  .partners__logos,
  .partners .marquee {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px
  }

  /* ===== Reports ===== */
  .reports__grid-wrap {
    grid-template-columns: 1fr
  }

  .reports__copy {
    order: -1;
    margin-bottom: 10px
  }

  .reports__grid {
    grid-template-columns: 1fr;
    padding-bottom: 36px
  }

  /* السماح للارتفاعات تبقى أوتو على الموبايل */
  .reports__grid>.report-card {
    grid-column: auto;
    grid-row: auto;
    --h: auto
  }

  .report-card {
    height: auto
  }

  .report-card.is-featured {
    --h: auto
  }

  .reports__band {
    bottom: -22px;
    height: 48px
  }

  /* ===== X-Stream Slider ===== */
  .x-stream__head,
  .x-slider {
    padding-inline: 16px
  }

  /* HUD فوق الكروت بشوية وبنفس البادينج */
  .x-slider__hud {
    left: 16px;
    top: -8px
  }

  .x-card__media {
    aspect-ratio: 16/10
  }

  .x-card__body {
    padding: 14px
  }

  .x-cta {
    font-size: 14px;
    padding: 8px 12px
  }

  /* ===== GEO Full-width ===== */
  .slide-stack {
    aspect-ratio: 16/10
  }
}

/* موبايل أصغر — تضييق مسافات وأحجام أيقونات بسيطة */
@media (max-width: 420px) {

  .headline__title,
  .media__title {
    letter-spacing: 0
  }

  .reports__headline {
    line-height: 1.25
  }

  .x-chip {
    padding: 6px 8px
  }

  .x-hud-btn {
    width: 30px;
    height: 30px
  }
}

/* ====== Core Layout ====== */
.hero-slider {
  position: relative;
  inset: 0;
  width: 100%;
  min-height: 100vh;
  /* فول-سكرين */
  overflow: hidden;
  font-family: 'dubai';
  color: #fff;
}

.hs-track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 600ms ease;
  touch-action: pan-y;
}

.hs-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100vh;
  width: 100%;
  background-size: cover;
}

/* خلفية الصورة عبر متغير CSS */
.hs-bg {
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  /* لمسة بارالاكس خفيفة */
  transition: transform 800ms ease;
  will-change: transform;
}

/* طبقة تغميق */
.hs-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .65) 60%, rgba(0, 0, 0, .75) 100%);
}

/* ====== Content ====== */
.hs-content {
  position: relative;
  z-index: 2;
  max-width: 100%;
  width: 100%;
  margin-inline: auto;
  padding: clamp(16px, 6vw, 48px);
  padding-top: min(45vh, 240px);
  text-align: right;
  float: right;
}

.hs-title {
  margin: 0 0 .5rem;
  font-size: clamp(26px, 4.2vw, 54px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .2px;
}

.hs-lead {
  /* max-width: 1000px; */
  margin: 30px 0px;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.9;
  color: #e9eef4;
}

/* العناصر الثلاثة (زي التصميم: شرطة — العنوان) */
.hs-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 42px);
  align-items: start;
}

.hs-item {
  text-align: right;
}

.hs-dash {
  display: inline-block;
  width: 60px;
  height: 3px;
  background: #fff;
  /* أزرق فاتح */
  border-radius: 3px;
  margin: 0 .6rem;
  vertical-align: middle;
}

.hs-item h3 {
  display: inline-block;
  font-size: clamp(18px, 1.8vw, 24px);
  margin: .4rem 0 .5rem;
  font-weight: 800;
}

.hs-item p {
  margin: 0;
  color: #d9e5ee;
  line-height: 1.8;
  font-size: clamp(14px, 1.3vw, 18px);
}

/* ====== Dots ====== */
.hs-dots {
  position: absolute;
  inset-inline: 0;
  bottom: clamp(14px, 3vh, 30px);
  display: flex;
  justify-content: center;
  gap: 12px;
  z-index: 3;
}

.hs-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: transform .25s ease, background .25s ease;
}

.hs-dot[aria-selected="true"] {
  background: #38b6ff;
  border-color: #38b6ff;
  transform: scale(1.22);
  width: 23px;
  height: 11px;
  border-radius: 8px;
}

/* ====== Arrows ====== */
.hs-nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 30px;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background .25s ease, transform .25s ease;
}

.hs-prev {
  inset-inline-start: 16px;
}

.hs-next {
  inset-inline-end: 16px;
}

.hs-nav:hover {
  background: rgba(0, 0, 0, .65);
  transform: scale(1.06);
}

/* ====== States & Effects ====== */
.hs-slide.is-active .hs-bg {
  transform: scale(1.02);
}

/* ====== Responsive ====== */
@media (max-width: 992px) {
  .hs-features {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .hs-content {
    padding-top: 20vh;
  }
}

@media (max-width: 480px) {
  .hs-nav {
    display: none;
  }

  /* اختفاء الأسهم على الموبايل (سحب بالإصبع) */
}

:root {
  --ts-space: clamp(12px, 2vw, 24px);
  --ts-card-w: min(980px, 86vw);
  --ts-card-pad: clamp(16px, 2.2vw, 28px);
  --ts-zebra: #f29b57;
  /* شريط زخرفي */
  --ts-sky: #d3eef6;
  /* خلفية الكارت */
  --ts-text: #0c1116;
}

.tasks-slider .container {
  max-width: 1280px;
  margin-inline: auto;
  padding: var(--ts-space);
}

.ts-heading {
  margin: 24px auto 8px;
  text-align: center;
  font: 800 clamp(20px, 3vw, 32px)/1.6 "Tajawal", system-ui;
  color: #222;
}

.ts-hero {
  position: relative;
  min-height: 68vh;
  overflow: hidden;
  isolation: isolate;
}

.ts-bg {
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform .9s ease, background-image .6s ease;
}

.ts-dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .33), rgba(0, 0, 0, .55));
}

/* ===== الكروت ===== */
.ts-card {
  position: absolute;
  inset: auto 0 86px 0;
  margin-inline: auto;
  width: var(--ts-card-w);
  display: grid;
  grid-template-columns: 1fr 130px;
  /* محتوى ثم شريط زخرفي يمين */
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .08);
  background: var(--ts-sky);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .35);
  transform-origin: 50% 100%;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .6s ease, filter .6s ease;
  margin-bottom: 200px;
}

/* الرئيسي أعلى، الشفاف أسفل */
.ts-card--main {
  z-index: 3;
  transform: translateY(0) scale(1);
}

.ts-card--ghost {
  z-index: 2;
  transform: translateY(26px) scale(.98);
  opacity: .22;
  filter: blur(.2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
}

/* حالات الأنيميشن */
.ts-card--main.is-leaving {
  transform: translateY(28px) scale(.985);
  opacity: 0;
}

.ts-card--ghost.is-promote {
  transform: translateY(0) scale(1);
  opacity: 1;
  filter: none;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .35);
}

/* داخل الكارت */
.ts-card__body {
  padding: var(--ts-card-pad);
  color: var(--ts-text);
}

.ts-card__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 10px;
}

.ts-card__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: #ffcb7b;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .06);
}

.ts-card__h3 {
  margin: 0;
  font: 800 clamp(18px, 2.2vw, 22px)/1.3 "Tajawal";
}

.ts-card__list {
  margin: 8px auto 0;
  padding: 0 22px;
  font: 500 clamp(14px, 1.6vw, 16px)/2 "Tajawal";
  max-width: 900px;
}

.ts-card__list li {
  margin: 6px 0;
}

.ts-card__stripe {
  position: relative;
  background: var(--ts-zebra);
}

.ts-tribe {
  position: absolute;
  inset: 0;
  background:
    conic-gradient(from 45deg at 25% 25%, #fff 0 25%, transparent 0 100%) 0 0/48px 48px,
    conic-gradient(from 45deg at 75% 75%, #fff 0 25%, transparent 0 100%) 0 0/48px 48px;
  opacity: .9;
  mask: radial-gradient(circle at center, #000 60%, transparent 61%) 0 0/48px 48px repeat;
}

/* ===== عمود الصناديق ===== */
.ts-rail {
  position: absolute;
  left: 16px;
  bottom: 86px;
  z-index: 4;
  display: grid;
  gap: 12px;
  width: clamp(210px, 24vw, 280px);
}

.ts-pill {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: #fff;
  background: rgba(0, 0, 0, .52);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  backdrop-filter: blur(3px);
  cursor: pointer;
  transition: transform .35s, background .25s, opacity .25s, box-shadow .35s;
  opacity: .7;
}

.ts-pill .num {
  font: 800 12px/1 "Tajawal";
  opacity: .85;
}

.ts-pill .txt {
  font: 800 14px/1.2 "Tajawal";
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ts-pill .ico {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .14);
  border-radius: 8px;
}

.ts-pill.is-active {
  background: rgba(0, 0, 0, .78);
  transform: translateY(-6px);
  opacity: 1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* ===== HUD ===== */
.ts-hud {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
}

.ts-counter {
  font: 700 18px/1 "Tajawal";
}

.ts-counter b {
  font-weight: 900;
}

.ts-nav {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .2s, background .25s;
}

.ts-nav:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .22);
}

.dia {
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  background: #10c1a8;
  border: 2px solid rgba(255, 255, 255, .8);
}

/* زخرفة سفلية */
.ts-border {
  position: absolute;
  inset: auto 0 0 0;
  height: 22px;
  background: repeating-linear-gradient(90deg, #e87357 0 28px, #f8a36d 28px 56px);
  z-index: 2;
  mask: linear-gradient(#000 0 0) padding-box, radial-gradient(10px at 14px -7px, transparent 12px, #000 13px) left/56px 28px repeat-x;
}

@media (max-width: 980px) {
  .ts-card {
    width: min(96vw, 760px);
  }

  .ts-rail {
    width: clamp(180px, 40vw, 240px);
    left: 12px;
  }
}

@media (max-width: 680px) {
  .ts-card {
    inset: auto 0 100px 0;
  }

  .ts-rail {
    position: static;
    margin: 10px auto 0;
    grid-auto-flow: column;
    justify-content: center;
  }

  .ts-pill {
    transform: none !important;
    opacity: 1;
  }

  .ts-hud {
    right: 12px;
    bottom: 12px;
  }
}

:root {
  --ts-left: 56px;
  /* مسافة الكروت من اليسار (زي XD) */
  --ts-bottom: 118px;
  /* المسافة من الأسفل */
  --ts-card-w: 980px;
  /* أقصى عرض للكارت */
  --ts-space: clamp(12px, 2vw, 24px);
  --ts-card-pad: clamp(18px, 2.4vw, 28px);
  --ts-zebra: #f29b57;
  /* لون الشريط البرتقالي */
  --ts-sky: #d3eef6;
  /* سماوي الكارت */
  --ts-text: #0c1116;
}

.tasks-slider .container {
  max-width: 1280px;
  margin-inline: auto;
  padding: var(--ts-space);
}

.ts-heading {
  margin: 24px auto 10px;
  text-align: center;
  font: 800 clamp(22px, 3.2vw, 34px)/1.6 "Tajawal", system-ui;
  color: #1f1f1f;
}

.ts-hero {
  position: relative;
  min-height: 68vh;
  overflow: hidden;
  isolation: isolate;
}

.ts-bg {
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform .9s ease, background-image .6s ease;
}

.ts-dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .30), rgba(0, 0, 0, .55));
}

/* ===== الكروت — مُرتكزة يسار زي التصميم ===== */
.ts-card {
  position: absolute;
  left: var(--ts-left);
  bottom: var(--ts-bottom);
  width: min(var(--ts-card-w), calc(100% - (var(--ts-left) * 2)));
  display: grid;
  grid-template-columns: 130px 1fr;
  /* شريط يسار ثم المحتوى */
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .08);
  transform-origin: 50% 100%;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .6s ease, filter .6s ease;
}

.ts-card__stripe {
  position: relative;
}

.ts-tribe {
  position: absolute;
  inset: 0;
  background:
    conic-gradient(from 45deg at 25% 25%, #fff 0 25%, transparent 0 100%) 0 0/48px 48px,
    conic-gradient(from 45deg at 75% 75%, #fff 0 25%, transparent 0 100%) 0 0/48px 48px;
  opacity: .95;
}

.ts-card__body {
  padding: var(--ts-card-pad);
}

.ts-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
}

.ts-card__h3 {
  margin: 0;
  font: 800 clamp(18px, 2.2vw, 22px)/1.3 "Tajawal";
  color: #1b1b1b;
}

.ts-card__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: #ffcb7b;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .06);
}

.ts-card__list {
  margin: 4px 0 0;
  padding: 0 22px;
  font: 500 clamp(14px, 1.6vw, 16px)/2 "Tajawal";
}

/* الرئيسي */
.ts-card--main {
  z-index: 3;
  transform: translateY(0) scale(1);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .35);
  background: var(--ts-sky);
}

.ts-card__stripe--main {
  background: var(--ts-zebra);
}

/* الشبح — غامق وبروز حقيقي */
.ts-card--ghost {
  z-index: 2;
  transform: translateY(64px) scale(.985);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .42);
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .18);
}

.ts-card__stripe--ghost {
  background: #3b3b3b;
}

.ts-card--ghost .ts-tribe {
  filter: grayscale(1) brightness(.85);
  opacity: .55;
}

.ts-card__body--ghost {
  color: rgba(255, 255, 255, .66);
}

.ts-card__body--ghost .ts-card__h3 {
  color: rgba(255, 255, 255, .65);
}

.ts-card__body--ghost .ts-card__icon {
  background: rgba(255, 255, 255, .12);
  box-shadow: none;
}

.ts-card__body--ghost .ts-card__list {
  color: rgba(255, 255, 255, .63);
}

/* حركة الترقّي/الهبوط */
.ts-card--main.is-leaving {
  transform: translateY(66px) scale(.985);
  opacity: 0;
}

.ts-card--ghost.is-promote {
  transform: translateY(0) scale(1);
}

/* المؤشرات يسار */
.ts-rail {
  position: absolute;
  left: calc(var(--ts-left) - 40px);
  bottom: calc(var(--ts-bottom) + 10px);
  z-index: 4;
  display: grid;
  gap: 12px;
  width: clamp(210px, 26vw, 280px);
}

.ts-pill {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  color: #fff;
  background: rgba(0, 0, 0, .75);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: transform .35s, background .25s, opacity .25s;
  opacity: .95;
}

.ts-pill .num {
  font: 800 12px/1 "Tajawal";
  opacity: .9;
}

.ts-pill .txt {
  font: 800 14px/1.2 "Tajawal";
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ts-pill.is-active {
  background: #000;
  transform: translateY(-6px);
}

/* HUD يمين */
.ts-hud {
  position: absolute;
  right: 22px;
  bottom: 26px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
}

.ts-counter {
  font: 700 18px/1 "Tajawal";
}

.ts-counter b {
  font-weight: 900;
}

.ts-nav {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .2s, background .25s;
}

.ts-nav:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .22);
}

.dia {
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  background: #10c1a8;
  border: 2px solid rgba(255, 255, 255, .8);
}

/* زخرفة سفلية */
.ts-border {
  position: absolute;
  inset: auto 0 0 0;
  height: 22px;
  z-index: 2;
  background: repeating-linear-gradient(90deg, #e87357 0 28px, #f8a36d 28px 56px);
  mask: linear-gradient(#000 0 0) padding-box,
    radial-gradient(10px at 14px -7px, transparent 12px, #000 13px) left/56px 28px repeat-x;
}

/* موبايل: وسط الكروت */
@media (max-width: 980px) {
  :root {
    --ts-left: 16px;
    --ts-bottom: 110px;
  }

  .ts-card {
    width: calc(100% - 32px);
  }

  .ts-rail {
    left: 12px;
    width: clamp(180px, 40vw, 240px);
  }
}

@media (max-width: 680px) {
  .ts-card {
    left: 50%;
    transform: translate(-50%, 0) !important;
    width: 94vw;
    grid-template-columns: 100px 1fr;
  }

  .ts-card--ghost {
    transform: translate(-50%, 64px) scale(.99) !important;
  }

  .ts-rail {
    position: static;
    margin: 10px auto 0;
    grid-auto-flow: column;
    justify-content: center;
  }
}


:root {
  --panel: #CDE6E4;
  --card: #E9F3F2;
  --teal: #0AA7A1;
  --orange: #EA6B2D;
  --title: #1F3F3E;
  --sub: #1E6060;
  --shadow: 0 14px 28px rgba(0, 0, 0, .10);
  --cshadow: 0 10px 20px rgba(0, 0, 0, .08);
  --r: 14px;
}

* {
  box-sizing: border-box
}

html,
body {
  margin: 0
}

body {
  background: #F4F6F6;
  font-family: "Tajawal", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color: #222;
  line-height: 1.65;
}

.teams-supervision {
    padding: 26px 0 46px;
    background-image: url(images/vsdvsdv.png);
    /* background-position: center center; */
    background-size: auto;
    background-color: #DBEFF0;
    background-position: left;
    background-repeat: no-repeat;
}

.teams-container {
  width: min(1400px, 94vw);
  margin-inline: auto
}



.teams-tri--top {
  border-bottom: 6px solid var(--orange)
}

.teams-tri--bottom {
  border-top: 6px solid var(--orange)
}

.teams-panel__inner {
  position: relative;
  padding: 18px 0px 10px;
}


.teams-title {
  text-align: right;
  color: var(--title);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 30px);
  margin: 14px 0 8px;
  letter-spacing: .25px;
}

/* السلايدر */
.teams-carousel {
  position: relative;
  padding: 24px 0px 0
}

/* مسافة علشان الأزرار فوق */
.teams-viewport {
  overflow: hidden
}

.teams-track {
  display: flex;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
  will-change: transform
}

.teams-slide {
  min-width: 100%;
  padding: 8px 0 18px
}

/* الأزرار فوق بالمنتصف */
.teams-controls {
  position: absolute;
  top: -57px;
  text-align: left;
  left: 0;
  /* right: 0; */
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 2;
  float: left;
}

.teams-nav {
  position: static;
  /* عشان ما تبقاش على الجوانب */
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* البطاقات */
.teams-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.teams-card {
  /* background: var(--card);
  border: 1px solid rgba(0, 0, 0, .06); */
  border-radius: var(--r);
  /* box-shadow: var(--cshadow); */
  padding: 28px 26px;
  position: relative;
  text-align: right;
  overflow: hidden;
}

.teams-card:after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 220px;
  height: 120px;
  background: radial-gradient(ellipse at 30% 30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 65%);
  transform: rotate(-15deg);
  opacity: .75;
}

.teams-name {
  margin: 0 0 10px;
  color: var(--teal);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 800
}

.teams-role {
  margin: 0 0 6px;
  color: var(--teal);
  font-weight: 700;
  font-size: clamp(16px, 1.55vw, 19px)
}

.teams-sub {
  margin: 0;
  color: var(--sub);
  font-size: clamp(14px, 1.25vw, 16px)
}

/* الدوتس */
.teams-dots {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 6px 0 14px
}

.teams-dots .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .18);
  cursor: pointer;
  transition: .2s
}

.teams-dots .dot.active {
  background: transparent;
  width: 28px;
  height: 11px;
  transform: scale(1.15);
  border-radius: 21px;
}

/* Responsive */
@media (max-width:1024px) {
  .teams-panel__inner {
    padding: 16px 60px 8px
  }

  .teams-carousel {
    padding: 60px 60px 0
  }
}

@media (max-width:860px) {
  .teams-cards {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width:620px) {
  .teams-carousel {
    padding: 56px 54px 0
  }

  .teams-cards {
    grid-template-columns: 1fr;
    gap: 14px
  }

  .teams-panel__inner:before {
    width: 170px;
    height: 170px
  }
}

.st-section {
  padding: 20px;
  background-color: #F0EFEF;
}

.st-tabs {
  margin: auto;
  text-align: center;
  gap: 15px
}

.st-btn {
  font-family: "Tajawal", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  padding: 16px 38px;
  border: 1px solid #DBEFF0;
  border-radius: 1px;
  width: 200px;
  margin-left: 15px;
  background: #DBEFF0;
  cursor: pointer;
  font-weight: 900
}

.st-btn.is-active {
  background: #00A79D;
  color: #fff;
  border-color: #00A79D
}

.st-panels {
  margin-top: 12px
}

.st-panel:not(.is-visible) {
  display: none
}


.mb-20 {
  margin-bottom: 20px;
}

/* ============== News Section ============== */
:root {
  --news-brown-900: #4b382d;
  --news-brown-800: #5a4538;
  --news-brown-700: #6a5141;
  --news-brown-600: #7a6050;
  --news-cream: #efe7e1;
  --news-chip: #3f3027;
  --news-border: #d65a8c;
  /* لمسة وردي مثل الـXD */
  --news-accent: #2f9aa5;
  /* للتأكيد البسيط عند الهوفر */
}

.news-s {
  padding: 32px 0 40px;
  background: #fff;
}

.news-s .container {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 16px;
}

.news-s__head {
  display: flex;
  align-items: center;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.news-s__title {
  margin: 0;
  font-family: "Cairo", "Tajawal", system-ui;
  font-weight: 800;
  font-size: 38px;
  color: var(--news-brown-900);
  letter-spacing: .2px;
}

/* Tabs (CSS-only) */
.news-s__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.news-s__radio {
  display: none;
}

.news-s__tab {
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid var(--news-brown-700);
  color: var(--news-brown-900);
  background: #fff;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
  user-select: none;
  transition: .2s ease;
}

.news-s__tab:hover {
  background: var(--news-cream);
}

#tab-all:checked~label[for="tab-all"],
#tab-latest:checked~label[for="tab-latest"],
#tab-events:checked~label[for="tab-events"],
#tab-culture:checked~label[for="tab-culture"],
#tab-sport:checked~label[for="tab-sport"],
#tab-nature:checked~label[for="tab-nature"],
#tab-reports:checked~label[for="tab-reports"] {
  background: var(--news-brown-700);
  color: #fff;
  border-color: var(--news-brown-700);
}

/* Panels switch (بدون JS) */
.news-s__lists {
  margin-top: 12px;
}

.news-s__list {
  display: none;
  gap: 16px;
}

#tab-all:checked~.news-s__lists #panel-all,
#tab-latest:checked~.news-s__lists #panel-latest,
#tab-events:checked~.news-s__lists #panel-events,
#tab-culture:checked~.news-s__lists #panel-culture,
#tab-sport:checked~.news-s__lists #panel-sport,
#tab-nature:checked~.news-s__lists #panel-nature,
#tab-reports:checked~.news-s__lists #panel-reports {
  display: grid;
}

/* شبكة البطاقات داخل كل لستة */
.news-s__list {
  grid-template-columns: 1fr;
}

/* ====== البطاقة ====== */
.news-card {
  display: flex;
  flex-direction: row-reverse;
  /* عشان الصورة تروح يمين في RTL */
  align-items: stretch;
  gap: 0;
  background: #fff;

  border-radius: 8px;
  overflow: hidden;
}

.news-card+.news-card {
  margin-top: 16px;
}

.news-card__img {
  flex: 0 0 400px;
  /* عرض الصورة */
  max-width: 45vw;
  position: relative;
  overflow: hidden;
}

.news-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 16/11;
}

.news-card__body {
  flex: 1 1 auto;
  background: var(--news-brown-800);
  /* الباكجراوند البنّي */
  color: #fff;
  padding: 16px 18px;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 8px;
}

.news-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  background: transparent;
  color: #fff;
  padding: 12PX 18PX;
  border-radius: 10px;
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
}

.news-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: .9;
  font-size: 16px;
  margin-top: 15px;
}

.news-card__meta .date {
  color: #e9e2dd;
}

.news-card__title {
  margin: 0;
  font-family: "Cairo", "Tajawal", system-ui;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
}

.news-card__excerpt {
  margin: 0;
  color: #f8f5f2;
  font-size: 14px;
  line-height: 1.7;
  opacity: .95;
}

.news-card__more {
  align-self: end;
  justify-self: start;
  display: flex;
  padding: 6px 10px;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: .2s ease;
}

.news-card__more:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
  color: var(--news-accent);
}

/* ====== Responsive ====== */
@media (max-width: 900px) {
  .news-card__img {
    flex-basis: 280px;
  }
}

@media (max-width: 720px) {
  .news-card {
    flex-direction: column;
    /* موبايل: الصورة فوق والنص تحت */
  }

  .news-card__img {
    flex-basis: auto;
    max-width: 100%;
  }

  .news-card__img img {
    aspect-ratio: 16/9;
  }
}

/* Tabs (CSS-only) — الراديوهات خارج مجموعة الأزرار */
.news-s__radio {
  display: none;
}

.news-s__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.news-s__tab {
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid var(--news-brown-700);
  color: var(--news-brown-900);
  background: #fff;
  border-radius: 8px;
  font-size: 14px;
  transition: .2s ease;
}

.news-s__tab:hover {
  background: var(--news-cream);
}

/* إبراز الزر النشِط حسب الراديو المختار */
#tab-latest:checked~.news-s__tabs label[for="tab-latest"],
#tab-events:checked~.news-s__tabs label[for="tab-events"],
#tab-culture:checked~.news-s__tabs label[for="tab-culture"],
#tab-sport:checked~.news-s__tabs label[for="tab-sport"],
#tab-nature:checked~.news-s__tabs label[for="tab-nature"],
#tab-reports:checked~.news-s__tabs label[for="tab-reports"] {
  background: var(--news-brown-700);
  color: #fff;
  border-color: var(--news-brown-700);
}

/* عرض/إخفاء القوائم */
.news-s__lists {
  margin-top: 12px;
}

.news-s__list {
  display: none;
  grid-template-columns: 1fr;
}

/* أظهر البانيل المطابقة للراديو المُفعّل */
#tab-latest:checked~.news-s__lists #panel-latest,
#tab-events:checked~.news-s__lists #panel-events,
#tab-culture:checked~.news-s__lists #panel-culture,
#tab-sport:checked~.news-s__lists #panel-sport,
#tab-nature:checked~.news-s__lists #panel-nature,
#tab-reports:checked~.news-s__lists #panel-reports {
  display: grid;
}

.mr-5 {
  margin-right: 10px;
}

.br-ds {
  border: 1px solid #EF5E50;
}

.br-do {
  border: 1px solid #F0974F;

}

.ml-5 {
  margin-left: 5px;
}

:root {
  --hero-h: 600px;

  /* نص أبيض */
  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, .85);

  /* ظل عام */
  --shadow: 0 20px 60px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .25);

  /* افتراضي لطبقة اللون (يمكن تغييره من الـinline style في الـHTML) */
  --tint-color: #0E6B63;
  /* لون الطبقة */
  --tint-opacity: .35;
  /* 0 → 1 */
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  font-family: "Tajawal", "Cairo", system-ui;
  background: #fff
}

/* ===== Hero base ===== */
.hero {
  position: relative;
  height: 100vh !important;
  color: var(--ink);
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  isolation: isolate;
}

/* طبقة اللون فوق الصورة */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--tint-opacity);
  z-index: 0;
  /* تحت المحتوى وفوق الصورة */
}

/* تغميق تدريجي لإبراز النصوص */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(0, 0, 0, .55) 0%,
      rgba(0, 0, 0, .25) 40%,
      rgba(0, 0, 0, .10) 70%,
      rgba(0, 0, 0, 0) 100%);
  z-index: 0;
  /* يظل أسفل النص أيضًا */
}

.hero__container {
  position: relative;
  height: 100%;
  width: min(100%, 92%);
  margin: 0 auto;
  z-index: 1;
  /* فوق الـ overlays */
}

/* ===== Title ===== */
.hero__title {
  position: absolute;
  right: 0;
  bottom: 140px;
  /* فوق شريط الإحصاءات */
  margin: 0;
  font-family: "Cairo", "Tajawal", sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 5vw, 48px);
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

/* ===== Stats row at bottom ===== */
.hero__stats {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  left: 69%;
  bottom: 34px;
  /* أسفل الصورة */
  transform: translateX(-50%);
  width: min(860px, 92%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}

.stat {
  text-align: center;
  color: var(--ink);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.stat__label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-weight: 800;
  font-size: 16px;
  color: var(--ink-soft);
}

.stat__label::after {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--ink-soft);
  display: inline-block;
  border-radius: 2px;
  opacity: .9;
}

.stat__value {
  display: block;
  margin-top: 8px;
  font-weight: 900;
  font-size: 18px;
  color: #fff;
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
  :root {
    --hero-h: 630px;
  }

  .hero__stats {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 16px;
  }

  .hero__title {
    bottom: 160px;
  }
}

@media (max-width: 560px) {
  :root {
    --hero-h: 650px;
  }

  .hero__stats {
    grid-template-columns: 1fr;
    width: 92%;
  }

  .hero__title {
    right: 6px;
    bottom: 180px;
    font-size: clamp(26px, 7vw, 36px);
  }
}

:root {
  --container: 1160px;
  --gutter: 24px;

  --ink: #2b2b2b;
  --muted: #5C4B43;
  --paper: #ffffff;
  --bg: #ffffff;
  --accent: #4c3c34;
  /* لون العنوان الكبير */
  --teal-200: #b7ddd6;
  /* يمكنك مزامنته مع بقية الموقع */

  --radius: 12px;
  --shadow: 0 14px 30px rgba(18, 38, 46, .08), 0 4px 10px rgba(18, 38, 46, .06);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Tajawal", "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height: 1.75;
}

/* ===== Section ===== */
.about {
  padding: clamp(32px, 6vw, 72px) 0;
  background: var(--paper);
}

.container {
  width: min(var(--container), 92%);
  margin-inline: auto;
}

/* ===== Top Grid (text left / image right) ===== */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 520px;
  /* نص  / صورة يمين */
  gap: 32px;
  align-items: start;
  margin-bottom: 36px;
}

.about__text {
  text-align: right;
}

.about__title {
  margin: 0 0 8px;
  font-family: "Cairo", "Tajawal", sans-serif;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.25;
  font-size: clamp(26px, 4.2vw, 44px);
}

.about__subtitle {
  font-weight: 800;
  color: #6b5a52;
  margin-bottom: 14px;
}

.about__lead {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

.about__media {
  margin: 0;
  position: relative;
}

.about__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: var(--shadow);
}

/* ===== Body text under the grid ===== */
.about__body {
  max-width: 100%;
  text-align: right;
  margin-inline: 0;
  color: var(--ink);
}

.about__body p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 16px;
}

.about__section-head {
  margin: 24px 0 8px;
  font-weight: 900;
  color: var(--accent);
  font-size: 20px;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .about__grid {
    grid-template-columns: 1fr 440px;
  }
}

@media (max-width: 820px) {
  .about__grid {
    grid-template-columns: 1fr;
    /* عمودي */
  }

  .about__media {
    order: -1;
    /* الصورة أولاً على الموبايل */
    margin-bottom: 12px;
  }

  .about__body {
    max-width: 100%;
  }
}

.pops {
  position: absolute;
  width: 400px !important;
  float: right;
  height: 63px !important;
  right: -100px;
  top: -32px;
}

:root {
  /* ألوان منسوبة لفيجما (يمكن تعديلها إن كان لديك أكواد HEX دقيقة) */
  --paper: #fff;
  --bg: #fff;
  --ink: #2b2b2b;
  --title: #4c3c34;

  --mint-100: #CFE7DF;
  /* حد الصندوق/التبويبات */
  --mint-200: #B7DDD6;
  /* تبويب نشط + زر الإرسال */
  --mint-300: #9FCFC4;

  --input-bg: #E7E7E7;
  /* خلفية الحقول الرمادية */
  --input-bd: #D7D7D7;
  /* حدود خفيفة */

  --radius: 10px;
  --shadow: 0 12px 26px rgba(18, 38, 46, .08), 0 3px 10px rgba(18, 38, 46, .06);
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Tajawal", "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height: 1.75;
}

.contact {
  padding: 30px 0 80px;
}

.wrap {
  width: min(990px, 92%);
  margin-inline: auto;
}

.heading {
  margin: 0 0 18px;
  font-family: "Cairo", "Tajawal", sans-serif;
  font-weight: 900;
  font-size: clamp(22px, 3.5vw, 34px);
  color: var(--title);
  text-align: right;
}

/* ===== صندوق الرسائل ===== */
.contact-box {
  position: relative;
  background: #fff;
  border: 2px solid var(--mint-100);
  border-radius: var(--radius);
  padding: 18px 14px 14px;
  box-shadow: var(--shadow);
}

/* تبويبات بارزة على حافة الإطار العليا يمين */
.tabs {
  position: absolute;
  inset-inline-end: 12px;
  /* يمين */
  top: -18px;
  /* خارج الإطار قليلًا */
  display: flex;
  gap: 8px;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  height: 32px;
  border-radius: 8px;
  border: 2px solid var(--mint-100);
  background: #E7E7E7;
  /* غير نشط رمادي */
  color: #374847;
  font-weight: 800;
  font-size: 13px;
  cursor: default;
}

.tab.is-active {
  background: var(--mint-200);
  border-color: var(--mint-100);
  color: #1e3f3c;
}

.diamond {
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: #2c8e89;
  border-radius: 2px;
}

/* ===== الشبكة ===== */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

/* ===== الحقول الرمادية (بالملّي) ===== */
.field {
  width: 100%
}

.field--full {
  grid-column: 1 / -1;
}

.input {
  width: 100%;
  height: 40px;
  /* ارتفاع صغير مثل التصميم */
  background: var(--input-bg);
  border: 1px solid var(--input-bd);
  border-radius: 6px;
  padding: 8px 12px;
  text-align: right;
  color: var(--ink);
  font-size: 14px;
  outline: none;
}

.textarea {
  height: 110px;
  resize: vertical;
  padding-top: 10px;
}

/* Placeholder يمين */
.input::placeholder {
  color: #6f6f6f;
  opacity: .95;
  text-align: right;
}

/* تركيز خفيف */
.input:focus {
  border-color: var(--mint-300);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--mint-300) 22%, transparent);
}

/* ===== زر الإرسال يسار الصندوق ===== */
.actions {
  margin-top: 8px;
  text-align: left;
  /* يسار في RTL */
}

.send-btn {
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  border: 0;
  background: var(--mint-200);
  color: #204441;
  font-weight: 800;
  cursor: pointer;
}

.send-btn:active {
  transform: translateY(1px);
}

/* ===== Responsive ===== */
@media (max-width:760px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .actions {
    text-align: right;
  }

  /* على الموبايل لو حابب يبقى يمين */
}

.bg-beda {
  background-color: #00A79D;
}

:root {
  --hero-h: 560px;

  --ink: #fff;
  --ink-soft: rgba(255, 255, 255, .9);
  --title-shadow: 0 2px 10px rgba(0, 0, 0, .45);

  --tint-color: #0E6B63;
  /* يمكن تغييرها من الـinline style */
  --tint-opacity: .30;

  --btn-bg: rgba(255, 255, 255, .14);
  --btn-bd: rgba(255, 255, 255, .35);

  --triangle: #17b1a9;
  /* لون المثلثات */
  --bar: #3d2f2a;
  /* لون الشريط أسفل الخريطة */
}

/* Reset بسيط */
* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  font-family: "Tajawal", "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: #fff;
}

/* ===== Find Us (map hero) ===== */
.findus {
  position: relative;
  height: var(--hero-h);
  color: var(--ink);
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  isolation: isolate;
}

/* طبقة لون */
.findus::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--tint-opacity);
  z-index: 0;
}

/* تغميق عمودي خفيف لإبراز النص */
.findus::after {
  content: "";
  position: absolute;
  inset: 0;

  z-index: 0;
}

.findus__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: 980px;
  margin-inline: auto;

  /* توسيط رأسي/أفقي */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

/* عنوان */
.findus__title {
  margin: 0 0 4px;
  font-family: "Cairo", "Tajawal", sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 4.8vw, 48px);
  color: var(--ink);
  text-shadow: var(--title-shadow);
}

/* سطر الإحداثيات */
.findus__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-weight: 800;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .18);
  backdrop-filter: blur(2px);
}

.findus__meta .pin {
  color: #bfe9e3
}

/* زر الاتجاهات */
.findus__btn {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: #eaf7f5;
  text-decoration: none;
  font-weight: 900;
  backdrop-filter: blur(3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}

.findus__btn .diamond {
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: #21c0b8;
  border-radius: 2px;
}

/* ===== Decorative triangle strip under the hero ===== */
.pattern-strip {
  position: relative;
  width: 100%;
  height: 56px;
  background: var(--bar);
  /* خطان رفيعان أعلى الشريط */
  box-shadow:
    inset 0 4px 0 0 #4b3b34,
    inset 0 8px 0 0 #2f2521;
}

/* صف المثلثات الفيروزية */
.pattern-strip::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -28px;
  height: 28px;
  /* SVG pattern مكرر أفقياً */
}

/* ===== Responsive ===== */
@media (max-width: 760px) {
  :root {
    --hero-h: 520px;
  }

  .findus__btn {
    padding: 8px 12px;
  }
}

/* === Download cards (small boxes) === */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  /* عمودان */
  gap: 22px;
}

.dl-card {
  background: #fff;
  border: 1px solid #E7E7E7;
  border-radius: 1px;
  box-shadow: 0 8px 22px rgba(18, 38, 46, .06);
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dl-title {
  margin: 0;
  font-family: "Cairo", "Tajawal", sans-serif;
  font-weight: 900;
  font-size: 18px;
  color: #3b302b;
  /* قريب من البني في التصميم */
}

.dl-desc {
  margin: 0;
  color: #011616;
  font-size: 14px;
  line-height: 1.7;
}

.dl-meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.dl-date {
  font-size: 13px;
  color: #011616;
}

/* زر التحميل + الدايموند */
.dl-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: 0;
  /* نسيبه صفر */
}

.dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 1px;
  border: 1px solid #A7D3CC;
  /* إطار نعنائي خفيف */
  background: #B7DDD6;
  /* نعنائي فاتح مثل فيجما */
  color: #123e3a;
  font-weight: 800;
  text-decoration: none;
}

.dl-btn svg {
  display: block
}

.dl-diamond {
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  background: #10b3aa;
  /* دايموند */
  border-radius: 2px;
}

/* Hover لطيف */
.dl-card:hover {
  box-shadow: 0 12px 30px rgba(18, 38, 46, .08);
  border-color: #e9eeee;
}

@media (max-width: 820px) {
  .dl-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== ماركيه رأسي 4×4 فقط ===== */
.vmarquee {
  --gap-x: clamp(24px, 3.5vw, 56px);
  --gap-y: clamp(18px, 2.5vw, 36px);
  --logo-h: clamp(48px, 8vw, 141px);
  --rows: 4;
  --pad: 12px;
  max-width: 1200px;
  margin: auto;  --dur: 22s;
  margin-top: 50px;
  position: relative;
  overflow: hidden;

  /* ارتفاع السكشن = ارتفاع 4 صفوف + الفراغات + التبطين */
  height: calc(var(--rows) * var(--logo-h) + (var(--rows) - 1) * var(--gap-y) + 2 * var(--pad));
  padding-block: var(--pad);

  /* تدرّج حواف بسيط */
  mask-image: linear-gradient(#0000, #000 8%, #000 92%, #0000);
}

/* المسار المتحرك لأعلى (بدون إيقاف عند الهوفر) */
.vmarquee__track {
  display: flex;
  flex-direction: column;
  animation: vscroll var(--dur) linear infinite;
  will-change: transform;
}

@keyframes vscroll {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }

  /* لأننا مكررين الشبكة مرتين */
}

/* شبكة 4 أعمدة × 4 صفوف بمحاذاة كاملة */
.vgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 4 صور في الصف */
  justify-items: center;
  align-items: center;
  gap: var(--gap-y) var(--gap-x);
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo img {
  height: var(--logo-h);
  width: auto;
  object-fit: contain;
  display: block;
}

/* 4 أعمدة بعرض المحتوى فقط + توزيع متساوي بدون فراغ داخلي كبير */
.vgrid {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  /* بدل 1fr */
  justify-content: space-between;
  /* يوزّع الأعمدة على عرض السكشن */
  column-gap: clamp(12px, 2vw, 28px);
  /* مسافة أفقية صغيرة ومتحكمة */
  row-gap: clamp(12px, 2vw, 24px);
  /* مسافة رأسية بين الصفوف */
  align-items: center;
  padding: 0;
  /* لو كان فيه padding سابق */
}

/* خلي العنصر على قد اللوجو فقط (مافيش عرض 100%) */
.logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.logo img {
  height: var(--logo-h);
  /* نفس المتغير اللي عندك */
  width: auto;
  object-fit: contain;
  display: block;
}

/* صفوف 4 أعمدة بمسافات صغيرة جدًا بين العناصر */
.vgrid {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: space-evenly;
  column-gap: 0px;
  row-gap: 0px;
  padding: 0;
}

.logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.logo img {
  height: var(--logo-h);
  width: auto;
  object-fit: contain;
  display: block;
}

/* لو فيه حواف زيادة من السكشن نفسه، صفّرها */
.vmarquee {
  padding-inline: 0;
}

/* وضعية الحاوية */
#teamsCarousel {
  position: relative;
}

/* الزرين */
.teams-nav {
  position: absolute;
  top: 18px;
  /* عدّلها حسب مكانك المفضل */
  inset-inline-start: 18px;
  /* RTL-friendly: يبدأ من اليمين في العربية */
  z-index: 5;

  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .06),
    0 8px 20px rgba(0, 0, 0, .04);
  display: grid;
  place-items: center;
  cursor: pointer;

  transition: transform .12s ease, box-shadow .2s ease, background-color .15s ease;
}

.teams-nav+.teams-nav {
  margin-inline-start: 10px;
}

/* مسافة بين الزرين */

/* حالة التحويم والضغط والتركيز */
.teams-nav:hover {
  box-shadow:
    0 3px 10px rgba(0, 0, 0, .08),
    0 10px 24px rgba(0, 0, 0, .06);
}

.teams-nav:active {
  transform: scale(.96);
}

.teams-nav:focus-visible {
  outline: 3px solid #22c55e22;
  /* هالة خضراء خفيفة */
  outline-offset: 2px;
}

/* أيقونة السهم داخل الزر */
.teams-nav__icon {
  width: 18px;
  height: 18px;
  display: block;
  color: #2B2C30;
  /* لون السهم */
}

/* لعكس الاتجاه بين السابق/التالي */
.teams-nav--prev .teams-nav__icon {
  transform: scaleX(-1);
}

/* حالة تعطيل إن لزم */
.teams-nav[disabled],
.teams-nav[aria-disabled="true"] {
  opacity: .4;
  pointer-events: none;
}

.teams-viewport {
  overflow: hidden;
}

.teams-track {
  display: flex;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.teams-slide {
  flex: 0 0 100%;
  min-width: 100%;
  padding: 16px 0;
}

.date-filter-btn {
  display: flex;
  flex-direction: row-reverse;
  /* لأن اللغة عربية */
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #B7E0E2;
  /* لون الخلفية الأزرق الفاتح */
  color: #222;
  /* لون النص */
  font-family: "Cairo", sans-serif;
  font-size: 20px;
  border: none;
  border-radius: 1px;
  padding: 5px 25px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.date-filter-btn:hover {
  background-color: #9ed4e3;
}

.date-filter-btn .icon {
  width: 26px;
  height: 26px;
}

.headband h2,
.headband h1 {
  color: #5C4B43 !important;
}

.hero-slider .hs-dots,
.hero-slider .hs-nav {
  display: none !important;
}

.hero-slider .hs-slide {
  /* يضمن أن العنصر الواحد يتمدّد كبانر */
  min-height: 70vh;
  /* عدّل الارتفاع كما تريد */
  position: relative;
  display: grid;
  place-items: center;
}

/* استبدال الزجزاج بصورة تحت العنصر النشط بس */
.mega__head::after {
  background: none !important;
  /* نلغي الجريدينت القديم */
}

.mega__item.active .mega__head::after {
  background: url('images/header.png') center/auto var(--zigzag-h) repeat-x !important;
  /* ملاحظات:
     - غيّر المسار لملفك.
     - height بيتاخد من --zigzag-h.
     - repeat-x علشان يمتد عرضياً. */
  opacity: 1;
}



/* العنوان نفسه */
.mega__head .mega__title {
  display: inline-block;
  /* عشان التحويل يشتغل من غير ما يزق العناصر */
  transition: transform .25s ease;
  will-change: transform;
}

/* الحركة عند الهوفر على الزر */
.mega__head:hover .mega__title {
  transform: translateX(-6px);
  /* يتحرك سنة ناحية الشمال */
}

/* لسهولة الوصول بالكيبورد */
.mega__head:focus-visible .mega__title {
  transform: translateX(-6px);
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  .mega__head .mega__title {
    transition: none;
  }
}

.mega__head a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .25s ease;
  will-change: transform;
}

.mega__head a:hover,
.mega__head a:focus-visible {
  transform: translateX(-6px);
}


/* العنوان داخل زر الميجا */
.mega__head .title {
  display: inline-block;
  /* لازم عشان الـtransform يشتغل من غير ما يزق الليّاوت */
  transition: transform .25s ease;
  will-change: transform;
}

/* الحركة عند الوقوف على الزر */
.mega__head:hover .title,
.mega__head:focus-visible .title {
  transform: translateX(-6px);
  /* حرّكة بسيطة ناحية الشمال */
}

.mega__submenu a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .2s ease;
  will-change: transform;
}

.mega__submenu li:hover>a,
.mega__submenu a:focus-visible {
  transform: translateX(-6px);
}

.icon-tile {
  inline-size: var(--icon-size);
  block-size: var(--icon-size);
  background: var(--icon-bg);
  color: var(--icon-fg);
  border-radius: var(--icon-radius);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  user-select: none;
}

/* النص داخل الأيقون */
.icon-tile__label {
  font-family: var(--icon-font);
  font-weight: 500;
  /* زي الـFigma تقريبا */
  font-size: calc(var(--icon-size) * 0.36);
  /* يكيّف نفسه مع المقاس */
  line-height: 1;
  letter-spacing: .5px;
}

/* تأثير بسيط عند الهوفر – اختياري */
.icon-tile:hover {
  transform: translateY(-2px);
  transition: transform .2s ease;
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  .icon-tile {
    transition: none;
  }
}

:root {
  /* تقدر تغيّرهم حسب التصميم */
  --icon-size: 42px;
  /* مقاس المربع */
  --icon-bg: #E4F7F7;
  /* الخلفية الفاتحة */
  --icon-fg: #6b5b53;
  /* لون النص (بني/رمادي) */
  --icon-radius: 8px;
  /* تدوير الزوايا */
  --icon-font: "Tajawal", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* الحاوية اللي بتموضع الزرين */
.hero-controls {
  position: absolute;
  top: 28px;
  inset-inline-start: 40px;
  /* يدعم RTL/LTR */
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 50;
}

/* لو الصفحة RTL وحاببها تبقى ناحية اليمين */
[dir="rtl"] .hero-controls {
  inset-inline-start: auto;
  inset-inline-end: 12px;
}

/* نلغي تموضع الـabsolute من الزر القديم جوه الحاوية */
.hero-controls #menuToggle {
  position: static !important;
  inset: auto !important;
  margin: 0;
}

/* شكل زر EN يطابق الزر الزجاجي */
.en-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  /* border-radius: 10px; */
  border: 1px solid rgba(255, 255, 255, .35);
  background-color: var(--icon-bg);
  backdrop-filter: blur(14px);
  color: #6b5b53;
  text-align: center;
  text-decoration: none;
  font: 600 16px/1 "Tajawal", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  transition: transform .25s ease, background-color .25s ease;
}

.en-btn:hover,
.en-btn:focus-visible {
  transform: translateY(-2px);
  background-color: rgba(255, 255, 255, .12);
}

.en-btn span {
  pointer-events: none;
  font-size: 26px;
}









.hero-media {
  position: relative;
  padding: 0;
  margin: 0;
  background: #000;
  color: #fff;
  overflow: clip;
}

.hm-stage {
  position: relative;
  width: 100%;
  height: 110vh;
  /* margin: clamp(16px, 4vw, 32px) auto; */

  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  aspect-ratio: 16/9;
  background: #000;
}

.hm-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hm-stage--images {
  position: relative;
  background: #0a0a0a;
}

.hm-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}

.hm-image.is-active {
  opacity: 1;
}

/* ===== Hero Media (Video -> Text Slides) ===== */
.hero-media {
  position: relative;
  background: #000;
  color: #fff;
  overflow: clip;
}



.hm-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* مرحلة النص */
.hm-stage--text {
  background: #0b0c0f;
}

.hm-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.05);
}

.hm-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 28px);
  background: radial-gradient(140% 110% at 50% 100%, transparent 45%, rgba(0, 0, 0, .45) 100%);
}

.hm-slide {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(12px, 3vw, 28px);
  align-items: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
}

.hm-slide.is-active {
  opacity: 1;
  transform: none;
}

.hm-col {
  display: grid;
  gap: 18px;
  align-content: center;
}

.hm-col--left {
  justify-items: flex-start;
  padding-inline: clamp(8px, 2vw, 20px);
}

.hm-col--right {
  justify-items: flex-end;
  padding-inline: clamp(8px, 2vw, 20px);
}

.hm-kpi {
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: 12px 14px;
  max-width: min(420px, 90%);
}

.hm-kpi__value {
  margin: 0 0 4px 0;
  font: 900 clamp(22px, 3.6vw, 36px)/1.1 "Cairo", "Tajawal", system-ui;
}

.hm-kpi__label {
  margin: 0;
  font: 600 clamp(12px, 2vw, 16px)/1.4 "Cairo", "Tajawal", system-ui;
  opacity: .9;
}

.hm-kpi__badge {
  display: inline-grid;
  place-items: center;
  margin-inline-start: 10px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #ef7d31;
  font-weight: 700;
}

/* تكيّف الجوال */
@media (max-width: 900px) {
  .hm-slide {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .hm-col--left,
  .hm-col--right {
    justify-items: center;
    text-align: center;
  }
}

/* ===== Hero Media (Video -> HTML Slides) ===== */
.hero-media {
  background: #000;
  color: #fff;
  overflow: clip;
}

.hm-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hm-stage--text {
  position: relative;
}

.hm-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hm-overlay {
  position: absolute;
  inset: 0;
  padding: clamp(16px, 3vw, 28px);
  background: radial-gradient(140% 110% at 50% 100%, transparent 45%, rgba(0, 0, 0, .45) 100%);
}

.hm-slide {
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
  position: absolute;
  inset: 0;
}

.hm-slide.is-active {
  opacity: 1;
  transform: none;
  position: absolute;
  inset: 0;
}

.hm-grid {
  height: 100%;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
}

.hm-col {
  display: grid;
  gap: 16px;
}

.hm-col--left {
  justify-items: start;
}

.hm-col--right {
  justify-items: end;
  text-align: right;
}

.hm-head {
  margin: 0 0 8px;
  font: 800 clamp(20px, 3.6vw, 34px)/1.2 "Cairo", "Tajawal", system-ui;
}

.hm-sub {
  display: inline-block;
  margin-top: 6px;
  font: 900 clamp(24px, 4vw, 40px)/1.15 "Cairo", "Tajawal", system-ui;
}

.hm-kpi {
  background: rgba(0, 0, 0, .36);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: 12px 14px;
  max-width: min(440px, 95%);
}

.hm-kpi--right {
  justify-self: end;
}

.hm-kpi__value {
  margin: 0 0 4px;
  font: 900 clamp(22px, 3.6vw, 36px)/1.1 "Cairo", "Tajawal", system-ui;
}

.hm-kpi__label {
  margin: 0;
  font: 600 clamp(12px, 2vw, 16px)/1.5 "Cairo", "Tajawal", system-ui;
  opacity: .92;
}

.hm-kpi__badge {
  display: inline-grid;
  place-items: center;
  margin-inline-start: 10px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .hm-grid {
    grid-template-columns: 1fr;
  }

  .hm-col--left,
  .hm-col--right {
    justify-items: center;
    text-align: center;
  }

  .hm-kpi--right {
    justify-self: center;
  }
}

/* === Fix slide layout to stick left/right edges === */

/* بلاش سنتر في الـoverlay */
.hm-overlay {
  display: block;
  /* كان grid + place-items:center */
  padding: 0;
  /* هنحكم الجاترز من الـgrid نفسه */
}

/* الـslide لازم يملى الستيج كله */
.hm-slide {
  position: absolute;
  inset: 0;
  display: block;
  /* مش grid هنا؛ الجريد جوّه */
}

/* الجريد الداخلي بعرض كامل، مع جاترز خفيفة فقط */
.hm-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* عمود يسار ويمين متساويين */
  align-items: center;
  /* الجاترز (حافة داخلية بسيطة يمين/شمال) */
  padding-inline: clamp(16px, 3.5vw, 40px);
  padding-block: clamp(12px, 2.5vw, 28px);
}

/* العمود الشِمال: لاصق في الشِمال */
.hm-col--left {
  justify-self: start;
  /* يمسك أقصى الشمال */
  justify-items: start;
  text-align: left;
  /* النص داخل الكروت يبقى طبيعي */
}

/* العمود اليمين: لاصق في اليمين */
.hm-col--right {
  justify-self: end;
  /* يمسك أقصى اليمين */
  justify-items: end;
  text-align: right;
}

/* الكروت نفسها ما تكبرش زيادة وتسمح بالتلاصق على الحواف */
.hm-kpi {
  max-width: min(440px, 92%);
}

/* في الشاشات الصغيرة: عمود واحد سنتر */
@media (max-width: 900px) {
  .hm-grid {
    grid-template-columns: 1fr;
    padding-inline: clamp(12px, 5vw, 24px);
  }

  .hm-col--left,
  .hm-col--right {
    justify-self: center;
    justify-items: center;
    text-align: center;
  }
}

/* ===== Title top-right ===== */
.hm-header {
  position: absolute;
  top: clamp(60px, 3vh, 36px);
  right: clamp(16px, 3vw, 40px);
  text-align: right;
  margin: 0;
  z-index: 2;
}

.hm-header__sup {
  display: block;
  font: 700 clamp(12px, 1.8vw, 18px)/1.3 "Cairo", "Tajawal", system-ui;
  opacity: .9;
  margin-bottom: 6px;
}

.hm-header__title {
  display: block;
  font: 900 clamp(24px, 4.6vw, 46px)/1.15 "Cairo", "Tajawal", system-ui;
}

/* ===== Bottom blocks: left & right stuck to edges ===== */
.hm-slide {
  position: absolute;
  inset: 0;
}

.hm-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  /* انزلهم لتحت */
  padding: 0 clamp(16px, 3.5vw, 40px) clamp(22px, 6vh, 60px);
  gap: clamp(12px, 3vw, 28px);
}

.hm-col {
  display: grid;
  gap: clamp(12px, 2.6vw, 22px);
}

.hm-col--left {
  justify-self: start;
  justify-items: start;
  text-align: left;
}

.hm-col--right {
  justify-self: end;
  justify-items: end;
  text-align: right;
}

/* ===== KPI look: no border, no shadow, clean text ===== */
.hm-kpi {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: min(480px, 92%);
}

.hm-kpi--right {
  justify-self: end;
}

.hm-kpi__value {
  margin: 0 0 4px;
  font: 900 clamp(22px, 3.6vw, 36px)/1.1 "Cairo", "Tajawal", system-ui;
  white-space: nowrap;
}

.hm-kpi__label {
  margin: 0;
  font: 600 clamp(12px, 2vw, 16px)/1.5 "Cairo", "Tajawal", system-ui;
  opacity: .95;
}

/* icons as small images you provide */
.hm-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  vertical-align: -4px;
  margin-inline-start: 8px;
  /* في RTL: الأيقونة قبل الرقم بمسافة صغيرة */
}

/* Mobile: stack center */
@media (max-width: 900px) {
  .hm-grid {
    grid-template-columns: 1fr;
    align-items: end;
    padding: 0 clamp(12px, 6vw, 24px) clamp(18px, 6vh, 40px);
  }

  .hm-col--left,
  .hm-col--right {
    justify-self: center;
    justify-items: center;
    text-align: center;
  }
}

.hero-media {
  background: #000;
  color: #fff;
  overflow: clip;
}

.hm-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hm-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hm-overlay {
  position: absolute;
  inset: 0;
}

/* شريحة واحدة فقط تظهر */
.hm-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}

.hm-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.hm-slide[hidden] {
  display: none !important;
}

/* عنوان أعلى اليمين */
.hm-header {
  position: absolute;
  top: clamp(16px, 3vh, 36px);
  right: clamp(16px, 3vw, 40px);
  text-align: right;
  margin: 0;
  z-index: 3;
}

.hm-header__sup {
  display: block;
  font: 700 clamp(12px, 1.8vw, 18px)/1.3 "Cairo", "Tajawal", system-ui;
  opacity: .9;
  margin-bottom: 6px;
}

.hm-header__title {
  display: block;
  font: 900 clamp(24px, 4.6vw, 46px)/1.15 "Cairo", "Tajawal", system-ui;
}

/* كروت تحت، ملزوقة يمين/شمال */
.hm-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  padding: 0 clamp(16px, 3.5vw, 40px) clamp(22px, 6vh, 60px);
  gap: clamp(12px, 3vw, 28px);
}

.hm-col--left {
  justify-self: start;
  justify-items: start;
  text-align: left;
}

.hm-col--right {
  justify-self: end;
  justify-items: end;
  text-align: right;
}

/* شكل الكروت (بلا بوردر/شادو) */
.hm-kpi {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: min(480px, 92%);
}

.hm-kpi--right {
  justify-self: end;
}

.hm-kpi__value {
  margin: 0 0 4px;
  font: 900 clamp(22px, 3.6vw, 36px)/1.1 "Cairo", "Tajawal", system-ui;
  white-space: nowrap;
}

.hm-kpi__label {
  margin: 0;
  font: 600 clamp(12px, 2vw, 16px)/1.5 "Cairo", "Tajawal", system-ui;
  opacity: .95;
}

.hm-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  vertical-align: -4px;
  margin-inline-start: 8px;
}

@media (max-width:900px) {
  .hm-grid {
    grid-template-columns: 1fr;
    padding: 0 clamp(12px, 6vw, 24px) clamp(18px, 6vh, 40px);
  }

  .hm-col--left,
  .hm-col--right {
    justify-self: center;
    justify-items: center;
    text-align: center;
  }
}

/* === SAFE MODE: شريحة واحدة فقط مرئية فعليًا === */
.hm-slide {
  position: absolute;
  inset: 0;
  display: none !important;
  /* اقفل أي رندر للشريحة غير النشطة */
  opacity: 0;
  visibility: hidden;
  /* احتياطي */
  transform: translateY(8px);
  pointer-events: none;
}

.hm-slide.is-active {
  display: block !important;
  /* النشطة فقط */
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* العنوان أعلى اليمين فوق الجميع (لو ظهر قبل الشبكة) */
.hm-header {
  position: absolute;
  top: clamp(16px, 3vh, 36px);
  right: clamp(16px, 3vw, 40px);
  z-index: 3;
}

/* الشبكة لاصقة يمين/شمال وتحت */
.hm-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  padding: 0 clamp(16px, 3.5vw, 40px) clamp(22px, 6vh, 60px);
  gap: clamp(12px, 3vw, 28px);
}

.hm-col--left {
  justify-self: start;
  justify-items: start;
  text-align: left;
}

.hm-col--right {
  justify-self: end;
  justify-items: end;
  text-align: right;
}

/* الشكل بدون حدود/ظل + أيقونة صورة صغيرة */
.hm-kpi {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: min(480px, 92%);
}

.hm-kpi__value {
  margin: 0 0 4px;
  font: 900 clamp(22px, 3.6vw, 36px)/1.1 "Cairo", "Tajawal", system-ui;
  white-space: nowrap;
}

.hm-kpi__label {
  margin: 0;
  font: 600 clamp(12px, 2vw, 16px)/1.5 "Cairo", "Tajawal", system-ui;
  opacity: .95;
}

.hm-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  vertical-align: -4px;
  margin-inline-start: 8px;
}

/* === LOCK: شريحة واحدة فقط تتعرض فعليًا === */
.hm-slide {
  display: none !important;
}

.hm-slide.is-active {
  display: block !important;
}

/* (اختياري) تأثيرات نعومة لو حابب */
.hm-slide.is-active {
  opacity: 1;
  transform: none;
}

.hm-slide {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}

/* العنوان أعلى اليمين + تموضع العناصر كما اتفقنا */
.hm-header {
  position: absolute;
  top: clamp(16px, 3vh, 36px);
  right: clamp(16px, 3vw, 40px);
  z-index: 3;
  text-align: right;
}

.hm-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  padding: 0 clamp(16px, 3.5vw, 40px) clamp(22px, 6vh, 60px);
  gap: clamp(12px, 3vw, 28px);
}

.hm-col--left {
  justify-self: start;
  justify-items: start;
  text-align: left;
}

.hm-col--right {
  justify-self: end;
  justify-items: end;
  text-align: right;
}

.hm-kpi {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: min(480px, 92%);
}

.hm-kpi__value {
  margin: 0 0 4px;
  font: 900 clamp(22px, 3.6vw, 36px)/1.1 "Cairo", "Tajawal", system-ui;
  white-space: nowrap;
}

.hm-kpi__label {
  margin: 0;
  font: 600 clamp(12px, 2vw, 16px)/1.5 "Cairo", "Tajawal", system-ui;
  opacity: .95;
}

.hm-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  vertical-align: -4px;
  margin-inline-start: 8px;
}

@media (max-width:900px) {
  .hm-grid {
    grid-template-columns: 1fr;
    padding: 0 clamp(12px, 6vw, 24px) clamp(18px, 6vh, 40px);
  }

  .hm-col--left,
  .hm-col--right {
    justify-self: center;
    justify-items: center;
    text-align: center;
  }
}

/* === HERO FIX PACK (ضعه آخر style.css) === */

/* شريحة واحدة تظهر فعليًا */
.hero-media .hm-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hero-media .hm-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* الخلفية النصية */
.hero-media .hm-overlay {
  position: absolute;
  inset: 0;
  padding: 0;
}

/* الشبكة: عمود يسار + عمود يمين ملزوقين بحواف الشاشة */
.hero-media .hm-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  padding: 0 clamp(16px, 3.5vw, 40px) clamp(22px, 6vh, 60px);
  gap: clamp(12px, 3vw, 28px);
}

.hero-media .hm-col--left {
  justify-self: start;
  justify-items: start;
  text-align: left;
}

.hero-media .hm-col--right {
  justify-self: end;
  justify-items: end;
  text-align: right;
}

/* عناوين أعلى اليمين كما تريد */
.hero-media .hm-header {
  position: absolute;
  top: clamp(16px, 3vh, 36px);
  right: clamp(16px, 3vw, 40px);
  text-align: right;
  margin: 0;
  z-index: 3;
}

/* موبايل: عمود واحد وسنتر */
@media (max-width:900px) {
  .hero-media .hm-grid {
    grid-template-columns: 1fr;
    padding: 0 clamp(12px, 6vw, 24px) clamp(18px, 6vh, 40px);
  }

  .hero-media .hm-col--left,
  .hero-media .hm-col--right {
    justify-self: center;
    justify-items: center;
    text-align: center;
  }
}

/* الكروت: بدون بوردر/شادو – أيقونة صغيرة */
.hero-media .hm-kpi {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: min(480px, 92%);
}

.hero-media .hm-kpi__value {
  margin: 0 0 4px;
  font: 900 clamp(22px, 3.6vw, 36px)/1.1 "Cairo", "Tajawal", system-ui;
  white-space: nowrap;
}

.hero-media .hm-kpi__label {
  margin: 0;
  font: 600 clamp(12px, 2vw, 16px)/1.5 "Cairo", "Tajawal", system-ui;
  opacity: .95;
}

.hero-media .hm-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  vertical-align: -4px;
  margin-inline-start: 8px;
}

/* ===== HERO HARD-LOCK (منع أي تراكب) ===== */
.hero-media {
  background: #000;
  color: #fff;
  overflow: clip;
}

.hero-media .hm-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #0b0c0f;
}

.hero-media .hm-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-media .hm-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media .hm-overlay {
  position: absolute;
  inset: 0;
}

/* شريحة واحدة فقط مرئية فعليًا */
.hero-media .hm-slide {
  position: absolute;
  inset: 0;
  display: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hero-media .hm-slide.is-active {
  display: block !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* العنوان أعلى اليمين */
.hero-media .hm-header {
  position: absolute;
  top: clamp(16px, 3vh, 36px);
  right: clamp(16px, 3vw, 40px);
  text-align: right;
  margin-top: 70px !important;
  margin: 0;
  z-index: 3;
}

.hero-media .hm-header__sup {
  display: block;
  font: 700 clamp(12px, 1.8vw, 18px)/1.3 "Cairo", "Tajawal", system-ui;
  opacity: .9;
  margin-bottom: 6px;
}

.hero-media .hm-header__title {
  display: block;
  font: 900 clamp(24px, 4.6vw, 46px)/1.15 "Cairo", "Tajawal", system-ui;
}

/* الكروت تحت، لاصقة يمين/شمال */
.hero-media .hm-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  padding: 0 clamp(16px, 3.5vw, 40px) clamp(22px, 6vh, 60px);
  gap: clamp(12px, 3vw, 28px);
}

.hero-media .hm-col--left {
  justify-self: start;
  justify-items: start;
  text-align: left;
}

.hero-media .hm-col--right {
  justify-self: end;
  justify-items: end;
  text-align: right;
}

/* شكل الكروت (بدون بوردر/شادو) + أيقونة صورة صغيرة */
.hero-media .hm-kpi {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: min(480px, 92%);
}

.hero-media .hm-kpi__value {
  display: flex;
  margin: 0 0 4px;
  font: 900 clamp(22px, 3.6vw, 36px)/1.1 "Cairo", "Tajawal", system-ui;
  white-space: nowrap;
}

.hero-media .hm-kpi__label {
  margin: 0;
  font: 600 clamp(12px, 2vw, 16px)/1.5 "Cairo", "Tajawal", system-ui;
  opacity: .95;
  text-align: right;
}

.hero-media .hm-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  vertical-align: -4px;
  margin-inline-start: 8px;
  margin-left: 20px;
}

@media (max-width:900px) {
  .hero-media .hm-grid {
    grid-template-columns: 1fr;
    padding: 0 clamp(12px, 6vw, 24px) clamp(18px, 6vh, 40px);
  }

  .hero-media .hm-col--left,
  .hero-media .hm-col--right {
    justify-self: center;
    justify-items: center;  
    text-align: center;
  }
}
a{
  text-decoration: none !important;
}

/* حجم الحاوية العام */
.container {
  width: min(1200px, 92%);
  margin-inline: auto;
}

/* شبكة التقارير */
.reports_grid-wrap {
  /* خليه يلتزم بعرض الحاوية بدل width ثابت */
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;

  /* بادينج منطقي يدعم RTL */
  padding-block: clamp(16px, 2.5vw, 28px);   /* فوق/تحت */
  padding-inline: clamp(16px, 4vw, 40px);    /* يمين/يسار */

  display: grid;
  gap: 24px; /* مسافة بين الكروت؛ فضّل تستخدم gap بدل تكبير البادينج */
}

/* في الشاشات الكبيرة خلي الهامش الداخلي ثابت شوي */
@media (min-width: 1400px) {
  .reports_grid-wrap {
    padding-inline: 40px;
    padding-block: 28px;
  }
}

/* في الشاشات الأصغر قلّل البادينج تدريجيًا */
@media (max-width: 992px) {
  .reports_grid-wrap { padding-inline: 28px; padding-block: 20px; }
}
@media (max-width: 768px) {
  .reports_grid-wrap { padding-inline: 20px; padding-block: 16px; }
}

/* بطاقات التقرير (لو محتاج تبريد بسيط للداخل) */
.report-card {
  padding: clamp(12px, 1.6vw, 20px);
}
.homfxws:hover{
  transform:scale(-1);
}/* اخفاء التابات/الـ labels السفليين */
.news-s__tabs,
.news-s__tabs .news-s__tab {
  display: none !important;
}
.section-head {
  text-align: center;         /* وسّط العنوان */
  margin: 40px 0 20px;        /* مسافة فوق وتحت */
  direction: rtl;             /* لأن الصفحة عربية */
}

.section-title {
  font-family: "Tajawal", "Dubai", Arial, sans-serif;
  font-weight: 700;
  font-size: 28px;            /* حجم العنوان الكبير */
  color: #4b352b;             /* لون داكن يشبه التصميم — عدّله */
  margin: 0;
  padding: 0 12px;
  display: inline-block;      /* حتى يظهر كـ كتلة وسطية صغيرة */
  border-radius: 6px;         /* لو تريد خلفية خفيفة يمكن إضافة */
  /* لو تحتاج خط تحت العنوان */
  /* border-bottom: 3px solid #f0f0f0; padding-bottom:10px; */
}
/* خط مناسب للعناوين العربية (اختياري إن ما كنت مفعّله) */
/* @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;800&display=swap'); */

:root{
  --heading-color: #264C48;   /* غامق مائل للأخضر مثل ما يظهر بالتصميم */
  --side-rule:    #CFE7E3;    /* لون الخطوط الجانبية الفاتحة (لو حابب استخدامها) */
}

.section-head{
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 24px 0 28px;
  text-align:center;
}

.section-title{
  /* خط/حجم/وزن مطابقين لأسلوب الـ XD */
  /* font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Kufi Arabic', sans-serif; */
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.25;
  letter-spacing: .1px;       /* خفيف جداً لنعومة العنوان */
  color: var(--heading-color);
  margin: 0;
  direction: rtl;
  text-align: center;

  /* لفّ ذكي لو تغيّر العرض */
  text-wrap: balance;         /* مدعوم بكروم/إيدج/سفاري الحديثة */
  white-space: normal;
  word-break: keep-all;
}

/* نجبره يكون سطرين بالشكل المطلوب مثل التصميم */
.section-title{
  display: inline-grid;
  gap: .15em;
}
.section-title > span{
  display:block;
}


/* استجابة أفضل تحت الموبايل */
@media (max-width: 575px){
  .section-head::before,
  .section-head::after{ display:none; } /* نخفي الخطوط الجانبية على الشاشات الصغيرة */
  .section-title{ font-size: clamp(24px, 7vw, 32px); }
}
/* شبكة الكروت */
.cards .dl-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 22px;
  grid-auto-rows: minmax(140px, auto); /* يخلي في ارتفاع كفاية عشان العنوان يبات في النص */
  align-items: start;
}

/* مكان العنوان داخل الجريد بالظبط زي التصميم */
.cards .section-head{
  grid-column: 2;          /* العمود التاني */
  grid-row: 1 / span 2;    /* ياخد صفّين */
  align-self: center;      /* يتمركز رأسيًا بين الصفّين */
  justify-self: center;    /* يتمركز أفقياً داخل العمود */
  margin: 0;               /* شيل أي مارجن افتراضي */
  text-align: center;
}

/* شكل العنوان (سطرين وبولد) */
.cards .section-title{
  font-weight: 800;
  font-size: clamp(20px, 3.2vw, 29px);
  text-align: right;
  line-height: 1.25;
  color: #1F5E57;          /* عدّلها لو عندك قيمة من الـ XD */
  margin: 0;
  display: inline-grid;
  gap: .15em;
  direction: rtl;
}

/* استجابة للموبايل: خلي العنوان فوق الكروت */
@media (max-width: 992px){
  .cards .section-head{
    grid-column: 1 / -1;   /* يمتد على عرض العمود الواحد */
    grid-row: auto;
    justify-self: center;
    align-self: start;
    margin-bottom: 8px;
  }
}
.cards .section-head{ grid-column: 1; }
/* شبكة الكروت */
.cards .dl-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 22px;
}

/* العنوان فوق وبالمنتصف */
.section-head{
  margin: 0 0 24px;
  display: flex;
  justify-content: center;
  text-align: center;
}

/* شكل العنوان بالظبط (سطرين وبولد) */
.section-title{
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.25;
  color: #1F5E57;      /* عدّلها لو عندك لون من XD */
  margin: 0;
  display: inline-grid;
  gap: .15em;
  direction: rtl;
}

/* موبايل: عمود واحد */
@media (max-width: 992px){
  .cards .dl-grid{ grid-template-columns: 1fr; }
}
/* الشبكة: عمودين للكروت */
.cards .dl-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 22px;
}

/* العنوان فوق وبالعرض (مركزي) */
.cards .section-head{
  position: static !important;    /* إلغاء أي تموضع قديم */
  transform: none !important;
  margin: 28px 0 24px;
  text-align: center;
  display: flex;
  justify-content: center;
}

/* شكل العنوان سطرين */
.cards .section-title{
  direction: rtl;
  display: inline-grid;
  gap: .2em;
  margin: 0;
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 29px);
  line-height: 1.25;
  color: #1F5E57;
}

/* موبايل: عمود واحد */
@media (max-width: 992px){
  .cards .dl-grid{ grid-template-columns: 1fr; }
}
/* حاوية عامة */
.hero-media { width: 100%; }

/* كل مرحلة (فيديو/نص) */
.hm-stage {
  position: relative;
  width: 100%;
  overflow: hidden; /* للظلال وغيرها */
}

/* ——— الفيديو ——— */
.hm-video {
  width: 100%;
  height: auto;     /* ياخذ ارتفاعه الطبيعي حسب أبعاد الفيديو/البوستر */
  display: block;
}

/* ——— مراحل النص ——— */
/* الخلفية: صورة تأخذ عرض 100% وطولها الطبيعي (بدون تحديد ارتفاع) */
.hm-stage--text > .hm-bg {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}

/* طبقة المحتوى تطفو فوق الخلفية من غير ما تأثر على ارتفاعها */
.hm-stage--text .hm-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none; /* علشان الخريطة ما تستقبل كلكات */
}

/* خريطة في المنتصف */
.hm-map {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.35));
  user-select: none;
  -webkit-user-drag: none;
}

/* العنوان أعلى اليمين */
.hm-header {
  position: absolute;
  right: clamp(16px, 5vw, 56px);
  top: clamp(28px, 8vh, 100px);
  margin: 0;
  text-align: right;
  color: #fff;
  text-shadow: 0 2px 28px rgba(0,0,0,.45);
  pointer-events: auto; /* يسمح بتحديد النص */
}
.hm-header__sup {
  display: block;
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.15;
}
.hm-header__title {
  display: block;
  font-weight: 900;
  font-size: clamp(28px, 8.4vw, 90px);
  line-height: 1.05;
  letter-spacing: -.01em;
}

/* شبكة الأرقام أسفل يمين/يسار */
.hm-grid {
  position: absolute;
  inset-inline: 0;
  bottom: clamp(24px, 7vh, 84px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: clamp(12px, 6vw, 36px);
  padding: 0 clamp(16px, 5vw, 56px);
  color: #fff;
  pointer-events: auto;
}

.hm-col { display: grid; gap: 16px; }
.hm-col--left  { text-align: left;  direction: rtl; }
.hm-col--right { text-align: right; }

.hm-kpi__value{
  margin: 0;
  font-weight: 900;
  font-size: clamp(22px, 4.6vw, 46px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hm-kpi__label{
  margin: 6px 0 0;
  font-weight: 700;
  font-size: clamp(12px, 1.6vw, 16px);
  line-height: 1.6;
  opacity: .95;
}
.hm-icon{ width: 34px; height: 34px; object-fit: contain; }

/* تظليل خفيف فوق الخلفية (اختياري للقراءة) */
.hm-stage--text::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
  z-index: 1;
}

/* استجابة للشاشات الصغيرة */
@media (max-width: 900px){
  .hm-map { width: min(78vw, 620px); top: 50%; }
  .hm-grid { grid-template-columns: 1fr; gap: 18px; bottom: clamp(14px, 5vh, 36px); }
  .hm-col--left, .hm-col--right { text-align: center; }
}
@media (max-width: 520px){
  .hm-map { width: min(86vw, 560px); opacity: .95; }
}
/* الحاوية اللي فوق العنوان + الزر */
.media_top{
  display: flex;                /* صف أفقي */
  justify-content: space-between; /* العنوان يسار — الزر يمين */
  align-items: center;            /* نفس خط الارتفاع */
  gap: 16px;                      /* مسافة بسيطة بينهم */
  flex-wrap: nowrap;              /* امنع النزول لسطر تاني */
}

/* العمودين */
.media_left{ 
  flex: 1 1 auto;                /* ياخد الباقي من العرض */
  min-width: 0;                  /* يمنع الدفع للخارج */
  text-align: left;
}

.media_right{
  flex: 0 0 auto;                /* عرضه على قد المحتوى فقط */
  text-align: right;
}

/* شيل المسافات اللي بتزوّد الارتفاع */
.media_gallery-title{
  margin: 0;                     /* بدل 18px … */
}

/* لو الموجود في اليمين أزرار/تابس كتيرة: خليها ما تلفش وتقصّل سكرول أفقي عند اللزوم */
#filters.media_tabs{
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;              /* لو المساحة ضاقت يطلع سكرول أفقي */
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
/* القائمة اللي فيها اللوجوهات */
.vgrid{
  display: flex;              /* بدال grid */
  flex-wrap: wrap;            /* يسمح بالنزول لسطر جديد */
  gap:28px !important;             /* مسافة عمودية / أفقية بين العناصر */
  align-items: center;
  justify-content: flex-start;/* يبدأ من اليمين بحكم RTL */
  direction: rtl;             /* يخلي اللفّ من اليمين لليسار */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* كل لوجو ياخد عرضه الطبيعي على قد الصورة */
.vgrid .logo{
  flex: 0 0 auto;      
  margin: auto;       /* ما يتمدّدش */
  width: auto !important;     /* لو كان عندك width:25% قديم */
}

/* ضبط الصورة نفسها */
.vgrid .logo img{
  display: block;
  height: auto; /* ثبّت الارتفاع وخلّي العرض حسب نسبة الصورة */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.06));
}
.vgrid{
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
  justify-content: start;  /* يبدأ من اليمين في RTL */
  gap: 24px 32px;
  direction: rtl;
  list-style: none;
  margin: 0;
  padding: 0;
}
.vgrid .logo img{
  height: auto !important;
  width: auto;
  object-fit: contain;
}
/* مرن افتراضيًا: عدد الأعمدة يتحدد حسب العرض وحجم اللوجو */
.vgrid{
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fit, minmax(160px, max-content));
  justify-content: start;   /* RTL: يبدأ من اليمين */
  gap: 24px 32px;           /* عمودي / أفقي */
  direction: rtl;
}

/* لما العرض يكفي أكتر من 5، ثبّت السقف = 5 أعمدة كحد أقصى */
@media (min-width: 928px){   /* 5*160 + 4*32 = 928px */
  .vgrid{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* صور الشعار */
.vgrid .logo img{
  display: block;
  height: auto !important;
  width: auto;
  object-fit: contain;
}
/* القائمة */
.vgrid{
  display: flex;
  flex-wrap: wrap;                 /* نزول لسطور */
  gap: 28px 68px;                  /* رأسي / أفقي زي الـ XD */
  align-items: center;
  justify-content: flex-start;     /* يبدأ من اليمين (مع RTL) */
  direction: rtl;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* عنصر الشعار */
.vgrid .logo{
  flex: 0 0 auto;                  /* عرضه الطبيعي فقط */
}

/* الصورة نفسها بارتفاع ثابت وعرض تلقائي */
.vgrid .logo img{
  display: block;
  height: clamp(56px, 8vh, 120px); /* زي الـ XD: ثبّت الارتفاع */
  width: auto;
  object-fit: contain;
  max-width: 100%;
}

/* فاصل سطر غير مرئي */
.vgrid .breaker{
  flex: 0 0 100%;                  /* يكسر السطر */
  width: 0; height: 0;
  padding: 0; margin: 0;
  list-style: none;
}
.vgrid{
  gap:50px 23px !important;
}.vgrid .logo {
    flex: 0 0 auto;
    padding: 0px !important;
    margin: 0px !important;
    margin: auto !important;
}
/* ====== سكشن خريطة الباحة داخل heroMedia ====== */

.hero-media .map-section {
  position: relative;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* صورة افتراضية قبل ما المستخدم يختار محافظة */
  background-image: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.35)),url('assets/images/1.jpg');
  padding: 99px 60px 67px 61px;
  box-sizing: border-box;
}

.hero-media .map-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 200px;
}

/* الأعمدة يمين و شمال – تصميم قريب من الكروت القديمة */
.hero-media .map-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 220px;
}

.hero-media .map-stat {
  border-radius: 18px;
  padding: 16px 20px;
}

.hero-media .map-stat__label {
  margin: 0 0 4px;
  font-size: 14px;
  opacity: 0.8;
}

.hero-media .map-stat__value {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

/* عمود الخريطة في النص */
.hero-media .map-container {
  position: relative;
  max-width: 520px;
  height: 80vh;

  /* عشان الخريطة نفسها تتوسّط في النص */
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-media #map-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-media #map-wrapper svg {
  display: block;
  margin: 0 auto;
  /* لو حاسس إن الخريطة كبيرة أو صغيرة عدّل دول بس */
  width: 650px;
  height: 650px;
}

.hero-media #map-wrapper svg {
  width: 650px;
  height: 650px;
}

/* استايل المحافظات */
.hero-media #map-wrapper svg path {
  fill: rgba(255, 255, 255, 0.08);
  stroke: #ffffff;
  stroke-width: 2;
  cursor: pointer;
  transition: 0.25s;
}

.hero-media #map-wrapper svg path:hover,
.hero-media #map-wrapper svg path.active {
  fill: #0ecddb;
}

.hero-media .label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;

  /* التعديلات المهمة */
  white-space: normal !important;  /* اسمح بلفّ الكلام */
  width: 60px;                     /* عرض ثابت صغير عشان الكلمتين ينزلوا تحت بعض */
  text-align: center;              /* سنتر الكلام */

  pointer-events: none;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}


/* إخفاء الخريطة في البداية – نفعّلها بالـ JS */
.hm-stage--map {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.hm-stage--map.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* إخفاء الفيديو لما يخلص */
.hm-stage--video.hm-stage--hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

/* ريسبونسيف بسيط للموبايل */
@media (max-width: 992px) {
  .hero-media .map-section {
    padding: 20px 16px;
  }

  .hero-media .map-content {
    flex-direction: column;
    gap: 24px;
  }

  .hero-media .map-side {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero-media .map-stat {
    min-width: 140px;
  }
}
/* ===== التحكم في مراحل الفيديو / الخريطة في الهيرو ===== */

.hero-media {
  position: relative;
  background: #000;
  padding: 0px 0;
  overflow: hidden;
}

/* الستاچ (فيديو أو خريطة) بياخد نفس المقاس */
.hero-media .hm-stage {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}

/* فيديو الهيرو */
.hero-media .hm-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* الخريطة مخفية في الأول */
.hm-stage--map {
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
}

/* لما نضيف is-active تظهر الخريطة */
.hm-stage--map.is-active {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* لما نضيف hm-stage--hidden على الفيديو يختفي */
.hm-stage--video.hm-stage--hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
}
.hm-stage--hidden {
  display: none;
}

.hm-stage--map[hidden] {
  display: none;
}

.hm-stage--map.is-active {
  display: block;
}
/* الأعمدة يمين و شمال */
.hero-media .map-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 260px;
}

/* كارت الإحصائية – ستايل شبيه بالـ XD */
.hero-media .map-stat {
  border-radius: 22px;
  padding: 18px 22px;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* السطر اللي فيه القيمة + الأيقونة البرتقالية */
.hero-media .map-stat__top {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* RTL: الرقم ثم الأيقونة */
  gap: 10px;
  margin-bottom: 6px;
}

.hero-media .map-stat__value {
  margin: 0;
  font-size: 26px;       /* رقم كبير زي الـ XD */
  font-weight: 800;
  color: #ffffff;
}

/* البادج البرتقالية الصغيرة */
.hero-media .map-stat__badge {
  width: auto;
  height: auto;
  background: #f36a3f;   /* لون قريب من اللي في الـ XD */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
}

.hero-media .map-stat__badge img {
  max-width: auto;
  max-height: auto;
}

/* عنوان الإحصائية تحت */
.hero-media .map-stat__label {
  margin: 0;
  font-size: 14px;
  color: #ffffff;
  opacity: 0.8;
}
.map-section {
  position: relative;
}

.map-info {
  position: absolute;
  top: 40px;
  right: 60px;
  max-width: 420px;
  text-align: right;
  color: #fff;
  z-index: 5;
}

.map-info__title {
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: 28px;
  margin: 0 0 0.5rem;
}

.map-info__desc {
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
  opacity: 0.9;
}
.right-text,
.left-text {
    padding: 0 60px !important; /* نفس المسافة على الناحيتين */
}
.map-tooltip__name {
  font-size: 70px;
}
.map-title {
  font-size: 90px;   /* كبّر الرقم براحتك */
  font-weight: 700;  /* لو عايزه أتقل شوية */
}
@media (max-width: 768px) {
  #label {
  font-size: 20px !important;    /* غيّر الرقم حسب اللي يناسبك */
  font-weight: 600  ;  }
}
#label {
  font-size: 15px !important;    /* غيّر الرقم حسب اللي يناسبك */
  font-weight: 500;
}
.hero-media .label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;

  display: block;          /* مهم عشان العرض يشتغل */
  text-align: center;      /* سنتر الكلام */
  pointer-events: none;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}
/* =============================
   إصلاح أزرار الفلاتر 100%
   ============================= */
.media_tabs {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto; /* وقت الزوم أو الشاشات الصغيرة */
  scrollbar-width: none;
}

.media_tabs::-webkit-scrollbar {
  display: none;
}

.media_tabs .filter {
  flex: 0 0 auto !important;    /* يمنع التمدد */
  min-width: 150px !important;  /* يمنع الكسر */
  white-space: nowrap !important;
  text-align: center !important;
}
/* =============================
   إصلاح تقارير المرصد
   ============================= */
.reports_grid-wrap {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  box-sizing: border-box;
}

.reports_grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 24px !important;
}
/* إلغاء تأثير الـ strong داخل أزرار الفلاتر */
.media_tabs .filter strong {
  padding: 0 !important;
  margin: 0 !important;
  display: inline !important;
  font-weight: inherit !important;
}
/* إصلاح تصميم أزرار الفلاتر 100% */
.media_tabs .filter {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 12px 22px !important;
  min-width: 150px !important;
  white-space: nowrap !important;
  border-radius: 6px;
  flex: 0 0 auto !important;
}
.media_tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  overflow-x: auto !important;
  scrollbar-width: none;
}

.media_tabs::-webkit-scrollbar {
  display: none;
}
/* ===== إصلاح أزرار تصنيفات معرض الصور ===== */

/* نفس الكلاس اللي في library.html:  class="media__tabs" */
.media__tabs {
  display: flex;
  gap: 14px;
  flex-wrap: nowrap;           /* ممنوع ينزلوا سطر تاني */
  overflow-x: auto;            /* لو الشاشة ضاقت يعمل سكرول أفقي بسيط */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.media__tabs::-webkit-scrollbar {
  display: none;
}

/* الزر نفسه ما يتمددش بشكل غريب */
.media__tabs .filter {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;            /* كفاية إن الكلام كله يبقى في سطر واحد */
}

/* النص جوه الزر (سواء span أو strong) يبقى دايمًا في سطر واحد */
.media__tabs .filter span,
.media__tabs .filter strong {
  white-space: nowrap;
  display: inline-block;
}
.media__tabs .filter strong {
  padding: 12px 23px;
}
.media__tabs .filter strong {
  padding: 10px 20px !important;  /* صغّر شوية المسافات جوه الزر */
}