@import '../../common';
.rs-team-slider {
	&.team-slider-style7 {
		.image-wrap {
			text-align: center;
			border-radius: 0;
			.image-inner {
				position: relative;
				display: inline-block;
				border-radius: 0;
				a {
					z-index: 1;
					position: relative;
					display: inline-block;
					overflow: hidden;
					border-radius: 47% 53% 60% 40% / 41% 49% 51% 59%;
					img {
						border-radius: unset;
					}
				}
				&:after {
					position: absolute;
					content: '';
					right: 0;
					bottom: 0;
					width: 125px;
					height: 125px;
					border-radius: 50%;
					background: #f9f9f9;
					animation: team-shape-circle 55s linear infinite;
				}
			}
		}
	}
	&.team-slider-style8 {
		.team-item {
			.image-wrap {
				padding: 37px;
				background: linear-gradient(-45deg, transparent 17.98%, $primaryColor 99.52%);
				border-radius: 50%;
				.img-inner-wrap {
					position: relative;
					border-radius: 50%;
					overflow: hidden;
					box-shadow: 4px 13px 10px 0px rgba(0,0,0,0.5);
					.team-social {
						position: absolute;
						right: 0;
						left: 0;
						bottom: 30px;
						z-index: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						transition: $transition;
						opacity: 0;
						visibility: hidden;
						a {
							display: inline-block;
							margin-right: 3px;
							&:last-child {
								margin: 0 !important;
							}
						}
					}
					&:after {
						position: absolute;
						content: '';
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						transition: $transition;
						background: linear-gradient(180deg, transparent 17.98%, $primaryColor 99.52%);
						transform: translateY(50px) scale(1.2);
						opacity: 0;
						visibility: hidden;
					}
				}
			}
			.team-item-wrap {
				&:hover {
					.image-wrap {
						.img-inner-wrap {
							.team-social {
								opacity: 1;
								visibility: visible;
							}
							&:after {
								visibility: visible;
								opacity: 1;
								transform: translateY(0) scale(1);
							}
						}
					}
				}
			}
		}
	}
	&.team-slider-style9 {
		.plus_team {
			position: absolute;
			right: 20px;
			bottom: -20px;
			.social-icons1 {
				display: flex;
				flex-direction: column;
				margin-bottom: 2px;
				transform: translateY(-20px);
				transition: $transition;
				opacity: 0;
				a {
					margin: 1px 0;
					&:first-child {
						top-bottom: 0;
					}
					&:last-child {
						margin-bottom: 0;
					}
				}
			}
			i {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				border-radius: 4px;
				color: $titleColor;
				width: 40px;
				height: 40px;
				background: $whiteColor;
				transition: $transition;
				&:hover {
					background: $primaryColor;
					color: $whiteColor;
				}
				&.ri-share-line{
					background: $primaryColor;
					color: $whiteColor;
					&:hover {
						background: $primaryColor;
						color: $whiteColor;
					}
				}
			}
		}
		.team-inner-wrap {
			position: relative;
			border-radius: 10px;
			margin: 20px 0;
			padding: 10px;
			background: $whiteColor;
			box-shadow: 0px 2px 18px 0px rgba(12, 4, 66, 0.06);
			.image-wrap {
				position: relative;
				img {
					border-radius: 10px 10px 0 0;
				}
			}
			.team-content {
				padding: 20px 10px 15px;
				.team-name {
					margin: 0 0 3px;
					font-size: 24px;
					font-weight: 600;
					line-height: 36px;
					text-transform: capitalize;
					a {
						color: $titleColor;
						&:hover {
							color: $primaryColor;
						}
					}
				}
			}
			&:hover {
				.plus_team {
					.social-icons1 {
						opacity: 1;
						transform: translateY(0);
					}
				}
			}
		}
		&.color_gradient_scheme {
			.plus_team {
				i.ri-share-line {
					background-image: linear-gradient(90deg, $primaryColor 0%, $secondaryColor 100%);
				}
				.social-icons1 {
					i {
						color: #fff;
						background-image: linear-gradient(90deg, $primaryColor 0%, $secondaryColor 100%);
						&:hover {
							background-image: linear-gradient(90deg, $secondaryColor 0%, $primaryColor 100%);
						}
					}
				}
			}
		}
	}
	&.team-slider-style10 {
		.team-content-inner {
			margin-right: 30px;
			.team-content {
				border-radius: 0 0 5px 5px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: -60px;
				.plus_team {
					border-left: 1px solid #e7e7e7;
					line-height: 35px;
					padding-left: 30px;
					display: flex;
					.social-icons1 {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						position: absolute;
						right: 0;
						bottom: 100%;
						width: 50px;
						background: #010d14;
						padding: 12px 0;
						opacity: 0;
						visibility: hidden;
						transition: all 0.4s ease 0s;
						z-index: -1;
						transform: scaleY(0);
						-webkit-transform-origin: bottom;
						-moz-transform-origin: bottom;
						-ms-transform-origin: bottom;
						-o-transform-origin: bottom;
						transform-origin: bottom;
						a {
							padding: 0;
							background: transparent;
							i {
								background: transparent;
							}
							&:hover {
								i {
									color: $primaryColor;
									background: transparent;
								}
							}
						}
					}
					&:hover {
						.social-icons1 {
							visibility: visible;
							opacity: 1;
							z-index: 2;
							transform: scaleY(1);
						}
					}
					.share-icon i {
						margin: 0;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						z-index: 2;
						right: 35px;
						font-weight: 700;
						font-size: 18px;
						cursor: pointer;
						transition: 500ms ease;
						background: #EB003D;
						color: #fff;
						width: 45px;
						height: 45px;
						border-radius: 45px;
						line-height: 50px;
						text-align: center;
					}
				}
			}
		}
		
		.team-item {
			padding: 0 30px!important;
			overflow: hidden;
			.social-icons1 {
				text-align: center;
				margin-top: 14px;
				a {
					i {
						color: #fff;
						font-size: 15px;
						width: 35px;
						height: 35px;
						line-height: 35px;
						text-align: center;
						-webkit-transition: 0.3s all ease;
						transition: 0.3s all ease;
						border-radius: 50%;
						margin: 0;
					}
				}
			}
			.team-inner-wrap {
				border-radius: 0 0 5px 5px;
				position: relative;
				padding-top: 30px;
				.image-wrap {
					position: relative;
					&:before {
						content: "";
						position: absolute;
						background: #fff;
						left: 30px;
						bottom: 30px;
						height: 100%;
						width: 100%;
						z-index: -1;
					}
					.pointer-events {
						overflow: hidden;
						display: block;
					}
	
					img {
						border-radius: 0;
						transition: $transition;
					}
					&:hover {
						img {
							transform: scale(1.05);
						}
					}
					.social-icons1 {
						position: absolute;
						right: 0;
						bottom: -180px;
						width: 50px;
						background: #013aa8;
						padding: 12px 0;
						opacity: 1;
						visibility: visible;
						transition: all 0.4s ease 0s;
						a {
							padding: 0;
							background: transparent;
							i {
								background: transparent;
							}
							&:hover {
								i {
									color: $primaryColor;
									background: transparent;
								}
							}
						}
					}
				}
				&:hover {
					.image-wrap {
						.social-icons1 {
							right: 0;
							width: 50px;
							opacity: 1;
							visibility: visible;
						}
					}
				}
				.team-content {
					text-align: left;
					padding: 20px 35px 17px;
					box-shadow: 0 5px 20px rgba(34, 34, 34, 0.1);
					background: #010d14;
					margin-bottom: 30px;
					position: unset;
					opacity: 1;
					position: relative;
					h3.team-name {
						font-weight: 600;
						font-size: 20px;
						margin-bottom: 0px;
						text-transform: capitalize;
						a {
							text-decoration: none;
						}
					}
					span.team-title {
						font-size: 15px;
						color: #ffffff;
						font-weight: 600;
					}
				}
				.social-icons {
					display: none;
				}
			}
			
		}
		.rs-addon-slider {
			.slick-arrow {
				opacity: 1!important;
			}
	
		}
	}
	&.team-slider-style11 {
		.team-item{

			.image-wrap{
				overflow: hidden;
				img{
					transition: $transition;
					width: 100%;
				}
			}
			.team-content-inner {
				margin-right: 60px;
				.team-content {
					border-radius: 0 4px 4px 4px;
					overflow: hidden;
					margin-top: -60px;
					background: #f9f9f9;
					padding: 25px 28px;
					position: relative;
					&::after{
						content: "";
						position: absolute;
						top: 0;
						left: 0;
						width: 0%;
						height: 4px;
						background: #D2C007;
						transition: $transition;
					}
					.inner-ctn{
						display: flex;
						align-items: center;
						margin-bottom: 12px;
						.team-name{
							margin: 0;
							a{
								color: #363C3C;
								&:hover{
									color: #D2C007;
								}
							}
						}
						.team-title{
							margin-left: 15px;
						}
					}
					.plus_team {
						.social-icons1{
							display: flex;
							a{
								margin-right: 10px;
								i{
									&::before{
										color: #363c3c59;
										transition: $transition;
									}
								}
								&:hover{
									i{
										&::before{
											color: #D2C007;
										}
									}
								}
							}
						}
					}
				}
			}
			.rs-addon-slider {
				.slick-arrow {
					opacity: 1!important;
				}
		
			}
			&:hover{
				.image-wrap{
					img{
						transform: scale(1.06);
					}
				}
				.team-content-inner{
					.team-content{
						&::after{
							width: 100%;
						}
					}
				}
			}
		}
		.slick-arrow{
			&::before{
				content: unset !important;
			}
		}
		.slick-center {
			.image-wrap{
				img{
					transform: scale(1.06);
				}
			}
			.team-content-inner{
				.team-content{
					&::after{
						width: 100%;
					}
				}
			}
		}
	}
	&.team-slider-style12 {
		.team-item {
			.team-inner-wrap{
				.image-wrap {
					overflow: hidden;
					position: relative;
					.social-trigger-btn {
						width: 60px;
						height: 60px;
						display: flex;
						align-items: center;
						justify-content: center;
						background: $secondaryColor;
						transition: $transition;
						cursor: pointer;
						position: absolute;
						bottom: 30px;
						z-index: 11;
						left: 20px;
						> * {
							transform: rotate(0deg);
							transition: $transition;
						}
						svg {
							width: 14px;
							height: 14px;
							path {
								fill: $primaryColor;
								transition: $transition;
							}
						}
						i {
							font-size: 14px;
							color: $primaryColor;
							transition: $transition;
						}
						&:hover{
							background: $primaryColor;
							i {
								color: #fff;
							}
							svg {
								path {
									fill: #fff;
								}
							}
						}
					}
					.social-icons {
						position: absolute;
						left: 85px;
						bottom: 30px;
						opacity: 0;
						transition: $transition;
						a{
							margin: 0 2px;
							background: $secondaryColor;
							width: 60px;
							height: 60px;
							font-size: 16px;
							display: inline-flex;
							align-items: center;
							justify-content: center;
							opacity: 0;
							text-align: center;
							transform: translateX(-30px);
							-webkit-transition: 0.3s all ease;
							&:hover{
								color: #fff;
								background-color: $primaryColor;
							}
						}
					}
				}
				&.active {
					.social-trigger-btn {
						> * {
							transform: rotate(45deg);
						}
					}
					.social-icons {
						transform: scaleX(1);
						opacity: 1;
						a {
							transform: translateX(0);
							@for $i from 1 through 10 {
								&:nth-child(#{$i}) {
								  transition-delay: #{0.1 * ($i - 1)}s;
								  opacity: 1;
								  opacity: #{0 * ($i - 1)}s;
								}
							}
						}
					}
				}
			}
		}
		&.clip-path-enable {
			.team-item {
				.image-wrap {
					.social-trigger-btn {
						clip-path: polygon(0 0, 88% 0, 100% 100%, 12% 100%);
					}
					.social-icons {
						a{
							clip-path: polygon(0 0, 88% 0, 100% 100%, 12% 100%);
						}
					}
				}
			}
		}
	}
}
.team-slider-default {
	position: relative;
	margin: 0;
	display: flex;
	align-items: flex-end;
	gap: 100px;
	justify-content: space-between;
	.rsaddon-slider-conf {
		display: none;
	}
	.team-item {
		padding: 0;
	}
	.slider-for {
		width: 100%;
		max-width: 40%;
		.team-inner-wrap {
			margin-bottom: 0 !important;
			.image-wrap {
				position: relative;
				border-radius: 5px;
				overflow: hidden;
				a {
					border-radius: inherit;
				}
				img {
					width: 100%;
					border-radius: inherit;
				}
				.social-icons {
					display: flex;
					flex-direction: column;
					padding: 15px 30px 0 0;
					gap: 5px;
					position: absolute;
					top: 0;
					right: 0;
					opacity: 0;
					transform: scaleY(0);
					transition: $transition;
					a {
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 35px;
						background: $secondaryColor;
						height: 35px;
						border-radius: 3px;
						&:hover {
							color: $primaryColor;
							background: #fff;
						}
					}
				}
			}
			.team-content {
				padding: 20px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: absolute;
				left: 30px;
				right: 30px;
				bottom: 30px;
				border-radius: 5px;
				background: rgba(3, 51, 51, .9);
				.team-member-info {
					.team-name {
						margin-bottom: 0;
						a {
							color: #fff;
							&:hover {
								color: $primaryColor;
							}
						}
					}
					.team-title {
						color: #fff;
						display: block;
					}
				}
				.social-trigger-btn {
					width: 40px;
					height: 40px;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					color: #fff;
					background: $primaryColor;
					transition: $transition;
					cursor: pointer;
					i {
						line-height: 1;
						top: 0;
					}
				}
			}
			&.active {
				.social-icons {
					transform: scaleY(1);
					opacity: 1;
				}
				.social-trigger-btn {
					transform: rotate(45deg);
				}
			}
		}
	}
	.rs-slide-nav {
		max-width: 100%;
		background: inherit;
		overflow: hidden;
		padding-right: 66px;
		.slick-arrow {
			&.slick-prev {
				left: unset;
				right: 0;
				top: calc(50% - 22.5px);
			}
			&.slick-next {
				right: 0;
				top: calc(50% + 22.5px);
			}
		}
	}
	.rs-slide-nav {
		.slick-list {
			margin-left: -14px;
			margin-right: -14px;
		}
		.image-list {
			padding-left: 14px;
			padding-right: 14px;
			border-radius: 5px;
			overflow: hidden;
			border: none !important;
			img {
				cursor: pointer;
				border-radius: inherit;
			}
		}
	}
}

