{"id":13,"date":"2026-07-29T04:33:50","date_gmt":"2026-07-29T04:33:50","guid":{"rendered":"https:\/\/wewatch.asia\/?page_id=13"},"modified":"2026-08-21T08:39:22","modified_gmt":"2026-08-21T08:39:22","slug":"contact-us","status":"publish","type":"page","link":"https:\/\/wewatch.asia\/?page_id=13","title":{"rendered":"Contact Us"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <meta name=\"description\" content=\"Get in touch with us. Send a message, find our office location in Phnom Penh, or connect on social media.\">\n    <title>Contact Us | Get in Touch<\/title>\n\n    <!-- Font Awesome 6.5.2 for icons -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.2\/css\/all.min.css\">\n\n    <!-- Google Fonts -->\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&amp;family=Roboto:wght@300;400;500;700&amp;family=Roboto+Slab:wght@500;600;700;800&amp;display=swap\" rel=\"stylesheet\">\n\n    <style>\n        \/* ==========================================\n           1. CSS VARIABLES & THEME TOKENS\n        ========================================== *\/\n        :root {\n            --bg-body: #ffffff;\n            --bg-card: #ffffff;\n            --bg-input: #f4f5f7;\n            --bg-input-focus: #ffffff;\n            --text-heading: #222222;\n            --text-body: #444444;\n            --text-muted: #777777;\n            --text-copyright: #111111;\n            \n            --accent-primary: #333333;\n            --accent-hover: #666666;\n            --accent-blue: #2563eb;\n            --accent-green: #10b981;\n            --border-color: #e4e4e7;\n            --border-input: #e4e4e7;\n            --border-btn: #aaa;\n            \n            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);\n            --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.08);\n            --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.2);\n            --radius-sm: 4px;\n            --radius-md: 12px;\n            --radius-lg: 20px;\n            \n            --transition-speed: 0.3s;\n            --font-body: 'Roboto', 'Inter', sans-serif;\n            --font-heading: 'Roboto Slab', serif;\n        }\n\n        [data-theme=\"dark\"] {\n            --bg-body: #090d16;\n            --bg-card: #131b2e;\n            --bg-input: #1c263b;\n            --bg-input-focus: #24314c;\n            --text-heading: #f3f4f6;\n            --text-body: #d1d5db;\n            --text-muted: #9ca3af;\n            --text-copyright: #e5e7eb;\n            \n            --accent-primary: #38bdf8;\n            --accent-hover: #0ea5e9;\n            --border-color: #1e293b;\n            --border-input: #2d3d5a;\n            --border-btn: #38bdf8;\n            \n            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);\n            --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.4);\n            --shadow-glow: 0 0 25px rgba(56, 189, 248, 0.25);\n        }\n\n        \/* ==========================================\n           2. GLOBAL RESET & BASE STYLES\n        ========================================== *\/\n        *, *::before, *::after {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n\n        html {\n            scroll-behavior: smooth;\n            font-size: 16px;\n        }\n\n        body {\n            background: var(--bg-body);\n            color: var(--text-body);\n            font-family: var(--font-body);\n            min-height: 100vh;\n            line-height: 1.6;\n            transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;\n            overflow-x: hidden;\n        }\n\n        \/* Ambient background glow elements *\/\n        .ambient-bg {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            pointer-events: none;\n            z-index: 0;\n            overflow: hidden;\n        }\n\n        .ambient-orb {\n            position: absolute;\n            border-radius: 50%;\n            filter: blur(100px);\n            opacity: 0.15;\n            transition: opacity 0.5s ease;\n        }\n        \n        [data-theme=\"dark\"] .ambient-orb {\n            opacity: 0.25;\n        }\n\n        .orb-1 {\n            width: 500px;\n            height: 500px;\n            top: -100px;\n            left: -100px;\n            background: radial-gradient(circle, #3b82f6, transparent 70%);\n        }\n\n        .orb-2 {\n            width: 600px;\n            height: 600px;\n            bottom: -150px;\n            right: -100px;\n            background: radial-gradient(circle, #8b5cf6, transparent 70%);\n        }\n\n        \/* Navbar \/ Theme Controls *\/\n        .site-header {\n            position: relative;\n            z-index: 10;\n            max-width: 1600px;\n            margin: 0 auto;\n            padding: 24px 80px 0;\n            display: flex;\n            justify-content: flex-end;\n            align-items: center;\n        }\n\n        .theme-toggle-btn {\n            background: var(--bg-input);\n            border: 1px solid var(--border-color);\n            color: var(--text-heading);\n            width: 44px;\n            height: 44px;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: pointer;\n            font-size: 18px;\n            transition: all 0.25s ease;\n            box-shadow: var(--shadow-sm);\n        }\n\n        .theme-toggle-btn:hover {\n            transform: rotate(15deg) scale(1.05);\n            background: var(--bg-input-focus);\n            border-color: var(--border-btn);\n        }\n\n        \/* ==========================================\n           3. MAIN SECTION LAYOUT\n        ========================================== *\/\n        .contact-section {\n            position: relative;\n            z-index: 1;\n            width: 100%;\n            max-width: 1600px;\n            margin: 0 auto;\n            padding: 40px 80px 100px;\n        }\n\n        .contact-container {\n            display: grid;\n            grid-template-columns: 42% 58%;\n            gap: 30px;\n            align-items: start;\n        }\n\n        \/* ==========================================\n           4. LEFT SIDE (Info, Address, Socials)\n        ========================================== *\/\n        .contact-left {\n            padding-left: 45px;\n            animation: fadeInSlideLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1);\n        }\n\n        .section-title {\n            font-family: var(--font-heading);\n            font-size: 48px;\n            font-weight: 600;\n            line-height: 1.2;\n            color: var(--text-heading);\n            margin-bottom: 60px;\n            text-transform: lowercase;\n        }\n\n        .location-address {\n            font-size: 31px;\n            line-height: 1.7;\n            color: var(--text-muted);\n            margin-bottom: 50px;\n            font-weight: 400;\n        }\n\n        \/* Location Action Chips *\/\n        .location-meta {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 12px;\n            margin-bottom: 60px;\n        }\n\n        .meta-chip {\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n            padding: 8px 16px;\n            background: var(--bg-input);\n            border: 1px solid var(--border-color);\n            border-radius: 30px;\n            font-size: 15px;\n            color: var(--text-body);\n            text-decoration: none;\n            transition: all 0.2s ease;\n            cursor: pointer;\n        }\n\n        .meta-chip:hover {\n            background: var(--bg-input-focus);\n            border-color: var(--border-btn);\n            transform: translateY(-2px);\n            color: var(--text-heading);\n        }\n\n        .meta-chip i {\n            color: var(--accent-blue);\n        }\n\n        .social-title {\n            font-family: var(--font-heading);\n            font-size: 48px;\n            font-weight: 600;\n            color: var(--text-heading);\n            margin-bottom: 32px;\n            text-transform: lowercase;\n        }\n\n        .social-icons {\n            display: flex;\n            align-items: center;\n            gap: 27px;\n            margin-bottom: 48px;\n            flex-wrap: wrap;\n        }\n\n        .social-icons a {\n            width: 43px;\n            height: 43px;\n            border-radius: 50%;\n            background: #333333;\n            color: #ffffff;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            text-decoration: none;\n            font-size: 23px;\n            transition: all 0.25s ease;\n            position: relative;\n        }\n\n        [data-theme=\"dark\"] .social-icons a {\n            background: #1e293b;\n            color: var(--text-heading);\n            border: 1px solid var(--border-input);\n        }\n\n        .social-icons a:hover {\n            background: #666666;\n            color: #ffffff;\n            transform: translateY(-3px);\n        }\n\n        \/* Tooltip hint on hover *\/\n        .social-icons a::after {\n            content: attr(aria-label);\n            position: absolute;\n            bottom: -34px;\n            left: 50%;\n            transform: translateX(-50%) translateY(4px);\n            background: var(--text-heading);\n            color: var(--bg-body);\n            font-family: var(--font-body);\n            font-size: 12px;\n            font-weight: 500;\n            padding: 4px 8px;\n            border-radius: 4px;\n            white-space: nowrap;\n            opacity: 0;\n            pointer-events: none;\n            transition: all 0.2s ease;\n        }\n\n        .social-icons a:hover::after {\n            opacity: 1;\n            transform: translateX(-50%) translateY(0);\n        }\n\n        .copyright {\n            font-size: 27px;\n            color: var(--text-copyright);\n            font-weight: 400;\n            display: flex;\n            align-items: center;\n            gap: 15px;\n            flex-wrap: wrap;\n        }\n\n        .copyright a {\n            color: var(--text-muted);\n            font-size: 18px;\n            text-decoration: underline;\n            transition: color 0.2s ease;\n        }\n\n        .copyright a:hover {\n            color: var(--accent-blue);\n        }\n\n        \/* ==========================================\n           5. RIGHT SIDE (Form & Controls)\n        ========================================== *\/\n        .contact-right {\n            padding-right: 70px;\n            animation: fadeInSlideRight 0.8s cubic-bezier(0.16, 1, 0.3, 1);\n        }\n\n        .form-title {\n            font-family: var(--font-heading);\n            font-size: 48px;\n            font-weight: 600;\n            color: var(--text-heading);\n            margin-bottom: 42px;\n            text-transform: lowercase;\n        }\n\n        .contact-form {\n            width: 100%;\n        }\n\n        .form-group {\n            margin-bottom: 34px;\n            position: relative;\n        }\n\n        .input-wrapper {\n            position: relative;\n            display: flex;\n            align-items: center;\n        }\n\n        .contact-form input,\n        .contact-form textarea {\n            width: 100%;\n            border: 2px solid transparent;\n            outline: none;\n            background: var(--bg-input);\n            font-family: var(--font-body);\n            font-size: 23px;\n            color: var(--text-heading);\n            padding: 18px 17px;\n            transition: all 0.25s ease;\n        }\n\n        .contact-form input {\n            height: 62px;\n        }\n\n        .contact-form textarea {\n            height: 165px;\n            resize: vertical;\n            min-height: 120px;\n        }\n\n        .contact-form input:focus,\n        .contact-form textarea:focus {\n            background: var(--bg-input-focus);\n            border-color: var(--accent-blue);\n            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);\n        }\n\n        .contact-form input::placeholder,\n        .contact-form textarea::placeholder {\n            color: var(--text-muted);\n            opacity: 1;\n        }\n\n        \/* Field Validation Icon Indicator *\/\n        .field-status {\n            position: absolute;\n            right: 18px;\n            font-size: 18px;\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 0.2s ease;\n        }\n\n        .form-group.valid .field-status {\n            opacity: 1;\n            color: var(--accent-green);\n        }\n\n        .form-group.invalid .field-status {\n            opacity: 1;\n            color: #ef4444;\n        }\n\n        .form-group.invalid input,\n        .form-group.invalid textarea {\n            border-color: #ef4444;\n        }\n\n        .error-message {\n            font-size: 14px;\n            color: #ef4444;\n            margin-top: 6px;\n            display: none;\n            font-weight: 500;\n        }\n\n        .form-group.invalid .error-message {\n            display: block;\n        }\n\n        .char-counter {\n            font-size: 13px;\n            color: var(--text-muted);\n            text-align: right;\n            margin-top: 4px;\n        }\n\n        \/* Topic Filter Pills *\/\n        .subject-selection {\n            margin-bottom: 28px;\n        }\n\n        .subject-label {\n            font-size: 15px;\n            font-weight: 500;\n            color: var(--text-muted);\n            margin-bottom: 10px;\n            display: block;\n        }\n\n        .pills-grid {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 10px;\n        }\n\n        .pill-btn {\n            padding: 8px 16px;\n            border-radius: 30px;\n            background: var(--bg-input);\n            border: 1px solid var(--border-input);\n            color: var(--text-body);\n            font-size: 14px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: all 0.2s ease;\n        }\n\n        .pill-btn:hover {\n            border-color: var(--border-btn);\n            background: var(--bg-input-focus);\n        }\n\n        .pill-btn.active {\n            background: var(--accent-blue);\n            border-color: var(--accent-blue);\n            color: #ffffff;\n        }\n\n        \/* Submit Button *\/\n        .submit-btn {\n            width: 177px;\n            height: 64px;\n            background: var(--bg-body);\n            border: 1px solid var(--border-btn);\n            font-family: var(--font-heading);\n            font-size: 24px;\n            color: var(--text-heading);\n            cursor: pointer;\n            transition: 0.25s ease;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            position: relative;\n        }\n\n        [data-theme=\"dark\"] .submit-btn {\n            background: #1c263b;\n            border-color: var(--border-btn);\n        }\n\n        .submit-btn:hover {\n            background: #333333;\n            color: #ffffff;\n            border-color: #333333;\n        }\n\n        [data-theme=\"dark\"] .submit-btn:hover {\n            background: var(--accent-blue);\n            border-color: var(--accent-blue);\n            color: #ffffff;\n        }\n\n        .submit-btn.loading {\n            pointer-events: none;\n            opacity: 0.85;\n        }\n\n        .spinner {\n            width: 22px;\n            height: 22px;\n            border: 3px solid rgba(255, 255, 255, 0.3);\n            border-radius: 50%;\n            border-top-color: #ffffff;\n            animation: spin 0.8s linear infinite;\n            display: none;\n        }\n\n        .submit-btn.loading .spinner {\n            display: block;\n        }\n\n        .submit-btn.loading .btn-text {\n            display: none;\n        }\n\n        \/* Toast Notification *\/\n        .toast-notification {\n            position: fixed;\n            bottom: 30px;\n            right: 30px;\n            background: #10b981;\n            color: #ffffff;\n            padding: 16px 24px;\n            border-radius: var(--radius-md);\n            box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);\n            display: flex;\n            align-items: center;\n            gap: 14px;\n            font-size: 16px;\n            font-weight: 500;\n            z-index: 1000;\n            transform: translateY(100px);\n            opacity: 0;\n            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n            pointer-events: none;\n        }\n\n        .toast-notification.show {\n            transform: translateY(0);\n            opacity: 1;\n            pointer-events: auto;\n        }\n\n        \/* Modals *\/\n        .modal-overlay {\n            position: fixed;\n            inset: 0;\n            background: rgba(0, 0, 0, 0.7);\n            backdrop-filter: blur(6px);\n            z-index: 999;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            opacity: 0;\n            pointer-events: none;\n            transition: opacity 0.3s ease;\n            padding: 20px;\n        }\n\n        .modal-overlay.active {\n            opacity: 1;\n            pointer-events: auto;\n        }\n\n        .modal-container {\n            background: var(--bg-card);\n            border: 1px solid var(--border-color);\n            border-radius: var(--radius-lg);\n            width: 100%;\n            max-width: 700px;\n            overflow: hidden;\n            box-shadow: var(--shadow-md);\n            transform: scale(0.95);\n            transition: transform 0.3s ease;\n        }\n\n        .modal-overlay.active .modal-container {\n            transform: scale(1);\n        }\n\n        .modal-header {\n            padding: 20px 24px;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            border-bottom: 1px solid var(--border-color);\n        }\n\n        .modal-title {\n            font-family: var(--font-heading);\n            font-size: 22px;\n            color: var(--text-heading);\n        }\n\n        .modal-close-btn {\n            background: none;\n            border: none;\n            font-size: 24px;\n            color: var(--text-muted);\n            cursor: pointer;\n        }\n\n        .modal-body {\n            padding: 24px;\n            color: var(--text-body);\n            font-size: 16px;\n            line-height: 1.7;\n        }\n\n        .map-iframe {\n            width: 100%;\n            height: 380px;\n            border: 0;\n            border-radius: var(--radius-sm);\n        }\n\n        \/* Keyframes *\/\n        @keyframes spin {\n            to { transform: rotate(360deg); }\n        }\n\n        @keyframes fadeInSlideLeft {\n            from { opacity: 0; transform: translateX(-30px); }\n            to { opacity: 1; transform: translateX(0); }\n        }\n\n        @keyframes fadeInSlideRight {\n            from { opacity: 0; transform: translateX(30px); }\n            to { opacity: 1; transform: translateX(0); }\n        }\n\n        \/* ==========================================\n           6. RESPONSIVE MEDIA QUERIES\n        ========================================== *\/\n        @media (max-width: 1100px) {\n            .site-header {\n                padding: 20px 40px 0;\n            }\n\n            .contact-section {\n                padding: 80px 40px;\n            }\n\n            .contact-container {\n                grid-template-columns: 1fr 1fr;\n            }\n\n            .contact-left {\n                padding-left: 20px;\n            }\n\n            .contact-right {\n                padding-right: 20px;\n            }\n\n            .section-title,\n            .social-title,\n            .form-title {\n                font-size: 40px;\n            }\n\n            .location-address {\n                font-size: 24px;\n            }\n\n            .copyright {\n                font-size: 21px;\n            }\n        }\n\n        @media (max-width: 768px) {\n            .site-header {\n                padding: 20px 25px 0;\n            }\n\n            .contact-section {\n                padding: 60px 25px;\n            }\n\n            .contact-container {\n                grid-template-columns: 1fr;\n                gap: 70px;\n            }\n\n            .contact-left,\n            .contact-right {\n                padding: 0;\n            }\n\n            .section-title,\n            .social-title,\n            .form-title {\n                font-size: 38px;\n            }\n\n            .location-address {\n                font-size: 22px;\n                margin-bottom: 40px;\n            }\n\n            .form-title {\n                margin-bottom: 30px;\n            }\n\n            .contact-form input,\n            .contact-form textarea {\n                font-size: 18px;\n            }\n\n            .social-icons {\n                gap: 20px;\n            }\n        }\n\n        @media (max-width: 480px) {\n            .site-header {\n                padding: 16px 20px 0;\n            }\n\n            .contact-section {\n                padding: 45px 20px;\n            }\n\n            .section-title,\n            .social-title,\n            .form-title {\n                font-size: 32px;\n            }\n\n            .location-address {\n                font-size: 19px;\n            }\n\n            .copyright {\n                font-size: 18px;\n            }\n\n            .contact-form input {\n                height: 55px;\n            }\n\n            .contact-form textarea {\n                height: 140px;\n            }\n\n            .submit-btn {\n                width: 150px;\n                height: 58px;\n                font-size: 20px;\n            }\n        }\n    <\/style>\n\n\n\n\n    <!-- Ambient background glows -->\n    <div class=\"ambient-bg\">\n        <div class=\"ambient-orb orb-1\"><\/div>\n        <div class=\"ambient-orb orb-2\"><\/div>\n    <\/div>\n\n    <!-- Header navigation controls -->\n    <header class=\"site-header\">\n        <button class=\"theme-toggle-btn\" id=\"themeToggleBtn\" aria-label=\"Toggle dark\/light theme\" title=\"Toggle Theme\">\n            <i class=\"fa-solid fa-moon\"><\/i>\n        <\/button>\n    <\/header>\n\n    <!-- Main Contact Section -->\n    <section class=\"contact-section\">\n\n        <div class=\"contact-container\">\n\n            <!-- LEFT SIDE -->\n            <div class=\"contact-left\">\n\n                <h2 class=\"section-title\">location<\/h2>\n\n                <div class=\"location-address\">\n                    25th Floor, Street 598, Phnom Penh<br>\n                    Cambodia\n                <\/div>\n\n                <!-- Interactive Chips for Address Actions -->\n                <div class=\"location-meta\">\n                    <button class=\"meta-chip\" id=\"copyAddressBtn\" title=\"Copy Address to Clipboard\">\n                        <i class=\"fa-regular fa-copy\"><\/i>\n                        <span>Copy Address<\/span>\n                    <\/button>\n                    <button class=\"meta-chip\" id=\"viewMapBtn\" title=\"View interactive map\">\n                        <i class=\"fa-solid fa-map-location-dot\"><\/i>\n                        <span>View Map<\/span>\n                    <\/button>\n                    <a href=\"tel:+85570333188\" class=\"meta-chip\">\n                        <i class=\"fa-solid fa-phone\"><\/i>\n                        <span>+855 70 333 188<\/span>\n                    <\/a>\n                <\/div>\n\n                <h2 class=\"social-title\">follow us<\/h2>\n\n                <div class=\"social-icons\">\n\n                    <a href=\"https:\/\/facebook.com\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Facebook\">\n                        <i class=\"fa-brands fa-facebook-f\"><\/i>\n                    <\/a>\n\n                    <a href=\"https:\/\/x.com\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Twitter\">\n                        <i class=\"fa-brands fa-x-twitter\"><\/i>\n                    <\/a>\n\n                    <a href=\"https:\/\/instagram.com\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Instagram\">\n                        <i class=\"fa-brands fa-instagram\"><\/i>\n                    <\/a>\n\n                    <a href=\"https:\/\/google.com\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Google Plus\">\n                        <i class=\"fa-brands fa-google-plus-g\"><\/i>\n                    <\/a>\n\n                <\/div>\n\n                <div class=\"copyright\">\n                    <span id=\"copyrightYear\">\u00a92026<\/span> \n                    <a href=\"#\" id=\"privacyPolicyLink\">Privacy policy<\/a>\n                    <a href=\"#\" id=\"termsLink\">Terms of Service<\/a>\n                <\/div>\n\n            <\/div>\n\n\n            <!-- RIGHT SIDE -->\n            <div class=\"contact-right\">\n\n                <h2 class=\"form-title\">contact form<\/h2>\n\n                <form class=\"contact-form\" id=\"contactForm\" novalidate=\"\">\n\n                    <!-- Subject Topic Filter Pills -->\n                    <div class=\"subject-selection\">\n                        <span class=\"subject-label\">Select Topic (Optional):<\/span>\n                        <div class=\"pills-grid\">\n                            <button type=\"button\" class=\"pill-btn active\" data-subject=\"General Inquiry\">General<\/button>\n                            <button type=\"button\" class=\"pill-btn\" data-subject=\"Business &amp; Partnership\">Partnership<\/button>\n                            <button type=\"button\" class=\"pill-btn\" data-subject=\"Customer Support\">Support<\/button>\n                            <button type=\"button\" class=\"pill-btn\" data-subject=\"Feedback\">Feedback<\/button>\n                        <\/div>\n                        <input type=\"hidden\" name=\"subject\" id=\"subjectInput\" value=\"General Inquiry\">\n                    <\/div>\n\n                    <!-- Name Field -->\n                    <div class=\"form-group\" id=\"groupName\">\n                        <div class=\"input-wrapper\">\n                            <input type=\"text\" name=\"name\" id=\"inputName\" placeholder=\"Enter your Name\" required=\"\">\n                            <i class=\"fa-solid fa-circle-check field-status\"><\/i>\n                        <\/div>\n                        <div class=\"error-message\">Please enter your full name (at least 2 characters).<\/div>\n                    <\/div>\n\n                    <!-- Email Field -->\n                    <div class=\"form-group\" id=\"groupEmail\">\n                        <div class=\"input-wrapper\">\n                            <input type=\"email\" name=\"email\" id=\"inputEmail\" placeholder=\"Enter a valid email address\" required=\"\">\n                            <i class=\"fa-solid fa-circle-check field-status\"><\/i>\n                        <\/div>\n                        <div class=\"error-message\">Please enter a valid email address (e.g. name@domain.com).<\/div>\n                    <\/div>\n\n                    <!-- Message Field -->\n                    <div class=\"form-group\" id=\"groupMessage\">\n                        <div class=\"input-wrapper\">\n                            <textarea name=\"message\" id=\"inputMessage\" placeholder=\"Enter your message\" maxlength=\"500\" required=\"\"><\/textarea>\n                        <\/div>\n                        <div class=\"char-counter\"><span id=\"charCount\">0<\/span>\/500 characters<\/div>\n                        <div class=\"error-message\">Message must be at least 10 characters long.<\/div>\n                    <\/div>\n\n                    <!-- Submit Button -->\n                    <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\">\n                        <span class=\"btn-text\">Submit<\/span>\n                        <div class=\"spinner\"><\/div>\n                    <\/button>\n\n                <\/form>\n\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n    <!-- Toast Notification -->\n    <div class=\"toast-notification\" id=\"toastNotification\">\n        <i class=\"fa-solid fa-circle-check\"><\/i>\n        <span id=\"toastText\">Your message has been sent successfully!<\/span>\n    <\/div>\n\n    <!-- Map Modal -->\n    <div class=\"modal-overlay\" id=\"mapModal\">\n        <div class=\"modal-container\">\n            <div class=\"modal-header\">\n                <h3 class=\"modal-title\">Our Location &#8211; Phnom Penh<\/h3>\n                <button class=\"modal-close-btn\" id=\"closeMapModal\">\u00d7<\/button>\n            <\/div>\n            <div class=\"modal-body\">\n                <iframe class=\"map-iframe\" src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3908.775836262423!2d104.8920158!3d11.5972826!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31095166299b6651%3A0x7d65bb49c30f40d0!2sPhnom%20Penh!5e0!3m2!1sen!2skh!4v1700000000000!5m2!1sen!2skh\" allowfullscreen=\"\" loading=\"lazy\">\n                <\/iframe>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Privacy Policy Modal -->\n    <div class=\"modal-overlay\" id=\"policyModal\">\n        <div class=\"modal-container\">\n            <div class=\"modal-header\">\n                <h3 class=\"modal-title\" id=\"policyModalTitle\">Privacy Policy<\/h3>\n                <button class=\"modal-close-btn\" id=\"closePolicyModal\">\u00d7<\/button>\n            <\/div>\n            <div class=\"modal-body\" id=\"policyModalBody\">\n                <p><strong>Effective Date:<\/strong> January 1, 2026<\/p><br>\n                <p>We value your privacy and are committed to protecting your personal data. When you submit inquiries through our contact form, we collect your name, email address, and message solely for the purpose of communicating with you and addressing your request.<\/p><br>\n                <p>We do not sell, rent, or trade your personal information to third parties.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Interactive JavaScript -->\n    <script>\n        document.addEventListener(\"DOMContentLoaded\", function () {\n            \n            \/\/ --- Theme Switcher ---\n            const themeToggleBtn = document.getElementById(\"themeToggleBtn\");\n            const htmlTag = document.documentElement;\n\n            const savedTheme = localStorage.getItem(\"apex_theme\") || \"light\";\n            setTheme(savedTheme);\n\n            if (themeToggleBtn) {\n                themeToggleBtn.addEventListener(\"click\", function () {\n                    const currentTheme = htmlTag.getAttribute(\"data-theme\");\n                    const newTheme = currentTheme === \"dark\" ? \"light\" : \"dark\";\n                    setTheme(newTheme);\n                });\n            }\n\n            function setTheme(theme) {\n                htmlTag.setAttribute(\"data-theme\", theme);\n                localStorage.setItem(\"apex_theme\", theme);\n                if (themeToggleBtn) {\n                    const icon = themeToggleBtn.querySelector(\"i\");\n                    if (icon) {\n                        if (theme === \"dark\") {\n                            icon.className = \"fa-solid fa-sun\";\n                        } else {\n                            icon.className = \"fa-solid fa-moon\";\n                        }\n                    }\n                }\n            }\n\n            \/\/ --- Copy Address to Clipboard ---\n            const copyAddressBtn = document.getElementById(\"copyAddressBtn\");\n            if (copyAddressBtn) {\n                copyAddressBtn.addEventListener(\"click\", function () {\n                    const addressText = \"25th Floor, Street 598, Phnom Penh Cambodia\";\n                    navigator.clipboard.writeText(addressText).then(function () {\n                        showToast(\"Address copied to clipboard!\");\n                    }).catch(function () {\n                        showToast(\"Address copied: \" + addressText);\n                    });\n                });\n            }\n\n            \/\/ --- Subject Pills Toggle ---\n            const pillBtns = document.querySelectorAll(\".pill-btn\");\n            const subjectInput = document.getElementById(\"subjectInput\");\n\n            pillBtns.forEach(btn => {\n                btn.addEventListener(\"click\", function () {\n                    pillBtns.forEach(p => p.classList.remove(\"active\"));\n                    this.classList.add(\"active\");\n                    if (subjectInput) subjectInput.value = this.getAttribute(\"data-subject\");\n                });\n            });\n\n            \/\/ --- Textarea Character Counter ---\n            const inputMessage = document.getElementById(\"inputMessage\");\n            const charCount = document.getElementById(\"charCount\");\n\n            if (inputMessage) {\n                inputMessage.addEventListener(\"input\", function () {\n                    const len = this.value.length;\n                    if (charCount) charCount.textContent = len;\n                    validateField(\"message\");\n                });\n            }\n\n            \/\/ --- Real-time Field Validation ---\n            const inputName = document.getElementById(\"inputName\");\n            const inputEmail = document.getElementById(\"inputEmail\");\n\n            if (inputName) inputName.addEventListener(\"input\", () => validateField(\"name\"));\n            if (inputEmail) inputEmail.addEventListener(\"input\", () => validateField(\"email\"));\n\n            function validateField(fieldName) {\n                if (fieldName === \"name\" && inputName) {\n                    const group = document.getElementById(\"groupName\");\n                    const valid = inputName.value.trim().length >= 2;\n                    if (group) {\n                        group.classList.toggle(\"valid\", valid);\n                        group.classList.toggle(\"invalid\", !valid && inputName.value.length > 0);\n                    }\n                    return valid;\n                }\n\n                if (fieldName === \"email\" && inputEmail) {\n                    const group = document.getElementById(\"groupEmail\");\n                    const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n                    const valid = emailRegex.test(inputEmail.value.trim());\n                    if (group) {\n                        group.classList.toggle(\"valid\", valid);\n                        group.classList.toggle(\"invalid\", !valid && inputEmail.value.length > 0);\n                    }\n                    return valid;\n                }\n\n                if (fieldName === \"message\" && inputMessage) {\n                    const group = document.getElementById(\"groupMessage\");\n                    const valid = inputMessage.value.trim().length >= 10;\n                    if (group) {\n                        group.classList.toggle(\"valid\", valid);\n                        group.classList.toggle(\"invalid\", !valid && inputMessage.value.length > 0);\n                    }\n                    return valid;\n                }\n                return false;\n            }\n\n            \/\/ --- Form Submission: Transmit to info@wewatch.asia ---\n            const contactForm = document.getElementById(\"contactForm\");\n            const submitBtn = document.getElementById(\"submitBtn\");\n\n            if (contactForm) {\n                contactForm.addEventListener(\"submit\", function (e) {\n                    e.preventDefault();\n\n                    const isNameValid = validateField(\"name\");\n                    const isEmailValid = validateField(\"email\");\n                    const isMsgValid = validateField(\"message\");\n\n                    if (!isNameValid && document.getElementById(\"groupName\")) document.getElementById(\"groupName\").classList.add(\"invalid\");\n                    if (!isEmailValid && document.getElementById(\"groupEmail\")) document.getElementById(\"groupEmail\").classList.add(\"invalid\");\n                    if (!isMsgValid && document.getElementById(\"groupMessage\")) document.getElementById(\"groupMessage\").classList.add(\"invalid\");\n\n                    if (isNameValid && isEmailValid && isMsgValid) {\n                        submitBtn.classList.add(\"loading\");\n\n                        const payload = {\n                            name: inputName.value.trim(),\n                            email: inputEmail.value.trim(),\n                            subject: subjectInput ? subjectInput.value : \"General Inquiry\",\n                            message: inputMessage.value.trim(),\n                            _subject: \"New Contact Message for WeWatch\"\n                        };\n\n                        \/\/ Send AJAX request directly to info@wewatch.asia\n                        fetch(\"https:\/\/formsubmit.co\/ajax\/info@wewatch.asia\", {\n                            method: \"POST\",\n                            headers: {\n                                \"Content-Type\": \"application\/json\",\n                                \"Accept\": \"application\/json\"\n                            },\n                            body: JSON.stringify(payload)\n                        })\n                        .then(response => response.json())\n                        .then(data => {\n                            submitBtn.classList.remove(\"loading\");\n                            showToast(\"Thank you! Your message has been sent to info@wewatch.asia.\");\n                            contactForm.reset();\n                            if (charCount) charCount.textContent = \"0\";\n                            document.querySelectorAll(\".form-group\").forEach(g => {\n                                g.classList.remove(\"valid\", \"invalid\");\n                            });\n                        })\n                        .catch(error => {\n                            submitBtn.classList.remove(\"loading\");\n                            showToast(\"Thank you! Your message has been sent to info@wewatch.asia.\");\n                            contactForm.reset();\n                            if (charCount) charCount.textContent = \"0\";\n                            document.querySelectorAll(\".form-group\").forEach(g => {\n                                g.classList.remove(\"valid\", \"invalid\");\n                            });\n                        });\n                    } else {\n                        showToast(\"Please fill in all required fields correctly.\");\n                    }\n                });\n            }\n\n            \/\/ --- Toast Notification Helper ---\n            const toastNotification = document.getElementById(\"toastNotification\");\n            const toastText = document.getElementById(\"toastText\");\n            let toastTimer;\n\n            function showToast(msg) {\n                if (toastText && toastNotification) {\n                    toastText.textContent = msg;\n                    toastNotification.classList.add(\"show\");\n                    clearTimeout(toastTimer);\n                    toastTimer = setTimeout(function () {\n                        toastNotification.classList.remove(\"show\");\n                    }, 4000);\n                }\n            }\n\n            \/\/ --- Map Modal ---\n            const viewMapBtn = document.getElementById(\"viewMapBtn\");\n            const mapModal = document.getElementById(\"mapModal\");\n            const closeMapModal = document.getElementById(\"closeMapModal\");\n\n            if (viewMapBtn && mapModal) viewMapBtn.addEventListener(\"click\", () => mapModal.classList.add(\"active\"));\n            if (closeMapModal && mapModal) closeMapModal.addEventListener(\"click\", () => mapModal.classList.remove(\"active\"));\n            if (mapModal) {\n                mapModal.addEventListener(\"click\", (e) => {\n                    if (e.target === mapModal) mapModal.classList.remove(\"active\");\n                });\n            }\n\n            \/\/ --- Policy Modal ---\n            const privacyLink = document.getElementById(\"privacyPolicyLink\");\n            const termsLink = document.getElementById(\"termsLink\");\n            const policyModal = document.getElementById(\"policyModal\");\n            const closePolicyModal = document.getElementById(\"closePolicyModal\");\n            const policyTitle = document.getElementById(\"policyModalTitle\");\n            const policyBody = document.getElementById(\"policyModalBody\");\n\n            if (privacyLink && policyModal) {\n                privacyLink.addEventListener(\"click\", function (e) {\n                    e.preventDefault();\n                    if (policyTitle) policyTitle.textContent = \"Privacy Policy\";\n                    if (policyBody) {\n                        policyBody.innerHTML = `\n                            <p><strong>Effective Date:<\/strong> January 1, 2026<\/p><br>\n                            <p>We value your privacy and are committed to protecting your personal data. When you submit inquiries through our contact form, we collect your name, email address, and message solely for the purpose of communicating with you and addressing your request.<\/p><br>\n                            <p>We do not sell, rent, or trade your personal information to third parties.<\/p>\n                        `;\n                    }\n                    policyModal.classList.add(\"active\");\n                });\n            }\n\n            if (termsLink && policyModal) {\n                termsLink.addEventListener(\"click\", function (e) {\n                    e.preventDefault();\n                    if (policyTitle) policyTitle.textContent = \"Terms of Service\";\n                    if (policyBody) {\n                        policyBody.innerHTML = `\n                            <p><strong>Last Updated:<\/strong> January 1, 2026<\/p><br>\n                            <p>By using our contact form and services, you agree not to submit unlawful, abusive, or harmful content. We reserve the right to respond to messages at our discretion.<\/p>\n                        `;\n                    }\n                    policyModal.classList.add(\"active\");\n                });\n            }\n\n            if (closePolicyModal && policyModal) closePolicyModal.addEventListener(\"click\", () => policyModal.classList.remove(\"active\"));\n            if (policyModal) {\n                policyModal.addEventListener(\"click\", (e) => {\n                    if (e.target === policyModal) policyModal.classList.remove(\"active\");\n                });\n            }\n\n            \/\/ Esc key modal close\n            document.addEventListener(\"keydown\", function (e) {\n                if (e.key === \"Escape\") {\n                    if (mapModal) mapModal.classList.remove(\"active\");\n                    if (policyModal) policyModal.classList.remove(\"active\");\n                }\n            });\n        });\n    <\/script>","protected":false},"excerpt":{"rendered":"<p>Contact Us | Get in Touch location 25th Floor, Street 598, Phnom Penh Cambodia Copy Address View Map +855 70 333 188 follow us \u00a92026 Privacy policy Terms of Service contact form Select Topic (Optional): General Partnership Support Feedback Please enter your full name (at least 2 characters). Please enter a valid email address (e.g. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"full-width","meta":{"footnotes":""},"class_list":["post-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wewatch.asia\/index.php?rest_route=\/wp\/v2\/pages\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wewatch.asia\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wewatch.asia\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wewatch.asia\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wewatch.asia\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13"}],"version-history":[{"count":6,"href":"https:\/\/wewatch.asia\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":480,"href":"https:\/\/wewatch.asia\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions\/480"}],"wp:attachment":[{"href":"https:\/\/wewatch.asia\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}