@keyframes menu-in {
  0% {
    transform: scaleY(0);
    background-color: var(--primary-color);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes menu-out {
  0% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    opacity: 0;
    background-color: white;
    background-color: var(--primary-color);
    transform: scaleY(0);
  }
}

@keyframes burger-in {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
@keyframes burger-out {
  0% {
    transform: rotate(90deg);
  }
  20% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes hoverservice {
  0% {
    background-color: rgba(0, 0, 0, 0.6);
  }
  100% {
    background-color: rgba(0, 0, 0, 0.3);
  }
}

@keyframes neonGlow {
  0% {
    box-shadow: 0 0 1px var(--primary-color), 0 0 1px var(--secondary-color),
      0 0 1px var(--primary-color), 0 0 1px var(--secondary-color),
      0 0 1px var(--primary-color);
  }
  100% {
    box-shadow: 0 0 2px var(--secondary-color), 0 0 2px var(--secondary-color),
      0 0 2px white, 0 0 2px var(--secondary-color),
      0 0 22px var(--primary-color);
  }
}
@keyframes scrollBackground {
  from {
      background-position: 50% 0;
  }
  to {
      background-position: 50% -100px;
  }
}