*{
 padding: 0;
 margin: 0;
 font-family: Arial, Helvetica, sans-serif;
 scroll-behavior: smooth;
}

body{
 background: #f3f3f3;
 overflow-x: hidden;
}

.vista {
  padding: 20px;
}
.video-vsl{
 width: 100vw;
 margin: 0px auto 50px;
 display: flex;
 height: auto;
 justify-content: center;
}

.video-vsl video{
 width: 80vw;
 height: auto;
 
}

.header{
 width:100vw;
 height: 600px; 
 margin-bottom: 150px;
 background: linear-gradient(to right, rgba(0,0,0,1) 19%,rgba(0,0,0,1) 19%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 21%,rgba(41,137,216,1) 86%,rgba(41,137,216,1) 97%,rgba(41,137,216,1) 100%);
 display: flex;  
 color: #f3f3f3;
}

.header-container img,h1,h2,p,button{
 margin-top: 2rem;
}
.header-container p{
 font-size: 17px;
 width: 400px;
}

.header-container{
 margin-left: 11rem;
 width: 50%;
 z-index: 99;
}

 .button-preco{
 padding: 0 1.5rem 0;
 height: 50px;
 border-radius: 0.5rem;
 border: 0;
 transition: transform 0.3s ease-in-out;
 background: #0087c1;
 font-size: 18px;
}

.button-preco:hover{
 cursor: pointer;
 transform: scale(1.2);
}

.button-preco a{
 text-decoration: none;
 color: #fff;
}

.header 
.image-arvore{
 z-index: 99;
 position: relative;
 right: 100px;
}

.header .wave{
 position: absolute;
 top: 302px;
}

.main-container 
.section-explicacao-do-produto{
 display: flex;
 margin-bottom: 10rem;
}

.main-container 
.section-explicacao-do-produto 
.texto-produto{
 width: 50%;
 margin-left: 9rem;
}

.main-container
.section-explicacao-do-produto 
.texto-produto h1{
 font-size: 32px;
}

.section-explicacao-do-produto 
.texto-produto p{
 line-height: 1.5rem;
 text-align:justify;
}

.section-explicacao-do-produto 
.image-produto{
 width: 50%;
}

.section-explicacao-do-produto 
.image-produto img{
 width: 600px;
 margin-top: 5rem;
}

.section-prova-social{
 margin-bottom:5rem;
}

.section-prova-social .button-preco{
 margin-top: -30px;
}

.section-prova-social img,video{
 width: 100%;
 border-radius: 12px;
 height: 470px;
 object-fit: contain;
}

.section-recomendacao-do-produto{
 height: 500px;
 position: relative;
 top: -50px;
 margin-bottom: 13rem;
}

.section-recomendacao-do-produto 
.frase-recomendacao{
 font-size: 22px;
}
.section-recomendacao-do-produto{
 margin-top: -50px;
}
.section-recomendacao-do-produto 
.icons-section {
 display: flex;
 flex-direction: row;
 justify-content: center;
 gap: 2.5rem;
 margin-top: 5rem;
}
.icons-section{
 text-align: center;
}
.icons-section span{
 height: 110px;
 width: 150px;
 background: #0087c1;
 padding: 0.5rem 2rem;
 border: 15px groove #0087c1;
 color: #fff;
 font-weight: 500;
 border-radius: 25px;
}

.metodos{
 width: 80vw;
 display: flex;
 margin:auto;
 border: 1px solid #000; 
 border-radius: 24px;
 margin-bottom: 5rem;
}

.metodos ul{
 list-style: none;
}

.metodos 
.metodo-tradicional{
 width: 50%;
 border-radius: 12px;
}
.text-metodo{
 height: 400px;
 border: 1px solid #000;
 border-bottom: 0px;
 border-left: 0px;
 padding: 1.5rem;
 border-top-left-radius: 12px;
 border-top-right-radius: 12px;
}
.metodos  p{
 line-height: 1.5rem;
 margin-bottom: 2.5rem;
 text-align: justify;
 font-size: 18px;
}
.metodos  h1{
 padding-left: 1.5rem;
 text-align: center;
 font-size: 32px;
}
.metodos  ul li{
 margin-top: 1rem;
 font-size: 18px;
 font-weight: bold;
}

