/*--------------------------------------------------------------
Service Style
----------------------------------------------------------------
# Service Grid
# Service Carousel
--------------------------------------------------------------*/
.pxl-service-carousel1 {
	.pxl-post--featured {
		position: absolute;
		right: -110px;
		bottom: -90px;
		z-index: -1;
		transition: all .3s;
		width: 100%;

		img {
			width: auto;
		}

		@media #{$max-lg-1} {
			right: -50%;
		}

		@media #{$max-sm} {
			right: -35%;
		}

		@media (max-width: 580px) {
			right: -50%;
		}
	}

	.pxl-swiper-slide:nth-child(2) {
		.pxl-post--featured {
			right: -233px;
			bottom: -50px;

			@media #{$max-lg-1} {
				right: -50%;
			}

			@media #{$max-sm} {
				right: -35%;
			}

			@media (max-width: 580px) {
				right: -50%;
			}
		}

	}

	.pxl-swiper-slide:last-child {
		.pxl-post--featured {
			right: -170px;
			bottom: -103px;

			@media #{$max-lg-1} {
				right: -50%;
			}

			@media #{$max-sm} {
				right: -35%;
			}

			@media (max-width: 580px) {
				right: -50%;
				bottom: -70px;
			}
		}
	}

	.pxl-swiper-container {
		padding: 31px 31px 100px 31px;
		margin: -31px -31px -100px -31px;

		@media #{$max-lg-1} {
			padding: 31px 15px 100px 15px;
			margin: -31px -30px -100px -30px;
		}
	}

	.pxl-carousel-inner {
		overflow: initial;
	}

	.pxl-post--inner {
		&:hover {
			filter: drop-shadow(-2.3px 21.879px 31px $primary_color);
		}

		border-radius: 16px;
	}

	.pxl-post--title {
		font-size: 30px;
		color: rgb(255, 254, 254);
		font-weight: bold;
		line-height: 1.2;
		letter-spacing: -1.2px;

		@media #{$max-lg} {
			font-size: 24px;
		}

		display: inline;
		background-image: linear-gradient(currentColor, currentColor);
		background-position: 0 100%;
		background-repeat: no-repeat;
		background-size: 0% 1px;
		transition: background-size 0.3s ease-in-out;
	}

	.pxl-item--content {
		font-size: 16px;
		color: rgba(255, 255, 255, 0.8);
		line-height: 1.813;
		margin-top: 23px;
		opacity: 1;
		transition: all .3s;
		letter-spacing: -0.25px;
	}

	.pxl-post--readmore {
		width: 44.3px;
		height: 44.3px;
		border-radius: 4px;
		border: 2px solid #fff;
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		background: $primary_color;
		top: 36px;
		right: 30px;
		opacity: 0;
		transform: opacity 0.3s;
		margin-top: 5px;
		transition: all .3s;

		i {
			transform: rotate(-45deg);
			color: #fff;
			font-size: 22px;
			display: block;
			line-height: 1;
			margin-bottom: -6px;
		}
	}

	.pxl-post--link-all {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
	}

	.pxl-post-content {
		padding: 43px 43px 43px 38px;
		border-radius: 16px;
		overflow: hidden;
		position: relative;
		min-height: 340px;
		transition: all .3s;
		z-index: 1;

		&::before {
			position: absolute;
			content: '';
			width: 100%;
			height: 100%;
			top: -1px;
			left: 1px;
			border-radius: inherit;
			border: 2px solid rgba(255, 255, 255, 0.25);
			transition: all .3s;
			z-index: -1;
		}

		&::after {
			position: absolute;
			content: '';
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			border-radius: inherit;
			background-image: linear-gradient(0deg, $primary_color 0%, #09010f 100%);
			transition: all .3s;
			z-index: -2;
			opacity: 0;
			transform: translateY(10px);
		}

		@media #{$max-md2} {
			padding: 30px;
		}

		&:hover {
			.pxl-post--readmore {
				opacity: 1;
			}

			&::before {
				border-color: #fff;
			}

			&::after {
				opacity: 1;
				transform: translateY(0);
			}

			.pxl-post--title {
				background-size: 100% 1px;
			}

			.pxl-item--content {
				opacity: 0;
			}

			.pxl-post--icon {
				color: #fff;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);

				&:after {
					opacity: 1;
				}

			}

			.pxl-post--featured {
				transform: scale(1.05);
			}
		}
	}

	&.pxl-service-grid-layout1 {
		.pxl-post--inner {
			padding-bottom: 48px;
		}
	}
}

