//intro section box equal height code
 function setEqualHeight() {
  var maxHeight = 0;

  $(".ibox-head-5").each(function() {
      var currentHeight = $(this).height();
      maxHeight = Math.max(maxHeight, currentHeight);
  });

  $(".ibox-head-5").height(maxHeight);
}

// Initial equal height set
$(document).ready(function() {
  setEqualHeight();
});

// Recalculate equal height on window resize
$(window).resize(function() {
  setEqualHeight();
});


//Key Themes section box equal height code
function setEqualHeightForKeyTheme() {
  var maxHeight = 0;

  $(".kt-eq-height").each(function () {
      var currentHeight = $(this).height();
      maxHeight = Math.max(maxHeight, currentHeight);
  });

  $(".kt-eq-height").height(maxHeight);
}

function removeEqualHeightForKeyTheme() {
  $(".kt-eq-height").height('auto');
}
// Initial check on page load
$(document).ready(function () {
  if ($(window).width() > 767) {
      setEqualHeightForKeyTheme();
  }
});
// Check on window resize
$(window).resize(function () {
  if ($(window).width() > 767) {
      setEqualHeightForKeyTheme();
  } else {
      removeEqualHeightForKeyTheme();
  }
});

//insights section box head equal height code
function setEqualHeightInsightsBox() {
  var maxHeight = 0;

  $(".insights-box-head").each(function () {
      var currentHeight = $(this).height();
      maxHeight = Math.max(maxHeight, currentHeight);
  });

  $(".insights-box-head").height(maxHeight);
}

function removeEqualHeightInsightsBox() {
  $(".insights-box-head").height('auto');
}
// Initial check on page load
$(document).ready(function () {
  if ($(window).width() > 767) {
    setEqualHeightInsightsBox();
  }
});
// Check on window resize
$(window).resize(function () {
  if ($(window).width() > 767) {
    setEqualHeightInsightsBox();
  } else {
    removeEqualHeightInsightsBox();
  }
});


//insights section box text equal height code
function setEqualHeightInsightsBoxText() {
  var maxHeight = 0;

  $(".insights-box-text").each(function () {
      var currentHeight = $(this).height();
      maxHeight = Math.max(maxHeight, currentHeight);
  });

  $(".insights-box-text").height(maxHeight);
}

function removeEqualHeightInsightsBoxText() {
  $(".insights-box-text").height('auto');
}
// Initial check on page load
$(document).ready(function () {
  if ($(window).width() > 767) {
    setEqualHeightInsightsBoxText();
  }
});
// Check on window resize
$(window).resize(function () {
  if ($(window).width() > 767) {
    setEqualHeightInsightsBoxText();
  } else {
    removeEqualHeightInsightsBoxText();
  }
});


//slider perspective
$(document).ready(function () {
  $(".btm-box-row").owlCarousel({
    items: 1,
    loop: false,
    autoplay: false,
    autoplayTimeout: 5000, 
    nav: true, 
    navSpeed: 500,
    dotsSpeed: 500,
    dots: true,
    responsive: {
      0: {
        items: 10,
        touchDrag: false,
      },
      768: {
        items: 3
      },
      992: {
        items: 3
      },
      1200: {
        items: 4
      }
    }
  });
});
//Youtube video carousel
$(document).ready(function () {
  $(".video-outer").owlCarousel({
    items: 1,
    loop: true,
    autoplay: false,
    autoplayTimeout: 5000, 
    nav: true, 
    navSpeed: 500,
    dotsSpeed: 500,
    dots: true,
  });

   // Finds all iframes from youtubes and gives them a unique class
   $('iframe[src*="https://www.youtube.com/embed/"]').addClass("youtube-iframe");

});

//top banner text class
document.addEventListener("DOMContentLoaded", function() {
  setTimeout(function() {
    var wnsHead2 = document.querySelector('.wns-head2');
    wnsHead2.classList.add('loaded-pg');
  }, 300); 
});


