@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;900&display=swap");
@import url(component.min.css);
@import url(layout.min.css);
:root {
    --main: #B22222;
    --gray: #f5f5f5;
    --black: #192026;
    --white: #FFFFFF;
    --red: #d41d22;
    --yellow: #e2b239;
    --green: #82b452;
}

::selection {
    background: var(--main);
    color: var(--black);
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: rgb(0 0 0 / 0%);
}

::-webkit-scrollbar-thumb {
    background: rgb(0 0 0 / 0.5);
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(0 0 0 / 0.8);
}


html,
body {
    height: 100%;
}

html {
    font-size: 16px;
    line-height: 1;
}

body {
    background: var(--white);
    color: var(--black);
    font-family: 'Mulish', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
}

a,
button {
    text-decoration: none;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

a:hover,
button:hover {
    text-decoration: none;
}

p {
    font-size: 1rem;
}

img {
    max-width: 100%;
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: 'Taviraj', serif;
}

h2 {
    font-size: 3rem;
    font-weight: 500;
}
h3 {
    font-size: 2.25rem;
}

h4 {}
section {
    padding: 5rem 0;
}
.dark * {
    color: var(--white);
}
/* Begin: Main Slider CSS */
.main-slider {
    position: relative;
}
.innerBan {
    background: url(../images/banner/5.webp) center/cover fixed no-repeat;
    height: 40rem;
    display: flex;
    align-items: center;
    position: relative;
}
.innerBan:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(136deg, #606060, #000 30%);
    z-index: 1;
    opacity: 0.5;
}
.innerBan .container {
    position: relative;
    z-index: 2;
}
.main-slider .carousel-item {
    background: linear-gradient(136deg, #606060, #000 30%);
}
.main-slider .carousel-item > img {
    opacity: 0.3;
    transition: ease all 40s;
    transform: scale(1);
}
.main-slider .carousel-item.active > img {
    transform: scale(1.3);
    transition: ease all 40s;
}
.main-slider .carousel-indicators,
.leftOfferCarousel .slick-dots,
.rightOfferCarousel .slick-dots,
.proDetlCarousel .slick-dots,
.relatedPRoCarousel .slick-dots {
    margin: 0;
    left: auto;
    right: 5rem;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 1rem;
}
.leftOfferCarousel .slick-dots,
.rightOfferCarousel .slick-dots,
.proDetlCarousel .slick-dots,
.relatedPRoCarousel .slick-dots {
    top: auto;
    bottom: 4px;           /* -2rem change by Ehtisham*/
    left: 50%;
    transform: translate(-50%, 0);
}
.proDetlCarousel .slick-dots{
    bottom: -3rem;
    /*bottom: -3rem;*/
}

.relatedPRoCarousel .slick-dots{
    /*bottom: 4rem;*/
    bottom: -3rem;
}

.main-slider .carousel-indicators li,
.leftOfferCarousel .slick-dots li,
.rightOfferCarousel .slick-dots li,
.proDetlCarousel .slick-dots li,
.relatedPRoCarousel .slick-dots li {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 100px;
    border: 1px solid transparent;
    background: transparent;
    margin: 0;
    opacity: 1;
    transform: scale(1);
    position: relative;
}
.leftOfferCarousel .slick-dots li,
.rightOfferCarousel .slick-dots li,
.proDetlCarousel .slick-dots li,
.relatedPRoCarousel .slick-dots li{
    margin: 0 3px;
}
.leftOfferCarousel .slick-dots li,
.rightOfferCarousel .slick-dots li.slick-active,
.relatedPRoCarousel .slick-dots li {
    border-color: var(--white);
}
.rightOfferCarousel .slick-dots li,
.proDetlCarousel .slick-dots li {
    border-color: var(--black);
}
.main-slider .carousel-indicators li.active,
.leftOfferCarousel .slick-dots li.slick-active,
.proDetlCarousel .slick-dots li.slick-active,
.relatedPRoCarousel .slick-dots li.slick-active {
    border-color: var(--main);
}
.main-slider .carousel-indicators li:before,
.leftOfferCarousel .slick-dots li:before,
.rightOfferCarousel .slick-dots li:before,
.proDetlCarousel .slick-dots li:before,
.relatedPRoCarousel .slick-dots li:before {
    content: '';
    width: 6px;
    height: 6px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--white);
    border-radius: 30px;
}
.main-slider .carousel-indicators li.active:before,
.leftOfferCarousel .slick-dots li.slick-active:before,
.proDetlCarousel .slick-dots li.slick-active:before,
.relatedPRoCarousel .slick-dots li.slick-active:before {
    background: var(--main);
}
.rightOfferCarousel .slick-dots li:before,
.proDetlCarousel .slick-dots li:before {
    background: var(--black);
}
.rightOfferCarousel .slick-dots li.slick-active:before {
    background: var(--white);
}
.rightOfferCarousel .slick-dots li button:before,
.leftOfferCarousel .slick-dots li button:before,
.proDetlCarousel .slick-dots li button:before,
.relatedPRoCarousel .slick-dots li button:before {
    content: none;
}
.main-slider .carousel-caption {
    padding: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: ease all 0.5s;
}
.main-slider .active .carousel-caption {
    top: 0;
    opacity: 1;
}
.main-slider h2, .innerBan h2 {
    font-size: 7.5rem;
    line-height: 1;
}
.innerBan h2 {
    color: var(--white);
}
.main-slider h2 span, .innerBan h2 span {
    color: var(--main);
    font-size: 4rem;
    display: block;
}
.main-slider h3 {
    font-family: 'Taviraj', serif;
    font-size: 2.5rem;
    font-style: italic;
    font-weight: 300;
}
/* END: Main Slider CSS */

/* Begin: Slider Service */
.rideService {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    background-color: rgb(25 32 38 / 90%);
    padding: 3.125rem 0;
}
.rideService .thumb {
    padding: 1rem 2rem;
    border-right: 1px dashed rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    gap: 2rem;
}
.rideService .thumb h4 {
    font-size: 1.5rem;
    font-family: 'Taviraj', serif;
    font-weight: 500;
    color: var(--main);
}
.rideService .thumb p {
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}
/* END: Slider Service */

/* Begin: Why Us CSS */
.whySec {
    background: url(../images/mix/map.webp) 10rem 5rem/50rem no-repeat;
}
.productDetails {
    background: url(../images/mix/map.webp) center right/50rem no-repeat;
}
.whySec h2 {
    font-size: 2.8rem;
    line-height: 1;
}
.whySec h2 span {
    font-size: 1.25rem;
    display: block;
    color: var(--main);
    font-weight: 600;
}
/* END: Why Us CSS */

/* Begin: Stock Cars CSS */
.stockCarSec {
    background: var(--black);
}
.proThumb {
    border: 2px dashed rgb(255 255 255 / 30%);
    padding: 1rem;
    margin-top: 1.5rem;
}
.proThumb figure {
    margin: 0;
    height: 14rem;
}
.proThumb figure img {
    height: 100%;
    object-fit: cover;
}
.proThumb .content {
    padding: 1.5rem 0 0;
}
.proThumb .fetures {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.proThumb .fetures li {
    flex: 0 0 30%;
    border: 1px solid rgb(255 255 255 / 30%);
    padding: 10px;
    text-align: center;
}
.stockCarSec.bg-white .proThumb,
.proThumb .fetures li {
    border-color: #e5e5e5;
}
.proThumb .fetures li i.lte-icon {
    font-size: 1.75rem;
}
.proThumb .fetures li h5 {
    margin: 0;
    font-family: 'Mulish', sans-serif;
    font-size: 1rem;
}
.proThumb .price {
    padding: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.proThumb .price h4 {
    margin: 0;
}
.proThumb .price h4 span {
    font-size: 2rem;
    color: var(--main);
}
.proThumb .themeBtn {
    width: 100%;
    text-align: center;
}
.proThumb .themeBtn:hover {
    box-shadow: 0 0 20px #fff2;
}
/* END: Stock Cars CSS */
.aboutSec figure {
    margin-left: -8rem;
    margin-bottom: 0;
}
/* Begin: Offer Carousel CSS */
.offerSec {
    padding: 0;        /* 3rem 0 change by Ehtisham*/
    background: var(--main) url(../images/banner/bg1.webp) top left/50% no-repeat;
    position: relative;
}
.offerSec:before {
    content: '';
    position: absolute;
    inset: 0;
    width: 50%;
    background: var(--black);
    opacity: 0.95;
}
.offerSec .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.offerSec .item img {
    width: 20rem;
}
.offerSec .item .content {
    width: calc(100% - 25rem);
}
.offerSec .leftOfferCarousel, .offerSec .rightOfferCarousel {
    margin: 0;
}
.offerSec .leftOfferCarousel img, .offerSec .rightOfferCarousel img {
    width: 100%;
    height: 26rem;
    object-fit: cover;
}
.offerSec .leftOfferCarousel :is(h4, p) {
    color: var(--white);
}
/* END: Offer Carousel CSS */

/* Begin: Popular Brand CSS */
.popularBrandSec {
    background: var(--gray);
    padding: 2rem 0;
}
.popularBrandsCarousel .item img {
    width: 8rem;
    margin: 0 auto;
}
/* END: Popular Brand CSS */

/* Begin: Procedure CSS */
.procedureSec, .requestCar {
    background: url(../images/mix/map.webp) top left/auto no-repeat;
}
.procedureThumb {
    background: var(--black);
    padding: 2.5rem;
    margin-bottom: 1.5rem;
    min-height: 22rem;
    transition: ease all 0.5s;
}
.procedureThumb:hover {
    transform: scale(1.05) skewX(-3deg);
    box-shadow: -4px 4px 0px 2px var(--main);
}
.procedureThumb h4 {
    color: var(--main);
    margin: 1rem 0;
    font-size: 1.75rem;
    line-height: 1;
}
.procedureThumb p {
    color: var(--white);
    margin: 0;
    font-size: 1.125rem;
}
/* END: Procedure CSS */


/* Begin: Request a car */
.formStyle, .dashboardWrap {
    background: var(--white);
    box-shadow: 0 0 20px #0001;
    padding: 3rem 2rem;
    border-radius: 6px;
}
.dashboardWrap {
    padding: 1rem 0.5rem;
}
.formStyle .form-control {
    height: 3.5rem;
    margin-bottom: 1.25rem;
    border-color: #0001;
    font-size: 14px;
}
.formStyle textarea.form-control {
    height: 15rem;
}
.formStyle .form-control::placeholder {
    font-size: 14px;
}
.formStyle .iti {
    position: absolute;
}
.iti__selected-flag {
    border-radius: 6px 0 0 6px;
}
.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
    margin: 0;
    height: 3.5rem;
    background: #fff;
}
/* END: Request a car */

/* Begin: Reviews CSS */
.reviewThumb {
    border: 2px dashed rgb(0 0 0 / 10%);
    padding: 1rem;
    margin-top: 1.5rem;
}
.reviewThumb figure {
    margin: 0;
}
.reviewThumb .userDetl img {
    width: 4rem;
}
.reviewThumb .userDetl {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem 0;
}
.reviewThumb .userDetl h4 {
    margin: 0;
}
.productDetails .table tr th,
.productDetails .table tr td {
    vertical-align: middle;
    padding: 8px 1rem;
    font-size: 1rem;
}
.productDetails .table tr th {
    background: var(--black);
    color: var(--white);
    font-weight: normal;
}
.productDetails .table tr td {
    background: var(--white);
    color: var(--black);
}
/* END: Reviews CSS */

/* Begin: Dashboard CSS */
.loginSec {
    background: var(--black) url(../images/mix/footer-map.png) center/contain no-repeat;
    height: 100%;
    display: flex;
    align-items: center;
}
.loginSec .loginLogo img {
    margin: 0 auto 1rem;
    display: block;
}
.dashboardBan {
    background: var(--black);
    height: 15rem;
    align-items: flex-end;
    padding-bottom: 1rem;
}
.dashboardBan h2 {
    margin: 0;
    line-height: 0.9;
    font-size: 3rem;
}
.dashboard {
    padding: 3rem 0;
    background: url(../images/mix/map.webp) top left no-repeat;
}
.dashboard .sidebar {
    background: var(--black);
    border-radius: 10px;
    padding: 10px 0;
}
.dashboard .sidebar a {
    display: block;
    padding: 7px 1.5rem;
    color: var(--white);
    opacity: 0.8;
    font-size: 14px;
}
.dashboard .sidebar a:hover {
    background: var(--main);
    opacity: 1;
    color: var(--black);
}
.carFunds .formStyle {
    align-items: center;
}
.carFunds .formStyle .form-control, .carFunds .formStyle h6 {
    margin: 0;
}
.table {
    border: 0;
}
.table thead tr th {
    background: var(--black);
    color: var(--white);
    padding: 1rem 5px;
    font-size: 14px;
}
.table tbody tr td {
    font-size: 13px;
    padding: 1rem 5px;
}
.table-striped>tbody>tr:nth-of-type(even)>* {
    background: #1920261f;
    color: var(--black);
}
.totalSummary {
    display: flex;
    align-items: center;
    margin: 0 -0.8rem 1rem;
    box-shadow: 0 0 20px #0001;
}
.totalSummary .cell {
    background: var(--main);
    padding: 2rem;
    flex: 0 0 33.33%;
}
.totalSummary .cell:last-child {
    background: var(--black);
    color: var(--white);
    border-radius: 0 6px 6px 0;
}
.totalSummary .cell:first-child {
    border-radius: 6px 0 0 6px;
}
.totalSummary .cell h2 {
    margin: 0;
    line-height: 1;
}
.totalSummary .cell h4 {
    font-size: 1.125rem;
    font-weight: 600;
}
.purchasedVehicleWrap {
    display: flex;
    gap: 1rem;
    flex-flow: row wrap;
    justify-content: space-between;
}
.purchasedVehicleWrap .cell {
    flex: 0 0 48%;
    background: #f3f3f3;
    padding: 1rem;
    border-radius: 5px;
}
.purchasedVehicleWrap h4 {
    color: var(--black);
    font-size: 1.25rem;
}
.purchasedVehicleWrap a {
    text-decoration: underline;
    color: var(--black);
    font-weight: 600;
}
.purchasedVehicleWrap strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
    display: flex;
    justify-content: space-between;
}
.purchasedVehicleWrap strong span {
    font-weight: 100;
    font-size: 14px;
}
.purchasedVehicleWrap .cell.documents {
    flex: 100%;
    background: var(--black);
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.purchasedVehicleWrap .cell.documents h4 {
    color: var(--main);
    width: 100%;
}
.purchasedVehicleWrap .cell.documents :is(strong, a) {
    color: var(--white);
}
.purchasedVehicleWrap .cell.documents strong {
    display: inline-flex;
    font-weight: 100;
}
.purchasedVehicleWrap .cell.documents a {
    margin-left: 10px;
    font-weight: 100;
}
/* END: Dashboard CSS */



.disabled {
    background-color: black;
    color: white;
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}
.tablelastelementbox{
    width:50px;
}

.stockcartitle{
    height: 68px;
}

.tablenowrap{
    white-space: nowrap;
}

.scrollable-paragraph {
    height: 160px; /* Set the desired height */
    overflow: auto; /* Add scrollbars when content overflows the defined height */
}