.supplies-block {
    padding: 120px 0px 80px;
    .wrapper {
        display: flex;
        gap: 34px;
    }
    .block-subtitle {
        font-family: var(--second-family);
        font-weight: 400;
        font-size: 16px;
        line-height: 150%;
        text-align: center;
        color: var(--grey-600);
        max-width: 590px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 32px;
    }
    .btn {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 44px;
    }
    .left-side {
        display: flex;
        flex-direction: column;
        width: 303px;
        min-width: 303px;
        gap: 44px;
        margin-right: auto;
    }
    .group {
        display: flex;
        flex-direction: column;
        position: relative;
    }
    .group.group-0:before {
        content: "";
        width: 215px;
        height: 170px;
        position: absolute;
        right: 0;
        transform: translateX(50%);
        top: 36px;
        background-image: url(../../blocks/supplies/images/line1.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        pointer-events: none;
        z-index: 3;
    }
    .group.group-0:after {
        content: "";
        width: 40px;
        height: 40px;
        top: 38px;
        right: 22px;
        position: absolute;
        background-image: url(../../blocks/supplies/images/ball.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        opacity: 0;
        transition: 0.5s;
        animation-name: circle-one;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-direction: reverse;
        z-index: 4;
    }
    .group.group-1:before {
        content: "";
        width: 170px;
        height: 50px;
        position: absolute;
        right: 0;
        transform: translateX(50%);
        top: 33px;
        background-image: url(../../blocks/supplies/images/line2.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        pointer-events: none;
        z-index: 3;
    }
    .group.group-1:after {
        content: "";
        width: 40px;
        height: 40px;
        top: 61px;
        right: -90px;
        position: absolute;
        background-image: url(../../blocks/supplies/images/ball.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        opacity: 0;
        transition: 0.5s;
        animation-name: circle-two;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-delay: 2s;
        animation-direction: reverse;
        z-index: 4;
    }
    .group.group-2:before {
        content: "";
        width: 170px;
        height: 50px;
        position: absolute;
        right: 0;
        transform: translateX(50%);
        top: -20px;
        background-image: url(../../blocks/supplies/images/line3.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        pointer-events: none;
        z-index: 3;
    }
    .group.group-2:after {
        content: "";
        width: 40px;
        height: 40px;
        top: -39px;
        right: -90px;
        position: absolute;
        background-image: url(../../blocks/supplies/images/ball.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        transition: 0.5s;
        opacity: 0;
        animation-name: circle-three;
        animation-duration: 2.5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-delay: 1s;
        animation-direction: reverse;
        z-index: 4;
    }
    .group.group-3:before {
        content: "";
        width: 170px;
        height: 215px;
        position: absolute;
        right: 0;
        transform: translate(50%, -50%);
        top: -59px;
        background-image: url(../../blocks/supplies/images/line4.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        pointer-events: none;
        z-index: 3;
    }
    .group.group-3:after {
        content: "";
        width: 40px;
        height: 40px;
        top: -39px;
        right: -90px;
        position: absolute;
        background-image: url(../../blocks/supplies/images/ball.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        transition: 0.5s;
        opacity: 0;
        animation-name: circle-four;
        animation-duration: 2.5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-delay: 2s;
        animation-direction: reverse;
        z-index: 4;
    }
    .group-name {
        font-weight: 500;
        font-size: 16px;
        line-height: 138%;
        color: var(--grey-600);
        margin-top: 8px;
    }
    .links {
        display: flex;
        gap: 8px;
    }
    .link-item {
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135.97deg, rgba(105, 170, 255, 0.12) 2.63%, rgba(104, 207, 208, 0.2) 46.11%, rgba(47, 139, 226, 0.25) 97.27%);
        border-radius: 12px;
        width: 56px;
        height: 56px;
    }
    .link-item.free {
        width: 100%;
        max-width: 80px;
    }
    .link-item img,
    .link-item svg {
        width: auto;
        height: auto;
        display: block;
        object-fit: contain;
        max-width: 60%;
        max-height: 60%;
    }
    .main-img {
        width: 37%;
        display: flex;
        background: linear-gradient(282.37deg, #54ffb8 -82.53%, #05c2bb 19.52%, #28aaff 115.79%);
        border-radius: 37px;
        position: relative;
        z-index: 4;
        max-height: 460px;
        &:before {
            content: "";
            position: absolute;
            inset: 9px;
            transform: translate(0px, 1px);
            z-index: -1;
            background: linear-gradient(282.37deg, #54ffb8 -82.53%, #05c2bb 19.52%, #28aaff 115.79%);
            filter: blur(10px);
            border-radius: 25px;
        }
    }
    .main-img-bg {
        display: flex;
        height: 100%;
        width: 100%;
        padding: 1px;
        border-radius: 40px;
        overflow: hidden;
    }
    .main-img-bg img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
        border-radius: 13px;
        border: 1px solid var(--black-200);
    }
    .right-side {
        display: flex;
        flex-direction: column;
        width: 30%;
        gap: 32px;
        padding-top: 8px;
    }
    .swiper-item {
        display: flex;
        flex-direction: column;
        padding: 36px 21px 40px 30px;
        border-radius: 20px;
        overflow: hidden;
        gap: 30px;
        background: linear-gradient(135.97deg, rgba(105, 195, 255, 0.04) 3.27%, rgba(143, 254, 255, 0.2) 46.76%, rgba(47, 139, 226, 0.25) 97.93%);
    }
    .client-holder {
        display: flex;
        gap: 6px;
    }
    .client-photo {
        width: 25px;
        min-width: 25px;
        height: 25px;
        display: flex;
        position: relative;
    }
    .client-photo img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
        display: block;
        object-fit: cover;
    }
    .client-photo:before {
        content: "";
        width: 6px;
        height: 6px;
        bottom: 1px;
        right: -2px;
        position: absolute;
        border-radius: 100%;
        border: 2px solid var(--white);
        background: var(--blue);
    }
    .client-holder__right {
        display: flex;
        flex-direction: column;
        border: 1.00px solid rgba(0, 0, 0, 0.1);
        background: var(--white);
        border-radius: 0 6px 6px 6px;
        padding: 6px 4px 6px 9px;
        max-width: 200px;
        width: 100%;
        position: relative;
    }
    .client-holder__name {
        font-weight: 600;
        font-size: 11px;
        line-height: 143%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--black);
    }
    .client-holder__comment {
        font-weight: 400;
        font-size: 11px;
        line-height: 143%;
        color: var(--black-600);
        padding-right: 40px;
    }
    .client-holder__date {
        position: absolute;
        bottom: 7px;
        right: 5px;
        font-weight: 400;
        font-size: 11px;
        line-height: 143%;
        color: var(--black-400);
    }
    .answer-holder {
        display: flex;
        flex-direction: column;
        margin-left: auto;
        max-width: 260px;
        border-radius: 7px 0 7px 7px;
        padding: 7px 10px;
        border: 1.00px solid rgba(0, 0, 0, 0.1);
        background: var(--white);
        position: relative;
    }
    .answer {
        font-weight: 400;
        font-size: 12px;
        line-height: 143%;
        color: var(--black);
        padding-right: 80px;
    }
    .answer-date {
        position: absolute;
        bottom: 7px;
        right: 15px;
        padding-right: 15px;
        font-family: var(--third-family);
        font-weight: 400;
        font-size: 12px;
        line-height: 143%;
        color: var(--text-quaternary);
    }
    .answer-date:before {
        content: "";    
        width: 10px;
        height: 7px;
        top: 4px;
        right: 0;
        position: absolute;
        background-image: url(../../blocks/supplies/images/readed.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .swiper-slide {
        opacity: 0 !important;
    }
    .swiper-slide-active {
        opacity: 1 !important;
    }
    .team-holder {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        padding: 36px;
        width: 100%;
        border-radius: 20px;
        background: linear-gradient(135.97deg, rgba(105, 195, 255, 0.04) 4.84%, rgba(143, 254, 255, 0.2) 48.35%, rgba(47, 139, 226, 0.25) 99.56%);
    }
    .team-holder .team-img {
        width: auto;
        max-width: 170px;
        display: flex;
        height: auto;
        max-height: 42px;
    }
    .team-holder .team-img img {
        width: auto;
        height: auto;
        display: block;
        object-fit: contain;
        max-width: 100%;
        max-height: 100%;
    }
    .plus {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        border: 1px dashed var(--grey-600);
        width: 42px;
        height: 42px;
        min-width: 42px;
    }
    @media (max-width: 1200px) { 
        padding: 40px 0px;
        margin: 0px -15px;
        width: calc(100% + 30px);
        overflow: hidden;
        .wrapper {
            gap: 13px;
            padding: 0px 15px;
        }
        .left-side {
            gap: 44px;
        }
        .group-name {
            font-size: 16px;
        }
        .main-img {
            max-height: 400px;
        }
        .swiper-item {
            padding: 16px;
        }
        .right-side {
            gap: 16px;
        }
        .team-holder {
            padding: 16px;
        }
        .link-item {
            width: 42px;
            min-width: 42px;
            height: 42px;
        }
        .link-item.free {
            max-width: 60px;
        }
        .group.group-0:before {
            top: 20px;
        }
        .group.group-1:before {
            top: 33px;
        }
        .group.group-3:before {
            width: 148px;
            height: 200px;
            position: absolute;
            right: 0;
            transform: translate(50%, -50%);
            top: -52px;
        }
        .main-title {
            text-align: center;
        }
    }
    @media (max-width: 996px) { 
        position: relative;
        &:before {
            content: "";
            width: 100%;
            height: 600px;
            left: -16px;
            top: 50px;
            position: absolute;
            background-image: url(../../blocks/supplies/images/suppAfter.png);
            background-size: contain;
            background-position: left;
            pointer-events: none;
            background-repeat: no-repeat;
        }
        &::after {
            content: "";
            width: 100%;
            height:350px;
            right: -16px;
            top: 21%;
            position: absolute;
            background-image: url(../../blocks/supplies/images/suppBefore.png);
            background-size: contain;
            background-position: right;
            pointer-events: none;
            background-repeat: no-repeat;
        }
        .swiper-item {
            padding: 24px 20px;
        } 
        .team-holder {
            padding: 24px 20px;
        } 
        .wrapper {
            flex-direction: column;
            align-items: center;
            margin-left: auto;
            margin-right: auto;
            max-width: 600px;
        }
        .left-side {
            flex-direction: row;
            gap: 0px;
            justify-content: space-between;
            margin-right: unset;
            width: 340px;
            padding-bottom: 127px;
        }
        .links {
            flex-direction: column;
        }
        .main-img {
            width: 100%;
            max-height: unset;
        }
        .right-side {
            width: 100%;
        }
        .group.group-0:before {
            background-image: url(../../blocks/supplies/images/line5.png);
            top: unset;
            bottom: -18px;
            right: -18px;
            height: 127px;
            width: 117px;
            transform: translate(50%, 100%);
        }
        .group.group-0:after {
            top: unset;
            bottom: -158px;
            right: -20px;
            animation-name: circle-one;
            opacity: 1;
        }
        .group.group-1:before {
            background-image: url(../../blocks/supplies/images/line6.png);
            top: unset;
            bottom: -16px;
            right: 34px;
            height: 127px;
            width: 39px;
            transform: translate(100%, 100%);
        }
        .group.group-1:after {
            top: unset;
            bottom: -158px;
            right: 4px;
            opacity: 0;
            animation-name: circle-two;
        }
        .group.group-2:before {
            background-image: url(../../blocks/supplies/images/line7.png);
            top: unset;
            bottom: -16px;
            right: 70px;
            height: 127px;
            width: 39px;
            transform: translate(100%, 100%);
        }
        .group.group-2:after {
            top: unset;
            bottom: -158px;
            right: 46px;
            opacity: 0;
            animation-name: circle-three;
        }
        .group.group-3:before {
            background-image: url(../../blocks/supplies/images/line8.png);
            top: unset;
            bottom: -18px;
            right: -14px;
            height: 127px;
            width: 120px;
            transform: translate(-50%, 100%);
        } 
        .group.group-3:after {
            top: unset;
            bottom: -158px;
            right: 128px;
            opacity: 0;
            animation-name: circle-four;
        }
        .link-item {
            width: 56px;
            min-width: 56px;
            height: 56px;
        }
        .group {
            align-items: center;
            width: 60px;
            &.group-2 {
                width: 77px;
            }
            &.group-3 {
                width: 85px;
                .link-item {
                    width: 81px;
                    min-width: 81px;
                }
            }
        }
        .group-name {
            text-align: center;
            font-size: 14px;
        }
        .main-img:before {
            inset: 2px;
            transform: translate(0px, -39px);
            z-index: -1;
            background: linear-gradient(282.37deg, #54ffb87d -82.53%, #05c2bb5e 19.52%, #28aaff45 115.79%);
            filter: blur(6px);
            border-radius: 35px;
        }
        .main-img {
            border-radius: 24px;
        }
        .main-img-bg {
            border-radius: 28px;
        }
    }
    @media (max-width: 498px) { 
        .group.group-0:before {
            right: -25px;
        }
        .group.group-1:before {
            right: 20px;
        }
        .group.group-2:before {
            right: 58px;
        }
        .group.group-3:before {
            right: -32px;
        }
    }
}
@keyframes circle-one {
    0% {
        opacity: 1;
        top: 184px;
        right: -89px;
    }
    20% {
        top: 180px;
        right: -20px;
    }
    25% {
        top: 170px;
        right: -3px;
    }
    35% {
        top: 151px;
        right: 7px;
    }
    70% {
        opacity: 1;
        top: 67px;  
        right: 7px;
    }
    80% {
        top: 38px;
        right: 22px;
    }
    90% {
        opacity: 1;
        top: 23px;
        right: 36px;
    }
    100% {
        opacity: 0;
        top: 18px;
        right: 62px;
    }
}
@keyframes circle-two {
    0% {
        opacity: 1;
        top: 61px;
        right: -90px;
    }
    40% {
        top: 61px;
        right: -19px;
    }
    50% {
        opacity: 1;
        top: 52px;
        right: 0px;
    }
    70% {
        top: 29px;
        right: 20px;
    }
    85% {
        opacity: 1;
        top: 17px;
        right: 34px;
    }
    100% {
        opacity: 0;
        top: 14px;
        right: 58px;
    }
}
@keyframes circle-three {
    0% {
        opacity: 1;
        top: -39px;
        right: -90px;
    }
    40% {
        top: -39px;
        right: -26px;
    }
    55% {
        opacity: 1;
        top: -30px;
        right: -3px;
    }
    75% {
        opacity: 1;
        top: -7px;
        right: 18px;
    }
    90% {
        opacity: 1;
        top: 5px;
        right: 33px;
    }
    100% {
        opacity: 0;
        top: 8px;
        right: 53px;
    }
}
@keyframes circle-four {
    0% {
        opacity: 1;
        top: -161px;
        right: -90px;
    }
    20% {
        top: -157px;
        right: -19px;
    }
    30% {
        opacity: 1;
        top: -143px;
        right: -1px;
    }
    45% {
        opacity: 1;
        top: -124px;
        right: 6px;
    }
    70% {
        opacity: 1;
        top: -47px;
        right: 8px;
    }
    80% {
        opacity: 1;
        top: -25px;
        right: 14px;
    }
    90% {
        opacity: 1;
        top: -5px;
        right: 28px;
    }
    100% {
        opacity: 0;
        top: 6px;
        right: 58px;
    }
}
@media (max-width: 1200px) { 
    @keyframes circle-one {
        0% {
            opacity: 1;
            top: 168px;
            right: -89px;
        }
        20% {
            top: 164px;
            right: -20px;
        }
        25% {
            top: 154px;
            right: -3px;
        }
        35% {
            top: 135px;
            right: 7px;
        }
        70% {
            opacity: 1;
            top: 51px;  
            right: 7px;
        }
        80% {
            top: 22px;
            right: 22px;
        }
        90% {
            opacity: 1;
            top: 7px;
            right: 36px;
        }
        100% {
            opacity: 0;
            top: 2px;
            right: 62px;
        }
    }
    @keyframes circle-two {
        0% {
            opacity: 1;
            top: 61px;
            right: -90px;
        }
        40% {
            top: 61px;
            right: -19px;
        }
        50% {
            opacity: 1;
            top: 52px;
            right: 0px;
        }
        70% {
            top: 29px;
            right: 20px;
        }
        85% {
            opacity: 1;
            top: 17px;
            right: 34px;
        }
        100% {
            opacity: 0;
            top: 14px;
            right: 58px;
        }
    }
    @keyframes circle-three {
        0% {
            opacity: 1;
            top: -39px;
            right: -90px;
        }
        40% {
            top: -39px;
            right: -26px;
        }
        55% {
            opacity: 1;
            top: -30px;
            right: -3px;
        }
        75% {
            opacity: 1;
            top: -7px;
            right: 18px;
        }
        90% {
            opacity: 1;
            top: 5px;
            right: 33px;
        }
        100% {
            opacity: 0;
            top: 8px;
            right: 53px;
        }
    }
    @keyframes circle-four {
        0% {
            opacity: 1;
            top: -145px;
            right: -90px;
        }
        20% {
            top: -142px;
            right: -15px;
        }
        30% {
            opacity: 1;
            top: -128px;
            right: -1px;
        }
        45% {
            opacity: 1;
            top: -120px;
            right: 0px;
        }
        70% {
            opacity: 1;
            top: -47px;
            right: 6px;
        }
        80% {
            opacity: 1;
            top: -25px;
            right: 14px;
        }
        90% {
            opacity: 1;
            top: -5px;
            right: 28px;
        }
        100% {
            opacity: 0;
            top: 6px;
            right: 58px;
        }
    }
}
@media (max-width: 996px) { 
    @keyframes circle-one {
        0% {
            opacity: 1;
            bottom: -150px;
            right: -95px;
        }
        20% {
            bottom: -100px;
            right: -90px;
        }
        35% {
            bottom: -85px;
            right: -80px;
        }
        50% {
            opacity: 1;
            bottom: -80px;
            right: -40px;
        }
        70% {
            bottom: -80px;
            right: -2px;
        }
        85% {
            opacity: 1;
            bottom: -70px;
            right: 15px;
        }
        100% {
            opacity: 0;
            bottom: -29px;
            right: 15px;
        }
    }
    @keyframes circle-two {
        0% {
            opacity: 1;
            bottom: -158px;
            right: -24px;
        }
        30% {
            bottom: -120px;
            right: -24px;
        }
        50% {
            opacity: 1;
            bottom: -100px;
            right: -21px;
        }
        60% {
            bottom: -88px;
            right: -19px;
        }
        80% {
            opacity: 1;
            bottom: -69px;
            right: 5px;
        }
        100% {
            opacity: 0;
            bottom: -40px;
            right: 14px;
        }
    }
    @keyframes circle-three {
        0% {
            opacity: 1;
            bottom: -160px;
            right: 50px;
        }
        40% {
            bottom: -100px;
            right: 48px;
        }
        55% {
            opacity: 1;
            bottom: -75px;
            right: 32px;
        }
        65% {
            opacity: 1;
            bottom: -60px;
            right: 18px;
        }
        80% {
            opacity: 1;
            bottom: -50px;
            right: 13px;
        }
        100% {
            opacity: 0;
            bottom: -40px;
            right: 10px;
        }
    }
    @keyframes circle-four {
        0% {
            opacity: 1;
            bottom: -160px;
            right: 145px;
        }
        15% {
            bottom: -140px;
            right: 144px;
        }
        25% {
            opacity: 1;
            bottom: -110px;
            right: 143px;
        }
        40% {
            opacity: 1;
            bottom: -95px;
            right: 141px;
        }
        50% {
            opacity: 1;
            bottom: -85px;
            right: 130px;
        }
        60% {
            opacity: 1;
            bottom: -85px;
            right: 110px;
        }
        70% {
            opacity: 1;
            bottom: -85px;
            right: 85px;
        }
        80% {
            opacity: 1;
            bottom: -80px;
            right: 55px;
        }
        90% {
            opacity: 1;
            bottom: -65px;
            right: 33px;
        }
        100% {
            opacity: 0;
            bottom: -56px;
            right: 28px;
        }
    }
}
@media (max-width: 498px) { 
    @keyframes circle-one {
        0% {
            opacity: 1;
            bottom: -150px;
            right: -100px;
        }
        20% {
            bottom: -100px;
            right: -97px;
        }
        35% {
            bottom: -85px;
            right: -85px;
        }
        50% {
            opacity: 1;
            bottom: -85px;
            right: -40px;
        }
        70% {
            bottom: -80px;
            right: -2px;
        }
        85% {
            opacity: 1;
            bottom: -65px;
            right: 15px;
        }
        100% {
            opacity: 0;
            bottom: -29px;
            right: 15px;
        }
    }
    @keyframes circle-two {
        0% {
            opacity: 1;
            bottom: -158px;
            right: -38px;
        }
        30% {
            bottom: -130px;
            right: -38px;
        }
        40% {
            opacity: 1;
            bottom: -115px;
            right: -37px;
        }
        55% {
            bottom: -100px;
            right: -35px;
        }
        70% {
            bottom: -76px;
            right: -25px;
        }
        85% {
            opacity: 1;
            bottom: -60px;
            right: -6px;
        }
        100% {
            opacity: 0;
            bottom: -40px;
            right: 0px;
        }
    }
    @keyframes circle-three {
        0% {
            opacity: 1;
            bottom: -158px;
            right: 35px;
        }
        30% {
            opacity: 1;
            bottom: -130px;
            right: 35px;
        }
        40% {
            opacity: 1;
            bottom: -115px;
            right: 34px;
        }
        55% {
            bottom: -100px;
            right: 34px;
        }
        70% {
            bottom: -76px;
            right: 25px;
        }
        80% {
            opacity: 1;
            bottom: -60px;
            right: 4px;
        }
        90% {
            opacity: 1;
            bottom: -50px;
            right: -1px;
        }
        100% {
            opacity: 0;
            bottom: -40px;
            right: -4px;
        }
    }
    @keyframes circle-four {
        0% {
            opacity: 1;
            bottom: -150px;
            right: 127px;
        }
        20% {
            bottom: -100px;
            right: 127px;
        }
        35% {
            opacity: 1;
            bottom: -85px;
            right: 105px;
        }
        50% {
            opacity: 1;
            bottom: -83px;
            right: 80px;
        }
        70% {
            opacity: 1;
            bottom: -80px;
            right: 40px;
        }
        85% {
            opacity: 1;
            bottom: -70px;
            right: 20px;
        }
        90% {
            opacity: 1;
            bottom: -60px;
            right: 15px;
        }
        100% {
            opacity: 0;
            bottom: -55px;
            right: 10px;
        }
    }
}