/* Barra de navegação */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #412314; /* Cor marrom */
    padding: 10px 20px;
    flex-wrap: wrap; /* Permite que os itens se movam para a linha de baixo em telas menores */
}

/* Estilo da logo */
.logo img {
    max-height: 50px;
}

/* Menu horizontal */
.menu ul {
    display: flex;
    list-style-type: none;
    margin-left: 0; /* Remove qualquer margem no início da lista */
    padding-left: 0;
}

.menu li {
    margin: 0 15px;
}

.menu a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    padding: 5px 10px;  /* Adiciona padding horizontal para aumentar a área clicável */
    border-radius: 3px;
    display: block;
}

.menu a#voltar {
  background-color: #04d361; 
  color: #F5F5F5; 
  border-radius: 1rem; 
  margin-right: 1rem;
}

/* Adiciona o background azul nas palavras do menu ao passar o mouse */
.menu a:hover {
    background-color: #04d361;  /* Cor verde */
    text-decoration: none; /* Retira o sublinhado ao passar o mouse */
    border-radius: 5px;  /* Arredonda os cantos do fundo azul */
}

/* Estilo da foto */
.seguro span {
    color: white;
}

/* Responsividade: Ajustes para telas menores */
@media (max-width: 768px) {
   .navbar {
    	display: flex;
    	flex-direction:column;
    	width:100%;
    }
  
    /* Faz o menu se alinhar verticalmente em telas menores */
    .menu ul {
        flex-direction: row;
        align-items: center;
        width: 100%; /* Garantir que ocupe a largura toda */
    }

    .menu li {
        margin: 10px 0;  /* Aumenta o espaço entre os itens */
    }

    /* Ajusta o tamanho da logo */
    .logo img {
        max-height: 40px;
    }
}

/* Responsividade: Ajustes para telas muito pequenas (dispositivos móveis) */
@media (max-width: 480px) {
   .navbar {
    	display: flex;
    	flex-direction:column;
    	width:100%;
    }

    .menu a {
        font-size: 14px;  /* Menor tamanho de fonte */
        padding: 5px 8px;  /* Menos padding para economizar espaço */
    }

  
  .menu a#voltar {
    background-color: #04d361; 
    color: #F5F5F5; 
    border-radius: 1rem; 
    margin-right: 1rem;
  }

}