/*--------------------------------------------------------------------------------------------------------*/
    /*Não mexer pois*/
    /*aqui so tem Rodape, menu, logo */

    @font-face{
      font-family: 'Futura';
      src: url('/tipo grafia/futura sv/Futura\ Thin.ttf');
    }

body{
    font-family: 'Futura';
}

/*--------------------------------------------------------------------------------------------------------*/
      /*Menu (barra de navegação)*/  /*logo da empresa ao lado do menu*/

/* Estilos para a logo */
.logo {
margin: auto;
padding-left: 5%;
}

header {
  display: flex; /* Para garantir que o logotipo e o menu fiquem na mesma linha */
  align-items: center; /* Centraliza verticalmente os itens dentro do header */
  background-image: url('Imagens/FUNDO/fundo\ teste.png'); /* Substitua 'caminho-para-sua-imagem.jpg' pelo caminho real da sua imagem */
  background-size: cover; /* Ajusta o tamanho da imagem para cobrir todo o cabeçalho */
  background-repeat: no-repeat; /* Evita repetição da imagem */
  height: auto; /* Define a altura */ 
  width: auto; /* Define a largura */
  }

  nav{
    display: flex; /* Define o elemento <nav> como um flex container */
    height: 70px; /* Define a altura do <nav> como 80 pixels */
    width: 100%; /* Define a largura do <nav> como 100% da largura disponível do contêiner pai */
    align-items: center; /* Centraliza verticalmente os itens dentro do <nav> */
    justify-content: space-between; /* Distribui os itens dentro do <nav> ao longo do eixo principal (horizontal)
    O primeiro item começa no início e o último item termina no final do <nav> 
    Os itens intermediários são distribuídos igualmente com espaços entre eles */
    padding: 0 2% 0 1px; /* Define o preenchimento (espaçamento interno) do <nav> 
    0 pixels no topo, 50 pixels à esquerda e 100 pixels à direita */
    flex-wrap: wrap;/* Permite que os itens dentro do <nav> quebrem para a próxima linha 
    quando não houver espaço suficiente para a largura total dos itens */
  
  }
/* Estiliza o elemento com a classe .logo dentro do <nav> */
.nav {
  color: white; /* Define a cor do texto como branco */
  font-size: 35px; /* Define o tamanho da fonte como 35 pixels */
  font-weight: 600; /* Define a espessura da fonte como negrito (600) */
}

/* Estiliza o elemento <ul> dentro do <nav> */
nav ul {
  display: flex; /* Define o <ul> como um flex container, para organizar os itens horizontalmente */
  flex-wrap: wrap; /* Permite que os itens dentro do <ul> quebrem para a próxima linha quando necessário */
  list-style: none; /* Remove os marcadores de lista (pontinhos) dos itens do <ul> */
}

/* Estiliza os elementos <li> dentro do <ul> */
nav ul li {
  margin: 0 5px; /* Define uma margem de 5 pixels à direita e à esquerda de cada item do <ul> */
}

/* Estiliza os links <a> dentro dos elementos <li> que estão dentro do <ul> dentro do <nav> */
nav ul li a {
  color: #ffffff; /* Define a cor do texto do link como #f2f2f2 (branco quase branco) */
  text-decoration: none; /* Remove o sublinhado padrão dos links */
  font-size: 23px; /* Define o tamanho da fonte como 18 pixels */
  font-weight: 500; /* Define a espessura da fonte como 500 (meio caminho entre normal e negrito) */
  padding: 8px 11px; /* Define o preenchimento (espaçamento interno) do link */
  border-radius: 5px; /* Adiciona bordas arredondadas ao link, criando cantos suavizados */
  letter-spacing: 1px; /* Define o espaçamento entre caracteres como 1 pixel */
  transition: all 0.1s ease; /* Adiciona uma transição suave de 0.3 segundos a todas as propriedades CSS quando houver mudança de estado */
}

/* Estiliza o link ativo (active) e o link quando o cursor está sobre ele (hover) */
nav ul li a:hover {
  background: #5C7AF2; /* Define a cor de fundo do link como #f88f06 (um tom de laranja) */
  text-decoration: none;
}

nav .menu-btn {
  margin-left: auto; /* Adiciona margem à esquerda para empurrar o ícone para o canto */
}

/* Estiliza o ícone que representa o botão do menu responsivo */
nav .menu-btn i {
  color: #fff; /* Define a cor do ícone como branco */
  cursor: pointer; /* Mostra o cursor como uma mãozinha quando passar sobre o ícone, indicando que é clicável */
  display: none; /* Inicialmente oculta o ícone, pois é específico para a versão responsiva */
  position: relative; /* Adicione esta linha para que a mudança de z-index funcione corretamente */
}

