.service-container{
    display: flex;
    flex-direction: row;
    gap: 100px;
    padding:0 100px ;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    width: 100%;
}
.service-container::-webkit-scrollbar {
    display: none;
  }
.service-container.active {
    cursor: grabbing;
}

.service-item{
    min-width: 333px;
}

.service-item img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}
.service-content{
    display: flex;
    flex-direction: column;
    background-color: var(--wp--preset--color--light);
    height: 100%;
    padding: 20px;
    gap: 20px;
    transition: background-color 0.4s ease-in-out;
}
.service-content h3,
.service-content p {
    color: var(--wp--preset--color--dark);
    transition: color 0.4s ease-in-out;
}
.service-item:hover .service-content {
    background-color: var(--wp--preset--color--blue);
}
.service-item:hover .service-content h3,
.service-item:hover .service-content p{
    color: var(--wp--preset--color--light);
}


@media not all and (min-width: 1537px) {
    
}

@media not all and (min-width: 1281px) {
    .service-container{
        padding: 0 0;
    }
}
@media not all and (min-width: 1025px) {
   
}
@media not all and (min-width: 769px) {
    .service-container{
        padding: 0 40px;
        gap: 20px;
    }
}
@media not all and (min-width: 641px) {
    
}
@media not all and (min-width: 391px) {
    .service-container{
        padding: 0 20px;
    }
}