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

@endphp


<section class="md:-translate-y-full">
    <div class="2xl:container 2xl:mx-auto px-2 md:px-[20px] lg:px-[100px] md:h-[120px] ">
        <div class="md:grid grid-cols-12 gap-6">
            <!-- Feature Card -->
            @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['icon'] }}"></i></span>
                                <h2 class="text-xl font-semibold">{{ $value['title'] }}</h2>
                            </div>
                            <div class="flex gap-2 text-slate-500">
                                <p class="text-sm ">{{ $value['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>