.theme-light{
    --tw-bg-opacity:#f3f4f6;
    --btn-block-text:#4b5563;
    --carmodel-price-textcolor:#111827;
    --car-model-row_block-hover:#d1d5db;
    --btn-block-hover:#f3f4f6;
    --score-text-color:#9ca3af;

    --specifications-detls-bg:#ffffff;
    --modal-car-specif-border:#e5e7eb;

    --lowertext-color:#374151;
    --car-model-totprice-bg:#f3f4f6;

    --car-milage-bg:#ffffff;

    --specification-table-td-border:#e5e7eb;
    --varient-btn-color:#6b7280;
    --filter-text:#4b5563;
    --filter-text-bg:#f9fafb;
    --dropdownlist-box:#ffffff;
    --numbers-bg:#e5e7eb;
    --numbers-bg-hover:#d1d5db;
    --disable-btn-color:#9ca3af;
    --more-citye-name-color:#111827;
    --more-citye-name-color-hover:#ffffff;
    --close-popup-color:#4b5563;
    --close-popup-colorbg-hover:#f3f4f6;
    --close-popup-color-hover:#111827;
    --hatchback-link-color:#6b7280;
    --exshowroom-color:#6b7280;
    --hatchback-moredtls-bg:#f9fafb;
    --hatchback-moredtls-border:#e5e7eb;
    --hatchback-moredtls-icon:#4b5563;
    --moredtls-text-color:#4b5563;
    --hatchback-moredtls-bg-hover:#f3f4f6;
    --ds-allvarients-block:#f9fafb;
    --view-all-varients:#111827;
    --hatchback-popup-box:#ffffff;
    --hatchback-popup-box-header:#f9fafb;
    --hatchback-header-lt:#6b7280;
    --varient-head:#111827;
    --hb-car-model:#1f2937;
    --hb-car-price:#111827;
    --hb-car-gastype:#c2410c;
    --hb-car-gastype-bg:#ffedd5;
    --cng-bg:#dcfce7;
    --cng-color:#15803d;
    --diesel-bg:#dbeafe;
    --diesel-color:#1d4ed8;
    --ds-mvp-cars-all-link:#4b5563;
}
.theme-dark{
    --tw-bg-opacity:#1f2937;
    --btn-block-text:#9ca3af;
    --carmodel-price-textcolor:#ffffff;
    --car-model-row_block-hover:#4b5563;
    --btn-block-hover:#374151;
    --score-text-color:#6b7280;

    --specifications-detls-bg:#1f293780;
    --modal-car-specif-border:#37415180;

    --lowertext-color:#d1d5db;
    --car-model-totprice-bg:#3741514d;

    --car-milage-bg:#1f2937;

    --specification-table-td-border:#374151;
    --varient-btn-color:#9ca3af;
    --filter-text:#6b7280;
    --filter-text-bg:#1f2937cc;
    --dropdownlist-box:#1f2937;
    --numbers-bg:#1f2937;
    --numbers-bg-hover:#374151;
    --disable-btn-color:#4b5563;
    --more-citye-name-color:#e5e7eb;
    --more-citye-name-color-hover:#ffffff;
    --close-popup-color:#9ca3af;
    --close-popup-colorbg-hover:#374151;
    --close-popup-color-hover:#ffffff;
    --hatchback-link-color:#9ca3af;
    --exshowroom-color:#6b7280;
    --hatchback-moredtls-bg:#37415199;
    --hatchback-moredtls-border:#4b556380;
    --hatchback-moredtls-icon:#d1d5db;
    --moredtls-text-color:#9ca3af;
    --hatchback-moredtls-bg-hover:#374151;
    --ds-allvarients-block:#37415166;
    --view-all-varients:#f3f4f6;
    --hatchback-popup-box:#1f2937;
    --hatchback-popup-box-header:#11182766;
    --hatchback-header-lt:#9ca3af;
    --varient-head:#fff;
    --hb-car-model:#e5e7eb;
    --hb-car-price:#f3f4f6;
    --hb-car-gastype:#fb923c;
    --hb-car-gastype-bg:#7c2d1280;
    --cng-bg:#14532d80;
    --cng-color:#4ade80;
    --diesel-bg:#1e3a8a80;
    --diesel-color:#60a5fa;
    --ds-mvp-cars-all-link:#d1d5db;
}
*,
:before,
:after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style: ;
}
.carmodel-preview-container {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}
.carmodel-preview-car {
    grid-column: span 7 / span 7;
}
.carmodel-preview-cardetails {
    grid-column: span 5 / span 5;
}
.preview-cardetails {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.carmodel-preview-car {
    border-radius: 8px;
    overflow: hidden;
    background: var(--tw-bg-opacity);
}
.carmodel-preview-car img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.carmodel-style {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 8px;
    color: var(--btn-block-text);
}
.carmodel-price {
    font-size: 30px;
    line-height: 36px;
    margin-bottom: 4px;
    font-weight: 700;
    color: var(--carmodel-price-textcolor);
}
.carmodel-showroomp {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 20px;
    color: #6b7280;
}
.carmodel-car_rating {
    margin-bottom: 20px;
}
.carmodel-car_rating-flex {
    margin-bottom: 6px;
}
.rating-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.stars {
    display: flex;
    gap: 6px;
}
.stars svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #8a92a6;
    stroke-width: 1.6;
}
.score {
    font-size: 12px;
    line-height: 16px;
    color: var(--score-text-color);
}
.rate {
    font-size: 12px;
    line-height: 16px;
    color: var(--btn-block-text);
    font-weight: 500;
    margin-left: 4px;
    cursor: pointer;
}
.carmodel-car_rating a {
    transition-duration: 0.2s;
    color: #d1d5db;
    font-size: 12px;
    line-height: 16px;
}
.carmodel-car_rating a:hover {
    color: #6b7280;
}
.carmodel-moredtls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.btn-block {
    padding: 14px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    flex-direction: column;
    transition-duration: 0.2s;
    gap: 8px;
    transition-duration: 0.2s;
    background: var(--tw-bg-opacity);
    border: none;
    cursor: pointer;
    color: var(--btn-block-text);
}
.btn-block-span {
    color: var(--btn-block-text);
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}
.btn-block:hover {
    background: var(--btn-block-hover);
}
.section-header {
    margin-bottom: 32px !important;
}
/* .btn-block:focus{border: 2px solid #ef4444;outline-offset: 2px;outline: 2px solid transparent;} */
/* Car-Specifications-styles */
.modal-car-commontitle {
    font-size: 36px;
    line-height: 40px;
    margin-bottom: 24px;
    font-weight: 700;
    color: var(--carmodel-price-textcolor);
}
.modal-car-specifications-detls {
    background: var(--specifications-detls-bg);
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
.modal-car-specifications-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--specifications-detls-bg);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px 0px;
    border: 1px solid var(--modal-car-specif-border);
    border-bottom: none;
}
.modal-car-specif {
    padding: 24px;
    border-bottom: 1px solid var(--modal-car-specif-border);
    border-right: 1px solid var(--modal-car-specif-border);
}
.modal-car-specif-text {
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 8px;
}
.modal-car-specif-textd {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--carmodel-price-textcolor);
}
.modal-car-specif:nth-child(3n) {
    border-right: 0px;
}
/* Car-modeal-styles */
.car-model-row_block {
    transition-duration: 0.2s;
    padding: 24px;
    background: var(--specifications-detls-bg);
    border: 1px solid var(--modal-car-specif-border);
    border-radius: 12px;
    margin-bottom: 24px;
}
.car-model-row_block:hover {
    border: 1px solid var(--car-model-row_block-hover);
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.car-model-row_block:last-child {
    margin-bottom: 0px;
}
.car-model-details-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
}
.car-company-model {
    color: var(--carmodel-price-textcolor);
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
}
.car-company-model-moredetails {
    display: grid;
    margin-top: 20px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.model-moredetails-uppertext {
    color: #6b7280;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}
.model-moredetails-lowertext {
    color: var(--lowertext-color);
    font-size: 14px;
    line-height: 20px;
}
.car-model-price {
    justify-content: flex-end;
    display: flex;
    align-items: center;
}
.car-model-totprice {
    padding: 16px 24px;
    background: var(--car-model-totprice-bg);
    border-radius: 8px;
    color: #ef4444;
    font-size: 30px;
    line-height: 36px;
    font-weight: 700;
}
/* Car-milage-styles */
.car-milage-container,
.car-modelreview-container,
.car-modeldesign-container {
    margin: 32px 0px;
}
.car-milage-grid-block {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 24px;
    background: var(--car-milage-bg);
    border-radius: 8px;
    border: 1px solid var(--modal-car-specif-border);
}
.car-milage-uppertext {
    color: #6b7280;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    margin-bottom: 8px;
}
.car-milage-lowertext {
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    color: var(--carmodel-price-textcolor);
}
/* Car-modelreview-style */
.expert-reviewtext {
    color: var(--lowertext-color);
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    margin-bottom: 12px;
}
.expert-reviewteam {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    color: var(--btn-block-text);
}
.reviewteam-text {
    font-size: 14px;
    line-height: 20px;
}
.expert-review-car {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}
.expert-review-car-thumb {
    width: 600px;
    height: 338px;
    background: var(--tw-bg-opacity);
    border-radius: 12px;
    overflow: hidden;
}
.expert-review-car-thumb img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
/* car-impfeatures-style */
.modeldesign-content {
    color: var(--lowertext-color);
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 24px;
}
.car-impfeatures-points {
    margin-top: 24px;
}
.car-impfeatures-points ul {
    font-size: 16px;
    line-height: 24px;
    color: var(--lowertext-color);
}
.car-impfeatures-points ul li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.car-impfeatures-points ul li:last-child {
    margin-bottom: 0px;
}
.text-dot {
    color: #ef4444;
    margin-top: 4px;
}
.car-impfeatures-points ul li span {
}
/* car-brochures-style */
.car-brochures-block {
    background: var(--specifications-detls-bg);
    padding: 24px;
    border: 1px solid var(--modal-car-specif-border);
    border-radius: 12px;
    justify-content: space-between;
    display: flex;
    align-items: center;
}
.brochures-head {
    color: var(--carmodel-price-textcolor);
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    margin-bottom: 4px;
}
.brochures-desc {
    color: var(--btn-block-text);
    font-size: 14px;
    line-height: 20px;
}
.car-brochures-downloadbtn {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    cursor: pointer;
    background: #ef4444;
    border: none;
}
.car-brochures-downloadbtn:hover {
    background: #dc2626;
}
/* car-colours-style */
.car-colours-block {
    display: flex;
    gap: 16px;
    transition: transform 0.5s ease;
    will-change: transform;
}
.car-colours-col {
    width: 100%;
    flex: 0 0 200px;
    background: var(--specifications-detls-bg);
    text-align: center;
    border: 1px solid var(--modal-car-specif-border);
    border-radius: 12px;
    padding: 16px;
}
.car-colours-circle {
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 9999px;
    border: 1px solid #000;
}
.sizzred {
    background-color: rgb(220, 20, 60);
}
.magmagray {
    background-color: rgb(74, 74, 74);
}
.splendsilver {
    background-color: rgb(192, 192, 192);
}
.pearlwhite {
    background-color: rgb(248, 248, 255);
}
.orange {
    background: orange;
}
.blue {
    background: blue;
}
.black {
    background: #000;
}
.red {
    background: red;
}
.car-colours-text {
    color: var(--lowertext-color);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}
/* car-competitors-style */
.car-competitors-block {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.car-competitors-col {
    background: var(--specifications-detls-bg);
    border: 1px solid var(--modal-car-specif-border);
    transition-duration: 0.2s;
    border-radius: 12px;
    overflow: hidden;
}
.car-competitors-col:hover {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.car-competitors-topthumb {
    overflow: hidden;
}
.car-competitors-topthumb img {
    aspect-ratio: 600 / 338;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: auto;
}
.car-competitors-thumbinfo {
    padding: 20px;
}
.car-compet-name {
    color: var(--lowertext-color);
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    margin-bottom: 12px;
}
.car-rupee-icon,
.car-petrol-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.car-rupee-icon svg,
.car-petrol-icon svg {
    color: var(--btn-block-text);
}
.car-compet-moreinfo {
    color: var(--lowertext-color);
    font-size: 14px;
    line-height: 20px;
}
.car-petrol-icon {
    margin-bottom: 0px;
}

.modelreview-desc {
    color: var(--lowertext-color);
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 24px;
}

.car-video-thumb {
    position: relative;
    width: 600px;
    padding-bottom: 337.5px;
}
.car-video-thumb iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 8px;
}
/* Car-photos-style */
.car-photos-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.car-photos-col {
    background: var(--car-milage-bg);
    border-radius: 8px;
    overflow: hidden;
    transition-duration: 0.15s;
}
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow:
        var(--tw-ring-offset-shadow, 0 0 #0000) 0 0 #0000,
        var(--tw-ring-shadow, 0 0 #0000),
        var(--tw-shadow);
}
.car-photos-col:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x))
        skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.car-photos-col img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
}
.allphotos-link {
    color: var(--btn-block-text);
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    gap: 4px;
    align-items: center;
    display: flex;
}
.desc-overlay-grandient-about.about-hide {
    display: none;
}
.desc-overlay-grandient {
    background: var(--desc-overlay-grandient);
}
.car-about-block-flex {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    gap: 16px;
}
.car-about-brand-logo {
    padding: 4px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    width: 110px;
    height: 83px;
}
.car-about-brand-logo img {
    -o-object-fit: contain;
    object-fit: contain;
}
.car-about-desc {
    flex: 1 1 0%;
    position: relative;
}
.car-about-desc {
}
.car-about-desc p {
    color: var(--lowertext-color);
    font-size: 16px;
    line-height: 28px;
}
.desc-overlay-grandient-about {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 32px;
    pointer-events: none;
    background: var(--about-overlay-grandient);
}
.desc-overlay-grandient-about.about-hide {
    display: none;
}
#expended-text-about {
    display: none;
    transition: all 0.5s ease-in-out;
}
#expended-text-about.about-show {
    display: inline;
}
#desc-expand-arrow.about-rotate-down {
    transform: rotate(0deg);
}
.db-section-container {
    margin: 40px 0px;
}

