@use "../utilities" as *;

/**----------------------------------------
START: Hero CSS
----------------------------------------*/

.h6-hero {
	position: relative;

	&.section-gap-x {
		@media #{$sm,$xs} {
			border-start-end-radius: 12px;
			border-start-start-radius: 12px;
		}
	}
	.banner-area {
		flex-direction: row-reverse;
		gap: 15px;
		flex-wrap: nowrap;
		@media #{$md,$sm,$xs} {
			flex-direction: column;
		}
	}
	.banner-content {
		margin-inline-start: 0;
		max-width: 100%;
		@media #{$xl,$lg,$md,$sm,$xs} {
			padding: 0;
		}

		.banner-title {
			color: var(--tj-color-heading-primary);
			line-height: 1.12;
			max-width: 681px;
			margin-bottom: 24px;
		}
	}
	.banner-left-box {
		background-color: var(--tj-color-theme-bg);
		padding: 225px 60px 60px 50px;
		margin-inline-end: 0;
		width: 50%;
		border-radius: 16px;
		@media #{$xxl,$xl} {
			padding: 195px 40px 40px 40px;
		}
		@media #{$lg} {
			padding: 180px 30px 40px 30px;
		}
		@media #{$md,$sm,$xs} {
			padding: 170px 30px 40px 30px;
			width: 100%;
		}
		@media #{$sm,$xs} {
			border-radius: 14px;
		}
		@media #{$sm} {
			padding: 150px 15px 30px 15px;
		}
		@media #{$xs} {
			padding: 140px 15px 30px 15px;
		}
		&::before {
			display: none;
		}
	}
	.banner-right-box {
		@media #{$xs} {
			min-height: auto;
		}
	}
	&-bottom {
		display: flex;
		justify-content: space-between;
		gap: 30px;
		align-items: flex-end;
		@media #{$lg,$xs} {
			gap: 15px;
			padding-top: 50px;
			flex-wrap: wrap;
		}
		@media #{$xs} {
			padding-top: 40px;
		}
	}
	&-history {
		max-width: 348px;
		&-title {
			padding-bottom: 15px;
			margin-bottom: 15px;
			position: relative;
			z-index: 0;
			&::after,
			&::before {
				content: "";
				width: 100%;
				height: 1px;
				background-color: var(--tj-color-border-1);
				position: absolute;
				inset-inline-start: 0;
				bottom: 0;
				transform: translateY(50%);
				z-index: -2;
			}
			&:after {
				width: 32px;
				height: 3px;
				background-color: var(--tj-color-theme-primary);
			}
		}
	}
	&-card {
		&-wrapper {
			position: relative;
			z-index: 0;
			max-width: 315px;
			padding: 15px;
			background-color: var(--tj-color-common-white);
			border-radius: 12px;
			@media #{$xl,$sm} {
				max-width: 250px;
			}
			@media #{$sm,$xs} {
				margin-inline-start: auto;
				margin-inline-end: auto;
			}

			.swiper-pagination-area {
				position: absolute;
				inset-inline-start: auto;
				inset-inline-end: 15px;
				bottom: 20px;
				text-align: end;
				line-height: 0;
				margin-top: 0;
				z-index: 1;
				.swiper-pagination-bullet {
					width: 8px;
					&-active {
						width: 8px;
					}
				}
			}
		}

		&-banner {
			border-radius: 12px;
			position: relative;
			z-index: 0;
			overflow: hidden;
			&::after {
				content: "";
				position: absolute;
				inset-inline-start: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: var(--tj-color-theme-dark);
				opacity: 0.3;
				z-index: 1;
			}
		}
		&-video {
			width: 60px;
			height: 60px;
			border-radius: 100%;
			background-color: rgba(255, 255, 255, 0.1);
			backdrop-filter: blur(10px);
			border: 1px solid var(--tj-color-grey-3);
			position: absolute;
			z-index: 2;
			inset-inline-start: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 1;
			animation: pulse4 1.3s ease-out infinite;
			i {
				color: var(--tj-color-common-white);
				transition: all 0.4s;
				padding-inline-start: 4px;
			}
			&:hover {
				i {
					transform: scale(1.1);
				}
			}
		}
		&-content {
			padding: 15px 5px 5px;
			font-weight: var(--tj-fw-sbold);
		}
		&-title {
			margin: 0;
			opacity: 0;
			transform: translateY(10%);
			transition: 0.3s 0.6s;
			a {
				&:hover {
					color: var(--tj-color-theme-primary);
				}
			}
		}
		&-wrapper {
			.swiper-slide-active {
				.h6-hero-card-title {
					opacity: 1;
					transform: translateY(0);
					max-width: 207px;
				}
			}
		}
	}
	.banner-left-box {
		border-radius: 16px;
		@media #{$sm,$xs} {
			border-radius: 14px;
		}
	}
}

/* !END: Hero CSS */