.service-layout {
	
	background:#fafafa;
	padding:100px 50px;
}
.service-layout-presentation-box {
    padding: 80px;
    background: #fff;
    border-radius: 8px;
}
.service-layout-presentation-box h3{
	font-size:36px;
	font-weight:bold;
	padding-bottom:0px;
}

.service-layout-presentation-box .subtitle {
font-size: 14px;
    line-height: 15px;
    font-weight: 500;
    margin-bottom: 15px;
    padding: 7px 12px;
    border-radius: 4px;
    display: inline-block;
    background: #7c76f226;
    color: var(--color-primary-alt);
    text-transform: uppercase;
    position: relative;
}

.service-layout-presentation-box .nav-pills .tab {
    display: flex;
    align-items: flex-start;
    gap: 15px;

}

.nav-pills .nav-link{
	 background: linear-gradient(to right, black 50%, lightgray 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all .7s ease-out;
  margin-bottom:20px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
	background-position: left bottom;
	color:#fff;
}
.nav-pills .nav-link .tab span{color:#000;}
.nav-pills .nav-link.active .tab span{color:#fff; border: 1px solid #000; }
.service-layout-presentation-box .nav-link.active .tab p{color:#fff;}
.service-layout-presentation-box .nav-link.active .tab .inner h4{color:#fff;}



.service-layout-presentation-box .tab span {
    font-size: 20px;
    height: 45px;
    min-width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #000;
 
    font-weight: 700;
}
.service-layout-presentation-box .tab .inner{
	text-align:left;
}
.service-layout-presentation-box .tab .inner p {
    margin-bottom: 0;
    margin-top: 10px;
	color:#000;
}

.service-layout-presentation-box .tab .inner .title {
    font-size:26px;
	margin-bottom:0;
}


.invers-anime {
    position: relative;
    overflow: hidden;
	border-radius: 20px;
}

.invers-anime::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 1;
  pointer-events: none;
}
.invers-anime:hover::after {
  height: 250%;
  transition: all 600ms linear;
  background-color: transparent;
}