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


.mx-services31 {
	transition: .3s;
    background: #fff;
    position: relative;
    display: flex;
	min-height: 250px;
	border: 1px solid  rgba(0, 0, 0, 0.06);;
}
.mx-services31 .feature-img {
  width: 100%;
}
.feature-img  img{
  width: 100%;
}
.mx-services31 .services-icon {
position: absolute;
  left: 40px;
  top: 40px;
  z-index: 1;
}

.mx-services31 .services-icon i{
position: absolute;
  font-size: 80px
}
.services-number {
position: absolute;
  top: 3px;
  right: 40px;
  z-index: 1;
  font-size: 120px;
  font-weight: 500;
  -webkit-text-stroke: 1px #00000017;
  -webkit-text-fill-color: transparent;
}
.services-number-hover{
    color: #fff;
      -webkit-text-stroke: 1px #fff;
  -webkit-text-fill-color: #fff;
     z-index: 2;
}
.h-service {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transition: .3s cubic-bezier(.24,.74,.58,1);
  transform: scaleY(1);
}
.h-service-inner{
  position: absolute;
  bottom: 0;
  padding: 20px;
}
.h-service a{
    color: #111;
}
.h-service h5 {
    font-size: 36px;
    font-weight: 600;
}
.mx-services31:hover .h-service,.mx-services31.active .h-service{
transform: scaleY(0);
opacity:0;
}
.services-hover {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.16);
  height: 100%;
  width: 100%;
  color: #fff;
  transform: scaleY(0);
  opacity: 0;
  transition: .3s cubic-bezier(.24,.74,.58,1);
}
.mx-services31:hover .services-hover,.mx-services31.active .services-hover {
transform: scaleY(1);
opacity:1;
}
.mx-services31:hover .h-service{
background: #222;
}
.mx-services31:hover .services-icon,.mx-services31:hover  .services-number,.mx-services31.active .services-number{
    display: none;
}
.mx-services31:hover .services-hover .services-icon,.mx-services31:hover .services-hover .services-number,.mx-services31.active .services-hover .services-number{
    display: block;
}
.services-hover h5{
    color: #fff;
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 36px;
}
.services-hover a{
    color: #fff;
    margin-top: 15px;
    display: block;
}
.services-hover:hover p,.mx-services31.active .services-hover p{
   height: auto;
    width: auto;
    margin-bottom: 15px;
    
}
.services-hover:hover .services-icon{ 
}
.second-services-content a {
    color: 000f38;
    transition: all 0.3s ease 0s;
}

.mx-services31 a.ss-btn{
    display: none;
}
.mx-services31 .active-icon{display: none;}
.mx-services31 .d-active-icon{display: block;}

.mx-services31:hover {background: #fff;}

.mx-services31.active a.ss-btn{
    display: inline-block;
}
.mx-services31.active .second-services-content h5{}
.mx-services31.active .second-services-content a,#feature-top .mx-services31.active .btn2,.mx-services31.active .services-icon .glyph-icon::before{}
.mx-services31.active .second-services-content p{
   
}
.mx-services31.active .active-icon{display: block;}
.mx-services31.active .d-active-icon{display: none;}