.topnav-container ul {
  list-style:none;
  display:flex;
  gap:25px;
  margin:0 26px 0 0;
  padding:0;
}

.topnav-container a {
  color:#fff;
  text-decoration:none;
  font-size:1.05em;
  font-weight:400;
  position:relative;
  padding:.15em 0;
  transition:.28s;
}

.topnav-container a:focus-visible {
  outline:2px solid #00D1E2;
  outline-offset:3px;
}

.topnav-container a::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  height:2px;
  width:0;
  background:#FF2E01;
  transition:.35s;
}

.topnav-container a:hover,
.topnav-container a:focus {
  color:#00D1E2;
}

.topnav-container a:hover::after,
.topnav-container a:focus::after,
.topnav-container a.active::after {
  width:100%;
}

.topnav-container a.active {
  color:#FF2E01;
}

.hamburger-menu {
  display:none;
  color:#ffffff;
  font-size:30px;
  cursor:pointer;
  margin:0 22px 0 10px;
  height:100%;
  align-items:center;
  line-height:1;
}

.hamburger-menu:focus-visible {
  outline:2px solid #00D1E2;
  outline-offset:4px;
}

.mobile-menu {
  position:fixed;
  top:0;
  right:-100%;
  width:78%;
  max-width:360px;
  height:100%;
  background:#000515;
  color:#ffffff;
  z-index:999;
  transition:right .35s cubic-bezier(.65,.05,.36,1);
  padding:14px 18px 24px;
  border-left:1px solid #ffffff;
  display:flex;
  flex-direction:column;
  gap:24px;
}

.mobile-menu.open {
  right:0;
}

.mobile-menu header {
  display:flex;
  justify-content:flex-end;
}

.close-menu {
  font-size:30px;
  cursor:pointer;
  line-height:1;
}

.close-menu:focus-visible {
  outline:2px solid #00D1E2;
  outline-offset:4px;
}

.mobile-menu ul {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mobile-menu a {
  display:block;
  color:#ffffff;
  text-decoration:none;
  padding:8px 6px;
  border-radius:4px;
  font-size:1.05em;
  transition:.25s;
  position:relative;
}

.mobile-menu a:focus-visible {
  outline:2px solid #00D1E2;
  outline-offset:2px;
}

.mobile-menu a:hover,
.mobile-menu a:focus {
  background:#ffffff;
  color:#000515;
}

.mobile-menu a.active {
  background:#FF2E01;
  color:#000515;
}

@media (max-width:992px) {
  .topnav-container ul { gap:14px; }
  .topnav-container a { font-size:1em; }
}

@media (max-width:768px) {
  .topnav-container { display:none; }
  .hamburger-menu { display:flex; }
}