// Slider Controll Css Start
.rsaddon-unique-slider {
	&.rs-team-slider {
		&.team-slider-style8 {
			.rs-addon-slider {
				position: relative;
				padding-bottom: 123px;
				.custom-nav {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					display: flex;
					align-items: center;
					border-radius: 10px;
					overflow: hidden;
					.slick-arrow {
						font-size: 16px;
						line-height: 26px;
						font-weight: 600;
						text-transform: uppercase;
						opacity: 1;
						visibility: visible;
						color: #fff;
						font-family: $bodyFont;
						background: #765DF7;
						position: unset;
						width: unset;
						height: unset;
						transform: unset;
						display: flex;
						align-items: center;
						transition: $transition;
						padding: 22px 44px;
						border-radius: 0;;
						border: none;
						svg {
							margin-right: 10px;
							path {
								transition: $transition;
								fill: #fff;
							}
						}
						&:before {
							display: none;
						}
						&.slick-next {
							svg {
								margin-left: 10px;
								margin-right: 0;
							}
						}
						&:hover {
							color: $primaryColor;
							svg {
								path {
									fill: $primaryColor;
								}
							}
						}
					}
					&:after {
						position: absolute;
						content: '/';
						left: 50%;
						top: 50%;
						color: #fff;
						transform: translate(-50%, -50%);
						pointer-events: none;
						z-index: 9;
					}
				}
			}
		}
	}
}


// Slider Controll Css End
@keyframes team-shape-circle {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.home-4-team-member .team-item .team-content .social-icons1 {
	display: flex;
	flex-direction: column;
}

.home-4-team-member .team-item .team-content {
	display: flex;
    justify-content: space-between;
}