/** Start horizontal Timeline CSS Property **/
.horizontal-timeline {
    padding: var(--padding-tb-small) 0;
  }
  .horizontal-timeline .timeline-list {
    margin: auto;
  }
  .horizontal-timeline .timeline {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: end;
    padding: 100px 0;
  }
  .horizontal-timeline .timeline-item {
    position: relative;
    width: 20%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .horizontal-timeline .timeline-item:nth-child(odd) {
    transform: translateY(-100px);
  }
  
  .horizontal-timeline .timeline-item:nth-child(even) {
    transform: translateY(80px);
  }
  .horizontal-timeline .timeline:before {
    content: "";
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    right: 0;
    height: 134px;
    background: url("https://ninegravity.com/wp-content/themes/ninegravity/assets/images/horizontal-wave.svg") no-repeat;
  }
  .horizontal-timeline .timeline-item:after {
    content: "";
    height: 24px;
    width: 3px;
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--misty-rose-color);
  }
  .horizontal-timeline .timeline-item:nth-child(even):after {
    bottom: auto;
    top: -40px;
  }
  .timeline-item:nth-child(2):after {
    background-color: var(--lavender-blush-color);
  }
  .horizontal-timeline .timeline-item:nth-child(3):after {
    background-color: var(--plum-color);
  }
  .horizontal-timeline .timeline-item:nth-child(4):after {
    background-color: var(--hot-pink-color);
  }
  .horizontal-timeline .timeline-item:nth-child(5):after {
    background-color: var(--alice-blue-color);
  }
  .horizontal-timeline .timeline-item:nth-child(1) h3 {
    color: var(--misty-rose-color);
  }
  .horizontal-timeline .timeline-item:nth-child(2) h3 {
    color: var(--lavender-blush-color);
  }
  .horizontal-timeline .timeline-item:nth-child(3) h3 {
    color: var(--plum-color);
  }
  .horizontal-timeline .timeline-item:nth-child(4) h3 {
    color: var(--hot-pink-color);
  }
  .horizontal-timeline .timeline-item:nth-child(5) h3 {
    color: var(--alice-blue-color);
  }
  .horizontal-timeline .timeline-list:has(.timeline .timeline-item:nth-child(2)) {
    width: 40%;
  }
  .horizontal-timeline .timeline-list:has(.timeline .timeline-item:nth-child(3)) {
    width: 60%;
  }
  .horizontal-timeline .timeline-list:has(.timeline .timeline-item:nth-child(4)) {
    width: 80%;
  }
  .horizontal-timeline .timeline-list:has(.timeline .timeline-item:nth-child(5)) {
    width: 100%;
  }
  @media only screen and (max-width: 1199px) {
    .horizontal-timeline .timeline:before {
      height: 103px;
      background-size: auto 103px;
    }
  }
  @media only screen and (max-width: 991px) {
    .horizontal-timeline .timeline-list {
      max-width: 668px;
    }
    .horizontal-timeline .timeline:before {
      height: 74px;
      background-size: auto 74px;
    }
  }
  @media only screen and (max-width: 767px) {
    .horizontal-timeline .timeline-list {
      width: 100% !important;
    }
    .horizontal-timeline .timeline {
      flex-direction: column;
      align-items: center;
      overflow: hidden;
      justify-content: center;
      padding: 0;
      margin-top: 60px;
    }
    .horizontal-timeline .timeline:before {
      background: url("https://ninegravity.com/wp-content/themes/ninegravity/assets/images/vertical-wave.svg") no-repeat;
      height: 100%;
      background-position: top center;
      background-size: 132px auto;
    }
    .horizontal-timeline .timeline-item {
      width: 30%;
      height: 240px;
      justify-content: center;
    }
    .horizontal-timeline .timeline-item:nth-child(odd) {
      transform: translateY(0px) translateX(100px);
    }
    .horizontal-timeline .timeline-item:nth-child(even) {
      transform: translateY(0px) translateX(-100px);
    }
    .horizontal-timeline .timeline-item:after {
      content: "";
      height: 3px;
      width: 24px;
      left: -40px;
      top: 50% !important;
      transform: translateY(-50%);
    }
    .horizontal-timeline .timeline-item:nth-child(even):after {
      left: auto;
      right: -40px;
    }
  }
  /** End horizontal Timeline CSS Property **/