{"id":512,"date":"2024-03-22T12:32:21","date_gmt":"2024-03-22T12:32:21","guid":{"rendered":"https:\/\/dummy.xtemos.com\/woodmart2\/pills-elementor\/?page_id=17"},"modified":"2026-03-06T14:14:51","modified_gmt":"2026-03-06T14:14:51","slug":"contact-us","status":"publish","type":"page","link":"https:\/\/kativamorocco.com\/ar\/contact-us\/","title":{"rendered":"\u0627\u062a\u0635\u0644 \u0628\u0646\u0627"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"512\" class=\"elementor elementor-512\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6001167 e-con-full wd-section-stretch e-flex e-con e-parent\" data-id=\"6001167\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-461a7b6 elementor-widget elementor-widget-html\" data-id=\"461a7b6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ===== KATIVA MOROCCO - CONTACT PAGE (ONE CODE \/ RESPONSIVE \/ NO THEME CHANGES) ===== -->\r\n<div id=\"kativa-contact-page-mount\"><\/div>\r\n\r\n<script>\r\n(function () {\r\n  const mount = document.getElementById(\"kativa-contact-page-mount\");\r\n  if (!mount) return;\r\n\r\n  const root = mount.attachShadow({ mode: \"open\" });\r\n\r\n  \/* ===== CHANGE THESE ===== *\/\r\n  const BANNER_BG = \"http:\/\/kativamorocco.com\/wp-content\/uploads\/2026\/01\/diferenciales.png\";\r\n\r\n  \/\/ \u2705 Put your email here (messages will open the visitor's email app)\r\n  const RECEIVER_EMAIL = \"insinvestsarlau@gmail.com\";\r\n\r\n  \/\/ \u2705 Replace phone + address\r\n  const PHONE_NUMBER_DISPLAY = \"+212 600-959916\";\r\n  const PHONE_NUMBER_TEL = \"+212 600-959916\";\r\n  const ADDRESS_TEXT = \"Casablanca, Morocco\";\r\n\r\n  \/\/ \u2705 Social links removed as requested\r\n\r\n  root.innerHTML = `\r\n    <style>\r\n      :host{\r\n        --primary:#f07b1f;\r\n        --primaryDark:#d96512;\r\n        --soft:#fff4ea;\r\n        --text:#1d1d1d;\r\n        --muted:#666;\r\n        --card:#fff;\r\n        --line: rgba(240,123,31,.18);\r\n        --shadow:0 16px 45px rgba(0,0,0,.14);\r\n        --radius:18px;\r\n\r\n        font-family:\"Poppins\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n        color:var(--text);\r\n        line-height:1.6;\r\n        display:block;\r\n      }\r\n      .k *{ box-sizing:border-box; }\r\n      .k{ width:100%; background:#fff; }\r\n\r\n      \/* ===== Banner ===== *\/\r\n      .banner{\r\n        min-height: 300px;\r\n        display:grid;\r\n        place-items:center;\r\n        text-align:center;\r\n        position:relative;\r\n        background:\r\n          linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,.35)),\r\n          url('${BANNER_BG}');\r\n        background-size:cover;\r\n        background-position:center;\r\n        background-repeat:no-repeat;\r\n        padding: 56px 16px;\r\n        color:#fff;\r\n      }\r\n      .banner .inner{ width:min(1100px, 92%); margin:0 auto; }\r\n      .banner .eyebrow{\r\n        display:inline-flex;\r\n        align-items:center;\r\n        gap:10px;\r\n        padding:10px 18px;\r\n        border-radius:999px;\r\n        background:rgba(255,255,255,.18);\r\n        border:1px solid rgba(255,255,255,.25);\r\n        backdrop-filter: blur(10px);\r\n        font-weight:800;\r\n        letter-spacing:.22em;\r\n        text-transform:uppercase;\r\n        font-size:12px;\r\n        margin-bottom:18px;\r\n      }\r\n      .banner h1{\r\n        margin:0 0 12px;\r\n        font-size: clamp(30px, 5vw, 54px);\r\n        line-height:1.08;\r\n        font-weight:950;\r\n        letter-spacing:-.02em;\r\n        text-shadow:0 10px 30px rgba(0,0,0,.35);\r\n      }\r\n      .banner p{\r\n        margin:0 auto;\r\n        width:min(820px, 100%);\r\n        font-size: clamp(15px, 2.1vw, 20px);\r\n        color:rgba(255,255,255,.92);\r\n      }\r\n\r\n      \/* ===== Layout ===== *\/\r\n      .wrap{ width:min(1200px, 92%); margin:0 auto; }\r\n      .section{ padding: 70px 0; background: var(--soft); }\r\n      .grid{\r\n        display:grid;\r\n        grid-template-columns: 1.05fr .95fr;\r\n        gap: 26px;\r\n        align-items: start;\r\n      }\r\n\r\n      \/* ===== Cards ===== *\/\r\n      .card{\r\n        background: var(--card);\r\n        border: 2px solid var(--line);\r\n        border-radius: var(--radius);\r\n        box-shadow: 0 12px 30px rgba(0,0,0,.08);\r\n        overflow:hidden;\r\n      }\r\n      .card-head{\r\n        padding: 22px 22px 16px;\r\n        border-bottom: 1px solid rgba(0,0,0,.06);\r\n        background: linear-gradient(180deg, rgba(240,123,31,.10), transparent);\r\n      }\r\n      .card-head h2{\r\n        margin:0 0 8px;\r\n        font-size: 22px;\r\n        font-weight: 950;\r\n      }\r\n      .card-head p{\r\n        margin:0;\r\n        color: var(--muted);\r\n        font-size: 15px;\r\n      }\r\n\r\n      \/* ===== Form ===== *\/\r\n      form{ padding: 22px; }\r\n      .row{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }\r\n      .field{ display:grid; gap: 8px; margin-bottom: 14px; }\r\n      label{ font-weight: 850; font-size: 13px; color: #333; }\r\n\r\n      input, textarea{\r\n        width:100%;\r\n        padding: 14px 14px;\r\n        border-radius: 14px;\r\n        border: 2px solid rgba(0,0,0,.08);\r\n        outline: none;\r\n        font-size: 15px;\r\n        transition: .2s ease;\r\n        background:#fff;\r\n      }\r\n      input:focus, textarea:focus{\r\n        border-color: rgba(240,123,31,.55);\r\n        box-shadow: 0 0 0 4px rgba(240,123,31,.12);\r\n      }\r\n      textarea{ min-height: 140px; resize: vertical; }\r\n\r\n      .actions{\r\n        display:flex;\r\n        gap: 12px;\r\n        align-items:center;\r\n        justify-content: space-between;\r\n        flex-wrap: wrap;\r\n        margin-top: 8px;\r\n      }\r\n      .btn{\r\n        display:inline-flex;\r\n        align-items:center;\r\n        gap:10px;\r\n        border:none;\r\n        cursor:pointer;\r\n        background: var(--primaryDark);\r\n        color:#fff;\r\n        font-weight: 950;\r\n        padding: 14px 18px;\r\n        border-radius: 14px;\r\n        box-shadow: 0 12px 26px rgba(217,101,18,.28);\r\n        transition: .2s ease;\r\n        font-size: 15px;\r\n      }\r\n      .btn:hover{ transform: translateY(-2px); background: var(--primary); }\r\n      .note{ font-size: 13px; color: var(--muted); }\r\n\r\n      .status{\r\n        margin-top: 14px;\r\n        display:none;\r\n        padding: 12px 14px;\r\n        border-radius: 14px;\r\n        font-weight: 850;\r\n        font-size: 14px;\r\n      }\r\n      .status.ok{\r\n        display:block;\r\n        background: rgba(34,197,94,.12);\r\n        border: 2px solid rgba(34,197,94,.25);\r\n        color: #166534;\r\n      }\r\n      .status.err{\r\n        display:block;\r\n        background: rgba(239,68,68,.10);\r\n        border: 2px solid rgba(239,68,68,.22);\r\n        color:#991b1b;\r\n      }\r\n\r\n      \/* ===== Contact Info ===== *\/\r\n      .info{ padding: 22px; }\r\n      .info-grid{ display:grid; gap: 14px; }\r\n\r\n      .info-item{\r\n        display:flex;\r\n        gap: 12px;\r\n        align-items:flex-start;\r\n        padding: 14px;\r\n        border-radius: 16px;\r\n        border: 2px solid rgba(240,123,31,.14);\r\n        background: #fff;\r\n        transition: .2s ease;\r\n      }\r\n      .info-item:hover{\r\n        transform: translateY(-2px);\r\n        border-color: rgba(240,123,31,.35);\r\n        box-shadow: 0 10px 25px rgba(0,0,0,.08);\r\n      }\r\n      .ico{\r\n        width:44px; height:44px;\r\n        border-radius: 50%;\r\n        display:grid;\r\n        place-items:center;\r\n        background: rgba(240,123,31,.12);\r\n        color: var(--primaryDark);\r\n        flex: 0 0 auto;\r\n      }\r\n      .ico svg{\r\n        width:22px; height:22px;\r\n        fill:none;\r\n        stroke: currentColor;\r\n        stroke-width: 2;\r\n        stroke-linecap: round;\r\n        stroke-linejoin: round;\r\n      }\r\n      .info-item h3{ margin: 0 0 3px; font-size: 15px; font-weight: 950; }\r\n      .info-item p{ margin:0; color: var(--muted); font-size: 14px; line-height: 1.6; }\r\n      .info-item a{ color: var(--primaryDark); text-decoration: none; font-weight: 950; }\r\n      .info-item a:hover{ text-decoration: underline; }\r\n\r\n      \/* ===== Responsive ===== *\/\r\n      @media (max-width: 980px){\r\n        .grid{ grid-template-columns: 1fr; }\r\n      }\r\n      @media (max-width: 620px){\r\n        .row{ grid-template-columns: 1fr; }\r\n        .banner{ min-height: 260px; }\r\n      }\r\n    <\/style>\r\n\r\n    <div class=\"k\">\r\n      <!-- Banner -->\r\n      <section class=\"banner\" aria-label=\"Contact Kativa Morocco\">\r\n        <div class=\"inner\">\r\n          <div class=\"eyebrow\">Kativa Morocco<\/div>\r\n          <h1>Contact Us<\/h1>\r\n          <p>Have a question about our products or your order? Send us a message and we'll get back to you.<\/p>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <!-- Content -->\r\n      <section class=\"section\" aria-label=\"Contact page content\">\r\n        <div class=\"wrap\">\r\n          <div class=\"grid\">\r\n            <!-- Form -->\r\n            <div class=\"card\">\r\n              <div class=\"card-head\">\r\n                <h2>Send a Message<\/h2>\r\n                <p>Fill in the form below and our team will reply as soon as possible.<\/p>\r\n              <\/div>\r\n\r\n              <form id=\"kmForm\" novalidate>\r\n                <div class=\"row\">\r\n                  <div class=\"field\">\r\n                    <label for=\"km_name\">Full Name<\/label>\r\n                    <input id=\"km_name\" name=\"name\" type=\"text\" placeholder=\"Your name\" required>\r\n                  <\/div>\r\n                  <div class=\"field\">\r\n                    <label for=\"km_email\">Email Address<\/label>\r\n                    <input id=\"km_email\" name=\"email\" type=\"email\" placeholder=\"you@email.com\" required>\r\n                  <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"row\">\r\n                  <div class=\"field\">\r\n                    <label for=\"km_phone\">Phone (optional)<\/label>\r\n                    <input id=\"km_phone\" name=\"phone\" type=\"tel\" placeholder=\"${PHONE_NUMBER_DISPLAY}\">\r\n                  <\/div>\r\n                  <div class=\"field\">\r\n                    <label for=\"km_subject\">Subject<\/label>\r\n                    <input id=\"km_subject\" name=\"subject\" type=\"text\" placeholder=\"How can we help?\" required>\r\n                  <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"field\">\r\n                  <label for=\"km_message\">Message<\/label>\r\n                  <textarea id=\"km_message\" name=\"message\" placeholder=\"Write your message...\" required><\/textarea>\r\n                <\/div>\r\n\r\n                <div class=\"actions\">\r\n                  <button class=\"btn\" type=\"submit\">\r\n                    <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" style=\"fill:none;stroke:white;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;\">\r\n                      <path d=\"M22 2L11 13\"><\/path>\r\n                      <path d=\"M22 2l-7 20-4-9-9-4 20-7z\"><\/path>\r\n                    <\/svg>\r\n                    Send Message\r\n                  <\/button>\r\n                <\/div>\r\n\r\n                <div id=\"kmStatus\" class=\"status\"><\/div>\r\n              <\/form>\r\n            <\/div>\r\n\r\n            <!-- Info -->\r\n            <div class=\"card\">\r\n              <div class=\"card-head\">\r\n                <h2>Contact Details<\/h2>\r\n                <p>You can also reach us using the options below.<\/p>\r\n              <\/div>\r\n\r\n              <div class=\"info\">\r\n                <div class=\"info-grid\">\r\n                  <div class=\"info-item\">\r\n                    <div class=\"ico\">\r\n                      <svg viewBox=\"0 0 24 24\"><path d=\"M22 16.9v3a2 2 0 0 1-2.18 2A19.8 19.8 0 0 1 3 5.18 2 2 0 0 1 5.1 3h3a2 2 0 0 1 2 1.72c.12.86.32 1.7.6 2.5a2 2 0 0 1-.45 2.11L9.1 10.9a16 16 0 0 0 4 4l1.57-1.15a2 2 0 0 1 2.11-.45c.8.28 1.64.48 2.5.6A2 2 0 0 1 22 16.9z\"\/><\/svg>\r\n                    <\/div>\r\n                    <div>\r\n                      <h3>Phone<\/h3>\r\n                      <p><a href=\"tel:${PHONE_NUMBER_TEL}\">${PHONE_NUMBER_DISPLAY}<\/a><br><span style=\"color:var(--muted)\">Mon\u2013Sat, 10:00\u201318:00<\/span><\/p>\r\n                    <\/div>\r\n                  <\/div>\r\n\r\n                  <div class=\"info-item\">\r\n                    <div class=\"ico\">\r\n                      <svg viewBox=\"0 0 24 24\"><path d=\"M4 4h16v16H4z\"\/><path d=\"M22 6l-10 7L2 6\"\/><\/svg>\r\n                    <\/div>\r\n                    <div>\r\n                      <h3>Email<\/h3>\r\n                      <p><a href=\"mailto:${RECEIVER_EMAIL}\">${RECEIVER_EMAIL}<\/a><\/p>\r\n                    <\/div>\r\n                  <\/div>\r\n\r\n                  <div class=\"info-item\">\r\n                    <div class=\"ico\">\r\n                      <svg viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z\"\/><path d=\"M12 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z\"\/><\/svg>\r\n                    <\/div>\r\n                    <div>\r\n                      <h3>Address<\/h3>\r\n                      <p>${ADDRESS_TEXT}<\/p>\r\n                    <\/div>\r\n                  <\/div>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/section>\r\n    <\/div>\r\n  `;\r\n\r\n  \/* ===== Form submit (mailto) ===== *\/\r\n  const form = root.getElementById(\"kmForm\");\r\n  const statusBox = root.getElementById(\"kmStatus\");\r\n\r\n  function setStatus(type, msg){\r\n    statusBox.className = \"status \" + type;\r\n    statusBox.textContent = msg;\r\n  }\r\n  function isEmail(v){\r\n    return \/^[^\\\\s@]+@[^\\\\s@]+\\\\.[^\\\\s@]+$\/.test(String(v || \"\").trim());\r\n  }\r\n\r\n  form.addEventListener(\"submit\", (e) => {\r\n    e.preventDefault();\r\n\r\n    const name = form.name.value.trim();\r\n    const email = form.email.value.trim();\r\n    const phone = form.phone.value.trim();\r\n    const subject = form.subject.value.trim();\r\n    const message = form.message.value.trim();\r\n\r\n    if(!name || !email || !subject || !message){\r\n      setStatus(\"err\", \"Please fill in all required fields.\");\r\n      return;\r\n    }\r\n    if(!isEmail(email)){\r\n      setStatus(\"err\", \"Please enter a valid email address.\");\r\n      return;\r\n    }\r\n\r\n    const mailSubject = encodeURIComponent(\"[Kativa Morocco] \" + subject);\r\n    const body = encodeURIComponent(\r\n      \"Name: \" + name + \"\\\\n\" +\r\n      \"Email: \" + email + \"\\\\n\" +\r\n      (phone ? (\"Phone: \" + phone + \"\\\\n\") : \"\") +\r\n      \"\\\\nMessage:\\\\n\" + message\r\n    );\r\n\r\n    window.location.href = \"mailto:\" + \"${RECEIVER_EMAIL}\" + \"?subject=\" + mailSubject + \"&body=\" + body;\r\n    setStatus(\"ok\", \"Opening your email app to send the message\u2026\");\r\n  });\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","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-512","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kativamorocco.com\/ar\/wp-json\/wp\/v2\/pages\/512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kativamorocco.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kativamorocco.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kativamorocco.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kativamorocco.com\/ar\/wp-json\/wp\/v2\/comments?post=512"}],"version-history":[{"count":25,"href":"https:\/\/kativamorocco.com\/ar\/wp-json\/wp\/v2\/pages\/512\/revisions"}],"predecessor-version":[{"id":1631,"href":"https:\/\/kativamorocco.com\/ar\/wp-json\/wp\/v2\/pages\/512\/revisions\/1631"}],"wp:attachment":[{"href":"https:\/\/kativamorocco.com\/ar\/wp-json\/wp\/v2\/media?parent=512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}