/* Signe Interior Business HTML-5 Template */

/*** 

====================================================================
	project One
====================================================================

***/

.project-one{
	position:relative;
}

.project-one .projects-item-carousel_pagination{
	position: absolute;
	right: 150px;
	z-index: 999;
	width: auto !important;
	bottom: 130px !important;
	left: auto !important;
	top: auto !important;
}

.project-one .projects-item-carousel_pagination .swiper-pagination-bullet{
	position: relative;
	opacity: 1;
	width:auto;
	height:auto;
	display: inline-block;
	background: none;
	font-weight: 600;
	line-height: 36px;
	text-align: right;
	font-size: 18px;
	border-radius: 0px;
	padding: 0px 0px 5px;
	color: var(--white-color);
	margin: 0px 10px !important;
	transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	border-bottom: 1px solid rgba(var(--white-color-rgb), 0.20);
}

.project-one .projects-item-carousel_pagination .swiper-pagination-bullet:hover,
.project-one .projects-item-carousel_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
	opacity: 1;
	color: var(--main-color);
}

.project-one-arrow{
	position:absolute;
	right: 150px;
	bottom:250px;
	left:auto;
	top:auto;
	z-index:10;
}

.project-one-arrow .projects-item-carousel-prev,
.project-one-arrow .projects-item-carousel-next{
	position:relative;
	width: 100px;
	height: 50px;
	display: block;
	margin: 7px 0px;
	font-size: 18px;
	line-height: 50px;
	border-radius: 5px;
	text-align: center;
	color: var(--white-color);
	background-color:rgba(var(--black-color-rgb), 0.30);
}

.project-one-arrow .projects-item-carousel-prev:hover,
.project-one-arrow .projects-item-carousel-next:hover{
	background-color: var(--main-color);
}

.project-block_one{
	position:relative;
}

.project-block_one-inner{
	position:relative;
}

.project-block_one-inner:before{
	position:absolute;
	content:'';
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	z-index:1;
	opacity: 0.50;
	background-color: var(--color-two);
}

.project-block_one-image{
	position:relative;
}

.project-block_one-image img{
	position:relative;
	width:100%;
	display: block;
}

.project-block_one-tag{
	position:absolute;
	left:80px;
	top:80px;
	z-index:1;
	font-weight: 700;
	padding: 6px 15px;
	display: inline-block;
	text-transform: uppercase;
	color: var(--white-color);
	background-color: var(--main-color);
}

.project-block_one-content{
	position:absolute;
	left:100px;
	bottom: 100px;
	z-index:1;
}

.project-block_one-title{
	position:relative;
	font-size: 16px;
	letter-spacing:1px;
	color: var(--white-color);
	text-transform: uppercase;
}

.project-block_one-heading{
	position:relative;
	letter-spacing:1px;
	color: var(--white-color);
	text-transform: uppercase;
}

/*** 

====================================================================
	Project Two
====================================================================

***/
	
.project-two{
	position:relative;
	overflow: hidden;
	padding: 110px 0px 90px;
	background-position: left bottom;
	background-repeat:no-repeat;
	background-color: var(--color-two);
}

.project-two .auto-container{
	position:relative;
}

.project-two .filter-list {
    position: relative;
    padding-left: 440px;
    margin-top: -310px;
}

.project-two .filters {
    position: absolute;
    left: 20px;
    top: 320px;
    z-index: 1;
    display: inline-block;
}

.project-two .filters .filter-tabs {
    position: relative;
    padding: 5px 0px 5px 60px;
    border-left: 1px solid rgba(var(--white-color-rgb), 0.30);
}

.project-two .filters .filter-tabs li{
	position: relative;
    cursor: pointer;
    font-size: 18px;
    display: block;
	font-weight: 500;
	letter-spacing: 0.5px;
    margin: 25px 0px 25px;
	color: var(--white-color);
	transition: all 300ms ease;
	text-transform: uppercase;
	font-family: "Barlow Condensed", sans-serif;
}

.project-two .filters .filter-tabs li:hover,
.project-two .filters .filter-tabs li.active{
	color: var(--main-color);
}

.project-two .filters .filter-tabs li:before{
	position: absolute;
    content: "";
    left: -64px;
    top: 10px;
    width: 6px;
    height: 6px;
    opacity: 0;
    border-radius: 50px;
    display: inline-block;
	transition: all 300ms ease;
	background-color: var(--white-color);
    outline-offset: 7px;
    outline: 1px solid var(--white-color);
}

.project-two .filters .filter-tabs li sup{
	font-size: 12px;
}

.project-two .filters .filter-tabs li.active::before,
.project-two .filters .filter-tabs li:hover::before{
	opacity:1;
}

.project-block_two.mix {
  display: none;
}

.project-block_two{
	position: relative;
	margin-bottom: 30px;
}

.project-block_two .inner {
	position: relative;
	overflow: hidden;
	text-align: center;
}

.project-block_two .inner .image {
	position: relative;
}

.project-block_two .inner .image img {
	position: relative;
	width: 100%;
	display: block;
	transition: all 500ms ease;
}

