:root {
--bg-color: #faf3df;
--main-color: #414e32;
--button-color: #d15385;
--button-shadow: #798a65;
--primary-font: 'SN Pro', sans-serif;
--secondary-font: Arial, Helvetica, sans-serif;
}

* {
margin: 0rem;
padding: 0rem;
box-sizing: content-box;
scroll-behavior: smooth;
}

body {
margin: 0rem;
padding: 0rem;
min-height: 100vh;
max-width: 100vw;
background-color: var(--bg-color);
justify-content: center;
}

#preLoader {
background: var(--bg-color) url(../Assets/img/inicio/preLoaderImg.gif)
no-repeat center center;
background-size: 25%;
height: 100vh;
width: 100%;
position: fixed;
z-index: 9999;
transition: all 1000ms linear;
}

.container {
background-color: transparent;
padding-bottom: 3rem;
}

.container h1 {
font-family: var(--primary-font);
font-size: 4rem;
font-weight: 700;
color: var(--main-color);
text-align: center;
letter-spacing: 0.5%;
margin-left: 6.75rem;
margin-right: 5.5rem;
}

/* SEÇÃO 1 - SOBRE */
.secao1 {
margin-left: 6.75rem;
margin-right: 5.5rem;
max-width: 100vw;
display: flex;
flex-wrap: row wrap;
justify-content: space-between;
}

.secao1 strong {
color: var(--button-color);
}

#chamada {
margin-top: 5rem;
padding-bottom: 3.5rem;
}

.secao1 p {
width: 33.875rem;
font-family: var(--secondary-font);
font-size: 1.5rem;
line-height: 1.75rem;
color: var(--main-color);
}
.imagem1 {
width: 479px;
}
/* -------- */

/* SEÇÃO 2 - COMO FUNCIONA */

#secundaria h1 {
margin-left: 6.75rem;
margin-right: 5.5rem;
text-align: start;
font-weight: 700;
height: cover;
padding-bottom: 1.375rem;
}

#textoSecao2 {
width: 67.375rem;
height: 10.5rem;
margin-left: 6.75rem;
margin-right: 5.5rem;
font-family: var(--secondary-font);
color: var(--main-color);
font-size: 1.5rem;
letter-spacing: 5%;
padding-bottom: 3.125rem;
}

#comoFunciona {
box-sizing: border-box;
border-top: 2px solid var(--button-color);
border-bottom: 2px solid var(--button-color);
height: 26.313rem;
background-color: var(--main-color);
display: flex;
flex-wrap: row wrap;
padding-top: 3.188rem;
padding-bottom: 3.188rem;
padding-left: 6.75rem;
padding-right: 8.188rem;
gap: 3.813rem;
}

#imagem2 {
background-color: transparent;
width: 415px;
}

.passoAPasso {
height: 15.75rem;
width: 35.75rem;
background-color: transparent;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 1.25rem 4.688rem;
}

.passo {
background-color: transparent;
height: 7.25rem;
justify-items: center;
}

.passo img {
background-color: transparent;
display: block;
margin: 0rem auto;
}

.passoAPasso p {
background-color: transparent;
width: 15.531rem;
padding-bottom: 1.172rem;
font-family: var(--secondary-font);
font-size: 0.875rem;
color: var(--bg-color);
text-align: center;
}

.buscar {
grid-column: 1 / -1;
justify-self: center;
background-color: transparent;
}

#bpro {
border-radius: 1.25rem;
border: 2px solid #798a65;
font-family: var(--primary-font);
font-size: 1.5rem;
font-weight: 700;
color: #faf3df;
background-color: #d15385;
box-shadow: #798a65 3px 3px;
padding: 0.25rem 1.375rem;
text-align: center;
cursor: pointer;
text-decoration: none;
}

#bpro:hover {
border: 2px solid #d15385;
background-color: #798a65;
box-shadow: #d15385 3px 3px;
}

/* -------- */

/* SEÇÃO 3 - DEPOIMENTOS */

#terciaria {
display: block;
flex-wrap: row wrap;
}

.comeco {
margin-left: 6.75rem;
margin-right: 5.5rem;
display: block;
justify-content: center;
}

.comeco h1 {
padding-bottom: 1.375rem;
margin: 0 auto;
}
.comeco p {
width: 55.313rem;
font-family: var(--secondary-font);
color: var(--main-color);
font-size: 1.5rem;
text-align: center;
justify-self: center;
padding-bottom: 3.313rem;
}

.comeco span {
color: var(--button-color);
}

.card-wrapper {
width: 62.5rem;
padding: 1.25rem 0.625rem;
overflow: hidden;
justify-self: center;
}

