/* Contenedor principal */
.nav-bar {
  height: 10vh;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Contendor de nav-bar */
.nav-bar .nav-bar-list {
  box-shadow: 1px 1px 20px 5px #00000015;
  padding: 10px 20px;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  width: 600px;
  background-color: #F3F3F3;
}

/* Clave de Pago electrónico */

/* Contenedor de item */
.nav-bar-list-item {
  padding: 5px;
}

/* Estilos de contendor de etiqueta a */
.nav-bar-list-item a {
  font-family: 'Inter';
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  text-decoration: none;
  font-size: calc(12px + 0.2vw);
  color: #6B88A8 !important;
  transition: all ease .2s;
}

.nav-bar-list-item a:hover {
  transform: scale(1.05);
}

/* Estilos de etiqueta SVG */
.nav-bar-list-item a svg {
  width: 28px;
  height: 28px;

  & path {
    stroke: #6B88A8 !important;
  }
}
.active{
  position: relative;
}

.nav-bar-list-item.active::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background-color: var(--color-blue-800);
  border-radius: 50%;
  animation: zoom 2s infinite;
}

.active a{
  font-weight: 500;
  color: var(--color-blue-800) !important;
}
.active a svg path{
  stroke: var(--color-blue-800) !important;
}

@keyframes zoom {
  0% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(0.5);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}