/* 1. Establish a relative container context for the whole welcome banner */
.welcome-area.dark {
    position: relative !important;
    min-height: 420px !important;
    overflow: hidden !important;
}

/* 2. Force the background wrapper to cover the entire welcome area absolute to the back */
.welcome-area.dark .right-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

/* 3. Force the specific element container to actually stretch and fill height/width */
.welcome-area.dark .right-bg .element-with-video-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    z-index: 2 !important;
}

/* 4. Keep any overlay image and text safely layered on top */
.welcome-area.dark .right-bg img.img-fluid {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    max-width: none !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

.welcome-area.dark .header-text {
    position: relative !important;
    z-index: 10 !important;
    padding-top: 80px;
    padding-bottom: 80px;
}

.element-with-video-bg {
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}