JezK

Edit File: index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ODSAD — Organization for Development Services & Agricultural Development</title>
  <meta name="description" content="ODSAD is an Afghan national nonprofit organization working alongside communities to build resilient livelihoods, expand agriculture, empower women, and deliver disaster risk reduction." />
  <meta name="keywords" content="ODSAD, Afghan NGO, Afghanistan nonprofit, agricultural development, disaster risk reduction, women empowerment, Takhar, Kabul, careers, volunteer, governance" />
  
  
  <meta property="og:title" content="ODSAD — Organization for Development Services & Agricultural Development" />
  <meta property="og:description" content="Empowering communities, building resilience across Afghanistan since 2012." />
  <meta property="og:type" content="website" />
  <meta property="og:image" content="02d00dce-3504-4a1d-bddf-6c0b506419f4.jpg" />

<header class="site-header">
      <div class="header-container">
        <a href="#/" class="brand" onclick="window.ODSAD.nav(event, '/')">
          <span class="brand-mark">
            <img src="assets/odsad-logo.svg" alt="ODSAD Logo" />
          </span>
          <span class="brand-text">
            <strong>ODSAD</strong>
            <small>Development in action</small>
          </span>
        </a>

<nav class="main-nav" id="mainNav">
          <a href="#/" onclick="window.ODSAD.nav(event, '/')">Home</a>
          <a href="#/about" onclick="window.ODSAD.nav(event, '/about')">Who We Are</a>
          <a href="#/what-we-do" onclick="window.ODSAD.nav(event, '/what-we-do')">What We Do</a>
          <a href="#/where-we-work" onclick="window.ODSAD.nav(event, '/where-we-work')">Where We Are Working</a>
          
          
          <div class="nav-dropdown">
            <button type="button" onclick="window.ODSAD.nav(event, '/projects')">
              Projects
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m6 9 6 6 6-6"/></svg>
            </button>
            <div class="dropdown-menu">
              <a href="#/projects" onclick="window.ODSAD.setProjectStatusFilter('all', event)">
                <span>📋 All Projects</span>
                <span class="dropdown-badge">17 Total</span>
              </a>
              <a href="#/projects/running" onclick="window.ODSAD.setProjectStatusFilter('active', event)">
                <span>⚡ Running / Active Projects</span>
                <span class="dropdown-badge badge-active">4 Active</span>
              </a>
              <a href="#/projects/completed" onclick="window.ODSAD.setProjectStatusFilter('completed', event)">
                <span>✅ Completed Projects</span>
                <span class="dropdown-badge badge-done">13 Done</span>
              </a>
            </div>
          </div>

<div class="nav-dropdown">
            <button type="button" onclick="window.ODSAD.nav(event, '/careers')">
              Careers
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m6 9 6 6 6-6"/></svg>
            </button>
            <div class="dropdown-menu">
              <a href="#/careers/full-time" onclick="window.ODSAD.setCareerTypeFilter('full-time', event)">
                <span>⚡ Full-Time Positions</span>
                <span class="dropdown-badge badge-active">4 Full-Time</span>
              </a>
              <a href="#/careers/part-time" onclick="window.ODSAD.setCareerTypeFilter('part-time', event)">
                <span>⏱️ Part-Time Positions</span>
                <span class="dropdown-badge">3 Part-Time</span>
              </a>
              <a href="#/careers/volunteer" onclick="window.ODSAD.nav(event, '/careers/volunteer')">
                <span>🤝 Volunteer Programs (All Tracks)</span>
                <span class="dropdown-badge badge-active">5 Tracks</span>
              </a>
              <a href="#/careers/volunteer/part-time" onclick="window.ODSAD.nav(event, '/careers/volunteer/part-time')">
                <span>⏱️ Part-Time Volunteer</span>
                <span class="dropdown-badge">4 Tracks</span>
              </a>
              <a href="#/careers/volunteer/full-time" onclick="window.ODSAD.nav(event, '/careers/volunteer/full-time')">
                <span>⚡ Full-Time Volunteer</span>
                <span class="dropdown-badge badge-active">1 Field</span>
              </a>
              <a href="#/careers/apply" onclick="window.ODSAD.nav(event, '/careers/apply')">
                <span>📝 Apply Online (Application Form)</span>
                <span class="dropdown-badge badge-done">Required Form</span>
              </a>
            </div>
          </div>