//left red radical background
document.addEventListener('DOMContentLoaded', function() {
  var fluidRed = document.getElementById('fluidRed');

  fluidRed.addEventListener('mousemove', function(e) {
    var posX = e.pageX / window.innerWidth;

    var moveX = (posX - 0.5) * 300; // Adjust the movement factor as needed
    var moveY = (posX - 0.5) * 20; // Adjust the movement factor as needed

    fluidRed.style.transform = `translateX(${moveX}px)`;
  });
});
//Bottom red circle radical background
document.addEventListener('DOMContentLoaded', function() {
  var fluidCirc = document.getElementById('fluidCirc');

  fluidCirc.addEventListener('mousemove', function(e) {
    var posX = e.pageX / window.innerWidth;
    var posY = e.pageY / window.innerHeight;

    var moveX = (posX - 0.5) * 200; // Adjust the movement factor as needed
    var moveY = (posY - 0.5) * 8;

    fluidCirc.style.transform = `translate(${moveX}px, ${moveY}px)`;
  });
});
// Header scroll fixed
$(document).ready(function () {
  var navSection = $(".nav-section");
  var section = $(".section");
  var navOffset = navSection.offset().top;
  var lastScrollTop = 0;

  $(window).scroll(function () {
    var scrollTop = $(this).scrollTop();

    // Check the scroll direction
    if (scrollTop > lastScrollTop) {
      // Scrolling down
      navSection.removeClass("scroll-up").addClass("scroll-down");
    } else {
      // Scrolling up
      navSection.removeClass("scroll-down").addClass("scroll-up");
    }

    // Update last scroll position
    lastScrollTop = scrollTop;

    // Toggle the 'fixed' class based on the scroll position
    if (scrollTop > navOffset) {
      navSection.addClass("fixed");
    } else {
      navSection.removeClass("fixed");
    }
  });

});



// Accordions of section models
$(document).on("click", ".naccs .menu div", function () {
  var numberIndex = $(this).index();

  if (!$(this).is("active")) {
      $(".naccs .menu div").removeClass("active");
      $(".naccs ul li").removeClass("active");

      $(this).addClass("active");
      $(".naccs ul").find("li:eq(" + numberIndex + ")").addClass("active");

      var listItemHeight = $(".naccs ul")
          .find("li:eq(" + numberIndex + ")")
          .innerHeight();
      $(".naccs ul").height(listItemHeight + "px");
  }
});

 //Use cases carousel
    initSlider();

    function initSlider() {
        $(".owlProgress").owlCarousel({
            items: 1,
            singleItem: true,
            loop: true,
            autoplay: true,
            nav: true,
            autoplayTimeout: 5000,
            navSpeed: 5000,
            dotsSpeed: 5000,
            autoplaySpeed: 5000,
            touchDrag  : false,
            mouseDrag  : false,
            animateOut: 'fadeOut',
            // animateIn: 'fadeIn',
            onInitialized: startProgressBar,
            onTranslate: resetProgressBar,
            onTranslated: startProgressBar,
            dots: true,
            dotsData: true,
            dotsContainer: '.owl-dots'
        });
        //insights  section carousel js
    $(".ins-box-row").owlCarousel({
      items: 1,
        loop: true,
        autoplay: true,
          autoplayTimeout: 4000, 
          nav: true, 
          navSpeed: 500,
          dotsSpeed: 500,
          autoplaySpeed: 600,
          dots: true,
          responsive: {
            0: {
              items: 1,
              touchDrag: false,
            },
            768: {
              items: 3
            },
            992: {
              items: 3
            },
            1200: {
              items: 4
            }
          }
    });
    //News  section carousel js
    $(".news-box-row").owlCarousel({
      items: 1,
      loop: true,
      autoplay: false,
          autoplayTimeout: 4000, 
          nav: true, 
          navSpeed: 500,
          dotsSpeed: 500,
          autoplaySpeed: 600,
          dots: true,
          responsive: {
            0: {
              items: 1,
              touchDrag: false,
            },
            768: {
              items: 3
            },
            992: {
              items: 3
            },
            1200: {
              items: 3
            }
          }
    });
    //differentiated  section carousel js
    $(".diff-box-row").owlCarousel({
      items: 1,
      loop: true,
      autoplay: true,
      autoplayTimeout: 5000, 
      nav: true, 
      navSpeed: 500,
      dotsSpeed: 500,
      autoplaySpeed: 600,
      dots: true,
      responsive: {
        0: {
          items: 1,
          touchDrag: false,
        },
        768: {
          items: 3
        },
        992: {
          items: 3
        },
        1200: {
          items: 3
        }
      }
    });
    }

    function startProgressBar() {
        // apply keyframe animation
        $(".owlProgress .owl-dot.active .slide-progress").css({
            width: "100%",
            transition: "width 5000ms"
        });
    }

    function resetProgressBar() {
        $(".owlProgress .owl-dot .slide-progress").css({
            width: 0,
            transition: "width 0ms"
        });
        $(".owlProgress .owl-dot.active .slide-progress").css({
          width: "100%",
          transition: "width 5000ms linear"
      });
    }

