.tt-team {
	position: relative;
	margin-bottom: 50px;

	&__avater {
		position: relative;
		border-radius: 15px;
		overflow: hidden;

		img {
			width: 100%;
			transition: all 0.3s ease-in-out;
		}

		&:before {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			background-color: rgba($color__theme, 0.8);
			transition: all 0.3s ease-in-out;
			opacity: 0;
			z-index: 2;
			top: 0;
			left: 0;
		}
	}

	&__social {
		margin: 0;
		padding: 0;
		list-style: none;
		position: absolute;
		bottom: 30px;
		left: 0;
		z-index: 2;
		height: 36px;
		overflow: hidden;
		text-align: center;
		width: 100%;

		li {
			display: inline-block;
			transition: all 0.3s ease-in-out;
			transform: translateY(20px);
			opacity: 0;

			&:not(:last-child) {
				margin-right: 3px;
			}

			&:nth-child(2) {
				transition-delay: 0.1s;
			}

			&:nth-child(3) {
				transition-delay: 0.2s;
			}

			&:nth-child(4) {
				transition-delay: 0.3s;
			}

			&:nth-child(5) {
				transition-delay: 0.4s;
			}

			&:nth-child(6) {
				transition-delay: 0.5s;
			}

			a {
				display: block;
				height: 32px;
				width: 32px;
				line-height: 28px;
				text-align: center;
				border-radius: 5px;
				border: 2px solid rgba(255, 255, 255, 0.5);
				color: #fff;
				font-size: 14px;


				&:hover {
					background-color: #fff;
					border-color: #fff;
					color: $color__theme;
				}
			}
		}
	}

	&__info {
		padding: 15px 30px 0;
		text-align: center;
	}

	&__name {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 3px;
	}

	&__designation {
		font-size: 14px;
		color: #4f5158;
		font-weight: 400;
	}

	&:hover {
		.tt-team__avater {

			&:before {
				opacity: 1;
			}

			img {
				transform: scale(1.05) rotate(3deg);
			}
		}

		.tt-team__social {
			li {
				transform: translateY(0);
				opacity: 1;
			}
		}
	}

	&.style--two {
		background-color: #181818;
		padding: 20px;

		.tt-team__avater {
			border-radius: 0;

			&:before {
				display: none;
			}
		}

		.tt-team__info {
			text-align: left;
			padding: 20px 0 0;

			.tt-team__name {
				color: #fff;
				font-size: 20px;
				margin-bottom: 10px;
			}
		}

		.tt-team__designation {
			color: #D7D7D7;
			margin-bottom: 18px;
		}
	}

	.tt-team__social-two {
		margin: 0;
		padding: 0;
		list-style: none;
		li {
			display: inline-block;
			position: relative;

			&:not(:last-child) {
				margin-right: 15px;

				&:after {
					content: "";
					position: absolute;
					right: -9px;
					top: 9px;
					height: 11px;
					width: 1px;
					border-right: 1px dotted #999999;
				}
			}

			a {
				color: #fff;
				font-size: 14px;
				font-weight: 600;

				&:hover {
					color: $color__theme;
				}
			}
		}
	}
}


.team-items {
	position: relative;
	z-index: 1;
}

.team-member {
	margin-bottom: 30px;

	.member-avater {
		position: relative;
		border-radius: 10px;
		overflow: hidden;

		a {
			position: relative;
			display: block;
			overflow: hidden;

			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.5);
				z-index: 2;
				opacity: 0;
				transition: all 0.3s ease-in-out;
			}

			img {
				transition: all 0.3s ease-in-out;
				width: 100%;
			}

			&:hover {
				&:before {
					opacity: 1;
				}

				img {
					transform: scale(1.06);
				}
			}
		}


	}

	.team-info {
		text-align: center;
		padding-top: 15px;
		position: relative;

		.name {
			font-size: 22px;
			margin-bottom: 0;
			font-weight: 600;

			a {
				color: $color__heading;

				&:hover {
					color: $color__theme;
				}
			}
		}

		.designation {
			color: #676869;
			font-size: 17px;
			line-height: 1.3;
			margin-bottom: 10px;
			font-family: $font__heading;
		}


		.member-social {
			position: relative;
			height: 35px;
			width: 100%;
			margin-top: 10px;

			a, .social_link_expand {
				height: 35px;
				width: 35px;
				font-size: 14px;
				line-height: 35px;
				text-align: center;
				background: $color__theme;
				color: #fff;
				border-radius: 50%;
				opacity: 0;
				visibility: hidden;
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				transition: all 0.5s ease-in-out;
			}

			.social_link_expand {
				opacity: 1;
				visibility: visible;
				z-index: 2;
				cursor: pointer;

				i {
					transition: all 0.3s ease-in-out;
				}
			}


			&.active {
				a {
					opacity: 1;
					visibility: visible;

					&:nth-child(1) {
						transform: translateX(-62px);
					}

					&:nth-child(2) {
						transform: translateX(27px);
					}

					&:nth-child(3) {
						transform: translateX(-106px);
					}

					&:nth-child(4) {
						transform: translateX(71px);
					}
				}

				.social_link_expand {

					i {
						transform: rotate(45deg);
					}
				}
			}


		}
	}

	&.style-two {

		.member-social {
			margin: 0;
			padding: 0;
			list-style: none;
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 20px;
			text-align: center;
			height: 0;
			z-index: 3;
			opacity: 0;
			transition: all 0.3s ease-in-out;

			li {
				display: inline-block;

				&:not(:last-child) {
					margin-right: 10px;
				}

				a {
					height: 35px;
					width: 35px;
					line-height: 35px;
					text-align: center;
					color: #fff;
					background-color: $color__theme;
					border-radius: 50%;
					font-size: 13px;

					&:before {
						display: none;
					}
				}
			}
		}

		.member-avater {
			border-radius: 10px;
			overflow: hidden;
			position: relative;
			transition: 0.5s cubic-bezier(.17, .85, .438, .99);

			img {
				min-height: 360px;
				object-fit: cover;
				width: 100%;
			}

			&:before {
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				background-color: rgba(0, 0, 0, 0.5);
				opacity: 0;
				transition: all 0.3s ease-in-out;
				z-index: 2;
			}

			&:hover {
				//transform: scale(0.9);

				&:before {
					opacity: 1;
				}

				img {
					transform: scale(1);
				}

				.member-social {
					opacity: 1;
					visibility: visible;
					bottom: 50px;
				}
			}
		}

		.team-info {
			padding-top: 27px;

			.name {
				font-weight: 600;
			}
		}
	}
}

