/* Banner section */
.hero-wrap {
    position: relative;
    height: 45vh !important;       /* ~45% of viewport height */
    min-height: 250px;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    overflow: hidden;
    display: flex;
    align-items: center;           /* vertical centering */
    justify-content: center;       /* horizontal centering */
}

/* Overlay fully covers banner */
.hero-wrap .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 1;
}

/* Container above overlay */
.hero-wrap .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Row layout with content slightly below center */
.hero-wrap .row.js-fullheight {
    height: 100% !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;         /* horizontal centering */
    justify-content: center;     /* vertical centering */
    text-align: center;

    /* Shift content slightly below center */
    transform: translateY(45%);  /* moves content down 15% of section height */
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .hero-wrap {
        height: auto !important;       /* allow banner to expand for content */
        padding: 60px 15px;            /* space for breadcrumbs/text */
    }

    .hero-wrap .row.js-fullheight {
        transform: none;               /* remove shift on small screens */
        justify-content: flex-start;   /* content starts from top for mobile */
    }
}