@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;
}

.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: 100%;
}

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

/* Break */

.yellow{
  background-color: #e9b231;
  text-align: center;
  color: #0a1857;
}

.detail{
  font-weight: 600;
  
}

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

/* Fases */

.fases{
  background: url("images/Fundo-Fases.webp");
  background-repeat: no-repeat;
  color: white;
  padding: 7% 16% 7% 16%;
}

.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: 10% 90% ;
}

.fase{
  padding-bottom: 30px;
  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;
}

/* Break */ 

.crescer {
  font-weight: 800;
  font-size: 27px;
  padding: 1% 2%;
  
}

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

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

.break{
  padding-bottom: 40px;
}


/* Main Section */

.mainSection{
  background: url("images/Fundo-mainSection.webp");
  background-repeat: no-repeat;
  color: white;
  padding: 8% 16%;
}

.align{
  text-align: center;
}

.equipe{
  width: 70%;
}

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

.quem{
  position: relative;
  bottom: 15vh;
  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%;
}

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

.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: 28px;
}

.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%;
  text-decoration: underline;
}

.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);
}

/* Animações */

@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: 48px;
    }
    
    .paragraph{
      font-size: 20px;
    }
  
    input{
      font-size: 12px;
    }
  
    .send{
      font-size: 25px;
    }
  
    /* Break */
  
    .atention{
      font-size: 22px;
    }
  
    /* Fases */
    .span{
      font-size:  45px;
    }
  
    .titleTempo{
      font-size: 45px;
    }
  
    .titleConsultoria{
      font-size: 33px;
    }
  
    .fase{
      font-size: 28px;
    }
    
    .number{
      font-size: 80px;
    }
    
    .justify {
      font-size: 22px;
    }
    
    /* Break */ 
    
    .crescer {
      font-size: 30px;
    }
    
    .escolha{
      font-size: 42px;
    }
    
    .pergunta{
      font-size: 33px;
    }
  
    /* Main Section */
  
    .equipe{
      width: 95%;
    }
  
    .quem{
      font-size: 60px;
    }
  
    .description{
      font-size: 25px;
    }
  
    .gratuita{
      font-size: 38px;
      padding-top: 100px;
      padding-bottom: 50px;
    }
  
    .characteristics{
      font-size: 27px;
    }
  
  
     /* Break */
    
    .decidi{
      font-size: 33px;
      letter-spacing: 2px;
    }
    .experimentar{
      padding: 1% 2%;
      font-weight: 800;
      font-size: 25px;
    }
  
    /* footer */
  
    .fundo{
      font-size: 10px;
    }
    .logopicturesmall{
      width: 10%;
      padding-right: 10px;
    }
    
    .logosmall{
      width: 10%;
    }
  
    /* Whatsapp */
  
    .teste{
      position:fixed;
      width:60px;
      height:60px;
      bottom:30px;
      right:30px;
      z-index:100;
      margin: 5px;
    }

}

@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");
  }

  .picture{
    animation:nudgeup 3s linear infinite;
  }
  .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;
  }
  
  .paragraph{
    font-size: 15px;
  }

  input{
    font-size: 12px;
  }

  .send{
    font-size: 14px;
  }

  .header{
    grid-template-areas: 
    "picture"
    "formulario";
    grid-template-columns: 1fr;
  }


  .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: end;
    max-width: 40%;
  }



  /* Break */

  .atention{
    font-size: 13px;
  }

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

  .titleTempo{
    font-size: 25px;
  }

  .titleConsultoria{
    font-size: 20px;
  }

  .fase{
    font-size: 16px;
  }
  
  .number{
    font-size: 55px;
  }
  
  .justify {
    font-size: 13px;
  }
  
  /* Break */ 
  
  .crescer {
    font-size: 16px;
  }
  
  .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;
  }
  .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: 10%;
    padding-right: 10px;
  }
  
  .logosmall{
    width: 10%;
  }

  /* Whatsapp */

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

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

  .mainSection{
    background: url("images/Fundo-mainSection-Mobile.webp");
    padding: 8% 8%;
  }

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

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

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

  .span{
    font-size:  30px;
  }

  .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%;
  }
}