/*------------------------------------------------------------------------
# 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 {
  --mxtx35-color: #e77829;
}

.mainserv35 {
 transition:0.3s;
 box-shadow:0px 3px 10px 0px rgba(41,45,194,0.08);
 position:relative;
 margin-top: 8rem;
 background-size: 100%;
 height:100%
}
.mainserv35 a {
 color:var(--mxtx35-color);
 }
.mainserv35:before {
 content:'';
 background:rgba(0,0,0,0.5);
 height:100%;
 width:100%;
 position:absolute;
 left:0;
 top:0;
 opacity:0
}
.mainserv35:hover:before {
 opacity:1
}
.mainserv35:hover .card-body {
 background-color:rgba(0,0,0,0.4)
}
.mainserv35:hover h3,
.mainserv35:hover p,
.mainserv35:hover a,
.mainserv35:hover .card-footer i {
 color:#fff
}
.mainserv35 .card-body {
 background-color:#fff;
 position: relative;
 z-index: 3;
 text-align: center !important;
 padding: 1.9rem;
 width:100%;
 height:100%;
 transition:all 0.5s
}
.mainserv35 .card-footer {
 background-color: #fff;
text-align: center !important;
padding: 1rem 1.9rem !important;
border-top-color: #eee;
justify-content: space-between !important;
align-items: center !important;
position: relative !important;
display: flex !important;
}
.mainserv35:hover .card-footer {
 background-color:rgba(0,0,0,0.4);
 border-top-color:rgba(255,255,255,0.2)
}
.mainserv35:hover .card-icon {
 -webkit-transform:translateY(-10px) translate3d(0, -10px, 0);
 -moz-transform:translateY(-10px) translate3d(0, -10px, 0);
 -ms-transform:translateY(-10px) translate3d(0, -10px, 0);
 transform:translateY(-10px) translate3d(0, -10px, 0);
 background:#ecba16
}
.mainserv35 .card-icon {
 width:110px;
 height:110px;
 text-align:center;
 background:var(--mxtx35-color);
 line-height:110px;
 margin:-100px auto 20px auto;
 backface-visibility:hidden;
 -webkit-transform:translate3d(0, 0, 0);
 -moz-transform:translate3d(0, 0, 0);
 -ms-transform:translate3d(0, 0, 0);
 -o-transform:translate3d(0, 0, 0);
 transform:translate3d(0, 0, 0);
 -webkit-transition:transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
 -moz-transition:transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
 -ms-transition:transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
 -o-transition:transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
 transition:transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18)
}
.mainserv35 .card-icon i {
 color: #fff;
 padding-top:10px;
 font-size: 70px
} 
.mainserv35 .mx-txt {
margin-top: 4rem;
}
.mainserv35 .card-border {
 position:relative
}
.mainserv35 .card-border::before {
 position:absolute;
 content:"";
 background:#eee;
 width:1px;
 height:45px;
 top:10%;
 transition:0.3s
}
.mainserv35 .card-border::after {
 position:absolute;
 content:"";
 background:#eee;
 width:1px;
 height:45px;
 transition:0.3s;
 bottom:30px;
 opacity:0;
 transition:0.3s
}
.mainserv35:hover .card-border::after {
 background:#ecba16;
 opacity:1;
 bottom:-45px;
 transition:0.3s
}