@import url("https://fonts.googleapis.com/css2?family=Vend+Sans:ital,wght@0,300..700;1,300..700&display=swap");

/*body {
    font-family: "Vend Sans", sans-serif;
    background: #222222;
    padding: 0;
    margin: 0;
}*/
.header-top {
    background: #101010;
}

.header-top a.nav-link {
    color: #ffff;
    font-size: 17px;
    font-weight: 500;
}

.header-top li.nav-item {
    padding: 0 0px 0 45px;
}

div#navbarSupportedContent {
    flex-direction: row-reverse;
}

:root {
    --bg-color: #222222;
    --text-color: #111111;
    --banner-bg-color: #3b3b3b;
    --border-color: #dde1de33;
    --select-color: #ffffff;
    --bg-value-color: #d9d9d975;
    --bg-button: #f58d02;
    --border-button: #f58d02;
    --car-details-feutures: #fff;
    --modal-body-inputs: #3b3b3b;
}

ul.dropdown-menu.nav-drop.dropdown-menu-end.show {
    inset: 20px 0px auto auto !important;
}

body.dark-mode {
    --bg-color: #fff;
    --text-color: #ffffff;
    --banner-bg-color: #ffffff;
    --border-color: #dde1de;
    --select-color: #000000;
    --bg-value-color: none;
    --bg-button: #101010;
    --border-button: #101010;
    --car-details-feutures: #a6a6a67a;
    --modal-body-inputs: #d4d4d4;
}

body {
    background: var(--bg-color);
    color: var(--text-color);
    transition:
        background 0.3s ease,
        color 0.3s ease;
    font-family: "Vend Sans", sans-serif;
    color: var(--select-color);
}

.services-list {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
}

.header {
    background: var(--bg-color);
}

button#themeToggle {
    background: transparent !important;
    border: none !important;
}

.logo-dark {
    display: none;
}

body.dark-mode .logo-light {
    display: block;
}

body.dark-mode .logo-dark {
    display: none;
}

.header-top .row {
    flex-direction: row-reverse;
}

/* Light mode */
body:not(.dark-mode) .logo-light {
    display: none;
}

body:not(.dark-mode) .logo-dark {
    display: block;
}

img.logo {
    width: 360px;
}

.mobile-btn {
    display: none;
}

.header .col-lg-6 {
    display: flex;
}

a.logo-o-link {
    text-decoration: none;
}

.logo-o {
    width: 133px;
    height: 50px;
    border-radius: 80px;
    position: relative;
    overflow: hidden;
    background: #f58d02;
    border: 2px solid #f58d02;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    transition: 0.3s linear;
    margin: 0 10px;
}

/* Speed line */
.speed-line {
    position: absolute;
    width: 2px;
    height: 64%;
    left: 50%;
    bottom: 1%;
    transform-origin: bottom center;

    /* default hidden */
    opacity: 0;
    transform: translateX(-50%) rotate(-80deg);
    background: #f58d02;

    transition:
        transform 0.8s ease,
        background 0.3s ease,
        opacity 0.1s linear;
}

/* Hover IN */
.logo-o:hover .speed-line {
    opacity: 1;
    background: #fff;
    transform: translateX(-50%) rotate(90deg);
}

/* Hover OUT (delay opacity so it returns first) */
.logo-o:not(:hover) .speed-line {
    transition:
        transform 0.8s ease,
        background 0.3s ease,
        opacity 0.1s linear 0.8s;
    opacity: 0;
    background: #fff;
}

/* Button hover */
.logo-o:hover {
    background: #fff;
    color: #000;
}

.header {
    padding: 10px 0;
    border-bottom: 1px solid #b3b4b5;
}

.gtranslate_wrapper #gt_float_wrapper {
    position: relative !important;
    margin: 0 10px 0 10px !important;
    bottom: 0 !important;
    left: 0 !important;
    border: 1px solid #dadee2;
    border-radius: 130px;
    display: flex;
    overflow: visible;
    background: transparent;
}

.gtranslate_wrapper .gt_float_switcher {
    box-shadow: unset;
    /* border: 1px solid #DADEE2; */
    border-radius: 0;
    position: relative !important;
    z-index: 99;
    overflow: visible;
    background: transparent !important;
    width: 100%;
    height: 100%;
}

.gtranslate_wrapper .gt_float_switcher .gt-current-lang {
    padding: 13px 20px !important;
}

.gt_float_switcher .gt-selected .gt-current-lang {
    color: var(--select-color) !important;
}

.gtranslate_wrapper .gt_options {
    top: calc(100% + 8px);
    z-index: 9999;
    border-radius: 6px !important;
    border: 1px solid #dadee2;
    position: absolute !important;
    background: #fff;
}

.gtranslate_wrapper .gt_float_switcher .gt-selected {
    background-color: transparent;
}

.gtranslate_wrapper .gt_float_switcher img {
    width: 20px !important;
}

.gtranslate_wrapper .gt_float_switcher {
    font-size: 15px !important;
}

span.gt_float_switcher-arrow {
    filter: invert(1) !important;
}

.col-lg-6.btn-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.search-wrapper {
    /*max-width:1200px;*/
    margin: 0px auto 60px auto;
    background: #3b3b3b;
    background: var(--banner-bg-color);
    padding: 20px;
    border-radius: 12px;
}

/* Tabs */
.tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.tab {
    /* background: #2d2d2d; */
    color: var(--select-color);
    border: none;
    text-decoration: none;
    padding: 10px 22px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    line-height: 22px;
    font-weight: 700 !important;
}

.tab.active {
    background: #ff9d00;
    color: #000;
}

