.pxl-icon-box {
	position: relative;
	.pxl-item--link {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99;
	}
}

.pxl-icon-box1 {
	&.style-1 {
		.pxl-item--icon {
			background-color: #{'rgba(var(--primary-color-rgb),0.08)'};
			min-width: 60px;
			width: 60px;
			height: 60px;
			font-size: 34px;
			color: $primary_color;
			line-height: 60px;
			border-radius: 60px;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			@media #{$max-xs} {
				margin-right: 0;
				margin-left: 0;
				margin-bottom: 12px;
			}
			svg {
				height: 34px;
			}
			img {
				max-height: 34px;
			}
		}
		.pxl-item--title {
			margin-bottom: 6px;
		}
		.pxl-item--inner {
			display: flex;
			flex-wrap: nowrap;
			@media #{$max-xs} {
				display: block;
			}
		}
	}
	&.style-2 {
		.pxl-item--icon {
			margin-right: 10px;
			width: 45px;
			min-width: 45px;
			height: 45px;
			border-radius: 45px;
			background-color: #E0FBF9;
			color: #00C3C7;
			font-size: 22px;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
		}
		.pxl-item--title {
			font-family: inherit;
			margin-top: 2px;
			margin-bottom: 0;
			font-size: 14px;
			color: #5D666F;
		}
		.pxl-item--description {
			font-size: 18px;
			font-weight: 700;
			color: #333333;
			@extend .ft-theme-default;
			line-height: 1.4;
		}
		.pxl-item--inner {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
		}
	}
	&.style-3 {
		.pxl-item--icon {
			margin: 0 0 27px;
			line-height: 1;
			font-size: 58px;
			color: $primary_color;
			position: relative;
			z-index: 1;
			display: inline-flex;
			&:before {
				content: '';
				background-color: $primary_color;
				opacity: 0.2;
				width: 34px;
				height: 34px;
				border-radius: 34px;
				position: absolute;
				top: -10px;
				left: -10px;
				z-index: -1;
			}
			svg {
				height: 58px;
			}
		}
		.pxl-item--title {
			margin-bottom: 10px;
			font-size: 20px;
			color: #2E3D62;
		}
		.pxl-item--description {
			font-size: 16px;
			line-height: 1.625;
			color: #677788;
		}
		.pxl-item--inner {
			text-align: center;
			padding: 41px 30px 42px;
			border-radius: 15px;
			@include transition(all 220ms linear 0ms);
			&:hover {
				background-color: #fff;
				box-shadow: 0 10px 60px rgba(#49587C, 0.1);
			}
		}
	}
	&.style-4 {
		.pxl-item--icon {
			margin-right: 18px;
			min-width: 53px;
			width: 53px;
			height: 53px;
			position: relative;
			font-size: 18px;
			z-index: 1;
			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 100%;
				border: 1px dashed $primary_color;
			}
			> * {
				@extend .pxl-middle;
				color: $primary_color;
			}
		}
		.pxl-item--title {
			font-size: 20px;
			color: #2E3D62;
			margin-top: 3px;
			margin-bottom: 5px;
		}
		.pxl-item--description {
			color: #677788;
		}
		.pxl-item--inner {
			display: flex;
			flex-wrap: nowrap;
			&:hover .pxl-item--icon:before {
				animation: pxl_spin 14s linear infinite;
			}
		}
	}
	&.style-5 {
		.pxl-item--icon {
			margin-right: 10px;
			width: 36px;
			height: 36px;
			background-color: #fff;
			min-width: 36px;
			border-radius: 36px;
			box-shadow: 0 10px 20px rgba(#8997BA, 0.25);
			font-size: 20px;
			color: $primary_color;
			display: flex;
			justify-content: center;
			align-items: center;
			svg {
				height: 20px;
			}
			&.flaticon-clock {
				font-size: 18px;
			}
		}
		.pxl-item--title {
			margin-bottom: 4px;
			font-size: 14px;
			color: #272F24;
		}
		.pxl-item--description {
			font-size: 12px;
			color: #5D666F;
		}
		.pxl-item--inner {
			display: flex;
			flex-wrap: nowrap;
			align-content: center;
		}
	}
	&.style-6 {
		.pxl-item--icon {
			margin-right: 15px;
			font-size: 25px;
			min-width: 41px;
			width: 41px;
			height: 41px;
			background-color: #{'rgba(var(--primary-color-rgb),0.2)'};
			border-radius: 41px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: $primary_color;
		}
		.pxl-item--title {
			font-size: 19px;
			color: #1B2336;
			margin-top: 7px;
			margin-bottom: 10px;
		}
		.pxl-item--description {
			font-size: 15px;
			color: #677788;
			line-height: 1.8;
		}
		.pxl-item--inner {
			display: flex;
			flex-wrap: nowrap;
			background-color: #fff;
			padding: 28px 30px;
			@include box-shadow(0 1px 30px rgba(#AAE2D4, 0.24));
			@include transition(all 300ms linear 0ms);
			@media #{$max-sm} {
				padding-left: 15px;
				padding-right: 15px;
			}
			&:hover {
				@include transform(translateY(-4px));	
			}
		}
	}
}

.pxl-icon-box2 {
	&.style-1 {
		.pxl-item--icon {
			font-size: 22px;
			color: $primary_color;
			background-color: lighten($primary_color_hex, 0.5);
			width: 54px;
			min-width: 54px;
			height: 56px;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			margin-left: -1px;
			margin-top: -1px;
			margin-bottom: -1px;
			border-radius: 5px;
		}
		.pxl-item--title {
			font-size: 16px;
			margin-bottom: 0;
			padding: 10px 15px;
		}
		.pxl-item--description {
			padding-top: 15px;
		}
		.pxl-item--holder {
			border: 1px solid #E1E9F4;
			border-radius: 5px;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
		}
	}
	&.style-2 {
		.pxl-item--icon {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			width: 56px;
			min-width: 56px;
			border-radius: 56px;
			background-color: $primary_color;
			color: $secondary_color;
			height: 56px;
			font-size: 24px;
		}
		.pxl-item--title {
			margin-bottom: 0;
			font-size: 16px;
			color: #fff;
			padding: 0 16px;
		}
		.pxl-item--holder {
			min-height: 56px;
			border-radius: 56px;
			background-color: $secondary_color;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
		}
	}
}

.pxl-icon-box3 {
	.pxl-item--icon {
		width: 70px;
		height: 70px;
		@include box-shadow(0 8px 15px rgba(#8997BA, 0.2));
		background-color: #fff;
		border-radius: 15px;
		color: $primary_color;
		font-size: 36px;
		margin: 0 auto 20px auto;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		svg {
			height: 36px;
		}
		img {
			max-height: 36px;
		}
	}
	.pxl-item--title {
		margin-bottom: 0;
		@include transition(all 220ms linear 0ms);
		font-size: 18px;
		line-height: 1.45;
	}
	.pxl-item--inner {
		background-color: #fff;
		padding: 42px 20px 38px;
		border-radius: 5px;
		@include box-shadow(0 10px 60px rgba(#8997BA, 0.15));
		text-align: center;
		@include transition(all 220ms linear 0ms);
		&:hover {
			background-color: $primary_color;
			@include box-shadow(0 15px 30px #{'rgba(var(--primary-color-rgb),0.2)'});
			.pxl-item--title {
				color: #fff;
			}
		}
	}
}

.pxl-icon-box4 {
	.pxl-item--icon {
		width: 80px;
		height: 80px;
		background-color: $secondary_color;
		border-radius: 80px;
		position: relative;
		font-size: 32px;
		color: $primary_color;
		margin-bottom: 23px;
		> * {
			@extend .pxl-middle;
		}
	}
	.pxl-item--title {
		margin-bottom: 10px;
		font-size: 24px;
	}
	.pxl-item--description {
		color: #6F7F90;
		line-height: 1.667;
	}
	.pxl-item--button {
		position: absolute;
		bottom: 0;
		left: 0;
		opacity: 0;
		@include transition(all 220ms linear 0ms);
		transform: translateX(20px);
	}
	.pxl-item--inner {
		padding-bottom: 40px;
		position: relative;
		&:hover .pxl-item--button {
			opacity: 1;
			transform: translateX(0px);
		}
	}
	&.icon-style-2 {
		.pxl-item--inner:hover .pxl-item--icon {
			animation: pxl_bounce 800ms ease-out infinite;
            -webkit-animation: pxl_bounce 800ms ease-out infinite;
		}
	}
}

.ld-icon-box1 .pxl-icon-box1 {
	.pxl-item--icon {
		min-height: 60px;
		margin: 0 0 10px;
		width: auto;
		height: auto;
		background-color: transparent;
		img {
			max-height: inherit;
		}
	}
	.pxl-item--title {
		margin-bottom: 0;
		font-size: 18px;
	}
	.pxl-item--inner {
		background-color: #fff;
		display: block;
		text-align: center;
		border-radius: 10px;
		@include box-shadow(0 10px 40px rgba(#8997BA, 0.2));
		padding: 44px 30px;
		@include transition(all 220ms linear 0ms);
		&:hover {
			@include transform(translate(0, -4px));
		}
	}
}

.pxl-icon-box5  {
	.pxl-item--icon {
		line-height: 1;
		font-size: 60px;
		color: $primary_color;
		@include transition(all 300ms linear 0ms);
		margin-bottom: 11px;
		position: relative;
		z-index: 1;
		&:before {
			content: '';
			background-color: $primary_color;
			opacity: 0.2;
			width: 34px;
			height: 34px;
			border-radius: 34px;
			position: absolute;
			top: -10px;
			left: -10px;
			z-index: -1;
			@include transition(all 300ms linear 0ms);
		}
		svg {
			height: 60px;
			fill: $primary_color;
		}
	}
	.pxl-item--title {
		font-size: 24px;
		margin-bottom: 20px;
		color: #2E3D62;
		@include transition(all 300ms linear 0ms);
	}
	.pxl-item--description {
		color: #677788;
		@include transition(all 300ms linear 0ms);
		margin-bottom: 34px;
	}
	.pxl-item--button {
		position: relative;
		.pxl-button--icon {
			width: 48px;
			height: 48px;
			background-color: $primary_color;
			border-radius: 48px;
			position: relative;
			.pxl-icon--plus {
				@extend .pxl-middle;
				width: 16px;
				height: 16px;
				&:before, &:after {
					border-radius: 2px;
					background-color: #fff;
				}
				&:before {
					width: 16px;
					height: 2px;
					top: 7px;
				}
				&:after {
					width: 2px;
					height: 16px;
					left: 7px;
				}
			}
		}
		.btn {
			transform: scaleX(0);
			transform-origin: left center;
			position: absolute;
			top: -1px;
			left: -1px;
			line-height: 50px;
			border-radius: 50px;
			padding: 0 46px;
			background-color: #fff;
			color: $primary_color;
			@include transition(all 300ms linear 0ms);
			&:hover, &:focus {
				background-color: #fff;
				color: $primary_color;
			}
		}
	}
	.pxl-item--number {
		width: 66px;
		height: 66px;
		line-height: 66px;
		text-align: center;
		font-size: 20px;
		font-weight: 700;
		position: absolute;
		top: 0;
		right: 0;
		@extend .ft-theme-default;
		color: $primary_color;
		@include transition(all 300ms linear 0ms);
		z-index: 1;
		&:before {
			content: '';
			position: absolute;
			bottom: -12px;
			left: -12px;
			width: 138px;
			height: 138px;
			opacity: 0.2;
			background-color: $primary_color;
			border-radius: 138px;
			@include transition(all 300ms linear 0ms);
			z-index: -1;
		}
	}
	.pxl-item--inner {
		background-color: #fff;
		border-radius: 15px;
		padding: 64px 40px 54px;
		@include box-shadow(0 10px 60px rgba(#49587C, 0.1));
		position: relative;
		overflow: hidden;
		@include transition(all 300ms linear 0ms);
		@media #{$max-md} {
			padding-left: 30px;
			padding-right: 30px;
		}
		&:hover {
			background-color: $primary_color;
			@include box-shadow(0 10px 60px #{'rgba(var(--primary-color-rgb),0.25)'});
			.pxl-item--title, .pxl-item--description, .pxl-item--icon {
				color: #fff;
			}
			.pxl-item--icon {
				&:before {
					background-color: #000;
					opacity: 0.08;
				}
				svg {
					fill: #fff;
				}
			}
			.btn {
				transform: scaleX(1);
			}
			.pxl-item--number {
				&:before {
					background-color: #fff;
					opacity: 1;
				}
			}
		}
	}
}

.pxl-iconbox-carousel1 {
	overflow: hidden;
	.pxl-item--icon {
		line-height: 1;
		font-size: 72px;
		color: $primary_color;
		margin-bottom: 34px;
		@include transition(all 300ms linear 0ms);
		svg {
			height: 72px;
		}
	}
	.pxl-item--title {
		font-size: 22px;
		margin-bottom: 43px;
		line-height: 1.18;
		@include transition(all 300ms linear 0ms);
		@media #{$max-lg} {
			font-size: 20px;
		}
	}
	.pxl-item--inner {
		padding: 60px 40px 47px 40px;
		border-radius: 10px;
		@include transition(all 300ms linear 0ms);
		position: relative;
		margin-bottom: 40px;
		margin-right: -1px;
		@media #{$max-lg} {
			padding-left: 24px;
			padding-right: 24px;
		}
		&:before {
			content: '';
			@extend .pxl-spill;
			background-image: url(../img/bg-iconbox.png);
			opacity: 0;
			@include transition(all 300ms linear 0ms);
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
		}
		&:after {
			content: '';
			position: absolute;
			top: 40px;
			bottom: 38px;
			width: 1px;
			background-color: #E5E3E3;
			right: 0;
			@include transition(all 300ms linear 0ms);
		}
		.btn--readmore4 {
			transform: translateX(-14px);
			span {
				color: #fff;
				transform: scaleX(0);
				transform-origin: left center;
			}
		}
		&:hover {
			background-color: $primary_color;
			box-shadow: 0 10px 20px #{'rgba(var(--primary-color-rgb),0.2)'};
			&:before {
				opacity: 0.08;
			}
			&:after {
				background-color: transparent;
			}
			.pxl-item--title {
				color: #fff;
			}
			.pxl-item--icon {
				color: $third_color;
			}
			.btn--readmore4 {
				transform: translateX(0px);
				i {
					background-color: $third_color;
					color: #fff;
				}
				span {
					transform: scaleX(1);
				}
			}
		}
	}
	.pxl-swiper-container {
		margin: 0;
		.pxl-swiper-slide {
			padding: 0;
		}
	}
}

body.rtl {
	.pxl-icon-box2 .pxl-item--icon {
		margin-left: 0;
		margin-right: -1px;
	}
	.pxl-icon-box1.style-2 .pxl-item--icon, .pxl-icon-box1.style-5 .pxl-item--icon {
		margin-right: 0;
		margin-left: 10px;
	}
	.pxl-icon-box1.style-4 .pxl-item--icon {
		margin-right: 0;
		margin-left: 18px;
	}
	.pxl-icon-box1.style-6 .pxl-item--icon {
		margin-right: 0;
		margin-left: 15px;
	}
}