Services | 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{font-family:'Inter',sans-serif; background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden;}\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 ---------- *\/\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 60px; overflow:hidden;}\r\n .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; position:relative; z-index:1;}\r\n .hero h1{font-size:clamp(34px,4.6vw,54px); margin:18px 0 22px; font-weight:700;}\r\n .hero h1 .hl{color:var(--teal-dark);}\r\n .hero p.lead{font-size:18px; color:var(--ink-soft); max-width:520px; margin-bottom:32px; line-height:1.6;}\r\n\r\n \/* hero code-card, typewriter *\/\r\n .code-card{\r\n background:var(--ink); border-radius:18px; overflow:hidden;\r\n box-shadow:0 40px 80px -30px rgba(20,22,26,.45);\r\n transform:rotate(1.2deg); transition:transform .5s var(--ease);\r\n }\r\n .code-card:hover{transform:rotate(0deg) translateY(-4px);}\r\n .code-top{display:flex; align-items:center; gap:8px; padding:14px 18px; background:#0F1114; border-bottom:1px solid rgba(255,255,255,.06);}\r\n .code-top span{width:11px; height:11px; border-radius:50%;}\r\n .code-top span:nth-child(1){background:#FF5F57;}\r\n .code-top span:nth-child(2){background:#FEBC2E;}\r\n .code-top span:nth-child(3){background:#28C840;}\r\n .code-top small{margin-left:auto; font-family:'JetBrains Mono',monospace; color:#7D8590; font-size:11.5px;}\r\n .code-body{padding:26px 24px 30px; font-family:'JetBrains Mono',monospace; font-size:13.5px; line-height:1.9; color:#B7C4D0; min-height:230px;}\r\n .code-body .cline{white-space:pre;}\r\n .code-body .tag{color:var(--teal);}\r\n .code-body .attr{color:#E4B76A;}\r\n .code-body .str{color:#8CD7C6;}\r\n .code-body .cursor{display:inline-block; width:7px; height:15px; background:var(--teal); vertical-align:middle; animation:blink 1s steps(1) infinite;}\r\n @keyframes blink{50%{opacity:0;}}\r\n\r\n .divider{display:block; width:100%; height:56px;}\r\n .divider.flip{transform:scaleY(-1);}\r\n\r\n .section{padding:88px 0;}\r\n .section-head{max-width:620px; margin-bottom:52px;}\r\n .section-head h2{font-size:clamp(26px,3.2vw,38px); margin-top:14px; font-weight:700;}\r\n .section-head p{color:var(--ink-soft); font-size:16px; margin-top:14px; line-height:1.65;}\r\n\r\n \/* ---------- detailed service rows ---------- *\/\r\n .svc-row{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; padding:64px 0;}\r\n .svc-row.reverse{grid-template-columns:1.15fr .85fr;}\r\n .svc-row.reverse .svc-visual{order:2;}\r\n .svc-visual{\r\n background:var(--white); border:1px solid rgba(20,22,26,.07); border-radius:20px;\r\n aspect-ratio:4\/3; display:flex; align-items:center; justify-content:center;\r\n position:relative; overflow:hidden;\r\n }\r\n .svc-visual svg{width:42%; height:42%;}\r\n .svc-index{\r\n position:absolute; top:20px; left:20px; font-family:'JetBrains Mono',monospace;\r\n font-size:12px; font-weight:600; color:var(--ink-soft); background:var(--paper);\r\n padding:5px 11px; border-radius:999px; border:1px solid rgba(20,22,26,.08);\r\n }\r\n .svc-copy .eyebrow{margin-bottom:12px;}\r\n .svc-copy h3{font-size:clamp(22px,2.6vw,30px); font-weight:700; margin-bottom:14px;}\r\n .svc-copy > p{font-size:15.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:22px;}\r\n .feat-list{display:flex; flex-direction:column; gap:12px;}\r\n .feat-list li{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--ink-soft);}\r\n .feat-list svg{width:18px; height:18px; stroke:var(--teal-dark); flex-shrink:0; margin-top:2px;}\r\n .row-divider{height:1px; background:rgba(20,22,26,.08); max-width:1180px; margin:0 auto;}\r\n\r\n \/* ---------- site types strip ---------- *\/\r\n .types-strip{background:var(--paper-dim); padding:80px 0;}\r\n .types-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}\r\n .type-card{background:var(--white); border:1px solid rgba(20,22,26,.07); border-radius:14px; padding:22px 16px; text-align:center; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;}\r\n .type-card:hover{transform:translateY(-6px); box-shadow:0 20px 36px -18px rgba(11,110,99,.28); border-color:var(--teal);}\r\n .type-card svg{width:34px; height:34px; margin:0 auto 12px;}\r\n .type-card span{font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);}\r\n\r\n \/* ---------- CTA band ---------- *\/\r\n .cta-band{background:var(--ink); 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;}\r\n .cta-band h2{color:var(--white); font-size:clamp(22px,2.8vw,32px); max-width:500px;}\r\n .cta-band .eyebrow{color:var(--teal);}\r\n .cta-band .eyebrow::before{box-shadow:0 0 0 4px rgba(22,165,150,.25);}\r\n .cta-peak{position:absolute; bottom:-2px; right:-2px; width:320px; opacity:.5;}\r\n\r\n \/* ---------- footer ---------- *\/\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 .hero-grid{grid-template-columns:1fr;}\r\n .svc-row, .svc-row.reverse{grid-template-columns:1fr; gap:32px;}\r\n .svc-row.reverse .svc-visual{order:0;}\r\n .types-grid{grid-template-columns:repeat(3,1fr);}\r\n .foot-grid{grid-template-columns:1fr 1fr;}\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 .types-grid{grid-template-columns:repeat(2,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\r\n\r\n\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\u0628-\u0625\u062a-\u0634\u0631\u0643\u0629-\u062a\u0635\u0645\u064a\u0645-\u0648\u062a\u0637\u0648\u064a\u0631\" 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\" class=\"active\">Services<\/a><\/li>\r\n <li><a href=\"\/Projects\">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\" >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\" class=\"active\">Services<\/a>\r\n <a href=\"\/Projects\">Work<\/a>\r\n <a href=\"\/products\">Products<\/a>\r\n <a href=\"\/about\">About<\/a>\r\n <a href=\"\/contact\" >Contact<\/a>\r\n <\/div>\r\n<\/header>\r\n\r\n\r\n<section class=\"hero\" id=\"top\">\r\n <div class=\"wrap hero-grid\">\r\n <div data-reveal>\r\n <span class=\"eyebrow\">What we do<\/span>\r\n <h1>Everything your website needs, <span class=\"hl\">under one roof.<\/span><\/h1>\r\n <p class=\"lead\">Development, hosting, domains, email, Google Business and social media \u2014 five services, one team, zero juggling five different vendors.<\/p>\r\n <div style=\"display:flex; gap:14px; flex-wrap:wrap;\">\r\n <a href=\"\/contact\" class=\"btn btn-solid\">Get a quote \u2192<\/a>\r\n <a href=\"#web-development\" class=\"btn btn-outline\">See services<\/a>\r\n <\/div>\r\n <\/div>\r\n <div data-reveal>\r\n <div class=\"code-card\">\r\n <div class=\"code-top\"><span><\/span><span><\/span><span><\/span><small>services.config<\/small><\/div>\r\n <div class=\"code-body\" id=\"typewriter\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<svg class=\"divider\" viewBox=\"0 0 1200 60\" preserveAspectRatio=\"none\"><path d=\"M0 60 L0 30 L60 45 L120 15 L180 40 L240 10 L300 35 L360 8 L420 32 L480 12 L540 38 L600 18 L660 42 L720 14 L780 36 L840 6 L900 30 L960 20 L1020 44 L1080 16 L1140 34 L1200 22 L1200 60 Z\" fill=\"#FFFFFF\"\/><\/svg>\r\n\r\n\r\n<div class=\"wrap\">\r\n <div class=\"svc-row\" id=\"web-development\">\r\n <div class=\"svc-visual\" data-reveal>\r\n <span class=\"svc-index\">01 \/ 05<\/span>\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#0B6E63\" stroke-width=\"1.6\"><path d=\"M14 8 4 24l10 16M34 8l10 16-10 16M28 6l-8 36\"\/><\/svg>\r\n <\/div>\r\n <div class=\"svc-copy\" data-reveal>\r\n <span class=\"eyebrow\">Web Development<\/span>\r\n <h3>Sites built around your business, not a template.<\/h3>\r\n <p>Ecommerce stores, learning platforms, booking systems, portfolios and blogs \u2014 each one built from the ground up around what your business actually needs to do, not squeezed into a one-size-fits-all theme.<\/p>\r\n <ul class=\"feat-list\">\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Custom builds for ecommerce, LMS, booking, portfolio and blog sites<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Mobile-first, fast-loading pages from day one<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Built to be easy for you to update afterwards<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"row-divider\"><\/div>\r\n\r\n\r\n<div class=\"wrap\">\r\n <div class=\"svc-row reverse\">\r\n <div class=\"svc-copy\" data-reveal>\r\n <span class=\"eyebrow\">Web Hosting<\/span>\r\n <h3>Fast servers, and a team that answers.<\/h3>\r\n <p>Your site is only as good as the server it runs on. We host, monitor and back up every project we build \u2014 and when something needs attention, you're calling the people who actually built it.<\/p>\r\n <ul class=\"feat-list\">\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Monitored servers with regular backups<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>SSL and security handled for you<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>A real person to call when something breaks<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"svc-visual\" data-reveal>\r\n <span class=\"svc-index\">02 \/ 05<\/span>\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#0B6E63\" stroke-width=\"1.6\"><ellipse cx=\"24\" cy=\"10\" rx=\"16\" ry=\"6\"\/><path d=\"M8 10v12c0 3.3 7.2 6 16 6s16-2.7 16-6V10M8 22v12c0 3.3 7.2 6 16 6s16-2.7 16-6V22\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"row-divider\"><\/div>\r\n\r\n\r\n<div class=\"wrap\">\r\n <div class=\"svc-row\">\r\n <div class=\"svc-visual\" data-reveal>\r\n <span class=\"svc-index\">03 \/ 05<\/span>\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#0B6E63\" stroke-width=\"1.6\"><rect x=\"6\" y=\"10\" width=\"36\" height=\"28\" rx=\"3\"\/><path d=\"m6 14 18 12 18-12\"\/><\/svg>\r\n <\/div>\r\n <div class=\"svc-copy\" data-reveal>\r\n <span class=\"eyebrow\">Email & Domain<\/span>\r\n <h3>Your name, done right \u2014 everywhere it counts.<\/h3>\r\n <p>We register and renew your domain, set up professional email addresses on your own name, and take care of the DNS and technical setup that most business owners never want to touch.<\/p>\r\n <ul class=\"feat-list\">\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Domain registration and renewal, handled for you<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Professional @yourbusiness email addresses<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>DNS and technical setup, done correctly the first time<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"row-divider\"><\/div>\r\n\r\n\r\n<div class=\"wrap\">\r\n <div class=\"svc-row reverse\">\r\n <div class=\"svc-copy\" data-reveal>\r\n <span class=\"eyebrow\">Google Business<\/span>\r\n <h3>Show up when people search for you.<\/h3>\r\n <p>A website only helps if people can find it. We set up and maintain your Google Business Profile so your hours, photos and details are accurate \u2014 and your business actually shows up on Search and Maps.<\/p>\r\n <ul class=\"feat-list\">\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Profile setup and verification<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Hours, photos and details kept current<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Better visibility on Google Search and Maps<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"svc-visual\" data-reveal>\r\n <span class=\"svc-index\">04 \/ 05<\/span>\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#0B6E63\" stroke-width=\"1.6\"><circle cx=\"24\" cy=\"24\" r=\"18\"\/><path d=\"M6 24h36M24 6c5 5 8 11 8 18s-3 13-8 18c-5-5-8-11-8-18s3-13 8-18Z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"row-divider\"><\/div>\r\n\r\n\r\n<div class=\"wrap\">\r\n <div class=\"svc-row\">\r\n <div class=\"svc-visual\" data-reveal>\r\n <span class=\"svc-index\">05 \/ 05<\/span>\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#0B6E63\" stroke-width=\"1.6\"><rect x=\"6\" y=\"8\" width=\"36\" height=\"28\" rx=\"3\"\/><path d=\"M6 16h36M16 42h16M24 36v6\"\/><\/svg>\r\n <\/div>\r\n <div class=\"svc-copy\" data-reveal>\r\n <span class=\"eyebrow\">Social Media Management<\/span>\r\n <h3>A presence that actually sounds like you.<\/h3>\r\n <p>Consistent posting, captions that sound like your brand instead of a stock template, and a basic read on what's actually landing with your audience \u2014 so your social channels support the website instead of sitting abandoned.<\/p>\r\n <ul class=\"feat-list\">\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Consistent posting across your channels<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Content and captions written for your brand<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Basic performance tracking so you know what's working<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<section class=\"types-strip\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head\" data-reveal>\r\n <span class=\"eyebrow\">Built on WEBIT<\/span>\r\n <h2>Five kinds of sites, one team behind all of them.<\/h2>\r\n <\/div>\r\n <div class=\"types-grid\" data-reveal=\"stagger\">\r\n <div class=\"type-card\"><a href=\"https:\/\/webitjo.com\/Projects\/?project_cat=e-commerce&project_status=online\">\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#0B6E63\" stroke-width=\"1.8\"><rect x=\"8\" y=\"14\" width=\"32\" height=\"24\" rx=\"2\"\/><path d=\"M16 14v-3a8 8 0 0 1 16 0v3\"\/><\/svg>\r\n <span>Ecommerce<\/span><\/a>\r\n <\/div>\r\n <div class=\"type-card\"><a href=\"https:\/\/webitjo.com\/Projects\/?project_cat=lms&project_status=online\" style=\"font-weight:bold;\">\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#0B6E63\" stroke-width=\"1.8\"><path d=\"M24 12 6 18l18 6 18-6-18-6Z\"\/><path d=\"M12 21v9c0 2 5.4 4 12 4s12-2 12-4v-9\"\/><\/svg>\r\n <span>LMS<\/span><\/a>\r\n <\/div>\r\n <div class=\"type-card\"><a href=\"https:\/\/webitjo.com\/Projects\/?project_cat=portfolio&project_status=online\" style=\"font-weight:bold;\">\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#0B6E63\" stroke-width=\"1.8\"><circle cx=\"24\" cy=\"17\" r=\"6\"\/><path d=\"M12 39c0-7 5.4-12 12-12s12 5 12 12\"\/><\/svg>\r\n <span>Portfolio<\/span><\/a>\r\n <\/div>\r\n <div class=\"type-card\"><a href=\"https:\/\/webitjo.com\/Projects\/?project_cat=booking&project_status=online\" style=\"font-weight:bold;\">\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#0B6E63\" stroke-width=\"1.8\"><rect x=\"8\" y=\"10\" width=\"32\" height=\"28\" rx=\"2\"\/><path d=\"M8 18h32M16 6v8M32 6v8\"\/><rect x=\"15\" y=\"24\" width=\"6\" height=\"6\"\/><\/svg>\r\n <span>Booking<\/span><\/a>\r\n <\/div>\r\n <div class=\"type-card\"><a href=\"https:\/\/webitjo.com\/Projects\/?project_cat=blogging&project_status=online\" style=\"font-weight:bold;\">\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#0B6E63\" stroke-width=\"1.8\"><path d=\"M12 8h20l4 4v28H12z\"\/><path d=\"M18 20h12M18 26h12M18 32h8\"\/><\/svg>\r\n <span>Blogging<\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section style=\"padding:90px 0;\">\r\n <div class=\"cta-band\" data-reveal>\r\n <svg class=\"cta-peak\" viewBox=\"0 0 100 100\" fill=\"none\"><path d=\"M8 22 L30 78 L50 34 L70 78 L92 22\" stroke=\"#16A596\" stroke-width=\"6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <div class=\"cta-inner\">\r\n <div>\r\n <span class=\"eyebrow\">Ready when you are<\/span>\r\n <h2 style=\"margin-top:14px;\">Not sure which service you need? Just tell us the problem.<\/h2>\r\n <\/div>\r\n <div style=\"display:flex; gap:14px; flex-wrap:wrap;\">\r\n <a href=\"https:\/\/wa.me\/962779080305\" target=\"_blank\" rel=\"noopener\" class=\"btn btn-light\">WhatsApp us<\/a>\r\n <a href=\"mailto:info@webitjo.com\" class=\"btn btn-outline\" style=\"border-color:rgba(255,255,255,.25); color:#fff;\">Email us<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\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\" style=\"color:#16A596\">Services<\/a>\r\n <a href=\"\/about\">About<\/a>\r\n <a href=\"\/Projects\">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\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\r\n \/* ---------- typewriter code card ---------- *\/\r\n (function () {\r\n const target = document.getElementById('typewriter');\r\n if (!target) return;\r\n\r\n const lines = [\r\n { plain: '<client project=\"webit\">', html: '<span class=\"tag\"><client<\/span> <span class=\"attr\">project<\/span>=<span class=\"str\">\"webit\"<\/span><span class=\"tag\">><\/span>' },\r\n { plain: ' <web_development>enabled<\/web_development>', html: ' <span class=\"tag\"><web_development><\/span><span class=\"str\">enabled<\/span><span class=\"tag\"><\/web_development><\/span>' },\r\n { plain: ' <hosting uptime=\"99.9%\">enabled<\/hosting>', html: ' <span class=\"tag\"><hosting<\/span> <span class=\"attr\">uptime<\/span>=<span class=\"str\">\"99.9%\"<\/span><span class=\"tag\">><\/span><span class=\"str\">enabled<\/span><span class=\"tag\"><\/hosting><\/span>' },\r\n { plain: ' <domain_email>enabled<\/domain_email>', html: ' <span class=\"tag\"><domain_email><\/span><span class=\"str\">enabled<\/span><span class=\"tag\"><\/domain_email><\/span>' },\r\n { plain: ' <google_business>enabled<\/google_business>', html: ' <span class=\"tag\"><google_business><\/span><span class=\"str\">enabled<\/span><span class=\"tag\"><\/google_business><\/span>' },\r\n { plain: ' <social_media>enabled<\/social_media>', html: ' <span class=\"tag\"><social_media><\/span><span class=\"str\">enabled<\/span><span class=\"tag\"><\/social_media><\/span>' },\r\n { plain: '<\/client>', html: '<span class=\"tag\"><\/client><\/span>' }\r\n ];\r\n\r\n const TYPE_SPEED = 22;\r\n const LINE_PAUSE = 120;\r\n const END_PAUSE = 2200;\r\n const RESTART_PAUSE = 700;\r\n\r\n let lineEls = [];\r\n\r\n function buildLineEls() {\r\n target.innerHTML = '';\r\n lineEls = lines.map(() => {\r\n const div = document.createElement('div');\r\n div.className = 'cline';\r\n target.appendChild(div);\r\n return div;\r\n });\r\n }\r\n\r\n function typeLine(i) {\r\n if (i >= lines.length) {\r\n const cursor = document.createElement('span');\r\n cursor.className = 'cursor';\r\n lineEls[lines.length - 1].appendChild(cursor);\r\n setTimeout(() => { buildLineEls(); typeLine(0); }, END_PAUSE);\r\n return;\r\n }\r\n const el = lineEls[i];\r\n const text = lines[i].plain;\r\n let charIndex = 0;\r\n el.textContent = '';\r\n\r\n const cursor = document.createElement('span');\r\n cursor.className = 'cursor';\r\n\r\n function typeChar() {\r\n if (charIndex <= text.length) {\r\n el.textContent = text.slice(0, charIndex);\r\n el.appendChild(cursor);\r\n charIndex++;\r\n setTimeout(typeChar, TYPE_SPEED);\r\n } else {\r\n el.innerHTML = lines[i].html;\r\n setTimeout(() => typeLine(i + 1), LINE_PAUSE);\r\n }\r\n }\r\n typeChar();\r\n }\r\n\r\n buildLineEls();\r\n setTimeout(() => typeLine(0), RESTART_PAUSE);\r\n })();\r\n<\/script>\r\n<\/body>\r\n<\/html>\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>Services | WEBIT Home Services Work Products About Contact Get a quote Home Services Work Products About Contact What we do Everything your website needs, under one roof. Development, hosting, domains, email, Google Business and social media \u2014 five services, one team, zero juggling five different vendors. Get a quote \u2192 See services services.config 01 […]<\/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-263","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/webitjo.com\/ar\/wp-json\/wp\/v2\/pages\/263","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=263"}],"version-history":[{"count":19,"href":"https:\/\/webitjo.com\/ar\/wp-json\/wp\/v2\/pages\/263\/revisions"}],"predecessor-version":[{"id":877,"href":"https:\/\/webitjo.com\/ar\/wp-json\/wp\/v2\/pages\/263\/revisions\/877"}],"wp:attachment":[{"href":"https:\/\/webitjo.com\/ar\/wp-json\/wp\/v2\/media?parent=263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nServices | 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{font-family:'Inter',sans-serif; background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden;}\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 ---------- *\/\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 60px; overflow:hidden;}\r\n .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; position:relative; z-index:1;}\r\n .hero h1{font-size:clamp(34px,4.6vw,54px); margin:18px 0 22px; font-weight:700;}\r\n .hero h1 .hl{color:var(--teal-dark);}\r\n .hero p.lead{font-size:18px; color:var(--ink-soft); max-width:520px; margin-bottom:32px; line-height:1.6;}\r\n\r\n \/* hero code-card, typewriter *\/\r\n .code-card{\r\n background:var(--ink); border-radius:18px; overflow:hidden;\r\n box-shadow:0 40px 80px -30px rgba(20,22,26,.45);\r\n transform:rotate(1.2deg); transition:transform .5s var(--ease);\r\n }\r\n .code-card:hover{transform:rotate(0deg) translateY(-4px);}\r\n .code-top{display:flex; align-items:center; gap:8px; padding:14px 18px; background:#0F1114; border-bottom:1px solid rgba(255,255,255,.06);}\r\n .code-top span{width:11px; height:11px; border-radius:50%;}\r\n .code-top span:nth-child(1){background:#FF5F57;}\r\n .code-top span:nth-child(2){background:#FEBC2E;}\r\n .code-top span:nth-child(3){background:#28C840;}\r\n .code-top small{margin-left:auto; font-family:'JetBrains Mono',monospace; color:#7D8590; font-size:11.5px;}\r\n .code-body{padding:26px 24px 30px; font-family:'JetBrains Mono',monospace; font-size:13.5px; line-height:1.9; color:#B7C4D0; min-height:230px;}\r\n .code-body .cline{white-space:pre;}\r\n .code-body .tag{color:var(--teal);}\r\n .code-body .attr{color:#E4B76A;}\r\n .code-body .str{color:#8CD7C6;}\r\n .code-body .cursor{display:inline-block; width:7px; height:15px; background:var(--teal); vertical-align:middle; animation:blink 1s steps(1) infinite;}\r\n @keyframes blink{50%{opacity:0;}}\r\n\r\n .divider{display:block; width:100%; height:56px;}\r\n .divider.flip{transform:scaleY(-1);}\r\n\r\n .section{padding:88px 0;}\r\n .section-head{max-width:620px; margin-bottom:52px;}\r\n .section-head h2{font-size:clamp(26px,3.2vw,38px); margin-top:14px; font-weight:700;}\r\n .section-head p{color:var(--ink-soft); font-size:16px; margin-top:14px; line-height:1.65;}\r\n\r\n \/* ---------- detailed service rows ---------- *\/\r\n .svc-row{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; padding:64px 0;}\r\n .svc-row.reverse{grid-template-columns:1.15fr .85fr;}\r\n .svc-row.reverse .svc-visual{order:2;}\r\n .svc-visual{\r\n background:var(--white); border:1px solid rgba(20,22,26,.07); border-radius:20px;\r\n aspect-ratio:4\/3; display:flex; align-items:center; justify-content:center;\r\n position:relative; overflow:hidden;\r\n }\r\n .svc-visual svg{width:42%; height:42%;}\r\n .svc-index{\r\n position:absolute; top:20px; left:20px; font-family:'JetBrains Mono',monospace;\r\n font-size:12px; font-weight:600; color:var(--ink-soft); background:var(--paper);\r\n padding:5px 11px; border-radius:999px; border:1px solid rgba(20,22,26,.08);\r\n }\r\n .svc-copy .eyebrow{margin-bottom:12px;}\r\n .svc-copy h3{font-size:clamp(22px,2.6vw,30px); font-weight:700; margin-bottom:14px;}\r\n .svc-copy > p{font-size:15.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:22px;}\r\n .feat-list{display:flex; flex-direction:column; gap:12px;}\r\n .feat-list li{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--ink-soft);}\r\n .feat-list svg{width:18px; height:18px; stroke:var(--teal-dark); flex-shrink:0; margin-top:2px;}\r\n .row-divider{height:1px; background:rgba(20,22,26,.08); max-width:1180px; margin:0 auto;}\r\n\r\n \/* ---------- site types strip ---------- *\/\r\n .types-strip{background:var(--paper-dim); padding:80px 0;}\r\n .types-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}\r\n .type-card{background:var(--white); border:1px solid rgba(20,22,26,.07); border-radius:14px; padding:22px 16px; text-align:center; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;}\r\n .type-card:hover{transform:translateY(-6px); box-shadow:0 20px 36px -18px rgba(11,110,99,.28); border-color:var(--teal);}\r\n .type-card svg{width:34px; height:34px; margin:0 auto 12px;}\r\n .type-card span{font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);}\r\n\r\n \/* ---------- CTA band ---------- *\/\r\n .cta-band{background:var(--ink); 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;}\r\n .cta-band h2{color:var(--white); font-size:clamp(22px,2.8vw,32px); max-width:500px;}\r\n .cta-band .eyebrow{color:var(--teal);}\r\n .cta-band .eyebrow::before{box-shadow:0 0 0 4px rgba(22,165,150,.25);}\r\n .cta-peak{position:absolute; bottom:-2px; right:-2px; width:320px; opacity:.5;}\r\n\r\n \/* ---------- footer ---------- *\/\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 .hero-grid{grid-template-columns:1fr;}\r\n .svc-row, .svc-row.reverse{grid-template-columns:1fr; gap:32px;}\r\n .svc-row.reverse .svc-visual{order:0;}\r\n .types-grid{grid-template-columns:repeat(3,1fr);}\r\n .foot-grid{grid-template-columns:1fr 1fr;}\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 .types-grid{grid-template-columns:repeat(2,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\r\n\r\n\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\u0628-\u0625\u062a-\u0634\u0631\u0643\u0629-\u062a\u0635\u0645\u064a\u0645-\u0648\u062a\u0637\u0648\u064a\u0631\" 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\" class=\"active\">Services<\/a><\/li>\r\n <li><a href=\"\/Projects\">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\" >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\" class=\"active\">Services<\/a>\r\n <a href=\"\/Projects\">Work<\/a>\r\n <a href=\"\/products\">Products<\/a>\r\n <a href=\"\/about\">About<\/a>\r\n <a href=\"\/contact\" >Contact<\/a>\r\n <\/div>\r\n<\/header>\r\n\r\n\r\n<section class=\"hero\" id=\"top\">\r\n <div class=\"wrap hero-grid\">\r\n <div data-reveal>\r\n <span class=\"eyebrow\">What we do<\/span>\r\n <h1>Everything your website needs, <span class=\"hl\">under one roof.<\/span><\/h1>\r\n <p class=\"lead\">Development, hosting, domains, email, Google Business and social media \u2014 five services, one team, zero juggling five different vendors.<\/p>\r\n <div style=\"display:flex; gap:14px; flex-wrap:wrap;\">\r\n <a href=\"\/contact\" class=\"btn btn-solid\">Get a quote \u2192<\/a>\r\n <a href=\"#web-development\" class=\"btn btn-outline\">See services<\/a>\r\n <\/div>\r\n <\/div>\r\n <div data-reveal>\r\n <div class=\"code-card\">\r\n <div class=\"code-top\"><span><\/span><span><\/span><span><\/span><small>services.config<\/small><\/div>\r\n <div class=\"code-body\" id=\"typewriter\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<svg class=\"divider\" viewBox=\"0 0 1200 60\" preserveAspectRatio=\"none\"><path d=\"M0 60 L0 30 L60 45 L120 15 L180 40 L240 10 L300 35 L360 8 L420 32 L480 12 L540 38 L600 18 L660 42 L720 14 L780 36 L840 6 L900 30 L960 20 L1020 44 L1080 16 L1140 34 L1200 22 L1200 60 Z\" fill=\"#FFFFFF\"\/><\/svg>\r\n\r\n\r\n<div class=\"wrap\">\r\n <div class=\"svc-row\" id=\"web-development\">\r\n <div class=\"svc-visual\" data-reveal>\r\n <span class=\"svc-index\">01 \/ 05<\/span>\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#0B6E63\" stroke-width=\"1.6\"><path d=\"M14 8 4 24l10 16M34 8l10 16-10 16M28 6l-8 36\"\/><\/svg>\r\n <\/div>\r\n <div class=\"svc-copy\" data-reveal>\r\n <span class=\"eyebrow\">Web Development<\/span>\r\n <h3>Sites built around your business, not a template.<\/h3>\r\n <p>Ecommerce stores, learning platforms, booking systems, portfolios and blogs \u2014 each one built from the ground up around what your business actually needs to do, not squeezed into a one-size-fits-all theme.<\/p>\r\n <ul class=\"feat-list\">\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Custom builds for ecommerce, LMS, booking, portfolio and blog sites<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Mobile-first, fast-loading pages from day one<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Built to be easy for you to update afterwards<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"row-divider\"><\/div>\r\n\r\n\r\n<div class=\"wrap\">\r\n <div class=\"svc-row reverse\">\r\n <div class=\"svc-copy\" data-reveal>\r\n <span class=\"eyebrow\">Web Hosting<\/span>\r\n <h3>Fast servers, and a team that answers.<\/h3>\r\n <p>Your site is only as good as the server it runs on. We host, monitor and back up every project we build \u2014 and when something needs attention, you're calling the people who actually built it.<\/p>\r\n <ul class=\"feat-list\">\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Monitored servers with regular backups<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>SSL and security handled for you<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>A real person to call when something breaks<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"svc-visual\" data-reveal>\r\n <span class=\"svc-index\">02 \/ 05<\/span>\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#0B6E63\" stroke-width=\"1.6\"><ellipse cx=\"24\" cy=\"10\" rx=\"16\" ry=\"6\"\/><path d=\"M8 10v12c0 3.3 7.2 6 16 6s16-2.7 16-6V10M8 22v12c0 3.3 7.2 6 16 6s16-2.7 16-6V22\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"row-divider\"><\/div>\r\n\r\n\r\n<div class=\"wrap\">\r\n <div class=\"svc-row\">\r\n <div class=\"svc-visual\" data-reveal>\r\n <span class=\"svc-index\">03 \/ 05<\/span>\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#0B6E63\" stroke-width=\"1.6\"><rect x=\"6\" y=\"10\" width=\"36\" height=\"28\" rx=\"3\"\/><path d=\"m6 14 18 12 18-12\"\/><\/svg>\r\n <\/div>\r\n <div class=\"svc-copy\" data-reveal>\r\n <span class=\"eyebrow\">Email & Domain<\/span>\r\n <h3>Your name, done right \u2014 everywhere it counts.<\/h3>\r\n <p>We register and renew your domain, set up professional email addresses on your own name, and take care of the DNS and technical setup that most business owners never want to touch.<\/p>\r\n <ul class=\"feat-list\">\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Domain registration and renewal, handled for you<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Professional @yourbusiness email addresses<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>DNS and technical setup, done correctly the first time<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"row-divider\"><\/div>\r\n\r\n\r\n<div class=\"wrap\">\r\n <div class=\"svc-row reverse\">\r\n <div class=\"svc-copy\" data-reveal>\r\n <span class=\"eyebrow\">Google Business<\/span>\r\n <h3>Show up when people search for you.<\/h3>\r\n <p>A website only helps if people can find it. We set up and maintain your Google Business Profile so your hours, photos and details are accurate \u2014 and your business actually shows up on Search and Maps.<\/p>\r\n <ul class=\"feat-list\">\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Profile setup and verification<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Hours, photos and details kept current<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Better visibility on Google Search and Maps<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"svc-visual\" data-reveal>\r\n <span class=\"svc-index\">04 \/ 05<\/span>\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#0B6E63\" stroke-width=\"1.6\"><circle cx=\"24\" cy=\"24\" r=\"18\"\/><path d=\"M6 24h36M24 6c5 5 8 11 8 18s-3 13-8 18c-5-5-8-11-8-18s3-13 8-18Z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"row-divider\"><\/div>\r\n\r\n\r\n<div class=\"wrap\">\r\n <div class=\"svc-row\">\r\n <div class=\"svc-visual\" data-reveal>\r\n <span class=\"svc-index\">05 \/ 05<\/span>\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#0B6E63\" stroke-width=\"1.6\"><rect x=\"6\" y=\"8\" width=\"36\" height=\"28\" rx=\"3\"\/><path d=\"M6 16h36M16 42h16M24 36v6\"\/><\/svg>\r\n <\/div>\r\n <div class=\"svc-copy\" data-reveal>\r\n <span class=\"eyebrow\">Social Media Management<\/span>\r\n <h3>A presence that actually sounds like you.<\/h3>\r\n <p>Consistent posting, captions that sound like your brand instead of a stock template, and a basic read on what's actually landing with your audience \u2014 so your social channels support the website instead of sitting abandoned.<\/p>\r\n <ul class=\"feat-list\">\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Consistent posting across your channels<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Content and captions written for your brand<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Basic performance tracking so you know what's working<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<section class=\"types-strip\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head\" data-reveal>\r\n <span class=\"eyebrow\">Built on WEBIT<\/span>\r\n <h2>Five kinds of sites, one team behind all of them.<\/h2>\r\n <\/div>\r\n <div class=\"types-grid\" data-reveal=\"stagger\">\r\n <div class=\"type-card\"><a href=\"https:\/\/webitjo.com\/Projects\/?project_cat=e-commerce&project_status=online\">\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#0B6E63\" stroke-width=\"1.8\"><rect x=\"8\" y=\"14\" width=\"32\" height=\"24\" rx=\"2\"\/><path d=\"M16 14v-3a8 8 0 0 1 16 0v3\"\/><\/svg>\r\n <span>Ecommerce<\/span><\/a>\r\n <\/div>\r\n <div class=\"type-card\"><a href=\"https:\/\/webitjo.com\/Projects\/?project_cat=lms&project_status=online\" style=\"font-weight:bold;\">\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#0B6E63\" stroke-width=\"1.8\"><path d=\"M24 12 6 18l18 6 18-6-18-6Z\"\/><path d=\"M12 21v9c0 2 5.4 4 12 4s12-2 12-4v-9\"\/><\/svg>\r\n <span>LMS<\/span><\/a>\r\n <\/div>\r\n <div class=\"type-card\"><a href=\"https:\/\/webitjo.com\/Projects\/?project_cat=portfolio&project_status=online\" style=\"font-weight:bold;\">\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#0B6E63\" stroke-width=\"1.8\"><circle cx=\"24\" cy=\"17\" r=\"6\"\/><path d=\"M12 39c0-7 5.4-12 12-12s12 5 12 12\"\/><\/svg>\r\n <span>Portfolio<\/span><\/a>\r\n <\/div>\r\n <div class=\"type-card\"><a href=\"https:\/\/webitjo.com\/Projects\/?project_cat=booking&project_status=online\" style=\"font-weight:bold;\">\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#0B6E63\" stroke-width=\"1.8\"><rect x=\"8\" y=\"10\" width=\"32\" height=\"28\" rx=\"2\"\/><path d=\"M8 18h32M16 6v8M32 6v8\"\/><rect x=\"15\" y=\"24\" width=\"6\" height=\"6\"\/><\/svg>\r\n <span>Booking<\/span><\/a>\r\n <\/div>\r\n <div class=\"type-card\"><a href=\"https:\/\/webitjo.com\/Projects\/?project_cat=blogging&project_status=online\" style=\"font-weight:bold;\">\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#0B6E63\" stroke-width=\"1.8\"><path d=\"M12 8h20l4 4v28H12z\"\/><path d=\"M18 20h12M18 26h12M18 32h8\"\/><\/svg>\r\n <span>Blogging<\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section style=\"padding:90px 0;\">\r\n <div class=\"cta-band\" data-reveal>\r\n <svg class=\"cta-peak\" viewBox=\"0 0 100 100\" fill=\"none\"><path d=\"M8 22 L30 78 L50 34 L70 78 L92 22\" stroke=\"#16A596\" stroke-width=\"6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <div class=\"cta-inner\">\r\n <div>\r\n <span class=\"eyebrow\">Ready when you are<\/span>\r\n <h2 style=\"margin-top:14px;\">Not sure which service you need? Just tell us the problem.<\/h2>\r\n <\/div>\r\n <div style=\"display:flex; gap:14px; flex-wrap:wrap;\">\r\n <a href=\"https:\/\/wa.me\/962779080305\" target=\"_blank\" rel=\"noopener\" class=\"btn btn-light\">WhatsApp us<\/a>\r\n <a href=\"mailto:info@webitjo.com\" class=\"btn btn-outline\" style=\"border-color:rgba(255,255,255,.25); color:#fff;\">Email us<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\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\" style=\"color:#16A596\">Services<\/a>\r\n <a href=\"\/about\">About<\/a>\r\n <a href=\"\/Projects\">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\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\r\n \/* ---------- typewriter code card ---------- *\/\r\n (function () {\r\n const target = document.getElementById('typewriter');\r\n if (!target) return;\r\n\r\n const lines = [\r\n { plain: '<client project=\"webit\">', html: '<span class=\"tag\"><client<\/span> <span class=\"attr\">project<\/span>=<span class=\"str\">\"webit\"<\/span><span class=\"tag\">><\/span>' },\r\n { plain: ' <web_development>enabled<\/web_development>', html: ' <span class=\"tag\"><web_development><\/span><span class=\"str\">enabled<\/span><span class=\"tag\"><\/web_development><\/span>' },\r\n { plain: ' <hosting uptime=\"99.9%\">enabled<\/hosting>', html: ' <span class=\"tag\"><hosting<\/span> <span class=\"attr\">uptime<\/span>=<span class=\"str\">\"99.9%\"<\/span><span class=\"tag\">><\/span><span class=\"str\">enabled<\/span><span class=\"tag\"><\/hosting><\/span>' },\r\n { plain: ' <domain_email>enabled<\/domain_email>', html: ' <span class=\"tag\"><domain_email><\/span><span class=\"str\">enabled<\/span><span class=\"tag\"><\/domain_email><\/span>' },\r\n { plain: ' <google_business>enabled<\/google_business>', html: ' <span class=\"tag\"><google_business><\/span><span class=\"str\">enabled<\/span><span class=\"tag\"><\/google_business><\/span>' },\r\n { plain: ' <social_media>enabled<\/social_media>', html: ' <span class=\"tag\"><social_media><\/span><span class=\"str\">enabled<\/span><span class=\"tag\"><\/social_media><\/span>' },\r\n { plain: '<\/client>', html: '<span class=\"tag\"><\/client><\/span>' }\r\n ];\r\n\r\n const TYPE_SPEED = 22;\r\n const LINE_PAUSE = 120;\r\n const END_PAUSE = 2200;\r\n const RESTART_PAUSE = 700;\r\n\r\n let lineEls = [];\r\n\r\n function buildLineEls() {\r\n target.innerHTML = '';\r\n lineEls = lines.map(() => {\r\n const div = document.createElement('div');\r\n div.className = 'cline';\r\n target.appendChild(div);\r\n return div;\r\n });\r\n }\r\n\r\n function typeLine(i) {\r\n if (i >= lines.length) {\r\n const cursor = document.createElement('span');\r\n cursor.className = 'cursor';\r\n lineEls[lines.length - 1].appendChild(cursor);\r\n setTimeout(() => { buildLineEls(); typeLine(0); }, END_PAUSE);\r\n return;\r\n }\r\n const el = lineEls[i];\r\n const text = lines[i].plain;\r\n let charIndex = 0;\r\n el.textContent = '';\r\n\r\n const cursor = document.createElement('span');\r\n cursor.className = 'cursor';\r\n\r\n function typeChar() {\r\n if (charIndex <= text.length) {\r\n el.textContent = text.slice(0, charIndex);\r\n el.appendChild(cursor);\r\n charIndex++;\r\n setTimeout(typeChar, TYPE_SPEED);\r\n } else {\r\n el.innerHTML = lines[i].html;\r\n setTimeout(() => typeLine(i + 1), LINE_PAUSE);\r\n }\r\n }\r\n typeChar();\r\n }\r\n\r\n buildLineEls();\r\n setTimeout(() => typeLine(0), RESTART_PAUSE);\r\n })();\r\n<\/script>\r\n<\/body>\r\n<\/html>\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>Services | WEBIT Home Services Work Products About Contact Get a quote Home Services Work Products About Contact What we do Everything your website needs, under one roof. Development, hosting, domains, email, Google Business and social media \u2014 five services, one team, zero juggling five different vendors. Get a quote \u2192 See services services.config 01 […]<\/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-263","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/webitjo.com\/ar\/wp-json\/wp\/v2\/pages\/263","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=263"}],"version-history":[{"count":19,"href":"https:\/\/webitjo.com\/ar\/wp-json\/wp\/v2\/pages\/263\/revisions"}],"predecessor-version":[{"id":877,"href":"https:\/\/webitjo.com\/ar\/wp-json\/wp\/v2\/pages\/263\/revisions\/877"}],"wp:attachment":[{"href":"https:\/\/webitjo.com\/ar\/wp-json\/wp\/v2\/media?parent=263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}