* {
   margin: 0;
   padding: 0;
   box-sizing: border-box; 
 }
body{
 transform-origin: 0 0; 
 margin: 0;
   font-family: 'Roboto', sans-serif;
   font-weight: 500;
}


.nomeproduto
{
   font-family: 'Roboto', sans-serif;
   font-weight: 525;
   font-size: 15px;
    
}
 .img_busca
   {
   
      width: 20px;
      height: 20px;
   }
/*====================HEADER DE OUTRAS PAGINAS COMEÇO*/
.header_page
{
     background: linear-gradient(to left, #3d4977, #171D33);
      justify-content:space-around;
      display:flex;
      
      text-align:center;
      padding: 10px;
}
.header_img
{

    width: 80px;
    height: 60px;
}
/*HEADER DE OUTRAS PAGINAS FIM*/

/*===========================PAGINA DE CADASTRO PARA DESKTOP STYLE COMEÇO===========*/
.dob-container {
    margin: 5px;
    max-width: 500px;
    text-align: left;
    
}
.dob-title {
    

     font-family: 'Roboto', sans-serif;
   font-weight: 550;
color:#5f6368;
font-size: 18px;
}




.dob-selects {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.dob-selects select {
    flex: 1;
    
    font-size: 1rem;
    background-color: #fff;
    appearance: none; 
    color:#5f6368;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
    transition: border 0.2s, box-shadow 0.2s;
}

.dob-selects select:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74,144,226,0.2);
}


.form_senha {
    display: flex;
    gap: 10px; /* Espaço entre os inputs */
    padding: 5px;
}

.input_cadastro {
    height: 32px;
    margin-bottom: 8px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
    transition: border 0.2s, box-shadow 0.2s;
    box-sizing: border-box;

}
.input_cadastro:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74,144,226,0.2);
}


.input_cadastro_pai {
    width: 100%;
    height: 32px;
    margin-bottom: 8px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
    transition: border 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.input_cadastro_pai:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74,144,226,0.2);
}

     
.input_filho {
    width: 100%;
    height: 32px;
    margin-bottom: 8px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
    transition: border 0.2s, box-shadow 0.2s;
}
.input_filho:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74,144,226,0.2);
}






.containercadastro {
    margin-top:50px;
    box-shadow:
  0 3px 6px rgba(0, 0, 0, 0.05),
  0 5px 15px rgba(0, 0, 0, 0.04);
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    padding:20px;
    height:auto;
    background-color:white;
    border-radius:11px;
    font-family: Arial, sans-serif;
    font-weight: 500;


}
.containercadastro button {
    background-color: #0077ff;
    text-align: center;
    justify-content: center;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    
    font-size: 15px;
    
    
    
    
    cursor: pointer;
    transition: 0.15s;
    

    padding: 12px;
     background-color: white;
    border:solid 1px #0077ff;
    border-radius: 25px;
    color: black;
    font-family: Arial, sans-serif;
    font-weight: 550;
     
}
.containercadastro button:focus {
    
      outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74,144,226,0.2);
}




.form_cadastro
{
    padding: 5px;
    width: 100%;

}





.form_filho
{
 display: flex;
    gap: 10px; /* Espaço entre os inputs */
    padding: 5px;

}


.inputdecadastro {
    background-color: white;
    border-radius: 4px;
    width: 100%;
    height: 40px;
    border: 1px solid #bebcbc;
    font-family: 'Humanst521 BT';
    padding: 10px;
}
    .inputdecadastro:focus {
        outline-color: cornflowerblue;
    }
.menssagemdeerro {
    color: red;
    font-size: 12px;
    height:15px;
    font-family: 'Humanst521 BT';
}
.menssagemdeerromenores {
    margin-left: 50px;
    color: red;
    font-size: 12px;
    font-family: 'Humanst521 BT';
}
/*FIM/








/*PAGINA DE CADASTRO STYLE COMEÇO/






/**/
/*PAGINA CARRINHO DE COMPRAS COMECO*/
.carrinho-container {
  max-width: 1100px;
  margin: 30px auto;
  display: flex;
  gap: 20px;
}
.total-geral {
    display: flex;
    justify-content: space-between; /* espaça os elementos para as extremidades */
    font-size: 18px;
    font-weight: 600;
    padding: 10px 0;
    border-top: 1px solid #ccc;  
}

.sacola-box {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  flex: 2;
}



