@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Exo+2:wght@700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap");

/* Tailwind Custom Styles */
.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

.hero-gradient {
  /* Updated to use local hero1.jpg - reduced darkness */
  background:
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("/assets/img/hero1.jpg");
  background-size: cover;
  background-position: center;
}

/* Mobile Menu utility if needed, though we will try to handle it with Tailwind classes logic in JS */
.mobile-menu {
  display: none;
}
.mobile-menu.block {
  display: block;
}
/* Step Animations */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

.step-item {
  opacity: 0;
}

.step-item.animate {
  animation: fadeInRight 0.8s forwards;
}

.arrow-item {
  opacity: 0;
}

.arrow-item.animate {
  animation: fadeInRight 0.5s forwards;
}

.arrow-item.blink {
  animation: arrowBlink 1.5s infinite ease-in-out !important;
}

/* Specific Hover Logic for Steps */
.step-item:hover .step-circle {
  background-color: var(--primaryLight, #1626cc) !important;
  color: white !important;
  transform: scale(1.1);
}

.step-item:hover h5 {
  color: #1626cc !important;
}

.step-circle {
  transition: all 0.3s ease;
}

.step-title {
  transition: all 0.3s ease;
}

/* Navbar Underline Effect */
.nav-link {
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
  padding-bottom: 2px;
}