.service-con{
    padding-left: 40px;
    padding-right: 40px;
}
.service-box-item {
    border-radius: 10px;
    padding: 50px 37px 29px 40px;
    background: var(--grey-color);
}
.service-box {
    gap: 24px;
    display: grid;
    justify-content: center;
    grid-template-columns: 18.93% 18.93% 18.93% 18.93% 18.93%;
}
.service-box-item figure img{
    transition: all 0.4s ease-in-out;
}
.service-box-item:hover figure img{
    transform: translatey(5px);
}
.service-box-item figure{
    margin-bottom: 25px;
}
.service-box-item h3{
    margin-bottom: 20px;
    color: var(--primary--color);
}
.service-box-item p{
    margin-bottom: 0;
}
.service-box-item:hover *{
    color: var(--white-color);
}
.service-box-item:hover{
    background: linear-gradient(to top, rgba(250, 100, 55, 1) 0%, rgba(231, 1, 8, 1) 100%);
}
.service-box-item:hover figure{
    filter: brightness(0) invert(1);
}
/* ************ responsive *************** */
@media only screen and (max-width: 1440px) {
    .service-box {
        gap: 15px;
    }
    .service-box-item {
        padding: 40px 12px 26px;
    }
}
@media only screen and (max-width: 1199px) {
    .service-box {
        gap: 45px;
        grid-template-columns: 30% 30% 30%;
    }
    .service-box-item {
        padding: 34px 22px 23px;
    }
    .service-box-item figure {
        margin-bottom: 18px;
    }
    .service-box-item h3 {
        margin-bottom: 14px;
    }
}
@media only screen and (max-width: 991px) {
    .service-box {
        gap: 15px;
        grid-template-columns: 31.5% 31.5% 31.5%;
    }
    .service-box-item {
        padding: 24px 16px;
    }
    .service-box-item p{
        font-size: 14px;
    }
    
}
@media only screen and (max-width: 767px) {
    .service-box {
        grid-template-columns: 48% 48%;
    }
}
@media only screen and (max-width: 575px) {
    .service-box {
        gap: 15px;
        grid-template-columns: 100%;
    }
    .service-box-item {
        padding: 20px 26px;
        text-align: center;
    }
}