.service-three-col {
  padding: 90px 0px 140px;
}
.service-three-col .heading {
  max-width: 650px;
}

.service-three-col .box .main-box{
  background: #F2F2F2;
  border-radius: 8px;
  margin-top: 50px;overflow: hidden;
  padding: 30px;transition: .4s;}
.service-three-col .box{display:flex;}
.service-three-col .main-box .content-bar{transform: translateY(157px);transition: .7s;}
.service-three-col .box .main-box:hover .content-bar{transform: translateY(0px);}
.service-three-col .box .main-box:hover .icon-box svg{fill: #ffffff;} 
.service-three-col .box .main-box:hover .text-box h4{color:#ffffff;}
.service-three-col .box .main-box:hover .text-box p {opacity: 2;}
.service-three-col .box .main-box:hover .text-box a {opacity: 2;}
.service-three-col .icon-box svg{width: 30px;height: 30px;fill: #3DD37B;margin-bottom:12px;transition: .4s;}
.service-three-col .text-box h4{
  transition: .4s;
  margin-bottom: 20px;}
.service-three-col .text-box p{
  color:#fff;
  opacity: 0;transition: .7s; overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* number of lines to show */
  line-clamp: 3; 
  -webkit-box-orient: vertical;}

.service-three-col .text-box a{font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  margin-top: 35px;opacity: 0;transition: .7s;line-height:1;}
.service-three-col .text-box a svg{
  width: 13px;
  height: 13px;
  fill: #ffffff;
  margin-left: 6px;
}


@media(max-width:767.98px){
  .service-three-col {padding: 50px 0px;}
}
@media(max-width:575.98px){
  .service-three-col .main-box .content-bar {transform: translateY(120px);
  }
  @media(max-width:425.98px){
    .service-three-col .main-box .content-bar {transform: translateY(157px);}