.project-block_two .inner:hover img {
	transform: scale(1.04, 1.04) rotate(2deg);
}

.project-block_two .inner:hover .content {
	opacity: 1;
	transform: scale(1, 1);
}

.project-block_two .content {
	position: absolute;
	left: 10px;
	bottom: 10px;
	right: 10px;
	opacity: 0;
	transition: all 500ms ease;
	padding: 30px 40px 30px;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	transform: scale(0.7, 1);
}

.project-block_two .content .title{
	position:relative;
	font-weight: 500;
	text-transform: uppercase;
}

.project-block_two .content .title a {
	color: var(--white-color);
}

.project-block_two .content .designation {
	margin-top: 8px;
	color: var(--white-color);
	text-transform: uppercase;
}

.project-block_two .content .text {
	position: relative;
	margin-top: 15px;
	padding-top: 25px;
	margin-bottom: 25px;
	color: var(--white-color);
}

.project-block_two .content .text:before {
	position: absolute;
	content: "";
	left: 50%;
	top: 0px;
	width: 120px;
	height: 1px;
	opacity: 0.3;
	transform: translateX(-50%);
	background-color: var(--white-color);
}

.project-block_two .content .arrow {
	position: relative;
	margin-top: 20px;
	width: 46px;
	height: 46px;
	margin: 0 auto;
	display: block;
	line-height: 44px;
	text-align: center;
	border-radius: 50px;
	transform: rotate(-45deg);
	color: var(--white-color);
	border: 1px solid var(--white-color);
}

.project-block_two .content .arrow:hover {
	color:  var(--color-two);
	border-color:  var(--main-color);
	background-color:  var(--main-color);
}

/*** 

====================================================================
	Project Three
====================================================================

***/
	
.project-three{
	position:relative;
	padding: 0px 0px 110px;
}

.pattern-layer_one{
	position:absolute;
	left:-440px;
	top:-200px;
	width: 840px;
	height: 840px;
}

.pattern-layer_two{
	position:absolute;
	right:0px;
	top:-200px;
	width: 420px;
	height: 840px;
	background-position: left top;
}

.project-three .sec-title{
	position:relative;
	max-width: 550px;
}

.project-tab .tabs-header{
	position:relative;
}

.project-tab .product-tab-btns{
	position:relative;
}

.project-tab .product-tab-btns .p-tab-btn{
	position:relative;
	cursor:pointer;
	font-weight:600;
	font-size:20px;
	margin-left:30px;
	margin-bottom:10px;
	padding:0px 0px 8px;
	display:inline-block;
	color: var(--color-two);
	text-transform:uppercase;
	font-family: "Barlow Condensed", sans-serif;
}

.project-tab .product-tab-btns .p-tab-btn:hover,
.project-tab .product-tab-btns .p-tab-btn.active-btn{
	color: var(--main-color);
}

.project-tab{
	position:relative;
}

.project-tab .p-tabs-content{
	position:relative;
	display:block;	
	padding:0px 0px;
	overflow: hidden;
}

.project-tab .p-tab{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:auto;
	opacity:0;
	visibility:hidden;	
}

.project-tab .p-tab.active-tab{
	position:relative;
	opacity:1;
	visibility:visible;
	z-index:5;
}

.p-tab .project-block_three{
	transition:all 0.7s ease;
	-moz-transition:all 0.7s ease;
	-webkit-transition:all 0.7s ease;
	-ms-transition:all 0.7s ease;
	-o-transition:all 0.7s ease;
	-webkit-transform:scaleX(0);
	-ms-transform:scaleX(0);
	-o-transform:scaleX(0);
	-moz-transform:scaleX(0);
	transform:scaleX(0);	
}

.p-tab.active-tab .project-block_three{
	-webkit-transform:scaleX(1);
	-ms-transform:scaleX(1);
	-o-transform:scaleX(1);
	-moz-transform:scaleX(1);
	transform:scaleX(1);
}

/* Project Block Three */

.project-block_three{
	position: relative;
	margin-bottom: 30px;
}

.project-block_three-inner{
	position: relative;
	overflow: hidden;
	text-align: center;
}

.project-block_three-image{
	position: relative;
}
    .film-tarih {
        position: absolute;
        top: 15px;
        right: 15px;

        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(5px);

        color: #fff;
        padding: 6px 14px;

        font-size: 12px;
        font-weight: 500;

        border-radius: 4px;
        letter-spacing: 0.5px;
        z-index: 2;
    }
.project-block_three-image img {
	position: relative;
	width: 100%;
	display: block;
	transition: all 500ms ease;
}

.project-block_three-inner:hover .project-block_three-image img {
	transform: scale(1.04, 1.04) rotate(2deg);
}

.project-block_three-inner:hover .project-block_three-title{
	left:0px;
}

.project-block_three-content{
	position: absolute;
	inset: 0;
	z-index: 1;
}

.project-block_three-title{
	position: absolute;
	left: -90px;
	top: 0;
	bottom: 0;
	width: 70px;
	display: flex;
	font-weight: 600;
	align-items: center;
	justify-content: center;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--white-color);
	transform: rotate(180deg);
	writing-mode: vertical-rl;
	background-color: var(--main-color);
}

