.navbar {
  backdrop-filter: blur(10px);

  * {
    font-family: var(--heading-font);
  }
  .logo-box {
    span {
      font-weight: 700;
      color: var(--font-color-sec);
    }
  }
  .collapse {
    .nav-item {
      a {
        color: var(--font-color-sec);
        font-family: var(--subheading-font);
        font-weight: 600;
        border-radius: 2rem;
        position: relative;

        span {
          position: relative;
          &::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 3px;
            transform: scaleX(0);
            background: var(--accent-color);
            border-radius: 100px;
            bottom: -0.5rem;
            transition-duration: 200ms;
          }
        }
        &:hover span {
          color: var(--accent-color);
          &::before {
            transform: scaleX(1);
          }
        }
      }
    }
  }
}

/* Scroll Spy */
.navbar:has(a.active) {
  li:has(a.active) {
    a {
      color: var(--accent-color);
      /* background: var(--accent-color); */
    }

    a span {
      &::before {
        transform: scaleX(1);
      }
    }
  }
}