body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #0b0a11;
  color: white;
}

.logo img {
  height: 80px;
  margin-right: 30px;
}


header {
  
  background-color: #1f1f1f;
  padding: 1rem;

}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
}

.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;                
  padding: 0;
  margin: 0 auto;

}


.menu ul {
  list-style: none;

  gap: 10px;
  display: flex;
  margin: 0;
  padding: 0;
  
}

.menu li a {
  text-decoration: none;
  color: white;
  background-color: #2a2a2a;
  padding: 8px 16px;
  border-radius: 10px;
  transition: background-color 0.3s ease;
  display: inline-block;
 
}

.menu li a:hover {
  background-color: #444;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.footer {
  background-color: #1f1f1f;
  color: white;
  text-align: center;
  padding: 20px 0;
  font-size: 14px;
  margin-top: 40px;
  display: block;
}


.zap {
    position: fixed; /* Mantém o elemento fixo na tela */
    bottom: 20px;    /* Posição a 20px da parte inferior da tela (ajuste conforme necessário) */
    right: 20px;     /* Posição a 20px da parte direita da tela (ajuste conforme necessário) */
    transition: transform 0.2s ease; /* Sua transição suave */
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
    z-index: 1000;   /* Garante que fique por cima de outros elementos */
    /* Não defina 'transform' aqui no estado base */
    /* 'display: inline-block;' é implicitamente gerenciado por 'position: fixed'
       para o dimensionamento pelo conteúdo, ou você pode definir width/height. */
}

.zap:hover {
    transform: scale(1.05); /* Aumenta o tamanho em 5% no hover */
}

.zap img {
    display: block; /* Faz a imagem se comportar como um bloco, facilitando o dimensionamento */
    width: 90px;    /* Defina um tamanho para sua imagem/ícone (ajuste conforme necessário) */
    height: 90px;   /* Defina uma altura, ou use 'auto' para manter a proporção se width for definido */
    /* A propriedade 'max-width: 10%;' do seu código original pode tornar a imagem muito pequena,
       dependendo do tamanho da tela (10% da largura da viewport).
       Se quiser usar porcentagem, certifique-se que o elemento pai (.zap) tenha um tamanho definido,
       ou use unidades como 'vw' (viewport width) com mais cautela.
       Para um ícone fixo, um tamanho em 'px' costuma ser mais previsível. */
}

.expli {
  width: 60%; /* Define a largura da caixa (ex: 60% da largura do elemento pai) */
  margin-top: 20px; /* Espaço acima da caixa */
  margin-bottom: 20px; /* Espaço abaixo da caixa */
  margin-left: auto; /* Centraliza a caixa horizontalmente */
  margin-right: auto; /* Centraliza a caixa horizontalmente */
  padding: 25px; /* Espaçamento interno, entre o texto e a borda da caixa */
  border: 1px solid #ccc; /* Adiciona uma borda fina cinza */
  border-radius: 8px; /* Arredonda os cantos da caixa */
  background-color: #2e2e2e; /* Cor de fundo suave para a caixa */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para um efeito "flutuante" */
  text-align: center; /* Centraliza o texto DENTRO da caixa */
}

/* Estilo opcional para o parágrafo dentro da caixa, se necessário */
.expli p {
  line-height: 1.6; /* Melhora a legibilidade do texto com um espaçamento maior entre as linhas */
  color: #ffffff; /* Cor do texto (um cinza escuro) */
  /* Outros estilos de fonte como font-family, font-size podem ser adicionados aqui */
}


.pix {
text-align: center;
}

.pix img{
  border-radius: 10px;
}

.ps2,
.ps3 {
  width: 30%;
}





/* CSS para o container principal da seção FAQ */
.faq-geral-container {
  max-width: 700px;
  width: 90%;        
  margin-left: auto;   /* Estas duas propriedades centralizam o container na página */
  margin-right: auto;  /* quando ele tem uma 'width' ou 'max-width' definida. */
  margin-top: 40px;    /* Espaçamento acima da seção FAQ (ajuste conforme necessário) */
  margin-bottom: 40px; /* Espaçamento abaixo da seção FAQ (ajuste conforme necessário) */
}

/* CSS para centralizar o título "Perguntas Frequentes" dentro do container */
.faq-geral-container h2 {
  text-align: center; /* Centraliza o texto do título */
  color: #beca;   /* Ajuste a cor conforme o seu tema. Pela imagem, parece ser branco. */
  margin-bottom: 25px; /* Espaço entre o título e o primeiro item do FAQ */
}


.faq-item {
  border: 1px solid #444; /* Ex: Borda um pouco mais clara para tema escuro */
  margin-bottom: 8px;
  border-radius: 4px;
  /* background-color: #2c2c2c; /* Opcional: cor de fundo para cada item */
}

.faq-question {
  background-color: #3a3a3a; /* Ex: Cor de fundo para pergunta no tema escuro */
  color: #f0f0f0;         /* Ex: Cor do texto da pergunta */
  cursor: pointer;
  padding: 15px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.2s ease;
  position: relative;
  border-radius: 3px; /* Se .faq-item não tiver background, para arredondar a própria pergunta */
}

.faq-question:hover {
  background-color: #4a4a4a; /* Ex: Hover um pouco mais claro */
}

.faq-question::after {
  content: '+';
  font-size: 1.2em;
  color: #ccc; /* Ex: Ícone mais claro */
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.faq-question.active::after {
  content: "−";
}

.faq-answer {
  padding: 0 18px;
  background-color: #2c2c2c; /* Ex: Cor de fundo da resposta */
  color: #ddd;              /* Ex: Cor do texto da resposta */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
  line-height: 1.6;
  /* border-top: 1px solid #444; /* Opcional: linha separadora */
}

.faq-answer p {
  padding-top: 10px;
  padding-bottom: 10px;
}


.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 30px;
  color: white;
  cursor: pointer;
}

