.tab {
  padding: 30px 0;
}
.nav-tabs {
  @apply flex overflow-scroll md:overflow-auto;
  justify-content: flex-start;
  gap: 32px;
  padding: 30px 20px;
  @screen lg {
    margin: 0 -20px;
    width: calc(100% + 40px);
    justify-content: center;
  }

  @screen md {
    margin: 0;
    width: 100%;
    justify-content: flex-start;
    gap: 20px;
    padding: 50px 20px;
  }
  @screen lg {
    justify-content: center;
  }
  .nav-item {
  }
  .nav-link {
    @apply heading-text text-[13px] md:text-base xl:text-lg relative leading-[100%] whitespace-nowrap;
    padding: 14px 0;

    @screen lg {
      padding: 18px 0;
    }
    &:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 1px;
      bottom: 0;
      left: 0;
      background-color: theme('colors.black');
      transform: scale(0);
      transform-origin: center center;
      transition: all 0.6s ease;
    }
    &:hover,
    &.active {
      &:after {
        transform: scale(1);
      }
    }
  }
}

.tab-content {
  position: relative;
  .slick-slide {
    height: auto !important;
  }
  .tab-pane {
    padding: 20px 0;
    // position: absolute;
    top: 0;
    left: 0;
    // visibility: hidden;
    // opacity: 0;
    transition: visibility 0.6s ease-out, opacity 0.6s ease-out;
    overflow: hidden;
    // &.active {
    position: relative;
    visibility: visible;
    opacity: 1;
    //
  }
}
