@use "../utilities" as *;

/* START: Home 6 Team CSS */
.h6-team-section {
	overflow: hidden;
	.sec-heading {
		max-width: 585px;
		width: 100%;
		margin-inline-start: auto;
		margin-inline-end: auto;
		margin-bottom: 50px;
	}
}
.h6-tabs {
	padding-bottom: 30px;
	display: block;

	.h6-tab {
		height: 200px;
		position: relative;
		cursor: pointer;
		z-index: 2;
		@media #{$md} {
			height: 180px;
		}
		@media #{$sm, $xs} {
			height: 160px;
		}
		&-image {
			height: 100%;
			position: relative;
			overflow: hidden;
			&::before {
				position: absolute;
				content: "";
				top: 0;
				inset-inline-start: 0;
				width: 100%;
				height: 100%;
				background-color: var(--tj-color-theme-dark);
				opacity: 0.6;
			}
		}

		&::after {
			position: absolute;
			content: "";
			inset-inline-start: 50%;
			bottom: -50px;
			transform: translateX(-50%) rotate(45deg);
			width: 30px;
			height: 30px;
			background-color: var(--tj-color-theme-bg);
			z-index: -1;
			display: none;
		}

		&.active {
			&::after {
				display: block;
			}
			.h6-tab-image {
				&::before {
					opacity: 0;
				}
			}
		}
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: top center;
		}
	}
}

.h6-tab {
	&-content {
		display: none;
		&.active {
			display: block;
		}
	}
	&-info {
		background-color: var(--tj-color-theme-bg);
		padding: 60px 30px 60px 60px;
		display: flex;
		@media #{$lg, $md} {
			padding: 35px;
		}
		@media #{$sm, $xs} {
			padding: 30px 22px;
			flex-direction: column;
		}
		.tj-socials {
			margin-top: 30px;
		}
		.qr-image {
			margin-top: 60px;
			@media #{ $sm, $xs} {
				margin-top: 10px;
				max-width: 90px;
			}
		}
	}
	&-left {
		width: 30%;
		border-inline-end: 1px solid var(--tj-color-border-2);
		padding-inline-end: 20px;
		@media #{$md} {
			width: 33%;
		}
		@media #{$sm, $xs} {
			width: 100%;
			padding-inline-end: 0;
			padding-bottom: 30px;
			border-inline-end: 0;
			border-bottom: 1px solid var(--tj-color-border-2);
			margin-bottom: 30px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			gap: 10px;
		}
		&-content {
			@media #{$sm, $xs} {
				max-width: 175px;
				width: 100%;
			}
		}
		.title {
			margin-bottom: 0;
			@media #{$lg} {
				font-size: 24px;
			}
			@media #{$md, $sm, $xs} {
				font-size: 20px;
			}
		}
	}
	&-right {
		width: 70%;
		padding-inline-start: 80px;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		@media #{$lg} {
			padding-inline-start: 50px;
		}
		@media #{$md} {
			width: 67%;
			padding-inline-start: 30px;
		}
		@media #{$sm, $xs} {
			width: 100%;
			padding-inline-start: 0;
		}
		.shape {
			position: absolute;
			inset-inline-end: 0;
			bottom: 0;
			@media #{$lg} {
				max-width: 130px;
			}
			@media #{$md, $sm, $xs} {
				display: none;
			}
		}
	}
}

.progress-style-2 {
	&.style-6 {
		flex-wrap: nowrap;
		@media #{$xs, $sm} {
			margin-top: 20px;
		}
		.proggess-item .proggess-circle {
			canvas {
				@media #{$xs} {
					width: 130px !important;
					height: 130px !important;
				}
			}
			input {
				@media #{$xs} {
					margin-inline-start: -100px !important;
				}
			}
		}
	}
}
/* END: Home 6 Team CSS */