@charset "utf-8";


/* Remover espaço em brando lateral no mobile */
html, body{
    overflow-x: hidden;
    font-family: 'Barlow';
    background-color: white;
    text-decoration:none;
    scroll-behavior: smooth;
}
:target {
  scroll-margin-top: .8em;
}
a{
  text-decoration: none !important;
}
* {
  padding:0;
  margin:0;
}

:root{
  --bege-claro: #99926b;
  --bege-escuro: #8a8253;

  --vinho: #6b2314;
  --laranja: #b95640;
}


/**** Primeira sessao ***/
.s1{
  height: 1150px;
  background: url(../images/bloco01-bg1.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: -320px;
}
.container-s1{
  margin: auto auto;
  width: 90vw;
}
.grid-col-s1{
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 50% 50%;
  align-items: center;
  justify-content: center;
}
.col1-s1 img{
  display: block;
  margin: 30px 45px 0px auto;
}

.botao-matricular{
  margin: -30px 245px 0px auto;
  display: flex;
  justify-content: space-between;
  background: #009e64;
  width: 270px;
  border-radius: 60px;
  border: solid 4px #00de8b;
  border-bottom: solid 7px #00de8b;
  color: white;
  font-size: 20px;
  box-shadow: 0rem 0rem 3rem 0.2rem #00de8b99;
  transition: all 0.3s ease-in-out;
}
.col1-botao{
  margin-left: 10px;
  justify-content: center;
  align-items: center;
  display: grid;
}
.col2-botao{
  background: #008f59;
  padding: 10px;
  padding-left: 15px;
  border-top-right-radius: 60px;
  border-bottom-right-radius: 60px;
}
.botao-matricular:hover{
  cursor: pointer;
  box-shadow: 0rem 0rem 3rem 0.2rem #00b370;
}
.recado{
  color: #4f5048;
  width: 250px;
  font-weight: 400;
  font-size:18px;
  margin: 13px auto 0px 23rem;
}


/**** Vídeo sobre o curso ***/
.sessao-video-lista{
    width: 600px;
    height: 350px;
    display: block;
    margin: auto auto;
    z-index: 99;
    position: relative;
}
.sessao-video-lista iframe{
    border-radius: 10px;
}

/**** Segunda sessao ***/
.s2{
  border-top: 13px solid #8e824e;
  height: 640px;
  background-color: #9c9368;
      margin-top: -37px;
}
.grid-col-s2{
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 50% 50%;
  align-items: center;
  justify-content: center;
}
.col1-s2 img{
  display: block;
  margin: -43px -93px 0px auto;
}
.col2-s2 p{
  float: left;
  margin-left: 120px;
  width: 360px;
  font-size: 20px;
  color: white;
}
.col2-s2 span{
  font-size: 17px;
  color: #564e24;
}
.img-titulo2 img{
  padding-top: 5rem;
  display: block;
  margin: auto auto;
}

/**** Terceira sessao ***/
.s3{
  background-color: #9c9368;
}
.grid-col-s3{
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 50% 50%;
  align-items: center;
  justify-content: center;
}
.conteudo-s3 {
  margin-right: -7rem;
  float: right;
  width: 70%;
}

.conteudo-s3 {
  display: 1;
  margin-right: -7rem;
  float: right;
  width: 25vw;
}
.conteudo-s3 p{
  margin-bottom: 1rem;
  color: white;
}
.paragrafo-maior{
  color: #5F5627 !important;
  font-weight: 700;
}

.botao-matricular2 {
  margin-top: 4rem;
  display: flex;
  justify-content: space-between;
  background: #009e64;
  width: 270px;
  height: 40px;
  border-radius: 60px;
  border: solid 4px #00de8b;
  border-bottom: solid 7px #00de8b;
  color: white;
  font-size: 20px;
  box-shadow: 0rem 0rem 3rem 0.2rem #00de8b99;
  transition: all 0.3s ease-in-out;
}
.link{
  text-decoration: none !important;
}
.col1-botao2{
  text-decoration: none !important;
  margin-left: 10px;
  justify-content: center;
  align-items: center;
  display: grid;
}
.col2-botao2{
  background: #008f59;
  padding: 10px;
  padding-left: 15px;
  border-top-right-radius: 60px;
  border-bottom-right-radius: 60px;
}
.botao-matricular2:hover{
  cursor: pointer;
  box-shadow: 0rem 0rem 3rem 0.2rem #00b370;
}

/**** Quarta sessao ***/
.s4{
  border-top: 13px solid #8e824e;
  background-color: white;
}
.imagem-navio img{
  width: 35vw;
  padding-top: 5rem;
  padding-bottom: 5rem;
  display: block;
  margin: auto auto;
}
.grid-4colunas{
  margin: auto auto;
  width: 65vw;
  padding-bottom: 4rem;
  color: #9D9369;
  font-weight: 600;
}
.primeira-linha{
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 25% 25% 25% 25%;
  border-bottom: 1px solid #d1d1d1;
}
.col1-s4{
  border-right: 1px solid #d1d1d1;
  padding: 1rem;
}
.col2-s4{
  border-right: 1px solid #d1d1d1;
  padding: 1rem;
}
.col3-s4{
  border-right: 1px solid #d1d1d1;
  padding: 1rem;
}
.col4-s4{
  padding: 1rem;
}
.segunda-linha{
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 25% 25% 25% 25%;
}
.col5-s4{
  border-right: 1px solid #d1d1d1;
  padding: 1rem;
}
.col6-s4{
  border-right: 1px solid #d1d1d1;
  padding: 1rem;
}
.col7-s4{
  border-right: 1px solid #d1d1d1;
  padding: 1rem;
}
.col8-s4{
  padding: 1rem;
}

/**** Quinta sessao ***/
.s6{
  background: white;
}
.container-s6{
  margin: auto auto;
  width: 65vw;
}
.grid-col-s6{
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 50% 50%;
}

.col1-s6 h1{
  margin-top: 6rem;
  margin-right: 2rem;
  float: right;
  width: 70%;
  color:#8E824E;
}

/**** Sexta sessao ***/
.s7{
  margin-top: -10rem;
  border-top: 13px solid #8e824e;
  background-color: #9c9368;
}

.grid-col-s7{
  display: grid;
  grid-template-columns: 50% 50%;
}
.col1-s7 img{
  width: 26vw;
  margin-top: -2rem;
  float: right;
}
.container-s7{
  margin: auto auto;
  width: 56vw;
}
.linha1-s7{
  margin-top: 2rem;
  display: grid;
  grid-gap: 3rem;
  grid-template-columns: 33% 33% 33%;
}
.colun7{
  background: #9C9368;
  border: solid 2px #8E824E;
  border-radius: 10px;
  box-shadow: 0rem 0rem 2rem 1rem #0000001c;
}
.colun7 h2{
  font-size: 1.4rem;
  text-transform: uppercase;
  padding: 2rem;
  color: #5F5627;
}
.colun7 p{
  border-top: solid 2px #8E824E;
  padding: 1rem 2rem 1rem 2rem;
  font-size: 16px;
  text-transform: uppercase;
  color: white;
}
.colun7 i{
  font-size: 10px;
}

.linha2-s7{
  margin-top: 3rem;
  display: grid;
  grid-gap: 3rem;
  grid-template-columns: 33% 33% 33%;
}

/**** Oitava sessao ***/
.s8{
  margin-top: -5rem;
  padding-top: 15rem;
  border-top: 13px solid #8e824e;
  background-image: url(../images/bloco05-bg.jpg);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
  height: 45rem;
}
.grid-col-s8{
  margin: auto auto;
  width: 75vw;
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: 50% 50%;
}
.col1-s8 img{
  margin-right: 0;
  width: 28vw;
  float: right;
}
.col2-s8{
  display: flex;
}
.cont-s8{
  width: 350px;
}
.cont-s8 h1{
  margin-top: 70px;
  color: #942c2c;
  text-transform: uppercase;
}
.cont-s8 h3{
  margin-top:2rem;
  text-transform: uppercase;
  color: #be5647;
}
.cont-s8 p {
  font-weight: 500;
  color: #544526;
  margin-top: 2rem;
}

/**** Nona sessao ***/
.s9{
  background-color: white;
  background-image: url(../images/bloco05-borda-min.png);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: contain;
  height: 32vw;
}
.cont-s9{
  padding-top: 6rem;
  margin: auto auto;
  width: 30vw;
}
.cont-s9 p{
  color: #9f9770;
  padding-top: 1rem;
  font-size: 1.1rem;
}
.cont-s9 h2 {
  padding-top: 1rem;
  color: #d2553e;
}

/**** Décima sessao ***/
.s10{
  background-color: white;
  width: 48vw;
  margin: auto auto;
}
.bonus-novo{
    margin: auto auto;
    display: block;
    width: 90%;
}
.bonus-mobile{
    margin: auto auto;
    display: none;
    width: 90%;
}

.grid-col-s10{
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.prof-felipe{
  display: flex;
  align-content: center;
  align-items: center;
}
.prof-felipe img{
  width: 10vw;
}
.prof-felipe h2 {
  margin-left: 1rem;
  font-weight: 500;
  color: #d4bd61;
  text-transform: uppercase;
}
.prof-felipe b{
  color: #887626;
}

.col2-s10{
  margin-top:3rem;
  display: flex;
  align-items: center;
  color: #d3543f;
}
.conteudo-s10 p{
  padding-bottom: 1rem;
  color: #7b1d0c;
  font-size: 1.1rem;
}

/**** Décima primeira sessao ***/
.s11{
  border-top: 13px solid #8e824e;
  background-image: url(../images/bloco05-bg.jpg);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
  height: 100vh;
  overflow-y: hidden;
  position: relative;
  z-index: 0;
  overflow-x: hidden;
}
.conteudo-s11{
  padding-top: -5rem;
  margin: auto auto;
  width: 60vw;
}
.conteudo-s11 img {
  display: block;
  margin: 0px 0px 0px auto;
  width: 15vw;
  position: relative;
  z-index: 99;
}

.carrosel-bonus h1{
  color: #962c2d;
  margin-top: -12rem;
  width: 200px;
}
.box{
    width: 250px;
    height: 20rem;
    border-radius: 10px;
    overflow: hidden;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 40px;
    margin-bottom: 40px;
    box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.5);
}
.box-sem-sombra{
  box-shadow: none !important;
}
.slide-img{
    height: 450px;
    position: relative;
}

.slide-img img{
    width: 100%;
    height: 75%;
}

/**** Décima segunda sessao ***/
.grid-col-s12{
  width: 45vw;
  margin: auto auto;
  display: grid;
  grid-template-columns: 50% 50%;
  background: #009D8F;
  border-radius: 10px;
  border: solid 3px #01b7a8;
  text-transform: uppercase;
  margin-bottom:-18rem;
  position: relative;
  z-index: 99;
}
.container-s12{
  width: 45vw;
  margin: auto auto;
}

.botao-matricular3 {
    margin: 0px 85px 0px auto;
    margin-top: 16rem;
    display: flex;
    justify-content: space-between;
    background: #009e64;
    width: 270px;
    height: 40px;
    border-radius: 60px;
    border: solid 4px #00de8b;
    border-bottom: solid 7px #00de8b;
    color: white;
    font-size: 20px;
    box-shadow: 0rem 0rem 3rem 0.2rem #00de8b99;
    transition: all 0.3s ease-in-out;
    z-index: 99;
    position: relative;
}

.col1-botao3{
  text-decoration: none !important;
  margin-left: 10px;
  justify-content: center;
  align-items: center;
  display: grid;
}
.col2-botao3{
  background: #008f59;
  padding: 10px;
  padding-left: 15px;
  border-top-right-radius: 60px;
  border-bottom-right-radius: 60px;
}
.botao-matricular3:hover{
  cursor: pointer;
  box-shadow: 0rem 0rem 3rem 0.2rem #00b370;
}

.preco-final{
  display: block;
  padding-top: 1rem;
  margin: auto auto;
}
.col1-s12{
  padding: 4rem;
  color: white;
}
.col1-s12 h1{
  text-align: center;
}
.col1-s12 p{
  margin-top: 1rem;
}
.col1-s12 i{
  color: #01443d;
}
.col2-s12{
  padding: 4rem;
  color: white;
  border-radius: 10px;
  border: solid 3px #01776b;
}
.col2-s12 h1{
  text-align: center;
}
.col2-s12 p{
  margin-top: 1rem;
  text-align: center;
}
.col2-s12 i{
  color: #01443d;
}

/**** Décima terceira sessao ***/
.s13{
  height: 700px;
  background-image: url(../images/bloco09-verde.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
  color: #01443d;
}
.recomendacoes-pc{
  margin: auto auto;
  display: block;
}
.recomendacoes-mobile{
  margin: auto auto;
  display: none;
}
.s13 h1{
  padding-top: 200px;
  padding-bottom: 1rem;
  text-align: center;
  color: #01443d;
}
.grid-col-s13{
  width: 50vw;
  margin: auto auto;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 25% 25% 25% 25%;
}

/**** Décima quarta sessao ***/
.s14 h1{
  color: #9c9368;
}

.depoimentos{
  margin-top: 40px;
  overflow-y: hidden;
}
.video-depoimento{
    margin: auto auto;
    width: 50vw;
    height: 400px;
}
.titulo-depoimentos h1{
    text-align:center;
    padding-top: 5rem;
    padding-bottom: 1rem;
    margin-bottom: 0rem;
}
#main{
  padding-top: 80px;
  background-color: #ffffff;
  overflow-y: hidden;
}
.showcase-box{
  width: 430px;
  height: 250px;
  box-shadow: 5 15px 20px rgb(0,0,0,0.3);
  border-radius: 10px;
  margin: 0px 20px 10px 20px;
  overflow-y: hidden;
}


/**** Décima quinta sessao ***/
.s15 img{
  width: 8vw;
  padding-top: 4rem;
  display: block;
  margin: auto auto;
}

.titulo-faq{
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.titulo-faq h1{
  font-weight: bold;
  padding-top: 90px;
  font-size: 60px;
  color: #585230 !important;
  text-align: center;

}
.paragrafo-faq p{
  text-align: center;
  font-size: 20px;
  color: #9f9772 !important;
  margin-bottom: 40px;
}

.container-faq{
  width: 700px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 10rem;
}
summary {
  font-size: 1.25rem;
  font-weight: 600;
  color: #9c9368;
  padding: 1rem;
  margin-bottom: 1rem;
  outline: none;
  border-radius: 0.25rem;
  text-align: left;
  cursor: pointer;
  position: relative;
  border-bottom: 2px solid #e7e7e7;
}
details > summary::after {
  position: absolute;
  right: 20px;
}
details[open] > summary::after {
  position: absolute;
  right: 20px;
}
details > summary::-webkit-details-marker {
  display: none;
}
details[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}
@keyframes sweep {
  0%    {opacity: 0; margin-top: -10px}
  100%  {opacity: 1; margin-top: 0px}
}

.faq__content{
  color: #9c9368;
  margin-left: 30px;
  font-size: 1.1rem;
}


/**** Décima sexta sessao ***/
.s16{
  border-top: solid 8px #8e8350;
  border-bottom: solid 8px #8e8350;
  height: 13vw;
  background: #9c9368;
}
.grid-col-s16{
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 50% 50%;
}
.col1-s16 img{
  margin-top: -8rem;
  float: right;
}
.col2-s16{
  display: flex;
  align-items: center;
}
.conteudo-s16{
  color: white;
  width: 400px;
}

.conteudo-s16 h1{
  text-transform: uppercase;
  font-weight: 600;
}
.conteudo-s16 p{
  margin-top: 1rem;
}

/**** Rodapé ***/

.rodape{
  margin-top: 3rem;
  margin-bottom: 3rem;
  text-align: center;
  font-weight: 500;
  color: #707070;
}