<div class="nav-dropdown">
            <button type="button">
              Accountability
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
            </button>
            <div class="dropdown-menu">
              <a href="#/governance" onclick="window.ODSAD.nav(event, '/governance')">🛡️ Governance & policies</a>
              <a href="#/publications" onclick="window.ODSAD.nav(event, '/publications')">📄 Reports & publications</a>
              <a href="#/faq" onclick="window.ODSAD.nav(event, '/faq')">❓ Knowledge base & FAQ</a>
              <a href="#/gallery" onclick="window.ODSAD.nav(event, '/gallery')">📸 Fieldwork gallery</a>
              <a href="#/news" onclick="window.ODSAD.nav(event, '/news')">📰 News & updates</a>
              <a href="#/rfp" onclick="window.ODSAD.nav(event, '/rfp')">📋 RFP & tenders</a>
            </div>
          </div>

<a href="#/contact" onclick="window.ODSAD.nav(event, '/contact')">Contact</a>
        </nav>

<div class="header-actions">
          <button class="btn-donate-quick donate-btn-blinking" onclick="window.ODSAD.openDonationModal(event)" aria-label="Donate Now">
            <span class="donate-pulse-dot"></span>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M11 14h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 16"/><path d="m7 20 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"/><path d="m2 15 6 6"/><path d="M19.5 8.5c.7-.7 1.5-1.6 1.5-2.7A2.73 2.73 0 0 0 16 4a2.78 2.78 0 0 0-5 1.8c0 1.2.8 2 1.5 2.8L16 12Z"/></svg>
            Donate Now
          </button>
          <button class="menu-toggle" onclick="window.ODSAD.toggleMenu()" aria-label="Toggle Navigation">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
          </button>
        </div>
      </div>
    </header>

<main id="appMain"></main>

<footer class="site-footer">
      <div class="footer-grid">
        <div class="footer-brand">
          <a href="#/" class="brand" onclick="window.ODSAD.nav(event, '/')">
            <span class="brand-mark" style="background: var(--forest-light);">
              <img src="assets/odsad-logo.svg" alt="ODSAD Logo" />
            </span>
            <span class="brand-text">
              <strong style="color: var(--cream);">ODSAD</strong>
              <small style="color: rgba(246, 241, 231, 0.65);">Development in action</small>
            </span>
          </a>
          <p>
            Organization for Development Services & Agricultural Development (ODSAD) is an Afghan national non-governmental, non-profit organization registered with the Ministry of Economy under registration number 2669.
          </p>
          <div style="margin-top: 1.5rem; display: flex; gap: 0.75rem; flex-wrap: wrap;">
            <a class="button button-sm button-forest" href="ODSAD Profile-2025.pdf" target="_blank" download>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
              Profile PDF
            </a>
            <button class="button button-sm button-outline" style="border-color: rgba(255,255,255,0.25); color: var(--cream);" onclick="window.ODSAD.openLicenseModal()">
              Verify NGO
            </button>
          </div>
        </div>

<div class="footer-col">
          <h4>Organization</h4>
          <a href="#/about" onclick="window.ODSAD.nav(event, '/about')">Who we are</a>
          <a href="#/what-we-do" onclick="window.ODSAD.nav(event, '/what-we-do')">What we do</a>
          <a href="#/where-we-work" onclick="window.ODSAD.nav(event, '/where-we-work')">Where we are working</a>
          <a href="#/projects" onclick="window.ODSAD.nav(event, '/projects')">Project portfolio</a>
          <a href="#/news" onclick="window.ODSAD.nav(event, '/news')">News & field updates</a>
          <a href="#/gallery" onclick="window.ODSAD.nav(event, '/gallery')">Fieldwork gallery</a>
        </div>

<div class="footer-col">
          <h4>Get Involved & Trust</h4>
          <a href="#/volunteer" onclick="window.ODSAD.nav(event, '/volunteer')">Volunteer with us</a>
          <a href="#/careers" onclick="window.ODSAD.nav(event, '/careers')">Careers & vacancies</a>
          <a href="#/rfp" onclick="window.ODSAD.nav(event, '/rfp')">RFP & tenders</a>
          <a href="#/governance" onclick="window.ODSAD.nav(event, '/governance')">Governance & policies</a>
          <a href="#/publications" onclick="window.ODSAD.nav(event, '/publications')">Reports & publications</a>
          <a href="#/faq" onclick="window.ODSAD.nav(event, '/faq')">FAQ knowledge base</a>
        </div>

