✏️ Editing: services.css Writable

/* ---------------------------------------------------------
  # Services
------------------------------------------------------------ */
.tx-services-item {
  border-radius: 3px;
  text-align: center;
  margin-bottom: 50px;
  transition: all 240ms linear 0ms;
  position: relative;
}
.tx-services-content {
  padding: 35px 25px;
  box-shadow: 0 8px 16px rgba(208, 208, 208, 0.25);
}

.tx-services-item:hover {
  box-shadow: 0 16px 32px rgba(208, 208, 208, 0.8); 
}
.tx-services-featured {
  position: relative;
}
.tx-services-featured a:before  {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.7);
    transition: all .3s;
    opacity: 0;
    border-radius: 3px;
}
.tx-services-featured a:after {
    content: '\f64d';
    font-family: 'bootstrap-icons';
    transform: scale(0);
    font-size: 40px;
    color: #fff;
    position: absolute;
    top: 40%;
    left: 42%;
    opacity: 0;
    transition: all .7s;

}
.tx-services-item:hover .tx-services-featured a:after {
  transform: scale(1);
}

.tx-services-item:hover .tx-services-featured a:before,
.tx-services-item:hover .tx-services-featured a:after {
  opacity: 1;
}
.tx-services-featured img {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.tx-services-title a:hover {
  color: #AEDB49;
}
.tx-services-excp {
  line-height: 1.8;
/*  padding-top: 20px;*/
}
.tx-serv-cat {
    border: 1px solid;
    border-radius: 3px;
    padding: 3px 8px;
    text-transform: uppercase;
    font-size: 80%;
    opacity: 0;
    transition: all .5s;
    color: #AEDB49;
    position: relative;
}
.tx-services-overlay-item .tx-serv-cat {
  top: 10px;
}
.tx-services-overlay-item .tx-serv-cat {
  transition: all .5s;
  margin-left: -100px;
}
.tx-services-overlay-item:hover .tx-serv-cat {
  opacity: 1;
  margin-left: 0;
}
.tx-serv-cat:hover {
  color: #8CC63F;
}
.tx-services-item:hover .tx-serv-cat {
  opacity: 1;
}

/*overlay style*/
.tx-services-overlay-item {
  background-size: cover;
  background-position: center center;
  overflow: hidden;
  margin-bottom: 50px;
  position: relative;
}
.tx-services-overlay-item:before {
    content: "";
    position: absolute;
    background-color: rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all .3s;
    left:0;
}
.tx-services-overlay-item:hover:before {
  opacity: 1;
}
.tx-services-overlay-item .tx-services-content {
  padding: 20px;
}
.tx-services-overlay-item .tx-services-excp {
  opacity: 0;
  transform: scale(0);
  transition: all .5s;
  color: white;
  padding: 50px 0;
}
.tx-services-overlay-item:hover .tx-services-excp {
  transform: scale(1);
  opacity: 1;
}
.tx-services-title-holder {
  background-color: rgba(0,0,0,0.3);
  padding: 15px;
  position: relative;
}
.tx-services-overlay-item .tx-services-title {
  color: #fff;
}
.tx-services-overlay-item .tx-services-title:hover {
  color: #AEDB49;
}
.tx-services-overlay-item i {
  font-size: 50px;
  color: white;
  position: relative;
  opacity: 0;
  transition: all .6s;
  left: -100px;
}
.tx-services-overlay-item:hover i {
  opacity: 1;
  left: 0;
  
}
.tx-services-overlay-item i:hover {
  color: #AEDB49;
}
/*service single*/
.service-image {
    margin-bottom: 40px;
}
.brochure-file {
    margin: 30px 0;
}
.btn-brochure {
    background-color: #AEDB49;
    color: #fff;
    padding: 8px 16px;
    font-weight: 600;
    letter-spacing: .5px;
}
.btn-brochure:hover {
  background-color: #8CC63F;
  color: #fff;
}

🔐 Sid Gifari File Manager Pro