@use "../utilities" as *;

/**----------------------------------------
START: Home 5 About CSS
----------------------------------------*/
.h6-about {
	background-color: var(--tj-color-theme-dark);
	border-radius: 12px;
	position: relative;
	overflow: hidden;
	z-index: 1;
	&-content {
		&.about-content-area {
			background-color: transparent;
			max-width: 561px;
			padding: 0;
			@media #{$md,$sm,$xs} {
				max-width: 100%;
			}
		}
		.sec-heading.style-2 .sub-title {
			background-color: var(--tj-color-grey-3);
		}
		.sec-title {
			color: var(--tj-color-common-white);
			margin-bottom: 16px;
		}
		.desc {
			color: var(--tj-color-text-body-2);
			margin-bottom: 0;
		}
	}
	&-funfact {
		&-wrapper {
			background-color: rgba(255, 255, 255, 0.1);
			backdrop-filter: blur(10px);
			width: 100%;
			border-radius: 8px;
			width: 100%;
			margin-bottom: 30px;
			position: relative;
			z-index: 0;
		}
		display: flex;
		padding: 20px 30px 26px;
		width: 100%;
		@media #{$xs} {
			flex-wrap: wrap;
			padding: 20px 15px 26px;
		}
		.countup-item {
			width: 50%;
			padding: 0;
			align-items: flex-start;
			&:not(:last-child) {
				padding-inline-end: 45px;
			}
			&:not(:first-child) {
				padding-inline-start: 30px;
				position: relative;
				z-index: 0;
				&::after {
					content: "";
					position: absolute;
					inset-inline-start: 0;
					top: 52%;
					transform: translateY(-50%);
					width: 0;
					height: 88%;
					border-inline-end: 1px dashed var(--tj-color-border-3);
				}
			}

			.count-text {
				max-width: 205px;
				color: var(--tj-color-text-body-2);
			}
			.inline-content {
				margin-bottom: 15px;
				@media #{$xs} {
					margin-bottom: 5px;
				}
			}
			@media #{$xs} {
				width: 100%;
				text-align: start;
				&:not(:last-child) {
					padding-inline-end: 0;
					padding-bottom: 20px;
				}
				&:not(:first-child) {
					padding-inline-start: 0;
					padding-top: 15px;
					&::after {
						inset-inline-start: 50%;
						top: 0;
						transform: translateX(-50%);
						width: 100%;
						height: 0;
						border-inline-end: 0;
						border-top: 1px dashed var(--tj-color-border-3);
					}
				}
			}
		}
		&-shape {
			position: absolute;
			bottom: 0;
			inset-inline-end: 0;
			z-index: -1;
			border-radius: 8px;
			height: 100%;
			overflow: hidden;
			img {
				height: 100%;
			}
		}
	}
	&-img {
		margin-inline-start: 60px;
		margin-inline-end: 0;
		@media #{$lg} {
			margin-inline-start: 15px;
		}
		@media #{$md,$sm,$xs} {
			margin-inline-start: 0;
			margin-top: 50px;
		}
	}
	&-box {
		inset-inline-start: 25px;
		bottom: 25px;
		padding: 0;
		background-color: transparent;
		max-width: 248px;
		&::before,
		&::after {
			display: none;
		}
		.customers-box {
			border-radius: 10px;
			background-color: rgba(255, 255, 255, 0.1);
			backdrop-filter: blur(10px);
			.customers-text {
				margin-top: 24px;
				color: var(--tj-color-common-white);
				font-size: 20px;
				font-weight: var(--tj-fw-sbold);
			}
		}
	}
}

/* !END: Home 5 About CSS  */