/*------------------------------------------------------------------------
# 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 {
 --mxtx25-color:#f0401b;
 --mxsmo25-color:#f8f8f8;
}
.mx-serv25 {
 position:relative
}
.mx-serv25_content {
 -webkit-box-shadow:0 15px 20px 0 rgba(196,196,196,.3);
 box-shadow:0 15px 20px 0 rgba(196,196,196,.3);
 background-color:#fff;
 border-radius:25px;
 text-align:center;
 padding:55px 30px;
 position:relative;
 overflow:hidden;
 z-index:2;
 padding-bottom:107px;
 margin-bottom:104px;
 -webkit-transition:.4s ease-in-out;
 transition:.4s ease-in-out
}
.mx-serv25_content:before {
 content:"";
 height:100%;
 width:0;
 background-color:var(--mxtx25-color);
 position:absolute;
 top:0;
 left:0;
 z-index:-3;
 opacity:0;
 visibility:hidden;
 -webkit-transition:.4s ease-in-out;
 transition:.4s ease-in-out;
 border-radius:inherit;
 overflow:hidden
}
.mx-serv25_shape {
 position:absolute;
 top:-400%;
 opacity:0;
 left:0;
 z-index: 0;
 -webkit-transition:.4s ease;
 transition:.4s ease
}

.mx-serv25_icon {
 --icon-size:142px;
 position:absolute;
 bottom:-90px;
 left:50%;
 -webkit-transform:translateX(-50%);
 transform:translateX(-50%);
 width:var(--icon-size);
 height:var(--icon-size);
 line-height:var(--icon-size);
 background-color:#fff;
 text-align:center;
 border-radius:50%;
 border:19px solid var(--mxsmo25-color);
 -webkit-box-sizing:content-box;
 box-sizing:content-box;
 z-index:2
}

.mx-serv25_icon img {
 text-align:center;
 border-radius:50%;
 position: relative;
 z-index: 5
}
.mx-serv25_icon:before {
 content:"";
 width:100%;
 height:100%;
 background-color:var(--mxtx25-color);
 position:absolute;
 top:0;
 left:0;
 z-index:-1;
 opacity:0;
 visibility:hidden;
 -webkit-transition:.4s ease-in-out;
 transition:.4s ease-in-out;
 border-radius:inherit;
 overflow:hidden;
 -webkit-transform:scale(.6);
 transform:scale(.6)
}
.mx-serv25_icon i {
 font-size: 60px
}
.mx-serv25_title,
.mx-serv25_title a {
 color:#222;
 font-size:24px
}
.mx-serv25:hover {
 color:#fff
}
.mx-serv25:hover .mx-serv25_content:before {
 visibility:visible;
 opacity:1;
 z-index: -3;
 width:100%
}
.mx-serv25:hover .mx-serv25_shape {
 top:0;
 z-index: -2;
 opacity:0.3;
}

.mx-serv25_shape img {
 min-height:350px;
 width:100%;
 object-fit:cover;
 transform:scale(1);
 transition:all 0.3s ease
}

.mx-serv25:hover .mx-serv25_text,
.mx-serv25:hover .mx-serv25_title,
.mx-serv25:hover .mx-serv25_title a {
 color:#fff
}

.mx-serv25:hover .mx-serv25_icon:before {
 opacity:1;
 visibility:visible;
 -webkit-transform:scale(1);
 transform:scale(1)
}