@use '../utils' as *;

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

// Counter css start

.tp-counter {
    &__item {
        text-align: center;
        color: var(--tp-common-white);
        &.has-border{
            @media #{$xs,$sm,$md} {
                &::after{
                    display: none !important;
                }
            }
            position: relative;
            &::after{
                position: absolute;
                right: -20px;
                top: -20px;
                content: '';
                width: 1px;
                height:100px ;
                background-color: rgba($color: #fff, $alpha: .2);
                display: inline-block;
            }

        }
        & span {
            & b {
                font-size: 36px;
                display: block;
                line-height: 1;
                position: relative;

                &::after {
                    content: '+';

                }
            }
        }
    }
}

.tp-counter-2 {
    &__bg {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        border-radius: 10px;
    }

    &__icon {
        font-size: 40px;
        display: inline-block;
        margin-bottom: 30px;
    }

    &__item {
        text-align: center;
        color: var(--tp-common-white);

        & span {
            & b {
                font-size: 36px;
                display: block;
                line-height: 1;
                position: relative;

                &::after {
                    content: '+';

                }

            }
        }
    }
}
.tp-pulse-border{
	border-radius: 50%;
	z-index: 1;
	&::before{
		position: absolute;
		content: '';
		left: 50%;
		top: 50%;
		@include transform(translate(-50%, -50%));
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 1px solid rgba($color: #fff, $alpha: .4);
		animation: borderanimate2 2s linear infinite;
		animation-delay: 0s;
		-webkit-animation-delay: 0s;
		animation-delay: 0s;
		@include transition(.3s);
		z-index: -1;
	}
	&::before{
		animation-delay: .7s;
	}
}

.tp-countdown{
    &__video {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 300px;
        & a {
            background-color: var(--tp-common-white);
            @include square-btn(90px,$circle:true);
            display: inline-block;
            font-size: 20px;
            color: var(--tp-theme-primary);
            position: relative;
            &::after{
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                border:1px solid var(--tp-common-white);
                left: 0;
                top: 0;
                transform: scale(1.3);
            }
        }
    }
    &__right{
        @media #{$xs} {
            padding-left: 30px;
            padding-right: 30px;
        }
    }
}
.tp-coundown {
    &__countdown {
        @media #{$xs} {
           background-color: var(--tp-common-white);
           padding:30px 15px ;
           display: inline-block;
        }
        & .cdown {
            padding: 20px 25px;
            background-color: white;
            display: inline-block;
            text-align: center;
            margin-right: 5px;
            border-radius: 5px;
            @media #{$xs} {
                padding: 0;
                margin-right:10px;
            }   
            & p {
                margin-bottom: 0;
            }

        }

        & .time-count {
            font-size: 30px;
            font-weight: 700;
        }
    }
}


.count-down-shapes-1{
    position: absolute;
    left: 50px;
    top: 40px;
    transform: scale(.6);
}
.count-down-shapes-2{
    position: absolute;
    right: 25%;
    transform: scale(.6);
}
.count-down-shapes-3{
    position: absolute;
    right: 0px;
    bottom: 20%;
}

.course__view{
    margin-left: 15px;
}