@import "tailwindcss";
@import "fonts.css";

:root {
  --primary-color: #0869fa !important;
}

html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

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

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

.nav-items a.active {
  color: #3b82f6;
  /* Tailwind blue-500 */
  border-bottom: 2px solid #3b82f6;
}

#mobile-menu a.active {
  color: #3b82f6;
  /* Tailwind blue-500 */
  border-bottom: 2px solid #3b82f6;
}

section#home {
  background-image: url("../img/background.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  width: 100%;
  min-height: 87vh;
  background-attachment: scroll;
}

/* On tablets and phones — adjust height, fix weird zoom */
@media (max-width: 1024px) {
  section#home {
    background-size: contain;
    background-position: top center;
    min-height: 50vh;
  }
}

/* On phones — remove background */
@media (max-width: 768px) {
  section#home {
    background-image: none;
    background-color: white;
    /* fallback background */
  }
}

.glow {
  box-shadow: 0 0 5px #00ff7f, 0 0 10px #00ff7f, 0 0 20px #00ff7f,
    0 0 40px #00ff7f;
  animation: pulse-glow 1.5s infinite alternate;
}

@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 5px #00ff7f, 0 0 10px #00ff7f, 0 0 20px #00ff7f,
      0 0 40px #00ff7f;
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 15px #00ff7f, 0 0 30px #00ff7f, 0 0 40px #00ff7f,
      0 0 60px #00ff7f;
    transform: scale(1.05);
  }

  100% {
    box-shadow: 0 0 5px #00ff7f, 0 0 10px #00ff7f, 0 0 20px #00ff7f,
      0 0 40px #00ff7f;
    transform: scale(1);
  }
}