<!--
                                                                                                                                    
 ▓██▓   ▓█░  ▒██████    ▒██████   ░███████              ▓██░  ███   ▒██████   ▓█▒    ██     ███▓    ▓██░  ███   ███████▓  ████████  
 ▓███▒  ▓█░ ▓█▓    ██░ ▓█▓    ██░ ░██   ▓█▓             ▓█▓█ ▒█▒█  ▓█▓    ██░ ▓█▒    ██    ▓█ ██    ▓█▓█ ▒█▒█   ██▒       ██░   ▒██ 
 ▓█░██  ▓█░ ██     ▓█▓ ██     ▓█▓ ░██   ██▒             ██ █░█▒▒█░ ██     ▓█▓ ▓█▒    ██    █▓ ▒█▓   ██ █░█▒▒█░  ██▒       ██░    ██▒
 ▓█░░██ ▓█░ ██     ▓█▓ ██     ▓█▓ ░██████░              ██ ███ ░█░ █▓     ▓█▓ ▓███▓████   ▓█░  ██   ██ ███ ░█░  ███████░  ██░    ▓█▓
 ▓█░ ▒█▓▓█░ ██     ▓█▓ ██     ▓█▓ ░██  ██▒              ██  █▒ ░█▒ ██     ▓█▓ ▓█▒    ██   ██   ▓█▓  ██  █▒ ░█▒  ██▒       ██░    ██▒
 ▓█░  ████░ ██▓    ██  ██▓    ██  ░██  ░██              █▓     ░█▓ ██▓    ██  ▓█▒    ██  ▓████████  █▓     ░█▓  ██▒       ██░   ▒██ 
 ▓█░   ███░  ███████░   ███████░  ░██   ▓██             █▓      █▓  ███████░  ▓█▒    ██  ██     ██▓ █▓      █▓  ███████▓  ████████  
 ▓█░   ▒██░    ▓█▓░       ▓█▓░    ░██    ██▒            █▓      █▓    ▓█▓░    ▓█▒    ██ ▓█▓     ▒██ █▓      █▓  ██████▓▓  ████▓▒    
                                                                                                                                    
                                                                                                                                    
   ▓████▒      ▓██░     ███████    ███████      ▓████░    █████▓    ██████░    ░█████        ▓███      ▓████░    █████▓             
  ██▓  ██▓  ▒██▓██░     ██         ██         ▒██▓       ██░  ▓██   ▒   ▒██░   ▓▓  ▓██░     ▓████    ▒██▓       ██░  ▓██            
 ██░   ░██▒     ██░     ██         ██        ░██         ██   ▓█▓        ██         ██▓    ▓█░░██   ░██         ██   ▓█▓            
 ██  ▓████▓     █▓░     ██████░    ██████░   ▓███████     █████░     ▓███▓         ░██    ▓█▒ ░██   ▓███████     █████░             
 █████░ ▓█▓     ██░         ▒██▓       ▒██▓  ▓██░  ▓██   ▒██▓███░       ▒██▓      ▒██    ▒█▓  ░██   ▓██░  ▓██   ▒██▓███░            
 ██▒    ██░     ██░          ░██        ░██  ▒█▓    ██░ ▓█▓    ██         ██    ░▓█░    ░█████████▓ ▒█▓    ██░ ▓█▓    ██            
  ██▓  ██▓      ██░     ▒   ▓██░   ▒   ▓██░   ██▓  ▓██  ▒██░  ▓██  ░░   ▒██▓   ▓█▓            ░██    ██▓  ▓██  ▒██░  ▓██            
   ▓████░    ████████   █████▓     █████▓      ▓████▒    ░█████▓   ░██████    ░████████       ░██     ▓████▒    ░█████▓             
                                                                                                                                    
-->

