html, body{width:100%; overflow-x:hidden;}
  :root{
  --bg-main:#ffffff;
  --bg-soft:#FBF7F0;
  --card:#ffffff;
  --border:#E6D7BF;
  --text:#2B1A0F;
  --muted:#6F5B45;
  --accent:#C9A24D;
  --accent-soft:#D9B56A;
}
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family:"Tajawal",system-ui,sans-serif;
    background:var(--bg-main);
    color:var(--text);
    line-height:1.9;
  }
  section{padding:110px 90px;position:relative}
  h1,h2,h3{margin:0 0 20px;font-weight:600}
  p{color:var(--muted)}
  .center{text-align:center}

  /* NAVBAR */
  .main-navbar{background-color:#111;padding:15px 0;color:#fff;border-bottom:1px solid #333}
  .container{width:90%;max-width:1200px;margin:auto}
  .navbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
  .logo{display:flex;align-items:center;gap:10px;color:#fff}
  .logo img{height:50px}
  .logo span{font-weight:700;line-height:1.2}
  .logo small{font-size:11px;color:#ccc}
  .nav-links{list-style:none;display:flex;gap:22px;padding:0;margin:0;flex-wrap:wrap}
  .nav-links a{color:#fff;text-decoration:none;font-size:14px;transition:color .3s}
  .nav-links a:hover{color:var(--accent)}
  .extras{display:flex;align-items:center;gap:14px}
  .extras a{color:#fff;text-decoration:none;font-size:14px}

  @media(max-width:980px){
    section{padding:80px 22px}
    .nav-links{gap:14px}
  }

  /* COVER */
  .cover{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:
      radial-gradient(circle at 20% 10%, #C9A24D, transparent 40%),
      radial-gradient(circle at 80% 90%, #FBF7F0, transparent 40%);
  }
  .nahj-logo{width:780px;max-width:100%;height:auto;display:block;margin:0 auto 30px}

  /* =========================================================
     HERO (بدون بروتوتايب) – متناسق مع هوية نهج
  ========================================================= */
  .nahj-hero{
    padding:0 !important; /* يلغي padding الافتراضي للـ section */
    position:relative;
    overflow:hidden;
    text-align:right;
    direction:rtl;

    /* الخلفية صارت IMG داخل الهيرو */
    background:none;
  }

  /* صورة الهيرو كطبقة خلفية */
  .hero-bg-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:left center; /* الأشخاص يسار + فراغ يمين للنص */
    display:block;
    z-index:0;
  }

  .nahj-hero__overlay{
    position:absolute;
    inset:0;
    z-index:1;
    /* ✅ تظليل أخف + أوضح للنص (فتحناه أكثر) */
    background:
      linear-gradient(90deg,
        rgba(26,17,10,.12) 0%,
        rgba(26,17,10,.62) 55%,
        rgba(26,17,10,.72) 100%
      );
  }

  .nahj-hero__container{
    position:relative;
    z-index:2;
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:120px 0;
  }

  .nahj-hero__content{
    max-width:720px;
    /* ✅ إجبار لون نص الهيرو يكون أبيض وواضح */
    color:#ffffff;
  }

  /* ✅ دفع محتوى الهيرو لليمين أكثر على الشاشات الواسعة
     بدل ما يكون “بالنص” بسبب max-width حق .container */
  .nahj-hero .nahj-hero__container{
    width:95%;
    max-width:1400px;
    margin-right:0;
    margin-left:auto;
    padding-right:70px;
  }

  @media(max-width:980px){
    .nahj-hero .nahj-hero__container{
      width:92%;
      padding-right:0;
      margin:0 auto;
    }
  }

  .hero-badge{
    width:fit-content;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(184,141,65,.35);
    background:rgba(26,17,10,.45);
    color:rgba(247,241,232,.95);
    font-weight:700;
    font-size:14px;
    margin-bottom:18px;
    backdrop-filter: blur(10px);
  }
  .hero-badge i{color:var(--accent);}

  .hero-title{
    /* ✅ أبيض + واضح (بدون غمقان) */
    color:#ffffff !important;
    font-size:46px;
    line-height:1.25;
    margin:0 0 14px;
    letter-spacing:.2px;
    text-shadow:0 10px 28px rgba(0,0,0,.55);
  }

  .hero-subtitle{
    color:#ffffff !important;
    opacity:.92;
    font-size:17px;
    line-height:1.9;
    margin:0 0 22px;
    text-shadow:0 10px 22px rgba(0,0,0,.35);
  }

  .hero-subtitle--long{
    max-width:640px;
  }


  

  /* ===== Hero text (Premium / Elegant) ===== */
  .hero-eyebrow{
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(201,162,77,.35);
    background: rgba(26,17,10,.32);
    color: rgba(255,255,255,.92);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .35px;
    margin-bottom: 18px;
    backdrop-filter: blur(10px);
  }
  .hero-eyebrow__dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 5px rgba(201,162,77,.18);
    flex: 0 0 8px;
  }

  .hero-title{
    font-size: clamp(30px, 3.2vw, 54px);
    line-height: 1.18;
    margin: 0 0 16px;
    letter-spacing: .25px;
  }
  .hero-title__accent{
    color: var(--accent);
  }

  .hero-subtitle--elegant{
    max-width: 620px;
    padding-right: 14px;
    border-right: 2px solid rgba(201,162,77,.55);
  }

  @media (max-width: 520px){
    .hero-eyebrow{font-size: 12px;}
    .hero-subtitle--elegant{border-right-width: 1px;}
  }
.hero-points{
    display:flex;
    flex-wrap:wrap;
    gap:10px 14px;
    margin:0 0 26px;
  }

  .hero-point{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid rgba(184,141,65,.22);
    background:rgba(26,17,10,.35);
    color:rgba(255,255,255,.95);
    font-size:14px;
  }
  .hero-point i{color:var(--accent);}

  /* ✅ سطر "نهج باختصار" والنص المتحرك */
  .nahj-hero .typing-label{color:rgba(255,255,255,.90) !important;}
  .nahj-hero .hero-text{color:#ffffff !important;}

  .hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:18px;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 18px;
    border-radius:14px;
    text-decoration:none;
    font-weight:800;
    font-size:14px;
    border:1px solid transparent;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  }

  .btn:hover{transform:translateY(-2px);}

  .btn-primary{
    background:linear-gradient(135deg, rgba(184,141,65,1), rgba(210,167,83,.95));
    color:#1a110a;
    box-shadow:0 14px 30px rgba(0,0,0,.35);
  }
  .btn-primary:hover{box-shadow:0 18px 38px rgba(0,0,0,.45);}

  .btn-ghost{
    background:rgba(26,17,10,.35);
    border-color:rgba(184,141,65,.45);
    /* ✅ كان غامق على خلفية الهيرو */
    color:rgba(255,255,255,.92);
  }
  .btn-ghost:hover{background:rgba(26,17,10,.48);}

  .hero-typing{
    display:flex;
    align-items:center;
    gap:10px;
    color:rgba(247,241,232,.78);
    font-size:14px;
  }
  .typing-label{opacity:.9;}

  @media(max-width:980px){
    .nahj-hero__container{padding:100px 0;}
    .hero-title{font-size:34px;}
  }

  @media(max-width:520px){
    .hero-title{font-size:28px;}
    .hero-subtitle{font-size:15px;}
    .hero-points{flex-direction:column;}
    .hero-point{width:100%;}
  }

  /* Typing */
  .hero-text{
    font-size:22px;font-weight:700;letter-spacing:.5px;color:rgba(247,241,232,.92);
    display:inline-block;margin-top:10px;position:relative;
  }
  .hero-text::after{
    content:"";display:inline-block;width:2px;height:22px;background:var(--accent);
    margin-right:6px;animation:blink 1s infinite;vertical-align:middle;
  }
  @keyframes blink{0%,50%,100%{opacity:0}25%,75%{opacity:1}}

  /* Quote intro (رسالتنا) */
  .nahj-quote{
    padding:70px 90px;
    background:#fff;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:35px;
    direction:rtl;
  }
  .nahj-quote .q-img{flex:1 1 320px;text-align:center}
  .nahj-quote .q-img img{max-width:100%;border-radius:20px;box-shadow:0 10px 25px rgba(0,0,0,0.1)}
  .nahj-quote .q-text{flex:1 1 620px;padding-right:10px}
  .nahj-quote .q-text p{font-size:22px;color:#2b2b2b;margin:0 0 18px;line-height:1.9}
  .nahj-quote .q-text p span{font-size:40px;color:var(--accent)}
  .nahj-quote .q-text h4{color:var(--accent);margin:0;font-size:18px}
  @media(max-width:900px){.nahj-quote{padding:55px 22px}.nahj-quote .q-text p{font-size:18px}}

  /* ABOUT */
  .nahj-about-wrapper{
    padding:120px 90px;
    background:linear-gradient(135deg,#ffffff,#FBF7F0);
    direction:rtl;
  }
  .nahj-about-container{max-width:1100px;margin:auto}
  .nahj-block{margin-bottom:70px}
  .nahj-badge{display:inline-block;color:var(--accent);font-weight:700;font-size:18px;margin-bottom:18px}
  .nahj-block h2{font-size:42px;color:var(--text);margin-bottom:22px;line-height:1.4}
  .nahj-block p{font-size:20px;line-height:2;color:var(--muted);margin-bottom:14px}
  .nahj-divider{width:80px;height:4px;background:var(--accent);margin:50px 0;border-radius:4px}
  @media(max-width:900px){
    .nahj-about-wrapper{padding:80px 22px}
    .nahj-block h2{font-size:32px}
    .nahj-block p{font-size:18px}
  }

  
/* =========================================================
   SERVICES SECTION | قسم خدماتنا (السكشن كامل)
   يحتوي على:
   1) عنوان وخلاصة الخدمات
   2) مجالات البرامج التدريبية
   3) إدارة وتشغيل المشاريع التدريبية
   4) الحقائب التدريبية
========================================================= */

/* ===== الحاوية الرئيسية لقسم خدماتنا ===== */
/* ===== خدماتنا | مجالات البرامج التدريبية (بطاقات عريضة) ===== */

/* ===== خدماتنا | مجالات البرامج التدريبية (بطاقات أوضح وأفخم) ===== */
/* ===== عنوان قسم خدماتنا ===== */
/* ===== عنوان قسم خدماتنا – ستايل راقي ===== */
.svc-tag{
  display:block;
  margin:0 auto 22px;
  width:fit-content;

  padding:0 0 8px;
  background:none;
  border:none;

  color:var(--text);
  font-size:27px;
  font-weight:700;
  letter-spacing:.6px;
  text-align:center;
  position:relative;
}

/* خط سفلي أنيق */
.svc-tag::after{
  content:"";
  display:block;
  width:34px;
  height:2px;
  background:var(--accent);
  margin:10px auto 0;
  border-radius:2px;
  opacity:.85;
}



.svc-fields-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:20px;
  margin-top:30px;
}

/* إلغاء تنسيق القوائم */
.svc-fields-grid ul{
  list-style:none;
  margin:0;
  padding:0;
  display:contents;
}

/* البطاقة */
.svc-fields-grid li{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.03)
    );
  border:1.5px solid rgba(210,167,83,.35);
  border-radius:16px;

  padding:26px 20px;
  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;

  min-height:155px;

  box-shadow:
    0 10px 22px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.04);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.svc-fields-grid li:hover{
  transform:translateY(-6px);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,.05)
    );
  border-color:var(--accent);
  box-shadow:
    0 18px 36px rgba(0,0,0,.28);
}

/* الأيقونة */
.svc-fields-grid li i{
  font-size:28px;
  color:var(--accent);
  line-height:1;
}

/* النص */
.svc-fields-grid li{
  font-size:16px;
  color:var(--text);
  font-weight:600;
  line-height:1.5;
}

/* Responsive */
@media (max-width:1200px){
  .svc-fields-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:850px){
  .svc-fields-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .svc-fields-grid{grid-template-columns:1fr}
}


/* =========================================================
   (3) إدارة وتشغيل المشاريع التدريبية
   - وصف الخدمة
   - بطاقة تفصيل المهام
========================================================= */
/* ===== مسار تشغيلي أفقي (غير مكرر بصريًا) ===== */

/* ===== تشغيل المشاريع – مسار U أفقي ===== */
/* ✅ الحاوية العامة لقسم إدارة وتشغيل المشاريع التدريبية */
.svc-ops {
  margin: 120px 0; /* مسافة علوية وسفلية تفصل السكشن */
  text-align: center; /* توسيط العناوين */
}

/* ✅ عنوان القسم الداخلي (مثل "مهام إدارة وتشغيل المشاريع التدريبية") */
.ops-title {
  margin-bottom: 36px;
  font-size: 18px;
  font-weight: 600;
  color: #fff; /* اللون الأساسي للنص */
}

/* ✅ الحاوية التي تحتوي على المسار والنقاط */
.ops-path-wrap {
  position: relative;
  height: 200px; /* ارتفاع يسمح بعرض المسار والنقاط */
  margin-bottom: 40px; /* مسافة أسفل المنحنى */
}

/* ✅ الـ SVG الخاص بالمنحنى */
.ops-path-wrap svg {
  width: 100%;  /* يمتد بعرض كامل الحاوية */
  height: 200px; /* يطابق ارتفاع الحاوية */
}

/* ✅ العناوين (labels) أسفل النقاط مباشرة */
.ops-labels {
  position: absolute;
  bottom: 0; /* تثبيت عند أسفل الحاوية */
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between; /* توزيع العناوين تحت النقاط */
  padding: 0 140px; /* المسافة بين الأطراف لضبط المحاذاة */
}

/* ✅ نمط كل عنوان تحت كل نقطة (مثل التحضير، التشغيل، المخرجات) */
.ops-labels span {
  color: var(--accent); /* اللون الأساسي المميز */
  font-weight: 600;
  font-size: 14px;
}

/* ✅ القوائم الخاصة بالتفاصيل (3 أعمدة تحت النقاط) */
.ops-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* تقسيم الأعمدة بالتساوي */
  gap: 40px; /* مسافة بين الأعمدة */
  max-width: 1000px;
  margin: 0 auto; /* توسيط الكتلة */
  text-align: right; /* اتجاه النصوص داخل القوائم */
}

/* ✅ كل قائمة من الثلاث (ul): التحضير / التشغيل / المخرجات */
.ops-columns ul {
  list-style: none; /* إزالة الرموز الافتراضية */
  padding: 0;
  margin: 0;
}

/* ✅ كل عنصر داخل القائمة */
.ops-columns li {
  position: relative;
  padding-right: 14px; /* مسافة للنقطة التي سنضيفها */
  margin-bottom: 10px;
  font-size: 15px;
  color: rgba(255,255,255,.75); /* لون خافت قليلاً */
}

/* ✅ رمز التعداد "•" قبل كل عنصر */
.ops-columns li::before {
  content: "•";
  position: absolute;
  right: 0; /* وضع النقطة على اليمين */
  color: var(--accent); /* بلون مميز */
}

/* ✅ استجابة للموبايل: تعديل الأعمدة */
@media (max-width: 900px) {
  .ops-columns {
    grid-template-columns: 1fr; /* عمود واحد فقط في الموبايل */
    gap: 24px;
    text-align: center; /* وسط النص في الموبايل */
  }

}
#label-prep {
  transform: translateX(-45px);   /* تحريك لليمين */
}

#label-ops {
  transform: translateX(-10px);   /* تحريك لليسار */
}

#label-output {
  transform: translateX(45px);   /* تحريك لليمين أكثر */
}
/* التحكم بكل عمود بشكل منفصل */
.ops-col {
  display: flex;
  justify-content: center;
}

/* ✅ تحريك لليمين أو اليسار */
.col-prep {
  transform: translateX(30px);  /* يمين */
}

.col-ops {
  transform: translateX(-10px);   /* ثابت في المنتصف */
}

.col-output {
  transform: translateX(-45px); /* يسار */
}

/* تكبير عناوين الفئات (التحضير - التشغيل - المخرجات) */
.ops-labels span {
  color: var(--accent);
  font-weight: 700;
  font-size: 18px; /* ← بدلاً من 14px */
}

/* تكبير محتوى القوائم */
.ops-columns li {
  position: relative;
  padding-right: 14px;
  margin-bottom: 12px;
  font-size: 17px; /* ← بدلاً من 15px */
  color: rgba(255,255,255,.75);
}

.nahj-projects h3 {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
}

.nahj-projects p {
  font-size: 18px;
  color: rgba(255,255,255,.75);
  line-height: 1.8;
}

.ops-title {
  margin-bottom: 36px;
  font-size: 24px;  /* ← العنوان الفرعي */
  font-weight: 700;
  color: #fff;
}


