/* Base styles */

        :root {

            --primary-color: #8f00ff;

            --secondary-color: #b042ff;

            --background-color: #030303;

            --text-color: #ffffff;

            --text-muted: #a0a0a0;

        }



        * {x

            box-sizing: border-box;

            margin: 0;

            padding: 0;

        }



        body {

            font-family: 'Inter', sans-serif;

            background-color: var(--background-color);

            color: var(--text-color);

            line-height: 1.6;

        }



        .container {

            max-width: 1200px;

            margin: 0 auto;

            padding: 0 20px;

        }



        /* Enhanced Hero Section */

        .hero-section {

            min-height: 100vh;

            display: flex;

            align-items: center;

            justify-content: center;

            text-align: center;

            position: relative;

            overflow: hidden;

            background: radial-gradient(circle at 50% 50%, 

                rgba(143, 0, 255, 0.15) 0%, 

                rgba(0, 0, 0, 0.95) 50%,

                var(--background-color) 100%);

        }



        .hero-content {

            position: relative;

            z-index: 2;

            animation: fadeIn 1s ease-out;

        }



        .hero-title {

            font-size: 5rem;

            font-weight: 800;

            letter-spacing: -2px;

            margin-bottom: 20px;

            background: linear-gradient(45deg, #fff 30%, var(--primary-color) 70%);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            text-shadow: 0 0 30px rgba(143, 0, 255, 0.3);

            animation: titleSlide 1s ease-out;

        }



        .hero-subtitle {

            font-size: 1.5rem;

            color: var(--text-muted);

            margin-bottom: 40px;

            animation: subtitleSlide 1s ease-out 0.3s backwards;

        }



        .cta-buttons {

            display: flex;

            gap: 20px;

            justify-content: center;

            animation: buttonsFade 1s ease-out 0.6s backwards;

        }



        .cta-button {

            padding: 15px 40px;

            border-radius: 30px;

            font-size: 1rem;

            font-weight: 600;

            text-decoration: none;

            transition: all 0.3s ease;

        }



        .primary-button {

            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));

            color: white;

            border: none;

        }



        .secondary-button {

            background: transparent;

            color: white;

            border: 2px solid var(--primary-color);

        }



        .cta-button:hover {

            transform: translateY(-3px);

            box-shadow: 0 5px 15px rgba(143, 0, 255, 0.4);

        }



        /* Animated background elements */

        .bg-element {

            position: absolute;

            border-radius: 50%;

            background: rgba(143, 0, 255, 0.1);

            animation: float 20s infinite ease-in-out;

        }



        .bg-element:nth-child(1) {

            width: 300px;

            height: 300px;

            top: -150px;

            left: -150px;

        }



        .bg-element:nth-child(2) {

            width: 200px;

            height: 200px;

            bottom: -100px;

            right: -100px;

            animation-delay: -5s;

        }



        @keyframes float {

            0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }

            25% { transform: translate(50px, -30px) rotate(90deg) scale(1.1); }

            50% { transform: translate(0, 50px) rotate(180deg) scale(1); }

            75% { transform: translate(-50px, -30px) rotate(270deg) scale(0.9); }

        }



        /* Enhanced Section Styles */

        section {

            padding: 80px 0;

            position: relative;

        }



        .section-tag {

            color: var(--primary-color);

            font-size: 0.875rem;

            text-transform: uppercase;

            letter-spacing: 2px;

            display: block;

            margin-bottom: 10px;

        }



        .section-title {

            font-size: 2.5rem;

            margin-bottom: 20px;

            background: linear-gradient(45deg, #fff, #8f00ff);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            opacity: 0;

            transform: translateY(20px);

        }



        .animate-title {

            animation: titleAppear 1s ease forwards;

        }



        @keyframes titleAppear {

            0% {

                opacity: 0;

                transform: translateY(20px);

            }

            100% {

                opacity: 1;

                transform: translateY(0);

            }

        }



        /* Add intersection observer for scroll animation */

        .section-title.scroll-animate {

            opacity: 0;

            transform: translateY(20px);

            transition: all 0.6s ease;

        }



        .section-title.scroll-animate.visible {

            opacity: 1;

            transform: translateY(0);

        }



        /* About Section */

        .about-content {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 50px;

            align-items: center;

        }



        .about-text {

            padding-right: 30px;

        }



        .section-description {

            font-size: 1.125rem;

            color: var(--text-muted);

            margin-bottom: 40px;

        }



        .stats-grid {

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 30px;

        }



        .stat-item {

            background: rgba(143, 0, 255, 0.05);

            padding: 20px;

            border-radius: 15px;

            text-align: center;

            transition: transform 0.3s ease;

        }



        .stat-item:hover {

            transform: translateY(-5px);

        }



        .stat-item h3 {

            font-size: 2.25rem;

            color: var(--primary-color);

            margin-bottom: 10px;

        }



        /* Services Section */

        .services-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

            gap: 30px;

            margin-top: 30px;

        }



        .service-card {

            background: rgba(255, 255, 255, 0.02);

            border: 1px solid rgba(143, 0, 255, 0.1);

            border-radius: 15px;

            padding: 30px;

            text-align: center;

            transition: transform 0.3s ease, border-color 0.3s ease;

        }



        .service-card:hover {

            transform: translateY(-10px);

            border-color: var(--primary-color);

        }



        .service-card i {

            font-size: 2.5rem;

            color: var(--primary-color);

            margin-bottom: 20px;

        }



        .service-card h3 {

            font-size: 1.5rem;

            margin-bottom: 15px;

        }



        /* Features Section */

        .features-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

            gap: 40px;

            margin-top: 30px;

        }



        .feature-item {

            display: flex;

            align-items: flex-start;

            gap: 20px;

            padding: 30px;

            background: rgba(255, 255, 255, 0.02);

            border-radius: 15px;

            border: 1px solid rgba(143, 0, 255, 0.1);

            transition: transform 0.3s ease;

        }



        .feature-item:hover {

            transform: translateY(-5px);

        }



        .feature-icon {

            width: 60px;

            height: 60px;

            background: rgba(143, 0, 255, 0.1);

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

        }



        .feature-icon i {

            font-size: 1.5rem;

            color: var(--primary-color);

        }



        .feature-content h3 {

            font-size: 1.25rem;

            margin-bottom: 10px;

        }



        /* Contact Section */

        .contact-content {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 50px;

            margin-top: 30px;

        }



        .contact-info {

            display: flex;

            flex-direction: column;

            gap: 30px;

        }



        .contact-item {

            display: flex;

            align-items: flex-start;

            gap: 20px;

        }



        .contact-item i {

            font-size: 1.5rem;

            color: var(--primary-color);

            width: 40px;

            height: 40px;

            display: flex;

            align-items: center;

            justify-content: center;

            background: rgba(143, 0, 255, 0.1);

            border-radius: 50%;

        }



        .contact-form {

            background: rgba(255, 255, 255, 0.02);

            padding: 30px;

            border-radius: 15px;

            border: 1px solid rgba(143, 0, 255, 0.1);

        }



        .form-group {

            margin-bottom: 20px;

        }



        .form-group input,

        .form-group textarea {

            width: 100%;

            padding: 12px 15px;

            background: rgba(255, 255, 255, 0.05);

            border: 1px solid rgba(143, 0, 255, 0.2);

            border-radius: 8px;

            color: var(--text-color);

            font-size: 1rem;

        }



        .form-group textarea {

            height: 150px;

            resize: vertical;

        }



        .submit-btn {

            width: 100%;

            padding: 15px;

            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));

            border: none;

            border-radius: 8px;

            color: white;

            font-size: 1rem;

            font-weight: 600;

            cursor: pointer;

            transition: transform 0.3s ease;

        }



        .submit-btn:hover {

            transform: translateY(-2px);

        }



        /* Footer Styles */

        .footer {

            background: linear-gradient(180deg, #0a0a0a 0%, var(--background-color) 100%);

            padding: 50px 0 20px;

            position: relative;

            overflow: hidden;

        }



        .footer::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            height: 1px;

            background: linear-gradient(90deg, transparent, rgba(143, 0, 255, 0.3), transparent);

        }



        .footer-content {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

            gap: 40px;

            margin-bottom: 50px;

        }



        .footer-logo {

            font-size: 1.5rem;

            font-weight: 700;

            background: linear-gradient(45deg, #fff, var(--primary-color));

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            margin-bottom: 15px;

        }



        .footer-description {

            color: var(--text-muted);

            margin-bottom: 20px;

            font-size: 0.875rem;

        }



        .social-links {

            display: flex;

            gap: 15px;

        }



        .social-icon {

            color: var(--text-color);

            font-size: 1.125rem;

            transition: color 0.3s ease;

        }



        .social-icon:hover {

            color: var(--primary-color);

        }



        .footer-section h4 {

            color: var(--text-color);

            margin-bottom: 20px;

            font-size: 1.125rem;

        }



        .footer-section ul {

            list-style: none;

        }



        .footer-section ul li {

            margin-bottom: 10px;

        }



        .footer-section ul a {

            color: var(--text-muted);

            text-decoration: none;

            transition: color 0.3s ease;

            font-size: 0.875rem;

        }



        .footer-section ul a:hover {

            color: var(--primary-color);

        }



        .newsletter-form {

            display: flex;

            gap: 10px;

            margin-top: 15px;

        }



        .newsletter-form input {

            flex: 1;

            padding: 10px 15px;

            border: 1px solid rgba(143, 0, 255, 0.3);

            border-radius: 5px;

            background: rgba(255, 255, 255, 0.05);

            color: var(--text-color);

            font-size: 0.875rem;

        }



        .subscribe-btn {

            padding: 10px 20px;

            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));

            border: none;

            border-radius: 5px;

            color: white;

            cursor: pointer;

            transition: transform 0.3s ease;

        }



        .subscribe-btn:hover {

            transform: translateY(-2px);

        }



        .footer-bottom {

            text-align: center;

            padding-top: 20px;

            border-top: 1px solid rgba(255, 255, 255, 0.1);

        }



        .footer-bottom p {

            color: var(--text-muted);

            font-size: 0.875rem;

        }



        /* Responsive Design */

        @media (max-width: 768px) {

            .hero-title {

                font-size: 3rem;

            }



            .hero-subtitle {

                font-size: 1.25rem;

            }



            .cta-buttons {

                flex-direction: column;

                align-items: center;

            }



            .about-content,

            .contact-content {

                grid-template-columns: 1fr;

            }



            .stats-grid {

                grid-template-columns: 1fr;

            }



            .footer-content {

                grid-template-columns: 1fr;

                text-align: center;

            }



            .social-links {

                justify-content: center;

            }



            .newsletter-form {

                flex-direction: column;

            }



            .subscribe-btn {

                width: 100%;

            }

        }



        /* Video Container Styles */

        .video-container {

            position: relative;

            width: 100%;

            max-width: 800px;

            margin: 40px auto;

            border-radius: 20px;

            overflow: hidden;

            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

            background: rgba(143, 0, 255, 0.1);

            padding: 10px;

            border: 1px solid rgba(143, 0, 255, 0.2);

        }



        .promo-video {

            width: 100%;

            height: auto;

            border-radius: 15px;

            display: block;

            transition: transform 0.3s ease;

        }



        .video-container:hover .promo-video {

            transform: scale(1.02);

        }



        /* Responsive Design */

        @media (max-width: 768px) {

            .video-container {

                margin: 20px auto;

                padding: 5px;

            }

        }



        /* Add these animation keyframes */

        @keyframes fadeIn {

            from { opacity: 0; }

            to { opacity: 1; }

        }



        @keyframes titleSlide {

            from {

                opacity: 0;

                transform: translateY(-30px);

            }

            to {

                opacity: 1;

                transform: translateY(0);

            }

        }



        @keyframes subtitleSlide {

            from {

                opacity: 0;

                transform: translateY(30px);

            }

            to {

                opacity: 1;

                transform: translateY(0);

            }

        }



        @keyframes buttonsFade {

            from {

                opacity: 0;

                transform: scale(0.9);

            }

            to {

                opacity: 1;

                transform: scale(1);

            }

        }



        /* Add these animation classes */

        .hero-content {

            animation: fadeIn 1s ease-out;

        }



        .hero-title {

            animation: titleSlide 1s ease-out;

        }



        .hero-subtitle {

            animation: subtitleSlide 1s ease-out 0.3s backwards;

        }



        .cta-buttons {

            animation: buttonsFade 1s ease-out 0.6s backwards;

        }



        .bg-element {

            animation: float 20s infinite ease-in-out;

        }



        /* Add smooth scrolling */

        html {

            scroll-behavior: smooth;

        }



        /* Add hover effects */

        .section-title:hover {

            text-shadow: 0 0 20px rgba(143, 0, 255, 0.5);

        }



        /* Add loading animation for images */

        img {

            transition: opacity 0.3s ease;

            opacity: 0;

        }



        img.loaded {

            opacity: 1;

        }