<div class="heroSwiper">
    <!-- Text Overlay Once -->
    <h2 class="overlay-text">
        <span style="color: #BF122E;">Atlas Azawan</span> est une association à but non lucratif ayant reçu le Prix National de la Société Civile de la part du ministère délégué auprès du Chef du Gouvernement chargé des relations avec le Parlement.
    </h2>

    <!-- Swiper Container -->
    <swiper-container class="mySwiper" 
        pagination="true" 
        pagination-clickable="true" 
        navigation="true" space-between="30"
        centered-slides="true" autoplay-delay="2500" autoplay-disable-on-interaction="false">
            <swiper-slide>
            <img class="mySwiperimg" src="https://images.unsplash.com/photo-1470229538611-16ba8c7ffbd7?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Random Image 1">
            </swiper-slide>    
            <swiper-slide>
            <img class="mySwiperimg" src="https://picsum.photos/800/400?random=1" alt="Random Image 1">
            </swiper-slide>
            <swiper-slide>
            <img class="mySwiperimg" src="https://picsum.photos/800/400?random=2" alt="Random Image 2">
            </swiper-slide>
            <swiper-slide>
            <img class="mySwiperimg" src="https://picsum.photos/800/400?random=3" alt="Random Image 3">
            </swiper-slide>
    </swiper-container>
</div>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>