styles */
  .sun-icon,
  .moon-icon {
    font-size: 16px;
    transition: opacity 0.3s ease;
  }

  /* Color the icons */
  .sun-icon {
    color: orange; /* Sun icon color */
  }

  .moon-icon {
    color: lightblue; /* Moon icon color */
    opacity: 0; /* Initially hidden */
  }

  /* Style for checked state */
  .switch-checkbox:checked + .switch-label {
    background-color: #333;
  }

  .switch-checkbox:checked + .switch-label .sun-icon {
    opacity: 0; /* Hide sun icon in dark mode */
  }

  .switc