/*------------------------------------------------------------------------
# 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 {
  --mxcolor-main: #e40013;
 --transition: all 0.5s ease-in-out;
 --p1: 249, 93, 0;
 --p2: 9, 9, 8;
 --s1: 255, 255, 255;
 --s2: 58, 56, 54;
 --s3: 40, 40, 40;

}
.d-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box-style {
  position: relative;
  overflow: hidden;
  z-index: 0;
  text-align: center;
}
.rounded-circle {
  border-radius: 50% !important;
}
.text-center {
  text-align: center !important;
}
.mx-span1{
  text-align: center !important;
  font-size: 20px;
}
.display-one, .display-two, .display-three, .display-four, .display-five {
  color: rgba(var(--s1), 1);
  font-weight: 800;
  padding: 0;
  margin: 0;
  line-height: 120%;
  display: block;
  transition: var(--transition);
}
.display-two {
  font-size: 96px;
}
.box-style.box-third i {
 transition:var(--transition)
}
.box-style.box-third:hover i {
 transform:rotateY(180deg)
}

.box-style.box-third.fourth-alt {
 background-color:rgba(var(--s3, 1));
 border-color:rgba(var(--s2, 1));
width: 250px;
min-width: 250px;
height: 250px;
}
.box-style.box-third.fourth-alt.second {
 background-color:rgba(0,0,0,0);
 border:1px solid var(--mxcolor-main)
}

.box-style.box-third.fourth-alt.second span {
 color:rgba(var(--p2, 1))
}
.fs-sixod {
 width:80%;
}
.box-style:hover::before {
 width:400%;
 height:400%
}
.box-style .icon {
 width:48px;
 min-width:48px;
 height:48px;
 background-color:rgba(var(--p2), 0.1)
}
.box-style::before {
 content:"";
 position:absolute;
 top:var(--y);
 left:var(--x);
 transform:translate(-50%, -50%);
 width:0;
 height:0;
 border-radius:100%;
 background-color:var(--mxcolor-main);
 transition:all .7s ease;
 z-index:-1
}

.box-style.box-third.fourth-alt span {
 color:rgba(var(--s1, 1))
}
.box-style.box-third.fourth-alt:hover {
 border-color:var(--mxcolor-main)
}
.box-style.box-third.fourth-alt:hover span {
 color:rgba(var(--s1), 1)
}
.box-style.box-third.fourth-alt::before {
 background-color:var(--mxcolor-main)
}
.mx-odo-style-8-icon{
	position: relative;
	margin: 0 auto;
	padding: 0px 40px
}
.mx-odo-style-8-icon i img{
	position: relative;
	width: 100px;
	height: 96px;
	border-radius: 50%;
}