{{# Text with Image Section #}}
<section class="py-16 full-bleed {{ bg_color == 'light' ? 'bg-[#f7f8fa]' : 'bg-white' }}">
    <div class="max-w-6xl mx-auto">
        <div class="flex flex-col {{ image_position == 'right' ? 'md:flex-row' : 'md:flex-row-reverse' }} items-center gap-10 lg:gap-16">
            <div class="md:w-1/2" data-aos="{{ image_position == 'right' ? 'fade-right' : 'fade-left' }}">
                {{ if title }}
                <h2 class="font-nunito text-2xl md:text-3xl font-bold text-[#252a3f] mb-6 title-underline">
                    {{ title }}
                </h2>
                {{ /if }}
                {{ if body }}
                <div class="text-[#696687] leading-relaxed space-y-4">
                    {{ body }}
                </div>
                {{ /if }}
            </div>
            {{ if image }}
            <div class="md:w-1/2" data-aos="{{ image_position == 'right' ? 'fade-left' : 'fade-right' }}">
                <img src="{{ image:url }}" alt="{{ title }}" class="w-full max-w-lg mx-auto float-bob">
            </div>
            {{ /if }}
        </div>
    </div>
</section>