/** Definição de configuração padrão **/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap');

:root {
  --branco: white;
  --branco-fundo: rgb(244,247,249);
  --preto: rgb(31,36,36);
  --azul-escuro: rgb(41,49,66);
  --laranja: rgb(223,129,43);
  --vermelho: rgb(199,56,55);
  --titulo-padrao: 38px;
}

body, html{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
  font-family: 'Poppins', sans-serif;
}
body::-webkit-scrollbar {
  width: 6px;
}
body::-webkit-scrollbar-track {
  background: rgb(249 249 249);
}
body::-webkit-scrollbar-thumb {
  background-color: rgb(189 189 189);
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb:hover{
  background-color:#B5B5B5;
}
.container{
  position: relative;
  width: 1105px;
  margin: auto auto;
  box-sizing: border-box;
  text-align: left;
}
h1{
  padding-bottom: 30px;
  padding-top: 25px;
  margin: auto auto;
  width: 700px;
  text-align: center;
  color: rgb(42,46,53);;
  line-height: 1.2;
  font-size: 36px;
  font-weight: 600;
  font-family: 'Poppins', serif !important;
} 
p{
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px;
  color: white;
}
br + br {
  margin-top: 5px !important; /* Ajuste o valor conforme necessário */
}
.colunas{
  display: flex;
  align-items: center;
  gap: 20px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
}
.colunas img{
  width: 100%;
}
.col{
  width: 100% !important;
}
a{
  text-decoration: none;
}
.btn_padrao{
  margin-top: 30px;
  width: 380px;
  text-decoration: none;
  padding: 14px 10px 14px 10px;
  background-color: rgb(255,85,32);
  color: #ffffff;
  font-size: 18px;
  font-family: 'Poppins';
  font-weight: 600;
  text-align: center;
  border-radius: 100px;
  text-transform: none;
}
.btn_padrao:hover{
  cursor: pointer;
  background:#e6400d;
}
.pc{
  display: block !important;
}
.mobile{
  display: none !important;
}


/******** Estilização Geral ********/
.s1{
  height: 785px;
  background-color: var(--branco-fundo);
  background-image: url(images/topo.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.video{
  margin: auto auto;
  width: 600px;
  height: 335px;
  border-radius: 8px;
  background-image: url("https://i.vimeocdn.com/video/1636623415-d5086142434af31d5269311d3ba220c9bf53081d2249bb4663de9f3f560e643d-d?mw=600&mh=337");
  background-size: cover;
}
.logo img{
  padding-top: 10px;
  display: block;
  margin: auto auto;
  width: 48px;
  margin-bottom: 22px;
}
.s1 h1{
  margin: auto auto;
  padding-bottom: 0;
  width: 700px;
  text-align: center;
  color: rgb(42,46,53);;
  line-height: 1.2;
  font-size: 36px;
  font-weight: 600;
  font-family: 'Poppins', serif !important;
}
.s1 p{
  padding-top: 15px;
  padding-bottom: 20px;
  color: rgb(67,78,100);
  width: 650px;
  margin: auto auto;
  text-align: center;
  font-size: 16px;
}
.s1 .btn_padrao{
  margin: auto auto;
  background-color: rgb(46,124,246);
}


.s2{
  height: 647.961px;
  background-color: rgb(255,255,255);
}
.cards{
  display: flex;
  gap: 10px;
}
.item_card{
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
  width: 100%;
  height: 241px;
  border-radius: 12px;
  background-color: rgb(243,246,248);
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
}
.item_card img{
  margin-top: 40px;
}
.item_card p{
  text-align: center;
  color: #263336;
}
.frase_s2{
  padding-top: 50px;
  width: 680px;
  margin: auto auto;
  font-weight: bold;
  text-align: center;
  color: rgb(38,51,54);
  padding-bottom: 20px;
}
.s2 .btn_padrao{
  margin: auto auto;
  width: 350px;
  background-color: white;
  color: rgb(46,124,246);
  font-size: 18px;
  border: 2px solid rgb(211,211,211);
}


.s3{
  display: flex;
  height: 769px;
  background-color: var(--branco-fundo);
  background-image: url(images/fundo_santos.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.s3 h1{
  width: 515px;
  padding-bottom: 48px;
  text-align: left;
  color: white;
  margin-left: 0;
  padding-left: 0;
}
.lista{
  width: 495px;
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}
.s3 .btn_padrao{
  width: 330px;
  border: 2px solid white;
  background-color: transparent;
}

.s4{
  display: flex;
  height: 624.994px;
  background-color: rgb(234,237,239);
}
.s4 img{
  width: 800px;
  margin-right: -70px;
}
.s4 h1{
  width: 425px;
  text-align: left;
}
.s4 p{
  color: rgb(67,78,100);
}
.s5{
  display: flex;
  height: 621px;
  background-color: rgb(234,237,239);
}
.s5 h1{
  width: 100%;
  text-align: left;
  margin-left: 0;
}
.s5 img{
  width: 750px;
}
.s5 li img{
  width: 40px;
}
.s5 ul{
  margin-top: 20px;
}
.s5 ul li{
  display: flex;
  gap: 10px;
  text-decoration: none;
  list-style: none;
  align-items: center;
  margin-bottom: 20px;
}
.s5 ul li p{
  color: rgb(67,78,100);
}
.s5 .btn_padrao{
  width: 300px;
  background-color: white;
  color: rgb(30,136,229);
}


.s9{
  display: flex;
  height: 502px;
  background-color: rgb(234,237,239);
}
.como-funciona{
  display: flex;
  gap: 35px;
}
.box-comofunciona{
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 23px 23px 23px 23px;
  z-index: 36;
  border: none;
  border-radius: 10px;
  border-radius: 12px;
  background-size: cover;
  background-color: white;
  margin-bottom: 50px;
  filter: hue-rotate(0deg) saturate(1) brightness(1) contrast(1) invert(0) sepia(0) blur(0px) grayscale(0) drop-shadow(rgb(219,219,219) 0px 10px 9px);
}
.box-comofunciona img{
  display: block;
  margin: auto auto;
}
.box-comofunciona h3{
  text-align: left;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  font-family: 'Poppins';
  color: rgb(36 36 36);
  line-height: 1.3;
  margin-bottom: 0;
}
.box-comofunciona p{
  margin-top: 5px;
  color: #878787;;
  font-style: normal;
  font-family: 'Poppins';
  font-weight: 400;
  font-size: 14px;
  text-align: left;
}
.caixa_icone{
  display: flex;
  height: 114px;
  width: 78px;
  border: 0px solid rgb(240,243,245);
  filter: hue-rotate(0deg) saturate(1) brightness(1) contrast(1) invert(0) sepia(0) blur(0px) grayscale(0);
  border-radius: 8px;
  background-color: rgb(240,243,245);
}
.caixa_icone img{
  width: 45px;
}
.etapas {
  width: 38px;
  margin-left: -23px !important;
  margin-top: -24px !important;
  position: absolute !important;
  z-index: 88;
}
.btn_comofunciona{
  background-color: white;
  color: rgb(46,124,246);
  width: 410px;
  margin: auto auto;
}
.btn_comofunciona:hover{
  background-color:  rgb(46,124,246);
  color:white;
}

.forma_de_entrega{
  display: flex;
  height: 520px;
  background-color: rgb(249,249,249);
}
.forma_de_entrega .colunas{
  margin-bottom: 50px;
}
.forma_de_entrega img{
  width: 100px;
  margin: auto auto;
  display: block;
}
.forma_de_entrega p{
  padding-top: 13px;
  width: 300px;
  margin: auto auto;
  text-align: center;
  color: rgb(77,88,104);
}

.s10{
  height: 710.982px;
  background-color: rgb(46,124,246);
}
.s10 h1{
  padding-top: 60px;
  padding-bottom: 50px;
  width: 600px;
  margin: auto auto;
  text-align: center;
  color: white;
}

.s11{
  height: 715px;
  background-color: rgb(234,237,239);
}
.s11 h1{
  text-align: left;
  padding-top: 80px;
  padding-bottom: 50px;
  color: var(--azul-escuro);
  line-height: 1.2;
  font-weight: bold;
  margin: 0;
}
.slider_box{
  display:flex;
  flex-wrap:nowrap;
  gap:15px;
}
.img_box{
  border-radius:12px;
  width:400px;
  height:400px;
  object-fit: cover;
}
.entre_coluna{
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  flex-direction: row;
  gap: 20px;
}
.entre_coluna{
  margin-top: 50px !important;
}

.entre_coluna p{
  color: rgb(41,49,66);
  font-weight: 400;
  font-size: 16px;
}
.btn_entre{
  margin: 0 !important;
  background-color: rgb(255,255,255);
  color: rgb(30,136,229);
}
.btn_entre:hover{
  background-color: rgb(30,136,229);
  color: white;
}
.s12{
  height: auto;
  background-color: var(--branco-fundo);
}
.s12 h1{
  padding-top: 60px;
  padding-bottom: 50px;
  width: 800px;
  margin: auto auto;
  text-align: center;
  color: var(--azul-escuro);
  line-height: 1.2;
  font-weight: bold;
}
.content-duvidas{
  width: 650px;
  margin: auto auto;
  padding-bottom:80px;
}
.cabecalho-faq{
  background-color: white;
  padding: 15px 19px 15px 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.faq{
  border-radius: 8px;
  border: 1px solid white;
  margin-bottom: 13px;
  transition: ease-out 0.5s;
}
.faq h3{
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 27px;
  color: #293142;
}
.icon-faq{
  width: 20px;
  height: 20px;
  border-radius: 60%;
  background: white;
  color: white;
  font-size: 13px;
  text-align: center;
  line-height: 1.6;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(90deg);
  }
}
@keyframes rotation-back {
  from {
    transform: rotate(90deg);
  }
  to {
    transform: rotate(0deg);
  }
}
.resposta{
 transition: 1s ease-in-out;
  display: none;
  padding-left: 19px;
  padding-right: 19px;
  padding-bottom: 20px !important;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  background-color: white;
  color: #434E64;
}
.faq:hover .icon-faq{
  cursor: pointer;
}
.cabecalho-faq:hover{
  cursor: pointer;
  color: rgb(46,124,246) !important;
}


.s13{
  height: 717px;
  background-color: rgb(46,124,246);
}
.s13 h1{
  padding-top: 60px;
  padding-bottom: 50px;
  width: 600px;
  margin: auto auto;
  text-align: center;
  color: white;
}
.content-comentarios{
  margin-top: 0px;
  display: flex;
  gap: 30px;
}
.circulo-img img{
  width: 65%;
  border-radius: 60%;
}
.circulo-img{
  background: white;
  width: 120px;
  margin-top:0px;
}
.caixa-comentarios{
  width: 400px;
  padding: 25px;
  z-index: 36;
  border: 0px solid transparent;
  border-radius: 12px;
  background-size: cover;
  background-color: rgb(255,255,255);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  margin-bottom: 0px;
}
.caixa-comentarios h3{
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
}
.caixa-comentarios p{
  color: #525252;
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  margin-top: 10px;
  margin-bottom: 32px;
}
.estrelas-coment{
  bottom: 20px;
}

.s14{
  height: 724.977px;
  background-color: rgb(255,255,255);
  background-image: url(images/fundo_anterodape.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.s14 h1{
  padding-top: 60px;
  padding-bottom: 450px;
  width: 910px;
  margin: auto auto;
  text-align: center;
  color: var(--branco);
  font-size: 48px;
  line-height: 1.3;
}
.btn_s14{
  width: 325px;
  margin: auto auto;
  background-color: rgb(64,196,116) !important;
}
.btn_s14:hover{
  background-color: white !important;
  color: rgb(20, 70, 20);
}
/******** Rodapé ********/
.rodape{
  display: flex;
  margin-top: 0px;
  height: 310px;
  background-color: rgb(0,0,0);
}
.content-rodape{
  padding-top: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 30px;
}
.content-rodape img{
  width: 11%;
}
.content-rodape h1{
  font-family: "Playfair Display" !important;
  font-style: normal;
  font-weight: 400;
  color: rgb(62,62,62);
  font-size: 53px;
  text-align: right;
  margin: 0px;
  margin-right: 70px;
}
.linha-rodape{
  border-bottom: 1px solid rgb(28,28,27);
}
.content2-rodape{
  margin-top: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.links p{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  text-decoration-line: underline;
  color: rgb(179,179,179);
  margin: 6px;
}
.texto-rodape{
  width: 680px;
  color: rgb(57,57,57);
  font-style: normal;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.3;
}
