.parallax-section {
    position: relative;
    overflow: hidden;
    height: 600px; /* Adjust as needed */
}

/* Background layer */
.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Use the background image from the plugin's images folder */
    background-image: url("../images/fireplace-bg-parallax.png");
    background-size: contain;  /* ensures the full image is visible */
    background-repeat: no-repeat;
    background-position: center 100%;
    opacity: 0; /* start transparent */
    transition: opacity 0.1s ease-out, background-position 0.1s ease-out;
    z-index: 1;
}

.parallax-foreground {
    position: absolute;
    top: 56%;  /* JavaScript adjusts vertical placement via transform */
    left: 55%;
    transform: translate(-50%, -100%) scale(1.5);
    transform-origin: top center;
    transition: transform 0.1s ease-out;
    pointer-events: none;
    z-index: 2;
}

/* Round the top corners of the foreground image */
.parallax-foreground img {
    display: block;
    max-width: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}