/*------------------------------------------------------------------------
# mod_mx_services Extension
# ------------------------------------------------------------------------
# author    mixwebtemplates
# Copyright (C) 2025 mixwebtemplates.com. All Rights Reserved.
# @license - http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Websites: http://www.mixwebtemplates.com
-------------------------------------------------------------------------*/
:root {
  --base44-color1: #1d2f41;
  --base44-color2: #ff494a;
  --base44-color3: #4476a8;
  --base44-color4: #ecf0f4;
  --text-color: #73787d;
  --base44-black: #222429;
}
.service44 {
  position: relative;
}
.service44 .inner-box {
  position: relative;
  text-align: center;
}
.service44 .inner-box:hover .icon-box:after {
  -webkit-clip-path: polygon(25% -70%, 75% -70%, 120% 50%, 75% 170%, 25% 170%, -20% 50%);
          clip-path: polygon(25% -70%, 75% -70%, 120% 50%, 75% 170%, 25% 170%, -20% 50%);
}
.service44 .inner-box:hover .icon-box::before {
  -webkit-clip-path: polygon(50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 50%);
          clip-path: polygon(50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 50%);
}
.service44 .inner-box:hover .icon {
  background-color: var(--base44-color2);
  color: #ffffff;
}
.service44 .inner-box:hover .count {
  left: 145px;
  bottom: 145px;
  -webkit-transform: scale(-1) rotate(-180deg);
          transform: scale(-1) rotate(-180deg); 
  background-color: transparent;
  height: 100px;
  width: 100px;        
}
.service44 .icon-box {
  position: relative;
  height: 255px;
  width: 255px;
  border-radius: 50%;
  padding: 40px;
  margin: 0 auto 20px;
}
.service44 .icon-box:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  content: "";
  border: 2px solid var(--base44-color4);
  border-radius: 200px 200px 0 0;
  border-bottom: 0;
  -webkit-transition: all 700ms ease;
  transition: all 700ms ease;
  -webkit-clip-path: polygon(25% -70%, 75% -70%, 120% 50%, 75% 170%, 25% 170%, -20% 50%);
          clip-path: polygon(25% -70%, 75% -70%, 120% 50%, 75% 170%, 25% 170%, -20% 50%);
}
.service44 .icon-box:after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  -webkit-clip-path: polygon(50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 50%);
          clip-path: polygon(50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 50%);
  border: 2px solid var(--base44-color2);
  border-top: 0;
  content: "";
  border-radius: 0 0 200px 200px;
  -webkit-transition: all 700ms ease;
  transition: all 700ms ease;
}
.service44 .icon-box .icon {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 180px;
  width: 180px;
  border-radius: 50%;
  background-color: var(--base44-color4);
  margin-bottom: 0;
  z-index: 1;
  font-size: 64px;
  color: var(--base44-color2);
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}
.service44 .icon-box .count {
  position: absolute;
  left: 38px;
  bottom: 38px;
  height: 54px;
  width: 54px;
  font-size: 16px;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  z-index: 2;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}
.service44 .icon-box .count .numb {
  height: 54px;
  width: 54px;
  background-color: var(--base44-color1);
  font-size: 16px;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  z-index: 2;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}
.service44 .icon-box .count img, .service44 .inner-box:hover .count .numb  {
display: none;
}

.service44 .inner-box:hover .count img {
display: inherit;
  border-radius: 50%;
}
.service44 .info-box {
  position: relative;
  text-align: center;
}
.service44 .info-box .title {
  z-index: 2;
  margin-bottom: 15px;
}
.service44 .info-box .text {
  padding: 0 40px;
}


.service44 .th-btn {
 z-index:2;
 vertical-align:middle;
 display:inline-block;
 border:none;
 text-transform:capitalize;
 text-align:center;
 background-color:rgba(255, 255, 255, 0.91);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
 color: #fff;
 background-color:var(--base44-color2);
 font-size:15px;
 font-weight:400;
 line-height:1;
 padding:12px 22px;
 border-radius:30px;
 margin-top: 10px;
 -webkit-perspective:320px;
 perspective:320px
}
.service44 .th-btn span {
 margin-left: 5px;
}

.service44 .th-btn:before {
 content:"";
 position:absolute;
 height:0;
 top:50%;
 right:0;
 width:0;
 background-color:var(--base44-black);
 z-index:-1;
 -webkit-transition:all 0.4s ease-in-out;
 transition:all 0.4s ease-in-out;
 border-radius:inherit;
 -webkit-transform-origin:top center;
 -ms-transform-origin:top center;
 transform-origin:top center
}
.service44 .th-btn i {
 font-size:1em
}
.service44 .th-btn:hover,
.service44 .th-btn.active {
 color: #fff;
 box-shadow:none
}
.service44 .th-btn:hover::before,
.service44 .th-btn:hover:after,
.service44 .th-btn.active::before,
.service44 .th-btn.active:after {
 top:0;
 height:100%;
 width:100%;
 right:unset;
 left:0
}

.mxt-arrow-svg-top-right {
  fill: currentColor;
  stroke: none;
}