/* =========================================================
   Marsad NF — styles.css
   هوية عامة + هيدر + هيرو + بطاقات + أخبار + اتصال + فوتر
   ========================================================= */

/* -----------------------
   1) المتغيرات العامة والألوان
------------------------*/

:root{
  /* ألوان وهوية */
  --brand:#3c8f82;
  --brand-700:#2f6e66;
  --accent:#14b8a6;
  --text:#0b1324;
  --muted:#6b7280;
  --border:#e5e7eb;
  --bg:#ffffff;
  --bg-alt:#f8fafc;
  --card:#ffffff;
  --shadow:0 10px 25px rgba(2,6,23,.08);

  /* تايبوجرافي */
  --font-family:"Tajawal","Segoe UI",Tahoma,Arial,sans-serif;
  --base-line:1.5;
  --section-title-size:clamp(18px, 1.2rem + 0.4vw, 28px);
  --font-weight-strong:800;

  /* حواف/تباعد */
  --container-max:min(1280px, 92vw);
  --container-pad:16px 24px;
  --radius:16px;

  /* الهيدر */
  --brand-img-w:204px;

  /* الهيرو */
  --hero-height:90vh;
  --hero-min-h:520px;
  --hero-title-max:1100px;
  --title-fluid:clamp(1.2rem, 1rem + 2vw, 2.6rem);
}

/* خط تجوال (fallback) */
@font-face{
  font-family:"Tajawal";
  src:local("Tajawal");
  font-display:swap;
}

/* -----------------------
   2) أساسيات
------------------------*/

*{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
}

html, body{
  height:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-family);
  line-height:var(--base-line);
  direction:rtl;
}

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

a{
  color:inherit;
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}

.container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:var(--container-pad);
}

section{
  scroll-margin-top:96px; /* تعويض الهيدر اللاصق */
}

.section-title{
  margin:0 0 12px;
  font-size:var(--section-title-size);
  font-weight:700;
  color:var(--text);
}
.title-dark{
  color:#000 !important;
}

/* نص بولد أسود */
.text-strong{
  color:#000;
  font-family:"Tajawal",sans-serif;
  font-weight:900;
  font-size:var(--text-strong-size, 24px);
  line-height:1.5;
}

.muted{ color:var(--muted); }
.text-center{ text-align:center; }
.text-justify{ text-align:justify; }

/* -----------------------
/* -----------------------
  /* =========================
   3) الهيدر + القائمة (منزلقة للجوال)
   ========================= */

/* الهيدر ثابت أعلى الصفحة */
header{
  position:sticky;
  top:0;
  z-index:1000;
  background:#fff;
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(1) blur(2px);
}

/* داخل الهيدر */
header .nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* الشعار */
header .brand a{
  display:inline-block;
  line-height:0;
}
header .brand img{
  width:clamp(160px, 14vw, var(--brand-img-w));
  height:auto;
  object-fit:contain;
}

/* كتلة القائمة */
nav.menu{
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
}

/* روابط القائمة (الوضع الافتراضي: دِسك توب) */
.menu-links{
  display:flex;
  align-items:center;
  gap:10px;
}

.menu .nav-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  font-weight:var(--font-weight-strong);
  font-size:15px;
  color:#000;
  text-decoration:none;
  white-space:nowrap;
  transition:color .15s ease,transform .12s ease;
}
.menu .nav-link:hover{
  color:var(--brand);
  transform:translateY(-1px);
  text-decoration:none;
}
.menu .nav-link.active{
  color:var(--brand);
}

/* أيقونة صغيرة بجانب النص (اختيارية) */
.menu .nav-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  font-size:12px;
  line-height:1;
}

/* منسدلة "عن المؤسسة" */
.dropdown{
  position:relative;
}
.dropdown > a{
  display:inline-flex;
  align-items:center;
  gap:4px;
  cursor:pointer;
}

