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

.mx-service-style-3 .tstk-featured-wrapper img,
.mx-service-style-3 .mx-service-icon-wrapper i,
.mx-service-style-3 .mxt-box-content{
  -webkit-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}
.mx-service-style-3 .mxt-post-item{
  margin-bottom: 30px;
}
.mx-service-style-3 .mx-service-img-wrapper{
  position: relative;
  overflow: hidden; 
  border-radius: 50px 0 0 0;
}
.mx-service-style-3 .mxt-box-content{
  position: relative;
  padding: 35px 30px;
  margin-top: -35px;
  margin-left: 30px;
  border-radius: 0 0 50px 0;
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.06);
  background: #fff;
  z-index: 3;
}
.mx-service-style-3:hover .tstk-featured-wrapper img{
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
.mx-service-style-3 .mx-service-title a:hover{
	color: var(--mxt-primary);
}
.mx-service-style-3 .mx-service-content{
  padding-top: 10px;
}
.mx-service-style-3 .mx-service-title {
  position: relative;
  font-size: 24px;
  line-height: 24px;
  margin: 0px;
  text-transform: uppercase;
  font-weight: 500; 
}
.mx-service-style-3 .mx-service-title:after {
  position: absolute;
  content: "";
  top: 50%;
  margin-top: -2px;
  width: 50px;
  height: 4px;
  left: -65px;
  background-color:  var(--mxt-primary);
}
.mx-service-style-3 .mx-service-icon-wrapper{
  float: right; 
}
.mx-service-style-3 .mx-service-icon-wrapper i{
  font-size: 60px;
  line-height: 60px;
  color:  var(--mxt-black);
}
.mx-service-style-3:hover .mxt-box-content{
  background-color:  var(--mxt-black);
  color: #fff;
}
.mx-service-style-3:hover .mx-service-title  a{
  color: #fff;
}
.mx-service-style-3:hover .mx-service-icon-wrapper i{
  color:  var(--mxt-primary);
}

.mx-service-style-3:hover  a.btn-arrow{
  background-color:  var(--mxt-primary);
  border-color:  var(--mxt-primary);
  color: #fff;
}

.mx-service-btn {
  font-size: 17px;
  line-height: 17px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 400;
  font-style: normal;
}
.mx-service-style-3 a.btn-arrow {
  padding: 8px 30px 8px 15px;
  border: 2px solid #eeeeee;
  color: #999;
  font-size: 14px;
}
 a.btn-arrow {
  border-radius: 0 25px 0 0;
  padding: 20px 40px 20px 30px;
  display: inline-block;
}
a.btn-arrow span {
  position: relative;
  display: inline-block;
  padding-right: 5px;
  line-height: 16px;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
/*===== RTL =====*/
body.rtl .mx-service-style-3 .mx-service-title{
  font-size: 20px;
}
body.rtl .mx-service-style-3 .mx-service-img-wrapper{
  border-radius: 0px 50px 0 0;
}
body.rtl .mx-service-style-3 .mxt-box-content{
  margin-left: 0;
  margin-right: 30px;
  border-radius: 0 0px 0px 50px;
}
body.rtl .mx-service-style-3 .mx-service-title:after{
  left: inherit;
  right: -65px;
}