/*==========================================================================
Project CSS
==========================================================================*/
.project__area {
	&-item {
		position: relative;
		z-index: 1;
		img {
			width: 100%;
			min-height: 430px;
			object-fit: cover;
		}
		&::before {
			position: absolute;
			content: '';
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: var(--bg-heading-color);
			z-index: 1;
			transition: 0.4s;
			opacity: 0;
		}
		&::after {
			position: absolute;
			content: '';
			top: 30px;
			left: 30px;
			right: 30px;
			bottom: 30px;
			background: var(--primary-color-3);
			z-index: 1;
			transition: 0.4s;
			opacity: 0;
		}
		&-content {
			position: absolute;
			right: 30px;
			bottom: 30px;
			left: 30px;
			padding: 40px;
			padding-right: 75px;
			display: inline-block;
			transition: 0.5s;
			z-index: 2;
			visibility: hidden;
			opacity: 0;
			h4 {
				color: var(--text-white);
			}
			span {
				color: var(--color-9);
				font-weight: 500;
				font-size: 14px;
				line-height: 24px;				
			}
		}
		&-icon {
			position: absolute;
			right: 70px;
			top: 70px;
			visibility: hidden;
			opacity: 0;
			z-index: 2;
			transition: 0.5s;
			a {
				background: var(--bg-white);
				width: 50px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				border-radius: 6px;
				color: var(--text-heading-color);
				display: inline-block;
			}
		}
		&:hover {
			&::before {
				opacity: 0.7;
			}
			&::after {
				opacity: 0.7;
			}
			.project__area-item {
				&-content {
					visibility: visible;
					opacity: 1;
				}
				&-icon {
					visibility: visible;
					opacity: 1;
				}
			}
		}
	}
	&-page {
		.project__area-item::after {
			background: var(--primary-color-1);
		}
	}
}
/*==========================================================================
Portfolio One CSS
==========================================================================*/
.portfolio__area {
	overflow: hidden;
	&-item {
		position: relative;
		z-index: 1;
        transition: 0.4s;
		margin-top: 10px;		
		&::after {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			height: 50%;
			width: 100%;
			background: var(--bg-heading-color);
			transition: 0.4s;
			opacity: 0;
		}
		> img {
			min-height: 360px;
			object-fit: cover;
		}
		&-content {
			position: absolute;
			left: 50px;
			bottom: 40px;
			right: 50px;
			background: var(--primary-color-1);
			padding: 30px 40px;
			padding-right: 30px;
			z-index: 1;
			opacity: 0;
			transition: transform 0.4s ease 0s, opacity 0.4s ease 0s;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&-title {
				h4 {
					color: var(--text-white);
				}
				.text-eight {
					color: var(--text-white);
				}
			}
		}
		&:hover {
            transform: translateY(-10px);	
			&::after {
				height: 100%;
				opacity: 0.8;
			}	
			.portfolio__area-item-content {
				opacity: 1;
				transition: transform 0.4s ease 0.4s, opacity 0.4s ease 0.4s;
			}	
		}
	}
}
/*==========================================================================
Portfolio Two CSS
==========================================================================*/
.portfolio {
	display: flex;
	overflow: auto;
	scroll-snap-type: x mandatory;
	gap: 30px;
	&-item {
		height: 570px;
		flex: 2.1;
		transition: 0.5s;
		will-change: transform;
		position: relative;
		overflow: hidden;
		z-index: 1;
		&::before {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			background: var(--bg-heading-color);
			opacity: 0;
			transition: 0.4s;
		}
		img {
			height: 100%;
			object-fit: cover;
			transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);
			position: relative;
			z-index: -1;
		}
		&-inner {
			position: absolute;
			bottom: 40px;
			left: 40px;
			z-index: 3;
			background: var(--bg-white);
			padding-left: 40px;
			display: flex;
			align-items: center;
			opacity: 0;
			transition: 0.4s;
			&-title {
				h4 {
					a {
						transition: 0.4s;
						&:hover {
							color: var(--primary-color-2);
						}
					}
				}
				span {
					font-weight: 600;
					font-size: 16px;
					line-height: 26px;
					color: var(--color-3);					
				}
			}
			&-icon {
				width: 125px;
				height: 125px;
				line-height: 125px;
				text-align: center;
				background: var(--primary-color-2);
				margin-left: 80px;
				i {
					width: 80px;
					height: 80px;
					line-height: 80px;
					text-align: center;
					color: var(--text-white);
					border: 1px solid var(--color-14);
					border-radius: 50%;
					font-size: 25px;
					transform: rotate(45deg);
				}
			}
		}
		&:hover {
			flex: 1.5;
		}
		&.active {
			flex: 6;
			scroll-snap-align: start;
			&.portfolio-item {
				&::before {
					opacity: 0.7;				
				}
			}
			.portfolio-item-inner {
				opacity: 1;
			}
			&.portfolio-item {
				img {
                    transform: scale3d(1.1, 1.1, 1.1);        					
				}
			}
			&::after {
				content: "";
				position: absolute;
				background-image: url('../../assets/img/shape/Image.png');
				height: 100%;
				width: 20%;
				top: 0;
				right: 0;
				z-index: 0;
				background-repeat: no-repeat;
				transition: 0.3s;				
			}
		}
	}
}
.portfolio__three {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	z-index: 1;
	.portfolio-border {
		position: relative;
		z-index: 1;
		border-right: 4px solid var(--border-white);
		padding: 0;
		.project__area-item {
			min-height: 600px;
		}
		&:last-child {
			border: 0;
		}
	}
}
/*==========================================================================
Filter CSS
==========================================================================*/
.filter_button {
	text-align: center;
	margin-top: -5px;
	button {
		font-weight: 600;
		padding: 0 25px;
		line-height: 48px;
		color: var(--text-heading-color);
		border: 1px solid var(--border-color-4);
		box-shadow: 0px 9px 18px rgba(24, 16, 16, 0.05);
		background: none;
		margin: 5px;
		transition: 0.4s;
		&:hover {
			background: var(--primary-color-1);
			color: var(--text-white);
			border-color: var(--primary-color-1);
		}
	}
	.active {
		background: var(--primary-color-1);
		color: var(--text-white);
		border-color: var(--primary-color-1);
	}
}
/*==========================================================================
Project Filter CSS
==========================================================================*/
.project__one {
	&-item {
		position: relative;
		z-index: 1;
		&::before {
			position: absolute;
			content: '';
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: var(--bg-heading-color);
			z-index: 0;
			transition: 0.4s;
			opacity: 0;
		}
		img {
			min-height: 460px;
			object-fit: cover;
		}
		&-content {
			position: absolute;
			bottom: 20px;
			left: 40px;
			right: 40px;
			padding: 40px 30px;
			z-index: 1;
			transition: 0.4s;
			background: var(--bg-white);
			opacity: 0;
			overflow: hidden;
			&::before {
				content: '';
				position: absolute;
				right: -30px;
				bottom: -40px;
				height: 100px;
				width: 100px;
				border-radius: 50%;
				background: var(--primary-color-1);
				z-index: -1;
			}			
			&::after {
				content: '';
				position: absolute;
				right: -20px;
				bottom: -30px;
				height: 100px;
				width: 100px;
				border-radius: 50%;
				background: var(--primary-color-1);
				opacity: 0.2;
			}			
			span {
				font-size: 16px;
				line-height: 26px;
				font-weight: 700;
				font-family: var(--heading-font);
				color: var(--primary-color-1);		
				display: block;
				margin-bottom: 5px;		
			}
			h4 a {
				transition: 0.4s;
				&:hover {
					color: var(--primary-color-1);
				}
			}
		}		
		&-icon {
			position: absolute;
			top: 18%;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
			transition: 0.4s;
			opacity: 0;
			a {
				background: var(--primary-color-1);
				width: 70px;
				height: 70px;
				line-height: 70px;
				text-align: center;
				border-radius: 50%;
				color: var(--text-white);
				display: inline-block;
				transform: rotate(45deg);
				font-size: 25px;
			}
		}
		&:hover {
			&::before {				
				opacity: 0.7;
			}
			.project__one-item {
				&-content {
					opacity: 1;
					bottom: 40px;
				}
				&-icon {
					top: 22%;
					opacity: 1;
				}	
			}		
		}
	}
}
/*==========================================================================
Project Details CSS
==========================================================================*/
.portfolio__details {
    &-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 35px;
        padding-bottom: 35px;
        border-bottom: 1px solid var(--border-color-1);
        &-item {
            h6 {
                font-size: 18px;
                line-height: 28px;
                font-weight: 700;                
            }
        }
    }
}
@media (max-width: 1890px) {
    .portfolio__area {
		&-item {
			img {
				width: 100%;
			}
			&-content {
				left: 30px;
				bottom: 30px;
				right: 30px;
				padding: 30px 25px;
				&-icon img {
					max-width: 40px;
				}
			}
		}
	}   
}
@media (max-width: 1399px) {
	.project__area {
		&-item {
			&-content {
				position: absolute;
				right: 30px;
				bottom: 30px;
				left: 30px;
				padding: 30px;
			}
			&-icon {
				right: 60px;
				top: 60px;
			}
			&.page {
				&::after {
					top: 20px;
					left: 20px;
					right: 20px;
					bottom: 20px;
				}
				.project__area-item {
					&-content {
						position: absolute;
						right: 20px;
						bottom: 20px;
						left: 20px;
						padding: 30px 25px;
						&-icon {
							right: 50px;
							top: 50px;
						}
					}
				}
			}
		}
	}
	.project__one-item {
		&-content {
			left: 30px;
			right: 30px;
		}
		&-icon {
			top: 16%;
		}
		&:hover {			
			.project__one-item {
				&-content {
					bottom: 30px;
				}
				&-icon {
					top: 19%;
				}
			}
		}
	}
}
@media (max-width: 1199px) {
	.portfolio {
		&-item {
			height: 500px;
			flex: 1.5;
			&-inner {
				left: 30px;
				bottom: 30px;
			}
		}
	}
	.portfolio__three {
		border-left: 2px solid var(--border-white);
		border-right: 2px solid var(--border-white);
		.portfolio-border {
			border-right: 0;
			border: 2px solid var(--border-white);
			.project__area-item {
				min-height: 400px;
			}
			&:last-child {
				border: 2px solid var(--border-white);
			}
		}
	}
}
@media (max-width: 991px) {
	.portfolio {
		gap: 20px;
		&-item {
			height: 420px;
			flex: 1.1;
			&-inner {
				padding-left: 30px;
				&-icon {
					width: 100px;
					height: 100px;
					line-height: 100px;
					margin-left: 40px;
					padding: 4px 0;
					i {
						width: 60px;
						height: 60px;
						line-height: 60px;
					}					
				}				
			}
		}
	}
    .portfolio__details-meta {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
	.project__one-item {
		&-content {
			left: 20px;
			right: 20px;
			bottom: 10px;
		}
		&-icon {
			top: 16%;
		}
		&:hover {			
			.project__one-item {
				&-content {
					bottom: 20px;
				}
			}
		}
	}
}
@media (max-width: 720px) {
	.portfolio {
		display: initial;
		&-item {
			height: 120px;
			margin-bottom: 25px;
			&:last-child {
				margin: 0;
			}
			img {
				width: 100%;
			}
			&.active {
				&.portfolio-item {
					height: 400px;
				}
			}
		}
	}
    .portfolio__details-meta {
        grid-template-columns: repeat(1, 1fr);
    }
}
@media (max-width: 420px) {
	.portfolio {
		&-item {
			&-inner {
				left: 20px;
				bottom: 20px;
				padding-left: 20px;
				&-icon {
					width: 85px;
					height: 95px;
					line-height: 95px;
					margin-left: 20px;
					padding: 3px 0;
					i {
						width: 50px;
						height: 50px;
						line-height: 50px;
						font-size: 20px;
					}					
				}				
			}
			&.active {
				&.portfolio-item {
					height: 340px;
				}
			}
		}
	}
}
@media (max-width: 359px) {
	.portfolio {
		&-item {
			&-inner {
				&-icon {
					margin-left: 10px;
					padding: 3px 0;					
				}				
			}
		}
	}
	.project__area {
		&-item {
			&-content {
				padding: 40px 25px;
			}
			&-icon {
				right: 55px;
				top: 55px;
			}
		}
	}
}