.footer-head::before,
.footer-head::after {
  content: '';
  height: 4px;
  background: #cbd5e1;
  display: block;
  transition: width 0.3s ease-in-out;
  margin: 0 0;
}

.footer-head::before {
  width: 25%;
}
.footer-head::after {
  width: 0;
}

.footer-head:hover::before {
  width: 0;
}
.footer-head:hover::after {
  width: 25%;
}

.headers,
.titles {
  position: relative;
}
.headers::after {
  content: '';
  position: absolute;
  width: 5%;
  height: 4px;
  background-color: #111;
  bottom: 0;
  left: 0;
}
.titles::after {
  content: '';
  position: absolute;
  width: 5%;
  height: 4px;
  background-color: #fff;
  bottom: 0;
  left: 0;
}
.headers:hover::after {
  transition: 1s;
  width: 20%;
}
.titles:hover::after {
  transition: 1s;
  width: 20%;
}

.service-center-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: #3b1b7f;
  border-radius: 1rem;
  transition: transform 300ms ease-in-out;
  transform: scaleY(0);
}
.service-center-box:hover::before,
.service-center-box:focus::before {
  transform: scaleY(1);
}
.service-center-box {
  z-index: 1;
}

.tab li.activeSC {
  background-color: #3b1b7f;
  color: white;
}