html {
    scroll-behavior: smooth;
    /* Enables smooth scrolling */
}

.bodyContainer {
    height: 550vh;
    /* Increased height for scrolling */
    margin: 0;
    overflow-x: hidden;
    background-color: #f0f0f0;
    /* Background color */
    background-image: url('../images/diwali/bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left -258vh top -226vh;
}

.image-container {
    position: fixed;
    /* Keeps it fixed while scrolling */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    /* Prevent mouse interactions */
}

#scroll-image {
    position: absolute;
    width: 100%;
    height: auto;
    /* Maintain aspect ratio */
    top: 50%;
    /* Center vertically */
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    /* Initial position and scale */
    transition: transform 0.6s ease-in-out;
    /* Smooth transition */
}

.text {
    position: fixed;
    top: 20px;
    /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    color: #333;
    /* Text color */
    font-size: 24px;
    /* Text size */
    pointer-events: auto;
    /* Allow interactions with text */
    transition: opacity 0.6s ease-in-out;
    /* Smooth transition for opacity */
    opacity: 1;
    /* Initially visible */
}

.btns {
    margin: 30px 0;
}

.btns a {
    padding: 10px 20px;
    border-radius: 35px;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
}

.pinkbtn a {
    background-color: #fe0057;
    color: #fdf3e1;
}

.blueebtn a {
    background-color: #392162;
}

.yellowbtn a {
    background-color: #ffa100;
}

.darkpinkbtn a {
    background-color: #b80067;
}

.fashiondiv {
    position: relative;
    padding: 20px;
}

.fashiondiv img {
    position: absolute;
    top: -70px;
    max-width: 120px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.popup.show {
    opacity: 1; /* Fully visible */
    visibility: visible; /* Ensure it's visible */
}

@media(max-width:767px) {
    #scroll-image {
        object-fit: cover;
        height: 100vh;
    }
    .btns {
        margin: 20px 0;
    }

    .popup {
        padding: 0px !important;
        max-width: 230px !important;
        display: none;
    }

    .fashiondiv {
        padding: 5px;
    }

    .popup h2 {
        font-size: 16px;
    }

    .popup p {
        font-size: 12px;
    }

    #popup1 {
        top: 27%;
        left: 60%;
        background-color: transparent;
        color: #fdf3e1;
    }

    #popup2 {
        top: 38%;
        left: 33%;
    }

    #popup2 h2 {
        color: #392162;
    }

    #popup3,
    #popup4,
    #popup5 {
        top: 34%;
    }


    .fashiondiv img {
        top: -35px;
        max-width: 85px;

    }

    .giftingimg img {
        max-width: 160px;
    }

    .bodyContainer{
        height: 320vh;
    }

}

@media(min-width:768px) {
    .bodyContainer{
        height: 200vh;
    }
    .popup h2 {
        font-size: 22px;
    }

    .popup p {
        font-size: 16px;
    }

    #popup1 {
        top: 27%;
        left: 55%;
        background-color: transparent;
        color: #ecdec5;
    }

    #popup2 {
        top: 54%;
        left: 33%;
    }

    #popup2 h2 {
        color: #392162;
    }

    #popup3 {
        top: 58%;
        left: 55%;
    }

    #popup4 {
        top: 42%;
        left: 65%;
    }

    #popup5 {
        top: 64%;
        right: 6%;
        left: auto;
    }

    .fashiondiv img {
        position: absolute;
        top: -80px;
        max-width: 115px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .giftingimg img,
    .epicimg img {
        max-width: 100% !important;
    }

    .epicimg img {
        top: -110px !important;
    }

    .epicimg {
        position: relative;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
}

.popup {
    display: none;
    z-index: 9;
    position: relative;
}

.content {
    position: relative;
    z-index: 1;
    /* Ensure content is above video */
    /* padding: 20px;*/
    height: 150vh;
    /* Just to create scrollable area */
}

.popup {
    display: block; /* Change from none to block */
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fdf3e1;
    padding: 10px;
    border-radius: 5px;
    z-index: 10;
    width: 100%;
    max-width: 300px;
    padding: 11px;
    text-align: center;
    border-radius: 15px;
    color: #392162;

    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Initially hidden */
    transition: opacity 1s ease, visibility 2s ease; /* Slower transition (2 seconds) */
}

#popup1 h2 {
    color: #fe0057;
}


#popup4 h2 {
    color: #b80067;
}


#popup5 h2,
#popup2 h2 {
    color: #392162;
}

#popup3 h2 {
    color: #ffa100;
}