.card-metro-hover:after {
  content: "";
  opacity: 0;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgb(0, 0, 0)));
  background-image: linear-gradient(180deg, #000000ab, rgb(0, 0, 0));
}

.nav-pills-primary-border-start .nav-link.active, .nav-pills-primary-border-start .nav-link:hover {
	  color: #57b1e1;
		background-color: #57b1e114;
		border-left: 2px solid #57b1e1;
	}
.nav-pills-primary .nav-link.active, .nav-pills-primary .nav-link:hover {
    color: var(--bs-white);
    background-color: #70b0dc;
}