.titulo-secao {
  font-size: 22px;
  font-weight: bold;
}

.titulo-secao span {
  color: #3483fa;
  font-size: 18px;
}

.item {
  display: flex;
  margin-top: 20px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 15px;
}

.item-img {
  width: 90px;
}

.item-info {
  margin-left: 15px;
  flex: 1;
}

.item-nome {
  font-size: 16px;
  font-weight: bold;
}

.item-preco {
  font-size: 17px;
  color: #00a857;
  font-weight: bold;
}

.item-preco span {
  font-size: 14px;
  color: #666;
}

.excluir {
  color: #ff3b30;
  cursor: pointer;
  font-size: 14px;
  margin-top: 8px;
  display: inline-block;
}

.aviso {
  background: #e8f0fe;
  padding: 10px;
  margin-top: 20px;
  border-radius: 5px;
  color: #333;
}

.resumo {
  flex: 1;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  height: fit-content;
}

.cep {
  font-size: 14px;
}

.cep .alterar {
  color: #3483fa;
  cursor: pointer;
}

.cupom {
  margin: 20px 0;
  display: flex;
  gap: 10px;
}

.cupom input {
  flex: 1;
  padding: 8px;
}

.cupom button {
  background: #00a857;
  color: #fff;
  border: none;
  padding: 8px 15px;
  cursor: pointer;
  border-radius: 5px;
}

.total strong {
  font-size: 20px;
  color: #00a857;
}

.continuar {
    width: 100%;
    padding: 14px 0;              /* um pouco mais alto para melhor clique */
    background-color: #171D33;     /* verde principal */
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    border-radius: 8px;
    margin-top: 20px;
    transition: all 0.3s ease;
    border-color: 1px solid #171D33;
}

.continuar:hover {
    background-color: #4f5e96;    
    
    
}

.carrinho-footer {
  text-align: center;
  margin-top: 30px;
}

.btn-endereco {
  background: #3483fa;
  color: white;
  padding: 15px 20px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}
.carrinho-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.carrinho-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 10px;

    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.item-img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.item-info {
    flex: 1;
}

.item-nome {
    display: block;
    font-size: 18px;
    color: #333;
    margin-bottom: 6px;
}

.item-qtde {
    font-size: 14px;
    color: #555;
    margin-bottom: 4px;
}

.item-preco {
    font-size: 14px;
    color: #0077cc;
    font-weight: 600;
}

.btn-excluir {
    background: #ff4d4d;
    border: none;
    padding: 10px 16px;
    color: white;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: 0.2s;
}

.btn-excluir:hover {
    background: #e63a3a;
}

.btn-excluir .icon {
    font-size: 18px;
}

/*quantidade*/
.item-qtde-controle {
    display: block;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    padding: 10px;
}

   .btn_busca
   {
      border-top-right-radius: 11px;
      border-bottom-right-radius: 11px;
      height: 50px;
      width: 50px;
      background-color: white;
      border:none;
      margin-left: -20;
   
   }


.btn_qtd {
    background: #171D33;
    color: white;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    font-size: 20px;
    cursor: pointer;
    
    transition: .2s;
    
}
.btn_qtd:hover {
    background: #475483;
}




   
.btn-qtd.minus {
    background: #ff4d4d;
    color: white;
}

.btn-qtd.minus:hover {
    background: #d93d3d;
}

.quantidade-atual {
    font-size: 16px;
    font-weight: bold;
    width: 36px;
    text-align: center;
}

