<?php $this->extend('layouts/master') ?>

<?php $this->section('content') ?>

<!-- Hero Section Start -->
<div class="hero">
    <div class="hero-section bg-section parallaxie">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <!-- Hero Content Start -->
                    <div class="hero-content">
                        <div class="section-title">
                            <h3 class="wow fadeInUp">welcome to JohnBull</h3>
                            <h1 class="text-anime-style-3" data-cursor="-opaque">Looking to save more on your rental car?</h1>
                            <p class="wow fadeInUp" data-wow-delay="0.25s">Whether you're planning a weekend getaway, a business trip, or just need a reliable ride for the day, we offers a wide range of vehicles to suit your needs.</p>
                        </div>

                        <div class="hero-content-body wow fadeInUp" data-wow-delay="0.5s">
                            <a href="#" class="btn-default">book a rental</a>
                            <a href="#" class="btn-default btn-highlighted">learn more</a>
                        </div>
                    </div>
                    <!-- Hero Content End -->
                </div>
            </div>
        </div>
    </div>

</div>
<!-- Hero Section End -->

<!-- Our Services Section Start -->
<div class="our-services bg-section">
    <div class="container">
        <div class="row section-row">
            <div class="col-lg-12">
                <!-- Section Title Start -->
                <div class="section-title">
                    <h3 class="wow fadeInUp">our services</h3>
                    <h2 class="text-anime-style-3" data-cursor="-opaque">Explore our wide range of rental services</h2>
                </div>
                <!-- Section Title End -->
            </div>
        </div>

        <div class="row">
            <div class="col-lg-3 col-md-6">
                <!-- Service Item Start -->
                <div class="service-item wow fadeInUp">
                    <div class="icon-box">
                        <img src="/assets/images/icon-service-1.svg" alt="">
                    </div>
                    <div class="service-content">
                        <h3>car rental with driver</h3>
                        <p>Enhance your rental experience with additional options.</p>
                    </div>
                    <div class="service-footer">
                        <a href="#" class="section-icon-btn"><img src="/assets/images/arrow-white.svg" alt=""></a>
                    </div>
                </div>
                <!-- Service Item End -->
            </div>

            <div class="col-lg-3 col-md-6">
                <!-- Service Item Start -->
                <div class="service-item wow fadeInUp" data-wow-delay="0.25s">
                    <div class="icon-box">
                        <img src="/assets/images/icon-service-2.svg" alt="">
                    </div>
                    <div class="service-content">
                        <h3>business car rental</h3>
                        <p>Enhance your rental experience with additional options.</p>
                    </div>
                    <div class="service-footer">
                        <a href="#" class="section-icon-btn"><img src="/assets/images/arrow-white.svg" alt=""></a>
                    </div>
                </div>
                <!-- Service Item End -->
            </div>

            <div class="col-lg-3 col-md-6">
                <!-- Service Item Start -->
                <div class="service-item wow fadeInUp" data-wow-delay="0.5s">
                    <div class="icon-box">
                        <img src="/assets/images/icon-service-3.svg" alt="">
                    </div>
                    <div class="service-content">
                        <h3>airport transfer</h3>
                        <p>Enhance your rental experience with additional options.</p>
                    </div>
                    <div class="service-footer">
                        <a href="#" class="section-icon-btn"><img src="/assets/images/arrow-white.svg" alt=""></a>
                    </div>
                </div>
                <!-- Service Item End -->
            </div>

            <div class="col-lg-3 col-md-6">
                <!-- Service Item Start -->
                <div class="service-item wow fadeInUp" data-wow-delay="0.75s">
                    <div class="icon-box">
                        <img src="/assets/images/icon-service-4.svg" alt="">
                    </div>
                    <div class="service-content">
                        <h3>chauffeur services</h3>
                        <p>Enhance your rental experience with additional options.</p>
                    </div>
                    <div class="service-footer">
                        <a href="#" class="section-icon-btn"><img src="/assets/images/arrow-white.svg" alt=""></a>
                    </div>
                </div>
                <!-- Service Item End -->
            </div>

            <div class="col-lg-12">
                <!-- Service Box Footer Start -->
                <div class="services-box-footer wow fadeInUp" data-wow-delay="1s">
                    <p>Discover our range of car rental services designed to meet all your travel needs. From a diverse fleet of vehicles to flexible rental plans.</p>
                    <a href="#" class="btn-default">view all service</a>
                </div>
                <!-- Service Box Footer End -->
            </div>
        </div>
    </div>
