.mind-map-wrapper {
    width: 100%;
    background-color: #ddd;
    background:
        linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0) 20%),
        linear-gradient(to top, rgb(255, 255, 255), rgba(255, 255, 255, 0) 20%),
        radial-gradient(640px 640px at 50% 50%,
            rgba(0, 201, 146, 0.00) 20%,
            rgba(2, 233, 170, 0.28) 26%,
            rgba(184, 250, 247, 0.00) 49%,
            rgba(155, 241, 247, 0.35) 63%,
            rgba(184, 238, 250, 0.00) 91%),
            url("../img/icon/ic-pepper-pay-128.png") no-repeat center/96px 96px;

}

.mind-map-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    padding: 4rem 2rem;
}

.mind-map-g {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    gap: 2rem;
    flex-wrap: wrap;
}

.mind-map-element {
    display: flex;
    width: 240px;
    padding: 2px 8px;
    justify-content: start;
    align-items: center;
    gap: 8px;
    border-radius: 36px;
    border: 2px solid #A4DFE2;
    background: rgba(255, 255, 255, 0.86);
}

.mind-map-element p {
    color: var(--green-main);
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.mind-map-mask {
    position: absolute;
    top: 1rem;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.85) 5%,
            rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 1) 100%);
}

.left-2 {
    position: relative;
    left: 2rem;
}

.left-1 {
    position: relative;
    left: 1rem;
}

.left--2 {
    position: relative;
    left: -2rem;
}


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

    .mind-map-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }


}

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

    .mind-map-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }


}

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

    .mind-map-wrapper {
        grid-template-columns: repeat(1, 1fr);
        height: 480px;
        overflow-y: scroll;
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .mind-map-g {
        gap: 1.5rem;
    }


}






/* Initial hidden state - NO animation yet */
.mind-map-element {
    opacity: 0;
    transform: scale(0);
    transform-origin: 50% 50%;
}

/* Only animate when the section is in view */
.mind-map-wrapper.reveal-now .mind-map-element {
    animation: radialZoomReveal 1.4s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}

/* Staggered delays - now scoped to .reveal-now */
.mind-map-wrapper.reveal-now .mind-map-g.g-a .mind-map-element:nth-child(1) { animation-delay: 0.20s; }
.mind-map-wrapper.reveal-now .mind-map-g.g-a .mind-map-element:nth-child(2) { animation-delay: 0.40s; }
.mind-map-wrapper.reveal-now .mind-map-g.g-a .mind-map-element:nth-child(3) { animation-delay: 0.60s; }
.mind-map-wrapper.reveal-now .mind-map-g.g-a .mind-map-element:nth-child(4) { animation-delay: 0.80s; }

.mind-map-wrapper.reveal-now .mind-map-g.g-b .mind-map-element:nth-child(1) { animation-delay: 0.30s; }
.mind-map-wrapper.reveal-now .mind-map-g.g-b .mind-map-element:nth-child(2) { animation-delay: 0.50s; }
.mind-map-wrapper.reveal-now .mind-map-g.g-b .mind-map-element:nth-child(3) { animation-delay: 0.70s; }

.mind-map-wrapper.reveal-now .mind-map-g.g-c .mind-map-element:nth-child(1) { animation-delay: 0.35s; }
.mind-map-wrapper.reveal-now .mind-map-g.g-c .mind-map-element:nth-child(2) { animation-delay: 0.55s; }
.mind-map-wrapper.reveal-now .mind-map-g.g-c .mind-map-element:nth-child(3) { animation-delay: 0.75s; }

.mind-map-wrapper.reveal-now .mind-map-g.g-d .mind-map-element:nth-child(1) { animation-delay: 0.25s; }
.mind-map-wrapper.reveal-now .mind-map-g.g-d .mind-map-element:nth-child(2) { animation-delay: 0.45s; }
.mind-map-wrapper.reveal-now .mind-map-g.g-d .mind-map-element:nth-child(3) { animation-delay: 0.65s; }
.mind-map-wrapper.reveal-now .mind-map-g.g-d .mind-map-element:nth-child(4) { animation-delay: 0.85s; }

/* Keep your keyframe */
@keyframes radialZoomReveal {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    60% {
        opacity: 1;
        transform: scale(1.12);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Optional: smooth fade-in of the whole section */
.mind-map-wrapper {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.mind-map-wrapper.reveal-now {
    opacity: 1;
}