@extends('layouts.layout')

@section('content')
    <!--  section  -->
    <section class="parallax-section single-par" data-scrollax-parent="true">
        <div class="bg par-elem " data-bg="{{ asset('assets/images/awards-page-header-image.webp') }}"
            data-scrollax="properties: { translateY: '30%' }"></div>
        <div class="overlay op7"></div>
        <div class="container">
            <div class="section-title center-align big-title">
                <h2><span>FAQs</span></h2>
                <span class="section-separator"></span>
                <div class="breadcrumbs fl-wrap"><a href="{{ route('home.index') }}">Home</a><span>FAQs</span>
                </div>
            </div>
        </div>
        <div class="header-sec-link">
            <a href="#sec1" class="custom-scroll-link"><i class="fal fa-angle-double-down"></i></a>
        </div>
    </section>
    <!--  section  end-->

    <section>
        <div class="container">
            <div class="section-title">
                <h2> FAQs</h2>
                <div class="section-subtitle">Common Questions</div>
                <span class="section-separator"></span>
                <p></p>
            </div>

            <div class="accordion mar-top" id="sec3">
                @forelse ($result as $faq)
                    <a class="toggle act-accordion" href="#"> {{ $faq->title }}<span></span></a>
                    <div class="accordion-inner visible" style="display: none;">
                        {!! $faq->content !!}
                    </div>
                @empty

                @endforelse
            </div>
        </div>
    </section>
@endsection