.stars {
display: flex;
flex-direction: row;
justify-content: start;
padding: 1.438rem 0rem 0.875rem 1.563rem;
}

.stars img {
padding-right: 0.313rem;
}

.depoimento p {
padding-left: 1.938rem;
font-family: var(--secondary-font);
font-size: 1rem;
line-height: 1.25rem;
letter-spacing: 2%;
width: 16.063rem;
height: 7.875rem;
color: var(--bg-color);
padding-bottom: 3.563rem;
padding-top: 0.875rem;
}

.swiper-wrapper {
list-style-type: none;
user-select: none;
}

.swiper {
height: 450px;
}

.swiper-slide {
border-radius: 1.25rem;
border: 2px solid var(--button-color);
box-sizing: border-box;
background-color: var(--main-color);
}

.card-wrapper .swiper-wrapper:active {
cursor: grabbing;
}

.pessoa .fotoComentario {
font-family: var(--secondary-font);
font-size: 2rem;
font-weight: bold;
background-color: var(--bg-color);
border-radius: 1.875rem;
width: 3.125rem;
height: 3.125rem;
text-align: center;
justify-content: center;
align-content: center;
color: var(--main-color);
}

.pessoa {
display: flex;
flex-direction: row;
padding-left: 1.938rem;
padding-bottom: 1.563rem;
gap: 0.875rem;
}

.fotoComentario img {
width: 50px;
}

.nomeCidade {
display: block;
width: 6.25rem;
height: 3.375rem;
font-family: var(--secondary-font);
color: var(--bg-color);
}

.nomeCidade .nomeComentario {
padding-bottom: 1.25rem;
font-size: 1rem;
font-weight: bold;
}
.nomeCidade .cidadeComentario {
font-size: 0.875rem;
}

.card-wrapper .swiper-pagination-bullet {
width: 12px;
height: 12px;
opacity: 1;
background-color: var(--button-shadow);
border-radius: 2px;
}

.card-wrapper .swiper-pagination-bullet-active {
width: 15px;
height: 15px;
background-color: var(--main-color);
border-radius: 2px;
}

.card-wrapper .swiper-button-next,
.card-wrapper .swiper-button-prev {
color: transparent;
}

.card-wrapper .swiper-button-next:after {
content: '';
width: 30px;
height: 17px;
background-image: url(https://img.icons8.com/ios-glyphs/30/d15385/play--v1.png);
background-repeat: no-repeat;
background-size: cover;
translate: -43vw 12.9rem;
}

.card-wrapper .swiper-button-prev:after {
content: '';
width: 30px;
height: 17px;
color: #d15385;
background-image: url(https://img.icons8.com/ios-glyphs/30/d15385/play--v1.png);
background-repeat: no-repeat;
background-size: cover;
translate: 41.05vw 12.9rem;
rotate: 180deg;
}

.containerBotao {
padding-top: 6.063rem;
padding-bottom: 4.625rem;
justify-self: center;
}

#bproDois {
border-radius: 1.25rem;
border: 2px solid #798a65;
padding: 0.563rem 5.438rem;
font-family: SN pro;
font-size: 1.5rem;
font-weight: 700;
color: #faf3df;
background-color: #d15385;
box-shadow: #798a65 3px 3px;
text-align: center;
cursor: pointer;
text-decoration: none;
}

#bproDois:hover {
border: 2px solid #d15385;
background-color: #798a65;
box-shadow: #d15385 3px 3px;
}
/* -------- */

/* SEÇÃO 4 - FAQ */

.wrapper {
display: block;
max-width: 68.125rem;
margin-left: 6.75rem;
}

.wrapper h1 {
font-family: var(--primary-font);
font-size: 4rem;
font-weight: bold;
text-align: start;
color: var(--main-color);
padding-bottom: 2.5rem;
}

.accordion {
box-sizing: border-box;
background-color: var(--main-color);
border-radius: 1.25rem;
border: 2px solid var(--button-color);
width: 100%;
height: 3.438rem;
font-family: var(--secondary-font);
font-size: 1.5rem;
letter-spacing: 1%;
font-weight: bold;
color: var(--bg-color);
cursor: pointer;
text-align: start;
padding: 0.813rem 1.25rem 0.875rem 1.25rem;
margin-bottom: 1.875rem;
display: flex;
justify-content: space-between;
align-items: center;

}

.accordion img {
height: 1.063rem;
}

.faq.active {
  background-color: var(--button-color);
}

.pannel {
background-color: var(--button-color);
padding: 1.094rem 32.438rem 1.281rem 1.375rem;
margin-bottom: 1.875rem;
overflow: hidden;
display: none;
border-bottom-left-radius: 1.25rem;
border-bottom-right-radius: 1.25rem;

}

