/* Estilização geral do container de serviços */
#servicos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* padding: 20px; */
}

/* Estilização da lista de serviços */
#lista-servicos {
    display: flex;
    flex-wrap: wrap; /* Permite que os itens se movam para a linha seguinte */
    justify-content: space-between; /* Distribui o espaço entre os itens */
    list-style: none; /* Remove os marcadores da lista */
    padding: 0; /* Remove o padding padrão */
    margin: 0; /* Remove a margem padrão */
    width: 100%; /* Ajuste conforme necessário para a largura do container */
    max-width: 1200px; /* Define a largura máxima do container, ajuste conforme necessário */
}

/* Estilização dos cards individuais */
.servico-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: calc(33.333% - 20px); /* Define a largura dos cards para 1/3 do container menos espaçamento */
    height: 200px;
    margin-bottom: 20px; /* Espaçamento entre as linhas de cards */
    box-sizing: border-box; /* Inclui padding e bordas no cálculo da largura */
    background-color: whitesmoke;
    border-radius: 20px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Suaviza a transformação e a sombra */
    padding: 1%;
}

/* Efeito de hover */
.servico-card:hover {
    transform: translateY(-5px); /* Move o card para cima */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); /* Aumenta a sombra para dar o efeito de sobreposição */
}


.servico-card img {
    max-width: 150px;
    max-height: 150px;
    margin-bottom: 10px;
}

.servico-card h2 {
    font-size: 1.1rem;
    text-align: center;
}

#servicos p {
    text-align: center;
}

#servicos a{
    text-decoration:none;
    color: rgb(12, 141, 12);
    border-bottom: 2px solid rgb(12, 141, 12);
}


/* Início Media Queries */


@media screen and (max-width: 1170px) {
    .servico-card {
        width: calc(33% - 10px);
    }

    .servico-card img {
        max-width: 120px;
    }

}

@media screen and (max-width: 726px) {
    .servico-card {
        width: calc(50% - 10px);
    }

    .servico-card img {
        padding-top: 5px;
        max-width: 120px;
    }

}

@media screen and (max-width: 500px) {
    .servico-card {

        height: 170px;
    }

    .servico-card img {

        max-width: 85px;
    }

}