<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>Booking</title>
  <meta
    content="Jessycabs is a reliable and convenient taxi service that offers transportation solutions for your everyday needs. Whether you're heading to the airport, going shopping, or exploring the city, Jessycabs is here to provide you with a safe and comfortable ride. Our fleet of well-maintained vehicles and professional drivers ensure a pleasant and hassle-free experience. Book your ride with Jessycabs and enjoy a stress-free journey."
    name="description">
  <meta
    content="taxi service, transportation, reliable, convenient, airport transfer, city transportation, professional drivers"
    name="keywords">
  <link href="assets/images/JessyLogo.webp" rel="icon">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=Roboto:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
    rel="stylesheet">
  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <script src="floating-wpp.js"></script>
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
  <script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <link href="assets/css/main.css" rel="stylesheet">
  <link href="assets/css/booking.css" rel="stylesheet">
</head>
<body>
  <header id="header" class="header d-flex align-items-center">
        <div class=" container-xl d-flex align-items-center justify-content-between">
            <a href="index.php" class="logo d-flex align-items-center">
                <img src="./assets/images/JessyLogo.webp" alt="logo">
            </a>
            <i class="mobile-nav-toggle mobile-nav-show bi bi-list"></i>
            <i class="mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i>
            <nav id="navbar" class="navbar">
                <ul>
                    <li><a href="index.html" class="nav-link scrollto"><i id="active"
                                class="fa-solid fa-house">&nbsp</i>Home</a></li>
                    <li><a href="index.html#get-started" class="nav-link scrollto"><i id="active"
                                class="fa-solid fa-user-tie">&nbsp</i>About</a></li>
                    <li><a href="index.html#services" class="nav-link scrollto"><i id="active"
                                class="fa-solid fa-user-gear">&nbsp</i>Services</a></li>
                    <li><a href="index.html#client-sec" class="nav-link scrollto"><i id="active"
                                class="fa-solid fa-handshake-angle">&nbsp</i>Clients</a></li>
                    <li><a href="index.html#contact" class="nav-link scrollto"><i id="active"
                                class="fa-regular fa-comment-dots">&nbsp</i>Contact</a></li>
                </ul>
            </nav>

        </div>
    </header>
  <main id="startchange">
    <!-- <div class="breadcrumbs d-flex align-items-center" style="background-image: url('assets/images/bookingbg.jpg');">
      <div class="container position-relative d-flex flex-column align-items-center" data-aos-delay="300"
        data-aos="fade-up">
        <h2>Book Now</h2>
        <ol>
          <li><a href="index.php">Home</a></li>
          <li>Booking</li>
        </ol>
      </div>
    </div> -->
    <section id="contact" class="contact" data-aos-delay="300" data-aos="fade-pop" style="padding: 0px;">
      <div  class="glass ">
        <form id="form-popup" action="book.php" method="post" class="form_wrapper">
          <div class="form_container">
            <div class="title_container">
              <h2 class="booking-title">Book Your Trip Now</h2>
            </div>
            <div class="row clearfix">
              <div class="">
                <div class="row clearfix">
                  <div class="col_half">
                    <div class="input_field"> <span><i aria-hidden="true" class="fa fa-user"></i></span>
                      <input type="text" name="fname" placeholder="First Name" required />
                    </div>
                    <div class="input_field"> <span><i aria-hidden="true" class="fa fa-envelope"></i></span>
                      <input type="email" name="email" placeholder="Email" required />
                    </div>
                    <div class="input_field"> <span><i aria-hidden="true" class="fa fa-lock"></i></span>
                      <input type="tel" name="phno" placeholder="Mobile Number" required />
                    </div>
                    <div class="state-city" style="display: flex;justify-content: space-between;">
                      <div class="input_field select_option location"><span><i
                            class="fa-solid fa-location-dot"></i></span>
                        <select onchange="print_city('state', this.selectedIndex);" id="sts" name="state" required>
                        </select>
                        <div class="select_arrow"></div>
                      </div>
                      <div class="input_field select_option location"><span><i aria-hidden="true"
                            class="fa fa-city"></i></span>
                        <select name="city" id="state" required></select>
                        <div class="select_arrow"></div>
                      </div>
                      <script language="javascript">
                        print_state("sts");
                      </script>
                    </div>
                    <div class="input_field select_option"><span><i aria-hidden="true" class="fa fa-car"></i></span>
                      <select name="vname" required>
                        <option>Vehicle Type</option>
                        <option>Sedan</option>
                        <option>Semi Premium</option>
                        <option>Premium</option>
                        <option>SUV</option>
                        <option>Luxury</option>
                        <option>Super Luxury</option>
                        <option>Bus</option>
                      </select>
                      <div class="select_arrow"></div>
                    </div>
                    <button type="submit" name="submit" id="submitBtn" data-toggle="modal" data-target="#myModal"
                      class="btn btn-primary" tabIndex="-1">Book Now</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </section>
  </main>
  <footer id="footer" class="footer">

