.pxl-team-grid1{
	.pxl-item--image{
		position: relative;
		z-index: 1;
		&::before{
			content: '';
			position: absolute;
			height: 82.8%;
			width: 100%;
			bottom: 0;
			left: 0;
			border-radius: 8px;
			background: radial-gradient(circle, 
				#651288 0%,    
				#4b1068 40%,   
				#311248 70%,   
				#1a1331 100%   
			);
			z-index: -1;
			transition: background-size 0.6s ease, background-position 0.6s ease;
			background-size: 100% 100%;
			background-position: center;
		}
	}
	.pxl-content{
		display: flex;
		margin-top: 18px;
		justify-content: space-between;
		position: relative;
		z-index: 2;
		.pxl-item--title{
			margin: 0;
		}
	}
	.pxl-social--button{
		width: 40px;
		height: 40px;
		border-radius: 40px;
		border: 1.5px solid #fff;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		i{
			line-height: 1;
			transition: all .3s;
			display: block;
			font-family: "Font Awesome 5 Free";
  			font-weight: 900;
			font-size: 16px;
		}
	}
	.pxl-item--social{
		position: absolute;
		bottom: 65px;
  		right: 0;
		transition: 0.3s ease;
		// transform: scaleY(0);
		transform-origin: bottom;
		display: flex;
		flex-direction: column;
		opacity: 0;
		transition: opacity 0.3s ease;
		a{
			display: inline-flex;
			width: 40px;
			height: 40px;
			align-items: center;
			justify-content: center;
			position: relative;
			overflow: hidden;
			border: 1.5px solid #fff;
			border-radius: 40px;
			z-index: 2;
			color: #fff;
			background-color: rgba(#fff,0.3);
			opacity: 0;
			transform: translateY(20px);
			transition: transform 0.4s ease, opacity 0.4s ease;
			&:hover{
				i{
					animation-name: wobble_vertical;
					animation-duration: 1s;
					animation-timing-function: ease-in-out;
					animation-iteration-count: 1;
				}
			}
			i{
				font-size: 15px;	
			}
			+a{
				margin-top: 5px;
			}
		}
		a:nth-child(1) {
			transition-delay: 0.3s;
		}
		a:nth-child(2) {
			transition-delay: 0.2s;
		}
		a:nth-child(3) {
			transition-delay: 0.1s;
		}
	}
	.pxl-item--inner {
		border: 1px solid #651288;
		border-radius: 8px;
		margin-bottom: 30px;
		padding: 28px;
		padding-bottom: 22px;
		background: #050113;
		&:hover{
			.pxl-item--social{
				// transform: scaleY(1);
				opacity: 1;
				a{
					opacity: 1;
    				transform: translateY(0);
				}
				a:nth-child(1) {
					transition-delay: 0.1s;
				}
				a:nth-child(2) {
					transition-delay: 0.2s;
				}
				a:nth-child(3) {
					transition-delay: 0.3s;
				}	
			}
			.pxl-social--button{
				i{
					transform: rotate(45deg);
				}
			}
			.pxl-item--image{
				&::before{
					background-size: 150% 150%; 
					background-position: center;
				}
			}
		}
	}
}
///////team carousel
.pxl-team-carousel1{
	.pxl-swiper-slide{
		padding: 0 10px 15px 10px;
	}
	.pxl-swiper-container{
		margin: 0 -10px;
	}
	.pxl-item--image{
		display: flex;
  		justify-content: center;
		border-radius: inherit;
		overflow: hidden;
	}
	.pxl-item--inner {
		border-radius: 25px;
		border: 10px solid #fff;
		position: relative;
		z-index: 2;
		transition: all .3s;
		&:hover{
			border-color: transparent;
			&::before{
				opacity: 0;
			}
			&::after{
				opacity: 1;
				border-radius: inherit;
			}
			.pxl-icon-link,.pxl-item--social{
				opacity: 1;
				transform: translateY(0);
			}
			.pxl-icon-link{
				i{
					animation: rotate-icon 1s ease-in-out;
				}
			}
		}
		&::before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			background-color: #e5e5e5;
			width: 100%;
			height: 100%;
			z-index: -1;
			border-radius: 15px;
			transition: all .3s;
		}
		&::after {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			background-image: url(../img/bg-team-carousel.webp);
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			right:0;
			top: 0;
			opacity: 0;
			z-index: -1;
			transition: all .3s;
			@media (max-width:960px) {
				background-position: center right;
			}
			@media #{$max-sm} {
				background-position: top center;
			}
		}
		.pxl-item--social,.pxl-item--holder{
			position: absolute;
		}
		.pxl-item--holder{
			border-radius: 26px;
			@include background-gradient-rotate(90deg,#dc00f9,$secondary_color);
			left: 50%;
			transform: translateX(-50%);
			bottom: -25px;
			width: 56%;
			padding: 6px 0 5px;
			box-shadow: inset 4px 9px 19px #000;
			.pxl-item--title{
				font-size: 18px;
				color: rgb(255, 255, 255);
				font-weight: bold;
				margin: 0;
			}
			.pxl-item--position{
				font-size: 12px;
				color: rgb(236, 235, 235);
			}  
		}
		.pxl-icon-link{
			width: 46px;
			height: 46px;
			position: absolute;
			top: 0;
			right: 4px;
			@include background-gradient-rotate(90deg,#dc00f9,$secondary_color);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			opacity: 0;
			transform: translateY(-5px);
			transition: all .3s;
			
			i{
				color: #fff;
				font-size: 18px;
				font-weight: 600;
			}
		}
		.pxl-item--social{
			opacity: 0;
			display: flex;
			flex-direction: column;
			top: 55px;
			right: 6px;
			background: #fff;
			padding: 16px 11px 14px 14px;
			gap: 2px;
			border-radius: 21.5px;
			transform: translateY(-5px);
			transition: all .3s;
			@media #{$max-lg3} {
				top: 51px;
				padding: 10px 12px 10px 13px;
			}
			@media #{$max-sm} {
				top: 70px;
			}
			a{
				color: #07040a;
				&:hover{
					color: $primary_color;
				}
			}
		}
	}
	&.style-2{
		.pxl-item--inner{
			border-color: rgb(41, 13, 65);
			&::before{
				background-color: rgb(65, 45, 88);
			}
			&::after {
				background-image: url(../img/bg-team-carousel-dark.webp);
			}
			.pxl-item--social{
				background: #000;
				a{
					color: #fff;
				}
			}
			&:hover{
				border-color: transparent;
			}
		}
	}
}
.pxl-team-carousel2{
	position: relative;
	.pxl-swiper-slide{
		padding: 0 20px;
		@media #{$max-lg} {
			padding: 0 15px;
		}
	}
	@media #{$max-xs} {
		.pxl-swiper-arrow-wrap{
			.pxl-swiper-arrow{
				opacity: 0;
				transition: all .3s;
			}
		}
		&:hover{
			.pxl-swiper-arrow-wrap{
				.pxl-swiper-arrow{
					opacity: 1;
				}
			}
		}
	}
	.pxl-swiper-arrow-wrap{
		.pxl-swiper-arrow{
			width: 48px;
			height: 48px;
			border-radius: 6px;
			border: unset;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			z-index: 1;
			&.pxl-swiper-arrow-prev{
				left: -33px;
			}
			&.pxl-swiper-arrow-next{
				right: -33px;
			}
			i{
				font-size: 11px;
				position: relative;
				z-index: 1;
				color: #fff;
			}
			&:hover{
				&::before{
					padding: 24px;
				}
			}
			&::before{
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 100%;
				height: 100%;
				border-radius: inherit;
				@include background-gradient-button(180deg,#F8B6BC 0%,#771A99 47%,var(--primary-color) 100%);
				mask-composite: exclude;
				padding: 1px;
				-webkit-mask: 
					linear-gradient(#fff 0 0) content-box, 
					linear-gradient(#fff 0 0);
				-webkit-mask-composite: xor; 
				mask-composite: exclude;
				transition: all .3s;
				z-index: -1;
			}
		}
	}
	.pxl-item--inner {
		position: relative;
		border-radius: 20px;
		overflow: hidden;
		padding: 27px 0 0 0;
		&:hover {
            .pxl-item--social {
                transform: scaleX(1);
            }	
			.pxl-bg-before{
				transform: scaleX(1);
				z-index: 1;
			}
			.pxl-bg-after{
				transform: scaleX(1);
				opacity: 1;
				z-index: 2;
			}
			.pxl-item--image{
				img{
					@include transform(translateX(30px));      
				}
			}
        }
	}
	.pxl-item--holder{
		position: relative;
		z-index: 3;
	}
	.pxl-item--background{
		.bg-image{
			position: relative;
		}
		.pxl-bg-before{
			position: absolute;
			width: 100%;
			height: 100%;
			inset: 0;
			z-index: -1;
			transform: scaleX(1);
			transition: all .5s;
			border-radius: 20px;
		}
		.pxl-bg-after{
			position: absolute;
			width: 100%;
			height: 100%;
			inset: 0;
			z-index: -1;
			transform: scaleX(0.99);
			transition: all .5s;
			opacity: 0;
			border-radius: 20px;
		}
	}
	.pxl-item--title{
		color: var(--ffffff, #FFF);
		font-size: 28px;
		font-weight: 700;
		line-height: 1.36; /* 135.714% */
		letter-spacing: -0.28px;
		margin: 0 0 7px 0;
	}
	.pxl-item--position{
		color: var(--ai-agency-fe-7524, #FE7524);
		font-size: 18px;
		font-weight: 400;
		line-height: 1.556; /* 155.556% */
	}
	.pxl-item--image{
		display: flex;
  		justify-content: center;
		margin-top: 14px;
		position: relative;
		z-index: 3;
		img {
            @include transition(all 0.7s);            
            object-fit: cover;
        }
	}
	.pxl-plus {
		display: inline-flex;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		position: absolute;
		bottom: 32px;
		left: 22px;
		@include transition(all 0.5s);
		border: 2px solid #fff;
		border-radius: 50%;
		svg{
			font-size: 15px;
			@include transition(all 0.5s);
		}
	}
	.pxl-item--social {
		position: absolute;
		bottom: 88px;
		left: 22px;
		transition: .3s ease;
		transform: scaleY(0);
		transform-origin: bottom;
		display: flex;
		flex-direction: column-reverse;

		a {
			display: inline-flex;
			width: 44px;
			height: 44px;
			align-items: center;
			justify-content: center;
			position: relative;
			overflow: hidden;
			border-radius: 50%;
			@include background-gradient-button(90deg,var(--primary-color) 0%,var(--fourth-color) 49%,var(--third-color) 100%);
			+a{
				margin-bottom: 8px;
			}

			i {
				color: #fff;
			}

			+.pxl-icon {
				margin-bottom: 3px;
			}

			&.hover {
				&::after {
					left: 0;
					opacity: 1;
				}
			}

			&:hover {
				&::after {
					left: 0;
					opacity: 1;
				}
			}
		}
	}
}
//pxl-team-box
.pxl-team-box1{
	position: relative;
	overflow: hidden;
	.pxl-item--icon {
		position: relative;
		&::before{
			position: absolute;
			content: '';
			inset: 0;
			background-color: #B54C8A;
		}
		img{
			filter: grayscale(100%);
			object-fit: cover;
			mix-blend-mode: luminosity;
			@media (max-width: 991px) {
				max-height: 500px;
			}
		}
	}
	svg{
		fill: $primary_color;
	}
	&:hover{
		.pxl-content{
			.pxl-item--title,.pxl-item--description,svg{
				opacity: 1;
				transform: translateY(0);
			}
			&::before{
				transform: translate(-50%, 0) rotate(135deg);
				clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
			}
			.pxl-item--title {
				transition-delay: 0.2s;
			}
			.pxl-item--description {
				transition-delay: 0.4s;
			}
			svg {
				transition-delay: 0.6s;
			}			
		}
	}
	.pxl-content{
		position: absolute;
		text-align: center;
		bottom: 39px;
		left: 50%;
		z-index: 1;
		transform: translateX(-50%);
		padding-top: 72px;
		width: 100%;
		&::before{
			position: absolute;
			content: '';
			border-radius: 0 0 0 5000px;
			border-bottom: 12px solid #89205e;
			background: var(--ai-agency-ffffff, #fff);
			width: 230.728px;
			height: 230.728px;
			top: 0;
  			left: 50%;
			transform: translate(-50%, 0) rotate(135deg);
    		transform-origin: center center;
			transition: all 0.3s ease-in-out;
			z-index: -1;
			clip-path: polygon(0% 100%, 100% 0%, 0% 100%, 0% 100%);
		}
		.pxl-item--title{
			font-size: 28px;
			font-style: normal;
			font-weight: 700;
			letter-spacing: -0.28px;
			margin-bottom: 4px;
			opacity: 0;
			transform: translateY(5px);
			transition: all .3s ease-in-out;
			transition-delay: 0.4s;
		}
		.pxl-item--description{
			color: var(--ai-agency-5-f-5-d-61, #5F5D61);
			font-size: 18px;
			font-style: normal;
			font-weight: 400;
			margin-bottom: 40px;
			opacity: 0;
			transform: translateY(5px);
			transition: all .3s ease-in-out;
			transition-delay: 0.2s;
		}
		svg{
			opacity: 0;
			transform: translateY(5px);
			transition: all .3s ease-in-out;
			transition-delay: 0.1s;
		}
		a{
			position: absolute;
			width: 100%;
			height: 120%;
			top: 0;
			left: 0;
			z-index: 1;
		}
	}
}