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

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

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

    .box-7{
      grid-column-start: 1;
      grid-column-end: 1;
    }
  
    .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;
    
    
      background-image: linear-gradient(to bottom, rgb(18, 204, 218), #0d50ee);
      padding: 10px;
      border-radius: 10px;
    }
  
    .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%;
    }

    /* Highlights apresentação dos produtos */

    .highlights-apresentacao {
      width: 100%;
      height: 1800px;
      text-align: center;
      justify-content: center;
      display: grid;
      grid-template-columns: 450px;
      grid-template-rows: 300px 300px 300px 300px;
      column-gap: 10em;
      row-gap: 150px;
      margin-top: 10px;
      margin-bottom: 50px;
      background-image: linear-gradient(to bottom, rgb(46, 189, 255), rgb(0, 50, 158));
      padding: 30px;
      border-radius: 10px;
    }

    .highlights-apresentacao section:nth-child(3),
    .highlights-apresentacao section:nth-child(4) {
      grid-column: 1 / -1;
      width: 100%;
    }

    .highlights-apresentacao section:nth-child(3) .content,
    .highlights-apresentacao section:nth-child(4) .content {
      max-width: 90%;
      margin: 0 auto;
    }

  }
  
  /*------------------------------------------------------ SMARTPHONES COM TELAS PEQUENAS ------------------------------------------------------*/
  
  @media screen and (min-width: 360px) and (max-width: 389px){
    
    #banner img{
      width: 360px;
      margin-left: -45px;
    }  
  
    .cards{
      margin:auto;
      width: 358px;
      height: 3900px;
      text-align: center;
      justify-content: center;
      display: grid;
      grid-template-columns: 360px;
      grid-template-rows: 530px 500px 500px 600px 450px 500px 500px;
      row-gap: 40px;
      margin-top: 70px;
      margin-left: -20px;
    }

    .box-7{
      grid-column-start: 1;
      grid-column-end: 1;
    }
  
    .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;
    
    
      background-image: linear-gradient(to bottom, rgb(18, 204, 218), #0d50ee);
      padding: 10px;
      border-radius: 10px;
    }
  
    .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{
      margin:auto;
      width: 430px;
      height: 3400px;
      text-align: center;
      justify-content: center;
      display: grid;
      grid-template-columns: 430px;
      grid-template-rows: 500px 500px 500px 500px 600px 500px;
      row-gap: 40px;
      margin-top: 70px;
      margin-left: -20px;
    }
  
    .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;
    
    
      background-image: linear-gradient(to bottom, rgb(18, 204, 218), #0d50ee);
      padding: 10px;
      border-radius: 10px;
    }
  
    .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%;
    }
  
  }