* {
    font-family: "Rajdhani", sans-serif;
    scroll-behavior: smooth !important;
}

#chatra {
    bottom: 3em !important;
}

.swal-footer {
    text-align: center!important;
}

.call-us-btn {
    position: fixed;
    right: 1em;
    top: 35%;
    transform: translateY(-50%) rotate(-90deg);
    background-color: #c60303;
    color: white;
    font-size: 15px;
    text-transform: uppercase;
    padding: .2em .5em .2em;
    text-decoration: none;
    font-weight: bold;
    border-radius: 10px;
    z-index: 1000;
    transform-origin: right center;
    transition: right 0.3s ease;
}

.call-us-btn:hover {
    right: 1.1em;
    background-color: #a50202;
    color: #f0f0f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}



.faq {
    background-color: rgba(249, 127, 50, 0.4);
    background-blend-mode: overlay;
}

.hp-section-row.about::before {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

.ctct-form-embed.form_0 .ctct-form-custom .ctct-form-button:hover {
    background-color: #e23e45;
    border: 1px solid #e23e45;
}

.inventory-contained-grid-wrap, #car-details, #about-wrap, #terms, #policy, #contact-wrap {
    background: rgb(249, 127, 50);
    background: radial-gradient(circle, rgba(249, 127, 50, 1) 0%, rgba(0, 0, 0, 0.9345939059217437) 100%);
}

/* The gap that keeps the centred logo out of the menu labels. It is a desktop
   thing only — the mobile menu is a stacked list, where a right margin on one
   item just pushes that row out of the box — and it is sized in the header
   block below, from the same value the logo is sized with. */
.navigation-bar .vanguard-container .navigation-link-bar .dropdown.current {
    margin-right: 0 !important;
}

.vanguard-wrap.lead-quick-specs .quick-specs .vehicle-price-wrapper {
    border: unset;
}

.vanguard-wrap.lead-quick-specs .more-details a.red-link {
    color: #ce1f26;
}

.swiper {
    height: unset !important;
    overflow-y: visible !important;
}

.swiper-footer {
    padding-top: 2em;
}

.reviews .vehicle-wrapper {
    width: 35%;
    height: 32%;
    margin: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.grid_wrap.desktop {
    width: 80%;
    z-index: 1;
}

.desktop .vehicle-highlight {
    height: 60px;
}

.desktop .inventory-grid-item {
    min-width: 300px;
}

.desktop .vehicle-wrapper {
    display: none;
    width: 100%;
}

.reviews .vehicle-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.reviews .vehicle-thumb-featured {
    width: 100%;
    position: relative;
    padding-bottom: 65%;
    min-height: 195px;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #000000;
}

.hp-section-row.news {
    background-image: url("../images/static/main-notification-bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 650px;
    padding: unset!important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    background-blend-mode: overlay;
}

.hp-section-row.news .col-r {
    margin: auto;
    width: 70%;
}

@media (min-width: 992px) {
    .slider {
        display: none !important;
    }

    .desktop .vehicle-wrapper {
        display: block;
    }

    #contact-page .vanguard-page-wrap .vanguard-container {
        max-width: 1600px !important;
    }

    #contact-page .vanguard-container.page-with-contact .left-col {
        width: 55%;
    }

    #contact-page .vanguard-container.page-with-contact .right-col {
        width: 45%;
    }
}

/** {*/
/*    font-family: Areal;*/
/*}*/

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1.8;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

.preloader {
    animation: pulse 2s ease-in-out infinite;
}

#preloader {
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgb(0 0 0 / 97%);
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center;
}

.figure {
    position: relative;
    color: #fff;
    text-align: center;
    animation: 5s linear infinite rotate;
}

.figure > img {
    width: 200px;
}

.sold-sign {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #cb244b;
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding: 5px 15px;
    border-radius: 5px;
    z-index: 10;
}

@media (max-width: 460px) {
    .figure > img {
        width: 180px;
    }
}

.buttons-group {
    position: relative;
}

.thanks-message {
    position: absolute;
    bottom: -46px;
    width: 208px;
    left: 2px;
}

