/* Fullscreen dark transparent background */
/* id="preloader">
	<div class="preloader-logo-container">
		<img class="preloader-logo" */
#preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    /* background: rgba(0, 0, 0, 0.8); */
    background: rgba(255,255,255,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

/* Logo positioning */
.preloader-logo-container {
    width: 50px; /* Adjust size as needed */
    height: 50px;
}

.preloader-logo {
    width: 100%;
    height: auto;
    /* animation: spinClockwise 0.75s ease-in-out, pause 0.25s 0.75s, spinCounterclockwise 0.75s 1.2s ease-in-out; */
    /* animation: stretch 1.5s ease-out 0s alternate infinite none running; */
    animation: spinSequence 2s ease-in-out infinite; /* Loops forever */
}


/* Animation Definitions */
@keyframes spinClockwise {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spinCounterclockwise {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

@keyframes pause {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(360deg); }
}

/* Combined Animation Sequence */
@keyframes spinSequence {
    0% { transform: rotate(0deg); }
    /* 25% { transform: rotate(180deg); } */
    50% { transform: rotate(360deg); }
    /*55% { transform: rotate(360deg); } */ /* Pause */
    60% { transform: rotate(360deg); } /* Pause */
    /* 75% { transform: rotate(180deg); } */ /* Counterclockwise */
    100% { transform: rotate(0deg); }
}

@keyframes rotate {
    from {
      transform: rotate(40deg);
    }
    to {
      transform: rotate(100deg);
    }
  }

@keyframes stretch {
    0% {
      transform: scale(.3);
      background-color: red;
      border-radius: 100%;
    }
    50% {
      background-color: orange;
    }
    100% {
      transform: scale(1.5);
      background-color: yellow;
    }
  }