<!--
                                                                                                                                    
 ▓██▓   ▓█░  ▒██████    ▒██████   ░███████              ▓██░  ███   ▒██████   ▓█▒    ██     ███▓    ▓██░  ███   ███████▓  ████████  
 ▓███▒  ▓█░ ▓█▓    ██░ ▓█▓    ██░ ░██   ▓█▓             ▓█▓█ ▒█▒█  ▓█▓    ██░ ▓█▒    ██    ▓█ ██    ▓█▓█ ▒█▒█   ██▒       ██░   ▒██ 
 ▓█░██  ▓█░ ██     ▓█▓ ██     ▓█▓ ░██   ██▒             ██ █░█▒▒█░ ██     ▓█▓ ▓█▒    ██    █▓ ▒█▓   ██ █░█▒▒█░  ██▒       ██░    ██▒
 ▓█░░██ ▓█░ ██     ▓█▓ ██     ▓█▓ ░██████░              ██ ███ ░█░ █▓     ▓█▓ ▓███▓████   ▓█░  ██   ██ ███ ░█░  ███████░  ██░    ▓█▓
 ▓█░ ▒█▓▓█░ ██     ▓█▓ ██     ▓█▓ ░██  ██▒              ██  █▒ ░█▒ ██     ▓█▓ ▓█▒    ██   ██   ▓█▓  ██  █▒ ░█▒  ██▒       ██░    ██▒
 ▓█░  ████░ ██▓    ██  ██▓    ██  ░██  ░██              █▓     ░█▓ ██▓    ██  ▓█▒    ██  ▓████████  █▓     ░█▓  ██▒       ██░   ▒██ 
 ▓█░   ███░  ███████░   ███████░  ░██   ▓██             █▓      █▓  ███████░  ▓█▒    ██  ██     ██▓ █▓      █▓  ███████▓  ████████  
 ▓█░   ▒██░    ▓█▓░       ▓█▓░    ░██    ██▒            █▓      █▓    ▓█▓░    ▓█▒    ██ ▓█▓     ▒██ █▓      █▓  ██████▓▓  ████▓▒    
                                                                                                                                    
                                                                                                                                    
   ▓████▒      ▓██░     ███████    ███████      ▓████░    █████▓    ██████░    ░█████        ▓███      ▓████░    █████▓             
  ██▓  ██▓  ▒██▓██░     ██         ██         ▒██▓       ██░  ▓██   ▒   ▒██░   ▓▓  ▓██░     ▓████    ▒██▓       ██░  ▓██            
 ██░   ░██▒     ██░     ██         ██        ░██         ██   ▓█▓        ██         ██▓    ▓█░░██   ░██         ██   ▓█▓            
 ██  ▓████▓     █▓░     ██████░    ██████░   ▓███████     █████░     ▓███▓         ░██    ▓█▒ ░██   ▓███████     █████░             
 █████░ ▓█▓     ██░         ▒██▓       ▒██▓  ▓██░  ▓██   ▒██▓███░       ▒██▓      ▒██    ▒█▓  ░██   ▓██░  ▓██   ▒██▓███░            
 ██▒    ██░     ██░          ░██        ░██  ▒█▓    ██░ ▓█▓    ██         ██    ░▓█░    ░█████████▓ ▒█▓    ██░ ▓█▓    ██            
  ██▓  ██▓      ██░     ▒   ▓██░   ▒   ▓██░   ██▓  ▓██  ▒██░  ▓██  ░░   ▒██▓   ▓█▓            ░██    ██▓  ▓██  ▒██░  ▓██            
   ▓████░    ████████   █████▓     █████▓      ▓████▒    ░█████▓   ░██████    ░████████       ░██     ▓████▒    ░█████▓             
                                                                                                                                    
-->

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
      <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TXND73W4HB"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-TXND73W4HB');
</script>
    <!-- ================= BASIC META ================= -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>مجلس الشباب المصري | الهيكل</title>

    <meta
      name="description"
      content="الهيكل التنظيمي لمجلس الشباب المصري: مجلس الأمناء، الهيئة الاستشارية، الأمانات، الفرق، والإدارات."
    />
    <meta
      name="keywords"
      content="مجلس الشباب المصري, الهيكل, مجلس الأمناء, الهيئة الاستشارية, الأمانة العامة, الأمانة الفنية"
    />
    <meta name="author" content="Egyptian Youth Council" />

    <!-- ================= FAVICON ================= -->
    <link rel="icon" type="image/png" href="/images/logo.png" />

    <!-- ================= GOOGLE FONT ================= -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap"
      rel="stylesheet"
    />

    <!-- ================= ICONS ================= -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
    />
