@keyframes float {
    0% {
      transform: translateY(0) translateX(0);
      opacity: 0.5;
    }
    50% {
      transform: translateY(-50px) translateX(50px);
      opacity: 0.7;
    }
    100% {
      transform: translateY(-100px) translateX(100px);
      opacity: 0;
    }
  }
  
  .circle {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 10%;
    background: rgba(245, 243, 243, 0.062); /* Círculos blancos translúcidos */
    animation: float 5s linear infinite;
  }

  #circle-container {
  width: 100%; /* Ajusta al tamaño del contenedor principal */
  height: 100%; /* Ocupa el área disponible */
   /* Asegura que esté detrás del contenido principal */
   overflow: hidden;
}