/*------------------------------------------------------------------------
# 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 {
  --base45-color1: #1d2f41;
  --base45-color2: #ff494a;
  --base45-color3: #4476a8;
  --base45-color4: #ecf0f4;
  --text-color: #73787d;
  --base45-black: #222429;
}
.service45 {
  position: relative;
}
.service45 .service-grid {
 position:relative;
 z-index:2;
 background-color:#1F1F1F;
 border:1px solid rgba(108,109,113,0.5);
 border-radius:300px;
 padding:60px 30px;
 overflow:hidden;
 -webkit-transition:all 0.4s ease-out;
 transition:all 0.4s ease-out
}
@media (max-width: 1299px) {
 .service45 .service-grid {
  padding:50px 17px
 }
}
@media (max-width: 480px) {
 .service45 .service-grid {
  border-radius:100px
 }
}
.service45 .service-grid {
 background-color:#fff;
 border:1px solid rgba(108,109,113,0.5)
}
.service45 .service-grid .overlay:before {
 content:'';
 position:absolute;
 inset:0;
 width:0;
 background-color:rgba(108,109,113,0.5);
 z-index:3;
 border-radius:inherit;
 -webkit-transition:all 0.4s ease-out;
 transition:all 0.4s ease-out
}
.service45 .service-grid .overlay:after {
 content:"";
 position:absolute;
 inset:0;
 border-radius:inherit;
 background:rgba(108,109,113,0.5);
 z-index:2
}
.service45 .service-grid:hover .box-title, .service45 .service-grid:hover .text {
 color:#fff
}
.service45 .service-grid .overlay {
 position:absolute;
 inset:0;
 border-radius:300px;
 opacity:0;
 visibility:hidden;
 -webkit-transition:all 0.4s ease-in-out;
 transition:all 0.4s ease-in-out
}
@media (max-width: 480px) {
 .service45 .service-grid .overlay {
  border-radius:100px
 }
}
.service45 .service-grid .overlay:before {
 content:'';
 position:absolute;
 inset:0;
 width:0;
 background-color:#1F1F1F;
 z-index:3;
 border-radius:inherit;
 -webkit-transition:all 0.4s ease-out;
 transition:all 0.4s ease-out
}
.service45 .service-grid .overlay:after {
 content:"";
 position:absolute;
 inset:0;
 border-radius:inherit;
 background:rgba(108,109,113,0.5);
 z-index:2
}
.service45 .service-grid .box-content {
 position:relative;
 display:-webkit-box;
 display:-webkit-flex;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-align:center;
 -webkit-align-items:center;
 -ms-flex-align:center;
 align-items:center;
 gap:30px;
 z-index:3
}
@media (max-width: 1500px) {
 .service45 .service-grid .box-content {
  gap:25px
 }
}
@media (max-width: 480px) {
 .service45 .service-grid .box-content {
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
  gap:30px
 }
}
.service45 .service-grid .box-title {
 font-weight:400;
 font-size:20px;
 letter-spacing:0.24em;
 text-transform:uppercase;
 color: #333;
 margin-bottom:10px
}
.service45 .service-grid .box-icon {
 min-width:160px;
 height:160px;
 line-height:160px;
 text-align:center;
 background:#1F1F1F;
 border:1px solid rgba(108,109,113,0.5);
 border-radius:200px;
 color: #fff;
 -webkit-transition:all 0.4s ease-in-out;
 transition:all 0.4s ease-in-out;
}
.service45 .service-grid .box-icon i.icon {
 font-size: 44px;
 -webkit-transition:all 0.4s ease-in-out;
 transition:all 0.4s ease-in-out
}
.service45 .service-grid:hover .overlay {
 width:100%;
 opacity:1;
 visibility:visible
}
.service45 .service-grid:hover .overlay:before {
 -webkit-transform:translate(100%, -100%);
 -ms-transform:translate(100%, -100%);
 transform:translate(100%, -100%)
}
.service45 .service-grid:hover .box-icon {
 background-color:var(--base45-color2);
}


.service45 .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(--base45-color2);
 font-size:15px;
 font-weight:400;
 line-height:1;
 padding:16px 22px;
 border-radius:30px;
 margin-top: 10px;
 -webkit-perspective:320px;
 perspective:320px
}
.service45 .th-btn span {
 margin-left: 5px;
}

.service45 .th-btn:before {
 content:"";
 position:absolute;
 height:0;
 top:50%;
 right:0;
 width:0;
 background-color:var(--base45-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
}
.service45 .th-btn i {
 font-size:1em
}
.service45 .th-btn:hover,
.service45 .th-btn.active {
 color: #fff;
 box-shadow:none
}
.service45 .th-btn:hover::before,
.service45 .th-btn:hover:after,
.service45 .th-btn.active::before,
.service45 .th-btn.active:after {
 top:0;
 height:100%;
 width:100%;
 right:unset;
 left:0
}

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