{"id":25,"date":"2026-04-15T06:19:53","date_gmt":"2026-04-15T06:19:53","guid":{"rendered":"https:\/\/smartboxmedia.co\/index.php\/home\/"},"modified":"2026-05-06T12:18:11","modified_gmt":"2026-05-06T12:18:11","slug":"home","status":"publish","type":"page","link":"https:\/\/smartboxmedia.co\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"25\" class=\"elementor elementor-25\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1aa40e9 e-con-full e-flex e-con e-parent\" data-id=\"1aa40e9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d229697 elementor-widget elementor-widget-html\" data-id=\"d229697\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     SMARTBOX MEDIA \u2014 HOME PAGE (FULL UPDATED VERSION)\r\n     10 Sections | Real Images | SVG Icons | CSS Animations\r\n     Pure HTML + CSS | No JavaScript | WordPress HTML Widget\r\n     ============================================================ -->\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito+Sans:ital,wght@0,400;0,600;0,700;0,800;0,900;1,700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n:root {\r\n  --blue-dark: #0a1e6e;\r\n  --blue-mid:  #1a3fc4;\r\n  --blue-light:#2d6be4;\r\n  --blue-pale: #e8f2fe;\r\n  --accent:    #7ec8f7;\r\n  --text-dark: #0d1b2a;\r\n  --text-mid:  #3a4f6a;\r\n  --text-soft: #607080;\r\n  --white:     #ffffff;\r\n  --off-white: #f7fbff;\r\n  --border:    #ddeaf7;\r\n}\r\n\r\n.smb-hp * { box-sizing: border-box; margin: 0; padding: 0; }\r\n.smb-hp {\r\n  font-family: 'Nunito Sans', sans-serif;\r\n  color: var(--text-dark);\r\n  background: var(--white);\r\n  overflow-x: hidden;\r\n}\r\n\r\n\/* \u2500\u2500 SCROLL ANIMATIONS (CSS only) \u2500\u2500 *\/\r\n@supports (animation-timeline: view()) {\r\n  .smb-hp .anim-up {\r\n    animation: hp-up linear both;\r\n    animation-timeline: view();\r\n    animation-range: entry 0% entry 28%;\r\n  }\r\n  .smb-hp .anim-left {\r\n    animation: hp-left linear both;\r\n    animation-timeline: view();\r\n    animation-range: entry 0% entry 32%;\r\n  }\r\n  .smb-hp .anim-right {\r\n    animation: hp-right linear both;\r\n    animation-timeline: view();\r\n    animation-range: entry 0% entry 32%;\r\n  }\r\n  .smb-hp .anim-scale {\r\n    animation: hp-scale linear both;\r\n    animation-timeline: view();\r\n    animation-range: entry 0% entry 28%;\r\n  }\r\n  @keyframes hp-up    { from{opacity:0;transform:translateY(44px)} to{opacity:1;transform:translateY(0)} }\r\n  @keyframes hp-left  { from{opacity:0;transform:translateX(-44px)} to{opacity:1;transform:translateX(0)} }\r\n  @keyframes hp-right { from{opacity:0;transform:translateX(44px)} to{opacity:1;transform:translateX(0)} }\r\n  @keyframes hp-scale { from{opacity:0;transform:scale(0.9)} to{opacity:1;transform:scale(1)} }\r\n}\r\n\r\n\/* \u2500\u2500 SHARED \u2500\u2500 *\/\r\n.smb-hp .sec-tag {\r\n  font-size: 11.5px; font-weight: 800; letter-spacing: 2.8px;\r\n  text-transform: uppercase; color: var(--blue-mid);\r\n  display: inline-flex; align-items: center; gap: 10px;\r\n  margin-bottom: 14px;\r\n}\r\n.smb-hp .sec-tag::before { content:''; width:28px; height:2px; background:var(--blue-mid); display:inline-block; }\r\n.smb-hp .sec-h2 {\r\n  font-size: clamp(26px,3.8vw,44px);\r\n  font-weight: 900; color: var(--blue-dark);\r\n  line-height: 1.15; letter-spacing: -0.5px;\r\n  margin-bottom: 16px;\r\n}\r\n.smb-hp .sec-p {\r\n  font-size: 15.5px; color: var(--text-soft);\r\n  line-height: 1.82; max-width: 580px;\r\n}\r\n.smb-hp .btn-primary {\r\n  display: inline-flex; align-items: center; gap: 9px;\r\n  background: var(--blue-mid); color: #fff;\r\n  font-size: 15px; font-weight: 800;\r\n  padding: 14px 32px; border-radius: 6px;\r\n  text-decoration: none;\r\n  transition: background .2s, transform .2s, box-shadow .2s;\r\n}\r\n.smb-hp .btn-primary:hover { background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(10,30,110,.22); }\r\n.smb-hp .btn-primary svg { width:16px; height:16px; }\r\n.smb-hp .btn-ghost {\r\n  display: inline-flex; align-items: center; gap: 9px;\r\n  background: transparent; color: var(--blue-mid);\r\n  font-size: 15px; font-weight: 700;\r\n  padding: 14px 30px; border-radius: 6px;\r\n  text-decoration: none;\r\n  border: 2px solid var(--blue-mid);\r\n  transition: background .2s, color .2s;\r\n}\r\n.smb-hp .btn-ghost:hover { background: var(--blue-mid); color: #fff; }\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   S1 \u2014 HERO\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.smb-hp .hero {\r\n  position: relative;\r\n  min-height: 90vh;\r\n  display: flex; align-items: center; justify-content: center;\r\n  text-align: center;\r\n  padding: 120px 24px 100px;\r\n  overflow: hidden;\r\n}\r\n.smb-hp .hero-bg {\r\n  position: absolute; inset:0;\r\n  background-image: url('http:\/\/smartboxmedia.co\/wp-content\/uploads\/2026\/04\/pexels-albin-berlin-906982-2.png');\r\n  background-size: cover; background-position: center;\r\n  z-index: 0;\r\n}\r\n.smb-hp .hero-overlay {\r\n  position: absolute; inset: 0;\r\n  \r\n  z-index: 1;\r\n}\r\n\/* animated circle decorations *\/\r\n.smb-hp .hero-circle {\r\n  position: absolute; border-radius: 50%;\r\n  border: 1px solid rgba(255,255,255,.08);\r\n  z-index: 1; pointer-events: none;\r\n}\r\n.smb-hp .hc1 { width:600px; height:600px; top:-250px; right:-150px; }\r\n.smb-hp .hc2 { width:400px; height:400px; bottom:-180px; left:-100px; }\r\n.smb-hp .hc3 { width:250px; height:250px; top:60px; left:8%; }\r\n\r\n.smb-hp .hero-inner {\r\n  position: relative; z-index: 2;\r\n  max-width: 880px; margin: 0 auto;\r\n}\r\n.smb-hp .hero-badge {\r\n  display: inline-flex; align-items: center; gap: 8px;\r\n  background: rgba(126,200,247,.18);\r\n  border: 1px solid rgba(126,200,247,.35);\r\n  color: var(--accent);\r\n  font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;\r\n  padding: 8px 22px; border-radius: 30px; margin-bottom: 28px;\r\n}\r\n.smb-hp .hero-badge svg { width:14px; height:14px; }\r\n.smb-hp .hero-inner h1 {\r\n  font-size: clamp(36px,6.5vw,70px);\r\n  font-weight: 900; color: #fff; line-height: 1.07;\r\n  margin-bottom: 24px; letter-spacing: -1px;\r\n}\r\n.smb-hp .hero-inner h1 span { color: var(--accent); }\r\n.smb-hp .hero-inner > p {\r\n  font-size: clamp(15px,2vw,18px); color: rgba(255,255,255,.84);\r\n  line-height: 1.78; max-width: 720px; margin: 0 auto 42px;\r\n}\r\n.smb-hp .hero-inner > p strong { color: #fff; }\r\n.smb-hp .hero-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }\r\n.smb-hp .btn-hero-main {\r\n  display: inline-flex; align-items: center; gap: 10px;\r\n  background: #fff; color: var(--blue-dark);\r\n  font-size: 15px; font-weight: 800;\r\n  padding: 15px 36px; border-radius: 6px;\r\n  text-decoration: none;\r\n  transition: transform .2s, box-shadow .2s;\r\n}\r\n.smb-hp .btn-hero-main:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.25); }\r\n.smb-hp .btn-hero-main svg { width:17px; height:17px; }\r\n.smb-hp .btn-hero-ghost {\r\n  display: inline-flex; align-items: center; gap: 10px;\r\n  background: transparent; color: #fff;\r\n  font-size: 15px; font-weight: 700;\r\n  padding: 15px 34px; border-radius: 6px;\r\n  text-decoration: none;\r\n  border: 2px solid rgba(255,255,255,.5);\r\n  transition: border-color .2s, background .2s;\r\n}\r\n.smb-hp .btn-hero-ghost:hover { border-color:#fff; background:rgba(255,255,255,.1); }\r\n\r\n\/* Scrolling trust bar *\/\r\n.smb-hp .trust-bar {\r\n  position: absolute; bottom: 0; left: 0; right: 0;\r\n  z-index: 3;\r\n  background: rgba(255,255,255,.1);\r\n  backdrop-filter: blur(12px);\r\n  border-top: 1px solid rgba(255,255,255,.15);\r\n  padding: 18px 40px;\r\n  display: flex; align-items: center; justify-content: center;\r\n  gap: 40px; flex-wrap: wrap;\r\n}\r\n.smb-hp .trust-item {\r\n  display: flex; align-items: center; gap: 8px;\r\n  color: rgba(255,255,255,.88); font-size: 13.5px; font-weight: 700;\r\n}\r\n.smb-hp .trust-item svg { width:16px; height:16px; color: var(--accent); }\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   S2 \u2014 FEATURES PANEL (Redesigned)\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.smb-hp .features-band {\r\n  background: linear-gradient(160deg, var(--blue-dark) 0%, #0d2e9e 100%);\r\n  padding: 80px 40px;\r\n}\r\n.smb-hp .features-band-inner { max-width: 1160px; margin: 0 auto; }\r\n.smb-hp .fb-top {\r\n  display: flex; align-items: flex-end; justify-content: space-between;\r\n  gap: 24px; margin-bottom: 56px; flex-wrap: wrap;\r\n}\r\n.smb-hp .fb-top h2 {\r\n  font-size: clamp(26px,3.5vw,42px); font-weight: 900;\r\n  color: #fff; line-height: 1.15; letter-spacing: -0.5px;\r\n  max-width: 480px;\r\n}\r\n.smb-hp .fb-top h2 span { color: var(--accent); }\r\n.smb-hp .fb-top p { font-size: 15px; color: rgba(255,255,255,.7); line-height: 1.75; max-width: 340px; }\r\n\r\n.smb-hp .feat-cards {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 2px;\r\n  background: rgba(255,255,255,.08);\r\n  border-radius: 16px; overflow: hidden;\r\n}\r\n.smb-hp .feat-card {\r\n  background: rgba(255,255,255,.05);\r\n  padding: 36px 30px;\r\n  transition: background .25s;\r\n  position: relative; overflow: hidden;\r\n}\r\n.smb-hp .feat-card::after {\r\n  content:''; position:absolute;\r\n  bottom:0; left:30px; right:30px; height:2px;\r\n  background: linear-gradient(90deg, var(--blue-mid), var(--accent));\r\n  transform: scaleX(0); transform-origin: left;\r\n  transition: transform .3s;\r\n}\r\n.smb-hp .feat-card:hover { background: rgba(255,255,255,.1); }\r\n.smb-hp .feat-card:hover::after { transform: scaleX(1); }\r\n\r\n.smb-hp .fc-icon {\r\n  width: 56px; height: 56px; border-radius: 14px;\r\n  background: rgba(126,200,247,.15);\r\n  border: 1px solid rgba(126,200,247,.25);\r\n  display: flex; align-items: center; justify-content: center;\r\n  margin-bottom: 20px;\r\n}\r\n.smb-hp .fc-icon svg { width: 26px; height: 26px; color: var(--accent); }\r\n.smb-hp .feat-card h3 { font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 10px; }\r\n.smb-hp .feat-card p { font-size: 13.5px; color: rgba(255,255,255,.65); line-height: 1.68; }\r\n\r\n\/* Bottom row of features band: services list *\/\r\n.smb-hp .svc-pills-row {\r\n  margin-top: 40px;\r\n  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;\r\n}\r\n.smb-hp .svc-pill {\r\n  background: rgba(255,255,255,.09);\r\n  border: 1px solid rgba(255,255,255,.18);\r\n  color: rgba(255,255,255,.88);\r\n  font-size: 13.5px; font-weight: 700;\r\n  padding: 10px 22px; border-radius: 30px;\r\n  display: inline-flex; align-items: center; gap: 8px;\r\n  transition: background .2s, color .2s;\r\n  text-decoration: none;\r\n}\r\n.smb-hp .svc-pill:hover { background: var(--blue-mid); color: #fff; }\r\n.smb-hp .svc-pill svg { width: 14px; height: 14px; color: var(--accent); }\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   S3 \u2014 ABOUT \/ Building the Future\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.smb-hp .about-sec {\r\n  padding: 110px 40px;\r\n  background: var(--white);\r\n}\r\n.smb-hp .split {\r\n  max-width: 1160px; margin: 0 auto;\r\n  display: grid; grid-template-columns: 1fr 1fr;\r\n  gap: 80px; align-items: center;\r\n}\r\n.smb-hp .split.flip { direction: rtl; }\r\n.smb-hp .split.flip > * { direction: ltr; }\r\n\r\n.smb-hp .about-text .sec-h2 { margin-bottom: 20px; }\r\n.smb-hp .about-text .sec-p { margin-bottom: 18px; }\r\n.smb-hp .check-list {\r\n  list-style: none; margin: 22px 0 36px;\r\n  display: flex; flex-direction: column; gap: 12px;\r\n}\r\n.smb-hp .check-list li {\r\n  display: flex; align-items: flex-start; gap: 13px;\r\n  font-size: 15px; color: var(--text-mid); font-weight: 600;\r\n}\r\n.smb-hp .ck-icon {\r\n  width: 22px; height: 22px; border-radius: 6px;\r\n  background: linear-gradient(135deg, var(--blue-mid), var(--blue-light));\r\n  display: flex; align-items: center; justify-content: center; flex-shrink: 0;\r\n  margin-top: 1px;\r\n}\r\n.smb-hp .ck-icon svg { width: 12px; height: 12px; }\r\n\r\n.smb-hp .img-wrap { position: relative; }\r\n.smb-hp .img-main {\r\n  width: 100%; border-radius: 18px; aspect-ratio: 4\/3;\r\n  object-fit: cover; display: block;\r\n  box-shadow: 0 28px 64px rgba(10,30,110,.18);\r\n}\r\n.smb-hp .img-float {\r\n  position: absolute;\r\n  background: var(--blue-dark); border-radius: 14px;\r\n  padding: 18px 22px; text-align: center;\r\n  box-shadow: 0 12px 34px rgba(10,30,110,.3);\r\n  border: 3px solid #fff;\r\n}\r\n.smb-hp .img-float .f-num {\r\n  font-size: 28px; font-weight: 900;\r\n  color: var(--accent); line-height: 1;\r\n}\r\n.smb-hp .img-float .f-txt {\r\n  font-size: 10.5px; color: rgba(255,255,255,.75);\r\n  font-weight: 700; text-transform: uppercase;\r\n  letter-spacing: 1px; margin-top: 4px;\r\n}\r\n.smb-hp .f-br { bottom: -18px; right: -18px; }\r\n.smb-hp .f-tl { top: -18px; left: -18px; background: var(--white); border: 2px solid var(--border); }\r\n.smb-hp .f-tl .f-num { color: var(--blue-dark); }\r\n.smb-hp .f-tl .f-txt { color: var(--text-soft); }\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   S4 \u2014 STATS BAR\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.smb-hp .stats-bar {\r\n  padding: 66px 40px;\r\n  background: var(--off-white);\r\n  border-top: 1px solid var(--border);\r\n  border-bottom: 1px solid var(--border);\r\n}\r\n.smb-hp .stats-inner {\r\n  max-width: 1100px; margin: 0 auto;\r\n  display: grid; grid-template-columns: repeat(4,1fr);\r\n}\r\n.smb-hp .stat-item {\r\n  text-align: center; padding: 0 20px;\r\n  border-right: 1px solid var(--border);\r\n}\r\n.smb-hp .stat-item:last-child { border-right: none; }\r\n.smb-hp .stat-num {\r\n  font-size: clamp(34px,4vw,52px);\r\n  font-weight: 900; color: var(--blue-dark);\r\n  line-height: 1; margin-bottom: 10px; letter-spacing: -1.5px;\r\n}\r\n.smb-hp .stat-label {\r\n  font-size: 13.5px; color: var(--text-soft);\r\n  line-height: 1.55; max-width: 180px; margin: 0 auto;\r\n}\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   S5 \u2014 SERVICES GRID (6 cards)\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.smb-hp .svc-grid-sec {\r\n  padding: 100px 40px;\r\n  background: var(--white);\r\n  text-align: center;\r\n}\r\n.smb-hp .svc-grid-top { margin-bottom: 56px; }\r\n.smb-hp .svc-grid-top .sec-h2 { margin: 0 auto 20px; }\r\n.smb-hp .svc-grid-top .sec-p { margin: 0 auto 28px; }\r\n\r\n.smb-hp .svc-cards {\r\n  display: grid; grid-template-columns: repeat(3,1fr);\r\n  gap: 26px; max-width: 1160px; margin: 0 auto;\r\n}\r\n.smb-hp .svc-card {\r\n  background: var(--off-white);\r\n  border: 1.5px solid var(--border);\r\n  border-radius: 14px; padding: 46px 28px 38px;\r\n  text-align: center;\r\n  transition: transform .28s, box-shadow .28s, border-color .28s, background .28s;\r\n  position: relative; overflow: hidden;\r\n}\r\n.smb-hp .svc-card::before {\r\n  content: '';\r\n  position: absolute; top: 0; left: 0; right: 0; height: 3px;\r\n  background: linear-gradient(90deg, var(--blue-dark), var(--blue-light));\r\n  transform: scaleX(0); transform-origin: left; transition: transform .3s;\r\n}\r\n.smb-hp .svc-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(10,30,110,.12); border-color: #b8d4f0; background: #fff; }\r\n.smb-hp .svc-card:hover::before { transform: scaleX(1); }\r\n\r\n.smb-hp .svc-card-icon {\r\n  width: 90px; height: 90px; border-radius: 50%;\r\n  background: linear-gradient(145deg, var(--blue-mid) 0%, var(--blue-dark) 100%);\r\n  display: flex; align-items: center; justify-content: center;\r\n  margin: 0 auto 26px;\r\n  box-shadow: 0 10px 28px rgba(10,30,110,.28);\r\n  transition: transform .28s, box-shadow .28s;\r\n}\r\n.smb-hp .svc-card:hover .svc-card-icon { transform: scale(1.08); box-shadow: 0 16px 40px rgba(10,30,110,.35); }\r\n.smb-hp .svc-card-icon svg { width: 40px; height: 40px; }\r\n.smb-hp .svc-card h3 { font-size: 17px; font-weight: 800; color: var(--blue-dark); margin-bottom: 12px; }\r\n.smb-hp .svc-card p { font-size: 13.5px; color: var(--text-soft); line-height: 1.7; }\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   S6 \u2014 WHY CHOOSE US (image left, list right)\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.smb-hp .why-sec { padding: 110px 40px; background: var(--off-white); }\r\n.smb-hp .why-list { list-style: none; margin-top: 32px; display: flex; flex-direction: column; }\r\n.smb-hp .why-item {\r\n  display: flex; align-items: flex-start; gap: 18px;\r\n  padding: 20px 0; border-bottom: 1px solid var(--border);\r\n}\r\n.smb-hp .why-item:first-child { padding-top: 0; }\r\n.smb-hp .wi-icon {\r\n  width: 50px; height: 50px; border-radius: 13px; flex-shrink: 0;\r\n  background: linear-gradient(135deg, #e8f2fe, #c5ddfb);\r\n  display: flex; align-items: center; justify-content: center;\r\n  transition: background .25s;\r\n}\r\n.smb-hp .why-item:hover .wi-icon { background: linear-gradient(135deg, var(--blue-mid), var(--blue-dark)); }\r\n.smb-hp .why-item:hover .wi-icon svg { color: #fff; }\r\n.smb-hp .wi-icon svg { width: 22px; height: 22px; color: var(--blue-mid); transition: color .25s; }\r\n.smb-hp .why-item h4 { font-size: 15.5px; font-weight: 800; color: var(--text-dark); margin-bottom: 5px; }\r\n.smb-hp .why-item p { font-size: 13.5px; color: var(--text-soft); line-height: 1.68; }\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   S7 \u2014 PROCESS (NEW) \u2014 How We Work\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.smb-hp .process-sec {\r\n  padding: 100px 40px;\r\n  background: var(--white);\r\n  text-align: center;\r\n}\r\n.smb-hp .process-grid {\r\n  display: grid; grid-template-columns: repeat(4,1fr);\r\n  gap: 0; max-width: 1100px; margin: 56px auto 0;\r\n  position: relative;\r\n}\r\n.smb-hp .process-grid::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 44px; left: 12.5%; right: 12.5%;\r\n  height: 2px;\r\n  background: linear-gradient(90deg, var(--blue-mid), var(--accent));\r\n  z-index: 0;\r\n}\r\n.smb-hp .proc-step {\r\n  text-align: center; padding: 0 20px;\r\n  position: relative; z-index: 1;\r\n}\r\n.smb-hp .proc-num {\r\n  width: 88px; height: 88px; border-radius: 50%;\r\n  background: linear-gradient(145deg, var(--blue-mid), var(--blue-dark));\r\n  color: #fff;\r\n  font-size: 26px; font-weight: 900;\r\n  display: flex; align-items: center; justify-content: center;\r\n  margin: 0 auto 24px;\r\n  box-shadow: 0 8px 28px rgba(10,30,110,.28);\r\n  transition: transform .28s, box-shadow .28s;\r\n}\r\n.smb-hp .proc-step:hover .proc-num { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(10,30,110,.35); }\r\n.smb-hp .proc-step h3 { font-size: 16px; font-weight: 800; color: var(--blue-dark); margin-bottom: 10px; }\r\n.smb-hp .proc-step p { font-size: 13.5px; color: var(--text-soft); line-height: 1.68; }\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   S8 \u2014 TECHNOLOGIES (NEW)\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.smb-hp .tech-sec {\r\n  padding: 100px 40px;\r\n  background: var(--off-white);\r\n  text-align: center;\r\n}\r\n.smb-hp .tech-categories {\r\n  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr));\r\n  gap: 26px; max-width: 1160px; margin: 56px auto 0;\r\n}\r\n.smb-hp .tech-cat {\r\n  background: var(--white);\r\n  border: 1.5px solid var(--border);\r\n  border-radius: 16px; padding: 34px 26px;\r\n  text-align: left;\r\n  transition: transform .25s, box-shadow .25s, border-color .25s;\r\n}\r\n.smb-hp .tech-cat:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(10,30,110,.1); border-color: #b8d4f0; }\r\n.smb-hp .tc-header {\r\n  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;\r\n}\r\n.smb-hp .tc-icon {\r\n  width: 48px; height: 48px; border-radius: 12px;\r\n  background: linear-gradient(135deg, var(--blue-pale), #c5ddfb);\r\n  display: flex; align-items: center; justify-content: center; flex-shrink: 0;\r\n}\r\n.smb-hp .tc-icon svg { width: 22px; height: 22px; color: var(--blue-mid); }\r\n.smb-hp .tc-header h3 { font-size: 15.5px; font-weight: 800; color: var(--blue-dark); }\r\n.smb-hp .tech-tags { display: flex; flex-wrap: wrap; gap: 8px; }\r\n.smb-hp .tech-tag {\r\n  background: var(--blue-pale); color: var(--blue-dark);\r\n  font-size: 12.5px; font-weight: 700;\r\n  padding: 5px 14px; border-radius: 20px;\r\n  border: 1px solid #c5ddfb;\r\n}\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   S9 \u2014 TESTIMONIALS (NEW)\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.smb-hp .testimonials-sec {\r\n  padding: 100px 40px;\r\n  background: var(--blue-dark);\r\n  text-align: center;\r\n  position: relative; overflow: hidden;\r\n}\r\n.smb-hp .testimonials-sec::before {\r\n  content:''; position:absolute; width:600px; height:600px;\r\n  border-radius:50%; background:rgba(255,255,255,.04);\r\n  top:-250px; right:-150px; pointer-events:none;\r\n}\r\n.smb-hp .testimonials-sec::after {\r\n  content:''; position:absolute; width:400px; height:400px;\r\n  border-radius:50%; background:rgba(255,255,255,.03);\r\n  bottom:-180px; left:-80px; pointer-events:none;\r\n}\r\n.smb-hp .testi-inner { position: relative; z-index: 1; }\r\n.smb-hp .testimonials-sec .sec-tag { color: var(--accent); justify-content: center; }\r\n.smb-hp .testimonials-sec .sec-tag::before { background: var(--accent); }\r\n.smb-hp .testimonials-sec .sec-h2 { color: #fff; margin: 0 auto 14px; text-align: center; }\r\n.smb-hp .testimonials-sec > .testi-inner > p { color: rgba(255,255,255,.68); font-size: 16px; margin: 0 auto 56px; max-width: 500px; }\r\n\r\n.smb-hp .testi-grid {\r\n  display: grid; grid-template-columns: repeat(3,1fr);\r\n  gap: 24px; max-width: 1160px; margin: 0 auto;\r\n}\r\n.smb-hp .testi-card {\r\n  background: rgba(255,255,255,.07);\r\n  border: 1px solid rgba(255,255,255,.12);\r\n  border-radius: 16px; padding: 36px 30px;\r\n  text-align: left;\r\n  transition: background .25s, transform .25s;\r\n}\r\n.smb-hp .testi-card:hover { background: rgba(255,255,255,.11); transform: translateY(-5px); }\r\n.smb-hp .testi-stars {\r\n  display: flex; gap: 4px; margin-bottom: 20px;\r\n}\r\n.smb-hp .testi-stars svg { width: 18px; height: 18px; color: #ffc840; }\r\n.smb-hp .testi-card blockquote {\r\n  font-size: 15px; color: rgba(255,255,255,.82);\r\n  line-height: 1.78; font-style: italic; margin-bottom: 24px;\r\n}\r\n.smb-hp .testi-author {\r\n  display: flex; align-items: center; gap: 14px;\r\n}\r\n.smb-hp .testi-avatar {\r\n  width: 48px; height: 48px; border-radius: 50%;\r\n  object-fit: cover; border: 2px solid rgba(126,200,247,.4);\r\n}\r\n.smb-hp .testi-name { font-size: 14px; font-weight: 800; color: #fff; }\r\n.smb-hp .testi-role { font-size: 12.5px; color: rgba(255,255,255,.55); margin-top: 2px; }\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   S10 \u2014 PORTFOLIO \/ RECENT WORK (NEW)\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.smb-hp .portfolio-sec {\r\n  padding: 100px 40px;\r\n  background: var(--white);\r\n  text-align: center;\r\n}\r\n.smb-hp .portfolio-grid {\r\n  display: grid; grid-template-columns: repeat(3,1fr);\r\n  gap: 26px; max-width: 1160px; margin: 56px auto 0;\r\n}\r\n.smb-hp .port-card {\r\n  border-radius: 14px; overflow: hidden;\r\n  border: 1.5px solid var(--border);\r\n  text-align: left;\r\n  transition: transform .28s, box-shadow .28s;\r\n}\r\n.smb-hp .port-card:hover { transform: translateY(-7px); box-shadow: 0 22px 56px rgba(10,30,110,.14); }\r\n.smb-hp .port-thumb {\r\n  position: relative; overflow: hidden;\r\n}\r\n.smb-hp .port-thumb img {\r\n  width: 100%; height: 210px; object-fit: cover; display: block;\r\n  transition: transform .4s;\r\n}\r\n.smb-hp .port-card:hover .port-thumb img { transform: scale(1.06); }\r\n.smb-hp .port-overlay {\r\n  position: absolute; inset: 0;\r\n  background: linear-gradient(160deg, rgba(10,30,110,.7), rgba(26,63,196,.5));\r\n  opacity: 0; transition: opacity .3s;\r\n  display: flex; align-items: center; justify-content: center;\r\n}\r\n.smb-hp .port-card:hover .port-overlay { opacity: 1; }\r\n.smb-hp .port-overlay-btn {\r\n  background: #fff; color: var(--blue-dark);\r\n  font-size: 13px; font-weight: 800;\r\n  padding: 10px 22px; border-radius: 6px;\r\n  text-decoration: none;\r\n  display: inline-flex; align-items: center; gap: 8px;\r\n}\r\n.smb-hp .port-overlay-btn svg { width: 14px; height: 14px; }\r\n.smb-hp .port-body { padding: 24px; }\r\n.smb-hp .port-cat {\r\n  font-size: 11px; font-weight: 800; color: var(--blue-mid);\r\n  text-transform: uppercase; letter-spacing: 1.8px; margin-bottom: 8px;\r\n}\r\n.smb-hp .port-body h3 { font-size: 17px; font-weight: 800; color: var(--blue-dark); margin-bottom: 8px; }\r\n.smb-hp .port-body p { font-size: 13.5px; color: var(--text-soft); line-height: 1.65; }\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   S11 \u2014 CTA BANNER\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.smb-hp .cta-banner {\r\n  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 60%, var(--blue-light) 100%);\r\n  padding: 90px 40px;\r\n  text-align: center; position: relative; overflow: hidden;\r\n}\r\n.smb-hp .cta-banner::before {\r\n  content:''; position:absolute; width:500px; height:500px; border-radius:50%;\r\n  background:rgba(255,255,255,.05); top:-220px; right:-80px; pointer-events:none;\r\n}\r\n.smb-hp .cta-banner::after {\r\n  content:''; position:absolute; width:320px; height:320px; border-radius:50%;\r\n  background:rgba(255,255,255,.04); bottom:-140px; left:-60px; pointer-events:none;\r\n}\r\n.smb-hp .cta-inner { position: relative; z-index: 1; }\r\n.smb-hp .cta-banner h2 {\r\n  font-size: clamp(26px,4vw,50px); font-weight: 900;\r\n  color: #fff; margin-bottom: 16px; letter-spacing: -0.5px;\r\n}\r\n.smb-hp .cta-banner p {\r\n  color: rgba(255,255,255,.82); font-size: 17px;\r\n  margin-bottom: 42px; max-width: 520px;\r\n  margin-left: auto; margin-right: auto; line-height: 1.75;\r\n}\r\n.smb-hp .cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }\r\n.smb-hp .btn-cw {\r\n  background: #fff; color: var(--blue-dark);\r\n  padding: 15px 38px; border-radius: 6px;\r\n  font-weight: 800; font-size: 15px;\r\n  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;\r\n  transition: transform .2s, box-shadow .2s;\r\n}\r\n.smb-hp .btn-cw:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.24); }\r\n.smb-hp .btn-cw svg { width:16px; height:16px; }\r\n.smb-hp .btn-co {\r\n  background: transparent; color: #fff;\r\n  padding: 15px 36px; border-radius: 6px;\r\n  font-weight: 700; font-size: 15px;\r\n  text-decoration: none; display: inline-block;\r\n  border: 2px solid rgba(255,255,255,.5);\r\n  transition: border-color .2s, background .2s;\r\n}\r\n.smb-hp .btn-co:hover { border-color:#fff; background:rgba(255,255,255,.1); }\r\n\r\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n@media (max-width: 1020px) {\r\n  .smb-hp .feat-cards { grid-template-columns: repeat(2,1fr); }\r\n  .smb-hp .split, .smb-hp .why-inner { grid-template-columns: 1fr; gap: 50px; }\r\n  .smb-hp .split.flip { direction: ltr; }\r\n  .smb-hp .svc-cards, .smb-hp .testi-grid, .smb-hp .portfolio-grid { grid-template-columns: repeat(2,1fr); }\r\n  .smb-hp .process-grid { grid-template-columns: repeat(2,1fr); }\r\n  .smb-hp .process-grid::before { display: none; }\r\n  .smb-hp .stats-inner { grid-template-columns: repeat(2,1fr); gap: 28px 0; }\r\n  .smb-hp .stat-item { border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 24px; padding-top: 24px; }\r\n  .smb-hp .stat-item:first-child { padding-top: 0; }\r\n  .smb-hp .f-br { right: 10px; bottom: -14px; }\r\n  .smb-hp .f-tl { left: 10px; top: -14px; }\r\n}\r\n@media (max-width: 640px) {\r\n  .smb-hp .hero, .smb-hp .about-sec, .smb-hp .svc-grid-sec,\r\n  .smb-hp .why-sec, .smb-hp .process-sec, .smb-hp .tech-sec,\r\n  .smb-hp .testimonials-sec, .smb-hp .portfolio-sec, .smb-hp .cta-banner { padding: 70px 20px; }\r\n  .smb-hp .features-band { padding: 70px 20px; }\r\n  .smb-hp .feat-cards { grid-template-columns: 1fr; }\r\n  .smb-hp .svc-cards, .smb-hp .testi-grid, .smb-hp .portfolio-grid { grid-template-columns: 1fr; }\r\n  .smb-hp .process-grid { grid-template-columns: 1fr; }\r\n  .smb-hp .trust-bar { gap: 20px; }\r\n  .smb-hp .stats-inner { grid-template-columns: 1fr; }\r\n  .smb-hp .hero-btns { flex-direction: column; align-items: center; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"smb-hp\">\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     S1 \u2014 HERO\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"hero\">\r\n  <div class=\"hero-bg\"><\/div>\r\n  <div class=\"hero-overlay\"><\/div>\r\n  <div class=\"hero-circle hc1\"><\/div>\r\n  <div class=\"hero-circle hc2\"><\/div>\r\n  <div class=\"hero-circle hc3\"><\/div>\r\n\r\n  <div class=\"hero-inner\">\r\n    <div class=\"hero-badge\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n      Global IT &amp; Software Development\r\n    <\/div>\r\n    <h1>Attract More Customers<br>with a <span>Stunning Website<\/span><\/h1>\r\n    <p><strong>Smartbox Media American INC.<\/strong> is a global IT and software development company specializing in mobile apps, web solutions, and emerging technologies like AI and blockchain \u2014 delivering innovative, scalable digital solutions to businesses worldwide.<\/p>\r\n    <div class=\"hero-btns\">\r\n      <a href=\"\/contact\" class=\"btn-hero-main\">\r\n        Schedule a Consultation\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n      <\/a>\r\n      <a href=\"\/our-services\" class=\"btn-hero-ghost\">View Our Services<\/a>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Trust bar -->\r\n  <div class=\"trust-bar\">\r\n    <div class=\"trust-item\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n      4.9\/5.0 Client Rating\r\n    <\/div>\r\n    <div class=\"trust-item\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>\r\n      300+ Happy Clients\r\n    <\/div>\r\n    <div class=\"trust-item\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/svg>\r\n      10+ Years Experience\r\n    <\/div>\r\n    <div class=\"trust-item\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"\/><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><\/svg>\r\n      25+ Countries Served\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     S2 \u2014 FEATURES BAND (Redesigned)\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"features-band\">\r\n  <div class=\"features-band-inner\">\r\n    <div class=\"fb-top anim-up\">\r\n      <div>\r\n        <h2>Everything Your Business Needs to <span>Dominate Online<\/span><\/h2>\r\n      <\/div>\r\n      <p>From custom web design to mobile apps and media services \u2014 we cover every aspect of your digital presence with precision and expertise.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"feat-cards\">\r\n      <div class=\"feat-card anim-scale\">\r\n        <div class=\"fc-icon\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M8 21h8M12 17v4\"\/><\/svg>\r\n        <\/div>\r\n        <h3>Custom Website Design<\/h3>\r\n        <p>Pixel-perfect, conversion-focused websites built to represent your brand and turn visitors into paying customers.<\/p>\r\n      <\/div>\r\n      <div class=\"feat-card anim-scale\">\r\n        <div class=\"fc-icon\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>\r\n        <\/div>\r\n        <h3>24\/7 Security Monitoring<\/h3>\r\n        <p>Automated vulnerability scans, SSL management, firewall protection, and real-time uptime monitoring \u2014 always on.<\/p>\r\n      <\/div>\r\n      <div class=\"feat-card anim-scale\">\r\n        <div class=\"fc-icon\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\"\/><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"\/><\/svg>\r\n        <\/div>\r\n        <h3>Mobile App Development<\/h3>\r\n        <p>Native iOS & Android apps plus cross-platform builds using Flutter and React Native for maximum reach.<\/p>\r\n      <\/div>\r\n      <div class=\"feat-card anim-scale\">\r\n        <div class=\"fc-icon\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\r\n        <\/div>\r\n        <h3>On-Time Delivery<\/h3>\r\n        <p>92% of projects delivered on schedule. Agile sprints, transparent milestones, and dedicated project managers.<\/p>\r\n      <\/div>\r\n      <div class=\"feat-card anim-scale\">\r\n        <div class=\"fc-icon\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><line x1=\"18\" y1=\"20\" x2=\"18\" y2=\"10\"\/><line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"4\"\/><line x1=\"6\" y1=\"20\" x2=\"6\" y2=\"14\"\/><\/svg>\r\n        <\/div>\r\n        <h3>SEO &amp; Performance<\/h3>\r\n        <p>Speed optimization, Core Web Vitals tuning, and technical SEO so your site ranks higher and loads faster.<\/p>\r\n      <\/div>\r\n      <div class=\"feat-card anim-scale\">\r\n        <div class=\"fc-icon\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>\r\n        <\/div>\r\n        <h3>Hire Remote Developers<\/h3>\r\n        <p>Scale your team instantly with pre-vetted senior developers \u2014 onboarded in 48 hours with zero recruitment hassle.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Service pills -->\r\n    <div class=\"svc-pills-row anim-up\">\r\n      <a href=\"https:\/\/smartboxmedia.co\/index.php\/web-design-and-development\/\" class=\"svc-pill\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M8 21h8M12 17v4\"\/><\/svg>\r\n        Web Design &amp; Dev\r\n      <\/a>\r\n      <a href=\"https:\/\/smartboxmedia.co\/index.php\/mobile-application-development\/\" class=\"svc-pill\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\"\/><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"\/><\/svg>\r\n        Mobile App Dev\r\n      <\/a>\r\n      <a href=\"https:\/\/smartboxmedia.co\/index.php\/web-design-and-development\/\" class=\"svc-pill\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"9\" cy=\"21\" r=\"1\"\/><circle cx=\"20\" cy=\"21\" r=\"1\"\/><path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"\/><\/svg>\r\n        Ecommerce Dev\r\n      <\/a>\r\n      <a href=\"https:\/\/smartboxmedia.co\/index.php\/hire-a-remote-developer\/\" class=\"svc-pill\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><\/svg>\r\n        Hire a Developer\r\n      <\/a>\r\n      <a href=\"https:\/\/smartboxmedia.co\/index.php\/media-services\/\" class=\"svc-pill\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"23 7 16 12 23 17 23 7\"\/><rect x=\"1\" y=\"5\" width=\"15\" height=\"14\" rx=\"2\"\/><\/svg>\r\n        Media Services\r\n      <\/a>\r\n      <a href=\"https:\/\/smartboxmedia.co\/index.php\/web-design-and-development\/\" class=\"svc-pill\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/svg>\r\n        API Development\r\n      <\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     S3 \u2014 ABOUT \/ Building the Future\r\n     LEFT: Text  |  RIGHT: Image\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"about-sec\">\r\n  <div class=\"split\">\r\n    <div class=\"about-text anim-left\">\r\n      <div class=\"sec-tag\">About Us<\/div>\r\n      <h2 class=\"sec-h2\">Building the Future of Web Development<\/h2>\r\n      <p class=\"sec-p\">At Smartbox Media, we don't just build websites \u2014 we engineer digital experiences that drive real business growth. Our team brings over a decade of expertise, combining creative design with powerful technology to deliver results that matter.<\/p>\r\n      <p class=\"sec-p\">We work with startups, SMEs, and enterprises across 25+ countries, delivering custom digital products that are fast, secure, scalable, and built to convert.<\/p>\r\n      <ul class=\"check-list\">\r\n        <li>\r\n          <div class=\"ck-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\r\n          Full-cycle development \u2014 concept to launch and beyond\r\n        <\/li>\r\n        <li>\r\n          <div class=\"ck-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\r\n          React, Next.js, WordPress, Shopify &amp; custom stacks\r\n        <\/li>\r\n        <li>\r\n          <div class=\"ck-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\r\n          Mobile-first, SEO-optimized, high-performance builds\r\n        <\/li>\r\n        <li>\r\n          <div class=\"ck-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\r\n          Dedicated project manager from day one\r\n        <\/li>\r\n      <\/ul>\r\n      <a href=\"\/about-us\" class=\"btn-primary\">\r\n        About Us\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n      <\/a>\r\n    <\/div>\r\n    <div class=\"img-wrap anim-right\">\r\n      <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1522071820081-009f0129c71c?w=800&q=80&auto=format&fit=crop\" alt=\"Smartbox Media Team\" class=\"img-main\">\r\n      <div class=\"img-float f-br\">\r\n        <div class=\"f-num\">10+<\/div>\r\n        <div class=\"f-txt\">Years of<br>Excellence<\/div>\r\n      <\/div>\r\n      <div class=\"img-float f-tl\">\r\n        <div class=\"f-num\">300+<\/div>\r\n        <div class=\"f-txt\">Projects<br>Done<\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     S4 \u2014 STATS BAR\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"stats-bar\">\r\n  <div class=\"stats-inner\">\r\n    <div class=\"stat-item anim-scale\">\r\n      <div class=\"stat-num\">10+<\/div>\r\n      <div class=\"stat-label\">Years of expertise crafting high-performing websites<\/div>\r\n    <\/div>\r\n    <div class=\"stat-item anim-scale\">\r\n      <div class=\"stat-num\">92%<\/div>\r\n      <div class=\"stat-label\">Proven track record of delivering successful projects<\/div>\r\n    <\/div>\r\n    <div class=\"stat-item anim-scale\">\r\n      <div class=\"stat-num\">4.9\/5.0<\/div>\r\n      <div class=\"stat-label\">Customer Ratings that speak for themselves<\/div>\r\n    <\/div>\r\n    <div class=\"stat-item anim-scale\">\r\n      <div class=\"stat-num\">300+<\/div>\r\n      <div class=\"stat-label\">Happy clients who trust us with their online presence<\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     S5 \u2014 SERVICES GRID\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"svc-grid-sec\">\r\n  <div class=\"svc-grid-top anim-up\">\r\n    <div class=\"sec-tag\" style=\"justify-content:center;\">Our Services<\/div>\r\n    <h2 class=\"sec-h2\" style=\"margin:0 auto 16px;\">Web Development Solutions<br>to Drive Results<\/h2>\r\n    <p class=\"sec-p\" style=\"margin:0 auto 28px;\">From websites to apps \u2014 we have the expertise to build every layer of your digital presence.<\/p>\r\n    <a href=\"\/our-services\" class=\"btn-primary\">\r\n      View All Services\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n    <\/a>\r\n  <\/div>\r\n  <div class=\"svc-cards\">\r\n\r\n    <div class=\"svc-card anim-scale\">\r\n      <div class=\"svc-card-icon\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.5\" width=\"40\" height=\"40\">\r\n          <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M8 21h8M12 17v4\"\/>\r\n          <circle cx=\"12\" cy=\"10\" r=\"2.5\"\/>\r\n        <\/svg>\r\n      <\/div>\r\n      <h3>Web Maintenance &amp; Support<\/h3>\r\n      <p>Keep your website fast, secure, and always updated with our comprehensive maintenance packages \u2014 backups, updates, and 24\/7 monitoring included.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"svc-card anim-scale\">\r\n      <div class=\"svc-card-icon\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.5\" width=\"40\" height=\"40\">\r\n          <polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/>\r\n          <rect x=\"9\" y=\"9\" width=\"6\" height=\"6\" rx=\"1\"\/>\r\n        <\/svg>\r\n      <\/div>\r\n      <h3>API Development<\/h3>\r\n      <p>Robust RESTful and GraphQL APIs built for performance and scale \u2014 seamless integrations with third-party platforms, payment gateways, and CRMs.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"svc-card anim-scale\">\r\n      <div class=\"svc-card-icon\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.5\" width=\"40\" height=\"40\">\r\n          <circle cx=\"9\" cy=\"21\" r=\"1\"\/><circle cx=\"20\" cy=\"21\" r=\"1\"\/>\r\n          <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"\/>\r\n        <\/svg>\r\n      <\/div>\r\n      <h3>Ecommerce Development<\/h3>\r\n      <p>Shopify, WooCommerce, and custom store solutions designed to maximise conversions, streamline checkout, and scale with your growing business.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"svc-card anim-scale\">\r\n      <div class=\"svc-card-icon\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.5\" width=\"40\" height=\"40\">\r\n          <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M8 21h8M12 17v4\"\/>\r\n          <path d=\"M7 8h2M7 11h5\"\/>\r\n        <\/svg>\r\n      <\/div>\r\n      <h3>Web App Development<\/h3>\r\n      <p>Full-stack web applications using React, Next.js, Node.js, and modern cloud architecture \u2014 built to handle real-world traffic and complex workflows.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"svc-card anim-scale\">\r\n      <div class=\"svc-card-icon\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.5\" width=\"40\" height=\"40\">\r\n          <rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\"\/><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"\/>\r\n          <path d=\"M9 6h6\"\/>\r\n        <\/svg>\r\n      <\/div>\r\n      <h3>Mobile App Development<\/h3>\r\n      <p>Native iOS and Android apps, plus cross-platform builds using React Native and Flutter \u2014 crafted for exceptional performance and user delight.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"svc-card anim-scale\">\r\n      <div class=\"svc-card-icon\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.5\" width=\"40\" height=\"40\">\r\n          <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"\/>\r\n          <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"\/>\r\n        <\/svg>\r\n      <\/div>\r\n      <h3>Content Management<\/h3>\r\n      <p>WordPress, Webflow, and headless CMS platforms \u2014 giving your team full control to update and manage content easily without a developer.<\/p>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     S6 \u2014 WHY CHOOSE US\r\n     LEFT: Image  |  RIGHT: List\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"why-sec\">\r\n  <div class=\"split why-inner\">\r\n    <div class=\"img-wrap anim-left\">\r\n      <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600880292203-757bb62b4baf?w=800&q=80&auto=format&fit=crop\" alt=\"Why Smartbox Media\" class=\"img-main\">\r\n      <div class=\"img-float f-br\" style=\"background:var(--blue-mid);\">\r\n        <div class=\"f-num\" style=\"color:#fff;\">92%<\/div>\r\n        <div class=\"f-txt\">On-Time<br>Delivery<\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"anim-right\">\r\n      <div class=\"sec-tag\">Why Choose Us<\/div>\r\n      <h2 class=\"sec-h2\">Your Success Is Our Only Goal<\/h2>\r\n      <p class=\"sec-p\" style=\"margin-bottom:0;\">We're not just a vendor \u2014 we're a technology partner invested in your long-term growth. Here's what sets Smartbox apart.<\/p>\r\n      <ul class=\"why-list\">\r\n        <li class=\"why-item\">\r\n          <div class=\"wi-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg><\/div>\r\n          <div><h4>10+ Years of Proven Expertise<\/h4><p>A decade of delivering high-performing digital products across 25+ countries and diverse industries.<\/p><\/div>\r\n        <\/li>\r\n        <li class=\"why-item\">\r\n          <div class=\"wi-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg><\/div>\r\n          <div><h4>On-Time, On-Budget Delivery<\/h4><p>92% of our projects are delivered on time. Agile workflows and clear milestones keep everything on track.<\/p><\/div>\r\n        <\/li>\r\n        <li class=\"why-item\">\r\n          <div class=\"wi-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg><\/div>\r\n          <div><h4>Security-First Development<\/h4><p>Every project includes automated security scans, SSL, and ongoing vulnerability monitoring to keep you safe.<\/p><\/div>\r\n        <\/li>\r\n        <li class=\"why-item\">\r\n          <div class=\"wi-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg><\/div>\r\n          <div><h4>Dedicated Project Manager<\/h4><p>One point of contact throughout your project \u2014 transparent communication, zero confusion, full accountability.<\/p><\/div>\r\n        <\/li>\r\n      <\/ul>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     S7 \u2014 HOW WE WORK (NEW)\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"process-sec\">\r\n  <div class=\"sec-tag anim-up\" style=\"justify-content:center;\">Our Process<\/div>\r\n  <h2 class=\"sec-h2 anim-up\" style=\"text-align:center;\">How We Turn Your Idea into Reality<\/h2>\r\n  <p class=\"sec-p anim-up\" style=\"margin:0 auto;text-align:center;\">A simple, transparent 4-step process that delivers results \u2014 every single time.<\/p>\r\n  <div class=\"process-grid\">\r\n    <div class=\"proc-step anim-scale\">\r\n      <div class=\"proc-num\">01<\/div>\r\n      <h3>Discovery &amp; Planning<\/h3>\r\n      <p>We deep-dive into your goals, audience, and requirements \u2014 then map out a clear project roadmap and timeline.<\/p>\r\n    <\/div>\r\n    <div class=\"proc-step anim-scale\">\r\n      <div class=\"proc-num\">02<\/div>\r\n      <h3>Design &amp; Prototype<\/h3>\r\n      <p>UI\/UX wireframes and interactive prototypes are built and reviewed by you before a single line of code is written.<\/p>\r\n    <\/div>\r\n    <div class=\"proc-step anim-scale\">\r\n      <div class=\"proc-num\">03<\/div>\r\n      <h3>Development &amp; Testing<\/h3>\r\n      <p>Senior developers write clean, scalable code \u2014 rigorously tested across devices, browsers, and performance benchmarks.<\/p>\r\n    <\/div>\r\n    <div class=\"proc-step anim-scale\">\r\n      <div class=\"proc-num\">04<\/div>\r\n      <h3>Launch &amp; Support<\/h3>\r\n      <p>Smooth deployment, post-launch monitoring, and ongoing support to ensure your product keeps performing at its best.<\/p>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     S8 \u2014 TECHNOLOGIES (NEW)\r\n     RIGHT: Image  |  LEFT: Tech categories\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"tech-sec\">\r\n  <div class=\"sec-tag anim-up\" style=\"justify-content:center;\">Tech Stack<\/div>\r\n  <h2 class=\"sec-h2 anim-up\" style=\"text-align:center;\">Built with the Best Technologies<\/h2>\r\n  <p class=\"sec-p anim-up\" style=\"margin:0 auto;text-align:center;\">We work with modern, battle-tested tools to ensure your product is fast, scalable, and future-proof.<\/p>\r\n  <div class=\"tech-categories\">\r\n\r\n    <div class=\"tech-cat anim-scale\">\r\n      <div class=\"tc-header\">\r\n        <div class=\"tc-icon\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M8 21h8M12 17v4\"\/><\/svg>\r\n        <\/div>\r\n        <h3>Frontend<\/h3>\r\n      <\/div>\r\n      <div class=\"tech-tags\">\r\n        <span class=\"tech-tag\">React.js<\/span>\r\n        <span class=\"tech-tag\">Next.js<\/span>\r\n        <span class=\"tech-tag\">Vue.js<\/span>\r\n        <span class=\"tech-tag\">Tailwind CSS<\/span>\r\n        <span class=\"tech-tag\">TypeScript<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"tech-cat anim-scale\">\r\n      <div class=\"tc-header\">\r\n        <div class=\"tc-icon\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"\/><path d=\"M21 12c0 1.66-4 3-9 3s-9-1.34-9-3\"\/><path d=\"M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5\"\/><\/svg>\r\n        <\/div>\r\n        <h3>Backend<\/h3>\r\n      <\/div>\r\n      <div class=\"tech-tags\">\r\n        <span class=\"tech-tag\">Node.js<\/span>\r\n        <span class=\"tech-tag\">PHP \/ Laravel<\/span>\r\n        <span class=\"tech-tag\">Python<\/span>\r\n        <span class=\"tech-tag\">GraphQL<\/span>\r\n        <span class=\"tech-tag\">MySQL<\/span>\r\n        <span class=\"tech-tag\">MongoDB<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"tech-cat anim-scale\">\r\n      <div class=\"tc-header\">\r\n        <div class=\"tc-icon\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\"\/><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"\/><\/svg>\r\n        <\/div>\r\n        <h3>Mobile<\/h3>\r\n      <\/div>\r\n      <div class=\"tech-tags\">\r\n        <span class=\"tech-tag\">React Native<\/span>\r\n        <span class=\"tech-tag\">Flutter<\/span>\r\n        <span class=\"tech-tag\">Swift<\/span>\r\n        <span class=\"tech-tag\">Kotlin<\/span>\r\n        <span class=\"tech-tag\">Firebase<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"tech-cat anim-scale\">\r\n      <div class=\"tc-header\">\r\n        <div class=\"tc-icon\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z\"\/><\/svg>\r\n        <\/div>\r\n        <h3>Cloud &amp; CMS<\/h3>\r\n      <\/div>\r\n      <div class=\"tech-tags\">\r\n        <span class=\"tech-tag\">AWS<\/span>\r\n        <span class=\"tech-tag\">Google Cloud<\/span>\r\n        <span class=\"tech-tag\">WordPress<\/span>\r\n        <span class=\"tech-tag\">Shopify<\/span>\r\n        <span class=\"tech-tag\">Webflow<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     S9 \u2014 TESTIMONIALS (NEW)\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"testimonials-sec\">\r\n  <div class=\"testi-inner\">\r\n    <div class=\"sec-tag anim-up\">Client Testimonials<\/div>\r\n    <h2 class=\"sec-h2 anim-up\">What Our Clients Say<\/h2>\r\n    <p class=\"anim-up\" style=\"color:rgba(255,255,255,.68);font-size:16px;margin:0 auto 56px;max-width:500px;\">Don't just take our word for it \u2014 hear from the businesses that trust Smartbox Media with their digital future.<\/p>\r\n    <div class=\"testi-grid\">\r\n\r\n      <div class=\"testi-card anim-scale\">\r\n        <div class=\"testi-stars\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n        <\/div>\r\n        <blockquote>\"Smartbox Media completely transformed our online presence. Our new website loads in under 2 seconds and our leads have increased by 140% since launch. The team was professional, responsive, and delivered ahead of schedule.\"<\/blockquote>\r\n        <div class=\"testi-author\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1560250097-0b93528c311a?w=100&q=80&auto=format&fit=crop&face\" alt=\"James R.\" class=\"testi-avatar\">\r\n          <div>\r\n            <div class=\"testi-name\">James Richardson<\/div>\r\n            <div class=\"testi-role\">CEO, TechNova Solutions \u2014 USA<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"testi-card anim-scale\">\r\n        <div class=\"testi-stars\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n        <\/div>\r\n        <blockquote>\"The mobile app they built for us has over 50,000 downloads and a 4.8-star rating on both app stores. Smartbox's development process was flawless \u2014 clear communication, zero surprises, and a product we're truly proud of.\"<\/blockquote>\r\n        <div class=\"testi-author\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1573496359142-b8d87734a5a2?w=100&q=80&auto=format&fit=crop&face\" alt=\"Priya S.\" class=\"testi-avatar\">\r\n          <div>\r\n            <div class=\"testi-name\">Priya Sharma<\/div>\r\n            <div class=\"testi-role\">Founder, HealthTrack App \u2014 India<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"testi-card anim-scale\">\r\n        <div class=\"testi-stars\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n        <\/div>\r\n        <blockquote>\"We hired a remote developer through Smartbox and were blown away. He was onboarded within 48 hours, integrated seamlessly with our team, and delivered senior-level work at a fraction of our usual hiring cost.\"<\/blockquote>\r\n        <div class=\"testi-author\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1507003211169-0a1dd7228f2d?w=100&q=80&auto=format&fit=crop&face\" alt=\"Mark L.\" class=\"testi-avatar\">\r\n          <div>\r\n            <div class=\"testi-name\">Mark Laurent<\/div>\r\n            <div class=\"testi-role\">CTO, FinEdge Capital \u2014 UK<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     S10 \u2014 PORTFOLIO \/ RECENT WORK (NEW)\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"portfolio-sec\">\r\n  <div class=\"sec-tag anim-up\" style=\"justify-content:center;\">Our Work<\/div>\r\n  <h2 class=\"sec-h2 anim-up\" style=\"text-align:center;\">Recent Projects We're Proud Of<\/h2>\r\n  <p class=\"sec-p anim-up\" style=\"margin:0 auto;text-align:center;\">A glimpse at some of the digital products we've built for our clients around the world.<\/p>\r\n  <div class=\"portfolio-grid\">\r\n\r\n    <div class=\"port-card anim-scale\">\r\n      <div class=\"port-thumb\">\r\n        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1556742049-0cfed4f6a45d?w=600&q=80&auto=format&fit=crop\" alt=\"Ecommerce Project\">\r\n        <div class=\"port-overlay\">\r\n          <a href=\"\/our-work\" class=\"port-overlay-btn\">View Project <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/a>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"port-body\">\r\n        <div class=\"port-cat\">Ecommerce \u00b7 Shopify<\/div>\r\n        <h3>FreshMart Online Store<\/h3>\r\n        <p>A high-converting grocery ecommerce platform with real-time inventory and seamless checkout for 10,000+ daily users.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"port-card anim-scale\">\r\n      <div class=\"port-thumb\">\r\n        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1576091160550-2173dba999ef?w=600&q=80&auto=format&fit=crop\" alt=\"Healthcare App\">\r\n        <div class=\"port-overlay\">\r\n          <a href=\"\/our-work\" class=\"port-overlay-btn\">View Project <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/a>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"port-body\">\r\n        <div class=\"port-cat\">Mobile App \u00b7 React Native<\/div>\r\n        <h3>MediCare Patient App<\/h3>\r\n        <p>A healthcare app with appointment booking, telemedicine, and EMR integration \u2014 50,000+ downloads and 4.8\u2605 rating.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"port-card anim-scale\">\r\n      <div class=\"port-thumb\">\r\n        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?w=600&q=80&auto=format&fit=crop\" alt=\"SaaS Dashboard\">\r\n        <div class=\"port-overlay\">\r\n          <a href=\"\/our-work\" class=\"port-overlay-btn\">View Project <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/a>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"port-body\">\r\n        <div class=\"port-cat\">Web App \u00b7 Next.js \u00b7 Node.js<\/div>\r\n        <h3>InsightPro Analytics<\/h3>\r\n        <p>A real-time SaaS analytics dashboard with custom reporting, team collaboration, and white-label options for B2B clients.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     S11 \u2014 CTA BANNER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"cta-banner\">\r\n  <div class=\"cta-inner anim-up\">\r\n    <h2>Ready to Grow Your Business Online?<\/h2>\r\n    <p>Let's build something powerful together. Get a free consultation and project estimate within 24 hours.<\/p>\r\n    <div class=\"cta-btns\">\r\n      <a href=\"\/contact\" class=\"btn-cw\">\r\n        Schedule a Consultation\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n      <\/a>\r\n      <a href=\"\/our-services\" class=\"btn-co\">View All Services<\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c5e99f7 e-flex e-con-boxed e-con e-parent\" data-id=\"c5e99f7\" 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-23970bb elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"23970bb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Have a Question? We've <span style=\"color:#00008E\"> Got Answers<\/span> <\/h2>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c6b4c4c e-flex e-con-boxed e-con e-child\" data-id=\"c6b4c4c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-0fc3022 e-con-full e-flex e-con e-child\" data-id=\"0fc3022\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0f08e47 elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"0f08e47\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Let's Connect !<\/h2>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5a97f58 e-flex e-con-boxed e-con e-child\" data-id=\"5a97f58\" 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-aa85084 elementor-widget elementor-widget-html\" data-id=\"aa85084\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n.st-ng-ftf,.st-ng-stf{\n    display: flex;\n    gap: 20px;\n}\n.st-ng-mess-field{\n    height: 200px;\n}\n.st-ng-home-form1 input, textarea{\n    border-color: #E1E1E1;\n    color: #6D6D6D;\n}\n.st-ng-home-form1 {\n    color: #6D6D6D;\n}\n.st-ng-sub-btn{\n    background: #0F0FB1;\n    padding: 10px 25px;\n    color: #E1E1E1 !important;\n}\n\n\/* mobile media start*\/\n@media screen and (min-width : 320px) and (max-width : 767px) {\n    .st-ng-ftf,.st-ng-stf{\n    display: inline;\n}\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fb048e5 elementor-widget elementor-widget-shortcode\" data-id=\"fb048e5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"mf-form-shortcode\">\r\n\t\t<div\r\n\t\t\tid=\"metform-wrap-166-166\"\r\n\t\t\tclass=\"mf-form-wrapper\"\r\n\t\t\tdata-form-id=\"166\"\r\n\t\t\tdata-action=\"https:\/\/smartboxmedia.co\/index.php\/wp-json\/metform\/v1\/entries\/insert\/166\"\r\n\t\t\tdata-wp-nonce=\"e766c0c567\"\r\n\t\t\tdata-form-nonce=\"92f2ffcfc3\"\r\n\t\t\tdata-quiz-summery = \"false\"\r\n\t\t\tdata-save-progress = \"false\"\r\n\t\t\tdata-form-type=\"general-form\"\r\n\t\t\tdata-stop-vertical-effect=\"\"\r\n\t\t\t><\/div>\r\n\r\n\r\n\t\t<!----------------------------- \r\n\t\t\t* controls_data : find the the props passed indie of data attribute\r\n\t\t\t* props.SubmitResponseMarkup : contains the markup of error or success message\r\n\t\t\t* https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals\r\n\t\t--------------------------- -->\r\n\r\n\t\t\t\t<script type=\"text\/mf\" class=\"mf-template\">\r\n\t\t\tfunction controls_data (value){\r\n\t\t\t\tlet currentWrapper = \"mf-response-props-id-166\";\r\n\t\t\t\tlet currentEl = document.getElementById(currentWrapper);\r\n\t\t\t\t\r\n\t\t\t\treturn currentEl ? currentEl.dataset[value] : false\r\n\t\t\t}\r\n\r\n\r\n\t\t\tlet is_edit_mode = '' ? true : false;\r\n\t\t\tlet message_position = controls_data('messageposition') || 'top';\r\n\r\n\t\t\t\r\n\t\t\tlet message_successIcon = controls_data('successicon') || '';\r\n\t\t\tlet message_errorIcon = controls_data('erroricon') || '';\r\n\t\t\tlet message_editSwitch = controls_data('editswitchopen') === 'yes' ? true : false;\r\n\t\t\tlet message_proClass = controls_data('editswitchopen') === 'yes' ? 'mf_pro_activated' : '';\r\n\t\t\t\r\n\t\t\tlet is_dummy_markup = is_edit_mode && message_editSwitch ? true : false;\r\n\r\n\t\t\t\r\n\t\t\treturn html`\r\n\t\t\t\t<form\r\n\t\t\t\t\tclassName=\"metform-form-content\"\r\n\t\t\t\t\tref=${parent.formContainerRef}\r\n\t\t\t\t\tonSubmit=${ validation.handleSubmit( parent.handleFormSubmit ) }\r\n\t\t\t\t\r\n\t\t\t\t\t>\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t\t${is_dummy_markup ? message_position === 'top' ?  props.ResponseDummyMarkup(message_successIcon, message_proClass) : '' : ''}\r\n\t\t\t\t\t${is_dummy_markup ? ' ' :  message_position === 'top' ? props.SubmitResponseMarkup`${parent}${state}${message_successIcon}${message_errorIcon}${message_proClass}` : ''}\r\n\r\n\t\t\t\t\t<!--------------------------------------------------------\r\n\t\t\t\t\t*** IMPORTANT \/ DANGEROUS ***\r\n\t\t\t\t\t${html``} must be used as in immediate child of \"metform-form-main-wrapper\"\r\n\t\t\t\t\tclass otherwise multistep form will not run at all\r\n\t\t\t\t\t---------------------------------------------------------->\r\n\r\n\t\t\t\t\t<div className=\"metform-form-main-wrapper\" key=${'hide-form-after-submit'} ref=${parent.formRef}>\r\n\t\t\t\t\t${html`\r\n\t\t\t\t\t\t\t\t<div data-elementor-type=\"wp-post\" key=\"2\" data-elementor-id=\"166\" className=\"elementor elementor-166\">\n\t\t\t\t<div className=\"elementor-element elementor-element-46a3f1bf e-con-full e-flex e-con e-parent\" data-id=\"46a3f1bf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div className=\"elementor-element elementor-element-5356f21a elementor-widget elementor-widget-heading\" data-id=\"5356f21a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 className=\"elementor-heading-title elementor-size-default\">Connect With Us<\/h3>\t\t\t\t<\/div>\n\t\t<div className=\"elementor-element elementor-element-65b14f34 e-con-full e-grid e-con e-child\" data-id=\"65b14f34\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div className=\"elementor-element elementor-element-229b8a8 elementor-widget elementor-widget-mf-text\" data-id=\"229b8a8\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;mf_input_name&quot;:&quot;mf-first-name&quot;}\" data-widget_type=\"mf-text.default\">\n\t\t\t\t\t\r\n\t\t<div className=\"mf-input-wrapper\">\r\n\t\t\t\t\t\t\t<label className=\"mf-input-label\" htmlFor=\"mf-input-text-229b8a8\">\r\n\t\t\t\t\t${ parent.decodeEntities(`First Name`) } \t\t\t\t\t<span className=\"mf-input-required-indicator\">*<\/span>\r\n\t\t\t\t<\/label>\r\n\t\t\t\r\n\t\t\t<input\r\n\t\t\t\ttype=\"text\"\r\n\t\t\t\tclassName=\"mf-input mf-conditional-input\"\r\n\t\t\t\tid=\"mf-input-text-229b8a8\"\r\n\t\t\t\tname=\"mf-first-name\"\r\n\t\t\t\tplaceholder=\"${ parent.decodeEntities(`First name here`) } \"\r\n\t\t\t\t\t\t\t\t\tonInput=${parent.handleChange}\r\n\t\t\t\t\tonBlur=${parent.handleChange}\r\n\t\t\t\t\taria-invalid=${validation.errors['mf-first-name'] ? 'true' : 'false'}\r\n\t\t\t\t\tref=${el =>{\r\n\t\t\t\t\t\t\t\t\t\t\t\tparent.activateValidation({\"message\":\"This field is required.\",\"minLength\":1,\"maxLength\":\"\",\"type\":\"none\",\"required\":true,\"expression\":\"null\"}, el)\r\n\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\/>\r\n\r\n\t\t\t\t\t\t\t<${validation.ErrorMessage}\r\n\t\t\t\t\terrors=${validation.errors}\r\n\t\t\t\t\tname=\"mf-first-name\"\r\n\t\t\t\t\tas=${html`<span className=\"mf-error-message\"><\/span>`}\r\n\t\t\t\t\t\/>\r\n\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div className=\"elementor-element elementor-element-1a922000 elementor-widget elementor-widget-mf-text\" data-id=\"1a922000\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;mf_input_name&quot;:&quot;mf-last-name&quot;}\" data-widget_type=\"mf-text.default\">\n\t\t\t\t\t\r\n\t\t<div className=\"mf-input-wrapper\">\r\n\t\t\t\t\t\t\t<label className=\"mf-input-label\" htmlFor=\"mf-input-text-1a922000\">\r\n\t\t\t\t\t${ parent.decodeEntities(`Last Name`) } \t\t\t\t\t<span className=\"mf-input-required-indicator\">*<\/span>\r\n\t\t\t\t<\/label>\r\n\t\t\t\r\n\t\t\t<input\r\n\t\t\t\ttype=\"text\"\r\n\t\t\t\tclassName=\"mf-input mf-conditional-input\"\r\n\t\t\t\tid=\"mf-input-text-1a922000\"\r\n\t\t\t\tname=\"mf-last-name\"\r\n\t\t\t\tplaceholder=\"${ parent.decodeEntities(`Last name here`) } \"\r\n\t\t\t\t\t\t\t\t\tonInput=${parent.handleChange}\r\n\t\t\t\t\tonBlur=${parent.handleChange}\r\n\t\t\t\t\taria-invalid=${validation.errors['mf-last-name'] ? 'true' : 'false'}\r\n\t\t\t\t\tref=${el =>{\r\n\t\t\t\t\t\t\t\t\t\t\t\tparent.activateValidation({\"message\":\"This field is required.\",\"minLength\":1,\"maxLength\":\"\",\"type\":\"none\",\"required\":true,\"expression\":\"null\"}, el)\r\n\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\/>\r\n\r\n\t\t\t\t\t\t\t<${validation.ErrorMessage}\r\n\t\t\t\t\terrors=${validation.errors}\r\n\t\t\t\t\tname=\"mf-last-name\"\r\n\t\t\t\t\tas=${html`<span className=\"mf-error-message\"><\/span>`}\r\n\t\t\t\t\t\/>\r\n\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div className=\"elementor-element elementor-element-752b6f44 elementor-widget elementor-widget-mf-email\" data-id=\"752b6f44\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;mf_input_name&quot;:&quot;mf-email&quot;}\" data-widget_type=\"mf-email.default\">\n\t\t\t\t\t\r\n\t\t<div className=\"mf-input-wrapper\">\r\n\t\t\t\t\t\t\t<label className=\"mf-input-label\" htmlFor=\"mf-input-email-752b6f44\">\r\n\t\t\t\t\t${ parent.decodeEntities(`Email Address`) } \t\t\t\t\t<span className=\"mf-input-required-indicator\">*<\/span>\r\n\t\t\t\t<\/label>\r\n\t\t\t\r\n\t\t\t<input \r\n\t\t\t\ttype=\"email\" \r\n\t\t\t\t \r\n\t\t\t\tdefaultValue=\"\" \r\n\t\t\t\tclassName=\"mf-input mf-conditional-input\" \r\n\t\t\t\tid=\"mf-input-email-752b6f44\" \r\n\t\t\t\tname=\"mf-email\" \r\n\t\t\t\tplaceholder=\"${ parent.decodeEntities(`Add email`) } \" \r\n\t\t\t\t \r\n\t\t\t\tonBlur=${parent.handleChange} onFocus=${parent.handleChange} aria-invalid=${validation.errors['mf-email'] ? 'true' : 'false' } \r\n\t\t\t\tref=${el=> parent.activateValidation({\"message\":\"This field is required.\",\"emailMessage\":\"Please enter a valid Email address\",\"minLength\":1,\"maxLength\":\"\",\"type\":\"none\",\"required\":true,\"expression\":\"null\"}, el)}\r\n\t\t\t\t\t\t\t\/>\r\n\r\n\t\t\t\t\t\t<${validation.ErrorMessage} \r\n\t\t\t\terrors=${validation.errors} \r\n\t\t\t\tname=\"mf-email\" \r\n\t\t\t\tas=${html`<span className=\"mf-error-message\"><\/span>`}\r\n\t\t\t\/>\r\n\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<div className=\"elementor-element elementor-element-afa9524 elementor-widget elementor-widget-mf-telephone\" data-id=\"afa9524\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;mf_input_name&quot;:&quot;mf-telephone&quot;}\" data-widget_type=\"mf-telephone.default\">\n\t\t\t\t\t\n\t\t<div className=\"mf-input-wrapper\">\n\t\t\t\t\t\t\t<label className=\"mf-input-label\" htmlFor=\"mf-input-telephone-afa9524\">\n\t\t\t\t\t${ parent.decodeEntities(`Mobile Number`) } \t\t\t\t\t<span className=\"mf-input-required-indicator\">*<\/span>\n\t\t\t\t<\/label>\n\t\t\t\n\t\t\t<input\n\t\t\t\ttype=\"tel\"\n\t\t\t\tclassName=\"mf-input \"\n\t\t\t\tid=\"mf-input-telephone-afa9524\" \n\t\t\t\tname=\"mf-telephone\"\n\t\t\t\tplaceholder=\"${ parent.decodeEntities(`Telephone`) } \"\n\t\t\t\t\t\t\t\t\tonInput=${parent.handleChange}\n\t\t\t\t\taria-invalid=${validation.errors['mf-telephone'] ? 'true' : 'false'}\n\t\t\t\t\tref=${el => parent.activateValidation({\"message\":\"This field is required.\",\"minLength\":1,\"maxLength\":\"\",\"type\":\"none\",\"required\":true,\"expression\":\"null\"}, el)}\n\t\t\t\t\t\t\t\t\/>\n\t\t\t\n\t\t\t\t\t\t\t<${validation.ErrorMessage}\n\t\t\t\t\terrors=${validation.errors}\n\t\t\t\t\tname=\"mf-telephone\"\n\t\t\t\t\tas=${html`<span className=\"mf-error-message\"><\/span>`}\n\t\t\t\t\t\/>\n\t\t\t\n\t\t\t\n\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div className=\"elementor-element elementor-element-a6336d2 elementor-widget__width-initial elementor-widget elementor-widget-mf-select\" data-id=\"a6336d2\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;mf_input_name&quot;:&quot;mf-select&quot;,&quot;mf_input_list&quot;:[{&quot;mf_input_option_text&quot;:&quot;Web Design &amp; Development&quot;,&quot;mf_input_option_value&quot;:&quot;value-1&quot;,&quot;_id&quot;:&quot;0275e59&quot;,&quot;mf_input_option_status&quot;:&quot;&quot;,&quot;mf_input_option_selected&quot;:&quot;&quot;},{&quot;mf_input_option_text&quot;:&quot;Mobile App Development&quot;,&quot;mf_input_option_value&quot;:&quot;value-2&quot;,&quot;_id&quot;:&quot;cad67d2&quot;,&quot;mf_input_option_status&quot;:&quot;&quot;,&quot;mf_input_option_selected&quot;:&quot;&quot;},{&quot;mf_input_option_text&quot;:&quot;Hire a Remote Developers&quot;,&quot;mf_input_option_value&quot;:&quot;value-3&quot;,&quot;_id&quot;:&quot;a9be6fc&quot;,&quot;mf_input_option_status&quot;:&quot;&quot;,&quot;mf_input_option_selected&quot;:&quot;&quot;},{&quot;_id&quot;:&quot;6b7e86c&quot;,&quot;mf_input_option_text&quot;:&quot;Media Services&quot;,&quot;mf_input_option_value&quot;:&quot;Value-4&quot;,&quot;mf_input_option_status&quot;:&quot;&quot;,&quot;mf_input_option_selected&quot;:&quot;&quot;}]}\" data-widget_type=\"mf-select.default\">\n\t\t\t\t\t\n\t\t\n\t\t<div className=\"mf-input-wrapper\">\n\t\t\t\t\t\t\t<label className=\"mf-input-label\" htmlFor=\"mf-input-select-a6336d2\">\n\t\t\t\t\t${ parent.decodeEntities(`Services`) } \t\t\t\t\t<span className=\"mf-input-required-indicator\">*<\/span>\n\t\t\t\t<\/label>\n            \n            <${props.Select}\n                className=${\"mf-input mf-input-select  \" + ( validation.errors['mf-select'] ? 'mf-invalid' : '' )}\n                classNamePrefix=\"mf_select\"\n                name=\"mf-select\"\n                placeholder=\"${ parent.decodeEntities(`Select service`) } \"\n                isSearchable=${false}\n                options=${[{\"label\":\"Web Design & Development\",\"value\":\"value-1\",\"isDisabled\":false},{\"label\":\"Mobile App Development\",\"value\":\"value-2\",\"isDisabled\":false},{\"label\":\"Hire a Remote Developers\",\"value\":\"value-3\",\"isDisabled\":false},{\"label\":\"Media Services\",\"value\":\"Value-4\",\"isDisabled\":false}]}\n                value=${parent.getValue(\"mf-select\") ? [{\"label\":\"Web Design & Development\",\"value\":\"value-1\",\"isDisabled\":false},{\"label\":\"Mobile App Development\",\"value\":\"value-2\",\"isDisabled\":false},{\"label\":\"Hire a Remote Developers\",\"value\":\"value-3\",\"isDisabled\":false},{\"label\":\"Media Services\",\"value\":\"Value-4\",\"isDisabled\":false}].filter(item => item.value === parent.getValue(\"mf-select\"))[0] : []}\n                onChange=${(e)=> parent.handleSelect(e, \"mf-select\")}\n                ref=${() => {\n\t\t\t\t                    register({ name: \"mf-select\" }, parent.activateValidation({\"message\":\"This field is required.\",\"minLength\":1,\"maxLength\":\"\",\"type\":\"none\",\"required\":true}));\n                    if ( parent.getValue(\"mf-select\") === '' && false ) {\n\t\t\t\t    parent.setValue( 'mf-select', '', true );\n                        parent.handleChange({\n                            target: {\n                                name: 'mf-select',\n                                value: ''\n                            }\n                        });\n                    }\n                }}\n                \/>\n\n            \t\t\t\t<${validation.ErrorMessage}\n\t\t\t\t\terrors=${validation.errors}\n\t\t\t\t\tname=\"mf-select\"\n\t\t\t\t\tas=${html`<span className=\"mf-error-message\"><\/span>`}\n\t\t\t\t\t\/>\n\t\t\t\t\t\t\t\t<\/div>\n\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div className=\"elementor-element elementor-element-13f46608 elementor-widget__width-inherit elementor-widget elementor-widget-mf-textarea\" data-id=\"13f46608\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;mf_input_name&quot;:&quot;mf-comment&quot;}\" data-widget_type=\"mf-textarea.default\">\n\t\t\t\t\t\r\n\t\t<div className=\"mf-input-wrapper\">\r\n\t\t\t\t\t\t\t<label className=\"mf-input-label\" htmlFor=\"mf-input-text-area-13f46608\">\r\n\t\t\t\t\t${ parent.decodeEntities(`Comments \/ Questions`) } \t\t\t\t\t<span className=\"mf-input-required-indicator\">*<\/span>\r\n\t\t\t\t<\/label>\r\n\t\t\t\r\n\t\t\t<textarea className=\"mf-input mf-textarea mf-conditional-input\" id=\"mf-input-text-area-13f46608\"\r\n\t\t\t\tname=\"mf-comment\" \r\n\t\t\t\tplaceholder=\"${ parent.decodeEntities(`Comments`) } \"\r\n\t\t\t\tcols=\"30\" rows=\"10\"\r\n\t\t\t\t\t\t\t\t\tonInput=${ parent.handleChange }\r\n\t\t\t\t\taria-invalid=${validation.errors['mf-comment'] ? 'true' : 'false'}\r\n\t\t\t\t\tref=${ el => parent.activateValidation({\"message\":\"This field is required.\",\"minLength\":1,\"maxLength\":\"\",\"type\":\"none\",\"required\":true,\"expression\":\"null\"}, el)}\r\n\t\t\t\t\t\t\t\t><\/textarea>\r\n\r\n\t\t\t\t\t\t\t<${validation.ErrorMessage}\r\n\t\t\t\t\terrors=${validation.errors}\r\n\t\t\t\t\tname=\"mf-comment\"\r\n\t\t\t\t\tas=${html`<span className=\"mf-error-message\"><\/span>`}\r\n\t\t\t\t\t\/>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div className=\"elementor-element elementor-element-54379b03 elementor-widget__width-auto elementor-widget elementor-widget-mf-button\" data-id=\"54379b03\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"mf-button.default\">\n\t\t\t\t\t\t\t\t\t\t<input type=\"hidden\" name=\"mf-hidden-input-name\" className=\"mf_hidden_input_class\" value=\"mf_hidden_input_value\" ref=${parent.setDefault} \/>\r\n\t\t\t\t\t\t<div className=\"mf-btn-wraper mf-conditional-input\" data-mf-form-conditional-logic-requirement=\"\">\r\n\t\t\t\t\t\t\t<button type=\"submit\" className=\"metform-btn metform-submit-btn \" id=\"\">\r\n\t\t\t\t\t<span>${ parent.decodeEntities(`Send Message`) } <\/span>\r\n\t\t\t\t<\/button>\r\n\t\t\t        <\/div>\r\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t`}\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\t${is_dummy_markup ? message_position === 'bottom' ? props.ResponseDummyMarkup(message_successIcon, message_proClass) : '' : ''}\r\n\t\t\t\t\t${is_dummy_markup ? ' ' : message_position === 'bottom' ? props.SubmitResponseMarkup`${parent}${state}${message_successIcon}${message_errorIcon}${message_proClass}` : ''}\r\n\t\t\t\t\r\n\t\t\t\t<\/form>\r\n\t\t\t`\r\n\t\t<\/script>\r\n\r\n\t\t<\/div><\/div>\n\t\t\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<div class=\"elementor-element elementor-element-5a8a701 e-con-full e-flex e-con e-child\" data-id=\"5a8a701\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-967bbb6 e-flex e-con-boxed e-con e-child\" data-id=\"967bbb6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-51b5cc1 e-flex e-con-boxed e-con e-child\" data-id=\"51b5cc1\" 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-3bf7d0f elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-icon-box\" data-id=\"3bf7d0f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-box.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-box-wrapper\">\n\n\t\t\t\n\t\t\t\t\t\t<div class=\"elementor-icon-box-content\">\n\n\t\t\t\t\t\t\t\t\t<h3 class=\"elementor-icon-box-title\">\n\t\t\t\t\t\t<span  >\n\t\t\t\t\t\t\tPhones\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<p class=\"elementor-icon-box-description\">\n\t\t\t\t\t\t+1786 840-0980\n\t\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c368326 elementor-widget-mobile__width-auto elementor-widget elementor-widget-image\" data-id=\"c368326\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"119\" height=\"118\" src=\"https:\/\/smartboxmedia.co\/wp-content\/uploads\/2026\/04\/icon-7.png\" class=\"attachment-large size-large wp-image-20\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-12a1abe e-flex e-con-boxed e-con e-child\" data-id=\"12a1abe\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-b29864b e-flex e-con-boxed e-con e-child\" data-id=\"b29864b\" 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-35e82b9 elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-icon-box\" data-id=\"35e82b9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-box.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-box-wrapper\">\n\n\t\t\t\n\t\t\t\t\t\t<div class=\"elementor-icon-box-content\">\n\n\t\t\t\t\t\t\t\t\t<h3 class=\"elementor-icon-box-title\">\n\t\t\t\t\t\t<span  >\n\t\t\t\t\t\t\tAddress\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<p class=\"elementor-icon-box-description\">\n\t\t\t\t\t\tTexas (TX), USA\t\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4451bb8 elementor-widget-mobile__width-auto elementor-widget elementor-widget-image\" data-id=\"4451bb8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"119\" height=\"118\" src=\"https:\/\/smartboxmedia.co\/wp-content\/uploads\/2026\/04\/icon-8.png\" class=\"attachment-large size-large wp-image-21\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b57ecab e-con-full e-flex e-con e-child\" data-id=\"b57ecab\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-13a14c4 e-flex e-con-boxed e-con e-child\" data-id=\"13a14c4\" 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-cf3e8d5 elementor-widget__width-initial elementor-widget-mobile__width-auto elementor-widget elementor-widget-icon-box\" data-id=\"cf3e8d5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-box.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-box-wrapper\">\n\n\t\t\t\n\t\t\t\t\t\t<div class=\"elementor-icon-box-content\">\n\n\t\t\t\t\t\t\t\t\t<h3 class=\"elementor-icon-box-title\">\n\t\t\t\t\t\t<span  >\n\t\t\t\t\t\t\tEmails\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<p class=\"elementor-icon-box-description\">\n\t\t\t\t\t\tsales@smartboxmedia.co\t\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1fbef82 elementor-widget-mobile__width-auto elementor-widget elementor-widget-image\" data-id=\"1fbef82\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"119\" height=\"118\" src=\"https:\/\/smartboxmedia.co\/wp-content\/uploads\/2026\/04\/icon-9.png\" class=\"attachment-large size-large wp-image-22\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\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\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n    <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content  wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n        <ul>\n\t\t\t        <\/ul>\n    <\/div> \n","protected":false},"excerpt":{"rendered":"<p>Global IT &amp; Software Development Attract More Customerswith a Stunning Website Smartbox Media American INC. is a global IT and software development company specializing in mobile apps, web solutions, and emerging technologies like AI and blockchain \u2014 delivering innovative, scalable digital solutions to businesses worldwide. Schedule a Consultation View Our Services 4.9\/5.0 Client Rating 300+ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"frontpage.php","meta":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"footnotes":""},"class_list":["post-25","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/smartboxmedia.co\/index.php\/wp-json\/wp\/v2\/pages\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smartboxmedia.co\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smartboxmedia.co\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smartboxmedia.co\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smartboxmedia.co\/index.php\/wp-json\/wp\/v2\/comments?post=25"}],"version-history":[{"count":30,"href":"https:\/\/smartboxmedia.co\/index.php\/wp-json\/wp\/v2\/pages\/25\/revisions"}],"predecessor-version":[{"id":215,"href":"https:\/\/smartboxmedia.co\/index.php\/wp-json\/wp\/v2\/pages\/25\/revisions\/215"}],"wp:attachment":[{"href":"https:\/\/smartboxmedia.co\/index.php\/wp-json\/wp\/v2\/media?parent=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}