@extends('vendor.site-bases.website.layouts.master')

@section('title', trans('title.faq'))

@section('page_title', trans('title.faq'))

@section('breadcrumbs')
    {!! Breadcrumbs::render('faq') !!}
@endsection

@section('content')
    <section class="faq_section container">
        <div class="video middle" data-url="@lang('site.faq_video')">
            <img src="https://citadeli.com/upload/about/Di5liOjl24a2R9yh.png" alt="@lang('site.faq')">
            <div class="overlay">
                <div class="play_button">
                    <img src="{{ asset('assets/client/images/play.svg') }}" alt="">
                </div>
            </div>
        </div>
        <div class="video_modal">
            <div class="bg"></div>
            <div class="video_in">
                <iframe width="100%" height="100%" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>
        <div class="faqs">
            <h4>
                @lang('site.faq')
            </h4>
            @foreach ($faq as $item)
                <div class="faq">
                    <div class="faq_title">
                        <h3>
                            {{ $item->title }}
                        </h3>
                        <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 16 16">
                            <path id="Path_4635" data-name="Path 4635" d="M10,2a8,8,0,1,1-8,8A8,8,0,0,1,10,2Zm0,14.4A6.4,6.4,0,1,0,3.6,10,6.4,6.4,0,0,0,10,16.4Zm.8-6.4h2.4L10,13.2,6.8,10H9.2V6.8h1.6Z" transform="translate(-2 -2)"/>
                        </svg>

                    </div>
                    <div class="faq_content">
                        {!! $item->description !!}
                    </div>
                </div>
            @endforeach
        </div>
    </section>
@endsection