.tab-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -39px;
  width: 100%;
  padding: 0 18px;

  .tab, .aba {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 64px;
    background-color: #1D9E9A;
    border-radius: 5px;
    max-width: 352px;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Montserrat Alternates', sans-serif;
    color: #fff;
    transition: all ease-in-out .3s;
    border: 0;
    z-index: -1;
    padding: 0 15px;
    line-height: 25px;

    &::before {
      content: '';
      display: block;
      width: 29.09px;
      height: 29.59px;
      background-color: transparent;
      position: absolute;
      left: 50%;
      transform: translateX(-50%) rotate(135deg);
      bottom: -2px;
      z-index: -1;
      transition: all ease-in-out .3s;

    }

    &.active {
      &::before {
        background-color: #1D9E9A;
      }

      &:hover {
        &::before {
          background-color: #65D98B;
        }
      }
    }

    &:hover {
      background-color: #65D98B;
    }

    // Telas até SM
    @include media($xs-max) {
      font-size: 18px;
      line-height: 23px;
    }
  }

  // Telas até SM
  @include media($xs-max) {
    gap: 15px;
  }
}

.column-tab-wrapper {
  // position: sticky;
  // top: 30px;

  .swiper-wrapper {
    gap: 10px;
    position: sticky;
    top: 30px;
    bottom: 70px;

  }

  .tab, .aba {
    position: relative;
    display: flex;
    align-items: center;
    text-align: start;
    width: 256px;
    height: 64px;
    background-color: #1D9E9A;
    border-radius: 5px;
    border: 0;
    outline: 0;
    padding: 0 46px 0 24px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    font-family: 'Montserrat Alternates', sans-serif;
    line-height: 17px;
    transition: all ease-in-out .3s;
    margin: 0 auto;

    &.active {
      background-color: #65D98B;
    }

    &::before {
      display: block;
      content: url("data:image/svg+xml,%3csvg width='14' height='23' viewBox='0 0 14 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 2L11.5079 11.5079L2 21.0157' stroke='white' stroke-width='3'/%3e%3c/svg%3e");
      position: absolute;
      top: calc(50% + 2px);
      transform: translateY(-50%);
      right: 25px;
      transition: all ease .3s;
    }

    &:hover {
      background-color: #65D98B;

      &::before {
        transform: translateY(-50%) translateX(8px);
      }
    }
  }

  // Telas até LG
  @include media($md-max) {
    flex-direction: row;
    overflow: visible;

    .tab {
      width: 188px;
      text-align: center;
      margin: unset;
    }
  }
}

// -----------------------------------------------------------------------------
// Slider com Tabs
// -----------------------------------------------------------------------------
.swiper-tabs {
  width: 1065px;
  max-width: 100%;
  padding: 8px 0;

  .swiper-slide {
    width: 33.333333% !important;

    // Telas até MD
    @include media($sm-max) {
      width: 50% !important;
    }

    // Telas até SM
    @include media($xs-max) {
      width: 100% !important;
    }
  }

  // Telas até XL
  @include media($lg-max) {
    padding: 8px 69px;
  }
}

// Navegação do Slider
.tab-wrapper {
  z-index: 10;

  .swiper-button-prev {
    width: 64px;
    min-width: 64px;
    height: 64px;
    background-color: #1D9E9A;
    border-radius: 5px;
    background-position: center;
    background-image: url("data:image/svg+xml,%3csvg width='13' height='20' viewBox='0 0 13 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 2L10 10L2 18' stroke='white' stroke-width='3' stroke-linecap='round'/%3e%3c/svg%3e");
    left: -69px;

    &:hover {
      background-color: #65D98B;
    }

    // Telas até XL
    @include media($lg-max) {
      left: 0;
    }
  }

  .swiper-button-next {
    width: 64px;
    min-width: 64px;
    height: 64px;
    background-color: #1D9E9A;
    border-radius: 5px;
    background-position: center;
    background-image: url("data:image/svg+xml,%3csvg width='13' height='20' viewBox='0 0 13 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 2L10 10L2 18' stroke='white' stroke-width='3' stroke-linecap='round'/%3e%3c/svg%3e");
    right: -69px;

    &:hover {
      background-color: #65D98B;
    }

    // Telas até XL
    @include media($lg-max) {
      right: 0;
    }
  }

  // Telas até SM
  @include media($xs-max) {
    padding: 0 15px;
  }
}