.ft-project-section {
	z-index: 1;
	overflow: hidden;
	padding-top: 105px;
	&:before {
		top: 0;
		left: 0;
		z-index: -1;
		content: '';
		width: 100%;
		height: 400px;
		position: absolute;
		background-color: $color-2;
	}
	.ft-section-title {
		max-width: 420px;
		span,h2 {
			color: #fff;
		}
		h2 {
			padding-bottom: 0;
		}
	}
}
.ft-project-slider-wrapper {
	padding-top: 50px;
}
.ft-project-itembox {
	.ft-project-img {
		overflow: hidden;
		border-radius: 5px;
	}
	.ft-project-text {
		left: 0;
		top: 50%;
		opacity: 0;
		max-width: 370px;
		padding: 40px 30px;
		border-radius: 5px;
		position: absolute;
		background-color: #fff;
		transform: translateY(-50%);
		box-shadow: 1.045px 9.945px 60px 0px rgba(68, 68, 68, 0.15);
		h3 {
			color: $color-2;
			font-size: 24px;
			font-weight: 700;
			line-height: 1.5;
			padding-left: 50px;
			position: relative;
			padding-bottom: 15px;
			&:before {
				left: 0;
				top: 23px;
				content: '';
				height: 2px;
				width: 40px;
				position: absolute;
				background-color: $base-color;
			}
		}
		p {
			line-height: 1.5;
			padding-bottom: 25px;
		}
		.ft-btn {
			a {
				background-color: $color-2;
			}
		}
	}
}
.slick-current.slick-center {
	.ft-project-itembox {
		margin-left: -200px;
		padding-left: 200px;
		.ft-project-text {
			opacity: 1;
		}
	}
}
.ft-project-slider-area {
	margin: 0px -100px;
	.slick-list {
		overflow: visible;
	}
	.slick-slide {
		-webkit-transition: .3s cubic-bezier(.24,.74,.58,1);
		-khtml-transition: .3s cubic-bezier(.24,.74,.58,1);
		-moz-transition: .3s cubic-bezier(.24,.74,.58,1);
		-ms-transition: .3s cubic-bezier(.24,.74,.58,1);
		-o-transition: .3s cubic-bezier(.24,.74,.58,1);
		transition: .3s cubic-bezier(.24,.74,.58,1);
		opacity: 0;
	}
	.slick-slide.slick-active {
		opacity: 1;
	}
	.slick-dots {
		margin-top: 50px;
		@extend%slider-dot;
	}
}
.ft-portfolio-content-2 {
	padding-top: 45px;
}
.ft-portfolio-section-2 {
	z-index: 1;
	overflow: hidden;
	padding: 105px 0px 90px;
	&:before {
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		content: '';
		height: 550px;
		position: absolute;
		background-color: #003440;
	}
	.ft-section-title-2 {
		max-width: 505px;
		.sub-title {
			color: #fff;
		}
		h2 {
			color: #fff;
			padding-bottom: 0;
		}
	}
}
.ft-portfolio-slider-item {
	padding: 5px;
}
.ft-portfolio-content-2 {
	margin: 0px -5px;
}
.ft-portfolio-slider-innerbox {
	overflow: hidden;
	&:before {
		top: 50%;
		left: 50px;
		right: 0;
		content: '';
		width: 92%;
		height: 92%;
		opacity: 0;
		margin: 0 auto;
		position: absolute;
		transform: translateY(-50%);
		transition: 500ms all ease;
		background-color: rgba(0, 54, 66, 0.95);
	}
	.ft-portfolio-text {
		left: 45px;
		bottom: 55px;
		max-width: 385px;
		position: absolute;
		h3 {
			opacity: 0;
			color: #fff;
			font-size: 24px;
			font-weight: 700;
			line-height: 1.5;
			padding-bottom: 20px;
			transform: translateX(20px);
			transition: 500ms all ease;
			transition-delay: .1s;
		}
		p {
			opacity: 0;
			color: #fff;
			max-width: 360px;
			padding-bottom: 25px;
			transform: translateX(20px);
			transition: 500ms all ease;
			transition-delay: .2s;
		}
		.ft-btn-3 {
			opacity: 0;
			transform: translateX(20px);
			transition: 500ms all ease;
			transition-delay: .3s;
			a {
				height: 45px;
				width: 150px;
			}
		}
	}
	&:hover {
		&:before {
			left: 0;
			opacity: 1;
		}
		.ft-portfolio-text {
			h3, p, .ft-btn-3 {
				opacity: 1;
				transform: translateX(0px);
			}
		}
	}
}
.ft-portfolio-slider-2 {
	.slick-dots {
		position: static;
		margin-top: 32px;
		button {
			display: none;
		}
		li {
			width: 30px;
			height: 5px;
			background-color: #003440;
			&.slick-active {
				background-color: $base-color;
			}
		}
	}
}
.ft-project-item-filter-btn {
	margin-bottom: 50px;
	li {
		color: #043441;
		cursor: pointer;
		font-weight: 500;
		padding: 7px 20px;
		border-radius: 20px;
		&.filtr-active {
			color: #fff;
			background-color: $base-color;
		}
	}
}
.ft-project-post-item-content {
	.ft-btn {
		margin-top: 30px;
		a {
			margin: 0 auto;
			border-radius: 30px;
			background-color: #043441;
		}
	}	
}
.ft-project-item-wrapper {
	.ft-portfolio-slider-innerbox {
		margin: 0 auto;
		max-width: 370px;
		border-radius: 5px;
		margin-bottom: 30px;
		.ft-portfolio-text {
			max-width: 285px;
			h3 {
				font-size: 20px;
			}
			p {
				font-size: 14px;
			}
		}
	}
}
.ft-portfolio-overview-text {
	overflow: hidden;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0px 0px 75px 0px rgba(0, 3, 13, 0.15);
	.project-title-overview {
		padding: 15px;
		background-color: $base-color;
		h3 {
			color: #fff;
			font-size: 22px;
			font-weight: 700;
		}
	}
	.ft-portfolio-overview-list-value {
		padding: 30px;
		.ft-portfolio-overview-list {
			li {
				color: #1a2428;
				font-weight: 700;
				margin-bottom: 5px;
				span {
					float: right;
					font-weight: 400;
				}
			}
		}
		.ft-project-value {
			margin-top: 20px;
			span {
				color: #1a2428;
				font-size: 24px;
				font-weight: 700;
				font-family: $heading;
			}
			ul {
				li {
					font-size: 14px;
					color: #ffc601;
				}
			}
		}
	}
}
.ft-project-overview-text-wrapper {
	z-index: 1;
	padding-top: 35px;
	h3 {
		color: #191919;
		font-size: 30px;
		font-weight: 700;
		padding-bottom: 20px;
	}
	p {
		font-size: 17px;
	}
}
.ft-project-overview-comment-list {
	font-size: 17px;
	padding-top: 35px;
}
.ft-project-overview-list-item {
	li {
		padding-left: 25px;
		margin-bottom: 20px;
		position: relative;
		&:before {
			top: 0;
			left: 0;
			content: '\f00c';
			font-weight: 900;
			position: absolute;
			color: $base-color;
			font-family: 'Font Awesome 5 Pro';
		}
	}
}
.ft-project-overview-comment-wrapper {
	padding: 40px;
	margin-left: 60px;
	background-color: rgb(255, 255, 255);
	box-shadow: 0px 0px 75px 0px rgba(0, 3, 13, 0.15);
	.ft-project-overview-comment-img {
		width: 110px; 
		height: 110px;
		line-height: 103px;
		margin-right: 25px;
		text-align: center;
		border-radius: 100%;
		border: 2px solid $base-color;
		img {
			width: 90px;
			height: 90px;
			border-radius: 100%;
		}
	}
	.ft-project-overview-comment-text {
		width: 385px;
		h4 {
			color: #191919;
			font-size: 20px;
			font-weight: 700;
			padding: 20px 0px 5px;
		}
		span {
			color: $color-2;
		}
	}
}
.ft-similar-work-section {
	padding-bottom: 110px;
	.ft-similar-work-content {
		h2 {
			color: #043441;
			font-size: 26px;
			font-weight: 700;
			text-align: center;
			padding-bottom: 30px;
		}
	}
	.ft-portfolio-slider-innerbox .ft-portfolio-text {
		max-width: 290px;
	}
}
.ft-case-study-section {
	overflow: hidden;
}
.ft-case-study-items {
	width: 25%;
	border-right: 1px solid rgb(138 138 138);
	.ft-case-study-img {
		position: relative;
		&:before {
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			content: '';
			position: absolute;
			transition: 500ms all ease;
			background-color: rgba(0, 0, 0, .65);
		}
	}
	.ft-case-study-text {
		left: 60px;
		bottom: -25px;
		max-width: 335px;
		position: absolute;
		transition: 500ms all ease;
		.serial-no {
			color: var(--ft-second-theme);
			font-size: 20px;
			font-weight: 500;
		}
		h3 {
			color: #fff;
			font-size: 28px;
			font-weight: 700;
			padding: 25px 0px 25px;
		}
		p {
			opacity: 0;
			color: #fff;
			line-height: 1.688;
			padding-bottom: 35px;
			transition: 500ms all ease;
		}
	}
	.more-btn {
		left: 60px;
		color: #fff;
		width: 45px;
		height: 45px;
		bottom: 40px;
		position: absolute;
		border: 2px solid rgba(255, 255, 255, .6);
		&:hover {
			color: #000;
			background-color: #fff;
		}
	}
	&:hover {
		.ft-case-study-text {
			bottom: 90px;
			p {
				opacity: 1;
			}
		}
		.ft-case-study-img {
			&:before {
				background-color: rgba(0, 67, 135, .85);
			}
		}
	}
}