.single-services .services-img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 80%;
    border-radius: 20px;
    position: relative;
    /*filter: grayscale(100%) brightness(1.5); /* Aplica escala de grises inicialmente */
    overflow: hidden; /* Oculta el contenido que se desborda */
    transition: filter 0.3s ease; /* Transición para la propiedad filter */
}

.single-services .services-img::before {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: linear-gradient(0deg, #030303ff 0%, #00000000 100%);
    border-radius: 20px;
}

.single-services .services-img h4,
.single-services .services-img p {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    margin: 0;
    color: #ffffff; /* Color blanco inicial */
    transition: transform 0.5s ease, color 0.3s ease; /* Ajuste de la transición para el transform y color */
}

.single-services .services-img h4 {
    transform: translateY(0); /* Inicialmente visible */
}

.single-services .services-img p {
    opacity: 0; /* Oculta el párrafo inicialmente */
    transition: opacity 0.3s ease; /* Añade transición para opacity */
}

.single-services .services-img p a {
    color: #ffffff;
    text-decoration: none;
}

.single-services .services-img:hover {
    filter: none; /* Elimina el filtro de escala de grises al hacer hover */
}

.single-services .services-img:hover h4, 
.single-services .services-img:hover h4 a {
    transform: translateY(-60px); /* Desplaza el h4 hacia arriba al hacer hover */
    color: #29a2da; /* Cambia el color al hacer hover */
}

.single-services .services-img:hover p {
    opacity: 1; /* Muestra el párrafo al hacer hover */
}