/* Estilos básicos */
* {
    box-sizing: border-box; /* Inclui padding e bordas no tamanho total dos elementos */
}

.link-sem-linha {
  text-decoration: none;
  color: #FFFFFF;
  font-family: Century Gothic, sans-serif;
  font-size: 15px;
}

body {
    font-family: 'Century Gothic', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

nav {
    background-color: #cecece;
    padding: 10px 0;
    width: 100%;
    box-sizing: border-box; /* Garante que o padding não adicione largura extra */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 1rem; /* Espaçamento entre os itens do menu */
}

nav ul li a {
    text-decoration: none;
    color: #000;
    transition: color 0.3s; /* Adiciona uma transição suave */
}

nav ul li a:hover {
    color: #ff6600; /* Cor ao passar o mouse */
}

.menu-hamburguer {
    display: none; /* Oculta por padrão */
    cursor: pointer; /* Muda o cursor ao passar por cima do ícone */
}

.menu-hamburguer span {
    font-size: 2rem; /* Tamanho da fonte do ícone hamburguer */
}

/* Caixa de Busca */
.info-section {
    width: 100%; /* Largura total */
    height: 100px; /* Altura fixa da caixa */
    background-color: black; /* Cor de fundo da caixa */
    display: flex; /* Usar flexbox para organizar os itens */
    align-items: center; /* Alinha verticalmente ao centro */
}

.info-content {
    display: flex; /* Usar flexbox para o conteúdo interno */
    width: 100%; /* Largura total do conteúdo */
    justify-content: space-between; /* Espaço entre os elementos */
    padding: 0 10%; /* Padding lateral */
}

.logo-box {
    width: 20%; /* 20% da largura total para o logo */
}

.search-box {
    width: 30%; /* 60% da largura total para a barra de busca */
	}

.social-box {
    width: 20%; /* 20% da largura total para os ícones sociais */
}

/* Logo */
.logo-left {
    max-width: 100px; /* Tamanho do logo */
}

/* Estilos da barra de busca */
.search-container {
    display: flex; /* Usar flex para alinhar o campo e o botão */
    align-items: center; /* Alinha verticalmente */
    width: 100%; /* Largura total da barra de busca */
	justify-content: center;
	border-radius: 20px;
	background: #FFFFFF;
	
}

#search-input {
    padding: 10px; /* Padding do campo de busca */
    width: 100%; /* Ajusta a largura do campo de busca */
    max-width: 300px; /* Define uma largura máxima */
    margin-right: 0px; /* Espaço entre o campo de busca e o botão */
    border: 0px solid #ccc; /* Borda do campo de busca */
    border-radius: 4px; /* Arredondamento das bordas do campo de busca */

	
}

#search-btn {
    padding: 10px; /* Padding do botão da lupa */
    cursor: pointer; /* Cursor de pointer sobre o botão */
    background: #ffffff; /* Cor de fundo do botão */
    border: none; /* Remove a borda do botão */
    border-radius: 4px; /* Arredondamento das bordas do botão */
    font-size: 16px; /* Tamanho da fonte do botão */
}

/* Ícones sociais */
.social-icons {
    display: flex; /* Exibe os ícones em linha */
    gap: 10px; /* Espaçamento entre os ícones */
    justify-content: flex-end; /* Alinha os ícones à direita */
}

/* Estilos do Popup */
.popup {
    display: none; /* Oculta o popup por padrão */
    position: fixed; /* Fixa o popup na tela */
    left: 0;
    top: 0;
    width: 100%; /* Largura total */
    height: 100%; /* Altura total */
    background-color: rgba(0, 0, 0, 0.8); /* Fundo semi-transparente */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    z-index: 9999; /* Garante que o popup fique acima de outros elementos */
}

.popup-content {
    background-color: black; /* Fundo do popup */
    color: white; /* Cor do texto */
    padding: 20px; /* Padding do conteúdo */
    border-radius: 8px; /* Bordas arredondadas */
    text-align: center; /* Centraliza o texto */
}

