.button-component 
  width: 100%
  .button-container
    a.active
      background-position: -100% center;
      padding-bottom: 1.75rem;
      color: rgb(180, 175, 154) !important;
      &:hover::before
        content: none !important;
      &:hover::after
        content: none !important;
      .button-anchor-box .button-icon
        background-position: -100% center;

    a.button-anchor
      text-decoration: none;
      display: flex;
      flex-direction: column;
      color: rgb(87, 84, 74);
      align-items: flex-start;
      background-image: linear-gradient(90deg, rgb(180, 175, 154) 50%, rgb(180, 175, 154) 50%, rgb(87, 84, 74) 50%, rgb(87, 84, 74) 100%);
      background-size: 200%;
      transition: all 0.2s linear 0s;
      cursor: default;
      &:hover
        background-position: -100% center;
        color: rgb(180, 175, 154);

      // line over the button
      &::before
        background-color: rgb(87, 84, 74);
        transition: all 0.2s ease 0s;
      &:hover::before
        height: 2px;
        z-index: -1;
        width: 100%;
        content: "";
        transform: translate(0px, -8px);
        pointer-events: none;
      
      // line under the button
      &::after
        background-color: rgb(87, 84, 74);
        transition: all 0.2s ease 0s;
      &:hover::after
        height: 2px;
        z-index: -1;
        width: 100%;
        content: "";
        transform: translate(0px, 8px);
        pointer-events: none;

      &:hover .button-anchor-box .button-icon
        background-position: -100% center;
      .button-anchor-box
        padding: 8px;
        display: flex;
        gap: 10px;
        -webkit-box-align: center;
        align-items: center;
        font-family: Manrope, sans-serif;
        font-weight: 500;
        font-size: 18px;
        .button-icon
          width: 5%;
          height: 5%;
          min-width: 20px;
          min-height: 20px;
          background-image: linear-gradient(90deg, rgb(87, 84, 74) 50%, rgb(87, 84, 74) 50%, rgb(218, 212, 187) 50%, rgb(218, 212, 187) 100%);
          background-size: 200%;
          transition: all 0.1s linear 0s;