.btn-comprar-mais {
    background-color: #fff;       /* fundo branco */
    color: #171D33;               /* texto azul */
    border: 2px solid #171D33;    /* borda azul */
    border-radius: 6px;
    padding: 12px 24px;
    width: 100%;
    margin-top: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-comprar-mais:hover {
    background-color: #171D33;    /* fundo azul ao passar o mouse */
    color: #fff;                  /* texto branco no hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/*PAGINA CARRINHO DE COMPRAS FIM*/





/*========================================PAGINA DE LOGIN COMECO========================*/

.formRecuperar_container
{
   justify-self: center;
    justify-items: center;
   justify-content: center;
   display: flex;
   margin-top: 70px;

}

.formRecuperar
{
   width: 500px;
   height: auto;
   background-color: white;
   border-radius: 6px;
   padding: 20px;

}
.formRecuperar input
{
   width: 100%;
    height: 40px;
    margin-bottom: 8px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
    transition: border 0.2s, box-shadow 0.2s;
    margin-top: 15px;
    box-sizing: border-box;

}

.formRecuperar span
{
        font-family: 'Roboto', sans-serif;
   font-weight: 550;
   font-size: 14px;

   
}

.formRecuperar p
{
        font-family: 'Roboto', sans-serif;
   font-weight: 500;
   font-size: 12px;

   
}


.formRecuperar input:focus
{
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74,144,226,0.2);

}

.formRecuperar button
{
    flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 8px;
      background-color: #373636;
border: 1px solid rgba(0,0,0,0.2);
      padding: 12px;
      border-radius: 10px;
      font-weight: bold;
      color: white;
      cursor: pointer;
       font-family: 'Roboto', sans-serif;
   font-weight: 550;

      
      justify-content: center;
      align-items: center;
      gap: 6px;
      padding: 10px 18px;
      font-size: 15px;
      font-weight: 500;
      border-radius: 6px; 
      width: 100%;
          margin-top: 15px;

}
.formRecuperar button:focus
{
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74,144,226,0.2);

}




.vazio

{

    height: 350px;
}


.esqueci_senha{

    margin-top: 20px;
}

.esqueci_senha a{

    
     text-decoration: none !important;

    color: #555;

    font-size: 14px;
}

.esqueci_senha a:hover{

    color: palevioletred;
}

.login_container
{
    justify-content: center;
    display: flex;
    margin-top: 70px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
     color:#5f6368;
     padding: 30px;
}
.login {
    width: 400px;
    height: auto;
    padding:60px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
    
    
}
.login span
{
    font-family: 'Roboto', sans-serif;
    font-weight: 550;
    color:#5f6368;
    font-size: 18px;
}
.login input
{
      width: 100%;
    height: 40px;
    margin-bottom: 8px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
    transition: border 0.2s, box-shadow 0.2s;
    margin-top: 15px;
}

.login input:focus
{ outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74,144,226,0.2);
}
.btnacessarlogin
{
     flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 8px;
      background-color: #373636;
border: 1px solid rgba(0,0,0,0.2);
      padding: 12px;
      border-radius: 10px;
      font-weight: bold;
      color: white;
      cursor: pointer;
       font-family: 'Roboto', sans-serif;
   font-weight: 550;

      
      justify-content: center;
      align-items: center;
      gap: 6px;
      padding: 10px 18px;
      font-size: 15px;
      font-weight: 500;
      border-radius: 6px; 
      width: 100%;
          margin-top: 15px;
}

.btnacessarlogin:focus
{
     outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74,144,226,0.2);
}
.btnacadastrarlogin
{
    flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 8px;
      background-color: #ffffff;
      border: 1px solid rgba(0,0,0,0.2);
      padding: 12px;
      border-radius: 10px;
      font-weight: bold;
      color: rgb(0, 0, 0);
      cursor: pointer;

             font-family: 'Roboto', sans-serif;
   font-weight: 550;

      
      justify-content: center;
      align-items: center;
      gap: 6px;
      padding: 10px 18px;
      font-size: 15px;
      font-weight: 500;
      border-radius: 6px; 
      width: 100%;
          margin-top: 15px;

}
.btnacadastrarlogin
{

    
     outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74,144,226,0.2);
}

/*FIM*/









