/* Custom CSS for hamburger menu animation and centering */
    .mobile-menu {
      height: calc(100vh - 4rem); /* Full height minus nav bar */
      transition: all 0.4s ease-in-out; /* Increased duration for smoother effect */
      transform: translateY(-100%);
      opacity: 0;
      pointer-events: none; /* Prevent clicks when closed */
    }
    .mobile-menu.open {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto; /* Enable clicks when open */
    }
    .hamburger span {
      transition: all 0.3s ease-in-out;
    }
    .hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }
    .hamburger.active span:nth-child(2) {
      opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -7px);
    }