@use '../abstract' as *;

/*----------------------------------------*/
/*  13. COUNTER CSS START
/*----------------------------------------*/

.counter{
    &__item{}
    &__icon{
        margin-bottom: 15px;
        & i{
            font-size: 45px;
            color: $d-orange;
        }
        &-4{
            & i{
                color: $d-red;
            }
        }
        &-6{
            & i{
                color: $white;
            }
        }
        &-8{
            & i{
                color: $d-yellow-4;
            }
        }
    }
    &__content{
        & h5{
            margin-bottom: 0;
            font-size: 50px;
            font-weight: 700;
            color: $white;
        }
        & p{
            font-size: 18px;
            font-weight: 500;
            color: $white;
            text-transform: capitalize;
            margin-bottom: 0;
        }
        &-4{
            & h5{
                color: $black-2;
            }
            & p{
                color: $black-2;
            }
        }
        &-5{
            & h5{
                color: $d-blue-dark-3;
            }
            & p{
                color: $black-2;
            }
        }
        &-6{
            & h5{
                font-weight: 400;
            }
        }
        &-7{
            & p{
                text-transform: uppercase;
            }
        }
        &-11{
            & p{
                font-size: 16px;
            }
        }
    }
    &__shape{
        &-1{
            position: absolute;
            right: 0;
            bottom: 0;
        }
    }
    &__overlay{
        position: relative;

        &::after{
            position: absolute;
            content: '';
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba($color: #000000, $alpha: .6);
            z-index: -1;
        }
        &-8{
            &::after{
                background: rgba($color: #000001, $alpha: .13);
            }
        }
        &-11{
            &::after{
                background: rgba($color: #0C0C0C, $alpha: .6);
            }
        }
    }
    &__pb-260{
        padding-bottom: 260px;
    }
}

.counter-orange-color{
    & .counter__icon i{
        color: $d-orange;
    }
}