@use "../utilities" as *;

/* START: Home 6 Testimonial CSS */
.h6-testimonial {
	&-section {
		background-color: var(--tj-color-theme-bg);
		overflow: hidden;
		position: relative;
		z-index: 2;
		.sec-heading .desc {
			margin-bottom: 0;
			max-width: 400px;
		}
		.sec-text {
			@media #{$lg, $md} {
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				gap: 30px;
				.swiper_navigations {
					width: 180px;
				}
			}
		}
	}
	&-quote {
		display: inline-block;
		line-height: 1;
		font-size: 70px;
		color: var(--tj-color-theme-primary);
	}
	&-slider {
		margin-inline-end: -460px;
		margin-inline-start: 30px;
		@media #{$xxxl} {
			margin-inline-end: -380px;
		}
		@media #{$xxl} {
			margin-inline-end: -300px;
		}
		@media #{$xl} {
			margin-inline-end: -110px;
		}
		@media #{$lg} {
			margin-inline-end: -150px;
			margin-inline-start: 0;
		}
		@media #{$md} {
			margin-inline-end: -160px;
			margin-inline-start: 0;
		}
		@media #{$sm} {
			margin-inline-end: -110px;
			margin-inline-start: 0;
		}
		@media #{$xs} {
			margin-inline-end: -20px;
			margin-inline-start: 0;
		}
		@media (max-width: 449px) {
			margin-inline-end: 0;
		}
	}
}

.testimonial-item {
	&.style-6 {
		padding: 35px 30px 35px 30px;
		background-color: var(--tj-color-common-white);
		@media #{$xs} {
			padding: 30px 20px;
		}
		.tj-testimonial-author {
			flex-wrap: nowrap;
		}
		.author-images {
			mask-image: url(/images/shapes/h6-test-shape.svg);
			background: var(--tj-color-theme-bg);
			width: 90px;
			height: 110px;
			margin-bottom: -40px;
			img {
				top: 12px;
				inset-inline-end: 8px;
				transform: unset;
				width: 75px;
				height: 75px;
			}
		}
		.author-text .author-name {
			@media #{$xl} {
				font-size: 20px;
			}
		}
		.author-rating {
			background: var(--tj-color-theme-bg);
			display: inline-block;
			padding: 2px 10px 4px;
			border-radius: 32px;
			.star-ratings {
				color: var(--tj-color-theme-primary);
				-webkit-text-stroke: 1px var(--tj-color-theme-primary);
				.fill-ratings {
					color: var(--tj-color-theme-primary);
				}
				.empty-ratings {
					color: transparent;
				}
			}
		}
		.testimonial-content {
			padding-inline-start: 0;
			flex-direction: column;
			.desc {
				max-width: 100%;
				font-size: 18px;
				border-bottom-style: dashed;
				padding-bottom: 25px;
				@media #{$xs} {
					font-size: 16px;
				}
			}
		}
	}
}

.swiper_navigations {
	&.style-6 {
		.navigation {
			color: var(--tj-color-heading-primary);
			border: 1px solid var(--tj-color-border-2);
			background: var(--tj-color-common-white);
			&:hover {
				border-color: var(--tj-color-theme-primary);
				background: var(--tj-color-theme-primary);
			}
		}
	}
}

/* START: Home 6 Testimonial CSS */