body {
  cursor: none;
}

#custom-cursor {
  position: fixed;
  width: 28px; /* A bit larger for a detailed icon */
  height: 28px;
  pointer-events: none;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: transform 0.2s ease, color 0.2s ease;
  transition: transform 0.2s ease, color 0.2s ease;
  z-index: 9999;
  color: #001f3f; /* Primary color for the SVG stroke */
}

#custom-cursor svg {
  width: 100%;
  height: 100%;
  display: block;
}

#custom-cursor.hover {
  -webkit-transform: translate(-50%, -50%) scale(1.5); /* Enlarge on hover */
  transform: translate(-50%, -50%) scale(1.5); /* Enlarge on hover */
  color: #b8860b; /* Secondary color on hover */
}

#custom-cursor.click {
  -webkit-transform: translate(-50%, -50%) scale(1.2); /* Slightly smaller on click */
  transform: translate(-50%, -50%) scale(1.2); /* Slightly smaller on click */
}

/* Hide cursor on touch devices and smaller screens */
@media (max-width: 1024px) {
  #custom-cursor {
    display: none;
  }
}