/* ************3.3 features section*****************************************/
 .feat-title{
    color: var(--black-color);
    
}
.features{
    margin-top: 160px;
    padding-top: 100px;
    background-color: var(--f9-bg-color);

}

.feat .feat-item img{ 
width: 100%;
height: 300px;
z-index: -1;
}

.feat-item{
position: relative;

}
.layer-content{
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
z-index: 5;
visibility: hidden;
opacity: 0;
transition: 0.6s;


}
.feat-item:hover .layer-content{
opacity: 1;
visibility: visible;
top:0;

}
.layer-content .layer-info {
position: absolute;
top:60%;
left:25%;
transition: translate(-50%,-50%);
text-align: center;
width: 50%;

}
.layer-content a{
color: var(--white-color);
background-color: var(--main-color);
padding: 20px 0;
padding: 10px 25px;
}
/*=======================================
    media query for features
=========================================*/
@media  (min-width:300px){  


}
  

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px){ 
  
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 

}


/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px){  
  
}