.scroll-sticky-navigation {
  background: var(--bg-color);
  padding-top: var(--padding-top);
  padding-bottom: var(--padding-bottom);
  border-bottom: 1px solid var(--color);
}

a.scroll-navigate-items {
  display: block;
  color: var(--color);
  font-size: 18px;
  text-transform: capitalize;
}

a.scroll-navigate-items:hover {
  color: var(--color);
}

.main-scroll-sticky-navigation {
  width: fit-content;
  margin: 0 auto;
  position: relative;
}

.scroll-sticky-navigation-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: fit-content;
  margin: 0 auto;
}

.scroll-navigation-coll {
  position: sticky;
  top: 0;
  z-index: 99;
}

.as-high-line-sticky {
  width: var(--active-line-width);
  height: 3px;
  transform: translate3d(var(--active-line-translate-x), 0, 0);
  background-color: #fff;
  position: absolute;
  bottom: -16px;
  transition: all 0.5s;
}

header.header.section--padding.is-sticky.hide-header {
  z-index: -1;
  visibility: hidden;
}

@media(max-width: 768px) {
  .scroll-sticky-navigation {
    padding-top: var(--padding-top-mobile);
    padding-bottom: var(--padding-bottom-mobile);
  }

  a.scroll-navigate-items {
    font-size: 15px;
  }

  .scroll-sticky-navigation-flex {
    gap: 1.2rem;
  }
}