body  {
    /* 1. Cor de Fundo */
    background-color: lightblue;

    /* 2. Borda (espessura, estilo, cor) */
    border: 5px solid navy;

    /* 3. Padding (opcional: espaço interno entre conteúdo e borda) */
    padding: 10px;

    /* 4. Margem (espaço externo ao redor do elemento) */
    margin: 10px;

    /* Opcional: Arredondar os cantos */
    border-radius: 10px;
}





  /* 1. Alinha todo o texto e elementos genéricos à esquerda no contêiner principal */
body, .conteudo-principal, div {
    text-align: left !important; }

/* 2. Seleciona elementos específicos de texto e garante alinhamento à esquerda */
 h1, h2, h3, h4, h5, h6, span, li, a {
    text-align: center !important;
    display: block; /* Garante que elementos inline se comportem como blocos */
}

p { text-align: lefth  ! importante;}

/* 3. Mantém imagens, vídeos, banners (iframes) e links no alinhamento original */
img, video, iframe, .banner, .video-container {
    display: block;        /* Se for imagem centralizada, muda para block */
    margin-left: 0;        /* Remove margem esquerda para ficar à esquerda */
    margin-right: auto;    /* Margem direita automática */
    text-align: left;
}

/* 4. Opcional: Se banners forem centralizados usando flexbox no pai,
      a regra abaixo anula isso para o banner */
.container-do-banner {
    display: block !important;
    text-align: left !important;}

  


  
          

         
          
         
         
    
    
    
   
       
    .banner {
    width: 100%;
    position: relative;
    text-align: center; 
    border: 1px solid black;  }

    .banner img {
    width: 980px; 
    max-width: 100%;
    height: auto;
    display: block;  }

    .banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  }
    
    
    
    // Navegação//
       
    body { margin: 0;
           padding: 0; }


    .navbar {
    background-color: #87CEFA; 
    border: 1px solid #000;  
    padding: 10px; 
    margin: 3px;  }


    .navbar ul {
    list-style-type: none; 
    margin: 0;
    padding: 0;
    display: flex;         
    justify-content: center; 
    gap: 10px;   }


    .navbar a {
    text-decoration: none; 
    color: black;          
    font-family: Arial, sans-serif;
    padding: 10px 15px;    
    display: block; }


    .navbar a:hover {
    background-color: #555;
    border-radius: 5px;  }

    
         
      
      
     
  /* Estilo para o Contador de visitas*/
 

     
       
    .container-contador {
    background-color: #f4f4f4; /* Cor de fundo suave */
    padding: 15px; /* Espaçamento interno */
    border-radius: 8px; /* Bordas arredondadas */
    font-family: Arial, sans-serif; /* Fonte */
    text-align: center; /* Centraliza o texto */
    border: 1px solid #ddd; /* Borda fina */
    display: inline-block; margin: 10px 5px 10px 5px;/* Ajusta o tamanho ao conteúdo */ }

    .texto-ao-vivo {
    font-weight: bold;
    color: #333; /* Cor do texto */
    margin-right: 30px; /* Espaço entre o texto e o contador */
    display: block; /* Quebra linha antes do contador */
    margin-bottom: 5px; }

/* Estilizando o número gerado pelo script (geralmente ele fica dentro de um link ou span gerado) */
    .container-contador a {
    color: #c4302b; /* Cor baseada no código (c4302bffffff) */
    font-size: 1.2em; /* Tamanho da fonte */
    font-weight: bold;
    text-decoration: none; }

        
        
        
