/* Start custom CSS for column, class: .elementor-element-9f17967 */<!-- BAT scrolling line -->
<svg class="bat-line" viewBox="0 0 1920 2000" xmlns="http://www.w3.org/2000/svg">
  <path d="M1987.5 2.60229C1944.83 72.6023 1825.7 220.902 1690.5 254.102C1521.5 295.602 1198 269.102 1070.5 348.102C943 427.102 650 611.602 642.5 746.602C635 881.602 893.5 1073.6 931.5 1069.6C969.5 1065.6 1138.5 983.602 1104.5 746.602C1070.5 509.602 646 501.602 529.5 547.102C413 592.602 213.5 734.602 165 926.602C116.5 1118.6 52.5 1358.6 45 1516.6C37.5 1674.6 63.5 1900.1 3.5 1967.6C-56.5 2035.1 -177 1960.1 -207 1915.1"
  />
</svg>

<style>
  .bat-line {
    width: 100%;
    height: auto;
  }

  .bat-line path {
    fill: none;
    stroke: #007BC1;
    stroke-opacity: 0.3;
    stroke-width: 10;

    /* line-drawing magic */
    stroke-dasharray: 6000;
    stroke-dashoffset: 6000;
    transition: stroke-dashoffset 3s ease-out;
  }

  .bat-line.is-drawn path {
    stroke-dashoffset: 0;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const line = document.querySelector('.bat-line');
    if (!line) return;

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          line.classList.add('is-drawn');
          observer.unobserve(line); // run only once
        }
      });
    }, { threshold: 0.2 });

    observer.observe(line);
  });
</script>/* End custom CSS */