@use "../utilities" as *;

/* START: Hero CSS */

.h7-hero-slider {
	position: relative;
	overflow: hidden;
	.swiper-slide {
		height: auto;
		display: inline-flex;
	}
	.tj-slider-section {
		width: 100%;
		&::before {
			width: 100%;
			background-color: var(--tj-color-theme-dark);
			opacity: 0.55;
		}

		.slider {
			&-wrapper {
				justify-content: center;
				text-align: center;
			}
			&-content {
				max-width: 750px;

				.sub-title {
					color: var(--tj-color-common-white);
					font-size: 14px;
					letter-spacing: 0.12em;
					padding: 4px 12px;
					margin-bottom: 18px;
					display: inline-flex;
					align-items: center;
					gap: 6px;
				}
				.slider-title {
					line-height: 1.0833;
					margin-bottom: 15px;
					@media #{$xs} {
						font-size: 39px;
					}
				}
				.desc {
					color: var(--tj-color-common-white-2);
					font-size: 18px;
					max-width: 530px;
					margin: 0 auto;
					transform: translateY(50px);
					transition: all 1s;
					transition-delay: 1.8s;
					opacity: 0;

					p {
						margin-bottom: 0;
					}
				}

				.hero-action {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: wrap;
					gap: 15px 20px;
					margin-top: 30px;
				}
				.slider-button {
					margin-top: 0;

					transition-delay: 2.2s;
					&:last-child {
						background: transparent;
						transition-delay: 2.5s;
					}
				}

				.call-btn-style-2 {
					display: inline-flex;
					gap: 8px;
					align-items: center;
					.icon {
						display: inline-flex;
						align-items: center;
						justify-content: center;
						width: 54px;
						height: 54px;
						border-radius: 50%;
						background-color: rgba(247, 247, 247, 0.1);
						backdrop-filter: blur(50px);
						font-size: 20px;
						line-height: 1;
						color: var(--tj-color-common-white);
						transition: all 0.4s ease-in-out 0s;
					}
					.text {
						display: inline-flex;
						line-height: 1;
						color: var(--tj-color-common-white);
						font-weight: var(--tj-fw-bold);
						position: relative;
						&::before {
							content: "";
							position: absolute;
							bottom: -2px;
							inset-inline-start: auto;
							inset-inline-end: 0;
							width: 0;
							height: 1px;
							background-color: var(--tj-color-common-white);
							-webkit-transition: all 0.3s ease-in-out 0s;
							transition: all 0.3s ease-in-out 0s;
						}
					}
					&:hover {
						.icon {
							background-color: var(--tj-color-theme-primary);
						}
						.text {
							&::before {
								width: 100%;
								inset-inline-start: 0;
								inset-inline-end: auto;
							}
						}
					}
				}
			}
		}
	}
	&.tj-hero-slider {
		&.style-1 {
			.tj-navigation {
				position: static;
			}
			.tj-btn {
				position: absolute;
				inset-inline-start: 50px;
				top: 50%;
				transform: translateY(-50px);
				z-index: 10;
				width: 60px;
				height: 60px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				color: var(--tj-color-common-white);
				opacity: 0;
				transition: all 0.4s;
				visibility: hidden;

				@media #{$sm,$xs} {
					width: 48px;
					height: 48px;
					font-size: 14px;
					inset-inline-start: 15px;
				}
				&-next {
					inset-inline-start: auto;
					inset-inline-end: 50px;
					@media #{$sm,$xs} {
						inset-inline-end: 15px;
					}
				}
				svg {
					position: absolute;
					inset-inline-start: 0;
					top: 0px;
					z-index: 10;
					width: 100%;
					height: 100%;
					stroke-width: 1px;
					stroke: var(--tj-color-common-white);
					fill: none;
					stroke-dashoffset: calc(125.6px * (1 - 0));
					stroke-dasharray: 125.6;
					transform: rotate(90deg);
					transition: all 0.6s;
					&:first-child {
						stroke-dashoffset: calc(125.6px * (1 - 1));
						stroke: rgba(206, 215, 224, 0.2);
					}
				}

				&:hover {
					svg {
						stroke-dashoffset: calc(125.6px * (1 - 1));
					}
				}
			}
		}

		&:hover {
			&.style-1 {
				.tj-btn {
					inset-inline-start: 30px;
					opacity: 1;
					visibility: visible;

					@media #{$sm,$xs} {
						inset-inline-start: 15px;
					}
					&-next {
						inset-inline-start: auto;
						inset-inline-end: 30px;
						@media #{$sm,$xs} {
							inset-inline-end: 15px;
						}
					}
				}
			}
		}
	}

	.swiper-slide-active .slider-content .desc {
		transform: translateY(0);
		opacity: 1;
	}

	.tj-hero-shape {
		position: absolute;
		inset-inline-start: 0;
		bottom: -1px;
		background-color: var(--tj-color-common-white);
		width: 101%;
		aspect-ratio: 1920 / 166;
		mask-image: url("/images/icons/hero-bottom-shape.svg");
		mask-position: top center;
		mask-repeat: no-repeat;
		mask-size: contain;
		z-index: 1;
		@media #{$md} {
			inset-inline-start: -1px;
		}
		@media #{$lg,$sm,$xs} {
			inset-inline-start: -4px;
			width: 102%;
		}
		&::after {
			content: "";
			position: absolute;
			inset-inline-start: -1px;
			bottom: 0;
			height: 100%;
			width: 99%;
			background-color: var(--tj-color-theme-primary);
			mask-image: url("/images/icons/hero-bottom-shape-2.svg");
			mask-position: top left;
			mask-repeat: no-repeat;
			mask-size: contain;
			z-index: 1;
		}
	}
}
// defalt section heading style
.sec-heading.h7-section-heading .sub-title {
	&::before,
	&::after {
		display: none;
	}
	padding-inline-start: 9px;
}
/* !END: Hero CSS */