@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900;1000&display=swap');
:root{
  --bg: #e9e4dc;
  --ink: #111;
  --muted: rgba(0,0,0,.64);

  --glass: rgba(255,255,255,.58);
  --glass2: rgba(255,255,255,.42);
  --stroke: rgba(0,0,0,.10);

  --shadow: 0 18px 55px rgba(0,0,0,.16);
  --shadowSoft: 0 10px 28px rgba(0,0,0,.12);

  --radius: 22px;
  --radiusLg: 28px;

  --accent: #b0161b; /* أحمر أبعاد العراق */
  --accent2: rgba(176,22,27,.12);

  --wrap: min(1120px, calc(100% - 28px));
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: radial-gradient(1200px 600px at 50% 10%, rgba(255,255,255,.75), transparent 55%),
              linear-gradient(180deg, #efe9e1, #e6e0d8 60%, #e9e4dc);
}


/* WRAP */
.wrap{width: var(--wrap); margin-inline:auto}

/* TOPBAR */
.topbar{
  position: sticky;
  top: 12px;
  z-index: 50;
  padding: 0;
}
.topbar__inner{
  width: var(--wrap);
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;

  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 12px 14px;
  box-shadow: var(--shadowSoft);
}

.topbar__nav{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}
.topbar__link{
  text-decoration:none;
  color: rgba(0,0,0,.72);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 999px;
}
.topbar__link:hover{
  background: rgba(255,255,255,.55);
}

.langPill{
  display:flex;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  overflow:hidden;
}
.langPill__btn{
  appearance:none;
  border:0;
  background: transparent;
  padding: 8px 10px;
  font-weight: 800;
  font-size: 12px;
  cursor:pointer;
  color: rgba(0,0,0,.62);
}
.langPill__btn.isActive{
  color: #fff;
  background: rgba(0,0,0,.78);
}

/* HERO */
.oHero{margin-top: 18px}
.oHero__media{
  position: relative;
  height: clamp(340px, 52vh, 520px);
  border-radius: var(--radiusLg);
  overflow:hidden;
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}
.oHero__img{
  width:100%; height:100%;
  object-fit: cover;
  object-position: center;
  display:block;
  transform: scale(1.01);
}
.oHero__shade{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.12) 52%, rgba(0,0,0,.55));
}
.oHero__content{
  position:absolute; inset:0;
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: clamp(18px, 3.2vw, 28px);
  color:#fff;
}
.oHero__tag{
  align-self: flex-start;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
}
.oHero__title{
  margin:0;
  font-size: clamp(22px, 3.2vw, 38px);
  letter-spacing: .2px;
}
.oHero__desc{
  margin:0;
  max-width: 70ch;
  color: rgba(255,255,255,.86);
  line-height: 1.7;
  font-weight: 600;
}

.oHero__cta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius: 999px;
  padding: 12px 14px;
  font-weight: 900;
  font-size: 14px;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active{transform: translateY(1px)}
