.service-box5{
position: relative;
float: left;
overflow: hidden;
perspective:1000px;
-webkit-perspective:1000px;
width: 100%;
border: 1px solid #f1f1f1;
padding: 20px;
}
.service-icon{
text-align: center;
transition: all .5s ease;
  display: flex;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}  


.service-content{
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
padding: 20px;
height: 100%;
text-align: center;
transition: all .5s ease;
background-color: #fff;
backface-visibility:hidden;
transform-style: preserve-3d;
-webkit-transform: translateY(110px) rotateX(-90deg);
-moz-transform: translateY(110px) rotateX(-90deg);
-ms-transform: translateY(110px) rotateX(-90deg);
-o-transform: translateY(110px) rotateX(-90deg);
transform: translateY(110px) rotateX(-90deg);
  margin: 0 auto;
  justify-content: center;
  align-items: center;
display: grid;
}
.service-box5 .service-icon .front-content{
position: relative;
top:50px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.service-box5 .service-icon .front-content i{
font-size: 65px;
}

.service-box5 .service-icon .front-content img {
margin-bottom: 5px;
margin-top: 20px;
display: initial;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
height: 100px;
width: 100px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 3px rgba(0,0,0,0.2);
box-shadow: 0 0 3px rgba(0,0,0,0.2);
}

.service-box5 .service-icon .front-content h3 {
font-size: 24px;
text-align: center;
background: transparent;
margin-top: 15px;
margin-bottom: 15px;
text-transform: uppercase;
}
.service-box5 .service-content h3 {
font-size: 24px;
background: transparent;
color: #222;
margin-bottom:15px;
margin-top: 15px;
}
.service-box5 .service-content p {
margin:0;
margin-bottom:10px;
}

.service-box5:hover .service-icon{
opacity: 0;
-webkit-transform: translateY(-110px) rotateX(90deg);
-moz-transform: translateY(-110px) rotateX(90deg);
-ms-transform: translateY(-110px) rotateX(90deg);
-o-transform: translateY(-110px) rotateX(90deg);
transform: translateY(-110px) rotateX(90deg);
}
.service-box5:hover .service-content {
opacity: 1;
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
}  
.service-box5 .btn-readmore{
padding: 6px 25px;
font-size: 13px;
color: #ccc;
border: 1px solid #ccc;
-webkit-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
}

.service-box5 .mil-button {
 cursor:pointer;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border:none;
 letter-spacing:2px;
 font-size:12px;
 background-color:#ff9800;
 color:#000;
 border-radius:70px;
 padding:0 5px 0 30px;
 height:54px;
 text-transform:uppercase;
 font-weight:500;
 transition:.4s cubic-bezier(0,0,.3642,1)
}
.service-box5 a.mil-button:hover,.service-box5  .mil-button:hover {
  color: #fff;
}
.service-box5 .mil-button span {
 white-space:nowrap
}
.service-box5 .mil-button svg {
 margin-left:10px;
 border-radius:50%;
 width:40px;
 height:40px;
 padding:10px;
 background-color:#fff;
 transition:.4s cubic-bezier(0,0,.3642,1)
}
.service-box5 .mil-button svg path {
 fill:#ff9800
}
.service-box5 .mil-button.mil-icon-button {
 padding:15px
}
.service-box5 .mil-button.mil-icon-button svg {
 margin-left:0
}
.service-box5 .mil-button.mil-icon-button-sm {
 padding:0;
 height:40px
}
.service-box5 .mil-button.mil-icon-button-sm svg {
 margin-left:0;
 background-color:#ff9800
}
.service-box5 .mil-button.mil-icon-button-sm svg path {
 fill:#000
}
.service-box5 .mil-button:hover {
 transform:scale(1.015);
 filter:brightness(110%)
}
.service-box5 .mil-button:hover svg {
 transform:scale(1.15)
}
.service-box5 .mil-button.mil-arrow-down svg {
 transform:rotate(90deg)
}
.service-box5 .mil-button.mil-arrow-down:hover {
 transform:scale(1.015);
 filter:brightness(110%)
}
.service-box5 .mil-button.mil-arrow-down:hover svg {
 transform:scale(1.15) rotate(90deg)
}
@media screen and (max-width:992px) {
.service-box5  .mil-button {
  height:60px;
  padding:0 10px 0 40px
 }
.service-box5  .mil-button svg {
  margin-left:25px
 }
}