.elementor-kit-179{--e-global-color-primary:#495DDA;--e-global-color-secondary:#513971;--e-global-color-text:#383838;--e-global-color-accent:#2E3D9C;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-179 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<!-- Canvas for 3D Background -->
<canvas id="bg-canvas"></canvas>

<!-- Custom Styles -->
<style>
    /* Ensure body and html take full height for canvas positioning */
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #bg-canvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1; /* Place it behind Elementor content */
    }
    .elementor-section-wrap {
        position: relative;
        z-index: 1; /* Ensure Elementor content is above the canvas */
        background-color: transparent !important;
    }
    .text-glow {
        text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
    }
    .glass-card {
        background: rgba(10, 25, 47, 0.6);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(0, 255, 255, 0.2);
        transition: all 0.3s ease;
    }
    .glass-card:hover {
        border-color: rgba(0, 255, 255, 0.5);
        transform: translateY(-5px);
    }
    .glow-button .elementor-button {
        box-shadow: 0 0 5px #00ffff, 0 0 15px #00ffff, 0 0 30px #00ffff;
        transition: all 0.3s ease-in-out;
    }
    .glow-button .elementor-button:hover {
        box-shadow: 0 0 10px #00ffff, 0 0 25px #00ffff, 0 0 50px #00ffff;
        transform: scale(1.05);
    }
</style>

<!-- Three.js Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" defer></script>

<!-- Main 3D Animation Script -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Check if canvas exists to avoid errors on other pages
        if (!document.getElementById('bg-canvas')) return;

        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ 
            canvas: document.getElementById('bg-canvas'),
            antialias: true,
            alpha: true // Make canvas transparent
        });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        camera.position.z = 5;

        const geometry = new THREE.TorusKnotGeometry(1, 0.3, 128, 16);
        const material = new THREE.MeshStandardMaterial({ 
            color: 0x00ffff, 
            emissive: 0x00ffff,
            emissiveIntensity: 0.8,
            metalness: 0.95,
            roughness: 0.1,
            wireframe: true
        });
        const torusKnot = new THREE.Mesh(geometry, material);
        scene.add(torusKnot);
        
        const pointLight = new THREE.PointLight(0xffffff, 0.2);
        pointLight.position.set(5, 5, 5);
        scene.add(pointLight);
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);

        const particlesGeometry = new THREE.BufferGeometry;
        const particlesCount = 5000;
        const posArray = new Float32Array(particlesCount * 3);
        for (let i = 0; i < particlesCount * 3; i++) {
            posArray[i] = (Math.random() - 0.5) * 25;
        }
        particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
        const particlesMaterial = new THREE.PointsMaterial({
            size: 0.015,
            color: 0x00ffff,
            transparent: true,
            blending: THREE.AdditiveBlending,
        });
        const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
        scene.add(particlesMesh);

        let mouseX = 0;
        let mouseY = 0;
        document.addEventListener('mousemove', (event) => {
            mouseX = event.clientX;
            mouseY = event.clientY;
        });

        let scrollY = window.scrollY;
        window.addEventListener('scroll', () => {
            scrollY = window.scrollY;
        });
        
        const clock = new THREE.Clock();
        const animate = () => {
            requestAnimationFrame(animate);
            const elapsedTime = clock.getElapsedTime();
            
            particlesMesh.rotation.y = elapsedTime * 0.03;
            torusKnot.rotation.x = elapsedTime * 0.1;
            torusKnot.rotation.y = elapsedTime * 0.15;

            const scale = 1 + scrollY * 0.0012;
            torusKnot.scale.set(scale, scale, scale);

            camera.position.x += ( (mouseX - window.innerWidth / 2) / (window.innerWidth / 2) * 0.5 - camera.position.x) * 0.05;
            camera.position.y += ( -(mouseY - window.innerHeight / 2) / (window.innerHeight / 2) * 0.5 - camera.position.y) * 0.05;
            camera.lookAt(scene.position);

            renderer.render(scene, camera);
        };
        
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

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