/* @import "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";
@import "https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";

a {
    text-decoration: none;
    color: #ed1c24;
}

a:hover {
    color: #c61017;
}

ul {
    list-style: none;
}
ul.pagination .active > .page-link {
    background-color: #ed1c24;
    border-color: #ed1c24;
    color: #ffff !important;
}
ul.pagination .page-link {
    color: #ed1c24 !important;
}
body {
    font-family: "Roboto", sans-serif;
    line-height: 1.6;
    font-size: 85%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
    color: #0a0a0a;
}

header.main-header {
    background-color: #ffffff;
    padding: 0.25rem 0 0.25rem 0;
}
header.main-header-bg{
    background: url(https://qldauto.com.au/wp-content/uploads/2023/03/inner-page-bg.png) center center fixed;
    color: #FFF;
    height: 50vh;
    position: relative;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    
    -msn-background-size: cover;
}
header.main-header-bg::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(360deg, #ff626214 15%, #00000036 30%);
    opacity: 1;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;

}


header.main-header.landing-page {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    background-color: transparent;
    z-index: 10;
    padding: 1rem 0 0.75rem 0;
    color: #ffffff;
}

header.main-header.landing-page a.navbar-brand,
header.main-header-bg a.navbar-brand {
    color: #ffffff;
}

header.main-header.landing-page a.navbar-brand:hover {
    color: #ffffff;
}

header.main-header.landing-page .navigation-bar .navbar-nav .nav-item .nav-link,
header.main-header-bg .navigation-bar .navbar-nav .nav-item .nav-link {
    color: #ffffff;
    font-size: 0.8rem;
}


a.navbar-brand {
    color: #5a5a5a;
}

a.navbar-brand:hover {
    color: #5a5a5a;
}

.navigation-bar .navbar-nav .nav-item .nav-link {
    color: #5a5a5a;
    font-size: 0.8rem;
}

.dropdown-menu {
    min-width: auto;
    width: 130px;
    font-size: 85%;
    padding: 0.25rem 0;
}

.dropdown-divider {
    margin: 0.25rem 0;
}

@media (max-width: 992px) {
    .navigation-bar .navbar-nav .nav-item .nav-link {
        color: #ffffff;
    }
}
.truncate-text {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.loggedin-user-name {
    color: #7a7a7a !important;
    border-color: #7a7a7a !important;
}

.loggedin-user-name:hover {
    color: #7a7a7a;
    border-color: #7a7a7a;
}

.breadcrumb {
    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='white' class='bi bi-chevron-double-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
}

.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    padding-right: 1px;
}

.breadcrumb .breadcrumb-item {
    font-size: 0.75rem;
}

.breadcrumb .breadcrumb-item.active {
    color: #cccccc;
}
.header_bg__img {
    position: relative;
    background: #222;
    height: 250px;
    background-position: center center;
    background: url(https://qldauto.com.au/wp-content/uploads/2023/03/inner-page-bg.png);
    background-size: cover;
}

.header_bg__img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(180deg, #000000 15%, #00000036 30%);
    opacity: 1;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    z-index: 1;
}

.header_bg__img > * {
    position: relative;
    z-index: 2;
}
.header_bg__img nav {
    position: absolute;
    top: 70px;
}
@media (max-width: 992px) {
    .navigation-bar {
        background-color: #ed1c24;
    }
    a.nav-link.loggedin-user-name {
        color: white !important;
    }
    .navbar-toggler-icon {
        color: white !important;
    }
    .dropdown-menu-end[data-bs-popper] {
        right: auto;
        left: 0;
    }
}
.footer {
    background-color: #970c11;
    padding: 20px;
    color: #fff;
    text-align: center;
}

.btn {
    padding: 10px 20px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

.btn--primary {
    background-color: #ed1c24;
    color: #fff;
}
.btn--primary:hover {
    outline: 2.1px solid #ed1c24;
    transition: 0.205s ease !important;
}
.btn--secondary {
    background-color: #ed1c24;
    color: #fff;
}

.btn-sm {
    padding: 0.5rem 1rem;
}
.vehicle-filter-btn {
    border: 1.3px solid #ed1c24;
    color: #ed1c24;
}
.vehicle-filter-btn:hover {
    background-color: #ed1c24;
    color: #fff;
}
.btn-outline-rounded {
    border: 1px solid #cccccc;
    border-radius: 5rem;
    font-size: 0.65rem;
    font-weight: bold;
    color: #5a5a5a;
}

input.form-control,
select.form-control {
    font-size: 0.875rem;
    border-radius: 2px;
}

input.form-control:focus,
select.form-control:focus {
    border: 1px solid #ed1c24;
    box-shadow: none;
}

input.form-control.warning,
select.form-control.warning {
    box-shadow: 0px 0px 0.5px 0.5px #ff4639;
}

input.form-control::-moz-placeholder,
select.form-control::-moz-placeholder {
    font-size: 12px;
    color: rgb(181, 181, 181);
}

input.form-control::placeholder,
select.form-control::placeholder {
    font-size: 12px;
    color: rgb(181, 181, 181);
}

.card {
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.card__title {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.card__content {
    font-size: 1rem;
    color: #333;
}

.wrapper .content-wrapper .columns-container {
    min-height: 100vh;
}

.wrapper .content-wrapper .left-content {
    padding-top: 3rem;
}

.wrapper .content-wrapper .left-content .bg-opacity {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(
        0,
        0,
        0,
        0.5
    ); 
    z-index: 0;
}

.wrapper .content-wrapper .left-content .text {
    z-index: 1;
}

.wrapper .content-wrapper .left-content .text .h1-main {
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.wrapper .content-wrapper .left-content .text p.h1-text {
    color: #ffffff;
    font-size: 1rem;
}

.wrapper .content-wrapper .search-area {
    position: relative;
    flex: 0 0 50%;
    width: 50%;
}

.wrapper .content-wrapper .search-area .water-mark-text {
    font-size: 8rem;
    text-transform: capitalize;
    color: #ececec !important;
    text-align: center;
    position: absolute;
    top: calc(50% - 6rem);
    font-weight: 700;
    z-index: -2;
}

.find-car-group > span {
    color: #5a5a5a;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
}

.inputs-wrapper {
    display: flex;
    margin-bottom: 1.25rem;
    position: relative;
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.05), 0 15px 12px rgba(0, 0, 0, 0.2);
}

.inputs-wrapper input.form-control {
    border-right: 0 !important;
    border-radius: 0;
    border: 0;
    padding-left: 3rem;
}

.inputs-wrapper input.form-control::-moz-placeholder {
    font-size: 0.8rem;
    font-weight: 500;
}

.inputs-wrapper input.form-control::placeholder {
    font-size: 0.8rem;
    font-weight: 500;
}

.inputs-wrapper input.form-control::-webkit-input-placeholder {
    font-size: 0.8rem;
    font-weight: 500;
}

.inputs-wrapper input.form-control:-moz-placeholder {
    font-size: 0.8rem;
    font-weight: 500;
}

.inputs-wrapper input.form-control::-moz-placeholder {
    font-size: 0.8rem;
    font-weight: 500;
}

.inputs-wrapper input.form-control:-ms-input-placeholder {
    font-size: 0.8rem;
    font-weight: 500;
}

.inputs-wrapper .text-search {
    padding-left: 0.75rem;
}

.inputs-wrapper i.search-placeholder-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translate(50%, -50%);
    color: #cccccc;
}

.inputs-wrapper .btn-search {
    background-color: #ed1c24;
    color: #ffffff;
    border-radius: 0 !important;
}

.bottom-area {
    height: 6rem;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    display: flex;
}

.bottom-area .btn-wrapper {
    flex: 0 0 50%;
    width: 50%;
    text-align: right;
}

.bottom-area .btn-wrapper button {
    height: 100%;
    padding: 0.75rem 2rem;
    background: #ed1c24;
    color: #fff;
    border: 0;
    cursor: default;
    font-weight: bold;
}

.bottom-area .btn-wrapper button small {
    display: block;
    font-size: 0.6rem;
    font-weight: normal;
}

.bottom-area .car-info {
    flex: 0 0 50%;
    width: 50%;
    background: #ed1c24;
    color: #fff;
    padding: 1rem 0rem;
}

.bottom-area .car-info ul {
    display: flex;
    align-items: center;
}

.bottom-area .car-info ul li {
    margin-right: 2rem;
}

.bottom-area .car-info ul li small {
    font-size: 0.6rem;
}

.bottom-area .car-info ul li span {
    display: block;
    font-size: 1.75rem;
    font-weight: bold;
    line-height: 1.2;
}

.bottom-area .car-info ul li span sub {
    font-size: 0.7rem;
    font-weight: normal;
    margin-left: -0.5rem;
}

.bottom-area .car-info ul li h4.car-name {
    margin-bottom: 0.3rem;
}

.bottom-area .car-info ul li ul.car-features {
    display: flex;
    align-items: center;
}

.bottom-area .car-info ul li ul.car-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bottom-area .car-info ul li ul.car-features li span {
    font-size: 0.7rem !important;
    font-weight: normal !important;
}

.bottom-area .btn-wrapper {
    flex: 0 0 50%;
    width: 50%;
    text-align: right;
}

.bottom-area .btn-wrapper button {
    height: 100%;
    padding: 0.75rem 2rem;
    background: #a51d1d;
    color: #fff;
    border: 0;
    font-weight: bold;
}

.bottom-area .btn-wrapper button small {
    display: block;
    font-size: 0.6rem;
    font-weight: normal;
}

.car-image-wrapper {
    position: absolute;
    bottom: 0;
    right: 1rem;
}

.car-image-wrapper img.car-image {
    width: 17em;
}

@media (max-width: 1220px) {
    .wrapper .content-wrapper .search-area .water-mark-text {
        font-size: 6rem;
        top: calc(50% - 4rem);
    }
    .bottom-area .btn-wrapper {
        flex: 0 0 40%;
        width: 40%;
    }
    .bottom-area .car-info {
        flex: 0 0 60%;
        width: 60%;
    }
}
@media (max-width: 1024px) {
    .bottom-area .btn-wrapper {
        flex: 0 0 20%;
        width: 20%;
    }
    .bottom-area .car-info {
        flex: 0 0 80%;
        width: 80%;
    }
}
@media (max-width: 992px) {
    .wrapper .content-wrapper .columns-container .left-content .text .h1-main {
        font-size: 4rem !important;
        line-height: 5rem;
    }
    .wrapper .content-wrapper .columns-container .bg-opacity-two {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(
            0,
            0,
            0,
            0.5
        );
        z-index: 0;
    }
    .wrapper .content-wrapper .left-content .bg-opacity {
        position: relative;
    }
    .find-car-group span {
        position: relative;
        z-index: 2;
        opacity: 0.8;
        color: #ffffff;
    }
    .inputs-wrapper {
        z-index: 2;
    }
    .left-content .bg-opacity {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(
            0,
            0,
            0,
            0.5
        ); 
        z-index: 0;
    }
}
@media (max-width: 760px) {
    .btn-wrapper {
        display: none;
    }
    .bottom-area .btn-wrapper {
        flex: 0 0 0%;
        width: 0%;
    }
    .bottom-area .car-info {
        flex: 0 0 100%;
        width: 100%;
    }
}
@media (max-width: 620px) {
    .bottom-area {
        display: none;
    }
    .car-image-wrapper {
        display: none;
    }
}
@media (max-width: 500px) {
    .wrapper .content-wrapper .columns-container .left-content .text .h1-main {
        font-size: 2.5rem !important;
        line-height: 3rem;
        margin-bottom: 0.5rem;
    }
    .search-area {
        flex: 1 1 100%;
        width: 100%;
    }
    .inputs-wrapper {
        z-index: 2;
        display: block;
    }
    .inputs-wrapper i.search-placeholder-icon {
        left: 15px;
        top: 5%;
        transform: translate(0%);
    }
    .inputs-wrapper .btn-search {
        width: 100%;
    }
}
.gray-background {
    background-color: #f3f3f3;
}

.icon-text {
    font-size: 0.7rem !important;
    text-transform: uppercase;
}

.price-wrapper {
    height: 100%;
    min-height: 150px !important;
    
}
#colorDropdown,
#fuelDropdown {
    border: 0.2px solid #ccc;
    box-shadow: 1px 10px 15px #7a7a7a31;
}
.filter-checkbox {
    color: #5a5a5a;
    font-size: 85%;
}

input[type="checkbox"]:checked + .filter-checkbox {
    color: #000000;
    font-weight: 500;
}

.account-update-btn {
    background-color: #ed1c24;
    font-size: 0.75rem;
    padding: 10px 60px;
}

.account-profile-card {
    background-color: #ed1c24;
}

.account-profile-card li:hover {
    background-color: #c61017;
    color: white;
}

.account-profile-card li.active {
    color: #ed1c24;
    background-color: white;
}

.account-profile-card .name-initials-container {
    border-radius: 50%;
    height: 120px;
    width: 120px;
}

.reservation-card .total-price {
    font-size: 2.5rem;
}

.reservation-card .mt-n3 {
    margin-top: -0.25rem !important;
}

.reservation-card #info-col {
    border-right: 1px solid #dee2e6;
    border-left: 1px solid #dee2e6;
}

.reservation-card .reservation-code {
    background-color: #ed1c24;
    font-size: 0.75rem;
}

.reservation-card .super-text {
    font-size: 1.5rem;
}

.reservation-card .vehicle-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-bottom: -2px;
    background-color: #ffffff;
}

.reservation-card .car-image {
    width: 10em;
}

@media (max-width: 992px) {
    .reservation-card #info-col {
        border: none;
        border-bottom: 1px solid #dee2e6;
    }
}
@media (max-width: 1200px) {
    .reservation-card .total-price {
        font-size: 2rem;
    }
}
@media (max-width: 992px) {
    .reservation-card .total-price {
        font-size: 3rem;
    }
}
.mt-n3 {
    margin-top: -1.25rem !important;
}

.ch-file-upload {
    position: relative;
    width: 100%;
    height: 35px;
    border: 1px solid red;
    font-size: 12px;
    border-radius: 0.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ch-file-upload input.upload {
    position: absolute;
    inset: 0;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
}

.ch-file-upload:hover,
.ch-file-upload:focus,
.ch-file-upload:active {
    background-color: red;
    color: white;
    transition: 0.1s ease-in;
}

.card.img-placeholder-card {
    padding: 10px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}

.card.img-placeholder-card .card-body {
    width: 100%;
}

.card.img-placeholder-card .card-body img {
    height: 100%;
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.img-name {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    background: var(--primary-color);
    color: var(--white-color);
    padding: 3px 0 0px 0;
    text-align: center;
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.8rem;
}

.img-name span.name {
    display: inline-block;
    width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

input[type="file"]::-webkit-file-upload-button {
    visibility: hidden;
}

p.alert a.close {
    line-height: 0.65;
}

.image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 290px;
    margin-right: auto;
}

.image-container img.preview {
    width: 250px;
    height: 250px;
    margin-bottom: 20px;
    border-radius: 0.5rem;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
}

.image-container a img.preview {
    width: 250px;
    margin-bottom: 20px;
    border-radius: 0.5rem;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
}

.card-body-img {
    height: 310px !important;
}

.remove-icon-container {
    top: 2px;
    right: 5px;
    cursor: pointer;
}

@media (min-width: 992px) {
    .card-body-img {
        height: 255px !important;
    }
}
@media (min-width: 1200px) {
    .card-body-img {
        height: 150px !important;
    }
}
@media screen and (min-width: 1200px) {
    .container {
        max-width: 1200px !important;
    }
}
.login-register-container {
    color: #5a5a5a;
}

.input-label,
.sub-text {
    font-size: 0.75rem;
}

.login-reg-submit-btn {
    background-color: #ed1c24;
    font-size: 0.75rem;
    padding: 10px 60px;
    border-radius: 2px;
}

.nsm7Bb-HzV7m-LgbsSe-BPrWId {
    line-height: 1.6;
}

.content-wrapper .half-banner {
    background: url("../images/banners/b2.jpg") no-repeat;
    background-size: cover;
    background-position: center;
}

.wrapper .content-wrapper .row .left-content {
    background: url("../images/banners/b2.jpg") no-repeat;
    background-size: cover;
    background-position: center;
}

@media (max-width: 992px) {
    .wrapper .content-wrapper .columns-container {
        background: url("../images/banners/b2.jpg") no-repeat;
        background-size: cover;
        background-position: center;
    }
    .wrapper .content-wrapper .columns-container .left-content {
        background: none;
    }
}

.loaded .site-preloader {
    opacity: 0;
    visibility: hidden;
}

.site-preloader {
    position: fixed;
    z-index: 999;
    height: 100%;
    width: 100%;
    background: #f3f3f3;
    top: 0;
    left: 0;
}

.car {
    position: absolute;
    width: 117px;
    height: 42px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.car .strike {
    position: absolute;
    width: 11px;
    height: 1px;
    background: #222;
    animation: strikes 0.2s linear infinite;
}

.car .strike2 {
    top: 11px;
    animation-delay: 0.05s;
}

.car .strike3 {
    top: 22px;
    animation-delay: 0.1s;
}

.car .strike4 {
    top: 33px;
    animation-delay: 0.15s;
}

.car .strike5 {
    top: 44px;
    animation-delay: 0.2s;
}

.car-detail {
    position: absolute;
    display: block;
    background: #d00202;
    animation: speed 0.5s linear infinite;
}

.car-detail.spoiler {
    width: 0;
    height: 0;
    top: 7px;
    background: none;
    border: 20px solid transparent;
    border-bottom: 8px solid #d00202;
    border-left: 20px solid #d00202;
}

.car-detail.back {
    height: 20px;
    width: 92px;
    top: 15px;
    left: 0px;
}

.car-detail.center {
    height: 35px;
    width: 75px;
    left: 12px;
    border-top-left-radius: 30px;
    border-top-right-radius: 45px 40px;
    border: 4px solid #d00202;
    background: none;
    box-sizing: border-box;
}

.car-detail.center1 {
    height: 35px;
    width: 35px;
    left: 12px;
    border-top-left-radius: 30px;
}

.car-detail.front {
    height: 20px;
    width: 50px;
    top: 15px;
    left: 67px;
    border-top-right-radius: 50px 40px;
    border-bottom-right-radius: 10px;
}

.car-detail.wheel {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    top: 20px;
    left: 12px;
    border: 3px solid #222;
    background: linear-gradient(
            45deg,
            transparent 45%,
            #ffe4e1 46%,
            #ffe4e1 54%,
            transparent 55%
        ),
        linear-gradient(
            -45deg,
            transparent 45%,
            #ffe4e1 46%,
            #ffe4e1 54%,
            transparent 55%
        ),
        linear-gradient(
            90deg,
            transparent 45%,
            #ffe4e1 46%,
            #ffe4e1 54%,
            transparent 55%
        ),
        linear-gradient(
            0deg,
            transparent 45%,
            #ffe4e1 46%,
            #ffe4e1 54%,
            transparent 55%
        ),
        radial-gradient(
            #ffe4e1 29%,
            transparent 30%,
            transparent 50%,
            #ffe4e1 51%
        ),
        #222;
    animation-name: spin;
}

.car-detail.wheel2 {
    left: 82px;
}

.guest_form_wrapper {
   
    padding: 24px;
   
}
.form-group {
    position: relative;
    margin-bottom: 1rem;
}


.custom__input input {
    width: 100%;
    padding: 10px;
    font-size: 14px;

    border: 1px solid #ccc;
    outline: none;
    transition: border-color 0.2s;
}


.custom__label {
    display: block;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 5px;
}
.search_card {
    background: rgb(220, 53, 69);
    background: linear-gradient(
        74deg,
        rgba(220, 53, 69, 1) 0%,
        rgba(144, 0, 27, 1) 0%,
        rgba(199, 7, 5, 1) 100%
    );
}
.search_card h5,
.search_card h6,
.search_card label {
    color: white;
}



input.end_date,
input.start_date {
    

    border-radius: 3px;
    position: relative;
    font-size: 12px !important;
}
#colorCheckboxes .form-check-label,
#fuelCheckboxes .form-check-label,#yearCheckboxes .form-check-label {
    color: #000;
}
#fuelDropdown .form-check-input:checked,
#colorCheckboxes .form-check-input:checked,
#fuelCheckboxes .form-check-input:checked,
#colorDropdown .form-check-input:checked,
#yearDropdown .form-check-input:checked,
#yearCheckboxes .form-check-input:checked  
{
    background-color: #ed1c24 !important; 
    border-color: #ed1c24 !important;
}
.active-filterlabel {
    color: #ed1c24 !important;
    font-weight: bold;
}



.footer-area {
    background: #222;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.footer-area::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    background: #ed1c24;
    opacity: 0.1;
    right: 50px;
    top: -100px;
    transform: rotate(45deg);
    z-index: -1;
}

.footer-area::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    background: #ed1c24;
    opacity: 0.1;
    right: 80px;
    top: -100px;
    transform: rotate(45deg);
    z-index: -1;
}

.footer-widget-box {
    margin-bottom: 20px;
}

.footer-widget {
    position: relative;
    z-index: 1;
}

.footer-logo img {
    width: 250px;
    margin-bottom: 23px;
}

.copyright {
    position: relative;
    padding: 20px 0;
    background: #181818;
    z-index: 1;
}

.copyright::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    background: #ed1c24;
    width: 50%;
    height: 100%;
    clip-path: polygon(10% 1%, 100% 0, 100% 100%, 0% 100%);
    z-index: -1;
}

.copyright .footer-menu {
    margin: 0;
    padding: 0;
    text-align: right;
}

.copyright .footer-menu li {
    display: inline-block;
    margin-left: 25px;
    font-size: 16px;
}

.copyright .footer-menu li a {
    color: #000000;
    transition: #fff;
}

.copyright .footer-menu li a:hover {
    color: #ed1c24;
}

.copyright .copyright-text {
    color: #ffff;
    margin-bottom: 0px;
    font-size: 16px;
}

.copyright .copyright-text a {
    color: #fff;
    font-weight: 500;
}

.footer-widget-title {
    color: #fff;
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 30px;
    font-size: 21px;
    z-index: 1;
}

.footer-widget-title::before {
    position: absolute;
    content: "";
    z-index: -1;
    width: 90px;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    bottom: 0;
    left: 0;
}

.footer-widget-title::after {
    position: absolute;
    content: "";
    z-index: -1;
    width: 30px;
    height: 2px;
    background-color: #ed1c24;
    bottom: 0;
    left: 18px;
}

.footer-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.footer-list li a {
    color: #fff;
    transition: #000;
}

.footer-list li a i {
    margin-right: 5px;
    color: #ed1c24;
}

.footer-list li a:hover {
    padding-left: 10px;
    color: #ed1c24;
}

.footer-widget-box p {
    color: #fff;
    padding-right: 18px;
    margin-bottom: 20px;
}

.footer-social {
    display: flex;
    gap: 15px;
    justify-content: end;
}

.footer-social li a i {
    height: 38px;
    width: 38px;
    line-height: 38px;
    text-align: center;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
    color: #ed1c24;
    transition: #000;
}

.footer-social li a i:hover {
    background: #181818;
    color: #fff;
}

.footer-contact li {
    position: relative;
    display: flex;
    justify-content: start;
    align-items: center;
    color: #fff;
    font-size: 16px;
    margin-bottom: 15px;
}

.footer-contact li a {
    color: #fff;
    -webkit-transition: 0.3s;
    transition: 0.3s ease;
}

.footer-contact li i {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    padding: 10px;
    margin-right: 15px;
    border-radius: 10px;
    background: #ed1c24;
    text-align: center;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    color: #fff;
}

@media all and (max-width: 1199px) {
    .footer-widget-box {
        margin-bottom: 50px;
    }
}

@media all and (max-width: 991px) {
    .footer-widget-wrapper {
        padding-bottom: 0px;
    }

    .copyright .footer-menu {
        float: left;
        margin-top: 20px;
        text-align: left;
    }

    .copyright .footer-menu li {
        margin-left: 0;
        margin-right: 15px;
    }
}

@media all and (max-width: 767px) {
    .footer-widget-wrapper {
        padding-bottom: 0px;
    }

    .footer-social {
        justify-content: flex-start;
        margin-top: 20px;
    }

    .copyright::before {
        clip-path: polygon(30% 1%, 100% 0, 100% 100%, 0% 100%);
    }

    .copyright .copyright-text a {
        color: white;
    }
    .filter-wrapper {
        padding: 1rem !important;
    }
    .filter-wrapper h2 {
        font-size: 18px;
    }
    .filter-wrapper .vehicle-filter-btn {
        margin-left: auto;
    }
    
}


@keyframes spin {
    0% {
        transform: translate(2px, 1px) rotate(0deg);
    }
    10% {
        transform: translate(-1px, -3px) rotate(36deg);
    }
    20% {
        transform: translate(-2px, 0px) rotate(72deg);
    }
    30% {
        transform: translate(1px, 2px) rotate(108deg);
    }
    40% {
        transform: translate(1px, -1px) rotate(144deg);
    }
    50% {
        transform: translate(-1px, 3px) rotate(180deg);
    }
    60% {
        transform: translate(-1px, 1px) rotate(216deg);
    }
    70% {
        transform: translate(3px, 1px) rotate(252deg);
    }
    80% {
        transform: translate(-2px, -1px) rotate(288deg);
    }
    90% {
        transform: translate(2px, 1px) rotate(324deg);
    }
    100% {
        transform: translate(1px, -2px) rotate(360deg);
    }
}
@keyframes speed {
    0% {
        transform: translate(2px, 1px) rotate(0deg);
    }
    10% {
        transform: translate(-1px, -3px) rotate(-1deg);
    }
    20% {
        transform: translate(-2px, 0px) rotate(1deg);
    }
    30% {
        transform: translate(1px, 2px) rotate(0deg);
    }
    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }
    50% {
        transform: translate(-1px, 3px) rotate(-1deg);
    }
    60% {
        transform: translate(-1px, 1px) rotate(0deg);
    }
    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }
    80% {
        transform: translate(-2px, -1px) rotate(1deg);
    }
    90% {
        transform: translate(2px, 1px) rotate(0deg);
    }
    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}
@keyframes strikes {
    from {
        left: 25px;
    }
    to {
        left: -80px;
        opacity: 0;
    }
} 
.booking-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-color: #dcdcdc41;
    padding: 20px;
    border-radius: 8px;
    max-width: 400px;
    margin: auto;
}


.booking-item {
    display: flex;
    align-items: center;
}


.icon-container {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-container .dash-icon{
    transform: rotate(90deg) !important;
   
}
.pickup-icon,
.return-icon {
    width: 24px;
    height: 24px;
    background-color: black; 
}

.pickup-icon {
    background-image: url('pickup-icon.svg'); 
}

.return-icon {
    background-image: url('return-icon.svg');
}


.booking-details {
    margin-left: 10px;
}

.label {
    font-size: 12px;
   
    color: #7a7a7a;
}

.location {
    font-size: 16px;
}

.datetime {
    font-size: 15px;
    font-weight: bold;
}

.book-btn-responsive {
    width: 75%; 
  }
  
  
  @media (max-width: 992px) {
    .book-btn-responsive {
      width: 100%;
    }
  }
   */

   /* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400..800;1,400..800&display=swap");

:root {
    --default-font: "Plus Jakarta Sans",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Plus Jakarta Sans",  sans-serif;
    --nav-font: "Plus Jakarta Sans",  sans-serif;
  }
  
  /* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
  :root { 
    --background-color: #ffffff; /* Background color for the entire website, including individual sections */
    --default-color: #212529; /* Default color used for the majority of the text content across the entire website */
    --heading-color: #1E1E1E; /* Color for headings, subheadings and title throughout the website */
    --accent-color: #D3040C; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
  }
  
  /* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
  :root {
    --nav-color: #ffff;  /* The default color of the main navmenu links */
    --nav-hover-color: #D3040C; /* Applied to main navmenu links when they are hovered over or active */
    --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
    --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #D3040C; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
  }
  
  /* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */
  
  .light-background {
    --background-color: #f7f9fc;
    --surface-color: #ffffff;
  }
  
  .dark-background {
    --background-color: #0e1d34;
    --default-color: #ffffff;
    --heading-color: #1E1E1E;
    --surface-color: #19335c;
    --contrast-color: #ffffff;
  }
  .text-danger{
    color: #D3040C !important ;
  }
  .fs-5{
    font-size: 18px !important;
  }
  /* Smooth scroll */
  :root {
    scroll-behavior: smooth;
  }
  .btn-primary {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #fff ;
  }
  .btn-light:hover{
    background: #fffcfcd1;
    color: #d3040be1;
  }
  .btn-danger{
    background-color: var(--accent-color);
  }
  .btn-light {
    --bs-btn-active-bg: #fcfcfc !important;
    --bs-btn-active-border-color: #d3040be1 !important;
    --bs-btn-active-color: #d3040be1;
  }
  .form-check-input:checked{
    background-color: var(--accent-color);
    border-color: var(--accent-color);
  }
  .form-control::placeholder {
    color: #b1b1b1;
   
  }
  .bg-primary{
    background-color: #D3040C !important;
    color: white !important;
  }
  .bg-primary:hover{
     color:#D3040C !important;
  }
  .btn-outline-primary {
    --bs-btn-color: #D3040C;
    --bs-btn-border-color: #D3040C;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #D3040C;
    --bs-btn-hover-border-color: #D3040C;
    --bs-btn-focus-shadow-rgb: 211, 4, 12;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #D3040C;
    --bs-btn-active-border-color: #D3040C;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #D3040C;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #D3040C;
    --bs-gradient: none;
  }
  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active {
    background-color: darken(var(--accent-color), 10%) !important; /* Optional: adjust manually */
    border-color: darken(var(--accent-color), 10%) !important;
    color: #fff !important;
  }
  .btn-outline-secondary {
    color: #D3040C;
    border-color: #D3040C;
    background-color: transparent;
  }
  
  .btn-outline-secondary:hover {
    background-color: #D3040C !important;
    color: white;
    border-color: #D3040C;
  }
  .btn-check + .btn {
    color: #333;                /* text color when not checked */
    border-color: #ccc;         /* neutral gray border */
    background-color: transparent;
  }
  .btn-check + .btn:hover {
    border-color: #D3040C; 
  }
 
  .btn-check + .btn:hover small {
    color: #D3040C !important;
  }
  .btn-check:checked + .btn:hover small {
    color: #ffff !important;
  }
  .btn-check:checked+.btn{
    color: #ffff;
    border-color: #D3040C;
    background-color: #D3040C;
  }
 
 
  
  /*--------------------------------------------------------------
  # General Styling & Shared Classes
  --------------------------------------------------------------*/

  body {
    color: var(--default-color);
    background-color: var(--background-color);
    font-family: var(--default-font);
  }
  
  a {
    color: var(--accent-color);
    text-decoration: none;
    transition: 0.3s;
  }
  .form-control{
    line-height: 2.5;
  }
  a:hover {
    color: color-mix(in srgb, var(--accent-color), transparent 25%);
    text-decoration: none;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--heading-color);
    font-family: var(--heading-font);
  }
  
  /* Pulsating Play Button
  ------------------------------*/
  .pulsating-play-btn {
    width: 94px;
    height: 94px;
    background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
    border-radius: 50%;
    display: block;
    position: relative;
    overflow: hidden;
  }
  
  .pulsating-play-btn:before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    animation-delay: 0s;
    animation: pulsate-play-btn 2s;
    animation-direction: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: steps;
    opacity: 1;
    border-radius: 50%;
    border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
    top: -15%;
    left: -15%;
    background: rgba(198, 16, 0, 0);
  }
  
  .pulsating-play-btn:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-40%) translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;
    z-index: 100;
    transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  
  .pulsating-play-btn:hover:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-40%) translateY(-50%);
    width: 0;
    height: 0;
    border: none;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;
    z-index: 200;
    animation: none;
    border-radius: 0;
  }
  
  .pulsating-play-btn:hover:after {
    border-left: 15px solid var(--accent-color);
    transform: scale(20);
  }
  
  @keyframes pulsate-play-btn {
    0% {
      transform: scale(0.6, 0.6);
      opacity: 1;
    }
  
    100% {
      transform: scale(1, 1);
      opacity: 0;
    }
  }
  
  /* PHP Email Form Messages
  ------------------------------*/
