.cursor {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  border: 1.5px solid rgba(0,0,0,1);
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  backdrop-filter: blur(3px);
  will-change: transform;
  transform: translate(-50%, -50%);
  transition: transform 0.2s; /* For transform changes on click and hover */
}

.cursor2 {
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: black;
  opacity: 1;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  transform: translate(-50%, -50%);
}

/* Add specific styling for links to remove pointer on desktop */
a, button, input, select, textarea, div, span {
  cursor: none !important; /* Force override any default cursor */
}

html, body {
  cursor: none !important;
}

/* Hide custom cursor on mobile/tablet devices */
@media (max-width: 1023px), (pointer: coarse) {
  .cursor, .cursor2 {
    display: none !important;
  }
  
  html, body, a, button, input, select, textarea, div, span {
    cursor: auto !important; /* Restore default cursor on mobile */
  }
  
  a {
    cursor: pointer !important; /* Restore pointer cursor for links on mobile */
  }
}