.hamburger {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hamburger input {
  display: none;
}

.hamburger svg {
  /* The size of the SVG defines the overall size */
  height: 3em;
  /* Define the transition for transforming the SVG */
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line {
  fill: none;
  stroke: white;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  /* Define the transition for transforming the Stroke */
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
              stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line-top-bottom {
  stroke-dasharray: 12 63;
}

.hamburger input:checked + svg {
  transform: rotate(-45deg);
}

.hamburger input:checked + svg .line-top-bottom {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42;
}
/* Top-down animation for the navigation menu */
@media (max-width: 767px) {
    .nav-menu {
        position: absolute;
        top: 70px; /* Header height */
        left: 0;
        width: 100%;
        background-color: #0052FF;
        flex-direction: column;
        padding-bottom: 1rem;
        
        /* Animation properties */
        transform: translateY(-150%);
        transition: transform 0.5s ease-in-out;
        display: flex; /* Keep it as flex for layout */
    }

    .nav-menu.active {
        transform: translateY(0);
    }
}