@use "mixins/mixins-master" as *;
@use "mixins/flex" as *;
@use "variables" as *;
.thim-sc-counter-box {
	.sc-title {
		font-size: 36px;
		line-height: 1.25;
		font-weight: 500;
		margin-bottom: 15px;
	}

	&.style-1 {
		.sc-title {
			margin-bottom: 30px;
		}
		.counter_box {
			text-align: left;

			.icon_counter {
				margin-bottom: 23px;
			}

			.number {
				margin-bottom: 10px;
			}
		}
	}

	.counter_box {
		position: relative;
		margin-right: 70px;
		// text-align: center;
		display: inline-block;

		&:last-child {
			margin-right: 0;
		}

		.icon_counter {
			font-size: 70px;
			@include transition(0.3s);
		}

		.number {
			font-size: 44px;
			font-weight: 500;
			line-height: 1.25;
			margin-bottom: 16px;
			// text-align: center;
			text-transform: uppercase;
			@include clearfix();
		}

		.title_counter {
			display: block;
			clear: both;

			.title {
				font-size: 16px;
				font-weight: 500;
				line-height: 20px;
				margin: 0;
				text-transform: uppercase;
				@include transition(0.3s);
			}
		}

		&:hover {
			.icon_counter,
			.title_counter .title {
				@include transition(0.3s);
			}
		}

		&:not(:last-child) {
			.separator {
				&:before {
					content: "";
					position: absolute;
					width: 40px;
					height: 4px;
					background-image: radial-gradient(circle 5px, #dfdfdf 12%, transparent 16%);
					background-size: 4px 7px;
					left: 100%;
					top: 32px;
				}
			}
		}
	}

	&.style-2 {
		//.counter-box {
		.counter_box {
			margin-right: 114px;

			&:last-child {
				margin: 0;

				&:after {
					display: none;
				}
			}

			.number {
				margin-bottom: 12px;
			}

			.title_counter {
				.title {
					margin: 0;
				}
			}

			&.has-line {
				.separator {
					background-color: #888;

					&:before {
						content: none;
					}
				}

				&:not(:last-child) {
					.separator {
						&:after {
							content: "";
							position: absolute;
							width: 101px;
							height: 1px;
							background-color: inherit;
							top: 50%;
							left: calc(100% + 15px);
							margin-top: 4px;
							@include rotate(-60deg);
							// @include opacity(0.2);
						}
					}
				}
			}
		}

		//}
	}

	&.demo-coursify {
		padding-top: 146px;
		padding-bottom: 132px;
		@media (max-width: 1440px) {
			padding-top: 80px;
			padding-bottom: 80px;
		}
		@media (min-width: 1280px) {
			.counter_box .number {
				text-align: left;
			}
		}
	}

	&.demo-single-instructor {
		// .counter_box .number {
		// 	font-size: 65px;
		// }
		.counter_box {
			vertical-align: top;
		}
	}

	&.demo-test-prep {
		.counter_box .number {
			font-size: 50px;
		}
	}
}

.thim-sc-counter-box {
	&.circle {
		.sc-counter-circle {
			width: 403px;
			height: 403px;
			border: 1px dotted #cccccc;
			border-radius: 50%;
			position: relative;
			margin: 0 auto;

			.center-icon {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 85px;
				height: 85px;
				background: #fff;
				text-align: center;
				line-height: 85px;
				box-shadow: -7.5px 13px 35px 0 rgba(0, 0, 0, 0.05);
				border-radius: 50%;
			}

			.item-counter-box {
				position: absolute;
				width: 150px;
				height: 150px;
				box-shadow: -7.5px 13px 35px 0 rgba(0, 0, 0, 0.05);
				background-color: #ffffff;
				text-align: center;
				line-height: 150px;
				border-radius: 50%;

				.number {
					line-height: 1;
					position: relative;
					top: 50%;
					transform: translateY(-50%);

					.number_counter,
					.text-number {
						font-size: 36px;
						font-weight: 500;
						line-height: 1.25;
					}

					.title_counter {
						margin-top: 4px;

						.title {
							font-size: 16px;
							font-weight: 400;
							color: $thim_font_body_color;
							text-transform: capitalize;
						}
					}
				}

				&:nth-last-of-type(4) {
					left: 50%;
					top: -63px;
					transform: translateX(-50%);
				}

				&:nth-last-of-type(3) {
					left: -59px;
					top: 50%;
					transform: translateY(-50%);
				}

				&:nth-last-of-type(2) {
					right: -59px;
					top: 50%;
					transform: translateY(-50%);
				}

				&:nth-last-of-type(1) {
					bottom: -63px;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
}
@media (max-width: 880px) and (min-width: 769px) {
	.thim-sc-counter-box {
		&.circle .sc-counter-circle .item-counter-box {
			.number {
				.number_counter,
				.text-number {
					font-size: 20px;
				}
			}
			&:nth-last-of-type(3) {
				left: -30px;
				top: 55%;
				transform: translateY(-50%);
			}
			&:nth-last-of-type(2) {
				right: 30px;
				top: 80%;
			}
			&:nth-last-of-type(1) {
				left: 31%;
				bottom: -30px;
			}
		}
	}
}