/* =========================================================
   ABOUT.CSS (Cleaned + Fixed)
   - same look
   - remove duplicates + dangerous overrides
   - fix mobile stacking + vertical text bug
========================================================= */

/* =========================
   0) TOKENS
========================= */
:root{
  --bg: #f4f1ea;
  --paper: #fbfaf7;
  --ink: #151515;
  --muted: #5c5c5c;
  --line: rgba(0,0,0,.10);

  --dark: #121212;
  --dark2: #1a1a1a;

  --accent: #b08b57;

  --shadow: 0 22px 70px rgba(0,0,0,.14);
  --shadow2: 0 12px 28px rgba(0,0,0,.10);

  --r-xl: 30px;
  --r-lg: 24px;

  --wrap: 1180px;

  --font-ar: "Cairo", system-ui, -apple-system, Segoe UI, Arial;
  --font-en: "Inter", system-ui, -apple-system, Segoe UI, Arial;

  color-scheme: light;
}

html{ color-scheme: light; }
*{ box-sizing: border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:
    radial-gradient(1000px 520px at 70% 0%, rgba(176,139,87,.10) 0%, rgba(176,139,87,0) 60%),
    radial-gradient(1000px 520px at 20% 10%, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-ar);
  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
.wrap{ width: min(var(--wrap), calc(100% - 44px)); margin-inline:auto; }

/* IMPORTANT: لا تكتب overrides على * بالموبايل (هذا كان يكسّر كل شي) */
p, li{
  word-break: normal;
  overflow-wrap: anywhere; /* يمنع النص يصير عمودي إذا صار رابط/كلمة طويلة */
}


/* =========================
   1) TOPBAR
========================= */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251,250,247,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
}

.topbar__left{
  display:flex;
  gap:10px;
  align-items:center;
}

.topbar__nav{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:13px;
}

.topbar__nav a{
  padding:8px 10px;
  border-radius:999px;
  color: rgba(0, 0, 0, 0.75);
  font-weight: 900;
}

.topbar__nav a:hover{
  background: rgba(255,255,255,0);
}

.pillBtn{
  border:1px solid var(--line);
  background: rgba(255,255,255,.70);
  padding:10px 14px;
  border-radius:999px;
  font-weight: 900;
  cursor:pointer;
}

.pillBtn--primary{
  background: var(--dark);
  border-color: transparent;
  color:#fff;
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand__logo{
  width:38px;
  height:38px;
  border-radius:12px;
  object-fit:cover;
}
.brand__text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  text-align:right;
}
.brand__text strong{ font-size:14px; }
.brand__text span{
  font-size:12px;
  color: var(--muted);
  font-weight: 800;
}

/* Mobile nav: single line + scroll */
@media (max-width: 640px){
  .topbar__inner{
    gap: 10px;
  }
  .topbar__nav{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
  }
  .topbar__nav::-webkit-scrollbar{ display:none; }
  .topbar__nav a{
    white-space: nowrap;
    font-size: 12px;
    padding: 8px 10px;
  }
}


/* =========================
   2) FB COVER
========================= */
.coverFB{
  width:100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow:hidden;
  aspect-ratio: 820 / 312;
  background:#e9e3d7;
}

.coverFB img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position:center;
  filter: contrast(1.02) saturate(1.02);
}

/* =========================
   3) SHELL
========================= */
.shell{
  margin-top: -22px;
  background: rgba(251,250,247,.78);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  padding: 18px;
}

/* =========================
   4) HERO
========================= */
.hero{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  align-items: stretch;
}

.heroCard{
  border-radius: var(--r-xl);
  overflow:hidden;
  position:relative;
  background:#ddd7cc;
  min-height: 330px;
  border: 1px solid rgba(0,0,0,.06);
}

.heroCard img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position:center;
}

.heroOverlay{
  position:absolute;
  inset:0;
  background: radial-gradient(700px 420px at 18% 35%,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.22) 45%,
    rgba(0,0,0,0) 70%);
  pointer-events:none;
}

