body {
    font-family: "Inter", sans-serif;
    margin: 0px !important;
    background-color: var(--body-color);
    /* background: transparent; */
}

:root {
    --body-color: #F2F2F2;
    --button-color: #ffffff;
    --button-bg: #4F46E5;
    --text-blue: #4F46E5;
    --bg-transparent: transparent;
    --text-white: #ffffff;
    --bg-hero: url("../images/hero-banner-bg.jpeg");
    --bg-gray: rgba(0,0,0,0.2);
    --text-gray: #666666;
    --border-color: #CCCCCC;
    --bg-lightgray: #f2f2f2;
    --text-darkblack: #262626;
    --bg-blue: #4F46E5;
    --bg-secondary: #E2E1FA;
}
/* === common === */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-darkblack);
}

h2 {
    color: #262626;
    font-weight: 700;
    font-size: 36px;
    line-height: 43px;
}

p {
    font-size: 16px;
    color: var(--text-darkblack);
}

.fs-14 {
    font-size: 14px;
    line-height: 16px;
}

.fs-12 {
    font-size: 12px;
    line-height: 14px;
}

.text-gray {
    color: var(--text-gray);
}

.text-darkblack {
    color: var(--text-darkblack);
}

.mb-12 {
    margin-bottom: 12px;
}

.mb-20 {
    margin-bottom: 20px;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-600 {
    font-weight: 600;
}

.fw-500 {
    font-weight: 500;
}

.pt-8 {
    padding-top: 8px;
}

.pt-20 {
    padding-top: 20px;
}

input:focus {
    box-shadow: unset !important;
}

a {
    color: var(--text-blue);
    text-decoration: none;
}

.btn:focus {
    box-shadow: unset;
}

.text-blue {
    color: var(--text-blue);
}

/* header */
.navbar-brand img {
    height: 40px;
    width: 44px;
    object-fit: contain;
}

.navbar-nav {
    gap: 40px;
}

    .navbar-nav li a.nav-link {
        color: var(--text-white) !important;
        padding: 0px 0px !important;
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
    }

        .navbar-nav li a.nav-link.active {
            color: var(--text-blue) !important;
        }

.navbar {
    background-color: var(--bg-transparent);
    padding: 10px 80px !important;
    position: relative;
    z-index: 9;
}

    .navbar .navbar-toggler-icon {
        filter: brightness(0) invert(1);
    }
/* .header-section{
    position: relative;
    z-index: 9;
} */

/* ====  hero =====  */

.hero-section {
    position: relative;
    background-color: var(--bg-gray);
    padding: 180px 10px 100px !important;
}

    .hero-section .hero-bg-image img {
        /* background-image: url("../images/hero-banner-bg.jpeg"); */
        object-fit: cover;
        height: 100%;
        width: 100%;
        /* margin-top: -80px; */
    }

    .hero-section .hero-bg-image {
        position: absolute;
        top: -80px;
        left: 0;
        height: calc(100% + 80px);
        width: 100%;
    }

        .hero-section .hero-bg-image::before {
            content: "";
            background-color: var(--bg-gray);
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

.white-box {
    border-radius: 12px;
    padding: 20px 18px 12px 12px;
    z-index: 9;
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.hero-section .form-check {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 0px;
}

    .hero-section .form-check input {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        z-index: 99;
    }

    .hero-section .form-check label {
        width: 100%;
        padding: 12px 40px;
        flex-direction: row;
        height: unset;
        font-size: 14px;
        line-height: 19px;
        font-weight: 700;
        min-width: 173px;
        color: var(--text-blue);
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        height: 100%;
        background-color: var(--button-color);
    }

        .hero-section .form-check label span {
            font-size: 12px;
            line-height: 14px;
            color: var(--text-gray);
            font-weight: 500;
        }

    .hero-section .form-check input:checked + label {
        background-color: var(--bg-blue);
        color: var(--text-white);
        border-radius: 8px 0px 0px 8px;
    }

        .hero-section .form-check input:checked + label span {
            color: var(--text-white);
        }

.hero-section .rental-info {
    display: inline-flex !important;
    background-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0px 6px 8px rgba(59, 15, 65, 0.2);
    border-radius: 8px;
}

    .hero-section .rental-info .form-check:first-child label {
        border-radius: 8px 0px 0px 8px;
    }

    .hero-section .rental-info .form-check:last-child label {
        border-radius: 0px 8px 8px 0px;
    }

    .hero-section .rental-info .single-label {
        border-radius: 8px 8px 8px 8px !important;
    }

.car-rental-form .rental-btns {
    margin-top: -80px;
    padding-top: 30px;
}

.mb-30 {
    margin-bottom: 30px;
}

.rental-type {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 20px !important;
}

    .rental-type .form-group input {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        z-index: 99;
    }

    .rental-type .form-group label {
        color: var(--text-gray);
        font-size: 14px;
        line-height: 16px;
        font-weight: 400;
        border: 1px solid var(--border-color);
        border-radius: 24px;
        padding: 4px 12px;
        min-height: 26px;
        display: inline-flex;
        column-gap: 1px;
        align-items: center;
        padding: 4px 12px;
    }

        .rental-type .form-group label img, .rental-type .form-group label svg {
            height: 18px;
            width: 24px;
            object-fit: contain;
        }

    .rental-type .form-group input:checked + label {
        border: 1px solid var(--bg-blue);
        color: var(--text-blue);
        /* filter: brightness(1) opacity(1); */
    }

        .rental-type .form-group input:checked + label img {
            filter: invert(0.9) sepia(1) saturate(5) hue-rotate(175deg);
        }

.hero-section .select2-selection {
    border: unset !important;
    border-radius: none;
}

.hero-section .select2-selection__clear {
    display: none;
}

.calender-row .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-blue) !important;
    font-weight: 600;
    font-size: 16px;
    padding: 0px 0px !important;
    line-height: 24px;
}

.calender-row label {
    font-weight: 500;
    font-size: 10px;
    line-height: 15px;
}

.select2-dropdown {
    border: unset !important;
    background-color: var(--text-white);
    box-shadow: 0px 2px 20px rgba(32, 32, 35, 0.2);
    border-radius: 12px !important;
    padding: 0px;
}

.select2-results .select2-results__options,
.select2-results .select2-results__options .select2-results__group {
    padding: 0px 0px;
}

    .select2-results .select2-results__options.select2-results__options--nested {
        color: #666666;
    }

.select2-container--default .select2-results__option--selected {
    color: #262626 !important;
    background-color: #E6E6E6 !important;
    font-weight: 500;
    padding: 16px 16px m !important;
}

.select2-results .select2-results__options li {
    padding: 8px 16px;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #666666;
    margin-bottom: 10px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #E6E6E6 !important;
    color: #262626 !important;
}

.calender-row .select2-selection__arrow,
.select2-dropdown .select2-search--dropdown {
    display: none;
}

.select2-dropdown .select2-results ul.select2-results__options {
    border-radius: 12px;
}


.date-calender .datepicker {
    border: unset !important;
    background-color: var(--text-white);
    box-shadow: 0px 2px 30px rgba(32, 32, 35, 0.1);
    padding: 20px;
    border-radius: 12px;
}

.car-rental-form .select2-container .select2-selection__rendered,
.car-rental-form .select2-container {
    width: 100% !important;
}

.datepicker-days table td,
.datepicker-days table th {
    width: 48px;
    height: 48px;
}

.date-calender {
    padding: 8px 6px !important;
    /* margin: 0px 12px; */
}

.car-rental-form .date-calender {
    padding: 0px 6px 8px !important;
}

.date-calender .datepicker {
    width: 376px !important;
    left: 50% !important;
    transform: translateX(-50%);
    top: 70px !important;
}


    /*    .date-calender .datepicker table td.today.disabled,*/
    .date-calender .datepicker table td.today.day {
        color: #212529;
        background-color: transparent !important;
        border-radius: 50%;
        background-image: unset !important;
        box-shadow: 0px 0px 0px 1px var(--border-color);
    }

    .date-calender .datepicker table td.today.disabled,
    /*        .date-calender .datepicker table td.today.day,*/
    .date-calender .datepicker table td.today.disabled:hover
    /*        .date-calender .datepicker table td.today.day:hover */ {
        color: #999999;
    }

    .date-calender .datepicker table td.today.active,
    .date-calender .datepicker table td.day.active {
        background-color: var(--bg-blue) !important;
        color: var(--text-white);
        border-radius: 50%;
        background-image: unset !important;
        box-shadow: unset !important;
    }

.date-calender input::placeholder {
    color: #999999;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
}

.date-calender input {
    padding: 0;
    border: none !important;
    color: var(--text-blue);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}

.date-calender .datepicker table td.today {
    /* border: 1px solid var(--border-color) !important; */
    /*        background-color: transparent !important;
        border-radius: 50%;
        background-image: unset !important;
        box-shadow: 0px 0px 0px 1px var(--border-color);*/
}

.date-calender input.form-control:disabled {
    background-color: var(--bg-transparent);
}

.datepicker-dropdown:after,
.datepicker-dropdown:before {
    display: none !important;
}

.btn-blue {
    padding: 24px 22px;
    background-color: var(--bg-blue);
    color: var(--text-white);
    border-radius: 12px;
    border-radius: 12px;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.arrow-btn img {
    width: 16px;
    height: 12px;
}

.gap-24 {
    gap: 24px;
}

.date-calender::before, .location-details::before {
    content: "";
    background-color: rgba(153, 153, 153, 0.5);
    height: 29px;
    width: 1px;
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
}

.location-details {
    padding: 0px 16px 8px;
}

.date-calender .datepicker table {
    width: 100%;
}



/* Slider */

.slider-sec p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.slider-sec {
    background-color: var(--bg-lightgray);
    padding: 100px 10px;
}

    .slider-sec .mx-w-806 {
        max-width: 806px;
        margin: 0 auto;
    }

.show-mobile {
    display: none;
}

h4.card-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    color: var(--text-darkblack);
    margin-bottom: 8px;
    word-wrap: break-word;
}

.slider-sec h4.card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 38px;
}