/* المنسدلة على الديسكتوب */
.submenu{
  position:absolute;
  top:calc(100% + 0px);
  inset-inline-end:0;
  min-width:220px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:6px;
  box-shadow:var(--shadow);
  display:none;
  z-index:1200;
}
.submenu .sub-link{
  display:block;
  padding:8px 10px;
  border-radius:8px;
  color:#000;
  font-weight:600;
}
.submenu .sub-link:hover{
  background:#f3f4f6;
  text-decoration:none;
}
.dropdown:hover > .submenu,
.dropdown.open > .submenu{
  display:block;
}

/* زر الهامبرجر – افتراضياً مخفي (يظهر في الجوال فقط) */
.menu-toggle{
  display:none;
  background:none;
  border:0;
  padding:6px 8px;
  cursor:pointer;
  border-radius:8px;
}
.menu-toggle span{
  display:block;
  width:22px;
  height:2px;
  border-radius:999px;
  background-color:#111827;
  transition:transform .2s ease, opacity .2s ease;
}

/* حالة X عند فتح القائمة */
body.menu-open .menu-toggle span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}
body.menu-open .menu-toggle span:nth-child(2){
  opacity:0;
}
body.menu-open .menu-toggle span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

/* ========== الجوال: قائمة منزلقة وزر ثابت أعلى يمين الشاشة ========== */
@media (max-width:900px){

  body.menu-open header{
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    border-bottom-color: rgba(255,255,255,0.25);
  }
  .menu-links{
    background: rgba(255, 255, 255, 0.45);       /* شفافية */
    backdrop-filter: blur(18px) saturate(1.4);    /* زجاج */
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: -24px 0 48px rgba(0,0,0,.25);
  }

  header .nav{
    position:relative;
    justify-content:center;
    gap:8px;
  }

  /* زر الهامبرجر — ثابت أعلى يمين الصفحة (عكس شريط "نسخة تجريبية") */
  .menu-toggle{
    position:fixed !important;
    top:16px !important;
    right:16px !important;   /* الجهة المعاكسة للريبون */
    left:auto !important;
    margin:0 !important;

    display:inline-flex !important;
    flex-direction:column;
    justify-content:center;
    gap:4px;

    background:none;
    border:0;
    padding:6px 8px;
    cursor:pointer;

    z-index:3001 !important; /* أعلى من شريط النسخة التجريبية */
  }

  /* قائمة منزلقة من اليمين */
  .menu-links{
    background: rgba(255, 255, 255, 0.45);       /* شفافية */
    backdrop-filter: blur(18px) saturate(1.4);    /* زجاج */
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: -24px 0 48px rgba(0,0,0,.25);
    position:fixed;
    top:60px;
    top:0;
    right:0;
    bottom:20;
    width:min(62vw, 200px);
    background:#fff;
    padding:72px 18px 24px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    box-shadow:-24px 0 48px rgba(2,6,23,.25);
    transform:translateX(100%);
    transition:transform .25s ease;
    z-index:2000;
    overflow-y:auto;
    background: rgba(255, 255, 255, 0.45);   /* شفافية 65% */
    backdrop-filter: blur(14px) saturate(1.4); /* ضباب + وضوح */
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: -24px 0 48px rgba(0,0,0,.2);
  }
  body.menu-open .menu-links{
    transform:translateX(0);
  }

  .menu .nav-link,
  .menu .dropdown > a{
    width:100%;
    padding:10px 4px;
    font-size:17px;
  }

  /* المنسدلة داخل اللوحة */
  .submenu{
    position:static !important;
    display:none;
    box-shadow:none;
    border:0;
    padding:4px 0 0;
    background:transparent;
  }
  .dropdown.open > .submenu{
    display:block;
  }

.menu-links .submenu .sub-link{
    padding: 6px 20px;      /* إزاحة لليسار (يمين في RTL) */
    margin-right: 18px;     /* إزاحة واضحة لتصبح فرعية */
    font-size: 16px;
    opacity: 0.9;
  }

  /* رفع القائمة الفرعية قليلاً لتكون أقرب لمسمى "عن المؤسسة" */
  .menu-links .submenu{
    margin-top: -4px;       /* تقليل المسافة بين العنصر الأب والفرعي */
  }

  /* سهم المنسدلة يكون أقرب */
  .dropdown > a span[aria-hidden="true"]{
    margin-right: 4px;
  }
}

  /* تعتيم الخلفية عند فتح القائمة */
  body.menu-open::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:1000;
    background:rgba(0,0,0,.35);
    backdrop-filter:blur(1px);
  }
}