.help {
    margin-left: auto;
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Filter bar */
.filter-bar {
    border: 1px solid var(--border-color);
    /*border: 1px solid #DDE1DE33;*/
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 25px;
}

.filter {
    color: var(--select-color);
    min-width: 150px;
}

.filter label {
    font-size: 12px;
    color: #aaa;
    display: block;
    margin-bottom: 6px;
}

.select {
    display: flex;
    align-items: center;
    gap: 10px;
}

.select i {
    color: #ff9d00;
}

select {
    background: none;
    border: none;
    color: var(--select-color);
    /* color: #fff; */
    font-size: 14px;
    outline: none;
    line-height: 22px !important;
    font-weight: 700;
    width: 200px;
}

.filter-options {
    background: var(--banner-bg-color);
    border: none;
    color: var(--select-color);
    font-size: 14px;
    outline: none;
    line-height: 22px !important;
    font-weight: 700;
    width: 200px;
}

/* Divider */
.divider {
    width: 1px;
    height: 45px;
    background: #444;
}

/* Price */
.price input {
    width: 160px;
    accent-color: #f98e00;
}

.price-value {
    margin-top: 6px;
    color: var(--select-color);
    font-size: 14px;
    line-height: 22px !important;
    font-weight: 700;
}

/* Button */
.search-btn {
    margin-left: auto;
    background: #ff9d00;
    border: none;
    color: #fff;
    padding: 14px 24px;
    border-radius: 30px;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.banner-bg {
    background: url(../images/banner.png) no-repeat top right;
    background-size: 100% 100%;
    background-size: cover;
    margin: 20px 0 0 0;
    padding: 60px 0 90px 0;
    background-position: bottom;
    border-radius: 20px;
}

.browse-slider h2 {
    text-align: center;
    color: #fff;
    font-size: 36px;
    margin-bottom: 5px;
}

.browse-slider p {
    text-align: center;
    color: #ddd;
    margin-bottom: 30px;
}

/*.swiper{
    padding-bottom:40px;
}*/

.card {
    background: transparent;
    border-radius: 14px;
    text-align: center;
    border: none;
    text-decoration: none;
}

.card img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border: #fff;
    border-radius: 13px;
}

.card span {
    font-size: 12px;
    background: #f1f1f1;
    padding: 5px 8px;
    border-radius: 20px;
    width: 55%;
    margin: 0 auto;
    color: #4d4d4d;
    position: relative;
    top: -12px;
    text-decoration: none !important;
    border: 1px solid #dde1de;
}

.support-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 12px 28px;
    background: #f58d02;
    color: #fff;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.support-btn:hover {
    background: #e55f00;
    color: #fff;
}

.card h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.vehicle-box {
    background: url(../images/vehicle-box.png) no-repeat top right;
}

.pre-approval-box {
    background: url(../images/pre-approval-box.png) no-repeat top right;
}

.secure-box {
    background-size: cover;
    padding: 25px 30px 20px 30px;
    display: flex;
    align-items: flex-end;
    height: 210px;
    border-radius: 15.09px;
    justify-content: space-between;
}

.secure-box h4 {
    font-size: 25px;
    color: #fff;
    letter-spacing: -1px;
}

.secure-box p {
    color: #878c91;
    font-size: 14px;
    width: 420px;
}

.secure-box i.fa-solid.fa-arrow-right {
    border: 1px solid #f58d02;
    color: #f58d02;
    width: 66.42px;
    border-radius: 52.83px;
    height: 42.26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s linear;
    cursor: pointer;
}

.secure-box i.fa-solid.fa-arrow-right:hover {
    background: #f58d02;
    color: #000;
}

.section-two {
    padding: 50px 0;
}

.car-card {
    background: #2f2f2f;
    border-radius: 16px;
    padding: 14px;
    color: #fff;
}

.car-img {
    position: relative;
}

.car-img img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 12px;
}

.rating {
    position: absolute;
    bottom: 4px;
    right: 20px;
    background: #fff;
    color: #000;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 20px;
    z-index: 99;
}

.location {
    font-size: 13px;
    color: #bbb;
}

.specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 14px 0;
    font-size: 13px;
    border-top: 1px solid #dde1de;
    padding-top: 15px;
}

.specs i {
    color: #f59e0b;
    margin-right: 6px;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-footer strong {
    font-size: 18px;
    color: var(--select-color);
}

.card-footer button {
    background: #f59e0b;
    border: none;
    color: #000;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
}

.card-footer button:hover {
    background: #ffb020;
}

.popular-vehicles h2 {
    color: var(--select-color);
    font-size: 48px;
    line-height: 110%;
    letter-spacing: -2px;
    margin-bottom: 5px;
}

.popular-vehicles p {
    color: var(--select-color);
    padding-bottom: 5px;
    font-size: 14px;
    margin: 0;
}

.popular-button ul {
    text-align: right;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.popular-button ul li {
    display: inline-block;
    padding: 0 0 0 5px;
}

.popular-button ul li a {
    text-decoration: none;
    background: #e4e6e8;
    color: #101010;
    line-height: 22px;
    font-size: 14px;
    padding: 11px 15px;
    border-radius: 50px;
}

.car-slider {
    padding-top: 20px;
}

.popular-button ul li i {
    padding: 0 0 0 6px;
}

.car-content {
    background: var(--banner-bg-color);
    border-radius: 12px;
    padding: 30px 20px 25px 20px;
    margin-top: -17px;
    position: relative;
}

.car-content h3 {
    font-size: 18px;
    font-weight: bold;
    line-height: 28px;
    color: var(--select-color);
}

.popular-vehicles p i {
    color: #f58d02;
    margin: 0 6px 0 0;
}

.specs span {
    color: var(--select-color);
}

.card-footer {
    padding-top: 10px;
}

.swiper-slide {
    border: none;
    border-radius: 0;
}

.popular-vehicles {
    padding: 0 0 70px 0;
}

.about-motokloz {
    background: url(../images/about-bg.png) no-repeat top right;
    background-size: 100% 100%;
    padding-top: 60px;
    padding-bottom: 100px;
}

.car-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 434px;
    margin-top: -440px;
}

.car {
    position: absolute;
    bottom: 0;
    width: 801px;

    left: 100%;
    /* start outside right */

    animation: carMove 4s linear forwards;
}

/* Keyframes */
@keyframes carMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-900px);
        /* jitna andar lana ho utna px set karo */
    }
}

