@use "../utilities" as *;

/* START: Hero CSS */

.h6-hero {
	&-section {
		position: relative;
		z-index: 1;
		overflow: hidden;
		padding-top: 120px;
		.hero-shapes-2,
		.hero-shapes-1 {
			position: absolute;
			top: 220px;
			inset-inline-start: -90px;
			z-index: -1;
			max-width: 220px;
			width: 100%;
			img {
				width: 100%;
			}
			@media #{$lg, $md} {
				max-width: 180px;
			}
			@media #{$sm, $xs} {
				max-width: 140px;
			}
		}
		.hero-shapes-2 {
			inset-inline-start: inherit;
			inset-inline-end: -100px;
			@media #{$sm, $xs} {
				inset-inline-end: -80px;
			}
		}
		@media #{$md, $sm, $xs} {
			padding-top: 140px;
		}
	}
	&-content {
		max-width: 880px;
		margin: 0 auto;
		text-align: center;
		.sub-title {
			background-color: var(--tj-color-theme-bg);
			color: var(--tj-color-text-body);
			font-size: 14px;
			line-height: 1;
			padding: 3px 8px;
			border-radius: 30px;
			margin-bottom: 18px;
			display: inline-flex;
			align-items: center;
			gap: 4px;
			vertical-align: sub;
			i {
				display: inline-flex;
				color: var(--tj-color-theme-icon);
				font-size: 20px;
				line-height: 1;
			}
		}
		.hero-title {
			line-height: 1.083;
			margin-bottom: 10px;
			letter-spacing: -0.025em;
			span {
				color: var(--tj-color-theme-primary);
			}
			@media #{$sm, $xs} {
				font-size: 40px;
			}
		}
		.desc {
			max-width: 530px;
			font-size: 18px;
			line-height: 1.444;
			margin: 0 auto;
			p {
				&:last-child {
					margin: 0;
				}
			}
		}
		.hero-btn-area {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			gap: 20px;
			margin-top: 24px;
			@media #{$xxs} {
				gap: 10px;
			}
		}
		@media #{$lg} {
			max-width: 700px;
		}
	}
	&-slider {
		margin: 0 30px;
		@media #{$xl,$lg,$md,$sm,$xs} {
			margin: 0 20px;
		}
	}
}

.h6-slider {
	&-area {
		position: relative;
		overflow: hidden;
		margin: 80px 0 0;
		&::before {
			content: "";
			position: absolute;
			top: -2px;
			inset-inline-start: 0;
			width: 100%;
			height: 48px;
			background-color: var(--tj-color-common-white);
			mask-image: url(/images/shapes/h6-slider-curve-1.svg);
			mask-repeat: no-repeat;
			mask-position: center top;
			mask-size: cover;
			z-index: 2;
			@media (min-width: 1921px) and (max-width: 2500px) {
				height: 60px;
			}
			@media (min-width: 2501px) and (max-width: 3200px) {
				height: 70px;
			}
			@media #{$xl} {
				height: 38px;
			}
			@media #{$lg} {
				height: 30px;
			}
			@media #{$md} {
				height: 24px;
			}
			@media #{$sm, $xs} {
				height: 20px;
			}
		}
		&::after {
			content: "";
			position: absolute;
			bottom: -1px;
			inset-inline-start: 0;
			width: 100%;
			height: 48px;
			background-color: var(--tj-color-common-white);
			mask-image: url(/images/shapes/h6-slider-curve-2.svg);
			mask-repeat: no-repeat;
			mask-position: center bottom;
			mask-size: cover;
			z-index: 2;
			@media (min-width: 1921px) and (max-width: 2500px) {
				height: 60px;
			}
			@media (min-width: 2501px) and (max-width: 3200px) {
				height: 70px;
			}
			@media #{$xl} {
				height: 38px;
			}
			@media #{$lg} {
				height: 30px;
			}
			@media #{$md} {
				height: 24px;
			}
			@media #{$sm, $xs} {
				height: 20px;
			}
		}
	}
	&-wrapper {
		-webkit-transition-timing-function: linear;
		transition-timing-function: linear;
	}
	&-item {
		width: auto;
		display: flex;
		gap: 20px;
		align-items: center;
		.slider-img {
			max-width: 442px;
			width: 100%;
			@media #{$xl} {
				max-width: 360px;
			}
			@media #{$lg} {
				max-width: 320px;
			}
			@media #{$md} {
				max-width: 280px;
			}
			@media #{$sm, $xs} {
				max-width: 200px;
			}
		}
	}
}

/* !END: Hero CSS */