.pannel p {
width: 1028px;
font-family: var(--secondary-font);
font-size: 1rem;
letter-spacing: 1%;
line-height: auto;
color: var(--bg-color);
}

.pannel a {
color: var(--bg-color);
cursor: alias;
}

.faq.active {
border-radius: 1.25rem;

}

.faq.active img {
transform: rotate(180deg);
}
/* -------- */

/* SEÇÃO 5 - Newsletter */

aside {
margin-top: 6.25rem;
margin-bottom: 3.438rem;
}

#quinto h1 {
margin-left: 6.563rem;
margin-right: 6.063rem;
font-weight: 400;
text-align: center;
letter-spacing: 0;
padding-bottom: 0.938rem;
}

aside p {
font-family: var(--secondary-font);
font-size: 2rem;
width: 25.563rem;
height: 7.375rem;
color: var(--main-color);
}

.container input {
box-sizing: border-box;
width: 19.063rem;
height: 2.063rem;
font-family: var(--secondary-font);
font-size: 1rem;
border-radius: 1.25rem;
background-color: #fcf7ea;
color: var(--button-shadow);
border: none;
border-style: none;
outline: none;
padding-left: 0.563rem;
cursor: text;
}

#quinto button {
box-sizing: border-box;
width: 19.063rem;
height: 2.063rem;
margin: 0 auto;
border-radius: 1.25rem;
background-color: var(--button-color);
border: 1px solid var(--button-shadow);
font-family: var(--primary-font);
font-size: 1.5rem;
font-weight: bold;
text-align: center;
color: var(--bg-color);
cursor: pointer;
}

#quinto button:active {
background-color: var(--button-shadow);
border: 2px solid var(--button-color);
}

.newsletterBox p {
padding-left: 1rem;
}
.newsletterBox {
padding-top: 1.75rem;
margin-left: 6.75rem;
display: flex;
gap: 0.25rem;
}

.emailBox {
padding: 1.25rem;
width: 21.563rem;
height: 5.688rem;
background-color: var(--main-color);
border: 2px solid var(--button-color);
border-radius: 1.25rem;
display: flex;
gap: 0.25rem;
flex-direction: column;
justify-items: center;
align-items: center;
}

.kiwi {
width: fit-content;
justify-self: center;
margin-bottom: 4rem;
}

.btnTopo {
right: 1.75rem;
bottom: 1.625rem;
justify-self: end;
border-radius: 30px;
background-color: var(--main-color);
height: 3.75rem;
width: 3.75rem;
justify-content: center;
align-items: center;
z-index: 9999;
animation-name: appear;
animation-timeline: scroll(y);
}

@keyframes appear {
0% {
opacity: 0;
display: none;
position: fixed;
}
30% {
opacity: 1;
display: block;
position: fixed;
}

100% {
opacity: 1;
display: block;
position: fixed;
}
}

.btnTopo img {
padding: 20px;
}

.btnTopo:hover {
background-color: var(--button-color);
}

/* -------- */

@media (min-width: 1281px) {
.secao1 {
justify-content: center;
gap: 2.563rem;
}

#textoSecundaria {
justify-self: center;
}

#comoFunciona {
justify-content: center;
}

.wrapper {
justify-self: center;
padding-right: 10rem;
}

.wrapper .faq {
width: 66.25rem;
}

.newsletterBox {
padding-right: 22.25rem;
justify-content: center;
}

aside {
padding-right: 4rem;
}

.kiwi {
padding-right: 6.25rem;
}

.card-wrapper .swiper-button-next:after {
translate: -45vw 12.9rem;
}

.card-wrapper .swiper-button-prev:after {
translate: 43.75vw 12.9rem;
}
}

@media (min-width: 768px) and (max-width: 991.98px) {
body {
overflow-x: hidden;
}

.secao1 {
display: block;
justify-items: center;
}

.secao1 p {
width: 75vw;
padding-bottom: 3.5rem;
}

.secao1 .imagem1 {
display: block;
justify-content: center;
}

#chamada {
text-align: center;
font-size: 2.25rem;
}

#textoSecao2 {
width: 75vw;
margin-bottom: 9rem;
}

#comoFunciona {
display: block;
justify-content: center;
height: 50rem;
}

#imagem2 {
justify-self: center;
margin-left: 5rem;
margin-right: 5.5rem;
margin-bottom: 2rem;
}

#bPro {
justify-self: center;
}

.comeco h1 {
justify-self: center;
}
.comeco p {
width: 80vw;
padding-bottom: 3.313rem;
}

.card-wrapper {
width: 45rem;
}

.wrapper h1 {
text-align: center;
font-size: 3.5rem;
}

.wrapper {
margin-left: 6.75rem;
margin-right: 5.5rem;
}

