.header-main { justify-content: space-between; } .faq-sidebar img { object-fit: cover; /* Ensures the image covers the area */ height: 100%; /* Matches the container height */ width: 100%; /* Stretches to container width */ } .faq-section { display: flex; align-items: center; padding: 50px 0; } .faq-sidebar img { display: block; max-height: 100%; object-fit: contain; } .faq-sidebar img.custom-img { width: auto; /* Maintains aspect ratio */ height: 100%; /* Spans full height of the column */ max-height: 600px; /* Optional: Limits the height */ display: block; position: relative; /* Enables positioning adjustments */ left: -50px; top: 30px; /* Moves the image slightly to the left */ z-index: 1; /* Ensures the image doesn't overlap other elements */ } .car-image { text-align: center; /* Centers the image horizontally */ margin-bottom: 15px; /* Adds spacing below the image */ } .car-image img { width: 100%; /* Ensures the image spans the container width */ height: auto; /* Maintains aspect ratio */ border-radius: 8px; /* Optional: Adds rounded corners */ } .car-content { padding: 10px; /* Adds spacing around the content */ } .star i { color: #FFD700; /* Gold color for stars */ } .price { font-size: 16px; color: #333; } .car-list { display: flex; flex-direction: column; gap: 25px; /* Added gap between cars */ width: 200px; } .car-item { border: 1px solid #ccc; border-radius: 5px; padding: 10px; text-align: center; background-color: #f9f9f9; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: center; } .car-item img { width: 100%; height: auto; border-radius: 5px; } .car-item .details { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 5px; } .car-item a { text-decoration: none; color: #333; font-weight: bold; } .car-item a:hover { color: #007BFF; } .rate { font-size: 14px; color: white; font-weight: bold; background-color: #FF6600; /* Pure orange color */ padding: 5px 10px; border-radius: 5px; animation: pulse 1.5s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .header-1 .header-main .header-left { display: flex; align-items: center; gap: 190px; transform: translateX(75px); /* Moves the element 20px to the right */ } @media (max-width: 900px) { .search-text, .line-icon { display: none; } } @media (max-width: 768px) { .logo { position: absolute; /* Or fixed if you want it to stay while scrolling */ right: 1px; /* Position it on the right side */ z-index: 10; /* Ensure it's on top of other content */ } .header-logo img { width: auto; /* Ensure the logo does not get stretched */ height: 30px; /* Adjust logo size if needed */ } } .popup-message { display: none; /* Initially hidden */ position: fixed; top: 20%; left: 50%; transform: translateX(-50%); background-color: #4CAF50; color: white; padding: 20px; border-radius: 5px; font-size: 16px; z-index: 9999; } .popup-message.error { background-color: #f44336; /* Red background for error messages */ } .popup-message .close-btn { margin-left: 20px; cursor: pointer; font-weight: bold; } .logo img { width: 120px; /* Adjust the width */ height: 60px; /* Maintain aspect ratio */ } a:hover { color: #f39c12; text-decoration: underline; } .contact-form-items { background-color: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); animation: fadeInUp 1s ease-out; } .input-field { border: 1px solid #ccc; padding: 12px; font-size: 16px; width: 100%; border-radius: 5px; margin-top: 10px; transition: all 0.3s ease; } .input-field:focus { border-color: #007bff; box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); } .input-field::placeholder { color: #aaa; } .label-text { font-size: 14px; font-weight: 600; color: #555; } .theme-btn { background-color: #007bff; color: #fff; border: none; padding: 12px 30px; border-radius: 30px; font-size: 16px; cursor: pointer; transition: all 0.3s ease; } .theme-btn:hover { background-color: #0056b3; transform: translateY(-2px); } .animated-btn { position: relative; overflow: hidden; } .animated-btn::after { content: ''; position: absolute; width: 300%; height: 100%; top: 0; left: -100%; background-color: rgba(255, 255, 255, 0.2); transition: all 0.4s ease; } .animated-btn:hover::after { left: 100%; } .category { border: 1px solid #ccc; padding: 12px; font-size: 16px; width: 100%; border-radius: 5px; background: #fff; appearance: none; transition: all 0.3s ease; } .category:hover { border-color: #007bff; } .category:focus { border-color: #007bff; box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } .car-booking-items { background: linear-gradient(45deg, rgb(240, 101, 9), rgb(246, 238, 4)); border-radius: 10px; padding: 40px 30px; color: #fff; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); font-family: 'Roboto', sans-serif; width: 100%; max-width: 850px; margin: 40px auto; } .booking-header h3 { font-size: 24px; margin-bottom: 10px; } .booking-header p { font-size: 16px; margin-bottom: 25px; font-weight: 300; } .label-text { font-size: 16px; color: #fff; margin-bottom: 8px; } .input-field { width: 100%; padding: 12px; border: 2px solid #fff; border-radius: 5px; margin-bottom: 20px; font-size: 16px; color: #333; background-color: #f7f7f7; transition: border-color 0.3s ease; } .input-field:focus { border-color: #ff7b00; outline: none; } .input-group-addon i { color: #ff7b00; } .ui-datepicker { font-size: 14px; border-radius: 5px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .theme-btn { background-color: #ff7b00; color: #fff; padding: 15px 25px; border-radius: 5px; font-size: 18px; border: none; cursor: pointer; width: 100%; transition: background-color 0.3s ease; } .theme-btn:hover { background-color: #ff6600; } .animated-btn { position: relative; overflow: hidden; } .animated-btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; background: rgba(255, 255, 255, 0.2); transition: all 0.4s ease; transform: translate(-50%, -50%) scale(0); border-radius: 50%; } .animated-btn:hover::after { transform: translate(-50%, -50%) scale(1); } /* Form Container */ .form-clt { margin-bottom: 20px; } /* Input Container Styles */ .input-group-addon { display: flex; align-items: center; justify-content: center; background-color: #fff; border: 1px solid #ddd; border-radius: 50%; padding: 8px; color: #ff7b00; } /* Responsive Design */ @media (max-width: 767px) { .row { display: block; } .col-lg-6, .col-lg-4 { width: 100%; } }