.bg-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
			pointer-events: none;
        }
		.cursor-trail {
            position: fixed;
            width: 20px;
            height: 20px;
            border: 2px solid #ff00ff;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            transition: all 0.1s ease;
            box-shadow: 0 0 20px #ff00ff;
        }

		

	
	body {
  	font-family: "Poppins", Arial, sans-serif !important;
	background: linear-gradient(135deg, #962c92, #20112b, #61227d);
      background-size: 300% 300%;
      animation: gradientMove 10s ease infinite;
	  padding-bottom: 0;
	}
	@keyframes gradientMove {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
	p{
		font-family: "Poppins", Arial, sans-serif !important;
		padding: 0;
		margin: 0;
	}
	h1{
		font-family: "Poppins", Arial, sans-serif !important;
		font-weight: bold;
		padding: 0;
		margin: 0;
	}
	h2{
		font-family: "Poppins", Arial, sans-serif !important;
		padding: 0;
		margin: 0;
	}
	h3{
		font-family: "Poppins", Arial, sans-serif !important;
		padding: 0;
		margin: 0;
	}
	h4{
		font-family: "Poppins", Arial, sans-serif !important;
		padding: 0;
		margin: 0;
	}
	h5{
		font-family: "Poppins", Arial, sans-serif !important;

		padding: 0;
		margin: 0;
	}

	.background{
		margin-top: 150px;
	}
	
		/* Particle effect */
		.particle {
			position: fixed;
			width: 30px;
			height: 30px;
			background: #ff00ff;
			border-radius: 50%;
			pointer-events: none;
			box-shadow: 0 0 30px #ff00ff;
			animation: particle-float 1s ease-out forwards;
			z-index: 9999;
		}

		@keyframes particle-float {
			0% {
				transform: translate(0, 0) scale(1);
				opacity: 1;
			}
			100% {
				transform: translate(var(--tx, 0), var(--ty, -100px)) scale(0);
				opacity: 0;
			}
		}

		
		.hero-content {
            text-align: center;
            z-index: 10;
        }

		.hero-content_main {
            text-align: center;
			height: 70vh;
    		align-content: center;
        }

        .hero-title {
            font-size: 5rem;
            background: linear-gradient(45deg, #ffdeef, #ba74ff, #d0f7ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: glow 3s ease-in-out infinite;
            margin-bottom: 20px;
            text-shadow: 0 0 80px rgba(255, 0, 128, 0.5);
        }

        @keyframes glow {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.5); }
        }

        .subtitle {
            font-size: 1.8rem;
            color: #ffffff93;
            margin-bottom: 40px;
            opacity: 0;
            animation: fadeInUp 1s 0.5s forwards;
        }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
            from {
                opacity: 0;
                transform: translateY(30px);
            }
        }





        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100vw;
            min-height: 100vh;
            overflow-x: hidden;
            background: black;
            font-family: Arial, sans-serif;
        }

        canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            display: block;
            cursor: crosshair;
            z-index: 0;
        }

        .video-container {
            position: relative;
            z-index: 1;
            max-width: 1200px;
            margin: 0 auto;
        }

        .video-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            margin-bottom: 30px;
        }

        .video-grid.center {
            grid-template-columns: 1fr;
            max-width: 700px;
            margin: 0 auto 30px auto;
        }

        .video-wrapper {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            pointer-events: auto;
            background: rgba(0, 0, 0, 0.3);
        }

        .video-wrapper:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
        }

        .video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 12px;
        }

        @media (max-width: 768px) {
            .video-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .video-grid.center {
                max-width: 100%;
            }
        }