.error {
       display: block;
       font-size: 0.875rem;
       margin-top: 5px;
   }
   .alert {
       margin-bottom: 20px;
       padding: 15px;
       border-radius: 4px;
   }
   .alert-danger {
       background-color: #f8d7da;
       color: #721c24;
   }
   .alert-success {
       background-color: #d4edda;
       color: #155724;
   }
   .loading, .error-message, .sent-message {
       margin-bottom: 15px;
       font-size: 1rem;
   }
   .loading {
       color: #007bff;
   }
   .error-message {
       color: #ffffff;
   }
   .sent-message {
       color: #28a745;
   }

  .php-email-form .error-message {
    display: none;
    background: #ffcdd2aa;
    color: #D3040C;
    text-align: left;
    padding: 15px;
     font-size: 14px;
    margin-bottom: 24px;
    font-weight: 600;
  }
  
  .php-email-form .sent-message {
    display: none;
    color: #317d58;
    background: #d3ffea;
    text-align: center;
    padding: 15px;
    font-size: 14px;
    margin-bottom: 24px;
    font-weight: 600;
  }
  
  .php-email-form .loading {
    display: none;
    background: var(--surface-color);
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
  }
  
  .php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid var(--accent-color);
    border-top-color: var(--surface-color);
    animation: php-email-form-loading 1s linear infinite;
  }
  
  @keyframes php-email-form-loading {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }
  
  /*--------------------------------------------------------------
  # Global Header
  --------------------------------------------------------------*/
  .dark-header {
    --background-color: #fff;
    --heading-color: #000;
    --nav-color: #000;
  }
  
  .dark-header .navmenu a {
    color: var(--nav-color) !important;
  }
  
  .header {
    --background-color: rgba(42, 42, 42, 0);
    --heading-color: #ffffff;
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 20px 0;
    transition: all 0.5s;
    z-index: 997;
    border-bottom: 0.2px solid color-mix(in srgb, #b1b1b13c, rgb(255, 255, 255) 5%);
  }
  
  .header .logo {
    line-height: 1;
  }
  
  .header .logo img {
    max-height: 36px;
    margin-right: 8px;
  }
  
  .header .logo h1 {
    font-size: 30px;
    margin: 0;
    font-weight: 700;
    color: var(--heading-color);
  }
  
  .header .btn-getstarted,
  .header .btn-getstarted:focus {
    color: var(--contrast-color);
    background: var(--accent-color);
    font-size: 14px;
    padding: 8px 25px;
    margin: 0 0 0 30px;
    border-radius: 4px;
    transition: 0.3s;
  }
  
  .header .btn-getstarted:hover,
  .header .btn-getstarted:focus:hover {
    color: var(--contrast-color);
    background: color-mix(in srgb, var(--accent-color), transparent 15%);
  }
  
  @media (max-width: 1200px) {
    .header .logo {
      order: 1;
    }
  
    .header .btn-getstarted {
      order: 2;
      margin: 0 15px 0 0;
      padding: 6px 15px;
    }
  
    .header .navmenu {
      order: 3;
    }
  }
  
  /* Global Header on Scroll
  ------------------------------*/
  .scrolled .header {
   
    background-color:#1E1E1E;
    
  
  /* 
  -webkit-backdrop-filter: blur(12px);
  */
  
  --nav-color: white; 
  box-shadow: 0 1px 2px rgba(118, 105, 105, 0.141);
  padding: 10px 0;
  border-bottom: 0.3px solid rgba(255, 255, 255, 0.1);
  }
  .header::before {
    content: '';
    position: absolute;
    inset: 0;
    
    /* filter: blur(3rem); */
    /* z-index: -1; */
    pointer-events: none;
  }

  /*--------------------------------------------------------------
  # Navigation Menu
  --------------------------------------------------------------*/
  /* Navmenu - Desktop */
  @media (min-width: 1200px) {
    .navmenu {
      padding: 0;
    }
  
    .navmenu ul {
      margin: 0;
      padding: 0;
      display: flex;
      list-style: none;
      align-items: center;
    }
  
    .navmenu li {
      position: relative;
    }
  
    .navmenu a,
    .navmenu a:focus {
      color: var(--nav-color);
      padding: 18px 15px;
      font-size: 16px;
      font-family: var(--nav-font);
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: space-between;
      white-space: nowrap;
      transition: 0.3s;
    }
  
    .navmenu a i,
    .navmenu a:focus i {
      font-size: 12px;
      line-height: 0;
      margin-left: 5px;
      transition: 0.3s;
    }
  
    .navmenu li:last-child a {
      padding-right: 0;
    }
  
    .navmenu li:hover>a,
    .navmenu .active,
    .navmenu .active:focus {
      color: var(--nav-hover-color);
    }
  
    .navmenu .dropdown ul {
      margin: 0;
      padding: 10px 0;
      background: var(--nav-dropdown-background-color);
      display: block;
      position: absolute;
      visibility: hidden;
      left: 14px;
      top: 130%;
      opacity: 0;
      transition: 0.3s;
      border-radius: 4px;
      z-index: 99;
      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    }
  
    .navmenu .dropdown ul li {
      min-width: 200px;
    }
  
    .navmenu .dropdown ul a {
      padding: 10px 20px;
      font-size: 15px;
      text-transform: none;
      color: var(--nav-dropdown-color);
    }
  
    .navmenu .dropdown ul a i {
      font-size: 12px;
    }
  
    .navmenu .dropdown ul a:hover,
    .navmenu .dropdown ul .active:hover,
    .navmenu .dropdown ul li:hover>a {
      color: var(--nav-dropdown-hover-color);
    }
  
    .navmenu .dropdown:hover>ul {
      opacity: 1;
      top: 100%;
      visibility: visible;
    }
  
    .navmenu .dropdown .dropdown ul {
      top: 0;
      left: -90%;
      visibility: hidden;
    }
  
    .navmenu .dropdown .dropdown:hover>ul {
      opacity: 1;
      top: 0;
      left: -100%;
      visibility: visible;
    }
  }
  
  /* Navmenu - Mobile */
  @media (max-width: 1199px) {
    .mobile-nav-toggle {
      color: var(--nav-color);
      font-size: 28px;
      line-height: 0;
      margin-right: 10px;
      cursor: pointer;
      transition: color 0.3s;
    }
  .dark-header .navmenu a {
    color: var(--default-color) !important;
}
.car-details-img{
    max-height: unset !important;
    min-width: unset !important;
    width: 100% !important;
    

  }
    .navmenu {
      padding: 0;
      z-index: 9997;
    }
  
    .navmenu ul {
      display: none;
      list-style: none;
      position: absolute;
      inset: 60px 20px 20px 20px;
      padding: 10px 0;
      margin: 0;
      border-radius: 6px;
      background-color: var(--nav-mobile-background-color);
      overflow-y: auto;
      transition: 0.3s;
      z-index: 9998;
      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    }
  
    .navmenu a,
    .navmenu a:focus {
      color: var(--nav-dropdown-color);
      padding: 10px 20px;
      font-family: var(--nav-font);
      font-size: 17px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: space-between;
      white-space: nowrap;
      transition: 0.3s;
    }
  
    .navmenu a i,
    .navmenu a:focus i {
      font-size: 12px;
      line-height: 0;
      margin-left: 5px;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: 0.3s;
      background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
    }
  
    .navmenu a i:hover,
    .navmenu a:focus i:hover {
      background-color: var(--accent-color);
      color: var(--contrast-color);
    }
  
    .navmenu a:hover,
    .navmenu .active,
    .navmenu .active:focus {
      color: var(--nav-dropdown-hover-color);
    }
  
    .navmenu .active i,
    .navmenu .active:focus i {
      background-color: var(--accent-color);
      color: var(--contrast-color);
      transform: rotate(180deg);
    }
  
    .navmenu .dropdown ul {
      position: static;
      display: none;
      z-index: 99;
      padding: 10px 0;
      margin: 10px 20px;
      background-color: var(--nav-dropdown-background-color);
      border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
      box-shadow: none;
      transition: all 0.5s ease-in-out;
    }
  
    .navmenu .dropdown ul ul {
      background-color: rgba(33, 37, 41, 0.1);
    }
  
    .navmenu .dropdown>.dropdown-active {
      display: block;
      background-color: rgba(33, 37, 41, 0.03);
    }
  
    .mobile-nav-active {
      overflow: hidden;
    }
  
    .mobile-nav-active .mobile-nav-toggle {
      color: #fff;
      position: absolute;
      font-size: 32px;
      top: 15px;
      right: 15px;
      margin-right: 0;
      z-index: 9999;
    }
  
    .mobile-nav-active .navmenu {
      position: fixed;
      overflow: hidden;
      inset: 0;
      background: rgba(33, 37, 41, 0.8);
      transition: 0.3s;
      
    }
  
    .mobile-nav-active .navmenu>ul {
      display: block;
    }
  }
  
  /*--------------------------------------------------------------
  # Global Footer
  --------------------------------------------------------------*/
  .footer {
    color: var(--default-color);
    background-color: var(--heading-color);
    font-size: 14px;
    position: relative;
  }
  
  .footer .footer-top {
    padding-top: 50px;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  }
  
  .footer .footer-about .logo {
    line-height: 1;
    margin-bottom: 25px;
  }
  
  .footer .footer-about .logo img {
    max-height: 40px;
    margin-right: 6px;
  }
  
  .footer .footer-about .logo span {
    color: var(--heading-color);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: var(--heading-font);
  }
  
  .footer .footer-about p {
    font-size: 14px;
    font-family: var(--heading-font);
  }
  
  .footer .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
    font-size: 16px;
    color: color-mix(in srgb, var(--default-color), transparent 50%);
    margin-right: 10px;
    transition: 0.3s;
  }
  
  .footer .social-links a:hover {
    color: var(--default-color);
    border-color: var(--default-color);
  }
  
  .footer h4 {
    font-size: 16px;
    font-weight: bold;
    position: relative;
    padding-bottom: 12px;
    color: var(--contrast-color);
  }
  
  .footer .footer-links {
    margin-bottom: 30px;
  }
  
  .footer .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .footer .footer-links ul i {
    padding-right: 2px;
    font-size: 12px;
    line-height: 0;
  }
  
  .footer .footer-links ul li {
    padding: 10px 0;
    display: flex;
    align-items: center;
  }
  
  .footer .footer-links ul li:first-child {
    padding-top: 0;
  }
  
  .footer .footer-links ul a {
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    display: inline-block;
    line-height: 1;
  }
  
  .footer .footer-links ul a:hover {
    color: var(--default-color);
  }
  
  .footer .footer-contact p {
    margin-bottom: 5px;
  }
  
  .footer .copyright {
    padding-top: 30px;
    padding-bottom: 30px;
    border-top: 1px solid color-mix(in srgb, var(--contrast-color), transparent 90%);
  }
  
  .footer .copyright p {
    margin-bottom: 0;
  }
  
  .footer .credits {
    margin-top: 4px;
    font-size: 13px;
  }
  
  .footer .credits a {
    color: var(--default-color);
  }
  .footer-social i{
    background-color: #D3040C;
    border-radius: 5px;
    padding: 5px;
  }
  /*--------------------------------------------------------------
  # Preloader
  --------------------------------------------------------------*/
  #preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    background-color: var(--background-color);
    transition: all 0.6s ease-out;
    width: 100%;
    height: 100vh;
  }
  
  #preloader:before,
  #preloader:after {
    content: "";
    position: absolute;
    border: 4px solid var(--accent-color);
    border-radius: 50%;
    animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }
  
  #preloader:after {
    animation-delay: -0.5s;
  }
  
  @keyframes animate-preloader {
    0% {
      width: 10px;
      height: 10px;
      top: calc(50% - 5px);
      left: calc(50% - 5px);
      opacity: 1;
    }
  
    100% {
      width: 72px;
      height: 72px;
      top: calc(50% - 36px);
      left: calc(50% - 36px);
      opacity: 0;
    }
  }
  
  /*--------------------------------------------------------------
  # Scroll Top Button
  --------------------------------------------------------------*/
  .scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 99999;
    background-color: var(--accent-color);
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.4s;
  }
  
  .scroll-top i {
    font-size: 24px;
    color: var(--contrast-color);
    line-height: 0;
  }
  
  .scroll-top:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
    color: var(--contrast-color);
  }
  
  .scroll-top.active {
    visibility: visible;
    opacity: 1;
  }
  
  /*--------------------------------------------------------------
  # Disable aos animation delay on mobile devices
  --------------------------------------------------------------*/
  @media screen and (max-width: 768px) {
    [data-aos-delay] {
      transition-delay: 0 !important;
    }
    .hero{
        height: unset;
    }
    button.booking-btn{
        width: 100% !important;
    }
    .page-title h1{
      font-size: 30px !important;
    }
    .fs-5{
      font-size: 16px !important;
    }
    .booking-form-wrapper{
      margin-top: -20px !important;
    }
  }
 

  /*--------------------------------------------------------------
  # Global Page Titles & Breadcrumbs
  --------------------------------------------------------------*/
  .page-title {
    color:#ffffff;
    background-color: var(--background-color);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 160px 0 80px 0;
    text-align: center;
    position: relative;
    height: auto; /* Remove fixed height */
    margin-bottom: -40px;
    z-index: 1;
    
  }
  
  .page-title:before {
    content: "";
    background: linear-gradient(to right,
    rgba(30, 30, 30, 0.8) 0%,         /* dark on left */
    rgba(30, 30, 30, 0.3) 30%,        /* fade to transparent */
    rgba(30, 30, 30, 0.3) 70%,        /* transparent center */
    rgba(30, 30, 30, 0.8) 100%        /* dark on right */
  );
    filter: blur(0.1px);
    backdrop-filter: blur(2px);
    position: absolute;
    /* z-index: 1; */
    inset: 0;
  }
  
  .page-title h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
  }
  
  .page-title .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: center;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
  }
  
  .page-title .breadcrumbs ol a {
    color: color-mix(in srgb, var(--default-color), transparent 50%);
  }
  
  .page-title .breadcrumbs ol a:hover {
    color: var(--contrast-color);
  }
  
  .page-title .breadcrumbs ol li+li {
    padding-left: 10px;
  }
  
  .page-title .breadcrumbs ol li+li::before {
    content: "/";
    display: inline-block;
    padding-right: 10px;
    color: color-mix(in srgb, var(--default-color), transparent 50%);
  }
  
  /*--------------------------------------------------------------
  # Global Sections
  --------------------------------------------------------------*/
  section,
  .section {
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 60px 0;
    scroll-margin-top: 100px;
    overflow: clip;
  }
  
  @media (max-width: 1199px) {
  
    section,
    .section {
      scroll-margin-top: 66px;
    }
  }
  
  /*--------------------------------------------------------------
  # Global Section Titles
  --------------------------------------------------------------*/
  .section-title {
    text-align: center;
    padding: 30px 0;
    margin-bottom: 30px;
    position: relative;
  }
  
  .section-title h2 {
    font-size: 32px;
    font-weight: 800;
    text-transform: capitalize;
    margin-bottom: 20px;
    padding-bottom: 0;
    position: relative;
    z-index: 2;
  }
  
  .section-title span {
    position: absolute;
    top: 4px;
    color: color-mix(in srgb, var(--heading-color), transparent 95%);
    left: 0;
    right: 0;
    z-index: 1;
    font-weight: 700;
    font-size: 52px;
    text-transform: uppercase;
    line-height: 1;
  }
  
  .section-title p {
    margin-bottom: 0;
    position: relative;
    z-index: 2;
  }
  
  @media (max-width: 575px) {
    .section-title h2 {
      font-size: 28px;
      margin-bottom: 15px;
    }
  
    .section-title span {
      font-size: 38px;
    }
  }
  
  /*--------------------------------------------------------------
  # Hero Section
  --------------------------------------------------------------*/
  .hero {
    width: 100%;
    min-height: 50vh;
    position: relative;
    padding: 120px 0 60px 0;
    background-image: 
    linear-gradient(to right, #1E1E1E 35.9%, rgba(30, 30, 30, 0) 100%),
    url('../images/banners/b3.jpg');
  background-size: cover;
  background-position: top center;
  height: 650px;
  }
  
  .hero .hero-bg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit:fill;
    z-index: 1;
    
   
  }
  
  .hero .container {
    position: relative;
    z-index: 3;
   
  }
  
  .hero h2 {
    margin-bottom: 20px;
    padding: 0;
    font-size: 40px ;
    font-weight: 700;
    color: var(--contrast-color);
  }
  
  @media (max-width: 575px) {
    .hero h2 {
      font-size: 30px;
    }
  }
  
  .hero p {
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 40px;
  }
  
  .hero form {
    background: color-mix(in srgb, var(--default-color) 5%, white 90%);
    padding: 10px;
    border-radius: 10px;
  }
  
  .hero form .form-control {
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 20px;
    padding-right: 20px;
    border: none;
    margin-right: 10px;
    border: none !important;
    background: none !important;
  }
  
  .hero form .form-control:hover,
  .hero form .form-control:focus {
    outline: none;
    box-shadow: none;
  }
  
  .hero form .btn-primary {
    color: var(--contrast-color);
    background-color: var(--accent-color);
    flex-shrink: 0;
    padding: 0 25px;
  }
  
  .hero form .btn-primary:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 15%);
  }
  
 
 /*Booking Form*/ 
  .booking-form-wrapper {
    position: relative;
    margin-top: -70px; /* Adjust based on overlap you want */
    z-index: 0;
  }

  .booking-form {
    background: #fff; /* Or your form background */
    padding: 30px;
   
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  }
.location-input {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23D3040C' class='bi bi-geo-alt-fill' viewBox='0 0 16 16'><path d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6'/></svg>") no-repeat 15px center;
    background-size: 20px 20px;
    padding-left: 45px;
}

