.allone { margin: 0; background: linear-gradient(135deg, #0f2027, #203a43, #2c536); display: flex; justify-content: center; align-items: center; height: 60vh; overflow: hidden; } .tech-svg { width: 550px; height: 400px; max-width: 90vw; max-height: 90vw; } svg { width: 100%; height: 100%; display: block; } /* Glowing nodes */ .node { fill: #FF4DE1; stroke:#FF4DE1; stroke-width: 2; filter: drop-shadow(0 0 6px #00ffe7); animation: pulse 3s ease-in-out infinite; transform-origin: center; } .node.delay1 { animation-delay: 0.3s; } .node.delay2 { animation-delay: 0.6s; } .node.delay3 { animation-delay: 0.9s; } /* Lines connecting nodes */ .connect { stroke: #FF4DE1; stroke-opacity: 0.5; stroke-width: 1.5; filter: drop-shadow(0 0 3px #00ffe7); animation: glowLine 3s ease-in-out infinite; } .connect.delay1 { animation-delay: 0.5s; } .connect.delay2 { animation-delay: 1s; } /* Rotating circles */ .hub { fill: none; stroke: #00ffe7; stroke-opacity: 0.7; stroke-width: 3; animation: rotate 20s linear infinite; transform-origin: center; } @keyframes pulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px #00ffe7); fill: #00ffe7; } 50% { transform: scale(1.25); filter: drop-shadow(0 0 15px #00fff0); fill: #00fff0; } } @keyframes glowLine { 0%, 100% { stroke-opacity: 0.5; filter: drop-shadow(0 0 3px #00ffe7); } 50% { stroke-opacity: 1; filter: drop-shadow(0 0 10px #00fff0); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 480px) { .tech-svg { width: 300px; height: 300px; } }