@use '../utils' as *;

/*----------------------------------------*/
/*  counter css
/*----------------------------------------*/
.counter-main-wrapper {
    position: relative;
    max-width: 716px;
    margin: 0 auto;
    padding-top: 70px;
    z-index: 2;
    .coin-one {
        position: absolute;
        top: 40px;
        inset-inline-start: -144px;
        z-index: -1;
        @media #{$sm,$md,$lg} {
            max-width: 60px;
            inset-inline-start: 0;
        }
        @media #{$xs} {
            display: none;
        }
        img {
            filter: drop-shadow(0px 4px 144px rgba($white, $alpha: 0.25));
        }
    }
    .coin-two {
        position: absolute;
        bottom: 120px;
        inset-inline-start: -32%;
        z-index: -1;
        @media #{$sm,$md,$lg} {
            bottom: 50px;
            inset-inline-start: -20px;
            max-width: 40px;
        }
        @media #{$xs} {
            display: none;
        }
        img {
            filter: drop-shadow(0px 4px 144px rgba($white, $alpha: 0.25));
        }
    }
    .coin-three {
        position: absolute;
        inset-inline-end: -24%;
        top: 30px;
        z-index: -1;
        @media #{$sm,$md,$lg} {
            inset-inline-end: -20px;
            max-width: 50px;
        }
        @media #{$xs} {
            display: none;
        }
        img {
            filter: drop-shadow(0px 4px 144px rgba($white, $alpha: 0.25));
        }
    }
    .coin-four {
        position: absolute;
        bottom: 50px;
        inset-inline-end: -14%;
        z-index: -1;
        @media #{$sm,$md,$lg} {
            max-width: 50px;
            inset-inline-end: 0;
            bottom: -20px;
        }
        @media #{$xs} {
            display: none;
        }
        img {
            filter: drop-shadow(0px 4px 144px rgba($white, $alpha: 0.25));
        }
    }
    .counter-glow {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50% , -50%);
        height: 100%;
        width: 100%;
        filter: blur(430px);
        opacity: 0.6;
        z-index: -1;
    }
}
.counter-item-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.counter-item {
    padding: 70px 0;
    position: relative;
    @media #{$xs} {
        padding: 50px 0;
    }
    &:not(:nth-child(2n)) {
        border-inline-end: 1px solid rgba($white, $alpha: .2);
    }
    &:not(:nth-child(4n)) {
        border-bottom: 1px solid rgba($white, $alpha: .2);
    }
    &:nth-child(3) {
        border-bottom: 0;
    }
    &:first-child {
        position: relative;
        &::before,
        &::after {
            position: absolute;
            content: "";
            width: 5px;
            height: 5px;
            background: rgba($white, $alpha: .2);
            @include border-radius(50%);
        }
        &::before {
            top: 0;
            inset-inline-end: -3px;
        }
        &::after {
            bottom: -3px;
            inset-inline-start: 0px;
        }
    }

    &:last-child {
        position: relative;
        &::before,
        &::after {
            position: absolute;
            content: "";
            width: 5px;
            height: 5px;
            background: rgba($white, $alpha: .2);
            @include border-radius(50%);
        }
        &::before {
            top: -3px;
            inset-inline-end: 0px;
        }
        &::after {
            bottom: 0;
            inset-inline-start: -3px;
        }
    }
}
.counter-content {
	text-align: center;
	.description {
        font-size: 12px;
        margin-bottom: 5px;
        color: var(--td-secondary);
        font-weight: 500;
	}
	.icon {
		margin-bottom: 10px;
	}
	.title {
        line-height: 1;
        font-size: 56px;
        font-weight: 400;
        @media #{$sm,$md} {
            font-size: 46px;
        }
        @media #{$xs} {
            font-size: 36px
        }
        span {
            font-family: var(--td-ff-body);
        }
	}
}