.metodos 
.metodo-vitamagro{
 width: 50%;
}

.metodos 
.metodo-vitamagro h1{
 padding-left: 1.5rem;
 font-size: 32px;
 text-align: center;
 color: #03b4ea;
}

.metodos 
.metodo-vitamagro 
.text-metodo{
 border-top: 1px solid;
 border-top-left-radius: 0px;
 border-right: 0px;
}

.section-depoimentos h1{
 font-size: 32px;
 margin-bottom: 2em;
}
.section-depoimentos,
.section-prova-social{
 margin: 0 auto 10rem;
 height: 100vh;
 width: 100%;
 max-width: 1000px;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
}

.section-depoimentos 
.swiper-wrapper img{ 
 box-shadow: 0 1px 2px #0003;
 width: 50%;
 height: 400px;
 border-radius:12px ;
 object-fit: cover;
}


.swiper{
 height: 500px;
}

.swiper-slide{
 text-align: center;
 display: flex;
 justify-content: center;
 align-items: center;
}


.section-compostos{
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 margin: -80px auto 0 ;
 width: 50%;
 margin-bottom: 15rem;
}

.section-compostos .ingredientes{
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 gap: 20px;
}

.section-compostos 
.frase-composto{
 width: 50vw;
 font-size: 1.4rem;
}

.ingredientes .composto{
 margin-top: 5rem;
 margin-bottom: 5rem;
 border-radius: 20%;
 padding: 2.5rem;
 text-align: center;
 background-color: #fafafa;
 width: 260px;
 height: 420px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 position: relative;
 margin-left: 2rem;
 box-shadow: 3px 0px 5px #00000031;
}

.composto p{
 position: relative;
 top: 80px;
 width: 100%;
 line-height: 2rem;
 font-size: 20px;
}

.ingredientes .composto h3{
 position: absolute;
 margin-top: -50px;
 font-weight: bolder;
 font-size: 23px;
 color: #03b4ea;
}

.ingredientes 
.description-composto{
 top: 88px;
}
.ingredientes img{
 width: 150px; 
 height: 150px;
 border: 10px solid #03b4ea;
 position: absolute;
 top: 20px;
 outline:3px solid #ffffff;
 border-radius: 50%;
 outline-offset: -7px;
 text-align: center;
 object-fit: cover;
}


.composto-secreto{
 width:60vw;
 margin-left: 20px;
 font-size: 1.5rem;
 text-align: justify;
}

.informacoes-extras{
 margin-bottom: 15rem;
 width: 100%;
 height: 400px;
 background: linear-gradient(to right, rgba(0,0,0,1) 19%,rgba(0,0,0,1) 19%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 21%,rgba(41,137,216,1) 86%,rgba(41,137,216,1) 97%,rgba(41,137,216,1) 100%);
 color: #fff;
 z-index: -1;
 display: flex;
 justify-content:center ;
 align-items: center;
 position: relative;
}

.image-informacoes-extras{
 position: absolute;
}
.image-info-1{
 position: relative;
 z-index: 99;
 height: 500px;
 z-index: 99;
}
.image-info-2{
 top: 5px;
 left: 41%;
 z-index: 0;
 height: 400px;
 transform: rotate(-15deg);
}
.image-info-3{
 height: 400px;
 left: 57%;
 top: 10px;
 transform: rotate(15deg);
}
.informacoes-extras .header-informacoes{
 position: relative;
 top:-10px;
 left: 150px;
}

.informacoes-extras .header-informacoes p{
 font-size: 20px;
 position: relative;
 left: -100px;
 width: 500px;
 line-height: 1.5rem;
}
.informacoes-extras .header-informacoes h1{
 font-size: 36px;
 width: 600px;
 position: relative;
 top: -23px;
 left: -150px;
}