.about-bg {
    background: var(--banner-bg-color);
    padding: 30px;
    border-radius: 16px;
    z-index: 999;
    position: relative;
}

.about-bg h2 {
    color: var(--select-color);
    font-size: 48px;
    line-height: 110%;
    letter-spacing: -2px;
}

.about-bg h2 span {
    color: #f58d02;
}

.about-bg p {
    color: #9e9e9e;
    font-size: 15px;
    line-height: 25px;
}

a.btn-custom {
    background: #f58d02;
    padding: 10px 40px;
    border-radius: 80px;
    text-decoration: none;
    color: #fff;
    display: inline-block;
}

.testimonials-section {
    padding: 70px 0;
    text-align: center;
}

.testimonials-content h4 {
    background: #f58d02;
    display: inline-block;
    padding: 8px 13px;
    border-radius: 33px;
    border: 1px solid #fff;
    font-size: 14px;
    line-height: 24px;
    color: #fff;
    font-weight: bold;
}

.testimonials-content img.img-fluid {
    padding: 0 10px 0 0;
}

.testimonials-content h2 {
    font-size: 48px;
    letter-spacing: -2px;
    color: var(--select-color);
    text-transform: capitalize;
}

.testimonials-content p {
    color: #9e9e9e;
    font-size: 15px;
    line-height: 25px;
}

.review-swiper {
    padding: 40px 0;
}

.review-card {
    border-radius: 18px;
    padding: 50px 32px !important;
    color: #fff;
    height: 100%;
    border: 1px solid var(--border-color);
    text-align: left;
}

.review-stars {
    color: #f5c518;
    font-size: 14px;
    margin-bottom: 10px;
}

.review-user {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.review-user h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--select-color);
    line-height: 22px;
}

::selection {
    background-color: #ff9300;
    /* Selection ka background color */
    color: white;
    /* Selection ke text ka color */
}

.review-verified {
    width: 16px;
    height: 16px;
    background: #1dbf73;
    color: #000;
    font-size: 11px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-card p {
    color: var(--select-color);
    font-size: 14px;
    line-height: 1.6;
}

.review-card img.img-fluid {
    margin-bottom: 15px;
}

/* .car-review {
    background: url(../images/car-reviews.png) no-repeat top right;
    background-size: 100% 100%;
    padding-top: 170px;
    padding-bottom: 100px;
} */

.car-review {
    background: url(../images/car-reviews.png) no-repeat top right;
    background-size: cover;
    background-position: top right;
    height: 672px;
    display: flex;
    align-items: center;
}

.car-review h4 {
    color: #f58d02;
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
}

.car-review h2 {
    font-size: 44px;
    font-weight: bold;
    color: #fff;
}

.car-review p {
    font-size: 18px;
    color: #fff;
    line-height: 28px;
    font-weight: 300;
}

.subscribe-box {
    display: flex;
    align-items: center;
}

.subscribe-box input {
    flex: 1;
    border: none;
    outline: none;
    padding: 14px 18px;
    border-radius: 40px;
    font-size: 14px;
}

.subscribe-box button {
    border: none;
    outline: none;
    padding: 14px 28px;
    margin-left: 6px;
    background: #f58d02;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 40px;
    cursor: pointer;
    transition: 0.3s ease;
}

.subscribe-box button:hover {
    opacity: 0.9;
}

.footer-top {
    padding: 40px 0;
    border-bottom: 1px solid #575656;
}

.footer-top .row {
    flex-wrap: wrap;
    justify-content: space-between;
}

.footer-top h3 {
    color: #ffffff;
    font-size: 32px;
    font-weight: 600;
    width: 65%;
    line-height: 110%;
}

.footer-mid {
    padding: 50px 0;
}

.footer-mid li {
    display: flex;
    margin-top: 15px;
    align-items: center;
}

.footer-mid ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.footer-mid li a {
    color: #8e8e8e;
    font-size: 15px;
    text-decoration: none;
    line-height: 26px;
}

.footer-mid li i {
    color: #8e8e8e;
    font-size: 14px;
    margin: 7px 9px 0 0;
}

.footer-mid img.img-fluid {
    margin-bottom: 40px;
    width: 314px;
    height: 47px;
    object-fit: fill;
}

footer.footer {
    background: #101010;
}

.footer-mid h4 {
    color: #ffffff;
    font-size: 18px;
    line-height: 28px;
}

/* Footer headings */
footer h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 14px;
    color: #222;
}

/* Remove default list style */
footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Footer links base */
footer ul li a {
    position: relative;
    display: inline-block;
    color: #666;
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.25s ease;
    font-size: 14px;
}

/* Hover color */
footer ul li a:hover {
    color: #f58d02;
}

/* Underline animation */
footer ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1.5px;
    background: #f58d02;
    transition: width 0.3s ease;
}

footer ul li a:hover::after {
    width: 100%;
}

.calltoaction h5 {
    color: #ffffff;
    font-size: 16px;
    margin: 0 0 5px 0;
}

.calltoaction {
    padding-top: 35px;
}

.calltoaction h5 i {
    color: #8e8e8e;
    border: 1px solid #8e8e8e;
    border-radius: 50px;
    padding: 7px;
    font-size: 14px;
    margin: 0 10px 0 0;
}