.pivont-point {
    position: absolute;
    color: #363636;
    font-size: 30px;
    transform: translate(-50%, -50%);
}

.pivont-point.center {
    top: 50%;
    left: 50%;
}


.watch-video-container {
    position: relative;
}

.faqWrapper {
    min-width: 1400px;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 98;
}

@media (max-width: 1424px) {
    .faqWrapper {
        min-width: 800px;
    }
}

@media (max-width: 992px) {
    .reviews .vehicle-wrapper:hover {
        transform: unset!important;
        box-shadow: unset!important;
    }
    .reviews .vehicle-wrapper {
        width: 100%;
    }

    .reviews .vehicle-highlight {
        height: 70px;
    }

    #carDesc {
        text-align: left!important;
    }
}

@media (max-width: 800px) {
    .faqWrapper {
        display: none;
    }

    .call-us-btn {
        display: none;
    }
}

.slider {
    position: relative;
    z-index: 2;
}

.swiper {
    width: 1438px;
    height: 342px;
}

.sw-row {
    background: #fff;
    display: flex;
    gap: 44px;
    justify-content: space-between;
    align-items: center;
    padding: 65px 40px 34px;
}

.sw-img > img {
    width: 210px;
    height: 210px;
}

.sw-content-text {
    color: #000;
    font-family: Rajdhani;
    font-size: 31px;
    font-weight: 500;
}

.sw-content-sign {
    color: #000;
    font-family: Rajdhani;
    font-size: 25px;
    font-weight: 700;
}

.sw-content {
    position: relative;
}

.sw-content::before,
.sw-content::after {
    content: "";
    background: url('../images/static/testimonial_bg.png') no-repeat;
    background-size: 47px 35px;
    position: absolute;
    width: 47px;
    height: 35px;
}

.sw-content::before {
    top: -50px;
    left: -10px;
}

.sw-content::after {
    bottom: -25px;
    right: 0;
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
    position: relative;
    display: flex;
    width: initial;
    bottom: 0;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0px 5px;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: white;
    opacity: 0.9;
}

.swiper-button-prev-arr > img,
.swiper-button-next-arr > img {
    width: 65px;
}

.swiper-pagination-bullet-active {
    background-color: #FB991C;
}

.faq {
    background-image: url('../images/static/faq-bg-block.jpg');
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slider {
    padding-bottom: 30px;
}

.faq-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    margin-top: 36px;
    margin-bottom: 25px;
}

.faq-header-title {
    font-family: Rajdhani;
    font-size: 99px;
    font-weight: 700;
}

.faq-header-subTitle {
    font-family: Rajdhani;
    font-size: 42px;
    font-weight: 700;
    text-align: center;
    padding: 0 10px;
}

.accordion {
    width: 100%;
    max-width: 1438px;
    margin: auto;
    margin-bottom: 297px;
}

.accordion-title {
    background: white;
    color: black;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #ddd;
    transition: 0.4s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
}

.accordion-title h2 {
    margin: 0;
    color: #000;
    font-family: Rajdhani;
    font-size: 35px;
    font-weight: 700;
}

.accordion-content {
    background: white;
    color: black;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-radius: 10px;
    margin: 3px 0;
}

.accordion-content p {
    color: #000;
    font-family: Rajdhani;
    font-size: 31px;
    font-weight: 400;
    padding: 17px 57px;
}

.arrow {
    width: 15px;
}

.rotate {
    transform: rotate(180deg);
}

@media (max-width: 1460px) {
    .accordion {
        width: 800px;
        margin-bottom: 140px;
    }

    .accordion-title h2 {
        font-size: 17px;
    }

    .accordion-content p {
        font-size: 17px;
        padding: 15px 25px;
        font-weight: 500;
    }
}

@media (max-width: 814px) {
    .accordion {
        width: 400px;
        margin-bottom: 50px;
    }

    .arrow {
        width: 15px;
    }

    .sign-up-btn {
        margin-top: unset !important;
    }
}

@media (max-width: 414px) {
    .accordion {
        width: 300px;
        margin-bottom: 50px;
    }

}

