@if(count($faqs))
<section class="wpo-faq-section pb-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="wpo-section-title">
                    <h2>{{ __('general.Faq_heading') }}</h2>
                    <p>{{ __('footer.faq_sub_heading') }}</p>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="wpo-faq-section">
                    <div class="row">
                        <div class="col-lg-8 col-12">
                            <div class="wpo-benefits-item">
                                <div class="accordion" id="FAQAccordion">
                                    @foreach($faqs as $faq)
                                    <div class="accordion-item">
                                        <h3 class="accordion-header" id="heading{{$loop->index}}">
                                            <button class="accordion-button @if(!$loop->first) collapsed @endif" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{$loop->index}}" @if($loop->first) aria-expanded="true" @else aria-expanded="false" @endif aria-controls="collapse{{$loop->index}}">
                                                {{ $faq->question }}
                                            </button>
                                        </h3>
                                        <div id="collapse{{$loop->index}}" class="accordion-collapse collapse @if($loop->first) show @endif" aria-labelledby="heading{{$loop->index}}" data-bs-parent="#FAQAccordion">
                                            <div class="accordion-body">
                                                <p>{!! $faq->answer !!}</p>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-12">
                            <div class="banner--faq">
                                <img src="{{asset('/')}}assets/images/img-2.jpg">
{{--                                <div class="des--block--faq">--}}
{{--                                    <p>All Faq About Egypt</p>--}}
{{--                                    <a href="#"> Read All Faq </a>--}}
{{--                                </div>--}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 d-none">
                <div class="banner-faq">
                    <img src="{{asset('assets/images/faq-banner.jpg')}}" width="100%">
                </div>
            </div>
        </div>
    </div>
</section>
@endif