.text___bg {
	border-radius: 6px;
	background-color: rgb(255, 255, 255);
	box-shadow: 0px 40px 70px 0px rgba(1, 4, 45, 0.1);
	position: absolute;
	left: 475px;
	top: 426px;
	width: 970px;
	height: 500px;
	z-index: 63;
}


.team__info__wrapper {
	border-radius: 6px;
	background-color: #fff;
	box-shadow: 0px 40px 70px 0px rgba(1, 4, 45, 0.1);
	overflow: hidden;

	.info {
		position: relative;
		z-index: 22;
		max-width: 300px;
	}

	.team__info {
		padding: 50px 70px;

		.member__name {
			font-size: 30px;
			font-weight: 700;
			margin-bottom: 10px;
		}

		.tt__member-info {
			margin: 0;
			padding: 0;
			list-style: none;

			li {
				color: #52525c;
				line-height: 39px;
				font-size: 18px;
				font-weight: 500;

				&:not(:last-child) {
					border-bottom: 1px solid #ececef;
				}

				span {
					font-weight: 600;
					color: $color__heading;
				}
			}
		}

		.member-social {
			margin: 27px 0 0;
			padding: 0;
			list-style: none;

			li {
				display: inline-block;

				&:not(:last-child) {
					margin-right: 8px;
				}

				a {
					display: inline-block;
					height: 35px;
					width: 35px;
					font-size: 14px;
					line-height: 35px;
					text-align: center;
					background: $color__theme;
					color: #fff;
					border-radius: 50%;
					transition: all 0.5s ease-in-out;
				}
			}
		}


		.team-svg-shape {
			position: absolute;
			left: 0;
			bottom: 0;
		}
	}
}

.content_title {
	font-size: 40px;
	font-weight: 700;
	margin-bottom: 15px;
}

.member__image {
	text-align: right;
	padding: 50px 70px;

	img {
		border-radius: 10px;
	}

	@media(max-width: 767px) {
		padding: 70px;
	}

	@media(max-width: 576px) {
		padding: 30px;
	}
}


.team-single-wrapper {
	padding: 0 0 97px;
	max-width: 970px;
	margin: -280px auto 0;
	z-index: 2;
	position: relative;

	@media(max-width: 991px) {
		padding: 80px 0 41px;
	}
}

.team__contents {
	margin-top: 78px;

	p {
		font-size: 20px;
		line-height: 30px;
	}
}

.team__info-content {
	.content_title {
		margin-bottom: 50px;
	}

}

#skills {
	position: relative;
	max-width: 550px;
}


.skill-wrapper .skill-value {
	display: inline-block;
	float: right;
	text-align: right;
	color: #1a133b;
}

.skill-wrapper .skill:not(:last-child) {
	margin-bottom: 40px;
}

.skill-wrapper .skill-label,
.skill-wrapper .skill-value {
	font-size: 16px;
	color: #1a133b;
	font-weight: 500;
}

.skill-wrapper .skill-value {
	font-style: italic;
}

.skill-wrapper {
	.skill {
		.line {
			background-color: #eaecf2;
			position: relative;
			width: 100%;
			height: 6px;
			margin: 10px 0 0 0;
			border-radius: 6px;

			.active-line {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				width: 0;
				transition: width 1.5s ease;
				background-color: $color__theme;
				border-radius: 6px;
			}
		}

		&.color--two {
			.line {
				.active-line {
					background-color: #6b64fe;
				}
			}
		}

		&.color--three {
			.line {
				.active-line {
					background-color: #43bdab;
				}
			}
		}
	}
}


.progress-box {
	margin-bottom: 32px;
	max-width: 450px;

	p {
		font-family: $font__heading;
		font-size: 18px;
		font-weight: 500;
		color: $color__heading;
		margin-bottom: 11px;
	}

	.bar-inner {
		position: relative;
		display: block;
		width: 0;
		height: 6px;
		transition: all 1500ms ease;
		background: $color__theme;
		border-radius: 6px;
	}

	.bar {
		position: relative;
		width: 100%;
		height: 6px;
		background: #eaeaea;
		border-radius: 6px;
	}

	.count-text {
		font-family: $font__heading;
		position: absolute;
		top: -33px;
		right: 0px;
		background: transparent;
		font-size: 16px;
		font-weight: 400;
		color: #222;
		opacity: 1;
		transition: all 500ms ease;
	}
}

.team__contact-form {
	margin-top: 78px;

	.content_title {
		margin-bottom: 29px;
	}
}