.slider-sec h5.car-variant {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 12px;
}

.car-category a {
    font-size: 12px;
    font-weight: 500;
    background-color: #E6E6E6;
    color: var(--text-darkblack);
    display: inline-block;
    padding: 4px 8px;
    border-radius: 200px;
    text-decoration: none;
}

.car-slider-info .car-category {
    margin-bottom: 28px;
}

.car-slider-info .sperpart-detail img {
    height: 16px;
    width: 16px;
    object-fit: contain;
}

.car-slider-info .sperpart-detail h6 {
    font-size: 12px !important;
    line-height: 19px;
    font-weight: 400;
}

.btn-dark-blue {
    background-color: var(--bg-blue);
    border: 1px solid var(--bg-blue);
    color: var(--text-white);
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    text-align: center;
}

    .btn-dark-blue:hover {
        color: var(--text-blue);
        background-color: var(--bg-transparent);
    }

.slider-sec .view-details p {
    font-size: 14px;
    font-weight: 500;
    line-height: 19px;
    color: var(--text-darkblack);
    margin-bottom: 12px;
}

.fs-16 {
    font-size: 16px;
}

.slider-sec .view-details p span.fs-16 {
    font-weight: 600;
}

.mb-12 {
    margin-bottom: 12px;
}

.car-detial-box .card-body {
    padding: 20px 16px;
}

