/* timeline */
.timeline--head {
  color: var(--c-white);
}
.section--timeline .btns--box {
  justify-content: center;
}

.section-wrapper.timeline {
  background-color: var(--c-primary);
}
.timeline-slide__number {
  font-size: 9rem;
  line-height: 1;
  font-variation-settings: var(--fw-500);
  background: linear-gradient(90deg, #cd6c58 46%, #964b8b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.timeline-slide {
  background-color: #fff;
  -webkit-mask-image: url(../../img/masks/mask-timeline.svg);
  mask-image: url(../../img/masks/mask-timeline.svg);
  padding: 5rem 10.5rem 5rem 14rem;
  display: flex;
  align-items: center;
  gap: 3rem;
}
.timeline-slide__title {
  font-size: var(--fs-16);
  font-variation-settings: var(--fw-600);
  margin-bottom: 1rem;
}
.timeline-slide-details {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 2rem;
}
.timeline-slide__bg {
  background: linear-gradient(90deg, #1900ff, #cd6c58);
  -webkit-mask-image: url(../../img/masks/mask-timeline.svg);
  mask-image: url(../../img/masks/mask-timeline.svg);
  height: 19rem;
  width: 90%;
  position: absolute;
}
.timeline-slide__bg.start {
  top: 0;
  right: 0;
}
.timeline-slide__bg.end {
  bottom: 0;
  left: 0;
}
.sw-wrap--timeline .sw {
  position: relative;
  padding: 3rem 0;
}
.sw-wrap--timeline {
  margin: 7rem 12rem;
}
.section-timeline .btns--box {
  justify-content: center;
}
/* timeline 2 */

.timeline-grids {
  display: grid;
  grid-template-columns: repeat(99, minmax(1.1rem, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  /* direction: ltr; */
  margin-bottom: 3rem;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin-left: 4rem;
}
.timeline-col {
  position: relative;
  grid-column: var(--g1) / var(--g2);
}

.timeline-tooltip {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  bottom: calc(100% + 2rem);
  z-index: 45;
  background: var(--c-white);
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 30rem;
  border-radius: var(--br-30);
  padding: 1.8rem;
  direction: rtl;
  font-size: var(--fs-13);
  transform: translateX(calc(50% + 3.3rem)) translateY(0.3rem);
  border: 1px solid var(--c-neutral-250);
  right: 100%;
  transition: var(--t-ease) var(--ease2);
  color: var(--c-primary);
}
.timeline-tooltip::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' fill='none' viewBox='0 0 52 16'%3E%3Cg%3E%3Cpath stroke='%23DDDCE6' d='M-74.004-193.5h200c17.397 0 31.5 14.103 31.5 31.5v131c0 17.397-14.103 31.5-31.5 31.5H51.054a14.644 14.644 0 0 0-12.972 7.849c-5.107 9.75-19.065 9.75-24.172 0A14.644 14.644 0 0 0 .938.5h-74.942c-17.397 0-31.5-14.103-31.5-31.5v-131c0-17.397 14.103-31.5 31.5-31.5Z' style='&%2310;' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-size: contain;
  position: absolute;
  width: 3.5rem;
  height: 1.2rem;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-0.1px);
}
.timeline__btn {
  background: linear-gradient(
    90deg,
    #1900ff,
    #7769f8 31%,
    #cd6c58 68%,
    #1900ff
  );
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #fff;
  padding: 0.5rem 2.5rem 0.5rem 2rem;
  background-position: calc(100% + (((var(--g1)) * 100rem) / 100)) 0;
  background-size: 100rem 100%;
  position: relative;
  width: 100%;
  cursor: pointer;
  --c: var(--c-primary);
  /* min-width: 6.5rem; */
}
.timeline__btn.mode--sm {
  padding: 0;
  justify-content: center;
}
.timeline-end::after,
.timeline-end::before,
.timeline__btn::after,
.timeline__btn::before {
  content: "";
  position: absolute;
  -webkit-mask-image: url(../../img/masks/mask-timeline.svg);
  mask-image: url(../../img/masks/mask-timeline.svg);
  top: 0;
  bottom: -0.5px;
  width: 3.3rem;
  --webkit-mask-repeat: no-repeat;
  --webkit-mask-position: center;
  --webkit-mask-size: 100% 100%;
  pointer-events: none;
  background: var(--c-primary);
}
.timeline-tooltip__title,
.timeline-tooltip__desc {
  /* opacity: 0; */
  /* transform: translateY(-0.5rem) scale(1.04); */
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.timeline-tooltip__title {
  font-size: var(--fs-14);
  margin-bottom: 0.5rem;
  font-variation-settings: var(--fw-500);
  /* transition: 0.5s var(--ease2); */
}
.timeline-tooltip__desc {
  text-align: justify;
  /* transition: 0.5s var(--ease2); */
}
.timeline-col:hover .timeline-tooltip,
.timeline-col:focus-visible .timeline-tooltip {
  transform: translateX(calc(50% + 3.3rem)) translateY(0);
  opacity: 1;
  visibility: visible;
}
/* .timeline-col:hover .timeline-tooltip__title,
.timeline-col:hover .timeline-tooltip__desc,
.timeline-col:focus-visible .timeline-tooltip__title,
.timeline-col:focus-visible .timeline-tooltip__desc {
  transform: translateY(0);
  opacity: 1;
} */
.timeline__icon {
  width: 3.2rem;
  height: 3.2rem;
  background: var(--c-white);
  border-radius: 50%;
  flex: none;
  transition: var(--t-ease) var(--ease2);
  --c-: var(--c-primary);
  margin-top: 0.5px;
  position: relative;
  overflow: hidden;
}

.timeline__icon__bg {
  inset: 0;
  position: absolute;
  background: var(--c-primary);
  transform: scale(0);
  transition: var(--t-ease) var(--ease2);
  border-radius: 50%;
}
.timeline-col:hover .timeline__icon__bg {
  transform: scale(1);
}
.timeline-col:hover .timeline__icon::after,
.timeline-col:hover .timeline__icon::before {
  background: var(--c-white);
}
.timeline-col:hover .icon-plus::before {
  transform: rotate(45deg);
}
.timeline-col:hover .icon-plus::after {
  transform: rotate(-45deg);
}
.timeline-end::before,
.timeline__btn::before {
  left: -1px;
}
.timeline-end::after,
.timeline__btn::after {
  right: -1px;
  transform: rotateY(180deg);
}

.timeline-lines-wrap {
  overflow-x: auto;
  width: calc(100% + (var(--gutter-container) * 2));
  margin-right: calc(-1 * var(--gutter-container));
}
.timeline-lines {
  position: relative;
  padding: 17rem 0 10rem;
  margin: 0 15rem;
  background-size: 14.25%;
  background-image: repeating-linear-gradient(
    to right,
    #7769f8,
    #7769f8 0.2px,
    #00000000 0.5px,
    #00000000
  );
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -moz-user-select: none;
}
.timeline-lines::before {
  content: "";
  background: linear-gradient(
    180deg,
    var(--c-primary),
    transparent,
    var(--c-primary)
  );
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.timeline-start {
  position: absolute;
  left: calc(100% + 1.4rem);
  top: 50%;
  transform: translateY(calc(-50% - 2.5rem));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  color: var(--c-white);
}
.timeline-start .ic-arrow-up-right {
  display: block;
  transform: rotate(-135deg);
  font-size: 1.6rem;
}
.timeline-start::before {
  content: "";
  display: block;
  background-image: url(../../img/start-timeline.svg);
  width: 10rem;
  height: 7rem;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.timeline-end {
  position: absolute;
  right: 100%;
  background: var(--c-primary-400);
  transform: translateX(50%);
  top: 65.3%;
  min-width: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.5rem;
}
.timeline-end i {
  background: var(--c-white);
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--c-primary);
  z-index: 2;
}
.btns-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  -moz-column-gap: 10rem;
  column-gap: 10rem;
  row-gap: 1rem;
  flex-wrap: wrap;
  /* margin-top: -5rem; */
  position: relative;
  z-index: 2;
}
.timeline-img_between {
  max-width: 18rem;
}
.timeline-img_between img {
  width: 100%;
}
/**************************/
/* BELOW 360px */
/**************************/
@media (min-width: 22.5em) {
}
/**************************/
/* BELOW 576px */
/**************************/
@media (min-width: 36em) {
}

/**************************/
/* ABOVE 800px */
/**************************/

@media (min-width: 50em) {
  .timeline-grids {
    grid-template-columns: repeat(99, minmax(1rem, 1fr));
  }
  .timeline-lines {
    margin: 0 12rem;
  }
  .timeline-lines,
  .timeline-grids {
    width: unset;
  }
  .timeline-lines-wrap {
    overflow: hidden;
    width: unset;
    margin: unset;
  }
  .btns-timeline {
    flex-direction: row;
  }
}

/**************************/
/* ABOVE 1024px */
/**************************/
@media (min-width: 64em) {
}
/**************************/
/* ABOVE 1200px */
/**************************/
@media (min-width: 75em) {
}