.date-input {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23D3040C' class='bi bi-calendar-range-fill' viewBox='0 0 16 16'><path d='M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4zM16 7V5H0v5h5a1 1 0 1 1 0 2H0v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9h-6a1 1 0 1 1 0-2z'/></svg>") no-repeat 15px center;
    background-size: 20px 20px;
    padding-left: 45px;
}


  /* jquery date picker styling*/
  #ui-datepicker-div {
    
    background-color: #fff !important;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.1) !important;
    margin-top: 0.25rem;
    border-radius: 0.5rem !important;
    padding: 0.5rem !important;
  }
  table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
  }
  .ui-datepicker-calendar thead th {
    padding: .25rem 0 !important;
    text-align: center !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: #1e1e1e !important;
  }
  .ui-datepicker-calendar tbody td {
    width: 2.5rem !important;
    text-align: center !important;
    padding: 0 !important;
  }
  .ui-datepicker-calendar tbody td a {
    display: block !important;
    border-radius: 0.25rem !important;
    line-height: 2rem !important;
    transition: 0.3s all !important;
    border: none !important;
    text-align: center;
   
    font-size: 0.875rem !important;
    text-decoration: none !important;
  }
 
  .ui-datepicker-calendar tbody td a:hover {	
    background-color: #ffecec;
  }
  .ui-datepicker-calendar tbody td a.ui-state-active {
    background-color: #D3040C;
    color: white;
  }
  .ui-datepicker-header{
    background-color: transparent !important;
    border: none !important;
  }
  .ui-datepicker-header a.ui-corner-all {
    cursor: pointer !important;
    position: absolute !important;
    top: 0 !important;
    width: 2rem !important;
    height: 2rem !important;
    margin: 0.5rem !important;
    border-radius: 0.25rem !important; 
    transition: 0.3s all !important;
  }
  .ui-datepicker-header a.ui-corner-all:hover {
    background-color: #ECEFF1 !important;
  }
  .ui-datepicker-header a.ui-datepicker-prev {	
    left: 0 !important;	
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==") !important;
    background-repeat: no-repeat !important;
    background-size: 10px !important;
    background-position: 50% !important;
    transform: rotate(180deg) !important;
  }
  .ui-datepicker-header a.ui-datepicker-next {
    right: 0 !important;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==') !important;
    background-repeat: no-repeat !important;
    background-size: 10px !important;
    background-position: 50% !important;
  }
  .ui-datepicker-header a>span {
    display: none !important;
  }
  .ui-datepicker-title {
    text-align: center !important;
    line-height: 2rem !important;
    margin-bottom: 0.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    padding-bottom: 0.25rem !important;
  }
  .ui-datepicker-week-col {
    color: #78909C !important;
    font-weight: 400 !important;
    font-size: 0.75rem !important;
  }
  
   .car-icon {
    width: 90px;
    height: 40px;
  }

  /*--------------------------------------------------------------
  # Client logo marquee
  --------------------------------------------------------------*/
  .logo-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  
  .logo-marquee {
    display: flex;
    align-items: center;
    position: relative;
    white-space: nowrap;
    will-change: transform;
    animation: marquee 7s linear infinite;
  }
  /* Left gradient fade */