<div class="footer-col">
          <h4>Head Office</h4>
          <span style="font-size: 0.85rem; color: rgba(246, 241, 231, 0.75); line-height: 1.6; display: block; margin-bottom: 0.8rem;">
            Main Road Taloqan – Badakhshan District 1, Taloqan City, Takhar Province, Afghanistan
          </span>
          <span style="font-size: 0.85rem; color: rgba(246, 241, 231, 0.75); display: block; margin-bottom: 0.4rem;">
            Email: <strong style="color: var(--gold);"><a href="mailto:odsad.wafaey@gmail.com" style="color: var(--gold); text-decoration: none;">odsad.wafaey@gmail.com</a></strong>
          </span>
          <span style="font-size: 0.85rem; color: rgba(246, 241, 231, 0.75); display: block; margin-bottom: 0.4rem;">
            Phone: <strong>+93 784 999 904 · +93 700 706 137</strong>
          </span>
          <span style="font-size: 0.85rem; color: rgba(246, 241, 231, 0.75); display: block;">
            Reg. No: <strong>2669</strong> · TIN: <strong>9006865027</strong>
          </span>
        </div>
      </div>

<div class="footer-meta">
        <span>Takhar · Kabul · Badakhshan · Baghlan · Afghanistan</span>
        <span>© 2025 ODSAD (Organization for Development Services & Agricultural Development). All rights reserved.</span>
      </div>

<div class="footer-signature-bar">
        <div class="footer-signature-inner">
          <span>Developed by <strong class="sig-name">Afghan Developers</strong></span>
          <span class="sig-sep">|</span>
          <span>Hosted by <a href="https://afghanhoster.com" target="_blank" rel="noopener" class="sig-link"><strong>afghanhoster.com</strong></a></span>
          <span class="sig-sep">|</span>
          <span>Consulted by <strong class="sig-name">Oriental Consultants</strong></span>
        </div>
      </div>
    </footer>

</div>

<div class="modal-backdrop" id="jobModal" onclick="if(event.target === this) window.ODSAD.closeJobModal()">
    <div class="modal-dialog" style="max-width: 650px;">
      <button class="modal-close-btn" onclick="window.ODSAD.closeJobModal()" aria-label="Close">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
      </button>
      <div id="jobModalBody"></div>
    </div>
  </div>

<div class="modal-backdrop" id="donationModal" onclick="if(event.target === this) window.ODSAD.closeDonationModal()">
    <div class="modal-dialog" style="max-width: 620px;">
      <button class="modal-close-btn" onclick="window.ODSAD.closeDonationModal()" aria-label="Close">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
      </button>

<div id="donationModalBody">
        <div class="eyebrow"><span class="eyebrow-line"></span> Direct Humanitarian & Community Support</div>
        <h2 style="font-size: 1.8rem; margin-bottom: 0.6rem;">Invest in Afghan resilience.</h2>
        <p style="color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 1.2rem;">
          Your donation goes directly to fund high-impact agricultural inputs, disaster shelter repairs, clean drinking water points, and women's livelihood initiatives in rural Afghanistan.
        </p>

<div style="display: flex; gap: 0.6rem; margin-bottom: 1rem;">
          <button class="button button-forest button-sm freq-btn" data-freq="once" onclick="window.ODSAD.setDonationFrequency('once')">One-time contribution</button>
          <button class="button button-outline button-sm freq-btn" data-freq="monthly" onclick="window.ODSAD.setDonationFrequency('monthly')">Monthly support</button>
        </div>

<div class="donation-tier-grid" style="margin: 0.8rem 0 1.2rem;">
          <button class="tier-btn" data-amt="25" onclick="window.ODSAD.setDonationTier(25)">$25</button>
          <button class="tier-btn active" data-amt="75" onclick="window.ODSAD.setDonationTier(75)">$75</button>
          <button class="tier-btn" data-amt="150" onclick="window.ODSAD.setDonationTier(150)">$150</button>
          <button class="tier-btn" data-amt="500" onclick="window.ODSAD.setDonationTier(500)">$500</button>
        </div>

