{"id":5,"date":"2026-05-23T10:20:08","date_gmt":"2026-05-23T10:20:08","guid":{"rendered":"https:\/\/design.mekawi-dev.com\/?page_id=5"},"modified":"2026-05-23T10:22:16","modified_gmt":"2026-05-23T10:22:16","slug":"%d9%81%d9%88%d8%b1%d9%85-%d8%a7%d9%84%d9%87%d9%88%d9%8a%d8%a9-%d8%a7%d9%84%d8%a8%d8%b5%d8%b1%d9%8a%d8%a9","status":"publish","type":"page","link":"https:\/\/design.mekawi-dev.com\/","title":{"rendered":"\u0641\u0648\u0631\u0645 \u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0628\u0635\u0631\u064a\u0629"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5\" class=\"elementor elementor-5\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d772e79 e-con-full e-flex e-con e-parent\" data-id=\"d772e79\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2a391c3 elementor-widget elementor-widget-shortcode\" data-id=\"2a391c3\" 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    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@300;400;600;700;800&display=swap\" rel=\"stylesheet\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.2\/css\/all.min.css\">\n\n    <style>\n        :root {\n            --primary: #000F26;\n            --secondary: #00B7E3;\n            --secondary-dark: #008ba8;\n            --bg-gradient: linear-gradient(135deg, #000F26 0%, #001f4d 100%);\n        }\n\n        .mekawi-form-wrapper,\n        .mekawi-form-wrapper * {\n            box-sizing: border-box !important;\n        }\n\n        .mekawi-form-wrapper {\n            font-family: 'Almarai', sans-serif !important;\n            direction: rtl !important;\n            text-align: right !important;\n            width: calc(100% - 30px) !important;\n            max-width: 850px !important;\n            margin: 40px auto !important;\n            background: #ffffff !important;\n            border-radius: 24px !important;\n            box-shadow: 0 15px 50px rgba(0, 15, 38, 0.08) !important;\n            overflow: hidden !important;\n            position: relative !important;\n        }\n\n        .mf-header {\n            background: var(--bg-gradient) !important;\n            padding: 40px 30px 60px !important;\n            text-align: center !important;\n            position: relative !important;\n            clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%) !important;\n        }\n\n        .mf-logo {\n            width: 140px !important;\n            height: auto !important;\n            max-width: 100% !important;\n            margin-bottom: 15px !important;\n            filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)) !important;\n            transition: transform 0.4s ease !important;\n        }\n\n        .mf-logo:hover {\n            transform: translateY(-3px) !important;\n        }\n\n        .mf-title {\n            color: #ffffff !important;\n            font-size: 26px !important;\n            font-weight: 800 !important;\n            margin: 0 0 10px 0 !important;\n            line-height: 1.4 !important;\n        }\n\n        .mf-subtitle {\n            color: var(--secondary) !important;\n            font-size: 16px !important;\n            font-weight: 600 !important;\n            margin: 0 0 10px 0 !important;\n            line-height: 1.5 !important;\n        }\n\n        .mf-desc {\n            color: #cbd5e1 !important;\n            font-size: 14px !important;\n            line-height: 1.8 !important;\n            max-width: 600px !important;\n            margin: 0 auto !important;\n            font-weight: 300 !important;\n        }\n\n        .mf-progress-container {\n            padding: 15px 40px 0 !important;\n            margin-top: -25px !important;\n            position: relative !important;\n            z-index: 10 !important;\n        }\n\n        .mf-progress {\n            display: flex !important;\n            justify-content: space-between !important;\n            align-items: center !important;\n            position: relative !important;\n        }\n\n        .mf-progress::before {\n            content: '' !important;\n            position: absolute !important;\n            top: 50% !important;\n            left: 0 !important;\n            right: 0 !important;\n            height: 3px !important;\n            background: #f1f5f9 !important;\n            z-index: 1 !important;\n            transform: translateY(-50%) !important;\n        }\n\n        .mf-step-indicator {\n            width: 45px !important;\n            height: 45px !important;\n            min-width: 45px !important;\n            border-radius: 50% !important;\n            background: #ffffff !important;\n            border: 3px solid #f1f5f9 !important;\n            color: #94a3b8 !important;\n            display: flex !important;\n            align-items: center !important;\n            justify-content: center !important;\n            font-size: 16px !important;\n            position: relative !important;\n            z-index: 2 !important;\n            transition: all 0.4s ease !important;\n        }\n\n        .mf-step-indicator.active {\n            border-color: var(--secondary) !important;\n            background: var(--primary) !important;\n            color: var(--secondary) !important;\n            transform: scale(1.05) !important;\n            box-shadow: 0 0 15px rgba(0, 183, 227, 0.3) !important;\n        }\n\n        .mf-step-indicator.completed {\n            border-color: var(--primary) !important;\n            background: var(--secondary) !important;\n            color: #ffffff !important;\n        }\n\n        .mf-body {\n            padding: 30px 40px 40px !important;\n            position: relative !important;\n            min-height: 400px !important;\n        }\n\n        .mf-step {\n            display: none !important;\n            animation: mfFadeIn 0.5s ease-in-out forwards !important;\n        }\n\n        .mf-step.active {\n            display: block !important;\n        }\n\n        @keyframes mfFadeIn {\n            from {\n                opacity: 0;\n                transform: translateY(15px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        .mf-step h3 {\n            color: var(--primary) !important;\n            font-size: 20px !important;\n            font-weight: 800 !important;\n            margin: 0 0 25px 0 !important;\n            display: flex !important;\n            align-items: center !important;\n            gap: 12px !important;\n            line-height: 1.5 !important;\n        }\n\n        .mf-step h3 i {\n            color: var(--secondary) !important;\n            font-size: 22px !important;\n        }\n\n        .mf-group {\n            margin-bottom: 20px !important;\n        }\n\n        .mf-group label {\n            display: block !important;\n            font-weight: 700 !important;\n            color: var(--primary) !important;\n            margin-bottom: 8px !important;\n            font-size: 14px !important;\n            line-height: 1.6 !important;\n        }\n\n        .mf-note {\n            font-size: 12px !important;\n            color: #64748b !important;\n            margin-bottom: 8px !important;\n            display: block !important;\n            line-height: 1.6 !important;\n        }\n\n        .mf-input {\n            width: 100% !important;\n            max-width: 100% !important;\n            padding: 0px 18px !important;\n            background: #f8fafc !important;\n            border: 1px solid #e2e8f0 !important;\n            border-radius: 12px !important;\n            font-family: 'Almarai', sans-serif !important;\n            font-size: 14px !important;\n            color: var(--primary) !important;\n            transition: all 0.3s ease !important;\n            line-height: 1.7 !important;\n        }\n\n        textarea.mf-input {\n            resize: vertical !important;\n            min-height: 90px !important;\n        }\n\n        .mf-input:focus {\n            background: #ffffff !important;\n            border-color: var(--secondary) !important;\n            outline: none !important;\n            box-shadow: 0 4px 15px rgba(0, 183, 227, 0.08) !important;\n        }\n\n        .mf-input.mf-error {\n            border-color: #ef4444 !important;\n            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;\n        }\n\n        .mf-choice-grid {\n            display: grid !important;\n            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;\n            gap: 15px !important;\n        }\n\n        .mf-choice-card {\n            position: relative !important;\n            cursor: pointer !important;\n            display: block !important;\n            margin: 0 !important;\n        }\n\n        .mf-choice-card input {\n            position: absolute !important;\n            opacity: 0 !important;\n            pointer-events: none !important;\n        }\n\n        .mf-choice-content {\n            min-height: 105px !important;\n            display: flex !important;\n            flex-direction: column !important;\n            align-items: center !important;\n            justify-content: center !important;\n            padding: 20px 15px !important;\n            background: #ffffff !important;\n            border: 1px solid #e2e8f0 !important;\n            border-radius: 16px !important;\n            transition: all 0.3s ease !important;\n            text-align: center !important;\n            gap: 10px !important;\n        }\n\n        .mf-choice-content i {\n            font-size: 24px !important;\n            color: #94a3b8 !important;\n            transition: all 0.3s ease !important;\n        }\n\n        .mf-choice-content span {\n            font-size: 14px !important;\n            font-weight: 700 !important;\n            color: #64748b !important;\n            line-height: 1.5 !important;\n        }\n\n        .mf-choice-card:hover .mf-choice-content {\n            border-color: var(--secondary) !important;\n            transform: translateY(-3px) !important;\n            box-shadow: 0 8px 15px rgba(0,0,0,0.03) !important;\n        }\n\n        .mf-choice-card input:checked ~ .mf-choice-content {\n            background: var(--primary) !important;\n            border-color: var(--primary) !important;\n        }\n\n        .mf-choice-card input:checked ~ .mf-choice-content i {\n            color: var(--secondary) !important;\n            transform: scale(1.1) !important;\n        }\n\n        .mf-choice-card input:checked ~ .mf-choice-content span {\n            color: #ffffff !important;\n        }\n\n        .mf-color-pickers {\n            display: flex !important;\n            flex-wrap: wrap !important;\n            gap: 30px !important;\n            align-items: center !important;\n        }\n\n        .mf-color-box {\n            text-align: center !important;\n        }\n\n        .mf-color-box input[type=\"color\"] {\n            -webkit-appearance: none !important;\n            appearance: none !important;\n            border: 3px solid #ffffff !important;\n            width: 60px !important;\n            height: 60px !important;\n            border-radius: 50% !important;\n            cursor: pointer !important;\n            padding: 0 !important;\n            box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;\n            transition: all 0.3s ease !important;\n            background: transparent !important;\n        }\n\n        .mf-color-box input[type=\"color\"]::-webkit-color-swatch-wrapper {\n            padding: 0 !important;\n        }\n\n        .mf-color-box input[type=\"color\"]::-webkit-color-swatch {\n            border: none !important;\n            border-radius: 50% !important;\n        }\n\n        .mf-color-box input[type=\"color\"]::-moz-color-swatch {\n            border: none !important;\n            border-radius: 50% !important;\n        }\n\n        .mf-color-box input[type=\"color\"]:hover {\n            transform: scale(1.1) !important;\n        }\n\n        .mf-buttons {\n            display: flex !important;\n            justify-content: space-between !important;\n            align-items: center !important;\n            gap: 15px !important;\n            margin-top: 40px !important;\n            padding-top: 25px !important;\n            border-top: 1px solid #f1f5f9 !important;\n        }\n\n        .mf-btn {\n            padding: 14px 30px !important;\n            border: none !important;\n            border-radius: 10px !important;\n            font-family: 'Almarai', sans-serif !important;\n            font-weight: 700 !important;\n            font-size: 15px !important;\n            cursor: pointer !important;\n            display: inline-flex !important;\n            align-items: center !important;\n            justify-content: center !important;\n            gap: 10px !important;\n            transition: all 0.4s ease !important;\n            line-height: 1.4 !important;\n            min-height: 50px !important;\n            text-decoration: none !important;\n        }\n\n        .mf-btn-next {\n            background-image: linear-gradient(to right, #00B7E3, #007ca3, #00B7E3) !important;\n            background-size: 200% auto !important;\n            color: #ffffff !important;\n            margin-right: auto !important;\n        }\n\n        .mf-btn-next:hover {\n            background-position: right center !important;\n            transform: translateX(-5px) !important;\n            box-shadow: 0 8px 20px rgba(0, 183, 227, 0.3) !important;\n        }\n\n        .mf-btn-prev {\n            background: #f1f5f9 !important;\n            color: var(--primary) !important;\n        }\n\n        .mf-btn-prev:hover {\n            background: #e2e8f0 !important;\n            transform: translateX(5px) !important;\n        }\n\n        .mf-btn-submit {\n            background-image: linear-gradient(to right, #000F26, #002866, #000F26) !important;\n            background-size: 200% auto !important;\n            color: #ffffff !important;\n        }\n\n        .mf-btn-submit:hover {\n            background-position: right center !important;\n            transform: translateY(-3px) !important;\n            box-shadow: 0 10px 25px rgba(0, 15, 38, 0.3) !important;\n        }\n\n        .mf-loader,\n        .mf-success {\n            display: none !important;\n            text-align: center !important;\n            padding: 40px 20px !important;\n        }\n\n        .mf-loader.active,\n        .mf-success.active {\n            display: block !important;\n        }\n\n        @media (max-width: 768px) {\n            .mekawi-form-wrapper {\n                width: calc(100% - 24px) !important;\n                margin: 20px auto !important;\n                border-radius: 16px !important;\n            }\n\n            .mf-header {\n                padding: 30px 18px 45px !important;\n                clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%) !important;\n            }\n\n            .mf-logo {\n                width: 110px !important;\n            }\n\n            .mf-title {\n                font-size: 21px !important;\n            }\n\n            .mf-subtitle {\n                font-size: 14px !important;\n            }\n\n            .mf-desc {\n                font-size: 12.5px !important;\n            }\n\n            .mf-progress-container {\n                padding: 10px 18px 0 !important;\n                margin-top: -16px !important;\n            }\n\n            .mf-step-indicator {\n                width: 36px !important;\n                height: 36px !important;\n                min-width: 36px !important;\n                font-size: 13px !important;\n                border-width: 2px !important;\n            }\n\n            .mf-body {\n                padding: 25px 18px 30px !important;\n                min-height: auto !important;\n            }\n\n            .mf-step h3 {\n                font-size: 18px !important;\n                margin-bottom: 20px !important;\n                gap: 8px !important;\n            }\n\n            .mf-step h3 i {\n                font-size: 18px !important;\n            }\n\n            .mf-input {\n                padding: 12px 14px !important;\n                font-size: 13px !important;\n            }\n\n            .mf-choice-grid {\n                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n                gap: 10px !important;\n            }\n\n            .mf-choice-content {\n                min-height: 95px !important;\n                padding: 14px 8px !important;\n                border-radius: 14px !important;\n            }\n\n            .mf-choice-content i {\n                font-size: 20px !important;\n            }\n\n            .mf-choice-content span {\n                font-size: 12px !important;\n            }\n\n            .mf-color-pickers {\n                gap: 20px !important;\n            }\n\n            .mf-buttons {\n                flex-direction: column-reverse !important;\n                gap: 12px !important;\n                margin-top: 25px !important;\n            }\n\n            .mf-btn {\n                width: 100% !important;\n                padding: 13px 18px !important;\n                font-size: 14px !important;\n                margin-right: 0 !important;\n            }\n\n            .mf-btn-next:hover,\n            .mf-btn-prev:hover,\n            .mf-btn-submit:hover {\n                transform: translateY(-3px) !important;\n            }\n        }\n\n        @media (max-width: 420px) {\n            .mf-choice-grid {\n                grid-template-columns: 1fr !important;\n            }\n\n            .mf-title {\n                font-size: 19px !important;\n            }\n\n            .mf-progress-container {\n                padding-left: 14px !important;\n                padding-right: 14px !important;\n            }\n        }\n    <\/style>\n\n    <div class=\"mekawi-form-wrapper\" id=\"mekawi-brand-form\">\n\n        <div class=\"mf-header\">\n            <img decoding=\"async\" src=\"https:\/\/design.mekawi-dev.com\/wp-content\/uploads\/2026\/05\/Capture-removebg-preview1.png\" alt=\"Mekawi Dev\" class=\"mf-logo\">\n            <h2 class=\"mf-title\">\u0628\u0646\u0627\u0621 \u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0628\u0635\u0631\u064a\u0629<\/h2>\n            <h4 class=\"mf-subtitle\">\u0646\u0635\u0645\u0645 \u0644\u0643 \u0647\u0648\u064a\u0629 \u062a\u0639\u0628\u0631 \u0639\u0646 \u0631\u0624\u064a\u062a\u0643 \u0628\u0642\u0648\u0629<\/h4>\n            <p class=\"mf-desc\">\u0623\u062c\u0628 \u0639\u0646 \u0627\u0644\u0623\u0633\u0626\u0644\u0629 \u0627\u0644\u062a\u0627\u0644\u064a\u0629 \u0644\u0646\u062a\u0645\u0643\u0646 \u0645\u0646 \u0641\u0647\u0645 \u0646\u0634\u0627\u0637\u0643 \u0627\u0644\u062a\u062c\u0627\u0631\u064a \u0648\u062a\u0642\u062f\u064a\u0645 \u0623\u0641\u0636\u0644 \u0646\u062a\u064a\u062c\u0629 \u062a\u0644\u064a\u0642 \u0628\u0639\u0644\u0627\u0645\u062a\u0643 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629.<\/p>\n        <\/div>\n\n        <div class=\"mf-progress-container\">\n            <div class=\"mf-progress\">\n                <div class=\"mf-step-indicator active\" data-indicator=\"1\"><i class=\"fas fa-rocket\"><\/i><\/div>\n                <div class=\"mf-step-indicator\" data-indicator=\"2\"><i class=\"fas fa-fingerprint\"><\/i><\/div>\n                <div class=\"mf-step-indicator\" data-indicator=\"3\"><i class=\"fas fa-pen-nib\"><\/i><\/div>\n                <div class=\"mf-step-indicator\" data-indicator=\"4\"><i class=\"fas fa-palette\"><\/i><\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"mf-body\">\n\n            <div class=\"mf-loader\" id=\"mf-loader\">\n                <i class=\"fas fa-circle-notch fa-spin\" style=\"color:var(--secondary); font-size:40px;\"><\/i>\n                <p style=\"color:var(--primary); margin-top:15px; font-weight:700;\">\u062c\u0627\u0631\u064a \u0625\u0631\u0633\u0627\u0644 \u0627\u0644\u0637\u0644\u0628...<\/p>\n            <\/div>\n\n            <div class=\"mf-success\" id=\"mf-success\">\n                <i class=\"fas fa-check-circle\" style=\"font-size:60px; color:#10b981; margin-bottom:15px;\"><\/i>\n                <h3 style=\"color:var(--primary); font-size:22px; font-weight:800; margin-bottom:10px;\">\u062a\u0645 \u0627\u0644\u0625\u0631\u0633\u0627\u0644 \u0628\u0646\u062c\u0627\u062d!<\/h3>\n                <p style=\"color:#64748b; font-size:14px;\">\u0634\u0643\u0631\u0627\u064b \u0644\u0643\u060c \u0633\u064a\u0642\u0648\u0645 \u0641\u0631\u064a\u0642\u0646\u0627 \u0628\u0645\u0631\u0627\u062c\u0639\u0629 \u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644 \u0648\u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0643 \u0642\u0631\u064a\u0628\u0627\u064b.<\/p>\n            <\/div>\n\n            <form id=\"brandForm\" novalidate>\n                <input type=\"hidden\" name=\"brand_form_nonce\" value=\"3d9bcf28e2\">\n\n                <!-- Step 1 -->\n                <div class=\"mf-step active\" data-step=\"1\">\n                    <h3><i class=\"fas fa-briefcase\"><\/i> \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0628\u0631\u0627\u0646\u062f \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629<\/h3>\n\n                    <div class=\"mf-group\">\n                        <label>\u0627\u0633\u0645 \u0627\u0644\u0628\u0631\u0627\u0646\u062f \u0639\u0631\u0628\u064a <span style=\"color:#ef4444;\">*<\/span><\/label>\n                        <span class=\"mf-note\">\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u062f\u0642\u064a\u0642 \u0627\u0644\u0630\u064a \u062a\u0631\u063a\u0628 \u0628\u0638\u0647\u0648\u0631\u0647 \u0641\u064a \u0627\u0644\u0644\u0648\u062c\u0648<\/span>\n                        <input type=\"text\" name=\"brand_name_ar\" class=\"mf-input\" placeholder=\"\u0645\u062b\u0627\u0644: \u0634\u0631\u0643\u0629 \u0645\u0643\u0627\u0648\u064a \u0644\u0644\u062a\u0637\u0648\u064a\u0631\" required>\n                    <\/div>\n\n                    <div class=\"mf-group\">\n                        <label>\u0627\u0633\u0645 \u0627\u0644\u0628\u0631\u0627\u0646\u062f \u0625\u0646\u062c\u0644\u064a\u0632\u064a<\/label>\n                        <input type=\"text\" name=\"brand_name_en\" class=\"mf-input\" placeholder=\"Mekawi Dev\">\n                    <\/div>\n\n                    <div class=\"mf-group\">\n                        <label>\u0627\u0644\u0633\u0644\u0648\u062c\u0627\u0646 \/ \u0627\u0644\u0634\u0639\u0627\u0631 \u0627\u0644\u0644\u0641\u0638\u064a \u0625\u0646 \u0648\u062c\u062f<\/label>\n                        <input type=\"text\" name=\"brand_slogan\" class=\"mf-input\" placeholder=\"\u0645\u062b\u0627\u0644: \u0646\u0628\u0646\u064a \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\">\n                    <\/div>\n\n                    <div class=\"mf-group\">\n                        <label>\u0635\u0641 \u0646\u0634\u0627\u0637\u0643 \u0627\u0644\u062a\u062c\u0627\u0631\u064a \u0641\u064a \u062c\u0645\u0644\u0629 \u0648\u0627\u062d\u062f\u0629 <span style=\"color:#ef4444;\">*<\/span><\/label>\n                        <textarea name=\"business_activity\" class=\"mf-input\" rows=\"2\" placeholder=\"\u0645\u0627\u0630\u0627 \u062a\u0642\u062f\u0645 \u0644\u0639\u0645\u0644\u0627\u0626\u0643\u061f\" required><\/textarea>\n                    <\/div>\n\n                    <div class=\"mf-group\">\n                        <label>\u0645\u0627 \u0623\u0647\u0645 \u0634\u064a\u0621 \u064a\u0645\u064a\u0632\u0643 \u0639\u0646 \u0627\u0644\u0645\u0646\u0627\u0641\u0633\u064a\u0646\u061f<\/label>\n                        <textarea name=\"competitive_advantage\" class=\"mf-input\" rows=\"2\"><\/textarea>\n                    <\/div>\n\n                    <div class=\"mf-group\">\n                        <label>\u0647\u0644 \u064a\u0648\u062c\u062f \u0645\u0639\u0646\u0649 \u0645\u0639\u064a\u0646 \u0648\u0631\u0627\u0621 \u0627\u0633\u0645 \u0627\u0644\u0628\u0631\u0627\u0646\u062f\u061f<\/label>\n                        <textarea name=\"brand_meaning\" class=\"mf-input\" rows=\"2\"><\/textarea>\n                    <\/div>\n\n                    <div class=\"mf-buttons\" style=\"justify-content:flex-end !important;\">\n                        <button type=\"button\" class=\"mf-btn mf-btn-next step-trigger-next\" data-current=\"1\" data-next=\"2\">\n                            \u0627\u0644\u062a\u0627\u0644\u064a <i class=\"fas fa-arrow-left\"><\/i>\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- Step 2 -->\n                <div class=\"mf-step\" data-step=\"2\">\n                    <h3><i class=\"fas fa-star\"><\/i> \u0634\u062e\u0635\u064a\u0629 \u0627\u0644\u0628\u0631\u0627\u0646\u062f<\/h3>\n\n                    <div class=\"mf-group\">\n                        <label>\u0627\u062e\u062a\u0631 \u0627\u0644\u0635\u0641\u0627\u062a \u0627\u0644\u062a\u064a \u062a\u0639\u0628\u0631 \u0639\u0646 \u0647\u0648\u064a\u0629 \u0627\u0644\u0628\u0631\u0627\u0646\u062f:<\/label>\n\n                        <div class=\"mf-choice-grid\">\n                            <label class=\"mf-choice-card\">\n                                <input type=\"checkbox\" name=\"personality[]\" value=\"\u0641\u0627\u062e\u0631\">\n                                <div class=\"mf-choice-content\"><i class=\"fas fa-gem\"><\/i><span>\u0641\u0627\u062e\u0631<\/span><\/div>\n                            <\/label>\n\n                            <label class=\"mf-choice-card\">\n                                <input type=\"checkbox\" name=\"personality[]\" value=\"\u0628\u0633\u064a\u0637\">\n                                <div class=\"mf-choice-content\"><i class=\"fas fa-feather\"><\/i><span>\u0628\u0633\u064a\u0637<\/span><\/div>\n                            <\/label>\n\n                            <label class=\"mf-choice-card\">\n                                <input type=\"checkbox\" name=\"personality[]\" value=\"\u0639\u0635\u0631\u064a\">\n                                <div class=\"mf-choice-content\"><i class=\"fas fa-bolt\"><\/i><span>\u0639\u0635\u0631\u064a<\/span><\/div>\n                            <\/label>\n\n                            <label class=\"mf-choice-card\">\n                                <input type=\"checkbox\" name=\"personality[]\" value=\"\u0643\u0644\u0627\u0633\u064a\u0643\u064a\">\n                                <div class=\"mf-choice-content\"><i class=\"fas fa-landmark\"><\/i><span>\u0643\u0644\u0627\u0633\u064a\u0643\u064a<\/span><\/div>\n                            <\/label>\n\n                            <label class=\"mf-choice-card\">\n                                <input type=\"checkbox\" name=\"personality[]\" value=\"\u062c\u0631\u064a\u0621\">\n                                <div class=\"mf-choice-content\"><i class=\"fas fa-fire\"><\/i><span>\u062c\u0631\u064a\u0621<\/span><\/div>\n                            <\/label>\n\n                            <label class=\"mf-choice-card\">\n                                <input type=\"checkbox\" name=\"personality[]\" value=\"\u0647\u0627\u062f\u0626\">\n                                <div class=\"mf-choice-content\"><i class=\"fas fa-leaf\"><\/i><span>\u0647\u0627\u062f\u0626<\/span><\/div>\n                            <\/label>\n\n                            <label class=\"mf-choice-card\">\n                                <input type=\"checkbox\" name=\"personality[]\" value=\"\u0634\u0628\u0627\u0628\u064a\">\n                                <div class=\"mf-choice-content\"><i class=\"fas fa-gamepad\"><\/i><span>\u0634\u0628\u0627\u0628\u064a<\/span><\/div>\n                            <\/label>\n\n                            <label class=\"mf-choice-card\">\n                                <input type=\"checkbox\" name=\"personality[]\" value=\"\u0631\u0633\u0645\u064a\">\n                                <div class=\"mf-choice-content\"><i class=\"fas fa-building\"><\/i><span>\u0631\u0633\u0645\u064a<\/span><\/div>\n                            <\/label>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"mf-buttons\">\n                        <button type=\"button\" class=\"mf-btn mf-btn-prev step-trigger-prev\" data-current=\"2\" data-prev=\"1\">\n                            <i class=\"fas fa-arrow-right\"><\/i> \u0627\u0644\u0633\u0627\u0628\u0642\n                        <\/button>\n\n                        <button type=\"button\" class=\"mf-btn mf-btn-next step-trigger-next\" data-current=\"2\" data-next=\"3\">\n                            \u0627\u0644\u062a\u0627\u0644\u064a <i class=\"fas fa-arrow-left\"><\/i>\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- Step 3 -->\n                <div class=\"mf-step\" data-step=\"3\">\n                    <h3><i class=\"fas fa-object-group\"><\/i> \u062a\u0641\u0636\u064a\u0644\u0627\u062a \u0627\u0644\u062a\u0635\u0645\u064a\u0645<\/h3>\n\n                    <div class=\"mf-group\">\n                        <label>\u0647\u0644 \u062a\u0641\u0636\u0644 \u0627\u0644\u0634\u0639\u0627\u0631 \u064a\u0643\u0648\u0646:<\/label>\n\n                        <div class=\"mf-choice-grid\">\n                            <label class=\"mf-choice-card\">\n                                <input type=\"radio\" name=\"logo_type\" value=\"\u0646\u0635\u064a \u0641\u0642\u0637\">\n                                <div class=\"mf-choice-content\"><i class=\"fas fa-font\"><\/i><span>\u0646\u0635\u064a \u0641\u0642\u0637<\/span><\/div>\n                            <\/label>\n\n                            <label class=\"mf-choice-card\">\n                                <input type=\"radio\" name=\"logo_type\" value=\"\u0631\u0645\u0632 \u0641\u0642\u0637\">\n                                <div class=\"mf-choice-content\"><i class=\"fas fa-icons\"><\/i><span>\u0631\u0645\u0632 \u0641\u0642\u0637<\/span><\/div>\n                            <\/label>\n\n                            <label class=\"mf-choice-card\">\n                                <input type=\"radio\" name=\"logo_type\" value=\"\u0631\u0645\u0632 \u0648\u0627\u0633\u0645\">\n                                <div class=\"mf-choice-content\"><i class=\"fas fa-layer-group\"><\/i><span>\u0631\u0645\u0632 + \u0627\u0633\u0645<\/span><\/div>\n                            <\/label>\n\n                            <label class=\"mf-choice-card\">\n                                <input type=\"radio\" name=\"logo_type\" value=\"\u062d\u0631\u0641 \u0645\u062e\u062a\u0635\u0631\">\n                                <div class=\"mf-choice-content\"><i class=\"fas fa-strikethrough\"><\/i><span>\u062d\u0631\u0641 \u0645\u062e\u062a\u0635\u0631<\/span><\/div>\n                            <\/label>\n\n                            <label class=\"mf-choice-card\">\n                                <input type=\"radio\" name=\"logo_type\" value=\"\u0623\u062d\u062a\u0627\u062c \u0627\u0642\u062a\u0631\u0627\u062d\" checked>\n                                <div class=\"mf-choice-content\"><i class=\"fas fa-lightbulb\"><\/i><span>\u0623\u062d\u062a\u0627\u062c \u0627\u0642\u062a\u0631\u0627\u062d<\/span><\/div>\n                            <\/label>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"mf-group\">\n                        <label>\u0644\u063a\u0629 \u0627\u0644\u0647\u0648\u064a\u0629:<\/label>\n                        <select name=\"identity_language\" class=\"mf-input\">\n                            <option value=\"\u0639\u0631\u0628\u064a\u0629 \u0648\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629\">\u0639\u0631\u0628\u064a\u0629 \u0648\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629<\/option>\n                            <option value=\"\u0639\u0631\u0628\u064a\u0629 \u0641\u0642\u0637\">\u0639\u0631\u0628\u064a\u0629 \u0641\u0642\u0637<\/option>\n                            <option value=\"\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0641\u0642\u0637\">\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0641\u0642\u0637<\/option>\n                        <\/select>\n                    <\/div>\n\n                    <div class=\"mf-group\">\n                        <label>\u0647\u0644 \u0644\u062f\u064a\u0643 \u062e\u0637\u0648\u0637 \u0645\u0641\u0636\u0644\u0629\u061f<\/label>\n                        <input type=\"text\" name=\"favorite_fonts\" class=\"mf-input\" placeholder=\"\u0645\u062b\u0627\u0644: \u062e\u0637\u0648\u0637 \u0643\u0648\u0641\u064a\u0629\u060c \u0631\u0642\u0639\u0629\">\n                    <\/div>\n\n                    <div class=\"mf-group\">\n                        <label>\u0645\u0627 \u0627\u0644\u0627\u0646\u0637\u0628\u0627\u0639 \u0627\u0644\u0623\u0648\u0644 \u0627\u0644\u0630\u064a \u062a\u0631\u064a\u062f\u0647 \u0645\u0646 \u0627\u0644\u0639\u0645\u064a\u0644\u061f<\/label>\n                        <textarea name=\"first_impression\" class=\"mf-input\" rows=\"2\" placeholder=\"\u0645\u062b\u0627\u0644: \u0623\u0631\u064a\u062f\u0647 \u0623\u0646 \u064a\u0634\u0639\u0631 \u0628\u0627\u0644\u062b\u0642\u0629 \u0648\u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629\"><\/textarea>\n                    <\/div>\n\n                    <div class=\"mf-buttons\">\n                        <button type=\"button\" class=\"mf-btn mf-btn-prev step-trigger-prev\" data-current=\"3\" data-prev=\"2\">\n                            <i class=\"fas fa-arrow-right\"><\/i> \u0627\u0644\u0633\u0627\u0628\u0642\n                        <\/button>\n\n                        <button type=\"button\" class=\"mf-btn mf-btn-next step-trigger-next\" data-current=\"3\" data-next=\"4\">\n                            \u0627\u0644\u062a\u0627\u0644\u064a <i class=\"fas fa-arrow-left\"><\/i>\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- Step 4 -->\n                <div class=\"mf-step\" data-step=\"4\">\n                    <h3><i class=\"fas fa-fill-drip\"><\/i> \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u0645\u0641\u0636\u0644\u0629<\/h3>\n\n                    <div class=\"mf-group\">\n                        <label>\u0627\u062e\u062a\u0631 \u062f\u0631\u062c\u0627\u062a \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0625\u0646 \u0648\u062c\u062f\u062a:<\/label>\n\n                        <div class=\"mf-color-pickers\">\n                            <div class=\"mf-color-box\">\n                                <span class=\"mf-note\">\u0623\u0633\u0627\u0633\u064a<\/span>\n                                <input type=\"color\" name=\"primary_color\" value=\"#000F26\">\n                            <\/div>\n\n                            <div class=\"mf-color-box\">\n                                <span class=\"mf-note\">\u062b\u0627\u0646\u0648\u064a<\/span>\n                                <input type=\"color\" name=\"secondary_color\" value=\"#00B7E3\">\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"mf-group\">\n                        <label>\u0647\u0644 \u0644\u062f\u064a\u0643 \u0623\u0644\u0648\u0627\u0646 \u0623\u062e\u0631\u0649 \u0645\u0641\u0636\u0644\u0629\u061f<\/label>\n                        <input type=\"text\" name=\"favorite_colors\" class=\"mf-input\" placeholder=\"\u0645\u062b\u0627\u0644: \u0627\u0644\u0630\u0647\u0628\u064a \u0623\u0648 \u0627\u0644\u0641\u0636\u064a\">\n                    <\/div>\n\n                    <div class=\"mf-group\">\n                        <label>\u0647\u0644 \u062a\u0648\u062c\u062f \u0623\u0644\u0648\u0627\u0646 \u0645\u0645\u0646\u0648\u0639 \u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0647\u0627\u061f<\/label>\n                        <input type=\"text\" name=\"prohibited_colors\" class=\"mf-input\" placeholder=\"\u0645\u062b\u0627\u0644: \u064a\u0631\u062c\u0649 \u062a\u062c\u0646\u0628 \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0623\u062d\u0645\u0631\">\n                    <\/div>\n\n                    <div class=\"mf-buttons\">\n                        <button type=\"button\" class=\"mf-btn mf-btn-prev step-trigger-prev\" data-current=\"4\" data-prev=\"3\">\n                            <i class=\"fas fa-arrow-right\"><\/i> \u0627\u0644\u0633\u0627\u0628\u0642\n                        <\/button>\n\n                        <button type=\"submit\" class=\"mf-btn mf-btn-submit\">\n                            \u0625\u0631\u0633\u0627\u0644 \u0627\u0644\u0637\u0644\u0628 <i class=\"fas fa-paper-plane\"><\/i>\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n            <\/form>\n        <\/div>\n    <\/div>\n\n    <script>\n        (function() {\n            function initBrandForm() {\n                const wrapper = document.getElementById('mekawi-brand-form');\n\n                if (!wrapper) {\n                    return;\n                }\n\n                const form = wrapper.querySelector('#brandForm');\n                const loader = wrapper.querySelector('#mf-loader');\n                const successBox = wrapper.querySelector('#mf-success');\n\n                const stepIcons = {\n                    1: '<i class=\"fas fa-rocket\"><\/i>',\n                    2: '<i class=\"fas fa-fingerprint\"><\/i>',\n                    3: '<i class=\"fas fa-pen-nib\"><\/i>',\n                    4: '<i class=\"fas fa-palette\"><\/i>'\n                };\n\n                function getStep(stepNumber) {\n                    return wrapper.querySelector('.mf-step[data-step=\"' + stepNumber + '\"]');\n                }\n\n                function validateStep(stepNumber) {\n                    let isValid = true;\n                    const currentStep = getStep(stepNumber);\n\n                    if (!currentStep) {\n                        return false;\n                    }\n\n                    const requiredFields = currentStep.querySelectorAll('input[required], textarea[required], select[required]');\n\n                    requiredFields.forEach(function(field) {\n                        const value = field.value ? field.value.trim() : '';\n\n                        if (!value) {\n                            isValid = false;\n                            field.classList.add('mf-error');\n                        } else {\n                            field.classList.remove('mf-error');\n                        }\n                    });\n\n                    return isValid;\n                }\n\n                function showStep(stepNumber) {\n                    const allSteps = wrapper.querySelectorAll('.mf-step');\n\n                    allSteps.forEach(function(step) {\n                        step.classList.remove('active');\n                    });\n\n                    const targetStep = getStep(stepNumber);\n\n                    if (targetStep) {\n                        targetStep.classList.add('active');\n                    }\n\n                    updateIndicators(stepNumber);\n\n                    wrapper.scrollIntoView({\n                        behavior: 'smooth',\n                        block: 'start'\n                    });\n                }\n\n                function updateIndicators(activeStep) {\n                    activeStep = parseInt(activeStep, 10);\n\n                    const indicators = wrapper.querySelectorAll('.mf-step-indicator');\n\n                    indicators.forEach(function(indicator) {\n                        const indicatorNumber = parseInt(indicator.getAttribute('data-indicator'), 10);\n\n                        indicator.classList.remove('active', 'completed');\n\n                        if (indicatorNumber < activeStep) {\n                            indicator.classList.add('completed');\n                            indicator.innerHTML = '<i class=\"fas fa-check\"><\/i>';\n                        } else if (indicatorNumber === activeStep) {\n                            indicator.classList.add('active');\n                            indicator.innerHTML = stepIcons[indicatorNumber] || '';\n                        } else {\n                            indicator.innerHTML = stepIcons[indicatorNumber] || '';\n                        }\n                    });\n                }\n\n                wrapper.querySelectorAll('.step-trigger-next').forEach(function(button) {\n                    button.addEventListener('click', function(event) {\n                        event.preventDefault();\n\n                        const current = parseInt(button.getAttribute('data-current'), 10);\n                        const next = parseInt(button.getAttribute('data-next'), 10);\n\n                        if (!validateStep(current)) {\n                            alert('\u0639\u0630\u0631\u0627\u064b\u060c \u064a\u0631\u062c\u0649 \u0645\u0644\u0621 \u0627\u0644\u062d\u0642\u0648\u0644 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629 \u0627\u0644\u0645\u062d\u062f\u062f\u0629 \u0628\u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0623\u062d\u0645\u0631.');\n                            return;\n                        }\n\n                        showStep(next);\n                    });\n                });\n\n                wrapper.querySelectorAll('.step-trigger-prev').forEach(function(button) {\n                    button.addEventListener('click', function(event) {\n                        event.preventDefault();\n\n                        const prev = parseInt(button.getAttribute('data-prev'), 10);\n\n                        showStep(prev);\n                    });\n                });\n\n                wrapper.querySelectorAll('.mf-input').forEach(function(field) {\n                    field.addEventListener('input', function() {\n                        if (field.value.trim()) {\n                            field.classList.remove('mf-error');\n                        }\n                    });\n                });\n\n                if (form) {\n                    form.addEventListener('submit', function(event) {\n                        event.preventDefault();\n\n                        if (!validateStep(4)) {\n                            alert('\u064a\u0631\u062c\u0649 \u0627\u0644\u062a\u0623\u0643\u062f \u0645\u0646 \u0645\u0644\u0621 \u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0644 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629.');\n                            return;\n                        }\n\n                        form.style.display = 'none';\n\n                        if (loader) {\n                            loader.classList.add('active');\n                        }\n\n                        if (successBox) {\n                            successBox.classList.remove('active');\n                        }\n\n                        const formData = new FormData(form);\n                        formData.append('action', 'submit_brand_form');\n\n                        fetch('https:\/\/design.mekawi-dev.com\/wp-admin\/admin-ajax.php', {\n                            method: 'POST',\n                            body: formData,\n                            credentials: 'same-origin'\n                        })\n                        .then(function(response) {\n                            return response.json();\n                        })\n                        .then(function(data) {\n                            if (loader) {\n                                loader.classList.remove('active');\n                            }\n\n                            if (data && data.success) {\n                                if (successBox) {\n                                    successBox.classList.add('active');\n                                }\n\n                                form.reset();\n                            } else {\n                                alert(data && data.data ? data.data : '\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0625\u0631\u0633\u0627\u0644\u060c \u064a\u0631\u062c\u0649 \u0627\u0644\u0645\u062d\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649.');\n                                form.style.display = 'block';\n                            }\n                        })\n                        .catch(function() {\n                            if (loader) {\n                                loader.classList.remove('active');\n                            }\n\n                            form.style.display = 'block';\n\n                            alert('\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0625\u0631\u0633\u0627\u0644\u060c \u064a\u0631\u062c\u0649 \u0627\u0644\u0645\u062d\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649.');\n                        });\n                    });\n                }\n            }\n\n            if (document.readyState === 'loading') {\n                document.addEventListener('DOMContentLoaded', initBrandForm);\n            } else {\n                initBrandForm();\n            }\n        })();\n    <\/script>\n\n    <\/div>\n\t\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":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/design.mekawi-dev.com\/index.php?rest_route=\/wp\/v2\/pages\/5","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/design.mekawi-dev.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/design.mekawi-dev.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/design.mekawi-dev.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/design.mekawi-dev.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5"}],"version-history":[{"count":4,"href":"https:\/\/design.mekawi-dev.com\/index.php?rest_route=\/wp\/v2\/pages\/5\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/design.mekawi-dev.com\/index.php?rest_route=\/wp\/v2\/pages\/5\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/design.mekawi-dev.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}