.logo-marquee-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 80px; /* width of gradient fade on left */
    height: 100%;
    pointer-events: none; /* so it doesn't block interaction */
    background: linear-gradient(to right, white 0%, transparent 100%);
    z-index: 10;
  }
  
  /* Right gradient fade */
  .logo-marquee-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 80px; /* width of gradient fade on right */
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to left, white 0%, transparent 100%);
    z-index: 10;
  }
  .logo-marquee img {
    height: 70px;
    width: auto;
    filter: saturate(0.2); 
    opacity: 0.2;
    display: inline-block;
  }
  
  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
  }
  
    
  /*--------------------------------------------------------------
  # Featured Services Section
  --------------------------------------------------------------*/
  .featured-services .service-item {
    position: relative;
    height: 100%;
    margin-bottom: 30px;
  }
  
  .featured-services .service-item .icon {
    margin-right: 20px;
  }
  
  .featured-services .service-item .icon i {
    color: var(--accent-color);
    font-size: 40px;
    transition: 0.3s;
  }
  
  .featured-services .service-item:hover .icon i {
    color: var(--accent-color);
  }
  
  .featured-services .service-item .title {
    color: var(--heading-color);
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 20px;
    transition: 0.3s;
  }
  
  .featured-services .service-item .description {
    font-size: 15px;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    margin-bottom: 10px;
  }
  
  .featured-services .service-item .readmore {
    display: flex;
    align-items: center;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    transition: 0.3s;
    font-weight: 700;
    font-size: 14px;
  }
  
  .featured-services .service-item .readmore i {
    margin-left: 8px;
  }
  
  .featured-services .service-item:hover .title,
  .featured-services .service-item:hover .readmore,
  .featured-services .service-item:hover .icon i {
    color: var(--accent-color);
  }
  
  /*--------------------------------------------------------------
  # Video Section
  --------------------------------------------------------------*/
  /* Layout for this demo */
  #video{
    background-color: var(--heading-color);
  }
