@extends('website.layouts.app')
@section('content')
<!--************************************* header *************************************-->
	<section class="inner_banner px-md-5 px-0">
		<div class="container-fluid">
    @include('website.layouts.appoinment_btn')
			<div class="inner_banner_bg gallery_banner p-sm-5 p-3">
    @include('website.layouts.head_nav')
				<nav data-aos="fade-up" class="w-100 float-start my-md-5 my-sm-4 my-0 justify-content-sm-start justify-content-center d-flex order-sm-1 order-2" style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
					<ol class="breadcrumb m-0">
						<li class="breadcrumb-item"><a class="trs" href="/">Home</a></li>
						<li class="breadcrumb-item active" aria-current="page">Insurance</li>
					</ol>
				</nav>
				<div data-aos="fade-up" class="w-100 row align-items-sm-center align-items-start order-sm-2 order-1">
					<h1 class="inner_title text-xl-center text-sm-start text-center">Insurance</h1>
				</div>
			</div>
		</div>
	</section>
	<section class="about gallery px-md-5 px-0 mb-5">
		<div class="container-fluid">
			<h3 class="mb-5">We <span>Accept </span> </h3>
			<div class="row gy-5">

				@foreach($brands as $brnd)
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-4">
                    <div class="insurance-details-bx text-center d-flex flex-column align-items-center position-relative p-4 pt-5 p-xxl-5" data-aos="fade-up">
						
						<div class="w-100 rounded-5 p-4 bg-white">
							<img src="{{ asset('uploads/brand_image/'.$brnd->brand_image) }}" class="img-fluid insurance-logo mb-4">
							<div class="insurance-mini-detail  w-100">
								<h5 class="text-dark fs-4">{{ $brnd->brand_name }}</h5>
							</div>
						</div>
                    </div>
                </div>
                @endforeach

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



  @endsection


@push("custom-js")
<!--************************************* js **********************************-->
	<script type="text/javascript" src="{{ asset('website/js/swiper-bundle.min.js') }}"></script>
	<script type="text/javascript" src="{{ asset('website/js/touchSwipe.min.js') }}"></script>
    <script>$(document).ready(function(){$(".carousel-inner").swipe({swipeLeft:function(event,direction,distance,duration,fingerCount){$(this).parent().carousel('next')},swipeRight:function(){$(this).parent().carousel('prev')},threshold:0})});</script>
@endpush