.banner {
    background-image: url('../img/placeholder.jpg'); /* update with your image path */
    background-size: cover; /* ensure the image covers the full width */
    background-position: center; /* center the image horizontally and vertically */
    background-attachment: scroll; /* 'scroll' or 'fixed'; fixed the image should stay in place while scrolling */
    height: 300px; /* fixed height (already set in HTML, but can be overridden here) */
    /*display: flex; /* enable flexbox for vertical centering of content */
    /*justify-content: center; /* horizontal centering */
    /*align-items: center; /* vertical centering */
    /*color: #fff; /* default text color (override in .banner-content if needed) */
  }