.wrap{
    position: relative;
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
  }
  
   /* The outer-div to move the elements */
  .box-video{
    position: relative;
    border-radius: 8px;
    width: 100%;
    margin:0 auto 0 auto;
    cursor: pointer;
    overflow: hidden;
  }
  
   /* Set Cover aka Background-Image */
  .box-video .bg-video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 2;
  }
  
   /* Add light shade to make play button visible*/
  .bg-video::after{ 
      content:'';
      position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.1);
        z-index: 3;
        }
  
  
  /* The Play-Button using CSS-Only */
  .box-video .bt-play {
    position: absolute;
    top:50%;
    left:50%;
    margin:-30px 0 0 -30px;
    display: inline-block;
    width: 60px;
    height: 60px;
    background:#D3040C;
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50%;
    text-indent: -999em;
    cursor: pointer;
    z-index:2;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
  }
  
  /* The Play-Triangle */
  .box-video .bt-play:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    height: 0;
    width: 0;
    margin: -12px 0 0 -6px;
    border: solid transparent;
    border-left-color: #fff;
    border-width: 12px 20px;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
  }
  
  .box-video:hover .bt-play {
    transform: scale(1.1);
  }
  
  /* When Class added the Cover gets hidden... */
  .box-video.open .bg-video{
    visibility: hidden;
    opacity: 0;
  
    -webkit-transition: all .6s .8s;
    transition: all .6s .8s;  
  }
  
  /* and iframe shows up */
  .box-video.open .video-container{
    opacity: 1;
    -webkit-transition: all .6s .8s;
    transition: all .6s .8s;
  }
  
  /* Giving the div ratio of 16:9 with padding */
  .video-container {
      position: relative;
      width: 100%;
      height: 0;
    margin: 0;
    z-index: 1;
      padding-bottom: 56.27198%;
  }
  
  .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
  
  /*--------------------------------------------------------------
  # About Section
  --------------------------------------------------------------*/
  .about .content h3 {
    font-size: 2rem;
    font-weight: 700;
  }
  
  .about .content ul {
    list-style: none;
    padding: 0;
  }
  
  .about .content ul li {
    display: flex;
    align-items: flex-start;
    margin-top: 40px;
  }
  
  .about .content ul i {
    flex-shrink: 0;
   padding: 13px;
    color: var(--contrast-color);
    margin-right: 20px;
    line-height: 0;
    background-color: var(--accent-color);
    border-radius: 10px;
  }
  
  .about .content ul h5 {
    font-size: 18px;
    font-weight: 700;
  }
  
  .about .content ul p {
    font-size: 15px;
  }
  
  .about .content p:last-child {
    margin-bottom: 0;
  }
  
  .about .pulsating-play-btn {
    position: absolute;
    left: calc(50% - 47px);
    top: calc(50% - 47px);
  }
  
  /*--------------------------------------------------------------
  # Services Section
  --------------------------------------------------------------*/
  .services .card {
    background-color: var(--surface-color);
    color: var(--default-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
    position: relative;
    border-radius: 10px;
    height: 100%;
    padding: 1rem 1rem;
  }
  
  .services .card .card-img {
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: 0;
  }
  
  .services .card .card-img img {
    transition: 0.3s ease-in-out;
   
  }
  
  .services .card h3 {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 5px;
    padding: 10px 0px;
    text-transform: uppercase;
  }
  .services .feature-icons span {
    margin-right: 15px;
    font-size: 0.9rem;
  }
  .services  .car-features i {
    margin-right: 5px;
  }
  .services .card a {
    color: var(--contrast-color);
    transition: 0.3;
    background-color: #D3040C;
    padding: 10px 20px;
    font-weight: 500;
  }
  
  .services .card a:hover {
    color: var(--accent-color) !important;
    border: 1.6px solid #D3040C !important;
    background-color: transparent;
  }
  .services .card p {
  
    margin-bottom: 30px;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    font-size: 15px;
  }
  
  .services .card:hover .card-img img {
    transform: scale(1.1);
  }
  
  /*--------------------------------------------------------------
  # Call To Action Section
  --------------------------------------------------------------*/
  .call-to-action {
    padding: 80px 0;
    position: relative;
    clip-path: inset(0);
  }
  
  .call-to-action img {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }
  
  .call-to-action:before {
    content: "";
    background: color-mix(in srgb, var(--background-color), transparent 20%);
    position: absolute;
    inset: 0;
    z-index: 2;
  }
  
  .call-to-action .container {
    position: relative;
    z-index: 3;
  }
  
  .call-to-action h3 {
    font-size: 28px;
    font-weight: 700;
    color: var(--default-color);
  }
  
  .call-to-action p {
    color: var(--default-color);
  }
  
  .call-to-action .cta-btn {
    font-family: var(--heading-font);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 12px 40px;
    border-radius: 5px;
    transition: 0.5s;
    margin: 10px;
    border: 2px solid var(--contrast-color);
    color: var(--contrast-color);
  }
  
  .call-to-action .cta-btn:hover {
    background: var(--accent-color);
    border: 2px solid var(--accent-color);
  }
  
  /*--------------------------------------------------------------
  # Features Section
  --------------------------------------------------------------*/
  .features .features-item {
    color: color-mix(in srgb, var(--default-color), transparent 20%);
  }
  
  .features .features-item+.features-item {
    margin-top: 100px;
  }
  
  @media (max-width: 640px) {
    .features .features-item+.features-item {
      margin-top: 40px;
    }
  }
  
  .features .features-item h3 {
    font-weight: 700;
    font-size: 26px;
  }
  .features .features-item h3 {
    font-weight: 700;
    font-size: 26px;
  }
  
  .features .features-item ul {
    list-style: none;
    padding: 0;
  }
  
  .features .features-item ul li {
    padding-bottom: 10px;
    display: flex;
    align-items: center;
  }
  
  .features .features-item ul li:last-child {
    padding-bottom: 0;
  }
  
  .features .features-item ul i {
    font-size: 20px;
    padding-right: 4px;
    color: var(--accent-color);
  }
  
  .features .features-item p:last-child {
    margin-bottom: 0;
  }
  

  /*Driver form */
.custom__input input{
  margin: 10px 0;
  
}
  
  /*--------------------------------------------------------------
  # Pricing Section
  --------------------------------------------------------------*/
  .pricing .pricing-item {
    background-color: var(--surface-color);
    box-shadow: 0 3px 20px -2px rgba(0, 0, 0, 0.1);
    border-top: 4px solid var(--background-color);
    padding: 60px 40px;
    height: 100%;
    border-radius: 5px;
  }
  
  .pricing h3 {
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 20px;
  }
  
  .pricing h4 {
    color: var(--accent-color);
    font-size: 48px;
    font-weight: 400;
    font-family: var(--heading-font);
    margin-bottom: 0;
  }
  
  .pricing h4 sup {
    font-size: 28px;
  }
  
  .pricing h4 span {
    color: color-mix(in srgb, var(--default-color), transparent 50%);
    font-size: 18px;
  }
  
  .pricing ul {
    padding: 20px 0;
    list-style: none;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    text-align: left;
    line-height: 20px;
  }
  
  .pricing ul li {
    padding: 10px 0;
    display: flex;
    align-items: center;
  }
  
  .pricing ul i {
    color: #059652;
    font-size: 24px;
    padding-right: 3px;
  }
  
  .pricing ul .na {
    color: color-mix(in srgb, var(--default-color), transparent 60%);
  }
  
  .pricing ul .na i {
    color: color-mix(in srgb, var(--default-color), transparent 60%);
  }
  
  .pricing ul .na span {
    text-decoration: line-through;
  }
  
  .pricing .buy-btn {
    color: var(--accent-color);
    display: inline-block;
    padding: 8px 35px 10px 35px;
    border-radius: 50px;
    transition: none;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--heading-font);
    transition: 0.3s;
    border: 1px solid var(--accent-color);
  }
  
  .pricing .buy-btn:hover {
    background: var(--accent-color);
    color: var(--contrast-color);
  }
  
  .pricing .featured {
    border-top-color: var(--accent-color);
  }
  
  .pricing .featured .buy-btn {
    background: var(--accent-color);
    color: var(--contrast-color);
  }
  
  @media (max-width: 992px) {
    .pricing .box {
      max-width: 60%;
      margin: 0 auto 30px auto;
    }
    .booking-inner-bg{
      padding: 2.5rem 0 !important;
    }
  }
  
  @media (max-width: 767px) {
    .pricing .box {
      max-width: 80%;
      margin: 0 auto 30px auto;
    }
  }
  
  @media (max-width: 420px) {
    .pricing .box {
      max-width: 100%;
      margin: 0 auto 30px auto;
    }
  }
  
  /*--------------------------------------------------------------
  # Testimonials Section
  --------------------------------------------------------------*/
  .testimonials {
    padding: 80px 0;
    position: relative;
  }
  
  .testimonials::before,
