@use "../utilities" as *;

/**----------------------------------------
START: Hero CSS
----------------------------------------*/
.h5-banner {
	&-section {
		background-color: var(--tj-color-theme-dark);
		border-radius: 12px;
		position: relative;
		overflow: hidden;
		z-index: 1;

		.banner-bg {
			&::before {
				content: "";
				position: absolute;
				width: 100%;
				height: 100%;
				background: linear-gradient(
					-109deg,
					rgba(12, 30, 33, 0.95) 20%,
					rgba(12, 30, 33, 0.2) 40%,
					rgba(12, 30, 33, 0.95) 70%
				);
				z-index: 1;
			}
		}
		.banner-scroll {
			inset-inline-start: 30px;
			bottom: 30px;
			@media #{$xxl,$xl} {
				display: none;
			}
			.scroll-down {
				opacity: 1;
				&:hover {
					margin-bottom: -6px;
				}
			}
		}
		&::after,
		&::before {
			content: "";
			position: absolute;
			top: 5%;
			inset-inline-end: -13%;
			width: 520px;
			height: 520px;
			border-radius: 50%;
			background: var(--tj-color-theme-primary);
			-webkit-filter: blur(80px);
			filter: blur(80px);
			opacity: 0.8;
			backdrop-filter: blur(10px);
			@media #{$xxl} {
				width: 460px;
				height: 460px;
			}
			@media #{$xl} {
				width: 400px;
				height: 400px;
				inset-inline-end: -18%;
			}
			@media #{$lg, $md} {
				width: 350px;
				height: 320px;
			}
			@media #{$sm, $xs} {
				width: 250px;
				height: 250px;
				inset-inline-end: -20%;
				top: 15%;
				-webkit-filter: blur(60px);
				filter: blur(60px);
			}
		}
		&::after {
			top: auto;
			inset-inline-end: auto;
			bottom: -18%;
			inset-inline-start: -15%;
			@media #{$sm, $xs} {
				bottom: -15%;
				inset-inline-start: -20%;
			}
		}
	}
	&-area {
		max-width: 1460px;
		width: 100%;
		min-height: 883px;
		margin-inline-start: auto;
		margin-inline-end: auto;
		position: relative;
		z-index: 2;
		padding-top: 215px;
		padding-bottom: 60px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		@media #{$xxl,$xl,$lg} {
			min-height: 700px;
		}
		.solution-box {
			background-color: rgba(255, 255, 255, 0.1);
			backdrop-filter: blur(5px);
			border-radius: 10px;
			max-width: 366px;
			width: 100%;
			margin-top: -44px;
			margin-inline-start: auto;
			padding: 30px 30px 12px 30px;

			.list-icon {
				color: var(--tj-color-common-white);
				font-size: 20px;
				margin-bottom: 25px;
				display: inline-flex;
				@media #{$sm, $xs} {
					font-size: 18px;
					margin-bottom: 15px;
				}
			}
			.hero-counter {
				color: var(--tj-color-common-white);
				font-size: 96px;
				line-height: 1;
				font-weight: var(--tj-fw-medium);
				display: inline-flex;
				align-items: center;
				sup {
					font-size: 0.5em;
					line-height: 0;
					top: -1.06em;
				}
				@media #{$md} {
					font-size: 75px;
				}
				@media #{$sm, $xs} {
					font-size: 60px;
				}
			}
			.desc {
				color: var(--tj-color-common-white);
				font-size: 18px;
				line-height: 1.444;
				margin-bottom: 2px;
				@media #{$sm, $xs} {
					font-size: 16px;
					margin-bottom: 5px;
				}
			}
			@media #{$xxl,$xl,$lg} {
				margin-top: -244px;
			}
			@media #{ $md} {
				margin-top: 60px;
			}
			@media #{$sm, $xs} {
				max-width: 310px;
				padding: 20px 20px 10px 20px;
				margin-top: 50px;
			}
		}
		@media #{$xxl, $xl, $lg, $md} {
			padding-inline-start: 30px;
			padding-inline-end: 30px;
		}
		@media #{$xl, $md} {
			padding-top: 190px;
		}
		@media #{$lg} {
			padding-top: 160px;
		}
		@media #{$sm, $xs} {
			padding: 140px 12px 15px;
			min-height: 90vh;
		}
		@media #{$xl, $lg} {
			min-height: 700px;
		}
	}
	&-content {
		.banner-title {
			max-width: 715px;
			color: var(--tj-color-common-white);
			font-size: 96px;
			line-height: 1;
			margin-bottom: 30px;
			.tj-image-slider {
				width: 157.32px;
				height: 80px;
				border-radius: 4px;
				position: relative;
				overflow: hidden;
				display: inline-block;
				margin-bottom: -8px;
				margin-inline-end: -10px;
				img {
					height: 100%;
					position: absolute;
					top: 0;
					inset-inline-start: 0;
					width: 100%;
					height: 100%;
					display: none;
					&.active {
						display: block;
					}
				}
				@media #{$lg} {
					width: 138.25px;
					height: 70px;
				}
				@media #{$md} {
					width: 98.75px;
					height: 50px;
					margin-bottom: -3px;
					margin-inline-end: -7px;
				}
				@media #{$sm, $xs} {
					width: 79px;
					height: 40px;
					margin-bottom: 0;
					margin-inline-end: -5px;
				}
				@media #{ $xs} {
					margin-bottom: -3px;
				}
			}
			@media #{$xl} {
				font-size: 85px;
			}
			@media #{$lg} {
				max-width: 600px;
				font-size: 80px;
			}
			@media #{$md} {
				max-width: 560px;
				font-size: 65px;
			}
			@media #{$sm} {
				font-size: 55px;
			}
			@media #{$xs} {
				font-size: 50px;
			}
		}
	}
}
.banner-bg {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
}
.wow {
	visibility: hidden;
}
/* !END: Hero CSS */