@use '../../utils/' as *;

/*============= TEAM CSS AREA ===============*/
.team1-section-area {
	position: relative;
	z-index: 1;

	.team-slider-area {
		position: relative;
		z-index: 1;

		.owl-nav {
			position: absolute;
			top: -120px;
			right: 0;

			@media #{$xs} {
				position: relative;
				z-index: 1;
				top: 0;
				text-align: center;
			}

			@media #{$md} {
				position: relative;
				z-index: 1;
				top: 0;
				text-align: center;
			}

			button {
				height: 56px;
				width: 56px;
				text-align: center;
				line-height: 56px;
				border-radius: 50%;
				transition: all .4s;
				background: rgba(26, 23, 25, 0.05);
				font-size: var(--ztc-font-size-font-s20);
				display: inline-block;

				&:hover {
					background: var(--ztc-text-text-4);
					color: var(--ztc-text-text-2);
					transition: all .4s;
				}

				&.owl-prev {
					margin: 0 16px 0 0;
				}
			}
		}

		.team-widget-boxarea {
			margin-bottom: 30px;
			position: relative;
			z-index: 1;
			transition: all .4s;

			&:hover {
				.img1 {
					img {
						transform: scale(1.1) rotate(-4deg);
						transition: all .4s;
					}

					ul {
						bottom: 0;
						transition: all .6s;
					}
				}
			}

			.img1 {
				position: relative;
				z-index: 1;
				border-radius: 8px;
				overflow: hidden;
				transition: all .4s;

				img {
					height: 100%;
					width: 100%;
					object-fit: cover;
					border-radius: 8px;
					transition: all .4s;
				}

				ul {
					background: var(--ztc-text-text-4);
					text-align: center;
					padding: 24px;
					position: absolute;
					bottom: -220px;
					width: 100%;
					transition: all .6s;
					z-index: 2;

					li {
						display: inline-block;

						a {
							height: 44px;
							width: 44px;
							text-align: center;
							line-height: 44px;
							border-radius: 50%;
							display: inline-block;
							transition: all .4s;
							line-height: 44px;
							color: var(--ztc-text-text-2);
							font-size: var(--ztc-font-size-font-s18);
							background: rgba(26, 23, 25, 0.05);
							margin: 0 10px 0 0;

							&:hover {
								background: var(--ztc-text-text-1);
								color: var(--ztc-text-text-2);
								transition: all .4s;
							}
						}
					}
				}
			}

			.text-area {
				text-align: center;

				a {
					color: var(--ztc-text-text-2);
					text-align: center;
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s24);
					font-style: normal;
					font-weight: var(--ztc-weight-bold);
					line-height: 24px;
					display: inline-block;
					transition: all .4s;
				}

				p {
					color: var(--ztc-text-text-3);
					text-align: center;
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s18);
					font-style: normal;
					font-weight: var(--ztc-weight-regular);
					line-height: 18px;
				}
			}
		}
	}

}

// Homepage 02 //
.team2-section-area {
	position: relative;
	z-index: 1;

	.our-team-boxarea {
		text-align: center;
		margin-bottom: 30px;

		.content-area {
			a {
				color: var(--ztc-text-text-1);
				text-align: center;
				font-family: var(--grotesk);
				font-size: var(--ztc-font-size-font-s24);
				font-style: normal;
				font-weight: var(--ztc-weight-bold);
				line-height: 24px;
				/* 100% */
				display: inline-block;
				transition: all .4s;
			}

			p {
				color: rgba(255, 255, 255, 0.90);
				text-align: center;
				font-family: var(--grotesk);
				font-size: var(--ztc-font-size-font-s18);
				font-style: normal;
				font-weight: var(--ztc-weight-regular);
				line-height: 18px;
			}
		}

		.team-widget-area {
			position: relative;
			z-index: 1;
			overflow: hidden;
			position: relative;
			z-index: 1;
			border: 2px solid #1C3B45;
			border-radius: 270px;
			padding: 24px;

			&::after {
				position: absolute;
				content: "";
				height: 100%;
				width: 100%;
				border: 1px solid var(--ztc-text-text-6);
				left: 0;
				top: 0;
				border-radius: 50%;
				transform: scale(0.7);
				z-index: -2;
				transition: all .4s;
				visibility: hidden;
				opacity: 0;
			}

			&:hover {
				&::after {
					transition: all .4s;
					transform: scale(1);
					visibility: visible;
					opacity: 1;
				}

				.img1 {
					img.team-img4 {
						transition: all .4s;
					}

					img.team-img8 {
						visibility: visible;
						opacity: 1;
						transition: all .4s;
					}

					ul {
						bottom: 50px;
						transition: all .6s;
					}
				}
			}

			.img1 {
				text-align: center;
				overflow: hidden;
				position: relative;
				border-radius: 50%;
				width: 100%;
				height: 100%;

				img.team-img4 {
					height: 100%;
					width: 100%;
					object-fit: cover;
					transition: all .4s;
				}

				img.team-img8 {
					position: absolute;
					width: 100%;
					height: 100%;
					object-fit: cover;
					left: 0;
					z-index: -1;
					visibility: hidden;
					opacity: 0;
					transition: all .4s;
				}

				ul {
					text-align: center;
					position: absolute;
					bottom: -200px;
					transition: all .6s;
					left: 15%;
					right: 15%;

					li {
						display: inline-block;

						a {
							height: 44px;
							width: 44px;
							text-align: center;
							line-height: 44px;
							border-radius: 50%;
							transition: all .4s;
							display: inline-block;
							background: var(--ztc-text-text-1);
							color: var(--ztc-text-text-2);
							margin: 0 10px 0 0;

							&:hover {
								background: var(--ztc-text-text-6);
								transition: all .4s;
								color: var(--ztc-text-text-5);
							}
						}
					}
				}
			}
		}
	}
}

