/*------------------------------------------------------------------------
# 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 {

--mxt-primary: #dd0429;
--mxt-primary-rgb: 221, 4, 41;
--mxt-black: #17161a;
--mxt-black-rgb: 23, 22, 26;
--mxt-base: #ffffff;
--mxt-base-rgb: 255, 255, 255;
--mxt-extra: #f6f6f6;
--mxt-extra-rgb: 246, 246, 246;
--mxt-bdr-color: #e3e3e3;
--mxt-bdr-color-rgb: 227, 227, 227;
}

.iconmx-mxt.hover-overlay-effect {
position: relative;
z-index: 1;
overflow: hidden;
}
.iconmx-mxt.style-1 {
font-size: 16px;
background-color: #fff;
box-shadow: 0px 26px 40px rgba(38, 58, 126, 0.14);
padding: 45px 40px;
-webkit-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
.iconmx-mxt {
position: relative;
z-index: 1;
overflow: hidden;
padding: 25px 20px;
text-align: center !important;
}
.shadow-none {
box-shadow: unset;
}

.iconmx-md {
display: inline-block;
text-align: center;
font-size: 65px;
}
.iconmx-md img{
  width: 90px;
  height: 90px;
}
.iconmx-mxt.hover-overlay-effect .title, .iconmx-mxt.hover-overlay-effect .title a {
  line-height: 1.5;
  font-weight: 700; 
  margin-top: 15px;
  font-size: 20px;
 font-family: Arial,Helvetica,Verdana,sans-serif;
  color: var(--mxt-primary);
  -webkit-transition: all 0.8s;
  -ms-transition: all 0.8s;
  transition: all 0.8s;
}

.iconmx-content span{
 font-family: Arial,Helvetica,Verdana,sans-serif;
  line-height: 1.5;}

.iconmx-mxt.style-1 {
font-size: 16px;
background-color: #fff;
box-shadow: 0px 26px 40px rgba(38, 58, 126, 0.14);
border-radius: 10px;
padding: 45px 40px;
-webkit-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s; }
.iconmx-mxt.style-1.box-sm {
padding: 25px 20px; }
@media only screen and (max-width: 1400px) {
.iconmx-mxt.style-1 {
padding: 40px 25px; } }
@media only screen and (max-width: 575px) {
.iconmx-mxt.style-1 {
padding: 30px 25px;
box-shadow: 0px 0px 40px rgba(38, 58, 126, 0.14); } }
.iconmx-mxt.hover-overlay-effect {
position: relative;
z-index: 1;
overflow: hidden; }

.iconmx-mxt.hover-overlay-effect:hover {
color: #fff; }
.iconmx-mxt.hover-overlay-effect:hover .text-effect-1 .char:after,
.iconmx-mxt.hover-overlay-effect:hover .text-effect-1 .char:before {
color: #fff; }
.iconmx-mxt.hover-overlay-effect:hover .text-primary {
color: #fff !important; }
.iconmx-mxt.hover-overlay-effect:hover .btn-outline-primary {
color: #fff;
border-color: #fff; }

.iconmx-mxt.hover-overlay-effect:hover .title, .iconmx-mxt.hover-overlay-effect:hover .title a {
color: #fff; }

.bg-primary {
  background-color: var(--mxt-primary) !important;
}
.iconmx-mxt.style-1 .box-img {
 position:absolute;
 top:-100px;
 right:10px;
 max-width: 120px;
 height: 120px;
 opacity: 0;
 border-radius:0px;
  transition: all 1000ms ease;
 z-index:0
}

.iconmx-mxt.style-1:hover .box-img {
 position:absolute;
 top:10px;
 right:10px;
 left:auto;
 width: 120px;
 height: 120px;
 border-radius:50%;
 opacity: 1;
 z-index:0
}
.iconmx-mxt.style-1 .box-img img {
 max-width: 120px;
 height: 120px;
 border-radius: 50%;
 -webkit-transition:0.4s ease-in-out;
 transition:0.4s ease-in-out
}

.hover-overlay-effect:hover::before {
width: 300%;
height: 1200px;
}

.hover-overlay-effect::before {
 content:"";
 position:absolute;
 top:var(--y);
 left:var(--x);
 transform:translate(-50%, -50%);
 width:0;
 height:0;
 border-radius:100%;
 background-color:var(--mxt-primary);
 transition:all .7s ease;
 z-index:-1
}