{"id":34,"date":"2025-11-29T11:06:50","date_gmt":"2025-11-29T11:06:50","guid":{"rendered":"https:\/\/sgss.org.sa\/?page_id=34"},"modified":"2026-01-21T23:41:03","modified_gmt":"2026-01-21T23:41:03","slug":"%d8%aa%d9%88%d8%a7%d8%b5%d9%84-%d9%85%d8%b9%d9%86%d8%a7","status":"publish","type":"page","link":"https:\/\/sgss.org.sa\/en\/%d8%aa%d9%88%d8%a7%d8%b5%d9%84-%d9%85%d8%b9%d9%86%d8%a7\/","title":{"rendered":"\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"34\" class=\"elementor elementor-34\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a376f9b e-con-full e-flex e-con e-parent\" data-id=\"a376f9b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a497221 elementor-widget elementor-widget-shortcode\" data-id=\"a497221\" 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        <section class=\"nx-hero-section ltr\">\n            <div class=\"nx-hero-bg\" style=\"background-image: url('https:\/\/sgss.org.sa\/wp-content\/uploads\/2025\/12\/4a6ba50f966fdb76a329e00aeba8149398f5dafe-scaled.webp');\"><\/div>\n            <div class=\"nx-hero-overlay\"><\/div>\n            \n            <div class=\"nx-hero-container\">\n                <div class=\"nx-hero-content\">\n                    <!-- \u062a\u0645 \u0625\u0636\u0627\u0641\u0629 \u0643\u0644\u0627\u0633 \u0644\u062a\u0623\u0643\u064a\u062f \u0627\u0644\u0633\u0637\u0631 \u0627\u0644\u0648\u0627\u062d\u062f -->\n                    <h1 class=\"nx-hero-title\">Contact Us<\/h1>\n                    \n                                    <\/div>\n            <\/div>\n\n            <style>\n                :root {\n                    --nx-hero-font: 'Tajawal', 'Cairo', sans-serif;\n                }\n\n                .nx-hero-section {\n                    position: relative;\n                    width: 100%;\n                    height: 50vh;\n                    min-height: 400px;\n                    max-height: 600px;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                    overflow: hidden;\n                    font-family: var(--nx-hero-font);\n                    direction: ltr;\n                }\n                .nx-hero-section.rtl { direction: rtl; }\n\n                \/* Background & Animation *\/\n                .nx-hero-bg {\n                    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n                    background-size: cover; background-position: center;\n                    animation: nxZoomIn 20s infinite alternate;\n                    z-index: 1;\n                }\n                @keyframes nxZoomIn { from { transform: scale(1); } to { transform: scale(1.1); } }\n\n                .nx-hero-overlay {\n                    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n                    background: linear-gradient(135deg, rgba(93, 58, 117, 0.85) 0%, rgba(60, 141, 127, 0.8) 100%);\n                    z-index: 2;\n                }\n\n                .nx-hero-container {\n                    position: relative; z-index: 3;\n                    width: 100%; max-width: 1200px;\n                    padding: 0 15px; \/* \u062a\u0642\u0644\u064a\u0644 \u0627\u0644\u062d\u0648\u0627\u0641 \u0644\u0625\u0639\u0637\u0627\u0621 \u0645\u0633\u0627\u062d\u0629 \u0644\u0644\u0646\u0635 *\/\n                    text-align: center;\n                }\n\n                .nx-hero-content {\n                    opacity: 0; transform: translateY(30px);\n                    animation: nxFadeUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.3s;\n                }\n\n                \/* =========================================\n                   \u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u0639\u0646\u0648\u0627\u0646 (\u0627\u0644\u0633\u0631 \u0647\u0646\u0627)\n                   ========================================= *\/\n                .nx-hero-title {\n                    color: #ffffff;\n                    font-weight: 900;\n                    margin: 0;\n                    line-height: 1.2;\n                    text-shadow: 0 10px 30px rgba(0,0,0,0.2);\n                    \n                    \/* \u0625\u062c\u0628\u0627\u0631 \u0627\u0644\u0646\u0635 \u0639\u0644\u0649 \u0627\u0644\u0628\u0642\u0627\u0621 \u0641\u064a \u0633\u0637\u0631 \u0648\u0627\u062d\u062f *\/\n                    white-space: nowrap; \n                    \n                    \/* \u062d\u062c\u0645 \u062e\u0637 \u0630\u0643\u064a \u064a\u062a\u063a\u064a\u0631 \u0645\u0639 \u0639\u0631\u0636 \u0627\u0644\u0634\u0627\u0634\u0629 *\/\n                    \/* \u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649 1.5rem\u060c \u0627\u0644\u0645\u0641\u0636\u0644 5vw (\u0646\u0633\u0628\u0629 \u0645\u0646 \u0627\u0644\u0639\u0631\u0636)\u060c \u0627\u0644\u062d\u062f \u0627\u0644\u0623\u0642\u0635\u0649 4rem *\/\n                    font-size: clamp(1.5rem, 5vw, 4rem); \n                }\n\n                .nx-hero-separator {\n                    width: 80px; height: 4px; background: #ffffff;\n                    margin: 20px auto; border-radius: 2px; opacity: 0.8;\n                }\n\n                .nx-hero-subtitle {\n                    color: rgba(255, 255, 255, 0.95);\n                    font-size: clamp(1rem, 2vw, 1.5rem);\n                    font-weight: 500;\n                    margin: 0;\n                    line-height: 1.6;\n                    max-width: 800px;\n                    margin-left: auto; margin-right: auto;\n                }\n\n                @keyframes nxFadeUp { to { opacity: 1; transform: translateY(0); } }\n\n                \/* =========================================\n                   \u062a\u0639\u062f\u064a\u0644\u0627\u062a \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644\n                   ========================================= *\/\n                @media (max-width: 768px) {\n                    .nx-hero-section { min-height: 300px; }\n                    \n                    .nx-hero-title {\n                        \/* \n                         \u0639\u0644\u0649 \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644\u060c \u0646\u0633\u062a\u062e\u062f\u0645 \u062d\u062c\u0645 \u062e\u0637 \u064a\u0639\u062a\u0645\u062f \u0643\u0644\u064a\u0627\u064b \u0639\u0644\u0649 \u0639\u0631\u0636 \u0627\u0644\u0634\u0627\u0634\u0629 \n                         \u0644\u0636\u0645\u0627\u0646 \u0623\u0646 \u062c\u0645\u0644\u0629 \"\u0627\u0644\u0641\u0639\u0627\u0644\u064a\u0627\u062a \u0648\u0627\u0644\u0645\u0624\u062a\u0645\u0631\u0627\u062a\" \u062a\u062f\u062e\u0644 \u0641\u064a \u0633\u0637\u0631 \u0648\u0627\u062d\u062f\n                        *\/\n                        font-size: clamp(1.4rem, 7vw, 2.5rem);\n                        white-space: nowrap; \/* \u062a\u0623\u0643\u064a\u062f \u0639\u062f\u0645 \u0627\u0644\u0646\u0632\u0648\u0644 \u0644\u0633\u0637\u0631 \u062b\u0627\u0646\u064a *\/\n                    }\n\n                    .nx-hero-subtitle { font-size: 1rem; padding: 0 10px; }\n                    .nx-hero-separator { margin: 15px auto; width: 60px; }\n                }\n            <\/style>\n        \n        <\/section>\n\n        <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f1aef7a e-con-full e-flex e-con e-parent\" data-id=\"f1aef7a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cfa2fb5 elementor-widget elementor-widget-shortcode\" data-id=\"cfa2fb5\" 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    <!-- Load Google Fonts -->\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;600;700;800&family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n    <div class=\"nx-contact-pro\" dir=\"ltr\">\n        <div class=\"nx-container\">\n            \n            <!-- FORM CARD -->\n            <div class=\"nx-box nx-form-box\">\n                <h2 class=\"nx-h2\">Send us a Message<\/h2>\n                \n                <form id=\"nx-main-form\">\n                    <input type=\"hidden\" name=\"action\" value=\"nx_submit_contact\">\n                    <input type=\"hidden\" name=\"security\" value=\"eaa4066042\">\n                    <input type=\"text\" name=\"nx_hp_check\" style=\"display:none;\">\n\n                    <div class=\"nx-input-wrap\">\n                        <label>Full Name<\/label>\n                        <input type=\"text\" name=\"nx_name\" required>\n                    <\/div>\n\n                    <div class=\"nx-input-wrap\">\n                        <label>Phone Number<\/label>\n                        <input type=\"tel\" name=\"nx_phone\" dir=\"ltr\" style=\"text-align:left\">\n                    <\/div>\n\n                    <div class=\"nx-input-wrap\">\n                        <label>Email Address<\/label>\n                        <input type=\"email\" name=\"nx_email\" required>\n                    <\/div>\n\n                    <div class=\"nx-input-wrap\">\n                        <label>Message<\/label>\n                        <textarea name=\"nx_message\" rows=\"5\" required><\/textarea>\n                    <\/div>\n\n                    <button type=\"submit\" id=\"nx-submit\" class=\"nx-btn-main\">\n                        <span>Send Message<\/span>\n                    <\/button>\n                    <div id=\"nx-inline-msg\"><\/div>\n                <\/form>\n            <\/div>\n\n            <!-- INFO CARD -->\n            <div class=\"nx-box nx-info-box\">\n                <h2 class=\"nx-h2\">Contact Information<\/h2>\n                <p class=\"nx-p\">Contact us via any of the following channels. We are here to help and answer any questions you have.<\/p>\n\n                <div class=\"nx-list\">\n                    <!-- Phone -->\n                    <div class=\"nx-li\">\n                        <div class=\"nx-ico\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"><\/path><\/svg><\/div>\n                        <div class=\"nx-dat\">\n                            <strong>Phone<\/strong>\n                            <span dir=\"ltr\">+966-12-9652000<\/span>\n                        <\/div>\n                    <\/div>\n                    <!-- Email -->\n                    <div class=\"nx-li\">\n                        <div class=\"nx-ico\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"><\/path><polyline points=\"22,6 12,13 2,6\"><\/polyline><\/svg><\/div>\n                        <div class=\"nx-dat\">\n                            <strong>Email<\/strong>\n                            <span>info@sgss.org.sa<\/span>\n                        <\/div>\n                    <\/div>\n                    <!-- Loc -->\n                    <div class=\"nx-li\">\n                        <div class=\"nx-ico\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg><\/div>\n                        <div class=\"nx-dat\">\n                            <strong>Location<\/strong>\n                            <span>College of Medicine - Student Section<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n        <\/div>\n\n        <!-- POPUP MODAL -->\n        <div id=\"nx-modal\" class=\"nx-modal-overlay\">\n            <div class=\"nx-modal-content\">\n                <div class=\"nx-modal-icon\">\n                    <svg width=\"50\" height=\"50\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#28a745\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path><polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline><\/svg>\n                <\/div>\n                <h3>Sent Successfully!<\/h3>\n                <p>Thank you for contacting us. We received your message and the SGSS team will respond to you shortly.<\/p>\n                <button id=\"nx-close-modal\">Close<\/button>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <style>\n        :root {\n            --nx-c-main: #4b2c74;\n            --nx-c-acc: #f0ebf5;\n            --nx-c-txt: #2d2d2d;\n            --nx-c-gry: #666;\n            --nx-font-ar: 'Cairo', sans-serif;\n            --nx-font-en: 'Poppins', sans-serif;\n        }\n\n        .nx-contact-pro {\n            width: 100%;\n            padding: 50px 0;\n            background: transparent;\n            font-family: var(--nx-font-en);\n        }\n\n        .nx-container {\n            max-width: 1200px;\n            margin: 0 auto;\n            display: flex;\n            gap: 40px;\n            align-items: stretch;\n        }\n\n        .nx-box {\n            flex: 1;\n            background: #fff;\n            border-radius: 24px;\n            padding: 50px;\n            box-shadow: 0 10px 40px rgba(75, 44, 116, 0.06);\n            border: 1px solid #f5f5f5;\n        }\n\n        .nx-h2 {\n            font-size: 28px;\n            font-weight: 800;\n            color: var(--nx-c-txt);\n            margin: 0 0 30px 0;\n        }\n        .nx-p {\n            font-size: 16px;\n            line-height: 1.7;\n            color: var(--nx-c-gry);\n            margin-bottom: 40px;\n        }\n\n        \/* Form Styling *\/\n        .nx-input-wrap { margin-bottom: 25px; }\n        .nx-input-wrap label {\n            display: block;\n            margin-bottom: 10px;\n            font-weight: 700;\n            font-size: 15px;\n            color: #444;\n        }\n        .nx-input-wrap input, .nx-input-wrap textarea {\n            width: 100%;\n            padding: 18px;\n            border: 1px solid #e1e1e1;\n            border-radius: 12px;\n            font-size: 16px;\n            font-family: inherit;\n            transition: all 0.3s ease;\n            background: #fdfdfd;\n        }\n        .nx-input-wrap input:focus, .nx-input-wrap textarea:focus {\n            border-color: var(--nx-c-main);\n            background: #fff;\n            box-shadow: 0 0 0 4px rgba(75, 44, 116, 0.1);\n            outline: none;\n        }\n\n        .nx-btn-main {\n            width: 100%;\n            padding: 18px;\n            background: var(--nx-c-main);\n            color: #fff;\n            border: none;\n            border-radius: 12px;\n            font-size: 18px;\n            font-weight: 700;\n            cursor: pointer;\n            transition: 0.3s;\n            font-family: inherit;\n        }\n        .nx-btn-main:hover {\n            background: #3a225b;\n            transform: translateY(-2px);\n            box-shadow: 0 10px 20px rgba(75, 44, 116, 0.2);\n        }\n        .nx-btn-main:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }\n\n        \/* Info List *\/\n        .nx-li {\n            display: flex;\n            align-items: center;\n            gap: 20px;\n            margin-bottom: 35px;\n            padding-bottom: 20px;\n            border-bottom: 1px solid #fafafa;\n        }\n        .nx-li:last-child { border: none; margin: 0; }\n        \n        .nx-ico {\n            width: 55px;\n            height: 55px;\n            background: var(--nx-c-acc);\n            color: var(--nx-c-main);\n            border-radius: 16px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n        }\n        .nx-dat { display: flex; flex-direction: column; gap: 5px; }\n        .nx-dat strong { font-size: 18px; color: #333; }\n        .nx-dat span { font-size: 15px; color: #777; }\n\n        \/* Modal Popup *\/\n        .nx-modal-overlay {\n            position: fixed;\n            top: 0; left: 0;\n            width: 100%; height: 100%;\n            background: rgba(0,0,0,0.5);\n            backdrop-filter: blur(5px);\n            z-index: 9999;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            opacity: 0;\n            visibility: hidden;\n            transition: all 0.3s ease;\n        }\n        .nx-modal-overlay.active { opacity: 1; visibility: visible; }\n        \n        .nx-modal-content {\n            background: #fff;\n            padding: 40px;\n            border-radius: 20px;\n            max-width: 500px;\n            width: 90%;\n            text-align: center;\n            transform: scale(0.9);\n            transition: 0.3s;\n            box-shadow: 0 20px 60px rgba(0,0,0,0.2);\n        }\n        .nx-modal-overlay.active .nx-modal-content { transform: scale(1); }\n\n        .nx-modal-icon {\n            width: 80px; height: 80px;\n            background: #e8f5e9;\n            border-radius: 50%;\n            margin: 0 auto 20px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n        .nx-modal-content h3 { font-size: 24px; margin: 0 0 10px; color: #333; }\n        .nx-modal-content p { font-size: 16px; color: #666; line-height: 1.6; margin-bottom: 30px; }\n        .nx-modal-content button {\n            background: var(--nx-c-main);\n            color: #fff;\n            border: none;\n            padding: 12px 30px;\n            border-radius: 8px;\n            font-size: 16px;\n            cursor: pointer;\n            font-family: inherit;\n        }\n\n        #nx-inline-msg { margin-top: 15px; color: red; font-size: 14px; display: none; text-align: center; }\n\n        @media (max-width: 900px) {\n            .nx-container { flex-direction: column; }\n            .nx-info-box { order: 1; }\n            .nx-form-box { order: 2; }\n            .nx-box { padding: 30px 20px; }\n        }\n    <\/style>\n\n    <script>\n    document.addEventListener('DOMContentLoaded', function(){\n        const f = document.getElementById('nx-main-form');\n        const b = document.getElementById('nx-submit');\n        const m = document.getElementById('nx-inline-msg');\n        const modal = document.getElementById('nx-modal');\n        const close = document.getElementById('nx-close-modal');\n\n        \/\/ Close Modal\n        close.addEventListener('click', function(){\n            modal.classList.remove('active');\n        });\n\n        if(f){\n            f.addEventListener('submit', function(e){\n                e.preventDefault();\n                b.disabled = true;\n                b.style.opacity = '0.7';\n                m.style.display = 'none';\n                \n                const fd = new FormData(f);\n                fetch('https:\/\/sgss.org.sa\/wp-admin\/admin-ajax.php', {\n                    method: 'POST',\n                    body: fd\n                })\n                .then(r => r.json())\n                .then(d => {\n                    b.disabled = false;\n                    b.style.opacity = '1';\n                    \n                    if(d.success) {\n                        f.reset();\n                        modal.classList.add('active'); \/\/ Show Popup\n                    } else {\n                        m.innerText = d.data.message;\n                        m.style.display = 'block';\n                    }\n                })\n                .catch(() => {\n                    b.disabled = false;\n                    b.style.opacity = '1';\n                    m.innerText = 'Connection Error';\n                    m.style.display = 'block';\n                });\n            });\n        }\n    });\n    <\/script>\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f692fbc e-flex e-con-boxed e-con e-parent\" data-id=\"f692fbc\" 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-6890c49 elementor-widget elementor-widget-heading\" data-id=\"6890c49\" 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\">\u0645\u0648\u0642\u0639\u0646\u0627<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6e4b889 elementor-widget elementor-widget-google_maps\" data-id=\"6e4b889\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"google_maps.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-custom-embed\">\n\t\t\t<iframe loading=\"lazy\"\n\t\t\t\t\tsrc=\"https:\/\/maps.google.com\/maps?q=%D9%85%D9%83%D8%A9&#038;t=m&#038;z=10&#038;output=embed&#038;iwloc=near\"\n\t\t\t\t\ttitle=\"\u0645\u0643\u0629\"\n\t\t\t\t\taria-label=\"\u0645\u0643\u0629\"\n\t\t\t><\/iframe>\n\t\t<\/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<div class=\"elementor-element elementor-element-5899e2b e-flex e-con-boxed e-con e-parent\" data-id=\"5899e2b\" 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-45cb12f elementor-widget elementor-widget-shortcode\" data-id=\"45cb12f\" 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\">    <style>\r\n        .sgss-newsletter-wrapper {\r\n            padding: 80px 20px;\r\n            direction: ltr;\r\n            font-family: 'Inter', sans-serif;\r\n            background: transparent;\r\n            text-align: center;\r\n        }\r\n\r\n        .sgss-newsletter-content {\r\n            max-width: 800px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .sgss-newsletter-title {\r\n            font-size: 36px;\r\n            font-weight: 800;\r\n            color: #111;\r\n            margin-bottom: 15px;\r\n            background: linear-gradient(90deg, #333, #666);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n        }\r\n\r\n        .sgss-newsletter-subtitle {\r\n            font-size: 18px;\r\n            color: #666;\r\n            margin-bottom: 40px;\r\n            line-height: 1.6;\r\n        }\r\n\r\n        .sgss-newsletter-form {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 15px;\r\n            max-width: 600px;\r\n            margin: 0 auto;\r\n            position: relative;\r\n        }\r\n\r\n        .sgss-newsletter-input-group {\r\n            flex-grow: 1;\r\n            position: relative;\r\n        }\r\n\r\n        .sgss-newsletter-input {\r\n            width: 100%;\r\n            padding: 16px 25px;\r\n            border-radius: 12px;\r\n            border: 1px solid #e0e0e0;\r\n            background: #fff;\r\n            font-size: 16px;\r\n            outline: none;\r\n            transition: border-color 0.3s, box-shadow 0.3s;\r\n            text-align: left;\r\n            box-shadow: 0 4px 15px rgba(0,0,0,0.03);\r\n        }\r\n\r\n        .sgss-newsletter-input:focus {\r\n            border-color: #502e6d;\r\n            box-shadow: 0 4px 20px rgba(80, 46, 109, 0.1);\r\n        }\r\n\r\n        .sgss-newsletter-btn {\r\n            background: #502e6d;\r\n            color: #fff;\r\n            padding: 16px 40px;\r\n            border-radius: 12px;\r\n            border: none;\r\n            font-weight: 700;\r\n            font-size: 16px;\r\n            cursor: pointer;\r\n            transition: all 0.3s;\r\n            white-space: nowrap;\r\n            box-shadow: 0 4px 15px rgba(80, 46, 109, 0.2);\r\n        }\r\n\r\n        .sgss-newsletter-btn:hover {\r\n            background: #3b1e55;\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 6px 20px rgba(80, 46, 109, 0.3);\r\n        }\r\n\r\n        .sgss-newsletter-btn:disabled {\r\n            background: #ccc;\r\n            cursor: not-allowed;\r\n            transform: none;\r\n            box-shadow: none;\r\n        }\r\n\r\n        .sgss-newsletter-msg {\r\n            margin-top: 20px;\r\n            font-weight: 600;\r\n            display: none;\r\n        }\r\n\r\n        @media (max-width: 600px) {\r\n            .sgss-newsletter-form {\r\n                flex-direction: column;\r\n            }\r\n            .sgss-newsletter-btn {\r\n                width: 100%;\r\n            }\r\n            .sgss-newsletter-title {\r\n                font-size: 28px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"sgss-newsletter-wrapper\" id=\"sgss-newsletter\">\r\n        <div class=\"sgss-newsletter-content\">\r\n            <h2 class=\"sgss-newsletter-title\">Be one of the first participants!<\/h2>\r\n            <p class=\"sgss-newsletter-subtitle\">Subscribe to our newsletter to receive updates on upcoming events.<\/p>\r\n\r\n            <form class=\"sgss-newsletter-form\" id=\"sgss-newsletter-form\">\r\n                <div class=\"sgss-newsletter-input-group\">\r\n                    <input type=\"email\" name=\"email\" class=\"sgss-newsletter-input\" \r\n                           placeholder=\"Electronic Email\" required>\r\n                <\/div>\r\n                <button type=\"submit\" class=\"sgss-newsletter-btn\">Subscribe<\/button>\r\n            <\/form>\r\n            <div class=\"sgss-newsletter-msg\" id=\"sgss-newsletter-msg\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n    jQuery(document).ready(function($){\r\n        $('#sgss-newsletter-form').on('submit', function(e){\r\n            e.preventDefault();\r\n            var $form = $(this);\r\n            var $btn = $form.find('button');\r\n            var $msg = $('#sgss-newsletter-msg');\r\n            var email = $form.find('input[name=\"email\"]').val();\r\n\r\n            $btn.prop('disabled', true);\r\n            $msg.fadeOut().removeClass('error success');\r\n\r\n            $.post('https:\/\/sgss.org.sa\/wp-admin\/admin-ajax.php', {\r\n                action: 'sgss_subscribe_newsletter',\r\n                email: email\r\n            }, function(res){\r\n                if(res.success) {\r\n                    $msg.addClass('success').text('Thank you for subscribing!').fadeIn();\r\n                    $form.fadeOut();\r\n                    $msg.css('color', '#10B981');\r\n                } else {\r\n                    $msg.addClass('error').text(res.data || 'Invalid email or already subscribed.').fadeIn();\r\n                    $msg.css('color', '#EF4444');\r\n                    $btn.prop('disabled', false);\r\n                }\r\n            });\r\n        });\r\n    });\r\n    <\/script>\r\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>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Location<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-34","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/sgss.org.sa\/en\/wp-json\/wp\/v2\/pages\/34","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sgss.org.sa\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sgss.org.sa\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sgss.org.sa\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sgss.org.sa\/en\/wp-json\/wp\/v2\/comments?post=34"}],"version-history":[{"count":34,"href":"https:\/\/sgss.org.sa\/en\/wp-json\/wp\/v2\/pages\/34\/revisions"}],"predecessor-version":[{"id":1256,"href":"https:\/\/sgss.org.sa\/en\/wp-json\/wp\/v2\/pages\/34\/revisions\/1256"}],"wp:attachment":[{"href":"https:\/\/sgss.org.sa\/en\/wp-json\/wp\/v2\/media?parent=34"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}