.description-left {
    width: 473px;
    min-width: 473px;
}
.description-left h1 {
    display: inline;
}
.description-left__link {
    border-bottom: 1px solid var(--color-steel);
    margin-left: 48px;
    padding-bottom: 8px;
    position: relative;
    top: -8px;
}
.description-left__link:hover {
    color: var(--color-black);    
    border-bottom: 1px solid var(--color-black);
    transition: all .3s;
}
.description-right {
    padding-top: 24px;
}
.description-right__item {
    width: calc((100% - 49px - 49px)/3);
}
.description-right__item-line {
    height: auto;
    width: 1px;
    min-width: 1px;
    background: linear-gradient(180deg, #FFEBED 0%, #F5C3C8 100%);
}

.top-banner {
    padding-top: 24px;
    padding-bottom: 24px;
}
.top-banner img {
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.tab-button {
    border-radius: 8px;
    border: 1px solid #E9F1F8;
    padding: 16px 24px;
    cursor: pointer;
    transition: all .3s;
}
.tab-button:hover,
.tab-button.active {
    background-color: var(--color-ice);
    border-color: #0994C9;
}
.product-item {
    width: calc(((100% - 24px) / 2 - 24px) / 2);
}
.product-item.wide {
    width: calc((100% - 24px) / 2);
}
.product-img__wrap {
    width: 100%;
    height: 370px;
    overflow: hidden;
}
.product-img {
    width: 100%;
    height: inherit;
    object-fit: cover;
    transition: all .3s;
}
.product-item:hover .product-img {
    scale: 1.1;
    transition: all .3s;
}

.card {
    padding: 48px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;    
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;    
    background-image: url('../img/card-bg.png');
}
.card:hover .color-black {
    color: var(--color-white);
    transition: all .3s;
}
.card:hover .btn-link {
    color: var(--color-white);
    border: 1px solid var(--color-white);
    transition: all .3s;
}
.card:hover .card-img img {
    scale: 1.1;
    transition: all .3s;
}
.card .btn-link, .card-link .btn-link {
    padding: 12px 24px;
    border-radius: 8px;
    border: 1px solid var(--color-black);
    box-sizing: border-box;
    width: fit-content;
    position: relative;
    overflow: hidden;
    z-index: 2;
    transition: all .3s;
}
.card .btn-link:hover {
    border: 1px solid transparent;
    transition: all .3s;
}
.card .btn-link::after, .card-link .btn-link::after {
    opacity: 0;
    transition: all .3s;
}
.card .btn-link:hover::after, .card-link .btn-link:hover::after {
    content: ''; 
    background: linear-gradient(90.4deg, #65BCDD 13.06%, #13769B 77.53%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    opacity: 1;
    transition: all .3s;
}
.card .btn-link span, .card-link .btn-link span {
    position: relative;
    z-index: 1;
}
.card-link .btn-link:hover {
    color: var(--color-white);
    border: 1px solid transparent;
    transition: all .3s;
}

.card-first {    
    width: calc((100% - 48px)/3);
}
.card-first .card {
    width: 100%;
}
.card-link {
    padding: 48px;
    min-height: 262px;
    width: 100%;
    border-radius: 8px;
}
.card-img img {
    object-fit: cover;
    height: inherit;
    max-width: 100%;
    transition: all .3s;
}

.card::after {
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: -1;
    transition: all .3s;
}
.card:hover::after {
    opacity: 0;
    transition: all .3s;
}
.card::before {
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: -1;
    transition: all .3s;
    opacity: 0;
}
.card:hover::before {
    opacity: 1;
    transition: all .3s;
}

.card1 {
    height: 636px;
    width: 100%;
}
.card1::after {
    background-image: linear-gradient(90.4deg, #B9E8FA 13.06%, #D9F4FF 74.84%);
}
.card1::before {
    background-image: linear-gradient(88.31deg, #00A0E3 2.87%, #024999 97.13%);
}
.card1 .card-img {
    height: 379px;
    margin-top: -48px;
    width: calc(100% + 96px);
    margin-left: -48px;
}

.card2 {
    width: 100%;
    height: 306px;
}
.card2::after {
    background: linear-gradient(90deg, #FFEBED 0%, #F5C3C8 100%);
}
.card2::before {
    background: linear-gradient(90.14deg, #FC818D 0%, #DA4151 95.83%);
}
.card2 .card-img {
    position: absolute;
    top: 0;
    right: 0;
    height: 350px;
}
.card2 .card-img img {
    position: relative;
    right: -36%;
}

.card3 {
    width: calc((100% - 24px)/2);
    height: 592px;
}
.card3::after {
    background: linear-gradient(88.31deg, #FCDFC3 2.87%, #FFE9DB 93.21%);
}
.card3::before {
    background: linear-gradient(88.31deg, #F7CEA3 2.87%, #D59167 93.21%);
}
.card3 .card-img {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 296px;
}

.card4 {
    width: calc((100% - 24px)/2);
}
.card4::after {
    background: linear-gradient(88.31deg, #ECF8CF 2.87%, #C4EBB7 97.13%);
}
.card4::before {
    background: linear-gradient(88.31deg, #A6BE67 2.87%, #61AE46 97.13%);
}
.card4 .card-img {
    position: absolute;
    bottom: 0;
    left: 0;
}

.card-left {
    width: calc((100% - 48px)/3);
}
.card-right {
    width: calc(100% - 24px - ((100% - 48px)/3));
}

.card-banner {
    width: 100%;
    min-height: 200px;
    padding: 48px;
    border-radius: 8px;

    display: none;
}
.cards-mobile {
    display: none;
}

.order-step {
    border-radius: 8px 8px 64px 8px;
    border: 2px solid #0994C929;
    position: relative;
    overflow: hidden;
    transition: all .3s;
}
.order-step:hover {
    background-color: var(--color-ice);
    transition: all .3s;
}
.order-step div {
    position: relative;
    z-index: 1;
}
.order-step.step-1 {
    width: calc((100% - 48px) / 3);
}
.step-1-link {
    position: relative;
    z-index: 1;
    width: fit-content;
    border-bottom: 1px solid var(--color-steel);
    padding-bottom: 8px;
    transition: all .3s;
}
.step-1-link:hover {
    color: var(--color-black);
    border-bottom: 1px solid var(--color-black);
    transition: all .3s;
}
.order-steps__right {
    width: calc(100% - ((100% - 48px) / 3));
}
.order-steps__right .order-step {
    width: calc((100% - 24px) / 2);
}
.order-step.step-4 {
    width: 100%;
}
.order-step__num {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background-color: var(--color-frost);
}
.order-step__img {
    position: absolute;
    right: -2px;
    bottom: -20px;
    z-index: 0;
    object-fit: cover;
    width: 160px;
    height: 160px;
    opacity: 0.48;
    transition: all .3s;
}
.step-1 .order-step__img {
    width: 240px;
    height: 240px;
}
.order-step:hover .order-step__img {
    scale: 1.1;
    transition: all .3s;
}
.clients-slider {
    margin-top: 48px;
}
.clients-slide {
    background-color: #FAFAFA;
    position: relative;
    overflow: hidden;
}
.clients-slide::after {
    content: '';
    background: linear-gradient(90.4deg, #B9E8FA 13.06%, #D9F4FF 74.84%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0;
    transition: all 0.3s ease;
}
.clients-slide:hover::after {
    opacity: 1;
    transition: all 0.3s ease;
}
.clients-slide p {
    margin-bottom: 24px;
}
.clients-slide p:last-child {
    margin-bottom: 0;
}
.logo-client {
    width: calc((100% - 48px)/3);
    min-width: calc(144px + 38px + 38px);
    min-width: 180px;
    max-height: 107px;
    background-color: var(--color-ice);
    filter: grayscale(var(--grayscale));
    --grayscale: 1;
    padding: 16px 20px 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s;
}
.logo-client:hover {
    --grayscale: 0;
    transition: all .3s;
}
.logo-client img {
    width: 144px;
    height: auto;
    object-fit: cover;
    display: block;
    margin-inline: auto;
    max-height: 100px;
    object-fit: contain;
}

.news-wrap {
    background: linear-gradient(to bottom, white 50%, #024999 50%);
}



@media (max-width: 1300px) {
    .cards-desktop {
        display: none;
    }
    .cards-mobile {
        display: flex;
    }
    .cards-mobile .card2,
    .cards-mobile .card3 {
        height: auto;
    }
    .cards-mobile .card {
        max-width: 400px;
        min-width: 300px;
        height: 636px;
        display: flex;
        cursor: grab;
    }
    .cards-mobile {
        padding: 0;
    }
    .cards-mobile .cards-mobile-swiper {
        max-width: 100vw;
        margin: 0;
    }
    .card2 .card-img {
        top: auto;
        bottom: 0;
    }
    .card2 .card-img img {
        right: 0;
    }
}


@media (max-width: 1240px) {
    .description {
        flex-direction: column;
    }
    .description-left {
        width: auto;
        min-width: auto;
    }
}

@media (max-width: 1100px) {
    .order-step.step-1,
    .order-steps__right {
        width: calc((100% - 24px) / 2);
    }
    .order-steps__right .order-step {
        width: 100%;
    }
}

@media (max-width: 992px) {
    .description {
        padding-top: 32px;
        padding-bottom: 32px;
    }
    .description-left__link {
        margin-left: 16px;
        top: -4px;
    }
    .description-right {
        flex-direction: column;
        padding-top: 0;
    }
    .description-right__item {
        width: 100%;
        gap: 16px;
    }
    .description-right__item-line {
        display: none;
    }    
    .cards-mobile .cards-mobile-swiper {        
        margin-left: 24px;
        margin-right: 24px;
    }
    .cards-mobile .card-link {
        width: calc(100% - 48px);
        margin-left: 24px;
        margin-right: 24px;
        min-height: auto;
        padding: 24px;
    }
    .clients {
        flex-direction: column;
    }
    .clients .w50 {
        width: 100%;
    }
    .order-steps, .order-steps__right {
        gap: 16px;
    }
    .product-item.wide, .product-item {
        width: calc((100% - 24px) / 2);
    }
    .product-img__wrap {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .order-steps {
        flex-direction: column;
    }
    .order-step.step-1,
    .order-steps__right {
        width: 100%;
    }
    .order-step__title {
        flex-direction: row;
        align-items: center;
    }
    .step-1 .order-step__img {
        width: 160px;
        height: 160px;
    }
    .logo-clients.gap24 {
        gap: 16px;
    }
    .logo-client {
        width: calc((100% - 24px) / 2);
        min-width: 128px;
    }
    .logo-client img {
        width: 96px;
    }
    .clients-slider {
        margin-top: 24px;
    }
    .product-img__wrap {
        height: 42vw;
    }
    .tab-button {
        padding: 10px 14px;
    }
    .logo-client {
        max-height: 83px;
    }
    .logo-client img {
        max-height: 73px;
    }
}