<style>
        
        .volunteer-card {
            margin-bottom: 20px;
            /* Add gap between cards */
        }

        @media (max-width: 576px) {
            .volunteer-card {
                margin-bottom: 0;
                /* Adjust gap for mobile */
            }
        }
    </style>
    <!-- Header End -->
    <div class="container mt-5 mb-3">
    <div class="section-title mb-5 wow fadeInUp" data-wow-delay="0.2s">
                <div class="sub-style">
                    <h4 class="sub-title px-3 mb-0">Our Volunteers</h4>
                </div>
            </div>
        <div class="row mt-3">
            <div class="col-6 col-lg-3">
                <div class="volunteer-card">
                    <div class="card">
                        <img src="./ethan/vol1.jpg" class="card-img-top" alt="Volunteer 1">
                        <div class="card-body text-center">
                            <h5 class="card-title">Rajesh Kumar</h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-lg-3">
                <div class="volunteer-card">
                    <div class="card">
                        <img src="./ethan/vol2.jpg" class="card-img-top" alt="Volunteer 2">
                        <div class="card-body text-center">
                            <h5 class="card-title">Nishant Kumar</h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-lg-3">
                <div class="volunteer-card">
                    <div class="card">
                        <img src="./ethan/vol3.jpg" class="card-img-top" alt="Volunteer 3">
                        <div class="card-body text-center">
                            <h5 class="card-title">Priyansh Kashyap</h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-lg-3">
                <div class="volunteer-card">
                    <div class="card">
                        <img src="./ethan/vol4.jpg" class="card-img-top" alt="Volunteer 3">
                        <div class="card-body text-center">
                            <h5 class="card-title">Anurag Singh</h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-lg-3">
                <div class="volunteer-card">
                    <div class="card">
                        <img src="./ethan/vol5.jpg" class="card-img-top" alt="Volunteer 1">
                        <div class="card-body text-center">
                            <h5 class="card-title">Piyush Singh</h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-lg-3">
                <div class="volunteer-card">
                    <div class="card">
                        <img src="./ethan/vol6.jpg" class="card-img-top" alt="Volunteer 2">
                        <div class="card-body text-center">
                            <h5 class="card-title">Saurav</h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-lg-3">
                <div class="volunteer-card">
                    <div class="card">
                        <img src="./ethan/vol7.jpg" class="card-img-top" alt="Volunteer 3">
                        <div class="card-body text-center">
                            <h5 class="card-title">Divyanshu</h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-lg-3">
                <div class="volunteer-card">
                    <div class="card">
                        <img src="./ethan/vol8.jpg" class="card-img-top" alt="Volunteer 3">
                        <div class="card-body text-center">
                            <h5 class="card-title">Khusi Kumari</h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-lg-3">
                <div class="volunteer-card">
                    <div class="card">
                        <img src="./ethan/vol9.jpg" class="card-img-top" alt="Volunteer 1">
                        <div class="card-body text-center">
                            <h5 class="card-title">Krishna Chandan</h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-lg-3">
                <div class="volunteer-card">
                    <div class="card">
                        <img src="./ethan/vol10.jpg" class="card-img-top" alt="Volunteer 2">
                        <div class="card-body text-center">
                            <h5 class="card-title">Nandita Kumari</h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-lg-3">
                <div class="volunteer-card">
                    <div class="card">
                        <img src="./ethan/vol11.jpg" class="card-img-top" alt="Volunteer 3">
                        <div class="card-body text-center">
                            <h5 class="card-title">Kumar Shubham</h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-lg-3">
                <div class="volunteer-card">
                    <div class="card">
                        <img src="./ethan/vol12.jpg" class="card-img-top" alt="Volunteer 3">
                        <div class="card-body text-center">
                            <h5 class="card-title">Manjesh kumar</h5>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Add more volunteer cards as needed -->
        </div>
    </div>