:root{
  --container:1700px;
  --font-ar: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  --brand-900:#072033;
  --accent:#82a63d;
  --muted:rgba(3,22,34,0.55);
  --surface:#ffffff;
  --green:#82a63d;
  --header-h:60px;
  --radius:12px;
  --card-shadow: 0 6px 18px rgba(3,22,34,0.06);
  --gap:24px;
  --overlay-opacity: 0.40; 
  --overlay-blend: multiply; 
  --about-stagger: 0.08s; 
  --about-duration: 0.6s;
  --about-ease: cubic-bezier(.22,.9,.36,1);
}



/* base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--font-ar);direction:rtl;background:#f5fbfb;color:var(--brand-900);-webkit-font-smoothing:antialiased}
.container{max-width:var(--container);margin:0 auto;padding:0rem;}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;height:var(--header-h);z-index:9999;display:flex;align-items:center;backdrop-filter: blur(4px);padding:0 12px}
.header-inner{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-inline:12px; 
}

/* الشعار واسم المنظمة */
.header-logo{
  height:56px;
  display:block;
  padding: 0.4rem 0.6rem 0.2rem 0.6rem;
}

.nav{display:flex;align-items:center;gap:1rem}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.45rem .8rem;border-radius:12px;border:0;cursor:pointer;font-weight:700;text-decoration:none}
.btn-ghost{background:transparent;border:1px solid rgba(3,22,34,0.06);color:var(--brand-900)}
.btn-ghost.small{padding:4rem 5rem 4rem 10rem;border-radius:14px}
.nav-list{display:flex;gap:2rem;list-style:none;margin:0;padding:7rem;align-items:center}
.nav-list a{text-decoration:none;color:#072033;font-weight:700;padding:.4rem .6rem 0}
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.brand-name { font-weight:800; font-size:0.98rem; color:var(--brand-900); white-space:nowrap; }
.brand-logo{height:56px;width:56px;border-radius:10px;object-fit:cover;}


/* تأكد من محاذاة القسم الأيمن */
.header-right { display:flex; align-items:center; gap:20px; }



/* زر اللغة */
.btn-lang {
  width:36px;
  height:36px;
  padding:0;
  display:inline-grid;
  place-items:center;
  border-radius:8px;
  background: rgba(243,249,255,0.95); /* خلفية فاتحة زرقوانية خفيفة */
  border: 1px solid rgba(215,234,254,0.9);
  color: #0b66d1;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow: none; /* لا ظل ثقيل افتراضي */
}

/* العنصر الداخلي الذي يجمع الأيقونات (A + رمز الترجمة) */
/* محتوى الأيقونة (A + رمز) */
.lang-icon{ display:inline-flex; align-items:center; gap:6px; line-height:1; font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, Arial; }
.icon-A{ font-weight:900; font-size:14px; color:#0b66d1; transform: translateY(-1px); }
.icon-t{ font-size:10px; color:#0b66d1; opacity:0.95; transform: translateY(1px); }

/* تأثير التحويم */
.btn-lang:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(3,22,34,0.06);
  background: linear-gradient(180deg, #ffffff, #f6fbff);
}


/* تأثير التركيز لأغراض الوصول */
.btn-lang:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(11,102,209,0.10), 0 8px 22px rgba(3,22,34,0.06);
  border-color: rgba(11,102,209,0.22);
}

/* تصغير طفيف على الشاشات الصغيرة */
@media (max-width: 1100px){
  .header-logo{height:48px}
  .btn-lang{ width:34px; height:34px; border-radius:7px; }
  .icon-A{ font-size:13px; }
  .icon-t{ font-size:9px; }
}


/* HERO */
.hero{position:relative;padding-top:calc(var(--header-h) + 42px);padding-bottom:90px;min-height:520px;overflow:hidden;background:linear-gradient(180deg,#f6fbfc,#eef7f8)}
.top-green-inverse{position:absolute;left:-6%;top:-30px;width:48%;height:140px;z-index:3;transform:scaleY(-1) skewX(-6deg);pointer-events:none}

.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("images/overlay.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: var(--overlay-opacity);
  pointer-events: none;
  z-index: 1; 
  mix-blend-mode: var(--overlay-blend);
  filter: grayscale(100%) contrast(.95) blur(.2px);
}


/* shapes image moved down (below hero content) */
.hero-shapes-below{position:absolute;left:0;bottom:5%;width:100%;max-width:1600px;opacity:1;z-index:1;pointer-events:none;filter:drop-shadow(0 6px 18px rgba(3,22,34,0.05))
;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;}

/* arrow (behind text) */
.hero-arrow{position:absolute;right:34%;top:38%;width:240px;opacity:0.95;transform:translateY(-10%);z-index:2;pointer-events:none}

/* hero container */
.hero-container {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: left;
  justify-content: flex-start; 
  min-height: 520px;
  padding: 0 5%;
}
/* reserve space on the right so panel not overlap content */
.hero-content {
  max-width: 650px;
  text-align: right;
  padding: 70px 0;
  margin-right: 0; 
}
.eyebrow{display:inline-block;padding:.35rem .8rem;border-radius:999px;background:rgba(10,160,168,0.06);color:#0B6B71;font-weight:800;margin-bottom:12px}
.hero-title{font-size:48px;line-height:1.02;margin:0 0 12px;color:var(--brand-900);font-weight:900}
.hero-sub{color:var(--muted);margin-bottom:18px;font-size:1.1rem}

/* CTAs */
.hero-ctas{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.btn-primary{background:var(--accent);color:#072033;padding:.75rem 1.05rem;border-radius:10px;box-shadow:0 10px 30px rgba(245,154,42,0.14);font-weight:900}
.btn-outline{background:transparent;border:2px solid var(--accent);color:var(--brand-900);padding:.6rem .95rem;border-radius:10px;font-weight:800}

/* stats */
.hero-stats{display:flex;gap:12px;margin-top:6px}
.stat{background:var(--surface);padding:10px 14px;border-radius:12px;box-shadow:0 14px 30px rgba(3,22,34,0.06);min-width:120px;text-align:center}
.stat strong{display:block;color:#0B6B71;font-weight:900;font-size:18px}
.stat span{display:block;color:var(--muted);font-size:13px;margin-top:6px}

/* hero panel (orange touch) — now smaller and rotated slightly, with soft gold frame */
.hero-panel{position:absolute;right:6%;top:12%;width:300px;height:420px;z-index:5;background:linear-gradient(180deg,#e8a04b,#c67b2f);clip-path: polygon(36% 0, 100% 0, 100% 100%, 0 100%);box-shadow:0 22px 48px rgba(3,22,34,0.12);transform:rotate(-2deg);overflow:visible}
.hero-panel::after{
  /* subtle inner highlight */
  content:"";
  position:absolute;inset:8% 8% 8% 8%;z-index:0;background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(0,0,0,0.06));clip-path:inherit;border-radius:4px;pointer-events:none;
}
.panel-inner{position:relative;z-index:2;padding:22px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;height:100%}
.panel-wordmark {
  position: absolute;
  left: 10%; 
  top: 37%;
  transform: translateY(-50%);
  height: 270px; 
  width: auto;
  filter: drop-shadow(0 15px 35px rgba(3,22,34,0.15));
  opacity: 1;
  z-index: 5;
}


  
.section-block.site-container{
  padding:0px 0px;
  max-width: var(--container-2);
}

/* البطاقة الأساسية */
.about-layout{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:50px;
  align-items:center;
  position:relative;
  overflow:hidden;
  border-radius:0px;
  padding:50px;
  background:  #eef9fa ;
  box-shadow: 0 18px 50px rgba(3,22,34,0.18);
  color: #fff;

  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}


/* pseudo-element */
.about-layout::before{
  content: "";
  position: absolute;
  right: -12%;
  top: -40%;
  width:380px;
  height:380px;
  background: radial-gradient(circle at 30% 30%, rgba(245,154,42,0.16), transparent 25%),
              radial-gradient(circle at 70% 70%, rgba(125,178,45,0.08), transparent 25%);
  transform: rotate(18deg);
  filter: blur(22px);
  pointer-events: none;
  z-index:0;
  border-radius:40%;
  mix-blend-mode:screen;
  opacity:0.9;
}

/* الصورة */
.about-media{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.about-media img{
  width:320px;
  height:320px;
  object-fit:cover;
  border-radius:18px;
  border:6px solid rgba(255,255,255,0.06);
  box-shadow: 0 20px 40px rgba(3,22,34,0.28);
  transition: transform .36s cubic-bezier(.2,.9,.3,1), box-shadow .36s;
}
.about-media img:hover{
  transform: rotate(0) scale(1.02);
  box-shadow: 0 30px 60px rgba(3,22,34,0.34);
}

/* المحتوى النصي */
.about-content{
  z-index:2;
  color: var(--brand-900);
}
.about-content h2{
  margin:0 0 8px;
  font-size:2rem;
  letter-spacing:0.2px;
  color: var(--brand-900);
  text-shadow: 0 6px 20px rgba(3,22,34,0.28);
}
.about-content .muted-text{
  color: var(--brand-900);
  margin-bottom:14px;
  line-height:1.6;
  max-width:760px;
}

/* قائمة المعلومات */
.info-list{
  list-style:none;
  padding:0;
  margin:0 0 18px;
  display:grid;
  grid-template-columns:repeat(1, minmax(0,1fr));
  gap:10px;
}
.info-list li{
  display:flex;
  gap:10px;
  align-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  padding:10px 12px;
  border-radius:10px;
  color: var(--brand-900);
  font-weight:600;
  border-left:4px solid rgba(255,255,255,0.06);
  transition: transform .18s, background .18s;
}
.info-list li:hover{
  transform: translateY(-4px);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
}

/*  نقاط صغيرةأمام كل بند */
.info-list li::before{
  content: "";
  width:10px;
  height:10px;
  border-radius:50%;
  background: var(--green);
  display:inline-block;
  flex:0 0 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* أزرار الإجراء */
.cta-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.btn{ font-weight:700; border-radius:10px; padding:10px 16px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; transition:transform .14s, box-shadow .14s; }





/* تنسيق الأزرار الخاصة بقسم "عن المنظمة" */

.btn--green {
  background-color: #7db22d; 
  color: #fff;
  border: none;
  border-radius: 6px; 
  padding: 10px 24px;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(125, 178, 45, 0.3);
}

.btn--green:hover {
  background-color: #6a9624;
  transform: translateY(-2px);
}

/* زر "عرض البرامج"  */
.btn--simple {
  background: transparent;
  color: var(--brand-900);
  border: none;
  font-weight: 700;
  padding: 10px 15px;
  box-shadow: none;
}

.btn--simple:hover {
  color: #7db22d;
  background: transparent;
  transform: translateY(-2px);
}

.info-list li {
  margin-bottom: 8px; 
  font-weight: 600;
  color: #072033;
  background: transparent !important; 
  border-left: none !important;
  padding: 5px 0;
}

.info-list li::before {
  background-color: #7db22d !important;
  margin-left: 10px; /* مسافة بين النقطة والنص */
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}





/* 1. إعدادات الحركة العامة */
:root {
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --duration-normal: 0.8s;
  --delay-step: 0.1s;
}


.reveal-element {
  opacity: 0;
  transform: translateY(30px); 
  transition: opacity var(--duration-normal) var(--ease-out-expo),
              transform var(--duration-normal) var(--ease-out-expo),
              filter var(--duration-normal) var(--ease-out-expo);
  filter: blur(5px); 
  will-change: opacity, transform;
}

/* عند تفعيل الحركة (بواسطة JS) */
.reveal-element.in-view {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/*  حركات مختلفة */
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-scale { transform: scale(0.9); }

.reveal-element.in-view.reveal-left,
.reveal-element.in-view.reveal-right {
  transform: translateX(0);
}
.reveal-element.in-view.reveal-scale {
  transform: scale(1);
}

/* التأخير المتتابع (Staggering Effect) للعناصر المتجاورة */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* 2. تحسين حركة الهيرو (Hero Section) */
.hero-shapes-below {
  animation: floatShapes 20s infinite alternate ease-in-out;
}

@keyframes floatShapes {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-20px) scale(1.02); }
}

/* 3. (Magnetic Buttons) */
.btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn:active {
  transform: scale(0.95) !important;
}

/* 4. تأثير الصورة في قسم "عن المنظمة" */
.about-media img {
  transition: transform 1.2s var(--ease-out-expo), box-shadow 0.5s ease;
}
.about-media:hover img {
  transform: scale(1.03) rotate(-1deg);
}





.btn--primary{
  background: linear-gradient(90deg, var(--accent), #f26b1a);
  color:#072033;
  box-shadow: 0 10px 30px rgba(245,154,42,0.16);
  border: none;
}
.btn--primary:hover{ transform: translateY(-4px); filter:brightness(.98); }


.btn--outline{
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 -2px 0 rgba(255,255,255,0.02);
}
.btn--outline:hover{ background: rgba(255,255,255,0.04); transform: translateY(-3px); }


.about-content h2{line-height:1.05}
.about-content .muted-text{font-size:1rem}
.info-list li{font-size:0.98rem}

/* CTA */
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  padding:10px 16px;
  text-decoration:none;
  cursor:pointer;
  font-weight:600;
  transition:all .18s ease;
  border:1px solid transparent;
}

/* Variants */
.btn--primary{
  background:var(--accent);
  color:#000000;
  border-color:var(--accent);
}
.btn--primary:hover{filter:brightness(.95)}

.btn--outline{
  background:transparent;
  color:var(--brand-900);
  border-color:var(--brand-900);
}
.btn--outline:hover{
  background:rgba(7,32,51,0.06);
}

.btn--text{
  background:transparent;
  color:var(--accent);
  border:none;
  padding:6px 8px;
}
.btn--text:hover{filter:brightness(.98); text-decoration:underline}

.btn--ghost{
  background:transparent;
  color:var(--accent);
  border:1px solid rgba(3,22,34,0.08);
}
.btn--ghost:hover{background:rgba(3,22,34,0.03)}

.btn--small{padding:6px 10px;font-size:.9rem;border-radius:6px}

/* Programs grid */
.programs-grid{
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.program-card{
  background:var(--surface);
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--card-shadow);
  display:flex;
  flex-direction:column;
  transition:transform .16s ease, box-shadow .16s ease;
  min-height:100%;
}
.program-card:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(3,22,34,0.08)}

.program-card__image{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
}

.card-content{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}

.card-content h3{margin:0;font-size:1.1rem}
.card-meta{color:var(--muted);font-size:.95rem;margin:2px 0}
.card-excerpt{margin:6px 0 12px;color:var(--brand-900);flex:1}

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

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-ar);
  color:var(--brand-900);
  background:linear-gradient(180deg,#f7f9fb 0%, #ffffff 100%);
  direction:rtl;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  font-size:16px;
}

/* Site container */
.site-container{
  max-width:var(--container);
  margin:0 auto;
  padding:40px 20px;
}

/* Generic */
.section-block{padding:36px 0}
.muted-text{color:var(--muted)}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  padding:10px 16px;
  text-decoration:none;
  cursor:pointer;
  font-weight:600;
  transition:all .18s ease;
  border:1px solid transparent;
}

/* Button variants */
.btn--primary{
  background:var(--accent);
  color:var(----brand-900);
  border-color:var(--accent);
}
.btn--primary:hover{filter:brightness(.95)}

.btn--ghost{
  background:transparent;
  color:var(--accent);
  border:1px solid var(--muted-2);
}
.btn--ghost:hover{background:rgba(3,22,34,0.03)}

/* CTA strip */
.cta-strip{
  background: linear-gradient(90deg, rgba(7,32,51,0.96) 0%, rgba(7,32,51,0.88) 100%);
  color:#fff;
  padding:22px 0;
  margin-bottom:18px;
}
.cta-strip .cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.cta-strip h3{margin:0;font-size:1.25rem}
.cta-strip .muted-text{color:rgba(255,255,255,0.85);margin-top:6px}



/* Contact info */
.contact-info h2{margin-top:0;font-size:1.4rem}
.contact-info p{margin:8px 0}




/* main footer area */
.footer-main {
  background: transparent;
  padding: 48px 0 26px;
  direction: rtl; 
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr; 
  
  max-width: 1200px;
  margin: 0 auto; 
  
  gap: 40px; 
  align-items: start;
  padding: 22px 20px; 
}

.footer-col {
  color: var(--brand-900);
  text-align: right;
}

.footer-logo {
  height: 46px;
  margin-bottom: 12px;
  display: block;
}

.brand-title {
  margin: 6px 0 10px;
  font-size: 1.05rem;
  letter-spacing: 0.2px;
  font-weight: bold;
  line-height: 1.5;
}

.footer-socials {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.footer-socials .social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(7,32,51,0.04);
  color: var(--brand-900);
  text-decoration: none;
  transition: 0.3s;
}

.footer-socials .social:hover {
  background: var(--brand-900);
  color: #fff;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  transition: 0.2s;
}

.footer-links a:hover {
  color: var(--brand-900);
  text-decoration: underline;
}

/* contact column */
.contact-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start; 
}

.btn-contact {
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #76a345; 
  color: white;
  text-decoration: none;
  font-weight: bold;
  border: none;
  cursor: pointer;
}

/* bottom strip */
.footer-bottom {
  background: var(--brand-900); 
  color: #ffffff;
  padding: 15px 0;
  margin-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-bottom-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.95rem;
  color: #ffffff;
}


.footer-bottom-inner p, 
.footer-bottom-inner span, 
.footer-bottom-inner a {
  color: #ffffff92 !important; 
  text-decoration: none;
  margin: 0;
}



/*   محاذاة اللغة الإنجليزية (من اليسار إلى اليمين) */

/* 1. إعدادات عامة للغة الإنجليزية */
[dir="ltr"] {
    text-align: left;
}

[dir="ltr"] body, 
[dir="ltr"] p, 
[dir="ltr"] h1, 
[dir="ltr"] h2, 
[dir="ltr"] h3, 
[dir="ltr"] h4, 
[dir="ltr"] span {
    text-align: left; 
}

[dir="ltr"] h5 {
    text-align: center;
}

/* 2. سكشن الهيرو (الصفحة الرئيسية) */
[dir="ltr"] .hero-content {
    text-align: left !important;
    margin-right: 30rem !important;
    margin-left: 0 !important;
}

[dir="ltr"] .hero-container {
    justify-content: flex-start !important; 
}

[dir="ltr"] .hero-ctas {
    justify-content: flex-start !important; 
    margin-right: 20rem;
}

[dir="ltr"] .panel-wordmark {
    left: auto !important;
    right: 5% !important; 
}

/* 3. سكشن عن المنظمة (About) */
[dir="ltr"] .about-content {
    text-align: left !important;
}

[dir="ltr"] .info-list li {
    flex-direction: row !important; 
    justify-content: flex-start !important;
}

[dir="ltr"] .info-list li::before {
    margin-left: 0 !important;
    margin-right: 12px !important; 
}

[dir="ltr"] .cta-actions {
    justify-content: flex-start !important;
}

/* 4. الفوتر (تذييل الصفحة) */
[dir="ltr"] .footer-col {
    text-align: left; 
}

[dir="ltr"] .footer-links, 
[dir="ltr"] .contact-block {
    align-items: flex-start;
}

[dir="ltr"] .footer-socials {
    justify-content: flex-start;
}

/* 5. الهيدر (القائمة العلوية) */
[dir="ltr"] .brand {
    flex-direction: row !important;
}

[dir="ltr"] .nav-links {
    margin-left: auto !important;
    margin-right: 0 !important;
    flex-direction: row !important;
}

/* 6. الاتجاه العام للعناصر المرنة */
[dir="ltr"] .about-layout, 
[dir="ltr"] .footer-grid {
    direction: ltr;
}

/* تأكد أن النقاط في بداية الكلام الإنجليزي تظهر في مكانها الصحيح (يسار) */
[dir="ltr"] .hero-sub {
    direction: ltr !important;
    unicode-bidi: plaintext;
}



/* تحسين استجابة الـ Iframes */
iframe {
    width: 100%;
    border: none;
}

/* حاويات الايفريم لتقبل الطول التلقائي على الجوال */
[id$="Frame"] {
    height: 100vh; 
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 28px !important;
        line-height: 1.2;
    }
    .hero-sub {
        font-size: 0.95rem !important;
    }
    
    /* ضبط المسافات في قسم "عن المنظمة" */
    .about-layout {
        padding: 30px 20px !important;
    }
    
    #contactFrame {
        height: 1150px !important; 
    }
    #prFrame, #activitiesFrame {
        height: 100vh;
    }
    
    /* ضبط تذييل الصفحة */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: center !important;
    }
    .footer-col {
        text-align: center !important;
    }
    .contact-block {
        align-items: center !important;
    }
}

/*  واجهة الصفحة (Hero) للجوال - شعار ثم نص ثم أزرار موسطة */
@media (max-width: 1100px) {
  /* 1. ضبط الحاوية لتكون عمودية وموسطة */
  .hero-container {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding-top: 50px !important;
    min-height: auto !important;
  }

  /* 2. وضع الشعار في الأعلى موسطاً */
  .panel-wordmark {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    height: 150px !important; 
    width: auto !important;
    margin: 0 auto 30px auto !important;
    order: 1 !important; 
    display: block !important;
  }

  /* 3. وضع النص تحت الشعار موسطاً */
  .hero-content {
    order: 2 !important;
    text-align: center !important;
    max-width: 100% !important;
    padding: 0 20px !important;
    margin: 0 auto !important;
  }

  .hero-title {
    font-size: 28px !important;
    text-align: center !important;
  }

  .hero-sub {
    text-align: center !important;
    margin: 0 auto 20px auto !important;
  }

  /* 4. وضع الأزرار في الأسفل موسطة */
  .hero-ctas {
    order: 3 !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* محاذاة اللغة الإنجليزية للجوال لضمان التوسط */
  [dir="ltr"] .hero-content,
  [dir="ltr"] .hero-ctas,
  [dir="ltr"] .hero-sub {
    text-align: center !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  [dir="ltr"] .hero-ctas {
    justify-content: center !important;
  }

  [dir="ltr"] .panel-wordmark {
    right: auto !important;
    left: auto !important;
  }
}


/* تعديل الفوتر (Footer) للجوال - توسيط كامل لكل العناصر */
@media (max-width: 768px) {
  /* 1. تحويل الشبكة لعمود واحد وتوسيط النص */
  .footer-grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 40px !important;
  }

  /* 2. توسيط كل عمود ومحتوياته */
  .footer-col {
    text-align: center !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 3. توسيط الشعار والروابط */
  .footer-logo {
    margin: 0 auto 15px auto !important;
  }

  .footer-links {
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* 4. توسيط قسم "تواصل معنا" والزر الأخضر */
  .contact-block {
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .btn-contact {
    margin: 10px auto 0 auto !important;
  }

  /* 5. محاذاة اللغة الإنجليزية في الجوال لضمان التوسط */
  [dir="ltr"] .footer-col, 
  [dir="ltr"] .footer-links, 
  [dir="ltr"] .contact-block {
    text-align: center !important;
    align-items: center !important;
  }
}


/* إصلاح نهائي لصفحة "عن المنظمة" (توسيط القائمة ومحاذاة النقاط)*/
@media (max-width: 992px) {
  .about-layout {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .about-media { width: 100% !important; margin-bottom: 20px !important; }
  .about-media img { width: 100% !important; max-width: 400px !important; height: auto !important; border-radius: 15px !important; }

  .about-content { width: 100% !important; }
  .about-content h2 { font-size: 1.8rem !important; margin-bottom: 15px !important; }

  /* 1. توسيط كتلة القائمة بالكامل في منتصف الشاشة */
  .info-list {
    display: inline-flex !important; 
    flex-direction: column !important;
    margin: 0 auto 25px auto !important;
    padding: 0 !important;
    width: fit-content !important; 
    text-align: right !important;
  }

  .info-list li {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    background: transparent !important;
    font-size: 0.95rem !important;
    white-space: nowrap !important; 
  }

  /* 2. ضبط النقطة الخضراء للعربي (تكون على اليمين ملتصقة بالنص) */
  [dir="rtl"] .info-list li {
    flex-direction: row !important; 
    justify-content: flex-start !important;
  }

  [dir="rtl"] .info-list li::before {
    margin-left: 10px !important; 
    margin-right: 0 !important;
    content: "";
    width: 8px;
    height: 8px;
    background-color: #7db22d;
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* 3. ضبط النقطة الخضراء للإنجليزي (تكون على اليسار ملتصقة بالنص) */
  [dir="ltr"] .info-list {
    text-align: left !important;
    align-items: flex-start !important;
  }

  [dir="ltr"] .info-list li {
    flex-direction: row !important;
  }

  [dir="ltr"] .info-list li::before {
    margin-right: 10px !important;
    margin-left: 0 !important;
  }

  /* الأزرار في الأسفل */
  .cta-actions {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
  }
}