.pxl-service-grid-layout1 {
	.pxl-post--title {
		color: var(--ai-agency-ffffff, #FFF);
		font-size: 22px;
		font-style: normal;
		font-weight: 600;
		line-height: 1.18;
		margin-bottom: 24px;
	}

	.pxl-post--content {
		color: var(--ai-agency-ffffff, #FFF);
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 1.5;
	}
	.pxl-content {
		background: rgba(255, 255, 255, 0.12);
		backdrop-filter: blur(10px);
		padding: 36px;
		padding-bottom: 60px;
		border-radius: 10px;
		clip-path: url(#bgblur_0_1_298_clip_path);
		position: relative;
		overflow: hidden;
		width: 327px;
		
		.pxl-border {
			position: absolute;
			width: 99.5%;
			height: 99.5%;
			padding: 1px;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) scale(0.9);
			border-radius: inherit;
			-webkit-mask:
				linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
			mask-composite: add, add;
			-webkit-mask-composite: xor;
			mask-composite: exclude;
			background: linear-gradient(90deg, $gradient_color_from 0%, $gradient_color_to 100%);
			transition: all .3s ease;
			clip-path: url(#bgblur_0_1_276_clip_path);
			opacity: 0;
		}

		&::before {
			content: '';
			position: absolute;
			width: 72px;
			height: 72px;
			padding: 1px;
			bottom: -35px;
			left: 50%;
			transform: translateX(-51%) scale(0.9);
			border-radius: 100%;
			-webkit-mask:
				linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
			mask-composite: add, add;
			mask-composite: add, add;
			-webkit-mask-composite: xor;
			mask-composite: exclude;
			background: linear-gradient(90deg, $gradient_color_from 0%, $gradient_color_to 100%);
			transition: all .3s ease;
			opacity: 0;
		}

		>svg {
			width: 0;
			height: 0;
			position: absolute;
		}
	}

	.pxl-post--featured {
		border-radius: 8px;
		margin-bottom: 18px;
	}

	.pxl-button-holder {
		text-align: center;
		margin-top: -36px;
		width: 327px;
	}

	.pxl-post--holder {
		display: inline-flex;
		padding: 8px;
		border-radius: 60px;
		position: relative;
		
		.pxl-post--readmore {
			display: inline-flex;
			width: 52px;
			height: 52px;
			border-radius: 52px;
			justify-content: center;
			align-items: center;
			position: relative;
			z-index: 1;
			transition: all .3s ease;

			&::before {
				position: absolute;
				content: '';
				width: 100%;
				height: 100%;
				border-radius: inherit;
				z-index: -2;
				inset: 0;
				background: #6300DB;
				transition: all .3s ease;
			}

			&::after {
				position: absolute;
				content: '';
				width: 0%;
				height: 0%;
				border-radius: inherit;
				z-index: -1;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background: linear-gradient(90deg, $gradient_color_from 0%, $gradient_color_to 100%);
				transition: all .3s ease;
			}
		}
	}

	.pxl-post--inner {
		margin-bottom: 24px;
		display: flex;
		flex-direction: column;
		align-items: center;
		&:hover {
			.pxl-content{
				.pxl-border {
					transform: translate(-50%, -50%) scale(1);
					opacity: 1;
				}
				&::before{
					transform: translateX(-51%) scale(1);
					opacity: 1;
				}
			}
			.pxl-post--readmore {
				svg {
					animation: pxl_zoom_reverse 0.3s ease-in-out;
				}

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

}


body.rtl {}