/* General Form Styles */
#bookingForm {
    background-color: #FFFFFF; 
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    font-family: Arial, sans-serif;
    max-width: 400px; 
    margin: auto;
}

/* Heading Styles */
#bookingForm h3 {
    background-color: #2360A2; 
    color: #fff; 
    text-align: center;
    border-radius: 10px 10px 0 0;
    padding: 15px;
    margin: -20px -20px 20px -20px; 
    font-size: 20px;
    font-weight: bold;
}

/* Input Fields Styles */
#bookingForm label {
    font-weight: bold;
    color: #333;
    font-size: 14px;
    margin-bottom: 5px; 
    display: block; 
}

#bookingForm input[type="text"],
#bookingForm input[type="date"],
#bookingForm input[type="time"],
#bookingForm input[type="number"] {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
    font-size: 14px;
}

/* General body styling */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

/* Main Container for Journey and Car Cards */
.container {
    display: flex;
    justify-content: space-between; /* Space between left and right */
    margin: 20px auto;
    max-width: 1200px; /* Max width for the entire container */
}

/* Journey Details Box Styling */
.journey-details-box {
    background-color: #fff;
    border-radius: 5px;
    padding: 15px;
    width: 30%; /* 30% width for the journey details */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	max-height: fit-content;
}

.journey-details-box h3 {
    text-align: center;
    font-size: 24px;
    color: #333;
	margin-bottom:15px;

}

.journey-details-box ul {
    list-style-type: none;
    padding: 0;
}

.journey-details-box ul li {
    font-size: 16px;
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
    color: #666;
}
.journey-details-box ul li::before {
    content: '✔️'; /* Add checkmark before each item */
    margin-right: 10px; /* Space between checkmark and text */
    color: #2360A2; /* Color matching with the heading */
}

.journey-details-box ul li:last-child {
    font-weight: bold;
    color: #2360A2; /* Highlight pickup and destination in blue */
}

/* Car Cards Container */
.car-cards-container {
    width: 70%; /* 70% width for car cards */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Individual Car Card Styling */
.car-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 800px;
    overflow: hidden;
    transition: transform 0.2s ease-in-out;
}

.car-card:hover {
    transform: scale(1.05);
}

/* Main Container for Car Card */
.main-container {
    padding: 15px;
}

/* Car Details Container */
.car-details-container h3 {
    font-size: 20px;
    color: #333;
	
}

.car-details-container .car-details {
    color: #777;
    font-size: 14px;
    margin-bottom: 10px;
	
}

/* Image and Features Container */
.image-features-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
	padding-left:40px;
}

/* Car Image Styling */
.car-image-container {
    width: 300px;
    height: 180px;
	
}

.car-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
	
}

/* Car Features */
.car-features-container {
    flex: 1;
    margin-left: 15px;
}

.car-features-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #444;
    font-size: 14px;
}

.car-features-container ul li {
    margin-bottom: 4px;
}

/* Price and Button */
.price-current {
    font-size: 18px;
    font-weight: bold;
    color: #e74c3c;
    margin: 10px 0;
}

.book-now {
    background-color: #3498db;
    color: #fff;
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.book-now:hover {
    background-color: #2980b9;
}

/* Total Price Display */
#total-price {
    text-align: center;
    margin: 20px auto;
    padding: 15px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 50%;
    max-width: 400px;
}

#total-price h3 {
    font-size: 20px;
    color: #333;
}

#price-amount {
    font-weight: bold;
    color: #e74c3c;
}

/* Responsive Design for Mobile */
@media screen and (max-width: 768px) {
    .car-cards-container {
        flex-direction: column;
        align-items: center;
    }

    .car-card {
        width: 100%;
    }

    .journey-details-box {
        width: 95%;
    }

    #total-price {
        width: 80%;
    }

    .container {
        flex-direction: column; /* Stack on mobile */
    }
}
/* Overall form styling */
.form-container {
    width: 100%; /* Form container ki width ko 100% set karein */
    max-width: 1200px; /* Optional: aap maximum width set kar sakte hain */
    margin: 20px auto; /* Top-bottom margin 20px, left-right auto for center alignment */
    padding: 20px; /* Inner spacing */
    background-color: #ffffff; /* Background color */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Shadow effect */
    overflow: hidden; /* Overflow hidden to prevent scroll */
}

/* Form rows */
.form-row {
    display: flex; /* Flexbox for horizontal layout */
    justify-content: space-between; /* Spacing between elements */
    margin-bottom: 15px; /* Bottom margin for spacing */
}

/* Form columns */
.form-column {
    flex: 1; /* Flex grow for equal width */
    margin-right: 10px; /* Right margin */
}

.form-column:last-child {
    margin-right: 0; /* Remove margin from last column */
}

/* Input and select styling */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
select,
textarea {
    width: 100%; /* Full width */
    padding: 8px; /* Inner spacing */
    border: 1px solid #ccc; /* Border color */
    border-radius: 4px; /* Rounded corners */
    box-sizing: border-box; /* Include padding and border in total width */
    font-size: 14px; /* Font size reduced */
}

/* Specific styling for discount code input */
#discount-code {
    width: 100px; /* Width for discount code box */
    padding: 8px; /* Inner spacing */
}

/* Label styling */
label {
    font-weight: bold; /* Bold text */
    margin-bottom: 5px; /* Space below the label */
    display: block; /* Block display for labels */
    font-size: 14px; /* Font size reduced */
}

/* Price section */
.price-section {
    display: flex; /* Flexbox for horizontal layout */
    justify-content: space-between; /* Space between elements */
    align-items: center; /* Center align items vertically */
    margin-top: 20px; /* Top margin */
}

.price-section h4 {
    font-size: 18px; /* Font size */
    color: #d9534f; /* Price color */
}

/* Button styling */
.book-now {
    background-color: #00529e; /* Button color */
    color: #ffffff; /* Text color */
    padding: 20px 20px; /* Inner spacing reduced */
    border: none; /* No border */
    border-radius: 4px; /* Rounded corners */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s; /* Transition for hover effect */
}

.book-now:hover {
    background-color: #2479d5;
	 /* Darker shade on hover */
}

/* Responsive design */
@media (max-width: 600px) {
    .form-row {
        flex-direction: column; /* Stack elements on smaller screens */
    }

    .form-column {
        margin-right: 0; /* Remove right margin */
        margin-bottom: 10px; /* Bottom margin for spacing */
    }

    .form-column:last-child {
        margin-bottom: 0; /* Remove margin from last column */
    }
}