@props(['data'])
@php
    $parent = reset($data);
    $child = array_values(array_slice($data, 1));

@endphp



<section class="bg-[url('https://gerow.botble.com/storage/backgrounds/counter-bg.jpg')] bg-no-repeat bg-cover py-20">
    <div class="2xl:container 2xl:mx-auto px-2 md:px-[20px] lg:px-[100px] space-y-4">
        <div class="flex flex-col items-center gap-2 md:w-[40%] mx-auto text-center">
            <div class="w-10 h-1.5 bg-[#0298c0] rounded-full mb-2"></div>
            <h3 class="text-[#0298c0] text-sm">CORE FEATURES</h3>
            <h2 class="text-[#113a5e] font-semibold text-4xl">Amazing Features For Business Solutions</h2>
        </div>

        <div class="grid grid-cols-12 md:gap-6">
            @if (!empty($child))
                @foreach ($child as $value)
                    <div class="feature-card col-span-12 md:col-span-4 relative group h-[200px]">
                        <div
                            class="absolute top-2 left-0 bg-[#ffffff] mx-[3.5px] px-10 py-8 border border-blue-300 rounded-xl space-y-2 group-hover:top-0 transition-all duraiton-500 w-[calc(100%-6px)] min-h-[154px]">
                        </div>
                        <div
                            class="absolute top-1 left-0 bg-[#ffffff] mx-0.5 px-10 py-8 border border-blue-300 rounded-xl space-y-2 group-hover:top-0 transition-all duraiton-1000 w-[calc(100%-2px)] min-h-[154px]">
                        </div>
                        <div
                            class="absolute top-0 left-0 bg-[#ffffff] px-10 py-8 border border-blue-300 rounded-md space-y-2 z-30 w-full min-h-[154px]">
                            <div class="flex items-center gap-4 ">
                                <span class="text-4xl"><i class="{{ $value['card_icon'] }}"></i></span>
                                <h2 class="text-xl font-semibold">{{ $value['card_text'] }}</h2>
                            </div>
                            <div class="flex gap-2 text-slate-500">
                                <p class="text-sm ">{{ $value['card_description'] }}</p>
                                <span class="h-fit text-expand-btn text-xl cursor-pointer"><i
                                        class="fa-solid fa-angle-down"></i></span>
                            </div>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
    </div>
</section>