//For scroll text reveal animation
// Define the content for section 1
var text1 = "The Gen AI journey is no longer about exploration. As businesses move to scaled deployments, it’s about orchestrated rollouts, responsible adoption and delivering measurable value at speed.";

// Create spans dynamically for section 1
var contentDiv1 = document.getElementById('content1');

for (var i = 0; i < text1.length; i++) {
    var span1 = document.createElement('span');
    span1.className = 'opacity-span'

    span1.textContent = text1[i];
    contentDiv1.appendChild(span1);
}

// Define the content for section 2
var text2 = "At WNS, we blend Gen AI with deep domain expertise to drive purposeful outcomes — faster decision-making, scalable personalization and new levels of operational efficiency. With large language models at the core and governance by design, we help clients rapidly move from pilots to production.";

// Create spans dynamically for section 2
var contentDiv2 = document.getElementById('content2');
var coloredTextStartIndex2 = text2.indexOf("the power of Gen AI – contextualizing models to create custom solutions,");
var coloredTextEndIndex2 = coloredTextStartIndex2 + "the power of Gen AI – contextualizing models to create custom solutions,".length;

for (var i = 0; i < text2.length; i++) {
    var span2 = document.createElement('span');
    span2.className = 'opacity-span';

    span2.textContent = text2[i];
    contentDiv2.appendChild(span2);
}
// Define the content for section 3
var text3 = "Backed by decades of domain expertise, we create and contextualize custom solutions – leveraging pre-built, proprietary AI/ML models to meet the challenges of any industry.";

// Create spans dynamically for section 3
var contentDiv3 = document.getElementById('content3');
var coloredTextStartIndex3 = text3.indexOf("Backed by decades of domain expertise,");
var coloredTextEndIndex3 = coloredTextStartIndex3 + "Backed by decades of domain expertise,".length;

for (var i = 0; i < text3.length; i++) {
    var span3 = document.createElement('span');
    span3.className = 'opacity-span';


    span3.textContent = text3[i];
    contentDiv3.appendChild(span3);
}



window.addEventListener('scroll', function() {
  // Function to adjust opacity for a single section based on its trigger's position
  function adjustOpacity(sectionId, triggerSelector) {
      var triggerSectionDistanceFromTop = document.querySelector(triggerSelector).getBoundingClientRect().top;

      document.querySelectorAll(sectionId + ' .opacity-span').forEach(function(span, index, spans) {
          var distanceFromTop = span.getBoundingClientRect().top;
          var offsetPercentage = 55; // Adjust if necessary
          var offset = (window.innerHeight * offsetPercentage) / 100;
          var opacity = 1 - Math.max(0, (distanceFromTop - offset) / window.innerHeight);

          // If the trigger section is at the top, set opacity to 1, else calculate based on distance
          if (triggerSectionDistanceFromTop <= 0) {
              span.style.opacity = 1;
          } else {
              span.style.opacity = index / spans.length < opacity ? 1 : 0.2;
          }
      });
  }

  // Adjust opacity for each section with its specific trigger
  adjustOpacity('#content1', 'section#about');
  adjustOpacity('#content2', 'section#about-below'); // Hypothetical trigger section for #content2
  adjustOpacity('#content3', 'section#about-white'); // Hypothetical trigger section for #content3
});


// for menu active
// Get all the navigation links
const navLinks = document.querySelectorAll('.nav-item');

// Add scroll event listener to handle scroll
window.addEventListener('scroll', () => {
    const scrollPosition = window.scrollY;

    // Loop through each section to check if it's in the viewport
    navLinks.forEach(link => {
        const targetSection = document.querySelector(link.getAttribute('href'));

        // Check if targetSection is not null before accessing its properties
        if (targetSection && targetSection.offsetTop <= scrollPosition && targetSection.offsetTop + targetSection.offsetHeight > scrollPosition) {
            // Add the 'active' class to the link
            link.classList.add('active');
        } else {
            // Remove the 'active' class from the link
            link.classList.remove('active');
        }
    });
});

// for # remove from url
var navMenu = document.querySelector('nav.header-menu.desktop-menu');
var navLinks1 = navMenu.querySelectorAll('a');

