section" id="stem-environment">
    <div class="container">
      <h2 class="section-title">STEM4Environment</h2>
      <div class="project-content">
        <div class="project-description">
          <span class="year-badge">Competition 2023 – 24</span>
          <p class="large-text">Addressing sustainability and environmental challenges through student-led STEM innovation.</p>
          <p>STEM4Girls launched the STEM for Environment competition in October 2023. Students were invited to develop hypothesis-driven research projects tackling real-world environmental and sustainability challenges.</p>
          <p>Grants of up to $250 were available for selected projects, with teams presenting their work at the International Research Conference for Children (IRCC).</p>
          <div class="project-stats">
            <div class="stat-item">
              <span class="stat-number">$250</span>
              <span class="stat-label">Grant</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">2023-24</span>
              <span class="stat-label">Year</span>
            </div>
          </div>
        </div>
        <div style="display:flex;align-items:center;justify-content:center;">
          <div class="visual-card" style="width:100%;max-width:380px;">
            <h3>Key Dates</h3>
            <div class="category-list">
              <div class="category-item"><span>📅</span><p><strong>Posted:</strong> October 1, 2023</p></div>
              <div class="category-item"><span>📤</span><p><strong>Deadline:</strong> April 10, 2024</p></div>
              <div class="category-item"><span>🔬</span><p><strong>Review:</strong> May 15, 2024</p></div>
              <div class="category-item"><span>🏆</span><p><strong>Results:</strong> July 2024</p></div>
              <div class="category-item"><span>🚀</span><p><strong>Project period:</strong> Aug 2024 – Jul 2025</p></div>
            </div>
          </div>
        </div>
      </div>
      <ul class="env-info-list">
        <li><strong>Eligibility</strong>K–PG students identifying as female, or groups with at least one female; 4–10 students per team</li>
        <li><strong>Categories</strong>Elementary (1st–5th), Middle School (6th–8th), High School (9th–12th)</li>
        <li><strong>Focus</strong>Sustainability and environmental STEM projects addressing ongoing environmental issues</li>
        <li><strong>Presentations</strong>Selected teams presented at IRCC in May–June 2024</li>
      </ul>
    </div>
  </section>


  <!-- ══ CTA ═══════════════════════════════════════════════════════ -->
  <section class="cta-section">
    <div class="container">
      <div class="cta-content">
        <h2>Want to See Your Project Here?</h2>
        <p>Join our next competition and showcase your innovative STEM research</p>
        <div class="cta-buttons">
          <a class='btn btn-primary btn-lg' href='/register'>Register Your Team</a>
          <a class='btn btn-outline btn-lg' href='/resources'>Browse Project Ideas</a>
        </div>
      </div>
    </div>
  </section>


  <!-- ══ FOOTER ════════════════════════════════════════════════════ -->
  <footer class="footer">
    <div class="container">
      <div class="footer-content">
        <div class="footer-section">
          <h3 class="footer-logo"><img src="images/logo-inverse.png" alt="STEM4Girls"></h3>
          <p>Empowering the next generation of STEM leaders through innovation and research.</p>
        </div>
        <div class="footer-section">
          <h4>Quick Links</h4>
          <ul>
            <li><a href='/about'>About Us</a></li>
            <li><a href='/team'>Our Team</a></li>
            <li><a href='/competition'>Competition</a></li>
            <li><a href='/resources'>Resources</a></li>
            <li><a href='/previous-projects'>Previous Projects</a></li>
            <li><a href='/donate'>Donate</a></li><li><a href='/register'>Register</a></li>
          </ul>
        </div>
        <div class="footer-section">
          <h4>Contact</h4>
          <ul>
            <li>📧 stem@stem4girls.org</li>
            <li>📞 503-583-2255</li>
            <li><a href='/contact'>Contact Form</a></li>
          </ul>
        </div>
        <div class="footer-section">
          <h4>Legal</h4>
          <ul>
            <li><a href='/privacy'>Privacy Policy</a></li>
          </ul>
        </div>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2026 STEM4Girls. All Rights Reserved.</p>
      </div>
    </div>
  </footer>

  <script src="js/script.js"></script>
  <script>
    /* Load project-specific images into each card-stack gallery */
    const galleries = {
      agricultureGallery: [
        'images/sp1.jpg','images/sp2.jpg','images/sp3.jpg','images/sp4.jpg',
        'images/sp5.jpg','images/sp6.jpg','images/sp7.jpg','images/sp8.jpg'
      ],
      wildVegGallery: [
        'assets/CompletedProjects/WildVegitableCultivation/1.jpg',
        'assets/CompletedProjects/WildVegitableCultivation/2.jpg',
        'assets/CompletedProjects/WildVegitableCultivation/3.jpg',
        'assets/CompletedProjects/WildVegitableCultivation/4.jpg',
        'assets/CompletedProjects/WildVegitableCultivation/5.jpg',
        'assets/CompletedProjects/WildVegitableCultivation/6.jpg'
      ],
      verticalFarmGallery: [
        'assets/CompletedProjects/verical-farming/1.jpeg',
        'assets/CompletedProjects/verical-farming/2.jpeg',
        'assets/CompletedProjects/verical-farming/3.jpeg',
        'assets/CompletedProjects/verical-farming/4.jpeg',
        'assets/CompletedProjects/verical-farming/5.jpeg',
        'assets/CompletedProjects/verical-farming/6.jpeg'
      ],
      capsicumGallery: [
        'assets/CompletedProjects/harvestingofcapsicum/1.jpg',
        'assets/CompletedProjects/harvestingofcapsicum/2.jpg',
        'assets/CompletedProjects/harvestingofcapsicum/3.jpg',
        'assets/CompletedProjects/harvestingofcapsicum/4.jpg',
        'assets/CompletedProjects/harvestingofcapsicum/5.jpg'
      ],
      greenBlissGallery: [
        'assets/CompletedProjects/green-bliss/1.jpeg',
        'assets/CompletedProjects/green-bliss/2.jpeg',
        'assets/CompletedProjects/green-bliss/3.jpeg',
        'assets/CompletedProjects/green-bliss/4.jpeg',
        'assets/CompletedProjects/green-bliss/5.jpeg',
        'assets/CompletedProjects/green-bliss/6.jpeg'
      ],
      agriDiversityGallery: [
        'assets/CompletedProjects/Lettuceleague/1.jpeg',
        'assets/CompletedProjects/Lettuceleague/2.jpeg',
        'assets/CompletedProjects/Lettuceleague/3.jpeg',
        'assets/CompletedProjects/Lettuceleague/4.jpeg',
        'assets/CompletedProjects/Lettuceleague/5.jpeg',
        'assets/CompletedProjects/Lettuceleague/6.jpeg'
      ],
      cannonGunGallery: [
        'assets/CompletedProjects/CanonGun/1.jpg',
        'assets/CompletedProjects/CanonGun/3.jpg',
        'assets/CompletedProjects/CanonGun/9.jpg'
      ]
    };

    /* Inject stack-card images before the nav buttons */
    Object.entries(galleries).forEach(([id, imgs]) => {
      const stack = document.getElementById(id);
      if (!stack) return;
      const prevBtn = stack.querySelector('.prev-btn');
      imgs.forEach(src => {
        const img = document.createElement('img');
        img.src = src;
        img.className = 'stack-card';
        img.alt = '';
        stack.insertBefore(img, prevBtn);
      });
    });
  </script>
</body>
</html>