:root {
    --yawhite: #fff;
    --yablack: #000;
    --yagray: #636B70;
    --yalightgray: #999999;
    --yallightgray: #ebebeb;
    --yagreen: #0DBDB4;
    --yalightgreen: #00e0d5;
}

/* color */
.c-yawhite {
    color: var(--yawhite) !important;
    transition: .3s;
}

.c-yablack {
    color: var(--yablack) !important;
    transition: .3s;
}

.c-yagray {
    color: var(--yagray) !important;
    transition: .3s;
}

.c-yalightgray {
    color: var(--yalightgray) !important;
    transition: .3s;
}

.c-yagreen {
    color: var(--yagreen) !important;
    transition: .3s;
}

.c-yalightgreen {
    color: var(--yalightgreen) !important;
    transition: .3s;
}

/* :hover color */
.c-h-yawhite:hover {
    color: var(--yawhite) !important;
    transition: .3s;
}

.c-h-yablack:hover {
    color: var(--yablack) !important;
    transition: .3s;
}

.c-h-yagray:hover {
    color: var(--yagray) !important;
    transition: .3s;
}

.c-h-yalightgray:hover {
    color: var(--yalightgray) !important;
    transition: .3s;
}

.c-h-yagreen:hover {
    color: var(--yagreen) !important;
    transition: .3s;
}

.c-h-yalightgreen:hover {
    color: var(--yalightgreen) !important;
    transition: .3s;
}

/* background-color */
.bg-yawhite {
    background-color: var(--yawhite);
    transition: .3s;
}

.bg-yablack {
    background-color: var(--yablack);
    transition: .3s;
}

.bg-yagray {
    background-color: var(--yagray);
    transition: .3s;
}

.bg-yalightgray {
    background-color: var(--yalightgray);
    transition: .3s;
}

.bg-yallightgray {
    background-color: var(--yallightgray);
    transition: .3s;
}

.bg-yagreen {
    background-color: var(--yagreen);
    transition: .3s;
}

.bg-yalightgreen {
    background-color: var(--yalightgreen);
    transition: .3s;
}

.bg-black-white {
    background: rgb(0, 0, 0);
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 49.999%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
}

/* :hover background-color */
.bg-h-yawhite:hover {
    background-color: var(--yawhite);
    transition: .3s;
}

.bg-h-yablack:hover {
    background-color: var(--yablack);
    transition: .3s;
}

.bg-h-yagray:hover {
    background-color: var(--yagray);
    transition: .3s;
}

.bg-h-yalightgray:hover {
    background-color: var(--yalightgray);
    transition: .3s;
}

.bg-h-yagreen:hover {
    background-color: var(--yagreen);
    transition: .3s;
}

.bg-h-yalightgreen:hover {
    background-color: var(--yalightgreen);
    transition: .3s;
}

/* border */
.b-yawhite {
    border: var(--yawhite) 1px solid;
    transition: .3s;
}

.b-yablack {
    border: var(--yablack) 1px solid;
    transition: .3s;
}

.b-yagray {
    border: var(--yagray) 1px solid;
    transition: .3s;
}

.b-yalightgray {
    border: var(--yalightgray) 1px solid;
    transition: .3s;
}

.b-yagreen {
    border: var(--yagreen) 1px solid;
    transition: .3s;
}

.b-yalightgreen {
    border: var(--yalightgreen) 1px solid;
    transition: .3s;
}

/* :hover border */
.b-h-yawhite:hover {
    border: var(--yawhite) 1px solid;
    transition: .3s;
}

.b-h-yablack:hover {
    border: var(--yablack) 1px solid;
    transition: .3s;
}

.b-h-yagray:hover {
    border: var(--yagray) 1px solid;
    transition: .3s;
}

.b-h-yalightgray:hover {
    border: var(--yalightgray) 1px solid;
    transition: .3s;
}

.b-h-yagreen:hover {
    border: var(--yagreen) 1px solid;
    transition: .3s;
}

.b-h-yalightgreen:hover {
    border: var(--yalightgreen) 1px solid;
    transition: .3s;
}

/* border-top */
.b-t-yawhite {
    border-top: var(--yawhite) 1px solid;
    transition: .3s;
}

.b-t-yablack {
    border-top: var(--yablack) 1px solid;
    transition: .3s;
}

.b-t-yagray {
    border-top: var(--yagray) 1px solid;
    transition: .3s;
}

.b-t-yalightgray {
    border-top: var(--yalightgray) 1px solid;
    transition: .3s;
}

