{"id":9576,"date":"2025-10-08T19:38:18","date_gmt":"2025-10-08T19:38:18","guid":{"rendered":"https:\/\/joodland.com\/?page_id=9576"},"modified":"2025-11-02T20:06:34","modified_gmt":"2025-11-02T20:06:34","slug":"join-us","status":"publish","type":"page","link":"https:\/\/joodland.com\/en\/join-us\/","title":{"rendered":"Join us"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9576\" class=\"elementor elementor-9576\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3b3d68f e-flex e-con-boxed e-con e-parent\" data-id=\"3b3d68f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-face2f3 elementor-widget elementor-widget-html\" data-id=\"face2f3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;700;800&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n  \/* All styles are scoped to #joinUsContainer *\/\r\n  #joinUsContainer {\r\n    \/* CSS Variables *\/\r\n    --brand: #e67e22; --brand-dark: #cf6c17;\r\n    --bg: #f6f7fb; --card: #fff; --text: #222; --muted: #666; --line: #e2e2e2;\r\n    --shadow: 0 10px 25px rgba(0, 0, 0, .06); --r: 16px;\r\n    \r\n    \/* Global Container Styles: Using Poppins for English *\/\r\n    font-family: 'Poppins', sans-serif;\r\n    background: var(--bg);\r\n    color: var(--text);\r\n    direction: ltr; \/* Overall direction is LTR for English *\/\r\n    text-align: left;\r\n    margin: 0;\r\n    padding: 0;\r\n    width: 100%;\r\n    display: block; \r\n  }\r\n\r\n  \/* Resetting for Scoped Children *\/\r\n  #joinUsContainer *,\r\n  #joinUsContainer *::before,\r\n  #joinUsContainer *::after {\r\n    box-sizing: border-box;\r\n    margin: 0; \r\n    padding: 0;\r\n  }\r\n  \r\n  \/* --- Hero Section --- *\/\r\n  #joinUsContainer .join-hero {\r\n    max-width: 900px;\r\n    margin: auto;\r\n    text-align: center;\r\n    padding: 40px 18px 20px;\r\n  }\r\n  \r\n  #joinUsContainer .join-badge {\r\n    display: inline-block;\r\n    background: #fff;\r\n    border: 1px solid var(--line);\r\n    padding: 6px 14px;\r\n    border-radius: 999px;\r\n    color: #555;\r\n    font-weight: 700;\r\n    font-family: 'Tajawal', sans-serif; \/* Keep Tajawal for this badge *\/\r\n  }\r\n  \r\n  #joinUsContainer .join-title {\r\n    margin: 14px 0 8px;\r\n    font-size: 34px;\r\n    color: var(--brand);\r\n    font-weight: 800;\r\n  }\r\n  \r\n  #joinUsContainer .join-sub {\r\n    margin: 0;\r\n    color: var(--muted);\r\n    font-size: 15px;\r\n  }\r\n\r\n  \/* --- Card Section --- *\/\r\n  #joinUsContainer .card {\r\n    background: var(--card);\r\n    border-radius: var(--r);\r\n    box-shadow: var(--shadow);\r\n    max-width: 900px;\r\n    margin: 20px auto 40px; \r\n    padding: 36px 32px;\r\n    text-align: left; \/* Alignment for LTR *\/\r\n  }\r\n  \r\n  #joinUsContainer .card h3 {\r\n    margin: 0 0 14px;\r\n    color: var(--brand);\r\n    font-size: 22px;\r\n    font-weight: 800;\r\n    text-align: left;\r\n  }\r\n  \r\n  #joinUsContainer .muted {\r\n    color: var(--muted);\r\n    font-size: 14px;\r\n    margin-bottom: 20px;\r\n    text-align: left;\r\n  }\r\n\r\n  \/* --- Form Elements --- *\/\r\n  #joinUsContainer label {\r\n    display: block;\r\n    margin: 8px 2px 6px;\r\n    color: #333;\r\n    font-weight: 700;\r\n    font-size: 14px;\r\n    text-align: left;\r\n  }\r\n\r\n  #joinUsContainer .control,\r\n  #joinUsContainer select,\r\n  #joinUsContainer input,\r\n  #joinUsContainer textarea {\r\n    width: 100%;\r\n    padding: 12px 16px;\r\n    border: 1px solid var(--line);\r\n    border-radius: 12px;\r\n    background: #fff;\r\n    font-size: 15px;\r\n    color: var(--text);\r\n    outline: none;\r\n    transition: .25s;\r\n    box-sizing: border-box;\r\n    \/* Inputs can default to LTR, but keep the option to change if needed *\/\r\n    direction: ltr;\r\n    text-align: left;\r\n    font-family: inherit;\r\n  }\r\n  \r\n  \/* Overriding specific input directions for non-Latin scripts if needed *\/\r\n  #joinUsContainer input[type=\"text\"],\r\n  #joinUsContainer input[type=\"tel\"] {\r\n      \/* Can force RTL for names\/phones if most users input Arabic *\/\r\n      \/* direction: rtl; text-align: right; *\/\r\n  }\r\n\r\n  #joinUsContainer .control:focus,\r\n  #joinUsContainer select:focus,\r\n  #joinUsContainer input:focus,\r\n  #joinUsContainer textarea:focus {\r\n    border-color: var(--brand);\r\n    box-shadow: 0 0 0 3px rgba(230, 126, 34, .2);\r\n  }\r\n\r\n  #joinUsContainer textarea {\r\n    resize: none;\r\n  }\r\n\r\n  \/* --- Grid Layout --- *\/\r\n  #joinUsContainer .grid-2 {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 20px;\r\n    margin-bottom: 18px;\r\n  }\r\n  \r\n  @media(max-width:640px){\r\n    #joinUsContainer .grid-2 {\r\n      grid-template-columns: 1fr\r\n    }\r\n  }\r\n\r\n  \/* -------------------------------------- *\/\r\n  \/* --- Range Slider & Bubble FIX (LTR) --- *\/\r\n  \/* -------------------------------------- *\/\r\n  #joinUsContainer .range {\r\n    position: relative;\r\n    padding-top: 28px; \r\n    margin-top: 14px;\r\n    height: 38px;\r\n  }\r\n\r\n  #joinUsContainer .range input[type=range] {\r\n    -webkit-appearance: none;\r\n    width: 100%;\r\n    height: 8px;\r\n    background: #eee;\r\n    border-radius: 999px;\r\n    outline: 0;\r\n    direction: ltr; \r\n    position: absolute;\r\n    top: 25px; \r\n    left: 0; \/* Changed from right: 0; for LTR *\/\r\n  }\r\n  \r\n  #joinUsContainer .range input[type=range]::-webkit-slider-thumb {\r\n    -webkit-appearance: none;\r\n    width: 20px;\r\n    height: 20px;\r\n    border-radius: 50%;\r\n    background: var(--brand);\r\n    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);\r\n    cursor: pointer;\r\n    border: 0;\r\n  }\r\n  \r\n  #joinUsContainer .bubble {\r\n    position: absolute;\r\n    top: 0; \r\n    background: #fff;\r\n    border: 1px solid var(--line);\r\n    border-radius: 10px;\r\n    padding: 4px 10px;\r\n    font-weight: 800;\r\n    font-size: 13px;\r\n    color: #333;\r\n    box-shadow: 0 4px 10px rgba(0, 0, 0, .06);\r\n    pointer-events: none;\r\n    z-index: 10;\r\n  }\r\n\r\n  \/* --- Button --- *\/\r\n  #joinUsContainer .cta {\r\n    margin-top: 20px;\r\n    display: flex;\r\n    justify-content: flex-start; \/* Changed from flex-end for LTR *\/\r\n  }\r\n  \r\n  #joinUsContainer .btn {\r\n    padding: 16px 20px;\r\n    border: 0;\r\n    border-radius: 12px;\r\n    background: var(--brand);\r\n    color: #fff;\r\n    font-size: 16px;\r\n    font-weight: 800;\r\n    cursor: pointer;\r\n    transition: .25s;\r\n    font-family: inherit;\r\n  }\r\n  \r\n  #joinUsContainer .btn:hover {\r\n    background: var(--brand-dark);\r\n    box-shadow: 0 10px 20px rgba(230, 126, 34, .35);\r\n  }\r\n<\/style>\r\n\r\n<div id=\"joinUsContainer\">\r\n  <div class=\"join-hero\">\r\n    <span class=\"join-badge\">We are looking for talented individuals to join our team<\/span>\r\n    <h1 class=\"join-title\">Join the <span style=\"color:#000\">Joud Land<\/span> Team<\/h1>\r\n    <p class=\"join-sub\">Do you have a passion for travel, creativity, and customer service? Submit your application now and we'll be happy to get in touch with you.<\/p>\r\n  <\/div>\r\n  \r\n  <div class=\"card\">\r\n    <h3>Application Form<\/h3>\r\n    <p class=\"muted\">Fill out the following information and we will contact you as soon as possible.<\/p>\r\n\r\n    <form id=\"joinForm\" novalidate>\r\n      <div class=\"grid-2\">\r\n        <div>\r\n          <label for=\"fullName\">Full Name<\/label>\r\n          <input id=\"fullName\" class=\"control\" type=\"text\" placeholder=\"Example: Ahmad Al-Jubouri\" required>\r\n        <\/div>\r\n        <div>\r\n          <label for=\"phone\">Phone Number<\/label>\r\n          <input id=\"phone\" class=\"control\" type=\"tel\" placeholder=\"+964 7xx xxx xxxx\" required>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"grid-2\">\r\n        <div>\r\n          <label for=\"email\">Email Address<\/label>\r\n          <input id=\"email\" class=\"control\" type=\"email\" placeholder=\"name@email.com\" required>\r\n        <\/div>\r\n        <div>\r\n          <label for=\"city\">City \/ Country<\/label>\r\n          <input id=\"city\" class=\"control\" type=\"text\" placeholder=\"Example: Baghdad, Iraq\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"grid-2\">\r\n        <div>\r\n          <label for=\"position\">Applied Position<\/label>\r\n          <select id=\"position\" class=\"control\" required>\r\n            <option value=\"\">Select Position<\/option>\r\n            <option>Sales Representative<\/option>\r\n            <option>Ticketing Agent<\/option>\r\n            <option>Customer Service<\/option>\r\n            <option>Graphic Designer<\/option>\r\n            <option>Content Creator<\/option>\r\n            <option>Digital Marketer<\/option>\r\n            <option>Tour Coordinator<\/option>\r\n            <option>Other Position<\/option>\r\n          <\/select>\r\n        <\/div>\r\n        <div>\r\n          <label>Years of Experience<\/label>\r\n          <div class=\"range\">\r\n            <input id=\"exp\" type=\"range\" min=\"0\" max=\"20\" step=\"1\" value=\"2\">\r\n            <div class=\"bubble\" id=\"expB\">2 Years<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"grid-2\">\r\n        <div>\r\n          <label for=\"english\">English Language Level<\/label>\r\n          <select id=\"english\" class=\"control\" required>\r\n            <option value=\"\">Select Level<\/option>\r\n            <option>Excellent (Speaking & Writing)<\/option>\r\n            <option>Very Good<\/option>\r\n            <option>Good<\/option>\r\n            <option>Beginner<\/option>\r\n          <\/select>\r\n        <\/div>\r\n        <div>\r\n          <label for=\"workType\">Preferred Work Type<\/label>\r\n          <select id=\"workType\" class=\"control\">\r\n            <option value=\"\">Select Work Type<\/option>\r\n            <option>Full-Time<\/option>\r\n            <option>Part-Time<\/option>\r\n            <option>Remote<\/option>\r\n            <option>Field\/On-site<\/option>\r\n          <\/select>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"grid-2\">\r\n        <div>\r\n          <label for=\"travel\">Can you travel if the job requires it?<\/label>\r\n          <select id=\"travel\" class=\"control\">\r\n            <option>Yes<\/option>\r\n            <option>No<\/option>\r\n            <option>Depends on Circumstances<\/option>\r\n          <\/select>\r\n        <\/div>\r\n        <div>\r\n          <label for=\"availability\">When can you start working?<\/label>\r\n          <select id=\"availability\" class=\"control\">\r\n            <option value=\"\">Select Duration<\/option>\r\n            <option>Immediately<\/option>\r\n            <option>Within a week<\/option>\r\n            <option>Within a month<\/option>\r\n            <option>Upon Agreement<\/option>\r\n          <\/select>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"grid-2\">\r\n        <div>\r\n          <label for=\"source\">How did you hear about Joud Land?<\/label>\r\n          <select id=\"source\" class=\"control\">\r\n            <option value=\"\">Select Source<\/option>\r\n            <option>Instagram Ad<\/option>\r\n            <option>Friend Referral<\/option>\r\n            <option>Facebook<\/option>\r\n            <option>LinkedIn<\/option>\r\n            <option>Website<\/option>\r\n            <option>Other<\/option>\r\n          <\/select>\r\n        <\/div>\r\n        <div>\r\n          <label for=\"about\">About You<\/label>\r\n          <textarea id=\"about\" class=\"control\" rows=\"3\" placeholder=\"Briefly introduce yourself and why you want to join the Joud Land team.\"><\/textarea>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"cta\">\r\n        <button type=\"submit\" class=\"btn\">Send Application via WhatsApp<\/button>\r\n      <\/div>\r\n    <\/form>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    const container = document.getElementById('joinUsContainer');\r\n    if (!container) return;\r\n\r\n    const exp = container.querySelector('#exp');\r\n    const expB = container.querySelector('#expB');\r\n    const joinForm = container.querySelector('#joinForm');\r\n\r\n    \/**\r\n     * Calculates the bubble position (LTR)\r\n     * @param {HTMLInputElement} range - The range slider input.\r\n     * @param {HTMLElement} bubble - The bubble element.\r\n     *\/\r\n    function setBubbleLTR(range, bubble) {\r\n        const val = +range.value;\r\n        const min = +range.min;\r\n        const max = +range.max;\r\n        const percent = ((val - min) * 100) \/ (max - min);\r\n        \r\n        const rangeWidth = range.offsetWidth;\r\n        const bubbleWidth = 45; \r\n        const thumbWidth = 20;\r\n\r\n        \/\/ 1. Calculate the center position of the thumb from the left in pixels\r\n        const thumbCenterPosition = (rangeWidth * percent) \/ 100;\r\n        \r\n        \/\/ 2. Adjust for bubble width to center it over the thumb\r\n        let leftPosition = thumbCenterPosition - (bubbleWidth \/ 2);\r\n        \r\n        \/\/ 3. Apply constraints (prevent overflow)\r\n        const maxOffset = rangeWidth - bubbleWidth;\r\n        leftPosition = Math.max(0, Math.min(leftPosition, maxOffset)); \r\n\r\n        \/\/ Apply position and update text\r\n        bubble.style.left = `${leftPosition}px`;\r\n        bubble.textContent = val + (val === 1 ? ' Year' : ' Years');\r\n    }\r\n    \r\n    \/\/ --- Apply Functionality ---\r\n    if (exp && expB) {\r\n        exp.addEventListener('input', () => setBubbleLTR(exp, expB));\r\n        setBubbleLTR(exp, expB);\r\n        window.addEventListener('resize', () => setBubbleLTR(exp, expB));\r\n    }\r\n\r\n\r\n    \/\/ --- Form Submission (WhatsApp) ---\r\n    if (joinForm) {\r\n      joinForm.addEventListener('submit', e => {\r\n        e.preventDefault();\r\n\r\n        if (!joinForm.checkValidity()) {\r\n          alert('Please complete all required fields correctly.');\r\n          joinForm.reportValidity();\r\n          return;\r\n        }\r\n\r\n        const container = document.getElementById('joinUsContainer');\r\n        const fields = {\r\n          name: container.querySelector('#fullName').value.trim(),\r\n          phone: container.querySelector('#phone').value.trim(),\r\n          email: container.querySelector('#email').value.trim(),\r\n          city: container.querySelector('#city').value.trim() || '\u2014',\r\n          position: container.querySelector('#position').value,\r\n          exp: container.querySelector('#exp').value + (container.querySelector('#exp').value === '1' ? ' Year' : ' Years'),\r\n          english: container.querySelector('#english').value,\r\n          workType: container.querySelector('#workType').value || '\u2014',\r\n          travel: container.querySelector('#travel').value,\r\n          availability: container.querySelector('#availability').value || '\u2014',\r\n          source: container.querySelector('#source').value || '\u2014',\r\n          about: container.querySelector('#about').value.trim() || '\u2014'\r\n        };\r\n\r\n        const msg =\r\n          `*Joud Land Team Application:*%0A` +\r\n          `*Full Name:* ${fields.name}%0A` +\r\n          `*Phone:* ${fields.phone}%0A` +\r\n          `*Email:* ${fields.email}%0A` +\r\n          `*City\/Country:* ${fields.city}%0A` +\r\n          `*Applied Position:* ${fields.position}%0A` +\r\n          `*Experience:* ${fields.exp}%0A` +\r\n          `*English Level:* ${fields.english}%0A` +\r\n          `*Preferred Work Type:* ${fields.workType}%0A` +\r\n          `*Willing to Travel:* ${fields.travel}%0A` +\r\n          `*Availability:* ${fields.availability}%0A` +\r\n          `*Source:* ${fields.source}%0A` +\r\n          `*About Applicant:* ${fields.about}`;\r\n\r\n        const phoneCompany = '9647775558577';\r\n        window.open(`https:\/\/api.whatsapp.com\/send?phone=${phoneCompany}&text=${msg}`, '_blank');\r\n      });\r\n    }\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>&nbsp; We are looking for talented individuals to join our team Join the Joud Land Team Do you have a passion for travel, creativity, and customer service? Submit your application now and we&#8217;ll be happy to get in touch with you. Application Form Fill out the following information and we will contact you as soon [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-9576","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/joodland.com\/en\/wp-json\/wp\/v2\/pages\/9576","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/joodland.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/joodland.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/joodland.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/joodland.com\/en\/wp-json\/wp\/v2\/comments?post=9576"}],"version-history":[{"count":8,"href":"https:\/\/joodland.com\/en\/wp-json\/wp\/v2\/pages\/9576\/revisions"}],"predecessor-version":[{"id":9871,"href":"https:\/\/joodland.com\/en\/wp-json\/wp\/v2\/pages\/9576\/revisions\/9871"}],"wp:attachment":[{"href":"https:\/\/joodland.com\/en\/wp-json\/wp\/v2\/media?parent=9576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}