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

.pxl-icon-box1 {
	.pxl-item-inner {
		padding: 61px 51px 48px 50px;
		border-right: 1px solid rgba(#fff, 0.149);
		@include transition(all 0.3s);
		@media (max-width: 1500px) {
			padding: 61px 30px 48px 30px;
		}
		&:hover {
			.pxl-item--icon {
				svg {
					path {
						fill: #fff;
					}
				}
				i {
					color: #fff;
				}
			}
			.pxl-item-title {
				&:after {
					width: 100%;
				}
			}
		}
		.pxl-item--icon {
			text-align: right;
			margin-bottom: 33px;
			@include transition(all 0.3s);
			svg {
				height: 79px;
				width: auto;
				path {
					fill: rgba(#fff, 0.251);
					@include transition(all 0.3s);
				}
				@media (max-width: 1366px) {
					height: 70px;
				}
			}
			i {
				font-size: 75px;
				@include transition(all 0.3s);
				color: rgba(#fff, 0.251);
			}
		}
		.pxl-item-title {
			position: relative;
			border-bottom: 1px solid rgba(#fff, 0.149);
			padding-bottom: 26px;
  			margin-bottom: 27px;
  			&:after {
  				content: '';
  				position: absolute;
  				height: 1px;
  				width: 0;
  				bottom: -1px;
  				left: 0;
  				@include transition(all 0.3s);
  				background-color: $primary_color;
  			}
			a {
				font-size: 30px;
				color: #ffffff;
				font-weight: 500;
				@include ft_theme_default($ft_theme_default);
				line-height: 1.2;
				@media (max-width: 1366px) {
					font-size: 27px;
				}
			}
		}
		.pxl-item-desc {
			font-size: 16px;
			color: #c2c2c2;
			padding-left: 2px;
		}
		.pxl-inner-button {
			text-align: right;
			margin-top: 48px;
  			margin-right: -3px;
			.pxl-button-link {
				display: inline-block;
				line-height: 1;
				&:hover {
					svg {
						transform: rotate(45deg);
					}
				}
				svg {
					fill: $primary_color;
					height: 33px;
					width: auto;
					@include transition(all 0.3s);
					transform: rotate(0deg);
					path {
						fill: $primary_color;
					}
				}
			}
		}
	}
}
.pxl-icon-box2 {
	.pxl-item-inner {
		border: 1px solid #d9d9d9;
		padding: 28px 28px 104px 25px;
		position: relative;
		margin-bottom: 34px;
		@media (max-width: 1366px) {
			padding: 28px 15px 80px 15px;
		}
		.pxl-section-top {
			background-color: $link_color;
			display: flex;
			align-items: center;
			padding: 28px 20px 27px 26px;
			position: relative;
			@media (max-width: 1200px) {
				padding: 20px;
			}
			@media (max-width: 575px) {
				display: block;
			}
			&:after {
				content: '';
				position: absolute;
				bottom: 0;
				right: 0;
				background-color: $primary_color;
				width: 21%;
				height: 4px;
			}
			.pxl-item--icon {
				width: 98px;
				min-width: 98px;
				height: 99px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: $primary_color;
				clip-path: polygon(84% 0, 100% 18%, 100% 100%, 0 100%, 0 0);
				@media (max-width: 1366px) {
					width: 80px;
					min-width: 80px;
					height: 80px;
				}
				@media (max-width: 575px) {
					margin-bottom: 10px;
				}
				svg {
					height: 50px;
					width: auto;
					@media (max-width: 1366px) {
						height: 35px;
					}
					path {
						fill: #fff;
						@include transition(all 0.3s);
					}
				}
				i {
					font-size: 50px;
					@include transition(all 0.3s);
					color: #fff;
				}
			}
			.pxl-item-title {
				a {
					font-size: 26px;
					color: #ffffff;
					font-weight: 500;
					@include ft_theme_default($ft_theme_default);
					line-height: 1.1;
					@media (max-width: 1280px) {
						font-size: 22px;
					}
					&:hover {
						color: $primary_color;
					}
				}
			}
		}
		.pxl-item-desc {
			font-size: 16px;
			color: #666666;
			padding: 38px 20px 0px 26px;
			@media (max-width: 1366px) {
				padding: 38px 15px 0px 15px;
				overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 4;
                display: -webkit-box;
                -webkit-box-orient: vertical;
			}
		}
		.pxl-inner-button {
			position: absolute;
			bottom: -34px;
			right: 28px;
			.pxl-button-link {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				letter-spacing: 1px;
				text-transform: uppercase;
				color: #ffffff;
				font-weight: 500;
				@include ft_theme_default($ft_theme_default);
				background-color: $link_color;
				line-height: 67px;
				padding: 0 29px 0 34px;
				@media (max-width: 1280px) {
					line-height: 55px;
					padding: 0 30px;
				}
				&:hover {
					background-color: $primary_color;
					.pxl-btn-icon {
						svg {
							transform: rotate(45deg);
						}
					}
				}
				.pxl-btn-icon {
					line-height: 1;
					&.pxl-ml-104 {
						@media (max-width: 1280px) {
							margin-left: 40px;
						}
					}
					svg {
						height: 25px;
						width: auto;
						transform: rotate(0deg);
						@include transition(all 0.3s);
						path {
							fill: #fff;
							@include transition(all 0.3s);
						}
					}
				}
			}
		}
	}
}

.pxl-icon-box3 {
	.pxl-meta-content {
		display: flex;
		align-items: center;
		column-gap: 40px;
		@media (max-width: 480px) {
			display: block;
		}
		.pxl-item--icon {
			line-height: 1;
			@media (max-width: 480px) {
				margin-bottom: 20px;
			}
			i {
				font-size: 53px;
				color: #fff;
			}
			svg {
				height: 53px;
				width: auto;
				path {
					fill: #fff;
				}
			}
		}
		.pxl-item--meta {
			.pxl-item-title {
				font-size: 30px;
				color: #ffffff;
				font-weight: 500;
				@include ft_theme_default($ft_theme_default);
				line-height: 1.2;
				margin-bottom: 11px;
			}
			.pxl-item-desc {
				color: #c4c4c4;
				max-width: 76%;
				@media (max-width: 575px) {
					max-width: 100%;
				}
			}
		}
	}
}

.pxl-icon-box4 {
	.pxl-item-inner {
		background-color: $primary_color;
		padding: 46px 49px 51px 49px;
		text-align: center;
		clip-path: polygon(85% 0, 100% 13%, 100% 100%, 0 100%, 0 0);
		position: relative;
		a {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
		.pxl-item--icon {
			color: #fff;
			font-size: 40px;
			margin-bottom: 24px;
			svg {
				height: 40px;
				width: auto;
				fill: #fff;
				path {
					fill: #fff;
				}
			}
		}
		.pxl-item-title {
			font-size: 15px;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: #ffffff;
			font-weight: 500;
			@include ft_theme_default($ft_theme_default);
			line-height: 1.1;
			margin-bottom: 8px;
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

.pxl-icon-box5 {
	.pxl-item-inner {
		padding: 48px 35px 43px 52px;
		position: relative;
		@include transition(all 0.3s);
		&:hover {
			&:before {
				opacity: 0;
				transform: scaleY(0);
			}
			&:after {
				opacity: 1;
				transform: scaleY(1);
			}
		}
		@media (max-width: 1024px) {
			padding: 40px 30px;
		}
		&:before {
			content: '';
			position: absolute;
			height: 100%;
			width: 1px;
			background-color: #d9d9d9;
			left: 0;
			top: 0;
			transform-origin: bottom;
			transform: scaleY(1);
			opacity: 1;
			@include transition(all 0.5s);
		}
		&:after {
			content: '';
			position: absolute;
			height: 100%;
			width: 1px;
			background-color: $link_color;
			left: 0;
			top: 0;
			transform-origin: top;
			transform: scaleY(0);
			opacity: 0;
			@include transition(all 0.5s);
		}
		.pxl-item--icon {
			margin-bottom: 20px;
			svg {
				height: 53px;
				width: auto;
				path {
					fill: $primary_color;
				}
			}
		}
		.pxl-item-title {
			font-size: 25px;
			color: $link_color;
			font-weight: 500;
			@include ft_theme_default($ft_theme_default);
			line-height: 1.3;
			margin-bottom: 19px;
		}
		.pxl-item-desc {
			font-size: 16px;
			color: #666666;
		}
	}
}
body.rtl {
	
}