@aware(['page'])
<div>
    <div class="theme-max-w mx-auto bg-white px-5 mb-10">
        <div class="flex flex-col md:flex-row justify-between md:items-start items-center mb-6 gap-6">
            <div>
                <p class="text-sm tracking-widest uppercase text-gray-600">{{$title}}</p>
                <h2 class="text-3xl md:text-4xl font-semibold text-gray-900 mt-2">{{$description}}</h2>
            </div>
            <a href="{{$link}}"><button class="theme-bg-blue text-white text-md tracking-widest px-6 py-3 rounded-full hover:bg-sky-800 transition">{{$buttonText}}</button></a>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-10 p-4">
            @foreach($services as $service)
                <div class="space-y-4 w-full max-w-72 mx-auto text-center md:text-left">
                    <div class="w-12 h-12 rounded-full bg-gray-100 text-gray-400 flex items-center justify-center mb-6 mx-auto md:mx-0">
                        <i class="{{$service['icon']}}"></i>
                    </div>
                    <h3 class="font-semibold text-lg text-gray-900">{{$service['servicetitle']}}</h3>
                    <p class="text-sm text-gray-600">{{$service['servicedescription']}}</p>
                </div>
            @endforeach
        </div>
    </div>
</div>