.title-box{
  h3{
    font-family: Gilroy-Bold;
    font-size: 1rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1.667rem;
    letter-spacing: 0rem;
    color: #204f5e;
  }
  p{
    font-family: Gilroy-Medium;
    font-size: 0.833rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1.667rem;
    letter-spacing: 0rem;
    color: #204f5e;
  }
  .scroll-wrapper{
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: start;
    padding-bottom: 1rem;
    ul{
      flex: 1;
      height: 1.615rem;
      overflow: hidden;
      transition: height .3s ease;
      &.active{
        height: auto;
      }
      li{
        display: flex;
        align-items: start;
        flex-wrap: wrap;
        gap: 0.2rem 0.5rem;
        margin-bottom: 1rem;
        a{
          height: 1.615rem;
          border-radius: 8rem;
          padding: 0 1rem;
          line-height: 1.615rem;
          background-color: #f3fdfd;
          border: solid 0.038rem #c9dadd;
          font-family: Gilroy-Medium;
          font-size: 0.692rem;
          color: #204f5e;
        }
        a{
          border-radius: 8rem;
          padding: 0 1rem;
          line-height: 1.615rem;
          height: 1.615rem;
          background-color: #f3fdfd00;
          border: solid 0.038rem #c9dadd00;
          font-family: Gilroy-Medium;
          font-size: 0.692rem;
          color: #204f5e;
          &.active,
          &:hover{
            color: #fff;
            border-color: #204f5e;
            background-color: #204f5e;
          }
        }
      }
    }
    button{
      height: 1.615rem;
      width: 1.615rem;
      border-radius: 50%;
      color: #fff;
      border-color: #204f5e;
      background-color: #204f5e;
      font-size: 1rem;
      transform:rotate(90deg);
      transition: transform .3s ease;
    }
    .active+button{
      transform:rotate(-90deg)
    }
  }
}