/*PAGINA DE PAGAMENTO PIX COMECO*/
.box {
    text-align: center;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.container_confirma {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* espaço entre imagem e texto */
    margin-top: 15px;
       background-color: #E2F4E6;
        border-radius: 11px;
        padding: 10px;
}
.container_pix
{
 text-align: center;
     
}
.container_pix img
{
 width: 100px;
 height: 100px;
     
}

.container_confirma span {
   color:#00CB7A;
   font-weight: 600;
   font-size: 25px;
}


.img_confirma {
    width: 40px; /* ajuste o tamanho que quiser */
    height: auto;
}




.container_corpo
{

   
   margin-top: 50px;
   justify-content: center;
   justify-items: center;

}


.container_principal
{
    
    width: 1000px;
    display: flex;
}
.header_page
{
      background-color: #02be0e;
      justify-content:space-around;
      display:flex;
      
      text-align:center;
      padding: 10px;
}
.header_img
{

    width: 80px;
    height: 60px;
}


.texto{
        box-sizing: border-box; /* Inclui padding e border no cálculo do tamanho total do elemento */
    -webkit-font-smoothing: antialiased; /* Suaviza a renderização de fontes no WebKit (Chrome, Safari) */
    font-family: sans-serif; /* Define uma fonte sem serifa como padrão */
    color: rgba(0, 0, 0, .9); /* Cor do texto: preto com 90% de opacidade */
  
    font-size: 30px; /* Tamanho da fonte */
    line-height: 40px; 
}



.texto_principal {
    width: 400px;
    margin-right: 30px;
      font-weight: initial; 
      font-size: 20px;
}
/*--------------------------------------------------------------*/
.input_cpf
{
    width:100%;
    border:1px solid #bebebe;
    border-radius:5px;
    outline:none;
    height:50px;
    padding:10px;
}
.input_cpf:focus {
    outline: none;
     border:2px solid #3483FA;
}
.input_senha
{

 width:100%;
    border:1px solid #bebebe;
    border-radius:5px;
    outline:none;
    height:50px;
    padding:10px;

}
.input_senha:focus {
    outline: none;
    
}


.container_login {
    border: solid 1px #d8d8d8;
    font-weight: 400;
    border-radius: 5px;
    font-size: 16px;
    font-family: Proxima Nova,-apple-system,Roboto,Arial,sans-serif;
    box-sizing: border-box;
    width:500px;
    padding: 30px;
}
  .input-container_senha {
             border: solid 1px #d8d8d8;
    font-weight: 400;
    border-radius: 5px;
    font-size: 16px;
    font-family: Proxima Nova,-apple-system,Roboto,Arial,sans-serif;
    box-sizing: border-box;
    width:500px;
    padding: 30px;
        }


.footer_container {
    background-color: #F5F5F5;
    width: 100%;
    height: 70px;
    padding: 30px;
    font-size: 13px;
    text-align: center;
    position: absolute;
    bottom: 0;
    justify-content: space-between;
    display: flex;
}

.texto_Copyright
{
  font-family: Proxima Nova,-apple-system,Roboto,Arial,sans-serif;
    color: rgba(0,0,0,.55);
    font-size: 12px;
}




.footer_login
{
    width: 300px;
    display: flex;
    margin-top: 25px;
}
.btn_continuar {
    width: 100%;
    border: none;
    border-radius: 5px;
    color: white;
    font-weight: 500;
    outline: none;
    height: 50px;
    font-size: 18px;
    padding: 10px;
    cursor: pointer;
    background-color: #3483FA;
}
.btn_continuar:focus {
    outline:none;
}
.btn_criar {
    width: 100%;
    border: none;
    border-radius: 5px;
    color: #1082be;
    font-weight: 500;
    font-size: 18px;
    outline: none;
    height: 50px;
    padding: 10px;
    background-color: white;
    margin-left: 10px;
}
.btn_criar:hover {

border: solid 2px #5fcfff;
color: #5fcfff;
}

.text_acesse_conta {

    
    text-align: left;
    padding: 3px;
       font-family: Proxima Nova,-apple-system,Roboto,Arial,sans-serif;
    color: rgba(0,0,0,.9);
    font-size: 14px;
    font-weight: 400;
}
.texto_senha {

 text-align: left;
    padding: 3px;
       font-family: Proxima Nova,-apple-system,Roboto,Arial,sans-serif;
    color: rgba(0,0,0,.9);
    font-size: 14px;
    font-weight: 400;
}
.texto_suaconta {
    margin-top: 10px;
    
    margin-left: 15px;
    font-size: 15px;
    color: gray;
}

.texto_email {
    margin-left: 15px;
    font-size: 15px;
    color: black;
    margin-bottom: 10px;
}


 


.footer {
       
       margin-bottom: auto !important;
}

.footer-container {
       background: linear-gradient(to left, #3d4977, #171D33);
    color: #fff;
    width: 100%;
   
}
.footer-container_filho {
    background: linear-gradient(to left, #3d4977, #171D33);
    color: #fff;
    width: 1200px;
    justify-content: space-between;
    display: flex;
    margin: auto !important;
    padding: 40px;
    
    
}
.sub_footer_container
{
   background: linear-gradient(to left, #3d4977, #171D33);
   height:30px;
   padding: 5px;
   color:white;
   text-align:center;
   align-items: center;
   

}




.footer__title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.footer__link {
    color: #fff;
}

    .footer__link:focus, .footer__link:hover {
        color: #fff;
    }

.footer__list-unstyled {
    list-style: none;
    padding-left: 0;
}

.footer__list-unstyled--item {
    padding-bottom: 8px;
}

.footer__list-unstyled--link {
    color: #fff;
}

    .footer__list-unstyled--link:focus, .footer__list-unstyled--link:hover {
        color: #fff;
    }





.btn_entrar {
     width: 100%;
    border: none;
    border-radius: 5px;
    color: white;
    font-weight: 500;
    outline: none;
    height: 50px;
    font-size: 18px;
    padding: 10px;
    cursor: pointer;
    background-color: #3483FA;
    
}
 .btn_entrar:focus {
        outline: none;
    }
 .div_entrar
 {


     margin:10px;
 }





.texto_qr
{

    color: #bebebe;
    font-size: 15px;
}


.texto_qr
{
    width:400px;
    font-weight:100;
    

}
.video_qr {
    width: 150px;
    height: 300px;
    padding: 4px;
    border-radius: 20px;
    background-color: black;
}
.video
{
    width:220px;
    

}

.alerta_usuario {
    font-size: 10px;
    color: #595959;
    margin:10px;
}
.retorno_geral
{
    text-align:center;
    color:red;
    font-size:10px;

}


.mensagem
{
     font-size: 11px;
     color: grey;
     margin-top: 5px;

}


.mensagem_spinner
{
    justify-items: center;
    justify-content: center;
    text-align: center;
    font-size: 10px;
}
.mensagem_spinner_container
{
 justify-items: center;
    justify-content: center;
    text-align: center;

}
.mensaagem_senha
{
 justify-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;


}
/*PAGINA DE GERAR QRCODE*/
.container_qrcode {
    display: flex;
    justify-items: center;
    justify-content: center;
    flex-direction:  row ;
   
     

}


.container_texto
{

   width: 350px;

   margin-right: 100px;
    

}
.container_img_qrcode {
    border: solid 1px #b3b0b0;
    height: auto;
    width: 600px;
    z-index: 0;
    border-radius: 11px;
    justify-content: center;
    text-align: center;
    justify-items: center;
    padding: 20px;
      background-color: white;
    
}
.qrcode
{

    text-align: center;
    justify-content: center;
    justify-items: center;
    padding: 20px;
  
}
.qrcode {
  display: flex;
  justify-content: center;
  align-items: center;
}

#qrcodediv {
  display: flex;
  justify-content: center;
  align-items: center;
}

.qr_mercado_pago {
  left: -500;
  position: absolute;
 
}
.textos_orden
{

    order: 3;
}
.texto_coluna1
{

    text-align: center;
    justify-items: center;
    justify-content: center;
    padding: 10px;
    color:#58C22E;
}
.texto_coluna2
{

text-align: center;
    justify-items: center;
    justify-content: center;
    padding: 5px;
    width: 400px;

}
.input_qrcode
{
   width: 100%;
   height: 40px;
   border-radius: 4px;
   border: solid 1px #b3b0b0 ;

}
.div_qrcode
{
   width: 100%;
   

}


.btn_copia_qrcode
{
   border-radius: 5px;
   width: 100%;
   height: 40px;
   border: none;
   background-color: #58C22E;
   color: white;
   margin: 5px;
   cursor: pointer;

}
.div_copia_qrcode
{
   
   width: 100%;
   

}
/*PAGINA DE PAGAMENTO PIX FIM*/








/*slidershow comeco*/
.slideshow-container {
    position: relative;
    width: 100%;
    margin: auto;
    height: 350px;
    overflow: hidden;

}
.mySlides {
    display: none;
}

.img_slidershow {
    width: 100%;
    height: 350px;
    
}

.prev, .next {
    position: absolute;
    top: 50%;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    user-select: none;
    transform: translate(0, -50%);
    
    
}


.prev {
    left: 10px;
}

.next {
    right: 10px;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
/*slidershow_fim*/

/*tabela principal*/
.tabela_produtos_container
{  width: 100%;
    justify-content: center;
    justify-items: center;
}
.tabela_produtos_container_filho
{

    /*
    display: grid;
    grid-template-columns: repeat(auto-fill,  minmax(max(200px,  200px / 5),  1fr));
    grid-auto-flow: dense;
    width: 1000px;
    border: inherit;
    border-width: 3px;
    font-family: "Poppins",sans-serif;
    */
display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;

}
.produtos{
    border-bottom: solid;
    border-width: 1px;
    border-radius: 9px;
    border-color: lavender;
    border-collapse: collapse;
    margin: 5px;
    padding: 20px;
    background-color: white;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.produtos:hover 
{
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.div_img_produtos
{
width: 100%;
box-sizing: border-box;
     }
.img_produtos
{
    width: 100%;
    height: 200px;
    box-sizing: border-box;

}
/*tabela principal de produtos*/
.product-card {
      background: #fff;
      width: 210px;
      border-radius: 10px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
      overflow: hidden;
      transition: transform 0.2s;
    }

    .product-card:hover {
      transform: translateY(-4px);
    }

    .product-card img {
      width: 100%;
      height: 220px;
      object-fit: cover;
    }

    .product-info {
      padding: 10px 12px 15px;
    }

    .tag {
      background-color: #ff7733;
      color: white;
      font-size: 12px;
      font-weight: bold;
      padding: 3px 6px;
      border-radius: 4px;
      display: inline-block;
      margin-bottom: 5px;
    }

    .title {
      font-size: 14px;
      color: #333;
      margin-bottom: 6px;
      height: 36px;
      overflow: hidden;
    }

    .old-price {
      text-decoration: line-through;
      color: #999;
      font-size: 13px;
    }

    .price {
      color: #00a650;
      font-size: 18px;
      font-weight: bold;
    }

    .pix {
      font-size: 13px;
      color: #555;
      margin-bottom: 6px;
    }









.div_pesquisa_mobile
{
    
    
    background-color: white;
    border: 1px solid #b4b4b4;
    margin-top: 5px;
    width: 100%;
    height: 45px;
    display:none;
    border-radius: 5px;
    

}




.div_pesquisa_desktop
{
    
    
    background-color: white;
    border: 1px solid #b4b4b4;
    margin-top: 5px;
    width: 100%;
    height: 45px;
    display:flex;
    border-radius: 5px;
    

}
.input_pesquisa {
    background-color: transparent;
    border: 0 none;
    width: 100%;
    height: 40px;
    border-radius: 11px;
    text-align: left;
    display: flex;
    padding: 20px;
}

.input_pesquisa::placeholder {
    margin-top: 10px;
}
    .input_pesquisa:focus {
        outline: none;
    }

    .btn_pesquisa {
        background-color: transparent;
        font-size: 20px;
        text-align: center;
        cursor: pointer;
        border: 1px solid transparent;
        border-radius: 5px;
        width: 50px;
        height: 45px;
        text-align: center;
        align-content: center;
        justify-content: center;
    }
       
    








        


.div_carrinho {
    
    border: none;
    background: none;
    width: 100px;
    height: 100px;
    display:inline-flex;
    padding: 10px;
    margin-top: 5px;
    
    background-color:inherit;
    cursor: pointer;
    

    
}
.scrollable {
    position: relative;
    display: none;
    align-items: center;
    overflow: hidden;
    padding: 20px 0;
      
       justify-content: center;
    justify-items: center;
}


.img_carrinho
{
    box-sizing: border-box;
    width: 40px;
    height: 40px;
}
.contador {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    background-color: white;
    border: none;
    border-radius: 50%;
    margin-left: -30px;
    margin-top: -10px;
    cursor: pointer;
}

/*Header (Cabeçalho)*/
 .header_container {
        width: 100%;
          
            background: linear-gradient(to left, #3d4977, #171D33);
        justify-content: center;
        justify-items: center;
    }
.header_container_filho{
    height: 70px;
     background-color: transparent;
    display: flex;
    width: 900px;
    
    
}
.header_logo {
    width: 90px;
    height: 70px;
    padding: 5px;
}
.header_menu {
    display: flex;
    color: white;
    background-color: #4CAF50;
    width: auto;
}
/*Header (Cabeçalho) FIM*/
/*menu e submenu*/
/* Estilos principais para o menu */

  /* Estilos gerais para o menu */
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: black;
}

/* Menu Desktop */
.nav-desktop {
    display: block;
}

.menu_desktop {
    background-color: transparent;
    display: flex;
    justify-content: space-around;
    padding: 10px;
}

.menu_desktop li {
    position: relative;
}

.menu_desktop a {
    display: block;
    padding: 10px 20px;
    color: white;
    background-color: transparent;
}

.menu_desktop a:hover {
  color: black;
}

.submenu_desktop {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #333;
    min-width: 160px;
    z-index: 2000;
}

.menu_desktop li:hover .submenu_desktop {
    display: block;
}

.submenu_desktop li {
    display: block;
}


/* Estilos para o menu mobile */
.mobile-menu {
    display: none;
    background-color: #333;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    z-index: 2000;
    width: 250px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.mobile-menu ul {
    padding: 20px;
}

.mobile-menu .nav-button a {
    color: white;
    display: block;
    padding: 10px;
    text-decoration: none;
}

.mobile-menu .nav-button a:hover {
    background-color: #575757;
}

/* Mostrar o menu quando o toggle for ativado */
.mobile-menu.open {
    transform: translateX(0);
}

/* Estilos para o botão do menu */
.menu-toggle {
    display: none;
    background-color: transparent;
    font-size: 30px;
    color: white;
    padding: 15px;
    cursor: pointer;
}
/*FIM*/

.footer-social {
    text-align: center;
    margin-top: 20px;
}

.footer__title {
    margin-bottom: 15px;
    font-size: 1.5rem;
    color: #333;
}

.social-list {
    list-style: none;
    padding-left: 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}



.social-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #dc3545; /* vermelho */
    transition: transform 0.3s, background-color 0.3s;
}

.social-list li a:hover {
    transform: scale(1.1);
    background-color: #b02a37;
}

.social-list li a svg {
    width: 24px;
    height: 24px;
    fill: white;
}




.footer {
    margin-top: 60px
}



.footer-container {
      background-color: #02be0e;
    color: #fff;
    
    width: 100%;
}
.footer-container_filho {
    background-color: #02be0e;
    color: #fff;
    width: 1200px;
    justify-content: space-between;
    display: flex;
    margin: auto !important;
    padding: 40px;
    
    
}
.sub_footer_container
{
   background-color: #04a50e;
   height:auto;
   padding: 10px;
   color:white;
   text-align:center;
   align-items: center;
}




.footer__title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.footer__link {
    color: #fff;
}

    .footer__link:focus, .footer__link:hover {
        color: #fff;
    }

.footer__list-unstyled {
    list-style: none;
    padding-left: 0;
}

.footer__list-unstyled--item {
    padding-bottom: 8px;
}

.footer__list-unstyled--link {
    color: #fff;
}

    .footer__list-unstyled--link:focus, .footer__list-unstyled--link:hover {
        color: #fff;
    }


    


/*CARROSSEL DE PRODUTOS COMECO*/
.tabeladeclassescontainer {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.tabeladeclasses {
    display: flex;
    transition: transform 0.5s ease;
}

.tabeladeclassescarroseu {
    display: flex;
}

.dropdown {
    margin: 0 10px;
    position: relative;
    text-align: center;
}

.divimagensdaclasse img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
}

.mainmenubtn {
    display: block;
    margin-top: 10px;
}

.dropdown-child {
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    width: 20px;
    z-index: 1;
}

.dropdown:hover .dropdown-child {
    display: block;
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 2;
}

.carousel-button.previous {
    left: 10px;
}

.carousel-button.next {
    right: 10px;
}
/*FIM CARROSSEL*/

.modal_carrinho_total
{
  display: flex;
  justify-content: space-between;

}

.btn_inciar_compra1
{

    width: 100%;
    height: 50px;
    border-radius: 5px;
    padding: 5px;
    border:none;
    font-size: 18px;
    background-color: #4CAF50;
    font-weight: 600;
    margin-top: 10px;
    color: white;
    box-sizing: border-box;
    cursor: pointer;
}

/*=========================PAGINA OPCOES DE PAGAMENTO*/
.imgcard
{
   width: 200px;
   height: 70px;

}
.imgpix
{

 width: 50px;
   height: 50px;

}






@media (max-width: 768px) {
.slideshow-container {
        position: relative;
        width: 100%;
        margin: auto;
        height: 200px;
        overflow: hidden;
    
    }
.tabela_produtos_container
{  width: 100%;
    justify-content: center;
    justify-items: center;
}




  .tabela_produtos_container_filho {
    justify-content: space-around;
    gap: 10px;
    padding: 5px;
  }

  .tabela_produtos_container_filho .product-card {
    width: 45%;
  }

.header_container {
    width: 100%;
     background: linear-gradient(to left, #3d4977, #171D33);
    justify-content: center;
    justify-items: center;
}
.header_container_filho{
height: 70px;
background-color: transparent;
display: flex;
width: 100%;
justify-content: space-between;


}
.header_logo {
width: 90px;
height: 70px;
padding: 5px;
}
.header_menu {
display: flex;
color: white;
 background: linear-gradient(to left, #3d4977, #171D33);
width: auto;
}
.input_pesquisa {
    background-color: transparent;
    border: 0 none;
    
    width: 100%;
    height: 30px;
    
    border-radius: 11px;
    padding: 18px;
}



.div_pesquisa_mobile
{
    background-color: white;
    
    margin-top: 5px;
    width: 100%;
    height: 40px;
    display:flex;
    border-radius: 60px;
    text-align: center;
    justify-content: center;
    justify-content: center;
    

}
.container_div_pesquisa_mobile
{
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    

}


.div_pesquisa_desktop
{
    
    
    background-color: white;
    border: 1px solid #b4b4b4;
    margin-top: 5px;
    width: 100%;
    height: 45px;
    display:none;
    border-radius: 5px;
    
    

}
   .btn_pesquisa {
        background-color: transparent;
        font-size: 20px;
        text-align: center;
        cursor: pointer;
        border: 1px solid transparent;
        border-radius: 5px;
        width: 40px;
        height: 40px;
        text-align: center;
        align-content: center;
        justify-content: center;
        padding: 10px;
    }
      




.img_produtos
{
    width: 100%;
    height: 160px;
    box-sizing: border-box;

}
.footer-container_filho {
    background-color: transparent;
    color: #fff;
    width: 100%;
    justify-content: space-between;
    display: block;
    box-sizing: border-box;
    padding: 10px;
}
.footer_textos
{
   box-sizing: border-box;
  max-width: 100%;
}
/*PAGINA DE CADASTRO PARA CELULAR COMECO*/

    .containercadastro {
        margin-top: 50px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        margin-left: 5px;
        margin-right: 5px;
        width: auto;
        padding: 20px;
        height: auto;
        background-color: white;
        border-radius: 4px;
        font-family: Arial, sans-serif;
    font-weight: 500;
    }
   

    .input_filho {
    width: 100%;
    height: 32px;
    margin-bottom: 8px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
    transition: border 0.2s, box-shadow 0.2s;
}
.input_filho:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74,144,226,0.2);
}



.dob-container {
    margin: 5px;
    width: auto;
    text-align: left;
    padding: 5px;
    
}
.dob-title {
    

     font-family: 'Roboto', sans-serif;
   font-weight: 550;
color:#5f6368;
font-size: 18px;
}
.dob-selects {
  display: block;
    height: auto;
    gap: 5px;
    width: 100%;
}
/*FIM/









/*PAGIAN CARRINHO PARA CELULAR COMECO*/
.carrinho-container {
  max-width: 1100px;
  margin: 30px auto;
  display: block;
  gap: 20px;
}
/*PAGINA CARRINHO FIM*/


/*PAGINA DE PAGAMENTO PIX COMECO*/
.container_img_qrcode {
    border: solid 1px #b3b0b0;
    height: auto;
    width: 100%;
    z-index: 0;
    border-radius: 11px;
    justify-content: center;
    text-align: center;
    justify-items: center;
    padding: 0px;
    background-color: white;
}
/*PAGINA DE PAGAMENTO PIX FIM*/
.formRecuperar_container
{
   justify-self: center;
    justify-items: center;
   justify-content: center;
   display: flex;
   margin-top: 70px;

}

.formRecuperar
{
   width: 100%;
   height: auto;
   background-color: white;
   border-radius: 6px;
   padding: 20px;
   box-sizing: border-box;

}

.img_busca
{

    width: 20px;
    height: 20px;
}

/*MENU PARA MOBILE*/
.nav-desktop {
    display: none; /* Oculta o menu de navegação principal em dispositivos móveis */
}

.menu-toggle {
    display: block; /* Exibe o botão de menu hamburguer */
}

.mobile-menu {
    display: none;
}

.mobile-menu.open {
    display: block; /* Exibe o menu lateral quando o toggle for ativado */
}
}