.animated-logo {
  position: relative;
  display: inline-block;
}

.animated-logo img {
  transition: transform 0.3s ease, filter 0.5s ease;
}

.animated-logo:hover img {
  transform: scale(1.1);
  filter: drop-shadow(0 0 5px rgba(74, 198, 255, 0.8));
}

/* Glowing effect for the logo */
@keyframes glow-pulse {
  0% {
    filter: drop-shadow(0 0 2px rgba(74, 198, 255, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(74, 198, 255, 0.8));
  }
  100% {
    filter: drop-shadow(0 0 2px rgba(74, 198, 255, 0.4));
  }
}

.logo-pulse img {
  animation: glow-pulse 3s infinite ease-in-out;
}

/* Hero section larger logo animation */
.hero-logo {
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
}

.hero-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Circuit animation effect */
@keyframes circuit-glow {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}

.circuit-animate .dot-1 {
  animation: circuit-glow 2s infinite ease-in-out;
}

.circuit-animate .dot-2 {
  animation: circuit-glow 2s infinite ease-in-out 0.6s;
}

.circuit-animate .dot-3 {
  animation: circuit-glow 2s infinite ease-in-out 1.2s;
}

/* Logo with text styling */
.logo-with-text {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-with-text .logo-text {
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
  letter-spacing: 1px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-logo {
    width: 80px;
    height: 80px;
  }
}