/* container */
.sub-menu {
   position: sticky;
  top:1000px
  z-index: 99;
}

/* layout */
.sub-menu__list {
  display: flex;
  gap: 40px; /* slightly tighter for more balanced nav feel */
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}

/* item */
.sub-menu__item {
  position: relative;
}

/* link base */
.sub-menu__link {
  display: inline-flex;
  align-items: center;
  gap: 0px;
  text-decoration: none;

  color: #323232;
  font-weight: 500;

  padding: 14px 0;
  position: relative;

  transition: color 0.2s ease;
}

/* hover state */
.sub-menu__link:hover {
  color: #323232;
}

/* number styling */
.sub-menu__number {
  color: #9ca3af;
  font-size: 14px;
  transition: color 0.2s ease;
}

/* active state text */
.sub-menu__item.active .sub-menu__link {
  color: #323232;
  font-weight: 500;
}

/* active number emphasis */
.sub-menu__item.active .sub-menu__number {
  color: #007a51;
}

/* ✅ smoother underline (better than hard bar) */
.sub-menu__item::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 4px;
  width: 100%;

  background-color: #007a51;
  border-radius: 0px;

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

/* active underline */
.sub-menu__item.active::after {
  transform: scaleX(1);
}

/* hover underline preview (optional but feels premium) */
.sub-menu__item:hover::after {
  transform: scaleX(1);
  
}

.sub-menu__item.active .sub-menu__link {
  background-color: #ffffff;
  
  padding-left: 10px;
  padding-right: 10px;
}