navLinks1.forEach(function (link) {
  link.addEventListener('click', function (event) {
    event.preventDefault();
    // Get the target section id from the href attribute
    var targetId = this.getAttribute('href').substring(1);

    // Get the target section element
    var targetSection = document.getElementById(targetId);

    // Set the default offset to -80
    var offset = 0;

    // Scroll to the target section with the adjusted offset
    window.scrollTo({
      top: targetSection.offsetTop + offset,
      behavior: 'smooth'
    });
  });
});


// Assume navLinks2 is a NodeList of navigation links
const navLinks2 = document.querySelectorAll('.nav-link');
const sections = document.querySelectorAll('section');

function updateActiveNavLink() {
    let activeSectionId = null;

    sections.forEach(section => {
        const sectionTop = section.getBoundingClientRect().top;

        // Check if the section is at the very top of the viewport
        if (sectionTop === 0) {
            activeSectionId = section.getAttribute('id');
            return; // Exit the loop once the active section is found
        }
    });

    // If no section has top at 0, use the logic to find the first visible section
    if (!activeSectionId) {
        sections.forEach(section => {
            const sectionTop = section.getBoundingClientRect().top;
            const sectionHeight = section.offsetHeight;
            const windowHeight = window.innerHeight;

            // Check if the section is in view
            if (sectionTop <= windowHeight / 4 && sectionTop + sectionHeight >= windowHeight / 4) {
                activeSectionId = section.getAttribute('id');
                return; // Exit the loop once the first visible section is found
            }
        });
    }

    // Update nav links based on the active section
    navLinks2.forEach(link => {
        if (link.getAttribute('href') === '#' + activeSectionId) {
            link.classList.add('active');
            link.classList.remove('prev-active');
        } else {
            link.classList.remove('active');
            link.classList.add('prev-active');
        }
    });
}

// Listen for scroll events
window.addEventListener('scroll', updateActiveNavLink);

// Initial activation update in case the page is not started at the top
updateActiveNavLink();

 
//Faq section
document.addEventListener('DOMContentLoaded', function () {
  var faqItems = document.querySelectorAll('.faq-item');

  faqItems.forEach(function (item) {
    var question = item.querySelector('.faq-question');
    var answer = item.querySelector('.faq-answer');

    question.addEventListener('click', function () {
      faqItems.forEach(function (otherItem) {
        if (otherItem !== item) {
          otherItem.classList.remove('expanded');
        }
      });

      item.classList.toggle('expanded');
    });
  });
});
// youtube video popup
$(document).ready(function () {
  // Finds all iframes from youtubes and gives them a unique class
  $('iframe[src*="https://www.youtube.com/embed/"]').addClass("youtube-iframe");

  $("[id^='video-']").click(function () {
      var dataId = $(this).attr('id').replace('video-', ''); // Extract the number from the id
      $('.video-wrapper .video' + dataId).addClass('show');
  });
// scroll scale insights
ScrollReveal({ reset: true });

ScrollReveal().reveal(".show-once", {
    reset: false
});

ScrollReveal().reveal(".scaleUp", {
    duration: 2000,
    scale: 0.85
});
});
 // Youtube open and close popup
 function openPopup(popupId) {
  var overlay = document.getElementById('overlay');
  var popup = document.getElementById(popupId);

  overlay.style.display = 'flex';
  popup.style.display = 'block';

  // Add an event listener to stop event propagation when clicking inside the popup
  popup.addEventListener('click', function (event) {
      event.stopPropagation();
  });
}

function closePopup(popupId) {
  var overlay = document.getElementById('overlay');
  var popup = document.getElementById(popupId);

  overlay.style.display = 'none';
  popup.style.display = 'none';
  
}

$(document).ready(function() {
  var overlay1 = document.getElementById('overlay1');
  
  $("[data-id]").click(function() {
      var id = $(this).data("id");
      overlay1.style.display = 'flex';
      $("#" + id).fadeIn();
  });

  $(".close-btn").click(function() {
      $(this).closest(".popup-logo").fadeOut();
      overlay1.style.display = 'none';
  });

  $(".overlay1").click(function(event) {
      // Check if the clicked element is the overlay itself
      if (event.target === this) {
          $(".popup-logo").fadeOut();
          overlay1.style.display = 'none';
      }
  });

  // Prevent closing when clicking inside the popup (may not be needed with the new overlay check)
  $(".popup-logo").click(function(event) {
      event.stopPropagation();
  });
});


