{"id":643,"date":"2026-09-19T12:07:11","date_gmt":"2026-09-19T12:07:11","guid":{"rendered":"https:\/\/shehryar.ssrmovies.news\/?page_id=643"},"modified":"2026-09-19T12:16:14","modified_gmt":"2026-09-19T12:16:14","slug":"s","status":"publish","type":"page","link":"https:\/\/shehryar.ssrmovies.news\/index.php\/s\/","title":{"rendered":"S"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \t\t
\n\t\t\t\t\t\n\n\n\n\nShehryar \u2014 Professional WordPress Developer in Pakistan<\/title>\n<meta name=\"description\" content=\"Shehryar is a professional WordPress developer from Pakistan crafting modern, responsive and high-performing business websites, WooCommerce stores and Elementor designs.\">\n<meta name=\"theme-color\" content=\"#07080c\">\n<link rel=\"icon\" href=\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%2307080c'\/%3E%3Ctext x='32' y='44' font-family='Georgia' font-size='36' font-weight='bold' fill='%23e7b45a' text-anchor='middle'%3ES%3C\/text%3E%3C\/svg%3E\">\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tailwindcss\/browser@4\"><\/script>\n<script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@1,500;1,600;1,700&display=swap\" rel=\"stylesheet\">\n<script type=\"application\/ld+json\">\n{\"@context\":\"https:\/\/schema.org\",\"@type\":\"Person\",\"name\":\"Shehryar\",\"jobTitle\":\"WordPress Developer\",\"address\":{\"@type\":\"PostalAddress\",\"addressCountry\":\"Pakistan\"},\"email\":\"shehryarfazalrhaman@gmail.com\",\"telephone\":\"+92-309-8818132\"}\n<\/script>\n<style>\n\/* ============================================================\n SHEHRYAR \u2014 PREMIUM BUSINESS PORTFOLIO\n Self-contained stylesheet (WordPress-ready, unique class names)\n============================================================ *\/\n:root{\n --bg:#07080c;\n --bg-soft:#0a0c13;\n --bg-card:rgba(255,255,255,.04);\n --bg-card2:rgba(255,255,255,.06);\n --line:rgba(255,255,255,.09);\n --line-soft:rgba(255,255,255,.06);\n --text:#f5f6f8;\n --muted:#a3a7b4;\n --muted-2:#7c8090;\n --gold:#e7b45a;\n --gold-l:#f9e2ac;\n --gold-d:#c08a35;\n --grad:linear-gradient(115deg,#fbe6b4 0%,#e7b45a 45%,#c08a35 100%);\n --grad-soft:linear-gradient(115deg,rgba(231,180,90,.18),rgba(192,138,53,.08));\n --ease:cubic-bezier(.22,.68,.26,.99);\n --ease-pop:cubic-bezier(.2,.7,.3,1.3);\n --shadow:0 30px 70px -25px rgba(0,0,0,.75);\n}\nhtml{scroll-behavior:smooth;}\nbody{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;}\nsection{scroll-margin-top:5rem;}\n::selection{background:rgba(231,180,90,.9);color:#171006;}\n::-webkit-scrollbar{width:10px;}\n::-webkit-scrollbar-track{background:#0a0b10;}\n::-webkit-scrollbar-thumb{background:linear-gradient(#e7b45a,#8a6224);border-radius:20px;border:2px solid #0a0b10;}\n.font-display{font-family:'Sora',sans-serif;}\n.text-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}\n.serif-it{font-family:'Playfair Display',serif;font-style:italic;}\n\n\/* ---------- Preloader ---------- *\/\n#sh-preloader{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;transition:opacity .6s var(--ease),visibility .6s;}\n#sh-preloader.done{opacity:0;visibility:hidden;}\n.pl-inner{display:flex;flex-direction:column;align-items:center;gap:1.4rem;}\n.pl-mark{width:64px;height:64px;border-radius:18px;background:var(--grad);display:grid;place-items:center;font-family:'Sora';font-weight:800;font-size:1.8rem;color:#1c1305;box-shadow:0 0 60px -10px rgba(231,180,90,.6);animation:pl-beat 1.4s var(--ease) infinite;}\n@keyframes pl-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}\n.pl-name{font-family:'Sora';letter-spacing:.5em;text-indent:.5em;font-size:.8rem;color:var(--muted);text-transform:uppercase;animation:pl-fade 1.4s ease infinite;}\n@keyframes pl-fade{0%,100%{opacity:.45}50%{opacity:1}}\n.pl-track{width:170px;height:2px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;}\n.pl-fill{height:100%;width:40%;background:var(--grad);border-radius:99px;animation:pl-slide 1.1s var(--ease) infinite;}\n@keyframes pl-slide{0%{transform:translateX(-120%)}100%{transform:translateX(420px)}}\n\n\/* ---------- Scroll progress ---------- *\/\n#shProgress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:90;box-shadow:0 0 12px rgba(231,180,90,.6);}\n\n\/* ---------- Navigation ---------- *\/\n.sh-nav{position:fixed;top:0;left:0;right:0;z-index:80;transition:background .45s var(--ease),border-color .45s,backdrop-filter .45s;border-bottom:1px solid transparent;}\n.sh-nav.scrolled{background:rgba(7,8,12,.78);backdrop-filter:blur(18px);border-bottom-color:var(--line-soft);}\n.sh-nav-inner{height:5.25rem;max-width:80rem;margin:auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;transition:height .45s var(--ease);}\n.sh-nav.scrolled .sh-nav-inner{height:4.25rem;}\n.sh-logo{font-family:'Sora';font-weight:800;font-size:1.4rem;letter-spacing:-.02em;display:flex;align-items:center;gap:.1rem;}\n.sh-logo b{color:var(--gold);}\n.nav-link{position:relative;font-size:.9rem;font-weight:500;color:var(--muted);padding:.35rem 0;transition:color .3s;}\n.nav-link::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;border-radius:99px;background:var(--grad);transition:width .35s var(--ease);}\n.nav-link:hover,.nav-link.active{color:#fff;}\n.nav-link:hover::after,.nav-link.active::after{width:100%;}\n.burger{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--bg-card);transition:.3s;}\n.burger:hover{border-color:rgba(231,180,90,.5);color:var(--gold);}\n\n\/* mobile menu *\/\n#shMobile{position:fixed;inset:0;z-index:85;background:rgba(6,7,11,.97);backdrop-filter:blur(20px);transform:translateY(-100%);transition:transform .6s var(--ease);display:flex;flex-direction:column;justify-content:center;padding:6rem 2rem 3rem;visibility:hidden;}\n#shMobile.open{transform:translateY(0);visibility:visible;}\n.m-link{font-family:'Sora';font-size:clamp(1.9rem,7vw,2.6rem);font-weight:700;color:var(--text);padding:.55rem 0;display:flex;align-items:center;gap:1rem;opacity:0;transform:translateY(24px);transition:.55s var(--ease);border-bottom:1px solid var(--line-soft);}\n.m-link i{color:var(--gold);width:22px;height:22px;opacity:.7;}\n#shMobile.open .m-link{opacity:1;transform:none;}\n#shMobile.open .m-link:nth-child(1){transition-delay:.08s}#shMobile.open .m-link:nth-child(2){transition-delay:.14s}#shMobile.open .m-link:nth-child(3){transition-delay:.2s}#shMobile.open .m-link:nth-child(4){transition-delay:.26s}#shMobile.open .m-link:nth-child(5){transition-delay:.32s}#shMobile.open .m-link:nth-child(6){transition-delay:.38s}#shMobile.open .m-link:nth-child(7){transition-delay:.44s}\n.m-close{position:absolute;top:1.6rem;right:1.6rem;width:48px;height:48px;border-radius:14px;border:1px solid var(--line);display:grid;place-items:center;background:var(--bg-card);transition:.3s;}\n.m-close:hover{color:var(--gold);border-color:rgba(231,180,90,.5);transform:rotate(90deg);}\n\n\/* ---------- Shared UI ---------- *\/\n.sh-eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-size:.72rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);}\n.sh-eyebrow::before{content:'';width:34px;height:1.5px;background:var(--grad);border-radius:99px;}\n.sh-eyebrow.center::after{content:'';width:34px;height:1.5px;background:var(--grad);border-radius:99px;}\n.sh-h2{font-family:'Sora';font-size:clamp(1.9rem,3.8vw,2.9rem);font-weight:700;letter-spacing:-.02em;line-height:1.14;}\n.sh-sub{color:var(--muted);font-size:1.02rem;line-height:1.75;}\n.sh-sec{padding:7rem 0;position:relative;}\n.sh-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.95rem 1.9rem;border-radius:999px;font-family:'Sora';font-weight:600;font-size:.95rem;cursor:pointer;transition:transform .4s var(--ease-pop),box-shadow .4s,background .35s,color .35s,border-color .35s;overflow:hidden;white-space:nowrap;}\n.sh-btn i{width:18px;height:18px;transition:transform .4s var(--ease-pop);}\n.sh-btn:hover i{transform:translateX(4px);}\n.sh-btn-gold{background:var(--grad);color:#1c1305;box-shadow:0 12px 34px -10px rgba(231,180,90,.5);}\n.sh-btn-gold:hover{transform:translateY(-3px);box-shadow:0 20px 45px -10px rgba(231,180,90,.65);}\n.sh-btn-gold::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);transform:translateX(-130%);transition:transform .8s var(--ease);}\n.sh-btn-gold:hover::after{transform:translateX(130%);}\n.sh-btn-ghost{border:1px solid rgba(255,255,255,.16);color:var(--text);background:rgba(255,255,255,.03);backdrop-filter:blur(8px);}\n.sh-btn-ghost:hover{transform:translateY(-3px);border-color:rgba(231,180,90,.55);color:var(--gold);background:rgba(231,180,90,.07);}\n.sh-btn-dark{background:#171106;color:var(--gold-l);}\n.sh-btn-dark:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 18px 40px -12px rgba(23,17,6,.55);}\n\n\/* reveal on scroll *\/\n[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s);will-change:opacity,transform;}\n[data-reveal=\"left\"]{transform:translateX(-44px);}\n[data-reveal=\"right\"]{transform:translateX(44px);}\n[data-reveal=\"scale\"]{transform:scale(.9);}\n[data-reveal].in{opacity:1;transform:none;}\n\n\/* hero load-in *\/\n.ha{opacity:0;animation:riseIn 1s var(--ease) forwards;animation-delay:var(--hd,.1s);}\n@keyframes riseIn{from{opacity:0;transform:translateY(36px);}to{opacity:1;transform:none;}}\n@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}\n@keyframes spin360{to{transform:rotate(360deg)}}\n@keyframes pulse-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.4}}\n\n\/* ---------- Hero ---------- *\/\n.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:9.5rem 0 5.5rem;overflow:hidden;}\n.hero-bg{position:absolute;inset:0;pointer-events:none;}\n.hero-bg .glow-a{position:absolute;top:-12%;right:-8%;width:560px;height:560px;background:radial-gradient(circle,rgba(231,180,90,.16),transparent 65%);filter:blur(20px);}\n.hero-bg .glow-b{position:absolute;bottom:-20%;left:-10%;width:640px;height:640px;background:radial-gradient(circle,rgba(192,138,53,.12),transparent 65%);filter:blur(30px);}\n.grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 85% 65% at 50% 38%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 85% 65% at 50% 38%,#000 25%,transparent 78%);}\n.hero-badge{display:inline-flex;align-items:center;gap:.6rem;padding:.5rem 1.05rem;border-radius:999px;border:1px solid rgba(231,180,90,.3);background:rgba(231,180,90,.07);font-size:.78rem;font-weight:500;color:var(--gold-l);letter-spacing:.04em;}\n.hero-badge .dot{width:8px;height:8px;border-radius:99px;background:#5ee08c;box-shadow:0 0 0 3px rgba(94,224,140,.15);animation:pulse-dot 1.8s ease infinite;}\n.hero h1{font-family:'Sora';font-size:clamp(2.6rem,6.2vw,4.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.06;}\n.hero-role{font-family:'Sora';font-size:clamp(1.25rem,2.6vw,1.9rem);font-weight:600;color:#e8eaf0;margin-top:1.1rem;letter-spacing:-.01em;}\n.hero-role em{font-size:1.12em;}\n.hero p.lead{color:var(--muted);font-size:1.06rem;line-height:1.85;max-width:34rem;margin-top:1.4rem;}\n.hero p.lead strong{color:#e9ebf1;font-weight:600;}\n.stat-wrap{display:flex;gap:2.4rem;margin-top:2.8rem;flex-wrap:wrap;}\n.stat{border-left:1px solid var(--line);padding-left:2.4rem;}\n.stat:first-child{border-left:none;padding-left:0;}\n.stat-num{font-family:'Sora';font-weight:800;font-size:clamp(1.6rem,3vw,2.1rem);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em;}\n.stat-lbl{font-size:.78rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.14em;margin-top:.25rem;}\n\n\/* photo composition *\/\n.ph-stage{position:relative;width:min(425px,88%);margin-inline:auto;aspect-ratio:4\/5;perspective:1100px;}\n.ph-tilt{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .15s linear;}\n.ph-aura{position:absolute;inset:-4px;border-radius:2.6rem;background:conic-gradient(from 0deg,transparent 0 62%,rgba(231,180,90,.95) 76%,#fbe6b4 84%,rgba(231,180,90,.95) 90%,transparent 98%);filter:blur(7px);animation:spin360 9s linear infinite;opacity:.8;}\n.ph-aura2{position:absolute;inset:-22px;border-radius:4rem;background:radial-gradient(circle,rgba(231,180,90,.22),transparent 70%);filter:blur(30px);}\n.ph-frame{position:absolute;inset:0;border-radius:2.3rem;overflow:hidden;border:1px solid rgba(255,255,255,.15);background:#101116;box-shadow:0 45px 100px -30px rgba(0,0,0,.9),0 0 90px -18px rgba(231,180,90,.3);animation:floaty 7.5s ease-in-out infinite;}\n.ph-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transform:scale(1.02);filter:saturate(1.04) contrast(1.03);}\n.ph-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(190deg,rgba(231,180,90,.06),transparent 32%,transparent 70%,rgba(5,6,10,.5));pointer-events:none;}\n.ph-frame.no-img{display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,rgba(231,180,90,.16),#0d0e14 70%);}\n.ph-frame.no-img::before{content:'S';font-family:'Sora';font-weight:800;font-size:7rem;color:rgba(231,180,90,.4);}\n.chip{position:absolute;display:flex;align-items:center;gap:.7rem;padding:.68rem 1rem;border-radius:1.05rem;background:rgba(12,14,21,.75);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(16px);box-shadow:0 24px 45px -14px rgba(0,0,0,.65);z-index:6;animation:floaty 6s ease-in-out infinite;}\n.chip .ci{width:38px;height:38px;border-radius:10px;background:var(--grad);display:grid;place-items:center;color:#1c1305;flex:none;}\n.chip .ci i{width:19px;height:19px;}\n.chip b{font-family:'Sora';font-size:.82rem;font-weight:700;display:block;letter-spacing:-.01em;}\n.chip span{font-size:.68rem;color:var(--muted);}\n.chip-a{top:2.4rem;right:-1.4rem;}\n.chip-b{bottom:3.2rem;left:-2rem;animation-delay:2.8s;}\n.orbit{position:absolute;top:-2.2rem;left:-2.6rem;width:118px;height:118px;z-index:7;}\n.orbit svg{width:100%;height:100%;animation:spin360 15s linear infinite;}\n.orbit svg text{font-family:'Sora';font-size:8px;letter-spacing:2.6px;fill:#edc987;font-weight:600;}\n.orbit .oc{position:absolute;inset:0;display:grid;place-items:center;}\n.orbit .oc div{width:46px;height:46px;border-radius:99px;background:rgba(12,14,21,.8);border:1px solid rgba(231,180,90,.4);display:grid;place-items:center;color:var(--gold);backdrop-filter:blur(8px);}\n.orbit .oc i{width:20px;height:20px;}\n@media(max-width:1023px){\n .chip-a{right:.4rem;} .chip-b{left:.2rem;} .orbit{left:-.4rem;top:-2.4rem;width:100px;height:100px;}\n}\n@media(max-width:400px){ .chip{padding:.55rem .8rem;} .chip span{display:none;} }\n\n\/* ---------- Marquee ---------- *\/\n.sh-mq{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:linear-gradient(90deg,rgba(231,180,90,.05),transparent 30%,transparent 70%,rgba(231,180,90,.05));overflow:hidden;padding:1.35rem 0;position:relative;}\n.sh-mq::before,.sh-mq::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;}\n.sh-mq::before{left:0;background:linear-gradient(90deg,var(--bg),transparent);}\n.sh-mq::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent);}\n.mq-track{display:flex;align-items:center;gap:2.8rem;width:max-content;animation:mqroll 34s linear infinite;}\n.sh-mq:hover .mq-track{animation-play-state:paused;}\n@keyframes mqroll{to{transform:translateX(-50%);}}\n.mq-item{font-family:'Sora';font-weight:700;font-size:clamp(1.05rem,2vw,1.4rem);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:rgba(255,255,255,.55);}\n.mq-item.o{color:transparent;-webkit-text-stroke:1px rgba(231,180,90,.55);}\n.mq-dot{width:7px;height:7px;border-radius:99px;background:var(--grad);flex:none;box-shadow:0 0 10px rgba(231,180,90,.8);}\n\n\/* ---------- Services ---------- *\/\n.svc{position:relative;display:flex;flex-direction:column;height:100%;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:1.4rem;padding:1.9rem;overflow:hidden;transition:transform .55s var(--ease),border-color .45s,box-shadow .55s;}\n.svc::before{content:'';position:absolute;top:-60px;right:-60px;width:170px;height:170px;border-radius:99px;background:radial-gradient(circle,rgba(231,180,90,.16),transparent 70%);opacity:0;transition:opacity .6s;}\n.svc:hover{transform:translateY(-10px);border-color:rgba(231,180,90,.45);box-shadow:var(--shadow),0 0 0 1px rgba(231,180,90,.12);}\n.svc:hover::before{opacity:1;}\n.svc-num{position:absolute;top:1.15rem;right:1.35rem;font-family:'Sora';font-weight:800;font-size:2.5rem;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.1);transition:.5s;}\n.svc:hover .svc-num{-webkit-text-stroke:1px rgba(231,180,90,.55);transform:translateY(-3px);}\n.icon-box{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:rgba(231,180,90,.1);border:1px solid rgba(231,180,90,.28);color:var(--gold);margin-bottom:1.4rem;transition:.5s var(--ease-pop);flex:none;}\n.icon-box i{width:25px;height:25px;}\n.svc:hover .icon-box{background:var(--grad);color:#1c1305;transform:rotate(-7deg) scale(1.06);box-shadow:0 14px 30px -10px rgba(231,180,90,.6);border-color:transparent;}\n.svc h3{font-family:'Sora';font-size:1.06rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.6rem;padding-right:2.4rem;}\n.svc p{color:var(--muted);font-size:.9rem;line-height:1.7;margin-bottom:1.3rem;}\n.svc-link{margin-top:auto;display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;font-weight:600;color:var(--muted);transition:.35s;width:fit-content;}\n.svc-link i{width:15px;height:15px;transition:transform .35s var(--ease-pop);}\n.svc:hover .svc-link{color:var(--gold);}\n.svc-link:hover i{transform:translate(3px,-3px);}\n\n\/* ---------- About ---------- *\/\n.about-visual{position:relative;width:min(430px,100%);margin-inline:auto;}\n.about-frame{position:relative;border-radius:2rem;overflow:hidden;border:1px solid rgba(255,255,255,.13);box-shadow:0 45px 100px -30px rgba(0,0,0,.9);aspect-ratio:4\/5;background:#101116;}\n.about-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;filter:saturate(1.04) contrast(1.03);transition:transform 1.1s var(--ease);}\n.about-visual:hover .about-frame img{transform:scale(1.05);}\n.about-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(200deg,rgba(231,180,90,.05),transparent 35%,transparent 68%,rgba(5,6,10,.55));}\n.about-dots{position:absolute;right:-1.7rem;top:-1.7rem;width:120px;height:120px;background-image:radial-gradient(rgba(231,180,90,.5) 1.6px,transparent 1.6px);background-size:16px 16px;opacity:.5;z-index:-1;}\n.about-exp{position:absolute;right:-1rem;bottom:2rem;display:flex;align-items:center;gap:1rem;padding:1rem 1.3rem;border-radius:1.2rem;background:rgba(12,14,21,.82);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(16px);box-shadow:0 26px 55px -16px rgba(0,0,0,.7);animation:floaty 6.5s ease-in-out infinite;}\n.about-exp .n{font-family:'Sora';font-weight:800;font-size:2rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}\n.about-exp span{font-size:.74rem;color:var(--muted);line-height:1.4;}\n.about-loc{position:absolute;left:-.9rem;top:2rem;display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border-radius:999px;background:rgba(12,14,21,.82);border:1px solid rgba(231,180,90,.35);backdrop-filter:blur(14px);font-size:.78rem;font-weight:600;color:var(--gold-l);animation:floaty 7s ease-in-out infinite;animation-delay:2s;}\n.about-loc i{width:15px;height:15px;color:var(--gold);}\n@media(max-width:1023px){.about-exp{right:.6rem;bottom:1.4rem;} .about-loc{left:.6rem;}}\n.chk{display:flex;align-items:flex-start;gap:.75rem;color:#d8dae1;font-size:.95rem;font-weight:500;}\n.chk i{width:20px;height:20px;color:var(--gold);flex:none;margin-top:.1rem;}\n.skill{margin-bottom:1.35rem;}\n.skill-top{display:flex;justify-content:space-between;font-size:.85rem;font-weight:600;margin-bottom:.55rem;}\n.skill-top span:last-child{color:var(--gold);font-family:'Sora';}\n.bar{height:7px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;}\n.bar-fill{height:100%;width:0;border-radius:99px;background:var(--grad);box-shadow:0 0 14px rgba(231,180,90,.5);transition:width 1.6s cubic-bezier(.25,1,.3,1) .25s;}\n\n\/* ---------- Why Choose Me ---------- *\/\n.why{position:relative;background:var(--bg-card);border:1px solid var(--line);border-radius:1.4rem;padding:2rem;height:100%;transition:transform .5s var(--ease),border-color .4s,box-shadow .5s;overflow:hidden;}\n.why::before{content:'';position:absolute;top:0;left:1.6rem;right:1.6rem;height:3px;border-radius:99px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);}\n.why:hover{transform:translateY(-9px);border-color:rgba(231,180,90,.4);box-shadow:var(--shadow);}\n.why:hover::before{transform:scaleX(1);}\n.why-ic{width:54px;height:54px;border-radius:999px;display:grid;place-items:center;background:rgba(231,180,90,.1);border:1px solid rgba(231,180,90,.3);color:var(--gold);margin-bottom:1.3rem;transition:.5s var(--ease-pop);}\n.why-ic i{width:24px;height:24px;}\n.why:hover .why-ic{transform:scale(1.1) rotate(-6deg);background:var(--grad);color:#1c1305;border-color:transparent;box-shadow:0 12px 26px -8px rgba(231,180,90,.55);}\n.why h3{font-family:'Sora';font-size:1.05rem;font-weight:700;margin-bottom:.55rem;letter-spacing:-.01em;}\n.why p{color:var(--muted);font-size:.89rem;line-height:1.7;}\n\n\/* ---------- Portfolio ---------- *\/\n.pf-btn{padding:.6rem 1.35rem;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:.85rem;font-weight:600;transition:.35s;background:transparent;cursor:pointer;}\n.pf-btn:hover{color:#fff;border-color:rgba(231,180,90,.45);}\n.pf-btn.active{background:var(--grad);color:#1c1305;border-color:transparent;box-shadow:0 10px 24px -8px rgba(231,180,90,.5);}\n.proj{position:relative;border-radius:1.35rem;overflow:hidden;border:1px solid var(--line);aspect-ratio:4\/3.1;background:#0d0f16;transition:transform .55s var(--ease),border-color .45s,box-shadow .55s,opacity .4s;}\n.proj:hover{transform:translateY(-8px);border-color:rgba(231,180,90,.45);box-shadow:var(--shadow);}\n.proj img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);transform:scale(1.01);}\n.proj:hover img{transform:scale(1.1);}\n.proj-ov{position:absolute;inset:0;background:linear-gradient(185deg,rgba(7,8,12,.05) 30%,rgba(5,6,10,.92) 92%);opacity:.85;transition:opacity .5s;}\n.proj:hover .proj-ov{opacity:1;}\n.proj-body{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.5rem;}\n.proj-tag{display:inline-block;padding:.32rem .85rem;border-radius:999px;background:rgba(231,180,90,.14);border:1px solid rgba(231,180,90,.4);color:var(--gold-l);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.6rem;}\n.proj h3{font-family:'Sora';font-size:1.12rem;font-weight:700;letter-spacing:-.01em;}\n.proj p{color:var(--muted);font-size:.82rem;margin-top:.25rem;}\n.proj-btn{position:absolute;top:44%;left:50%;transform:translate(-50%,-20%) scale(.6);width:60px;height:60px;border-radius:999px;background:var(--grad);color:#1c1305;display:grid;place-items:center;opacity:0;transition:.5s var(--ease-pop);box-shadow:0 18px 40px -10px rgba(231,180,90,.7);z-index:3;}\n.proj-btn i{width:24px;height:24px;}\n.proj:hover .proj-btn{opacity:1;transform:translate(-50%,-50%) scale(1);}\n.proj.pop{animation:popIn .55s var(--ease-pop) both;}\n@keyframes popIn{from{opacity:0;transform:scale(.88) translateY(18px);}to{opacity:1;transform:none;}}\n\n\/* ---------- Process ---------- *\/\n.steps{position:relative;}\n@media(min-width:1024px){\n .steps::before{content:'';position:absolute;top:52px;left:9%;right:9%;height:1px;background:linear-gradient(90deg,transparent,rgba(231,180,90,.4) 18%,rgba(231,180,90,.4) 82%,transparent);}\n .steps::after{content:'';position:absolute;top:52px;left:9%;right:9%;height:1px;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(231,180,90,.0) 6px 10px);}\n}\n.step{position:relative;background:var(--bg-card);border:1px solid var(--line);border-radius:1.4rem;padding:1.7rem 1.3rem;text-align:center;height:100%;transition:transform .5s var(--ease),border-color .4s,box-shadow .5s;}\n.step:hover{transform:translateY(-8px);border-color:rgba(231,180,90,.45);box-shadow:var(--shadow);}\n.step-ic{width:64px;height:64px;margin:0 auto 1.1rem;border-radius:18px;display:grid;place-items:center;background:var(--bg-soft);border:1px solid rgba(231,180,90,.32);color:var(--gold);position:relative;z-index:2;transition:.5s var(--ease-pop);}\n.step-ic i{width:26px;height:26px;}\n.step:hover .step-ic{background:var(--grad);color:#1c1305;transform:scale(1.08);border-color:transparent;box-shadow:0 16px 34px -10px rgba(231,180,90,.55);}\n.step-n{font-family:'Sora';font-weight:800;font-size:.78rem;letter-spacing:.3em;color:var(--gold);}\n.step h3{font-family:'Sora';font-size:1.05rem;font-weight:700;margin:.4rem 0 .5rem;}\n.step p{color:var(--muted);font-size:.83rem;line-height:1.65;}\n.step::after{content:attr(data-step);position:absolute;top:.55rem;right:1.1rem;font-family:'Sora';font-weight:800;font-size:2.6rem;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);pointer-events:none;}\n\n\/* ---------- CTA banner ---------- *\/\n.cta{position:relative;overflow:hidden;border-radius:2rem;background:var(--grad);padding:clamp(2.5rem,5vw,4rem);}\n.cta::before{content:'';position:absolute;top:-70px;right:-60px;width:280px;height:280px;border-radius:99px;border:38px solid rgba(255,255,255,.14);}\n.cta::after{content:'';position:absolute;bottom:-110px;left:-70px;width:320px;height:320px;border-radius:99px;background:rgba(255,255,255,.1);}\n.cta-in{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;}\n.cta h2{font-family:'Sora';color:#1c1305;font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;}\n.cta p{color:rgba(35,25,7,.78);font-weight:500;margin-top:.7rem;max-width:34rem;}\n\n\/* ---------- Contact ---------- *\/\n.cinfo{display:flex;align-items:center;gap:1.05rem;padding:1.15rem 1.3rem;border-radius:1.2rem;border:1px solid var(--line);background:var(--bg-card);transition:.4s var(--ease);}\n.cinfo:hover{border-color:rgba(231,180,90,.45);transform:translateX(6px);background:rgba(231,180,90,.04);}\n.cinfo .ci{width:50px;height:50px;border-radius:14px;background:var(--grad);color:#1c1305;display:grid;place-items:center;flex:none;box-shadow:0 12px 26px -8px rgba(231,180,90,.45);}\n.cinfo .ci i{width:22px;height:22px;}\n.cinfo small{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-bottom:.2rem;}\n.cinfo b{font-size:.98rem;font-weight:600;word-break:break-all;}\n.soc{width:46px;height:46px;border-radius:999px;border:1px solid var(--line);background:var(--bg-card);display:grid;place-items:center;color:var(--muted);transition:.4s var(--ease-pop);}\n.soc i{width:19px;height:19px;}\n.soc:hover{background:var(--grad);color:#1c1305;border-color:transparent;transform:translateY(-4px);box-shadow:0 14px 28px -8px rgba(231,180,90,.55);}\n.sh-form{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:1.8rem;padding:clamp(1.6rem,3vw,2.4rem);position:relative;overflow:hidden;}\n.sh-form::before{content:'';position:absolute;top:-80px;right:-80px;width:220px;height:220px;border-radius:99px;background:radial-gradient(circle,rgba(231,180,90,.14),transparent 70%);pointer-events:none;}\n.fl{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.55rem;}\n.fl em{color:var(--gold);font-style:normal;}\n.fi{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:.85rem;padding:.95rem 1.1rem;color:#fff;font-size:.95rem;transition:.35s;font-family:'Inter';}\n.fi::placeholder{color:#5d6070;}\n.fi:focus{outline:none;border-color:rgba(231,180,90,.7);box-shadow:0 0 0 4px rgba(231,180,90,.13);background:rgba(231,180,90,.03);}\n.form-ok{display:none;align-items:center;gap:.7rem;margin-top:1rem;padding:.85rem 1.1rem;border-radius:.85rem;background:rgba(94,224,140,.1);border:1px solid rgba(94,224,140,.35);color:#9ff0bf;font-size:.88rem;font-weight:500;}\n.form-ok.show{display:flex;animation:popIn .5s var(--ease-pop) both;}\n.form-ok i{width:18px;height:18px;flex:none;}\n.spin{animation:spin360 1s linear infinite;}\n#shToast{position:fixed;bottom:1.8rem;left:50%;transform:translate(-50%,120px);z-index:95;background:var(--grad);color:#1c1305;border-radius:999px;padding:.9rem 1.6rem;display:flex;align-items:center;gap:.7rem;font-family:'Sora';font-weight:700;font-size:.9rem;box-shadow:0 25px 60px -12px rgba(231,180,90,.55);opacity:0;transition:.55s var(--ease-pop);pointer-events:none;}\n#shToast.show{transform:translate(-50%,0);opacity:1;}\n#shToast i{width:19px;height:19px;}\n\n\/* ---------- Footer ---------- *\/\n.sh-footer{position:relative;background:#05060a;border-top:1px solid var(--line-soft);}\n.sh-footer::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(231,180,90,.55),transparent);}\n.ft-h{font-family:'Sora';font-size:.8rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#fff;margin-bottom:1.2rem;}\n.ft-link{display:inline-flex;align-items:center;gap:.45rem;color:var(--muted);font-size:.9rem;padding:.28rem 0;transition:.3s;}\n.ft-link i{width:13px;height:13px;color:var(--gold);opacity:0;transform:translateX(-6px);transition:.3s;}\n.ft-link:hover{color:var(--gold-l);transform:translateX(5px);}\n.ft-link:hover i{opacity:1;transform:none;}\n.ft-c{color:var(--muted);font-size:.9rem;display:flex;align-items:flex-start;gap:.8rem;padding:.35rem 0;}\n.ft-c i{width:17px;height:17px;color:var(--gold);flex:none;margin-top:.15rem;}\n.ft-bottom{border-top:1px solid var(--line-soft);padding:1.6rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--muted-2);}\n.ft-bottom b{color:var(--gold);font-weight:600;}\n\n\/* ---------- Back to top ---------- *\/\n#backTop{position:fixed;bottom:1.5rem;right:1.5rem;z-index:85;width:50px;height:50px;border-radius:999px;background:var(--grad);color:#1c1305;display:grid;place-items:center;box-shadow:0 16px 36px -10px rgba(231,180,90,.6);opacity:0;transform:translateY(24px);pointer-events:none;transition:.45s var(--ease-pop);}\n#backTop.show{opacity:1;transform:none;pointer-events:auto;}\n#backTop:hover{transform:translateY(-4px);box-shadow:0 22px 44px -10px rgba(231,180,90,.75);}\n#backTop i{width:20px;height:20px;}\n\n@media(prefers-reduced-motion:reduce){\n *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}\n html{scroll-behavior:auto;}\n [data-reveal],.ha{opacity:1!important;transform:none!important;}\n}\n<\/style>\n<\/head>\n<body>\n<div id=\"sh-app\">\n\n <!-- Preloader -->\n <div id=\"sh-preloader\" aria-hidden=\"true\">\n <div class=\"pl-inner\">\n <div class=\"pl-mark\">S<\/div>\n <div class=\"pl-name\">Shehryar<\/div>\n <div class=\"pl-track\"><div class=\"pl-fill\"><\/div><\/div>\n <\/div>\n <\/div>\n\n <div id=\"shProgress\"><\/div>\n\n <!-- ================= NAVIGATION ================= -->\n <header class=\"sh-nav\" id=\"shNav\">\n <div class=\"sh-nav-inner\">\n <a href=\"#home\" class=\"sh-logo\" aria-label=\"Shehryar \u2014 Home\">Shehryar<b>.<\/b><\/a>\n\n <nav class=\"hidden lg:flex items-center gap-8\" aria-label=\"Primary\">\n <a class=\"nav-link active\" href=\"#home\">Home<\/a>\n <a class=\"nav-link\" href=\"#services\">Services<\/a>\n <a class=\"nav-link\" href=\"#about\">About<\/a>\n <a class=\"nav-link\" href=\"#why\">Why Me<\/a>\n <a class=\"nav-link\" href=\"#portfolio\">Portfolio<\/a>\n <a class=\"nav-link\" href=\"#process\">Process<\/a>\n <a class=\"nav-link\" href=\"#contact\">Contact<\/a>\n <\/nav>\n\n <div class=\"flex items-center gap-3\">\n <a href=\"#contact\" class=\"sh-btn sh-btn-gold hidden md:inline-flex !py-2.5 !px-6 text-sm\">Hire Me <i data-lucide=\"arrow-right\"><\/i><\/a>\n <button class=\"burger lg:hidden\" id=\"shBurger\" aria-label=\"Open menu\"><i data-lucide=\"menu\"><\/i><\/button>\n <\/div>\n <\/div>\n <\/header>\n\n <!-- Mobile menu -->\n <div id=\"shMobile\" aria-hidden=\"true\">\n <button class=\"m-close\" id=\"shClose\" aria-label=\"Close menu\"><i data-lucide=\"x\"><\/i><\/button>\n <nav aria-label=\"Mobile\">\n <a class=\"m-link\" href=\"#home\"><i data-lucide=\"home\"><\/i>Home<\/a>\n <a class=\"m-link\" href=\"#services\"><i data-lucide=\"panels-top-left\"><\/i>Services<\/a>\n <a class=\"m-link\" href=\"#about\"><i data-lucide=\"user-round\"><\/i>About<\/a>\n <a class=\"m-link\" href=\"#why\"><i data-lucide=\"trophy\"><\/i>Why Me<\/a>\n <a class=\"m-link\" href=\"#portfolio\"><i data-lucide=\"briefcase\"><\/i>Portfolio<\/a>\n <a class=\"m-link\" href=\"#process\"><i data-lucide=\"route\"><\/i>Process<\/a>\n <a class=\"m-link\" href=\"#contact\"><i data-lucide=\"mail\"><\/i>Contact<\/a>\n <\/nav>\n <div class=\"mt-10 flex gap-3\">\n <a href=\"https:\/\/wa.me\/923098818132\" target=\"_blank\" rel=\"noopener\" class=\"soc\" aria-label=\"WhatsApp\"><i data-lucide=\"message-circle\"><\/i><\/a>\n <a href=\"mailto:shehryarfazalrhaman@gmail.com\" class=\"soc\" aria-label=\"Email\"><i data-lucide=\"mail\"><\/i><\/a>\n <a href=\"tel:+923098818132\" class=\"soc\" aria-label=\"Phone\"><i data-lucide=\"phone\"><\/i><\/a>\n <\/div>\n <\/div>\n\n <main>\n <!-- ================= HERO ================= -->\n <section id=\"home\" class=\"hero\">\n <div class=\"hero-bg\" aria-hidden=\"true\">\n <div class=\"glow-a\"><\/div>\n <div class=\"glow-b\"><\/div>\n <div class=\"grid-lines\"><\/div>\n <\/div>\n\n <div class=\"relative max-w-7xl mx-auto px-6 lg:px-8 w-full\">\n <div class=\"grid lg:grid-cols-2 gap-16 lg:gap-10 items-center\">\n\n <!-- Left : copy -->\n <div class=\"text-center lg:text-left\">\n <div class=\"hero-badge ha\" style=\"--hd:.15s\"><span class=\"dot\"><\/span> Available for new projects<\/div>\n\n <h1 class=\"ha mt-6\" style=\"--hd:.28s\">Hi, I'm <span class=\"text-grad\">Shehryar<\/span><\/h1>\n\n <div class=\"hero-role ha\" style=\"--hd:.42s\">Professional <em class=\"serif-it text-grad\">WordPress Developer<\/em><\/div>\n\n <p class=\"lead ha mx-auto lg:mx-0\" style=\"--hd:.56s\">\n I create <strong>modern<\/strong>, <strong>responsive<\/strong> and <strong>professional WordPress websites<\/strong> that help businesses build a strong online presence.\n <\/p>\n\n <div class=\"ha mt-9 flex flex-wrap justify-center lg:justify-start gap-4\" style=\"--hd:.7s\">\n <a href=\"#contact\" class=\"sh-btn sh-btn-gold\">Get Started <i data-lucide=\"arrow-right\"><\/i><\/a>\n <a href=\"#services\" class=\"sh-btn sh-btn-ghost\">View My Services <i data-lucide=\"panels-top-left\"><\/i><\/a>\n <\/div>\n\n <div class=\"stat-wrap ha justify-center lg:justify-start\" style=\"--hd:.84s\">\n <div class=\"stat\">\n <div class=\"stat-num\"><span data-count=\"50\">0<\/span>+<\/div>\n <div class=\"stat-lbl\">Projects Done<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-num\"><span data-count=\"30\">0<\/span>+<\/div>\n <div class=\"stat-lbl\">Happy Clients<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-num\"><span data-count=\"3\">0<\/span>+<\/div>\n <div class=\"stat-lbl\">Years Experience<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Right : photo -->\n <div class=\"ph-stage ha\" style=\"--hd:.5s\">\n <div class=\"ph-tilt\" id=\"phTilt\">\n <div class=\"ph-aura2\" aria-hidden=\"true\"><\/div>\n <div class=\"ph-aura\" aria-hidden=\"true\"><\/div>\n\n <figure class=\"ph-frame\">\n <img decoding=\"async\" src=\"profile.jpg\" alt=\"Shehryar \u2014 Professional WordPress Developer in a formal black suit\"\n fetchpriority=\"high\"\n data-chain=\"profile.png|profile.jpeg|photo.jpg|image.jpg|upload.jpg|shehryar.jpg|profile.webp\"\n onerror=\"shImgFallback(this)\">\n <\/figure>\n\n <div class=\"orbit\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 100 100\">\n <defs><path id=\"circPath\" d=\"M50,50 m-37,0 a37,37 0 1,1 74,0 a37,37 0 1,1 -74,0\"><\/path><\/defs>\n <text><textPath href=\"#circPath\">WORDPRESS DEVELOPER \u2022 SHEHRYAR \u2022 PK \u2022 <\/textPath><\/text>\n <\/svg>\n <div class=\"oc\"><div><i data-lucide=\"star\"><\/i><\/div><\/div>\n <\/div>\n\n <div class=\"chip chip-a\">\n <div class=\"ci\"><i data-lucide=\"code\"><\/i><\/div>\n <div><b>WordPress Expert<\/b><span>Custom Development<\/span><\/div>\n <\/div>\n <div class=\"chip chip-b\">\n <div class=\"ci\"><i data-lucide=\"rocket\"><\/i><\/div>\n <div><b>Fast Delivery<\/b><span>Pixel-Perfect Results<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ================= MARQUEE ================= -->\n <div class=\"sh-mq\" aria-hidden=\"true\">\n <div class=\"mq-track\">\n <span class=\"mq-item\">WordPress Development<\/span><span class=\"mq-dot\"><\/span>\n <span class=\"mq-item o\">Elementor<\/span><span class=\"mq-dot\"><\/span>\n <span class=\"mq-item\">WooCommerce<\/span><span class=\"mq-dot\"><\/span>\n <span class=\"mq-item o\">Responsive Design<\/span><span class=\"mq-dot\"><\/span>\n <span class=\"mq-item\">Business Websites<\/span><span class=\"mq-dot\"><\/span>\n <span class=\"mq-item o\">Speed Optimization<\/span><span class=\"mq-dot\"><\/span>\n <span class=\"mq-item\">UI \/ UX Design<\/span><span class=\"mq-dot\"><\/span>\n <span class=\"mq-item o\">Website Redesign<\/span><span class=\"mq-dot\"><\/span>\n <span class=\"mq-item\">Maintenance & Support<\/span><span class=\"mq-dot\"><\/span>\n <span class=\"mq-item\">WordPress Development<\/span><span class=\"mq-dot\"><\/span>\n <span class=\"mq-item o\">Elementor<\/span><span class=\"mq-dot\"><\/span>\n <span class=\"mq-item\">WooCommerce<\/span><span class=\"mq-dot\"><\/span>\n <span class=\"mq-item o\">Responsive Design<\/span><span class=\"mq-dot\"><\/span>\n <span class=\"mq-item\">Business Websites<\/span><span class=\"mq-dot\"><\/span>\n <span class=\"mq-item o\">Speed Optimization<\/span><span class=\"mq-dot\"><\/span>\n <span class=\"mq-item\">UI \/ UX Design<\/span><span class=\"mq-dot\"><\/span>\n <span class=\"mq-item o\">Website Redesign<\/span><span class=\"mq-dot\"><\/span>\n <span class=\"mq-item\">Maintenance & Support<\/span><span class=\"mq-dot\"><\/span>\n <\/div>\n <\/div>\n\n <!-- ================= SERVICES ================= -->\n <section id=\"services\" class=\"sh-sec\" style=\"background:var(--bg-soft);\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-8\">\n <div class=\"text-center max-w-2xl mx-auto\" data-reveal>\n <span class=\"sh-eyebrow center\">What I Do<\/span>\n <h2 class=\"sh-h2 mt-4\">Premium Services For <span class=\"text-grad\">Your Business<\/span><\/h2>\n <p class=\"sh-sub mt-4\">End-to-end WordPress solutions \u2014 from strategy and design to development, launch and beyond.<\/p>\n <\/div>\n\n <div class=\"grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mt-14\">\n <article class=\"svc\" data-reveal style=\"--d:.05s\">\n <span class=\"svc-num\">01<\/span>\n <div class=\"icon-box\"><i data-lucide=\"panels-top-left\"><\/i><\/div>\n <h3>WordPress Website Development<\/h3>\n <p>Custom WordPress websites built from the ground up \u2014 secure, scalable and tailored to your goals.<\/p>\n <a href=\"#contact\" class=\"svc-link\">Start a project <i data-lucide=\"arrow-up-right\"><\/i><\/a>\n <\/article>\n\n <article class=\"svc\" data-reveal style=\"--d:.1s\">\n <span class=\"svc-num\">02<\/span>\n <div class=\"icon-box\"><i data-lucide=\"briefcase\"><\/i><\/div>\n <h3>Business Website Design<\/h3>\n <p>Elegant, conversion-focused designs that build trust and turn visitors into customers.<\/p>\n <a href=\"#contact\" class=\"svc-link\">Start a project <i data-lucide=\"arrow-up-right\"><\/i><\/a>\n <\/article>\n\n <article class=\"svc\" data-reveal style=\"--d:.15s\">\n <span class=\"svc-num\">03<\/span>\n <div class=\"icon-box\"><i data-lucide=\"monitor-smartphone\"><\/i><\/div>\n <h3>Responsive Website Development<\/h3>\n <p>Pixel-perfect websites that look and perform flawlessly on every device and screen size.<\/p>\n <a href=\"#contact\" class=\"svc-link\">Start a project <i data-lucide=\"arrow-up-right\"><\/i><\/a>\n <\/article>\n\n <article class=\"svc\" data-reveal style=\"--d:.2s\">\n <span class=\"svc-num\">04<\/span>\n <div class=\"icon-box\"><i data-lucide=\"blocks\"><\/i><\/div>\n <h3>Elementor Website Design<\/h3>\n <p>Beautiful, easy-to-manage pages crafted with Elementor for full creative control.<\/p>\n <a href=\"#contact\" class=\"svc-link\">Start a project <i data-lucide=\"arrow-up-right\"><\/i><\/a>\n <\/article>\n\n <article class=\"svc\" data-reveal style=\"--d:.25s\">\n <span class=\"svc-num\">05<\/span>\n <div class=\"icon-box\"><i data-lucide=\"shopping-bag\"><\/i><\/div>\n <h3>WooCommerce Website Development<\/h3>\n <p>Feature-rich online stores with seamless checkout experiences designed to sell.<\/p>\n <a href=\"#contact\" class=\"svc-link\">Start a project <i data-lucide=\"arrow-up-right\"><\/i><\/a>\n <\/article>\n\n <article class=\"svc\" data-reveal style=\"--d:.3s\">\n <span class=\"svc-num\">06<\/span>\n <div class=\"icon-box\"><i data-lucide=\"refresh-ccw\"><\/i><\/div>\n <h3>Website Redesign<\/h3>\n <p>Transform your outdated website into a modern, high-performing digital experience.<\/p>\n <a href=\"#contact\" class=\"svc-link\">Start a project <i data-lucide=\"arrow-up-right\"><\/i><\/a>\n <\/article>\n\n <article class=\"svc\" data-reveal style=\"--d:.35s\">\n <span class=\"svc-num\">07<\/span>\n <div class=\"icon-box\"><i data-lucide=\"zap\"><\/i><\/div>\n <h3>Website Speed Optimization<\/h3>\n <p>Lightning-fast load times with advanced optimization for better UX and search rankings.<\/p>\n <a href=\"#contact\" class=\"svc-link\">Start a project <i data-lucide=\"arrow-up-right\"><\/i><\/a>\n <\/article>\n\n <article class=\"svc\" data-reveal style=\"--d:.4s\">\n <span class=\"svc-num\">08<\/span>\n <div class=\"icon-box\"><i data-lucide=\"shield-check\"><\/i><\/div>\n <h3>WordPress Maintenance<\/h3>\n <p>Ongoing updates, security hardening, backups and support \u2014 your site never skips a beat.<\/p>\n <a href=\"#contact\" class=\"svc-link\">Start a project <i data-lucide=\"arrow-up-right\"><\/i><\/a>\n <\/article>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ================= ABOUT ================= -->\n <section id=\"about\" class=\"sh-sec\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-8\">\n <div class=\"grid lg:grid-cols-2 gap-16 lg:gap-20 items-center\">\n\n <div class=\"about-visual\" data-reveal=\"left\">\n <div class=\"about-dots\" aria-hidden=\"true\"><\/div>\n <figure class=\"about-frame\">\n <img decoding=\"async\" src=\"profile.jpg\" alt=\"Shehryar \u2014 WordPress Developer from Pakistan\"\n loading=\"lazy\"\n data-chain=\"profile.png|profile.jpeg|photo.jpg|image.jpg|upload.jpg|shehryar.jpg|profile.webp\"\n onerror=\"shImgFallback(this)\">\n <\/figure>\n <div class=\"about-loc\"><i data-lucide=\"map-pin\"><\/i> Based in Pakistan<\/div>\n <div class=\"about-exp\">\n <div class=\"n\"><span data-count=\"3\">0<\/span>+<\/div>\n <span>Years of<br>Experience<\/span>\n <\/div>\n <\/div>\n\n <div data-reveal=\"right\">\n <span class=\"sh-eyebrow\">About Me<\/span>\n <h2 class=\"sh-h2 mt-4\">Crafting Digital Experiences That <span class=\"text-grad\">Grow Businesses<\/span><\/h2>\n <p class=\"sh-sub mt-6\">\n I'm <strong style=\"color:#fff;\">Shehryar<\/strong>, a professional WordPress developer based in <strong style=\"color:var(--gold-l);\">Pakistan<\/strong>, helping businesses around the world build a strong and memorable online presence. I specialize in modern, fast and conversion-focused websites that are as beautiful as they are functional.\n <\/p>\n <p class=\"sh-sub mt-4\">\n My approach combines clean, modern design with responsive layouts and a deep focus on user experience. Whether you need a professional business website, a high-converting landing page or a complete online store \u2014 I deliver work that is built to perform, and built to last.\n <\/p>\n\n <div class=\"grid sm:grid-cols-2 gap-4 mt-8\">\n <div class=\"chk\"><i data-lucide=\"circle-check-big\"><\/i> Modern & Clean Design<\/div>\n <div class=\"chk\"><i data-lucide=\"circle-check-big\"><\/i> Fully Responsive Layouts<\/div>\n <div class=\"chk\"><i data-lucide=\"circle-check-big\"><\/i> User-Friendly & Intuitive<\/div>\n <div class=\"chk\"><i data-lucide=\"circle-check-big\"><\/i> Built for Business Growth<\/div>\n <\/div>\n\n <div class=\"mt-10\">\n <div class=\"skill\">\n <div class=\"skill-top\"><span>WordPress Development<\/span><span data-w=\"96\">0%<\/span><\/div>\n <div class=\"bar\"><div class=\"bar-fill\" data-w=\"96\"><\/div><\/div>\n <\/div>\n <div class=\"skill\">\n <div class=\"skill-top\"><span>Elementor & Page Builders<\/span><span data-w=\"92\">0%<\/span><\/div>\n <div class=\"bar\"><div class=\"bar-fill\" data-w=\"92\"><\/div><\/div>\n <\/div>\n <div class=\"skill\">\n <div class=\"skill-top\"><span>WooCommerce<\/span><span data-w=\"88\">0%<\/span><\/div>\n <div class=\"bar\"><div class=\"bar-fill\" data-w=\"88\"><\/div><\/div>\n <\/div>\n <div class=\"skill\" style=\"margin-bottom:0;\">\n <div class=\"skill-top\"><span>UI \/ UX Design<\/span><span data-w=\"90\">0%<\/span><\/div>\n <div class=\"bar\"><div class=\"bar-fill\" data-w=\"90\"><\/div><\/div>\n <\/div>\n <\/div>\n\n <a href=\"#contact\" class=\"sh-btn sh-btn-gold mt-10\">Let's Work Together <i data-lucide=\"arrow-right\"><\/i><\/a>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ================= WHY CHOOSE ME ================= -->\n <section id=\"why\" class=\"sh-sec\" style=\"background:var(--bg-soft);\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-8\">\n <div class=\"text-center max-w-2xl mx-auto\" data-reveal>\n <span class=\"sh-eyebrow center\">Why Choose Me<\/span>\n <h2 class=\"sh-h2 mt-4\">The Difference Is In <span class=\"text-grad\">The Details<\/span><\/h2>\n <p class=\"sh-sub mt-4\">Every project gets the same commitment to quality, performance and results.<\/p>\n <\/div>\n\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-14\">\n <div class=\"why\" data-reveal style=\"--d:.05s\">\n <div class=\"why-ic\"><i data-lucide=\"trophy\"><\/i><\/div>\n <h3>Professional Design<\/h3>\n <p>Premium, clean and modern designs that reflect your brand's quality and build instant credibility.<\/p>\n <\/div>\n <div class=\"why\" data-reveal style=\"--d:.1s\">\n <div class=\"why-ic\"><i data-lucide=\"smartphone\"><\/i><\/div>\n <h3>Mobile Responsive<\/h3>\n <p>Every website adapts beautifully to phones, tablets and desktops \u2014 tested on real devices.<\/p>\n <\/div>\n <div class=\"why\" data-reveal style=\"--d:.15s\">\n <div class=\"why-ic\"><i data-lucide=\"gauge\"><\/i><\/div>\n <h3>Fast Performance<\/h3>\n <p>Optimized code, images and caching for lightning-quick page loads that keep visitors engaged.<\/p>\n <\/div>\n <div class=\"why\" data-reveal style=\"--d:.2s\">\n <div class=\"why-ic\"><i data-lucide=\"trending-up\"><\/i><\/div>\n <h3>SEO Friendly<\/h3>\n <p>Built with SEO best practices \u2014 clean structure, meta setup and speed \u2014 to help you rank higher.<\/p>\n <\/div>\n <div class=\"why\" data-reveal style=\"--d:.25s\">\n <div class=\"why-ic\"><i data-lucide=\"sparkles\"><\/i><\/div>\n <h3>Modern UI\/UX<\/h3>\n <p>Intuitive, user-centered interfaces designed to guide visitors smoothly toward taking action.<\/p>\n <\/div>\n <div class=\"why\" data-reveal style=\"--d:.3s\">\n <div class=\"why-ic\"><i data-lucide=\"heart-handshake\"><\/i><\/div>\n <h3>Client Support<\/h3>\n <p>Clear communication, on-time delivery and dependable support \u2014 even after your site goes live.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ================= PORTFOLIO ================= -->\n <section id=\"portfolio\" class=\"sh-sec\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-8\">\n <div class=\"text-center max-w-2xl mx-auto\" data-reveal>\n <span class=\"sh-eyebrow center\">My Work<\/span>\n <h2 class=\"sh-h2 mt-4\">Featured <span class=\"text-grad\">Projects<\/span><\/h2>\n <p class=\"sh-sub mt-4\">A selection of recent builds \u2014 each one crafted with strategy, precision and care.<\/p>\n <\/div>\n\n <div class=\"flex flex-wrap justify-center gap-3 mt-10\" data-reveal>\n <button class=\"pf-btn active\" data-filter=\"all\">All Projects<\/button>\n <button class=\"pf-btn\" data-filter=\"business\">Business<\/button>\n <button class=\"pf-btn\" data-filter=\"ecommerce\">E-Commerce<\/button>\n <button class=\"pf-btn\" data-filter=\"landing\">Landing Page<\/button>\n <\/div>\n\n <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-6 mt-12\" id=\"projGrid\">\n <article class=\"proj pop\" data-cat=\"business\" data-reveal style=\"--d:.05s\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/8534457\/pexels-photo-8534457.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200\" alt=\"Luminora Interiors business website\" loading=\"lazy\">\n <div class=\"proj-ov\"><\/div>\n <a href=\"#contact\" class=\"proj-btn\" aria-label=\"View project\"><i data-lucide=\"arrow-up-right\"><\/i><\/a>\n <div class=\"proj-body\">\n <span class=\"proj-tag\">Business<\/span>\n <h3>Luminora Interiors<\/h3>\n <p>Custom WordPress build with elegant service showcase.<\/p>\n <\/div>\n <\/article>\n\n <article class=\"proj pop\" data-cat=\"landing\" data-reveal style=\"--d:.1s\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/6449926\/pexels-photo-6449926.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200\" alt=\"Nordic Studio landing page\" loading=\"lazy\">\n <div class=\"proj-ov\"><\/div>\n <a href=\"#contact\" class=\"proj-btn\" aria-label=\"View project\"><i data-lucide=\"arrow-up-right\"><\/i><\/a>\n <div class=\"proj-body\">\n <span class=\"proj-tag\">Landing Page<\/span>\n <h3>Nordic Studio<\/h3>\n <p>High-converting Elementor landing page for a creative studio.<\/p>\n <\/div>\n <\/article>\n\n <article class=\"proj pop\" data-cat=\"business\" data-reveal style=\"--d:.15s\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/8534380\/pexels-photo-8534380.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200\" alt=\"Verde Agency business website\" loading=\"lazy\">\n <div class=\"proj-ov\"><\/div>\n <a href=\"#contact\" class=\"proj-btn\" aria-label=\"View project\"><i data-lucide=\"arrow-up-right\"><\/i><\/a>\n <div class=\"proj-body\">\n <span class=\"proj-tag\">Business<\/span>\n <h3>Verde Agency<\/h3>\n <p>Corporate website redesign with a fresh, modern identity.<\/p>\n <\/div>\n <\/article>\n\n <article class=\"proj pop\" data-cat=\"ecommerce\" data-reveal style=\"--d:.2s\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/12882906\/pexels-photo-12882906.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200\" alt=\"Urban Cart online store\" loading=\"lazy\">\n <div class=\"proj-ov\"><\/div>\n <a href=\"#contact\" class=\"proj-btn\" aria-label=\"View project\"><i data-lucide=\"arrow-up-right\"><\/i><\/a>\n <div class=\"proj-body\">\n <span class=\"proj-tag\">E-Commerce<\/span>\n <h3>Urban Cart<\/h3>\n <p>WooCommerce store with optimized checkout and filters.<\/p>\n <\/div>\n <\/article>\n\n <article class=\"proj pop\" data-cat=\"ecommerce\" data-reveal style=\"--d:.25s\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/8533587\/pexels-photo-8533587.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200\" alt=\"TechNest online store\" loading=\"lazy\">\n <div class=\"proj-ov\"><\/div>\n <a href=\"#contact\" class=\"proj-btn\" aria-label=\"View project\"><i data-lucide=\"arrow-up-right\"><\/i><\/a>\n <div class=\"proj-body\">\n <span class=\"proj-tag\">E-Commerce<\/span>\n <h3>TechNest Store<\/h3>\n <p>Electronics storefront with speed-focused performance.<\/p>\n <\/div>\n <\/article>\n\n <article class=\"proj pop\" data-cat=\"landing\" data-reveal style=\"--d:.3s\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/7214629\/pexels-photo-7214629.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200\" alt=\"Coastal Caf\u00e9 landing page\" loading=\"lazy\">\n <div class=\"proj-ov\"><\/div>\n <a href=\"#contact\" class=\"proj-btn\" aria-label=\"View project\"><i data-lucide=\"arrow-up-right\"><\/i><\/a>\n <div class=\"proj-body\">\n <span class=\"proj-tag\">Landing Page<\/span>\n <h3>Coastal Caf\u00e9<\/h3>\n <p>Warm, inviting one-pager with menu and reservations.<\/p>\n <\/div>\n <\/article>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ================= PROCESS ================= -->\n <section id=\"process\" class=\"sh-sec\" style=\"background:var(--bg-soft);\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-8\">\n <div class=\"text-center max-w-2xl mx-auto\" data-reveal>\n <span class=\"sh-eyebrow center\">How I Work<\/span>\n <h2 class=\"sh-h2 mt-4\">A Simple, Proven <span class=\"text-grad\">Process<\/span><\/h2>\n <p class=\"sh-sub mt-4\">From first conversation to launch day \u2014 always transparent, always on schedule.<\/p>\n <\/div>\n\n <div class=\"steps grid sm:grid-cols-2 lg:grid-cols-5 gap-5 mt-14\">\n <div class=\"step\" data-step=\"01\" data-reveal style=\"--d:.05s\">\n <div class=\"step-ic\"><i data-lucide=\"messages-square\"><\/i><\/div>\n <span class=\"step-n\">STEP 01<\/span>\n <h3>Discuss<\/h3>\n <p>We talk about your goals, requirements and vision for the project.<\/p>\n <\/div>\n <div class=\"step\" data-step=\"02\" data-reveal style=\"--d:.1s\">\n <div class=\"step-ic\"><i data-lucide=\"clipboard-list\"><\/i><\/div>\n <span class=\"step-n\">STEP 02<\/span>\n <h3>Plan<\/h3>\n <p>I create a clear roadmap, structure and timeline for your website.<\/p>\n <\/div>\n <div class=\"step\" data-step=\"03\" data-reveal style=\"--d:.15s\">\n <div class=\"step-ic\"><i data-lucide=\"pen-tool\"><\/i><\/div>\n <span class=\"step-n\">STEP 03<\/span>\n <h3>Design<\/h3>\n <p>Modern, on-brand designs are crafted and refined with your feedback.<\/p>\n <\/div>\n <div class=\"step\" data-step=\"04\" data-reveal style=\"--d:.2s\">\n <div class=\"step-ic\"><i data-lucide=\"code\"><\/i><\/div>\n <span class=\"step-n\">STEP 04<\/span>\n <h3>Develop<\/h3>\n <p>Your website is built with clean code and tested on every device.<\/p>\n <\/div>\n <div class=\"step\" data-step=\"05\" data-reveal style=\"--d:.25s\">\n <div class=\"step-ic\"><i data-lucide=\"rocket\"><\/i><\/div>\n <span class=\"step-n\">STEP 05<\/span>\n <h3>Launch<\/h3>\n <p>We go live \u2014 with optimization, training and ongoing support.<\/p>\n <\/div>\n <\/div>\n\n <!-- CTA banner -->\n <div class=\"cta mt-20\" data-reveal=\"scale\">\n <div class=\"cta-in\">\n <div>\n <h2>Have a project in mind?<\/h2>\n <p>Let's work together to create a professional website that helps your business grow online.<\/p>\n <\/div>\n <a href=\"#contact\" class=\"sh-btn sh-btn-dark\">Start Your Project <i data-lucide=\"arrow-right\"><\/i><\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ================= CONTACT ================= -->\n <section id=\"contact\" class=\"sh-sec\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-8\">\n <div class=\"grid lg:grid-cols-[1fr_1.15fr] gap-14 lg:gap-16 items-start\">\n\n <div data-reveal=\"left\">\n <span class=\"sh-eyebrow\">Get In Touch<\/span>\n <h2 class=\"sh-h2 mt-4\">Let's Talk About <span class=\"text-grad\">Your Project<\/span><\/h2>\n <p class=\"sh-sub mt-5\">Ready to build something great? Reach out today \u2014 I usually reply within a few hours and every project starts with a free consultation.<\/p>\n\n <div class=\"flex flex-col gap-4 mt-9\">\n <a href=\"tel:+923098818132\" class=\"cinfo\">\n <div class=\"ci\"><i data-lucide=\"phone\"><\/i><\/div>\n <div><small>Phone \/ WhatsApp<\/small><b>0309 8818132<\/b><\/div>\n <\/a>\n <a href=\"mailto:shehryarfazalrhaman@gmail.com\" class=\"cinfo\">\n <div class=\"ci\"><i data-lucide=\"mail\"><\/i><\/div>\n <div><small>Email Address<\/small><b>shehryarfazalrhaman@gmail.com<\/b><\/div>\n <\/a>\n <div class=\"cinfo\">\n <div class=\"ci\"><i data-lucide=\"map-pin\"><\/i><\/div>\n <div><small>Location<\/small><b>Pakistan \u00b7 Working Worldwide<\/b><\/div>\n <\/div>\n <\/div>\n\n <div class=\"flex items-center gap-3 mt-8\">\n <a href=\"#\" class=\"soc\" aria-label=\"Facebook\"><i data-lucide=\"facebook\"><\/i><\/a>\n <a href=\"#\" class=\"soc\" aria-label=\"Instagram\"><i data-lucide=\"instagram\"><\/i><\/a>\n <a href=\"#\" class=\"soc\" aria-label=\"LinkedIn\"><i data-lucide=\"linkedin\"><\/i><\/a>\n <a href=\"#\" class=\"soc\" aria-label=\"GitHub\"><i data-lucide=\"github\"><\/i><\/a>\n <a href=\"https:\/\/wa.me\/923098818132\" target=\"_blank\" rel=\"noopener\" class=\"soc\" aria-label=\"WhatsApp\"><i data-lucide=\"message-circle\"><\/i><\/a>\n <\/div>\n <\/div>\n\n <form class=\"sh-form\" id=\"shForm\" novalidate data-reveal=\"right\">\n <div class=\"grid sm:grid-cols-2 gap-5\">\n <div>\n <label class=\"fl\" for=\"f-name\">Your Name <em>*<\/em><\/label>\n <input class=\"fi\" id=\"f-name\" name=\"name\" type=\"text\" placeholder=\"John Smith\" required>\n <\/div>\n <div>\n <label class=\"fl\" for=\"f-email\">Email Address <em>*<\/em><\/label>\n <input class=\"fi\" id=\"f-email\" name=\"email\" type=\"email\" placeholder=\"you@company.com\" required>\n <\/div>\n <\/div>\n <div class=\"mt-5\">\n <label class=\"fl\" for=\"f-phone\">Phone Number<\/label>\n <input class=\"fi\" id=\"f-phone\" name=\"phone\" type=\"tel\" placeholder=\"+92 300 0000000\">\n <\/div>\n <div class=\"mt-5\">\n <label class=\"fl\" for=\"f-msg\">Project Details <em>*<\/em><\/label>\n <textarea class=\"fi\" id=\"f-msg\" name=\"message\" rows=\"5\" placeholder=\"Tell me about your project \u2014 goals, pages, timeline...\" required style=\"resize:vertical;min-height:130px;\"><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"sh-btn sh-btn-gold w-full mt-7\" id=\"shSend\">\n <span id=\"sendLabel\">Send Message<\/span>\n <i data-lucide=\"send\" id=\"sendIcon\"><\/i>\n <i data-lucide=\"loader-circle\" id=\"sendSpin\" class=\"spin\" style=\"display:none;\"><\/i>\n <\/button>\n <div class=\"form-ok\" id=\"formOk\">\n <i data-lucide=\"circle-check\"><\/i>\n Thank you! Your message has been sent \u2014 I'll get back to you within 24 hours.\n <\/div>\n <\/form>\n\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <!-- ================= FOOTER ================= -->\n <footer class=\"sh-footer\" id=\"contact-footer\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-8 py-16\">\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-[1.5fr_1fr_1fr_1.3fr] gap-12\">\n\n <div>\n <a href=\"#home\" class=\"sh-logo\">Shehryar<b>.<\/b><\/a>\n <p class=\"sh-sub text-sm mt-4 max-w-xs\">Professional WordPress Developer from Pakistan \u2014 building modern, responsive and high-performing websites for businesses worldwide.<\/p>\n <div class=\"flex items-center gap-3 mt-6\">\n <a href=\"#\" class=\"soc\" aria-label=\"Facebook\"><i data-lucide=\"facebook\"><\/i><\/a>\n <a href=\"#\" class=\"soc\" aria-label=\"Instagram\"><i data-lucide=\"instagram\"><\/i><\/a>\n <a href=\"#\" class=\"soc\" aria-label=\"LinkedIn\"><i data-lucide=\"linkedin\"><\/i><\/a>\n <a href=\"#\" class=\"soc\" aria-label=\"GitHub\"><i data-lucide=\"github\"><\/i><\/a>\n <\/div>\n <\/div>\n\n <nav aria-label=\"Quick links\">\n <h4 class=\"ft-h\">Quick Links<\/h4>\n <ul class=\"flex flex-col\">\n <li><a class=\"ft-link\" href=\"#home\"><i data-lucide=\"chevron-right\"><\/i>Home<\/a><\/li>\n <li><a class=\"ft-link\" href=\"#services\"><i data-lucide=\"chevron-right\"><\/i>Services<\/a><\/li>\n <li><a class=\"ft-link\" href=\"#about\"><i data-lucide=\"chevron-right\"><\/i>About Me<\/a><\/li>\n <li><a class=\"ft-link\" href=\"#portfolio\"><i data-lucide=\"chevron-right\"><\/i>Portfolio<\/a><\/li>\n <li><a class=\"ft-link\" href=\"#process\"><i data-lucide=\"chevron-right\"><\/i>Process<\/a><\/li>\n <li><a class=\"ft-link\" href=\"#contact\"><i data-lucide=\"chevron-right\"><\/i>Contact<\/a><\/li>\n <\/ul>\n <\/nav>\n\n <nav aria-label=\"Services\">\n <h4 class=\"ft-h\">Services<\/h4>\n <ul class=\"flex flex-col\">\n <li><a class=\"ft-link\" href=\"#services\"><i data-lucide=\"chevron-right\"><\/i>WordPress Development<\/a><\/li>\n <li><a class=\"ft-link\" href=\"#services\"><i data-lucide=\"chevron-right\"><\/i>Business Website Design<\/a><\/li>\n <li><a class=\"ft-link\" href=\"#services\"><i data-lucide=\"chevron-right\"><\/i>Elementor Design<\/a><\/li>\n <li><a class=\"ft-link\" href=\"#services\"><i data-lucide=\"chevron-right\"><\/i>WooCommerce Stores<\/a><\/li>\n <li><a class=\"ft-link\" href=\"#services\"><i data-lucide=\"chevron-right\"><\/i>Speed Optimization<\/a><\/li>\n <li><a class=\"ft-link\" href=\"#services\"><i data-lucide=\"chevron-right\"><\/i>Maintenance & Care<\/a><\/li>\n <\/ul>\n <\/nav>\n\n <address style=\"font-style:normal;\">\n <h4 class=\"ft-h\">Contact Info<\/h4>\n <ul class=\"flex flex-col gap-1\">\n <li class=\"ft-c\"><i data-lucide=\"phone\"><\/i><a href=\"tel:+923098818132\" style=\"color:inherit;\">0309 8818132<\/a><\/li>\n <li class=\"ft-c\"><i data-lucide=\"mail\"><\/i><a href=\"mailto:shehryarfazalrhaman@gmail.com\" style=\"color:inherit;word-break:break-all;\">shehryarfazalrhaman@gmail.com<\/a><\/li>\n <li class=\"ft-c\"><i data-lucide=\"map-pin\"><\/i>Pakistan \u00b7 Remote Worldwide<\/li>\n <li class=\"ft-c\"><i data-lucide=\"clock\"><\/i>Mon \u2013 Sat \u00b7 9:00 \u2013 22:00 (PKT)<\/li>\n <\/ul>\n <\/address>\n <\/div>\n <\/div>\n\n <div class=\"max-w-7xl mx-auto px-6 lg:px-8\">\n <div class=\"ft-bottom\">\n <div>\u00a9 <span id=\"shYear\">2025<\/span> <b>Shehryar<\/b> \u2014 WordPress Developer. All rights reserved.<\/div>\n <div>Designed & built with passion in <b>Pakistan<\/b><\/div>\n <\/div>\n <\/div>\n <\/footer>\n\n <!-- Toast -->\n <div id=\"shToast\" role=\"status\"><i data-lucide=\"circle-check\"><\/i><span>Message sent successfully!<\/span><\/div>\n\n <!-- Back to top -->\n <button id=\"backTop\" aria-label=\"Back to top\"><i data-lucide=\"arrow-up\"><\/i><\/button>\n\n<\/div>\n\n<script>\n(function(){\n 'use strict';\n var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n \/* ---------- Lucide icons ---------- *\/\n if (window.lucide) lucide.createIcons();\n\n \/* ---------- Image fallback chain (uploaded photo) ---------- *\/\n window.shImgFallback = function(img){\n var chain = (img.getAttribute('data-chain') || '').split('|');\n var i = parseInt(img.getAttribute('data-i') || '0', 10);\n if (i < chain.length && chain[i]) {\n img.setAttribute('data-i', i + 1);\n img.src = chain[i];\n } else {\n img.style.display = 'none';\n var f = img.closest('.ph-frame, .about-frame');\n if (f) f.classList.add('no-img');\n }\n };\n\n \/* ---------- Preloader ---------- *\/\n var pre = document.getElementById('sh-preloader');\n var hidePre = function(){ if (pre && !pre.classList.contains('done')) pre.classList.add('done'); };\n window.addEventListener('load', function(){ setTimeout(hidePre, 500); });\n setTimeout(hidePre, 3200); \/\/ safety\n\n \/* ---------- Nav scroll state + progress + back-to-top ---------- *\/\n var nav = document.getElementById('shNav');\n var prog = document.getElementById('shProgress');\n var backTop = document.getElementById('backTop');\n var ticking = false;\n function onScroll(){\n var y = window.scrollY || document.documentElement.scrollTop;\n if (y > 40) nav.classList.add('scrolled'); else nav.classList.remove('scrolled');\n var h = document.documentElement.scrollHeight - window.innerHeight;\n prog.style.width = (h > 0 ? (y \/ h) * 100 : 0) + '%';\n if (y > 600) backTop.classList.add('show'); else backTop.classList.remove('show');\n ticking = false;\n }\n window.addEventListener('scroll', function(){\n if (!ticking){ window.requestAnimationFrame(onScroll); ticking = true; }\n }, {passive:true});\n onScroll();\n backTop.addEventListener('click', function(){ window.scrollTo({top:0, behavior: reduced ? 'auto' : 'smooth'}); });\n\n \/* ---------- Mobile menu ---------- *\/\n var mobile = document.getElementById('shMobile');\n var burger = document.getElementById('shBurger');\n var closeBtn = document.getElementById('shClose');\n function setMenu(open){\n mobile.classList.toggle('open', open);\n mobile.setAttribute('aria-hidden', String(!open));\n document.body.style.overflow = open ? 'hidden' : '';\n }\n burger.addEventListener('click', function(){ setMenu(true); });\n closeBtn.addEventListener('click', function(){ setMenu(false); });\n mobile.querySelectorAll('.m-link').forEach(function(a){\n a.addEventListener('click', function(){ setMenu(false); });\n });\n document.addEventListener('keydown', function(e){ if (e.key === 'Escape') setMenu(false); });\n\n \/* ---------- Active nav link ---------- *\/\n var links = Array.prototype.slice.call(document.querySelectorAll('.sh-nav .nav-link'));\n var ids = links.map(function(l){ return l.getAttribute('href').slice(1); });\n var io = new IntersectionObserver(function(entries){\n entries.forEach(function(en){\n if (en.isIntersecting){\n links.forEach(function(l){ l.classList.toggle('active', l.getAttribute('href') === '#' + en.target.id); });\n }\n });\n }, {rootMargin:'-40% 0px -55% 0px'});\n ids.forEach(function(id){\n var el = document.getElementById(id);\n if (el) io.observe(el);\n });\n\n \/* ---------- Reveal on scroll ---------- *\/\n var revealEls = document.querySelectorAll('[data-reveal]');\n if (reduced) {\n revealEls.forEach(function(el){ el.classList.add('in'); });\n } else {\n var ro = new IntersectionObserver(function(entries){\n entries.forEach(function(en){\n if (en.isIntersecting){ en.target.classList.add('in'); ro.unobserve(en.target); }\n });\n }, {threshold:.12, rootMargin:'0px 0px -40px 0px'});\n revealEls.forEach(function(el){ ro.observe(el); });\n }\n\n \/* ---------- Animated counters ---------- *\/\n function animateCount(el){\n var target = parseInt(el.getAttribute('data-count'), 10);\n if (reduced){ el.textContent = target; return; }\n var dur = 1500, start = null;\n function step(ts){\n if (!start) start = ts;\n var p = Math.min((ts - start) \/ dur, 1);\n var e = 1 - Math.pow(1 - p, 4);\n el.textContent = Math.round(e * target);\n if (p < 1) requestAnimationFrame(step);\n }\n requestAnimationFrame(step);\n }\n var counters = document.querySelectorAll('[data-count]');\n var co = new IntersectionObserver(function(entries){\n entries.forEach(function(en){\n if (en.isIntersecting){ animateCount(en.target); co.unobserve(en.target); }\n });\n }, {threshold:.6});\n counters.forEach(function(c){ co.observe(c); });\n\n \/* ---------- Skill bars ---------- *\/\n var skillSpans = document.querySelectorAll('.skill-top span[data-w]');\n var barFills = document.querySelectorAll('.bar-fill');\n var bo = new IntersectionObserver(function(entries){\n entries.forEach(function(en){\n if (!en.isIntersecting) return;\n var fill = en.target;\n fill.style.width = fill.getAttribute('data-w') + '%';\n var num = fill.closest('.skill').querySelector('.skill-top span[data-w]');\n if (num) appendPct(num);\n bo.unobserve(fill);\n });\n }, {threshold:.4});\n function appendPct(el){\n var target = parseInt(el.getAttribute('data-w'), 10);\n if (reduced){ el.textContent = target + '%'; return; }\n el.textContent = '';\n var dur = 1500, start = null;\n function step(ts){\n if (!start) start = ts;\n var p = Math.min((ts - start) \/ dur, 1);\n var e = 1 - Math.pow(1 - p, 4);\n el.textContent = Math.round(e * target) + '%';\n if (p < 1) requestAnimationFrame(step);\n }\n requestAnimationFrame(step);\n }\n barFills.forEach(function(b){ bo.observe(b); });\n\n \/* ---------- Portfolio filter ---------- *\/\n var pfBtns = document.querySelectorAll('.pf-btn');\n var projs = document.querySelectorAll('#projGrid .proj');\n pfBtns.forEach(function(btn){\n btn.addEventListener('click', function(){\n pfBtns.forEach(function(b){ b.classList.remove('active'); });\n btn.classList.add('active');\n var f = btn.getAttribute('data-filter');\n projs.forEach(function(card){\n var show = (f === 'all' || card.getAttribute('data-cat') === f);\n if (show){\n card.style.display = '';\n card.classList.remove('pop');\n void card.offsetWidth; \/\/ restart animation\n card.classList.add('pop');\n card.classList.add('in');\n } else {\n card.style.display = 'none';\n }\n });\n });\n });\n\n \/* ---------- Hero photo tilt ---------- *\/\n var hero = document.querySelector('.hero');\n var tilt = document.getElementById('phTilt');\n if (hero && tilt && !reduced && window.matchMedia('(pointer: fine)').matches){\n var tx = 0, ty = 0, cx = 0, cy = 0, rafOn = false;\n function loop(){\n cx += (tx - cx) * .08;\n cy += (ty - cy) * .08;\n tilt.style.transform = 'rotateX(' + cy.toFixed(2) + 'deg) rotateY(' + cx.toFixed(2) + 'deg)';\n if (Math.abs(tx - cx) > .05 || Math.abs(ty - cy) > .05) requestAnimationFrame(loop);\n else rafOn = false;\n }\n hero.addEventListener('mousemove', function(e){\n var r = tilt.getBoundingClientRect();\n var px = (e.clientX - (r.left + r.width \/ 2)) \/ r.width;\n var py = (e.clientY - (r.top + r.height \/ 2)) \/ r.height;\n tx = Math.max(-1, Math.min(1, px)) * 7;\n ty = Math.max(-1, Math.min(1, -py)) * 7;\n if (!rafOn){ rafOn = true; requestAnimationFrame(loop); }\n });\n hero.addEventListener('mouseleave', function(){\n tx = 0; ty = 0;\n if (!rafOn){ rafOn = true; requestAnimationFrame(loop); }\n });\n }\n\n \/* ---------- Contact form ---------- *\/\n var form = document.getElementById('shForm');\n var toast = document.getElementById('shToast');\n var sendBtn = document.getElementById('shSend');\n var sendLabel = document.getElementById('sendLabel');\n var sendIcon = document.getElementById('sendIcon');\n var sendSpin = document.getElementById('sendSpin');\n var formOk = document.getElementById('formOk');\n var toastTimer;\n function showToast(msg){\n toast.querySelector('span').textContent = msg;\n toast.classList.add('show');\n clearTimeout(toastTimer);\n toastTimer = setTimeout(function(){ toast.classList.remove('show'); }, 4000);\n }\n if (form){\n form.addEventListener('submit', function(e){\n e.preventDefault();\n if (!form.checkValidity()){ form.reportValidity(); return; }\n sendBtn.style.pointerEvents = 'none';\n sendBtn.style.opacity = '.85';\n sendLabel.textContent = 'Sending...';\n sendIcon.style.display = 'none';\n sendSpin.style.display = '';\n setTimeout(function(){\n sendLabel.textContent = 'Send Message';\n sendIcon.style.display = '';\n sendSpin.style.display = 'none';\n sendBtn.style.pointerEvents = '';\n sendBtn.style.opacity = '';\n formOk.classList.add('show');\n showToast('Message sent successfully!');\n form.reset();\n setTimeout(function(){ formOk.classList.remove('show'); }, 6000);\n }, 1400);\n });\n }\n\n \/* ---------- Misc ---------- *\/\n document.getElementById('shYear').textContent = new Date().getFullYear();\n})();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Shehryar \u2014 Professional WordPress Developer in Pakistan S Shehryar Shehryar. Home Services About Why Me Portfolio Process Contact Hire Me […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-643","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages\/643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/comments?post=643"}],"version-history":[{"count":7,"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages\/643\/revisions"}],"predecessor-version":[{"id":650,"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages\/643\/revisions\/650"}],"wp:attachment":[{"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/media?parent=643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}