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

@endphp



<section
    class="container mx-auto grid grid-cols-12 gap-x-4 gap-y-16 px-2 text-[#424242] md:px-[20px] lg:px-[100px] xl:px-[169px]">
    @if (isset($child[0]))
        @foreach ($child[0] as $value)
            <div
                class="group/card relative col-span-12 space-y-2 rounded-xl bg-white px-4 py-7 text-sm transition-shadow duration-500 hover:shadow-xl sm:col-span-6 md:col-span-4">
                <div
                    class="flex h-16 w-16 items-center justify-center rounded-full bg-orange-50 text-[#F06728] transition-colors duration-500 group-hover/card:bg-[#F06728] group-hover/card:text-white">
                    <span class="text-[2rem]"><i class="{{ $value->icone }}"></i></span>
                </div>
                <h1 class="text-lg font-bold">{{ $value->title }}</h1>
                <p class="line-clamp-3 text-neutral-400">
                    {{ $value->short_des }}
                </p>
                <a href="{{ route('service-view', $value->id) }}"
                    class="group/learn-more block w-fit font-bold text-[#F06728]">Learn More
                    <i
                        class="fa-solid fa-arrow-right transition-transform duration-500 group-hover/learn-more:translate-x-[4px]"></i></a>
            </div>
        @endforeach
    @endif
</section>