.heroText{
  position:absolute;
  inset:auto 16px 16px 16px;
  color:#fff;
}
.heroText, .heroText *{
  color:#fff !important;
  opacity:1 !important;
}
.heroKicker{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  font-weight: 900;
  font-size: 12px;
  opacity:.92;
}
.heroKicker span{
  padding:7px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.heroTitle{
  margin:10px 0 6px;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 900;
}
.heroDesc{
  margin:0;
  max-width: 60ch;
  font-weight: 800;
  font-size: 13px;
  opacity: .92;
  color: rgba(255,255,255,.90) !important;
}

/* SIDE */
.side{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.sideCard{
  border-radius: var(--r-xl);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow2);
  padding: 14px;
  min-width: 0;
}

.sideCard h2{
  margin:0 0 8px;
  font-size: 14px;
  font-weight: 900;
}

.sideCard p{
  margin:0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.8;
  font-size: 13px;
}

/* HERO mobile */
@media (max-width: 820px){
  .hero{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .heroCard{
    min-height: 0;
    aspect-ratio: 16 / 10;
    height: auto;
  }
  .side{ gap: 12px; }
}


/* =========================
   5) CALLOUT
========================= */
.callout{
  margin-top: 14px;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--dark) 0%, var(--dark2) 100%);
  color:#fff;
  padding: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.08);
}
.callout, .callout *{ color: rgba(255,255,255,.92) !important; }
.callout h3{ margin:0 0 8px; font-size:18px; font-weight:900; color:#fff !important; }
.callout p{
  margin:0;
  color: rgba(255,255,255,.82) !important;
  font-weight: 800;
  line-height: 1.85;
  font-size: 13px;
  max-width: 90ch;
}

/* =========================
   6) MOSAIC
========================= */
.mosaic{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 160px;
  gap: 14px;
}

.tile{
  border-radius: var(--r-lg);
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.70);
  box-shadow: var(--shadow2);
  min-width: 0;
}

.tile img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position:center;
  filter: contrast(1.02) saturate(1.02);
}

.tile--text{
  padding: 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  background: rgba(255,255,255,.78);
}
.tile--text h4{ margin:0; font-size:14px; font-weight:900; }
.tile--text ul{
  margin:0;
  padding:0 18px 0 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.85;
  font-size: 13px;
}

/* shapes */
.t1{ grid-column:1 / span 2; grid-row:1 / span 2; min-height:334px; }
.t2{ grid-column:3; grid-row:1; }
.t3{ grid-column:3; grid-row:2; }
.t4{ grid-column:1; grid-row:3; }
.t5{ grid-column:2; grid-row:3; }
.t6{ grid-column:3; grid-row:3; }

/* mosaic mobile */
@media (max-width: 820px){
  .mosaic{
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 12px;
  }
  .mosaic .tile{
    border-radius: 18px;
  }
  .mosaic .tile:not(.tile--text){
    aspect-ratio: 16 / 9;
  }
  /* إزالة تموضع الديسكتوب */
  .t1,.t2,.t3,.t4,.t5,.t6{
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 0 !important;
  }
  .tile--text{
    background: #fff;
  }
  .tile--text h4{
    text-align:center;
    font-weight: 800;
  }
  .tile--text li{
    margin: 8px 0;
    line-height: 1.85;
  }
}


/* =========================
   7) “PAIR GRID” (صورة + نص جنب بعض)
   استخدمه للجزء اللي بالصورة عندك (الكاردات اللي نزلت نصوص عمودي)
   فقط حط class="aboutPairGrid" على الكونتينر مالهم
========================= */
.aboutPairGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.aboutPairGrid > *{
  min-width: 0;
}

/* إذا كارد صورة داخلها img */
.aboutPairGrid .pairMedia{
  border-radius: var(--r-xl);
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.70);
  box-shadow: var(--shadow2);
  aspect-ratio: 16 / 10;
}
.aboutPairGrid .pairMedia img{
  width:100%;
  height:100%;
  object-fit: cover;
}

/* كارد نص */
.aboutPairGrid .pairText{
  border-radius: var(--r-xl);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow2);
  padding: 14px;
}
.aboutPairGrid .pairText p,
.aboutPairGrid .pairText li{
  overflow-wrap: anywhere;
  word-break: normal;
}

/* موبايل: صف واحد */
@media (max-width: 820px){
  .aboutPairGrid{
    grid-template-columns: 1fr;
  }
  .aboutPairGrid .pairMedia{
    aspect-ratio: 16 / 9;
  }
}


/* =========================================
   INTRO / HERO TEXT — RTL FIX
========================================= */

.heroText{
  direction: rtl !important;
  text-align: right !important;
}

/* العنوان */
.heroTitle{
  text-align: right !important;
  direction: rtl !important;
}

/* الوصف */
.heroDesc{
  text-align: right !important;
  direction: rtl !important;
}

/* أي عناصر صغيرة فوق العنوان */
.heroKicker{
  justify-content: flex-start !important; /* يبقى قريب من اليمين */
  direction: rtl !important;
}
/* =========================
   Universal Footer Fix (All Pages)
   - Better contrast (no white text on light bg)
   - Mobile: 2 columns (less scroll)
   - Icons more tidy
   - RTL/LTR auto alignment
========================= */

:root{
  --footerBg: #f4efe6;          /* خلفية فاتحة مرتبة */
  --footerCard: rgba(255,255,255,.70);
  --footerInk: #161616;         /* نص داكن */
  --footerMuted: rgba(22,22,22,.65);
  --footerLine: rgba(22,22,22,.12);
  --footerAccent: #c33;         /* أكسنت أحمر */
}

