@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>