.scrollspy-example {
  position: relative;
  height: 580px;
  overflow-y: scroll;
  scroll-behavior: smooth;
  /* Animación de scroll suave */
  font-family: "Livvic", sans-serif;
}

.list-group-item {
  background-color: #ffffff;
  border-color: #cccccc;
  color: black;
  font-family: "Livvic", sans-serif;
  font-size: 20px;
}

.list-group-item:hover {
  background-color: #ffcf2d;
  border-color: #ffcf2d;
  color: rgb(0, 0, 0);
  font-family: "Livvic", sans-serif;
}

.list-group-item.active {
  background-color: #ffcf2d;
  border-color: #ffcf2d;
  color: black;
  font-family: "Livvic", sans-serif;
}

/* Ajustes para hacer el contenido responsive */
@media (max-width: 768px) {
  .scrollspy-example {
    height: auto;
    max-height: 400px;
    font-family: "Livvic", sans-serif;
  }

  .list-group {
    margin-bottom: 20px;
    font-family: "Livvic", sans-serif;
  }
}

/* Ajuste de margen para evitar que el contenido se superponga */
.scrollspy-example h4 {
  margin-top: 60px;
  padding-top: 10px;
  font-family: "Livvic", sans-serif;
}