/* ========== دِسك توب: أفقي، بلا هامبرجر ========== */
@media (min-width:901px){
  .menu-toggle{
    display:none !important;
  }
  .menu-links{
    position:static;
    transform:none;
    background:transparent;
    padding:0;
    box-shadow:none;
    flex-direction:row;
    width:auto;
    height:auto;
  }
  .submenu{
    position:absolute;
  }
  body.menu-open::before{
    content:none;
  }
}

/* -----------------------
   4) الهيرو
------------------------*/

.hero-section{
  position:relative;
  width:100%;
  height:min(var(--hero-height), 92svh);
  min-height:clamp(420px, 60svh, 720px);
  overflow:hidden;
}

.hero-background{
  position:absolute;
  inset:0;
  z-index:1;
}
.hero-background img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,.6));
  z-index:2;
}

.hero-content{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:4vw;
  text-align:center;
  color:#fff;
}

.hero-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  max-width:min(850px, 90vw);
  padding:0 1rem;
}

.hero-logo{
  width:clamp(90px, 15vw, 160px);
  height:auto;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.4));
}

.hero-title{
  margin:0;
  font-weight:600;
  font-size:clamp(18px, 1.5vw + .8rem, 32px);
  line-height:1.45;
  text-wrap:balance;
  overflow-wrap:anywhere;
}

/* جوال للهيرو */
@media (max-width:768px){
  .hero-content{
    align-items:center;
    justify-content:center;
    padding:0 1rem;
  }
  .hero-logo{
    width:clamp(70px, 24vw, 120px);
  }
  .hero-title{
    font-size:clamp(16px, 4vw + .4rem, 22px);
    max-width:92vw;
  }
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion:reduce){
  .hero-background img,
  .hero-overlay,
  .hero-content,
  .hero-logo,
  .hero-title{
    animation:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}

/* -----------------------
   5) بطاقات + شبكات
------------------------*/

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
}

.grid-1,
.grid-2,
.grid-3{
  display:grid;
  gap:16px;
  grid-template-columns:1fr;
}

@media (min-width:850px){
  .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* مراصدنا – بطاقة أفقية */
.card--media-horizontal{
  display:flex;
  align-items:center;
  gap:24px;
  padding:24px;
  flex-wrap:nowrap;
}
.card--media-horizontal .card-media{
  width:140px;
  height:auto;
  object-fit:contain;
  border-radius:12px;
  flex-shrink:0;
}
.card--media-horizontal .card-content{
  flex:1;
}

/* زر ذهبي */
.btn, .button{
  display:inline-block;
  padding:12px 18px;
  border-radius:12px;
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  font-weight:700;
  cursor:pointer;
  text-decoration:none !important;
  transition:transform .12s ease, filter .12s ease, background .12s ease, color .12s ease;
}
.btn:hover, .button:hover{
  transform:translateY(-1px);
  filter:brightness(.98);
}

.btn.gold{
  background-color:#AB8C72;
  border-color:#AB8C72;
}
.btn.gold:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}

/* مراصدنا – تجاوب */
@media (max-width:700px){
  .card--media-horizontal{
    flex-direction:column;
    text-align:center;
  }
  .card--media-horizontal .card-media{
    width:120px;
    margin-bottom:12px;
  }
}

/* -----------------------
   6) قسم الأخبار
------------------------*/