.testimonials::after {
    content: "";
    position: absolute;
    top: 0;
    width: 80px; /* width of gradient fade on left */
    height: 100%;
    pointer-events: none; /* so it doesn't block interaction */
    z-index: 10;
}

/* Left blur */
.testimonials::before {
  left: 0;
  background: linear-gradient(to right, #ffffff 0%, transparent 100%);
}

/* Right blur */
.testimonials::after {
  right: 0;
  background: linear-gradient(to left, #ffffff 0%, transparent 100%);
 
}
 
  
  .testimonials .testimonials-bg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
   
    object-fit: cover;
    z-index: 1;
  }
  
  .testimonials .container {
    position: relative;
    z-index: 3;
    
  }
  
  .testimonials .testimonials-carousel,
  .testimonials .testimonials-slider {
    overflow: hidden;
  }
  
  .testimonials .testimonial-item {
    text-align: center;
   
  }
  
  .testimonial-item{
    border: 0.4px solid #cececeb7;
    padding: 2rem 0 0 0;
    border-radius: 10px;
    box-shadow: 0px 10px 8px #e2e2e24f;
  }
  .testimonials .testimonial-item .testimonial-img {
    width: 70px;
    margin-left: 2rem;

    border-radius: 50%;
    border: 6px solid color-mix(in srgb, var(--default-color), transparent 85%);
   
  }
  
  .testimonials .testimonial-item h3 {
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0 5px 0;
  }
  
  .testimonials .testimonial-item h4 {
    font-size: 14px;
    margin: 0 0 15px 0;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
  }
  
  .testimonials .testimonial-item .stars {
    margin-bottom: 15px;
  }
  
  .testimonials .testimonial-item .stars i {
    color: #ffc107;
    margin: 0 1px;
  }
  
  .testimonials .testimonial-item .quote-icon-left,
  .testimonials .testimonial-item .quote-icon-right {
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    font-size: 26px;
    line-height: 0;
  }
  
  .testimonials .testimonial-item .quote-icon-left {
    display: inline-block;
    left: -5px;
    position: relative;
  }
  
  .testimonials .testimonial-item .quote-icon-right {
    display: inline-block;
    right: -5px;
    position: relative;
    top: 10px;
    transform: scale(-1, -1);
  }
  
  .testimonials .testimonial-item p {
    font-style: italic;
    font-size: 18px;
    color: var(--heading-color);
    margin: 0 auto 15px auto;
  }
  
  .testimonials .swiper-wrapper {
    height: auto;
    
  }
  
  .testimonials .swiper-pagination {
    margin-top: 20px;
    position: relative;
  }
  
  .testimonials .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: color-mix(in srgb, var(--default-color), transparent 50%);
    opacity: 0.5;
  }
  
  .testimonials .swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--default-color);
    opacity: 1;
  }
  
  @media (min-width: 992px) {
    .testimonials .testimonial-item p {
      width: 80%;
    
    }
  }

  /*--------------------------------------------------------------
  # Faq Section
  --------------------------------------------------------------*/
  .faq .faq-container {
    margin-top: 15px;
  }
  
  .faq .faq-container .faq-item {
    position: relative;
    padding: 20px;
    margin-bottom: 20px;
    background-color: color-mix(in srgb, var(--default-color), transparent 96%);
    overflow: hidden;
    transition: 0.3s;
  }
  
  .faq .faq-container .faq-item:last-child {
    margin-bottom: 0;
  }
  
  .faq .faq-container .faq-item h3 {
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    margin: 0 30px 0 32px;
    transition: 0.3s;
    cursor: pointer;
  }
  
  .faq .faq-container .faq-item h3 span {
    color: var(--accent-color);
    padding-right: 5px;
  }
  
  .faq .faq-container .faq-item h3:hover {
    color: var(--accent-color);
  }
  
  .faq .faq-container .faq-item .faq-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: 0.3s ease-in-out;
    visibility: hidden;
    opacity: 0;
  }
  
  .faq .faq-container .faq-item .faq-content p {
    margin-bottom: 0;
    overflow: hidden;
  }
  
  .faq .faq-container .faq-item .faq-icon {
    position: absolute;
    top: 22px;
    left: 20px;
    font-size: 20px;
    line-height: 0;
    transition: 0.3s;
    color: var(--accent-color);
  }
  
  .faq .faq-container .faq-item .faq-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 16px;
    line-height: 0;
    transition: 0.3s;
    cursor: pointer;
  }
  
  .faq .faq-container .faq-item .faq-toggle:hover {
    color: var(--accent-color);
  }
  
  .faq .faq-container .faq-active {
    background-color: transparent;
    transition: 0.3s;
    
    border: 0.3px solid #e0e0e0;
  }
  
  
  .faq .faq-container .faq-active h3:hover,
  .faq .faq-container .faq-active .faq-toggle,
  .faq .faq-container .faq-active .faq-icon,
  .faq .faq-container .faq-active .faq-content {
    color: var(--heading-color);
  }
  .faq .faq-container .faq-active h3{
    color: #D3040C ;
  }
  
  .faq .faq-container .faq-active .faq-content {
    grid-template-rows: 1fr;
    visibility: visible;
    opacity: 1;
    padding-top: 10px;
  }
  
  .faq .faq-container .faq-active .faq-toggle {
    transform: rotate(90deg);
  }
  .iti {
    width: 100%;
    margin: 10px 0;
  }
 
  .iti input,
  .iti .iti__country-list {
    /* width: 100% !important; */
    box-sizing: border-box;
  }
  
  .iti .iti__flag-container {
    height: 100%;
  }
  /*--------------------------------------------------------------
  # Stats Section
  --------------------------------------------------------------*/
  .stats .stats-item {
    padding: 30px;
    width: 100%;
  }
  
  .stats .stats-item span {
    color: var(--heading-color);
    font-size: 48px;
    display: block;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
  }
  
  .stats .stats-item span:after {
    content: "";
    position: absolute;
    display: block;
    width: 25px;
    height: 3px;
    background: var(--accent-color);
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  
  .stats .stats-item p {
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    padding: 0;
    margin: 0;
    font-family: var(--heading-font);
    font-weight: 500;
  }
  
  /*--------------------------------------------------------------
  # Team Section
  --------------------------------------------------------------*/
  .team .member {
    background-color: var(--surface-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    text-align: center;
    margin-bottom: 20px;
  }
  
  .team .member img {
    margin: -1px -1px 30px -1px;
  }
  
  .team .member .member-content {
    padding: 0 20px 30px 20px;
  }
  
  .team .member h4 {
    font-weight: 700;
    margin-bottom: 2px;
    font-size: 18px;
  }
  
  .team .member span {
    font-style: italic;
    display: block;
    font-size: 13px;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
  }
  
  .team .member p {
    padding-top: 10px;
    font-size: 14px;
    font-style: italic;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
  }
  
  .team .member .social {
    margin-top: 15px;
  }
  
  .team .member .social a {
    color: color-mix(in srgb, var(--default-color), transparent 60%);
    transition: 0.3s;
  }
  
  .team .member .social a:hover {
    color: var(--accent-color);
  }
  
  .team .member .social i {
    font-size: 18px;
    margin: 0 2px;
  }
  
  /*--------------------------------------------------------------
  # Service Details Section
  --------------------------------------------------------------*/
  .service-details .services-list {
    background-color: var(--surface-color);
    padding: 10px 30px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    margin-bottom: 20px;
  }
  
  .service-details .services-list a {
    display: block;
    line-height: 1;
    padding: 8px 0 8px 15px;
    border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
    margin: 20px 0;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    transition: 0.3s;
  }
  
  .service-details .services-list a.active {
    color: var(--heading-color);
    font-weight: 700;
    border-color: var(--accent-color);
  }
  
  .service-details .services-list a:hover {
    border-color: var(--accent-color);
  }
  
  .service-details .services-img {
    margin-bottom: 20px;
  }
  
  .service-details h3 {
    font-size: 26px;
    font-weight: 700;
  }
  
  .service-details h4 {
    font-size: 20px;
    font-weight: 700;
  }
  
  .service-details p {
    font-size: 15px;
  }
  
  .service-details ul {
    list-style: none;
    padding: 0;
    font-size: 15px;
  }
  
  .service-details ul li {
    padding: 5px 0;
    display: flex;
    align-items: center;
  }
  
  .service-details ul i {
    font-size: 20px;
    margin-right: 8px;
    color: var(--accent-color);
  }
  
  /*--------------------------------------------------------------
  # Alt Pricing Section
  --------------------------------------------------------------*/
  .alt-pricing .pricing-item {
    background-color: var(--surface-color);
    box-shadow: 0 3px 20px -2px rgba(0, 0, 0, 0.1);
    padding-bottom: 30px;
    position: relative;
  }
  
  .alt-pricing .pricing-item h3 {
    font-weight: 700;
    margin-bottom: 0;
    font-size: 24px;
  }
  
  .alt-pricing .pricing-item h4 {
    font-size: 48px;
    color: var(--accent-color);
    font-weight: 400;
    font-family: var(--heading-font);
    margin-bottom: 25px;
    text-align: center;
  }
  
  .alt-pricing .pricing-item h4 sup {
    font-size: 28px;
  }
  
  .alt-pricing .pricing-item h4 span {
    color: color-mix(in srgb, var(--default-color), transparent 60%);
    font-size: 18px;
  }
  
  .alt-pricing .pricing-item ul {
    padding: 20px 0;
    list-style: none;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    text-align: left;
    line-height: 20px;
  }
  
  .alt-pricing .pricing-item ul li {
    padding-top: 15px;
    display: flex;
    align-items: center;
  }
  
  .alt-pricing .pricing-item ul i {
    color: #059652;
    font-size: 24px;
    padding-right: 3px;
  }
  
  .alt-pricing .pricing-item ul .na {
    color: color-mix(in srgb, var(--default-color), transparent 60%);
  }
  
  .alt-pricing .pricing-item ul .na i {
    color: color-mix(in srgb, var(--default-color), transparent 60%);
  }
  
  .alt-pricing .pricing-item ul .na span {
    text-decoration: line-through;
  }
  
  .alt-pricing .buy-btn {
    color: var(--contrast-color);
    background-color: var(--accent-color);
    border: 2px solid var(--accent-color);
    display: inline-block;
    padding: 12px 40px;
    border-radius: 4px;
    transition: none;
    font-size: 16px;
    font-weight: 500;
    transition: 0.3s;
    font-family: var(--heading-font);
  }
  
  .alt-pricing .buy-btn:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 20%);
  }
  
  .alt-pricing .featured {
    background: var(--accent-color);
  }
  
  .alt-pricing .featured h3,
  .alt-pricing .featured h4,
  .alt-pricing .featured h4 span,
  .alt-pricing .featured ul,
  .alt-pricing .featured ul .na,
  .alt-pricing .featured ul i,
  .alt-pricing .featured ul .na i {
    color: var(--contrast-color);
  }
  
  .alt-pricing .featured .buy-btn {
    background: var(--accent-color);
    color: var(--contrast-color);
    border-color: var(--contrast-color);
  }
  
  .alt-pricing .featured .buy-btn:hover {
    background: color-mix(in srgb, var(--accent-color) 90%, black 15%);
    color: var(--contrast-color);
  }
  
  /*--------------------------------------------------------------
  # Contact Section
  --------------------------------------------------------------*/
  .contact .info-item+.info-item {
    margin-top: 18px;
  }
  .contact .bg-gradient-overlay {
    position: relative;
    background-image: url('panelslayout/website/assets/images/banners/contact-banner.png');
    background-size: cover;
    background-position: center 85%;
    background-repeat: no-repeat;
    overflow: hidden;
  }
  
  .contact .bg-gradient-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    z-index: 1;
  }
  
  .contact .bg-gradient-overlay > * {
    position: relative;
    z-index: 2;
  }
  
  .contact-container {
    margin-top: -5rem;
    padding: 5rem 5rem;
    background: #fff;
    border: 0.5px solid #80808062;
    border-radius: 12px !important;
    box-shadow: 0.3px 1px 4px #a5a5a539;
    z-index: 10;
    position: relative; /* Needed with z-index */
  }
  
  .contact .info-item i {
    color: var(--contrast-color);
    background: var(--accent-color);
    font-size: 20px;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
    margin-right: 15px;
  }
  

  
  .contact .info-item p {
    padding: 0;
    margin-bottom: 0;
    color: var(--contrast-color);
    font-size: 14px;
  }
  
  .contact .php-email-form {
    height: 100%;
  }
  
  .contact .php-email-form input[type=tel],
  .contact .php-email-form input[type=text],
  .contact .php-email-form input[type=email],
  .contact .php-email-form textarea {
    font-size: 14px;
    padding: 10px 15px;
    box-shadow: none;
    border-radius: 0;
    color: var(--default-color);
    background-color: color-mix(in srgb, var(--background-color), transparent 50%);
    border-color: color-mix(in srgb, var(--default-color), transparent 80%);
  }
  
  .contact .php-email-form input[type=tel]:focus,
  .contact .php-email-form input[type=text]:focus,
  .contact .php-email-form input[type=email]:focus,
  .contact .php-email-form textarea:focus {
    border-color: var(--accent-color);
  }
  
  .contact .php-email-form input[type=tel]::placeholder,
  .contact .php-email-form input[type=text]::placeholder,
  .contact .php-email-form input[type=email]::placeholder,
  .contact .php-email-form textarea::placeholder {
    color: color-mix(in srgb, var(--default-color), transparent 60%);
  }
  
  .contact .php-email-form button[type=submit] {
    color: var(--contrast-color);
    background: var(--accent-color);
    border: 0;
    padding: 10px 30px;
    transition: 0.4s;
    border-radius: 4px;
  }
  /* .contact button:hover{
    color: var(--accent-color) !important;
    background: transparent;
   
  } */
  
  .contact .php-email-form button[type=submit]:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 20%);
  }
  
  /*--------------------------------------------------------------
  # Get A Quote Section
  --------------------------------------------------------------*/
  .get-a-quote .quote-bg {
    min-height: 500px;
    background-size: cover;
    background-position: center;
  }
  
  .get-a-quote .php-email-form {
    background: color-mix(in srgb, var(--default-color), transparent 97%);
    padding: 30px;
    height: 100%;
  }
  
  @media (max-width: 575px) {
    .get-a-quote .php-email-form {
      padding: 20px;
    }
    .testimonial-item p{
      font-size: 14px !important;
    }
      
  .contact-container {
    margin-top: 0.5rem;
    padding: 20px ;
    border-radius: unset;
    border: unset;
    box-shadow: unset;
  }
  .contact-text-hide{
    display: block !important;
  }
  }
  .contact-text-hide{
    display: none;
  }
  .get-a-quote .php-email-form h3 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .get-a-quote .php-email-form h4 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 20px 0 0 0;
  }
  
  .get-a-quote .php-email-form p {
    font-size: 14px;
    margin-bottom: 20px;
  }
  
  .get-a-quote .php-email-form input[type=text],
  .get-a-quote .php-email-form input[type=email],
  .get-a-quote .php-email-form textarea {
    font-size: 14px;
    padding: 10px 15px;
    box-shadow: none;
    border-radius: 0;
    color: var(--default-color);
    background-color: color-mix(in srgb, var(--background-color), transparent 20%);
    border-color: color-mix(in srgb, var(--default-color), transparent 80%);
  }
  
  .get-a-quote .php-email-form input[type=text]:focus,
  .get-a-quote .php-email-form input[type=email]:focus,
  .get-a-quote .php-email-form textarea:focus {
    border-color: var(--accent-color);
  }
  
  .get-a-quote .php-email-form input[type=text]::placeholder,
  .get-a-quote .php-email-form input[type=email]::placeholder,
  .get-a-quote .php-email-form textarea::placeholder {
    color: color-mix(in srgb, var(--default-color), transparent 70%);
  }
  
  .get-a-quote .php-email-form button[type=submit] {
    color: var(--contrast-color);
    background: var(--accent-color);
    border: 0;
    padding: 10px 30px;
    transition: 0.4s;
    border-radius: 4px;
  }
  
  .get-a-quote .php-email-form button[type=submit]:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 20%);
  }
  ul.pagination .active > .page-link {
    background-color: #ed1c24;
    border-color: #ed1c24;
    color: #ffff !important;
}
ul.pagination .page-link {
    color: #ed1c24 !important;
}
  /*--------------------------------------------------------------
  # Starter Section Section
  --------------------------------------------------------------*/
  .starter-section {
    /* Add your styles here */
  }
  /* .car-details-img{
    max-height: 480px;
    width: 750px;

  } */

