.urble-section-faq-1,
.urble-section-faq-2 {
  display: flex;
  flex-direction: column;

  .urble-section-blocks {
    position: relative;
    display: flex;
    width: 1080px;
    max-width: 100%;
    margin: auto;
  }
}

.urble-section-faq-1 {
  height: 324px;
  margin-top: -148px;
  padding: 204px 0 64px;
  position: relative;
  z-index: 2;
  background: var(--_Prim-Color-green-50);

  .urble-section-blocks {
    justify-content: space-between;
    gap: 64px;
  }

  .urble-section-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 16px 0;

    h1,
    .urble-section-content-text {
      width: 484px;
      max-width: 100%;
    }
  }

  .urble-section_image {
    height: 810px;
    margin-top: -204px;
    margin-inline-end: 187px;
    z-index: -1;
    border-bottom-right-radius: 256px;
    border-bottom-left-radius: 256px;
  }
}

.urble-section-faq-2 {
  padding: 64px 0;

  .urble-section-blocks {
    align-items: flex-start;
    justify-content: space-between;
    gap: 64px;
  }
}

.urble-faq-menu-container {
  position: sticky;
  top: 120px;
  align-self: flex-start;
  width: 320px;
  flex: 0 0 320px;
}

.urble-faq-menu {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  border-radius: 24px;
  background: var(--urble-color-surface-primary-low-emphasis);

  > h2 {
    font-family: Quicksand;
    font-size: 20px;
    line-height: 28px;
    text-align: start;
  }
}

.urble-faq-menu-group {
  position: relative;

  h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    color: var(--_Prim-Color-dark-100-Brand);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    cursor: pointer;

    &::after {
      content: '+';
      color: var(--urble-color-surface-affirmative-default);
      font-size: 20px;
      font-weight: 400;
    }
  }

  &.is-open h3::after {
    content: '−';
  }
}

.urble-faq-menu-items,
.urble-faq-answers,
.urble-faq-answer-group,
.urble-faq-answer {
  display: flex;
  flex-direction: column;
}

.urble-faq-menu-items {
  display: none;
  gap: 8px;
  padding: 0 0 8px 16px;
  border-left: 2px solid var(--_Prim-Color-light-200);
}

.urble-faq-menu-group.is-open .urble-faq-menu-items {
  display: flex;
}

.urble-faq-menu-items > button {
  padding: 4px 0;
  border: 0;
  color: var(--_Prim-Color-dark-100-Brand);
  background: transparent;
  font-size: 14px;
  line-height: 20px;
  text-align: start;
  cursor: pointer;

  &:hover,
  &.active {
    font-weight: 700;
    background: var(--urble-linear-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.urble-faq-answers {
  gap: 96px;
  width: 638px;
  max-width: 100%;
  margin-top: 180px;
}

.urble-faq-answer-group {
  gap: 16px;

  > h2 {
    padding-bottom: 16px;
    border-bottom: 2px solid var(--_Prim-Color-light-200);
    font-size: 30px;
    line-height: 30px;
    text-align: start;
  }
}

.urble-faq-answer {
  gap: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--urble-color-surface-primary-low-emphasis);
  scroll-margin-top: 200px;

  &.active {
    background: var(--_Prim-Color-green-50);
    box-shadow: var(--urble-box-shadow-light);
  }

  h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    font-family: Quicksand;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    cursor: pointer;

    &::after {
      flex: 0 0 auto;
      content: '+';
      color: var(--urble-color-surface-affirmative-default);
      font-family: Roboto;
      font-size: 30px;
      font-weight: 400;
      line-height: 24px;
    }
  }

  &.is-open h3::after {
    content: '−';
  }
}

.urble-faq-answer-content {
  display: none;
  padding: 0 24px 24px;
  color: var(--_Prim-Color-dark-100-Brand);
  line-height: 24px;

  ul {
    padding-left: 24px;
    list-style: disc;
  }

  a,
  a:visited,
  a:hover,
  a:active {
    color: var(--_Prim-Color-dark-100-Brand);
    text-decoration: underline;
    text-decoration-color: var(--urble-color-surface-affirmative-default);
    text-underline-offset: 3px;
  }
}

.urble-faq-answer.is-open .urble-faq-answer-content {
  display: block;
}

@media screen and (max-width: 1120px) {
  .urble-faq-menu-container {
    position: static;
    width: 100%;
    flex-basis: auto;
  }
}