html, body{
margin:0 !important;
padding:0 !important;
font-family: "Montserrat", sans-serif;
width: 100%;
max-width: 100%;
height: 100%;
min-height: 100vh;
background:#FFFFFF !important;
color:#9D2222 !important;
}
a{
text-decoration: none !important;
transition:all 0.3s linear;
}
ul{
margin:0 !important;
padding:0 !important;
}
ul li{
padding:0;
margin:0;
list-style: none;
}
img{
max-width: 100%;
height:auto;
border:0;
outline: 0;
}
button, input, a, select, textarea{
outline: 0 !important;
border:0;
text-decoration: none;
transition:all 0.2s linear;
}
.container{
max-width:1200px !important;
width:100% !important;
position:relative;
z-index:3;
}
#topo{
height:100vh;
position: relative;
background-color: #fff;
}
#topo .content-topo{
height:100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
#topo .content-topo .tarja-logo{
height:100%;
width: 200px;
position: absolute;
top:0;
left:50px;
z-index: 1;
background: rgb(180,47,47);
background: linear-gradient(180deg, rgba(180,47,47,1) 0%, rgba(104,4,4,1) 100%);
padding: 70px 0 0;
}
#topo .content-topo .tarja-logo .logo{
max-width: 150px;
margin: 0 auto;
}
#topo .content-topo .content-text-topo{
position: relative;
z-index: 3;
padding: 50px 0 50px;
}
#topo .content-topo .content-text-topo h1{
text-align: right;
font-weight: 800;
font-size: 74px;
color: #9D2222;
font-style: italic;
line-height: 74px;
max-width: 830px;
margin: 0 0 50px auto;
font-family: "Montserrat", sans-serif;
letter-spacing: -2px;
transform: translatex(-50px);
position: relative;
z-index: 3;
}
#topo .content-topo .content-text-topo .card-texto{
background: #9A2020;
border-radius: 50px;
color: #fff;
padding: 30px 50px;
max-width: 520px;
margin: 0 0 60px auto;
position: relative;
transform: translatex(-50px);
z-index: 3;
}
#topo .content-topo .content-text-topo .card-texto h2{
font-style: italic;
font-weight: 400;
font-size: 25px;
border-bottom: 3px solid #F1C850;
padding-bottom: 30px;
line-height: 30px;
font-family: "Montserrat", sans-serif;
}
#topo .content-topo .content-text-topo .card-texto h2 strong{
font-weight: 700;
font-family: "Montserrat", sans-serif;
}
#topo .content-topo .content-text-topo .card-texto .icone{
max-width: 70px;
position: absolute;
right: 50px;
bottom: 70px;
}
#topo .content-topo .content-text-topo a.btn-loja{
background: #6DB320;
font-family: "Montserrat", sans-serif;
color: #fff;
font-weight: 700;
text-transform: uppercase;
font-size: 20px;
letter-spacing: -1px;
height: 54px;
border-radius: 30px;
max-width: 450px;
margin: 0 0 -280px auto;
position: relative;
z-index: 3;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
transform: translatex(-80px);
transition: all 0.3s linear;
}
#topo .content-topo .content-text-topo a.btn-loja:hover{
background: #5a961a;
}
#topo .content-topo .content-text-topo .image-topo{
position: relative;
z-index: 1;
}
#topo .content-topo .content-text-topo .image-topo .star-topo{
position: absolute;
z-index: 2;
}
#topo .content-topo .content-text-topo .image-topo .star-topo.estrela-meio{
left: 520px;
max-width: 50px;
bottom: 100px;
}
#topo .content-topo .content-text-topo .image-topo .star-topo.estrela-top{
max-width: 70px;
top: -24px;
left: 350px;
}
#topo .content-topo .content-text-topo .image-topo .star-topo.estrela-left{
max-width: 60px;
bottom: 120px;
left: -19px;
}
section#sobre{
position: relative;
}
section#sobre .image-sobre{
position: absolute;
right:0;
width: 55%;
height: 100%;
top: 0;
}
section#sobre .image-sobre img{
width: calc(100% + 60px);
max-width: calc(100% + 60px);
margin-left: -60px;
height: 100%;
object-fit: cover;
}
section#sobre .area-texto{
width: 55%;
background: rgb(180,47,47);
background: linear-gradient(180deg, rgba(180,47,47,1) 0%, rgba(104,4,4,1) 100%);
padding: 70px 80px 50px 0;
display: flex;
justify-content: flex-end;
color:#fff;
position: relative;
border-radius: 0 232px 0 0;
z-index: 3;
}
section#sobre .area-texto .content-texto{
max-width: 570px;
}
section#sobre .area-texto .content-texto .logo-sobre{
max-width: 150px;
margin: 0 0 30px;
}
section#sobre .area-texto .content-texto p{
font-family: "Montserrat", sans-serif;
color: #fff;
font-style: italic;
font-size: 16px;
line-height: 24px;
margin:0 0 20px;
font-weight: 400;
}
section#sobre .area-texto .content-texto p strong{
font-weight: 700;
}
section#sobre .area-texto .content-texto ul.destaques li{
align-items: center !important;
padding: 0 60px 20px 0 !important;
margin: 0 0 20px 0 !important;
border-bottom: 1px solid #F1C850;
}
section#sobre .area-texto .content-texto ul.destaques li .icone{
width: 42px;
margin-right: 15px;
}
section#sobre .area-texto .content-texto ul.destaques li .text{
width: calc(100% - 57px);
font-family: "Montserrat", sans-serif;
color: #fff;
font-style: italic;
font-size: 15px;
line-height: 22px;
font-weight: 400;
}
section#sobre .area-texto .content-texto ul.destaques li:nth-child(3){
padding-right: 10px !important;
}
section#sobre .area-texto .content-texto a.btn-conhece{
background: #6DB320;
font-family: "Montserrat", sans-serif;
color: #fff;
font-weight: 700;
text-transform: uppercase;
font-size: 20px;
letter-spacing: -1px;
height: 50px;
border-radius: 30px;
max-width: 360px;
margin: 40px auto 20px;
position: relative;
z-index: 3;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
transition: all 0.3s linear;
}
section#sobre .area-texto .content-texto a.btn-conhece:hover{
background: #5a961a;
}
section#porques{
padding: 60px 0;
position: relative;
background: rgb(180,47,47);
background: linear-gradient(0deg, rgba(180,47,47,1) 0%, rgba(104,4,4,1) 100%);
}
section#porques h2{
font-family: "Montserrat", sans-serif;
color: #fff;
font-weight: 800;
font-style: italic;
margin: 0 auto 40px;
text-align: center;
font-size: 40px;
}
.porques .porque{
width: 24%;
padding: 20px;
}
.porques .porque .content-porque{
border: 2px solid #F1C850;
padding: 20px;
border-radius: 30px;
height: 100%;
}
.porques .porque .content-porque .icone{
max-width: 80px;
margin: 0 auto 20px;
}
.porques .porque .content-porque h4{
font-family: "Montserrat", sans-serif;
color: #fff;
font-weight: 800;
text-align: center;
font-size: 20px;
margin: 0 auto 15px;
}
.porques .porque .content-porque p{
color: #fff;
text-align: center;
font-family: "Montserrat", sans-serif;
line-height: 22px;
font-size: 16px;
margin: 0 auto 5px;
}
.porques{
margin:0 0 30px;
}
section#porques .estrelas{
max-width: 280px;
margin: 0 auto 30px;
}
section#porques a.btn-produtos{
background: #6DB320;
font-family: "Montserrat", sans-serif;
color: #fff;
font-weight: 700;
text-transform: uppercase;
font-size: 20px;
letter-spacing: -1px;
height: 50px;
border-radius: 30px;
max-width: 360px;
margin: 40px auto 20px;
position: relative;
z-index: 3;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
transition: all 0.3s linear;
}
section#porques a.btn-produtos:hover{
background: #5a961a;
}
section#depoimentos{
position: relative;
}
section#depoimentos .image-depoimentos{
position: absolute;
width: 35%;
height: 100%;
}
section#depoimentos .image-depoimentos img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
}
section#depoimentos .lista-depoimentos{
background-color: #fff;
padding: 80px 20px 60px 0;
padding-left: calc(35% + 80px);
}
section#depoimentos .lista-depoimentos h2{
font-family: "Montserrat", sans-serif;
color: #9D2222;
font-weight: 800;
font-style: italic;
margin: 0 auto 30px;
text-align: left;
font-size: 40px;
}
section#depoimentos .lista-depoimentos .depoimentos .depoimento{
width: 48%;
padding: 15px 20px;
margin-bottom: 20px;
}
section#depoimentos .lista-depoimentos .depoimentos .depoimento .content-depoimento{
height: 100%;
border: 2px solid #981F1F;
border-radius: 25px;
padding: 15px 25px 20px;
}
section#depoimentos .lista-depoimentos .depoimentos .depoimento .content-depoimento .stars{
max-width: 140px;
margin: 0 auto 20px;
}
section#depoimentos .lista-depoimentos .depoimentos .depoimento .content-depoimento h3{
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 18px;
text-align: center;
margin: 0 auto 15px;
}
section#depoimentos .lista-depoimentos .depoimentos .depoimento .content-depoimento p{
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 16px;
text-align: center;
}
section#depoimentos .lista-depoimentos .depoimentos{
max-width: 800px;
margin-left: -40px;
}
footer{
position: relative;
padding: 80px 0;
background: linear-gradient(0deg, rgba(180,47,47,1) 0%, rgba(104,4,4,1) 100%);
color:#fff;
}
.content-footer .instagram{
max-width: 70px;
}
.content-footer .text-rodape h4{
font-family: "Montserrat", sans-serif;
color:#fff;
font-weight: 600;
font-size: 20px;
}
.content-footer .text-rodape h4:not(:last-child){
margin: 0 0 10px;
}
.content-footer .logo-rodape{
max-width: 180px;
}

