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

/* SMARTPHONES */
@media screen and (min-width: 390px) and (max-width: 430px){

    #banner img{
      width: 405px;
      margin-left: -45px;
    }
  
    .cards-empresa{
      margin:auto;
      width: 410px;
      height: 1700px;
      text-align: center;
      justify-content: center;
      display: grid;
      grid-template-columns: 400px;
      grid-template-rows: 560px 540px 500px;
      row-gap: 40px;
      margin-top: 70px;
      margin-left: -20px;
    }

    .cards-trabalhador{
      margin:auto;
      width: 410px;
      height: 3900px;
      text-align: center;
      justify-content: center;
      display: grid;
      grid-template-columns: 400px;
      grid-template-rows: 500px 500px 500px 500px 500px 500px 500px;
      row-gap: 40px;
      margin-top: 70px;
      margin-left: -20px;
    }

    .box-7{    
      grid-column-start: 1;
      grid-column-end: 2;
    }
  
    .highlights{
      margin: auto;
      width: 410px;
      height: 2500px;
      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{
      text-align: center;
      padding-top: 50px;
      height: auto;
      width: auto; 
    }

    .grafico img{
      width: 400px; 
    }

  }
  
  /*------------------------------------------------------ SMARTPHONES COM TELAS PEQUENAS ------------------------------------------------------*/
  
  @media screen and (min-width: 360px) and (max-width: 389px){
    
    #banner img{
      width: 360px;
      margin-left: -45px;
    }  

    .cards-empresa{
      margin:auto;
      width: 358px;
      height: 1700px;
      text-align: center;
      justify-content: center;
      display: grid;
      grid-template-columns: 360px;
      grid-template-rows: 590px 540px 500px;
      row-gap: 40px;
      margin-top: 70px;
      margin-left: -20px;
    }

    .cards-trabalhador{
      margin:auto;
      width: 358px;
      height: 3900px;
      text-align: center;
      justify-content: center;
      display: grid;
      grid-template-columns: 360px;
      grid-template-rows: 500px 500px 500px 500px 500px 500px 500px;
      row-gap: 40px;
      margin-top: 70px;
      margin-left: -20px;
    }

    .box-7{    
      grid-column-start: 1;
      grid-column-end: 2;
    }
  
    .highlights{
      margin: auto;
      width: 360px;
      height: 2500px;
      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%;
    }
  
  }
  
  
  /*------------------------------------------------------------------------- NOTEBOOKS -------------------------------------------------------------------------*/
  
  
  @media screen and (max-width: 1280px) and (min-width: 540px){
  
    .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;
      margin-bottom: 200px;
    
    }
  
    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: 431px) and (max-width: 540px){
  
    #banner .img-logo{
      width: 430px;
      margin-left: -45px;
    }
  
    .cards-empresa{
      margin:auto;
      width: 430px;
      height: 1900px;
      text-align: center;
      justify-content: center;
      display: grid;
      grid-template-columns: 430px;
      grid-template-rows: 600px 550px 500px;
      row-gap: 40px;
      margin-top: 70px;
      margin-left: -20px;
    }

    .cards-trabalhador{
      margin:auto;
      width: 430px;
      height: 4000px;
      text-align: center;
      justify-content: center;
      display: grid;
      grid-template-columns: 430px;
      grid-template-rows: 500px 500px 500px 500px 600px 500px 500px;
      row-gap: 40px;
      margin-top: 70px;
      margin-left: -20px;
    }

    .box-7{    
      grid-column-start: 1;
      grid-column-end: 2;
    }
  
    .highlights{
      margin: auto;
      width: 430px;
      height: 2500px;
      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%;
    }
  
  }