/* Mobile: mostrar botão e esconder menu */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1001;
  }

    .menu {
    display: none; /* Esconde o menu por padrão */
    flex-direction: column;
    align-items: center;
    background-color: #1f1f1f;
    width: 100%;
    padding: 1rem 0;
    margin-top: 60px;
  }

  .menu.show {
    display: flex; /* Mostra quando tiver a classe .show */
  }
}

/* SEU CSS EXISTENTE VEM AQUI PRIMEIRO */

/* ... (todo o seu CSS que você enviou) ... */


/* =========================================== */
/* ESTILOS PARA VERSÃO MOBILE (TELAS MENORES) */
/* =========================================== */
@media (max-width: 768px) {

    /* Ajustes no Header e Menu de Navegação */
    .navbar {
        flex-direction: column; /* Empilha o logo e o menu */
        align-items: center;   /* Centraliza os itens empilhados (logo e depois o bloco do menu) */
        padding: 1rem;         /* Reduz um pouco o padding do navbar */
    }

    .logo img {
        height: 60px;         /* Logo um pouco menor */
        margin-right: 0;      /* Remove a margem direita, já que vai ser centralizado ou empilhado */
        margin-bottom: 15px;  /* Adiciona espaço abaixo do logo quando empilhado com o menu */
    }

    .menu {
        /* O .menu em desktop tem 'margin: 0 auto;' e 'justify-content: center'
           Quando o .navbar vira column, o .menu vai ocupar a largura disponível abaixo do logo.
           Vamos fazer o .menu e seus itens ocuparem a largura e centralizar o texto dos links.
        */
        width: 100%;
        flex-direction: column; /* Se o menu em si precisar empilhar algo, embora o ul já vá */
        gap: 10px; /* Espaço entre os itens do menu quando empilhados */
        align-items: center; /* Centraliza os itens da lista (ul) se houver largura sobrando */
    }

    .menu ul {
        flex-direction: column; /* Itens do menu (li) ficam em coluna */
        width: 100%;            /* Lista ocupa toda a largura disponível */
        gap: 8px;              /* Espaço entre os links do menu */
    }

    .menu li {
        width: 100%; /* Cada item da lista ocupa 100% da largura */
        display: block; /* Garante que o li ocupe a linha toda */
    }

    .menu li a {
        display: block;       /* Faz o link preencher o <li> */
        text-align: center;   /* Centraliza o texto do link */
        padding: 12px 10px;   /* Ajusta o padding dos links */
        width: 90%;           /* Link ocupa quase toda a largura, com margens automáticas */
        margin-left: auto;
        margin-right: auto;
        border-radius: 8px;   /* Ajusta o border-radius se necessário */
    }

    /* Nota sobre 'nav ul': Seu CSS tem um '.menu ul' e um 'nav ul'.
       Se 'nav ul' for um menu diferente, ele provavelmente precisará de tratamento similar
       (ex: flex-direction: column). Se for o mesmo menu, as regras de '.menu ul' acima o cobrirão
       se a especificidade estiver correta ou se 'nav ul' for removido/ajustado para não conflitar.
       Assumindo que .menu é o principal.
    */
    nav ul { /* Se este for um menu diferente e horizontal */
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }


    /* Ajustes na caixa de explicação (.expli) */
    .expli {
        width: 90%; /* Ocupa mais da largura da tela, mas com pequenas margens */
        padding: 20px; /* Reduz o padding interno */
    }
    /* Se o texto dentro do .expli ficar muito grande, pode ajustar o font-size: */
    .expli h2 { /* Supondo que você tenha um h2 dentro do .expli */
        font-size: 1.6rem; /* Exemplo */
    }
    .expli p {
        font-size: 0.95rem; /* Exemplo */
        line-height: 1.5;
    }
    /* A borda do .expli é '#ccc', que é clara. No seu fundo escuro (#0b0a11),
       ela pode ficar pouco visível ou destoar. Considere uma cor mais escura para a borda: */
    .expli {
        border-color: #444; /* Exemplo de cor de borda para tema escuro */
    }


    /* Ajustes no container do FAQ */
    .faq-geral-container {
        width: 95%; /* Já usa 90%, então 95% pode ser um pequeno ajuste se quiser menos margem lateral */
        /* O max-width: 700px já o torna responsivo. Em telas menores, width: 90% (ou 95%) prevalecerá. */
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 0 5px; /* Remove padding lateral se width já controla isso */
    }

    .faq-geral-container h2 {
        font-size: 1.4rem; /* Título do FAQ um pouco menor */
        color: #e0e0e0; /* Ajuste da cor se #beca estiver muito específica */
    }

    .faq-question {
        font-size: 1rem; /* Tamanho da fonte da pergunta */
        padding: 12px 45px 12px 15px; /* Ajusta padding, mantendo espaço para o ícone '+'/'−' à direita */
    }
    .faq-question::after {
        right: 15px; /* Garante que o ícone permaneça na posição correta */
    }
    .faq-answer p {
        font-size: 0.9rem;
    }


    /* Botão Zap (WhatsApp) */
    /* Geralmente o .zap já está bom, mas se precisar diminuir: */
    /*
    .zap img {
        width: 50px;
        height: 50px;
    }
    .zap {
        bottom: 15px;
        right: 15px;
    }
    */

    /* Rodapé */
    .footer {
        font-size: 0.8rem; /* Fonte do rodapé menor */
        padding: 15px 10px;
    }

    .pix img {
      width: 80%;
    }

   
}

/* Você pode adicionar outro breakpoint para telas ainda menores se necessário */
/* Exemplo: @media (max-width: 480px) { ... } */