@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-[105px] 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-red-500 rounded-full mb-2"></div>
    <h3 class="text-red-500 text-sm">CORE FEATURES</h3>
    <h2 class="text-[#6d0117] 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-red-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-red-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-red-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>