.calltoaction h6 a {
    color: #f58d02;
    font-size: 24px;
    text-decoration: none;
}

.footer-bottom {
    border-top: 1px solid #575656;
    padding: 25px 0;
}

.footer-bottom p {
    font-size: 14px;
    color: #fff;
    margin: 0;
}

.footer-bottom p a {
    color: #f58d02;
    text-decoration: none;
    font-weight: 600;
}

.footer-bottom ul {
    margin: 0;
    padding: 0;
    float: right;
}

.footer-bottom ul li {
    display: inline-block;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    padding: 0 0 0 20px;
}

.footer-bottom ul li i {
    color: #fff;
}

.footer-bottom .row {
    align-items: center;
}

.btn-mobile {
    display: none;
}

.search-container {
    background: var(--banner-bg-color);
    border-radius: 16px;
    padding: 30px 30px;
    margin: 100px 0 0 0;
    border: 1px solid #dde1de;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* Top Tabs Styles */
.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-left: 10px;
}

.tabs .tab {
    padding: 10px 25px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}

.tab.active {
    background-color: #f98e00;
    /* Orange color from image */
    color: white;
    border-radius: 25px;
}

.need-help {
    color: #666;
    font-size: 14px;
    cursor: pointer;
}

.need-help i {
    margin-right: 5px;
}

/* Main Box Styles */
.search-box {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); */
}

.filter-item {
    flex: 1;
    padding: 0 15px;
}

.label {
    color: #888;
    font-size: 13px;
    margin-bottom: 8px;
}

.value {
    display: flex;
    align-items: center;
    gap: 10px;
}

.value i {
    color: #ccc;
    font-size: 18px;
}

.value strong {
    color: #111;
    font-size: 15px;
}

/* Divider line between items */
.divider {
    width: 1px;
    height: 50px;
    background-color: #eee;
}

/* Orange Button */
.find-btn {
    background-color: #f98e00;
    color: white;
    border: none;
    padding: 15px 35px;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.3s;
}

.find-btn:hover {
    background-color: #e07b00;
}

.car-listing-bg {
    background: url("../images/car-listing-banner.png");
    margin: 20px 0 0 0;
    padding: 180px 0 0px 0;
    border-radius: 20px;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 487px;
}

.car-listing-cont h4 {
    border-radius: 72px;
    display: table;
    margin: 0 auto;
    text-align: center;
    padding: 5px 20px;
    color: #f58d02;
    font-size: 14px;
    background: rgba(255, 225, 185, 0.2);
    backdrop-filter: blur(7px);
}

.car-listing-cont h2 {
    text-align: center;
    font-size: 48px;
    color: #fff;
    line-height: 70px;
    margin: 0;
}

.back-icon img {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

.top-back {
    padding: 25px 0;
    background: var(--bg-color);
    color: var(--select-color);
}

.dashboard-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    color: var(--select-color);
    transition: 0.2s ease;
}

.search-dealer-container {
    background: var(--banner-bg-color);
    border-radius: 16px;
    padding: 30px 30px;

    border: 1px solid #dde1de;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.car-listing-cont p {
    text-align: center;
    font-size: 15px;
    color: #fff;
}

section.banner-car-listing {
    margin-bottom: 136px;
}

.fleet-section {
    padding: 50px 0;
}

.dealer-fleet-section {
    padding: 20px 0;
}

.main-title {
    font-size: 36px;
    font-weight: 800;
    color: var(--select-color);
}

.main-subtitle {
    color: #777777;
    font-size: 16px;
}

/* Sidebar Complete Styling */
.complete-sidebar {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    background: var(--banner-bg-color);
}

.sidebar-main-heading {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--select-color);
}

.filter-group {
    margin-bottom: 18px;
}

.sidebar-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--select-color);
}

.sidebar-input {
    background-color: #f9f9f9;
    border: 1px solid #f2f2f2;
    font-size: 14px;
    border-radius: 10px;
    color: #666666;
    padding: 10px 15px;
}

.sidebar-input:focus {
    box-shadow: none;
    border-color: #f98e00;
}

.map-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--select-color);
}

.map-toggle-icon {
    font-size: 12px;
    color: #999;
}

/* Toolbar Styling */
.view-icons i {
    color: #cccccc;
    font-size: 18px;
    cursor: pointer;
}

.view-icons i.active {
    color: #111111;
}

.results-info {
    font-size: 14px;
    color: #888888;
}

.btn-clear-filters {
    background-color: #f98e00;
    color: #ffffff;
    border: none;
    padding: 8px 22px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    transition: 0.3s;
}

.btn-clear-filters:hover {
    background-color: #e07b00;
}

.tool-select {
    width: auto;
    font-size: 13px;
    border-radius: 50px;
    border: 1px solid #eeeeee;
    padding: 12px 33px 12px 12px !important;
}

/* MODERN GRID CARD (image_9a84e7 style) */
.modern-car-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.wishlist-body {
    padding: 18px 20px;
}

.modern-car-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.car-card-top {
    position: relative;
    height: 195px;
}

.car-card-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Badge on top of image */
.badge-mileage {
    position: absolute;
    bottom: 0;
    left: 12px;
    background: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    color: #737373;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: var();
    z-index: 99996;
}

.badge-mileage i {
    color: #f98e00;
    margin-right: 6px;
}

/* Card Body */
.car-card-bottom {
    padding: 25px 20px 20px 20px;
    background: var(--banner-bg-color);
    border-radius: 12px;
    margin-top: -10px;
    z-index: 999;
    position: relative;
}

.col-12 .modern-car-card {
    display: flex;
}

.col-12 .car-card-top {
    width: 300px;
    height: auto;
    max-height: 300px !important;
}

