@use "../utilities" as *;

/**----------------------------------------
START: Home 10 About CSS
----------------------------------------*/
.h10-about {
	&-content {
		&-wrapper {
			max-width: 644px;
			margin-inline-start: auto;
			@media #{$xl} {
				max-width: 629px;
			}
			@media #{$lg} {
				max-width: 524px;
			}
			@media #{$md} {
				max-width: 100%;
			}
			@media #{$sm,$xs} {
				margin-bottom: 30px;
			}
		}
		.desc {
			max-width: 375px;
			font-size: 18px;
			line-height: 1.444;
		}
	}

	&-banner {
		@media #{$md} {
			height: 100%;
		}
	}
	&-clients {
		&.customers-box {
			padding-top: 10px;
			margin-bottom: 28px;
			ul {
				li {
					&:not(:first-child) {
						margin-inline-start: -19px;
						@media #{ $sm,$xs} {
							margin-inline-start: -16px;
						}
					}
					img,
					span {
						width: 57px;
						height: 57px;
						@media #{ $sm,$xs} {
							width: 50px;
							height: 50px;
						}
					}
				}
			}
		}
	}
	&-funfact {
		border-top-style: solid;
		border-color: var(--tj-color-border-1);
		border-bottom: 0;
		padding-bottom: 0;
		margin-bottom: 0;
		position: relative;

		z-index: 0;
		&::before {
			content: "";
			position: absolute;
			top: -2px;
			inset-inline-start: 0;
			width: 32px;
			height: 3px;
			background-color: var(--tj-color-theme-primary);
			z-index: 1;
		}

		.countup-item {
			&:not(:last-child) {
				@media #{$md} {
					padding-inline-end: 30px;
				}
			}
			&:not(:first-child) {
				padding-inline-start: 15px;
				@media #{$sm,$xs} {
					padding: 0;
				}
				@media #{$xs} {
					padding-top: 20px;
				}
				&::after {
					@media #{$sm} {
						inset-inline-start: -26px;
					}
				}
			}
			&::after {
				border: 0;
			}
		}
	}
}

/* !END: Home 10 About CSS  */