// Gen AI video
function playVideo(videoId) {
  // Get the video element using the provided ID
  var video = document.getElementById(videoId);

  // Pause the video (if it's playing)
  if (!video.paused) {
    video.pause();
  }

  // Set the current time to 0 and play the video
  video.currentTime = 0;
  video.play();
}


// for slick slider use cases
$(document).ready(function () {

  $(".slider1").slick({
    infinite: true,
    arrows: false,
    dots: false,
    autoplay: false,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 3,
    fade: false, // Add fade transition
    responsive: [
        {
            breakpoint: 768, // Adjust as needed
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2,
                arrows: true,
                // Add more settings for smaller screens if needed
            }
        },
        {
          breakpoint: 575, // Adjust as needed
          settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
              arrows: true,
              // Add more settings for smaller screens if needed
          }
      },
        // Add more breakpoints and settings as needed
    ]
});


  $(".slider").slick({
      infinite: true,
      arrows: true,
      dots: false,
      autoplay: false,
      speed: 500,
      // autoplaySpeed: 900000,
      slidesToShow: 1,
      slidesToScroll: 1,
      fade: false // Add fade transition
  });

  var percentTime;
  var tick;
  var time = 1;
  var progressBarIndex = 0;

  var progress = $('.inProgress');

  $('.progressBarContainer .progressBar').each(function (index) {
      var progress = "<div class='inProgress inProgress" + index + "'></div>";
      $(this).html(progress);
  });

  function startProgressbar() {
      resetProgressbar();
      percentTime = 0;
      tick = setInterval(interval, 24);
  }

  function interval() {
      if (($('.slider .slick-track div[data-slick-index="' + progressBarIndex + '"]').attr("aria-hidden")) === "true") {
          progressBarIndex = $('.slider .slick-track div[aria-hidden="false"]').data("slickIndex");

          $('.progressBar').removeClass('on');

          for (var i = 0; i <= progressBarIndex; i++) {
              $(".inProgress" + i).addClass('on');
              $(".progressBar").eq(i).addClass('active'); // Add active class
          }

          startProgressbar();
      } else {
          percentTime += 1 / (time + 5);
          $('.inProgress' + progressBarIndex).css({
              width: percentTime + "%"
          });
          if (percentTime > 0 && percentTime < 100) {
              $(".progressBar").eq(progressBarIndex).addClass('active'); // Ensure active class is added when progress bar starts
          }
          if (percentTime >= 100) {
              $('.slider').slick('slickNext');

              progressBarIndex++;

              if (progressBarIndex > $('.progressBar').length - 1) {
                  progressBarIndex = 0;
              }
              startProgressbar();
          }
      }
  }

  function resetProgressbar() {
      $('.inProgress').css({
          width: 0 + '%'
      }).parent().removeClass('active'); // Remove active class from all
      clearInterval(tick);
  }
  startProgressbar();

  $('.progressBarContainer div').click(function () {
      clearInterval(tick);
      var goToThisIndex = $(this).find("span").data("slickIndex");
      $('.slider').slick('slickGoTo', goToThisIndex, false);
      startProgressbar();
  });


});


// Function to replace image file extension to SVG when slider becomes active
function replaceImageExtension() {
  $(".slick-slide").each(function() {
      var isActive = $(this).hasClass("slick-active");
      // Get the image within the slide
      var image = $(this).find("img");
      // Get the current source of the image
      var currentSrc = image.attr("src");
      // Check if the current source is PNG or SVG
      var isPNG = currentSrc.endsWith(".png");
      var isSVG = currentSrc.endsWith(".svg");

      if (isActive && isPNG) {
          // Replace .png with .svg in the image source
          var newSrc = currentSrc.replace(".png", ".svg");
          // Set the new SVG source
          image.attr("src", newSrc);
      } else if (!isActive && isSVG) {
          // Replace .svg with .png in the image source
          var newSrc = currentSrc.replace(".svg", ".png");
          // Set the new PNG source
          image.attr("src", newSrc);
      }
  });
}

// Event handler for slide change
$(".slider").on('afterChange', function(event, slick, currentSlide){
  replaceImageExtension();
});


//Form  popup js
function openPopupForm(popupId) {
  var overlay = document.getElementById('overlayForm');
  var popup = document.getElementById(popupId);

  overlay.style.display = 'flex';
  popup.style.display = 'block';

  // Add an event listener to stop event propagation when clicking inside the popup
  popup.addEventListener('click', function (event) {
      event.stopPropagation();
  });
}