@media (max-width: 486px) {
    .faq-header-title {
        font-size: 44px;
    }

    .faq-header-subTitle {
        font-size: 25px;
    }
}

@media (max-width: 1494px) {
    .swiper {
        width: 1290px;
    }

    .hp-section-row.news {
        background-position-x: -20em;
    }
}

/* The three stepped percentage gaps that used to live here (16% / 11% / 8%,
   plus a logo nudged 5% off centre) are gone: a percentage of the menu's width
   cannot track a logo measured in pixels, so between the steps the hole was
   either on top of a label or a hand's width away from the logo. Both are one
   fluid value now — see the header block below. */

@media (max-width: 1358px) {
    .swiper {
        width: 960px;
    }

    .sw-content-text {
        font-size: 21px;
    }

    .sw-content::after {
        bottom: 7%;
    }
}

@media (max-width: 992px) {
    .hp-section-row.news {
        background-position-x: -60em;
    }

    .faq {
        background-attachment: scroll !important;
    }

    #thumbs {
        margin-top: 9em;
        margin-bottom: -7em;
    }

    .col-l-header {
        padding: 60px 10px 0 10px;
    }

    .shadow-title {
        font-size: 45px;
    }

    .shadow-subtitle {
        font-size: 27px;
    }

    .swiper {
        width: 340px;
        height: 510px;
    }

    .sw-row {
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 38px 29px;
        gap: 6px;
    }

    .sw-content::before,
    .sw-content::after {
        background-size: 37px 22px;
        width: 37px;
        height: 22px;
    }

    .sw-content::before {
        top: -20px;
        left: -6px;
    }

    .swiper-button-prev-arr,
    .swiper-button-next-arr {
        display: none;
    }

    .swiper-footer {
        align-items: center;
        justify-content: center;
    }

    .sw-img > img {
        width: 150px;
        height: 150px;
    }

    .sw-content-text {
        font-size: 20px;
    }

    .sw-content-sign {
        font-size: 24px;
        margin-top: 8px;
    }


    .swiper-footer {
        margin-top: 0px;
    }
}

@media (max-width: 992px) {
    .swiper {
        width: 300px;
        height: 445px;
    }
}

@media (max-width: 501px) {
    .footer-title, .footer-icon-tel {
        max-width: 175px !important;
        width: 175px !important;
        margin: auto;
        text-align: center;
        border-color: #fd0000;
    }

    .footer-icon-tel {
        border: unset;
    }

    .footer-item {
        text-align: center;
    }

    .footer-row-top {
        margin-left: 0 !important;
    }
}

.text-box {
    width: 100%;
    float: left;
    margin-top: 20px;
    padding: 0px 20px;
}

a {
    font-size: 20px;
    color: #fb5502;
}

ul li {
    font-size: 20px;
    font-weight: 500;
}

.form-signin {
    width: 100%;
    max-width: 330px;
    margin: auto;
    margin-top: 15% !important;
    text-align: center;
}