.section-produto-final {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100%;
 gap: 40px;
 margin-bottom: 15rem;
}

.section-produto-final 
.preco-produto{
 background-color: #ffffff;
 text-align: center;
 padding: 1.5rem;
 border: 1px solid #dbdcd7;
 border-radius: 12px;
 width: 190px;
 position: relative;
 background: linear-gradient(135deg, rgba(219,220,215,1) 1%,rgba(245,245,245,1) 51%,rgba(219,220,215,1) 100%)

}

.section-produto-final 
.preco-produto 
.image-preco-produto-2{
 position: absolute;
 top: 122px;
 left: 25px;
 z-index: 1;
}

.section-produto-final 
.preco-produto 
.image-preco-produto-3{
 position: absolute;
 top: 136px;
 height: 170px;
}
.section-produto-final 
.preco-produto 
.produto-preco-2{
 left: -50px;
}
.section-produto-final 
.preco-produto 
.produto-preco-3{
 left: 50px;
}
.section-produto-final 
.preco-produto 
.produto-2{
 position: relative;
 top: 20px;
 left: -85px;
}

.section-produto-final 
.preco-produto
.produto-3{ 
  position: relative;
  top: 10px;
  left: -45px;
  z-index: 1;
}

.section-produto-final 
.preco-produto 
.produto-1{
 position: relative;
 left: -45px;
}

.selo-preco{
 background-color: #58c9df;
 color: #ffffff;
 font-size: 10px;
 position: absolute;
 top: 20%;
 left: 65%;
 z-index: 99;

 width: 70px;
 height: 70px;
 border-radius: 50%;
 border: 1px solid transparent;
 outline:1px solid #03b4ea;
 outline-offset: 2px;
 transform: rotate(30deg);
}
.selo-preco p{
 margin-top: 25px;
 font-size: 12px;
}

.selo-preco-2 div, 
.selo-preco-3 div{
 font-size: 8px;
}
.selo-preco-3 {
 z-index: 99;
}

.preco-produto h3{
 background-color: #2270ae;
 padding: 0.25rem;
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 border-radius: 8px;
 color: #fff;
}

.section-produto-final 
.frase-tratamento{
 position: relative;
 top: -20px;
 width: 100%;
 font-size: 14.5px;
}

.preco-produto .preco{
 margin-top: -5px;
 margin-bottom:-30px;
 color: #66d426;
 font-weight: bolder;
}

.preco-produto a{
 padding: 1rem;
 font-size: 16px;
 color: #fff;
 background-color: #05a90c;
 border-radius:4px ;
 border: 0;
 text-decoration: none;
 font-weight: bold;
 transition: transform .3s ease-in-out ;
 cursor: pointer;
}
.preco-produto a:hover{
 transform: scale(1.2);
}
.section-produto-final img{
 margin-top: 20px;
 height: 200px;
 text-align: center;
}

.informacao-de-garantia {
 background: linear-gradient(to right, rgba(0,0,0,1) 19%,rgba(0,0,0,1) 19%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 21%,rgba(41,137,216,1) 86%,rgba(41,137,216,1) 97%,rgba(41,137,216,1) 100%);
 width: 100%;
 height: 350px;
 display: flex;
 color: #fff;
 margin-bottom: 15rem;
}

.informacao-de-garantia > div{
 position: relative;
 left: 150px;
}

.informacao-de-garantia h1{
 font-size: 36px;   
 text-align: center; 
}
.informacao-de-garantia p {
 width: 650px;
 text-align: center;
 font-size: 28px;
 line-height: 2.5rem;
}
.informacao-de-garantia img{
 background-color: transparent;
 width: 300px;
 height: 300px;
 position: relative;
 left: 150px;
 top: 30px;
}

.btn-compra{
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
 top:-150px;
}

.section-duvidas{
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 width: 100%;
 position: relative;
 top: -70px;
}

