@use "../utilities" as *;

/**----------------------------------------
START: Home 5 About CSS
----------------------------------------*/
.h5-about {
	background-color: var(--tj-color-theme-dark);
	border-radius: 12px;
	position: relative;
	overflow: hidden;
	z-index: 1;
	.bg-shape-3 {
		top: 0;
		transform: translate(19%, -20%) scaleY(-1);
		bottom: auto;
	}
	&-content {
		margin-bottom: 60px;
		&.style-3 {
			.sec {
				&-heading {
					.h5-sec-title-wrapper {
						flex-grow: 1;
					}
					.subtitle-text {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
					}
					.sec {
						&-title {
							color: var(--tj-color-common-white);
							width: 100%;
							margin-bottom: 24px;
							.line {
								position: relative;
								-webkit-background-clip: text;
								background-clip: text;
								color: transparent;
								--highlight-offset: 0%;
								background-image: linear-gradient(
									90deg,
									var(--tj-color-common-white) var(--highlight-offset),
									var(--tj-color-text-body-3) var(--highlight-offset)
								);
							}
						}
					}
				}
			}
		}
		&-right {
			display: flex;
			gap: 20px;
			width: 67.2%;
			@media #{$md,$sm, $xs} {
				width: 100%;
				gap: 15px;
			}
			@media #{$xs} {
				flex-direction: column;
			}
		}
	}

	&-counter {
		font-size: 96px;
		line-height: 1.04;
		font-weight: var(--tj-fw-medium);
		letter-spacing: -0.03em;
		color: var(--tj-color-common-white);
		display: inline-flex;
		align-items: center;
		margin-bottom: -24px;
		&-symbol {
			line-height: 1;
			margin-bottom: 5px;
			display: inline-block;
		}
		@media #{$xl} {
			font-size: 90px;
		}
		@media #{$lg} {
			font-size: 86px;
		}
		@media #{$md,$sm} {
			font-size: 80px;
			margin-bottom: 0;
		}
		@media #{$xs} {
			font-size: 76px;
			margin-bottom: 0;
		}
	}
}

.h5-client-item {
	padding-inline-end: 15px;
	.client-logo {
		width: 254px;
		height: 254px;
		background-color: inherit;
		position: relative;
		overflow: hidden;
		z-index: 0;
		transition: all 0.5s ease-in-out;
		background-color: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(10px);
		@media #{$md,$sm} {
			width: 200px;
			height: 200px;
		}
		@media #{$xs} {
			width: 150px;
			height: 150px;
		}
		&:before,
		&::after {
			content: "";
			position: absolute;
			inset-inline-start: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
			transition: all 0.5s ease-in-out;
			opacity: 0;
		}
		&::before {
			content: "";
			position: absolute;
			inset: 0;
			background: url("../images/brands/h5-brand-bg.webp") no-repeat center;

			background-size: cover;
			mix-blend-mode: luminosity;
			z-index: -2;
			pointer-events: none;
		}
		&::after {
			background: rgba(30, 138, 138, 0.6);
		}

		&:hover {
			border-radius: 100%;
			backdrop-filter: blur(0);
			background: rgba(30, 138, 138, 0.7);
			&::before,
			&::after {
				opacity: 1;
			}
		}
	}
}
/* !END: Home 5 About CSS  */