.hero {
    position: relative;
    overflow: hidden; 
}

.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: 1; 
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(15 21 43 / 1%);
    z-index: 2;
}

    .hero-bg {
        z-index: 0;
    }

    .hero-content {
        position: relative;
        z-index: 3;
    }