{{# About Page Template #}}

{{# Hero with parallax #}}
<section class="relative hero-section overflow-hidden" style="background: url('/assets/articles/uploads/2021/09/pic_paralax_2.jpg') center/cover no-repeat fixed;">
    <div class="absolute inset-0 bg-[#3b3663]/35"></div>
    <div class="relative z-10 px-6 lg:px-[90px] pt-32 md:pt-36 pb-16">
        <div class="max-w-4xl mx-auto text-center text-white">
            <h1 class="font-nunito text-3xl md:text-4xl font-bold mb-4" data-aos="fade-down">{{ hero_title ?? title }}</h1>
            {{ if hero_subtitle }}
            <p class="text-lg text-white/80" data-aos="fade-up" data-aos-delay="150">{{ hero_subtitle }}</p>
            {{ /if }}
        </div>
    </div>
</section>

{{# Content #}}
<section class="py-12">
    <div class="max-w-4xl mx-auto">
        {{ if content }}
        <div class="prose prose-lg max-w-none" data-aos="fade-up">
            {{ content }}
        </div>
        {{ /if }}
    </div>
</section>

{{# Features / Key Points #}}
{{ if features }}
<section class="py-14 full-bleed bg-white">
    <div class="max-w-6xl mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {{ features }}
            <div class="card-service text-center p-8 bg-[#fefeff] rounded-xl shadow-[0_0_40px_3px_rgba(0,0,0,0.06)]"
                 data-aos="fade-up" data-aos-delay="{{ index | multiply:100 }}">
                {{ if icon }}
                <div class="icon-hover w-16 h-16 rounded-full bg-[#6254e7]/10 flex items-center justify-center mx-auto mb-5">
                    <i class="{{ icon }} text-2xl text-[#6254e7]"></i>
                </div>
                {{ /if }}
                <h3 class="font-nunito text-lg font-bold text-[#252a3f] mb-2">{{ feature_title }}</h3>
                <p class="text-sm text-[#696687]">{{ feature_description }}</p>
            </div>
            {{ /features }}
        </div>
    </div>
</section>
{{ /if }}