/* Base style for the Parallax divs */
.parallaxDiv, .repeatingParallaxDiv {
    position: relative;
    background-position: center;
    background-color: var(--underlay-color, rgba(0,0,0,0)); /* Underlay color */
    background-image: var(--main-parallax-image-url, none);
    background-repeat: var(--parallax-image-repeat, no-repeat);
    background-size: var(--parallax-image-size, contain);
    opacity: var(--parallax-opacity, 1); /* Set to full opacity by default */
}

/* Overlay class */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
     /*z-index: 1; Ensure overlay stays above the background image */
    background-color: var(--overlay-color,rgba(0, 0, 0, 0.0)); /* Dark transparent background */
    background-image: var(--overlay-image-url, none);
    background-repeat: var(--overlay-image-repeat, no-repeat);
    background-size: var(--overlay-image-size, contain); /* Adjust as needed */
    background-position: var(--overlay-position, center);
    opacity: var(--overlay-opacity, 1); /* Set to full opacity by default */
}

/* Ensure content is above overlay */
.parallaxDiv > *, .repeatingParallaxDiv > * {
    position: relative;
    /* z-index: 2; Content above overlay */
}

/* Specific styles for repeatingParallaxDiv */
.repeatingParallaxDiv {
    background-repeat: var(--parallax-image-repeat, repeat); /* Enable repeat */
    background-size: auto; /* Prevent stretching */
    background-image: var(--main-parallax-image-url, none); /* Reuse background image */
}


/* Warstwa obrazka 1 */
.image-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 1; /* Możesz zmieniać przezroczystość */
}