.elementor-11 .elementor-element.elementor-element-aff828f > .elementor-background-overlay{background-color:#000000;opacity:0.44;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-11 .elementor-element.elementor-element-aff828f > .elementor-container{min-height:500px;}.elementor-11 .elementor-element.elementor-element-aff828f{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-11 .elementor-element.elementor-element-8f0a94d{text-align:center;}.elementor-11 .elementor-element.elementor-element-8f0a94d .elementor-heading-title{color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-4eb70f1:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-4eb70f1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000BF;}.elementor-11 .elementor-element.elementor-element-4eb70f1 > .elementor-container{max-width:1015px;}.elementor-11 .elementor-element.elementor-element-4eb70f1{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:50px 0px 100px 0px;}.elementor-11 .elementor-element.elementor-element-4eb70f1 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-11 .elementor-element.elementor-element-d15cf9a > .elementor-widget-container{margin:0px 0px 10px 0px;}.elementor-11 .elementor-element.elementor-element-d15cf9a{text-align:center;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-11 .elementor-element.elementor-element-67ac2ad{text-align:center;color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-4658492{text-align:center;color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-405b1dd > .elementor-widget-container{border-radius:20px 20px 20px 20px;}@media(max-width:767px){.elementor-11 .elementor-element.elementor-element-4eb70f1{padding:0px 0px 0px 0px;}}/* Start custom CSS for shortcode, class: .elementor-element-405b1dd */<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Book a Ride</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f7f7f7;
      margin: 0;
      padding: 0;
    }
    .booking-container {
      max-width: 600px;
      margin: 40px auto;
      background: #fff;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    h2 {
      text-align: center;
      margin-bottom: 20px;
      color: #333;
    }
    label {
      font-weight: bold;
      display: block;
      margin: 12px 0 6px;
    }
    input, select {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 8px;
      font-size: 14px;
    }
    button {
      margin-top: 20px;
      width: 100%;
      padding: 25pxpx;
      background: #111;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
    }
    button:hover {
      background: #444;
    }
  style>
head>
<"body">
  <div class="booking-container">
    <h2>Book Your Ride</h2>
    <form id="rideForm">
      <label for="pickup">Pickup Location</label>
      <input type="text" id="pickup" name="pickup" required>

      <label for="dropoff">Drop-off Location</label>
      <input type="text" id="dropoff" name="dropoff" required>

      <label for="date">Date</label>
      <input type="date" id="date" name="date" required>

      <label for="time">Time</label>
      <input type="time" id="time" name="time" required>

      <label for="vehicle">Select Vehicle</label>
      <select id="vehicle" name="vehicle" required>
        <option value="">-- Select --</option>
        <option value="sedan">Sedan</option>
        <option value="suv">SUV</option>
        <option value="limo">Limousine</option>
      </select>

      <label for="name">Your Name</label>
      <input type="text" id="name" name="name" required>

      <label for="phone">Phone Number</label>
      <input type="tel" id="phone" name="phone" required>

      <label for="email">Email Address</label>
      <input type="email" id="email" name="email" required>

      <button type="submit">Book Ride</button>
    </form>
  </div>

  <script>
    document.getElementById("rideForm").addEventListener("submit", function(e) {
      e.preventDefault();
      alert("✅ Your ride has been booked! We will contact you shortly.");
      // Here you can send data to your server using AJAX or PHP
    )/* End custom CSS */