.header-wrap header {
  padding-right: 20px !important;
}

.header-wrap nav {
  gap: clamp(18px, 2.25vw, 34px) !important;
}

.header-wrap nav a {
  white-space: nowrap;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1;
  padding: 10px 2px;
  color: #223844 !important;
  transition: color .2s ease, opacity .2s ease;
}

.header-wrap nav a::after {
  left: 2px !important;
  right: 100% !important;
  bottom: 2px !important;
  height: 2px !important;
  border-radius: 999px;
  background: #6678dc !important;
  transition: right .22s ease !important;
}

.header-wrap nav a:hover,
.header-wrap nav a.is-active,
.header-wrap nav a[aria-current="page"] {
  color: #4258cf !important;
}

.header-wrap nav a:hover::after,
.header-wrap nav a.is-active::after,
.header-wrap nav a[aria-current="page"]::after {
  right: 2px !important;
}

.header-wrap .menu {
  margin-left: auto;
}

@media (max-width: 980px) {
  .header-wrap nav {
    gap: 17px !important;
  }

  .header-wrap nav a {
    font-size: 12px !important;
  }
}

@media (max-width: 820px) {
  .header-wrap header {
    padding-right: 10px !important;
  }

  .header-wrap nav {
    gap: 0 !important;
  }

  .header-wrap nav a {
    font-size: 15px !important;
    padding: 14px 15px !important;
  }

  .header-wrap nav a.is-active,
  .header-wrap nav a[aria-current="page"] {
    border-radius: 9px;
    background: rgba(102, 120, 220, .10);
  }

  .header-wrap nav a::after {
    display: none !important;
  }
}