{"id":1679,"date":"2025-12-28T17:32:09","date_gmt":"2025-12-28T17:32:09","guid":{"rendered":"https:\/\/qeratalmas.ajlan.group\/?page_id=1679"},"modified":"2025-12-28T22:12:47","modified_gmt":"2025-12-28T22:12:47","slug":"contact-us","status":"publish","type":"page","link":"https:\/\/qeratalmas.ajlan.group\/ar\/contact-us\/","title":{"rendered":"\u0627\u062a\u0635\u0644 \u0628\u0646\u0627"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"1679\" class=\"elementor elementor-1679\">\n\t\t\t\t\t\t<section data-exad-particle-enable=\"false\" class=\"elementor-section elementor-top-section elementor-element elementor-element-00582a0 elementor-section-boxed elementor-section-height-default elementor-section-height-default exad-parallax-effect-no exad-background-color-change-no exad-glass-effect-no exwb-magnet-no exad-sticky-section-no\" data-id=\"00582a0\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-203af04 exad-glass-effect-no exwb-magnet-no exad-sticky-section-no\" data-id=\"203af04\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5ba9b5c exwb-magnet-no exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-exad-blob-maker\" data-id=\"5ba9b5c\" data-element_type=\"widget\" data-widget_type=\"exad-blob-maker.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\t    <div class=\"exad-blob-maker no\">\n\t\t\t\t\t\t\t<div class=\"exad-blob-shape exad-blob-shape-current-position-yes elementor-repeater-item-8fa5129\" id=\"exad-blob-8fa5129\" data-id=\"8fa5129\" data-rotate_z=\"20\" >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"350\" height=\"350\" src=\"https:\/\/qeratalmas.ajlan.group\/wp-content\/uploads\/2025\/12\/sparkling-cut-diamond-illustration-with-transparent-background-png.png\" class=\"attachment-medium_large size-medium_large wp-image-1844\" alt=\"\" srcset=\"https:\/\/qeratalmas.ajlan.group\/wp-content\/uploads\/2025\/12\/sparkling-cut-diamond-illustration-with-transparent-background-png.png 350w, https:\/\/qeratalmas.ajlan.group\/wp-content\/uploads\/2025\/12\/sparkling-cut-diamond-illustration-with-transparent-background-png-300x300.png 300w, https:\/\/qeratalmas.ajlan.group\/wp-content\/uploads\/2025\/12\/sparkling-cut-diamond-illustration-with-transparent-background-png-150x150.png 150w, https:\/\/qeratalmas.ajlan.group\/wp-content\/uploads\/2025\/12\/sparkling-cut-diamond-illustration-with-transparent-background-png-100x100.png 100w\" sizes=\"(max-width: 350px) 100vw, 350px\" \/>\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"exad-blob-shape exad-blob-shape-current-position-yes elementor-repeater-item-c9a9084\" id=\"exad-blob-c9a9084\" data-id=\"c9a9084\" data-rotate_z=\"-20\" >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"350\" height=\"350\" src=\"https:\/\/qeratalmas.ajlan.group\/wp-content\/uploads\/2025\/12\/sparkling-cut-diamond-illustration-with-transparent-background-png.png\" class=\"attachment-medium_large size-medium_large wp-image-1844\" alt=\"\" srcset=\"https:\/\/qeratalmas.ajlan.group\/wp-content\/uploads\/2025\/12\/sparkling-cut-diamond-illustration-with-transparent-background-png.png 350w, https:\/\/qeratalmas.ajlan.group\/wp-content\/uploads\/2025\/12\/sparkling-cut-diamond-illustration-with-transparent-background-png-300x300.png 300w, https:\/\/qeratalmas.ajlan.group\/wp-content\/uploads\/2025\/12\/sparkling-cut-diamond-illustration-with-transparent-background-png-150x150.png 150w, https:\/\/qeratalmas.ajlan.group\/wp-content\/uploads\/2025\/12\/sparkling-cut-diamond-illustration-with-transparent-background-png-100x100.png 100w\" sizes=\"(max-width: 350px) 100vw, 350px\" \/>\t\t\t\t<\/div>\n\t\t\t\t    <\/div>\n\n    \t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fdca644 exwb-magnet-no exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"fdca644\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- QERAT Group - Contact Us Page -->\r\n<!-- Copy everything below into WordPress Text\/HTML editor -->\r\n\r\n<style>\r\n    \/* Import Google Fonts *\/\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;600;700&family=Raleway:wght@300;400;500;600&display=swap');\r\n\r\n    \/* Root Variables *\/\r\n    :root {\r\n        --qerat-blue: #24A3DD;\r\n        --qerat-blue-dark: #2062A9;\r\n        --qerat-blue-light: #5BC0EB;\r\n        --qerat-navy: #1a3a5c;\r\n        --qerat-white: #ffffff;\r\n        --qerat-gray: #666666;\r\n        --qerat-light-bg: #f5fafd;\r\n    }\r\n\r\n    \/* ========== MAIN CONTAINER ========== *\/\r\n    .qerat-contact-container {\r\n        font-family: 'Raleway', sans-serif;\r\n        width: 100vw;\r\n        max-width: 100vw;\r\n        margin-left: calc(-50vw + 50%);\r\n        margin-right: calc(-50vw + 50%);\r\n        background: #ffffff;\r\n        position: relative;\r\n        overflow: hidden;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    \/* ========== HERO SECTION ========== *\/\r\n    .qerat-contact-hero {\r\n        position: relative;\r\n        padding: 100px 5% 80px;\r\n        background: linear-gradient(135deg, var(--qerat-blue-dark) 0%, var(--qerat-blue) 100%);\r\n        overflow: hidden;\r\n    }\r\n\r\n    .qerat-hero-bg-pattern {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background-image:\r\n            radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.08) 0%, transparent 35%),\r\n            radial-gradient(circle at 85% 75%, rgba(255, 255, 255, 0.06) 0%, transparent 40%);\r\n        pointer-events: none;\r\n    }\r\n\r\n    .qerat-hero-floating-icons {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        pointer-events: none;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .qerat-floating-icon {\r\n        position: absolute;\r\n        opacity: 0.08;\r\n        animation: floatIcon 15s infinite ease-in-out;\r\n    }\r\n\r\n    .qerat-floating-icon svg {\r\n        width: 60px;\r\n        height: 60px;\r\n        fill: none;\r\n        stroke: #ffffff;\r\n        stroke-width: 1.5;\r\n    }\r\n\r\n    .qerat-floating-icon:nth-child(1) {\r\n        top: 10%;\r\n        left: 5%;\r\n        animation-delay: 0s;\r\n    }\r\n\r\n    .qerat-floating-icon:nth-child(2) {\r\n        top: 60%;\r\n        left: 15%;\r\n        animation-delay: -3s;\r\n    }\r\n\r\n    .qerat-floating-icon:nth-child(3) {\r\n        top: 20%;\r\n        right: 10%;\r\n        animation-delay: -6s;\r\n    }\r\n\r\n    .qerat-floating-icon:nth-child(4) {\r\n        top: 70%;\r\n        right: 20%;\r\n        animation-delay: -9s;\r\n    }\r\n\r\n    .qerat-floating-icon:nth-child(5) {\r\n        top: 40%;\r\n        left: 50%;\r\n        animation-delay: -12s;\r\n    }\r\n\r\n    @keyframes floatIcon {\r\n\r\n        0%,\r\n        100% {\r\n            transform: translateY(0) rotate(0deg);\r\n        }\r\n\r\n        25% {\r\n            transform: translateY(-20px) rotate(5deg);\r\n        }\r\n\r\n        50% {\r\n            transform: translateY(10px) rotate(-5deg);\r\n        }\r\n\r\n        75% {\r\n            transform: translateY(-10px) rotate(3deg);\r\n        }\r\n    }\r\n\r\n    .qerat-hero-content {\r\n        position: relative;\r\n        z-index: 1;\r\n        max-width: 800px;\r\n        margin: 0 auto;\r\n        text-align: center;\r\n    }\r\n\r\n    .qerat-hero-title {\r\n        font-family: 'Playfair Display', serif;\r\n        font-size: 3.5rem;\r\n        font-weight: 700;\r\n        color: #ffffff;\r\n        margin-bottom: 20px;\r\n        opacity: 0;\r\n        transform: translateY(-30px);\r\n        animation: fadeSlideDown 0.8s ease forwards;\r\n    }\r\n\r\n    @keyframes fadeSlideDown {\r\n        to {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n    }\r\n\r\n    .qerat-hero-subtitle {\r\n        font-size: 1.2rem;\r\n        color: rgba(255, 255, 255, 0.9);\r\n        line-height: 1.8;\r\n        opacity: 0;\r\n        animation: fadeIn 0.8s ease 0.3s forwards;\r\n    }\r\n\r\n    @keyframes fadeIn {\r\n        to {\r\n            opacity: 1;\r\n        }\r\n    }\r\n\r\n    \/* ========== CONTACT INFO CARDS ========== *\/\r\n    .qerat-contact-cards-section {\r\n        padding: 0 5%;\r\n        position: relative;\r\n        z-index: 2;\r\n        margin-top: -50px;\r\n    }\r\n\r\n    .qerat-contact-cards-wrapper {\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .qerat-contact-cards-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(3, 1fr);\r\n        gap: 30px;\r\n    }\r\n\r\n    .qerat-contact-card {\r\n        background: #ffffff;\r\n        border-radius: 20px;\r\n        padding: 40px 35px;\r\n        text-align: center;\r\n        box-shadow: 0 20px 60px rgba(32, 98, 169, 0.12);\r\n        border: 2px solid transparent;\r\n        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n        position: relative;\r\n        overflow: hidden;\r\n        opacity: 0;\r\n        transform: translateY(50px);\r\n    }\r\n\r\n    .qerat-contact-card.visible {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n\r\n    .qerat-contact-card:nth-child(1) {\r\n        transition-delay: 0s;\r\n    }\r\n\r\n    .qerat-contact-card:nth-child(2) {\r\n        transition-delay: 0.15s;\r\n    }\r\n\r\n    .qerat-contact-card:nth-child(3) {\r\n        transition-delay: 0.3s;\r\n    }\r\n\r\n    .qerat-contact-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 4px;\r\n        background: linear-gradient(90deg, var(--qerat-blue), var(--qerat-blue-dark));\r\n        transform: scaleX(0);\r\n        transform-origin: left;\r\n        transition: transform 0.4s ease;\r\n    }\r\n\r\n    .qerat-contact-card:hover::before {\r\n        transform: scaleX(1);\r\n    }\r\n\r\n    .qerat-contact-card:hover {\r\n        border-color: var(--qerat-blue);\r\n        transform: translateY(-15px);\r\n        box-shadow: 0 30px 80px rgba(32, 98, 169, 0.2);\r\n    }\r\n\r\n    .qerat-card-icon {\r\n        width: 80px;\r\n        height: 80px;\r\n        background: linear-gradient(135deg, var(--qerat-blue) 0%, var(--qerat-blue-dark) 100%);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        margin: 0 auto 25px;\r\n        transition: all 0.5s ease;\r\n        box-shadow: 0 15px 35px rgba(36, 163, 221, 0.3);\r\n    }\r\n\r\n    .qerat-contact-card:hover .qerat-card-icon {\r\n        transform: scale(1.15) rotate(10deg);\r\n        box-shadow: 0 20px 45px rgba(36, 163, 221, 0.4);\r\n    }\r\n\r\n    .qerat-card-icon svg {\r\n        width: 36px;\r\n        height: 36px;\r\n        fill: none;\r\n        stroke: #ffffff;\r\n        stroke-width: 2;\r\n        stroke-linecap: round;\r\n        stroke-linejoin: round;\r\n    }\r\n\r\n    .qerat-card-title {\r\n        font-family: 'Playfair Display', serif;\r\n        font-size: 1.4rem;\r\n        font-weight: 600;\r\n        color: var(--qerat-navy);\r\n        margin-bottom: 15px;\r\n        transition: color 0.3s ease;\r\n    }\r\n\r\n    .qerat-contact-card:hover .qerat-card-title {\r\n        color: var(--qerat-blue-dark);\r\n    }\r\n\r\n    .qerat-card-info {\r\n        font-size: 1.05rem;\r\n        color: var(--qerat-gray);\r\n        line-height: 1.7;\r\n        margin: 0;\r\n    }\r\n\r\n    .qerat-card-info a {\r\n        color: var(--qerat-blue);\r\n        text-decoration: none;\r\n        transition: color 0.3s ease;\r\n    }\r\n\r\n    .qerat-card-info a:hover {\r\n        color: var(--qerat-blue-dark);\r\n    }\r\n\r\n    \/* ========== MAIN CONTENT SECTION ========== *\/\r\n    .qerat-contact-main {\r\n        padding: 100px 5%;\r\n        background: #ffffff;\r\n    }\r\n\r\n    .qerat-contact-main-wrapper {\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 80px;\r\n        align-items: start;\r\n    }\r\n\r\n    \/* ========== CONTACT FORM ========== *\/\r\n    .qerat-form-section {\r\n        opacity: 0;\r\n        transform: translateX(-50px);\r\n        transition: all 0.8s ease;\r\n    }\r\n\r\n    .qerat-form-section.visible {\r\n        opacity: 1;\r\n        transform: translateX(0);\r\n    }\r\n\r\n    .qerat-section-label {\r\n        display: inline-block;\r\n        font-size: 0.85rem;\r\n        color: var(--qerat-blue);\r\n        text-transform: uppercase;\r\n        letter-spacing: 3px;\r\n        font-weight: 600;\r\n        margin-bottom: 15px;\r\n        position: relative;\r\n        padding-left: 50px;\r\n    }\r\n\r\n    .qerat-section-label::before {\r\n        content: '';\r\n        position: absolute;\r\n        left: 0;\r\n        top: 50%;\r\n        width: 35px;\r\n        height: 2px;\r\n        background: var(--qerat-blue);\r\n        transform: translateY(-50%);\r\n    }\r\n\r\n    .qerat-form-title {\r\n        font-family: 'Playfair Display', serif;\r\n        font-size: 2.5rem;\r\n        font-weight: 700;\r\n        color: var(--qerat-navy);\r\n        margin-bottom: 15px;\r\n    }\r\n\r\n    .qerat-form-subtitle {\r\n        font-size: 1.1rem;\r\n        color: var(--qerat-gray);\r\n        margin-bottom: 40px;\r\n        line-height: 1.7;\r\n    }\r\n\r\n    .qerat-contact-form {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 25px;\r\n    }\r\n\r\n    .qerat-form-row {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 20px;\r\n    }\r\n\r\n    .qerat-form-group {\r\n        position: relative;\r\n    }\r\n\r\n    .qerat-form-label {\r\n        display: block;\r\n        font-size: 0.9rem;\r\n        font-weight: 500;\r\n        color: var(--qerat-navy);\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    .qerat-form-input,\r\n    .qerat-form-textarea,\r\n    .qerat-form-select {\r\n        width: 100%;\r\n        padding: 16px 20px;\r\n        font-family: 'Raleway', sans-serif;\r\n        font-size: 1rem;\r\n        color: var(--qerat-navy);\r\n        background: var(--qerat-light-bg);\r\n        border: 2px solid transparent;\r\n        border-radius: 12px;\r\n        transition: all 0.3s ease;\r\n        outline: none;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .qerat-form-input:focus,\r\n    .qerat-form-textarea:focus,\r\n    .qerat-form-select:focus {\r\n        border-color: var(--qerat-blue);\r\n        background: #ffffff;\r\n        box-shadow: 0 0 0 4px rgba(36, 163, 221, 0.1);\r\n    }\r\n\r\n    .qerat-form-input::placeholder,\r\n    .qerat-form-textarea::placeholder {\r\n        color: #999;\r\n    }\r\n\r\n    .qerat-form-textarea {\r\n        min-height: 150px;\r\n        resize: vertical;\r\n    }\r\n\r\n    .qerat-form-select {\r\n        cursor: pointer;\r\n        appearance: none;\r\n        background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2324A3DD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\");\r\n        background-repeat: no-repeat;\r\n        background-position: right 15px center;\r\n        background-size: 20px;\r\n        padding-right: 50px;\r\n    }\r\n\r\n    .qerat-submit-btn {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 12px;\r\n        padding: 18px 45px;\r\n        font-family: 'Raleway', sans-serif;\r\n        font-size: 1rem;\r\n        font-weight: 600;\r\n        color: #ffffff;\r\n        background: linear-gradient(135deg, var(--qerat-blue) 0%, var(--qerat-blue-dark) 100%);\r\n        border: none;\r\n        border-radius: 12px;\r\n        cursor: pointer;\r\n        transition: all 0.4s ease;\r\n        position: relative;\r\n        overflow: hidden;\r\n        box-shadow: 0 10px 30px rgba(36, 163, 221, 0.3);\r\n    }\r\n\r\n    .qerat-submit-btn::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        left: -100%;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n        transition: left 0.5s ease;\r\n    }\r\n\r\n    .qerat-submit-btn:hover::before {\r\n        left: 100%;\r\n    }\r\n\r\n    .qerat-submit-btn:hover {\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 15px 40px rgba(36, 163, 221, 0.4);\r\n    }\r\n\r\n    .qerat-submit-btn svg {\r\n        width: 20px;\r\n        height: 20px;\r\n        fill: none;\r\n        stroke: #ffffff;\r\n        stroke-width: 2;\r\n        transition: transform 0.3s ease;\r\n    }\r\n\r\n    .qerat-submit-btn:hover svg {\r\n        transform: translateX(5px);\r\n    }\r\n\r\n    \/* ========== OFFICE LOCATIONS ========== *\/\r\n    .qerat-offices-section {\r\n        opacity: 0;\r\n        transform: translateX(50px);\r\n        transition: all 0.8s ease 0.2s;\r\n    }\r\n\r\n    .qerat-offices-section.visible {\r\n        opacity: 1;\r\n        transform: translateX(0);\r\n    }\r\n\r\n    .qerat-offices-title {\r\n        font-family: 'Playfair Display', serif;\r\n        font-size: 2rem;\r\n        font-weight: 700;\r\n        color: var(--qerat-navy);\r\n        margin-bottom: 35px;\r\n    }\r\n\r\n    .qerat-office-card {\r\n        background: linear-gradient(135deg, var(--qerat-light-bg) 0%, #ffffff 100%);\r\n        border: 2px solid transparent;\r\n        border-radius: 20px;\r\n        padding: 35px 30px;\r\n        margin-bottom: 25px;\r\n        transition: all 0.5s ease;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .qerat-office-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        left: 0;\r\n        top: 0;\r\n        width: 5px;\r\n        height: 100%;\r\n        background: linear-gradient(180deg, var(--qerat-blue), var(--qerat-blue-dark));\r\n        transform: scaleY(0);\r\n        transform-origin: top;\r\n        transition: transform 0.4s ease;\r\n    }\r\n\r\n    .qerat-office-card:hover::before {\r\n        transform: scaleY(1);\r\n    }\r\n\r\n    .qerat-office-card:hover {\r\n        border-color: var(--qerat-blue);\r\n        transform: translateX(10px);\r\n        box-shadow: 0 15px 50px rgba(32, 98, 169, 0.12);\r\n    }\r\n\r\n    .qerat-office-header {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 20px;\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .qerat-office-icon {\r\n        width: 55px;\r\n        height: 55px;\r\n        background: linear-gradient(135deg, var(--qerat-blue) 0%, var(--qerat-blue-dark) 100%);\r\n        border-radius: 14px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex-shrink: 0;\r\n        transition: all 0.4s ease;\r\n    }\r\n\r\n    .qerat-office-card:hover .qerat-office-icon {\r\n        transform: rotate(10deg) scale(1.1);\r\n    }\r\n\r\n    .qerat-office-icon svg {\r\n        width: 26px;\r\n        height: 26px;\r\n        fill: none;\r\n        stroke: #ffffff;\r\n        stroke-width: 2;\r\n    }\r\n\r\n    .qerat-office-name {\r\n        font-family: 'Playfair Display', serif;\r\n        font-size: 1.4rem;\r\n        font-weight: 600;\r\n        color: var(--qerat-navy);\r\n        margin: 0 0 5px 0;\r\n    }\r\n\r\n    .qerat-office-country {\r\n        font-size: 0.9rem;\r\n        color: var(--qerat-blue);\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        margin: 0;\r\n    }\r\n\r\n    .qerat-office-details {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 12px;\r\n    }\r\n\r\n    .qerat-office-detail {\r\n        display: flex;\r\n        align-items: flex-start;\r\n        gap: 12px;\r\n    }\r\n\r\n    .qerat-office-detail svg {\r\n        width: 18px;\r\n        height: 18px;\r\n        fill: none;\r\n        stroke: var(--qerat-blue);\r\n        stroke-width: 2;\r\n        flex-shrink: 0;\r\n        margin-top: 3px;\r\n    }\r\n\r\n    .qerat-office-detail span {\r\n        font-size: 0.95rem;\r\n        color: var(--qerat-gray);\r\n        line-height: 1.5;\r\n    }\r\n\r\n    .qerat-office-detail a {\r\n        color: var(--qerat-blue);\r\n        text-decoration: none;\r\n        transition: color 0.3s ease;\r\n    }\r\n\r\n    .qerat-office-detail a:hover {\r\n        color: var(--qerat-blue-dark);\r\n    }\r\n\r\n    \/* Social Links *\/\r\n    .qerat-social-section {\r\n        margin-top: 40px;\r\n        padding-top: 30px;\r\n        border-top: 1px solid rgba(32, 98, 169, 0.1);\r\n    }\r\n\r\n    .qerat-social-title {\r\n        font-size: 1rem;\r\n        font-weight: 600;\r\n        color: var(--qerat-navy);\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .qerat-social-links {\r\n        display: flex;\r\n        gap: 15px;\r\n    }\r\n\r\n    .qerat-social-link {\r\n        width: 50px;\r\n        height: 50px;\r\n        background: var(--qerat-light-bg);\r\n        border-radius: 12px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        transition: all 0.4s ease;\r\n    }\r\n\r\n    .qerat-social-link:hover {\r\n        background: linear-gradient(135deg, var(--qerat-blue) 0%, var(--qerat-blue-dark) 100%);\r\n        transform: translateY(-5px);\r\n        box-shadow: 0 10px 25px rgba(36, 163, 221, 0.3);\r\n    }\r\n\r\n    .qerat-social-link svg {\r\n        width: 22px;\r\n        height: 22px;\r\n        fill: var(--qerat-blue);\r\n        transition: fill 0.3s ease;\r\n    }\r\n\r\n    .qerat-social-link:hover svg {\r\n        fill: #ffffff;\r\n    }\r\n\r\n    \/* ========== MAP SECTION ========== *\/\r\n    .qerat-map-section {\r\n        padding: 0 5% 100px;\r\n        background: #ffffff;\r\n    }\r\n\r\n    .qerat-map-wrapper {\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .qerat-map-header {\r\n        text-align: center;\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    .qerat-map-title {\r\n        font-family: 'Playfair Display', serif;\r\n        font-size: 2.2rem;\r\n        font-weight: 700;\r\n        color: var(--qerat-navy);\r\n        margin-bottom: 10px;\r\n        opacity: 0;\r\n        transform: translateY(30px);\r\n        transition: all 0.8s ease;\r\n    }\r\n\r\n    .qerat-map-title.visible {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n\r\n    .qerat-map-subtitle {\r\n        font-size: 1.1rem;\r\n        color: var(--qerat-gray);\r\n    }\r\n\r\n    .qerat-map-container {\r\n        border-radius: 24px;\r\n        overflow: hidden;\r\n        box-shadow: 0 20px 60px rgba(32, 98, 169, 0.15);\r\n        border: 2px solid var(--qerat-blue);\r\n        opacity: 0;\r\n        transform: translateY(30px);\r\n        transition: all 0.8s ease 0.2s;\r\n    }\r\n\r\n    .qerat-map-container.visible {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n\r\n    .qerat-map-placeholder {\r\n        width: 100%;\r\n        height: 400px;\r\n        background: linear-gradient(135deg, var(--qerat-light-bg) 0%, #e8f4fc 100%);\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 20px;\r\n    }\r\n\r\n    .qerat-map-placeholder svg {\r\n        width: 80px;\r\n        height: 80px;\r\n        fill: none;\r\n        stroke: var(--qerat-blue);\r\n        stroke-width: 1.5;\r\n        opacity: 0.5;\r\n    }\r\n\r\n    .qerat-map-placeholder span {\r\n        font-size: 1.1rem;\r\n        color: var(--qerat-gray);\r\n    }\r\n\r\n    \/* ========== RESPONSIVE DESIGN ========== *\/\r\n    @media (max-width: 1024px) {\r\n        .qerat-contact-cards-grid {\r\n            grid-template-columns: 1fr;\r\n            max-width: 500px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .qerat-contact-main-wrapper {\r\n            grid-template-columns: 1fr;\r\n            gap: 60px;\r\n        }\r\n\r\n        .qerat-form-section,\r\n        .qerat-offices-section {\r\n            max-width: 600px;\r\n            margin: 0 auto;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .qerat-hero-title {\r\n            font-size: 2.5rem;\r\n        }\r\n\r\n        .qerat-form-row {\r\n            grid-template-columns: 1fr;\r\n        }\r\n\r\n        .qerat-form-title {\r\n            font-size: 2rem;\r\n        }\r\n\r\n        .qerat-contact-card,\r\n        .qerat-office-card {\r\n            padding: 30px 25px;\r\n        }\r\n\r\n        .qerat-social-links {\r\n            justify-content: center;\r\n        }\r\n    }\r\n\r\n    \/* ========== PRINT STYLES ========== *\/\r\n    @media print {\r\n        .qerat-contact-hero {\r\n            background: var(--qerat-blue-dark) !important;\r\n        }\r\n\r\n        .qerat-hero-floating-icons {\r\n            display: none !important;\r\n        }\r\n\r\n        .qerat-contact-card,\r\n        .qerat-form-section,\r\n        .qerat-offices-section,\r\n        .qerat-map-container {\r\n            opacity: 1 !important;\r\n            transform: none !important;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<!-- Main Container -->\r\n<div class=\"qerat-contact-container\">\r\n\r\n    <!-- Hero Section -->\r\n    <section class=\"qerat-contact-hero\">\r\n        <div class=\"qerat-hero-bg-pattern\"><\/div>\r\n        <div class=\"qerat-hero-floating-icons\">\r\n            <div class=\"qerat-floating-icon\">\r\n                <svg viewbox=\"0 0 24 24\">\r\n                    <path\r\n                        d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z\" \/>\r\n                <\/svg>\r\n            <\/div>\r\n            <div class=\"qerat-floating-icon\">\r\n                <svg viewbox=\"0 0 24 24\">\r\n                    <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\" \/>\r\n                    <polyline points=\"22,6 12,13 2,6\" \/>\r\n                <\/svg>\r\n            <\/div>\r\n            <div class=\"qerat-floating-icon\">\r\n                <svg viewbox=\"0 0 24 24\">\r\n                    <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\" \/>\r\n                    <circle cx=\"12\" cy=\"10\" r=\"3\" \/>\r\n                <\/svg>\r\n            <\/div>\r\n            <div class=\"qerat-floating-icon\">\r\n                <svg viewbox=\"0 0 24 24\">\r\n                    <circle cx=\"12\" cy=\"12\" r=\"10\" \/>\r\n                    <line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\" \/>\r\n                    <path d=\"M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z\" \/>\r\n                <\/svg>\r\n            <\/div>\r\n            <div class=\"qerat-floating-icon\">\r\n                <svg viewbox=\"0 0 24 24\">\r\n                    <path d=\"M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z\" \/>\r\n                <\/svg>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"qerat-hero-content\">\r\n            <h1 class=\"qerat-hero-title\">Get In Touch<\/h1>\r\n            <p class=\"qerat-hero-subtitle\">We'd love to hear from you. Whether you have a question, partnership inquiry,\r\n                or just want to say hello, our team is ready to assist you.<\/p>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Contact Info Cards -->\r\n    <section class=\"qerat-contact-cards-section\">\r\n        <div class=\"qerat-contact-cards-wrapper\">\r\n            <div class=\"qerat-contact-cards-grid\" id=\"contactCards\">\r\n                <div class=\"qerat-contact-card\">\r\n                    <div class=\"qerat-card-icon\">\r\n                        <svg viewbox=\"0 0 24 24\">\r\n                            <path\r\n                                d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z\" \/>\r\n                        <\/svg>\r\n                    <\/div>\r\n                    <h3 class=\"qerat-card-title\">Call Us<\/h3>\r\n                    <p class=\"qerat-card-info\">\r\n                        <a href=\"tel:+97142345678\">+971 4 234 5678<\/a><br>\r\n                        <a href=\"tel:+9641234567\">+964 1 234 567<\/a>\r\n                    <\/p>\r\n                <\/div>\r\n                <div class=\"qerat-contact-card\">\r\n                    <div class=\"qerat-card-icon\">\r\n                        <svg viewbox=\"0 0 24 24\">\r\n                            <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\" \/>\r\n                            <polyline points=\"22,6 12,13 2,6\" \/>\r\n                        <\/svg>\r\n                    <\/div>\r\n                    <h3 class=\"qerat-card-title\">Email Us<\/h3>\r\n                    <p class=\"qerat-card-info\">\r\n                        <a href=\"mailto:info@qerat.com\">info@qerat.com<\/a><br>\r\n                        <a href=\"mailto:support@qerat.com\">support@qerat.com<\/a>\r\n                    <\/p>\r\n                <\/div>\r\n                <div class=\"qerat-contact-card\">\r\n                    <div class=\"qerat-card-icon\">\r\n                        <svg viewbox=\"0 0 24 24\">\r\n                            <circle cx=\"12\" cy=\"12\" r=\"10\" \/>\r\n                            <polyline points=\"12 6 12 12 16 14\" \/>\r\n                        <\/svg>\r\n                    <\/div>\r\n                    <h3 class=\"qerat-card-title\">Working Hours<\/h3>\r\n                    <p class=\"qerat-card-info\">\r\n                        Sunday - Thursday<br>\r\n                        9:00 AM - 6:00 PM\r\n                    <\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Main Content: Form + Offices -->\r\n    <section class=\"qerat-contact-main\">\r\n        <div class=\"qerat-contact-main-wrapper\">\r\n\r\n            <!-- Contact Form -->\r\n            <div class=\"qerat-form-section\" id=\"formSection\">\r\n                <span class=\"qerat-section-label\">Send a Message<\/span>\r\n                <h2 class=\"qerat-form-title\">Let's Start a Conversation<\/h2>\r\n                <p class=\"qerat-form-subtitle\">Fill out the form below and we'll get back to you within 24 hours.<\/p>\r\n\r\n                <form class=\"qerat-contact-form\" id=\"contactForm\" action=\"\">\r\n                    <div class=\"qerat-form-row\">\r\n                        <div class=\"qerat-form-group\">\r\n                            <label class=\"qerat-form-label\">First Name *<\/label>\r\n                            <input type=\"text\" class=\"qerat-form-input\" placeholder=\"John\" required>\r\n                        <\/div>\r\n                        <div class=\"qerat-form-group\">\r\n                            <label class=\"qerat-form-label\">Last Name *<\/label>\r\n                            <input type=\"text\" class=\"qerat-form-input\" placeholder=\"Doe\" required>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"qerat-form-row\">\r\n                        <div class=\"qerat-form-group\">\r\n                            <label class=\"qerat-form-label\">Email Address *<\/label>\r\n                            <input type=\"email\" class=\"qerat-form-input\" placeholder=\"john@example.com\" required>\r\n                        <\/div>\r\n                        <div class=\"qerat-form-group\">\r\n                            <label class=\"qerat-form-label\">Phone Number<\/label>\r\n                            <input type=\"tel\" class=\"qerat-form-input\" placeholder=\"+971 50 123 4567\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"qerat-form-group\">\r\n                        <label class=\"qerat-form-label\">Subject *<\/label>\r\n                        <select class=\"qerat-form-select\" required>\r\n                            <option value=\"\">Select a topic<\/option>\r\n                            <option value=\"general\">General Inquiry<\/option>\r\n                            <option value=\"partnership\">Partnership Opportunity<\/option>\r\n                            <option value=\"investment\">Investment Inquiry<\/option>\r\n                            <option value=\"careers\">Career Opportunities<\/option>\r\n                            <option value=\"media\">Media & Press<\/option>\r\n                            <option value=\"other\">Other<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                    <div class=\"qerat-form-group\">\r\n                        <label class=\"qerat-form-label\">Your Message *<\/label>\r\n                        <textarea class=\"qerat-form-textarea\" placeholder=\"Tell us how we can help you...\"\r\n                            required><\/textarea>\r\n                    <\/div>\r\n                    <button type=\"submit\" class=\"qerat-submit-btn\">\r\n                        Send Message\r\n                        <svg viewbox=\"0 0 24 24\">\r\n                            <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\" \/>\r\n                            <polygon points=\"22 2 15 22 11 13 2 9 22 2\" \/>\r\n                        <\/svg>\r\n                    <\/button>\r\n                <input type=\"hidden\" name=\"trp-form-language\" value=\"ar\"\/><\/form>\r\n            <\/div>\r\n\r\n            <!-- Office Locations -->\r\n            <div class=\"qerat-offices-section\" id=\"officesSection\">\r\n                <h2 class=\"qerat-offices-title\">Our Offices<\/h2>\r\n\r\n                <!-- Dubai Office -->\r\n                <div class=\"qerat-office-card\">\r\n                    <div class=\"qerat-office-header\">\r\n                        <div class=\"qerat-office-icon\">\r\n                            <svg viewbox=\"0 0 24 24\">\r\n                                <path d=\"M3 21h18M5 21V7l8-4 8 4v14M9 21v-8h6v8\" \/>\r\n                            <\/svg>\r\n                        <\/div>\r\n                        <div>\r\n                            <h3 class=\"qerat-office-name\">Dubai Office<\/h3>\r\n                            <p class=\"qerat-office-country\">United Arab Emirates<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"qerat-office-details\">\r\n                        <div class=\"qerat-office-detail\">\r\n                            <svg viewbox=\"0 0 24 24\">\r\n                                <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\" \/>\r\n                                <circle cx=\"12\" cy=\"10\" r=\"3\" \/>\r\n                            <\/svg>\r\n                            <span>Dubai Business Bay, Tower A, 15th Floor, Dubai, UAE<\/span>\r\n                        <\/div>\r\n                        <div class=\"qerat-office-detail\">\r\n                            <svg viewbox=\"0 0 24 24\">\r\n                                <path\r\n                                    d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.948.37 1.88.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.93.33 1.862.57 2.81.7A2 2 0 0122 16.92z\" \/>\r\n                            <\/svg>\r\n                            <span><a href=\"tel:+97142345678\">+971 4 234 5678<\/a><\/span>\r\n                        <\/div>\r\n                        <div class=\"qerat-office-detail\">\r\n                            <svg viewbox=\"0 0 24 24\">\r\n                                <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\" \/>\r\n                                <polyline points=\"22,6 12,13 2,6\" \/>\r\n                            <\/svg>\r\n                            <span><a href=\"mailto:dubai@qerat.com\">dubai@qerat.com<\/a><\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Baghdad Office -->\r\n                <div class=\"qerat-office-card\">\r\n                    <div class=\"qerat-office-header\">\r\n                        <div class=\"qerat-office-icon\">\r\n                            <svg viewbox=\"0 0 24 24\">\r\n                                <path d=\"M3 21h18M5 21V7l8-4 8 4v14M9 21v-8h6v8\" \/>\r\n                            <\/svg>\r\n                        <\/div>\r\n                        <div>\r\n                            <h3 class=\"qerat-office-name\">Baghdad Office<\/h3>\r\n                            <p class=\"qerat-office-country\">Iraq<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"qerat-office-details\">\r\n                        <div class=\"qerat-office-detail\">\r\n                            <svg viewbox=\"0 0 24 24\">\r\n                                <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\" \/>\r\n                                <circle cx=\"12\" cy=\"10\" r=\"3\" \/>\r\n                            <\/svg>\r\n                            <span>Al-Mansour District, Baghdad, Iraq<\/span>\r\n                        <\/div>\r\n                        <div class=\"qerat-office-detail\">\r\n                            <svg viewbox=\"0 0 24 24\">\r\n                                <path\r\n                                    d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.948.37 1.88.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.93.33 1.862.57 2.81.7A2 2 0 0122 16.92z\" \/>\r\n                            <\/svg>\r\n                            <span><a href=\"tel:+9641234567\">+964 1 234 567<\/a><\/span>\r\n                        <\/div>\r\n                        <div class=\"qerat-office-detail\">\r\n                            <svg viewbox=\"0 0 24 24\">\r\n                                <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\" \/>\r\n                                <polyline points=\"22,6 12,13 2,6\" \/>\r\n                            <\/svg>\r\n                            <span><a href=\"mailto:baghdad@qerat.com\">baghdad@qerat.com<\/a><\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Social Links -->\r\n                <div class=\"qerat-social-section\">\r\n                    <h4 class=\"qerat-social-title\">Connect With Us<\/h4>\r\n                    <div class=\"qerat-social-links\">\r\n                        <a href=\"#\" class=\"qerat-social-link\" title=\"LinkedIn\">\r\n                            <svg viewbox=\"0 0 24 24\">\r\n                                <path\r\n                                    d=\"M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2zM4 6a2 2 0 100-4 2 2 0 000 4z\" \/>\r\n                            <\/svg>\r\n                        <\/a>\r\n                        <a href=\"#\" class=\"qerat-social-link\" title=\"Twitter\">\r\n                            <svg viewbox=\"0 0 24 24\">\r\n                                <path\r\n                                    d=\"M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z\" \/>\r\n                            <\/svg>\r\n                        <\/a>\r\n                        <a href=\"#\" class=\"qerat-social-link\" title=\"Facebook\">\r\n                            <svg viewbox=\"0 0 24 24\">\r\n                                <path d=\"M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z\" \/>\r\n                            <\/svg>\r\n                        <\/a>\r\n                        <a href=\"#\" class=\"qerat-social-link\" title=\"Instagram\">\r\n                            <svg viewbox=\"0 0 24 24\">\r\n                                <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" ry=\"5\" \/>\r\n                                <path d=\"M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zM17.5 6.5h.01\" \/>\r\n                            <\/svg>\r\n                        <\/a>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Map Section -->\r\n    <section class=\"qerat-map-section\">\r\n        <div class=\"qerat-map-wrapper\">\r\n            <div class=\"qerat-map-header\">\r\n                <h2 class=\"qerat-map-title\" id=\"mapTitle\">Find Us on the Map<\/h2>\r\n                <p class=\"qerat-map-subtitle\">Visit our offices in Dubai or Baghdad<\/p>\r\n            <\/div>\r\n            <div class=\"qerat-map-container\" id=\"mapContainer\">\r\n                <!-- Replace this with actual Google Maps embed -->\r\n                <div class=\"qerat-map-placeholder\">\r\n                    <svg viewbox=\"0 0 24 24\">\r\n                        <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\" \/>\r\n                        <circle cx=\"12\" cy=\"10\" r=\"3\" \/>\r\n                    <\/svg>\r\n                    <span>Interactive map would be embedded here<\/span>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n    (function () {\r\n        'use strict';\r\n\r\n        \/\/ Initialize when DOM is ready\r\n        if (document.readyState === 'loading') {\r\n            document.addEventListener('DOMContentLoaded', init);\r\n        } else {\r\n            init();\r\n        }\r\n\r\n        function init() {\r\n            initScrollAnimations();\r\n            initFormEffects();\r\n            initHoverEffects();\r\n            initFormSubmission();\r\n        }\r\n\r\n        \/\/ ========== SCROLL ANIMATIONS ==========\r\n        function initScrollAnimations() {\r\n            const elements = [\r\n                ...document.querySelectorAll('.qerat-contact-card'),\r\n                document.getElementById('formSection'),\r\n                document.getElementById('officesSection'),\r\n                document.getElementById('mapTitle'),\r\n                document.getElementById('mapContainer')\r\n            ];\r\n\r\n            const observerOptions = {\r\n                root: null,\r\n                rootMargin: '0px',\r\n                threshold: 0.15\r\n            };\r\n\r\n            const observer = new IntersectionObserver(function (entries) {\r\n                entries.forEach(function (entry) {\r\n                    if (entry.isIntersecting) {\r\n                        entry.target.classList.add('visible');\r\n                    }\r\n                });\r\n            }, observerOptions);\r\n\r\n            elements.forEach(function (el) {\r\n                if (el) observer.observe(el);\r\n            });\r\n        }\r\n\r\n        \/\/ ========== FORM EFFECTS ==========\r\n        function initFormEffects() {\r\n            const inputs = document.querySelectorAll('.qerat-form-input, .qerat-form-textarea, .qerat-form-select');\r\n\r\n            inputs.forEach(function (input) {\r\n                \/\/ Focus animation\r\n                input.addEventListener('focus', function () {\r\n                    this.parentElement.classList.add('focused');\r\n                });\r\n\r\n                input.addEventListener('blur', function () {\r\n                    this.parentElement.classList.remove('focused');\r\n                });\r\n\r\n                \/\/ Input animation\r\n                input.addEventListener('input', function () {\r\n                    if (this.value) {\r\n                        this.classList.add('has-value');\r\n                    } else {\r\n                        this.classList.remove('has-value');\r\n                    }\r\n                });\r\n            });\r\n        }\r\n\r\n        \/\/ ========== HOVER EFFECTS ==========\r\n        function initHoverEffects() {\r\n            const cards = document.querySelectorAll('.qerat-contact-card, .qerat-office-card');\r\n\r\n            cards.forEach(function (card) {\r\n                \/\/ 3D Tilt Effect\r\n                card.addEventListener('mousemove', function (e) {\r\n                    const rect = card.getBoundingClientRect();\r\n                    const x = e.clientX - rect.left;\r\n                    const y = e.clientY - rect.top;\r\n                    const centerX = rect.width \/ 2;\r\n                    const centerY = rect.height \/ 2;\r\n\r\n                    const rotateX = (y - centerY) \/ 25;\r\n                    const rotateY = (centerX - x) \/ 25;\r\n\r\n                    card.style.transform = `perspective(1000px) rotateX(${-rotateX}deg) rotateY(${rotateY}deg) translateY(-15px)`;\r\n                });\r\n\r\n                card.addEventListener('mouseleave', function () {\r\n                    card.style.transform = '';\r\n                });\r\n\r\n                \/\/ Ripple Effect\r\n                card.addEventListener('click', function (e) {\r\n                    const ripple = document.createElement('div');\r\n                    const rect = card.getBoundingClientRect();\r\n\r\n                    ripple.style.cssText = `\r\n                    position: absolute;\r\n                    width: 10px;\r\n                    height: 10px;\r\n                    background: rgba(36, 163, 221, 0.3);\r\n                    border-radius: 50%;\r\n                    transform: scale(0);\r\n                    animation: contactRipple 0.6s ease-out forwards;\r\n                    pointer-events: none;\r\n                    left: ${e.clientX - rect.left}px;\r\n                    top: ${e.clientY - rect.top}px;\r\n                    z-index: 10;\r\n                `;\r\n\r\n                    card.style.position = 'relative';\r\n                    card.style.overflow = 'hidden';\r\n                    card.appendChild(ripple);\r\n\r\n                    setTimeout(function () {\r\n                        ripple.remove();\r\n                    }, 600);\r\n                });\r\n            });\r\n\r\n            \/\/ Add ripple animation\r\n            const style = document.createElement('style');\r\n            style.textContent = `\r\n            @keyframes contactRipple {\r\n                to {\r\n                    transform: scale(30);\r\n                    opacity: 0;\r\n                }\r\n            }\r\n        `;\r\n            document.head.appendChild(style);\r\n        }\r\n\r\n        \/\/ ========== FORM SUBMISSION ==========\r\n        function initFormSubmission() {\r\n            const form = document.getElementById('contactForm');\r\n            if (!form) return;\r\n\r\n            form.addEventListener('submit', function (e) {\r\n                e.preventDefault();\r\n\r\n                const btn = form.querySelector('.qerat-submit-btn');\r\n                const originalText = btn.innerHTML;\r\n\r\n                \/\/ Loading state\r\n                btn.innerHTML = `\r\n                <svg class=\"spinning\" viewBox=\"0 0 24 24\" style=\"animation: spin 1s linear infinite;\">\r\n                    <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-dasharray=\"30 70\"\/>\r\n                <\/svg>\r\n                Sending...\r\n            `;\r\n                btn.disabled = true;\r\n\r\n                \/\/ Simulate form submission\r\n                setTimeout(function () {\r\n                    btn.innerHTML = `\r\n                    <svg viewBox=\"0 0 24 24\">\r\n                        <polyline points=\"20 6 9 17 4 12\"\/>\r\n                    <\/svg>\r\n                    Message Sent!\r\n                `;\r\n                    btn.style.background = 'linear-gradient(135deg, #28a745 0%, #218838 100%)';\r\n\r\n                    setTimeout(function () {\r\n                        btn.innerHTML = originalText;\r\n                        btn.style.background = '';\r\n                        btn.disabled = false;\r\n                        form.reset();\r\n                    }, 2500);\r\n                }, 1500);\r\n            });\r\n\r\n            \/\/ Add spinning animation\r\n            const style = document.createElement('style');\r\n            style.textContent = `\r\n            @keyframes spin {\r\n                from { transform: rotate(0deg); }\r\n                to { transform: rotate(360deg); }\r\n            }\r\n            .spinning {\r\n                animation: spin 1s linear infinite;\r\n            }\r\n        `;\r\n            document.head.appendChild(style);\r\n        }\r\n\r\n    })();\r\n<\/script>\r\n\r\n<!-- End of QERAT Contact Us Page -->\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Get In Touch We&#8217;d love to hear from you. Whether you have a question, partnership inquiry, or just want to say hello, our team is ready to assist you. Call Us +971 4 234 5678 +964 1 234 567 Email Us info@qerat.com support@qerat.com Working Hours Sunday &#8211; Thursday 9:00 AM &#8211; 6:00 PM Send a [&hellip;]<\/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-1679","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/qeratalmas.ajlan.group\/ar\/wp-json\/wp\/v2\/pages\/1679","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qeratalmas.ajlan.group\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/qeratalmas.ajlan.group\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/qeratalmas.ajlan.group\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/qeratalmas.ajlan.group\/ar\/wp-json\/wp\/v2\/comments?post=1679"}],"version-history":[{"count":8,"href":"https:\/\/qeratalmas.ajlan.group\/ar\/wp-json\/wp\/v2\/pages\/1679\/revisions"}],"predecessor-version":[{"id":1887,"href":"https:\/\/qeratalmas.ajlan.group\/ar\/wp-json\/wp\/v2\/pages\/1679\/revisions\/1887"}],"wp:attachment":[{"href":"https:\/\/qeratalmas.ajlan.group\/ar\/wp-json\/wp\/v2\/media?parent=1679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}