@charset "utf-8";
/**/
.followus-sec  { width: 100%; padding: 100px 0; } 
.followheading { text-align: center; margin: 0 0 20px; }
.followheading h4 { font-size: 21px; margin: 0 0 10px; font-weight: 400; }
.folowmaincol { display: inline-block; width: 100%; position: relative; border: 2px solid #FFFFFF; transition: all .5s; margin: 10px 0 20px; } 
.folowmaincol:before { content: ''; width: 100%; height: 100%; background: #0c0c0c; left: 0; right: 0; top: 0; bottom: 0; position: absolute; opacity: 0; z-index: 1; }
.follwoimg { width:100%; display:block; position: relative; overflow: hidden; }
.follwoimg:before {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 10px solid #1B6D74; filter: blur(8px); opacity: 0; transition: all .5s; z-index: 3;}
.follwoimg .img-fluid { width: 100%; height: 100%; object-fit: cover; } 
.followdetails { position: absolute; bottom: 0; top: 0; left: 0; right: 0; padding: 20px; transform: translateY(50px); transition: all .5s; opacity: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; z-index:2; text-align:center; } 
.commentlikebox { display: flex; align-items: center; align-content: center; justify-content: center; margin: 0 0 15px; }
.commentlikebox .btn { margin: 0 10px; padding: 0; color: #fff; font-size: 15px; border: none; border-radius: 0; } 
.commentlikebox .btn svg { width: 20px; height: 20px; fill: #ffffff; margin-right: 5px; }
.followdata p { font-size: 13px; font-family: "Open Sans", sans-serif; margin: 0 0 10px; }
.folowmaincol:hover { box-shadow: 0px 0px 13px #48FDFF; border-width: 4px; }
.folowmaincol:hover:before { opacity: 0.86; }
.folowmaincol:hover .follwoimg:before { opacity: 1; }
.folowmaincol:hover .followdetails { opacity: 1; transform: translateY(0px);}



/*-------------------------------- Responsive Media Query --------------------------------*/
@media (max-width: 991px){
.followus-sec { padding: 50px 0; }
.followheading .img-fluid { max-width: 450px; }

}


@media (max-width: 767px){
.followheading .img-fluid { max-width: 380px; }

}


@media (max-width: 480px){
.followheading .img-fluid { max-width: 100%; }

}