/*******************************************************/
/******************* ## Counter Area *******************/
/*******************************************************/
.count-text
    display: block
    font-size: 40px
    font-weight: 700
    color: $primary-color
    font-family: $heading-font
    &.m:after
        content: 'M'
        font-size: 30px
    &.k:after
        content: 'K'
    &.plus:after
        content: '+'
    &.percent:after
        content: '%'
        
.counter-title
    color: #333333
    font-size: 16px
    margin-bottom: 0
    
.counter-inner-wrap
    +res-ab(xs)
        display: flex
        flex-wrap: wrap
    .counter-text-wrap
        margin-top: 25px
        &:not(:last-child)
            +res-ab(xs)
                margin-right: 30px
                padding-right: 30px
                border-right: 1px solid #cbae45
    &.style-two
        text-align: center
        justify-content: center
        +res-ab(lg)
            .counter-text-wrap
                &:not(:last-child)
                    margin-right: 88px
                    padding-right: 88px
            .count-text
                font-size: 70px
                font-weight: 700
        .count-text
            line-height: 1
            color: $yellow-color
            &:after
                font-size: 1em
        .counter-title
            color: white
    
/* Counter Two */
.counter-two-area
    +res-ab(xl)
        background-size: 100% 100%
    
/* Counter Three */
.counter-three-wrap
    display: flex
    flex-wrap: wrap
    justify-content: space-between
.counter-style-two
    max-width: 240px
    position: relative
    margin-bottom: 30px
    padding-left: 40px
    margin-right: 30px
    &:before
        content: ''
        +poLT(0, 22px)
        +size(1px, 50px)
        background: #c4bb8c
    &:first-child
        +res-ab(xl)
            padding-left: 0
            &:before
                display: none
    &:last-child
        +res-ab(xl)
            margin-right: 0
    .count-text
        line-height: 1
        margin-bottom: 5px
        color: $secondary-color
        &.m:after
            font-size: 1em
            text-transform: lowercase
        +res-ab(xs)
            font-size: 60px
    .counter-title
        display: flex
        font-size: 17px
        &:before
            content: "\f054"
            font-size: 20px
            margin-top: 5px
            font-style: normal
            margin-right: 18px
            color: $secondary-color
            font-family: 'Font Awesome 5 Pro'
        
.color-primary
    .count-text
        color: $primary-color
    .counter-title
        &:before
            color: $primary-color
        
/* Counter Four */
.counter-four-area
    +overlay($secondary-color, 0.95)
    &:before
        mix-blend-mode: multiply
    
.counter-wrap-three
    display: flex
    flex-wrap: wrap
    justify-content: center
    .counter-item-three
        position: relative
        &:not(:last-child)
            margin-right: 80px
            padding-right: 80px
            +res-bl(xxl)
                margin-right: 35px
                padding-right: 35px
            +res-bl(md)
                margin-right: 0
                padding-right: 0
            &:after
                content: ''
                +poRT(0, 50%)
                +size(1px, 44%)
                background: #6e6e6e
                transform: translateY(-50%)
                +res-bl(md)
                    display: none
.counter-item-three
    margin-bottom: 50px
    .icon
        text-align: center
        margin-bottom: 25px
    .content
        display: flex
        align-items: center
        .counter-text-wrap
            +res-bl(xs)
                width: 45%
                flex: none
        .left-text,
        .counter-title
            color: white
            font-weight: 700
            +res-ab(lg)
                font-size: 20px
            +res-bl(xs)
                font-size: 16px
                line-height: 1.5
            span
                color: $primary-color
        .left-text
            max-width: 170px
            text-align: right
            margin-right: 30px
        .count-text
            color: white
            line-height: 1
            min-width: 100%
            font-size: 70px
            font-weight: 700
            margin-bottom: 10px
            font-family: $heading-font-two
            +res-bl(lg)
                font-size: 60px
            +res-bl(xs)
                font-size: 50px