.banner-overlay, .banner .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.5);
}


.cont-shift {
    position: relative;
    left: 0;
    width: 100%;
    z-index: 999;
    margin: -2.1em 50% 0;
    transform: translate(-50%, 0%);
}
.profile-section {
    position: relative;
    left: 0;
    width: 100%;
    z-index: 99;
    margin: -2.1em 50% 0;
    transform: translate(-50%, 0%);
    overflow: visible;
    /* IMPORTANT: create space so the image can overlap upward without pushing layout */
    padding-top: 120px; /* tune this */
}

/* this is the "hang over the edge" mechanic */
.profile-image-wrapper {
    position: absolute;
    top: 12px; /* tune this: more negative = hangs higher */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 100%;
    pointer-events: none; /* optional: prevents weird click blocking */
}

    /* optional: constrain max width while still responsive */
    .profile-image-wrapper img {
        max-width: 1100px; /* tune or remove */
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        pointer-events: auto; /* so image still selectable if you care */
    }

.icon-size {
    height: 75px;
}