.section-duvidas h1{
 font-size: 36px;
 margin-bottom: -10px;
}

summary{
 width: 800px;
 color:#fff;
 background-color: #0081ba;
 margin-top: 30px;
 height: 40px;
 font-weight: 600;
 cursor: pointer;
 padding: 1.5rem 0rem 0rem 1.5rem;
}

details div{
 width:800px ;
 padding: 1.5rem 0rem 1.5rem 1.5rem;
 color: #fff;
 background-color: hsl(198, 100%, 36%);
}

.section-duvidas a{
 width: auto;
 height:50px;
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 0.5rem;
text-decoration: none;
 background:#17f105;
 color: #fff;
 border:0;
 cursor: pointer;
 font-weight: 800;
 border-radius: 5px;
 transition: all .3s ease-in-out;
 margin-bottom: 2rem;
 margin-top: 50px;
}

.section-duvidas a:hover{
 transform: scale(1.2);
}

.section-duvidas img{
 width: 40px;
 padding-right: 10px;
}

footer .footer-image-logo{
 width: 200px;
 height: 200px;
 position: relative;
 left: 70px;
}

footer{
 height:280px ;
 display:flex;
 justify-content: space-around;
 align-items: center;
 background: linear-gradient(to right, rgba(0,0,0,1) 19%,rgba(0,0,0,1) 19%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 21%,rgba(41,137,216,1) 86%,rgba(41,137,216,1) 97%,rgba(41,137,216,1) 100%);
 color: #fff;
}

.footer-links{
 display: flex;
 flex-direction: column;
 position: relative;
 left: 100px;
}

.footer-links a{
 text-decoration: none;
 color: #fff;
 margin-top: 10px;
}

.footer-contato{
 position: relative;
 left: 50px;
}

.footer-contato .cel-contato,
.footer-contato .email-contato{
 position: relative;
 top: 0px;
}

.footer-contato .email-contato{
 font-size: 24px; 
 margin-left: 50px;
}

.footer-contato .cel-contato{
 font-size: 32px; 
 margin-left: 60px;
}

.footer-contato h3{
 width: 400px;
 margin: 50px 0px 40px 0px;
 position: relative;
 top: 20px;
 text-align: center;
}


.footer-formas-de-pagamento .bandeira-mastercard, 
.footer-formas-de-pagamento .bandeira-amex ,
.footer-formas-de-pagamento .bandeira-ame,
.footer-formas-de-pagamento .bandeira-cabal,
.footer-formas-de-pagamento .bandeira-boleto{
 position: relative;
}
.footer-formas-de-pagamento .bandeira-mastercard,
.footer-formas-de-pagamento .bandeira-amex{
 top: 10px;
}

.footer-formas-de-pagamento .bandeira-ame{
 top: -13px;
 height: 25px;
}

.footer-formas-de-pagamento .bandeira-cabal{
 top: -13px;
 height: 30px;
}

.footer-formas-de-pagamento .bandeira-boleto{
 top: -11px;
}

.footer-formas-de-pagamento img{
 width: 50px;
 text-align: center;
}
.footer-formas-de-pagamento h3{
 margin-top:-50px;
 margin-bottom: 20px;
}



