@media(max-width:1200px){

  .hero-title{
    font-size:14vw;
  }

  .hero-image img{
    width:400px;
  }

}

@media(max-width:992px){

  .navbar{
    flex-direction:column;
    gap:20px;
  }

  .hero-content{
    flex-direction:column;
    padding-top:100px;
  }

  .hero-title{
    position:relative;
    font-size:18vw;
    margin-bottom:40px;
  }

  .hero-info,
  .review-card{
    position:relative;

    left:auto;
    right:auto;
    bottom:auto;

    width:100%;
    max-width:500px;

    margin-top:20px;
  }

  .hero-footer{
    position:relative;
    margin-top:60px;
  }

}

@media(max-width:768px){

  .hero{
    padding:20px;
  }

  .nav-menu{
    flex-wrap:wrap;
    justify-content:center;
  }

  .hero-title{
    font-size:20vw;
    letter-spacing:-3px;
  }

  .hero-image img{
    width:100%;
    max-width:320px;
  }

  .hero-info h2{
    font-size:1.5rem;
  }

  .hero-footer{
    flex-direction:column;
    gap:20px;
  }

}

@media(max-width:768px){

    .footer-main{
        grid-template-columns:1fr;
        text-align:center;
    }

    .footer-brand p{
        margin:auto;
    }
}