/* Estilo geral do header */
header {
    background-color: #ffffff; /* Cor de fundo branca */
    padding: 20px;
    display: flex;
    flex-direction: column; /* Organiza o layout em coluna */
    align-items: center; /* Centraliza o conteúdo horizontalmente */
    border-bottom: 1px solid #dddddd; /* Linha sutil na parte inferior */
}

/* Contêiner para logo e texto */
.header-content {
    display: flex;
    align-items: center; /* Alinha a logo e o texto na vertical */
    justify-content: center; /* Centraliza os itens na horizontal */
    gap: 20px; /* Espaçamento entre a logo e o texto */
    width: 100%; /* Garante que ocupe toda a largura disponível */
    flex-wrap: wrap; /* Permite reorganizar em telas menores */
    text-align: center; /* Centraliza o texto */
}

/* Estilo da logo */
.logo-container {
    flex-shrink: 0; /* Evita que a logo encolha */
}

.logo {
    max-height: 160px; /* Altura da logo */
    width: auto;
}

/* Estilo do título e subtítulo */
.header-text {
    text-align: center; /* Centraliza o texto */
}

.header-text h1 {
    margin: 0;
    font-size: 2.5em;
    color: #333333; /* Cor do título em preto suave */
}

.header-text p {
    margin: 5px 0 0;
    font-size: 1.2em;
    color: #666666; /* Subtítulo em tom de cinza */
}
/* Estilo da navegação */
nav {
    display: flex;
    justify-content: center; /* Centraliza o menu */
    gap: 20px;
    margin-top: 20px; /* Espaço entre o título e o menu */
    width: 100%;
    background-color: #ffffff; /* Fundo branco */
    border-top: 1px solid #dddddd; /* Linha sutil no topo */
    border-bottom: 1px solid #dddddd; /* Linha sutil na base */
    padding: 10px 0; /* Espaço vertical */
}

nav a {
    text-decoration: none;
    color: #333333; /* Cor do texto preto suave */
    font-weight: 600;
    font-size: 1rem;
    padding: 10px 15px; /* Área clicável */
    border-radius: 4px; /* Suaviza os cantos */
    transition: color 0.3s ease, background-color 0.3s ease;
}

nav a:hover {
    color: #ffffff; /* Texto branco */
    background-color: #007bff; /* Fundo azul para hover */
}

/* Responsividade para telas pequenas */
@media screen and (max-width: 768px) {
    nav {
        flex-direction: column; /* Empilha os itens do menu */
        gap: 10px; /* Espaço reduzido */
    }

    nav a {
        font-size: 1.1em; /* Ajusta o tamanho da fonte */
    }
}
}