@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
html, body{
margin:0;
padding:0;
font-family: "Raleway", sans-serif;
background:#FFF;
}
ul{
margin:0;
padding:0;
}
ul li{
padding:0;
margin:0;
list-style: none;
font-family: "Raleway", sans-serif;
}
img{
max-width: 100%;
height:auto;
border:0;
outline: 0;
}
body.over{
overflow: hidden;
}
button, input, a, select{
outline: 0 !important;
border:0;
text-decoration: none;
font-family: "Raleway", sans-serif;
}
a, span, p, h1, h2, h3, h4, h5, h6, small{
font-family: "Raleway", sans-serif;
}
a{
text-decoration:none;
font-family: "Raleway", sans-serif;
}
main{
overflow: hidden;
}
.container{
max-width: 1200px;
width: 100%;
}
#topo{
position:relative;
background-color:#EDEDED;
min-height: 100vh;
padding:50px 0;
display: flex;
align-items: center;
}
#topo .image-topo{
position: absolute;
z-index: 2;
right:-3px;
top:0;
width:auto;
height:100%;
}
#topo .image-topo img{
width:auto;
height:100%;
}
.content-topo .logo{
max-width: 180px;
margin: 0 0 40px;
}
.content-topo h1{
text-align: left;
font: normal normal 500 35px/41px Raleway;
letter-spacing: 0px;
color: #171717;
max-width: 480px;
margin:0 0 30px;
}
.content-topo h2{
text-align: left;
font: normal normal normal 25px/32px Raleway;
letter-spacing: 0px;
color: #171717;
max-width: 570px;
margin:0 0 50px;
}
a.btn-acao{
background: #25d366;
border-radius: 60px;
height: 63px;
width: 400px;
padding-right: 5px;
transition: all .3s linear;
animation: pulse 2s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 0 20px 10px rgba(37, 211, 102, 0.5);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
}
a.btn-acao span{
text-align: left;
font: normal normal 500 17px/22px Raleway;
letter-spacing: 1px;
color: #FFFFFF;
max-width: 310px;
margin-left: 15px;
}
a.btn-acao span strong{
font-weight: 700;
font-size: 18px;
letter-spacing: 0px;
}
a.btn-acao:hover{
transform:scale(1.03);
box-shadow:0 0 25px rgb(13,13,13,.2);
}
a.btn-acao.btn-white{
background: #FFFFFF 0% 0% no-repeat padding-box;
}
a.btn-acao.btn-white span{
color:#727272;
}
section#seu-lar{
position: relative;
padding: 100px 0;
background-color: #727272;
}
section#seu-lar .text-lar{
padding-bottom: 60px;
}
section#seu-lar .text-lar h2{
text-align: left;
font: normal normal 500 35px/41px Raleway;
letter-spacing: 0px;
color: #FFFFFF;
margin: 0 0 30px;
}
section#seu-lar .text-lar p{
text-align: left;
font:normal normal normal 22px/32px Raleway;
letter-spacing: 0px;
color: #FFFFFF;
max-width: 422px;
margin:0 0 30px;
}
section#seu-lar .text-lar p:last-of-type{
margin-bottom:50px;
}
section#seu-lar .image-lar{
position: relative;
}
section#seu-lar .image-lar:after{
content:"";
width:139px;
height:139px;
transform: matrix(1, 0, 0, 1, 0, 0);
position:absolute;
right: 2px;
bottom: 2px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
}
section#jornada{
position: relative;
background-color: #EDEDED;
padding: 80px 0 95px;
}
section#jornada h2{
text-align: center;
font: normal normal 500 35px/41px Raleway;
letter-spacing: 0px;
color: #171717;
margin: 0 auto 30px;
}
section#jornada h3{
text-align: center;
font: normal normal normal 25px/36px Raleway;
letter-spacing: 0px;
color: #171717;
max-width: 1020px;
margin: 0 auto 60px;
}
.destaques{
margin:0 -20px 60px;
}
.destaques .destaque{
width: 33.3333%;
padding: 10px 20px;
}
.destaques .destaque .content-destaque{
height: 100%;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 0px 0px 0px 70px;
padding: 30px 30px;
}
.destaques .destaque .content-destaque .icone{
width: 80px;
margin: 0 auto 20px;
}
.destaques .destaque .content-destaque p{
text-align: center;
font: normal normal normal 22px/32px Raleway;
letter-spacing: 0px;
color: #171717;
margin: 0 0 8px;
}
.trajetoria{
position: relative;
}
.trajetoria:after{
content: "";
width: 92%;
height: 140px;
background-color: #fff;
position: absolute;
left: 35px;
top: 30px;
border-radius: 0px 0px 0px 70px;
}
.trajetoria .logo-trajetoria{
max-width: 140px;
position: relative;
z-index: 3;
margin-bottom: 15px;
}
.trajetoria .text-trajetoria{
text-align: left;
font:normal normal normal 22px/32px Raleway;
letter-spacing: 0px;
color: #171717;
max-width: 510px;
padding-bottom: 24px;
position: relative;
z-index: 3;
}
.trajetoria a.btn-acao{
margin-bottom: 25px;
position: relative;
z-index: 3;
}
section#diferenciais{
position: relative;
padding: 80px 0;
background-color: #FFF;
}
section#diferenciais h2{
text-align: center;
font: normal normal 500 35px/41px Raleway;
letter-spacing: 0px;
color: #171717;
margin: 0 auto 60px;
}
section#diferenciais .diferenciais{
margin:0 auto 40px;
max-width: 1080px;
}
.diferenciais .diferencial{
width:50%;
padding:15px 20px;
}
.diferenciais .diferencial .content-diferencial{
display: flex;
align-items: center;
margin-bottom: 20px;
}
.diferenciais .diferencial .content-diferencial .icone{
width:70px;
margin-right:15px;
}
.diferenciais .diferencial .content-diferencial .texto{
width: calc(100% - 85px);
text-align: left;
font:normal normal normal 20px/26px Raleway;
letter-spacing: 0px;
color: #171717;
max-width: 400px;
}
.diferenciais .diferencial .content-diferencial .texto strong{
display: block;
font:normal normal 700 23px/30px Raleway;
}
section#diferenciais a.btn-acao{
margin:0 auto;
}
section#aniversario{
position: relative;
background-color: #727272;
padding: 100px 0;
}
section#aniversario h2{
text-align: center;
font: normal normal 500 35px/41px Raleway;
letter-spacing: 0px;
color: #FFFFFF;
max-width: 1000px;
margin: 0 auto 40px;
}
section#aniversario p{
text-align: center;
font: normal normal normal 25px/40px Raleway;
letter-spacing: 0px;
color: #FFFFFF;
margin: 0 auto 30px;
}
section#aniversario a.btn-acao{
margin:0 auto 65px;
}
section#aniversario .images-aniversario{
max-width: 1100px;
margin: 0 auto;
}
section#entrega{
position:relative;
padding: 80px 0;
background-color: #EDEDED;
}
.text-entrega h2{
text-align: left;
font: normal normal 500 35px/41px Raleway;
letter-spacing: 0px;
color: #171717;
margin: 0 0 30px;
}
.text-entrega p{
text-align: left;
font: normal normal normal 25px/38px Raleway;
letter-spacing: 0px;
color: #171717;
max-width: 494px;
}
.text-entrega a.btn-acao{
margin:50px 0 0;
}
section#variedades{
position: relative;
background-color: #FFF;
padding: 80px 0;
}
.topo-variedades .variedades h2{
text-align: left;
font: normal normal 500 35px/41px Raleway;
letter-spacing: 0px;
color: #171717;
margin: 0 0 30px;
}
.topo-variedades .variedades .variedade:not(:last-child){
margin-bottom: 20px;
}
.topo-variedades .variedades .variedade .icone{
width:59px;
margin-right: 15px;
}
.topo-variedades .variedades .variedade span{
width: calc(100% - 74px);
text-align: left;
font: normal normal normal 25px/40px Raleway;
letter-spacing: 0px;
color: #171717;
}
.topo-variedades .sobre-variedade p{
text-align: left;
font: normal normal normal 25px/40px Raleway;
letter-spacing: 0px;
color: #171717;
max-width: 399px;
margin: 0 0 40px;
}
.topo-variedades{
margin: 0 auto 60px;
max-width: 1180px;
}
.galeria .slides{
overflow:hidden;
}
.galeria .slides .swiper-slide a{
width: 100%;
height: 580px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
cursor: pointer;
}
.galeria .slides .swiper-slide a img{
width:100%;
height:100%;
object-fit: cover;
border-radius: 0 0 0 100px;
}
.galeria{
position: relative;
padding:0 60px;
}
.galeria .arrow{
position: absolute;
top: 50%;
transform: translatey(-50%);
width: 40px;
height: 40px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
left: 0;
color: #727272;
font-size: 30px;
}
.galeria .arrow.arrow-next{
left: auto;
right:0;
}
section#atendimento{
position: relative;
background-color: #EDEDED;
padding: 80px 0;
}
.text-atendimento h2{
text-align: left;
font: normal normal 500 35px/41px Raleway;
letter-spacing: 0px;
color: #171717;
margin: 0 0 30px;
}
.text-atendimento p{
text-align: left;
font: normal normal normal 25px/40px Raleway;
letter-spacing: 0px;
color: #171717;
max-width: 494px;
}
.text-atendimento a.btn-acao{
margin:50px 0 0;
}
section#depoimentos{
position:relative;
padding:80px 0;
background-color:#FFFFFF;
}
section#depoimentos h2{
text-align: center;
font: normal normal 500 35px/41px Raleway;
letter-spacing: 0px;
color: #171717;
margin:0 auto 50px;
}
.depoimentos{
margin:0 -20px 50px;
}
.depoimentos .depoimento{
width:50%;
padding:10px 20px;
}
.depoimentos .depoimento .content-depoimento{
height: 100%;
background-color: #fff;
border: 2px solid #EDEDED;
border-radius: 0px 0px 0px 70px;
display: flex;
align-items: flex-start;
padding: 30px 35px;
}
.depoimentos .depoimento .content-depoimento .avatar{
width:84px;
margin-right: 15px;
}
.depoimentos .depoimento .content-depoimento .depo{
text-align: left;
font: normal normal normal 22px/30px Raleway;
letter-spacing: 0px;
color: #171717;
width:calc(100% - 99px);
}
.depoimentos .depoimento .content-depoimento .depo strong{
display: block;
}
section#depoimentos a.btn-acao{
margin:0 auto;
}
section#oferta{
padding: 80px 0;
background-color: #727272;
position: relative;
}
.box-ofertas{
background: #EDEDED 0% 0% no-repeat padding-box;
border-radius: 0px 0px 0px 100px;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1100px;
margin: 0 auto 15px;
}
.box-ofertas .text-oferta{
padding: 30px;
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - 526px);
}
.box-ofertas .text-oferta h2{
text-align: left;
font: normal normal 500 35px/41px Raleway;
letter-spacing: 0px;
color: #171717;
max-width: 457px;
margin: 0 0 30px;
}
.box-ofertas .text-oferta p{
text-align: left;
font: normal normal normal 20px/30px Raleway;
letter-spacing: 0px;
color: #171717;
max-width: 469px;
}
.box-ofertas .text-oferta a.btn-acao{
margin:40px 0 0;
}
p.pos-oferta{
text-align: right;
font:normal normal normal 20px/30px Raleway;
letter-spacing: 3px;
color: #FFFFFF;
max-width: 810px;
margin:0 auto;
}
section#faq{
position: relative;
padding: 80px 0;
background-color: #FFFFFF;
}
section#faq h2{
text-align: center;
font: normal normal 500 35px/41px Raleway;
letter-spacing: 0px;
color: #171717;
margin:0 auto 30px;
}
.questoes .questao{
background: #EDEDED 0% 0% no-repeat padding-box;
border-radius: 0px 0px 0px 70px;
padding: 25px 30px 25px 60px;
max-width: 1086px;
margin: 0 auto 20px;
}
.questoes .questao h3{
text-align: left;
font: normal normal bold 20px/30px Raleway;
letter-spacing: 0px;
color: #171717;
margin: 0;
}
.questoes .questao p{
text-align: left;
font: normal normal normal 20px/30px Raleway;
letter-spacing: 0px;
color: #171717;
margin:0;
}
footer{
background-color: #727272;
padding: 40px 0 15px;
}
.content-footer .logo-rodape{
max-width: 126px;
}
.content-footer .aba p{
margin:0;
text-align: left;
font: normal normal normal 13px/25px Raleway;
letter-spacing: 0px;
color: #FFFFFF;
}
.content-footer .aba p a{
font-weight: 600;
color:#fff;
}
footer .copyright{
text-align: center;
font: normal normal normal 11px/25px Raleway;
letter-spacing: 2.2px;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
margin-top:30px;
}
span#up-topo{
cursor: pointer;
width: 26px;
height: 26px;
border: 1px solid #fff;
border-radius: 50px;
margin-left: 10px;
font-size: 13px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
section#outlet{
position: relative;
background-color: #EDEDED;
padding:60px 0 40px;
}
section#outlet h2{
text-align: center;
font:normal normal 700 30px/38px Raleway;
letter-spacing: 0px;
color: #171717;
text-transform: uppercase;
margin: 0 0 20px;
}
section#outlet p{
text-align: center;
font: normal normal normal 20px/30px Raleway;
letter-spacing: 0px;
color: #171717;
margin:0 0 25px;
}
section#outlet p a{
font-weight: 500;
color: #171717;
}

