 @include('header')
 <style>.card-style3 .card-body h3 a:hover{color:#1dbf73 !important}</style>
<section class="page-title-section bg-img cover-background theme-overlay" data-overlay-dark="8"data-background="{{ asset('assets/images/bread.jpg') }}" style="background-image: url('{{ asset('assets/images/bread.jpg') }}');">
            <div class="container">

                <div class="row">
                    <div class="col-md-12">
                        <h1>Our Faq's</h1>
                    </div>
                    <div class="col-md-12">
                        <ul>
                            <li><a href="{{ url('/') }}">Home</a></li>
                            <li><a href="{{route('faq')}}">Faqs</a></li>
                        </ul>
                    </div>
                </div>

            </div>
        </section>
         <!-- FAQ 1 - Bootstrap Brain Component -->
<section class="py-5" >
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="display-5 fw-bold " style="color:#1dbf73!important;">Frequently Asked Questions</h2>
      <p class="lead text-muted">Find quick answers to the most common questions about our medical billing services.</p>
    </div>

    <div class="accordion accordion-flush bg-light p-3" id="faqAccordion">
      @foreach($faqs as $index => $faq)
        <div class="accordion-item bg-white border-0 shadow-sm mb-3 rounded-4">
          <h2 class="accordion-header" id="faqHeading{{ $index }}">
            <button class="accordion-button fw-semibold d-flex justify-content-between align-items-center {{ $index !== 0 ? 'collapsed' : '' }}" 
                    type="button" 
                    data-bs-toggle="collapse" 
                    data-bs-target="#faqCollapse{{ $index }}" 
                    aria-expanded="{{ $index === 0 ? 'true' : 'false' }}" 
                    aria-controls="faqCollapse{{ $index }}">
              {{ $faq->question }}
           
            </button>
          </h2>
          <div id="faqCollapse{{ $index }}" 
               class="accordion-collapse collapse {{ $index === 0 ? 'show' : '' }}" 
               aria-labelledby="faqHeading{{ $index }}" 
               data-bs-parent="#faqAccordion">
            <div class="accordion-body">
              {!! nl2br(e($faq->answer)) !!}
            </div>
          </div>
        </div>
      @endforeach
    </div>
  </div>
</section>
 @include('footer')
