:root{
  --navy:#123b70;--navy-2:#0e315d;--green:#15965b;--green-2:#0f7e4b;--orange:#d9992e;
  --ink:#183456;--muted:#64748b;--line:#e2e8f0;--soft:#f8fafc;--white:#fff;
  --page-pad:clamp(18px,4vw,64px);--section-y:clamp(36px,4.5vw,64px);--content-max:1360px;
  --radius:18px;--shadow:0 12px 32px rgba(18,59,112,.07)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--soft);color:var(--ink);font-family:"Noto Kufi Arabic",Arial,Tahoma,sans-serif;line-height:1.65;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.wrap{width:100%;max-width:none;margin:0;padding-inline:var(--page-pad)}

/* HEADER */
.hdrwrap{background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100;backdrop-filter:blur(12px)}
.hdr{width:100%;max-width:var(--content-max);margin-inline:auto;min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:clamp(12px,1.8vw,24px);position:relative}
.logo{display:flex;align-items:center;flex:0 0 auto}.logo img{height:52px;width:auto;object-fit:contain}
.nav{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);font-size:14px;font-weight:700;color:#475569;white-space:nowrap}
.nav a{position:relative;padding:6px 0;transition:color .2s}
.nav a:hover,.nav a.active{color:var(--green)}
.nav a.active:after{content:"";position:absolute;inset-inline:0;bottom:-6px;height:3px;border-radius:4px;background:var(--green)}
.spacebtn{border:1px solid #cbd5e1;border-radius:10px;padding:9px 16px;background:#fff;font-size:13px;font-weight:800;color:var(--navy);box-shadow:0 4px 14px rgba(18,59,112,.05);transition:.2s;white-space:nowrap}
.spacebtn:hover{border-color:var(--green);color:var(--green)}
.langs{display:flex;gap:8px;font-size:12px;font-weight:900;align-items:center}
.langs a{padding:4px 8px;border-radius:6px;color:#64748b}
.langs .active,.langs a:hover{color:var(--green);background:#eefaf3}
.iklaa-menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:10px;font-size:20px;color:var(--navy);cursor:pointer;align-items:center;justify-content:center}

/* FULL-WIDTH SECTIONS, CENTERED CONTENT */
.home-block{width:100%!important;max-width:none!important;background:#fff;border-block:1px solid #edf2f6;margin:0;position:relative}
.home-block:nth-child(even){background:#f8fbff}
.home-block.inner,.hero-block{padding:var(--section-y) var(--page-pad)!important;min-height:0!important}
.home-block>*,.hero-block>*{width:100%;max-width:var(--content-max);margin-inline:auto}

/* HERO */
.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4vw,64px);align-items:center}
.heroimg{min-width:0;display:flex;align-items:center;justify-content:center}
.heroimg .dynamic-media{width:100%!important;max-width:100%!important;border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.heroimg img{width:100%!important;height:auto!important;max-height:460px!important;object-fit:cover!important;border-radius:20px}
.herotxt{min-width:0;align-self:center}
.eyeb{color:var(--orange);font-size:clamp(14px,1.2vw,18px);font-weight:900;margin-bottom:10px}
.herotxt h1{margin:0 0 16px;font-size:clamp(30px,3.6vw,54px);line-height:1.25;color:var(--navy);font-weight:900}
.herotxt h1 b{color:var(--green)}
.herotxt p{font-size:clamp(15px,1.15vw,18px);color:var(--muted);margin:0 0 24px;max-width:650px}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.primary{background:linear-gradient(135deg,var(--green),var(--green-2));color:#fff;padding:13px 24px;border-radius:12px;font-size:14px;font-weight:800;box-shadow:0 8px 20px rgba(21,150,91,.2);min-height:44px;display:inline-flex;align-items:center}
.secondary{padding:12px 20px;border:1px solid #cbd5e1;border-radius:12px;color:var(--navy);background:#fff;font-size:14px;font-weight:800;min-height:44px;display:inline-flex;align-items:center}
.hint{font-size:12px;color:#94a3b8;margin-top:12px}

/* NEEDS (QUICK PATHS) */
.needs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.need{min-height:116px;border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;background:#fff;border-radius:18px;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}
.need:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(18,59,112,.11)}
.need .ico{font-size:34px;width:56px;height:56px;border-radius:14px;background:rgba(21,150,91,.1);color:var(--green);display:grid;place-items:center;flex:0 0 56px}
.need strong{display:block;font-size:17px;color:var(--navy);margin-bottom:4px}
.need small{display:block;font-size:13px;color:var(--muted);line-height:1.5}
.need.job{background:linear-gradient(135deg,#ffffff,#f2fbf7)}
.need.project{background:linear-gradient(135deg,#ffffff,#fffaf0)}
.need.coop{background:linear-gradient(135deg,#ffffff,#f3f8fc)}

/* COMMON HEADINGS & ABOUT */
.section h2,.aboutcopy h2{font-size:clamp(24px,2.4vw,34px);line-height:1.3;margin:0;color:var(--navy);font-weight:900}
.sub{font-size:15px;color:var(--muted);margin-top:6px}
.aboutgrid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,56px);align-items:center}
.aboutcopy p{font-size:16px;color:var(--muted);margin:14px 0 0;line-height:1.8}
.values{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;font-size:15px;font-weight:800}
.values span{background:#fff;border:1px solid var(--line);padding:12px 20px;border-radius:99px;box-shadow:0 4px 12px rgba(18,59,112,.04);display:inline-flex;align-items:center}
.values span:before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-inline-end:10px}
.values span:nth-child(1):before{background:#15965b}
.values span:nth-child(2):before{background:#f0a120}
.values span:nth-child(3):before{background:#2563eb}

/* PROGRAMS */
.programs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px}
.prog{min-height:110px;border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;background:#fff;border-radius:18px;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}
.prog:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(18,59,112,.1)}
.prog strong{font-size:16px;color:var(--navy);line-height:1.4}
.prog .clipart{width:56px;height:56px;border-radius:14px;background:rgba(18,59,112,.06);display:grid;place-items:center;font-size:26px;flex:0 0 56px;overflow:hidden}
.prog .clipart img{width:100%;height:100%;object-fit:cover}
.p1{background:#f7fcf8}.p2{background:#f5f9fd}.p3{background:#fbf8ff}.p4{background:#fffaf1}.p5{background:#fff7f7}.p6{background:#fbfbff}

/* ============================================================================
   BLOC ACTUALITÉS / المستجدات (CORRIGÉ & HARMONISÉ)
   ============================================================================ */
.newshd{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.newshd .more{font-size:14px;color:var(--green);font-weight:800;padding:8px 16px;background:#eefaf3;border-radius:10px;margin:0;transition:.2s}
.newshd .more:hover{background:var(--green);color:#fff}

.newsgrid{
  display:grid;
  grid-template-columns:300px repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}

.agenda,.news{
  border:1px solid var(--line);
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  position:static!important;
  width:100%!important;
  height:auto!important;
  min-height:100%;
  transition:transform .2s ease,box-shadow .2s ease;
}

.news:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px rgba(18,59,112,.12);
}

/* Carte Agenda */
.agenda{padding:24px;background:linear-gradient(160deg,#ffffff,#f8fbff);justify-content:space-between}
.agenda h3{font-size:19px;margin:0 0 16px;color:var(--navy);font-weight:900}
.agitem{display:grid;grid-template-columns:42px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid #edf2f7;align-items:center}
.agitem:last-of-type{border-bottom:0}
.agitem .ii{width:42px;height:42px;border-radius:12px;background:#eef6ff;display:grid;place-items:center;font-size:20px}
.agitem strong{display:block;font-size:14px;color:var(--navy)}
.agitem small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.agenda .more{font-size:13px;color:var(--navy);font-weight:800;margin-top:16px;padding:10px 14px;background:#f1f5f9;border-radius:10px;text-align:center;transition:.2s}
.agenda .more:hover{background:var(--navy);color:#fff}

/* Cartes المستجدات */
.news > a{display:flex!important;flex-direction:column;height:100%;color:inherit}
.news-media{width:100%;height:210px;background:#eef2f6;overflow:hidden;position:relative;flex-shrink:0}
.news-media .dynamic-media{width:100%!important;height:100%!important;max-width:100%!important;aspect-ratio:unset!important}
.news-media img,.news img{width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;object-position:center!important;transition:transform .35s ease}
.news:hover .news-media img{transform:scale(1.04)}
.news .b{padding:18px 20px;display:flex;flex-direction:column;flex:1;justify-content:space-between;gap:10px}
.news-date{font-size:12px;color:var(--green);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.news h3{font-size:16px;line-height:1.45;margin:0;color:var(--navy);font-weight:800;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news p{font-size:13.5px;line-height:1.65;color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-readmore{margin-top:auto;padding-top:10px;font-size:13px;font-weight:800;color:var(--navy);display:inline-flex;align-items:center;gap:6px}
.news:hover .news-readmore{color:var(--green)}

/* STORY */
.storytitle{font-size:clamp(24px,2.4vw,34px);font-weight:900;color:var(--navy);margin-bottom:20px}
.story{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.storyimg{display:flex;justify-content:center;align-items:center;overflow:hidden;border-radius:18px;background:#f1f5f9;min-height:300px}
.storyimg .dynamic-media{width:100%!important;height:100%!important}
.storyimg img{width:100%!important;height:100%!important;max-height:380px!important;object-fit:cover!important;border-radius:18px}
.storybox{border:2px dashed #cbd5e1;display:flex;align-items:center;justify-content:center;text-align:center;padding:32px;background:#fff;border-radius:18px;min-height:300px}
.storybox .sym{font-size:42px;margin-bottom:8px}
.storybox p{font-size:16px;color:var(--ink);font-weight:700;margin:8px 0}
.storybox small{font-size:13px;color:var(--muted);display:block}

/* PORTAL */
.portal{background:linear-gradient(135deg,#eefaf3,#f3faf7);border:1px solid #ccebd9;min-height:120px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:24px 32px;border-radius:20px;box-shadow:var(--shadow)}
.portal .pi{font-size:44px;color:var(--green);width:68px;height:68px;background:#fff;border-radius:16px;display:grid;place-items:center;box-shadow:0 6px 16px rgba(21,150,91,.1)}
.portal h3{font-size:20px;margin:0;color:var(--navy);font-weight:900}
.portal p{font-size:14px;color:var(--muted);margin:6px 0 0}
.portal a{background:var(--green);color:#fff;padding:13px 24px;border-radius:12px;font-size:14px;font-weight:800;white-space:nowrap;transition:.2s}
.portal a:hover{background:var(--green-2)}

/* PARTNERS */
.partners{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:22px}
.partner{min-height:104px;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:13px;font-weight:700;background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.partner img{max-height:60px;max-width:85%;object-fit:contain}

/* FAQ */
.faqs{margin-top:20px;display:grid;gap:12px}
.faq{border:1px solid var(--line);padding:0 20px;font-size:15px;background:#fff;border-radius:14px;box-shadow:0 4px 14px rgba(18,59,112,.03)}
.faq summary{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;font-weight:800;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq b{font-size:22px;color:var(--green);font-weight:700}
.faq p{margin:0;padding:14px 0 18px;color:var(--muted);font-size:14px;line-height:1.75;border-top:1px solid #f1f5f9}

/* CTA & FOOTER */
.custom-block{text-align:center;padding:28px;background:#fff;border-radius:18px;border:1px solid var(--line)}
.cta{background:linear-gradient(135deg,#123b70,#0b2547);color:#fff;display:grid;place-items:center;text-align:center;padding:42px 24px;border-radius:22px;box-shadow:0 18px 40px rgba(18,59,112,.18)}
.cta h3{font-size:clamp(22px,2.5vw,32px);margin:0 0 16px}
.cta a.maincta{display:inline-flex;align-items:center;background:var(--green);color:#fff;border-radius:12px;padding:13px 28px;font-size:15px;font-weight:800;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.cta small{display:block;font-size:13px;margin-top:12px;opacity:.9}
.cta small a{text-decoration:underline}

.footerwrap{background:#fff;border-top:1px solid var(--line)}
.footerwrap footer{min-height:78px;display:flex;align-items:center;padding-inline:var(--page-pad)}
.foot{max-width:var(--content-max)!important;margin-inline:auto!important;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;font-size:13px;color:var(--muted);flex-wrap:wrap}
.social{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:#fff;color:var(--navy);font-weight:700;transition:.2s}
.social a:hover{background:var(--navy);color:#fff}
.social a.adminicon{color:var(--green);border-color:#bfe4d0}
.footlogo{font-weight:900;color:var(--navy);font-size:15px}
.dynamic-media{display:block;max-width:100%;margin-inline:auto;line-height:0;overflow:hidden}

/* ============================================================================
   RESPONSIVE TABLET (769px - 1024px)
   ============================================================================ */
@media (max-width:1024px){
  :root{--page-pad:24px;--section-y:36px}
  .nav{gap:12px;font-size:12.5px}
  .hero{grid-template-columns:1fr 1fr;gap:24px}
  .needs{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .programs{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* المستجدات sur Tablette : Agenda en haut sur 2 colonnes, puis les cartes 2 par 2 */
  .newsgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .agenda{grid-column:1 / -1}
  .story{grid-template-columns:1fr 1fr}
  .partners{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ============================================================================
   RESPONSIVE MOBILE (<= 768px)
   ============================================================================ */
@media (max-width:768px){
  :root{--page-pad:16px;--section-y:28px}
  .hdr{min-height:70px;flex-wrap:wrap;padding-block:10px}
  .iklaa-menu-toggle{display:inline-flex}
  .nav{display:none;width:100%;order:99;flex-direction:column;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;margin-top:8px;box-shadow:0 12px 28px rgba(18,59,112,.1)}
  .nav.is-open{display:flex}
  .nav a{padding:10px 12px;border-radius:8px}
  .nav a.active:after{display:none}
  .nav a.active{background:#eefaf3}
  .hero{display:flex;flex-direction:column;gap:22px}
  .herotxt{order:1;width:100%}
  .heroimg{order:2;width:100%}
  .needs,.programs,.newsgrid,.story,.aboutgrid{grid-template-columns:1fr;gap:16px}
  .agenda{grid-column:auto}
  .portal{grid-template-columns:1fr;text-align:center;justify-items:center;padding:22px 18px}
  .portal a{width:100%;text-align:center}
  .partners{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .foot{flex-direction:column;text-align:center;justify-content:center;padding-block:16px}
  .social{justify-content:center}
}

@media (max-width:380px){
  .logo img{height:42px}
  .spacebtn{padding:7px 10px;font-size:11px}
  .partners{grid-template-columns:1fr}
}
/* ==========================================================================
   تصحيح نهائي ومحاذاة صور وبطاقات المستجدات في نفس السطر (Mostajaddat Row Alignment)
   ========================================================================== */
.newsgrid, .mostajaddat-row {
    display: grid !important;
    grid-template-columns: 320px repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: var(--content-max, 1360px) !important;
    margin-inline: auto !important;
    position: static !important;
    transform: none !important;
}

/* في حال عدم وجود قسم المواعيد (Agenda) وجد 3 بطاقات مستجدات فقط */
.newsgrid:not(:has(.agenda)), .newsgrid-only3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* إلغاء أي تتموضع مطلق قد يفسد التنسيق العمودي والأفقي */
.news, .agenda, .news-card {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border: 1px solid var(--line, #e2e8f0) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow, 0 12px 32px rgba(18,59,112,.07)) !important;
}

/* توحيد أبعاد ومقاسات الصور الثلاث لتكون متساوية تماماً وبنفس السطر */
.news-media {
    width: 100% !important;
    height: 200px !important;
    max-height: 200px !important;
    min-height: 200px !important;
    background: #eef2f6 !important;
    overflow: hidden !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

.news-media img, .news img, .news-media .dynamic-media img {
    width: 100% !important;
    height: 100% !important;
    max-height: 200px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* تنسيق محتوى البطاقة الداخلي لضمان تساوي الارتفاعات */
.news > a {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    color: inherit !important;
}

.news .b {
    padding: 18px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

/* التجاوب مع شاشات التابلت والهواتف */
@media (max-width: 1100px) {
    .newsgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .agenda {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 768px) {
    .newsgrid {
        grid-template-columns: 1fr !important;
    }
}
/* Force strict 4-column layout for news section */
.newsgrid { display: grid !important; grid-template-columns: 280px repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; align-items: stretch !important; }
.agenda, .news { position: static !important; left: auto !important; top: auto !important; transform: none !important; width: 100% !important; height: auto !important; }
@media(max-width:1024px){.newsgrid{grid-template-columns:repeat(2, minmax(0,1fr)) !important;}}
@media(max-width:768px){.newsgrid{grid-template-columns:1fr !important;}}