* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

main {
    margin: 0 15vw; /* Define uma margem de 15vw nas laterais */
    padding: 20px; /* Adiciona um padding interno se necessário */
}

body {
    font-family: 'Roboto', sans-serif;
    color: #333;
    background-color: #fffab8b6;
    padding-top: 70px; /* Ajuste conforme necessário para a altura da navbar */

}

/* Estilos padrão do botão */
.button {
    padding: 10px 20px;
    color: #fff;
    background-color: #4A90E2;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Efeito de hover */
.button:hover {
    background-color: #357ABD; /* Cor mais escura no hover */
    transform: scale(1.05); /* Aumenta levemente o tamanho */
}

.intro {
    position: relative;
    color: white; /* Ajuste a cor do texto para melhor legibilidade */
    padding: 250px 20px; /* Adicione um pouco de padding */
    text-align: center; 
    overflow: hidden; 
}

/* Imagem de fundo e filtro escuro evitar mexer pq as vezes some*/
.intro::before {
    content: '';
    background-image: url('../img/thumbx.png');
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; 
    opacity: 1; /* Ajuste a opacidade para o efeito do filtro escuro (EVITAR DE DEIXAR ABAIXO DE 0,5) */
    background-size: cover; 
    background-position: top; 
    filter: brightness(30%); /* Escurece a imagem com um filtro (por algum motivo acima de 40% fica branco) */
}

.intro h2, .intro p {
    position: relative; /* Isso garante que o texto fique acima da imagem de fundo */
    z-index: 1; /* Coloca o texto acima do fundo */
}

.intro .cta-buttons a.button {
    display: inline-block;
    margin: 10px;
    padding: 10px 20px;
    background-color: #e47db0;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}





  
/* Estilo para as redes sociais */
.wrapper {
    display: inline-flex;
    list-style: none;
    height: 120px;
    width: 100%;
    padding-top: 40px;
    font-family: "Poppins", sans-serif;
    justify-content: center;
}


/* Título da aba */
.tab-title {
    font-size: 1.8em;
    color: #333;
    margin-bottom: 10px;
    text-align: center;
    border-bottom: 2px solid #ccc;
    padding-bottom: 10px;
}

/* Descrição da aba */
.tab-description {
    font-size: 1.1em;
    color: #666;
    text-align: center;
    margin-bottom: 20px;
}

/* Estilo das seções */
.doc-section {
    margin-bottom: 20px;
}

/* Título de cada seção */
.doc-section h4 {
    font-size: 1.4em;
    color: #000000;
    margin-bottom: 8px;
}

/* Lista de links */
.doc-list {
    list-style-type: none;
    padding-left: 0;
}

.doc-list li {
    margin-bottom: 5px;
}





/* Estilo da seção de Grupos de Apoio e Institutos */
.grupos-apoio {
    padding: 3rem 2rem;
    background-color: #a9f9ff;
    text-align: center;
  }
  
  .grupos-apoio h2 {
    font-size: 2.2rem;
    color: #ff6c80;
    margin-bottom: 1rem;
  }
  
  .grupos-apoio .descricao {
    font-size: 1rem;
    color: #666;
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Container dos cards */
  .apoio-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
  }
  
  /* Estilo dos cards de apoio */
  .apoio-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    width: 400px;
    text-align: left;
    transition: transform 0.2s ease;
  }
  
  .apoio-card:hover {
    transform: translateY(-5px);
  }
  
  .apoio-card img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 1rem;
  }
  
  .apoio-card h3 {
    font-size: 1.5rem;
    color: #444;
    margin-bottom: 0.5rem;
  }
  
  .apoio-card p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 1rem;
  }
  
  .apoio-card .button {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #e47db0;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1rem;
    transition: background-color 0.2s;
  }
  
  .apoio-card .button:hover {
    background-color: #2878b5;
  }




/* Estilo da Seção de Destaques */
.destaques {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.destaques h3 {
    font-size: 2.2rem; /* Ajustado para ser igual ao título de Grupos de Apoio */
    color: #ff6c80; /* Mesma cor do título */
    margin-bottom: 1rem;
}

.destaques .noticias {
    display: flex;
    flex-wrap: wrap; /* Permite que os itens quebrem linha como nos Grupos de Apoio */
    gap: 2rem;
    justify-content: center;
}

.noticia {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    width: 400px;
    text-align: left;
    transition: transform 0.2s ease;
    
}

.noticia:hover {
    transform: translateY(-5px); /* Mesmo efeito de hover dos cards de apoio */
}

.noticia-img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 1rem;
    height: auto; /* Remove o tamanho fixo para permitir ajuste dinâmico */
    object-fit: cover; /* Garante boa proporção da imagem */
}

.noticia h4 {
    font-size: 1.5rem; /* Mesmo tamanho dos títulos dos cards de apoio */
    color: #444;
    margin-bottom: 0.5rem;
}

.noticia p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 1rem;
}

.noticia .button {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #e47db0; /* Mesma cor dos botões de apoio */
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1rem;
    transition: background-color 0.2s;
}

.noticia .button:hover {
    background-color: #2878b5;
}

/* Responsividade */
@media (max-width: 768px) {
    .destaques .noticias {
        flex-direction: column; 
        align-items: center; 

    }
}