.close-btn {
    color: white; /* Cor do botão de fechar */
    font-size: 24px; /* Tamanho da fonte */
    cursor: pointer; /* Muda o cursor ao passar por cima do botão */
    float: right; /* Coloca o botão à direita */
}


/* menu icones */
.menu-wrapper {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.5) transparent;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  margin-top: 10px;
  padding-bottom: 30px; /* Adicionado para dar espaço ao scroll-indicator */
}

.menu-content {
  display: inline-flex;
  padding: 20px 0;
  height: 100%;
  align-items: center;
}

.menu-item {
  display: inline-block;
  margin: 0 10px;
}

.menu-item img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.menu-item:hover img {
  transform: scale(1.1);
}

.scroll-indicator {
  display: none;
  position: absolute; /* Alterado de fixed para absolute */
  bottom: 5px; /* Posicionado na parte inferior do menu-wrapper */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0,0,0,0.7);
  color: white;
  padding: 5px 10px; /* Adicionado padding */
  font-size: 12px;
  white-space: nowrap;
  z-index: 100;
}

/* Rodapé */
.footer {
      background-color: black; /* Cor de fundo preta */
      color: white; /* Cor do texto branco */
      padding: 20px 0; /* Espaçamento interno */
    }

    .rodape {
    
      padding: 20px; /* Espaçamento interno */
      margin: 0 auto; /* Centralizar horizontalmente */
      max-width: 1200px; /* Largura máxima */
    }

    .footer-logo {
      margin-bottom: 20px; /* Espaçamento inferior */
    }
/* Formulário */

#maps{
width: 30%;
align-content: center;
float: left;
margin-top: 30px;
}

#form{
	
	width: 70%;
	align-content: center;
	
}

.conteudo{
  max-width: 1300px;
  height: auto;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
 box-sizing: border-box;

}
	
/* Responsividade */
@media (max-width: 768px) {
    nav ul {
        display: none; /* Oculta o menu padrão em telas pequenas */
        flex-direction: column; /* Alinha itens em coluna */
        align-items: flex-start; /* Alinha à esquerda */
        width: 100%; /* Largura total */
        background-color: #cecece; /* Cor de fundo do menu */
        position: absolute; /* Fixa o menu em relação ao nav */
        top: 56px; /* Abaixo do cabeçalho, ajuste conforme necessário */
        left: 0; /* Alinhado à esquerda */
        z-index: 10; /* Garante que o menu fique acima dos outros elementos */
    }

    nav ul.show {
        display: flex; /* Mostra o menu quando a classe 'show' for adicionada */
    }

    nav ul li {
        margin: 0.5rem 0; /* Margem entre itens */
    }

    .menu-hamburguer {
        display: flex; /* Mostra o hamburguer em telas pequenas */
    }

    .info-section {
        flex-direction: column; /* Empilha elementos verticalmente em telas pequenas */
        height: auto; /* Permite que a altura se ajuste */
    }

    .info-content {
        flex-direction: column; /* Alinha os itens um abaixo do outro */
        align-items: center; /* Centraliza os itens */
        width: 90%; /* Ajusta a largura em telas pequenas */
    }

    .logo-box, .search-box, .social-box {
        width: 90%; /* Ajusta a largura em telas pequenas */
        margin-bottom: 10px; /* Espaço entre as caixas */
    }

    .search-container {
        justify-content: center; /* Centraliza a barra de pesquisa */
    }

    #search-input {
        width: 100%; /* Barra de busca ajustada para ocupar 100% do espaço */
    }
	
	    .nav-button {
        display: block; /* Exibe os botões em telas pequenas */
    }
  
  .menu-wrapper {
    height: 100px;
    justify-content: flex-start;
  }

  .scroll-indicator {
    display: block;
	  }
}