/* Define some CSS variables for easy customization */
:root {
    --scroll-container-padding: 0;
    --section-content-width: 80%;
    --section-content-height: 80%;
    --section-title-font-size: 2.5rem;
    --section-content-gap: 2rem;
}

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

.scrollmagic-pin-spacer {
    padding-top: 0 !important;
    padding-bottom: 25 !important;
}

.scroll-container {
    padding: var(--scroll-container-padding) !important;
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    width: 100vw;
    height: 100vh;
    min-width: min-content;
    /* transition: all 0.1s ease-in-out;  */
}

.scroll-section {
    flex: none;
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--section-content-gap);
    width: var(--section-content-width);
    height: var(--section-content-height);
}

.section-image {
    max-width: 100%;
    max-height: 40%;
    height: auto;
    object-fit: contain;
}

.section-title {
    font-size: var(--section-title-font-size);
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.section-body {
    max-width: 600px;
}

.scroll-container-spacer {
    position: absolute;
    width: 100%;
}

@media only screen and (max-width: 768px) {
    :root {
        --scroll-container-padding: 10px;
        --section-content-width: 90%;
        --section-content-height: auto;
        --section-title-font-size: 1.5rem;
        --section-content-gap: 1rem;
    }

    .scroll-container {
        flex-direction: column;
        scroll-snap-type: y mandatory;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .scroll-section {
        flex-direction: column;
        width: 100%;
        min-height: 100vh;
        height: auto;
    }
}