@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap");

:root {
  --cyan: #36eaea;
  --pink: #ff2a93;
  --purple: #8a2be2;
  --dark-purple: #1e0b2f;
  --darker-purple: #120619;
  --gradient: linear-gradient(90deg, var(--cyan), var(--pink));
}

* {
  font-family: "Montserrat", sans-serif;
}

.bg-gradient-radial {
  background: radial-gradient(
    circle,
    var(--dark-purple) 0%,
    var(--darker-purple) 100%
  );
}

.bg-gradient-main {
  background: linear-gradient(135deg, var(--cyan), var(--purple), var(--pink));
}

.text-gradient {
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.border-gradient {
  border: 2px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image:
    linear-gradient(to right, var(--darker-purple), var(--darker-purple)),
    linear-gradient(90deg, var(--cyan), var(--pink));
}

.btn-gradient {
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  transition: all 0.3s ease;
}

.btn-gradient:hover {
  background: linear-gradient(90deg, var(--pink), var(--cyan));
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.card-gradient {
  background: rgba(30, 11, 47, 0.7);
  border: 1px solid rgba(54, 234, 234, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.card-gradient:hover {
  border-color: rgba(255, 42, 147, 0.5);
  transform: translateY(-5px);
}

.step-circle {
  background: linear-gradient(135deg, var(--cyan), var(--pink));
}

@keyframes moveBackground {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.glow {
  box-shadow:
    0 0 15px rgba(54, 234, 234, 0.5),
    0 0 30px rgba(255, 42, 147, 0.3);
}

.hover-glow:hover {
  box-shadow:
    0 0 15px rgba(54, 234, 234, 0.5),
    0 0 30px rgba(255, 42, 147, 0.3);
}

.futuristic-border {
  position: relative;
}

.futuristic-border::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background: linear-gradient(
    90deg,
    var(--cyan),
    var(--pink),
    var(--purple),
    var(--cyan)
  );
  background-size: 300% 300%;
  animation: borderAnimation 4s ease infinite;
  z-index: -1;
  border-radius: inherit;
}

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

.nav-item {
  position: relative;
}

.nav-item::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  transition: width 0.3s;
}

.nav-item:hover::after {
  width: 100%;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(6px) scale(0.99);
  }
}