// Homepage 03 //
.team3-section-area {
	position: relative;
	z-index: 1;

	.team-slider-area2 {
		position: relative;
		z-index: 1;

		.owl-nav {
			position: absolute;
			right: 0;
			top: -130px;

			@media #{$xs} {
				position: relative;
				z-index: 1;
				text-align: center;
				margin-top: 30px;
				top: 0;
				left: 0;
			}

			@media #{$md} {
				position: relative;
				z-index: 1;
				text-align: center;
				margin-top: 30px;
				top: 0;
				left: 0;
			}

			button {
				height: 56px;
				width: 56px;
				text-align: center;
				line-height: 56px;
				display: inline-block;
				transition: all .4s;
				color: var(--ztc-text-text-10);
				font-size: var(--ztc-font-size-font-s20);
				background: rgba(255, 54, 57, 0.20);
				border-radius: 50%;

				&:hover {
					background: var(--ztc-text-text-10);
					color: var(--ztc-text-text-1);
					transition: all .4s;
				}

				&.owl-prev {
					margin: 0 16px 0 0;
				}
			}
		}

		.our-team-boxarea {
			text-align: center;
			margin-bottom: 30px;

			.content-area {
				a {
					color: var(--ztc-text-text-8);
					text-align: center;
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s24);
					font-style: normal;
					font-weight: var(--ztc-weight-bold);
					line-height: 24px;
					/* 100% */
					display: inline-block;
					transition: all .4s;
				}

				p {
					color: var(--ztc-text-text-9);
					text-align: center;
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s18);
					font-style: normal;
					font-weight: var(--ztc-weight-regular);
					line-height: 18px;
				}
			}

			.team-widget-area {
				position: relative;
				z-index: 1;
				overflow: hidden;
				position: relative;
				z-index: 1;
				padding: 24px;

				.elements21 {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					visibility: visible;
					opacity: 1;
					transition: all .4s;
				}

				.elements22 {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					visibility: hidden;
					opacity: 0;
					transition: all .4s;
				}

				&:hover {
					.elements21 {
						visibility: hidden;
						opacity: 0;
						transition: all .4s;
					}

					.elements22 {
						visibility: visible;
						opacity: 1;
						transition: all .4s;
						height: auto;
					}

					.img1 {
						ul {
							li {
								a.icon1 {
									visibility: visible;
									opacity: 1;
									transition: all .4s;
									bottom: 36px;
								}

								a.icon2 {
									visibility: visible;
									opacity: 1;
									transition: all .4s;
									bottom: 0;
								}

								a.icon3 {
									visibility: visible;
									opacity: 1;
									transition: all .4s;
									bottom: 36px;
								}

								a.icon4 {
									visibility: visible;
									opacity: 1;
									transition: all .4s;
									bottom: -7px;
								}
							}
						}
					}
				}

				.img1 {
					text-align: center;
					position: relative;
					border-radius: 50%;
					width: 100%;
					height: 100%;

					.team-img4 {
						height: 100%;
						width: 100%;
						object-fit: cover;
						border-radius: 50%;
					}

					.share {
						a {
							height: 40px;
							width: 40px;
							text-align: center;
							line-height: 40px;
							border-radius: 50%;
							transition: all .4s;
							background: linear-gradient(90deg, #FF3639 2.73%, #E12FA2 71.84%);
							display: inline-block;
							position: absolute;
							bottom: 0;
							left: 50%;
							margin-left: -20px;
							margin-bottom: -20px;

							img {
								height: 20px;
								width: 20px;
								display: inline-block;
								object-fit: contain;
							}
						}
					}

					ul {
						text-align: center;
						position: absolute;
						bottom: 0;
						transition: all .6s;
						left: 0;
						right: 0;

						li {
							display: inline-block;

							a {
								height: 44px;
								width: 44px;
								text-align: center;
								line-height: 44px;
								border-radius: 50%;
								transition: all .4s;
								display: inline-block;
								background: var(--ztc-text-text-1);
								box-shadow: (0px 4px 40px rgba(0, 0, 0, 0.09));
								color: var(--ztc-text-text-8);
								margin: 0 10px 0 0;

								&:hover {
									background: linear-gradient(90deg, #FF3639 2.73%, #E12FA2 71.84%);
									transition: all .4s;
									color: var(--ztc-text-text-1);
								}

								&.icon1 {
									position: absolute;
									bottom: 10px;
									left: 8px;
									visibility: hidden;
									opacity: 0;
									transition: all .4s;
								}

								&.icon2 {
									position: absolute;
									bottom: -20px;
									left: 52px;
									visibility: hidden;
									opacity: 0;
									transition: all .6s;
								}

								&.icon3 {
									position: absolute;
									bottom: 10px;
									right: -3px;
									visibility: hidden;
									opacity: 0;
									transition: all .4s;
								}

								&.icon4 {
									position: absolute;
									bottom: -20px;
									right: 40px;
									visibility: hidden;
									opacity: 0;
									transition: all .6s;
								}
							}
						}
					}
				}
			}
		}
	}
}

