#hero-section::before, #hero-section::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 50%;
        z-index: 1; /* Behind the content */
    }

    #hero-section::before {
        left: 0;
        background-color: black;
    }

    #hero-section::after {
        right: 0;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.5)), url('./images/background.png');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        height: 1270px;
        opacity: 1; 
    }

    @media only screen and (max-width:1024px) {
        #hero-section::before, #hero-section::after{
            width: 100%;
        }
        #hero-section::after{
            height: 800px;
        }
    }