@use "../utilities" as *;

/**----------------------------------------
START: Hero CSS
----------------------------------------*/
.h9-hero {
	position: relative;
	margin: 0 15px 0 15px;
	border-radius: 16px;
	overflow: hidden;

	@media #{$sm, $xs} {
		border-radius: 12px;
		margin: 0 12px 0;
	}
	&-inner {
		background: var(--tj-color-theme-dark);
	}
	&-bg-image {
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
		position: absolute;
		mix-blend-mode: Luminosity;
	}
	&-item {
		min-height: 92.5vh;
		background-color: #0c1e21;
		position: relative;
		&::after {
			position: absolute;
			content: "";
			top: 0;
			inset-inline-start: 0;
			width: 100%;
			height: 100%;
			z-index: 2;
			background: linear-gradient(
				90deg,
				rgba(12, 30, 33, 1) 20%,
				rgba(12, 30, 33, 0.4) 60%,
				rgba(12, 30, 33, 0.1) 100%
			);
		}
		&-wrapper {
			padding: 162px 0 80px;
			min-height: 883px;
			position: relative;

			@media #{$lg} {
				padding: 140px 0 300px 0;
			}
			@media #{ $md} {
				padding: 170px 0 0 0;
			}
			@media #{$sm, $xs} {
				padding: 150px 0 0 0;
			}
		}

		@media #{$xxl} {
			height: 95vh;
		}
		@media #{$xl} {
			min-height: auto;
		}
		@media #{$sm, $xs} {
			min-height: 840px;
		}
	}
	&-content {
		max-width: 1480px;
		margin: 0 auto;
		position: relative;
		z-index: 2;

		.h9-hero {
			&-title {
				color: var(--tj-color-common-white);
				font-size: 168px;
				line-height: 1;
				letter-spacing: -0.03em;
				margin-bottom: 0;
				span {
					display: inline-flex;
					width: 220px;
					height: 121px;
					border-radius: 100px;
					border: 18px solid var(--tj-color-theme-primary);
					position: relative;
					&::before {
						content: "";
						width: 66px;
						height: 66px;
						border-radius: 50%;
						background-color: var(--tj-color-theme-primary);
						position: absolute;
						top: 50%;
						inset-inline-end: 10px;
						transform: translateY(-50%);
						// animation: moving 3s linear infinite;
						@media #{$xxxl,$xxl} {
							width: 55px;
							height: 55px;
						}
						@media #{$xl} {
							width: 50px;
							height: 50px;
						}
						@media #{$lg} {
							width: 40px;
							height: 40px;
						}
						@media #{$md} {
							width: 35px;
							height: 35px;
						}
						@media #{ $xs} {
							width: 30px;
							height: 30px;
						}
						@media #{ $xs} {
							width: 24px;
							height: 24px;
							inset-inline-end: 5px;
						}
					}
					@media #{$xxxl,$xxl} {
						width: 200px;
						height: 105px;
						border-width: 15px;
					}
					@media #{$xl} {
						width: 180px;
						height: 90px;
						border-width: 13px;
					}
					@media #{$lg} {
						width: 160px;
						height: 80px;
						border-width: 12px;
						top: 4px;
					}
					@media #{$md} {
						width: 140px;
						height: 70px;
						border-width: 10px;
					}
					@media #{$sm, $xs} {
						width: 120px;
						height: 60px;
						border-width: 8px;
						top: 4px;
					}
					@media #{ $xs} {
						width: 100px;
						height: 48px;
					}
				}

				@media #{$xxxl,$xxl} {
					font-size: 140px;
				}
				@media #{$xl} {
					font-size: 120px;
				}
				@media #{$lg} {
					font-size: 100px;
				}
				@media #{$md} {
					font-size: 80px;
				}
				@media #{$sm,$xs} {
					font-size: 60px;
				}
			}
		}
		@media #{$xxxl,$xxl,$xl} {
			padding: 0 50px;
		}
		@media #{$lg} {
			max-width: 920px;
		}
		@media #{$md} {
			max-width: 700px;
		}
		@media #{$sm, $xs} {
			padding: 0 15px;
		}
	}
	&-desc-area {
		display: flex;
		flex-wrap: wrap;
		gap: 150px;
		margin-top: 108px;
		margin-inline-start: 220px;
		.title {
			max-width: 160px;
			color: var(--tj-color-common-white);
			position: relative;
			font-weight: var(--tj-fw-sbold);
			padding-top: 15px;
			margin: 0;
			&::before,
			&::after {
				content: "";
				position: absolute;
				top: 0;
				inset-inline-start: 0;
				width: 100%;
				height: 1px;
				background-color: var(--tj-color-border-2);
			}
			&::after {
				width: 32px;
				height: 3px;
				top: -1px;
				background-color: var(--tj-color-theme-primary);
			}
			@media #{$sm} {
				max-width: 135px;
			}
			@media #{$xs} {
				max-width: 100%;
			}
		}
		.desc-inner {
			max-width: 416px;
			.desc {
				font-size: 18px;
				color: var(--tj-color-text-body-2);
				margin-bottom: 0;
				a {
					color: var(--tj-color-common-white);
					display: inline-flex;
					position: relative;
					&::after {
						content: "";
						width: 100%;
						height: 1px;
						background-color: var(--tj-color-common-white);
						position: absolute;
						bottom: 2px;
						inset-inline-end: 0;
					}
					&:hover {
						&::after {
							animation: linehover 0.8s linear;
						}
					}
				}
				@media #{$sm,$xs} {
					font-size: 16px;
				}
			}
			.tj-primary-btn {
				margin-top: 25px;
			}
			@media #{$sm,$xs} {
				max-width: 370px;
			}
		}

		@media #{$xxxl,$xxl} {
			gap: 120px;
			margin-inline-start: 150px;
		}
		@media #{$xl} {
			gap: 70px;
			margin-top: 80px;
			margin-inline-start: 100px;
		}
		@media #{$lg} {
			gap: 70px;
			margin-top: 80px;
			margin-inline-start: 100px;
		}
		@media #{$md} {
			gap: 50px;
			margin-top: 70px;
			margin-inline-start: 70px;
		}
		@media #{$sm,$xs} {
			gap: 30px;
			margin-top: 40px;
			margin-inline-start: 0;
		}
		@media #{$xs} {
			gap: 15px;
		}
	}
	&-social {
		margin-top: 148px;
		@media #{$lg} {
			margin-top: 100px;
		}
		@media #{$md} {
			margin-top: 80px;
		}
		@media #{$sm,$xs} {
			margin-top: 40px;
		}
	}
	&-img {
		position: absolute;
		inset-inline-end: 0;
		bottom: 0;
		max-width: 619px;
		width: 100%;
		height: 360px;
		z-index: 3;
		img {
			height: 150%;
			width: 100%;
			object-fit: cover;
			transition: none;
			position: absolute;
			inset-inline-start: 0;
			top: 0;
		}
		@media #{$xxxl} {
			inset-inline-end: -5%;
		}
		@media #{$xxl} {
			inset-inline-end: -5%;
			max-width: 580px;
			height: 350px;
		}
		@media #{$xl} {
			inset-inline-end: -3%;
			max-width: 510px;
			height: 325px;
			overflow: hidden;
		}
		@media #{$lg} {
			height: 360px;
			overflow: hidden;
		}
		@media #{$md} {
			position: relative;
			margin-top: -50px;
			max-width: 400px;
			height: 280px;
			margin-inline-start: auto;
			overflow: hidden;
		}
		@media #{$sm,$xs} {
			position: relative;
			margin-top: 40px;
			margin-inline-start: auto;
			margin-inline-end: auto;
			overflow: hidden;
		}
		@media #{$xs} {
			height: 280px;
		}
	}
	&-shape-1 {
		max-width: 620px;
		pointer-events: none;
		@media #{$lg,$md} {
			max-width: 450px;
		}
		@media #{$sm,$xs} {
			max-width: 320px;
		}
	}
	&-shape-2 {
		max-width: 609px;
		inset-inline-end: 0;
		pointer-events: none;
		@media #{$lg,$md} {
			max-width: 420px;
		}
		@media #{$sm,$xs} {
			max-width: 300px;
		}
	}
}

@keyframes moving {
	0% {
		inset-inline-start: 60%;
	}
	50% {
		inset-inline-start: 6%;
	}
	100% {
		inset-inline-start: 60%;
	}
}
/* !END: Hero CSS */