@import '../../common';
 
.rs-team-grid {
	.owl-stage-outer {
		overflow-y: visible;
	}
	.team-item {
		margin-bottom: 125px;
		position: relative;
		overflow: visible;
		margin-left: 20px;
		margin-right: 20px;
		-webkit-transition: 0.3s all ease;
		transition: 0.3s all ease;
		&:before {
			display: none;
			background: transparent;
		}
		.image-wrap {
			overflow: hidden;
			position: relative;
			.social-icons {
				.social-icon {
					svg {
						width: 18px;
						height: 18px;
						fill: #fff;
					}
				}
				a {
					display: inline-block;
					margin: 0 8px;
					i {
						color: #fff;
						font-size: 15px;
						-webkit-transition: 0.3s all ease;
						transition: 0.3s all ease;
					}
				}
			}
			img {
				transform: scale(1);
				transition: 0.3s ease-in-out;
			}
		}
		.team-content {
			background: #fff;
			padding: 20px;
			text-align: center;
			z-index: 9;
			position: absolute;
			z-index: 1;
			opacity: 1;
			width: unset;
			height: unset;
			display: inline-block;
			border-radius: 2px;
			top: unset;
			bottom: -80px;
			padding: 20px 20px 25px;
			left: 50%;
			max-width: 300px;
			transform: translateX(-50%);
			width: 100%;
			.team-name {
				display: block;
				font-size: 24px;
				line-height: 36px;
				margin-bottom: 0px;
				text-transform: capitalize;
				font-weight: 700;
				a {
					color: $titleColor;
				}
			}
			.team-title {
				font-size: 16px;
				font-weight: 400;
				padding-top: 5px;
				display: block;
				color: $bodyColor;
			}
			.team-desc {
				font-size: 14px;
				margin-bottom: 0;
				color: $bodyColor;
				position: relative;
				z-index: 1;
				max-height: 0;
				opacity: 0;
				line-height: 24px;
				-webkit-transition: all 0.6s, max-height 0.5s;
				-o-transition: all 0.6s, max-height 0.5s;
				-moz-transition: all 0.6s, max-height 0.5s;
				transition: all 0.6s, max-height 0.5s;
				overflow: hidden;
				-webkit-transform: scaleY(0);
				-moz-transform: scaleY(0);
				-ms-transform: scaleY(0);
				-o-transform: scaleY(0);
				transform: scaleY(0);
				-webkit-transform-origin: bottom;
				-moz-transform-origin: bottom;
				-ms-transform-origin: bottom;
				-o-transform-origin: bottom;
				transform-origin: bottom;
				&:before {
					content: '';
					position: absolute;
					z-index: 1;
					background: #010d14;
					top: 0;
					left: 50%;
					width: 50px;
					height: 2px;
					margin-left: -25px;
				}
			}
			&:after {
				position: absolute;
				content: "";
				left: 0;
				bottom: 0;
				background-color: $primaryColor;
				height: 2px;
				width: 0;
				-webkit-transition: 0.3s all ease;
				transition: 0.3s all ease;
			}
			
		}
		&:hover {
			.team-content {
				opacity: 1;
				top: unset;
				.team-desc {
					position: relative;
					max-height: 400px;
					opacity: 1;
					text-align: center;
					-webkit-transform: scaleY(1);
					-moz-transform: scaleY(1);
					-ms-transform: scaleY(1);
					-o-transform: scaleY(1);
					transform: scaleY(1);
					-webkit-transition: all 0.4s, max-height 1.5s;
					-o-transition: all 0.4s, max-height 1.5s;
					-moz-transition: all 0.4s, max-height 1.5s;
					transition: all 0.4s, max-height 1.5s;
					padding-top: 18px;
					margin-top: 8px;
				}

				&:after {
					width: 100%;
				}
			}
			
		}
	}
	
}

.team-grid-style1 {
	.team-item {
		.image-wrap {
			.social-icons {
				position: absolute;
				height: 39px;
				background-color: $primaryColor;
				border-radius: 2px 0px 0px 2px;
				right: -108px;
				top: 65px;
				-webkit-transition: 0.3s all ease;
				transition: 0.3s all ease;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 10px;
			}

			img {
				width: 100%;
			}
		}
		&:hover {
			.image-wrap { 
				.social-icons {			
					right: 0;	
				}
			}
			
		}
	}
	&.clip-path-enable {
		.team-item {
			.image-wrap {
				clip-path: polygon(0% 0%, 88% 0, 100% 10%, 100% 100%, 0% 100%) !important;
			}
		}
	}
}

.team-grid-style2 {
	.team-item {
		.image-wrap {
			.social-icons {
				position: absolute;
				height: 39px;
				background-color: #EA5501;
				border-radius: 2px 0px 0px 2px;
				left: 50%;
				bottom: -8px;
				transform: translate(-50%, 0px);
				-webkit-transition: 0.3s all ease;
				transition: 0.3s all ease;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 10px;
			}
		}
		
		&:hover {
			.image-wrap { 
				.social-icons {			
					bottom: 31px;
				}
				img {
					transform: scale(1.1);
				}
			}
			
		}
	}
}

.team-grid-style3 {
	.team-item {
		.team-content {
			transition: all 0.5s ease;
			bottom: 0;
			opacity: 0;
			visibility: hidden;
			text-align: left;
			&:after {
				display: none;
			}
		}

		.image-wrap {
			overflow: hidden;
			img {
				transform: scale(1.01);
				transition: all 0.4s ease;
			}
		}
		.social-icons {
			display: none;
			align-items: center;
			justify-content: center;
			.social-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				margin: 0 5px;
				transition: all 0.5s ease;
				svg {
					width: 18px;
					height: 18px;
				}
			}
			&.social-enable{
				display: flex;
			}
		}
		
		&:hover {
			.image-wrap { 
				.social-icons {			
					bottom: 31px;
				}
				img {
					transform: scale(1.1);
				}
			}
			.team-content {
				transform: translate(-50%,-35px);
				opacity: 1;
				visibility: visible;
			}
			
		}
	}
}

