@use "../utilities" as *;

/**----------------------------------------
START: Service CSS
----------------------------------------*/
.h9-service {
	background-color: var(--tj-color-theme-dark);
	position: relative;
	z-index: 0;
	border-radius: 12px;
	overflow: hidden;
	&.section-gap {
		padding-top: 0;
	}
	.pin-spacer:has(.sec-heading.style-8) {
		@media #{$md, $sm, $xs} {
			height: auto !important;
		}
	}
	.sec-heading {
		&.style-8 {
			padding-top: 120px;
			margin-bottom: 0;
			z-index: 2;
			@media #{$lg} {
				padding-top: 100px;
			}
			@media #{$md, $sm, $xs} {
				padding-top: 70px;
				&.tj-sticky-panel-2 {
					position: relative !important;
					inset-inline-start: 0 !important;
					transform: none !important;
					height: auto !important;
					max-height: inherit !important;
					margin-bottom: -30px !important;
				}
			}

			.sec-title {
				color: var(--tj-color-common-white);
				@media #{$xl} {
					font-size: 44px;
				}
				@media #{$lg} {
					font-size: 36px;
				}
				@media #{$md,$sm,$xs} {
					max-width: 100%;
				}
			}
			.h9-service-more {
				margin-top: 24px;
			}
		}
	}
	&-wrapper {
		.service-item.style-5 {
			padding: 30px 30px 35px;
			background-color: var(--tj-color-theme-bg-3);
			@media #{$sm,$xs} {
				padding: 20px 15px 15px;
			}
			.service-content-area {
				padding: 0;
				margin-bottom: 40px;
				flex-direction: row;
				gap: 22px;
				position: relative;
				z-index: 0;
				@media #{$xs} {
					flex-direction: column;
					.service-icon {
						margin-bottom: 5px;
					}
				}
				.service-content {
					max-width: 100%;
				}
				.title {
					max-width: 300px;
				}
			}
			.h9-service-nav {
				font-size: 59px;
				color: var(--tj-color-common-white);
				font-weight: var(--tj-fw-sbold);
				position: absolute;
				inset-inline-end: 0;
				top: -10px;
				z-index: 1;
				transform: rotate(-45deg);
				@media #{$sm,$xs} {
					font-size: 50px;
					inset-inline-end: -9px;
					top: -16px;
				}
				&:hover {
					transform: rotate(0deg);
					color: var(--tj-color-theme-primary);
				}
			}
			.service-img {
				max-width: 100%;
				height: 433px;
				border-radius: 11px;
				overflow: hidden;
				margin-inline-start: 10px;
				@media #{$sm,$xs} {
					margin-inline-start: 0;
					height: 300px;
				}
				img {
					height: 100%;
					width: 100%;
					object-fit: cover;
					transition: transform 500ms;
					transform-origin: center center;
					transform: perspective(0) rotateX(0) rotateY(0) scaleX(1) scaleY(1);
					border-radius: 11px;
				}
			}
			&:hover {
				.service-img {
					img {
						transform: perspective(400px) rotateX(0.09deg) rotateY(0) scale(1.1);
					}
				}
			}
		}
	}
}

// scroll indicator
.tj-scroll-progress {
	display: flex;
	gap: 15px;
	margin-bottom: 60px;
	background-color: var(--tj-color-theme-dark);
	padding-top: 120px;
	z-index: 1;
	@media #{$lg} {
		padding-top: 100px;
	}
	@media #{$md, $sm, $xs} {
		padding-top: 70px;
		margin-bottom: 30px;
	}
	&::before {
		content: "";
		position: absolute;
		bottom: -48px;
		inset-inline-start: 0;
		width: 100%;
		height: 48px;
		pointer-events: none;
		background: linear-gradient(
			180deg,
			var(--tj-color-theme-dark),
			transparent
		);
	}

	&-item {
		display: flex;
		align-items: center;
		gap: 15px;
		.tj-scroll-progress {
			&-sln {
				font-weight: var(--tj-fw-sbold);
				color: var(--tj-color-grey-2);
				line-height: 1;
				margin-bottom: 0;
			}
			&-ind {
				width: 0;
				height: 1px;
				background-color: var(--tj-color-border-2);
				position: relative;
				z-index: 0;
				transition: 0.3s;
				&-inner {
					position: absolute;
					inset-inline-start: 0;
					top: -1px;
					width: 0;
					height: 3px;
					transition: 0.3s 0.3s;
					background-color: var(--tj-color-theme-primary);
				}
			}
		}
		&:last-child {
			.tj-scroll-progress {
				&-ind {
					opacity: 0;
					visibility: hidden;
				}
			}
		}
		&.active {
			.tj-scroll-progress {
				&-sln {
					color: var(--tj-color-common-white);
				}
				&-ind {
					width: 72px;
					&-inner {
						width: 100%;
					}
				}
			}
		}
	}
}
/* !END: Service CSS */