@media(max-width:1600px){
.content-topo .logo {
max-width: 160px;
margin: 0 0 40px;
}
.content-topo h1{
margin:0 0 20px;
}
.content-topo h2{
margin:0 0 40px;
}
.content-topo a.btn-acao{
margin-bottom: 25px;
}
section#seu-lar .image-lar{
max-width: 600px;
}
section#seu-lar .image-lar::after {
content: "";
width: 128px;
height: 128px;
right: 2px;
bottom: 2px;
}
section#seu-lar {
position: relative;
padding: 80px 0 70px;
}

}

@media(max-width:992px){
#topo{
flex-wrap:wrap;
padding:40px 0 0;
}
#topo .image-topo {
position: relative;
z-index: 2;
right: 0;
top: auto;
width: 100%;
}
#topo .image-topo img {
width: 100%;
height: auto;
}
.content-topo .logo {
max-width: 140px;
margin: 0 auto 20px;
}
.content-topo h1 {
margin: 0 auto 20px;
font: normal normal 500 26px/33px Raleway;
max-width: 350px;
}
.content-topo h2 {
margin: 0 auto 30px;
font: normal normal normal 20px/28px Raleway;
max-width: 360px;
}
a.btn-acao{
width: 360px;
padding-right: 0;
height:60px;
}
a.btn-acao span{
text-align: left;
font: normal normal 500 15px/20px Raleway;
letter-spacing: 1px;
color: #FFFFFF;
max-width: 280px;
margin-left: 10px;
}
a.btn-acao span strong{
font-weight: 700;
font-size: 16px;
}
a.btn-acao img{
width: 40px;
}
.content-topo a.btn-acao {
margin: 0 auto 40px;
}
section#seu-lar {
position: relative;
padding: 50px 0 60px;
}
.content-lar{
max-width: 360px;
margin: 0 auto;
}
section#seu-lar .text-lar {
padding-bottom: 50px;
width: 100%;
}
section#seu-lar .text-lar h2 {
text-align: center;
font: normal normal 500 26px/30px Raleway;
margin: 0 0 20px;
}
section#seu-lar .text-lar p {
text-align: center;
font: normal normal normal 20px/33px Raleway;
margin: 0 0 30px;
}
section#seu-lar .image-lar::after {
content: "";
width: 74px;
height: 74px;
right: 2px;
bottom: 2px;
}
section#jornada {
padding: 55px 0 65px;
}
section#jornada h2 {
text-align: center;
font: normal normal 500 26px/33px Raleway;
max-width: 360px;
margin: 0 auto 20px;
}
section#jornada h3 {
text-align: center;
font: normal normal normal 20px/30px Raleway;
max-width: 360px;
margin: 0 auto 30px;
}
.destaques .destaque {
width: 100%;
padding: 10px 25px;
max-width: 360px;
margin: 0 auto;
}
.destaques .destaque .content-destaque .icone {
width: 70px;
margin: 0 auto 20px;
}
.destaques .destaque .content-destaque p {
text-align: center;
font: normal normal normal 20px/32px Raleway;
}
.trajetoria .logo-trajetoria {
max-width: 100%;
position: relative;
z-index: 3;
height: 120px;
text-align: center;
width:100%;
}
.trajetoria .logo-trajetoria img{
width:120px;
}
.trajetoria .text-trajetoria {
text-align: center;
font: normal normal normal 20px/32px Raleway;
letter-spacing: 0px;
color: #171717;
max-width: 340px;
padding: 20px 0;
position: relative;
z-index: 3;
width: 100%;
margin: 0 auto;
}
.trajetoria a.btn-acao {
position: relative;
z-index: 3;
margin: 0 auto;
}
.trajetoria::after {
content: "";
width: 360px;
height: 86%;
background-color: #fff;
position: absolute;
left: 50%;
top: 22px;
border-radius: 0px 0px 0px 70px;
transform: translatex(-50%);
}
section#diferenciais {
position: relative;
padding: 50px 0 60px;
}
section#diferenciais h2 {
text-align: center;
font: normal normal 500 26px/32px Raleway;
margin: 0 auto 20px;
}
.diferenciais .diferencial {
width: 100%;
padding: 15px 0;
max-width: 360px;
margin: 0 auto;
}
.diferenciais .diferencial .content-diferencial .icone {
width: 60px;
margin-right: 10px;
}
.diferenciais .diferencial .content-diferencial .texto {
width: calc(100% - 70px);
text-align: left;
font: normal normal normal 16px/24px Raleway;
letter-spacing: 0px;
color: #171717;
max-width: 300px;
}
section#diferenciais .diferenciais{
margin-bottom: 10px;
}
section#aniversario {
position: relative;
padding: 60px 0;
}
section#aniversario h2 {
text-align: center;
font: normal normal 500 22px/30px Raleway;
max-width: 360px;
margin: 0 auto 20px;
}
section#aniversario p {
text-align: center;
font: normal normal normal 18px/26px Raleway;
margin: 0 auto 30px;
max-width: 360px;
}
section#aniversario .images-aniversario .image-destaque{
margin:0 15px;
}
section#entrega, section#variedades, section#atendimento, section#depoimentos {
position: relative;
padding: 60px 0;
}
.text-entrega h2 {
text-align: center;
font: normal normal 500 26px/32px Raleway;
margin: 0 auto 20px;
max-width: 360px;
}
.text-entrega p {
text-align: center;
font: normal normal normal 20px/30px Raleway;
max-width: 360px;
margin:0 auto 20px;
}
.text-entrega a.btn-acao {
margin: 30px auto 40px;
}
.dados-entrega .text-entrega{
width:100%;
}
.topo-variedades .variedades h2 {
text-align: center;
font: normal normal 500 26px/32px Raleway;
margin: 0 auto 20px;
max-width: 360px;
}
.topo-variedades .variedades .variedade .icone {
width: 45px;
margin-right: 10px;
}
.topo-variedades .variedades .variedade span {
width: calc(100% - 55px);
text-align: left;
font: normal normal normal 18px/22px Raleway;
color: #171717;
}
.topo-variedades .variedades .variedade{
max-width: 360px;
margin:0 auto 20px;
}
.topo-variedades .variedades{
width:100%;
margin:0 auto 15px;
}
.topo-variedades .sobre-variedade p {
text-align: center;
font: normal normal normal 20px/32px Raleway;
letter-spacing: 0px;
color: #171717;
max-width: 360px;
margin: 0 auto 30px;
}
.topo-variedades .sobre-variedade {
width:100%;
}
section#variedades a.btn-acao{
margin:0 auto;
}
.galeria {
position: relative;
padding: 0;
}
.galeria .slides .swiper-slide a {
width: 100%;
height: 270px;
}
.galeria .slides .swiper-slide a img{
border-radius: 0 0 0 60px;
}
.galeria .arrow{
color:#fff;
font-size: 26px;
}
.text-atendimento h2 {
text-align: center;
font: normal normal 500 26px/32px Raleway;
margin: 0 auto 20px;
max-width: 360px;
}
.text-atendimento p {
text-align: center;
font: normal normal normal 20px/32px Raleway;
max-width: 360px;
margin: 0 auto 20px;
}
.text-atendimento{
width:100%;
}
.text-atendimento a.btn-acao {
margin: 30px auto 40px;
}
section#depoimentos h2 {
text-align: center;
font: normal normal 500 26px/32px Raleway;
margin: 0 auto 30px;
max-width: 360px;
}
.depoimentos .depoimento {
width: 100%;
padding: 10px 20px;
}
.depoimentos .depoimento .content-depoimento .depo {
text-align: center;
font: normal normal normal 18px/30px Raleway;
width: 100%;
}
.depoimentos .depoimento .content-depoimento .avatar {
width: 74px;
margin: 0 auto 20px;
}
.depoimentos .depoimento .content-depoimento {
height: 100%;
background-color: #fff;
border: 2px solid #EDEDED;
border-radius: 0px 0px 0px 50px;
padding: 30px 20px;
flex-wrap: wrap;
}
.depoimentos .depoimento {
width: 100%;
padding: 10px 20px;
}
section#oferta, section#faq{
padding:60px 0;
}
.box-ofertas{
flex-wrap:wrap;
}
.box-ofertas .text-oferta {
padding: 30px 25px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.box-ofertas .text-oferta h2 {
text-align: center;
font: normal normal 500 26px/32px Raleway;
max-width: 360px;
margin: 0 auto 20px;
}
.box-ofertas .text-oferta p {
text-align: center;
font: normal normal normal 18px/26px Raleway;
max-width: 300px;
margin: 0 auto 20px;
}
.box-ofertas .text-oferta a.btn-acao {
margin: 30px auto 15px;
}
.box-ofertas .image-oferta{
border-radius: 0 0 0 50px;
overflow: hidden;
}
p.pos-oferta {
text-align: center;
font: normal normal normal 18px/26px Raleway;
letter-spacing: 4px;
max-width: 360px;
margin: 0 auto;
}
section#faq h2 {
text-align: center;
font: normal normal 500 26px/32px Raleway;
margin: 0 auto 30px;
max-width: 360px;
}
.questoes .questao {
background: #EDEDED 0% 0% no-repeat padding-box;
border-radius: 0px 0px 0px 50px;
padding: 20px 20px 30px 20px;
margin: 0 auto 20px;
}
.questoes .questao h3 {
text-align: left;
font: normal normal bold 18px/24px Raleway;
margin: 0 0 10px;
}
.questoes .questao p {
text-align: left;
font: normal normal normal 16px/22px Raleway;
}
.content-footer .aba{
width:100%;
margin:20px 0 0;
}
.content-footer .logo-rodape {
max-width: 100px;
margin: 0 auto;
}
.content-footer .aba p {
margin: 0;
text-align: center;
}
footer .copyright{
letter-spacing: 1px;
}
span#up-topo {
width: 22px;
height: 22px;
font-size: 10px;
}
.diferenciais .diferencial .content-diferencial .texto strong {
display: block;
font:normal normal 700 18px/26px Raleway;
}
section#outlet h2 {
text-align: center;
font:normal normal 700 22px/30px Raleway;
letter-spacing: 0px;
color: #171717;
text-transform: uppercase;
margin:0 auto 20px;
max-width: 300px;
}
section#outlet p {
text-align: center;
font:normal normal normal 18px/24px Raleway;
letter-spacing: 0px;
color: #171717;
max-width: 360px;
margin:0 auto 25px;
}


}