<div class="page-single-faqs">
    <!-- Section Title Start -->
    <div class="section-title">
        <h2 class="text-anime-style-2" data-cursor="-opaque">Answers to your <span>moving questions</span></h2>
    </div>
    <!-- Section Title End -->

    <!-- FAQ Accordion Start -->
    <div class="faq-accordion" id="faqaccordion">

        @foreach ($faqs as $key => $data)
        <!-- FAQ Item Start -->
        <div class="accordion-item wow fadeInUp" data-wow-delay="0.2s">
            <h2 class="accordion-header" id="heading{{ $key + 1 }}">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ $key + 1 }}" aria-expanded="true" aria-controls="collapse{{ $key + 1 }}">
                {{ $data->question }}
                </button>
            </h2>
            <div id="collapse{{ $key + 1 }}" class="accordion-collapse collapse" aria-labelledby="heading{{ $key + 1 }}" data-bs-parent="#faqaccordion">
                <div class="accordion-body">
                    <p>{{ $data->answer }}</p>
                </div>
            </div>
        </div>
        <!-- FAQ Item End -->

        @endforeach


    </div>
    <!-- FAQ Accordion End -->
</div>