@extends('layouts.main')
@section('main-section')
<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url(assets/images/banner/banner.jpg);">
    <div class="container">
        <div class="banner-inner text-white">
            <h2 class="page-title mb-10" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">Vehicles</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-center mb-20" data-aos="fade-right" data-aos-delay="200" data-aos-duration="1500" data-aos-offset="50">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item active">Vehicles</li>
                </ol>
            </nav>
        </div>
    </div>
</section>
<section class="features-tour-area pt-100 rel z-1">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <div class="section-title text-center counter-text-wrap mb-50" data-aos="fade-up"
                    data-aos-duration="1500" data-aos-offset="50">
                    <h2>Our Vehicles</h2>
                    <p>We have a Large Accomodation of Vehicles</p>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">

            @foreach($vehicles as $vehicle)
            <div class="col-xl-4 col-lg-4 col-md-6">
                <div class="destination-item style-four no-border" data-aos="flip-left" data-aos-duration="1500"
                    data-aos-offset="50">
                    <div class="image">
                        <a href="#" class="heart"><i class="fas fa-heart"></i></a>
                        <img style="height:350px;width:100%;object-fit:cover;"  src="{{asset('uploads/post/'.$vehicle->image)}}" alt="Tour">
                    </div>
                    <div class="content">
                        <h6><a href="/vehicle">{{$vehicle->name}}</a></h6>
                    </div>
                    <div class="destination-footer">
                        <div class="ratting">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                        </div>
                    </div>
                    <a href="tel:9958707662" class="theme-btn style-three">
                        <span data-hover="Explore">Make a Call</span>
                        <i class="fal fa-arrow-right"></i>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endsection