{"id":19,"date":"2026-10-14T11:19:03","date_gmt":"2026-10-14T10:19:03","guid":{"rendered":"https:\/\/main.hastafarin.com\/?page_id=19"},"modified":"2026-10-19T09:22:49","modified_gmt":"2026-10-19T08:22:49","slug":"contact","status":"publish","type":"page","link":"https:\/\/hastafarin.com\/index.php\/contact\/","title":{"rendered":"Contact"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"19\" class=\"elementor elementor-19\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d92198b e-con e-atomic-element e-flexbox-base e-default-div e-6d6ef39 \" data-id=\"d92198b\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"d92198b\" data-e-type=\"e-flexbox\" data-id=\"d92198b\">\n    \t\t<div class=\"elementor-element elementor-element-ba9abd2 elementor-widget elementor-widget-html\" data-id=\"ba9abd2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     HASTAFARIN CONTACT PAGE\n     VERSION 3\n     \n     \u0641\u0642\u0637 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0627\u06cc\u0646 \u0642\u0633\u0645\u062a \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0628\u062f\u0647\n     ========================================================= -->\n\n<script>\nwindow.HASTAFARIN_CONTACT = {\n\n    \/* ---------------------------------------------------------\n       COMPANY\n       --------------------------------------------------------- *\/\n\n    company: {\n        name: \"Hastafarin Co.\",\n        buildingName: \"SHahab\",\n\n        buildingImage:\n            \"https:\/\/main.hastafarin.com\/wp-content\/uploads\/2026\/10\/\u0628\u0631\u062c-\u0646\u0627\u0647\u06cc\u062f.jpg\",\n\n        logo:\n            \"https:\/\/main.hastafarin.com\/wp-content\/uploads\/2026\/10\/hastafarin-a0c9e32bff-favicon.svg\"\n    },\n\n\n    \/* ---------------------------------------------------------\n       PHONE\n       show: true \/ false\n       --------------------------------------------------------- *\/\n\n    phone: {\n        show: true,\n        title: \"Our Phone\",\n        display: \"021-88550750\",\n        tel: \"+982188550750\"\n    },\n\n\n    \/* ---------------------------------------------------------\n       FAX\n\n       \u0627\u06af\u0631 \u0641\u06a9\u0633 \u0646\u0645\u06cc\u062e\u0648\u0627\u0647\u06cc:\n       show: false\n\n       \u0627\u06af\u0631 \u0641\u06a9\u0633 \u062f\u0627\u0631\u06cc:\n       show: true\n       display \u0648 tel \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\n       --------------------------------------------------------- *\/\n\n    fax: {\n        show: false,\n        title: \"Our Fax\",\n        display: \"\",\n        tel: \"\"\n    },\n\n\n    \/* ---------------------------------------------------------\n       BUSINESS DEVELOPMENT EMAIL\n       --------------------------------------------------------- *\/\n\n    businessDevelopment: {\n        show: true,\n        title: \"Email\",\n        email: \"info@hastafarin.com\"\n    },\n\n\n    \/* ---------------------------------------------------------\n       ADDRESS\n       \u0645\u062a\u0646 \u0646\u0645\u0627\u06cc\u0634\u06cc \u0633\u0627\u06cc\u062a\n       --------------------------------------------------------- *\/\n\n    address: {\n        title: \"Visit us\",\n\n        display:\n            \"Unit 703, No. 2, Shahab Office Complex, Ramatya Alley, Valiasr St., Tehran, Iran\",\n\n        postalCode:\n            \"\" \/\/ \u06a9\u062f \u067e\u0633\u062a\u06cc \u062c\u062f\u06cc\u062f \u0627\u0639\u0644\u0627\u0645 \u0646\u0634\u062f\u0647 \u0627\u0633\u062a\n    },\n\n\n    \/* ---------------------------------------------------------\n       MAP \u2014 Shahab coordinates\n       --------------------------------------------------------- *\/\n\n    map: {\n\n        useCoordinates: true,\n\n        latitude: 35.731906,\n        longitude: 51.411584,\n\n        searchAddress:\n            \"Unit 703, No. 2, Shahab Office Complex, Ramatya Alley, Valiasr St., Tehran, Iran\",\n\n        zoom: 17,\n\n        buttonText:\n            \"View on Google Maps\"\n    },\n\n\n    \/* ---------------------------------------------------------\n       COMPANY LEGAL INFORMATION\n       \n       \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062b\u0628\u062a\u06cc \u0634\u0631\u06a9\u062a\n       \n       \u0627\u06af\u0631 \u0646\u0645\u06cc\u062e\u0648\u0627\u0647\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f:\n       show: false\n       \n       \u0627\u06af\u0631 \u062e\u0648\u0627\u0633\u062a\u06cc:\n       show: true\n       \u0648 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u067e\u0631 \u06a9\u0646.\n       \n       \u0647\u0631 \u0645\u0648\u0631\u062f\u06cc \u06a9\u0647 \u062e\u0627\u0644\u06cc \u0628\u0627\u0634\u062f \u062e\u0648\u062f\u06a9\u0627\u0631 \u0645\u062e\u0641\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f.\n       --------------------------------------------------------- *\/\n\n    legal: {\n\n        show: false,\n\n        title:\n            \"Company Information\",\n\n        registrationNumber: \"\",\n\n        nationalId: \"\",\n\n        economicCode: \"\"\n    },\n\n\n    \/* ---------------------------------------------------------\n       CONTACT FORM\n       \n       \u062a\u0648\u062c\u0647:\n       \u0627\u06cc\u0645\u06cc\u0644 \u0645\u0642\u0635\u062f \u0648\u0627\u0642\u0639\u06cc \u0627\u0632 PHP \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc\u200c\u0634\u0648\u062f\n       \u0648 \u0646\u0647 \u0627\u0632 JavaScript.\n       \n       \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0631\u0627\u06cc \u0627\u0645\u0646\u06cc\u062a \u0641\u0631\u0645 \u0627\u0633\u062a.\n       --------------------------------------------------------- *\/\n\n    form: {\n\n        title:\n            \"Contact us\",\n\n        kicker:\n            \"Get in touch\",\n\n        showPhone:\n            false,\n\n        nameLabel:\n            \"Your name\",\n\n        emailLabel:\n            \"Your email\",\n\n        phoneLabel:\n            \"Your phone\",\n\n        subjectLabel:\n            \"Subject\",\n\n        messageLabel:\n            \"Your message (optional)\",\n\n        buttonText:\n            \"Send message\",\n\n        sendingText:\n            \"Sending...\",\n\n        successMessage:\n            \"Your message has been sent successfully.\",\n\n        errorMessage:\n            \"Something went wrong. Please try again.\"\n    }\n\n};\n<\/script>\n\n\n<style>\n\/* =========================================================\n   HASTAFARIN CONTACT\n   ========================================================= *\/\n\n.hfc3 {\n    --hfc-dark: #0b3540;\n    --hfc-dark-2: #082b34;\n    --hfc-dark-3: #154852;\n\n    --hfc-teal: #659f9e;\n    --hfc-teal-light: #a8ceca;\n\n    --hfc-orange: #eb7d35;\n\n    --hfc-text: #4b6067;\n    --hfc-muted: #819196;\n\n    --hfc-white: #ffffff;\n    --hfc-soft: #f5f8f7;\n\n    --hfc-border: rgba(11,53,64,.09);\n\n    position: relative;\n\n    width: 100%;\n\n    overflow: hidden;\n\n    padding:\n        95px 24px\n        105px;\n\n    background:\n        radial-gradient(\n            circle at 5% 7%,\n            rgba(101,159,158,.13),\n            transparent 26%\n        ),\n        radial-gradient(\n            circle at 96% 52%,\n            rgba(235,125,53,.055),\n            transparent 25%\n        ),\n        linear-gradient(\n            180deg,\n            #ffffff 0%,\n            #f6f9f8 100%\n        );\n\n    font-family: inherit;\n}\n\n\n.hfc3 *,\n.hfc3 *::before,\n.hfc3 *::after {\n    box-sizing: border-box;\n}\n\n\n.hfc3 a {\n    text-decoration: none;\n}\n\n\n.hfc3-shell {\n    position: relative;\n    z-index: 3;\n\n    width: 100%;\n    max-width: 1200px;\n\n    margin: 0 auto;\n}\n\n\n\/* =========================================================\n   BACKGROUND LOTUS\n   ========================================================= *\/\n\n.hfc3-bg-lotus {\n    position: absolute;\n\n    top: 100px;\n    right: -240px;\n\n    width: 500px;\n    height: 500px;\n\n    opacity: .022;\n\n    pointer-events: none;\n\n    transform: rotate(-13deg);\n}\n\n\n.hfc3-bg-lotus img {\n    width: 100%;\n    height: 100%;\n\n    object-fit: contain;\n}\n\n\n\/* =========================================================\n   HEADER\n   ========================================================= *\/\n\n.hfc3-header {\n    max-width: 750px;\n\n    margin:\n        0 auto\n        55px;\n\n    text-align: center;\n}\n\n\n.hfc3-eyebrow {\n    display: inline-flex;\n\n    align-items: center;\n\n    gap: 10px;\n\n    padding:\n        8px 16px;\n\n    margin-bottom: 18px;\n\n    border:\n        1px solid\n        rgba(101,159,158,.18);\n\n    border-radius: 50px;\n\n    background:\n        rgba(255,255,255,.74);\n\n    color:\n        var(--hfc-teal);\n\n    backdrop-filter:\n        blur(10px);\n\n    -webkit-backdrop-filter:\n        blur(10px);\n\n    font-size: 10px;\n    font-weight: 700;\n\n    letter-spacing: 2.2px;\n\n    text-transform: uppercase;\n}\n\n\n.hfc3-eyebrow::before {\n    content: \"\";\n\n    width: 7px;\n    height: 7px;\n\n    border-radius: 50%;\n\n    background:\n        var(--hfc-orange);\n\n    box-shadow:\n        0 0 0 5px\n        rgba(235,125,53,.09);\n}\n\n\n.hfc3-header h1 {\n    margin: 0;\n\n    color:\n        var(--hfc-dark);\n\n    font-size:\n        clamp(\n            42px,\n            5vw,\n            68px\n        );\n\n    font-weight: 700;\n\n    line-height: 1.04;\n\n    letter-spacing: -2px;\n}\n\n\n.hfc3-header h1 span {\n    color:\n        var(--hfc-teal);\n}\n\n\n.hfc3-header-line {\n    display: block;\n\n    width: 76px;\n    height: 3px;\n\n    margin:\n        24px auto\n        0;\n\n    border-radius: 20px;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            var(--hfc-teal),\n            transparent\n        );\n}\n\n\n\/* =========================================================\n   TOP GRID\n   ========================================================= *\/\n\n.hfc3-top {\n    display: grid;\n\n    grid-template-columns:\n        minmax(0,1.4fr)\n        minmax(300px,.6fr);\n\n    gap: 22px;\n\n    margin-bottom: 75px;\n}\n\n\n\/* =========================================================\n   BUILDING IMAGE\n   ========================================================= *\/\n\n.hfc3-building {\n    position: relative;\n\n    min-height: 590px;\n\n    overflow: hidden;\n\n    border-radius: 30px;\n\n    background: #dce4e3;\n\n    box-shadow:\n        0 25px 70px\n        rgba(11,53,64,.12);\n}\n\n\n.hfc3-building::after {\n    content: \"\";\n\n    position: absolute;\n\n    inset: 0;\n\n    z-index: 1;\n\n    pointer-events: none;\n\n    background:\n        linear-gradient(\n            180deg,\n            rgba(8,42,51,0) 32%,\n            rgba(8,42,51,.06) 57%,\n            rgba(8,42,51,.78) 100%\n        );\n}\n\n\n.hfc3-building-image {\n    position: absolute;\n\n    inset: 0;\n\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n    object-position: center;\n\n    transition:\n        transform .8s\n        cubic-bezier(.2,.7,.2,1);\n}\n\n\n.hfc3-building:hover\n.hfc3-building-image {\n    transform:\n        scale(1.025);\n}\n\n\n.hfc3-building-content {\n    position: absolute;\n\n    z-index: 3;\n\n    left: 30px;\n    right: 30px;\n    bottom: 29px;\n\n    display: flex;\n\n    align-items: flex-end;\n    justify-content: space-between;\n\n    gap: 25px;\n}\n\n\n.hfc3-building-label {\n    display: flex;\n\n    align-items: center;\n\n    gap: 9px;\n\n    margin-bottom: 10px;\n\n    color:\n        rgba(255,255,255,.72);\n\n    font-size: 9px;\n    font-weight: 600;\n\n    letter-spacing: 1.8px;\n\n    text-transform: uppercase;\n}\n\n\n.hfc3-building-label::before {\n    content: \"\";\n\n    width: 24px;\n    height: 1px;\n\n    background:\n        var(--hfc-orange);\n}\n\n\n.hfc3-building-title {\n    margin: 0;\n\n    color: #fff;\n\n    font-size:\n        clamp(\n            27px,\n            3vw,\n            39px\n        );\n\n    font-weight: 700;\n\n    line-height: 1.15;\n\n    letter-spacing: -.7px;\n}\n\n\n.hfc3-building-map {\n    width: 56px;\n    height: 56px;\n\n    flex:\n        0 0 56px;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    border:\n        1px solid\n        rgba(255,255,255,.38);\n\n    border-radius: 50%;\n\n    color: #fff;\n\n    background:\n        rgba(255,255,255,.11);\n\n    backdrop-filter:\n        blur(9px);\n\n    -webkit-backdrop-filter:\n        blur(9px);\n\n    transition:\n        background .3s ease,\n        transform .3s ease;\n}\n\n\n.hfc3-building-map:hover {\n    background:\n        rgba(255,255,255,.22);\n\n    transform:\n        translateY(-3px);\n}\n\n\n.hfc3-building-map svg {\n    width: 23px;\n    height: 23px;\n\n    fill: none;\n\n    stroke: currentColor;\n\n    stroke-width: 1.6;\n\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\n\/* =========================================================\n   CONTACT CARDS\n   ========================================================= *\/\n\n.hfc3-cards {\n    display: flex;\n\n    flex-direction: column;\n\n    gap: 13px;\n}\n\n\n.hfc3-info {\n    position: relative;\n\n    flex: 1;\n\n    min-height: 165px;\n\n    overflow: hidden;\n\n    padding: 25px;\n\n    border:\n        1px solid\n        var(--hfc-border);\n\n    border-radius: 23px;\n\n    background:\n        rgba(255,255,255,.94);\n\n    box-shadow:\n        0 15px 42px\n        rgba(11,53,64,.055);\n\n    transition:\n        transform .35s ease,\n        box-shadow .35s ease,\n        border-color .35s ease;\n}\n\n\n.hfc3-info:hover {\n    transform:\n        translateY(-4px);\n\n    border-color:\n        rgba(101,159,158,.24);\n\n    box-shadow:\n        0 23px 55px\n        rgba(11,53,64,.09);\n}\n\n\n.hfc3-info::after {\n    content: \"\";\n\n    position: absolute;\n\n    width: 125px;\n    height: 125px;\n\n    right: -68px;\n    top: -68px;\n\n    border-radius: 50%;\n\n    background:\n        rgba(101,159,158,.075);\n}\n\n\n.hfc3-info-icon {\n    position: relative;\n\n    z-index: 2;\n\n    width: 46px;\n    height: 46px;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    margin-bottom: 20px;\n\n    border-radius: 14px;\n\n    background:\n        rgba(101,159,158,.11);\n}\n\n\n.hfc3-info-icon svg {\n    width: 21px;\n    height: 21px;\n\n    fill: none;\n\n    stroke:\n        var(--hfc-teal);\n\n    stroke-width: 1.7;\n\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\n.hfc3-info h3 {\n    position: relative;\n\n    z-index: 2;\n\n    margin:\n        0 0\n        7px;\n\n    color:\n        var(--hfc-dark);\n\n    font-size: 14px;\n    font-weight: 700;\n\n    line-height: 1.3;\n}\n\n\n.hfc3-info-value {\n    position: relative;\n\n    z-index: 2;\n\n    display: inline-block;\n\n    color:\n        var(--hfc-text);\n\n    font-size: 15px;\n    font-weight: 500;\n\n    line-height: 1.5;\n\n    word-break: break-word;\n}\n\n\na.hfc3-info-value {\n    transition:\n        color .3s ease;\n}\n\n\na.hfc3-info-value:hover {\n    color:\n        var(--hfc-teal);\n}\n\n\n.hfc3-hidden {\n    display: none !important;\n}\n\n\n\/* =========================================================\n   LOWER GRID\n   ========================================================= *\/\n\n.hfc3-lower {\n    display: grid;\n\n    grid-template-columns:\n        minmax(0,1.03fr)\n        minmax(370px,.97fr);\n\n    gap: 22px;\n\n    align-items: stretch;\n}\n\n\n\/* =========================================================\n   FORM CARD\n   ========================================================= *\/\n\n.hfc3-form-card {\n    position: relative;\n\n    padding: 41px;\n\n    border:\n        1px solid\n        var(--hfc-border);\n\n    border-radius: 28px;\n\n    background: #fff;\n\n    box-shadow:\n        0 22px 65px\n        rgba(11,53,64,.065);\n}\n\n\n.hfc3-number {\n    position: absolute;\n\n    right: 31px;\n    top: 25px;\n\n    color:\n        rgba(11,53,64,.045);\n\n    font-size: 70px;\n    font-weight: 800;\n\n    line-height: 1;\n\n    pointer-events: none;\n}\n\n\n.hfc3-card-head {\n    position: relative;\n\n    z-index: 2;\n\n    margin-bottom: 30px;\n}\n\n\n.hfc3-card-head span {\n    display: block;\n\n    margin-bottom: 8px;\n\n    color:\n        var(--hfc-teal);\n\n    font-size: 9px;\n    font-weight: 700;\n\n    letter-spacing: 1.9px;\n\n    text-transform: uppercase;\n}\n\n\n.hfc3-card-head h2 {\n    margin: 0;\n\n    color:\n        var(--hfc-dark);\n\n    font-size: 31px;\n    font-weight: 700;\n\n    line-height: 1.2;\n}\n\n\n\/* =========================================================\n   FORM\n   ========================================================= *\/\n\n.hfc3-form {\n    position: relative;\n\n    z-index: 2;\n}\n\n\n.hfc3-two-fields {\n    display: grid;\n\n    grid-template-columns:\n        repeat(\n            2,\n            minmax(0,1fr)\n        );\n\n    gap: 14px;\n}\n\n\n.hfc3-field {\n    margin-bottom: 15px;\n}\n\n\n.hfc3-field label {\n    display: block;\n\n    margin-bottom: 8px;\n\n    color:\n        var(--hfc-dark);\n\n    font-size: 12px;\n    font-weight: 600;\n}\n\n\n.hfc3-field input,\n.hfc3-field textarea {\n    display: block;\n\n    width: 100%;\n\n    margin: 0;\n\n    outline: 0;\n\n    border:\n        1px solid\n        rgba(11,53,64,.10);\n\n    border-radius: 14px;\n\n    color:\n        var(--hfc-dark);\n\n    background:\n        #f7f9f8;\n\n    font-family: inherit;\n\n    font-size: 14px;\n\n    transition:\n        border-color .3s ease,\n        background .3s ease,\n        box-shadow .3s ease;\n}\n\n\n.hfc3-field input {\n    min-height: 53px;\n\n    padding:\n        0 15px;\n}\n\n\n.hfc3-field textarea {\n    min-height: 155px;\n\n    padding: 15px;\n\n    resize: vertical;\n}\n\n\n.hfc3-field input:focus,\n.hfc3-field textarea:focus {\n    border-color:\n        rgba(101,159,158,.73);\n\n    background: #fff;\n\n    box-shadow:\n        0 0 0 4px\n        rgba(101,159,158,.08);\n}\n\n\n.hfc3-honeypot {\n    position: absolute !important;\n\n    left: -99999px !important;\n    top: -99999px !important;\n\n    width: 1px !important;\n    height: 1px !important;\n\n    opacity: 0 !important;\n\n    pointer-events: none !important;\n}\n\n\n\/* =========================================================\n   SUBMIT\n   ========================================================= *\/\n\n.hfc3-submit {\n    width: 100%;\n    min-height: 57px;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: space-between;\n\n    gap: 20px;\n\n    margin-top: 7px;\n\n    padding:\n        0 18px\n        0 22px;\n\n    border: 0;\n    border-radius: 15px;\n\n    cursor: pointer;\n\n    color: #fff;\n\n    background:\n        var(--hfc-dark);\n\n    font-family: inherit;\n\n    font-size: 13px;\n    font-weight: 600;\n\n    transition:\n        background .3s ease,\n        transform .3s ease,\n        box-shadow .3s ease;\n}\n\n\n.hfc3-submit:hover {\n    background:\n        var(--hfc-dark-3);\n\n    transform:\n        translateY(-2px);\n\n    box-shadow:\n        0 14px 30px\n        rgba(11,53,64,.18);\n}\n\n\n.hfc3-submit:disabled {\n    opacity: .62;\n\n    cursor: wait;\n\n    transform: none;\n}\n\n\n.hfc3-submit-icon {\n    width: 33px;\n    height: 33px;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n\n    background:\n        rgba(255,255,255,.10);\n}\n\n\n.hfc3-submit-icon svg {\n    width: 17px;\n    height: 17px;\n\n    fill: none;\n\n    stroke: currentColor;\n\n    stroke-width: 1.7;\n\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\n\/* =========================================================\n   FORM STATUS\n   ========================================================= *\/\n\n.hfc3-status {\n    display: none;\n\n    margin-top: 15px;\n\n    padding:\n        12px 14px;\n\n    border-radius: 12px;\n\n    font-size: 12px;\n    line-height: 1.6;\n}\n\n\n.hfc3-status.is-success {\n    display: block;\n\n    color: #206149;\n\n    background: #edf8f2;\n\n    border:\n        1px solid\n        rgba(32,97,73,.13);\n}\n\n\n.hfc3-status.is-error {\n    display: block;\n\n    color: #9b3737;\n\n    background: #fff2f2;\n\n    border:\n        1px solid\n        rgba(155,55,55,.12);\n}\n\n\n\/* =========================================================\n   LOCATION CARD\n   ========================================================= *\/\n\n.hfc3-location {\n    overflow: hidden;\n\n    display: flex;\n    flex-direction: column;\n\n    border:\n        1px solid\n        var(--hfc-border);\n\n    border-radius: 28px;\n\n    background: #fff;\n\n    box-shadow:\n        0 22px 65px\n        rgba(11,53,64,.065);\n}\n\n\n.hfc3-location-info {\n    padding:\n        35px 34px\n        29px;\n\n    color: #fff;\n\n    background:\n        radial-gradient(\n            circle at 90% 0%,\n            rgba(101,159,158,.19),\n            transparent 31%\n        ),\n        linear-gradient(\n            140deg,\n            #123f49,\n            #082b34\n        );\n}\n\n\n.hfc3-location-heading {\n    display: flex;\n\n    align-items: center;\n\n    gap: 13px;\n\n    margin-bottom: 23px;\n}\n\n\n.hfc3-location-icon {\n    width: 43px;\n    height: 43px;\n\n    flex:\n        0 0 43px;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 13px;\n\n    color:\n        var(--hfc-teal-light);\n\n    background:\n        rgba(255,255,255,.07);\n}\n\n\n.hfc3-location-icon svg {\n    width: 20px;\n    height: 20px;\n\n    fill: none;\n\n    stroke: currentColor;\n\n    stroke-width: 1.6;\n\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\n.hfc3-location-heading h2 {\n    margin: 0;\n\n    color: #fff;\n\n    font-size: 25px;\n    font-weight: 700;\n}\n\n\n.hfc3-address {\n    margin:\n        0 0\n        22px;\n\n    color:\n        rgba(255,255,255,.76);\n\n    font-size: 14px;\n\n    line-height: 1.85;\n}\n\n\n.hfc3-address strong {\n    color: #fff;\n}\n\n\n\/* =========================================================\n   META\n   ========================================================= *\/\n\n.hfc3-meta {\n    display: grid;\n\n    grid-template-columns:\n        repeat(\n            2,\n            minmax(0,1fr)\n        );\n\n    gap: 9px;\n}\n\n\n.hfc3-meta-item {\n    padding:\n        12px 13px;\n\n    border:\n        1px solid\n        rgba(255,255,255,.075);\n\n    border-radius: 11px;\n\n    background:\n        rgba(255,255,255,.04);\n}\n\n\n.hfc3-meta-label {\n    display: block;\n\n    margin-bottom: 4px;\n\n    color:\n        rgba(255,255,255,.43);\n\n    font-size: 9px;\n    font-weight: 600;\n\n    letter-spacing: 1px;\n\n    text-transform: uppercase;\n}\n\n\n.hfc3-meta-value {\n    color:\n        rgba(255,255,255,.86);\n\n    font-size: 11.5px;\n\n    line-height: 1.5;\n}\n\n\n.hfc3-meta-value a {\n    color: inherit;\n}\n\n\n\/* =========================================================\n   LEGAL INFO\n   ========================================================= *\/\n\n.hfc3-legal {\n    margin-top: 18px;\n\n    padding-top: 19px;\n\n    border-top:\n        1px solid\n        rgba(255,255,255,.09);\n}\n\n\n.hfc3-legal-title {\n    margin:\n        0 0\n        13px;\n\n    color:\n        rgba(255,255,255,.92);\n\n    font-size: 12px;\n    font-weight: 700;\n}\n\n\n.hfc3-legal-grid {\n    display: grid;\n\n    grid-template-columns:\n        repeat(\n            2,\n            minmax(0,1fr)\n        );\n\n    gap: 8px;\n}\n\n\n.hfc3-legal-item {\n    padding:\n        10px 11px;\n\n    border-radius: 10px;\n\n    background:\n        rgba(255,255,255,.045);\n}\n\n\n.hfc3-legal-item small {\n    display: block;\n\n    margin-bottom: 4px;\n\n    color:\n        rgba(255,255,255,.41);\n\n    font-size: 8px;\n\n    letter-spacing: .8px;\n\n    text-transform: uppercase;\n}\n\n\n.hfc3-legal-item span {\n    color:\n        rgba(255,255,255,.82);\n\n    font-size: 11px;\n}\n\n\n\/* =========================================================\n   MAP\n   ========================================================= *\/\n\n.hfc3-map {\n    position: relative;\n\n    flex: 1;\n\n    min-height: 390px;\n\n    overflow: hidden;\n\n    background: #e9efed;\n}\n\n\n.hfc3-map iframe {\n    position: absolute;\n\n    inset: 0;\n\n    width: 100%;\n    height: 100%;\n\n    border: 0;\n\n    filter:\n        saturate(.82)\n        contrast(.97);\n}\n\n\n.hfc3-map-top-shadow {\n    position: absolute;\n\n    z-index: 2;\n\n    left: 0;\n    top: 0;\n\n    width: 100%;\n    height: 35px;\n\n    pointer-events: none;\n\n    background:\n        linear-gradient(\n            180deg,\n            rgba(8,43,52,.17),\n            transparent\n        );\n}\n\n\n.hfc3-map-link {\n    position: absolute;\n\n    z-index: 5;\n\n    left: 20px;\n    bottom: 20px;\n\n    display: inline-flex;\n\n    align-items: center;\n\n    gap: 9px;\n\n    padding:\n        11px 15px;\n\n    border-radius: 12px;\n\n    color:\n        var(--hfc-dark);\n\n    background:\n        rgba(255,255,255,.95);\n\n    box-shadow:\n        0 8px 26px\n        rgba(11,53,64,.17);\n\n    backdrop-filter:\n        blur(8px);\n\n    -webkit-backdrop-filter:\n        blur(8px);\n\n    font-size: 11px;\n    font-weight: 600;\n\n    transition:\n        transform .3s ease,\n        box-shadow .3s ease;\n}\n\n\n.hfc3-map-link:hover {\n    transform:\n        translateY(-2px);\n\n    box-shadow:\n        0 12px 31px\n        rgba(11,53,64,.21);\n}\n\n\n.hfc3-map-link svg {\n    width: 16px;\n    height: 16px;\n\n    fill: none;\n\n    stroke:\n        var(--hfc-teal);\n\n    stroke-width: 1.7;\n\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\n\/* =========================================================\n   REVEAL\n   ========================================================= *\/\n\n.hfc3-reveal {\n    opacity: 0;\n\n    transform:\n        translateY(22px);\n\n    transition:\n        opacity .75s ease,\n        transform .75s\n        cubic-bezier(.2,.75,.2,1);\n}\n\n\n.hfc3-reveal.hfc3-visible {\n    opacity: 1;\n\n    transform:\n        translateY(0);\n}\n\n\n\/* =========================================================\n   TABLET\n   ========================================================= *\/\n\n@media (max-width: 1024px) {\n\n    .hfc3 {\n        padding:\n            80px 22px\n            90px;\n    }\n\n\n    .hfc3-top {\n        grid-template-columns:\n            minmax(0,1fr)\n            300px;\n    }\n\n\n    .hfc3-building {\n        min-height: 560px;\n    }\n\n\n    .hfc3-info {\n        padding: 22px;\n    }\n\n\n    .hfc3-lower {\n        grid-template-columns:\n            1fr 1fr;\n    }\n\n\n    .hfc3-form-card {\n        padding: 32px;\n    }\n\n\n    .hfc3-location-info {\n        padding:\n            30px 27px\n            26px;\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 767px) {\n\n    .hfc3 {\n        padding:\n            61px 16px\n            72px;\n    }\n\n\n    .hfc3-header {\n        margin-bottom: 38px;\n    }\n\n\n    .hfc3-eyebrow {\n        font-size: 9px;\n\n        letter-spacing: 1.7px;\n    }\n\n\n    .hfc3-header h1 {\n        font-size: 40px;\n\n        letter-spacing: -1.2px;\n    }\n\n\n    \/* Top *\/\n\n    .hfc3-top {\n        grid-template-columns: 1fr;\n\n        gap: 14px;\n\n        margin-bottom: 55px;\n    }\n\n\n    \/* Building *\/\n\n    .hfc3-building {\n        min-height: 470px;\n\n        border-radius: 22px;\n    }\n\n\n    .hfc3-building-content {\n        left: 20px;\n        right: 20px;\n        bottom: 20px;\n    }\n\n\n    .hfc3-building-label {\n        font-size: 8px;\n    }\n\n\n    .hfc3-building-title {\n        font-size: 25px;\n    }\n\n\n    .hfc3-building-map {\n        width: 48px;\n        height: 48px;\n\n        flex-basis: 48px;\n    }\n\n\n    \/* Cards *\/\n\n    .hfc3-cards {\n        gap: 10px;\n    }\n\n\n    .hfc3-info {\n        min-height: auto;\n\n        display: grid;\n\n        grid-template-columns:\n            46px\n            minmax(0,1fr);\n\n        grid-template-rows:\n            auto auto;\n\n        column-gap: 15px;\n\n        padding: 19px;\n\n        border-radius: 18px;\n    }\n\n\n    .hfc3-info:hover {\n        transform: none;\n    }\n\n\n    .hfc3-info-icon {\n        grid-row:\n            1 \/ 3;\n\n        align-self: center;\n\n        margin: 0;\n    }\n\n\n    .hfc3-info h3 {\n        margin:\n            1px 0\n            4px;\n\n        font-size: 13px;\n    }\n\n\n    .hfc3-info-value {\n        font-size: 14px;\n    }\n\n\n    \/* Lower *\/\n\n    .hfc3-lower {\n        grid-template-columns: 1fr;\n\n        gap: 15px;\n    }\n\n\n    \/* Form *\/\n\n    .hfc3-form-card {\n        padding:\n            27px 20px\n            23px;\n\n        border-radius: 21px;\n    }\n\n\n    .hfc3-number {\n        right: 20px;\n        top: 20px;\n\n        font-size: 52px;\n    }\n\n\n    .hfc3-card-head {\n        margin-bottom: 25px;\n    }\n\n\n    .hfc3-card-head h2 {\n        font-size: 27px;\n    }\n\n\n    .hfc3-two-fields {\n        grid-template-columns: 1fr;\n\n        gap: 0;\n    }\n\n\n    .hfc3-field input {\n        min-height: 52px;\n    }\n\n\n    .hfc3-field textarea {\n        min-height: 140px;\n    }\n\n\n    \/* Location *\/\n\n    .hfc3-location {\n        border-radius: 21px;\n    }\n\n\n    .hfc3-location-info {\n        padding:\n            25px 20px\n            23px;\n    }\n\n\n    .hfc3-location-heading h2 {\n        font-size: 23px;\n    }\n\n\n    .hfc3-address {\n        font-size: 13px;\n    }\n\n\n    .hfc3-meta {\n        grid-template-columns: 1fr;\n    }\n\n\n    .hfc3-legal-grid {\n        grid-template-columns: 1fr;\n    }\n\n\n    .hfc3-map {\n        min-height: 350px;\n    }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n   ========================================================= *\/\n\n@media (max-width: 390px) {\n\n    .hfc3-building {\n        min-height: 420px;\n    }\n\n\n    .hfc3-building-title {\n        font-size: 22px;\n    }\n\n}\n\n\n\/* =========================================================\n   ACCESSIBILITY\n   ========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .hfc3-reveal {\n        opacity: 1;\n\n        transform: none;\n\n        transition: none;\n    }\n\n\n    .hfc3-building-image,\n    .hfc3-info,\n    .hfc3-submit,\n    .hfc3-map-link {\n        transition: none;\n    }\n\n}\n\/* =========================================================\n   SHAHAB UPDATE: building placeholder and directions link\n   ========================================================= *\/\n.hfc3-building {\n    background:\n        radial-gradient(circle at 70% 25%, rgba(235,125,53,.18), transparent 35%),\n        radial-gradient(circle at 20% 78%, rgba(101,159,158,.25), transparent 43%),\n        linear-gradient(135deg, #154852 0%, #0b3540 56%, #082b34 100%);\n}\n\n.hfc3-contact-directions {\n    position: relative;\n    z-index: 2;\n    display: block;\n    width: fit-content;\n    margin-top: 10px;\n    color: var(--hfc-teal);\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 1.5;\n    text-decoration: underline !important;\n    text-underline-offset: 4px;\n    transition: color .3s ease;\n}\n\n.hfc3-contact-directions:hover {\n    color: var(--hfc-orange);\n}\n\n<\/style>\n\n\n\n<section class=\"hfc3\">\n\n    <div\n        class=\"hfc3-bg-lotus\"\n        aria-hidden=\"true\"\n    >\n        <img decoding=\"async\"\n            data-hfc3-logo\n            src=\"\"\n            alt=\"\"\n        >\n    <\/div>\n\n\n    <div class=\"hfc3-shell\">\n\n\n        <!-- ==============================\n             HEADER\n             ============================== -->\n\n        <header class=\"hfc3-header hfc3-reveal\">\n\n            <div\n                class=\"hfc3-eyebrow\"\n                data-hfc3-company-name\n            >\n                Hastafarin Co.\n            <\/div>\n\n            <h1>\n                Contact <span>us<\/span>\n            <\/h1>\n\n            <span class=\"hfc3-header-line\"><\/span>\n\n        <\/header>\n\n\n\n        <!-- ==============================\n             TOP\n             ============================== -->\n\n        <div class=\"hfc3-top\">\n\n\n            <!-- BUILDING -->\n\n            <div class=\"hfc3-building hfc3-reveal\">\n\n                <img decoding=\"async\"\n                    class=\"hfc3-building-image\"\n                    data-hfc3-building-image\n                    src=\"\"\n                    alt=\"SHahab\"\n                >\n\n\n                <div class=\"hfc3-building-content\">\n\n                    <div>\n\n                        <div\n                            class=\"hfc3-building-label\"\n                            data-hfc3-building-company\n                        >\n                            Hastafarin Co.\n                        <\/div>\n\n                        <h2\n                            class=\"hfc3-building-title\"\n                            data-hfc3-building-name\n                        >\n                            SHahab\n                        <\/h2>\n\n                    <\/div>\n\n\n                    <a\n                        class=\"hfc3-building-map\"\n                        data-hfc3-map-link\n                        href=\"#\"\n                        target=\"_blank\"\n                        rel=\"noopener\"\n                        aria-label=\"View location\"\n                    >\n\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M12 21s6-5.2 6-11a6 6 0 1 0-12 0c0 5.8 6 11 6 11Z\"><\/path>\n                            <circle cx=\"12\" cy=\"10\" r=\"2\"><\/circle>\n                        <\/svg>\n\n                    <\/a>\n\n                <\/div>\n\n            <\/div>\n\n\n\n            <!-- CONTACT CARDS -->\n\n            <div class=\"hfc3-cards\">\n\n\n                <!-- PHONE -->\n\n                <article\n                    class=\"hfc3-info hfc3-reveal\"\n                    data-hfc3-phone-card\n                >\n\n                    <div class=\"hfc3-info-icon\">\n\n                        <svg viewBox=\"0 0 24 24\">\n\n                            <path d=\"M5 4h3l2 5-2 1.5c1.5 3 3.5 5 6.5 6.5L16 15l5 2v3c0 1.1-.9 2-2 2C9.6 22 2 14.4 2 5c0-1.1.9-2 2-2h1\"><\/path>\n\n                        <\/svg>\n\n                    <\/div>\n\n                    <h3 data-hfc3-phone-title>\n                        Our Phone\n                    <\/h3>\n\n                    <a\n                        class=\"hfc3-info-value\"\n                        data-hfc3-phone\n                        href=\"#\"\n                    ><\/a>\n\n                <\/article>\n\n\n\n                <!-- FAX -->\n\n                <article\n                    class=\"hfc3-info hfc3-reveal\"\n                    data-hfc3-fax-card\n                >\n\n                    <div class=\"hfc3-info-icon\">\n\n                        <svg viewBox=\"0 0 24 24\">\n\n                            <path d=\"M6 9V3h12v6\"><\/path>\n\n                            <rect\n                                x=\"5\"\n                                y=\"13\"\n                                width=\"14\"\n                                height=\"8\"\n                                rx=\"1\"\n                            ><\/rect>\n\n                            <path d=\"M5 17H3V9h18v8h-2\"><\/path>\n\n                            <path d=\"M16 12h2\"><\/path>\n\n                        <\/svg>\n\n                    <\/div>\n\n                    <h3 data-hfc3-fax-title>\n                        Our Fax\n                    <\/h3>\n\n                    <span\n                        class=\"hfc3-info-value\"\n                        data-hfc3-fax\n                    ><\/span>\n\n                <\/article>\n\n\n\n                <!-- BUSINESS DEVELOPMENT -->\n\n                <article\n                    class=\"hfc3-info hfc3-reveal\"\n                    data-hfc3-business-card\n                >\n\n                    <div class=\"hfc3-info-icon\">\n\n                        <svg viewBox=\"0 0 24 24\">\n\n                            <rect\n                                x=\"3\"\n                                y=\"5\"\n                                width=\"18\"\n                                height=\"14\"\n                                rx=\"2\"\n                            ><\/rect>\n\n                            <path d=\"m4 7 8 6 8-6\"><\/path>\n\n                        <\/svg>\n\n                    <\/div>\n\n                    <h3 data-hfc3-business-title>\n                                Email\n                    <\/h3>\n\n                    <a\n                        class=\"hfc3-info-value\"\n                        data-hfc3-business-email\n                        href=\"#\"\n                    ><\/a>\n\n                    <a class=\"hfc3-contact-directions\"\n                       href=\"https:\/\/main.hastafarin.com\/index.php\/contact\/\">\n                        Contact details &amp; directions\n                    <\/a>\n\n                <\/article>\n\n\n            <\/div>\n\n        <\/div>\n\n\n\n        <!-- ==============================\n             LOWER\n             ============================== -->\n\n        <div class=\"hfc3-lower\">\n\n\n            <!-- ==========================\n                 CONTACT FORM\n                 ========================== -->\n\n            <div class=\"hfc3-form-card hfc3-reveal\">\n\n                <div\n                    class=\"hfc3-number\"\n                    aria-hidden=\"true\"\n                >\n                    01\n                <\/div>\n\n\n                <div class=\"hfc3-card-head\">\n\n                    <span data-hfc3-form-kicker>\n                        Get in touch\n                    <\/span>\n\n                    <h2 data-hfc3-form-title>\n                        Contact us\n                    <\/h2>\n\n                <\/div>\n\n\n\n                <form\n                    class=\"hfc3-form\"\n                    data-hfc3-form\n                    novalidate\n                >\n\n\n                    <div class=\"hfc3-two-fields\">\n\n\n                        <!-- NAME -->\n\n                        <div class=\"hfc3-field\">\n\n                            <label\n                                for=\"hfc3-name\"\n                                data-hfc3-name-label\n                            >\n                                Your name\n                            <\/label>\n\n                            <input\n                                id=\"hfc3-name\"\n                                name=\"name\"\n                                type=\"text\"\n                                maxlength=\"120\"\n                                autocomplete=\"name\"\n                                required\n                            >\n\n                        <\/div>\n\n\n\n                        <!-- EMAIL -->\n\n                        <div class=\"hfc3-field\">\n\n                            <label\n                                for=\"hfc3-email\"\n                                data-hfc3-email-label\n                            >\n                                Your email\n                            <\/label>\n\n                            <input\n                                id=\"hfc3-email\"\n                                name=\"email\"\n                                type=\"email\"\n                                maxlength=\"190\"\n                                autocomplete=\"email\"\n                                required\n                            >\n\n                        <\/div>\n\n\n                    <\/div>\n\n\n\n                    <!-- OPTIONAL PHONE -->\n\n                    <div\n                        class=\"hfc3-field\"\n                        data-hfc3-form-phone-wrap\n                    >\n\n                        <label\n                            for=\"hfc3-phone\"\n                            data-hfc3-phone-label\n                        >\n                            Your phone\n                        <\/label>\n\n                        <input\n                            id=\"hfc3-phone\"\n                            name=\"phone\"\n                            type=\"tel\"\n                            maxlength=\"60\"\n                            autocomplete=\"tel\"\n                        >\n\n                    <\/div>\n\n\n\n                    <!-- SUBJECT -->\n\n                    <div class=\"hfc3-field\">\n\n                        <label\n                            for=\"hfc3-subject\"\n                            data-hfc3-subject-label\n                        >\n                            Subject\n                        <\/label>\n\n                        <input\n                            id=\"hfc3-subject\"\n                            name=\"subject\"\n                            type=\"text\"\n                            maxlength=\"180\"\n                            required\n                        >\n\n                    <\/div>\n\n\n\n                    <!-- MESSAGE -->\n\n                    <div class=\"hfc3-field\">\n\n                        <label\n                            for=\"hfc3-message\"\n                            data-hfc3-message-label\n                        >\n                            Your message (optional)\n                        <\/label>\n\n                        <textarea\n                            id=\"hfc3-message\"\n                            name=\"message\"\n                            maxlength=\"5000\"\n                        ><\/textarea>\n\n                    <\/div>\n\n\n\n                    <!-- HONEYPOT -->\n\n                    <div\n                        class=\"hfc3-honeypot\"\n                        aria-hidden=\"true\"\n                    >\n\n                        <label>\n                            Website\n\n                            <input\n                                type=\"text\"\n                                name=\"website\"\n                                tabindex=\"-1\"\n                                autocomplete=\"off\"\n                            >\n\n                        <\/label>\n\n                    <\/div>\n\n\n                    <input\n                        type=\"hidden\"\n                        name=\"form_started\"\n                        data-hfc3-form-started\n                    >\n\n\n                    <!-- SUBMIT -->\n\n                    <button\n                        class=\"hfc3-submit\"\n                        type=\"submit\"\n                        data-hfc3-submit\n                    >\n\n                        <span data-hfc3-submit-text>\n                            Send message\n                        <\/span>\n\n\n                        <span class=\"hfc3-submit-icon\">\n\n                            <svg viewBox=\"0 0 24 24\">\n\n                                <path d=\"M5 12h14\"><\/path>\n\n                                <path d=\"m14 7 5 5-5 5\"><\/path>\n\n                            <\/svg>\n\n                        <\/span>\n\n                    <\/button>\n\n\n                    <div\n                        class=\"hfc3-status\"\n                        data-hfc3-status\n                        role=\"status\"\n                        aria-live=\"polite\"\n                    ><\/div>\n\n\n                <\/form>\n\n            <\/div>\n\n\n\n            <!-- ==========================\n                 LOCATION\n                 ========================== -->\n\n            <div class=\"hfc3-location hfc3-reveal\">\n\n\n                <div class=\"hfc3-location-info\">\n\n\n                    <div class=\"hfc3-location-heading\">\n\n                        <span class=\"hfc3-location-icon\">\n\n                            <svg viewBox=\"0 0 24 24\">\n\n                                <path d=\"M12 21s6-5.2 6-11a6 6 0 1 0-12 0c0 5.8 6 11 6 11Z\"><\/path>\n\n                                <circle cx=\"12\" cy=\"10\" r=\"2\"><\/circle>\n\n                            <\/svg>\n\n                        <\/span>\n\n\n                        <h2 data-hfc3-address-title>\n                                Visit us\n                        <\/h2>\n\n                    <\/div>\n\n\n\n                    <p\n                        class=\"hfc3-address\"\n                        data-hfc3-address\n                    ><\/p>\n\n\n\n                    <div class=\"hfc3-meta\">\n\n\n                        <!-- POSTAL CODE -->\n\n                        <div class=\"hfc3-meta-item\" data-hfc3-postal-wrap>\n\n                            <span class=\"hfc3-meta-label\">\n                                Postal Code\n                            <\/span>\n\n                            <span\n                                class=\"hfc3-meta-value\"\n                                data-hfc3-postal\n                            ><\/span>\n\n                        <\/div>\n\n\n\n                        <!-- PHONE -->\n\n                        <div\n                            class=\"hfc3-meta-item\"\n                            data-hfc3-address-phone-wrap\n                        >\n\n                            <span class=\"hfc3-meta-label\">\n                                Tel\n                            <\/span>\n\n                            <span class=\"hfc3-meta-value\">\n\n                                <a\n                                    data-hfc3-address-phone\n                                    href=\"#\"\n                                ><\/a>\n\n                            <\/span>\n\n                        <\/div>\n\n\n                    <\/div>\n\n\n\n                    <!-- LEGAL -->\n\n                    <div\n                        class=\"hfc3-legal\"\n                        data-hfc3-legal\n                    >\n\n                        <h3\n                            class=\"hfc3-legal-title\"\n                            data-hfc3-legal-title\n                        >\n                            Company Information\n                        <\/h3>\n\n\n                        <div class=\"hfc3-legal-grid\">\n\n\n                            <div\n                                class=\"hfc3-legal-item\"\n                                data-hfc3-registration-wrap\n                            >\n\n                                <small>\n                                    Registration No.\n                                <\/small>\n\n                                <span\n                                    data-hfc3-registration\n                                ><\/span>\n\n                            <\/div>\n\n\n\n                            <div\n                                class=\"hfc3-legal-item\"\n                                data-hfc3-national-wrap\n                            >\n\n                                <small>\n                                    National ID\n                                <\/small>\n\n                                <span\n                                    data-hfc3-national\n                                ><\/span>\n\n                            <\/div>\n\n\n\n                            <div\n                                class=\"hfc3-legal-item\"\n                                data-hfc3-economic-wrap\n                            >\n\n                                <small>\n                                    Economic Code\n                                <\/small>\n\n                                <span\n                                    data-hfc3-economic\n                                ><\/span>\n\n                            <\/div>\n\n\n                        <\/div>\n\n                    <\/div>\n\n\n                <\/div>\n\n\n\n                <!-- MAP -->\n\n                <div class=\"hfc3-map\">\n\n                    <iframe\n                        data-hfc3-map\n                        title=\"Hastafarin Location\"\n                        loading=\"lazy\"\n                        allowfullscreen\n                        referrerpolicy=\"no-referrer-when-downgrade\"\n                    ><\/iframe>\n\n\n                    <div\n                        class=\"hfc3-map-top-shadow\"\n                        aria-hidden=\"true\"\n                    ><\/div>\n\n\n                    <a\n                        class=\"hfc3-map-link\"\n                        data-hfc3-map-button\n                        href=\"#\"\n                        target=\"_blank\"\n                        rel=\"noopener\"\n                    >\n\n                        <svg viewBox=\"0 0 24 24\">\n\n                            <path d=\"M12 21s6-5.2 6-11a6 6 0 1 0-12 0c0 5.8 6 11 6 11Z\"><\/path>\n\n                            <circle cx=\"12\" cy=\"10\" r=\"2\"><\/circle>\n\n                        <\/svg>\n\n                        <span data-hfc3-map-button-text>\n                            View on Google Maps\n                        <\/span>\n\n                    <\/a>\n\n                <\/div>\n\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n\n<script>\n(function () {\n\n    \"use strict\";\n\n\n    \/* =========================================================\n       CONFIG\n       ========================================================= *\/\n\n    const config =\n        window.HASTAFARIN_CONTACT;\n\n\n    const root =\n        document.querySelector(\".hfc3\");\n\n\n    if (!root || !config) {\n        return;\n    }\n\n\n\n    \/* =========================================================\n       HELPER FUNCTIONS\n       ========================================================= *\/\n\n    function one(selector) {\n        return root.querySelector(selector);\n    }\n\n\n    function all(selector) {\n        return root.querySelectorAll(selector);\n    }\n\n\n    function text(selector, value) {\n\n        const el = one(selector);\n\n        if (el) {\n            el.textContent =\n                value || \"\";\n        }\n\n    }\n\n\n    function hide(selector) {\n\n        const el = one(selector);\n\n        if (el) {\n            el.classList.add(\n                \"hfc3-hidden\"\n            );\n        }\n\n    }\n\n\n    function show(selector) {\n\n        const el = one(selector);\n\n        if (el) {\n            el.classList.remove(\n                \"hfc3-hidden\"\n            );\n        }\n\n    }\n\n\n\n    \/* =========================================================\n       COMPANY\n       ========================================================= *\/\n\n    text(\n        \"[data-hfc3-company-name]\",\n        config.company.name\n    );\n\n\n    text(\n        \"[data-hfc3-building-company]\",\n        config.company.name\n    );\n\n\n    text(\n        \"[data-hfc3-building-name]\",\n        config.company.buildingName\n    );\n\n\n    const buildingImage =\n        one(\n            \"[data-hfc3-building-image]\"\n        );\n\n\n    if (buildingImage) {\n\n        if (config.company.buildingImage) {\n            buildingImage.src = config.company.buildingImage;\n            buildingImage.alt = config.company.buildingName;\n        } else {\n            buildingImage.removeAttribute(\"src\");\n            buildingImage.classList.add(\"hfc3-hidden\");\n        }\n\n    }\n\n\n    all(\n        \"[data-hfc3-logo]\"\n    ).forEach(function (img) {\n\n        img.src =\n            config.company.logo;\n\n    });\n\n\n\n    \/* =========================================================\n       PHONE\n       ========================================================= *\/\n\n    if (\n        config.phone &&\n        config.phone.show\n    ) {\n\n        text(\n            \"[data-hfc3-phone-title]\",\n            config.phone.title\n        );\n\n\n        const phone =\n            one(\"[data-hfc3-phone]\");\n\n\n        if (phone) {\n\n            phone.textContent =\n                config.phone.display;\n\n            phone.href =\n                \"tel:\" +\n                config.phone.tel;\n\n        }\n\n\n        const addressPhone =\n            one(\n                \"[data-hfc3-address-phone]\"\n            );\n\n\n        if (addressPhone) {\n\n            addressPhone.textContent =\n                config.phone.display;\n\n            addressPhone.href =\n                \"tel:\" +\n                config.phone.tel;\n\n        }\n\n    } else {\n\n        hide(\n            \"[data-hfc3-phone-card]\"\n        );\n\n        hide(\n            \"[data-hfc3-address-phone-wrap]\"\n        );\n\n    }\n\n\n\n    \/* =========================================================\n       FAX\n       ========================================================= *\/\n\n    if (\n        config.fax &&\n        config.fax.show &&\n        config.fax.display\n    ) {\n\n        text(\n            \"[data-hfc3-fax-title]\",\n            config.fax.title\n        );\n\n\n        text(\n            \"[data-hfc3-fax]\",\n            config.fax.display\n        );\n\n    } else {\n\n        hide(\n            \"[data-hfc3-fax-card]\"\n        );\n\n    }\n\n\n\n    \/* =========================================================\n       BUSINESS DEVELOPMENT\n       ========================================================= *\/\n\n    if (\n        config.businessDevelopment &&\n        config.businessDevelopment.show &&\n        config.businessDevelopment.email\n    ) {\n\n        text(\n            \"[data-hfc3-business-title]\",\n            config.businessDevelopment.title\n        );\n\n\n        const email =\n            one(\n                \"[data-hfc3-business-email]\"\n            );\n\n\n        if (email) {\n\n            email.textContent =\n                config.businessDevelopment.email;\n\n            email.href =\n                \"mailto:\" +\n                config.businessDevelopment.email;\n\n        }\n\n    } else {\n\n        hide(\n            \"[data-hfc3-business-card]\"\n        );\n\n    }\n\n\n\n    \/* =========================================================\n       ADDRESS\n       ========================================================= *\/\n\n    text(\n        \"[data-hfc3-address-title]\",\n        config.address.title\n    );\n\n\n    text(\n        \"[data-hfc3-address]\",\n        config.address.display\n    );\n\n\n    text(\n        \"[data-hfc3-postal]\",\n        config.address.postalCode\n    );\n\n    if (!config.address.postalCode) {\n        hide(\"[data-hfc3-postal-wrap]\");\n    }\n\n\n\n    \/* =========================================================\n       MAP\n       ========================================================= *\/\n\n    function getMapQuery() {\n\n        if (\n            config.map.useCoordinates &&\n            config.map.latitude !== null &&\n            config.map.longitude !== null\n        ) {\n\n            return (\n                String(\n                    config.map.latitude\n                ) +\n                \",\" +\n                String(\n                    config.map.longitude\n                )\n            );\n\n        }\n\n\n        return config.map.searchAddress;\n\n    }\n\n\n    const mapQuery =\n        getMapQuery();\n\n\n    const encodedMapQuery =\n        encodeURIComponent(\n            mapQuery\n        );\n\n\n    const googleMapEmbed =\n        \"https:\/\/www.google.com\/maps?q=\" +\n        encodedMapQuery +\n        \"&z=\" +\n        encodeURIComponent(\n            config.map.zoom || 17\n        ) +\n        \"&output=embed\";\n\n\n    const googleMapUrl =\n        \"https:\/\/www.google.com\/maps\/search\/?api=1&query=\" +\n        encodedMapQuery;\n\n\n    const mapIframe =\n        one(\"[data-hfc3-map]\");\n\n\n    if (mapIframe) {\n\n        mapIframe.src =\n            googleMapEmbed;\n\n    }\n\n\n    all(\n        \"[data-hfc3-map-link],\" +\n        \"[data-hfc3-map-button]\"\n    ).forEach(\n        function (link) {\n\n            link.href =\n                googleMapUrl;\n\n        }\n    );\n\n\n    text(\n        \"[data-hfc3-map-button-text]\",\n        config.map.buttonText\n    );\n\n\n\n    \/* =========================================================\n       LEGAL INFORMATION\n       ========================================================= *\/\n\n    if (\n        config.legal &&\n        config.legal.show\n    ) {\n\n        show(\n            \"[data-hfc3-legal]\"\n        );\n\n\n        text(\n            \"[data-hfc3-legal-title]\",\n            config.legal.title\n        );\n\n\n        if (\n            config.legal.registrationNumber\n        ) {\n\n            text(\n                \"[data-hfc3-registration]\",\n                config.legal.registrationNumber\n            );\n\n        } else {\n\n            hide(\n                \"[data-hfc3-registration-wrap]\"\n            );\n\n        }\n\n\n        if (\n            config.legal.nationalId\n        ) {\n\n            text(\n                \"[data-hfc3-national]\",\n                config.legal.nationalId\n            );\n\n        } else {\n\n            hide(\n                \"[data-hfc3-national-wrap]\"\n            );\n\n        }\n\n\n        if (\n            config.legal.economicCode\n        ) {\n\n            text(\n                \"[data-hfc3-economic]\",\n                config.legal.economicCode\n            );\n\n        } else {\n\n            hide(\n                \"[data-hfc3-economic-wrap]\"\n            );\n\n        }\n\n    } else {\n\n        hide(\n            \"[data-hfc3-legal]\"\n        );\n\n    }\n\n\n\n    \/* =========================================================\n       FORM LABELS\n       ========================================================= *\/\n\n    text(\n        \"[data-hfc3-form-title]\",\n        config.form.title\n    );\n\n\n    text(\n        \"[data-hfc3-form-kicker]\",\n        config.form.kicker\n    );\n\n\n    text(\n        \"[data-hfc3-name-label]\",\n        config.form.nameLabel\n    );\n\n\n    text(\n        \"[data-hfc3-email-label]\",\n        config.form.emailLabel\n    );\n\n\n    text(\n        \"[data-hfc3-phone-label]\",\n        config.form.phoneLabel\n    );\n\n\n    text(\n        \"[data-hfc3-subject-label]\",\n        config.form.subjectLabel\n    );\n\n\n    text(\n        \"[data-hfc3-message-label]\",\n        config.form.messageLabel\n    );\n\n\n    text(\n        \"[data-hfc3-submit-text]\",\n        config.form.buttonText\n    );\n\n\n    if (\n        !config.form.showPhone\n    ) {\n\n        hide(\n            \"[data-hfc3-form-phone-wrap]\"\n        );\n\n    }\n\n\n\n    \/* =========================================================\n       FORM START TIME\n       Used for basic anti-spam\n       ========================================================= *\/\n\n    const startedField =\n        one(\n            \"[data-hfc3-form-started]\"\n        );\n\n\n    if (startedField) {\n\n        startedField.value =\n            Date.now();\n\n    }\n\n\n\n    \/* =========================================================\n       AJAX CONTACT FORM\n       ========================================================= *\/\n\n    const form =\n        one(\"[data-hfc3-form]\");\n\n\n    const submit =\n        one(\"[data-hfc3-submit]\");\n\n\n    const submitText =\n        one(\n            \"[data-hfc3-submit-text]\"\n        );\n\n\n    const status =\n        one(\"[data-hfc3-status]\");\n\n\n    function setStatus(\n        type,\n        message\n    ) {\n\n        if (!status) {\n            return;\n        }\n\n\n        status.className =\n            \"hfc3-status\";\n\n\n        status.classList.add(\n            type === \"success\"\n                ? \"is-success\"\n                : \"is-error\"\n        );\n\n\n        status.textContent =\n            message;\n\n    }\n\n\n\n    if (form) {\n\n        form.addEventListener(\n            \"submit\",\n            async function (event) {\n\n                event.preventDefault();\n\n\n                if (\n                    !form.checkValidity()\n                ) {\n\n                    form.reportValidity();\n\n                    return;\n\n                }\n\n\n                if (submit) {\n                    submit.disabled = true;\n                }\n\n\n                if (submitText) {\n\n                    submitText.textContent =\n                        config.form.sendingText;\n\n                }\n\n\n                if (status) {\n\n                    status.className =\n                        \"hfc3-status\";\n\n                    status.textContent =\n                        \"\";\n\n                }\n\n\n                try {\n\n                    const data =\n                        new FormData(form);\n\n\n                    data.append(\n                        \"action\",\n                        \"hastafarin_contact\"\n                    );\n\n\n                    data.append(\n                        \"page_url\",\n                        window.location.href\n                    );\n\n\n                    const ajaxUrl =\n                        window.location.origin +\n                        \"\/wp-admin\/admin-ajax.php\";\n\n\n                    const response =\n                        await fetch(\n                            ajaxUrl,\n                            {\n                                method: \"POST\",\n                                body: data,\n                                credentials: \"same-origin\"\n                            }\n                        );\n\n\n                    const result =\n                        await response.json();\n\n\n                    if (\n                        !response.ok ||\n                        !result.success\n                    ) {\n\n                        throw new Error(\n                            result &&\n                            result.data &&\n                            result.data.message\n                                ? result.data.message\n                                : config.form.errorMessage\n                        );\n\n                    }\n\n\n                    setStatus(\n                        \"success\",\n                        result.data &&\n                        result.data.message\n                            ? result.data.message\n                            : config.form.successMessage\n                    );\n\n\n                    form.reset();\n\n\n                    if (startedField) {\n\n                        startedField.value =\n                            Date.now();\n\n                    }\n\n                } catch (error) {\n\n                    setStatus(\n                        \"error\",\n                        error.message ||\n                        config.form.errorMessage\n                    );\n\n                } finally {\n\n                    if (submit) {\n                        submit.disabled = false;\n                    }\n\n\n                    if (submitText) {\n\n                        submitText.textContent =\n                            config.form.buttonText;\n\n                    }\n\n                }\n\n            }\n        );\n\n    }\n\n\n\n    \/* =========================================================\n       SCROLL REVEAL\n       ========================================================= *\/\n\n    const revealItems =\n        all(\".hfc3-reveal\");\n\n\n    if (\n        \"IntersectionObserver\" in window &&\n        !window.matchMedia(\n            \"(prefers-reduced-motion: reduce)\"\n        ).matches\n    ) {\n\n        const observer =\n            new IntersectionObserver(\n                function (entries) {\n\n                    entries.forEach(\n                        function (entry) {\n\n                            if (\n                                entry.isIntersecting\n                            ) {\n\n                                entry.target\n                                    .classList\n                                    .add(\n                                        \"hfc3-visible\"\n                                    );\n\n\n                                observer.unobserve(\n                                    entry.target\n                                );\n\n                            }\n\n                        }\n                    );\n\n                },\n                {\n                    threshold: .07,\n\n                    rootMargin:\n                        \"0px 0px -20px 0px\"\n                }\n            );\n\n\n        revealItems.forEach(\n            function (\n                item,\n                index\n            ) {\n\n                item.style\n                    .transitionDelay =\n                        Math.min(\n                            index * 65,\n                            300\n                        ) + \"ms\";\n\n\n                observer.observe(\n                    item\n                );\n\n            }\n        );\n\n    } else {\n\n        revealItems.forEach(\n            function (item) {\n\n                item.classList.add(\n                    \"hfc3-visible\"\n                );\n\n            }\n        );\n\n    }\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Hastafarin Co. Contact us Hastafarin Co. SHahab Our Phone Our Fax Email Contact details &amp; directions 01 Get in touch Contact us Your name Your email Your phone Subject Your message (optional) Website Send message Visit us Postal Code Tel Company Information Registration No. National ID Economic Code View on Google Maps<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"hastafarin-elementor","meta":{"footnotes":""},"class_list":["post-19","page","type-page","status-publish","hentry"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":8}},"_links":{"self":[{"href":"https:\/\/hastafarin.com\/index.php\/wp-json\/wp\/v2\/pages\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hastafarin.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hastafarin.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hastafarin.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hastafarin.com\/index.php\/wp-json\/wp\/v2\/comments?post=19"}],"version-history":[{"count":10,"href":"https:\/\/hastafarin.com\/index.php\/wp-json\/wp\/v2\/pages\/19\/revisions"}],"predecessor-version":[{"id":124,"href":"https:\/\/hastafarin.com\/index.php\/wp-json\/wp\/v2\/pages\/19\/revisions\/124"}],"wp:attachment":[{"href":"https:\/\/hastafarin.com\/index.php\/wp-json\/wp\/v2\/media?parent=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}