/*** Service ***/
.service-item {
    box-shadow: 0 0 45px rgba(0, 0, 0, .07);
    border: 1px solid transparent;
    transition: .5s;
    position: relative;
    overflow: hidden;
}

.service-item:hover {
    margin-top: -10px;
    box-shadow: none;
    border: 1px solid #DEE2E6;
}

/*** Feature ***/
.progress {
    height: 5px;
}

.progress .progress-bar {
    width: 0px;
    transition: 3s;
}

.img-products{
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-bottom: 0;
}

/*ACLARACION: NO FUNCIONA EN LOS CELULARES PORQUE EL HOVER NO SE ACTIVA, PERO EN PC SI FUNCIONA*/
/* Estilo del texto sobre la imagen */
.service-item h4
{
    position: absolute;
    bottom: 0;
    left: 0;
    color: black;
    width: 100%;
    padding: 1rem 0;
    background: rgba(230, 230, 230, 0.55); /* o puedes usar var(--primary) */
    /* transform: translateY(100%);*/ 
    opacity: 1;
    transition: transform .4s ease, opacity .4s ease;
}

.service-item:hover h4
{
    transform: translateY(0);
    opacity: 1;
}