:root {
    --yawhite: #fff;
    --yablack: #151515;
    --yagray: #e6e6e6;
    --yablue: #3A83A3;
    --yadarkblue: #344E56;
    --yadarkgray: #181D21;
    --yalightdark: #888888;
    --yared: #d23359;
    --bs-form-invalid-color: #d23359;
    --bs-form-invalid-border-color: #d23359;
    --yanoactive: #A6A6A6;
    --yadarksilver: #0D171A;


    --yaradius4: 4px;
    --yaradius6: 6px;
    --yaradius8: 8px;
    --yaradius10: 10px;
    --yaradius24: 24px;
    --yaradius36: 36px;

    --yawidth1px: 1px;
}

/* color */
.c-yawhite {color: var(--yawhite) !important;transition: .2s;}
.c-yablack {color: var(--yablack) !important;transition: .2s;}
.c-yagray {color: var(--yagray) !important;transition: .2s;}
.c-yablue {color: var(--yablue) !important;transition: .2s;}
.c-yadarkblue {color: var(--yadarkblue) !important;transition: .2s;}
.c-yalightdark {color: var(--yalightdark) !important;transition: .2s;}
.c-yared {color: var(--yared) !important;transition: .2s;}
.c-yadarkgray {color: var(--yadarkgray) !important;transition: .2s;}
.c-yanoactive {color: var(--yanoactive) !important;transition: .2s;}
.c-yadarksilver {color: var(--yadarksilver);transition: .2s;}

/* :hover color */
.c-h-yawhite:hover {color: var(--yawhite) !important;transition: .2s;}
.c-h-yablack:hover {color: var(--yablack) !important;transition: .2s;}
.c-h-yagray:hover {color: var(--yagray) !important;transition: .2s;}
.c-h-yablue:hover {color: var(--yablue) !important;transition: .2s;}
.c-h-yadarkblue:hover {color: var(--yadarkblue) !important;transition: .2s;}
.c-h-yalightdark:hover {color: var(--yalightdark) !important;transition: .2s;}
.c-h-yared:hover {color: var(--yared) !important;transition: .2s;}
.c-h-yadarkgray:hover {color: var(--yadarkgray) !important;transition: .2s;}

/* background-color */
.bg-yawhite {background-color: var(--yawhite);transition: .2s;}
.bg-yablack {background-color: var(--yablack);transition: .2s;}
.bg-yagray {background-color: var(--yagray);transition: .2s;}
.bg-yablue {background-color: var(--yablue);transition: .2s;}
.bg-yadarkblue {background-color: var(--yadarkblue);transition: .2s;}
.bg-yalightdark {background-color: var(--yalightdark);transition: .2s;}
.bg-yared {background-color: var(--yared);transition: .2s;}
.bg-yadarkgray {background-color: var(--yadarkgray);transition: .2s;}

/* :hover background-color */
.bg-h-yawhite:hover {background-color: var(--yawhite);transition: .2s;}
.bg-h-yablack:hover {background-color: var(--yablack);transition: .2s;}
.bg-h-yagray:hover {background-color: var(--yagray);transition: .2s;}
.bg-h-yablue:hover {background-color: var(--yablue);transition: .2s;}
.bg-h-yadarkblue:hover {background-color: var(--yadarkblue);transition: .2s;}
.bg-h-yalightdark:hover {background-color: var(--yalightdark);transition: .2s;}
.bg-h-yared:hover {background-color: var(--yared);transition: .2s;}
.bg-h-yadarkgray:hover {background-color: var(--yadarkgray);transition: .2s;}

/* :active background-color */
.bg-a-yawhite:active {background-color: var(--yawhite);transition: .2s;}
.bg-a-yablack:active {background-color: var(--yablack);transition: .2s;}
.bg-a-yagray:active {background-color: var(--yagray);transition: .2s;}
.bg-a-yablue:active {background-color: var(--yablue);transition: .2s;}
.bg-a-yadarkblue:active {background-color: var(--yadarkblue);transition: .2s;}
.bg-a-yalightdark:active {background-color: var(--yalightdark);transition: .2s;}
.bg-a-yared:active {background-color: var(--yared);transition: .2s;}
.bg-a-yadarkgray:active {background-color: var(--yadarkgray);transition: .2s;}

