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

.mx-servi21 .info-item {
 border-radius:10px;
 background-color:#fff;
 border:.2px solid #dedede;
 position:relative;
 overflow:hidden;
 transition:all 0.3s ease;
 text-align:center
}
.mx-servi21 .info-item:after {
 content:"";
 position:absolute;
 left:0;
 top:0;
 width:100%;
 height:100%;
 background-color:rgba(0,0,0,.7);
 visibility:hidden;
 opacity:0;
 border-radius:10px;
 transition:all 0.3s ease
}
.mx-servi21 .info-item .info-bg-image {
 overflow:hidden
}
.mx-servi21 .info-item .info-bg-image img {
 min-height:400px;
 width:100%;
 object-fit:cover;
 transform:scale(1);
 opacity:0;
 transition:all 0.3s ease
}
.mx-servi21 .info-item .info-content {
 padding:40px;
 position:absolute;
 text-align: center;
 left:0;
 right:0;
 top:0;
 z-index:1
}
@media(max-width:475px) {
 .mx-servi21 .info-item .info-content {
  padding:30px 20px
 }
}
@media only screen and (min-width:1025px) and (max-width:1199px) {
 .mx-servi21 .info-item .info-content {
  padding:40px 10px
 }
}
.mx-servi21 .info-item .info-content .info-title {
 margin-bottom:35px;
 line-height:32px
}
.mx-servi21 .info-item .info-content .icon-image {
 margin-bottom:20px
}
.mx-servi21 .info-item .info-content .icon-body {
 margin-bottom:15px;
 padding-left:20px;
 padding-right:20px
}
.mx-servi21 .info-item .info-content .info-text {
 margin-bottom:30px
}
.mx-servi21 .info-item .info-content .icon-body {
 position:relative;
 display:inline-block;
 width: 120px;
}
.mx-servi21 .info-item .info-content .icon-body .icon-lists {
 transition:all ease 0.5s
}
.mx-servi21 .info-item .info-content .icon-body .icon-lists li {
 position:absolute;
 transition:all 0.5s cubic-bezier(.3,.02,0,.6);
 visibility:hidden;
 opacity:0;
 list-style:none
}

.mx-servi21 .info-item .info-content .icon-body .icon-lists li img {
  width: 30px;
  height: 30px;
}
.mx-servi21 .info-item .info-content .icon-body .icon-lists li:nth-child(1) {
 left:50%;
 top:50%;
 transform:translate(-50%,-50%)
}
.mx-servi21 .info-item .info-content .icon-body .icon-lists li:nth-child(2) {
 right:50%;
 top:50%;
 transform:translate(-50%,-50%)
}
.mx-servi21 .info-item .info-content .icon-body .icon-lists li:nth-child(3) {
 left:50%;
 bottom:50%;
 transform:translate(-50%,-50%)
}
.mx-servi21 .info-item .info-content .icon-body .icon-lists li:nth-child(4) {
 right:50%;
 bottom:50%;
 transform:translate(-50%,-50%)
}
.mx-servi21 .info-item .info-content .info-icons {
 font-size:70px
}

.mx-servi21 .info-item .info-content .info-icons img{
  width: 90px;
  height: 140px;
  padding-top: 60px
}
.btn-style8 svg {
 margin-left:0;
 transform:translateX(7px);
 width:20px;
 transition:all 0.4s ease;
 height:20px
}
.btn-style8 svg path {
 fill:var(--mxserv21-color)
}
.btn-style8:hover svg {
 transform:translateX(12px)
}
.btn-style8 {
 display:inline-flex;
 align-items:center;
 border:1px solid var(--mxserv21-color);
 color:var(--mxserv21-color);
 border-radius:4px;
 padding:8px 20px;
 transition:all 0.4s ease
}
.mx-servi21 .info-item:hover .info-button7 .btn-style8 {
 background-color:var(--mxserv21-color);
 border:1px solid var(--mxserv21-color);
 color:#fff
}
.mx-servi21 .info-item:hover .info-button7 .btn-style8 svg path {
 fill:#fff
}

.mx-servi21 .info-item:hover {
 border-color:transparent
}
.mx-servi21 .info-item:hover:after {
 visibility:visible;
 opacity:1
}
.mx-servi21 .info-item:hover .info-bg-image img {
 opacity:1;
 transform:scale(1.1)
}
.mx-servi21 .info-item:hover .info-content .info-text {
 color:#fff
}
.mx-servi21 .info-item:hover .service-button1 .service-btn {
 color:#fff
}
.mx-servi21 .info-item:hover .info-content .info-title {
 color:#fff
}
.mx-servi21 .info-item:hover .info-content .info-title a {
 color:#fff
}
.mx-servi21 .info-item:hover .info-content .icon-body i {
 color:#fff
}
.mx-servi21 .info-item:hover .info-content .icon-body .icon-lists li:nth-child(1) {
 left:0;
 top:0;
 transform:translate(0);
 visibility:visible;
 opacity:1
}
.mx-servi21 .info-item:hover .info-content .icon-body .icon-lists li:nth-child(2) {
 right:0;
 top:0;
 transform:translate(0);
 visibility:visible;
 opacity:1
}
.mx-servi21 .info-item:hover .info-content .icon-body .icon-lists li:nth-child(3) {
 left:0;
 bottom:0;
 transform:translate(0);
 visibility:visible;
 opacity:1
}
.mx-servi21 .info-item:hover .info-content .icon-body .icon-lists li:nth-child(4) {
 right:0;
 bottom:0;
 transform:translate(0);
 visibility:visible;
 opacity:1
}