/* Custom CSS for the preloader */
.preloader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  .preloader {
    position: relative;
    width: 120px;
    height: 120px;
  }
  
  .ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 8px solid transparent;
    border-top-color: #3498db;
    animation: preloader-animation 1.5s linear infinite;
  }
  
  .preloader img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
  }
  
  @keyframes preloader-animation {
    0% {
      transform: rotate(0deg);
      border-top-color: #ff9e0d;
    }
    20% {
      transform: rotate(90deg);
      border-top-color: #ff2cb9;
    }
    40% {
      transform: rotate(180deg);
      border-top-color: #ff3030;
    }
    60% {
      transform: rotate(270deg);
      border-top-color: #30cfff;
    }
    80% {
      transform: rotate(360deg);
      border-top-color: #ff44ab;
    }
    100% {
      transform: rotate(360deg);
      border-top-color: #fa59b7;
    }
  }