/* =================================== */
/*  Stepper Component Styles
/* =================================== */

.sticky-stepper {
    position: sticky;
    top: 100px; /* parent ke andar scroll karte waqt ye yahi par chipka rahega */
    z-index: 9999;
}
.stepper-wrapper {
    margin-bottom: 2rem;
    padding: 3rem 0 3rem 0;
  z-index: 1;
}

.stepper-list {
    display: flex;
    align-items: center;
}

.stepper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 150px; /* Adjust width as needed */
    position: relative;
    transition: all 0.3s ease;
}

.stepper-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color:#e0e0e0;
    border: 2px solid var(--bs-secondary-bg-subtle);
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 0.88rem;
    font-weight: bold;
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
}

.stepper-label {
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
    transition: all 0.3s ease;
}

.stepper-line {
    flex-grow: 1;
    height: 2px;
   background-color: #e0e0e0; 
    margin: 0 -1rem; /* Overlap slightly with items */
    position: relative;
    top: -1.2rem; /* Align with middle of circle */
}
.stepper-progress {
    /* Position the progress bar on top of the grey line */
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    /* Start with 0 width */
    width: 0; 
    /* Give it a nice color, like your success color */
    background-color: var(--bs-success); 
    /* Add a smooth transition for the width change */
    transition: width 0.4s ease-in-out; 
}
/* --- STATES --- */

