<script>
  
document.addEventListener("DOMContentLoaded", () => {
  const timelineContent = document.querySelector('.fb-timeline-one__list');
  const timelineContentBar = document.querySelector('.fb-timeline-one__bar');

  if (!timelineContent || !timelineContentBar) {
    console.error("Required elements not found in the DOM.");
    return;
  }

  let firstDiv = null;
  let lastDiv = null;

  for (let i = 0; i < timelineContent.children.length; i++) {
    const child = timelineContent.children[i];
    if (child.nodeName === "LI") {
      if (!firstDiv) {
        firstDiv = child;
      }
      lastDiv = child;
    }
  }

  if (!firstDiv || !lastDiv) {
    console.error("No <li> elements found in the timeline content.");
    return;
  }

  const firstDivHeight = firstDiv.offsetHeight;
  const lastDivHeight = lastDiv.offsetHeight;
  const averageDivHeight = (firstDivHeight + lastDivHeight) / 2;

  // Adjust the height of the timeline content bar
  timelineContentBar.style.height = `calc(100% - ${averageDivHeight}px)`;

  // Adjust the top position of the timeline content bar
  const topPosition = firstDivHeight / 2;
  timelineContentBar.style.top = `${topPosition}px`;

  // Intersection Observer to change icon color
  const icons = document.querySelectorAll('.fb-timeline-one__icon');

  const observerOptions = {
    root: null, // use the viewport as the container
    rootMargin: '0px',
    threshold: 0.5 // 50% of the icon needs to be visible
  };

  const observerCallback = (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('active');
      } else {
        entry.target.classList.remove('active');
      }
    });
  };

  const observer = new IntersectionObserver(observerCallback, observerOptions);

  icons.forEach(icon => {
    observer.observe(icon);
  });
});

</script>