.elementor-3411 .elementor-element.elementor-element-394fc83{--display:flex;--min-height:731px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;}.elementor-3411 .elementor-element.elementor-element-394fc83:not(.elementor-motion-effects-element-type-background), .elementor-3411 .elementor-element.elementor-element-394fc83 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://zealimpact.com/wp-content/uploads/2026/01/Gemini_Generated_Image_x7080bx7080bx708-1.png");background-position:center center;}.elementor-3411 .elementor-element.elementor-element-3f4b973{transition:all 400ms;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-394fc83 */<style>
/* HERO PARTICLE WRAPPER */
.hero-particle-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

/* CANVAS */
.hero-particle-wrapper canvas {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 6px rgba(79,209,255,0.3));
}

/* KEEP HERO CONTENT ABOVE */
.hero-particle-wrapper + * {
  position: relative;
  z-index: 2;
}
</style>

<div class="hero-particle-wrapper">
  <canvas id="hero-particles"></canvas>
</div>

<script>
(function () {
  const canvas = document.getElementById("hero-particles");
  const ctx = canvas.getContext("2d");

  let particles = [];
  let mouse = { x: null, y: null, radius: 120 };

  function resizeCanvas() {
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
    initParticles();
  }

  window.addEventListener("resize", resizeCanvas);

  window.addEventListener("mousemove", e => {
    mouse.x = e.clientX;
    mouse.y = e.clientY;
  });

  window.addEventListener("mouseleave", () => {
    mouse.x = null;
    mouse.y = null;
  });

  class Particle {
    constructor() {
      this.x = Math.random() * canvas.width;
      this.y = Math.random() * canvas.height;
      this.vx = (Math.random() - 0.5) * 0.6;
      this.vy = (Math.random() - 0.5) * 0.6;
      this.size = Math.random() * 2 + 1;
    }

    draw() {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
      ctx.fillStyle = "#4fd1ff";
      ctx.fill();
    }

    update() {
      if (this.x <= 0 || this.x >= canvas.width) this.vx *= -1;
      if (this.y <= 0 || this.y >= canvas.height) this.vy *= -1;

      this.x += this.vx;
      this.y += this.vy;
      this.draw();
    }
  }

  function initParticles() {
    particles = [];
    const count = (canvas.width * canvas.height) / 12000;
    for (let i = 0; i < count; i++) {
      particles.push(new Particle());
    }
  }

  function connectParticles() {
    for (let a = 0; a < particles.length; a++) {
      for (let b = a; b < particles.length; b++) {
        const dx = particles[a].x - particles[b].x;
        const dy = particles[a].y - particles[b].y;
        const distance = dx * dx + dy * dy;

        if (distance < 10000) {
          ctx.strokeStyle = "rgba(79,209,255,0.15)";
          ctx.lineWidth = 1;
          ctx.beginPath();
          ctx.moveTo(particles[a].x, particles[a].y);
          ctx.lineTo(particles[b].x, particles[b].y);
          ctx.stroke();
        }
      }
    }
  }

  function connectMouse() {
    if (!mouse.x) return;

    particles.forEach(p => {
      const dx = mouse.x - p.x;
      const dy = mouse.y - p.y;
      const dist = dx * dx + dy * dy;

      if (dist < mouse.radius * mouse.radius) {
        ctx.strokeStyle = "rgba(79,209,255,0.35)";
        ctx.beginPath();
        ctx.moveTo(mouse.x, mouse.y);
        ctx.lineTo(p.x, p.y);
        ctx.stroke();
      }
    });
  }

  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    particles.forEach(p => p.update());
    connectParticles();
    connectMouse();
    requestAnimationFrame(animate);
  }

  resizeCanvas();
  animate();
})();
</script>/* End custom CSS */