/*------------------------------------------------------------------------
# mod_mx_services Extension
# ------------------------------------------------------------------------
# author    mixwebtemplates
# Copyright (C) 2020 mixwebtemplates.com. All Rights Reserved.
# @license - http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Websites: http://www.mixwebtemplates.com
-------------------------------------------------------------------------*/
:root {
 --mxte-color: #E81C2E;
 --title-color: #161921;
 --body-color: #74787C;
 --smoke-color: #F5F5F5;
 --black-color: #000000;
 --white-color: #ffffff;
 --light-color: #8b8e95;
 --yellow-color: #fec624;
 --success-color: #28a745;
 --error-color: #dc3545;
 --border-color: #E0E0E0;
}
.service-box {
 background-color:var(--smoke-color);
 position:relative
}
.service-box_img {
 overflow:hidden
}
.service-box_img img {
 width:100%;
 -webkit-transition:0.4s ease;
 transition:0.4s ease
}
.service-box_icon {
 width:100px;
 height:100px;
 line-height:100px;
 font-size: 50px;
 background-color:var(--white-color);
 text-align:center
}
.service-box_icon  img{
 width:100px;
 height:100px;
}
.service-box_content {
 background-color:var(--mxte-color);
 width:calc(100% - var(--icon-size, 100px));
 position:absolute;
 bottom:80px;
 -webkit-transition:0.4s ease;
 transition:0.4s ease;
 right:0;
 max-height:var(--icon-size, 100px);
 padding:30px;
 overflow:hidden
}
.service-box_title,
.service-box_number,
.service-box_text {
 color:var(--white-color)
}
.service-box_title {
 font-size:24px;
 margin-bottom:-0.45em;
 font-weight:600
}
.service-box_title a {
 color:inherit
}
.service-box_number {
 position: absolute;
 left: 2px;
 top: -10px;
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, .5);
font-size: 45px;
line-height: 60px;
font-weight: 700;
}
.service-box_text {
 margin-top:18px;
 margin-bottom:-0.5em;
 -webkit-transition:0.4s ease;
 transition:0.4s ease;
 -webkit-transform:translateY(40px);
 -ms-transform:translateY(40px);
 transform:translateY(40px)
}
.service-box_btn {
 display:block;
 overflow:hidden;
 color:var(--title-color);
 font-weight:bold;
 text-transform:uppercase;
 padding:27px 30px;
 height:80px
}
.service-box_btn i {
 margin-left:5px
}
.service-box_btn:hover {
 color:var(--mxte-color)
}
.service-box:hover .service-box_content {
 max-height:100%
}
.service-box:hover .service-box_text {
 -webkit-transform:translateY(0);
 -ms-transform:translateY(0);
 transform:translateY(0)
}
.service-box:hover .service-box_img img {
 -webkit-transform:scale(1.1);
 -ms-transform:scale(1.1);
 transform:scale(1.1)
}