<section id="banner" class="min-h-screen">
    <div class="owl-carousel owl-theme">
        @foreach ($banners as $b)
            <div class="banner-item w-auto min-h-screen text-3xl text-neutral-50 flex items-center "
                style="
    background-image: url({{ $b['image'] }});
    background-size: cover;
    background-position: center;
  ">
                <div class="w-full container mx-auto relative z-[15] space-y-6">
                    <h3 class="text-6xl text-white banner-title">{{ $b['title'] }}</h3>
                    <a type="button" href="{{ $b['link'] }}"
                        class="btn light px-4 py-2 text-base uppercase border-2 border-blue-600 text-neutral-50 hover:bg-blue-600 hover:text-neutral-50 font-bold">
                        <span class="relative z-[100] uppercase">See</span></a>
                </div>
            </div>
        @endforeach
    </div>
</section>
