* {
    margin: 0;
    padding: 0;
}


body {
    display: flex;
    position: relative;
    /* Change to relative */
    min-height: 100vh;
    /* Use min-height instead of height */
    /* align-items: center; */
    height: 100%;
    overflow-x: hidden;
    background: #000000;
    /* background: #000000;  */

}



/* Top Banner */

.section-1 {
    position: relative;
    align-items: center;
    top: 0px;
    width: 100vw;
    height: 15vh;
    background: #fcf9f000;
}


.noise {
    height: 100%;
    background: linear-gradient(180deg, rgb(0, 0, 0, 1), rgba(255, 255, 255, 0)),
    url(https://grainy-gradients.vercel.app/noise.svg);
    filter: contrast(50%) brightness(50%);
}


.isolate {
    isolation: isolate;
    position: relative;
    width: 100%;
    height: 100%;
}

.overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    mix-blend-mode: multiply;
}

/* Bottom Banner */

.section-2 {
    position: absolute;
    /* align-items: center; */
    top: 315vh;
    width: 100vw;
    height: 75vh;
    background: #fcf9f000;
}

.noise-2 {
    height: 100%;
    background: linear-gradient(0deg, #170185, transparent),
        url(https://grainy-gradients.vercel.app/noise.svg);
    filter: contrast(300%) brightness(200%);
}



.isolate-2 {
    isolation: isolate;
    position: relative;
    width: 100%;
    height: 100%;
}

.overlay-2 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    mix-blend-mode: multiply;
}


@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    .noise {
        filter: contrast(250%) brightness(200%);
    }
}