/*------------------------------------------------
    ## Counters
------------------------------------------------*/
.counter-item {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    .counter-item__icon {
        margin-right: 20px;
        font-size: 35px;
        color: white;
        flex: none;
        text-align: center;
        line-height: 74px;
        @include size(72px, 74px);
        background-size: 100% 100%;
        background-image: url(../img/shapes/circle-red.png);
        &.counter-item__icon--green {
            background-image: url(../img/shapes/circle-green.png);
        }
        &.counter-item__icon--yellow {
            background-image: url(../img/shapes/circle-yellow.png);
        }
    }
    .counter-item__content {
        font-weight: 800;
        line-height: 1.3;
        font-family: var(--heading-font);
        .count-text {
            display: block;
            font-size: 38px;
            color: var(--heading-color);
            @include res-bl(xs) {
                font-size: 30px;
            }
        }
        h5 {
            margin-bottom: 0;
            font-size: 20px;
        }
    }
}


/* Counter Home_2 */
.counter-area {
    &:before {
        @include size(100%);
        position: absolute;
        content: '';
        left: 0;
        top: 0;
        z-index: -1;
        background: linear-gradient(269.77deg, rgba(255, 255, 255, 0.86) 59.86%, rgba(217, 217, 217, 0) 99.81%);
        @include res-bl(xl) {
            opacity: 0.9;
            background: white;
        }
    }
}

.counter-section-content {
    > i {
        font-size: 25px;
        max-width: 400px;
        font-weight: 700;
        line-height: 1.3;
        display: inline-block;
        font-family: var(--heading-font);
        @include res-bl(xs) {
            font-size: 20px;
        }
        span {
            color: var(--primary-color);
        }
    }
    .counter-btns {
        .btn {
            margin-top: 15px;
            &:not(:last-child) {
                margin-right: 30px;
            }
        }
    }
}