/* border */
.b-yawhite {border: var(--yawhite) 1px solid;transition: .2s;}
.b-yablack {border: var(--yablack) 1px solid;transition: .2s;}
.b-yagray {border: var(--yagray) 1px solid;transition: .2s;}
.b-yablue {border: var(--yablue) 1px solid;transition: .2s;}
.b-yadarkblue {border: var(--yadarkblue) 1px solid;transition: .2s;}
.b-yalightdark {border: var(--yalightdark) 1px solid;transition: .2s;}
.b-yared {border: var(--yared) 1px solid;transition: .2s;}
.b-yadarkgray {border: var(--yadarkgray) 1px solid;transition: .2s;}
.b-yadarksilver {border: var(--yadarksilver) 1px solid;transition: .2s;}

/* :hover border */
.b-h-yawhite:hover {border: var(--yawhite) 1px solid;transition: .2s;}
.b-h-yablack:hover {border: var(--yablack) 1px solid;transition: .2s;}
.b-h-yagray:hover {border: var(--yagray) 1px solid;transition: .2s;}
.b-h-yablue:hover {border: var(--yablue) 1px solid;transition: .2s;}
.b-h-yadarkblue:hover {border: var(--yadarkblue) 1px solid;transition: .2s;}
.b-h-yalightdark:hover {border: var(--yalightdark) 1px solid;transition: .2s;}
.b-h-yared:hover {border: var(--yared) 1px solid;transition: .2s;}
.b-h-yadarkgray:hover {border: var(--yadarkgray) 1px solid;transition: .2s;}

/* border-radius */
.b-radius-yaradius-4 {border-radius: var(--yaradius4);}
.b-radius-yaradius-6 {border-radius: var(--yaradius6);}
.b-radius-yaradius-8 {border-radius: var(--yaradius8);}
.b-radius-yaradius-10 {border-radius: var(--yaradius10);}
.b-radius-yaradius-24 {border-radius: var(--yaradius24);}
.b-radius-yaradius-24-top {border-radius: var(--yaradius24) var(--yaradius24) 0 0;}
.b-radius-yaradius-36 {border-radius: var(--yaradius36);}
.b-radius-yaradius-36 {border-radius: var(--yaradius36);}

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

/* border-radius-circle */
.b-radius-circle {border-radius: 50%;}

.w-yawidth-1px {width: var(--yawidth1px);}

.cursor-pointer {cursor: pointer;}

.bg-blur { backdrop-filter: blur(15px);}

.small-button {
    height: 45px;
    font-size: 14px;
}
.large-button {
    height: 54px;
    font-size: 16px;
}

.alert {display: none;}
input.form-control {
    height: 54px;
    font-size: 16px;
}

input.form-control:focus {
    border-color: var(--yablue);
    outline: 0;
    box-shadow: none;
}
input.form-control.black {
    background-color: var(--yablack);
    color: var(--yawhite);    
}
input.form-control.black::placeholder {
    color: var(--yawhite);    
}

.form-check-input:checked {
    background-color: var(--yablue);
    border-color: var(--yablue);
}
.form-check-input, .form-check-input:focus {
    border-color: var(--yablue);
    outline: 0;
    box-shadow: none;
}
.checkbox, .control-label, .form-control-feedback, .help-block, .radio, label {
    font-size: 12px;
}

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

}

.remodal-close,
.remodal-close:before {
    top: 10px;
    left: unset;
    right: 10px;
}
.cookie {
    display: none;
    left: 0;
    right: 0;
    z-index: 9999;
    font-size: 10px;
}
.position-xl-absolute {position: absolute;}


/* banner */
body {
    font-family: 'Involve';
   
    background-size: 100%;
}

.logo {width: 210px; height: auto;}
.logo-title {font-size: 16px;}
.logo-text {font-size: 12px;}

