<?php include 'header.php';?>

        
        <!--Start Page Header-->
        <section class="page-header">
            <div class="page-header__bg" style="background-image: url(assets/images/backgrounds/page-header-bg.jpg)">
            </div>
            <div class="shape1 float-bob-x"><img src="assets/images/shapes/page-header-shape1.png" alt=""></div>
            <div class="shape2"><img src="assets/images/shapes/page-header-shape2.png" alt=""></div>
            <div class="container">
                <div class="page-header__inner">
                    <h2> Photo Gallery</h2>
                    <ul class="thm-breadcrumb wow fadeInUp" data-wow-duration="1500ms">
                        <li><a href="index-2.html">Home</a></li>
                        <li>/</li>
                        <li>Photo Gallery</li>
                    </ul>
                </div>
            </div>
        </section>
        <!--End Page Header-->

  

     <section style="padding:60px 0; background-color:#f8f9fa;">
      <div style="max-width:1200px; margin:0 auto; text-align:center;">
        <h2 style="font-size:32px; font-weight:700; color:#222; margin-bottom:10px;">Photo Gallery</h2>
        <p style="font-size:16px; color:#666; margin-bottom:40px;">Explore moments captured from our various initiatives and events.</p>

        <!-- Albums Grid -->
        <div style="display:flex; flex-wrap:wrap; justify-content:center; gap:30px;">

          <!-- Album 1 -->
          <div style="background:#fff; border:1px solid #e0e0e0; border-radius:12px; width:280px; box-shadow:0 4px 12px rgba(0,0,0,0.1); overflow:hidden; transition:transform 0.3s; cursor:pointer;">
            <div style="width:100%; height:200px; overflow:hidden;">
              <img src="assets/images/resources/gallery-page-img6.jpg" alt="Education Drive Album" style="width:100%; height:100%; object-fit:cover;">
            </div>
            <div style="padding:20px;">
              <h3 style="font-size:18px; color:#333; font-weight:600; margin-bottom:10px;">Education Drive 2025</h3>
              <p style="font-size:14px; color:#777; margin-bottom:15px;">Empowering children through quality education.</p>
              <a href="gallery.html" style="display:inline-block; text-decoration:none; background:#007bff; color:#fff; padding:8px 14px; border-radius:6px; font-size:14px;">View Album</a>
            </div>
          </div>

          <!-- Album 2 -->
          <div style="background:#fff; border:1px solid #e0e0e0; border-radius:12px; width:280px; box-shadow:0 4px 12px rgba(0,0,0,0.1); overflow:hidden; transition:transform 0.3s; cursor:pointer;">
            <div style="width:100%; height:200px; overflow:hidden;">
              <img src="assets/images/resources/gallery-page-img4.jpg" alt="Health Camp Album" style="width:100%; height:100%; object-fit:cover;">
            </div>
            <div style="padding:20px;">
              <h3 style="font-size:18px; color:#333; font-weight:600; margin-bottom:10px;">Community Health Camp</h3>
              <p style="font-size:14px; color:#777; margin-bottom:15px;">Reaching remote villages with essential healthcare.</p>
              <a href="gallery.html" style="display:inline-block; text-decoration:none; background:#007bff; color:#fff; padding:8px 14px; border-radius:6px; font-size:14px;">View Album</a>
            </div>
          </div>

          <!-- Album 3 -->
          <div style="background:#fff; border:1px solid #e0e0e0; border-radius:12px; width:280px; box-shadow:0 4px 12px rgba(0,0,0,0.1); overflow:hidden; transition:transform 0.3s; cursor:pointer;">
            <div style="width:100%; height:200px; overflow:hidden;">
              <img src="assets/images/resources/gallery-page-img5.jpg" alt="Women Empowerment Album" style="width:100%; height:100%; object-fit:cover;">
            </div>
            <div style="padding:20px;">
              <h3 style="font-size:18px; color:#333; font-weight:600; margin-bottom:10px;">Women Empowerment Program</h3>
              <p style="font-size:14px; color:#777; margin-bottom:15px;">Celebrating women leading change in communities.</p>
              <a href="gallery.html" style="display:inline-block; text-decoration:none; background:#007bff; color:#fff; padding:8px 14px; border-radius:6px; font-size:14px;">View Album</a>
            </div>
          </div>

          <!-- Album 4 -->
          <div style="background:#fff; border:1px solid #e0e0e0; border-radius:12px; width:280px; box-shadow:0 4px 12px rgba(0,0,0,0.1); overflow:hidden; transition:transform 0.3s; cursor:pointer;">
            <div style="width:100%; height:200px; overflow:hidden;">
              <img src="assets/images/resources/gallery-page-img11.jpg" alt="Environment Day Album" style="width:100%; height:100%; object-fit:cover;">
            </div>
            <div style="padding:20px;">
              <h3 style="font-size:18px; color:#333; font-weight:600; margin-bottom:10px;">World Environment Day</h3>
              <p style="font-size:14px; color:#777; margin-bottom:15px;">Promoting sustainability and ecological awareness.</p>
              <a href="gallery.html" style="display:inline-block; text-decoration:none; background:#007bff; color:#fff; padding:8px 14px; border-radius:6px; font-size:14px;">View Album</a>
            </div>
          </div>

        </div>
      </div>
</section>

<?php include 'footer.php';?>