{"id":2965,"date":"2026-06-01T11:15:41","date_gmt":"2026-06-01T11:15:41","guid":{"rendered":"https:\/\/technical.com.sa\/?page_id=2965"},"modified":"2026-06-02T12:31:50","modified_gmt":"2026-06-02T12:31:50","slug":"s","status":"publish","type":"page","link":"https:\/\/technical.com.sa\/index.php\/s\/","title":{"rendered":"S"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Our Services - Mind Map<\/title>\r\n <style>\r\n \/* \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0639\u0627\u0645\u0629 \u0648\u0627\u0644\u062e\u0637\u0648\u0637 *\/\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n }\r\n\r\n body {\r\n background: #ffff;\r\n min-height: 100vh;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n overflow-x: hidden;\r\n padding: 20px;\r\n }\r\n\r\n \/* \u0627\u0644\u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 \u0644\u0644\u062e\u0631\u064a\u0637\u0629 \u0627\u0644\u0630\u0647\u0646\u064a\u0629 *\/\r\n .mindmap-container {\r\n position: relative;\r\n display: grid;\r\n grid-template-columns: 280px 300px 280px;\r\n grid-template-rows: auto auto;\r\n gap: 40px 0;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n max-width: 1000px;\r\n }\r\n\r\n \/* \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0643\u0631\u0648\u062a (\u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a \u0627\u0644\u062c\u0627\u0646\u0628\u064a\u0629) *\/\r\n .card {\r\n color: white;\r\n padding: 25px 20px;\r\n border-radius: 20px;\r\n font-size: 1.15rem;\r\n font-weight: 600;\r\n text-align: center;\r\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);\r\n min-height: 120px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n line-height: 1.4;\r\n position: relative;\r\n z-index: 2;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .card:hover {\r\n transform: translateY(-5px);\r\n }\r\n\r\n \/* \u062a\u0648\u0632\u064a\u0639 \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0639\u0644\u0649 \u0627\u0644\u0643\u0631\u0648\u062a \u062d\u0633\u0628 \u0635\u0648\u0631\u062a\u0643 *\/\r\n .card.orange-light {\r\n background: linear-gradient(135deg, #e05c43 0%, #c4472f 100%);\r\n }\r\n\r\n .card.purple-light {\r\n background: linear-gradient(135deg, #873cb0 0%, #68268e 100%);\r\n }\r\n\r\n .card.purple-dark {\r\n background: linear-gradient(135deg, #7432a0 0%, #541d7a 100%);\r\n }\r\n\r\n .card.orange-dark {\r\n background: linear-gradient(135deg, #df5234 0%, #be3b1f 100%);\r\n }\r\n\r\n \/* \u0627\u0644\u062f\u0627\u0626\u0631\u0629 \u0627\u0644\u0645\u0631\u0643\u0632\u064a\u0629 *\/\r\n .center-circle {\r\n grid-column: 2;\r\n grid-row: 1 \/ span 2;\r\n justify-self: center;\r\n width: 200px;\r\n height: 200px;\r\n background: linear-gradient(135deg, #bf465b 0%, #7e3371 50%, #46256c 100%);\r\n border-radius: 50%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n color: white;\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n box-shadow: 0 0 40px rgba(191, 70, 91, 0.4), 0 15px 30px rgba(0,0,0,0.4);\r\n border: 2px solid rgba(255, 255, 255, 0.1);\r\n text-align: center;\r\n padding: 20px;\r\n position: relative;\r\n z-index: 3;\r\n }\r\n\r\n \/* -----------------------------------------\r\n \u062a\u0648\u062d\u064a\u062f \u0627\u0644\u0623\u0633\u0647\u0645 \u0648\u0627\u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u0631\u0627\u0628\u0637\u0629 (CSS Pseudo-elements)\r\n -------------------------------------------- *\/\r\n \r\n \/* \u062a\u0645\u062f\u064a\u062f \u0627\u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u0634\u062a\u0631\u0643\u0629 \u0644\u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0633\u0647\u0645 *\/\r\n .card::before {\r\n content: '';\r\n position: absolute;\r\n height: 4px;\r\n background: linear-gradient(90deg, #7a82cc, #9299e2);\r\n box-shadow: 0 0 8px rgba(146, 153, 226, 0.6);\r\n z-index: 1;\r\n width: 75px; \/* \u0637\u0648\u0644 \u0627\u0644\u0633\u0647\u0645 \u0627\u0644\u0631\u0627\u0628\u0637 *\/\r\n }\r\n\r\n \/* \u0643\u0631\u0648\u062a \u0627\u0644\u062c\u0647\u0629 \u0627\u0644\u064a\u0633\u0631\u0649 (\u0627\u0644\u0623\u0633\u0647\u0645 \u062a\u062e\u0631\u062c \u0645\u0646 \u0627\u0644\u064a\u0645\u064a\u0646 \u0628\u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0645\u0631\u0643\u0632) *\/\r\n .left-side::before {\r\n right: -75px;\r\n }\r\n \/* \u0643\u0631\u0648\u062a \u0627\u0644\u062c\u0647\u0629 \u0627\u0644\u064a\u0645\u0646\u0649 (\u0627\u0644\u0623\u0633\u0647\u0645 \u062a\u062e\u0631\u062c \u0645\u0646 \u0627\u0644\u064a\u0633\u0627\u0631 \u0628\u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0645\u0631\u0643\u0632) *\/\r\n .right-side::before {\r\n left: -75px;\r\n }\r\n\r\n \/* \u0648\u0632\u0648\u0627\u064a\u0627 \u0645\u064a\u0644\u0627\u0646 \u0627\u0644\u0623\u0633\u0647\u0645 \u0644\u062a\u0644\u062a\u0642\u064a \u0641\u064a \u0645\u0646\u062a\u0635\u0641 \u0627\u0644\u062f\u0627\u0626\u0631\u0629 \u062a\u0645\u0627\u0645\u0627\u064b *\/\r\n .top-left::before {\r\n top: 70%;\r\n transform: rotate(25deg);\r\n transform-origin: left center;\r\n }\r\n\r\n .bottom-left::before {\r\n bottom: 70%;\r\n transform: rotate(-25deg);\r\n transform-origin: left center;\r\n }\r\n\r\n .top-right::before {\r\n top: 70%;\r\n transform: rotate(-25deg);\r\n transform-origin: right center;\r\n }\r\n\r\n .bottom-right::before {\r\n bottom: 70%;\r\n transform: rotate(25deg);\r\n transform-origin: right center;\r\n }\r\n\r\n \/* \u0636\u0628\u0637 \u0627\u0644\u062a\u062c\u0627\u0648\u0628 \u0644\u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0635\u063a\u064a\u0631\u0629 (Mobile Responsive) *\/\r\n @media (max-width: 850px) {\r\n .mindmap-container {\r\n grid-template-columns: 1fr;\r\n grid-template-rows: repeat(5, auto);\r\n gap: 30px;\r\n padding: 20px;\r\n }\r\n .center-circle {\r\n grid-column: 1;\r\n grid-row: 1;\r\n }\r\n .card {\r\n grid-column: 1 !important;\r\n }\r\n \/* \u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u0623\u0633\u0647\u0645 \u0627\u0644\u0645\u0627\u0626\u0644\u0629 \u0641\u064a \u0627\u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0635\u063a\u064a\u0631\u0629 \u0644\u062a\u062c\u0646\u0628 \u0627\u0644\u062a\u062f\u0627\u062e\u0644 *\/\r\n .card::before {\r\n display: none;\r\n }\r\n }\r\n \/* \u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0632\u0631 *\/\r\n.button-container {\r\n text-align: center;\r\n margin-top: 60px; \/* \u0645\u0633\u0627\u0641\u0629 \u0628\u064a\u0646 \u0627\u0644\u0640 Mind Map \u0648\u0627\u0644\u0632\u0631 *\/\r\n \r\n \r\n}\r\n\r\n\/* \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0632\u0631 *\/\r\n.butn {\r\n display: inline-block;\r\n padding: 16px 50px;\r\n background: linear-gradient(135deg, #6b21a8, #9f46d6);\r\n color: white;\r\n font-size: 1.2rem;\r\n font-weight: 600;\r\n text-decoration: none;\r\n border-radius: 50px;\r\n box-shadow: 0 10px 25px rgba(107, 33, 168, 0.4);\r\n transition: all 0.3s ease;\r\n\r\n margin-right:50px;\r\n}\r\n\r\n.butn:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 15px 30px rgba(107, 33, 168, 0.5);\r\n}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"mindmap-container\">\r\n \r\n <div class=\"card orange-light left-side top-left\">\r\n On the job training\r\n <\/div>\r\n \r\n <div class=\"card purple-light left-side bottom-left\" style=\"grid-row: 2;\">\r\n Strengthen the saudization programs\r\n <\/div>\r\n\r\n <div class=\"center-circle\">\r\n Our Services\r\n <\/div>\r\n\r\n <div class=\"card purple-dark right-side top-right\">\r\n Internationally Programs\r\n <\/div>\r\n \r\n <div class=\"card orange-dark right-side bottom-right\" style=\"grid-row: 2;\">\r\n Contribute to creating job opportunities\r\n <\/div>\r\n\r\n <\/div>\r\n <div class=\"button-container\">\r\n <a href=\"https:\/\/technical.com.sa\/index.php\/contact\/\" class=\"butn\">Contact<\/a>\r\n <\/div>\r\n\r\n<\/div>\r\n \r\n \r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our Services – Mind Map On the job training Strengthen the … <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2965","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/technical.com.sa\/index.php\/wp-json\/wp\/v2\/pages\/2965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/technical.com.sa\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/technical.com.sa\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/technical.com.sa\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/technical.com.sa\/index.php\/wp-json\/wp\/v2\/comments?post=2965"}],"version-history":[{"count":42,"href":"https:\/\/technical.com.sa\/index.php\/wp-json\/wp\/v2\/pages\/2965\/revisions"}],"predecessor-version":[{"id":3029,"href":"https:\/\/technical.com.sa\/index.php\/wp-json\/wp\/v2\/pages\/2965\/revisions\/3029"}],"wp:attachment":[{"href":"https:\/\/technical.com.sa\/index.php\/wp-json\/wp\/v2\/media?parent=2965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}