@aware(['page'])
<div class="theme-bg-blue">
    <div class="theme-max-w mx-auto px-5 py-10">
        <div class="flex flex-col items-center justify-center px-4 py-6">
            <h1 class="text-white text-4xl font-bold font-heading mb-10 text-center">{{$title}}</h1>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-1 sm:w-2/3 md:w-2/3">
                @foreach($perks as $perk)
                    <div class="{{$perk['style'] == 'blue' ? 'theme-bg-blue text-white':'bg-white theme-text-blue'}} p-8 rounded-2xl shadow-lg">
                        <div class="mb-3"><i class="{{$perk['icon']}} text-2xl"></i></div>
                        <div class="text-lg font-semibold font-title mb-3">{{$perk['title']}}</div>
                        <div class="text-sm font-description mb-3">{{$perk['designation']}}</div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>