.col-12 .badge-mileage {
    bottom: 15px;
}

.gridbtn {
    cursor: pointer;
}

/* Default SVG color */
.gridbtn path {
    fill: #afafaf;
    /* default gray */
}

/* Active SVG color */
.gridbtn.active path {
    fill: #ff9d00;
    /* active view color */
}

.vehicle-card {
    transition: all 0.55s ease;
}

.vehicle-card.animating {
    opacity: 0;
    transform: scale(0.95);
}

.vehicle-card.show {
    opacity: 1;
    transform: scale(1);
}

.col-12 .car-main-title {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--select-color);
    min-height: 44px;
}

.col-12 .car-card-bottom {
    flex: 1;
    border-radius: unset;
}

.car-main-title {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--select-color);
    min-height: 44px;
}

.car-distance-away {
    font-size: 14px;
    margin-bottom: 22px;
    color: var(--select-color);
}

/* Orange Circular Icons */
.car-circle-icons-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

.orange-circle {
    width: 44px;
    height: 44px;
    background-color: #f98e00;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}

.extra-icons-count {
    font-size: 15px;
    font-weight: 700;
    color: #333333;
    margin-left: 2px;
    color: var(--select-color);
}

/* Price Block (Right Aligned) */
.car-price-block {
    margin-top: 15px;
}

.car-price-block .price-value {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 0;
    color: var(--select-color);
}

.price-sub-text {
    font-size: 13px;
    color: #999999;
    margin: 0;
}

/* Pagination Styling */
.page-num-btn,
.page-nav-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #eeeeee;
    background: #ffffff;
    border-radius: 10px;
    margin: 0 4px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

.page-num-btn.active {
    background-color: #f98e00;
    color: #ffffff;
    border: none;
}

.row.fleet-top {
    margin-bottom: 15px;
}

/* Fluid Layout */
.gallery-section {
    padding: 30px 0;
}

/* Main Slider Wrapper */
.main-gallery-slider {
    width: 100%;
    height: 600px;
    border-radius: 25px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.main-gallery-slider img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000000;
}

/* Fixed Buttons Container (Always on top) */
.gallery-action-overlay {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 100;
    /* Taake image ke upar rahe */
}

.btn-lexus-orange {
    background-color: #f98e00;
    color: #ffffff;
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s ease-in-out;
}

.btn-lexus-white {
    background-color: #ffffff;
    color: #111111;
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Navigation Arrows */
.arrow-round {
    background-color: #ffffff;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.arrow-round::after {
    font-size: 18px !important;
    color: #333333;
    font-weight: 800;
}

/* Thumbnails Strip */
.thumb-strip-slider {
    height: 120px;
}

.thumb-strip-slider .swiper-slide {
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    transition: 0.3s;
}

/* Active Thumbnail */
.thumb-strip-slider .swiper-slide-thumb-active {
    opacity: 1;
    border: 3px solid #f98e00;
}

.thumb-strip-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* All Classes are prefixed with mto- to avoid conflicts */

.mto-page-body {
    background-color: #fcfcfc;
    font-family: "Inter", sans-serif;
    color: #111;
}

.mto-top-headline {
    font-size: 36px;
    line-height: 1.3;
    color: var(--select-color);
}

.mto-map-link {
    text-decoration: none;
    border-bottom: 1px solid var(--select-color);
    color: var(--select-color);
}

.mto-meta-row {
    font-size: 13px;
    font-weight: 600;
    color: var(--select-color);
}

/* Utility Pills */
.mto-pill-btn {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 6px 15px;
    font-size: 12px;
    font-weight: 600;
    color: #444;
}

.no-result-found {
    color: var(--select-color);
    font-size: 38px;
    font-weight: 500;
    line-height: 45px;
    padding-top: 50px;
}

/* Beige Info Grid */
.mto-info-tile {
    background-color: var(--car-details-feutures);
    padding: 18px 5px;
    border-radius: 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #000;
}

.mto-info-tile i {
    display: block;
    font-size: 18px;
    margin-bottom: 8px;
    color: #333;
}

/* Custom Stack/Accordion */
.mto-stack-item {
    border-radius: 15px;
    overflow: hidden;
    background: var(--banner-bg-color);
    border: 1px solid #dde1de;
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.07);
}

.mto-stack-trigger {
    padding: 20px 25px;
    cursor: pointer;
    transition: background 0.2s;
}

.mto-stack-trigger:hover {
    background-color: transparent;
}

.mto-stack-content {
    padding: 0 25px 25px 25px;
    display: none;
    font-size: 15px;
    line-height: 1.8;
    text-transform: none;
}

.link-text-decoration {
    text-decoration: none;
    color: unset !important;
}

.mto-stack-content.show {
    display: block;
}

.dealerlogo {
    height: 80px;
    width: 80px;
    object-fit: contain;
    border-radius: 50px !important;
    border: 1px solid #dde1de;
    padding: 2px;
}

.dealerprofilelogo {
    height: 80px;
    width: 80px;
    border-radius: 50px;
    object-fit: contain;
    border: 1px solid #dde1de;
    padding: 2px;
}

.mto-arrow {
    font-size: 12px;
    color: #999;
    transition: 0.3s;
}

.mto-stack-trigger.active .mto-arrow {
    transform: rotate(180deg);
}

.mto-opt i {
    color: #f98e00;
}

/* Sidebar Components */
.mto-card-unit {
    border-radius: 10px;
    border: none;
    background: var(--banner-bg-color);
    border: 1px solid #dde1de;
}

.mto-btn-orange {
    background-color: #f98e00;
    color: #fff;
    border: none;
    padding: 13px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
}

.mto-btn-black {
    background-color: #000;
    color: #fff;
    border: none;
    padding: 13px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
}

.mto-rating-badge {
    font-size: 12px;
    font-weight: 700;
    background: var(--text-color);
    border: 1px solid #dde1de;
    padding: 3px;
    border-radius: 30px;
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.07);
}

