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

<script>/* Background color shift */
(function () {
  var TRIGGER = 0.5; // colors change as a section reaches this spot (0.5 = middle of the screen)
  var BLEND = 0.35;  // how gradual the blend is (0.35 = over 35% of a screen of scrolling)

  var rows = [];
  var ticking = false;
  var lastColor = '';

  // Turn "rgb(248, 247, 244)" into [248, 247, 244, 1]
  function parseColor(str) {
    var m = str.match(/[\d.]+/g);
    if (!m || m.length < 3) return null;
    var a = m.length > 3 ? parseFloat(m[3]) : 1;
    if (a === 0) return null; // transparent = no color set
    return [parseFloat(m[0]), parseFloat(m[1]), parseFloat(m[2]), a];
  }

  function toString(c) {
    return 'rgba(' + Math.round(c[0]) + ',' + Math.round(c[1]) + ',' + Math.round(c[2]) + ',' + c[3].toFixed(3) + ')';
  }

  function mix(a, b, t) {
    return [
      a[0] + (b[0] - a[0]) * t,
      a[1] + (b[1] - a[1]) * t,
      a[2] + (b[2] - a[2]) * t,
      a[3] + (b[3] - a[3]) * t
    ];
  }

  function smooth(t) {
    return t * t * (3 - 2 * t); // gentle ease in and out
  }

  // Read each row's own Kadence background color and where it sits on the page
  function measure() {
    rows.forEach(function (r) {
      r.el.style.backgroundColor = ''; // let Kadence's color show so we can read it
    });

    var previous = null;
    rows.forEach(function (r) {
      var c = parseColor(window.getComputedStyle(r.el).backgroundColor);
      r.color = c || previous || [255, 255, 255, 1]; // no color set? borrow the one before
      previous = r.color;
      r.top = r.el.getBoundingClientRect().top + window.scrollY;
    });

    lastColor = '';
    update();
  }

  function update() {
    var vh = window.innerHeight;
    var y = window.scrollY + vh * TRIGGER;
    var blend = vh * BLEND;
    var color = rows[0].color;

    for (var i = 1; i < rows.length; i++) {
      var start = rows[i].top - blend;
      if (y <= start) break;
      var t = Math.min(1, (y - start) / blend);
      color = mix(rows[i - 1].color, rows[i].color, smooth(t));
    }

    var str = toString(color);
    if (str !== lastColor) {
      rows.forEach(function (r) {
        r.el.style.backgroundColor = str;
      });
      lastColor = str;
    }
    ticking = false;
  }

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

  function init() {
    document.querySelectorAll('.cc-bg-shift').forEach(function (el) {
      rows.push({ el: el, color: null, top: 0 });
    });
    if (rows.length < 2) return;

    measure(); // correct color right away on load
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', measure);
    window.addEventListener('load', measure); // re-measure after images settle

    if ('ResizeObserver' in window) {
      new ResizeObserver(measure).observe(document.body);
    }
  }

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