
<script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                },
            },
        };
    </script>
    <!-- <main class="fade-in relative flex flex-col justify-center overflow-hidden bg-white"> -->
        <!-- <div class="w-full mx-auto px-4 md:px-6 py-12 border-t-2"> -->

            <!-- <h1 class="text-3xl lg:text-4xl font-normal tracking-tight text-black pt-12">Frequently Asked Questions</h1> -->

            <!-- Accordion component -->
            <!-- <div class="divide-y divide-white/50 my-10"> -->
                <!-- Accordion item -->
                <div x-data="{ expanded: false }" class="py-2">
                    <h2>
                        <button
                            id="faqs-title-01"
                            type="button"
                            class="flex items-center justify-between w-full text-left font-semibold py-2 px-4 border rounded-lg"
                            @click="expanded = !expanded"
                            :aria-expanded="expanded"
                            aria-controls="faqs-text-01"
                        >
                            <span class="">{{ question }}</span>
                            <svg class="shrink-0 ml-8"  fill="gray" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                            </svg>
                        </button>
                    </h2>
                    <div
                        id="faqs-text-01"
                        role="region"
                        aria-labelledby="faqs-title-01"
                        class="grid text-sm overflow-hidden transition-all duration-300 ease-in-out"
                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                        >
                        <div class="overflow-hidden">
                            {% if description %} 
                            <p class="py-3 px-4 text-base font-light">
                                {{ description }} 
                            </p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            <!-- </div>                                                                                              
    </div> -->
            <!-- End: Accordion component -->

        <!-- </div>
    </main> -->



   
