#servicos {
    background-color: #f8f9fa;
}

#servicos .service-card {
    position: relative; /* Necessário para o posicionamento do overlay */
    overflow: hidden; /* Garante que o overlay não saia dos limites do card */
    transition: box-shadow 0.3s ease;
    background-color: #ffffff;
}

#servicos .service-card:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

#servicos .service-image-wrapper {
    position: relative;
}

#servicos .service-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

#servicos .service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Fundo preto com opacidade */
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease;
    transition: margin-top 0.3s ease;
    text-align: center;
    padding: 15px;
}

#servicos .service-overlay .card-description {
    opacity: 0; /* Inicialmente escondido */
    transition: opacity 0.3s ease;
    margin-top: -80px;
}

#servicos .service-card:hover .service-overlay {
    opacity: 1; /* Fundo opaco ao passar o mouse */
}

#servicos .service-card:hover .card-description {
    opacity: 1; /* Descrição aparece ao passar o mouse */
    margin-top: 10px;
}

#servicos .card-title {
    font-size: 1.5rem;
    font-weight: bold;
}

#servicos .card-description {
    font-size: 1rem;
    font-weight: normal;
}