.service-card {
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    background-color: white;  
}

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

.selected-service {
    animation: expand 0.5s ease-in-out;
}
/* Agrega esto en tu archivo CSS (assets/css/ServiciosStyle.css) */
#serviceDetail {
    margin-top: 30px;
}

@media (max-width: 768px) {
    #serviceDetail {
        max-height: 400px;
    }

        #serviceDetail .card {
            width: 100%;
        }
}

.selected-service .card-header {
    position: sticky;
    top: 0;
    z-index: 1;
}

.service-image {
    object-fit: cover;
    max-height: 300px;
}