body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
line-height: 1.6;
background-color: #f8f9fa;
color: #212529;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* navbar */
.nav-clr{background-color: bisque;}
.for-w{max-width: 750px;}
.inp-bor{border-radius: 43px; height: 46px; min-width: 120px;}
.but-bor{border: none; background: transparent;}
.set-carimg{width: 100%; display: flex; justify-content: center; object-fit: fill;}
.icon-set{width: 90px; height: 75px; object-fit: cover;}
.state-card{margin-top: 10px; background-color: aliceblue;}
.linkedin-img{background-color: aliceblue;height: 24vh;}
.subst-img{background-color: aliceblue;}
.offers-card{width: 58%;padding: 0;}
a{text-decoration: none ! important;}
.profile-dropdown-menu {display: none;position: absolute;right: 0;background: #fff;border: 1px solid #ddd;border-radius: 10px;width: 250px;padding: 15px;box-shadow: 0 8px 16px rgba(0,0,0,0.1);z-index: 1000;}
.off1{ margin-left: -120px;}
.car-nav-list a {display: block;padding: 8px;color: black;cursor: pointer;}
.car-content {display: none;}
.price-content {display: none;margin-top: 10px;}
.lh1{
display: block;
}
.lh2{
display: none;
}
.cities-grid-wrapper {
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
color: #333;
}
.cities-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.offer-section-img {
padding: 0px !important;
margin-top: 0 ! important;
}
.city-card {
background-color: #f9f9f9;
border-radius: 10px;
padding: 15px 10px;
text-align: center;
width: 150px;
box-shadow: 0 1px 5px rgba(0,0,0,0.1);
transition: transform 0.2s;
}
.city-card:hover {
transform: scale(1.05);
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
.hb{
height: 35vh;
}
.city-icon {
width: 50px;
height: 50px;
background-color: #e6f0ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
}
.city-icon i {
font-size: 22px;
color: #007bff;
}
.city-name {
font-size: 14px;
color: #555;
line-height: 1.4;
}
.city-name span {
font-size: 16px;
color: #000;
}
.renn{
height: 26vh ! important;
margin-bottom: 0 ! important;
}
.card-img-top1 {
height: 12vh;
object-fit: cover;
}
.divflex-column {
padding: 1vh !important;
}
.search-city-input-group {
padding: 20px;
background: #fff;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.1);
}
.car-card1 {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex;
justify-content: center;
flex-direction: column;
transition: transform 0.2s ease-in-out;
cursor: pointer;
min-width: 162px ! important;
margin-top: 0px;
margin-bottom: 8px;
}
.search-city-input-group label {
display: block;
margin-bottom: 10px;
font-weight: 600;
font-size: 14px;
}
#city-search {
width: 100%;
padding: 10px;
font-size: 14px;
border-radius: 6px;
border: 1px solid #ccc;
}
.fa3{
display: block ;
}
.form-section {
border: 1px solid #ccc;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.image-upload-box {
border: 2px dashed #007bff;
padding: 40px 20px;
text-align: center;
color: #007bff;
cursor: pointer;
border-radius: 5px;
/* margin-top: 20px; Removed as we are using flex */
}
.image-upload-box:hover {
background-color: #f8f9fa;
}
/* Optional: Add some space between label and input */
.form-group label {
font-weight: bold;
}
/* Custom style for aligning the "Select Image" label and "Drop or Click" box */
.image-upload-flex-container {
display: flex;
align-items: center; /* Vertically center items */
justify-content: space-between; /* Pushes items to ends, or use space-around, or space-evenly */
margin-top: 20px; /* Add some top margin to this whole section */
}
/* Adjust column width for image box inside flex */
.image-upload-flex-container .image-upload-box {
flex-grow: 1; /* Allow the box to grow and fill available space */
margin-left: 15px; /* Add some space between label and box */
}
/* Ensure the label doesn't take up too much space */
.image-upload-flex-container label {
flex-shrink: 0; /* Prevent label from shrinking */
margin-right: 15px; /* Space between label and box */
min-width: 120px; /* Give label some consistent width if needed */
}
.profile-section {
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
background-color: whitesmoke;
}
.logo-container {
text-align: center;
margin-bottom: 15px;
margin-top: 25px;
}
.logo {
width: 80px;
height: 80px;
background-color: #f0f0f0;
border-radius: 50%;
display: block; /* Keep as block if you want it to take full width of its container or use margin: auto */
line-height: 80px; /* Vertical centering for single line text */
font-size: 14px;
text-align: center; /* Horizontally center text inside the .logo div */
margin: 0 auto; /* To horizontally center the .logo div itself within its parent */
}
.profile-menu-container {
position: relative; /* For positioning the dropdown menu relative to this container */
/* This container would typically be part of a header or navigation bar */
}
/* Styling for the user avatar and dropdown arrow at the top right */
.user-avatar-dropdown {
display: flex;
align-items: center;
cursor: pointer;
margin-bottom: 10px; /* Space between the top avatar and the dropdown */
justify-content: flex-end; /* Align to the right */
padding-right: 10px; /* Some padding from the edge */
position: absolute;
top: -55px; /* Adjust based on your header layout */
right: 0;
width: 100%; /* Take full width of its relative parent */
}
.avatar-thumbnail {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
margin-right: 8px;
border: 1px solid #ddd;
}
.dropdown-arrow {
font-size: 0.8em;
color: #555;
}
/* Main dropdown menu styling */
.profile-dropdown-menu {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
width: 250px; /* Fixed width as seen in the image */
overflow: hidden; /* Ensures borders/shadows are clean */
padding-bottom: 10px; /* Space at the bottom */
position: absolute;
top: 0; /* Position relative to .profile-menu-container */
right: 0;
z-index: 1000; /* Ensure it's above other content */
}
/* User Info Section */
.user-info {
display: flex;
align-items: center;
padding: 15px;
border-bottom: 1px solid #eee;
margin-bottom: 10px;
}
.user-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
margin-right: 15px;
border: 2px solid #ddd; /* Subtle border for the avatar */
}
.user-details {
display: flex;
flex-direction: column;
}
.user-name {
font-weight: bold;
color: #333;
font-size: 1.1em;
margin-bottom: 2px;
}
.edit-profile-link {
color: #007bff; /* Standard link blue */
font-size: 0.85em;
text-decoration: none;
transition: color 0.2s ease;
}
.edit-profile-link:hover {
text-decoration: underline;
color: #0056b3;
}
/* My Points Section */
.my-points {
display: flex;
align-items: center;
padding: 5px 15px 15px 15px; /* Adjust padding for visual alignment */
border-bottom: 1px solid #eee;
margin-bottom: 10px;
font-size: 0.9em;
color: #555;
}
.points-badge {
background-color: #28a745; /* Green color for the badge */
color: #fff;
font-weight: bold;
padding: 3px 8px;
border-radius: 15px; /* Pill shape */
margin: 0 8px;
font-size: 0.85em;
}
.upgrade-link {
color: #007bff; /* Standard link blue */
font-weight: bold;
text-decoration: none;
font-size: 0.9em;
transition: color 0.2s ease;
}
.upgrade-link:hover {
text-decoration: underline;
color: #0056b3;
}
/* Menu List */
.menu-list {
list-style: none;
padding: 0;
margin: 0;
}
.menu-list li {
margin-bottom: 2px; /* Small space between items */
}
.text-orange {
color: #fd7e14 !important;
}
.likk{
display: flex;
justify-content: center;
gap: 30px;
padding: 11px;
overflow-y: hidden;
margin-top: 10px;
}
.page-wrapper {
max-width: 1200px;
margin: 20px auto;
padding: 0 10px;
box-sizing: border-box;
}
.user-reviews-card {
background-color: #fff;
padding: 9px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,.08);
border: none;
width: 178%;
}
/* Section Title */
.user-reviews-card h5 {
font-weight: 600;
margin-bottom: 20px;
color: #333;
}
/* Overall Rating Section */
.overall-rating-section {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.overall-rating-section .star-icon {
font-size: 2.2em; /* Large star icon */
color: #ffc107; /* Orange/Yellow for rating star */
margin-right: 10px;
flex-shrink: 0; /* Prevent shrinking */
}
.overall-rating-section .rating-value {
font-size: 2.5em; /* Large number for rating */
font-weight: bold;
color: #333;
line-height: 1; /* Align vertically with text better */
margin-right: 10px;
}
.overall-rating-section .rating-text {
font-size: 0.9em;
color: #555;
line-height: 1.2;
}
.overall-rating-section .rating-text small {
display: block; /* "Overall Rating" and "Based on X reviews" on separate lines */
font-size: 0.8em;
color: #888;
}
/* Popular Mentions Tags (from previous request) */
.popular-mentions p.title {
font-size: 0.9em;
color: #666;
margin-bottom: 10px;
}
.tag-pills .badge {
font-size: 0.9em;
font-weight: 500;
padding: 8px 15px;
margin-right: 10px;
margin-bottom: 10px; /* For wrapping on smaller screens */
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
border: 1px solid #dee2e6;
white-space: nowrap; /* Prevent text inside badge from wrapping */
}
.tag-pills .badge.text-bg-light-custom {
background-color: #f8f9fa;
color: #495057;
}
.tag-pills .badge.active-dark {
background-color: #343a40;
color: #fff;
border-color: #343a40;
}
.lan2{
display: block;
}
.tag-pills .badge:hover:not(.active-dark) {
background-color: #e9ecef;
}
/* Reviews Summary & Sort */
.reviews-summary {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 25px; /* Space after popular mentions */
margin-bottom: 20px;
padding-bottom: 15px; /* Padding for the separator */
border-bottom: 1px solid #eee; /* Separator line */
}
.reviews-summary strong {
font-size: 1.05em;
color: #333;
}
.reviews-summary .sort-dropdown {
position: relative;
}
.reviews-summary .sort-dropdown .dropdown-toggle {
color: #666;
font-size: 0.9em;
text-decoration: none;
}
.reviews-summary .sort-dropdown .dropdown-toggle::after {
vertical-align: 0.05em; /* Adjust arrow position */
margin-left: 0.3em;
}
/* Individual Review Item */
/* Style for subsequent reviews if there were more */
.review-item + .review-item {
border-top: 1px solid #eee;
}
.reviewer-info-header {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.reviewer-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #d1e7dd; /* Light green/blue background */
color: #0f5132; /* Darker green/blue text */
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.1em;
margin-right: 15px;
flex-shrink: 0;
}
.reviewer-details .name-date {
font-weight: 600;
color: #333;
font-size: 0.95em;
}
.reviewer-details .rating-text-small {
display: flex;
align-items: center;
font-size:12px;
color: #666;
}
.reviewer-details .rating-text-small .stars i {
color: #ffc107;
font-size: 0.9em;
margin-right: 5px;
}
.review-title {
font-weight: 600;
color: #333;
font-size: 1.05em;
margin-bottom: 8px;
}
.review-text-content {
font-size: 0.9em;
color: #444;
line-height: 1.6;
margin-bottom: 15px;
}
.review-text-content .read-more {
color: #007bff;
text-decoration: none;
font-size: 0.9em;
font-weight: 500;
}
.review-text-content .read-more:hover {
text-decoration: underline;
}
.review-helpful-section {
display: flex;
align-items: center;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #eee; /* Separator for helpfulness section */
}
.review-helpful-section span {
font-size: 0.9em;
color: #666;
margin-right: 15px;
}
.review-helpful-section .btn-link-custom {
font-size: 0.9em;
color: #007bff;
text-decoration: none;
padding: 5px 12px;
border: 1px solid #007bff;
border-radius: 5px;
margin-right: 10px;
transition: all 0.2s ease;
}
.review-helpful-section .btn-link-custom:hover {
background-color: #007bff;
color: #fff;
}
.review-helpful-section .btn-link-custom.no {
color: #6c757d; /* Muted grey for 'No' */
border-color: #6c757d;
}
.review-helpful-section .btn-link-custom.no:hover {
background-color: #6c757d;
color: #fff;
}
.review-helpful-section .helpful-count {
font-size: 0.85em;
color: #666;
margin-left: auto; /* Pushes to the right */
display: flex;
align-items: center;
}
.review-helpful-section .helpful-count i {
color: #28a745; /* Green for thumbs up */
margin-right: 5px;
}
.rr{
display: flex;
font-size: 12px;
gap: 60px;
}
.recommended-cars-section {
background-color: #fff;
padding: 10px;
border-radius: 8px;
position: relative; /* Essential for positioning the absolute scroll arrow */
width: 178%;
}
.recommended-cars-section h5 {
font-weight: 600;
margin-bottom: 5px;
color: #333;
font-size: 1.25em;
}
.recommended-cars-section small.text-muted {
font-size: 0.85em;
display: block;
/* margin-bottom: 20px; */
margin-top: 11px;
}
/* Horizontal Scroll Wrapper */
.recommended-cars-scroll-wrapper {
display: flex; /* Use flexbox to lay out cards horizontally */
overflow-x: auto; /* Enable horizontal scrolling when content overflows */
-webkit-overflow-scrolling: touch; /* For smoother scrolling on iOS */
scroll-snap-type: x mandatory; /* Makes cards snap into view */
gap: 20px; /* Gap between flex items (cards) */
}
/* Hide scrollbar for a cleaner look if desired, but makes it less discoverable */
.recommended-cars-scroll-wrapper::-webkit-scrollbar {
display: none; /* For Chrome, Safari, Opera */
}
.recommended-cars-scroll-wrapper {
-ms-overflow-style: none; /* For IE and Edge */
scrollbar-width: none; /* For Firefox */
}
/* Individual Car Card Styling */
.recommended-car-card {
flex: 0 0 auto; /* Prevent growing, prevent shrinking, use auto basis */
width: 300px; /* Set a fixed width for each card as per the image's appearance */
scroll-snap-align: start; /* Snap to the start of each card */
}
.recommended-car-card .card {
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,.08);
border: 1px solid #e0e0e0; /* A very subtle border */
transition: transform 0.2s ease-in-out; /* Smooth hover effect */
}
.recommended-car-card .card:hover {
transform: translateY(-3px); /* Slight lift on hover */
box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.recommended-car-card .card-img-top {
height: 170px; /* Fixed height for consistent image size */
object-fit: cover; /* Cover the area, cropping if necessary */
border-top-left-radius: 8px;
border-top-right-radius: 8px;
width: 100%;
}
#carouselTracksuv::-webkit-scrollbar,
#carouselTrackhell1::-webkit-scrollbar,
#carouselTrackhell2::-webkit-scrollbar,
#carouselTrackhell::-webkit-scrollbar,
#carouselTracksedn::-webkit-scrollbar,
#carouselTrackmuv::-webkit-scrollbar,
#carouselTracklux::-webkit-scrollbar,
#carouselTrackhatch::-webkit-scrollbar {
display: none;
}
.car-content.active {
display: block;
}
.recommended-car-card .card-body {
padding: 3px;
}
.recommended-car-card .card-title {
font-size: 1.05em; /* Slightly larger title */
font-weight: 600;
margin-bottom: 3px; /* Reduce margin */
color: #333;
}
.recommended-car-card .card-text {
font-size:12px; /* Smaller text for details */
color: #666;
margin-bottom: 5px;
}
.recommended-car-card .price {
font-size:12px;
color: #333;
font-size: 1.3em; /* Prominent price */
margin-bottom: 10px;
}
.recommended-car-card .view-details-link {
font-size: 0.9em;
color: #007bff; /* Bootstrap primary blue */
text-decoration: none;
display: inline-flex; /* Align icon and text */
align-items: center;
}
.recommended-car-card .view-details-link i {
margin-left: 5px; /* Space between text and icon */
font-size: 0.8em; /* Smaller icon */
}
.recommended-car-card .view-details-link:hover {
text-decoration: underline;
}
.recommended-car-card .compare-checkbox {
display: flex;
align-items: center;
font-size: 0.9em;
color: #555;
}
.recommended-car-card .compare-checkbox input {
margin-right: 6px; /* Space between checkbox and label */
width: 16px; /* Custom size for checkbox */
height: 16px;
flex-shrink: 0; /* Prevent shrinking */
}
.recommended-car-card .location-info {
font-size: 0.8em;
color: #666;
margin-top: 10px;
display: flex;
align-items: center;
}
.recommended-car-card .location-info i {
margin-right: 5px;
color: #888; /* Slightly darker icon */
}
/* Scroll Arrow Styling */
.scroll-arrow {
position: absolute;
top: 50%; /* Vertically center */
transform: translateY(-50%); /* Adjust for exact centering */
right: 25px; /* Position from the right edge of the section */
background-color: white;
border-radius: 50%;
width: 48px; /* Slightly larger button */
height: 48px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 10px rgba(0,0,0,.15); /* More pronounced shadow */
cursor: pointer;
z-index: 10; /* Ensure it's above other content */
border: 1px solid #f0f0f0; /* Light border */
}
.scroll-arrow i {
color: #007bff; /* Bootstrap primary blue for the icon */
font-size: 1.3em; /* Slightly larger icon */
}
/* Hide the arrow on small screens if it doesn't make sense to scroll */
@media (max-width: 991px) { /* Adjust breakpoint as needed */
}
.card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
margin-bottom: 10px;
}
.renv{
gap: 50px;
}
h1, h2, h3 {
color: #333;
margin-top: 0;
}
a {
color: #007bff;
text-decoration: none;
}
.carousel-inner .row {
margin-left: 0;
margin-right: 0;
}
.carousel-inner .col-6 {
padding-left: 10px;
padding-right: 10px;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-color: #000;
border-radius: 50%;
}
a:hover {
text-decoration: underline;
}
/* Top Header / Listing Title (from right sidebar, placed here for consistent info) */
.listing-header-top {
display: none; /* Hide this on large screens where sticky sidebar is present */
background-color: #fff;
padding: 15px;
border-bottom: 1px solid #eee;
margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.listing-title-card .listing-title {
font-size: 22px;
font-weight: bold;
margin-bottom: 5px;
}
.listing-title-card .listing-price {
font-size: 20px;
font-weight: bold;
color: #333;
margin-bottom: 5px;
}
.carousel-inner .row {
margin-left: 0;
margin-right: 0;
}
.carousel-inner .col-6 {
padding-left: 10px;
padding-right: 10px;
}
.listing-title-card .listing-location {
font-size: 14px;
color: #666;
margin-bottom: 15px;
}
/* Main Content Area Layout */
.main-content-area {
display: flex;
gap: 20px; /* Space between columns */
align-items: flex-start; /* Align items to the top */
}
.profile-dropdown-menu {
display: none;position: absolute;right: 0;background: #fff;border: 1px solid #ddd;border-radius: 10px;width: 250px;
padding: 15px;
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
z-index: 1000;
}
.off1{
margin-left: -120px;
}
.cat-img img {
width: 79%;
object-fit: scale-down;
}
.price-input {
max-width: 120px; /* Adjust width of price input fields */
}
.nm1{
background-color: #d9eef5;
}
.w-45 { /* Custom width class for price inputs */
width: 45%;
}
.rein {
max-height: 800px;
overflow-y: scroll !important;
}
.cat-img img {
width: 70%;
object-fit: scale-down;
}
.form-check {
padding-left: 2em; /* Adjust for checkbox alignment */
}
.form-check-input {
margin-left: -1.5em; /* Default Bootstrap offset for checkbox */
}
/* Category Tabs */
.nav-pills .nav-link {
border-radius: 20px; /* Pill shape */
border: 1px solid var(--border-color);
color: #343a40;
padding: 0.5rem 1rem;
transition: all 0.2s ease-in-out;
white-space: nowrap; /* Prevent wrapping */
}
.nav-pills .nav-link.active,
.nav-pills .nav-link:hover {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
/* Car Card Styling */
.car-card {
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
padding: 7px;
}
.car-card:hover {
transform: translateY(-5px);
box-shadow: var(--card-hover-shadow) !important; /* !important to override Bootstrap default */
}
.car-card .card-img-top {
height: 180px; /* Fixed height for consistency */
object-fit: cover;
border-bottom: 1px solid var(--border-color); /* Light separator */
}
.car-title {
font-size: 1.1em;
font-weight: 600;
margin-bottom: 0.5rem;
color: #343a40;
}
.car-price {
font-size: 1.35em;
font-weight: bold;
color: var(--primary-color); /* Use Bootstrap primary color for price */
margin-bottom: 0.75rem;
}
.text-orange {
color: #fd7e14 ! important;
}
.profile-dropdown-menu {
width: 280px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
font-family: "Segoe UI", sans-serif;
}
.user-info {
display: flex;
align-items: center;
padding: 16px;
background-color: #f7f7f7;
border-bottom: 1px solid #eee;
}
.user-avatar {
width: 55px;
height: 55px;
border-radius: 50%;
object-fit: cover;
margin-right: 12px;
}
.user-details {
display: flex;
flex-direction: column;
}
.user-name {
font-weight: 600;
font-size: 16px;
color: #333;
margin-bottom: 4px;
}
.edit-profile-link {
font-size: 13px;
color: #007bff;
text-decoration: none;
}
.edit-profile-link:hover {
text-decoration: underline;
}
.menu-list {
list-style: none;
padding: 0;
margin: 0;
}
.menu-list li {
border-bottom: 1px solid #f0f0f0;
}
.menu-list li:last-child {
border-bottom: none;
}
.menu-list a {
display: flex;
align-items: center;
padding: 14px 16px;
text-decoration: none;
color: #444;
transition: background-color 0.3s;
}
.menu-list a:hover {
background-color: #f9f9f9;
}
.menu-icon {
margin-right: 10px;
font-size: 16px;
color: #007bff;
}
.logout-item a {
color: #dc3545;
}
.logout-item a:hover {
background-color: #ffeaea;
}
.location {
font-size: 0.85em;
}
.bnh{
background-color: #fd7e14 ! important;
}
.form-range::-webkit-slider-thumb {
background-color: #fd7e14;
}
.form-range::-moz-range-thumb {
background-color: #fd7e14;
}
.form-range::-webkit-slider-runnable-track {
background-color: #ffe5d0;
}
.form-range::-moz-range-track {
background-color: #ffe5d0;
}
.view-details-btn {
font-size: 0.8em;
border-radius: 4px;
white-space: nowrap; /* Prevent button text from wrapping */
}
/* Ensure compare checkbox aligns well */
.compare-checkbox {
font-size: 0.85em;
}
.compare-checkbox .form-check-input {
margin-right: 0.5em; /* Spacing between checkbox and label */
}
/* Similar Cars Tags */
.custom-badge {
background-color: var(--light-gray-bg);
border: 1px solid var(--border-color);
color: #343a40 !important; /* Override Bootstrap's text-dark */
padding: 0.6em 1.2em;
font-size: 0.9em;
white-space: nowrap; /* Prevent text wrapping */
}
.left-column {
flex: 2; /* Takes 3 parts of available space */
min-width: 0; /* Allow content to shrink */
}
.right-column-sidebar {
flex: 1; /* Takes 1 part of available space */
display: flex;
flex-direction: column;
gap: 20px;
position:static; /* Will need JS for proper sticky behavior on all browsers/heights */
top: 20px; /* Distance from top when sticky */
align-self: flex-start; /* Ensure it sticks to the top of its flex container */
overflow: hidden;
}
/* Common Card Styling for Seller Details */
.seller-details-card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
padding: 20px;
border: 1px solid #eee;
text-align: center; /* Center align content as per image */
}
.trending-badge {
display: inline-block;
background-color: #e6f7ff; /* Light blue */
color: #1890ff; /* Blue text */
padding: 5px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
margin-bottom: 10px;
}
.trending-badge i {
margin-right: 5px;
}
.chance-badge {
font-size: 13px;
color: #888;
margin-bottom: 15px;
}
.listing-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 5px;
}
.listing-price {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 5px;
}
.listing-location {
font-size: 14px;
color: #666;
margin-bottom: 15px;
}
.listing-location i {
margin-right: 5px;
}
.view-seller-btn {
background-color: #ff5722; /* Orange */
color: #fff;
border: none;
padding: 12px 25px;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
width: 100%;
margin-bottom: 15px;
transition: background-color 0.2s ease;
}
.view-seller-btn:hover {
background-color: #e64a19;
}
.section-subtitle {
font-size: 14px;
color: var(--text-color-medium);
margin-top: -10px;
margin-bottom: 20px;
}
.car-carousel {
display: flex;
overflow-x: auto; /* Enable horizontal scrolling */
gap: var(--gap-spacing);
padding-bottom: 15px; /* Space for scrollbar */
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
scrollbar-width: thin; /* Firefox */
scrollbar-color: var(--primary-color) var(--border-color); /* Firefox */
position: relative; /* For positioning carousel nav buttons */
}
/* Custom scrollbar for Webkit browsers */
.car-carousel::-webkit-scrollbar {
height: 8px;
}
.car-carousel::-webkit-scrollbar-track {
background: var(--border-color);
border-radius: 10px;
}
.car-carousel::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 10px;
}
.carousel-item {
flex-shrink: 0; /* Prevent items from shrinking */
width: 280px; /* Fixed width for carousel items */
background-color: var(--background-white);
border: 1px solid var(--border-color);
border-radius: var(--card-border-radius);
overflow: hidden;
box-shadow: var(--shadow-light);
text-align: left;
display: flex;
flex-direction: column;
}
.carousel-item img {
width: 100%;
object-fit: cover;
display: block;
}
.carousel-item .car-info {
padding: 15px;
display: flex;
flex-direction: column;
flex-grow: 1; /* Allows info section to grow if content varies */
}
.carousel-item .car-year {
font-weight: 600;
color: var(--text-color-dark);
font-size: 15px;
}
.carousel-item .car-model {
color: var(--text-color-dark);
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* Add ellipsis for long names */
}
.carousel-item .car-price {
font-size: 18px;
font-weight: 700;
color: var(--primary-color);
margin: 10px 0;
}
.carousel-item .car-actions {
display: flex;
gap: 10px;
margin-bottom: 10px;
flex-wrap: wrap; /* Allow buttons to wrap */
}
.carousel-item .view-dealer-details {
background-color: var(--primary-color);
color: white;
padding: 8px 12px;
border-radius: 4px;
font-size: 13px;
text-align: center;
flex-grow: 1;
white-space: nowrap;
}
.lyn{
display: inline-flex;
}
.lynk{
margin-left: 55px;
}
.carousel-item .view-dealer-details:hover {
background-color: #d84530;
text-decoration: none;
}
.carousel-item .compare-btn {
background-color: transparent;
color: var(--text-color-medium);
border: 1px solid var(--border-color);
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
flex-grow: 1;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-item .compare-btn i {
margin-right: 5px;
color: var(--text-color-medium);
}
.carousel-item .compare-btn:hover {
background-color: var(--background-light);
border-color: var(--primary-color);
color: var(--primary-color);
}
.carousel-item .car-location {
font-size: 12px;
color: var(--text-color-light);
margin-top: auto; /* Pushes to the bottom */
}
/* Carousel Navigation Buttons (example, would need JS for functionality) */
.carousel-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid var(--border-color);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 20px;
color: var(--text-color-dark);
z-index: 10;
box-shadow: var(--shadow-light);
}
.carousel-nav.next {
right: 0px; /* Adjust positioning */
}
.carousel-nav.prev {
left: 0px; /* Adjust positioning */
display: none; /* Hide prev button initially if at start */
}
.carousel-nav:hover {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.listing-actions {
display: flex;
justify-content: space-around;
border-top: 1px solid #eee;
padding-top: 15px;
}
.listing-actions a {
color: #666;
font-size: 14px;
display: flex;
align-items: center;
text-decoration: none;
}
.listing-actions a i {
margin-right: 8px;
font-size: 16px;
}
.listing-actions a:hover {
color: #007bff;
}
/* Car Media Section */
.car-media-section .main-car-image {
width: 100%;
border-radius: 4px;
margin-bottom: 15px;
object-fit: cover;
height: auto; /* Maintain aspect ratio */
}
.car-media-section .image-thumbnails {
display: flex;
gap: 10px;
justify-content: center;
}
.car-media-section .thumbnail-item {
width: 60px;
height: 40px;
background-color: #eee; /* Placeholder for actual images */
border-radius: 4px;
cursor: pointer;
border: 1px solid #ddd;
transition: border-color 0.2s ease;
}
.car-media-section .thumbnail-item.active {
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
.car-media-section .thumbnail-item:hover {
border-color: #007bff;
}
/* Details Section: Tabs */
.details-tabs {
display: flex;
border-bottom: 1px solid #eee;
margin-bottom: 20px;
position: relative; /* For the active tab indicator */
}
.tab-button {
background-color: transparent;
border: none;
padding: 15px 20px;
font-size: 16px;
cursor: pointer;
color: #666;
font-weight: bold;
transition: color 0.2s ease;
position: relative;
outline: none; /* Remove outline on focus */
}
.tab-button:hover {
color: #333;
}
.tab-button.active {
color: #007bff;
}
.tab-indicator {
position: absolute;
bottom: -1px; /* Align with the border-bottom */
left: 0;
height: 3px;
background-color: #007bff;
width: 0; /* Will be controlled by JS */
transition: width 0.3s ease, left 0.3s ease;
}
/* Tab Content Panels (Initially hide non-active ones with JS/class) */
.tab-content-panel h3 {
font-size: 18px;
margin-bottom: 15px;
color: #333;
}
/* Overview Grid */
.overview-grid, .specs-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Two columns */
gap: 15px; /* Space between items */
}
.overview-item, .specs-item {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px dashed #eee;
font-size: 15px;
}
.overview-item span, .specs-item span {
font-weight: bold;
color: #555;
margin-right: 10px;
}
/* Features List */
.features-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 15px;
}
.feature-item {
font-size: 15px;
color: #555;
display: flex;
align-items: center;
}
.feature-item i {
color: #28a745; /* Green checkmark */
margin-right: 8px;
}
.view-all-link {
display: inline-flex;
align-items: center;
font-size: 14px;
font-weight: bold;
color: #007bff;
margin-top: 10px;
}
.view-all-link i {
margin-left: 5px;
font-size: 12px;
}
/* Recommended Cars Section */
.recommended-cars-section .section-subtitle {
font-size: 14px;
color: #777;
margin-bottom: 20px;
}
.recommended-cars-carousel {
display: flex !;
align-items: center;
position: relative;
overflow: hidden; /* Hide overflow from track */
}
.carousel-track {
display: flex;
overflow-x: auto; /* Enable horizontal scrolling */
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
scrollbar-width: none; /* Hide scrollbar for Firefox */
-ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
gap: 15px;
padding-bottom: 10px; /* Space for hidden scrollbar */
}
.carousel-track::-webkit-scrollbar {
display: none; /* Hide scrollbar for Chrome/Safari */
}
.carousel-arrow {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #ddd;
border-radius: 50%;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.carousel-arrow.left {
left: -10px;
}
.carousel-arrow.right {
right: -10px;
}
.carousel-arrow i {
color: #555;
font-size: 16px;
}
.car-card {
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
min-width: 200px; /* Fixed width for carousel items */
max-width: 200px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
background-color: #fff;
flex-shrink: 0; /* Prevent items from shrinking */
transition: transform 0.2s ease;
}
.car-card:hover {
transform: translateY(-3px);
}
.car-card img {
width: 100%;
height: 120px; /* Fixed height for image */
object-fit: cover;
display: block;
}
.car-info {
padding: 10px 15px;
}
.car-year-model {
font-size: 15px;
font-weight: bold;
margin-bottom: 5px;
white-space: nowrap; /* Prevent text wrap */
overflow: hidden; /* Hide overflow */
text-overflow: ellipsis; /* Add ellipsis */
}
.car-price {
font-size: 17px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
.car-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: #777;
margin-bottom: 10px;
}
.car-meta .car-location i {
margin-right: 5px;
}
.car-actions i {
cursor: pointer;
margin-left: 10px;
color: #999;
transition: color 0.2s ease;
}
.car-actions i:hover {
color: #007bff;
}
.view-seller-details-sm {
background-color: #f0f8ff; /* Light blue */
color: #007bff;
border: 1px solid #cfe2ff;
padding: 8px 15px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
width: 100%;
transition: background-color 0.2s ease, color 0.2s ease;
}
.view-seller-details-sm:hover {
background-color: #e0f2ff;
color: #0056b3;
}
/* User Reviews Section */
.user-reviews-section h3 {
margin-bottom: 15px;
}
.rating-summary {
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.inp-bor{border-radius: 43px ! important; height: 46px; min-width: 120px;}
.price-content.active {
display: block;
}
#carouselTracksuv, #carouselTrackhatch {
scroll-behavior: smooth;
overflow-x: auto;
-ms-overflow-style: none; /* Hide scrollbar in IE and Edge */
scrollbar-width: none; /* Hide scrollbar in Firefox */
}
.cat-img img {
width: 79%;
object-fit: scale-down;
}
.profile-dropdown-menu.show {
display: block;
}
.topnav {
overflow: hidden;
}
.profile-dropdown-menu {
display: none;
position: absolute;
top: 100%;
right: 0;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
padding: 10px;
min-width: 250px;
z-index: 1050;
}
.profile-dropdown-menu.show {
display: block;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
border-bottom: 3px solid transparent;
}
.topnav a:hover {
border-bottom: 3px solid red;
}
.topnav a.active {
border-bottom: 3px solid red;
}
.car-card {
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
background: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
.car-nav-list {
display: flex;
gap: 10px;
padding: 20px;
margin: 0;
}
.car-nav-list p {
margin: 0;
}
.car-link {
position: relative;
text-decoration: none;
color: #333;
padding: 8px 0;
font-weight: 500;
display: inline-block;
cursor: pointer;
}
.car-link::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 3px;
background-color: orange;
border-radius: 2px;
transition: width 0.3s ease;
}
.car-link.active::after {
width: 100%;
}
.car-card-content {
padding: 1rem;
}
.car-card-title {
font-size: 1.1rem;
font-weight: 600;
}
.car-card-price, .car-card-details {
margin: 0.25rem 0;
font-size: 0.9rem;
}
.container-fluid1{}
/* --- Section Titles --- */
.section-title {
font-size: 1.6em;
font-weight: 700;
margin-bottom: 25px;
color: #333;
}
/* --- Car Card Styles (Common for both new and used) --- */
.car-card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.2s ease-in-out;
cursor: pointer;
min-width: 357px; /* To ensure cards don't shrink too much */
}
.car-card:hover {
transform: translateY(-5px);
}
.car-card img {
width: 100%;
height: 180px;
object-fit: cover;
border-bottom: 1px solid #eee;
}
.car-card-content {
padding: 15px;
display: flex;
flex-direction: column;
flex-grow: 1; /* Allows content to take available space */
}
.car-card-title {
font-size: 1.2em;
font-weight: 600;
margin-bottom: 5px;
color: #333;
}
.car-card-price {
font-size: 1.1em;
font-weight: 700;
color: #e60023; /* Red color for prices */
}
.car-card-details {
font-size: 0.9em;
color: #666;
margin-top: auto; /* Pushes details to the bottom */
}
.view-offers-button {
display: block;
margin: 10px 15px 15px 15px;
padding: 10px 15px;
background-color: #fff;
border: 1px solid #e60023;
color:orangered;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-weight: 500;
transition: background-color 0.2s ease, color 0.2s ease;
}
.view-offers-button:hover {
background-color:orangered;
color: #fff;
text-decoration: none;
}
/* --- Most Searched Cars Section --- */
.most-searched-cars-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
/* --- Trusted Used Cars by Budget Section --- */
.trusted-used-cars-section {
background-color: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.budget-filters {
display: flex;
gap: 15px;
}
.budget-filters button {
background-color: #f0f0f0;
border: 1px solid #ddd;
padding: 8px 15px;
border-radius: 20px;
cursor: pointer;
font-size: 0.9em;
color: #555;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.budget-filters button.active,
.budget-filters button:hover {
background-color: #e60023;
border-color: #e60023;
color: #fff;
}
.used-cars-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Slightly smaller cards for used */
gap: 20px;
overflow-x: auto; /* Enable horizontal scrolling for the cards if they overflow */
padding-bottom: 10px; /* Space for scrollbar */
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
scrollbar-width: thin; /* Firefox */
scrollbar-color: #ccc transparent; /* Firefox */
}
/* Hide scrollbar for Chrome, Safari, Opera */
.used-cars-grid::-webkit-scrollbar {
height: 6px;
}
.used-cars-grid::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 3px;
}
.used-cars-grid::-webkit-scrollbar-track {
background-color: transparent;
}
.used-car-card .car-card-img-wrapper {
background-color: #000; /* Black background for used car images */
display: flex;
align-items: center;
justify-content: center;
height: 140px; /* Smaller height for used car images */
}
.used-car-card .car-card-img-wrapper img {
height: 100%;
width: auto; /* Maintain aspect ratio */
object-fit: contain; /* Ensures the whole image is visible */
}
.used-car-card .car-card-price {
font-size: 1em;
color: #333;
font-weight: 500;
}
.used-car-card .car-card-details {
font-size: 0.85em;
color: #777;
}
/* --- Get Trusted Used Cars Nearby Section --- */
.trusted-used-cars-nearby-section {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
gap: 25px;
}
/* ---------------------------------------- */
.image-placeholder {
width: 100%;
aspect-ratio: 2/ 1; /* Maintain square box */
border: 2px dashed #ccc;
background-color: #f9f9f9;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
text-align: center;
}
.image-placeholder img {
width: 100%;
height: 100%;
object-fit: cover; /* Use cover if you want to crop */
}
.remove-button {
position: absolute;
top: 5px;
right: 5px;
background-color: rgba(255, 0, 0, 0.7);
color: white;
border-radius: 50%;
width: 25px;
height: 25px;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.8em;
cursor: pointer;
font-weight: bold;
z-index: 1;
}
.renty{
aspect-ratio: 2/ 1; /* Maintain square box */
}
.nav-clr{background-color: bisque;}
.for-w{max-width: 750px;}
.inp-bor{border-radius: 43px; height: 46px; min-width: 120px;}
.but-bor{border: none; background: transparent;}
.set-carimg{height: 45vh;width: 100%; display: flex; justify-content: center; object-fit: fill;}
.icon-set{width: 90px; height: 75px; object-fit: cover;}
.state-card{margin-top: 10px; background-color: aliceblue;}
.linkedin-img{background-color: aliceblue;height: 24vh;}
.subst-img{background-color: aliceblue;}
.offers-card{width: 58%;padding: 0;}
a{text-decoration: none;}
.image-placeholder.has-image:hover .remove-button {
display: flex;
}
.cities-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
gap: 35px;
justify-items: center;
text-align: center;
}
.city-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 15px;
border: 1px solid #eee;
border-radius: 8px;
background-color: #f9f9f9;
width: 100%; /* Take full width of grid cell */
box-sizing: border-box; /* Include padding and border in width */
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.city-icon {
width: 40px;
height: 40px;
/* Placeholder for SVG/Image icon */
background-color: #ddd; /* Example background */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em; /* Example for text icon */
color: #555;
transition: filter 0.2s ease;
}
/* For actual SVG icons, you'd embed them or use a sprite */
.city-name {
font-size: 0.9em;
font-weight: 500;
color: inherit; /* Inherit color from parent (.city-card) */
}
.search-city-input-group {
display: flex;
align-items: center;
flex-wrap: wrap; /* Allow wrapping on smaller screens */
}
.search-city-input-group label {
font-weight: 500;
font-size: 12px;
white-space: nowrap; /* Prevent text from wrapping */
}
.search-city-input-group input[type="text"] {
flex-grow: 1;
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1em;
min-width: 200px; /* Ensure input is not too small */
}
.search-city-input-group input[type="text"]::placeholder {
color: #999;
}
.custom-container { /* Renamed to avoid conflict if you use Bootstrap's .container elsewhere */
margin: 40px auto; /* Center the container with some top/bottom margin */
padding: 0 15px; /* Padding on the sides for smaller screens */
}
.trusted-used-cars-nearby-section {
background-color: #fff; /* White background for this section */
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow */
display: flex; /* Use flex for internal layout of title and main content row */
flex-direction: column;
gap: 25px; /* Space between the title and the content row */
}
.section-title {
font-size: 1.6em;
font-weight: 700;
margin-bottom: 0; /* No bottom margin as gap handles spacing */
color: #333;
}
/* Adjustments for Bootstrap's row/col usage */
.cities-grid-wrapper {
/* This div wraps the cities-grid and the search input for row layout */
}
.cities-grid {
display: grid;
gap: 36px; /* Space between grid items */
justify-items: center; /* Center items within their grid cells */
text-align: center; /* Center text within city cards */
}
.city-card {
display: flex;
flex-direction: column;
align-items: center; /* Center content vertically */
gap: 8px; /* Space between icon and text */
padding: 15px;
border: 1px solid #eee; /* Light border */
border-radius: 8px;
background-color: #f9f9f9; /* Slightly off-white background */
width: 100%; /* Take full width of grid cell */
box-sizing: border-box; /* Include padding and border in width */
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
cursor: pointer;
}
.city-card:hover .city-icon::before {
filter: brightness(0) invert(1); /* Change icon color to white on hover */
}
.city-name {
font-size: 0.9em;
font-weight: 500;
color: inherit; /* Inherit color from parent (.city-card), which turns white on hover */
}
.search-city-input-group {
display: flex;
flex-direction: column; /* Stack label and input by default */
align-items: flex-start;
min-width: 250px; /* Ensure this column has enough space */
position: relative; /* For decorative elements positioning */
}
.search-city-input-group label {
font-weight: 500;
white-space: nowrap;
color: #333;
}
.search-city-input-group input[type="text"] {
width: 100%; /* Take full width of its column */
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1em;
outline: none;
transition: border-color 0.2s ease;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 18px;
padding-right: 35px; /* Make space for the icon */
}
.search-city-input-group input[type="text"]:focus {
border-color: #e60023; /* Highlight border on focus */
}
.search-city-input-group input[type="text"]::placeholder {
color: #999;
}
.bottom-banner {
background-color: #ff9933;
height: 80px;
margin-top: 40px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.1em;
font-weight: 500;
padding: 0 15px;
}
.bottom-banner span {
color: #fff;
text-decoration: none;
font-size: 0.9em;
}
.carousel-item {
transition: transform 0.6s ease;
}
.decorative-elements {
position: absolute;
bottom: 0;
right: 0;
width: 150px;
height: 100px;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.decorative-elements::before {
content: '';
position: absolute;
width: 80px;
height: 80px;
background-color: #ffe082;
border-radius: 50%;
top: 10px;
right: 10px;
opacity: 0.8;
filter: blur(2px);
}
.decorative-elements::after {
content: '';
position: absolute;
width: 120px;
height: 60px;
background-color: #81c784;
border-radius: 0 0 50px 50px;
bottom: 0;
right: 0;
transform: rotate(-10deg);
}
.text-orange{
color: orangered;
}
.filter-tab {
margin: 0;
padding-bottom: 6px;
cursor: pointer;
font-weight: 500;
position: relative;
}
/*-------------------------------------about home---------------------------------------------- */
.gallery img {cursor: pointer;transition: transform 0.3s ease;}
.gallery img:hover {transform: scale(1.05);}
.island-background-img{background-image: url('public/assets/img/pexels-asadphoto-2549017.jpg');
background-size: cover;
background-position: center;
padding: 15px 30px;}
/*.bac-img{width: 100%;max-height: 430px;}*/
/*.bac-img img{width: 100%;max-height: 100%;object-fit: cover;}*/
.logo-set{width: 150px;}
.logo-set img{width: 100%;height: auto;object-fit: scale-down;}
.font-siz2 ul li a{text-decoration: none;color: #ffff}
.gall-img{width: 174px;height: auto;}
.gall-img img{width: 100%;height: auto;object-fit: scale-down;}
.cat-img img {
width: 79%;
object-fit: scale-down;
}
.price-input {
max-width: 120px; /* Adjust width of price input fields */
}
.nm1{
background-color: #d9eef5;
}
.w-45 { /* Custom width class for price inputs */
width: 45%;
}
.rein {
max-height: 800px;
overflow-y: scroll !important;
}
.cat-img img {
width: 70%;
object-fit: scale-down;
}
.form-check {
padding-left: 2em; /* Adjust for checkbox alignment */
}
.form-check-input {
margin-left: -1.5em; /* Default Bootstrap offset for checkbox */
}
/* Category Tabs */
.nav-pills .nav-link {
border-radius: 20px; /* Pill shape */
border: 1px solid var(--border-color);
color: #343a40;
padding: 0.5rem 1rem;
transition: all 0.2s ease-in-out;
white-space: nowrap; /* Prevent wrapping */
}
.nav-pills .nav-link.active,
.nav-pills .nav-link:hover {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
/* Car Card Styling */
.car-card {
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
padding: 7px;
}
.car-card:hover {
transform: translateY(-5px);
box-shadow: var(--card-hover-shadow) !important; /* !important to override Bootstrap default */
}
.car-card .card-img-top {
height: 180px; /* Fixed height for consistency */
object-fit: cover;
border-bottom: 1px solid var(--border-color); /* Light separator */
}
.car-title {
font-size: 1.1em;
font-weight: 600;
margin-bottom: 0.5rem;
color: #343a40;
}
.car-price {
font-size: 1.35em;
font-weight: bold;
color: var(--primary-color); /* Use Bootstrap primary color for price */
margin-bottom: 0.75rem;
}
.text-orange {
color: #fd7e14 ! important;
}
.menu-list a {
display: flex;
align-items: center;
padding: 14px 16px;
text-decoration: none;
color: #444;
transition: background-color 0.3s;
}
.menu-list a:hover {
background-color: #f9f9f9;
}
.menu-icon {
margin-right: 10px;
font-size: 16px;
color: #007bff;
}
.logout-item a {
color: #dc3545;
}
.logout-item a:hover {
background-color: #ffeaea;
}
.location {
font-size: 0.85em;
}
.bnh{
background-color: #fd7e14 ! important;
}
.form-range::-webkit-slider-thumb {
background-color: #fd7e14;
}
.form-range::-moz-range-thumb {
background-color: #fd7e14;
}
.form-range::-webkit-slider-runnable-track {
background-color: #ffe5d0;
}
.form-range::-moz-range-track {
background-color: #ffe5d0;
}
.view-details-btn {
font-size: 0.8em;
border-radius: 4px;
white-space: nowrap; /* Prevent button text from wrapping */
}
/* Ensure compare checkbox aligns well */
.compare-checkbox {
font-size: 0.85em;
}
.compare-checkbox .form-check-input {
margin-right: 0.5em; /* Spacing between checkbox and label */
}
/* Similar Cars Tags */
.custom-badge {
background-color: var(--light-gray-bg);
border: 1px solid var(--border-color);
color: #343a40 !important; /* Override Bootstrap's text-dark */
padding: 0.6em 1.2em;
font-size: 0.9em;
white-space: nowrap; /* Prevent text wrapping */
}
.filter-tab.active {
color: #e95b00; /* Orange text (optional) */
}
.filter-tab.active::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background-color: #e95b00; /* Orange underline */
border-radius: 2px;
}
.car-link.active::after {
background-color: red; /* visible for testing */
}
/* .profile-menu-container {
position: absolute;
top: 90px;
right: 20px;
} */
.lynk{
margin-left: 55px;
}
.offers-card {
width: 44vw ! important;
justify-content: auto! important;
}
.divflex-column {height: auto !important; padding: 1vh !important;}
.rating-score {
text-align: center;
}
.rating-score .score {
font-size: 48px;
font-weight: bold;
color: #333;
line-height: 1;
}
.inp-bor{border-radius: 43px; height: 46px; min-width: 120px;}
.price-content.active {
display: block;
}
#carouselTracksuv, #carouselTrackhatch {
scroll-behavior: smooth;
overflow-x: auto;
-ms-overflow-style: none; /* Hide scrollbar in IE and Edge */
scrollbar-width: none; /* Hide scrollbar in Firefox */
}
.cat-img img {
width: 79%;
object-fit: scale-down;
}
.profile-dropdown-menu.show {
display: block;
}
.topnav {
overflow: hidden;
}
.profile-dropdown-menu {
display: none;
position: absolute;
top: 100%;
right: 0;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
padding: 10px;
min-width: 250px;
z-index: 1050;
}
.profile-dropdown-menu.show {
display: block;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
border-bottom: 3px solid transparent;
}
.topnav a:hover {
border-bottom: 3px solid red;
}
.topnav a.active {
border-bottom: 3px solid red;
}
.car-card {
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
background: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
.car-nav-list {
display: flex;
gap: 10px;
padding: 20px;
margin: 0;
}
.car-nav-list p {
margin: 0;
}
.car-link {
position: relative;
text-decoration: none;
color: #333;
padding: 8px 0;
font-weight: 500;
display: inline-block;
cursor: pointer;
}
.car-link::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 3px;
background-color: orange;
border-radius: 2px;
transition: width 0.3s ease;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
}
.car-link.active::after {
width: 100%;
}
.car-card-content {
padding: 1rem;
}
.car-card-title {
font-size: 1.1rem;
font-weight: 600;
}
.car-card-price, .car-card-details {
margin: 0.25rem 0;
font-size: 0.9rem;
}
.container-fluid1{}
/* --- Section Titles --- */
.section-title {
font-size: 1.6em;
font-weight: 700;
margin-bottom: 25px;
color: #333;
}
/* --- Car Card Styles (Common for both new and used) --- */
.car-card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.2s ease-in-out;
cursor: pointer;
min-width: 357px; /* To ensure cards don't shrink too much */
}
.car-card:hover {
transform: translateY(-5px);
}
.car-card img {
width: 100%;
height: 180px;
object-fit: cover;
border-bottom: 1px solid #eee;
}
.car-card-content {
padding: 15px;
display: flex;
flex-direction: column;
flex-grow: 1; /* Allows content to take available space */
}
.car-card-title {
font-size: 1.2em;
font-weight: 600;
margin-bottom: 5px;
color: #333;
}
.car-card-price {
font-size: 1.1em;
font-weight: 700;
color: #e60023; /* Red color for prices */
}
.car-card-details {
font-size: 0.9em;
color: #666;
margin-top: auto; /* Pushes details to the bottom */
}
.view-offers-button {
display: block;
margin: 10px 15px 15px 15px;
padding: 10px 15px;
background-color: #fff;
border: 1px solid #e60023;
color:orangered;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-weight: 500;
transition: background-color 0.2s ease, color 0.2s ease;
}
.view-offers-button:hover {
background-color:orangered;
color: #fff;
text-decoration: none;
}
/* --- Most Searched Cars Section --- */
.most-searched-cars-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
/* --- Trusted Used Cars by Budget Section --- */
.trusted-used-cars-section {
background-color: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.budget-filters {
display: flex;
gap: 15px;
}
.budget-filters button {
background-color: #f0f0f0;
border: 1px solid #ddd;
padding: 8px 15px;
border-radius: 20px;
cursor: pointer;
font-size: 0.9em;
color: #555;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.budget-filters button.active,
.budget-filters button:hover {
background-color: #e60023;
border-color: #e60023;
color: #fff;
}
.used-cars-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Slightly smaller cards for used */
gap: 20px;
overflow-x: auto; /* Enable horizontal scrolling for the cards if they overflow */
padding-bottom: 10px; /* Space for scrollbar */
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
scrollbar-width: thin; /* Firefox */
scrollbar-color: #ccc transparent; /* Firefox */
}
/* Hide scrollbar for Chrome, Safari, Opera */
.used-cars-grid::-webkit-scrollbar {
height: 6px;
}
.used-cars-grid::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 3px;
}
.used-cars-grid::-webkit-scrollbar-track {
background-color: transparent;
}
.used-car-card .car-card-img-wrapper {
background-color: #000; /* Black background for used car images */
display: flex;
align-items: center;
justify-content: center;
height: 140px; /* Smaller height for used car images */
}
.used-car-card .car-card-img-wrapper img {
height: 100%;
width: auto; /* Maintain aspect ratio */
object-fit: contain; /* Ensures the whole image is visible */
}
.used-car-card .car-card-price {
font-size: 1em;
color: #333;
font-weight: 500;
}
.used-car-card .car-card-details {
font-size: 0.85em;
color: #777;
}
/* --- Get Trusted Used Cars Nearby Section --- */
.trusted-used-cars-nearby-section {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
gap: 25px;
}
.cities-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
gap: 35px;
justify-items: center;
text-align: center;
}
.city-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 15px;
border: 1px solid #eee;
border-radius: 8px;
background-color: #f9f9f9;
width: 100%; /* Take full width of grid cell */
box-sizing: border-box; /* Include padding and border in width */
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.city-icon {
width: 40px;
height: 40px;
/* Placeholder for SVG/Image icon */
background-color: #ddd; /* Example background */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em; /* Example for text icon */
color: #555;
transition: filter 0.2s ease;
}
/* For actual SVG icons, you'd embed them or use a sprite */
.city-name {
font-size: 0.9em;
font-weight: 500;
color: inherit; /* Inherit color from parent (.city-card) */
}
.search-city-input-group {
display: flex;
align-items: center;
flex-wrap: wrap; /* Allow wrapping on smaller screens */
}
.search-city-input-group label {
font-weight: 500;
font-size: 12px;
white-space: nowrap; /* Prevent text from wrapping */
}
.search-city-input-group input[type="text"] {
flex-grow: 1;
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1em;
min-width: 200px; /* Ensure input is not too small */
}
.search-city-input-group input[type="text"]::placeholder {
color: #999;
}
.custom-container { /* Renamed to avoid conflict if you use Bootstrap's .container elsewhere */
margin: 40px auto; /* Center the container with some top/bottom margin */
padding: 0 15px; /* Padding on the sides for smaller screens */
}
.trusted-used-cars-nearby-section {
background-color: #fff; /* White background for this section */
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow */
display: flex; /* Use flex for internal layout of title and main content row */
flex-direction: column;
gap: 25px; /* Space between the title and the content row */
}
.section-title {
font-size: 1.6em;
font-weight: 700;
margin-bottom: 0; /* No bottom margin as gap handles spacing */
color: #333;
}
/* Adjustments for Bootstrap's row/col usage */
.cities-grid-wrapper {
/* This div wraps the cities-grid and the search input for row layout */
}
.cities-grid {
display: grid;
gap: 36px; /* Space between grid items */
justify-items: center; /* Center items within their grid cells */
text-align: center; /* Center text within city cards */
}
.city-card {
display: flex;
flex-direction: column;
align-items: center; /* Center content vertically */
gap: 8px; /* Space between icon and text */
padding: 15px;
border: 1px solid #eee; /* Light border */
border-radius: 8px;
background-color: #f9f9f9; /* Slightly off-white background */
width: 100%; /* Take full width of grid cell */
box-sizing: border-box; /* Include padding and border in width */
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
cursor: pointer;
}
.city-card:hover .city-icon::before {
filter: brightness(0) invert(1); /* Change icon color to white on hover */
}
.city-name {
font-size: 0.9em;
font-weight: 500;
color: inherit; /* Inherit color from parent (.city-card), which turns white on hover */
}
.search-city-input-group {
display: flex;
flex-direction: column; /* Stack label and input by default */
align-items: flex-start;
min-width: 250px; /* Ensure this column has enough space */
position: relative; /* For decorative elements positioning */
}
.search-city-input-group label {
font-weight: 500;
white-space: nowrap;
color: #333;
}
.search-city-input-group input[type="text"] {
width: 100%; /* Take full width of its column */
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1em;
outline: none;
transition: border-color 0.2s ease;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 18px;
padding-right: 35px; /* Make space for the icon */
}
.search-city-input-group input[type="text"]:focus {
border-color: #e60023; /* Highlight border on focus */
}
.search-city-input-group input[type="text"]::placeholder {
color: #999;
}
.bottom-banner {
background-color: #ff9933;
height: 80px;
margin-top: 40px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.1em;
font-weight: 500;
padding: 0 15px;
}
.bottom-banner span {
color: #fff;
text-decoration: none;
font-size: 0.9em;
}
.carousel-item {
transition: transform 0.6s ease;
}
.decorative-elements {
position: absolute;
bottom: 0;
right: 0;
width: 150px;
height: 100px;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.decorative-elements::before {
content: '';
position: absolute;
width: 80px;
height: 80px;
background-color: #ffe082;
border-radius: 50%;
top: 10px;
right: 10px;
opacity: 0.8;
filter: blur(2px);
}
.decorative-elements::after {
content: '';
position: absolute;
width: 120px;
height: 60px;
background-color: #81c784;
border-radius: 0 0 50px 50px;
bottom: 0;
right: 0;
transform: rotate(-10deg);
}
.text-orange{
color: orangered;
}
.filter-tab {
margin: 0;
padding-bottom: 6px;
cursor: pointer;
font-weight: 500;
position: relative;
}
.filter-tab.active {
color: #e95b00; /* Orange text (optional) */
}
.filter-tab.active::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background-color: #e95b00; /* Orange underline */
border-radius: 2px;
}
.car-link.active::after {
background-color: red; /* visible for testing */
}
/* .profile-menu-container {
position: absolute;
top: 90px;
right: 20px;
} */
.lynk{
margin-left: 55px;
}
.offers-card {
width: 44vw ! important;
justify-content: auto! important;
}
.divflex-column {height: auto !important; padding: 1vh !important;}
.rating-score .out-of-five {
font-size: 18px;
color: #666;
vertical-align: super;
}
.rating-score .based-on {
font-size: 14px;
color: #777;
margin-top: 5px;
}
.rating-breakdown {
flex-grow: 1;
}
.rating-bar-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.rating-bar-item .rating-label {
width: 80px;
font-size: 14px;
color: #555;
}
.rating-bar {
flex-grow: 1;
height: 8px;
background-color: #e0e0e0;
border-radius: 4px;
margin: 0 10px;
overflow: hidden;
}
.rating-fill {
height: 100%;
background-color: #28a745; /* Green fill */
border-radius: 4px;
}
.rating-bar-item .rating-value {
font-size: 14px;
font-weight: bold;
color: #333;
width: 30px; /* Fixed width for alignment */
text-align: right;
}
.reviews-link {
font-size: 14px;
color: #007bff;
font-weight: bold;
margin-bottom: 20px;
}
.reviews-link i {
margin-right: 5px;
color: #ffc107; /* Orange star */
}
.user-review-item {
border-top: 1px solid #eee;
padding-top: 20px;
margin-top: 20px;
}
.review-header {
display: flex;
align-items: center;
margin-bottom: 10px;
font-size: 14px;
color: #777;
flex-wrap: wrap; /* Allow wrapping on small screens */
}
.review-header i.fa-user-circle {
font-size: 18px;
margin-right: 8px;
color: #999;
}
.lap{
display: block;
}
.reviewer-name {
font-weight: bold;
color: #333;
margin-right: 10px;
}
.review-date {
margin-right: 15px;
}
.review-rating-stars {
color: #ffc107; /* Orange for filled stars */
margin-right: 5px;
}
.review-rating-stars i.filled {
color: #ffc107;
}
.review-rating-num {
font-weight: bold;
color: #333;
}
.review-title {
font-size: 16px;
font-weight: bold;
color: #333;
margin-bottom: 5px;
}
.review-body {
font-size: 15px;
color: #555;
margin-bottom: 0;
}
.review-body a {
font-weight: bold;
}
.Lik{
/* margin-top: 22px;
margin-left: 30px; */
}
.sticky-sidebar-wrapper {
/* This div wraps the sticky card to control its position if needed within a larger grid */
/* For demonstration, we'll make it a direct child of body for simplicity */
width: 320px; /* Approximate width from image */
margin: 0 auto; /* Center for standalone demo */
float: right; /* To simulate it being on the right side of a page */
margin-left: 20px; /* Space from left content if combined */
}
.sticky-sidebar-card {
position: -webkit-sticky; /* For Safari */
position: sticky;
top: 20px; /* Distance from top of viewport when sticking */
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,.08);
border: none; /* No visible border */
padding: 7px; /* Inner padding */
}
.sticky-sidebar-card .car-title {
font-size:12px; /* Slightly smaller than main page title */
font-weight: 600;
display: flex;
color: #333;
gap: 110px;
}
.sticky-sidebar-card .car-subtitle {
font-size: 12px;
color: #666;
}
.sticky-sidebar-card .price {
font-weight: bold;
color: #333;
}
.sticky-sidebar-card .emi-info {
font-size: 12px;
color:black; /* Success green for EMI */
text-decoration: none; /* Remove underline from EMI link */
display: inline-flex; /* Allows padding/margin */
}
.sticky-sidebar-card .emi-info:hover {
text-decoration: underline; /* Add underline on hover */
}
.sticky-sidebar-card .new-car-price {
font-size: 0.8em;
color: #666;
display: inline-flex;
}
.sticky-sidebar-card .new-car-price strong {
font-weight: bold;
}
.sticky-sidebar-card .location-info {
font-size: 12px;
color: #666;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between; /* Space out location and compare */
}
.sticky-sidebar-card .location-info i {
margin-right: 5px;
color: #888;
}
.sticky-sidebar-card .compare-checkbox {
display: flex;
align-items: center;
font-size: 0.9em; /* Match text size */
color: #555;
white-space: nowrap; /* Prevent "Compare" from wrapping */
}
.sticky-sidebar-card .compare-checkbox input {
margin-right: 6px;
width: 16px; /* Custom size for checkbox */
height: 16px;
flex-shrink: 0;
}
.sticky-sidebar-card .btn-view-details {
width: 100%;
padding: 6px 0; /* More vertical padding */
color: white;
font-weight: bold;
background-color: #ff5722; /* Orange color from image */
border-color: #ff5722;
border-radius: 5px;
}
.sticky-sidebar-card .btn-view-details:hover {
background-color: #e64a19; /* Slightly darker orange on hover */
border-color: #e64a19;
}
.sticky-sidebar-card .trending-info {
font-size: 12px;
color: #666;
text-align: center;
margin-top: 20px;
border-top: 1px solid #eee; /* Separator line */
}
.trending-info i {
color: #007bff; /* Blue icon for trending */
margin-right: 5px;
}
.sticky-sidebar-card .action-links {
display: flex;
justify-content: space-around; /* Distribute items with space around them */
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid #eee;
font-size: 12px;
}
.sticky-sidebar-card .action-link {
text-decoration: none;
color: #666;
font-size: 0.9em;
display: flex;
flex-direction: column; /* Icon and text stacked */
align-items: center;
}
.sticky-sidebar-card .action-link i {
font-size: 1.4em; /* Larger icon */
margin-bottom: 5px;
color: #888; /* Muted icon color */
}
.sticky-sidebar-card .action-link:hover {
color: #007bff; /* Highlight on hover */
}
.sticky-sidebar-card .action-link:hover i {
color: #007bff;
}
.menu-list li a {
display: flex;
align-items: center;
padding: 12px 15px;
text-decoration: none;
color: #444;
font-size: 0.95em;
transition: background-color 0.2s ease, color 0.2s ease;
}
.menu-list li a:hover {
background-color: #f5f5f5;
color: #007bff; /* Highlight color on hover */
}
.menu-icon {
width: 25px; /* Fixed width for icons to align text */
text-align: center;
margin-right: 12px;
color: #777; /* Default icon color */
font-size: 1.1em;
}
.menu-list li a:hover .menu-icon {
color: #007bff; /* Icon color on hover */
}
/* Logout item specific styling */
.logout-item a {
border-top: 1px solid #eee; /* Separator line above Logout */
margin-top: 10px; /* Space from previous item */
padding-top: 15px; /* More padding for separation */
}
.logout-item a:hover {
background-color: #ffebee; /* Light red background for logout hover */
color: #dc3545; /* Red text for logout hover */
}
.logout-item a:hover .menu-icon {
color: #dc3545; /* Red icon for logout hover */
}
/* Optional: To demonstrate the menu in isolation, position it */
/* This can be removed if integrated into a larger layout */
body {
position: relative;
}
.profile-menu-container {
position: absolute;
top: 70px; /* Adjust as needed for vertical positioning */
right: 20px; /* Adjust as needed for horizontal positioning */
}
.profile-dropdown-menu {
display: none;
position: absolute;
right: 0;
top: 100%;
z-index: 999;
background: #fff;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
width: 250px;
padding: 1rem;
}
.profile-dropdown-menu.show {
display: block;
}
.mm {
align-items: center;
}
.hw1{
margin-bottom: 86px;
margin-top: 52px;
}
.ren{
gap: 195px;
}
.henn {
margin-left: 195px;
}
.edit-icon {
width: 16px;
filter: brightness(0) invert(1); /* makes icon white */
}
.edit-wrapper {
padding: 4px;
/* border-radius: 5px; */
cursor: pointer;
display: inline-block;
margin-left: 10px;
font-size: 10px;
}
.editable-input {
max-width: 60%;
}
.rey{
display: flex;
}
.table {
margin-bottom: 0; /* Remove default bottom margin if inside a container with padding */
}
.table th, .table td {
vertical-align: middle; /* Align content vertically in the middle */
padding: 0.75rem; /* Adjust padding if needed */
}
.table thead th {
background-color: #0d6efd; /* Bootstrap primary blue for header */
color: white;
border-color: #0a58ca; /* Darker border for header */
border-bottom-width: 2px; /* Thicker bottom border for header */
font-weight: 600;
}
/* Style for the strong tags (labels like Name, Gender) */
.table tbody td strong {
font-weight: 600; /* Slightly bolder for labels */
color: #495057; /* Darker grey for labels */
}
/* Adjust border-radius for the table container corners */
.table-responsive .table {
border-radius: 8px; /* Apply to the table itself for consistent corners */
overflow: hidden; /* Important for border-radius to work with borders */
}
/* Specific adjustments for header border-radius if table-responsive is used */
.table-responsive .table thead th:first-child {
border-top-left-radius: 8px;
}
.table-responsive .table thead th:last-child {
border-top-right-radius: 8px;
}
.table-responsive .table tbody tr:last-child td:first-child {
border-bottom-left-radius: 8px;
}
.table-responsive .table tbody tr:last-child td:last-child {
border-bottom-right-radius: 8px;
}
h1.main-title {
text-align: center;
margin-bottom: 30px;
color: #333;
font-size: 2rem;
font-weight: 500;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
margin-bottom: 15px;
border-bottom: 1px solid #eee; /* Light separator */
color: #555;
font-weight: bold;
font-size: 1.1rem;
}
.section-header i {
margin-right: 10px;
color: #6c757d; /* Bootstrap secondary color */
}
.btn-header { /* Unified style for Edit/Save/Cancel buttons */
font-size: 0.85rem;
padding: 5px 12px;
border-radius: 5px;
}
.btn-edit-header {
background-color: #dc3545 ! important; /* Bootstrap danger red */
border-color: #dc3545 ! important;
color: white ! important;
}
.btn-save-header {
background-color: #28a745 ! important; /* Bootstrap success green */
border-color: #28a745 ! important;
color: white ! important;
margin-right: 5px; /* Space between save and cancel */
}
.btn-cancel-header {
background-color: #6c757d ! important ; /* Bootstrap secondary grey */
border-color: #6c757d ! important;
color: white ! important;
}
.btn-change-header { /* For Email/Mobile Change buttons */
background-color: #0d6efd ! important; /* Bootstrap primary blue */
border-color: #0d6efd ! important;
color: white ! important;
font-size: 0.85rem;
padding: 5px 12px;
border-radius: 5px;
}
/* Profile Image Section */
.profile-image-container {
text-align: center;
margin-bottom: 30px;
}
.profile-image {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover; /* Ensures the image covers the circular area */
border: 4px solid #f0f0f0; /* Light border around image */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Table Styling (reusing from previous answer, integrating with Bootstrap) */
.table-custom {
margin-bottom: 30px; /* Space below the table */
border: 1px solid #dee2e6; /* Overall table border */
border-radius: 8px;
overflow: hidden; /* For rounded corners */
}
.table-custom thead th {
background-color: #f8f9fa; /* Light header background */
color: #555;
font-weight: 600;
border-bottom: 1px solid #dee2e6;
}
.table-custom tbody tr td {
padding: 12px 15px;
border: 1px solid #dee2e6; /* Borders on all sides of cells */
vertical-align: middle;
}
.table-custom tbody tr td:first-child,
.table-custom tbody tr td:nth-child(3) { /* Styling for the labels */
font-weight: bold;
color: #495057;
background-color: #fcfcfc; /* Slightly different background for labels */
}
.table-custom tbody tr:hover {
background-color: #f0f0f0; /* Subtle hover effect */
}
.table-custom .form-control {
padding: 0.375rem 0.75rem; /* Adjust padding for inputs in table cells */
height: auto; /* Allow height to adjust */
}
/* Email & Mobile Sections */
.info-display {
padding: 10px 0;
font-size: 1.1rem;
color: #333;
margin-bottom: 20px;
}
.info-display strong {
margin-right: 10px;
color: #6c757d;
}
/* Password Section */
.password-section {
margin-top: 20px;
margin-bottom: 0;
padding-bottom: 0;
}
.btn-change-password {
background-color: #28a745; /* Bootstrap success green */
border-color: #28a745;
color: white;
font-weight: 500;
padding: 10px 25px;
border-radius: 5px;
display: block; /* Make it a block element to center with margin auto */
margin: 20px auto 0 auto; /* Center button */
}
.btn-change-password:hover {
background-color: #218838;
border-color: #1e7e34;
}
.lan{
display:block ;
}
/* -----------------------------------------------------------------------car filter */
.profile-dropdown-menu.show {
display: block;
}
.profile-dropdown-menu {
display: none;position: absolute;right: 0;background: #fff;border: 1px solid #ddd;border-radius: 10px;width: 250px;
padding: 15px;
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
z-index: 1000;
}
.cat-img img {
width: 79%;
object-fit: scale-down;
}
.price-input {
max-width: 120px; /* Adjust width of price input fields */
}
.nm1{
background-color: #d9eef5;
}
.w-45 { /* Custom width class for price inputs */
width: 45%;
}
.rein {
max-height: 800px;
overflow-y: scroll !important;
}
.cat-img img {
width: 70%;
object-fit: scale-down;
}
.form-check {
padding-left: 2em; /* Adjust for checkbox alignment */
}
.form-check-input {
margin-left: -1.5em; /* Default Bootstrap offset for checkbox */
}
/* Category Tabs */
.nav-pills .nav-link {
border-radius: 20px; /* Pill shape */
border: 1px solid var(--border-color);
color: #343a40;
padding: 0.5rem 1rem;
transition: all 0.2s ease-in-out;
white-space: nowrap; /* Prevent wrapping */
}
.nav-pills .nav-link.active,
.nav-pills .nav-link:hover {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
/* Car Card Styling */
.car-card {
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
padding: 7px;
}
.car-card:hover {
transform: translateY(-5px);
box-shadow: var(--card-hover-shadow) !important; /* !important to override Bootstrap default */
}
.car-card .card-img-top {
height: 180px; /* Fixed height for consistency */
object-fit: cover;
border-bottom: 1px solid var(--border-color); /* Light separator */
}
.car-title {
font-size: 1.1em;
font-weight: 600;
margin-bottom: 0.5rem;
color: #343a40;
}
.car-price {
font-size: 1.35em;
font-weight: bold;
color: var(--primary-color); /* Use Bootstrap primary color for price */
margin-bottom: 0.75rem;
}
.text-orange {
color: #fd7e14 ! important;
}
.profile-dropdown-menu {
width: 280px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
font-family: "Segoe UI", sans-serif;
}
.user-info {
display: flex;
align-items: center;
padding: 16px;
background-color: #f7f7f7;
border-bottom: 1px solid #eee;
}
.user-avatar {
width: 55px;
height: 55px;
border-radius: 50%;
object-fit: cover;
margin-right: 12px;
}
.user-details {
display: flex;
flex-direction: column;
}
.user-name {
font-weight: 600;
font-size: 16px;
color: #333;
margin-bottom: 4px;
}
.edit-profile-link {
font-size: 13px;
color: #007bff;
text-decoration: none;
}
.edit-profile-link:hover {
text-decoration: underline;
}
.menu-list {
list-style: none;
padding: 0;
margin: 0;
}
.menu-list li {
border-bottom: 1px solid #f0f0f0;
}
.menu-list li:last-child {
border-bottom: none;
}
.menu-list a {
display: flex;
align-items: center;
padding: 14px 16px;
text-decoration: none;
color: #444;
transition: background-color 0.3s;
}
.menu-list a:hover {
background-color: #f9f9f9;
}
.menu-icon {
margin-right: 10px;
font-size: 16px;
color: #007bff;
}
.logout-item a {
color: #dc3545;
}
.logout-item a:hover {
background-color: #ffeaea;
}
.location {
font-size: 0.85em;
}
.bnh{
background-color: #fd7e14 ! important;
}
.form-range::-webkit-slider-thumb {
background-color: #fd7e14;
}
.form-range::-moz-range-thumb {
background-color: #fd7e14;
}
.form-range::-webkit-slider-runnable-track {
background-color: #ffe5d0;
}
.form-range::-moz-range-track {
background-color: #ffe5d0;
}
.view-details-btn {
font-size: 0.8em;
border-radius: 4px;
white-space: nowrap; /* Prevent button text from wrapping */
}
/* Ensure compare checkbox aligns well */
.compare-checkbox {
font-size: 0.85em;
}
.compare-checkbox .form-check-input {
margin-right: 0.5em; /* Spacing between checkbox and label */
}
.custom-badge {
background-color: var(--light-gray-bg);
border: 1px solid var(--border-color);
color: #343a40 !important; /* Override Bootstrap's text-dark */
padding: 0.6em 1.2em;
font-size: 0.9em;
white-space: nowrap; /* Prevent text wrapping */
}
.car-card-img-wrapper img {
width: 100%;
height: 20vh ! important;
object-fit: cover;
}
.off1 {
margin-left: -63px ! important ;
}
.mts{
margin-left: 0 ! important;
}
.redy{
display: none;
}
.hnm{
height: 20vh;
object-fit: cover;
}
.card-img-top {
height: 17vh;
object-fit: contain;
}
/* ---------------------------carfilter end */
@media (max-width: 1608px) {.off1 {margin-left: 0 ! important;}.offers-card {width: 53% ! important;padding: 0;}}
@media (max-width: 991px) {
.sticky-sidebar-wrapper {width: 100%;float: none;margin: 20px 0;}.sticky-sidebar-card {position: static;}.scroll-arrow {display: none;}
}
@media (max-width: 992px) {
.main-content-area {flex-direction: column;}
.left-column, .right-column-sidebar {flex: none;width: 100%;}
.right-column-sidebar {position: static;top: auto;padding-top: 0;}
.listing-header-top {display: block; }
}
@media (max-width: 768px) {
.overview-grid, .specs-grid {grid-template-columns: 1fr;}
.features-list {grid-template-columns: 1fr;}
.details-tabs {flex-wrap: wrap;justify-content: center;}
.tab-button {padding: 10px 15px;font-size: 15px;}
.rating-summary {flex-direction: column;align-items: flex-start;gap: 15px;}
.rating-score {text-align: left;}
.rating-bar-item .rating-label {width: 60px; }
}
@media only screen and (max-width: 600px){
.redy{display: block ! important;}
.hw1{margin: 0 ! important;}
.image-placeholder {height: 200px;}
.rey{display: block ! important;}
#basicInfoButtons{display: flex ! important;}
#mobileButtons{ display: flex ! important;}
.avatar-thumbnail {
border-radius: 50%;
object-fit: cover;
margin-right: -45px;
border: 1px solid #ddd;
padding: 2px;
margin-right: -20px ! important;
}
.lap,.lan,.l13{
display: none ! important;
}
.trusted-used-cars-section, .trusted-used-cars-nearby-section {padding: 20px; }
.lh1,.lh2{display: none! important;}
.recommended-cars-section {
width: 100% ! important;
padding: 0 ! important;
}
.fon1 {
font-size: 11px ! important;
padding: 5px ! important;
gap: 12px;
}
.user-reviews-card {
background-color: #fff;
padding: 11px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
border: none;
width: 100% !important;
}
.Lik {
margin-top: 22px;
margin-left: 0 ! important;
}
.main-content-area {
flex-direction: column;
overflow: hidden;
}
.scroll-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 51px;
}
.reviews-summary .sort-dropdown {
position: relative;
margin-right: 42px;
}
.overview-item, .specs-item {
display: flex
;
justify-content: flex-start;
padding: 3px 0;
border-bottom: 1px dashed #eee;
font-size: 9px;
}
.view-all-link {
display: inline-flex
;
align-items: center;
font-size: 9px ! important;
font-weight: bold;
color: #007bff;
margin-top: -5px ! important;
}
.feature-item {
font-size: 11px ! important;
color: #555;
display: flex
;
align-items: center;
}
.lad{
max-height: 230px;
}
.custom-badge {
background-color: var(--light-gray-bg);
border: 1px solid var(--border-color);
color: #343a40 !important;
padding: 0.6em 1.2em;
font-size: 0.9em;
white-space: nowrap;
font-size: 6px ! important;
}
.card-title {
margin-bottom: var(--bs-card-title-spacer-y);
color: var(--bs-card-title-color);
font-size: 9px ! important;
}
.recommended-cars-section h5 {
font-weight: 600;
margin-bottom: 5px;
color: #333;
font-size: 15px ! important;
}
.overview-grid, .specs-grid {
display: grid
;
grid-template-columns: repeat(2, 1fr) ! important;
gap: 0;
}
.mb0{
margin-bottom: 0 ! important;
}
.overview-grid, .specs-grid {
grid-template-columns: 1fr; /* Single column on smaller screens */
}
.features-list {
grid-template-columns: 1fr; /* Single column for features */
}
.details-tabs {
flex-wrap: wrap; /* Allow tabs to wrap */
justify-content: center;
}
.tab-button {
padding: 10px 15px;
font-size: 15px;
}
.rating-summary {
flex-direction: column; /* Stack rating summary items */
align-items: flex-start;
gap: 15px;
}
.rating-score {
text-align: left;
}
.rating-bar-item .rating-label {
width: 60px; /* Adjust label width */
}
.fon{
font-size: 9px ! important;
}
.recommended-car-card {
flex: 0 0 48%;
max-width: 48%;
}
.recommended-car-card .card-title {
font-size: 9px ! important;
font-weight: 600;
margin-bottom: 3px;
color: #333;
margin-top: 12px ! important;
}
.recommended-car-card .price {
font-size: 8px ! important;
color: #333;
font-size: 1.3em;
margin-bottom: 10px;
margin-top: 20px ! important;
}
.red1{
margin-top: -19px! important;
}
.recommended-car-card .view-details-link {
font-size: 9px! important;
color: #007bff;
text-decoration: none;
display: inline-flex
;
align-items: center;
/* padding-bottom: 3px; */
margin-top: -7px ! important;
}
.recommended-car-card .location-info {
font-size: 9px ! important;
color: #666;
margin-top: -6px ! important;
display: flex
;
align-items: center;
}
.off1 {
margin-left: -7px ! important;
}
.offers-card {
width: 46% ! important;
padding: 0;
}
.recommended-cars-section small.text-muted {
font-size: 0.85em;
display: block;
margin-top: 5px ! important;
}
.fon12{
font-size: 12px ! important;
}
element.style {
}
.text-orange {
color: orangered;
}
.view-offers-button {
display: block;
margin: 0 ! important;
padding: 10px 15px;
background-color: #fff;
border: 1px solid #e60023;
color: orangered;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-weight: 500;
font-size: 7px ! important;
transition: background-color 0.2s ease, color 0.2s ease;
}
.car-card img {
width: 100% ! important;
height: 10vh ! important;
object-fit: cover;
border-bottom: 1px solid #eee;
}
.car-card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex
;
flex-direction: column;
transition: transform 0.2s ease-in-out;
cursor: pointer;
min-width: 171px ! important;
height: 32vh ! important;
}
.details-section{
padding: 0 ! important;
}
.tab-button {
padding: 5px 5px ! important;
font-size: 8px ! important;
}
.car-card-title {
font-size: 9px ! important;
font-weight: 600;
margin-bottom: 5px;
color: #333;
}
.filter-tab {
margin: 0;
padding-bottom: 6px;
cursor: pointer;
font-weight: 500;
position: relative;
font-size: 13px ! important;
}
.car-card{
max-height: 23vh;
}
.car-card-content {
display: flex
;
flex-direction: column;
flex-grow: 1;
}
.brn-logo {
height: auto;
width: 35px ! important;
}
.inp-bor {
border-radius: 43px;
height: 46px;
min-width: 120px;
}
.section-title {
font-size: 12px ! important;
font-weight: 700;
}
.car-nav-list {
display: flex
;
gap: 0 ! important;
padding:12px ! important;
margin-left: 11px ! important;
font-size: 9px ! important;
}
.car-card-details {
font-size: 0.9em;
color: #666;
margin-top: -3px ! important;
display: flex;
justify-content: center;
}
.car-card-img-wrapper img {
height: auto;
}
.offer-section-img {
padding: 0px !important;
}
.rany{
margin-top: 21px ! important;
}
.offer-cards-bigimg {
height: 7vh ! important;
position: relative;
}
.trusted-used-cars-section {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
margin-bottom: -34px ! important;
}
.car-card-price {
font-size:12px ! important;
font-weight: 700;
color: #e60023;
margin-bottom: -1px;
display: flex;
justify-content: center;
}
.budget-filters {
display: flex
;
gap: 15px;
}
.hnm{
height:100%;
object-fit: cover;
}
.trusted-used-cars-section, .trusted-used-cars-nearby-section {
}
.trusted-used-cars-section, .trusted-used-cars-nearby-section {
}
.section-title {
font-size: 12px ! important;
margin-left: 32px ! important;
}
section {
padding: 20px;
height:auto! important;
}
.lin1{
}
.custom-container {
max-width: 1500px;
margin-top: 5px ! important;
padding: 0 ! important;
margin-bottom: 0 ! important;
}
/* .city-icon {
width: 48px ! important;
height: 46px ! important;
background-color: #cce0f0;
border-radius: 50%;
display: flex
;
align-items: center;
justify-content: center;
} */
.cities-grid {
display: grid
;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 9px ! important;
justify-items: center;
text-align: center;
}
.city-name {
font-size: 9px ! important;
font-weight: 500;
color: inherit;
}
.city-name span {
font-size: 10px ! important;
color: #000;
}
.city-card {
display: flex
;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 5px ! important;
border: 1px solid #eee;
border-radius: 8px;
background-color: #f9f9f9;
width: 100%;
box-sizing: border-box;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
cursor: pointer;
}
.cities-grid {
grid-template-columns: repeat(3, 1fr) ! important;
}
.la1{
font-size: 12px ! important;
padding: 3px;
}
.car-card-title {
font-size: 1.2em;
font-weight: 600;
margin-bottom: 5px;
color: #333;
display: flex;
text-align: center;
justify-content: center;
}
.tab-content-panel h3 {
font-size: 10px ! important;
margin-bottom: 15px;
color: #333;
}
.car-card-img-wrapper img {
width: 100%;
height: 12vh ! important;
object-fit: contain;
}
.likn{
margin-bottom: 6px !important;
}
.car-card1 {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex
;
justify-content: center;
flex-direction: column;
transition: transform 0.2s ease-in-out;
cursor: pointer;
min-width: 182px ! important;
height: 26vh ! important;
margin-top: 0px;
}
.city-icon {
background-color: #ddd;
border-radius: 46%;
display: flex
;
align-items: center;
justify-content: center;
font-size: 2px ! important;
color: #555;
transition: filter 0.2s ease;
}
.cat-img img {
object-fit: scale-down;
}
.card-img-top {
position: relative;
height: 9vh ! important;
}
.lan2{
display: none ! important;
}
.trusted-used-cars-section {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
margin-bottom: 0 ! important;
}
.trusted-used-cars-section {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.recommended-car-card .card-img-top {
height: 100% ! important; /* Fixed height for consistent image size */
object-fit: cover; /* Cover the area, cropping if necessary */
border-top-left-radius: 8px;
border-top-right-radius: 8px;
width: 100%;
}
.profile-menu-container {
position: absolute;
top: 53px ! important;
right: 20px;
}
.top-stores-continer{
height: 20vh ! important;
}
.hei2{
height: auto ! important;
}
.fon{
font-size: 9px ! important;
color: #333;
}
.top-stores-continer.card{
}
.hb {
height: 21vh ! important;
}
.fo{
font-size: 8px ! important;
}
.renv{
gap: 20px;
}
.car-card-content {
display: flex
;
flex-direction: column;
flex-grow: 1;
}
.rev{
margin-top: 10px;
margin-right: 0 ! important;
}
.fo{
font-size: 9px ! important;
}
.mf1{
margin-right: 0 ! important;
}
.f31{
font-size: 10px ! important;
}
.card{
padding: 3px ! important;
}
.fony{
font-size: 8px ! important;
}
.mo{
margin: 0 ! important;
}
.fa3{
display: none ! important;
}
.card-img-top1 {
height: 100% ! important;
object-fit: cover;
}
}
@media (max-width: 576px) { /* Bootstrap's 'sm' breakpoint */
.table-responsive {
border: none; /* Remove responsive container border */
}
.table-bordered tbody tr {
border: 1px solid #dee2e6; /* Add a border around each "card" row */
margin-bottom: 15px; /* Space between rows */
display: block;
border-radius: 8px;
overflow: hidden; /* For consistent border-radius */
}
.table-bordered tbody tr:last-child {
margin-bottom: 0;
}
.table-bordered tbody td {
display: block;
text-align: right !important; /* Align data to the right */
padding-left: 50%; /* Make space for label */
position: relative;
border: none; /* Remove individual cell borders */
border-bottom: 1px dotted #dee2e6; /* Dotted separator between items */
}
.table-bordered tbody td:last-child {
border-bottom: none; /* No dotted border for the last item in a row */
}
.table-bordered tbody td strong {
display: none; /* Hide original strong tag */
}
.table-bordered tbody td::before {
content: attr(data-label); /* Use data-label for the pseudo-element */
position: absolute;
left: 0;
width: 45%;
padding-left: 0.75rem; /* Match cell padding */
font-weight: 600;
text-align: left;
color: #6c757d; /* Muted color for labels */
}
/* Specific data-labels for this table structure on small screens */
.table-bordered tbody tr:nth-child(1) td:nth-of-type(1):before { content: "Name:"; }
.table-bordered tbody tr:nth-child(1) td:nth-of-type(3):before { content: "Date of Birth:"; }
.table-bordered tbody tr:nth-child(2) td:nth-of-type(1):before { content: "Gender:"; }
.table-bordered tbody tr:nth-child(2) td:nth-of-type(3):before { content: "State:"; }
.table-bordered tbody tr:nth-child(3) td:nth-of-type(1):before { content: "District:"; }
.table-bordered tbody tr:nth-child(3) td:nth-of-type(3):before { content: "City:"; }
.table-bordered tbody tr:nth-child(4) td:nth-of-type(1):before { content: "Address:"; }
}
/* @media only screen and (max-width: 550px) {
.profile-menu-container {
position: absolute;
right: 15px ! important;
}
}
*/
@media only screen and (max-width: 400px) {
.profile-menu-container {
position: absolute;
top: 50px ! important;
right: 20px;
}
.avatar-thumbnail {
border-radius: 50%;
object-fit: cover;
margin-right: -45px;
border: 1px solid #ddd;
padding: 2px;
margin-right: -23px ! important;
}
.page-wrapper {
margin: 10px auto;
}
.car-card-img-wrapper img {
width: 100%;
height: 10vh ! important;
object-fit: contain;
}
.mtt{
margin-top: 0 ! important;
}
.fon1 {
font-size: 8px ! important;
padding: 5px ! important;
gap: 12px;
}
element.style {
}
.car-card-content {
padding: 15px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.car-card-content {
padding: 1rem;
}
*, ::after, ::before {
box-sizing: border-box;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
div {
display: block;
unicode-bidi: isolate;
}
.car-card1 {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex;
justify-content: center;
flex-direction: column;
transition: transform 0.2s ease-in-out;
cursor: pointer;
min-width: 125px ! important;
margin-top: 0px;
margin-bottom: 8px;
}
.user-avatar-dropdown {
display: flex;
align-items: center;
cursor: pointer;
margin-bottom: 10px;
justify-content: flex-end;
padding-right: 10px;
position: absolute;
top: -67px ! important;
right: -4px ! important;
width: 100%;
}
.listing-title-card .listing-title {
font-size: 18px;
}
.listing-title-card .listing-price {
font-size: 18px;
}
.user-review-item {
padding-top: 15px;
margin-top: 15px;
}
.review-header {
font-size: 13px;
}
.tag-pills .badge {
font-size: 7px ! important;
font-weight: 500;
padding: 8px 15px;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
border: 1px solid #dee2e6;
white-space: nowrap;
}
.h-100 {
height: 95% !important;
}
.offers-card {
width: 43% ! important;
padding: 0;
}
.car-card-price {
font-size: 9px ! important;
font-weight: 700;
color: #e60023;
display: flex;
justify-content: center;
margin-bottom: 0 ! important;
}
.car-card-details {
font-size: 0.9em;
color: #666;
margin-top:-3px ! important;
margin-left: 5px ! important;
}
.car-card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex
;
flex-direction: column;
transition: transform 0.2s ease-in-out;
cursor: pointer;
min-width: 151px ! important;
height: 30vh ! important;
}
.car-card1 {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex;
justify-content: center;
flex-direction: column;
transition: transform 0.2s ease-in-out;
cursor: pointer;
min-width: 152px ! important;
margin-top: 0px;
margin-bottom: 8px;
}
.trusted-used-cars-section, .trusted-used-cars-nearby-section {
padding: 0 ! important;
}
.car-card{
max-height: 23vh;
}
.profile-menu-container {
position: absolute;
top: 59px ! important;
right: 20px;
}
.car-card-title {
font-size: 9px ! important;
font-weight: 600;
margin-bottom: 5px;
color: #333;
display: flex;
text-align: center;
justify-content: center;
}
.lin1 {
}
}
@media only screen and (max-width: 395px) {
/* .profile-menu-container {
position: absolute;
top: 85px ! important;
right: 20px ! important;
} */
.user-avatar-dropdown {
display: flex
;
align-items: center;
cursor: pointer;
margin-bottom: 10px;
justify-content: flex-end;
padding-right: 10px;
position: absolute;
right: -4px ! important;
width: 100%;
}
}
@media (max-width: 380px) {
/* .city-icon {
width:100% ! important;
height:100% ! important;
background-color: #cce0f0;
border-radius: 50%;
display: flex
;
align-items: center;
justify-content: center;
} */
}