/* ——— إعدادات عامة للصفحة ——— */
:root{
  --fs-green: #2d6a4f;
  --fs-gray:  #ccced0;
  --fs-light: #f8f9fa;
}

.about-hero{
  background: #fff;
  padding: 36px 0;
}

/* شبكة المقدّمة */
.intro-grid{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 22px;
}
.intro-copy h2{
  color: var(--fs-green);
  font-size: clamp(22px, 4vw, 32px);
  margin-bottom: 10px;
}
.intro-copy p{ color:#344; opacity:.95; }

/* كبسولات النقاط (نفس ستايل الهوم) */
.hero-points{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-top:14px; padding:0; list-style:none; direction:rtl;
}
.hero-points li{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; background:#fff; color:#22343a;
  border:2px solid rgba(45,106,79,.34); border-radius:999px;
  font-weight:800; font-size:.95rem; line-height:1;
  box-shadow:0 3px 10px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  white-space:nowrap;
}
.hero-points li::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--fs-green); flex:0 0 8px; transform:translateY(1px);
}
.hero-points li:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.1);
  border-color:rgba(45,106,79,.55);
}

/* بطاقة جانبية في المقدّمة */
.intro-card{
  background:#fff;
  border:1px solid rgba(45,106,79,.18);
  border-radius:16px;
  padding:18px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.intro-card h3{ color:var(--fs-green); margin-bottom:8px; }
.intro-card p{ color:#345; margin-bottom:10px; }
.intro-card .card-link{ color:var(--fs-green); font-weight:700; }

/* ——— رسالة/رؤية/قيم ——— */
.mvv-section{ background:var(--fs-light); padding:34px 0; }
.mvv-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:16px;
}
.mvv-card{
  background:#fff;
  border:1px solid rgba(45,106,79,.18);
  border-radius:16px;
  padding:18px;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 4px 10px rgba(0,0,0,.04);
}
.mvv-card:hover{ transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,0,0,.08); }
.mvv-icon{
  width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#eaf3ee; color:var(--fs-green);
  font-size:24px; margin-bottom:8px;
}
.mvv-card h4{ color:var(--fs-green); margin-bottom:6px; }
.mvv-card p{ color:#345; }

/* ——— الخط الزمني ——— */
.timeline-section{ background:#fff; padding:32px 0; }
.section-title{ color:var(--fs-green); margin-bottom:12px; }
.timeline{
  margin:0; padding:0; list-style:none; position:relative;
  border-right:3px solid rgba(45,106,79,.25);
}
.timeline li{
  position:relative; padding:12px 16px 12px 0;
}
.timeline .year{
  display:inline-block;
  background:var(--fs-green); color:#fff;
  font-weight:800; border-radius:999px;
  padding:6px 12px; margin-inline-start:10px;
}
.timeline li::before{
  content:""; position:absolute; top:18px; right:-7px;
  width:12px; height:12px; background:#fff; border:3px solid var(--fs-green);
  border-radius:50%;
}

/* ——— إنجازات/أرقام ——— */
.facts-section{ background:var(--fs-green); color:#fff; padding:18px 0; }
.facts-grid{
  display:grid; grid-template-columns: repeat(3,1fr);
  gap:10px; text-align:center;
}
.fact-num{ font-size: clamp(20px,5vw,32px); font-weight:800; }
.fact-label{ opacity:.92; }

/* ——— CTA ——— */
.cta-strip{ background:var(--fs-gray); padding:26px 0; }
.cta-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.btn.btn-inverse{ background:var(--fs-green); color:#fff; }
.btn.btn-inverse:hover{ opacity:.92; }

/* ——— استجابة ——— */
@media (max-width: 1024px){
  .intro-grid{ grid-template-columns:1fr; }
}
@media (max-width: 900px){
  .mvv-grid{ grid-template-columns:1fr 1fr; }
  .facts-grid{ grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width: 640px){
  .mvv-grid{ grid-template-columns:1fr; }
  .facts-grid{ grid-template-columns:1fr 1fr; }
  .cta-row{ flex-direction:column; text-align:center; }
}

/* شارة مرقّمة بدل السنة */
.timeline .step-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background: var(--fs-green); color:#fff; font-weight:800;
  margin-inline-start:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

/* عناوين الخطوات */
.timeline li h4{
  margin:6px 0 4px; color: var(--fs-green); font-weight:800;
  font-size: clamp(16px, 2.6vw, 18px);
}

/* تحسين المسافات للنص */
.timeline li p{
  color:#345; opacity:.95;
}