/* Variant-page-style */
.car-variant-specification-container {
    background: var(--specifications-detls-bg);
    border-radius: 8px;
    overflow: hidden;
}
.car-variant-specification-table {
    background: var(--specifications-detls-bg);
    margin-bottom: 32px;
}
.car-variant-specification-table:last-child {
    margin-bottom: 0px;
}
.car-variant-specification-table table {
    width: 100%;
    border-collapse: collapse;
}
.car-variant-specification-table table th {
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    padding: 12px 16px;
    color: var(--carmodel-price-textcolor);
    background: var(--btn-block-hover);
    text-align: left;
}
.car-variant-specification-table table td {
    padding: 12px 16px;
    border: 1px solid var(--specification-table-td-border);
}
.car-spec-td-top {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 4px;
    color: var(--btn-block-text);
}
.car-spec-td-bottom {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--carmodel-price-textcolor);
}
.tabcontent {
    display: none;
}
.modal-car-specif-tabmenu {
    display: flex;
    border-bottom: 1px solid var(--specification-table-td-border);
    gap: 16px;
    margin-bottom: 24px;
}
.modal-car-specif-tabmenu .car-varient-btn {
    color: var(--varient-btn-color);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    padding-bottom: 16px;
    border: none;
    background: none;
    cursor: pointer;
}
.car-varient-btn.active {
    border-bottom: 2px solid #dc2626;
    color: var(--lowertext-color);
}
.car-varient-btn:hover {
    color: var(--lowertext-color);
}

