.segments{
    position: relative;
    padding: 16.86rem 0 7.46rem;
}

.segments .row{
    flex-wrap: wrap-reverse;
    -ms-flex-wrap: wrap-reverse;
    grid-gap: 2rem 0;
}

.segments .img{
    position: absolute;
    inset: 0 auto auto 0;
    width: 58.33333vw;
    aspect-ratio: 1/.79732;
    /* max-height: 892px; */
    clip-path: polygon(0 0,99.7% 0,3.5% 100%,0 100%);
    -webkit-clip-path: polygon(0 0,99.7% 0,3.5% 100%,0 100%);
}

.segments .img::before{
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--main);
    mask: url(../../assets/img/linemask.svg) no-repeat center/cover;
    -webkit-mask: url(../../assets/img/linemask.svg) no-repeat center/cover;
}

.segments .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

.segs{
    background: url(../../assets/img/noisefx.png) repeat top left,var(--main);
    background-blend-mode: multiply;
    padding: 78px;
}

.segs .row{
    justify-content: center;
    -webkit-justify-content: center;
    grid-gap: 27px 0;
}

.segs .title{
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    color: var(--white);
    font-size: 21.23px;
    font-weight: 700;
    border-radius: 16.3px;
    box-shadow: 0 6.53px 6.53px #00000040;
    background-color: var(--footer1);
    padding: 11px;
}

.seggs{
    position: relative;
    background: url(../../assets/img/seggsbg.png) no-repeat bottom left,url(../../assets/img/archprocsbg2.png) no-repeat bottom center/100% auto,var(--white);
    padding: 82px 0 75px;
}

.seggs .row{
    grid-gap: 2rem 0;
}

.seggs .img{
    position: absolute;
    inset: auto 0 0 auto;
    width: 45.20833vw;
}

@media(min-width:1921px){
    .segs,
    .seggs{
        position: relative;
        z-index: 1;
    }
}

@media(max-width:992px){
    .segments,
    .segs,
    .seggs{
        padding: 2rem 0;
    }
    .segments .img{
        position: relative;
        width: fit-content;
        clip-path: unset;
        -webkit-clip-path: unset;
        overflow: hidden;
    }
    .segments .img::before{
        inset: auto -1% 0 auto;
        width: 28%;
        aspect-ratio: 1/.79732;
    }
    .seggs .img{
        position: initial;
        width: fit-content;
    }
}

@media(max-width:768px){
    .seggs{
        background-size: 0,100% auto;
    }
}