{"id":9,"date":"2026-07-26T05:10:54","date_gmt":"2026-07-26T05:10:54","guid":{"rendered":"https:\/\/umairarif.com\/?page_id=9"},"modified":"2026-07-26T15:05:10","modified_gmt":"2026-07-26T15:05:10","slug":"home","status":"publish","type":"page","link":"https:\/\/umairarif.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9\" class=\"elementor elementor-9\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-849fe81 elementor-section-full_width elementor-section-content-middle elementor-section-height-default elementor-section-height-default\" data-id=\"849fe81\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7a5a028d\" data-id=\"7a5a028d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5dfde147 elementor-widget elementor-widget-html\" data-id=\"5dfde147\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<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=Sacramento&family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* ===== Umair Arif - premium green glassmorphism header (scoped .ua-hdr) ===== *\/\n.ua-hdr,.ua-hdr *{box-sizing:border-box}\n.ua-hdr{\n  --green:#4ade80;--green-bright:#7cff8f;--green-dim:rgba(74,222,128,.55);\n  --white:#f4f7f4;--muted:#a8b3aa;\n  --glass:rgba(14,20,15,.55);--glass-border:rgba(124,255,143,.16);\n  --ease:cubic-bezier(.22,1,.36,1);\n  position:sticky!important;top:22px;z-index:9990;display:block!important;width:100%;\n  padding:0 clamp(14px,4vw,48px);\n  font-family:\"Poppins\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif!important;\n  -webkit-font-smoothing:antialiased;\n  animation:uaFadeUp .9s var(--ease) both;\n}\n.ua-hdr .ua-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none}\n\n\/* floating glass pill *\/\n.ua-hdr .ua-nav{\n  max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;\n  padding:16px 26px;border-radius:25px;position:relative;overflow:hidden;\n  background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);\n  border:1px solid var(--glass-border);\n  box-shadow:0 10px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);\n  transition:padding .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease),backdrop-filter .5s var(--ease);\n}\n\/* one-time shine sweep *\/\n.ua-hdr .ua-nav::before{\n  content:\"\";position:absolute;top:0;left:-60%;width:55%;height:100%;pointer-events:none;\n  background:linear-gradient(100deg,transparent,rgba(124,255,143,.10),transparent);\n  transform:skewX(-18deg);animation:uaShine 2.6s var(--ease) 1s both}\n\/* soft green glow line *\/\n.ua-hdr .ua-nav::after{\n  content:\"\";position:absolute;left:12%;right:12%;bottom:0;height:2px;\n  background:linear-gradient(90deg,transparent,var(--green-dim),transparent);filter:blur(.5px);opacity:.8}\n\/* scrolled state *\/\n.ua-hdr.ua-scrolled .ua-nav{\n  padding:10px 24px;background:rgba(10,15,11,.72);\n  backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);\n  box-shadow:0 18px 60px rgba(0,0,0,.6),0 0 0 1px rgba(124,255,143,.10)}\n\n\/* brand \/ signature *\/\n.ua-hdr .ua-brand{\n  font-family:\"Sacramento\",cursive!important;font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1;\n  white-space:nowrap;text-decoration:none;flex:0 0 auto;animation:uaFloat 5s ease-in-out infinite}\n.ua-hdr .ua-brand:hover{animation-play-state:paused;transform:scale(1.04)}\n.ua-hdr .ua-brand .um{color:var(--green-bright)!important;\n  text-shadow:0 0 14px rgba(124,255,143,.6),0 0 28px rgba(74,222,128,.35)}\n.ua-hdr .ua-brand .ar{color:var(--white)!important;margin-left:6px;text-shadow:0 0 10px rgba(255,255,255,.25)}\n\n\/* center menu *\/\n.ua-hdr .ua-menu{display:flex;align-items:center;gap:6px}\n.ua-hdr .ua-dot{width:5px;height:5px;border-radius:50%;background:var(--green);\n  box-shadow:0 0 8px var(--green-dim);opacity:.75;animation:uaPulse 2.4s ease-in-out infinite}\n.ua-hdr .ua-link{\n  position:relative;display:inline-block;padding:8px 14px;font-size:.98rem;font-weight:500;\n  color:var(--white)!important;text-decoration:none;border-radius:12px;\n  transition:color .35s var(--ease),transform .35s var(--ease),text-shadow .35s var(--ease)}\n.ua-hdr .ua-link::after{\n  content:\"\";position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;\n  background:var(--green-bright);box-shadow:0 0 10px var(--green);\n  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}\n.ua-hdr .ua-link:hover{color:var(--green-bright)!important;transform:translateY(-2px) scale(1.05);\n  text-shadow:0 0 14px rgba(124,255,143,.55)}\n.ua-hdr .ua-link:hover::after{transform:scaleX(1)}\n.ua-hdr .ua-link.is-active{color:var(--green-bright)!important;text-shadow:0 0 16px rgba(124,255,143,.6)}\n.ua-hdr .ua-link.is-active::after{transform:scaleX(1)}\n\n\/* circular glass burger *\/\n.ua-hdr .ua-burger{\n  flex:0 0 auto;width:54px;height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;\n  border-radius:50%;background:rgba(74,222,128,.06);border:1.5px solid var(--green-dim);\n  backdrop-filter:blur(8px);cursor:pointer;\n  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}\n.ua-hdr .ua-burger i{display:block;width:22px;height:2px;border-radius:2px;background:var(--green-bright);\n  box-shadow:0 0 6px var(--green-dim);transition:transform .35s var(--ease),opacity .35s var(--ease)}\n.ua-hdr .ua-burger:hover{transform:scale(1.08) rotate(6deg);border-color:var(--green-bright);\n  box-shadow:0 0 22px rgba(74,222,128,.45)}\n.ua-hdr .ua-toggle:checked ~ .ua-nav .ua-burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}\n.ua-hdr .ua-toggle:checked ~ .ua-nav .ua-burger i:nth-child(2){opacity:0}\n.ua-hdr .ua-toggle:checked ~ .ua-nav .ua-burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}\n\n\/* mobile drawer *\/\n.ua-hdr .ua-drawer{overflow:hidden;max-height:0;opacity:0;max-width:1320px;margin:0 auto;\n  transition:max-height .45s var(--ease),opacity .35s var(--ease),margin-top .35s var(--ease)}\n.ua-hdr .ua-toggle:checked ~ .ua-drawer{max-height:460px;opacity:1;margin-top:14px}\n.ua-hdr .ua-drawer nav{display:grid;gap:2px;padding:12px;border-radius:25px;\n  background:rgba(10,15,11,.92);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);\n  border:1px solid var(--glass-border);box-shadow:0 18px 60px rgba(0,0,0,.6)}\n.ua-hdr .ua-drawer a{padding:13px 16px;border-radius:14px;text-decoration:none;text-align:center;\n  font-size:.95rem;font-weight:500;color:var(--white)!important;transition:background .25s,color .25s}\n.ua-hdr .ua-drawer a:hover{background:rgba(74,222,128,.12);color:var(--green-bright)!important}\n\n\/* responsive *\/\n@media(max-width:992px){\n  .ua-hdr .ua-menu{display:none}\n}\n@media(min-width:993px){\n  .ua-hdr .ua-burger{pointer-events:none;opacity:.95}\n  .ua-hdr .ua-drawer{display:none}\n}\n@media(max-width:480px){\n  .ua-hdr{top:12px}\n  .ua-hdr .ua-nav{padding:12px 16px}\n  .ua-hdr .ua-burger{width:46px;height:46px}\n}\n\n\/* keyframes *\/\n@keyframes uaFadeUp{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}\n@keyframes uaShine{0%{left:-60%}60%{left:130%}100%{left:130%}}\n@keyframes uaFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}\n@keyframes uaPulse{0%,100%{opacity:.4;box-shadow:0 0 6px var(--green-dim)}50%{opacity:1;box-shadow:0 0 12px var(--green)}}\n@media(prefers-reduced-motion:reduce){\n  .ua-hdr *,.ua-hdr *::before,.ua-hdr *::after{animation-duration:.001ms!important;transition-duration:.001ms!important}\n}\n<\/style>\n\n<header class=\"ua-hdr\" id=\"ua-hdr\">\n  <input type=\"checkbox\" id=\"ua-nav-t\" class=\"ua-toggle\" aria-label=\"Toggle menu\">\n  <nav class=\"ua-nav\" aria-label=\"Main navigation\">\n    <a class=\"ua-brand\" href=\"#home\" aria-label=\"Umair Arif - home\">\n      <span class=\"um\">Umair<\/span><span class=\"ar\">Arif<\/span>\n    <\/a>\n    <div class=\"ua-menu\">\n      <a href=\"#home\" class=\"ua-link is-active\" aria-current=\"page\">Home<\/a><span class=\"ua-dot\" aria-hidden=\"true\"><\/span>\n      <a href=\"#about\" class=\"ua-link\">About Me<\/a><span class=\"ua-dot\" aria-hidden=\"true\"><\/span>\n      <a href=\"#skills\" class=\"ua-link\">My Skills<\/a><span class=\"ua-dot\" aria-hidden=\"true\"><\/span>\n      <a href=\"#portfolio\" class=\"ua-link\">Portfolio<\/a><span class=\"ua-dot\" aria-hidden=\"true\"><\/span>\n      <a href=\"#achievements\" class=\"ua-link\">Achievements<\/a><span class=\"ua-dot\" aria-hidden=\"true\"><\/span>\n      <a href=\"blog.html\" class=\"ua-link\">Blog<\/a><span class=\"ua-dot\" aria-hidden=\"true\"><\/span>\n      <a href=\"contact.html\" class=\"ua-link\">Contact Me<\/a>\n    <\/div>\n    <label for=\"ua-nav-t\" class=\"ua-burger\" title=\"Menu\" aria-label=\"Open menu\"><i><\/i><i><\/i><i><\/i><\/label>\n  <\/nav>\n  <div class=\"ua-drawer\">\n    <nav aria-label=\"Mobile navigation\">\n      <a href=\"#home\">Home<\/a>\n      <a href=\"#about\">About Me<\/a>\n      <a href=\"#skills\">My Skills<\/a>\n      <a href=\"#portfolio\">Portfolio<\/a>\n      <a href=\"#achievements\">Achievements<\/a>\n      <a href=\"blog.html\">Blog<\/a>\n      <a href=\"contact.html\">Contact Me<\/a>\n    <\/nav>\n  <\/div>\n<\/header>\n\n<script>\n(function(){\n  var hdr=document.getElementById(\"ua-hdr\");if(!hdr)return;\n  var links=hdr.querySelectorAll(\".ua-link[href^='#']\");\n  var cb=document.getElementById(\"ua-nav-t\");\n  function onScroll(){hdr.classList.toggle(\"ua-scrolled\",window.scrollY>30);}\n  window.addEventListener(\"scroll\",onScroll,{passive:true});onScroll();\n  links.forEach(function(l){\n    l.addEventListener(\"click\",function(e){\n      var t=document.querySelector(l.getAttribute(\"href\"));\n      if(t){e.preventDefault();t.scrollIntoView({behavior:\"smooth\",block:\"start\"});}\n      if(cb)cb.checked=false;\n    });\n  });\n  var secs=[].map.call(links,function(l){return document.querySelector(l.getAttribute(\"href\"));}).filter(Boolean);\n  if(\"IntersectionObserver\" in window){\n    var spy=new IntersectionObserver(function(ents){\n      ents.forEach(function(en){\n        if(en.isIntersecting){\n          var id=\"#\"+en.target.id;\n          links.forEach(function(l){l.classList.toggle(\"is-active\",l.getAttribute(\"href\")===id);});\n        }\n      });\n    },{rootMargin:\"-45% 0px -50% 0px\",threshold:0});\n    secs.forEach(function(s){spy.observe(s);});\n  }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-60c613b4 elementor-section-full_width elementor-section-content-middle elementor-section-height-default elementor-section-height-default\" data-id=\"60c613b4\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4abc5766\" data-id=\"4abc5766\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bf36c20 elementor-widget elementor-widget-html\" data-id=\"bf36c20\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ===== Umair Arif - HERO (full bg + premium FX, scoped .ua-hero) ===== *\/\n.ua-hero,.ua-hero *{box-sizing:border-box}\n.ua-hero{\n  --green:#4ade80;--green-bright:#7cff8f;--green-dim:rgba(74,222,128,.55);\n  --white:#f4f7f4;--muted:#c2ccc4;--ink:#050805;--ease:cubic-bezier(.22,1,.36,1);\n  position:relative;overflow:hidden;width:100%;min-height:100vh;display:flex;align-items:center;\n  padding:clamp(96px,15vh,150px) clamp(18px,4vw,60px) clamp(84px,11vh,120px);\n  font-family:\"Poppins\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif!important;\n  color:var(--white);-webkit-font-smoothing:antialiased;background:#050805}\n\n\/* FULL background image + cinematic reveal *\/\n.ua-hero .ua-bg{position:absolute;inset:0;z-index:0;\n  background:url(\"https:\/\/umairarif.com\/wp-content\/uploads\/2026\/07\/Hero-Image-2.png.png\") no-repeat;background-size:cover;background-position:72% center;\n  transform:scale(1.14);opacity:0;will-change:transform,opacity,filter;filter:brightness(.6) saturate(.9);\n  animation:uaBgIn 1.6s var(--ease) .1s forwards, uaKen 22s ease-in-out 1.7s infinite alternate}\n\n\/* ambient aurora blobs *\/\n.ua-hero .ua-aura{position:absolute;inset:-20%;z-index:0;pointer-events:none;filter:blur(60px);opacity:.55}\n.ua-hero .ua-aura span{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(74,222,128,.5),transparent 70%)}\n.ua-hero .ua-aura .a1{width:46vw;height:46vw;left:-8%;top:6%;animation:uaDrift1 16s ease-in-out infinite}\n.ua-hero .ua-aura .a2{width:34vw;height:34vw;left:38%;top:-12%;animation:uaDrift2 20s ease-in-out infinite}\n.ua-hero .ua-aura .a3{width:30vw;height:30vw;left:20%;bottom:-16%;animation:uaDrift3 24s ease-in-out infinite}\n\n\/* readability shade *\/\n.ua-hero .ua-shade{position:absolute;inset:0;z-index:1;pointer-events:none;\n  background:\n    linear-gradient(90deg,rgba(5,8,5,.95) 0%,rgba(5,8,5,.86) 30%,rgba(5,8,5,.5) 52%,rgba(5,8,5,.12) 72%,rgba(5,8,5,.3) 100%),\n    linear-gradient(180deg,rgba(5,8,5,.6) 0%,transparent 22%,transparent 66%,rgba(5,8,5,.9) 100%)}\n.ua-hero .ua-shade::before{content:\"\";position:absolute;inset:0;opacity:.5;\n  background-image:radial-gradient(rgba(74,222,128,.18) 1px,transparent 1px);background-size:26px 26px;\n  -webkit-mask:linear-gradient(90deg,#000,transparent 34%);mask:linear-gradient(90deg,#000,transparent 34%)}\n\n\/* floating particles *\/\n.ua-hero .ua-fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}\n.ua-hero .ua-fx i{position:absolute;bottom:-12px;border-radius:50%;\n  background:radial-gradient(closest-side,var(--green-bright),rgba(74,222,128,0));\n  opacity:0;animation-name:uaRise;animation-timing-function:linear;animation-iteration-count:infinite}\n\n.ua-hero .ua-inner{position:relative;z-index:3;max-width:1360px;margin:0 auto;width:100%}\n.ua-hero .ua-col{max-width:680px}\n\n\/* eyebrow *\/\n.ua-hero .ua-eyebrow{display:inline-flex;align-items:center;gap:16px;margin-bottom:22px;\n  color:var(--green-bright);font-size:.82rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;\n  opacity:0;animation:uaUp .8s var(--ease) .5s both}\n.ua-hero .ua-eyebrow::after{content:\"\";width:0;height:2px;border-radius:2px;\n  background:linear-gradient(90deg,var(--green),transparent);box-shadow:0 0 10px var(--green-dim);\n  animation:uaGrow .8s var(--ease) .9s both}\n\n\/* heading - line clip reveal *\/\n.ua-hero h1{margin:0 0 24px;font-weight:800;line-height:1.02;letter-spacing:-.01em;\n  font-size:clamp(2.6rem,6vw,5rem);text-transform:uppercase;color:var(--white);text-shadow:0 2px 30px rgba(0,0,0,.6)}\n.ua-hero h1 .ln{display:block;overflow:hidden}\n.ua-hero h1 .ln > span{display:block;transform:translateY(112%);animation:uaLine 1s var(--ease) both}\n.ua-hero h1 .ln:nth-child(1) > span{animation-delay:.65s}\n.ua-hero h1 .ln:nth-child(2) > span{animation-delay:.8s}\n.ua-hero h1 .g{font-style:normal;\n  background:linear-gradient(90deg,#4ade80,#eafff0 42%,#7cff8f 58%,#4ade80);\n  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;\n  filter:drop-shadow(0 0 26px rgba(124,255,143,.5));animation:uaShimmer 4s linear 1.8s infinite}\n\n.ua-hero .ua-lead{max-width:36ch;margin:0 0 40px;color:var(--muted);font-size:clamp(1rem,1.3vw,1.2rem);\n  font-weight:300;line-height:1.7;text-shadow:0 1px 16px rgba(0,0,0,.6);opacity:0;animation:uaUp .9s var(--ease) 1.05s both}\n\n\/* buttons *\/\n.ua-hero .ua-ctas{display:flex;flex-wrap:wrap;gap:18px;opacity:0;animation:uaUp .9s var(--ease) 1.2s both}\n.ua-hero .ua-btn{position:relative;display:inline-flex;align-items:center;gap:12px;overflow:hidden;\n  padding:17px 32px;border-radius:16px;text-decoration:none;cursor:pointer;\n  font-size:.86rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;will-change:transform;\n  transition:transform .3s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease)}\n.ua-hero .ua-btn svg{width:19px;height:19px;flex:0 0 auto}\n.ua-hero .ua-btn .arw{transition:transform .35s var(--ease)}\n.ua-hero .ua-btn::before{content:\"\";position:absolute;inset:0;pointer-events:none;\n  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.35) 50%,transparent 64%);transform:translateX(-130%)}\n.ua-hero .ua-btn:hover::before{animation:uaSheen .9s ease}\n.ua-hero .ua-btn.p{color:var(--green-bright);background:rgba(74,222,128,.08);\n  border:1.6px solid var(--green);box-shadow:inset 0 0 22px rgba(74,222,128,.12)}\n.ua-hero .ua-btn.p:hover{box-shadow:0 16px 40px -14px rgba(74,222,128,.8),inset 0 0 26px rgba(74,222,128,.2)}\n.ua-hero .ua-btn.s{color:var(--white);background:rgba(10,14,11,.5);\n  border:1.6px solid rgba(255,255,255,.14);backdrop-filter:blur(8px)}\n.ua-hero .ua-btn.s:hover{border-color:var(--green-dim);box-shadow:0 14px 34px -16px rgba(0,0,0,.8)}\n.ua-hero .ua-btn.s:hover .arw{transform:translateX(4px) translateY(-1px)}\n\n\/* status + tags *\/\n.ua-hero .ua-status{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:clamp(42px,7vh,70px);\n  opacity:0;animation:uaUp 1s var(--ease) 1.35s both}\n.ua-hero .ua-avail{display:inline-flex;align-items:center;gap:10px;color:var(--green-bright);\n  font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}\n.ua-hero .ua-avail .pip{width:9px;height:9px;border-radius:50%;background:var(--green);\n  box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:uaPip 2s ease-out infinite}\n.ua-hero .ua-tags{display:flex;flex-wrap:wrap;gap:10px}\n.ua-hero .ua-tag{display:inline-flex;align-items:center;gap:9px;padding:11px 17px;border-radius:12px;\n  font-size:.82rem;font-weight:500;color:var(--white);\n  background:rgba(10,14,11,.5);border:1px solid rgba(124,255,143,.16);backdrop-filter:blur(6px);\n  transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}\n.ua-hero .ua-tag svg{width:15px;height:15px;color:var(--green-bright)}\n.ua-hero .ua-tag:hover{transform:translateY(-3px);border-color:var(--green-dim);background:rgba(74,222,128,.1)}\n\n\/* scroll indicator *\/\n.ua-hero .ua-scroll{position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%);\n  display:flex;flex-direction:column;align-items:center;gap:9px;opacity:0;animation:uaUp 1s var(--ease) 1.8s both}\n.ua-hero .ua-scroll .ln2{position:relative;width:2px;height:46px;border-radius:2px;background:rgba(124,255,143,.2);overflow:hidden}\n.ua-hero .ua-scroll .ln2::after{content:\"\";position:absolute;left:0;right:0;top:-40%;height:40%;border-radius:2px;\n  background:linear-gradient(var(--green-bright),transparent);animation:uaScrollDot 1.8s var(--ease) infinite}\n.ua-hero .ua-scroll span.t{font-size:.62rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:rgba(194,204,196,.75)}\n\n\/* responsive *\/\n@media(max-width:820px){\n  .ua-hero{min-height:auto;padding-top:clamp(110px,18vh,150px)}\n  .ua-hero .ua-bg{background-position:70% center}\n  .ua-hero .ua-shade{background:\n    linear-gradient(180deg,rgba(5,8,5,.72),rgba(5,8,5,.55) 40%,rgba(5,8,5,.92)),\n    radial-gradient(600px 400px at 20% 30%,rgba(74,222,128,.12),transparent 60%)}\n  .ua-hero h1{font-size:clamp(2.2rem,9vw,3.4rem)}\n  .ua-hero .ua-scroll{display:none}\n}\n@media(max-width:480px){\n  .ua-hero .ua-ctas{gap:12px}\n  .ua-hero .ua-btn{padding:15px 22px;flex:1 1 auto;justify-content:center}\n}\n\n\/* keyframes *\/\n@keyframes uaBgIn{from{opacity:0;transform:scale(1.14);filter:brightness(.5) saturate(.8)}to{opacity:1;transform:scale(1.06);filter:brightness(1) saturate(1)}}\n@keyframes uaKen{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.13) translate(-1.6%,-1%)}}\n@keyframes uaUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}\n@keyframes uaGrow{from{width:0}to{width:clamp(40px,6vw,90px)}}\n@keyframes uaLine{from{transform:translateY(112%)}to{transform:translateY(0)}}\n@keyframes uaShimmer{from{background-position:120% 0}to{background-position:-120% 0}}\n@keyframes uaSheen{from{transform:translateX(-130%)}to{transform:translateX(130%)}}\n@keyframes uaPip{0%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}70%{box-shadow:0 0 0 12px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}\n@keyframes uaRise{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:var(--op)}88%{opacity:calc(var(--op) * .7)}100%{transform:translateY(-112vh) translateX(var(--dx));opacity:0}}\n@keyframes uaDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,4%) scale(1.1)}}\n@keyframes uaDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,6%) scale(1.15)}}\n@keyframes uaDrift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,-5%) scale(1.08)}}\n@keyframes uaScrollDot{0%{top:-40%}100%{top:120%}}\n@media(prefers-reduced-motion:reduce){\n  .ua-hero *,.ua-hero *::before,.ua-hero *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}\n  .ua-hero .ua-bg{opacity:1;transform:scale(1.02)}\n  .ua-hero h1 .ln > span{transform:none}\n}\n<\/style>\n\n<section class=\"ua-hero\" id=\"ua-hero\">\n  <div class=\"ua-bg\" id=\"ua-bg\" aria-hidden=\"true\"><\/div>\n  <div class=\"ua-aura\" aria-hidden=\"true\"><span class=\"a1\"><\/span><span class=\"a2\"><\/span><span class=\"a3\"><\/span><\/div>\n  <div class=\"ua-shade\" aria-hidden=\"true\"><\/div>\n  <div class=\"ua-fx\" aria-hidden=\"true\">\n      <i style=\"left:20.8%;width:3.6px;height:3.6px;--dx:3.0px;--op:0.51;animation-duration:18.2s;animation-delay:1.0s\"><\/i>\n      <i style=\"left:5.4%;width:5.0px;height:5.0px;--dx:-34.0px;--op:0.39;animation-duration:11.4s;animation-delay:6.1s\"><\/i>\n      <i style=\"left:26.6%;width:6.3px;height:6.3px;--dx:10.0px;--op:0.78;animation-duration:12.4s;animation-delay:3.1s\"><\/i>\n      <i style=\"left:35.5%;width:4.6px;height:4.6px;--dx:29.0px;--op:0.48;animation-duration:21.7s;animation-delay:0.7s\"><\/i>\n      <i style=\"left:10.4%;width:3.5px;height:3.5px;--dx:-26.0px;--op:0.61;animation-duration:14.4s;animation-delay:11.4s\"><\/i>\n      <i style=\"left:39.1%;width:4.5px;height:4.5px;--dx:-35.0px;--op:0.44;animation-duration:17.0s;animation-delay:0.9s\"><\/i>\n      <i style=\"left:41.5%;width:4.7px;height:4.7px;--dx:-4.0px;--op:0.48;animation-duration:14.5s;animation-delay:8.2s\"><\/i>\n      <i style=\"left:48.1%;width:5.8px;height:5.8px;--dx:2.0px;--op:0.74;animation-duration:13.7s;animation-delay:8.0s\"><\/i>\n      <i style=\"left:44.3%;width:4.2px;height:4.2px;--dx:-7.0px;--op:0.69;animation-duration:21.8s;animation-delay:1.7s\"><\/i>\n      <i style=\"left:10.8%;width:5.0px;height:5.0px;--dx:21.0px;--op:0.61;animation-duration:11.4s;animation-delay:9.4s\"><\/i>\n      <i style=\"left:52.8%;width:4.3px;height:4.3px;--dx:6.0px;--op:0.56;animation-duration:18.6s;animation-delay:8.3s\"><\/i>\n      <i style=\"left:50.7%;width:6.8px;height:6.8px;--dx:-35.0px;--op:0.67;animation-duration:16.2s;animation-delay:9.3s\"><\/i>\n      <i style=\"left:39.5%;width:7.0px;height:7.0px;--dx:-9.0px;--op:0.65;animation-duration:20.0s;animation-delay:4.0s\"><\/i>\n      <i style=\"left:3.3%;width:4.8px;height:4.8px;--dx:-35.0px;--op:0.7;animation-duration:12.8s;animation-delay:1.6s\"><\/i>\n      <i style=\"left:9.5%;width:4.0px;height:4.0px;--dx:-34.0px;--op:0.55;animation-duration:15.3s;animation-delay:12.2s\"><\/i>\n      <i style=\"left:33.9%;width:6.5px;height:6.5px;--dx:-18.0px;--op:0.54;animation-duration:20.0s;animation-delay:12.1s\"><\/i>\n  <\/div>\n\n  <div class=\"ua-inner\">\n    <div class=\"ua-col\">\n      <span class=\"ua-eyebrow\">Hello, I'm<\/span>\n      <h1>\n        <span class=\"ln\"><span>Packaging Designer<\/span><\/span>\n        <span class=\"ln\"><span>&amp; <span class=\"g\">Amazon Design<\/span> Specialist<\/span><\/span>\n      <\/h1>\n      <p class=\"ua-lead\">I help brands stand out with premium packaging design and powerful branding solutions that connect, inspire and sell.<\/p>\n\n      <div class=\"ua-ctas\">\n        <a class=\"ua-btn p\" href=\"#portfolio\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"\/><path d=\"M2 13h20\"\/><\/svg>\n          <span>Portfolio<\/span>\n        <\/a>\n        <a class=\"ua-btn s\" href=\"contact.html\">\n          <svg class=\"arw\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 2 11 13\"\/><path d=\"M22 2 15 22l-4-9-9-4Z\"\/><\/svg>\n          <span>Contact Me<\/span>\n        <\/a>\n      <\/div>\n\n      <div class=\"ua-status\">\n        <span class=\"ua-avail\"><span class=\"pip\"><\/span>Available for projects<\/span>\n        <div class=\"ua-tags\">\n          <span class=\"ua-tag\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\/><path d=\"m3.3 7 8.7 5 8.7-5\"\/><path d=\"M12 22V12\"\/><\/svg>Packaging Design<\/span>\n          <span class=\"ua-tag\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"9\" cy=\"21\" r=\"1\"\/><circle cx=\"20\" cy=\"21\" r=\"1\"\/><path d=\"M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6\"\/><\/svg>Amazon Design<\/span>\n          <span class=\"ua-tag\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M2 12h20\"\/><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10Z\"\/><\/svg>Website Design<\/span>\n          <span class=\"ua-tag\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"\/><path d=\"M3 6h18\"\/><path d=\"M16 10a4 4 0 0 1-8 0\"\/><\/svg>Shopify Store Design<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"ua-scroll\" aria-hidden=\"true\"><span class=\"ln2\"><\/span><span class=\"t\">Scroll<\/span><\/div>\n<\/section>\n\n<script>\n(function(){\n  var hero=document.getElementById(\"ua-hero\"),bg=document.getElementById(\"ua-bg\");\n  if(!hero)return;\n  var fine=window.matchMedia&&window.matchMedia(\"(pointer:fine)\").matches;\n  var reduce=window.matchMedia&&window.matchMedia(\"(prefers-reduced-motion:reduce)\").matches;\n  if(!reduce&&fine){\n    \/* background parallax *\/\n    hero.addEventListener(\"mousemove\",function(e){\n      var r=hero.getBoundingClientRect();\n      var x=(e.clientX-r.left)\/r.width-.5,y=(e.clientY-r.top)\/r.height-.5;\n      if(bg)bg.style.transform=\"scale(1.1) translate(\"+(x*-14)+\"px,\"+(y*-10)+\"px)\";\n    });\n    hero.addEventListener(\"mouseleave\",function(){if(bg)bg.style.transform=\"\";});\n    \/* magnetic buttons *\/\n    hero.querySelectorAll(\".ua-btn\").forEach(function(b){\n      b.addEventListener(\"mousemove\",function(e){\n        var r=b.getBoundingClientRect();\n        var x=e.clientX-r.left-r.width\/2,y=e.clientY-r.top-r.height\/2;\n        b.style.transform=\"translate(\"+(x*.25)+\"px,\"+((y*.35)-3)+\"px)\";\n      });\n      b.addEventListener(\"mouseleave\",function(){b.style.transform=\"\";});\n    });\n  }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-24581a50 elementor-section-full_width elementor-section-content-middle elementor-section-height-default elementor-section-height-default\" data-id=\"24581a50\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-26fe72c1\" data-id=\"26fe72c1\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-22c5a52 elementor-widget elementor-widget-html\" data-id=\"22c5a52\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<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=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* ===== Umair Arif - ABOUT ME (scoped .ua-ab) ===== *\/\n.ua-ab,.ua-ab *{box-sizing:border-box}\n.ua-ab{\n  --green:#4ade80;--green-bright:#7cff8f;--green-dim:rgba(74,222,128,.5);\n  --white:#f4f7f4;--muted:#9aa39c;--ease:cubic-bezier(.22,1,.36,1);\n  position:relative;overflow:hidden;width:100%;\n  padding:clamp(70px,10vh,120px) clamp(18px,4vw,60px);\n  font-family:\"Poppins\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif!important;\n  color:var(--white);-webkit-font-smoothing:antialiased;\n  background:radial-gradient(900px 500px at 10% 0%,rgba(74,222,128,.10),transparent 60%),#050805}\n.ua-ab .ua-wrap{position:relative;z-index:2;max-width:1360px;margin:0 auto}\n.ua-ab .ua-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,3.4vw,50px);align-items:stretch}\n\n\/* header *\/\n.ua-ab .ua-eyebrow{display:inline-flex;align-items:center;gap:14px;\n  color:var(--green-bright);font-size:.8rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase}\n.ua-ab .ua-eyebrow::before{content:\"\";width:clamp(28px,4vw,54px);height:1.5px;background:linear-gradient(90deg,transparent,var(--green));box-shadow:0 0 8px var(--green-dim)}\n.ua-ab .ua-eyebrow::after{content:\"\";width:clamp(16px,3vw,34px);height:1.5px;background:linear-gradient(90deg,var(--green),transparent)}\n.ua-ab .ua-eyebrow .d{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}\n.ua-ab h2{margin:12px 0 12px;font-weight:800;font-size:clamp(2.6rem,5.4vw,4.4rem);letter-spacing:-.01em;line-height:1}\n.ua-ab h2 .g{color:var(--green-bright);text-shadow:0 0 28px rgba(124,255,143,.45)}\n.ua-ab h2 .u{display:block;width:70px;height:3px;margin-top:14px;border-radius:3px;background:var(--green);box-shadow:0 0 12px var(--green-dim)}\n.ua-ab .ua-intro{max-width:46ch;margin:0 0 26px;color:var(--muted);font-weight:300;line-height:1.75;font-size:clamp(1rem,1.25vw,1.16rem)}\n\n\/* panels *\/\n.ua-ab .ua-panel{border-radius:22px;padding:clamp(22px,2.4vw,30px);margin-bottom:clamp(16px,2vw,22px);\n  background:linear-gradient(160deg,rgba(20,28,22,.5),rgba(8,12,9,.5));border:1px solid rgba(124,255,143,.12);backdrop-filter:blur(8px);\n  opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}\n.ua-ab.go .ua-panel{opacity:1;transform:none}\n.ua-ab.go .ua-panel:nth-child(3){transition-delay:.1s}.ua-ab.go .ua-panel:nth-child(4){transition-delay:.18s}\n\n\/* features *\/\n.ua-ab .ua-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}\n.ua-ab .ua-fitem .ua-fico{width:44px;height:44px;display:grid;place-content:center;border-radius:12px;margin-bottom:12px;\n  color:var(--green-bright);background:rgba(74,222,128,.07);border:1px solid rgba(124,255,143,.16)}\n.ua-ab .ua-fitem .ua-fico svg{width:22px;height:22px}\n.ua-ab .ua-fitem h4{margin:0 0 6px;font-size:1rem;font-weight:600}\n.ua-ab .ua-fitem p{margin:0;font-size:.86rem;color:var(--muted);font-weight:300;line-height:1.6}\n\n\/* stats *\/\n.ua-ab .ua-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:clamp(24px,2.6vw,32px) clamp(14px,1.8vw,22px)}\n.ua-ab .ua-stat{position:relative;text-align:center}\n.ua-ab .ua-stat:not(:last-child)::after{content:\"\";position:absolute;right:0;top:18%;height:64%;width:1px;background:linear-gradient(transparent,rgba(124,255,143,.2),transparent)}\n.ua-ab .ua-stat .sico{width:48px;height:48px;margin:0 auto 12px;display:grid;place-content:center;color:var(--green-bright)}\n.ua-ab .ua-stat .sico svg{width:26px;height:26px}\n.ua-ab .ua-stat .num{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:800;color:var(--green-bright);line-height:1;text-shadow:0 0 22px rgba(124,255,143,.4)}\n.ua-ab .ua-stat .cap{margin-top:7px;font-size:.8rem;color:var(--muted)}\n.ua-ab .ua-stat .bar{width:30px;height:2.5px;margin:10px auto 0;border-radius:3px;background:var(--green);box-shadow:0 0 8px var(--green-dim);opacity:.8}\n\n\/* what I do *\/\n.ua-ab .ua-wid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}\n.ua-ab .ua-wid h3{margin:0 0 14px;font-size:1.3rem;font-weight:700}\n.ua-ab .ua-wid p{margin:0;font-size:.9rem;color:var(--muted);font-weight:300;line-height:1.7}\n.ua-ab .ua-check{display:grid;gap:14px}\n.ua-ab .ua-check span{display:flex;align-items:center;gap:12px;font-size:.94rem;font-weight:500}\n.ua-ab .ua-check span svg{width:20px;height:20px;color:var(--green-bright);flex:0 0 auto}\n\n\/* right col: image + CTA *\/\n.ua-ab .ua-right{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px);\n  opacity:0;transform:translateY(34px) scale(.98);transition:opacity .9s var(--ease) .15s,transform .9s var(--ease) .15s}\n.ua-ab.go .ua-right{opacity:1;transform:none}\n.ua-ab .ua-frame{position:relative;flex:1;min-height:420px;border-radius:26px;overflow:hidden;\n  border:1px solid rgba(124,255,143,.16);box-shadow:0 40px 90px -34px rgba(0,0,0,.85),0 0 60px -24px rgba(74,222,128,.35)}\n.ua-ab .ua-frame img{display:block;width:100%;height:100%;object-fit:cover;min-height:420px;animation:uaFloat 8s ease-in-out infinite}\n.ua-ab .ua-frame::after{content:\"\";position:absolute;inset:0;background:linear-gradient(180deg,transparent 70%,rgba(5,8,5,.4));pointer-events:none}\n\n.ua-ab .ua-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border-radius:22px;padding:clamp(20px,2.2vw,28px);\n  background:linear-gradient(160deg,rgba(20,28,22,.6),rgba(8,12,9,.6));border:1px solid rgba(124,255,143,.14);backdrop-filter:blur(8px)}\n.ua-ab .ua-cta .cico{width:52px;height:52px;flex:0 0 auto;display:grid;place-content:center;border-radius:14px;\n  color:var(--green-bright);background:rgba(74,222,128,.1);border:1px solid var(--green-dim);\n  box-shadow:0 0 0 0 rgba(74,222,128,.5);animation:uaRing 2.8s ease-out infinite}\n.ua-ab .ua-cta .cico svg{width:24px;height:24px}\n.ua-ab .ua-cta .ctxt{flex:1;min-width:180px}\n.ua-ab .ua-cta .ctxt h4{margin:0 0 4px;font-size:1.15rem;font-weight:700}\n.ua-ab .ua-cta .ctxt p{margin:0;font-size:.86rem;color:var(--muted);font-weight:300;line-height:1.55}\n.ua-ab .ua-cta .cbtn{position:relative;display:inline-flex;align-items:center;gap:10px;overflow:hidden;\n  padding:14px 26px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.86rem;letter-spacing:.04em;\n  color:var(--green-bright);background:rgba(74,222,128,.06);border:1.6px solid var(--green);\n  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}\n.ua-ab .ua-cta .cbtn svg{width:17px;height:17px;transition:transform .35s var(--ease)}\n.ua-ab .ua-cta .cbtn::before{content:\"\";position:absolute;inset:0;pointer-events:none;\n  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.35) 50%,transparent 64%);transform:translateX(-130%)}\n.ua-ab .ua-cta .cbtn:hover{transform:translateY(-3px);box-shadow:0 16px 40px -14px rgba(74,222,128,.8)}\n.ua-ab .ua-cta .cbtn:hover::before{animation:uaSheen .9s ease}\n.ua-ab .ua-cta .cbtn:hover svg{transform:translateX(4px)}\n\n\/* responsive *\/\n@media(max-width:980px){\n  .ua-ab .ua-grid{grid-template-columns:1fr}\n  .ua-ab .ua-right{order:-1}\n  .ua-ab .ua-frame{min-height:360px}\n  .ua-ab .ua-frame img{min-height:360px}\n}\n@media(max-width:640px){\n  .ua-ab .ua-feat{grid-template-columns:1fr 1fr}\n  .ua-ab .ua-stats{grid-template-columns:repeat(2,1fr);gap:22px}\n  .ua-ab .ua-stat:nth-child(2)::after{display:none}\n  .ua-ab .ua-wid{grid-template-columns:1fr}\n}\n@media(max-width:420px){.ua-ab .ua-feat{grid-template-columns:1fr}}\n\n\/* keyframes *\/\n.ua-ab .ua-htxt>*{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}\n.ua-ab.go .ua-htxt>*{opacity:1;transform:none}\n.ua-ab.go .ua-htxt>*:nth-child(2){transition-delay:.08s}.ua-ab.go .ua-htxt>*:nth-child(3){transition-delay:.16s}\n@keyframes uaFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}\n@keyframes uaRing{0%{box-shadow:0 0 0 0 rgba(74,222,128,.45)}70%{box-shadow:0 0 0 12px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}\n@keyframes uaSheen{from{transform:translateX(-130%)}to{transform:translateX(130%)}}\n@media(prefers-reduced-motion:reduce){\n  .ua-ab *,.ua-ab *::before,.ua-ab *::after{animation-duration:.001ms!important;transition-duration:.001ms!important}\n  .ua-ab .ua-panel,.ua-ab .ua-right,.ua-ab .ua-htxt>*{opacity:1!important;transform:none!important}\n}\n<\/style>\n\n<section class=\"ua-ab\" id=\"about\">\n  <div class=\"ua-wrap\">\n    <div class=\"ua-grid\">\n\n      <!-- LEFT -->\n      <div class=\"ua-left\">\n        <div class=\"ua-htxt\">\n          <span class=\"ua-eyebrow\"><span class=\"d\"><\/span>About Me<\/span>\n          <h2>About <span class=\"g\">Me<\/span><span class=\"u\"><\/span><\/h2>\n          <p class=\"ua-intro\">I'm a passionate packaging designer and brand identity expert helping brands stand out and grow in the market.<\/p>\n        <\/div>\n\n        <div class=\"ua-panel\"><div class=\"ua-feat\"><div class=\"ua-fitem\"><span class=\"ua-fico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><circle cx=\"12\" cy=\"12\" r=\"6\"\/><circle cx=\"12\" cy=\"12\" r=\"2\"\/><\/svg><\/span><h4>Goal Oriented<\/h4><p>I focus on delivering designs that align with your goals and drive real results.<\/p><\/div><div class=\"ua-fitem\"><span class=\"ua-fico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 18h6\"\/><path d=\"M10 22h4\"\/><path d=\"M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1h6c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2Z\"\/><\/svg><\/span><h4>Creative Approach<\/h4><p>Creative, innovative and strategic solutions tailored for your brand.<\/p><\/div><div class=\"ua-fitem\"><span class=\"ua-fico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg><\/span><h4>Client Focused<\/h4><p>Your satisfaction is my priority. I work closely with you at every step.<\/p><\/div><div class=\"ua-fitem\"><span class=\"ua-fico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13 2 3 14h9l-1 8 10-12h-9l1-8Z\"\/><\/svg><\/span><h4>Fast & Reliable<\/h4><p>I respect your time and deliver high-quality work within deadlines.<\/p><\/div><div class=\"ua-fitem\"><span class=\"ua-fico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"9\" r=\"6\"\/><path d=\"m9 14-1.5 7L12 18l4.5 3L15 14\"\/><path d=\"m10 8 1.5 1.5L14 7\"\/><\/svg><\/span><h4>Detail Oriented<\/h4><p>Every detail matters. I ensure precision and consistency in every design.<\/p><\/div><div class=\"ua-fitem\"><span class=\"ua-fico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 3v18h18\"\/><path d=\"M7 15v3\"\/><path d=\"M12 11v7\"\/><path d=\"M17 7v11\"\/><\/svg><\/span><h4>Results Driven<\/h4><p>I create designs that not only look great but also boost brand performance.<\/p><\/div><\/div><\/div>\n        <div class=\"ua-panel ua-stats\"><div class=\"ua-stat\"><span class=\"sico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"\/><\/svg><\/span><div class=\"num ua-num\" data-count=\"9\" data-prefix=\"\" data-suffix=\"+\">0+<\/div><div class=\"cap\">Years Experience<\/div><span class=\"bar\"><\/span><\/div><div class=\"ua-stat\"><span class=\"sico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\/><path d=\"m3.3 7 8.7 5 8.7-5\"\/><path d=\"M12 22V12\"\/><\/svg><\/span><div class=\"num ua-num\" data-count=\"3000\" data-prefix=\"\" data-suffix=\"+\">0+<\/div><div class=\"cap\">Projects Completed<\/div><span class=\"bar\"><\/span><\/div><div class=\"ua-stat\"><span class=\"sico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"9\" cy=\"21\" r=\"1\"\/><circle cx=\"20\" cy=\"21\" r=\"1\"\/><path d=\"M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6\"\/><\/svg><\/span><div class=\"num ua-num\" data-count=\"1500\" data-prefix=\"\" data-suffix=\"+\">0+<\/div><div class=\"cap\">Amazon Brands<\/div><span class=\"bar\"><\/span><\/div><div class=\"ua-stat\"><span class=\"sico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"\/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"\/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"\/><\/svg><\/span><div class=\"num ua-num\" data-count=\"98\" data-prefix=\"\" data-suffix=\"%\">0%<\/div><div class=\"cap\">Client Satisfied<\/div><span class=\"bar\"><\/span><\/div><\/div>\n        <div class=\"ua-panel\">\n          <div class=\"ua-wid\">\n            <div><h3>What I Do<\/h3><p>I help businesses of all sizes with creative packaging design, Amazon branding and 3D visualization that connects with their audience and drives sales. From concept to final design, I ensure every project reflects quality, creativity and strategy.<\/p><\/div>\n            <div class=\"ua-check\"><span><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m8 12 2.5 2.5L16 9\"\/><\/svg>Product Packaging Design<\/span><span><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m8 12 2.5 2.5L16 9\"\/><\/svg>Amazon Packaging Design<\/span><span><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m8 12 2.5 2.5L16 9\"\/><\/svg>Amazon Listing &amp; A+ Content<\/span><span><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m8 12 2.5 2.5L16 9\"\/><\/svg>3D Rendering &amp; Visualization<\/span><span><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m8 12 2.5 2.5L16 9\"\/><\/svg>Label Design &amp; Brand Identity<\/span><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- RIGHT -->\n      <div class=\"ua-right\">\n        <div class=\"ua-frame\"><img src=\"https:\/\/umairarif.com\/wp-content\/uploads\/2026\/07\/CEO_portrait_in_office_2K_202607252359-scaled.jpeg\" alt=\"Umair Arif - packaging designer and brand identity expert\" loading=\"lazy\" decoding=\"async\"><\/div>\n        <div class=\"ua-cta\">\n          <span class=\"cico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z\"\/><path d=\"M8 10h.01\"\/><path d=\"M12 10h.01\"\/><path d=\"M16 10h.01\"\/><\/svg><\/span>\n          <div class=\"ctxt\"><h4>Let's Work Together<\/h4><p>Have a project in mind or want to discuss an idea? I'd love to hear from you.<\/p><\/div>\n          <a class=\"cbtn\" href=\"contact.html\"><span>Get In Touch<\/span><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 2 11 13\"\/><path d=\"M22 2 15 22l-4-9-9-4Z\"\/><\/svg><\/a>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  var sec=document.getElementById(\"about\");if(!sec)return;\n  function run(){\n    sec.querySelectorAll(\".ua-num\").forEach(function(el){\n      var end=parseInt(el.getAttribute(\"data-count\"),10)||0;\n      var pre=el.getAttribute(\"data-prefix\")||\"\",suf=el.getAttribute(\"data-suffix\")||\"\";\n      var dur=1700,t0=null;\n      function step(ts){if(!t0)t0=ts;var p=Math.min((ts-t0)\/dur,1);var e=1-Math.pow(1-p,3);\n        el.textContent=pre+Math.round(end*e)+suf;if(p<1)requestAnimationFrame(step);}\n      requestAnimationFrame(step);\n    });\n  }\n  if(\"IntersectionObserver\" in window){\n    var io=new IntersectionObserver(function(en){en.forEach(function(e){if(e.isIntersecting){sec.classList.add(\"go\");run();io.disconnect();}});},{threshold:.15});\n    io.observe(sec);\n  }else{sec.classList.add(\"go\");run();}\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3cdc3138 elementor-section-full_width elementor-section-content-middle elementor-section-height-default elementor-section-height-default\" data-id=\"3cdc3138\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-422c9110\" data-id=\"422c9110\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-587c5d1 elementor-widget elementor-widget-html\" data-id=\"587c5d1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<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=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* ===== Umair Arif - MY SKILLS (scoped .ua-sk) ===== *\/\n.ua-sk,.ua-sk *{box-sizing:border-box}\n.ua-sk{\n  --green:#4ade80;--green-bright:#7cff8f;--green-dim:rgba(74,222,128,.5);\n  --white:#f4f7f4;--muted:#9aa39c;--ease:cubic-bezier(.22,1,.36,1);\n  position:relative;overflow:hidden;width:100%;\n  padding:clamp(70px,10vh,120px) clamp(18px,4vw,60px);\n  font-family:\"Poppins\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif!important;\n  color:var(--white);-webkit-font-smoothing:antialiased;\n  background:radial-gradient(900px 500px at 50% -8%,rgba(74,222,128,.10),transparent 60%),#050805}\n\n.ua-sk .ua-wrap{position:relative;z-index:2;max-width:1360px;margin:0 auto}\n\n\/* header *\/\n.ua-sk .ua-head{text-align:center;margin-bottom:clamp(40px,6vh,66px)}\n.ua-sk .ua-eyebrow{display:inline-flex;align-items:center;gap:14px;\n  color:var(--green-bright);font-size:.8rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase}\n.ua-sk .ua-eyebrow::before,.ua-sk .ua-eyebrow::after{content:\"\";width:clamp(28px,5vw,80px);height:1.5px;\n  background:linear-gradient(90deg,transparent,var(--green));box-shadow:0 0 8px var(--green-dim)}\n.ua-sk .ua-eyebrow::after{background:linear-gradient(90deg,var(--green),transparent)}\n.ua-sk .ua-eyebrow .d{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}\n.ua-sk h2{margin:14px 0 16px;font-weight:800;font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.01em}\n.ua-sk h2 .g{color:var(--green-bright);text-shadow:0 0 28px rgba(124,255,143,.45)}\n.ua-sk .ua-sub{max-width:52ch;margin:0 auto;color:var(--muted);font-weight:300;line-height:1.7;\n  font-size:clamp(.98rem,1.2vw,1.12rem)}\n.ua-sk .ua-uline{width:72px;height:3px;margin:22px auto 0;border-radius:3px;\n  background:linear-gradient(90deg,transparent,var(--green),transparent);box-shadow:0 0 12px var(--green-dim)}\n\n\/* two-card grid *\/\n.ua-sk .ua-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px)}\n.ua-sk .ua-card{position:relative;border-radius:26px;padding:clamp(24px,3vw,38px);\n  background:linear-gradient(160deg,rgba(20,28,22,.6),rgba(8,12,9,.6));\n  border:1px solid rgba(124,255,143,.14);backdrop-filter:blur(10px);\n  box-shadow:0 24px 60px -30px rgba(0,0,0,.8);\n  opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}\n.ua-sk.go .ua-card{opacity:1;transform:none}\n.ua-sk.go .ua-card:nth-child(2){transition-delay:.12s}\n.ua-sk .ua-card:hover{border-color:var(--green-dim)}\n\n.ua-sk .ua-ctitle{display:flex;align-items:center;gap:16px;margin-bottom:26px}\n.ua-sk .ua-cico{width:52px;height:52px;flex:0 0 auto;display:grid;place-content:center;border-radius:50%;\n  color:var(--green-bright);background:rgba(74,222,128,.08);border:1.5px solid var(--green-dim);\n  box-shadow:0 0 0 0 rgba(74,222,128,.5);animation:uaRing 2.6s ease-out infinite}\n.ua-sk .ua-cico svg{width:24px;height:24px}\n.ua-sk .ua-ctitle h3{margin:0;font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:600}\n\n\/* skill bars *\/\n.ua-sk .ua-skill{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:16px;margin:18px 0}\n.ua-sk .ua-sico{width:44px;height:44px;display:grid;place-content:center;border-radius:12px;\n  color:var(--green-bright);background:rgba(74,222,128,.06);border:1px solid rgba(124,255,143,.14)}\n.ua-sk .ua-sico svg{width:20px;height:20px}\n.ua-sk .ua-sbody .lbl{display:block;font-size:.98rem;font-weight:500;margin-bottom:9px}\n.ua-sk .ua-track{position:relative;height:7px;border-radius:20px;background:rgba(255,255,255,.08);overflow:visible}\n.ua-sk .ua-fill{position:relative;height:100%;width:0;border-radius:20px;\n  background:linear-gradient(90deg,#2fae5a,var(--green-bright));box-shadow:0 0 14px rgba(74,222,128,.6);\n  transition:width 1.5s var(--ease)}\n.ua-sk.go .ua-fill{width:var(--w)}\n.ua-sk .ua-fill::after{content:\"\";position:absolute;right:-1px;top:50%;width:11px;height:11px;border-radius:50%;\n  transform:translateY(-50%);background:var(--green-bright);box-shadow:0 0 12px var(--green),0 0 22px var(--green-dim)}\n.ua-sk .ua-pct{font-size:.95rem;font-weight:600;color:var(--green-bright);min-width:44px;text-align:right}\n\n\/* technical tools grid *\/\n.ua-sk .ua-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}\n.ua-sk .ua-tool{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 12px;border-radius:18px;\n  background:rgba(10,14,11,.55);border:1px solid rgba(124,255,143,.12);\n  opacity:0;transform:translateY(22px) scale(.96);\n  transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}\n.ua-sk.go .ua-tool{opacity:1;transform:none}\n.ua-sk.go .ua-tool:nth-child(1){transition-delay:.15s}.ua-sk.go .ua-tool:nth-child(2){transition-delay:.22s}\n.ua-sk.go .ua-tool:nth-child(3){transition-delay:.29s}.ua-sk.go .ua-tool:nth-child(4){transition-delay:.36s}\n.ua-sk.go .ua-tool:nth-child(5){transition-delay:.43s}.ua-sk.go .ua-tool:nth-child(6){transition-delay:.5s}\n.ua-sk .ua-tool:hover{transform:translateY(-6px);border-color:var(--green-dim);background:rgba(74,222,128,.07)}\n.ua-sk .ua-badge{width:60px;height:60px;display:grid;place-content:center;border-radius:15px;\n  font-weight:800;font-size:1.35rem;letter-spacing:.02em;color:var(--green-bright);\n  background:linear-gradient(160deg,rgba(74,222,128,.16),rgba(74,222,128,.04));\n  border:1.5px solid var(--green-dim);box-shadow:inset 0 0 18px rgba(74,222,128,.12);\n  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}\n.ua-sk .ua-tool:hover .ua-badge{transform:scale(1.08);box-shadow:0 0 26px -6px rgba(74,222,128,.7),inset 0 0 18px rgba(74,222,128,.2)}\n.ua-sk .ua-tname{font-size:.92rem;font-weight:500;position:relative;padding-bottom:8px}\n.ua-sk .ua-tname::after{content:\"\";position:absolute;left:50%;bottom:0;transform:translateX(-50%);\n  width:16px;height:2px;border-radius:2px;background:var(--green);box-shadow:0 0 8px var(--green-dim);\n  transition:width .35s var(--ease)}\n.ua-sk .ua-tool:hover .ua-tname::after{width:70%}\n\n\/* stats bar *\/\n.ua-sk .ua-stats{margin-top:clamp(18px,2.4vw,30px);display:grid;grid-template-columns:repeat(4,1fr);\n  gap:10px;border-radius:26px;padding:clamp(26px,3vw,40px) clamp(14px,2vw,26px);\n  background:linear-gradient(160deg,rgba(20,28,22,.5),rgba(8,12,9,.5));\n  border:1px solid rgba(124,255,143,.12);backdrop-filter:blur(10px)}\n.ua-sk .ua-stat{position:relative;text-align:center;padding:6px 10px}\n.ua-sk .ua-stat:not(:last-child)::after{content:\"\";position:absolute;right:0;top:20%;height:60%;width:1px;\n  background:linear-gradient(transparent,rgba(124,255,143,.22),transparent)}\n.ua-sk .ua-stat .ico{width:56px;height:56px;margin:0 auto 14px;display:grid;place-content:center;border-radius:50%;\n  color:var(--green-bright);background:rgba(74,222,128,.08);border:1.5px solid var(--green-dim);\n  box-shadow:0 0 18px -4px rgba(74,222,128,.4)}\n.ua-sk .ua-stat .ico svg{width:26px;height:26px}\n.ua-sk .ua-stat .num{font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:800;color:var(--green-bright);line-height:1;\n  text-shadow:0 0 26px rgba(124,255,143,.4)}\n.ua-sk .ua-stat .cap{margin-top:8px;font-size:.86rem;color:var(--muted);font-weight:400}\n.ua-sk .ua-stat .bar{width:34px;height:3px;margin:12px auto 0;border-radius:3px;background:var(--green);\n  box-shadow:0 0 8px var(--green-dim);opacity:.8}\n\n\/* responsive *\/\n@media(max-width:900px){\n  .ua-sk .ua-cards{grid-template-columns:1fr}\n  .ua-sk .ua-stats{grid-template-columns:repeat(2,1fr);gap:20px}\n  .ua-sk .ua-stat:nth-child(2)::after{display:none}\n}\n@media(max-width:480px){\n  .ua-sk .ua-tools{grid-template-columns:repeat(2,1fr)}\n  .ua-sk .ua-skill{grid-template-columns:36px 1fr auto;gap:12px}\n  .ua-sk .ua-sico{width:36px;height:36px}\n}\n\n\/* keyframes *\/\n.ua-sk .ua-head>*{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}\n.ua-sk.go .ua-head>*{opacity:1;transform:none}\n.ua-sk.go .ua-head>*:nth-child(2){transition-delay:.08s}\n.ua-sk.go .ua-head>*:nth-child(3){transition-delay:.16s}\n.ua-sk.go .ua-head>*:nth-child(4){transition-delay:.24s}\n@keyframes uaRing{0%{box-shadow:0 0 0 0 rgba(74,222,128,.45)}70%{box-shadow:0 0 0 12px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}\n@media(prefers-reduced-motion:reduce){\n  .ua-sk *,.ua-sk *::before,.ua-sk *::after{animation-duration:.001ms!important;transition-duration:.001ms!important}\n  .ua-sk .ua-fill{width:var(--w)!important}.ua-sk .ua-card,.ua-sk .ua-tool,.ua-sk .ua-head>*{opacity:1!important;transform:none!important}\n}\n<\/style>\n\n<section class=\"ua-sk\" id=\"skills\">\n  <div class=\"ua-wrap\">\n    <div class=\"ua-head\">\n      <span class=\"ua-eyebrow\"><span class=\"d\"><\/span>My Expertise<\/span>\n      <h2>My <span class=\"g\">Skills<\/span><\/h2>\n      <p class=\"ua-sub\">I combine creativity, strategy and design thinking to craft meaningful digital experiences.<\/p>\n      <span class=\"ua-uline\"><\/span>\n    <\/div>\n\n    <div class=\"ua-cards\">\n      <div class=\"ua-card\">\n        <div class=\"ua-ctitle\"><span class=\"ua-cico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"4\"\/><path d=\"M4 21a8 8 0 0 1 16 0\"\/><\/svg><\/span><h3>Professional Skills<\/h3><\/div>\n        \n        <div class=\"ua-skill\">\n          <span class=\"ua-sico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\/><path d=\"m3.3 7 8.7 5 8.7-5\"\/><path d=\"M12 22V12\"\/><\/svg><\/span>\n          <div class=\"ua-sbody\"><span class=\"lbl\">Product packaging design<\/span>\n            <div class=\"ua-track\"><div class=\"ua-fill\" style=\"--w:95%\"><\/div><\/div>\n          <\/div>\n          <span class=\"ua-pct ua-num\" data-count=\"95\" data-suffix=\"%\">0%<\/span>\n        <\/div>\n        <div class=\"ua-skill\">\n          <span class=\"ua-sico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"9\" cy=\"21\" r=\"1\"\/><circle cx=\"20\" cy=\"21\" r=\"1\"\/><path d=\"M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6\"\/><\/svg><\/span>\n          <div class=\"ua-sbody\"><span class=\"lbl\">Amazon packaging designer<\/span>\n            <div class=\"ua-track\"><div class=\"ua-fill\" style=\"--w:92%\"><\/div><\/div>\n          <\/div>\n          <span class=\"ua-pct ua-num\" data-count=\"92\" data-suffix=\"%\">0%<\/span>\n        <\/div>\n        <div class=\"ua-skill\">\n          <span class=\"ua-sico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"9\" cy=\"21\" r=\"1\"\/><circle cx=\"20\" cy=\"21\" r=\"1\"\/><path d=\"M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6\"\/><\/svg><\/span>\n          <div class=\"ua-sbody\"><span class=\"lbl\">Amazon Designing<\/span>\n            <div class=\"ua-track\"><div class=\"ua-fill\" style=\"--w:90%\"><\/div><\/div>\n          <\/div>\n          <span class=\"ua-pct ua-num\" data-count=\"90\" data-suffix=\"%\">0%<\/span>\n        <\/div>\n        <div class=\"ua-skill\">\n          <span class=\"ua-sico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\/><path d=\"m3.3 7 8.7 5 8.7-5\"\/><path d=\"M12 22V12\"\/><\/svg><\/span>\n          <div class=\"ua-sbody\"><span class=\"lbl\">3D rendering<\/span>\n            <div class=\"ua-track\"><div class=\"ua-fill\" style=\"--w:88%\"><\/div><\/div>\n          <\/div>\n          <span class=\"ua-pct ua-num\" data-count=\"88\" data-suffix=\"%\">0%<\/span>\n        <\/div>\n        <div class=\"ua-skill\">\n          <span class=\"ua-sico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.6 2.6A2 2 0 0 0 11.2 2H4a2 2 0 0 0-2 2v7.2a2 2 0 0 0 .6 1.4l8.8 8.8a2 2 0 0 0 2.8 0l6.8-6.8a2 2 0 0 0 0-2.8Z\"\/><circle cx=\"7.5\" cy=\"7.5\" r=\"1.2\"\/><\/svg><\/span>\n          <div class=\"ua-sbody\"><span class=\"lbl\">Label designer<\/span>\n            <div class=\"ua-track\"><div class=\"ua-fill\" style=\"--w:93%\"><\/div><\/div>\n          <\/div>\n          <span class=\"ua-pct ua-num\" data-count=\"93\" data-suffix=\"%\">0%<\/span>\n        <\/div>\n      <\/div>\n      <div class=\"ua-card\">\n        <div class=\"ua-ctitle\"><span class=\"ua-cico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m8 8-4 4 4 4\"\/><path d=\"m16 8 4 4-4 4\"\/><path d=\"m13 5-2 14\"\/><\/svg><\/span><h3>Technical Skills<\/h3><\/div>\n        <div class=\"ua-tools\">\n          <div class=\"ua-tool\"><span class=\"ua-badge\">Ps<\/span><span class=\"ua-tname\">Photoshop<\/span><\/div>\n          <div class=\"ua-tool\"><span class=\"ua-badge\">Ai<\/span><span class=\"ua-tname\">Illustrator<\/span><\/div>\n          <div class=\"ua-tool\"><span class=\"ua-badge\">Fi<\/span><span class=\"ua-tname\">Figma<\/span><\/div>\n          <div class=\"ua-tool\"><span class=\"ua-badge\">Bl<\/span><span class=\"ua-tname\">Blender<\/span><\/div>\n          <div class=\"ua-tool\"><span class=\"ua-badge\">Sh<\/span><span class=\"ua-tname\">Shopify<\/span><\/div>\n          <div class=\"ua-tool\"><span class=\"ua-badge\">Wp<\/span><span class=\"ua-tname\">WordPress<\/span><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"ua-stats\">\n        <div class=\"ua-stat\"><span class=\"ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"\/><\/svg><\/span>\n          <div class=\"num ua-num\" data-count=\"9\" data-suffix=\"+\">0+<\/div>\n          <div class=\"cap\">Years Experience<\/div><span class=\"bar\"><\/span>\n        <\/div>\n        <div class=\"ua-stat\"><span class=\"ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9L9.6 3.9A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\"\/><\/svg><\/span>\n          <div class=\"num ua-num\" data-count=\"3000\" data-suffix=\"+\">0+<\/div>\n          <div class=\"cap\">Projects Completed<\/div><span class=\"bar\"><\/span>\n        <\/div>\n        <div class=\"ua-stat\"><span class=\"ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"9\" cy=\"21\" r=\"1\"\/><circle cx=\"20\" cy=\"21\" r=\"1\"\/><path d=\"M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6\"\/><\/svg><\/span>\n          <div class=\"num ua-num\" data-count=\"1500\" data-suffix=\"+\">0+<\/div>\n          <div class=\"cap\">Amazon Brands<\/div><span class=\"bar\"><\/span>\n        <\/div>\n        <div class=\"ua-stat\"><span class=\"ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.9\"\/><path d=\"M16 3.1a4 4 0 0 1 0 7.8\"\/><\/svg><\/span>\n          <div class=\"num ua-num\" data-count=\"98\" data-suffix=\"%\">0%<\/div>\n          <div class=\"cap\">Client Satisfied<\/div><span class=\"bar\"><\/span>\n        <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  var sec=document.getElementById(\"skills\");if(!sec)return;\n  function animateNums(){\n    sec.querySelectorAll(\".ua-num\").forEach(function(el){\n      var end=parseInt(el.getAttribute(\"data-count\"),10)||0;\n      var suf=el.getAttribute(\"data-suffix\")||\"\";\n      var dur=1600,t0=null;\n      function step(ts){\n        if(!t0)t0=ts;var p=Math.min((ts-t0)\/dur,1);\n        var e=1-Math.pow(1-p,3);\n        el.textContent=Math.round(end*e)+suf;\n        if(p<1)requestAnimationFrame(step);\n      }\n      requestAnimationFrame(step);\n    });\n  }\n  if(\"IntersectionObserver\" in window){\n    var io=new IntersectionObserver(function(en){\n      en.forEach(function(e){if(e.isIntersecting){sec.classList.add(\"go\");animateNums();io.disconnect();}});\n    },{threshold:.25});\n    io.observe(sec);\n  }else{sec.classList.add(\"go\");animateNums();}\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2289974f elementor-section-full_width elementor-section-content-middle elementor-section-height-default elementor-section-height-default\" data-id=\"2289974f\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-12a673f1\" data-id=\"12a673f1\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4900a93f elementor-widget elementor-widget-html\" data-id=\"4900a93f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<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=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* ===== Umair Arif - PORTFOLIO (scoped .ua-pf) ===== *\/\n.ua-pf,.ua-pf *{box-sizing:border-box}\n.ua-pf{\n  --green:#4ade80;--green-bright:#7cff8f;--green-dim:rgba(74,222,128,.5);\n  --white:#f4f7f4;--muted:#9aa39c;--ease:cubic-bezier(.22,1,.36,1);\n  position:relative;overflow:hidden;width:100%;\n  padding:clamp(70px,10vh,120px) clamp(18px,4vw,60px);\n  font-family:\"Poppins\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif!important;\n  color:var(--white);-webkit-font-smoothing:antialiased;\n  background:radial-gradient(900px 500px at 50% -8%,rgba(74,222,128,.10),transparent 60%),#050805}\n.ua-pf .ua-wrap{position:relative;z-index:2;max-width:1360px;margin:0 auto}\n\n\/* header *\/\n.ua-pf .ua-head{text-align:center;margin-bottom:clamp(30px,4vh,44px)}\n.ua-pf .ua-eyebrow{display:inline-flex;align-items:center;gap:14px;\n  color:var(--green-bright);font-size:.8rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase}\n.ua-pf .ua-eyebrow::before,.ua-pf .ua-eyebrow::after{content:\"\";width:clamp(28px,5vw,80px);height:1.5px;\n  background:linear-gradient(90deg,transparent,var(--green));box-shadow:0 0 8px var(--green-dim)}\n.ua-pf .ua-eyebrow::after{background:linear-gradient(90deg,var(--green),transparent)}\n.ua-pf .ua-eyebrow .d{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}\n.ua-pf h2{margin:14px 0 16px;font-weight:800;font-size:clamp(2.4rem,5.2vw,4.2rem);letter-spacing:-.01em}\n.ua-pf h2 .g{color:var(--green-bright);text-shadow:0 0 28px rgba(124,255,143,.45)}\n.ua-pf .ua-sub{max-width:56ch;margin:0 auto 4px;color:var(--muted);font-weight:300;line-height:1.7;\n  font-size:clamp(.98rem,1.2vw,1.12rem)}\n\n\/* filters *\/\n.ua-pf .ua-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:clamp(26px,4vh,40px) 0}\n.ua-pf .ua-fbtn{padding:12px 24px;border-radius:999px;cursor:pointer;font-size:.9rem;font-weight:500;\n  color:var(--muted);background:rgba(10,14,11,.5);border:1px solid rgba(124,255,143,.14);\n  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}\n.ua-pf .ua-fbtn:hover{color:var(--white);border-color:var(--green-dim)}\n.ua-pf .ua-fbtn.active{color:var(--green-bright);border-color:var(--green);\n  background:rgba(74,222,128,.08);box-shadow:0 0 18px -6px rgba(74,222,128,.6)}\n\n\/* grid *\/\n.ua-pf .ua-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}\n.ua-pf .ua-card{position:relative;display:block;text-decoration:none;border-radius:22px;overflow:hidden;\n  background:rgba(10,14,11,.6);border:1px solid rgba(124,255,143,.12);\n  opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}\n.ua-pf.go .ua-card{opacity:1;transform:none}\n.ua-pf.go .ua-card:nth-child(2){transition-delay:.06s}.ua-pf.go .ua-card:nth-child(3){transition-delay:.12s}\n.ua-pf.go .ua-card:nth-child(4){transition-delay:.18s}.ua-pf.go .ua-card:nth-child(5){transition-delay:.24s}\n.ua-pf.go .ua-card:nth-child(6){transition-delay:.3s}\n.ua-pf .ua-card:hover{transform:translateY(-8px);border-color:var(--green-dim);\n  box-shadow:0 30px 60px -28px rgba(0,0,0,.9),0 0 40px -18px rgba(74,222,128,.5)}\n.ua-pf .ua-card.hide{display:none}\n.ua-pf .ua-card.pop{animation:uaPop .55s var(--ease) both}\n\n\/* media (replace background-image url with your project image) *\/\n.ua-pf .ua-media{position:relative;height:230px;display:grid;place-content:center;\n  background-size:cover;background-position:center;transition:transform .5s var(--ease)}\n.ua-pf .ua-card:hover .ua-media{transform:scale(1.05)}\n.ua-pf .ua-media::after{content:\"\";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,8,5,.55))}\n.ua-pf .ua-wm{position:relative;z-index:1;font-weight:700;font-size:1.5rem;letter-spacing:.02em;\n  color:rgba(244,247,244,.35);text-transform:uppercase}\n\n\/* footer strip *\/\n.ua-pf .ua-foot{display:flex;align-items:center;gap:14px;padding:18px 20px}\n.ua-pf .ua-pico{width:40px;height:40px;flex:0 0 auto;display:grid;place-content:center;border-radius:11px;\n  color:var(--green-bright);background:rgba(74,222,128,.08);border:1px solid rgba(124,255,143,.16)}\n.ua-pf .ua-pico svg{width:19px;height:19px}\n.ua-pf .ua-meta{flex:1;min-width:0}\n.ua-pf .ua-meta .t{display:block;font-size:1rem;font-weight:600;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.ua-pf .ua-meta .c{display:block;font-size:.82rem;color:var(--muted);margin-top:2px}\n.ua-pf .ua-ext{width:38px;height:38px;flex:0 0 auto;display:grid;place-content:center;border-radius:10px;\n  color:var(--green-bright);border:1px solid rgba(124,255,143,.14);transition:transform .3s var(--ease),background .3s var(--ease)}\n.ua-pf .ua-ext svg{width:17px;height:17px}\n.ua-pf .ua-card:hover .ua-ext{background:rgba(74,222,128,.12);transform:translate(2px,-2px)}\n\n\/* view all *\/\n.ua-pf .ua-all{text-align:center;margin-top:clamp(36px,5vh,54px)}\n.ua-pf .ua-allbtn{position:relative;display:inline-flex;align-items:center;gap:12px;overflow:hidden;\n  padding:16px 34px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.9rem;letter-spacing:.06em;\n  color:var(--green-bright);background:rgba(74,222,128,.06);border:1.6px solid var(--green);\n  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}\n.ua-pf .ua-allbtn svg{width:19px;height:19px;transition:transform .35s var(--ease)}\n.ua-pf .ua-allbtn::before{content:\"\";position:absolute;inset:0;pointer-events:none;\n  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.35) 50%,transparent 64%);transform:translateX(-130%)}\n.ua-pf .ua-allbtn:hover{transform:translateY(-3px);box-shadow:0 16px 40px -14px rgba(74,222,128,.8)}\n.ua-pf .ua-allbtn:hover::before{animation:uaSheen .9s ease}\n.ua-pf .ua-allbtn:hover svg{transform:translateX(5px)}\n\n\/* responsive *\/\n@media(max-width:1000px){.ua-pf .ua-grid{grid-template-columns:repeat(2,1fr)}}\n@media(max-width:620px){.ua-pf .ua-grid{grid-template-columns:1fr}}\n\n\/* keyframes *\/\n.ua-pf .ua-head>*{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}\n.ua-pf.go .ua-head>*{opacity:1;transform:none}\n.ua-pf.go .ua-head>*:nth-child(2){transition-delay:.08s}\n.ua-pf.go .ua-head>*:nth-child(3){transition-delay:.16s}\n.ua-pf .ua-filters{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease) .2s,transform .7s var(--ease) .2s}\n.ua-pf.go .ua-filters{opacity:1;transform:none}\n@keyframes uaPop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}\n@keyframes uaSheen{from{transform:translateX(-130%)}to{transform:translateX(130%)}}\n@media(prefers-reduced-motion:reduce){\n  .ua-pf *,.ua-pf *::before,.ua-pf *::after{animation-duration:.001ms!important;transition-duration:.001ms!important}\n  .ua-pf .ua-card,.ua-pf .ua-head>*,.ua-pf .ua-filters{opacity:1!important;transform:none!important}\n}\n<\/style>\n\n<section class=\"ua-pf\" id=\"portfolio\">\n  <div class=\"ua-wrap\">\n    <div class=\"ua-head\">\n      <span class=\"ua-eyebrow\"><span class=\"d\"><\/span>My Work<\/span>\n      <h2>My <span class=\"g\">Portfolio<\/span><\/h2>\n      <p class=\"ua-sub\">Explore a selection of my recent projects. Each design is crafted with creativity, strategy and attention to detail.<\/p>\n    <\/div>\n\n    <div class=\"ua-filters\"><button class=\"ua-fbtn active\" data-filter=\"all\">All Projects<\/button><button class=\"ua-fbtn\" data-filter=\"packaging\">Packaging Design<\/button><button class=\"ua-fbtn\" data-filter=\"label\">Label Design<\/button><button class=\"ua-fbtn\" data-filter=\"amazon\">Amazon Design<\/button><button class=\"ua-fbtn\" data-filter=\"3d\">3D Rendering<\/button><\/div>\n\n    <div class=\"ua-grid\" id=\"ua-grid\">\n        <!-- PROJECT CARD (copy this block to add a new project; edit image, title, category, data-cat) -->\n        <a class=\"ua-card\" data-cat=\"packaging 3d\" href=\"https:\/\/www.behance.net\/UmairArif\" target=\"_blank\" rel=\"noopener\" aria-label=\"OrbiDogs Probiotic Chews - view on Behance\">\n          <div class=\"ua-media\" style=\"background-image:linear-gradient(160deg,#0f2318,#1c3d28)\"><span class=\"ua-wm\">OrbiDogs<\/span><\/div>\n          <div class=\"ua-foot\">\n            <span class=\"ua-pico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\/><path d=\"m3.3 7 8.7 5 8.7-5\"\/><path d=\"M12 22V12\"\/><\/svg><\/span>\n            <div class=\"ua-meta\"><span class=\"t\">OrbiDogs Probiotic Chews<\/span><span class=\"c\">Packaging Design<\/span><\/div>\n            <span class=\"ua-ext\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 3h6v6\"\/><path d=\"M10 14 21 3\"\/><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/><\/svg><\/span>\n          <\/div>\n        <\/a>\n        <!-- PROJECT CARD (copy this block to add a new project; edit image, title, category, data-cat) -->\n        <a class=\"ua-card\" data-cat=\"packaging label\" href=\"https:\/\/www.behance.net\/UmairArif\" target=\"_blank\" rel=\"noopener\" aria-label=\"AQUORA Herbal Tea - view on Behance\">\n          <div class=\"ua-media\" style=\"background-image:linear-gradient(160deg,#0c2620,#12463a)\"><span class=\"ua-wm\">Aquora<\/span><\/div>\n          <div class=\"ua-foot\">\n            <span class=\"ua-pico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\/><path d=\"m3.3 7 8.7 5 8.7-5\"\/><path d=\"M12 22V12\"\/><\/svg><\/span>\n            <div class=\"ua-meta\"><span class=\"t\">AQUORA Herbal Tea<\/span><span class=\"c\">Packaging Design<\/span><\/div>\n            <span class=\"ua-ext\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 3h6v6\"\/><path d=\"M10 14 21 3\"\/><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/><\/svg><\/span>\n          <\/div>\n        <\/a>\n        <!-- PROJECT CARD (copy this block to add a new project; edit image, title, category, data-cat) -->\n        <a class=\"ua-card\" data-cat=\"packaging amazon\" href=\"https:\/\/www.behance.net\/UmairArif\" target=\"_blank\" rel=\"noopener\" aria-label=\"DailyStrips Sleep Strip - view on Behance\">\n          <div class=\"ua-media\" style=\"background-image:linear-gradient(160deg,#1a1230,#2c1b48)\"><span class=\"ua-wm\">DailyStrips<\/span><\/div>\n          <div class=\"ua-foot\">\n            <span class=\"ua-pico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\/><path d=\"m3.3 7 8.7 5 8.7-5\"\/><path d=\"M12 22V12\"\/><\/svg><\/span>\n            <div class=\"ua-meta\"><span class=\"t\">DailyStrips Sleep Strip<\/span><span class=\"c\">Packaging Design<\/span><\/div>\n            <span class=\"ua-ext\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 3h6v6\"\/><path d=\"M10 14 21 3\"\/><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/><\/svg><\/span>\n          <\/div>\n        <\/a>\n        <!-- PROJECT CARD (copy this block to add a new project; edit image, title, category, data-cat) -->\n        <a class=\"ua-card\" data-cat=\"packaging 3d amazon\" href=\"https:\/\/www.behance.net\/UmairArif\" target=\"_blank\" rel=\"noopener\" aria-label=\"Voltix 65W Charger - view on Behance\">\n          <div class=\"ua-media\" style=\"background-image:linear-gradient(160deg,#0d1a12,#173521)\"><span class=\"ua-wm\">Voltix<\/span><\/div>\n          <div class=\"ua-foot\">\n            <span class=\"ua-pico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\/><path d=\"m3.3 7 8.7 5 8.7-5\"\/><path d=\"M12 22V12\"\/><\/svg><\/span>\n            <div class=\"ua-meta\"><span class=\"t\">Voltix 65W Charger<\/span><span class=\"c\">Packaging Design<\/span><\/div>\n            <span class=\"ua-ext\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 3h6v6\"\/><path d=\"M10 14 21 3\"\/><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/><\/svg><\/span>\n          <\/div>\n        <\/a>\n        <!-- PROJECT CARD (copy this block to add a new project; edit image, title, category, data-cat) -->\n        <a class=\"ua-card\" data-cat=\"packaging label\" href=\"https:\/\/www.behance.net\/UmairArif\" target=\"_blank\" rel=\"noopener\" aria-label=\"FuelCore Whey Protein - view on Behance\">\n          <div class=\"ua-media\" style=\"background-image:linear-gradient(160deg,#231610,#3d2618)\"><span class=\"ua-wm\">FuelCore<\/span><\/div>\n          <div class=\"ua-foot\">\n            <span class=\"ua-pico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\/><path d=\"m3.3 7 8.7 5 8.7-5\"\/><path d=\"M12 22V12\"\/><\/svg><\/span>\n            <div class=\"ua-meta\"><span class=\"t\">FuelCore Whey Protein<\/span><span class=\"c\">Packaging &amp; Label Design<\/span><\/div>\n            <span class=\"ua-ext\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 3h6v6\"\/><path d=\"M10 14 21 3\"\/><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/><\/svg><\/span>\n          <\/div>\n        <\/a>\n        <!-- PROJECT CARD (copy this block to add a new project; edit image, title, category, data-cat) -->\n        <a class=\"ua-card\" data-cat=\"packaging 3d\" href=\"https:\/\/www.behance.net\/UmairArif\" target=\"_blank\" rel=\"noopener\" aria-label=\"LUX&Eacute;A Radiance Serum - view on Behance\">\n          <div class=\"ua-media\" style=\"background-image:linear-gradient(160deg,#161d10,#2a361b)\"><span class=\"ua-wm\">Lux&eacute;a<\/span><\/div>\n          <div class=\"ua-foot\">\n            <span class=\"ua-pico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\/><path d=\"m3.3 7 8.7 5 8.7-5\"\/><path d=\"M12 22V12\"\/><\/svg><\/span>\n            <div class=\"ua-meta\"><span class=\"t\">LUX&Eacute;A Radiance Serum<\/span><span class=\"c\">Packaging Design<\/span><\/div>\n            <span class=\"ua-ext\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 3h6v6\"\/><path d=\"M10 14 21 3\"\/><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/><\/svg><\/span>\n          <\/div>\n        <\/a>\n    <\/div>\n\n    <div class=\"ua-all\">\n      <a class=\"ua-allbtn\" href=\"https:\/\/www.behance.net\/UmairArif\" target=\"_blank\" rel=\"noopener\"><span>View All Projects<\/span><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg><\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  var sec=document.getElementById(\"portfolio\");if(!sec)return;\n  var grid=document.getElementById(\"ua-grid\");\n  var cards=grid.querySelectorAll(\".ua-card\");\n  var btns=sec.querySelectorAll(\".ua-fbtn\");\n  btns.forEach(function(b){\n    b.addEventListener(\"click\",function(){\n      btns.forEach(function(x){x.classList.remove(\"active\");});\n      b.classList.add(\"active\");\n      var f=b.getAttribute(\"data-filter\");\n      cards.forEach(function(c){\n        var cats=c.getAttribute(\"data-cat\")||\"\";\n        var show=(f===\"all\"||cats.indexOf(f)>-1);\n        c.classList.toggle(\"hide\",!show);\n        if(show){c.classList.remove(\"pop\");void c.offsetWidth;c.classList.add(\"pop\");}\n      });\n    });\n  });\n  if(\"IntersectionObserver\" in window){\n    var io=new IntersectionObserver(function(en){\n      en.forEach(function(e){if(e.isIntersecting){sec.classList.add(\"go\");io.disconnect();}});\n    },{threshold:.15});\n    io.observe(sec);\n  }else{sec.classList.add(\"go\");}\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-68c20a5a elementor-section-full_width elementor-section-content-middle elementor-section-height-default elementor-section-height-default\" data-id=\"68c20a5a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-38ccbce6\" data-id=\"38ccbce6\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2c2931e8 elementor-widget elementor-widget-html\" data-id=\"2c2931e8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<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=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:wght@600&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* ===== Umair Arif - ACHIEVEMENTS (scoped .ua-ac) ===== *\/\n.ua-ac,.ua-ac *{box-sizing:border-box}\n.ua-ac{\n  --green:#4ade80;--green-bright:#7cff8f;--green-dim:rgba(74,222,128,.5);\n  --white:#f4f7f4;--muted:#9aa39c;--ease:cubic-bezier(.22,1,.36,1);\n  position:relative;overflow:hidden;width:100%;\n  padding:clamp(70px,10vh,120px) clamp(18px,4vw,60px);\n  font-family:\"Poppins\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif!important;\n  color:var(--white);-webkit-font-smoothing:antialiased;\n  background:radial-gradient(900px 500px at 50% -8%,rgba(74,222,128,.10),transparent 60%),#050805}\n.ua-ac .ua-wrap{position:relative;z-index:2;max-width:1360px;margin:0 auto}\n\n\/* header *\/\n.ua-ac .ua-head{text-align:center;margin-bottom:clamp(38px,5vh,58px)}\n.ua-ac .ua-eyebrow{display:inline-flex;align-items:center;gap:14px;\n  color:var(--green-bright);font-size:.8rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase}\n.ua-ac .ua-eyebrow::before,.ua-ac .ua-eyebrow::after{content:\"\";width:clamp(28px,5vw,80px);height:1.5px;\n  background:linear-gradient(90deg,transparent,var(--green));box-shadow:0 0 8px var(--green-dim)}\n.ua-ac .ua-eyebrow::after{background:linear-gradient(90deg,var(--green),transparent)}\n.ua-ac .ua-eyebrow .d{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}\n.ua-ac h2{margin:14px 0 16px;font-weight:800;font-size:clamp(2.4rem,5.4vw,4.4rem);letter-spacing:-.01em}\n.ua-ac h2 .g{color:var(--green-bright);text-shadow:0 0 28px rgba(124,255,143,.45)}\n.ua-ac .ua-sub{max-width:52ch;margin:0 auto;color:var(--muted);font-weight:300;line-height:1.7;font-size:clamp(.98rem,1.2vw,1.12rem)}\n.ua-ac .ua-uline{width:72px;height:3px;margin:22px auto 0;border-radius:3px;\n  background:linear-gradient(90deg,transparent,var(--green),transparent);box-shadow:0 0 12px var(--green-dim)}\n\n\/* achievement cards *\/\n.ua-ac .ua-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px)}\n.ua-ac .ua-card{position:relative;text-align:center;border-radius:24px;padding:clamp(26px,2.6vw,38px) clamp(18px,2vw,26px);\n  background:linear-gradient(160deg,rgba(20,28,22,.55),rgba(8,12,9,.55));\n  border:1px solid rgba(124,255,143,.12);backdrop-filter:blur(8px);\n  opacity:0;transform:translateY(32px);transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}\n.ua-ac.go .ua-card{opacity:1;transform:none}\n.ua-ac.go .ua-card:nth-child(2){transition-delay:.1s}.ua-ac.go .ua-card:nth-child(3){transition-delay:.2s}.ua-ac.go .ua-card:nth-child(4){transition-delay:.3s}\n.ua-ac .ua-card:hover{transform:translateY(-6px);border-color:var(--green-dim);box-shadow:0 26px 60px -30px rgba(0,0,0,.9),0 0 34px -16px rgba(74,222,128,.4)}\n.ua-ac .ua-cico{width:74px;height:74px;margin:0 auto 22px;display:grid;place-content:center;border-radius:50%;\n  color:var(--green-bright);background:rgba(74,222,128,.06);border:1.5px solid var(--green-dim);\n  box-shadow:0 0 0 0 rgba(74,222,128,.5);animation:uaRing 2.8s ease-out infinite}\n.ua-ac .ua-cico svg{width:32px;height:32px}\n.ua-ac .ua-num{font-size:clamp(2rem,3.4vw,2.9rem);font-weight:800;color:var(--green-bright);line-height:1;\n  text-shadow:0 0 26px rgba(124,255,143,.4)}\n.ua-ac .ua-clabel{margin-top:10px;font-size:1.02rem;font-weight:600}\n.ua-ac .ua-cdesc{margin-top:12px;font-size:.9rem;color:var(--muted);font-weight:300;line-height:1.6}\n\n\/* trusted panel *\/\n.ua-ac .ua-panel{margin-top:clamp(18px,2.4vw,28px);border-radius:26px;padding:clamp(28px,3vw,44px);\n  background:linear-gradient(160deg,rgba(20,28,22,.5),rgba(8,12,9,.5));border:1px solid rgba(124,255,143,.12);backdrop-filter:blur(8px);\n  opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease) .1s,transform .8s var(--ease) .1s}\n.ua-ac.go .ua-panel{opacity:1;transform:none}\n.ua-ac .ua-peyebrow{display:flex;align-items:center;justify-content:center;gap:12px;\n  color:var(--green-bright);font-size:.74rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;text-align:center}\n.ua-ac .ua-peyebrow::before,.ua-ac .ua-peyebrow::after{content:\"\";width:clamp(20px,4vw,60px);height:1.5px;background:linear-gradient(90deg,transparent,var(--green))}\n.ua-ac .ua-peyebrow::after{background:linear-gradient(90deg,var(--green),transparent)}\n.ua-ac .ua-ptxt{text-align:center;color:var(--muted);font-weight:300;margin:12px 0 26px}\n.ua-ac .ua-logos{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:10px}\n.ua-ac .ua-logo{position:relative;text-align:center;padding:10px 8px;color:rgba(244,247,244,.72);\n  transition:color .35s var(--ease),transform .35s var(--ease);cursor:default}\n.ua-ac .ua-logo:not(:last-child)::after{content:\"\";position:absolute;right:0;top:22%;height:56%;width:1px;background:linear-gradient(transparent,rgba(124,255,143,.2),transparent)}\n.ua-ac .ua-logo:hover{color:var(--green-bright);transform:translateY(-3px)}\n.ua-ac .ua-logo .l1{font-weight:800;font-size:clamp(1.05rem,1.6vw,1.35rem);letter-spacing:.04em;line-height:1.05}\n.ua-ac .ua-logo .l2{display:block;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;margin-top:4px;opacity:.85}\n.ua-ac .ua-logo.serif .l1{font-family:\"Playfair Display\",Georgia,serif;letter-spacing:.14em;font-weight:600}\n\n\/* recommended panel *\/\n.ua-ac .ua-rec{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,44px);align-items:center}\n.ua-ac .ua-rec-l{display:flex;align-items:center;gap:20px}\n.ua-ac .ua-avatar{position:relative;width:110px;height:110px;flex:0 0 auto;border-radius:50%;\n  background:linear-gradient(150deg,#16301f,#0b1610);border:2px solid var(--green);\n  box-shadow:0 0 24px -6px rgba(74,222,128,.6);display:grid;place-content:center;background-size:cover;background-position:center}\n.ua-ac .ua-avatar .ini{font-size:1.8rem;font-weight:700;color:var(--green-bright)}\n.ua-ac .ua-avatar .qbadge{position:absolute;left:-6px;bottom:-6px;width:38px;height:38px;border-radius:50%;\n  display:grid;place-content:center;background:var(--green);color:#08120a;box-shadow:0 6px 18px -6px rgba(74,222,128,.9)}\n.ua-ac .ua-avatar .qbadge svg{width:18px;height:18px}\n.ua-ac .ua-rname{display:flex;align-items:center;gap:8px;font-size:1.3rem;font-weight:600}\n.ua-ac .ua-rname .v{width:20px;height:20px;color:var(--green-bright)}\n.ua-ac .ua-rrole{color:var(--muted);font-size:.92rem;margin-top:4px}\n.ua-ac .ua-rline{width:70px;height:2px;margin-top:12px;border-radius:2px;background:var(--green);box-shadow:0 0 8px var(--green-dim)}\n.ua-ac .ua-rquote{position:relative;padding-left:30px;color:#d5ddd6;font-style:italic;line-height:1.8;font-weight:300;font-size:clamp(1rem,1.25vw,1.15rem)}\n.ua-ac .ua-rquote .qm{position:absolute;left:0;top:-4px;color:var(--green-dim);width:22px;height:22px}\n.ua-ac .ua-rquote .qe{color:var(--green-dim);width:20px;height:20px;vertical-align:baseline;margin-left:6px}\n.ua-ac .ua-rec::before{content:\"\";position:absolute}\n\n\/* responsive *\/\n@media(max-width:1000px){.ua-ac .ua-grid{grid-template-columns:repeat(2,1fr)}}\n@media(max-width:820px){\n  .ua-ac .ua-logos{grid-template-columns:repeat(2,1fr);gap:22px}\n  .ua-ac .ua-logo:nth-child(2)::after{display:none}\n  .ua-ac .ua-rec{grid-template-columns:1fr;text-align:center}\n  .ua-ac .ua-rec-l{flex-direction:column;text-align:center}\n  .ua-ac .ua-rline{margin-inline:auto}\n  .ua-ac .ua-rquote{padding-left:0;padding-top:26px}\n  .ua-ac .ua-rquote .qm{left:50%;transform:translateX(-50%)}\n}\n@media(max-width:520px){.ua-ac .ua-grid{grid-template-columns:1fr}}\n\n\/* keyframes *\/\n.ua-ac .ua-head>*{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}\n.ua-ac.go .ua-head>*{opacity:1;transform:none}\n.ua-ac.go .ua-head>*:nth-child(2){transition-delay:.08s}.ua-ac.go .ua-head>*:nth-child(3){transition-delay:.16s}.ua-ac.go .ua-head>*:nth-child(4){transition-delay:.24s}\n@keyframes uaRing{0%{box-shadow:0 0 0 0 rgba(74,222,128,.45)}70%{box-shadow:0 0 0 14px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}\n@media(prefers-reduced-motion:reduce){\n  .ua-ac *,.ua-ac *::before,.ua-ac *::after{animation-duration:.001ms!important;transition-duration:.001ms!important}\n  .ua-ac .ua-card,.ua-ac .ua-panel,.ua-ac .ua-head>*{opacity:1!important;transform:none!important}\n}\n<\/style>\n\n<section class=\"ua-ac\" id=\"achievements\">\n  <div class=\"ua-wrap\">\n    <div class=\"ua-head\">\n      <span class=\"ua-eyebrow\"><span class=\"d\"><\/span>Achievements<\/span>\n      <h2>My <span class=\"g\">Achievements<\/span><\/h2>\n      <p class=\"ua-sub\">A journey of passion, dedication and consistent results that drive real impact for brands worldwide.<\/p>\n      <span class=\"ua-uline\"><\/span>\n    <\/div>\n\n    <div class=\"ua-grid\">\n        <div class=\"ua-card\">\n          <span class=\"ua-cico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"\/><\/svg><\/span>\n          <div class=\"ua-num\" data-count=\"3000\" data-prefix=\"\" data-suffix=\"+\">0+<\/div>\n          <div class=\"ua-clabel\">Projects Completed<\/div>\n          <p class=\"ua-cdesc\">Successfully delivered across diverse industries worldwide.<\/p>\n        <\/div>\n        <div class=\"ua-card\">\n          <span class=\"ua-cico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9a6 6 0 0 0 12 0V3H6Z\"\/><path d=\"M6 4H3v2a3 3 0 0 0 3 3\"\/><path d=\"M18 4h3v2a3 3 0 0 1-3 3\"\/><path d=\"M12 15v4\"\/><path d=\"M8 21h8\"\/><path d=\"M9 19h6\"\/><\/svg><\/span>\n          <div class=\"ua-num\" data-count=\"1\" data-prefix=\"Top \" data-suffix=\"%\">Top 0%<\/div>\n          <div class=\"ua-clabel\">Amazon Packaging Designer<\/div>\n          <p class=\"ua-cdesc\">Ranked in the Top 1% of Amazon Packaging Designers worldwide.<\/p>\n        <\/div>\n        <div class=\"ua-card\">\n          <span class=\"ua-cico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"9\" r=\"6\"\/><path d=\"m9 14-1.5 7L12 18l4.5 3L15 14\"\/><path d=\"m10 8 1.5 1.5L14 7\"\/><\/svg><\/span>\n          <div class=\"ua-num\" data-count=\"9\" data-prefix=\"\" data-suffix=\"+ Years\">0+ Years<\/div>\n          <div class=\"ua-clabel\">Experience<\/div>\n          <p class=\"ua-cdesc\">Years of expertise in packaging design, branding and 3D visualization.<\/p>\n        <\/div>\n        <div class=\"ua-card\">\n          <span class=\"ua-cico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"\/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"\/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"\/><\/svg><\/span>\n          <div class=\"ua-num\" data-count=\"98\" data-prefix=\"\" data-suffix=\"%\">0%<\/div>\n          <div class=\"ua-clabel\">Client Satisfaction<\/div>\n          <p class=\"ua-cdesc\">High client satisfaction through creativity, communication and on-time delivery.<\/p>\n        <\/div>\n    <\/div>\n\n    <div class=\"ua-panel\">\n      <div class=\"ua-peyebrow\">Trusted by leading brands<\/div>\n      <p class=\"ua-ptxt\">Proud to work with amazing brands and organizations<\/p>\n      <div class=\"ua-logos\">\n        <div class=\"ua-logo\"><span class=\"l1\">G FUEL<\/span><\/div>\n        <div class=\"ua-logo\"><span class=\"l1\">American<\/span><span class=\"l2\">Red Cross<\/span><\/div>\n        <div class=\"ua-logo serif\"><span class=\"l1\">HOLLYWOOD<\/span><span class=\"l2\">Chamber of Commerce<\/span><\/div>\n        <div class=\"ua-logo serif\"><span class=\"l1\">COVE<\/span><span class=\"l2\">Beverage<\/span><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"ua-panel\">\n      <div class=\"ua-peyebrow\" style=\"margin-bottom:26px\">Recommended by<\/div>\n      <div class=\"ua-rec\">\n        <div class=\"ua-rec-l\">\n          <div class=\"ua-avatar\"><span class=\"ini\">BS<\/span>\n            <span class=\"qbadge\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7 7h4v7a4 4 0 0 1-4 4v-2a2 2 0 0 0 2-2H7Zm9 0h4v7a4 4 0 0 1-4 4v-2a2 2 0 0 0 2-2h-2Z\"\/><\/svg><\/span>\n          <\/div>\n          <div>\n            <div class=\"ua-rname\">Butrus Said <span class=\"v\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"m12 1 2.4 1.8 3-.3 1 2.8 2.8 1-.3 3L24 12l-1.8 2.4.3 3-2.8 1-1 2.8-3-.3L12 23l-2.4-1.8-3 .3-1-2.8-2.8-1 .3-3L1 12l1.8-2.4-.3-3 2.8-1 1-2.8 3 .3Z\"\/><path d=\"m8 12 3 3 5-5\" fill=\"none\" stroke=\"#08120a\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span><\/div>\n            <div class=\"ua-rrole\">Amazon Expert | 8 Figure Brand Builder<\/div>\n            <span class=\"ua-rline\"><\/span>\n          <\/div>\n        <\/div>\n        <p class=\"ua-rquote\"><span class=\"qm\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7 7h4v7a4 4 0 0 1-4 4v-2a2 2 0 0 0 2-2H7Zm9 0h4v7a4 4 0 0 1-4 4v-2a2 2 0 0 0 2-2h-2Z\"\/><\/svg><\/span>Umair is one of the most talented and reliable designers I've worked with. His packaging designs are not only visually stunning but also strategically effective. Highly recommended for any serious Amazon brand.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  var sec=document.getElementById(\"achievements\");if(!sec)return;\n  function run(){\n    sec.querySelectorAll(\".ua-num\").forEach(function(el){\n      var end=parseInt(el.getAttribute(\"data-count\"),10)||0;\n      var pre=el.getAttribute(\"data-prefix\")||\"\",suf=el.getAttribute(\"data-suffix\")||\"\";\n      var dur=1700,t0=null;\n      function step(ts){if(!t0)t0=ts;var p=Math.min((ts-t0)\/dur,1);var e=1-Math.pow(1-p,3);\n        el.textContent=pre+Math.round(end*e)+suf;if(p<1)requestAnimationFrame(step);}\n      requestAnimationFrame(step);\n    });\n  }\n  if(\"IntersectionObserver\" in window){\n    var io=new IntersectionObserver(function(en){en.forEach(function(e){if(e.isIntersecting){sec.classList.add(\"go\");run();io.disconnect();}});},{threshold:.2});\n    io.observe(sec);\n  }else{sec.classList.add(\"go\");run();}\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-158beeb5 elementor-section-full_width elementor-section-content-middle elementor-section-height-default elementor-section-height-default\" data-id=\"158beeb5\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-51917ac7\" data-id=\"51917ac7\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2fbd38bf elementor-widget elementor-widget-html\" data-id=\"2fbd38bf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<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=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* ===== Umair Arif - CONTACT (scoped .ua-ct) ===== *\/\n.ua-ct,.ua-ct *{box-sizing:border-box}\n.ua-ct{\n  --green:#4ade80;--green-bright:#7cff8f;--green-dim:rgba(74,222,128,.5);\n  --white:#f4f7f4;--muted:#9aa39c;--ease:cubic-bezier(.22,1,.36,1);\n  position:relative;overflow:hidden;width:100%;\n  padding:clamp(70px,10vh,120px) clamp(18px,4vw,60px);\n  font-family:\"Poppins\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif!important;\n  color:var(--white);-webkit-font-smoothing:antialiased;\n  background:radial-gradient(900px 500px at 50% -8%,rgba(74,222,128,.10),transparent 60%),#050805}\n.ua-ct .ua-wrap{position:relative;z-index:2;max-width:1360px;margin:0 auto}\n\n\/* header *\/\n.ua-ct .ua-head{text-align:center;margin-bottom:clamp(38px,5vh,58px)}\n.ua-ct .ua-eyebrow{display:inline-flex;align-items:center;gap:14px;\n  color:var(--green-bright);font-size:.8rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase}\n.ua-ct .ua-eyebrow::before,.ua-ct .ua-eyebrow::after{content:\"\";width:clamp(28px,5vw,80px);height:1.5px;\n  background:linear-gradient(90deg,transparent,var(--green));box-shadow:0 0 8px var(--green-dim)}\n.ua-ct .ua-eyebrow::after{background:linear-gradient(90deg,var(--green),transparent)}\n.ua-ct .ua-eyebrow .d{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}\n.ua-ct h2{margin:14px 0 16px;font-weight:800;font-size:clamp(2.4rem,5.2vw,4.2rem);letter-spacing:-.01em}\n.ua-ct h2 .g{color:var(--green-bright);text-shadow:0 0 28px rgba(124,255,143,.45)}\n.ua-ct .ua-sub{max-width:56ch;margin:0 auto;color:var(--muted);font-weight:300;line-height:1.7;font-size:clamp(.98rem,1.2vw,1.12rem)}\n\n\/* main grid *\/\n.ua-ct .ua-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,2.6vw,34px);align-items:start}\n.ua-ct .ua-panel{border-radius:24px;padding:clamp(24px,2.8vw,36px);\n  background:linear-gradient(160deg,rgba(20,28,22,.55),rgba(8,12,9,.55));border:1px solid rgba(124,255,143,.12);backdrop-filter:blur(8px);\n  opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}\n.ua-ct.go .ua-panel{opacity:1;transform:none}\n.ua-ct.go .ua-panel:nth-child(2){transition-delay:.12s}\n\n\/* info list *\/\n.ua-ct .ua-info h3{margin:0 0 6px;font-size:1.4rem;font-weight:700}\n.ua-ct .ua-info .lead{margin:0 0 26px;color:var(--muted);font-weight:300;line-height:1.7;font-size:.94rem}\n.ua-ct .ua-irow{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid rgba(124,255,143,.08);text-decoration:none;color:inherit}\n.ua-ct .ua-irow:last-of-type{border-bottom:0}\n.ua-ct .ua-iico{width:48px;height:48px;flex:0 0 auto;display:grid;place-content:center;border-radius:13px;\n  color:var(--green-bright);background:rgba(74,222,128,.08);border:1px solid var(--green-dim);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}\n.ua-ct .ua-iico svg{width:22px;height:22px}\n.ua-ct .ua-irow:hover .ua-iico{transform:translateY(-3px);box-shadow:0 0 20px -6px rgba(74,222,128,.7)}\n.ua-ct .ua-idata .k{display:block;font-size:.76rem;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}\n.ua-ct .ua-idata .v{display:block;font-size:1rem;font-weight:500;margin-top:3px}\n\n.ua-ct .ua-soc{display:flex;gap:12px;margin-top:26px}\n.ua-ct .ua-soc a{width:46px;height:46px;display:grid;place-content:center;border-radius:12px;\n  color:var(--white);background:rgba(10,14,11,.6);border:1px solid rgba(124,255,143,.14);\n  transition:transform .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}\n.ua-ct .ua-soc a svg{width:20px;height:20px}\n.ua-ct .ua-soc a:hover{transform:translateY(-4px);color:var(--green-bright);border-color:var(--green);background:rgba(74,222,128,.1)}\n\n\/* form *\/\n.ua-ct .ua-form h3{margin:0 0 22px;font-size:1.4rem;font-weight:700}\n.ua-ct .ua-field{position:relative;margin-bottom:18px}\n.ua-ct .ua-row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}\n.ua-ct .ua-field label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:8px;font-weight:500}\n.ua-ct .ua-field input,.ua-ct .ua-field textarea{width:100%;padding:14px 16px;border-radius:13px;\n  background:rgba(8,12,9,.6);border:1px solid rgba(124,255,143,.16);color:var(--white);font-family:inherit;font-size:.95rem;\n  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}\n.ua-ct .ua-field textarea{resize:vertical;min-height:130px}\n.ua-ct .ua-field input::placeholder,.ua-ct .ua-field textarea::placeholder{color:rgba(154,163,156,.6)}\n.ua-ct .ua-field input:focus,.ua-ct .ua-field textarea:focus{outline:none;border-color:var(--green);\n  box-shadow:0 0 0 3px rgba(74,222,128,.14);background:rgba(74,222,128,.04)}\n.ua-ct .ua-field.err input,.ua-ct .ua-field.err textarea{border-color:#ff6b6b;box-shadow:0 0 0 3px rgba(255,107,107,.12)}\n.ua-ct .ua-field .msg{display:none;margin-top:6px;font-size:.78rem;color:#ff8a8a}\n.ua-ct .ua-field.err .msg{display:block}\n\n.ua-ct .ua-send{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px;overflow:hidden;\n  width:100%;padding:16px 28px;border-radius:14px;cursor:pointer;font-family:inherit;\n  font-weight:600;font-size:.9rem;letter-spacing:.06em;color:#08120a;\n  background:linear-gradient(135deg,var(--green-bright),var(--green) 60%,#2fae5a);border:0;\n  box-shadow:0 14px 34px -14px rgba(74,222,128,.8);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}\n.ua-ct .ua-send svg{width:18px;height:18px;transition:transform .35s var(--ease)}\n.ua-ct .ua-send::before{content:\"\";position:absolute;inset:0;pointer-events:none;\n  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.5) 50%,transparent 64%);transform:translateX(-130%)}\n.ua-ct .ua-send:hover{transform:translateY(-2px);box-shadow:0 18px 42px -14px rgba(74,222,128,.95)}\n.ua-ct .ua-send:hover::before{animation:uaSheen .9s ease}\n.ua-ct .ua-send:hover svg{transform:translateX(4px)}\n.ua-ct .ua-ok{display:none;align-items:center;gap:12px;margin-top:16px;padding:14px 18px;border-radius:13px;\n  background:rgba(74,222,128,.1);border:1px solid var(--green-dim);color:var(--green-bright);font-size:.92rem}\n.ua-ct .ua-ok.show{display:flex;animation:uaPop .5s var(--ease)}\n.ua-ct .ua-ok svg{width:20px;height:20px;flex:0 0 auto}\n\n\/* map *\/\n.ua-ct .ua-map{position:relative;margin-top:clamp(20px,2.6vw,32px);height:300px;border-radius:24px;overflow:hidden;\n  border:1px solid rgba(124,255,143,.14);\n  background:\n    linear-gradient(rgba(74,222,128,.05),rgba(74,222,128,.05)),\n    repeating-linear-gradient(0deg,transparent 0 38px,rgba(124,255,143,.06) 38px 39px),\n    repeating-linear-gradient(90deg,transparent 0 38px,rgba(124,255,143,.06) 38px 39px),\n    linear-gradient(160deg,#0b140e,#060a07);\n  display:grid;place-content:center;text-align:center;\n  opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease) .1s,transform .8s var(--ease) .1s}\n.ua-ct.go .ua-map{opacity:1;transform:none}\n.ua-ct .ua-map .pin{width:60px;height:60px;margin:0 auto 14px;display:grid;place-content:center;border-radius:50%;\n  color:var(--green-bright);background:rgba(74,222,128,.1);border:1.5px solid var(--green-dim);\n  box-shadow:0 0 0 0 rgba(74,222,128,.5);animation:uaRing 2.6s ease-out infinite}\n.ua-ct .ua-map .pin svg{width:26px;height:26px}\n.ua-ct .ua-map .mt{font-weight:600}\n.ua-ct .ua-map .ms{color:var(--muted);font-size:.86rem;margin-top:4px}\n.ua-ct .ua-map a{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:11px 22px;border-radius:999px;\n  text-decoration:none;color:var(--green-bright);font-size:.84rem;font-weight:600;\n  background:rgba(74,222,128,.06);border:1.5px solid var(--green);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}\n.ua-ct .ua-map a:hover{transform:translateY(-3px);box-shadow:0 14px 34px -14px rgba(74,222,128,.8)}\n.ua-ct .ua-map a svg{width:15px;height:15px}\n\n\/* FAQ *\/\n.ua-ct .ua-faq{margin-top:clamp(30px,4vh,50px)}\n.ua-ct .ua-faq .fh{text-align:center;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;margin-bottom:22px}\n.ua-ct .ua-faq .fh .g{color:var(--green-bright)}\n.ua-ct .ua-acc{max-width:820px;margin:0 auto;display:grid;gap:12px}\n.ua-ct .ua-ai{border-radius:16px;background:rgba(10,14,11,.55);border:1px solid rgba(124,255,143,.12);overflow:hidden;\n  opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .3s var(--ease)}\n.ua-ct.go .ua-ai{opacity:1;transform:none}\n.ua-ct.go .ua-ai:nth-child(2){transition-delay:.08s}.ua-ct.go .ua-ai:nth-child(3){transition-delay:.16s}.ua-ct.go .ua-ai:nth-child(4){transition-delay:.24s}\n.ua-ct .ua-aq{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;cursor:pointer;\n  padding:18px 22px;background:none;border:0;color:var(--white);font-family:inherit;font-size:1rem;font-weight:500;text-align:left}\n.ua-ct .ua-aq .ic{width:26px;height:26px;flex:0 0 auto;display:grid;place-content:center;border-radius:50%;\n  color:var(--green-bright);border:1px solid var(--green-dim);transition:transform .35s var(--ease)}\n.ua-ct .ua-aq .ic svg{width:15px;height:15px}\n.ua-ct .ua-ai.open .ua-aq .ic{transform:rotate(45deg)}\n.ua-ct .ua-ai.open{border-color:var(--green-dim)}\n.ua-ct .ua-aa{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}\n.ua-ct .ua-aa p{margin:0;padding:0 22px 20px;color:var(--muted);font-size:.92rem;font-weight:300;line-height:1.7}\n\n\/* responsive *\/\n@media(max-width:920px){.ua-ct .ua-grid{grid-template-columns:1fr}}\n@media(max-width:520px){.ua-ct .ua-row2{grid-template-columns:1fr}}\n\n\/* keyframes *\/\n.ua-ct .ua-head>*{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}\n.ua-ct.go .ua-head>*{opacity:1;transform:none}\n.ua-ct.go .ua-head>*:nth-child(2){transition-delay:.08s}.ua-ct.go .ua-head>*:nth-child(3){transition-delay:.16s}\n@keyframes uaRing{0%{box-shadow:0 0 0 0 rgba(74,222,128,.45)}70%{box-shadow:0 0 0 12px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}\n@keyframes uaSheen{from{transform:translateX(-130%)}to{transform:translateX(130%)}}\n@keyframes uaPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}\n@media(prefers-reduced-motion:reduce){\n  .ua-ct *,.ua-ct *::before,.ua-ct *::after{animation-duration:.001ms!important;transition-duration:.001ms!important}\n  .ua-ct .ua-panel,.ua-ct .ua-map,.ua-ct .ua-ai,.ua-ct .ua-head>*{opacity:1!important;transform:none!important}\n}\n<\/style>\n\n<section class=\"ua-ct\" id=\"contact\">\n  <div class=\"ua-wrap\">\n    <div class=\"ua-head\">\n      <span class=\"ua-eyebrow\"><span class=\"d\"><\/span>Contact<\/span>\n      <h2>Get In <span class=\"g\">Touch<\/span><\/h2>\n      <p class=\"ua-sub\">Have a project in mind or want to discuss an idea? Fill out the form or reach me directly - I usually reply within 24 hours.<\/p>\n    <\/div>\n\n    <div class=\"ua-grid\">\n      <!-- LEFT: info -->\n      <div class=\"ua-panel ua-info\">\n        <h3>Let's talk<\/h3>\n        <p class=\"lead\">Whether it's packaging, Amazon branding or a full brand identity, I'd love to help bring your idea to life.<\/p>\n\n        <a class=\"ua-irow\" href=\"mailto:hello@umairarif.com\"><span class=\"ua-iico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"\/><path d=\"m2 7 10 6 10-6\"\/><\/svg><\/span><span class=\"ua-idata\"><span class=\"k\">Email<\/span><span class=\"v\">hello@umairarif.com<\/span><\/span><\/a>\n        <a class=\"ua-irow\" href=\"https:\/\/wa.me\/000000000000\" target=\"_blank\" rel=\"noopener\"><span class=\"ua-iico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 11.5a8.4 8.4 0 0 1-12.3 7.4L3 21l2.2-5.6A8.5 8.5 0 1 1 21 11.5Z\"\/><path d=\"M9 9c0 4 2 6 6 6\"\/><\/svg><\/span><span class=\"ua-idata\"><span class=\"k\">WhatsApp<\/span><span class=\"v\">Message me anytime<\/span><\/span><\/a>\n        <a class=\"ua-irow\" href=\"https:\/\/www.behance.net\/UmairArif\" target=\"_blank\" rel=\"noopener\"><span class=\"ua-iico\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8.8 10.4c.7-.4 1.1-1 1.1-1.9 0-1.8-1.3-2.5-3-2.5H2v11h5.1c1.9 0 3.4-.9 3.4-2.9 0-1.2-.6-2.2-1.7-2.5ZM4.4 7.9h2c.7 0 1.2.3 1.2 1s-.5 1-1.3 1H4.4Zm2.3 6.4H4.4v-2.5h2.4c.9 0 1.4.4 1.4 1.2s-.6 1.3-1.5 1.3ZM19 8.5h-4.3V7.3H19Zm2.9 4.2c0-2.4-1.4-4.4-3.9-4.4s-4.1 1.9-4.1 4.3 1.6 4.2 4.1 4.2c1.9 0 3.2-.9 3.7-2.5h-2c-.2.5-.7.8-1.5.8-1 0-1.7-.6-1.8-1.6h5.5c0-.2 0-.4 0-.6Zm-5.4-.9c.1-.9.7-1.5 1.6-1.5s1.5.6 1.5 1.5Z\"\/><\/svg><\/span><span class=\"ua-idata\"><span class=\"k\">Behance<\/span><span class=\"v\">behance.net\/UmairArif<\/span><\/span><\/a>\n        <div class=\"ua-irow\"><span class=\"ua-iico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg><\/span><span class=\"ua-idata\"><span class=\"k\">Location<\/span><span class=\"v\">Pakistan - Available Worldwide<\/span><\/span><\/div>\n\n        <div class=\"ua-soc\">\n          <a href=\"https:\/\/www.behance.net\/UmairArif\" target=\"_blank\" rel=\"noopener\" aria-label=\"Behance\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8.8 10.4c.7-.4 1.1-1 1.1-1.9 0-1.8-1.3-2.5-3-2.5H2v11h5.1c1.9 0 3.4-.9 3.4-2.9 0-1.2-.6-2.2-1.7-2.5ZM4.4 7.9h2c.7 0 1.2.3 1.2 1s-.5 1-1.3 1H4.4Zm2.3 6.4H4.4v-2.5h2.4c.9 0 1.4.4 1.4 1.2s-.6 1.3-1.5 1.3ZM19 8.5h-4.3V7.3H19Zm2.9 4.2c0-2.4-1.4-4.4-3.9-4.4s-4.1 1.9-4.1 4.3 1.6 4.2 4.1 4.2c1.9 0 3.2-.9 3.7-2.5h-2c-.2.5-.7.8-1.5.8-1 0-1.7-.6-1.8-1.6h5.5c0-.2 0-.4 0-.6Zm-5.4-.9c.1-.9.7-1.5 1.6-1.5s1.5.6 1.5 1.5Z\"\/><\/svg><\/a>\n          <a href=\"#\" aria-label=\"LinkedIn\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M4.98 3.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM3 9h4v12H3Zm7 0h3.8v1.7h.05c.53-1 1.8-2 3.75-2 4 0 4.75 2.6 4.75 6V21H18.5v-5.2c0-1.24-.02-2.84-1.73-2.84s-2 1.35-2 2.75V21H11Z\"\/><\/svg><\/a>\n          <a href=\"#\" aria-label=\"Instagram\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/><\/svg><\/a>\n          <a href=\"https:\/\/umairarif.com\" target=\"_blank\" rel=\"noopener\" aria-label=\"Website\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M2 12h20\"\/><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10Z\"\/><\/svg><\/a>\n        <\/div>\n      <\/div>\n\n      <!-- RIGHT: form -->\n      <div class=\"ua-panel ua-form\">\n        <h3>Send a message<\/h3>\n        <form id=\"ua-cform\" novalidate>\n          <div class=\"ua-row2\">\n            <div class=\"ua-field\"><label>Your Name<\/label><input type=\"text\" name=\"name\" placeholder=\"John Doe\" required><span class=\"msg\">Please enter your name.<\/span><\/div>\n            <div class=\"ua-field\"><label>Email Address<\/label><input type=\"email\" name=\"email\" placeholder=\"john@email.com\" required><span class=\"msg\">Enter a valid email.<\/span><\/div>\n          <\/div>\n          <div class=\"ua-field\"><label>Subject<\/label><input type=\"text\" name=\"subject\" placeholder=\"Packaging design project\" required><span class=\"msg\">Please add a subject.<\/span><\/div>\n          <div class=\"ua-field\"><label>Message<\/label><textarea name=\"message\" placeholder=\"Tell me about your project...\" required><\/textarea><span class=\"msg\">Please write a message.<\/span><\/div>\n          <button class=\"ua-send\" type=\"submit\"><span>Send Message<\/span><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 2 11 13\"\/><path d=\"M22 2 15 22l-4-9-9-4Z\"\/><\/svg><\/button>\n          <div class=\"ua-ok\" id=\"ua-ok\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m8 12 2.5 2.5L16 9\"\/><\/svg><span>Thanks! Your message is ready - your email app will open to send it.<\/span><\/div>\n        <\/form>\n      <\/div>\n    <\/div>\n\n    <!-- MAP -->\n    <div class=\"ua-map\">\n      <div>\n        <span class=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg><\/span>\n        <div class=\"mt\">Based in Pakistan<\/div>\n        <div class=\"ms\">Working with brands across the globe<\/div>\n        <a href=\"https:\/\/www.google.com\/maps\" target=\"_blank\" rel=\"noopener\">Open in Google Maps <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 3h6v6\"\/><path d=\"M10 14 21 3\"\/><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/><\/svg><\/a>\n      <\/div>\n    <\/div>\n\n    <!-- FAQ -->\n    <div class=\"ua-faq\">\n      <div class=\"fh\">Frequently Asked <span class=\"g\">Questions<\/span><\/div>\n      <div class=\"ua-acc\">\n        <div class=\"ua-ai\">\n          <button class=\"ua-aq\" type=\"button\">What services do you offer?<span class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 5v14M5 12h14\"\/><\/svg><\/span><\/button>\n          <div class=\"ua-aa\"><p>I specialize in product packaging design, Amazon packaging &amp; A+ content, label design, brand identity and 3D product rendering &amp; visualization.<\/p><\/div>\n        <\/div>\n        <div class=\"ua-ai\">\n          <button class=\"ua-aq\" type=\"button\">How long does a typical project take?<span class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 5v14M5 12h14\"\/><\/svg><\/span><\/button>\n          <div class=\"ua-aa\"><p>Most packaging projects take 5-10 business days depending on complexity and revisions. I'll share a clear timeline before we start.<\/p><\/div>\n        <\/div>\n        <div class=\"ua-ai\">\n          <button class=\"ua-aq\" type=\"button\">Do you work with Amazon brands?<span class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 5v14M5 12h14\"\/><\/svg><\/span><\/button>\n          <div class=\"ua-aa\"><p>Yes. A large part of my work is helping Amazon sellers with listing-ready packaging, A+ content and brand assets that boost conversions.<\/p><\/div>\n        <\/div>\n        <div class=\"ua-ai\">\n          <button class=\"ua-aq\" type=\"button\">How do we get started?<span class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 5v14M5 12h14\"\/><\/svg><\/span><\/button>\n          <div class=\"ua-aa\"><p>Just send a message through the form or email me directly. I'll get back to you within 24 hours to discuss your project.<\/p><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  var sec=document.getElementById(\"contact\");if(!sec)return;\n  \/* reveal *\/\n  if(\"IntersectionObserver\" in window){\n    var io=new IntersectionObserver(function(en){en.forEach(function(e){if(e.isIntersecting){sec.classList.add(\"go\");io.disconnect();}});},{threshold:.12});\n    io.observe(sec);\n  }else{sec.classList.add(\"go\");}\n  \/* FAQ accordion *\/\n  sec.querySelectorAll(\".ua-ai\").forEach(function(item){\n    var q=item.querySelector(\".ua-aq\"),a=item.querySelector(\".ua-aa\");\n    q.addEventListener(\"click\",function(){\n      var open=item.classList.contains(\"open\");\n      sec.querySelectorAll(\".ua-ai\").forEach(function(x){x.classList.remove(\"open\");x.querySelector(\".ua-aa\").style.maxHeight=\"0px\";});\n      if(!open){item.classList.add(\"open\");a.style.maxHeight=a.scrollHeight+\"px\";}\n    });\n  });\n  \/* form validation + mailto *\/\n  var form=document.getElementById(\"ua-cform\"),ok=document.getElementById(\"ua-ok\");\n  var reEmail=\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n  form.addEventListener(\"submit\",function(e){\n    e.preventDefault();var valid=true;\n    form.querySelectorAll(\".ua-field\").forEach(function(f){\n      var inp=f.querySelector(\"input,textarea\"),v=(inp.value||\"\").trim(),bad=false;\n      if(!v)bad=true;else if(inp.type===\"email\"&&!reEmail.test(v))bad=true;\n      f.classList.toggle(\"err\",bad);if(bad)valid=false;\n    });\n    if(!valid)return;\n    var g=function(n){return encodeURIComponent((form.elements[n].value||\"\").trim());};\n    var subj=g(\"subject\"),bodyTxt=\"Name: \"+g(\"name\")+\"%0D%0AEmail: \"+g(\"email\")+\"%0D%0A%0D%0A\"+g(\"message\");\n    ok.classList.add(\"show\");\n    window.location.href=\"mailto:hello@umairarif.com?subject=\"+subj+\"&body=\"+bodyTxt;\n    form.reset();\n  });\n  form.querySelectorAll(\"input,textarea\").forEach(function(inp){\n    inp.addEventListener(\"input\",function(){inp.closest(\".ua-field\").classList.remove(\"err\");});\n  });\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-75f8513a elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"75f8513a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-685c34e\" data-id=\"685c34e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1c1ea95c elementor-widget elementor-widget-html\" data-id=\"1c1ea95c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<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=Space+Grotesk:wght@500;600;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* ===== Umair Arif \u2014 premium footer (scoped .fx) ===== *\/\n.fx,.fx *{box-sizing:border-box}\n.fx{\n  --gold:#C8A15A; --gold-2:#E7CC89; --gold-deep:#8F6E33;\n  --cream:#F4F0E7; --dim:#93A0A6; --faint:#6E766E;\n  position:relative;width:100%;overflow:hidden;\n  padding:0 clamp(18px,4.5vw,64px) 28px;\n  background:linear-gradient(180deg,#070C10 0%, #05090C 55%, #04070A 100%);\n  font-family:\"Instrument Sans\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif!important;\n  -webkit-font-smoothing:antialiased;\n}\n.fx *{text-align:left}\n.fx::before{content:\"\";position:absolute;top:0;left:0;right:0;height:1px;\n  background:linear-gradient(90deg,transparent,rgba(200,161,90,.7),transparent)}\n.fx .fx-in{position:relative;z-index:2;max-width:1320px;margin:0 auto}\n\n\/* giant faint watermark *\/\n.fx .fx-mark{position:absolute;left:50%;bottom:-3%;transform:translateX(-50%);z-index:0;\n  font-family:\"Space Grotesk\",sans-serif!important;font-weight:700;letter-spacing:-.03em;white-space:nowrap;\n  font-size:clamp(6rem,20vw,19rem);line-height:.8;pointer-events:none;color:transparent;\n  -webkit-text-stroke:1px rgba(200,161,90,.06)}\n\n\/* CTA band *\/\n.fx .fx-cta{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;\n  max-width:1320px;margin:0 auto;padding:44px 0;border-bottom:1px solid rgba(255,255,255,.07);\n  animation:fxUp linear both;animation-timeline:view();animation-range:entry 2% cover 26%}\n.fx .fx-cta h2{margin:0;font-family:\"Space Grotesk\",sans-serif!important;font-weight:700;\n  font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.12;letter-spacing:-.01em;color:var(--cream)!important;max-width:640px}\n.fx .fx-cta h2 em{font-style:normal;background:linear-gradient(94deg,var(--gold-2),var(--gold) 60%,var(--gold-deep));\n  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}\n.fx .fx-btn{position:relative;display:inline-flex;align-items:center;gap:12px;overflow:hidden;flex:0 0 auto;\n  padding:16px 30px;border-radius:11px;text-decoration:none;\n  font-weight:600;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:#120E06!important;\n  background:linear-gradient(135deg,var(--gold-2),var(--gold) 60%,var(--gold-deep));\n  box-shadow:0 14px 32px -12px rgba(200,161,90,.75),inset 0 1px 0 rgba(255,255,255,.35);\n  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}\n.fx .fx-btn .ar{transition:transform .35s cubic-bezier(.2,.8,.2,1)}\n.fx .fx-btn::before{content:\"\";position:absolute;inset:0;\n  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.6) 48%,transparent 62%);transform:translateX(-120%)}\n.fx .fx-btn:hover{transform:translateY(-2px);box-shadow:0 20px 44px -12px rgba(200,161,90,.9)}\n.fx .fx-btn:hover::before{animation:fxSheen .9s ease}\n.fx .fx-btn:hover .ar{transform:translateX(5px)}\n\n\/* main *\/\n.fx .fx-main{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(30px,5vw,70px);\n  padding:56px 0;border-bottom:1px solid rgba(255,255,255,.07);\n  animation:fxUp linear both;animation-timeline:view();animation-range:entry 2% cover 30%}\n.fx .fx-logo{display:inline-block;text-decoration:none;font-family:\"Space Grotesk\",sans-serif!important;\n  font-weight:700;font-size:1.9rem;letter-spacing:-.01em;color:var(--cream)!important}\n.fx .fx-logo em{font-style:normal;background:linear-gradient(94deg,var(--gold-2),var(--gold) 60%,var(--gold-deep));\n  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}\n.fx .fx-tag{margin:16px 0 24px;max-width:340px;font-size:1rem;line-height:1.66;color:var(--dim)!important}\n.fx .fx-social{display:flex;gap:12px}\n.fx .fx-social a{width:42px;height:42px;border-radius:50%;display:grid;place-content:center;\n  border:1px solid rgba(200,161,90,.28);color:var(--dim)!important;\n  transition:color .3s,border-color .3s,background .35s,transform .3s}\n.fx .fx-social a svg{width:18px;height:18px;fill:currentColor}\n.fx .fx-social a:hover{color:#120E06!important;transform:translateY(-3px);border-color:transparent;\n  background:linear-gradient(135deg,var(--gold-2),var(--gold));box-shadow:0 10px 22px -10px rgba(200,161,90,.8)}\n\n.fx .fx-col h4{margin:0 0 20px;font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)!important}\n.fx .fx-col ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}\n.fx .fx-col a{position:relative;text-decoration:none;color:var(--dim)!important;font-size:.98rem;\n  transition:color .3s,padding-left .3s}\n.fx .fx-col a::before{content:\"\";position:absolute;left:0;bottom:-2px;width:0;height:1px;\n  background:linear-gradient(90deg,var(--gold),var(--gold-2));transition:width .35s cubic-bezier(.2,.8,.2,1)}\n.fx .fx-col a:hover{color:var(--cream)!important;padding-left:14px}\n.fx .fx-col a:hover::before{width:10px}\n\n\/* bottom *\/\n.fx .fx-bottom{position:relative;z-index:2;max-width:1320px;margin:0 auto;\n  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:26px}\n.fx .fx-bottom p{margin:0;font-size:.86rem;color:var(--faint)!important}\n.fx .fx-legal{display:flex;gap:20px}\n.fx .fx-legal a{font-size:.86rem;color:var(--faint)!important;text-decoration:none;transition:color .3s}\n.fx .fx-legal a:hover{color:var(--gold-2)!important}\n.fx .fx-top{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;letter-spacing:.06em;\n  color:var(--gold)!important;text-decoration:none;transition:gap .3s}\n.fx .fx-top svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .35s}\n.fx .fx-top:hover{gap:11px}.fx .fx-top:hover svg{transform:translateY(-3px)}\n\n@media(max-width:860px){.fx .fx-main{grid-template-columns:1fr 1fr}.fx .fx-brand{grid-column:1 \/ -1}}\n@media(max-width:560px){\n  .fx .fx-main{grid-template-columns:1fr;gap:34px}\n  .fx .fx-cta{padding:38px 0}\n  .fx .fx-bottom{flex-direction:column;align-items:flex-start;gap:14px}\n}\n\n@keyframes fxUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}\n@keyframes fxSheen{from{transform:translateX(-120%)}to{transform:translateX(120%)}}\n@media(prefers-reduced-motion:reduce){\n  .fx *,.fx *::before,.fx *::after{animation-duration:.001ms!important;transition-duration:.001ms!important}\n  .fx .fx-cta,.fx .fx-main{opacity:1;transform:none}\n}\n<\/style>\n\n<footer class=\"fx\" id=\"site-footer\">\n  <span class=\"fx-mark\" aria-hidden=\"true\">Umair Arif<\/span>\n\n  <!-- CTA band -->\n  <div class=\"fx-cta\">\n    <h2>Ready to make your brand <em>unforgettable?<\/em><\/h2>\n    <a class=\"fx-btn\" href=\"https:\/\/calendly.com\/umairstudio\/30min\" target=\"_blank\" rel=\"noopener\">\n      Book a Free Call <span class=\"ar\">&#8594;<\/span>\n    <\/a>\n  <\/div>\n\n  <div class=\"fx-in\">\n    <div class=\"fx-main\">\n      <div class=\"fx-brand\">\n        <a class=\"fx-logo\" href=\"#home\">Umair <em>Arif<\/em><\/a>\n        <p class=\"fx-tag\">Strategic packaging &amp; Amazon branding that helps ambitious brands stand out on the shelf and sell more online.<\/p>\n        <div class=\"fx-social\">\n          <a href=\"#\" aria-label=\"Instagram\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 1.8.3 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.1 1.2-.3 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-1.8-.3-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c.1-1.2.3-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zm0 3.1a6.7 6.7 0 1 0 0 13.4 6.7 6.7 0 0 0 0-13.4zm0 11a4.3 4.3 0 1 1 0-8.6 4.3 4.3 0 0 1 0 8.6zm6.9-11.3a1.55 1.55 0 1 1-3.1 0 1.55 1.55 0 0 1 3.1 0z\"\/><\/svg><\/a>\n          <a href=\"#\" aria-label=\"LinkedIn\"><svg viewBox=\"0 0 24 24\"><path d=\"M6.94 5A1.94 1.94 0 1 1 3.06 5a1.94 1.94 0 0 1 3.88 0zM3.4 8.4h3.1V21H3.4V8.4zm5.02 0h2.97v1.72h.04c.41-.78 1.42-1.6 2.93-1.6 3.13 0 3.71 2.06 3.71 4.74V21h-3.1v-5.6c0-1.33-.02-3.05-1.86-3.05-1.86 0-2.15 1.45-2.15 2.95V21H8.42V8.4z\"\/><\/svg><\/a>\n          <a href=\"#\" aria-label=\"Behance\"><svg viewBox=\"0 0 24 24\"><path d=\"M9.1 8.6c1.2 0 2.1.28 2.68.83.4.4.6.94.6 1.66 0 .75-.34 1.32-1 1.7.9.26 1.36 1 1.36 1.98 0 1.6-1.13 2.43-3.1 2.43H3V8.6h6.1zm-.36 3.7c.75 0 1.13-.3 1.13-.9 0-.63-.4-.9-1.2-.9H5.9v1.8h2.84zm.16 3.75c.83 0 1.24-.34 1.24-1.02 0-.72-.43-1.04-1.3-1.04H5.9v2.06h3zm7.8-3.18c.7 0 1.16.42 1.24 1.1h-2.5c.1-.7.55-1.1 1.26-1.1zm3.3 2.2c0-2.06-1.2-3.5-3.28-3.5-2 0-3.35 1.44-3.35 3.44 0 2.03 1.3 3.42 3.42 3.42 1.6 0 2.77-.83 3.1-2.1h-1.96c-.13.4-.5.63-1.08.63-.76 0-1.24-.44-1.32-1.28h4.44c.02-.2.03-.4.03-.6zM15.2 8.35h4.28v1.04H15.2V8.35z\"\/><\/svg><\/a>\n          <a href=\"#\" aria-label=\"X\"><svg viewBox=\"0 0 24 24\"><path d=\"M17.53 3h3.02l-6.6 7.54L21.75 21h-6.06l-4.75-6.2L5.5 21H2.47l7.05-8.06L2.25 3h6.21l4.29 5.67L17.53 3zm-1.06 16.2h1.67L7.6 4.71H5.8L16.47 19.2z\"\/><\/svg><\/a>\n        <\/div>\n      <\/div>\n\n      <div class=\"fx-col\">\n        <h4>Explore<\/h4>\n        <ul>\n          <li><a href=\"#home\">Home<\/a><\/li>\n          <li><a href=\"#about\">About Me<\/a><\/li>\n          <li><a href=\"#portfolio\">Portfolio<\/a><\/li>\n          <li><a href=\"#case-studies\">Case Studies<\/a><\/li>\n          <li><a href=\"#blog\">Blog<\/a><\/li>\n          <li><a href=\"#contact\">Contact<\/a><\/li>\n        <\/ul>\n      <\/div>\n\n      <div class=\"fx-col\">\n        <h4>Services<\/h4>\n        <ul>\n          <li><a href=\"#services\">Packaging &amp; Label Design<\/a><\/li>\n          <li><a href=\"#services\">Amazon Brand Store<\/a><\/li>\n          <li><a href=\"#services\">Amazon Listing Images<\/a><\/li>\n          <li><a href=\"#services\">Brand Identity Design<\/a><\/li>\n          <li><a href=\"#services\">Amazon A+ Content<\/a><\/li>\n          <li><a href=\"#services\">3D Rendering &amp; Mockups<\/a><\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n\n    <div class=\"fx-bottom\">\n      <p>\u00a9 2026 Umair Arif. All rights reserved.<\/p>\n      <div class=\"fx-legal\">\n        <a href=\"#privacy\">Privacy Policy<\/a>\n        <a href=\"#terms\">Terms of Service<\/a>\n      <\/div>\n      <a class=\"fx-top\" href=\"#top\">Back to top <svg viewBox=\"0 0 24 24\"><path d=\"M12 19V5M5 12l7-7 7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/a>\n    <\/div>\n  <\/div>\n<\/footer>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>UmairArif Home About Me My Skills Portfolio Achievements Blog Contact Me Home About Me My Skills Portfolio Achievements Blog Contact Me Hello, I&#8217;m Packaging Designer &amp; Amazon Design Specialist I help brands stand out with premium packaging design and powerful branding solutions that connect, inspire and sell. Portfolio Contact Me Available for projects Packaging Design [&hellip;]<\/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-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/umairarif.com\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umairarif.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/umairarif.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/umairarif.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/umairarif.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":31,"href":"https:\/\/umairarif.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":65,"href":"https:\/\/umairarif.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/65"}],"wp:attachment":[{"href":"https:\/\/umairarif.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}