.b-t-yagreen {
    border-top: var(--yagreen) 1px solid;
    transition: .3s;
}

.b-t-yalightgreen {
    border-top: var(--yalightgreen) 1px solid;
    transition: .3s;
}

/* border-right */
.b-r-yawhite {
    border-right: var(--yawhite) 1px solid;
    transition: .3s;
}

.b-r-yablack {
    border-right: var(--yablack) 1px solid;
    transition: .3s;
}

.b-r-yagray {
    border-right: var(--yagray) 1px solid;
    transition: .3s;
}

.b-r-yalightgray {
    border-right: var(--yalightgray) 1px solid;
    transition: .3s;
}

.b-r-yagreen {
    border-right: var(--yagreen) 1px solid;
    transition: .3s;
}

.b-r-yalightgreen {
    border-right: var(--yalightgreen) 1px solid;
    transition: .3s;
}

/* border-bottom */
.b-b-yawhite {
    border-bottom: var(--yawhite) 1px solid;
    transition: .3s;
}

.b-b-yablack {
    border-bottom: var(--yablack) 1px solid;
    transition: .3s;
}

.b-b-yagray {
    border-bottom: var(--yagray) 1px solid;
    transition: .3s;
}

.b-b-yalightgray {
    border-bottom: var(--yalightgray) 1px solid;
    transition: .3s;
}

.b-b-yagreen {
    border-bottom: var(--yagreen) 1px solid;
    transition: .3s;
}

.b-b-yalightgreen {
    border-bottom: var(--yalightgreen) 1px solid;
    transition: .3s;
}

/* border-left */
.b-l-yawhite {
    border-left: var(--yawhite) 1px solid;
    transition: .3s;
}

.b-l-yablack {
    border-left: var(--yablack) 1px solid;
    transition: .3s;
}

.b-l-yagray {
    border-left: var(--yagray) 1px solid;
    transition: .3s;
}

.b-l-yalightgray {
    border-left: var(--yalightgray) 1px solid;
    transition: .3s;
}

.b-l-yagreen {
    border-left: var(--yagreen) 1px solid;
    transition: .3s;
}

.b-l-yalightgreen {
    border-left: var(--yalightgreen) 1px solid;
    transition: .3s;
}

/* :hover border-top */
.b-t-h-yawhite:hover {
    border-top: var(--yawhite) 1px solid;
    transition: .3s;
}

.b-t-h-yablack:hover {
    border-top: var(--yablack) 1px solid;
    transition: .3s;
}

.b-t-h-yagray:hover {
    border-top: var(--yagray) 1px solid;
    transition: .3s;
}

.b-t-h-yalightgray:hover {
    border-top: var(--yalightgray) 1px solid;
    transition: .3s;
}

.b-t-h-yagreen:hover {
    border-top: var(--yagreen) 1px solid;
    transition: .3s;
}

.b-t-h-yalightgreen:hover {
    border-top: var(--yalightgreen) 1px solid;
    transition: .3s;
}

/* :hover border-right */
.b-r-h-yawhite:hover {
    border-right: var(--yawhite) 1px solid;
    transition: .3s;
}

.b-r-h-yablack:hover {
    border-right: var(--yablack) 1px solid;
    transition: .3s;
}

.b-r-h-yagray:hover {
    border-right: var(--yagray) 1px solid;
    transition: .3s;
}

.b-r-h-yalightgray:hover {
    border-right: var(--yalightgray) 1px solid;
    transition: .3s;
}

.b-r-h-yagreen:hover {
    border-right: var(--yagreen) 1px solid;
    transition: .3s;
}

.b-r-h-yalightgreen:hover {
    border-right: var(--yalightgreen) 1px solid;
    transition: .3s;
}

/* :hover border-bottom */
.b-b-h-yawhite:hover {
    border-bottom: var(--yawhite) 1px solid;
    transition: .3s;
}

.b-b-h-yablack:hover {
    border-bottom: var(--yablack) 1px solid;
    transition: .3s;
}

.b-b-h-yagray:hover {
    border-bottom: var(--yagray) 1px solid;
    transition: .3s;
}

.b-b-h-yalightgray:hover {
    border-bottom: var(--yalightgray) 1px solid;
    transition: .3s;
}

.b-b-h-yagreen:hover {
    border-bottom: var(--yagreen) 1px solid;
    transition: .3s;
}

.b-b-h-yalightgreen:hover {
    border-bottom: var(--yalightgreen) 1px solid;
    transition: .3s;
}

