

    <section id="faq" class="bg-dark py-24 px-6 relative overflow-hidden  rounded-[40px] ">

     <div class="absolute -bottom-24 -right-24 w-[600px] h-[600px] bg-white/10 rounded-full blur-[120px] pointer-events-none"></div>

        <div class="absolute inset-0 pointer-events-none opacity-[0.08]"
            style="background-image: radial-gradient(#ffffff 1px, transparent 1px); background-size: 32px 32px;">
        </div>
        

        <div class="container mx-auto max-w-4xl">
            <div class="text-center mb-14" data-aos="fade-up">
                <span class="font-body text-[10px] uppercase tracking-[0.6em] text-brandOrange font-black block mb-4">Support Intelligence</span>
                <h2 class=" text-4xl md:text-5xl font-[400] text-white tracking-tighter">Common <span class="text-brandOrange">Questions.</span></h2>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12">
                <?php foreach (array_chunk($faqs, 5) as $column): ?>
                    <div class="space-y-2">
                        <?php foreach ($column as $faq): ?>
                            <div class="group border-b border-white/5 transition-all duration-500 hover:border-brandOrange/30">
                                <details class="cursor-pointer">
                                    <summary class="flex items-center justify-between py-7 list-none outline-none">
                                        <h3 class=" text-base font-[400] text-white/80 group-hover:text-white transition-colors tracking-wide">
                                            <?php echo $faq['q']; ?>
                                        </h3>
                                        <i data-lucide="plus" class="w-4 h-4 text-brandOrange transition-transform duration-500 group-open:rotate-45 ml-4"></i>
                                    </summary>
                                    <div class="pb-8 pr-6">
                                        <p class="font-body text-[14px] text-white/70 font-light leading-relaxed">
                                            <?php echo $faq['a']; ?>
                                        </p>
                                    </div>
                                </details>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>

       
    </section>
