@extends('front.layout.app')
@section('title', 'Contact Us')
@section('content')
    <style>
        .contactPage {
            padding: 70px 180px;
        }
        .cntctHead p {
            font-size: 100%;
            color: #444;
            font-weight: 400;
            margin-bottom: 20px;
        }
        .cntctForm form input {
            width: 100%;
            height: 46px;
            border: solid 1px #bbb;
            background: transparent;
            font-size: 100%;
            font-weight: 500;
            font-style: italic;
            padding: 0 15px;
            margin-bottom: 1.875em;
        }
        .cntctForm form .themeBtn {
            padding: 1em 3em;
            font-weight: 700;
            background-color: #3D3D3D;
            font-size: 0.8125em;
            text-transform: uppercase;
            border-radius: 0;
        }
        .cntctForm form textarea {
            width: 100%;
            height: 46px;
            border: solid 1px #bbb;
            background: transparent;
            font-size: 100%;
            font-weight: 500;
            font-style: italic;
            padding: 15px 15px;
            min-height: 240px;
            margin-bottom: 1.575em;
        }
        .cntctHead p b {
            font-weight: 600;
            color: #000;
        }
        .cntctHead h2 {
            color: #000000;
            font-size: 2.375em;
            font-weight: 600;
            margin-bottom: 20px;
        }
        .cntctForm h2 {
            color: #000000;
            font-size: 2.375em;
            font-weight: 600;
            margin-bottom: 20px;
        }
        .cntctForm button {
            color: #000000;
        }
        @media (max-width: 767.98px){
            .contactPage {
                padding: 30px 0;
            }
        }

    </style>

<br><br>
        <section>
            <div class="container">
                <h2>Frequently Ask Questions</h2>
                {{-- <p>Click on the collapsible panel to open and close it.</p> --}}
                {{-- {{ dd($faq) }} --}}
                @foreach ($faq as $item)
                    <div class="panel-group">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" href="#collapse{{ $item->id }}"> {{ $item->title }} </a>
                            </h4>
                            </div>
                            <div id="collapse{{ $item->id }}" class="panel-collapse collapse">
                                <ul class="list-group">
                                    <li class="list-group-item"> {!! $item->description !!} </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                @endforeach

              </div>
        </section>
        <br>
        <br>
        <br><br><br><br><br><br><br>

@endsection