.archive-servs{
    padding: 4rem 0;
}

.archive-servs .rows>*:nth-child(even){
    flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
}

.archive-servs .rows>*{
    margin: 0;
}

.archive-servs .row>*{
    display: flex;
    display: -webkit-flex;
    align-items: stretch;
    padding: 0;
}

.archive-servs .img,
.archive-servs .img img{
    width: 100%;
    height: 100%;
}

.archive-servs .img{
    max-height: 400px;
}

.archive-servs .img img{
    object-fit: cover;
    -o-object-fit: cover;
}

.archive-servs .box{
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--white);
    box-shadow: 0px 4px 30px -10px #7090b040;
    padding: 87px 65px;
}

.archive-servs .box::before,
.archive-servs .box::after{
    content: '';
    position: absolute;
    width: 65px;
    aspect-ratio: 1/1;
    background-color: var(--main);
}

.archive-servs .box::before{
    inset: auto auto 0 0;
    clip-path: polygon(0 0,100% 100%,0 100%);
    -webkit-clip-path: polygon(0 0,100% 100%,0 100%);
}

.archive-servs .box::after{
    inset: 0 0 auto auto;
    clip-path: polygon(0 0,100% 0,100% 100%);
    -webkit-clip-path: polygon(0 0,100% 0,100% 100%);
}

.archive-servs .box .title{
    color: var(--main);
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
    margin-bottom: 20px;
    padding-bottom: 1rem;
}

.archive-servs .box .text{
    margin-bottom: 27px;
}

@media(max-width:992px){
    .archive-servs{
        padding: 2rem 0;
    }
    .archive-servs .rows>*{
        flex-wrap: wrap-reverse;
        -ms-flex-wrap: wrap-reverse;
    }
    .archive-servs .box{
        padding: 2rem;
    }
}