/* upcomingcars-style */

.db-upcomingcar-content {
    padding: 20px;
}
.db-upcomingcar-title {
    color: var(--card-title);
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 8px;
    font-weight: 700;
}
.db-upcomingcar-price {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 4px;
    color: var(--btn-block-text);
}
.db-upcomingcar-checkbtn {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    cursor: pointer;
    color: #9ca3af;
    border: none;
    background: none;
}
.db-upcomingcar-checkbtn:hover {
    text-decoration: underline;
}

.brand-table-btn svg {
    transition-duration: 0.2s;
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x))
        skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.brand-table-btn:hover {
    opacity: 0.7;
    background: var(--modal-car-specif-border);
    --tw-bg-opacity: 1;
}
.brand-table-btn {
    transition-duration: 0.2s;
    color: var(--btn-block-text);
    padding: 8px;
    border-radius: 9999px;
    flex-shrink: 0;
    cursor: pointer;
    background: none;
    border: none;
}
.brand-table-btn-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#table-expand-arrow.rotate-downn {
    transform: rotate(0deg);
}

/* Filter-page */
.ds-carfilter-flex {
    display: flex;
    align-items: baseline;
    flex-direction: row;
    gap: 16px;
    width: 100%;
}
.custom-dropdown {
    position: relative;
    flex: 1 1 0%;
}
.dropdown-btn {
    transition-duration: 0.2s;
    color: var(--varient-btn-color);
    padding: 14px 16px;
    background: var(--specifications-detls-bg);
    border: 1px solid var(--specification-table-td-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.dropdownlist-box {
    background: var(--dropdownlist-box);
    position: absolute;
    border: 1px solid var(--specification-table-td-border);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 8px;
    z-index: 50;
    top: 100%;
    left: 0;
    right: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 10;
}
/* .filter-text{color: var(--filter-header-color);font-weight: 500;font-size: 12px;line-height: 16px;text-transform: uppercase;padding:16px;background: var(--filter-text-bg);border-bottom: 1px solid var(--filter-border);letter-spacing: 1px;} */
/* .dropdown-list li{transition-duration: .15s;} */
.dropdown-list li a {
    text-align: left;
    display: block;
    padding: 16px;
    font-size: 14px;
    font-weight: 300;
    color: var(--filter-option);
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    transition: all 0.5s ease-out;
}
.filter-option.active {
    background: var(--filter-option-active);
    color: var(--filter-option);
    border-left: 2px solid var(--filter-option);
}
.filter-select .filter-option {
    position: relative;
    transition: all 0.5s ease-out;
}
.filter-hover-line {
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 24px;
    height: 1px;
    background: var(--filter-hover-line);
    width: 0;
    transition: width 0.7s ease-out;
}
.filter-option:hover .filter-hover-line {
    width: calc(100% - 0px);
}
.dropdown-list li:hover {
    background: var(--car-model-totprice-bg);
}
.dropdownlist-box.show {
    height: auto;
    opacity: 1;
    visibility: visible;
}
.arrow svg {
    transition: 0.3s;
}
.dropdown-btn.active .arrow svg {
    transform: rotate(-180deg);
}
.ds-allmodalcars-container {
    margin-top: 40px;
}
.allmodalcars-gridblock {
}
.allmodalcars-gridblock ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
.allmodalcars-gridblock ul li {
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    background: var(--dropdownlist-box);
    border-radius: 8px;
    overflow: hidden;
}
.allmodalcars-gridblock ul li:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-4px);
}
.modalcars-thumbnail {
    aspect-ratio: 16 / 9;
    background: var(--btn-block-hover);
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modalcars-thumbnail img {
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.modalcars-details {
    padding: 12px;
}
.modalcars-name {
    color: var(--carmodel-price-textcolor);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    margin-bottom: 4px;
}
.modalcars-price {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 4px;
    color: var(--btn-block-text);
}
.modalcars-price:last-child {
    font-weight: 600;
}
.modalcars-link {
    background: none;
    border: none;
    transition-duration: 0.2s;
    color: #9ca3af;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    cursor: pointer;
}
.modalcars-link:hover {
    text-decoration-line: underline;
}
.allmodalcars-numbers {
    margin-top: 32px;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    gap: 16px;
    align-items: center;
}
.pagenation-btn {
    transition-duration: 0.2s;
    background: var(--numbers-bg);
    border-radius: 8px;
    justify-content: center;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    color: var(--lowertext-color);
    font-weight: 500;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.pagenation-btn.active {
    background: #e62424;
    color: #fff;
}
.pagenation-btn.active:hover {
    background: #e62424;
}
.disable-btn:hover {
    background: none !important;
}
.pagenation-btn:hover {
    background: var(--numbers-bg-hover);
}
.disable-btn:hover {
    background: var(--numbers-bg) !important;
}
.disable-btn {
    cursor: not-allowed;
}
.disable-btn svg {
    color: var(--disable-btn-color);
}
.allmodalcars-pagenation-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Petrol-Competitors-style */
#desc-expand-arrow-about {
    transform: rotate(0deg);
}
#desc-expand-arrow-about.about-rotate-down {
    transform: rotate(180deg) !important;
}
.petrol-comp-card {
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s ease;
    width: 100%;
    flex: 0 0 478px;
    border: 0;
}
.cars-twoslider {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease;
    will-change: transform;
}
.cars-twoslider-nav-next {
    right: 0;
}
.cars-twoslider-nav-prev.disable,.cars-twoslider-nav-next.disable {
    box-shadow: var(--car-slider-nav-disable-shadow);
    background-color: var(--car-slider-nav-disable-bg);
    color: var(--car-slider-nav-disable-color);
    opacity: 0.4;
    cursor: pointer;
    pointer-events: unset;
}
.cars-twoslider-nav-prev {
    left: 0px;
}
.cars-twoslider-container {
    position: relative;
    overflow: hidden;
}
.twocars-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background-color: var(--reels-dot-bg);
    border: none;
    cursor: pointer;
    transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.twocars-dot:hover {
    background-color: var(--reels-dot-hover-bg);
}
.twocars-dot.active {
    background-color: #ff0000;
    width: 24px;
}

.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 111;
}
.popup-box {
    background: var(--dropdownlist-box);
    border-radius: 12px;
    overflow: hidden;
    max-width: 672px;
    width: 100%;
    height: 468px;
    position: relative;
}
.popup-box-header {
    background: var(--dropdownlist-box);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid #e5e7eb;
    z-index: 10;
    position: sticky;
    top: 0;
}
.popup-box-header-text {
    color: var(--carmodel-price-textcolor);
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
}
.popup-box-more-cityes {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(80vh - 150px);
}
.more-cityes-block {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    display: grid;
    gap: 12px;
}
.more-citye-name {
    transition-duration: 0.2s;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    padding: 12px 16px;
    background: var(--btn-block-hover);
    border-radius: 8px;
    cursor: pointer;
    border: none;
    color: var(--more-citye-name-color);
}
.more-citye-name:hover {
    background: #dc2626;
    color: var(--more-citye-name-color-hover);
}
.close-popup {
    transition-duration: 0.2s;
    color: #4b5563;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    border: none;
    background: none;
    color: var(--close-popup-color);
}
.close-popup:hover {
    background: var(--close-popup-colorbg-hover);
    color: var(--close-popup-color-hover);
}