/* Estiliza o ícone que representa o botão do menu responsivo quando a tela é menor ou igual a 1036px pixels */
@media (max-width: 1036px) {
  .logo{
    max-width: 100%; 
    height: auto;
  }

  nav .menu-btn i {
      display: block; /* Mostra o ícone do botão do menu */
  }

  
  nav ul {
    position: fixed; /* Define a posição do <ul> como fixa */
    top: -1%; /* Define a distância do topo como 80 pixels */
    right: -200%; /* Inicialmente esconde o <ul> deslocando-o para a esquerda (-100% da largura) */
    background-color: #97a8ce; /* Define a cor de fundo do <ul> como #003840 (um tom de azul escuro) */
    height: 100vh; /* Define a altura do <ul> como 100% da altura da viewport */
    width: 100%; /* Define a largura do <ul> como 100% da largura disponível */
    text-align: left; /* Centraliza o conteúdo do <ul> horizontalmente */
    display: block; /* Exibe o <ul> como bloco (não como flex container) */
    transition: all 0.1s ease; /* Adiciona uma transição suave de 0.3 segundos a todas as propriedades CSS quando houver mudança de estado */
  }

  nav ul.open {
      right: -60%; /* Quando a classe .open é aplicada, o <ul> é movido para a posição esquerda 0 (visível) */
  }
  nav ul li {
      width: 100%; /* Define a largura dos itens do menu como 100% */
      margin: 50px 0; /* Define uma margem de 50 pixels no topo e na base de cada item do menu */
      
  }
  nav ul li a {
      font-size: 23px; /* Define o tamanho da fonte dos links do menu como 23 pixels */
  }
  nav ul li a:hover {
      background: none; /* Remove o fundo dos links quando estão ativos ou quando o cursor está sobre eles */
      color: #5C7AF2; /* Define a cor do texto dos links como #f88f06 (um tom de laranja) quando estão ativos ou quando o cursor está sobre eles */
      text-decoration: none;
    }
}

/* Ajustes para dispositivos menores */
@media (max-width: 768px) {

  header {
    display: flex; /* Para garantir que o logotipo e o menu fiquem na mesma linha */
    height: auto; /* Define a altura */ 
    width: auto; /* Define a largura */
  }  

  /* Reduza o tamanho da fonte para dispositivos menores */
  nav ul li a {
    font-size: 16px;
  }

  /* Reduza o espaçamento entre os itens do menu */
  nav ul li {
    margin: 10px 0;
  }

  /* Ajuste o espaçamento interno do menu responsivo */
  nav {
    padding: 0 10px;
  }
}



/*--------------------------------------------------------------------------------------------------------*/
   /*Roda pe*/

  /* Estilos para o rodapé em geral */
  footer {
    background-color: #f0f0f0; /* Define a cor de fundo do rodapé como #f0f0f0 (um tom de cinza claro) */
    padding: 20px; /* Define um espaçamento interno de 20 pixels em todas as direções */
    text-align: center; /* Adiciona alinhamento central para o conteúdo do rodapé */
  }
    
  /* Estilos para a logo horizontal no rodapé */
  .logo-horizontal img {
    width: 200px; /* Define a largura da imagem da logo horizontal como 200 pixels */
    margin-bottom: -20px; /* Define uma margem negativa (levanta a logo) para ajustar a posição em relação ao conteúdo acima */
  }
    
  /* Estilos para as colunas no rodapé */
  .colunas {
    display: inline-flex; /* Define as colunas como flex container, para organizar os elementos horizontalmente */
    justify-content: center; /* Distribui as colunas igualmente ao longo do eixo principal (horizontal) */
    margin-top: 20px; /* Define uma margem superior de 20 pixels para separar as colunas do conteúdo acima */

  }
    
  /* Estilos para cada coluna no rodapé */
  .coluna {
    flex: 1; /* Define que as colunas têm a mesma largura (flexibilidade igual) */
    justify-content: space-evenly;
    margin-left: 40px;/* Define uma margem à direita de 20 pixels para separar as colunas */
  }
    
  /* Estilos para os títulos de cada coluna */
  .coluna h3 {
    font-size: 18px; /* Define o tamanho da fonte do título da coluna como 18 pixels */
    margin-bottom: 10px; /* Define uma margem inferior de 10 pixels para separar o título do conteúdo abaixo */
  }
  
    /* Estilos para as listas não ordenadas dentro das colunas */
  .coluna ul {
    list-style: none; /* Remove os marcadores de lista (pontinhos) dos itens da lista */
    padding: 0; /* Remove o espaçamento interno padrão da lista */
  }
  
  /* Estilos para cada item da lista dentro das colunas */
  .coluna li {
    margin-bottom: 5px; /* Define uma margem inferior de 5 pixels para separar os itens da lista */
  }
    
  /* Estilos para os links dentro das colunas */
  .coluna a {
    text-decoration: none; /* Remove o sublinhado padrão dos links */
    color: #333; /* Define a cor do texto dos links como cinza escuro (#333) */
  }
  
  /* Estilos para a coluna do rodapé */
  .rodape-coluna {
    flex: 1; /* Define que a coluna ocupe todo o espaço disponível */
    margin-right: 20px; /* Define uma margem à direita de 20 pixels para separar as colunas */
  }
    
  /* Estilos para o texto final no rodapé */
  .texto-final {
    margin: 20px; /* Define uma margem de 20 pixels em todas as direções para separar o texto final */
    font-size: 18px; /* Define o tamanho da fonte do texto final como 18 pixels */
    font-weight: bold; /* Define a espessura da fonte como negrito */
  }

  /* Estilos para o elemento .informacoes no rodapé */
  .informacoes {
    display: flex; /* Define o elemento como um flex container para alinhar os itens horizontalmente */
    align-items: center; /* Centraliza verticalmente os itens dentro do elemento */
    justify-content: center; /* Alinha o conteúdo horizontalmente */
    text-align: center; /* Centraliza o texto dentro do elemento */
  }
    
  /* Estilos para parágrafos dentro do elemento .informacoes */
  .informacoes p {
    margin-right: 20px; /* Define uma margem à direita de 20 pixels para separar os parágrafos */
  }
    
  /* Estilos para o elemento .direitos-reservados no rodapé */
  .direitos-reservados {
    display: flex; /* Define o elemento como um flex container para alinhar os itens verticalmente */
    flex-direction: column; /* Define a direção dos itens como coluna */
    align-items: center; /* Centraliza os itens verticalmente */
    margin-top: 10px; /* Define uma margem superior de 10 pixels para separar o elemento do conteúdo acima */
  }
  
