@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap");
body {
  font-family: "Inter", sans-serif;
}

/* Neon glow effects */
.neon-text {
  text-shadow:
    0 0 10px #00fff9,
    0 0 20px #00fff9,
    0 0 30px #00fff9;
}

.neon-border {
  box-shadow:
    0 0 5px #00fff9,
    0 0 10px #00fff9,
    0 0 20px #00fff9,
    0 0 40px #00fff9;
}

.neon-glow {
  box-shadow:
    0 0 10px rgba(0, 255, 249, 0.5),
    0 0 20px rgba(0, 255, 249, 0.3),
    0 0 30px rgba(0, 255, 249, 0.2);
}

.neon-hover {
  transition: all 0.3s ease;
}

.neon-hover:hover {
  box-shadow:
    0 0 15px #00fff9,
    0 0 30px #00fff9,
    0 0 45px #00fff9;
  transform: translateY(-5px);
}

/* Animated background */
.animated-bg {
  background: linear-gradient(125deg, #0a0e27 0%, #1a1f3a 50%, #0a0e27 100%);
  background-size: 200% 200%;
  animation: gradientShift 15s ease infinite;
}

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

/* Floating animation */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

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

/* Pulse animation for availability badge */
@keyframes neon-pulse {
  0%,
  100% {
    box-shadow:
      0 0 5px #00fff9,
      0 0 10px #00fff9;
    opacity: 1;
  }
  50% {
    box-shadow:
      0 0 10px #00fff9,
      0 0 20px #00fff9,
      0 0 30px #00fff9;
    opacity: 0.8;
  }
}

.neon-pulse {
  animation: neon-pulse 2s ease-in-out infinite;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #0a0e27;
}

::-webkit-scrollbar-thumb {
  background: #00fff9;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #00cccc;
}

/* Grid background effect */
.grid-bg {
  background-image:
    linear-gradient(rgba(0, 255, 249, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 249, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
}

body {
  font-family: "Inter", sans-serif;
}

/* Neon glow effects */
.neon-text {
  text-shadow:
    0 0 10px #00fff9,
    0 0 20px #00fff9,
    0 0 30px #00fff9;
}

.neon-border {
  box-shadow:
    0 0 5px #00fff9,
    0 0 10px #00fff9,
    0 0 20px #00fff9,
    0 0 40px #00fff9;
}

.neon-glow {
  box-shadow:
    0 0 10px rgba(0, 255, 249, 0.5),
    0 0 20px rgba(0, 255, 249, 0.3),
    0 0 30px rgba(0, 255, 249, 0.2);
}

.neon-hover {
  transition: all 0.3s ease;
}
j .neon-hover:hover {
  box-shadow:
    0 0 15px #00fff9,
    0 0 30px #00fff9,
    0 0 45px #00fff9;
  transform: translateY(-5px);
}

/* Animated background */
.animated-bg {
  background: linear-gradient(125deg, #0a0e27 0%, #1a1f3a 50%, #0a0e27 100%);
  background-size: 200% 200%;
  animation: gradientShift 15s ease infinite;
}

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

/* Floating animation */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

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

/* Pulse animation for availability badge */
@keyframes neon-pulse {
  0%,
  100% {
    box-shadow:
      0 0 5px #00fff9,
      0 0 10px #00fff9;
    opacity: 1;
  }
  50% {
    box-shadow:
      0 0 10px #00fff9,
      0 0 20px #00fff9,
      0 0 30px #00fff9;
    opacity: 0.8;
  }
}

.neon-pulse {
  animation: neon-pulse 2s ease-in-out infinite;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #0a0e27;
}

::-webkit-scrollbar-thumb {
  background: #00fff9;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #00cccc;
}

/* Grid background effect */
.grid-bg {
  background-image:
    linear-gradient(rgba(0, 255, 249, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 249, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
}
