.project-section{
position: relative;
}

.project-section .outer-container{
padding: 0px 30px;
}

.project-block-one .inner-box{
position: relative;
display: block;
overflow: hidden;
}

.project-block-one .inner-box .image-box{
position: relative;
display: block;
overflow: hidden;
background: #000;
}

.project-block-one .inner-box .image-box img{
width: 100%;
transition: all 500ms ease;
}

.project-block-one .inner-box:hover .image-box img{
opacity: 0.3;
transform: scale(1.05);
}

.project-block-one .inner-box .overlay-content{
position: absolute;
display: flex;
left: 0px;
top: 0px;
right: 0px;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
z-index: 1;
}

.project-block-one .inner-box .overlay-content .view-btn a{
position: relative;
display: inline-block;
font-size: 50px;
line-height: 50px;
color: #fff;
margin-bottom: 40px;
transform: scale(0,0);
}

.project-block-one .inner-box .overlay-content .view-btn a:hover{

}

.project-block-one .inner-box:hover .overlay-content .view-btn a{
transform: scale(1,1);
}

.project-block-one .inner-box .overlay-content .text span{
position: relative;
display: block;
font-size: 16px;
line-height: 24px;
font-family: 'DM Sans', sans-serif;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 5px;
}

.project-block-one .inner-box .overlay-content .text h3{
display: block;
font-size: 22px;
line-height: 30px;
font-weight: 600;
}

.project-block-one .inner-box .overlay-content .text h3 a{
display: inline-block;
color: #fff;
}

.project-block-one .inner-box .overlay-content .text h3 a:hover{

}

.project-block-one .inner-box .overlay-content .text{
position: relative;
top: 15px;
opacity: 0;
transition: all 500ms ease;
}

.project-block-one .inner-box:hover .overlay-content .text{
top: 0px;
opacity: 1;
}

/** project-style-two **/

.project-style-two{
position: relative;
}

.project-style-two .project-block-one .inner-box{
border-radius: 30px;
margin-bottom: 30px;
}

.project-style-two .filter-tabs li{
position: relative;
display: inline-block;
font-size: 16px;
line-height: 28px;
font-weight: 600;
color: #000;
text-transform: uppercase;
cursor: pointer;
margin: 0px 13px;
transition: all 500ms ease;
}

.project-style-two .filter-tabs li.active,
.project-style-two .filter-tabs li:hover{

}

.project-style-two .filter-tabs li:before{
position: absolute;
content: '';
width: 0%;
height: 2px;
left: 0px;
bottom: 0px;
transition: all 500ms ease;
}

.project-style-two .filter-tabs li.active:before,
.project-style-two .filter-tabs li:hover:before{
width: 100%;
}

.project-style-two.two-columns .project-block-one .inner-box .image-box{
border-radius: 30px;
}

.project-style-two.two-columns .project-block-one .inner-box{
margin-bottom: 70px;
overflow: visible;
}

.project-block-one .inner-box .content-box{
position: relative;
display: block;
margin: 0px 50px;
margin-top: 2px;
padding: 20px 0px 0px 10px;
text-align: left;
z-index: 1;
}

.project-block-one .inner-box .content-box .shape{
position: absolute;
left: -60px;
top: -40px;
width: 650px;
height: 269px;
background-repeat: no-repeat;
}

.project-block-one .inner-box .content-box .text span{
position: relative;
display: block;
font-size: 16px;
line-height: 22px;
font-family: 'DM Sans', sans-serif;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 7px;
}

.project-block-one .inner-box .content-box .text h3{
display: block;
font-size: 22px;
line-height: 30px;
font-weight: 600;
}

.project-block-one .inner-box .content-box .text h3 a{
display: inline-block;
color: #000;
}

.project-block-one .inner-box .content-box .text h3 a:hover{

}

.project-block-one .inner-box .content-box .view-btn{
position: absolute;
top: 65px;
right: 40px;
z-index: 2;
}

.project-block-one .inner-box .content-box .view-btn a{
position: relative;
display: inline-block;
font-size: 40px;
line-height: 40px;
color: #000;
font-weight: 700;
}

.project-block-one .inner-box .content-box .view-btn a:hover{

}