.fx{
    background: url(../../assets/img/noisefx.png) no-repeat bottom center/100% auto;
}

.services{
    padding: 79px 0 46px;
    /* padding: 171px 0 46px; */
}

.services .content{
    position: relative;
    /* display: flex;
    display: -webkit-flex;
    align-items: center;
    grid-gap: 39px; */
    padding-left: 67px;
}

.services .content::before{
    content: url('data:image/svg+xml;utf8,<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M27.5619 33.338L5.77491 33.338C4.24331 33.338 2.77441 32.7296 1.69141 31.6465C0.608314 30.5635 -8.7738e-05 29.0946 -8.7738e-05 27.563L-8.7738e-05 5.775C-8.7738e-05 4.24337 0.608314 2.77448 1.69141 1.69146C2.77441 0.608436 4.24331 0 5.77491 0L27.5619 0C29.0935 0 30.5624 0.608436 31.6455 1.69146C32.7285 2.77448 33.3369 4.24337 33.3369 5.775L33.3369 27.562C33.3369 29.0936 32.7285 30.5625 31.6455 31.6455C30.5624 32.7286 29.0935 33.338 27.5619 33.338Z" fill="rgb(191, 144, 0)"/><path d="M16.2346 6.53245L25.9305 16.2283L16.2347 25.9242M25.932 16.2284L7.53378 16.2277" stroke="black" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    position: absolute;
    inset: 0 auto auto 0;
    height: 34px;
}

.services .content::after{
    content: '';
    position: absolute;
    inset: auto auto 0 13px;
    width: 2px;
    height: calc(100% - 48px);
    background: var(--dark-yell);
}

.services .text.main{
    position: relative;
    margin-top: 10px;
}

.services .servs{
    display: grid;
    display: -webkit-grid;
    grid-gap: 6px;
    margin-top: 79px;
}

.services .servs>*{
    display: grid;
    display: -webkit-grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 6px 7px;
}

.services .servs>*>*{
    min-height: 594px;
    align-content: end;
    border-radius: 21px;
    background: url(../../assets/img/bigboxbg.png) repeat top left/100% auto,url(../../assets/img/boxfx.png) no-repeat center/cover;
    padding: 39px 43px;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.services .servs>*:has(.serv.active),
.services .servs>*:has(.serv:hover){
    grid-template-columns: repeat(5,1fr);
}

.services .servs>*>*.active,
.services .servs>*>*:hover{
    grid-column: span 2;
}

.services .servs>*>* .icon{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    width: 64px;
    aspect-ratio: 1/1;
    border-radius: 11px;
    background: var(--dark-yell);
    padding: 5px;
}

.services .servs>*>* .title{
    font-size: 18px;
    font-weight: 700;
    margin-top: 21px;
}

.services .servs>*>* .text{
    overflow: hidden;
    height: 0;
    font-size: 14px;
    margin-top: 26px;
}

.services .servs>*>*.active .text,
.services .servs>*>*:hover .text{
    height: fit-content;
}

.possibilities{
    padding: 46px 0 71px;
}

.possibilities .row{
    position: relative;
    grid-gap: 2rem 0;
    margin: 0 -58px;
    padding: 0 59px 48px 95px;
}

.possibilities .row::before{
    content: '';
    position: absolute;
    z-index: -1;
    inset: auto auto 0 0;
    width: 100%;
    height: calc(100% - 20px);
    border: 2px solid var(--line);
    border-radius: 29px;
    clip-path: polygon(-20% -20%,8% -20%,8% 20%,92% 20%,92% -20%,120% -20%,120% 120%,-20% 120%);
    -webkit-clip-path: polygon(-20% -20%,8% -20%,8% 20%,92% 20%,92% -20%,120% -20%,120% 120%,-20% 120%);
    box-shadow: 0 3px 6px #00000029;
}

.possibilities .row>*{
    position: relative;
    padding: 0 58px;
}

.possibilities .row>*:nth-child(odd)::after{
    content: '';
    position: absolute;
    inset: auto 0 0 auto;
    width: 2px;
    height: 61%;
    background: var(--dark-yell);
}

.possibilities .text{
    margin-top: 26px;
}

.possibilities .title{
    font-family: var(--one);
    font-size: 28px;
    margin-top: 89px;
}

@media(max-width:992px){
    .services,
    .possibilities{
        padding: 2rem 0;
    }
    .services .servs,
    .possibilities .title{
        margin-top: 2rem;
    }
    .possibilities .row{
        margin: 0 -12px;
        padding: 0 12px;
    }
    .possibilities .row::before,
    .possibilities .row>*:nth-child(odd)::after{
        display: none;
        display: -webkit-none;
    }
    .possibilities .row>*{
        padding: 0 12px;
    }
    .services .servs>*,
    .services .servs>*:has(.serv.active),
    .services .servs>*:has(.serv:hover){
        grid-template-columns: repeat(2,1fr);
    }
    .services .servs>*>*{
        min-height: unset;
    }
}

@media(max-width:768px){
    .services .content::before{
        display: none;
        display: -webkit-none;
    }
    .services .servs>*,
    .services .servs>*:has(.serv.active),
    .services .servs>*:has(.serv:hover){
        grid-template-columns: 1fr;
    }
    .services .servs>*>*{
        grid-column: span 1;
    }
    .services .servs>*:has(.serv.active)>*,
    .services .servs>*:has(.serv:hover)>*{
        grid-column: span 1;
    }
    .services .servs>*>*{
        padding: 1.5rem;
    }
    .services .text.main{
        padding-left: 2rem;
    }
}