.form-signin input[type="text"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.form-signin button {
    margin-top: 1em;
}
/* ---------------------------------------------------------------------------
   Header
   The bar shares .vanguard-container with the page sections, which is capped at
   1275px — on a wide screen that squeezed six menu items, the logo and the
   phone into a narrow strip, and a long label ("About Us") broke over two
   lines. The nav gets its own, wider cap; the page sections keep theirs.
--------------------------------------------------------------------------- */
/* A menu label is never split across two lines. */
.navigation-bar .vanguard-container .navigation-link-bar li a {
    white-space: nowrap;
}

@media (min-width: 992px) {
    /* ONE SCALE FOR THE WHOLE BAR.
       Every fixed pixel size in the header used to be re-declared at 1300 and
       again at 1100, so the row was correct at three widths and guessed at
       everything in between: just above a step the labels, the logo and the
       phone were all still at their large size on a screen that no longer had
       room for them. These three values are continuous, and everything else in
       the header is derived from them — nothing in the bar has a size of its
       own any more. */
    .navigation-bar .vanguard-container {
        --nav-logo: clamp(78px, 10.4vw, 150px);
        --nav-pill: clamp(30px, 3.1vw, 45px);
        --nav-label: clamp(15px, 1.75vw, 28px);
        --nav-border: clamp(2px, .21vw, 3px);
        max-width: 1500px;
        padding: 0 clamp(10px, 1.6vw, 24px);
    }

    /* Two ends of one row, so nothing can drift into the middle or below. */
    .navigation-bar .vanguard-container .navigation-top-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: clamp(8px, 1.2vw, 16px);
    }

    .navigation-bar .vanguard-container .navigation-top-row .top-left,
    .navigation-bar .vanguard-container .navigation-top-row .top-right {
        float: none;
        min-width: 0;
        display: flex;
        align-items: center;
        /* Must stay visible: the phone dropdown hangs below this row, and a
           clipped one is a list that opens into nothing. */
        overflow: visible;
    }

    /* The centred logo and the hole the labels leave for it are the SAME value,
       so the hole can never be narrower than the logo standing in it, and the
       logo must stay centred (left:0/right:0) for the hole to be under it. */
    .navigation-bar .vanguard-container .vanguard-nav-logo {
        width: var(--nav-logo);
        height: var(--nav-logo);
        left: 0;
        right: 0;
    }

    .navigation-bar .vanguard-container .navigation-link-bar .dropdown.current {
        margin-right: calc(var(--nav-logo) + clamp(18px, 2vw, 44px)) !important;
    }

    /* The scrolled-down bar shrinks the logo to a fixed 115px; on a narrow
       desktop that is wider than the logo the hole was cut for, so it is capped
       by the same value as everything else. */
    .navigation-bar.compress-nav .vanguard-container .vanguard-nav-logo {
        width: min(115px, var(--nav-logo));
        height: min(80px, var(--nav-logo));
    }

    /* Six labels plus that hole have to fit what is left of the row, so their
       size, padding, tracking and the gap between them all give way together. */
    .navigation-bar .vanguard-container .navigation-link-bar li {
        margin-right: clamp(2px, 1.1vw, 30px);
    }

    .navigation-bar .vanguard-container .navigation-link-bar li a {
        font-size: var(--nav-label);
        padding: 10px clamp(5px, .85vw, 20px);
        letter-spacing: clamp(.4px, .13vw, 2px);
    }

    /* Ask A Question: the pill, the circle hanging off its left and the label
       are one size, so the icon can never outgrow the bar it sits in. */
    .navigation-bar .vanguard-container .ask-question {
        height: var(--nav-pill);
        border-width: var(--nav-border);
        padding-left: calc(var(--nav-pill) + clamp(4px, .5vw, 8px));
    }

    .navigation-bar .vanguard-container .ask-question a {
        font-size: clamp(15px, 2vw, 32px);
        padding-right: clamp(8px, 1.1vw, 20px);
    }

    .navigation-bar .vanguard-container .ask-question a:before {
        width: var(--nav-pill);
        height: var(--nav-pill);
        border-width: var(--nav-border);
        background-size: 55%;
        left: calc(-1 * (var(--nav-pill) + clamp(6px, .75vw, 12px)));
    }

    /* The phone pill, and with it the dropdown, ride the same scale. */
    .navigation-bar .vanguard-container .phone-number {
        height: var(--nav-pill);
    }

    .navigation-bar .vanguard-container .phone-number a {
        font-size: clamp(16px, 2.1vw, 34px);
    }

    .navigation-bar .vanguard-container .phone-number a span {
        border-width: var(--nav-border);
        padding-left: clamp(8px, 1vw, 15px);
        padding-right: clamp(8px, 1vw, 15px);
    }
}

/* Below the desktop breakpoint the bar is the phone icon, the centred logo and
   the burger, each pinned to its own edge. Only the logo has a fixed width
   (115px), which on the narrowest phones is most of the space between the two
   icons — it gives way there, and nowhere else. */
@media (max-width: 480px) {
    .navigation-bar .vanguard-container .vanguard-nav-logo {
        width: clamp(80px, 26vw, 115px);
    }
}

