#faq {
  position: relative;
  isolation: isolate;
}

.faq-row {
  display: flex;
  gap: 30px;
}

.faq-categories {
  flex: 1 1 auto;
  /* Allow it to grow and shrink based on available space */
  max-width: 30%;
  /* Set the maximum width to 20% */
  width: 100%;

}

.faq-contents {
  flex: 1;
}

.faq-categories ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--border_radius);
  height: max-content;
  overflow: hidden;
  position: sticky;
  top: 80px;
}

.faq-categories ul li {
  color: var(--color_white_opacity_80);
  line-height: 60px;
  padding: 0 20px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--common_transition);
  background-color: var(--color_light_black);
  position: relative;
}

.faq-categories ul li:first-child {
  padding-top: 10px;
}

.faq-categories ul li:hover {
  color: var(--color_white);
  background-color: var(--color_medium_black);
}

.faq-categories ul li:last-child {
  padding-bottom: 10px;
}

.faq-categories ul li.active {
  background-color: var(--color_black);
  color: var(--color_white)
}

.faq-categories ul li.active+li {
  border-top-right-radius: var(--border_radius);
}

.faq-categories ul li.has-radius {
  border-bottom-right-radius: var(--border_radius);
}

.faq-categories ul li.active .top-circle {
  position: absolute;
  content: "";
  width: 25px;
  height: 25px;
  background-image: linear-gradient(to bottom right, var(--color_light_black) 75%, var(--color_black) 25%);
  top: -25px;
  right: 0;
  isolation: isolate;
}

.faq-categories ul li:hover .top-circle {
  background-image: linear-gradient(transparent, transparent);
}

.faq-categories ul li:hover .top-circle::after {
  background-color: transparent;
}

.faq-categories ul li.active .top-circle::after {
  position: inherit;
  content: "";
  inset: 0;
  background-color: var(--color_light_black);
  border-radius: 50%;
}

.faq-content:not(.active) {
  display: none;
}

.faq-content .year-content-wrapper .accordion-header h3 {
  font-size: 1.1rem;
}

.faq-content .year-content-wrapper .accordion-header {
  padding: 20px 1.5rem;
}

.faq-content .accordion-content {
  padding: 20px 1.5rem;
}

.accordion-content ol li {
  color: var(--color_white_opacity_80);
}

.faq-content .year-content-accordion:not(:last-child) {
  margin-bottom: 15px;
}

.faq-content .accordion-button .accordion-arrow {
  width: 14px;
}

.more-faq-wrapper {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--common_transition);
}

.more-faq-wrapper.active {
  max-height: 1000px;
  opacity: 1;
  visibility: visible;
  pointer-events: unset;
}

.more-faq-button {
  cursor: pointer;
  color: var(--color_white);
  text-decoration: underline;
  font-weight: 600;
}

.year-content-accordion::before {
  display: none !important;
}

.year-content-accordion {
  padding-left: 0 !important;
  position: unset !important;
}

@media screen and (max-width: 768px) {
  .faq-row {
    display: block;
  }

  .faq-categories {
    max-width: unset;
    margin-bottom: 25px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .faq-categories::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .faq-categories ul {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: 12px;
  }

  .faq-categories ul li {
    border-radius: 20px;
    line-height: 30px;
    font-weight: 400;
    border: 1px solid transparent !important;
    padding: 0 12px;
  }

  .faq-categories ul li.active {
    background-color: var(--color_dark_pink);
    border: 1px solid var(--color_pink) !important;
  }

  .faq-categories ul li:first-child {
    padding-top: 0;
  }

  .faq-categories ul li:last-child {
    padding-bottom: 0;
  }

  .faq-content .year-content-wrapper .accordion-header {
    padding: 10px;
  }

  .faq-content .year-content-wrapper .accordion-header h3 {
    font-size: 14px;
  }

  .faq-content .accordion-content {
    padding: 10px;
  }

  .faq-content .accordion-button .accordion-arrow {
    width: 12px;
  }

}