#about {
    position: relative;
    overflow: hidden;
}
#about .section-main-text-container {
    width: 60%;
    padding-left: 10%;
}

#hero-video {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: translateX(-40%);
}

.hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        180deg, 
        #000000 0%, 
        rgba(0, 0, 0, 50%) 10%
    );
    pointer-events: none;
}

@media (max-width: 600px) {
    #about .section-main-text-container {
        width: 100%;
        padding-left: 3rem;/*reset to original value*/
        height: 85%;
    }
    #hero-video {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 150%;
        height: auto;
        padding: 0;
        left: 50%;
        transform: translateX(-50%);
       
    }
}