/* Banner area using your local image */
.banner {
  position: relative;
  min-height: 300px;
  display: grid;
  place-items: center;
  text-align: center;

  background-image:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url("Fourth.jpg");  /* Your image */

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Text styling */
.banner-content {
  padding: 20px;
  color: white;
  width: min(900px, 92%);
}

.banner-content h1 {
  margin: 0 0 8px;
  font-size: clamp(2rem, 4vw, 3rem);
}

.banner-content p {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.25rem);
}