.data-box .arrow {
    height: 36px;
    width: 36px;
    display: flex;
    border-radius: 50%;
    margin: auto 12px;
    justify-content: center;
    overflow: hidden;
    align-items: center;
    opacity: .2;
}

    .data-box .arrow.slide {
        transition: opacity 1.5s ease;
        opacity: 1;
    }

    .data-box .arrow img {
        max-width: 24px;
        height: 24px;
    }

    .data-box .arrow.up {
        background-color: var(--ng-color-aqua02);
    }

        .data-box .arrow.up img {
            transform: translateY(180%);
        }

        .data-box .arrow.up.slide img {
            transition: transform 1s ease;
            transform: translateY(0%);
        }

    .data-box .arrow.down {
        background-color: var(--ng-color-yellow02);
    }

        .data-box .arrow.down img {
            transform: translateY(-180%);
        }

        .data-box .arrow.down.slide img {
            transition: transform 1s ease;
            transform: translateY(0%);
        }


.data-box div {
    display: flex;
}

.data-highlights .data-box {
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08);
    padding: var(--ng-size-32px);
    height: 100%;
}

.data-highlights-columns .data-boxes .row {
    margin-bottom: var(--ng-size-20px);
}

.data-highlights-rows .data-boxes {
    row-gap: var(--ng-size-20px);
    justify-content: center;
}

@media (max-width:991px) {
    .data-highlights-columns .mr-60px {
        margin-right: 0;
    }

    .data-highlights-rows .mr-60px {
        margin-right: 0;
    }

    .data-highlights .data-box {
        padding: var(--ng-size-16px);
    }
}