/* Resetando margens e preenchimentos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Inclui bordas e preenchimentos dentro do tamanho total do elemento */
}

/* Definir a tipografia global */
body {
    font-family: 'Arial', sans-serif;  /* Substitua 'Arial' pela fonte que você preferir */
    font-size: 16px; /* Tamanho de fonte base */
    color: #333; /* Cor padrão para o texto */
    line-height: 1.5; /* Espaçamento entre linhas para melhor legibilidade */
}

/* Garantir que todos os textos sigam o mesmo estilo */
* {
    font-family: inherit; /* Herda a fonte do body */
    font-size: inherit; /* Herda o tamanho da fonte */
    color: inherit; /* Herda a cor do texto */
    line-height: inherit; /* Herda o espaçamento entre linhas */
}


/* Estilo para a div topo */
.topo {
    width: 100%;
    height: 130px; /* Altura definida para a div */
    background: linear-gradient(to bottom, #11919e, #43c6b3); /* Degradê de azul para roxo e laranja de cima para baixo */
    display: flex; /* Usando flexbox para organizar os itens horizontalmente */
    justify-content: space-between; /* Distribui os itens uniformemente com espaçamento entre eles */
    align-items: center; /* Alinha os itens verticalmente no centro */
    padding: 0 20px; /* Adiciona espaçamento interno à esquerda e à direita */
    position: relative; /* Necessário para o posicionamento do dropdown */
    z-index: 1;
}

/* Estilo para a imagem (logotipo) */
.logo {
    width: 140px;  /* Largura da imagem definida para 40px */
    height: auto; /* Altura da imagem definida para auto */
}

/* Estilo para o formulário de busca */
.search-form {
    display: flex; /* Usando flexbox para o formulário */
    justify-content: center;
    align-items: center;
    width: 40%; /* Define uma largura para o formulário de busca */
  
}

.search-input {
    padding: 8px 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-right: 10px;
    margin-left: 10px;
    width: 100%; /* Faz com que o campo de busca ocupe 100% da largura disponível dentro do formulário */
}

.search-input:hover {
    background-color: white;
}

.search-button {
    padding: 10px 10px;
    font-size: 16px;
    background-color: #10909d;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-right: 60px;
}

.search-button:hover {
    background-color: #858181;
}

/* Estilo para o botão de menu */
.dropdown {
    position: relative; /* Necessário para o posicionamento do menu suspenso */
}

/* Estilo para o botão */
.dropdown-button {
    background-color: transparent; /* Cor de fundo do botão */
    color: white; /* Cor do texto */
    padding: 7px 25px; /* Espaçamento interno */
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 7px; /* Bordas arredondadas */
    cursor: pointer; /* Cursor de ponteiro */
    transition: background-color 0.3s ease;
    
}

/* Efeito de hover no botão */
.dropdown-button:hover {
     background-color: transparent; /* Cor de fundo do botão */

}

/* Estilo para o menu suspenso */
.dropdown-content {
    display: none; /* Esconde o menu por padrão */
    position: absolute; /* Posiciona o menu em relação ao botão */
    top: 100%; /* Coloca o menu imediatamente abaixo do botão */
    left: 0; /* Alinha o menu à esquerda do botão */
    background-color: white; /* Cor de fundo do menu */
    min-width: 125px; /* Largura mínima do menu */
    border-radius: 2px 2px 5px 5px; /* Bordas arredondadas */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* Sombra para o menu */
    z-index: 1000; /* Garante que o menu apareça acima de todos os outros elementos */

}

/* Estilo para os links do menu */
.dropdown-content a {
    color: #13939e; /* Cor do texto do link */
    padding: 12px 16px; /* Espaçamento interno dos links */
    text-decoration: none; /* Remove o sublinhado */
    display: block; /* Faz os links ficarem em blocos */
    transition: background-color 0.3s ease;
}

/* Efeito de hover nos links */
.dropdown-content a:hover {
    background-color: #13939e; /* Cor de fundo ao passar o mouse sobre os links */
    color: white; /* Cor do texto do link */
     border-radius: 0px 0px 5px 5px; /* Bordas arredondadas */

}

/* Mostra o menu quando o botão é clicado */
.dropdown:hover .dropdown-content {
    display: block; /* Exibe o menu */
   
}

/* Estilo para os espaços dos ícones */
.icon-space {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px; /* Espaço entre os ícones */
}

.icon {
    width: 40px;  /* Tamanho do ícone */
    height: 40px; /* Tamanho do ícone */
    object-fit: cover; /* Para garantir que o ícone tenha o tamanho certo */
}


/* Mostra o banner */
.banner {
    width: 100%; /* Tabela ocupa 80% da largura da div topo */
    height:300px; /* Tabela ocupa 100% da altura da div topo */
    margin: 0px; /* Adiciona 20px de margem ao redor da tabela */
    background-color: black; /* Cor de fundo do menu */
    
}