/* ---------------------------------------------------------------------------
   Call-to-action rows (the "Call Us / Contact Us" pills)
   Every phone number renders as its own pill here, so a site with five numbers
   had a row several hundred pixels wider than the page — and above 767px that
   row was `nowrap`, so it did not fold, it pushed the DOCUMENT wide. A document
   wider than the window is what dragged the fixed header sideways and cut its
   first label in half: the header was never the problem, this row was.
   The row folds now, and the pills give way with the viewport.
--------------------------------------------------------------------------- */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1vw, 20px);
    max-width: 100%;
}

.btn-row .vanguard-btn {
    /* The gap does the spacing now — the pill's own right margin would be
       counted again on every wrapped line. */
    margin-right: 0;
    margin-top: 0;
    max-width: 100%;
    white-space: nowrap;
    font-size: clamp(17px, 1.9vw, 32px);
    padding: 12px clamp(18px, 2.4vw, 40px) 8px;
}

/* The phone icon is painted on the pill itself, so it has to move in with the
   padding that makes room for it. */
.btn-row .vanguard-btn.phone {
    padding-left: clamp(44px, 4.6vw, 65px);
}

.btn-row .vanguard-btn.phone:before {
    background-position: clamp(14px, 1.7vw, 28px) center;
    background-size: clamp(17px, 1.8vw, 25px) clamp(17px, 1.8vw, 25px);
}

/* On a phone the row was `display: block`, which drops the pills back to
   inline-block and loses the gap that spaces them. It stays a wrapping flex
   row all the way down. */
@media (max-width: 767px) {
    .hp-section-row .col-full.center .btn-row {
        display: flex;
    }
}

/* More than one phone number: the header shows the first one and keeps the
   rest in a dropdown. The top row is absolutely positioned inside a
   fixed-height bar, so a row of numbers would either grow down over the menu
   or squeeze the menu labels — the dropdown floats above both instead and the
   bar keeps the width of a single number. */
.phone-number.nav-phone-dropdown {
    position: relative;
}

.phone-number.nav-phone-dropdown .phone-dropdown-toggle {
    cursor: pointer;
    white-space: nowrap;
}

.phone-number.nav-phone-dropdown .phone-dropdown-toggle:hover,
.phone-number.nav-phone-dropdown .phone-dropdown-toggle:focus {
    text-decoration: none;
}

/* Sized in em, so it follows the toggle's font size down with the rest of the
   bar instead of turning into a boulder next to a small number. */
.phone-dropdown-caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .25em;
    border-left: .21em solid transparent;
    border-right: .21em solid transparent;
    border-top: .24em solid #f97f32;
    transition: transform 0.2s ease-in-out;
}

.phone-number.nav-phone-dropdown.is-open .phone-dropdown-caret {
    transform: rotate(180deg);
}

/* Floats over the page: the bar below it is the menu, and the list must never
   move it. */
.phone-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    min-width: 100%;
    z-index: 20;
    flex-direction: column;
    background-color: #000000;
    border: 3px solid #f97f32;
    border-radius: 20px;
    padding: 6px 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
}

.phone-number.nav-phone-dropdown.is-open .phone-dropdown-menu {
    display: flex;
}

.navigation-bar .vanguard-container .phone-number .phone-dropdown-item {
    display: block;
    padding: 6px clamp(10px, 1.5vw, 22px);
    font-size: clamp(15px, 1.9vw, 30px);
    line-height: 1.1;
    font-family: "Bebas Neue", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    color: #f97f32;
    text-align: right;
}

.navigation-bar .vanguard-container .phone-number .phone-dropdown-item:hover,
.navigation-bar .vanguard-container .phone-number .phone-dropdown-item:focus {
    color: #ffffff;
    background-color: #f97f32;
    text-decoration: none;
}

/* The 1300px step that used to re-size the toggle, the question button and the
   dropdown items is gone — all three are on the header's fluid scale now. */

.footer-items .footer-item .footer-icon-tel {
    font-size: inherit;
}