@import "tailwindcss";
@theme {
  --color-mint-500: oklch(0.72 0.11 178);
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


 .star {
    animation: twinkle 2s infinite ease-in-out;
  }

  @keyframes twinkle {
    0%, 100% {
      opacity: 0.3;
      transform: scale(1);
    }
    50% {
      opacity: 1;
      transform: scale(1.4);
    }
  }

   .animated-gradient {
    background: linear-gradient(270deg, #f87171, #facc15, #4ade80, #60a5fa, #c084fc);
    background-size: 1000% 1000%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow-text 6s ease infinite;
  }

  @keyframes rainbow-text {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  .bg-wave::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 25% 25%, rgba(0, 184, 255, 0.2), transparent 70%);
    animation: waveFlow 10s linear infinite;
    z-index: 0;
  }

  /* Border animation */
  .animate-border {
    border-image: linear-gradient(45deg, #00f0ff, #7f00ff, #ff0066) 1;
    animation: borderColorFlow 6s linear infinite;
    position: relative;
    z-index: 1;
  }

  /* Animate the gradient border flow */
  @keyframes borderColorFlow {
    0% {
      border-image-source: linear-gradient(0deg, #00f0ff, #7f00ff, #ff0066);
    }
    50% {
      border-image-source: linear-gradient(180deg, #ff0066, #00f0ff, #7f00ff);
    }
    100% {
      border-image-source: linear-gradient(360deg, #7f00ff, #ff0066, #00f0ff);
    }
  }

  /* Background wavy animation */
  @keyframes waveFlow {
    0% {
      transform: translate(0%, 0%) rotate(0deg);
    }
    100% {
      transform: translate(50%, 50%) rotate(360deg);
    }
  }

  .offer-gradient {
     background: linear-gradient(270deg, #f87171, #facc15, #4ade80, #60a5fa, #c084fc);
    background-size: 1000% 1000%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow-text 6s ease infinite;
  }

   .animate-border-gradient {
    border-image: linear-gradient(45deg, #00f0ff, #7f00ff, #ff0066) 1;
    animation: borderColorFlow 6s linear infinite;
  }

  @keyframes borderColorFlow {
    0% {
      border-image-source: linear-gradient(0deg, #00f0ff, #7f00ff, #ff0066);
    }
    50% {
      border-image-source: linear-gradient(180deg, #ff0066, #00f0ff, #7f00ff);
    }
    100% {
      border-image-source: linear-gradient(360deg, #7f00ff, #ff0066, #00f0ff);
    }
  }

@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 60s linear infinite;
}

@keyframes gradient-x {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.animate-gradient-x {
  background-size: 200% 200%;
  animation: gradient-x 3s ease infinite;
}
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animated-gradient-bg {
  background: linear-gradient(270deg, #0B1120, #1f2937, #0B1120, #1f2937);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}


@keyframes gradient-x {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.bg-animate-river {
  background: linear-gradient(to right, #0B1120, #1f2937, #0B1120);
  background-size: 200% 200%;
  animation: gradient-x 15s ease infinite;
}
 @keyframes gradientAnimation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  .animate-gradient {
    background-size: 300% 300%;
    animation: gradientAnimation 6s ease infinite;
  }
  @keyframes gradientText {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradientText 4s ease infinite;
}