Viewing File: /home/maglabs/etascom/wp-content/themes/agenzio/assets/scss/elements/posts.scss

/*--------------------------------------------------------------
POSTs
----------------------------------------------------------------
# Carousel Reset
# Grid Reset
# Grid Loadmore Style
# Grid Filter Style
# Blog
# Portfolio
# Service
--------------------------------------------------------------*/

// Carousel Reset
.pxl--hide-arrow .pxl-swiper-arrow-wrap {
	opacity: 0 !important;
	visibility: hidden !important;
	position: absolute;
}

.swiper-vertical {
	touch-action: pan-x;
	> .pxl-swiper-wrapper {
		flex-direction: column;
	}
	&.swiper-backface-hidden {
		.pxl-swiper-slide {
			transform: translateZ(0);
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			height: auto !important;
		}
	}
}

.swiper-filter-active {
	.non-swiper-slide {
		display: none;
	}
}

.swiper-filter-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	.filter-item {
		display: inline-block;
		font-size: 13px;
		text-transform: uppercase;
		font-weight: 700;
		@extend .ft-theme-default;
		margin: 10px 24px;
		cursor: pointer;
		position: relative;
		z-index: 1;
		&:before {
			content: '';
			width: 11px;
			height: 41px;
			@include border-radius(11px);
			background-color: #f4f4f4;
			position: absolute;
			top: 50%;
			left: 50%;
			@include transform(translate(-50%, -50%) scaleY(0));
			opacity: 0;
			@include transition(all .25s cubic-bezier(.645,.045,.355,1));
			z-index: -1;
		}
		span {
			color: #010927;
			@include transition(all .25s cubic-bezier(.645,.045,.355,1));
		}
		&.active {
			color: $primary_color;
			span {
				@extend .text-gradient;
			}
			&:before {
				opacity: 1;
				@include transform(translate(-50%, -50%) scaleY(1));
			}
		}
	}
}

.pxl-swiper-slider {
	.pxl-post--image img, .pxl-post--featured img {
		width: 100%;
	}
	.pxl-post--title, .pxl-post--category {
		a {
			color: inherit;
			&:hover {
				color: inherit;
			}
		}
	}
}

.pxl-swiper-arrow-wrap {
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    .pxl-arrow-label {
    	font-size: 16px;
  		color: #878787;
  		margin-bottom: 10px;
  		margin-top: 10px;
    }
    .pxl-swiper-arrow-prev {
    	i {
    		transform: rotate(180deg);
    	}
    }
	&.style-1 {
		justify-content: flex-start;
		margin: 30px -5px 0;
		.pxl-swiper-arrow {
			height: 60px;
			width: 60px;
			min-width: 60px;
			border: 1px solid #c1c1c1;
			border-radius: 60px;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			margin: 0 5px;
			color: #c1c1c1;
			font-size: 12px;
			i {
				display: inline-flex;
			}
			&:hover {
				color: #01062e;
			}
		}
	}
	&.style-2 {
		.pxl-swiper-arrow {
			width: 75px;
			min-width: 75px;
			height: 70px;
			color: #fff;
			background-color: $primary_color;
			font-size: 20px;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			align-items: center;
 			font-weight: normal;
			&.pxl-swiper-arrow-prev {
				transform: scaleX(-1);
			}
			&.pxl-swiper-arrow-next {
				background-color: #fff;
				color: #000;
			}
			i {
				display: inline-flex;
			}
		}
	}
	&.style-3 {
		.pxl-swiper-arrow {
			width: 59px;
			height: 65px;
			border-radius: 20px;
			background-color: #e7e7e7;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			color: #382c4d;
			font-size: 24px;
			position: relative;
			z-index: 1;
			i {
				display: inline-flex;
			}
			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 20px;
				@include background-horizontal($gradient_color_from, $gradient_color_to);
				z-index: -1;
				opacity: 0;
				@include transition(all 300ms linear 0ms);
			}
			&:hover {
				color: #fff;
				&:before {
					opacity: 1;
				}
			}
		}
	}
}

.pxl-container-dots {
	text-align: center;
	margin-top: 41px;
}

