.mask-container {
    width: 100%;
    height: 70%;
    border-radius: 20px 20px 0 0;
    position: relative;
    overflow: hidden; /* Ensures only the inner portion of the image is visible */
    display: flex;

    justify-content: center; /*Center horizontally */
    align-items: center; /* Center vertically */
}

.recursive-bg {
    position: absolute;
    top: 25%;
    /* left: 0; */
    height: auto; /* Make the image fill the container */
    object-fit: contain; /* Ensures the image scales proportionally */
    transform: translate(0, 0); /*Initial position */
}

/* Layer 1 */
.recursive-bg-1 {
    width: 100%;
    z-index: 3; /* Top layer */
}

/* Layer 2 */
.recursive-bg-2 {
    width: 30%;
    top: 90%;
    z-index: 2; /* Middle layer */
}

/* Layer 3 */
.recursive-bg-3 {
    width: 10%;
    top:111%;
    z-index: 1; /* Bottom layer */
}

@media (max-width: 876px) {
    /* Layer 1 */
    .recursive-bg-1 {
        width: 100%;
        top: -30%;
        z-index: 6; /* Top layer */
    }

    /* Layer 2 */
    .recursive-bg-2 {
        width: 65%;
        top: 50%;
        z-index: 5;
    }

    /* Layer 3 */
    .recursive-bg-3 {
        width: 45%;
        top:110%;
        z-index: 4;
    }

    /* Layer 4 */
    .recursive-bg-4 {
        width: 30%;
        top: 165%;
        z-index: 3;
    }

    /* Layer 5 */
    .recursive-bg-5 {
        width: 20%;
        top: 214%;
        z-index: 2;
    }

    /* Layer 6 */
    .recursive-bg-6 {
        width: 14%;
        top:257%;
        z-index: 1; /* Bottom layer */
    }
}