@aware(['page'])
<div class="w-full bg-white border-neutral-300 mb-10">
    <div class="text-center mb-12 px-4">
        <h2 class="text-4xl font-bold  text-black">Why Choose Taiton?</h2>
    </div>
    <div class="max-w-7xl mx-auto px-4 gap-y-12 flex flex-wrap justify-center gap-8 lg:flex-nowrap">
        @foreach($chooses as $choose)
            <div class="relative w-full sm:w-[90%] md:w-[70%] lg:w-72 bg-neutral-50 rounded-md border border-neutral-300 px-4 pb-5 pt-12">
                <div class="absolute -top-10 left-1/2 transform -translate-x-1/2 w-20 h-20 bg-violet-50 rounded-full shadow-md  border border-neutral-300 flex items-center justify-center">
                    <i class="{{$choose['icon']}} text-3xl text-black"></i>
                </div>
                <div class="text-zinc-700 text-base leading-loose text-justify mb-3"> {!! $choose['description'] !!}</div>
            </div>
        @endforeach
    </div>
</div>