.pxl-swiper-dots {
	&.pxl-swiper-pagination-bullets span {
        display: inline-flex;
        cursor: pointer;
        @include transition(all 300ms linear 0ms);
    }
    &.pxl-swiper-pagination-progressbar {
    	height: 1px;
    	background-color: #454545;
    	width: 100%;
    	position: relative;
    	margin-top: 45px;
    	.swiper-pagination-progressbar-fill {
    		height: 3px;
    		background-color: $primary_color;
    		display: inline-flex;
    		width: 100%;
    		position: absolute;
			left: 0;
			bottom: 0;
			transform-origin: left top;
    	}
    }

    &.style-1 {
    	&.pxl-swiper-pagination-bullets {
    		display: flex;
			flex-wrap: wrap;
			justify-content: center;
			padding-top: 16px;
    		.pxl-swiper-pagination-bullet {
    			width: 10px;
    			height: 10px;
    			background-color: #c2c2c2;
    			border-radius: 10px;
    			margin: 0 11px;
    			&.swiper-pagination-bullet-active {
    				background-color: #060606;
    			}
    		}
    	}
    	&.pxl-swiper-pagination-fraction {
    		margin-top: 34px;
    		font-size: 0px;
    		color: #797979;
    		font-weight: 700;
    		text-align: center;
    		position: relative;
    		z-index: 1;
    		&:before {
    			content: '';
    			width: 50px;
    			height: 1px;
    			background-color: #bbbbbb;
    			position: absolute;
    			top: 50%;
    			left: 50%;
    			@include transform(translate(-50%, -50%));
    			z-index: -1;
    		}
    		span {
    			display: inline-flex;
    			margin: 0 36px;
    			font-size: 22px;
    		}
    	}
    }

    &.style-2 {
    	&.pxl-swiper-pagination-bullets {
    		left: 50%;
			position: relative;
			transform: translate(-50%, 0);
			background-color: #fff;
			border-radius: 38px;
			padding: 13px 30px;
			display: inline-flex;
			box-shadow: 0 4px 46px rgba(#17191a, 0.09);
			z-index: 99;
			margin-top: 40px;
    		.pxl-swiper-pagination-bullet {
    			width: 12px;
    			height: 12px;
    			background-color: #e0e0e0;
    			border-radius: 10px;
    			margin: 0 5px;
    			&.swiper-pagination-bullet-active {
    				background-color: $third_color;
    			}
    		}
    	}
    }
    &.style-3 {
    	background-color: rgba(#393939, 0.141);
    	border-radius: 6px;
    	display: inline-flex;
		z-index: 99;
		position: relative;
    	.pxl-swiper-pagination-bullet {
    		height: 13px;
    		width: 170px;
    		padding: 0;
    		border-radius: 6px;
    		background-color: unset;
    		&.swiper-pagination-bullet-active {
				background-color: $primary_color;
			}
			@media (max-width: 991px) {
				width: 80px;
			}
			@media (max-width: 676px) {
				width: 50px;
			}
    	}
    }
}

// Grid Reset
.pxl-grid, .pxl-post-carousel, .pxl-post-modern {
	.pxl-post--featured {
		position: relative;
	}
	.pxl-post--link {
		@extend .pxl-spill;
		z-index: 99;
	}
	.pxl-post--image img, .pxl-post--featured img {
		width: 100%;
	}
	.pxl-post--title a {
		color: inherit;
		&:hover {
			color: inherit;
		}
	}
	.pxl-post--category { 
		position: relative;
		&.link-none:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 99;
		}
		a {
			color: inherit;
		}
	}
	&.pxl-grid-nogap {
		.pxl-grid-masonry {
			margin: 0 !important;
			.pxl-grid-item {
				padding: 0 !important;
			}
			.pxl-post--inner {
				margin-bottom: 0;
			}
		}
	}
}

// Grid Loadmore Style
.pxl-load-more {
	.pxl-load-icon {
		width: 20px;
		height: 20px;
		@include border-radius(100%);
		border-color: transparent #fff transparent #fff;
		border-width: 1px;
		border-style: solid;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -10px;
		animation: pxl_spin .6s infinite linear;
        -webkit-animation: pxl_spin .6s infinite linear;
        box-sizing: border-box;
        z-index: 2;
        margin-top: -10px;
        opacity: 0;
	}
	.pxl-loadmore-text {
		@include transition(all 300ms linear 0ms);
	}
	&.loading {
		.pxl-load-icon {
			opacity: 1;
		}
		i {
			opacity: 0.5;
		}
		.pxl-loadmore-text {
			opacity: 0.5;
		}
	}
}

// Grid Filter Style
.pxl-grid-filter {
	.filter-item {
		cursor: pointer;
        @include transition(all 300ms linear 0ms);
        position: relative;
	}
	.pxl--filter-inner {
		display: inline-flex;
		flex-wrap: wrap;
		@media (max-width: 480px) {
			display: contents;
		}
	}
	&.style-1 {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 30px;
		.filter-item {
			font-size: 17px;
			color: #494949;
			font-weight: 400;
			margin: 0;
			margin-right: 22px;
			border: 1px solid #494949;
			@include border-radius(4px);
			padding: 9.4px 22px;
			@media (max-width: 1200px) {
				margin: 5px 10px 5px 0;
			}
			@media (max-width: 1024px) {
				font-size: 15px;
				padding: 8px 18px;
			}
			@media (max-width: 480px) {
				width: 100%;
				margin-right: 0;
			}
			&:last-child {
				margin-right: 0;
			}
			&.active {
				color: #fff;
				background-color: $primary_color;
				border-color: $primary_color;
			}
		}
	}
	&.style-2 {
		margin-bottom: 0;
		font-size: 18px;
		color: #0d0d0d;
		font-weight: 700;
		text-align: left;
		font-family: "Barlow Semi Condensed";
		margin-top: 44px;
		.pxl--filter-inner {
			border-top: 1px solid #ececec;
			border-bottom: 1px solid #ececec;
			padding-top: 2px;
  			padding-bottom: 4px;
  			@media (max-width: 575px) {
  				display: block;
  			}
			.filter-item {
				margin: 0;
				margin-right: 70px;
				position: relative;
				&:last-child {
					margin-right: 0;
				}
				@media (max-width: 676px) {
					margin-right: 30px;
				}
				@media (max-width: 575px) {
	  				margin-right: 0;
	  				margin-bottom: 30px;
	  				display: block;
	  				&:last-child {
	  					margin-bottom: 0;
	  				}
	  			}
				&:before {
					content: '';
					position: absolute;
					top: -5px;
					left: 0;
					width: 0;
					height: 4px;
					background-color: $primary_color;
					opacity: 0;
					@include transition(all 0.3s);
					transition-delay: 100ms;
				}
				&:after {
					content: '';
					position: absolute;
					bottom: -6px;
					right: 0;
					width: 0;
					height: 4px;
					background-color: $primary_color;
					opacity: 0;
					@include transition(all 0.3s);
					transition-delay: 300ms;
				}
				&:hover {
					&:before {
						width: 100%;
						opacity: 1;
					}
					&:after {
						width: 100%;
						opacity: 1;
					}
				}
				&.active {
					color: #0d0d0d;
					background-color: unset;
					@media (max-width: 767px) {
						background-color: unset;
					}
					&:before {
						width: 100%;
						opacity: 1;
					}
					&:after {
						width: 100%;
						opacity: 1;
					}
				}
			}
		}
	}
}

// Start Blog
.title-hover-line a {
	background-repeat: no-repeat;
	background-position-y: -1px;
	background-image: linear-gradient(transparent calc(100% - 1px), $primary_color 1px);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	animation: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) pxl-wide-menu-underline forwards;
	&:hover {
		animation: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) pxl-wide-menu-underline-hover forwards;
	}
}
.pxl-blog-style1 {
	.pxl-carousel-inner {
		padding: 0 15px;
  		margin: 0 -15px;
	}
	.pxl-pagination-wrap {
		justify-content: center;
	}
	.pxl-swiper-arrow-wrap {
		margin: 0;
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%,-30%);
		justify-content: space-between;
		transition: all .3s;
		width: 105%;
 		z-index: 1;
		@media (max-width: 1250px) {
			position: relative;
			top: unset;
			left: unset;
			transform: unset;
			width: unset;
			justify-content: center;
		}
		.pxl-swiper-arrow {
			@media (max-width: 1250px) {
				margin: 10px;
			}
		}
		.pxl-swiper-arrow-prev {
			position: absolute;
			left: 0;
			@media (max-width: 1250px) {
				position: relative;
			}
		}
		.pxl-swiper-arrow-next {
			position: absolute;
			right: 0;
			@media (max-width: 1250px) {
				position: relative;
			}
		}
	}
	.pxl-post--inner  {
		@include border-radius(0px);
		overflow: hidden;
		margin: 47px 0;
		@include transition(all 200ms linear 0ms);
		position: relative;
		&:hover {
			.pxl-post--featured {
				.pxl-img-link {
					transform: perspective(600px) rotateX(0.06deg) rotateY(0deg) scaleX(1.1) scaleY(1.1);
				}
			}
		}
		.pxl-post--featured {
			position: relative;
			overflow: hidden;
			.pxl-img-link {
				position: relative;
				display: block;
				transition: transform 500ms;
				transform: perspective(0px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1);
				transform-origin: center center;
				background-color: #d9d9d9;
				img {
					mix-blend-mode: luminosity;
				}
			}
			.pxl-item--tags {
				position: absolute;
				top: 20px;
				right: 20px;
				a {
					font-family: Outfit;
					font-size: 16px;
					font-style: normal;
					font-weight: 500;
					text-transform: uppercase;
					color: #fff;
					background-color: $primary_color;
					padding: 3px 8px;
					@media (max-width: 676px) {
						font-size: 14px;
					}
				}
			}
			.pxl-item-video {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				@include transition(all 300ms linear 0ms);
				opacity: 1;
			}
			.post-button-video {
				width: 60px;
				height: 60px;
				@include border-radius(50%);
				display: inline-flex;
				align-items: center;
				position: relative;
				color: $link_color;
				justify-content: center;
                @include transition(all 200ms linear 0ms);
			    background-size: 300% 100%;
			    background-color: #fff;
			    font-size: 13px;
			    @media (max-width: 575px) {
			    	width: 60px;
			    	height: 60px;
			    }
			    &:hover {
			    	color: $primary_color;
			        background-position: 100% 0;
			        @include transition(all .4s ease-in-out);
			    }
                &:before {
		            content: "";
		            position: absolute;
		            z-index: 0;
		            left: 0;
		            top: 0;
		            display: block;
		            width: 100%;
		            height: 100%;
		            background-color: rgba(#fff, 0.63);
		            border-radius: 50%;
		            animation: pxl_pulse_border 1500ms ease-out infinite;
		            -webkit-animation: pxl_pulse_border 1500ms ease-out infinite;
		            z-index: -2;
		            border-radius: inherit;
		        }
			}
		}
		.pxl-post--title {
			font-family: Outfit;
			font-size: 24px;
			font-style: normal;
			font-weight: 500;
			margin-bottom: 34px;
			z-index: 2;
			display: block;
			position: relative;
			letter-spacing: -0.96px;
			margin-top: 21px;
  			line-height: 1.4;
			@media (max-width: 1024px) {
				font-size: 20px;
			}
			@media (max-width: 767px) {
				margin-bottom: 20px;
			}
			a {
				color: $link_color;
				@include transition(all 0.3s);
				.char {
        			transition: transform 0.1s ease, color 0.1s ease;
					transition-delay: calc(var(--char-index) * 0.01s);
        		}
				&:hover {
					.char {
						color: $link_color_hover;
						@include transform(translateY(-10px));
					}
				}
			}
		}
		.pxl-post--meta {
			display: flex;
  			align-items: center;
  			.pxl-item--date {
  				font-family: Outfit;
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				color: #666;
  			}
  			span {
  				color: #999;
  				font-family: Outfit;
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				margin: 0 3px;
  			}
  			.pxl-author-meta {
  				a {
  					font-family: Outfit;
					font-size: 14px;
					font-style: normal;
					font-weight: 600;
					color: $link_color;
					&:hover {
						color: $primary_color;
					}
  				}
  			}
		}
	}
}
.pxl-post-carousel1 {
	.pxl-swiper-wrapper {
		align-items: center;
	}
	.pxl-swiper-container {
		margin: 0 -15px;
	}
	.pxl-swiper-slide {
		padding: 0 15px;
	}
	.pxl-post--inner {
		margin: 0;
		.pxl-post--featured {
			@include transition(transform .3s ease-out);
			transform: scale3d(1,.72,1);
			transform-origin: center;
			@media (max-width: 991px) {
				transform: scale3d(1,1,1);
			}
			img {
    			width: 100%;
			    height: auto;
			    object-fit: cover;
			    transform: scale3d(1,1.3,1.3);
			    @include transition(transform .3s ease-out);
			    @media (max-width: 991px) {
					transform: scale3d(1,1,1);
				}
			}
			.pxl-item--tags {
				transform: scale3d(1, 1.4, 1);
				@include transition(transform .3s ease-out);
				top: 32px;
				@media (max-width: 991px) {
					transform: scale3d(1,1,1);
					top: 20px;
				}
			}
			.pxl-item-video {
				transform: scale3d(1, 1.4, 1) translate(-50%, -50%);
				@media (max-width: 991px) {
					transform: scale3d(1, 1, 1) translate(-50%, -50%);
				}
			}
		}
		.pxl-item-content {
			transform: translateY(-49px);
			@include transition(transform .3s ease-out);
			@media (max-width: 991px) {
				transform: translateY(0);
			}
		}
	}
	.swiper-slide-next {
		.pxl-post--inner {
			.pxl-post--featured {
				height: unset;
				transform: scale3d(1,1,1);
				img {
					transform: scale3d(1,1,1);
				}
				.pxl-item--tags {
					top: 20px;
					transform: scale3d(1,1,1);
				}
				.pxl-item-video {
					transform: scale3d(1, 1, 1) translate(-50%, -50%);
				}
			}
			.pxl-item-content {
				transform: translateY(0);
			}
		}
	}
}

