<!-- Carousel -->
<section class="slider position-relative">
    <div id="demo" class="carousel slide" data-bs-ride="carousel" data-interval="1000">

        <!-- Indicators/dots -->
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
        </div>

        <!-- The slideshow/carousel -->
        <div class="carousel-inner">
            <?php $a = 0;?>
            @foreach(MPCMS::getslider() as $slider)

            <div class="carousel-item <?php if($a==0):?>active<?php endif; ?>">
                <img src="{{ $slider->thumb}}" alt="" class="img-fluid">
                <div class="g-3 col-md-4 <?php if ($a == 0 || $a == 1) : ?> main-content <?php else : ?> main-content2 <?php endif; ?> ps-3 pe-3" uk-scrollspy="cls: uk-animation-slide-top; delay:200; repeat: true">
                    <p class="custom-text fw-bold">{{ $slider->slider_title}}</p>
                    <p class="giant-text text-capitalize text-uppercase fw-bold">{{ $slider->slider_desc}}</p>
                    <div class="hstack gap-3 mt-5">
                        <div>
                            <a class="custom-btn " aria-current="page" href="{{ $slider->url1}}">Explore Jobs</a>
                        </div>
                    </div>
                </div>



            </div>
            <?php $a++; ?>

            @endforeach

        </div>
        <div class="nextPrev">
            <button class="carousel-prev btn" type="button" data-bs-target="#demo" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-next btn" type="button" data-bs-target="#demo" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>
</section>