.ds-faq-container {
    padding: 24px;
    background: var(--specifications-detls-bg);
    border: 1px solid var(--modal-car-specif-border);
    border-radius: 12px;
}
.ds-faq-item {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--modal-car-specif-border);
}
.ds-faq-item:last-child {
    margin-bottom: 0px;
    padding-bottom: 0px;
    border-bottom: none;
}
.ds-faq-item-header {
    color: var(--carmodel-price-textcolor);
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    margin-bottom: 4px;
}
.ds-faq-item-desc {
    color: var(--lowertext-color);
    font-size: 16px;
    line-height: 26px;
}
.popup-box-sub-header {
    font-size: 20px;
    color: var(--section-header-title);
    margin-bottom: 12px;
    font-weight: 600;
}
#cityList h3 {font-size: 24px;font-weight: 600;letter-spacing: -0.02em;color: var(--section-header-title);transition: color 0.3s ease;margin-bottom: 10px;width: 100%;color: #e62424;}
#cityList .more-citye-name {width: 195px;}
/* hatchbacka-style */
.hatchback-gridblock ul{grid-template-columns: repeat(2, minmax(0, 1fr)) !important;}
.hatchback-title-flex{display: flex;align-items: center;justify-content: space-between;}
.hatchback-title-flex .modalcars-name {font-size: 20px;}
.hatchback-link{color: var(--hatchback-link-color);font-weight: 500;font-size: 12px;line-height: 16px;white-space: nowrap;gap: 2px;align-items: center;flex-shrink: 0;display: flex;}
.ds-exshowroom-text{font-size: 11px;margin-top: 2px;margin-bottom: 16px;color: var(--exshowroom-color);}
.ds-hatchback-moredtls{display: grid;gap: 8px;grid-template-columns: repeat(4, minmax(0, 1fr));margin-bottom: 16px;}
.ds-hatchback-moredtls a {display: contents;}
.hatchback-moredtls-block.active{box-shadow:0 0 0 2px rgba(239, 68, 68, 1);}
.hatchback-moredtls-block{transition-duration: .2s;padding: 12px 4px;background: var(--hatchback-moredtls-bg);border: 1px solid var(--hatchback-moredtls-border);border-radius: 12px;gap: 6px;align-items: center;flex-direction: column;display: flex;cursor: pointer;transition: all 0.3s ease;}
.hatchback-moredtls-block:hover{background: var(--hatchback-moredtls-bg-hover);}
.hatchback-moredtls-icon{color: var(--hatchback-moredtls-icon);display: block;vertical-align: middle;}
.moredtls-text{color: var(--moredtls-text-color);line-height: 1.25;font-weight: 500;font-size: 10px;text-align: center;}
.ds-allvarients-block{background: var(--ds-allvarients-block);border: 1px solid var(--hatchback-moredtls-border);border-radius: 12px;width: 100%;}
.ds-allvarients-btn{display: flex;transition-duration: .2s;text-align: left;padding: 12px 16px;border-radius: 12px;gap: 12px;align-items: center;width: 100%;cursor: pointer;border: none;background: none;}
.plus-icon{color: #fff;    line-height: 1;font-weight: 700;font-size: 12px;background: #dc2626;border-radius: 4px;justify-content: center;align-items: center;user-select: none;flex-shrink: 0;width: 20px;height: 20px;display: flex;}
.view-all-varients{color: var(--view-all-varients);font-weight: 600;font-size: 12px;line-height: 16px;}
.ds-allvarients-block:hover{background: var(--hatchback-moredtls-bg-hover);}

.hatchback-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;z-index: 111;
}
.hatchback-popup-box{background: var(--hatchback-popup-box);border-radius: 12px;overflow: hidden;max-width: 672px;width: 100%;position: relative;}
.hatchback-popup-box-header{background: var(--hatchback-popup-box-header); display: flex;align-items: center;justify-content: space-between;padding: 16px 20px;border-bottom: 1px solid var(--hatchback-moredtls-border);z-index: 10;position: sticky;top: 0;}
/* .hpclose-popup-relative{position: relative;background: #fff;overflow: hidden;width: 100%;} */
.hpclose-popup{transition-duration: .15s;background-color: #111827cc;border-radius: 9999px;justify-content: center;align-items: center;width: 28px;height: 28px;display: flex;z-index: 999;position: absolute;top: 12px;right: 12px;cursor: pointer;border: none;}
.hpclose-popup svg{color: #fff;display: block;vertical-align: middle;}
.hpclose-popup:hover{background: #111827;}
.close-popup{transition-duration: .2s;color: #4b5563;border-radius: 8px;padding: 8px;cursor: pointer;border: none;background: none;color: var(--close-popup-color);}
.close-popup:hover{background: var(--close-popup-colorbg-hover);color: var(--close-popup-color-hover);}
.hatchback-header-lt p{color: var(--hatchback-header-lt);text-transform: uppercase;font-weight: 700;margin-bottom: 2px;font-size: 10px;}
.hatchback-car-varient-head{font-size: 18px;line-height: 28px;color: var(--varient-head);font-weight: 700;}
.hatchback-popup-content{overflow-y: auto;height: 182px;}
.hatchback-cars-varients{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));}
.hatchback-cars-varient{transition-duration: .15s;padding: 12px 16px;border: 1px solid var(--hatchback-moredtls-border);gap: 6px;flex-direction: column;display: flex;}
.hb-car-model{font-size: 16px;line-height: 24px;color: var(--hb-car-model);font-weight: 500;}
.hb-car-model a {color: var(--hb-car-model);}
.hb-car-moredtls{display: flex;gap: 8px;align-items: center;}
.hb-car-gastype{color: var(--hb-car-gastype);font-weight: 500;font-size: 10px;padding: 2px 8px;background: var(--hb-car-gastype-bg);border-radius: 9999px;}
.hb-car-price{color: var(--hb-car-price);font-weight: 600;font-size: 12px;line-height: 16px;}
.cng{color: var(--cng-color);background: var(--cng-bg);}
.diesel{color: var(--diesel-color);background: var(--diesel-bg);}
html{
    scrollbar-gutter: stable;
}

/* MVP-cars-page-style */
/*.ds-mvp-cars-container{margin: 40px 0px;}*/
.ds-mvp-cars-block{/*padding: 24px 0px;*/border-bottom: 1px solid var(--hatchback-moredtls-border);}
.ds-mvp-cars-block:last-child{border-bottom: 0px;}
.ds-mvp-cars-head{margin-bottom: 20px;display: flex;align-items: center;justify-content: space-between;}
.ds-mvp-cars-title{color: var(--carmodel-price-textcolor);font-size: 30px;line-height: 1.25;font-weight: 700;}
.ds-mvp-cars-all-link{color: var(--ds-mvp-cars-all-link);display: flex;transition-duration: .2s;font-weight: 500;font-size: 14px;line-height: 20px;gap: 4px;align-items: center;}
.ds-mvp-cars-all-link svg{display: block;vertical-align: middle;}
.ds-mvp-cars-dtls{display: flex;flex-direction: row;gap: 40px;align-items: flex-start;}
.ds-mvp-cars-thumb{flex-shrink: 0;width: 450px;height: 254px;aspect-ratio: auto;border-radius: 8px;overflow: hidden;background: var(--tw-bg-opacity);}
.ds-mvp-cars-thumb img{object-fit: cover;width: 100%;height: 100%;}
.ds-mvp-cars-thumb-description{flex: 1 1 0%;}
.ds-mvp-cars-price{font-size: 28px;line-height: 1.25;font-weight: 700;color: var(--carmodel-price-textcolor);margin-bottom: 4px;}
.ds-mvp-cars-exshowroom-price{color: #6b7280;font-size: 12px;line-height: 16px;margin-bottom: 16px;}
.ds-mvp-cars-thumb-desc{color: var(--btn-block-text);line-height: 1.625;font-size: 14px;}