 /*--------------------------------------------------------------------------------------------------------*/
    /*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';
      max-width: 100%;
  }
  
  /*--------------------------------------------------------------------------------------------------------*/
        /*Menu (barra de navegação)*/  /*logo da empresa ao lado do menu*/
  
  /* Estilos para a logo */
  .logo {
  margin: auto;
  padding-left: 2%;
  }
  
  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: -10px; /* 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: flex; /* Define as colunas como flex container, para organizar os elementos horizontalmente */
      justify-content: space-between; /* 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) */
      margin-right: 20px; /* 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 */
    }
  }