{"id":27,"date":"2026-06-09T17:30:06","date_gmt":"2026-06-09T17:30:06","guid":{"rendered":"https:\/\/shefahospital.sa\/about\/"},"modified":"2026-06-15T13:38:00","modified_gmt":"2026-06-15T13:38:00","slug":"about","status":"publish","type":"page","link":"https:\/\/shefahospital.sa\/ar\/about\/","title":{"rendered":"About"},"content":{"rendered":"\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500&#038;family=Noto+Kufi+Arabic:wght@400;700&#038;family=Playfair+Display:wght@600;700;800&#038;display=swap\" rel=\"stylesheet\">\n\n<style>\n    \/* SCOPED CSS *\/\n    #shefa-hero-banner {\n        --banner-primary: oklch(62% .08 180);\n        --banner-foreground: oklch(99% .005 170);\n        \n        background-color: var(--banner-primary) !important;\n        \n        \/* Hex Pattern Integration *\/\n        background-image: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='60' height='52' viewBox='0 0 60 52'><path d='M15 1l14 8v16l-14 8L1 25V9zM45 1l14 8v16l-14 8-14-8V9z' fill='none' stroke='%2390c4e8' stroke-opacity='0.22' stroke-width='1'\/><\/svg>\");\n        background-repeat: repeat;\n    }\n\n    \/* FIX: Force white color using !important to prevent WordPress global overrides *\/\n    #shefa-hero-banner .hero-title,\n    #shefa-hero-banner .hero-desc {\n        color: var(--banner-foreground) !important;\n    }\n\n    \/* WP Auto-Paragraph hide specific to this scoped ID *\/\n    #shefa-hero-banner p:empty, \n    #shefa-hero-banner br { \n        display: none !important; \n    }\n<\/style>\n\n<section id=\"shefa-hero-banner\" class=\"py-16 md:py-24 w-full flex items-center shadow-inner relative transition-all duration-300\">\n    <div class=\"container mx-auto px-6 md:px-12 lg:px-24\">\n        \n        <h1 class=\"hero-title text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight mb-4 text-start\">\n            <\/h1>\n        \n        <p class=\"hero-desc text-base md:text-lg lg:text-xl max-w-2xl opacity-90 leading-relaxed text-start\">\n            <\/p>\n        \n    <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    \n    function initHeroBanner() {\n        const bannerSection = document.getElementById('shefa-hero-banner');\n        if (!bannerSection) return;\n\n        const titleEl = bannerSection.querySelector('.hero-title');\n        const descEl = bannerSection.querySelector('.hero-desc');\n\n        \/\/ Translation Dictionary\n        const data = {\n            en: { \n                titleFont: \"'Playfair Display', serif\", \n                bodyFont: \"'Inter', sans-serif\",\n                title: \"About Shefa Hospital\", \n                desc: \"A legacy of compassionate care in the heart of Makkah.\" \n            },\n            ar: { \n                titleFont: \"'Noto Kufi Arabic', sans-serif\", \n                bodyFont: \"'Noto Kufi Arabic', sans-serif\",\n                title: \"\u0639\u0646 \u0645\u0633\u062a\u0634\u0641\u0649 \u0627\u0644\u0634\u0641\u0627\u0621\", \n                desc: \"\u0625\u0631\u062b \u0645\u0646 \u0627\u0644\u0631\u0639\u0627\u064a\u0629 \u0627\u0644\u0631\u062d\u064a\u0645\u0629 \u0641\u064a \u0642\u0644\u0628 \u0645\u0643\u0629 \u0627\u0644\u0645\u0643\u0631\u0645\u0629.\" \n            }\n        };\n\n        \/\/ Lang\/RTL Detection\n        const htmlElement = document.documentElement;\n        const isRtl = htmlElement.dir === 'rtl' || htmlElement.lang.includes('ar');\n        const lang = isRtl ? 'ar' : 'en';\n        const content = data[lang];\n\n        bannerSection.setAttribute('dir', isRtl ? 'rtl' : 'ltr');\n\n        \/\/ Inject Data with font styles\n        if(titleEl) {\n            titleEl.textContent = content.title;\n            titleEl.style.fontFamily = content.titleFont;\n        }\n        \n        if(descEl) {\n            descEl.textContent = content.desc;\n            descEl.style.fontFamily = content.bodyFont;\n        }\n    }\n\n    \/\/ Run on load\n    initHeroBanner();\n\n    \/\/ Observe HTML tag for language changes by TranslatePress\n    const observer = new MutationObserver(initHeroBanner);\n    observer.observe(document.documentElement, { \n        attributes: true, \n        attributeFilter: ['lang', 'dir'] \n    });\n});\n<\/script>\n\n\n\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500&amp;family=Noto+Kufi+Arabic:wght@400;700&amp;family=Playfair+Display:wght@600;700;800&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n    \/* SCOPED CSS *\/\n    #mission-values-section {\n        \/* Light blue background matching the image *\/\n        background-color: #e0f0fa !important;\n        \n        \/* Hex Pattern Integration from your SVG *\/\n        background-image: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='180' height='156' viewBox='0 0 180 156'><g fill='none' stroke='%2390c4e8' stroke-opacity='0.45' stroke-width='1.1'><path d='M45 3l42 24v48l-42 24-42-24V27z'\/><path d='M135 3l42 24v48l-42 24-42-24V27z'\/><path d='M90 81l42 24v48l-42 24-42-24v-48z'\/><\/g><g fill='%2390c4e8' fill-opacity='0.55'><circle cx='45' cy='3' r='2'\/><circle cx='87' cy='27' r='2'\/><circle cx='87' cy='75' r='2'\/><circle cx='45' cy='99' r='2'\/><circle cx='3' cy='75' r='2'\/><circle cx='3' cy='27' r='2'\/><circle cx='135' cy='3' r='2'\/><circle cx='177' cy='27' r='2'\/><circle cx='177' cy='75' r='2'\/><circle cx='135' cy='99' r='2'\/><circle cx='90' cy='81' r='2'\/><circle cx='132' cy='105' r='2'\/><circle cx='132' cy='153' r='2'\/><circle cx='90' cy='177' r='2'\/><circle cx='48' cy='153' r='2'\/><circle cx='48' cy='105' r='2'\/><\/g><\/svg>\");\n        background-repeat: repeat;\n    }\n\n    \/* WP Auto-Paragraph hide specific to this scoped ID *\/\n    #mission-values-section p:empty, \n    #mission-values-section br { \n        display: none !important; \n    }\n\n    \/* Custom color for headers based on the image *\/\n    .theme-heading {\n        color: #558b80 !important; \/* Muted teal\/green *\/\n    }\n    \n    .theme-text {\n        color: #5a6b7c !important; \/* Muted blue\/gray *\/\n    }\n<\/style>\n\n<section id=\"mission-values-section\" class=\"py-20 w-full transition-all duration-300 relative overflow-hidden\">\n    <div class=\"container mx-auto px-6 md:px-12 lg:px-24 grid lg:grid-cols-2 gap-12 items-center\">\n        \n        <div class=\"w-full\">\n            <img decoding=\"async\" src=\"https:\/\/shefahospital.sa\/wp-content\/uploads\/2026\/06\/shefa-hospital-banner.webp\" alt=\"Hospital Interior\" loading=\"lazy\" class=\"w-full h-auto object-cover rounded-[2rem] shadow-xl border-4 border-white\/50\">\n        <\/div>\n        \n        <div class=\"space-y-6 text-start\">\n            \n            <div>\n                <h2 class=\"mission-title theme-heading text-3xl lg:text-4xl font-bold mb-3 tracking-wide\"><\/h2>\n                <p class=\"mission-desc theme-text text-sm md:text-base leading-relaxed max-w-lg\"><\/p>\n            <\/div>\n\n            <div class=\"pt-4\">\n                <h2 class=\"values-title theme-heading text-3xl lg:text-4xl font-bold mb-4 tracking-wide\"><\/h2>\n                <ul class=\"values-list list-disc theme-text space-y-2 text-sm md:text-base rtl:pr-5 ltr:pl-5 marker:text-[#558b80]\">\n                <\/ul>\n            <\/div>\n\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    \n    function initMissionValues() {\n        const section = document.getElementById('mission-values-section');\n        if (!section) return;\n\n        const missionTitleEl = section.querySelector('.mission-title');\n        const missionDescEl = section.querySelector('.mission-desc');\n        const valuesTitleEl = section.querySelector('.values-title');\n        const valuesListEl = section.querySelector('.values-list');\n\n        \/\/ Translation Dictionary\n        const data = {\n            en: { \n                titleFont: \"'Playfair Display', serif\", \n                bodyFont: \"'Inter', sans-serif\",\n                missionTitle: \"Our Mission\", \n                missionDesc: \"We deliver comprehensive, high-quality healthcare to the Makkah community through state-of-the-art technology and a specialist team committed to excellence.\",\n                valuesTitle: \"Our Values\",\n                valuesList: [\n                    \"Clinical excellence\",\n                    \"Patient-centered care\",\n                    \"Innovation and technology\",\n                    \"Integrity and transparency\"\n                ]\n            },\n            ar: { \n                titleFont: \"'Noto Kufi Arabic', sans-serif\", \n                bodyFont: \"'Noto Kufi Arabic', sans-serif\",\n                missionTitle: \"\u0645\u0647\u0645\u062a\u0646\u0627\", \n                missionDesc: \"\u0646\u0642\u062f\u0645 \u0631\u0639\u0627\u064a\u0629 \u0635\u062d\u064a\u0629 \u0634\u0627\u0645\u0644\u0629 \u0648\u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u062c\u0648\u062f\u0629 \u0644\u0645\u062c\u062a\u0645\u0639 \u0645\u0643\u0629 \u0627\u0644\u0645\u0643\u0631\u0645\u0629 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0623\u062d\u062f\u062b \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0648\u0641\u0631\u064a\u0642 \u0645\u062a\u062e\u0635\u0635 \u0645\u0644\u062a\u0632\u0645 \u0628\u0627\u0644\u062a\u0645\u064a\u0632.\",\n                valuesTitle: \"\u0642\u064a\u0645\u0646\u0627\",\n                valuesList: [\n                    \"\u0627\u0644\u062a\u0645\u064a\u0632 \u0627\u0644\u0633\u0631\u064a\u0631\u064a\",\n                    \"\u0631\u0639\u0627\u064a\u0629 \u062a\u062a\u0645\u062d\u0648\u0631 \u062d\u0648\u0644 \u0627\u0644\u0645\u0631\u064a\u0636\",\n                    \"\u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631 \u0648\u0627\u0644\u062a\u0643\u0646\u0648\u0644\u0648\u062c\u064a\u0627\",\n                    \"\u0627\u0644\u0646\u0632\u0627\u0647\u0629 \u0648\u0627\u0644\u0634\u0641\u0627\u0641\u064a\u0629\"\n                ]\n            }\n        };\n\n        \/\/ Lang\/RTL Detection\n        const htmlElement = document.documentElement;\n        const isRtl = htmlElement.dir === 'rtl' || htmlElement.lang.includes('ar');\n        const lang = isRtl ? 'ar' : 'en';\n        const content = data[lang];\n\n        \/\/ Apply RTL\/LTR to the section wrapper\n        section.setAttribute('dir', isRtl ? 'rtl' : 'ltr');\n\n        \/\/ Inject Data with font styles\n        if(missionTitleEl && missionDescEl) {\n            missionTitleEl.textContent = content.missionTitle;\n            missionTitleEl.style.fontFamily = content.titleFont;\n            \n            missionDescEl.textContent = content.missionDesc;\n            missionDescEl.style.fontFamily = content.bodyFont;\n        }\n        \n        if(valuesTitleEl && valuesListEl) {\n            valuesTitleEl.textContent = content.valuesTitle;\n            valuesTitleEl.style.fontFamily = content.titleFont;\n            \n            \/\/ Clear existing list items\n            valuesListEl.innerHTML = '';\n            valuesListEl.style.fontFamily = content.bodyFont;\n            \n            \/\/ Inject translated list items\n            content.valuesList.forEach(itemText => {\n                const li = document.createElement('li');\n                li.textContent = itemText;\n                valuesListEl.appendChild(li);\n            });\n        }\n    }\n\n    \/\/ Run on load\n    initMissionValues();\n\n    \/\/ Observe HTML tag for language changes by TranslatePress or Polylang\n    const observer = new MutationObserver(initMissionValues);\n    observer.observe(document.documentElement, { \n        attributes: true, \n        attributeFilter: ['lang', 'dir'] \n    });\n});\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"boxed","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":"","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-27","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shefahospital.sa\/ar\/wp-json\/wp\/v2\/pages\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shefahospital.sa\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shefahospital.sa\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shefahospital.sa\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shefahospital.sa\/ar\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":1,"href":"https:\/\/shefahospital.sa\/ar\/wp-json\/wp\/v2\/pages\/27\/revisions"}],"predecessor-version":[{"id":132,"href":"https:\/\/shefahospital.sa\/ar\/wp-json\/wp\/v2\/pages\/27\/revisions\/132"}],"wp:attachment":[{"href":"https:\/\/shefahospital.sa\/ar\/wp-json\/wp\/v2\/media?parent=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}