/*==========================================================================
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 {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		&-content {
			position: absolute;
			left: 0;
			bottom: 0;
			background: var(--primary-color-1);
			padding: 30px 40px;
			margin: 30px;
			z-index: 1;
			opacity: 0;
			transition: transform 0.4s ease 0s, opacity 0.4s ease 0s;
			display: flex;
			gap: 20px;
			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% !important;
			object-fit: cover;
			transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);
			position: relative;
			z-index: -1;
		}
		&-inner {
			position: absolute;
			bottom: 0;
			left: 0;
			margin: 0 0 30px 30px;
			z-index: 3;
			background: var(--bg-white);
			padding-left: 40px;
			display: flex;
			align-items: center;
			opacity: 0;
			transition: 0.4s;
			&-title {
				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(--text-white);
					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 Two CSS
==========================================================================*/
.portfolio__two {
	&-item {
		padding: 45px 60px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		transition: 0.7s;
		position: relative;
		z-index: 1;
		overflow: hidden;
		flex-direction: row-reverse;
		border-bottom: 1px solid var(--border-color-1);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		&:first-child {
			border-top: 1px solid var(--border-color-1);
		}
		&::after {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: var(--bg-white);
			z-index: -1;
			transition: 0.5s;
		}
		&-left {
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
			&-icon {
				margin-right: 40px;
				a i {
					color: var(--primary-color-1);
					width: 100px;
					height: 100px;
					font-size: 40px;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					border: 1px solid var(--border-color-1);
					border-radius: 50%;
					transform: rotate(-45deg);
					transition: 0.5s;
				}
			}
			&-content {
				h3 {
					transition: 0.5s;
				}
				span {
					color: var(--primary-color-1);
					font-weight: 600;
					display: block;
					margin-top: 5px;
				}
			}
		}
		&-right {
			h4 {
				transition: 0.5s;
			}
		}
		&.active {
			padding: 90px 60px;
			&::after {
				opacity: 0.8;
				background: var(--bg-heading-color);
			}
			.portfolio__two-item {
				&-left {
					&-icon a i {
						border-color: aliceblue;
					}
					&-content {
						h3 {
							color: var(--text-white);
						}
					}
				}
				&-right {
					h4 {
						color: var(--text-white);
					}
				}
			}
		}
	}
}
/*==========================================================================
Portfolio Three CSS
==========================================================================*/
.portfolio__three {
	&-item {
		position: relative;
		z-index: 1;
		img {
			width: 100%;
			height: 100% !important;
			object-fit: cover;
		}
		&::after {
			position: absolute;
			content: '';
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: var(--bg-heading-color);
			z-index: 1;
			transition: 0.4s;
			opacity: 0;
		}
		&::before {
			position: absolute;
			content: '';
			top: 30px;
			left: 30px;
			right: 30px;
			bottom: 30px;
			background: var(--primary-color-1);
			z-index: 2;
			transition: 0.4s;
			opacity: 0;
		}
		&-content {
			position: absolute;
			bottom: 0;
			left: 0;
			padding: 40px;
			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: 60px;
			top: 60px;
			visibility: hidden;
			opacity: 0;
			z-index: 2;
			transition: 0.5s;
			i {
				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;
			}
			.portfolio__three-item {
				&-content {
					visibility: visible;
					opacity: 1;
				}
				&-icon {
					visibility: visible;
					opacity: 1;
				}
			}
		}
	}
}
/*==========================================================================
Portfolio Four CSS
==========================================================================*/
.portfolio__four {
	&-item {
		&-image {
			position: relative;
			z-index: 1;
			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: var(--bg-heading-color);
				opacity: 0;
				transition: 0.4s;
			}
			&-content {
				position: absolute;
				bottom: 0;
				background: var(--primary-color-1);
				padding: 30px;
				left: 20px;
				right: 20px;
				transition: 0.4s;
				opacity: 0;
				h4 {
					color: var(--text-white);
				}
				span {
					color: var(--text-white);
				}
			}
			&-icon {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%) rotate(-90deg);
				width: 50px;
				height: 50px;
				opacity: 0;
				transition: transform 0.4s ease 0s, opacity 0.4s ease 0s;
				&::before,
				&::after {
					content: '';
					top: 0;
					left: 50%;
					transform: translateX(-50%);
					position: absolute;
					width: 1px;
					height: 100%;
					background: var(--bg-white);
				}
				&::before {
					transform: translateX(-50%) rotate(-90deg);
				}
			}
		}
		&:hover {
			.portfolio__four-item-image {
				&::before {
					opacity: 0.7;
				}
				&-content {
					bottom: 20px;
					opacity: 1;
				}
				&-icon {
					opacity: 1;
					transition: transform 0.4s ease 0.4s, opacity 0.4s ease 0.4s;
					transform: translateX(-50%) rotate(0);
				}
			}
		}
	}
}
/*==========================================================================
Conbix Filter CSS
==========================================================================*/
.conbix__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;
		}
		&-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);
			}			
			&::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