.team-grid-style4 {
    .team-both-wrap {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
		gap: 50px;
		.team_acc_feature_image {
            width: 100%;
            position: relative;
            list-style: none;
            padding: 0;
            margin: 0;
            overflow: hidden;
            height: 500px;
            img {
                transition: $transition;
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                object-fit: cover;
                object-position: top center;
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                &.active {
                    pointer-events: unset;
                    opacity: 1;
                    visibility: visible;
                }
            }
        }
        .team-accordion {
            position: relative;
            z-index: 1;
            .accordion-item {
                border: none;
                margin-bottom: 20px;
                border-radius: 0px;
                background: transparent;
                .accordion-header {
                    .team-acc-btn {
						margin-bottom: 0;
                        cursor: pointer;
						transition: $transition;
						&:not(.collapsed) {
							pointer-events: none;
						}
                    }
                }
                .accordion-body {
                    padding: 5px 0 0 0;
                    .desig {
                        color: $titleColor;
						margin-bottom: 10px;
                    }
					.desc {
						margin-bottom: 15px;
					}
					.rs_btn {
						a {
							display: inline-flex;
							align-items: center;
							gap: 7px;
							color: $titleColor;
							transition: $transition;
							svg {
								width: 17px;
								height: 17px;
								path {
									transition: $transition;
									fill: $titleColor;
								}
							}
							i {
								font-size: 17px;
								color: $titleColor;
								transition: $transition;
							}
							&:hover {
								color: $primaryColor;
								i {
									color: $primaryColor;
								}
								svg {
									path {
										fill: $primaryColor;
									}
								}
							}
						}
					}
                }
                &:last-child {
                    margin-bottom: 0 !important;
                }
            }
        }
    }
}
 
.team-grid-style5 {
	.team-item {
		.team-inner-wrap{
			.image-wrap {
				.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;
						text-align: center;
						opacity: 0;
						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-grid-style6 {
	.team-item {
		.team-inner-wrap{
			.image-wrap {
				.social-trigger-btn {
					width: 40px;
					height: 40px;
					display: flex;
					align-items: center;
					justify-content: center;
					background: $secondaryColor;
					transition: $transition;
					cursor: pointer;
					position: absolute;
					right: 30px;
					top: 30px;
					z-index: 11;
					> * {
						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;
					display: flex;
    				flex-direction: column;
    				gap: 10px;
					right: 28px;
					top: 82px;
					visibility: hidden;
					opacity: 0;
					transition: $transition;
					a{
						margin: 0 2px;
						background: $secondaryColor;
						width: 40px;
						height: 40px;
						font-size: 18px;
						display: inline-flex;
						align-items: center;
						opacity: 0;
						justify-content: center;
						text-align: center;
						transform: translateY(-10px);
						transition: $transition;
						i{
							color: #411aee;
							transition: $transition;
						}
						&:hover{
							color: #fff;
							background-color: $primaryColor;
						}
					}
				}
				&:hover{
					.social-icons{
						opacity: 1;
						visibility: visible;
						a {
							transform: translateY(0);
							opacity: 1;
							transition-delay: 0s !important;
						}
					}
				}
			}
		}
	}
	&.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-grid-style7 {
	.team-item {
		.team-inner-wrap{
			display: flex;
			gap: 50px;
			> * {
				width: 100%;
				max-width: 50%;
			}
			.image-wrap {
				flex-shrink: 0;
				img {
					width: 100%;
					height: auto;
				}
			}
			.team-content {
				position: unset;
				background: transparent;
				text-align: left;
				transform: unset;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: auto;
				padding: 0;
				.social-wrapper {
					display: inline-flex;
					align-items: center;
					gap: 8px;
					.social-trigger-btn,
					.social-icons a {
						display: inline-flex;
						align-items: center;
						justify-content: center;
						gap: 8px;
						width: 36px;
						height: 36px;
						svg {
							width: 15px;
							height: 15px;
							path {
								transition: $transition;
							}
						}
						i {
							font-size: 15px;
							transition: $transition;
						}
					}
					.social-trigger-btn {
						background: $primaryColor;
						position: relative;
						z-index: 1;
						svg {
							path {
								fill: $whiteColor;
							}
						}
						i {
							color: $whiteColor;
						}
					}
					.social-icons {
						display: inline-flex;
						align-items: center;
						gap: inherit;
						a {
							background: $whiteColor;
							color: $titleColor;
							box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.0784313725);
							opacity: 0;
							pointer-events: none;
							transform: translateX(-30px);
							svg {
								path {
									fill: $titleColor;
								}
							}
							&:hover {
								color: $primaryColor;
								svg {
									path {
										fill: $primaryColor;
									}
								}
							}
						}
					}
				}
				&:after {
					display: none;
				}
			}
			&:hover {
				.team-content {
					.social-wrapper {
						.social-icons {
							a {
								transform: translateX(0);
								pointer-events: auto;
								@for $i from 1 through 10 {
									&:nth-child(#{$i}) {
									  transition-delay: #{0.1 * ($i - 1)}s;
									  opacity: 1;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

.rspopup_style1 {
	.rs-social-icons {
		.social-icons1 {
			display: flex;
			.social-icon {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}