.custom-cursor {
  position: fixed;
  width: 18px;
  height: 18git px;
  background-color: #D4AF37;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  pointer-events: none;
  transition: transform 0.1s ease;
}

.follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background-color: rgb(31 30 30 / 35%);
  border-radius: 100%;
  transition: transform 0.1s ease;
  transform: translate(-50%, -50%);
  -webkit-transition-duration: 100ms;
  transition-duration: 100ms;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  will-change: width, height, transform, border;
  z-index: 9998;
  pointer-events: none;
}

.custom-cursor.hovered {
  transform: scale(2); /* Enlarge dot circle when hovering */
}

.custom-cursor-tracker {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: none; /* Hide the default cursor */
  pointer-events: all;
  z-index: 9997; /* Below both circles */
}





/* .cursor.active {
  opacity: 0.5;
  transform: scale(0);
}
.cursor.hovered {
  opacity: 0.08;
}
.cursor-follower.active {
  opacity: 0.7;
  transform: scale(2);
}
.cursor-follower.hovered {
  opacity: 0.08;
} */