==========================================================================*/
.project__details {
	&-area {
		&-meta {
			display: flex;
			justify-content: space-between;
				border-bottom: 1px solid var(--border-color-1);
				margin-bottom: 28px;
				padding-top: 28px;
				padding-bottom: 32px;
			&-item {
				padding: 2px;
				h6 {
					font-size: 18px;
					line-height: 28px;
					span {
						font-family: var(--body-font);
						font-weight: 400;
						font-size: 17px;
						line-height: 30px;
						margin-left: 10px;						
					}					
				}
			}
		}
		&-list {
			padding-bottom: 55px;
			span {
				display: flex;
				align-items: baseline;
				margin-bottom: 20px;
				max-width: 586px;
				&:last-child {
					margin: 0;
				}
				i {
					color: var(--primary-color-1);
					margin-right: 10px;
				}
			}
		}
	}
	&-pagination {
		padding: 40px 0;
		border-top: 1px solid var(--border-color-1);
		border-bottom: 1px solid var(--border-color-1);
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		align-items: center;
		&-item {
			a {
				display: flex;
				align-items: center;
				justify-content: space-between;
				h6 {
					background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 2px no-repeat;
					transition: all 600ms ease;
				}
				&:hover {
					h6 {
						background-size: 100% 2px;
						color: var(--primary-color-1);
					}
					i {
						color: var(--primary-color-1);
					}
				}			
			}
			&-left {
				display: flex;
				align-items: center;
				gap: 30px;
				span {
					font-weight: 500;
					font-size: 14px;
					line-height: 24px;
					color: var(--color-2);					
				}
			}
			&-icon {
				text-align: center;
				padding: 20px 40px;
				max-width: 110px;
				margin: 0 auto;
				border-left: 1px solid var(--border-color-1);
				border-right: 1px solid var(--border-color-1);
			}
		}
	}
}
@media (max-width: 1890px) {
    .portfolio__area {
		&-item {
			&-content {
				&-icon img {
					max-width: 40px;
				}
			}
		}
	}   
}
@media (max-width: 1399px) {
	.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;
			}
		}
	}
	.project__details {
		&-area {
			&-meta {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
			}			
		}
	}
}
@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;
					}					
				}				
			}
		}
	}
	.project__details {
		&-area {
			&-meta {
				grid-template-columns: repeat(2, 1fr);
			}			
		}
	}	
	.project__one-item {
		&-content {
			left: 20px;
			right: 20px;
			bottom: 10px;
		}
		&-icon {
			top: 16%;
		}
		&:hover {			
			.project__one-item {
				&-content {
					bottom: 20px;
				}
			}
		}
	}
}
@media (max-width: 767px) {	
	.project__details {
		&-area {
			&-meta {
				grid-template-columns: repeat(1, 1fr);
			}			
		}
		&-pagination {
			gap: 20px;
			grid-template-columns: repeat(1, 1fr);
			&-item.center {
				display: none;
			}
		}
	}
	.portfolio__two {
		&-item {
			display: block;
			padding: 40px;
			&-left {
				display: block;
				&-icon {
					margin-right: 0;
					margin-top: 40px;
				}
				&-content {
					h3 {
						margin-top: 15px;
					}
				}
			}
			&.active {
				padding: 70px 40px;
			}
		}
	}
}
@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;
				}
			}
		}
	}
}
@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;
				}
			}
		}
	}
	.portfolio__two {
		&-item {
			padding: 40px 30px;
			&-left {
				&-icon a i {
					width: 90px;
					height: 90px;
				}
			}
			&.active {
				padding: 70px 30px;
			}
		}
	}
}
@media (max-width: 359px) {
	.portfolio {
		&-item {
			&-inner {
				&-icon {
					margin-left: 10px;
					padding: 3px 0;					
				}				
			}
		}
	}
}