@media (max-width: 992px) {
  .navbar-nav {
    text-align: center;
  }

  .nav-item {
    padding: 10px 0;
  }
}

@media (max-width: 768px) {
  .hero-section {
    height: calc(100vh - 60px);
  }

  .carousel-caption {
    bottom: 10%;
    padding: 10px;
    width: 90%;
  }

  .carousel-caption h3 {
    font-size: 1.2rem;
  }
}