/*--------------------------------------------------------------
Portfolio Style
----------------------------------------------------------------
# Portfolio Grid
# Portfolio Carousel
# Portfolio Details
--------------------------------------------------------------*/
.pxl-portfolio-style1 {
	.pxl-post--featured{
		border-radius: 12px;
		img{
			border-radius: inherit;
		}
	}
	.pxl-grid-item{
		padding: 0 20px;
	}
	.pxl-post--title{
		color: #000;
		font-size: 28px;
		font-weight: 500;
		line-height: 1; 
		margin: 0;
		@media #{$max-sm} {
			font-size: 24px;
		}
	}
	.pxl-post--holder{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 22px;
		margin-top: 23px;
		border-bottom: 1px solid #DFE1E5;
		margin-bottom: 40px;
	}
	.pxl-post--readmore{
		font-size: 25px;
  		color: #bababa;
	}
	.pxl-link{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
}

.pxl-portfolio-style2 {
	.pxl-post--inner {
		display: flex;
		@media #{$max-lg-1} {
			display: block;
		}
	}
	.pxl-post--featured{
		width: 50%;
		@media #{$max-lg-1} {
			width: 100%;
		}
		> a{
			height: 100%;
			display: flex;
			img{
				object-fit: cover;
			}	
		}
	}
	.pxl-post--holder{
		width: 50%;
		@media #{$max-lg-1} {
			width: 100%;
		}
	}	

	.pxl-grid-item {
		display: flex;
		align-items: center;
	}
	.content-right {
		.pxl-post--featured {
			order: 1;
		}
		.pxl-post--featured{
			.pxl-post--category{
				a{
					left: 32px;
				}
				
			}
		}
	}
	.content-right .pxl-post--holder {
		order: 2;
	}
	.content-left
	{
		.pxl-post--featured {
			order: 2;
		}
		.pxl-post--featured{
			.pxl-post--category{
				a{
					right: 32px;
				}
				
			}
		}
	}
	.content-left .pxl-post--holder {
		order: 1;
	}
	.pxl-post--featured{
		position: relative;
		.pxl-post--category{
			position: unset;
			a{
				position: absolute;
				top: 32px;
				font-size: 16px;
				font-weight: 500;
				line-height: 35px;
				color: #fff;
				background: $primary_color;
				padding: 0 20px;
				border-radius: 4px;
			}
		}
	}
	.pxl-post--holder{
		padding: 49px 52px;
		background-color: #F8F8F8;
		@media #{$max-md2} {
			padding: 30px;
		}
		.pxl-post--title{
			font-size: 36px;
			padding-bottom: 27px;
			border-bottom: 1px solid #D9D9D9;
			margin-bottom: 35px;
			@media #{$max-md} {
				font-size: 25px;
			}
		}
		.pxl-post--content{
			font-size: 18px;
			font-weight: 400;
			line-height: 1.556;
			margin-bottom: 100px;
			@media #{$max-md} {
				font-size: 17px;
				margin-bottom: 50px;
			}
		}
		.pxl-button{
			max-width: 80px;
			height: 80px;
			border: 1px solid #BABABA;
			background: #F8F8F8;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: all .3s;
			.pxl--btn-icon{
				display: inline-flex;
				transition: all .3s;
			}
		}
		&:hover{
			.pxl--btn-icon{
				transform: rotate(45deg);
			}
			
		}
	}
}