/* :hover border-left */
.b-l-h-yawhite:hover {
    border-left: var(--yawhite) 1px solid;
    transition: .3s;
}

.b-l-h-yablack:hover {
    border-left: var(--yablack) 1px solid;
    transition: .3s;
}

.b-l-h-yagray:hover {
    border-left: var(--yagray) 1px solid;
    transition: .3s;
}

.b-l-h-yalightgray:hover {
    border-left: var(--yalightgray) 1px solid;
    transition: .3s;
}

.b-l-h-yagreen:hover {
    border-left: var(--yagreen) 1px solid;
    transition: .3s;
}

.b-l-h-yalightgreen:hover {
    border-left: var(--yalightgreen) 1px solid;
    transition: .3s;
}

.border2 {
    border-width: 2px !important;
}


body {
    font-family: 'Haval';
    font-weight: normal;
    font-style: normal;
    color: var(--yablack);
}

h2,
.h2 {
    font-size: 42px;
    line-height: 1.5;
}

h3,
.h3 {
    font-size: 38px;
}

.text-plus {
    font-size: 17px;
}

.text-minus {
    font-size: 14px;
}

.cursor-pointer {
    cursor: pointer;
}

.menu-name {
    font-size: 16px;
}

.menu-text {
    font-size: 10px;
    line-height: 2;
}

.menu-phone {
    font-size: 14px;
}

.button40 {
    height: 40px;
    font-size: 12px;
}

.button50 {
    height: 50px;
}

.button60 {
    height: 60px;
    font-size: 15px;
    font-weight: 900;
}

.button80 {
    height: 80px;
}

.button60-angle {
    position: relative;
    padding: 0 8px 0 18px;
}

.button60-angle::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-left-width: 0px;
    border-right-width: 21px;
    border-top: 60px solid;
    transition: .3s;
    right: -21px;
    top: 0;
}

.button60-angle:hover:after {
    border-top: 60px solid;
    transition: .3s;
}

.button-angle-yagreen::after {
    border-top-color: var(--yagreen) !important;
}

.button-angle-yagreen:hover::after {
    border-top-color: var(--yalightgreen) !important;
}

.button-angle-yablack::after {
    border-top-color: var(--yagreen) !important;
}

.button-angle-yablack:hover::after {
    border-top-color: var(--yalightgreen) !important;
}

.button-angle-yawhite::after {
    border-top-color: var(--yawhite) !important;
}

.button-angle-yawhite:hover::after {
    border-top-color: var(--yawhite) !important;
}


.but-white {
    background: url(../images/but-white.png) no-repeat center center;
    width: 304.5px;
    font-size: 18px;
    margin-bottom: 10px;
}

.but-black {
    background: url(../images/but-black.png) no-repeat center center;
    width: 282px;
    font-size: 12px;
}

.page-banner {
    background-image: url(../images/index/banner.jpg?6);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 830px;
}

.page-banner .title {
    font-size: 44px;
}

.page-banner .text {
    font-size: 24px;
}

.bestoffer .title {
    font-size: 24px;
}

.bestoffer .text {
    font-size: 14px;
}

.white-angle {
    position: relative;
}

.white-angle::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-left-width: 64px;
    border-right-width: 0px;
    border-bottom: 162px solid var(--yawhite);
    transition: .3s;
    left: -64px;
    top: 0;
}

.form-control {
    height: 60px;
    color: var(--yablack);
    border-color: var(--yagray);
}

.form-control:focus {
    color: var(--yablack);
    background-color: var(--yawhite);
    border-color: var(--yagray);
    outline: 0;
    box-shadow: unset;
}

.form-check-label {
    font-size: 12px;
}

.form-check-input:checked {
    background-color: var(--yagray) !important;
    border-color: var(--yagray) !important;
}

.form-check-input,
.form-check-input:focus {
    border-color: var(--yagray) !important;
    outline: 0;
    box-shadow: unset;
}


/* Устаревшее */
.colors .color {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--yawhite);
}

.colors .color.active {
    border: 1px solid var(--yalightgray);
}

.colors .color .color-item {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: .5px solid;
}

/* */

.models .color {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--yawhite);
}

.models .color.active {
    border: 1px solid var(--yalightgray);
}

.models .color .color-item {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: .5px solid;
}

.models .specifications {
    font-size: 10px;
}

.models .specifications span {
    font-size: 14px;
}

.models .specifications .icon-wrap {
    width: 33px;
    height: 33px;
}


.car .warranty {
    font-size: 10px;
}

.car .h3 {
    font-size: 18px;
}

