@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes orbit {
  0%, 100% {
    transform: rotate(0deg) translateX(-100px);
  }
  25% {
    transform: rotate(120deg) translateX(-100px);
  }
  50% {
    transform: rotate(240deg) translateX(-100px);
  }
  75% {
    transform: rotate(360deg) translateX(-100px);
  }
}

.codicts-circle-1, .codicts-circle-2, .codicts-circle-3, .codicts-circle-small-1, .codicts-circle-small-2, .codicts-circle-small-3 {
  position: absolute;
  width: 300px !important; /* Example size, adjust as needed */
  height: 300px !important; /* Example size, adjust as needed */
  border-radius: 50%;
  /* Additional styles for the circles (e.g., background-color) */
  animation: fadeIn 1s ease-out 1 forwards, spin 8s linear infinite 1s, orbit 12s linear infinite 1s;
  top: 50%; /* Adjust as needed to center the orbit */
  left: 50%; /* Adjust as needed to center the orbit */
  margin-top: -50px; /* Half of the height to center vertically */
  margin-left: -50px; /* Half of the width to center horizontally */
  filter: blur(5.5rem); /* Adjusted for clarity */
}
.codicts-circle-small-1, .codicts-circle-small-2, .codicts-circle-small-3 {
  position: absolute;
  width: 100px !important; /* Example size, adjust as needed */
  height: 100px !important; /* Example size, adjust as needed */
  border-radius: 50%;
  /* Additional styles for the circles (e.g., background-color) */
  animation: fadeIn 1s ease-out 1 forwards, spin 8s linear infinite 1s, orbit 12s linear infinite 1s;
  top: 50%; /* Adjust as needed to center the orbit */
  left: 50%; /* Adjust as needed to center the orbit */
  margin-top: -50px; /* Half of the height to center vertically */
  margin-left: -50px; /* Half of the width to center horizontally */
  filter: blur(5.5rem); /* Adjusted for clarity */
}
.codicts-circle-1, .codicts-circle-small-1 {
  animation-delay: 1s, 1s, 0s; /* Fade-in, Spin, Orbit */
}

.codicts-circle-2, .codicts-circle-small-2 {
  animation-delay: 1s, 1s, 2s; /* Orbit starts 120 degrees out of phase */
}

.codicts-circle-3, .codicts-circle-small-3 {
  animation-delay: 1s, 1s, 4s; /* Orbit starts 240 degrees out of phase */
}