.pxl-portfolio-style3{
	position: relative;
	.pxl-post--featured{
		img{
			border-radius: 36px;
		}
	}
	.pxl-grid-item1 {
		position: sticky;
		top: 50px;
		@media (max-width: 767px) {
			position: unset;
		}
		+.pxl-grid-item1{
			margin-top: 52px !important;
			@media (max-width: 580px) {
				margin-top: 15px !important;
			}
		}
		
	}
	.pxl-post--holder{
		position: absolute;
		max-width: 460px;
		bottom: 0;
		left: 160px;
		padding: 46px 55px 30px 40px;
		background-color: #fff;
		border-radius: 36px 36px 0 0;
		@media (max-width: 880px) {
			padding: 30px;
			max-width: 320px;
		}
		@media (max-width: 767px) {
			position: unset;
			padding: 30px 0 0 0;
			margin-top: 30px;
		}
		
		.svg1{
			position: absolute;
			bottom: -0.5px;
			left: -33px;
			fill: #fff;
			width: 33px;
			height: 33px;
		}
		.svg2{
			position: absolute;
			bottom: -0.5px;
			right: -33px;
			fill: #fff;
			width: 33px;
			height: 33px;
			transform: rotate(90deg);
		}
		.pxl-post--category{
			margin-bottom: 29px;
			@media (max-width: 880px) {
				margin-bottom: 15px;
			}
			a{
				color: var(--ai-agency-07000-e, #07000E);
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				height: 32px; 
				display: inline-flex;
  				align-items: center;
				padding: 0 16px;
				border-radius: 6px;
				background: #EBEDEF;
			}
		}
		.pxl-post--title{
			font-size: 32px;
			font-style: normal;
			font-weight: 600;
			line-height: 1.25;
			letter-spacing: -0.32px;
			margin-bottom: 37px;
			@media (max-width: 880px) {
				margin-bottom: 15px;
			}
		}
		.pxl-button{
			width: 52px;
			height: 52px;
			display: inline-flex;
			border-radius: 52px;
			background:#000;
			justify-content: center;
			align-items: center;
			color: #fff;
			@media (max-width: 580px) {
				width: 35px;
				height: 35px;
			}
		}
	}
}
// Portfolio Details
.pxl-project-info1 {
    background-color: #0A1320;
    padding: 25px 25px 30px 25px;
    border-radius: 10px;
    color: #fff;
    font-size: 17px;
    .pxl-item--title {
        text-align: center;
        margin: -25px -25px 21px -25px;
        font-size: 30px;
        color: #fff;
        border-bottom: 2px solid rgba(#FFFFFF, 0.1);
        padding: 21px 0;
    }
    .pxl-item--button {
        margin-top: 35px;
        text-align: center;
        a {
            padding: 0 32px;
            line-height: 54px;
            font-size: 16px;
        }
    }
    .pxl-item--icon {
        position: relative;
        top: 2px;
        color: $third_color;
        font-size: 18px;
    }
    .pxl--item {
        border-bottom: 1px solid rgba(#FFFFFF, 0.1);
        padding-bottom: 21px;
        margin-bottom: 21px;
        display: flex;
        flex-wrap: nowrap;
        label {
            font-weight: 700;
            font-size: 20px;
            display: block;
        }
        &:last-child {
            margin-bottom: 0;
        }
    }
}

.pxl-project-info2 {
	@extend .ft-theme-default;
    border-radius: 65px;
    padding: 19px 40px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    @media #{$max-md} {
        justify-content: inherit;
    }
    @media #{$max-sm} {
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 30px;
        box-shadow: 0 5px 10px rgba(#000, 0.06);
    }
    &:before {
        content: '';
        position: absolute;
        top: 0px;
        right: 0px;
        left: 0px;
        bottom: 0px;
        background-color: #fff;
        border-radius: inherit;
        z-index: -1;
    }
    &:after {
        content: '';
        position: absolute;
        top: 1px;
        right: 0px;
        left: 0px;
        height: 100%;
        @include background-horizontal($gradient_color_from, $gradient_color_to);
        border-radius: inherit;
        z-index: -2;
    }
    .pxl-item--icon {
        color: $primary_color;
        font-size: 18px;
    }
    .pxl--item {
        display: flex;
        flex-wrap: nowrap;
        margin: 12px 0;
        padding-right: 50px;
        @media #{$max-md} {
            width: 50%;
            padding: 0 10px;
        }
        @media #{$max-sm} {
            width: 100%;
        }
        label {
            font-weight: 600;
            color: #0A1320;
            font-size: 22px;
            display: block;
            margin-bottom: -2px;
            @media #{$max-sm} {
                font-size: 20px;
            }
        }
        &:last-child {
            padding-right: 0;
        }
    }
}

.pxl-portfolio-style1 .pxl-post--readmore.pxl-gradient-rotate {
	@include background-gradient-rotate(135deg, $gradient_color_from, $gradient_color_to);
}

.pxl-portfolio-carousel1 {
	.pxl-post--category {
		font-size: 18px;
		text-transform: uppercase;
		font-weight: 500;
		color: #fff;
		@media #{$max-xl} {
			font-size: 16px;
		}
	}
	.pxl-post--title {
		color: #fff;
		margin-bottom: 0;
		font-size: 30px;
		@media #{$max-xl} {
			font-size: 24px;
		}
	}
	.pxl-post--holder {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30px 45px 41px;
		z-index: 77;
		@include transition(all 300ms linear 0ms);
		opacity: 0;
		transform: translateY(100%);
		@media #{$max-xl} {
			padding-left: 30px;
			padding-right: 30px;
		}
	}
	.pxl-post--button {
		width: 67px;
		height: 67px;
		background-color: #fff;
		border-radius: 67px;
		position: absolute;
		top: 44px;
		right: 54px;
		font-size: 18px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		color: #000;
		z-index: 77;
		@include transition(all 300ms linear 0ms);
		opacity: 0;
		transform: translateY(-110px);
	}
	.pxl-post--inner {
		border-radius: 20px;
		position: relative;
		overflow: hidden;
		&:before {
			content: '';
			z-index: 66;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			@include background-horizontal($gradient_color_from, $gradient_color_to);
			opacity: 0;
			transform: scale(2);
			@include transition(all 300ms linear 0ms);
		}
		&:hover {
			&:before {
				opacity: 0.86;
				transform: scale(1);
			}
			.pxl-post--holder, .pxl-post--button {
				opacity: 1;
				transform: translateY(0%);
			}
		}
	}
}

body.rtl {
}