.news-section .news-grid{
  display:grid;
  gap:16px;
}
@media (min-width:850px){
  .news-section .news-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

.card.news{
  height:100%;
  display:flex;
  flex-direction:column;
}

.card.news .card-top{
  flex:1;
}

.card.news .card-image{
  width:100%;
  height:230px;
  background-size:cover;
  background-position:center;
  border-radius:12px;
  margin-bottom:10px;
}

.news-section .card.news h4{
  color:var(--brand);
  margin:0 0 6px;
  font-size:14px;
  font-weight:700;
}

.news-section .card.news h3{
  margin:0;
  font-size:18px;
  color:var(--text);
  font-weight:700;
}

/* ثبات ارتفاع العناوين */
.news-section .card-content h4{
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.4;
  min-height:1.4em;
}
.news-section .card-content h3{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.4;
  min-height:calc(1.4em * 2);
}

.news-section .card.news .card-bottom{
  margin-top:auto;
  padding-top:16px; /* زيادة المسافة بين الزر والمحتوى */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.news-section time{
  color:var(--muted);
  font-size:13px;
}

/* -----------------------
   7) قسم الاتصال (بطاقتان أفقيتان)
------------------------*/

.contact-section{
  background:var(--bg-alt);
  padding:60px 0;
  display:flex;
  justify-content:center;
}

.contact-container.two-cards{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:center;
  align-items:stretch; /* بدل flex-start لتوحيد ارتفاع البطاقات */
}

.contact-card{
  flex:1 1 320px;
  background:#fff;
  border-radius:16px;
  padding:24px;
  box-shadow:0 8px 20px rgba(0,0,0,0.05);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.contact-card h3{
  font-size:20px;
  font-weight:800;
  color:#0b1324;
  margin:0 0 12px;
}

.contact-card ul{
  list-style:none;
  margin:0 0 16px;
  padding:0;
  line-height:1.8;
}

.contact-card a{
  color:var(--brand);
  font-weight:700;
}
.contact-card a:hover{
  text-decoration:underline;
}

/* الخريطة */
.map-cover{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  margin-top:12px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}
.map-cover iframe{
  width:100%;
  height:240px;
  border:0;
  display:block;
}
.map-cover .map-link{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
}

/* نموذج التواصل */
.qform{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:-4px;
}
.qform input,
.qform select,
.qform textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #ccc;
  border-radius:8px;
  font-family:"Tajawal",sans-serif;
  font-size:15px;
}
.qform textarea{
  height:160px;
  resize:vertical;
}
.qform button{
  background-color:var(--brand);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:10px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.qform button:hover{
  background-color:var(--brand-700);
  transform:translateY(-2px);
}

/* استجابة الجوال لقسم الاتصال */
@media (max-width:768px){
  .contact-container.two-cards{
    max-width:100%;
    padding-inline:16px;
  }
}

/* -----------------------
   8) الفوتر
------------------------*/

footer{
  background:#fff;
  border-top:1px solid var(--border);
  color:var(--text);
  text-align:center;
  font-weight:600;
}

.footer-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  padding:16px 0;
}

/* شعار ونص الفوتر */
.footer-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
}
.footer-brand-logo{
  width:80px;
  height:auto;
  object-fit:contain;
  opacity:.95;
}
.footer-brand-text{
  font-weight:700;
  color:#222;
  font-size:16px;
}

/* لوجوهات الشركاء */
.footer-logos{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex:1 1 240px;
}
.footer-logos img{
  height:60px;
  width:auto;
  object-fit:contain;
  opacity:.95;
  transition:transform .12s ease, opacity .12s ease;
}
.footer-logos img:hover{
  transform:translateY(-2px);
  opacity:1;
}

/* روابط الفوتر */
.footer-links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
}
.footer-links a{
  font-weight:700;
}
.footer-links a:hover{
  text-decoration:underline;
}

/* السطر السفلي */
.footer-bottom{
  border-top:1px solid var(--border);
  padding:12px 0;
  font-size:14px;
  color:#555;
}

@media (max-width:700px){
  .footer-wrap{
    justify-content:center;
    text-align:center;
  }
  .footer-links{
    width:100%;
    justify-content:center;
  }
  .footer-bottom{
    font-size:13px;
  }
}

/* -----------------------
   9) شريط "نسخة تجريبية"
------------------------*/

