{"id":35,"date":"2026-09-27T07:16:05","date_gmt":"2026-09-27T07:16:05","guid":{"rendered":"https:\/\/naimkhan.world\/?page_id=35"},"modified":"2026-09-27T09:39:58","modified_gmt":"2026-09-27T09:39:58","slug":"home","status":"publish","type":"page","link":"https:\/\/naimkhan.world\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"35\" class=\"elementor elementor-35\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f336811 e-flex e-con-boxed e-con e-parent\" data-id=\"f336811\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8c10110 elementor-widget elementor-widget-html\" data-id=\"8c10110\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* =========================================================\r\n   MD NAIM KHAN \u2014 PORTFOLIO\r\n   STEP 01 \u2014 HEADER + HERO\r\n========================================================= *\/\r\n\r\n#naim-portfolio {\r\n  --nk-bg: #050507;\r\n  --nk-card: #0c0c12;\r\n  --nk-border: rgba(255,255,255,.09);\r\n  --nk-text: #ffffff;\r\n  --nk-muted: #9b9ba8;\r\n  --nk-purple: #8b5cf6;\r\n  --nk-blue: #3b82f6;\r\n  --nk-cyan: #22d3ee;\r\n\r\n  font-family: Inter, Arial, sans-serif;\r\n  color: var(--nk-text);\r\n  background: var(--nk-bg);\r\n  overflow: hidden;\r\n}\r\n\r\n#naim-portfolio *,\r\n#naim-portfolio *::before,\r\n#naim-portfolio *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n#naim-portfolio .nk-header {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  z-index: 9999;\r\n  padding: 18px 30px;\r\n  transition: .35s ease;\r\n}\r\n\r\n#naim-portfolio .nk-header-inner {\r\n  max-width: 1240px;\r\n  margin: auto;\r\n  height: 68px;\r\n  padding: 0 20px;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n\r\n  border: 1px solid rgba(255,255,255,.08);\r\n  border-radius: 18px;\r\n\r\n  background: rgba(8,8,12,.55);\r\n\r\n  backdrop-filter: blur(18px);\r\n  -webkit-backdrop-filter: blur(18px);\r\n\r\n  transition: .35s ease;\r\n}\r\n\r\n#naim-portfolio .nk-header.scrolled .nk-header-inner {\r\n  background: rgba(7,7,10,.88);\r\n\r\n  box-shadow:\r\n    0 15px 50px rgba(0,0,0,.35);\r\n\r\n  border-color:\r\n    rgba(139,92,246,.18);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LOGO\r\n========================================================= *\/\r\n\r\n#naim-portfolio .nk-logo {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 11px;\r\n\r\n  text-decoration: none;\r\n  color: #fff;\r\n}\r\n\r\n#naim-portfolio .nk-logo-mark {\r\n  width: 38px;\r\n  height: 38px;\r\n\r\n  display: grid;\r\n  place-items: center;\r\n\r\n  border-radius: 12px;\r\n\r\n  font-size: 15px;\r\n  font-weight: 900;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      var(--nk-purple),\r\n      var(--nk-blue)\r\n    );\r\n\r\n  box-shadow:\r\n    0 0 25px rgba(139,92,246,.35);\r\n}\r\n\r\n#naim-portfolio .nk-logo-text {\r\n  font-size: 16px;\r\n  font-weight: 800;\r\n  letter-spacing: -.3px;\r\n}\r\n\r\n#naim-portfolio .nk-logo-text span {\r\n  color: var(--nk-purple);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   NAVIGATION\r\n========================================================= *\/\r\n\r\n#naim-portfolio .nk-nav {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 28px;\r\n}\r\n\r\n#naim-portfolio .nk-nav a {\r\n  position: relative;\r\n\r\n  color: #aaaab5;\r\n  text-decoration: none;\r\n\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n\r\n  transition: .25s ease;\r\n}\r\n\r\n#naim-portfolio .nk-nav a:hover {\r\n  color: #fff;\r\n}\r\n\r\n#naim-portfolio .nk-nav a::after {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  left: 50%;\r\n  bottom: -8px;\r\n\r\n  width: 0;\r\n  height: 2px;\r\n\r\n  transform: translateX(-50%);\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--nk-purple),\r\n      var(--nk-blue)\r\n    );\r\n\r\n  border-radius: 20px;\r\n\r\n  transition: .25s ease;\r\n}\r\n\r\n#naim-portfolio .nk-nav a:hover::after {\r\n  width: 100%;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER CTA\r\n========================================================= *\/\r\n\r\n#naim-portfolio .nk-header-btn {\r\n  padding: 11px 17px;\r\n\r\n  color: #fff;\r\n  text-decoration: none;\r\n\r\n  font-size: 12px;\r\n  font-weight: 800;\r\n\r\n  border-radius: 10px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      var(--nk-purple),\r\n      var(--nk-blue)\r\n    );\r\n\r\n  box-shadow:\r\n    0 8px 25px rgba(93,65,220,.25);\r\n\r\n  transition: .3s ease;\r\n}\r\n\r\n#naim-portfolio .nk-header-btn:hover {\r\n  transform: translateY(-2px);\r\n\r\n  box-shadow:\r\n    0 12px 35px rgba(93,65,220,.4);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE MENU\r\n========================================================= *\/\r\n\r\n#naim-portfolio .nk-menu-btn {\r\n  display: none;\r\n\r\n  width: 42px;\r\n  height: 42px;\r\n\r\n  border: 1px solid rgba(255,255,255,.1);\r\n  border-radius: 10px;\r\n\r\n  background: rgba(255,255,255,.04);\r\n  color: #fff;\r\n\r\n  cursor: pointer;\r\n}\r\n\r\n#naim-portfolio .nk-menu-btn span {\r\n  display: block;\r\n\r\n  width: 18px;\r\n  height: 2px;\r\n\r\n  margin: 4px auto;\r\n\r\n  background: #fff;\r\n  border-radius: 20px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HERO\r\n========================================================= *\/\r\n\r\n#naim-portfolio .nk-hero {\r\n  position: relative;\r\n\r\n  min-height: 100vh;\r\n\r\n  padding:\r\n    150px 30px 90px;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  isolation: isolate;\r\n}\r\n\r\n\r\n\/* BACKGROUND GLOW *\/\r\n\r\n#naim-portfolio .nk-hero::before {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  width: 650px;\r\n  height: 650px;\r\n\r\n  left: -250px;\r\n  top: 5%;\r\n\r\n  border-radius: 50%;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle,\r\n      rgba(124,58,237,.16),\r\n      transparent 68%\r\n    );\r\n\r\n  filter: blur(15px);\r\n\r\n  z-index: -2;\r\n}\r\n\r\n#naim-portfolio .nk-hero::after {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  width: 650px;\r\n  height: 650px;\r\n\r\n  right: -250px;\r\n  bottom: -150px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle,\r\n      rgba(37,99,235,.14),\r\n      transparent 68%\r\n    );\r\n\r\n  filter: blur(15px);\r\n\r\n  z-index: -2;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HERO GRID\r\n========================================================= *\/\r\n\r\n#naim-portfolio .nk-hero-grid {\r\n  width: 100%;\r\n  max-width: 1240px;\r\n\r\n  margin: auto;\r\n\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    1.05fr .95fr;\r\n\r\n  gap: 80px;\r\n\r\n  align-items: center;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HERO LEFT\r\n========================================================= *\/\r\n\r\n#naim-portfolio .nk-hero-left {\r\n  position: relative;\r\n  z-index: 5;\r\n}\r\n\r\n\r\n\/* EYEBROW *\/\r\n\r\n#naim-portfolio .nk-eyebrow {\r\n  display: inline-flex;\r\n\r\n  align-items: center;\r\n  gap: 9px;\r\n\r\n  padding: 8px 13px;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(139,92,246,.22);\r\n\r\n  border-radius: 50px;\r\n\r\n  background:\r\n    rgba(139,92,246,.07);\r\n\r\n  color: #c4b5fd;\r\n\r\n  font-size: 11px;\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 1.4px;\r\n  text-transform: uppercase;\r\n\r\n  animation:\r\n    nkFadeUp .8s ease both;\r\n}\r\n\r\n#naim-portfolio .nk-eyebrow-dot {\r\n  width: 7px;\r\n  height: 7px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: #22c55e;\r\n\r\n  box-shadow:\r\n    0 0 0 5px rgba(34,197,94,.1),\r\n    0 0 15px rgba(34,197,94,.8);\r\n\r\n  animation:\r\n    nkPulse 2s infinite;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HERO TITLE\r\n========================================================= *\/\r\n\r\n#naim-portfolio .nk-title {\r\n  margin: 24px 0 22px;\r\n\r\n  font-size:\r\n    clamp(48px, 6vw, 84px);\r\n\r\n  line-height: .98;\r\n\r\n  letter-spacing: -4px;\r\n\r\n  font-weight: 900;\r\n\r\n  animation:\r\n    nkFadeUp .9s .1s ease both;\r\n}\r\n\r\n#naim-portfolio .nk-title span {\r\n  display: block;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #ffffff 0%,\r\n      #a78bfa 45%,\r\n      #60a5fa 100%\r\n    );\r\n\r\n  -webkit-background-clip: text;\r\n  background-clip: text;\r\n\r\n  -webkit-text-fill-color: transparent;\r\n}\r\n\r\n#naim-portfolio .nk-title .nk-gradient {\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--nk-purple),\r\n      var(--nk-blue),\r\n      var(--nk-cyan)\r\n    );\r\n\r\n  -webkit-background-clip: text;\r\n  background-clip: text;\r\n\r\n  -webkit-text-fill-color: transparent;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DESCRIPTION\r\n========================================================= *\/\r\n\r\n#naim-portfolio .nk-description {\r\n  max-width: 600px;\r\n\r\n  margin:\r\n    0 0 32px;\r\n\r\n  color: var(--nk-muted);\r\n\r\n  font-size: 16px;\r\n\r\n  line-height: 1.8;\r\n\r\n  animation:\r\n    nkFadeUp .9s .2s ease both;\r\n}\r\n\r\n#naim-portfolio .nk-description strong {\r\n  color: #ddd;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BUTTONS\r\n========================================================= *\/\r\n\r\n#naim-portfolio .nk-buttons {\r\n  display: flex;\r\n\r\n  flex-wrap: wrap;\r\n\r\n  gap: 13px;\r\n\r\n  animation:\r\n    nkFadeUp .9s .3s ease both;\r\n}\r\n\r\n#naim-portfolio .nk-btn {\r\n  display: inline-flex;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  gap: 9px;\r\n\r\n  min-height: 50px;\r\n\r\n  padding:\r\n    0 21px;\r\n\r\n  border-radius: 12px;\r\n\r\n  font-size: 13px;\r\n  font-weight: 800;\r\n\r\n  text-decoration: none;\r\n\r\n  transition: .3s ease;\r\n}\r\n\r\n#naim-portfolio .nk-btn-primary {\r\n  color: #fff;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      var(--nk-purple),\r\n      var(--nk-blue)\r\n    );\r\n\r\n  box-shadow:\r\n    0 12px 35px rgba(99,70,220,.28);\r\n}\r\n\r\n#naim-portfolio .nk-btn-primary:hover {\r\n  transform: translateY(-3px);\r\n\r\n  box-shadow:\r\n    0 17px 45px rgba(99,70,220,.4);\r\n}\r\n\r\n#naim-portfolio .nk-btn-secondary {\r\n  color: #ddd;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255,255,255,.1);\r\n\r\n  background:\r\n    rgba(255,255,255,.035);\r\n}\r\n\r\n#naim-portfolio .nk-btn-secondary:hover {\r\n  color: #fff;\r\n\r\n  border-color:\r\n    rgba(139,92,246,.4);\r\n\r\n  transform:\r\n    translateY(-3px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MINI STATS\r\n========================================================= *\/\r\n\r\n#naim-portfolio .nk-mini-stats {\r\n  display: flex;\r\n\r\n  gap: 35px;\r\n\r\n  margin-top: 50px;\r\n\r\n  animation:\r\n    nkFadeUp .9s .4s ease both;\r\n}\r\n\r\n#naim-portfolio .nk-mini-stat strong {\r\n  display: block;\r\n\r\n  font-size: 23px;\r\n  font-weight: 900;\r\n\r\n  color: #fff;\r\n}\r\n\r\n#naim-portfolio .nk-mini-stat span {\r\n  display: block;\r\n\r\n  margin-top: 4px;\r\n\r\n  color: #777783;\r\n\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HERO VISUAL\r\n========================================================= *\/\r\n\r\n#naim-portfolio .nk-visual {\r\n  position: relative;\r\n\r\n  min-height: 560px;\r\n\r\n  display: grid;\r\n\r\n  place-items: center;\r\n\r\n  perspective: 1000px;\r\n\r\n  animation:\r\n    nkFadeIn 1s .25s ease both;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ORBITS\r\n========================================================= *\/\r\n\r\n#naim-portfolio .nk-orbit {\r\n  position: absolute;\r\n\r\n  width: 470px;\r\n  height: 470px;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(139,92,246,.12);\r\n\r\n  border-radius: 50%;\r\n\r\n  animation:\r\n    nkRotate 22s linear infinite;\r\n}\r\n\r\n#naim-portfolio .nk-orbit::before {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  width: 10px;\r\n  height: 10px;\r\n\r\n  top: 8px;\r\n  left: 50%;\r\n\r\n  border-radius: 50%;\r\n\r\n  background:\r\n    var(--nk-purple);\r\n\r\n  box-shadow:\r\n    0 0 20px var(--nk-purple),\r\n    0 0 50px rgba(139,92,246,.7);\r\n}\r\n\r\n#naim-portfolio .nk-orbit-2 {\r\n  width: 370px;\r\n  height: 370px;\r\n\r\n  border-color:\r\n    rgba(59,130,246,.12);\r\n\r\n  animation-duration: 17s;\r\n\r\n  animation-direction: reverse;\r\n}\r\n\r\n#naim-portfolio .nk-orbit-2::before {\r\n  background:\r\n    var(--nk-blue);\r\n\r\n  box-shadow:\r\n    0 0 20px var(--nk-blue),\r\n    0 0 50px rgba(59,130,246,.7);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PROFILE IMAGE\r\n========================================================= *\/\r\n\r\n#naim-portfolio .nk-profile {\r\n  position: relative;\r\n\r\n  width: 330px;\r\n  height: 430px;\r\n\r\n  overflow: hidden;\r\n\r\n  border-radius:\r\n    170px\r\n    170px\r\n    28px\r\n    28px;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255,255,255,.13);\r\n\r\n  background:\r\n    linear-gradient(\r\n      180deg,\r\n      #17131f,\r\n      #08080c\r\n    );\r\n\r\n  box-shadow:\r\n    0 30px 90px rgba(0,0,0,.65),\r\n    0 0 70px rgba(124,58,237,.13);\r\n\r\n  transform:\r\n    translateZ(20px);\r\n}\r\n\r\n#naim-portfolio .nk-profile::before {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  background:\r\n    linear-gradient(\r\n      130deg,\r\n      rgba(255,255,255,.12),\r\n      transparent 30%\r\n    );\r\n\r\n  z-index: 2;\r\n\r\n  pointer-events: none;\r\n}\r\n\r\n#naim-portfolio .nk-profile img {\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  display: block;\r\n\r\n  object-fit: cover;\r\n\r\n  object-position: center;\r\n\r\n  transition:\r\n    transform .7s ease;\r\n}\r\n\r\n#naim-portfolio .nk-profile:hover img {\r\n  transform:\r\n    scale(1.035);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FLOATING CARDS\r\n========================================================= *\/\r\n\r\n#naim-portfolio .nk-float {\r\n  position: absolute;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 10px;\r\n\r\n  padding:\r\n    12px 15px;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255,255,255,.1);\r\n\r\n  border-radius: 13px;\r\n\r\n  background:\r\n    rgba(13,13,20,.72);\r\n\r\n  backdrop-filter:\r\n    blur(14px);\r\n\r\n  -webkit-backdrop-filter:\r\n    blur(14px);\r\n\r\n  box-shadow:\r\n    0 20px 50px rgba(0,0,0,.35);\r\n\r\n  z-index: 5;\r\n\r\n  animation:\r\n    nkFloat 5s ease-in-out infinite;\r\n}\r\n\r\n#naim-portfolio .nk-float-icon {\r\n  width: 31px;\r\n  height: 31px;\r\n\r\n  display: grid;\r\n\r\n  place-items: center;\r\n\r\n  border-radius: 9px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      var(--nk-purple),\r\n      var(--nk-blue)\r\n    );\r\n\r\n  font-size: 13px;\r\n}\r\n\r\n#naim-portfolio .nk-float strong {\r\n  display: block;\r\n\r\n  font-size: 11px;\r\n\r\n  color: #fff;\r\n}\r\n\r\n#naim-portfolio .nk-float span {\r\n  display: block;\r\n\r\n  margin-top: 2px;\r\n\r\n  color: #777783;\r\n\r\n  font-size: 9px;\r\n}\r\n\r\n#naim-portfolio .nk-float-1 {\r\n  top: 80px;\r\n  left: 10px;\r\n}\r\n\r\n#naim-portfolio .nk-float-2 {\r\n  right: 5px;\r\n  top: 175px;\r\n\r\n  animation-delay:\r\n    -1.5s;\r\n}\r\n\r\n#naim-portfolio .nk-float-3 {\r\n  bottom: 90px;\r\n  left: 20px;\r\n\r\n  animation-delay:\r\n    -3s;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VISUAL LABEL\r\n========================================================= *\/\r\n\r\n#naim-portfolio .nk-visual-label {\r\n  position: absolute;\r\n\r\n  bottom: 20px;\r\n  right: 35px;\r\n\r\n  padding:\r\n    10px 14px;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255,255,255,.08);\r\n\r\n  border-radius: 10px;\r\n\r\n  background:\r\n    rgba(255,255,255,.035);\r\n\r\n  color: #8f8f9b;\r\n\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SCROLL INDICATOR\r\n========================================================= *\/\r\n\r\n#naim-portfolio .nk-scroll {\r\n  position: absolute;\r\n\r\n  left: 50%;\r\n  bottom: 25px;\r\n\r\n  transform:\r\n    translateX(-50%);\r\n\r\n  display: flex;\r\n\r\n  flex-direction: column;\r\n\r\n  align-items: center;\r\n\r\n  gap: 7px;\r\n\r\n  color: #666673;\r\n\r\n  font-size: 9px;\r\n\r\n  font-weight: 700;\r\n\r\n  letter-spacing: 1.5px;\r\n\r\n  text-transform: uppercase;\r\n}\r\n\r\n#naim-portfolio .nk-scroll-line {\r\n  width: 1px;\r\n  height: 35px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      to bottom,\r\n      var(--nk-purple),\r\n      transparent\r\n    );\r\n\r\n  animation:\r\n    nkScroll 1.8s\r\n    ease-in-out infinite;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ANIMATIONS\r\n========================================================= *\/\r\n\r\n@keyframes nkFadeUp {\r\n\r\n  from {\r\n    opacity: 0;\r\n    transform:\r\n      translateY(25px);\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n    transform:\r\n      translateY(0);\r\n  }\r\n\r\n}\r\n\r\n@keyframes nkFadeIn {\r\n\r\n  from {\r\n    opacity: 0;\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n  }\r\n\r\n}\r\n\r\n@keyframes nkFloat {\r\n\r\n  0%,100% {\r\n    transform:\r\n      translateY(0);\r\n  }\r\n\r\n  50% {\r\n    transform:\r\n      translateY(-12px);\r\n  }\r\n\r\n}\r\n\r\n@keyframes nkPulse {\r\n\r\n  0%,100% {\r\n    transform:\r\n      scale(1);\r\n    opacity: 1;\r\n  }\r\n\r\n  50% {\r\n    transform:\r\n      scale(1.15);\r\n    opacity: .7;\r\n  }\r\n\r\n}\r\n\r\n@keyframes nkRotate {\r\n\r\n  from {\r\n    transform:\r\n      rotate(0deg);\r\n  }\r\n\r\n  to {\r\n    transform:\r\n      rotate(360deg);\r\n  }\r\n\r\n}\r\n\r\n@keyframes nkScroll {\r\n\r\n  0%,100% {\r\n    transform:\r\n      translateY(0);\r\n    opacity: .5;\r\n  }\r\n\r\n  50% {\r\n    transform:\r\n      translateY(8px);\r\n    opacity: 1;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 1024px) {\r\n\r\n  #naim-portfolio .nk-hero-grid {\r\n\r\n    grid-template-columns:\r\n      1fr 1fr;\r\n\r\n    gap: 30px;\r\n  }\r\n\r\n  #naim-portfolio .nk-title {\r\n\r\n    font-size:\r\n      clamp(\r\n        46px,\r\n        6vw,\r\n        68px\r\n      );\r\n  }\r\n\r\n  #naim-portfolio .nk-profile {\r\n\r\n    width: 290px;\r\n    height: 390px;\r\n  }\r\n\r\n  #naim-portfolio .nk-orbit {\r\n\r\n    width: 400px;\r\n    height: 400px;\r\n  }\r\n\r\n  #naim-portfolio .nk-orbit-2 {\r\n\r\n    width: 315px;\r\n    height: 315px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n  #naim-portfolio .nk-header {\r\n\r\n    padding:\r\n      10px 12px;\r\n  }\r\n\r\n  #naim-portfolio .nk-header-inner {\r\n\r\n    height: 60px;\r\n\r\n    padding:\r\n      0 12px;\r\n\r\n    border-radius: 14px;\r\n  }\r\n\r\n  #naim-portfolio .nk-nav,\r\n  #naim-portfolio .nk-header-btn {\r\n\r\n    display: none;\r\n  }\r\n\r\n  #naim-portfolio .nk-menu-btn {\r\n\r\n    display: block;\r\n  }\r\n\r\n  #naim-portfolio .nk-hero {\r\n\r\n    min-height: auto;\r\n\r\n    padding:\r\n      125px\r\n      18px\r\n      75px;\r\n  }\r\n\r\n  #naim-portfolio .nk-hero-grid {\r\n\r\n    grid-template-columns:\r\n      1fr;\r\n\r\n    gap: 45px;\r\n  }\r\n\r\n  #naim-portfolio .nk-hero-left {\r\n\r\n    text-align: center;\r\n  }\r\n\r\n  #naim-portfolio .nk-eyebrow {\r\n\r\n    font-size: 9px;\r\n  }\r\n\r\n  #naim-portfolio .nk-title {\r\n\r\n    margin-top: 20px;\r\n\r\n    font-size:\r\n      clamp(\r\n        43px,\r\n        13vw,\r\n        62px\r\n      );\r\n\r\n    letter-spacing:\r\n      -2.8px;\r\n  }\r\n\r\n  #naim-portfolio .nk-description {\r\n\r\n    margin-left: auto;\r\n    margin-right: auto;\r\n\r\n    font-size: 14px;\r\n\r\n    line-height: 1.75;\r\n  }\r\n\r\n  #naim-portfolio .nk-buttons {\r\n\r\n    justify-content: center;\r\n  }\r\n\r\n  #naim-portfolio .nk-mini-stats {\r\n\r\n    justify-content: center;\r\n\r\n    gap: 25px;\r\n\r\n    margin-top: 35px;\r\n  }\r\n\r\n  #naim-portfolio .nk-mini-stat strong {\r\n\r\n    font-size: 19px;\r\n  }\r\n\r\n  #naim-portfolio .nk-mini-stat span {\r\n\r\n    font-size: 9px;\r\n  }\r\n\r\n  #naim-portfolio .nk-visual {\r\n\r\n    min-height: 500px;\r\n  }\r\n\r\n  #naim-portfolio .nk-profile {\r\n\r\n    width: 250px;\r\n    height: 340px;\r\n  }\r\n\r\n  #naim-portfolio .nk-orbit {\r\n\r\n    width: 340px;\r\n    height: 340px;\r\n  }\r\n\r\n  #naim-portfolio .nk-orbit-2 {\r\n\r\n    width: 280px;\r\n    height: 280px;\r\n  }\r\n\r\n  #naim-portfolio .nk-float {\r\n\r\n    padding:\r\n      9px 11px;\r\n  }\r\n\r\n  #naim-portfolio .nk-float-1 {\r\n\r\n    left: 0;\r\n    top: 75px;\r\n  }\r\n\r\n  #naim-portfolio .nk-float-2 {\r\n\r\n    right: 0;\r\n    top: 150px;\r\n  }\r\n\r\n  #naim-portfolio .nk-float-3 {\r\n\r\n    left: 0;\r\n    bottom: 70px;\r\n  }\r\n\r\n  #naim-portfolio .nk-visual-label,\r\n  #naim-portfolio .nk-scroll {\r\n\r\n    display: none;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 390px) {\r\n\r\n  #naim-portfolio .nk-profile {\r\n\r\n    width: 225px;\r\n    height: 310px;\r\n  }\r\n\r\n  #naim-portfolio .nk-orbit {\r\n\r\n    width: 300px;\r\n    height: 300px;\r\n  }\r\n\r\n  #naim-portfolio .nk-orbit-2 {\r\n\r\n    width: 250px;\r\n    height: 250px;\r\n  }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\n     PORTFOLIO\r\n========================================================= -->\r\n\r\n<div id=\"naim-portfolio\">\r\n\r\n\r\n  <!-- ================= HEADER ================= -->\r\n\r\n  <header\r\n    class=\"nk-header\"\r\n    id=\"nkHeader\"\r\n  >\r\n\r\n    <div class=\"nk-header-inner\">\r\n\r\n\r\n      <!-- LOGO -->\r\n\r\n      <a\r\n        href=\"#nk-home\"\r\n        class=\"nk-logo\"\r\n      >\r\n\r\n        <div class=\"nk-logo-mark\">\r\n          NK\r\n        <\/div>\r\n\r\n        <div class=\"nk-logo-text\">\r\n          Md. Naim <span>Khan<\/span>\r\n        <\/div>\r\n\r\n      <\/a>\r\n\r\n\r\n      <!-- NAVIGATION -->\r\n\r\n      <nav class=\"nk-nav\">\r\n\r\n        <a href=\"#nk-home\">\r\n          Home\r\n        <\/a>\r\n\r\n        <a href=\"#nk-about\">\r\n          About\r\n        <\/a>\r\n\r\n        <a href=\"#nk-services\">\r\n          Services\r\n        <\/a>\r\n\r\n        <a href=\"#nk-projects\">\r\n          Work\r\n        <\/a>\r\n\r\n        <a href=\"#nk-contact\">\r\n          Contact\r\n        <\/a>\r\n\r\n      <\/nav>\r\n\r\n\r\n      <!-- HEADER CTA -->\r\n\r\n      <a\r\n        href=\"#nk-contact\"\r\n        class=\"nk-header-btn\"\r\n      >\r\n        Let's Talk\r\n      <\/a>\r\n\r\n\r\n      <!-- MOBILE BUTTON -->\r\n\r\n      <button\r\n        class=\"nk-menu-btn\"\r\n        id=\"nkMenuBtn\"\r\n        aria-label=\"Open Menu\"\r\n      >\r\n\r\n        <span><\/span>\r\n        <span><\/span>\r\n        <span><\/span>\r\n\r\n      <\/button>\r\n\r\n    <\/div>\r\n\r\n  <\/header>\r\n\r\n\r\n  <!-- ================= HERO ================= -->\r\n\r\n  <section\r\n    class=\"nk-hero\"\r\n    id=\"nk-home\"\r\n  >\r\n\r\n    <div class=\"nk-hero-grid\">\r\n\r\n\r\n      <!-- ================= LEFT ================= -->\r\n\r\n      <div class=\"nk-hero-left\">\r\n\r\n\r\n        <!-- AVAILABLE BADGE -->\r\n\r\n        <div class=\"nk-eyebrow\">\r\n\r\n          <span class=\"nk-eyebrow-dot\"><\/span>\r\n\r\n          Available for New Projects\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- TITLE -->\r\n\r\n        <h1 class=\"nk-title\">\r\n\r\n          <span>\r\n            Digital\r\n          <\/span>\r\n\r\n          <span class=\"nk-gradient\">\r\n            Marketer\r\n          <\/span>\r\n\r\n          <span>\r\n            &amp; Web Designer\r\n          <\/span>\r\n\r\n        <\/h1>\r\n\r\n\r\n        <!-- DESCRIPTION -->\r\n\r\n        <p class=\"nk-description\">\r\n\r\n          Hi, I'm\r\n          <strong>\r\n            Md. Naim Khan\r\n          <\/strong>\r\n          \u2014 a digital marketer and web designer\r\n          focused on building\r\n          <strong>\r\n            high-converting campaigns,\r\n            websites and creative digital experiences.\r\n          <\/strong>\r\n\r\n        <\/p>\r\n\r\n\r\n        <!-- BUTTONS -->\r\n\r\n        <div class=\"nk-buttons\">\r\n\r\n\r\n          <a\r\n            href=\"#nk-projects\"\r\n            class=\"nk-btn nk-btn-primary\"\r\n          >\r\n\r\n            View My Work\r\n\r\n            <span>\r\n              \u2197\r\n            <\/span>\r\n\r\n          <\/a>\r\n\r\n\r\n          <a\r\n            href=\"#nk-contact\"\r\n            class=\"nk-btn nk-btn-secondary\"\r\n          >\r\n\r\n            Let's Work Together\r\n\r\n          <\/a>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- MINI STATS -->\r\n\r\n        <div class=\"nk-mini-stats\">\r\n\r\n\r\n          <div class=\"nk-mini-stat\">\r\n\r\n            <strong>\r\n              3+\r\n            <\/strong>\r\n\r\n            <span>\r\n              Years Experience\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"nk-mini-stat\">\r\n\r\n            <strong>\r\n              50+\r\n            <\/strong>\r\n\r\n            <span>\r\n              Projects\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"nk-mini-stat\">\r\n\r\n            <strong>\r\n              20+\r\n            <\/strong>\r\n\r\n            <span>\r\n              Brands\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"nk-mini-stat\">\r\n\r\n            <strong>\r\n              100+\r\n            <\/strong>\r\n\r\n            <span>\r\n              Creatives\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- ================= RIGHT VISUAL ================= -->\r\n\r\n      <div\r\n        class=\"nk-visual\"\r\n        id=\"nkVisual\"\r\n      >\r\n\r\n\r\n        <!-- ORBITS -->\r\n\r\n        <div class=\"nk-orbit\"><\/div>\r\n\r\n        <div\r\n          class=\"nk-orbit nk-orbit-2\"\r\n        ><\/div>\r\n\r\n\r\n        <!-- PROFILE IMAGE -->\r\n\r\n        <div class=\"nk-profile\">\r\n\r\n          <img fetchpriority=\"high\" decoding=\"async\"\r\n            src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-Sep-27-2026-01_22_58-PM.png\"\r\n            alt=\"Md Naim Khan - Digital Marketer and Web Designer\"\r\n            width=\"330\"\r\n            height=\"430\"\r\n            fetchpriority=\"high\"\r\n          >\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- META ADS CARD -->\r\n\r\n        <div\r\n          class=\"nk-float nk-float-1\"\r\n        >\r\n\r\n          <div class=\"nk-float-icon\">\r\n            \u25c9\r\n          <\/div>\r\n\r\n          <div>\r\n\r\n            <strong>\r\n              Meta Ads\r\n            <\/strong>\r\n\r\n            <span>\r\n              Performance Marketing\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- WORDPRESS CARD -->\r\n\r\n        <div\r\n          class=\"nk-float nk-float-2\"\r\n        >\r\n\r\n          <div class=\"nk-float-icon\">\r\n            \u25c7\r\n          <\/div>\r\n\r\n          <div>\r\n\r\n            <strong>\r\n              WordPress\r\n            <\/strong>\r\n\r\n            <span>\r\n              Web Design\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- CREATIVE CARD -->\r\n\r\n        <div\r\n          class=\"nk-float nk-float-3\"\r\n        >\r\n\r\n          <div class=\"nk-float-icon\">\r\n            \u2726\r\n          <\/div>\r\n\r\n          <div>\r\n\r\n            <strong>\r\n              Creative\r\n            <\/strong>\r\n\r\n            <span>\r\n              Design &amp; Content\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- VISUAL LABEL -->\r\n\r\n        <div class=\"nk-visual-label\">\r\n          DIGITAL \u2022 CREATIVE \u2022 PERFORMANCE\r\n        <\/div>\r\n\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- SCROLL INDICATOR -->\r\n\r\n    <div class=\"nk-scroll\">\r\n\r\n      Scroll to explore\r\n\r\n      <span\r\n        class=\"nk-scroll-line\"\r\n      ><\/span>\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/section>\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\n\r\n(function(){\r\n\r\n  const root =\r\n    document.getElementById(\r\n      \"naim-portfolio\"\r\n    );\r\n\r\n  if(!root) return;\r\n\r\n\r\n  \/* =====================================================\r\n     HEADER SCROLL\r\n  ===================================================== *\/\r\n\r\n  const header =\r\n    root.querySelector(\r\n      \"#nkHeader\"\r\n    );\r\n\r\n  function updateHeader(){\r\n\r\n    if(window.scrollY > 30){\r\n\r\n      header.classList.add(\r\n        \"scrolled\"\r\n      );\r\n\r\n    } else {\r\n\r\n      header.classList.remove(\r\n        \"scrolled\"\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n  window.addEventListener(\r\n    \"scroll\",\r\n    updateHeader,\r\n    { passive:true }\r\n  );\r\n\r\n  updateHeader();\r\n\r\n\r\n  \/* =====================================================\r\n     SMOOTH SCROLL\r\n  ===================================================== *\/\r\n\r\n  root\r\n    .querySelectorAll(\r\n      'a[href^=\"#\"]'\r\n    )\r\n    .forEach(function(link){\r\n\r\n      link.addEventListener(\r\n        \"click\",\r\n        function(e){\r\n\r\n          const targetId =\r\n            this.getAttribute(\r\n              \"href\"\r\n            );\r\n\r\n          if(\r\n            !targetId ||\r\n            targetId === \"#\"\r\n          ) {\r\n            return;\r\n          }\r\n\r\n          const target =\r\n            document.querySelector(\r\n              targetId\r\n            );\r\n\r\n          if(!target) {\r\n            return;\r\n          }\r\n\r\n          e.preventDefault();\r\n\r\n          target.scrollIntoView({\r\n            behavior: \"smooth\",\r\n            block: \"start\"\r\n          });\r\n\r\n        }\r\n      );\r\n\r\n    });\r\n\r\n\r\n  \/* =====================================================\r\n     MOUSE PARALLAX\r\n  ===================================================== *\/\r\n\r\n  const visual =\r\n    root.querySelector(\r\n      \"#nkVisual\"\r\n    );\r\n\r\n  const profile =\r\n    root.querySelector(\r\n      \".nk-profile\"\r\n    );\r\n\r\n  if(\r\n    visual &&\r\n    profile &&\r\n    window.matchMedia(\r\n      \"(min-width: 768px)\"\r\n    ).matches\r\n  ){\r\n\r\n    visual.addEventListener(\r\n      \"mousemove\",\r\n      function(e){\r\n\r\n        const rect =\r\n          visual.getBoundingClientRect();\r\n\r\n        const x =\r\n          (e.clientX - rect.left)\r\n          \/ rect.width - .5;\r\n\r\n        const y =\r\n          (e.clientY - rect.top)\r\n          \/ rect.height - .5;\r\n\r\n        profile.style.transform =\r\n          \"translate(\" +\r\n          (x * 10) +\r\n          \"px,\" +\r\n          (y * 10) +\r\n          \"px) translateZ(20px)\";\r\n\r\n      }\r\n    );\r\n\r\n\r\n    visual.addEventListener(\r\n      \"mouseleave\",\r\n      function(){\r\n\r\n        profile.style.transform =\r\n          \"translateZ(20px)\";\r\n\r\n      }\r\n    );\r\n\r\n  }\r\n\r\n\r\n  \/* =====================================================\r\n     REDUCE MOTION\r\n  ===================================================== *\/\r\n\r\n  const reducedMotion =\r\n    window.matchMedia(\r\n      \"(prefers-reduced-motion: reduce)\"\r\n    );\r\n\r\n  if(reducedMotion.matches){\r\n\r\n    root\r\n      .querySelectorAll(\"*\")\r\n      .forEach(function(el){\r\n\r\n        el.style.animationDuration =\r\n          \"0.01ms\";\r\n\r\n        el.style.animationIterationCount =\r\n          \"1\";\r\n\r\n        el.style.transitionDuration =\r\n          \"0.01ms\";\r\n\r\n      });\r\n\r\n  }\r\n\r\n})();\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d44e33 elementor-widget elementor-widget-html\" data-id=\"5d44e33\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* =========================================================\r\n   MD NAIM KHAN PORTFOLIO\r\n   STEP 02 \u2014 ABOUT + STATS + SERVICES\r\n========================================================= *\/\r\n\r\n#nk-step2 {\r\n  --bg: #050507;\r\n  --card: #0c0c12;\r\n  --card2: #101017;\r\n  --text: #fff;\r\n  --muted: #9999a7;\r\n  --purple: #8b5cf6;\r\n  --blue: #3b82f6;\r\n  --cyan: #22d3ee;\r\n  --border: rgba(255,255,255,.08);\r\n\r\n  position: relative;\r\n  background: var(--bg);\r\n  color: var(--text);\r\n\r\n  font-family: Inter, Arial, sans-serif;\r\n\r\n  overflow: hidden;\r\n}\r\n\r\n#nk-step2 *,\r\n#nk-step2 *::before,\r\n#nk-step2 *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   COMMON\r\n========================================================= *\/\r\n\r\n#nk-step2 .nk2-container {\r\n  width: min(1240px, calc(100% - 60px));\r\n  margin: auto;\r\n}\r\n\r\n#nk-step2 .nk2-section {\r\n  position: relative;\r\n  padding: 120px 0;\r\n}\r\n\r\n#nk-step2 .nk2-label {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 9px;\r\n\r\n  padding: 7px 13px;\r\n\r\n  border: 1px solid rgba(139,92,246,.22);\r\n  border-radius: 50px;\r\n\r\n  background: rgba(139,92,246,.06);\r\n\r\n  color: #bca7ff;\r\n\r\n  font-size: 10px;\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 1.5px;\r\n  text-transform: uppercase;\r\n}\r\n\r\n#nk-step2 .nk2-label::before {\r\n  content: \"\";\r\n\r\n  width: 6px;\r\n  height: 6px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: var(--purple);\r\n\r\n  box-shadow:\r\n    0 0 12px rgba(139,92,246,.9);\r\n}\r\n\r\n#nk-step2 .nk2-heading {\r\n  margin: 20px 0 0;\r\n\r\n  font-size: clamp(38px, 5vw, 65px);\r\n\r\n  line-height: 1;\r\n\r\n  letter-spacing: -3px;\r\n\r\n  font-weight: 900;\r\n}\r\n\r\n#nk-step2 .nk2-heading span {\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #fff,\r\n      #b59cff,\r\n      #60a5fa\r\n    );\r\n\r\n  -webkit-background-clip: text;\r\n  background-clip: text;\r\n\r\n  -webkit-text-fill-color: transparent;\r\n}\r\n\r\n#nk-step2 .nk2-description {\r\n  color: var(--muted);\r\n\r\n  font-size: 15px;\r\n  line-height: 1.8;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ABOUT\r\n========================================================= *\/\r\n\r\n#nk-step2 .nk2-about {\r\n  position: relative;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 10% 40%,\r\n      rgba(124,58,237,.08),\r\n      transparent 35%\r\n    );\r\n}\r\n\r\n#nk-step2 .nk2-about-grid {\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    .85fr\r\n    1.15fr;\r\n\r\n  gap: 90px;\r\n\r\n  align-items: center;\r\n}\r\n\r\n\r\n\/* ABOUT VISUAL *\/\r\n\r\n#nk-step2 .nk2-about-visual {\r\n  position: relative;\r\n\r\n  min-height: 510px;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n#nk-step2 .nk2-about-box {\r\n  position: relative;\r\n\r\n  width: 390px;\r\n  height: 460px;\r\n\r\n  overflow: hidden;\r\n\r\n  border-radius: 30px;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255,255,255,.1);\r\n\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      #17121f,\r\n      #08080d\r\n    );\r\n\r\n  box-shadow:\r\n    0 35px 100px rgba(0,0,0,.5);\r\n}\r\n\r\n#nk-step2 .nk2-about-box::before {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(139,92,246,.16),\r\n      transparent 45%\r\n    );\r\n\r\n  z-index: 1;\r\n\r\n  pointer-events: none;\r\n}\r\n\r\n#nk-step2 .nk2-about-box img {\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  object-fit: cover;\r\n\r\n  display: block;\r\n\r\n  transition: .6s ease;\r\n}\r\n\r\n#nk-step2 .nk2-about-box:hover img {\r\n  transform: scale(1.035);\r\n}\r\n\r\n\r\n\/* DECORATIVE RING *\/\r\n\r\n#nk-step2 .nk2-ring {\r\n  position: absolute;\r\n\r\n  width: 470px;\r\n  height: 470px;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(139,92,246,.12);\r\n\r\n  border-radius: 50%;\r\n\r\n  animation:\r\n    nk2Rotate 25s linear infinite;\r\n}\r\n\r\n#nk-step2 .nk2-ring::after {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  width: 9px;\r\n  height: 9px;\r\n\r\n  top: 18px;\r\n  right: 65px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: var(--cyan);\r\n\r\n  box-shadow:\r\n    0 0 20px var(--cyan);\r\n}\r\n\r\n\r\n\/* ABOUT FLOAT CARD *\/\r\n\r\n#nk-step2 .nk2-about-card {\r\n  position: absolute;\r\n\r\n  right: 0;\r\n  bottom: 30px;\r\n\r\n  padding: 18px 20px;\r\n\r\n  min-width: 190px;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255,255,255,.1);\r\n\r\n  border-radius: 16px;\r\n\r\n  background:\r\n    rgba(13,13,20,.78);\r\n\r\n  backdrop-filter: blur(18px);\r\n  -webkit-backdrop-filter: blur(18px);\r\n\r\n  box-shadow:\r\n    0 20px 60px rgba(0,0,0,.4);\r\n\r\n  animation:\r\n    nk2Float 5s ease-in-out infinite;\r\n}\r\n\r\n#nk-step2 .nk2-about-card strong {\r\n  display: block;\r\n\r\n  font-size: 25px;\r\n  font-weight: 900;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--purple),\r\n      var(--blue)\r\n    );\r\n\r\n  -webkit-background-clip: text;\r\n  background-clip: text;\r\n\r\n  -webkit-text-fill-color: transparent;\r\n}\r\n\r\n#nk-step2 .nk2-about-card span {\r\n  color: #888895;\r\n\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n}\r\n\r\n\r\n\/* ABOUT CONTENT *\/\r\n\r\n#nk-step2 .nk2-about-content {\r\n  max-width: 650px;\r\n}\r\n\r\n#nk-step2 .nk2-about-content h3 {\r\n  margin: 24px 0 18px;\r\n\r\n  font-size: 27px;\r\n  line-height: 1.3;\r\n\r\n  font-weight: 800;\r\n}\r\n\r\n#nk-step2 .nk2-about-content p {\r\n  margin: 0 0 17px;\r\n\r\n  color: var(--muted);\r\n\r\n  font-size: 15px;\r\n  line-height: 1.85;\r\n}\r\n\r\n#nk-step2 .nk2-highlight {\r\n  color: #fff;\r\n  font-weight: 700;\r\n}\r\n\r\n\r\n\/* ABOUT TAGS *\/\r\n\r\n#nk-step2 .nk2-tags {\r\n  display: flex;\r\n\r\n  flex-wrap: wrap;\r\n\r\n  gap: 9px;\r\n\r\n  margin-top: 28px;\r\n}\r\n\r\n#nk-step2 .nk2-tag {\r\n  padding: 9px 13px;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255,255,255,.08);\r\n\r\n  border-radius: 9px;\r\n\r\n  background:\r\n    rgba(255,255,255,.03);\r\n\r\n  color: #b7b7c2;\r\n\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n\r\n  transition: .25s ease;\r\n}\r\n\r\n#nk-step2 .nk2-tag:hover {\r\n  color: #fff;\r\n\r\n  border-color:\r\n    rgba(139,92,246,.35);\r\n\r\n  background:\r\n    rgba(139,92,246,.08);\r\n\r\n  transform:\r\n    translateY(-2px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   STATS\r\n========================================================= *\/\r\n\r\n#nk-step2 .nk2-stats {\r\n  position: relative;\r\n\r\n  padding: 25px 0 90px;\r\n}\r\n\r\n#nk-step2 .nk2-stats-grid {\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    repeat(4, 1fr);\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255,255,255,.08);\r\n\r\n  border-radius: 24px;\r\n\r\n  overflow: hidden;\r\n\r\n  background:\r\n    rgba(255,255,255,.02);\r\n}\r\n\r\n#nk-step2 .nk2-stat {\r\n  position: relative;\r\n\r\n  padding: 35px 25px;\r\n\r\n  text-align: center;\r\n\r\n  border-right:\r\n    1px solid\r\n    rgba(255,255,255,.07);\r\n\r\n  transition: .35s ease;\r\n}\r\n\r\n#nk-step2 .nk2-stat:last-child {\r\n  border-right: 0;\r\n}\r\n\r\n#nk-step2 .nk2-stat:hover {\r\n  background:\r\n    rgba(139,92,246,.055);\r\n}\r\n\r\n#nk-step2 .nk2-stat strong {\r\n  display: block;\r\n\r\n  font-size: 42px;\r\n\r\n  line-height: 1;\r\n\r\n  font-weight: 900;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #fff,\r\n      #a78bfa,\r\n      #60a5fa\r\n    );\r\n\r\n  -webkit-background-clip: text;\r\n  background-clip: text;\r\n\r\n  -webkit-text-fill-color: transparent;\r\n}\r\n\r\n#nk-step2 .nk2-stat span {\r\n  display: block;\r\n\r\n  margin-top: 10px;\r\n\r\n  color: #858591;\r\n\r\n  font-size: 11px;\r\n  font-weight: 700;\r\n\r\n  text-transform: uppercase;\r\n\r\n  letter-spacing: .8px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SERVICES\r\n========================================================= *\/\r\n\r\n#nk-step2 .nk2-services {\r\n  background:\r\n    radial-gradient(\r\n      circle at 90% 20%,\r\n      rgba(37,99,235,.08),\r\n      transparent 35%\r\n    );\r\n}\r\n\r\n#nk-step2 .nk2-services-head {\r\n  max-width: 720px;\r\n\r\n  margin-bottom: 55px;\r\n}\r\n\r\n#nk-step2 .nk2-services-head p {\r\n  max-width: 620px;\r\n\r\n  margin-top: 20px;\r\n}\r\n\r\n\r\n\/* SERVICE GRID *\/\r\n\r\n#nk-step2 .nk2-service-grid {\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    repeat(4, 1fr);\r\n\r\n  gap: 16px;\r\n}\r\n\r\n\r\n\/* SERVICE CARD *\/\r\n\r\n#nk-step2 .nk2-service {\r\n  position: relative;\r\n\r\n  min-height: 270px;\r\n\r\n  padding: 27px;\r\n\r\n  overflow: hidden;\r\n\r\n  border:\r\n    1px solid\r\n    var(--border);\r\n\r\n  border-radius: 20px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      rgba(255,255,255,.045),\r\n      rgba(255,255,255,.018)\r\n    );\r\n\r\n  transition:\r\n    transform .35s ease,\r\n    border-color .35s ease,\r\n    box-shadow .35s ease;\r\n}\r\n\r\n#nk-step2 .nk2-service::before {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  width: 160px;\r\n  height: 160px;\r\n\r\n  right: -80px;\r\n  top: -80px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle,\r\n      rgba(139,92,246,.22),\r\n      transparent 70%\r\n    );\r\n\r\n  transition: .4s ease;\r\n}\r\n\r\n#nk-step2 .nk2-service:hover {\r\n  transform:\r\n    translateY(-8px);\r\n\r\n  border-color:\r\n    rgba(139,92,246,.3);\r\n\r\n  box-shadow:\r\n    0 25px 60px rgba(0,0,0,.35);\r\n}\r\n\r\n#nk-step2 .nk2-service:hover::before {\r\n  transform: scale(1.4);\r\n}\r\n\r\n\r\n\/* ICON *\/\r\n\r\n#nk-step2 .nk2-service-icon {\r\n  width: 48px;\r\n  height: 48px;\r\n\r\n  display: grid;\r\n\r\n  place-items: center;\r\n\r\n  margin-bottom: 25px;\r\n\r\n  border-radius: 13px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      var(--purple),\r\n      var(--blue)\r\n    );\r\n\r\n  color: #fff;\r\n\r\n  font-size: 19px;\r\n\r\n  box-shadow:\r\n    0 10px 30px rgba(99,70,220,.22);\r\n}\r\n\r\n\r\n\/* SERVICE TEXT *\/\r\n\r\n#nk-step2 .nk2-service h3 {\r\n  margin: 0 0 10px;\r\n\r\n  font-size: 17px;\r\n\r\n  font-weight: 800;\r\n}\r\n\r\n#nk-step2 .nk2-service p {\r\n  margin: 0;\r\n\r\n  color: #858591;\r\n\r\n  font-size: 12px;\r\n\r\n  line-height: 1.7;\r\n}\r\n\r\n#nk-step2 .nk2-service-number {\r\n  position: absolute;\r\n\r\n  right: 20px;\r\n  bottom: 16px;\r\n\r\n  color:\r\n    rgba(255,255,255,.045);\r\n\r\n  font-size: 55px;\r\n\r\n  line-height: 1;\r\n\r\n  font-weight: 900;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REVEAL\r\n========================================================= *\/\r\n\r\n#nk-step2 .nk2-reveal {\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translateY(30px);\r\n\r\n  transition:\r\n    opacity .8s ease,\r\n    transform .8s ease;\r\n}\r\n\r\n#nk-step2 .nk2-reveal.show {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    translateY(0);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ANIMATIONS\r\n========================================================= *\/\r\n\r\n@keyframes nk2Float {\r\n\r\n  0%,100% {\r\n    transform:\r\n      translateY(0);\r\n  }\r\n\r\n  50% {\r\n    transform:\r\n      translateY(-10px);\r\n  }\r\n\r\n}\r\n\r\n@keyframes nk2Rotate {\r\n\r\n  from {\r\n    transform:\r\n      rotate(0deg);\r\n  }\r\n\r\n  to {\r\n    transform:\r\n      rotate(360deg);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media(max-width:1024px){\r\n\r\n  #nk-step2 .nk2-about-grid {\r\n    gap: 45px;\r\n  }\r\n\r\n  #nk-step2 .nk2-service-grid {\r\n    grid-template-columns:\r\n      repeat(2,1fr);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media(max-width:767px){\r\n\r\n  #nk-step2 .nk2-container {\r\n    width:\r\n      calc(100% - 36px);\r\n  }\r\n\r\n  #nk-step2 .nk2-section {\r\n    padding:\r\n      80px 0;\r\n  }\r\n\r\n  #nk-step2 .nk2-heading {\r\n    font-size:\r\n      clamp(\r\n        36px,\r\n        11vw,\r\n        50px\r\n      );\r\n\r\n    letter-spacing:\r\n      -2px;\r\n  }\r\n\r\n  #nk-step2 .nk2-about-grid {\r\n    grid-template-columns:\r\n      1fr;\r\n\r\n    gap: 50px;\r\n  }\r\n\r\n  #nk-step2 .nk2-about-visual {\r\n    min-height: 430px;\r\n  }\r\n\r\n  #nk-step2 .nk2-about-box {\r\n    width: 285px;\r\n    height: 370px;\r\n  }\r\n\r\n  #nk-step2 .nk2-ring {\r\n    width: 340px;\r\n    height: 340px;\r\n  }\r\n\r\n  #nk-step2 .nk2-about-card {\r\n    right:\r\n      calc(50% - 145px);\r\n\r\n    bottom: 0;\r\n  }\r\n\r\n  #nk-step2 .nk2-stats {\r\n    padding:\r\n      0 0 60px;\r\n  }\r\n\r\n  #nk-step2 .nk2-stats-grid {\r\n    grid-template-columns:\r\n      repeat(2,1fr);\r\n\r\n    border-radius: 18px;\r\n  }\r\n\r\n  #nk-step2 .nk2-stat {\r\n    padding:\r\n      27px 15px;\r\n\r\n    border-right:\r\n      1px solid\r\n      rgba(255,255,255,.07);\r\n\r\n    border-bottom:\r\n      1px solid\r\n      rgba(255,255,255,.07);\r\n  }\r\n\r\n  #nk-step2 .nk2-stat:nth-child(2) {\r\n    border-right: 0;\r\n  }\r\n\r\n  #nk-step2 .nk2-stat:nth-child(3) {\r\n    border-bottom: 0;\r\n  }\r\n\r\n  #nk-step2 .nk2-stat:nth-child(4) {\r\n    border-right: 0;\r\n    border-bottom: 0;\r\n  }\r\n\r\n  #nk-step2 .nk2-stat strong {\r\n    font-size: 31px;\r\n  }\r\n\r\n  #nk-step2 .nk2-stat span {\r\n    font-size: 9px;\r\n  }\r\n\r\n  #nk-step2 .nk2-service-grid {\r\n    grid-template-columns:\r\n      1fr;\r\n  }\r\n\r\n  #nk-step2 .nk2-service {\r\n    min-height: 235px;\r\n  }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<div id=\"nk-step2\">\r\n\r\n\r\n  <!-- =====================================================\r\n       ABOUT\r\n  ===================================================== -->\r\n\r\n  <section\r\n    class=\"nk2-section nk2-about\"\r\n    id=\"nk-about\"\r\n  >\r\n\r\n    <div class=\"nk2-container\">\r\n\r\n      <div class=\"nk2-about-grid\">\r\n\r\n\r\n        <!-- VISUAL -->\r\n\r\n        <div class=\"nk2-about-visual nk2-reveal\">\r\n\r\n          <div class=\"nk2-ring\"><\/div>\r\n\r\n          <div class=\"nk2-about-box\">\r\n\r\n            <img loading=\"lazy\" decoding=\"async\"\r\n              src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-Sep-27-2026-01_22_58-PM.png\"\r\n              alt=\"Md Naim Khan\"\r\n              width=\"390\"\r\n              height=\"460\"\r\n              loading=\"lazy\"\r\n            >\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"nk2-about-card\">\r\n\r\n            <strong>\r\n              3+\r\n            <\/strong>\r\n\r\n            <span>\r\n              YEARS OF EXPERIENCE\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- CONTENT -->\r\n\r\n        <div class=\"nk2-about-content nk2-reveal\">\r\n\r\n          <div class=\"nk2-label\">\r\n            About Me\r\n          <\/div>\r\n\r\n          <h2 class=\"nk2-heading\">\r\n\r\n            Building brands\r\n            <span>\r\n              that get noticed.\r\n            <\/span>\r\n\r\n          <\/h2>\r\n\r\n\r\n          <h3>\r\n            Digital Marketing,\r\n            Web Design & Creative Strategy.\r\n          <\/h3>\r\n\r\n\r\n          <p>\r\n            I'm\r\n            <span class=\"nk2-highlight\">\r\n              Md. Naim Khan\r\n            <\/span>,\r\n            a digital marketer and web designer\r\n            with 3+ years of hands-on experience\r\n            working on digital campaigns,\r\n            websites, e-commerce projects and\r\n            creative content.\r\n          <\/p>\r\n\r\n\r\n          <p>\r\n            I combine\r\n            <span class=\"nk2-highlight\">\r\n              strategy, design and performance marketing\r\n            <\/span>\r\n            to create digital experiences that\r\n            look professional and are built with\r\n            business goals in mind.\r\n          <\/p>\r\n\r\n\r\n          <p>\r\n            My work includes Meta Ads, Google Ads,\r\n            WordPress & Elementor websites,\r\n            landing pages, e-commerce marketing,\r\n            social media creatives and video content.\r\n          <\/p>\r\n\r\n\r\n          <div class=\"nk2-tags\">\r\n\r\n            <div class=\"nk2-tag\">\r\n              Meta Ads\r\n            <\/div>\r\n\r\n            <div class=\"nk2-tag\">\r\n              Google Ads\r\n            <\/div>\r\n\r\n            <div class=\"nk2-tag\">\r\n              WordPress\r\n            <\/div>\r\n\r\n            <div class=\"nk2-tag\">\r\n              Elementor\r\n            <\/div>\r\n\r\n            <div class=\"nk2-tag\">\r\n              E-commerce\r\n            <\/div>\r\n\r\n            <div class=\"nk2-tag\">\r\n              Creative Strategy\r\n            <\/div>\r\n\r\n            <div class=\"nk2-tag\">\r\n              Landing Pages\r\n            <\/div>\r\n\r\n            <div class=\"nk2-tag\">\r\n              AI Content\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n\r\n\r\n  <!-- =====================================================\r\n       STATS\r\n  ===================================================== -->\r\n\r\n  <section class=\"nk2-stats\">\r\n\r\n    <div class=\"nk2-container\">\r\n\r\n      <div class=\"nk2-stats-grid nk2-reveal\">\r\n\r\n\r\n        <div class=\"nk2-stat\">\r\n\r\n          <strong>\r\n            3+\r\n          <\/strong>\r\n\r\n          <span>\r\n            Years Experience\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"nk2-stat\">\r\n\r\n          <strong>\r\n            50+\r\n          <\/strong>\r\n\r\n          <span>\r\n            Projects\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"nk2-stat\">\r\n\r\n          <strong>\r\n            20+\r\n          <\/strong>\r\n\r\n          <span>\r\n            Brands\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"nk2-stat\">\r\n\r\n          <strong>\r\n            100+\r\n          <\/strong>\r\n\r\n          <span>\r\n            Creative Works\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n\r\n\r\n  <!-- =====================================================\r\n       SERVICES\r\n  ===================================================== -->\r\n\r\n  <section\r\n    class=\"nk2-section nk2-services\"\r\n    id=\"nk-services\"\r\n  >\r\n\r\n    <div class=\"nk2-container\">\r\n\r\n\r\n      <div class=\"nk2-services-head nk2-reveal\">\r\n\r\n        <div class=\"nk2-label\">\r\n          What I Do\r\n        <\/div>\r\n\r\n        <h2 class=\"nk2-heading\">\r\n\r\n          Services built for\r\n          <span>\r\n            growth.\r\n          <\/span>\r\n\r\n        <\/h2>\r\n\r\n        <p class=\"nk2-description\">\r\n\r\n          From performance marketing to\r\n          website design and creative content,\r\n          I help businesses build a stronger\r\n          digital presence.\r\n\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- SERVICE GRID -->\r\n\r\n      <div class=\"nk2-service-grid\">\r\n\r\n\r\n        <!-- 01 -->\r\n\r\n        <div class=\"nk2-service nk2-reveal\">\r\n\r\n          <div class=\"nk2-service-icon\">\r\n            \u25c9\r\n          <\/div>\r\n\r\n          <h3>\r\n            Meta Ads\r\n          <\/h3>\r\n\r\n          <p>\r\n            Facebook & Instagram advertising,\r\n            campaign setup, audience targeting,\r\n            creative testing and performance\r\n            optimization.\r\n          <\/p>\r\n\r\n          <div class=\"nk2-service-number\">\r\n            01\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- 02 -->\r\n\r\n        <div class=\"nk2-service nk2-reveal\">\r\n\r\n          <div class=\"nk2-service-icon\">\r\n            \u25ce\r\n          <\/div>\r\n\r\n          <h3>\r\n            Google Ads\r\n          <\/h3>\r\n\r\n          <p>\r\n            Search campaigns, keyword strategy,\r\n            conversion-focused setup and\r\n            performance optimization.\r\n          <\/p>\r\n\r\n          <div class=\"nk2-service-number\">\r\n            02\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- 03 -->\r\n\r\n        <div class=\"nk2-service nk2-reveal\">\r\n\r\n          <div class=\"nk2-service-icon\">\r\n            \u25c7\r\n          <\/div>\r\n\r\n          <h3>\r\n            WordPress & Elementor\r\n          <\/h3>\r\n\r\n          <p>\r\n            Modern, responsive and lightweight\r\n            websites, landing pages and\r\n            e-commerce experiences.\r\n          <\/p>\r\n\r\n          <div class=\"nk2-service-number\">\r\n            03\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- 04 -->\r\n\r\n        <div class=\"nk2-service nk2-reveal\">\r\n\r\n          <div class=\"nk2-service-icon\">\r\n            \u2726\r\n          <\/div>\r\n\r\n          <h3>\r\n            Creative Design\r\n          <\/h3>\r\n\r\n          <p>\r\n            Social media creatives, ad banners,\r\n            product visuals, branding and\r\n            marketing graphics.\r\n          <\/p>\r\n\r\n          <div class=\"nk2-service-number\">\r\n            04\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- 05 -->\r\n\r\n        <div class=\"nk2-service nk2-reveal\">\r\n\r\n          <div class=\"nk2-service-icon\">\r\n            \u2197\r\n          <\/div>\r\n\r\n          <h3>\r\n            Landing Pages\r\n          <\/h3>\r\n\r\n          <p>\r\n            Conversion-focused landing pages\r\n            designed around clear messaging,\r\n            strong CTAs and user experience.\r\n          <\/p>\r\n\r\n          <div class=\"nk2-service-number\">\r\n            05\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- 06 -->\r\n\r\n        <div class=\"nk2-service nk2-reveal\">\r\n\r\n          <div class=\"nk2-service-icon\">\r\n            \u25a3\r\n          <\/div>\r\n\r\n          <h3>\r\n            E-commerce Marketing\r\n          <\/h3>\r\n\r\n          <p>\r\n            Product campaigns, funnel strategy,\r\n            creative testing and marketing\r\n            optimization for online stores.\r\n          <\/p>\r\n\r\n          <div class=\"nk2-service-number\">\r\n            06\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- 07 -->\r\n\r\n        <div class=\"nk2-service nk2-reveal\">\r\n\r\n          <div class=\"nk2-service-icon\">\r\n            \u25b6\r\n          <\/div>\r\n\r\n          <h3>\r\n            Video Content\r\n          <\/h3>\r\n\r\n          <p>\r\n            Product videos, UGC-style content,\r\n            reels, short-form videos and\r\n            AI-assisted creative production.\r\n          <\/p>\r\n\r\n          <div class=\"nk2-service-number\">\r\n            07\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- 08 -->\r\n\r\n        <div class=\"nk2-service nk2-reveal\">\r\n\r\n          <div class=\"nk2-service-icon\">\r\n            \u2727\r\n          <\/div>\r\n\r\n          <h3>\r\n            Digital Strategy\r\n          <\/h3>\r\n\r\n          <p>\r\n            Digital campaign planning,\r\n            creative direction, content strategy\r\n            and growth-focused execution.\r\n          <\/p>\r\n\r\n          <div class=\"nk2-service-number\">\r\n            08\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\n(function(){\r\n\r\n  const root =\r\n    document.getElementById(\"nk-step2\");\r\n\r\n  if(!root) return;\r\n\r\n\r\n  const items =\r\n    root.querySelectorAll(\".nk2-reveal\");\r\n\r\n\r\n  \/* =====================================================\r\n     SCROLL REVEAL\r\n  ===================================================== *\/\r\n\r\n  if(\"IntersectionObserver\" in window){\r\n\r\n    const observer =\r\n      new IntersectionObserver(\r\n        function(entries){\r\n\r\n          entries.forEach(function(entry){\r\n\r\n            if(entry.isIntersecting){\r\n\r\n              entry.target.classList.add(\"show\");\r\n\r\n              observer.unobserve(\r\n                entry.target\r\n              );\r\n\r\n            }\r\n\r\n          });\r\n\r\n        },\r\n        {\r\n          threshold: .12\r\n        }\r\n      );\r\n\r\n\r\n    items.forEach(function(item){\r\n\r\n      observer.observe(item);\r\n\r\n    });\r\n\r\n  }else{\r\n\r\n    items.forEach(function(item){\r\n\r\n      item.classList.add(\"show\");\r\n\r\n    });\r\n\r\n  }\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0736def e-flex e-con-boxed e-con e-parent\" data-id=\"0736def\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2df0ac2 elementor-widget elementor-widget-html\" data-id=\"2df0ac2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* =========================================================\r\n   MD NAIM KHAN PORTFOLIO\r\n   STEP 03 \u2014 SKILLS & EXPERTISE\r\n========================================================= *\/\r\n\r\n#nk-step3{\r\n  --bg:#050507;\r\n  --card:#0d0d14;\r\n  --text:#fff;\r\n  --muted:#9696a4;\r\n  --purple:#8b5cf6;\r\n  --blue:#3b82f6;\r\n  --cyan:#22d3ee;\r\n  --border:rgba(255,255,255,.08);\r\n\r\n  position:relative;\r\n  background:var(--bg);\r\n  color:var(--text);\r\n  font-family:Inter,Arial,sans-serif;\r\n  overflow:hidden;\r\n}\r\n\r\n#nk-step3 *,\r\n#nk-step3 *::before,\r\n#nk-step3 *::after{\r\n  box-sizing:border-box;\r\n}\r\n\r\n\r\n\/* =========================\r\n   CONTAINER\r\n========================= *\/\r\n\r\n#nk-step3 .nk3-container{\r\n  width:min(1240px,calc(100% - 60px));\r\n  margin:auto;\r\n}\r\n\r\n#nk-step3 .nk3-section{\r\n  padding:120px 0;\r\n  position:relative;\r\n}\r\n\r\n\r\n\/* =========================\r\n   HEADER\r\n========================= *\/\r\n\r\n#nk-step3 .nk3-head{\r\n  max-width:760px;\r\n  margin-bottom:60px;\r\n}\r\n\r\n#nk-step3 .nk3-label{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:8px;\r\n\r\n  padding:8px 13px;\r\n\r\n  border:1px solid rgba(139,92,246,.22);\r\n  border-radius:50px;\r\n\r\n  background:rgba(139,92,246,.06);\r\n\r\n  color:#bda9ff;\r\n\r\n  font-size:10px;\r\n  font-weight:800;\r\n\r\n  letter-spacing:1.5px;\r\n  text-transform:uppercase;\r\n}\r\n\r\n#nk-step3 .nk3-label::before{\r\n  content:\"\";\r\n\r\n  width:6px;\r\n  height:6px;\r\n\r\n  border-radius:50%;\r\n\r\n  background:var(--purple);\r\n\r\n  box-shadow:0 0 14px var(--purple);\r\n}\r\n\r\n#nk-step3 .nk3-title{\r\n  margin:20px 0 18px;\r\n\r\n  font-size:clamp(40px,5vw,68px);\r\n\r\n  line-height:1;\r\n\r\n  letter-spacing:-3px;\r\n\r\n  font-weight:900;\r\n}\r\n\r\n#nk-step3 .nk3-title span{\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #fff,\r\n      #a78bfa,\r\n      #60a5fa\r\n    );\r\n\r\n  -webkit-background-clip:text;\r\n  background-clip:text;\r\n\r\n  -webkit-text-fill-color:transparent;\r\n}\r\n\r\n#nk-step3 .nk3-description{\r\n  margin:0;\r\n\r\n  max-width:650px;\r\n\r\n  color:var(--muted);\r\n\r\n  font-size:15px;\r\n\r\n  line-height:1.8;\r\n}\r\n\r\n\r\n\/* =========================\r\n   SKILLS GRID\r\n========================= *\/\r\n\r\n#nk-step3 .nk3-grid{\r\n  display:grid;\r\n\r\n  grid-template-columns:\r\n    repeat(2,1fr);\r\n\r\n  gap:18px;\r\n}\r\n\r\n\r\n\/* =========================\r\n   SKILL CARD\r\n========================= *\/\r\n\r\n#nk-step3 .nk3-card{\r\n  position:relative;\r\n\r\n  padding:27px 28px;\r\n\r\n  border:\r\n    1px solid\r\n    var(--border);\r\n\r\n  border-radius:20px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      rgba(255,255,255,.045),\r\n      rgba(255,255,255,.015)\r\n    );\r\n\r\n  overflow:hidden;\r\n\r\n  transition:.35s ease;\r\n}\r\n\r\n#nk-step3 .nk3-card::before{\r\n  content:\"\";\r\n\r\n  position:absolute;\r\n\r\n  width:180px;\r\n  height:180px;\r\n\r\n  right:-90px;\r\n  top:-90px;\r\n\r\n  border-radius:50%;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle,\r\n      rgba(139,92,246,.17),\r\n      transparent 70%\r\n    );\r\n\r\n  transition:.45s ease;\r\n}\r\n\r\n#nk-step3 .nk3-card:hover{\r\n  transform:translateY(-6px);\r\n\r\n  border-color:\r\n    rgba(139,92,246,.3);\r\n\r\n  box-shadow:\r\n    0 25px 60px rgba(0,0,0,.35);\r\n}\r\n\r\n#nk-step3 .nk3-card:hover::before{\r\n  transform:scale(1.4);\r\n}\r\n\r\n\r\n\/* =========================\r\n   TOP\r\n========================= *\/\r\n\r\n#nk-step3 .nk3-top{\r\n  display:flex;\r\n\r\n  align-items:center;\r\n\r\n  justify-content:space-between;\r\n\r\n  margin-bottom:17px;\r\n}\r\n\r\n#nk-step3 .nk3-name{\r\n  display:flex;\r\n\r\n  align-items:center;\r\n\r\n  gap:12px;\r\n\r\n  font-size:15px;\r\n\r\n  font-weight:800;\r\n}\r\n\r\n#nk-step3 .nk3-icon{\r\n  width:38px;\r\n  height:38px;\r\n\r\n  display:grid;\r\n\r\n  place-items:center;\r\n\r\n  border-radius:10px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      var(--purple),\r\n      var(--blue)\r\n    );\r\n\r\n  font-size:13px;\r\n\r\n  box-shadow:\r\n    0 8px 25px rgba(99,70,220,.2);\r\n}\r\n\r\n#nk-step3 .nk3-percent{\r\n  color:#b9a5ff;\r\n\r\n  font-size:13px;\r\n\r\n  font-weight:900;\r\n}\r\n\r\n\r\n\/* =========================\r\n   PROGRESS\r\n========================= *\/\r\n\r\n#nk-step3 .nk3-bar{\r\n  width:100%;\r\n  height:7px;\r\n\r\n  overflow:hidden;\r\n\r\n  border-radius:50px;\r\n\r\n  background:\r\n    rgba(255,255,255,.07);\r\n}\r\n\r\n#nk-step3 .nk3-progress{\r\n  width:0;\r\n\r\n  height:100%;\r\n\r\n  border-radius:50px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--purple),\r\n      var(--blue),\r\n      var(--cyan)\r\n    );\r\n\r\n  box-shadow:\r\n    0 0 18px rgba(99,102,241,.35);\r\n\r\n  transition:\r\n    width 1.5s\r\n    cubic-bezier(.22,1,.36,1);\r\n}\r\n\r\n\r\n\/* =========================\r\n   TAGS\r\n========================= *\/\r\n\r\n#nk-step3 .nk3-tags{\r\n  display:flex;\r\n\r\n  flex-wrap:wrap;\r\n\r\n  gap:7px;\r\n\r\n  margin-top:16px;\r\n}\r\n\r\n#nk-step3 .nk3-tag{\r\n  padding:5px 9px;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255,255,255,.06);\r\n\r\n  border-radius:6px;\r\n\r\n  color:#777783;\r\n\r\n  background:\r\n    rgba(255,255,255,.025);\r\n\r\n  font-size:9px;\r\n\r\n  font-weight:700;\r\n}\r\n\r\n\r\n\/* =========================\r\n   BOTTOM FEATURE\r\n========================= *\/\r\n\r\n#nk-step3 .nk3-bottom{\r\n  margin-top:55px;\r\n\r\n  padding:30px;\r\n\r\n  display:grid;\r\n\r\n  grid-template-columns:\r\n    1fr auto;\r\n\r\n  align-items:center;\r\n\r\n  gap:30px;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(139,92,246,.14);\r\n\r\n  border-radius:22px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      120deg,\r\n      rgba(139,92,246,.07),\r\n      rgba(59,130,246,.035)\r\n    );\r\n}\r\n\r\n#nk-step3 .nk3-bottom h3{\r\n  margin:0 0 8px;\r\n\r\n  font-size:22px;\r\n\r\n  font-weight:800;\r\n}\r\n\r\n#nk-step3 .nk3-bottom p{\r\n  margin:0;\r\n\r\n  color:#858591;\r\n\r\n  font-size:12px;\r\n\r\n  line-height:1.7;\r\n}\r\n\r\n#nk-step3 .nk3-tools{\r\n  display:flex;\r\n\r\n  flex-wrap:wrap;\r\n\r\n  justify-content:flex-end;\r\n\r\n  gap:8px;\r\n\r\n  max-width:430px;\r\n}\r\n\r\n#nk-step3 .nk3-tool{\r\n  padding:9px 12px;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255,255,255,.08);\r\n\r\n  border-radius:8px;\r\n\r\n  background:\r\n    rgba(255,255,255,.035);\r\n\r\n  color:#b5b5c0;\r\n\r\n  font-size:10px;\r\n\r\n  font-weight:700;\r\n\r\n  transition:.25s ease;\r\n}\r\n\r\n#nk-step3 .nk3-tool:hover{\r\n  color:#fff;\r\n\r\n  border-color:\r\n    rgba(139,92,246,.35);\r\n\r\n  transform:translateY(-2px);\r\n}\r\n\r\n\r\n\/* =========================\r\n   REVEAL\r\n========================= *\/\r\n\r\n#nk-step3 .nk3-reveal{\r\n  opacity:0;\r\n\r\n  transform:translateY(30px);\r\n\r\n  transition:\r\n    opacity .8s ease,\r\n    transform .8s ease;\r\n}\r\n\r\n#nk-step3 .nk3-reveal.show{\r\n  opacity:1;\r\n\r\n  transform:translateY(0);\r\n}\r\n\r\n\r\n\/* =========================\r\n   MOBILE\r\n========================= *\/\r\n\r\n@media(max-width:767px){\r\n\r\n  #nk-step3 .nk3-container{\r\n    width:calc(100% - 36px);\r\n  }\r\n\r\n  #nk-step3 .nk3-section{\r\n    padding:80px 0;\r\n  }\r\n\r\n  #nk-step3 .nk3-title{\r\n    font-size:\r\n      clamp(\r\n        38px,\r\n        11vw,\r\n        52px\r\n      );\r\n\r\n    letter-spacing:-2px;\r\n  }\r\n\r\n  #nk-step3 .nk3-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  #nk-step3 .nk3-card{\r\n    padding:23px;\r\n  }\r\n\r\n  #nk-step3 .nk3-bottom{\r\n    grid-template-columns:1fr;\r\n\r\n    padding:25px;\r\n  }\r\n\r\n  #nk-step3 .nk3-tools{\r\n    justify-content:flex-start;\r\n  }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<div id=\"nk-step3\">\r\n\r\n  <section\r\n    class=\"nk3-section\"\r\n    id=\"nk-skills\"\r\n  >\r\n\r\n    <div class=\"nk3-container\">\r\n\r\n\r\n      <!-- HEADER -->\r\n\r\n      <div class=\"nk3-head nk3-reveal\">\r\n\r\n        <div class=\"nk3-label\">\r\n          Skills & Expertise\r\n        <\/div>\r\n\r\n        <h2 class=\"nk3-title\">\r\n\r\n          Tools I use to\r\n          <span>\r\n            make things happen.\r\n          <\/span>\r\n\r\n        <\/h2>\r\n\r\n        <p class=\"nk3-description\">\r\n\r\n          A combination of performance marketing,\r\n          web development, creative design and\r\n          digital strategy that helps turn ideas\r\n          into practical digital results.\r\n\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- SKILLS -->\r\n\r\n      <div class=\"nk3-grid\">\r\n\r\n\r\n        <!-- META ADS -->\r\n\r\n        <div\r\n          class=\"nk3-card nk3-reveal\"\r\n          data-progress=\"95\"\r\n        >\r\n\r\n          <div class=\"nk3-top\">\r\n\r\n            <div class=\"nk3-name\">\r\n\r\n              <div class=\"nk3-icon\">\r\n                \u25c9\r\n              <\/div>\r\n\r\n              Meta Ads\r\n\r\n            <\/div>\r\n\r\n            <div class=\"nk3-percent\">\r\n              95%\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n          <div class=\"nk3-bar\">\r\n            <div class=\"nk3-progress\"><\/div>\r\n          <\/div>\r\n\r\n          <div class=\"nk3-tags\">\r\n\r\n            <span class=\"nk3-tag\">\r\n              Facebook Ads\r\n            <\/span>\r\n\r\n            <span class=\"nk3-tag\">\r\n              Instagram Ads\r\n            <\/span>\r\n\r\n            <span class=\"nk3-tag\">\r\n              Pixel\r\n            <\/span>\r\n\r\n            <span class=\"nk3-tag\">\r\n              Retargeting\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- GOOGLE ADS -->\r\n\r\n        <div\r\n          class=\"nk3-card nk3-reveal\"\r\n          data-progress=\"88\"\r\n        >\r\n\r\n          <div class=\"nk3-top\">\r\n\r\n            <div class=\"nk3-name\">\r\n\r\n              <div class=\"nk3-icon\">\r\n                \u25ce\r\n              <\/div>\r\n\r\n              Google Ads\r\n\r\n            <\/div>\r\n\r\n            <div class=\"nk3-percent\">\r\n              88%\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n          <div class=\"nk3-bar\">\r\n            <div class=\"nk3-progress\"><\/div>\r\n          <\/div>\r\n\r\n          <div class=\"nk3-tags\">\r\n\r\n            <span class=\"nk3-tag\">\r\n              Search Ads\r\n            <\/span>\r\n\r\n            <span class=\"nk3-tag\">\r\n              Keywords\r\n            <\/span>\r\n\r\n            <span class=\"nk3-tag\">\r\n              Conversion\r\n            <\/span>\r\n\r\n            <span class=\"nk3-tag\">\r\n              Analytics\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- WORDPRESS -->\r\n\r\n        <div\r\n          class=\"nk3-card nk3-reveal\"\r\n          data-progress=\"95\"\r\n        >\r\n\r\n          <div class=\"nk3-top\">\r\n\r\n            <div class=\"nk3-name\">\r\n\r\n              <div class=\"nk3-icon\">\r\n                W\r\n              <\/div>\r\n\r\n              WordPress\r\n\r\n            <\/div>\r\n\r\n            <div class=\"nk3-percent\">\r\n              95%\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n          <div class=\"nk3-bar\">\r\n            <div class=\"nk3-progress\"><\/div>\r\n          <\/div>\r\n\r\n          <div class=\"nk3-tags\">\r\n\r\n            <span class=\"nk3-tag\">\r\n              WordPress\r\n            <\/span>\r\n\r\n            <span class=\"nk3-tag\">\r\n              WooCommerce\r\n            <\/span>\r\n\r\n            <span class=\"nk3-tag\">\r\n              Optimization\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- ELEMENTOR -->\r\n\r\n        <div\r\n          class=\"nk3-card nk3-reveal\"\r\n          data-progress=\"95\"\r\n        >\r\n\r\n          <div class=\"nk3-top\">\r\n\r\n            <div class=\"nk3-name\">\r\n\r\n              <div class=\"nk3-icon\">\r\n                E\r\n              <\/div>\r\n\r\n              Elementor\r\n\r\n            <\/div>\r\n\r\n            <div class=\"nk3-percent\">\r\n              95%\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n          <div class=\"nk3-bar\">\r\n            <div class=\"nk3-progress\"><\/div>\r\n          <\/div>\r\n\r\n          <div class=\"nk3-tags\">\r\n\r\n            <span class=\"nk3-tag\">\r\n              Landing Page\r\n            <\/span>\r\n\r\n            <span class=\"nk3-tag\">\r\n              Responsive Design\r\n            <\/span>\r\n\r\n            <span class=\"nk3-tag\">\r\n              Custom CSS\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- CREATIVE DESIGN -->\r\n\r\n        <div\r\n          class=\"nk3-card nk3-reveal\"\r\n          data-progress=\"92\"\r\n        >\r\n\r\n          <div class=\"nk3-top\">\r\n\r\n            <div class=\"nk3-name\">\r\n\r\n              <div class=\"nk3-icon\">\r\n                \u2726\r\n              <\/div>\r\n\r\n              Creative Design\r\n\r\n            <\/div>\r\n\r\n            <div class=\"nk3-percent\">\r\n              92%\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n          <div class=\"nk3-bar\">\r\n            <div class=\"nk3-progress\"><\/div>\r\n          <\/div>\r\n\r\n          <div class=\"nk3-tags\">\r\n\r\n            <span class=\"nk3-tag\">\r\n              Canva\r\n            <\/span>\r\n\r\n            <span class=\"nk3-tag\">\r\n              Photoshop\r\n            <\/span>\r\n\r\n            <span class=\"nk3-tag\">\r\n              Ad Creative\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- LANDING PAGE -->\r\n\r\n        <div\r\n          class=\"nk3-card nk3-reveal\"\r\n          data-progress=\"90\"\r\n        >\r\n\r\n          <div class=\"nk3-top\">\r\n\r\n            <div class=\"nk3-name\">\r\n\r\n              <div class=\"nk3-icon\">\r\n                \u2197\r\n              <\/div>\r\n\r\n              Landing Pages\r\n\r\n            <\/div>\r\n\r\n            <div class=\"nk3-percent\">\r\n              90%\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n          <div class=\"nk3-bar\">\r\n            <div class=\"nk3-progress\"><\/div>\r\n          <\/div>\r\n\r\n          <div class=\"nk3-tags\">\r\n\r\n            <span class=\"nk3-tag\">\r\n              CRO\r\n            <\/span>\r\n\r\n            <span class=\"nk3-tag\">\r\n              CTA\r\n            <\/span>\r\n\r\n            <span class=\"nk3-tag\">\r\n              UX\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- E-COMMERCE -->\r\n\r\n        <div\r\n          class=\"nk3-card nk3-reveal\"\r\n          data-progress=\"90\"\r\n        >\r\n\r\n          <div class=\"nk3-top\">\r\n\r\n            <div class=\"nk3-name\">\r\n\r\n              <div class=\"nk3-icon\">\r\n                \u25c7\r\n              <\/div>\r\n\r\n              E-commerce Marketing\r\n\r\n            <\/div>\r\n\r\n            <div class=\"nk3-percent\">\r\n              90%\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n          <div class=\"nk3-bar\">\r\n            <div class=\"nk3-progress\"><\/div>\r\n          <\/div>\r\n\r\n          <div class=\"nk3-tags\">\r\n\r\n            <span class=\"nk3-tag\">\r\n              Product Ads\r\n            <\/span>\r\n\r\n            <span class=\"nk3-tag\">\r\n              Funnel\r\n            <\/span>\r\n\r\n            <span class=\"nk3-tag\">\r\n              Retargeting\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- VIDEO -->\r\n\r\n        <div\r\n          class=\"nk3-card nk3-reveal\"\r\n          data-progress=\"88\"\r\n        >\r\n\r\n          <div class=\"nk3-top\">\r\n\r\n            <div class=\"nk3-name\">\r\n\r\n              <div class=\"nk3-icon\">\r\n                \u25b6\r\n              <\/div>\r\n\r\n              Video Content\r\n\r\n            <\/div>\r\n\r\n            <div class=\"nk3-percent\">\r\n              88%\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n          <div class=\"nk3-bar\">\r\n            <div class=\"nk3-progress\"><\/div>\r\n          <\/div>\r\n\r\n          <div class=\"nk3-tags\">\r\n\r\n            <span class=\"nk3-tag\">\r\n              CapCut\r\n            <\/span>\r\n\r\n            <span class=\"nk3-tag\">\r\n              Reels\r\n            <\/span>\r\n\r\n            <span class=\"nk3-tag\">\r\n              AI Video\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- TOOLS -->\r\n\r\n      <div class=\"nk3-bottom nk3-reveal\">\r\n\r\n        <div>\r\n\r\n          <h3>\r\n            My digital toolkit\r\n          <\/h3>\r\n\r\n          <p>\r\n            Platforms and tools I regularly use\r\n            for marketing, design, analytics and\r\n            content production.\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"nk3-tools\">\r\n\r\n          <span class=\"nk3-tool\">\r\n            Meta Business Suite\r\n          <\/span>\r\n\r\n          <span class=\"nk3-tool\">\r\n            Meta Ads Manager\r\n          <\/span>\r\n\r\n          <span class=\"nk3-tool\">\r\n            Google Ads\r\n          <\/span>\r\n\r\n          <span class=\"nk3-tool\">\r\n            Google Analytics\r\n          <\/span>\r\n\r\n          <span class=\"nk3-tool\">\r\n            WordPress\r\n          <\/span>\r\n\r\n          <span class=\"nk3-tool\">\r\n            Elementor\r\n          <\/span>\r\n\r\n          <span class=\"nk3-tool\">\r\n            Canva\r\n          <\/span>\r\n\r\n          <span class=\"nk3-tool\">\r\n            CapCut\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\n\r\n(function(){\r\n\r\n  const root =\r\n    document.getElementById(\r\n      \"nk-step3\"\r\n    );\r\n\r\n  if(!root) return;\r\n\r\n\r\n  const cards =\r\n    root.querySelectorAll(\r\n      \".nk3-card\"\r\n    );\r\n\r\n\r\n  const reveals =\r\n    root.querySelectorAll(\r\n      \".nk3-reveal\"\r\n    );\r\n\r\n\r\n  \/* =========================\r\n     REVEAL + PROGRESS\r\n  ========================= *\/\r\n\r\n  function showItem(item){\r\n\r\n    item.classList.add(\"show\");\r\n\r\n    if(\r\n      item.classList.contains(\"nk3-card\")\r\n    ){\r\n\r\n      const progress =\r\n        item.querySelector(\r\n          \".nk3-progress\"\r\n        );\r\n\r\n      const value =\r\n        item.dataset.progress || 0;\r\n\r\n      setTimeout(function(){\r\n\r\n        progress.style.width =\r\n          value + \"%\";\r\n\r\n      },150);\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  if(\r\n    \"IntersectionObserver\"\r\n    in window\r\n  ){\r\n\r\n    const observer =\r\n      new IntersectionObserver(\r\n        function(entries){\r\n\r\n          entries.forEach(\r\n            function(entry){\r\n\r\n              if(\r\n                entry.isIntersecting\r\n              ){\r\n\r\n                showItem(\r\n                  entry.target\r\n                );\r\n\r\n                observer.unobserve(\r\n                  entry.target\r\n                );\r\n\r\n              }\r\n\r\n            }\r\n          );\r\n\r\n        },\r\n        {\r\n          threshold:.12\r\n        }\r\n      );\r\n\r\n\r\n    reveals.forEach(\r\n      function(item){\r\n\r\n        observer.observe(item);\r\n\r\n      }\r\n    );\r\n\r\n  }else{\r\n\r\n    reveals.forEach(\r\n      function(item){\r\n\r\n        showItem(item);\r\n\r\n      }\r\n    );\r\n\r\n  }\r\n\r\n})();\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f24b6ee elementor-widget elementor-widget-html\" data-id=\"f24b6ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n     MD NAIM KHAN \u2014 STEP 4\r\n     BRANDS & PROJECTS\r\n========================================================= -->\r\n\r\n<section id=\"nk-step4\">\r\n\r\n  <div class=\"nk4-wrap\">\r\n\r\n    <!-- HEADER -->\r\n    <div class=\"nk4-head nk4-reveal\">\r\n      <div class=\"nk4-eyebrow\">\r\n        <span><\/span> BRANDS & PROJECTS\r\n      <\/div>\r\n\r\n      <h2>\r\n        Projects I've <b>worked on.<\/b>\r\n      <\/h2>\r\n\r\n      <p>\r\n        A collection of brands, businesses and digital marketing projects\r\n        I've worked with across different industries.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <!-- SEARCH + FILTER -->\r\n    <div class=\"nk4-controls nk4-reveal\">\r\n\r\n      <div class=\"nk4-search\">\r\n        <span>\u2315<\/span>\r\n        <input\r\n          type=\"text\"\r\n          id=\"nk4Search\"\r\n          placeholder=\"Search projects...\"\r\n        >\r\n      <\/div>\r\n\r\n      <div class=\"nk4-filters\">\r\n        <button class=\"nk4-filter active\" data-filter=\"all\">\r\n          All Projects\r\n        <\/button>\r\n\r\n        <button class=\"nk4-filter\" data-filter=\"ON\">\r\n          Active\r\n        <\/button>\r\n\r\n        <button class=\"nk4-filter\" data-filter=\"CLOSED\">\r\n          Completed\r\n        <\/button>\r\n\r\n        <button class=\"nk4-filter\" data-filter=\"HOLD\">\r\n          Hold\r\n        <\/button>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- PROJECT COUNT -->\r\n    <div class=\"nk4-count nk4-reveal\">\r\n      <span id=\"nk4Count\">47<\/span> Projects\r\n    <\/div>\r\n\r\n    <!-- PROJECT GRID -->\r\n    <div id=\"nk4Grid\" class=\"nk4-grid\"><\/div>\r\n\r\n    <!-- EMPTY -->\r\n    <div id=\"nk4Empty\" class=\"nk4-empty\">\r\n      No project found.\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   ROOT\r\n========================================================= *\/\r\n\r\n#nk-step4{\r\n  --nk4-bg:#050507;\r\n  --nk4-card:#0b0b12;\r\n  --nk4-card2:#101019;\r\n  --nk4-text:#ffffff;\r\n  --nk4-muted:#9999a7;\r\n  --nk4-purple:#8b5cf6;\r\n  --nk4-blue:#3b82f6;\r\n  --nk4-cyan:#22d3ee;\r\n  --nk4-border:rgba(255,255,255,.08);\r\n\r\n  position:relative;\r\n  overflow:hidden;\r\n  background:\r\n    radial-gradient(\r\n      circle at 10% 20%,\r\n      rgba(139,92,246,.08),\r\n      transparent 30%\r\n    ),\r\n    radial-gradient(\r\n      circle at 90% 80%,\r\n      rgba(59,130,246,.08),\r\n      transparent 30%\r\n    ),\r\n    var(--nk4-bg);\r\n\r\n  color:var(--nk4-text);\r\n  padding:120px 24px;\r\n  font-family:inherit;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BACKGROUND GLOW\r\n========================================================= *\/\r\n\r\n#nk-step4:before,\r\n#nk-step4:after{\r\n  content:\"\";\r\n  position:absolute;\r\n  width:400px;\r\n  height:400px;\r\n  border-radius:50%;\r\n  filter:blur(100px);\r\n  pointer-events:none;\r\n  opacity:.12;\r\n}\r\n\r\n#nk-step4:before{\r\n  background:var(--nk4-purple);\r\n  left:-220px;\r\n  top:20%;\r\n}\r\n\r\n#nk-step4:after{\r\n  background:var(--nk4-blue);\r\n  right:-220px;\r\n  bottom:10%;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   WRAPPER\r\n========================================================= *\/\r\n\r\n.nk4-wrap{\r\n  max-width:1250px;\r\n  margin:auto;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n.nk4-head{\r\n  text-align:center;\r\n  max-width:760px;\r\n  margin:0 auto 55px;\r\n}\r\n\r\n.nk4-eyebrow{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:9px;\r\n\r\n  font-size:12px;\r\n  font-weight:800;\r\n  letter-spacing:2.5px;\r\n\r\n  color:#b9a4ff;\r\n  margin-bottom:18px;\r\n}\r\n\r\n.nk4-eyebrow span{\r\n  width:7px;\r\n  height:7px;\r\n  border-radius:50%;\r\n\r\n  background:var(--nk4-purple);\r\n\r\n  box-shadow:\r\n    0 0 12px var(--nk4-purple);\r\n}\r\n\r\n.nk4-head h2{\r\n  margin:0;\r\n\r\n  font-size:clamp(38px,5vw,65px);\r\n  line-height:1.05;\r\n  letter-spacing:-2px;\r\n  font-weight:800;\r\n}\r\n\r\n.nk4-head h2 b{\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--nk4-purple),\r\n      var(--nk4-blue),\r\n      var(--nk4-cyan)\r\n    );\r\n\r\n  -webkit-background-clip:text;\r\n  background-clip:text;\r\n  color:transparent;\r\n}\r\n\r\n.nk4-head p{\r\n  color:var(--nk4-muted);\r\n  font-size:16px;\r\n  line-height:1.8;\r\n  margin:22px auto 0;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTROLS\r\n========================================================= *\/\r\n\r\n.nk4-controls{\r\n  display:flex;\r\n  justify-content:space-between;\r\n  align-items:center;\r\n  gap:20px;\r\n  margin-bottom:25px;\r\n}\r\n\r\n.nk4-search{\r\n  width:320px;\r\n  height:48px;\r\n\r\n  display:flex;\r\n  align-items:center;\r\n  gap:10px;\r\n\r\n  padding:0 15px;\r\n\r\n  background:rgba(255,255,255,.035);\r\n  border:1px solid var(--nk4-border);\r\n  border-radius:14px;\r\n\r\n  transition:.3s;\r\n}\r\n\r\n.nk4-search:focus-within{\r\n  border-color:rgba(139,92,246,.6);\r\n\r\n  box-shadow:\r\n    0 0 0 4px rgba(139,92,246,.08);\r\n}\r\n\r\n.nk4-search span{\r\n  font-size:23px;\r\n  color:#888;\r\n}\r\n\r\n.nk4-search input{\r\n  width:100%;\r\n  border:0;\r\n  outline:0;\r\n  background:none;\r\n  color:white;\r\n  font-size:14px;\r\n}\r\n\r\n.nk4-search input::placeholder{\r\n  color:#777783;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FILTERS\r\n========================================================= *\/\r\n\r\n.nk4-filters{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:8px;\r\n}\r\n\r\n.nk4-filter{\r\n  border:1px solid var(--nk4-border);\r\n  background:rgba(255,255,255,.025);\r\n  color:#aaaab5;\r\n\r\n  padding:10px 16px;\r\n  border-radius:999px;\r\n\r\n  font-size:12px;\r\n  font-weight:700;\r\n\r\n  cursor:pointer;\r\n  transition:.3s;\r\n}\r\n\r\n.nk4-filter:hover{\r\n  color:white;\r\n  border-color:rgba(139,92,246,.4);\r\n}\r\n\r\n.nk4-filter.active{\r\n  color:white;\r\n  border-color:transparent;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      var(--nk4-purple),\r\n      var(--nk4-blue)\r\n    );\r\n\r\n  box-shadow:\r\n    0 8px 25px rgba(99,102,241,.2);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   COUNT\r\n========================================================= *\/\r\n\r\n.nk4-count{\r\n  color:#777783;\r\n  font-size:12px;\r\n  margin-bottom:18px;\r\n}\r\n\r\n.nk4-count span{\r\n  color:#c4b5fd;\r\n  font-weight:800;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GRID\r\n========================================================= *\/\r\n\r\n.nk4-grid{\r\n  display:grid;\r\n  grid-template-columns:\r\n    repeat(3,minmax(0,1fr));\r\n\r\n  gap:18px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD\r\n========================================================= *\/\r\n\r\n.nk4-card{\r\n  position:relative;\r\n  overflow:hidden;\r\n\r\n  min-height:245px;\r\n\r\n  padding:25px;\r\n\r\n  border-radius:22px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      rgba(255,255,255,.045),\r\n      rgba(255,255,255,.015)\r\n    );\r\n\r\n  border:1px solid var(--nk4-border);\r\n\r\n  transition:\r\n    transform .4s cubic-bezier(.2,.8,.2,1),\r\n    border-color .3s,\r\n    box-shadow .4s;\r\n\r\n  opacity:0;\r\n  transform:translateY(25px);\r\n}\r\n\r\n.nk4-card.show{\r\n  opacity:1;\r\n  transform:translateY(0);\r\n}\r\n\r\n.nk4-card:hover{\r\n  transform:translateY(-8px);\r\n\r\n  border-color:\r\n    rgba(139,92,246,.38);\r\n\r\n  box-shadow:\r\n    0 25px 70px rgba(0,0,0,.45),\r\n    0 0 40px rgba(139,92,246,.08);\r\n}\r\n\r\n\r\n\/* CARD GLOW *\/\r\n\r\n.nk4-card:before{\r\n  content:\"\";\r\n\r\n  position:absolute;\r\n\r\n  width:180px;\r\n  height:180px;\r\n\r\n  top:-100px;\r\n  right:-100px;\r\n\r\n  border-radius:50%;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle,\r\n      rgba(139,92,246,.2),\r\n      transparent 70%\r\n    );\r\n\r\n  transition:.5s;\r\n}\r\n\r\n.nk4-card:hover:before{\r\n  transform:scale(1.6);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD TOP\r\n========================================================= *\/\r\n\r\n.nk4-card-top{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n\r\n  margin-bottom:22px;\r\n}\r\n\r\n.nk4-logo{\r\n  width:58px;\r\n  height:58px;\r\n\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n\r\n  border-radius:16px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(139,92,246,.17),\r\n      rgba(59,130,246,.13)\r\n    );\r\n\r\n  border:1px solid rgba(255,255,255,.08);\r\n\r\n  font-size:20px;\r\n  font-weight:900;\r\n\r\n  color:white;\r\n\r\n  transition:.4s;\r\n}\r\n\r\n.nk4-card:hover .nk4-logo{\r\n  transform:\r\n    rotate(-4deg)\r\n    scale(1.08);\r\n\r\n  box-shadow:\r\n    0 10px 35px rgba(139,92,246,.22);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   STATUS\r\n========================================================= *\/\r\n\r\n.nk4-status{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:6px;\r\n\r\n  padding:6px 10px;\r\n\r\n  border-radius:999px;\r\n\r\n  font-size:9px;\r\n  font-weight:800;\r\n  letter-spacing:.7px;\r\n\r\n  text-transform:uppercase;\r\n\r\n  border:1px solid rgba(255,255,255,.08);\r\n\r\n  color:#aaa;\r\n}\r\n\r\n.nk4-status:before{\r\n  content:\"\";\r\n  width:5px;\r\n  height:5px;\r\n  border-radius:50%;\r\n  background:#777;\r\n}\r\n\r\n.nk4-status.active{\r\n  color:#b8f7d2;\r\n  background:rgba(34,197,94,.08);\r\n}\r\n\r\n.nk4-status.active:before{\r\n  background:#22c55e;\r\n  box-shadow:0 0 8px #22c55e;\r\n}\r\n\r\n.nk4-status.completed{\r\n  color:#c4b5fd;\r\n  background:rgba(139,92,246,.08);\r\n}\r\n\r\n.nk4-status.completed:before{\r\n  background:#8b5cf6;\r\n}\r\n\r\n.nk4-status.hold{\r\n  color:#fde68a;\r\n  background:rgba(234,179,8,.08);\r\n}\r\n\r\n.nk4-status.hold:before{\r\n  background:#eab308;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD CONTENT\r\n========================================================= *\/\r\n\r\n.nk4-card h3{\r\n  position:relative;\r\n\r\n  margin:0 0 8px;\r\n\r\n  font-size:21px;\r\n  line-height:1.2;\r\n\r\n  color:white;\r\n\r\n  word-break:break-word;\r\n}\r\n\r\n.nk4-card-category{\r\n  color:#898996;\r\n\r\n  font-size:12px;\r\n  line-height:1.5;\r\n\r\n  min-height:18px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BOTTOM\r\n========================================================= *\/\r\n\r\n.nk4-card-bottom{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n\r\n  margin-top:25px;\r\n  padding-top:16px;\r\n\r\n  border-top:1px solid rgba(255,255,255,.06);\r\n}\r\n\r\n.nk4-type{\r\n  color:#6f6f7c;\r\n  font-size:10px;\r\n  text-transform:uppercase;\r\n  letter-spacing:1px;\r\n}\r\n\r\n.nk4-link{\r\n  color:#b9a4ff;\r\n  font-size:11px;\r\n  font-weight:800;\r\n\r\n  text-decoration:none;\r\n\r\n  transition:.3s;\r\n}\r\n\r\n.nk4-link:hover{\r\n  color:white;\r\n  transform:translateX(3px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   EMPTY\r\n========================================================= *\/\r\n\r\n.nk4-empty{\r\n  display:none;\r\n\r\n  text-align:center;\r\n\r\n  padding:60px 20px;\r\n\r\n  color:#777783;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REVEAL\r\n========================================================= *\/\r\n\r\n.nk4-reveal{\r\n  opacity:0;\r\n  transform:translateY(25px);\r\n\r\n  transition:\r\n    opacity .8s ease,\r\n    transform .8s ease;\r\n}\r\n\r\n.nk4-reveal.nk4-visible{\r\n  opacity:1;\r\n  transform:translateY(0);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESPONSIVE\r\n========================================================= *\/\r\n\r\n@media(max-width:1050px){\r\n\r\n  .nk4-grid{\r\n    grid-template-columns:\r\n      repeat(2,minmax(0,1fr));\r\n  }\r\n\r\n}\r\n\r\n@media(max-width:767px){\r\n\r\n  #nk-step4{\r\n    padding:85px 16px;\r\n  }\r\n\r\n  .nk4-head{\r\n    margin-bottom:38px;\r\n  }\r\n\r\n  .nk4-head h2{\r\n    font-size:40px;\r\n    letter-spacing:-1.5px;\r\n  }\r\n\r\n  .nk4-head p{\r\n    font-size:14px;\r\n  }\r\n\r\n  .nk4-controls{\r\n    flex-direction:column;\r\n    align-items:stretch;\r\n  }\r\n\r\n  .nk4-search{\r\n    width:auto;\r\n  }\r\n\r\n  .nk4-filters{\r\n    overflow-x:auto;\r\n    flex-wrap:nowrap;\r\n\r\n    padding-bottom:5px;\r\n  }\r\n\r\n  .nk4-filter{\r\n    flex:0 0 auto;\r\n  }\r\n\r\n  .nk4-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .nk4-card{\r\n    min-height:220px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media(prefers-reduced-motion:reduce){\r\n\r\n  #nk-step4 *,\r\n  #nk-step4 *:before,\r\n  #nk-step4 *:after{\r\n    animation:none !important;\r\n    transition:none !important;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<script>\r\n\r\n(function(){\r\n\r\n\/* =========================================================\r\n   PROJECT DATA\r\n========================================================= *\/\r\n\r\nconst projects = [\r\n\r\n  {\r\n    name:\"Al barakah\",\r\n    status:\"CLOSED\",\r\n    category:\"Tahkeek\"\r\n  },\r\n\r\n  {\r\n    name:\"BlueMaart\",\r\n    status:\"CLOSED\",\r\n    category:\"Therapy Bath Tub\",\r\n    url:\"https:\/\/bluemaart.com\/\"\r\n  },\r\n\r\n  {\r\n    name:\"Buyzamart\",\r\n    status:\"CLOSED\",\r\n    category:\"Tahkeek\",\r\n    url:\"https:\/\/buyzamart.com\/\"\r\n  },\r\n\r\n  {\r\n    name:\"China Souk\",\r\n    status:\"CLOSED\",\r\n    category:\"Tahkeek\"\r\n  },\r\n\r\n  {\r\n    name:\"DealhatBD\",\r\n    status:\"CLOSED\",\r\n    category:\"GPS\",\r\n    url:\"https:\/\/dealhutbd.com\/\"\r\n  },\r\n\r\n  {\r\n    name:\"Eazora\",\r\n    status:\"CLOSED\",\r\n    category:\"Tea Strainer\",\r\n    url:\"https:\/\/eazora.shop\/\"\r\n  },\r\n\r\n  {\r\n    name:\"Green feel\",\r\n    status:\"CLOSED\",\r\n    category:\"Book\"\r\n  },\r\n\r\n  {\r\n    name:\"NextzyBD\",\r\n    status:\"CLOSED\",\r\n    category:\"Potty Pant\",\r\n    url:\"https:\/\/nextzybd.com\/\"\r\n  },\r\n\r\n  {\r\n    name:\"Nobopath\",\r\n    status:\"CLOSED\",\r\n    category:\"GPS\",\r\n    url:\"https:\/\/nobopoth.com\/\"\r\n  },\r\n\r\n  {\r\n    name:\"Winmaart\",\r\n    status:\"CLOSED\",\r\n    category:\"Folding Glass\",\r\n    url:\"https:\/\/winmart.xyz\/\"\r\n  },\r\n\r\n  {\r\n    name:\"Shoppix\",\r\n    status:\"CLOSED\",\r\n    category:\"E-commerce\"\r\n  },\r\n\r\n  {\r\n    name:\"Trendibari\",\r\n    status:\"CLOSED\",\r\n    category:\"Borka\",\r\n    url:\"https:\/\/trendybari.xyz\/\"\r\n  },\r\n\r\n  {\r\n    name:\"Trenditrove\",\r\n    status:\"CLOSED\",\r\n    category:\"Massager\",\r\n    url:\"https:\/\/trenditrove.shop\/\"\r\n  },\r\n\r\n  {\r\n    name:\"Nityamic.com\",\r\n    status:\"CLOSED\",\r\n    category:\"E-commerce\",\r\n    url:\"https:\/\/nityamic.com\/\"\r\n  },\r\n\r\n  {\r\n    name:\"LAHABD\",\r\n    status:\"CLOSED\",\r\n    category:\"E-commerce\"\r\n  },\r\n\r\n  {\r\n    name:\"Sotota Shopping\",\r\n    status:\"CLOSED\",\r\n    category:\"E-commerce\"\r\n  },\r\n\r\n  {\r\n    name:\"Kornomart\",\r\n    status:\"CLOSED\",\r\n    category:\"E-commerce\"\r\n  },\r\n\r\n  {\r\n    name:\"SupermartBD\",\r\n    status:\"CLOSED\",\r\n    category:\"E-commerce\"\r\n  },\r\n\r\n  {\r\n    name:\"Business And Career\",\r\n    status:\"CLOSED\",\r\n    category:\"Business & Career\"\r\n  },\r\n\r\n  {\r\n    name:\"HorekbazarBD\",\r\n    status:\"CLOSED\",\r\n    category:\"E-commerce\"\r\n  },\r\n\r\n  {\r\n    name:\"Naturo Care BD\",\r\n    status:\"CLOSED\",\r\n    category:\"Health & Care\"\r\n  },\r\n\r\n  {\r\n    name:\"Mohonabazar \/ Eassymart\",\r\n    status:\"CLOSED\",\r\n    category:\"E-commerce\"\r\n  },\r\n\r\n  {\r\n    name:\"Winnerbazar\",\r\n    status:\"CLOSED\",\r\n    category:\"E-commerce\"\r\n  },\r\n\r\n  {\r\n    name:\"Cotton Care\",\r\n    status:\"CLOSED\",\r\n    category:\"Windproof Cap & Scarf\"\r\n  },\r\n\r\n  {\r\n    name:\"Smartshoping\",\r\n    status:\"CLOSED\",\r\n    category:\"BRA\",\r\n    url:\"https:\/\/smartshoping.com.bd\/\"\r\n  },\r\n\r\n  {\r\n    name:\"Mayshara\",\r\n    status:\"CLOSED\",\r\n    category:\"E-commerce\"\r\n  },\r\n\r\n  {\r\n    name:\"Ikhlasshop\",\r\n    status:\"CLOSED\",\r\n    category:\"E-commerce\"\r\n  },\r\n\r\n  {\r\n    name:\"Aroggonidhi\",\r\n    status:\"CLOSED\",\r\n    category:\"E-commerce\"\r\n  },\r\n\r\n  {\r\n    name:\"StockUp BD\",\r\n    status:\"HOLD\",\r\n    category:\"E-commerce\"\r\n  },\r\n\r\n  {\r\n    name:\"Easy Shopz\",\r\n    status:\"ON\",\r\n    category:\"Windproof Cap & Scarf\",\r\n    url:\"https:\/\/easyshopz.com\/\"\r\n  },\r\n\r\n  {\r\n    name:\"Zarobazar\",\r\n    status:\"ON\",\r\n    category:\"E-commerce\"\r\n  },\r\n\r\n  {\r\n    name:\"Kroyo\",\r\n    status:\"ON\",\r\n    category:\"E-commerce\"\r\n  },\r\n\r\n  {\r\n    name:\"Nextgenmrt.com\",\r\n    status:\"ON\",\r\n    category:\"E-commerce\"\r\n  },\r\n\r\n  {\r\n    name:\"Sherakinun\",\r\n    status:\"ON\",\r\n    category:\"E-commerce\"\r\n  },\r\n\r\n  {\r\n    name:\"Nurvian Shop\",\r\n    status:\"ON\",\r\n    category:\"E-commerce\"\r\n  },\r\n\r\n  {\r\n    name:\"VintedBD\",\r\n    status:\"ON\",\r\n    category:\"E-commerce\",\r\n    url:\"https:\/\/vintedbd.shop\/\"\r\n  },\r\n\r\n  {\r\n    name:\"DecidBD\",\r\n    status:\"ON\",\r\n    category:\"Gadgets\",\r\n    url:\"https:\/\/decidbd.shop\/\"\r\n  },\r\n\r\n  {\r\n    name:\"Fawja.com\",\r\n    status:\"ON\",\r\n    category:\"E-commerce\",\r\n    url:\"https:\/\/fawja.com\/\"\r\n  },\r\n\r\n  {\r\n    name:\"Gadgetpop\",\r\n    status:\"ON\",\r\n    category:\"Gadgets\"\r\n  },\r\n\r\n  {\r\n    name:\"Shappeal\",\r\n    status:\"ON\",\r\n    category:\"E-commerce\"\r\n  },\r\n\r\n  {\r\n    name:\"Dailymart\",\r\n    status:\"ON\",\r\n    category:\"E-commerce\"\r\n  },\r\n\r\n  {\r\n    name:\"Visinex Mart\",\r\n    status:\"ON\",\r\n    category:\"E-commerce\"\r\n  },\r\n\r\n  {\r\n    name:\"Codflax.com\",\r\n    status:\"ON\",\r\n    category:\"E-commerce\",\r\n    url:\"https:\/\/codflax.com\/\"\r\n  },\r\n\r\n  {\r\n    name:\"Choomok\",\r\n    status:\"ON\",\r\n    category:\"E-commerce\"\r\n  },\r\n\r\n  {\r\n    name:\"Rongginavabd\",\r\n    status:\"ON\",\r\n    category:\"E-commerce\"\r\n  },\r\n\r\n  {\r\n    name:\"Design Creation\",\r\n    status:\"OTHER\",\r\n    category:\"Creative Project\"\r\n  },\r\n\r\n  {\r\n    name:\"Aroggonidhi\",\r\n    status:\"OTHER\",\r\n    category:\"E-commerce\"\r\n  }\r\n\r\n];\r\n\r\n\r\n\/* =========================================================\r\n   ELEMENTS\r\n========================================================= *\/\r\n\r\nconst grid =\r\n  document.getElementById(\"nk4Grid\");\r\n\r\nconst search =\r\n  document.getElementById(\"nk4Search\");\r\n\r\nconst count =\r\n  document.getElementById(\"nk4Count\");\r\n\r\nconst empty =\r\n  document.getElementById(\"nk4Empty\");\r\n\r\nconst filters =\r\n  document.querySelectorAll(\".nk4-filter\");\r\n\r\nlet activeFilter = \"all\";\r\n\r\n\r\n\/* =========================================================\r\n   INITIALS\r\n========================================================= *\/\r\n\r\nfunction initials(name){\r\n\r\n  const words =\r\n    name\r\n      .replace(\/[^a-zA-Z0-9 ]\/g,\" \")\r\n      .trim()\r\n      .split(\/\\s+\/)\r\n      .filter(Boolean);\r\n\r\n  if(!words.length) return \"NK\";\r\n\r\n  if(words.length === 1){\r\n    return words[0].substring(0,2).toUpperCase();\r\n  }\r\n\r\n  return (\r\n    words[0][0] +\r\n    words[1][0]\r\n  ).toUpperCase();\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   STATUS\r\n========================================================= *\/\r\n\r\nfunction statusClass(status){\r\n\r\n  if(status === \"ON\")\r\n    return \"active\";\r\n\r\n  if(status === \"HOLD\")\r\n    return \"hold\";\r\n\r\n  if(status === \"CLOSED\")\r\n    return \"completed\";\r\n\r\n  return \"\";\r\n}\r\n\r\n\r\nfunction statusText(status){\r\n\r\n  if(status === \"ON\")\r\n    return \"ACTIVE\";\r\n\r\n  if(status === \"CLOSED\")\r\n    return \"COMPLETED\";\r\n\r\n  if(status === \"HOLD\")\r\n    return \"ON HOLD\";\r\n\r\n  return \"PROJECT\";\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD\r\n========================================================= *\/\r\n\r\nfunction createCard(project,index){\r\n\r\n  const card =\r\n    document.createElement(\"article\");\r\n\r\n  card.className = \"nk4-card\";\r\n\r\n  card.style.transitionDelay =\r\n    Math.min(index * 35, 350) + \"ms\";\r\n\r\n  const website =\r\n    project.url\r\n      ? `\r\n        <a\r\n          class=\"nk4-link\"\r\n          href=\"${project.url}\"\r\n          target=\"_blank\"\r\n          rel=\"noopener noreferrer\"\r\n        >\r\n          View Website \u2197\r\n        <\/a>\r\n      `\r\n      :\r\n      `\r\n        <span class=\"nk4-link\">\r\n          Project \u2197\r\n        <\/span>\r\n      `;\r\n\r\n  card.innerHTML = `\r\n\r\n    <div class=\"nk4-card-top\">\r\n\r\n      <div class=\"nk4-logo\">\r\n        ${initials(project.name)}\r\n      <\/div>\r\n\r\n      <div class=\"nk4-status ${statusClass(project.status)}\">\r\n        ${statusText(project.status)}\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <h3>\r\n      ${project.name}\r\n    <\/h3>\r\n\r\n\r\n    <div class=\"nk4-card-category\">\r\n      ${project.category || \"Digital Marketing Project\"}\r\n    <\/div>\r\n\r\n\r\n    <div class=\"nk4-card-bottom\">\r\n\r\n      <span class=\"nk4-type\">\r\n        Digital Project\r\n      <\/span>\r\n\r\n      ${website}\r\n\r\n    <\/div>\r\n\r\n  `;\r\n\r\n  return card;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RENDER\r\n========================================================= *\/\r\n\r\nfunction render(){\r\n\r\n  const keyword =\r\n    search.value\r\n      .trim()\r\n      .toLowerCase();\r\n\r\n  const filtered =\r\n    projects.filter(project => {\r\n\r\n      const matchesSearch =\r\n        !keyword ||\r\n        project.name\r\n          .toLowerCase()\r\n          .includes(keyword) ||\r\n        (project.category || \"\")\r\n          .toLowerCase()\r\n          .includes(keyword);\r\n\r\n      let matchesFilter = true;\r\n\r\n      if(activeFilter !== \"all\"){\r\n        matchesFilter =\r\n          project.status === activeFilter;\r\n      }\r\n\r\n      return matchesSearch && matchesFilter;\r\n\r\n    });\r\n\r\n\r\n  grid.innerHTML = \"\";\r\n\r\n  count.textContent =\r\n    filtered.length;\r\n\r\n\r\n  if(!filtered.length){\r\n\r\n    empty.style.display = \"block\";\r\n\r\n    return;\r\n\r\n  }\r\n\r\n  empty.style.display = \"none\";\r\n\r\n\r\n  filtered.forEach((project,index)=>{\r\n\r\n    const card =\r\n      createCard(project,index);\r\n\r\n    grid.appendChild(card);\r\n\r\n    requestAnimationFrame(()=>{\r\n\r\n      requestAnimationFrame(()=>{\r\n\r\n        card.classList.add(\"show\");\r\n\r\n      });\r\n\r\n    });\r\n\r\n  });\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FILTER EVENTS\r\n========================================================= *\/\r\n\r\nfilters.forEach(button=>{\r\n\r\n  button.addEventListener(\"click\",()=>{\r\n\r\n    filters.forEach(btn =>\r\n      btn.classList.remove(\"active\")\r\n    );\r\n\r\n    button.classList.add(\"active\");\r\n\r\n    activeFilter =\r\n      button.dataset.filter;\r\n\r\n    render();\r\n\r\n  });\r\n\r\n});\r\n\r\n\r\n\/* =========================================================\r\n   SEARCH\r\n========================================================= *\/\r\n\r\nsearch.addEventListener(\r\n  \"input\",\r\n  render\r\n);\r\n\r\n\r\n\/* =========================================================\r\n   REVEAL\r\n========================================================= *\/\r\n\r\nconst revealObserver =\r\n  new IntersectionObserver(\r\n    entries=>{\r\n\r\n      entries.forEach(entry=>{\r\n\r\n        if(entry.isIntersecting){\r\n\r\n          entry.target.classList.add(\r\n            \"nk4-visible\"\r\n          );\r\n\r\n          revealObserver.unobserve(\r\n            entry.target\r\n          );\r\n\r\n        }\r\n\r\n      });\r\n\r\n    },\r\n    {\r\n      threshold:.12\r\n    }\r\n  );\r\n\r\n\r\ndocument\r\n  .querySelectorAll(\".nk4-reveal\")\r\n  .forEach(el =>\r\n    revealObserver.observe(el)\r\n  );\r\n\r\n\r\n\/* =========================================================\r\n   START\r\n========================================================= *\/\r\n\r\nrender();\r\n\r\n})();\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-333d18d elementor-widget elementor-widget-html\" data-id=\"333d18d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n     MD NAIM KHAN \u2014 STEP 5\r\n     FEATURED PROJECTS\r\n========================================================= -->\r\n\r\n<section id=\"nk-step5\">\r\n\r\n  <div class=\"nk5-wrap\">\r\n\r\n    <!-- HEADER -->\r\n    <div class=\"nk5-head nk5-reveal\">\r\n\r\n      <div class=\"nk5-eyebrow\">\r\n        <span><\/span>\r\n        FEATURED PROJECTS\r\n      <\/div>\r\n\r\n      <h2>\r\n        Work that turns <b>ideas into results.<\/b>\r\n      <\/h2>\r\n\r\n      <p>\r\n        Selected digital marketing, e-commerce, website and creative\r\n        projects built for brands and businesses.\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- FEATURED PROJECT -->\r\n    <div class=\"nk5-feature nk5-reveal\">\r\n\r\n      <div class=\"nk5-feature-content\">\r\n\r\n        <div class=\"nk5-label\">\r\n          FEATURED WORK\r\n        <\/div>\r\n\r\n        <h3>\r\n          E-commerce Growth\r\n          <span>& Digital Marketing<\/span>\r\n        <\/h3>\r\n\r\n        <p>\r\n          Building and promoting online businesses through strategic\r\n          advertising, landing pages, creative content and conversion-focused\r\n          marketing campaigns.\r\n        <\/p>\r\n\r\n\r\n        <div class=\"nk5-tags\">\r\n\r\n          <span>Meta Ads<\/span>\r\n          <span>Google Ads<\/span>\r\n          <span>WordPress<\/span>\r\n          <span>Landing Page<\/span>\r\n          <span>Creative Strategy<\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"nk5-result-row\">\r\n\r\n          <div>\r\n            <strong>50+<\/strong>\r\n            <small>Projects<\/small>\r\n          <\/div>\r\n\r\n          <div>\r\n            <strong>20+<\/strong>\r\n            <small>Brands<\/small>\r\n          <\/div>\r\n\r\n          <div>\r\n            <strong>3+<\/strong>\r\n            <small>Years<\/small>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"nk5-feature-visual\">\r\n\r\n        <div class=\"nk5-orbit orbit1\"><\/div>\r\n        <div class=\"nk5-orbit orbit2\"><\/div>\r\n\r\n        <div class=\"nk5-dashboard\">\r\n\r\n          <div class=\"nk5-dash-top\">\r\n            <span><\/span>\r\n            <span><\/span>\r\n            <span><\/span>\r\n          <\/div>\r\n\r\n          <div class=\"nk5-chart\">\r\n\r\n            <div class=\"nk5-bars\">\r\n\r\n              <i style=\"height:32%\"><\/i>\r\n              <i style=\"height:48%\"><\/i>\r\n              <i style=\"height:42%\"><\/i>\r\n              <i style=\"height:65%\"><\/i>\r\n              <i style=\"height:58%\"><\/i>\r\n              <i style=\"height:78%\"><\/i>\r\n              <i style=\"height:92%\"><\/i>\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n          <div class=\"nk5-metrics\">\r\n\r\n            <div>\r\n              <small>CTR<\/small>\r\n              <b>4.82%<\/b>\r\n            <\/div>\r\n\r\n            <div>\r\n              <small>ROAS<\/small>\r\n              <b>3.7x<\/b>\r\n            <\/div>\r\n\r\n            <div>\r\n              <small>Growth<\/small>\r\n              <b>+68%<\/b>\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- PROJECT CARDS -->\r\n\r\n    <div class=\"nk5-section-title nk5-reveal\">\r\n\r\n      <div>\r\n        <span>SELECTED PROJECTS<\/span>\r\n        <h3>Recent work<\/h3>\r\n      <\/div>\r\n\r\n      <div class=\"nk5-line\"><\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"nk5-project-grid\">\r\n\r\n\r\n      <!-- PROJECT 01 -->\r\n\r\n      <article class=\"nk5-project nk5-reveal\">\r\n\r\n        <div class=\"nk5-project-number\">\r\n          01\r\n        <\/div>\r\n\r\n        <div class=\"nk5-project-icon\">\r\n          \ud83d\uded2\r\n        <\/div>\r\n\r\n        <div class=\"nk5-project-content\">\r\n\r\n          <span class=\"nk5-project-category\">\r\n            E-COMMERCE\r\n          <\/span>\r\n\r\n          <h4>\r\n            Super Mart BD\r\n          <\/h4>\r\n\r\n          <p>\r\n            E-commerce marketing and digital presence development\r\n            for an online shopping business.\r\n          <\/p>\r\n\r\n          <div class=\"nk5-project-tags\">\r\n            <span>Meta Ads<\/span>\r\n            <span>WordPress<\/span>\r\n            <span>Creative<\/span>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"nk5-arrow\">\r\n          \u2197\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- PROJECT 02 -->\r\n\r\n      <article class=\"nk5-project nk5-reveal\">\r\n\r\n        <div class=\"nk5-project-number\">\r\n          02\r\n        <\/div>\r\n\r\n        <div class=\"nk5-project-icon\">\r\n          \ud83d\udce1\r\n        <\/div>\r\n\r\n        <div class=\"nk5-project-content\">\r\n\r\n          <span class=\"nk5-project-category\">\r\n            PRODUCT MARKETING\r\n          <\/span>\r\n\r\n          <h4>\r\n            DealhatBD\r\n          <\/h4>\r\n\r\n          <p>\r\n            Product-focused advertising and conversion campaigns\r\n            for online customers.\r\n          <\/p>\r\n\r\n          <div class=\"nk5-project-tags\">\r\n            <span>Meta Ads<\/span>\r\n            <span>Product Ads<\/span>\r\n            <span>Landing Page<\/span>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"nk5-arrow\">\r\n          \u2197\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- PROJECT 03 -->\r\n\r\n      <article class=\"nk5-project nk5-reveal\">\r\n\r\n        <div class=\"nk5-project-number\">\r\n          03\r\n        <\/div>\r\n\r\n        <div class=\"nk5-project-icon\">\r\n          \ud83c\udfa8\r\n        <\/div>\r\n\r\n        <div class=\"nk5-project-content\">\r\n\r\n          <span class=\"nk5-project-category\">\r\n            BRANDING\r\n          <\/span>\r\n\r\n          <h4>\r\n            Choita Bazar\r\n          <\/h4>\r\n\r\n          <p>\r\n            Brand identity, creative direction and digital\r\n            storefront development.\r\n          <\/p>\r\n\r\n          <div class=\"nk5-project-tags\">\r\n            <span>Branding<\/span>\r\n            <span>Web Design<\/span>\r\n            <span>Creative<\/span>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"nk5-arrow\">\r\n          \u2197\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- PROJECT 04 -->\r\n\r\n      <article class=\"nk5-project nk5-reveal\">\r\n\r\n        <div class=\"nk5-project-number\">\r\n          04\r\n        <\/div>\r\n\r\n        <div class=\"nk5-project-icon\">\r\n          \ud83d\udc57\r\n        <\/div>\r\n\r\n        <div class=\"nk5-project-content\">\r\n\r\n          <span class=\"nk5-project-category\">\r\n            FASHION\r\n          <\/span>\r\n\r\n          <h4>\r\n            Beautyiner\r\n          <\/h4>\r\n\r\n          <p>\r\n            Fashion e-commerce presence with product-focused\r\n            creative and marketing strategy.\r\n          <\/p>\r\n\r\n          <div class=\"nk5-project-tags\">\r\n            <span>E-commerce<\/span>\r\n            <span>Creative<\/span>\r\n            <span>Meta Ads<\/span>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"nk5-arrow\">\r\n          \u2197\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- PROJECT 05 -->\r\n\r\n      <article class=\"nk5-project nk5-reveal\">\r\n\r\n        <div class=\"nk5-project-number\">\r\n          05\r\n        <\/div>\r\n\r\n        <div class=\"nk5-project-icon\">\r\n          \ud83d\udcbb\r\n        <\/div>\r\n\r\n        <div class=\"nk5-project-content\">\r\n\r\n          <span class=\"nk5-project-category\">\r\n            WEB DESIGN\r\n          <\/span>\r\n\r\n          <h4>\r\n            Nityamic\r\n          <\/h4>\r\n\r\n          <p>\r\n            Online store design and conversion-focused digital\r\n            experience.\r\n          <\/p>\r\n\r\n          <div class=\"nk5-project-tags\">\r\n            <span>WordPress<\/span>\r\n            <span>Elementor<\/span>\r\n            <span>UX<\/span>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"nk5-arrow\">\r\n          \u2197\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- PROJECT 06 -->\r\n\r\n      <article class=\"nk5-project nk5-reveal\">\r\n\r\n        <div class=\"nk5-project-number\">\r\n          06\r\n        <\/div>\r\n\r\n        <div class=\"nk5-project-icon\">\r\n          \ud83d\udcc8\r\n        <\/div>\r\n\r\n        <div class=\"nk5-project-content\">\r\n\r\n          <span class=\"nk5-project-category\">\r\n            DIGITAL MARKETING\r\n          <\/span>\r\n\r\n          <h4>\r\n            Easy Shopz\r\n          <\/h4>\r\n\r\n          <p>\r\n            Product advertising, creative testing and digital\r\n            marketing campaign management.\r\n          <\/p>\r\n\r\n          <div class=\"nk5-project-tags\">\r\n            <span>Meta Ads<\/span>\r\n            <span>Analytics<\/span>\r\n            <span>Growth<\/span>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"nk5-arrow\">\r\n          \u2197\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- PROJECT 07 -->\r\n\r\n      <article class=\"nk5-project nk5-reveal\">\r\n\r\n        <div class=\"nk5-project-number\">\r\n          07\r\n        <\/div>\r\n\r\n        <div class=\"nk5-project-icon\">\r\n          \ud83d\udcf1\r\n        <\/div>\r\n\r\n        <div class=\"nk5-project-content\">\r\n\r\n          <span class=\"nk5-project-category\">\r\n            GADGETS\r\n          <\/span>\r\n\r\n          <h4>\r\n            DecidBD\r\n          <\/h4>\r\n\r\n          <p>\r\n            Gadget product marketing with creative advertising\r\n            and e-commerce campaign strategy.\r\n          <\/p>\r\n\r\n          <div class=\"nk5-project-tags\">\r\n            <span>Gadgets<\/span>\r\n            <span>Meta Ads<\/span>\r\n            <span>Creative<\/span>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"nk5-arrow\">\r\n          \u2197\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- PROJECT 08 -->\r\n\r\n      <article class=\"nk5-project nk5-reveal\">\r\n\r\n        <div class=\"nk5-project-number\">\r\n          08\r\n        <\/div>\r\n\r\n        <div class=\"nk5-project-icon\">\r\n          \ud83e\udde0\r\n        <\/div>\r\n\r\n        <div class=\"nk5-project-content\">\r\n\r\n          <span class=\"nk5-project-category\">\r\n            STRATEGY\r\n          <\/span>\r\n\r\n          <h4>\r\n            Business & Career\r\n          <\/h4>\r\n\r\n          <p>\r\n            Digital strategy, content direction and online\r\n            audience growth planning.\r\n          <\/p>\r\n\r\n          <div class=\"nk5-project-tags\">\r\n            <span>Strategy<\/span>\r\n            <span>Content<\/span>\r\n            <span>Marketing<\/span>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"nk5-arrow\">\r\n          \u2197\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- BOTTOM CTA -->\r\n\r\n    <div class=\"nk5-bottom nk5-reveal\">\r\n\r\n      <div>\r\n        <span>\r\n          HAVE A PROJECT IN MIND?\r\n        <\/span>\r\n\r\n        <h3>\r\n          Let's build something\r\n          <b>worth remembering.<\/b>\r\n        <\/h3>\r\n      <\/div>\r\n\r\n      <a href=\"#contact\">\r\n        Start a Project\r\n        <span>\u2197<\/span>\r\n      <\/a>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   STEP 5 ROOT\r\n========================================================= *\/\r\n\r\n#nk-step5{\r\n\r\n  --s5-bg:#050507;\r\n  --s5-card:#0b0b12;\r\n  --s5-card2:#101019;\r\n  --s5-text:#fff;\r\n  --s5-muted:#9999a7;\r\n  --s5-purple:#8b5cf6;\r\n  --s5-blue:#3b82f6;\r\n  --s5-cyan:#22d3ee;\r\n  --s5-border:rgba(255,255,255,.08);\r\n\r\n  position:relative;\r\n  overflow:hidden;\r\n\r\n  padding:120px 24px;\r\n\r\n  color:var(--s5-text);\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 5% 20%,\r\n      rgba(139,92,246,.09),\r\n      transparent 30%\r\n    ),\r\n    radial-gradient(\r\n      circle at 95% 80%,\r\n      rgba(59,130,246,.08),\r\n      transparent 30%\r\n    ),\r\n    var(--s5-bg);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   WRAP\r\n========================================================= *\/\r\n\r\n.nk5-wrap{\r\n  max-width:1250px;\r\n  margin:auto;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n.nk5-head{\r\n  text-align:center;\r\n  max-width:800px;\r\n  margin:0 auto 60px;\r\n}\r\n\r\n.nk5-eyebrow{\r\n\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:9px;\r\n\r\n  color:#b9a4ff;\r\n\r\n  font-size:11px;\r\n  font-weight:800;\r\n\r\n  letter-spacing:2.5px;\r\n\r\n  margin-bottom:18px;\r\n}\r\n\r\n.nk5-eyebrow span{\r\n\r\n  width:7px;\r\n  height:7px;\r\n\r\n  border-radius:50%;\r\n\r\n  background:var(--s5-purple);\r\n\r\n  box-shadow:\r\n    0 0 14px var(--s5-purple);\r\n\r\n}\r\n\r\n.nk5-head h2{\r\n\r\n  margin:0;\r\n\r\n  font-size:\r\n    clamp(40px,5vw,68px);\r\n\r\n  line-height:1.03;\r\n\r\n  letter-spacing:-2.5px;\r\n\r\n  font-weight:800;\r\n\r\n}\r\n\r\n.nk5-head h2 b{\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--s5-purple),\r\n      var(--s5-blue),\r\n      var(--s5-cyan)\r\n    );\r\n\r\n  -webkit-background-clip:text;\r\n  background-clip:text;\r\n\r\n  color:transparent;\r\n\r\n}\r\n\r\n.nk5-head p{\r\n\r\n  max-width:680px;\r\n\r\n  margin:22px auto 0;\r\n\r\n  color:var(--s5-muted);\r\n\r\n  line-height:1.8;\r\n\r\n  font-size:15px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FEATURE\r\n========================================================= *\/\r\n\r\n.nk5-feature{\r\n\r\n  position:relative;\r\n\r\n  display:grid;\r\n\r\n  grid-template-columns:\r\n    1fr 1fr;\r\n\r\n  gap:30px;\r\n\r\n  padding:50px;\r\n\r\n  min-height:480px;\r\n\r\n  overflow:hidden;\r\n\r\n  border-radius:30px;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(139,92,246,.2);\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(139,92,246,.08),\r\n      rgba(59,130,246,.035)\r\n    );\r\n\r\n  box-shadow:\r\n    0 30px 100px rgba(0,0,0,.35);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FEATURE CONTENT\r\n========================================================= *\/\r\n\r\n.nk5-feature-content{\r\n\r\n  display:flex;\r\n  flex-direction:column;\r\n  justify-content:center;\r\n\r\n  position:relative;\r\n  z-index:3;\r\n\r\n}\r\n\r\n.nk5-label{\r\n\r\n  color:#b9a4ff;\r\n\r\n  font-size:10px;\r\n  font-weight:800;\r\n\r\n  letter-spacing:2px;\r\n\r\n  margin-bottom:18px;\r\n\r\n}\r\n\r\n.nk5-feature h3{\r\n\r\n  max-width:600px;\r\n\r\n  margin:0;\r\n\r\n  font-size:\r\n    clamp(34px,4vw,58px);\r\n\r\n  line-height:1.04;\r\n\r\n  letter-spacing:-2px;\r\n\r\n}\r\n\r\n.nk5-feature h3 span{\r\n\r\n  display:block;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--s5-purple),\r\n      var(--s5-blue)\r\n    );\r\n\r\n  -webkit-background-clip:text;\r\n  background-clip:text;\r\n\r\n  color:transparent;\r\n\r\n}\r\n\r\n.nk5-feature-content > p{\r\n\r\n  max-width:570px;\r\n\r\n  margin:24px 0 0;\r\n\r\n  color:#9b9ba7;\r\n\r\n  line-height:1.8;\r\n\r\n  font-size:14px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TAGS\r\n========================================================= *\/\r\n\r\n.nk5-tags{\r\n\r\n  display:flex;\r\n\r\n  flex-wrap:wrap;\r\n\r\n  gap:8px;\r\n\r\n  margin-top:25px;\r\n\r\n}\r\n\r\n.nk5-tags span{\r\n\r\n  padding:8px 12px;\r\n\r\n  border-radius:999px;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255,255,255,.08);\r\n\r\n  background:\r\n    rgba(255,255,255,.035);\r\n\r\n  color:#aaaab4;\r\n\r\n  font-size:10px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESULT ROW\r\n========================================================= *\/\r\n\r\n.nk5-result-row{\r\n\r\n  display:flex;\r\n\r\n  gap:40px;\r\n\r\n  margin-top:35px;\r\n\r\n}\r\n\r\n.nk5-result-row div{\r\n\r\n  display:flex;\r\n  flex-direction:column;\r\n\r\n}\r\n\r\n.nk5-result-row strong{\r\n\r\n  font-size:27px;\r\n\r\n  line-height:1;\r\n\r\n}\r\n\r\n.nk5-result-row small{\r\n\r\n  color:#777783;\r\n\r\n  margin-top:7px;\r\n\r\n  font-size:10px;\r\n\r\n  text-transform:uppercase;\r\n\r\n  letter-spacing:1px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FEATURE VISUAL\r\n========================================================= *\/\r\n\r\n.nk5-feature-visual{\r\n\r\n  position:relative;\r\n\r\n  min-height:380px;\r\n\r\n  display:flex;\r\n\r\n  align-items:center;\r\n  justify-content:center;\r\n\r\n}\r\n\r\n\r\n\/* ORBITS *\/\r\n\r\n.nk5-orbit{\r\n\r\n  position:absolute;\r\n\r\n  border-radius:50%;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(139,92,246,.15);\r\n\r\n  animation:\r\n    nk5Rotate 18s linear infinite;\r\n\r\n}\r\n\r\n.orbit1{\r\n\r\n  width:360px;\r\n  height:360px;\r\n\r\n}\r\n\r\n.orbit2{\r\n\r\n  width:470px;\r\n  height:470px;\r\n\r\n  border-color:\r\n    rgba(59,130,246,.1);\r\n\r\n  animation-duration:25s;\r\n  animation-direction:reverse;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DASHBOARD\r\n========================================================= *\/\r\n\r\n.nk5-dashboard{\r\n\r\n  position:relative;\r\n\r\n  width:min(390px,90%);\r\n\r\n  padding:20px;\r\n\r\n  border-radius:22px;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255,255,255,.1);\r\n\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      rgba(20,20,30,.95),\r\n      rgba(8,8,14,.94)\r\n    );\r\n\r\n  box-shadow:\r\n    0 30px 80px rgba(0,0,0,.5),\r\n    0 0 70px rgba(139,92,246,.08);\r\n\r\n  transform:\r\n    perspective(900px)\r\n    rotateY(-8deg)\r\n    rotateX(4deg);\r\n\r\n  z-index:3;\r\n\r\n}\r\n\r\n\r\n\/* DASH TOP *\/\r\n\r\n.nk5-dash-top{\r\n\r\n  display:flex;\r\n\r\n  gap:6px;\r\n\r\n  margin-bottom:25px;\r\n\r\n}\r\n\r\n.nk5-dash-top span{\r\n\r\n  width:7px;\r\n  height:7px;\r\n\r\n  border-radius:50%;\r\n\r\n  background:#555;\r\n\r\n}\r\n\r\n\r\n\/* CHART *\/\r\n\r\n.nk5-chart{\r\n\r\n  height:180px;\r\n\r\n  padding:\r\n    15px 10px 0;\r\n\r\n  border-bottom:\r\n    1px solid\r\n    rgba(255,255,255,.07);\r\n\r\n}\r\n\r\n.nk5-bars{\r\n\r\n  height:100%;\r\n\r\n  display:flex;\r\n\r\n  align-items:flex-end;\r\n\r\n  justify-content:space-around;\r\n\r\n  gap:12px;\r\n\r\n}\r\n\r\n.nk5-bars i{\r\n\r\n  width:27px;\r\n\r\n  display:block;\r\n\r\n  border-radius:\r\n    6px 6px 0 0;\r\n\r\n  background:\r\n    linear-gradient(\r\n      to top,\r\n      var(--s5-purple),\r\n      var(--s5-cyan)\r\n    );\r\n\r\n  opacity:.8;\r\n\r\n  box-shadow:\r\n    0 0 18px rgba(139,92,246,.15);\r\n\r\n}\r\n\r\n\r\n\/* METRICS *\/\r\n\r\n.nk5-metrics{\r\n\r\n  display:grid;\r\n\r\n  grid-template-columns:\r\n    repeat(3,1fr);\r\n\r\n  gap:10px;\r\n\r\n  padding-top:18px;\r\n\r\n}\r\n\r\n.nk5-metrics div{\r\n\r\n  padding:12px;\r\n\r\n  border-radius:12px;\r\n\r\n  background:\r\n    rgba(255,255,255,.025);\r\n\r\n}\r\n\r\n.nk5-metrics small{\r\n\r\n  display:block;\r\n\r\n  color:#777783;\r\n\r\n  font-size:8px;\r\n\r\n  margin-bottom:6px;\r\n\r\n  text-transform:uppercase;\r\n\r\n}\r\n\r\n.nk5-metrics b{\r\n\r\n  font-size:15px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SECTION TITLE\r\n========================================================= *\/\r\n\r\n.nk5-section-title{\r\n\r\n  display:flex;\r\n\r\n  align-items:end;\r\n\r\n  gap:30px;\r\n\r\n  margin:\r\n    90px 0 28px;\r\n\r\n}\r\n\r\n.nk5-section-title span{\r\n\r\n  color:#8c8c99;\r\n\r\n  font-size:10px;\r\n\r\n  font-weight:800;\r\n\r\n  letter-spacing:2px;\r\n\r\n}\r\n\r\n.nk5-section-title h3{\r\n\r\n  margin:7px 0 0;\r\n\r\n  font-size:28px;\r\n\r\n  letter-spacing:-1px;\r\n\r\n}\r\n\r\n.nk5-line{\r\n\r\n  flex:1;\r\n\r\n  height:1px;\r\n\r\n  margin-bottom:7px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      rgba(255,255,255,.12),\r\n      transparent\r\n    );\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PROJECT GRID\r\n========================================================= *\/\r\n\r\n.nk5-project-grid{\r\n\r\n  display:grid;\r\n\r\n  grid-template-columns:\r\n    repeat(2,1fr);\r\n\r\n  gap:18px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PROJECT CARD\r\n========================================================= *\/\r\n\r\n.nk5-project{\r\n\r\n  position:relative;\r\n\r\n  display:grid;\r\n\r\n  grid-template-columns:\r\n    42px 58px 1fr 30px;\r\n\r\n  gap:16px;\r\n\r\n  align-items:center;\r\n\r\n  padding:25px;\r\n\r\n  min-height:190px;\r\n\r\n  overflow:hidden;\r\n\r\n  border-radius:22px;\r\n\r\n  border:\r\n    1px solid\r\n    var(--s5-border);\r\n\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      rgba(255,255,255,.035),\r\n      rgba(255,255,255,.012)\r\n    );\r\n\r\n  transition:\r\n    transform .4s ease,\r\n    border-color .3s ease,\r\n    box-shadow .4s ease;\r\n\r\n}\r\n\r\n.nk5-project:hover{\r\n\r\n  transform:translateY(-7px);\r\n\r\n  border-color:\r\n    rgba(139,92,246,.3);\r\n\r\n  box-shadow:\r\n    0 25px 60px rgba(0,0,0,.35);\r\n\r\n}\r\n\r\n\r\n\/* NUMBER *\/\r\n\r\n.nk5-project-number{\r\n\r\n  color:#41414c;\r\n\r\n  font-size:11px;\r\n\r\n  font-weight:800;\r\n\r\n}\r\n\r\n\r\n\/* ICON *\/\r\n\r\n.nk5-project-icon{\r\n\r\n  width:55px;\r\n  height:55px;\r\n\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n\r\n  border-radius:16px;\r\n\r\n  font-size:22px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(139,92,246,.12),\r\n      rgba(59,130,246,.08)\r\n    );\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255,255,255,.07);\r\n\r\n  transition:.35s;\r\n\r\n}\r\n\r\n.nk5-project:hover .nk5-project-icon{\r\n\r\n  transform:\r\n    scale(1.08)\r\n    rotate(-4deg);\r\n\r\n}\r\n\r\n\r\n\/* CONTENT *\/\r\n\r\n.nk5-project-category{\r\n\r\n  color:#9d85ef;\r\n\r\n  font-size:9px;\r\n\r\n  font-weight:800;\r\n\r\n  letter-spacing:1.5px;\r\n\r\n}\r\n\r\n.nk5-project h4{\r\n\r\n  margin:7px 0;\r\n\r\n  font-size:20px;\r\n\r\n  letter-spacing:-.4px;\r\n\r\n}\r\n\r\n.nk5-project p{\r\n\r\n  margin:0;\r\n\r\n  color:#858590;\r\n\r\n  font-size:11px;\r\n\r\n  line-height:1.7;\r\n\r\n}\r\n\r\n\r\n\/* TAGS *\/\r\n\r\n.nk5-project-tags{\r\n\r\n  display:flex;\r\n\r\n  flex-wrap:wrap;\r\n\r\n  gap:5px;\r\n\r\n  margin-top:13px;\r\n\r\n}\r\n\r\n.nk5-project-tags span{\r\n\r\n  padding:\r\n    5px 8px;\r\n\r\n  border-radius:6px;\r\n\r\n  color:#777783;\r\n\r\n  background:\r\n    rgba(255,255,255,.035);\r\n\r\n  font-size:8px;\r\n\r\n}\r\n\r\n\r\n\/* ARROW *\/\r\n\r\n.nk5-arrow{\r\n\r\n  width:30px;\r\n  height:30px;\r\n\r\n  display:flex;\r\n\r\n  align-items:center;\r\n  justify-content:center;\r\n\r\n  border-radius:50%;\r\n\r\n  color:#999;\r\n\r\n  background:\r\n    rgba(255,255,255,.04);\r\n\r\n  transition:.3s;\r\n\r\n}\r\n\r\n.nk5-project:hover .nk5-arrow{\r\n\r\n  color:white;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      var(--s5-purple),\r\n      var(--s5-blue)\r\n    );\r\n\r\n  transform:\r\n    translate(3px,-3px);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BOTTOM CTA\r\n========================================================= *\/\r\n\r\n.nk5-bottom{\r\n\r\n  display:flex;\r\n\r\n  align-items:center;\r\n  justify-content:space-between;\r\n\r\n  gap:30px;\r\n\r\n  margin-top:70px;\r\n\r\n  padding:42px;\r\n\r\n  border-radius:25px;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(139,92,246,.15);\r\n\r\n  background:\r\n    linear-gradient(\r\n      100deg,\r\n      rgba(139,92,246,.08),\r\n      rgba(59,130,246,.035)\r\n    );\r\n\r\n}\r\n\r\n.nk5-bottom > div span{\r\n\r\n  color:#9999a7;\r\n\r\n  font-size:9px;\r\n\r\n  font-weight:800;\r\n\r\n  letter-spacing:2px;\r\n\r\n}\r\n\r\n.nk5-bottom h3{\r\n\r\n  margin:10px 0 0;\r\n\r\n  font-size:30px;\r\n\r\n  letter-spacing:-1px;\r\n\r\n}\r\n\r\n.nk5-bottom h3 b{\r\n\r\n  color:#a78bfa;\r\n\r\n}\r\n\r\n.nk5-bottom a{\r\n\r\n  display:inline-flex;\r\n\r\n  align-items:center;\r\n\r\n  gap:12px;\r\n\r\n  padding:\r\n    14px 20px;\r\n\r\n  border-radius:12px;\r\n\r\n  color:white;\r\n\r\n  text-decoration:none;\r\n\r\n  font-size:12px;\r\n\r\n  font-weight:800;\r\n\r\n  white-space:nowrap;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      var(--s5-purple),\r\n      var(--s5-blue)\r\n    );\r\n\r\n  box-shadow:\r\n    0 12px 35px rgba(99,102,241,.2);\r\n\r\n  transition:.3s;\r\n\r\n}\r\n\r\n.nk5-bottom a:hover{\r\n\r\n  transform:\r\n    translateY(-3px);\r\n\r\n  box-shadow:\r\n    0 18px 45px rgba(99,102,241,.3);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REVEAL\r\n========================================================= *\/\r\n\r\n.nk5-reveal{\r\n\r\n  opacity:0;\r\n\r\n  transform:translateY(30px);\r\n\r\n  transition:\r\n    opacity .8s ease,\r\n    transform .8s ease;\r\n\r\n}\r\n\r\n.nk5-reveal.nk5-visible{\r\n\r\n  opacity:1;\r\n\r\n  transform:translateY(0);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ANIMATION\r\n========================================================= *\/\r\n\r\n@keyframes nk5Rotate{\r\n\r\n  from{\r\n    transform:rotate(0deg);\r\n  }\r\n\r\n  to{\r\n    transform:rotate(360deg);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESPONSIVE\r\n========================================================= *\/\r\n\r\n@media(max-width:900px){\r\n\r\n  .nk5-feature{\r\n\r\n    grid-template-columns:1fr;\r\n\r\n    padding:35px;\r\n\r\n  }\r\n\r\n  .nk5-feature-visual{\r\n\r\n    min-height:400px;\r\n\r\n  }\r\n\r\n  .nk5-project-grid{\r\n\r\n    grid-template-columns:1fr;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n@media(max-width:767px){\r\n\r\n  #nk-step5{\r\n\r\n    padding:\r\n      85px 16px;\r\n\r\n  }\r\n\r\n  .nk5-head h2{\r\n\r\n    font-size:40px;\r\n\r\n    letter-spacing:-1.5px;\r\n\r\n  }\r\n\r\n  .nk5-feature{\r\n\r\n    padding:28px;\r\n\r\n    border-radius:24px;\r\n\r\n  }\r\n\r\n  .nk5-feature h3{\r\n\r\n    font-size:36px;\r\n\r\n  }\r\n\r\n  .nk5-result-row{\r\n\r\n    gap:25px;\r\n\r\n  }\r\n\r\n  .nk5-feature-visual{\r\n\r\n    min-height:340px;\r\n\r\n  }\r\n\r\n  .orbit1{\r\n\r\n    width:280px;\r\n    height:280px;\r\n\r\n  }\r\n\r\n  .orbit2{\r\n\r\n    width:350px;\r\n    height:350px;\r\n\r\n  }\r\n\r\n  .nk5-dashboard{\r\n\r\n    width:92%;\r\n\r\n  }\r\n\r\n  .nk5-section-title{\r\n\r\n    margin-top:65px;\r\n\r\n  }\r\n\r\n  .nk5-project{\r\n\r\n    grid-template-columns:\r\n      32px 52px 1fr;\r\n\r\n    padding:20px;\r\n\r\n  }\r\n\r\n  .nk5-arrow{\r\n\r\n    display:none;\r\n\r\n  }\r\n\r\n  .nk5-bottom{\r\n\r\n    flex-direction:column;\r\n\r\n    align-items:flex-start;\r\n\r\n    padding:30px;\r\n\r\n  }\r\n\r\n  .nk5-bottom h3{\r\n\r\n    font-size:25px;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media(prefers-reduced-motion:reduce){\r\n\r\n  #nk-step5 *,\r\n  #nk-step5 *:before,\r\n  #nk-step5 *:after{\r\n\r\n    animation:none !important;\r\n\r\n    transition:none !important;\r\n\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<script>\r\n\r\n(function(){\r\n\r\n  const section =\r\n    document.getElementById(\"nk-step5\");\r\n\r\n  if(!section) return;\r\n\r\n\r\n  const items =\r\n    section.querySelectorAll(\".nk5-reveal\");\r\n\r\n\r\n  const observer =\r\n    new IntersectionObserver(\r\n      (entries)=>{\r\n\r\n        entries.forEach(entry=>{\r\n\r\n          if(entry.isIntersecting){\r\n\r\n            entry.target.classList.add(\r\n              \"nk5-visible\"\r\n            );\r\n\r\n            observer.unobserve(\r\n              entry.target\r\n            );\r\n\r\n          }\r\n\r\n        });\r\n\r\n      },\r\n      {\r\n        threshold:.12\r\n      }\r\n    );\r\n\r\n\r\n  items.forEach(\r\n    item => observer.observe(item)\r\n  );\r\n\r\n})();\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6548961 elementor-widget elementor-widget-html\" data-id=\"6548961\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n     MD NAIM KHAN \u2014 STEP 6\r\n     CREATIVE GALLERY \u2014 FINAL\r\n========================================================= -->\r\n\r\n<section id=\"nk-step6\">\r\n\r\n  <div class=\"nk6-wrap\">\r\n\r\n    <!-- ================= HEADER ================= -->\r\n\r\n    <div class=\"nk6-head nk6-reveal\">\r\n\r\n      <div class=\"nk6-eyebrow\">\r\n        <span><\/span>\r\n        CREATIVE GALLERY\r\n      <\/div>\r\n\r\n      <h2>\r\n        Visuals that make\r\n        <b>brands stand out.<\/b>\r\n      <\/h2>\r\n\r\n      <p>\r\n        A collection of advertising creatives, product visuals,\r\n        brand designs and video content created for different\r\n        businesses and digital campaigns.\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- ================= FILTERS ================= -->\r\n\r\n    <div class=\"nk6-filter-wrap nk6-reveal\">\r\n\r\n      <button class=\"nk6-filter active\" data-filter=\"all\">\r\n        All\r\n      <\/button>\r\n\r\n      <button class=\"nk6-filter\" data-filter=\"image\">\r\n        Images\r\n      <\/button>\r\n\r\n      <button class=\"nk6-filter\" data-filter=\"video\">\r\n        Videos\r\n      <\/button>\r\n\r\n      <button class=\"nk6-filter\" data-filter=\"ads\">\r\n        Ad Creative\r\n      <\/button>\r\n\r\n      <button class=\"nk6-filter\" data-filter=\"product\">\r\n        Product\r\n      <\/button>\r\n\r\n      <button class=\"nk6-filter\" data-filter=\"branding\">\r\n        Branding\r\n      <\/button>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- ================= GALLERY ================= -->\r\n\r\n    <div class=\"nk6-gallery\">\r\n\r\n\r\n      <!-- =================================================\r\n           01 \u2014 ROOMBD\r\n      ================================================== -->\r\n\r\n      <article\r\n        class=\"nk6-item nk6-large nk6-reveal\"\r\n        data-category=\"image ads\"\r\n      >\r\n\r\n        <div class=\"nk6-media\">\r\n\r\n          <img\r\n            src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/image-2.png\"\r\n            alt=\"RoomBD Meta Ads Creative\"\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n          >\r\n\r\n          <div class=\"nk6-overlay\">\r\n\r\n            <div class=\"nk6-info\">\r\n\r\n              <span>01 \u00b7 META ADS<\/span>\r\n\r\n              <h3>RoomBD<\/h3>\r\n\r\n              <p>Meta advertising creative<\/p>\r\n\r\n            <\/div>\r\n\r\n            <button\r\n              class=\"nk6-view\"\r\n              data-media=\"image\"\r\n              data-src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/image-2.png\"\r\n              data-title=\"RoomBD\"\r\n              data-type=\"Meta Ads Creative\"\r\n            >\r\n              View Creative \u2197\r\n            <\/button>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- =================================================\r\n           02 \u2014 EASY SHOPZ\r\n      ================================================== -->\r\n\r\n      <article\r\n        class=\"nk6-item nk6-reveal\"\r\n        data-category=\"image product\"\r\n      >\r\n\r\n        <div class=\"nk6-media\">\r\n\r\n          <img\r\n            src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/Gemini_Generated_Image_npmzgnnpmzgnnpmz.jpg\"\r\n            alt=\"Easy Shopz Product Advertisement\"\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n          >\r\n\r\n          <div class=\"nk6-overlay\">\r\n\r\n            <div class=\"nk6-info\">\r\n\r\n              <span>02 \u00b7 PRODUCT AD<\/span>\r\n\r\n              <h3>Easy Shopz<\/h3>\r\n\r\n              <p>Product marketing creative<\/p>\r\n\r\n            <\/div>\r\n\r\n            <button\r\n              class=\"nk6-view\"\r\n              data-media=\"image\"\r\n              data-src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/Gemini_Generated_Image_npmzgnnpmzgnnpmz.jpg\"\r\n              data-title=\"Easy Shopz\"\r\n              data-type=\"Product Ad\"\r\n            >\r\n              View Creative \u2197\r\n            <\/button>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- =================================================\r\n           03 \u2014 DEALHATBD\r\n      ================================================== -->\r\n\r\n      <article\r\n        class=\"nk6-item nk6-reveal\"\r\n        data-category=\"image ads\"\r\n      >\r\n\r\n        <div class=\"nk6-media\">\r\n\r\n          <img\r\n            src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/1e4dbf2c48fa689bbgqxp1jxcn.jpg\"\r\n            alt=\"DealhatBD Facebook Creative\"\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n          >\r\n\r\n          <div class=\"nk6-overlay\">\r\n\r\n            <div class=\"nk6-info\">\r\n\r\n              <span>03 \u00b7 FACEBOOK CREATIVE<\/span>\r\n\r\n              <h3>DealhatBD<\/h3>\r\n\r\n              <p>Facebook advertising creative<\/p>\r\n\r\n            <\/div>\r\n\r\n            <button\r\n              class=\"nk6-view\"\r\n              data-media=\"image\"\r\n              data-src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/1e4dbf2c48fa689bbgqxp1jxcn.jpg\"\r\n              data-title=\"DealhatBD\"\r\n              data-type=\"Facebook Creative\"\r\n            >\r\n              View Creative \u2197\r\n            <\/button>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- =================================================\r\n           04 \u2014 CHOITA BAZAR\r\n      ================================================== -->\r\n\r\n      <article\r\n        class=\"nk6-item nk6-reveal\"\r\n        data-category=\"image branding\"\r\n      >\r\n\r\n        <div class=\"nk6-media\">\r\n\r\n          <img\r\n            src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-Sep-13-2026-02_14_10-PM.png\"\r\n            alt=\"Choita Bazar Branding\"\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n          >\r\n\r\n          <div class=\"nk6-overlay\">\r\n\r\n            <div class=\"nk6-info\">\r\n\r\n              <span>04 \u00b7 BRANDING<\/span>\r\n\r\n              <h3>Choita Bazar<\/h3>\r\n\r\n              <p>Brand identity & creative<\/p>\r\n\r\n            <\/div>\r\n\r\n            <button\r\n              class=\"nk6-view\"\r\n              data-media=\"image\"\r\n              data-src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-Sep-13-2026-02_14_10-PM.png\"\r\n              data-title=\"Choita Bazar\"\r\n              data-type=\"Branding\"\r\n            >\r\n              View Creative \u2197\r\n            <\/button>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- =================================================\r\n           05 \u2014 MADHURI FASHION\r\n      ================================================== -->\r\n\r\n      <article\r\n        class=\"nk6-item nk6-large nk6-reveal\"\r\n        data-category=\"video ads\"\r\n      >\r\n\r\n        <div class=\"nk6-media nk6-video-card\">\r\n\r\n          <video\r\n            muted\r\n            loop\r\n            playsinline\r\n            preload=\"metadata\"\r\n          >\r\n\r\n            <source\r\n              src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/1d1af0cb-d692-4b7c-a455-520eda613b4a.mp4\"\r\n              type=\"video\/mp4\"\r\n            >\r\n\r\n          <\/video>\r\n\r\n          <div class=\"nk6-video-badge\">\r\n            VIDEO\r\n          <\/div>\r\n\r\n          <div class=\"nk6-play\">\r\n            \u25b6\r\n          <\/div>\r\n\r\n          <div class=\"nk6-overlay\">\r\n\r\n            <div class=\"nk6-info\">\r\n\r\n              <span>05 \u00b7 VIDEO CONTENT<\/span>\r\n\r\n              <h3>Madhuri Fashion<\/h3>\r\n\r\n              <p>Fashion video content<\/p>\r\n\r\n            <\/div>\r\n\r\n            <button\r\n              class=\"nk6-view\"\r\n              data-media=\"video\"\r\n              data-src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/1d1af0cb-d692-4b7c-a455-520eda613b4a.mp4\"\r\n              data-title=\"Madhuri Fashion\"\r\n              data-type=\"Video Content\"\r\n            >\r\n              Play Video \u2197\r\n            <\/button>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- =================================================\r\n           06 \u2014 SMARTSHOPPING\r\n      ================================================== -->\r\n\r\n      <article\r\n        class=\"nk6-item nk6-reveal\"\r\n        data-category=\"video ads\"\r\n      >\r\n\r\n        <div class=\"nk6-media nk6-video-card\">\r\n\r\n          <video\r\n            muted\r\n            loop\r\n            playsinline\r\n            preload=\"metadata\"\r\n          >\r\n\r\n            <source\r\n              src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/f7e087af-972e-4aaf-84c6-9f7c2f69d3fb.mp4\"\r\n              type=\"video\/mp4\"\r\n            >\r\n\r\n          <\/video>\r\n\r\n          <div class=\"nk6-video-badge\">\r\n            VIDEO\r\n          <\/div>\r\n\r\n          <div class=\"nk6-play\">\r\n            \u25b6\r\n          <\/div>\r\n\r\n          <div class=\"nk6-overlay\">\r\n\r\n            <div class=\"nk6-info\">\r\n\r\n              <span>06 \u00b7 VIDEO CONTENT<\/span>\r\n\r\n              <h3>SmartShopping<\/h3>\r\n\r\n              <p>E-commerce video creative<\/p>\r\n\r\n            <\/div>\r\n\r\n            <button\r\n              class=\"nk6-view\"\r\n              data-media=\"video\"\r\n              data-src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/f7e087af-972e-4aaf-84c6-9f7c2f69d3fb.mp4\"\r\n              data-title=\"SmartShopping\"\r\n              data-type=\"Video Content\"\r\n            >\r\n              Play Video \u2197\r\n            <\/button>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- =================================================\r\n           07 \u2014 EASYMART\r\n      ================================================== -->\r\n\r\n      <article\r\n        class=\"nk6-item nk6-reveal\"\r\n        data-category=\"image product\"\r\n      >\r\n\r\n        <div class=\"nk6-media\">\r\n\r\n          <img\r\n            src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/File-2-1.png\"\r\n            alt=\"EasyMart Product Creative\"\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n          >\r\n\r\n          <div class=\"nk6-overlay\">\r\n\r\n            <div class=\"nk6-info\">\r\n\r\n              <span>07 \u00b7 PRODUCT CREATIVE<\/span>\r\n\r\n              <h3>EasyMart<\/h3>\r\n\r\n              <p>E-commerce product creative<\/p>\r\n\r\n            <\/div>\r\n\r\n            <button\r\n              class=\"nk6-view\"\r\n              data-media=\"image\"\r\n              data-src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/File-2-1.png\"\r\n              data-title=\"EasyMart\"\r\n              data-type=\"Product Creative\"\r\n            >\r\n              View Creative \u2197\r\n            <\/button>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- =================================================\r\n           08 \u2014 BAIZAMART\r\n      ================================================== -->\r\n\r\n      <article\r\n        class=\"nk6-item nk6-reveal\"\r\n        data-category=\"video ads\"\r\n      >\r\n\r\n        <div class=\"nk6-media nk6-video-card\">\r\n\r\n          <video\r\n            muted\r\n            loop\r\n            playsinline\r\n            preload=\"metadata\"\r\n          >\r\n\r\n            <source\r\n              src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/99.mp4\"\r\n              type=\"video\/mp4\"\r\n            >\r\n\r\n          <\/video>\r\n\r\n          <div class=\"nk6-video-badge\">\r\n            VIDEO\r\n          <\/div>\r\n\r\n          <div class=\"nk6-play\">\r\n            \u25b6\r\n          <\/div>\r\n\r\n          <div class=\"nk6-overlay\">\r\n\r\n            <div class=\"nk6-info\">\r\n\r\n              <span>08 \u00b7 VIDEO AD<\/span>\r\n\r\n              <h3>Baizamart<\/h3>\r\n\r\n              <p>Video advertising creative<\/p>\r\n\r\n            <\/div>\r\n\r\n            <button\r\n              class=\"nk6-view\"\r\n              data-media=\"video\"\r\n              data-src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/99.mp4\"\r\n              data-title=\"Baizamart\"\r\n              data-type=\"Video Ad\"\r\n            >\r\n              Play Video \u2197\r\n            <\/button>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- =================================================\r\n           09 \u2014 WATCH BAY\r\n      ================================================== -->\r\n\r\n      <article\r\n        class=\"nk6-item nk6-reveal\"\r\n        data-category=\"video product\"\r\n      >\r\n\r\n        <div class=\"nk6-media nk6-video-card\">\r\n\r\n          <video\r\n            muted\r\n            loop\r\n            playsinline\r\n            preload=\"metadata\"\r\n          >\r\n\r\n            <source\r\n              src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/Watch-By.mp4\"\r\n              type=\"video\/mp4\"\r\n            >\r\n\r\n          <\/video>\r\n\r\n          <div class=\"nk6-video-badge\">\r\n            VIDEO\r\n          <\/div>\r\n\r\n          <div class=\"nk6-play\">\r\n            \u25b6\r\n          <\/div>\r\n\r\n          <div class=\"nk6-overlay\">\r\n\r\n            <div class=\"nk6-info\">\r\n\r\n              <span>09 \u00b7 PRODUCT VIDEO<\/span>\r\n\r\n              <h3>Watch BAY<\/h3>\r\n\r\n              <p>Product video content<\/p>\r\n\r\n            <\/div>\r\n\r\n            <button\r\n              class=\"nk6-view\"\r\n              data-media=\"video\"\r\n              data-src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/Watch-By.mp4\"\r\n              data-title=\"Watch BAY\"\r\n              data-type=\"Product Video\"\r\n            >\r\n              Play Video \u2197\r\n            <\/button>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- =================================================\r\n           10 \u2014 SMARTSHOPPING \/ 1203\r\n      ================================================== -->\r\n\r\n      <article\r\n        class=\"nk6-item nk6-large nk6-reveal\"\r\n        data-category=\"video ads\"\r\n      >\r\n\r\n        <div class=\"nk6-media nk6-video-card\">\r\n\r\n          <video\r\n            muted\r\n            loop\r\n            playsinline\r\n            preload=\"metadata\"\r\n          >\r\n\r\n            <source\r\n              src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/1203.mp4\"\r\n              type=\"video\/mp4\"\r\n            >\r\n\r\n          <\/video>\r\n\r\n          <div class=\"nk6-video-badge\">\r\n            VIDEO\r\n          <\/div>\r\n\r\n          <div class=\"nk6-play\">\r\n            \u25b6\r\n          <\/div>\r\n\r\n          <div class=\"nk6-overlay\">\r\n\r\n            <div class=\"nk6-info\">\r\n\r\n              <span>10 \u00b7 VIDEO AD<\/span>\r\n\r\n              <h3>SmartShopping<\/h3>\r\n\r\n              <p>Video campaign creative<\/p>\r\n\r\n            <\/div>\r\n\r\n            <button\r\n              class=\"nk6-view\"\r\n              data-media=\"video\"\r\n              data-src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/1203.mp4\"\r\n              data-title=\"SmartShopping\"\r\n              data-type=\"Video Ad\"\r\n            >\r\n              Play Video \u2197\r\n            <\/button>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- =================================================\r\n           11 \u2014 SMARTSHOPPING \/ GROK\r\n      ================================================== -->\r\n\r\n      <article\r\n        class=\"nk6-item nk6-reveal\"\r\n        data-category=\"video ads\"\r\n      >\r\n\r\n        <div class=\"nk6-media nk6-video-card\">\r\n\r\n          <video\r\n            muted\r\n            loop\r\n            playsinline\r\n            preload=\"metadata\"\r\n          >\r\n\r\n            <source\r\n              src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/grok-video-0c0125e8-47f1-42b1-9a06-c1d9594cd572.mp4\"\r\n              type=\"video\/mp4\"\r\n            >\r\n\r\n          <\/video>\r\n\r\n          <div class=\"nk6-video-badge\">\r\n            VIDEO\r\n          <\/div>\r\n\r\n          <div class=\"nk6-play\">\r\n            \u25b6\r\n          <\/div>\r\n\r\n          <div class=\"nk6-overlay\">\r\n\r\n            <div class=\"nk6-info\">\r\n\r\n              <span>11 \u00b7 AI VIDEO<\/span>\r\n\r\n              <h3>SmartShopping<\/h3>\r\n\r\n              <p>AI-assisted video creative<\/p>\r\n\r\n            <\/div>\r\n\r\n            <button\r\n              class=\"nk6-view\"\r\n              data-media=\"video\"\r\n              data-src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/grok-video-0c0125e8-47f1-42b1-9a06-c1d9594cd572.mp4\"\r\n              data-title=\"SmartShopping\"\r\n              data-type=\"AI Video Creative\"\r\n            >\r\n              Play Video \u2197\r\n            <\/button>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- =================================================\r\n           12 \u2014 SMARTSHOPPING \/ FINAL\r\n      ================================================== -->\r\n\r\n      <article\r\n        class=\"nk6-item nk6-reveal\"\r\n        data-category=\"video ads\"\r\n      >\r\n\r\n        <div class=\"nk6-media nk6-video-card\">\r\n\r\n          <video\r\n            muted\r\n            loop\r\n            playsinline\r\n            preload=\"metadata\"\r\n          >\r\n\r\n            <source\r\n              src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/Smart-Shoping-Final-1.mp4\"\r\n              type=\"video\/mp4\"\r\n            >\r\n\r\n          <\/video>\r\n\r\n          <div class=\"nk6-video-badge\">\r\n            VIDEO\r\n          <\/div>\r\n\r\n          <div class=\"nk6-play\">\r\n            \u25b6\r\n          <\/div>\r\n\r\n          <div class=\"nk6-overlay\">\r\n\r\n            <div class=\"nk6-info\">\r\n\r\n              <span>12 \u00b7 VIDEO AD<\/span>\r\n\r\n              <h3>SmartShopping<\/h3>\r\n\r\n              <p>Final video campaign<\/p>\r\n\r\n            <\/div>\r\n\r\n            <button\r\n              class=\"nk6-view\"\r\n              data-media=\"video\"\r\n              data-src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/Smart-Shoping-Final-1.mp4\"\r\n              data-title=\"SmartShopping\"\r\n              data-type=\"Video Campaign\"\r\n            >\r\n              Play Video \u2197\r\n            <\/button>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- ================= CTA ================= -->\r\n\r\n    <div class=\"nk6-bottom nk6-reveal\">\r\n\r\n      <div>\r\n\r\n        <span>\r\n          CREATIVE WORK\r\n        <\/span>\r\n\r\n        <h3>\r\n          Strategy meets\r\n          <b>creative execution.<\/b>\r\n        <\/h3>\r\n\r\n      <\/div>\r\n\r\n      <a href=\"#contact\">\r\n        Discuss a Project\r\n        <span>\u2197<\/span>\r\n      <\/a>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n  <!-- ================= LIGHTBOX ================= -->\r\n\r\n  <div\r\n    id=\"nk6Lightbox\"\r\n    class=\"nk6-lightbox\"\r\n    aria-hidden=\"true\"\r\n  >\r\n\r\n    <div class=\"nk6-modal\">\r\n\r\n      <button\r\n        id=\"nk6Close\"\r\n        class=\"nk6-close\"\r\n        aria-label=\"Close\"\r\n      >\r\n        \u00d7\r\n      <\/button>\r\n\r\n      <div\r\n        id=\"nk6ModalMedia\"\r\n        class=\"nk6-modal-media\"\r\n      ><\/div>\r\n\r\n      <div class=\"nk6-modal-info\">\r\n\r\n        <div>\r\n\r\n          <span id=\"nk6ModalType\">\r\n            CREATIVE\r\n          <\/span>\r\n\r\n          <h3 id=\"nk6ModalTitle\">\r\n            Creative\r\n          <\/h3>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   STEP 6 \u2014 ROOT\r\n========================================================= *\/\r\n\r\n#nk-step6{\r\n\r\n  --nk6-bg:#050507;\r\n  --nk6-card:#0b0b12;\r\n  --nk6-text:#fff;\r\n  --nk6-muted:#9999a7;\r\n\r\n  --nk6-purple:#8b5cf6;\r\n  --nk6-blue:#3b82f6;\r\n  --nk6-cyan:#22d3ee;\r\n\r\n  --nk6-border:\r\n    rgba(255,255,255,.08);\r\n\r\n  position:relative;\r\n\r\n  overflow:hidden;\r\n\r\n  padding:120px 24px;\r\n\r\n  color:var(--nk6-text);\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 8% 15%,\r\n      rgba(139,92,246,.09),\r\n      transparent 30%\r\n    ),\r\n    radial-gradient(\r\n      circle at 92% 85%,\r\n      rgba(59,130,246,.08),\r\n      transparent 30%\r\n    ),\r\n    var(--nk6-bg);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   WRAPPER\r\n========================================================= *\/\r\n\r\n.nk6-wrap{\r\n\r\n  width:100%;\r\n  max-width:1250px;\r\n\r\n  margin:auto;\r\n\r\n  position:relative;\r\n  z-index:2;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n.nk6-head{\r\n\r\n  max-width:800px;\r\n\r\n  margin:\r\n    0 auto 50px;\r\n\r\n  text-align:center;\r\n\r\n}\r\n\r\n.nk6-eyebrow{\r\n\r\n  display:inline-flex;\r\n\r\n  align-items:center;\r\n\r\n  gap:9px;\r\n\r\n  color:#b9a4ff;\r\n\r\n  font-size:11px;\r\n\r\n  font-weight:800;\r\n\r\n  letter-spacing:2.5px;\r\n\r\n  margin-bottom:18px;\r\n\r\n}\r\n\r\n.nk6-eyebrow span{\r\n\r\n  width:7px;\r\n  height:7px;\r\n\r\n  border-radius:50%;\r\n\r\n  background:\r\n    var(--nk6-purple);\r\n\r\n  box-shadow:\r\n    0 0 14px\r\n    var(--nk6-purple);\r\n\r\n}\r\n\r\n.nk6-head h2{\r\n\r\n  margin:0;\r\n\r\n  font-size:\r\n    clamp(40px,5vw,68px);\r\n\r\n  line-height:1.04;\r\n\r\n  letter-spacing:-2.5px;\r\n\r\n  font-weight:800;\r\n\r\n}\r\n\r\n.nk6-head h2 b{\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--nk6-purple),\r\n      var(--nk6-blue),\r\n      var(--nk6-cyan)\r\n    );\r\n\r\n  -webkit-background-clip:text;\r\n\r\n  background-clip:text;\r\n\r\n  color:transparent;\r\n\r\n}\r\n\r\n.nk6-head p{\r\n\r\n  max-width:680px;\r\n\r\n  margin:\r\n    22px auto 0;\r\n\r\n  color:var(--nk6-muted);\r\n\r\n  font-size:15px;\r\n\r\n  line-height:1.8;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FILTERS\r\n========================================================= *\/\r\n\r\n.nk6-filter-wrap{\r\n\r\n  display:flex;\r\n\r\n  justify-content:center;\r\n\r\n  flex-wrap:wrap;\r\n\r\n  gap:8px;\r\n\r\n  margin-bottom:35px;\r\n\r\n}\r\n\r\n.nk6-filter{\r\n\r\n  padding:\r\n    10px 17px;\r\n\r\n  border-radius:999px;\r\n\r\n  border:\r\n    1px solid\r\n    var(--nk6-border);\r\n\r\n  background:\r\n    rgba(255,255,255,.025);\r\n\r\n  color:#9999a5;\r\n\r\n  font-size:11px;\r\n\r\n  font-weight:800;\r\n\r\n  cursor:pointer;\r\n\r\n  transition:.3s;\r\n\r\n}\r\n\r\n.nk6-filter:hover{\r\n\r\n  color:white;\r\n\r\n  border-color:\r\n    rgba(139,92,246,.4);\r\n\r\n}\r\n\r\n.nk6-filter.active{\r\n\r\n  color:white;\r\n\r\n  border-color:transparent;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      var(--nk6-purple),\r\n      var(--nk6-blue)\r\n    );\r\n\r\n  box-shadow:\r\n    0 10px 30px\r\n    rgba(99,102,241,.2);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GALLERY GRID\r\n========================================================= *\/\r\n\r\n.nk6-gallery{\r\n\r\n  display:grid;\r\n\r\n  grid-template-columns:\r\n    repeat(4,1fr);\r\n\r\n  grid-auto-rows:\r\n    260px;\r\n\r\n  gap:16px;\r\n\r\n}\r\n\r\n.nk6-item{\r\n\r\n  min-width:0;\r\n  min-height:0;\r\n\r\n}\r\n\r\n.nk6-large{\r\n\r\n  grid-column:\r\n    span 2;\r\n\r\n  grid-row:\r\n    span 2;\r\n\r\n}\r\n\r\n.nk6-item.hidden{\r\n\r\n  display:none;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MEDIA\r\n========================================================= *\/\r\n\r\n.nk6-media{\r\n\r\n  position:relative;\r\n\r\n  width:100%;\r\n  height:100%;\r\n\r\n  overflow:hidden;\r\n\r\n  border-radius:22px;\r\n\r\n  border:\r\n    1px solid\r\n    var(--nk6-border);\r\n\r\n  background:#09090f;\r\n\r\n  transition:\r\n    transform .45s ease,\r\n    border-color .35s ease,\r\n    box-shadow .45s ease;\r\n\r\n}\r\n\r\n.nk6-item:hover .nk6-media{\r\n\r\n  transform:\r\n    translateY(-6px);\r\n\r\n  border-color:\r\n    rgba(139,92,246,.38);\r\n\r\n  box-shadow:\r\n    0 28px 70px\r\n    rgba(0,0,0,.45);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   IMAGES\r\n========================================================= *\/\r\n\r\n.nk6-media img{\r\n\r\n  display:block;\r\n\r\n  width:100%;\r\n  height:100%;\r\n\r\n  object-fit:cover;\r\n\r\n  transition:\r\n    transform .7s\r\n      cubic-bezier(.2,.8,.2,1),\r\n    filter .5s ease;\r\n\r\n}\r\n\r\n.nk6-item:hover\r\n.nk6-media img{\r\n\r\n  transform:\r\n    scale(1.055);\r\n\r\n  filter:\r\n    brightness(.7);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VIDEO\r\n========================================================= *\/\r\n\r\n.nk6-media video{\r\n\r\n  display:block;\r\n\r\n  width:100%;\r\n  height:100%;\r\n\r\n  object-fit:cover;\r\n\r\n  transition:\r\n    transform .7s ease,\r\n    filter .5s ease;\r\n\r\n}\r\n\r\n.nk6-item:hover\r\n.nk6-media video{\r\n\r\n  transform:\r\n    scale(1.045);\r\n\r\n  filter:\r\n    brightness(.68);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VIDEO BADGE\r\n========================================================= *\/\r\n\r\n.nk6-video-badge{\r\n\r\n  position:absolute;\r\n\r\n  top:15px;\r\n  left:15px;\r\n\r\n  z-index:4;\r\n\r\n  padding:\r\n    7px 10px;\r\n\r\n  border-radius:999px;\r\n\r\n  color:white;\r\n\r\n  background:\r\n    rgba(0,0,0,.55);\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255,255,255,.12);\r\n\r\n  font-size:8px;\r\n\r\n  font-weight:900;\r\n\r\n  letter-spacing:1.2px;\r\n\r\n  backdrop-filter:\r\n    blur(10px);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PLAY BUTTON\r\n========================================================= *\/\r\n\r\n.nk6-play{\r\n\r\n  position:absolute;\r\n\r\n  left:50%;\r\n  top:50%;\r\n\r\n  z-index:3;\r\n\r\n  width:62px;\r\n  height:62px;\r\n\r\n  display:flex;\r\n\r\n  align-items:center;\r\n  justify-content:center;\r\n\r\n  transform:\r\n    translate(-50%,-50%);\r\n\r\n  border-radius:50%;\r\n\r\n  color:white;\r\n\r\n  background:\r\n    rgba(0,0,0,.55);\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255,255,255,.2);\r\n\r\n  box-shadow:\r\n    0 12px 35px\r\n    rgba(0,0,0,.4);\r\n\r\n  font-size:17px;\r\n\r\n  pointer-events:none;\r\n\r\n  transition:.35s;\r\n\r\n}\r\n\r\n.nk6-item:hover\r\n.nk6-play{\r\n\r\n  transform:\r\n    translate(-50%,-50%)\r\n    scale(1.1);\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      var(--nk6-purple),\r\n      var(--nk6-blue)\r\n    );\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   OVERLAY\r\n========================================================= *\/\r\n\r\n.nk6-overlay{\r\n\r\n  position:absolute;\r\n\r\n  inset:0;\r\n\r\n  z-index:5;\r\n\r\n  display:flex;\r\n\r\n  flex-direction:column;\r\n\r\n  justify-content:flex-end;\r\n\r\n  align-items:flex-start;\r\n\r\n  padding:24px;\r\n\r\n  opacity:0;\r\n\r\n  background:\r\n    linear-gradient(\r\n      to top,\r\n      rgba(3,3,8,.97),\r\n      rgba(3,3,8,.48) 42%,\r\n      transparent 76%\r\n    );\r\n\r\n  transition:\r\n    opacity .4s ease;\r\n\r\n}\r\n\r\n.nk6-item:hover\r\n.nk6-overlay{\r\n\r\n  opacity:1;\r\n\r\n}\r\n\r\n.nk6-info span{\r\n\r\n  color:#b9a4ff;\r\n\r\n  font-size:8px;\r\n\r\n  font-weight:900;\r\n\r\n  letter-spacing:1.5px;\r\n\r\n}\r\n\r\n.nk6-info h3{\r\n\r\n  margin:\r\n    6px 0 4px;\r\n\r\n  font-size:22px;\r\n\r\n  line-height:1.15;\r\n\r\n  letter-spacing:-.5px;\r\n\r\n}\r\n\r\n.nk6-info p{\r\n\r\n  margin:\r\n    0 0 14px;\r\n\r\n  color:#aaaab5;\r\n\r\n  font-size:10px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VIEW BUTTON\r\n========================================================= *\/\r\n\r\n.nk6-view{\r\n\r\n  width:max-content;\r\n\r\n  padding:\r\n    9px 13px;\r\n\r\n  border-radius:9px;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255,255,255,.1);\r\n\r\n  color:white;\r\n\r\n  background:\r\n    rgba(255,255,255,.07);\r\n\r\n  font-size:9px;\r\n\r\n  font-weight:800;\r\n\r\n  cursor:pointer;\r\n\r\n  transition:.3s;\r\n\r\n}\r\n\r\n.nk6-view:hover{\r\n\r\n  border-color:transparent;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      var(--nk6-purple),\r\n      var(--nk6-blue)\r\n    );\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CTA\r\n========================================================= *\/\r\n\r\n.nk6-bottom{\r\n\r\n  display:flex;\r\n\r\n  align-items:center;\r\n\r\n  justify-content:space-between;\r\n\r\n  gap:30px;\r\n\r\n  margin-top:65px;\r\n\r\n  padding:40px;\r\n\r\n  border-radius:24px;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(139,92,246,.14);\r\n\r\n  background:\r\n    linear-gradient(\r\n      100deg,\r\n      rgba(139,92,246,.07),\r\n      rgba(59,130,246,.035)\r\n    );\r\n\r\n}\r\n\r\n.nk6-bottom > div span{\r\n\r\n  color:#8d8d98;\r\n\r\n  font-size:9px;\r\n\r\n  font-weight:800;\r\n\r\n  letter-spacing:2px;\r\n\r\n}\r\n\r\n.nk6-bottom h3{\r\n\r\n  margin:\r\n    9px 0 0;\r\n\r\n  font-size:30px;\r\n\r\n  letter-spacing:-1px;\r\n\r\n}\r\n\r\n.nk6-bottom h3 b{\r\n\r\n  color:#a78bfa;\r\n\r\n}\r\n\r\n.nk6-bottom a{\r\n\r\n  display:inline-flex;\r\n\r\n  align-items:center;\r\n\r\n  gap:12px;\r\n\r\n  padding:\r\n    14px 20px;\r\n\r\n  border-radius:12px;\r\n\r\n  color:white;\r\n\r\n  text-decoration:none;\r\n\r\n  font-size:11px;\r\n\r\n  font-weight:800;\r\n\r\n  white-space:nowrap;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      var(--nk6-purple),\r\n      var(--nk6-blue)\r\n    );\r\n\r\n  transition:.3s;\r\n\r\n}\r\n\r\n.nk6-bottom a:hover{\r\n\r\n  transform:\r\n    translateY(-3px);\r\n\r\n  box-shadow:\r\n    0 15px 40px\r\n    rgba(99,102,241,.25);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LIGHTBOX\r\n========================================================= *\/\r\n\r\n.nk6-lightbox{\r\n\r\n  position:fixed;\r\n\r\n  inset:0;\r\n\r\n  z-index:999999;\r\n\r\n  display:none;\r\n\r\n  align-items:center;\r\n  justify-content:center;\r\n\r\n  padding:20px;\r\n\r\n  background:\r\n    rgba(0,0,0,.9);\r\n\r\n  backdrop-filter:\r\n    blur(16px);\r\n\r\n}\r\n\r\n.nk6-lightbox.open{\r\n\r\n  display:flex;\r\n\r\n}\r\n\r\n.nk6-modal{\r\n\r\n  position:relative;\r\n\r\n  width:\r\n    min(1000px,96vw);\r\n\r\n  max-height:\r\n    94vh;\r\n\r\n  overflow:hidden;\r\n\r\n  border-radius:24px;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255,255,255,.12);\r\n\r\n  background:#09090f;\r\n\r\n  box-shadow:\r\n    0 40px 120px\r\n    rgba(0,0,0,.7);\r\n\r\n}\r\n\r\n.nk6-close{\r\n\r\n  position:absolute;\r\n\r\n  top:14px;\r\n  right:14px;\r\n\r\n  z-index:20;\r\n\r\n  width:40px;\r\n  height:40px;\r\n\r\n  display:flex;\r\n\r\n  align-items:center;\r\n  justify-content:center;\r\n\r\n  border:0;\r\n\r\n  border-radius:50%;\r\n\r\n  color:white;\r\n\r\n  background:\r\n    rgba(0,0,0,.65);\r\n\r\n  font-size:25px;\r\n\r\n  cursor:pointer;\r\n\r\n}\r\n\r\n.nk6-modal-media{\r\n\r\n  width:100%;\r\n\r\n  max-height:\r\n    calc(94vh - 80px);\r\n\r\n  display:flex;\r\n\r\n  align-items:center;\r\n  justify-content:center;\r\n\r\n  background:#030305;\r\n\r\n}\r\n\r\n.nk6-modal-media img{\r\n\r\n  display:block;\r\n\r\n  width:auto;\r\n  height:auto;\r\n\r\n  max-width:100%;\r\n\r\n  max-height:\r\n    calc(94vh - 80px);\r\n\r\n  object-fit:contain;\r\n\r\n}\r\n\r\n.nk6-modal-media video{\r\n\r\n  display:block;\r\n\r\n  width:100%;\r\n\r\n  max-height:\r\n    calc(94vh - 80px);\r\n\r\n  background:#000;\r\n\r\n}\r\n\r\n.nk6-modal-info{\r\n\r\n  padding:\r\n    14px 20px;\r\n\r\n  border-top:\r\n    1px solid\r\n    rgba(255,255,255,.06);\r\n\r\n}\r\n\r\n.nk6-modal-info span{\r\n\r\n  color:#a78bfa;\r\n\r\n  font-size:9px;\r\n\r\n  font-weight:800;\r\n\r\n  letter-spacing:1.5px;\r\n\r\n}\r\n\r\n.nk6-modal-info h3{\r\n\r\n  margin:\r\n    5px 0 0;\r\n\r\n  color:white;\r\n\r\n  font-size:18px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REVEAL\r\n========================================================= *\/\r\n\r\n.nk6-reveal{\r\n\r\n  opacity:0;\r\n\r\n  transform:\r\n    translateY(25px);\r\n\r\n  transition:\r\n    opacity .75s ease,\r\n    transform .75s ease;\r\n\r\n}\r\n\r\n.nk6-reveal.nk6-visible{\r\n\r\n  opacity:1;\r\n\r\n  transform:\r\n    translateY(0);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media(max-width:900px){\r\n\r\n  .nk6-gallery{\r\n\r\n    grid-template-columns:\r\n      repeat(2,1fr);\r\n\r\n  }\r\n\r\n  .nk6-large{\r\n\r\n    grid-column:\r\n      span 2;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media(max-width:767px){\r\n\r\n  #nk-step6{\r\n\r\n    padding:\r\n      85px 16px;\r\n\r\n  }\r\n\r\n  .nk6-head h2{\r\n\r\n    font-size:40px;\r\n\r\n    letter-spacing:-1.5px;\r\n\r\n  }\r\n\r\n  .nk6-head p{\r\n\r\n    font-size:14px;\r\n\r\n  }\r\n\r\n  .nk6-filter-wrap{\r\n\r\n    justify-content:flex-start;\r\n\r\n    overflow-x:auto;\r\n\r\n    flex-wrap:nowrap;\r\n\r\n    padding-bottom:6px;\r\n\r\n  }\r\n\r\n  .nk6-filter{\r\n\r\n    flex:\r\n      0 0 auto;\r\n\r\n  }\r\n\r\n  .nk6-gallery{\r\n\r\n    grid-template-columns:1fr;\r\n\r\n    grid-auto-rows:280px;\r\n\r\n  }\r\n\r\n  .nk6-large{\r\n\r\n    grid-column:\r\n      span 1;\r\n\r\n    grid-row:\r\n      span 1;\r\n\r\n  }\r\n\r\n  .nk6-overlay{\r\n\r\n    opacity:1;\r\n\r\n    padding:18px;\r\n\r\n    background:\r\n      linear-gradient(\r\n        to top,\r\n        rgba(3,3,8,.94),\r\n        transparent 72%\r\n      );\r\n\r\n  }\r\n\r\n  .nk6-info h3{\r\n\r\n    font-size:18px;\r\n\r\n  }\r\n\r\n  .nk6-bottom{\r\n\r\n    flex-direction:column;\r\n\r\n    align-items:flex-start;\r\n\r\n    padding:30px;\r\n\r\n  }\r\n\r\n  .nk6-bottom h3{\r\n\r\n    font-size:25px;\r\n\r\n  }\r\n\r\n  .nk6-modal{\r\n\r\n    width:96vw;\r\n\r\n    border-radius:18px;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media(prefers-reduced-motion:reduce){\r\n\r\n  #nk-step6 *,\r\n  #nk-step6 *:before,\r\n  #nk-step6 *:after{\r\n\r\n    animation:none !important;\r\n\r\n    transition:none !important;\r\n\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<script>\r\n\r\n(function(){\r\n\r\n  const section =\r\n    document.getElementById(\r\n      \"nk-step6\"\r\n    );\r\n\r\n  if(!section) return;\r\n\r\n\r\n  \/* =======================================================\r\n     FILTER SYSTEM\r\n  ======================================================= *\/\r\n\r\n  const filters =\r\n    section.querySelectorAll(\r\n      \".nk6-filter\"\r\n    );\r\n\r\n  const items =\r\n    section.querySelectorAll(\r\n      \".nk6-item\"\r\n    );\r\n\r\n\r\n  filters.forEach(filter=>{\r\n\r\n    filter.addEventListener(\r\n      \"click\",\r\n      ()=>{\r\n\r\n        filters.forEach(btn=>{\r\n          btn.classList.remove(\r\n            \"active\"\r\n          );\r\n        });\r\n\r\n        filter.classList.add(\r\n          \"active\"\r\n        );\r\n\r\n        const selected =\r\n          filter.dataset.filter;\r\n\r\n\r\n        items.forEach(item=>{\r\n\r\n          const categories =\r\n            item.dataset.category ||\r\n            \"\";\r\n\r\n\r\n          if(\r\n            selected === \"all\" ||\r\n            categories.includes(\r\n              selected\r\n            )\r\n          ){\r\n\r\n            item.classList.remove(\r\n              \"hidden\"\r\n            );\r\n\r\n          }else{\r\n\r\n            item.classList.add(\r\n              \"hidden\"\r\n            );\r\n\r\n          }\r\n\r\n        });\r\n\r\n      }\r\n    );\r\n\r\n  });\r\n\r\n\r\n  \/* =======================================================\r\n     VIDEO HOVER PREVIEW\r\n  ======================================================= *\/\r\n\r\n  const videoCards =\r\n    section.querySelectorAll(\r\n      \".nk6-video-card\"\r\n    );\r\n\r\n\r\n  videoCards.forEach(card=>{\r\n\r\n    const video =\r\n      card.querySelector(\r\n        \"video\"\r\n      );\r\n\r\n    if(!video) return;\r\n\r\n\r\n    card.addEventListener(\r\n      \"mouseenter\",\r\n      ()=>{\r\n\r\n        const play =\r\n          video.play();\r\n\r\n        if(play){\r\n\r\n          play.catch(\r\n            ()=>{}\r\n          );\r\n\r\n        }\r\n\r\n      }\r\n    );\r\n\r\n\r\n    card.addEventListener(\r\n      \"mouseleave\",\r\n      ()=>{\r\n\r\n        video.pause();\r\n\r\n        try{\r\n\r\n          video.currentTime = 0;\r\n\r\n        }catch(error){}\r\n\r\n      }\r\n    );\r\n\r\n  });\r\n\r\n\r\n  \/* =======================================================\r\n     LIGHTBOX\r\n  ======================================================= *\/\r\n\r\n  const lightbox =\r\n    document.getElementById(\r\n      \"nk6Lightbox\"\r\n    );\r\n\r\n  const modalMedia =\r\n    document.getElementById(\r\n      \"nk6ModalMedia\"\r\n    );\r\n\r\n  const modalTitle =\r\n    document.getElementById(\r\n      \"nk6ModalTitle\"\r\n    );\r\n\r\n  const modalType =\r\n    document.getElementById(\r\n      \"nk6ModalType\"\r\n    );\r\n\r\n  const close =\r\n    document.getElementById(\r\n      \"nk6Close\"\r\n    );\r\n\r\n\r\n  const viewButtons =\r\n    section.querySelectorAll(\r\n      \".nk6-view\"\r\n    );\r\n\r\n\r\n  viewButtons.forEach(button=>{\r\n\r\n    button.addEventListener(\r\n      \"click\",\r\n      ()=>{\r\n\r\n        const media =\r\n          button.dataset.media;\r\n\r\n        const src =\r\n          button.dataset.src;\r\n\r\n        const title =\r\n          button.dataset.title;\r\n\r\n        const type =\r\n          button.dataset.type;\r\n\r\n\r\n        modalTitle.textContent =\r\n          title;\r\n\r\n        modalType.textContent =\r\n          type.toUpperCase();\r\n\r\n\r\n        modalMedia.innerHTML =\r\n          \"\";\r\n\r\n\r\n        \/* IMAGE *\/\r\n\r\n        if(media === \"image\"){\r\n\r\n          const img =\r\n            document.createElement(\r\n              \"img\"\r\n            );\r\n\r\n          img.src = src;\r\n\r\n          img.alt = title;\r\n\r\n          modalMedia.appendChild(\r\n            img\r\n          );\r\n\r\n        }\r\n\r\n\r\n        \/* VIDEO *\/\r\n\r\n        if(media === \"video\"){\r\n\r\n          const video =\r\n            document.createElement(\r\n              \"video\"\r\n            );\r\n\r\n          video.controls = true;\r\n\r\n          video.autoplay = true;\r\n\r\n          video.playsInline = true;\r\n\r\n          video.setAttribute(\r\n            \"preload\",\r\n            \"metadata\"\r\n          );\r\n\r\n\r\n          const source =\r\n            document.createElement(\r\n              \"source\"\r\n            );\r\n\r\n          source.src = src;\r\n\r\n          source.type =\r\n            \"video\/mp4\";\r\n\r\n\r\n          video.appendChild(\r\n            source\r\n          );\r\n\r\n          modalMedia.appendChild(\r\n            video\r\n          );\r\n\r\n        }\r\n\r\n\r\n        lightbox.classList.add(\r\n          \"open\"\r\n        );\r\n\r\n        lightbox.setAttribute(\r\n          \"aria-hidden\",\r\n          \"false\"\r\n        );\r\n\r\n        document.body.style.overflow =\r\n          \"hidden\";\r\n\r\n      }\r\n    );\r\n\r\n  });\r\n\r\n\r\n  \/* =======================================================\r\n     CLOSE\r\n  ======================================================= *\/\r\n\r\n  function closeLightbox(){\r\n\r\n    const video =\r\n      modalMedia.querySelector(\r\n        \"video\"\r\n      );\r\n\r\n    if(video){\r\n\r\n      video.pause();\r\n\r\n    }\r\n\r\n    modalMedia.innerHTML =\r\n      \"\";\r\n\r\n    lightbox.classList.remove(\r\n      \"open\"\r\n    );\r\n\r\n    lightbox.setAttribute(\r\n      \"aria-hidden\",\r\n      \"true\"\r\n    );\r\n\r\n    document.body.style.overflow =\r\n      \"\";\r\n\r\n  }\r\n\r\n\r\n  close.addEventListener(\r\n    \"click\",\r\n    closeLightbox\r\n  );\r\n\r\n\r\n  lightbox.addEventListener(\r\n    \"click\",\r\n    event=>{\r\n\r\n      if(\r\n        event.target === lightbox\r\n      ){\r\n\r\n        closeLightbox();\r\n\r\n      }\r\n\r\n    }\r\n  );\r\n\r\n\r\n  document.addEventListener(\r\n    \"keydown\",\r\n    event=>{\r\n\r\n      if(\r\n        event.key === \"Escape\" &&\r\n        lightbox.classList.contains(\r\n          \"open\"\r\n        )\r\n      ){\r\n\r\n        closeLightbox();\r\n\r\n      }\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/* =======================================================\r\n     SCROLL REVEAL\r\n  ======================================================= *\/\r\n\r\n  const reveals =\r\n    section.querySelectorAll(\r\n      \".nk6-reveal\"\r\n    );\r\n\r\n\r\n  const observer =\r\n    new IntersectionObserver(\r\n      entries=>{\r\n\r\n        entries.forEach(entry=>{\r\n\r\n          if(\r\n            entry.isIntersecting\r\n          ){\r\n\r\n            entry.target.classList.add(\r\n              \"nk6-visible\"\r\n            );\r\n\r\n            observer.unobserve(\r\n              entry.target\r\n            );\r\n\r\n          }\r\n\r\n        });\r\n\r\n      },\r\n      {\r\n        threshold:.08\r\n      }\r\n    );\r\n\r\n\r\n  reveals.forEach(\r\n    element=>{\r\n      observer.observe(\r\n        element\r\n      );\r\n    }\r\n  );\r\n\r\n\r\n})();\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3f87cd5 elementor-widget elementor-widget-html\" data-id=\"3f87cd5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n     NK PORTFOLIO \u2014 STEP 7 : VIDEO CONTENT SHOWCASE\r\n     Elementor HTML Widget\r\n========================================================= -->\r\n\r\n<section id=\"nk-step7\">\r\n\r\n  <div class=\"nk7-wrap\">\r\n\r\n    <!-- HEADER -->\r\n    <div class=\"nk7-head\">\r\n\r\n      <div class=\"nk7-title-area\">\r\n        <div class=\"nk7-eyebrow\">\r\n          <span><\/span> VIDEO CONTENT\r\n        <\/div>\r\n\r\n        <h2>\r\n          Content That\r\n          <em>Moves<\/em>\r\n          <br>\r\n          People.\r\n        <\/h2>\r\n\r\n        <p>\r\n          Short-form ads, product videos, fashion content and\r\n          AI-powered creative videos designed for digital platforms.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div class=\"nk7-count\">\r\n        <strong>07<\/strong>\r\n        <span>Featured<br>Videos<\/span>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- FILTERS -->\r\n    <div class=\"nk7-filters\">\r\n\r\n      <button class=\"nk7-filter active\" data-filter=\"all\">\r\n        All Videos\r\n      <\/button>\r\n\r\n      <button class=\"nk7-filter\" data-filter=\"fashion\">\r\n        Fashion\r\n      <\/button>\r\n\r\n      <button class=\"nk7-filter\" data-filter=\"ecommerce\">\r\n        E-commerce\r\n      <\/button>\r\n\r\n      <button class=\"nk7-filter\" data-filter=\"ads\">\r\n        Ad Creative\r\n      <\/button>\r\n\r\n      <button class=\"nk7-filter\" data-filter=\"ai\">\r\n        AI Content\r\n      <\/button>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- FEATURED VIDEO -->\r\n    <div class=\"nk7-featured\" data-category=\"ecommerce ads\">\r\n\r\n      <div class=\"nk7-featured-video\">\r\n\r\n        <video\r\n          class=\"nk7-main-video\"\r\n          muted\r\n          loop\r\n          playsinline\r\n          preload=\"metadata\"\r\n          poster=\"\"\r\n        >\r\n          <source\r\n            src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/Smart-Shoping-Final-1.mp4\"\r\n            type=\"video\/mp4\"\r\n          >\r\n        <\/video>\r\n\r\n        <div class=\"nk7-video-overlay\"><\/div>\r\n\r\n        <button class=\"nk7-play-main\" aria-label=\"Play video\">\r\n          <span>\u25b6<\/span>\r\n        <\/button>\r\n\r\n        <div class=\"nk7-featured-label\">\r\n          <span class=\"nk7-dot\"><\/span>\r\n          FEATURED VIDEO\r\n        <\/div>\r\n\r\n        <div class=\"nk7-featured-info\">\r\n\r\n          <div>\r\n            <small>E-COMMERCE CONTENT<\/small>\r\n\r\n            <h3>\r\n              SmartShopping\r\n              <br>\r\n              Product Video\r\n            <\/h3>\r\n          <\/div>\r\n\r\n          <button\r\n            class=\"nk7-view-btn\"\r\n            data-video=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/Smart-Shoping-Final-1.mp4\"\r\n            data-title=\"SmartShopping \u2014 Final Video\"\r\n          >\r\n            VIEW FULL VIDEO\r\n            <span>\u2197<\/span>\r\n          <\/button>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"nk7-featured-side\">\r\n\r\n        <div class=\"nk7-side-number\">01<\/div>\r\n\r\n        <h4>\r\n          Turning products into\r\n          <span>visual stories.<\/span>\r\n        <\/h4>\r\n\r\n        <p>\r\n          Product-focused video content created for social media,\r\n          e-commerce campaigns and digital advertising.\r\n        <\/p>\r\n\r\n        <div class=\"nk7-mini-stats\">\r\n\r\n          <div>\r\n            <strong>01<\/strong>\r\n            <span>Featured<\/span>\r\n          <\/div>\r\n\r\n          <div>\r\n            <strong>07<\/strong>\r\n            <span>Videos<\/span>\r\n          <\/div>\r\n\r\n          <div>\r\n            <strong>4K<\/strong>\r\n            <span>Creative<\/span>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"nk7-scroll-note\">\r\n          <span><\/span>\r\n          Explore the collection\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- VIDEO GRID -->\r\n    <div class=\"nk7-grid\">\r\n\r\n\r\n      <!-- VIDEO 01 -->\r\n      <article\r\n        class=\"nk7-card nk7-large\"\r\n        data-category=\"fashion\"\r\n      >\r\n\r\n        <div class=\"nk7-card-media\">\r\n\r\n          <video\r\n            muted\r\n            loop\r\n            playsinline\r\n            preload=\"metadata\"\r\n          >\r\n            <source\r\n              src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/1d1af0cb-d692-4b7c-a455-520eda613b4a.mp4\"\r\n              type=\"video\/mp4\"\r\n            >\r\n          <\/video>\r\n\r\n          <div class=\"nk7-card-gradient\"><\/div>\r\n\r\n          <span class=\"nk7-card-type\">\r\n            FASHION\r\n          <\/span>\r\n\r\n          <button\r\n            class=\"nk7-card-play\"\r\n            data-video=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/1d1af0cb-d692-4b7c-a455-520eda613b4a.mp4\"\r\n            data-title=\"Madhuri Fashion \u2014 Video Content\"\r\n          >\r\n            \u25b6\r\n          <\/button>\r\n\r\n          <div class=\"nk7-card-bottom\">\r\n\r\n            <div>\r\n              <small>01 \/ FASHION CONTENT<\/small>\r\n\r\n              <h3>\r\n                Madhuri Fashion\r\n              <\/h3>\r\n            <\/div>\r\n\r\n            <span class=\"nk7-arrow\">\u2197<\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- VIDEO 02 -->\r\n      <article\r\n        class=\"nk7-card\"\r\n        data-category=\"ecommerce\"\r\n      >\r\n\r\n        <div class=\"nk7-card-media\">\r\n\r\n          <video\r\n            muted\r\n            loop\r\n            playsinline\r\n            preload=\"metadata\"\r\n          >\r\n            <source\r\n              src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/f7e087af-972e-4aaf-84c6-9f7c2f69d3fb.mp4\"\r\n              type=\"video\/mp4\"\r\n            >\r\n          <\/video>\r\n\r\n          <div class=\"nk7-card-gradient\"><\/div>\r\n\r\n          <span class=\"nk7-card-type\">\r\n            E-COMMERCE\r\n          <\/span>\r\n\r\n          <button\r\n            class=\"nk7-card-play\"\r\n            data-video=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/f7e087af-972e-4aaf-84c6-9f7c2f69d3fb.mp4\"\r\n            data-title=\"SmartShopping \u2014 Product Video\"\r\n          >\r\n            \u25b6\r\n          <\/button>\r\n\r\n          <div class=\"nk7-card-bottom\">\r\n\r\n            <div>\r\n              <small>02 \/ PRODUCT CONTENT<\/small>\r\n\r\n              <h3>\r\n                SmartShopping\r\n              <\/h3>\r\n            <\/div>\r\n\r\n            <span class=\"nk7-arrow\">\u2197<\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- VIDEO 03 -->\r\n      <article\r\n        class=\"nk7-card\"\r\n        data-category=\"ecommerce ads\"\r\n      >\r\n\r\n        <div class=\"nk7-card-media\">\r\n\r\n          <video\r\n            muted\r\n            loop\r\n            playsinline\r\n            preload=\"metadata\"\r\n          >\r\n            <source\r\n              src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/99.mp4\"\r\n              type=\"video\/mp4\"\r\n            >\r\n          <\/video>\r\n\r\n          <div class=\"nk7-card-gradient\"><\/div>\r\n\r\n          <span class=\"nk7-card-type\">\r\n            AD CREATIVE\r\n          <\/span>\r\n\r\n          <button\r\n            class=\"nk7-card-play\"\r\n            data-video=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/99.mp4\"\r\n            data-title=\"Baizamart \u2014 Ad Creative\"\r\n          >\r\n            \u25b6\r\n          <\/button>\r\n\r\n          <div class=\"nk7-card-bottom\">\r\n\r\n            <div>\r\n              <small>03 \/ AD CREATIVE<\/small>\r\n\r\n              <h3>\r\n                Baizamart\r\n              <\/h3>\r\n            <\/div>\r\n\r\n            <span class=\"nk7-arrow\">\u2197<\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- VIDEO 04 -->\r\n      <article\r\n        class=\"nk7-card\"\r\n        data-category=\"ecommerce ads\"\r\n      >\r\n\r\n        <div class=\"nk7-card-media\">\r\n\r\n          <video\r\n            muted\r\n            loop\r\n            playsinline\r\n            preload=\"metadata\"\r\n          >\r\n            <source\r\n              src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/Watch-By.mp4\"\r\n              type=\"video\/mp4\"\r\n            >\r\n          <\/video>\r\n\r\n          <div class=\"nk7-card-gradient\"><\/div>\r\n\r\n          <span class=\"nk7-card-type\">\r\n            PRODUCT AD\r\n          <\/span>\r\n\r\n          <button\r\n            class=\"nk7-card-play\"\r\n            data-video=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/Watch-By.mp4\"\r\n            data-title=\"Watch BAY \u2014 Product Video\"\r\n          >\r\n            \u25b6\r\n          <\/button>\r\n\r\n          <div class=\"nk7-card-bottom\">\r\n\r\n            <div>\r\n              <small>04 \/ PRODUCT VIDEO<\/small>\r\n\r\n              <h3>\r\n                Watch BAY\r\n              <\/h3>\r\n            <\/div>\r\n\r\n            <span class=\"nk7-arrow\">\u2197<\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- VIDEO 05 -->\r\n      <article\r\n        class=\"nk7-card nk7-wide\"\r\n        data-category=\"ecommerce\"\r\n      >\r\n\r\n        <div class=\"nk7-card-media\">\r\n\r\n          <video\r\n            muted\r\n            loop\r\n            playsinline\r\n            preload=\"metadata\"\r\n          >\r\n            <source\r\n              src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/1203.mp4\"\r\n              type=\"video\/mp4\"\r\n            >\r\n          <\/video>\r\n\r\n          <div class=\"nk7-card-gradient\"><\/div>\r\n\r\n          <span class=\"nk7-card-type\">\r\n            E-COMMERCE\r\n          <\/span>\r\n\r\n          <button\r\n            class=\"nk7-card-play\"\r\n            data-video=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/1203.mp4\"\r\n            data-title=\"SmartShopping \u2014 Video Content\"\r\n          >\r\n            \u25b6\r\n          <\/button>\r\n\r\n          <div class=\"nk7-card-bottom\">\r\n\r\n            <div>\r\n              <small>05 \/ SOCIAL CONTENT<\/small>\r\n\r\n              <h3>\r\n                SmartShopping\r\n              <\/h3>\r\n            <\/div>\r\n\r\n            <span class=\"nk7-arrow\">\u2197<\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- VIDEO 06 -->\r\n      <article\r\n        class=\"nk7-card\"\r\n        data-category=\"ai\"\r\n      >\r\n\r\n        <div class=\"nk7-card-media\">\r\n\r\n          <video\r\n            muted\r\n            loop\r\n            playsinline\r\n            preload=\"metadata\"\r\n          >\r\n            <source\r\n              src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/grok-video-0c0125e8-47f1-42b1-9a06-c1d9594cd572.mp4\"\r\n              type=\"video\/mp4\"\r\n            >\r\n          <\/video>\r\n\r\n          <div class=\"nk7-card-gradient\"><\/div>\r\n\r\n          <span class=\"nk7-card-type\">\r\n            AI VIDEO\r\n          <\/span>\r\n\r\n          <button\r\n            class=\"nk7-card-play\"\r\n            data-video=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/grok-video-0c0125e8-47f1-42b1-9a06-c1d9594cd572.mp4\"\r\n            data-title=\"SmartShopping \u2014 AI Video\"\r\n          >\r\n            \u25b6\r\n          <\/button>\r\n\r\n          <div class=\"nk7-card-bottom\">\r\n\r\n            <div>\r\n              <small>06 \/ AI CONTENT<\/small>\r\n\r\n              <h3>\r\n                AI Creative\r\n              <\/h3>\r\n            <\/div>\r\n\r\n            <span class=\"nk7-arrow\">\u2197<\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- VIDEO 07 -->\r\n      <article\r\n        class=\"nk7-card\"\r\n        data-category=\"ecommerce ads\"\r\n      >\r\n\r\n        <div class=\"nk7-card-media\">\r\n\r\n          <video\r\n            muted\r\n            loop\r\n            playsinline\r\n            preload=\"metadata\"\r\n          >\r\n            <source\r\n              src=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/Smart-Shoping-Final-1.mp4\"\r\n              type=\"video\/mp4\"\r\n            >\r\n          <\/video>\r\n\r\n          <div class=\"nk7-card-gradient\"><\/div>\r\n\r\n          <span class=\"nk7-card-type\">\r\n            FINAL CUT\r\n          <\/span>\r\n\r\n          <button\r\n            class=\"nk7-card-play\"\r\n            data-video=\"https:\/\/naimkhan.world\/wp-content\/uploads\/2026\/09\/Smart-Shoping-Final-1.mp4\"\r\n            data-title=\"SmartShopping \u2014 Final Video\"\r\n          >\r\n            \u25b6\r\n          <\/button>\r\n\r\n          <div class=\"nk7-card-bottom\">\r\n\r\n            <div>\r\n              <small>07 \/ FINAL VIDEO<\/small>\r\n\r\n              <h3>\r\n                SmartShopping\r\n              <\/h3>\r\n            <\/div>\r\n\r\n            <span class=\"nk7-arrow\">\u2197<\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- BOTTOM CTA -->\r\n    <div class=\"nk7-bottom\">\r\n\r\n      <div>\r\n        <span class=\"nk7-bottom-line\"><\/span>\r\n\r\n        <p>\r\n          Creative direction \u2022 Video content \u2022 Ad creatives\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <a href=\"#contact\" class=\"nk7-cta\">\r\n        LET'S CREATE\r\n        <span>\u2197<\/span>\r\n      <\/a>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n  <!-- VIDEO LIGHTBOX -->\r\n  <div class=\"nk7-lightbox\" aria-hidden=\"true\">\r\n\r\n    <div class=\"nk7-lightbox-bg\"><\/div>\r\n\r\n    <div class=\"nk7-lightbox-box\">\r\n\r\n      <button\r\n        class=\"nk7-close\"\r\n        aria-label=\"Close video\"\r\n      >\r\n        \u00d7\r\n      <\/button>\r\n\r\n      <div class=\"nk7-lightbox-video\">\r\n\r\n        <video\r\n          class=\"nk7-popup-video\"\r\n          controls\r\n          playsinline\r\n          preload=\"metadata\"\r\n        ><\/video>\r\n\r\n      <\/div>\r\n\r\n      <div class=\"nk7-lightbox-caption\">\r\n\r\n        <span>VIDEO CONTENT<\/span>\r\n\r\n        <h3 class=\"nk7-popup-title\">\r\n          Video\r\n        <\/h3>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   STEP 7 \u2014 BASE\r\n========================================================= *\/\r\n\r\n#nk-step7{\r\n  position:relative;\r\n  width:100%;\r\n  padding:130px 0;\r\n  overflow:hidden;\r\n  color:#fff;\r\n  background:\r\n    radial-gradient(\r\n      circle at 8% 20%,\r\n      rgba(91,45,255,.13),\r\n      transparent 32%\r\n    ),\r\n    radial-gradient(\r\n      circle at 92% 80%,\r\n      rgba(0,191,255,.09),\r\n      transparent 28%\r\n    ),\r\n    #050507;\r\n  font-family:\r\n    Inter,\r\n    Arial,\r\n    Helvetica,\r\n    sans-serif;\r\n}\r\n\r\n#nk-step7 *,\r\n#nk-step7 *::before,\r\n#nk-step7 *::after{\r\n  box-sizing:border-box;\r\n}\r\n\r\n.nk7-wrap{\r\n  width:min(1380px,92%);\r\n  margin:0 auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n.nk7-head{\r\n  display:flex;\r\n  justify-content:space-between;\r\n  align-items:flex-end;\r\n  gap:40px;\r\n  margin-bottom:55px;\r\n}\r\n\r\n.nk7-eyebrow{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:10px;\r\n  margin-bottom:20px;\r\n  color:#9d8cff;\r\n  font-size:11px;\r\n  font-weight:800;\r\n  letter-spacing:3px;\r\n}\r\n\r\n.nk7-eyebrow span{\r\n  width:28px;\r\n  height:1px;\r\n  background:linear-gradient(90deg,#8b5cf6,#22d3ee);\r\n}\r\n\r\n.nk7-title-area h2{\r\n  margin:0;\r\n  max-width:750px;\r\n  font-size:clamp(46px,7vw,88px);\r\n  line-height:.92;\r\n  letter-spacing:-5px;\r\n  font-weight:900;\r\n}\r\n\r\n.nk7-title-area h2 em{\r\n  font-style:normal;\r\n  background:linear-gradient(\r\n    90deg,\r\n    #8b5cf6,\r\n    #22d3ee\r\n  );\r\n  -webkit-background-clip:text;\r\n  background-clip:text;\r\n  color:transparent;\r\n}\r\n\r\n.nk7-title-area p{\r\n  max-width:620px;\r\n  margin:28px 0 0;\r\n  color:#8d8d99;\r\n  font-size:15px;\r\n  line-height:1.8;\r\n}\r\n\r\n.nk7-count{\r\n  min-width:120px;\r\n  padding:20px 0;\r\n  border-top:1px solid rgba(255,255,255,.15);\r\n}\r\n\r\n.nk7-count strong{\r\n  display:block;\r\n  font-size:55px;\r\n  line-height:1;\r\n  letter-spacing:-3px;\r\n}\r\n\r\n.nk7-count span{\r\n  display:block;\r\n  margin-top:7px;\r\n  color:#777782;\r\n  font-size:11px;\r\n  line-height:1.5;\r\n  text-transform:uppercase;\r\n  letter-spacing:1.5px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FILTERS\r\n========================================================= *\/\r\n\r\n.nk7-filters{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:9px;\r\n  margin-bottom:35px;\r\n}\r\n\r\n.nk7-filter{\r\n  appearance:none;\r\n  border:1px solid rgba(255,255,255,.10);\r\n  background:rgba(255,255,255,.025);\r\n  color:#8d8d98;\r\n  padding:11px 18px;\r\n  border-radius:100px;\r\n  font-size:11px;\r\n  font-weight:700;\r\n  letter-spacing:.5px;\r\n  cursor:pointer;\r\n  transition:\r\n    .3s ease;\r\n}\r\n\r\n.nk7-filter:hover,\r\n.nk7-filter.active{\r\n  color:#fff;\r\n  border-color:rgba(139,92,246,.6);\r\n  background:linear-gradient(\r\n    135deg,\r\n    rgba(139,92,246,.20),\r\n    rgba(34,211,238,.08)\r\n  );\r\n  box-shadow:\r\n    0 8px 30px rgba(139,92,246,.12);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FEATURED\r\n========================================================= *\/\r\n\r\n.nk7-featured{\r\n  display:grid;\r\n  grid-template-columns:minmax(0,1.65fr) minmax(280px,.65fr);\r\n  min-height:520px;\r\n  margin-bottom:55px;\r\n  border:1px solid rgba(255,255,255,.08);\r\n  border-radius:28px;\r\n  overflow:hidden;\r\n  background:#0b0b0f;\r\n  box-shadow:\r\n    0 30px 90px rgba(0,0,0,.35);\r\n}\r\n\r\n.nk7-featured-video{\r\n  position:relative;\r\n  min-height:520px;\r\n  overflow:hidden;\r\n  background:#09090c;\r\n}\r\n\r\n.nk7-main-video{\r\n  width:100%;\r\n  height:100%;\r\n  min-height:520px;\r\n  object-fit:cover;\r\n  display:block;\r\n}\r\n\r\n.nk7-video-overlay{\r\n  position:absolute;\r\n  inset:0;\r\n  background:\r\n    linear-gradient(\r\n      180deg,\r\n      rgba(0,0,0,.10),\r\n      transparent 35%,\r\n      rgba(0,0,0,.82)\r\n    );\r\n  pointer-events:none;\r\n}\r\n\r\n.nk7-featured-label{\r\n  position:absolute;\r\n  top:25px;\r\n  left:25px;\r\n  display:flex;\r\n  align-items:center;\r\n  gap:8px;\r\n  padding:9px 13px;\r\n  border:1px solid rgba(255,255,255,.12);\r\n  border-radius:100px;\r\n  background:rgba(0,0,0,.42);\r\n  backdrop-filter:blur(12px);\r\n  color:#fff;\r\n  font-size:9px;\r\n  font-weight:800;\r\n  letter-spacing:1.7px;\r\n}\r\n\r\n.nk7-dot{\r\n  width:6px;\r\n  height:6px;\r\n  border-radius:50%;\r\n  background:#22d3ee;\r\n  box-shadow:\r\n    0 0 14px #22d3ee;\r\n}\r\n\r\n.nk7-play-main{\r\n  position:absolute;\r\n  top:50%;\r\n  left:50%;\r\n  transform:translate(-50%,-50%);\r\n  width:72px;\r\n  height:72px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  border:1px solid rgba(255,255,255,.35);\r\n  border-radius:50%;\r\n  background:rgba(0,0,0,.35);\r\n  backdrop-filter:blur(15px);\r\n  color:#fff;\r\n  font-size:19px;\r\n  cursor:pointer;\r\n  transition:.35s ease;\r\n  z-index:3;\r\n}\r\n\r\n.nk7-play-main span{\r\n  margin-left:4px;\r\n}\r\n\r\n.nk7-play-main:hover{\r\n  transform:\r\n    translate(-50%,-50%)\r\n    scale(1.12);\r\n  border-color:#9d8cff;\r\n  background:rgba(139,92,246,.3);\r\n  box-shadow:\r\n    0 0 40px rgba(139,92,246,.35);\r\n}\r\n\r\n.nk7-featured-info{\r\n  position:absolute;\r\n  left:30px;\r\n  right:30px;\r\n  bottom:27px;\r\n  display:flex;\r\n  align-items:flex-end;\r\n  justify-content:space-between;\r\n  gap:25px;\r\n  z-index:3;\r\n}\r\n\r\n.nk7-featured-info small{\r\n  color:#aaaab5;\r\n  font-size:9px;\r\n  font-weight:800;\r\n  letter-spacing:2px;\r\n}\r\n\r\n.nk7-featured-info h3{\r\n  margin:8px 0 0;\r\n  font-size:clamp(27px,3vw,48px);\r\n  line-height:.98;\r\n  letter-spacing:-2px;\r\n}\r\n\r\n.nk7-view-btn{\r\n  flex-shrink:0;\r\n  display:flex;\r\n  align-items:center;\r\n  gap:12px;\r\n  border:1px solid rgba(255,255,255,.16);\r\n  border-radius:100px;\r\n  padding:12px 17px;\r\n  color:#fff;\r\n  background:rgba(0,0,0,.38);\r\n  backdrop-filter:blur(12px);\r\n  font-size:9px;\r\n  font-weight:800;\r\n  letter-spacing:1.5px;\r\n  cursor:pointer;\r\n  transition:.3s ease;\r\n}\r\n\r\n.nk7-view-btn span{\r\n  font-size:15px;\r\n}\r\n\r\n.nk7-view-btn:hover{\r\n  border-color:#8b5cf6;\r\n  background:#8b5cf6;\r\n}\r\n\r\n\r\n.nk7-featured-side{\r\n  display:flex;\r\n  flex-direction:column;\r\n  justify-content:space-between;\r\n  padding:40px;\r\n  background:\r\n    radial-gradient(\r\n      circle at 80% 10%,\r\n      rgba(139,92,246,.14),\r\n      transparent 35%\r\n    ),\r\n    #0b0b10;\r\n  border-left:1px solid rgba(255,255,255,.07);\r\n}\r\n\r\n.nk7-side-number{\r\n  color:#565660;\r\n  font-size:12px;\r\n  letter-spacing:2px;\r\n}\r\n\r\n.nk7-featured-side h4{\r\n  margin:70px 0 0;\r\n  max-width:300px;\r\n  font-size:32px;\r\n  line-height:1.08;\r\n  letter-spacing:-1.7px;\r\n}\r\n\r\n.nk7-featured-side h4 span{\r\n  color:#9d8cff;\r\n}\r\n\r\n.nk7-featured-side p{\r\n  max-width:300px;\r\n  margin:20px 0 0;\r\n  color:#777783;\r\n  font-size:13px;\r\n  line-height:1.8;\r\n}\r\n\r\n.nk7-mini-stats{\r\n  display:grid;\r\n  grid-template-columns:repeat(3,1fr);\r\n  gap:12px;\r\n  margin-top:auto;\r\n  padding-top:35px;\r\n}\r\n\r\n.nk7-mini-stats div{\r\n  padding-top:15px;\r\n  border-top:1px solid rgba(255,255,255,.1);\r\n}\r\n\r\n.nk7-mini-stats strong{\r\n  display:block;\r\n  font-size:23px;\r\n}\r\n\r\n.nk7-mini-stats span{\r\n  color:#666670;\r\n  font-size:9px;\r\n  text-transform:uppercase;\r\n  letter-spacing:1px;\r\n}\r\n\r\n.nk7-scroll-note{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:10px;\r\n  margin-top:30px;\r\n  color:#62626c;\r\n  font-size:9px;\r\n  text-transform:uppercase;\r\n  letter-spacing:1.5px;\r\n}\r\n\r\n.nk7-scroll-note span{\r\n  width:30px;\r\n  height:1px;\r\n  background:#565660;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VIDEO GRID\r\n========================================================= *\/\r\n\r\n.nk7-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(4,1fr);\r\n  gap:18px;\r\n}\r\n\r\n.nk7-card{\r\n  min-width:0;\r\n}\r\n\r\n.nk7-card-media{\r\n  position:relative;\r\n  height:390px;\r\n  overflow:hidden;\r\n  border-radius:20px;\r\n  background:#0b0b0f;\r\n  border:1px solid rgba(255,255,255,.07);\r\n}\r\n\r\n.nk7-card.nk7-large{\r\n  grid-column:span 2;\r\n}\r\n\r\n.nk7-card.nk7-large .nk7-card-media{\r\n  height:390px;\r\n}\r\n\r\n.nk7-card.nk7-wide{\r\n  grid-column:span 2;\r\n}\r\n\r\n.nk7-card.nk7-wide .nk7-card-media{\r\n  height:300px;\r\n}\r\n\r\n.nk7-card-media video{\r\n  width:100%;\r\n  height:100%;\r\n  object-fit:cover;\r\n  display:block;\r\n  transform:scale(1.001);\r\n  transition:\r\n    transform .8s cubic-bezier(.2,.7,.2,1);\r\n}\r\n\r\n.nk7-card:hover .nk7-card-media video{\r\n  transform:scale(1.055);\r\n}\r\n\r\n.nk7-card-gradient{\r\n  position:absolute;\r\n  inset:0;\r\n  background:\r\n    linear-gradient(\r\n      180deg,\r\n      rgba(0,0,0,.05) 20%,\r\n      rgba(0,0,0,.82) 100%\r\n    );\r\n  pointer-events:none;\r\n}\r\n\r\n.nk7-card-type{\r\n  position:absolute;\r\n  top:17px;\r\n  left:17px;\r\n  padding:7px 10px;\r\n  border:1px solid rgba(255,255,255,.12);\r\n  border-radius:100px;\r\n  background:rgba(0,0,0,.38);\r\n  backdrop-filter:blur(10px);\r\n  color:#dddde4;\r\n  font-size:8px;\r\n  font-weight:800;\r\n  letter-spacing:1.5px;\r\n}\r\n\r\n.nk7-card-play{\r\n  position:absolute;\r\n  top:50%;\r\n  left:50%;\r\n  transform:\r\n    translate(-50%,-50%)\r\n    scale(.85);\r\n  width:52px;\r\n  height:52px;\r\n  border:1px solid rgba(255,255,255,.35);\r\n  border-radius:50%;\r\n  background:rgba(0,0,0,.3);\r\n  backdrop-filter:blur(12px);\r\n  color:#fff;\r\n  cursor:pointer;\r\n  opacity:0;\r\n  transition:.35s ease;\r\n  z-index:2;\r\n}\r\n\r\n.nk7-card:hover .nk7-card-play{\r\n  opacity:1;\r\n  transform:\r\n    translate(-50%,-50%)\r\n    scale(1);\r\n}\r\n\r\n.nk7-card-play:hover{\r\n  background:#8b5cf6;\r\n  border-color:#8b5cf6;\r\n  box-shadow:\r\n    0 0 30px rgba(139,92,246,.4);\r\n}\r\n\r\n.nk7-card-bottom{\r\n  position:absolute;\r\n  left:20px;\r\n  right:20px;\r\n  bottom:18px;\r\n  display:flex;\r\n  justify-content:space-between;\r\n  align-items:flex-end;\r\n  gap:20px;\r\n  z-index:2;\r\n}\r\n\r\n.nk7-card-bottom small{\r\n  color:#9d9da7;\r\n  font-size:8px;\r\n  font-weight:800;\r\n  letter-spacing:1.5px;\r\n}\r\n\r\n.nk7-card-bottom h3{\r\n  margin:6px 0 0;\r\n  color:#fff;\r\n  font-size:20px;\r\n  line-height:1;\r\n  letter-spacing:-.6px;\r\n}\r\n\r\n.nk7-arrow{\r\n  width:36px;\r\n  height:36px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  border:1px solid rgba(255,255,255,.14);\r\n  border-radius:50%;\r\n  background:rgba(0,0,0,.3);\r\n  backdrop-filter:blur(10px);\r\n  font-size:15px;\r\n  transition:.3s ease;\r\n}\r\n\r\n.nk7-card:hover .nk7-arrow{\r\n  background:#8b5cf6;\r\n  border-color:#8b5cf6;\r\n  transform:rotate(45deg);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BOTTOM CTA\r\n========================================================= *\/\r\n\r\n.nk7-bottom{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:30px;\r\n  margin-top:60px;\r\n  padding-top:30px;\r\n  border-top:1px solid rgba(255,255,255,.08);\r\n}\r\n\r\n.nk7-bottom-line{\r\n  display:block;\r\n  width:40px;\r\n  height:1px;\r\n  margin-bottom:13px;\r\n  background:linear-gradient(\r\n    90deg,\r\n    #8b5cf6,\r\n    #22d3ee\r\n  );\r\n}\r\n\r\n.nk7-bottom p{\r\n  margin:0;\r\n  color:#666670;\r\n  font-size:10px;\r\n  text-transform:uppercase;\r\n  letter-spacing:1.7px;\r\n}\r\n\r\n.nk7-cta{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:15px;\r\n  padding:14px 20px;\r\n  border:1px solid rgba(139,92,246,.4);\r\n  border-radius:100px;\r\n  color:#fff;\r\n  text-decoration:none;\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(139,92,246,.17),\r\n      rgba(34,211,238,.06)\r\n    );\r\n  font-size:10px;\r\n  font-weight:800;\r\n  letter-spacing:1.5px;\r\n  transition:.3s ease;\r\n}\r\n\r\n.nk7-cta span{\r\n  font-size:16px;\r\n}\r\n\r\n.nk7-cta:hover{\r\n  background:#8b5cf6;\r\n  border-color:#8b5cf6;\r\n  transform:translateY(-3px);\r\n  box-shadow:\r\n    0 15px 35px rgba(139,92,246,.25);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LIGHTBOX\r\n========================================================= *\/\r\n\r\n.nk7-lightbox{\r\n  position:fixed;\r\n  inset:0;\r\n  z-index:999999;\r\n  display:none;\r\n  align-items:center;\r\n  justify-content:center;\r\n  padding:30px;\r\n}\r\n\r\n.nk7-lightbox.open{\r\n  display:flex;\r\n}\r\n\r\n.nk7-lightbox-bg{\r\n  position:absolute;\r\n  inset:0;\r\n  background:rgba(0,0,0,.88);\r\n  backdrop-filter:blur(18px);\r\n}\r\n\r\n.nk7-lightbox-box{\r\n  position:relative;\r\n  width:min(1100px,95vw);\r\n  z-index:2;\r\n  border:1px solid rgba(255,255,255,.12);\r\n  border-radius:20px;\r\n  overflow:hidden;\r\n  background:#08080b;\r\n  box-shadow:\r\n    0 40px 120px rgba(0,0,0,.7);\r\n}\r\n\r\n.nk7-lightbox-video{\r\n  width:100%;\r\n  background:#000;\r\n}\r\n\r\n.nk7-popup-video{\r\n  width:100%;\r\n  max-height:75vh;\r\n  display:block;\r\n}\r\n\r\n.nk7-close{\r\n  position:absolute;\r\n  top:15px;\r\n  right:15px;\r\n  z-index:5;\r\n  width:42px;\r\n  height:42px;\r\n  border:1px solid rgba(255,255,255,.15);\r\n  border-radius:50%;\r\n  background:rgba(0,0,0,.5);\r\n  backdrop-filter:blur(10px);\r\n  color:#fff;\r\n  font-size:25px;\r\n  line-height:1;\r\n  cursor:pointer;\r\n}\r\n\r\n.nk7-close:hover{\r\n  background:#8b5cf6;\r\n  border-color:#8b5cf6;\r\n}\r\n\r\n.nk7-lightbox-caption{\r\n  padding:18px 22px 20px;\r\n}\r\n\r\n.nk7-lightbox-caption span{\r\n  color:#8b7dff;\r\n  font-size:9px;\r\n  font-weight:800;\r\n  letter-spacing:1.7px;\r\n}\r\n\r\n.nk7-lightbox-caption h3{\r\n  margin:6px 0 0;\r\n  font-size:22px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FILTER ANIMATION\r\n========================================================= *\/\r\n\r\n.nk7-card.hidden{\r\n  display:none;\r\n}\r\n\r\n.nk7-featured.hidden{\r\n  display:none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESPONSIVE\r\n========================================================= *\/\r\n\r\n@media(max-width:1100px){\r\n\r\n  .nk7-grid{\r\n    grid-template-columns:repeat(2,1fr);\r\n  }\r\n\r\n  .nk7-card.nk7-large,\r\n  .nk7-card.nk7-wide{\r\n    grid-column:span 2;\r\n  }\r\n\r\n  .nk7-card-media,\r\n  .nk7-card.nk7-large .nk7-card-media{\r\n    height:380px;\r\n  }\r\n\r\n  .nk7-card.nk7-wide .nk7-card-media{\r\n    height:330px;\r\n  }\r\n\r\n}\r\n\r\n\r\n@media(max-width:800px){\r\n\r\n  #nk-step7{\r\n    padding:90px 0;\r\n  }\r\n\r\n  .nk7-head{\r\n    align-items:flex-start;\r\n  }\r\n\r\n  .nk7-title-area h2{\r\n    letter-spacing:-3px;\r\n  }\r\n\r\n  .nk7-featured{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .nk7-featured-side{\r\n    min-height:340px;\r\n    border-left:0;\r\n    border-top:1px solid rgba(255,255,255,.07);\r\n  }\r\n\r\n  .nk7-featured-side h4{\r\n    margin-top:30px;\r\n  }\r\n\r\n  .nk7-main-video,\r\n  .nk7-featured-video{\r\n    min-height:420px;\r\n  }\r\n\r\n}\r\n\r\n\r\n@media(max-width:600px){\r\n\r\n  #nk-step7{\r\n    padding:75px 0;\r\n  }\r\n\r\n  .nk7-wrap{\r\n    width:90%;\r\n  }\r\n\r\n  .nk7-head{\r\n    display:block;\r\n  }\r\n\r\n  .nk7-count{\r\n    margin-top:30px;\r\n    width:100%;\r\n  }\r\n\r\n  .nk7-title-area h2{\r\n    font-size:48px;\r\n  }\r\n\r\n  .nk7-title-area p{\r\n    font-size:13px;\r\n  }\r\n\r\n  .nk7-filters{\r\n    gap:7px;\r\n  }\r\n\r\n  .nk7-filter{\r\n    padding:9px 13px;\r\n    font-size:9px;\r\n  }\r\n\r\n  .nk7-featured{\r\n    border-radius:20px;\r\n  }\r\n\r\n  .nk7-main-video,\r\n  .nk7-featured-video{\r\n    min-height:400px;\r\n  }\r\n\r\n  .nk7-featured-info{\r\n    left:20px;\r\n    right:20px;\r\n    bottom:20px;\r\n    display:block;\r\n  }\r\n\r\n  .nk7-view-btn{\r\n    margin-top:18px;\r\n  }\r\n\r\n  .nk7-featured-side{\r\n    padding:28px;\r\n  }\r\n\r\n  .nk7-grid{\r\n    grid-template-columns:1fr;\r\n    gap:14px;\r\n  }\r\n\r\n  .nk7-card.nk7-large,\r\n  .nk7-card.nk7-wide{\r\n    grid-column:span 1;\r\n  }\r\n\r\n  .nk7-card-media,\r\n  .nk7-card.nk7-large .nk7-card-media,\r\n  .nk7-card.nk7-wide .nk7-card-media{\r\n    height:430px;\r\n  }\r\n\r\n  .nk7-card-play{\r\n    opacity:1;\r\n    transform:\r\n      translate(-50%,-50%)\r\n      scale(1);\r\n  }\r\n\r\n  .nk7-bottom{\r\n    display:block;\r\n  }\r\n\r\n  .nk7-cta{\r\n    width:max-content;\r\n    margin-top:22px;\r\n  }\r\n\r\n  .nk7-lightbox{\r\n    padding:12px;\r\n  }\r\n\r\n  .nk7-lightbox-box{\r\n    border-radius:14px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media(prefers-reduced-motion:reduce){\r\n\r\n  #nk-step7 *,\r\n  #nk-step7 *::before,\r\n  #nk-step7 *::after{\r\n    scroll-behavior:auto !important;\r\n    transition:none !important;\r\n    animation:none !important;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<script>\r\n(function(){\r\n\r\n  const root = document.querySelector('#nk-step7');\r\n\r\n  if(!root) return;\r\n\r\n\r\n  \/* =====================================================\r\n     FILTER\r\n  ===================================================== *\/\r\n\r\n  const filters = root.querySelectorAll('.nk7-filter');\r\n  const cards = root.querySelectorAll('.nk7-card');\r\n\r\n  filters.forEach(filter => {\r\n\r\n    filter.addEventListener('click', function(){\r\n\r\n      filters.forEach(f =>\r\n        f.classList.remove('active')\r\n      );\r\n\r\n      this.classList.add('active');\r\n\r\n      const selected = this.dataset.filter;\r\n\r\n      cards.forEach(card => {\r\n\r\n        const categories =\r\n          (card.dataset.category || '').split(' ');\r\n\r\n        if(\r\n          selected === 'all' ||\r\n          categories.includes(selected)\r\n        ){\r\n\r\n          card.classList.remove('hidden');\r\n\r\n        }else{\r\n\r\n          card.classList.add('hidden');\r\n\r\n          const video =\r\n            card.querySelector('video');\r\n\r\n          if(video){\r\n            video.pause();\r\n          }\r\n\r\n        }\r\n\r\n      });\r\n\r\n    });\r\n\r\n  });\r\n\r\n\r\n  \/* =====================================================\r\n     HOVER VIDEO PLAY\r\n  ===================================================== *\/\r\n\r\n  const videoCards =\r\n    root.querySelectorAll('.nk7-card');\r\n\r\n  videoCards.forEach(card => {\r\n\r\n    const video =\r\n      card.querySelector('video');\r\n\r\n    if(!video) return;\r\n\r\n    card.addEventListener('mouseenter', () => {\r\n\r\n      video.currentTime = 0;\r\n\r\n      const playPromise =\r\n        video.play();\r\n\r\n      if(playPromise !== undefined){\r\n        playPromise.catch(() => {});\r\n      }\r\n\r\n    });\r\n\r\n    card.addEventListener('mouseleave', () => {\r\n\r\n      video.pause();\r\n\r\n    });\r\n\r\n  });\r\n\r\n\r\n  \/* =====================================================\r\n     FEATURED VIDEO\r\n  ===================================================== *\/\r\n\r\n  const mainVideo =\r\n    root.querySelector('.nk7-main-video');\r\n\r\n  const mainPlay =\r\n    root.querySelector('.nk7-play-main');\r\n\r\n  if(mainVideo && mainPlay){\r\n\r\n    mainPlay.addEventListener('click', () => {\r\n\r\n      if(mainVideo.paused){\r\n\r\n        mainVideo.play();\r\n\r\n        mainPlay.innerHTML =\r\n          '<span>\u275a\u275a<\/span>';\r\n\r\n      }else{\r\n\r\n        mainVideo.pause();\r\n\r\n        mainPlay.innerHTML =\r\n          '<span>\u25b6<\/span>';\r\n\r\n      }\r\n\r\n    });\r\n\r\n    mainVideo.addEventListener('play', () => {\r\n\r\n      mainPlay.innerHTML =\r\n        '<span>\u275a\u275a<\/span>';\r\n\r\n    });\r\n\r\n    mainVideo.addEventListener('pause', () => {\r\n\r\n      mainPlay.innerHTML =\r\n        '<span>\u25b6<\/span>';\r\n\r\n    });\r\n\r\n  }\r\n\r\n\r\n  \/* =====================================================\r\n     LIGHTBOX\r\n  ===================================================== *\/\r\n\r\n  const lightbox =\r\n    root.querySelector('.nk7-lightbox');\r\n\r\n  const popupVideo =\r\n    root.querySelector('.nk7-popup-video');\r\n\r\n  const popupTitle =\r\n    root.querySelector('.nk7-popup-title');\r\n\r\n  const closeBtn =\r\n    root.querySelector('.nk7-close');\r\n\r\n  const lightboxBg =\r\n    root.querySelector('.nk7-lightbox-bg');\r\n\r\n\r\n  function openVideo(url,title){\r\n\r\n    if(!lightbox || !popupVideo) return;\r\n\r\n    popupVideo.pause();\r\n\r\n    popupVideo.src = url;\r\n\r\n    popupVideo.load();\r\n\r\n    if(popupTitle){\r\n      popupTitle.textContent =\r\n        title || 'Video';\r\n    }\r\n\r\n    lightbox.classList.add('open');\r\n\r\n    lightbox.setAttribute(\r\n      'aria-hidden',\r\n      'false'\r\n    );\r\n\r\n    document.body.style.overflow = 'hidden';\r\n\r\n    const playPromise =\r\n      popupVideo.play();\r\n\r\n    if(playPromise !== undefined){\r\n      playPromise.catch(() => {});\r\n    }\r\n\r\n  }\r\n\r\n\r\n  function closeVideo(){\r\n\r\n    if(!lightbox) return;\r\n\r\n    popupVideo.pause();\r\n\r\n    popupVideo.removeAttribute('src');\r\n\r\n    popupVideo.load();\r\n\r\n    lightbox.classList.remove('open');\r\n\r\n    lightbox.setAttribute(\r\n      'aria-hidden',\r\n      'true'\r\n    );\r\n\r\n    document.body.style.overflow = '';\r\n\r\n  }\r\n\r\n\r\n  root.querySelectorAll(\r\n    '.nk7-card-play, .nk7-view-btn'\r\n  ).forEach(button => {\r\n\r\n    button.addEventListener('click', function(e){\r\n\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n\r\n      const url =\r\n        this.dataset.video;\r\n\r\n      const title =\r\n        this.dataset.title;\r\n\r\n      if(url){\r\n        openVideo(url,title);\r\n      }\r\n\r\n    });\r\n\r\n  });\r\n\r\n\r\n  if(closeBtn){\r\n\r\n    closeBtn.addEventListener(\r\n      'click',\r\n      closeVideo\r\n    );\r\n\r\n  }\r\n\r\n\r\n  if(lightboxBg){\r\n\r\n    lightboxBg.addEventListener(\r\n      'click',\r\n      closeVideo\r\n    );\r\n\r\n  }\r\n\r\n\r\n  document.addEventListener(\r\n    'keydown',\r\n    function(e){\r\n\r\n      if(\r\n        e.key === 'Escape' &&\r\n        lightbox.classList.contains('open')\r\n      ){\r\n\r\n        closeVideo();\r\n\r\n      }\r\n\r\n    }\r\n  );\r\n\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e9023e9 elementor-widget elementor-widget-html\" data-id=\"e9023e9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n     NK PORTFOLIO \u2014 STEP 8 : CASE STUDIES\r\n     Elementor HTML Widget\r\n========================================================= -->\r\n\r\n<section id=\"nk-step8\">\r\n\r\n  <div class=\"nk8-wrap\">\r\n\r\n    <!-- HEADER -->\r\n    <div class=\"nk8-header\">\r\n\r\n      <div>\r\n        <div class=\"nk8-eyebrow\">\r\n          <span><\/span>\r\n          SELECTED CASE STUDIES\r\n        <\/div>\r\n\r\n        <h2>\r\n          Strategy behind<br>\r\n          <em>the work.<\/em>\r\n        <\/h2>\r\n      <\/div>\r\n\r\n      <div class=\"nk8-intro\">\r\n        <p>\r\n          A closer look at selected digital marketing,\r\n          e-commerce and creative projects \u2014 from the\r\n          challenge to the execution.\r\n        <\/p>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- CASE STUDY 01 -->\r\n    <article class=\"nk8-case\">\r\n\r\n      <div class=\"nk8-number\">\r\n        01\r\n      <\/div>\r\n\r\n      <div class=\"nk8-case-main\">\r\n\r\n        <div class=\"nk8-case-top\">\r\n\r\n          <div>\r\n            <span class=\"nk8-tag\">\r\n              E-COMMERCE\r\n            <\/span>\r\n\r\n            <h3>\r\n              Super Mart BD\r\n            <\/h3>\r\n\r\n            <p class=\"nk8-summary\">\r\n              E-commerce focused digital marketing and\r\n              creative execution designed to present products\r\n              clearly and build a stronger online shopping\r\n              experience.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div class=\"nk8-case-icon\">\r\n            \u2197\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"nk8-process\">\r\n\r\n          <div class=\"nk8-process-item\">\r\n            <span>01<\/span>\r\n            <h4>Challenge<\/h4>\r\n            <p>\r\n              Build a consistent digital presence for a\r\n              multi-product e-commerce business.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div class=\"nk8-process-item\">\r\n            <span>02<\/span>\r\n            <h4>Strategy<\/h4>\r\n            <p>\r\n              Combine product presentation, social media\r\n              creatives and performance-focused marketing.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div class=\"nk8-process-item\">\r\n            <span>03<\/span>\r\n            <h4>Execution<\/h4>\r\n            <p>\r\n              Campaign creatives, product-focused content,\r\n              landing-page direction and digital promotion.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div class=\"nk8-process-item\">\r\n            <span>04<\/span>\r\n            <h4>Outcome<\/h4>\r\n            <p>\r\n              A more structured e-commerce communication\r\n              system across digital touchpoints.\r\n            <\/p>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"nk8-tools\">\r\n\r\n          <span>Meta Ads<\/span>\r\n          <span>Creative Strategy<\/span>\r\n          <span>E-commerce<\/span>\r\n          <span>Product Content<\/span>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/article>\r\n\r\n\r\n    <!-- CASE STUDY 02 -->\r\n    <article class=\"nk8-case nk8-reverse\">\r\n\r\n      <div class=\"nk8-number\">\r\n        02\r\n      <\/div>\r\n\r\n      <div class=\"nk8-case-main\">\r\n\r\n        <div class=\"nk8-case-top\">\r\n\r\n          <div>\r\n            <span class=\"nk8-tag\">\r\n              PERFORMANCE MARKETING\r\n            <\/span>\r\n\r\n            <h3>\r\n              DealhatBD\r\n            <\/h3>\r\n\r\n            <p class=\"nk8-summary\">\r\n              A digital marketing project focused on creating\r\n              stronger promotional creatives and a more\r\n              conversion-oriented e-commerce communication flow.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div class=\"nk8-case-icon\">\r\n            \u2197\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"nk8-process\">\r\n\r\n          <div class=\"nk8-process-item\">\r\n            <span>01<\/span>\r\n            <h4>Challenge<\/h4>\r\n            <p>\r\n              Communicate product offers quickly while keeping\r\n              the brand visually consistent.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div class=\"nk8-process-item\">\r\n            <span>02<\/span>\r\n            <h4>Strategy<\/h4>\r\n            <p>\r\n              Develop scroll-stopping social creatives with\r\n              clear product hierarchy and messaging.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div class=\"nk8-process-item\">\r\n            <span>03<\/span>\r\n            <h4>Execution<\/h4>\r\n            <p>\r\n              Facebook-focused ad creatives, product visuals\r\n              and promotional content.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div class=\"nk8-process-item\">\r\n            <span>04<\/span>\r\n            <h4>Outcome<\/h4>\r\n            <p>\r\n              A more recognizable and organized promotional\r\n              content direction for the store.\r\n            <\/p>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"nk8-tools\">\r\n\r\n          <span>Meta Ads<\/span>\r\n          <span>Facebook Creative<\/span>\r\n          <span>Ad Copy<\/span>\r\n          <span>E-commerce<\/span>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/article>\r\n\r\n\r\n    <!-- CASE STUDY 03 -->\r\n    <article class=\"nk8-case\">\r\n\r\n      <div class=\"nk8-number\">\r\n        03\r\n      <\/div>\r\n\r\n      <div class=\"nk8-case-main\">\r\n\r\n        <div class=\"nk8-case-top\">\r\n\r\n          <div>\r\n            <span class=\"nk8-tag\">\r\n              BRANDING + E-COMMERCE\r\n            <\/span>\r\n\r\n            <h3>\r\n              Choita Bazar\r\n            <\/h3>\r\n\r\n            <p class=\"nk8-summary\">\r\n              Brand identity and digital storefront direction\r\n              created to give an online shopping business a\r\n              clear and memorable visual presence.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div class=\"nk8-case-icon\">\r\n            \u2197\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"nk8-process\">\r\n\r\n          <div class=\"nk8-process-item\">\r\n            <span>01<\/span>\r\n            <h4>Challenge<\/h4>\r\n            <p>\r\n              Create a distinctive visual identity suitable for\r\n              an online marketplace.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div class=\"nk8-process-item\">\r\n            <span>02<\/span>\r\n            <h4>Strategy<\/h4>\r\n            <p>\r\n              Build a clean brand direction that works across\r\n              web, social media and promotional material.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div class=\"nk8-process-item\">\r\n            <span>03<\/span>\r\n            <h4>Execution<\/h4>\r\n            <p>\r\n              Logo direction, web banner concepts and digital\r\n              visual assets.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div class=\"nk8-process-item\">\r\n            <span>04<\/span>\r\n            <h4>Outcome<\/h4>\r\n            <p>\r\n              A consistent visual foundation for the brand's\r\n              online presence.\r\n            <\/p>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"nk8-tools\">\r\n\r\n          <span>Branding<\/span>\r\n          <span>Logo Design<\/span>\r\n          <span>Web Design<\/span>\r\n          <span>Creative Direction<\/span>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/article>\r\n\r\n\r\n    <!-- CASE STUDY 04 -->\r\n    <article class=\"nk8-case nk8-highlight\">\r\n\r\n      <div class=\"nk8-number\">\r\n        04\r\n      <\/div>\r\n\r\n      <div class=\"nk8-case-main\">\r\n\r\n        <div class=\"nk8-case-top\">\r\n\r\n          <div>\r\n            <span class=\"nk8-tag\">\r\n              FASHION E-COMMERCE\r\n            <\/span>\r\n\r\n            <h3>\r\n              Beautyiner\r\n            <\/h3>\r\n\r\n            <p class=\"nk8-summary\">\r\n              A fashion and lingerie-focused e-commerce\r\n              project combining product presentation, landing\r\n              page direction and digital marketing creatives.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div class=\"nk8-case-icon\">\r\n            \u2197\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"nk8-process\">\r\n\r\n          <div class=\"nk8-process-item\">\r\n            <span>01<\/span>\r\n            <h4>Challenge<\/h4>\r\n            <p>\r\n              Present fashion products in a visually appealing\r\n              and conversion-friendly digital environment.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div class=\"nk8-process-item\">\r\n            <span>02<\/span>\r\n            <h4>Strategy<\/h4>\r\n            <p>\r\n              Combine product-focused design with clear\r\n              promotional messaging.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div class=\"nk8-process-item\">\r\n            <span>03<\/span>\r\n            <h4>Execution<\/h4>\r\n            <p>\r\n              Landing-page direction, product presentation,\r\n              branding and advertising creatives.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div class=\"nk8-process-item\">\r\n            <span>04<\/span>\r\n            <h4>Outcome<\/h4>\r\n            <p>\r\n              A cohesive digital presentation designed around\r\n              the product and target audience.\r\n            <\/p>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"nk8-tools\">\r\n\r\n          <span>Meta Ads<\/span>\r\n          <span>WordPress<\/span>\r\n          <span>Landing Page<\/span>\r\n          <span>Creative Design<\/span>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/article>\r\n\r\n\r\n    <!-- WORKFLOW -->\r\n    <div class=\"nk8-workflow\">\r\n\r\n      <div class=\"nk8-workflow-title\">\r\n\r\n        <span>MY APPROACH<\/span>\r\n\r\n        <h3>\r\n          From idea to\r\n          <em>execution.<\/em>\r\n        <\/h3>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"nk8-flow-grid\">\r\n\r\n        <div class=\"nk8-flow\">\r\n          <strong>01<\/strong>\r\n          <h4>Discover<\/h4>\r\n          <p>\r\n            Understand the business, audience and objective.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"nk8-flow\">\r\n          <strong>02<\/strong>\r\n          <h4>Plan<\/h4>\r\n          <p>\r\n            Build the creative and marketing direction.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"nk8-flow\">\r\n          <strong>03<\/strong>\r\n          <h4>Create<\/h4>\r\n          <p>\r\n            Turn the strategy into digital assets and campaigns.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"nk8-flow\">\r\n          <strong>04<\/strong>\r\n          <h4>Optimize<\/h4>\r\n          <p>\r\n            Refine the work based on audience response and goals.\r\n          <\/p>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- CTA -->\r\n    <div class=\"nk8-cta\">\r\n\r\n      <div>\r\n\r\n        <span class=\"nk8-cta-line\"><\/span>\r\n\r\n        <h3>\r\n          Have a project<br>\r\n          in mind?\r\n        <\/h3>\r\n\r\n      <\/div>\r\n\r\n      <a href=\"#contact\">\r\n        START A PROJECT\r\n        <span>\u2197<\/span>\r\n      <\/a>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   STEP 8 \u2014 BASE\r\n========================================================= *\/\r\n\r\n#nk-step8{\r\n  position:relative;\r\n  width:100%;\r\n  padding:130px 0;\r\n  overflow:hidden;\r\n  color:#fff;\r\n  background:\r\n    radial-gradient(\r\n      circle at 90% 15%,\r\n      rgba(139,92,246,.12),\r\n      transparent 30%\r\n    ),\r\n    radial-gradient(\r\n      circle at 5% 70%,\r\n      rgba(34,211,238,.06),\r\n      transparent 25%\r\n    ),\r\n    #050507;\r\n  font-family:\r\n    Inter,\r\n    Arial,\r\n    Helvetica,\r\n    sans-serif;\r\n}\r\n\r\n#nk-step8 *,\r\n#nk-step8 *::before,\r\n#nk-step8 *::after{\r\n  box-sizing:border-box;\r\n}\r\n\r\n.nk8-wrap{\r\n  width:min(1380px,92%);\r\n  margin:auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n.nk8-header{\r\n  display:grid;\r\n  grid-template-columns:1.2fr .8fr;\r\n  align-items:end;\r\n  gap:60px;\r\n  margin-bottom:80px;\r\n}\r\n\r\n.nk8-eyebrow{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:10px;\r\n  margin-bottom:20px;\r\n  color:#9d8cff;\r\n  font-size:10px;\r\n  font-weight:800;\r\n  letter-spacing:3px;\r\n}\r\n\r\n.nk8-eyebrow span{\r\n  width:30px;\r\n  height:1px;\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #8b5cf6,\r\n      #22d3ee\r\n    );\r\n}\r\n\r\n.nk8-header h2{\r\n  margin:0;\r\n  font-size:clamp(50px,7vw,92px);\r\n  line-height:.9;\r\n  letter-spacing:-5px;\r\n  font-weight:900;\r\n}\r\n\r\n.nk8-header h2 em{\r\n  font-style:normal;\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #8b5cf6,\r\n      #22d3ee\r\n    );\r\n  -webkit-background-clip:text;\r\n  background-clip:text;\r\n  color:transparent;\r\n}\r\n\r\n.nk8-intro{\r\n  padding-bottom:5px;\r\n}\r\n\r\n.nk8-intro p{\r\n  max-width:450px;\r\n  margin:0;\r\n  color:#81818d;\r\n  font-size:14px;\r\n  line-height:1.9;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CASE STUDY\r\n========================================================= *\/\r\n\r\n.nk8-case{\r\n  position:relative;\r\n  display:grid;\r\n  grid-template-columns:90px 1fr;\r\n  gap:35px;\r\n  padding:55px 0;\r\n  border-top:1px solid rgba(255,255,255,.08);\r\n}\r\n\r\n.nk8-case:last-of-type{\r\n  border-bottom:1px solid rgba(255,255,255,.08);\r\n}\r\n\r\n.nk8-number{\r\n  color:#393942;\r\n  font-size:14px;\r\n  font-weight:800;\r\n  letter-spacing:2px;\r\n  padding-top:7px;\r\n}\r\n\r\n.nk8-case-main{\r\n  min-width:0;\r\n}\r\n\r\n.nk8-case-top{\r\n  display:flex;\r\n  justify-content:space-between;\r\n  align-items:flex-start;\r\n  gap:30px;\r\n}\r\n\r\n.nk8-tag{\r\n  display:inline-flex;\r\n  padding:7px 11px;\r\n  border:1px solid rgba(139,92,246,.25);\r\n  border-radius:100px;\r\n  color:#a69bff;\r\n  background:rgba(139,92,246,.06);\r\n  font-size:8px;\r\n  font-weight:800;\r\n  letter-spacing:1.5px;\r\n}\r\n\r\n.nk8-case-top h3{\r\n  margin:16px 0 10px;\r\n  font-size:clamp(34px,4vw,58px);\r\n  line-height:1;\r\n  letter-spacing:-3px;\r\n}\r\n\r\n.nk8-summary{\r\n  max-width:680px;\r\n  margin:0;\r\n  color:#777781;\r\n  font-size:13px;\r\n  line-height:1.8;\r\n}\r\n\r\n.nk8-case-icon{\r\n  flex-shrink:0;\r\n  width:52px;\r\n  height:52px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  border:1px solid rgba(255,255,255,.1);\r\n  border-radius:50%;\r\n  color:#888892;\r\n  font-size:19px;\r\n  transition:.35s ease;\r\n}\r\n\r\n.nk8-case:hover .nk8-case-icon{\r\n  color:#fff;\r\n  border-color:#8b5cf6;\r\n  background:#8b5cf6;\r\n  transform:rotate(45deg);\r\n  box-shadow:\r\n    0 0 30px rgba(139,92,246,.25);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PROCESS\r\n========================================================= *\/\r\n\r\n.nk8-process{\r\n  display:grid;\r\n  grid-template-columns:repeat(4,1fr);\r\n  gap:18px;\r\n  margin-top:45px;\r\n}\r\n\r\n.nk8-process-item{\r\n  min-height:190px;\r\n  padding:20px;\r\n  border:1px solid rgba(255,255,255,.07);\r\n  border-radius:16px;\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      rgba(255,255,255,.025),\r\n      rgba(255,255,255,.008)\r\n    );\r\n  transition:.35s ease;\r\n}\r\n\r\n.nk8-process-item:hover{\r\n  transform:translateY(-5px);\r\n  border-color:rgba(139,92,246,.3);\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      rgba(139,92,246,.09),\r\n      rgba(255,255,255,.015)\r\n    );\r\n}\r\n\r\n.nk8-process-item > span{\r\n  display:block;\r\n  color:#575761;\r\n  font-size:9px;\r\n  font-weight:800;\r\n  letter-spacing:2px;\r\n}\r\n\r\n.nk8-process-item h4{\r\n  margin:28px 0 9px;\r\n  font-size:16px;\r\n}\r\n\r\n.nk8-process-item p{\r\n  margin:0;\r\n  color:#6e6e79;\r\n  font-size:11px;\r\n  line-height:1.75;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TOOLS\r\n========================================================= *\/\r\n\r\n.nk8-tools{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:8px;\r\n  margin-top:22px;\r\n}\r\n\r\n.nk8-tools span{\r\n  padding:7px 11px;\r\n  border:1px solid rgba(255,255,255,.08);\r\n  border-radius:100px;\r\n  color:#666670;\r\n  font-size:8px;\r\n  font-weight:700;\r\n  letter-spacing:1px;\r\n  text-transform:uppercase;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HIGHLIGHT CASE\r\n========================================================= *\/\r\n\r\n.nk8-highlight{\r\n  margin-top:10px;\r\n  padding-left:20px;\r\n  padding-right:20px;\r\n  border:1px solid rgba(139,92,246,.14);\r\n  border-radius:24px;\r\n  background:\r\n    radial-gradient(\r\n      circle at 100% 0%,\r\n      rgba(139,92,246,.10),\r\n      transparent 35%\r\n    ),\r\n    rgba(139,92,246,.025);\r\n}\r\n\r\n.nk8-highlight .nk8-number{\r\n  padding-left:5px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   WORKFLOW\r\n========================================================= *\/\r\n\r\n.nk8-workflow{\r\n  margin-top:110px;\r\n  padding:60px;\r\n  border:1px solid rgba(255,255,255,.07);\r\n  border-radius:26px;\r\n  background:\r\n    radial-gradient(\r\n      circle at 80% 20%,\r\n      rgba(34,211,238,.06),\r\n      transparent 30%\r\n    ),\r\n    #0a0a0e;\r\n}\r\n\r\n.nk8-workflow-title > span{\r\n  color:#8b7dff;\r\n  font-size:9px;\r\n  font-weight:800;\r\n  letter-spacing:2.5px;\r\n}\r\n\r\n.nk8-workflow-title h3{\r\n  margin:12px 0 45px;\r\n  font-size:40px;\r\n  line-height:1;\r\n  letter-spacing:-2px;\r\n}\r\n\r\n.nk8-workflow-title h3 em{\r\n  font-style:normal;\r\n  color:#9d8cff;\r\n}\r\n\r\n.nk8-flow-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(4,1fr);\r\n  gap:20px;\r\n}\r\n\r\n.nk8-flow{\r\n  position:relative;\r\n  padding-top:20px;\r\n  border-top:1px solid rgba(255,255,255,.1);\r\n}\r\n\r\n.nk8-flow strong{\r\n  color:#4b4b55;\r\n  font-size:10px;\r\n  letter-spacing:2px;\r\n}\r\n\r\n.nk8-flow h4{\r\n  margin:25px 0 8px;\r\n  font-size:19px;\r\n}\r\n\r\n.nk8-flow p{\r\n  margin:0;\r\n  color:#6c6c76;\r\n  font-size:11px;\r\n  line-height:1.7;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CTA\r\n========================================================= *\/\r\n\r\n.nk8-cta{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:30px;\r\n  margin-top:100px;\r\n  padding-top:35px;\r\n  border-top:1px solid rgba(255,255,255,.08);\r\n}\r\n\r\n.nk8-cta-line{\r\n  display:block;\r\n  width:35px;\r\n  height:1px;\r\n  margin-bottom:18px;\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #8b5cf6,\r\n      #22d3ee\r\n    );\r\n}\r\n\r\n.nk8-cta h3{\r\n  margin:0;\r\n  font-size:clamp(35px,5vw,62px);\r\n  line-height:.95;\r\n  letter-spacing:-3px;\r\n}\r\n\r\n.nk8-cta a{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:15px;\r\n  padding:16px 22px;\r\n  border:1px solid rgba(139,92,246,.35);\r\n  border-radius:100px;\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(139,92,246,.16),\r\n      rgba(34,211,238,.05)\r\n    );\r\n  color:#fff;\r\n  text-decoration:none;\r\n  font-size:9px;\r\n  font-weight:800;\r\n  letter-spacing:1.5px;\r\n  transition:.3s ease;\r\n}\r\n\r\n.nk8-cta a span{\r\n  font-size:16px;\r\n}\r\n\r\n.nk8-cta a:hover{\r\n  border-color:#8b5cf6;\r\n  background:#8b5cf6;\r\n  transform:translateY(-3px);\r\n  box-shadow:\r\n    0 15px 35px rgba(139,92,246,.25);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESPONSIVE\r\n========================================================= *\/\r\n\r\n@media(max-width:1000px){\r\n\r\n  .nk8-header{\r\n    grid-template-columns:1fr;\r\n    gap:25px;\r\n  }\r\n\r\n  .nk8-process{\r\n    grid-template-columns:repeat(2,1fr);\r\n  }\r\n\r\n  .nk8-flow-grid{\r\n    grid-template-columns:repeat(2,1fr);\r\n    row-gap:35px;\r\n  }\r\n\r\n}\r\n\r\n\r\n@media(max-width:700px){\r\n\r\n  #nk-step8{\r\n    padding:85px 0;\r\n  }\r\n\r\n  .nk8-header h2{\r\n    font-size:54px;\r\n    letter-spacing:-3px;\r\n  }\r\n\r\n  .nk8-case{\r\n    grid-template-columns:45px 1fr;\r\n    gap:15px;\r\n    padding:40px 0;\r\n  }\r\n\r\n  .nk8-case-top{\r\n    gap:15px;\r\n  }\r\n\r\n  .nk8-case-top h3{\r\n    font-size:36px;\r\n    letter-spacing:-2px;\r\n  }\r\n\r\n  .nk8-case-icon{\r\n    width:42px;\r\n    height:42px;\r\n    font-size:16px;\r\n  }\r\n\r\n  .nk8-process{\r\n    grid-template-columns:1fr;\r\n    margin-top:30px;\r\n  }\r\n\r\n  .nk8-process-item{\r\n    min-height:auto;\r\n  }\r\n\r\n  .nk8-workflow{\r\n    margin-top:75px;\r\n    padding:30px 22px;\r\n    border-radius:20px;\r\n  }\r\n\r\n  .nk8-workflow-title h3{\r\n    font-size:32px;\r\n  }\r\n\r\n  .nk8-flow-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .nk8-highlight{\r\n    padding-left:15px;\r\n    padding-right:15px;\r\n  }\r\n\r\n  .nk8-cta{\r\n    display:block;\r\n    margin-top:75px;\r\n  }\r\n\r\n  .nk8-cta a{\r\n    width:max-content;\r\n    margin-top:25px;\r\n  }\r\n\r\n}\r\n\r\n\r\n@media(prefers-reduced-motion:reduce){\r\n\r\n  #nk-step8 *,\r\n  #nk-step8 *::before,\r\n  #nk-step8 *::after{\r\n    transition:none !important;\r\n    animation:none !important;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<script>\r\n(function(){\r\n\r\n  const root =\r\n    document.querySelector('#nk-step8');\r\n\r\n  if(!root) return;\r\n\r\n  \/*\r\n    Small reveal effect.\r\n    Uses IntersectionObserver so the section\r\n    does not create unnecessary scroll listeners.\r\n  *\/\r\n\r\n  const items =\r\n    root.querySelectorAll(\r\n      '.nk8-case, .nk8-workflow, .nk8-cta'\r\n    );\r\n\r\n  items.forEach(item => {\r\n\r\n    item.style.opacity = '0';\r\n    item.style.transform = 'translateY(24px)';\r\n    item.style.transition =\r\n      'opacity .7s ease, transform .7s ease';\r\n\r\n  });\r\n\r\n\r\n  if('IntersectionObserver' in window){\r\n\r\n    const observer =\r\n      new IntersectionObserver(\r\n        entries => {\r\n\r\n          entries.forEach(entry => {\r\n\r\n            if(entry.isIntersecting){\r\n\r\n              entry.target.style.opacity = '1';\r\n              entry.target.style.transform =\r\n                'translateY(0)';\r\n\r\n              observer.unobserve(\r\n                entry.target\r\n              );\r\n\r\n            }\r\n\r\n          });\r\n\r\n        },\r\n        {\r\n          threshold:.12\r\n        }\r\n      );\r\n\r\n    items.forEach(item =>\r\n      observer.observe(item)\r\n    );\r\n\r\n  }else{\r\n\r\n    items.forEach(item => {\r\n\r\n      item.style.opacity = '1';\r\n      item.style.transform =\r\n        'translateY(0)';\r\n\r\n    });\r\n\r\n  }\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7c16712 elementor-widget elementor-widget-html\" data-id=\"7c16712\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n     NK PORTFOLIO \u2014 STEP 9 : CONTACT\r\n     Elementor HTML Widget\r\n========================================================= -->\r\n\r\n<section id=\"contact\">\r\n\r\n  <div class=\"nk9-wrap\">\r\n\r\n    <!-- TOP HEADER -->\r\n    <div class=\"nk9-header\">\r\n\r\n      <div class=\"nk9-eyebrow\">\r\n        <span><\/span>\r\n        LET'S WORK TOGETHER\r\n      <\/div>\r\n\r\n      <h2>\r\n        Let's build something\r\n        <em>worth noticing.<\/em>\r\n      <\/h2>\r\n\r\n      <p>\r\n        Have a project, campaign or business idea in mind?\r\n        Tell me what you're working on and let's discuss\r\n        how I can help.\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- CONTACT GRID -->\r\n    <div class=\"nk9-grid\">\r\n\r\n\r\n      <!-- LEFT -->\r\n      <div class=\"nk9-info\">\r\n\r\n        <div class=\"nk9-info-title\">\r\n          <span>GET IN TOUCH<\/span>\r\n\r\n          <h3>\r\n            Start a<br>\r\n            conversation.\r\n          <\/h3>\r\n        <\/div>\r\n\r\n\r\n        <!-- WHATSAPP -->\r\n        <a\r\n          class=\"nk9-contact-card\"\r\n          href=\"https:\/\/wa.me\/8801713707069\"\r\n          target=\"_blank\"\r\n          rel=\"noopener\"\r\n        >\r\n\r\n          <div class=\"nk9-contact-icon\">\r\n            <span>WA<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"nk9-contact-text\">\r\n            <small>WHATSAPP<\/small>\r\n            <strong>+880 1770084836<\/strong>\r\n          <\/div>\r\n\r\n          <span class=\"nk9-contact-arrow\">\u2197<\/span>\r\n\r\n        <\/a>\r\n\r\n\r\n        <!-- PHONE -->\r\n        <a\r\n          class=\"nk9-contact-card\"\r\n          href=\"tel:+8801713707069\"\r\n        >\r\n\r\n          <div class=\"nk9-contact-icon\">\r\n            <span>\u260e<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"nk9-contact-text\">\r\n            <small>PHONE<\/small>\r\n            <strong>+880 1770084836<\/strong>\r\n          <\/div>\r\n\r\n          <span class=\"nk9-contact-arrow\">\u2197<\/span>\r\n\r\n        <\/a>\r\n\r\n\r\n        <!-- EMAIL -->\r\n        <a\r\n          class=\"nk9-contact-card\"\r\n          href=\"mailto:hello@naimkhan.world\"\r\n        >\r\n\r\n          <div class=\"nk9-contact-icon\">\r\n            <span>@<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"nk9-contact-text\">\r\n            <small>EMAIL<\/small>\r\n            <strong>mdnaimkhanofficial@gmail.com<\/strong>\r\n          <\/div>\r\n\r\n          <span class=\"nk9-contact-arrow\">\u2197<\/span>\r\n\r\n        <\/a>\r\n\r\n\r\n        <!-- SOCIAL -->\r\n        <div class=\"nk9-social\">\r\n\r\n          <span>FOLLOW \/ CONNECT<\/span>\r\n\r\n          <div class=\"nk9-social-links\">\r\n\r\n            <a\r\n              href=\"https:\/\/www.facebook.com\/\"\r\n              target=\"_blank\"\r\n              rel=\"noopener\"\r\n              aria-label=\"Facebook\"\r\n            >\r\n              f\r\n            <\/a>\r\n\r\n            <a\r\n              href=\"https:\/\/www.linkedin.com\/\"\r\n              target=\"_blank\"\r\n              rel=\"noopener\"\r\n              aria-label=\"LinkedIn\"\r\n            >\r\n              in\r\n            <\/a>\r\n\r\n            <a\r\n              href=\"https:\/\/www.instagram.com\/\"\r\n              target=\"_blank\"\r\n              rel=\"noopener\"\r\n              aria-label=\"Instagram\"\r\n            >\r\n              ig\r\n            <\/a>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- RIGHT FORM -->\r\n      <div class=\"nk9-form-box\">\r\n\r\n        <div class=\"nk9-form-top\">\r\n\r\n          <div>\r\n            <span>PROJECT INQUIRY<\/span>\r\n\r\n            <h3>\r\n              Tell me about\r\n              <em>your project.<\/em>\r\n            <\/h3>\r\n          <\/div>\r\n\r\n          <div class=\"nk9-form-number\">\r\n            09\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <form\r\n          id=\"nk9-contact-form\"\r\n          novalidate\r\n        >\r\n\r\n\r\n          <!-- NAME -->\r\n          <div class=\"nk9-field\">\r\n\r\n            <label for=\"nk9-name\">\r\n              YOUR NAME\r\n            <\/label>\r\n\r\n            <input\r\n              id=\"nk9-name\"\r\n              name=\"name\"\r\n              type=\"text\"\r\n              placeholder=\"Your name\"\r\n              required\r\n            >\r\n\r\n          <\/div>\r\n\r\n\r\n          <!-- EMAIL -->\r\n          <div class=\"nk9-field\">\r\n\r\n            <label for=\"nk9-email\">\r\n              EMAIL ADDRESS\r\n            <\/label>\r\n\r\n            <input\r\n              id=\"nk9-email\"\r\n              name=\"email\"\r\n              type=\"email\"\r\n              placeholder=\"you@example.com\"\r\n              required\r\n            >\r\n\r\n          <\/div>\r\n\r\n\r\n          <!-- PHONE -->\r\n          <div class=\"nk9-field\">\r\n\r\n            <label for=\"nk9-phone\">\r\n              PHONE \/ WHATSAPP\r\n            <\/label>\r\n\r\n            <input\r\n              id=\"nk9-phone\"\r\n              name=\"phone\"\r\n              type=\"tel\"\r\n              placeholder=\"+880...\"\r\n            >\r\n\r\n          <\/div>\r\n\r\n\r\n          <!-- SERVICE -->\r\n          <div class=\"nk9-field\">\r\n\r\n            <label for=\"nk9-service\">\r\n              WHAT DO YOU NEED?\r\n            <\/label>\r\n\r\n            <select\r\n              id=\"nk9-service\"\r\n              name=\"service\"\r\n              required\r\n            >\r\n\r\n              <option value=\"\">\r\n                Select a service\r\n              <\/option>\r\n\r\n              <option>\r\n                Meta Ads & Performance Marketing\r\n              <\/option>\r\n\r\n              <option>\r\n                Google Ads\r\n              <\/option>\r\n\r\n              <option>\r\n                WordPress Website\r\n              <\/option>\r\n\r\n              <option>\r\n                Elementor Landing Page\r\n              <\/option>\r\n\r\n              <option>\r\n                E-commerce Marketing\r\n              <\/option>\r\n\r\n              <option>\r\n                Creative Design\r\n              <\/option>\r\n\r\n              <option>\r\n                Video \/ AI Content\r\n              <\/option>\r\n\r\n              <option>\r\n                Full Digital Marketing\r\n              <\/option>\r\n\r\n            <\/select>\r\n\r\n          <\/div>\r\n\r\n\r\n          <!-- BUDGET -->\r\n          <div class=\"nk9-field\">\r\n\r\n            <label for=\"nk9-budget\">\r\n              ESTIMATED BUDGET\r\n            <\/label>\r\n\r\n            <select\r\n              id=\"nk9-budget\"\r\n              name=\"budget\"\r\n            >\r\n\r\n              <option value=\"\">\r\n                Select budget range\r\n              <\/option>\r\n\r\n              <option>\r\n                Under \u09f310,000\r\n              <\/option>\r\n\r\n              <option>\r\n                \u09f310,000 \u2013 \u09f325,000\r\n              <\/option>\r\n\r\n              <option>\r\n                \u09f325,000 \u2013 \u09f350,000\r\n              <\/option>\r\n\r\n              <option>\r\n                \u09f350,000 \u2013 \u09f3100,000\r\n              <\/option>\r\n\r\n              <option>\r\n                \u09f3100,000+\r\n              <\/option>\r\n\r\n            <\/select>\r\n\r\n          <\/div>\r\n\r\n\r\n          <!-- MESSAGE -->\r\n          <div class=\"nk9-field\">\r\n\r\n            <label for=\"nk9-message\">\r\n              PROJECT DETAILS\r\n            <\/label>\r\n\r\n            <textarea\r\n              id=\"nk9-message\"\r\n              name=\"message\"\r\n              rows=\"5\"\r\n              placeholder=\"Tell me about your project, goals and timeline...\"\r\n              required\r\n            ><\/textarea>\r\n\r\n          <\/div>\r\n\r\n\r\n          <!-- SUBMIT -->\r\n          <button\r\n            type=\"submit\"\r\n            class=\"nk9-submit\"\r\n          >\r\n\r\n            <span>\r\n              SEND PROJECT INQUIRY\r\n            <\/span>\r\n\r\n            <b>\u2197<\/b>\r\n\r\n          <\/button>\r\n\r\n\r\n          <div\r\n            class=\"nk9-form-message\"\r\n            aria-live=\"polite\"\r\n          ><\/div>\r\n\r\n\r\n        <\/form>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- BOTTOM -->\r\n    <div class=\"nk9-bottom\">\r\n\r\n      <div class=\"nk9-bottom-left\">\r\n\r\n        <span><\/span>\r\n\r\n        <p>\r\n          Available for selected freelance projects\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n      <div class=\"nk9-bottom-right\">\r\n        DHAKA, BANGLADESH\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   STEP 9 \u2014 BASE\r\n========================================================= *\/\r\n\r\n#contact{\r\n  position:relative;\r\n  width:100%;\r\n  padding:140px 0 80px;\r\n  overflow:hidden;\r\n  color:#fff;\r\n  background:\r\n    radial-gradient(\r\n      circle at 10% 15%,\r\n      rgba(139,92,246,.14),\r\n      transparent 30%\r\n    ),\r\n    radial-gradient(\r\n      circle at 90% 80%,\r\n      rgba(34,211,238,.08),\r\n      transparent 28%\r\n    ),\r\n    #040406;\r\n  font-family:\r\n    Inter,\r\n    Arial,\r\n    Helvetica,\r\n    sans-serif;\r\n}\r\n\r\n#contact *,\r\n#contact *::before,\r\n#contact *::after{\r\n  box-sizing:border-box;\r\n}\r\n\r\n.nk9-wrap{\r\n  width:min(1380px,92%);\r\n  margin:0 auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n.nk9-header{\r\n  max-width:950px;\r\n  margin-bottom:80px;\r\n}\r\n\r\n.nk9-eyebrow{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:10px;\r\n  margin-bottom:22px;\r\n  color:#9d8cff;\r\n  font-size:10px;\r\n  font-weight:800;\r\n  letter-spacing:3px;\r\n}\r\n\r\n.nk9-eyebrow span{\r\n  width:32px;\r\n  height:1px;\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #8b5cf6,\r\n      #22d3ee\r\n    );\r\n}\r\n\r\n.nk9-header h2{\r\n  margin:0;\r\n  max-width:950px;\r\n  font-size:clamp(48px,7vw,90px);\r\n  line-height:.92;\r\n  letter-spacing:-5px;\r\n  font-weight:900;\r\n}\r\n\r\n.nk9-header h2 em{\r\n  font-style:normal;\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #8b5cf6,\r\n      #22d3ee\r\n    );\r\n  -webkit-background-clip:text;\r\n  background-clip:text;\r\n  color:transparent;\r\n}\r\n\r\n.nk9-header p{\r\n  max-width:600px;\r\n  margin:28px 0 0;\r\n  color:#777781;\r\n  font-size:14px;\r\n  line-height:1.9;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MAIN GRID\r\n========================================================= *\/\r\n\r\n.nk9-grid{\r\n  display:grid;\r\n  grid-template-columns:.82fr 1.18fr;\r\n  gap:70px;\r\n  align-items:start;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LEFT INFO\r\n========================================================= *\/\r\n\r\n.nk9-info{\r\n  padding-top:15px;\r\n}\r\n\r\n.nk9-info-title > span{\r\n  color:#60606a;\r\n  font-size:9px;\r\n  font-weight:800;\r\n  letter-spacing:2px;\r\n}\r\n\r\n.nk9-info-title h3{\r\n  margin:15px 0 40px;\r\n  font-size:43px;\r\n  line-height:.98;\r\n  letter-spacing:-2.5px;\r\n}\r\n\r\n\r\n\/* CONTACT CARD *\/\r\n\r\n.nk9-contact-card{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:16px;\r\n  min-height:78px;\r\n  margin-bottom:12px;\r\n  padding:14px 17px;\r\n  border:1px solid rgba(255,255,255,.07);\r\n  border-radius:16px;\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(255,255,255,.025),\r\n      rgba(255,255,255,.008)\r\n    );\r\n  color:#fff;\r\n  text-decoration:none;\r\n  transition:.35s ease;\r\n}\r\n\r\n.nk9-contact-card:hover{\r\n  transform:translateX(7px);\r\n  border-color:rgba(139,92,246,.4);\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(139,92,246,.10),\r\n      rgba(255,255,255,.015)\r\n    );\r\n}\r\n\r\n.nk9-contact-icon{\r\n  width:45px;\r\n  height:45px;\r\n  flex-shrink:0;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  border:1px solid rgba(139,92,246,.2);\r\n  border-radius:12px;\r\n  color:#a99dff;\r\n  background:rgba(139,92,246,.06);\r\n  font-size:12px;\r\n  font-weight:800;\r\n}\r\n\r\n.nk9-contact-text{\r\n  min-width:0;\r\n}\r\n\r\n.nk9-contact-text small{\r\n  display:block;\r\n  margin-bottom:4px;\r\n  color:#5e5e68;\r\n  font-size:8px;\r\n  font-weight:800;\r\n  letter-spacing:1.5px;\r\n}\r\n\r\n.nk9-contact-text strong{\r\n  display:block;\r\n  color:#e8e8ed;\r\n  font-size:13px;\r\n  font-weight:600;\r\n  overflow:hidden;\r\n  text-overflow:ellipsis;\r\n  white-space:nowrap;\r\n}\r\n\r\n.nk9-contact-arrow{\r\n  margin-left:auto;\r\n  color:#55555f;\r\n  font-size:18px;\r\n  transition:.3s ease;\r\n}\r\n\r\n.nk9-contact-card:hover .nk9-contact-arrow{\r\n  color:#fff;\r\n  transform:rotate(45deg);\r\n}\r\n\r\n\r\n\/* SOCIAL *\/\r\n\r\n.nk9-social{\r\n  margin-top:45px;\r\n}\r\n\r\n.nk9-social > span{\r\n  color:#575761;\r\n  font-size:8px;\r\n  font-weight:800;\r\n  letter-spacing:2px;\r\n}\r\n\r\n.nk9-social-links{\r\n  display:flex;\r\n  gap:9px;\r\n  margin-top:14px;\r\n}\r\n\r\n.nk9-social-links a{\r\n  width:40px;\r\n  height:40px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  border:1px solid rgba(255,255,255,.09);\r\n  border-radius:50%;\r\n  color:#888892;\r\n  background:rgba(255,255,255,.02);\r\n  text-decoration:none;\r\n  font-size:10px;\r\n  font-weight:800;\r\n  transition:.3s ease;\r\n}\r\n\r\n.nk9-social-links a:hover{\r\n  color:#fff;\r\n  border-color:#8b5cf6;\r\n  background:#8b5cf6;\r\n  transform:translateY(-4px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FORM BOX\r\n========================================================= *\/\r\n\r\n.nk9-form-box{\r\n  position:relative;\r\n  padding:42px;\r\n  border:1px solid rgba(255,255,255,.08);\r\n  border-radius:25px;\r\n  background:\r\n    radial-gradient(\r\n      circle at 90% 0%,\r\n      rgba(139,92,246,.11),\r\n      transparent 35%\r\n    ),\r\n    #0a0a0e;\r\n  box-shadow:\r\n    0 30px 90px rgba(0,0,0,.3);\r\n}\r\n\r\n.nk9-form-top{\r\n  display:flex;\r\n  justify-content:space-between;\r\n  align-items:flex-start;\r\n  gap:30px;\r\n  margin-bottom:40px;\r\n  padding-bottom:25px;\r\n  border-bottom:1px solid rgba(255,255,255,.07);\r\n}\r\n\r\n.nk9-form-top > div:first-child > span{\r\n  color:#8b7dff;\r\n  font-size:8px;\r\n  font-weight:800;\r\n  letter-spacing:2px;\r\n}\r\n\r\n.nk9-form-top h3{\r\n  max-width:550px;\r\n  margin:12px 0 0;\r\n  font-size:34px;\r\n  line-height:1;\r\n  letter-spacing:-1.8px;\r\n}\r\n\r\n.nk9-form-top h3 em{\r\n  font-style:normal;\r\n  color:#9d8cff;\r\n}\r\n\r\n.nk9-form-number{\r\n  color:#383841;\r\n  font-size:13px;\r\n  font-weight:800;\r\n  letter-spacing:2px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FIELDS\r\n========================================================= *\/\r\n\r\n.nk9-field{\r\n  margin-bottom:22px;\r\n}\r\n\r\n.nk9-field label{\r\n  display:block;\r\n  margin-bottom:9px;\r\n  color:#666670;\r\n  font-size:8px;\r\n  font-weight:800;\r\n  letter-spacing:1.7px;\r\n}\r\n\r\n.nk9-field input,\r\n.nk9-field select,\r\n.nk9-field textarea{\r\n  width:100%;\r\n  outline:none;\r\n  border:1px solid rgba(255,255,255,.08);\r\n  border-radius:11px;\r\n  background:#07070a;\r\n  color:#eeeef2;\r\n  padding:14px 15px;\r\n  font-family:inherit;\r\n  font-size:12px;\r\n  transition:.3s ease;\r\n}\r\n\r\n.nk9-field input::placeholder,\r\n.nk9-field textarea::placeholder{\r\n  color:#44444d;\r\n}\r\n\r\n.nk9-field input:focus,\r\n.nk9-field select:focus,\r\n.nk9-field textarea:focus{\r\n  border-color:rgba(139,92,246,.65);\r\n  background:#09090e;\r\n  box-shadow:\r\n    0 0 0 3px rgba(139,92,246,.07);\r\n}\r\n\r\n.nk9-field textarea{\r\n  min-height:130px;\r\n  resize:vertical;\r\n  line-height:1.7;\r\n}\r\n\r\n.nk9-field select{\r\n  cursor:pointer;\r\n}\r\n\r\n.nk9-field select option{\r\n  background:#0a0a0e;\r\n  color:#fff;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SUBMIT\r\n========================================================= *\/\r\n\r\n.nk9-submit{\r\n  width:100%;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:20px;\r\n  margin-top:8px;\r\n  padding:17px 19px;\r\n  border:1px solid rgba(139,92,246,.4);\r\n  border-radius:12px;\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(139,92,246,.18),\r\n      rgba(34,211,238,.05)\r\n    );\r\n  color:#fff;\r\n  font-family:inherit;\r\n  font-size:9px;\r\n  font-weight:800;\r\n  letter-spacing:1.7px;\r\n  cursor:pointer;\r\n  transition:.35s ease;\r\n}\r\n\r\n.nk9-submit b{\r\n  width:32px;\r\n  height:32px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  border-radius:50%;\r\n  background:rgba(139,92,246,.18);\r\n  font-size:16px;\r\n  font-weight:400;\r\n  transition:.3s ease;\r\n}\r\n\r\n.nk9-submit:hover{\r\n  border-color:#8b5cf6;\r\n  background:#8b5cf6;\r\n  transform:translateY(-2px);\r\n  box-shadow:\r\n    0 18px 40px rgba(139,92,246,.22);\r\n}\r\n\r\n.nk9-submit:hover b{\r\n  background:rgba(255,255,255,.16);\r\n  transform:rotate(45deg);\r\n}\r\n\r\n.nk9-form-message{\r\n  min-height:18px;\r\n  margin-top:14px;\r\n  color:#8f8f99;\r\n  font-size:10px;\r\n  line-height:1.5;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BOTTOM\r\n========================================================= *\/\r\n\r\n.nk9-bottom{\r\n  display:flex;\r\n  justify-content:space-between;\r\n  align-items:center;\r\n  gap:30px;\r\n  margin-top:75px;\r\n  padding-top:25px;\r\n  border-top:1px solid rgba(255,255,255,.07);\r\n}\r\n\r\n.nk9-bottom-left{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:10px;\r\n}\r\n\r\n.nk9-bottom-left span{\r\n  width:25px;\r\n  height:1px;\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #8b5cf6,\r\n      #22d3ee\r\n    );\r\n}\r\n\r\n.nk9-bottom p,\r\n.nk9-bottom-right{\r\n  margin:0;\r\n  color:#55555f;\r\n  font-size:8px;\r\n  font-weight:700;\r\n  letter-spacing:1.5px;\r\n  text-transform:uppercase;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESPONSIVE\r\n========================================================= *\/\r\n\r\n@media(max-width:950px){\r\n\r\n  .nk9-grid{\r\n    grid-template-columns:1fr;\r\n    gap:55px;\r\n  }\r\n\r\n  .nk9-info{\r\n    max-width:700px;\r\n  }\r\n\r\n}\r\n\r\n\r\n@media(max-width:650px){\r\n\r\n  #contact{\r\n    padding:90px 0 60px;\r\n  }\r\n\r\n  .nk9-wrap{\r\n    width:90%;\r\n  }\r\n\r\n  .nk9-header{\r\n    margin-bottom:55px;\r\n  }\r\n\r\n  .nk9-header h2{\r\n    font-size:50px;\r\n    letter-spacing:-3px;\r\n  }\r\n\r\n  .nk9-header p{\r\n    font-size:13px;\r\n  }\r\n\r\n  .nk9-info-title h3{\r\n    font-size:36px;\r\n  }\r\n\r\n  .nk9-form-box{\r\n    padding:25px 20px;\r\n    border-radius:20px;\r\n  }\r\n\r\n  .nk9-form-top h3{\r\n    font-size:28px;\r\n  }\r\n\r\n  .nk9-form-number{\r\n    display:none;\r\n  }\r\n\r\n  .nk9-bottom{\r\n    display:block;\r\n  }\r\n\r\n  .nk9-bottom-right{\r\n    margin-top:15px;\r\n  }\r\n\r\n}\r\n\r\n\r\n@media(prefers-reduced-motion:reduce){\r\n\r\n  #contact *,\r\n  #contact *::before,\r\n  #contact *::after{\r\n    transition:none !important;\r\n    animation:none !important;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<script>\r\n(function(){\r\n\r\n  const root =\r\n    document.querySelector('#contact');\r\n\r\n  if(!root) return;\r\n\r\n\r\n  \/* =====================================================\r\n     FORM \u2192 WHATSAPP\r\n     \r\n     This keeps the section plugin-free.\r\n     On submit, the visitor's details are formatted\r\n     and opened directly in WhatsApp.\r\n  ===================================================== *\/\r\n\r\n  const form =\r\n    root.querySelector('#nk9-contact-form');\r\n\r\n  const messageBox =\r\n    root.querySelector('.nk9-form-message');\r\n\r\n\r\n  if(!form) return;\r\n\r\n\r\n  form.addEventListener('submit', function(e){\r\n\r\n    e.preventDefault();\r\n\r\n\r\n    const name =\r\n      document\r\n      .getElementById('nk9-name')\r\n      .value\r\n      .trim();\r\n\r\n    const email =\r\n      document\r\n      .getElementById('nk9-email')\r\n      .value\r\n      .trim();\r\n\r\n    const phone =\r\n      document\r\n      .getElementById('nk9-phone')\r\n      .value\r\n      .trim();\r\n\r\n    const service =\r\n      document\r\n      .getElementById('nk9-service')\r\n      .value;\r\n\r\n    const budget =\r\n      document\r\n      .getElementById('nk9-budget')\r\n      .value;\r\n\r\n    const details =\r\n      document\r\n      .getElementById('nk9-message')\r\n      .value\r\n      .trim();\r\n\r\n\r\n    if(\r\n      !name ||\r\n      !email ||\r\n      !service ||\r\n      !details\r\n    ){\r\n\r\n      messageBox.textContent =\r\n        'Please complete the required fields.';\r\n\r\n      messageBox.style.color =\r\n        '#f59e9e';\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    const subject =\r\n      'New Portfolio Project Inquiry';\r\n\r\n\r\n    const text =\r\n`Hello Naim,\r\n\r\nI would like to discuss a project.\r\n\r\nName: ${name}\r\n\r\nEmail: ${email}\r\n\r\nPhone \/ WhatsApp: ${phone || 'Not provided'}\r\n\r\nService: ${service}\r\n\r\nBudget: ${budget || 'Not specified'}\r\n\r\nProject Details:\r\n${details}\r\n\r\nThank you.`;\r\n\r\n\r\n    \/*\r\n      WhatsApp number:\r\n      8801770084836\r\n    *\/\r\n\r\n    const whatsappURL =\r\n      'https:\/\/wa.me\/8801770084836?text=' +\r\n      encodeURIComponent(text);\r\n\r\n\r\n    messageBox.textContent =\r\n      'Opening WhatsApp...';\r\n\r\n    messageBox.style.color =\r\n      '#9d8cff';\r\n\r\n\r\n    setTimeout(function(){\r\n\r\n      window.open(\r\n        whatsappURL,\r\n        '_blank',\r\n        'noopener'\r\n      );\r\n\r\n    },250);\r\n\r\n  });\r\n\r\n\r\n  \/* =====================================================\r\n     SCROLL REVEAL\r\n  ===================================================== *\/\r\n\r\n  const revealItems =\r\n    root.querySelectorAll(\r\n      '.nk9-contact-card, .nk9-form-box, .nk9-info'\r\n    );\r\n\r\n\r\n  revealItems.forEach(item => {\r\n\r\n    item.style.opacity = '0';\r\n    item.style.transform =\r\n      'translateY(20px)';\r\n\r\n    item.style.transition =\r\n      'opacity .7s ease, transform .7s ease';\r\n\r\n  });\r\n\r\n\r\n  if('IntersectionObserver' in window){\r\n\r\n    const observer =\r\n      new IntersectionObserver(\r\n        entries => {\r\n\r\n          entries.forEach(entry => {\r\n\r\n            if(entry.isIntersecting){\r\n\r\n              entry.target.style.opacity = '1';\r\n\r\n              entry.target.style.transform =\r\n                'translateY(0)';\r\n\r\n              observer.unobserve(\r\n                entry.target\r\n              );\r\n\r\n            }\r\n\r\n          });\r\n\r\n        },\r\n        {\r\n          threshold:.12\r\n        }\r\n      );\r\n\r\n\r\n    revealItems.forEach(item =>\r\n      observer.observe(item)\r\n    );\r\n\r\n  }else{\r\n\r\n    revealItems.forEach(item => {\r\n\r\n      item.style.opacity = '1';\r\n\r\n      item.style.transform =\r\n        'translateY(0)';\r\n\r\n    });\r\n\r\n  }\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-362bafc elementor-widget elementor-widget-html\" data-id=\"362bafc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n     NK PORTFOLIO \u2014 STEP 10 : PREMIUM FOOTER\r\n     Elementor HTML Widget\r\n========================================================= -->\r\n\r\n<footer id=\"nk-step10\">\r\n\r\n  <div class=\"nk10-wrap\">\r\n\r\n    <!-- TOP CTA -->\r\n    <div class=\"nk10-top\">\r\n\r\n      <div class=\"nk10-top-left\">\r\n\r\n        <span class=\"nk10-eyebrow\">\r\n          HAVE A PROJECT IN MIND?\r\n        <\/span>\r\n\r\n        <h2>\r\n          Let's make your\r\n          <em>next move.<\/em>\r\n        <\/h2>\r\n\r\n      <\/div>\r\n\r\n      <a\r\n        href=\"#contact\"\r\n        class=\"nk10-top-btn\"\r\n      >\r\n        START A PROJECT\r\n        <span>\u2197<\/span>\r\n      <\/a>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- MAIN FOOTER -->\r\n    <div class=\"nk10-main\">\r\n\r\n\r\n      <!-- BRAND -->\r\n      <div class=\"nk10-brand\">\r\n\r\n        <a\r\n          href=\"#top\"\r\n          class=\"nk10-logo\"\r\n        >\r\n          <span>NK<\/span>\r\n        <\/a>\r\n\r\n        <h3>\r\n          Md Naim Khan\r\n        <\/h3>\r\n\r\n        <p>\r\n          Digital Marketer & Creative Professional\r\n          focused on performance marketing,\r\n          e-commerce and digital experiences.\r\n        <\/p>\r\n\r\n        <div class=\"nk10-status\">\r\n\r\n          <span class=\"nk10-status-dot\"><\/span>\r\n\r\n          Available for selected projects\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- NAVIGATION -->\r\n      <div class=\"nk10-column\">\r\n\r\n        <h4>\r\n          NAVIGATION\r\n        <\/h4>\r\n\r\n        <a href=\"#nk-step2\">\r\n          About\r\n        <\/a>\r\n\r\n        <a href=\"#nk-step3\">\r\n          Skills\r\n        <\/a>\r\n\r\n        <a href=\"#nk-step4\">\r\n          Projects\r\n        <\/a>\r\n\r\n        <a href=\"#nk-step6\">\r\n          Creative Work\r\n        <\/a>\r\n\r\n        <a href=\"#nk-step7\">\r\n          Videos\r\n        <\/a>\r\n\r\n        <a href=\"#contact\">\r\n          Contact\r\n        <\/a>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- SERVICES -->\r\n      <div class=\"nk10-column\">\r\n\r\n        <h4>\r\n          SERVICES\r\n        <\/h4>\r\n\r\n        <a href=\"#nk-step3\">\r\n          Meta Ads\r\n        <\/a>\r\n\r\n        <a href=\"#nk-step3\">\r\n          Google Ads\r\n        <\/a>\r\n\r\n        <a href=\"#nk-step3\">\r\n          WordPress\r\n        <\/a>\r\n\r\n        <a href=\"#nk-step3\">\r\n          Elementor\r\n        <\/a>\r\n\r\n        <a href=\"#nk-step3\">\r\n          E-commerce Marketing\r\n        <\/a>\r\n\r\n        <a href=\"#nk-step7\">\r\n          Video Content\r\n        <\/a>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- CONTACT -->\r\n      <div class=\"nk10-column nk10-contact\">\r\n\r\n        <h4>\r\n          CONTACT\r\n        <\/h4>\r\n\r\n        <a href=\"mailto:hello@naimkhan.world\">\r\n          hello@naimkhan.world\r\n        <\/a>\r\n\r\n        <a href=\"tel:+8801713707069\">\r\n          +880 1713-707069\r\n        <\/a>\r\n\r\n        <a\r\n          href=\"https:\/\/wa.me\/8801713707069\"\r\n          target=\"_blank\"\r\n          rel=\"noopener\"\r\n        >\r\n          WhatsApp\r\n        <\/a>\r\n\r\n        <span class=\"nk10-location\">\r\n          Dhaka, Bangladesh\r\n        <\/span>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- SOCIAL -->\r\n    <div class=\"nk10-social-row\">\r\n\r\n      <span>\r\n        CONNECT WITH ME\r\n      <\/span>\r\n\r\n      <div class=\"nk10-social\">\r\n\r\n        <a\r\n          href=\"https:\/\/www.facebook.com\/\"\r\n          target=\"_blank\"\r\n          rel=\"noopener\"\r\n        >\r\n          Facebook\r\n          <span>\u2197<\/span>\r\n        <\/a>\r\n\r\n        <a\r\n          href=\"https:\/\/www.linkedin.com\/\"\r\n          target=\"_blank\"\r\n          rel=\"noopener\"\r\n        >\r\n          LinkedIn\r\n          <span>\u2197<\/span>\r\n        <\/a>\r\n\r\n        <a\r\n          href=\"https:\/\/www.instagram.com\/\"\r\n          target=\"_blank\"\r\n          rel=\"noopener\"\r\n        >\r\n          Instagram\r\n          <span>\u2197<\/span>\r\n        <\/a>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- BOTTOM -->\r\n    <div class=\"nk10-bottom\">\r\n\r\n      <p>\r\n        \u00a9 <span id=\"nk10-year\"><\/span>\r\n        Md Naim Khan. All rights reserved.\r\n      <\/p>\r\n\r\n      <div class=\"nk10-bottom-right\">\r\n\r\n        <span>\r\n          DIGITAL MARKETING\r\n        <\/span>\r\n\r\n        <i><\/i>\r\n\r\n        <span>\r\n          CREATIVE\r\n        <\/span>\r\n\r\n        <i><\/i>\r\n\r\n        <span>\r\n          E-COMMERCE\r\n        <\/span>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n  <!-- BACK TO TOP -->\r\n  <button\r\n    class=\"nk10-back-top\"\r\n    aria-label=\"Back to top\"\r\n  >\r\n    \u2191\r\n  <\/button>\r\n\r\n<\/footer>\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   STEP 10 \u2014 BASE\r\n========================================================= *\/\r\n\r\n#nk-step10{\r\n  position:relative;\r\n  width:100%;\r\n  overflow:hidden;\r\n  padding:90px 0 30px;\r\n  color:#fff;\r\n  background:\r\n    radial-gradient(\r\n      circle at 15% 0%,\r\n      rgba(139,92,246,.12),\r\n      transparent 30%\r\n    ),\r\n    radial-gradient(\r\n      circle at 90% 70%,\r\n      rgba(34,211,238,.07),\r\n      transparent 28%\r\n    ),\r\n    #030305;\r\n  font-family:\r\n    Inter,\r\n    Arial,\r\n    Helvetica,\r\n    sans-serif;\r\n}\r\n\r\n#nk-step10 *,\r\n#nk-step10 *::before,\r\n#nk-step10 *::after{\r\n  box-sizing:border-box;\r\n}\r\n\r\n.nk10-wrap{\r\n  width:min(1380px,92%);\r\n  margin:0 auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TOP CTA\r\n========================================================= *\/\r\n\r\n.nk10-top{\r\n  display:flex;\r\n  align-items:flex-end;\r\n  justify-content:space-between;\r\n  gap:40px;\r\n  padding-bottom:75px;\r\n  border-bottom:1px solid rgba(255,255,255,.08);\r\n}\r\n\r\n.nk10-eyebrow{\r\n  display:block;\r\n  margin-bottom:18px;\r\n  color:#8b7dff;\r\n  font-size:9px;\r\n  font-weight:800;\r\n  letter-spacing:2.5px;\r\n}\r\n\r\n.nk10-top h2{\r\n  margin:0;\r\n  max-width:800px;\r\n  font-size:clamp(46px,6vw,78px);\r\n  line-height:.9;\r\n  letter-spacing:-4px;\r\n  font-weight:900;\r\n}\r\n\r\n.nk10-top h2 em{\r\n  font-style:normal;\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #8b5cf6,\r\n      #22d3ee\r\n    );\r\n  -webkit-background-clip:text;\r\n  background-clip:text;\r\n  color:transparent;\r\n}\r\n\r\n.nk10-top-btn{\r\n  flex-shrink:0;\r\n  display:flex;\r\n  align-items:center;\r\n  gap:16px;\r\n  padding:16px 20px;\r\n  border:1px solid rgba(139,92,246,.4);\r\n  border-radius:100px;\r\n  color:#fff;\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(139,92,246,.16),\r\n      rgba(34,211,238,.05)\r\n    );\r\n  text-decoration:none;\r\n  font-size:9px;\r\n  font-weight:800;\r\n  letter-spacing:1.5px;\r\n  transition:.35s ease;\r\n}\r\n\r\n.nk10-top-btn span{\r\n  width:28px;\r\n  height:28px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  border-radius:50%;\r\n  background:rgba(139,92,246,.2);\r\n  font-size:15px;\r\n}\r\n\r\n.nk10-top-btn:hover{\r\n  color:#fff;\r\n  border-color:#8b5cf6;\r\n  background:#8b5cf6;\r\n  transform:translateY(-4px);\r\n  box-shadow:\r\n    0 20px 45px rgba(139,92,246,.25);\r\n}\r\n\r\n.nk10-top-btn:hover span{\r\n  background:rgba(255,255,255,.15);\r\n  transform:rotate(45deg);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MAIN\r\n========================================================= *\/\r\n\r\n.nk10-main{\r\n  display:grid;\r\n  grid-template-columns:1.5fr .75fr .9fr .9fr;\r\n  gap:60px;\r\n  padding:65px 0;\r\n}\r\n\r\n\r\n\/* BRAND *\/\r\n\r\n.nk10-logo{\r\n  width:50px;\r\n  height:50px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  margin-bottom:22px;\r\n  border:1px solid rgba(139,92,246,.35);\r\n  border-radius:14px;\r\n  color:#fff;\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(139,92,246,.22),\r\n      rgba(34,211,238,.08)\r\n    );\r\n  text-decoration:none;\r\n  box-shadow:\r\n    0 10px 35px rgba(139,92,246,.08);\r\n}\r\n\r\n.nk10-logo span{\r\n  font-size:14px;\r\n  font-weight:900;\r\n  letter-spacing:-1px;\r\n}\r\n\r\n.nk10-brand h3{\r\n  margin:0;\r\n  font-size:24px;\r\n  letter-spacing:-1px;\r\n}\r\n\r\n.nk10-brand > p{\r\n  max-width:390px;\r\n  margin:12px 0 20px;\r\n  color:#676771;\r\n  font-size:11px;\r\n  line-height:1.8;\r\n}\r\n\r\n.nk10-status{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:8px;\r\n  color:#777781;\r\n  font-size:9px;\r\n  font-weight:700;\r\n  letter-spacing:.7px;\r\n}\r\n\r\n.nk10-status-dot{\r\n  width:6px;\r\n  height:6px;\r\n  border-radius:50%;\r\n  background:#22d3ee;\r\n  box-shadow:\r\n    0 0 12px rgba(34,211,238,.8);\r\n}\r\n\r\n\r\n\/* COLUMNS *\/\r\n\r\n.nk10-column{\r\n  display:flex;\r\n  flex-direction:column;\r\n  align-items:flex-start;\r\n}\r\n\r\n.nk10-column h4{\r\n  margin:5px 0 22px;\r\n  color:#777781;\r\n  font-size:8px;\r\n  font-weight:800;\r\n  letter-spacing:2px;\r\n}\r\n\r\n.nk10-column a,\r\n.nk10-location{\r\n  margin-bottom:12px;\r\n  color:#5f5f69;\r\n  text-decoration:none;\r\n  font-size:11px;\r\n  line-height:1.4;\r\n  transition:.3s ease;\r\n}\r\n\r\n.nk10-column a:hover{\r\n  color:#b3aaff;\r\n  transform:translateX(3px);\r\n}\r\n\r\n.nk10-contact a{\r\n  color:#797983;\r\n}\r\n\r\n.nk10-location{\r\n  margin-top:6px;\r\n  color:#45454e;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SOCIAL\r\n========================================================= *\/\r\n\r\n.nk10-social-row{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:30px;\r\n  padding:25px 0;\r\n  border-top:1px solid rgba(255,255,255,.06);\r\n  border-bottom:1px solid rgba(255,255,255,.06);\r\n}\r\n\r\n.nk10-social-row > span{\r\n  color:#50505a;\r\n  font-size:8px;\r\n  font-weight:800;\r\n  letter-spacing:2px;\r\n}\r\n\r\n.nk10-social{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:10px;\r\n}\r\n\r\n.nk10-social a{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:12px;\r\n  padding:9px 13px;\r\n  border:1px solid rgba(255,255,255,.07);\r\n  border-radius:100px;\r\n  color:#777781;\r\n  text-decoration:none;\r\n  font-size:9px;\r\n  font-weight:700;\r\n  transition:.3s ease;\r\n}\r\n\r\n.nk10-social a span{\r\n  color:#4d4d56;\r\n  font-size:13px;\r\n}\r\n\r\n.nk10-social a:hover{\r\n  color:#fff;\r\n  border-color:rgba(139,92,246,.4);\r\n  background:rgba(139,92,246,.08);\r\n  transform:translateY(-2px);\r\n}\r\n\r\n.nk10-social a:hover span{\r\n  color:#9d8cff;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BOTTOM\r\n========================================================= *\/\r\n\r\n.nk10-bottom{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:30px;\r\n  padding-top:25px;\r\n}\r\n\r\n.nk10-bottom p{\r\n  margin:0;\r\n  color:#41414a;\r\n  font-size:8px;\r\n  letter-spacing:.5px;\r\n}\r\n\r\n.nk10-bottom-right{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:10px;\r\n  color:#404049;\r\n  font-size:7px;\r\n  font-weight:800;\r\n  letter-spacing:1.2px;\r\n}\r\n\r\n.nk10-bottom-right i{\r\n  width:3px;\r\n  height:3px;\r\n  border-radius:50%;\r\n  background:#55555e;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BACK TO TOP\r\n========================================================= *\/\r\n\r\n.nk10-back-top{\r\n  position:fixed;\r\n  right:25px;\r\n  bottom:25px;\r\n  z-index:9999;\r\n  width:44px;\r\n  height:44px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  border:1px solid rgba(139,92,246,.35);\r\n  border-radius:50%;\r\n  background:rgba(7,7,10,.75);\r\n  backdrop-filter:blur(14px);\r\n  color:#fff;\r\n  font-size:18px;\r\n  cursor:pointer;\r\n  opacity:0;\r\n  visibility:hidden;\r\n  transform:translateY(15px);\r\n  transition:.35s ease;\r\n}\r\n\r\n.nk10-back-top.show{\r\n  opacity:1;\r\n  visibility:visible;\r\n  transform:translateY(0);\r\n}\r\n\r\n.nk10-back-top:hover{\r\n  background:#8b5cf6;\r\n  border-color:#8b5cf6;\r\n  transform:translateY(-4px);\r\n  box-shadow:\r\n    0 10px 30px rgba(139,92,246,.3);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESPONSIVE\r\n========================================================= *\/\r\n\r\n@media(max-width:1000px){\r\n\r\n  .nk10-main{\r\n    grid-template-columns:1.3fr 1fr 1fr;\r\n    gap:45px;\r\n  }\r\n\r\n  .nk10-brand{\r\n    grid-column:span 3;\r\n  }\r\n\r\n}\r\n\r\n\r\n@media(max-width:700px){\r\n\r\n  #nk-step10{\r\n    padding:70px 0 25px;\r\n  }\r\n\r\n  .nk10-wrap{\r\n    width:90%;\r\n  }\r\n\r\n  .nk10-top{\r\n    display:block;\r\n    padding-bottom:55px;\r\n  }\r\n\r\n  .nk10-top h2{\r\n    font-size:52px;\r\n    letter-spacing:-3px;\r\n  }\r\n\r\n  .nk10-top-btn{\r\n    width:max-content;\r\n    margin-top:28px;\r\n  }\r\n\r\n  .nk10-main{\r\n    grid-template-columns:1fr 1fr;\r\n    gap:40px 25px;\r\n    padding:50px 0;\r\n  }\r\n\r\n  .nk10-brand{\r\n    grid-column:span 2;\r\n  }\r\n\r\n  .nk10-social-row{\r\n    display:block;\r\n  }\r\n\r\n  .nk10-social-row > span{\r\n    display:block;\r\n    margin-bottom:15px;\r\n  }\r\n\r\n  .nk10-bottom{\r\n    display:block;\r\n  }\r\n\r\n  .nk10-bottom-right{\r\n    margin-top:13px;\r\n  }\r\n\r\n  .nk10-back-top{\r\n    right:17px;\r\n    bottom:17px;\r\n    width:40px;\r\n    height:40px;\r\n  }\r\n\r\n}\r\n\r\n\r\n@media(max-width:430px){\r\n\r\n  .nk10-main{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .nk10-brand{\r\n    grid-column:auto;\r\n  }\r\n\r\n  .nk10-top h2{\r\n    font-size:45px;\r\n  }\r\n\r\n  .nk10-social{\r\n    flex-direction:column;\r\n    align-items:flex-start;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<script>\r\n(function(){\r\n\r\n  \/* =====================================================\r\n     CURRENT YEAR\r\n  ===================================================== *\/\r\n\r\n  const year =\r\n    document.querySelector('#nk10-year');\r\n\r\n  if(year){\r\n\r\n    year.textContent =\r\n      new Date().getFullYear();\r\n\r\n  }\r\n\r\n\r\n  \/* =====================================================\r\n     BACK TO TOP\r\n  ===================================================== *\/\r\n\r\n  const button =\r\n    document.querySelector('.nk10-back-top');\r\n\r\n  if(!button) return;\r\n\r\n\r\n  window.addEventListener(\r\n    'scroll',\r\n    function(){\r\n\r\n      if(window.scrollY > 500){\r\n\r\n        button.classList.add('show');\r\n\r\n      }else{\r\n\r\n        button.classList.remove('show');\r\n\r\n      }\r\n\r\n    },\r\n    {\r\n      passive:true\r\n    }\r\n  );\r\n\r\n\r\n  button.addEventListener(\r\n    'click',\r\n    function(){\r\n\r\n      window.scrollTo({\r\n        top:0,\r\n        behavior:'smooth'\r\n      });\r\n\r\n    }\r\n  );\r\n\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>NK Md. Naim Khan Home About Services Work Contact Let&#8217;s Talk Available for New Projects Digital Marketer &amp; Web Designer Hi, I&#8217;m Md. Naim Khan \u2014 a digital marketer and web designer focused on building high-converting campaigns, websites and creative digital experiences. View My Work \u2197 Let&#8217;s Work Together 3+ Years Experience 50+ Projects 20+ [&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-35","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/naimkhan.world\/index.php?rest_route=\/wp\/v2\/pages\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/naimkhan.world\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/naimkhan.world\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/naimkhan.world\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naimkhan.world\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=35"}],"version-history":[{"count":19,"href":"https:\/\/naimkhan.world\/index.php?rest_route=\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":78,"href":"https:\/\/naimkhan.world\/index.php?rest_route=\/wp\/v2\/pages\/35\/revisions\/78"}],"wp:attachment":[{"href":"https:\/\/naimkhan.world\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}