@use "../utilities" as *;

/**----------------------------------------
START: Countup CSS
----------------------------------------*/
.h8-funfact {
	&-banner {
		max-width: 585px;
		position: relative;
		margin-bottom: 40px;
		&-img {
			width: 100%;
			height: 100%;

			position: relative;
			border-radius: 12px;
			overflow: hidden;
			@media #{$xs} {
				height: 440px;
			}
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			&::after {
				content: "";
				position: absolute;
				top: 0;
				inset-inline-start: 0;
				width: 100%;
				height: 100%;
				background-color: var(--tj-color-theme-dark);
				opacity: 0.25;
			}
		}

		.box-area {
			max-width: 239px;
			bottom: 0;
			inset-inline-end: 0;
			inset-inline-start: inherit;
			padding: 15px 0 0 15px;
			border-start-start-radius: 12px;
			border-start-end-radius: 0;
			&::before {
				inset-inline-start: inherit;
				inset-inline-end: 0;
				transform: rotate(180deg);
			}
			&::after {
				transform: rotate(180deg);
				inset-inline-start: -12px;
				inset-inline-end: inherit;
			}

			@media #{$xs} {
				max-width: 215px;
			}
		}
		@media #{$md} {
			max-width: 100%;
		}
	}
	&-wrapper {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}
	.pl-0 {
		padding-inline-start: 3px;
		@media #{$xl,$lg,$md,$sm,$xs} {
			padding-inline-start: 12px;
		}
	}
	&-item {
		&.countup-item {
			padding: 41px 35px;
			@media #{$lg,$sm} {
				padding: 30px 25px;
			}
			@media #{$xs} {
				padding: 20px 20px 30px;
			}
			.count-inner {
				display: flex;
				padding-top: 0;

				@media #{$xs} {
					flex-direction: column;
					gap: 25px;
				}
			}

			.counter-desc {
				padding-inline-start: 30px;
				border-inline-start: 1px dashed var(--tj-color-border-1);
				@media #{$xs} {
					padding-inline-start: 0;
					padding-top: 20px;
					border-inline-start: 0;
					border-top: 1px dashed var(--tj-color-border-1);
				}
				.counter-title {
					margin-bottom: 20px;
					line-height: 1;
				}
				.count-text {
					margin-bottom: 0;
					font-weight: var(--tj-fw-regular);
				}
			}
			.inline-content {
				margin: 0;
				flex-shrink: 0;
				transform: translateY(-19px);
				font-size: 68px;
				width: 180px;
				@media #{$lg} {
					font-size: 65px;
					transform: translateY(-32px);
				}
				@media #{$md} {
					font-size: 60px;
				}
				@media #{ $sm} {
					font-size: 60px;
				}
				@media #{$xs} {
					font-size: 55px;
					transform: translateY(0px);
					justify-content: flex-start;
					width: 100%;
				}
			}
		}
	}
}

/* !END: Countup CSS */