/* Estilos para o texto dentro do elemento .direitos-reservados */
.footer-text {
  margin-bottom: 10px; /* Define uma margem inferior de 10 pixels para separar o texto do elemento abaixo */
}

/* Estilos para links com a classe .rp-inf-3 */
.rp-inf-3 a {
  color: #000; /* Define a cor do texto dos links como preto (#000) */
  text-decoration: none; /* Remove o sublinhado padrão dos links */
}

/* Estilos para links com a classe .rp-inf-3 quando o cursor está sobre eles */
.rp-inf-3 a:hover {
  text-decoration: underline; /* Adiciona uma linha de sublinhado aos links quando o cursor está sobre eles */
}

/* Estilos para links em geral */
a {
  color: #0066cc; /* Define a cor do texto dos links como azul (#0066cc) */
}

/* Estilos para links em geral quando o cursor está sobre eles */
a:hover {
  text-decoration: underline; /* Adiciona uma linha de sublinhado aos links quando o cursor está sobre eles */
}
  
/* Estilos para o layout responsivo do rodapé em dispositivos móveis (largura de tela até 768px) */
/* Estilos para o layout responsivo do rodapé em dispositivos móveis (largura de tela até 768px) */
@media (max-width: 890px) {
  .conteudo-contato {
    flex-direction: column; /* Altera a direção dos elementos para coluna */
  }

  .contato-form,
  .informacoes-contato {
    margin-right: 0; /* Remove a margem à direita para centralizar os elementos */
    max-width: none; /* Remove a largura máxima para ocupar toda a largura */
  }

  .informacoes-contato {
    margin-top: 20px; /* Adiciona margem superior para separar da seção acima */
  }

  .colunas {
    flex-direction: column; /* Altera a direção das colunas para coluna */
    margin-top: 20px; /* Adiciona margem superior para separar as colunas */
  }

  .coluna {
    margin-right: 0; /* Remove a margem à direita para centralizar as colunas */
  }

  .logo-horizontal img {
    width: 240px; /* Reduz a largura da logo horizontal */
    margin-bottom: 0; /* Remove a margem negativa para ajustar a posição */
  }

  .midia-contato {
    margin-top: 20px; /* Adiciona margem superior para separar da seção acima */
  }

  .midia-icons {
    flex-direction: row; /* Alinha os ícones de mídia horizontalmente */
    justify-content: center; /* Centraliza os ícones horizontalmente */
  }

  .informacoes {
    flex-direction: column; /* Altera a direção para coluna */
    align-items: center; /* Centraliza os elementos verticalmente */
    text-align: center; /* Centraliza o texto horizontalmente */
  }

  .direitos-reservados {
    margin-top: 20px; /* Adiciona margem superior para separar da seção acima */
  }
}