// Homepage 04 //
.team4-section-area {
	position: relative;
	z-index: 1;

	.team-slider-area4 {
		position: relative;
		z-index: 1;

		.owl-nav {
			position: absolute;
			top: -120px;
			right: 0;

			@media #{$xs} {
				position: relative;
				z-index: 1;
				top: 0;
				text-align: center;
			}

			@media #{$md} {
				position: relative;
				z-index: 1;
				top: 0;
				text-align: center;
			}

			button {
				height: 56px;
				width: 56px;
				text-align: center;
				line-height: 56px;
				border-radius: 50%;
				transition: all .4s;
				background: rgba(46, 77, 253, 0.08);
				font-size: var(--ztc-font-size-font-s20);
				display: inline-block;
				color: var(--ztc-text-text-11);

				&:hover {
					background: var(--ztc-text-text-13);
					color: var(--ztc-text-text-1);
					transition: all .4s;
				}

				&.owl-prev {
					margin: 0 16px 0 0;
				}
			}
		}

		.team-widget-boxarea {
			margin-bottom: 30px;
			position: relative;
			z-index: 1;
			transition: all .4s;

			&:hover {
				.img1 {
					img {
						transform: scale(1.1) rotate(-4deg);
						transition: all .4s;
					}

					ul {
						bottom: 0;
						transition: all .6s;
					}
				}
			}

			.img1 {
				position: relative;
				z-index: 1;
				border-radius: 8px;
				overflow: hidden;
				transition: all .4s;

				img {
					height: 100%;
					width: 100%;
					object-fit: cover;
					border-radius: 8px;
					transition: all .4s;
				}

				ul {
					background: var(--ztc-text-text-13);
					text-align: center;
					padding: 24px;
					position: absolute;
					bottom: -220px;
					width: 100%;
					transition: all .6s;
					z-index: 2;

					li {
						display: inline-block;

						a {
							height: 44px;
							width: 44px;
							text-align: center;
							line-height: 44px;
							border-radius: 50%;
							display: inline-block;
							transition: all .4s;
							line-height: 44px;
							color: var(--ztc-text-text-1);
							font-size: var(--ztc-font-size-font-s18);
							border-radius: 165px;
							background: rgba(255, 255, 255, 0.10);
							margin: 0 10px 0 0;

							&:hover {
								background: var(--ztc-text-text-1);
								color: var(--ztc-text-text-11);
								transition: all .4s;
							}
						}
					}
				}
			}

			.text-area {
				text-align: center;

				a {
					color: var(--ztc-text-text-11);
					text-align: center;
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s24);
					font-style: normal;
					font-weight: var(--ztc-weight-bold);
					line-height: 24px;
					display: inline-block;
					transition: all .4s;

					&:hover {
						color: var(--ztc-text-text-13);
						transition: all .4s;
					}
				}

				p {
					color: var(--ztc-text-text-12);
					text-align: center;
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s18);
					font-style: normal;
					font-weight: var(--ztc-weight-regular);
					line-height: 18px;
				}
			}
		}
	}

}

// Inner Pages //
.team-sperkers-section-area {
	position: relative;
	z-index: 1;

	.our-team-boxarea {
		text-align: center;
		margin-bottom: 30px;

		.content-area {
			a {
				color: var(--ztc-text-text-2);
				text-align: center;
				font-family: var(--grotesk);
				font-size: var(--ztc-font-size-font-s24);
				font-style: normal;
				font-weight: var(--ztc-weight-bold);
				line-height: 24px;
				/* 100% */
				display: inline-block;
				transition: all .4s;
			}

			p {
				color: var(--ztc-text-text-3);
				text-align: center;
				font-family: var(--grotesk);
				font-size: var(--ztc-font-size-font-s18);
				font-style: normal;
				font-weight: var(--ztc-weight-medium);
				line-height: 18px;
			}
		}

		.team-widget-area {
			position: relative;
			z-index: 1;
			overflow: hidden;
			position: relative;
			z-index: 1;
			padding: 24px;

			.elements21 {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				visibility: visible;
				opacity: 1;
				transition: all .4s;
			}

			.elements22 {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				visibility: hidden;
				opacity: 0;
				transition: all .4s;
			}

			&:hover {
				.elements21 {
					visibility: hidden;
					opacity: 0;
					transition: all .4s;
				}

				.elements22 {
					visibility: visible;
					opacity: 1;
					transition: all .4s;
					height: auto;
				}

				.img1 {
					ul {
						li {
							a.icon1 {
								visibility: visible;
								opacity: 1;
								transition: all .4s;
								bottom: 36px;
							}

							a.icon2 {
								visibility: visible;
								opacity: 1;
								transition: all .4s;
								bottom: 0;
							}

							a.icon3 {
								visibility: visible;
								opacity: 1;
								transition: all .4s;
								bottom: 36px;
							}

							a.icon4 {
								visibility: visible;
								opacity: 1;
								transition: all .4s;
								bottom: -7px;
							}
						}
					}
				}
			}

			.img1 {
				text-align: center;
				position: relative;
				border-radius: 50%;
				width: 100%;
				height: 100%;

				.team-img4 {
					height: 100%;
					width: 100%;
					object-fit: cover;
					border-radius: 50%;
				}

				.share {
					a {
						height: 40px;
						width: 40px;
						text-align: center;
						line-height: 40px;
						border-radius: 50%;
						transition: all .4s;
						background: #FFBA00;
						display: inline-block;
						position: absolute;
						bottom: 0;
						left: 50%;
						margin-left: -20px;
						margin-bottom: -20px;
						color: var(--ztc-text-text-2);

						img {
							height: 20px;
							width: 20px;
							display: inline-block;
							object-fit: contain;
							filter: brightness(0);
						}
					}
				}

				ul {
					text-align: center;
					position: absolute;
					bottom: 0;
					transition: all .6s;
					left: 0;
					right: 0;

					li {
						display: inline-block;

						a {
							height: 44px;
							width: 44px;
							text-align: center;
							line-height: 44px;
							border-radius: 50%;
							transition: all .4s;
							display: inline-block;
							background: var(--ztc-text-text-1);
							box-shadow: (0px 4px 40px rgba(0, 0, 0, 0.09));
							color: var(--ztc-text-text-8);
							margin: 0 10px 0 0;

							&:hover {
								background: #FFBA00;
								transition: all .4s;
								color: var(--ztc-text-text-2);
							}

							&.icon1 {
								position: absolute;
								bottom: 10px;
								left: 8px;
								visibility: hidden;
								opacity: 0;
								transition: all .4s;
							}

							&.icon2 {
								position: absolute;
								bottom: -20px;
								left: 52px;
								visibility: hidden;
								opacity: 0;
								transition: all .6s;
							}

							&.icon3 {
								position: absolute;
								bottom: 10px;
								right: -3px;
								visibility: hidden;
								opacity: 0;
								transition: all .4s;
							}

							&.icon4 {
								position: absolute;
								bottom: -20px;
								right: 40px;
								visibility: hidden;
								opacity: 0;
								transition: all .6s;
							}
						}
					}
				}
			}
		}
	}
}