// Estilo para os HS //
 
 

     
h1 { font-size: 2.0em;
     color: #e60e22; }
     
h2 { font-size: 1.8em;
     color: #27ae60; }
     
h3 { font-size: 1.6em;
     color: #e67e22; } 
  
h4 { font-size: 1.2em;
     color: #27ae60; }
     
h5 { font-size: 1.1em;
     color: #e67e22; }
  
h6 { font-size: 1.0em;
     color: #27ae60; }

    
     
     
     // Formulário//
     
     
     
     .form-group {
    margin-bottom: 15px; }
label {
    display: block;
    margin-bottom: 5px;  }
    
    /* ... seu código anterior ... */

input[type="text"],
input[type="email"] {
    padding: 8px;
    width: 300px; /* Isso faz todos ficarem grandes */
    border: 1px solid #777;
    border-radius: 4px;
    box-sizing: border-box; }

/* ... resto do seu código ... */
  
input[type="checkbox"] {
    margin-right: 10px; }
    
button {
    padding: 10px 15px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer; }
    
button:hover {
    background-color: #0056b3; }

     
     
     
   
    /* Estilo geral para o formulário */
    
    
    
 
 
 
.form-group {
    margin-bottom: 15px;
}
label {
    display: block;
    margin-bottom: 5px;
}

/* --- CORREÇÃO AQUI: Adicionado email, color e placeholder --- */
input[type="text"],
input[type="email"] 
    padding: 8px;
    width: 100%;
    border: 1px solid #777; /* Escureci um pouco mais a borda */
    

/* Melhora a cor do texto "apagado" (placeholder) */
input[type="email"]::placeholder {
    color: #888;
    opacity: 1; /* Firefox precisa disso */
}

input[type="checkbox"] {
    margin-right: 10px;
}
button {
    padding: 10px 15px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
}
button:hover {
    background-color: #0056b3;  }
      
       
       
  
   
     
    
    // Este site utiliza cookies//
    
    
     .form-group { margin-bottom: 100px; }
        label { display: block; margin-bottom: 5px; }
        input[type="text"], input[type="number"] { padding: 8px; width: 300px; }
        input[type="checkbox"] { margin-right: 10px;  }
        button { padding: 10px 15px; background-color: #007BFF; color: #000; border: none; cursor: pointer; margin: 10px 10px 10px 10px; }
        button:hover { background-color: red; }
    
    
    
  // Pix container //

   
    
        .pix-container { width: 300px; margin: 0 auto; border: 1px solid #000; padding: 20px; border-radius: 10px; }
        .qr-code { width: 200px; height: 200px; margin: 10px 0; }
        .hash-box { width: 90%; padding: 10px; margin-top: 10px; font-size: 12px; }
        .button-copy { background-color: #32BFB5; color: white; border: none; padding: 10px 20px; cursor: pointer; border-radius: 5px; margin-top: 10px; }
        .button-copy:hover { background-color: #299b92; }
        
        
       
       
      // Usuários ao vivo //
      
       
  /* Container principal para centralização */
  .contador-wrapper {
    display: flex;
    justify-content: center; 
    margin: 20px 0;  }

  /* Estilização da borda e do contador */
  .contador {
    border: 2px solid #333; 
    border-radius: 8px; 
    padding: 10px; 
    background-color: #f9f9f9; 
    display: inline-flex;
    flex-direction: column; 
    align-items: center; 
    box-shadow: 2px 2px 5px   rgba(0,0,0,0.2);  }

  /* Ajustar imagem (opcional) */
  .contador img {
    max-width: 100%;
    height: auto;
    margin-bottom: 5px;  }

  /* Estilizar o link inferior */
  .contador a:last-child {
    font-family: brush script;
    font-size: 10px;
    color: #555;
    text-decoration: none;   }
    
    
    
    
    
    
    // Vídeo //
    
    
    
    /* CSS para tornar o vídeo responsivo */
        .container-video {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;   }

        video {
            width: 100%;
            height: auto;
            border: 2px solid #333;
            border-radius: 8px;
            box-shadow: 0 4px 8px  rgba(0,0,0,0.2);   }
    
    
        
    
          
    // img homem//
    
     
    
    .banner { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-size: cover; background-position: center;  }
    
    .banner { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-size: cover; background-position: center; }
    
    .banner { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-size: cover; background-position: center; }

     .banner { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-size: cover; background-position: center; }
     
     .banner { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-size: cover; background-position: center; }
     
     .banner { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-size: cover; background-position: center; }
     
     .banner { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-size: cover; background-position: center; }