<div class="impact-preview-box" id="donationImpactPreview">
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 14h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 16"/><path d="m7 20 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"/><path d="m2 15 6 6"/><path d="M19.5 8.5c.7-.7 1.5-1.6 1.5-2.7A2.73 2.73 0 0 0 16 4a2.78 2.78 0 0 0-5 1.8c0 1.2.8 2 1.5 2.8L16 12Z"/></svg>
          <div>
            <strong>$75 funds certified high-yielding wheat seed package</strong>
            <span>Equips a smallholder farmer with drought-resilient seed and fertilizer for one planting season.</span>
          </div>
        </div>

<div class="donation-method-tabs">
          <button class="method-tab active" id="methodTab-paypal" onclick="window.ODSAD.setPaymentMethod('paypal')">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944 3.72a.77.77 0 0 1 .759-.645h6.634c3.313 0 5.608 1.487 5.12 4.966-.34 2.42-1.928 3.987-4.14 4.542 0 0 2.054.49 1.63 3.513-.396 2.828-2.616 3.741-5.32 3.741H7.71a.77.77 0 0 0-.634.5Z"/></svg>
            <span>PayPal</span>
          </button>
          <button class="method-tab" id="methodTab-card" onclick="window.ODSAD.setPaymentMethod('card')">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
            <span>Credit / Debit Card</span>
          </button>
          <button class="method-tab" id="methodTab-wire" onclick="window.ODSAD.setPaymentMethod('wire')">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
            <span>Direct Bank Wire</span>
          </button>
        </div>

<div id="paymentContent-paypal" class="payment-content active">
          <div class="payment-card-box">
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;">
              <div>
                <strong style="color: #003087; font-size: 1.15rem; display: block;">PayPal Express Checkout</strong>
                <span style="font-size: 0.82rem; color: var(--ink-soft);">Fast, secure donation with your PayPal account or PayPal Credit</span>
              </div>
              <span class="paypal-logo-badge">PayPal</span>
            </div>
            <form onsubmit="window.ODSAD.handlePayPalDonate(event)">
              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-bottom: 0.8rem;">
                <input type="text" required placeholder="Full Name" style="background: var(--paper); border: 1px solid var(--line); padding: 0.75rem 0.9rem; border-radius: var(--radius-sm);" />
                <input type="email" required placeholder="PayPal Email Address" style="background: var(--paper); border: 1px solid var(--line); padding: 0.75rem 0.9rem; border-radius: var(--radius-sm);" />
              </div>
              <button class="button button-paypal" type="submit" style="width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.6rem; font-weight: 700;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944 3.72a.77.77 0 0 1 .759-.645h6.634c3.313 0 5.608 1.487 5.12 4.966-.34 2.42-1.928 3.987-4.14 4.542 0 0 2.054.49 1.63 3.513-.396 2.828-2.616 3.741-5.32 3.741H7.71a.77.77 0 0 0-.634.5Z"/></svg>
                Donate <span id="paypalBtnAmt">$75</span> with PayPal
              </button>
            </form>
          </div>
        </div>

<div id="paymentContent-card" class="payment-content">
          <div class="payment-card-box">
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;">
              <div>
                <strong style="font-size: 1.05rem; display: block; color: var(--forest);">Debit / Credit Card (Visa, Mastercard, Amex)</strong>
                <span style="font-size: 0.8rem; color: var(--ink-soft);">256-Bit SSL Encrypted & PCI DSS Compliant</span>
              </div>
              <div class="card-brand-icons">
                <span class="card-icon-pill">VISA</span>
                <span class="card-icon-pill">MC</span>
                <span class="card-icon-pill">AMEX</span>
              </div>
            </div>
            <form onsubmit="window.ODSAD.handleCardDonate(event)">
              <div style="margin-bottom: 0.8rem;">
                <label style="display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.3rem;">Cardholder Name</label>
                <input type="text" required placeholder="Name as shown on card" style="width: 100%; background: var(--paper); border: 1px solid var(--line); padding: 0.75rem 0.9rem; border-radius: var(--radius-sm);" />
              </div>
              <div style="margin-bottom: 0.8rem;">
                <label style="display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.3rem;">Card Number</label>
                <input type="text" required maxlength="19" placeholder="4000 ···· ···· 0000" style="width: 100%; background: var(--paper); border: 1px solid var(--line); padding: 0.75rem 0.9rem; border-radius: var(--radius-sm); letter-spacing: 0.05em;" />
              </div>
              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-bottom: 1.2rem;">
                <div>
                  <label style="display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.3rem;">Expires (MM/YY)</label>
                  <input type="text" required maxlength="5" placeholder="MM/YY" style="width: 100%; background: var(--paper); border: 1px solid var(--line); padding: 0.75rem 0.9rem; border-radius: var(--radius-sm);" />
                </div>
                <div>
                  <label style="display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.3rem;">Security CVC</label>
                  <input type="password" required maxlength="4" placeholder="CVC" style="width: 100%; background: var(--paper); border: 1px solid var(--line); padding: 0.75rem 0.9rem; border-radius: var(--radius-sm);" />
                </div>
              </div>
              <button class="button button-forest" type="submit" style="width: 100%;">
                Confirm Donation of <span id="cardBtnAmt">$75</span> ${iconSvg('shield-check', 16)}
              </button>
            </form>
          </div>
        </div>