// Single Inner Pages //
.team-details-section-area {
	position: relative;
	z-index: 1;

	.speakers-details-box {
		.our-team-boxarea {
			text-align: center;
			margin-bottom: 30px;
			background: #F5F5F5;
			border-radius: 8px;
			padding: 40px;

			.content-area {
				a {
					color: var(--ztc-text-text-2);
					text-align: center;
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s24);
					font-style: normal;
					font-weight: var(--ztc-weight-bold);
					line-height: 24px;
					/* 100% */
					display: inline-block;
					transition: all .4s;
				}

				p {
					color: var(--ztc-text-text-3);
					text-align: center;
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s18);
					font-style: normal;
					font-weight: var(--ztc-weight-medium);
					line-height: 18px;
				}

				ul {
					li {
						display: inline-block;

						a {
							height: 44px;
							width: 44px;
							text-align: center;
							line-height: 44px;
							border-radius: 50%;
							transition: all .4s;
							display: inline-block;
							background: var(--ztc-text-text-1);
							box-shadow: (0px 4px 40px rgba(0, 0, 0, 0.09));
							color: var(--ztc-text-text-8);
							margin: 0 10px 0 0;
							font-size: var(--ztc-font-size-font-s20);

							&:hover {
								background: #FFBA00;
								transition: all .4s;
								color: var(--ztc-text-text-2);
							}
						}
					}
				}
			}

			.team-widget-area {
				position: relative;
				z-index: 1;
				overflow: hidden;
				position: relative;
				z-index: 1;
				padding: 24px;

				.elements21 {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					visibility: visible;
					opacity: 1;
					transition: all .4s;
				}

				.elements22 {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					visibility: visible;
					opacity: 1;
					transition: all .4s;
					z-index: -1;
				}

				&:hover {
					.elements21 {
						visibility: hidden;
						opacity: 0;
						transition: all .4s;
					}

					.elements22 {
						visibility: visible;
						opacity: 1;
						transition: all .4s;
						height: auto;
					}
				}

				.img1 {
					text-align: center;
					position: relative;
					border-radius: 50%;
					width: 100%;
					height: 100%;

					.team-img4 {
						height: 100%;
						width: 100%;
						object-fit: cover;
						border-radius: 50%;
					}
				}
			}
		}

		.speakesr-details-content {
			border-radius: 4px;
			padding: 0 0 0 40px;

			@media #{$xs} {
				padding: 0;
				margin-top: 30px;
			}

			@media #{$md} {
				padding: 0;
				margin-top: 30px;
			}

			.heading2 {
				h3 {
					color: var(--ztc-text-text-2);
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s28);
					font-style: normal;
					font-weight: var(--ztc-weight-bold);
					line-height: 28px;
					/* 100% */
					letter-spacing: -0.56px;
				}

				p {
					line-height: 24px;
				}
			}

			.details-content {
				background: #FBF9F4;
				padding: 24px;
				border-radius: 4px;

				@media #{$xs} {
					margin-bottom: 20px;
				}

				@media #{$md} {
					margin-bottom: 20px;
				}

				h4 {
					color: var(--ztc-text-text-2);
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s20);
					font-style: normal;
					font-weight: var(--ztc-weight-bold);
					line-height: 20px;
					/* 100% */
				}

				a {
					color: var(--ztc-text-text-3);
					font-family: var(--figtree);
					font-size: var(--ztc-font-size-font-s16);
					font-style: normal;
					font-weight: var(--ztc-weight-medium);
					line-height: 22px;
					/* 100% */
					display: inline-block;
					transition: all .4s;
				}
			}
		}
	}
}

