/* Base Styles & Variables */
        :root {
            --primary: #00f7ff;
            --secondary: #7b00ff;
            --accent: #ff00c8;
            --dark: #0a0a16;
            --darker: #050510;
            --light: #f0f8ff;
            --gray: #a0a0c0;
            --transition: all 0.3s ease;
            --glow: 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 30px var(--primary);
            --glow-secondary: 0 0 10px var(--secondary), 0 0 20px var(--secondary);
        }

        /* Services Hero Section */
        .hero-header {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%);
        }

        .hero-header-content {
          height: 25vh;
          margin-top: 70px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .hero-header-text {
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .hero-header-text h1 {
            animation: fadeInUp 1s ease;
        }

        .hero-header-text p {
            animation: fadeInUp 1s ease 0.2s both;
        }

        .hero-header-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            position: relative;
            z-index: 2;
        }

        /* Floating Shapes */
        .floating-shapes {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .shape {
            position: absolute;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            opacity: 0.1;
            animation: float 6s ease-in-out infinite;
        }

        .shape-1 {
            width: 100px;
            height: 100px;
            top: 10%;
            left: 10%;
            animation-delay: 0s;
        }

        .shape-2 {
            width: 150px;
            height: 150px;
            top: 60%;
            left: 70%;
            animation-delay: 2s;
        }

        .shape-3 {
            width: 80px;
            height: 80px;
            top: 80%;
            left: 20%;
            animation-delay: 4s;
        }

        @keyframes float {
            0% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
            100% { transform: translateY(0px) rotate(360deg); }
        }

        /* Particle Storm Container */
        .particle-storm {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .storm-particle {
            position: absolute;
            border-radius: 50%;
            animation: stormMove 20s infinite linear;
            opacity: 0;
        }

        /* Animations */
        @keyframes stormMove {
            0% {
                transform: translate(0, 0) scale(0) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 0.7;
            }
            90% {
                opacity: 0.7;
            }
            100% {
                transform: translate(calc(100vw * var(--tx)), calc(100vh * var(--ty))) scale(1.5) rotate(360deg);
                opacity: 0;
            }
        }

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

        /* Particle Pulse Animation */
        @keyframes particle-pulse {
            0%, 100% {
                transform: scale(1);
                opacity: 0.3;
            }
            50% {
                transform: scale(1.5);
                opacity: 0.8;
            }
        }

        /* Responsive Design */

        @media (max-width: 576px) {
          .hero-header-buttons {
            display: none;
          }

          .hero-header-text p {
            margin-bottom: 0;
          }

        }