<div class="slider">
    <div class="container-fluid mt-0 mb-4 ">
        <div id="imageSlider" class="carousel slide" data-bs-ride="carousel">
            <!-- Indicators -->
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#imageSlider" data-bs-slide-to="0" class="active"></button>
                <button type="button" data-bs-target="#imageSlider" data-bs-slide-to="1"></button>
                <button type="button" data-bs-target="#imageSlider" data-bs-slide-to="2"></button>
                <button type="button" data-bs-target="#imageSlider" data-bs-slide-to="3"></button>
                <button type="button" data-bs-target="#imageSlider" data-bs-slide-to="4"></button>
                <button type="button" data-bs-target="#imageSlider" data-bs-slide-to="5"></button>
                <button type="button" data-bs-target="#imageSlider" data-bs-slide-to="6"></button>
                <button type="button" data-bs-target="#imageSlider" data-bs-slide-to="7"></button>
                <button type="button" data-bs-target="#imageSlider" data-bs-slide-to="8"></button>
                <button type="button" data-bs-target="#imageSlider" data-bs-slide-to="9"></button>
            </div>

            <!-- Slides -->
            <div class="carousel-inner">
                <!-- OVERLAY CONTENT -->
                <div class="slider-overlay text-center">
                    <a href="https://aaccc.gov.in/contact-us/" target="_blank" norel="noreferrer" class="btn btn-primary">Apply Now</a>
                    <a href="Contact-Us" class="btn btn-secondary">Contact Us</a>
                </div>

                <div class="carousel-item active">
                    <img src="{{ asset('images/slide1.jpg') }}" class="d-block w-100 carousel-img" alt="Slide 1">
                </div>
                <div class="carousel-item">
                    <img src="{{ asset('images/slide2.jpg') }}" class="d-block w-100 carousel-img" alt="Slide 2">
                </div>
                <div class="carousel-item">
                    <img src="{{ asset('images/slide3.jpg') }}" class="d-block w-100 carousel-img" alt="Slide 3">
                </div>
                <div class="carousel-item">
                    <img src="{{ asset('images/slide4.jpg') }}" class="d-block w-100 carousel-img" alt="Slide 4">
                </div>
                <div class="carousel-item">
                    <img src="{{ asset('images/slide5.jpg') }}" class="d-block w-100 carousel-img" alt="Slide 5">
                </div>
                <div class="carousel-item">
                    <img src="{{ asset('images/slide6.jpg') }}" class="d-block w-100 carousel-img" alt="Slide 6">
                </div>
                <div class="carousel-item">
                    <img src="{{ asset('images/slide7.jpg') }}" class="d-block w-100 carousel-img" alt="Slide 7">
                </div>
                <div class="carousel-item">
                    <img src="{{ asset('images/slide8.jpg') }}" class="d-block w-100 carousel-img" alt="Slide 8">
                </div>
                <div class="carousel-item">
                    <img src="{{ asset('images/slide9.jpg') }}" class="d-block w-100 carousel-img" alt="Slide 9">
                </div>
                <div class="carousel-item">
                    <img src="{{ asset('images/slide10.jpg') }}" class="d-block w-100 carousel-img" alt="Slide 10">
                </div>
            </div>

            <!-- Navigation Buttons -->
            <button class="carousel-control-prev" type="button" data-bs-target="#imageSlider" data-bs-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#imageSlider" data-bs-slide="next">
                <span class="carousel-control-next-icon"></span>
            </button>
        </div>
    </div>
</div>