.event-team-area {
	.event-widget-area {
		.event2-boxarea {
			position: relative;

			&::after {
				position: absolute;
				content: "";
				height: 93%;
				width: 1px;
				left: 45.7%;
				top: 0;
				transition: all 0.4s;
				background: #E6E7E8;

				@media #{$xs} {
					display: none;
				}

				@media #{$md} {
					display: none;
				}
			}

			h1 {
				color: var(--ztc-text-text-2);
				font-family: var(--grotesk);
				font-size: var(--ztc-font-size-font-s24);
				font-style: normal;
				font-weight: var(--ztc-weight-bold);
				line-height: 24px;
				display: inline-block;
				transition: all 0.4s;
				height: 56px;
				width: 56px;
				text-align: center;
				line-height: 56px;
				background: #FFBA00;
				border-radius: 50%;
				position: absolute;
				left: 43%;
				top: 88px;
				z-index: 1;

				&.active {
					background: #FFBA00;
					color: var(--ztc-text-text-2);
				}

				@media #{$xs} {
					display: none;
				}

				@media #{$md} {
					display: none;
				}
			}

			.img1 {
				position: relative;
				z-index: 1;

				@media #{$xs} {
					margin-bottom: 30px;
				}

				@media #{$md} {
					margin-bottom: 30px;
				}

				img {
					height: 100%;
					width: 100%;
					object-fit: cover;
					border-radius: 4px;
				}
			}

			.content-area {
				ul {
					li {
						display: inline-block;

						a {
							color: var(--ztc-text-text-2);
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s16);
							font-style: normal;
							font-weight: var(--ztc-weight-bold);
							line-height: 16px;
							/* 100% */
							display: inline-block;
							transition: all .4s;

							@media #{$xs} {
								display: block;
								margin-bottom: 10px;
							}

							img {
								filter: brightness(0);
								margin: 0 4px 0 0;
							}

							span {
								margin: 0 8px;
								display: inline-block;
							}
						}
					}
				}

				.head {
					color: var(--ztc-text-text-2);
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s24);
					font-style: normal;
					font-weight: var(--ztc-weight-bold);
					line-height: 24px;
					display: inline-block;
					transition: all .4s;

					@media #{$xs} {
						line-height: 32px;
					}
				}

				.author-area {
					display: flex;
					align-items: center;

					@media #{$xs} {
						display: inline-block;
					}

					.autho-name-area {
						display: flex;
						align-items: center;
						padding: 0 12px 0 0;
						border-right: 1px solid #E6E7E8;

						.img1 {
							@media #{$xs} {
								margin-bottom: 0;
							}

							@media #{$md} {
								margin-bottom: 0;
							}

							img {
								height: 56px;
								width: 56px;
								border-radius: 50%;
								object-fit: cover;
							}
						}

						.text {
							padding-left: 12px;

							a {
								color: var(--ztc-text-text-2);
								font-family: var(--grotesk);
								font-size: var(--ztc-font-size-font-s18);
								font-style: normal;
								font-weight: var(--ztc-weight-bold);
								line-height: 18px;
								display: inline-block;
								transition: all .4s;

								@media #{$xs} {
									line-height: 18px;
								}
							}

							p {
								color: var(--ztc-text-text-3);
								font-family: var(--grotesk);
								font-size: var(--ztc-font-size-font-s16);
								font-style: normal;
								font-weight: var(--ztc-weight-medium);
								line-height: 18px;
								display: inline-block;
								transition: all .4s;
							}
						}
					}
				}
			}
		}

		.event2-boxarea.box3 {
			&::after {
				display: none;
			}
		}

		.event2-boxarea {
			.content-area {
				.author-area {
					.autho-name-area {
						@media #{$xs} {
							padding: 0 !important;
							margin-bottom: 16px;
							border: none;
						}
					}
				}
			}
		}
	}
}

