{"id":37,"date":"2026-04-30T07:44:47","date_gmt":"2026-04-30T07:44:47","guid":{"rendered":"https:\/\/digitalhunar.pk\/contact\/"},"modified":"2026-10-02T18:03:09","modified_gmt":"2026-10-02T18:03:09","slug":"contact-us","status":"publish","type":"page","link":"https:\/\/digitalhunar.pk\/ur\/contact-us\/","title":{"rendered":"Contact"},"content":{"rendered":"<!-- Premium Fonts & Icons -->\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n    <style>\n        \/* ==================================================\n           STRICT GLOBAL SETTINGS (PURE 100% WIDTH)\n        ================================================== *\/\n        :root {\n            --dh-primary: #071D95;\n            --dh-primary-dark: #041261;\n            --dh-primary-light: #eff2ff;\n            --dh-accent: #E7611C;\n            --dh-accent-hover: #c95114;\n            --dh-text-dark: #0f172a;\n            --dh-text-muted: #475569;\n            --dh-bg-gray: #f8fafc;\n            --dh-white: #ffffff;\n            --dh-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n        }\n\n        .dh-contact-wrapper {\n            font-family: 'Plus Jakarta Sans', sans-serif;\n            color: var(--dh-text-dark);\n            background-color: var(--dh-white);\n            width: 100% !important;\n            max-width: 100% !important; \n            position: relative;\n            box-sizing: border-box;\n            display: block;\n            margin: 0 !important;\n            padding: 0 !important;\n        }\n\n        .dh-contact-wrapper *, .dh-contact-wrapper *::before, .dh-contact-wrapper *::after {\n            box-sizing: border-box !important;\n            margin: 0;\n            padding: 0;\n        }\n\n        .dh-container {\n            max-width: 1280px;\n            margin: 0 auto;\n            padding: 0 24px;\n            width: 100%;\n        }\n\n        .dh-reveal {\n            opacity: 0;\n            transform: translateY(30px);\n            transition: 0.8s cubic-bezier(0.16, 1, 0.3, 1);\n        }\n        .dh-reveal.active {\n            opacity: 1;\n            transform: translateY(0);\n        }\n\n        \/* ==================================================\n           HERO BANNER\n        ================================================== *\/\n        .dh-contact-hero {\n            background: radial-gradient(circle at right center, #0a25b3 0%, var(--dh-primary-dark) 100%);\n            padding: 120px 0 160px;\n            position: relative;\n            color: var(--dh-white);\n            text-align: center;\n            width: 100%;\n        }\n\n        .dh-orb { position: absolute; border-radius: 50%; filter: blur(75px); opacity: 0.3; pointer-events: none; z-index: 1;}\n        .dh-orb-1 { width: 350px; height: 350px; background: var(--dh-accent); top: -50px; left: 0; }\n        .dh-orb-2 { width: 250px; height: 250px; background: #3b82f6; bottom: 0; right: 0; }\n\n        .dh-hero-content { position: relative; z-index: 10; max-width: 800px; margin: 0 auto; }\n        .dh-hero-content h1 { font-size: 54px; font-weight: 800; line-height: 1.2; margin-bottom: 20px; letter-spacing: -1px; }\n        .dh-hero-content p { font-size: 18px; color: #cbd5e1; line-height: 1.6; }\n\n        \/* ==================================================\n           CONTACT INFO CARDS (Overlapping)\n        ================================================== *\/\n        .dh-info-section {\n            position: relative;\n            margin-top: -80px; \n            z-index: 30;\n            padding: 0 24px; \n            width: 100%;\n        }\n        \n        .dh-info-grid {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 24px;\n            max-width: 1100px;\n            margin: 0 auto;\n        }\n\n        .dh-info-card {\n            background: rgba(255, 255, 255, 0.95);\n            backdrop-filter: blur(20px);\n            border: 1px solid rgba(0,0,0,0.06);\n            border-radius: 20px;\n            padding: 40px 30px;\n            box-shadow: 0 20px 45px rgba(7, 29, 149, 0.08);\n            text-align: center;\n            transition: var(--dh-transition);\n        }\n\n        .dh-info-card:hover {\n            transform: translateY(-8px);\n            box-shadow: 0 25px 50px rgba(7, 29, 149, 0.12);\n            border-bottom: 4px solid var(--dh-accent);\n        }\n\n        .dh-info-icon {\n            width: 70px; height: 70px; border-radius: 50%;\n            background: var(--dh-primary-light); color: var(--dh-primary);\n            display: flex; align-items: center; justify-content: center;\n            font-size: 28px; margin: 0 auto 20px;\n            transition: var(--dh-transition);\n        }\n        .dh-info-card:hover .dh-info-icon { background: var(--dh-primary); color: var(--dh-white); }\n        .dh-info-card h3 { font-size: 20px; font-weight: 800; color: var(--dh-text-dark); margin-bottom: 10px; }\n        .dh-info-card p { font-size: 15px; color: var(--dh-text-muted); line-height: 1.6; margin: 0;}\n        .dh-info-card a { color: var(--dh-primary); text-decoration: none; font-weight: 700; transition: var(--dh-transition); }\n        .dh-info-card a:hover { color: var(--dh-accent); }\n\n        \/* ==================================================\n           CONTACT FORM SECTION\n        ================================================== *\/\n        .dh-form-section {\n            padding: 100px 0;\n            background: var(--dh-bg-gray);\n            width: 100%;\n        }\n\n        .dh-form-grid {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 60px;\n            align-items: center;\n        }\n\n        .dh-form-text h2 {\n            font-size: 42px;\n            font-weight: 800;\n            color: var(--dh-primary);\n            margin-bottom: 20px;\n            letter-spacing: -1px;\n            line-height: 1.2;\n        }\n        .dh-form-text p { font-size: 16px; color: var(--dh-text-muted); line-height: 1.7; margin-bottom: 30px; }\n\n        .dh-form-wrapper {\n            background: var(--dh-white);\n            padding: 45px;\n            border-radius: 20px;\n            box-shadow: 0 15px 40px rgba(0,0,0,0.04);\n            border: 1px solid #e2e8f0;\n        }\n\n        .dh-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }\n        .dh-form-group { margin-bottom: 20px; }\n        \n        .dh-form-group label {\n            display: block;\n            font-size: 14px;\n            font-weight: 700;\n            color: var(--dh-text-dark);\n            margin-bottom: 8px;\n        }\n\n        .dh-input {\n            width: 100%;\n            padding: 15px 20px;\n            border: 1px solid #cbd5e1;\n            border-radius: 10px;\n            font-size: 15px;\n            font-family: inherit;\n            color: var(--dh-text-dark);\n            background: #f8fafc;\n            transition: var(--dh-transition);\n            outline: none;\n        }\n\n        .dh-input:focus {\n            border-color: var(--dh-primary);\n            background: var(--dh-white);\n            box-shadow: 0 0 0 4px rgba(7, 29, 149, 0.1);\n        }\n\n        textarea.dh-input { height: 150px; resize: vertical; }\n\n        .dh-submit-btn {\n            width: 100%;\n            padding: 16px;\n            background: var(--dh-accent);\n            color: var(--dh-white);\n            border: none;\n            border-radius: 10px;\n            font-size: 16px;\n            font-weight: 800;\n            cursor: pointer;\n            transition: var(--dh-transition);\n            box-shadow: 0 8px 20px rgba(231, 97, 28, 0.3);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 10px;\n        }\n\n        .dh-submit-btn:hover {\n            background: var(--dh-primary);\n            box-shadow: 0 10px 25px rgba(7, 29, 149, 0.3);\n        }\n\n        \/* Form Messages *\/\n        .dh-form-msg { display: none; padding: 15px; border-radius: 8px; margin-bottom: 20px; font-weight: 600; font-size: 14px; text-align: center;}\n        .dh-msg-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; display: block;}\n        .dh-msg-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; display: block;}\n\n        \/* Loader *\/\n        .dh-loader { display: none; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; }\n        @keyframes spin { to { transform: rotate(360deg); } }\n\n        \/* ==================================================\n           RESPONSIVE DESIGN \n        ================================================== *\/\n        @media(max-width: 1024px) {\n            .dh-info-grid { gap: 15px; }\n            .dh-form-grid { gap: 40px; }\n            .dh-hero-content h1 { font-size: 46px; }\n        }\n\n        @media(max-width: 768px) {\n            .dh-contact-hero { padding: 90px 0 110px; }\n            .dh-hero-content h1 { font-size: 38px; }\n            \n            .dh-info-section { margin-top: -40px; }\n            .dh-info-grid { grid-template-columns: 1fr; gap: 20px; }\n            \n            .dh-form-grid { grid-template-columns: 1fr; }\n            .dh-form-row { grid-template-columns: 1fr; gap: 0; }\n            .dh-form-wrapper { padding: 30px 20px; }\n            .dh-form-text { text-align: center; }\n        }\n    <\/style>\n\n    <div class=\"dh-contact-wrapper\">\n\n        <!-- HERO BANNER -->\n        <section class=\"dh-contact-hero\">\n            <div class=\"dh-orb dh-orb-1\"><\/div>\n            <div class=\"dh-orb dh-orb-2\"><\/div>\n            <div class=\"dh-container dh-reveal\">\n                <div class=\"dh-hero-content\">\n                    <h1>Get In Touch With <span>Us<\/span><\/h1>\n                    <p>Have questions about our courses? Need technical support? Or just want to say hi? Drop us a message and our premium support team will get back to you.<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- INFO CARDS -->\n        <div class=\"dh-info-section dh-reveal\">\n            <div class=\"dh-info-grid\">\n                <div class=\"dh-info-card\">\n                    <div class=\"dh-info-icon\"><i class=\"fa-solid fa-location-dot\"><\/i><\/div>\n                    <h3>Visit Us<\/h3>\n                    <p>Hafizabad<br>Punjab, Pakistan<\/p>\n                <\/div>\n                <div class=\"dh-info-card\">\n                    <div class=\"dh-info-icon\"><i class=\"fa-solid fa-phone\"><\/i><\/div>\n                    <h3>Call \/ WhatsApp<\/h3>\n                    <p><a href=\"tel:+923256451881\">+92 3256451881<\/a><br>Mon-Fri, 9am to 6pm<\/p>\n                <\/div>\n                <div class=\"dh-info-card\">\n                    <div class=\"dh-info-icon\"><i class=\"fa-solid fa-envelope\"><\/i><\/div>\n                    <h3>Email Us<\/h3>\n                    <p><a href=\"mailto:info@digitalhunar.pk\">info@digitalhunar.pk<\/a><br>24\/7 Online Support<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- CONTACT FORM SECTION -->\n        <section class=\"dh-form-section\">\n            <div class=\"dh-container dh-form-grid\">\n                <div class=\"dh-form-text dh-reveal\">\n                    <h2>Send Us a Message<\/h2>\n                    <p>We pride ourselves on lightning-fast responses. Fill out the form with your details and query, and our mentors or technical team will assist you within 24 hours.<\/p>\n                    <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/7688336\/pexels-photo-7688336.jpeg?auto=compress&cs=tinysrgb&w=600\" alt=\"Customer Support\" style=\"width:100%; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,0.1);\">\n                <\/div>\n\n                <div class=\"dh-form-wrapper dh-reveal\">\n                    <!-- Placeholder for Messages -->\n                    <div id=\"dh-response-msg\" class=\"dh-form-msg\"><\/div>\n\n                    <form id=\"dh-contact-form\" action=\"\">\n                        <!-- Security Nonce -->\n                        <input type=\"hidden\" name=\"action\" value=\"dh_submit_contact_form\">\n                        <input type=\"hidden\" name=\"dh_nonce\" value=\"9cea39c7a7\">\n\n                        <div class=\"dh-form-row\">\n                            <div class=\"dh-form-group\">\n                                <label for=\"dh_name\">Full Name *<\/label>\n                                <input type=\"text\" id=\"dh_name\" name=\"dh_name\" class=\"dh-input\" placeholder=\"e.g. Ali Raza\" required>\n                            <\/div>\n                            <div class=\"dh-form-group\">\n                                <label for=\"dh_email\">Email Address *<\/label>\n                                <input type=\"email\" id=\"dh_email\" name=\"dh_email\" class=\"dh-input\" placeholder=\"you@example.com\" required>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"dh-form-group\">\n                            <label for=\"dh_phone\">WhatsApp \/ Phone Number<\/label>\n                            <input type=\"text\" id=\"dh_phone\" name=\"dh_phone\" class=\"dh-input\" placeholder=\"+92 300 0000000\">\n                        <\/div>\n\n                        <div class=\"dh-form-group\">\n                            <label for=\"dh_message\">Your Message *<\/label>\n                            <textarea id=\"dh_message\" name=\"dh_message\" class=\"dh-input\" placeholder=\"How can we help you?\" required><\/textarea>\n                        <\/div>\n\n                        <button type=\"submit\" id=\"dh_submit_btn\" class=\"dh-submit-btn\">\n                            <span class=\"dh-btn-text\">Send Message <i class=\"fa-solid fa-paper-plane\" style=\"margin-left:5px;\"><\/i><\/span>\n                            <div class=\"dh-loader\"><\/div>\n                        <\/button>\n                    <input type=\"hidden\" name=\"trp-form-language\" value=\"ur\"\/><\/form>\n                <\/div>\n            <\/div>\n        <\/section>\n\n    <\/div>\n\n    <!-- JavaScript for AJAX Submission and Animations -->\n    <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            \n            \/\/ 1. Form Submission Logic (AJAX)\n            const form = document.getElementById('dh-contact-form');\n            const submitBtn = document.getElementById('dh_submit_btn');\n            const btnText = submitBtn.querySelector('.dh-btn-text');\n            const loader = submitBtn.querySelector('.dh-loader');\n            const responseMsg = document.getElementById('dh-response-msg');\n            const ajaxUrl = 'https:\/\/digitalhunar.pk\/wp-admin\/admin-ajax.php';\n\n            form.addEventListener('submit', function(e) {\n                e.preventDefault();\n\n                \/\/ UI Loading State\n                btnText.style.display = 'none';\n                loader.style.display = 'block';\n                submitBtn.style.opacity = '0.8';\n                submitBtn.disabled = true;\n                responseMsg.className = 'dh-form-msg'; \/\/ Reset class\n                responseMsg.innerHTML = '';\n\n                \/\/ Gather Data\n                const formData = new FormData(form);\n\n                \/\/ Fetch Request\n                fetch(ajaxUrl, {\n                    method: 'POST',\n                    body: formData\n                })\n                .then(response => response.json())\n                .then(data => {\n                    if (data.success) {\n                        responseMsg.innerHTML = data.data.message;\n                        responseMsg.classList.add('dh-msg-success');\n                        form.reset(); \/\/ Clear form\n                    } else {\n                        responseMsg.innerHTML = data.data.message || 'Something went wrong.';\n                        responseMsg.classList.add('dh-msg-error');\n                    }\n                })\n                .catch(error => {\n                    responseMsg.innerHTML = 'Network error. Please try again.';\n                    responseMsg.classList.add('dh-msg-error');\n                })\n                .finally(() => {\n                    \/\/ Restore UI State\n                    btnText.style.display = 'inline-block';\n                    loader.style.display = 'none';\n                    submitBtn.style.opacity = '1';\n                    submitBtn.disabled = false;\n                    \n                    \/\/ Hide message after 5 seconds if success\n                    if(responseMsg.classList.contains('dh-msg-success')) {\n                        setTimeout(() => {\n                            responseMsg.style.display = 'none';\n                            responseMsg.classList.remove('dh-msg-success');\n                        }, 5000);\n                    }\n                });\n            });\n\n            \/\/ 2. Scroll Reveal Animation\n            const revealElements = document.querySelectorAll('.dh-reveal');\n            const revealCallback = function(entries, observer) {\n                entries.forEach(entry => {\n                    if (entry.isIntersecting) {\n                        entry.target.classList.add('active');\n                    }\n                });\n            };\n            const revealOptions = { threshold: 0.1, rootMargin: \"0px 0px -20px 0px\" };\n            const revealObserver = new IntersectionObserver(revealCallback, revealOptions);\n            revealElements.forEach(el => revealObserver.observe(el));\n        });\n    <\/script>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-37","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/digitalhunar.pk\/ur\/wp-json\/wp\/v2\/pages\/37","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalhunar.pk\/ur\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitalhunar.pk\/ur\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitalhunar.pk\/ur\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalhunar.pk\/ur\/wp-json\/wp\/v2\/comments?post=37"}],"version-history":[{"count":1,"href":"https:\/\/digitalhunar.pk\/ur\/wp-json\/wp\/v2\/pages\/37\/revisions"}],"predecessor-version":[{"id":1430,"href":"https:\/\/digitalhunar.pk\/ur\/wp-json\/wp\/v2\/pages\/37\/revisions\/1430"}],"wp:attachment":[{"href":"https:\/\/digitalhunar.pk\/ur\/wp-json\/wp\/v2\/media?parent=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}