body {
       font-family: 'Poppins', sans-serif;
       background-color: #f4f6f9;
       margin: 0;
       padding: 0;
       color: #333;
   }

   .booking-area {
       padding: 40px 15px 60px;
   }

   .booking-form {
       background: #fff;
       padding: 25px 30px;
       border-radius: 12px;
       box-shadow: 0 0 10px rgb(237 164 1);
   }

   .booking-title {
       font-size: 26px;
       font-weight: 600;
       margin-bottom: 15px;
       color: var(--theme-color);
   }

   .form-control,
   .select {
       width: 100%;
       padding: 12px 16px;
       font-size: 15px;
       border: 1px solid #ccc;
       border-radius: 6px;
       color: #333;
       background-color: #fff;
       transition: all 0.3s ease;
   }

   .form-control::placeholder {
       color: #666;
       opacity: 1;
   }

   .form-control:focus,
   .select:focus {
       border-color: #007bff;
       box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
       outline: none;
       background-color: #fff;
   }

   .form-group {
       position: relative;
       margin-bottom: 20px;
   }

   .form-group i {
       position: absolute;
       right: 14px;
       top: 42px;
       color: #888;
       pointer-events: none;
   }

   .theme-btn {
       background-color: #007bff;
       color: #fff;
       padding: 10px 10px;
       font-size: 16px;
       border: none;
       border-radius: 6px;
       transition: background-color 0.3s ease;
       display: inline-flex;
       align-items: center;
       gap: 8px;
   }

   .theme-btn:hover {
       background-color: #0056b3;
       cursor: pointer;
   }

   .trip-type-options label {
       font-weight: 500;
       font-size: 14px;
       margin-right: 20px;
       display: inline-flex;
       align-items: center;
   }

   .trip-type-options input[type="radio"] {
       margin-right: 6px;
       accent-color: #007bff;
   }

   #cab_type option {
       font-weight: bold;
   }

   .return-field.d-none {
       display: none;
   }

   /* Modal Card Styling */
   #cab-list .card {
       transition: transform 0.3s ease;
       border-radius: 10px;
   }

   #cab-list .card:hover {
       transform: translateY(-5px);
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
   }

   #cab-list .card-title {
       font-size: 18px;
       font-weight: 600;
   }

   #cab-list p {
       margin: 4px 0;
       font-size: 14px;
   }

   .modal-header .close span {
       font-size: 28px;
       font-weight: bold;
       color: #555;
   }

   /* Trip type label - larger and bolder */
   .trip-type-options label {
       font-size: 16px !important;
       font-weight: 600 !important;
       color: #333;
   }

   /* Input field text bold */
   .form-control {
       font-weight: 600 !important;
       color: #222 !important;
   }

   label {
       display: block;
       font-size: 15.5px;
       font-weight: 700;
       margin-bottom: 8px;
       color: #212529;
       letter-spacing: 0.3px;
   }

   /* Modal header */
   #bookingConfirmModal .modal-header {
       background: linear-gradient(135deg, #007bff, #00d4ff);
       color: white;
       border-bottom: none;
       font-weight: 600;
       font-size: 1.5rem;
       justify-content: center;
   }

   /* Modal body */
   #bookingConfirmModal .modal-body {
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       font-size: 1rem;
       color: #333;
       line-height: 1.5;
       max-height: 60vh;
       overflow-y: auto;
       padding: 1.5rem 2rem;
   }

   /* Highlight important labels */
   #bookingConfirmModal strong {
       color: #007bff;
   }

   /* Sections inside modal */
   #bookingConfirmModal h4 {
       color: #0056b3;
       margin-top: 1.5rem;
       margin-bottom: 0.75rem;
       font-weight: 700;
       border-bottom: 2px solid #00d4ff;
       padding-bottom: 0.25rem;
   }

   /* List styling */
   #bookingConfirmModal ul {
       list-style-type: disc;
       padding-left: 1.5rem;
       color: #555;
   }

   /* Modal footer buttons */
   #bookingConfirmModal .modal-footer {
       justify-content: center;
       border-top: none;
       padding: 1rem 2rem;
   }

   /* Confirm button style */
   #confirmBookingBtn {
       background: #007bff;
       border: none;
       color: white;
       font-weight: 600;
       padding: 0.5rem 2rem;
       border-radius: 30px;
       transition: background-color 0.3s ease;
   }

   #confirmBookingBtn:hover {
       background: #0056b3;
       cursor: pointer;
   }

   /* Cancel/close button */
   #bookingConfirmModal .btn-close {
       filter: brightness(0) invert(1);
       opacity: 0.7;
       transition: opacity 0.3s ease;
   }

   #bookingConfirmModal .btn-close:hover {
       opacity: 1;
   }

   .modal-body {
       padding: 10px 20px !important;
   }

   #cab-list .card {
       height: 100%;
   }

   #bookingSuccessMessage,
   #bookingSummary {
       transition: all 0.3s ease-in-out;
   }

   #bookingSuccessMessage {
       animation: fadeInDown 0.6s ease-in-out;
   }

   @keyframes fadeInDown {
       from {
           opacity: 0;
           transform: translateY(-30px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   #cab_type {
       line-height: 1.5;
       padding: 6px 12px;
       height: auto;
       overflow: visible;
   }

   .flatpickr-time {
       background-color: #f0f8ff;
       border: 1px solid #007bff;
       border-radius: 5px;
   }

   .floating-icons {
       position: fixed;
       right: 15px;
       bottom: 80px;
       z-index: 9999;
       display: flex;
       flex-direction: column;
       gap: 12px;
   }

   .floating-icons a {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 50px;
       height: 50px;
       background-color: #25D366;
       /* WhatsApp green */
       color: #fff;
       border-radius: 50%;
       text-decoration: none;
       font-size: 22px;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
       transition: all 0.2s ease;
   }

   .floating-icons a.call-icon {
       background-color: #0d6efd;
       /* Bootstrap primary blue */
   }

   .floating-icons a:hover {
       transform: scale(1.1);
   }

   @media (max-width: 576px) {
       .floating-icons {
           right: 10px;
           bottom: 70px;
       }

       .floating-icons a {
           width: 45px;
           height: 45px;
           font-size: 20px;
       }
   }

   .navbar-toggler-icon-custom {
       display: flex;
       flex-direction: column;
       justify-content: center;
       width: 24px;
       height: 18px;
       gap: 4px;
   }

   .navbar-toggler-icon-custom span {
       display: block;
       height: 3px;
       width: 100%;
       background-color: #007bff;
       border-radius: 2px;
       transition: 0.3s ease-in-out;
   }

     /* Custom Navbar Toggler Clean Style */
  .custom-toggler {
    padding: 6px;
    margin-left: auto;
    margin-right: 10px;
    outline: none;
    background: transparent;
  }

  .custom-toggler .toggler-icon {
    display: block;
    width: 28px;
    height: 2.5px;
    margin: 6px auto;
    background-color: #333;
    border-radius: 2px;
    transition: all 0.4s ease;
  }

  /* Hamburger to X animation */
  .navbar-toggler[aria-expanded="true"] .top-bar {
    transform: rotate(45deg) translate(6px, 6px);
  }

  .navbar-toggler[aria-expanded="true"] .middle-bar {
    opacity: 0;
  }

  .navbar-toggler[aria-expanded="true"] .bottom-bar {
    transform: rotate(-45deg) translate(6px, -6px);
  }

    .tariff-table thead th {
        background-color: #212529;
        color: #ffc107;
    }

    .tariff-table tbody tr:hover {
        background-color: #fffbe6;
    }

    .highlight-badge {
        background-color: #ffc107;
        color: #000;
        padding: 6px 16px;
        display: inline-block;
        font-size: 1rem;
        font-weight: 500;
        border-radius: 4px;
    }

    .site-title {
        font-weight: 700;
        color: #212529;
    }

    .highlight-divider {
        width: 60px;
        height: 3px;
        background-color: #ffc107;
        margin: 15px auto;
    }

    .fare-box {
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        padding: 25px;
    }

    .fare-box h5 {
        color: #ffc107;
        font-weight: 600;
        margin-bottom: 15px;
    }

    .fare-box .list-group-item span {
        font-weight: 600;
        color: #212529;
    }

    .theme-btn{
        background-color: #cc8904 !important;
    }

    .navbar-toggler .border-0{
        padding: 10px!important;
    }