// Homepage 05 //
.team5-section-area {
	position: relative;
	z-index: 1;

	.elements31 {
		position: absolute;
		top: 0;
		right: 0;
	}

	.our-team-boxarea {
		text-align: center;
		margin-bottom: 30px;

		.content-area {
			a {
				color: var(--ztc-text-text-1);
				text-align: center;
				font-family: var(--grotesk);
				font-size: var(--ztc-font-size-font-s24);
				font-style: normal;
				font-weight: var(--ztc-weight-bold);
				line-height: 24px;
				/* 100% */
				display: inline-block;
				transition: all .4s;
			}

			p {
				color: rgba(255, 255, 255, 0.90);
				text-align: center;
				font-family: var(--grotesk);
				font-size: var(--ztc-font-size-font-s18);
				font-style: normal;
				font-weight: var(--ztc-weight-regular);
				line-height: 18px;
			}
		}

		.team-widget-area {
			position: relative;
			z-index: 1;
			overflow: hidden;
			position: relative;
			z-index: 1;
			border: 2px solid #fff;
			border-radius: 270px;
			padding: 24px;

			&::after {
				position: absolute;
				content: "";
				height: 100%;
				width: 100%;
				border: 2px solid var(--ztc-text-text-1);
				left: 0;
				top: 0;
				border-radius: 50%;
				transform: scale(0.7);
				z-index: -2;
				transition: all .4s;
				visibility: hidden;
				opacity: 0;
			}

			&:hover {
				transition: all .4s;

				.img1 {
					img.team-img4 {
						transition: all .4s;
					}

					img.team-img8 {
						visibility: visible;
						opacity: 1;
						transition: all .4s;
						filter: brightness(0) invert(1);
					}

					ul {
						bottom: 50px;
						transition: all .6s;
					}
				}
			}

			.img1 {
				text-align: center;
				overflow: hidden;
				position: relative;
				border-radius: 50%;
				width: 100%;
				height: 100%;

				img.team-img4 {
					height: 100%;
					width: 100%;
					object-fit: cover;
					transition: all .4s;
				}

				img.team-img8 {
					position: absolute;
					width: 100%;
					height: 100%;
					object-fit: cover;
					left: 0;
					z-index: -1;
					visibility: hidden;
					opacity: 0;
					transition: all .4s;
				}

				ul {
					text-align: center;
					position: absolute;
					bottom: -200px;
					transition: all .6s;
					left: 15%;
					right: 15%;

					li {
						display: inline-block;

						a {
							height: 44px;
							width: 44px;
							text-align: center;
							line-height: 44px;
							border-radius: 50%;
							transition: all .4s;
							display: inline-block;
							background: (255, 255, 255, 0.10);
							backdrop-filter: blur(5px);
							color: var(--ztc-text-text-1);
							margin: 0 10px 0 0;

							&:hover {
								background: linear-gradient(135deg, #FF7A00 0%, #F00 100%);
								transition: all .4s;
								color: var(--ztc-text-text-1);
							}
						}
					}
				}
			}
		}
	}
}

// Homepage 06 //
.team6-section-area {
	position: relative;
	z-index: 1;
	background: #F9FAFB;

	.team-widget-area {
		position: relative;
		z-index: 1;
		border-radius: 8px;
		overflow: hidden;
		background: var(--ztc-text-text-1);
		margin-bottom: 30px;

		&:hover {
			.img1 {
				img {
					transform: scale(1.1) rotate(-4deg);
					transition: all .4s;
				}
			}

			.img2 {
				visibility: visible;
				opacity: 1;
				top: 65%;
				transition: all .6s;
			}

			.content-area {
				background: var(--ztc-text-text-14);
				transition: all .4s;

				a {
					color: var(--ztc-text-text-1);
					transition: all .4s;
				}

				p {
					color: var(--ztc-text-text-1);
					opacity: 80%;
					transition: all .4s;
				}
			}
		}

		.img1 {
			overflow: hidden;
			transition: all .4s;
			border-radius: 8px 8px 0 0;

			img {
				height: 100%;
				width: 100%;
				object-fit: cover;
				border-radius: 8px 8px 0 0;
				transition: all .4s;
			}
		}

		.img2 {
			background: var(--ztc-text-text-1);
			padding: 4px 24px;
			border-radius: 8px;
			display: inline-block;
			transition: all .6s;
			position: absolute;
			text-align: center;
			top: 50%;
			left: 20%;
			right: 20%;
			visibility: hidden;
			opacity: 0;

			img {
				width: 110px;
				height: 32px;
				object-fit: contain;
			}
		}

		.content-area {
			padding: 12px;
			transition: all .4s;

			a {
				color: var(--ztc-text-text-2);
				font-family: var(--grotesk);
				font-size: var(--ztc-font-size-font-s24);
				font-style: normal;
				font-weight: var(--ztc-weight-bold);
				line-height: 24px;
				display: inline-block;
				transition: all .4s;
			}

			p {
				color: var(--ztc-text-text-9);
				font-family: var(--figtree);
				font-size: var(--ztc-font-size-font-s16);
				font-style: normal;
				font-weight: 500;
				line-height: 26px;
				transition: all .4s;
			}
		}
	}
}

// Homepage 07 //
.team7-section-area {
	position: relative;
	z-index: 1;

	.team-slider-area7 {
		position: relative;
		z-index: 1;

		.owl-nav {
			@media #{$xs} {
				text-align: center;
				margin-top: 30px;
			}

			@media #{$md} {
				text-align: center;
				margin-top: 30px;
			}

			button {
				height: 56px;
				width: 56px;
				text-align: center;
				line-height: 56px;
				border-radius: 50%;
				transition: all .4s;
				background: rgba(26, 23, 25, 0.05);
				font-size: var(--ztc-font-size-font-s20);
				display: inline-block;

				&:hover {
					background: var(--ztc-text-text-15);
					color: var(--ztc-text-text-1);
					transition: all .4s;
				}

				&.owl-prev {
					position: absolute;
					left: -80px;
					top: 35%;

					@media #{$xs} {
						position: relative;
						left: 0;
						top: 0;
						margin: 0 16px 0 0;
					}

					@media #{$md} {
						position: relative;
						left: 0;
						top: 0;
						margin: 0 16px 0 0;
					}
				}

				&.owl-next {
					position: absolute;
					right: -80px;
					top: 35%;

					@media #{$xs} {
						position: relative;
						right: 0;
						top: 0;
					}

					@media #{$md} {
						position: relative;
						right: 0;
						top: 0;
					}
				}
			}
		}

		.team-widget-boxarea {
			position: relative;
			z-index: 1;
			transition: all .4s;

			&:hover {
				.img1 {
					img {
						transform: scale(1.1) rotate(-4deg);
						transition: all .4s;
					}

					ul {
						bottom: 70px;
						transition: all .6s;
					}
				}
			}

			.img1 {
				position: relative;
				z-index: 1;
				border-radius: 8px;
				overflow: hidden;
				transition: all .4s;

				img {
					height: 100%;
					width: 100%;
					object-fit: cover;
					border-radius: 8px;
					transition: all .4s;
				}

				ul {
					position: absolute;
					bottom: -250px;
					width: 100%;
					transition: all .6s;
					z-index: 2;
					left: 15%;
					right: 15%;

					li {
						display: inline-block;

						a {
							height: 44px;
							width: 44px;
							text-align: center;
							line-height: 44px;
							border-radius: 50%;
							display: inline-block;
							transition: all .4s;
							line-height: 44px;
							color: var(--ztc-text-text-2);
							font-size: var(--ztc-font-size-font-s18);
							background: #fff;
							margin: 0 10px 0 0;

							&:hover {
								background: var(--ztc-text-text-15);
								color: var(--ztc-text-text-1);
								transition: all .4s;
							}
						}
					}
				}
			}

			.text-area {
				text-align: center;
				background: var(--ztc-text-text-1);
				padding: 24px;
				margin: -70px 16px 0 16px;
				position: relative;
				z-index: 1;
				border-radius: 8px;

				a {
					color: var(--ztc-text-text-2);
					text-align: center;
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s24);
					font-style: normal;
					font-weight: var(--ztc-weight-bold);
					line-height: 24px;
					display: inline-block;
					transition: all .4s;
				}

				p {
					color: var(--ztc-text-text-3);
					text-align: center;
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s18);
					font-style: normal;
					font-weight: var(--ztc-weight-regular);
					line-height: 18px;
				}
			}
		}
	}
}