.pxl-post-carousel2 {
	.pxl-slide-transition {
		max-width: 1290px;
		@media (max-width: 1366px) {
			max-width: 100%;
		}
		.pxl-swiper-dot {
			position: relative;
			.pxl-swiper-pagination-progressbar {
				height: 2px;
				background-color: #DEDEDE;
				margin-top: 50px;
				@media (max-width: 991px) {
					margin-top: 20px;
				}
				.swiper-pagination-progressbar-fill {
					height: 2px;
					background-color: $primary_color;
				}
			}
			.pxl-item--fraction {
				font-family: Inter;
				font-size: 18px;
				font-style: normal;
				font-weight: 400;
				color: $link_color;
				margin-top: 22px;
				.pxl-item--fraction-sum {
					color: #666;
				}
			}
			.pxl-swiper-arrow-wrap {
				margin-top: 12px;
				position: absolute;
				top: 0;
				right: -10px;
				.pxl-swiper-arrow {
					font-size: 33px;
  					margin: 0 10px;
  					color: #DEDEDE;
  					@include transition(all 0.3s);
  					&:hover {
  						color: $link_color;
  					}
				}
			}
		}
	}
	.pxl-swiper-container {
		margin: 0 -50px;
		@media (max-width: 1199px) {
			margin: 0 -15px;
		}
	}
	.pxl-swiper-slide {
		padding: 0 50px;
		opacity: 0.3;
		transition: opacity 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
		@media (max-width: 1199px) {
			padding: 0 15px;
			opacity: 1;
			&:after {
				display: none;
			}
		}
		&:after {
			content: '';
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			position: absolute;
			@include transition(all 0.3s);
			opacity: 1;
			z-index: 2;
		}
		&.swiper-slide-active {
			opacity: 1;
			&:after {
				width: 0;
				opacity: 0;
			}
		}
	}
	.pxl-post--inner {
		display: flex;
		margin: 30px 0;
		@media (max-width: 1366px) {
			display: block;
		}
		.pxl-post--featured {
			width: 49.3%;
			position: relative;
			overflow: hidden;
			@media (max-width: 1366px) {
				width: 100%;
			}
			.pxl-img-link {
				display: block;
				background-color: #d9d9d9;
				img {
					mix-blend-mode: luminosity;
				}
			}
			.pxl-item-video {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				@include transition(all 300ms linear 0ms);
				opacity: 1;
			}
			.post-button-video {
				width: 60px;
				height: 60px;
				@include border-radius(50%);
				display: inline-flex;
				align-items: center;
				position: relative;
				color: #fff;
				justify-content: center;
                @include transition(all 200ms linear 0ms);
			    background-size: 300% 100%;
			    background-color: $primary_color;
			    font-size: 13px;
			    @media (max-width: 575px) {
			    	width: 60px;
			    	height: 60px;
			    }
			    &:hover {
			        background-position: 100% 0;
			        @include transition(all .4s ease-in-out);
			    }
                &:before {
		            content: "";
		            position: absolute;
		            z-index: 0;
		            left: 0;
		            top: 0;
		            display: block;
		            width: 100%;
		            height: 100%;
		            background-color: #{'rgba(var(--primary-color-rgb),0.63)'};
		            border-radius: 50%;
		            animation: pxl_pulse_border 1500ms ease-out infinite;
		            -webkit-animation: pxl_pulse_border 1500ms ease-out infinite;
		            z-index: -2;
		            border-radius: inherit;
		        }
			}
		}
		.pxl-item-content {
			width: 50.7%;
			@media (max-width: 1366px) {
				width: 100%;
				margin-bottom: 40px;
			}
			.pxl-item--tags {
				a {
					font-family: Outfit;
					font-size: 16px;
					font-style: normal;
					font-weight: 500;
					text-transform: uppercase;
					text-decoration: underline;
					color: $primary_color;
				}
			}
			.pxl-item--number {
				color: transparent;
  				-webkit-text-stroke: 1px $link_color;
  				white-space: nowrap;
  				letter-spacing: -4.8px;
  				font-weight: 500;
  				font-family: Outfit;
				font-size: 120px;
				font-style: normal;
				line-height: 1;
				margin-top: 105px;
  				margin-bottom: 41px;
  				@media (max-width: 1366px) {
  					margin-top: 30px;
 					margin-bottom: 20px;
  				}
  				@media (max-width: 1024px) {
  					font-size: 80px;
  				}
			}
			.pxl-post--title {
				font-size: 40px;
				line-height: 1.2;
				margin-bottom: 54px;
				max-width: 85%;
				@media (max-width: 1366px) {
					max-width: 95%;
					font-size: 35px;
				}
				@media (max-width: 1024px) {
  					max-width: 100%;
  				}
  				@media (max-width: 767px) {
					font-size: 30px;
				}
				a {
					font-family: Outfit;
					font-size: 40px;
					font-style: normal;
					font-weight: 500;
					letter-spacing: -1.6px;
					color: $link_color;
					@media (max-width: 1366px) {
						font-size: 35px;
					}
					@media (max-width: 767px) {
						font-size: 30px;
					}
					.char {
	        			transition: transform 0.1s ease, color 0.1s ease;
						transition-delay: calc(var(--char-index) * 0.01s);
	        		}
					&:hover {
						.char {
							color: $link_color_hover;
							@include transform(translateY(-10px));
						}
					}
				}
			}
			.pxl-post--readmore {
				a {
					line-height: 58px;
				}
			}
		}
	}
}

// End Blog