.mto-rating-badge i {
    color: #f98e00;
}

.mto-rating-badge i {
    color: #f98e00;
}

.mto-contact-details i {
    width: 22px;
}

.mto-sticky-side {
    position: sticky;
    top: 20px;
}

.mto-specs-container.mb-5 {
    padding: 25px 18px;
    border-radius: 8px;
    background: var(--banner-bg-color);
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.07);
    border: 1px solid #dde1de;
}

.col-md-6.mto-opt {
    color: var(--select-color);
}

h5.mb-0.fw-bold {
    color: var(--select-color);
}

.text-muted {
    color: var(--select-color) !important;
}

.mto-qa-card.border.p-3.rounded-3 h6.fw-bold {
    color: var(--select-color);
}

h6.fw-bold.mb-3 {
    color: var(--select-color);
}

span.fw-bold {
    color: var(--select-color);
}

.mto-contact-details.small.fw-semibold .mb-2 {
    color: var(--select-color);
}

h6.mb-0.fw-bold {
    color: var(--select-color);
}

span.mto-rating-badge {
    color: var(--select-color);
}

/* Sidebar Styling */
.sidebar-box {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    background: #fff;
}

.nav-link {
    color: #555;
    padding: 12px 20px;
    border-left: 3px solid transparent;
    transition: 0.3s;
}

/* Base style */
.navbar-nav .nav-link {
    position: relative;
    color: #444;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 8px;
    transition:
        color 0.25s ease,
        background-color 0.25s ease;
}

/* Soft background on hover */
.navbar-nav .nav-link:hover {
    color: #f58d02;
    background-color: rgba(245, 141, 2, 0.08);
    /* width: 90px; */
}

/* Active link */
.navbar-nav .nav-link.active {
    color: #f58d02;
    background-color: rgba(245, 141, 2, 0.12);
}

/* Smooth underline animation */
.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 0;
    height: 2px;
    background: #f58d02;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    width: 60%;
}

/* Profile Cards */
.profile-section-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 25px;
    margin-bottom: 25px;
    border: none;
}

.card-header-title {
    font-weight: 700;
    font-size: 18px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

/* Form Inputs */
.custom-label {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    margin-bottom: 7px;
}

.custom-input {
    background-color: #f4f7f9;
    border: 1px solid #eef2f6;
    border-radius: 8px;
    padding: 11px 15px;
    font-size: 14px;
}

.custom-input:focus {
    background-color: #fff;
    border-color: #ff9800;
    box-shadow: none;
    outline: none;
}

/* Buttons */
.btn-save {
    background-color: #ff9800;
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 25px;
    font-weight: 600;
    transition: 0.3s;
}

.btn-save:hover {
    background-color: #e68a00;
    color: white;
}

.btn-avatar {
    background-color: #ff9800;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 5px;
    font-weight: 600;
}

.badge-orange {
    background-color: #ff9800;
    color: white;
    font-size: 11px;
    border-radius: 50%;
    padding: 4px 8px;
}

/* Listing Page Style Start */
.my-py-80 {
    padding: 80px 0;
}

.listing-page ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.user-breadcrumbs {
    padding: 12px 17px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: auto;
    margin-bottom: 15px;
}

.user-breadcrumbs ul {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 0;
    margin: 0;
}

.user-breadcrumbs ul li {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 15px;
    font-family: "Urbanist", sans-serif;
}

.user-breadcrumbs ul li:after {
    content: "";
    width: 7px;
    background: url(../images/right-caret.svg) no-repeat;
    height: 20px;
    display: block;
    background-position: center;
}

.user-breadcrumbs ul li:last-child:after {
    display: none;
}

.listing-page .listing .listing-top .warning-div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-title h1 {
    font-size: 44px;
    font-weight: 700;
}

.listing-page .page-title {
    margin-bottom: 34px;
}

.sidebar-top.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    background-color: rgb(33 37 41 / 3%);
}

.sidebar-top.user-info .sidebar-left .user-image {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: scale-down;
}

.sidebar .sidebar-center {
    flex: 1;
}

.sidebar-center .username {
    font-size: 20px;
    margin: 3px;
    font-weight: 700;
    margin: 0;
    font-family: "Urbanist", sans-serif;
}

.sidebar-center .date-of-register {
    font-size: 14px;
    font-weight: 400;
    font-family: "Urbanist", sans-serif;
}

.sidebar {
    border: 1px solid var(--border-color);
    padding: 0;
    border-radius: 6px;
}

.sidebar .sidebar-right {
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e4e6e8;
    border-radius: 50%;
    padding: 8px;
}

.sidebar .user-pagelist ul li {
    padding: 12px 25px;
}

.sidebar .user-pagelist ul {
    display: flex;
    flex-direction: column;
    padding: 0;
    list-style: none;
}

.sidebar ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 500;
}

.sidebar ul li a span {
    color: var(--select-color);
    transition: 0.3s ease-in-out;
}

.sidebar ul li a svg {
    width: 18px;
    height: 18px;
}

.sidebar ul li a svg path {
    fill: var(--select-color);
    transition: 0.3s ease-in-out;
}

.sidebar .user-pagelist ul li:hover a span {
    color: #ff9d00;
}

.sidebar .user-pagelist ul li:hover a svg path {
    fill: #ff9d00;
    transition: 0.3s ease-in-out;
}

.listing-page svg {
    width: 18px;
    height: 18px;
    font-weight: 500;
}

.listing-page .listing {
    padding-left: 20px;
}

