@extends('front/layout')
@section('page_title','Faqs-test')
@section('container')

      <main id="main_faq">
        
         <section id="faqs" class="faqs" data-aos="fade-up">
            <div class="container">
                
               <div class="tab-content">
                  <div class="tab-pane active show" id="tab-1-8th">
                     <div class="container">
                        <div class="row gy-4">
                           <div class="col-lg-12 order-2 order-lg-1 p-0" data-aos="fade-up" data-aos-delay="100">
                              <div class="tab-pane fade show active pt-4" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                                 <div class="d-flex align-items-start">
                                    <ul class="nav flex-column nav-pills me-3 tabs-left" id="v-pills-tab" role="tablist" aria-orientation="vertical">									
                                       <li class="nav-link active" id="v-pills-1-tab" data-bs-toggle="pill" data-bs-target="#v-pills-1" type="button" role="tab" aria-controls="v-pills-1" aria-selected="true">Bridge Course</li>
                                       <li class="nav-link" id="v-pills-2-tab" data-bs-toggle="pill" data-bs-target="#v-pills-2" type="button" role="tab" aria-controls="v-pills-2" aria-selected="false">Animated Slides</li>
									   <li class="nav-link" id="v-pills-7-tab" data-bs-toggle="pill" data-bs-target="#v-pills-7" type="button" role="tab" aria-controls="v-pills-7" aria-selected="false">Students</li>
                                       <li class="nav-link" id="v-pills-3-tab" data-bs-toggle="pill" data-bs-target="#v-pills-3" type="button" role="tab" aria-controls="v-pills-3" aria-selected="false">Payment</li>
                                       
									   <li class="nav-link" id="v-pills-4-tab" data-bs-toggle="pill" data-bs-target="#v-pills-4" type="button" role="tab" aria-controls="v-pills-4" aria-selected="false">Institutes</li>
                                       <li class="nav-link" id="v-pills-5-tab" data-bs-toggle="pill" data-bs-target="#v-pills-5" type="button" role="tab" aria-controls="v-pills-5" aria-selected="false">Teachers</li>
									   <li class="nav-link" id="v-pills-6-tab" data-bs-toggle="pill" data-bs-target="#v-pills-6" type="button" role="tab" aria-controls="v-pills-5" aria-selected="false">Parents</li>
									   
                                       <li class="nav-link" id="v-pills-8-tab" data-bs-toggle="pill" data-bs-target="#v-pills-8" type="button" role="tab" aria-controls="v-pills-8" aria-selected="false">About us</li>
                                    </ul>
                                    <!--tab content start-->
                                    <div class="tab-content sub-tab" id="v-pills-tabContent">
                                       <!--1-->
                                       <div class="tab-pane fade show active" id="v-pills-1" role="tabpanel" aria-labelledby="v-pills-1-tab">
                                          <div class="row">
                                             <div class="col-lg-12">
                                                <div class="sub-tab-content">
                                                   <h1>Bridge Course</h1>
                                                   <div class="accordion accordion-flush px-xl-5" id="faqlist_Bridge">
		<!--Use a unique id (faqlist_Bridge) like above in 2 places, also change pill-1 numbers-->
                                                                                                          </div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                       <!--1 end-->
                                       <!--2-->
                                       <div class="tab-pane fade" id="v-pills-2" role="tabpanel" aria-labelledby="v-pills-2-tab">
                                          <div class="row">
                                             <div class="col-lg-12">
                                                <div class="sub-tab-content">
                                                   <h1>Animated Slides</h1>
                                                   <div class="accordion accordion-flush px-xl-5" id="faqlist_Animated">
                                                                                          
                                                    </div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                       <!--2 end-->
									   
									   <!--7-->
                                        <div class="tab-pane fade" id="v-pills-7" role="tabpanel" aria-labelledby="v-pills-7-tab">
                                          <div class="row">
                                             <div class="col-lg-12">
                                                <div class="sub-tab-content">
                                                   <h1>Students</h1>
                                                   <div class="accordion accordion-flush px-xl-5" id="faqlist_students">
                                                                                             
                                                    </div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                       <!--7 end-->
									   
                                       <!--3-->
                                       <div class="tab-pane fade" id="v-pills-3" role="tabpanel" aria-labelledby="v-pills-3-tab">
                                          <div class="row">
                                             <div class="col-lg-12">
                                                <div class="sub-tab-content">
                                                   <h1>Payment</h1>
                                                   <div class="accordion accordion-flush px-xl-5" id="faqlist_payment">
                                                                                             
                                                    </div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                       <!--3 end-->
                                       <!--4-->
                                       <div class="tab-pane fade" id="v-pills-4" role="tabpanel" aria-labelledby="v-pills-4-tab">
                                          <div class="row">
                                             <div class="col-lg-12">
                                                <div class="sub-tab-content">
                                                   <h1>Institutes</h1>
                                                   <div class="accordion accordion-flush px-xl-5" id="faqlist_Institutes">
                                                                                            
                                                    </div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                       <!--4 end-->
                                       <!--5-->
                                        <div class="tab-pane fade" id="v-pills-5" role="tabpanel" aria-labelledby="v-pills-5-tab">
                                          <div class="row">
                                             <div class="col-lg-12">
                                                <div class="sub-tab-content">
                                                   <h1>Teachers</h1>
                                                   <div class="accordion accordion-flush px-xl-5" id="faqlist_Teachers">
                                                                                             
                                                    </div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                       <!--5 end-->
									   
									   <!--6-->
                                        <div class="tab-pane fade" id="v-pills-6" role="tabpanel" aria-labelledby="v-pills-6-tab">
                                          <div class="row">
                                             <div class="col-lg-12">
                                                <div class="sub-tab-content">
                                                   <h1>Parents</h1>
                                                   <div class="accordion accordion-flush px-xl-5" id="faqlist_Parents">
                                                                                             
                                                    </div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                       <!--6 end-->
									   
									   
									   
                                       <!--8-->
                                       <div class="tab-pane fade" id="v-pills-8" role="tabpanel" aria-labelledby="v-pills-8-tab">
                                          <div class="row">
                                             <div class="col-lg-12">
                                                <div class="sub-tab-content">
                                                   <h1>About Us</h1>
                                                   <div class="accordion accordion-flush px-xl-5" id="faqlist_AboutUs">
                                                                                             
                                                    </div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                       <!--8 end-->									   
									   

                                    </div>
                                    <!--tab content end-->
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <!-- End Tab Content 1 -->
                 
               </div>
            </div>
         </section>
         <!-- End Features Section -->
      </main>
      <!-- End #main -->
@endsection