* {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      font-family: sans-serif;
      background: #f9f9f9;
    }

    header.site-navbar {
      width: 100%;
      background-image: linear-gradient(202deg, #61BFD9 5%, #0551B4 27%);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0.8rem 1rem;
    }

    .navbar-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1140px;
      width: 100%;
      gap: 1rem;
    }

    .nav-section {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .site-menu {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      gap: 1.5rem;
      flex-wrap: wrap;
    }

    .site-menu li a {
      position: relative;
      display: grid;
      place-items: center;
      height: 2em;
      width: max-content;
      overflow: hidden;
      text-decoration: none;
      font-size: 14px;
      color: #fff;
      line-height: 2em;
    }

    .site-menu li a span {
      grid-area: 1 / 1;
      transition: transform 0.3s ease, opacity 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1em;
    }

    .site-menu li a span.alt {
      transform: translateY(100%);
      opacity: 0;
      line-height: 1em;
    }

    .site-menu li a:hover span.main {
      transform: translateY(-100%);
      opacity: 0;
    }

    .site-menu li a:hover span.alt {
      transform: translateY(0);
      opacity: 1;
    }

    .site-menu li.active a {
      text-decoration: underline;
    }

    .site-logo {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .site-logo a {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .logo-img {
      max-width: 81px;
      height: auto;
    }

    .site-logo h5 {
      font-size: 8px;
      color: antiquewhite;
      margin: -5px 0 0;
    }

    /* Hamburger */
    .hamburger {
      display: none;
      width: 30px;
      height: 24px;
      position: relative;
      cursor: pointer;
      transition: transform 0.3s ease;
    }

    .hamburger span {
      position: absolute;
      height: 3px;
      width: 100%;
      background: #fff;
      left: 0;
      transition: all 0.3s ease;
    }

    .hamburger span:nth-child(1) { top: 0; }
    .hamburger span:nth-child(2) { top: 10px; }
    .hamburger span:nth-child(3) { top: 20px; }

    .hamburger.active span:nth-child(1) {
      transform: rotate(45deg);
      top: 10px;
    }

    .hamburger.active span:nth-child(2) {
      opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg);
      top: 10px;
    }

    /* Mobile menu */
    .mobile-menu {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      background: #0551B4;
      padding: 1rem 0;
      overflow: hidden;
    }

    .mobile-menu.show {
      display: flex;
      animation: slideDown 0.4s ease forwards;
    }

    .mobile-menu a {
      color: #fff;
      text-decoration: none;
      font-size: 16px;
      opacity: 0;
      transform: translateY(-10px);
      animation: fadeInUp 0.4s forwards;
    }

    .mobile-menu a:nth-child(1) { animation-delay: 0.05s; }
    .mobile-menu a:nth-child(2) { animation-delay: 0.1s; }
    .mobile-menu a:nth-child(3) { animation-delay: 0.15s; }
    .mobile-menu a:nth-child(4) { animation-delay: 0.2s; }
    .mobile-menu a:nth-child(5) { animation-delay: 0.25s; }
    .mobile-menu a:nth-child(6) { animation-delay: 0.3s; }
    .mobile-menu a:nth-child(7) { animation-delay: 0.35s; }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

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

    /* Responsive */
    @media (max-width: 768px) {
      .navbar-inner {
        flex-direction: row;
        align-items: center;
      }

      .site-menu {
        display: none;
      }

      .hamburger {
        display: block;
      }

      .nav-section.left,
      .nav-section.right {
        justify-content: flex-start;
      }

      .nav-section.right {
        justify-content: flex-end;
      }

      .nav-section.center {
        order: -1;
        flex-grow: 1;
        justify-content: center;
      }

      .site-logo h5 {
        display: none;
      }
    }

    main {
      padding: 100px 20px;
      text-align: center;
    }