// Homepage 08 //
.team8-section-rea {
	position: relative;
	z-index: 1;

	.team-slider-area8 {
		position: relative;
		z-index: 1;

		.owl-nav {
			position: absolute;
			top: -130px;
			right: 0;

			@media #{$xs} {
				text-align: center;
				margin-top: 30px;
				position: relative;
				right: 0;
			}

			@media #{$md} {
				text-align: center;
				margin-top: 30px;
				position: relative;
				left: 0;
			}

			button {
				height: 56px;
				width: 56px;
				text-align: center;
				line-height: 56px;
				border-radius: 50%;
				transition: all .4s;
				background: rgba(255, 255, 255, 0.20);
				backdrop-filter: blur(2px);
				font-size: var(--ztc-font-size-font-s20);
				display: inline-block;
				color: var(--ztc-text-text-1);

				&:hover {
					background: var(--ztc-text-text-16);
					color: var(--ztc-text-text-1);
					transition: all .4s;
				}

				&.owl-prev {
					margin: 0 16px 0 0;
				}
			}
		}

		.team-widget-boxarea {
			position: relative;
			z-index: 1;
			transition: all .4s;

			&:hover {
				.img1 {
					img {
						transform: scale(1.1) rotate(-4deg);
						transition: all .4s;
					}

					ul {
						bottom: 20px;
						transition: all .6s;
					}
				}
			}

			.img1 {
				position: relative;
				z-index: 1;
				border-radius: 200px 200px 4px 4px;
				overflow: hidden;
				transition: all .4s;

				img {
					height: 100%;
					width: 100%;
					object-fit: cover;
					border-radius: 200px 200px 4px 4px;
					transition: all .4s;
				}

				ul {
					position: absolute;
					bottom: -250px;
					width: 100%;
					transition: all .6s;
					z-index: 2;
					left: 15%;
					right: 15%;

					li {
						display: inline-block;

						a {
							height: 44px;
							width: 44px;
							text-align: center;
							line-height: 44px;
							border-radius: 50%;
							display: inline-block;
							transition: all .4s;
							line-height: 44px;
							color: var(--ztc-text-text-2);
							font-size: var(--ztc-font-size-font-s18);
							background: #fff;
							margin: 0 10px 0 0;

							&:hover {
								background: var(--ztc-text-text-15);
								color: var(--ztc-text-text-1);
								transition: all .4s;
							}
						}
					}
				}
			}

			.text-area {
				text-align: center;
				position: relative;
				z-index: 1;
				border-radius: 8px;

				a {
					color: var(--ztc-text-text-1);
					text-align: center;
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s24);
					font-style: normal;
					font-weight: var(--ztc-weight-bold);
					line-height: 24px;
					display: inline-block;
					transition: all .4s;
				}

				p {
					color: var(--ztc-text-text-1);
					text-align: center;
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s18);
					font-style: normal;
					font-weight: var(--ztc-weight-regular);
					line-height: 18px;
					opacity: 0.8;
				}
			}
		}
	}
}

