.elementor-436 .elementor-element.elementor-element-10e80de{--display:flex;--min-height:600px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-436 .elementor-element.elementor-element-10e80de:not(.elementor-motion-effects-element-type-background), .elementor-436 .elementor-element.elementor-element-10e80de > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3f49873 );}.elementor-436 .elementor-element.elementor-element-f634148{--display:flex;--justify-content:center;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-436 .elementor-element.elementor-element-b8673d3{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-10e80de */<style>
    /* Aapke Elementor section ko background layer setup dene ke liye */
    #wp-mesh-hero {
        position: relative !important;
        overflow: hidden !important;
    }

    /* Background SVG Network Layer */
    .wp-network-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0; /* Taake yeh background color ke upar aur text ke peeche rahe */
        pointer-events: none;
    }

    .wp-network-bg svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* Grid ki default lines (Dark/Halka Green jo Orange par acha lage) */
    /* Agar aapko color change karna ho to stroke ka hex code badal sakte hain */
    .wp-grid-line {
        stroke: rgba(0, 0, 0, 0.15); /* Orange par halka dark net zone */
        stroke-width: 1;
        transition: stroke 0.8s ease, stroke-width 0.8s ease;
    }

    /* Hover karne par light bright color highlight hoga */
    .wp-grid-line.active {
        stroke: #ffffff; /* Hover par lines white chamkengi, aap chahein to green #00ff66 bhi kar sakte hain */
        stroke-width: 1.5;
        transition: stroke 0s, stroke-width 0s;
    }

    /* Elementor ke content ko lines ke upar lane ke liye */
    #wp-mesh-hero > .elementor-container {
        position: relative;
        z-index: 1;
    }
</style>

<!-- SVG Grid Background Element -->
<div class="wp-network-bg">
    <svg id="wp-net-svg"></svg>
</div>

<script>
(function() {
    const svg = document.getElementById("wp-net-svg");
    const container = document.getElementById("wp-mesh-hero");
    
    if (!svg || !container) return;

    const spacingX = 80; 
    const spacingY = 70; 
    let lines = [];

    function drawGrid() {
        svg.innerHTML = "";
        lines = [];
        
        const width = container.offsetWidth;
        const height = container.offsetHeight;
        svg.setAttribute("viewBox", `0 0 ${width} ${height}`);

        const cols = Math.ceil(width / spacingX) + 2;
        const rows = Math.ceil(height / spacingY) + 2;

        const points = [];
        for (let r = 0; r < rows; r++) {
            points[r] = [];
            for (let c = 0; c < cols; c++) {
                let x = c * spacingX;
                if (r % 2 === 0) {
                    x += spacingX / 2;
                }
                let y = r * spacingY;
                points[r].push({ x, y });
            }
        }

        function createLine(p1, p2) {
            if (!p1 || !p2) return;
            const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
            line.setAttribute("x1", p1.x);
            line.setAttribute("y1", p1.y);
            line.setAttribute("x2", p2.x);
            line.setAttribute("y2", p2.y);
            line.setAttribute("class", "wp-grid-line");
            svg.appendChild(line);
            
            lines.push({
                element: line,
                x1: p1.x, y1: p1.y,
                x2: p2.x, y2: p2.y
            });
        }

        for (let r = 0; r < rows - 1; r++) {
            for (let c = 0; c < cols - 1; c++) {
                const pCurrent = points[r][c];
                const pRight = points[r][c + 1];
                const pBottom = points[r + 1][c];
                const pBottomRight = points[r + 1][c + 1];

                createLine(pCurrent, pRight);

                if (r % 2 === 0) {
                    createLine(pCurrent, pBottom);
                    createLine(pRight, pBottom);
                } else {
                    createLine(pCurrent, pBottomRight);
                    createLine(pRight, pBottom);
                }
            }
        }
    }

    drawGrid();

    const resizeObserver = new ResizeObserver(() => drawGrid());
    resizeObserver.observe(container);

    container.addEventListener("mousemove", (e) => {
        const rect = container.getBoundingClientRect();
        const mouseX = e.clientX - rect.left;
        const mouseY = e.clientY - rect.top;
        const hoverRadius = 150; // Aap glow ka area yahan se barha/ghata sakte hain

        lines.forEach(line => {
            const midX = (line.x1 + line.x2) / 2;
            const midY = (line.y1 + line.y2) / 2;

            const dx = mouseX - midX;
            const dy = mouseY - midY;
            const distance = Math.sqrt(dx * dx + dy * dy);

            if (distance < hoverRadius) {
                line.element.classList.add("active");
            } else {
                line.element.classList.remove("active");
            }
        });
    });

    container.addEventListener("mouseleave", () => {
        lines.forEach(line => line.element.classList.remove("active"));
    });
})();
</script>/* End custom CSS */