/* Hamburger Menu Icon Animation */
html, body {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.hamburger {
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.bar {
  transition: all 0.3s ease-in-out;
}

/* When the menu is open */
.hamburger.open .bar-1 {
  transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.open .bar-2 {
  opacity: 0;
}

.hamburger.open .bar-3 {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* Animation for dropdown menu (hover and click) */
@keyframes dropdown-open {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dropdown-close {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Animation for dropdown menu (hover and click) */
@keyframes dropdown-open {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dropdown-close {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Animation for mobile menu reveal */
@keyframes mobile-menu-open {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mobile-menu-close {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.dropdown-open {
  animation: dropdown-open 0.3s ease-out forwards;
}

.dropdown-close {
  animation: dropdown-close 0.3s ease-in forwards;
}

.mobile-menu-open {
  animation: mobile-menu-open 0.3s ease-out forwards;
}

.mobile-menu-close {
  animation: mobile-menu-close 0.3s ease-in forwards;
}


.home-logo {
  width: 80px;
  height: auto;
}

@media screen and (min-width: 768px) {
  .home-logo {
    width: 250px;
  }
}