.beta-ribbon{
  position:fixed;
  inset-inline-end:0;
  top:5%;
  transform:translateY(-50%);
  background:linear-gradient(90deg, var(--brand) 0%, var(--brand-700) 100%);
  color:#fff;
  border-radius:0 12px 12px 0;
  box-shadow:0 12px 28px rgba(2,6,23,.18);
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  min-width:120px;
  min-height:34px;
  font-weight:800;
  letter-spacing:.5px;
  font-size:14px;
  text-align:center;
  user-select:none;
}
.beta-ribbon::after{
  content:"";
  position:absolute;
  inset:6px 6px 6px 10px;
  border-radius:0 10px 10px 0;
  box-shadow:0 0 0 0 rgba(255,255,255,.35);
  animation:betaPulse 2.2s ease-out infinite;
}
@keyframes betaPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.35); }
  70%{ box-shadow:0 0 0 12px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}
@media (max-width:600px){
  .beta-ribbon{
    min-width:128px;
    min-height:40px;
    font-size:13px;
    padding:8px 12px;
  }
}

/* -----------------------
   10) مجلس الأمناء + الرئيس التنفيذي
------------------------*/

/* شبكة مجلس الأمناء */
.board-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(1, minmax(0,1fr));
}
@media (min-width:300px){
  .board-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1000px){
  .board-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.member{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 10px 25px rgba(2,6,23,.08);
  padding:12px;
  text-align:center;
}
.member img{
  width:180px;
  height:230px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid var(--border);
  margin:0 auto 10px;
}
.member .role{
  color:var(--brand);
  font-weight:700;
  margin:0 0 6px;
  font-size:14px;
}
.member .name{
  margin:0;
  font-size:16px;
  color:var(--text);
}

/* صفحة الرئيس التنفيذي */
.ceo-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
/* تمركز بطاقة الإدارة التنفيذية في المنتصف */
.ceo-main{
  flex:1;
  min-height:calc(80vh - 140px); /* تقريبًا ارتفاع الشاشة ناقص الهيدر+الفوتر */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 18px;
}
.ceo-main .container{
  display:flex;
  justify-content:center;
}

.ceo-card{
  width:min(720px, 92vw);
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  padding:18px 20px;
  text-align:center;
}

/* -----------------------
   11) طباعة
------------------------*/

@media print{
  header, .beta-ribbon{ display:none !important; }
  .container{
    max-width:100%;
    padding:0;
  }
  .card{
    box-shadow:none;
    border-color:#ddd;
  }
}
/* ===== تحسين شكل قائمة الجوال: تنظيم + تباعد + تمييز السب منيو ===== */
@media (max-width: 900px){

  /* لوحة القائمة الجانبية */
  .menu-links{
    padding: 72px 20px 24px;
    gap: 4px;
    background: #ffffff;
    box-shadow: -24px 0 48px rgba(15,23,42,.25);
  }

  /* الروابط الرئيسية */
  .menu .nav-link,
  .menu .dropdown > a{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    font-size: 17px;
    font-weight: 800;
    padding: 10px 8px;
    border-radius: 12px;
    letter-spacing: .01em;
  }

  /* مسافة بسيطة بين كل عنصر */
  .menu .nav-link:not(:last-child){
    margin-bottom: 4px;
  }

  /* حالة المرور / الضغط */
  .menu .nav-link:hover,
  .menu .nav-link:active{
    background: #f1f5f9;
    color: var(--brand);
    text-decoration: none;
  }

  /* عن المؤسسة (العنصر الرئيسي) */
  .dropdown > .nav-link{
    margin-bottom: 2px;
  }

  /* حاوية العناصر الفرعية داخل الجوال */
  .dropdown.open > .submenu{
    margin-top: 2px;
    padding: 4px 0 6px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  /* روابط السب منيو: أصغر، متباعدة، ومزاحة قليلاً لليسار */
  .submenu .sub-link{
    font-size: 15px;
    font-weight: 600;
    padding: 6px 8px;
    padding-inline-start: 24px;  /* إزاحة لليسار في RTL */
    border-radius: 10px;
    color: #111827;
    opacity: .9;
    position: relative;
  }

  .submenu .sub-link + .sub-link{
    margin-top: 2px;
  }

  /* نقطة صغيرة قبل كل عنصر فرعي لتمييزه */
  .submenu .sub-link::before{
    content: "";
    position: absolute;
    inset-inline-start: 10px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--brand);
    transform: translateY(-50%);
    opacity: .8;
  }
}