<!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%; }

      /* ✅ Full width بدون مارجن/بادنج عام */
      .full{ width:100%; margin:0; padding:0; }

      /* ================= PAGE HERO ================= */
      .page-hero{
        width:100%;
        margin:0;
        padding: 110px 0 18px;
      }

      .hero-inner{ width:100%; padding: 0 18px; }

      .hero-title{
        max-width: 1200px;
        margin: 0 auto;
      }

      .hero-title h1{
        font-size: 34px;
        color:#083b8a;
        margin-bottom: 8px;
        letter-spacing:.2px;
      }

      .hero-title p{
        color:#334155;
        font-size: 16.8px;
        max-width: 1050px;
        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{
        width:100%;
        margin:0;
        padding: 24px 0 28px;
        border-top: 1px solid rgba(8,59,138,0.12);
      }

      .section:first-of-type{ border-top: 0; }

      .inner{
        width:100%;
        max-width: 1300px;
        margin: 0 auto;
        padding: 0 18px;
      }

      /* ================= Intro block (بدون كروت) ================= */
      .intro{
        padding: 6px 0 8px;
      }
      .intro p{
        color:#334155;
        font-size: 16.6px;
        text-align: right; /* ✅ بدون justify */
      }

      /* ================= Heading ================= */
      .sec-head{
        display:flex;
        align-items:center;
        gap:10px;
        margin: 18px 0 12px;
      }
      .sec-head i{
        color:#0b5ed7;
        font-size: 16px;
      }
      .sec-head h2{
        font-size: 24px;
        color:#083b8a;
        line-height:1.35;
      }

      /* ================= Offices grid ================= */
      .offices{
        width:100%;
        display:grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        padding: 10px 0 6px;
      }

      /* ✅ عنصر بسيط جداً: اسم + لوجو فقط */
      .office{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap: 12px;

        padding: 12px 12px;
        border-radius: 14px;

        /* بدون خلفيات للصورة */
        background: transparent;

        border: 1px solid rgba(8,59,138,0.16);
        transition: transform .15s ease, border-color .15s ease;
      }

      .office:hover{
        transform: translateY(-1px);
        border-color: rgba(11,94,215,0.35);
      }

      .gov{
        display:flex;
        flex-direction:column;
        gap: 2px;
        min-width:0;
      }

      .gov .name{
        font-weight: 800;
        color:#083b8a;
        font-size: 16px;
        line-height:1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .gov .sub{
        font-size: 13px;
        color:#64748b;
      }

      .logo{
        width: 46px;
        height: 46px;
        border-radius: 12px;
        overflow:hidden;
        border: 1px solid rgba(8,59,138,0.16);
        flex: 0 0 auto;
        background: transparent;
      }
      .logo img{
        width:100%;
        height:100%;
        object-fit: contain; /* ✅ لو اللوجو شفاف */
        background: transparent;
        display:block;
        transform: scale(1);
        transition: transform .2s ease;
      }
      .office:hover .logo img{
        transform: scale(1.05);
      }

      /* ================= Responsive ================= */
      @media (max-width: 1100px){
        .offices{ grid-template-columns: repeat(3, 1fr); }
      }

      @media (max-width: 992px){
        .page-hero{ padding: 90px 0 14px; }
        .hero-title h1{ font-size: 28px; }
        .offices{ grid-template-columns: repeat(2, 1fr); }
      }

      @media (max-width: 576px){
        .hero-inner, .inner{ padding: 0 10px; }
        .hero-title p{ font-size: 15.6px; }
        .offices{ grid-template-columns: 1fr; }
        .office{ padding: 12px 10px; }
      }
    </style>
  </head>

  <body class="layout-root">
    <div id="site-header"></div>

    <main class="full">
      <!-- ================= HERO ================= -->
      <section class="page-hero full">
        <div class="hero-inner">
          <div class="hero-title">
            <h1>المكاتب التنفيذية</h1>
            <p>
              تنتشر المكاتب التنفيذية لمجلس الشباب المصري في عدد من المحافظات لدعم الشباب وتنفيذ المبادرات التنموية
              وتعزيز الوعي بحقوق الإنسان والمواطنة، خاصة في المناطق الريفية والصعيد.
            </p>
            <div class="crumb">
              <a href="/index.html">الرئيسية</a>
              <span>›</span>
              <span>المكاتب التنفيذية</span>
            </div>
          </div>
        </div>
      </section>

      <!-- ================= وصف الصفحة ================= -->
      <section class="section">
        <div class="inner">
          <div class="sec-head">
            <i class="fa-solid fa-building"></i>
            <h2>نبذة عن المكاتب التنفيذية</h2>
          </div>

          <div class="intro">
            <p>
              المكاتب التنفيذية لمجلس الشباب المصري هي الذراع التنفيذي للمجلس على مستوى المحافظات المصرية حيث تعمل
              بمثابة وحدات محلية تهدف إلى تحقيق التنمية المتكاملة ودعم الشباب في مختلف محافظات مصر، ونشر أهمية الوعى
              بحقوق الأنسان خاصة في المناطق الريفية والصعيد. كما تركز هذه المكاتب على تنفيذ المشاريع التي تعزز فرص
              العمل، وتقلل من البطالة، وتسهم في تحسين الخدمات العامة. بالإضافة لذلك تُعد المكاتب جسراً للتواصل بين
              الشباب والمؤسسات المختلفة، حيث يتم تنفيذ المبادرات التنموية بالتعاون مع الهيئات الحكومية والمؤسسات
              الأهلية لتعزيز المشاركة المجتمعية. كما تعمل المكاتب أيضاً على تعزيز ثقافة حقوق الإنسان والمواطنة بين
              الشباب، مما يساهم في بناء جيل واعٍ ومشارك بفعالية في تطوير مجتمعه.
            </p>
          </div>
        </div>
      </section>

      <!-- ================= المحافظات ================= -->
      <section class="section">
        <div class="inner">
          <div class="sec-head">
            <i class="fa-solid fa-location-dot"></i>
            <h2>انتشار المكاتب التنفيذية بالمحافظات</h2>
          </div>

          <!-- ✅ ملاحظة:
               غيّر src اللوجو حسب ملفاتك
               لو عندك لوجو موحد للمكاتب: استخدم نفس المسار للجميع
          -->
          <div class="offices">
            <!-- 1 -->
            <div class="office">
              <div class="gov">
                <div class="name">القاهرة</div>
                <div class="sub">مكتب تنفيذي</div>
              </div>
              <div class="logo">
                <img src="https://bazooka.losha.site/admin/img1/file_69727855b2c8d5.22161465.png" alt="لوجو مكتب القاهرة" loading="lazy" />
              </div>
            </div>

            <!-- 2 -->
            <div class="office">
              <div class="gov">
                <div class="name">الجيزة</div>
                <div class="sub">مكتب تنفيذي</div>
              </div>
              <div class="logo">
                <img src="https://bazooka.losha.site/admin/img1/file_697278617e8812.02963158.png" alt="لوجو مكتب الجيزة" loading="lazy" />
              </div>
            </div>

            <!-- 3 -->
            <div class="office">
              <div class="gov">
                <div class="name">القليوبية</div>
                <div class="sub">مكتب تنفيذي</div>
              </div>
              <div class="logo">
                <img src="https://bazooka.losha.site/admin/img1/file_6972786eed1a85.35344175.png" alt="لوجو مكتب القليوبية" loading="lazy" />
              </div>
            </div>

            <!-- 4 -->
            <div class="office">
              <div class="gov">
                <div class="name">الإسكندرية</div>
                <div class="sub">مكتب تنفيذي</div>
              </div>
              <div class="logo">
                <img src="https://bazooka.losha.site/admin/img1/file_69727889730a87.81017304.png" alt="لوجو مكتب الإسكندرية" loading="lazy" />
              </div>
            </div>

            <!-- 5 -->
            <div class="office">
              <div class="gov">
                <div class="name">سوهاج</div>
                <div class="sub">مكتب تنفيذي</div>
              </div>
              <div class="logo">
                <img src="https://bazooka.losha.site/admin/img1/file_69727897eee8a6.13892465.png" alt="لوجو مكتب سوهاج" loading="lazy" />
              </div>
            </div>

            <!-- 6 -->
            <div class="office">
              <div class="gov">
                <div class="name">أسوان</div>
                <div class="sub">مكتب تنفيذي</div>
              </div>
              <div class="logo">
                <img src="https://bazooka.losha.site/admin/img1/file_697279607062f0.09872258.png" alt="لوجو مكتب أسوان" loading="lazy" />
              </div>
            </div>

            <!-- 7 -->
            <div class="office">
              <div class="gov">
                <div class="name">قنا</div>
                <div class="sub">مكتب تنفيذي</div>
              </div>
              <div class="logo">
                <img src="https://bazooka.losha.site/admin/img1/file_6972796f853711.41082115.png" alt="لوجو مكتب قنا" loading="lazy" />
              </div>
            </div>

            <!-- 8 -->
            <div class="office">
              <div class="gov">
                <div class="name">المنيا</div>
                <div class="sub">مكتب تنفيذي</div>
              </div>
              <div class="logo">
                <img src="https://bazooka.losha.site/admin/img1/file_69727982b9b9e7.32186936.png" alt="لوجو مكتب المنيا" loading="lazy" />
              </div>
            </div>

            <!-- 9 -->
            <div class="office">
              <div class="gov">
                <div class="name">الإسماعيلية</div>
                <div class="sub">مكتب تنفيذي</div>
              </div>
              <div class="logo">
                <img src="https://bazooka.losha.site/admin/img1/file_697279945f7448.29698929.png" alt="لوجو مكتب الإسماعيلية" loading="lazy" />
              </div>
            </div>

            <!-- 10 -->
            <div class="office">
              <div class="gov">
                <div class="name">الغربية</div>
                <div class="sub">مكتب تنفيذي</div>
              </div>
              <div class="logo">
                <img src="https://bazooka.losha.site/admin/img1/file_697279a18e9c72.92397637.png" alt="لوجو مكتب الغربية" loading="lazy" />
              </div>
            </div>

            <!-- 11 -->
            <div class="office">
              <div class="gov">
                <div class="name">الشرقية</div>
                <div class="sub">مكتب تنفيذي</div>
              </div>
              <div class="logo">
                <img src="https://bazooka.losha.site/admin/img1/file_697279b58ba465.51656508.png" alt="لوجو مكتب الشرقية" loading="lazy" />
              </div>
            </div>

            <!-- 12 -->
            <div class="office">
              <div class="gov">
                <div class="name">الأقصر</div>
                <div class="sub">مكتب تنفيذي</div>
              </div>
              <div class="logo">
                <img src="https://bazooka.losha.site/admin/img1/file_697279c458b9a0.15660747.png" alt="لوجو مكتب الأقصر" loading="lazy" />
              </div>
            </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>