@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;600;700;800&display=swap');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

p{
  word-break: break-word;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

body{
  font-family: 'Kanit', sans-serif;
  position: absolute;
}

/* Header */
.header{
  display: grid;
  grid-template-columns: 50% 50%;
  padding: 5% 7% 4% 7%;
  background: url("images/Fundo-header.webp");
  /* background-repeat: no-repeat; */
  background-position: center center;
  background: url("images/Fundo-header.webp") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.title{
  color: white;
  font-size: 42px;
  font-weight: 500;
  padding-bottom: 55px;
}

.paragraph{
  font-size: 18px;
  padding-bottom: 55px;
  letter-spacing: 1px;
}

input{
  width: 90%;
  height: 50px;
  font-family: 'Kanit', sans-serif;
  padding-left: 10px;
}

input:nth-child(n){
  margin-bottom: 8px;
}

input[type=button]{
  max-width: 100%;
}

.send{
  font-weight: 800;
  font-size: 22px;
  background-color: #1db11b;
  color: white;
}

.picture{
  display: grid;
  justify-self: center;
  animation:nudge 3s linear infinite;
}
.logo{
  max-width: 90%;
  align-self: center;
  position: relative;
}

.logoname{
  justify-self: center;
  max-width: 100%;
  align-self: center;
}

/* Break */

.yellow{
  text-align: center;
  color: #0a1857;
  background: url('images/bg-gratuita.jpg');
  background-repeat: repeat;
}

.detail{
  font-weight: 600;
  
}

.atention{
  font-size: 19px;
  padding: 45px 0px;
  font-weight: 300;
  letter-spacing: 10px;
}

/* Fases */

.fases{
  background: url("images/Fundo-Fases.webp");
  background-repeat: no-repeat;
  color: white;
  padding: 11% 16% 0% 16%;
  background-position: top center;
  background: url("images/Fundo-Fases.webp") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.span{
  font-size:  40px;
}

.titleTempo{
  font-size: 40px;
}


.titleConsultoria{
  font-size: 30px;
  padding-bottom: 70px;
  font-weight: 200;
}

.yellowText{
  color: #e6af2e;
}

.twoColumns{
  display: grid;
  grid-template-columns: 15% 85%;
}

.fase{
  padding-bottom: 20px;
  font-size: 25px;
}

.number{
  align-self: center;
  position: relative;
  bottom: 40px;
  font-size: 75px;
}

.justify {
  font-size: 19px;
  border-bottom: 4px solid #e5af2d;
  padding-bottom: 50px;
  margin-bottom: 100px;
  font-weight: 300;
}

.justify.last {border: none;}

/* Break */ 

.crescer {
  font-weight: 800;
  font-size: 27px;
  padding: 0.5% 4%;
}

.escolha{
  font-size: 40px;
  color: #040a25;
  padding-top: 30px;
  padding-bottom: 30px;
  letter-spacing: 3px;
}

.pergunta{
  font-size: 30px;
  color: #040a25;
  margin: 0px 10%;
  padding-bottom: 50px;
  letter-spacing: 3px;
}

.break{
  padding-bottom: 40px;
}


/* Main Section */

.mainSection{
  background: url("images/Fundo-mainSection.webp") #000;
  background-repeat: no-repeat;
  background-position: top center;
  color: white;
  padding: 8% 16% 0% 16%;
  background: url("images/Fundo-mainSection.webp") #000 no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.align{
  text-align: center;
}

.equipe{
  width: 70%;
}

.description{
  font-weight: 300;
  font-size: 22px;
}

.quem{
  position: relative;
  bottom: 25vh;
  font-size: 55px;
  font-weight: 600;
}


.paragraphPrincipal:nth-child(n){
  padding-bottom: 30px;
}

.paragraphPrincipal:nth-child(4){
  /*padding-bottom: 0px;*/
  margin-left: 3%;
  margin-right: 3%;
}

.paragraphPrincipal.last {
    padding-bottom: 180px;
}

.gratuita{
  font-size: 35px;
  padding-top: 240px;
  padding-bottom: 70px;
}

.gratuita {
    border-top: 3px solid #e6af2e;
}

.characteristics{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, auto));
  gap: 60px;
  font-size: 24px;
  font-weight: 300;
}

/* Break */

.breaklast{
  color: #040a25;
  padding-bottom: 40px;
}

.decidi{
  font-size: 30px;
  padding-top: 30px;
  padding-bottom: 3%;
  letter-spacing: 2px;
  font-weight: 200;
}

.experimentar{
  padding: 1% 2%;
  font-weight: 800;
  font-size: 22px;
}

.button{
  background-color: #1db11b;
  color: white;
  text-decoration: none;
  border-radius: 20px;
}

.button:hover{
  background-color: white;
  color: #1db11b;
}

/* Footer */
.fundo{
  background: url("images/Fundo-footer.webp");
  background-repeat: no-repeat;
  color: white;
  text-align: center;
  font-weight: 300;
  padding: 0px 15%;
  background: url("images/Fundo-footer.webp") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.termos{
  padding-top: 100px;
  padding-bottom: 20px;
}

.politica{
  padding-bottom: 65px;
}

.pictures{
  padding-bottom: 100px;
}

.logopicturesmall{
  width: 5%;
  padding-right: 10px;
}

.logosmall{
  width: 9%;
  position: relative;
}

/* Whatsapp */

.teste{
  position:fixed;
  width:60px;
  height:60px;
  bottom:40px;
  right:40px;
  z-index:100;
}

.whatsapp{
  height: 60px;
  width: 60px;
}


/* Javascript */

.js .js-scroll{
  opacity: 0;
  transform: translate3d((-30px, 0, 0));
  transition: .3s;
}

.js .js-scroll.ativo{
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* Animacoes */

@keyframes nudge {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(20px, 0);
  }
  
  80% {
    transform: translate(-20px, 0);
  }
}

@keyframes nudgeup {
  0%, 100% {
    opacity: 1;
  }
  50%{
    opacity: 0;
  }
}

@media(min-width:1440px){
    /* Header */
    .title{
      font-size: 54px;
      line-height: 1;
      font-weight: 600;
    }
    
    .paragraph{
      font-size: 20px;
    }

    .yellowText.paragraph {
      padding-bottom: 20px;
      font-weight: 300;
      max-width: 90%;
    }

    #formulario .form input { height: 48px; } 
    #formulario .form .send { width: 92%; margin-top: 7px; }

    input{
      font-size: 12px;
    }
  
    .send{
      font-size: 25px;
      border: none;
      cursor: pointer;
    }
  
    /* Break */
  
    .atention{
      font-size: 22px;
    }
  
    /* Fases */
    .span{
      font-size:  45px;
    }
  
    .titleTempo{
      font-size: 45px;
    }

  .titleTempo span {
    margin: 0px 0px 0px 30px;
}
  
    .titleConsultoria{
      font-size: 32px;
      text-transform: uppercase;
    }
  
    .fase{
      font-size: 29px;
      text-transform: uppercase;
    }
    
    .number{
      font-size: 108px;
      /* top: -59px; */
    }
    
    .justify {
      font-size: 23px;
      font-weight: 100;
    }
    
    /* Break */ 
    
    .crescer {
      font-size: 32px;
    }
    
    .escolha{
      font-size: 50px;
      font-weight: 600;
    }
    
    .pergunta{
      font-size: 33px;
      line-height: 1;
    }
  
    /* Main Section */
  
    .equipe{
      width: 95%;
    }
  
    .quem{
      font-size: 65px;
    }
  
    .description{
      font-size: 23px;
      position: relative;
      position: relative;
      bottom: 25vh;
    }
  
    .gratuita{
      font-size: 41px;
      padding-top: 180px;
      padding-bottom: 110px;
      text-transform: uppercase;
    }
  
    .characteristics{
      font-size: 23px;
      font-weight: 200;
      line-height: 1.3;
      position: relative;
      bottom: 25vh;
    }

  .characteristics img {
    margin: 0px 0px 10px 0px;
}
  
  
     /* Break */
    
    .decidi{
      font-size: 33px;
      letter-spacing: 2px;
    }
    .experimentar{
      padding: 1% 2%;
      font-weight: 800;
      font-size: 25px;
    }
  
    /* footer */
  
    .fundo{
      font-size: 16px;
      font-weight: 100;
    }
    .logopicturesmall{
      width: 5%;
      padding-right: 10px;
    }
    
    .logosmall{
      width: 9%;
      top: -11px;
    }
  
    /* Whatsapp */
  
    .teste{
      position:fixed;
      width:60px;
      height:60px;
      bottom:30px;
      right:30px;
      z-index:100;
      margin: 5px;
    }

}

@media(max-width:1399px){
  .title { font-size: 48px; line-height: 1; font-weight: 600; }
  .yellowText.paragraph { padding-bottom: 20px; font-weight: 300; max-width: 90%; } 
  .send { font-size: 25px; border: none; cursor: pointer; width: 93%; } 
  .titleConsultoria { font-size: 33px; } 
  .titleTempo { font-size: 35px; } 
  .titleTempo span { margin: 0px 0px 0px 55px; position: relative; } 
  .pergunta { font-size: 29px; line-height: 1; } 
  .formulario .send {margin: 7px 0px 0px 0px;-webkit-appearance: none;-webkit-border-radius: none;border-radius: 10px;}
}

@media(max-width:1300px){

  .mainSection{
    background: url("images/Fundo-mainSection-Tela.webp");
  }

  /* fases */
  .fases{
    background: url("images/Fundo-Fases-Tela.webp");
  }
}



@media(max-width:1090px){
  .send{
    font-size: 18px;
  }
}

@media(max-width: 900px){
  /* header */

  .header{
    background: url("./images/Fundo-header-Mobile.webp");
    padding: 5% 7% 15% 7%;
  }

  .picture{
    animation: none;
  }
  .logo{
    align-self: end;
  }

 .send{
  font-size: 12px;
  }
  input[type=button]{
  width: 100%;
  }

  .mainSection{
    background: url("images/Fundo-mainSection-Tablet.webp");
  }

  /* fases */
  .fases{
    background: url("images/Fundo-Fases-Tablet.webp");
    padding: 7% 8% 7% 8%;
  }

  .twoColumns{
    grid-template-columns: 20% 80% ;
  }
  
}

@media(max-width: 550px){

  /* Header */
  .title{
    font-size: 26px;
    padding-bottom: 30px;
  }
  
  .paragraph{
    font-size: 15px;
  }

  input{
    font-size: 12px;
    width: 96%;
  }

  .send{
    font-size: 14px;
  }

  .header{
    grid-template-areas:
      "picture"
      "formulario";
    grid-template-columns: 1fr;
    background: url(images/Fundo-header.webp) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }


  .formulario{
    grid-area: formulario;
  }

  .picture{
    grid-area: picture;
    justify-self: center;
    grid-template-columns: 1fr 1fr;
    padding-bottom: 30px;
  }

  .logo{
    max-width: 40%;
    justify-self: end;
  }
  
  .logoname{
    justify-self: start;
    align-self: center;
    max-width: 50%;
    bottom: 30px;
    margin-left: 10px;
  }



  /* Break */

  .atention{
    font-size: 17px;
    padding: 30px 0px;
  }

  /* Fases */
  .span{
    font-size:  25px;
  }

  .titleTempo{
    font-size: 25px;
    padding: 25px 0px 0px 0px;
  }

  .titleConsultoria{
    font-size: 20px;
    padding-bottom: 50px;
  }

  .fase{
    font-size: 16px;
  }
  
  .number{
    font-size: 55px;
  }
  
  .justify {
    font-size: 13px;
    margin-bottom: 40px;
  }
  
  /* Break */ 
  
  .crescer {
    font-size: 16px;
    padding: 13px 50px;
  }
  
  .escolha{
    font-size: 28px;
  }
  
  .pergunta{
    font-size: 15px;
  }

  /* Main Section */

  .equipe{
    width: 95%;
  }

  .quem{
    font-size: 30px;
    bottom: 5vh;
  }

  .description{
    font-size: 15px;
  }

  .gratuita{
    font-size: 20px;
    padding-top: 100px;
    padding-bottom: 50px;
  }

  .characteristics{
    font-size: 15px;
  }

  .characteristic{
    display: grid;
    grid-template-columns: 1fr;
  }

  .paragraphPrincipal.last { padding-bottom: 60px; } 
  
  .characteristic img { margin: 0px 0px 15px 0px; }
  .icon{
    justify-self: center;
  }


   /* Break */
  
  .decidi{
    font-size: 22px;
    letter-spacing: 2px;
  }
  .experimentar{
    padding: 1% 2%;
    font-weight: 800;
    font-size: 12px;
  }

  /* footer */

  .fundo{
    font-size: 10px;
  }
  .logopicturesmall{
    width: 20%;
    padding-right: 10px;
  }
  
  .logosmall{
    width: 30%;
    bottom: 13px;
  }

  /* Whatsapp */

  .teste{
    position:fixed;
    width:60px;
    height:60px;
    bottom:30px;
    right:30px;
    z-index:100;
    margin: 5px;
  }
}

@media(max-width:430px){
  .send{
    width: 100%;
    font-size: 16px;
    }

  .mainSection{
    background: url("images/Fundo-mainSection-Mobile.webp");
    padding: 8% 8%;
    background: url(images/Fundo-mainSection.webp) #000 no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .gratuita{
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .experimentar{
    padding: 4.7% 6%;
    font-weight: 800;
    font-size: 12px;
    top: 10px;
    position: relative;
  }

  .fases{
    background: url("images/Fundo-Fases-Mobile.webp");
    padding: 7% 4% 7% 4%;
    background: url(images/Fundo-Fases.webp) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .span{
    font-size:  30px;
    display: none;
  }

  .number{
    position: relative;
    font-size: 40px;
    bottom: 40px;
  }

  /* Footer */
  .termos{
    padding-top: 50px;
    padding-bottom: 20px;
  }
  .politica{
    padding-bottom: 45px;
  }
  
  .pictures{
    padding-bottom: 5px;
  }
}

@media(max-width: 280px){
  .quem{
    bottom: 10vh;
  }

  .experimentar{
    padding: 3% 2%;
  }
}

@media (max-width: 700px) and (orientation: landscape) {

  .title { font-size: 24px; } 
  .header { background: url(images/Fundo-header.webp) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 
  .fases { background: url(images/Fundo-Fases.webp) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.yellowText.paragraph { font-size: 16px; } 
.logoname { top: 20px; position: relative; max-width: 80%; } 
.logo { max-width: 80%; justify-self: center; } 
.titleTempo span { display: none; } 
.justify { margin-bottom: 50px; } 
.characteristics { font-size: 20px; top: 10px; } 
.characteristics img { margin-bottom: 10px; } 
.mainSection {padding-bottom: 60px;background: url(images/Fundo-mainSection.webp) #000 no-repeat center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;} 
.logopicturesmall { width: 15%; } 
.logosmall { width: 20%; bottom: 20px; }

}