.project-block_three-title a {
	color: var(--white-color);
}

.project-block_three .more-project{
	position:absolute;
	right:-100px;
	bottom:30px;
	opacity:0;
	font-weight: 600;
	letter-spacing: 1px;
	padding: 11px 20px;
	display: inline-block;
	color: var(--white-color);
	text-transform: uppercase;
	background-color: var(--main-color);
	font-family: "Barlow Condensed", sans-serif;
}

.project-block_three .more-project:hover{
	color: var(--white-color);
	background-color: var(--color-three);
}

.project-block_three-inner:hover .more-project{
	opacity:1;
	right:0px;
}

.project-three .lower-box{
	position:relative;
	margin-top: 30px;
}

.project-three .lower-box .text{
	position:relative;
	font-size: 22px;
	font-weight: 500;
	padding: 18px 60px;
	border-radius: 50px;
	display: inline-block;
	color: var(--color-two);
	font-family: "Barlow Condensed", sans-serif;
	border: 1px solid rgba(var(--color-two-rgb), 0.20);
}

/*** 

====================================================================
	project Four
====================================================================

***/

.project-four{
	position:relative;
	padding: 110px 0px 110px;
}

.project-four .filters{
	position:relative;
	margin-bottom:40px;
	text-align:center;
}

.project-four .filters .filter-tabs{
	position:relative;
}

.project-four .filters li{
	position: relative;
    display: inline-block;
    color: var(--color-two);
	padding:0px 0px 10px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
	margin:0px 15px 0px;
	font-family: "Barlow Condensed", sans-serif;
}

.project-four .filters .filter.active,
.project-four .filters .filter:hover{
    color: var(--main-color);
}

.project-four .filters li:before{
	position:absolute;
	content:'';
	left:0px;
	bottom:-1px;
	height:3px;
	width:100%;
	opacity:0;
	transform: scale(0.5,1);
	background-color:var(--main-color);
	transition:all 300ms ease;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
}

.project-four .filters li:hover:before,
.project-four .filters li.active::before{
	opacity:1;
	transform: scale(1,1);
}

.project-four .button-box{
	margin-top: 10px;
}

.project-block_three.mix{
	display: none;
}

/*** 

====================================================================
	Project Detail
====================================================================

***/

.project-detail{
	position:relative;
	padding: 110px 0px 80px;
}

.project-detail_image{
	position:relative;
	margin-bottom: 40px;
}

.project-detail_image img{
	position:relative;
	width: 100%;
	display: block;
}

.project-detail .icon-box{
	position:relative;
	margin-bottom: 25px;
}

.project-detail .icon-box .inner{
	position:relative;
	padding: 40px 25px;
	text-align: center;
	background-color: var(--white-color);
	border: 1px solid rgba(var(--color-two-rgb), 0.20);
}

.project-detail .icon-box .icon{
	position:relative;
	font-size: 70px;
	line-height:1em;
	color:var(--main-color);
	font-family: "flaticon_interior";
}

.project-detail .icon-box .title{
	position:relative;
	margin: 15px 0px;
	color:var(--color-two);
}

.project-detail .social-box_outer{
	position:relative;
	margin-top: 40px;
	text-align: center;
}

.project-detail .social-box_outer .line{
	position:relative;
	height: 4px;
	width: 100%;
	opacity:0.20;
	display: block;
	margin: 7px 0px;
	background-color: var(--color-two);
}

.project-detail .social-box_outer .line:nth-child(2n + 1){
	margin:0px 50px;
	width: 92%;
}

.project-detail .social-box_outer .social-box{
	position:relative;
	top: -20px;
	padding: 0px 60px;
	margin-top: -50px;
	margin-bottom: 25px;
	display: inline-block;
	background-color: var(--white-color);
}

.project-detail .social-box_outer .social-box a{
	position:relative;
	width: 60px;
	height: 60px;
	margin:0px 5px;
	line-height:58px;
	font-size: 22px;
	display: inline-block;
	color: var(--color-two);
	border: 1px solid rgba(var(--color-two-rgb), 0.20);
}

.project-detail .social-box_outer .social-box a:hover{
	color: var(--white-color);
	border-color: var(--main-color);
	background-color: var(--main-color);
}

.project-detail_title{
	position:relative;
	margin-bottom: 25px;
}

.project-detail_subtitle{
	position:relative;
	margin-bottom: 15px;
}

.feature-list{
	position:relative;
	margin-bottom: 30px;
}

.feature-list_inner{
	position:relative;
	font-size: 18px;
	line-height: 28px;
	padding-left: 80px;
	color: var(--color-three);
}

.feature-list_inner .icon{
	position:absolute;
	left:0px;
	top:5px;
	font-size: 60px;
	line-height:1em;
	color: var(--main-color);
	font-family: "flaticon_interior";
}

.feature-list_inner strong{
	position:relative;
	display: block;
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 12px;
	color: var(--black-color);
	text-transform: capitalize;
	font-family: "Barlow Condensed", sans-serif;
}