html, body {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes slideUp {
  0% {opacity: 0; transform: translateY(40px);}
  100% {opacity: 1; transform: translateY(0);}
}

@keyframes slideLeft {
  0% {opacity: 0; transform: translateX(60px);}
  100% {opacity: 1; transform: translateX(0);}
}

@keyframes slideRight {
  0% {opacity: 0; transform: translateX(-60px);}
  100% {opacity: 1; transform: translateX(0);}
}

.animate-fadeIn { animation: fadeIn 1.2s ease forwards; }
.animate-slideUp { animation: slideUp 1.2s ease forwards; }
.animate-slideLeft { animation: slideLeft 1.2s ease forwards; }
.animate-slideRight { animation: slideRight 1.2s ease forwards; }

/* Prevent overflow scroll */
html, body {
  overflow-x: hidden;
}


 .pattern-bg {
    background-image: radial-gradient(#d4f8ce 1px, transparent 1px);
    background-size: 20px 20px;
  }

  /* Fade + Slide animation */
  .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
  }
  .reveal.active {
    opacity: 1;
    transform: translateY(0);
  }

  /* Floating icon */
  .float-icon {
    animation: float 3s ease-in-out infinite;
  }
  @keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
  }

  /* Logo size */
.brand-logo {
  height:70px;
  width: 150px;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity .3s ease;
}

.brand-logo:hover {
  opacity: 1;
}

/* Duplicate the track */
.scroll-track {
  width: max-content;
  display: flex;
  animation: scrollLoop 22s linear infinite;
}

.scroll-track::after {
  content: "";
  display: inline-flex;

  /* Duplicate all logos dynamically */
  background: inherit;
}

/* Smooth infinite scroll */
@keyframes scrollLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Pause on hover */
.scroll-track:hover {
  animation-play-state: paused;
}