.elementor-widget-container .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-container .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-847 .elementor-element.elementor-element-d11c16b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-html .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-html .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-847 .elementor-element.elementor-element-2ae54d6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}/* Start custom CSS */<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thank You | GJ Digital Marketing Agency</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#250444',
                        highlight: '#FFCA58',
                        neutral: '#F5F4F7',
                        darkBase: '#1F1F24',
                    }
                }
            }
        }
    </script>
    <style>
        :root {
            --primary: #250444;
            --highlight: #FFCA58;
            --neutral: #F5F4F7;
            --dark-base: #1F1F24;
        }

        body {
            background-color: var(--dark-base);
            color: var(--neutral);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            overflow-x: hidden;
        }

        .bg-gradient-custom {
            background: linear-gradient(135deg, var(--primary) 0%, #3d0a6e 100%);
        }

        .text-highlight {
            color: var(--highlight);
        }

        .btn-primary {
            background-color: var(--highlight);
            color: var(--primary);
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(255, 202, 88, 0.3);
            filter: brightness(1.1);
        }

        .card-glass {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
        }

        .animate-check {
            animation: scaleIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }

        @keyframes scaleIn {
            from { transform: scale(0); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        .blob {
            position: absolute;
            width: 600px;
            height: 600px;
            background: var(--primary);
            filter: blur(100px);
            border-radius: 50%;
            z-index: -1;
            opacity: 0.5;
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">

    <!-- Background Elements -->
    <div class="blob top-[-15%] left-[-10%]"></div>
    <div class="blob bottom-[-15%] right-[-10%]"></div>

    <main class="max-w-4xl w-full relative z-10">
        <div class="card-glass p-8 md:p-16 text-center shadow-2xl">
            
            <!-- Success Icon -->
            <div class="mb-8 flex justify-center">
                <div class="w-24 h-24 bg-gradient-custom rounded-full flex items-center justify-center animate-check shadow-lg border-2 border-highlight/20">
                    <i class="fas fa-check text-4xl text-highlight"></i>
                </div>
            </div>

            <!-- Heading -->
            <h1 class="text-4xl md:text-6xl font-bold mb-4 tracking-tight leading-tight">
                Success! Your Brand's <br>
                <span class="text-highlight">Evolution Starts Now.</span>
            </h1>
            
            <p class="text-lg md:text-xl text-gray-300 mb-10 max-w-2xl mx-auto leading-relaxed">
                Thank you for reaching out to <span class="font-bold text-white">GJ Digital</span>. We’ve received your information and our strategy team is already analyzing how we can amplify your digital footprint.
            </p>

            <!-- Next Steps Grid -->
            <div class="grid md:grid-cols-3 gap-6 mb-12">
                <div class="p-6 rounded-2xl bg-white/5 border border-white/5 hover:border-highlight/30 hover:bg-white/10 transition-all duration-300">
                    <i class="fas fa-envelope-open-text text-highlight text-2xl mb-4"></i>
                    <h3 class="font-bold mb-2 text-white">Check Email</h3>
                    <p class="text-sm text-gray-400">We've sent a confirmation and a brief introduction to our process.</p>
                </div>
                <div class="p-6 rounded-2xl bg-white/5 border border-white/5 hover:border-highlight/30 hover:bg-white/10 transition-all duration-300">
                    <i class="fas fa-calendar-check text-highlight text-2xl mb-4"></i>
                    <h3 class="font-bold mb-2 text-white">Discovery Call</h3>
                    <p class="text-sm text-gray-400">Our representative will contact you within 24 business hours.</p>
                </div>
                <div class="p-6 rounded-2xl bg-white/5 border border-white/5 hover:border-highlight/30 hover:bg-white/10 transition-all duration-300">
                    <i class="fas fa-chart-line text-highlight text-2xl mb-4"></i>
                    <h3 class="font-bold mb-2 text-white">Custom Roadmap</h3>
                    <p class="text-sm text-gray-400">Get ready to see a data-driven plan tailored to your specific goals.</p>
                </div>
            </div>

            <!-- Call to Action -->
            <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                <a href="#" class="btn-primary px-10 py-4 rounded-full font-bold w-full sm:w-auto text-center shadow-lg">
                    Back to Homepage
                </a>
                <a href="#" class="px-10 py-4 rounded-full font-bold border border-white/20 hover:bg-white/10 hover:border-highlight/50 transition-all w-full sm:w-auto text-center">
                    Follow Our Insights
                </a>
            </div>

            <!-- Social Links -->
            <div class="mt-12 pt-8 border-t border-white/10 flex flex-col items-center">
                <p class="text-xs text-gray-500 mb-6 uppercase tracking-[0.2em] font-medium">Connect with GJ Digital</p>
                <div class="flex gap-8">
                    <a href="#" class="text-gray-400 hover:text-highlight transition-all transform hover:scale-110 text-xl"><i class="fab fa-linkedin-in"></i></a>
                    <a href="#" class="text-gray-400 hover:text-highlight transition-all transform hover:scale-110 text-xl"><i class="fab fa-instagram"></i></a>
                    <a href="#" class="text-gray-400 hover:text-highlight transition-all transform hover:scale-110 text-xl"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="text-gray-400 hover:text-highlight transition-all transform hover:scale-110 text-xl"><i class="fab fa-facebook-f"></i></a>
                </div>
            </div>
        </div>

        <!-- Footer Note -->
        <div class="text-center mt-8 space-y-2">
            <p class="text-gray-500 text-sm">
                &copy; 2024 GJ Digital Marketing Agency. All rights reserved.
            </p>
            <p class="text-xs text-gray-600 font-medium tracking-wide uppercase">
                Driving measurable growth through digital innovation.
            </p>
        </div>
    </main>

</body>
</html>/* End custom CSS */