{"id":126,"date":"2026-07-07T21:32:44","date_gmt":"2026-07-07T21:32:44","guid":{"rendered":"https:\/\/webitjo.com\/?page_id=126"},"modified":"2026-08-23T20:06:35","modified_gmt":"2026-08-23T17:06:35","slug":"projects","status":"publish","type":"page","link":"https:\/\/webitjo.com\/ar\/projects\/","title":{"rendered":"Projects"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\nContact Us | WEBIT<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root{\r\n --teal:#16A596;\r\n --teal-dark:#0B6E63;\r\n --teal-tint:#E4F5F2;\r\n --ink:#14161A;\r\n --ink-soft:#4A4F55;\r\n --paper:#FAF9F6;\r\n --paper-dim:#F0EFEA;\r\n --white:#FFFFFF;\r\n --radius:16px;\r\n --ease:cubic-bezier(.16,.8,.3,1);\r\n }\r\n *{box-sizing:border-box; margin:0; padding:0;}\r\n html{scroll-behavior:smooth;}\r\n body{\r\n font-family:'Inter',sans-serif;\r\n background:var(--paper);\r\n color:var(--ink);\r\n -webkit-font-smoothing:antialiased;\r\n overflow-x:hidden;\r\n }\r\n img,svg{display:block; max-width:100%;}\r\n a{color:inherit; text-decoration:none;}\r\n ul{list-style:none;}\r\n .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}\r\n h1,h2,h3{font-family:'Space Grotesk',sans-serif; letter-spacing:-0.02em; line-height:1.05;}\r\n .eyebrow{\r\n font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:600;\r\n letter-spacing:.14em; text-transform:uppercase; color:var(--teal-dark);\r\n display:inline-flex; align-items:center; gap:8px;\r\n }\r\n .eyebrow::before{content:\"\"; width:7px; height:7px; background:var(--teal); border-radius:50%; box-shadow:0 0 0 4px var(--teal-tint);}\r\n .btn{\r\n display:inline-flex; align-items:center; justify-content:center; gap:8px;\r\n font-family:'Inter',sans-serif; font-weight:600; font-size:15px;\r\n padding:14px 26px; border-radius:999px; border:1.5px solid transparent;\r\n cursor:pointer; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;\r\n white-space:nowrap;\r\n }\r\n .btn-solid{background:var(--ink); color:var(--white);}\r\n .btn-solid:hover{background:var(--teal-dark); transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(11,110,99,.55);}\r\n .btn-outline{border-color:rgba(20,22,26,.18); color:var(--ink); background:transparent;}\r\n .btn-outline:hover{border-color:var(--ink); transform:translateY(-2px);}\r\n .btn-light{background:var(--white); color:var(--ink);}\r\n .btn-light:hover{background:var(--teal); color:var(--white); transform:translateY(-2px);}\r\n\r\n [data-reveal]{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease);}\r\n [data-reveal].in-view{opacity:1; transform:translateY(0);}\r\n [data-reveal=\"stagger\"] > *{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease);}\r\n [data-reveal=\"stagger\"].in-view > *{opacity:1; transform:translateY(0);}\r\n [data-reveal=\"stagger\"] > *:nth-child(1){transition-delay:.02s;}\r\n [data-reveal=\"stagger\"] > *:nth-child(2){transition-delay:.10s;}\r\n [data-reveal=\"stagger\"] > *:nth-child(3){transition-delay:.18s;}\r\n [data-reveal=\"stagger\"] > *:nth-child(4){transition-delay:.26s;}\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n [data-reveal], [data-reveal=\"stagger\"] > *{opacity:1 !important; transform:none !important; transition:none !important;}\r\n *{animation:none !important;}\r\n }\r\n\r\n \/* ---------- nav (matches homepage) ---------- *\/\r\n header{\r\n position:sticky; top:0; z-index:100;\r\n background:rgba(250,249,246,.82);\r\n backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);\r\n border-bottom:1px solid rgba(20,22,26,.07);\r\n }\r\n nav.wrap{display:flex; align-items:center; justify-content:space-between; padding-top:18px; padding-bottom:18px; transition:padding .3s var(--ease);}\r\n header.shrink nav.wrap{padding-top:11px; padding-bottom:11px;}\r\n .logo{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:21px;}\r\n .logo .mark{width:26px; height:26px;}\r\n .logo b{color:var(--teal-dark);}\r\n .nav-links{display:flex; align-items:center; gap:34px;}\r\n .nav-links a{font-size:14.5px; font-weight:500; color:var(--ink-soft); position:relative; padding:4px 0;}\r\n .nav-links a::after{content:\"\";position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--teal); transition:width .3s var(--ease);}\r\n .nav-links a:hover{color:var(--ink);}\r\n .nav-links a:hover::after{width:100%;}\r\n .nav-links a.active{color:var(--ink);}\r\n .nav-links a.active::after{width:100%;}\r\n .nav-cta{display:flex; align-items:center; gap:18px;}\r\n .burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:0; padding:6px;}\r\n .burger span{width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s, opacity .3s;}\r\n .mobile-panel{display:none; position:fixed; inset:0 0 auto 0; top:64px; background:var(--paper); border-bottom:1px solid rgba(20,22,26,.08); padding:20px 24px 28px; z-index:99;}\r\n .mobile-panel a{display:block; padding:12px 0; font-size:16px; font-weight:600; border-bottom:1px solid rgba(20,22,26,.06);}\r\n .mobile-panel.open{display:block;}\r\n\r\n \/* ---------- hero ---------- *\/\r\n .hero{position:relative; padding:96px 0 76px; overflow:hidden; text-align:center;}\r\n .hero-peak-wm{position:absolute; top:-30px; left:50%; transform:translateX(-50%); width:520px; opacity:.12; pointer-events:none;}\r\n .hero .inner{position:relative; z-index:1; max-width:680px; margin:0 auto;}\r\n .hero h1{font-size:clamp(32px,4.4vw,52px); margin:18px 0 20px; font-weight:700;}\r\n .hero h1 .hl{color:var(--teal-dark);}\r\n .hero p.lead{font-size:17.5px; color:var(--ink-soft); line-height:1.65; max-width:540px; margin:0 auto;}\r\n\r\n \/* ---------- jagged divider ---------- *\/\r\n .divider{display:block; width:100%; height:56px;}\r\n .divider.flip{transform:scaleY(-1);}\r\n\r\n \/* ---------- contact cards ---------- *\/\r\n .section{padding:20px 0 88px;}\r\n .contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}\r\n .c-card{\r\n display:flex; flex-direction:column; gap:16px;\r\n background:var(--white); border:1px solid rgba(20,22,26,.07); border-radius:var(--radius);\r\n padding:34px 28px; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;\r\n position:relative; overflow:hidden;\r\n }\r\n a.c-card:hover{transform:translateY(-8px); box-shadow:0 30px 50px -22px rgba(11,110,99,.32); border-color:var(--teal);}\r\n .c-icon{width:52px; height:52px; border-radius:14px; background:var(--teal-tint); display:flex; align-items:center; justify-content:center;}\r\n .c-icon svg{width:24px; height:24px; stroke:var(--teal-dark);}\r\n .c-card .c-label{font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}\r\n .c-card h3{font-size:19px; font-weight:600; margin-top:2px; word-break:break-word;}\r\n .c-card p{font-size:13.8px; color:var(--ink-soft); line-height:1.55;}\r\n .c-arrow{\r\n margin-top:auto; display:inline-flex; align-items:center; gap:6px;\r\n font-size:13.5px; font-weight:600; color:var(--teal-dark);\r\n }\r\n .c-arrow svg{width:15px; height:15px; stroke:var(--teal-dark); transition:transform .35s var(--ease);}\r\n a.c-card:hover .c-arrow svg{transform:translateX(5px);}\r\n\r\n .social-row{display:flex; gap:10px; margin-top:auto;}\r\n .social-row a{\r\n width:44px; height:44px; border-radius:50%; background:var(--teal-tint);\r\n display:flex; align-items:center; justify-content:center;\r\n transition:background .3s, transform .3s;\r\n }\r\n .social-row a svg{width:19px; height:19px; stroke:var(--teal-dark); transition:stroke .3s;}\r\n .social-row a:hover{background:var(--teal); transform:translateY(-4px);}\r\n .social-row a:hover svg{stroke:#fff;}\r\n\r\n \/* ---------- where we work band ---------- *\/\r\n .regions{background:var(--ink); position:relative; padding:70px 0; overflow:hidden;}\r\n .regions-skyline{position:absolute; top:0; left:0; width:100%; opacity:.08; transform:scaleY(-1);}\r\n .regions .wrap{position:relative; z-index:1;}\r\n .regions-head{text-align:center; margin-bottom:44px;}\r\n .regions-head .eyebrow{color:var(--teal);}\r\n .regions-head .eyebrow::before{box-shadow:0 0 0 4px rgba(22,165,150,.25);}\r\n .regions-head h2{color:var(--white); font-size:clamp(22px,2.8vw,30px); margin-top:14px;}\r\n .regions-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:center;}\r\n .region-item{padding:28px 16px; border:1px solid rgba(255,255,255,.09); border-radius:var(--radius); transition:border-color .3s, transform .3s;}\r\n .region-item:hover{border-color:var(--teal); transform:translateY(-4px);}\r\n .region-item b{font-family:'Space Grotesk',sans-serif; font-size:24px; color:var(--white); font-weight:700; display:block;}\r\n .region-item span{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:#8B949E; text-transform:uppercase; letter-spacing:.08em;}\r\n\r\n \/* ---------- CTA band ---------- *\/\r\n .cta-band{background:var(--teal); border-radius:26px; margin:0 24px; padding:64px 48px; position:relative; overflow:hidden;}\r\n .cta-inner{max-width:1132px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; position:relative; z-index:1; text-align:left;}\r\n .cta-band h2{color:var(--white); font-size:clamp(22px,2.8vw,32px); max-width:480px;}\r\n .cta-band .eyebrow{color:var(--white); opacity:.9;}\r\n .cta-band .eyebrow::before{background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.25);}\r\n .cta-peak{position:absolute; bottom:-10px; right:-10px; width:300px; opacity:.35;}\r\n\r\n \/* ---------- footer (matches homepage) ---------- *\/\r\n footer{background:var(--ink); color:#B9BEC4; padding:64px 0 28px;}\r\n .foot-grid{display:grid; grid-template-columns:1.4fr .8fr .8fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.08);}\r\n .foot-logo{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; color:var(--white); margin-bottom:14px;}\r\n .foot-logo .mark{width:24px; height:24px;}\r\n .foot-about p{font-size:14px; line-height:1.65; max-width:280px;}\r\n .foot-col h4{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#7D8590; margin-bottom:16px;}\r\n .foot-col a{display:block; font-size:14.5px; margin-bottom:11px; color:#B9BEC4; transition:color .25s;}\r\n .foot-col a:hover{color:var(--teal);}\r\n .socials{display:flex; gap:10px; margin-top:16px;}\r\n .socials a{width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; transition:background .3s, transform .3s;}\r\n .socials a:hover{background:var(--teal); transform:translateY(-3px);}\r\n .socials svg{width:16px; height:16px; stroke:#fff;}\r\n .foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:13px; flex-wrap:wrap; gap:10px;}\r\n\r\n \/* ---------- responsive ---------- *\/\r\n @media (max-width:980px){\r\n .contact-grid{grid-template-columns:1fr 1fr;}\r\n .regions-grid{grid-template-columns:1fr;}\r\n .foot-grid{grid-template-columns:1fr 1fr;}\r\n .hero-peak-wm{width:400px;}\r\n }\r\n @media (max-width:720px){\r\n .nav-links, .nav-cta .btn-outline{display:none;}\r\n .burger{display:flex;}\r\n .contact-grid{grid-template-columns:1fr;}\r\n .cta-band{margin:0 14px; padding:48px 24px;}\r\n .cta-inner{justify-content:center; text-align:center;}\r\n .foot-grid{grid-template-columns:1fr;}\r\n }\r\n \r\n \/* ---------- nav (matches homepage) ---------- *\/\r\n header{\r\n position:sticky; top:0; z-index:100;\r\n background:rgba(250,249,246,.82);\r\n backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);\r\n border-bottom:1px solid rgba(20,22,26,.07);\r\n }\r\n nav.wrap{display:flex; align-items:center; justify-content:space-between; padding-top:18px; padding-bottom:18px; transition:padding .3s var(--ease);}\r\n header.shrink nav.wrap{padding-top:11px; padding-bottom:11px;}\r\n .logo{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:21px;}\r\n .logo .mark{width:26px; height:26px;}\r\n .logo b{color:var(--teal-dark);}\r\n .nav-links{display:flex; align-items:center; gap:34px;}\r\n .nav-links a{font-size:14.5px; font-weight:500; color:var(--ink-soft); position:relative; padding:4px 0;}\r\n .nav-links a::after{content:\"\";position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--teal); transition:width .3s var(--ease);}\r\n .nav-links a:hover{color:var(--ink);}\r\n .nav-links a:hover::after{width:100%;}\r\n .nav-links a.active{color:var(--ink);}\r\n .nav-links a.active::after{width:100%;}\r\n .nav-cta{display:flex; align-items:center; gap:18px;}\r\n .burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:0; padding:6px;}\r\n .burger span{width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s, opacity .3s;}\r\n .mobile-panel{display:none; position:fixed; inset:0 0 auto 0; top:64px; background:var(--paper); border-bottom:1px solid rgba(20,22,26,.08); padding:20px 24px 28px; z-index:99;}\r\n .mobile-panel a{display:block; padding:12px 0; font-size:16px; font-weight:600; border-bottom:1px solid rgba(20,22,26,.06);}\r\n .mobile-panel.open{display:block;}\r\n\r\n \/* ---------- hero ---------- *\/\r\n .hero{position:relative; padding:96px 0 76px; overflow:hidden; text-align:center;}\r\n .hero-peak-wm{position:absolute; top:-30px; left:50%; transform:translateX(-50%); width:520px; opacity:.12; pointer-events:none;}\r\n .hero .inner{position:relative; z-index:1; max-width:680px; margin:0 auto;}\r\n .hero h1{font-size:clamp(32px,4.4vw,52px); margin:18px 0 20px; font-weight:700;}\r\n .hero h1 .hl{color:var(--teal-dark);}\r\n .hero p.lead{font-size:17.5px; color:var(--ink-soft); line-height:1.65; max-width:540px; margin:0 auto;}\r\n\r\n \/* ---------- jagged divider ---------- *\/\r\n .divider{display:block; width:100%; height:56px;}\r\n .divider.flip{transform:scaleY(-1);}\r\n\r\n \/* ---------- contact cards ---------- *\/\r\n .section{padding:20px 0 88px;}\r\n .contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}\r\n .c-card{\r\n display:flex; flex-direction:column; gap:16px;\r\n background:var(--white); border:1px solid rgba(20,22,26,.07); border-radius:var(--radius);\r\n padding:34px 28px; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;\r\n position:relative; overflow:hidden;\r\n }\r\n a.c-card:hover{transform:translateY(-8px); box-shadow:0 30px 50px -22px rgba(11,110,99,.32); border-color:var(--teal);}\r\n .c-icon{width:52px; height:52px; border-radius:14px; background:var(--teal-tint); display:flex; align-items:center; justify-content:center;}\r\n .c-icon svg{width:24px; height:24px; stroke:var(--teal-dark);}\r\n .c-card .c-label{font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}\r\n .c-card h3{font-size:19px; font-weight:600; margin-top:2px; word-break:break-word;}\r\n .c-card p{font-size:13.8px; color:var(--ink-soft); line-height:1.55;}\r\n .c-arrow{\r\n margin-top:auto; display:inline-flex; align-items:center; gap:6px;\r\n font-size:13.5px; font-weight:600; color:var(--teal-dark);\r\n }\r\n .c-arrow svg{width:15px; height:15px; stroke:var(--teal-dark); transition:transform .35s var(--ease);}\r\n a.c-card:hover .c-arrow svg{transform:translateX(5px);}\r\n\r\n .social-row{display:flex; gap:10px; margin-top:auto;}\r\n .social-row a{\r\n width:44px; height:44px; border-radius:50%; background:var(--teal-tint);\r\n display:flex; align-items:center; justify-content:center;\r\n transition:background .3s, transform .3s;\r\n }\r\n .social-row a svg{width:19px; height:19px; stroke:var(--teal-dark); transition:stroke .3s;}\r\n .social-row a:hover{background:var(--teal); transform:translateY(-4px);}\r\n .social-row a:hover svg{stroke:#fff;}\r\n\r\n \/* ---------- where we work band ---------- *\/\r\n .regions{background:var(--ink); position:relative; padding:70px 0; overflow:hidden;}\r\n .regions-skyline{position:absolute; top:0; left:0; width:100%; opacity:.08; transform:scaleY(-1);}\r\n .regions .wrap{position:relative; z-index:1;}\r\n .regions-head{text-align:center; margin-bottom:44px;}\r\n .regions-head .eyebrow{color:var(--teal);}\r\n .regions-head .eyebrow::before{box-shadow:0 0 0 4px rgba(22,165,150,.25);}\r\n .regions-head h2{color:var(--white); font-size:clamp(22px,2.8vw,30px); margin-top:14px;}\r\n .regions-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:center;}\r\n .region-item{padding:28px 16px; border:1px solid rgba(255,255,255,.09); border-radius:var(--radius); transition:border-color .3s, transform .3s;}\r\n .region-item:hover{border-color:var(--teal); transform:translateY(-4px);}\r\n .region-item b{font-family:'Space Grotesk',sans-serif; font-size:24px; color:var(--white); font-weight:700; display:block;}\r\n .region-item span{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:#8B949E; text-transform:uppercase; letter-spacing:.08em;}\r\n\r\n \/* ---------- CTA band ---------- *\/\r\n .cta-band{background:var(--teal); border-radius:26px; margin:0 24px; padding:64px 48px; position:relative; overflow:hidden;}\r\n .cta-inner{max-width:1132px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; position:relative; z-index:1; text-align:left;}\r\n .cta-band h2{color:var(--white); font-size:clamp(22px,2.8vw,32px); max-width:480px;}\r\n .cta-band .eyebrow{color:var(--white); opacity:.9;}\r\n .cta-band .eyebrow::before{background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.25);}\r\n .cta-peak{position:absolute; bottom:-10px; right:-10px; width:300px; opacity:.35;}\r\n\r\n \/* ---------- footer (matches homepage) ---------- *\/\r\n footer{background:var(--ink); color:#B9BEC4; padding:64px 0 28px;}\r\n .foot-grid{display:grid; grid-template-columns:1.4fr .8fr .8fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.08);}\r\n .foot-logo{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; color:var(--white); margin-bottom:14px;}\r\n .foot-logo .mark{width:24px; height:24px;}\r\n .foot-about p{font-size:14px; line-height:1.65; max-width:280px;}\r\n .foot-col h4{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#7D8590; margin-bottom:16px;}\r\n .foot-col a{display:block; font-size:14.5px; margin-bottom:11px; color:#B9BEC4; transition:color .25s;}\r\n .foot-col a:hover{color:var(--teal);}\r\n .socials{display:flex; gap:10px; margin-top:16px;}\r\n .socials a{width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; transition:background .3s, transform .3s;}\r\n .socials a:hover{background:var(--teal); transform:translateY(-3px);}\r\n .socials svg{width:16px; height:16px; stroke:#fff;}\r\n .foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:13px; flex-wrap:wrap; gap:10px;}\r\n\r\n \/* ---------- responsive ---------- *\/\r\n @media (max-width:980px){\r\n .contact-grid{grid-template-columns:1fr 1fr;}\r\n .regions-grid{grid-template-columns:1fr;}\r\n .foot-grid{grid-template-columns:1fr 1fr;}\r\n .hero-peak-wm{width:400px;}\r\n }\r\n @media (max-width:720px){\r\n .nav-links, .nav-cta .btn-outline{display:none;}\r\n .burger{display:flex;}\r\n .contact-grid{grid-template-columns:1fr;}\r\n .cta-band{margin:0 14px; padding:48px 24px;}\r\n .cta-inner{justify-content:center; text-align:center;}\r\n .foot-grid{grid-template-columns:1fr;}\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- ============ NAV ============ -->\r\n<!-- NOTE: adjust hrefs below to match your real WordPress page slugs\/anchors -->\r\n<header id=\"siteHeader\">\r\n <nav class=\"wrap\">\r\n <a href=\"\/webit-web-development-hosting-digital-marketing-agency-in-jordan-\u0648\u064a\" class=\"logo\">\r\n <img decoding=\"async\" src=\"https:\/\/webitjo.com\/wp-content\/uploads\/2024\/04\/WEBIT-JO-Logo-e1714165813669.png\" alt=\"WEBIT JO Logo\">\r\n<\/a>\r\n\r\n<style>\r\n.logo {\r\n display: flex;\r\n align-items: center;\r\n text-decoration: none;\r\n}\r\n\r\n.logo img {\r\n width: 170px;\r\n height: auto;\r\n display: block;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .logo img {\r\n width: 130px;\r\n }\r\n}\r\n<\/style>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"\/webit-web-development-hosting-digital-marketing-agency-in-jordan-\u0648\u064a\u0628-\u0625\u062a-\u0634\u0631\u0643\u0629-\u062a\u0635\u0645\u064a\u0645-\u0648\u062a\u0637\u0648\u064a\u0631\">Home<\/a><\/li>\r\n <li><a href=\"\/services\">Services<\/a><\/li>\r\n <li><a href=\"#top\" class=\"active\">Work<\/a><\/li>\r\n <li><a href=\"\/products\">Products<\/a> <\/li>\r\n <li><a href=\"\/about\">About<\/a><\/li>\r\n <li><a href=\"\/contact-us\">Contact<\/a><\/li>\r\n <\/ul>\r\n <div class=\"nav-cta\">\r\n <a href=\"\/contact-us\" class=\"btn btn-outline\" style=\"padding:10px 18px; font-size:14px;\">Get a quote<\/a>\r\n <button class=\"burger\" id=\"burgerBtn\" aria-label=\"Menu\"><span><\/span><span><\/span><span><\/span><\/button>\r\n <\/div>\r\n <\/nav>\r\n <div class=\"mobile-panel\" id=\"mobilePanel\">\r\n <a href=\"\/webit-web-development-hosting-digital-marketing-agency-in-jordan-\u0648\u064a\u0628-\u0625\u062a-\u0634\u0631\u0643\u0629-\u062a\u0635\u0645\u064a\u0645-\u0648\u062a\u0637\u0648\u064a\u0631\">Home<\/a>\r\n <a href=\"\/services\">Services<\/a>\r\n <a href=\"#top\" class=\"active\">Work<\/a>\r\n <a href=\"\/products\">Products<\/a>\r\n <a href=\"\/about\">About<\/a>\r\n <a href=\"\/contact-us\">Contact<\/a>\r\n <\/div>\r\n <script>\r\n const header = document.getElementById('siteHeader');\r\n window.addEventListener('scroll', () => {\r\n header.classList.toggle('shrink', window.scrollY > 30);\r\n }, {passive:true});\r\n\r\n const burger = document.getElementById('burgerBtn');\r\n const panel = document.getElementById('mobilePanel');\r\n burger.addEventListener('click', () => panel.classList.toggle('open'));\r\n panel.querySelectorAll('a').forEach(a => a.addEventListener('click', () => panel.classList.remove('open')));\r\n\r\n const revealEls = document.querySelectorAll('[data-reveal]');\r\n const io = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('in-view');\r\n io.unobserve(entry.target);\r\n }\r\n });\r\n }, {threshold:0.15});\r\n revealEls.forEach(el => io.observe(el));\r\n<\/script>\r\n<\/header>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6d2baae e-flex e-con-boxed e-con e-parent\" data-id=\"6d2baae\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-2c0e86f e-con-full e-flex e-con e-child\" data-id=\"2c0e86f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-04c8714 elementor-widget elementor-widget-shortcode\" data-id=\"04c8714\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"> <style>\r\n .ats-toolbar{ margin-bottom:25px; }\r\n .ats-floating-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }\r\n .ats-filter-chip{\r\n display:inline-flex; align-items:center; gap:6px;\r\n padding:8px 18px; border-radius:30px; background:#f3f4f6;\r\n color:#374151; text-decoration:none!important; cursor:pointer;\r\n transition:.25s; font-size:14px; border:none;\r\n }\r\n .ats-filter-chip:hover,\r\n .ats-filter-chip.is-active{ background:#0DA99C; color:#fff!important; }\r\n .ats-filter-chip .ats-count{\r\n background:rgba(0,0,0,.08); border-radius:20px; padding:1px 8px; font-size:12px;\r\n }\r\n .ats-filter-chip.is-active .ats-count{ background:rgba(255,255,255,.25); }\r\n .ats-status-bar .ats-filter-chip[data-status=\"online\"] .ats-count{ background:rgba(21,128,61,.15); }\r\n .ats-status-bar .ats-filter-chip[data-status=\"offline\"] .ats-count{ background:rgba(185,28,28,.15); }\r\n .ats-status-bar .ats-filter-chip[data-status=\"online\"]{ background:#dcfce7; color:#15803d; }\r\n .ats-status-bar .ats-filter-chip[data-status=\"online\"]:hover,\r\n .ats-status-bar .ats-filter-chip[data-status=\"online\"].is-active{ background:#16a34a; color:#fff!important; }\r\n .ats-status-bar .ats-filter-chip[data-status=\"offline\"]{ background:#fee2e2; color:#b91c1c; }\r\n .ats-status-bar .ats-filter-chip[data-status=\"offline\"]:hover,\r\n .ats-status-bar .ats-filter-chip[data-status=\"offline\"].is-active{ background:#dc2626; color:#fff!important; }\r\n .ats-results-meta{ font-size:13px; color:#6b7280; margin-bottom:16px; }\r\n #ats_projects_3756 .pl-projects-grid > *{\r\n opacity:0; transform:translateY(20px); transition:.35s ease;\r\n }\r\n #ats_projects_3756 .pl-projects-grid > *.ats-show{ opacity:1; transform:none; }\r\n .pl-project-card__status--offline{ opacity:.7; }\r\n <\/style>\r\n\r\n <div id=\"ats_projects_3756\">\r\n <div class=\"ats-toolbar\">\r\n\r\n <!-- Online \/ Offline status filter -->\r\n <div class=\"ats-floating-bar ats-status-bar\">\r\n <a href=\"\/ar\/wp-json\/wp\/v2\/pages\/126\"\r\n class=\"ats-filter-chip is-active\"\r\n data-status=\"\">\r\n All <span class=\"ats-count\">68<\/span>\r\n <\/a>\r\n <a href=\"\/ar\/wp-json\/wp\/v2\/pages\/126?project_status=online\"\r\n class=\"ats-filter-chip \"\r\n data-status=\"online\">\r\n Online <span class=\"ats-count\">48<\/span>\r\n <\/a>\r\n <a href=\"\/ar\/wp-json\/wp\/v2\/pages\/126?project_status=offline\"\r\n class=\"ats-filter-chip \"\r\n data-status=\"offline\">\r\n Offline <span class=\"ats-count\">20<\/span>\r\n <\/a>\r\n <\/div>\r\n\r\n <!-- Category filter -->\r\n <div class=\"ats-floating-bar ats-category-bar\">\r\n <a href=\"\/ar\/wp-json\/wp\/v2\/pages\/126\"\r\n class=\"ats-filter-chip is-active\"\r\n data-term=\"\">\r\n All <span class=\"ats-count\">68<\/span>\r\n <\/a>\r\n <a href=\"\/ar\/wp-json\/wp\/v2\/pages\/126?project_cat=acf\"\r\n class=\"ats-filter-chip \"\r\n data-term=\"acf\">\r\n ACF <span class=\"ats-count\">12<\/span>\r\n <\/a>\r\n <a href=\"\/ar\/wp-json\/wp\/v2\/pages\/126?project_cat=blogging\"\r\n class=\"ats-filter-chip \"\r\n data-term=\"blogging\">\r\n Blogging <span class=\"ats-count\">7<\/span>\r\n <\/a>\r\n <a href=\"\/ar\/wp-json\/wp\/v2\/pages\/126?project_cat=booking\"\r\n class=\"ats-filter-chip \"\r\n data-term=\"booking\">\r\n Booking <span class=\"ats-count\">11<\/span>\r\n <\/a>\r\n <a href=\"\/ar\/wp-json\/wp\/v2\/pages\/126?project_cat=custom-design\"\r\n class=\"ats-filter-chip \"\r\n data-term=\"custom-design\">\r\n Custom Design <span class=\"ats-count\">22<\/span>\r\n <\/a>\r\n <a href=\"\/ar\/wp-json\/wp\/v2\/pages\/126?project_cat=e-commerce\"\r\n class=\"ats-filter-chip \"\r\n data-term=\"e-commerce\">\r\n E-commerce <span class=\"ats-count\">47<\/span>\r\n <\/a>\r\n <a href=\"\/ar\/wp-json\/wp\/v2\/pages\/126?project_cat=gym\"\r\n class=\"ats-filter-chip \"\r\n data-term=\"gym\">\r\n Gym <span class=\"ats-count\">1<\/span>\r\n <\/a>\r\n <a href=\"\/ar\/wp-json\/wp\/v2\/pages\/126?project_cat=lms\"\r\n class=\"ats-filter-chip \"\r\n data-term=\"lms\">\r\n LMS <span class=\"ats-count\">4<\/span>\r\n <\/a>\r\n <a href=\"\/ar\/wp-json\/wp\/v2\/pages\/126?project_cat=multi-vendor\"\r\n class=\"ats-filter-chip \"\r\n data-term=\"multi-vendor\">\r\n Multi-Vendor <span class=\"ats-count\">3<\/span>\r\n <\/a>\r\n <a href=\"\/ar\/wp-json\/wp\/v2\/pages\/126?project_cat=portfolio\"\r\n class=\"ats-filter-chip \"\r\n data-term=\"portfolio\">\r\n Portfolio <span class=\"ats-count\">20<\/span>\r\n <\/a>\r\n <a href=\"\/ar\/wp-json\/wp\/v2\/pages\/126?project_cat=pos\"\r\n class=\"ats-filter-chip \"\r\n data-term=\"pos\">\r\n POS <span class=\"ats-count\">2<\/span>\r\n <\/a>\r\n <a href=\"\/ar\/wp-json\/wp\/v2\/pages\/126?project_cat=top\"\r\n class=\"ats-filter-chip \"\r\n data-term=\"top\">\r\n Top <span class=\"ats-count\">19<\/span>\r\n <\/a>\r\n <a href=\"\/ar\/wp-json\/wp\/v2\/pages\/126?project_cat=tourism\"\r\n class=\"ats-filter-chip \"\r\n data-term=\"tourism\">\r\n Tourism <span class=\"ats-count\">1<\/span>\r\n <\/a>\r\n <\/div>\r\n \r\n <div class=\"ats-results-meta\">\r\n <span data-results-count>68<\/span> project<span data-results-plural>s<\/span> found\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pl-projects-grid\" data-results><\/div>\r\n <\/div>\r\n\r\n <script>\r\n (function(){\r\n const box = document.getElementById(\"ats_projects_3756\");\r\n if(!box) return;\r\n const results = box.querySelector('[data-results]');\r\n const countEl = box.querySelector('[data-results-count]');\r\n const pluralEl = box.querySelector('[data-results-plural]');\r\n const termButtons = box.querySelectorAll('.ats-category-bar .ats-filter-chip');\r\n const statusButtons = box.querySelectorAll('.ats-status-bar .ats-filter-chip');\r\n const ajax = \"https:\/\/webitjo.com\/wp-admin\/admin-ajax.php\";\r\n\r\n function loadProjects(term, status){\r\n const data = new FormData();\r\n data.append('action', 'ats_filter_projects');\r\n data.append('term', term || '');\r\n data.append('status', status || '');\r\n\r\n fetch(ajax + '?nocache=' + Date.now(), { method:'POST', body:data, cache:'no-store' })\r\n .then(r => r.json())\r\n .then(r => {\r\n if (!r.success) {\r\n results.innerHTML = '<div class=\"pl-empty-state\">Error loading projects<\/div>';\r\n return;\r\n }\r\n results.innerHTML = r.data.html;\r\n if (countEl) countEl.textContent = r.data.count;\r\n if (pluralEl) pluralEl.textContent = r.data.count === 1 ? '' : 's';\r\n Array.from(results.children).forEach((item, index) => {\r\n setTimeout(() => { item.classList.add('ats-show'); }, index * 70);\r\n });\r\n })\r\n .catch(error => console.error(error));\r\n }\r\n\r\n function currentParams(){\r\n const params = new URLSearchParams(window.location.search);\r\n return {\r\n term: params.get('project_cat') || '',\r\n status: params.get('project_status') || '',\r\n };\r\n }\r\n\r\n function updateActiveStates(term, status){\r\n termButtons.forEach(b => b.classList.toggle('is-active', b.dataset.term === term));\r\n statusButtons.forEach(b => b.classList.toggle('is-active', b.dataset.status === status));\r\n }\r\n\r\n termButtons.forEach(button => {\r\n button.addEventListener('click', function(e){\r\n e.preventDefault();\r\n const { status } = currentParams();\r\n const term = this.dataset.term;\r\n updateActiveStates(term, status);\r\n\r\n const url = new URL(window.location.href);\r\n term ? url.searchParams.set('project_cat', term) : url.searchParams.delete('project_cat');\r\n history.pushState({}, '', url);\r\n loadProjects(term, status);\r\n });\r\n });\r\n\r\n statusButtons.forEach(button => {\r\n button.addEventListener('click', function(e){\r\n e.preventDefault();\r\n const { term } = currentParams();\r\n const status = this.dataset.status;\r\n updateActiveStates(term, status);\r\n\r\n const url = new URL(window.location.href);\r\n status ? url.searchParams.set('project_status', status) : url.searchParams.delete('project_status');\r\n history.pushState({}, '', url);\r\n loadProjects(term, status);\r\n });\r\n });\r\n\r\n window.addEventListener('popstate', function(){\r\n const { term, status } = currentParams();\r\n updateActiveStates(term, status);\r\n loadProjects(term, status);\r\n });\r\n\r\n const initial = currentParams();\r\n loadProjects(initial.term, initial.status);\r\n })();\r\n <\/script>\r\n <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ba0b99d e-con-full e-flex e-con e-parent\" data-id=\"ba0b99d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8ada63f elementor-widget elementor-widget-html\" data-id=\"8ada63f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!-- ============ FOOTER ============ -->\r\n<footer>\r\n <div class=\"wrap\">\r\n <div class=\"foot-grid\">\r\n <div class=\"foot-about\">\r\n<div class=\"foot-logo\">\r\n <img decoding=\"async\" src=\"https:\/\/webitjo.com\/wp-content\/uploads\/2026\/07\/WEBIT-2-1.png\" alt=\"WEBIT Logo\">\r\n<\/div>\r\n <p>A web developmentcompany based in Jordan, building and hosting websites for businesses across the Middle East and the US since 2021.<\/p>\r\n <div class=\"socials\">\r\n <a href=\"https:\/\/www.instagram.com\/webitjo\/\r\n\" aria-label=\"Instagram\" target=\"_blank\" rel=\"noopener\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.8\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><circle cx=\"17.2\" cy=\"6.8\" r=\"1\"\/><\/svg><\/a>\r\n <a href=\"https:\/\/www.linkedin.com\/company\/webitjo\/\" aria-label=\"LinkedIn\" target=\"_blank\" rel=\"noopener\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.8\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M7 10v7M7 7v.01M11 17v-4.5c0-1.4 1-2.5 2.5-2.5S16 11.1 16 12.5V17\"\/><\/svg><\/a>\r\n <a href=\"https:\/\/wa.me\/962779080305\" aria-label=\"WhatsApp\" target=\"_blank\" rel=\"noopener\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.8\"><path d=\"M4 20l1.4-4A8 8 0 1 1 9 19l-5 1Z\"\/><\/svg><\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"foot-col\">\r\n <h4>Services<\/h4>\r\n <a href=\"#services\">Web Development<\/a>\r\n <a href=\"#services\">Web Hosting<\/a>\r\n <a href=\"#services\">Email & Domain<\/a>\r\n <a href=\"https:\/\/wa.me\/962779080305\" target=\"_blank\" rel=\"noopener\">Social Media<\/a>\r\n <\/div>\r\n <div class=\"foot-col\">\r\n <h4>Company<\/h4>\r\n <a href=\"\/Services\">Services<\/a>\r\n <a href=\"\/about\">About<\/a>\r\n <a href=\"\/Projects\" style=\"color:#16A596\">Our Work<\/a>\r\n <a href=\"\/products\">Products<\/a>\r\n <a href=\"\/contact-us\">Contact<\/a>\r\n <\/div>\r\n <div class=\"foot-col\">\r\n <h4>Get in touch<\/h4>\r\n <a href=\"mailto:info@webit.jo\">info@webitjo.com<\/a>\r\n <a href=\"tel:00962779080305\">00962779080305<\/a>\r\n <a href=\"#\">Amman, Jordan<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"foot-bottom\">\r\n <span>\u00a9 2021 - 2026 WEBIT. All rights reserved.<\/span>\r\n <span>Founded by Ali Ghabin \u00b7 Jordan \ud83c\uddef\ud83c\uddf4<\/span>\r\n <\/div>\r\n <\/div>\r\n<\/footer>\r\n\r\n<script>\r\n const header = document.getElementById('siteHeader');\r\n window.addEventListener('scroll', () => {\r\n header.classList.toggle('shrink', window.scrollY > 30);\r\n }, {passive:true});\r\n\r\n const burger = document.getElementById('burgerBtn');\r\n const panel = document.getElementById('mobilePanel');\r\n burger.addEventListener('click', () => panel.classList.toggle('open'));\r\n panel.querySelectorAll('a').forEach(a => a.addEventListener('click', () => panel.classList.remove('open')));\r\n\r\n const revealEls = document.querySelectorAll('[data-reveal]');\r\n const io = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('in-view');\r\n io.unobserve(entry.target);\r\n }\r\n });\r\n }, {threshold:0.15});\r\n revealEls.forEach(el => io.observe(el));\r\n<\/script>\r\n<\/body>\t\t\t\t<\/div>\n\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>Contact Us | WEBIT Home Services Work Products About Contact Get a quote Home Services Work Products About Contact A web developmentcompany based in Jordan, building and hosting websites for businesses across the Middle East and the US since 2021. Services Web Development Web Hosting Email & Domain Social Media Company Services About Our Work […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-126","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/webitjo.com\/ar\/wp-json\/wp\/v2\/pages\/126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webitjo.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webitjo.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webitjo.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webitjo.com\/ar\/wp-json\/wp\/v2\/comments?post=126"}],"version-history":[{"count":44,"href":"https:\/\/webitjo.com\/ar\/wp-json\/wp\/v2\/pages\/126\/revisions"}],"predecessor-version":[{"id":874,"href":"https:\/\/webitjo.com\/ar\/wp-json\/wp\/v2\/pages\/126\/revisions\/874"}],"wp:attachment":[{"href":"https:\/\/webitjo.com\/ar\/wp-json\/wp\/v2\/media?parent=126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}