body {
    margin: 0;
    overflow: hidden;
    touch-action: none; /* Prevents default touch behaviors like scrolling */
}
.custom-draggable-container {
    position: relative;
    width: 100vw;
    height: 100vh;
}
.background-video {
    position: fixed; /* Fixed to fill entire viewport */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Ensures video covers the entire viewport */
    z-index: 0; /* Behind icons */
    pointer-events: none; /* Prevents video from intercepting touch events */
}
.icon-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1; /* Above video */
}
.icon {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: none; /* Ensures touch events are handled by JS */
    user-select: none; /* Prevents text selection */
    z-index: 2; /* Above video and container */
    pointer-events: auto; /* Ensure icons are interactive */
}
/* Image backgrounds for individual icons with fallback colors */
.icon1 { 
    background-image: url('images/bag.png'); /* Example: Chalk Bag */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    left: 20px;
    top: 20px;
}
.icon2 { 
    background-image: url('images/bucket.png'); /* Example: Shopping Cart */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    left: 140px;
    top: 20px;
}
.icon3 { 
    background-image: url('images/shirt.png'); /* Example: Page 3 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    left: 260px;
    top: 20px;
}
.icon4 { 
    background-image: url('images/hoody.png'); /* Example: Page 4 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    left: 380px;
    top: 20px;
}
.icon5 { 
    background-image: url('images/brick.png'); /* Example: Page 5 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    left: 500px;
    top: 20px;
}
.icon6 { 
    background-image: url('images/ipod.png'); /* Path to your CD player PNG */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    left: 620px;
    top: 20px;
}
.icon7 { 
    background-image: url('images/talk.png'); /* Path to your CD player PNG */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    left: 620px;
    top: 20px;
}