@extends('site.layouts.default')
@section('content')
  <!-- Navbar & Hero End -->
  <!-- Carousel Start -->
  <div class="header-carousel">
    <div id="carouselId" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
      <ol class="carousel-indicators">
        <li data-bs-target="#carouselId" data-bs-slide-to="0" class="active" aria-current="true" aria-label="First slide">
        </li>
        <li data-bs-target="#carouselId" data-bs-slide-to="1" aria-label="Second slide"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
          <img src="{{ asset('site/assets/img/carousel-2.jpg') }}" class="img-fluid w-100" alt="First slide" />
          <div class="carousel-caption">
            <div class="container py-4">
              <div class="row g-5">
                <div class="col-lg-6 fadeInLeft animated" data-animation="fadeInLeft" data-delay="1s"
                  style="animation-delay: 1s;">
                  <div class="bg-secondary rounded p-5">
                    <h4 class="text-white mb-4">CONTINUER LA RÉSERVATION DE VOITURE</h4>
                    <form>
                      <div class="row g-3">
                        <div class="col-12">
                          <select class="form-select" aria-label="Default select example">
                            <option selected>Sélectionnez votre type de voiture</option>
                            <option value="1">VW Golf VII</option>
                            <option value="2">Audi A1 S-Line</option>
                            <option value="3">Toyota Camry</option>
                            <option value="4">BMW 320 ModernLine</option>
                          </select>
                        </div>
                        {{-- <div class="col-12">
                          <div class="input-group">
                            <div class="d-flex align-items-center bg-light text-body rounded-start p-2">
                              <span class="fas fa-map-marker-alt"></span> <span class="ms-1">Pick Up</span>
                            </div>
                            <input class="form-control" type="text" placeholder="Enter a City or Airport"
                              aria-label="Enter a City or Airport">
                          </div>
                        </div> --}}
                        {{-- <div class="col-12">
                          <a href="#" class="text-start text-white d-block mb-2">Need a
                            different drop-off location?</a>
                          <div class="input-group">
                            <div class="d-flex align-items-center bg-light text-body rounded-start p-2">
                              <span class="fas fa-map-marker-alt"></span><span class="ms-1">Drop off</span>
                            </div>
                            <input class="form-control" type="text" placeholder="Enter a City or Airport"
                              aria-label="Enter a City or Airport">
                          </div>
                        </div> --}}
                        <div class="col-12">
                          <div class="input-group">
                            <div class="d-flex align-items-center bg-light text-body rounded-start p-2">
                              <span class="fas fa-calendar-alt"></span><span class="ms-1">Pick Up</span>
                            </div>
                            <input class="form-control" type="date">
                            <select class="form-select ms-3" aria-label="Default select example">
                              <option selected>12:00AM</option>
                              <option value="1">1:00AM</option>
                              <option value="2">2:00AM</option>
                              <option value="3">3:00AM</option>
                              <option value="4">4:00AM</option>
                              <option value="5">5:00AM</option>
                              <option value="6">6:00AM</option>
                              <option value="7">7:00AM</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-12">
                          <div class="input-group">
                            <div class="d-flex align-items-center bg-light text-body rounded-start p-2">
                              <span class="fas fa-calendar-alt"></span><span class="ms-1">Drop off</span>
                            </div>
                            <input class="form-control" type="date">
                            <select class="form-select ms-3" aria-label="Default select example">
                              <option selected>12:00AM</option>
                              <option value="1">1:00AM</option>
                              <option value="2">2:00AM</option>
                              <option value="3">3:00AM</option>
                              <option value="4">4:00AM</option>
                              <option value="5">5:00AM</option>
                              <option value="6">6:00AM</option>
                              <option value="7">7:00AM</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-12">
                          <button class="btn btn-light w-100 py-2">Réservez maintenant</button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
                <div class="col-lg-6 d-none d-lg-flex fadeInRight animated" data-animation="fadeInRight" data-delay="1s"
                  style="animation-delay: 1s;">
                  <div class="text-start">
                    <h1 class="display-5 text-white">Bénéficiez de 15% de réduction sur votre location Planifiez votre voyage maintenant</h1>
                    <p>Vous le méritez !</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <img src="{{ asset('site/assets/img/carousel-1.jpg') }}" class="img-fluid w-100" alt="First slide" />
          <div class="carousel-caption">
            <div class="container py-4">
              <div class="row g-5">
                <div class="col-lg-6 fadeInLeft animated" data-animation="fadeInLeft" data-delay="1s"
                  style="animation-delay: 1s;">
                  <div class="bg-secondary rounded p-5">
                    <h4 class="text-white mb-4">CONTINUE CAR RESERVATION</h4>
                    <form>
                      <div class="row g-3">
                        <div class="col-12">
                          <select class="form-select" aria-label="Default select example">
                            <option selected>Select Your Car type</option>
                            <option value="1">VW Golf VII</option>
                            <option value="2">Audi A1 S-Line</option>
                            <option value="3">Toyota Camry</option>
                            <option value="4">BMW 320 ModernLine</option>
                          </select>
                        </div>
                        <div class="col-12">
                          <div class="input-group">
                            <div class="d-flex align-items-center bg-light text-body rounded-start p-2">
                              <span class="fas fa-map-marker-alt"></span><span class="ms-1">Pick Up</span>
                            </div>
                            <input class="form-control" type="text" placeholder="Enter a City or Airport"
                              aria-label="Enter a City or Airport">
                          </div>
                        </div>
                        <div class="col-12">
                          <a href="#" class="text-start text-white d-block mb-2">Need a
                            different drop-off location?</a>
                          <div class="input-group">
                            <div class="d-flex align-items-center bg-light text-body rounded-start p-2">
                              <span class="fas fa-map-marker-alt"></span><span class="ms-1">Drop off</span>
                            </div>
                            <input class="form-control" type="text" placeholder="Enter a City or Airport"
                              aria-label="Enter a City or Airport">
                          </div>
                        </div>
                        <div class="col-12">
                          <div class="input-group">
                            <div class="d-flex align-items-center bg-light text-body rounded-start p-2">
                              <span class="fas fa-calendar-alt"></span><span class="ms-1">Pick Up</span>
                            </div>
                            <input class="form-control" type="date">
                            <select class="form-select ms-3" aria-label="Default select example">
                              <option selected>12:00AM</option>
                              <option value="1">1:00AM</option>
                              <option value="2">2:00AM</option>
                              <option value="3">3:00AM</option>
                              <option value="4">4:00AM</option>
                              <option value="5">5:00AM</option>
                              <option value="6">6:00AM</option>
                              <option value="7">7:00AM</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-12">
                          <div class="input-group">
                            <div class="d-flex align-items-center bg-light text-body rounded-start p-2">
                              <span class="fas fa-calendar-alt"></span><span class="ms-1">Drop off</span>
                            </div>
                            <input class="form-control" type="date">
                            <select class="form-select ms-3" aria-label="Default select example">
                              <option selected>12:00AM</option>
                              <option value="1">1:00AM</option>
                              <option value="2">2:00AM</option>
                              <option value="3">3:00AM</option>
                              <option value="4">4:00AM</option>
                              <option value="5">5:00AM</option>
                              <option value="6">6:00AM</option>
                              <option value="7">7:00AM</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-12">
                          <button class="btn btn-light w-100 py-2">Book Now</button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
                <div class="col-lg-6 d-none d-lg-flex fadeInRight animated" data-animation="fadeInRight"
                  data-delay="1s" style="animation-delay: 1s;">
                  <div class="text-start">
                    <h1 class="display-5 text-white">Get 15% off your rental! Choose Your Model
                    </h1>
                    <p>Treat yourself in USA</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Carousel End -->

  <!-- Features Start -->
  <div class="container-fluid feature py-5">
    <div class="container py-5">
      <div class="text-center mx-auto pb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 800px;">
        <h1 class="display-5 text-capitalize mb-3">Caractéristiques <span class="text-primary">principales</span></h1>
        <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut amet nemo expedita
          asperiores commodi accusantium at cum harum, excepturi, quia tempora cupiditate! Adipisci facilis
          modi quisquam quia distinctio,
        </p>
      </div>
      <div class="row g-4 align-items-center">
        <div class="col-xl-4">
          <div class="row gy-4 gx-0">
            <div class="col-12 wow fadeInUp" data-wow-delay="0.1s">
              <div class="feature-item">
                <div class="feature-icon">
                  <span class="fa fa-trophy fa-2x"></span>
                </div>
                <div class="ms-4">
                  <h5 class="mb-3">Services de première classe</h5>
                  <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Consectetur, in illum aperiam ullam magni eligendi?</p>
                </div>
              </div>
            </div>
            <div class="col-12 wow fadeInUp" data-wow-delay="0.3s">
              <div class="feature-item">
                <div class="feature-icon">
                  <span class="fa fa-road fa-2x"></span>
                </div>
                <div class="ms-4">
                  <h5 class="mb-3">Assistance routière 24h/24 et 7j/7</h5>
                  <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Consectetur, in illum aperiam ullam magni eligendi?</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-12 col-xl-4 wow fadeInUp" data-wow-delay="0.2s">
          <img src="{{ asset('site/assets/img/features-') }}img.png" class="img-fluid w-100" style="object-fit: cover;"
            alt="Img">
        </div>
        <div class="col-xl-4">
          <div class="row gy-4 gx-0">
            <div class="col-12 wow fadeInUp" data-wow-delay="0.1s">
              <div class="feature-item justify-content-end">
                <div class="text-end me-4">
                  <h5 class="mb-3">Qualité au minimum</h5>
                  <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Consectetur, in illum aperiam ullam magni eligendi?</p>
                </div>
                <div class="feature-icon">
                  <span class="fa fa-tag fa-2x"></span>
                </div>
              </div>
            </div>
            <div class="col-12 wow fadeInUp" data-wow-delay="0.3s">
              <div class="feature-item justify-content-end">
                <div class="text-end me-4">
                  <h5 class="mb-3">Prise en charge et retour gratuits</h5>
                  <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Consectetur, in illum aperiam ullam magni eligendi?</p>
                </div>
                <div class="feature-icon">
                  <span class="fa fa-map-pin fa-2x"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Features End -->

  <!-- About Start -->
  <div id="sobre" class="container-fluid overflow-hidden about py-5">
    <div class="container py-5">
      <div class="row g-5">
        <div class="col-xl-6 wow fadeInLeft" data-wow-delay="0.2s">
          <div class="about-item">
            <div class="pb-5">
              <h1 class="display-5 text-capitalize">À propos de <span class="text-primary">Central</span></h1>
              <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut amet nemo
                expedita asperiores commodi accusantium at cum harum, excepturi, quia tempora
                cupiditate! Adipisci facilis modi quisquam quia distinctio,
              </p>
            </div>
            <div class="row g-4">
              <div class="col-lg-6">
                <div class="about-item-inner border p-4">
                  <div class="about-icon mb-4">
                    <img src="{{ asset('site/assets/img/about-icon-1.png') }}" class="img-fluid w-50 h-50"
                      alt="Icon">
                  </div>
                  <h5 class="mb-3">Notre vision</h5>
                  <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="about-item-inner border p-4">
                  <div class="about-icon mb-4">
                    <img src="{{ asset('site/assets/img/about-icon-2.png') }}" class="img-fluid h-50 w-50"
                      alt="Icon">
                  </div>
                  <h5 class="mb-3">Notre mission</h5>
                  <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
              </div>
            </div>
            <p class="text-item my-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae,
              aliquam ipsum. Sed suscipit dolorem libero sequi aut natus debitis reprehenderit facilis
              quaerat similique, est at in eum. Quo, obcaecati in!
            </p>
            <div class="row g-4">
              <div class="col-lg-6">
                <div class="text-center rounded bg-secondary p-4">
                  <h1 class="display-6 text-white">2</h1>
                  <h5 class="text-light mb-0">Des années d'expérience</h5>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="rounded">
                  <p class="mb-2"><i class="fa fa-check-circle text-primary me-1"></i> Morbi tristique
                    senectus</p>
                  <p class="mb-2"><i class="fa fa-check-circle text-primary me-1"></i> A scelerisque
                    purus</p>
                  <p class="mb-2"><i class="fa fa-check-circle text-primary me-1"></i> Dictumst
                    vestibulum</p>
                  <p class="mb-0"><i class="fa fa-check-circle text-primary me-1"></i> dio aenean sed
                    adipiscing</p>
                </div>
              </div>
              <div class="col-lg-5 d-flex align-items-center">
                <a href="#" class="btn btn-primary rounded py-3 px-5">En savoir plus sur nous</a>
              </div>
              <div class="col-lg-7">
                <div class="d-flex align-items-center">
                  <img src="{{ asset('site/assets/img/attachment-img.jpg') }}"
                    class="img-fluid rounded-circle border border-4 border-secondary"
                    style="width: 100px; height: 100px;" alt="Image">
                  <div class="ms-4">
                    <h4>William Burgess</h4>
                    <p class="mb-0">Carveo Founder</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-6 wow fadeInRight" data-wow-delay="0.2s">
          <div class="about-img">
            <div class="img-1">
              <img src="{{ asset('site/assets/img/about-img.jpg') }}" class="img-fluid rounded h-100 w-100"
                alt="">
            </div>
            <div class="img-2">
              <img src="{{ asset('site/assets/img/about-img-1.jpg') }}" class="img-fluid rounded w-100" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- About End -->

  <!-- Fact Counter -->
  <div class="container-fluid counter bg-secondary py-5">
    <div class="container py-5">
      <div class="row g-5">
        <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.1s">
          <div class="counter-item text-center">
            <div class="counter-item-icon mx-auto">
              <i class="fas fa-thumbs-up fa-2x"></i>
            </div>
            <div class="counter-counting my-3">
              <span class="text-white fs-2 fw-bold" data-toggle="counter-up">829</span>
              <span class="h1 fw-bold text-white">+</span>
            </div>
            <h4 class="text-white mb-0">Clients satisfaits</h4>
          </div>
        </div>
        <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.3s">
          <div class="counter-item text-center">
            <div class="counter-item-icon mx-auto">
              <i class="fas fa-car-alt fa-2x"></i>
            </div>
            <div class="counter-counting my-3">
              <span class="text-white fs-2 fw-bold" data-toggle="counter-up">56</span>
              <span class="h1 fw-bold text-white">+</span>
            </div>
            <h4 class="text-white mb-0">Nombre de voitures</h4>
          </div>
        </div>
        <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.5s">
          <div class="counter-item text-center">
            <div class="counter-item-icon mx-auto">
              <i class="fas fa-building fa-2x"></i>
            </div>
            <div class="counter-counting my-3">
              <span class="text-white fs-2 fw-bold" data-toggle="counter-up">127</span>
              <span class="h1 fw-bold text-white">+</span>
            </div>
            <h4 class="text-white mb-0">Centre automobile</h4>
          </div>
        </div>
        <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.7s">
          <div class="counter-item text-center">
            <div class="counter-item-icon mx-auto">
              <i class="fas fa-clock fa-2x"></i>
            </div>
            <div class="counter-counting my-3">
              <span class="text-white fs-2 fw-bold" data-toggle="counter-up">589</span>
              <span class="h1 fw-bold text-white">+</span>
            </div>
            <h4 class="text-white mb-0">Kilomètres totaux</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Fact Counter -->

  <!-- Services Start -->
  <div id="servicos" class="container-fluid service py-5">
    <div class="container py-5">
      <div class="text-center mx-auto pb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 800px;">
        <h1 class="display-5 text-capitalize mb-3">Services <span class="text-primary">centraux</span></h1>
        <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut amet nemo expedita
          asperiores commodi accusantium at cum harum, excepturi, quia tempora cupiditate! Adipisci facilis
          modi quisquam quia distinctio,
        </p>
      </div>
      <div class="row g-4">
        <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.1s">
          <div class="service-item p-4">
            <div class="service-icon mb-4">
              <i class="fa fa-phone-alt fa-2x"></i>
            </div>
            <h5 class="mb-3">Réservation par téléphone</h5>
            <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit ipsam
              quasi quibusdam ipsa perferendis iusto?</p>
          </div>
        </div>
        <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.3s">
          <div class="service-item p-4">
            <div class="service-icon mb-4">
              <i class="fa fa-money-bill-alt fa-2x"></i>
            </div>
            <h5 class="mb-3">Tarifs spéciaux</h5>
            <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit ipsam
              quasi quibusdam ipsa perferendis iusto?</p>
          </div>
        </div>
        <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.5s">
          <div class="service-item p-4">
            <div class="service-icon mb-4">
              <i class="fa fa-road fa-2x"></i>
            </div>
            <h5 class="mb-3">Location aller simple</h5>
            <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit ipsam
              quasi quibusdam ipsa perferendis iusto?</p>
          </div>
        </div>
        <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.1s">
          <div class="service-item p-4">
            <div class="service-icon mb-4">
              <i class="fa fa-umbrella fa-2x"></i>
            </div>
            <h5 class="mb-3">Assurance vie</h5>
            <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit ipsam
              quasi quibusdam ipsa perferendis iusto?</p>
          </div>
        </div>
        <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.3s">
          <div class="service-item p-4">
            <div class="service-icon mb-4">
              <i class="fa fa-building fa-2x"></i>
            </div>
            <h5 class="mb-3">De ville en ville</h5>
            <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit ipsam
              quasi quibusdam ipsa perferendis iusto?</p>
          </div>
        </div>
        <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.5s">
          <div class="service-item p-4">
            <div class="service-icon mb-4">
              <i class="fa fa-car-alt fa-2x"></i>
            </div>
            <h5 class="mb-3">Trajets gratuits</h5>
            <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit ipsam
              quasi quibusdam ipsa perferendis iusto?</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Services End -->

  <!-- Car categories Start -->
  <div id="frota" class="container-fluid categories pb-5">
    <div class="container pb-5">
      <div class="text-center mx-auto pb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 800px;">
        <h1 class="display-5 text-capitalize mb-3">Catégories de <span class="text-primary">véhicules</span></h1>
        <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut amet nemo expedita
          asperiores commodi accusantium at cum harum, excepturi, quia tempora cupiditate! Adipisci facilis
          modi quisquam quia distinctio,
        </p>
      </div>
      <div class="categories-carousel owl-carousel wow fadeInUp" data-wow-delay="0.1s">
        <div class="categories-item p-4">
          <div class="categories-item-inner">
            <div class="categories-img rounded-top">
              <img src="{{ asset('site/assets/img/car-1.png') }}" class="img-fluid w-100 rounded-top" alt="">
            </div>
            <div class="categories-content rounded-bottom p-4">
              <h4>Mercedes Benz R3</h4>
              <div class="categories-review mb-4">
                <div class="me-3">4.5 Review</div>
                <div class="d-flex justify-content-center text-secondary">
                  <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 text-body"></i>
                </div>
              </div>
              <div class="mb-4">
                <h4 class="bg-white text-primary rounded-pill py-2 px-4 mb-0">€40/jour</h4>
              </div>
              <div class="row gy-2 gx-0 text-center mb-4">
                <div class="col-4 border-end border-white">
                  <i class="fa fa-users text-dark"></i> <span class="text-body ms-1">4 Seat</span>
                </div>
                <div class="col-4 border-end border-white">
                  <i class="fa fa-car text-dark"></i> <span class="text-body ms-1">AT/MT</span>
                </div>
                <div class="col-4">
                  <i class="fa fa-gas-pump text-dark"></i> <span class="text-body ms-1">Petrol</span>
                </div>
                <div class="col-4 border-end border-white">
                  <i class="fa fa-car text-dark"></i> <span class="text-body ms-1">2015</span>
                </div>
                <div class="col-4 border-end border-white">
                  <i class="fa fa-cogs text-dark"></i> <span class="text-body ms-1">AUTO</span>
                </div>
                <div class="col-4">
                  <i class="fa fa-road text-dark"></i> <span class="text-body ms-1">27K</span>
                </div>
              </div>
              <a href="#" class="btn btn-primary rounded-pill d-flex justify-content-center py-3">Réservez maintenant</a>
            </div>
          </div>
        </div>
        <div class="categories-item p-4">
          <div class="categories-item-inner">
            <div class="categories-img rounded-top">
              <img src="{{ asset('site/assets/img/car-2.png') }}" class="img-fluid w-100 rounded-top" alt="">
            </div>
            <div class="categories-content rounded-bottom p-4">
              <h4>Toyota Corolla Cross</h4>
              <div class="categories-review mb-4">
                <div class="me-3">3.5 Review</div>
                <div class="d-flex justify-content-center text-secondary">
                  <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 text-body"></i>
                </div>
              </div>
              <div class="mb-4">
                <h4 class="bg-white text-primary rounded-pill py-2 px-4 mb-0">€40/jour</h4>
              </div>
              <div class="row gy-2 gx-0 text-center mb-4">
                <div class="col-4 border-end border-white">
                  <i class="fa fa-users text-dark"></i> <span class="text-body ms-1">4 Seat</span>
                </div>
                <div class="col-4 border-end border-white">
                  <i class="fa fa-car text-dark"></i> <span class="text-body ms-1">AT/MT</span>
                </div>
                <div class="col-4">
                  <i class="fa fa-gas-pump text-dark"></i> <span class="text-body ms-1">Petrol</span>
                </div>
                <div class="col-4 border-end border-white">
                  <i class="fa fa-car text-dark"></i> <span class="text-body ms-1">2015</span>
                </div>
                <div class="col-4 border-end border-white">
                  <i class="fa fa-cogs text-dark"></i> <span class="text-body ms-1">AUTO</span>
                </div>
                <div class="col-4">
                  <i class="fa fa-road text-dark"></i> <span class="text-body ms-1">27K</span>
                </div>
              </div>
              <a href="#" class="btn btn-primary rounded-pill d-flex justify-content-center py-3">Réservez maintenant</a>
            </div>
          </div>
        </div>
        <div class="categories-item p-4">
          <div class="categories-item-inner">
            <div class="categories-img rounded-top">
              <img src="{{ asset('site/assets/img/car-3.png') }}" class="img-fluid w-100 rounded-top" alt="">
            </div>
            <div class="categories-content rounded-bottom p-4">
              <h4>Tesla Model S Plaid</h4>
              <div class="categories-review mb-4">
                <div class="me-3">3.8 Review</div>
                <div class="d-flex justify-content-center text-secondary">
                  <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 text-body"></i>
                </div>
              </div>
              <div class="mb-4">
                <h4 class="bg-white text-primary rounded-pill py-2 px-4 mb-0">€40/jour</h4>
              </div>
              <div class="row gy-2 gx-0 text-center mb-4">
                <div class="col-4 border-end border-white">
                  <i class="fa fa-users text-dark"></i> <span class="text-body ms-1">4 Seat</span>
                </div>
                <div class="col-4 border-end border-white">
                  <i class="fa fa-car text-dark"></i> <span class="text-body ms-1">AT/MT</span>
                </div>
                <div class="col-4">
                  <i class="fa fa-gas-pump text-dark"></i> <span class="text-body ms-1">Petrol</span>
                </div>
                <div class="col-4 border-end border-white">
                  <i class="fa fa-car text-dark"></i> <span class="text-body ms-1">2015</span>
                </div>
                <div class="col-4 border-end border-white">
                  <i class="fa fa-cogs text-dark"></i> <span class="text-body ms-1">AUTO</span>
                </div>
                <div class="col-4">
                  <i class="fa fa-road text-dark"></i> <span class="text-body ms-1">27K</span>
                </div>
              </div>
              <a href="#" class="btn btn-primary rounded-pill d-flex justify-content-center py-3">Réservez maintenant</a>
            </div>
          </div>
        </div>
        <div class="categories-item p-4">
          <div class="categories-item-inner">
            <div class="categories-img rounded-top">
              <img src="{{ asset('site/assets/img/car-4.png') }}" class="img-fluid w-100 rounded-top" alt="">
            </div>
            <div class="categories-content rounded-bottom p-4">
              <h4>Hyundai Kona Electric</h4>
              <div class="categories-review mb-4">
                <div class="me-3">4.8 Review</div>
                <div class="d-flex justify-content-center text-secondary">
                  <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"></i>
                </div>
              </div>
              <div class="mb-4">
                <h4 class="bg-white text-primary rounded-pill py-2 px-4 mb-0">€40/jour</h4>
              </div>
              <div class="row gy-2 gx-0 text-center mb-4">
                <div class="col-4 border-end border-white">
                  <i class="fa fa-users text-dark"></i> <span class="text-body ms-1">4 Seat</span>
                </div>
                <div class="col-4 border-end border-white">
                  <i class="fa fa-car text-dark"></i> <span class="text-body ms-1">AT/MT</span>
                </div>
                <div class="col-4">
                  <i class="fa fa-gas-pump text-dark"></i> <span class="text-body ms-1">Petrol</span>
                </div>
                <div class="col-4 border-end border-white">
                  <i class="fa fa-car text-dark"></i> <span class="text-body ms-1">2015</span>
                </div>
                <div class="col-4 border-end border-white">
                  <i class="fa fa-cogs text-dark"></i> <span class="text-body ms-1">AUTO</span>
                </div>
                <div class="col-4">
                  <i class="fa fa-road text-dark"></i> <span class="text-body ms-1">27K</span>
                </div>
              </div>
              <a href="#" class="btn btn-primary rounded-pill d-flex justify-content-center py-3">Réservez maintenant</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Car categories End -->

  <!-- Car Steps Start -->
  <div class="container-fluid steps py-5">
    <div class="container py-5">
      <div class="text-center mx-auto pb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 800px;">
        <h1 class="display-5 text-capitalize text-white mb-3">Processus<span class="text-primary"> central</span>
        </h1>
        <p class="mb-0 text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut amet nemo
          expedita asperiores commodi accusantium at cum harum, excepturi, quia tempora cupiditate! Adipisci
          facilis modi quisquam quia distinctio,
        </p>
      </div>
      <div class="row g-4">
        <div class="col-lg-4 wow fadeInUp" data-wow-delay="0.1s">
          <div class="steps-item p-4 mb-4">
            <h4>Entrez en contact</h4>
            <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, dolorem!</p>
            <div class="setps-number">01.</div>
          </div>
        </div>
        <div class="col-lg-4 wow fadeInUp" data-wow-delay="0.3s">
          <div class="steps-item p-4 mb-4">
            <h4>Choisissez une voiture</h4>
            <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, dolorem!</p>
            <div class="setps-number">02.</div>
          </div>
        </div>
        <div class="col-lg-4 wow fadeInUp" data-wow-delay="0.5s">
          <div class="steps-item p-4 mb-4">
            <h4>Profitez de la conduite</h4>
            <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, dolorem!</p>
            <div class="setps-number">03.</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Car Steps End -->

  {{-- <!-- Blog Start -->
  <div class="container-fluid blog py-5">
    <div class="container py-5">
      <div class="text-center mx-auto pb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 800px;">
        <h1 class="display-5 text-capitalize mb-3">Cental<span class="text-primary"> Blog & News</span></h1>
        <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut amet nemo expedita
          asperiores commodi accusantium at cum harum, excepturi, quia tempora cupiditate! Adipisci facilis
          modi quisquam quia distinctio,
        </p>
      </div>
      <div class="row g-4">
        <div class="col-lg-4 wow fadeInUp" data-wow-delay="0.1s">
          <div class="blog-item">
            <div class="blog-img">
              <img src="{{ asset('site/assets/img/blog-1.jpg" class')}}="img-fluid rounded-top w-100" alt="Image">
            </div>
            <div class="blog-content rounded-bottom p-4">
              <div class="blog-date">30 Dec 2025</div>
              <div class="blog-comment my-3">
                <div class="small"><span class="fa fa-user text-primary"></span><span class="ms-2">Martin.C</span>
                </div>
                <div class="small"><span class="fa fa-comment-alt text-primary"></span><span class="ms-2">6
                    Comments</span></div>
              </div>
              <a href="#" class="h4 d-block mb-3">Rental Cars how to check driving fines?</a>
              <p class="mb-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius libero soluta
                impedit eligendi? Quibusdam, laudantium.</p>
              <a href="#" class="">Read More <i class="fa fa-arrow-right"></i></a>
            </div>
          </div>
        </div>
        <div class="col-lg-4 wow fadeInUp" data-wow-delay="0.3s">
          <div class="blog-item">
            <div class="blog-img">
              <img src="img/blog-2.jpg" class="img-fluid rounded-top w-100" alt="Image">
            </div>
            <div class="blog-content rounded-bottom p-4">
              <div class="blog-date">25 Dec 2025</div>
              <div class="blog-comment my-3">
                <div class="small"><span class="fa fa-user text-primary"></span><span class="ms-2">Martin.C</span>
                </div>
                <div class="small"><span class="fa fa-comment-alt text-primary"></span><span class="ms-2">6
                    Comments</span></div>
              </div>
              <a href="#" class="h4 d-block mb-3">Rental cost of sport and other cars</a>
              <p class="mb-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius libero soluta
                impedit eligendi? Quibusdam, laudantium.</p>
              <a href="#" class="">Read More <i class="fa fa-arrow-right"></i></a>
            </div>
          </div>
        </div>
        <div class="col-lg-4 wow fadeInUp" data-wow-delay="0.5s">
          <div class="blog-item">
            <div class="blog-img">
              <img src="img/blog-3.jpg" class="img-fluid rounded-top w-100" alt="Image">
            </div>
            <div class="blog-content rounded-bottom p-4">
              <div class="blog-date">27 Dec 2025</div>
              <div class="blog-comment my-3">
                <div class="small"><span class="fa fa-user text-primary"></span><span class="ms-2">Martin.C</span>
                </div>
                <div class="small"><span class="fa fa-comment-alt text-primary"></span><span class="ms-2">6
                    Comments</span></div>
              </div>
              <a href="#" class="h4 d-block mb-3">Document required for car rental</a>
              <p class="mb-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius libero soluta
                impedit eligendi? Quibusdam, laudantium.</p>
              <a href="#" class="">Read More <i class="fa fa-arrow-right"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Blog End --> --}}

  <!-- Banner Start -->
  <div class="container-fluid banner pb-5 wow zoomInDown mt-4" data-wow-delay="0.1s">
    <div class="container pb-5">
      <div class="banner-item rounded">
        <img src="{{ asset('site/assets/img/banner-1.jpg') }}" class="img-fluid rounded w-100" alt="">
        <div class="banner-content">
          <h2 class="text-primary">JJA RENT</h2>
          <h1 class="text-white">Intéressé par la location ?</h1>
          <p class="text-white">N'hésitez pas et envoyez-nous un message.</p>
          <div class="banner-btn">
            <a href="#" class="btn btn-secondary rounded-pill py-3 px-4 px-md-5 me-2">WhatsApp</a>
            <a href="#" class="btn btn-primary rounded-pill py-3 px-4 px-md-5 ms-2">Contactez-nous</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Banner End -->

  <!-- Testimonial Start -->
  <div class="container-fluid testimonial pb-5">
    <div class="container pb-5">
      <div class="text-center mx-auto pb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 800px;">
        <h1 class="display-5 text-capitalize mb-3">Avis de nos<span class="text-primary"> clients</span></h1>
        <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut amet nemo expedita
          asperiores commodi accusantium at cum harum, excepturi, quia tempora cupiditate! Adipisci facilis
          modi quisquam quia distinctio,
        </p>
      </div>
      <div class="owl-carousel testimonial-carousel wow fadeInUp" data-wow-delay="0.1s">
        <div class="testimonial-item">
          <div class="testimonial-quote"><i class="fa fa-quote-right fa-2x"></i>
          </div>
          <div class="testimonial-inner p-4">
            <img src="{{ asset('site/assets/img/testimonial-1.jpg') }}" class="img-fluid" alt="">
            <div class="ms-4">
              <h4>Person Name</h4>
              <p>Profession</p>
              <div class="d-flex text-primary">
                <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 text-body"></i>
              </div>
            </div>
          </div>
          <div class="border-top rounded-bottom p-4">
            <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam soluta neque ab
              repudiandae reprehenderit ipsum eos cumque esse repellendus impedit.</p>
          </div>
        </div>
        <div class="testimonial-item">
          <div class="testimonial-quote"><i class="fa fa-quote-right fa-2x"></i>
          </div>
          <div class="testimonial-inner p-4">
            <img src="{{ asset('site/assets/img/testimonial-2.jpg') }}" class="img-fluid" alt="">
            <div class="ms-4">
              <h4>Person Name</h4>
              <p>Profession</p>
              <div class="d-flex text-primary">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star text-body"></i>
                <i class="fas fa-star text-body"></i>
              </div>
            </div>
          </div>
          <div class="border-top rounded-bottom p-4">
            <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam soluta neque ab
              repudiandae reprehenderit ipsum eos cumque esse repellendus impedit.</p>
          </div>
        </div>
        <div class="testimonial-item">
          <div class="testimonial-quote"><i class="fa fa-quote-right fa-2x"></i>
          </div>
          <div class="testimonial-inner p-4">
            <img src="{{ asset('site/assets/img/testimonial-3.jpg') }}" class="img-fluid" alt="">
            <div class="ms-4">
              <h4>Person Name</h4>
              <p>Profession</p>
              <div class="d-flex text-primary">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star text-body"></i>
                <i class="fas fa-star text-body"></i>
                <i class="fas fa-star text-body"></i>
              </div>
            </div>
          </div>
          <div class="border-top rounded-bottom p-4">
            <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam soluta neque ab
              repudiandae reprehenderit ipsum eos cumque esse repellendus impedit.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Testimonial End -->

  <!-- Contact Start -->
  <div id="contato" class="container-fluid contact py-5">
    <div class="container py-5">
      <div class="text-center mx-auto pb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 800px;">
        <h1 class="display-5 text-capitalize text-primary mb-3">Contactez-nous</h1>
        <p class="mb-0">The contact form is currently inactive. Get a functional and working contact form with Ajax &
          PHP in a few minutes. Just copy and paste the files, add a little code and you're done. <a
            class="text-primary fw-bold" href="https://computechdev.com.br">Download Now</a>.</p>
      </div>
      <div class="row g-5">
        <div class="col-12 wow fadeInUp" data-wow-delay="0.1s">
          <div class="row g-5">
            <div class="col-md-6 col-lg-6 col-xl-3">
              <div class="contact-add-item p-4">
                <div class="contact-icon mb-4">
                  <i class="fas fa-map-marker-alt fa-2x"></i>
                </div>
                <div>
                  <h4>Adresse</h4>
                  <p class="mb-0">123 Rue Nouvelle</p>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.3s">
              <div class="contact-add-item p-4">
                <div class="contact-icon mb-4">
                  <i class="fas fa-envelope fa-2x"></i>
                </div>
                <div>
                  <h4>Envoyez-nous un e-mail</h4>
                  <p class="mb-0">info@example.com</p>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.5s">
              <div class="contact-add-item p-4">
                <div class="contact-icon mb-4">
                  <i class="fa fa-phone-alt fa-2x"></i>
                </div>
                <div>
                  <h4>Téléphone</h4>
                  <p class="mb-0">(+000) 000 000</p>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.7s">
              <div class="contact-add-item p-4">
                <div class="contact-icon mb-4">
                  <i class="fab fa-firefox-browser fa-2x"></i>
                </div>
                <div>
                  <h4>Yoursite@ex.com</h4>
                  <p class="mb-0">(+000) 000 000</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-6 wow fadeInUp" data-wow-delay="0.1s">
          <div class="bg-secondary p-5 rounded">
            <h4 class="text-primary mb-4">Envoyez votre message</h4>
            <form>
              <div class="row g-4">
                <div class="col-lg-12 col-xl-6">
                  <div class="form-floating">
                    <input type="text" class="form-control" id="name" placeholder="Votre nom">
                    <label for="name">Votre nom</label>
                  </div>
                </div>
                <div class="col-lg-12 col-xl-6">
                  <div class="form-floating">
                    <input type="email" class="form-control" id="email" placeholder="Votre e-mail">
                    <label for="email">Votre e-mail</label>
                  </div>
                </div>
                <div class="col-lg-12 col-xl-6">
                  <div class="form-floating">
                    <input type="phone" class="form-control" id="phone" placeholder="Votre téléphone">
                    <label for="phone">Votre téléphone</label>
                  </div>
                </div>
                <div class="col-lg-12 col-xl-6">
                  <div class="form-floating">
                    <input type="text" class="form-control" id="project" placeholder="Votre projet">
                    <label for="project">Votre projet</label>
                  </div>
                </div>
                <div class="col-12">
                  <div class="form-floating">
                    <input type="text" class="form-control" id="subject" placeholder="Subject">
                    <label for="subject">Sujet</label>
                  </div>
                </div>
                <div class="col-12">
                  <div class="form-floating">
                    <textarea class="form-control" placeholder="Leave a message here" id="message" style="height: 160px"></textarea>
                    <label for="message">Message</label>
                  </div>

                </div>
                <div class="col-12">
                  <button class="btn btn-light w-100 py-3">Envoyer un message</button>
                </div>
              </div>
            </form>
          </div>
        </div>
        <div class="col-12 col-xl-1 wow fadeInUp" data-wow-delay="0.3s">
          <div class="d-flex flex-xl-column align-items-center justify-content-center">
            <a class="btn btn-xl-square btn-light rounded-circle mb-0 mb-xl-4 me-4 me-xl-0" href=""><i
                class="fab fa-facebook-f"></i></a>
            <a class="btn btn-xl-square btn-light rounded-circle mb-0 mb-xl-4 me-4 me-xl-0" href=""><i
                class="fab fa-twitter"></i></a>
            <a class="btn btn-xl-square btn-light rounded-circle mb-0 mb-xl-4 me-4 me-xl-0" href=""><i
                class="fab fa-instagram"></i></a>
            <a class="btn btn-xl-square btn-light rounded-circle mb-0 mb-xl-0 me-0 me-xl-0" href=""><i
                class="fab fa-linkedin-in"></i></a>
          </div>
        </div>
        <div class="col-12 col-xl-5 wow fadeInUp" data-wow-delay="0.1s">
          <div class="p-5 bg-light rounded">
            <div class="bg-white rounded p-4 mb-4">
              <h4 class="mb-3">Notre succursale 01</h4>
              <div class="d-flex align-items-center flex-shrink-0 mb-3">
                <p class="mb-0 text-dark me-2">Adresse:</p><i class="fas fa-map-marker-alt text-primary me-2"></i>
                <p class="mb-0">123 Rue Nouvelle</p>
              </div>
              <div class="d-flex align-items-center">
                <p class="mb-0 text-dark me-2">Telephone:</p><i class="fa fa-phone-alt text-primary me-2"></i>
                <p class="mb-0">(+000) 000 000</p>
              </div>
            </div>
            {{-- <div class="bg-white rounded p-4 mb-4">
              <h4 class="mb-3">Our Branch 02</h4>
              <div class="d-flex align-items-center mb-3">
                <p class="mb-0 text-dark me-2">Address:</p><i class="fas fa-map-marker-alt text-primary me-2"></i>
                <p class="mb-0">123 Street New York.USA</p>
              </div>
              <div class="d-flex align-items-center">
                <p class="mb-0 text-dark me-2">Telephone:</p><i class="fa fa-phone-alt text-primary me-2"></i>
                <p class="mb-0">(+012) 3456 7890</p>
              </div>
            </div>
            <div class="bg-white rounded p-4 mb-0">
              <h4 class="mb-3">Our Branch 03</h4>
              <div class="d-flex align-items-center mb-3">
                <p class="mb-0 text-dark me-2">Address:</p><i class="fas fa-map-marker-alt text-primary me-2"></i>
                <p class="mb-0">123 Street New York.USA</p>
              </div>
              <div class="d-flex align-items-center">
                <p class="mb-0 text-dark me-2">Telephone:</p><i class="fa fa-phone-alt text-primary me-2"></i>
                <p class="mb-0">(+012) 3456 7890</p>
              </div>
            </div> --}}
          </div>
        </div>
        <div class="col-12">
          <div class="rounded">
            <iframe class="rounded w-100" style="height: 400px;"
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d17229.736046817565!2d5.8485947!3d49.550494949999994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47eab5efbbb174b3%3A0x54371632221808!2sP%C3%A9tange%2C%20Luxemburgo!5e1!3m2!1spt-BR!2sbr!4v1743159486249!5m2!1spt-BR!2sbr"
              loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
          </div>
        </div>

      </div>
    </div>
  </div>
  <!-- Contact End -->
@endsection