@media(max-width:1600px){
#topo .content-topo .content-text-topo h1{
font-size: 68px;
line-height: 68px;
margin-bottom: 40px;
}
#topo .content-topo .content-text-topo .card-texto h2 {
font-size: 23px;
padding-bottom: 25px;
line-height: 28px;
}
#topo .content-topo .content-text-topo .card-texto{
max-width: 480px;
margin-bottom: 40px;
}
section#sobre .image-sobre img {
width: calc(100% + 90px);
max-width: calc(100% + 90px);
margin-left: -90px;
height: 100%;
object-fit: cover;
}

}
@media(max-width:1200px){
.container {
max-width: 900px !important;
width: 100% !important;
position: relative;
z-index: 3;
}
#topo .content-topo .tarja-logo{
width: 180px;
}
#topo .content-topo .tarja-logo .logo{
max-width: 130px;
}
#topo .content-topo .content-text-topo h1 {
font-size: 46px;
line-height: 46px;
margin-bottom: 40px;
max-width: 550px;
}
#topo .content-topo .content-text-topo .card-texto h2 {
font-size: 18px;
padding-bottom: 20px;
line-height: 24px;
}
#topo .content-topo .content-text-topo .card-texto {
max-width: 400px;
margin-bottom: 40px;
border-radius: 40px;
padding: 30px 40px;
}
#topo .content-topo .content-text-topo .card-texto .icone {
max-width: 50px;
position: absolute;
right: 50px;
bottom: 60px;
}
#topo .content-topo .content-text-topo a.btn-loja {
font-size: 18px;
height: 50px;
max-width: 370px;
margin: 0 0 -220px auto;
transform: translatex(-65px);
}
section#sobre .area-texto {
width: 63%;
border-radius: 0 180px 0 0;
padding: 50px 50px 50px 0;
}
section#sobre .image-sobre img {
width: calc(100% + 20px);
max-width: calc(100% + 20px);
margin-left: -20px;
height: 100%;
object-fit: cover;
}
section#porques h2{
font-size: 34px;
}
.porques .porque {
width: 25%;
padding: 20px 10px;
}
.porques .porque .content-porque .icone {
max-width: 50px;
margin: 0 auto 20px;
}
.porques .porque .content-porque h4{
font-size: 16px;
}
.porques .porque .content-porque p{
font-size: 14px;
}
section#porques .estrelas {
max-width: 200px;
margin: 0 auto 30px;
}
section#porques a.btn-produtos, section#sobre .area-texto .content-texto a.btn-conhece {
font-size: 18px;
height: 48px;
max-width: 300px;
}
section#sobre .area-texto .content-texto .logo-sobre {
max-width: 130px;
margin: 0px 0 20px;
}
section#sobre .area-texto .content-texto p {
font-size: 14px;
line-height: 20px;
}
section#sobre .area-texto .content-texto {
max-width: 490px;
}
section#sobre .area-texto .content-texto ul.destaques li .icone {
width: 36px;
margin-right: 10px;
}
section#sobre .area-texto .content-texto ul.destaques li .text {
width: calc(100% - 46px);
font-size: 14px;
line-height: 20px;
}
section#sobre .area-texto .content-texto ul.destaques li{
padding-right: 0 !important;
}
section#depoimentos .lista-depoimentos h2{
font-size: 34px;
}
section#depoimentos .lista-depoimentos {
background-color: #fff;
padding: 50px 20px 40px 0;
padding-left: calc(35% + 40px);
}
section#depoimentos .lista-depoimentos .depoimentos .depoimento {
width: 50%;
padding: 15px 10px;
margin-bottom: 0px;
}
section#depoimentos .lista-depoimentos .depoimentos {
max-width: 600px;
margin-left: -20px;
}
section#depoimentos .lista-depoimentos .depoimentos .depoimento .content-depoimento p {
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 15px;
text-align: center;
margin: 0;
}
.content-footer .instagram {
max-width: 60px;
}
.content-footer .text-rodape h4:not(:last-child) {
margin: 0px 0 5px;
}
.content-footer .text-rodape h4 {
font-family: "Montserrat", sans-serif;
color: #fff;
font-weight: 600;
font-size: 18px;
}
.content-footer .logo-rodape {
max-width: 150px;
}
footer {
position: relative;
padding: 70px 0 50px;
}

}

