/* Timeline styles */
  .timeline {
    position: relative;
    white-space: nowrap;
    padding: 0 10px;
    margin: 0 auto;
    display: grid;
    align-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
  }
  
  .timeline::before,
  .timeline::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 30px;
    width: 100px;
    z-index: 2;
  }

  .timeline::before {
    left: 340px;
  }

  .timeline::after {
    right: 0;
  }

  .timeline__list {
    font-size: 0;
    padding: 255px 0;
    transition: all 1.5s;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scrollbar-color: #f3f3f3 #66CD00;
  }

  .timeline__list::-webkit-scrollbar {
    height: 12px;
  }

  .timeline__list::-webkit-scrollbar-thumb,
  .timeline__list::-webkit-scrollbar-track {
    border-radius: 92px;
  }

  .timeline__list::-webkit-scrollbar-thumb {
    background: #F3F3F3;
  }

  .timeline__list::-webkit-scrollbar-track {
    background: #66CD00;
  }

  .timeline__list-item {
    position: relative;
    display: inline-block;
    list-style-type: none;
    width: 150px;
    height: 5px;
    text-align: center;
    background: none;
    border-bottom: 3px dotted #66CD00;
    scroll-snap-align: start;
  }

  .timeline__list-item:last-child {
    width: 150px;
  }

  .timeline__list-item:not(:first-child) {
    margin-left: 14px;
  }

  /* .timeline__list-item:not(:last-child)::after */
  .timeline__list-item::after{
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 1px);
    width: 16px;
    height: 16px;
    transform: translateY(-50%) rotate(45deg);;
    background: #66CD00;
    z-index: 1;
    border-radius: 50%;
  } 
  
  .timeline__list-item:last-child>.timeline__content{
    left: calc(60% - 45px);
  }

  .timeline__content {
    position: absolute;
    left: calc(50% + -30px);
    width: 225px;
    padding: 15px;
    font-size: 1.1rem;
    white-space: normal;
    text-align: center;
    background: #f3f3f3;
  }

  .timeline__content::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
  }

  .timeline__list-item:nth-child(even) .timeline__content {
    top: -30px;
    transform: translateY(-100%);
    border-radius: 10px 10px 10px 0;
  }

  .timeline__list-item:nth-child(even) .timeline__content::before{
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 16px 0 16px;
    border-color: #F3F3F3 transparent transparent transparent;
  }

  .timeline__list-item:nth-child(odd) .timeline__content {
    top: calc(100% + 30px);
  }

  .timeline__list-item:nth-child(odd) .timeline__content::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 16px 16px 16px;
    border-color: transparent transparent #F3F3F3 transparent;
  }

  /* .timeline__time {
    display: block;
    font-size: 1.2rem;
    font-family: 'Arial Black', sans-serif !important;
  } */
  .timeline__description {
    font-size: 0.87rem;
    line-height: 1;
    color: #66cd00 !important;
    margin-bottom: 5px;
  }
  .timeline__image {
    max-height: 115px;
    max-width: 100%;
  }

  /* GENERAL MEDIA QUERIES */
  @media screen and (max-width: 800px) {
    .timeline {
      display: block;
    }

    .timeline::before,
    .timeline::after {
      width: 50px;
    }

    .timeline::before {
      left: 0;
    }

    .timeline__info {
      display: none;
    }
  }

  .timeline-controls {
    text-align: center;
    margin-top: -30px;
    background: #FFF !important;
    z-index: 5;
    position: relative;
    padding-top: 30px;
  }

  .timeline-controls .text-primary {
    background-color: #000;
    border: none;
    padding: 7px 20px;
    margin: 0px 8px;
    cursor: pointer;
  }

  .timeline-controls .text-primary svg {
    width: 36px;
    height: 36px;
    fill: #66CD00; 
  }

  .timeline-controls .text-primary:hover {
    background-color: #333;
  }