/* START CUSTOM BUTTONS v10 */
#quick-links-v1 {
  position: relative;
  padding-block: 30px;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
  background: var(--section-bg-color, #fff);
  --icon-primary-color: var(--primary-color);
  --icon-secondary-color: var(--secondary-color);

  @media only screen and (min-width: 1280px) {
    padding-block: 45px;
  }
  *,
  *::after,
  *::before {
    box-sizing: border-box;
  }

  &:has(.animated-button-text:empty) {
    display: none !important;
  }

  .animated-buttons__list {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    --cols: 1;

    &:has(> :nth-child(5)) {
      justify-content: space-evenly;
    }

    @media only screen and (min-width: 400px) {
      flex-direction: row;
      align-items: flex-start;
      flex-wrap: wrap;
      --cols: 2;

      &:has(> :nth-child(6):last-child) {
        --cols: 3;
      }
    }
    @media (min-width: 980px) {
      &:has(> :nth-child(5):last-child) {
        --cols: 4;
      }
      &:has(> :nth-child(5):last-child),
      &:has(> :nth-child(6):last-child) {
        --cols: 5;
      }
    }

    & > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      isolation: isolate;
      padding: max(10px, 2vw);
      max-width: calc(100% / var(--cols));

      &:hover .icon svg {
        transform: scale(1.05);
      }
    }

    .icon {
      order: -1;
      --icon-height: var(--icon-size, 80px);

      .button-icon:not(.lottie-icon) svg {
        margin-inline: auto;
        height: var(--icon-height);
        width: auto;
        margin-bottom: 10px;
        transition: transform 0.35s ease-in-out;

        .button-icon:not(:has(+ .button-icon)) {
          display: block !important;
        }
        * {
          fill: var(--icon-primary-color, var(--primary-color));
        }
      }

      .lottie-icon {
        height: calc(var(--icon-height) + 5px);
        width: auto;
        display: block;
        margin-bottom: 5px;
      }

      @media (max-width: 980px) {
        --icon-height-mobile: calc(var(--icon-height) * 0.8);
        .lottie-icon {
          height: calc(var(--icon-height-mobile) + 5px);
        }
        .button-icon:not(.lottie-icon) svg {
          height: var(--icon-height-mobile);
        }
      }
    }
    .animated-button-text {
      font-size: clamp(17px, calc(9.762px + 0.952vw), 25px);
      line-height: 1.1;
      font-weight: 700;
      color: var(--button-text-color, var(--primary-color));
      text-align: center;

      a {
        color: currentColor;
        text-decoration: none;
        display: block;

        &::after {
          position: absolute;
          z-index: 1;
          content: "";
          inset: 0;
        }
      }
    }
  }
}
#quick-links-v1 svg#waves {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
    content: '';
    width: 100%;
    height: 210px;
    max-height: 80%;

    @media only screen and (max-width: 480px) {
        height: 250px;
    } 
}
/* END CUSTOM BUTTONS v10 */