/* Estilos para o Hero (logotipo maior com fundo preto) */
.hero {
    background-color: black; /* Fundo preto para o hero */
    width: 100%;
    height: 100vh; /* Ocupa a altura total da tela */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden; /* Garante que nada vaze */
}

.hero-content {
    text-align: center;
    position: relative;
    z-index: 1; /* Garante que o conteúdo fique acima do fundo */
}

.main-logo {
    max-width: 80%; /* Ajuste o tamanho do logo conforme necessário */
    height: auto;
    display: block;
    margin: 0 auto 20px auto; /* Centraliza e adiciona espaço abaixo */
}

.hero-nav {
    display: flex;
    justify-content: center;
    gap: 30px; /* Espaçamento entre os ícones */
    margin-top: 20px;
}

.nav-icon {
    color: white; /* Cor dos ícones */
    text-decoration: none;
    font-size: 1.2em; /* Tamanho da fonte dos ícones */
    /* Adicione aqui estilos para os ícones, se forem imagens ou fontes de ícones */
}

/* Seção de Campanha (3 cards por linha) */
.campaign-section {
    display: flex;
    justify-content: space-around;
    padding: 20px;
    background-color: #1a1a1a; /* Fundo escuro para a seção de campanha */
    gap: 20px; /* Espaçamento entre os cards */
    flex-wrap: wrap; /* Permite que os cards quebrem a linha em telas menores */
}

.campaign-card {
    flex: 1; /* Faz com que os cards ocupem o espaço disponível */
    min-width: 280px; /* Largura mínima para cada card */
    max-width: 350px; /* Largura máxima para cada card */
    text-align: center;
    background-color: #333; /* Fundo para cada card de campanha */
    padding: 10px;
    border-radius: 5px;
}

.campaign-card img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 3px;
}