{{# Service Cards Section #}}
<section class="py-16 full-bleed bg-white">
    <div class="max-w-6xl mx-auto">
        {{ if card_items }}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {{ card_items }}
            <a href="{{ link ?? '#' }}"
               class="card-service bg-[#fefeff] rounded-md shadow-[0_0_40px_3px_rgba(0,0,0,0.06)] px-6 py-10"
               data-aos="fade-up" data-aos-delay="{{ index | multiply:100 | modulo:400 }}">
                {{ if title }}
                <h3 class="font-nunito text-base font-bold text-[#252a3f] mb-3">{{ title }}</h3>
                {{ /if }}
                {{ if icon_image }}
                <img src="{{ icon_image:url }}" alt="{{ title }}" class="w-[90px] mb-4">
                {{ /if }}
                <div class="w-[60px] h-px bg-gray-300 mb-4 card-accent-line"></div>
                {{ if description }}
                <p class="text-sm text-[#696687] leading-relaxed">{{ description }}</p>
                {{ /if }}
            </a>
            {{ /card_items }}
        </div>
        {{ /if }}
    </div>
</section>