<div class="footer-content position-relative">
    <div class="container">
        <div class="row">

            <div id="footerftext" class="col-lg-3 col-md-6" data-aos-delay="100" data-aos="fade-right">
                <div class="footer-info">
                    <h3>Jessy Cabs <br/> <span style="color: #ccc;font-size: 18px;">private limited</span></h3>
                   
                    <p>
                        Flat No 2, II Floor, Swathi Complex, 
                        Nandanam Tamil Nadu 600017<br><br>
                        <strong><u>24/7 Reservation</u></strong><br>
                        <strong>Phone:&nbsp</strong>044 49105959<br>
                        <strong>For Booking:</strong> booking@jessycabs.in<br>
                        <strong>For Info:</strong> info@jessycabs.in<br>
                    </p>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 footer-links" data-aos-delay="300" data-aos="fade-right">
                <h4>Links</h4>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="index.html#get-started">About us</a></li>
                    <li><a href="index.html#services">Services</a></li>
                    <li><a href="privace&policy.html">Privacy Policy</a></li>
                    <li><a href="terms&condition.html">Terms & Conditions</a></li>
                    <li><a href="return&policy.html">Cancellation & Return Policy</a></li>
                    <!-- <li><a href="#">Privacy policy</a></li> -->
                </ul>
            </div>

            <div class="col-lg-3 col-md-3 footer-links" data-aos-delay="500" data-aos="fade-right">
                <h4>Our Services</h4>
                <ul>
                    <li><a href="index.html#services">Airport Transfers</a></li>
                    <li><a href="index.html#services">Outstation Services </a></li>
                    <li><a href="index.html#services">Local Cab Services</a></li>
                    <li><a href="index.html#services">Corporate Services</a></li>
                </ul>
            </div>

            <div id="footerftext" class="col-lg-3 col-md-3 footer-links" data-aos-delay="700"
                data-aos="fade-right">
                <h4>Our Social Media</h4>
                <p>Follow us on social networks.</p>
                <div class="social-links d-flex mt-3">
                    <!-- <a href="#" class="d-flex align-items-center justify-content-center"><i class="bi bi-twitter"></i></a> -->
                    <a href=" https://www.facebook.com/JESSY-CABS-102491564990314/"
                        class="d-flex align-items-center justify-content-center"><i
                            class="bi bi-facebook"></i></a>
                    <a href=" https://www.instagram.com/jessy.cabs?r=nametag"
                        class="d-flex align-items-center justify-content-center"><i
                            class="bi bi-instagram"></i></a>
                    <a href="https://www.linkedin.com/company/jessy-cabs/"
                        class="d-flex align-items-center justify-content-center"><i
                            class="bi bi-linkedin"></i></a>
                </div>
            </div>

        </div>
    </div>
</div>
<div class="footer-legal text-center position-relative" data-aos-delay="300" data-aos="fade-up">
    <div class="container">
        <div class="copyright">
            <span id="copyright-year"></span> &copy; Copyright <strong><span>Jessy Cabs</span></strong>. All
            Rights
            Reserved
        </div>

    </div>
</div>
</footer>
  <a href="#" class="scroll-top d-flex align-items-center justify-content-center"><i
      class="bi bi-arrow-up-short"></i></a>
  <div class="preloaderBg" id="preloader" onload="preloader()">
    <div class="preloader"></div>
    <div class="preloader2"></div>
  </div>
<!-- JavaScript moved to the bottom for faster loading -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
  <script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>

  <!-- Vendor Scripts -->
  <script src="assets/vendor/aos/aos.js"></script>
  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
  <script src="assets/vendor/php-email-form/validate.js"></script>

  <!-- Custom Scripts -->
  <script src="assets/js/main.js"></script>
  <script src="assets/js/loader.js"></script>
  <!---->
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
  <script src="assets/vendor/php-email-form/validate.js"></script>
  <script src="assets/js/main.js"></script>
  <script language="javascript">
    print_state("sts");
  </script>

</body>
</html>