.card-wrapper .swiper-button-next:after {
translate: -40vw 12.9rem;
}

.card-wrapper .swiper-button-prev:after {
translate: 36.95vw 12.9rem;
}

.accordion {
font-size: 1.25rem;
justify-content: space-between;
align-items: center;
}

.pannel p {
width: 30rem;
}

#quinto h1 {
font-size: 2rem;
font-weight: bold;
text-align: start;
justify-self: center;
}

.newsletterBox p {
font-size: 1.5rem;
}

.newsletterBox {
display: flex;
margin-left: 6.75rem;
margin-right: 5.5rem;
justify-items: center;
}

.kiwi img {
width: 450px;
}
}

@media (max-width: 575.98px) {
body {
overflow-x: hidden;
margin: 0px;
}

#chamada {
justify-self: center;
white-space: nowrap;
font-size: 1.4rem;
text-align: center;
letter-spacing: 0%;
margin-left: 5.75rem;
margin-right: 5.75rem;
width: fit-content;
padding-bottom: 2rem;
}

.secao1 {
padding-left: 5.5rem;
padding-right: 5.5rem;
justify-self: center;
width: 100vw;
display: flex;
flex-direction: column;
justify-items: center;
}

.imagem1 {
margin: 1rem auto auto auto;
width: 279px;
display: block;
}

.secao1 p {
width: 100vw;
line-height: 1.25rem;
font-size: 0.875rem;
}

#secundaria {
display: flex;
flex-direction: column;
}

#secundaria h1 {
width: 100vw;
justify-self: start;
font-size: 1.5rem;
text-align: start;
margin: 0px;
padding-left: 0.75rem;
}

#textoSecao2 {
width: 90vw;
line-height: 1.25rem;
font-size: 0.875rem;
margin: 0px;
margin-bottom: 2rem;
padding-left: 0.75rem;
}

#comoFunciona {
margin: 0px;
display: block;
padding-left: 5.5rem;
padding-right: 5.5rem;
justify-items: center;
height: 52rem;
}

#imagem2 {
margin: 0px;
display: block;
justify-self: center;
width: 430px;
margin-bottom: 2rem;
}

.passoAPasso {
display: block;
}

.passo {
height: 5rem;
}

.passo img {
width: 25px;
height: 25px;
display: block;
margin: 0rem auto;
}

.passoAPasso p {
padding-bottom: 1rem;
font-size: 0.75rem;
width: 500px;
}

.comeco h1 {
font-size: 1.5rem;
padding-right: 1.5rem;
}

.comeco p {
font-size: 0.875rem;
padding-left: 4.5rem;
padding-right: 5.5rem;
width: 80vw;
padding-bottom: 1rem;
text-align: start;
}

.card-wrapper {
width: 80vw;
}

.wrapper h1 {
text-align: center;
font-size: 1.5rem;
}

.wrapper {
margin: 0 auto;
}

.depoimento p {
padding-left: 1.5rem;
font-size: 1rem;
width: 15.25rem;
height: 7.875rem;
color: var(--bg-color);
padding-bottom: 3.563rem;
padding-top: 0.875rem;
}

.card-wrapper .swiper-button-next:after {
translate: -28.95vw 12.95rem;
}

.card-wrapper .swiper-button-prev:after {
translate: 22.25vw 12.95rem;
}

.accordion {
font-size: 0.875rem;
align-items: center;
}

.pannel p {
width: 80vw;
font-size: 0.875rem;
overflow-x: hidden;
}

#quinto h1 {
font-size: 1.25rem;
text-align: start;
justify-self: center;
width: 90vw;
height: 2px;
}

.newsletterBox p {
font-size: 1rem;
height: 50px;
width: 70vw;
margin-left: 0.75rem;
}

.emailBox {
width: 80vw;
justify-self: center;
}

.newsletterBox {
display: block;
margin: 0rem auto;
}

.kiwi img {
width: 400px;
}
}

@media (min-width: 992px) and (max-width: 1200px) {

#chamada{
font-size: 3.5rem;
justify-self: center;
width: 100%;
}

.imagem1{
width: 50%;
}

#textoSecao2 {
width: 80%;

font-size: 1.5rem;

padding-bottom: 5rem;
}

#comoFunciona {
width: fit-content;
gap: .5rem;
padding-left: 4.75rem;
}

.passoAPasso {
margin-right: 1rem;
gap: 1.25rem 0rem;
}

.wrapper {

margin-right: 6.75rem;

}

.wrapper p {
width: 825px;
}

#quinto h1 {
font-size: 3.25rem;
margin: 0 auto;
padding-bottom: 0.938rem;
}

.newsletterBox{
gap: 55px;
}

}

/*border: 2px solid red;*/