.listing-page .listing .listing-top {
    margin-bottom: 24px;
    padding: 18px 16px;
    background-color: #ffe1b9;
    border-radius: 6px;
}

.listing-page .listing .listing-top .warning-div .warning-text {
    flex: 1;
    color: #f58d02;
}

.listing-page .listing-bottom .listing-main {
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.listing-page .listing-bottom .listing-main .listing-head {
    display: flex;
    gap: 10px;
    /* align-items: center; */
    background-color: rgb(33 37 41 / 3%);
    border-bottom: 1px solid var(--border-color);
    padding: 9px 16px;
}

.listing-page .listing-bottom .listing-main .listing-head .search-form {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.listing-page .listing-bottom .listing-main .listing-head .listing-left h2 {
    font-size: 20px;
    margin: 0;
    font-weight: 700;
}

.listing-page .listing-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.listing-page .listing-right .filter {
    width: 46px;
    min-width: unset;
    background-color: #f2f4f6;
    padding: 10px;
    border-radius: 800px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.listing-page .listing-bottom .listing-main .listing-head .search-form form {
    border: 1px solid #ececec !important;
    background-color: #fff !important;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    width: 316px;
    gap: 6px;
    padding: 10px 9px;
    border-radius: 24px;
}

.listing-page .listing-bottom .listing-main .listing-head .search-form form input {
    background-color: transparent !important;
    border: 0;
    flex: 1;
    height: 100%;
    padding: 0;
}

.mt-56 {
    margin-top: 25px;
}

.listing-page .listing-bottom .listing-main .listing-head .search-form form button {
    border: 0;
    background-color: transparent;
    padding: 0;
}

.listing-page .listing-bottom .listing-main .listing-head .listing-left {
    display: flex;
    align-items: center;
}

.listing-page .listing-bottom .listing-main .listing-head .search-form form input:focus-visible {
    outline: 0;
}

.listing-body {
    padding: 18px;
}

.page-bottom .page-bottom-content {
    display: flex;
    align-items: flex-start;
}

@media screen and (max-width: 1239px) {
    .listing-page .listing {
        padding-top: 20px;
        padding-left: 0;
    }

    .listing-page .page-title {
        padding: 0;
    }

    .listing-page .page-title {
        margin-bottom: 14px;
    }
}

/* Listing Page Style End */
/* Pagination Start */
.page-item.active .page-link {
    background: #ff9800;
    color: #fff;
    border-color: unset !important;
}

.page-square {
    width: 44px;
    height: 44px;
    border-radius: 5px;
    display: flex;
    background: #f2f4f6;
    align-items: center;
    justify-content: center;
    color: #000000;
    line-height: 35px;
    font-size: 16px;
    transition: all 0.2s ease;
    border: 0 !important;
}

.dark-mode .light-dark {
    filter: brightness(0);
}

.light-dark {
    filter: brightness(0) invert(1);
}

/* Pagination End */
.sidebar-card {
    background: white;
    padding: 0;
    border: none;
    border-radius: 6px;
}

.form-card {
    border-radius: 8px;
    /* padding: 25px; */
    margin-bottom: 25px;
    border: 1px solid var(--border-color);
}

.nav-link {
    color: #555;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 14px;
}

.nav-link:hover,
.nav-link.active {
    background: #fff8ef;
    color: #ff9800 !important;
}

.btn-orange {
    background-color: #ff9800;
    color: white;
    border-radius: 25px;
    padding: 10px 25px;
    border: none;
    font-weight: 500;
}

.btn-orange:hover {
    background-color: #e68a00;
    color: white;
}

.form-control,
.form-select {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    font-size: 14px;
    padding: 10px;
}

label {
    font-size: 13px;
    color: #666;
    margin-bottom: 5px;
    font-weight: 500;
}

.badge-orange {
    background-color: #ff9800;
    border-radius: 50%;
    font-size: 10px;
}

.d-flex.align-items-center.mb-4.position-relative {
    background: var(--banner-bg-color);
    padding: 20px;
    border-radius: 6px 6px 0 0;
    border: 1px solid #eee;
    margin: 0 !important;
}

.sidebar-card h6.mb-0 {
    color: var(--select-color);
}

.sidebar-card small {
    color: var(--select-color);
}

nav.nav.flex-column {
    padding: 20px;
}

i.fas.fa-edit.position-absolute.top-0.end-0.cursor-pointer {
    background: #e4e6e8;
    color: #222222;
    padding: 6px;
    border-radius: 50px;
    margin: 28px 12px;
}

ol.breadcrumb.mb-1 {
    border: 1px solid #dde1de;
    border-radius: 5px;
    padding: 5px 10px;
    background: var(--banner-bg-color);
    display: inline-flex;
}

ol.breadcrumb.mb-1 a.text-decoration-none {
    color: var(--select-color);
}

li.breadcrumb-item.active {
    color: var(--select-color);
    font-weight: bold;
}

h2.fw-bold.mb-4 {
    font-size: 44px;
    color: var(--select-color);
}

section.agent-header {
    padding-top: 50px;
}

.agend-headd {
    color: var(--select-color);
    padding: 14px;
}

.form-card.shadow-sm input.form-control {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
}

.content-box {
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 25px;
    background: var(--banner-bg-color);
}

.btn-orange {
    background-color: #f39200;
    color: white;
    border-radius: 30px;
    border: none;
    padding: 10px 25px;
    font-weight: 600;
}

.btn-orange:hover {
    background-color: #d68100;
    color: white;
}

.btn-dark-custom {
    background-color: #111;
    color: white;
    border-radius: 30px;
    padding: 10px 25px;
}

.form-control {
    background-color: #fbfbfb;
    border: 1px solid #eee;
    padding: 12px;
    border-radius: 8px;
}

.service-list li {
    margin-bottom: 12px;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.service-list i {
    font-size: 8px;
    margin-right: 12px;
    color: #f39200;
}

.progress {
    height: 12px;
    background-color: #e4e6e8;
    border-radius: 2px;
}

.progress-bar {
    background-color: #ffc700;
}

.rating-num {
    /* font-size:; */
    font-weight: 800;
}

.gallery-img {
    object-fit: cover;
    border-radius: 8px;
    height: 100%;
    width: 100%;
}

.content-box h3.mb-0.fw-bold {
    color: var(--select-color);
}

.content-box p.mb-0 {
    color: var(--select-color);
}

.content-box .mb-4 {
    color: var(--select-color);
}

.content-box .mb-4 p {
    color: var(--select-color);
}

ul.list-unstyled.service-list {}

ul.list-unstyled.service-list li {
    color: var(--select-color);
}

.rating-num {
    color: var(--select-color);
}

.col-md-4.text-center.border-end {}

.col-md-4.text-center.border-end p.mb-1 {
    color: var(--select-color);
}

.d-flex.align-items-center.mb-2 {}

.d-flex.align-items-center.mb-2 span.small {
    color: var(--select-color);
}

.content-box input.form-control {
    background-color: #fff;
    border: 1px solid #eee;
}

.content-box textarea.form-control {
    background-color: #fff;
    border: 1px solid #eee;
}

.dropdownn .btn {
    font-size: 14px;
    font-weight: 500;
    padding: 8px 28px !important;
    background: var(--bg-color);
    color: var(--select-color);
}

#themeToggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.small p.mb-2 {
    color: var(--select-color);
}

.content-box h5.fw-bold.mb-3 {
    color: var(--select-color);
}

.card-container {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.section-title {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/* Image Upload Section */
.img-upload-box {
    border: 2px dashed #ff9800;
    border-radius: 8px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ff9800;
    cursor: pointer;
    background: #fffdfa;
}

.preview-img-container {
    position: relative;
    height: 150px;
}

.preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.delete-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc3545;
    border: 1px solid #ddd;
    cursor: pointer;
}

/* Form Styling */
.form-control,
.form-select {
    background-color: #f1f3f5;
    border: 1px solid #e9ecef;
    padding: 12px;
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--select-color);
    pointer-events: auto;
    background-color: var(--bg-color);
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0;
}

.modal-content label {
    color: var(--select-color);
}

.modal-body .form-control {
    background-color: var(--modal-body-inputs);
    border: var(--border-color);
    color: var(--select-color);
    padding: 12px;
}

.modal-body .form-control:focus {
    background-color: var(--modal-body-inputs);
    border-color: #ff9800 !important;
    padding: 12px;
}

.modal-body .form-control::placeholder {
    color: var(--select-color);
}

.modal-header {
    background-color: #ff9800;
    color: white;
}

.modal-header button {
    color: white;
}

.form-control:focus {
    background-color: #fff;
    border-color: #ff9800 !important;
    box-shadow: none;
}

.form-select:focus {
    background-color: #fff;
    border-color: #ff9800 !important;
    box-shadow: none;
}

.btn-orange {
    background-color: #ff9800;
    color: white;
    border-radius: 25px;
    padding: 10px 30px;
    font-weight: 500;
    border: none;
}

.btn-orange:hover {
    background-color: #e68a00;
    color: white;
}

.btn-light-custom {
    background: #f8f9fa !important;
    border: 1px solid #ddd !important;
    border-radius: 20px;
    padding: 5px 20px;
    font-size: 0.9rem;
    color: #000 !important;
}

.feature-checkbox {
    margin-bottom: 10px;
}

.form-check-input:checked {
    background-color: #ff9800;
    border-color: #ff9800;
}

.card-container h4.mt-4.mb-3 {
    color: #000;
}

h2.section-title {}

.card-container input.form-control {
    /* background-color: #f1f3f5; */
    border: 1px solid #e9ecef;
}

.card-container h2.section-title {
    color: #000;
}

/* Swiper container ko target karein */
.review-swiper {
    padding: 40px 0;
    /* Cards ke upar niche thodi jagah */
    position: relative;
    overflow: hidden;
    /* Zaroori hai */

    /* Ye edges par blur/fade effect banayega */
    -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            black 15%,
            black 85%,
            transparent 100%);
    mask-image: linear-gradient(to right,
            transparent 0%,
            black 15%,
            black 85%,
            transparent 100%);
}

/* Card ka size control karne ke liye */
.review-card {
    border-radius: 15px;
    padding: 33px;
    border: 1px solid #333;
    height: 100%;
}

.filter-all {
    background: none;
    border: none;
    color: var(--select-color);
    /* color: #fff; */
    font-size: 14px;
    outline: none;
    line-height: 22px !important;
    font-weight: 700;
}

.price-box {
    font-family: sans-serif;
}

.range-container {
    position: relative;
    width: 95%;
    height: 10px;
}

.slider-track {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    width: 100%;
    background: #d9d9d9;
    border-radius: 5px;
    z-index: 1;
}

input[type="range"] {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    z-index: 2;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    background: #f7941d;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    border: none;
}

input[type="range"]::-moz-range-thumb {
    height: 18px;
    width: 18px;
    background: #f7941d;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    border: none;
}

.values {
    margin-top: 10px;
    font-weight: 600;
    background: var(--bg-value-color);
    /* color: #fff; */
    padding: 3px 5px;
    border-radius: 6px;
}

/* ===== Custom Scrollbar — Motokloz Theme ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #111;
    border-radius: 99px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ff9d00, #e07b00);
    border-radius: 99px;
    border: 2px solid #111;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ffb733, #ff9d00);
}

::-webkit-scrollbar-corner {
    background: #111;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #ff9d00 #111;
}