@media screen  and (max-width:768px)  { 

html{
  overflow-x: hidden; 
}
.header-container img,.header-container  h1, .header-container h2, .header-container p,.header-container button{
 margin-top: 1rem;
 margin-left: -150px;
 z-index: 99;
 position: relative;
 left: 15px;
}

.header-container  h1,h2{
 width: 90vw;
}
.header{
 height: 390px;
 margin-bottom: 25px;
}
.header-container{
 margin-left: 0;
 position: absolute;
 left: 10rem;
}

.header-container p{
 width: 20vw;
 z-index: 99;
}
.header-container p,h1,h2{
 text-align: justify;
 width: 60vw;
 font-size: 13px;
 z-index: 99;
}
.header .image-arvore{
 position: absolute;
 top: 225px;
 left: 58%;
 height: 160px;
}
.header .wave{
 position: relative;
 top:160px;
}
.header .button-preco{
 width: 150px;
 font-size: 10px;
 height: 35px;
}

.main-container{
 width: 100vw;
}

.main-container 
.section-explicacao-do-produto, 
.main-container 
.section-explicacao-do-produto p{
 width: 80vw;
}

.main-container 
.section-explicacao-do-produto 
.texto-produto{
 width: 80vw;
 margin: auto 12%;
 display: flex;
 flex-direction: column;
 justify-content:center ;
 align-items: center;
}

.main-container 
.section-explicacao-do-produto 
.texto-produto h1{
 width: 80vw;
 font-size:22px;
}

.main-container 
.section-explicacao-do-produto{
 margin-bottom: 2rem;
}
.section-explicacao-do-produto 
.image-produto{
 width: 0;
 height: 0;
 position: absolute;
}

.section-explicacao-do-produto 
.image-produto img{
 display: none;
 width: 0;
 height: 0;
}

.section-prova-social{
 height: 80vh;
 position: relative;
 top: 50px;
}

.section-recomendacao-do-produto h1{
 margin: auto;
 width: 80vw;
 font-size: 23px;
}

.section-prova-social img,video{
 width: 70%;
}

.section-prova-social .button-preco{
 margin-top: 1rem;
}

.section-recomendacao-do-produto{
 margin-top: 1rem;
 margin-bottom: 18rem;
}
.section-recomendacao-do-produto div{
 font-size: 13px;
}
.section-recomendacao-do-produto .icons-section{
 width: 20px;
 height: 20px;
 left: 73%;
 flex-wrap: wrap;
}
.section-recomendacao-do-produto .one{
 position: relative;
 left: 22%;
}
.section-recomendacao-do-produto .two{
 position: relative;
 top: -100px; 
}

.icons-section span{
 width: 100px;
}
.icons-section span div{
 font-size: 10px;
 width: 70px;
 text-align: center;
}
.icons-section span img{
 height: 50px;
 gap: 30px;
 width: 50px;
 margin-top: 15px;
 margin-bottom: 10px;
}

.section-recomendacao-do-produto 
.frase-recomendacao{
 position: relative;
 top: 380px;
 width: 90vw;
 left: 5%;
 font-size: 20px;
}

.metodos h1{
 font-size: 27px;
 position: relative;
 right: 15%;
 text-align: center;
}

.metodos .metodo-tradicional h1{
 width: 300px;
 left: 5px;
}

.text-metodo{
 border: 0;
 width: 100%;
}

.metodos{
 width: 100vw;
 border: 0 ;
 position: relative;
 margin-bottom: 30rem;
}

.metodos .text-metodo{
 width: 80vw;
 border: 0;
}

.metodos .metodo-tradicional{
 width:90vw;
}
.metodos .metodo-vitamagro h1{
 margin-top: 70px;
 width: 190px;
}
.metodos .metodo-vitamagro{
 position: absolute;
 top: 400px;
 border: 0;
}

.metodos p{
 width: 90vw;
}

.metodos ul{
 width: 80vw;
 margin-bottom: 40%;
}

.metodo-vitamagro {
 padding: 1.5rem;
}

.metodo-vitamagro .text-metodo{
 width: 0;
 height: 0;
 padding: 0;
}

.section-depoimentos{
 margin-bottom: 0rem;
}

.section-depoimentos .button-preco{
 margin-top: -3rem;
 margin-bottom: 10rem;
}
.section-depoimentos h1{
 text-align: center;
 margin: 5rem 0;
 width: 100vw;
 font-size: 28px;
}

.section-depoimentos .swiper{
 top: -80px;
}

.section-compostos{
 margin-top:-50px ;
 margin-bottom: 10rem;
}

.ingredientes{
 flex-wrap: wrap;
 position: relative;
 margin-top: 30px;
 right: 5%;
}

.ingredientes img{
 width: 100px;
 height: 100px;
}
.section-compostos h1{
 width: 90vw;
}

.ingredientes .composto{
 margin-top:-30px;
 height: 250px;
 width: 190px;
} 

.ingredientes 
.composto h3{
 top: 60%;
 font-size: 18px;
}

.ingredientes 
.composto 
.description-composto{
 top: 25%;
}
.ingredientes 
.composto 
.title-guarana{
 top: 62%;
}

.composto p{
 font-size:14px;
 line-height: 1.5rem;
 width: 100%;
 margin-top: 10px;
}
.section-compostos 
.frase-composto{
 width: 85vw;
 font-size: 14px;
 margin-bottom: 50px;
}
.section-compostos 
.composto-secreto{
 width: 85vw;
 font-size: 19px;
 margin-left: 0;
}

.informacoes-extras{
 height: 250px;
 margin-bottom: 5rem;
}

.informacoes-extras img{
 height: 100px;
 width: 150px;
}

.informacoes-extras 
.image-info-2, .image-info-3{
  position: absolute;
}

.image-info-1{
 position: relative;
 top:20px;
 left: 10px;
}
.image-info-2{
 top: 38%;
 left: 57.8%;
 transform: rotate(-10deg);
}
.image-info-3{
 top: 95px;
 left: 70%;
 transform: rotate(10deg);
}

.informacoes-extras{
 margin-bottom: 5rem;
}

.informacoes-extras .header-informacoes{
 left: 20%;
}

.informacoes-extras .header-informacoes h1{
 font-size: 12px;
 width: 99%;
 position: relative;
 text-align: center;
 top: -20px;
 left: -35%;
}

.informacoes-extras .header-informacoes p{
 font-size:11px ;
 width: 50vw;
 margin: 0;
 position: relative;
 left: -25%;
 line-height: 1rem;
}

.section-produto-final{
 flex-wrap: wrap;
 margin-bottom: 10rem;
}

.section-produto-final  .preco-produto{
 margin-top:50px ;
 scale: 1.1;
}

.section-produto-final  .preco-produto h3 { 
 width: 50vw;
 height: 15px;
 font-size: 15px;
 text-align: center;
 position: relative;
 left: -10px;
}
.section-produto-final 
.preco-produto .produto-2{
 top: 27px;
 left: -45%;
}

.section-produto-final 
.preco-produto .image-preco-produto-2{
 left: 10%;
}

.section-produto-final 
.preco-produto .image-preco-produto-3{
 top: 20%;
}


.section-produto-final  .preco-produto img{
 position: relative;
 right:20px;
}

.section-produto-final  .preco-produto a{
 width: 200px;
 margin-top: 20px;
 /* font-size: 17px; */
}
.section-produto-final  .preco-produto .frase-tratamento{
 font-size: 14px;
}

.informacao-de-garantia{
 height: 250px;
}

.informacao-de-garantia .informacao-text h1{
 font-size: 14px;
 width: 50vw;
 position: relative;
 right: 50%;
}

.informacao-de-garantia .informacao-text p{
 font-size: 12px;
 width: 40vw;
 line-height: 1.2rem;
 text-align: justify;
 position: relative;
 top:-20px;
 right: 40%;
}

.informacao-de-garantia .informacao-image img{
 width: 80px;
 height: 80px;
 position: absolute;
 top: 95px;
 left: -65px;
}

.btn-compra{
 margin-top: -2rem;
 margin-bottom: -2rem;
}

.section-duvidas h1{
 width: 100%;
 text-align: center;
 font-size: 27px;
}

.section-duvidas{
 width: 100vw;
}

.section-duvidas p{
 width: 90vw;
 text-align: center;
 font-size: 10px;
}

summary,details div{
 width: 80vw;
}

summary{
 font-size: 12px;
 height: 40px;
 text-align: start;
}

.section-duvidas a{
 font-size: 10px;
 width: 250px;
 left: 77px; 
}


footer{
 height: 200px;
 width: 100vw;
 position: relative;
}
footer .footer-image-logo{
 width: 100px;
 height: 100px;
 left: -8px;
}

footer .footer-links{
 font-size: 11px;
 left: 15px;
}

footer .footer-links a{
 width: 100px; 
}

footer .footer-links h3{
 position: relative;
 top: 0px;
 left: 10px;
}

footer .footer-contato{
 width:150px;
 position: relative;
 margin-top: 30px;
 left: 0;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}
footer .footer-contato .email-contato,.footer-contato .cel-contato{
 font-size: 10px;
 position: relative;
 top: -100px;
 left: -45px; 
}

.footer-contato .cel-contato{
 margin-top: 5px;
}

.footer-contato h3{
 font-size: 7px; 
 width: 100px;
 position:relative;
 top: -40px;
 left: -20px;
}

.footer-formas-de-pagamento .bandeira-mastercard,
.footer-formas-de-pagamento .bandeira-amex,
.footer-formas-de-pagamento .bandeira-ame, 
.footer-formas-de-pagamento .bandeira-caba
.footer-formas-de-pagamento .bandeira-mastercard,
.footer-formas-de-pagamento .bandeira-boleto{
  position: relative;
}
.footer-formas-de-pagamento .bandeira-amex,
.footer-formas-de-pagamento .bandeira-mastercard{
 top: 3px;
}

.footer-formas-de-pagamento .bandeira-ame, 
.footer-formas-de-pagamento .bandeira-cabal{
 top: -4px;
 height: 5px;
}

.footer-formas-de-pagamento .bandeira-cabal{
 
 height: 9px;
}

.footer-formas-de-pagamento .bandeira-boleto,
.footer-formas-de-pagamento .bandeira-cabal{
 top: -3px;
}
   

.footer-formas-de-pagamento{
 font-size:10px;
 position: absolute;
 top: 90%;
 left: 65%;
}

.footer-formas-de-pagamento h3{
 font-size: 7px;
 margin-bottom: 10px;
 width: 89px;
 
}

.footer-formas-de-pagamento img{
 width: 14px;
 position: relative;
 left: 9px;
}
}


