@media (max-width:1100px){

  .hero-content h1{
    font-size:4rem;
  }

}

@media (max-width:960px){

  .nav{
    display:none;
  }

  .hero-grid{
    grid-template-columns:1fr;
  }

  .hero-content h1{
    font-size:3.2rem;
  }

  .hero{
    padding:8rem 0 5rem;
  }

}

@media (max-width:640px){

  .container{
    padding:0 1.2rem;
  }

  .hero-content h1{
    font-size:2.4rem;
  }

  .hero-actions{
    flex-direction:column;
  }

  .btn{
    width:100%;
  }

}

@media (max-width:960px){

  .intro-grid{
    grid-template-columns:1fr;
  }

  .intro-text h2{
    font-size:2.2rem;
  }

}

@media (max-width:960px){

  .intro-side{
    margin-top:2rem;
  }

  .stat-num{
    font-size:1.6rem;
  }

}