@import url("/css/style.css");
.service-details {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    margin-top: 20px;
}

/* Mostra os detalhes no hover do card */
.service-card:hover .service-details {
    opacity: 1;
    max-height: 200px; /* ajuste conforme necessário */
}

/* Estiliza a lista que aparece */
.service-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.service-details ul li {
    color: var(--text-color-dark);
    font-size: 0.95em;
    padding: 6px 0;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

/* Animação de entrada dos itens da lista */
.service-card:hover .service-details ul li {
    opacity: 1;
    transform: translateY(0);
}

/* Atraso progressivo para cada item (efeito cascata lindo) */
.service-card:hover .service-details ul li:nth-child(1) { transition-delay: 0.1s; }
.service-card:hover .service-details ul li:nth-child(2) { transition-delay: 0.2s; }
.service-card:hover .service-details ul li:nth-child(3) { transition-delay: 0.3s; }
.service-card:hover .service-details ul li:nth-child(4) { transition-delay: 0.4s; }

/* Opcional: realça o título no hover */
.service-card:hover h3 {
    color: var(--accent-color);
    padding-left: 8px;
    transition: all 0.3s ease;
}