/* =========================================================
   (4) الحقائب التدريبية
   - وصف خدمة إعداد وتصميم الحقائب
   - قائمة عناصر الخدمة
========================================================= */
.svc-kits {
  margin-top: 80px;
  padding: 24px 32px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(210,167,83,0.10), rgba(255,255,255,0.02));
  border: 1px solid rgba(210,167,83,0.22);
}

.svc-kits h3 {
  margin-bottom: 10px;
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  text-align: right;
}

.svc-kits p {
  color: rgba(255,255,255,.75);
  margin-bottom: 32px;
  line-height: 1.8;
  font-size: 17px;
  text-align: right;
}

.kits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.kit-card {
  padding: 20px;
  border: 1px solid rgba(210,167,83,0.2);
  border-radius: 16px;
  background-color: rgba(255,255,255,0.02);
  text-align: right;
  transition: transform 0.3s ease;
}

.kit-card:hover {
  transform: translateY(-6px);
}

.kit-card h4 {
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.kit-card p {
  color: rgba(255,255,255,.75);
  font-size: 15px;
  line-height: 1.7;
}


/* =========================================================
   Responsive | استجابة الشاشات
========================================================= */
@media (max-width:1100px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:620px){
  .nahj-services{padding:80px 0}
  .nahj-services h2{font-size:34px}
  .svc-grid{grid-template-columns:1fr}
  .svc-fields-grid{grid-template-columns:1fr}
}


  /* AXES */
  .nahj-axes{padding:100px 80px;background:#f9fbfc;direction:rtl}
  .nahj-axes h2{text-align:right;font-size:36px;color:#2f2a25;margin-bottom:50px}
  .axes-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
  .axis-card{
    position:relative;min-height:360px;border-radius:22px;padding:30px 22px;
    display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden;
    transition:transform .35s ease;
  }
  .axis-card:hover{transform:translateY(-6px)}
  .axis-card::before{
    content:"";position:absolute;inset:0;
    background:repeating-linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.12) 6px,transparent 6px,transparent 16px);
    opacity:.35;
  }
  .axis-card h3{font-size:26px;position:relative;z-index:2}
  .axis-card p{font-size:15px;line-height:1.9;opacity:.95;position:relative;z-index:2;color:#fff}
  .axis-training{background:#2B1A0F}
  .axis-health{background:#6b8e8a}
  .axis-accredit{background:#C9A24D}
  .axis-consult{background:#8a6f55}
  .axis-projects{background:#4f5d5a}
  @media(max-width:1100px){.axes-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:600px){.axes-grid{grid-template-columns:1fr}.nahj-axes{padding:80px 22px}}

  /* Beneficiaries (tracks) */
  .nahj-axes-section{direction:rtl;font-family:"Tajawal",system-ui,sans-serif;background:#fff;margin-bottom:0}
  .nahj-axes-title{padding:70px 80px 30px}
  .nahj-axes-title h2{font-size:38px;margin:0;padding-right:18px;position:relative}
  .nahj-axes-title h2::before{content:"";position:absolute;right:0;top:6px;width:5px;height:38px;background:#b89245;border-radius:4px}
  .nahj-tracks{display:flex;min-height:340px}
  .track{
    position:relative;flex:1;padding:40px;cursor:pointer;transition:.4s;
    display:flex;flex-direction:column;justify-content:center;
  }
  .track h3,.track p,.track .details{color:#fff}
  .track h3{font-size:24px;margin:0 0 10px}
  .track p{font-size:14px;opacity:.92;margin:0}
  .details{max-height:0;overflow:hidden;opacity:0;transition:.4s;font-size:13.5px;line-height:1.8;margin-top:12px}
  .track.active{flex:2.3}
  .track.active .details{max-height:170px;opacity:1}
  .track:not(.active){filter:brightness(.88)}
  .track::after{
    content:"›";position:absolute;right:22px;top:22px;font-size:30px;font-weight:700;color:#fff;opacity:.9;transition:.4s
  }
  .track.active::after{transform:rotate(90deg) scale(1.1);opacity:1}
  .training{background:#0b3a66}
  .health{background:#0f5c4d}
  .accreditation{background:#8f1d2c}
  .consulting{background:#c89b49}
  @media(max-width:900px){
    .nahj-tracks{flex-direction:column}
    .nahj-axes-title{padding:50px 22px 20px}
  }

  
    .nahj-philo-grid{grid-template-columns:1fr;padding:50px 26px}
    .nahj-philo-grid::after{display:none}
    .nahj-timeline{padding-right:80px}
    .nahj-timeline::before,.nahj-dot,.nahj-item::after{right:36px}
    .nahj-card{margin-right:80px}
  

  /* FOOTER */
  .nahj-footer{
    background:#5a2b30;color:#fff;padding:80px 0 40px;width:100%;direction:rtl;
  }
  .footer-grid{
    max-width:1200px;margin:auto;padding:0 30px;
    display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:60px;
  }
  .nahj-footer h4{font-size:20px;margin:0 0 18px;color:#f3dca4}
  .nahj-footer p{font-size:14.5px;line-height:1.9;color:#f5f5f5;margin:0}
  .footer-links ul{list-style:none;padding:0;margin:0}
  .footer-links li{margin-bottom:10px}
  .footer-links a{color:#fff;text-decoration:none;font-size:14px;opacity:.9;transition:.3s}
  .footer-links a:hover{opacity:1;color:#f3dca4}

  .footer-newsletter form{margin-top:10px}
  .footer-newsletter input{
    width:100%;padding:12px 14px;border-radius:8px;border:none;margin:10px 0;
    font-family:inherit;outline:none;
  }
  .footer-newsletter button{
    width:100%;padding:12px;border:none;border-radius:8px;background:#f3dca4;color:#5a2b30;
    font-weight:700;cursor:pointer;transition:.3s
  }
  .footer-newsletter button:hover{background:#e1c283}

  .footer-social{display:flex;gap:14px;margin-top:18px}
  .footer-social a{
    width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;transition:.3s
  }
  .footer-social a:hover{background:#f3dca4;color:#5a2b30}

  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.2);
    margin-top:50px;padding-top:20px;text-align:center;font-size:13px;opacity:.85
  }
  @media(max-width:900px){
    .nahj-footer{padding:60px 0 30px}
    .footer-grid{grid-template-columns:1fr;gap:40px}
  }

  /* =========================================================
     Footer Contact (تقليد تصميم الأيقونات مثل المرجع)
  ========================================================= */
  .footer-contact{
    direction:rtl;
    padding:14px 16px;
    border-radius:18px;
    border:1px solid rgba(201,162,77,.20);
    background:rgba(255,255,255,.03);
  }

  .footer-contact-list{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  .footer-contact-list li{
    display:flex;
    align-items:center;
    gap:14px;
  }

  .footer-contact-icon{
    width:42px;
    height:42px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(201,162,77,.35);
    color:var(--accent);
    flex:0 0 42px;
    box-shadow:0 10px 20px rgba(0,0,0,.20);
  }

  .footer-contact-text{
    display:flex;
    flex-direction:column;
    line-height:1.2;
  }

  .footer-contact-label{
    font-size:12px;
    opacity:.75;
    margin-bottom:4px;
  }

  .footer-contact-text a{
    color:#fff;
    text-decoration:none;
    font-weight:700;
    letter-spacing:.2px;
  }

  .footer-contact-text a:hover{
    color:var(--accent);
  }

/* === تعديل قسم رسالتنا === */
.nahj-quote {
  background: #ffffff !important;
}
.nahj-quote .q-text p {
  color: #808080 !important;
}
.nahj-quote .q-text h4 {
  color: #C9A24D !important;
}


/* PHILOSOPHY - updated with brown-gold colors and compact spacing */
.nahj-philo {
  background: #2f1e0f;
  padding: 60px 40px;
  font-family: "Tajawal", sans-serif;
  color: #fff;
  direction: rtl;
}
.nahj-philo-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 40px;
  align-items: flex-start;
  background: linear-gradient(to left, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-radius: 26px;
  padding: 40px 30px;
  box-shadow: 0 20px 40px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.05);
  position: relative;
}
.nahj-philo-grid::after {
  content: "";
  position: absolute;
  right: 50%;
  top: 40px;
  bottom: 40px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(210,167,83,.3), transparent);
}
.nahj-philo-text h2 {
  font-size: 32px;
  color: #f3dca4;
  margin: 0 0 16px;
}
.nahj-philo-text p {
  font-size: 16px;
  line-height: 1.8;
  color: #e0d8c8;
  margin: 0;
}

.nahj-timeline {
  position: relative;
  padding-right: 90px;
}
.nahj-timeline::before {
  content: "";
  position: absolute;
  right: 44px;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, #C9A24D, rgba(210,167,83,.2), #C9A24D);
}
.nahj-item {
  position: relative;
  margin-bottom: 30px;
}
.nahj-dot {
  position: absolute;
  right: 44px;
  top: 22px;
  transform: translateX(50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(210,167,83,.2);
  z-index: 2;
}
.nahj-item::after {
  content: "";
  position: absolute;
  right: 44px;
  bottom: -24px;
  transform: translateX(50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 7px solid rgba(210,167,83,.7);
}
.nahj-item:last-child::after {
  display: none;
}
.nahj-card {
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 14px 18px;
  margin-right: 90px;
  box-shadow: 0 6px 14px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.04);
}
.nahj-card h4 {
  margin: 0 0 6px;
  font-size: 17px;
  color: #f3dca4;
}
.nahj-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #e6e2d7;
}

@media(max-width:900px){
  .nahj-philo {
    padding: 40px 20px;
  }
  .nahj-philo-grid {
    grid-template-columns: 1fr;
    padding: 30px 20px;
  }
  .nahj-philo-grid::after {
    display: none;
  }
  .nahj-timeline {
    padding-right: 70px;
  }
  .nahj-timeline::before,
  .nahj-dot,
  .nahj-item::after {
    right: 30px;
  }
  .nahj-card {
    margin-right: 70px;
  }
}

/* ===================== NAHJ DARK BRAND THEME =====================
   Palette extracted from identity (deep brown + gold).
   This block overrides the light theme without breaking layout.
*/

:root{
  --bg-main:#ffffff;
  --bg-soft:#FBF7F0;
  --card:#ffffff;
  --border:#E6D7BF;
  --text:#2B1A0F;
  --muted:#6F5B45;
  --accent:#C9A24D;
  --accent-soft:#D9B56A;
}

/* base */
body{background:var(--bg-main); color:var(--text);}
p{color:var(--muted);}

/* navbar */
.main-navbar{
  background:#111;
  border-bottom:1px solid #333;
  backdrop-filter: blur(10px);
}
.logo small{color:#ccc;}
.nav-links a:hover{color:var(--accent);}
.extras a:hover{color:var(--accent);}

/* cover */
.cover{
  background:
    radial-gradient(circle at 18% 15%, rgba(201,162,77,.22), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(217,181,106,.12), transparent 50%),
    linear-gradient(180deg, var(--bg-main), var(--bg-soft));
}
.hero-text{color:rgba(247,241,232,.92);}
.hero-text::after{background:var(--accent);}

/* generic section surfaces */
.nahj-about-wrapper,
.mission-section,
.nahj-axes,
.nahj-axes-section{
  background:linear-gradient(180deg, var(--bg-soft), var(--bg-main));
}

/* about */
.nahj-block h2{color:var(--text);}
.nahj-divider{background:var(--accent);}
.nahj-badge{color:var(--accent);}

/* quote section (if exists) */
.nahj-quote{background:#fff;}
.nahj-quote p{color:var(--text);}
.nahj-quote .quote-mark{color:var(--accent);}
.nahj-quote h4{color:var(--accent);}

/* services */
.nahj-services{background:linear-gradient(180deg, var(--bg-soft), var(--bg-main));}
.nahj-services h2{color:var(--text);}
.svc-card{
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  border:1px solid rgba(201,162,77,.22) !important;
}
.svc-card h3{color:var(--text) !important;}
.svc-card p{color:var(--muted) !important;}
.svc-icon{color:var(--accent) !important;}

/* axes cards */
.nahj-axes{background:linear-gradient(180deg, var(--bg-soft), var(--bg-main));}
.nahj-axes h2{color:var(--text);}
.axis-card p{color:rgba(255,255,255,.90);} /* override global p color */

.axis-training{background:#412610;}
.axis-health{background:#0f2f2a;}
.axis-accredit{background:#8a6b2f;}
.axis-consult{background:#5a2b30;}
.axis-projects{background:#2f3a3a;}

/* beneficiaries */
.nahj-axes-title h2{color:var(--text);}
.nahj-axes-title h2::before{background:var(--accent);}
.track:not(.active){filter:brightness(.9);}
.track::after{color:rgba(247,241,232,.9);}

/* track colors aligned with brand */
.training{background:#2B1A0F;}
.health{background:#0f2f2a;}
.accreditation{background:#5a2b30;}
.consulting{background:#8a6b2f;}

/* philo already dark: ensure text */
.nahj-philo{background:linear-gradient(135deg, var(--bg-main), var(--bg-soft));}
.nahj-philo-text p{color:var(--muted);}
.nahj-philo-text h2{color:var(--accent);}

/* partners */
.partners-section{
  background:linear-gradient(180deg, var(--bg-soft), var(--bg-main));
}
.partners-text h2{color:var(--text);}
.partners-text a{color:var(--accent);}
.logo-card{
  background:rgba(255,255,255,.95);
  box-shadow:0 14px 36px rgba(0,0,0,.35);
}

/* footer */
.nahj-footer{
  background:#5a2b30;
}
.nahj-footer h4{color:var(--accent);}
.footer-bottom{
  border-top:1px solid rgba(184,141,65,.25);
}

.nahj-footer {
  width: 100vw; /* عرض كامل */
  padding: 60px 0;
  color: #fff;
  background: #5a2b30;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer-bottom {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  font-size: 14px;
  border-top: 1px solid rgba(184, 141, 65, 0.25);
  color: rgba(255,255,255,.75);
}

/* small polish */
section{scroll-margin-top:110px;}

/* ===== Inline styles moved from HTML (auto-generated) ===== */
.u1-44c442{padding-top:60px; padding-bottom:60px;}
.u2-342379{padding: 40px 60px; display: flex; align-items: center; justify-content: center; flex-direction: row; gap: 40px; flex-wrap: wrap;; padding-top:60px; padding-bottom:60px;}
.u3-a6307d{flex: 0 0 140px; text-align: center;}
.u4-6a6589{flex: 1; text-align: center;}
.u5-697f4b{font-size: 24px; line-height: 2; color: var(--text); margin-bottom: 12px;}
.u6-ee0d54{font-size: 20px; margin-top: 10px; color: var(--accent); text-align: center;}
.u7-cfdd37{margin-top: 40px;padding: 80px 0;; padding-top:60px; padding-bottom:60px;}
.u8-925592{display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; justify-content: center;}
.u9-b05138{flex: 0 0 100px; display: flex; flex-direction: column; align-items: center; gap: 60px;}
.u10-20b7f3{writing-mode: vertical-rl; transform: rotate(180deg); font-size: 18px; font-weight: bold; color: var(--accent);}
.u11-db4caa{width: 2px; height: 40px; background: var(--accent);}
.u12-34c686{flex: 1; min-width: 260px; max-width: 850px; display: flex; flex-direction: column; gap: 50px;}
.u13-cdf92a{font-size: 26px; margin-bottom: 14px; color: #fff;}
.u14-de1c02{font-size: 17px; line-height: 1.9; color: rgba(255,255,255,.75); margin-bottom: 14px;}
.u15-c04822{font-size: 17px; line-height: 1.9; color: rgba(255,255,255,.75);}
.u16-d45f6f{padding: 60px 0;}
.u17-882f08{font-size: 30px; margin-bottom: 12px;}
.u18-819c4a{font-size: 16px; line-height: 1.8; max-width: 600px; margin: 0 auto;}
.u19-2e0cdb{display:none;margin-top:10px;color:#f3dca4;font-weight:700;}


/* PARTNERS SECTION */
.partners-section {
  background: linear-gradient(180deg, var(--bg-soft), var(--bg-main));
  padding: 100px 0;
  direction: inherit;
}
.partners-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: 80px;
  padding: 0 40px;
}
.partners-text {
  text-align: start;
}
.partners-text h2 {
  color: #fff;
  font-size: 34px;
  line-height: 1.6;
  margin-bottom: 18px;
}
.partners-text a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

/* الشعارات */
.logos-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}
.logos-row {
  overflow: hidden;
}
.logos-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.logo-card {
  background: #fff;
  border-radius: 18px;
  width: 220px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(0,0,0,0.3);
}
.logo-card img {
  max-width: 140px;
  max-height: 60px;
  object-fit: contain;
}

/* حركة الصفوف */
.row-1 .logos-track {
  animation: scroll-right 18s linear infinite;
}
.row-2 .logos-track {
  animation: scroll-left 18s linear infinite;
}
.row-3 .logos-track {
  animation: scroll-right 18s linear infinite;
}

/* keyframes */
@keyframes scroll-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Responsive */
@media (max-width: 980px) {
  .partners-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .partners-text {
    text-align: center;
  }
}




/* خلي منطقة اللوقوهات LTR وتبدأ من اليسار */
.logos-wrapper,
.logos-row,
.logos-track{
  direction: ltr;
}

.logos-row{
  width: 100%;
  overflow: hidden;
}

.logos-track{
  display: flex;
  justify-content: flex-start;  /* يبدأ من اليسار */
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
}

/* حركة أساسية تبدأ من اليسار */
@keyframes scroll-left{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* الصف 2 يسار */
.row-2 .logos-track{
  animation: scroll-left 18s linear infinite;
}

/* الصف 1 و3 يمين (نفس الحركة لكن reverse) */
.row-1 .logos-track,
.row-3 .logos-track{
  animation: scroll-left 18s linear infinite;
  animation-direction: reverse;
}


/* ===== FIX: خلّي سكشن الشركاء full-bleed واللوقوهات تلصق أقصى اليسار ===== */
.partners-section{
  /* يلغي padding الافتراضي اللي ينحط على كل section */
  padding: 100px 0 !important;
  overflow: hidden;
}

/* خليه بعرض الشاشة مو max-width */
.partners-container{
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;

  /* أهم سطرين: لا تترك padding يسار */
  padding-left: 0 !important;
  padding-right: 90px;   /* خلي مسافة للنص يمين (عدليها لو تبين) */

  /* خلي اللوغوهات تاخذ مساحة أكبر */
  grid-template-columns: 1.4fr 1fr;
  gap: 70px;
}

/* تأكيد إن بلوك اللوقوهات يلصق يسار */
.logos-wrapper{
  justify-self: start;
  width: 100%;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* وإذا تبينها تلصق أكثر (اختياري) */
.logos-row{ padding-left: 0 !important; }


/* ===== Partners text controls (تحكم بموقع النص) ===== */
.partners-text{
  /* غيري هذي القيم زي ما تبين */
  --text-shift-x: -120px;  /* سالب = يروح يسار / موجب = يروح يمين */
  --text-shift-y: 0px;    /* موجب = ينزل / سالب = يطلع */

  transform: translate(var(--text-shift-x), var(--text-shift-y));
}

/* تحكم مستقل بالرابط اللي تحت */
.partners-text a{
  --link-shift-x: -80px;  /* سالب = يسار / موجب = يمين */
  --link-shift-y: 0px;    /* موجب = ينزل / سالب = يطلع */

  display: inline-block;
  transform: translate(var(--link-shift-x), var(--link-shift-y));
}



/* ========== فلسفتنا في التدريب – نسخة محسّنة بألوان متناسقة ========== */
.nahj-philo {
  background: #0f2f2a !important; /* كحلي غامق مائل للأخضر */
  padding: 80px 40px !important;
  font-family: "Tajawal", sans-serif !important;
  color: #f6f2e9 !important; /* نص فاتح */
  direction: rtl !important;
}

.nahj-philo-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.5fr !important;
  gap: 50px !important;
  align-items: flex-start !important;
  background: linear-gradient(to left, rgba(255,255,255,0.05), rgba(255,255,255,0.01)) !important;
  border-radius: 26px !important;
  padding: 50px 40px !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.3) !important;
  position: relative !important;
}

.nahj-philo-text h2 {
  font-size: 34px !important;
  color: #caa45d !important; /* ذهبي راقي */
  margin-bottom: 18px !important;
  font-weight: 800 !important;
}

.nahj-philo-text p {
  font-size: 17px !important;
  line-height: 1.9 !important;
  color: #f6f2e9 !important;
  margin: 0 !important;
}

/* الخط العمودي */
.nahj-timeline::before {
  content: "" !important;
  position: absolute !important;
  right: 44px !important;
  top: 0 !important;
  width: 2px !important;
  height: 100% !important;
  background: linear-gradient(to bottom, #caa45d, rgba(202,164,93,.3), #caa45d) !important;
}

/* العناصر */
.nahj-item {
  position: relative !important;
  margin-bottom: 35px !important;
}

.nahj-dot {
  position: absolute !important;
  right: 44px !important;
  top: 24px !important;
  transform: translateX(50%) !important;
  width: 15px !important;
  height: 15px !important;
  border-radius: 50% !important;
  background: #caa45d !important;
  box-shadow: 0 0 0 6px rgba(202,164,93,.2) !important;
  z-index: 2 !important;
}

.nahj-card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(202,164,93,.2) !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  margin-right: 90px !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.05) !important;
  transition: transform .3s ease !important;
}

.nahj-card:hover {
  transform: translateY(-6px) !important;
}

.nahj-card h4 {
  margin: 0 0 8px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #caa45d !important;
}

.nahj-card p {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #f6f2e9 !important;
}

/* السهم بين العناصر */
.nahj-item::after {
  content: "" !important;
  position: absolute !important;
  right: 44px !important;
  bottom: -22px !important;
  transform: translateX(50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 7px solid rgba(202,164,93,.7) !important;
}
.nahj-item:last-child::after {
  display: none !important;
}

/* استجابة للشاشات الصغيرة */
@media(max-width:900px){
  .nahj-philo {
    padding: 50px 22px !important;
  }
  .nahj-philo-grid {
    grid-template-columns: 1fr !important;
    padding: 30px 22px !important;
  }
  .nahj-timeline::before,
  .nahj-dot,
  .nahj-item::after {
    right: 30px !important;
  }
  .nahj-card {
    margin-right: 70px !important;
  }
}
.nahj-philo {
  background: #1c2b35 !important; /* أو استخدمي #2e2e2e لو تبين الرمادي */
}
.nahj-dot,
.nahj-timeline::before,
.nahj-card h4 {
  background: #caa45d !important; /* خلي الذهبي نفسه */
  color: #caa45d !important;
}


/* إصلاح ألوان قسم فلسفتنا بالكامل */
.nahj-philo {
  background: linear-gradient(180deg, #1b130b, #24180e) !important;
}

.nahj-card {
  background: rgba(255, 255, 255, 0.04) !important; /* إزالة الذهبي */
  border: 1px solid rgba(227, 182, 79, 0.2) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) inset !important;
}

.nahj-card h4 {
  color: #e3b64f !important; /* العناوين ذهبية أنيقة */
}

.nahj-card p {
  color: #f9f5ef !important; /* النص أبيض ناعم */
}

.nahj-dot {
  background: #e3b64f !important; /* النقاط الذهبية */
  box-shadow: 0 0 0 6px rgba(227, 182, 79, 0.25) !important;
}

.nahj-item::after {
  border-top: 7px solid rgba(227, 182, 79, 0.5) !important;
}

.nahj-timeline::before {
  background: linear-gradient(to bottom, #e3b64f, rgba(227,182,79,.25), #e3b64f) !important;
}

/* إزالة أي تعبئة أو خلفية صفراء غير مرغوبة */
.nahj-card::before {
  background: none !important;
}

/* === REMOVE the long yellow bar in Philosophy cards === */

/* 1) امنعي أي شريط/خلفية على العنوان نفسه */
.nahj-philo .nahj-card h4{
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
}

/* 2) الغِ أي ::before/::after ممكن يرسم الشريط */
.nahj-philo .nahj-card h4::before,
.nahj-philo .nahj-card h4::after,
.nahj-philo .nahj-card::before,
.nahj-philo .nahj-card::after{
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* 3) ثبتي شكل الكرت (بدون تعبئة ذهبية) */
.nahj-philo .nahj-card{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(227,182,79,0.20) !important;
}


/* ===== تعديل لون النص في قسم رسالتنا (نسعى أن نكون...) ===== */
.nahj-quote .q-text p {
  color: #2b2b2b !important;   /* غامق ومقروء */
  font-weight: 600 !important; /* يبرز الخط */
}

.nahj-quote .q-text span {
  color: #caa45d !important;   /* يخلي علامات الاقتباس بالذهبي */
}

.nahj-quote .q-text h4 {
  color: #caa45d !important;   /* عنوان "رسالتنا" */
  font-weight: 700 !important;
}


/* ===== زر واتساب عائم ===== */
.whatsapp-float {
  position: fixed;
  bottom: 25px;
  left: 25px; /* لو تبينه يمين غيريها إلى right */
  background-color: #25d366; /* لون واتساب */
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 26px;
  width: 60px;
  height: 60px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 999;
  box-shadow: 0 5px 15px rgba(0,0,0,0.25);
  transition: all 0.3s ease;
}


.whatsapp-float .wa-number{
  position:absolute;
  left:70px;
  background:#ffffff;
  color:#1f1f1f;
  padding:8px 12px;
  border-radius:999px;
  font-size:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  opacity:0;
  transform:translateX(-8px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  white-space:nowrap;
}

.whatsapp-float:hover .wa-number{
  opacity:1;
  transform:translateX(0);
}

/* ✅ في وضع الإنجليزي: تطلع الفقاعة للجهة الثانية */
html[dir="ltr"] .whatsapp-float .wa-number{
  left:auto;
  right:70px;
  transform:translateX(8px);
}
html[dir="ltr"] .whatsapp-float:hover .wa-number{
  transform:translateX(0);
}

.whatsapp-float:hover {
  background-color: #1ebe5d;
  transform: scale(1.1);
  box-shadow: 0 8px 22px rgba(0,0,0,0.3);
}

















/* ===================================== */
/* NAHJ BRAND COLORS – FIXED & CLEAN */
/* ===================================== */

:root{
  --nahj-brown-dark:#3B1F0E;
  --nahj-brown:#4A2A14;

  --nahj-gold:#C9A24D;
  --nahj-gold-soft:#D2A753;

  --nahj-beige:#EAD7A1;
  --nahj-beige-light:#F3E7C6;

  --nahj-white:#FFFFFF;
  --nahj-text-dark:#2B1A0F;
  --nahj-text-muted:#D6C28A;
}

/* ===== GLOBAL ===== */
html,body{
  background:var(--nahj-brown-dark)!important;
  color:var(--nahj-white)!important;
}

/* ===== NAVBAR ===== */
.main-navbar{
  background:var(--nahj-brown-dark)!important;
  border-bottom:1px solid var(--nahj-gold-soft)!important;
}

.main-navbar a{
  color:var(--nahj-white)!important;
}

.main-navbar a:hover{
  color:var(--nahj-gold)!important;
}

/* ===== SECTIONS (DARK) ===== */
.cover,
.nahj-axes,
.nahj-philo,
.nahj-axes-section,
.partners-section{
  background:var(--nahj-brown)!important;
}

/* ===== HEADINGS ===== */
section h1,
section h2,
section h3,
section h4{
  color:var(--nahj-gold)!important;
}

/* ===== TEXT ON DARK ===== */
section > p,
section p{
  color:var(--nahj-text-muted)!important;
}

/* ===== CARDS / LIGHT BOXES ===== */
.axis-card,
.track,
.kit-card,
.nahj-card,
.ops-col,
.logo-card{
  background:var(--nahj-beige-light)!important;
  border:1px solid var(--nahj-gold-soft)!important;
}

/* نصوص داخل الكروت */
.axis-card h3,
.track h3,
.kit-card h4,
.nahj-card h4{
  color:var(--nahj-text-dark)!important;
}

.axis-card p,
.track p,
.kit-card p,
.nahj-card p,
.ops-col li{
  color:#5A3A1E!important;
}

/* ===== ICONS ===== */
.axis-card i,
.track i,
.svc-fields-grid i{
  color:var(--nahj-gold)!important;
}

/* ===== BUTTONS ===== */
button,
.footer-newsletter button{
  background:var(--nahj-gold)!important;
  color:var(--nahj-text-dark)!important;
  border:none!important;
}

button:hover{
  background:#B8943A!important;
}

/* ===== QUOTE ===== */
.nahj-quote{
  background:#5A3318!important;
}

.nahj-quote p{
  color:var(--nahj-white)!important;
}

/* ===== FOOTER ===== */
.nahj-footer{
  background:#2B1A0F!important;
}

.nahj-footer p,
.nahj-footer li,
.nahj-footer a{
  color:var(--nahj-text-muted)!important;
}

.nahj-footer h4{
  color:var(--nahj-gold)!important;
}

/* ===== INPUTS ===== */
input{
  background:var(--nahj-beige-light)!important;
  color:var(--nahj-text-dark)!important;
  border:1px solid var(--nahj-gold-soft)!important;
}

/* ===== WHATSAPP ===== */
.whatsapp-float{
  background:var(--nahj-gold)!important;
  color:var(--nahj-text-dark)!important;
}

/* ===== IMAGE 1 – PROCESS BOXES TEXT FIX ===== */

.process-box,
.process-box h4,
.process-box p{
  color: #F3E7C6 !important; /* بيج فاتح */
}

.process-box h4{
  color: #D2A753 !important; /* ذهبي ناعم */
  font-weight: 600;
}



/* ===== IMAGE 2 – BENEFICIARIES CARDS ===== */

.nahj-tracks .track{
  background: #EAD7A1 !important;
  border: 1px solid #C9A24D !important;
  color: #2B1A0F !important;
  transition: all .3s ease;
}

.nahj-tracks .track h3{
  color: #3B1F0E !important;
}

.nahj-tracks .track p{
  color: #5A3A1E !important;
}

/* الكرت النشط */
.nahj-tracks .track.active{
  background: #F3E7C6 !important;
  border: 2px solid #C9A24D !important;
}

/* Hover */
.nahj-tracks .track:hover{
  background: #F3E7C6 !important;
}


/* ===== IMAGE 3 – AXES CARDS ===== */

.axis-card{
  background: linear-gradient(
    135deg,
    #F3E7C6,
    #EFE0B5
  ) !important;

  border: 1px solid #D2A753 !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.15) !important;
}

.axis-card h3{
  color: #3B1F0E !important;
}

.axis-card p{
  color: #5A3A1E !important;
}


/* ===== PROCESS / TIMELINE BOXES TEXT FIX ===== */

/* العناوين */
.process-box h4,
.nahj-item h4,
.accordion-item h4{
  color: #FFFFFF !important;
  font-weight: 600;
}

/* النصوص */
.process-box p,
.nahj-item p,
.accordion-item p{
  color: rgba(255,255,255,0.85) !important;
}

/* لو النص بدون p (مباشر داخل البوكس) */
.process-box,
.nahj-item,
.accordion-item{
  color: rgba(255,255,255,0.85) !important;
}


.nahj-quote .q-text p{
  color: #FFFFFF !important;
  font-weight: 600 !important;
}



/* ============================= */
/* AXIS CARD CONTENT ALIGNMENT */
/* ============================= */

.axis-card{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:36px 28px 70px !important; /* مساحة للسهم */
}

/* محتوى النص */
.axis-content{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:10px;
}

/* العنوان */
.axis-card h3{
  margin:0;
  font-size:20px;
  line-height:1.4;
}

/* الوصف */
.axis-card p{
  margin:0;
  font-size:14.5px;
  line-height:1.9;
}

/* توسيط بصري للكرت الطويل */
.axis-card{
  min-height:320px;
}

/* رفع النص شوي عن السهم */
.axis-content{
  padding-bottom:10px;
}

/* السهم ثابت بأسفل يسار */
.axis-indicator{
  position:absolute;
  bottom:18px;
  left:18px;
}




 /* Partners logos: make cards white + let logo fill card */
  .logo-card{
    background:#ffffff !important;
    padding:0 !important;
    overflow:hidden !important;
  }
  .logo-card img{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    display:block !important;
    padding:10px !important; /* small breathing room while still large */
    box-sizing:border-box !important;
    margin:0 !important;
  }


/* =========================================================
   HERO IMAGE (COVER) — صورة الهيرو العريضة
   الصورة المطلوبة: BB.png
   ========================================================= */

/* اجعل الهيرو بدون حواف/فراغات */
.cover.hero-image{
  padding:0 !important;
  min-height:700px !important;
  height:700px !important;
  background: url("BB.png") center / cover no-repeat !important;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
}

/* لو تبين التركيز على يمين الصورة (المتحدث) غيريها إلى right center */
.cover.hero-image{
  background-position: right center !important;
}

/* طبقة تغميق خفيفة عشان النص يظهر */
.cover.hero-image::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.30);
  z-index:1;
}

/* محتوى الهيرو فوق التغميق */
.hero-overlay{
  position:relative;
  z-index:2;
  padding: 0 18px;
}

/* تصغير اللوقو داخل الهيرو (بدون ما يأثر على أي مكان ثاني) */
.hero-overlay .nahj-logo{
  width: 520px;
  max-width: 92vw;
  margin: 0 auto 18px;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.25));
}

/* نص الهيرو يكون أبيض على الخلفية */
.hero-overlay .hero-text{
  color:#fff;
  text-shadow: 0 6px 18px rgba(0,0,0,.45);
}

.hero-overlay .hero-text::after{
  background: var(--accent);
}

@media (max-width: 768px){
  .cover.hero-image{
    min-height:520px !important;
    height:520px !important;
  }
  .hero-overlay .nahj-logo{
    width: 360px;
  }
}
.hero-bg-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* =========================================================
   LIGHT THEME OVERRIDE (COLORS ONLY) — requested
   ⚠️ لا يغير أي هيكل/مقاسات/مسافات — فقط ألوان
========================================================= */

:root{
  /* نفس ستايل الفاتح المريح */
  --bg-main:#FFFFFF;
  --bg-soft:#FBF7F0;
  --card:#FFFFFF;
  --border:#E6D7BF;
  --text:#2B1A0F;
  --muted:#6F5B45;
  --accent:#C9A24D;
  --accent-soft:#D9B56A;
}

/* خلفية عامة فاتحة */
html,body{
  background:var(--bg-soft) !important;
  color:var(--text) !important;
}

/* السكاشن الأساسية تصير فاتحة بدل الغامق */
.cover,
.nahj-axes,
.nahj-philo,
.nahj-axes-section,
.partners-section,
.nahj-services,
.nahj-about-wrapper{
  background:linear-gradient(180deg, var(--bg-soft), var(--bg-main)) !important;
}

/* العناوين + النصوص */
section h1,
section h2,
section h3,
section h4{
  color:var(--text) !important;
}
section > p,
section p{
  color:var(--muted) !important;
}

/* الكروت / البطاقات */
.axis-card,
.track,
.kit-card,
.nahj-card,
.ops-col,
.logo-card,
.svc-fields-grid li{
  background:var(--card) !important;
  border-color:var(--border) !important;
}

.axis-card h3,
.track h3,
.kit-card h4,
.nahj-card h4{
  color:var(--text) !important;
}

.axis-card p,
.track p,
.kit-card p,
.nahj-card p,
.ops-col li{
  color:var(--muted) !important;
}

/* أيقونات/لمسات ذهبية */
.axis-card i,
.track i,
.svc-fields-grid i{
  color:var(--accent) !important;
}

/* قسم رسالتنا يكون فاتح */
.nahj-quote{
  background:var(--card) !important;
}
.nahj-quote .q-text p{
  color:var(--muted) !important;
}
.nahj-quote .q-text h4{
  color:var(--accent) !important;
}

/* الفوتر يبقى غامق لكن مقروء */
.nahj-footer{
  background:#2B1A0F !important;
}
.nahj-footer h4{
  color:var(--accent) !important;
}
.nahj-footer p,
.nahj-footer li,
.nahj-footer a{
  color:rgba(255,255,255,.82) !important;
}
.footer-bottom{
  border-top:1px solid rgba(201,162,77,.25) !important;
  color:rgba(255,255,255,.78) !important;
}

/* حقول الإدخال */
input{
  background:var(--card) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
}

/* زر واتساب */
.whatsapp-float{
  background:var(--accent) !important;
  color:var(--text) !important;
}


/* =========================================
   Beneficiaries (Tracks) - Light Beige Theme
   Override (ضعه آخر ملف styles.css)
========================================= */

.nahj-axes-section{
  background: #FBF7F0 !important;
}

.nahj-axes-title h2{
  color: #2B1A0F !important;
}

.nahj-tracks{
  background: transparent !important;
  gap: 0;
  border: 1px solid rgba(201,162,77,.35);
}

/* الكروت */
.track{
  background: #DCC9AA !important; /* بني فاتح */
  color: #2B1A0F !important;
  border-left: 1px solid rgba(201,162,77,.35);
  transition: .35s ease;
  position: relative;
}

/* آخر كرت بدون خط */
.track:last-child{
  border-left: 0;
}

.track h3{
  color: #2B1A0F !important;
  font-weight: 800;
}

.track p{
  color: rgba(43,26,15,.75) !important;
}

.track .details{
  color: rgba(43,26,15,.80) !important;
}

/* الكرت الفعال */
.track.active{
  background: #F6ECDD !important;  /* فاتح كريمي */
  flex: 2.3;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  border: 2px solid rgba(201,162,77,.70);
  z-index: 2;
}

/* السهم */
.track::after{
  content:"›";
  color: rgba(201,162,77,.95) !important;
  opacity: 1 !important;
}

.track.active::after{
  transform: rotate(90deg) scale(1.1);
}

/* إلغاء ألوان القديم (أزرق/أخضر/أحمر/ذهبي) */
.training,
.health,
.accreditation,
.consulting{
  background: transparent !important;
}

/* ===== Footer Contact: remove dots + match links style ===== */

/* شيل أي نقاط/علامات ممكن طالعة من before/after */
.footer-contact .contact-list li::before,
.footer-contact .contact-list li::after{
  content: none !important;
}

/* تأكيد ما فيه bullets */
.footer-contact .contact-list{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* نفس ستايل روابط خريطة الموقع */
.footer-contact .contact-list a{
  color: rgba(255,255,255,.78) !important;  /* نفس لون الروابط */
  font-weight: 400 !important;
  text-decoration: none !important;         /* شيل الخط تحت */
  font-size: 15px !important;
  line-height: 1.9;
}

/* hover زي الروابط الثانية */
.footer-contact .contact-list a:hover{
  color: #C9A24D !important;
}

/* ترتيب السطر والمسافات */
.footer-contact .contact-list li{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 10px 0 !important;
}

/* الأيقونات تكون نفس ستايل الأبيض (ناعمة بدون تشويش) */
.footer-contact .icon-circle{
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(201,162,77,.45) !important;
  color: #C9A24D !important;
}

/* شيل أي نقاط ممكن طالعة بسبب text-decoration/underline */
.footer-contact a{
  text-decoration: none !important;
}

/* ===== FIX: remove white dots in footer contact ===== */
.footer-contact ul,
.footer-contact li {
  list-style: none !important;
}

.footer-contact li::before,
.footer-contact li::after {
  content: none !important;
}

.footer-contact a::before,
.footer-contact a::after {
  content: none !important;
}


/* ✅ Force LTR for numbers + emails inside RTL page */
.ltr-number{
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: left !important;
  display: inline-block;
}

/* ✅ Remove any bullets / dots forever */
.footer-contact ul,
.footer-contact li{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-contact li::before,
.footer-contact li::after,
.footer-contact a::before,
.footer-contact a::after{
  content: none !important;
}

/* ✅ Remove underline if موجود */
.footer-contact a{
  text-decoration: none !important;
}

/* ===== Footer Contact | نفس ستايل الروابط ===== */

/* شيل أي كرت / خلفية / إطار */
.footer-contact{
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

/* إلغاء النقاط تمامًا */
.footer-contact ul,
.footer-contact li{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-contact li::before,
.footer-contact li::after{
  content: none !important;
}

/* ترتيب السطر */
.footer-contact .contact-list li{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* الأيقونات بدون دوائر */
.footer-contact i{
  color: #C9A24D;
  font-size: 15px;
}

/* الروابط نفس خريطة الموقع */
.footer-contact a{
  color: rgba(255,255,255,.78);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  direction: ltr;        /* 👈 حل انقلاب الرقم */
  unicode-bidi: embed;  /* 👈 مهم */
}

.footer-contact a:hover{
  color: #C9A24D;
}


/* ✅ GLOBAL MOBILE RESPONSIVE STYLE */

@media (max-width: 992px){
  .axis-content{
    padding: 45px 22px !important;
  }

  .axis-section{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .axis-content img{
    max-width: 100% !important;
    width: 100% !important;
  }

  .footer-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .nahj-footer{
    padding: 45px 18px !important;
  }
}

@media (max-width: 600px){
  .axis-content{
    padding: 28px 16px !important;
    border-radius: 18px !important;
  }

  .axis-content h2{
    font-size: 20px !important;
  }

  .axis-content p{
    font-size: 15px !important;
    line-height: 1.95 !important;
  }

  .navbar{
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .nav-links{
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
  }
}


/* ===== NAV DROPDOWN (محاورنا) ===== */
.nav-dropdown{position:relative;}

/* زر محاورنا */
.nav-dropbtn{
  background:transparent;
  border:none;
  color:#fff;
  font-family:inherit;
  font-size:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 0;
}

/* خلي شكل الزر مثل روابط الهيدر */
.nav-dropbtn:hover{color:var(--accent);}

/* القائمة */
.nav-dropdown-menu{
  position:absolute;
  top:calc(100% + 14px);
  right:0;
  min-width:280px;
  z-index:9999;

  background:#5a2b30;                /* نفس الفوتر */
  border:1px solid rgba(201,162,77,.22);
  border-radius:18px;
  padding:14px 14px 12px;
  box-shadow:0 22px 55px rgba(0,0,0,.35);

  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  pointer-events:none;
  transition:.22s ease;
}

/* عنوان القائمة */
.nav-dropdown-title{
  color:#f3dca4;
  font-weight:800;
  font-size:14px;
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(243,220,164,.18);
}

/* روابط القائمة */
.nav-dropdown-menu a{
  display:block;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  padding:10px 12px;
  border-radius:12px;
  opacity:.95;
  transition:.2s ease;
}

.nav-dropdown-menu a:hover{
  background:rgba(255,255,255,.10);
  color:#f3dca4;
  opacity:1;
}

/* فاصل */
.nav-dropdown-divider{
  height:1px;
  margin:10px 0;
  background:rgba(243,220,164,.18);
}

/* رابط "عرض المحاور داخل الصفحة" */
.nav-dropdown-all{
  font-weight:800;
  border:1px solid rgba(243,220,164,.22);
}

/* فتح القائمة: hover للكمبيوتر + class open للموبايل */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

/* موبايل: نخلي القائمة تنزل تحت بشكل مرتب */
@media(max-width:980px){
  .nav-dropdown-menu{
    position:static;
    transform:none;
    min-width:100%;
    margin-top:12px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  .nav-dropdown.open .nav-dropdown-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
}

/* === FINAL NAV DROPDOWN FIX (KEEP OPEN + CONNECTED) === */
.main-navbar,
.navbar,
.nav-links{ overflow: visible !important; }

.nav-dropdown{ position: relative !important; }

/* القائمة - متصلة مباشرة تحت الزر بدون فراغ */
.nav-dropdown-menu{
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  margin-top: 0 !important;
  transform: translateY(0) !important;
  z-index: 99999 !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* جسر أكبر يمنع تقفيل القائمة أثناء نزول الماوس */
.nav-dropdown-menu::before{
  content: "" !important;
  position: absolute !important;
  top: -28px !important;
  right: 0 !important;
  left: 0 !important;
  height: 28px !important;
}

/* تظل مفتوحة طالما الماوس فوق الزر أو داخل القائمة */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}



/* ✅ FIX نهائي: القائمة متصلة + ما تقفل لما الماوس يدخلها */
.nav-dropdown{
  position: relative !important;
}

/* ✅ خليها ملتصقة تحت الزر مباشرة (تلغي الـ gap اللي يخليها تقفل) */
.nav-dropdown-menu{
  top: 100% !important;
  margin-top: 0 !important;
  transform: translateY(0) !important;
}

/* ✅ جسر يمنع تقفيل القائمة أثناء انتقال الماوس */
.nav-dropdown-menu::before{
  content: "" !important;
  position: absolute !important;
  top: -18px !important;
  left: 0 !important;
  right: 0 !important;
  height: 18px !important;
}

/* ✅ تظل مفتوحة طالما الماوس على الزر أو داخل القائمة */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.hero,
.hero img,
.hero video{
  position: relative !important;
  z-index: 1 !important;
}


/* ===== HEADER فوق كل شي ===== */
.main-navbar{
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;

  z-index: 99999 !important; /* فوق الهيرو والصور */

}

/* =========================================================
   NAV DROPDOWN FIX + إزالة التحديد الأصفر + إزالة أيقونة البحث
   - إزالة رابط "عرض المحاور داخل الصفحة"
   - منع أي هايلايت/خلفية على زر محاورنا
   - تثبيت القائمة وعدم إغلاقها أثناء المرور
========================================================= */

/* زر محاورنا: بدون خلفية أو تحديد */
.nav-dropbtn{
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.nav-dropbtn:focus,
.nav-dropbtn:focus-visible,
.nav-dropbtn:active{
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* لو فيه ستايل عام يعطي Active/Focus أصفر للروابط */
.nav-links a:focus,
.nav-links a:focus-visible,
.nav-links a:active{
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* القائمة تكون متصلة تحت الزر + ثابتة */
.nav-dropdown{position: relative !important;}

.nav-dropdown-menu{
  position: absolute !important;
  top: 100% !important;         /* متصلة */
  right: 0 !important;
  z-index: 99999 !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transform: translateY(0) !important;
}

/* جسر يمنع التقفيل أثناء انتقال الماوس */
.nav-dropdown-menu::before{
  content: "" !important;
  position: absolute !important;
  top: -18px !important;
  left: 0 !important;
  right: 0 !important;
  height: 18px !important;
}

/* تظل مفتوحة طالما الماوس على الزر أو داخل القائمة */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* منع أي عنصر من قص القائمة */
.main-navbar,
.navbar,
.nav-links{
  overflow: visible !important;
}

/* اخفاء أيقونة البحث لو رجعت بالخطأ */
.fa-search,
.fa-magnifying-glass{
  display: none !important;
}


/* ✅ Dropdown لون رايق مناسب + النص أبيض */
.nav-dropdown-menu{
  background: linear-gradient(180deg, #5A3A2A 0%, #3B2316 100%) !important; /* بني دافئ رايق */
  border: 1px solid rgba(201,162,77,.30) !important; /* ذهبي خفيف */
  box-shadow: 0 18px 55px rgba(0,0,0,.35) !important;
}

/* ✅ عنوان القائمة (ذهبي فخم) */
.nav-dropdown-title{
  color: #F3DCA4 !important;
  border-bottom: 1px solid rgba(243,220,164,.18) !important;
}

/* ✅ روابط القائمة (نص أبيض) */
.nav-dropdown-menu a{
  color: #fff !important;
}

/* ✅ Hover أنيق بدون ما يغير النص */
.nav-dropdown-menu a:hover{
  background: rgba(201,162,77,.14) !important; /* ذهبي شفاف */
  color: #fff !important;
}


/* ✅ توحيد لون محاورنا مع الهيدر + تنسيق ألوان القائمة المنسدلة */

/* محاورنا في الهيدر (أبيض مثل الباقي) */
.nav-dropbtn{
  color: var(--nahj-white) !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* حتى وهو مفتوح/مركز عليه ما يصير أصفر */
.nav-dropbtn:focus,
.nav-dropbtn:focus-visible,
.nav-dropbtn:active,
.nav-dropdown.open .nav-dropbtn{
  color: var(--nahj-white) !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* السهم يكون ذهبي خفيف */
.nav-dropbtn i{
  color: var(--nahj-gold-soft) !important;
  opacity: .9 !important;
}

/* ✅ القائمة المنسدلة نفس ستايل الهيدر */
.nav-dropdown-menu{
  background: linear-gradient(180deg, var(--nahj-brown) 0%, var(--nahj-brown-dark) 100%) !important;
  border: 1px solid rgba(210,167,83,.35) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.40) !important;
}

/* عنوان القائمة */
.nav-dropdown-title{
  color: var(--nahj-beige-light) !important;
  border-bottom: 1px solid rgba(243,231,198,.18) !important;
}

/* روابط القائمة (أبيض) */
.nav-dropdown-menu a{
  color: var(--nahj-white) !important;
}

/* Hover ذهبي رايق بدون تغيير لون النص */
.nav-dropdown-menu a:hover{
  background: rgba(201,162,77,.14) !important;
  color: var(--nahj-white) !important;
}



/* ✅ إزالة Badge الهيرو وسطر الكتابة المتحركة (تم إزالته من HTML) */
.hero-badge,
.hero-typing{display:none !important;}


/* =====================
   Logo tagline (مثل المرجع)
   - بدون "الخدمات الاستشارية"
===================== */
.logo{gap:12px;}
.logo-tagline{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  line-height:1.15;
}
.logo-line1{
  font-weight:800;
  font-size:14px;
  color:#fff;
  white-space:nowrap;
}
.logo-midline{
  display:block;
  width:165px;
  height:2px;
  background:rgba(255,255,255,.80);
  border-radius:2px;
}
.logo-line2{
  font-weight:800;
  font-size:13px;
  color:#fff;
  white-space:nowrap;
  letter-spacing:.5px;
}

@media(max-width:520px){
  .logo-line1,.logo-line2{
  font-weight:800;
  font-size:13px;
  color:#fff;
  white-space:nowrap;
  letter-spacing:.5px;
}
  .logo img{height:44px;}
}

.hero-eyebrow{display:none !important;}


/* =========================================================
   CONTACT PAGE | صفحة تواصل معنا (بنفس هوية نهج)
========================================================= */

.logo-link{
  text-decoration:none;
  color:inherit;
}

.nav-links a.is-active{
  color: var(--accent);
  position: relative;
}
.nav-links a.is-active::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-8px;
  margin:auto;
  width:24px;
  height:2px;
  background: var(--accent);
  border-radius:2px;
  opacity:.9;
}

/* Contact hero */
.contact-hero{
  padding: 90px 0 60px !important;
  background:
    radial-gradient(circle at 20% 15%, rgba(201,162,77,.18), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(217,181,106,.16), transparent 45%),
    linear-gradient(135deg, #121212 0%, #1b120c 45%, #22160e 100%);
  color:#fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.contact-hero__inner{
  max-width: 780px;
  text-align: right;
}
.contact-hero__badge{
  width: fit-content;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(201,162,77,.35);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.9);
  font-weight: 800;
  font-size: 13px;
  backdrop-filter: blur(10px);
}
.contact-hero__badge .dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(201,162,77,.18);
}
.contact-hero__title{
  margin: 16px 0 10px;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.22;
  text-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.contact-hero__subtitle{
  margin: 0 0 22px;
  color: rgba(255,255,255,.82);
  max-width: 640px;
  font-size: 16px;
  line-height: 1.9;
  text-shadow: 0 10px 20px rgba(0,0,0,.25);
}
.contact-hero__actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Contact grid */
.contact-wrap{
  padding: 80px 0 !important;
  background: linear-gradient(135deg, #ffffff, var(--bg-soft));
}
.contact-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}
.contact-card{
  background: var(--card);
  border: 1px solid rgba(230,215,191,.9);
  border-radius: 18px;
  padding: 20px 18px;
  display:flex;
  gap: 14px;
  align-items:flex-start;
  box-shadow: 0 14px 28px rgba(0,0,0,.06);
}
.contact-card__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(201,162,77,.18), rgba(217,181,106,.10));
  border: 1px solid rgba(201,162,77,.22);
  color: var(--accent);
  flex: 0 0 44px;
}
.contact-card__content h2{
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--text);
}
.contact-card__content p{
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.85;
}
.contact-ar{font-weight:600;color:var(--text) !important;}
.contact-en{font-size: 14px; opacity:.9;}
.contact-links{margin-top: 6px;}
.contact-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: var(--accent);
  text-decoration:none;
  font-weight:800;
  font-size: 13px;
}
.contact-link:hover{text-decoration:underline;}

.contact-list{display:flex;flex-direction:column;gap:10px}
.contact-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(201,162,77,.08);
  border: 1px solid rgba(201,162,77,.18);
}
.contact-item .label{
  color: var(--text);
  font-weight:800;
  font-size: 13px;
  opacity:.9;
}
.contact-item .value,
.contact-card .value{
  color: var(--accent);
  text-decoration:none;
  font-weight:900;
}
.contact-card .value:hover{text-decoration:underline;}
.contact-card .hint{
  font-size: 13px;
  opacity:.85;
  margin-top: 6px;
}

@media(max-width: 900px){
  .contact-grid{grid-template-columns: 1fr;}
  .contact-hero{padding: 70px 0 50px !important;}
}


/* ==========================================================
   CONTACT PAGE (OFFICIAL COMPANY LAYOUT)
   ========================================================== */

.contact-section{
  padding: clamp(24px, 3vw, 44px) 0 70px;
}

.contact-panel{
  display:grid;
  grid-template-columns: 1.25fr .9fr;
  gap: clamp(16px, 2.4vw, 26px);
  align-items: stretch;
}

.contact-panel__details{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(210,167,83,0.16);
  border-radius: 18px;
  padding: clamp(18px, 2.4vw, 26px);
  box-shadow: 0 18px 35px rgba(0,0,0,0.22);
}

.contact-panel__head{
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding-bottom: 14px;
  margin-bottom: 14px;
}

.contact-panel__title{
  margin: 0 0 6px;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: .2px;
  color: #fff;
}

.contact-panel__note{
  margin: 0;
  color: rgba(255,255,255,0.78);
  font-size: 14px;
  line-height: 1.9;
}

.contact-rows{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.contact-row{
  display:flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.contact-row:last-child{
  border-bottom: none;
  padding-bottom: 4px;
}

.contact-row__icon{
  width: 44px;
  height: 44px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  background: rgba(210,167,83,0.10);
  border: 1px solid rgba(210,167,83,0.22);
  flex: 0 0 auto;
}

.contact-row__icon i{
  color: rgba(210,167,83,0.92);
  font-size: 18px;
}

.contact-row__body{
  flex:1;
  min-width: 0;
}

.contact-row__label{
  font-weight: 700;
  color:#fff;
  margin: 0 0 6px;
  font-size: 14px;
}

.contact-row__value{
  color: rgba(255,255,255,0.86);
  font-size: 14px;
  line-height: 1.9;
}

.contact-row__value--en{
  margin-top: 6px;
  color: rgba(255,255,255,0.66);
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  direction: ltr;
  text-align: left;
}

.contact-inline-label{
  color: rgba(255,255,255,0.60);
  margin-inline-end: 6px;
  font-size: 13px;
}

.contact-row__link{
  display:inline-flex;
  margin-top: 8px;
  color: rgba(210,167,83,0.96);
  text-decoration: none;
  border-bottom: 1px solid rgba(210,167,83,0.38);
  padding-bottom: 2px;
  transition: opacity .2s ease, transform .2s ease;
}

.contact-row__link:hover{
  opacity: .9;
  transform: translateY(-1px);
}

.contact-row__value-link{
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.22);
  padding-bottom: 2px;
}

.contact-row__value-link:hover{
  border-bottom-color: rgba(210,167,83,0.6);
}

.contact-cta-strip{
  margin-top: 16px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cta-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(210,167,83,0.22);
  color:#fff;
  text-decoration:none;
  font-weight: 700;
  font-size: 13px;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.cta-chip i{
  color: rgba(210,167,83,0.92);
}

.cta-chip:hover{
  transform: translateY(-1px);
  background: rgba(210,167,83,0.08);
  border-color: rgba(210,167,83,0.34);
}

.contact-panel__map{
  display:flex;
}

.map-card{
  width: 100%;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(210,167,83,0.14);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 18px 35px rgba(0,0,0,0.22);
}

.map-card__head{
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.map-card__head h3{
  margin:0 0 6px;
  color:#fff;
  font-size: 16px;
}

.map-card__head p{
  margin:0;
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  line-height: 1.8;
}

.map-frame{
  height: 320px;
  background: rgba(0,0,0,0.25);
}

.map-frame iframe{
  width:100%;
  height:100%;
  border:0;
  filter: saturate(0.9) contrast(1.05);
}

/* Responsive */
@media (max-width: 980px){
  .contact-panel{
    grid-template-columns: 1fr;
  }
  .map-frame{
    height: 280px;
  }
}



/* ==========================================================
   CONTACT PAGE V7 – Contrast Fix (Corporate / Premium)
   - Light section after dark hero
   - Dark readable text + gold accents
========================================================== */

.contact-hero{
  /* keep hero dark but ensure text contrast */
  color:#fff;
}
.contact-hero__title{color:#fff !important;}
.contact-hero__subtitle{color:rgba(255,255,255,.86) !important;}
.contact-hero__badge{color:rgba(255,255,255,.92) !important; border-color: rgba(201,162,77,.45) !important;}
.contact-hero__badge .dot{background: var(--accent) !important;}

.contact-section{
  background: linear-gradient(180deg, var(--bg-soft), #ffffff);
  border-top: 1px solid rgba(210,167,83,.16);
}

.contact-panel__details,
.map-card{
  background:#ffffff !important;
  border:1px solid rgba(210,167,83,.22) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.08) !important;
}

.contact-panel__title{
  color: var(--text) !important;
}
.contact-panel__note{
  color: var(--muted) !important;
}

.contact-row{
  background: linear-gradient(180deg, #ffffff, rgba(201,162,77,.05)) !important;
  border: 1px solid rgba(210,167,83,.18) !important;
}

.contact-row__icon{
  background: rgba(201,162,77,.12) !important;
  border: 1px solid rgba(210,167,83,.32) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.08) !important;
}
.contact-row__icon i{color: var(--accent) !important;}

.contact-row__label{
  color: var(--text) !important;
}

.contact-row__value{
  color: var(--muted) !important;
}

.contact-row__value--en{
  color: var(--muted) !important;
  opacity: .95;
}

.contact-inline-label{
  color: rgba(43,26,15,.65) !important;
}

.contact-row__value-link{
  color: var(--text) !important;
  border-bottom: 1px solid rgba(201,162,77,.55) !important;
}

.contact-row__link{
  color: var(--accent) !important;
}
.contact-row__link:hover{
  color: var(--accent-soft) !important;
}

.contact-cta-strip{
  background: linear-gradient(135deg, rgba(201,162,77,.10), rgba(255,255,255,.70)) !important;
  border: 1px solid rgba(210,167,83,.22) !important;
}

.cta-chip{
  background:#111 !important;
  color:#fff !important;
  border:1px solid rgba(201,162,77,.35) !important;
}
.cta-chip i{color: var(--accent) !important;}
.cta-chip:hover{
  transform: translateY(-2px);
  background:#1a1a1a !important;
}

/* map */
.map-card__head h3{color: var(--text) !important;}
.map-card__head p{color: var(--muted) !important;}


/* ==========================================================
   CONTACT PAGE V8 – Remove Location + Centered Layout
   - Removed address block + map
========================================================== */
.contact-panel{
  grid-template-columns: 1fr !important;
  max-width: 980px;
  margin: 0 auto;
}
.contact-panel__map{display:none !important;}


/* =========================================================
   Contact page refinements (v9)
   - Remove badge circle section
   - English (LTR) alignment fix
   - Premium language toggle button (EN/AR)
========================================================= */

/* Premium language toggle (matches the reference style) */
.lang-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:10px 14px;
  border-radius:999px;

  background: linear-gradient(135deg,
    rgba(255,255,255,.10),
    rgba(201,162,77,.10)
  );
  border:1px solid rgba(201,162,77,.45);

  color:#fff;
  font-weight:800;
  font-size:13px;
  letter-spacing:.35px;
  text-decoration:none;
  cursor:pointer;

  box-shadow: 0 12px 26px rgba(0,0,0,.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.lang-toggle i{
  font-size:13px;
  color: var(--accent);
  opacity:.95;
}

.lang-toggle:hover{
  transform: translateY(-1px);
  border-color: rgba(201,162,77,.70);
  background: linear-gradient(135deg,
    rgba(255,255,255,.14),
    rgba(201,162,77,.14)
  );
  box-shadow: 0 16px 32px rgba(0,0,0,.26);
}
.lang-toggle:active{
  transform: translateY(0) scale(.98);
}

/* Ensure the old badge styles don't create spacing if it exists */
.contact-hero__badge{display:none !important;}

/* Arabic default alignment */
html[dir="rtl"] .contact-hero__inner{ text-align:right; }
html[dir="rtl"] .contact-panel{ direction:rtl; }

/* English alignment & layout (LTR) */
html[dir="ltr"] .contact-hero__inner{
  text-align:left;
}
html[dir="ltr"] .contact-hero__subtitle{
  margin-left:0;
}
html[dir="ltr"] .contact-hero__actions{
  justify-content:flex-start;
}
html[dir="ltr"] .contact-panel,
html[dir="ltr"] .contact-panel__details,
html[dir="ltr"] .contact-panel__head,
html[dir="ltr"] .contact-row__body{
  text-align:left;
  direction:ltr;
}

/* Flip the back arrow in English */
html[dir="ltr"] .btn-ghost i.fa-arrow-right{
  transform: rotate(180deg);
}

/* Keep phone/email/site numbers LTR always */
.ltr-number{
  direction:ltr;
  unicode-bidi: plaintext;
  display:inline-block;
}

/* Small polish: align the inline labels in English */
html[dir="ltr"] .contact-inline-label{
  margin-right:8px;
  margin-left:0;
}


/* === LTR fixes for dropdown (English) === */
[dir="ltr"] .nav-dropdown-menu{ left:0 !important; right:auto !important; text-align:left; }
[dir="ltr"] .nav-dropdown-title{ text-align:left; }
[dir="ltr"] .nav-dropdown-menu a{ text-align:left; }

/* =========================================================
   ✅ FIX: Philosophy text contrast + LTR alignment
========================================================= */

/* Philosophy (فلسفتنا) - make text clearly visible */
.nahj-philo{
  background: linear-gradient(135deg, #ffffff, #FBF7F0) !important;
  color: var(--text) !important;
}

.nahj-philo-text h2{
  color: var(--accent) !important;
}

.nahj-philo-text p{
  color: #2B1A0F !important;
  opacity: .92;
  font-weight: 600;
  line-height: 1.9;
}

/* Cards inside philosophy */
.nahj-philo .nahj-card{
  background: #ffffff !important;
  border: 1px solid rgba(201,162,77,.25) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.08) !important;
}

.nahj-philo .nahj-card h4{
  color: var(--accent) !important;
}

.nahj-philo .nahj-card p{
  color: #2B1A0F !important;
  opacity: .86;
}

/* ✅ LTR: Improve alignment for English */
html[dir="ltr"] body{
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] .nahj-hero__content,
html[dir="ltr"] .nahj-philo-text,
html[dir="ltr"] .nahj-timeline{
  text-align: left;
}

html[dir="ltr"] .hero-actions{
  justify-content: flex-start;
}

html[dir="ltr"] .hero-point{
  justify-content: flex-start;
}

html[dir="ltr"] .footer-links ul{
  padding-left: 18px;
  padding-right: 0;
}


/* =========================================================
   FIX: Philosophy text visibility (فلسفتنا) + LTR stability
========================================================= */

/* ✅ النص تحت فلسفتنا يصير واضح حتى مع الخلفيات الفاتحة */
.nahj-philo-text p{
  color:#2B1A0F !important;
  opacity:.9;
  font-weight:600;
}

/* =========================
   LTR overrides (English)
========================= */
html[dir="ltr"] body{direction:ltr;}
html[dir="ltr"] .nahj-hero{direction:ltr;text-align:left;}
html[dir="ltr"] .hero-bg-img{object-position:right center;}
html[dir="ltr"] .hero-subtitle--elegant{
  padding-left:14px;
  padding-right:0;
  border-left:2px solid rgba(201,162,77,.55);
  border-right:none;
}

/* quote + about */
html[dir="ltr"] .nahj-quote{direction:ltr;}
html[dir="ltr"] .nahj-quote .q-text{padding-left:10px;padding-right:0;}
html[dir="ltr"] .nahj-about-wrapper{direction:ltr;}
html[dir="ltr"] .nahj-axes-section,
html[dir="ltr"] .nahj-axes{direction:ltr;text-align:left;}

/* philosophy timeline mirror */
html[dir="ltr"] .nahj-philo{direction:ltr;}
html[dir="ltr"] .nahj-timeline{padding-left:90px;padding-right:0;}
html[dir="ltr"] .nahj-timeline::before{left:44px;right:auto;}
html[dir="ltr"] .nahj-dot{left:44px;right:auto;transform:translateX(-50%);}
html[dir="ltr"] .nahj-item::after{left:44px;right:auto;transform:translateX(-50%);}
html[dir="ltr"] .nahj-card{margin-left:90px;margin-right:0;text-align:left;}

/* ops lists mirror */
html[dir="ltr"] .ops-columns{text-align:left;}
html[dir="ltr"] .ops-columns li{
  padding-left:14px;
  padding-right:0;
}
html[dir="ltr"] .ops-columns li::before{
  left:0;
  right:auto;
}



/* =========================================================
   LTR Overrides (English) - mirror layout when dir="ltr"
   ========================================================= */
html[dir="ltr"] body{direction:ltr;}

/* Navbar */
html[dir="ltr"] .navbar{direction:ltr;}
html[dir="ltr"] .nav-links{direction:ltr;}
html[dir="ltr"] .nav-links a{direction:ltr;}
html[dir="ltr"] .nav-dropdown-menu{direction:ltr; text-align:left;}

/* HERO */
html[dir="ltr"] .nahj-hero{direction:ltr; text-align:left;}
html[dir="ltr"] .nahj-hero__content{align-items:flex-start;}
html[dir="ltr"] .hero-subtitle--elegant{
  border-right:none;
  border-left:2px solid rgba(201,162,77,.55);
  padding-right:0;
  padding-left:14px;
}
html[dir="ltr"] .hero-point{justify-content:flex-start;}
html[dir="ltr"] .hero-point i{margin-right:10px; margin-left:0;}

/* Quote */
html[dir="ltr"] .nahj-quote{direction:ltr;}
html[dir="ltr"] .q-text{text-align:left;}

/* About/Vision wrapper */
html[dir="ltr"] .nahj-about-wrapper{direction:ltr;}
html[dir="ltr"] .u12-34c686{text-align:left;}

/* Beneficiaries (tracks) */
html[dir="ltr"] .nahj-axes-section{direction:ltr;}
html[dir="ltr"] .nahj-tracks{direction:ltr;}
html[dir="ltr"] .nahj-tracks .track{direction:ltr; text-align:left;}
html[dir="ltr"] .nahj-tracks .track::after{right:auto; left:18px; content:"›";}

/* Axes cards */
html[dir="ltr"] .nahj-axes{direction:ltr;}
html[dir="ltr"] .nahj-axes h2{text-align:left;}
html[dir="ltr"] .axis-card{direction:ltr; text-align:left;}
html[dir="ltr"] .axis-indicator i{transform:scaleX(-1);}

/* Services + Kits */
html[dir="ltr"] .nahj-services{direction:ltr;}
html[dir="ltr"] .svc-head,
html[dir="ltr"] .svc-areas,
html[dir="ltr"] .svc-kits{direction:ltr; text-align:left;}
html[dir="ltr"] .kits-grid{direction:ltr;}
html[dir="ltr"] .kit-card{text-align:left;}

/* Philosophy Timeline */
html[dir="ltr"] .nahj-philo{direction:ltr;}
html[dir="ltr"] .nahj-philo-grid{direction:ltr;}
html[dir="ltr"] .nahj-philo-text{text-align:left;}
html[dir="ltr"] .nahj-timeline{
  padding-right:0;
  padding-left:90px;
  direction:ltr;
}
html[dir="ltr"] .nahj-timeline::before{
  right:auto;
  left:44px;
}
html[dir="ltr"] .nahj-dot{
  right:auto;
  left:44px;
  transform:translateX(-50%);
}
html[dir="ltr"] .nahj-item::after{
  right:auto;
  left:44px;
  transform:translateX(-50%);
}
html[dir="ltr"] .nahj-card{
  margin-right:0;
  margin-left:90px;
  text-align:left;
}

/* Partners */
html[dir="ltr"] .partners-section{direction:inherit;}
html[dir="ltr"] .partners-container{direction:ltr;}
html[dir="ltr"] .partners-text{text-align:left;}

/* Footer */
html[dir="ltr"] .nahj-footer{direction:ltr;}
html[dir="ltr"] .footer-grid{direction:ltr;}
html[dir="ltr"] .nahj-footer h4,
html[dir="ltr"] .nahj-footer p,
html[dir="ltr"] .nahj-footer a,
html[dir="ltr"] .footer-links,
html[dir="ltr"] .footer-contact,
html[dir="ltr"] .footer-newsletter{direction:ltr; text-align:left;}
html[dir="ltr"] .contact-list{direction:ltr;}
html[dir="ltr"] .contact-list a{direction:ltr; unicode-bidi:plaintext;}



/* =========================
   FIXES: LTR alignment (EN)
   ========================= */

/* Partners: remove RTL-only shifts + mirror padding */
html[dir="ltr"] .partners-container{
  padding-left: 90px !important;
  padding-right: 0 !important;
}
html[dir="ltr"] .logos-wrapper{
  justify-self: end !important;
}
html[dir="ltr"] .partners-text{
  --text-shift-x: 0px !important;
  --text-shift-y: 0px !important;
}
html[dir="ltr"] .partners-text a{
  --link-shift-x: 0px !important;
  --link-shift-y: 0px !important;
}

/* Philosophy timeline: mirror spacing for LTR */
html[dir="ltr"] .nahj-philo-text{
  text-align: left !important;
}
html[dir="ltr"] .nahj-timeline{
  text-align: left !important;
}

/* Footer: keep numbers/email LTR always */
html[dir="ltr"] .footer-contact a,
html[dir="ltr"] .footer-contact span{
  direction: ltr;
  unicode-bidi: plaintext;
}



/* ===== i18n direction fixes ===== */
html[dir="ltr"] .partners-container{
  grid-template-columns: 1.2fr 1fr;
}
html[dir="ltr"] .partners-text{
  text-align: left;
}
html[dir="ltr"] .partners-text h2{
  letter-spacing: .2px;
}
html[dir="ltr"] .footer-top{
  direction: ltr;
}
html[dir="ltr"] .footer-column h4,
html[dir="ltr"] .footer-column p,
html[dir="ltr"] .footer-column a{
  text-align: left;
}
.join-trainer{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.join-trainer-icon{
  font-size: 14px;
  opacity: .9;
}
















@media (max-width: 768px) {
  .logo-link {
    display: flex;
    flex-direction: row; /* ✅ النص يمين اللوقو */
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
  }

  .logo-img {
    height: 42px;
    width: auto;
  }

  .logo-tagline {
    display: flex;
    flex-direction: column;
    text-align: right;
    line-height: 1.4;
  }

  .logo-line1 {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
  }

  .logo-line2 {
    font-size: 12px;
    color: #f0e4c0;
  }

  .logo-midline {
    display: none;
  }
    .lang-toggle {
    position: absolute;
    top: 10px;
    left: 16px;
    z-index: 999;
  }

  .main-navbar {
    position: relative;
  }

}
/* زر "انضم كمدرب" في قائمة الروابط */
.join-trainer-mobile {
  display: none;
}

@media (max-width: 768px) {
  /* أخفي الزر الأصلي في extras */
  .extras .join-trainer {
    display: none !important;
  }

  /* أظهر زر الجوال داخل القائمة */
  .join-trainer-mobile {
    display: inline-block;
  }

  /* ترتيب عناصر .nav-links بشكل أفقي (صف واحد) */
  .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* أو space-between حسب الحاجة */
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .nav-links li {
    display: inline-block;
  }
}


@media(max-width: 768px){
  .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between; /* أقصى يمين ويسار */
    flex-wrap: nowrap;
    gap: 10px;
  }

  .nav-links {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: visible;
  }

  .extras {
    display: flex;
    gap: 10px;
    align-items: center;
    white-space: nowrap;
  }

  .join-trainer {
    margin-right: auto; /* يدفعه إلى أقصى يسار */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--nahj-white);
    font-size: 13px;
    text-decoration: none;
  }

  .join-trainer-icon {
    font-size: 14px;
    opacity: 0.9;
  }

  /* زر اللغة يظل ثابت */
  .lang-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    font-size: 13px;
  }
  .join-trainer-mobile .join-trainer-icon{
    display: none !important;
  }

  /* الشعار ومحاذاته */
  .logo-link {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .nav-links li:last-child{
    margin-right: 25px;
  
  }
}


@media (max-width: 820px){

  /* ✅ خلي الهيدر بعرض الشاشة بالكامل (بدون انكماش يمين/يسار) */
  .main-navbar .container{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 10px !important;
  }

  /* ✅ رجّعي المنيو صف واحد أفقي */
  .nav-links{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;         /* ✅ ممنوع ينزل سطر ثاني */
    justify-content: flex-start !important; /* ✅ يبدأ من اليمين في RTL */
    align-items: center !important;
    gap: 10px !important;                 /* ✅ مسافة مريحة بدون زحمة */

    overflow-x: auto !important;          /* ✅ لو ماكفت الشاشة يصير سحب يمين/يسار */
    white-space: nowrap !important;
    padding: 10px 6px 10px 14px !important; /* top right bottom left */
  }

  /* ✅ خلي كل عنصر ما يكبر ويكسر الصف */
  .nav-links > li{
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* ✅ شكل الروابط داخل الصف */
  .nav-links a,
  .nav-links .nav-dropbtn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
  }

  /* ✅ انضم كمدرب يصير داخل نفس الصف */
  .join-trainer-mobile{
    grid-column: auto !important; /* يلغي تأثير grid القديم */
  }

  /* ✅ اختياري: نخفي أيقونة انضم كمدرب بالجوال */
  .join-trainer-mobile .join-trainer-icon{
    display:none !important;
  }

  /* ✅ تحسين سحب الصف (بدون شكل سكرول مزعج) */
  .nav-links::-webkit-scrollbar{
    height: 0;
  }
}



@media (max-width: 520px) {
  .main-navbar {
    padding: 4px 0 !important;
    background: var(--nahj-brown-dark) !important;
  }

  .navbar {
    gap: 4px !important;
  }

  .nav-links {
    gap: 8px !important;
    justify-content: center !important;
  }

  .nav-links a {
    font-size: 13px !important;
    padding: 2px 0 !important;
  }

  .extras a {
    font-size: 13px !important;
  }
}


@media (max-width: 520px) {
  .nav-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 14px !important;
  }

  .nav-links li {
    max-width: 100%;
  }

  .nav-links a {
    font-size: 13px !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center;
    padding: 4px 6px !important;
    display: inline-block;
  }
}



@media (max-width: 520px) {
  .nahj-about-wrapper .u8-925592 {
    flex-direction: column !important;
  }

  .nahj-about-wrapper .u12-34c686 > div {
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
  }

  .nahj-about-wrapper .u12-34c686 > div:nth-of-type(1)::before {
    content: "--- من نحن";
    display: block;
    font-size: 16px;
    color: var(--accent);
    font-weight: bold;
    margin-bottom: 10px;
  }

  .nahj-about-wrapper .u12-34c686 > div:nth-of-type(2)::before {
    content: "--- رؤيتنا";
    display: block;
    font-size: 16px;
    color: var(--accent);
    font-weight: bold;
    margin-bottom: 10px;
  }

  .nahj-about-wrapper .u12-34c686 h2 {
    display: none; /* نخفي العنوان لأننا أضفناه في ::before */
  }

  .nahj-about-wrapper .u12-34c686 p {
    text-align: right;
    font-size: 15px;
    color: var(--text);
    line-height: 1.9;
  }
}



@media (max-width: 520px) {
  /* إخفاء تصميم سطح المكتب للجوال */
  .nahj-about-wrapper .u9-b05138 {
    display: none !important;
  }

  .nahj-about-wrapper .u13-cdf92a {
    display: none !important; /* هذا العنوان كان يكرر "من نحن" */
  }
}



@media (max-width: 520px) {
  /* إخفاء العناوين الجانبية العمودية فقط */
  .nahj-about-wrapper .u9-b05138 {
    display: none !important;
  }

  /* نظهر عنوان h2 داخل المحتوى */
  .nahj-about-wrapper .u13-cdf92a {
    display: block !important;
    font-size: 18px;
    color: var(--text);
    font-weight: bold;
    margin-bottom: 12px;
    text-align: right;
  }

  /* محتوى الفقرات */
  .nahj-about-wrapper .u12-34c686 p {
    text-align: right;
    font-size: 15px;
    color: var(--text);
    line-height: 1.9;
  }

  /* عنوان خط --- */
  .nahj-about-wrapper .u12-34c686 > div:nth-of-type(1)::before {
    content: "--- من نحن";
    display: block;
    font-size: 16px;
    color: var(--accent);
    font-weight: bold;
    margin-bottom: 10px;
  }

  .nahj-about-wrapper .u12-34c686 > div:nth-of-type(2)::before {
    content: "--- رؤيتنا";
    display: block;
    font-size: 16px;
    color: var(--accent);
    font-weight: bold;
    margin-bottom: 10px;
  }
}



/* إخفاء عناصر سطح المكتب في الجوال */
@media (max-width: 768px) {
  .nahj-about-wrapper .u9-b05138 {
    display: none;
  }
  
  .nahj-about-wrapper .u12-34c686 {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0 1rem;
  }

  .nahj-about-wrapper .u13-cdf92a {
    font-size: 1.5rem;
    color: #000; /* إعادة اللون الأسود للعناوين */
  }

  .nahj-about-wrapper .u14-de1c02,
  .nahj-about-wrapper .u15-c04822 {
    font-size: 1rem;
    line-height: 1.8;
    color: #333; /* لون مناسب للنص */
  }
}



/* ✅ MOBILE FIX: شركاؤنا (النص فوق + الشريط تحت) */
@media (max-width: 980px){

  .partners-container{
    display: flex !important;
    flex-direction: column !important; /* النص فوق - الشريط تحت */
    gap: 22px !important;
    padding: 0 22px !important;
    text-align: center !important;
  }

  .partners-text{
    order: 1 !important;
    text-align: center !important;

    /* ✅ مهم: إلغاء تحريك النص بالجوال */
    transform: none !important;
    --text-shift-x: 0px;
    --text-shift-y: 0px;
  }

  .logos-wrapper{
    order: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

}





/* ✅ MOBILE FIX + تنسيق النص: شركاؤنا (النص فوق + الشريط تحت) */
@media (max-width: 980px){

  .partners-container{
    display: flex !important;
    flex-direction: column !important; /* النص فوق - الشريط تحت */
    gap: 22px !important;
    padding: 0 22px !important;
    text-align: center !important;
  }

  .partners-text{
    order: 1 !important;
    text-align: center !important;

    /* ✅ مهم: إلغاء تحريك النص بالجوال */
    transform: none !important;
    --text-shift-x: 0px !important;
    --text-shift-y: 0px !important;

    /* ✅ تحسين شكل النص */
    max-width: 100% !important;
    padding: 0 10px !important;
    margin: 0 auto !important;
  }

  .partners-text h2{
    font-weight: 800 !important;
    line-height: 1.6 !important;
    font-size: 26px !important;
    margin: 0 0 10px 0 !important;
    letter-spacing: -0.2px !important;
  }

  .partners-text a{
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;

    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;

    padding-bottom: 5px !important;
    border-bottom: 1px solid rgba(201,162,77,0.55) !important;
    transition: 0.2s ease !important;
  }

  .partners-text a:hover{
    opacity: 0.85 !important;
  }

  .logos-wrapper{
    order: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

}



/* ✅ Fix عنوان الفرعي تحت الخط المتموّج (Mobile) */
@media (max-width: 980px){

  /* العنوان الرئيسي */
  .section-title,
  .projects-title,
  .pm-title{
    margin-bottom: 18px !important;
    line-height: 1.6 !important;
  }

  /* الخط/المنحنى (الديفايدر) */
  .wave-divider,
  .section-divider,
  .curved-line{
    margin: 10px auto 18px auto !important;
  }

  /* النص اللي تحت الخط (التطبيقات...) */
  .section-subtitle,
  .projects-subtitle,
  .pm-subtitle{
    position: relative !important;
    transform: none !important;
    top: auto !important;
    bottom: auto !important;

    display: block !important;
    text-align: center !important;

    margin-top: 10px !important;
    padding: 0 16px !important;

    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.7 !important;

    white-space: normal !important;   /* يمنع التكدس */
    z-index: 2 !important;
  }
}


/* ✅ تحكم بمكان "التحضير" بالجوال فقط */
@media (max-width: 980px){

  #label-prep{
    display: inline-block !important; 
    position: relative !important;

    /* ✨ غيّري الأرقام براحتك */
    transform: translate(100px, -60px) !important; 
    /* مثال:
       translate(20px, 10px) = يمين + تحت
       translate(-20px, -10px) = يسار + فوق
    */
  }

}


/* ✅ تحكم بمكان "التشغيل" بالجوال فقط */
@media (max-width: 980px){

  #label-ops{
    display: inline-block !important;
    position: relative !important;

    /* ✨ غيّري الأرقام براحتك */
    transform: translate(20px, -50px) !important;
    /* مثال:
       translate(20px, 10px) = يمين + تحت
       translate(-20px, -10px) = يسار + فوق
    */
  }

}


/* ✅ تحكم بمكان "المخرجات" بالجوال فقط */
@media (max-width: 980px){

  #label-output{
    display: inline-block !important;
    position: relative !important;

    /* ✨ غيّري الأرقام براحتك */
    transform: translate(-45px, -60px) !important;
  }

}



/* ✅ MOBILE: نخلي المربعات تحت بعض + عنوان ذهبي فوق كل مربع (بدون حذف المنحنى ولا العناوين) */
@media (max-width: 980px){

  /* خلي الأعمدة تحت بعض */
  .ops-columns{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 0 16px !important;
  }

  /* شكل المربع */
  .ops-col{
    width: 100% !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    padding: 16px !important;
    box-shadow: 0 6px 16px rgba(43,26,15,0.06) !important;
    text-align: right !important;
    position: relative !important;

    /* نخلي مساحة فوق للمسمى */
    padding-top: 44px !important;
  }

  /* ✅ عنوان ذهبي فوق كل مربع (نضيفه تلقائيًا) */
  .ops-col.col-prep::before{
    content: "التحضير" !important;
  }
  .ops-col.col-ops::before{
    content: "التشغيل" !important;
  }
  .ops-col.col-output::before{
    content: "المخرجات" !important;
  }

  .ops-col::before{
    position: absolute !important;
    top: 14px !important;
    right: 18px !important;

    font-size: 18px !important;
    font-weight: 900 !important;
    color: var(--accent) !important;
    line-height: 1 !important;

    padding-bottom: 6px !important;
    border-bottom: 1px solid rgba(201,162,77,0.55) !important;
  }

  /* ترتيب النص داخل المربعات */
  .ops-col ul{
    margin: 0 !important;
    padding-right: 18px !important;
  }

  .ops-col li{
    margin: 0 0 10px 0 !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
    color: var(--text) !important;
  }

  .ops-col li::marker{
    color: var(--accent) !important;
  }

}



/* ✅ MOBILE: العناوين أقصى اليمين + المربعات متراصّة */
@media (max-width: 980px){

  /* المربعات تحت بعض بدون تفرق */
  .ops-columns{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;              /* قلل الفراغ */
    padding: 0 14px !important;
    align-items: stretch !important;
  }

  .ops-col{
    width: 100% !important;
    margin: 0 !important;              /* يمنع أي تباعد خارجي */
    padding: 16px !important;
    padding-top: 48px !important;      /* مساحة للعنوان */
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }

  /* ✅ العنوان أقصى اليمين داخل المربع */
  .ops-col::before{
    right: 14px !important;            /* أقصى اليمين */
    left: auto !important;
    top: 14px !important;

    text-align: right !important;
    width: auto !important;
    margin: 0 !important;

    display: inline-block !important;
  }

  /* ✅ لو فيه أي محاذاة وسط غصب */
  .ops-col,
  .ops-col *{
    text-align: right !important;
  }

}


/* ✅ MOBILE: رصّ المربعات الثلاثة في نفس المسار (بدون ما نلمس سطح المكتب) */
@media (max-width: 980px){

  /* الحاوية تجمعهم طولياً */
  .ops-columns{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;     /* كلهم نفس العرض */
    gap: 12px !important;               /* مسافة متساوية بينهم */
    padding: 0 14px !important;
  }

  /* كل مربع نفس المكان تماماً */
  .ops-col{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;

    /* ✅ أهم شيء: يلغي أي انحراف */
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;

    box-sizing: border-box !important;
  }
}


/* ✅ MOBILE: رجّع عنوان التحضير/التشغيل/المخرجات داخل كل مربع */
@media (max-width: 980px){

  /* نخلي المربعات متراصة ومثل بعض */
  .ops-columns{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 0 14px !important;
  }

  /* مهم جداً: نخلي المربع Relative عشان ::before يشتغل */
  .ops-col{
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;

    position: relative !important;     /* ✅ رجّعها */
    transform: none !important;
    padding: 18px !important;
    padding-top: 56px !important;      /* ✅ مساحة للعنوان */
  }

  /* ✅ العنوان الذهبي داخل المربع */
  .ops-col::before{
    position: absolute !important;
    top: 16px !important;
    right: 18px !important;
    left: auto !important;

    font-size: 18px !important;
    font-weight: 900 !important;
    color: var(--accent) !important;
    line-height: 1 !important;

    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(201,162,77,0.55) !important;

    z-index: 3 !important;
    display: inline-block !important;
  }

  /* نص العناوين حسب كل مربع */
  .ops-col.col-prep::before{ content: "التحضير" !important; }
  .ops-col.col-ops::before{ content: "التشغيل" !important; }
  .ops-col.col-output::before{ content: "المخرجات" !important; }

}










/* ✅ MOBILE OVERLAY: محاورنا تطلع فوق الهيدر وفوق كل شيء */
@media (max-width: 980px){

  /* خلفية شفافة تغطي الصفحة */
  .nav-dropdown.open::after{
    content:"";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1000000;
  }

  /* القائمة نفسها (فوق الهيدر) */
  .nav-dropdown-menu{
    position: fixed !important;
    top: 0 !important;            /* ✅ فوق الهيدر */
    right: 0 !important;
    left: 0 !important;

    width: 100% !important;
    min-width: 100% !important;

    max-height: 100vh !important;
    overflow-y: auto !important;

    z-index: 1000001 !important;  /* ✅ أعلى من الهيدر */
    border-radius: 0 0 22px 22px !important;

    /* نخلي المحتوى يبدأ بعد الهيدر عشان ما ينحجب */
    padding-top: 85px !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
  }

  .nav-dropdown.open .nav-dropdown-menu{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* نلغي جسر hover بالجوال */
  .nav-dropdown-menu::before{ display:none !important; }
}



/* ✅ MOBILE: خلي قائمة محاورنا طولي (عمودي) مو عرضي */
@media (max-width: 980px){

  /* قائمة محاورنا نفسها */
  .nav-dropdown-menu{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  /* كل رابط داخل القائمة ياخذ سطر كامل */
  .nav-dropdown-menu a{
    display: flex !important;
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: right !important;
    white-space: normal !important;
  }

  /* العنوان داخل القائمة */
  .nav-dropdown-title{
    width: 100% !important;
    text-align: right !important;
    margin-bottom: 6px !important;
  }
}



/* ✅ MOBILE: محاورنا (ستايل طولي فخم - مو نصوص يمين صندوق فاضي) */
@media (max-width: 980px){

  /* صندوق القائمة نفسه */
  .nav-dropdown-menu{
    position: fixed !important;
    top: 85px !important;                 /* تحت الهيدر */
    right: 12px !important;
    left: 12px !important;

    width: auto !important;
    max-width: 430px !important;          /* ✅ ما يصير عريض وفاضي */
    margin: 0 auto !important;

    padding: 16px !important;
    border-radius: 18px !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;

    background: rgba(40, 22, 12, .96) !important;  /* بني غامق فخم */
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.35) !important;

    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;

    z-index: 1000005 !important;
  }

  /* عنوان القائمة */
  .nav-dropdown-title{
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: right !important;
    padding: 6px 4px 10px !important;
    margin: 0 0 2px !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    opacity: .95 !important;
  }

  /* كل عنصر (زر) */
  .nav-dropdown-menu a{
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    padding: 12px 14px !important;
    border-radius: 14px !important;

    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.08) !important;

    text-align: right !important;
    white-space: normal !important;
    line-height: 1.4 !important;

    transition: .2s ease !important;
  }

  .nav-dropdown-menu a:hover{
    background: rgba(255,255,255,.10) !important;
  }

  /* ✅ يمنع أي ترتيب عرضي قديم */
  .nav-dropdown-menu{
    align-items: stretch !important;
  }
}



/* ✅ DESKTOP: خلي Dropdown "محاورنا" نفس ستايل الجوال (فخم + بطاقات) */
@media (min-width: 981px){

  /* صندوق القائمة */
  .nav-dropdown{
    position: relative !important;
  }

  .nav-dropdown-menu{
    position: absolute !important;
    top: calc(100% + 14px) !important;
    right: 0 !important;
    left: auto !important;

    width: 340px !important;
    max-width: 340px !important;

    padding: 16px !important;
    border-radius: 18px !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;

    background: rgba(40, 22, 12, .96) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 20px 55px rgba(0,0,0,.38) !important;

    z-index: 9999 !important;

    /* مغلق افتراضي */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(6px) !important;
    transition: .22s ease !important;
  }

  /* فتح القائمة بالهوفر */
  .nav-dropdown:hover .nav-dropdown-menu{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  /* عنوان القائمة */
  .nav-dropdown-title{
    font-size: 14px !important;
    font-weight: 800 !important;
    text-align: right !important;
    padding: 6px 4px 10px !important;
    margin: 0 0 2px !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    opacity: .95 !important;
  }

  /* روابط المحاور كبطاقات */
  .nav-dropdown-menu a{
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    padding: 12px 14px !important;
    border-radius: 14px !important;

    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.08) !important;

    text-align: right !important;
    white-space: normal !important;
    line-height: 1.4 !important;

    transition: .2s ease !important;
  }

  .nav-dropdown-menu a:hover{
    background: rgba(255,255,255,.10) !important;
    transform: translateX(-2px) !important;
  }

  /* سهم محاورنا يتحرك لطيف */
  .nav-dropdown:hover .fa-chevron-down{
    transform: rotate(180deg);
    transition: .2s ease;
  }
}






/* ✅ DESKTOP: خلّي اللوقو نفس شكل الجوال (الجوال هو النموذج) */
@media (min-width: 981px){

  /* رابط اللوقو */
  .logo-link{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 320px !important;
  }

  /* صورة الشعار */
  .logo-link img{
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
  }

  /* صندوق النص (نهج + لخدمات الأعمال) */
  .logo-tagline{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    line-height: 1.1 !important;
    gap: 6px !important;
    padding-top: 2px !important;
  }

  /* السطر الأول */
  .logo-line1{
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: .2px !important;
    white-space: nowrap !important;
  }

  /* الخط الفاصل اللي بالنص (خليه نفس الجوال: خفيف) */
  .logo-midline{
    display: block !important;
    width: 180px !important;
    height: 1px !important;
    background: rgba(255,255,255,.25) !important;
    margin-right: 0 !important;
  }

  /* السطر الثاني */
  .logo-line2{
    font-size: 14px !important;
    font-weight: 700 !important;
    opacity: .9 !important;
    white-space: nowrap !important;
  }
}



/* ✅ DESKTOP: اللوقو نفس الجوال (بدون خط + اللون مضبوط) */
@media (min-width: 981px){

  /* شكل مجموعة اللوقو */
  .logo-link{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* الشعار */
  .logo-link img{
    width: 50px !important;
    height: 50px !important;
    object-fit: contain !important;
  }

  /* النص */
  .logo-tagline{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 6px !important;
    line-height: 1.1 !important;
  }

  /* ✅ إزالة الخط نهائي */
  .logo-midline{
    display: none !important;
  }

  /* السطر الأول (أبيض) */
  .logo-line1{
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
  }

  /* السطر الثاني (ذهبي) */
  .logo-line2{
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #f0e4c0 !important; /* #D2A753 */
    white-space: nowrap !important;
  }
}





@media (max-width: 980px){

  .nahj-quote{
    padding: 26px 16px !important;
    gap: 14px !important;
    justify-content: center !important;
  }

  .nahj-quote .q-img{
    flex: 0 0 auto !important;
    width: 100% !important;
    text-align: center !important;
  }

  .nahj-quote .q-img img{
    width: 170px !important;     /* ✅ بدل ما يكون ضخم */
    max-width: 70% !important;
    border-radius: 18px !important;
  }

  .nahj-quote .q-text{
    flex: 1 1 100% !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .nahj-quote .q-text p{
    font-size: 18px !important;
    line-height: 1.95 !important;
    margin-bottom: 10px !important;
  }

  .nahj-quote .q-text h4{
    font-size: 16px !important;
  }
}

@media (max-width: 980px){

  .nahj-philo{
    padding: 34px 16px !important;
  }

  .nahj-philo-grid{
    padding: 22px 16px !important;
    border-radius: 20px !important;
  }

  /* ✅ أهم جزء: تقليل المسافة يمين */
  .nahj-timeline{
    padding-right: 46px !important;
  }

  /* خط التايملاين + النقاط أقرب لليمين */
  .nahj-timeline::before,
  .nahj-dot,
  .nahj-item::after{
    right: 18px !important;
  }

  /* الكروت تتحرك يمين (بدون فراغ ضخم) */
  .nahj-card{
    margin-right: 46px !important;
    padding: 14px 14px !important;
    border-radius: 16px !important;
  }

  .nahj-card h4{
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  .nahj-card p{
    font-size: 14px !important;
    line-height: 1.8 !important;
  }
}



/* ✅ MOBILE ONLY: زر اللغة RTL يسار / LTR يمين (بدون تأثير على الديسكتوب) */
@media (max-width: 980px){

  html[dir="ltr"] .lang-toggle{
    left: auto !important;
    right: 16px !important;
  }

  html[dir="rtl"] .lang-toggle{
    right: auto !important;
    left: 16px !important;
  }

}



/* ✅ MOBILE: فلسفتنا — خط أوضح ومتناسق مع باقي الموقع */
@media (max-width: 980px){

  /* عنوان السكشن */
  .nahj-philo h2,
  .nahj-philo .section-title{
    font-family: "Tajawal", system-ui, sans-serif !important;
    font-weight: 800 !important;
    font-size: 28px !important;
    line-height: 1.25 !important;
    color: var(--nahj-gold) !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    margin-bottom: 10px !important;
  }

  /* وصف السكشن تحت العنوان */
  .nahj-philo .section-desc,
  .nahj-philo p.lead,
  .nahj-philo .nahj-philo-desc{
    font-family: "Tajawal", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 1.95 !important;
    color: var(--nahj-text-dark) !important;
    opacity: 0.95 !important;
    text-align: center !important;
    max-width: 520px !important;
    margin: 0 auto 18px !important;
  }

  /* عناوين الكروت داخل التايملاين */
  .nahj-philo .nahj-card h4,
  .nahj-philo .nahj-card .card-title{
    font-family: "Tajawal", system-ui, sans-serif !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
    color: var(--nahj-gold) !important;
    margin-bottom: 6px !important;
  }

  /* نص الكروت */
  .nahj-philo .nahj-card p,
  .nahj-philo .nahj-card .card-text{
    font-family: "Tajawal", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
    color: var(--nahj-text-dark) !important;
    opacity: 0.92 !important;
  }
}



/* ✅ DESKTOP: ودي زر اللغة أقصى يسار أكثر */
@media (min-width: 981px){
  .lang-toggle{
    left: 6px !important;   /* جرّبي 6 ثم 0 إذا تبينه أكثر */
    right: auto !important;
  }
}







/* ✅ MOBILE: نزّل نص الهيرو + حرّك الصورة عشان البنت تبان */
@media (max-width: 980px){

  /* حرّكي الصورة: زيدي % = يروح يمين أكثر = يظهر اللي على اليمين */
  .cover.hero-image{
    background-position: 90% 22% !important;
    background-size: cover !important;
  }

  /* نزّل المحتوى نفسه بدون ما نطوّل الهيرو */
  .cover.hero-image .hero-content{
    transform: translateY(28px) !important;  /* زوديها 34px إذا تبينه أنزل */
    max-width: 560px !important;            /* بدل 720 عشان ما يزحم بالجوال */
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* لو لسه قريب من الهيدر جدًا */
  .cover.hero-image{
    padding-top: 86px !important; /* خفيف فقط */
  }
}











/* =========================================================
   ✅ FIX (EN Mobile only): لا ينزل سطر + ما يكبر الهيدر
   - يطبق فقط لما dir="ltr"
   - يخلي المنيو صف واحد باستخدام Grid + ellipsis
========================================================= */
@media (max-width: 980px){
  html[dir="ltr"] .navbar{
    flex-wrap: wrap; /* خليها مثل ما هي عشان اللوقو/الأزرار فوق والمنيو تحت */
  }

  html[dir="ltr"] .nav-links{
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important; /* 5 عناصر */
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-wrap: unset !important; /* يلغي لف flex القديم */
    white-space: normal !important; /* grid ما يحتاج nowrap هنا */
  }

  html[dir="ltr"] .nav-links > li{
    min-width: 0 !important;   /* مهم عشان ellipsis يشتغل */
    margin: 0 !important;
  }

  /* الروابط + زر الدروب داون */
  html[dir="ltr"] .nav-links a,
  html[dir="ltr"] .nav-links .nav-dropbtn{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;      /* ممنوع سطر ثاني */
    overflow: hidden !important;         /* قص */
    text-overflow: ellipsis !important;  /* … */
    font-size: 13px !important;
    padding: 8px 6px !important;
  }

  /* عندك قاعدة تضيف margin لآخر عنصر بالموبايل—تلغى هنا للإنقليزي */
  html[dir="ltr"] .nav-links li:last-child{
    margin-right: 0 !important;
  }
}


/* ✅ FIX: Mobile About/Vision labels translate with language (dir) */
@media (max-width: 520px){

  /* Arabic default (RTL) */
  .nahj-about-wrapper .u12-34c686 > div:nth-of-type(1)::before { content: "--- من نحن" !important; }
  .nahj-about-wrapper .u12-34c686 > div:nth-of-type(2)::before { content: "--- رؤيتنا" !important; }

  /* English (LTR) */
  html[dir="ltr"] .nahj-about-wrapper .u12-34c686 > div:nth-of-type(1)::before { content: "--- Who We Are" !important; }
  html[dir="ltr"] .nahj-about-wrapper .u12-34c686 > div:nth-of-type(2)::before { content: "--- Our Vision" !important; }

  /* ✅ Mobile alignment when EN */
  html[dir="ltr"] .nahj-about-wrapper .u12-34c686 p { text-align: left !important; }
  html[dir="ltr"] .nahj-about-wrapper .u12-34c686 { text-align: left !important; }
}



/* =====================================
   ✅ FIX: Ops titles (Prep / Ops / Output)
   Translate correctly on mobile
===================================== */
@media (max-width: 768px){

  /* Arabic (RTL) */
  .col-prep h3,
  .col-prep .ops-title {
    content: none;
  }

  /* English titles */
  html[dir="ltr"] .col-prep h3,
  html[dir="ltr"] .col-prep .ops-title {
    direction: ltr;
    text-align: left;
  }

  /* Override visible labels */
  .col-prep::before { content: "التحضير"; }
  .col-ops::before { content: "التشغيل"; }
  .col-output::before { content: "المخرجات"; }

  html[dir="ltr"] .col-prep::before { content: "Preparation"; }
  html[dir="ltr"] .col-ops::before { content: "Operations"; }
  html[dir="ltr"] .col-output::before { content: "Outputs"; }

  /* styling */
  .col-prep::before,
  .col-ops::before,
  .col-output::before {
    display: block;
    font-weight: 600;
    color: var(--nahj-gold);
    margin-bottom: 12px;
    text-align: inherit;
  }
}



@media (max-width: 768px){

  /* Arabic */
  html[dir="rtl"] .col-prep::before { content: "التحضير" !important; }
  html[dir="rtl"] .col-ops::before  { content: "التشغيل" !important; }
  html[dir="rtl"] .col-output::before { content: "المخرجات" !important; }

  /* English */
  html[dir="ltr"] .col-prep::before { content: "Preparation" !important; }
  html[dir="ltr"] .col-ops::before  { content: "Operations" !important; }
  html[dir="ltr"] .col-output::before { content: "Outputs" !important; }

  .col-prep::before, .col-ops::before, .col-output::before{
    display:block;
    margin: 0 0 12px 0;
    font-weight:700;
    color: var(--nahj-gold);
    text-decoration: underline;
    text-underline-offset: 10px;
  }

  html[dir="rtl"] .col-prep::before, 
  html[dir="rtl"] .col-ops::before,
  html[dir="rtl"] .col-output::before{ text-align:right; }

  html[dir="ltr"] .col-prep::before, 
  html[dir="ltr"] .col-ops::before,
  html[dir="ltr"] .col-output::before{ text-align:left; }
}



/* ✅ CSS-only translation for: "إعداد تقارير الأداء والتقييم" */
html[dir="ltr"] #list-output li[data-i18n="list_output_3"]{
  font-size: 0 !important;   /* يخفي النص العربي بدون ما يحذف السطر */
}

html[dir="ltr"] #list-output li[data-i18n="list_output_3"]::after{
  content: "Prepare performance and evaluation reports";
  font-size: 16px;           /* رجّعيها حسب حجم قائمتك */
  color: inherit;
}



/* ================================
   FIX: Philosophy alignment in EN (LTR)
   Put this at the VERY END of styles_v16.css
================================= */

html[dir="ltr"] .nahj-philo{
  direction: ltr !important;
}

html[dir="ltr"] .nahj-philo-grid{
  direction: ltr !important;
}

html[dir="ltr"] .nahj-philo-text,
html[dir="ltr"] .nahj-philo-text p{
  text-align: left !important;
  direction: ltr !important;
}

/* Timeline: move the line/dots/cards to the LEFT in LTR */
html[dir="ltr"] .nahj-timeline{
  padding-right: 0 !important;
  padding-left: 90px !important;
  direction: ltr !important;
}

html[dir="ltr"] .nahj-timeline::before{
  right: auto !important;
  left: 44px !important;
}

html[dir="ltr"] .nahj-dot{
  right: auto !important;
  left: 44px !important;
  transform: translateX(-50%) !important;
}

html[dir="ltr"] .nahj-item::after{
  right: auto !important;
  left: 44px !important;
  transform: translateX(-50%) !important;
}

html[dir="ltr"] .nahj-card{
  margin-right: 0 !important;
  margin-left: 90px !important;
  text-align: left !important;
}

/* Mobile LTR tweaks */
@media (max-width: 900px){
  html[dir="ltr"] .nahj-timeline{
    padding-left: 70px !important;
  }

  html[dir="ltr"] .nahj-timeline::before,
  html[dir="ltr"] .nahj-dot,
  html[dir="ltr"] .nahj-item::after{
    left: 30px !important;
    right: auto !important;
  }

  html[dir="ltr"] .nahj-card{
    margin-left: 70px !important;
  }
}




/* =========================================
   MOBILE FIX (EN/LTR): Partners centered
   Put at the VERY END of styles_v16.css
========================================= */
@media (max-width: 900px){

  html[dir="ltr"] .partners-container{
    direction: ltr !important;
    width: 100% !important;

    /* أهم شي: لا يكون ملزق يمين */
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    /* يرجع وسط */
    text-align: center !important;
    align-items: center !important; /* لو container flex */
  }

  html[dir="ltr"] .partners-text,
  html[dir="ltr"] .partners-text h2{
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  html[dir="ltr"] .partners-text a{
    display: inline-flex !important;
    justify-content: center !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  html[dir="ltr"] .logos-wrapper{
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html[dir="ltr"] .logos-row,
  html[dir="ltr"] .logos-track{
    justify-content: center !important; /* لو Flex */
  }

  /* إذا فيه أي تموضع يمين يورّثه من RTL */
  html[dir="ltr"] .partners-container *{
    right: auto !important;
    left: auto !important;
  }
}




/* =========================================
   MOBILE: force lists text to FAR LEFT in EN
========================================= */
@media (max-width: 900px){

  /* غطي أكبر عدد ممكن من الحالات داخل الكروت */
  html[dir="ltr"] .prep-card,
  html[dir="ltr"] .ops-card,
  html[dir="ltr"] .out-card,
  html[dir="ltr"] .axis-card,
  html[dir="ltr"] .track-card{
    text-align: left !important;
  }

  /* القوائم داخل الكروت */
  html[dir="ltr"] .prep-card ul,
  html[dir="ltr"] .ops-card ul,
  html[dir="ltr"] .out-card ul,
  html[dir="ltr"] .axis-card ul,
  html[dir="ltr"] .track-card ul{
    text-align: left !important;
    list-style-position: outside !important;
    padding-left: 18px !important;   /* يخلي النقاط على الطرف والنص أقصى يسار */
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html[dir="ltr"] .prep-card li,
  html[dir="ltr"] .ops-card li,
  html[dir="ltr"] .out-card li,
  html[dir="ltr"] .axis-card li,
  html[dir="ltr"] .track-card li{
    text-align: left !important;
    justify-content: flex-start !important; /* لو li معمول flex ويتوسّط */
    align-items: flex-start !important;
  }

  /* لو فيه عناصر داخل li متوسطة */
  html[dir="ltr"] .prep-card li *,
  html[dir="ltr"] .ops-card li *,
  html[dir="ltr"] .out-card li *,
  html[dir="ltr"] .axis-card li *,
  html[dir="ltr"] .track-card li *{
    text-align: left !important;
  }
}




/* Mobile ONLY + English (LTR) ONLY: move "Preparation" label */




/* MOBILE ONLY + EN (LTR) ONLY: move Operations label to the LEFT */
@media (max-width: 900px){
  html[dir="ltr"] #label-ops{
    position: relative !important;
    /* تحريك: عدّلي الأرقام */
    transform: translate(-90px, -60px) !important; /* X يسار/يمين, Y فوق/تحت */
    text-align: left !important;
  }

  html[dir="ltr"] #label-prep{
    position: relative !important;
    /* تحريك: عدّلي الأرقام */
    transform: translate(-120px, -75px) !important; /* X يسار/يمين, Y فوق/تحت */
    text-align: left !important;
  }



 
  html[dir="ltr"] #label-output{
    position: relative !important;
    transform: translate(-60px, -75px) !important; /* X يسار/يمين, Y فوق/تحت */
    text-align: left !important;
  }

}


/* =========================================
   MOBILE + EN(LTR): move ONLY the boxes (.ops-columns) to FAR LEFT
   (Leaves the top curve labels unchanged)
========================================= */
@media (max-width: 900px){

  html[dir="ltr"] .ops-columns{
    direction: ltr !important;
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-items: flex-start !important;   /* لو كانت flex */
  }

  /* المربعات/الأعمدة نفسها */
  html[dir="ltr"] .ops-columns .ops-col{
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;        /* يثبتها يسار */
    text-align: left !important;
  }

  /* القوائم داخل المربعات */
  html[dir="ltr"] .ops-columns ul{
    text-align: left !important;
    direction: ltr !important;
    list-style-position: outside !important;
    padding-left: 18px !important;        /* مكان النقطة */
    padding-right: 0 !important;
    margin: 0 !important;
  }

  html[dir="ltr"] .ops-columns li{
    text-align: left !important;
  }
}



/* =========================================
   MOBILE + EN (LTR)
   LEFT align GOLD TITLES inside the boxes
========================================= */
@media (max-width: 768px){

  /* العمود نفسه */
  html[dir="ltr"] .ops-columns .ops-col{
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* العناوين الذهبية داخل المربعات */
  html[dir="ltr"] .col-prep::before,
  html[dir="ltr"] .col-ops::before,
  html[dir="ltr"] .col-output::before{
    display: block !important;          /* مهم */
    width: 100% !important;
    text-align: left !important;

    margin-left: 0 !important;
    margin-right: auto !important;      /* يثبتها يسار */

    align-self: flex-start !important;  /* لو الأب Flex */
       /* ❌ لا خط */
    border: none !important;
    text-decoration: none !important;


  }
}





 
/* =========================================
   MOBILE + EN (LTR)
   PER-TITLE NUMERIC CONTROL (PX)
========================================= */
@media (max-width: 768px){

  /* 🎮 تحكم لكل كلمة */
  html[dir="ltr"]{
    --prep-x:  20px;   --prep-y:  0px;
    --ops-x:   20px;   --ops-y:   0px;
    --out-x:   20px;   --out-y:   0px;
  }

  html[dir="ltr"] .ops-columns .ops-col{
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* Preparation */
  html[dir="ltr"] .col-prep::before{
    transform: translate(var(--prep-x), var(--prep-y)) !important;
  }

  /* Operations */
  html[dir="ltr"] .col-ops::before{
    transform: translate(var(--ops-x), var(--ops-y)) !important;
  }

  /* Outputs */
  html[dir="ltr"] .col-output::before{
    transform: translate(var(--out-x), var(--out-y)) !important;
  }

  /* ستايل مشترك */
  html[dir="ltr"] .col-prep::before,
  html[dir="ltr"] .col-ops::before,
  html[dir="ltr"] .col-output::before{
    display: block !important;
    width: 100% !important;
    text-align: left !important;

    box-sizing: border-box !important;
    padding-inline-start: 18px !important;
    padding-inline-end: 18px !important;

    border: none !important;
    text-decoration: none !important;
  }
}


/* MOBILE + EN(LTR): Training Kits title + paragraph -> FAR LEFT */
@media (max-width: 900px){

  /* غطي العنوان والفقرة (أكثر الأنماط شيوعًا عندك) */
  html[dir="ltr"] h2,
  html[dir="ltr"] .section-title,
  html[dir="ltr"] .services-title,
  html[dir="ltr"] .kit-title,
  html[dir="ltr"] .training-kits h2{
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  html[dir="ltr"] p,
  html[dir="ltr"] .section-desc,
  html[dir="ltr"] .services-desc,
  html[dir="ltr"] .kit-desc,
  html[dir="ltr"] .training-kits p{
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* MOBILE + EN (LTR): Training Kits title LEFT */
@media (max-width: 900px){
  html[dir="ltr"] h3[data-i18n="kits_title"]{
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}



@media (max-width: 900px){
  html[dir="ltr"] .nav-dropdown-title[data-i18n="axes_menu_title"]{
    text-align: left !important;
  }
}





/* Menu dropdown title: LEFT in English (LTR) – Desktop + Mobile */
html[dir="ltr"] .nav-dropdown-title[data-i18n="axes_menu_title"]{
  text-align: left !important;
}




/* ✅ MOBILE ONLY: نزّل الهيرو تحت الهيدر */
@media (max-width: 980px){
  /* إذا الهيدر fixed/sticky، نعوّض ارتفاعه */
  main.contact-page{
    padding-top: 84px; /* عدّليها حسب ارتفاع الهيدر عندك */
  }

  /* احتياط: لو الهيرو نفسه لازق زيادة */
  .contact-hero{
    margin-top: 0 !important;
  }
}



/* ✅ Mobile AR: خلّي "شركاؤنا" يطلع مثل نسخة EN تماماً */
@media (max-width: 980px){

  /* جرّبي نطبّق على أكثر من احتمال لاسم الكونتينر */
  html[dir="rtl"] #partners .partners-grid,
  html[dir="rtl"] #partners .partners-list,
  html[dir="rtl"] #partners .partners-wrap,
  html[dir="rtl"] #partners .partners-container,
  html[dir="rtl"] #partners .partners-logos{
    box-sizing: border-box;
    max-width: 100% !important;
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;

    margin: 0 auto !important;
    padding: 0 22px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    text-align: center !important;
    align-items: center !important;

    /* ⭐ نفس اللي عند EN (هذا غالباً حل القص) */
    direction: ltr !important;

    /* احتياط ضد أي قص/تحريك */
    transform: none !important;
    translate: none !important;
    overflow: visible !important;
  }

  /* ✅ رجّعي النصوص للعربي داخل القسم فقط */
  html[dir="rtl"] #partners h2,
  html[dir="rtl"] #partners p,
  html[dir="rtl"] #partners a,
  html[dir="rtl"] #partners .section-title,
  html[dir="rtl"] #partners .section-subtitle{
    direction: rtl !important;
    text-align: center !important;
  }

  /* توسيط الكروت/الشعارات نفسها */
  html[dir="rtl"] #partners .partner-card,
  html[dir="rtl"] #partners .partner-item{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  html[dir="rtl"] #partners img{
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
  }
}


/* ✅ Elegant Tajawal (Desktop-like) + keep FontAwesome icons safe */

/* الأفضل: تحميل الخط (لو ما كان محمّل في صفحاتك الداخلية) */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');

:root{
  --nahj-font: "Tajawal", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* الخط الأساسي للموقع */
html, body{
  font-family: var(--nahj-font) !important;
  font-weight: 400;
  line-height: 1.85;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* ورّث الخط للعناصر اللي دايم “تفلت” بالجوال */
button, input, textarea, select{
  font-family: inherit !important;
  font-weight: inherit !important;
}

/* لمسة فخامة للعناوين */
h1, h2, h3, .section-title{
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* النصوص */
p, li{
  font-weight: 400 !important;
}

/* ✅ استثناء الأيقونات: خلي Font Awesome كما هو */
i,
[class^="fa"], [class*=" fa-"],
[class^="fa-"], [class*=" fa-"]::before,
[class^="fa-"], [class*=" fa-"]::after{
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}



@media (max-width: 820px){

  /* ✅ أخفي "شركاؤنا" من الهيدر */
  .nav-links a[data-i18n="nav_partners"]{
    display:none !important;
  }

  /* ✅ عشان ما يترك فراغ/مسافة داخل القائمة (أفضل) */
  .nav-links > li:nth-child(4){
    display:none !important;
  }
}


/* ✅ اخفي زر "انضم كمدرب" (نسخة الجوال داخل nav-links) في الديسكتوب */
.nav-links li.nav-join{
  display: none !important;
}

/* ✅ أظهره فقط في الجوال */
@media (max-width: 820px){
  .nav-links li.nav-join{
    display: list-item !important;
  }
}




/* ===============================
   FIX: فلسفتنا بالجوال – Tajawal فقط
   =============================== */
@media (max-width: 980px){
  .nahj-philo,
  .nahj-philo *{
    font-family: "Tajawal", system-ui, sans-serif !important;
    letter-spacing: 0 !important;
  }

  .nahj-philo-text h2{
    font-weight: 700 !important;
  }

  .nahj-philo-text p{
    font-size: 15.5px !important;
    line-height: 1.9 !important;
  }
  
}



/* ================================
   ✅ FIX IMAGE POSITION ON LANG SWITCH (AR ↔ EN)
   ================================ */

/* الحاوية حق الصورة */
.hero-image,
.hero-img,
.hero-media,
.hero-visual{
  position: relative !important;
  overflow: hidden !important;   /* يمنع أي تمدد أو انزلاق */
}

/* الصورة نفسها */
.hero-image img,
.hero-img img,
.hero-media img,
.hero-visual img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;        /* نفس القص دائمًا */
  object-position: center center !important; /* تثبيت المكان */
  transform: none !important;          /* يمنع أي تحريك */
}

/* تأكيد الاتجاه حتى مع EN */
html[dir="ltr"] .hero-image img,
html[dir="ltr"] .hero-img img,
html[dir="ltr"] .hero-media img,
html[dir="ltr"] .hero-visual img{
  object-position: center center !important;
}

/* ================================
   📱 Mobile specific (أهم جزء)
   ================================ */
@media (max-width: 820px){

  .hero-image,
  .hero-img,
  .hero-media,
  .hero-visual{
    height: 260px !important;   /* ثابته – عدلي الرقم لو تبين */
    min-height: 260px !important;
    max-height: 260px !important;
  }

  .hero-image img,
  .hero-img img,
  .hero-media img,
  .hero-visual img{
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 35% !important; /* يثبت القص حتى لو تغير النص */
  }
}




.nav-dropdown-menu,
.nav-dropdown-content,
.dropdown-menu{
  display: none;
}

.nav-dropdown-menu.is-open,
.nav-dropdown-content.is-open,
.dropdown-menu.is-open{
  display: block;
}