header.masthead {
  padding-bottom: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
  height: 70vh;
  /* Ensures it takes at least half the viewport height */
}

header.masthead p {
  font-size: 1.15rem;
}

header.masthead h1,
header.masthead .h1 {
  font-size: 1.5rem;
}

header.masthead h3,
header.masthead .h3 {
  font-size: 2rem;
}

header.masthead h4,
header.masthead .h4 {
  font-size: 1.5rem;
}

@media (min-width: 1200px) {

  header.masthead h1,
  header.masthead .h1 {
    font-size: 2.5rem;
  }
}

.highlighted-carousel-section {
  background-color: #f8f9fa;
  /* Light gray, you can change to any color you like */
  border-radius: 15px;
  /* Optional, to soften the edges */
  padding: 50px 0;
  /* Extra padding to make the section stand out */
}

.carousel-image {
  max-width: 50%;
  /* or any percentage you want */
  height: auto;
  display: block;
  margin: 0 auto;
  /* to center the image */
}