.car-detial-box .card .image-container {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.car-detial-box .card .card-img-top {
    /*    height: 131px;*/
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 8px 8px 0px 0px;
}

.car-detial-box .card {
    border: unset;
    border-radius: 8px;
}

.car-detial-box {
    border-radius: 8px !important;
    background-color: var(--button-color);
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
}

.slider-sec .slick-slide {
    margin: 0 8px;
}

.car-detial-slider button.slick-arrow {
    opacity: 1 !important;
    height: 35px;
    width: 35px;
    background-color: #ffffff;
    border-radius: 50%;
    z-index: 9;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    top: 45%;
}

    .car-detial-slider button.slick-arrow.slick-prev {
        left: -15px;
    }

    .car-detial-slider button.slick-arrow.slick-next {
        right: -15px;
    }


    .car-detial-slider button.slick-arrow:hover {
        background-color: var(--bg-blue);
    }

        .car-detial-slider button.slick-arrow:hover::before {
            filter: brightness(1) invert(0);
        }

.car-detial-slider .slick-arrow::before,
.lb-nav a {
    content: "";
    background-image: url("../images/prev-arrow.svg") !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 18px;
    width: 18px;
    position: absolute;
    opacity: 1;
}

.car-detial-slider .slick-arrow.slick-next::before {
    content: "";
    transform: scale(-1);
}

/* ====  Search Result Page ===== */
.process-sec {
    background-color: #F8F7FC;
    padding: 16px 80px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
}

.progressbar {
    max-width: 850px;
    margin: 0 auto;
}

    .progressbar ul li {
        list-style: none;
    }

    .progressbar ul {
        display: flex;
        gap: 10px;
        padding-left: 0px;
        margin: 10px auto 0px;
        justify-content: center;
    }

        .progressbar ul li {
            width: calc(20% - 5px);
            list-style: none;
            position: relative;
            margin-top: 8px;
            float: left;
        }

            .progressbar ul li:last-child {
                width: 130px;
            }

            .progressbar ul li a {
                font-size: 14px;
                font-weight: 500;
                line-height: 18px;
                color: #999999;
                text-decoration: none;
            }

            .progressbar ul li.active a {
                color: #101010;
            }

            .progressbar ul li a::before {
                content: "";
                background-color: #CCCCCC;
                position: absolute;
                border-radius: 50%;
                left: 8px;
                transform: translateX(-50%);
                top: -18px;
                height: 16px;
                width: 16px;
            }

            .progressbar ul li::after {
                content: "";
                background-color: #CCCCCC;
                height: 1px;
                width: 80%;
                position: absolute;
                top: -11px;
                left: 25px;
            }

            .progressbar ul li.active a::before {
                content: "";
                position: absolute;
                left: 6px;
                top: -14px;
                height: 8px;
                width: 8px;
                border-radius: 50%;
                background-color: #101010;
            }

            .progressbar ul li.active a::after {
                content: "";
                position: absolute;
                left: -2px;
                top: -18px;
                height: 16px;
                width: 16px;
                border-radius: 50%;
                border: 1px solid #101010;
                ;
                background-color: transparent;
            }

            .progressbar ul li.active::after {
                background-color: #101010;
            }

            .progressbar ul li:last-child::after {
                content: "";
                display: none;
            }
/* ====  breadcrunb ====  */

.breadcrunb-sec {
    padding: 40px 6px 24px;
}

    .breadcrunb-sec .breadcrumb {
        gap: 16px;
        align-items: center;
    }

    .breadcrunb-sec .breadcrumb-item {
        position: relative;
        font-size: 14px;
        color: #262626;
        line-height: 18px;
        font-weight: 600;
    }

        .breadcrunb-sec .breadcrumb-item + .breadcrumb-item::before {
            content: "";
            background-image: url("../images/caret-right.svg");
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            height: 16px;
            width: 16px;
            position: absolute;
            left: -12px;
            top: 50%;
            transform: translateY(-50%);
            padding-right: 0px;
        }

.box-shadow {
    background-color: #ffffff;
    padding: 24px;
    border-radius: 12px;
}

.filter-group img,
img.icon-size {
    height: 16px;
    width: 16px;
    object-fit: contain;
}

a.clear-link {
    color: var(--text-blue);
    font-weight: 500;
    text-decoration: none;
}

    a.clear-link:hover {
        color: var(--text-darkblack);
    }

.mb-24 {
    margin-bottom: 24px !important;
}

.filter-group h6 {
    font-weight: 700;
}

.search-icon {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    background-color: var(--bg-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox-style .form-check {
    padding-left: 0px !important;
}

    .checkbox-style .form-check label.form-check-label {
        position: relative;
        font-size: 14px;
        font-weight: 500;
        line-height: 18px;
        color: var(--text-gray);
    }

        .checkbox-style .form-check label.form-check-label span {
            color: #999999;
        }

    .checkbox-style .form-check input {
        padding: 0 !important;
        height: initial;
        width: initial;
        margin-bottom: 0;
        display: none;
        cursor: pointer;
    }

    .checkbox-style .form-check label.form-check-label:before {
        content: '';
        background-color: transparent;
        border: 1.5px solid #D1D5DB;
        padding: 7px;
        display: inline-block;
        position: relative;
        vertical-align: middle;
        cursor: pointer;
        margin-right: 8px;
        border-radius: 4px;
    }

    .checkbox-style .form-check input:checked + label.form-check-label:before {
        content: '';
        padding: 7px;
        display: inline-block;
        position: relative;
        vertical-align: middle;
        cursor: pointer;
        margin-right: 8px;
        border-radius: 4px;
        border: 1px solid var(--bg-blue);
        background-color: var(--bg-blue);
    }

    .checkbox-style .form-check input:checked + label.form-check-label:after {
        content: '';
        display: block;
        position: absolute;
        top: 5px;
        left: 6px;
        width: 5px;
        height: 8px;
        border: solid #ffffff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

.car-class-info hr {
    background-color: #E6E6E6;
    margin: 24px 0px;
}

.car-class-info .form-switch .form-check-input:checked {
    background-color: var(--bg-blue);
    border-color: var(--bg-blue);
}

.form-check-input:checked {
    border: 1px solid var(--bg-blue);
    background-color: var(--bg-blue);
}

.rotate-icon {
    transform: rotate(90deg);
}

.search-res-info .dropdown-toggle::after {
    display: none;
}

.search-res-info .price-menu a input {
    background-color: transparent;
    border: none;
    padding: 0;
    text-decoration: none;
}

.search-res-info .price-menu a img {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
}

.search-res-info .price-menu ul li {
    list-style: none;
    margin-bottom: 10px;
}

.search-res-info {
    padding-bottom: 80px;
}

.renault-details .sports-car {
    gap: 28px;
}

    .renault-details .sports-car .w-40 {
        /*        width: 256px;*/
        width: 276px;
    }

    .renault-details .sports-car .w-80 {
        width: calc(100% - 276px);
    }

.search-res-info .sports-car p.content {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-res-info .sports-car p.full-content {
    overflow: unset;
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
}

.renault-details .sports-car .car-slider img {
    height: 228px;
    width: 100%;
    object-fit: cover;
    border-radius: 7px;
    /*    background-color: #cccccc;*/
}
/*.renault-details .sports-car .car-slider .carousel-item{
    background-color:#f5f5f5;
}
*/
.renault-details .slick-arrow {
    z-index: 99;
    left: 7px;
    background-color: rgba(20, 20, 20, 0.5);
    border-radius: 4px;
    height: 24px;
    width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .renault-details .slick-arrow:hover {
        background-color: rgba(20, 20, 20, 0.5);
    }

    .renault-details .slick-arrow::before {
        content: "";
        background-image: url("../images/prev-arrow.svg");
        height: 16px;
        width: 16px;
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        opacity: 1;
    }

    .renault-details .slick-arrow.slick-next::before {
        content: "";
        transform: scale(-1);
    }

    .renault-details .slick-arrow.slick-next {
        right: 7px;
        left: unset;
    }

.renault-details .slick-dots {
    bottom: 8px;
}
/* .renault-details .slick-dots li {

} */
.car-slider {
    margin-bottom: 12px !important;
}

.vechical-details {
    width: calc(33.33% - 6px);
}

    .vechical-details h6 {
        font-size: 14px !important;
        color: var(--text-darkblack);
    }

.address-details .filter-group h6 {
    font-weight: 500 !important;
}

.renault-details .sperpart-detail {
    gap: 8px;
}

.border-button {
    width: 100%;
    background-color: var(--bg-transparent);
    border: 1px solid var(--bg-blue);
    color: var(--text-blue);
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    border-radius: 4px;
    padding: 9px 20px;
    text-align: center;
}

    .border-button:hover {
        background-color: var(--bg-blue);
        color: var(--text-white);
    }

.cost-details .rent-details {
    display: flex;
    flex-direction: column;
    justify-content: end;
    height: 100%;
}

.cost-details {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-left: 28px;
    border-left: 2px dashed #CCCCCC;
}


    .cost-details .border-gray {
        border: 1px solid #E6E6E6;
        border-radius: 8px;
        padding: 16px;
    }

        .cost-details .border-gray h4 {
            color: #101010;
            line-height: 28px;
            font-weight: 700;
            font-size: 20px;
            margin-bottom: 0px;
        }

.available-car p span {
    font-weight: 500;
}

/*.available-car a {
    text-decoration: none !important;
}*/

.available-car p.fs-16 {
    font-size: 16px;
    color: var(--text-gray);
    font-weight: 500;
}

.available-car p.font-weight-semibold {
    font-weight: 600;
}

    .available-car p.font-weight-semibold span {
        font-weight: 500;
    }

.day-cost-info p {
    font-weight: 600;
}

    .day-cost-info p span {
        font-weight: 500;
    }

.outerrainge {
    max-width: 450px;
    margin: 100px auto;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}


.noUi-target {
    position: relative;
    direction: ltr;
}

.noUi-base {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    /* Fix 401 */
}

.noUi-origin {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
}

.noUi-handle {
    position: relative;
    z-index: 1;
}

.noUi-stacking .noUi-handle {
    z-index: 10;
}

.noUi-state-tap .noUi-origin {
    -webkit-transition: left 0.3s,top .3s;
    transition: left 0.3s,top .3s;
}

.noUi-state-drag * {
    cursor: inherit !important;
}

/* Painting and performance;
 * Browsers can paint handles in their own layer.
 */
.noUi-base, .noUi-handle {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* Slider size and handle placement;
 */
.noUi-horizontal {
    height: 2px;
}

    .noUi-horizontal .noUi-handle {
        width: 12px !important;
        height: 12px;
        border-radius: 50%;
        left: 0px;
        top: -5px;
        background-color: var(--bg-blue);
    }

/* Styling;
 */
.noUi-background {
    background: var(--border-color);
}

.noUi-connect {
    background: var(--bg-blue);
    -webkit-transition: background 450ms;
    transition: background 450ms;
}

.noUi-origin {
    border-radius: 2px;
}

.noUi-target {
    border-radius: 2px;
}



/* Handles and cursors;
 */
.noUi-draggable {
    cursor: w-resize;
}

.noUi-vertical .noUi-draggable {
    cursor: n-resize;
}

.noUi-handle {
    cursor: default;
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

    .noUi-handle:active {
        border: 8px solid #345DBB;
        border: 8px solid rgba(53,93,187,0.38);
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        left: -14px;
        top: -14px;
    }

/* Disabled state;
 */
[disabled].noUi-connect, [disabled] .noUi-connect {
    background: #B8B8B8;
}

[disabled].noUi-origin, [disabled] .noUi-handle {
    cursor: not-allowed;
}

.price-filter-dropdown .select2-container--default .select2-selection--single {
    border: none;
    background-color: var(--bg-transparent);
    border-radius: unset;
    padding: 0px;
    position: relative;
}

.price-filter-dropdown .select2-selection::before {
    content: "";
    background-image: url("../images/down-icon.svg");
    background-repeat: no-repeat;
    background-size: contain;
    height: 16px;
    width: 16px;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
}

.price-filter-dropdown .select2-selection__arrow,
.price-filter-dropdown .select2-selection__clear,
.update-search .select2-selection__clear {
    display: none;
}

.price-filter-dropdown .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 14px;
    color: var(--text-gray);
    font-weight: 500;
}

/* === Pagination === */
.pagination-sec .pagination li a {
    border: 1px solid #CCCCCC;
    background-color: var(--bg-transparent);
    color: var(--text-darkblack);
    border-radius: 4px !important;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 12px;
}

    .pagination-sec .pagination li a img {
        filter: brightness(0) invert(0);
    }

    .pagination-sec .pagination li a.prev-arrow img {
        transform: scale(-1);
    }

    .pagination-sec .pagination .page-item.active a,
    .pagination-sec .pagination li a:hover {
        background-color: var(--bg-blue);
        border: 1px solid var(--bg-blue);
        color: var(--text-white);
    }

        .pagination-sec .pagination li a:hover img,
        .pagination-sec .pagination .page-item.active a img {
            filter: brightness(0) invert(1);
        }
/* Update Search section */
.update-search {
    padding: 43px 10px 40px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
}

    .update-search .floating-group .select2 .select2-selection {
        border: 1px solid #E6E6E6 !important;
        box-shadow: 0px 1px 2px rgba(0,0,0,0.05);
        border-radius: 6px;
        padding: 8px 13px 8px 13px !important;
        min-height: 40px;
        position: relative;
    }

    .update-search .floating-group.mappin-select .select2 .select2-selection {
        padding: 8px 13px 8px 45px !important;
    }


    .update-search .location-details {
        padding: 0;
        border: unset;
        border-radius: unset;
        margin: unset;
    }

    .update-search label.floating-label {
        position: absolute;
        /* top: 2px; */
        top: 50%;
        left: 13px;
        z-index: 99;
        font-size: 12px;
        line-height: 14px;
        font-weight: 500;
        color: #999999;
        transform: translateY(-50%);
        opacity: 0;
        transition: 0.3s;
        background-color: #ffffff;
        z-index: 0;
    }

    .update-search .floating-group.focused label {
        top: 2px;
        opacity: 1;
        z-index: 1;
    }

.update-city-popup .update-search .floating-group.focused label {
    z-index: 99999;
}

.update-search .select2-selection__rendered {
    padding: 0px !important;
    font-size: 16px !important;
    line-height: 22px !important;
    color: var(--text-darkblack) !important;
    font-weight: 600;
    /* font-size: 0px; */
}

.update-search .mappin-select label.floating-label {
    left: 45px;
}

/* .update-search .update-type{
    gap: 40px;
} */
.input-effect, .calender-icon {
    position: relative;
}

    .input-effect::before,
    .update-search .floating-group.mappin-select .select2 .select2-selection::before,
    .calender-icon::before {
        content: "";
        --svg: url('data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2220%22%20viewBox%3D%220%200%2018%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M16.5%202H14.25V1.25C14.25%201.05109%2014.171%200.860322%2014.0303%200.71967C13.8897%200.579018%2013.6989%200.5%2013.5%200.5C13.3011%200.5%2013.1103%200.579018%2012.9697%200.71967C12.829%200.860322%2012.75%201.05109%2012.75%201.25V2H5.25V1.25C5.25%201.05109%205.17098%200.860322%205.03033%200.71967C4.88968%200.579018%204.69891%200.5%204.5%200.5C4.30109%200.5%204.11032%200.579018%203.96967%200.71967C3.82902%200.860322%203.75%201.05109%203.75%201.25V2H1.5C1.10218%202%200.720644%202.15804%200.43934%202.43934C0.158035%202.72064%200%203.10218%200%203.5V18.5C0%2018.8978%200.158035%2019.2794%200.43934%2019.5607C0.720644%2019.842%201.10218%2020%201.5%2020H16.5C16.8978%2020%2017.2794%2019.842%2017.5607%2019.5607C17.842%2019.2794%2018%2018.8978%2018%2018.5V3.5C18%203.10218%2017.842%202.72064%2017.5607%202.43934C17.2794%202.15804%2016.8978%202%2016.5%202ZM3.75%203.5V4.25C3.75%204.44891%203.82902%204.63968%203.96967%204.78033C4.11032%204.92098%204.30109%205%204.5%205C4.69891%205%204.88968%204.92098%205.03033%204.78033C5.17098%204.63968%205.25%204.44891%205.25%204.25V3.5H12.75V4.25C12.75%204.44891%2012.829%204.63968%2012.9697%204.78033C13.1103%204.92098%2013.3011%205%2013.5%205C13.6989%205%2013.8897%204.92098%2014.0303%204.78033C14.171%204.63968%2014.25%204.44891%2014.25%204.25V3.5H16.5V6.5H1.5V3.5H3.75ZM16.5%2018.5H1.5V8H16.5V18.5Z%22%20fill%3D%22%236610f2%22%2F%3E%0A%3C%2Fsvg%3E');
        -webkit-mask: var(--svg);
        background-color: var(--bg-blue);
        height: 18px;
        width: 18px;
        background-position: center;
        mask-position: center;
        background-repeat: no-repeat;
        mask-repeat: no-repeat;
        background-size: contain;
        mask-size: contain;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 16px;
    }

.update-search .floating-group.mappin-select .select2 .select2-selection::before {
    background-image: url("../images/blue-map-pin.svg");
}

.input-effect input {
    border: 1px solid #E6E6E6 !important;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.05);
    border-radius: 6px;
    min-height: 40px;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: var(--text-darkblack);
    padding: 8px 16px 8px 48px;
}

    .input-effect input ~ label {
        font-size: 16px;
        color: var(--text-gray);
        line-height: 24px;
        transition: 0.3s;
        position: absolute;
        top: 50%;
        left: 45px;
        transform: translateY(-50%);
        opacity: 0;
        z-index: -1;
    }

    .input-effect input:focus + label,
    .input-effect input:not(:placeholder-shown) + label {
        font-size: 12px;
        line-height: 14px;
        font-weight: 500;
        color: #999999;
        background-color: #ffffff;
        top: 0px;
        padding: 0px 4px;
        opacity: 1;
        z-index: 1;
    }

    .input-effect input::placeholder,
    .location-details .type,
    .update-search .select2-container .select2-selection__rendered .select2-selection__placeholder {
        font-size: 16px;
        color: var(--text-gray);
        line-height: 24px;
        font-weight: 400;
    }

.update-search .select2-selection__arrow {
    display: none;
}

.update-search .select2-container {
    width: 100% !important;
}

.pickup-date-sec .date-calender .datepicker {
    top: 42px !important;
    z-index: 100 !important;
}

/* Mobile Header */
.mobile-head {
    padding: 12px 6px;
    /*    position: fixed;*/
    top: 0px;
    left: 0;
    width: 100%;
    z-index: 999999;
    position: relative;
}

    .mobile-head.add-on-head {
        z-index: 999;
    }

    .mobile-head .back-icon {
        height: 20px;
        width: 20px;
        object-fit: contain;
        margin-top: -4px;
    }

.update-city-popup {
    top: 60px;
}

    .update-city-popup .modal-dialog {
        max-width: 100%;
        border-radius: unset;
        width: 100%;
        margin: 0px !important;
    }

        .update-city-popup .modal-dialog .modal-content {
            border: 0 !important;
            border-radius: unset !important;
        }

.mobile-head {
    display: none;
}

.pickup-date-sec .date-calender::before,
.mobile-filter-sec a.border-gray::after {
    display: none;
}

.pickup-date-sec .date-calender {
    border: unset;
    border-radius: unset;
    margin: unset;
    padding: 0px !important;
}

/* Filter - mobile - section */

.mobile-filter-sec {
    padding: 32px 6px;
}

    .mobile-filter-sec a.border-gray {
        padding: 8px 12px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        min-height: 36px;
        font-size: 14px;
        line-height: 16px;
        color: var(--text-gray);
        display: flex;
        gap: 8px;
    }

    .mobile-filter-sec .dropdown-menu {
        min-width: 302px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        box-shadow: 0px 2px 10px rgba(0,0,0,0.1);
        padding: 16px;
        margin-top: 12px !important;
    }

    .mobile-filter-sec .h-44 {
        min-height: 44px;
        display: flex;
        align-items: center;
        text-align: center;
    }

    .mobile-filter-sec .horizontal-filter {
        gap: 12px;
        overflow-x: scroll;
        overflow-y: visible;
    }

        .mobile-filter-sec .horizontal-filter::-webkit-scrollbar,
        .filter-popup .vh-100::-webkit-scrollbar {
            display: none;
        }

    .mobile-filter-sec .horizontal-filter,
    .filter-popup .vh-100 {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .mobile-filter-sec .filter-part {
        position: relative;
    }

        .mobile-filter-sec .filter-part .horizontal-filter,
        .mobile-filter-sec .filter-part .horizontal-filter .filter-dropdown,
        .mobile-filter-sec .filter-part .horizontal-filter .filter-dropdown .dropdown {
            position: unset;
        }


.filter-popup .rightbar-title {
    padding: 16px 16px 16px;
}

.filter-popup .vh-100 {
    height: calc(100vh - 70px) !important;
    overflow-y: scroll;
}

.right-bar.left0 {
    background-color: #ffffff;
    display: block;
    position: fixed;
    -webkit-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
    width: 100%;
    z-index: 999999;
    float: right !important;
    /* right: -290px; */
    top: 0;
    bottom: 0;
    padding-bottom: 80px;
}

.left0 {
    left: 0px !important;
    z-index: 999999;
    display: block !important;
}

.filter-popup h6 {
    color: #999999;
}

.filter-tabs {
    padding: 0px 16px 20px;
}

    .filter-tabs a.nav-link {
        font-size: 14px;
        line-height: 18px;
        color: var(--text-gray);
        padding: 12px;
        font-weight: 600;
        text-decoration: none;
        margin-bottom: 20px;
    }

        .filter-tabs a.nav-link.active {
            color: var(--text-darkblack) !important;
            padding: 9px 12px;
            background-color: #F8F7FC !important;
            border-radius: unset !important;
        }

    .filter-tabs .nav {
        border-right: 1px solid #F2F2F2;
        width: auto;
    }

    .filter-tabs .tab-content {
        width: 70%;
    }

.search-location input {
    font-size: 12px;
    line-height: 15px;
    font-weight: 400;
    color: #999999;
    padding: 8px 16px 8px 36px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
}

.search-location::before {
    content: "";
    background-image: url("../images/search.svg");
    background-size: contain;
    height: 12px;
    width: 12px;
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
}

.filter-popup-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 16px;
}

.mobile-filter-sec a.border-gray.show {
    background-color: #ffffff;
}

    .mobile-filter-sec a.border-gray.show img {
        transform: scale(-1);
    }

.filter-popup .h-44 {
    min-height: 44px;
}

.more-details.readmore img {
    transform: scale(-1);
}

.more-details img {
    height: 12px;
    width: 12px;
    object-fit: contain;
}

.more-details:hover img,
.more-details.readmore:hover img {
    filter: brightness(0) invert(0);
}

/* ===  Car Details Page === */
.back-page-sec {
    padding: 40px 10px;
}

.car-single-page .carousel-inner {
    margin-bottom: 24px;
}

.car-single-page .carousel-indicators {
    position: relative;
    gap: 24px;
    justify-content: start;
    flex-wrap: wrap;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}

    .car-single-page .carousel-indicators li {
        width: calc(33.33% - 16px);
        /*        height: 94px;*/
        height: 100%;
        border: none;
        margin: 0px !important;
        opacity: 1;
    }

        .car-single-page .carousel-indicators li.active img {
            border: 2px solid var(--bg-blue);
        }

        .car-single-page .carousel-indicators li img {
            width: 100%;
            height: 94px;
            border-radius: 12px;
            border: 2px solid transparent;
            object-fit: cover;
        }

.car-single-page .carousel-inner .carousel-item img {
    width: 100%;
    height: 337px;
    object-fit: cover;
    border-radius: 12px;
    /*    background-color: #cccccc;*/
}
/*.car-single-page .carousel-inner .carousel-item{
    background-color:#f5f5f5;
}*/

.car-single-page .detail-page-info h2 {
    font-size: 32px;
    color: var(--text-darkblack);
    font-weight: 700;
    word-wrap: break-word;
}

.car-single-page .car-slider-info .car-category {
    margin-bottom: 40px;
}

    .car-single-page .car-slider-info .car-category a {
        font-size: 14px;
    }

.car-single-page .sperpart-detail h6 {
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
}

.car-single-page .car-information h5 {
    font-weight: 700;
}

.car-single-page .car-information .sperpart-detail img {
    width: 20px;
    height: 20px;
}

.car-single-page .equipment-info {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

    .car-single-page .equipment-info p {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

        .car-single-page .equipment-info p span {
            /*color: #E6E6E6;
    font-weight: 300;*/
        }

.car-single-page .p-40 {
    padding: 40px;
}

.car-single-page .map-icon-input input {
    border: 1px solid #E6E6E6 !important;
    border-radius: 6px;
    padding: 9px 12px 9px 45px;
    font-size: 14px;
    line-height: 22px;
    color: var(--text-gray);
    font-weight: 500;
}

.car-single-page .map-address::before {
    content: "";
    background-image: url("../images/map-pin.svg");
    background-repeat: no-repeat;
    background-size: contain;
    height: 24px;
    width: 24px;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

/*.car-single-page .map-address::after {
    content: "";
    background-image: url(../images/down-icon.svg);
    background-repeat: no-repeat;
    background-size: contain;
    height: 16px;
    width: 16px;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}*/

.car-period-input::before {
    /*    content: "";
    background-image: url("../images/down-icon.svg");
    background-repeat: no-repeat;
    background-size: contain;
    height: 16px;
    width: 16px;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);*/
}

.car-single-page .car-information .date-calender {
    padding: 0px !important;
}

.car-single-page .car-information {
    margin-bottom: 40px;
}

    .car-single-page .car-information:last-child {
        margin-bottom: 0px;
    }

.car-single-page .mb-40 {
    margin-bottom: 40px;
}

.car-single-page .package-box .list-group li {
    font-size: 16px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.car-single-page .form-check .form-check-input {
    float: right;
}

.car-thumbnail-slider .lightbox {
    background-color: rgba(20, 20, 20, 0.25);
    height: 24px;
    width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 9;
    left: auto;
}

.package-box .list-group li img, .package-box .list-group li svg {
    height: 18px;
}

.lb-nav a {
    height: 30px !important;
    width: 30px !important;
    display: block !important;
    opacity: 1 !important;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

    .lb-nav a.lb-next {
        transform: translateY(-50%) rotate(180deg);
    }

.lightbox img.lb-image {
    border: none !important;
    height: 500px !important;
    width: 800px !important;
    object-fit: cover;
    /*    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover; 
    aspect-ratio: 4 / 3;*/
}
/*.lightbox .lb-outerContainer {
    height: auto;
}*/

.no-scroll {
    overflow: hidden;
    height: 100%; /* Optional: for better handling in some cases */
}

#lightbox {
    top: 50% !important;
    left: 0px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column-reverse;
}

.car-single-page .package-box .box-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}



/* == Add on pages === */

.pt-20 {
    padding-top: 20px;
}

.mt-20 {
    margin-top: 20px;
}

.package-box-btns .selected {
    background: var(--bg-blue);
    color: white;
}
/*----progress mark----*/
.progressbar ul li.progress-mark a::after {
    content: '';
    position: absolute;
    top: -20px;
    left: -2px;
    width: 20px;
    height: 20px;
    --svg: url('data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2220%22%20viewBox%3D%220%200%2021%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.5%2018C14.9183%2018%2018.5%2014.4183%2018.5%2010C18.5%205.58172%2014.9183%202%2010.5%202C6.08172%202%202.5%205.58172%202.5%2010C2.5%2014.4183%206.08172%2018%2010.5%2018ZM14.2071%208.70711C14.5976%208.31658%2014.5976%207.68342%2014.2071%207.29289C13.8166%206.90237%2013.1834%206.90237%2012.7929%207.29289L9.5%2010.5858L8.20711%209.29289C7.81658%208.90237%207.18342%208.90237%206.79289%209.29289C6.40237%209.68342%206.40237%2010.3166%206.79289%2010.7071L8.79289%2012.7071C9.18342%2013.0976%209.81658%2013.0976%2010.2071%2012.7071L14.2071%208.70711Z%22%20fill%3D%22%234F46E5%22%2F%3E%0A%3C%2Fsvg%3E');
    /*    background-image: var(--svg);*/
    -webkit-mask: var(--svg);
    background-color: var(--bg-blue);
    background-size: contain;
    background-repeat: no-repeat;
    mask-size: contain;
    mask-repeat: no-repeat;
    z-index: 1;
}

.progressbar ul li.progress-mark a {
    color: var(--text-blue);
}

/*----breadcrunb----*/
.breadcrunb-sec .breadcrumb-item a {
    color: var(--text-darkblack);
}

    .breadcrunb-sec .breadcrumb-item a:hover {
        color: var(--text-blue);
    }

/*-----Slick Slider----*/
.renault-details .slick-dots li {
    margin: 0 !important;
}

    .renault-details .slick-dots li button:before {
        opacity: 1;
        color: white;
    }

    .renault-details .slick-dots li.slick-active button:before {
        opacity: 1;
        color: var(--text-darkblack);
    }



/*----addons rightside-----*/
.addons-car-detail h6 {
    font-weight: 500;
    background: #E6E6E6;
    display: inline-block;
    padding: 4px 8px;
    border-radius: 50px;
}

.addons-car-detail h4 {
    font-weight: 600;
    word-wrap: break-word;
}

.addons-rightside .car-slider {
    margin-bottom: 0 !important;
}

.addons-rightside .slick-slide img {
    display: unset;
}

.left-side-370 {
    width: calc(100% - 370px);
}

.right-side-370 {
    max-width: 370px;
    width: calc(100% - 370px);
}

    .right-side-370 .box-shadow {
        padding: 20px;
    }

    .right-side-370 .padding-adjust {
        padding-top: 10px !important;
        padding-bottom: 0px !important;
    }


.box-shadow.tr-border-none {
    border-radius: 0px 0px 12px 12px;
}

.box-shadow.tl-border-none {
    border-radius: 0px;
}

.addons-rightside hr {
    margin-top: 0;
}

.pickup-detail .pickup-info {
    padding-left: 30px;
    position: relative;
}

    .pickup-detail .pickup-info:after {
        content: '';
        position: absolute;
        top: 5px;
        left: 0;
        width: 12px;
        height: 12px;
        background-color: var(--bg-blue);
        border-radius: 50px;
    }

    .pickup-detail .pickup-info.left-line:before {
        content: '';
        position: absolute;
        top: 14px;
        left: 6px;
        width: 1px;
        height: 100%;
        background-color: var(--bg-secondary);
    }

    .pickup-detail .pickup-info h5 {
        font-weight: 600;
    }

    .pickup-detail .pickup-info .pickup-dates p {
        color: var(--text-gray);
        font-weight: 500;
    }

    .pickup-detail .pickup-info h6 {
        font-weight: 500;
        background: var(--bg-secondary);
        display: inline-block;
        padding: 4px 8px;
        border-radius: 50px;
        margin-top: 12px;
    }

.pickup-detail-popup .pickup-info.left-line:before {
    content: "";
    height: 80%;
}

.promotion-form input {
    height: 42px !important;
    border-color: #E6E6E6 !important;
    box-shadow: 0px 1px 2px rgb(0 0 0 / 5%);
    border-radius: 6px !important;
}

    .promotion-form input::placeholder {
        color: #666666 !important;
    }

.totla-price-box p {
    color: #999999;
}

.totla-price-box .pay-price h4 {
    color: var(--bg-blue);
}

.totla-price-box .pay-price p span {
    color: #666;
}

.addons-detail p {
    color: var(--text-gray);
}

.price-dropdown .dropdown-header p {
    color: #666;
    margin-top: 5px;
}

    .price-dropdown .dropdown-header p span {
        color: #999;
    }

.price-dropdown .dropdown-header {
    padding: 5px 0 !important;
}

.price-dropdown .accordion-body hr {
    margin: 3px 0;
}

.price-dropdown .light-gray h6 {
    color: #666 !important;
}

.price-dropdown .accordion-button {
    border-radius: 12px !important;
    color: #262626 !important;
}

    .price-dropdown .accordion-button:not(.collapsed) {
        color: #262626 !important;
    }

    .price-dropdown .accordion-button::after {
        filter: brightness(30) invert(1);
    }

.price-dropdown .accordion-item {
    background-color: #fff;
    border: unset !important;
    border-radius: 12px !important;
}

.price-dropdown .accordion-button:focus,
.price-dropdown .accordion-button:not(.collapsed) {
    border-color: unset !important;
    box-shadow: unset !important;
    background-color: unset !important;
}

.price-dropdown ul li .nav-link.show:before {
    transform: rotate(180deg);
}

.price-dropdown {
    padding: 0 !important;
}

    .price-dropdown .accordion-body {
        padding: 0px 20px 20px;
    }


/*---addons leftside---*/
.kilometers-row h6 {
    color: var(--text-gray);
}

.kilometers-row p {
    color: #999;
}

.kilometers-row {
    gap: 30px;
}

.addons-detail .purple-text span {
    color: var(--text-blue);
}

.purple-text {
    color: var(--text-blue) !important;
}

.childset-row {
    gap: 20px;
    padding: 20px 0;
}

    .childset-row .btn-dark-blue {
        display: inline-block;
        max-width: 145px;
        width: 100%;
        padding: 12px 20px;
    }

    .childset-row .add-btn-txt p {
        font-size: 10px;
    }

    .childset-row .add-btn-txt {
        width: calc(100% - 280px);
    }

    .childset-row .add-btn-row {
        gap: 15px;
        width: 280px;
    }

    .childset-row .add-driver-btn-row {
        gap: 15px;
        width: 850px;
    }

.quantitybtn button {
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bg-blue);
    border-radius: 50px;
    background: unset;
    line-height: 1px;
    color: var(--text-blue);
}

.quantitybtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 145px;
    width: 100%;
    border: 1px solid var(--bg-blue);
    border-radius: 6px;
    padding: 8px 20px;
    height: 48px;
}

.extra-km-div {
    max-width: 175px !important;
}

.quantitybtn p {
    color: var(--text-darkblack);
    font-weight: 600;
}

.quantitybtn .input-km {
    color: var(--text-darkblack);
    font-weight: 600;
    width: 100%;
    border: none;
    text-align: center;
}

.package-p {
    color: var(--text-darkblack) !important;
    padding: 20px 0 40px;
}

.package-box-row {
    gap: 24px;
}

    .package-box-row .package-box {
        width: calc(50% - 12px);
        position: relative;
    }

.package-box .text-hedading {
    gap: 16px;
}

.package-box label {
    width: 100%;
    padding: 16px 24px;
    border: 1.5px solid #E6E6E6;
    padding: 16px 15px;
    border-radius: 12px;
    cursor: pointer;
}

.package-box .form-check {
    padding-left: 0 !important;
}

    .package-box .form-check .form-check-input {
        opacity: 0;
    }

.package-box .form-check-input:checked[type=radio] {
    position: absolute;
    width: 30px;
    height: 30px;
    border: unset;
    background-color: unset;
    right: -8px;
    top: -12px;
    /*background-image: url(../images/progress-mark.svg);*/
    --svg: url('data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2220%22%20viewBox%3D%220%200%2021%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.5%2018C14.9183%2018%2018.5%2014.4183%2018.5%2010C18.5%205.58172%2014.9183%202%2010.5%202C6.08172%202%202.5%205.58172%202.5%2010C2.5%2014.4183%206.08172%2018%2010.5%2018ZM14.2071%208.70711C14.5976%208.31658%2014.5976%207.68342%2014.2071%207.29289C13.8166%206.90237%2013.1834%206.90237%2012.7929%207.29289L9.5%2010.5858L8.20711%209.29289C7.81658%208.90237%207.18342%208.90237%206.79289%209.29289C6.40237%209.68342%206.40237%2010.3166%206.79289%2010.7071L8.79289%2012.7071C9.18342%2013.0976%209.81658%2013.0976%2010.2071%2012.7071L14.2071%208.70711Z%22%20fill%3D%22%234F46E5%22%2F%3E%0A%3C%2Fsvg%3E');
    /*background-image: var(--svg);*/
    background-image: none;
    -webkit-mask: var(--svg);
    background-color: var(--bg-blue);
    background-size: 27px;
    mask-size: 27px;
    opacity: 1;
    /*border: 5px solid #fff;*/
    mask-position: center;
    mask-repeat: no-repeat;
}

    .package-box .form-check-input:checked[type=radio] + label {
        border: 1.5px solid var(--bg-blue);
        border-radius: 12px 0px 12px 12px;
    }

.package-box .text-hedading p {
    font-size: 10px;
    color: #F8F7FC;
    background: #262626;
    padding: 2px 6px;
    border-radius: 50px;
}

.package-box .box-total {
    min-height: 55px;
}

    .package-box .box-total h4 span {
        font-size: 20px;
        font-weight: 500;
        color: #666666;
    }

    .package-box .box-total p {
        color: #666666;
    }

.package-box .deductible-bg {
    background: var(--bg-secondary);
    display: inline-block;
    padding: 4px 8px;
    border-radius: 8px;
    color: var(--text-darkblack);
}

.package-box .list-group {
    list-style: none !important;
    padding: 24px 0;
}

    .package-box .list-group li {
        margin-bottom: 12px;
        color: var(--text-gray);
        font-size: 14px;
    }

        .package-box .list-group li img, .package-box .list-group li svg {
            width: 18px;
            margin-right: 10px;
        }

.package-box .package-box-btns a {
    font-size: 14px;
    font-weight: 500;
}

    .package-box .package-box-btns a.text-link:hover {
        color: var(--text-darkblack);
    }

.package-box .package-box-btns .border-button {
    max-width: 155px;
    width: 100%;
}

.addons-last-btn .border-button {
    width: unset !important;
}


/*--------total bottom modal-----*/
.price-dropdown-mobile {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #fff;
    padding: 16px;
    box-shadow: 0px 2px 20px rgb(0 0 0 / 20%);
    z-index: 9999;
}

.price-bottom-modal.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, 50px);
}

.price-bottom-modal .modal-dialog {
    position: fixed !important;
    bottom: 80px !important;
    left: 0% !important;
    right: 0% !important;
    margin: 0 !important;
    max-width: 100%;
}

.price-bottom-modal.modal.show .modal-dialog {
    transform: none;
    border-bottom: 1px solid #efefef;
}

.price-bottom-modal .modal-content {
    border-radius: 12px 12px 0px 0px !important;
    border: unset;
}

.price-dropdown-mobile .bottom-total-side .btn {
    font-size: 14px !important;
    color: #999999 !important;
    padding: 0;
    background: unset;
    border: unset;
}

    .price-dropdown-mobile .bottom-total-side .btn:focus {
        box-shadow: unset !important;
    }

.price-dropdown-mobile .bottom-total-side h5,
.price-bottom-modal .price-total-gray .total-text h5 {
    font-size: 20px;
    font-weight: 700;
    color: var(--bg-blue);
}

.bottom-total-side {
    gap: 20px;
}

    .bottom-total-side .total-side,
    .bottom-total-side .total-bt-side {
        width: calc(50% - 10px);
    }

        .bottom-total-side .total-bt-side a {
            display: inline-block;
            max-width: 160px;
            width: 100%;
            padding: 15px 20px;
        }

.price-bottom-modal .dropdown-header {
    padding: 8px 0;
}

.price-bottom-modal .accordion-body hr {
    margin: 5px 0;
}

.price-bottom-modal .price-total-gray {
    background: #F2F2F2;
    padding: 12px;
    border-radius: 8px;
    margin-top: 30px;
}

    .price-bottom-modal .price-total-gray p {
        color: #999999;
    }

        .price-bottom-modal .price-total-gray p span {
            color: #666666;
        }

.price-bottom-modal .dropdown-txt.light-gray h6 {
    color: #666666;
}

.price-bottom-modal.fade {
    transition: opacity .1s linear;
}



/*======Personal Detail Page======*/
.personal-form {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 35px 0;
}

    .personal-form .input-effect {
        width: calc(50% - 15px);
    }

    .personal-form .company-form-field {
        width: 100%;
        display: flex;
        gap: 30px;
    }

    .personal-form .input-effect input {
        padding: 9px 16px !important;
    }

    .personal-form .input-effect::before {
        display: none;
    }

    .personal-form .input-effect input ~ label {
        left: 12px;
    }

.personal-detail-form .form-check-input:checked {
    background-color: var(--bg-blue) !important;
    border-color: var(--bg-blue) !important;
}

.personal-detail-form {
    gap: 24px;
}

    .personal-detail-form label {
        color: var(--text-gray);
    }

.personal-form-footer label a {
    text-decoration: underline;
}

    .personal-form-footer label a:hover {
        color: var(--text-darkblack);
    }

.head-car-img img {
    height: 50px;
    width: 74px;
    object-fit: cover;
    border-radius: 7px;
}



/*======Payment Page======*/
.childset-row.payment-row .add-btn-row {
    width: unset;
}

.childset-row.payment-row .add-btn-txt h6 {
    color: var(--text-gray);
}

.childset-row.payment-row .add-btn-row h5 {
    font-weight: 700;
}

.childset-row.payment-row {
    padding: 20px 0 5px;
}

.childset-row.totla-payable h3 {
    color: var(--text-blue);
    font-size: 32px;
    font-weight: 700;
}

.childset-row.totla-payable .add-btn-row {
    width: unset;
}

.payment-radio label {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-darkblack);
}

.totla-payable .add-btn-row .btn-dark-blue {
    max-width: 200px;
}

.payment-radio .form-check-input:checked {
    background-color: var(--bg-blue) !important;
    border-color: var(--bg-blue) !important;
}

.payment-radio .form-check-input {
    margin-top: 8px !important;
}

.payment-radio {
    padding-bottom: 32px;
}

    .payment-radio .payment-icon {
        margin-left: 12px;
        display: flex;
        gap: 10px;
    }

.payment-read-text p a {
    color: var(--text-gray);
    text-decoration: underline;
}

/*======Booking successful Page======*/
.booking-successful-sec {
    padding: 40px 0;
}

.bookmark-sec {
    gap: 28px;
    /* border-radius: 12px 12px 0px 0px; */
}

    .bookmark-sec h1 {
        font-size: 64px;
        font-weight: 700;
    }

/*.booking-successful-sec .box-shadow{
    padding: 40px;
}*/

.summary-total-box {
    background: #F2F2F2;
    padding: 28px 16px;
    border-radius: 8px;
    text-align: center;
    margin-top: 20px;
}

    .summary-total-box h2 {
        color: var(--text-blue);
        font-weight: 700;
    }

    .summary-total-box h4 {
        color: var(--text-gray);
        font-weight: 400;
    }

.booked-address-info .booked-address .purple-text {
    color: var(--text-blue) !important;
}

.booked-address-info .booked-address p {
    font-weight: 700;
    margin-bottom: 10px;
}

.booked-address-info .booked-address {
    padding-bottom: 28px;
}

.booked-address-map iframe {
    border-radius: 12px;
}

.booked-addmap .booked-address-info {
    max-width: 240px;
}

.color-red {
    color: red;
}

.pl-20 {
    padding-left: 20px;
}

.btn-dark-blue.disable,
.border-button.disable {
    cursor: not-allowed;
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #666666;
    border: 1px solid #666666;
    color: #ffffff;
}

    .btn-dark-blue.disable:hover,
    .border-button.disable:hover {
        opacity: 0.4;
    }

.text-strike-through {
    text-decoration: line-through;
}

.discount-bg {
    background: lightgreen;
    padding: 3px;
}


/* Search - Image - slider */

.renault-details .slider-arrow {
    z-index: 99;
    left: 7px;
    background-color: rgba(20, 20, 20, 0.5);
    border-radius: 4px;
    height: 24px;
    width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);
}

    .renault-details .slider-arrow.carousel-control-next {
        right: 7px;
        left: unset;
    }

.renault-details .slider-icon {
    width: 12px;
    height: 12px;
    opacity: 1 !important;
}

.renault-details .carousel-indicators {
    column-gap: 6px;
}

    .renault-details .carousel-indicators button {
        width: 6px;
        height: 6px;
        padding: 0px;
        border-radius: 50%;
        cursor: pointer;
        color: transparent;
        border: 0;
        outline: none;
        background-color: white;
    }

        .renault-details .carousel-indicators button.active {
            opacity: 1;
            background-color: var(--text-darkblack);
        }

.renault-details .carousel-item,
.renault-details .carousel-inner {
    border-radius: 7px;
}

.renault-details .car-slider-row .w-40 {
    width: calc(40% - 14px);
}

.renault-details .car-slider-row .w-80 {
    width: calc(60% - 14px);
}

#datepicker1 .form-control[readonly], #datepicker2 .form-control[readonly], #datepicker3 .form-control[readonly], #datepicker4 .form-control[readonly], #pickUpDatePickerDiv .form-control[readonly], #dropOffDatePickerDiv .form-control[readonly] {
    background: white !important;
}

.update-search .floating-group label {
    top: 2px;
    opacity: 1;
    z-index: 1;
}

body.modal-open {
    padding-right: 0px !important;
}

.slider-sec .view-from-details p {
    font-size: 10px;
    line-height: 19px;
}

.slider-sec .view-details {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
}

    .slider-sec .view-details .from-details {
        margin-bottom: 0px;
        font-size: 10px;
        font-weight: 400;
        margin-left: auto;
    }

    .slider-sec .view-details .display-flex {
        display: flex;
    }

    .slider-sec .view-details .ml-auto {
        margin-left: auto;
    }

    .slider-sec .view-details .mr-auto {
        margin-right: auto;
    }

    .slider-sec .view-details .mb-5 {
        margin-bottom: 5px !important;
    }

    .slider-sec .view-details .mr-5 {
        margin-right: 5px !important;
    }

.extra-km-div .ml-18 {
    /*    margin-left: -18px;*/
}

.quantitybtn .increae-num {
    width: calc(100% - 56px);
    display: flex;
    gap: 2px;
    justify-content: center;
    align-items: center;
}

.kilometers-row .ml-50 {
    margin-left: -50px;
}

.kilometers-row .ml-15 {
    /*    margin-left: -15px;*/
}

.cursor-pointer {
    cursor: pointer;
}

input:disabled {
    cursor: auto !important;
}

/* == 23 Aug == */
.car-single-page .date-calender .datepicker {
    top: 50px !important;
}

.no-car-details {
    margin-top: auto;
    font-weight: bold;
    margin-bottom: 10px;
}

path {
    fill: var(--bg-blue);
}


.old.disabled,
.old {
    visibility: hidden;
}

.new.day {
    visibility: hidden;
}

.navbar {
    display: none;
}

/*.renault-details .sports-car .car-slider .w-228 img {
    max-width: 228px;
    max-height: 228px;
    height: 228px;
}*/

.breadcrumb-flex {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

.renault-details .sports-car .car-slider .w-228 img {
    max-width: 100%;
    /*    max-height: 180px;*/
    height: 180px;
}

.renault-details .sports-car {
    gap: 20px;
}

.font-size-override {
    font-size: 14px !important;
}

#loading {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    opacity: 1;
    background-color: #fff;
    z-index: 99;
}

#loading-image {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 127;
    height: 35px;
}

.disp-none {
    display: none;
}

lottie-player {
    display: block;
    margin: 0 auto;
}

.bg-light-grey {
    background: var(--bg-lightgray);
}

.bg-inherit {
    background: inherit !important;
}

.bg-white {
    background: white;
}

.month-select select {
    min-height: 42px;
    border: 1px solid #E6E6E6 !important;
    border-radius: 6px !important;
}

.driver-error {
    color: #ffa553;
    font-size: 16px;
    background: #fff2e5;
    padding: 5px 10px;
}

.mt-10 {
    margin-top: 10px;
}

.rental-type .unselected-car svg {
    opacity: 0.4;
}

.car-single-page .map-address select,
.car-period-input select {
    background: url("../images/down-icon.svg") white no-repeat calc(100% - 10px) !important;
}

.driver-error-alert {
    padding-bottom: 2px;
    margin-right: 5px;
}

.car-detial-box,
.car-detial-box .card {
    height: 100%;
}

    .car-detial-box .card-body {
        display: flex;
        flex-direction: column;
    }

    .car-slider-info .slick-track,
    .car-detial-box .card {
        display: flex;
    }

        .car-slider-info .slick-track .slick-slide > div {
            height: 100%;
            display: flex;
        }

        .car-slider-info .slick-track .slick-slide {
            height: unset !important;
        }

            .car-slider-info .slick-track .slick-slide .view-btn-slider {
                margin-top: auto;
            }

.pad-20-bottom {
    padding-bottom: 20px;
}

.non-capital {
    text-transform: none !important;
}

.font-bold {
    font-weight: bold !important;
}

a[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #666666;
    border: 1px solid #666666;
    color: #ffffff;
}

    a[disabled]:hover {
        opacity: 0.4;
    }

.add-driver-btn-row input::-webkit-outer-spin-button,
.add-driver-btn-row input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.add-driver-btn-row input[type=number] {
    -moz-appearance: textfield;
}

.car-single-page .equipment-info p span.color-lightgray {
    color: #E6E6E6;
    margin: 0 4px;
}

.address-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.min-h-38 {
    min-height: 38px;
}

.slider-sec .view-details .from-details {
    text-align: right;
}

.from-info .mt-10 {
    margin-bottom: 10px !important;
}

.underline-txt {
    text-decoration: underline !important;
}

.image-container {
    width: 100%;
    aspect-ratio: 4 / 3; /* Maintains 4:3 ratio */
    overflow: hidden;
}

    .image-container img {
        height: 100% !important;
    }

.personal-car-slider .slick-slide > div,
.renault-details .slick-slide > div {
    background-color: #ffffff;
}

.lightbox {
    padding: 0px 20px;
}

    .lightbox img.lb-image {
        height: 100% !important;
        width: 100% !important;
    }

.lb-outerContainer,
.lb-dataContainer {
    width: 100% !important;
    max-width: 800px !important;
    padding: 0px 0px;
    height: auto !important;
    background-color: unset !important;
}

.cursor-auto {
    cursor: auto;
}

.sticky-slidebar {
    position: sticky;
    top: 0;
    right: 0;
}

.mobile-head h5 {
    word-break: break-all !important;
}

@media (hover: hover) {
    .car-id-text[data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        background: black;
        color: white;
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 4px;
        white-space: nowrap;
        transform: translateY(-120%);
        opacity: 0;
        transition: opacity 0.2s;
        pointer-events: none;
        transition-delay: 0s;
    }

    .car-id-text:hover::after {
        opacity: 1;
        transition-delay: 0.5s;
    }

    .car-id-text:not(:hover)::after {
        transition-delay: 0s;
    }
}

.car-id-toast {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 9999;
    animation: fadeInOut 3s ease-in-out forwards;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }

    10% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
}