@use '../../utils/' as * ;

.vl-counter5{
    position: relative;
    z-index: 1;
    overflow:hidden;
    background: var(--ztc-text-text-6);
    & .shape{
        position: absolute;
        z-index: -1;
        &.shape-1{
            top:0;
            left:0;
        }
        &.shape-2{
            bottom:0;
            left: 30px;
        }
        &.shape-3{
            top:20px;
            left: 33%;
        }
        &.shape-4{
            bottom:20px;
            right: 0;
        }
    }
    & .vl-counter-content{
        margin-right: 110px;
        @media #{$md,$xs}{
            margin-right:0px;
        }
        & .vl-section-title5{
            & .subtitle{
                background: rgba(255, 255, 255, 0.10);
                color:var(--ztc-text-text-1);
            }
            & .title{
                color:var(--ztc-text-text-1);
                line-height: var(--ztc-specing-height52);
            }
            & .para{
                color: rgba(255, 255, 255, 0.80);
            }
            & .btn5{
                & .btn-priamry1{
                    background: var(--ztc-text-text-1);
                    color:var(--ztc-text-text-3);
                    margin-top: 32px;
                    transition: .3s;
                    &:hover{
                        color:var(--ztc-text-text-1);
                        transition: .3s;
                    }
                    & span{
                        background:var(--ztc-text-text-6);
                        color: var(--ztc-text-text-1);
                    }
                }
            }
        }
    }
    & .single-counter-box{
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.20);
        text-align: center;
        padding:32px;
        transition: .3s;
        margin-bottom: 20px;
        @media #{$lg,$xs}{
            padding: 16px;
        }
        & .title{
            color:var(--ztc-text-text-1);
            font-size: var(--ztc-font-size-font-s44);
            line-height: var(--ztc-specing-height44);
            font-family: var(--ztc-family-font2);
            font-weight: var(--ztc-weight-bold);
            transition: .3s;
        }
        & span{
            color: rgba(255, 255, 255, 0.80);
            font-size: var(--ztc-font-size-font-s20);
            line-height: var(--ztc-specing-height20);
            font-family: var(--ztc-family-font2);
            font-weight: var(--ztc-weight-bold);
            display:inline-block;
            transition: .3s;
        }
        &.active{
            background: var(--ztc-text-text-1);
            transition: .3s;
            & .title{
                color:var(--ztc-text-text-3);
                transition: .3s;
            }
            & span{
                color: var(--ztc-text-text-2);
                transition: .3s;
            }
        }
        &.counter-box-2{
            background: var(--ztc-text-text-1);
            & .title{
                color:var(--ztc-text-text-3);
            }
            & span{
                color: var(--ztc-text-text-2);
            }
            &.active{
                background: var(--ztc-text-text-4);
                transition: .3s;
            }
        }
    }

}

// counter box Home 7

.vl-counter-box-wrap7{
    background: var(--ztc-text-text-1);
    border-radius: 8px;
    padding: 50px;
    & .single-counter-box7{
        & .title{
            font-size: var(--ztc-font-size-font-s44);
            line-height: var(--ztc-specing-height44);
            font-weight: var(--ztc-weight-bold);
            font-family: var(--ztc-family-font2);
            color: var(--ztc-text-text-20);
            padding-bottom: 18px;
            & .title{
                padding-bottom: 0;
            }
        }
        & span{
            color: var(--ztc-text-text-21);
            font-size: var(--ztc-font-size-font-s18);
            line-height: var(--ztc-specing-height18);
            font-weight: var(--ztc-weight-mediums);
            display: inline-block;
        }
        margin-bottom: 24px;
        padding-bottom: 24px;
        border-bottom: 1px solid #E8E6E6;
    }
}



// new
.vl-counter-wrap .vl-wrp-counter {
    border-bottom: 1px solid #E8E8E8;
}

.vl-counter-wrap .row [class*=col-]:nth-last-child(-n+2) .vl-wrp-counter {
    padding-bottom: 0;
    border-bottom: 0;
}

.vl-counter-wrap .row [class*=col-]:nth-child(even) .vl-wrp-counter {
    border-left: 1px solid #E8E8E8;
    @media #{$xs}{
        border-left: inherit;
    }
}
.vl-counter-wrap .row [class*=col-]:nth-last-child(-n+2) .vl-wrp-counter {
    padding-bottom: 0;
    border-bottom: 0;
}
.vl-counter-wrap .vl-wrp-counter {
    border-bottom: 1px solid #E8E8E8;
    padding-bottom: 30px;
    padding: 38px 0;
    padding-left: 24px;
    @media #{$xs}{
        padding-left: 0;
        border-bottom: inherit;
    }
}
.vl-counter-wrap .row [class*=col-]:nth-child(1) .vl-wrp-counter {
    padding-top: 0;
}
.vl-counter-wrap .row [class*=col-]:nth-child(2) .vl-wrp-counter {
    padding-top: 0;
}
.vl-counter-wrap{
    background: var(--ztc-text-text-1);
    padding: 50px;
    border-radius: 8px;
    padding-bottom: 26px;
    @media #{$xs}{
        padding: 30px;
        margin-top: 30px;
    }
    @media #{$lg,$md}{
        margin-top: 30px;
    }
    & .vl-wrp-counter{
        & .title{
            font-size: var(--ztc-font-size-font-s44);
            line-height: var(--ztc-specing-height44);
            font-weight: var(--ztc-weight-bold);
            padding-bottom: 18px;
            font-family: var(--ztc-family-font2);
            color: var(--ztc-text-text-20);
        }
        & p{
            color: var(--ztc-text-text-21);
            font-size: var(--ztc-font-size-font-s18);
            line-height: var(--ztc-specing-height18);
        }
    }
}


// Counter Box  Home 8

.vl-counter-wrap-box8{
    display: flex;
    margin-top: 50px;
    & .vl-single-counter-item{
        margin-right: 50px;
        & .title{
            color: var(--ztc-text-text-3);
            font-size: var(--ztc-font-size-font-s44);
            line-height: var(--ztc-specing-height44);
            font-weight: var(--ztc-weight-bold);
            font-family: var(--ztc-family-font2);
        }
        p{
            font-size: var(--ztc-font-size-font-s18);
            line-height: var(--ztc-specing-height18);
            font-weight: var(--ztc-weight-medium);
            display: inline-block;
            padding-top: 18px;
        }
    }
}