@use "../utilities" as *;

/**----------------------------------------
START: Team CSS
----------------------------------------*/
.h7-team {
	background-color: var(--tj-color-theme-dark);
	position: relative;
	z-index: 1;
	border-radius: 12px;
	overflow: hidden;

	.sec-heading.style-2 {
		.sub-title {
			background-color: var(--tj-color-grey-3);
			color: var(--tj-color-grey-1);
		}
		.sec-title {
			color: var(--tj-color-common-white);
		}
	}
	&-wrapper {
		mask-image: linear-gradient(
			90deg,
			rgba(255, 255, 255, 0) 2.91%,
			var(--tj-color-theme-dark) 30.6%,
			var(--tj-color-theme-dark) 69.51%,
			rgba(255, 255, 255, 0) 97.03%
		);

		.swiper {
			&-wrapper {
				transition-timing-function: linear;
			}
			&-slide {
				width: auto;
			}
		}
		.h7-team-marquee {
			&:not(:first-child) {
				margin-top: 30px;
				@media #{$md,$sm,$xs} {
					margin-top: 20px;
				}
			}
		}
		.team {
			&-item {
				width: 407px;
				display: flex;
				align-items: center;
				gap: 10px;
				justify-content: space-between;
				padding: 14px 14px 14px 34px;
				border-radius: 200px;
				background-color: rgba(255, 255, 255, 0.1);
				backdrop-filter: blur(10px);
				margin-bottom: 0;
				@media #{$md,$sm,$xs} {
					width: 300px;
					padding: 10px 10px 10px 24px;
				}
				.team {
					&-content {
						margin-top: 0;
						flex-grow: 1;
						.title {
							color: var(--tj-color-common-white);
							width: 100%;
						}
						.designation {
							color: var(--tj-color-text-body-2);
						}
					}
					&-img {
						width: 96.77px;
						height: 96.77px;
						border-radius: 100%;
						background-color: var(--tj-color-theme-dark-5);
						overflow: hidden;
						@media #{$md,$sm,$xs} {
							width: 80px;
							height: 80px;
						}
						&::before,
						&::after {
							display: none;
						}
					}
				}

				&:hover {
					.team {
						&-img {
							img {
								transform: scale(1.1);
							}
						}
					}
				}
			}
		}

		.h7-team-marquee {
			&:nth-child(2) {
				.team {
					&-item {
						flex-direction: row-reverse;
						text-align: end;
					}
					&-content {
						.title {
							margin-inline-start: auto;
						}
					}
				}
			}
		}
	}
	.bg-shape-3 {
		bottom: 50%;
		inset-inline-start: 50%;
		transform: translate(-50%, 50%);
	}
}
/* !END: Team CSS */