// Homepage 09 //
.team9-section-rea {
	position: relative;
	z-index: 1;

	.team-slider-area8 {
		position: relative;
		z-index: 1;

		.owl-nav {
			position: absolute;
			top: -130px;
			right: 0;

			@media #{$xs} {
				text-align: center;
				margin-top: 30px;
				position: relative;
				right: 0;
			}

			@media #{$md} {
				text-align: center;
				margin-top: 30px;
				position: relative;
				left: 0;
			}

			button {
				height: 56px;
				width: 56px;
				text-align: center;
				line-height: 56px;
				border-radius: 50%;
				transition: all .4s;
				background: rgba(255, 80, 0, 0.10);
				backdrop-filter: blur(2px);
				font-size: var(--ztc-font-size-font-s20);
				display: inline-block;
				color: var(--ztc-text-text-17);

				&:hover {
					background: var(--ztc-text-text-17);
					color: var(--ztc-text-text-1);
					transition: all .4s;
				}

				&.owl-prev {
					margin: 0 16px 0 0;
				}
			}
		}

		.team-widget-boxarea {
			position: relative;
			z-index: 1;
			transition: all .4s;

			&:hover {
				.img1 {
					img {
						transform: scale(1.1) rotate(-4deg);
						transition: all .4s;
					}

					ul {
						bottom: 20px;
						transition: all .6s;
					}
				}
			}

			.img1 {
				position: relative;
				z-index: 1;
				border-radius: 200px 200px 4px 4px;
				overflow: hidden;
				transition: all .4s;

				img {
					height: 100%;
					width: 100%;
					object-fit: cover;
					border-radius: 200px 200px 4px 4px;
					transition: all .4s;
				}

				ul {
					position: absolute;
					bottom: -250px;
					width: 100%;
					transition: all .6s;
					z-index: 2;
					left: 15%;
					right: 15%;

					li {
						display: inline-block;

						a {
							height: 44px;
							width: 44px;
							text-align: center;
							line-height: 44px;
							border-radius: 50%;
							display: inline-block;
							transition: all .4s;
							line-height: 44px;
							color: var(--ztc-text-text-18);
							font-size: var(--ztc-font-size-font-s18);
							background: #fff;
							margin: 0 10px 0 0;

							&:hover {
								background: var(--LLL, linear-gradient(135deg, #FF5000 0%, #FF00B8 100%));
								color: var(--ztc-text-text-1);
								transition: all .4s;
							}
						}
					}
				}
			}

			.text-area {
				text-align: center;
				position: relative;
				z-index: 1;
				border-radius: 8px;

				a {
					color: var(--ztc-text-text-18);
					text-align: center;
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s24);
					font-style: normal;
					font-weight: var(--ztc-weight-bold);
					line-height: 24px;
					display: inline-block;
					transition: all .4s;
				}

				p {
					color: var(--ztc-text-text-19);
					text-align: center;
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s18);
					font-style: normal;
					font-weight: var(--ztc-weight-regular);
					line-height: 18px;
					opacity: 0.8;
				}
			}
		}
	}
}

// Homepage 10 //
.team10-section-area {
	position: relative;
	z-index: 1;

	.team10-widget-boxarea {
		position: relative;
		z-index: 1;
		background: var(--ztc-text-text-1);
		border-radius: 8px;

		&:hover {
			border-radius: 8px;

			.img1 {
				img {
					transform: scale(1.1) rotate(4deg);
					transition: all .4s;
				}
			}

			.text-area {
				background: var(--ztc-text-text-20);
				transition: all .4s;
			}
		}

		.img1 {
			overflow: hidden;
			border-radius: 8px;
			transition: all .4s;

			img {
				height: 100%;
				width: 100%;
				object-fit: cover;
				border-radius: 8px;
				transition: all .4s;
			}
		}

		.text-area {
			padding: 20px 24px;
			transition: all .4s;
			border-radius: 0 0 8px 8px;

			a {
				color: var(--ztc-text-text-2);
				font-family: var(--grotesk);
				font-size: var(--ztc-font-size-font-s24);
				font-style: normal;
				font-weight: var(--ztc-weight-bold);
				line-height: 24px;
				display: inline-block;
				transition: all .4s;
			}

			p {
				color: var(--ztc-text-text-9);
				font-family: var(--figtree);
				font-size: var(--ztc-font-size-font-s16);
				font-style: normal;
				font-weight: 500;
				line-height: 16px;
			}
		}
	}

	.team10-widget-boxarea2 {
		position: relative;
		z-index: 1;
		background: var(--ztc-text-text-1);
		border-radius: 8px;
		margin-bottom: 30px;

		&:hover {
			border-radius: 8px;

			.img1 {
				img {
					transform: scale(1.1) rotate(4deg);
					transition: all .4s;
				}
			}

			.text-area {
				background: var(--ztc-text-text-20);
				transition: all .4s;
			}
		}

		.img1 {
			overflow: hidden;
			border-radius: 8px;
			transition: all .4s;

			img {
				height: 398px;
				width: 100%;
				object-fit: cover;
				border-radius: 8px;
				transition: all .4s;
			}
		}

		.text-area {
			padding: 20px 24px;
			transition: all .4s;
			border-radius: 0 0 8px 8px;
			background: var(--ztc-text-text-1);
			position: absolute;
			bottom: 0;
			width: 100%;
			left: 0;
			right: 0;
			z-index: 2;

			a {
				color: var(--ztc-text-text-2);
				font-family: var(--grotesk);
				font-size: var(--ztc-font-size-font-s24);
				font-style: normal;
				font-weight: var(--ztc-weight-bold);
				line-height: 24px;
				display: inline-block;
				transition: all .4s;
			}

			p {
				color: var(--ztc-text-text-9);
				font-family: var(--figtree);
				font-size: var(--ztc-font-size-font-s16);
				font-style: normal;
				font-weight: 500;
				line-height: 16px;
			}
		}
	}
}

/*============= TEAM CSS AREA STARTS ===============*/