@extends('frontend.layouts.app')

@section('title', 'About Us - I Am Happy Healthcare Platform')

@section('content')
    <!--Page Title-->

    <section class="page-title" style="background-image:url({{ asset('img/PhotoRoom1.webp') }});">

        <div class="auto-container">

            <h1 class="text-dark">FAQs</h1>

            <ul class="bread-crumb clearfix">

                <li><a href="{{ route('home') }}" class="text-dark">Home</a></li>

                <li class="text-dark">FAQs</li>

            </ul>

        </div>

    </section>

    <!--End Page Title-->


    <section class="faq-section" style="margin-top:-30px;">
        <div class="auto-container">
            <!-- Sec Title -->
            <div class="sec-title text-center">
                <span class="title">FAQ'S</span>
                <!-- <h2>General <span>Questions</span></h2> -->
            </div>

            <div class="row clearfix" style="margin-top:0px;">
                <!-- Content Column -->
                <div class="content-column col-lg-12 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <!--Accordian Box-->
                        <ul class="accordion-box" style="margin-top:15px;">
                            <!--Block-->

                            @foreach ($faq as $index => $item)
                                <li class="accordion block wow fadeInUp animated animated"
                                    style="visibility: visible; animation-name: fadeInUp;">
                                    <div class="acc-btn active">
                                        <div class="icon-outer"><span class="icon icon-plus fa fa-angle-down"></span> </div>
                                        {{ $item->question }}
                                    </div>
                                    <div class="acc-content">
                                        <div class="content">
                                            <div class="text" style="color:black;">
                                                <p style="margin-left:48px; text-align:justify"><span
                                                        style="font-family:Calibri,sans-serif">{{ $item->answer }}</span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>


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