/* ACTIVE State */
.stepper-item.active .stepper-circle {
    border-color: var(--bs-primary);
    background-color:#D3040C;
    color: #fff;
}

.stepper-item.active .stepper-label {
    color: #D3040C;
    font-weight: 600;
}

/* COMPLETE State (for past steps) */
.stepper-item.complete .stepper-circle {
border-color: var(--bs-success);
    background-color: var(--bs-success);
    color: transparent; /* <--- THE FIX! This hides the number text. */
    /* SVG Checkmark Icon */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 8l4 4 8-8'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
}

.stepper-item.complete {
    cursor: pointer; /* Indicate it's clickable */
}

.stepper-item.complete:hover .stepper-label {
    color: var(--bs-primary); /* Add hover effect to show it's a link */
}

.stepper-item.complete .stepper-label {
    color: var(--bs-body-color);
}
/* Force stepper to scroll on smaller screens */
@media (max-width: 768px) {
    .stepper-wrapper {
        max-width: 100%; /* Ensure it doesn't stretch full width */
        overflow-x: auto; /* Enable horizontal scroll */
        white-space: nowrap; /* Prevent wrapping */
    }

    .stepper-list {
        flex-wrap: nowrap; /* Prevent items from wrapping */
    }

    .stepper-item {
        flex: 0 0 auto; /* Prevent shrinking */
        min-width: 120px; /* Ensure each step has enough width */
    }

    .stepper-line {
        flex: 0 0 50px; /* Fixed width for stepper lines */
    }
}

/*country dropdown*/
#countryDropdownMenu{
  max-height: 250px;
  overflow-y: scroll;
 
}


   

        .terms-header {
            background-color: #212529; /* Mywheelz Brand Blue */
            color: white;
            padding: 4rem 1rem;
            text-align: center;
        }

        .terms-header h1 {
            font-weight: 700;
        }
        
        .terms-header .logo {
            font-weight: 700;
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .toc-sidebar {
            position: sticky;
           top: 100px; /* Adjust to SHRUNKEN header height + 20px */
    max-height: calc(100vh - 120px); /* Adjust '120px' to be 'top' value + 20px */
    overflow-y: auto;
        }

        .toc-sidebar .nav-link {
            color: #6c757d;
            padding: 0.5rem 1rem;
            border-left: 3px solid transparent;
            font-size: 0.95rem;
        }

        .toc-sidebar .nav-link:hover {
            color: #D3040C;
            background-color: #e9ecef;
        }
        
        /* You would use JS to add the .active class on scroll */
        .toc-sidebar .nav-link.active {
            color: #D3040C;
            font-weight: 600;
            border-left-color: #D3040C;
        }
        
        .term-section {
            background: #ffffff;
            border: 1px solid #dee2e6;
            border-radius: 0.5rem;
            padding: 1.5rem 2rem;
            margin-bottom: 2rem;
            scroll-margin: 80px;
        }

        .term-section h3 {
            font-size: 1.5rem;
            font-weight: 600;
            color: #212529;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
        }
        
        .term-section h3 .bi {
            color: #D3040C;
            margin-right: 0.75rem;
            font-size: 1.8rem;
        }
        
        .term-section ul {
            padding-left: 1.25rem;
            line-height: 1.8;
        }

        .term-section ul li::marker {
            color: #D3040C;
        }
        
        .action-box {
            background-color: #ffffff;
            border: 1px solid #dee2e6;
            border-radius: 0.5rem;
            padding: 2rem;
        }