.timeline {
  .milestone {
    @apply
      overflow-hidden;
  }

  .single {
    @apply
      max-w-5xl
      flex-nowrap
      mx-auto
      mb-15
      flex

      lg:flex-nowrap
      lg:gap-32;

    div {
      @apply
        mt-6
        text-primary-500
        text-lg;
    }
  }

  .arrow-container {
    .swiper-button-prev {
      @apply
        absolute
        top-0
        bottom-0;
    }

    .swiper-button-next {
      @apply
        absolute
        top-0
        bottom-0;
    }
  }

  .custom-pagination {
    @extend .has-sm-font-size;
    @extend .alignfull;
    @apply
      flex
      flex-col
      gap-0
      relative
      items-center

      before:w-full
      before:h-px
      before:relative
      before:top-1.5
      z-0
      before:bg-primary-250;

    .wrapper {
      @apply
        flex
        justify-between
        w-full
        items-center;

      .pagination {
        &.active {
          .label,
          .circle {
            @apply
              opacity-50;
          }
        }
      }

      .label,
      .circle {
        @apply
          transition-all
          duration-300;
      }

      > div {
        @apply
          flex
          cursor-pointer
          items-center
          justify-between
          flex-col;

        &:hover {
          .circle,
          .label {
            @apply
              opacity-50;
          }
        }
      }
    }

    .external-circle {
      @apply
        h-6
        z-10
        w-6
        flex
        justify-center
        bg-white
        rounded-full;

      .circle {
        @apply
          bg-primary-500
          h-2.5
          w-2.5
          rounded-full;
      }
    }
  }

  h2 {
    @extend .has-4-xl-font-size;
  }
}
