body {
    margin: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling of the whole page */
}

.scroll-container-one {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: visible;
    scroll-snap-type: x mandatory; /* Enables smooth snap scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    touch-action: pan-x pan-y; /* Explicitly allow horizontal pan/scroll */
    min-height: 100vh;
    background-color: rgb(247, 253, 197);
    gap: 30px;
    padding: 30px;
}

.scroll-one-box-one, .scroll-one-box-two, .scroll-one-box-three, .scroll-one-box-four, .scroll-one-box-five, .scroll-one-box-six, .scroll-one-box-seven {
    flex: 0 0 auto;
    margin: auto 0;
    width: clamp(300px, 90vw, 400px);
    height: clamp(300px, 90vw, 400px);
    scroll-snap-align: center; /* Ensures slides snap into place */
}

.scroll-container-two {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: visible;
    scroll-snap-type: x mandatory; /* Enables smooth snap scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    touch-action: pan-x pan-y; /* Explicitly allow horizontal pan/scroll */
    min-height: 100vh;
    background-color: rgb(197, 253, 248);
    gap: 30px;
    padding: 30px
}

.scroll-two-box-one, .scroll-two-box-two, .scroll-two-box-three, .scroll-two-box-four, .scroll-two-box-five, .scroll-two-box-six, .scroll-two-box-seven {
    flex: 0 0 auto;
    margin: auto 0;
    width: clamp(300px, 90vw, 400px);
    height: clamp(300px, 90vw, 400px);
    scroll-snap-align: center; /* Ensures slides snap into place */
}



[data-color="tint-1"] {
    background-color: rgb(0, 250, 130);
}

[data-color="tint-2"] {
    background-color: rgb(0, 250, 150);
}

[data-color="tint-3"] {
    background-color: rgb(0, 250, 170);
}

[data-color="tint-4"] {
    background-color: rgb(0, 250, 190);
}

[data-color="tint-5"] {
    background-color: rgb(0, 250, 210);
}

[data-color="tint-6"] {
    background-color: rgb(0, 250, 230);
}

[data-color="tint-7"] {
    background-color: rgb(0, 250, 250);
}