{"id":578,"date":"2026-05-28T10:55:43","date_gmt":"2026-05-28T15:55:43","guid":{"rendered":"https:\/\/tuxgafas.com\/?page_id=578"},"modified":"2026-05-28T11:06:39","modified_gmt":"2026-05-28T16:06:39","slug":"formulario","status":"publish","type":"page","link":"https:\/\/tuxgafas.com\/index.php\/formulario\/","title":{"rendered":"Formulario"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"578\" class=\"elementor elementor-578\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4e2e09c e-flex e-con-boxed parallax_section_no qode_elementor_container_no e-con e-parent\" data-id=\"4e2e09c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4c9f949 elementor-widget elementor-widget-html\" data-id=\"4c9f949\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t <!-- Floating Background Elements -->\r\n    <div class=\"floating-elements\">\r\n        <div class=\"floating-circle\"><\/div>\r\n        <div class=\"floating-circle\"><\/div>\r\n        <div class=\"floating-circle\"><\/div>\r\n    <\/div>\r\n        <\/section>        <!-- Contact Section -->\r\n        <section id=\"contact\" class=\"content-section\">\r\n            <h2 class=\"section-title\">Contact<\/h2>\r\n            <p class=\"section-subtitle\">\r\n                Ready to elevate your web presence? Get in touch with us to discuss your next project \r\n                and how we can create amazing navigation experiences for your users.\r\n            <\/p>\r\n            \r\n            <div class=\"contact-form\">\r\n                <form>\r\n                    <div class=\"form-row\">\r\n                        <div class=\"form-group\">\r\n                            <label for=\"firstName\" class=\"form-label\">First Name<\/label>\r\n                            <input type=\"text\" id=\"firstName\" name=\"firstName\" class=\"form-input\" placeholder=\"Enter your first name\" required>\r\n                        <\/div>\r\n                        <div class=\"form-group\">\r\n                            <label for=\"lastName\" class=\"form-label\">Last Name<\/label>\r\n                            <input type=\"text\" id=\"lastName\" name=\"lastName\" class=\"form-input\" placeholder=\"Enter your last name\" required>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"form-group\">\r\n                        <label for=\"email\" class=\"form-label\">Email Address<\/label>\r\n                        <input type=\"email\" id=\"email\" name=\"email\" class=\"form-input\" placeholder=\"Enter your email address\" required>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"form-group\">\r\n                        <label for=\"subject\" class=\"form-label\">Subject<\/label>\r\n                        <input type=\"text\" id=\"subject\" name=\"subject\" class=\"form-input\" placeholder=\"What's this about?\" required>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"form-group\">\r\n                        <label for=\"message\" class=\"form-label\">Message<\/label>\r\n                        <textarea id=\"message\" name=\"message\" class=\"form-textarea\" placeholder=\"Tell us more about your project...\" required><\/textarea>\r\n                    <\/div>\r\n                    \r\n                    <button type=\"submit\" class=\"submit-btn\">\r\n                        <span>Send Message<\/span>\r\n                    <\/button>\r\n                <\/form>\r\n            <\/div>\r\n        <\/section>\r\n    <\/div>\r\n\r\n \r\n            \r\n                \r\n\r\n    <style>\r\n        \r\n         \/* ==================== GLOBAL STYLES ==================== *\/\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        body {\r\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);\r\n            min-height: 100vh;\r\n            padding: 0;\r\n            margin: 0;\r\n            overflow-x: hidden;\r\n        }\r\n\r\n        .demo-container {\r\n            padding: 40px 20px;\r\n            min-height: 100vh;\r\n        }        \/* ==================== ADVANCED NAVIGATION BAR ==================== *\/        .navbar-container {\r\n            position: fixed;\r\n            top: 30px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            z-index: 1000;\r\n            width: calc(100% - 60px);\r\n            max-width: 1000px;\r\n            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n        }\r\n\r\n        .navbar {\r\n            background: rgba(255, 255, 255, 0.1);\r\n            backdrop-filter: blur(20px);\r\n            border: 1px solid rgba(255, 255, 255, 0.2);\r\n            border-radius: 50px;\r\n            padding: 12px 25px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            box-shadow: \r\n                0 20px 40px rgba(0, 0, 0, 0.1),\r\n                inset 0 1px 0 rgba(255, 255, 255, 0.2);\r\n            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .navbar::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: -100%;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, \r\n                transparent, \r\n                rgba(255, 255, 255, 0.1), \r\n                transparent);\r\n            transition: left 0.8s ease;\r\n        }\r\n\r\n        .navbar:hover::before {\r\n            left: 100%;\r\n        }\r\n\r\n        .navbar:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: \r\n                0 25px 50px rgba(0, 0, 0, 0.15),\r\n                inset 0 1px 0 rgba(255, 255, 255, 0.3);\r\n        }\r\n\r\n        \/* ==================== LOGO SECTION ==================== *\/\r\n        .navbar-brand {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            text-decoration: none;\r\n            color: white;\r\n            font-weight: 700;\r\n            font-size: 1.4rem;\r\n            z-index: 2;\r\n            position: relative;\r\n        }\r\n\r\n        .logo-icon {\r\n            width: 40px;\r\n            height: 40px;\r\n            background: linear-gradient(135deg, #ff6b6b, #4ecdc4);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            position: relative;\r\n            overflow: hidden;\r\n            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);\r\n        }\r\n\r\n        .logo-icon::before {\r\n            content: '';\r\n            position: absolute;\r\n            width: 20px;\r\n            height: 20px;\r\n            background: rgba(255, 255, 255, 0.9);\r\n            border-radius: 50%;\r\n            animation: logo-pulse 2s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes logo-pulse {\r\n            0%, 100% { transform: scale(1); opacity: 0.8; }\r\n            50% { transform: scale(1.2); opacity: 1; }\r\n        }\r\n\r\n        .brand-text {\r\n            background: linear-gradient(135deg, #ffffff, #f0f0f0);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n        }        \/* ==================== NAVIGATION LINKS ==================== *\/\r\n        .navbar-nav {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 5px;\r\n            list-style: none;\r\n            z-index: 2;\r\n            position: relative;\r\n        }\r\n\r\n        \/* Desktop navigation styles *\/\r\n        @media (min-width: 993px) {\r\n            .navbar-nav {\r\n                display: flex !important;\r\n                position: static !important;\r\n                opacity: 1 !important;\r\n                visibility: visible !important;\r\n                transform: none !important;\r\n                background: none !important;\r\n                border: none !important;\r\n                padding: 0 !important;\r\n                box-shadow: none !important;\r\n                flex-direction: row !important;\r\n            }\r\n        }\r\n\r\n        .nav-item {\r\n            position: relative;\r\n        }\r\n\r\n        .nav-link {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 6px;\r\n            padding: 10px 16px;\r\n            text-decoration: none;\r\n            color: rgba(255, 255, 255, 0.9);\r\n            font-weight: 500;\r\n            font-size: 0.9rem;\r\n            border-radius: 25px;\r\n            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n            position: relative;\r\n            overflow: hidden;\r\n            white-space: nowrap;\r\n        }\r\n\r\n        .nav-link::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));\r\n            border-radius: 25px;\r\n            opacity: 0;\r\n            transition: opacity 0.3s ease;\r\n        }\r\n\r\n        .nav-link:hover::before {\r\n            opacity: 1;\r\n        }\r\n\r\n        .nav-link:hover {\r\n            color: white;\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);\r\n        }\r\n\r\n        .nav-link.active {\r\n            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));\r\n            color: white;\r\n            box-shadow: \r\n                inset 0 1px 0 rgba(255, 255, 255, 0.3),\r\n                0 4px 12px rgba(0, 0, 0, 0.1);\r\n        }        .nav-icon {\r\n            width: 16px;\r\n            height: 16px;\r\n            fill: currentColor;\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        .nav-link:hover .nav-icon {\r\n            transform: scale(1.1);\r\n        }\r\n\r\n        \/* ==================== MOBILE MENU TOGGLE ==================== *\/        .mobile-toggle {\r\n            display: none;\r\n            background: none;\r\n            border: none;\r\n            color: white;\r\n            font-size: 1.5rem;\r\n            cursor: pointer;\r\n            padding: 8px;\r\n            border-radius: 50%;\r\n            transition: all 0.3s ease;\r\n            z-index: 1001;\r\n            position: relative;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .mobile-toggle:hover {\r\n            background: rgba(255, 255, 255, 0.1);\r\n            transform: scale(1.1);\r\n        }\r\n\r\n        .hamburger {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 4px;\r\n            width: 24px;\r\n            height: 18px;\r\n            justify-content: center;\r\n        }\r\n\r\n        .hamburger span {\r\n            width: 24px;\r\n            height: 2px;\r\n            background: white;\r\n            border-radius: 2px;\r\n            transition: all 0.3s ease;\r\n            display: block;\r\n        }\r\n\r\n        .mobile-toggle.active .hamburger span:nth-child(1) {\r\n            transform: rotate(45deg) translate(6px, 6px);\r\n        }\r\n\r\n        .mobile-toggle.active .hamburger span:nth-child(2) {\r\n            opacity: 0;\r\n            transform: translateX(-20px);\r\n        }\r\n\r\n        .mobile-toggle.active .hamburger span:nth-child(3) {\r\n            transform: rotate(-45deg) translate(6px, -6px);\r\n        }        \/* ==================== CTA BUTTON ==================== *\/\r\n        .cta-button {\r\n            background: linear-gradient(135deg, #ff6b6b, #ee5a52);\r\n            color: white;\r\n            text-decoration: none;\r\n            padding: 10px 20px;\r\n            border-radius: 25px;\r\n            font-weight: 600;\r\n            font-size: 0.9rem;\r\n            box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);\r\n            transition: all 0.3s ease;\r\n            white-space: nowrap;\r\n            margin-left: 5px;\r\n        }\r\n\r\n        .cta-button:hover {\r\n            transform: translateY(-1px);\r\n            box-shadow: 0 10px 20px rgba(255, 107, 107, 0.4);\r\n        }\/* ==================== MOBILE RESPONSIVE ==================== *\/\r\n        @media (max-width: 992px) {\r\n            .navbar-container {\r\n                top: 20px;\r\n                width: calc(100% - 30px);\r\n            }\r\n\r\n            .navbar {\r\n                padding: 12px 20px;\r\n                position: relative;\r\n            }\r\n\r\n            .mobile-toggle {\r\n                display: flex !important;\r\n                align-items: center;\r\n                justify-content: center;\r\n            }\r\n\r\n            \/* Hide desktop navigation on mobile *\/\r\n            .navbar-nav {\r\n                display: none;\r\n            }\r\n\r\n            .brand-text {\r\n                font-size: 1.2rem;\r\n            }\r\n        }\r\n\r\n        \/* Mobile Menu Overlay *\/\r\n        .mobile-menu-overlay {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100vh;\r\n            background: rgba(0, 0, 0, 0.8);\r\n            backdrop-filter: blur(10px);\r\n            z-index: 1500;\r\n            opacity: 0;\r\n            visibility: hidden;\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .mobile-menu-overlay.active {\r\n            opacity: 1;\r\n            visibility: visible;\r\n        }\r\n\r\n        \/* Mobile Menu Container *\/\r\n        .mobile-menu {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100vh;\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);\r\n            z-index: 1600;\r\n            transform: translateY(-100%);\r\n            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n            overflow-y: auto;\r\n        }\r\n\r\n        .mobile-menu.active {\r\n            transform: translateY(0);\r\n        }\r\n\r\n        \/* Mobile Menu Header *\/\r\n        .mobile-menu-header {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            padding: 30px 30px 20px;\r\n            border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n        }\r\n\r\n        .mobile-menu-brand {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            text-decoration: none;\r\n            color: white;\r\n            font-weight: 700;\r\n            font-size: 1.4rem;\r\n        }\r\n\r\n        .mobile-menu-close {\r\n            background: none;\r\n            border: none;\r\n            color: white;\r\n            font-size: 2rem;\r\n            cursor: pointer;\r\n            padding: 8px;\r\n            border-radius: 50%;\r\n            transition: all 0.3s ease;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            width: 48px;\r\n            height: 48px;\r\n        }\r\n\r\n        .mobile-menu-close:hover {\r\n            background: rgba(255, 255, 255, 0.1);\r\n            transform: scale(1.1);\r\n        }\r\n\r\n        \/* Mobile Menu Navigation *\/\r\n        .mobile-menu-nav {\r\n            padding: 40px 30px;\r\n            list-style: none;\r\n        }\r\n\r\n        .mobile-menu-item {\r\n            margin-bottom: 8px;\r\n        }\r\n\r\n        .mobile-menu-link {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 16px;\r\n            padding: 20px 24px;\r\n            text-decoration: none;\r\n            color: rgba(255, 255, 255, 0.9);\r\n            font-weight: 500;\r\n            font-size: 1.1rem;\r\n            border-radius: 20px;\r\n            transition: all 0.3s ease;\r\n            background: rgba(255, 255, 255, 0.05);\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n            margin-bottom: 12px;\r\n        }\r\n\r\n        .mobile-menu-link:hover,\r\n        .mobile-menu-link.active {\r\n            background: rgba(255, 255, 255, 0.15);\r\n            color: white;\r\n            transform: translateX(8px);\r\n            border-color: rgba(255, 255, 255, 0.2);\r\n        }\r\n\r\n        .mobile-menu-icon {\r\n            width: 24px;\r\n            height: 24px;\r\n            fill: currentColor;\r\n        }\r\n\r\n        .mobile-cta {\r\n            margin: 30px 30px 40px;\r\n        }\r\n\r\n        .mobile-cta-button {\r\n            display: block;\r\n            width: 100%;\r\n            background: linear-gradient(135deg, #ff6b6b, #ee5a52);\r\n            color: white;\r\n            text-decoration: none;\r\n            padding: 20px;\r\n            border-radius: 20px;\r\n            font-weight: 600;\r\n            font-size: 1.1rem;\r\n            text-align: center;\r\n            box-shadow: 0 10px 30px rgba(255, 107, 107, 0.3);\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .mobile-cta-button:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 15px 40px rgba(255, 107, 107, 0.4);\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .navbar-container {\r\n                width: calc(100% - 30px);\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .navbar-container {\r\n                width: calc(100% - 20px);\r\n                top: 15px;\r\n            }\r\n\r\n            .navbar {\r\n                padding: 10px 15px;\r\n            }\r\n\r\n            .navbar-brand {\r\n                gap: 8px;\r\n            }\r\n\r\n            .logo-icon {\r\n                width: 35px;\r\n                height: 35px;\r\n            }\r\n\r\n            .brand-text {\r\n                font-size: 1.1rem;\r\n            }\r\n        }        \/* ==================== DEMO CONTENT ==================== *\/\r\n        .demo-content {\r\n            margin-top: 120px;\r\n            text-align: center;\r\n            color: white;\r\n            padding: 40px 20px;\r\n        }\r\n\r\n        .demo-title {\r\n            font-size: 3rem;\r\n            font-weight: 700;\r\n            margin-bottom: 20px;\r\n            background: linear-gradient(135deg, #ffffff, #f0f0f0);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\r\n        }\r\n\r\n        .demo-subtitle {\r\n            font-size: 1.2rem;\r\n            opacity: 0.9;\r\n            margin-bottom: 40px;\r\n            max-width: 600px;\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n            line-height: 1.6;\r\n        }        \/* ==================== CONTENT SECTIONS ==================== *\/\r\n        .content-section {\r\n            min-height: 100vh;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            flex-direction: column;\r\n            padding: 100px 20px 40px;\r\n            text-align: center;\r\n            color: white;\r\n            position: relative;\r\n        }        \/* Add extra spacing for home section *\/\r\n        #home {\r\n            padding-top: 200px;\r\n        }\r\n\r\n        .section-title {\r\n            font-size: 2.5rem;\r\n            font-weight: 700;\r\n            margin-bottom: 20px;\r\n            background: linear-gradient(135deg, #ffffff, #f0f0f0);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n        }\r\n\r\n        .section-subtitle {\r\n            font-size: 1.1rem;\r\n            opacity: 0.8;\r\n            max-width: 600px;\r\n            line-height: 1.6;\r\n            margin-bottom: 40px;\r\n        }        #home {\r\n            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);\r\n            padding-top: 200px;\r\n        }\r\n\r\n        #about {\r\n            background: linear-gradient(135deg, #2d1b69 0%, #11998e 50%, #38ef7d 100%);\r\n        }\r\n\r\n        #services {\r\n            background: linear-gradient(135deg, #134e5e 0%, #71b280 50%, #2d3748 100%);\r\n        }\r\n\r\n        #portfolio {\r\n            background: linear-gradient(135deg, #4a148c 0%, #6a1b9a 50%, #8e24aa 100%);\r\n        }\r\n\r\n        #contact {\r\n            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1a202c 100%);\r\n        }\r\n\r\n        .feature-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n            gap: 30px;\r\n            margin-top: 60px;\r\n            max-width: 1000px;\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n        }\r\n\r\n        .feature-card {\r\n            background: rgba(255, 255, 255, 0.1);\r\n            backdrop-filter: blur(10px);\r\n            border: 1px solid rgba(255, 255, 255, 0.2);\r\n            border-radius: 20px;\r\n            padding: 30px;\r\n            text-align: center;\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        .feature-card:hover {\r\n            transform: translateY(-10px);\r\n        }\r\n\r\n        .feature-icon {\r\n            width: 60px;\r\n            height: 60px;\r\n            background: linear-gradient(135deg, #ff6b6b, #4ecdc4);\r\n            border-radius: 50%;\r\n            margin: 0 auto 20px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 1.5rem;\r\n        }\r\n\r\n        .feature-title {\r\n            font-size: 1.3rem;\r\n            font-weight: 600;\r\n            margin-bottom: 15px;\r\n        }\r\n\r\n        .feature-description {\r\n            opacity: 0.8;\r\n            line-height: 1.5;\r\n        }\r\n\r\n        \/* ==================== FLOATING ELEMENTS ==================== *\/\r\n        .floating-elements {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            pointer-events: none;\r\n            z-index: -1;\r\n        }\r\n\r\n        .floating-circle {\r\n            position: absolute;\r\n            border-radius: 50%;\r\n            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));\r\n            animation: float 6s ease-in-out infinite;\r\n        }\r\n\r\n        .floating-circle:nth-child(1) {\r\n            width: 80px;\r\n            height: 80px;\r\n            top: 20%;\r\n            left: 10%;\r\n            animation-delay: 0s;\r\n        }\r\n\r\n        .floating-circle:nth-child(2) {\r\n            width: 120px;\r\n            height: 120px;\r\n            top: 60%;\r\n            right: 15%;\r\n            animation-delay: 2s;\r\n        }\r\n\r\n        .floating-circle:nth-child(3) {\r\n            width: 60px;\r\n            height: 60px;\r\n            bottom: 20%;\r\n            left: 20%;\r\n            animation-delay: 4s;\r\n        }        @keyframes float {\r\n            0%, 100% { transform: translateY(0px) rotate(0deg); }\r\n            50% { transform: translateY(-20px) rotate(180deg); }\r\n        }\r\n\r\n        \/* ==================== FOOTER ==================== *\/\r\n        .footer {\r\n            background: rgba(255, 255, 255, 0.1);\r\n            backdrop-filter: blur(20px);\r\n            border: 1px solid rgba(255, 255, 255, 0.2);\r\n            border-radius: 50px;\r\n            margin: 30px auto 40px;\r\n            padding: 25px 40px;\r\n            max-width: 1000px;\r\n            width: calc(100% - 60px);\r\n            box-shadow: \r\n                0 20px 40px rgba(0, 0, 0, 0.1),\r\n                inset 0 1px 0 rgba(255, 255, 255, 0.2);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .footer::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: -100%;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, \r\n                transparent, \r\n                rgba(255, 255, 255, 0.1), \r\n                transparent);\r\n            transition: left 0.8s ease;\r\n        }\r\n\r\n        .footer:hover::before {\r\n            left: 100%;\r\n        }\r\n\r\n        .footer-content {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            flex-wrap: wrap;\r\n            gap: 20px;\r\n            color: white;\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n\r\n        .footer-brand {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            text-decoration: none;\r\n            color: white;\r\n            font-weight: 700;\r\n            font-size: 1.2rem;\r\n        }\r\n\r\n        .footer-logo {\r\n            width: 35px;\r\n            height: 35px;\r\n            background: linear-gradient(135deg, #ff6b6b, #4ecdc4);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            position: relative;\r\n            overflow: hidden;\r\n            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);\r\n        }\r\n\r\n        .footer-logo::before {\r\n            content: '';\r\n            position: absolute;\r\n            width: 16px;\r\n            height: 16px;\r\n            background: rgba(255, 255, 255, 0.9);\r\n            border-radius: 50%;\r\n            animation: logo-pulse 2s ease-in-out infinite;\r\n        }\r\n\r\n        .footer-links {\r\n            display: flex;\r\n            gap: 30px;\r\n            list-style: none;\r\n        }\r\n\r\n        .footer-link {\r\n            color: rgba(255, 255, 255, 0.8);\r\n            text-decoration: none;\r\n            font-weight: 500;\r\n            font-size: 0.9rem;\r\n            transition: all 0.3s ease;\r\n            padding: 8px 0;\r\n        }\r\n\r\n        .footer-link:hover {\r\n            color: white;\r\n            transform: translateY(-1px);\r\n        }\r\n\r\n        .footer-social {\r\n            display: flex;\r\n            gap: 15px;\r\n        }\r\n\r\n        .social-link {\r\n            width: 40px;\r\n            height: 40px;\r\n            background: rgba(255, 255, 255, 0.1);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: white;\r\n            text-decoration: none;\r\n            transition: all 0.3s ease;\r\n            border: 1px solid rgba(255, 255, 255, 0.2);\r\n        }\r\n\r\n        .social-link:hover {\r\n            background: rgba(255, 255, 255, 0.2);\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);\r\n        }\r\n\r\n        .social-icon {\r\n            width: 18px;\r\n            height: 18px;\r\n            fill: currentColor;\r\n        }\r\n\r\n        .footer-copy {\r\n            text-align: center;\r\n            margin-top: 20px;\r\n            padding-top: 20px;\r\n            border-top: 1px solid rgba(255, 255, 255, 0.1);\r\n            color: rgba(255, 255, 255, 0.7);\r\n            font-size: 0.85rem;\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .footer {\r\n                width: calc(100% - 30px);\r\n                padding: 20px 25px;\r\n            }\r\n\r\n            .footer-content {\r\n                flex-direction: column;\r\n                text-align: center;\r\n                gap: 15px;\r\n            }\r\n\r\n            .footer-links {\r\n                gap: 20px;\r\n                flex-wrap: wrap;\r\n                justify-content: center;\r\n            }\r\n\r\n            .footer-social {\r\n                justify-content: center;\r\n            }\r\n        }        @media (max-width: 480px) {\r\n            .footer {\r\n                width: calc(100% - 20px);\r\n                padding: 15px 20px;\r\n            }\r\n\r\n            .footer-links {\r\n                gap: 15px;\r\n            }\r\n        }\r\n\r\n        \/* ==================== CONTACT FORM ==================== *\/\r\n        .contact-form {\r\n            max-width: 600px;\r\n            margin: 0 auto;\r\n            background: rgba(255, 255, 255, 0.1);\r\n            backdrop-filter: blur(15px);\r\n            border: 1px solid rgba(255, 255, 255, 0.2);\r\n            border-radius: 25px;\r\n            padding: 40px;\r\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);\r\n        }\r\n\r\n        .form-group {\r\n            margin-bottom: 25px;\r\n            position: relative;\r\n        }\r\n\r\n        .form-label {\r\n            display: block;\r\n            color: rgba(255, 255, 255, 0.9);\r\n            font-weight: 500;\r\n            margin-bottom: 8px;\r\n            font-size: 0.95rem;\r\n        }\r\n\r\n        .form-input,\r\n        .form-textarea {\r\n            width: 100%;\r\n            padding: 15px 20px;\r\n            background: rgba(255, 255, 255, 0.1);\r\n            border: 1px solid rgba(255, 255, 255, 0.2);\r\n            border-radius: 15px;\r\n            color: white;\r\n            font-size: 16px;\r\n            outline: none;\r\n            transition: all 0.3s ease;\r\n            backdrop-filter: blur(10px);\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .form-input::placeholder,\r\n        .form-textarea::placeholder {\r\n            color: rgba(255, 255, 255, 0.6);\r\n        }\r\n\r\n        .form-input:focus,\r\n        .form-textarea:focus {\r\n            border-color: rgba(255, 255, 255, 0.4);\r\n            background: rgba(255, 255, 255, 0.15);\r\n            box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        .form-textarea {\r\n            resize: vertical;\r\n            min-height: 120px;\r\n            font-family: inherit;\r\n        }\r\n\r\n        .form-row {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 20px;\r\n        }\r\n\r\n        .submit-btn {\r\n            width: 100%;\r\n            padding: 15px 30px;\r\n            background: linear-gradient(135deg, #667eea, #764ba2);\r\n            color: white;\r\n            border: none;\r\n            border-radius: 15px;\r\n            font-size: 16px;\r\n            font-weight: 600;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .submit-btn::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: -100%;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(135deg, #764ba2, #667eea);\r\n            transition: left 0.3s ease;\r\n        }\r\n\r\n        .submit-btn:hover::before {\r\n            left: 0;\r\n        }\r\n\r\n        .submit-btn:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);\r\n        }\r\n\r\n        .submit-btn span {\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .contact-form {\r\n                padding: 30px 25px;\r\n                margin: 0 20px;\r\n            }\r\n\r\n            .form-row {\r\n                grid-template-columns: 1fr;\r\n                gap: 15px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .contact-form {\r\n                padding: 25px 20px;\r\n                margin: 0 10px;\r\n            }\r\n        }\r\n\r\n    <\/style>\r\n    \r\n    <script>\r\n        \/\/ Mobile Navigation Toggle\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            const mobileToggle = document.getElementById('mobileToggle');\r\n            const mobileMenu = document.getElementById('mobileMenu');\r\n            const mobileMenuOverlay = document.getElementById('mobileMenuOverlay');\r\n            const mobileMenuClose = document.getElementById('mobileMenuClose');\r\n            const mobileMenuLinks = document.querySelectorAll('.mobile-menu-link');\r\n            const navLinks = document.querySelectorAll('.nav-link');\r\n\r\n            \/\/ Function to open mobile menu\r\n            function openMobileMenu() {\r\n                console.log('Opening mobile menu');\r\n                mobileToggle.classList.add('active');\r\n                mobileMenu.classList.add('active');\r\n                mobileMenuOverlay.classList.add('active');\r\n                document.body.style.overflow = 'hidden'; \/\/ Prevent body scroll\r\n            }\r\n\r\n            \/\/ Function to close mobile menu\r\n            function closeMobileMenu() {\r\n                console.log('Closing mobile menu');\r\n                mobileToggle.classList.remove('active');\r\n                mobileMenu.classList.remove('active');\r\n                mobileMenuOverlay.classList.remove('active');\r\n                document.body.style.overflow = ''; \/\/ Restore body scroll\r\n            }\r\n\r\n            \/\/ Toggle mobile menu when hamburger is clicked\r\n            mobileToggle.addEventListener('click', function(e) {\r\n                e.preventDefault();\r\n                e.stopPropagation();\r\n                \r\n                if (mobileMenu.classList.contains('active')) {\r\n                    closeMobileMenu();\r\n                } else {\r\n                    openMobileMenu();\r\n                }\r\n            });\r\n\r\n            \/\/ Close mobile menu when close button is clicked\r\n            mobileMenuClose.addEventListener('click', function(e) {\r\n                e.preventDefault();\r\n                closeMobileMenu();\r\n            });\r\n\r\n            \/\/ Close mobile menu when overlay is clicked\r\n            mobileMenuOverlay.addEventListener('click', function() {\r\n                closeMobileMenu();\r\n            });\r\n\r\n            \/\/ Close mobile menu when clicking on mobile menu links\r\n            mobileMenuLinks.forEach(link => {\r\n                link.addEventListener('click', function() {\r\n                    closeMobileMenu();\r\n                    \r\n                    \/\/ Remove active class from all mobile links\r\n                    mobileMenuLinks.forEach(l => l.classList.remove('active'));\r\n                    \/\/ Add active class to clicked link\r\n                    this.classList.add('active');\r\n\r\n                    \/\/ Also update desktop nav active state\r\n                    const href = this.getAttribute('href');\r\n                    navLinks.forEach(navLink => {\r\n                        navLink.classList.remove('active');\r\n                        if (navLink.getAttribute('href') === href) {\r\n                            navLink.classList.add('active');\r\n                        }\r\n                    });\r\n                });\r\n            });\r\n\r\n            \/\/ Close mobile menu when clicking on desktop nav links\r\n            navLinks.forEach(link => {\r\n                link.addEventListener('click', function() {\r\n                    closeMobileMenu();\r\n                    \r\n                    \/\/ Remove active class from all links\r\n                    navLinks.forEach(l => l.classList.remove('active'));\r\n                    \/\/ Add active class to clicked link (except CTA button)\r\n                    if (!this.classList.contains('cta-button')) {\r\n                        this.classList.add('active');\r\n                        \r\n                        \/\/ Also update mobile nav active state\r\n                        const href = this.getAttribute('href');\r\n                        mobileMenuLinks.forEach(mobileLink => {\r\n                            mobileLink.classList.remove('active');\r\n                            if (mobileLink.getAttribute('href') === href) {\r\n                                mobileLink.classList.add('active');\r\n                            }\r\n                        });\r\n                    }\r\n                });\r\n            });\r\n\r\n            \/\/ Close mobile menu on escape key\r\n            document.addEventListener('keydown', function(e) {\r\n                if (e.key === 'Escape' && mobileMenu.classList.contains('active')) {\r\n                    closeMobileMenu();\r\n                }\r\n            });\r\n\r\n            \/\/ Navbar scroll effect - Remove auto-hide, keep it sticky\r\n            window.addEventListener('scroll', function() {\r\n                const navbar = document.querySelector('.navbar-container');\r\n                let scrollTop = window.pageYOffset || document.documentElement.scrollTop;\r\n                \r\n                \/\/ Add\/remove scroll class for styling changes if needed\r\n                if (scrollTop > 50) {\r\n                    navbar.classList.add('scrolled');\r\n                } else {\r\n                    navbar.classList.remove('scrolled');\r\n                }\r\n            });\r\n\r\n            \/\/ Add hover effect to floating circles\r\n            const floatingCircles = document.querySelectorAll('.floating-circle');\r\n            floatingCircles.forEach(circle => {\r\n                circle.addEventListener('mouseenter', function() {\r\n                    this.style.transform = 'scale(1.2)';\r\n                });\r\n                \r\n                circle.addEventListener('mouseleave', function() {\r\n                    this.style.transform = 'scale(1)';\r\n                });\r\n            });\r\n\r\n            \/\/ Smooth scrolling for navigation links\r\n            document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n                anchor.addEventListener('click', function (e) {\r\n                    e.preventDefault();\r\n                    const target = document.querySelector(this.getAttribute('href'));\r\n                    if (target) {\r\n                        target.scrollIntoView({\r\n                            behavior: 'smooth',\r\n                            block: 'start'\r\n                        });\r\n                    }\r\n                });\r\n            });\r\n\r\n            \/\/ Handle window resize\r\n            window.addEventListener('resize', function() {\r\n                if (window.innerWidth > 992 && mobileMenu.classList.contains('active')) {\r\n                    closeMobileMenu();\r\n                }\r\n            });\r\n        });\r\n        \r\n    <\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Contact Ready to elevate your web presence? Get in touch with us to discuss your next project and how we can create amazing navigation experiences for your users. First Name Last Name Email Address Subject Message Send Message<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"content-type":"","rs_blank_template":"","rs_page_bg_color":"","slide_template_v7":"","footnotes":""},"class_list":["post-578","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tuxgafas.com\/index.php\/wp-json\/wp\/v2\/pages\/578","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tuxgafas.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tuxgafas.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tuxgafas.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tuxgafas.com\/index.php\/wp-json\/wp\/v2\/comments?post=578"}],"version-history":[{"count":7,"href":"https:\/\/tuxgafas.com\/index.php\/wp-json\/wp\/v2\/pages\/578\/revisions"}],"predecessor-version":[{"id":586,"href":"https:\/\/tuxgafas.com\/index.php\/wp-json\/wp\/v2\/pages\/578\/revisions\/586"}],"wp:attachment":[{"href":"https:\/\/tuxgafas.com\/index.php\/wp-json\/wp\/v2\/media?parent=578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}