/* Fullscreen Preloader */
    #preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #0a0a1a; /* Dark background for better contrast */
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: opacity 0.5s ease-out;
    }

    .loader {
      position: relative;
      width: 200px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* Logo in center */
    .loader img {
      position: absolute;
      width: 80px;
      height: auto;
      z-index: 10;
    }

    /* Orbit wrapper for the dots */
    .orbit {
      position: absolute;
      width: 150px;
      height: 150px;
      border: none;
      border-radius: 50%;
      animation: rotate 4s linear infinite;
    }

    /* Reverse direction for the second dot */
    .orbit.reverse {
      animation: rotateReverse 4s linear infinite;
    }
    
    /* The glowing dot */
    .dot {
      position: absolute;
      top: -8px; 
      left: 50%;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      transform: translateX(-50%);
      /* The color changing animation is applied here */
      animation: change-color 7s linear infinite;
    }

    /* Keyframes for the color changing animation (VIBGYOR+) */
    @keyframes change-color {
      0%, 100% {
        background-color: #9400D3; /* Violet */
        box-shadow: 0 0 15px #9400D3, 0 0 25px #9400D3;
      }
      14% {
        background-color: #4B0082; /* Indigo */
        box-shadow: 0 0 15px #4B0082, 0 0 25px #4B0082;
      }
      28% {
        background-color: #0000FF; /* Blue */
        box-shadow: 0 0 15px #0000FF, 0 0 25px #0000FF;
      }
      42% {
        background-color: #00FF00; /* Green */
        box-shadow: 0 0 15px #00FF00, 0 0 25px #00FF00;
      }
      57% {
        background-color: #FFFF00; /* Yellow */
        box-shadow: 0 0 15px #FFFF00, 0 0 25px #FFFF00;
      }
      71% {
        background-color: #FF7F00; /* Orange */
        box-shadow: 0 0 15px #FF7F00, 0 0 25px #FF7F00;
      }
      85% {
        background-color: #FF0000; /* Red */
        box-shadow: 0 0 15px #FF0000, 0 0 25px #FF0000;
      }
    }

    /* Orbit rotation */
    @keyframes rotate {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    
    /* Reverse orbit rotation */
    @keyframes rotateReverse {
      from { transform: rotate(360deg); }
      to   { transform: rotate(0deg); }
    }

/* Define keyframes globally */

@keyframes change-color {

  0%, 100% { background-color: #9400D3; box-shadow: 0 0 15px #9400D3, 0 0 25px #9400D3; }
  14% { background-color: #4B0082; box-shadow: 0 0 15px #4B0082, 0 0 25px #4B0082; }
  28% { background-color: #0000FF; box-shadow: 0 0 15px #0000FF, 0 0 25px #0000FF; }
  42% { background-color: #00FF00; box-shadow: 0 0 15px #00FF00, 0 0 25px #00FF00; }
  57% { background-color: #FFFF00; box-shadow: 0 0 15px #FFFF00, 0 0 25px #FFFF00; }
  71% { background-color: #FF7F00; box-shadow: 0 0 15px #FF7F00, 0 0 25px #FF7F00; }
  85% { background-color: #FF0000; box-shadow: 0 0 15px #FF0000, 0 0 25px #FF0000; }
}

/* For smaller screens, just override shadow size */
@media (max-width: 480px) {
  .dot {
    box-shadow: 0 0 10px currentColor, 0 0 18px currentColor;
  }
}