<div id="paymentContent-wire" class="payment-content">
          <div class="payment-card-box">
            <strong style="display: block; font-size: 1.05rem; color: var(--forest); margin-bottom: 0.4rem;">Institutional & Wire Donations</strong>
            <p style="font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 1rem; line-height: 1.55;">
              For bilateral donors, institutional partners, and bank-to-bank SWIFT transfers to ODSAD's official NGO bank accounts:
            </p>
            <div style="background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem; font-size: 0.85rem; line-height: 1.6; margin-bottom: 1rem;">
              <div><strong>Account Title:</strong> Organization for Development Services & Agricultural Development (ODSAD)</div>
              <div><strong>Bank Name:</strong> Da Afghanistan Bank / Afghanistan International Bank (AIB)</div>
              <div><strong>Ministry Reg No:</strong> 2669 · <strong>TIN:</strong> 9006865027</div>
              <div><strong>Head Office:</strong> Taloqan City, Takhar Province, Afghanistan</div>
              <div><strong>Official Email:</strong> odsad.wafaey@gmail.com</div>
            </div>
            <a class="button button-outline" href="mailto:odsad.wafaey@gmail.com?subject=Institutional%20Donation%20and%20Wire%20Instructions" style="width: 100%; text-align: center;">
              Request Official Bank SWIFT Routing Details
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

<div class="modal-backdrop" id="lightboxModal" onclick="if(event.target === this) window.ODSAD.closeLightbox()">
    <div class="modal-dialog lightbox-dialog">
      <button class="modal-close-btn" style="background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.2);" onclick="window.ODSAD.closeLightbox()" aria-label="Close">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
      </button>
      <div class="lightbox-image-wrap">
        <img id="lightboxImg" src="" alt="Fieldwork zoom" />
      </div>
      <div class="lightbox-caption" id="lightboxCaption"></div>
    </div>
  </div>

<div class="modal-backdrop" id="licenseModal" onclick="if(event.target === this) window.ODSAD.closeLicenseModal()">
    <div class="modal-dialog" style="max-width: 680px;">
      <button class="modal-close-btn" onclick="window.ODSAD.closeLicenseModal()" aria-label="Close">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
      </button>

<div class="eyebrow"><span class="eyebrow-line"></span> Ministry of Economy Verification</div>
      <h2 style="font-size: 1.7rem; margin-bottom: 0.6rem;">Official NGO Registration & License</h2>
      <p style="color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 1.5rem;">
        ODSAD is formally registered under license certificate No. <strong>2669</strong> by the Ministry of Economy of the Government of Afghanistan.
      </p>

<div style="display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.4rem;">
        <div style="display: flex; align-items: center; gap: 1rem;">
          <img src="تاپه.jpg.jpeg" alt="Official Seal" style="width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line);" />
          <div>
            <strong style="display: block; font-size: 0.92rem; color: var(--forest);">Official Seal & Stamp</strong>
            <span style="font-size: 0.78rem; color: var(--ink-soft);">Verified National NGO Status</span>
          </div>
        </div>
        <a class="button button-forest button-sm" href="ODSAD Profile-2025.pdf" target="_blank" download>
          Download Profile PDF
        </a>
      </div>
    </div>
  </div>