html {
  scroll-behavior: smooth;
}

@media (max-width: 767px) {
  #hero {
    min-height: 60vh !important;
  }
  #hero .hero-heading {
    font-size: 2rem !important;
  }
  #hero .hero-text {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  #hero .btn-hero {
    font-size: 0.9rem !important;
    padding: 0.5rem 1rem !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #hero {
    min-height: 75vh !important;
  }
  #hero .hero-heading {
    font-size: 2.5rem !important;
  }
  #hero .hero-text {
    font-size: 1.25rem !important;
    margin-bottom: 2rem !important;
  }
  #hero .btn-hero {
    font-size: 1rem !important;
    padding: 0.75rem 1.5rem !important;
  }
}

@media (min-width: 992px) {
  #hero {
    min-height: 90vh !important;
  }
  #hero .hero-heading {
    font-size: 3.5rem !important;
  }
  #hero .hero-text {
    font-size: 1.5rem !important;
    margin-bottom: 2.5rem !important;
  }
  #hero .btn-hero {
    font-size: 1.25rem !important;
    padding: 1rem 2rem !important;
  }
}