.brand-name {
  font-size: 2rem; /* Moderate size */
  font-weight: 700;
  color: #fff; /* White initially */
  text-transform: uppercase;
  letter-spacing: 3px;
  animation: pulse 2s infinite; /* Pulse animation */
  transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition */
}

/* Pulse animation */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.brand-name:hover {
  transform: scale(1.1); /* Scale effect on hover */
  color: var(--secondary-color); /* Changes to secondary color on hover */
}

@media (max-width: 768px) {
  .brand-name {
    font-size: 20px;
    margin-left: 10px;
  }

  nav {
    justify-content: space-between;
  }
}