@aware(['page'])
<div>
    <div class="theme-bg-blue mb-20">
        <div class="theme-max-w mx-auto px-5">

            <div class="grid grid-cols-1 md:grid-cols-2 items-center py-10">
                <div class="text-white">
                    <div class="uppercase text-white mb-4 text-sm">{{$heading}}</div>
                    <div class="capitalize mb-6 text-4xl md:text-4xl">{{$title}}</div>
                    <div class="w-full md:w-[450px] text-white">{{$caption}}</div>
                </div>
                <div class="flex gap-4 justify-start md:justify-self-end pt-10 md:pt-20">
                    <button id="btnPrev"
                            class="w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center border border-white rounded-full text-white bg-black/10 hover:bg-white hover:text-black transition">
                        <i class="fa-solid fa-arrow-left"></i>
                    </button>
                    <button id="btnNext"
                            class="w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center border border-white rounded-full text-white bg-black/10 hover:bg-white hover:text-black transition">
                        <i class="fa-solid fa-arrow-right"></i>
                    </button>
                </div>
            </div>

            <div class="w-full overflow-hidden pb-10">
                <div class="swiper services mx-auto">
                    <div class="swiper-wrapper">
                        @foreach($services as $service)
                            <div class="swiper-slide bg-transparent w-full h-[500px] grid place-items-center theme-bg-blue">
                                <div class="flex flex-col items-center group-hover:scale-105 w-full">
                                    <img class="mb-6 w-full h-[400px] object-cover rounded-lg" src="{{asset('storage/' . $service['image'])}}" alt="">
                                    <a href="{{ $service['link'] }}"><button class="capitalize text-white border-2 px-4 py-2 font-bold hover:bg-[#4682B4]  transition-transform duration-300">Explore</button></a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    @push('inlinescript')
        <script>
            const swiper = new Swiper('.services', {
                slidesPerView: 1,
                slidesPerGroup: 1,
                spaceBetween: 30,
                loop: false,
                initialSlide: 0,
                watchOverflow: true,
                speed: 500,
                navigation: {
                    nextEl: "#btnNext",
                    prevEl: "#btnPrev",
                },
                breakpoints: {
                    320: {
                        slidesPerView: 1,
                    },
                    420: {
                        slidesPerView: 1,
                    },
                    560: {
                        slidesPerView: 2,
                    },
                    768: {
                        slidesPerView: 2,
                    },
                    920: {
                        slidesPerView: 3,
                    },
                    1024: {
                        slidesPerView: 4,
                    }
                },
            });
        </script>
    @endpush
</div>