{"id":135,"date":"2025-12-17T09:22:13","date_gmt":"2025-12-17T09:22:13","guid":{"rendered":"https:\/\/onto.sa\/?page_id=135"},"modified":"2026-01-04T02:31:05","modified_gmt":"2026-01-04T02:31:05","slug":"contact","status":"publish","type":"page","link":"https:\/\/onto.sa\/en\/contact\/","title":{"rendered":"contact"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"135\" class=\"elementor elementor-135\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f4823dd e-con-full e-flex e-con e-parent\" data-id=\"f4823dd\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4816737 elementor-widget elementor-widget-heading\" data-id=\"4816737\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Contact Us<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-da32dcc elementor-widget elementor-widget-heading\" data-id=\"da32dcc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Do you have any questions? We\u2019d be happy to hear from you.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-13e70a1 e-flex e-con-boxed e-con e-parent\" data-id=\"13e70a1\" 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-bcdf5f1 elementor-widget elementor-widget-shortcode\" data-id=\"bcdf5f1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    \n    <div class=\"onto-contact-wrapper\" dir=\"ltr\">\n        <div class=\"onto-contact-container\">\n            \n            <!-- 1. \u0646\u0645\u0648\u0630\u062c \u0627\u0644\u0627\u062a\u0635\u0627\u0644 (\u0627\u0644\u064a\u0645\u064a\u0646 \u0641\u064a \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0639\u0631\u0628\u064a) -->\n            <div class=\"onto-card onto-form-card\">\n                <h2 class=\"onto-head-title\">Send us a message<\/h2>\n                \n                <form id=\"onto-contact-form\" action=\"\">\n                    <input type=\"hidden\" name=\"security\" value=\"0ba3fc2c93\">\n                    \n                    <div class=\"onto-input-wrap\">\n                        <label>Name<\/label>\n                        <input type=\"text\" name=\"sender_name\" class=\"onto-input\" placeholder=\"Full Name\" required>\n                    <\/div>\n\n                    <div class=\"onto-input-wrap\">\n                        <label>Email Address<\/label>\n                        <input type=\"email\" name=\"sender_email\" class=\"onto-input\" placeholder=\"example@mail.com\" required>\n                    <\/div>\n\n                    <div class=\"onto-input-wrap\">\n                        <label>Message<\/label>\n                        <textarea name=\"sender_message\" class=\"onto-input area\" rows=\"5\" required><\/textarea>\n                    <\/div>\n\n                    <button type=\"submit\" class=\"onto-submit-btn\">Send Message<\/button>\n                    <div class=\"onto-alert-box\"><\/div>\n                <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n            <\/div>\n\n            <!-- 2. \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0627\u062a\u0635\u0627\u0644 (\u0627\u0644\u064a\u0633\u0627\u0631) -->\n            <div class=\"onto-card onto-info-card\">\n                <div>\n                    <h2 class=\"onto-head-title\">Contact Information<\/h2>\n                    <p class=\"onto-info-desc\">Contact us via any of the following channels. We are here to help.<\/p>\n\n                    <div class=\"onto-info-list\">\n                        <!-- \u0647\u0627\u062a\u0641 -->\n                        <div class=\"onto-info-item\">\n                            <div class=\"onto-icon-circle\"><svg viewbox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 00-1.01.24l-1.57 1.97c-2.83-1.44-5.15-3.75-6.59-6.59l1.97-1.57c.26-.26.35-.63.24-1.01a17.93 17.93 0 00-.56-3.53.995.995 0 00-1-.79h-3.4c-.55 0-1 .45-1 1C3.5 13.62 10.38 20.5 20 20.5c.55 0 1-.45 1-1v-3.4c0-.51-.41-.95-.91-.72z\"\/><\/svg><\/div>\n                            <div class=\"onto-info-text\">\n                                <h3>Phone<\/h3>\n                                <span dir=\"ltr\">+966 56 665 2455<\/span>\n                            <\/div>\n                        <\/div>\n\n                        <!-- \u0627\u064a\u0645\u064a\u0644 -->\n                        <div class=\"onto-info-item\">\n                            <div class=\"onto-icon-circle\"><svg viewbox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"\/><\/svg><\/div>\n                            <div class=\"onto-info-text\">\n                                <h3>Email<\/h3>\n                                <span>info@onto.sa<\/span>\n                            <\/div>\n                        <\/div>\n\n                        <!-- \u0645\u0648\u0642\u0639 -->\n                        <div class=\"onto-info-item\">\n                            <div class=\"onto-icon-circle\"><svg viewbox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"\/><\/svg><\/div>\n                            <div class=\"onto-info-text\">\n                                <h3>Location<\/h3>\n                                <span>Jeddah, Saudi Arabia<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- \u0627\u0644\u0635\u0648\u0631\u0629 \u0627\u0644\u062a\u0648\u0636\u064a\u062d\u064a\u0629 \u0627\u0644\u0645\u062f\u0645\u062c\u0629 -->\n                <div class=\"onto-illustration-box\">\n                    \n    <svg width=\"200\" height=\"200\" viewbox=\"0 0 200 200\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <circle cx=\"100\" cy=\"100\" r=\"90\" fill=\"#E6F9EC\"\/>\n        <path d=\"M100 130L60 110V70L100 50L140 70V110L100 130Z\" fill=\"#4CD97B\" stroke=\"#000\" stroke-width=\"2\"\/>\n        <path d=\"M100 50V90M140 70L100 90L60 70\" stroke=\"#000\" stroke-width=\"2\"\/>\n        <circle cx=\"100\" cy=\"40\" r=\"5\" fill=\"#000\"\/>\n        <circle cx=\"150\" cy=\"120\" r=\"8\" fill=\"#4CD97B\"\/>\n        <circle cx=\"50\" cy=\"120\" r=\"8\" fill=\"#4CD97B\"\/>\n    <\/svg>                <\/div>\n            <\/div>\n\n        <\/div>\n    <\/div>\n\n    <style>\n        \/* === Styles (ONTO Theme) === *\/\n        .onto-contact-wrapper {\n            background: #fcfcfc;\n            padding: 80px 20px;\n            font-family: 'Cairo', sans-serif;\n            display: flex; justify-content: center;\n        }\n\n        .onto-contact-container {\n            display: grid;\n            grid-template-columns: 1.2fr 0.8fr; \/* \u0627\u0644\u0641\u0648\u0631\u0645 \u0623\u0639\u0631\u0636 \u0642\u0644\u064a\u0644\u0627\u064b *\/\n            gap: 30px;\n            max-width: 1200px; width: 100%;\n        }\n\n        \/* \u0627\u0644\u0643\u0631\u0648\u062a *\/\n        .onto-card {\n            background: #fff;\n            border-radius: 24px;\n            padding: 50px;\n            box-shadow: 0 10px 40px rgba(0,0,0,0.03);\n            border: 1px solid #f5f5f5;\n        }\n\n        .onto-head-title {\n            font-size: 28px; font-weight: 800; color: #000;\n            margin-bottom: 30px; text-align: left;\n        }\n\n        \/* --- \u0627\u0644\u0641\u0648\u0631\u0645 --- *\/\n        .onto-input-wrap { margin-bottom: 25px; text-align: left; }\n        .onto-input-wrap label {\n            display: block; font-weight: 700; margin-bottom: 10px; color: #000; font-size: 16px;\n        }\n        \n        .onto-input {\n            width: 100%; padding: 16px 20px;\n            border: 1px solid #eee; border-radius: 12px;\n            font-family: 'Cairo'; font-size: 16px;\n            background: #fff; color: #333; transition: 0.3s;\n            box-sizing: border-box;\n        }\n        .onto-input:focus {\n            border-color: #4cd97b; outline: none;\n            box-shadow: 0 0 0 4px rgba(76, 217, 123, 0.1);\n        }\n        .onto-input.area { resize: vertical; min-height: 120px; }\n\n        .onto-submit-btn {\n            width: 100%; padding: 18px;\n            background: #000; color: #fff;\n            border: none; border-radius: 12px;\n            font-weight: 800; font-size: 18px;\n            cursor: pointer; transition: 0.3s;\n            font-family: 'Cairo'; margin-top: 10px;\n        }\n        .onto-submit-btn:hover {\n            background: #4cd97b; color: #000; transform: translateY(-3px);\n        }\n\n        \/* --- \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0627\u062a\u0635\u0627\u0644 --- *\/\n        .onto-info-card {\n            display: flex; flex-direction: column; justify-content: space-between;\n            background: #fff; position: relative; overflow: hidden;\n        }\n        \n        .onto-info-desc {\n            color: #666; line-height: 1.8; margin-bottom: 40px; font-size: 16px;\n            text-align: left;\n        }\n\n        .onto-info-list { display: flex; flex-direction: column; gap: 30px; }\n\n        .onto-info-item {\n            display: flex; align-items: center; gap: 20px;\n        }\n        \n        .onto-icon-circle {\n            width: 50px; height: 50px;\n            background: #e6f9ec; \/* \u062e\u0644\u0641\u064a\u0629 \u062e\u0636\u0631\u0627\u0621 \u0641\u0627\u062a\u062d\u0629 \u062c\u062f\u0627\u064b *\/\n            border-radius: 50%;\n            display: flex; align-items: center; justify-content: center;\n            color: #4cd97b; \/* \u0644\u0648\u0646 \u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0629 *\/\n            flex-shrink: 0;\n        }\n        .onto-icon-circle svg { width: 24px; height: 24px; }\n\n        .onto-info-text h3 {\n            margin: 0 0 5px 0; font-size: 18px; font-weight: 700; color: #000;\n        }\n        .onto-info-text span {\n            display: block; color: #666; font-size: 16px;\n        }\n\n        .onto-illustration-box {\n            margin-top: 40px; text-align: center;\n        }\n        .onto-illustration-box svg {\n            width: 150px; height: 150px; animation: floatIcon 4s ease-in-out infinite;\n        }\n        @keyframes floatIcon {\n            0% { transform: translateY(0); }\n            50% { transform: translateY(-10px); }\n            100% { transform: translateY(0); }\n        }\n\n        \/* \u0631\u0633\u0627\u0626\u0644 \u0627\u0644\u062a\u0646\u0628\u064a\u0647 *\/\n        .onto-alert-box { margin-top: 20px; padding: 15px; border-radius: 10px; display: none; text-align: center; font-weight: 700; }\n        .onto-alert-box.success { background: #e6f9ec; color: #2e854b; }\n        .onto-alert-box.error { background: #ffeaea; color: #d63031; }\n\n        \/* \u0645\u0648\u0628\u0627\u064a\u0644 *\/\n        @media (max-width: 992px) {\n            .onto-contact-container { grid-template-columns: 1fr; }\n            .onto-info-card { order: -1; text-align: center; } \/* \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0641\u064a \u0627\u0644\u0623\u0639\u0644\u0649 *\/\n            .onto-head-title, .onto-info-desc, .onto-input-wrap { text-align: center; }\n            .onto-info-item { flex-direction: column; text-align: center; }\n        }\n    <\/style>\n\n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n        var form = document.getElementById('onto-contact-form');\n        var ajaxUrl = 'https:\/\/onto.sa\/wp-admin\/admin-ajax.php';\n        \n        var txtSending = \"Sending...\";\n        var txtSuccess = \"Message Sent Successfully!\";\n        var txtError   = \"Error occurred.\";\n        var txtBtnOriginal = \"Send Message\";\n\n        if(form){\n            form.addEventListener('submit', function(e){\n                e.preventDefault();\n                var btn = form.querySelector('button');\n                var msg = form.querySelector('.onto-alert-box');\n                \n                btn.disabled = true;\n                btn.innerText = txtSending;\n                msg.style.display = 'none';\n\n                var fd = new FormData(form);\n                fd.append('action', 'onto_submit_message');\n\n                fetch(ajaxUrl, { method: 'POST', body: fd })\n                .then(r => r.json())\n                .then(data => {\n                    if(data.success){\n                        msg.className = 'onto-alert-box success';\n                        msg.innerText = txtSuccess;\n                        form.reset();\n                    } else {\n                        msg.className = 'onto-alert-box error';\n                        msg.innerText = txtError;\n                    }\n                    msg.style.display = 'block';\n                    btn.disabled = false;\n                    btn.innerText = txtBtnOriginal;\n                })\n                .catch(err => {\n                    msg.className = 'onto-alert-box error';\n                    msg.innerText = txtError;\n                    msg.style.display = 'block';\n                    btn.disabled = false;\n                    btn.innerText = txtBtnOriginal;\n                });\n            });\n        }\n    });\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627 \u0647\u0644 \u0644\u062f\u064a\u0643 \u0623\u0633\u0626\u0644\u0629 \u061f \u064a\u0633\u0639\u062f\u0646\u0627 \u0633\u0645\u0627\u0639 \u0631\u0623\u064a\u0643.<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-135","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/onto.sa\/en\/wp-json\/wp\/v2\/pages\/135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onto.sa\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onto.sa\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onto.sa\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/onto.sa\/en\/wp-json\/wp\/v2\/comments?post=135"}],"version-history":[{"count":10,"href":"https:\/\/onto.sa\/en\/wp-json\/wp\/v2\/pages\/135\/revisions"}],"predecessor-version":[{"id":146,"href":"https:\/\/onto.sa\/en\/wp-json\/wp\/v2\/pages\/135\/revisions\/146"}],"wp:attachment":[{"href":"https:\/\/onto.sa\/en\/wp-json\/wp\/v2\/media?parent=135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}