.btn--primary{
  background: var(--accent);
  color:#fff;
  box-shadow: 0 14px 35px rgba(176,22,27,.28);
}
.btn--primary:hover{background: #9f1317}
.btn--ghost{
  background: rgba(255,255,255,.14);
  color:#fff;
  border-color: rgba(255,255,255,.24);
}
.btn--ghost:hover{background: rgba(255,255,255,.18)}

/* SECTIONS */
.oSection{
  margin: 18px auto 0;
  padding: 18px 0;
}
.oHead{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.oH2{
  margin:0;
  font-size: 20px;
  letter-spacing: .2px;
}
.oP{
  margin:0;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.8;
}

/* Steps */
.oSteps{
  list-style:none;
  margin: 0;
  padding: 0;
  display:grid;
  gap: 10px;
}
.oStep{
  display:flex;
  gap: 12px;
  align-items:flex-start;

  background: var(--glass2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadowSoft);
  padding: 14px;
}
.oStep__n{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  background: rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.10);
}
.oStep__h{
  margin: 0 0 6px 0;
  font-size: 16px;
}
.oStep__p{
  margin:0;
  color: var(--muted);
  line-height: 1.8;
  font-weight: 650;
}

/* Split */
.oSection--split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.oCard{
  background: var(--glass2);
  border: 1px solid var(--stroke);
  border-radius: var(--radiusLg);
  box-shadow: var(--shadowSoft);
  padding: 16px;
}
.oBullets{margin-top: 10px; display:grid; gap: 10px}
.oBullet{display:flex; gap: 10px; align-items:flex-start}
.oDot{
  width: 10px; height: 10px;
  border-radius: 99px;
  margin-top: 8px;
  background: var(--accent);
  box-shadow: 0 8px 18px rgba(176,22,27,.25);
}

/* FORM */
.oForm{
  background: var(--glass2);
  border: 1px solid var(--stroke);
  border-radius: var(--radiusLg);
  box-shadow: var(--shadowSoft);
  padding: 16px;
}
.oGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.oField{display:grid; gap: 8px}
.oField--full{grid-column: 1 / -1}
.oLabel{
  font-weight: 900;
  font-size: 13px;
  color: rgba(0,0,0,.72);
}
.oInput, .oTextarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.72);
  outline: none;
  font-weight: 700;
}
.oInput:focus, .oTextarea:focus{
  border-color: rgba(176,22,27,.45);
  box-shadow: 0 0 0 4px var(--accent2);
}
.oActions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.oFine{
  margin-top: 10px;
  color: rgba(0,0,0,.55);
  font-weight: 650;
  line-height: 1.7;
}

/* =========================
   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;
  }
}
/* ===== Footer links stacking fix (stop links from going inline) ===== */

.uFooter__col{
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.uFooter__col .uFooter__link{
  display: block;          /* أهم سطر */
  width: 100%;
  max-width: 100%;
  white-space: normal;     /* يخليها تنزل سطر إذا طويلة */
  padding: 6px 0;
}

/* إذا تريد مسافة مرتبة بين الروابط */
.uFooter__col{
  gap: 2px;
}

/* =========================================================
   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;
}

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');

body{
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* نفس شريط about: كبسولة زجاج */
.gTopbar{
  position: sticky;
  top: 14px;
  z-index: 999;
}

.gTopbar__inner{
  width: min(1120px, calc(100% - 28px));
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;

  padding: 12px 16px;
  border-radius: 999px;

  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.10);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow: 0 14px 35px rgba(0,0,0,.14);
}

/* الروابط بالوسط */
.gTopbar__nav{
  justify-self: center;
  display: flex;
  gap: 18px;
  align-items: center;
}

.gTopbar__link{
  text-decoration: none;
  color: rgba(0,0,0,.70);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 999px;
  transition: background .12s ease, color .12s ease;
}

.gTopbar__link:hover{
  background: rgba(255,255,255,.6);
  color: rgba(0,0,0,.92);
}

/* زر اللغة واحد - دائري مثل الصورة */
.gTopbar__lang{
  justify-self: end;
  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.65);

  font-weight: 900;
  font-size: 12px;
  color: rgba(0,0,0,.78);
  cursor: pointer;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

.gTopbar__lang:hover{
  background: rgba(255,255,255,.78);
}

/* موبايل: يبقى سطر واحد */
@media (max-width: 560px){
  .gTopbar{ top: 10px; }

  .gTopbar__inner{
    border-radius: 22px;
    padding: 10px 10px;
  }

  .gTopbar__nav{
    gap: 8px;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .gTopbar__link{
    font-size: 13px;
    padding: 8px 8px;
    white-space: nowrap;
  }

  .gTopbar__lang{
    width: 40px;
    height: 40px;
  }
}
.gTopbar__lang{
  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.65);

  font-family: "Cairo", sans-serif;
  font-weight: 800;
  font-size: 12px;
  color: rgba(0,0,0,.75);

  cursor: pointer;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

.gTopbar__lang:hover{
  background: rgba(255,255,255,.8);
}
@media (max-width: 992px){
  .oSection--split{
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .oSection--split .oCard{
    width: 100%;
  }
}