@use "../utilities" as *;

/**----------------------------------------
START: Home 7 About CSS
----------------------------------------*/
.h7-about {
	background-color: var(--tj-color-theme-bg);
	border-radius: 12px;
	position: relative;
	overflow: hidden;
	padding-bottom: 15px;
	z-index: 1;
	.sec-heading {
		&.style-7 {
			margin-bottom: 100px;
			@media #{$lg} {
				margin-bottom: 80px;
			}
			@media #{$md, $sm, $xs} {
				margin-bottom: 60px;
			}
			.sec-title {
				margin-bottom: 35px;
			}
			.sub-title {
				margin-top: 12px;
			}
		}
	}
	&-content-inner {
		max-width: 755px;
	}
	&-card {
		margin-bottom: 30px;
		&-icon {
			border-radius: 100%;
			background-color: var(--tj-color-common-white);
			color: var(--tj-color-theme-primary);
			font-size: 48px;
			max-width: 80px;
			width: 100%;
			height: 80px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			margin-bottom: 24px;

			@media #{$md, $sm, $xs} {
				max-width: 80px;
				height: 80px;
				font-size: 56px;
			}
		}
		.desc {
			margin-bottom: 0;
		}
	}

	&-banner {
		border-radius: 12px;
		overflow: hidden;
		img {
			width: 100%;
			border-radius: 12px;
		}
	}
	&-counter-wrapper {
		.style-2 {
			border-radius: 10px;
			overflow: hidden;
			min-height: 345px;
			justify-content: space-between;
			&.countup-item {
				.counter-title {
					font-weight: var(--tj-fw-medium);
					width: 100%;
					padding-bottom: 12px;
					border-bottom: 1px solid var(--tj-color-border-1);
				}
				.steps {
					color: var(--tj-color-text-body-3);
				}
				.count-text {
					font-size: 18px;
					font-weight: var(--tj-fw-regular);
					letter-spacing: 0;
					line-height: 1.44;
				}
			}
			&.img-box {
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center;
			}
			&.customers-box {
				.customers-text {
					font-size: 32px;
					font-weight: var(--tj-fw-medium);
					line-height: 1.25;
					max-width: 343px;
					letter-spacing: -0.03em;
				}
				.customers-bg {
					opacity: 0.5;
				}
				.text-btn {
					justify-content: flex-start;
					.btn-text {
						color: var(--tj-color-common-white);
					}
					.btn-icon {
						background-color: var(--tj-color-heading-primary);
					}
				}
			}
		}
	}
}

/* !END: Home 7 About CSS  */