.services-slider-container{
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 10px;
}

.services-slider{
    width: 800%;
    height: 100%;
    display: flex;
    transition: var(--t-300ms);
}

.services-slider li{
    width: 100%;
    height: 100%;
}

.services-slider li img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-services-container{
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 20px;
}

.page-services-list li{
    width: 100%;
}

.page-services-list li button{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 10px;
    min-height: 40px;
    border: 1px solid var(--blue);
    padding: 0 10px;
    border-radius: 5px;
}

.page-services-list li button:hover,
.page-services-list li button.active{
    background: var(--blue);
    transition: var(--t-100ms);
}

.page-services-list li button i,
.page-services-list li button h2{
    transition: var(--t-100ms);
    color: var(--blue);
}

.page-services-list li button:hover i,
.page-services-list li button:hover h2,
.page-services-list li button.active i,
.page-services-list li button.active h2{
    color: var(--white);
}

@media screen and (max-width: 800px){
    .services-slider-container{
        height: 300px;
    }
    .page-services-container{
        grid-template-columns: 250px 1fr;
        gap: 10px;
    }
}

@media screen and (max-width: 600px){
    .services-slider-container{
        height: 180px;
    }
    .page-services-list-container{
        width: 100%;
        display: flex;
        overflow-x: scroll;
        padding-bottom: 10px;
    }
    .page-services-list-container::-webkit-scrollbar{
        height: 3px;
        background: var(--body);
    }
    .page-services-list-container::-webkit-scrollbar-thumb{
        background: var(--light-blue);
        border-radius: 10px;
    }
    .page-services-list-container ul{
        width: 360%;
        display: grid;
        grid-template-columns: repeat(9, auto);
        /* flex-direction: row; */
    }
    .page-services-list-container ul li{
        width: 100%;
        /* min-width: 80px; */
    }
    .page-services-list-container ul li button{
        display: flex;
        width: auto;
    }

    .page-services-container{
        grid-template-columns: 1fr;
    }
}