</div>
<!-- Our Services Section End -->


<!-- Perfect Fleets Section Start -->
<div class="perfect-fleet bg-section">
    <div class="container-fluid">
        <div class="row section-row">
            <div class="col-lg-12">
                <!-- Section Title Start -->
                <div class="section-title">
                    <h3 class="wow fadeInUp">our fleets</h3>
                    <h2 class="text-anime-style-3" data-cursor="-opaque">Explore our perfect and extensive fleet</h2>
                </div>
                <!-- Section Title End -->
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <!-- Testimonial Slider Start -->
                <div class="car-details-slider">
                    <div class="swiper">
                        <div class="swiper-wrapper" data-cursor-text="Drag">
                            <!-- Testimonial Slide Start -->
                            <div class="swiper-slide">
                                <!-- Perfect Fleets Item Start -->
                                <div class="perfect-fleet-item">
                                    <!-- Image Box Start -->
                                    <div class="image-box">
                                        <img src="/assets/images/car-1.jpg" alt="">
                                    </div>
                                    <!-- Image Box End -->

                                    <!-- Perfect Fleets Content Start -->
                                    <div class="perfect-fleet-content">
                                        <!-- Perfect Fleets Title Start -->
                                        <div class="perfect-fleet-title">
                                            <h3>luxury car</h3>
                                            <h2>BMW M2 Car 2017</h2>
                                        </div>
                                        <!-- Perfect Fleets Content End -->

                                        <!-- Perfect Fleets Body Start -->
                                        <div class="perfect-fleet-body">
                                            <ul>
                                                <li><img src="/assets/images/icon-fleet-list-1.svg" alt="">4 passenger</li>
                                                <li><img src="/assets/images/icon-fleet-list-2.svg" alt="">4 door</li>
                                                <li><img src="/assets/images/icon-fleet-list-3.svg" alt="">bags</li>
                                                <li><img src="/assets/images/icon-fleet-list-4.svg" alt="">auto</li>
                                            </ul>
                                        </div>
                                        <!-- Perfect Fleets Body End -->

                                        <!-- Perfect Fleets Footer Start -->
                                        <div class="perfect-fleet-footer">
                                            <!-- Perfect Fleets Pricing Start -->
                                            <div class="perfect-fleet-pricing">
                                                <h2>$280<span>/day</span></h2>
                                            </div>
                                            <!-- Perfect Fleets Pricing End -->

                                            <!-- Perfect Fleets Btn Start -->
                                            <div class="perfect-fleet-btn">
                                                <a href="#" class="section-icon-btn"><img src="/assets/images/arrow-white.svg" alt=""></a>
                                            </div>
                                            <!-- Perfect Fleets Btn End -->
                                        </div>
                                        <!-- Perfect Fleets Footer End -->
                                    </div>
                                    <!-- Perfect Fleets Content End -->
                                </div>
                                <!-- Perfect Fleets Item End -->
                            </div>
                            <!-- Testimonial Slide End -->

                            <!-- Testimonial Slide Start -->
                            <div class="swiper-slide">
                                <!-- Perfect Fleets Item Start -->
                                <div class="perfect-fleet-item">
                                    <!-- Image Box Start -->
                                    <div class="image-box">
                                        <img src="/assets/images/car-2.jpg" alt="">
                                    </div>
                                    <!-- Image Box End -->

                                    <!-- Perfect Fleets Content Start -->
                                    <div class="perfect-fleet-content">
                                        <!-- Perfect Fleets Title Start -->
                                        <div class="perfect-fleet-title">
                                            <h3>luxury car</h3>
                                            <h2>Audi RS7 Car 2016</h2>
                                        </div>
                                        <!-- Perfect Fleets Content End -->

                                        <!-- Perfect Fleets Body Start -->
                                        <div class="perfect-fleet-body">
                                            <ul>
                                                <li><img src="/assets/images/icon-fleet-list-1.svg" alt="">4 passenger</li>
                                                <li><img src="/assets/images/icon-fleet-list-2.svg" alt="">4 door</li>
                                                <li><img src="/assets/images/icon-fleet-list-3.svg" alt="">bags</li>
                                                <li><img src="/assets/images/icon-fleet-list-4.svg" alt="">auto</li>
                                            </ul>
                                        </div>
                                        <!-- Perfect Fleets Body End -->

                                        <!-- Perfect Fleets Footer Start -->
                                        <div class="perfect-fleet-footer">
                                            <!-- Perfect Fleets Pricing Start -->
                                            <div class="perfect-fleet-pricing">
                                                <h2>$320<span>/day</span></h2>
                                            </div>
                                            <!-- Perfect Fleets Pricing End -->

                                            <!-- Perfect Fleets Btn Start -->
                                            <div class="perfect-fleet-btn">
                                                <a href="#" class="section-icon-btn"><img src="/assets/images/arrow-white.svg" alt=""></a>
                                            </div>
                                            <!-- Perfect Fleets Btn End -->
                                        </div>
                                        <!-- Perfect Fleets Footer End -->
                                    </div>
                                    <!-- Perfect Fleets Content End -->
                                </div>
                                <!-- Perfect Fleets Item End -->
                            </div>
                            <!-- Testimonial Slide End -->

                            <!-- Testimonial Slide Start -->
                            <div class="swiper-slide">
                                <!-- Perfect Fleets Item Start -->
                                <div class="perfect-fleet-item">
                                    <!-- Image Box Start -->
                                    <div class="image-box">
                                        <img src="/assets/images/perfect-fleet-img-3.png" alt="">
                                    </div>
                                    <!-- Image Box End -->

                                    <!-- Perfect Fleets Content Start -->
                                    <div class="perfect-fleet-content">
                                        <!-- Perfect Fleets Title Start -->
                                        <div class="perfect-fleet-title">
                                            <h3>luxury car</h3>
                                            <h2>Ferrari F12 Car 2022</h2>
                                        </div>
                                        <!-- Perfect Fleets Content End -->

                                        <!-- Perfect Fleets Body Start -->
                                        <div class="perfect-fleet-body">
                                            <ul>
                                                <li><img src="/assets/images/icon-fleet-list-1.svg" alt="">4 passenger</li>
                                                <li><img src="/assets/images/icon-fleet-list-2.svg" alt="">4 door</li>
                                                <li><img src="/assets/images/icon-fleet-list-3.svg" alt="">bags</li>
                                                <li><img src="/assets/images/icon-fleet-list-4.svg" alt="">auto</li>
                                            </ul>
                                        </div>
                                        <!-- Perfect Fleets Body End -->

                                        <!-- Perfect Fleets Footer Start -->
                                        <div class="perfect-fleet-footer">
                                            <!-- Perfect Fleets Pricing Start -->
                                            <div class="perfect-fleet-pricing">
                                                <h2>$450<span>/day</span></h2>
                                            </div>
                                            <!-- Perfect Fleets Pricing End -->

                                            <!-- Perfect Fleets Btn Start -->
                                            <div class="perfect-fleet-btn">
                                                <a href="#" class="section-icon-btn"><img src="/assets/images/arrow-white.svg" alt=""></a>
                                            </div>
                                            <!-- Perfect Fleets Btn End -->
                                        </div>
                                        <!-- Perfect Fleets Footer End -->
                                    </div>
                                    <!-- Perfect Fleets Content End -->
                                </div>
                                <!-- Perfect Fleets Item End -->
                            </div>
                            <!-- Testimonial Slide End -->

                            <!-- Testimonial Slide Start -->
                            <div class="swiper-slide">
                                <!-- Perfect Fleets Item Start -->
                                <div class="perfect-fleet-item">
                                    <!-- Image Box Start -->
                                    <div class="image-box">
                                        <img src="/assets/images/perfect-fleet-img-4.png" alt="">
                                    </div>
                                    <!-- Image Box End -->

                                    <!-- Perfect Fleets Content Start -->
                                    <div class="perfect-fleet-content">
                                        <!-- Perfect Fleets Title Start -->
                                        <div class="perfect-fleet-title">
                                            <h3>luxury car</h3>
                                            <h2>Toyota Yaris 2017</h2>
                                        </div>
                                        <!-- Perfect Fleets Content End -->

                                        <!-- Perfect Fleets Body Start -->
                                        <div class="perfect-fleet-body">
                                            <ul>
                                                <li><img src="/assets/images/icon-fleet-list-1.svg" alt="">4 passenger</li>
                                                <li><img src="/assets/images/icon-fleet-list-2.svg" alt="">4 door</li>
                                                <li><img src="/assets/images/icon-fleet-list-3.svg" alt="">bags</li>
                                                <li><img src="/assets/images/icon-fleet-list-4.svg" alt="">auto</li>
                                            </ul>
                                        </div>
                                        <!-- Perfect Fleets Body End -->

                                        <!-- Perfect Fleets Footer Start -->
                                        <div class="perfect-fleet-footer">
                                            <!-- Perfect Fleets Pricing Start -->
                                            <div class="perfect-fleet-pricing">
                                                <h2>$220<span>/day</span></h2>
                                            </div>
                                            <!-- Perfect Fleets Pricing End -->

                                            <!-- Perfect Fleets Btn Start -->
                                            <div class="perfect-fleet-btn">
                                                <a href="#" class="section-icon-btn"><img src="/assets/images/arrow-white.svg" alt=""></a>
                                            </div>
                                            <!-- Perfect Fleets Btn End -->
                                        </div>
                                        <!-- Perfect Fleets Footer End -->
                                    </div>
                                    <!-- Perfect Fleets Content End -->
                                </div>
                                <!-- Perfect Fleets Item End -->
                            </div>
                            <!-- Testimonial Slide End -->

                            <!-- Testimonial Slide Start -->
                            <div class="swiper-slide">
                                <!-- Perfect Fleets Item Start -->
                                <div class="perfect-fleet-item">
                                    <!-- Image Box Start -->
                                    <div class="image-box">
                                        <img src="/assets/images/perfect-fleet-img-2.png" alt="">
                                    </div>
                                    <!-- Image Box End -->

                                    <!-- Perfect Fleets Content Start -->
                                    <div class="perfect-fleet-content">
                                        <!-- Perfect Fleets Title Start -->
                                        <div class="perfect-fleet-title">
                                            <h3>luxury car</h3>
                                            <h2>Audi RS7 Car 2016</h2>
                                        </div>
                                        <!-- Perfect Fleets Content End -->

                                        <!-- Perfect Fleets Body Start -->
                                        <div class="perfect-fleet-body">
                                            <ul>
                                                <li><img src="/assets/images/icon-fleet-list-1.svg" alt="">4 passenger</li>
                                                <li><img src="/assets/images/icon-fleet-list-2.svg" alt="">4 door</li>
                                                <li><img src="/assets/images/icon-fleet-list-3.svg" alt="">bags</li>
                                                <li><img src="/assets/images/icon-fleet-list-4.svg" alt="">auto</li>
                                            </ul>
                                        </div>
                                        <!-- Perfect Fleets Body End -->

                                        <!-- Perfect Fleets Footer Start -->
                                        <div class="perfect-fleet-footer">
                                            <!-- Perfect Fleets Pricing Start -->
                                            <div class="perfect-fleet-pricing">
                                                <h2>$320<span>/day</span></h2>
                                            </div>
                                            <!-- Perfect Fleets Pricing End -->

                                            <!-- Perfect Fleets Btn Start -->
                                            <div class="perfect-fleet-btn">
                                                <a href="#" class="section-icon-btn"><img src="/assets/images/arrow-white.svg" alt=""></a>
                                            </div>
                                            <!-- Perfect Fleets Btn End -->
                                        </div>
                                        <!-- Perfect Fleets Footer End -->
                                    </div>
                                    <!-- Perfect Fleets Content End -->
                                </div>
                                <!-- Perfect Fleets Item End -->
                            </div>
                            <!-- Testimonial Slide End -->

                            <!-- Testimonial Slide Start -->
                            <div class="swiper-slide">
                                <!-- Perfect Fleets Item Start -->
                                <div class="perfect-fleet-item">
                                    <!-- Image Box Start -->
                                    <div class="image-box">
                                        <img src="/assets/images/perfect-fleet-img-3.png" alt="">
                                    </div>
                                    <!-- Image Box End -->

                                    <!-- Perfect Fleets Content Start -->
                                    <div class="perfect-fleet-content">
                                        <!-- Perfect Fleets Title Start -->
                                        <div class="perfect-fleet-title">
                                            <h3>luxury car</h3>
                                            <h2>Ferrari F12 Car 2022</h2>
                                        </div>
                                        <!-- Perfect Fleets Content End -->

                                        <!-- Perfect Fleets Body Start -->
                                        <div class="perfect-fleet-body">
                                            <ul>
                                                <li><img src="/assets/images/icon-fleet-list-1.svg" alt="">4 passenger</li>
                                                <li><img src="/assets/images/icon-fleet-list-2.svg" alt="">4 door</li>
                                                <li><img src="/assets/images/icon-fleet-list-3.svg" alt="">bags</li>
                                                <li><img src="/assets/images/icon-fleet-list-4.svg" alt="">auto</li>
                                            </ul>
                                        </div>
                                        <!-- Perfect Fleets Body End -->

                                        <!-- Perfect Fleets Footer Start -->
                                        <div class="perfect-fleet-footer">
                                            <!-- Perfect Fleets Pricing Start -->
                                            <div class="perfect-fleet-pricing">
                                                <h2>$450<span>/day</span></h2>
                                            </div>
                                            <!-- Perfect Fleets Pricing End -->

                                            <!-- Perfect Fleets Btn Start -->
                                            <div class="perfect-fleet-btn">
                                                <a href="#" class="section-icon-btn"><img src="/assets/images/arrow-white.svg" alt=""></a>
                                            </div>
                                            <!-- Perfect Fleets Btn End -->
                                        </div>
                                        <!-- Perfect Fleets Footer End -->
                                    </div>
                                    <!-- Perfect Fleets Content End -->
                                </div>
                                <!-- Perfect Fleets Item End -->
                            </div>
                            <!-- Testimonial Slide End -->

                            <!-- Testimonial Slide Start -->
                            <div class="swiper-slide">
                                <!-- Perfect Fleets Item Start -->
                                <div class="perfect-fleet-item">
                                    <!-- Image Box Start -->
                                    <div class="image-box">
                                        <img src="/assets/images/perfect-fleet-img-4.png" alt="">
                                    </div>
                                    <!-- Image Box End -->

                                    <!-- Perfect Fleets Content Start -->
                                    <div class="perfect-fleet-content">
                                        <!-- Perfect Fleets Title Start -->
                                        <div class="perfect-fleet-title">
                                            <h3>luxury car</h3>
                                            <h2>Toyota Yaris 2017</h2>
                                        </div>
                                        <!-- Perfect Fleets Content End -->

                                        <!-- Perfect Fleets Body Start -->
                                        <div class="perfect-fleet-body">
                                            <ul>
                                                <li><img src="/assets/images/icon-fleet-list-1.svg" alt="">4 passenger</li>
                                                <li><img src="/assets/images/icon-fleet-list-2.svg" alt="">4 door</li>
                                                <li><img src="/assets/images/icon-fleet-list-3.svg" alt="">bags</li>
                                                <li><img src="/assets/images/icon-fleet-list-4.svg" alt="">auto</li>
                                            </ul>
                                        </div>
                                        <!-- Perfect Fleets Body End -->

                                        <!-- Perfect Fleets Footer Start -->
                                        <div class="perfect-fleet-footer">
                                            <!-- Perfect Fleets Pricing Start -->
                                            <div class="perfect-fleet-pricing">
                                                <h2>$220<span>/day</span></h2>
                                            </div>
                                            <!-- Perfect Fleets Pricing End -->

                                            <!-- Perfect Fleets Btn Start -->
                                            <div class="perfect-fleet-btn">
                                                <a href="#" class="section-icon-btn"><img src="/assets/images/arrow-white.svg" alt=""></a>
                                            </div>
                                            <!-- Perfect Fleets Btn End -->
                                        </div>
                                        <!-- Perfect Fleets Footer End -->
                                    </div>
                                    <!-- Perfect Fleets Content End -->
                                </div>
                                <!-- Perfect Fleets Item End -->
                            </div>
                            <!-- Testimonial Slide End -->
                        </div>
                        <div class="car-details-btn">
                            <div class="car-button-prev"></div>
                            <div class="car-button-next"></div>
                        </div>
                    </div>
                </div>
                <!-- Testimonial Slider End -->
            </div>
        </div>
    </div>
</div>
<!-- Perfect Fleets Section End -->



<?= $this->endSection() ?>

