.main{
  padding-top: 20px;
}

.hero {
  height: 400px;
  max-height: 400px;
  padding-top: 150px;
  padding-bottom: 80px;
}

/* >>>>>>>>> Media Queries <<<<<<<<<<<<<< */

/* Extra large devices (large desktops, 1200px and up)*/
@media (max-width: 1200px) {

  .hero {
    height: 300px;
    max-height: 300px;
    padding-top: 150px;
    padding-bottom: 60px;
  }

  .main-title{
    padding-top: 20px;
    padding-bottom: 20px;
  }
}  

/* Large devices (desktops, 992px and up)*/
@media (max-width: 992px) {

  .hero {
    height: 200px;
    max-height: 200px;
    padding-top: 110px;
    padding-bottom: 40px;
  }

  .main-title{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 130px;
    width: 60%;
  }
}

  /* Medium devices (tablets, 768px and up)*/
@media (max-width: 768px) {

  .hero {
    padding-top: 90px;
    padding-bottom: 20px;
    height: 180px;
  }

  .main-title{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 100px;
    width: 65%;
  }
}



@media (max-width: 576px) {

  .h1{
    font-size: 4rem;
  }

  .hero {
    /* padding-top: 90px;
    padding-bottom: 20px;
    height: 180px; */
    padding-left: 30px;
  }

  .main-title{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 50px;
    width: 100%;
  }
}

/* Small devices (phones, 460px and up)*/
@media (max-width: 460px) {

  .hero {
    padding-top: 40px;
    height: 230px;
  }
  .main-title{
    width: 80%;
    top: 95px;
    margin-left: 0;
    padding-left: 30px;
  }

}