/* Logo Styling */
.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.logo-img {
  height: 50px; /* adjust as needed */
  width: auto;
  transition: transform 0.5s ease, filter 0.5s ease;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3));
}

/* Logo Animation on Page Load */
@keyframes logoBounce {
  0%   { transform: translateY(-50px); opacity: 0; }
  50%  { transform: translateY(10px); opacity: 1; }
  70%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

.logo-img {
  animation: logoBounce 1s ease forwards;
}

/* Logo Hover Effect */
.logo-img:hover {
  transform: scale(1.1) rotate(-5deg);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}