/* -----------------------------RESPONSIVIDADE DO SITE----------------------------- */

/* SMARTPHONES */
@media screen and (min-width: 390px) and (max-width: 414px){
  
  .logolaboral{
    width: 380px;
  }
  
    .cards{
      margin:auto;
      width: 410px;
      height: 5300px;
      text-align: center;
      justify-content: center;
      display: grid;
      grid-template-columns: 400px;
      grid-template-rows: 800px 500px 600px 600px 700px 650px 650px 600px;
      row-gap: 40px;
      margin-top: 70px;
      margin-left: -20px;
      margin-bottom: 100px;
    }
  
    .highlights{
      margin: auto;
      width: 410px;
      height: 1000px;
      text-align: center;
      justify-content: center;
      display: grid;
      grid-template-columns: 350px;
      grid-template-rows: 0.2fr 290px 290px 290px 290px 290px 290px;
      row-gap: 90px;
      margin-top: 10px;
      margin-bottom: 150px;
  
    }
  
    .hg-title{
      grid-column-start: 1;
      grid-column-end: 2;
      margin-top: 20px;
    }
  
    .app {
      margin-top: -50px;
      margin-bottom: 250px;
      width: 412px;
      height: 500px;
      text-align: center;
      justify-content: center;
      display: grid;
      grid-template-columns: 412px;
  
    }
    
    .img-app img{
      position: relative;
      width: 412px;
    }
  
    .testimonials {
      margin-left: -100px;
    }
  
    hr {
      border: 0;
      height: 2px;
      width: 100%;
      margin-left: 3px;
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.178), rgba(46, 46, 46, 0.75), rgba(0, 0, 0, 0.178));
    }
  
    #cta img{
      width: 100%;
    }
  

    .grafico img{
      width: 400px; 
    }

  }
  
  /*------------------------------------------- SMARTPHONES COM TELAS PEQUENAS -------------------------------------------*/
  
  @media screen and (min-width: 360px) and (max-width: 389px){
    
    .logolaboral{
      width: 340px;
    }
  
    .cards{
      margin:auto;
      width: 358px;
      height: 5000px;
      text-align: center;
      justify-content: center;
      display: grid;
      grid-template-columns: 360px;
      grid-template-rows: 630px 500px 520px 540px 500px 500px 500px 500px;
      row-gap: 40px;
      margin-top: 70px;
      margin-left: -20px;
      margin-bottom: 1000px;
    }
  
    .highlights{
      margin: auto;
      width: 360px;
      height: 1000px;
      text-align: center;
      justify-content: center;
      display: grid;
      grid-template-columns: 340px;
      grid-template-rows: 0.2fr 290px 290px 290px 290px 290px 290px;
      row-gap: 90px;
      margin-top: 10px;
      margin-bottom: 150px;
    
    
    }
  
    .hg-title{
      grid-column-start: 1;
      grid-column-end: 2;
      margin-top: 20px;
    }
  
    .app {
      margin-top: -50px;
      margin-bottom: 250px;
      width: 360px;
      height: 500px;
      text-align: center;
      justify-content: center;
      display: grid;
      grid-template-columns: 360px;
  
    }
    
    .img-app img{
      position: relative;
      width: 360px;
    }
  
    .testimonials {
      margin-left: -100px;
    }
  
    hr {
      border: 0;
      height: 2px;
      width: 100%;
      margin-left: 3px;
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.178), rgba(46, 46, 46, 0.75), rgba(0, 0, 0, 0.178));
    }
  
    #cta img{
      width: 100%;
    }

    .grafico img{
      width: 380px; 
    }
  
  }
  
  
  /*------------------------------------------- NOTEBOOKS -------------------------------------------*/
  
  
  @media screen and (max-width: 1280px) and (min-width: 415px){
  
    .highlights{
      width: 100%;
      height: 1400px;
      text-align: center;
      justify-content: center;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 0.2fr 290px 290px 290px;
      row-gap: 110px;
      column-gap: 8em;
      margin-top: 10px;
    
    }
  
    hr {
      border: 0;
      height: 2px;
      width: 100%;
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.178), rgba(46, 46, 46, 0.75), rgba(0, 0, 0, 0.178));
    
    }
  
  
    .app {
      margin: auto;
      width: 100%;
      height: 500px;
      text-align: center;
      justify-content: center;
      display: grid;
      grid-template-columns: 600px 500px;
  
    }
  
    .img-app img{
      position: relative;
      border-radius: 20px;
      width: 600px;
    }
  
  }

  /*------------------------------------------- TABLET -------------------------------------------*/

  @media screen and (min-width: 430px) and (max-width: 540px){
  
    #banner .img-logo{
      width: 430px;
      margin-left: -45px;
    }
  
    .cards{
      margin:auto;
      width: 430px;
      height: 4700px;
      text-align: center;
      justify-content: center;
      display: grid;
      grid-template-columns: 430px;
      grid-template-rows: 700px 500px 500px 550px 500px 600px 500px 550px;
      row-gap: 40px;
      margin-top: 70px;
      margin-left: -20px;
      margin-bottom: 100px;
    }
  
    .highlights{
      margin: auto;
      width: 430px;
      height: 1200px;
      text-align: center;
      justify-content: center;
      display: grid;
      grid-template-columns: 410px;
      grid-template-rows: 0.2fr 290px 290px 290px 290px 290px 290px;
      row-gap: 90px;
      margin-top: 10px;
      margin-bottom: 150px;
    
    
    }
  
    .hg-title{
      grid-column-start: 1;
      grid-column-end: 2;
      margin-top: 20px;
    }
  
    .app {
      margin-top: -50px;
      margin-bottom: 250px;
      width: 400px;
      height: 500px;
      text-align: center;
      justify-content: center;
      display: grid;
      grid-template-columns: 430px;
  
    }
    
    .img-app img{
      position: relative;
      width: 420px;
    }
  
    .testimonials {
      margin-left: -100px;
    }
  
    hr {
      border: 0;
      height: 2px;
      width: 100%;
      margin-left: 3px;
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.178), rgba(46, 46, 46, 0.75), rgba(0, 0, 0, 0.178));
    }
  
    #cta img{
      width: 100%;
    }
  
  }