<link rel="stylesheet"href="scrollbar.css"/>
    <!-- ================= YOUR HEADER SCRIPT ================= -->
    <script src="/assets/js/header.js" defer></script>

    <style>
  /* ================= RESET ================= */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  html,
  body {
    height: 100%;
  }

  /* ================= BASE ================= */
  body {
    font-family: "Cairo", sans-serif;
    background: #f3f6fb;
    color: #111;
    direction: rtl;
    line-height: 1.9;
  }

  .layout-root {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  main {
    flex: 1;
    width: 100%;
  }

  /* ================= PAGE HERO ================= */
  .page-hero {
    padding: 110px 0 22px;
  }

  .hero-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 18px;
  }

  .hero-inner h1 {
    font-size: 34px;
    color: #083b8a;
    margin-bottom: 10px;
  }

  .hero-inner p {
    max-width: 1100px;
    font-size: 16.8px;
    color: #334155;
    text-align: right;
  }

  .crumb {
    margin-top: 10px;
    font-size: 14px;
    color: #64748b;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .crumb a {
    color: #0b5ed7;
    text-decoration: none;
    border-bottom: 1px solid rgba(11, 94, 215, 0.25);
  }

  /* ================= SECTION ================= */
  .section {
    padding: 30px 0;
    border-top: 1px solid rgba(8, 59, 138, 0.12);
  }

  .inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 18px;
  }

  .sec-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }

  .sec-head i {
    color: #0b5ed7;
    font-size: 16px;
  }

  .sec-head h2 {
    font-size: 24px;
    color: #083b8a;
    line-height: 1.35;
  }

  /* =========================================================
     SECTION 1: Pyramid People (عرض الصور بأبعادها الأصلية)
     ========================================================= */

  /* نفس الجريد بتاعك (6 أعمدة) */
  .pyramid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-top: 14px;
    align-items: start;
  }

  /* ✅ أهم تعديل: الكارت نفسه مايملاش عرض العمود
     - نخليه "fit-content" ويتسنتر جوه المساحة اللي واخدها من الجريد */
  .person-card {
    border: 1px solid rgba(8, 59, 138, 0.16);
    border-radius: 18px;
    background: transparent;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.15s ease, border-color 0.15s ease;

    width: fit-content;          /* ✅ ياخد مقاس المحتوى (الصورة + النص) */
    max-width: 100%;             /* ✅ ما يطلعش برّا الشاشة */
    justify-self: center;        /* ✅ يتوسّط داخل عمود/Span الجريد */
  }

  .person-card:hover {
    transform: translateY(-1px);
    border-color: rgba(11, 94, 215, 0.4);
  }

  /* ✅ حاوية الصورة: ما نخليش لها width:100% */
  .person-photo {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(8, 59, 138, 0.14);
    background: transparent;

    width: fit-content;          /* ✅ تمشي ورا مقاس الصورة */
    max-width: 100%;             /* ✅ أمان للموبايل */
    margin: 0 auto;              /* ✅ سنترة */
  }

  /* ✅ الصورة: أبعادها الأصلية بدون Stretch */
  .person-photo img {
    display: block;

    width: auto;                 /* ✅ لا تمدد */
    height: auto;                /* ✅ لا تضغط/لا قص */
    max-width: 100%;             /* ✅ على الشاشات الضيقة تنكمش بدل ما تكسر layout */
    max-height: none;

    object-fit: unset;           /* ✅ إلغاء cover */
    background: transparent;

    transform: scale(1);
    transition: transform 0.25s ease;
  }

  /* Hover zoom بسيط من غير ما يغير الأبعاد الأصلية (هيكبر كده كصورة) */
  .person-card:hover .person-photo img {
    transform: scale(1.02);
  }

  .person-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
    max-width: 100%;
  }

  .person-name {
    font-weight: 900;
    color: #111;
    font-size: 15.8px;
    line-height: 1.35;
  }

  .person-title {
    font-weight: 800;
    color: #083b8a;
    font-size: 14.2px;
    line-height: 1.4;
  }

  .person-desc {
    color: #334155;
    font-size: 13.6px;
    line-height: 1.6;
  }

  /* ====== Pyramid spans ======
     (نفس توزيعك)
  */
  .span-6 { grid-column: span 6; }
  .span-3 { grid-column: span 3; }
  .span-2 { grid-column: span 2; }

  /* الرئيس: نخلي النص أكبر شوية بس بدون فرض ارتفاع/عرض للصورة */
  .chair .person-name { font-size: 17px; }
  .chair .person-title { font-size: 15px; }

  /* =========================================================
     SECTION 2: Structure Lists
     ========================================================= */

  .structure-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 14px;
  }

  .block {
    border: 1px solid rgba(8, 59, 138, 0.16);
    border-radius: 18px;
    background: transparent;
    padding: 14px 14px;
  }

  .block h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    color: #083b8a;
    margin-bottom: 10px;
  }

  .block h3 i {
    color: #0b5ed7;
    font-size: 16px;
  }

  .list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid rgba(8, 59, 138, 0.12);
  }
  .item:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 9px;
    background: #0b5ed7;
    box-shadow: 0 0 0 6px rgba(11, 94, 215, 0.08);
    flex: 0 0 auto;
  }

  .item span {
    color: #334155;
    font-size: 15.6px;
    line-height: 1.7;
  }

  .subnote {
    margin-top: 10px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
  }

  /* ================= RESPONSIVE ================= */
  @media (max-width: 992px) {
    .page-hero {
      padding: 90px 0 18px;
    }
    .hero-inner h1 {
      font-size: 28px;
    }

    .pyramid {
      grid-template-columns: repeat(4, 1fr);
    }
    .span-6 { grid-column: span 4; }
    .span-3 { grid-column: span 2; }
    .span-2 { grid-column: span 2; }

    .structure-wrap {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 576px) {
    .hero-inner,
    .inner {
      padding: 0 12px;
    }
    .hero-inner p {
      font-size: 15.6px;
    }

    .pyramid {
      grid-template-columns: 1fr;
    }
    .span-6,
    .span-3,
    .span-2 {
      grid-column: span 1;
    }

    /* عشان الصور الأصلية ما تبقاش كبيرة قوي على الموبايل */
    .person-card { max-width: 100%; }
    .person-photo img { max-width: 100%; }
  }
</style>

  </head>

  <body class="layout-root">
    <div id="site-header"></div>

    <main>
      <!-- ================= HERO ================= -->
      <section class="page-hero">
        <div class="hero-inner">
          <h1>الهيكل</h1>
          <p>
            يوضح هذا القسم الهيكل التنظيمي لمجلس الشباب المصري، ويشمل مجلس الأمناء وأعضاء المجلس
            والأمانات والفرق والإدارات ذات الصلة.
          </p>
          <div class="crumb">
            <a href="/index.html">الرئيسية</a>
            <span>›</span>
            <span>الهيكل</span>
          </div>
        </div>
      </section>

      <!-- =========================================================
           SECTION 1: الهيكلة (الأشخاص) — 9 أعضاء (هرم)
           ========================================================= -->
      <section class="section">
        <div class="inner">
          <div class="sec-head">
            <i class="fa-solid fa-sitemap"></i>
            <h2>مجلس الأمناء</h2>
          </div>

          <!--
            ✅ ضع الصور في المسارات التالية (عدّلها حسب ملفاتك):
            /images/structure/1.jpg ... /images/structure/9.jpg

            ✅ كل بطاقة فيها 3 عناصر نص:
            - الاسم
            - المنصب (سطر رئيسي)
            - وصف مختصر (سطر ثالث)
          -->
          <div class="pyramid">
            <!-- 1) رئيس مجلس الأمناء (لازم فوق دائماً) -->
            <div class="person-card chair span-6">
              <div class="person-photo">
                <img
                  src="https://bazooka.losha.site/admin/img1/file_6976314155e0e2.13091319.png"
                  alt="د/ محمد ممدوح"
                  loading="lazy"
                />
              </div>
              <div class="person-meta">
                <div class="person-name">د/ محمد ممدوح</div>
                <div class="person-title">رئيس مجلس الأمناء</div>
                <div class="person-desc">رئيس اللجنة الاقتصادية بالمجلس القومي لحقوق الانسان</div>
              </div>
            </div>

            <!-- 2) صف عمودين -->
            <div class="person-card span-3">
              <div class="person-photo">
                <img
                  src="https://bazooka.losha.site/admin/img1/file_697631d1879a05.20104840.png"
                  alt="السفيرة/ سامية برسيس"
                  loading="lazy"
                />
              </div>
              <div class="person-meta">
                <div class="person-name">السفيرة/ سامية برسيس</div>
                <div class="person-title">الامين العام</div>
                <div class="person-desc">وزير مفوض بالجامعة العربية</div>
              </div>
            </div>

            <div class="person-card span-3">
              <div class="person-photo">
                <img
                  src="https://bazooka.losha.site/admin/img1/file_697631e875c628.95772173.png"
                  alt="د/ كيرلس نبيل"
                  loading="lazy"
                />
              </div>
              <div class="person-meta">
                <div class="person-name">د/ كيرلس نبيل</div>
                <div class="person-title">امين الصندوق</div>
                <div class="person-desc">الخبير بالقطاع المصرفي</div>
              </div>
            </div>

            <!-- 3) صف 3 أعمدة -->
            <div class="person-card span-2">
              <div class="person-photo">
                <img
                  src="https://bazooka.losha.site/admin/img1/file_6976327eef6606.83710908.png"
                  alt="النائبة/ منى عبدالله"
                  loading="lazy"
                />
              </div>
              <div class="person-meta">
                <div class="person-name">النائبة/ منى عبدالله</div>
                <div class="person-title">عضو مجلس الأمناء</div>
                <div class="person-desc">عضو مجلس النواب</div>
              </div>
            </div>

            <div class="person-card span-2">
              <div class="person-photo">
                <img
                  src="https://bazooka.losha.site/admin/img1/file_69763274a45e78.55358452.png"
                  alt="النائب/ علاء حمدي قريطم"
                  loading="lazy"
                />
              </div>
              <div class="person-meta">
                <div class="person-name">النائب/ علاء حمدي قريطم</div>
                <div class="person-title">عضو مجلس الأمناء</div>
                <div class="person-desc">عضو مجلس النواب</div>
              </div>
            </div>

            <div class="person-card span-2">
              <div class="person-photo">
                <img
                  src="https://bazooka.losha.site/admin/img1/file_6976321f10e286.28057381.png"
                  alt="النائبة/ /ألفت المزالوى"
                  loading="lazy"
                />
              </div>
              <div class="person-meta">
                <div class="person-name">النائبة /ألفت المزالوى</div>
                <div class="person-title">عضو مجلس الأمناء</div>
                <div class="person-desc">عضو مجلس النواب</div>
              </div>
            </div>

            <!-- 4) آخر صف 3 أعمدة (عشان يبقى متناسق حتى لو العدد فردي/زوجي) -->
            <div class="person-card span-2">
              <div class="person-photo">
                <img
                  src="https://bazooka.losha.site/admin/img1/file_6976328d6c7a27.24768978.png"
                  alt="د/ عبير عصام الدين"
                  loading="lazy"
                />
              </div>
              <div class="person-meta">
                <div class="person-name">د/ عبير عصام الدين</div>
                <div class="person-title">عضو مجلس الأمناء</div>
                <div class="person-desc">رئيس الاتحاد الأقليمي للجمعيات الاهلية بالجيزة</div>
              </div>
            </div>

            <div class="person-card span-2">
              <div class="person-photo">
                <img
                  src="https://bazooka.losha.site/admin/img1/file_69763287d4cbc8.12586417.png"
                  alt="النائب/ جون طلعت"
                  loading="lazy"
                />
              </div>
              <div class="person-meta">
                <div class="person-name">النائب/ جون طلعت</div>
                <div class="person-title">عضو مجلس الأمناء</div>
                <div class="person-desc">عضو مجلس النواب السابق</div>
              </div>
            </div>

            <div class="person-card span-2">
              <div class="person-photo">
                <img
                  src="https://bazooka.losha.site/admin/img1/file_69763282de1d02.25368076.png"
                  alt="د/ رنده فؤاد الدين"
                  loading="lazy"
                />
              </div>
              <div class="person-meta">
                <div class="person-name">د/ رنده فؤاد الدين</div>
                <div class="person-title">عضو مجلس الأمناء</div>
                <div class="person-desc">المدير التنفيذي للاتحاد النوعي لمناهضة الممارسات الضارة ضد المرأة</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- =========================================================
           SECTION 2: الهيكل (القائمة التنظيمية)
           ========================================================= -->
      <section class="section">
        <div class="inner">
          <div class="sec-head">
            <i class="fa-solid fa-diagram-project"></i>
            <h2>الهيكل التنظيمي</h2>
          </div>

          <div class="structure-wrap">
            <!-- العمود الأول -->
            <div class="block">
              <h3><i class="fa-solid fa-layer-group"></i> مكونات الهيكل</h3>
              <ul class="list">
                <li class="item"><span class="bullet"></span><span>مجلس الأمناء</span></li>
                <li class="item"><span class="bullet"></span><span>أرباب التطوع</span></li>
                <li class="item"><span class="bullet"></span><span>الهيئة الاستشارية</span></li>
                <li class="item"><span class="bullet"></span><span>الأمانة الفنية</span></li>
                <li class="item"><span class="bullet"></span><span>الأمانة العامة</span></li>
                <li class="item"><span class="bullet"></span><span>العضويات</span></li>
              </ul>
            </div>

            <!-- العمود الثاني -->
            <div class="block">
              <h3><i class="fa-solid fa-network-wired"></i> الإدارات والفرق</h3>
              <ul class="list">
                <li class="item"><span class="bullet"></span><span>الاتصال المؤسسي</span></li>
                <li class="item"><span class="bullet"></span><span>الشراكات</span></li>
                <li class="item"><span class="bullet"></span><span>الفريق الوطني للتطوع</span></li>
                <li class="item"><span class="bullet"></span><span>الفعاليات</span></li>
                <li class="item"><span class="bullet"></span><span>الفريق الوطني للشباب</span></li>
                <li class="item"><span class="bullet"></span><span>الإنتاج الإعلامي</span></li>
              </ul>
            </div>

            <!-- كتلة الأمانة الفنية -->
            <div class="block" style="grid-column: 1 / -1">
              <h3><i class="fa-solid fa-clipboard-check"></i> الأمانة الفنية</h3>
              <ul class="list">
                <li class="item"><span class="bullet"></span><span>العضويات</span></li>
                <li class="item"><span class="bullet"></span><span>الاتصال المؤسسي</span></li>
                <li class="item"><span class="bullet"></span><span>الشراكات</span></li>
                <li class="item"><span class="bullet"></span><span>الفريق الوطني للتطوع</span></li>
                <li class="item"><span class="bullet"></span><span>الفعاليات</span></li>
                <li class="item"><span class="bullet"></span><span>الفريق الوطني للشباب</span></li>
                <li class="item"><span class="bullet"></span><span>الإنتاج الإعلامي</span></li>
              </ul>
            </div>

            <!-- كتلة الأمانة العامة -->
            <div class="block" style="grid-column: 1 / -1">
              <h3><i class="fa-solid fa-briefcase"></i> الأمانة العامة</h3>
              <ul class="list">
                <li class="item"><span class="bullet"></span><span>منظومة الأهداف والبرامج</span></li>
                <li class="item"><span class="bullet"></span><span>التعاون الدولي</span></li>
                <li class="item"><span class="bullet"></span><span>المكاتب التنفيذية</span></li>
                <li class="item"><span class="bullet"></span><span>الدراسات والبحوث</span></li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </main>

    <div id="site-footer"></div>

    <!-- ================= HEADER/FOOTER + NAV + DRAWER SCRIPTS ================= -->
    <script>
      function markActiveNavLink() {
        let currentPage = window.location.pathname.split("/").pop();
        if (!currentPage || currentPage === "") currentPage = "index.html";

        document
          .querySelectorAll(".desktop-nav a, .eyc-drawer-nav a")
          .forEach((link) => {
            const href = link.getAttribute("href");
            if (!href) return;

            const linkPage = href.split("/").pop();
            if (linkPage === currentPage) link.classList.add("active");
          });
      }

      // ✅ Drawer fallback
      function initDrawerMenuFallback() {
        const drawer = document.querySelector(".eyc-drawer, #eycDrawer, .mobile-drawer");
        const overlay =
          document.querySelector(".eyc-drawer-overlay, #eycDrawerOverlay, .drawer-overlay") || null;
        const openBtn =
          document.querySelector(".eyc-burger, #eycBurger, .menu-toggle, .hamburger") || null;
        const closeBtn =
          document.querySelector(".eyc-drawer-close, #eycDrawerClose, .drawer-close") || null;

        if (!drawer) return;

        const open = () => {
          drawer.classList.add("open");
          if (overlay) overlay.classList.add("open");
          document.body.style.overflow = "hidden";
        };

        const close = () => {
          drawer.classList.remove("open");
          if (overlay) overlay.classList.remove("open");
          document.body.style.overflow = "";
        };

        if (openBtn) openBtn.addEventListener("click", open);
        if (closeBtn) closeBtn.addEventListener("click", close);
        if (overlay) overlay.addEventListener("click", close);

        document.addEventListener("keydown", (e) => {
          if (e.key === "Escape") close();
        });

        drawer.querySelectorAll("a").forEach((a) => a.addEventListener("click", close));
      }

      fetch("/header.html")
        .then((r) => r.text())
        .then((h) => {
          document.getElementById("site-header").innerHTML = h;

          if (window.initHeaderMenu) window.initHeaderMenu();
          markActiveNavLink();
          initDrawerMenuFallback();
        });

      fetch("/footer.html")
        .then((r) => r.text())
        .then((f) => (document.getElementById("site-footer").innerHTML = f));
    </script>
  </body>
</html>