<div class="testimonials-container text-white" id="testimonials">
    <div class="testimonials-sub-container container mx-auto px-5">
        <h1 class="testimonials-heading" data-aos="fade-down" data-aos-duration="1000">Testimonials</h1>
        <!-- col-span-4 -->
        <!-- grid grid-cols-12 -->
        <div class="swiper myTestimonials">
            <div class="testimonial-content-container h-full swiper-wrapper" id="testimonialContentContainer">
                <div class="testimonials-body swiper-slide border bg-gradient-to-r from-neutral-800 via-neutal-950 to-black mt-10 border-neutral-600 rounded flex flex-col items-center h-full w-full cursor-pointer">
                    <div class="testimonials-heading-container flex flex-row items-center w-full flex flex-row items-start justify-start gap-5 relative">
                        <img src="https://gainskillsmedia.com/assets/testimonials/pawan-chandra.webp" alt="" class="w-20 h-20 rounded-full bg-gray-400 absolute -top-10 left-2 border-[#7fbc31] border-2" />
                        <span class="text-start py-2 ms-24 bg-gradient-to-r from-[#d8de00] to-[#7fbc31] w-full rounded-tr rounded-bl-xl">
                            <p class="text-base text-black px-4 font-bold">Pawan Chandra</p>
                            <p class="text-base text-black px-4 font-medium">Pidilite Industries</p>
                        </span>
                    </div>
                    <div class="rating text-2xl w-full px-4 mt-4">
                        <span class="text-neutral-400 text-center w-full block"><span class="text-orange-400">★★★★★</span></span>
                    </div>
                    <span class="testimonials-content-container mt-1 flex flex-col items-center justify-center px-4 pb-4 mb-auto h-full block">
                        <p class="testimonials-text text-center">Very well organised.Time management is Brilliant,Time spent well<span class="testimonials-last-text">.</span></p>
                    </span>
                </div>
                <div class="testimonials-body swiper-slide border bg-gradient-to-r from-neutral-800 via-neutal-950 to-black mt-10 border-neutral-600 rounded flex flex-col items-center h-full w-full cursor-pointer">
                    <div class="testimonials-heading-container flex flex-row items-center w-full flex flex-row items-start justify-start gap-5 relative">
                        <img src="https://gainskillsmedia.com/assets/testimonials/sandeep-bhide.webp" alt="" class="w-20 h-20 rounded-full bg-gray-400 absolute -top-10 left-2 border-[#7fbc31] border-2" />
                        <span class="text-start py-2 ms-24 bg-gradient-to-r from-[#d8de00] to-[#7fbc31] w-full rounded-tr rounded-bl-xl">
                            <p class="text-base text-black px-4 font-bold">Sandeep Bhide</p>
                            <p class="text-base text-black px-4 font-medium">Reliance Retail</p>
                        </span>
                    </div>
                    <div class="rating text-2xl w-full px-4 mt-4">
                        <span class="text-neutral-400 text-center w-full block"><span class="text-orange-400">★★★★★</span></span>
                    </div>
                    <span class="testimonials-content-container mt-1 flex flex-col items-center justify-center px-4 pb-4 mb-auto h-full block">
                        <p class="testimonials-text text-center">The session provides a wealth of learning opportunities and insights<span class="testimonials-last-text">.</span></p>
                    </span>
                </div>
                <div class="testimonials-body swiper-slide border bg-gradient-to-r from-neutral-800 via-neutal-950 to-black mt-10 border-neutral-600 rounded flex flex-col items-center h-full w-full cursor-pointer">
                    <div class="testimonials-heading-container flex flex-row items-center w-full flex flex-row items-start justify-start gap-5 relative">
                        <img src="https://gainskillsmedia.com/assets/testimonials/manish-kansal.webp" alt="" class="w-20 h-20 rounded-full bg-gray-400 absolute -top-10 left-2 border-[#7fbc31] border-2" />
                        <span class="text-start py-2 ms-24 bg-gradient-to-r from-[#d8de00] to-[#7fbc31] w-full rounded-tr rounded-bl-xl">
                            <p class="text-base text-black px-4 font-bold">Manish Kansal</p>
                            <p class="text-base text-black px-4 font-medium">Tata Communications</p>
                        </span>
                    </div>
                    <div class="rating text-2xl w-full px-4 mt-4">
                        <span class="text-neutral-400 text-center w-full block"><span class="text-orange-400">★★★★★</span></span>
                    </div>
                    <span class="testimonials-content-container mt-1 flex flex-col items-center justify-center px-4 pb-4 mb-auto h-full block">
                        <p class="testimonials-text text-center">Knowledge of esteemed speakers were amazing, The event was well organized by Gain Skills<span class="testimonials-last-text">.</span></p>
                    </span>
                </div>
                <div class="testimonials-body swiper-slide border bg-gradient-to-r from-neutral-800 via-neutal-950 to-black mt-10 border-neutral-600 rounded flex flex-col items-center h-full w-full cursor-pointer">
                    <div class="testimonials-heading-container flex flex-row items-center w-full flex flex-row items-start justify-start gap-5 relative">
                        <img src="https://gainskillsmedia.com/assets/testimonials/prosanta-kumar-dey.webp" alt="" class="w-20 h-20 rounded-full bg-gray-400 absolute -top-10 left-2 border-[#7fbc31] border-2" />
                        <span class="text-start py-2 ms-24 bg-gradient-to-r from-[#d8de00] to-[#7fbc31] w-full rounded-tr rounded-bl-xl">
                            <p class="text-base text-black px-4 font-bold">Prosanta Kumar Dey Dey</p>
                            <p class="text-base text-black px-4 font-medium">SBI - SG Global Securities Services Pvt. Ltd</p>
                        </span>
                    </div>
                    <div class="rating text-2xl w-full px-4 mt-4">
                        <span class="text-neutral-400 text-center w-full block"><span class="text-orange-400">★★★★★</span></span>
                    </div>
                    <span class="testimonials-content-container mt-1 flex flex-col items-center justify-center px-4 pb-4 mb-auto h-full block">
                        <p class="testimonials-text text-center">The arrangements were good & the event quality and Awards were amazing<span class="testimonials-last-text">.</span></p>
                    </span>
                </div>
                <div class="testimonials-body swiper-slide border bg-gradient-to-r from-neutral-800 via-neutal-950 to-black mt-10 border-neutral-600 rounded flex flex-col items-center h-full w-full cursor-pointer">
                    <div class="testimonials-heading-container flex flex-row items-center w-full flex flex-row items-start justify-start gap-5 relative">
                        <img src="https://gainskillsmedia.com/assets/testimonials/suhas-mhaskar.webp" alt="" class="w-20 h-20 rounded-full bg-gray-400 absolute -top-10 left-2 border-[#7fbc31] border-2" />
                        <span class="text-start py-2 ms-24 bg-gradient-to-r from-[#d8de00] to-[#7fbc31] w-full rounded-tr rounded-bl-xl">
                            <p class="text-base text-black px-4 font-bold">Suhas Mhaskar</p>
                            <p class="text-base text-black px-4 font-medium">Octave Group</p>
                        </span>
                    </div>
                    <div class="rating text-2xl w-full px-4 mt-4">
                        <span class="text-neutral-400 text-center w-full block"><span class="text-orange-400">★★★★★</span></span>
                    </div>
                    <span class="testimonials-content-container mt-1 flex flex-col items-center justify-center px-4 pb-4 mb-auto h-full block">
                        <p class="testimonials-text text-center">In spite on being a new group you are doing great in event organization. Keep it up & Best wishes<span class="testimonials-last-text">.</span></p>
                    </span>
                </div>
                <div class="testimonials-body swiper-slide border bg-gradient-to-r from-neutral-800 via-neutal-950 to-black mt-10 border-neutral-600 rounded flex flex-col items-center h-full w-full cursor-pointer">
                    <div class="testimonials-heading-container flex flex-row items-center w-full flex flex-row items-start justify-start gap-5 relative">
                        <img src="https://gainskillsmedia.com/assets/testimonials/ambarish-singh.webp" alt="" class="w-20 h-20 rounded-full bg-gray-400 absolute -top-10 left-2 border-[#7fbc31] border-2" />
                        <span class="text-start py-2 ms-24 bg-gradient-to-r from-[#d8de00] to-[#7fbc31] w-full rounded-tr rounded-bl-xl">
                            <p class="text-base text-black px-4 font-bold">Ambarish Singh</p>
                            <p class="text-base text-black px-4 font-medium">Godrej</p>
                        </span>
                    </div>
                    <div class="rating text-2xl w-full px-4 mt-4">
                        <span class="text-neutral-400 text-center w-full block"><span class="text-orange-400">★★★★★</span></span>
                    </div>
                    <span class="testimonials-content-container mt-1 flex flex-col items-center justify-center px-4 pb-4 mb-auto h-full block">
                        <p class="testimonials-text text-center">A well planned and organised event. Keep up the good work<span class="testimonials-last-text">.</span></p>
                    </span>
                </div>
                <div class="testimonials-body swiper-slide border bg-gradient-to-r from-neutral-800 via-neutal-950 to-black mt-10 border-neutral-600 rounded flex flex-col items-center h-full w-full cursor-pointer">
                    <div class="testimonials-heading-container flex flex-row items-center w-full flex flex-row items-start justify-start gap-5 relative">
                        <img src="https://gainskillsmedia.com/assets/testimonials/navrantan-bohra.webp" alt="" class="w-20 h-20 rounded-full bg-gray-400 absolute -top-10 left-2 border-[#7fbc31] border-2" />
                        <span class="text-start py-2 ms-24 bg-gradient-to-r from-[#d8de00] to-[#7fbc31] w-full rounded-tr rounded-bl-xl">
                            <p class="text-base text-black px-4 font-bold">Navrantan Bohra</p>
                            <p class="text-base text-black px-4 font-medium">Anand Rathi Share & stocks Brokers</p>
                        </span>
                    </div>
                    <div class="rating text-2xl w-full px-4 mt-4">
                        <span class="text-neutral-400 text-center w-full block"><span class="text-orange-400">★★★★★</span></span>
                    </div>
                    <span class="testimonials-content-container mt-1 flex flex-col items-center justify-center px-4 pb-4 mb-auto h-full block">
                        <p class="testimonials-text text-center">Content Excellent. Topics Excellent<span class="testimonials-last-text">.</span></p>
                    </span>
                </div>
                <div class="testimonials-body swiper-slide border bg-gradient-to-r from-neutral-800 via-neutal-950 to-black mt-10 border-neutral-600 rounded flex flex-col items-center h-full w-full cursor-pointer">
                    <div class="testimonials-heading-container flex flex-row items-center w-full flex flex-row items-start justify-start gap-5 relative">
                        <img src="https://gainskillsmedia.com/assets/testimonials/rajesh-pal.webp" alt="" class="w-20 h-20 rounded-full bg-gray-400 absolute -top-10 left-2 border-[#7fbc31] border-2" />
                        <span class="text-start py-2 ms-24 bg-gradient-to-r from-[#d8de00] to-[#7fbc31] w-full rounded-tr rounded-bl-xl">
                            <p class="text-base text-black px-4 font-bold">Rajesh Pal</p>
                            <p class="text-base text-black px-4 font-medium">Aditya Birla Group</p>
                        </span>
                    </div>
                    <div class="rating text-2xl w-full px-4 mt-4">
                        <span class="text-neutral-400 text-center w-full block"><span class="text-orange-400">★★★★★</span></span>
                    </div>
                    <span class="testimonials-content-container mt-1 flex flex-col items-center justify-center px-4 pb-4 mb-auto h-full block">
                        <p class="testimonials-text text-center">Over all session great<span class="testimonials-last-text">.</span></p>
                    </span>
                </div>
                <div class="testimonials-body swiper-slide border bg-gradient-to-r from-neutral-800 via-neutal-950 to-black mt-10 border-neutral-600 rounded flex flex-col items-center h-full w-full cursor-pointer">
                    <div class="testimonials-heading-container flex flex-row items-center w-full flex flex-row items-start justify-start gap-5 relative">
                        <img src="https://gainskillsmedia.com/assets/testimonials/deepak-deshpande.webp" alt="" class="w-20 h-20 rounded-full bg-gray-400 absolute -top-10 left-2 border-[#7fbc31] border-2" />
                        <span class="text-start py-2 ms-24 bg-gradient-to-r from-[#d8de00] to-[#7fbc31] w-full rounded-tr rounded-bl-xl">
                            <p class="text-base text-black px-4 font-bold">Dr. Deepak Deshpande</p>
                            <p class="text-base text-black px-4 font-medium">Netmagic IT Services Pvt Ltd</p>
                        </span>
                    </div>
                    <div class="rating text-2xl w-full px-4 mt-4">
                        <span class="text-neutral-400 text-center w-full block"><span class="text-orange-400">★★★★★</span></span>
                    </div>
                    <span class="testimonials-content-container mt-1 flex flex-col items-center justify-center px-4 pb-4 mb-auto h-full block">
                        <p class="testimonials-text text-center">I liked the setup, liked the way the event unfolded. The sessions were very thought provoking. The attendance and participation is amazing.<<span class="testimonials-last-text">.
                    </span></p>
                    </span>
                </div>
            </div>
            <div class="swiper-pagination static mt-2"></div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
        var swiper = new Swiper(".myTestimonials", {
            breakpoints: {
                1440: {
                    slidesPerView: 3,
                },
                768: {
                    slidesPerView: 2,
                },
            },
            autoplay: {
                delay: 5000,
            },
            slidesPerView: 1,
            spaceBetween: 40,
            loop: false,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
        // const testimonialContentContainer = document.getElementById('testimonialContentContainer');
        // const testimonialsBody = document.getElementsByClassName('testimonials-body');
        // let height = testimonialContentContainer.clientHeight;
        // let i = 0;
        // for (i=0; i < testimonialsBody.length; i++){
        //     testimonialsBody[i].style.height = height + 'px';
        // }
    </script>