<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>disneyritozx - Portfolio</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'bg-color': '#0a0a0a',
                        'card-bg': '#151515',
                        'background-color': '#202020',
                        'primary': '#9d4edd',
                        'purple-primary': '#a78bfa',
                        'text': '#e0e0e0',
                        'text-secondary': '#8892b0',
                        'success': '#4ade80',
                        'border': '#2a2a2a',
                        'dropdown-bg': '#1a1a1a',
                    },
                },
            },
        }
    </script>
    <style>
        @keyframes pulse {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.7; }
            100% { transform: scale(1); opacity: 1; }
        }
        @keyframes scrollProjects {
            0% { transform: translateX(0); }
            100% { transform: translateX(calc(-280px * 4 - 4rem)); }
        }
        @keyframes scrollLeft {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }
        @keyframes scrollRight {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(0); }
        }
        .animate-pulse { animation: pulse 2s infinite; }
        .animate-scroll-projects { animation: scrollProjects 30s linear infinite; }
        .animate-scroll-left { animation: scrollLeft 40s linear infinite; }
        .animate-scroll-right { animation: scrollRight 40s linear infinite; }
        
        .fade-left::before,
        .fade-right::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 50px;
            pointer-events: none;
            z-index: 1;
        }
        .fade-left::before {
            left: 0;
            background: linear-gradient(to right, #151515, transparent);
        }
        .fade-right::after {
            right: 0;
            background: linear-gradient(to left, #151515, transparent);
        }
        .projects-fade-left::before,
        .projects-fade-right::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 50px;
            pointer-events: none;
            z-index: 1;
        }
        .projects-fade-left::before {
            left: 0;
            background: linear-gradient(to right, #151515, transparent);
        }
        .projects-fade-right::after {
            right: 0;
            background: linear-gradient(to left, #151515, transparent);
        }
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(-10px); }
          to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeOut {
          from { opacity: 1; transform: translateY(0); }
          to { opacity: 0; transform: translateY(-10px); }
        }

        .language-menu-open {
          animation: fadeIn 0.3s ease-out forwards;
        }

        .language-menu-close {
          animation: fadeOut 0.3s ease-out forwards;
        }

        #language-menu {
            transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
        }

        #language-menu.hidden {
            display: none;
        }

        #language-menu:not(.hidden) {
            display: block;
        }

        #language-button svg {
            transition: transform 0.3s ease;
        }

        #language-button[aria-expanded="true"] svg {
            transform: rotate(180deg);
        }

        .language-menu {
            display: none;
            opacity: 0;
            transform: scale(0.95);
            transition: all 0.2s ease-out;
        }

        .language-menu.show {
            display: block;
            opacity: 1;
            transform: scale(1);
        }

        .language-menu a.active {
            background-color: var(--primary-color);
            color: white;
        }

        #language-button[aria-expanded="true"] svg {
            transform: rotate(180deg);
        }
    </style>