/* Main footer container */
.uFooter{
  background: var(--footerBg);
  color: var(--footerInk);
  border-top: 1px solid var(--footerLine);
  padding-block: 28px 18px;
}

/* prevent any inherited "white text" */
.uFooter *{
  color: inherit;
}

/* Grid */
.uFooter__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 22px;
  align-items: start;
}

/* Headings */
.uFooter__h{
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;
  color: var(--footerInk);
}

/* Links */
.uFooter__link{
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
  padding: 6px 0;
  color: var(--footerInk);
  opacity: .92;
  text-align: start;                 /* مهم: يشتغل RTL/LTR */
}

.uFooter__link:hover{
  opacity: 1;
  color: var(--footerAccent);
}

/* mini contact */
.uFooter__contactMini{
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.uFooter__miniLink{
  text-decoration: none;
  font-size: 13px;
  color: var(--footerMuted);
  text-align: start;
}

.uFooter__miniLink:hover{
  color: var(--footerInk);
}

/* Social icons row */
.uFooter__social{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-start; /* default */
  margin-top: 6px;
}

.uFooter__ico{
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--footerCard);
  border: 1px solid var(--footerLine);
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.uFooter__ico svg{
  width: 20px;
  height: 20px;
  fill: currentColor;
  color: var(--footerInk);
  opacity: .9;
}

.uFooter__ico:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.88);
  border-color: rgba(195,51,51,.35);
}

.uFooter__ico:hover svg{
  color: var(--footerAccent);
  opacity: 1;
}

/* Bottom line */
.uFooter__bottom{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--footerLine);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--footerMuted);
}

.uFooter__sep{
  opacity: .45;
}

/* =========================
   RTL / LTR alignment (automatic)
========================= */

/* everything aligns “start” automatically,
   but social row direction we enforce for cleanliness */

html[dir="rtl"] .uFooter{
  direction: rtl;
}
html[dir="rtl"] .uFooter__social{
  justify-content: flex-start; /* start = يمين بالـ RTL */
}

html[dir="ltr"] .uFooter{
  direction: ltr;
}
html[dir="ltr"] .uFooter__social{
  justify-content: flex-start; /* start = يسار بالـ LTR */
}

/* =========================
   Responsive: Mobile 2 Columns
========================= */

/* Tablet -> 2 columns */
@media (max-width: 980px){
  .uFooter__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phone -> still 2 columns (less scroll) */
@media (max-width: 640px){
  .uFooter{
    padding-block: 20px 14px;
  }

  .uFooter__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 14px;
  }

  .uFooter__h{
    font-size: 13px;
    margin-bottom: 8px;
  }

  .uFooter__link{
    font-size: 13px;
    padding: 5px 0;
  }

  .uFooter__ico{
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }
}

/* Very small screens: keep 2 columns but tighten */
@media (max-width: 380px){
  .uFooter__grid{
    gap: 12px 10px;
  }
  .uFooter__ico{
    width: 38px;
    height: 38px;
  }
}

/* =========================================================
   TOPBAR — make text lighter & less dominant
========================================================= */

/* روابط التوب بار */
.topbar__nav a{
  font-weight: 600 !important;          /* كان 900 — ثقيل زيادة */
  color: rgba(0,0,0,.65) !important;    /* أخف بصرياً */
  letter-spacing: .2px;                 /* ينعّم الإحساس */
}

/* hover: يبرز بدون ما يصير فاقع */
.topbar__nav a:hover{
  color: rgba(0,0,0,.85) !important;
  background: rgba(0,0,0,.04);
}

/* العنصر النشط (الصفحة الحالية) */
.topbar__nav a.active,
.topbar__nav a[aria-current="page"]{
  font-weight: 700 !important;
  color: rgba(0,0,0,.95) !important;
  background: transparent !important;
}

/* زر EN */
.topbar .langBtn,
.topbar .lang,
.topbar .langSwitch{
  font-weight: 600 !important;
  color: rgba(0,0,0,.6) !important;
}
/* =========================
   TOPBAR CTA (Contact button) fix
========================= */

.topbar .pillBtn--primary,
.topbar a.pillBtn--primary{
  background: #e11d48 !important;  /* نفس روح الأحمر */
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  box-shadow: 0 10px 26px rgba(225,29,72,.22) !important;
}

.topbar .pillBtn--primary:hover{
  filter: brightness(1.05);
}

/* لو النص بعده يطلع أسود بسبب ستايل عام */
.topbar .pillBtn--primary *{
  color: #fff !important;
}

/* للموبايل: صغّره أكثر حتى ما يزحم */
@media (max-width: 520px){
  .topbar .pillBtn--primary{
    padding: 9px 12px !important;
    font-size: 12px !important;
  }
}