.tf-counter {
    .counter-title {
        font-size: 16px;
        font-family: var(--theme-font-primary);
    }
    
    .counter-icon-wrapper span {
        --counter-icon-wrapper: 100px;
        height: var(--counter-icon-wrapper);
        width: var(--counter-icon-wrapper);
        background-color: #F8F8F8;
        @include d-inline-flex();
        @include justify-content-center();
        @include align-items-center();
        line-height: 1;
        font-size: 40px;
        border-radius: 50%;
        color: var(--theme-accent-color);
        @include transition(all .3s);
        margin-bottom: 24px;
    }
    
    .counter-number-wrapper {
        font-family: var(--theme-font-primary);
        font-weight: 700;
        font-size: 45px;
        margin-bottom: 10px;
        line-height: 1;
        color: var(--theme-accent-color);
    }
    
    &:hover {
        .counter-icon-wrapper span {
            background-color: var(--theme-secondary-color);
            color: var(--theme-accent-color);
        }
    }
    
    &.default {
        background-color: #fff;
        overflow: hidden;
        padding: 47px 10px;
        box-shadow: 0 0 4px #e6e6e6;
        position: relative;
        
        &:after {
            position: absolute;
            content: "";
            border: 12px solid #f3f3f4;
            width: 100px;
            height: 100px;
            top: -65px;
            left: -63px;
            border-radius: 0 415px 350px 200px;
            @include transition(all 0.5s ease);
        }
        
        &:hover:after {
            border: 12px solid var(--theme-secondary-color);
        }
        
        .counter-number-wrapper {
            color: var(--theme-accent-color);
        }
    }
    
    &.style1 {
        padding-left: 30px;
        padding-top: 15px;
        padding-bottom: 20px;
        border-radius: 60px / 50px;
        background: -webkit-gradient(linear, left top, right top, from(rgba(255, 117, 6, 0.15)), color-stop(25%, rgba(243, 243, 244, 1)));
        background: -o-linear-gradient(left, rgba(255, 117, 6, 0.15) 0%, rgba(243, 243, 244, 1) 25%);
        background: linear-gradient(to right, rgba(255, 117, 6, 0.15) 0%, rgba(243, 243, 244, 1) 25%);
        
        .counter-number-wrapper {
            color: var(--theme-secondary-color);
        }
    }
    
    &.style2 .counter-number-suffix {
        margin-left: 0;
    }
    
}