.head-icon {width: 25px; height: 25px;}
.head-link  {font-size: 14px;}
.head-button {width: 200px;}

.page-banner {
    height: 720px;
    background-image: url(./../images/banner.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
.page-banner .title {font-size: 64px;}
.page-banner .subtitle {font-size: 28px;}
.page-banner .price-block {
    background-color: rgba(255, 255, 255, .05);
    padding: 14px 30px;
    font-size: 64px;
    backdrop-filter: blur(10px);
}
.page-banner-button {width: 260px;padding-top: 30px;padding-bottom: 30px;}
.page-banner-button, .button-clip, .price-block  {
    clip-path: polygon(
    0% 0%,                 /* Точка 1: верхний левый угол */
    100% 0%,               /* Точка 2: верхний правый угол */
    100% calc(100% - 20px),/* Точка 3: начало скоса (справа) */
    calc(100% - 20px) 100%,/* Точка 4: конец скоса (снизу) */
    0% 100%                /* Точка 5: нижний левый угол */  );
}
.page-banner-mark {font-size: 12px;}

.best-offer .title {font-size: 36px;}

 .section-model-cards {
    padding-bottom: 75px;
}

.card-model {
    border: 1px solid #A6A6A6;
    margin-top: 30%;
    min-height: 160px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 25px;  
    position: relative; 
}

.card-model.active {
    outline: 1px solid #181D21;
    outline-offset: -3px; 
    border-color: transparent;
}

.card-img-wrap {
    margin-top: -20%;
    text-align: center;
    position: relative;
    width: 100%;
}
.card-img-wrap img {
    cursor: pointer;
    position: relative;
    z-index: 2; 
    max-height: 130px; 
    object-fit: contain;
}


.card-btn-wrap-model {
    display: grid;
    place-items: center;
    width: 100%;
    margin-top: 15px;
}

.card-btn-wrap a, .card-btn-wrap-model a {
    border: 1px solid #A6A6A6;
    padding: 16px 40px;
    transition: all 0.4s ease;
    text-align: center;
    display: inline-block;
    width: 240px; 
    box-sizing: border-box;
    background: #ffffff;

}
.card-btn-wrap a.active, .card-btn-wrap-model a.active {
    border: 1px solid #181D21;
    padding: 16px 40px;
    transition: all 0.4s ease;
    text-align: center;
    display: inline-block;
    width: 240px; 
    box-sizing: border-box;
    background: #ffffff;

}

.badge {
    position: absolute;
    top: -90px;
    right: 0;
    background-color: #1a71a3;
    color: #ffffff;
    font-size: 11px;
    font-weight: 500;
    padding: 6px 15px;
    letter-spacing: 0.3px;
    z-index: 10; 
    border-radius: 0; 
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

@media (min-width: 1200px) {
    .image-skew-bg {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
        position: relative;
        max-width: 585px;
    }
    .model-card-view {
        margin-top: -240px;
        
    }
    
    .w-xl-125 {
        width: 110% !important;
        max-width: none !important;
    }
    
    .model-card {
        overflow-x: hidden;
    }
}

@media (max-width: 767.99px) {
     .model-card-view {
        margin-top: -65px;
        border: none;

    }

}
.line-top-border {
    border-top: 1px solid #fff;
}


.card-section .card-description {
    padding: 0 20px 20px 20px;
}

.card-description-images {
    display: flex;
    justify-content: center;
    margin-top: -15%;
}

.card-btn-wrap .card-btn {
    opacity: 0.43;
    min-height: 8.5px;
    width: 22%;
    margin: 4px 2px 0 2px;
}
.card-btn-wrap .card-btn.active {
    opacity: 1;

}
.card-btn-wrap.position-absolute {
    width: 98%;
    padding-left: 1%;
    padding-right: 1%;
    padding-bottom: 11px;
    /* left: 50%;
    transform: translateX(-50%); */
}

.card-description .card-list {
    padding-left: 0;
}

.card-description .card-list li {
    list-style-type: none;
    width: fit-content;
}

.card-title-wrap {
    font-size: 24px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 20px;
}

.card-description-images {
    display: flex;
    justify-content: center;
    margin-top: -15%;
}

.card-list,
.card-description-images img {
    transition: opacity 1.5s ease;
}

.card-list.active,
.card-description-images img.active {
    opacity: 1;
}

.card-list .card-list-item {
    position: relative;
    padding-bottom: 16px;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 1%;
    transition: all 0.45s ease;
}

.card-list .card-list-item::before {
    content: ' ';
    position: absolute;
    width: 22px;
    bottom: 9px;
    background: rgb(59, 157, 178);
    height: 5px;
    left: 0;
}

.card-list[data-tab-content="1"] .card-list-item:first-child::before,
.card-list[data-tab-content="2"] .card-list-item:nth-child(2)::before,
.card-list[data-tab-content="3"] .card-list-item:nth-child(3)::before,
.card-list[data-tab-content="4"] .card-list-item:nth-child(4)::before {
    width: 100%;
}

.card-list[data-tab-content="1"] .card-list-item:first-child,
.card-list[data-tab-content="2"] .card-list-item:nth-child(2),
.card-list[data-tab-content="3"] .card-list-item:nth-child(3),
.card-list[data-tab-content="4"] .card-list-item:nth-child(4) {
    font-weight: 700;
}

.model-card {
    background-repeat: no-repeat;
    background-position: 370px -64px;
    background-size: 50%;
}
.model-card .model-image {
    bottom: 100px;
    left: -140px;
}
.model-card .model-colors {
    bottom: 55px;
    left: 100px;
}
.model-card .model-colors-item {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.model-card .model-colors-item .inner {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: none;
}
.model-card .model-colors-item.active .inner {
    display: block;
}

/*////////////////////////*/
.gallery-swiper-nav {
    width: 55px;
    height: 55px;
    top: calc(50% - 27.5px);
    z-index: 1;
}
.swiper-next {right: -13px;}
.swiper-prev {left: -13px;}

.model-card .discount {font-size: 18px;}
.model-card .futures-item {font-size: 18px;}
.model-card .futures-icon-wrap {width: 25px; height: 25px;}

.model-card .specifications-icon-wrap {width: 33px; height: 33px;}
.model-card .specifications-item .value {font-size: 14px;}
.model-card .specifications-item .text {font-size: 10px;}

.model-card .sizes-item .value {font-size: 80px;}
.model-card .sizes-item .text {font-size: 16px;}


.cis-tabs-item {
    border-bottom: 4px var(--yagray) solid;
    transition: .2s;
}
.cis-tabs-item.active, .cis-tabs-item:hover {
    border-bottom: 4px var(--yablue) solid;
    transition: .2s;
}
.cis-tabs-item-logo {
    height: 15px;
    width: auto;
}

.cis-card .warranty {font-size: 10px;}
.cis-card .count {font-size: 12px;}
.cis-card .count span {font-size: 8px;}
.cis-card-title {font-size: 24px;}
.cis-card-price {font-size: 18px;}
.cis-card-price span {font-size: 12px;}
.cis-swiper-nav {
    width: 55px;
    height: 55px;
    top: calc(50% - 27.5px);
    z-index: 1;
}

.quiz-bg {width: 663px; height: auto;}
.quiz-image {margin-top: -175px;}

.quiz-title {font-size: 42px;}
.quiz-text {font-size: 24px;}

/*////////////////////////*/

.contacts-title {font-size: 42px;}
.contacts-text {font-size: 20px;}
.contacts-phone {font-size: 28px;}
.contact-clip {
        clip-path: polygon(
    0% 0%,                 /* Точка 1: верхний левый угол */
    100% 0%,               /* Точка 2: верхний правый угол */
    100% calc(100% - 120px),/* Точка 3: начало скоса (справа) */
    calc(100% - 120px) 100%,/* Точка 4: конец скоса (снизу) */
    0% 100%                /* Точка 5: нижний левый угол */  );
}

#yandex-map {
    height: 520px; 
    position: relative;
    z-index: 1; /* Карта должна быть на нижнем слое */
}

/* Стили плашки для десктопных экранов */
@media (min-width: 1200px) {
    .map-plate {
        position: absolute;
        top: 50%;
        transform: translateY(-50%); /* Центрируем строго по вертикали относительно карты */
        left: 12px; /* Выравнивание по левому краю контейнера Bootstrap (с учетом padding) */
        
        /* Управляем шириной: col-xl-5 это примерно 41.6%, 
           делаем плашку чуть шире, чтобы она заезжала на карту */
        width: 45%; 
        height: 85%; /* Плашка будет чуть меньше высоты карты, как на фото */
        
        z-index: 10; /* Перекрываем карту */
        
        /* Эффект срезанного правого нижнего угла */
        clip-path: polygon(0 0, 100% 0, 100% 83%, 83% 100%, 0 100%);
    }
}

/* Стили плашки для мобильных устройств (чтобы верстка не ломалась) */
@media (max-width: 1199.98px) {
    .map-plate {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
        clip-path: none; /* На мобилках лучше оставить ровные углы */
    }
}


.footer {font-size: 12px;}
.footer-title {font-size: 28px;}
.footer-subtitle {font-size: 14px;}



/* ADAPTIVE */
@media (max-width: 1600.98px) {
    .page-banner {height: 720px;}
}
@media (max-width: 1536.98px) {
    .page-banner {height: 680px;}
}
@media (max-width: 1440.98px) {
    .page-banner {height: 550px;}
}
@media (max-width: 1399.98px) {
    .page-banner {height: 460px;}
}

@media (max-width: 1365.98px) {
    .page-banner {height: 420px;}
}

@media (max-width: 1199.98px) {
    .position-xl-absolute {position: initial;}
}

@media (max-width: 991.98px) {
    .b-radius-md-none {border-radius: unset;}
    .b-md-none {border: none;}

        
    .logo {width: 135px; height: auto;}
    .logo-title {font-size: 14px;}
    .logo-text {font-size: 10px;}
    .head-icon {width: 32px; height: 32px;}

    .page-banner {background-image: url(./../images/banner-m.jpg);}

    .page-banner {height: 450px;}
    .page-banner .title {font-size: 44px;}
    .page-banner .subtitle {font-size: 24px;}
    .page-banner .price-block {font-size: 40px; padding: 4px 14px;}
    .page-banner-button {width: 100%;}

    .model-card .model-image {width: 100%;}
    .model-card {
        background-repeat: no-repeat;
        background-position: 70px 125px;
        background-size: 70%;
    }
    .model-card .sizes-item .value {font-size: 50px;}

    .sizes-item {width: 49%;}

    .quiz-bg {width: 100%;}
    .quiz-title {font-size: 36px;}
    .quiz-text {font-size: 18px;}

    .advantages .h3 {font-size: 40px;}
    .best-offer .title {font-size: 30px;}
    .cis-tabs{overflow-x: scroll;}

    .contacts-title {font-size: 24px;}
    .contacts-text {font-size: 14px;}
    .contacts-phone {font-size: 20px;}
}

@media (max-width: 768.98px) {

}

@media (max-width: 575.98px) {
.footer.bg-yadarkgray {background-color: #ffffff !important;}
.footer.c-yawhite {color: #000000 !important;}
 .section-model-cards {padding-bottom: 40px;}
}

@media (max-width: 479.98px) {
}

@media (max-width: 407.98px) {
    .page-banner {height: 440px;}
    .quiz-image {margin-top: -85px;}
    .quiz-button {width: 100%;}
    .model-card .sizes-item .value {font-size: 40px;}
  
}

@media (max-width: 404.98px) {
    .model-card .discount {font-size: 12px;}
}

@media (max-width: 379.98px) {
}
@media (max-width: 360.98px) {
    .model-card .discount {font-size: 12px;}
}

@media (max-width: 339.98px) {
}