let Wid = window.innerWidth;

		if (Wid > 1199) {
			const section = document.querySelector('.services .services-main');
			const wrapper = document.querySelector('.services .container');
			const wrapperInner = document.querySelector('.services__wrapper-inner');
			const oneCard = document.querySelector('.services__content');

			const totalWidth = wrapperInner.scrollWidth - wrapper.clientWidth;
			const startTrigger = $('.services .row').hasClass('first-row')
				? 'top -=30%top'
				: 'top top';
			const gsapConfig = {
				x: () => {
					return -(
						wrapper.scrollWidth -
						window.innerWidth +
						window.innerWidth * 0.05 +
						(window.innerWidth / 2 - oneCard.offsetWidth / 2)
					);
				},

				scrollTrigger: {
					trigger: section,
					start: startTrigger,
					end: 'bottom top',
					scrub: 1,
					pin: true,
					pinSpacing: true,
					markers: false,
				},
			};
			gsap.to(wrapperInner, gsapConfig);
			ScrollTrigger.refresh();

			let navWidth = 0;
			let maxScrollerWidth = totalWidth;

			function slideAnim(e) {
				e.preventDefault();
				let direction = 1;
				if ($(this).hasClass('next-btn')) {
					direction = 1;
				} else if ($(this).hasClass('prev-btn')) {
					direction = -1;
				}

				navWidth += direction * innerWidth;

				navWidth = Math.max(0, Math.min(navWidth, maxScrollerWidth));

				gsap.to(wrapperInner, {
					duration: 0.8,
					x: -navWidth,
					ease: 'power3.out',
				});
			}

			document.querySelector('.prev-btn').addEventListener('click', slideAnim);
			document.querySelector('.next-btn').addEventListener('click', slideAnim);
		}