@extends('user.layouts.master')
@section('faq-active', 'active')
@section('content')
    <style>
        /* height: 0 !important;
        padding-top: 20rem !important;
        background-color: black; */
        .mt-10 {
            margin-top: 3%;
        }

        .mt-1 {
            margin-top: 1%;
        }

        .mb--8 {
            margin-bottom: -8% !important;
        }

        .mb-5 {
            margin-bottom: 5%;
        }

        .mb-20 {
            margin-bottom: 20%;
        }

        .mb-10 {
            margin-bottom: 10%;
        }

        .ml-5 {
            margin-left: 5%;

        }

        .fs-12 {
            font-size: 16px !important;
        }

        .card {
            background: linear-gradient(to left, #8096e5, #283c86) !important;
            color: #fff;
            /* height: 29vh; */
            border-radius: 20px;

        }

        .heading h4 {
            padding-top: 5%;
            text-align: center;
            color: #fff;
            font-size: 24px;
        }

        .content {
            /* margin-top: 5%; */
            /* text-align: center; */
            color: #fff;
            font-size: 20px;
            /* margin-bottom: 10px !important; */
        }

        .readmore {
            color: black;
            font-weight: bold;
            text-decoration: none;
            margin-left: 30px;
        }

        .readmore:hover {
            color: white;
        }

        .full-detail-description p {
            margin-bottom: 5px !important;
        }

        .card-body {
            padding: 0 0 !important;
        }

        .arrow {
            font-size: 3rem;
            margin-left: -30px;
            margin-top: 12px;
        }

        .img {
            /* height: 15rem; */
            /* margin-left: 30%; */
            margin-bottom: 15px;
        }

        .color {
            color: #ecca69 !important;
            margin-top: 50px;

        }

        .minheight {
            padding: 0px !important;
            min-height: 77vh !important;
        }

        @media only screen and (min-width: 1024px) {
            section {
                padding: 40px 0;
            }
        }

        .sidebar-wrapper {
            background: #f2f7fc !important;
        }

        .tab-content {
            padding: 1em 0 0em !important;
        }

        section {
            padding: 0px !important;
        }
        @media only screen and (min-width: 321px) and (max-width:540px) {
            .inner-header-title {
                /* padding-top: 12em; */
                text-align: center;
                color: #fff;
                overflow: visible;
                position: relative;
                /* border-bottom: 4px solid #11b719; */
                background-size: cover;
                height: 135px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

    </style>
    <section class="inner-header-title" style="background-image:url({{ asset('user/assets/img/bg.png') }}">
        <div class="container">
            <h1 class="">FAQ</h1>
        </div>
    </section>
    <section class="mt-10 mb-10 minheight">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    {{-- <img src="{{ asset('user/assets/img/warning.png') }}" alt="no internet" class="img" /> --}}
                    @foreach ($faqs as $faq)
                        {!! $faq->question !!}

                        {!! $faq->answer !!}
                        <br />
                    @endforeach

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