function closePopupForm(popupId) {
  var overlay = document.getElementById('overlayForm');
  var popup = document.getElementById(popupId);

  overlay.style.display = 'none';
  popup.style.display = 'none';
}
//form validation js



jQuery.validator.addMethod("emailCustomFormat", function (value, element) {
  if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value)) {
      var enteredEmailDomain = value.split('@')[1].split('.')[0].toLowerCase();
      var commonProviders = ["gmail", "hotmail", "yahoo", "email", "ymail", "live", "msn", "rediff", "rediffmail"];
      return commonProviders.indexOf(enteredEmailDomain) == -1;
  } else {
      return false;
  }
});

$(document).ready(function () {
  $("#downloadForm").validate({
      rules: {
          firstName: "required",
          lastName: "required",
          email: {
              required: true,
              // email: true,
              emailCustomFormat: true
          },
          company: "required",
          country: "required",
      },
      messages: {
          firstName: "First name is required",
          lastName: "Last name is required",
          email: {
              required: "Email is required",
              emailCustomFormat: "You've not entered the business email address."
          },
          company: "Please enter your company name",
          country: "Please enter your country",
          consentCheckbox: "Please check the consent box to proceed"
      },
      submitHandler: function (form) {
          // If the form is valid, you can add your custom logic here before submitting the form
          form.submit();
      }
  });
});

// for mobile videos section
$(document).ready(function(){
  $('.accordion-list > li > .acc-cont-mob').hide();

  $('.accordion-list > li:first-child').addClass("active").find(".acc-cont-mob").slideDown();

  $('.accordion-list > li .tabtitle').click(function() {
    var listItem = $(this).parent(); // Get the parent li element

    if (listItem.hasClass("active")) {
      listItem.removeClass("active").find(".acc-cont-mob").slideUp();
    } else {
      $(".accordion-list > li.active .acc-cont-mob").slideUp();
      $(".accordion-list > li.active").removeClass("active");

      listItem.addClass("active").find(".acc-cont-mob").slideDown();
    }
    return false;
  });
});
// Get the active navigation link
$("#scrollpicker a").on("click", function() {
  $("#scrollpicker a").removeClass("active");
  $(this).addClass("active");
  $("#scrollpicker").scrollCenter(".active", 300);
});

jQuery.fn.scrollCenter = function(elem, speed) {

  var active = jQuery(this).find(elem); // find the active element
  var activeWidth = active.width()/2; // get active width center

  var pos = active.position().left + activeWidth; 
  var currentscroll = jQuery(this).scrollLeft();
  var divwidth = jQuery(this).width(); 

  pos = pos + currentscroll - divwidth / 2; // for center position if you want adjust then change this

  jQuery(this).animate({
    scrollLeft: pos
  }, speed == undefined ? 1000 : speed);
  return this;
};

jQuery.fn.scrollleft = function(elem, speed) {
    jQuery(this).animate({
        scrollLeft: jQuery(this).scrollLeft() - jQuery(this).offset().left + jQuery(elem).offset().left
    }, speed == undefined ? 1000 : speed);
    return this;
};

// Function to move the active link to the center
function moveActiveToCenter() {
  var activeLink = $("#scrollpicker a.active");
  if (activeLink.length) {
    var container = $("#scrollpicker");
    var containerWidth = container.width();
    var activeLinkWidth = activeLink.outerWidth();
    var activeLinkLeft = activeLink.position().left;
    var containerScrollLeft = container.scrollLeft();

    // Calculate the position to scroll to center the active link
    var scrollPosition = activeLinkLeft + containerScrollLeft - (containerWidth / 2) + (activeLinkWidth / 2);

    // Scroll to the calculated position
    container.animate({
      scrollLeft: scrollPosition
    }, 300);
  }
}

// Periodically check for the active class and move the active link to center if it exists
var autoScrollInterval = setInterval(moveActiveToCenter, 500); // Adjust the interval as needed

// When touching the scrollpicker, remove the move to center function
$("#scrollpicker").on("touchstart", function() {
  clearInterval(autoScrollInterval);
});

// When touch interaction with scrollpicker ends, resume the automatic centering function
$("#scrollpicker").on("touchend", function() {
  autoScrollInterval = setInterval(moveActiveToCenter, 1000);
});