@include('public_area.layouts.header_include')

@include('public_area.layouts.aside_include')

@include('public_area.layouts.navbar_include')


<section class="mt-3 mb-3">
   <div class="container">
      <div class="row">
         <div class="col-md-12">
            <div class="tabbable">
               <ul class="nav nav-tabs" id="myTab" role="tablist">
                 
                  <li class="nav-item">
                     <a class="md-ripples nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Credit Card</a>
                  </li>
                  <li class="nav-item">
                     <a class="md-ripples nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Education</a>
                  </li>
                  <li class="nav-item">
                      <a class="md-ripples nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Electricity</a>
                  </li>
                  <li class="nav-item">
                      <a class="md-ripples nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Gas</a>
                  </li>
                  <li class="nav-item">
                      <a class="md-ripples nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Government Fees</a>
                  </li>
                  <li class="nav-item">
                      <a class="md-ripples nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Internet</a>
                  </li>
                  <li class="nav-item">
                    <a class="md-ripples nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Telephone</a>
                 </li>
                 <li class="nav-item">
                    <a class="md-ripples nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Water</a>
                 </li>
                 
               </ul>
            </div>
         </div>
      </div>
   </div>
</section>

<section>
  <div class="wrapper">
    <div class="carousel owl-carousel">
       <div class="md-ripples card">
         <img src="banner/ready_food/B2.jpg" alt="">
       </div>
       <div class="md-ripples card">
         <img src="banner/ready_food/B3.jpg" alt="">
       </div>
       <div class="md-ripples card">
         <img src="banner/ready_food/B4.jpg" alt="">
       </div>
       <div class="md-ripples card">
         <img src="banner/ready_food/B5.jpg" alt="">
       </div>
       <div class="md-ripples card">
         <img src="banner/ready_food/B8.jpeg" alt="">
       </div>
       <div class="md-ripples card">
         <img src="banner/ready_food/B14.jpeg" alt="">
       </div>
       <div class="md-ripples card">
         <img src="banner/ready_food/B16.jpeg" alt="">
       </div>
       <div class="md-ripples card">
         <img src="banner/ready_food/B18.jpeg" alt="">
       </div>
       <div class="md-ripples card">
         <img src="banner/ready_food/B12.jpeg" alt="">
       </div>

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

<section>
   <div class="wrapper">
     <div class="carousel owl-carousel">
        <div class="md-ripples card">
          <img src="banner/homechief/B1.jpg" alt="">
        </div>
        <div class="md-ripples card">
          <img src="banner/homechief/B2.jpg" alt="">
        </div>
        <div class="md-ripples card">
          <img src="banner/homechief/B3.jpg" alt="">
        </div>
        <div class="md-ripples card">
          <img src="banner/homechief/B4.jpg" alt="">
        </div>
        <div class="md-ripples card">
          <img src="banner/homechief/B5.jpg" alt="">
        </div>
       
 
     </div>
  </div>
 </section>

 <section>
   <div class="wrapper">
     <div class="carousel owl-carousel">
        <div class="md-ripples card">
          <img src="banner/money_transfer/B1.jpg" alt="">
        </div>
        <div class="md-ripples card">
          <img src="banner/money_transfer/B2.jpg" alt="">
        </div>
        <div class="md-ripples card">
          <img src="banner/money_transfer/B3.jpg" alt="">
        </div>
        <div class="md-ripples card">
          <img src="banner/money_transfer/B4.jpg" alt="">
        </div>
        <div class="md-ripples card">
          <img src="banner/money_transfer/B5.jpg" alt="">
        </div>
        <div class="md-ripples card">
          <img src="banner/money_transfer/B6.jpg" alt="">
        </div>
        <div class="md-ripples card">
          <img src="banner/money_transfer/B7.jpg" alt="">
        </div>
     </div>
  </div>
 </section>


@include('public_area.layouts.footer_include')

<script>
  $(".carousel").owlCarousel({
    margin: 20,
    loop: true,
    autoplay: true,
    autoplayTimeout: 5000,
    autoplayHoverPause: true,
    responsive: {
      0:{
        items:1,
        nav: false
      },
      600:{
        items:1,
        nav: false
      },
      800:{
        items:1,
        nav: false
      },
      1000:{
        items:3,
        nav: false
      }
    }
  });
</script>