.project_list { margin: 40px -35px 0;display: inline-block;}
.project_list li { width: 33.3%; float: left; display: flex; flex-wrap: wrap; padding: 0 35px; margin-bottom: 70px;}
a.proj_box{  position: relative; overflow: hidden;}
.proj_tit { position: absolute; bottom: 26px;z-index: 2; font-size: 30px; font-weight: 500; color: #fff; right: 45px; text-transform: capitalize;transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;}
.proj_img { position: relative; overflow: hidden;}
.proj_img:after { position: absolute; content: ""; background: rgb(10 100 203);
    bottom: 0;
    left: -7px;
    right: 0;
    height: auto;
    width: 250%;
    z-index: 1;
    height: 90px;
    transform: rotate(-4deg);transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;}
a.proj_box:after { position: absolute; content: ""; background: rgb(0 0 0 / 71%); width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; opacity: 0;transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;}
a.proj_box:before { position: absolute; content: ""; background: url(../images/hover_icon.png); width: 50px; height: 50px; left: 0; right: 0; top: 0; bottom: 0; opacity: 0; margin: auto;    z-index: 1;transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;}
a.proj_box:hover:after, a.proj_box:hover:before { opacity: 1;}

.projectpage .commn_blk { padding-bottom: 20px;}


/* Responsive */

@media (max-width: 1366px) {
    .proj_tit { font-size: 24px;}

}
@media (max-width: 1199px) {
    .project_list li { padding: 0 15px;margin-bottom: 30px;}
   .project_list {margin: 40px -15px 0;}
}
@media (max-width:991px) {
     .project_list li { padding: 0 7px;margin-bottom: 14px;}
   .project_list {margin: 25px -7px 0;}
    .proj_tit { bottom: 13px;font-size: 18px; }
    .proj_img::after { height: 60px;}
}


@media (max-width:575px) { 
    .proj_tit { position: relative;
bottom: 0;
text-align: center;
background: rgb(10 100 203);
width: 100%;padding: 10px 0;font-size: 15px;
display: inline-block;
right: 0;}
    
    .proj_img::after { content: none; }
    .project_list li {
        width: 50%;}
}