// Start Portfolio
.pxl-portfolio-style1 {
	.pxl-pagination-wrap {
		.pxl-pagination-links {
			margin-top: 30px;
		}
	}
	.pxl-post--inner {
		position: relative;
		.pxl-post--featured {
			.pxl-featured-link {
				display: block;
				position: relative;
				.pxl-post--overlay {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					background-image: url(../img/overlay-bg.png);
					background-position: 50%;
					background-repeat: no-repeat;
					background-size: cover;
				}
			}
		}
		.holder-content {
			position: absolute;
			bottom: 0;
  			left: 0;
  			width: 100%;
  			padding-bottom: 45px;
  			padding-left: 47px;
  			@media (max-width: 1024px) {
  				padding-bottom: 20px;
  				padding-left: 20px;
  			}
			.pxl-holder--inner {
				display: flex;
				align-items: center;
				justify-content: space-between;
				@media (max-width: 767px) {
					display: grid;
				}
				.pxl-content {
					@media (max-width: 767px) {
						margin-top: 15px;
						order: 2;
					}
				}
				.pxl-post--category {
					margin-bottom: 14px;
					&:before {
						display: none;
					}
					a {
						font-size: 14px;
						color: #fff;
						padding: 6px 17px;
						background-color: $primary_color;
					}
				}
				.pxl-post--title {
					margin-bottom: 0;
					.pxl-holder-link {
						font-size: 32px;
						font-weight: 600;
						color: #fff;
						
						background-image: linear-gradient(transparent calc(100% - 1px), #fff 1px);
						@media (max-width: 1024px) {
							font-size: 28px;
						}
					}
				}
			}
			.pxl-post--icon {
				@media (max-width: 767px) {
					order: 1;
				}
				.pxl-iem-link {
					background-color: #F6F6F6;
					color: $primary_color;
					padding: 24px 16px;
					font-size: 20px;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					@media (max-width: 767px) {
						padding: 15px 14px;
						box-shadow: 0px 5px 5px rgba(#000, 0.3);
					}
					&:hover {
						i {
							&:before {
								transform: rotate(-45deg) scale(0);
							}
							&:after {
								transform: rotate(-45deg) scale(1);
							}
						}
					}
					i {
						line-height: 1;
						width: 24px;
						height: 24px;
						position: relative;
						&:before {
							transform: rotate(-45deg) scale(1);
							transition: transform 0.3s ease-in-out;
							transform-origin: right center;
							position: absolute;
							bottom: 8px;
  							right: 5px;
						}
						&:after {
							content: "\f11e";
							font-family: Flaticon;
							font-size: inherit;
							font-style: normal;
							font-weight: normal;
							position: absolute;
							transform: rotate(-45deg) scale(0);
							transition: transform 0.3s ease-in-out;
							top: 10px;
							transform-origin: left center;
							left: 5px;
						}
					}
				}
			}
		}
		.holder-hover {
			display: none;
		}
	}
}

.pxl-portfolio-style2 {
	.pxl-post--inner {
		position: relative;
		@include transition(all 0.3s);
		&:hover {
			.pxl-post--holder {
				opacity: 1;
			}
			.pxl-post--icon  {
				opacity: 1;
				right: 30px;
				@media (max-width: 480px) {
					right: 15px;
				}
			}
		}
		.pxl-post--icon {
			position: absolute;
			top: 30px;
			right: 45px;
			z-index: 1;
			@include transition(all 0.3s);
			opacity: 0;
			@media (max-width: 480px) {
				top: 15px;
			}
			.pxl-iem-link {
				background-color: #fff;
				color: $primary_color;
				width: 80px;
				height: 80px;
				min-width: 80px;
				font-size: 25px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				@media (max-width: 1280px) {
					width: 60px;
					height: 60px;
					min-width: 60px;
				}
				@media (max-width: 480px) {
					width: 40px;
				    height: 40px;
				    min-width: 40px;
				    font-size: 20px;
				}
				&:hover {
					i {
						&:before {
							transform: rotate(-45deg) scale(0);
						}
						&:after {
							transform: rotate(-45deg) scale(1);
						}
					}
				}
				i {
					line-height: 1;
					width: 25px;
					height: 25px;
					position: relative;
					&:before {
						transform: rotate(-45deg) scale(1);
						transition: transform 0.3s ease-in-out;
						transform-origin: right center;
						position: absolute;
						bottom: 8px;
						right: 5px;
						@media (max-width: 480px) {
  							right: 6px;
						}
					}
					&:after {
						content: "\f11e";
						font-family: Flaticon;
						font-size: inherit;
						font-style: normal;
						font-weight: normal;
						position: absolute;
						transform: rotate(-45deg) scale(0);
						transition: transform 0.3s ease-in-out;
						top: 9px;
						transform-origin: left center;
						left: 2px;
						@media (max-width: 480px) {
							top: 11px;
							left: 5px;
						}
					}
				}
			}
		}
		.pxl-post--holder {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			align-content: end;
			background-color: rgba(#F47F00, 0.6);
			@include transition(all 0.3s);
			opacity: 0;
			.holder-content {
				padding: 0 20px 25px 25px;
			}
			.pxl-category {
				@media (max-width: 480px) {
					display: none;
				}
			}
			.pxl-post--category {
				margin-bottom: 16px;
				&:before {
					display: none;
				}
				a {
					font-size: 16px;
					color: $primary_color;
					font-weight: 400;
					background-color: #fff;
					padding: 5px 15px;
					@media (max-width: 480px) {
						font-size: 14px;
					}
				}
			}
			.pxl-post--title {
				margin-bottom: 15px;
				max-width: 80%;
				@media (max-width: 480px) {
					margin-bottom: 5px;
				}
			}
			.pxl-holder-link {
				font-size: 38px;
				font-weight: 800;
				color: #fff;
				background-image: linear-gradient(transparent calc(100% - 1px), #fff 1px);
			}
			.pxl-item--content {
				font-size: 17px;
				color: #fff;
				font-weight: 400;
				@media (max-width: 480px) {
					font-size: 15px;
				}
			}
		}
	}
}

.btn-hover-divider {
	font-size: 16px;
	font-weight: 700;
	color: #000000;
	position: relative;
	display: inline-flex;
	letter-spacing: 0.3em;
	&:before {
		content: '';
		width: 0;
		position: absolute;
		bottom: 2px;
		height: 1px;
		background-color: #a3a3a3;
		@include transition(width 300ms linear 0ms);
		left: 0;
	}
	&:hover {
		color: #000;
	}
}

.pxl-portfolio-carousel1 {
	.pxl-swiper-arrow-wrap {
		margin: 0;
		position: absolute;
		top: 63%;
		left: 50%;
		transform: translate(-50%,-63%);
		z-index: 1;
		width: 99%;
		justify-content: space-between;
		@media (max-width: 1200px) {
			position: unset;
		  	transform: unset;
		  	width: unset;
		  	justify-content: center;
		  	margin-top: 20px;
		  	padding-bottom: 30px;
		}
		.pxl-swiper-arrow {
			filter: drop-shadow(0px 3px 30px rgba(32,42,181,0.11));
			width: 64px;
			height: 64px;
			display: flex;
			background-color: #fff;
			border-radius: 50%;
			align-items: center;
  			justify-content: center;
  			font-size: 25px;
  			position: absolute;
			top: 50%;
			left: 0;
			transform: translate(0%, -50%);
			@media (max-width: 1200px) {
				position: unset;
			  	transform: unset;
			  	margin: 5px;
			}
  			&:hover {
  				color: $primary_color;
  			}
  			&.pxl-swiper-arrow-next {
  				left: unset;
  				right: 0;
  			}
		}
	}
	.pxl-swiper-slide {
		padding: 0 20px;
		@media (max-width: 1200px) {
			padding: 0 15px;
		}
	}
	.pxl-swiper-container {
		margin: 0 -20px;
		@media (max-width: 1200px) {
			margin: 0 -15px;
		}
	}
	.pxl-swiper-wrapper {
		align-items: center;
	}
	.pxl-inner-top {
		margin-bottom: 30px;
		.container {
			display: flex;
  			align-items: center;
  			max-width: 1212px !important;
  			@media (max-width: 1200px) {
  				margin: 0 auto;
  				display: block;
  				text-align: center;
  			}
		}
		.pxl-heading {
			width: 46.9%;
			@media (max-width: 1200px) {
  				width: 100%;
  			}
			.sub-title-box {
				font-size: 19px;
                text-transform: uppercase;
                color: $primary_color;
                font-weight: 700;
                font-family: "Barlow Semi Condensed";
                margin-bottom: 8px;
			}
			.title-box {
				font-size: 60px;
                letter-spacing: 0.5px;
                color: #090909;
                font-weight: 800;
                font-family: "Barlow Semi Condensed";
                line-height: 1.1;
                max-width: 90%;
                margin-bottom: 0;
                @media (max-width: 1200px) {
	  				max-width: 100%;
	  			}
	  			@media (max-width: 1024px) {
	  				font-size: 55px;
	  			}
	  			@media (max-width: 880px) {
	  				font-size: 45px;
	  			}
	  			@media (max-width: 767px) {
	  				font-size: 35px;
	  			}
			}
		}
		.swiper-filter {
			width: 53.1%;
			@media (max-width: 1200px) {
  				width: 100%;
  			}
  			.pxl-grid-filter {
  				&.style-2 {
  					@media (max-width: 1200px) {
		  				margin: 30px 0 40px 0;
		  				text-align: center;
		  			}
  				}
  			}
		}
	}
	.pxl-carousel-inner {
		padding: 0 35px 0 45px;
		@media (max-width: 1200px) {
			padding: 0;
		}
	}
	.pxl-post--inner {
		position: relative;
  		&:hover {
  			.pxl-item--image {
  				.pxl-post--holder {
  					opacity: 1;
  					bottom: 0;
  					transition-delay: 0.2s;
  				}
  				&.hover {
  					opacity: 1;
  					transform: scaleY(1) translate(0,-50%);
  				}
  			}
  		}
		.pxl-item--image {
			position: relative;
			@include transition(all 0.3s);
			transform: scaleY(0.9);
			overflow: hidden;
	  		@include border-radius(5px);
			&:after {
				content: '';
				position: absolute;
				top: 50%;
				left: 0;
				width: 100%;
				height: 680px;
				mask-image: url(../img/bg-overlay1.png);
				-webkit-mask-image: url(../img/bg-overlay1.png);
				-ms-mask-image: url(../images/bg-overlay1.png);
				-o-mask-image: url(../images/bg-overlay1.png);
				-webkit-mask-repeat: no-repeat;
				-ms-mask-repeat: no-repeat;
				-o-mask-repeat: no-repeat;
				-webkit-mask-position: center center;
				-ms-mask-position: center center;
				-o-mask-position: center center;
				overflow: hidden;
				transform: translate(0,-50%);
			}
			img {
				@include transition(all 0.3s);
				@media (max-width: 575px) {
					width: 100%;
				}
			}
			&.hover {
				transform: scaleY(0) translate(0,-50%);
				position: absolute;
				top: 50%;
				left: 0;
				opacity: 0;
				&:before {
					content: "";
				    position: absolute;
				    top: 0;
				    left: 0;
				    width: 100%;
				    height: 100%;
				    background-color: rgba(#fc5900, 0.95);
				    mix-blend-mode: multiply;
				    pointer-events: none;
				    @include transition(all 0.3s);
				    opacity: 1;
				    transform: scaleY(1);
				    transform-origin: bottom;
				    z-index: 1;
				}
  				.pxl-post--holder {
  					transform: scaleY(1);
  					opacity: 1;
  					bottom: 0;
  					transition-delay: 0.2s;
  				}
				@media (max-width: 991px) {
		  			transform: scaleY(1);
		  		}
			}
		}
		.pxl-post--holder {
			position: absolute;
			bottom: -50%;
			left: 0;
			background-color: rgba(#190200, 0.851);
			@include border-radius(8px);
			margin: 0px 20px 18px 20px;
			padding: 50px 15px 43px 23px;
			opacity: 1;
			@include transition(all 0.3s);
			transform: scaleY(1.1);
  			transform-origin: bottom;
  			z-index: 1;
			.pxl-btn-portfolio {
				position: absolute;
				top: 12px;
				right: 15px;
				width: 44px;
				min-width: 44px;
				max-height: 44px;
				height: 44px;
				@include border-radius(50%);
				background-color: $primary_color;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				&:hover {
					transform: rotate(-40deg);
				}
			}
			.pxl-meta-top {
				position: relative;
				.pxl-post--category {
					margin-bottom: 10px;
					a {
						font-size: 18px;
						color: #ffffff;
						font-weight: 500;
						font-family: "Barlow Semi Condensed";
						line-height: 1;
					}
				}
				.pxl-post--title {
					margin-bottom: 18px;
					a {
						font-size: 24px;
						color: #ffffff;
						font-weight: 700;
						font-family: "Barlow Semi Condensed";
						&:hover {
							text-decoration: underline;
						}
					}
				}
				.pxl-post--content {
					font-size: 16px;
					letter-spacing: 0px;
					color: #cecece;
					font-weight: 400;
					font-family: "Barlow Semi Condensed";
					line-height: 1.5;
				}
			}
			.meta-bottom {
				margin-top: 22px;
				.pxl-item-list {
					font-size: 12px;
					letter-spacing: 0.3px;
					line-height: 1;
					color: #9c9c9c;
					font-weight: 400;
					display: flex;
  					align-items: center;
					font-family: "Barlow Semi Condensed";
					margin-bottom: 13px;
					&:last-child {
						margin: 0;
					}
					.pxl-item-name {
						font-size: 12px;
						margin-right: 24px;
						line-height: 1;
						color: #ffffff;
						font-weight: 700;
						font-family: "Barlow Semi Condensed";
					}
					.pxl-icon {
						width: 15px;
						height: 15px;
						display: flex;
						align-items: center;
						justify-content: center;
						line-height: 1;
						color: $link_color;
						@include border-radius(50%);
						background-color: $primary_color;
						font-size: 10px;
						margin-right: 15px;
						svg {
							height: 8px;
							width: auto;
						}
					}
				}
			}
		}
	}
}

.pxl-portfolio-carousel2 {
	.pxl-swiper-slide {
		padding: 0;
	}
	.pxl-swiper-container {
		margin: 0;
	}
	.pxl-post--inner {
		@include transition(all .3s);
		&:hover {
			.pxl-item--image {
				&:before {
					opacity: 1;
				}
			}
			.pxl-content-meta {
				opacity: 1;
				bottom: 35px;
			}
		}
		.pxl-item--image {
			position: relative;
			background-repeat: no-repeat;
  			background-size: cover;
			img {
				opacity: 0;
			}
			&:before {
				content: '';
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				border: 5px solid $primary_color;
				opacity: 0;
				@include transition(all .3s);
			}
			.pxl-bg-link {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				@include transition(all .3s);
			}
		}
		.pxl-content-meta {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 0 26px;
			z-index: 1;
			opacity: 0;
			@include transition(all .3s);
			.pxl-post--holder {
				background-image: linear-gradient(86deg, $gradient_color_from 0%, $gradient_color_to 100%);
				@include border-radius(10px);
				overflow: hidden;
			}
			.pxl-btn-portfolio {
				display: block;
				background-color: #fff;
				text-align: center;
				color: #262626;
				font-size: 30px;
				padding: 6px 20px;
				&:hover {
					color: $primary_color;
				}
			}
			.meta-bottom {
				padding: 38px 40px 39px 60px;
				@media (max-width: 1600px) {
					padding: 38px 20px 39px 20px;
				}
				.pxl-post--title {
					margin-bottom: 20px;
					a {
						font-size: 30px;
						letter-spacing: 0px;
						color: #ffffff;
						font-weight: 800;
						font-family: "Barlow Semi Condensed";
						&:hover {
							background-image: linear-gradient(transparent calc(100% - 2px), #fff 2px);
						}
						@media (max-width: 1600px) {
							font-size: 25px;
						}
					}
				}
				.content-left {
					.pxl-item-list {
						display: flex;
						align-items: center;
						line-height: 1.2;
						margin-bottom: 16px;
						&:last-child {
							margin-bottom: 0;
						}
						.pxl-icon {
							color: #fff;
							font-size: 17px;
							margin-right: 10px;
							i {
								transform: rotate(-90deg);
							}
						}
						.pxl-item-name {
							font-size: 21px;
							color: #ffffff;
							font-weight: 600;
							font-family: "Barlow Semi Condensed";
							@media (max-width: 1600px) {
								font-size: 18px;
							}
						}
					}
				}
			}
		}
	}
}
// End Portfolio

// Start Service
.pxl-service-grid {
	&.pxl-service-grid-layout1 {
		.pxl-item--inner {
			position: relative;
			padding-top: 65px;
			margin-bottom: 38px;
			@include transition(all 0.3s);
			@media (max-width: 1199px) {
				margin-bottom: 25px;
			}
			&:hover {
				.pxl-item--icon {
					.pxl-inner-icon {
						.pxl-icon-clip {
							color: #fff;
							&:after {
								transform: scaleX(1);
								width: 103%;
  								height: 103%;
							}
							.pxl-icon1 {
								transform: scale(0);
							}
							.pxl-icon2 {
								transform: scale(1);
							}
						}
					}
				}
				.pxl-item-meta{
					&:before {
						clip-path: polygon(0 0, 100% 0, 100% 81%, 0% 100%);
						opacity: 1;
					}
					.pxl-item--title {
						a {
							color: #fff;
						}
					}
					.pxl-item--content {
						color: #cbcbcb;
					}
				}
				.pxl-post--readmore {
					bottom: -25px;
					opacity: 1;
				}
				.pxl-inner-content {
					&:after {
						top: -21px;
						opacity: 1;
					}
				}
			}
			.pxl-item--icon {
				position: absolute;
				top: 0;
				z-index: 1;
				left: 50%;
				transform: translate(-50%,0);
				line-height: 1;
				text-align: center;
				filter: drop-shadow(0px 18px 14.5px rgba(#000,0.11));
				@include transition(all 0.3s);
				.pxl-inner-icon {
					display: inline-flex;
					clip-path: polygon(50% 0, 50% 0, 100% 25%, 110% 70%, 50% 100%, 50% 100%, 0 75%, 0 25%);
					width: 115px;
					min-width: 115px;
					height: 133px;
					position: relative;
					background-color: $gradient_color_from;
					text-align: center;
					@include transition(all 0.3s);
					.pxl-icon-clip {
						position: absolute;
						top: 5px;
						left: 5px;
						right: 5px;
						bottom: 5px;
						clip-path: polygon(50% 0, 50% 0, 100% 25%, 110% 70%, 50% 100%, 50% 100%, 0 75%, 0 25%);
						background-color: #fff;
						font-size: 56px;
						color: $link_color;
						display: flex;
						align-items: center;
						justify-content: center;
						@include transition(all 0.3s);
						overflow: hidden;
						&:after {
							position: absolute;
							top: -2px;
							left: 0;
							bottom: 0;
							right: 0;
							content: "";
							z-index: -1;
							transition-delay: .1s;
							transform: scale(0);
							transform-origin: center;
							transform-style: preserve-3d;
							@include transition(all .5s cubic-bezier(.62,.21,.45,1.52));
							background-color: $gradient_color_from;
							clip-path: polygon(50% 0, 50% 0, 100% 25%, 110% 70%, 50% 100%, 50% 100%, 0 75%, 0 25%);
						}
						img {
							height: 56px;
							width: 56px;
							min-width: 56px;
						}
						.pxl-icon1 {
							transform: scale(1);
							transition-delay: .1s;
  							transform-origin: center;
  							transform-style: preserve-3d;
							@include transition(all .5s cubic-bezier(.62,.21,.45,1.52));
						}
						.pxl-icon2 {
							position: absolute;
							top: 0;
							left: 0;
							bottom: 0;
							right: 0;
							transition-delay: .1s;
							transform: scale(0);
  							transform-origin: center;
  							transform-style: preserve-3d;
							@include transition(all .5s cubic-bezier(.62,.21,.45,1.52));
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
			.pxl-inner-content {
				position: relative;
				@include transition(all 0.3s);
				&:before {
  					content: '';
  					position: absolute;
  					top: 0;
  					left: 0;
  					width: 100%;
  					height: 100%;
  					background-color: $primary_color;
  					clip-path: polygon(0 0, 100% 0, 100% 89%, 0% 98%);
  				}
  				&:after {
  					content: '';
  					position: absolute;
  					top: 0;
  					left: 0;
  					width: 100%;
  					height: 50%;
  					background-color: $primary_color;
  					clip-path: polygon(0 0, 100% 22%, 100% 100%, 0 100%);
  					z-index: -1;
  					opacity: 0;
					transform-style: preserve-3d;
					@include transition(all .5s cubic-bezier(.62,.21,.45,1.52));
  				}
			}
			.pxl-item--holder {
				position: relative;
  				z-index: 2;
			}
			.pxl-item-meta {
				background-color: #f6f6f6;
				padding: 104px 40px 80px 47px;
  				clip-path: polygon(0 0, 100% 0, 100% 81%, 0% 100%);
  				@include transition(all 0.3s);
  				position: relative;
  				@media (max-width: 1199px) {
  					padding: 104px 30px 80px 30px;
  				}
  				&:before {
  					content: '';
  					position: absolute;
  					width: 100%;
  					height: 100%;
  					top: 0;
  					left: 0;
  					opacity: 0;
  					background-color: $link_color;
  					clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 100%);
  					transform-style: preserve-3d;
					@include transition(all .5s cubic-bezier(.62,.21,.45,1.52));
  				}
				.pxl-item--title {
					margin-bottom: 12px;
					a {
						font-size: 28px;
						color: $link_color;
						font-weight: 800;
						@include transition(all 0.3s);
						@media (max-width: 1199px) {
							font-size: 25px;
						}
					}
				}
				.pxl-item--content {
					font-size: 17px;
					color: #494949;
					font-weight: 400;
					@include transition(all 0.3s);
				}
			}
			.pxl-post--readmore {
				position: absolute;
				bottom: 0px;
				left: 43px;
				opacity: 0;
				transform-style: preserve-3d;
				@include transition(all .5s cubic-bezier(.62,.21,.45,1.52));
			}
		}
	}
	&.pxl-service-grid-layout2 {
		.pxl-item--inner {
			position: relative;
			padding-top: 65px;
			margin-bottom: 12px;
			@include transition(all 0.3s);
			&:hover {
				.pxl-item--icon {
					.pxl-inner-icon {
						.pxl-icon-clip {
							color: #fff;
							background-color: unset;
							&:after {
								transform: scaleX(1);
								width: 103%;
  								height: 103%;
							}
							.pxl-icon1 {
								transform: scale(0);
							}
							.pxl-icon2 {
								transform: scale(1);
							}
						}
					}
				}
				.pxl-item-meta{
					&:before {
						clip-path: polygon(0 0, 100% 0, 100% 81%, 0% 100%);
						opacity: 1;
					}
					.pxl-item--title {
						a {
							color: #fff;
						}
					}
					.pxl-item--content {
						color: #cbcbcb;
					}
				}
				.pxl-inner-content {
					&:after {
						top: -21px;
						opacity: 1;
					}
				}
			}
			.pxl-item--icon {
				position: absolute;
				top: 0;
				z-index: 1;
				left: 50%;
				transform: translate(-50%,0);
				line-height: 1;
				text-align: center;
				filter: drop-shadow(0px 18px 14.5px rgba(#000,0.11));
				@include transition(all 0.3s);
				.pxl-inner-icon {
					display: inline-flex;
					border-radius: 50%;
					width: 128px;
					height: 128px;
					min-width: 128px;
					position: relative;
					background-color: $primary_color;
					text-align: center;
					@include transition(all 0.3s);
					.pxl-icon-clip {
						position: absolute;
						top: 5px;
						left: 5px;
						right: 5px;
						bottom: 5px;
						border-radius: 50%;
						font-size: 56px;
						color: $link_color;
						display: flex;
						align-items: center;
						justify-content: center;
						@include transition(all 0.3s);
						overflow: hidden;
						background-color: #fff;
						&:after {
							position: absolute;
							top: -2px;
							left: 0;
							bottom: 0;
							right: 0;
							content: "";
							z-index: -2;
							transition-delay: .1s;
							transform: scale(0);
							transform-origin: center;
							transform-style: preserve-3d;
							@include transition(all .5s cubic-bezier(.62,.21,.45,1.52));
							background-color: $primary_color;
							border-radius: 50%;
						}
						img {
							height: 56px;
							width: 56px;
							min-width: 56px;
						}
						.pxl-icon1 {
							transform: scale(1);
							transition-delay: .1s;
  							transform-origin: center;
  							transform-style: preserve-3d;
							@include transition(all .5s cubic-bezier(.62,.21,.45,1.52));
						}
						.pxl-icon2 {
							position: absolute;
							top: 0;
							left: 0;
							bottom: 0;
							right: 0;
							transition-delay: .1s;
							transform: scale(0);
  							transform-origin: center;
  							transform-style: preserve-3d;
							@include transition(all .5s cubic-bezier(.62,.21,.45,1.52));
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
			.pxl-inner-content {
				position: relative;
				@include transition(all 0.3s);
				&:before {
  					content: '';
  					position: absolute;
  					top: 0;
  					left: 0;
  					width: 100%;
  					height: 100%;
  					background-color: $primary_color;
  					clip-path: polygon(0 0, 100% 0, 100% 89%, 0% 98%);
  				}
  				&:after {
  					content: '';
  					position: absolute;
  					top: 0;
  					left: 0;
  					width: 100%;
  					height: 50%;
  					background-color: $primary_color;
  					clip-path: polygon(0 0, 100% 22%, 100% 100%, 0 100%);
  					z-index: -1;
  					opacity: 0;
					transform-style: preserve-3d;
					@include transition(all .5s cubic-bezier(.62,.21,.45,1.52));
  				}
			}
			.pxl-item--holder {
				position: relative;
  				z-index: 2;
			}
			.pxl-item-meta {
				background-color: #fdf3e9;
				padding: 104px 40px 80px 47px;
  				clip-path: polygon(0 0, 100% 0, 100% 81%, 0% 100%);
  				@include transition(all 0.3s);
  				position: relative;
  				@media (max-width: 1199px) {
  					padding: 104px 30px 80px 30px;
  				}
  				&:before {
  					content: '';
  					position: absolute;
  					width: 100%;
  					height: 100%;
  					top: 0;
  					left: 0;
  					opacity: 0;
  					background-color: $link_color;
  					clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 100%);
  					transform-style: preserve-3d;
					@include transition(all .5s cubic-bezier(.62,.21,.45,1.52));
  				}
				.pxl-item--title {
					margin-bottom: 12px;
					a {
						font-size: 28px;
						color: $link_color;
						font-weight: 800;
						@include transition(all 0.3s);
						@media (max-width: 1199px) {
							font-size: 25px;
						}
					}
				}
				.pxl-item--content {
					font-size: 17px;
					color: #494949;
					font-weight: 400;
					@include transition(all 0.3s);
				}
			}
		}
	}
}

//service-carousel
.pxl-service-carousel {
	&.pxl-service-carousel1 {
		.pxl-item--inner {
			@include border-radius(4px);
			overflow: hidden;
			position: relative;
			.pxl-item--holder {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 100%;
				padding-left: 49px;
				@media (max-width: 1024px) {
					padding-left: 35px;
				}
				.pxl-btn-service {
					position: absolute;
					top: 0;
					right: 0;
					background-color: #F6F6F6;
					color: $primary_color;
					padding: 24px 15px;
					font-size: 20px;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					height: 100%;
					@media (max-width: 767px) {
						padding: 15px 14px;
					}
					&:hover {
						i {
							&:before {
								transform: rotate(-45deg) scale(0);
							}
							&:after {
								transform: rotate(-45deg) scale(1);
							}
						}
					}
					i {
						line-height: 1;
						width: 24px;
						height: 24px;
						position: relative;
						&:before {
							transform: rotate(-45deg) scale(1);
							transition: transform 0.3s ease-in-out;
							transform-origin: right center;
							position: absolute;
							bottom: 8px;
  							right: 5px;
						}
						&:after {
							content: "\f11e";
							font-family: Flaticon;
							font-size: inherit;
							font-style: normal;
							font-weight: normal;
							position: absolute;
							transform: rotate(-45deg) scale(0);
							transition: transform 0.3s ease-in-out;
							top: 10px;
							transform-origin: left center;
							left: 5px;
						}
					}
				}
				.pxl-inner-content {
					background-color: #fff;
					padding: 10px 55px 11px 16px;
					border-radius: 8px 0 0 0;
					.pxl-service--category {
						margin-bottom: 2px;
						a {
							font-size: 12px;
							
							background-color: $primary_color;
							color: $link_color;
							text-transform: uppercase;
							padding: 3.5px 10px;
						}
					}
					.pxl-item--title {
						margin-bottom: 0;
						a {
							font-size: 22px;
							font-weight: 600;
							color: $link_color;
							background-image: linear-gradient(transparent calc(100% - 1px), $link_color 1px);
							@media (max-width: 676px) {
								font-size: 19px;
							}
						}
					}
				}
			}
		}
	}
	&.pxl-service-carousel2 {
		.pxl-item--inner {
			@include transition(all 0.3s);
			padding-bottom: 15px;
			&:hover {
				.pxl-item-top {
					&:after {
						clip-path: polygon(0 0, 0% 100%, 100% 100%);
						opacity: 1;
					}
					.pxl-post--icon {
						opacity: 1;
						transform: scale(1);
						
					}
					.pxl-item--image {
						&:after {
							opacity: 1;
						}
					}
				}
			}
			.pxl-item-top {
				position: relative;
				@include border-radius(8px);
				overflow: hidden;
				@include transition(all 0.3s);
				&:after {
					content: '';
				    position: absolute;
					top: -12px;
					right: 0;
					opacity: 1;
					transform: translateY(0) rotate(180deg);
					background-color: $primary_color;
					clip-path: polygon(0% 100%, 0% 100%, 100% 100%);
					width: 157px;
					height: 132px;
					opacity: 0;
					transform-style: preserve-3d;
					@include transition(all 0.3s);
				}
				.pxl-post--icon {
					font-size: 50px;
					position: absolute;
					top: 10px;
					right: 10px;
					color: #fff;
					line-height: 1;
					z-index: 1;
					opacity: 0;
					transform: scale(0);
					transform-origin: center;
					transform-style: preserve-3d;
					@include transition(all 0.5s cubic-bezier(0.62, 0.21, 0.45, 1.52));
				}
				.pxl-item--image {
					position: relative;
					&:after {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						opacity: 0;
						background-color: rgba(#000, 0.612);
						transform-style: preserve-3d;
						@include transition(all 0.5s cubic-bezier(0.62, 0.21, 0.45, 1.52));
					}
					a {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						z-index: 2;
					}
				}
			}
			.pxl-item--holder {
				padding: 0 20px;
				z-index: 3;
				position: relative;
				margin-top: -31px;
				@media (max-width: 1024px) {
					padding: 0 15px;
				}
				.pxl-inner-content {
					background-color: #fff;
					@include border-radius(6px);
					filter: drop-shadow(0px 7px 13.5px rgba(#000,0.05));
					text-align: center;
					padding: 44px 20px 50px 20px;
					.pxl-item--title {
						margin-bottom: 14px;
						a {
							font-size: 24px;
							color: $link_color;
							font-weight: 700;
							
							@media (max-width: 1024px) {
								font-size: 22px;
							}
							&:hover {
								color: $primary_color;
							}
						}
					}
					.pxl-post--content {
						font-size: 16px;
						color: #494949;
						font-weight: 400;
						font-family: "Inter";
						line-height: 1.5;
					}
				}
				.pxl-btn-service {
					width: 63px;
					height: 63px;
					@include border-radius(50%);
					filter: drop-shadow(0px 3px 12px rgba(#000,0.07));
					background-color: #ffffff;
					border: 2px solid $primary_color;
					display: flex;
					align-items: center;
					justify-content: center;
					color: $link_color;
					margin: -30px auto 0 auto;
  					font-size: 23px;
  					i {
  						line-height: 1;
  						transform: rotate(-45deg);
  						@include transition(all 0.3s);
  					}
  					&:hover {
  						i {
  							transform: rotate(0deg);
  						}
  					}
				}
			}
		}
	}
	&.pxl-service-carousel3 {
		.pxl-swiper-container {
			margin: 0 -50px;
			@media (max-width: 1199px) {
				margin: 0 -15px;
			}
		}
		.pxl-swiper-slide {
			padding: 0 50px;
			@media (max-width: 1199px) {
				padding: 0 15px;
			}
		}
		.pxl-item--inner {
			@include transition(all .3s);
			&:hover {
				.pxl-item-top {
					.pxl-inner--image {
						&:before {
							opacity: 1;
							transform: scaleY(1) translate(-50%,0);
							@include transition(all .6s cubic-bezier(.62,.21,.45,1.52));
						}
						&:after {
							opacity: 1;
							@include transition(all .4s);
						}
						.pxl-item-bg {
							opacity: 1;
						}
					}
					.pxl-item-image {
						box-shadow: 0px 0px 0px 0px #818181;
						&:before {
							opacity: 1;
							height: 44%;
						}
					}
					.pxl-post--readmore {
						opacity: 1;
						top: 58%;
					}
				}
				.pxl-inner-icon {
					.pxl-post--icon {
						filter: drop-shadow(-1.042px 5.909px 3px rgba(164,108,62,0.3));
						background-color: $link_color;
					}
				}
			}
			.pxl-item-top {
				position: relative;
				border-radius: 50%;
  				overflow: hidden;
				.pxl-inner--image {
					position: relative;
					padding: 20px;
					@include transition(all .3s);
					&:before {
						content: '';
						position: absolute;
						top: 0px;
						left: 50%;
						width: 102%;
						height: 57%;
						background-color: $primary_color;
						z-index: -1;
						opacity: 0;
						transform-origin: top;
  						transform: scaleY(0) translate(-50%,0);
  						transform-style: preserve-3d;
						@include transition(all .3s cubic-bezier(.62,.21,.45,1.52));
					}
					&:after {
						content: '';
						position: absolute;
						width: 96%;
						height: 96%;
						top: 50%;
						left: 50%;
						background-color: #fff;
						z-index: -1;
						@include border-radius(50%);
						transform: translate(-50%,-50%);
						opacity: 0;
						@include transition(all 0.6s);
					}
					.pxl-item-bg {
						position: absolute;
						bottom: -1px;
						left: 50%;
						width: 102%;
						height: 43%;
						background-color: #fff;
						z-index: -1;
						transform: translate(-50%,0);
						opacity: 0;
						@include transition(all .3s);
					}
				}
				.pxl-post--readmore {
					position: absolute;
					top: 100%;
					left: 50%;
					transform: translate(-50%,-58%);
					opacity: 0;
					transform-style: preserve-3d;
					@include transition(all .5s cubic-bezier(.62,.21,.45,1.52));
					.btn-readmore {
						font-size: 15px;
						line-height: 37px;
						height: 37px;
						color: $link_color;
						font-weight: 700;
						font-family: "Barlow Semi Condensed";
						background-color: #fbf3ee;
						padding: 0 20px;
						@include border-radius(20px);
						display: flex;
  						align-items: center;
  						&:hover {
  							color: $primary_color;
  						}
					}
				}
				.pxl-item-image {
					position: relative;
					@include border-radius(50%);
					overflow: hidden;
					@include transition(all .3s);
					box-shadow: 0px 12px 0px -5px #818181;
					&:before {
						content: '';
						position: absolute;
						width: 100%;
						height: 0;
						background-color: $primary_color;
						clip-path: polygon(50% 0%, 100% 44%, 100% 100%, 0 100%, 0 44%);
						bottom: 0;
						left: 50%;
						transform: translate(-50%,0);
						opacity: 0;
						transform-origin: top;
  						transform-style: preserve-3d;
						@include transition(all .5s cubic-bezier(.62,.21,.45,1.52));
					}
					img {
						@include border-radius(50%);
					}
				}
			}
			.pxl-inner-icon {
				text-align: center;
				.pxl-post--icon {
					width: 85px;
					height: 85px;
					@include border-radius(50%);
					filter: drop-shadow(-1.042px 5.909px 3px rgba(#a46c3e,0.3));
					background-color: $primary_color;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 45px;
					@include transition(all .4s);
				}
			}
			.pxl-item--holder {
				margin-top: -73px;
			}
			.pxl-inner-content {
				text-align: center;
				.pxl-item--title {
					font-size: 32px;
					font-weight: 700;
					font-family: "Barlow Semi Condensed";
					margin-top: 15px;
  					margin-bottom: 5px;
					a {
						color: #0d0d0d;
						&:hover {
							color: $primary_color;
						}
					}
				}
				.pxl-post--content {
					font-size: 18px;
					letter-spacing: 0px;
					color: #626262;
					font-weight: 400;
					font-family: "Barlow Semi Condensed";
				}
			}
		}
	}
}
// End Service

//Portfolio Click
.pxl-portfolio-click1 {
	.pxl-post-image--track {
		border-top: 1px solid #DEDEDE;
		.pxl-post-item {
			border-bottom: 1px solid #DEDEDE;
			.pxl-item-post-click {
				display: flex;
  				align-items: center;
  				justify-content: space-between;
  				cursor: pointer;
  				padding-top: 46px;
  				padding-bottom: 46px;
				.pxl-post--category {
					font-family: Outfit;
					font-size: 16px;
					font-style: normal;
					font-weight: 500;
					text-transform: uppercase;
					color: $primary_color;
					margin-bottom: 5px;
					@media (max-width: 575px) {
						font-size: 14px;
					}
					a {
						font-family: Outfit;
						font-size: 16px;
						font-style: normal;
						font-weight: 500;
						text-transform: uppercase;
						color: $primary_color;
						@media (max-width: 575px) {
							font-size: 14px;
						}
					}
				}
				.pxl-post--title {
					font-family: Outfit;
					font-size: 48px;
					font-style: normal;
					font-weight: 500;
					letter-spacing: -1.92px;
					color: $link_color;
					line-height: 1.2;
					@media (max-width: 1199px) {
						font-size: 40px;
					}
					@media (max-width: 767px) {
						font-size: 35px;
					}
					@media (max-width: 575px) {
						font-size: 30px;
					}
				}
				.pxl-icon--post {
					width: 50px;
					height: 50px;
					border: 1px solid #DEDEDE;
					border-radius: 50%;
					position: relative;
					@media (max-width: 480px) {
						width: 42px;
						height: 42px;
					}
					&:before {
						content: '';
						position: absolute;
						width: 1px;
						height: 11px;
						background-color: $link_color;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						@include transition(all 0.3s);
						opacity: 1;
					}
					&:after {
						content: '';
						position: absolute;
						width: 11px;
						height: 1px;
						background-color: $link_color;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
					}
				}
			}
			.pxl-item-bottom {
				display: none;
				padding-bottom: 49px;
				.pxl-inner-meta {
					.row {
						@media (max-width: 991px) {
							display: block;
						}
					}
					.col-lg-6 {
						@media (max-width: 991px) {
							flex: 0 0 100%;
    						max-width: 100%;
						}
					}
					.pxl-item-meta {
						height: 100%;
						align-content: space-between;
						display: flex;
						flex-wrap: wrap;
						padding-left: 20px;
  						padding-right: 35px;
  						@media (max-width: 1199px) {
  							padding: 0;
  						}
  						@media (max-width: 991px) {
  							padding-top: 30px;
  						}
						.pxl-item--content {
							font-family: Inter;
							font-size: 18px;
							font-style: normal;
							font-weight: 400;
							color: #666;
							line-height: 1.54;
							@media (max-width: 991px) {
								margin-bottom: 40px;
							}
						}
					}
					.pxl-post-list {
						display: flex;
  						align-items: center;
  						@media (max-width: 480px) {
  							display: block;
  						}
  						.pxl-item-list {
  							display: grid;
  							font-family: Outfit;
							font-size: 24px;
							font-style: normal;
							font-weight: 500;
							color: $link_color;
							line-height: 1.2;
							margin-right: 44px;
							&:last-child {
								margin-right: 0 !important;
							}
							@media (max-width: 1199px) {
								font-size: 20px;
							}
							@media (max-width: 676px) {
								margin-right: 30px;
							}
							@media (max-width: 480px) {
								margin-right: 0;
								margin-bottom: 20px;
								&:last-child {
									margin-bottom: 0 !important;
								}
							}
  							.pxl-item-name {
  								color: #999;
								font-family: Outfit;
								font-size: 14px;
								font-style: normal;
								font-weight: 400;
								text-transform: uppercase;
								margin-bottom: 14px;
  							}
  						}
					}
				}
			}
			&.active {
				border-color: $primary_color;
				.pxl-item-post-click {
					.pxl-icon--post {
						border-color: $primary_color;
						&:before {
							opacity: 0;
						}
					}
				}
			}
		}
	}
}

// Grid Filter Style
.pxl-grid-filter {
	.filter-item {
		cursor: pointer;
        @include transition(all 300ms linear 0ms);
        position: relative;
	}
	.pxl--filter-inner {
		display: inline-flex;
		flex-wrap: wrap;
	}
	font-size: 17px;
	color: #252932;
	@extend .ft-theme-default;
	font-weight: 700;
	text-align: center;
	margin-bottom: 50px;
	.filter-item {
		justify-content: center;
		margin: 0 15px;
		&.active {
			color: $primary_color;
			@media #{$max-sm} {
				color: #fff;
				background-color: $primary_color;
			}
		}
	}
}

.pxl-load-more {
	.button-style1 {
		font-size: 17px;
		line-height: 60px;
		height: 60px;
		padding: 0 35px;
		border-radius: 100px;
		color: #fefefe;
		font-weight: 700;
		font-family: "Barlow Semi Condensed";
		display: inline-flex;
  		align-items: center;
  		background-color: $primary_color;
  		cursor: pointer;
  		position: relative;
  		@include transition(all .25s cubic-bezier(.645,.045,.355,1));
  		i {
  			margin-left: 10px;
  			font-size: 20px;
  		}
  		&:hover, &:focus, &:active {
  			outline: medium none;
        	text-decoration: none;
        	background-color: $link_color;
  		}
	}
}

//BR Porfolio Single
.pxl-porfolio-single1 {
	.pxl-meta-inner {
		border: 1px solid #DEDEDE;
		padding: 15px 19px 40px 19px;
		&:hover {
			.pxl-item--img {
				img {
					transform: perspective(600px) rotateX(0.06deg) rotateY(0deg) scaleX(1.1) scaleY(1.1);
				}
			}
		}
		.pxl-item--img {
			position: relative;
			overflow: hidden;
			a {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				z-index: 1;
			}
			img {
				transition: transform 500ms;
				transform: perspective(0px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1);
				transform-origin: center center;
			}
		}
		.pxl-categories-button {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 15px;
			.pxl-item-categories {
				font-family: Outfit;
				font-size: 16px;
				font-style: normal;
				font-weight: 500;
				text-transform: uppercase;
				color: $primary_color;
			}
			.pxl-item-button {
				svg {
					height: 16px;
					path {
						fill: $link_color;
					}
				}
				a {
					svg {
						path {
							fill: $link_color;
							@include transition(all 0.3s);
						}
					}
					&:hover {
						svg {
							path {
								fill: $primary_color;
							}
						}
					}
				}
			}
		}
		.pxl-item-content {
			display: flex;
  			align-items: baseline;
  			padding-top: 32px;
  			margin-bottom: 12px;
  			.pxl-item-title {
  				font-family: Outfit;
				font-size: 80px;
				font-style: normal;
				font-weight: 500;
				letter-spacing: -3.3px;
				color: $link_color;
				line-height: 1.2;
				@media (max-width: 1280px) {
					font-size: 60px;
				}
				a {
					font-family: Outfit;
					font-size: 80px;
					font-style: normal;
					font-weight: 500;
					letter-spacing: -3.3px;
					color: $link_color;
					line-height: 1.2;
					&:hover {
						color: $primary_color;
					}
					@media (max-width: 1280px) {
						font-size: 60px;
					}
					@media (max-width: 1024px) {
						font-size: 45px;
					}
					@media (max-width: 575px) {
						font-size: 35px;
					}
				}
  			}
  			.pxl-item-number {
  				font-family: Outfit;
				font-size: 16px;
				font-style: normal;
				font-weight: 400;
				letter-spacing: -0.64px;
				color: #666;
  			}
		}
		.pxl-item-desc {
			font-family: Inter;
			font-size: 18px;
			font-style: normal;
			font-weight: 400;
			color: #666;
			line-height: 1.55;
		}
	}
}

body.rtl {
	.pxl-grid-filter.style-1 .filter-item:last-child {
		margin-right: 0;
		margin-left: 0;
	}
	.pxl-grid-filter.style-1 .filter-item {
		margin-right: 0;
		margin-left: 22px;
		@media (max-width: 1200px) {
			margin: 5px 10px 5px 0;
		}
		@media (max-width: 480px) {
			margin-right: 0;
		}
	}
}