/* ======================================================= */
/* ESTILOS DOS BOTÕES DENTRO DOS CARDS (CTA-LINK) */
/* ======================================================= */

h2{
    color: #25d366;
}

h3{
    color: rgb(141, 115, 115);
}

.cta-link {
    /* Aparência base do botão */
    display: inline-block; /* Permite definir padding/margem e alinha-se ao texto */
    padding: 12px 25px; /* Espaçamento interno (altura e largura) */
    margin-top: 15px; /* Espaçamento acima do botão */
    
    /* Cores e Borda - Usando um de seus destaques (azul) */
    background-color: rgb(28, 107, 225); /* Cor de fundo principal */
    color: white; /* Cor do texto */
    border: 2px solid rgb(28, 107, 225); /* Borda com a mesma cor */
    border-radius: 8px; /* Cantos arredondados suaves */
    
    /* Tipografia */
    text-decoration: none; /* Remove o sublinhado do link */
    font-weight: bold; /* Deixa o texto em negrito */
    text-transform: uppercase; /* Deixa o texto em caixa alta */
    font-size: 0.9rem; /* Tamanho da fonte um pouco menor */
    
    /* Transição suave para o efeito hover */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.1s ease;
}

/* Efeito Hover (passar o mouse) */
.cta-link:hover {
    /* Usando seu segundo destaque (verde) no hover para um contraste forte */
    background-color: rgb(10, 193, 10);
    color: black;
    border-color: rgb(10, 193, 10);
    
    /* Leve 'empurrão' para cima para dar feedback */
    transform: translateY(-2px); 
    box-shadow: 0 4px 10px rgba(10, 193, 10, 0.4); /* Sombra sutil */
}

/* Efeito Active (clique) */
.cta-link:active {
    transform: translateY(0); /* Retorna à posição original */
    box-shadow: none;
}

/* Container dos Cards de Serviço */
.service-cards-container {
    display: flex;
    flex-wrap: wrap; /* Permite que os cards quebrem para a próxima linha */
    justify-content: center; /* Centraliza os cards */
    gap: 20px; /* Espaçamento entre os cards */
    margin-top: 20px;
    margin-bottom: 30px; /* Espaçamento antes do próximo parágrafo */
}

/* Estilo de cada Card Individual */
.service-card {
    background-color: black; /* Cor de fundo escura, adapte ao seu tema */
    border: #007bff solid 2px;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    width: 100%; /* Por padrão, ocupa a largura total em mobile */
    max-width: 280px; /* Limite a largura para desktop */
}

/* Efeito ao passar o mouse */
.service-card:hover {
    transform: translateY(-5px); /* Sobe um pouco */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

/* Ícones dentro dos cards */
.service-card i {
    font-size: 3em;
    color: #007bff; /* Cor do ícone, combine com seu tema */
    margin-bottom: 15px;
}

/* Título dentro dos cards */
.service-card h3 {
    font-size: 1.4em;
    color: #e0e0e0; /* Cor do texto do título */
    margin-bottom: 10px;
}

/* Parágrafo dentro dos cards */
.service-card p {
    font-size: 0.9em;
    color: #b0b0b0; /* Cor do texto do parágrafo */
    line-height: 1.5;
}