#splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white; /* or your brand color */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#splash.hidden {
  opacity: 0;
  visibility: hidden;
}

#splash img {
  width: 120px; /* adjust as needed */
  height: auto;
}


/* Utility classes */
.an-350 {
  animation-duration: 3.5s !important;
}
.an-300 {
  animation-duration: 3.0s !important;
}
.an-200 {
  animation-duration: 2.0s !important;
}
.ani-150 {
  animation-duration: 1.5s !important;
}

.tr-20.appear {
  transition-delay: 0.2s !important;
}
.tr-80.appear {
  transition-delay: 0.8s !important;
}
.tr-100.appear {
  transition-delay: 1s !important;
}
.tr-120.appear {
  transition-delay: 1.2s !important;
}
.tr-150.appear {
  transition-delay: 1.5s !important;
}
.tr-180.appear {
  transition-delay: 1.8s !important;
}
.tr-200.appear {
  transition-delay: 2s !important;
}
.tr-220.appear {
  transition-delay: 2.2s !important;
}
.tr-250.appear {
  transition-delay: 2.5s !important;
}

/* Expanding animation */

.expanding {
  animation: expand 1.5s ease-in-out infinite;
}
@keyframes expand {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.expanding-lg {
  animation: expand-lg 1.5s ease-in-out infinite;
}
@keyframes expand-lg {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

.expanding-xlg {
  animation: expand-xlg 1.5s ease-in-out infinite;
}
@keyframes expand-xlg {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

.floating {
  animation: float 2.5s ease-in-out infinite;
}
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.floating-sm {
  animation: float-sm 2.5s ease-in-out infinite;
}
@keyframes float-sm {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.floating-lg {
  animation: float-lg 2.5s ease-in-out infinite;
}
@keyframes float-lg {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* Fade-in Animations */
.fade-in {
  opacity: 0;
  transform: translateY(20px);  /* Default: fade in from bottom */
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in-top {
  transform: translateY(-50px);  /* Move from the top */
}

@media (max-width: 768px) {
  .fade-in-left {
    transform: translateY(-20px);  /* Reduce movement on smaller screens */
  }
}
/* Fade-in from the bottom */
.fade-in-bottom {
  transform: translateY(50px);  /* Move from the bottom */
}

@media (max-width: 768px) {
  .fade-in-left {
    transform: translateY(20px);  /* Reduce movement on smaller screens */
  }
}

/* Fade-in from the left */
.fade-in-left {
  transform: translateX(-50px);  /* Default: Move from the left */
}

@media (max-width: 768px) {
  .fade-in-left {
    transform: translateX(-20px);  /* Reduce movement on smaller screens */
  }
}

/* Fade-in from the right */
.fade-in-right {
  transform: translateX(50px);  /* Default: Move from the right */
}

@media (max-width: 768px) {
  .fade-in-right {
    transform: translateX(20px);  /* Reduce movement on smaller screens */
  }
}

/* Applying the 'appear' class to trigger animation */
.fade-in.appear {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.fade-in-top.appear {
  transition-delay: 0.5s;
}
.fade-in-bottom.appear {
  transition-delay: 0.5s;
}
.fade-in-left.appear {
  transition-delay: 0.5s;
}
.fade-in-right.appear {
  transition-delay: 0.5s;
}