/* Animation color in Color cycle */
    @keyframes mix {
      0% {
        background-color: #6366F1; /* bg-indigo-500 */
      }
      33% {
        background-color: #A855F7; /* bg-purple-500 */
      }
      66% {
        background-color: #0EA5E9; /* bg-sky-500 */
      }
      100% {
        background-color: #6366F1; /* bg-indigo-500 */
      }
    }

    .bg-mix {
      animation: mix 15s infinite;
    }
    
    /* Animation as gradient color */
    @keyframes gradient {
      0%, 100% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
    }

    .animate-gradient {
      background: linear-gradient(90deg, #6366F1, #A855F7, #0EA5E9);
      background-size: 300% 300%;
      animation: gradient 25s ease infinite;
    }


/* Floating keyframes for each image */
@keyframes float1 {
  0%, 100% { transform: translateY(-5px); }
  50% { transform: translateY(5px); }
}

@keyframes float2 {
  0%, 100% { transform: translateY(-8px); }
  50% { transform: translateY(8px); }
}

@keyframes float3 {
  0%, 100% { transform: translateY(-5px); }
  50% { transform: translateY(5px); }
}

@keyframes float4 {
  0%, 100% { transform: translateY(-10px); }
  50% { transform: translateY(10px); }
}

@keyframes float5 {
  0%, 100% { transform: translateY(-10px); }
  50% { transform: translateY(10px); }
}

@keyframes float6 {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(3px); }
}

/* Apply floating animations */
.float-1 {
  animation: float1 5s ease-in-out infinite;
}

.float-2 {
  animation: float2 5s ease-in-out infinite;
}

.float-3 {
  animation: float3 5s ease-in-out infinite;
}

.float-4 {
  animation: float4 5s ease-in-out infinite;
}

.float-5 {
  animation: float5 5s ease-in-out infinite;
}

.float-6 {
  animation: float1 5s ease-in-out infinite;
}