/*------------------------------------------------------------------------
# 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: #b19777;
--mxt-primary-rgb: 221, 4, 41;
--mxt-black: #333333;
--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;
}


.serv-four .item {
  padding: 50px 30px;
  position: relative;
  background-repeat: no-repeat;
background-size: cover;
background-attachment: scroll;
background-position: 0 0;
z-index: 2;
}

.serv-four .item a {
  color:  var(--mxt-primary);
}
.serv-four .item a.main-color{
  color:  var(--mxt-black);
}
.serv-four .icon-wrapper {
  font-size: 60px;
  line-height: 60px;
  font-weight: 700;
  float: right;
  color: transparent;
  -webkit-text-stroke: 1px  var(--mxt-primary);
  margin-top: -20px;
}

.serv-four .item:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:  var(--mxt-base);
  border: 1px solid  var(--mxt-bdr-color);
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  transition: all .4s;
  z-index: -1;
}

.serv-four .item.active:after {
  opacity: .85;
}

.serv-four .item:hover:after {
  opacity: .75;
}

.serv-four .item:hover p {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

.serv-four .item .numb {
  font-size: 60px;
  font-weight: 700;
  margin-bottom: 10px;
  color:  #515151;
}

.serv-four .item .numb img{
  width: 90px;
  height: 90px;
}

.serv-four .item h5 {
  text-transform: uppercase;
  letter-spacing: 1px;
  color:  var(--mxt-primary);
}

.serv-four .item p {
  margin-top: 20px;
  opacity: 0;
  -webkit-transform: translateY(30px);
  -ms-transform: translateY(30px);
  transform: translateY(30px);
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  transition: all .4s;
}

.serv-four .item .more {
  margin-top: 50px;
}