Place the below code in your header script area this delete this block.

<script>/* Testimonial stack */
(function () {
  var START = 0.9;  // cards begin dealing out when the section's top is 90% down the screen
  var END = 0.35;   // ...and finish fanning out around 35% down the screen
  var FAN = 0;      // degrees each card tilts per step from the middle (0 = perfectly straight)
  var ARC = 0;      // px the outer cards dip down for a hand-of-cards look (0 = flat row)

  var stacks = [];
  var ticking = false;
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  function easeOut(t) {
    return 1 - Math.pow(1 - t, 3);
  }

  function clamp(v) {
    return Math.min(1, Math.max(0, v));
  }

  // Works with the Testimonials block or a Row Layout of columns
  function getCards(el) {
    var cards = el.querySelectorAll('.kt-testimonial-item-wrap');
    if (cards.length) return Array.prototype.slice.call(cards);

    // Row Layout: find the row's column wrapper, then take only its own columns
    var wrap = el.classList.contains('kt-row-column-wrap') ? el : el.querySelector('.kt-row-column-wrap');
    if (!wrap) return [];

    return Array.prototype.filter.call(wrap.children, function (child) {
      return child.classList.contains('wp-block-kadence-column');
    });
  }

  // Measure where each card normally sits, and where on the page the effect plays
  function measure(s) {
    s.cards.forEach(function (c) {
      c.style.transform = '';
    });

    var vh = window.innerHeight;
    var g = s.el.getBoundingClientRect();
    var gx = g.left + g.width / 2;
    var gy = g.top + g.height / 2;

    // where the effect starts and how much scrolling it takes
    // (sections near the top of the page start stacked and deal out as soon as you scroll)
    var docTop = g.top + window.scrollY;
    s.start = Math.max(0, docTop - vh * START);
    s.distance = vh * (START - END);

    var rects = s.cards.map(function (c) {
      return c.getBoundingClientRect();
    });

    // find the columns (and switch off if everything is in a single column, like on phones)
    var lefts = [];
    rects.forEach(function (r) {
      var l = Math.round(r.left);
      if (lefts.indexOf(l) === -1) lefts.push(l);
    });
    lefts.sort(function (a, b) {
      return a - b;
    });
    s.active = lefts.length > 1;

    var mid = (lefts.length - 1) / 2;
    s.data = rects.map(function (r, i) {
      var rel = lefts.indexOf(Math.round(r.left)) - mid;
      return {
        dx: gx - (r.left + r.width / 2),
        dy: gy - (r.top + r.height / 2),
        stackRot: (i % 2 ? 1 : -1) * (2 + (i % 4) * 1.5), // messy deck angles
        fanRot: rel * FAN,
        fanY: Math.abs(rel) * ARC
      };
    });

    update(s);
  }

  function update(s) {
    if (!s.active) return;

    var p = clamp((window.scrollY - s.start) / s.distance);
    var e = easeOut(p);
    var k = 1 - e;

    s.cards.forEach(function (c, i) {
      var d = s.data[i];
      var x = (d.dx * k).toFixed(1);
      var y = (d.dy * k + d.fanY * e).toFixed(1);
      var rot = (d.stackRot * k + d.fanRot * e).toFixed(2);
      c.style.transform = 'translate3d(' + x + 'px,' + y + 'px,0) rotate(' + rot + 'deg)';
    });
  }

  function updateAll() {
    stacks.forEach(update);
    ticking = false;
  }

  function measureAll() {
    stacks.forEach(measure);
  }

  function onScroll() {
    if (!ticking) {
      ticking = true;
      requestAnimationFrame(updateAll);
    }
  }

  function init() {
    if (reduce) return; // cards just display normally

    document.querySelectorAll('.cc-stack').forEach(function (el) {
      var cards = getCards(el);
      if (cards.length < 2) return;

      cards.forEach(function (c, i) {
        c.classList.add('cc-stack-card');
        c.style.zIndex = cards.length - i; // first card sits on top of the deck
        c.style.willChange = 'transform';  // GPU layer upfront (the curtain reveal lesson)
      });

      stacks.push({ el: el, cards: cards, data: [], active: false, start: 0, distance: 1 });
    });
    if (!stacks.length) return;

    measureAll(); // correct state right away on load
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', measureAll);
    window.addEventListener('load', measureAll);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();</script>