.elementor-14 .elementor-element.elementor-element-4d45b2f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;}.elementor-14 .elementor-element.elementor-element-4d45b2f:not(.elementor-motion-effects-element-type-background), .elementor-14 .elementor-element.elementor-element-4d45b2f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-14 .elementor-element.elementor-element-4d45b2f::before, .elementor-14 .elementor-element.elementor-element-4d45b2f > .elementor-background-video-container::before, .elementor-14 .elementor-element.elementor-element-4d45b2f > .e-con-inner > .elementor-background-video-container::before, .elementor-14 .elementor-element.elementor-element-4d45b2f > .elementor-background-slideshow::before, .elementor-14 .elementor-element.elementor-element-4d45b2f > .e-con-inner > .elementor-background-slideshow::before, .elementor-14 .elementor-element.elementor-element-4d45b2f > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-14 .elementor-element.elementor-element-0d22235{margin:300px 0px calc(var(--kit-widget-spacing, 0px) + 150px) 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-4d45b2f *//*delete this, paritcle html and css*/

/*css*/
.elementor-14 .elementor-element.elementor-element-4d45b2f {
    position: relative;
    z-index: 10; /* This keeps the text above the particles */
}


<style>
    /* 1. We lower the z-index to 0 so it stays behind everything */
    #particles-js {
        position: absolute;
        width: 100%;
        height: 100% !important;
        min-height: 100vh;
        top: 0;
        left: 0;
        z-index: 0; 
        background-color: transparent;
        pointer-events: none; /* Clicks pass through the container */
    }

    /* 2. We make the canvas invisible to clicks so buttons work */
    #particles-js canvas {
        display: block !important;
        pointer-events: none !important; 
    }

    .elementor-widget-html {
        position: static !important;
    }
</style>

<div id="particles-js"></div>

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

<script>
    window.addEventListener('load', function() {
        particlesJS("particles-js", {
          "particles": {
            "number": {
              "value": 150,
              "density": { "enable": true, "value_area": 800 }
            },
            "color": { "value": "#FFD700" },
            "shape": { "type": "circle" },
            "opacity": { "value": 0.6, "random": true },
            "size": { "value": 3, "random": true },
            "line_linked": {
              "enable": true,
              "distance": 120,
              "color": "#FFD700",
              "opacity": 0.4,
              "width": 1
            },
            "move": {
              "enable": true,
              "speed": 3,
              "direction": "none",
              "out_mode": "out"
            }
          },
          "interactivity": {
            /* 3. THIS IS THE KEY FIX: Detect mouse on the window, not the canvas */
            "detect_on": "window", 
            "events": {
              "onhover": { 
                "enable": true, 
                "mode": "repulse" 
              },
              "onclick": { "enable": true, "mode": "push" },
              "resize": true
            },
            "modes": {
              "repulse": { "distance": 150, "duration": 0.4 },
              "push": { "particles_nb": 4 }
            }
          },
          "retina_detect": true
        });
    });
</script>/* End custom CSS */