</head>
<body class="bg-bg-color text-text font-['Poppins'] min-h-screen">
    <div class="container mx-auto max-w-7xl p-4 lg:p-8">
        <div class="flex justify-end mb-4">
            <div class="relative inline-block text-left">
                <button type="button" id="language-button" aria-haspopup="true" aria-expanded="false" class="inline-flex items-center justify-between w-[120px] rounded-md border border-border bg-dropdown-bg px-4 py-2 text-sm font-medium text-text hover:bg-opacity-80 focus:outline-none">
                    <span id="selected-language">Português</span>
                    <svg class="ml-2 h-4 w-4 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </button>
                <div id="language-menu" class="absolute right-0 mt-2 w-[120px] origin-top-right rounded-md bg-dropdown-bg border border-border shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none hidden">
                    <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="language-button">
                        <a href="#" class="block px-4 py-2 text-sm text-text hover:bg-background-color bg-selected-color text-selected-text-color" data-lang="pt" role="menuitem" aria-selected="true">English</a>
                        <a href="#" class="block px-4 py-2 text-sm text-text hover:bg-background-color" data-lang="en" role="menuitem" aria-selected="false">Português</a>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-[400px_1fr] gap-8">
            <div class="left-column space-y-8">
                <div class="profile-card bg-card-bg rounded-3xl p-6 border border-border shadow-lg">
                    <div class="status text-success text-sm flex items-center gap-2 mb-4">
                        <span class="status-dot w-2 h-2 bg-success rounded-full animate-pulse"></span>
                        <span data-translate="Online">Online</span>
                    </div>
                    <div class="profile-header flex flex-col sm:flex-row items-center gap-4 mb-4">
                        <img src="img/file.png" alt="Profile" class="profile-image w-20 h-20 rounded-full object-cover">
                        <div class="profile-info text-center sm:text-left">
                            <h1 class="name text-2xl font-bold font-['Montserrat'] bg-gradient-to-r from-primary to-purple-500 bg-clip-text text-transparent">disneyritozx</h1>
                            <p class="role text-text-secondary text-sm flex items-center justify-center sm:justify-start gap-2">
                                <i class="fas fa-terminal"></i>
                                <span data-translate="Fullstack Developer">Fullstack Developer</span>
                            </p>
                        </div>
                    </div>

                    <div class="badge-container flex flex-wrap justify-center sm:justify-start gap-2 my-4">
                        <div class="badge flex items-center gap-2 px-3 py-2 bg-background-color rounded-lg text-xs text-text-secondary">
                            <i class="fas fa-globe text-primary"></i>
                            <span data-translate="English & Portuguese">English & Portuguese</span>
                        </div>
                        <div class="badge flex items-center gap-2 px-3 py-2 bg-background-color rounded-lg text-xs text-text-secondary">
                            <i class="fas fa-map-marker-alt text-primary"></i>
                            <span data-translate="Brazil">Brazil</span>
                        </div>
                    </div>

                    <div class="badge-container flex flex-wrap justify-center sm:justify-start gap-2 my-4">
                        <div class="badge flex items-center gap-2 px-3 py-2 bg-background-color rounded-lg text-xs text-text-secondary">
                            <i class="fas fa-laptop-code text-primary"></i>
                            <span data-translate="Freelancer">Freelancer</span>
                        </div>
                        <div class="badge flex items-center gap-2 px-3 py-2 bg-background-color rounded-lg text-xs text-text-secondary">
                            <i class="fas fa-calendar text-primary"></i>
                            <span data-translate="15y/o">15y/o</span>
                        </div>
                    </div>

                    <div class="action-buttons grid grid-cols-1 sm:grid-cols-2 gap-3 mt-4">
                        <a href="/cdn-cgi/l/email-protection#ef8b869c818a969d869b809597af88828e8683c18c8082" class="action-button bg-primary text-white py-3 px-4 rounded-xl flex items-center justify-center gap-2 font-semibold text-sm uppercase tracking-wide transition-all hover:opacity-90 hover:-translate-y-0.5">
                            <i class="fas fa-envelope"></i>
                            <span data-translate="Hire Me">Hire Me</span>
                        </a>
                        <a href="https://github.com/disneyritozx" class="action-button bg-background-color text-text py-3 px-4 rounded-xl flex items-center justify-center gap-2 font-semibold text-sm uppercase tracking-wide transition-all hover:opacity-90 hover:-translate-y-0.5">
                            <i class="fab fa-github"></i>
                            GitHub
                        </a>
                    </div>
                </div>

                <div class="stats-container grid grid-cols-2 sm:grid-cols-3 gap-3">
                    <div class="stat-card bg-card-bg border border-border rounded-xl p-5 text-center transition-all hover:-translate-y-0.5 hover:border-primary">
                        <div class="stat-number text-xl font-bold text-primary flex items-center justify-center gap-1">16<i class="fas fa-plus text-sm opacity-80"></i></div>
                        <div class="stat-label text-xs text-text-secondary bg-background-color px-2 py-1 rounded-md inline-flex items-center gap-1.5"><i class="fa-solid fa-briefcase"></i> <span data-translate="Projects">Projects</span></div>
                    </div>
                    <div class="stat-card bg-card-bg border border-border rounded-xl p-5 text-center transition-all hover:-translate-y-0.5 hover:border-primary">
                        <div class="stat-number text-xl font-bold text-primary flex items-center justify-center gap-1">3<i class="fas fa-plus text-sm opacity-80"></i></div>
                        <div class="stat-label text-xs text-text-secondary bg-background-color px-2 py-1 rounded-md inline-flex items-center gap-1.5"><i class="fa-solid fa-user-plus"></i> <span data-translate="Clients">Clients</span></div>
                    </div>
                    <div class="stat-card bg-card-bg border border-border rounded-xl p-5 text-center transition-all hover:-translate-y-0.5 hover:border-primary">
                        <div class="stat-number text-xl font-bold text-primary flex items-center justify-center gap-1">2<i class="fas fa-plus text-sm opacity-80"></i></div>
                        <div class="stat-label text-xs text-text-secondary bg-background-color px-2 py-1 rounded-md inline-flex items-center gap-1.5"><i class="fa-solid fa-circle-exclamation"></i> <span data-translate="Years">Years</span></div>
                    </div>
                </div>

                <div class="services-section">
                    <div class="services-container bg-card-bg border border-border rounded-xl p-5 overflow-hidden">
                        <div class="services-title text-lg font-semibold font-['Montserrat'] flex items-center gap-2 mb-2">
                            <i class="fas fa-tools text-primary"></i>
                            <span data-translate="Services & Skills">Services & Skills</span>
                        </div>
                        <div class="services-subtitle text-sm text-text-secondary mb-4">
                            <span data-translate="My services are tailored to your needs and budget">My services are tailored to your needs and budget</span>
                        </div>
                        <div class="scroll-container overflow-hidden relative fade-left fade-right">
                            <div class="scroll-content flex gap-4 p-2 animate-scroll-left">
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm"><span data-translate="Web Design">Web Design</span></div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm"><span data-translate="Website Rework">Website Rework</span></div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm"><span data-translate="Custom Web App">Custom Web App</span></div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm"><span data-translate="Web Design">Web Design</span></div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm"><span data-translate="Website Rework">Website Rework</span></div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm"><span data-translate="Custom Web App">Custom Web App</span></div>
                            </div>
                        </div>
                        <div class="scroll-container overflow-hidden relative fade-left fade-right mt-4">
                            <div class="scroll-content flex gap-4 p-2 animate-scroll-right">
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">HTML5/CSS3</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">JavaScript</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">React.js</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">Python</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">Node.js</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">TailwindCSS</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">HTML5/CSS3</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">JavaScript</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">React.js</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">Python</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">Node.js</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">TailwindCSS</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="right-column space-y-8">
                <div class="projects-container bg-card-bg border border-border rounded-2xl p-6 flex flex-col max-w-full sm:max-w-[800px] md:max-w-[800px] lg:max-w-[500px] xl:max-w-[800px] mx-auto">
                    <h2 class="section-title text-2xl font-semibold font-['Montserrat'] flex items-center gap-3 mb-4">
                        <i class="fas fa-laptop-code text-primary"></i>
                        <span data-translate="Projects">Projects</span>
                    </h2>
                    <div class="projects-scroll relative overflow-hidden py-4 -mx-6 projects-fade-left projects-fade-right">
                        <div class="projects-content flex gap-4 px-6 animate-scroll-projects">
                            <div class="project-card flex-none w-[280px] h-[160px] bg-background-color rounded-xl overflow-hidden relative cursor-pointer transition-transform hover:-translate-y-1">
                                <img src="img/lumen.png" alt="" class="project-image w-full h-full object-cover">
                            </div>
                            <div class="project-card flex-none w-[280px] h-[160px] bg-background-color rounded-xl overflow-hidden relative cursor-pointer transition-transform hover:-translate-y-1">
                                <img src="img/aethera.png" alt="" class="project-image w-full h-full object-cover">
                            </div>
                            <div class="project-card flex-none w-[280px] h-[160px] bg-background-color rounded-xl overflow-hidden relative cursor-pointer transition-transform hover:-translate-y-1">
                                <img src="img/lumen.png" alt="" class="project-image w-full h-full object-cover">
                            </div>
                            <div class="project-card flex-none w-[280px] h-[160px] bg-background-color rounded-xl overflow-hidden relative cursor-pointer transition-transform hover:-translate-y-1">
                                <img src="img/aethera.png" alt="" class="project-image w-full h-full object-cover">
                            </div>
                            <div class="project-card flex-none w-[280px] h-[160px] bg-background-color rounded-xl overflow-hidden relative cursor-pointer transition-transform hover:-translate-y-1">
                                <img src="img/lumen.png" alt="" class="project-image w-full h-full object-cover">
                            </div>
                            <div class="project-card flex-none w-[280px] h-[160px] bg-background-color rounded-xl overflow-hidden relative cursor-pointer transition-transform hover:-translate-y-1">
                                <img src="img/aethera.png" alt="" class="project-image w-full h-full object-cover">
                            </div>
                            <div class="project-card flex-none w-[280px] h-[160px] bg-background-color rounded-xl overflow-hidden relative cursor-pointer transition-transform hover:-translate-y-1">
                                <img src="img/lumen.png" alt="" class="project-image w-full h-full object-cover">
                            </div>
                            <div class="project-card flex-none w-[280px] h-[160px] bg-background-color rounded-xl overflow-hidden relative cursor-pointer transition-transform hover:-translate-y-1">
                                <img src="img/aethera.png" alt="" class="project-image w-full h-full object-cover">
                            </div>
                        </div>
                    </div>
                    <a href="projects.html" class="view-all-button mt-6 py-3 px-6 bg-primary text-white font-semibold rounded-lg flex items-center justify-center gap-2 self-center uppercase tracking-wide transition-all hover:opacity-90 hover:-translate-y-0.5 hover:shadow-lg">
                        <i class="fas fa-th-large"></i>
                        <span data-translate="See all">See all</span>
                    </a>
                </div>

                <div class="contact-container bg-card-bg border border-border rounded-2xl p-6 text-center flex flex-col items-center justify-between min-h-[300px] md:min-h-[324px] lg:min-h-[324px]">
                    <i class="fas fa-user-tie text-4xl text-primary mb-4"></i>
                    <h2 class="contact-title text-3xl font-bold font-['Montserrat'] mb-2 bg-gradient-to-r from-primary to-purple-500 bg-clip-text text-transparent"><span data-translate="Let's Work Together">Let's Work Together</span></h2>
                    <p class="contact-subtitle text-text-secondary mb-4"><span data-translate="and convert all of your ideas">and convert all of your ideas</span> <span class="typewriter text-primary font-bold"></span></p>
                    <div class="social-links flex justify-center gap-4 mt-4">
                        <a href="https://discordapp.com/users/1210770858130415657" class="social-link w-10 h-10 bg-background-color rounded-lg flex items-center justify-center text-text transition-all hover:-translate-y-0.5 hover:bg-primary hover:text-white">
                            <i class="fab fa-discord text-lg"></i>
                        </a>
                        <a href="https://wa.me/+5531990660904" class="social-link w-10 h-10 bg-background-color rounded-lg flex items-center justify-center text-text transition-all hover:-translate-y-0.5 hover:bg-primary hover:text-white">
                            <i class="fa-brands fa-whatsapp"></i>
                        </a>
                        <a href="https://github.com/disneyritozzx" class="social-link w-10 h-10 bg-background-color rounded-lg flex items-center justify-center text-text transition-all hover:-translate-y-0.5 hover:bg-primary hover:text-white">
                            <i class="fab fa-github text-lg"></i>
                        </a>
                    </div>
                    <p class="footer-text text-xs text-text-secondary mt-4">
                        <span data-translate="Made with">Made with</span> <span class="heart text-primary"><i class="fa-solid fa-heart"></i></span> <span data-translate="by">by</span> <span class="text-primary" style="text-shadow: -1px -2px 19px rgba(255,45,149,1);">disneyritozx</span>
                        <br>
                        <span data-translate="All rights reserved">© 2024 All rights reserved</span>
                    </p>
                </div>                
            </div>
        </div>
    </div>

    <script>
        
        
        const translations = {
            pt: {
                "Online": "Online",
                "Fullstack Developer": "Fullstack Developer",
                "English & Portuguese": "English & Portuguese",
                "Brazil": "Brazil",
                "Freelancer": "Freelancer",
                "15y/o": "15y/o",
                "Hire Me": "Hire Me",
                "Projects": "Projects",
                "Clients": "Clients",
                "Years": "Years",
                "Services & Skills": "Services & Skills",
                "My services are tailored to your needs and budget": "My services are tailored to your needs and budget",
                "Web Design": "Web Design",
                "Website Rework": "Website Rework",
                "Custom Web App": "Custom Web App",
                "See all": "See all",
                "Let's Work Together": "Let's Work Together",
                "and convert all of your ideas": "and convert all of your ideas",
                "Made with": "Made with",
                "by": "by",
                "All rights reserved": "All rights reserved"
            },
            en: {
                "Online": "Online",
                "Fullstack Developer": "Desenvolvedor Fullstack",
                "English & Portuguese": "Inglês e Português",
                "Brazil": "Brasil",
                "Freelancer": "Freelancer",
                "15y/o": "15 anos",
                "Hire Me": "Contrate-me",
                "Projects": "Projetos",
                "Clients": "Clientes",
                "Years": "Anos",
                "Services & Skills": "Serviços e Habilidades",
                "My services are tailored to your needs and budget": "Meus serviços são adaptados a sua necessidade!",
                "Web Design": "Design Web",
                "Website Rework": "Reformulação de Site",
                "Custom Web App": "Aplicativo Web Personalizado",
                "See all": "Ver todos",
                "Let's Work Together": "Vamos Trabalhar Juntos",
                "and convert all of your ideas": "e converter todas as suas ideias",
                "Made with": "Feito com",
                "by": "por",
                "All rights reserved": "Todos os direitos reservados"
            },
           /* es: {
                "Online": "En línea",
                "Fullstack Developer": "Desarrollador Fullstack",
                "English & Portuguese": "Inglés y Portugués",
                "Brazil": "Brasil",
                "Freelancer": "Freelancer",
                "15y/o": "15 años",
                "Hire Me": "Contrátame",
                "Projects": "Proyectos",
                "Clients": "Clientes",
                "Years": "Años",
                "Services & Skills": "Servicios y Habilidades",
                "My services are tailored to your needs and budget": "Mis servicios se adaptan a tus necesidades y presupuesto",
                "Web Design": "Diseño Web",
                "Website Rework": "Rediseño de Sitios Web",
                "Custom Web App": "Aplicación Web Personalizada",
                "See all": "Ver todos",
                "Let's Work Together": "Trabajemos Juntos",
                "and convert all of your ideas": "y convertir todas tus ideas",
                "Made with": "Hecho con",
                "by": "por",
                "All rights reserved": "Todos los derechos reservados"
            } i have no idea why i removed*/
        };
        function translatePage(lang) {
            document.querySelectorAll('[data-translate]').forEach(element => {
                const key = element.getAttribute('data-translate');
                if (translations[lang] && translations[lang][key]) {
                    element.textContent = translations[lang][key];
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            const languageButton = document.getElementById('language-button');
            const languageMenu = document.getElementById('language-menu');
            const selectedLanguage = document.getElementById('selected-language');

            languageButton.addEventListener('click', function(event) {
                event.stopPropagation();
                const expanded = this.getAttribute('aria-expanded') === 'true';
                this.setAttribute('aria-expanded', !expanded);
                languageMenu.classList.toggle('hidden');
            });

            document.addEventListener('click', function(event) {
                if (!languageButton.contains(event.target) && !languageMenu.contains(event.target)) {
                    languageButton.setAttribute('aria-expanded', 'false');
                    languageMenu.classList.add('hidden');
                }
            });

            languageMenu.querySelectorAll('a').forEach(item => {
                item.addEventListener('click', function(event) {
                    event.preventDefault();
                    const lang = this.getAttribute('data-lang');
                    selectedLanguage.textContent = this.textContent;
                    translatePage(lang);
                    languageButton.setAttribute('aria-expanded', 'false');
                    languageMenu.classList.add('hidden');

                    languageMenu.querySelectorAll('a').forEach(a => a.classList.remove('active'));
                    this.classList.add('active');
                });
            });
        });

        // Initial translation
        translatePage('en');
    </script>
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    <script>
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({
                pageLanguage: 'en',
                includedLanguages: 'en,pt,es,fr,de',
                layout: google.translate.TranslateElement.InlineLayout.SIMPLE
            }, 'google_translate_element');
        }
    </script>
    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
    <script>
        class TypeWriter {
            constructor(element, words, wait = 3000) {
                this.element = element;
                this.words = words;
                this.txt = '';
                this.wordIndex = 0;
                this.wait = parseInt(wait, 10); 
                this.type();
                this.isDeleting = false;
            }

            type() {
                const current = this.wordIndex % this.words.length;
                const fullTxt = this.words[current];

                if (this.isDeleting) {
                    this.txt = fullTxt.substring(0, this.txt.length - 1);
                } else {
                    this.txt = fullTxt.substring(0, this.txt.length + 1);
                }

                this.element.innerHTML = `<span class="typing">${this.txt}</span>`;

                let typeSpeed = 100;

                if (this.isDeleting) {
                    typeSpeed = 50; 
                }

                if (!this.isDeleting && this.txt === fullTxt) {
                    typeSpeed = 1000; 
                    this.isDeleting = true;

                    setTimeout(() => {
                        this.element.style.opacity = "0.5";
                    }, typeSpeed / 2);
                } else if (this.isDeleting && this.txt === '') {
                    this.isDeleting = false;
                    this.wordIndex++;
                    typeSpeed = 500;

                    this.element.style.opacity = "1";
                }

                setTimeout(() => this.type(), typeSpeed);
            }
        }

        document.addEventListener('DOMContentLoaded', init);

        function init() {
            const txtElement = document.querySelector('.typewriter');
            const words = [
                'into reality',
                'into success',
                'into digital solutions',
                'into innovation'
            ];
            new TypeWriter(txtElement, words);
        }
    </script>
    <div id="google_translate_element" style="display:none;"></div>
</body>
</html>