{"id":9,"date":"2026-01-10T14:45:37","date_gmt":"2026-01-10T14:45:37","guid":{"rendered":"http:\/\/madviomedia.com\/?page_id=9"},"modified":"2026-02-12T19:46:02","modified_gmt":"2026-02-12T19:46:02","slug":"home","status":"publish","type":"page","link":"https:\/\/madviomedia.com\/","title":{"rendered":"HOME"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\nHero Section<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n*{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n font-family:'Inter', sans-serif;\r\n}\r\n\r\nbody{\r\n background:transparent;\r\n}\r\n\r\n\/* =====================\r\n DESKTOP \/ DEFAULT\r\n ===================== *\/\r\n.hero{\r\n min-height:100vh;\r\n display:flex;\r\n align-items:center;\r\n justify-content:flex-start;\r\n padding:80px;\r\n background:transparent;\r\n color:#fff;\r\n}\r\n\r\n.hero-content{\r\n max-width:700px;\r\n}\r\n\r\n.hero h1{\r\n font-size:46px;\r\n line-height:1.2;\r\n font-weight:800;\r\n}\r\n\r\n.hero h1 .white{\r\n color:#ffffff;\r\n}\r\n\r\n.hero h1 .blue{\r\n color:#2f7bff;\r\n}\r\n\r\n\/* BUTTON *\/\r\n.hero-btn{\r\n margin-top:40px;\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n padding:14px 36px;\r\n border-radius:40px;\r\n border:1px solid rgba(255,255,255,0.3);\r\n background:rgba(255,255,255,0.05);\r\n backdrop-filter: blur(10px);\r\n color:#fff;\r\n font-size:16px;\r\n transition:0.3s ease;\r\n text-decoration:none !important;\r\n}\r\n\r\n.hero-btn:hover{\r\n background:#fff;\r\n color:#000;\r\n box-shadow:0 0 20px rgba(255,255,255,0.4);\r\n}\r\n\r\n\/* =====================\r\n MOBILE ONLY FIX\r\n ===================== *\/\r\n@media (max-width:668px){\r\n\r\n .hero{\r\n min-height:auto; \/* full screen stretch band *\/\r\n padding:60px 20px 50px;\r\n align-items:flex-start;\r\n }\r\n\r\n .hero-content{\r\n max-width:100%;\r\n }\r\n\r\n .hero h1{\r\n font-size:30px;\r\n line-height:1.25;\r\n\r\n \/* \ud83d\udd25 TEXT BREAK FIX *\/\r\n word-break: normal;\r\n overflow-wrap: normal;\r\n white-space: normal;\r\n }\r\n\r\n \/* \ud83d\udd27 <br> MOBILE CONTROL *\/\r\n .hero h1 br{\r\n display:none;\r\n }\r\n\r\n \/* \ud83d\udd25 BUTTON MOBILE FIX *\/\r\n .hero-btn{\r\n margin-top:2px;\r\n\r\n white-space:nowrap; \/* text single line *\/\r\n width:auto;\r\n min-width:220px; \/* pill shape maintain *\/\r\n\r\n padding:14px 28px;\r\n font-size:15px;\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<section class=\"hero\">\r\n <div class=\"hero-content\">\r\n <h1>\r\n <span class=\"white\">We<br> don\u2019t outsource productivity,<\/span><br>\r\n <span class=\"blue\">WE PRODUCE IT.<\/span>\r\n <\/h1>\r\n\r\n <a href=\"http:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/Madvio-Media-Pitch-Deck.pdf\"target=\"blank\"rel=\"noopener noreferrer\"class=\"hero-btn\">\r\n Let's build your brand !\r\n <\/a>\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\r\n\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-f1e38ac e-con-full e-flex e-con e-child\" data-id=\"f1e38ac\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-d259bf8 e-con-full e-flex e-con e-child\" data-id=\"d259bf8\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t<div class=\"elementor-element elementor-element-8b65ee4 e-con-full e-flex e-con e-child\" data-id=\"8b65ee4\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a04ba26 elementor-absolute elementor-widget elementor-widget-image\" data-id=\"a04ba26\" data-element_type=\"widget\" data-settings=\"{"_position":"absolute"}\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/01\/arrow-1.png\" title=\"arrow\" alt=\"arrow\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\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-5083460 e-con-full e-flex e-con e-child\" data-id=\"5083460\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0e99159 elementor-absolute elementor-widget elementor-widget-heading\" data-id=\"0e99159\" data-element_type=\"widget\" data-settings=\"{"_position":"absolute"}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">We are transparent <br> just like jellyfish..<\/h6>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cfd9a55 elementor-invisible elementor-widget elementor-widget-html\" data-id=\"cfd9a55\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight"}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Transparent Card UI<\/title>\r\n\r\n<style>\r\n*{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n font-family:\"Segoe UI\", Helvetica, Arial, sans-serif;\r\n}\r\n\r\nbody{\r\n background:transparent;\r\n color:#fff;\r\n}\r\n\r\n\/* =====================\r\n DESKTOP (AS IT IS)\r\n ===================== *\/\r\n.section.jelly-section{\r\n min-height:100vh;\r\n display:flex;\r\n align-items:center;\r\n gap:70px;\r\n padding:80px;\r\n position:relative;\r\n}\r\n\r\n\/* ICONS (DESKTOP ONLY) *\/\r\n.icons{\r\n position:relative;\r\n width:140px;\r\n height:180px;\r\n}\r\n\r\n.icon-box{\r\n width:54px;\r\n height:54px;\r\n border:1px solid rgba(255,255,255,.35);\r\n border-radius:14px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n font-size:16px;\r\n color:#fff;\r\n backdrop-filter:blur(6px);\r\n position:absolute;\r\n cursor:pointer;\r\n\r\n \/* \ud83d\udd25 underline remove *\/\r\n text-decoration:none;\r\n}\r\n\r\n.icon-box:hover,\r\n.icon-box:focus,\r\n.icon-box:active{\r\n text-decoration:none;\r\n}\r\n\r\n\/* LinkedIn *\/\r\n.icon-box.in{ top:12px; left:36px; }\r\n\r\n\/* X *\/\r\n.icon-box.x{ top:70px; left:6px; }\r\n\r\n\/* Instagram \u2014 X ke neeche, corner right *\/\r\n.icon-box.ig{\r\n top:70px;\r\n left:66px;\r\n}\r\n\r\n\/* CARD *\/\r\n.jelly-section .card{\r\n background:#ffffff !important;\r\n border-radius:32px;\r\n padding:40px 32px;\r\n max-width:250px;\r\n min-height:370px;\r\n display:flex;\r\n flex-direction:column;\r\n justify-content:space-between;\r\n box-shadow:0 30px 60px rgba(0,0,0,.18);\r\n}\r\n\r\n\/* FORCE TEXT BLACK *\/\r\n.jelly-section .card,\r\n.jelly-section .card *{\r\n color:#000 !important;\r\n}\r\n\r\n\/* IMAGE *\/\r\n.card-image{\r\n border-radius:18px;\r\n overflow:hidden;\r\n}\r\n\r\n.card-image img{\r\n width:100%;\r\n display:block;\r\n}\r\n\r\n\/* CONTENT *\/\r\n.card-content{\r\n padding:18px 10px;\r\n text-align:center;\r\n}\r\n\r\n\/* GRAPH *\/\r\n.mini-graph svg{\r\n width:100%;\r\n height:90px;\r\n}\r\n\r\n.mini-graph path{\r\n stroke:#3b6cff;\r\n stroke-width:3;\r\n fill:none;\r\n stroke-linecap:round;\r\n stroke-linejoin:round;\r\n stroke-dasharray:400;\r\n stroke-dashoffset:400;\r\n animation:drawLine 6s ease forwards;\r\n}\r\n\r\n.graph-label{\r\n font-size:13px;\r\n font-weight:600;\r\n margin-top:6px;\r\n}\r\n\r\n.star{ font-size:20px; margin:14px 0; }\r\n.desc{ font-size:12.5px; line-height:1.4; }\r\n\r\n\/* AVATARS *\/\r\n.avatars{\r\n display:flex;\r\n justify-content:center;\r\n margin-top:14px;\r\n}\r\n\r\n.avatars img{\r\n width:30px;\r\n height:30px;\r\n border-radius:50%;\r\n border:2px solid #fff;\r\n margin-left:-8px;\r\n}\r\n\r\n\/* =====================\r\n MOBILE FIX ONLY\r\n ===================== *\/\r\n@media (max-width:768px){\r\n\r\n .section.jelly-section{\r\n min-height:auto !important;\r\n padding:40px 20px !important;\r\n gap:30px;\r\n overflow:hidden;\r\n }\r\n\r\n \/* \ud83d\udd25 ICONS HIDE ON MOBILE *\/\r\n .icons{\r\n display:none !important;\r\n }\r\n\r\n \/* CARD CENTER *\/\r\n .jelly-section .card{\r\n width:92% !important;\r\n max-width:360px;\r\n margin:0 auto;\r\n padding:26px 20px;\r\n border-radius:24px;\r\n position:relative;\r\n z-index:5;\r\n }\r\n\r\n \/* JELLYFISH BACKGROUND *\/\r\n .card-image{\r\n position:absolute;\r\n top:-50px;\r\n left:50%;\r\n transform:translateX(-50%);\r\n width:90%;\r\n max-width:320px;\r\n opacity:.35;\r\n z-index:1;\r\n pointer-events:none;\r\n }\r\n\r\n .card-image img{\r\n width:100%;\r\n height:auto;\r\n }\r\n}\r\n\r\n\/* GRAPH ANIMATION *\/\r\n@keyframes drawLine{\r\n to{ stroke-dashoffset:0; }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<section class=\"section jelly-section\">\r\n\r\n <!-- ICONS (DESKTOP ONLY) -->\r\n <div class=\"icons\">\r\n <a href=\"https:\/\/www.linkedin.com\/in\/madvio-media-3402363a2\/\"\r\n target=\"_blank\" class=\"icon-box in\" aria-label=\"LinkedIn\">\r\n in\r\n <\/a>\r\n\r\n <a href=\"https:\/\/x.com\/Madvio_Media\"\r\n target=\"_blank\" class=\"icon-box x\" aria-label=\"X\">\r\n X\r\n <\/a>\r\n\r\n <a href=\"https:\/\/www.instagram.com\/madvio_media?igsh=MW83ZGR3ZnJwdjY1OQ==\"\r\n target=\"_blank\" class=\"icon-box ig\" aria-label=\"Instagram\">\r\n IG\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"card\">\r\n <div class=\"card-image\">\r\n <img decoding=\"async\" src=\"YOUR_JELLYFISH_IMAGE_URL\" alt=\"\">\r\n <\/div>\r\n\r\n <div class=\"card-content\">\r\n\r\n <div class=\"mini-graph\">\r\n <svg viewBox=\"0 0 220 120\">\r\n <line x1=\"20\" y1=\"10\" x2=\"20\" y2=\"100\" stroke=\"#999\" stroke-width=\"2\"\/>\r\n <line x1=\"20\" y1=\"100\" x2=\"210\" y2=\"100\" stroke=\"#999\" stroke-width=\"2\"\/>\r\n <path d=\"M30 85 C70 30,120 30,135 60 C150 90,185 85,210 35\"\/>\r\n <circle cx=\"210\" cy=\"35\" r=\"5\" fill=\"#3b6cff\"\/>\r\n <circle cx=\"30\" cy=\"85\" r=\"5\" fill=\"#3b6cff\"\/>\r\n <\/svg>\r\n <span class=\"graph-label\">Your growth<\/span>\r\n <\/div>\r\n\r\n <div class=\"star\">\u2726<\/div>\r\n\r\n <p class=\"desc\">\r\n We know how to get<br>\r\n leads without blowing<br>\r\n your budget\r\n <\/p>\r\n\r\n <div class=\"avatars\">\r\n <img decoding=\"async\" src=\"https:\/\/i.pravatar.cc\/100?img=1\">\r\n <img decoding=\"async\" src=\"https:\/\/i.pravatar.cc\/100?img=2\">\r\n <img decoding=\"async\" src=\"https:\/\/i.pravatar.cc\/100?img=3\">\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\r\n\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<div class=\"elementor-element elementor-element-a449ce9 e-con-full section-2 e-flex e-con e-parent\" data-id=\"a449ce9\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t<div class=\"elementor-element elementor-element-bb1e24c e-con-full elementor-hidden-mobile e-flex e-con e-child\" data-id=\"bb1e24c\" data-element_type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-974c5b1 e-con-full e-flex e-con e-child\" data-id=\"974c5b1\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-947fddf white-heading elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"947fddf\" data-element_type=\"widget\" data-settings=\"{"_animation":"slideInDown"}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\"> The Thinking Behind <\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eaf0d45 elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"eaf0d45\" data-element_type=\"widget\" data-settings=\"{"_animation":"slideInDown"}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Madvio<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f4548d9 elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"f4548d9\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_animation_delay":10}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Stop wasting time juggling five different freelancers who don\u2019t talk to each other and wondering why your brand feels like a mess. We\u2019ve killed the “scattered agency” model to give you one unified ecosystem\u2014branding, motion, and tech\u2014that actually scales without the bullshit. If you want a brand that survives the noise and actually lasts, let\u2019s stop playing around and build it.<\/p>\t\t\t\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-354f52f e-con-full e-flex e-con e-parent\" data-id=\"354f52f\" data-element_type=\"container\" data-settings=\"{"background_background":"classic","animation":"none"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0f7038a elementor-invisible elementor-widget elementor-widget-html\" data-id=\"0f7038a\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInUp"}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Why to choose us \u2013 Jellyfish Cards<\/title>\r\n\r\n<!-- Premium Google Font -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n*{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n font-family:\"Inter\", sans-serif;\r\n}\r\n\r\nbody{\r\n background:#000;\r\n}\r\n\r\n\/* SECTION *\/\r\n.choose-us{\r\n padding:120px 80px;\r\n background:#000;\r\n}\r\n\r\n\/* HEADING (UPGRADED) *\/\r\n.choose-us h2{\r\n text-align:center;\r\n font-size:82px;\r\n font-weight:700;\r\n letter-spacing:-1.5px;\r\n margin-bottom:90px;\r\n color:#ffffff; \/* pure white *\/\r\n}\r\n\r\n@keyframes grad{\r\n 0%{background-position:0% 50%}\r\n 100%{background-position:100% 50%}\r\n}\r\n\r\n\/* GRID *\/\r\n.choose-grid{\r\n display:grid;\r\n grid-template-columns:repeat(4,1fr);\r\n gap:40px;\r\n}\r\n\r\n\/* CARD *\/\r\n.card{\r\n border-radius:26px;\r\n padding:30px;\r\n height:260px;\r\n cursor:pointer;\r\n color:#eaf6ff;\r\n transition:.35s ease;\r\n\r\n background:\r\n radial-gradient(circle at top left, rgba(120,200,255,.35), transparent 45%),\r\n linear-gradient(135deg,#061a2f,#0b3c66,#1b7cb8);\r\n\r\n box-shadow:\r\n 0 20px 40px rgba(0,0,0,.4),\r\n inset 0 0 40px rgba(120,200,255,.15);\r\n}\r\n\r\n.card:hover{\r\n transform:translateY(-10px) scale(1.02);\r\n box-shadow:\r\n 0 35px 70px rgba(0,0,0,.6),\r\n 0 0 50px rgba(120,200,255,.45);\r\n}\r\n\r\n.card h3{ font-size:22px; margin-bottom:10px; }\r\n.card p{ font-size:14px; opacity:.85; }\r\n\r\n\/* OVERLAY *\/\r\n.overlay{\r\n position:fixed;\r\n inset:0;\r\n background:rgba(0,0,0,.65);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n opacity:0;\r\n pointer-events:none;\r\n transition:.4s ease;\r\n z-index:9999;\r\n}\r\n\r\n.overlay.active{\r\n opacity:1;\r\n pointer-events:auto;\r\n}\r\n\r\n\/* EXPANDED BOX *\/\r\n.overlay-box{\r\n width:70%;\r\n height:70%;\r\n border-radius:32px;\r\n overflow:hidden;\r\n background:linear-gradient(135deg,#061a2f,#0b3c66,#1b7cb8);\r\n box-shadow:\r\n 0 60px 120px rgba(0,0,0,.7),\r\n 0 0 80px rgba(120,200,255,.35);\r\n transform:scale(.9);\r\n transition:.4s ease;\r\n}\r\n\r\n.overlay.active .overlay-box{\r\n transform:scale(1);\r\n}\r\n\r\n.overlay-box img{\r\n width:100%;\r\n height:100%;\r\n object-fit:contain;\r\n}\r\n\r\n\/* RESPONSIVE *\/\r\n@media(max-width:1024px){\r\n .choose-grid{ grid-template-columns:repeat(2,1fr); }\r\n}\r\n@media(max-width:768px){\r\n .choose-grid{ grid-template-columns:1fr; }\r\n .choose-us h2{ font-size:42px; }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<section class=\"choose-us\">\r\n <h2>Why to choose us<\/h2>\r\n\r\n <div class=\"choose-grid\">\r\n <div class=\"card\" data-img=\"http:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/web-Design-1.png\">\r\n <h3>Website Development<\/h3>\r\n <p>Conversion-focused websites<\/p>\r\n <\/div>\r\n\r\n <div class=\"card\" data-img=\"http:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/Branding.png\">\r\n <h3>Branding Strategy<\/h3>\r\n <p>Identity & positioning<\/p>\r\n <\/div>\r\n\r\n <div class=\"card\" data-img=\"http:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/UIUX.png\">\r\n <h3>UI \/ UX <\/h3>\r\n <p>Premium user experience<\/p>\r\n <\/div>\r\n\r\n <div class=\"card\" data-img=\"http:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/SEO.png\">\r\n <h3>SEO Optimization<\/h3>\r\n <p>Organic growth<\/p>\r\n <\/div>\r\n\r\n <div class=\"card\" data-img=\"http:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/Ad-camp.png\">\r\n <h3>Ad Campaigns<\/h3>\r\n <p>ROI-driven ads<\/p>\r\n <\/div>\r\n\r\n <div class=\"card\" data-img=\"http:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/Social-media.png\">\r\n <h3>Social Media Growth<\/h3>\r\n <p>Reach & authority<\/p>\r\n <\/div>\r\n\r\n <div class=\"card\" data-img=\"http:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/Copywriting.png\">\r\n <h3>Creative Copywriting<\/h3>\r\n <p>Words that convert<\/p>\r\n <\/div>\r\n\r\n <div class=\"card\" data-img=\"http:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/App-dev-1.png\">\r\n <h3>Full Digital Launch<\/h3>\r\n <p>End-to-end execution<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- OVERLAY -->\r\n<div class=\"overlay\" id=\"overlay\">\r\n <div class=\"overlay-box\">\r\n <img id=\"overlayImg\">\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst cards = document.querySelectorAll(\".card\");\r\nconst overlay = document.getElementById(\"overlay\");\r\nconst overlayImg = document.getElementById(\"overlayImg\");\r\n\r\n\/* CLICK TO EXPAND *\/\r\ncards.forEach(card=>{\r\n card.addEventListener(\"click\",()=>{\r\n overlayImg.src = card.dataset.img;\r\n overlay.classList.add(\"active\");\r\n });\r\n});\r\n\r\n\/* CLICK ANYWHERE TO CLOSE *\/\r\noverlay.addEventListener(\"click\",()=>{\r\n overlay.classList.remove(\"active\");\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-73625a6 e-con-full e-flex e-con e-parent\" data-id=\"73625a6\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-92028b3 elementor-widget elementor-widget-html\" data-id=\"92028b3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;700;800&display=swap');\r\n\r\n\/* =====================\r\n DESKTOP (AS IT IS)\r\n ===================== *\/\r\n\r\n.octo-wrapper {\r\n background-color: #05080F;\r\n background-image: radial-gradient(circle at 80% 20%, rgba(59,108,255,0.25) 0%, transparent 40%);\r\n padding: 80px 40px;\r\n font-family: 'Inter', sans-serif;\r\n color: white;\r\n min-height: 800px;\r\n}\r\n\r\n\/* Header *\/\r\n.octo-header {\r\n display: flex;\r\n justify-content: space-between;\r\n max-width: 1100px;\r\n margin: 0 auto 50px;\r\n align-items: flex-start;\r\n}\r\n\r\n.octo-header h2 {\r\n font-size: 56px;\r\n font-weight: 400;\r\n line-height: 0.9;\r\n margin: 0;\r\n letter-spacing: -2px;\r\n}\r\n\r\n.octo-header .services {\r\n font-weight: 800;\r\n display: block;\r\n color: #3B6CFF;\r\n}\r\n\r\n.white-text { color:#fff; font-weight:400; }\r\n\r\n.octo-header p {\r\n font-size: 24px;\r\n margin: 0;\r\n max-width: 250px;\r\n opacity: 0.7;\r\n}\r\n\r\n\/* Grid *\/\r\n.bento-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n grid-auto-rows: 220px;\r\n gap: 25px;\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n}\r\n\r\n\/* Cards *\/\r\n.bento-card {\r\n border-radius: 28px;\r\n padding: 35px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n transition: 1s ease;\r\n opacity: 0;\r\n}\r\n\r\n\/* Hover desktop only *\/\r\n.bento-card:hover {\r\n transform: translateY(-6px) scale(1.02);\r\n box-shadow: 0 0 30px rgba(59,108,255,0.4);\r\n}\r\n\r\n.card-num {\r\n font-size: 42px;\r\n font-weight: 800;\r\n margin-bottom: 20px;\r\n}\r\n\r\n.bento-card h3 {\r\n font-size: 20px;\r\n margin: 0;\r\n line-height: 1.25;\r\n}\r\n\r\n\/* Variants *\/\r\n.card-white { background:#fff; color:#000; }\r\n.card-white .card-num { color:#3B6CFF; }\r\n\r\n.card-pink {\r\n background: linear-gradient(145deg,#3B6CFF,#6FA0FF);\r\n color:#fff;\r\n grid-column: span 2;\r\n padding-right:28px; \/* \ud83d\udd25 overflow safety *\/\r\n}\r\n\r\n.card-pink p {\r\n font-size: 13px;\r\n margin-top: 10px;\r\n line-height:1.4;\r\n}\r\n\r\n.card-dark {\r\n background:#0B1020;\r\n color:#fff;\r\n border:1px solid rgba(255,255,255,0.1);\r\n}\r\n.card-dark .card-num { color:#3B6CFF; }\r\n\r\n\/* \ud83d\udd25 TEXT OVERFLOW FIX (MAIN ISSUE) *\/\r\n.card-pink h3,\r\n.card-pink p{\r\n max-width:100%;\r\n word-break:break-word;\r\n overflow-wrap:break-word;\r\n}\r\n\r\n\/* Positioning *\/\r\n.item-2 { grid-column: 2 \/ 5; }\r\n.item-6 { grid-column: 1 \/ 2; }\r\n\r\n\/* Desktop scroll animation *\/\r\n.bento-card:nth-child(1){ transform:translateX(-80px); }\r\n.bento-card:nth-child(2){ transform:translateX(80px); }\r\n.bento-card:nth-child(n+3){ transform:translateY(60px); }\r\n\r\n.bento-card.active{\r\n opacity:1;\r\n transform:translate(0,0);\r\n}\r\n\r\n\/* =====================\r\n TABLET FIX (text safety)\r\n ===================== *\/\r\n@media (max-width:1024px){\r\n .card-pink{\r\n grid-column: span 1 !important;\r\n }\r\n}\r\n\r\n\/* =====================\r\n MOBILE ONLY \u2013 CLEAN & STATIC\r\n ===================== *\/\r\n@media (max-width:768px){\r\n\r\n .octo-wrapper{\r\n padding:50px 20px;\r\n min-height:auto;\r\n }\r\n\r\n .octo-header{\r\n flex-direction:column;\r\n gap:20px;\r\n margin-bottom:40px;\r\n }\r\n\r\n .octo-header h2{ font-size:36px; }\r\n .octo-header p{ font-size:16px; max-width:100%; }\r\n\r\n .bento-grid{\r\n grid-template-columns:1fr;\r\n gap:20px;\r\n }\r\n\r\n .item-2,\r\n .item-6{ grid-column:auto; }\r\n\r\n \/* \ud83d\udd25 Animation fully disabled on mobile *\/\r\n .bento-card{\r\n opacity:1 !important;\r\n transform:none !important;\r\n transition:none !important;\r\n }\r\n\r\n .bento-card:hover{\r\n transform:none !important;\r\n box-shadow:none !important;\r\n }\r\n\r\n .card-num{ font-size:32px; }\r\n .bento-card h3{ font-size:18px; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"octo-wrapper\">\r\n <div class=\"octo-header\">\r\n <h2>\r\n <span class=\"white-text\">What Our<\/span><br>\r\n <span class=\"services\"> Client says<\/span>\r\n <\/h2>\r\n <p>\/ are the perfect solution for<\/p>\r\n <\/div>\r\n\r\n <div class=\"bento-grid\">\r\n <div class=\"bento-card card-white item-1\">\r\n <span class=\"card-num\">01<\/span>\r\n <h3>Small and Medium-Sized Businesses<\/h3>\r\n <\/div>\r\n\r\n <div class=\"bento-card card-pink item-2\">\r\n <span class=\"card-num\">02<\/span>\r\n <h3>Educational and Consulting Services<\/h3>\r\n <p>High-level targeted advertising attracts students and clients seeking professional education or consulting.<\/p>\r\n <\/div>\r\n\r\n <div class=\"bento-card card-pink item-3\">\r\n <span class=\"card-num\">03<\/span>\r\n <h3>Marketing Agencies<\/h3>\r\n <\/div>\r\n\r\n <div class=\"bento-card card-dark item-4\">\r\n <span class=\"card-num\">04<\/span>\r\n <h3>E-commerce Stores<\/h3>\r\n <\/div>\r\n\r\n <div class=\"bento-card card-white item-5\">\r\n <span class=\"card-num\">05<\/span>\r\n <h3>Corporate Clients<\/h3>\r\n <\/div>\r\n\r\n <div class=\"bento-card card-dark item-6\">\r\n <span class=\"card-num\">06<\/span>\r\n <h3>Startups<\/h3>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst observer = new IntersectionObserver((entries)=>{\r\n entries.forEach(entry=>{\r\n if(entry.isIntersecting){\r\n document.querySelectorAll(\".bento-card\").forEach((card,i)=>{\r\n setTimeout(()=>card.classList.add(\"active\"), i*180);\r\n });\r\n observer.disconnect();\r\n }\r\n });\r\n},{ threshold:0.3 });\r\n\r\nobserver.observe(document.querySelector(\".bento-grid\"));\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e9f86c9 e-con-full mdw-image-gallery-3d e-flex e-con e-parent\" data-id=\"e9f86c9\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3b0e248 elementor-widget elementor-widget-html\" data-id=\"3b0e248\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\nbody{\r\n --smooth-scroll: true;\r\n}\r\n[class^='mdw-image-gallery-3d'],\r\n[class*='mdw-image-gallery-3d']{\r\n --disabled-section-padding-top: 70px;\r\n --disabled-section-padding-bottom: 50px;\r\n}\r\n[class^='mdw-image-gallery-3d'].disabled,\r\n[class*='mdw-image-gallery-3d'].disabled{\r\n height: auto !important;\r\n padding-top: var(--disabled-section-padding-top, 70px);\r\n padding-bottom: var(--disabled-section-padding-bottom, 50px);\r\n overflow: hidden;\r\n position: relative;\r\n}\r\nhtml:not(.elementor-html) [class^='mdw-image-gallery-3d'] .elementor-widget-html,\r\nhtml:not(.elementor-html) [class*='mdw-image-gallery-3d'] .elementor-widget-html{\r\n display: none;\r\n}\r\n[class^='mdw-image-gallery-3d'] .mdw-image-gallery-inner,\r\n[class*='mdw-image-gallery-3d'] .mdw-image-gallery-inner{\r\n transform-style: preserve-3d;\r\n perspective: 750px;\r\n backface-visibility: hidden;\r\n}\r\n[class^='mdw-image-gallery-3d'] .mdw-image-gallery-bg, \r\n[class*='mdw-image-gallery-3d'] .mdw-image-gallery-bg{\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100vh;\r\n overflow: hidden;\r\n opacity: 0.6;\r\n}\r\n[class^='mdw-image-gallery-3d'].disabled .mdw-image-gallery-bg,\r\n[class*='mdw-image-gallery-3d'].disabled .mdw-image-gallery-bg{\r\n position: absolute !important;\r\n background-size: cover;\r\n background-position: center;\r\n filter: blur(50px);\r\n transform: scale(1.15);\r\n height: 100%;\r\n}\r\n[class^='mdw-image-gallery-3d'] .sticky,\r\n[class*='mdw-image-gallery-3d'] .sticky {\r\n position: fixed;\r\n top: 0;\r\n}\r\n[class^='mdw-image-gallery-3d'] .sticky-end,\r\n[class*='mdw-image-gallery-3d'] .sticky-end{\r\n position: absolute;\r\n bottom: 0;\r\n top: auto !important;\r\n}\r\n[class^='mdw-image-gallery-3d'] .mdw-image-gallery-bg img,\r\n[class*='mdw-image-gallery-3d'] .mdw-image-gallery-bg img{\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n filter: blur(50px);\r\n transform: scale(1.125); \r\n max-width: unset;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n[class^='mdw-image-gallery-3d'].disabled .mdw-image-gallery-inner,\r\n[class*='mdw-image-gallery-3d'].disabled .mdw-image-gallery-inner{\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n position: static !important;\r\n justify-content: center;\r\n gap: 12px;\r\n}\r\n[class^='mdw-image-gallery-3d'] .mdw-image-gallery-inner > .e-con,\r\n[class*='mdw-image-gallery-3d'] .mdw-image-gallery-inner > .e-con,\r\n[class^='mdw-image-gallery-3d'] .mdw-image-gallery-inner > .e-container,\r\n[class*='mdw-image-gallery-3d'] .mdw-image-gallery-inner > .e-container{\r\n opacity: 0;\r\n transition: 0s;\r\n left: 70% !important;\r\n}\r\n[class^='mdw-image-gallery-3d'].disabled .mdw-image-gallery-inner > .e-con,\r\n[class*='mdw-image-gallery-3d'].disabled .mdw-image-gallery-inner > .e-con,\r\n[class^='mdw-image-gallery-3d'].disabled .mdw-image-gallery-inner > .e-container,\r\n[class*='mdw-image-gallery-3d'].disabled .mdw-image-gallery-inner > .e-container{\r\n position: static;\r\n opacity: 1 !important;\r\n transform: none !important;\r\n}\r\nhtml.elementor-html [class^='mdw-image-gallery-3d'] .mdw-image-gallery-inner > .e-con,\r\nhtml.elementor-html [class*='mdw-image-gallery-3d'] .mdw-image-gallery-inner > .e-con,\r\nhtml.elementor-html [class^='mdw-image-gallery-3d'] .mdw-image-gallery-inner > .e-container,\r\nhtml.elementor-html [class*='mdw-image-gallery-3d'] .mdw-image-gallery-inner > .e-container{\r\n opacity: 1;\r\n}\r\n[class^='mdw-image-gallery-3d'] .mdw-image-gallery-inner > .e-con:nth-child(even),\r\n[class*='mdw-image-gallery-3d'] .mdw-image-gallery-inner > .e-con:nth-child(even),\r\n[class^='mdw-image-gallery-3d'] .mdw-image-gallery-inner > .e-container:nth-child(even),\r\n[class*='mdw-image-gallery-3d'] .mdw-image-gallery-inner > .e-container:nth-child(even){\r\n left: 30% !important;\r\n}\r\n[class^='mdw-image-gallery-3d'].disabled .mdw-image-gallery-inner .elementor-widget-image,\r\n[class*='mdw-image-gallery-3d'].disabled .mdw-image-gallery-inner .elementor-widget-image{\r\n order: -1;\r\n margin-bottom: 15px;\r\n}\r\n@media (max-width: 1024px){\r\n[class^='mdw-image-gallery-3d'] .mdw-image-gallery-inner > .e-con,\r\n[class*='mdw-image-gallery-3d'] .mdw-image-gallery-inner > .e-con,\r\n[class^='mdw-image-gallery-3d'] .mdw-image-gallery-inner > .e-container,\r\n[class*='mdw-image-gallery-3d'] .mdw-image-gallery-inner > .e-container{\r\n left: 80% !important;\r\n}\r\n[class^='mdw-image-gallery-3d'] .mdw-image-gallery-inner > .e-con:nth-child(even),\r\n[class*='mdw-image-gallery-3d'] .mdw-image-gallery-inner > .e-con:nth-child(even),\r\n[class^='mdw-image-gallery-3d'] .mdw-image-gallery-inner > .e-container:nth-child(even),\r\n[class*='mdw-image-gallery-3d'] .mdw-image-gallery-inner > .e-container:nth-child(even){\r\n left: 20% !important;\r\n}\r\n}\r\n<\/style>\r\n\r\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.4.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\r\n\r\n<script>\r\nif(!MDWNonce113){\r\nvar MDWNonce113 = true\r\n;(function($){\r\n\r\nvar selector = '[class^=\"mdw-image-gallery-3d\"], [class*=\"mdw-image-gallery-3d\"]',\r\n slides = [],\r\n options = [],\r\n galleryBgImages = [],\r\n visibleRange = [],\r\n winHeight,\r\n firstTime = true,\r\n initialZ = [],\r\n frontRange = []\r\n\r\nfunction mapRange(value, inMin, inMax, outMin, outMax){\r\n return ((value - inMin) * (outMax - outMin)) \/ (inMax - inMin) + outMin;\r\n}\r\nfunction isDisabled(){\r\n var isSafari = \/^((?!chrome|android).)*safari\/i.test(navigator.userAgent),\r\n isMobile = $(window).width() < 768,\r\n d = isSafari || isMobile\r\n d ? $(selector).addClass('disabled') : $(selector).removeClass('disabled')\r\n return d\r\n}\r\nfunction getValues(){\r\n$(selector).each(function(i){\r\n var className = $(this).attr('class'),\r\n classNameIndex = className.indexOf('mdw-image-gallery-3d'),\r\n shortClass = className.substring(classNameIndex, className.indexOf(' ',classNameIndex)),\r\n values = shortClass.split('-')\r\n options[i] = {\r\n scrollPerItem: 500,\r\n distance: 1500,\r\n background: true\r\n }\r\n values.forEach(function(value, index){\r\n if(value =='scrollperitem' && values[index+1] && !isNaN(values[index+1])){ options[i].scrollPerItem = parseFloat(values[index+1]) \r\n }\r\n if(value =='distance' && values[index+1] && !isNaN(values[index+1])){ options[i].distance = parseFloat(values[index+1]) \r\n }\r\n if(value =='nobackground'){ options[i].background = false }\r\n })\r\n})\r\n}\r\n\r\nfunction setHeight(){\r\n if(isDisabled()) return\r\n winHeight = $(window).height()\r\n $(selector).each(function(i){\r\n $(this).css('height', winHeight + (slides[i].length * options[i].scrollPerItem) + 'px')\r\n })\r\n}\r\n\r\nfunction initImages(){\r\nif(isDisabled()) return\r\n$(selector).each(function(i){\r\ninitialZ[i] = []\r\nfrontRange[i] = []\r\nvisibleRange[i] = 5000\r\nslides[i].each(function(index){\r\n initialZ[i][index] = -index*options[i].distance\r\n frontRange[i][index] = 1000\r\n $(this).css('transform', `translate3d(-50%, -50%, ${initialZ[i][index]}px)`)\r\n $(this).css('opacity', mapRange(initialZ[i][index], -visibleRange[i], 0, 0, 1))\r\n})\r\n})\r\n}\r\n\r\nfunction init(){\r\ngetValues()\r\n$(selector).each(function(i){\r\n var $this = $(this)\r\n slides[i] = $this.find('.mdw-image-gallery-inner > .e-con, .mdw-image-gallery-inner > .e-con-inner > .e-con, .mdw-image-gallery-inner > .e-container')\r\n slides[i].each(function(si){ $(this).css('z-index', slides[i].length - si) })\r\n if(options[i].background){\r\n var galleryBg = $('<div>').addClass('mdw-image-gallery-bg')\r\n if(isDisabled()){\r\n galleryBg.css('background-image', `url('${slides[i].find('img').eq(0).attr('src')}')`)\r\n }else{\r\n slides[i].each(function(){\r\n var clonedImg = $(this).find('img').clone()\r\n galleryBg.append(clonedImg)\r\n })\r\n }\r\n $this.prepend(galleryBg)\r\n galleryBgImages[i] = galleryBg.find('img')\r\n galleryBgImages[i].each(function (gi) {\r\n $(this).css('z-index', galleryBgImages[i].length - gi)\r\n })\r\n }\r\n})\r\nsetHeight()\r\ninitImages()\r\n}\r\nfunction setSticky(){\r\nif(isDisabled()) return\r\n$(selector).each(function(i){\r\n var $this = $(this),\r\n rect = $this[0].getBoundingClientRect(),\r\n inner = $this.children()\r\n \r\n rect.top <= 0 ? inner.addClass('sticky') : inner.removeClass('sticky')\r\n rect.bottom < winHeight ? inner.addClass('sticky-end') : inner.removeClass('sticky-end')\r\n})\r\n}\r\n\r\nfunction moveImages(){\r\n$(selector).each(function(i){\r\n var progress = ($(window).scrollTop() - $(this).offset().top)\/($(this).height()-$(window).height())\r\n if(progress >= 0 && progress <= 1){\r\n zIncrement = progress*options[i].distance*(slides[i].length - 1)\r\n \r\n slides[i].each(function(index){\r\n var currentZ = initialZ[i][index] + zIncrement,\r\n opacity = mapRange(currentZ, -visibleRange[i], 0, 0, 1),\r\n opacityBg\r\n \r\n if(opacity >= 0){\r\n if(opacity <= 1 || firstTime) $(this).css('opacity', opacity)\r\n if(currentZ < frontRange[i][index] || firstTime) $(this).css('transform', `translate3d(-50%, -50%, ${currentZ}px)`)\r\n }\r\n if(options[i].background){\r\n opacityBg = currentZ < 100 ? 1 : 0\r\n gsap.to($(galleryBgImages[i][index]), {\r\n opacity: opacityBg,\r\n ease: 'power3.out',\r\n duration: 1.5,\r\n })\r\n }\r\n })\r\n firstTime = false\r\n }\r\n})\r\n}\r\n\r\n$(document).ready(init)\r\n$(window).on('load resize', setHeight)\r\n$(window).on('load resize scroll', function(){\r\n setSticky()\r\n moveImages()\r\n})\r\n})(jQuery)\r\n}\r\n<\/script>\r\n\r\n<!-- Smooth Scroll -->\r\n<style>\r\nhtml.lenis, html.lenis body {\r\n height: auto;\r\n}\r\n.lenis.lenis-smooth {\r\n scroll-behavior: auto !important;\r\n}\r\n.lenis.lenis-smooth [data-lenis-prevent] {\r\n overscroll-behavior: contain;\r\n}\r\n.lenis.lenis-stopped {\r\n overflow: hidden;\r\n}\r\n.lenis.lenis-smooth iframe {\r\n pointer-events: none;\r\n}\r\n<\/style>\r\n<script src=\"https:\/\/unpkg.com\/lenis@1.1.11\/dist\/lenis.min.js\"><\/script> \r\n<script>\r\n$(document).ready(function(){\r\n\r\nvar smoothScroll = getComputedStyle(document.body).getPropertyValue('--smooth-scroll'),\r\n smoothScroll = smoothScroll && smoothScroll == 'true'\r\n\r\nif(smoothScroll){\r\n var lenis = new Lenis()\r\n function raf(time) {\r\n lenis.raf(time)\r\n requestAnimationFrame(raf)\r\n }\r\n requestAnimationFrame(raf)\r\n}\r\n})\r\n<\/script>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fe468e4 e-con-full mdw-image-gallery-inner e-flex e-con e-child\" data-id=\"fe468e4\" data-element_type=\"container\" data-settings=\"{"background_background":"gradient"}\">\n\t\t<div class=\"elementor-element elementor-element-5159c38 e-con-full e-flex e-con e-child\" data-id=\"5159c38\" data-element_type=\"container\" data-settings=\"{"position":"absolute"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a154eb1 elementor-widget elementor-widget-heading\" data-id=\"a154eb1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">We build homes for your brand online<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-962744c elementor-widget elementor-widget-image\" data-id=\"962744c\" data-element_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=\"1024\" height=\"790\" src=\"https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/web-Design.png\" class=\"attachment-large size-large wp-image-420\" alt=\"\" srcset=\"https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/web-Design.png 1024w, https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/web-Design-300x231.png 300w, https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/web-Design-768x593.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a0c6e0a e-con-full e-flex e-con e-child\" data-id=\"a0c6e0a\" data-element_type=\"container\" data-settings=\"{"position":"absolute"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3f66b1c elementor-widget elementor-widget-heading\" data-id=\"3f66b1c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Stop the scroll with the pixels that pop<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0cef252 elementor-widget elementor-widget-image\" data-id=\"0cef252\" data-element_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=\"1024\" height=\"790\" src=\"https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/Graphics.png\" class=\"attachment-large size-large wp-image-421\" alt=\"\" srcset=\"https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/Graphics.png 1024w, https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/Graphics-300x231.png 300w, https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/Graphics-768x593.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6ba8f9c e-con-full e-flex e-con e-child\" data-id=\"6ba8f9c\" data-element_type=\"container\" data-settings=\"{"position":"absolute"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-535b696 elementor-widget elementor-widget-heading\" data-id=\"535b696\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Turning complex code into seamless flow<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-91ebeeb elementor-widget elementor-widget-image\" data-id=\"91ebeeb\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"790\" src=\"https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/App-dev.png\" class=\"attachment-large size-large wp-image-422\" alt=\"\" srcset=\"https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/App-dev.png 1024w, https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/App-dev-300x231.png 300w, https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/App-dev-768x593.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-46e96d9 e-con-full e-flex e-con e-child\" data-id=\"46e96d9\" data-element_type=\"container\" data-settings=\"{"position":"absolute"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4112ded elementor-widget elementor-widget-heading\" data-id=\"4112ded\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">We handle the heavy lifting of creation<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-040ca1e elementor-widget elementor-widget-image\" data-id=\"040ca1e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"790\" src=\"https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/Production.png\" class=\"attachment-large size-large wp-image-423\" alt=\"\" srcset=\"https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/Production.png 1024w, https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/Production-300x231.png 300w, https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/Production-768x593.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fd6a11a e-con-full e-flex e-con e-child\" data-id=\"fd6a11a\" data-element_type=\"container\" data-settings=\"{"position":"absolute"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-17828af elementor-widget elementor-widget-heading\" data-id=\"17828af\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Don't just show them-make them feel it <\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-22b57dc elementor-widget elementor-widget-image\" data-id=\"22b57dc\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"790\" src=\"https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/Videos.png\" class=\"attachment-large size-large wp-image-424\" alt=\"\" srcset=\"https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/Videos.png 1024w, https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/Videos-300x231.png 300w, https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/Videos-768x593.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3b2728f e-con-full e-flex e-con e-child\" data-id=\"3b2728f\" data-element_type=\"container\" data-settings=\"{"position":"absolute"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-03acdb0 elementor-widget elementor-widget-heading\" data-id=\"03acdb0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Making your brand the talk of the timeline<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a95c10d elementor-widget elementor-widget-image\" data-id=\"a95c10d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"790\" src=\"https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/SMM.png\" class=\"attachment-large size-large wp-image-425\" alt=\"\" srcset=\"https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/SMM.png 1024w, https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/SMM-300x231.png 300w, https:\/\/madviomedia.com\/wp-content\/uploads\/2026\/02\/SMM-768x593.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\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<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Hero Section We don\u2019t outsource productivity, WE PRODUCE IT. Let’s build your brand ! We are transparent just like jellyfish.. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/madviomedia.com\/index.php\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/madviomedia.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/madviomedia.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/madviomedia.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/madviomedia.com\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":511,"href":"https:\/\/madviomedia.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":693,"href":"https:\/\/madviomedia.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions\/693"}],"wp:attachment":[{"href":"https:\/\/madviomedia.com\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}