.stats-circle {}

.stats-circle__row {
    margin-top: 50px;
    margin-bottom: -30px;
    justify-content: center;
}

.stats-circle__bottom {
    margin-top: 50px;
}

.stats-circle__item {
    margin-bottom: 30px;
}

.stats-circle__box {
    border-radius: 10px;
    height: 100%;
    padding: 40px 50px;
    background-color: #F5F5F7;
    box-shadow: 5px 5px 14px rgba(107, 107, 107, 0.2);

    & .js-number-countup,
    & .stats-circle__percentage-number {
        color: #6B6B6B;
    }

    & .stats-circle__description {
        & p {
            color: #6B6B6B;
        }
    }
}

.stats-circle__percentage {
    position: relative;
}

.stats-circle__percentage-circle {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #D9D9D9;

    &:before {
        content: '';
        position: absolute;
        top: 20px;
        left: 20px;
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        border-radius: 50%;
        background-color: #F5F5F7;
        z-index: 2;
    }

    .slice,
    .fill {
        width: 150px;
        height: 150px;
        position: absolute;
        border-radius: 50%;
        transform-origin: center center;
        transition: transform 2s;
    }

    .slice {
        clip: rect(0px, 150px, 150px, 75px);
    }

    .fill {
        width: 150px;
        height: 150px;
        position: absolute;
        border-radius: 50%;
        clip: rect(0px, 75px, 150px, 0px);
        background-color: #089CD6;
    }

    .slice-main,
    .fill {
        transform: rotate(0deg);
    }
}

.bg-dark-blue {
    background: #12284C;
    color: #ffffff;
}

.bg-dark-blue h2,
.bg-blue-gradient h2,
.bg-image h2 {
    color: #ffffff;
    -webkit-text-fill-color: #fff;
} 

@media (min-width: 1200px) {
    .stats-circle__percentage-circle {
        width: 200px;
        height: 200px;

        &:before {
            content: '';
            position: absolute;
            top: 25px;
            left: 25px;
            width: calc(100% - 50px);
            height: calc(100% - 50px);
            border-radius: 50%;
            background-color: #F5F5F7;
            z-index: 2;
        }

        .slice,
        .fill {
            width: 200px;
            height: 200px;
        }

        .slice {
            clip: rect(0px, 200px, 200px, 100px);
        }

        .fill {
            width: 200px;
            height: 200px;
            clip: rect(0px, 100px, 200px, 0px);
        }
    }
}

.stats-circle__percentage-number {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    z-index: 3;
}

@media (min-width: 1200px) {
    .stats-circle__percentage-number {
        font-size: 30px;
    }
}

.stats-circle__description {
    margin-top: 20px;

    p:last-child {
        margin-bottom: 0;
    }
}

@media (min-width: 1200px) {
    .stats-circle__description {
        p {
            font-size: 20px;
        }
    }
}