.avantages {background-color: #eee;background-size: 100% 100%; background-image:url(/upload/adv-back.webp)}
.avantages .container{padding: 5% 0;display: flex;justify-content: space-between;gap:170px}
.avantages .container > div {width: 360px;}
.av--middle img.active{display: block}
.av--middle img{max-width: 447px;max-height: 922px;width: 100%;display: none}

.av--item {min-height: 130px;background-color: #fff;border-radius:10px;padding: 20px;margin-bottom: 20px;font-size: 18px;line-height: 22px;width: 100%;display: flex;flex-direction: column; opacity: 0.9;}
.av--right .av--item {float: right}
.av--item:hover, .av--item.selected {width: calc(100% + 100px);}
.av--item:hover .av--text, .av--item.selected .av--text {width: 100%;font-size: 29px;font-style: normal;font-weight: 400;line-height: 34.8px;letter-spacing: -0.87px}

/*
.av--item:hover .av--text{color:  #000;font-size: 29px;font-style: normal;font-weight: 400;line-height: 34.8px}
.av--item:hover .av--num{font-size: 24px;}
*/
.av--num {color: rgba(0, 0, 0, 0.70);font-size: 18px;font-style: normal;font-weight: 400;line-height: 21.6px;margin-bottom: 20px;}
.avantages .container > div.av--middle {width: 370px}

.av--left, .av--right {padding-top: 170px}
.av--left {position: relative;}
.av--title-box {position: absolute;top:0;left: 0;}
.av--title-box .btn--white svg{transform: rotate(0);}

.av--text {color: #000;font-size: 18px;font-style: normal;font-weight: 400;line-height: 21.6px;margin-top: auto;}

.av--title {font-size: 38px;font-weight: 400;line-height: 36px;color:#000;text-transform: uppercase;letter-spacing: -2.1px;
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%!important;
max-width: 100%!important;
text-align: center;
z-index: 20;
}
.av--title::before {
    content: '';
    position: absolute;
    width: 460px;
    height: 80px;
    background-color: #fff;
    border-radius: 15px;
    z-index: -10;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -22px;
}

.av--download {margin-top: 30px;position: relative}
.av--download .av--download-but {
    padding: 0 110px;
    background-color: var(--main);
    color: #fff;
    border-color: #fff;
    height: 70px;
    border-radius: 15px;
}
.av--download .av--download-but span {
    font-size: 18px;
}
.av--download .av--download-but svg * {
    stroke: #fff;
    fill: transparent;
}
.av--download .av--download-but:hover svg * {
    stroke: var(--main);
    fill: transparent;
}
.av--download .av--download-but:hover {
    border: 1px solid var(--main);
}
.av--download-but {display: flex;align-items: center;gap:5px}
body .av--download .footer--popup{left: calc(100% + 10px);top: 0;bottom: auto;transform: translateY(-50%);z-index: 33;}
body .av--download:hover .footer--popup{color:var(--text)}
body .av--download.--opened .footer--popup{display: block;opacity: 1;visibility: visible}


@media all and (max-width: 1600px) {
    .avantages .container{gap:140px}
    .av--num, .av--text {font-size: 14px;line-height: 17px}
    .av--item {min-height: 125px}
    .avantages .container > div.av--middle{width: 360px}
    .av--item:hover .av--text, .av--item.selected .av--text {font-size: 23px;line-height: 28px;letter-spacing: -0.69px}
}

@media all and (max-width: 1500px) {
    .av--item:hover, .av--item.selected {width: calc(100% + 70px)}
    .avantages .container{padding: 5% 40px;gap:5%}
}

@media all and (max-width: 1400px) {
    .av--item:hover, .av--item.selected {width: calc(100% + 50px)}
}

@media all and (max-width: 1300px) {
    .av--item:hover, .av--item.selected {width: calc(100% + 30px)}
}

@media all and (max-width: 1280px) {
    .avantages .container > div.av--middle {display: flex;align-items: center}
    .avantages{border-radius: 30px}
    .av--item:hover .av--text, .av--item.selected .av--text {font-size: 20px;line-height: 24px;letter-spacing: -0.54px}
}

@media all and (max-width: 1100px) {
    .av--item:hover, .av--item.selected {width: calc(100% + 30px)}
}

@media all and (min-width: 1024px) {
    /*.avantages {zoom:.8}*/
}
@media all and (max-width: 1024px) {
    .avantages {position: relative}
    .avantages .container {padding: 170px 0 30px 0;overflow-x: auto;flex-direction: column;position:static;width: calc(100% - 40px);}
    .avantages .container > div.av--middle {display: none}
    .avantages .container > div{width: 100%;height: auto;display: flex;flex-direction: row;gap:16px;}
    .av--item:hover {width: 100%}
    .avantages .container {margin:50px 20px 0 20px}
    .avantages{border-radius: unset}
    .av--item {width: 290px;min-width: 290px;height: auto}
    .av--left, .av--right {padding-top: 0;position: static}
    .av--title-box {top:30px;left:20px;}
    .av--text {font-size: 14px;}
    .av--text {margin-top: 30px}
    .av--item:hover .av--text, .av--item.selected .av--text {font-size: 14px;line-height: 17px;letter-spacing: normal}
}

@media all and (max-width: 767px) {
    .av--title {font-size: 24px;}
    body .av--download .footer--popup {
        left:0;top:auto;bottom:0;transform: translateY(calc(100% + 10px));
    }
    .av--download .av--download-but {
        height: 55px;

    }
    .av--download .av--download-but span {
        font-size: 14px;
    }
}