/* Basic Navbar Styles */
    .nav {
      position: relative;
      background: rgb(0,0,130); /* white; */
      padding: 1rem;
      padding-top: 25px; /* BB 07-26-2025 */
      padding-right: 25px; /* BB 07-26-2025 */
    }

    .nav label {
      font-size: 1.5rem;
      cursor: pointer;
      display: inline-block;
    }

    .nav input[type="checkbox"] {
      display: none;
    }

    /* Hamburger lines */
    .menu-icon {
      width: 70px; /*50px BB*/
      height: 5px;
      background: white; /* rgb(3,4,94); */
      margin: 10px 0; /*6px BB*/
      transition: all 0.3s ease;
    }

    /* Nav menu */
    .menu {
      display: none;
      flex-direction: column;
      background: rgb(0,0,130); /* rgb(3,4,94); */
      padding: 1rem;
      position: absolute;
      top: 100%;
      right: 0;
    }

    .menu a {
      padding: 0.5rem;
      text-decoration: none;
      color: white;
      transition: background 0.2s;
      font-size: 2.0rem; /*BB*/
    }
    
    .clickableM
    {
      padding: 0.5rem;
      text-decoration: none;
      color: white;
      transition: background 0.2s;
      font-size: 2.0rem; /*BB*/
    }

    .menu a:hover {
      background: rgb(0,0,130); /* rgb(3,4,94); */ /* #555 BB */
    }

    /* Show menu when checked */
    #toggle:checked ~ .menu {
      display: flex;
    }

    /* Optional: Animate hamburger into an X */
    #toggle:checked + label .menu-icon:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }

    #toggle:checked + label .menu-icon:nth-child(2) {
      opacity: 0;
    }

    #toggle:checked + label .menu-icon:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px);
    }

/**
    @media (min-width: 768px) {
      .menu {
        display: flex !important;
        flex-direction: row;
        position: static;
        background: none;
      }

      #toggle, .nav label {
        display: none;
      }

      .menu a {
        margin-left: 1rem;
      }
    }
 **/