section {
    /* position: absolute; */
    top: 0;
    /* width: 100vw; */
    height: 100vh;
    min-height: 100vh;
    scroll-snap-align: start;
    transition: .75s ease-in-out;
    /* margin-top: var(--navbar-height); */

    transition: transform 0.75s ease-out;
}

.snap-section {
    height: 100vh;
    /* This container determines the scrollable area for snapping */
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

footer {
    /* top: 100vh; */
    /* min-height: 30vh; */
    background: var(--bg-primary-10);
    padding: 3rem 0;
    
    bottom: 0;

    transition: bottom .75s ease-in;
}

.scroll-snap-type-start {
    scroll-snap-align: start;
}

.promo-dialog {
    position: relative;

    aspect-ratio: 16/9;

    width: 60%;

    overflow: hidden;

    border-radius: 1rem;
    
    padding: 0;
    border: none;
    background: transparent;
}

.promo-dialog img {
    width: 100%;
    object-fit: cover;
}

.promo-dialog:focus-visible {
    outline: none;
}

.promo-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
  backdrop-filter: blur(5px); /* Apply a blur effect to content behind the backdrop */
}

.promo-dialog button {
    position: absolute;
    top: 25px;
    right: 25px;
    background: #ffffff;
    color: var(--color-primary);
    border: none;
    border-radius: 100%;
    width: 25px;
    height: 25px;
}
.scroll {
    position: relative;
    /* width: 700px; */
    overflow: hidden;
    /* -webkit-mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent) */
}

.scroll>div {
    width: max-content;
    animation: scroll var(--time) linear infinite;
    animation-delay: calc(var(--time)*-1);
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.5rem));
    }
}

section#promo.revealed-content .promo-title {
    opacity: 1;
    transform: translateX(0%);
}

section#promo.revealed-content .promo-description {
    opacity: 1;
    transform: translateX(0%);
}

section#promo.revealed-content>.promo-card {
    bottom: 0;
}

section#solusi.revealed-content .solusi-title {
    opacity: 1;
    transform: translateX(0%);
}

section#cert.revealed-content .cert-title {
    opacity: 1;
    transform: translateX(0%);
}

section#cert.revealed-content .cert-description {
    opacity: 1;
    transform: translateX(0%);
}

section#cert.revealed-content .card {
    opacity: 1;
    transform: translateX(0%);
}

section#req.revealed-content .card {
    opacity: 1;
    transform: translateX(0%);
}

section#feature.revealed-content .feature-card-left {
    opacity: 1;
    transform: translateX(0%);
}

section#feature.revealed-content .feature-card-right {
    opacity: 1;
    transform: translateX(0%);
}

section#result.revealed-content .section-title,
section#result.revealed-content .result-description,
section#result.revealed-content .result-btn,
section#result.revealed-content .ig-card {
    opacity: 1;
    transform: translate(0%, 0%);
}

section#article.revealed-content .article-col {
    opacity: 1;
    transform: translate(0%, 0%);
}

section#try.revealed-content .try-card {
    opacity: 1;
    transform: translate(0%, 0%);
}

@media screen and (max-width: 992px) {
    .promo-dialog {
        width: 90%;
    }
}

@media screen and (max-width: 767px) {

    section {
        height: auto;
        min-height: 100vh;
        padding-top: 10vh;
        padding-bottom: 10vh;
    }
    .snap-section {
        height: 100vh;
        /* This container determines the scrollable area for snapping */
        overflow-y: auto;
        scroll-snap-type: none;
    }
}