.car .h4 {
    font-size: 16px;
}

.car .h5 {
    font-size: 14px;
}

.swiper-nav {
    width: 91px;
    height: 91px;
    top: calc(50% - 45.5px);
    z-index: 10;
}

.swiper-next {
    right: -60px;
}

.swiper-prev {
    left: -60px;
}

.img-card {
    height: 321.5px;
    background-size: 102%;
    background-repeat: no-repeat;
    background-position: center;
    transition: .3s;
}

.img-card:hover {
    background-size: 122%;
    transition: .3s;
}

.w-lg {
    width: 62.75% !important;
}

.w-sm {
    width: 37.25% !important;
}

.w-lg-3 {
    width: 59.9% !important;
}

.w-sm-3 {
    width: 40.1% !important;
}

.bg-1 {
    background-image: url(../images/index/bg-1.png);
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 70%;
}

.bg-3 {
    background-image: url(../images/index/bg-3.png);
    background-repeat: no-repeat;
    background-position-x: 0%;
    background-position-y: -40%;
}

#yandex-map {
    height: 620px;
}

.remodal-overlay {
    background: rgba(0, 0, 0, .4);
}

.remodal-close,
.remodal-close:before {
    top: 0;
    left: unset;
    right: 0;
}

.alert {
    display: none;
}

.bottom-text-wrapper p {
    font-size: 32px;
    max-width: 612px;
}

.bottom-text-wrapper p span {
    font-size: 40px;
    color: #00CABF;
}

.cta-vs-bottom .text-white {
    font-size: 10px;
}

.top-text-wrapper p {
    font-size: 14px;
    max-width: 260px;
}

.top-text-wrapper p span {
    font-size: 18px;
}



/* ADAPTIVE */
@media (max-width: 1399.98px) {}

@media (max-width: 1365.98px) {
    .white-angle::after {
        border-bottom: 166px solid var(--yawhite);
    }
}

@media (max-width: 1199.98px) {
    .img-card {
        height: 218px;
    }

    .white-angle::after {
        border-bottom: 219px solid var(--yawhite);
    }
}

@media (max-width: 991.98px) {
    .bg-black-white {
        background: unset;
    }

    .bg-black-white .col-lg-6:first-child {
        background: var(--yablack);
    }

    .button60 {
        height: 60px;
        font-size: 12px;
    }

    .button60-angle::after {
        content: none;
    }

    .page-banner {
        background-image: url(../images/index/banner-m.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 500px;
    }

    .m-button {
        margin-top: 285px;
    }

    .page-banner .title {
        font-size: 20px;
    }

    .page-banner .text {
        font-size: 14px;
    }

    .w-lg {
        width: 100% !important;
    }

    .w-sm {
        width: 100% !important;
    }

    .w-lg-3 {
        width: 100% !important;
    }

    .w-sm-3 {
        width: 100% !important;
    }

    .img-card {
        height: 170px;
        background-size: 102%;
        background-repeat: no-repeat;
        background-position: center;
        transition: .3s;
    }

    .img-card:hover {
        background-size: 102%;
        transition: .3s;
    }

    .img-card .title {
        font-size: 11px;
    }

    .warranty {
        font-size: 12px;
    }

    h3,
    .h3 {
        font-size: 18px;
    }

    h2,
    .h2 {
        font-size: 24px;
    }

    .text-plus {
        font-size: 14px;
    }

    .w-75 {
        width: 100% !important;
    }
}

@media (max-width: 767.98px) {
    .page-banner {
        background-image: url(../images/index/banner-m-12-2025.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 40%;
        height: 432px;
    }

    .m-button {
        margin-top: 185px;
    }

    .cta-vs-bottom a {
        background-color: #0DBDB4 !important;
    }
}

@media (max-width: 575.98px) {
    .best-offer-row .text {
        font-size: 12px;
    }

    .remodal {
        padding: 25px 14px 20px 14px !important;
    }

    .form-check-label {
        font-size: 9px;
    }
}

@media (max-width: 413.98px) {
    .max-small-text {
        font-size: 9px;
    }
}

@media (max-width: 374.98px) {

    .cta-vs-bottom .text-white,
    .max-small-text {
        font-size: 8px;
    }
}

@media (min-width: 1920px) {
    .page-banner .text {
        font-size: 36px;
    }
}










.cookie {
	background-color: rgba(0, 0, 0, .8);
	z-index: 1000;
	display: none;
}
@media (max-width: 991px) {
	.cookie {
		min-height: 200px;
	}
}