.loader-container {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   background-color: transparent; /* <-- Remove solid color */
}

.loader-content {
   position: relative;
   text-align: center;
}

   .loader-content span {
      display: block;
      font-size: 18px;
      margin-bottom: 10px;
   }

/* Scale in and out */
@keyframes scaleCycle {
   0% {
      transform: scale(0);
      opacity: 0;
   }

   20% {
      transform: scale(1.2);
      opacity: 1;
   }

   40% {
      transform: scale(1);
   }

   60% {
      transform: scale(1);
   }

   80% {
      transform: scale(1.2);
   }

   100% {
      transform: scale(0);
      opacity: 0;
   }
}

/* Rotate animations */
@keyframes rotateCycle {
   0% {
      opacity: 0;
      transform: rotate(-30deg);
   }

   20% {
      opacity: 1;
      transform: rotate(0);
   }

   80% {
      opacity: 1;
      transform: rotate(0);
   }

   100% {
      opacity: 0;
      transform: rotate(30deg);
   }
}

/* Fade out and reset */
@keyframes fadeCycle {
   0%, 100% {
      opacity: 1;
   }

   50% {
      opacity: 0;
   }
}

/* Assign animations */
svg {
   animation: scaleCycle 3s ease-in-out infinite;
}

#logo-1-fill {
   animation: fadeCycle 3s ease-in-out infinite;
}

#logo-2 {
   animation: rotateCycle 3s ease-in-out infinite;
}

#logo-3 {
   animation: rotateCycle 3s ease-in-out infinite reverse;
}