@media(max-width:800px){
#topo .content-topo .tarja-logo {
width: 160px;
left: 0;
padding: 40px 0 0;
}
#topo .content-topo .tarja-logo .logo {
max-width: 120px;
}
#topo .content-topo .content-text-topo h1 {
font-size: 34px;
line-height: 34px;
margin-bottom: 40px;
max-width: 360px;
transform: none;
text-shadow: 
        2px 2px 0px white, /* Sombra para baixo e direita */
       -2px 2px 0px white, /* Sombra para baixo e esquerda */
        2px -2px 0px white, /* Sombra para cima e direita */
       -2px -2px 0px white;
}
#topo .content-topo .content-text-topo .card-texto {
max-width: 100%;
margin-bottom: 40px;
border-radius: 40px;
padding: 20px 30px;
transform: none;
border: 2px solid #fff;
}
#topo .content-topo .content-text-topo a.btn-loja {
font-size: 16px;
height: 48px;
max-width: 330px;
margin: 0 auto;
transform: none;
}
#topo .content-topo .content-text-topo .image-topo{
display: none;
}
#topo .content-topo .content-text-topo a.btn-loja{
border: 1px solid #fff;
}
section#sobre .image-sobre {
position: relative;
right: 0;
width: 100%;
height: auto;
top: 0;
}
section#sobre .area-texto {
width: 100%;
border-radius: 0;
padding: 50px 20px;
}
section#porques h2 {
font-size: 26px;
max-width: 300px;
margin: 0 auto 30px;
}
.porques .porque {
width: 100%;
padding: 10px 10px;
max-width: 330px;
margin: 0 auto;
}
section#porques .estrelas {
max-width: 180px;
margin: 0 auto 30px;
}
section#depoimentos .image-depoimentos {
position: relative;
width: 100%;
height: 530px;
}
section#depoimentos .lista-depoimentos {
background-color: #fff;
padding: 40px 20px;
padding-left: 20px;
padding-left: 20px;
position: relative;
}
section#depoimentos {
position: relative;
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
}
section#depoimentos .lista-depoimentos h2 {
font-size: 26px;
text-align: center;
max-width: 300px;
margin: 0 auto 30px;
}
section#depoimentos .lista-depoimentos .depoimentos .depoimento {
width: 100%;
padding: 15px 10px;
margin-bottom: 0px;
max-width: 330px;
margin: 0 auto;
}
section#depoimentos .lista-depoimentos .depoimentos {
max-width: 100%;
margin-left: 0;
}
.content-footer .instagram {
max-width: 50px;
margin: 0 auto 20px;
}
.content-footer .text-rodape{
margin-bottom: 30px;
width: 100%;
}
.content-footer .text-rodape h4:not(:last-child) {
margin: 0px auto 10px;
text-align: center;
font-size: 16px;
max-width: 305px;
}
.content-footer .text-rodape h4{
text-align: center;
font-size: 16px;
max-width: 305px;
margin:0 auto;
}
.content-footer .logo-rodape {
max-width: 130px;
margin: 0 auto;
}


}