@media screen and (min-width:769px) and (max-width:992px) {
    
body{
 overflow-x: hidden;
}
.header-container img,h1,h2,p,button{
 margin-top: 2rem;
 margin-left: -150px;
 z-index: 99;
 position: relative;
 left: 50px;
}

.header .wave{
 position: absolute; 
 top: 439px;
}

.header .image-arvore{
 z-index: 99;
 position: relative;
 top: 145px;
 left: -30px;
 height: 500px;
}
.header-container h1{
 font-size: 28px;
}
.header-container p,h2{
 text-align: justify;

 font-size: 18px;
}

.main-container .section-explicacao-do-produto{
 position: relative;
 left: 10%;
 line-height: 3.5rem;
}

.main-container .section-explicacao-do-produto p{
 width: 600px;
}
.main-container .section-explicacao-do-produto h1{
 width: 600px;
 left: 50px;
}

.section-explicacao-do-produto .image-produto img{
 display: none;
}


.section-prova-social .button-preco{
 position: relative;
 left: 77px;
}

.section-recomendacao-do-produto h1{
 margin: 0 auto;
 width: 500px;
 font-size: 23px;
}

.section-recomendacao-do-produto .icons-section{
 width:700px;
 position: relative;
 left: 70px;
 gap: 20px;
}

.metodos h1{
 font-size: 25px;
 position: relative;
 left: 150px;
 width: 280px;
}

.metodos{
 height: 700px;
}

.metodos p{
 width: 230px; 
 left: 160px;
}

.metodos ul li{
 margin-top: 30px;
}

.metodos .metodo-vitamagro h1{
 font-size: 28px;
 width: 270px;
 position: relative;
 left: 140px;
}
.text-metodo{
 height: 590px;
}

.section-depoimentos h1{
 text-align:center;
 width: 100vw;
 position: relative;
 left: 10%;
 font-size: 38px;
}

.section-depoimentos .button-preco{
 left: 10%;
}

.ingredientes{
 flex-wrap: wrap;
}

.section-compostos h1{
 position: relative;
 width: 500px;
 left: 70px;
}

.ingredientes .composto{
 margin-top:-10px;
 font-size: 14px;
 height: 350px;
 width: 350px;
} 

.ingredientes .composto p{
 margin-left: -90px;
 font-size:18px ;
}

.section-compostos .frase-composto{
 width: 500px;
 
 margin-bottom: 50px;
 position: relative;
 left:80px;
}
.section-compostos .composto-secreto{
 position: relative;
 left: 70px;
 width: 520px;
 font-size: 19px;
}

.informacoes-extras{
 height: 250px;
}

.informacoes-extras img{
 height: 340px;
 position: relative;
 left: 20%;
}

.informacoes-extras .header-informacoes{
 left: 150px;
}
.informacoes-extras .header-informacoes h1{
 font-size: 18px;
 width: 299px;
 position: relative;
 text-align: center;
 top: -20px;
 left: 200px;
}

.informacoes-extras .header-informacoes p{
 font-size:14px ;
 width: 400px;
 margin: 0;
 position: relative;
 right: 45px;
 line-height: 1.5rem;
}

.section-produto-final{
 flex-wrap: wrap;
}

.section-produto-final  .preco-produto{
 width: 230px;
 margin-top:50px ;
 scale: 1.1;
}

.section-produto-final  .preco-produto h3 { 
 width: 150px;
 height: 15px;
 font-size: 15px;
 text-align: center;
 position: relative;
 left: 26px;
}

.section-produto-final  .preco-produto img{
 position: relative;
 right:20px;
}

.section-produto-final  .preco-produto p{
 position: relative;
 left: 80px;
}

.section-produto-final  .preco-produto a{
 width: 200px;
 font-size: 12px;
 position: relative;
 left: 80px;
}

.informacao-de-garantia{
 height: 250px;
}

.informacao-de-garantia .informacao-text h1{
 font-size: 23px; 
 width: 385px;
 left: 80px;
}

.informacao-de-garantia .informacao-text p{
 font-size: 18px;
 width: 400px;
 line-height: 1.5rem;
 text-align: justify;
 position: relative;
 left: 80px;
}

.informacao-de-garantia .informacao-image img{ 
 width: 150px;
 height: 150px;
 position: relative;
 top: 50px;
 left: 200px;
}

.btn-compra{
 left: 60px;
 margin-bottom: -2rem;
}

.section-duvidas h1{
 width: 100vw; 
 text-align: center;
 left: 13%;
 font-size: 32px;
}

.section-duvidas p{
 width: 100%;
 text-align: center;
 left: 13%;
}

summary,details div{
 width: 90vw;
}


summary{
 font-size: 16px;
 height: 40px;
 text-align: start;

}

.section-duvidas a{
 font-size: 14px;
 width: 350px;
 left: 77px; 
}

footer{
 height: 200px;
}

footer .footer-image-logo{
 width: 150px;
 height: 150px;
 left: -12px;
}

footer .footer-links{
 font-size: 11px;
 left: -10px;
}

footer .footer-links a{
 width: 100px; 
}

footer .footer-links h3{
 position: relative;
 top: 0px;
 left: 10px;
}

footer .footer-contato .email-contato,.footer-contato .cel-contato{
 font-size: 14px;
 position: relative;
 top: -20px;
 left: -105px; 
}

.footer-contato .cel-contato{
 margin-top: 5px;
}

.footer-contato h3{
 font-size: 12px; 
 width: 200px;
 position:relative;
 top: 0px;
 left: -70px;
}

.footer-formas-de-pagamento{
 width: 200px;
 font-size:10px;
 position: relative;
 top: 50px;
 left: -50px;
}

.footer-formas-de-pagamento h3{
 font-size: 12px;
 margin-bottom: 10px;
 width: 189px;
}



}