PageSourceSearch

https://codendesigner.com/

html codendesigner.com collected 2026-10-06 20:24:43 UTC 474,250 bytes, 10,070 lines download raw bytes

1<!doctype html>
2<html class="no-js" lang="en"data-wf-page="6307b30e18bcfded4878d9ae" data-wf-site="62faa418843c333d358269c0">
3  <head>
3<script data-source-attribution="shopify.event_observer.bootstrap">
4(function(){let e=navigator,t=`prototype`,n=`sendBeacon`,r=e[n],i=fetch,a=XMLHttpRequest[t],{open:o,send:s}=a,c=`EventListener`,l=`add${c}`,u=`remove${c}`,d=EventTarget[t],f=d[l],p=d[u],m=e=>Error((e=document.currentScript)&&[e?.src,e?.id||e?.dataset?.sourceAttribution]),h=(e=[],t=0)=>(e.p=n=>e[t++%1e3]=n,[e,t=>(e.forEach(e.p=t),e.length=0)]),[g,_]=h(),[v,y]=h(),b,x=new WeakMap,S=e=>e&&g.p([e,b||[m()]]);d[l]=function(e,t,n){let r=this,i=t?.handleEvent||t,a=x.get(t),o=m();i?.call&&!a&&x.set(t,a=function(e){b=[o,e.type];try{i.call(t==i?this:t,e)}finally{b=null}}),v.p([e,o,a,r?.tagName||r+``,r?.id]),f.call(r,e,a||t,n)},d[u]=function(e,t,n){p.call(this,e,x.get(t)||t,n)},a.open=function(e,t){x.set(this,[t+``,e]),o.apply(this,arguments)},a.send=function(e){S(x.get(this)),s.call(this,e)},fetch=(e,t)=>(S([(e?.url||e)+``,t?.method]),i(e,t)),e[n]=(t,n)=>(S([t+``,``]),r.call(e,t,n)),setTimeout(()=>import("//codendesigner.com/cdn/shopifycloud/storefront/assets/storefront/event_observer_reporter-ed358274.js").then(e=>e.$(_,y,f,i,`531955759`)))})();
5//# sourceURL=event-observer-collector.js
6</script>
6
7 
8    
9
10    
10<script type="text/javascript">
11        var sbErrors = [];
12
13        window.onerror = function(error, url, line) {
14            sbErrors.push({
15                errorMessage : error,
16                lineNumber : line
17            });
18        };
19    </script>
19
20    
20<script>
21var page_type = "index";
22      
23if (page_type.indexOf("collection") != -1)
24    page_type = "collection";
25else if (page_type.indexOf("product") != -1)
26    page_type = "product";
27
28      if(typeof(sb_index_jslazyload)=="undefined")
29        sb_index_jslazyload = [ /cdn\.shopify\.com\/extensions/, /cdn\.shopify\.com\/s\/trekkie\.storefront/, /cdn\.shopify\.com\/shopifycloud\/boomerang/, /cdn\.shopify\.com\/shopifycloud\/consent-tracking-api\/v0\.1\/consent-tracking-api\.js/, /cdn\.shopify\.com\/shopifycloud\/shopify\/assets\/shop_events_listener/, /cdn\.shopify\.com\/shopifycloud\/shopify\/assets\/storefront\/features/, /cdn\.shopify\.com\/shopifycloud\/shopify\/assets\/storefront\/load_feature/, /cdn\.shopify\.com\/shopifycloud\/shopify_chat\/storefront\/shopifyChatV1\.js/, /cdn\.shopify\.com\/shopifycloud\/shopify\/assets\/storefront\/bars/, ]
30
31      if(typeof(sb_collection_jslazyload)=="undefined")
32        sb_collection_jslazyload = [ /cdn\.shopify\.com\/extensions/, /cdn\.shopify\.com\/s\/trekkie\.storefront/, /cdn\.shopify\.com\/shopifycloud\/boomerang/, /cdn\.shopify\.com\/shopifycloud\/consent-tracking-api\/v0\.1\/consent-tracking-api\.js/, /cdn\.shopify\.com\/shopifycloud\/shopify\/assets\/shop_events_listener/, /cdn\.shopify\.com\/shopifycloud\/shopify\/assets\/storefront\/features/, /cdn\.shopify\.com\/shopifycloud\/shopify\/assets\/storefront\/load_feature/, /cdn\.shopify\.com\/shopifycloud\/shopify_chat\/storefront\/shopifyChatV1\.js/, /cdn\.shopify\.com\/shopifycloud\/shopify\/assets\/storefront\/bars/, ]
33
34      if(typeof(sb_product_jslazyload)=="undefined")
35        sb_product_jslazyload = [ /cdn\.shopify\.com\/extensions/, /cdn\.shopify\.com\/s\/trekkie\.storefront/, /cdn\.shopify\.com\/shopifycloud\/boomerang/, /cdn\.shopify\.com\/shopifycloud\/consent-tracking-api\/v0\.1\/consent-tracking-api\.js/, /cdn\.shopify\.com\/shopifycloud\/shopify\/assets\/shop_events_listener/, /cdn\.shopify\.com\/shopifycloud\/shopify\/assets\/storefront\/features/, /cdn\.shopify\.com\/shopifycloud\/shopify\/assets\/storefront\/load_feature/, /cdn\.shopify\.com\/shopifycloud\/shopify_chat\/storefront\/shopifyChatV1\.js/, /cdn\.shopify\.com\/shopifycloud\/shopify\/assets\/storefront\/bars/, ]
36
37if (page_type == 'index') {
38    window.LAZYLOADURL = sb_index_jslazyload;
39}
40
41if (page_type == "collection") {
42    window.LAZYLOADURL = sb_collection_jslazyload;
43}
44
45if (page_type == "product") {
46    window.LAZYLOADURL = sb_product_jslazyload;
47}
48
49!function(t, e) {
50    "object" == typeof exports && "undefined" != typeof module ? e(exports) : "function" == typeof define && define.amd ? define(["exports"], e) : e((t = "undefined" != typeof globalThis ? globalThis : t || self).sbscript = {})
51}(this, (function(t) {
52    "use strict";
53    var e = "javascript/blocked"
54      , r = {
55        blacklist: window.LAZYLOADURL,
56        whitelist: window.LAZYLOADEDURL
57    }
58      , n = {
59        blacklisted: []
60    }
61      , i = function(t, n) {
62        return t && (!n || n !== e) && (!r.blacklist || r.blacklist.some((function(e) {
63            return e.test(t)
64        }
65        ))) && (!r.whitelist || r.whitelist.every((function(e) {
66            return !e.test(t)
67        }
68        )))
69    }
70      , o = function(t) {
71        var e = t.getAttribute("src");
72        return r.blacklist && r.blacklist.every((function(t) {
73            return !t.test(e)
74        }
75        )) || r.whitelist && r.whitelist.some((function(t) {
76            return t.test(e)
77        }
78        ))
79    }
80      , c = []
81      , l = []
82      , a = []
83      , s = new MutationObserver((function(t) {
84        for (var r = 0; r < t.length; r++)
85            for (var o = t[r].addedNodes, s = function(t) {
86                var r = o[t];
87                if (1 === r.nodeType && "LINK" === r.tagName && "stylesheet" == r.rel && c.push(r.href.split("?")[0]),
88                1 === r.nodeType && "SCRIPT" === r.tagName) {
89                    "" !== r.src && null !== r.src && l.push(r.src.split("?")[0]);
90                    var s = r.src
91                      , u = r.type;
92                    if (!1,
93                    i(s, u)) {
94                        a.push(s),
95                        n.blacklisted.push([r, r.type]),
96                        r.type = e;
97                        r.addEventListener("beforescriptexecute", (function t(n) {
98                            r.getAttribute("type") === e && n.preventDefault(),
99                            r.removeEventListener("beforescriptexecute", t)
100                        }
101                        )),
102                        r.parentElement && r.parentElement.removeChild(r)
103                    }
104                }
105            }, u = 0; u < o.length; u++) {
106                s(u)
107            }
108    }
109    ));
110    function u(t, e) {
111        var r = Object.keys(t);
112        if (Object.getOwnPropertySymbols) {
113            var n = Object.getOwnPropertySymbols(t);
114            e && (n = n.filter((function(e) {
115                return Object.getOwnPropertyDescriptor(t, e).enumerable
116            }
117            ))),
118            r.push.apply(r, n)
119        }
120        return r
121    }
122    function p(t) {
123        for (var e = 1; e < arguments.length; e++) {
124            var r = null != arguments[e] ? arguments[e] : {};
125            e % 2 ? u(Object(r), !0).forEach((function(e) {
126                f(t, e, r[e])
127            }
128            )) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) : u(Object(r)).forEach((function(e) {
129                Object.defineProperty(t, e, Object.getOwnPropertyDescriptor(r, e))
130            }
131            ))
132        }
133        return t
134    }
135    function f(t, e, r) {
136        return e in t ? Object.defineProperty(t, e, {
137            value: r,
138            enumerable: !0,
139            configurable: !0,
140            writable: !0
141        }) : t[e] = r,
142        t
143    }
144    function d(t, e) {
145        return function(t) {
146            if (Array.isArray(t))
147                return t
148        }(t) || function(t, e) {
149            var r = null == t ? null : "undefined" != typeof Symbol && t[Symbol.iterator] || t["@@iterator"];
150            if (null == r)
151                return;
152            var n, i, o = [], c = !0, l = !1;
153            try {
154                for (r = r.call(t); !(c = (n = r.next()).done) && (o.push(n.value),
155                !e || o.length !== e); c = !0)
156                    ;
157            } catch (t) {
158                l = !0,
159                i = t
160            } finally {
161                try {
162                    c || null == r.return || r.return()
163                } finally {
164                    if (l)
165                        throw i
166                }
167            }
168            return o
169        }(t, e) || b(t, e) || function() {
170            throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")
171        }()
172    }
173    function y(t) {
174        return function(t) {
175            if (Array.isArray(t))
176                return h(t)
177        }(t) || function(t) {
178            if ("undefined" != typeof Symbol && null != t[Symbol.iterator] || null != t["@@iterator"])
179                return Array.from(t)
180        }(t) || b(t) || function() {
181            throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")
182        }()
183    }
184    function b(t, e) {
185        if (t) {
186            if ("string" == typeof t)
187                return h(t, e);
188            var r = Object.prototype.toString.call(t).slice(8, -1);
189            return "Object" === r && t.constructor && (r = t.constructor.name),
190            "Map" === r || "Set" === r ? Array.from(t) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? h(t, e) : void 0
191        }
192    }
193    function h(t, e) {
194        (null == e || e > t.length) && (e = t.length);
195        for (var r = 0, n = new Array(e); r < e; r++)
196            n[r] = t[r];
197        return n
198    }
199    s.observe(document.documentElement, {
200        childList: !0,
201        subtree: !0
202    });
203    var m = document.createElement
204      , v = {
205        src: Object.getOwnPropertyDescriptor(HTMLScriptElement.prototype, "src"),
206        type: Object.getOwnPropertyDescriptor(HTMLScriptElement.prototype, "type")
207    };
208    document.createElement = function() {
209        for (var t = arguments.length, r = new Array(t), n = 0; n < t; n++)
210            r[n] = arguments[n];
211        if ("script" !== r[0].toLowerCase())
212            return m.bind(document).apply(void 0, r);
213        var o = m.bind(document).apply(void 0, r);
214        try {
215            Object.defineProperties(o, {
216                src: p(p({}, v.src), {}, {
217                    set: function(t) {
218                        i(t, o.type) && v.type.set.call(this, e),
219                        v.src.set.call(this, t)
220                    }
221                }),
222                type: p(p({}, v.type), {}, {
223                    get: function() {
224                        var t = v.type.get.call(this);
225                        return t === e || i(this.src, t) ? null : t
226                    },
227                    set: function(t) {
228                        var r = i(o.src, o.type) ? e : t;
229                        v.type.set.call(this, r)
230                    }
231                })
232            }),
233            o.setAttribute = function(t, e) {
234                "type" === t || "src" === t ? o[t] = e : HTMLScriptElement.prototype.setAttribute.call(o, t, e)
235            }
236        } catch (t) {
237            console.warn("sbscript: unable to prevent script execution for script src ", o.src, ".\n", 'A likely cause would be because you are using a third-party browser extension that monkey patches the "document.createElement" function.')
238        }
239        return o
240    }
241    ;
242    var w = new RegExp("[|\\{}()[\\]^$+*?.]","g");
243    window.arr_injected_css = [],
244    window.arr_injected_script = [],
245    window.arr_blocked_script = [];
246    t.unblock = function() {
247        for (var t = arguments.length, i = new Array(t), u = 0; u < t; u++)
248            i[u] = arguments[u];
249        i.length < 1 ? (r.blacklist = [],
250        r.whitelist = []) : (r.blacklist && (r.blacklist = r.blacklist.filter((function(t) {
251            return i.every((function(e) {
252                return "string" == typeof e ? !t.test(e) : e instanceof RegExp ? t.toString() !== e.toString() : void 0
253            }
254            ))
255        }
256        ))),
257        r.whitelist && (r.whitelist = [].concat(y(r.whitelist), y(i.map((function(t) {
258            if ("string" == typeof t) {
259                var e = ".*" + t.replace(w, "\\$&") + ".*";
260                if (r.whitelist.every((function(t) {
261                    return t.toString() !== e.toString()
262                }
263                )))
264                    return new RegExp(e)
265            } else if (t instanceof RegExp && r.whitelist.every((function(e) {
266                return e.toString() !== t.toString()
267            }
268            )))
269                return t;
270            return null
271        }
272        )).filter(Boolean)))));
273        for (var p = document.querySelectorAll('script[type="'.concat(e, '"]')), f = 0; f < p.length; f++) {
274            var b = p[f];
275            o(b) && (n.blacklisted.push([b, "application/javascript"]),
276            b.parentElement.removeChild(b))
277        }
278        var h = 0;
279        y(n.blacklisted).forEach((function(t, e) {
280            var r = d(t, 2)
281              , i = r[0]
282              , c = r[1];
283            if (o(i)) {
284                for (var l = document.createElement("script"), a = 0; a < i.attributes.length; a++) {
285                    var s = i.attributes[a];
286                    "src" !== s.name && "type" !== s.name && l.setAttribute(s.name, i.attributes[a].value)
287                }
288                "" != i.src && l.setAttribute("src", i.src),
289                l.setAttribute("type", c || "application/javascript"),
290                l.appendChild(document.createTextNode(i.text)),
291                document.head.appendChild(l),
292                n.blacklisted.splice(e - h, 1),
293                h++
294            }
295        }
296        )),
297        r.blacklist && r.blacklist.length < 1 && s.disconnect(),
298        window.arr_injected_css = c,
299        window.arr_injected_script = l,
300        window.arr_blocked_script = a
301    }
302    ,
303    Object.defineProperty(t, "__esModule", {
304        value: !0
305    })
306}
307));
308
309// window.onscroll = function(){
310//     window.sbscript.unblock();
311// };
312
313window.addEventListener('mousemove', function(event) {
314   window.sbscript.unblock();
315});
316
317window.addEventListener('touchstart', function(event) {
318   window.sbscript.unblock();
319}, false);
320
321window.addEventListener('load', function(event) {
322    setTimeout(()=>{
323     window.sbscript.unblock();
324    }
325    , 5000);
326});
327
328</script>
328
329
330
331
332 
333    <meta charset="utf-8">
334    <meta http-equiv="X-UA-Compatible" content="IE=edge">
335    <meta name="viewport" content="width=device-width,initial-scale=1">
336    <meta name="theme-color" content="">
337    <link rel="canonical" href="https://codendesigner.com/"><link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
338    <link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
339    <link rel="preconnect" href="https://cdn.lgrckt-in.com" crossorigin>
340    <link rel="preconnect" href="https://kit.fontawesome.com" crossorigin>
341    <link rel="preconnect" href="https://ka-f.fontawesome.com" crossorigin>
342    <link rel="preconnect" href="https://unpkg.com" crossorigin>
343    <link rel="preconnect" href="https://static.hotjar.com" crossorigin>
344    <link rel="preconnect" href="https://d3e54v103j8qbb.cloudfront.net" crossorigin>
345    <link rel="dns-prefetch" href="https://script.hotjar.com">
346    <link rel="dns-prefetch" href="https://vc.hotjar.io">
347
348    <!-- Log Rocket (deferred so it never blocks LCP) -->
349    
349<script src="https://cdn.lgrckt-in.com/LogRocket.min.js" crossorigin="anonymous" defer="defer"></script>
349
350    
350<script>
351      (function(){
352        function sbInitLR(){ if (window.LogRocket && window.LogRocket.init) { try { window.LogRocket.init('ozhytk/codendesigner'); } catch(e){} } else { setTimeout(sbInitLR, 250); } }
353        if (document.readyState === 'complete') { sbInitLR(); }
354        else { window.addEventListener('load', function(){ setTimeout(sbInitLR, 0); }); }
355      })();
356    </script>
356<link rel="icon" type="image/png" href="//codendesigner.com/cdn/shop/files/favicon.png?crop=center&height=32&v=1766806632&width=32"><title>
357      Experience Quality Service: Invest in Value, Not Just Price
358 &ndash; Codendesigner</title>
359
360    
361      <meta name="description" content="Create a stunning website that reflects your brand with our expert web design and development services. Our experienced team provides custom web solutions tailored to your business needs, with a focus on design, functionality, and user experience. From small business websites to large e-commerce platforms.">
362    
363
364    
365
366<meta property="og:site_name" content="Codendesigner">
367<meta property="og:url" content="https://codendesigner.com/">
368<meta property="og:title" content="Experience Quality Service: Invest in Value, Not Just Price">
369<meta property="og:type" content="website">
370<meta property="og:description" content="Create a stunning website that reflects your brand with our expert web design and development services. Our experienced team provides custom web solutions tailored to your business needs, with a focus on design, functionality, and user experience. From small business websites to large e-commerce platforms."><meta property="og:image" content="http://codendesigner.com/cdn/shop/files/2_8011acf3-00af-4e3e-adb2-3a374327b58f.png?height=628&pad_color=fff&v=1679751315&width=1200">
371  <meta property="og:image:secure_url" content="https://codendesigner.com/cdn/shop/files/2_8011acf3-00af-4e3e-adb2-3a374327b58f.png?height=628&pad_color=fff&v=1679751315&width=1200">
372  <meta property="og:image:width" content="1200">
373  <meta property="og:image:height" content="628"><meta name="twitter:card" content="summary_large_image">
374<meta name="twitter:title" content="Experience Quality Service: Invest in Value, Not Just Price">
375<meta name="twitter:description" content="Create a stunning website that reflects your brand with our expert web design and development services. Our experienced team provides custom web solutions tailored to your business needs, with a focus on design, functionality, and user experience. From small business websites to large e-commerce platforms.">
376
377
378    
378<script src="//codendesigner.com/cdn/shop/t/19/assets/constants.js?v=165488195745554878101748333775" defer="defer"></script>
378
379    
379<script src="//codendesigner.com/cdn/shop/t/19/assets/pubsub.js?v=2921868252632587581748333775" defer="defer"></script>
379
380    
380<script src="//codendesigner.com/cdn/shop/t/19/assets/global.js?v=85297797553816670871748333774" defer="defer"></script>
380
381    
381<script>window.performance && window.performance.mark && window.performance.mark('shopify.content_for_header.start');</script>
381<meta name="google-site-verification" content="664Ya5w890xgzXQyNlMzhleYNnqnVxgFupQ7tVUCsAg">
382<meta id="shopify-digital-wallet" name="shopify-digital-wallet" content="/531955759/digital_wallets/dialog">
383<link rel="ucp" href="/.well-known/ucp" version="2026-08-25">
383<script async="async" src="/checkouts/internal/preloads.js?locale=en-US"></script>
vendor: 1 bytes, line 383
383
384<script id="apple-pay-shop-capabilities" type="application/json">{"shopId":531955759,"countryCode":"GB","currencyCode":"USD","merchantCapabilities":["supports3DS"],"merchantId":"gid:\/\/shopify\/Shop\/531955759","merchantName":"Codendesigner","requiredBillingContactFields":["postalAddress","email"],"requiredShippingContactFields":["postalAddress","email"],"shippingType":"shipping","supportedNetworks":["visa","masterCard","discover","amex","maestro","elo"],"total":{"type":"pending","label":"Codendesigner","amount":"1.00"},"shopifyPaymentsEnabled":true,"supportsSubscriptions":true}</script>
vendor: 1 bytes, line 384
384
385<script id="shopify-features" type="application/json">{"accessToken":"362d3ad13445f2110cd0ddcf9c1358c9","betas":["rich-media-storefront-analytics"],"domain":"codendesigner.com","predictiveSearch":true,"shopId":531955759,"locale":"en"}</script>
vendor: 1 bytes, line 385
385
386<script>var Shopify = Shopify || {};
387Shopify.shop = "codendesigner.myshopify.com";
388Shopify.locale = "en";
389Shopify.currency = {"active":"USD","rate":"1.0"};
390Shopify.country = "US";
391Shopify.theme = {"name":"Codendesigner - Sync","id":144816865327,"schema_name":"Dawn","schema_version":"8.0.0","theme_store_id":null,"role":"main"};
392Shopify.theme.handle = "null";
393Shopify.theme.style = {"id":null,"handle":null};
394Shopify.cdnHost = "codendesigner.com/cdn";
395Shopify.routes = Shopify.routes || {};
396Shopify.routes.root = "/";
397Shopify.shopJsCdnBaseUrl = "https://cdn.shopify.com/shopifycloud/shop-js";
398Shopify.SignInWithShop = Shopify.SignInWithShop || {};
399Shopify.SignInWithShop.User = Shopify.SignInWithShop.User || {};
400Shopify.SignInWithShop.User.recognized = false;</script>
vendor: 1 bytes, line 400
400
401<script type="module">!function(o){(o.Shopify=o.Shopify||{}).modules=!0}(window);</script>
vendor: 1 bytes, line 401
401
402<script>!function(o){function n(){var o=[];function n(){o.push(Array.prototype.slice.apply(arguments))}return n.q=o,n}var t=o.Shopify=o.Shopify||{};t.loadFeatures=n(),t.autoloadFeatures=n()}(window);</script>
vendor: 1 bytes, line 402
402
403<script>
404  window.Shopify = window.Shopify || {};
405  window.Shopify.SignInWithShop = window.Shopify.SignInWithShop || {};
406  window.Shopify.SignInWithShop.assetMetrics = { sampleRate: 0.25 };
407  window.Shopify.SignInWithShop.eligible = true;
408</script>
vendor: 1 bytes, line 408
408
409<script id="shop-js-analytics" type="application/json">{"pageType":"index"}</script>
vendor: 1 bytes, line 409
409
410<script defer="defer" async type="module" src="https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.init-shop-cart-sync.en.esm.js"></script>
vendor: 1 bytes, line 410
410
411<script type="module">
412  await import("https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.init-shop-cart-sync.en.esm.js");
413
414  window.Shopify.SignInWithShop?.initShopCartSync?.({"fedCMEnabled":true,"windoidEnabled":true});
415
416</script>
vendor: 1 bytes, line 416
416
417<script>
418  window.Shopify = window.Shopify || {};
419  if (!window.Shopify.featureAssets) window.Shopify.featureAssets = {};
420  window.Shopify.featureAssets['shop-js'] = {"avatar":["modules/v2/loader.avatar.en.esm.js"],"checkout-modal":["modules/v2/loader.checkout-modal.en.esm.js"],"init-customer-accounts-sign-up":["modules/v2/loader.init-customer-accounts-sign-up.en.esm.js"],"init-customer-accounts":["modules/v2/loader.init-customer-accounts.en.esm.js"],"init-fed-cm":["modules/v2/loader.init-fed-cm.en.esm.js"],"init-shop-cart-sync":["modules/v2/loader.init-shop-cart-sync.en.esm.js"],"init-shop-email-lookup-coordinator":["modules/v2/loader.init-shop-email-lookup-coordinator.en.esm.js"],"init-shop-for-new-customer-accounts":["modules/v2/loader.init-shop-for-new-customer-accounts.en.esm.js"],"init-shop-user-recognition":["modules/v2/loader.init-shop-user-recognition.en.esm.js"],"init-windoid":["modules/v2/loader.init-windoid.en.esm.js"],"lead-capture":["modules/v2/loader.lead-capture.en.esm.js"],"listener":["modules/v2/loader.listener.en.esm.js"],"pay-button":["modules/v2/loader.pay-button.en.esm.js"],"payment-terms":["modules/v2/loader.payment-terms.en.esm.js"],"shop-button":["modules/v2/loader.shop-button.en.esm.js"],"shop-cart-sync":["modules/v2/loader.shop-cart-sync.en.esm.js"],"shop-cash-offers":["modules/v2/loader.shop-cash-offers.en.esm.js"],"shop-follow-button":["modules/v2/loader.shop-follow-button.en.esm.js"],"shop-login-button":["modules/v2/loader.shop-login-button.en.esm.js"],"shop-login":["modules/v2/loader.shop-login.en.esm.js"],"shop-toast-manager":["modules/v2/loader.shop-toast-manager.en.esm.js"],"shop-user-recognition":["modules/v2/loader.shop-user-recognition.en.esm.js"]};
421</script>
vendor: 1 bytes, line 421
421
422<script>(function() {
423  var isLoaded = false;
424  function asyncLoad() {
425    if (isLoaded) return;
426    isLoaded = true;
427    var urls = ["https:\/\/chimpstatic.com\/mcjs-connected\/js\/users\/6bb3a0ade6f64d209b31bc912\/2e919a1bf859d502244e31adc.js?shop=codendesigner.myshopify.com"];
428    for (var i = 0; i < urls.length; i++) {
429      var s = document.createElement('script');
430      s.type = 'text/javascript';
431      s.async = true;
432      s.src = urls[i];
433      var x = document.getElementsByTagName('script')[0];
434      x.parentNode.insertBefore(s, x);
435    }
436  };
437  if(window.attachEvent) {
438    window.attachEvent('onload', asyncLoad);
439  } else {
440    window.addEventListener('load', asyncLoad, false);
441  }
442})();</script>
vendor: 1 bytes, line 442
442
443<script id="__st">var __st={"a":531955759,"offset":21600,"reqid":"bdb4bd11-d97b-4136-9f48-a6cc796fd350-1791318283","pageurl":"codendesigner.com\/","u":"62293b86e076","p":"home"};</script>
vendor: 1 bytes, line 443
443
444<script>window.ShopifyPaypalV4VisibilityTracking = true;</script>
vendor: 1 bytes, line 444
444
445<script id="captcha-bootstrap">!function(){'use strict';const t='contact',e='account',n='new_comment',o=[[t,t],['blogs',n],['comments',n],[t,'customer']],c=[[e,'customer_login'],[e,'guest_login'],[e,'recover_customer_password'],[e,'create_customer']],r=t=>t.map((([t,e])=>`form[action*='/${t}']:not([data-nocaptcha='true']) input[name='form_type'][value='${e}']`)).join(','),a=t=>()=>t?[...document.querySelectorAll(t)].map((t=>t.form)):[];function s(){const t=[...o],e=r(t);return a(e)}const i='password',u='form_key',d=['recaptcha-v3-token','g-recaptcha-response','h-captcha-response',i],f=()=>{try{return window.sessionStorage}catch{return}},m='__shopify_v',_=t=>t.elements[u];function p(t,e,n=!1){try{const o=window.sessionStorage,c=JSON.parse(o.getItem(e)),{data:r}=function(t){const{data:e,action:n}=t;return t[m]||n?{data:e,action:n}:{data:t,action:n}}(c);for(const[e,n]of Object.entries(r))t.elements[e]&&(t.elements[e].value=n);n&&o.removeItem(e)}catch(o){console.error('form repopulation failed',{error:o})}}const l='form_type',E='cptcha';function T(t){t.dataset[E]=!0}const w=window,h=w.document,L='Shopify',v='ce_forms',y='captcha';let A=!1;((t,e)=>{const n=(g='f06e6c50-85a8-45c8-87d0-21a2b65856fe',I='https://cdn.shopify.com/shopifycloud/storefront-forms-hcaptcha/ce_storefront_forms_captcha_hcaptcha.v1.5.3.iife.js',D={infoText:'Protected by hCaptcha',privacyText:'Privacy',termsText:'Terms'},(t,e,n)=>{const o=w[L][v],c=o.bindForm;if(c)return c(t,g,e,D).then(n);var r;o.q.push([[t,g,e,D],n]),r=I,A||(h.body.append(Object.assign(h.createElement('script'),{id:'captcha-provider',async:!0,src:r})),A=!0)});var g,I,D;w[L]=w[L]||{},w[L][v]=w[L][v]||{},w[L][v].q=[],w[L][y]=w[L][y]||{},w[L][y].protect=function(t,e){n(t,void 0,e),T(t)},Object.freeze(w[L][y]),function(t,e,n,w,h,L){const[v,y,A,g]=function(t,e,n){const i=e?o:[],u=t?c:[],d=[...i,...u],f=r(d),m=r(i),_=r(d.filter((([t,e])=>n.includes(e))));return[a(f),a(m),a(_),s()]}(w,h,L),I=t=>{const e=t.target;return e instanceof HTMLFormElement?e:e&&e.form},D=t=>v().includes(t);t.addEventListener('submit',(t=>{const e=I(t);if(!e)return;const n=D(e)&&!e.dataset.hcaptchaBound&&!e.dataset.recaptchaBound,o=_(e),c=g().includes(e)&&(!o||!o.value);(n||c)&&t.preventDefault(),c&&!n&&(function(t){try{if(!f())return;!function(t){const e=f();if(!e)return;const n=_(t);if(!n)return;const o=n.value;o&&e.removeItem(o)}(t);const e=Array.from(Array(32),(()=>Math.random().toString(36)[2])).join('');!function(t,e){_(t)||t.append(Object.assign(document.createElement('input'),{type:'hidden',name:u})),t.elements[u].value=e}(t,e),function(t,e){const n=f();if(!n)return;const o=[...t.querySelectorAll(`input[type='${i}']`)].map((({name:t})=>t)),c=[...d,...o],r={};for(const[a,s]of new FormData(t).entries())c.includes(a)||(r[a]=s);n.setItem(e,JSON.stringify({[m]:1,action:t.action,data:r}))}(t,e)}catch(e){console.error('failed to persist form',e)}}(e),e.submit())}));const S=(t,e)=>{t&&!t.dataset[E]&&(n(t,e.some((e=>e===t))),T(t))};for(const o of['focusin','change'])t.addEventListener(o,(t=>{const e=I(t);D(e)&&S(e,y())}));const B=e.get('form_key'),M=e.get(l),P=B&&M;t.addEventListener('DOMContentLoaded',(()=>{const t=y();if(P)for(const e of t)e.elements[l].value===M&&p(e,B);[...new Set([...A(),...v().filter((t=>'true'===t.dataset.shopifyCaptcha))])].forEach((e=>S(e,t)))}))}(h,new URLSearchParams(w.location.search),n,t,e,['guest_login'])})(!0,!0)}();</script>
vendor: 1 bytes, line 445
445
446<script integrity="sha256-JjoPp5ZfB1sSAs5SQaol1x1GgvveM+BgmRzyDexInEQ=" data-source-attribution="shopify.loadfeatures" defer="defer" src="//codendesigner.com/cdn/shopifycloud/storefront/assets/storefront/load_feature-1bd60354.js" crossorigin="anonymous"></script>
vendor: 1 bytes, line 446
446
447<script>(function () {var userAgent = navigator.userAgent;var platform = navigator.platform;var maxTouchPoints = navigator.maxTouchPoints || 0;var isIOS = /iPad|iPhone|iPod/.test(platform) || (platform === 'MacIntel' && maxTouchPoints > 1);var isMacSafari = platform.indexOf('Mac') === 0 && /Safari/.test(userAgent) && !/Chrome|Chromium|CriOS|FxiOS|Edg|OPR|Android/.test(userAgent);var isAppleSafari = isIOS || isMacSafari;if (isAppleSafari) {fetch('/sf_private_access_tokens' + location.search).catch(function () {});}function browserMajorVersion(pattern) {var match = userAgent.match(pattern);return match ? parseInt(match[1], 10) : null;}function shouldLoadAutosizesPolyfill() {if (!window.PerformanceObserver?.supportedEntryTypes?.includes('paint')) {return false;}var chromeVersion = browserMajorVersion(/Chrome\/(\d+)/);if (chromeVersion !== null) {return chromeVersion < 126;}var firefoxVersion = browserMajorVersion(/Firefox\/(\d+)/);if (firefoxVersion !== null) {return firefoxVersion < 150;}var safariVersion = isAppleSafari ? browserMajorVersion(/Version\/(\d+).*Safari\//) : null;if (safariVersion !== null) {return safariVersion < 27;}return true;}if (shouldLoadAutosizesPolyfill()) {var autosizesScript = document.createElement('script');autosizesScript.async = true;autosizesScript.crossOrigin = 'anonymous';autosizesScript.src = "//codendesigner.com/cdn/shopifycloud/storefront/assets/storefront/autosizes-84416378.js";(document.head || document.documentElement).appendChild(autosizesScript);}window.ShopifyAnalytics = window.ShopifyAnalytics || {};window.ShopifyAnalytics.performance = window.ShopifyAnalytics.performance || {};(function () {var LONG_FRAME_THRESHOLD = 50;var longAnimationFrames = [];var activeRafId = null;function collectLongFrames() {var previousTime = null;function rafMonitor(now) {if (activeRafId === null) {return;}var delta = now - previousTime;if (delta > LONG_FRAME_THRESHOLD) {longAnimationFrames.push({startTime: previousTime,endTime: now,});}previousTime = now;activeRafId = requestAnimationFrame(rafMonitor);}previousTime = performance.now();activeRafId = requestAnimationFrame(rafMonitor);}if (!window.PerformanceObserver?.supportedEntryTypes?.includes('long-animation-frame')) {collectLongFrames();var timeoutId = setTimeout(function () {cancelAnimationFrame(activeRafId);}, 10000);window.ShopifyAnalytics.performance.getLongAnimationFrames = function (stopCollection) {if (stopCollection === undefined) {stopCollection = false;}if (stopCollection) {clearTimeout(timeoutId);cancelAnimationFrame(activeRafId);}return longAnimationFrames;};}})();})();</script>
447<script id="shopify-origin-trials" async="async" integrity="sha256-qJbe/jEZBHtr5W/BlA2cKAz3vkXu6vJQyLjgvgCC86g=" src="//cdn.shopify.com/shopifycloud/storefront/assets/storefront/origin_trials-318ab40a.js" crossorigin="anonymous" onload="window.__shopifyOriginTrialsDone = true" onerror="window.__shopifyOriginTrialsDone = true"></script>
vendor: 1 bytes, line 447
447
448<script>
449  window.Shopify = window.Shopify || {};
450  window.Shopify.MCP = window.Shopify.MCP || {};
451  window.Shopify.MCP.enabled = true;
452  window.Shopify.MCP.shop = "codendesigner.myshopify.com";
453  window.Shopify.MCP.mcpEndpoint = "https:\/\/codendesigner.com\/api\/mcp";
454  window.Shopify.MCP.tools = [{"name":"search_shop_policies_and_faqs","description":"Used to get facts about the stores policies, products, or services.\nSome examples of questions you can ask are:\n  - What is your return policy?\n  - What is your shipping policy?\n  - What is your phone number?\n  - What are your hours of operation?\"\nSet policy_types to also get the store's written policies (full text and URL).\n","inputSchema":{"$schema":"https:\/\/json-schema.org\/draft\/2020-12\/schema","type":"object","properties":{"query":{"type":"string","description":"A natural language query."},"context":{"type":"string","description":"Additional information about the request such as user demographics, mood, location, or other relevant details that could help in tailoring the response appropriately."},"policy_types":{"type":"array","items":{"type":"string","enum":["refund","shipping","privacy","terms_of_service","terms_of_sale","subscription","legal_notice","contact"]},"description":"Policy kinds to fetch, chosen from the user's question — e.g. [\"refund\"] for returns\/exchanges\/damaged items, [\"contact\"] for phone\/hours\/address. Include every kind the question touches. Omit it to get only FAQ answers."}},"required":["query"]}}];
455</script>
vendor: 1 bytes, line 455
455
456<script>(()=>{var d="shopify:webmcp_adapter_loaded",n=Symbol.for("shopify.webmcp_adapter_loading");function s(c,a,{win:r=window,doc:o=document}={}){function p(){try{return r.localStorage.getItem(d)==="true"}catch{return!1}}function l(){try{r.localStorage.setItem(d,"true")}catch{}}function u(){return typeof(o.modelContext||r.navigator?.modelContext)?.registerTool=="function"}function f(){if(r[n]||!u())return;let t=o.head||o.getElementsByTagName("head")[0];if(!t)return;let e=o.createElement("script");e.type="module",e.crossOrigin="anonymous",a&&(e.integrity=a),e.src=c,e.addEventListener("load",l,{once:!0}),e.addEventListener("error",()=>{r[n]=!1},{once:!0}),t.appendChild(e),r[n]=!0}function _(t){let e=o.getElementById("shopify-origin-trials");if(!e||r.__shopifyOriginTrialsDone){t();return}e.addEventListener("load",t,{once:!0}),e.addEventListener("error",t,{once:!0})}function i(){_(()=>r.setTimeout(f,0))}function m(){o.addEventListener("DOMContentLoaded",i,{once:!0})}p()?i():m()}s("\/\/codendesigner.com\/cdn\/shopifycloud\/storefront\/assets\/storefront\/webmcp-c6b62ece.js","sha256-ke4DDuBjdvea3vxLWxHc9E9nq8zihuG4IfYEGbb77ys=");})();
457</script>
vendor: 1 bytes, line 457
457
458<script data-source-attribution="shopify.dynamic_checkout.dynamic.init">var Shopify=Shopify||{};Shopify.PaymentButton=Shopify.PaymentButton||{isStorefrontPortableWallets:!0,init:function(){window.Shopify.PaymentButton.init=function(){};var t=document.createElement("script");t.src="https://codendesigner.com/cdn/shopifycloud/portable-wallets/latest/portable-wallets.en.js",t.type="module",document.head.appendChild(t)}};
459</script>
vendor: 1 bytes, line 459
459
460<script data-source-attribution="shopify.dynamic_checkout.buyer_consent">
461  function portableWalletsHideBuyerConsent(e){var t=document.getElementById("shopify-buyer-consent"),n=document.getElementById("shopify-subscription-policy-button");t&&n&&(t.classList.add("hidden"),t.setAttribute("aria-hidden","true"),n.removeEventListener("click",e))}function portableWalletsShowBuyerConsent(e){var t=document.getElementById("shopify-buyer-consent"),n=document.getElementById("shopify-subscription-policy-button");t&&n&&(t.classList.remove("hidden"),t.removeAttribute("aria-hidden"),n.addEventListener("click",e))}window.Shopify?.PaymentButton&&(window.Shopify.PaymentButton.hideBuyerConsent=portableWalletsHideBuyerConsent,window.Shopify.PaymentButton.showBuyerConsent=portableWalletsShowBuyerConsent);
462</script>
vendor: 1 bytes, line 462
462
463<script data-source-attribution="shopify.dynamic_checkout.cart.bootstrap">document.addEventListener("DOMContentLoaded",(function(){function t(){return document.querySelector("shopify-accelerated-checkout-cart, shopify-accelerated-checkout")}if(t())Shopify.PaymentButton.init();else{new MutationObserver((function(e,n){t()&&(Shopify.PaymentButton.init(),n.disconnect())})).observe(document.body,{childList:!0,subtree:!0})}}));
464</script>
464
465<link id="shopify-accelerated-checkout-styles" rel="stylesheet" media="screen" href="https://codendesigner.com/cdn/shopifycloud/portable-wallets/latest/accelerated-checkout-backwards-compat.css" crossorigin="anonymous">
466<style id="shopify-accelerated-checkout-cart">
467        #shopify-buyer-consent {
468  margin-top: 1em;
469  display: inline-block;
470  width: 100%;
471}
472
473#shopify-buyer-consent.hidden {
474  display: none;
475}
476
477#shopify-subscription-policy-button {
478  background: none;
479  border: none;
480  padding: 0;
481  text-decoration: underline;
482  font-size: inherit;
483  cursor: pointer;
484}
485
486#shopify-subscription-policy-button::before {
487  box-shadow: none;
488}
489
490      </style>
491<script id="sections-script" data-sections="footer" defer="defer" src="//codendesigner.com/cdn/shop/t/19/compiled_assets/scripts.js?v=101718265953855477321777433037"></script>
vendor: 1 bytes, line 491
491
492<script id="shopify-cfh-end">window.performance && window.performance.mark && window.performance.mark('shopify.content_for_header.end');</script>
492
493
494
495    <style data-shopify>
496      @font-face {
497  font-family: Inter;
498  font-weight: 400;
499  font-style: normal;
500  font-display: swap;
501  src: url("//codendesigner.com/cdn/fonts/inter/inter_n4.b2a3f24c19b4de56e8871f609e73ca7f6d2e2bb9.woff2") format("woff2"),
502       url("//codendesigner.com/cdn/fonts/inter/inter_n4.af8052d517e0c9ffac7b814872cecc27ae1fa132.woff") format("woff");
503}
504
505      @font-face {
506  font-family: Inter;
507  font-weight: 700;
508  font-style: normal;
509  font-display: swap;
510  src: url("//codendesigner.com/cdn/fonts/inter/inter_n7.02711e6b374660cfc7915d1afc1c204e633421e4.woff2") format("woff2"),
511       url("//codendesigner.com/cdn/fonts/inter/inter_n7.6dab87426f6b8813070abd79972ceaf2f8d3b012.woff") format("woff");
512}
513
514      @font-face {
515  font-family: Inter;
516  font-weight: 400;
517  font-style: italic;
518  font-display: swap;
519  src: url("//codendesigner.com/cdn/fonts/inter/inter_i4.feae1981dda792ab80d117249d9c7e0f1017e5b3.woff2") format("woff2"),
520       url("//codendesigner.com/cdn/fonts/inter/inter_i4.62773b7113d5e5f02c71486623cf828884c85c6e.woff") format("woff");
521}
522
523      @font-face {
524  font-family: Inter;
525  font-weight: 700;
526  font-style: italic;
527  font-display: swap;
528  src: url("//codendesigner.com/cdn/fonts/inter/inter_i7.b377bcd4cc0f160622a22d638ae7e2cd9b86ea4c.woff2") format("woff2"),
529       url("//codendesigner.com/cdn/fonts/inter/inter_i7.7c69a6a34e3bb44fcf6f975857e13b9a9b25beb4.woff") format("woff");
530}
531
532      @font-face {
533  font-family: Inter;
534  font-weight: 700;
535  font-style: normal;
536  font-display: swap;
537  src: url("//codendesigner.com/cdn/fonts/inter/inter_n7.02711e6b374660cfc7915d1afc1c204e633421e4.woff2") format("woff2"),
538       url("//codendesigner.com/cdn/fonts/inter/inter_n7.6dab87426f6b8813070abd79972ceaf2f8d3b012.woff") format("woff");
539}
540
541
542      :root {
543        --font-body-family: Inter, sans-serif;
544        --font-body-style: normal;
545        --font-body-weight: 400;
546        --font-body-weight-bold: 700;
547
548        --font-heading-family: Inter, sans-serif;
549        --font-heading-style: normal;
550        --font-heading-weight: 700;
551
552        --font-body-scale: 1.0;
553        --font-heading-scale: 1.0;
554
555        --color-base-text: 18, 18, 18;
556        --color-shadow: 18, 18, 18;
557        --color-base-background-1: 255, 255, 255;
558        --color-base-background-2: 243, 243, 243;
559        --color-base-solid-button-labels: 255, 255, 255;
560        --color-base-outline-button-labels: 18, 18, 18;
561        --color-base-accent-1: 229, 235, 239;
562        --color-base-accent-2: 51, 79, 180;
563        --payment-terms-background-color: #ffffff;
564
565        --gradient-base-background-1: #ffffff;
566        --gradient-base-background-2: #f3f3f3;
567        --gradient-base-accent-1: #e5ebef;
568        --gradient-base-accent-2: #334fb4;
569
570        --media-padding: px;
571        --media-border-opacity: 0.05;
572        --media-border-width: 1px;
573        --media-radius: 0px;
574        --media-shadow-opacity: 0.0;
575        --media-shadow-horizontal-offset: 0px;
576        --media-shadow-vertical-offset: 4px;
577        --media-shadow-blur-radius: 5px;
578        --media-shadow-visible: 0;
579
580        --page-width: 160rem;
581        --page-width-margin: 0rem;
582
583        --product-card-image-padding: 0.0rem;
584        --product-card-corner-radius: 0.0rem;
585        --product-card-text-alignment: left;
586        --product-card-border-width: 0.0rem;
587        --product-card-border-opacity: 0.1;
588        --product-card-shadow-opacity: 0.0;
589        --product-card-shadow-visible: 0;
590        --product-card-shadow-horizontal-offset: 0.0rem;
591        --product-card-shadow-vertical-offset: 0.4rem;
592        --product-card-shadow-blur-radius: 0.5rem;
593
594        --collection-card-image-padding: 0.0rem;
595        --collection-card-corner-radius: 0.0rem;
596        --collection-card-text-alignment: left;
597        --collection-card-border-width: 0.0rem;
598        --collection-card-border-opacity: 0.1;
599        --collection-card-shadow-opacity: 0.0;
600        --collection-card-shadow-visible: 0;
601        --collection-card-shadow-horizontal-offset: 0.0rem;
602        --collection-card-shadow-vertical-offset: 0.4rem;
603        --collection-card-shadow-blur-radius: 0.5rem;
604
605        --blog-card-image-padding: 0.0rem;
606        --blog-card-corner-radius: 0.0rem;
607        --blog-card-text-alignment: left;
608        --blog-card-border-width: 0.0rem;
609        --blog-card-border-opacity: 0.1;
610        --blog-card-shadow-opacity: 0.0;
611        --blog-card-shadow-visible: 0;
612        --blog-card-shadow-horizontal-offset: 0.0rem;
613        --blog-card-shadow-vertical-offset: 0.4rem;
614        --blog-card-shadow-blur-radius: 0.5rem;
615
616        --badge-corner-radius: 4.0rem;
617
618        --popup-border-width: 1px;
619        --popup-border-opacity: 0.1;
620        --popup-corner-radius: 0px;
621        --popup-shadow-opacity: 0.0;
622        --popup-shadow-horizontal-offset: 0px;
623        --popup-shadow-vertical-offset: 4px;
624        --popup-shadow-blur-radius: 5px;
625
626        --drawer-border-width: 21px;
627        --drawer-border-opacity: 0.1;
628        --drawer-shadow-opacity: 0.9;
629        --drawer-shadow-horizontal-offset: 0px;
630        --drawer-shadow-vertical-offset: 4px;
631        --drawer-shadow-blur-radius: 5px;
632
633        --spacing-sections-desktop: 0px;
634        --spacing-sections-mobile: 0px;
635
636        --grid-desktop-vertical-spacing: 8px;
637        --grid-desktop-horizontal-spacing: 8px;
638        --grid-mobile-vertical-spacing: 4px;
639        --grid-mobile-horizontal-spacing: 4px;
640
641        --text-boxes-border-opacity: 0.1;
642        --text-boxes-border-width: 0px;
643        --text-boxes-radius: 0px;
644        --text-boxes-shadow-opacity: 0.0;
645        --text-boxes-shadow-visible: 0;
646        --text-boxes-shadow-horizontal-offset: 0px;
647        --text-boxes-shadow-vertical-offset: 4px;
648        --text-boxes-shadow-blur-radius: 5px;
649
650        --buttons-radius: 0px;
651        --buttons-radius-outset: 0px;
652        --buttons-border-width: 1px;
653        --buttons-border-opacity: 1.0;
654        --buttons-shadow-opacity: 0.0;
655        --buttons-shadow-visible: 0;
656        --buttons-shadow-horizontal-offset: 0px;
657        --buttons-shadow-vertical-offset: 4px;
658        --buttons-shadow-blur-radius: 5px;
659        --buttons-border-offset: 0px;
660
661        --inputs-radius: 0px;
662        --inputs-border-width: 1px;
663        --inputs-border-opacity: 0.55;
664        --inputs-shadow-opacity: 0.0;
665        --inputs-shadow-horizontal-offset: 0px;
666        --inputs-margin-offset: 0px;
667        --inputs-shadow-vertical-offset: 4px;
668        --inputs-shadow-blur-radius: 5px;
669        --inputs-radius-outset: 0px;
670
671        --variant-pills-radius: 40px;
672        --variant-pills-border-width: 1px;
673        --variant-pills-border-opacity: 0.55;
674        --variant-pills-shadow-opacity: 0.0;
675        --variant-pills-shadow-horizontal-offset: 0px;
676        --variant-pills-shadow-vertical-offset: 4px;
677        --variant-pills-shadow-blur-radius: 5px;
678      }
679
680      *,
681      *::before,
682      *::after {
683        box-sizing: inherit;
684      }
685
686      html {
687        box-sizing: border-box;
688        font-size: calc(var(--font-body-scale) * 62.5%);
689        height: 100%;
690      }
691
692      body {
693        display: grid;
694        grid-template-rows: auto auto 1fr auto;
695        grid-template-columns: 100%;
696        min-height: 100%;
697        margin: 0;
698        font-size: 1.5rem;
699        letter-spacing: 0.06rem;
700        line-height: calc(1 + 0.8 / var(--font-body-scale));
701        font-family: var(--font-body-family);
702        font-style: var(--font-body-style);
703        font-weight: var(--font-body-weight);
704      }
705
706      @media screen and (min-width: 750px) {
707        body {
708          font-size: 1.6rem;
709        }
710      }
711    </style>
712
713    <link href="//codendesigner.com/cdn/shop/t/19/assets/base.css?v=83092133441720682701748333773" rel="stylesheet" type="text/css" media="all" />
714    <link href="//codendesigner.com/cdn/shop/t/19/assets/normalize.css?v=175179314660975551001748333776" rel="stylesheet" type="text/css" media="all" />
715    <link href="//codendesigner.com/cdn/shop/t/19/assets/cnd.css?v=180196696459049152001753970594" rel="stylesheet" type="text/css" media="all" />
716    <link href="//codendesigner.com/cdn/shop/t/19/assets/cnd-cms.css?v=128078443424232210411753965176" rel="stylesheet" type="text/css" media="all" />
717    <link href="//codendesigner.com/cdn/shop/t/19/assets/custom.css?v=149109513906364926991748333775" rel="stylesheet" type="text/css" media="all" />
718<script src="https://kit.fontawesome.com/0bf21b99b2.js" crossorigin="anonymous" defer="defer"></script>
718
719    
719<script src="https://unpkg.com/[email protected]/dist/boxicons.js" defer="defer"></script>
719
720
721    <style data-shopify>
722      @media (min-width:992px) {
723      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933ef1"] {
724        -webkit-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
725        -moz-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
726        -ms-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
727        transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
728        transform-style: preserve-3d;
729        display: none;
730      }
731
732      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933ef0"] {
733        opacity: 0;
734        -webkit-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
735        -moz-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
736        -ms-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
737        transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
738      }
739
740      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f02"] {
741        -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
742        -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
743        -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
744        transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
745        opacity: 0;
746      }
747
748      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f01"] {
749        display: inline-block;
750      }
751
752      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f04"] {
753        -webkit-transform: translate3d(0, 120%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
754        -moz-transform: translate3d(0, 120%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
755        -ms-transform: translate3d(0, 120%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
756        transform: translate3d(0, 120%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
757        opacity: 0;
758      }
759
760      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f07"] {
761        -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
762        -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
763        -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
764        transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
765        opacity: 0;
766      }
767
768      html.w-mod-js:not(.w-mod-ix) [data-w-id="ef9cd283-431b-135a-cd54-958345c329ac"] {
769        -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
770        -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
771        -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
772        transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
773        opacity: 0;
774      }
775
776      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f0b"] {
777        -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
778        -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
779        -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
780        transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
781        opacity: 0;
782      }
783
784      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f0f"] {
785        -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
786        -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
787        -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
788        transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
789        opacity: 0;
790      }
791
792      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f03"] {
793        display: inline-block;
794      }
795
796      html.w-mod-js:not(.w-mod-ix) [data-w-id="d920c41c-a473-f0dc-8a28-cad546829492"] {
797        display: inline-block;
798      }
799
800      html.w-mod-js:not(.w-mod-ix) [data-w-id="d920c41c-a473-f0dc-8a28-cad546829495"] {
801        display: inline-block;
802      }
803
804      html.w-mod-js:not(.w-mod-ix) [data-w-id="10de7092-6cb3-8e31-1e74-497d6af33706"] {
805        display: inline-block;
806      }
807
808      html.w-mod-js:not(.w-mod-ix) [data-w-id="10de7092-6cb3-8e31-1e74-497d6af33709"] {
809        display: inline-block;
810      }
811
812      html.w-mod-js:not(.w-mod-ix) [data-w-id="6640db38-f9b8-2fa1-db3b-8ee7af346104"] {
813        display: inline-block;
814      }
815
816      html.w-mod-js:not(.w-mod-ix) [data-w-id="6640db38-f9b8-2fa1-db3b-8ee7af346107"] {
817        display: inline-block;
818      }
819
820      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933efd"] {
821        width: 0px;
822      }
823
824      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f11"] {
825        -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
826        -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
827        -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
828        transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
829        opacity: 0;
830      }
831
832      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f18"] {
833        -webkit-transform: translate3d(0, -40px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
834        -moz-transform: translate3d(0, -40px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
835        -ms-transform: translate3d(0, -40px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
836        transform: translate3d(0, -40px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
837        opacity: 0;
838      }
839
840      html.w-mod-js:not(.w-mod-ix) [data-w-id="72850cfe-8410-268d-1544-d7a5e381cba1"] {
841        height: 816px;
842      }
843
844      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933ef8"] {
845        -webkit-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
846        -moz-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
847        -ms-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
848        transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
849        transform-style: preserve-3d;
850        display: none;
851      }
852
853      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933ef7"] {
854        opacity: 0;
855        -webkit-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
856        -moz-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
857        -ms-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
858        transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
859      }
860    }
861
862    @media (max-width:991px) and (min-width:768px) {
863      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933ef1"] {
864        -webkit-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
865        -moz-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
866        -ms-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
867        transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
868        transform-style: preserve-3d;
869        display: none;
870      }
871
872      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933ef0"] {
873        opacity: 0;
874        -webkit-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
875        -moz-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
876        -ms-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
877        transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
878      }
879
880      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f02"] {
881        -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
882        -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
883        -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
884        transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
885        opacity: 0;
886      }
887
888      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f01"] {
889        display: inline-block;
890      }
891
892      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f04"] {
893        -webkit-transform: translate3d(0, 120%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
894        -moz-transform: translate3d(0, 120%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
895        -ms-transform: translate3d(0, 120%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
896        transform: translate3d(0, 120%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
897        opacity: 0;
898      }
899
900      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f07"] {
901        -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
902        -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
903        -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
904        transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
905        opacity: 0;
906      }
907
908      html.w-mod-js:not(.w-mod-ix) [data-w-id="ef9cd283-431b-135a-cd54-958345c329ac"] {
909        -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
910        -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
911        -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
912        transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
913        opacity: 0;
914      }
915
916      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f0b"] {
917        -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
918        -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
919        -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
920        transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
921        opacity: 0;
922      }
923
924      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f0f"] {
925        -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
926        -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
927        -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
928        transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
929        opacity: 0;
930      }
931
932      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f03"] {
933        display: inline-block;
934      }
935
936      html.w-mod-js:not(.w-mod-ix) [data-w-id="d920c41c-a473-f0dc-8a28-cad546829492"] {
937        display: inline-block;
938      }
939
940      html.w-mod-js:not(.w-mod-ix) [data-w-id="d920c41c-a473-f0dc-8a28-cad546829495"] {
941        display: inline-block;
942      }
943
944      html.w-mod-js:not(.w-mod-ix) [data-w-id="10de7092-6cb3-8e31-1e74-497d6af33706"] {
945        display: inline-block;
946      }
947
948      html.w-mod-js:not(.w-mod-ix) [data-w-id="10de7092-6cb3-8e31-1e74-497d6af33709"] {
949        display: inline-block;
950      }
951
952      html.w-mod-js:not(.w-mod-ix) [data-w-id="6640db38-f9b8-2fa1-db3b-8ee7af346104"] {
953        display: inline-block;
954      }
955
956      html.w-mod-js:not(.w-mod-ix) [data-w-id="6640db38-f9b8-2fa1-db3b-8ee7af346107"] {
957        display: inline-block;
958      }
959
960      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933efd"] {
961        width: 0px;
962      }
963
964      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f11"] {
965        -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
966        -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
967        -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
968        transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
969        opacity: 0;
970      }
971
972      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f18"] {
973        -webkit-transform: translate3d(0, -40px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
974        -moz-transform: translate3d(0, -40px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
975        -ms-transform: translate3d(0, -40px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
976        transform: translate3d(0, -40px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
977        opacity: 0;
978      }
979
980      html.w-mod-js:not(.w-mod-ix) [data-w-id="72850cfe-8410-268d-1544-d7a5e381cba1"] {
981        height: 816px;
982      }
983
984      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933ef8"] {
985        -webkit-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
986        -moz-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
987        -ms-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
988        transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
989        transform-style: preserve-3d;
990        display: none;
991      }
992
993      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933ef7"] {
994        opacity: 0;
995        -webkit-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
996        -moz-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
997        -ms-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
998        transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0
998) rotateY(0) rotateZ(0) skew(0, 0);
999      }
1000    }
1001
1002    @media (max-width:767px) and (min-width:480px) {
1003      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933ef1"] {
1004        -webkit-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
1005        -moz-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
1006        -ms-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
1007        transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
1008        transform-style: preserve-3d;
1009        display: none;
1010      }
1011
1012      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933ef0"] {
1013        opacity: 0;
1014        -webkit-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1015        -moz-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1016        -ms-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1017        transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1018      }
1019
1020      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f02"] {
1021        -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1022        -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1023        -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1024        transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1025        opacity: 0;
1026      }
1027
1028      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f01"] {
1029        display: inline-block;
1030      }
1031
1032      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f04"] {
1033        -webkit-transform: translate3d(0, 120%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1034        -moz-transform: translate3d(0, 120%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1035        -ms-transform: translate3d(0, 120%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1036        transform: translate3d(0, 120%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1037        opacity: 0;
1038      }
1039
1040      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f07"] {
1041        -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1042        -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1043        -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1044        transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1045        opacity: 0;
1046      }
1047
1048      html.w-mod-js:not(.w-mod-ix) [data-w-id="ef9cd283-431b-135a-cd54-958345c329ac"] {
1049        -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1050        -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1051        -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1052        transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1053        opacity: 0;
1054      }
1055
1056      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f0b"] {
1057        -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1058        -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1059        -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1060        transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1061        opacity: 0;
1062      }
1063
1064      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f0f"] {
1065        -webkit-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1066        -moz-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1067        -ms-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1068        transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1069        opacity: 0;
1070      }
1071
1072      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f03"] {
1073        display: inline-block;
1074      }
1075
1076      html.w-mod-js:not(.w-mod-ix) [data-w-id="d920c41c-a473-f0dc-8a28-cad546829492"] {
1077        display: inline-block;
1078      }
1079
1080      html.w-mod-js:not(.w-mod-ix) [data-w-id="d920c41c-a473-f0dc-8a28-cad546829495"] {
1081        display: inline-block;
1082      }
1083
1084      html.w-mod-js:not(.w-mod-ix) [data-w-id="10de7092-6cb3-8e31-1e74-497d6af33706"] {
1085        display: inline-block;
1086      }
1087
1088      html.w-mod-js:not(.w-mod-ix) [data-w-id="10de7092-6cb3-8e31-1e74-497d6af33709"] {
1089        display: inline-block;
1090      }
1091
1092      html.w-mod-js:not(.w-mod-ix) [data-w-id="6640db38-f9b8-2fa1-db3b-8ee7af346104"] {
1093        display: inline-block;
1094      }
1095
1096      html.w-mod-js:not(.w-mod-ix) [data-w-id="6640db38-f9b8-2fa1-db3b-8ee7af346107"] {
1097        display: inline-block;
1098      }
1099
1100      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933efd"] {
1101        width: 0px;
1102      }
1103
1104      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f11"] {
1105        -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1106        -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1107        -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1108        transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1109        opacity: 0;
1110      }
1111
1112      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f18"] {
1113        -webkit-transform: translate3d(0, -40px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1114        -moz-transform: translate3d(0, -40px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1115        -ms-transform: translate3d(0, -40px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1116        transform: translate3d(0, -40px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1117        opacity: 0;
1118      }
1119
1120      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933ef8"] {
1121        -webkit-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
1122        -moz-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
1123        -ms-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
1124        transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
1125        transform-style: preserve-3d;
1126        display: none;
1127      }
1128
1129      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933ef7"] {
1130        opacity: 0;
1131        -webkit-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1132        -moz-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1133        -ms-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1134        transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1135      }
1136    }
1137
1138    @media (max-width:479px) {
1139      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933ef1"] {
1140        -webkit-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
1141        -moz-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
1142        -ms-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
1143        transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
1144        transform-style: preserve-3d;
1145        display: none;
1146      }
1147
1148      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933ef0"] {
1149        opacity: 0;
1150        -webkit-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1151        -moz-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1152        -ms-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1153        transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1154      }
1155
1156      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f02"] {
1157        -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1158        -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1159        -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1160        transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1161        opacity: 0;
1162      }
1163
1164      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f01"] {
1165        display: inline-block;
1166      }
1167
1168      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f04"] {
1169        -webkit-transform: translate3d(0, 120%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1170        -moz-transform: translate3d(0, 120%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1171        -ms-transform: translate3d(0, 120%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1172        transform: translate3d(0, 120%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1173        opacity: 0;
1174      }
1175
1176      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f07"] {
1177        -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1178        -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1179        -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1180        transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1181        opacity: 0;
1182      }
1183
1184      html.w-mod-js:not(.w-mod-ix) [data-w-id="ef9cd283-431b-135a-cd54-958345c329ac"] {
1185        -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1186        -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1187        -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1188        transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1189        opacity: 0;
1190      }
1191
1192      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f0b"] {
1193        -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1194        -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1195        -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1196        transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1197        opacity: 0;
1198      }
1199
1200      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f0f"] {
1201        -webkit-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1202        -moz-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1203        -ms-transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1204        transform: translate3d(0, 105%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1205        opacity: 0;
1206      }
1207
1208      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f03"] {
1209        display: inline-block;
1210      }
1211
1212      html.w-mod-js:not(.w-mod-ix) [data-w-id="d920c41c-a473-f0dc-8a28-cad546829492"] {
1213        display: inline-block;
1214      }
1215
1216      html.w-mod-js:not(.w-mod-ix) [data-w-id="d920c41c-a473-f0dc-8a28-cad546829495"] {
1217        display: inline-block;
1218      }
1219
1220      html.w-mod-js:not(.w-mod-ix) [data-w-id="10de7092-6cb3-8e31-1e74-497d6af33706"] {
1221        display: inline-block;
1222      }
1223
1224      html.w-mod-js:not(.w-mod-ix) [data-w-id="10de7092-6cb3-8e31-1e74-497d6af33709"] {
1225        display: inline-block;
1226      }
1227
1228      html.w-mod-js:not(.w-mod-ix) [data-w-id="6640db38-f9b8-2fa1-db3b-8ee7af346104"] {
1229        display: inline-block;
1230      }
1231
1232      html.w-mod-js:not(.w-mod-ix) [data-w-id="6640db38-f9b8-2fa1-db3b-8ee7af346107"] {
1233        display: inline-block;
1234      }
1235
1236      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933efd"] {
1237        width: 0px;
1238      }
1239
1240      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f11"] {
1241        -webkit-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1242        -moz-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1243        -ms-transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1244        transform: translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1245        opacity: 0;
1246      }
1247
1248      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933f18"] {
1249        -webkit-transform: translate3d(0, -40px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1250        -moz-transform: translate3d(0, -40px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1251        -ms-transform: translate3d(0, -40px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1252        transform: translate3d(0, -40px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1253        opacity: 0;
1254      }
1255
1256      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933ef8"] {
1257        -webkit-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
1258        -moz-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
1259        -ms-transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
1260        transform: translate3d(null, 200px, 0) scale3d(1, 1, 1) rotateX(-100deg) rotateY(null) rotateZ(240deg) skew(0, 0);
1261        transform-style: preserve-3d;
1262        display: none;
1263      }
1264
1265      html.w-mod-js:not(.w-mod-ix) [data-w-id="f17e5904-387e-1357-91df-287b81933ef7"] {
1266        opacity: 0;
1267        -webkit-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1268        -moz-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1269        -ms-transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1270        transform: translate3d(0, -100px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
1271      }
1272    }
1273    </style>
1274<link rel="preload" as="font" href="//codendesigner.com/cdn/fonts/inter/inter_n4.b2a3f24c19b4de56e8871f609e73ca7f6d2e2bb9.woff2" type="font/woff2" crossori
1274gin><link rel="preload" as="font" href="//codendesigner.com/cdn/fonts/inter/inter_n7.02711e6b374660cfc7915d1afc1c204e633421e4.woff2" type="font/woff2" crossorigin><link rel="stylesheet" href="//codendesigner.com/cdn/shop/t/19/assets/component-predictive-search.css?v=85913294783299393391748333774" media="print" onload="this.media='all'">
1274<script>document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
1275    if (Shopify.designMode) {
1276      document.documentElement.classList.add('shopify-design-mode');
1277    }
1278    </script>
1278
1279    <!-- [if lt IE 9]>
1279<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script>
1279<![endif] -->
1280    
1280<script
1281      type="text/javascript">!function (o, c) { var n = c.documentElement, t = " w-mod-"; n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch") }(window, document);</script>
1281
1282
1283    <!-- Hotjar Tracking Code for https://codendesigner.com/ -->
1284    
1284<script>
vendor: 137 bytes, lines 1284-1287
1284
1285        (function(h,o,t,j,a,r){
1286            h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
1287            h._hjSettings={hjid:
12876415149
vendor: 282 bytes, lines 1287-1293
1287,hjsv:6};
1288            a=o.getElementsByTagName('head')[0];
1289            r=o.createElement('script');r.async=1;
1290            r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
1291            a.appendChild(r);
1292        })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
1293    
1293</script>
1293
1294
1295    
1296  
vendor: 4,451 bytes, lines 1297-1313
1297<script>
1298window.addEventListener('load', (e) => { 
1299
1300let enable = "";
1301
1302if( !(document.querySelector('img').classList.contains("lazyload"))){
1303var images = document.getElementsByTagName("img");
1304
1305// Loop through each image element
1306for (var i = 0; i < images.length; i++) {
1307// Add the desired class name to the class attribute
1308images[i].className += " lazyload";
1309}
1310//console.log('No Class ')
1311/*! lazysizes - v5.2.2 */
1312
1313!function(e){var t=function(u,D,f){"use strict";var k,H;if(function(){var e;var t={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:true,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:true,ricTimeout:0,throttleDelay:125};H=u.lazySizesConfig||u.lazysizesConfig||{};for(e in t){if(!(e in H)){H[e]=t[e]}}}(),!D||!D.getElementsByClassName){return{init:function(){},cfg:H,noSupport:true}}var O=D.documentElement,a=u.HTMLPictureElement,P="addEventListener",$="getAttribute",q=u[P].bind(u),I=u.setTimeout,U=u.requestAnimationFrame||I,l=u.requestIdleCallback,j=/^picture$/i,r=["load","error","lazyincluded","_lazyloaded"],i={},G=Array.prototype.forEach,J=function(e,t){if(!i[t]){i[t]=new RegExp("(\\s|^)"+t+"(\\s|$)")}return i[t].test(e[$]("class")||"")&&i[t]},K=function(e,t){if(!J(e,t)){e.setAttribute("class",(e[$]("class")||"").trim()+" "+t)}},Q=function(e,t){var i;if(i=J(e,t)){e.setAttribute("class",(e[$]("class")||"").replace(i," "))}},V=function(t,i,e){var a=e?P:"removeEventListener";if(e){V(t,i)}r.forEach(function(e){t[a](e,i)})},X=function(e,t,i,a,r){var n=D.createEvent("Event");if(!i){i={}}i.instance=k;n.initEvent(t,!a,!r);n.detail=i;e.dispatchEvent(n);return n},Y=function(e,t){var i;if(!a&&(i=u.picturefill||H.pf)){if(t&&t.src&&!e[$]("srcset")){e.setAttribute("srcset",t.src)}i({reevaluate:true,elements:[e]})}else if(t&&t.src){e.src=t.src}},Z=function(e,t){return(getComputedStyle(e,null)||{})[t]},s=function(e,t,i){i=i||e.offsetWidth;while(i<H.minSize&&t&&!e._lazysizesWidth){i=t.offsetWidth;t=t.parentNode}return i},ee=function(){var i,a;var t=[];var r=[];var n=t;var s=function(){var e=n;n=t.length?r:t;i=true;a=false;while(e.length){e.shift()()}i=false};var e=function(e,t){if(i&&!t){e.apply(this,arguments)}else{n.push(e);if(!a){a=true;(D.hidden?I:U)(s)}}};e._lsFlush=s;return e}(),te=function(i,e){return e?function(){ee(i)}:function(){var e=this;var t=arguments;ee(function(){i.apply(e,t)})}},ie=function(e){var i;var a=0;var r=H.throttleDelay;var n=H.ricTimeout;var t=function(){i=false;a=f.now();e()};var s=l&&n>49?function(){l(t,{timeout:n});if(n!==H.ricTimeout){n=H.ricTimeout}}:te(function(){I(t)},true);return function(e){var t;if(e=e===true){n=33}if(i){return}i=true;t=r-(f.now()-a);if(t<0){t=0}if(e||t<9){s()}else{I(s,t)}}},ae=function(e){var t,i;var a=99;var r=function(){t=null;e()};var n=function(){var e=f.now()-i;if(e<a){I(n,a-e)}else{(l||r)(r)}};return function(){i=f.now();if(!t){t=I(n,a)}}},e=function(){var v,m,c,h,e;var y,z,g,p,C,b,A;var n=/^img$/i;var d=/^iframe$/i;var E="onscroll"in u&&!/(gle|ing)bot/.test(navigator.userAgent);var _=0;var w=0;var N=0;var M=-1;var x=function(e){N--;if(!e||N<0||!e.target){N=0}};var W=function(e){if(A==null){A=Z(D.body,"visibility")=="hidden"}return A||!(Z(e.parentNode,"visibility")=="hidden"&&Z(e,"visibility")=="hidden")};var S=function(e,t){var i;var a=e;var r=W(e);g-=t;b+=t;p-=t;C+=t;while(r&&(a=a.offsetParent)&&a!=D.body&&a!=O){r=(Z(a,"opacity")||1)>0;if(r&&Z(a,"overflow")!="visible"){i=a.getBoundingClientRect();r=C>i.left&&p<i.right&&b>i.top-1&&g<i.bottom+1}}return r};var t=function(){var e,t,i,a,r,n,s,l,o,u,f,c;var d=k.elements;if((h=H.loadMode)&&N<8&&(e=d.length)){t=0;M++;for(;t<e;t++){if(!d[t]||d[t]._lazyRace){continue}if(!E||k.prematureUnveil&&k.prematureUnveil(d[t])){R(d[t]);continue}if(!(l=d[t][$]("data-expand"))||!(n=l*1)){n=w}if(!u){u=!H.expand||H.expand<1?O.clientHeight>500&&O.clientWidth>500?500:370:H.expand;k._defEx=u;f=u*H.expFactor;c=H.hFac;A=null;if(w<f&&N<1&&M>2&&h>2&&!D.hidden){w=f;M=0}else if(h>1&&M>1&&N<6){w=u}else{w=_}}if(o!==n){y=innerWidth+n*c;z=innerHeight+n;s=n*-1;o=n}i=d[t].getBoundingClientRect();if((b=i.bottom)>=s&&(g=i.top)<=z&&(C=i.right)>=s*c&&(p=i.left)<=y&&(b||C||p||g)&&(H.loadHidden||W(d[t]))&&(m&&N<3&&!l&&(h<3||M<4)||S(d[t],n))){R(d[t]);r=true;if(N>9){break}}else if(!r&&m&&!a&&N<4&&M<4&&h>
vendor: 3,802 bytes, lines 1313-1323
13132&&(v[0]||H.preloadAfterLoad)&&(v[0]||!l&&(b||C||p||g||d[t][$](H.sizesAttr)!="auto"))){a=v[0]||d[t]}}if(a&&!r){R(a)}}};var i=ie(t);var B=function(e){var t=e.target;if(t._lazyCache){delete t._lazyCache;return}x(e);K(t,H.loadedClass);Q(t,H.loadingClass);V(t,L);X(t,"lazyloaded")};var a=te(B);var L=function(e){a({target:e.target})};var T=function(t,i){try{t.contentWindow.location.replace(i)}catch(e){t.src=i}};var F=function(e){var t;var i=e[$](H.srcsetAttr);if(t=H.customMedia[e[$]("data-media")||e[$]("media")]){e.setAttribute("media",t)}if(i){e.setAttribute("srcset",i)}};var s=te(function(t,e,i,a,r){var n,s,l,o,u,f;if(!(u=X(t,"lazybeforeunveil",e)).defaultPrevented){if(a){if(i){K(t,H.autosizesClass)}else{t.setAttribute("sizes",a)}}s=t[$](H.srcsetAttr);n=t[$](H.srcAttr);if(r){l=t.parentNode;o=l&&j.test(l.nodeName||"")}f=e.firesLoad||"src"in t&&(s||n||o);u={target:t};K(t,H.loadingClass);if(f){clearTimeout(c);c=I(x,2500);V(t,L,true)}if(o){G.call(l.getElementsByTagName("source"),F)}if(s){t.setAttribute("srcset",s)}else if(n&&!o){if(d.test(t.nodeName)){T(t,n)}else{t.src=n}}if(r&&(s||o)){Y(t,{src:n})}}if(t._lazyRace){delete t._lazyRace}Q(t,H.lazyClass);ee(function(){var e=t.complete&&t.naturalWidth>1;if(!f||e){if(e){K(t,"ls-is-cached")}B(u);t._lazyCache=true;I(function(){if("_lazyCache"in t){delete t._lazyCache}},9)}if(t.loading=="lazy"){N--}},true)});var R=function(e){if(e._lazyRace){return}var t;var i=n.test(e.nodeName);var a=i&&(e[$](H.sizesAttr)||e[$]("sizes"));var r=a=="auto";if((r||!m)&&i&&(e[$]("src")||e.srcset)&&!e.complete&&!J(e,H.errorClass)&&J(e,H.lazyClass)){return}t=X(e,"lazyunveilread").detail;if(r){re.updateElem(e,true,e.offsetWidth)}e._lazyRace=true;N++;s(e,t,r,a,i)};var r=ae(function(){H.loadMode=3;i()});var l=function(){if(H.loadMode==3){H.loadMode=2}r()};var o=function(){if(m){return}if(f.now()-e<999){I(o,999);return}m=true;H.loadMode=3;i();q("scroll",l,true)};return{_:function(){e=f.now();k.elements=D.getElementsByClassName(H.lazyClass);v=D.getElementsByClassName(H.lazyClass+" "+H.preloadClass);q("scroll",i,true);q("resize",i,true);q("pageshow",function(e){if(e.persisted){var t=D.querySelectorAll("."+H.loadingClass);if(t.length&&t.forEach){U(function(){t.forEach(function(e){if(e.complete){R(e)}})})}}});if(u.MutationObserver){new MutationObserver(i).observe(O,{childList:true,subtree:true,attributes:true})}else{O[P]("DOMNodeInserted",i,true);O[P]("DOMAttrModified",i,true);setInterval(i,999)}q("hashchange",i,true);["focus","mouseover","click","load","transitionend","animationend"].forEach(function(e){D[P](e,i,true)});if(/d$|^c/.test(D.readyState)){o()}else{q("load",o);D[P]("DOMContentLoaded",i);I(o,2e4)}if(k.elements.length){t();ee._lsFlush()}else{i()}},checkElems:i,unveil:R,_aLSL:l}}(),re=function(){var i;var n=te(function(e,t,i,a){var r,n,s;e._lazysizesWidth=a;a+="px";e.setAttribute("sizes",a);if(j.test(t.nodeName||"")){r=t.getElementsByTagName("source");for(n=0,s=r.length;n<s;n++){r[n].setAttribute("sizes",a)}}if(!i.detail.dataAttr){Y(e,i.detail)}});var a=function(e,t,i){var a;var r=e.parentNode;if(r){i=s(e,r,i);a=X(e,"lazybeforesizes",{width:i,dataAttr:!!t});if(!a.defaultPrevented){i=a.detail.width;if(i&&i!==e._lazysizesWidth){n(e,r,a,i)}}}};var e=function(){var e;var t=i.length;if(t){e=0;for(;e<t;e++){a(i[e])}}};var t=ae(e);return{_:function(){i=D.getElementsByClassName(H.autosizesClass);q("resize",t)},checkElems:t,updateElem:a}}(),t=function(){if(!t.i&&D.getElementsByClassName){t.i=true;re._();e._()}};return I(function(){H.init&&t()}),k={cfg:H,autoSizer:re,loader:e,init:t,uP:Y,aC:K,rC:Q,hC:J,fire:X,gW:s,rAF:ee}}(e,e.document,Date);e.lazySizes=t,"object"==typeof module&&module.exports&&(module.exports=t)}("undefined"!=typeof window?window:{});
1314
1315}
1316else{
1317    /*console.log('hasClass ');*/
1318}       
1319
1320});
1321
1322
1323</script>
1323
1324
1325 
1326<style>
1327  /* sb cls code */  
1328    body {
1329        -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
1330        -moz-animation: fadein 1s; /* Firefox < 16 */
1331            -ms-animation: fadein 1s; /* Internet Explorer */
1332            -o-animation: fadein 1s; /* Opera < 12.1 */
1333                animation: fadein 1s;
1334    }
1335
1336    @keyframes fadein {
1337        from { opacity: 0; }
1338        to   { opacity: 1; }
1339    }
1340
1341    /* Firefox < 16 */
1342    @-moz-keyframes fadein {
1343        from { opacity: 0; }
1344        to   { opacity: 1; }
1345    }
1346
1347    /* Safari, Chrome and Opera > 12.1 */
1348    @-webkit-keyframes fadein {
1349        from { opacity: 0; }
1350        to   { opacity: 1; }
1351    }
1352
1353    /* Internet Explorer */
1354    @-ms-keyframes fadein {
1355        from { opacity: 0; }
1356        to   { opacity: 1; }
1357    }
1358
1359    /* Opera < 12.1 */
1360    @-o-keyframes fadein {
1361        from { opacity: 0; }
1362        to   { opacity: 1; }
1363    }</style>
1364 <link href="https://monorail-edge.shopifysvc.com" rel="dns-prefetch">
1365<script>(function(){if ("sendBeacon" in navigator && "performance" in window) {try {var session_token_from_headers = performance.getEntriesByType('navigation')[0].serverTiming.find(x => x.name == '_s').description;} catch {var session_token_from_headers = undefined;}var session_cookie_matches = document.cookie.match(/_shopify_s=([^;]*)/);var session_token_from_cookie = session_cookie_matches && session_cookie_matches.length === 2 ? session_cookie_matches[1] : "";var session_token = session_token_from_headers || session_token_from_cookie || "";function handle_abandonment_event(e) {var entries = performance.getEntries().filter(function(entry) {return /monorail-edge.shopifysvc.com/.test(entry.name);});if (!window.abandonment_tracked && entries.length === 0) {window.abandonment_tracked = true;var currentMs = Date.now();var navigation_start = performance.timing.navigationStart;var payload = {shop_id: 531955759,url: window.location.href,navigation_start,duration: currentMs - navigation_start,session_token,page_type: "index"};window.navigator.sendBeacon("https://monorail-edge.shopifysvc.com/v1/produce", JSON.stringify({schema_id: "online_store_buyer_site_abandonment/1.1",payload: payload,metadata: {event_created_at_ms: currentMs,event_sent_at_ms: currentMs}}));}}window.addEventListener('pagehide', handle_abandonment_event);}}());</script>
vendor: 1 bytes, line 1365
1365
1366<script>
1367  window.__TREKKIE_SHIM_QUEUE = window.__TREKKIE_SHIM_QUEUE || [];
1368</script>
vendor: 1 bytes, line 1368
1368
1369<script>(function(){var wpmLoader=function(){"use strict";var e=/Googlebot|Storebot-Google|bingbot|Baiduspider|YandexBot|DuckDuckBot|Slurp|facebookexternalhit|Twitterbot|LinkedInBot|Applebot|AdsBot-Google|Mediapartners-Google|APIs-Google|PetalBot|SemrushBot|AhrefsBot|MJ12bot|DotBot|Acunetix|PerplexityBot|Perplexity-User/i,t=/bytedance/i;function i(){try{var e=document.cookie;if(!e||"string"!=typeof e)return;for(var t=0,i=e.split(";");t<i.length;t++){var n=i[t],r=n.indexOf("=");if(-1!==r){var o=n.slice(0,r).trim();if(o){var a=void 0;try{a=decodeURIComponent(o)}catch(e){a=o}if("_shopify_s"===a){var d=n.slice(r+1).trim();try{return decodeURIComponent(d)}catch(e){return d}}}}}return}catch(e){return}}function n(e){try{"undefined"!=typeof console&&"function"==typeof console.warn&&console.warn(e)}catch(e){}}function r(e,t){return"string"==typeof e&&e.length>0&&e.length<=t?e:void 0}function o(e){var t;switch(null==(t=null==e?void 0:e.navigation)?void 0:t.type){case 0:return"navigate";case 1:return"reload";case 2:return"back_forward";default:return}}function a(){var e,t,i;try{var n=null==(i=null==(t=null==(e=self.ShopifyAnalytics)?void 0:e.lib)?void 0:t.trekkie)?void 0:i.state;return"awaiting-consent"===n||"initialized"===n?n:void 0}catch(e){return}}return function(d,s,u,l){var c=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};try{var p=c.trekkieShim;!0!==p&&"true"!==p||null!=window.__TREKKIE_SHIM_QUEUE||(window.__TREKKIE_SHIM_QUEUE=[])}catch(e){}var f,v,h,y,g=(v=(f={modern:/Edge?\/(1{2}[4-9]|1[2-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Firefox\/(1{2}[4-9]|1[2-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Chrom(ium|e)\/(9{2}|\d{3,})\.\d+(\.\d+|)|(Maci|X1{2}).+ Version\/(15\.\d+|(1[6-9]|[2-9]\d|\d{3,})\.\d+)([,.]\d+|)( \(\w+\)|)( Mobile\/\w+|) Safari\/|Chrome.+OPR\/(9{2}|\d{3,})\.\d+\.\d+|(CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS|CPU iPad OS)[ +]+(15[._]\d+|(1[6-9]|[2-9]\d|\d{3,})[._]\d+)([._]\d+|)|Android:?[ /-](14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})(\.\d+|)(\.\d+|)|Android.+Firefox\/(15\d|1[6-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+Chrom(ium|e)\/(14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|SamsungBrowser\/([2-9]\d|\d{3,})\.\d+/,legacy:/Edge?\/(1[6-9]|[2-9]\d|\d{3,})\.\d+(\.\d+|)|Firefox\/(5[4-9]|[6-9]\d|\d{3,})\.\d+(\.\d+|)|Chrom(ium|e)\/(5[1-9]|[6-9]\d|\d{3,})\.\d+(\.\d+|)([\d.]+$|.*Safari\/(?![\d.]+ Edge\/[\d.]+$))|(Maci|X1{2}).+ Version\/(10\.\d+|(1[1-9]|[2-9]\d|\d{3,})\.\d+)([,.]\d+|)( \(\w+\)|)( Mobile\/\w+|) Safari\/|Chrome.+OPR\/(3[89]|[4-9]\d|\d{3,})\.\d+\.\d+|(CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS|CPU iPad OS)[ +]+(10[._]\d+|(1[1-9]|[2-9]\d|\d{3,})[._]\d+)([._]\d+|)|Android:?[ /-](14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})(\.\d+|)(\.\d+|)|Mobile Safari.+OPR\/([89]\d|\d{3,})\.\d+\.\d+|Android.+Firefox\/(15\d|1[6-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+Chrom(ium|e)\/(14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+(UC? ?Browser|UCWEB|U3)[ /]?(15\.([5-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+)\.\d+|SamsungBrowser\/(5\.\d+|([6-9]|\d{2,})\.\d+)|Android.+MQ{2}Browser\/(14(\.(9|\d{2,})|)|(1[5-9]|[2-9]\d|\d{3,})(\.\d+|))(\.\d+|)|K[Aa][Ii]OS\/(3\.\d+|([4-9]|\d{2,})\.\d+)(\.\d+|)/}).modern,h=f.legacy,(y=navigator.userAgent).match(e)?"bot":y.match(v)?"modern":y.match(h)?"legacy":y.match(t)?"bot":"unknown"),m=function(e){var t,i,n=r(e,128);try{var a=window.performance,d=null==(t=null==a?void 0:a.getEntriesByType)?void 0:t.call(a,"navigation")[0];if(!d)return{requestId:n,navigationType:o(a)};var s="type"in d?r(d.type,64):void 0,u="serverTiming"in d&&Array.isArray(d.serverTiming)?d.serverTiming:[];return{requestId:null!=n?n:r(null==(i=u.find(function(e){return"requestID"===e.name}))?void 0:i.description,128),navigationType:s}}catch(e){return{requestId:n}}}(c.requestId),w=function(e){var t=e.version,r=e.browserTarget,o=e.surface,a=e.shopId,d=e.monorailEndpoint,s=window.location.href;return{emit:function(e){var u=e.status,l=e.errorMsg,c=e.failureReason,p=e.useKeepaliveFallback,f=void 0!==p&&p,v=e.navigationType,h=e.pagehidePersisted,y=e.requestId,g=e.trekkieState;if(d){var m,w;try{var b=(new Date).getTime();m=JSON.stringify({metadata:{event_sent_at_ms:b},events:[{schema_id:"web_pixels_manager_load/3.3",payload:{version:t,bundle_target:r,page_url:s,status:u,surface:o,error_msg:l,failure_reason:c,navigation_type:v,pagehide_persisted:h,request_id:y,trekkie_state:g,shop_id:a,visit_token:i()},metadata:{event_created_at_ms:b}}]})}catch(e){return}try{if("function"==typeof window.navigator.sendBeacon&&-1===(w=window.navigator.userAgent).indexOf("iPhone; CPU iPhone OS 12_")&&-1===w.indexOf("iPad; CPU OS 12_")&&-1===w.indexOf("iPod touch; CPU iPhone OS 12_")&&window.navigator.sendBeacon.bind(window.navigator)(d,m))return}catch(e){}if(f)try{"function"==typeof window.fetch&&window.fetch(d,{method:"POST",headers:{"Content-Type":"text/plain"},body:m,keepalive:!0}
1369).catch(function(){})}catch(e){}else try{var _=new XMLHttpRequest;_.open("POST",d,!0),_.setRequestHeader("Content-Type","text/plain"),_.send(m)}catch(e){n("[Web Pixels Manager] Got an unhandled error while logging to Monorail.")}}else n("[Web Pixels Manager] No Monorail endpoint provided, skipping logging.")}}}({version:u,browserTarget:g,surface:d.surface,shopId:d.shopId,monorailEndpoint:d.monorailEndpoint});if(Boolean(null==(_=null==(b=window.Shopify)?void 0:b.analytics)?void 0:_.replayQueue))w.emit({status:"setup-skipped",errorMsg:"replay queue already initialized."});else{var b,_;w.emit({status:"setup-started"}),window.Shopify=window.Shopify||{};var S=window.Shopify;S.analytics=S.analytics||{};var P=S.analytics;P.replayQueue=[],P.publish=function(e,t,i){return P.replayQueue.push([e,t,i]),!0};try{self.performance.mark("wpm:start")}catch(e){}var k,C="modern"===g?"modern":"legacy",E=(null!=l?l:{modern:"",legacy:""})[C],I=[(k={baseUrl:s,hashVersion:u,buildTarget:C}).baseUrl,"/wpm","/b",k.hashVersion,"modern"===k.buildTarget?"m":"l",".js"].join(""),O=!1,T=!1;try{c.browserTarget=g,function(){O=!0;try{window.addEventListener("pagehide",M)}catch(e){O=!1}}(),R(function(){try{R(x)}catch(e){D(e)}}),w.emit({status:"loading",requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()})}catch(e){D(e)}}function U(){var e;if(q(),!function(){var e,t;return Boolean(null==(t=null==(e=window.Shopify)?void 0:e.analytics)?void 0:t.initialized)}()){var t,i,n;try{if("function"!=typeof(null==(e=window.webPixelsManager)?void 0:e.init))return void A();if(!(null!==(n=i=t=window.webPixelsManager.init(d))&&"function"!=typeof n&&Object(n)===n&&"publish"in i&&"function"==typeof i.publish&&"publishCustomEvent"in i&&"function"==typeof i.publishCustomEvent&&"visitor"in i&&"function"==typeof i.visitor))return void A()}catch(e){return void A(e)}var r=window.Shopify.analytics;r.replayQueue.forEach(function(e){var i=e[0],n=e[1],r=e[2];t.publishCustomEvent(i,n,r)}),r.replayQueue=[],r.publish=t.publishCustomEvent,r.visitor=t.visitor,r.initialized=!0}}function A(e){B("manager_api_unavailable",void 0===e?void 0:Q(e))}function x(){B("script_load_failed","".concat(I," has failed to load"))}function B(e,t){T||(T=!0,q(),w.emit({status:"failed",errorMsg:t,failureReason:e,requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()}))}function M(e){O&&(q(),w.emit({status:"pagehide-while-loading",useKeepaliveFallback:!0,pagehidePersisted:e.persisted,requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()}))}function q(){O=!1;try{window.removeEventListener("pagehide",M)}catch(e){}}function R(e){var t;!function(e){var t=e.src,i=e.async,n=void 0===i||i,r=e.onload,o=e.onerror,a=e.sri,d=e.scriptDataAttributes,s=void 0===d?{}:d,u=document.createElement("script"),l=document.querySelector("head"),c=document.querySelector("body");if(u.async=n,u.src=t,a&&(u.integrity=a,u.crossOrigin="anonymous"),s)for(var p in s)if(Object.prototype.hasOwnProperty.call(s,p))try{u.dataset[p]=String(s[p])}catch(e){}if(r&&u.addEventListener("load",r),o&&u.addEventListener("error",o),l)l.appendChild(u);else{if(!c)throw new Error("Did not find a head or body element to append the script");c.appendChild(u)}}({src:I,async:!0,onload:U,onerror:e,sri:(t=E,"string"==typeof t&&/^sha384-[A-Za-z0-9+/=]+$/.test(t)?E:""),scriptDataAttributes:c})}function D(e){B("script_append_failed",Q(e))}function Q(e){return e instanceof Error?e.message:"Unknown error"}}}();wpmLoader({shopId: 531955759,storefrontBaseUrl: "https://codendesigner.com",extensionsBaseUrl: "https://extensions.shopifycdn.com/cdn/shopifycloud/web-pixels-manager",monorailEndpoint: "https://codendesigner.com/.well-known/shopify/monorail/unstable/produce_batch",surface: "storefront-renderer",enabledBetaFlags: ["4c64608a","16072cab","8450a54b"],webPixelsConfigList: [{"id":"2022768687","configuration":"{\"mailchimp_store_id\":\"store_xr75kg3esacv69id16s5\", \"mailchimp_user_id\":\"10534551\",\"mailchimp_list_id\":\"8157dbd43e\"}","eventPayloadVersion":"v1","runtimeContext":"STRICT","scriptVersion":"e357a49eadeb6216a959d63fa3fb8f55","type":"APP","apiClientId":2585307,"privacyPurposes":["ANALYTICS","MARKETING","SALE_OF_DATA"],"dataSharingAdjustments":{"protectedCustomerApprovalScopes":["read_customer_address","read_customer_email","read_customer_name","read_customer_personal_data","read_customer_phone"],"dataSharingControls":[]},"dataSharingState":"optimized","enabledFlags":["9a3ed68a"]},{"id":"865468463","configuration":"{\"webPixelName\":\"Judge.me\"}","eventPayloadVersion":"v1","runtimeContext":"STRICT","scriptVersion":"8acc938b1a30dc7624e304493ca567d7","type":"APP","apiClientId":683015,"privacyPurposes":["ANALYTICS"],"dataSharingAdjustments":{"protectedCustomerApprovalScopes":["read_customer_email","read_customer_name","read_customer_personal_data","read_customer_phone"],"dataSharingControls":["share_all_events"]}
1369,"dataSharingState":"unrestricted"},{"id":"378208303","configuration":"{\"config\":\"{\\\"google_tag_ids\\\":[\\\"G-43BV53EVLK\\\",\\\"GT-NNVRTHD\\\"],\\\"target_country\\\":\\\"US\\\",\\\"gtag_events\\\":[{\\\"type\\\":\\\"search\\\",\\\"action_label\\\":\\\"G-43BV53EVLK\\\"},{\\\"type\\\":\\\"begin_checkout\\\",\\\"action_label\\\":\\\"G-43BV53EVLK\\\"},{\\\"type\\\":\\\"remove_from_cart\\\",\\\"action_label\\\":\\\"G-43BV53EVLK\\\"},{\\\"type\\\":\\\"view_item\\\",\\\"action_label\\\":[\\\"G-43BV53EVLK\\\",\\\"MC-R2VJF12HM8\\\"]},{\\\"type\\\":\\\"purchase\\\",\\\"action_label\\\":[\\\"G-43BV53EVLK\\\",\\\"MC-R2VJF12HM8\\\"]},{\\\"type\\\":\\\"add_shipping_info\\\",\\\"action_label\\\":\\\"G-43BV53EVLK\\\"},{\\\"type\\\":\\\"page_view\\\",\\\"action_label\\\":[\\\"G-43BV53EVLK\\\",\\\"MC-R2VJF12HM8\\\"]},{\\\"type\\\":\\\"view_item_list\\\",\\\"action_label\\\":\\\"G-43BV53EVLK\\\"},{\\\"type\\\":\\\"add_payment_info\\\",\\\"action_label\\\":\\\"G-43BV53EVLK\\\"},{\\\"type\\\":\\\"add_to_cart\\\",\\\"action_label\\\":\\\"G-43BV53EVLK\\\"},{\\\"type\\\":\\\"view_cart\\\",\\\"action_label\\\":\\\"G-43BV53EVLK\\\"}],\\\"enable_monitoring_mode\\\":false}\"}","eventPayloadVersion":"v1","runtimeContext":"OPEN","scriptVersion":"a3321ca85cf5aaf6b57585fcd8d67b3a","type":"APP","apiClientId":1780363,"privacyPurposes":[],"dataSharingAdjustments":{"protectedCustomerApprovalScopes":["read_customer_address","read_customer_email","read_customer_name","read_customer_personal_data","read_customer_phone"],"dataSharingControls":["share_all_events"]},"dataSharingState":"optimized","enabledFlags":["9a3ed68a"]},{"id":"shopify-app-pixel","configuration":"{}","eventPayloadVersion":"v1","runtimeContext":"STRICT","scriptVersion":"0530","apiClientId":"shopify-pixel","type":"APP","privacyPurposes":["ANALYTICS","MARKETING"]},{"id":"shopify-custom-pixel","eventPayloadVersion":"v1","runtimeContext":"LAX","scriptVersion":"0530","apiClientId":"shopify-pixel","type":"CUSTOM","privacyPurposes":["ANALYTICS","MARKETING"]}],isMerchantRequest: false,initData: {"shop":{"name":"Codendesigner","paymentSettings":{"currencyCode":"USD"},"myshopifyDomain":"codendesigner.myshopify.com","countryCode":"GB","storefrontUrl":"https:\/\/codendesigner.com"},"customer":null,"cart":null,"checkout":null,"productVariants":[],"products":[],"purchasingCompany":null},},"https://codendesigner.com/cdn","87a86122w399bf3b8pd0403c97m2c07468c",{"modern":"","legacy":""},{"trekkieShim":true,"agentContext":true,"apiClientId":"580111","facebookCapiEnabled":"false","themeId":"144816865327","themePublished":"true","eventMetadataId":"99774f33-82db-46fc-94a3-5130c4af2be5","pageType":"home","shopId":"531955759","storefrontBaseUrl":"https:\/\/codendesigner.com","extensionBaseUrl":"https:\/\/extensions.shopifycdn.com\/cdn\/shopifycloud\/web-pixels-manager","surface":"storefront-renderer","enabledBetaFlags":"[\"4c64608a\", \"16072cab\", \"8450a54b\"]","isMerchantRequest":"false","hashVersion":"87a86122w399bf3b8pd0403c97m2c07468c","publish":"custom","events":"[[\"page_viewed\",{}]]"});})();</script>
1369<script>
1370  window.ShopifyAnalytics = window.ShopifyAnalytics || {};
1371  window.ShopifyAnalytics.meta = window.ShopifyAnalytics.meta || {};
1372  window.ShopifyAnalytics.meta.currency = 'USD';
1373  var meta = {"page":{"pageType":"home","requestId":"bdb4bd11-d97b-4136-9f48-a6cc796fd350-1791318283"}};
1374  for (var attr in meta) {
1375    window.ShopifyAnalytics.meta[attr] = meta[attr];
1376  }
1377</script>
vendor: 1 bytes, line 1377
1377
1378<script class="analytics">
1379  (function () {
1380    var customDocumentWrite = function(content) {
1381      var jquery = null;
1382
1383      if (window.jQuery) {
1384        jquery = window.jQuery;
1385      } else if (window.Checkout && window.Checkout.$) {
1386        jquery = window.Checkout.$;
1387      }
1388
1389      if (jquery) {
1390        jquery('body').append(content);
1391      }
1392    };
1393
1394    var hasLoggedConversion = function(token) {
1395      if (token) {
1396        return document.cookie.indexOf('loggedConversion=' + token) !== -1;
1397      }
1398      return false;
1399    }
1400
1401    var setCookieIfConversion = function(token) {
1402      if (token) {
1403        var twoMonthsFromNow = new Date(Date.now());
1404        twoMonthsFromNow.setMonth(twoMonthsFromNow.getMonth() + 2);
1405
1406        document.cookie = 'loggedConversion=' + token + '; expires=' + twoMonthsFromNow;
1407      }
1408    }
1409
1410    var trekkie = window.ShopifyAnalytics.lib = window.trekkie = window.trekkie || [];
1411    window.ShopifyAnalytics.lib.trekkie = window.trekkie;
1412    if (trekkie.integrations) {
1413      return;
1414    }
1415    trekkie.methods = [
1416      'identify',
1417      'page',
1418      'ready',
1419      'track',
1420      'trackForm',
1421      'trackLink'
1422    ];
1423    trekkie.factory = function(method) {
1424      return function() {
1425        var args = Array.prototype.slice.call(arguments);
1426        args.unshift(method);
1427        trekkie.push(args);
1428        if (method == 'track' || method == 'page') {
1429          var pageUrl;
1430          try {
1431            pageUrl = window.location.href;
1432          } catch (e) {}
1433          var pageReferrer;
1434          try {
1435            pageReferrer = document.referrer;
1436          } catch (e) {}
1437          try {
1438            if (window.__TREKKIE_SHIM_QUEUE == null) {
1439              window.__TREKKIE_SHIM_QUEUE = [];
1440            }
1441            window.__TREKKIE_SHIM_QUEUE.push({
1442              from: 'trekkie-stub',
1443              method: method,
1444              args: args.slice(1),
1445              pageContext: {
1446                url: pageUrl,
1447                referrer: pageReferrer
1448              }
1449            });
1450          } catch (e) {
1451            // no-op
1452          }
1453        }
1454        return trekkie;
1455      };
1456    };
1457    for (var i = 0; i < trekkie.methods.length; i++) {
1458      var key = trekkie.methods[i];
1459      trekkie[key] = trekkie.factory(key);
1460    }
1461    trekkie.load = function(config) {
1462      trekkie.config = config || {};
1463      trekkie.config.initialDocumentCookie = document.cookie;
1464      var first = document.getElementsByTagName('script')[0];
1465var script = document.createElement('script');
1466script.type = 'text/javascript';
1467script.onerror = function(e) {
1468  var scriptFallback = document.createElement('script');
1469  scriptFallback.type = 'text/javascript';
1470  scriptFallback.onerror = function(error) {
1471          var Monorail = {
1472      produce: function produce(monorailDomain, schemaId, payload) {
1473        var currentMs = new Date().getTime();
1474        var event = {
1475          schema_id: schemaId,
1476          payload: payload,
1477          metadata: {
1478            event_created_at_ms: currentMs,
1479            event_sent_at_ms: currentMs
1480          }
1481        };
1482        return Monorail.sendRequest("https://" + monorailDomain + "/v1/produce", JSON.stringify(event));
1483      },
1484      sendRequest: function sendRequest(endpointUrl, payload) {
1485        // Try the sendBeacon API
1486        if (window && window.navigator && typeof window.navigator.sendBeacon === 'function' && typeof window.Blob === 'function' && !Monorail.isIos12()) {
1487          var blobData = new window.Blob([payload], {
1488            type: 'text/plain'
1489          });
1490
1491          if (window.navigator.sendBeacon(endpointUrl, blobData)) {
1492            return true;
1493          } // sendBeacon was not successful
1494
1495        } // XHR beacon
1496
1497        var xhr = new XMLHttpRequest();
1498
1499        try {
1500          xhr.open('POST', endpointUrl);
1501          xhr.setRequestHeader('Content-Type', 'text/plain');
1502          xhr.send(payload);
1503        } catch (e) {
1504          console.log(e);
1505        }
1506
1507        return false;
1508      },
1509      isIos12: function isIos12() {
1510        return window.navigator.userAgent.lastIndexOf('iPhone; CPU iPhone OS 12_') !== -1 || window.navigator.userAgent.lastIndexOf('iPad; CPU OS 12_') !== -1;
1511      }
1512    };
1513    Monorail.produce('monorail-edge.shopifysvc.com',
1514      'trekkie_storefront_load_errors/1.1',
1515      {shop_id: 531955759,
1516      theme_id: 144816865327,
1517      app_name: "storefront",
1518      context_url: window.location.href,
1519      source_url: "//codendesigner.com/cdn/s/trekkie.storefront.2f6d7d7ede7d24234881a9cd5f47e679642fa1f6.min.js"});
1520
1521  };
1522  scriptFallback.async = true;
1523  scriptFallback.src = '//codendesigner.com/cdn/s/trekkie.storefront.2f6d7d7ede7d24234881a9cd5f47e679642fa1f6.min.js';
1524  first.parentNode.insertBefore(scriptFallback, first);
1525};
1526script.async = true;
1527script.src = '//codendesigner.com/cdn/s/trekkie.storefront.2f6d7d7ede7d24234881a9cd5f47e679642fa1f6.min.js';
1528first.parentNode.insertBefore(script, first);
1529
1530    };
1531    trekkie.load(
1532      {"Trekkie":{"appName":"storefront","development":false,"defaultAttributes":{"shopId":531955759,"isMerchantRequest":null,"themeId":144816865327,"themeCityHash":"10456631116388499070","contentLanguage":"en","currency":"USD","eventMetadataId":"99774f33-82db-46fc-94a3-5130c4af2be5"},"isServerSideCookieWritingEnabled":true,"monorailRegion":"shop_domain","enabledBetaFlags":["764d78cb","8450a54b","4c64608a"]},"Session Attribution":{},"S2S":{"facebookCapiEnabled":false,"source":"trekkie-storefront-renderer","apiClientId":580111}}
1533    );
1534
1535    var loaded = false;
1536    trekkie.ready(function() {
1537      if (loaded) return;
1538      loaded = true;
1539
1540      window.ShopifyAnalytics.lib = window.trekkie;
1541
1542      var originalDocumentWrite = document.write;
1543      document.write = customDocumentWrite;
1544      try { window.ShopifyAnalytics.merchantGoogleAnalytics.call(this); } catch(error) {};
1545      document.write = originalDocumentWrite;
1546
1547      var match = window.location.pathname.match(/checkouts\/(.+)\/(thank_you|post_purchase)/)
1548      var token = match? match[1]: undefined;
1549      if (!hasLoggedConversion(token)) {
1550        setCookieIfConversion(token);
1551        
1552      }
1553    });
1554
1555    window.ShopifyAnalytics.lib.page(null,{"pageType":"home","requestId":"bdb4bd11-d97b-4136-9f48-a6cc796fd350-1791318283","shopifyEmitted":true});
1556
1557    var eventsListenerScript = document.createElement('script');
1558    eventsListenerScript.async = true;
1559    eventsListenerScript.src = "//codendesigner.com/cdn/shopifycloud/storefront/assets/shop_events_listener-4e26a9ce.js";
1560    document.getElementsByTagName('head')[0].appendChild(eventsListenerScript);
1561})();</script>
vendor: 1 bytes, line 1561
1561
1562<script
1563  defer
1564  src="https://codendesigner.com/cdn/shopifycloud/perf-kit/shopify-perf-kit-3.9.6.min.js"
1565  data-application="storefront-renderer"
1566  data-shop-id="531955759"
1567  data-render-region="gcp-europe-west1"
1568  data-page-type="index"
1569  data-theme-instance-id="144816865327"
1570  data-theme-name="Dawn"
1571  data-theme-version="8.0.0"
1572  data-monorail-region="shop_domain"
1573  data-resource-timing-sampling-rate="10"
1574  data-shs="true"
1575  data-shs-beacon="true"
1576  data-shs-export-with-fetch="true"
1577  data-shs-logs-sample-rate="1"
1578  data-shs-beacon-endpoint="https://codendesigner.com/api/collect"
1579></script>
1579
1580<meta name="shopify-y" content="039e35d1-9f7b-4836-9e19-0f3b42dd32d7" data-expiration="1822875883000"><meta name="shopify-s" content="76f39c3b-032a-493b-8de6-55a7f8231781" data-expiration="1791320083000"><meta name="new-cookie-storage-activated" content="t">
1581</head>
1582
1583  <body class="gradient">
1584    <div style="opacity:0" class="content"><a class="skip-to-content-link button visually-hidden" href="#MainContent">
1585      Skip to content
1586    </a><!-- BEGIN sections: header-group -->
1587<div id="shopify-section-sections--18633344057391__header" class="shopify-section shopify-section-group-header-group"><style>
1588.header__heading-logo {
1589    width: 240px;
1590}
1591.navigation .w-nav-overlay {
1592    display: initial;
1593}
1594.buy-template-container a {
1595    padding: 0;
1596}
1597.buy-template-container a:before, .buy-template-container a:after {
1598    display: none;
1599}
1600@media screen and (max-width: 1250px) and (min-width: 1101px) {
1601  .header__heading-logo {
1602    width: 250px; /* Smaller logo in this specific range */
1603  }
1604  
1605  .navlink div {
1606    font-size: 16px; 
1607  }
1608  .brand
1609  {    padding-top: 25px !important;}
1610
1611  a.navlink.w-inline-block {
1612    padding-top: 34px;
1613}
1614
1615}
1616@media screen and (max-width: 1100px) and (min-width: 992px) {
1617  .header__heading-logo {
1618    width: 220px; /* Smaller logo in this specific range */
1619  }
1620  
1621  .navlink div {
1622    font-size: 14px; 
1623  }
1624.brand
1625  {    padding-top: 28px !important;}
1626
1627  a.navlink.w-inline-block {
1628    padding-top: 34px;
1629}
1630  
1631}
1632
1633
1634@media screen and (min-width: 992px) {
1635  .brand {
1636    padding-top: 20px;
1637  }
1638
1639  a.navlink.w-inline-block {
1640    padding-top: 34px;
1641  }
1642}
1643
1644@media (min-width: 480px) and (max-width: 991px) {
1645    .curve-bg {
1646        width: 70%;
1647    }
1648}
1649</style>
1650
1651<script>
1652// Robust mobile nav drawer handler: ensure menu is visible and focused on first open
1653document.addEventListener('DOMContentLoaded', function() {
1654  var navButton = document.querySelector('.w-nav-button');
1655  var navMenu = document.querySelector('.w-nav-menu');
1656  if (!navButton || !navMenu) return;
1657
1658  // Webflow creates an overlay container dynamically and may move the menu into it.
1659  // We'll look up the overlay by the aria-controls/id on the button when needed.
1660  function findOverlay() {
1661    var overlayId = navButton.getAttribute('aria-controls') || 'w-nav-overlay-0';
1662    return document.getElementById(overlayId) || document.querySelector('.w-nav-overlay');
1663  }
1664
1665  var navOverlay = findOverlay();
1666
1667  function openMenuEffects() {
1668    // mark overlay open (used by our CSS for slide-in)
1669    navOverlay = findOverlay();
1670    if (navOverlay) navOverlay.classList.add('w--open');
1671    // ensure menu is treated as open (Webflow sometimes sets this later)
1672    try { navMenu.setAttribute('data-nav-menu-open', ''); } catch (e) {}
1673    // force visible display (safety)
1674    navMenu.style.display = 'flex';
1675    navButton.setAttribute('aria-expanded', 'true');
1676    // focus first link so keyboard users see content immediately
1677    var firstLink = navMenu.querySelector('a, button');
1678    if (firstLink) {
1679      try { firstLink.focus(); } catch (e) {}
1680    }
1681  }
1682
1683  function closeMenuEffects() {
1684    // re-find overlay in case DOM moved
1685    navOverlay = findOverlay();
1686    if (navOverlay && navOverlay.classList.contains('w--open')) {
1687      navOverlay.classList.remove('w--open');
1688    }
1689    try { navMenu.removeAttribute('data-nav-menu-open'); } catch (e) {}
1690    // remove inline style so desktop styles restore
1691    try { navMenu.style.removeProperty('display'); } catch (e) {}
1692    try { navButton.setAttribute('aria-expanded', 'false'); } catch (e) {}
1693  }
1694
1695  // Toggle handler: run after Webflow's own handlers (short timeout)
1696  navButton.addEventListener('click', function() {
1697    setTimeout(function() {
1698      // Determine open state via button's open class or overlay visibility
1699      navOverlay = findOverlay();
1700      var wfOpen = navButton.classList.contains('w--open') || (navOverlay && navOverlay.classList.contains('w--open'));
1701      if (wfOpen) {
1702        openMenuEffects();
1703      } else {
1704        // If Webflow closed it, ensure we run cleanup
1705        closeMenuEffects();
1706      }
1707    }, 30);
1708  });
1709
1710  // If user clicks the overlay background to close, remove our markers
1711  if (navOverlay) {
1712    navOverlay.addEventListener('click', function(e) {
1713      // If click target is the overlay itself (not the menu), close
1714      if (e.target === navOverlay) {
1715        setTimeout(closeMenuEffects, 10);
1716      }
1717    });
1718  } else {
1719    // If overlay not present yet, watch for it and bind once
1720    var overlayBindObserver = new MutationObserver(function(muts, obs) {
1721      var o = findOverlay();
1722      if (o) {
1723        o.addEventListener('click', function(e) {
1724          if (e.target === o) setTimeout(closeMenuEffects, 10);
1725        });
1726        obs.disconnect();
1727      }
1728    });
1729    overlayBindObserver.observe(document.body, { childList: true, subtree: true });
1730  }
1731
1732  // On window resize revert any mobile-specific markers
1733  window.addEventListener('resize', function() {
1734    if (window.innerWidth > 991) closeMenuEffects();
1735  });
1736
1737  // MutationObserver fallback: if Webflow moves the menu into the overlay after click,
1738  // ensure we tag it open and focus the first item.
1739  var observer = new MutationObserver(function(mutations) {
1740    mutations.forEach(function(m) {
1741      if (m.type === 'childList') {
1742        // If navMenu is now inside an overlay that's open, ensure attributes
1743        var parentOverlay = navMenu.closest('.w-nav-overlay');
1744        if (parentOverlay && parentOverlay.classList.contains('w--open')) {
1745          try { navMenu.setAttribute('data-nav-menu-open', ''); } catch (e) {}
1746          navMenu.style.display = 'flex';
1747          var first = navMenu.querySelector('a, button');
1748          if (first) try { first.focus(); } catch (e) {}
1749        }
1750      }
1751    });
1752  });
1753  observer.observe(document.body, { childList: true, subtree: true });
1754  
1755  // Wire close button (attach now and when DOM changes)
1756  function wireCloseBtn() {
1757    var closeBtn = document.querySelector('.mobile-drawer-close');
1758    if (!closeBtn) return;
1759    // Avoid duplicate listeners
1760    if (closeBtn._closeWired) return;
1761    closeBtn._closeWired = true;
1762    closeBtn.addEventListener('click', function(e){
1763      e.stopPropagation();
1764      // Find overlay and run the same close routine
1765      navOverlay = findOverlay();
1766      closeMenuEffects();
1767      // Ensure Webflow button state cleared too
1768      try { navButton.classList.remove('w--open'); } catch (err) {}
1769      // If Webflow still considers the button open, simulate a click to toggle
1770      try { if (navButton.classList && navButton.classList.contains('w--open') && typeof navButton.click === 'function') navButton.click(); } catch (err) {}
1771    });
1772  }
1773  // Try wiring immediately and watch for DOM moves that add the button
1774  wireCloseBtn();
1775  var closeAttachObserver = new MutationObserver(function(){ wireCloseBtn(); });
1776  closeAttachObserver.observe(document.body, { childList: true, subtree: true });
1777});
1778</script>
1778
1779  
1780<style>
1781/* === Dropdown (CSS-only) === */
1782.nav-menu { position: relative; }
1783.nav-item.has-dropdown { position: relative; }
1784
1785/* Parent link behaves as toggle too */
1786.navlink.has-toggle { display:inline-flex; align-items:center; gap:8px; }
1787.navlink.has-toggle .chevron { font-size:12px; transform:translateY(1px); transition:transform .2s ease; }
1788
1789/* Panel */
1790.dropdown{
1791  position:absolute; top:70%; left:0; min-width:240px; background:#fff;
1792  border:1px solid rgba(0,0,0,.08); border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.08);
1793  padding:10px; display:none; opacity:0; transform:translateY(8px);
1794  transition:opacity .18s ease, transform .18s ease; z-index:9999;
1795}
1796
1797/* Items */
1798.dropdown-item{
1799  display:block; padding:10px 12px; border-radius:8px; color:#333; text-decoration:none; font-size:15px;
1800}
1801.dropdown-item:hover, .dropdown-item:focus{ background:#f5f7ff; outline:none; }
1802
1803.dropdown-group{ position:relative; }
1804.dropdown-item.nested-toggle{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
1805
1806/* Grandchildren flyout */
1807.dropdown.nested{
1808  position:absolute; top:0; left:100%; margin-left:8px; min-width:220px;
1809  display:none; opacity:0; transform:translateY(8px);
1810  transition:opacity .18s ease, transform .18s ease;
1811}
1812a.navlink.has-toggle.w-inline-block {
1813    height: auto;
1814}
1815/* Desktop: hover */
1816@media (min-width: 992px){
1817  .nav-item.has-dropdown:hover > .dropdown{ display:block; opacity:1; transform:translateY(0); }
1818  .nav-item.has-dropdown:hover > .navlink.has-toggle .chevron{ transform:translateY(1px) rotate(180deg); }
1819  .dropdown-group:hover > .dropdown.nested{ display:block; opacity:1; transform:translateY(0); }
1820}
1821
1822/* Mobile/Tablet: focus-within (tap) */
1823@media (max-width: 991px){
1824  /* Force menu to show in overlay, override Webflow's default */
1825  .w-nav-overlay.w--open .w-nav-menu,
1826  .w-nav-overlay .w-nav-menu[data-nav-menu-open] {
1827    display: flex !important;
1828    opacity: 1 !important;
1829    visibility: visible !important;
1830  }
1831  .w-nav-menu {
1832    display: none !important;
1833  }
1834  .nav-item.has-dropdown{ width:100%; }
1835  .dropdown{ position:static; box-shadow:none; border:0; padding:6px 0 8px 6px; margin-top:6px; transform:none; }
1836  .nav-item.has-dropdown:focus-within > .dropdown{ display:block; opacity:1; }
1837  .dropdown.nested{ position:static; margin-left:0; transform:none; }
1838  .dropdown-group:focus-within > .dropdown.nested{ display:block; opacity:1; }
1839
1840  /* --- Custom mobile nav overlay full width, right-to-left slide --- */
1841  .w-nav-overlay {
1842    position: fixed !important;
1843    top: 0 !important;
1844    left: 0 !important;
1845    width: 100vw !important;
1846    height: 100vh !important;
1847    background: #fff !important;
1848    z-index: 9999 !important;
1849    transform: translateX(100vw);
1850    transition: transform 0.4s cubic-bezier(.77,0,.18,1);
1851    display: block !important;
1852    overflow-y: auto;
1853  }
1854  .w-nav-overlay.w--open {
1855    transform: translateX(0);
1856  }
1857  .w-nav-menu {
1858    width: 100vw !important;
1859    height: 100vh !important;
1860    background: transparent;
1861    float: none;
1862    position: static;
1863    flex-direction: column;
1864    justify-content: flex-start;
1865    align-items: flex-start;
1866    /* Add extra top padding so there's a 30px gap between the close button and menu items */
1867    padding: 86px 24px 24px 24px; /* close top (12) + close height (44) + 30px gap = 86px */
1868    box-sizing: border-box;
1869  }
1870  .w-nav-overlay.w--open .w-nav-menu {
1871    display: flex !important;
1872  }
1873}
1874</style>
1875<!-- Close button styles -->
1876<style>
1877  @media (max-width: 991px) {
1878    .mobile-drawer-close {
1879      position: fixed;
1880      top: 12px;
1881      left: 12px;
1882      width: 44px;
1883      height: 44px;
1884      border-radius: 8px;
1885      background: rgba(0,0,0,0.06);
1886      display: flex;
1887      align-items: center;
1888      justify-content: center;
1889      z-index: 10030; /* sit above overlay content */
1890      cursor: pointer;
1891      -webkit-tap-highlight-color: rgba(0,0,0,0);
1892      border: none;
1893    }
1894    .mobile-drawer-close:focus { outline: 2px solid rgba(0,0,0,0.12); }
1895    .mobile-drawer-close .close-icon { font-size: 18px; line-height: 1; color: #111; }
1896  }
1897</style>
1898<div class="navigation">
1899  <div data-animation="default" data-collapse="medium" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="navbar w-nav" style="will-change: width, height, background; height: 130px; background-color: rgba(255, 255, 255, 0);">
1900    <div class="content-wrapper w-container">
1901      <a href="/#top" aria-current="page" class="brand w-inline-block w--current">
1902        <img src="//codendesigner.com/cdn/shop/files/Codendesigner_Logo_2.png?v=1753348129&amp;width=500" srcset="//codendesigner.com/cdn/shop/files/Codendesigner_Logo_2.png?v=1753348129&amp;width=200 200w, //codendesigner.com/cdn/shop/files/Codendesigner_Logo_2.png?v=1753348129&amp;width=250 250w, //codendesigner.com/cdn/shop/files/Codendesigner_Logo_2.png?v=1753348129&amp;width=300 300w, //codendesigner.com/cdn/shop/files/Codendesigner_Logo_2.png?v=1753348129&amp;width=400 400w, //codendesigner.com/cdn/shop/files/Codendesigner_Logo_2.png?v=1753348129&amp;width=500 500w" width="240" class="header__heading-logo motion-reduce">
1903      </a>
1904
1905      <div class="menu-button w-nav-button" style="-webkit-user-select: text;" aria-label="menu" role="button" tabindex="0" aria-controls="w-nav-overlay-0" aria-haspopup="menu" aria-expanded="false">
1906        <div class="w-icon-nav-menu"></div>
1907      </div>
1908      <nav role="navigation" class="nav-menu w-nav-menu">
1909      <!-- Mobile drawer close button (top-left) -->
1910      <button class="mobile-drawer-close" aria-label="Close menu" type="button">
1911        <span class="close-icon">✕</span>
1912      </button><a href="/pages/work" class="navlink w-inline-block">
1913              <div>OUR WORKS</div>
1914            </a><div class="nav-item has-dropdown">
1915              <!-- Parent link doubles as toggle; first tap opens, second tap navigates -->
1916              <a href="/pages/service" class="navlink has-toggle w-inline-block" aria-haspopup="true">
1917                <div>OUR SERVICES</div>
1918                <span class="chevron" aria-hidden="true">▾</span>
1919              </a>
1920
1921              <div class="dropdown" role="menu"><a href="/pages/email-marketing-copy-responsive-work" class="dropdown-item" role="menuitem">
1922                      Email Marketing
1923                    </a><a href="/pages/shopify" class="dropdown-item" role="menuitem">
1924                      Shopify
1925                    </a><a href="/pages/learnworlds" class="dropdown-item" role="menuitem">
1926                      Learnworld
1927                    </a></div>
1928            </div><a href="/pages/pricing" class="navlink w-inline-block">
1929              <div>PRICING</div>
1930            </a><a href="/pages/about" class="navlink w-inline-block">
1931              <div>ABOUT</div>
1932            </a><a href="/pages/contact" class="navlink w-inline-block">
1933              <div>CONTACT</div>
1934            </a><div class="buy-template-container">
1935          <a href="https://calendly.com/frontendengineer/30-minutes-meeting" data-w-id="da46fed0-190c-33a2-5d3b-bc508a8f537f" target="_blank" class="button w-inline-block">
1936            <div class="button-flex">
1937              <div class="button-text"><div>BOOK A MEETING</div></div>
1938              <div class="button-arrow-box">
1939                <div class="button-arrow-container">
1940                  <div class="button-arrow-left"></div>
1941                  <div class="button-arrow-right"></div>
1942                </div>
1943              </div>
1944            </div>
1945          </a>
1946        </div>
1947      </nav>
1948    </div>
1949
1950
1951    
1952  </div>
1953
1954</div>
1955
1956
1957
1958
1959
1960
1961<style> #shopify-section-sections--18633344057391__header .shopify-policy__title {display: none !important;} @media screen and (min-width: 992px) {#shopify-section-sections--18633344057391__header button.mobile-drawer-close {display: none; }} </style></div>
1962<!-- END sections: header-group -->
1963
1964    <main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
1965      <section id="shopify-section-template--18633345794095__hero_banner_1_qDXfL3" class="shopify-section banner"><style>
1966  a:empty,
1967  ul:empty,
1968  dl:empty,
1969  div:empty,
1970  section:empty,
1971  article:empty,
1972  p:empty,
1973  h1:empty,
1974  h2:empty,
1975  h3:empty,
1976  h4:empty,
1977  h5:empty,
1978  h6:empty {
1979    display: block !important;
1980  }
1981  .hero-pic {
1982    background-image: url('//codendesigner.com/cdn/shop/files/team-1.png?v=1676193210&width=100');
1983  }
1984  .hero-mini-pic {
1985      background-image: url('//codendesigner.com/cdn/shop/files/team-1.png?v=1676193210&width=100');
1986  }
1987    .client_review{
1988      max-width:1200px;
1989      color:#555;
1990    }
1991    .client_review p{
1992      font-size:16px;
1993    }
1994
1995  /* Logo Slider Styles */
1996  @keyframes slides {
1997    from {
1998      transform: translateX(0);
1999    }
2000    to {
2001      transform: translateX(-50%);
2002    }
2003  }
2004  .logos {
2005    overflow: hidden;
2006    padding: 20px 0px;
2007    white-space: nowrap;
2008    position: relative;
2009    z-index: 1;
2010    width: 100%;
2011    margin-top: 30px;
2012  }
2013  .logo_items {
2014    display: inline-block;
2015    animation: 35s slides infinite linear;
2016  }
2017  .logos:hover .logo_items {
2018    animation-play-state: paused;
2019  }
2020  .logo_items img {
2021    height: 100px;
2022    margin-right: 20px;
2023    max-width: 150px;
2024    object-fit: contain;
2025  }
2026
2027  /* Position the curve-bg properly */
2028  .curve-bg {
2029    position: absolute;
2030    left: auto;
2031    top: auto;
2032    right: 0;
2033    bottom: -1px;
2034    z-index: 2;
2035  }
2036  .hero-mobile {
2037  max-width: 120px;
2038}
2039.hero-macbook {
2040  max-width: 400px;
2041}
2042.logo-display {
2043  display: none;
2044}
2045@media screen and (max-width: 519px) {
2046  .hero-section.home {
2047    min-height: 1300px !important;
2048  }
2049}
2050@media screen and (max-width: 433px) {
2051  .hero-section.home {
2052    min-height: 1400px !important;
2053  }
2054}
2055@media screen and (min-width: 768px) and (max-width: 922px) {
2056  img.hero-mobile.ls-is-cached.lazyloaded {
2057    display: none;
2058  }
2059}
2060
2061/* ---- Critical layout for the bottom testimonial bar, inlined so it never
2062   waits on the external stylesheet — this is what was causing the box to
2063   render narrow and grow left-to-right as the page loaded ---- */
2064#shopify-section-template--18633345794095__hero_banner_1_qDXfL3 .hero-bottom-bg {
2065  width: 100%;
2066  box-sizing: border-box;
2067}
2068#shopify-section-template--18633345794095__hero_banner_1_qDXfL3 .hero-bottom-bg .content-wrapper {
2069  width: 100%;
2070}
2071#shopify-section-template--18633345794095__hero_banner_1_qDXfL3 .client_review-list,
2072#shopify-section-template--18633345794095__hero_banner_1_qDXfL3 .client_review {
2073  width: 100%;
2074  box-sizing: border-box;
2075}
2076
2077/* ---- Smooth in-place fade animation (replaces the old slide-in-from-left effect) ---- */
2078#shopify-section-template--18633345794095__hero_banner_1_qDXfL3 .hero-fade-in {
2079  opacity: 0;
2080  transform: translateY(14px);
2081  transition: opacity 0.8s ease, transform 0.8s ease;
2082  will-change: opacity, transform;
2083}
2084#shopify-section-template--18633345794095__hero_banner_1_qDXfL3 .hero-fade-in.is-inview {
2085  opacity: 1;
2086  transform: translateY(0);
2087}
2088
2089/* ---- Testimonial block(s) ---- */
2090#shopify-section-template--18633345794095__hero_banner_1_qDXfL3 .client_review-list {
2091  position: relative;
2092}
2093#shopify-section-template--18633345794095__hero_banner_1_qDXfL3 .client_review {
2094  transition: opacity 0.6s ease;
2095}
2096#shopify-section-template--18633345794095__hero_banner_1_qDXfL3 .client_review[data-testimonial] {
2097  display: none;
2098}
2099#shopify-section-template--18633345794095__hero_banner_1_qDXfL3 .client_review[data-testimonial].is-active {
2100  display: block;
2101}
2102
2103/* ---- Animated rotating word inside the heading ---- */
2104#shopify-section-template--18633345794095__hero_banner_1_qDXfL3 .hero-rotate-wrap {
2105  position: relative;
2106  display: inline-block;
2107  vertical-align: top;
2108  color: color(display-p3 0.1412 0.3452 0.5059);
2109  font-weight: bold;
2110}
2111#shopify-section-template--18633345794095__hero_banner_1_qDXfL3 .hero-rotate-word {
2112  position: absolute;
2113  left: 0;
2114  top: 0;
2115  white-space: nowrap;
2116  opacity: 0;
2117  transform: translateY(8px);
2118  transition: opacity 0.5s ease, transform 0.5s ease;
2119  pointer-events: none;
2120}
2121#shopify-section-template--18633345794095__hero_banner_1_qDXfL3 .hero-rotate-word.is-active {
2122  position: relative;
2123  opacity: 1;
2124  transform: translateY(0);
2125  pointer-events: auto;
2126}
2127
2128/* ---- Font size controls ---- */
2129
2130  
2131    #shopify-section-template--18633345794095__hero_banner_1_qDXfL3 .hero-text {
2132      font-size: 82px;
2133      line-height: 1.15;
2134    }
2135    @media screen and (max-width: 767px) {
2136      #shopify-section-template--18633345794095__hero_banner_1_qDXfL3 .hero-text {
2137        font-size: 49px;
2138      }
2139    }
2140  
2141
2142  
2143
2144</style>
2145    <div
2146      id="Top"
2147      class="hero-section home wf-section"
2148    >
2149      <div class="hero-bg"></div>
2150      <div class="_3d-container">
2151        <div class="mobile-3d"><img src="//codendesigner.com/cdn/shop/files/musewellbeing_by_cnd.png?v=1788171203&amp;width=750" alt="" srcset="//codendesigner.com/cdn/shop/files/musewellbeing_by_cnd.png?v=1788171203&amp;width=375 375w, //codendesigner.com/cdn/shop/files/musewellbeing_by_cnd.png?v=1788171203&amp;width=550 550w, //codendesigner.com/cdn/shop/files/musewellbeing_by_cnd.png?v=1788171203&amp;width=750 750w" loading="eager" fetchpriority="high" class="hero-mobile">
2152<div
2153            data-w-id="f17e5904-387e-1357-91df-287b81933ef1"
2154            class="top-box-mobile"
2155          >
2156            <div class="small-side-4"></div>
2157            <div class="small-side-2"></div>
2158            <div class="small-side-5"></div>
2159            <div class="small-side-3"></div>
2160          </div>
2161        </div>
2162        <div class="macbook-3d"><img src="//codendesigner.com/cdn/shop/files/Surghub_-_Case_Study_cnd.png?v=1788250695&amp;width=1500" alt="" srcset="//codendesigner.com/cdn/shop/files/Surghub_-_Case_Study_cnd.png?v=1788250695&amp;width=375 375w, //codendesigner.com/cdn/shop/files/Surghub_-_Case_Study_cnd.png?v=1788250695&amp;width=550 550w, //codendesigner.com/cdn/shop/files/Surghub_-_Case_Study_cnd.png?v=1788250695&amp;width=750 750w, //codendesigner.com/cdn/shop/files/Surghub_-_Case_Study_cnd.png?v=1788250695&amp;width=1100 1100w, //codendesigner.com/cdn/shop/files/Surghub_-_Case_Study_cnd.png?v=1788250695&amp;width=1500 1500w" loading="eager" fetchpriority="high" class="hero-macbook">
2163<div
2164            data-w-id="f17e5904-387e-1357-91df-287b81933ef8"
2165            class="top-box-macbook"
2166          >
2167            <div class="big-side-4"></div>
2168            <div class="big-side-2"></div>
2169            <div class="big-side-5"></div>
2170            <div class="big-side-3"></div>
2171          </div>
2172        </div>
2173      </div>
2174
2175      <div class="hero-bottom-bg">
2176        <div class="content-wrapper w-container " style="padding-top: 30px;">
2177          <div class="client_review-list hero-fade-in" data-hero-testimonial-fade><div
2178                class="client_review is-active"
2179                
2180                
2181              ><img src="https://cdn.shopify.com/s/files/1/0005/3195/5759/files/100_5_Star_Review_2.png?v=1680958799" class="ls-is-cached lazyloaded" alt=""><p>
2182                  I have been a client for 4+ years and have never been disappointed. I have given hundreds of tasks with all being delivered with above exceptional qual
2182ity and in decent time. Codendesigner team is one of the best I have worked with and will continue to do so and 10/10 recommend to anyone else.
2183<i>T Rainson | Canada</i></p><a style="color: #555;font-size: 15px;" href="#shopify-section-template--18633345794095__testimonial_1_H7JkN6">Read More Reviews</a></div></div>
2184        </div>
2185      </div>
2186
2187      <div class="content-wrapper w-container">
2188        <div class="hero-flex services">
2189          <div class="hero-left services">
2190            <div>
2191              <div class="hero-pic hero-fade-in" data-hero-fade></div>
2192            </div><div class="hero-fade-in" data-hero-fade >
2193                    <h1 class="hero-text">We build websites that sell your
2194<span class="hero-rotate-wrap">
2195                          <span class="hero-rotate" data-hero-rotate><span class="hero-rotate-word is-active">products</span><span class="hero-rotate-word">your courses</span><span class="hero-rotate-word">your story</span></span>
2196                        </span></h1>
2197                  </div></div>
2198        </div>
2199
2200        <!-- Logo slider -->
2201        <div class="logos logo-display">
2202          <div class="logo_items">
2203            <!-- Default client logos -->
2204            <img src="https://codendesigner.com/cdn/shop/files/1_ec9db211-b602-4ab4-8232-a7f43c476ca1.png?v=1680131400&width=300" alt="Client Logo" loading="lazy">
2205            <img src="https://codendesigner.com/cdn/shop/files/logo-Clients-2_ee4d2a67-a354-442e-a15c-80e5efa23c67.png?v=1676717050&width=300" alt="Client Logo" loading="lazy">
2206            <img src="https://codendesigner.com/cdn/shop/files/logo-Clients-3_b6f3a9ed-6bce-4d6e-b6bb-047052a7ec4c.png?v=1676717050&width=300" alt="Client Logo" loading="lazy">
2207            <img src="https://codendesigner.com/cdn/shop/files/Expert_Badge_Clear.png?v=1694007702&width=300" alt="Client Logo" loading="lazy">
2208            <img src="https://codendesigner.com/cdn/shop/files/logo-Clients-4_66492444-41c8-4a87-8758-4fd66bfa0b8c.webp?v=1676717050&width=300" alt="Client Logo" loading="lazy">
2209            <img src="https://codendesigner.com/cdn/shop/files/logo-Clients-5_bafb84fa-501d-40cb-8e52-d7afca1dad38.png?v=1676717050&width=300" alt="Client Logo" loading="lazy">
2210            <img src="https://codendesigner.com/cdn/shop/files/8_cec8624c-49ec-43e7-b531-150f5c0b6914.png?v=1680131399&width=300" alt="Client Logo" loading="lazy">
2211            <img src="https://codendesigner.com/cdn/shop/files/7_c38460e8-989c-49e0-a83f-42b3e44e8082.png?v=1680131399&width=300" alt="Client Logo" loading="lazy">
2212            <!-- Duplicate for infinite scrolling effect -->
2213            <img src="https://codendesigner.com/cdn/shop/files/1_ec9db211-b602-4ab4-8232-a7f43c476ca1.png?v=1680131400&width=300" alt="Client Logo" loading="lazy">
2214            <img src="https://codendesigner.com/cdn/shop/files/logo-Clients-2_ee4d2a67-a354-442e-a15c-80e5efa23c67.png?v=1676717050&width=300" alt="Client Logo" loading="lazy">
2215            <img src="https://codendesigner.com/cdn/shop/files/logo-Clients-3_b6f3a9ed-6bce-4d6e-b6bb-047052a7ec4c.png?v=1676717050&width=300" alt="Client Logo" loading="lazy">
2216            <img src="https://codendesigner.com/cdn/shop/files/Expert_Badge_Clear.png?v=1694007702&width=300" alt="Client Logo" loading="lazy">
2217            <img src="https://codendesigner.com/cdn/shop/files/logo-Clients-4_66492444-41c8-4a87-8758-4fd66bfa0b8c.webp?v=1676717050&width=300" alt="Client Logo" loading="lazy">
2218            <img src="https://codendesigner.com/cdn/shop/files/logo-Clients-5_bafb84fa-501d-40cb-8e52-d7afca1dad38.png?v=1676717050&width=300" alt="Client Logo" loading="lazy">
2219            <img src="https://codendesigner.com/cdn/shop/files/8_cec8624c-49ec-43e7-b531-150f5c0b6914.png?v=1680131399&width=300" alt="Client Logo" loading="lazy">
2220            <img src="https://codendesigner.com/cdn/shop/files/7_c38460e8-989c-49e0-a83f-42b3e44e8082.png?v=1680131399&width=300" alt="Client Logo" loading="lazy">
2221          </div>
2222        </div>
2223      </div>
2224
2225      <div class="curve-bg">
2226        <div class="curve-text-container">
2227          <div class="hero-mini-pic"></div>
2228          <div class="curve-text-box">
2229            <a href="https://calendly.com/frontendengineer/30-minutes-meeting" class="mini-title-link"
2230              >BOOK A MEETING</a
2231            >
2232          </div>
2233        </div>
2234        <div class="right-white-bg"></div>
2235      </div>
2236    </div>
2237
2238    
2238<script>
2239      (function () {
2240        var root = document.getElementById('shopify-section-template--18633345794095__hero_banner_1_qDXfL3');
2241        if (!root) return;
2242
2243        /* Smooth fade-in-place on scroll, replacing the old slide animation */
2244        var fadeEls = root.querySelectorAll('[data-hero-fade]');
2245        if ('IntersectionObserver' in window && fadeEls.length) {
2246          var observer = new IntersectionObserver(
2247            function (entries) {
2248              entries.forEach(function (entry) {
2249                if (entry.isIntersecting) {
2250                  entry.target.classList.add('is-inview');
2251                  observer.unobserve(entry.target);
2252                }
2253              });
2254            },
2255            { threshold: 0.15, rootMargin: '0px 0px -40px 0px' }
2256          );
2257          fadeEls.forEach(function (el) {
2258            observer.observe(el);
2259          });
2260        } else {
2261          fadeEls.forEach(function (el) {
2262            el.classList.add('is-inview');
2263          });
2264        }
2265
2266        /* Reveal the testimonial only once the bottom bar has fully rendered
2267           at its natural width, so it doesn't fade in mid-layout ("opening
2268           from the left") */
2269        var testimonialWrap = root.querySelector('[data-hero-testimonial-fade]');
2270        if (testimonialWrap) {
2271          var revealTestimonial = function () {
2272            setTimeout(function () {
2273              testimonialWrap.classList.add('is-inview');
2274            }, 300);
2275          };
2276          if (document.readyState === 'complete') {
2277            revealTestimonial();
2278          } else {
2279            window.addEventListener('load', revealTestimonial);
2280          }
2281        }
2282
2283        /* Rotating last word in the hero heading */
2284        var rotateWrap = root.querySelector('[data-hero-rotate]');
2285        if (rotateWrap) {
2286          var words = rotateWrap.querySelectorAll('.hero-rotate-word');
2287          if (words.length > 1) {
2288            var current = 0;
2289            setInterval(function () {
2290              var next = (current + 1) % words.length;
2291              words[current].classList.remove('is-active');
2292              words[next].classList.add('is-active');
2293              current = next;
2294            }, 2600);
2295          }
2296        }
2297
2298        /* Fade between multiple testimonial blocks, if more than one is added */
2299        var reviews = root.querySelectorAll('[data-testimonial]');
2300        if (reviews.length > 1) {
2301          var reviewIndex = 0;
2302          setInterval(function () {
2303            var nextIndex = (reviewIndex + 1) % reviews.length;
2304            reviews[reviewIndex].classList.remove('is-active');
2305            reviews[nextIndex].classList.add('is-active');
2306            reviewIndex = nextIndex;
2307          }, 6000);
2308        }
2309      })();
2310    </script>
2310
2311
2312  
2313</section><div id="shopify-section-template--18633345794095__client_logo_carousel_zyLQk8" class="shopify-section">
2314
2315<style data-shopify>
2316  .logo-carousel-template--18633345794095clientlogocarouselzylqk8 {
2317    width: 100%;
2318    overflow: hidden;
2319    background-color: #ffffff;
2320    padding: 60px 0;
2321  }
2322
2323  .logo-carousel__container-template--18633345794095clientlogocarouselzylqk8 {
2324    max-width: 1600px;
2325    margin: 0 auto;
2326    padding: 0 20px;
2327  }
2328
2329  .logo-carousel__heading-template--18633345794095clientlogocarouselzylqk8 {
2330    text-align: center;
2331    margin-bottom: 30px;
2332    color: #121212;
2333  }
2334
2335  .logo-carousel__track-wrapper-template--18633345794095clientlogocarouselzylqk8 {
2336    position: relative;
2337    overflow: hidden;
2338    width: 100%;
2339    height: 80px;
2340  }
2341
2342  .logo-carousel__track-wrapper-template--18633345794095clientlogocarouselzylqk8::before,
2343  .logo-carousel__track-wrapper-template--18633345794095clientlogocarouselzylqk8::after {
2344    content: '';
2345    position: absolute;
2346    top: 0;
2347    width: 150px;
2348    height: 100%;
2349    z-index: 2;
2350    pointer-events: none;
2351  }
2352
2353  .logo-carousel__track-wrapper-template--18633345794095clientlogocarouselzylqk8::before {
2354    left: 0;
2355    background: linear-gradient(to right, #ffffff, transparent);
2356  }
2357
2358  .logo-carousel__track-wrapper-template--18633345794095clientlogocarouselzylqk8::after {
2359    right: 0;
2360    background: linear-gradient(to left, #ffffff, transparent);
2361  }
2362
2363  .logo-carousel__track-template--18633345794095clientlogocarouselzylqk8 {
2364    display: flex;
2365    align-items: center;
2366    height: 100%;
2367    animation: logo-scroll-template--18633345794095clientlogocarouselzylqk8 90s linear infinite;
2368  }
2369
2370  .logo-carousel__track-template--18633345794095clientlogocarouselzylqk8:hover {
2371    animation-play-state: running;
2372  }
2373
2374  .logo-carousel__item-template--18633345794095clientlogocarouselzylqk8 {
2375    flex-shrink: 0;
2376    width: 160px;
2377    height: 80px;
2378    margin-right: 20px;
2379    display: flex;
2380    align-items: center;
2381    justify-content: center;
2382    padding: 10px;
2383  }
2384
2385  .logo-carousel__item-template--18633345794095clientlogocarouselzylqk8 img {
2386    max-width: 100%;
2387    max-height: 100%;
2388    object-fit: contain;
2389    filter: grayscale(0%);
2390    opacity: 1.0;
2391    transition: all 0.3s ease;
2392  }
2393
2394  .logo-carousel__item-template--18633345794095clientlogocarouselzylqk8:hover img {
2395    filter: grayscale(0%);
2396    opacity: 1.0;
2397    transform: scale(1.05);
2398  }
2399
2400  @keyframes logo-scroll-template--18633345794095clientlogocarouselzylqk8 {
2401    0% {
2402      transform: translateX(0);
2403    }
2404    100% {
2405      transform: translateX(calc(-180px * 50));
2406    }
2407  }
2408
2409  @media screen and (max-width: 749px) {
2410    .logo-carousel__item-template--18633345794095clientlogocarouselzylqk8 {
2411      width: 128.0px;
2412      height: 64.0px;
2413    }
2414
2415    .logo-carousel__track-wrapper-template--18633345794095clientlogocarouselzylqk8 {
2416      height: 64.0px;
2417    }
2418
2419    .logo-carousel__track-wrapper-template--18633345794095clientlogocarouselzylqk8::before,
2420    .logo-carousel__track-wrapper-template--18633345794095clientlogocarouselzylqk8::after {
2421      width: 80px;
2422    }
2423  }
2424</style>
2425
2426<div class="logo-carousel-template--18633345794095clientlogocarouselzylqk8" >
2427  <div class="logo-carousel__container-template--18633345794095clientlogocarouselzylqk8">
2428    
2429
2430    <div class="logo-carousel__track-wrapper-template--18633345794095clientlogocarouselzylqk8">
2431      <div class="logo-carousel__track-template--18633345794095clientlogocarouselzylqk8">
2432        
2433          
2434            
2435              
2436                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-edu-egy.png?v=1777876531&amp;width=350" alt="The Educator" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-edu-egy.png?v=1777876531&amp;width=350 350w" width="350" height="357" loading="lazy">
2437                </div>
2438              
2439            
2440              
2441                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/SystemicAlly.png?v=1771914617&amp;width=350" alt="systemicAlly" srcset="//codendesigner.com/cdn/shop/files/SystemicAlly.png?v=1771914617&amp;width=350 350w" width="350" height="197" loading="lazy">
2442                </div>
2443              
2444            
2445              
2446                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/CareerAlly-Logo-Full-Colour_1.png?v=1771914605&amp;width=350" alt="CareerAlly" srcset="//codendesigner.com/cdn/shop/files/CareerAlly-Logo-Full-Colour_1.png?v=1771914605&amp;width=350 350w" width="350" height="142" loading="lazy">
2447                </div>
2448              
2449            
2450              
2451                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/muse-wellbeing-logo.png?v=1763294301&amp;width=350" alt="muse-wellbeing-logo" srcset="//codendesigner.com/cdn/shop/files/muse-wellbeing-logo.png?v=1763294301&amp;width=350 350w" width="350" height="150" loading="lazy">
2452                </div>
2453              
2454            
2455              
2456                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/surghub-logo.png?v=1763369879&amp;width=350" alt="surghub-logo" srcset="//codendesigner.com/cdn/shop/files/surghub-logo.png?v=1763369879&amp;width=350 350w" width="350" height="71" loading="lazy">
2457                </div>
2458              
2459            
2460              
2461                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/Vflat_Logo.avif?v=1753880815&amp;width=350" alt="v flat" srcset="//codendesigner.com/cdn/shop/files/Vflat_Logo.avif?v=1753880815&amp;width=350 350w" width="350" height="113" loading="lazy">
2462                </div>
2463              
2464            
2465              
2466                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-impact-ar.png?v=1759311312&amp;width=350" alt="impact ar" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-impact-ar.png?v=1759311312&amp;width=350 350w" width="350" height="350" loading="lazy">
2467                </div>
2468              
2469            
2470              
2471                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-Bellrose-Jewellers.png?v=1759311312&amp;width=350" alt="BellaRose" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-Bellrose-Jewellers.png?v=1759311312&amp;width=350 350w" width="350" height="133" loading="lazy">
2472                </div>
2473              
2474            
2475              
2476                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wix-experience-catalysts.png?v=1759311312&amp;width=350" alt="ExperienceCatalaistic" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wix-experience-catalysts.png?v=1759311312&amp;width=350 350w" width="350" height="124" loading="lazy">
2477                </div>
2478              
2479            
2480              
2481                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-RetouchSkillLab.png?v=1759311312&amp;width=350" alt="RetouchSkinLab" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-RetouchSkillLab.png?v=1759311312&amp;width=350 350w" width="350" height="97" loading="lazy">
2482                </div>
2483              
2484            
2485              
2486                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-culturaliq.png?v=1759311311&amp;width=350" alt="CulturalIQ" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-culturaliq.png?v=1759311311&amp;width=350 350w" width="350" height="349" loading="lazy">
2487                </div>
2488              
2489            
2490              
2491                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/asn-b.jpg?v=1763377686&amp;width=350" alt="AsianSustainableNetwork" srcset="//codendesigner.com/cdn/shop/files/asn-b.jpg?v=1763377686&amp;width=350 350w" width="350" height="109" loading="lazy">
2492                </div>
2493              
2494            
2495              
2496                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-million-academy.png?v=1759311311&amp;width=350" alt="MillionAcademy" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-million-academy.png?v=1759311311&amp;width=350 350w" width="350" height="141" loading="lazy">
2497                </div>
2498              
2499            
2500              
2501                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-ss-community-counter-png.png?v=1759311311&amp;width=350" alt="CommunityCounter" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-ss-community-counter-png.png?v=1759311311&amp;width=350 350w" width="350" height="350" loading="lazy">
2502                </div>
2503              
2504            
2505              
2506                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-freds.png?v=1759311311&amp;width=350" alt="Fred&quot;s" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-freds.png?v=1759311311&amp;width=350 350w" width="350" height="233" loading="lazy">
2507                </div>
2508              
2509            
2510              
2511                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-creativenco.png?v=1759311311&amp;width=350" alt="Creativ and Co" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-creativenco.png?v=1759311311&amp;width=350 350w" width="350" height="233" loading="lazy">
2512                </div>
2513              
2514            
2515              
2516                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-staryouniversity.png?v=1759311311&amp;width=350" alt="StarUniversity" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-staryouniversity.png?v=1759311311&amp;width=350 350w" width="350" height="105" loading="lazy">
2517                </div>
2518              
2519            
2520              
2521                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-ilp-academy.jpg?v=1759311311&amp;width=350" alt="ILP-Academy" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-ilp-academy.jpg?v=1759311311&amp;width=350 350w" width="350" height="231" loading="lazy">
2522                </div>
2523              
2524            
2525              
2526                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-form.png?v=1759311311&amp;width=350" alt="Form" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-form.png?v=1759311311&amp;width=350 350w" width="350" height="233" loading="lazy">
2527                </div>
2528              
2529            
2530              
2531                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-flowerisme.png?v=1759311311&amp;width=350" alt="Flowerisme" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-flowerisme.png?v=1759311311&amp;width=350 350w" width="350" height="248" loading="lazy">
2532                </div>
2533              
2534            
2535              
2536                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-judinash.webp?v=1759311311&amp;width=350" alt="JudiNash" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-judinash.webp?v=1759311311&amp;width=350 350w" width="350" height="108" loading="lazy">
2537                </div>
2538              
2539            
2540              
2541                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-dan-henry-2.jpg?v=1759311311&amp;width=350" alt="DanHenry" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-dan-henry-2.jpg?v=1759311311&amp;width=350 350w" width="350" height="350" loading="lazy">
2542                </div>
2543              
2544            
2545              
2546                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-Avetsa-education.png?v=1759311311&amp;width=350" alt="Avesta" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-Avetsa-education.png?v=1759311311&amp;width=350 350w" width="350" height="217" loading="lazy">
2547                </div>
2548              
2549            
2550              
2551                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-ABSHoney.webp?v=1759311311&amp;width=350" alt="AB&#39;s Honneys" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-ABSHoney.webp?v=1759311311&amp;width=350 350w" width="350" height="79" loading="lazy">
2552                </div>
2553              
2554            
2555              
2556                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-vflatworld.jpg?v=1759311311&amp;width=350" alt="V-Flat" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-vflatworld.jpg?v=1759311311&amp;width=350 350w" width="350" height="350" loading="lazy">
2557                </div>
2558              
2559            
2560              
2561                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-bugleforklift.jpg?v=1759311311&amp;width=350" alt="BugelFurklift" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-bugleforklift.jpg?v=1759311311&amp;width=350 350w" width="350" height="350" loading="lazy">
2562                </div>
2563              
2564            
2565              
2566                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/shopify-canvas.png?v=1759311311&amp;width=350" alt="ShopifyCanvas" srcset="//codendesigner.com/cdn/shop/files/shopify-canvas.png?v=1759311311&amp;width=350 350w" width="350" height="350" loading="lazy">
2567                </div>
2568              
2569            
2570              
2571                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-ss-riley-group-inc.jpg?v=1759311311&amp;width=350" alt="riley-group-inc" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-ss-riley-group-inc.jpg?v=1759311311&amp;width=350 350w" width="350" height="350" loading="lazy">
2572                </div>
2573              
2574            
2575              
2576                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-ss-wall-street-bound.webp?v=1759311310&amp;width=350" alt="Wall Stat Bound" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-ss-wall-street-bound.webp?v=1759311310&amp;width=350 350w" width="350" height="77" loading="lazy">
2577                </div>
2578              
2579            
2580              
2581                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/the-space-safe.jpg?v=1763377686&amp;width=350" alt="SpaceSafe" srcset="//codendesigner.com/cdn/shop/files/the-space-safe.jpg?v=1763377686&amp;width=350 350w" width="350" height="122" loading="lazy">
2582                </div>
2583              
2584            
2585              
2586                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-sassyLab.webp?v=1759311310&amp;width=350" alt="SassyLab" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-sassyLab.webp?v=1759311310&amp;width=350 350w" width="350" height="109" loading="lazy">
2587                </div>
2588              
2589            
2590              
2591                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-purespective.png?v=1759311310&amp;width=350" alt="purespective" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-purespective.png?v=1759311310&amp;width=350 350w" width="350" height="350" loading="lazy">
2592                </div>
2593              
2594            
2595              
2596                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-Mid-western.p
2596ng?v=1759311310&amp;width=350" alt="Mid-Western" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-Mid-western.png?v=1759311310&amp;width=350 350w" width="350" height="257" loading="lazy">
2597                </div>
2598              
2599            
2600              
2601                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-manchester-warehouse.jpg?v=1759311310&amp;width=350" alt="MancherteWarehouse" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-manchester-warehouse.jpg?v=1759311310&amp;width=350 350w" width="350" height="105" loading="lazy">
2602                </div>
2603              
2604            
2605              
2606                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/shopify-service.png?v=1759311310&amp;width=350" alt="ShopifyService" srcset="//codendesigner.com/cdn/shop/files/shopify-service.png?v=1759311310&amp;width=350 350w" width="350" height="350" loading="lazy">
2607                </div>
2608              
2609            
2610              
2611                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/learnworld-Expert_Badge.png?v=1759311310&amp;width=350" alt="LearWorldsExpert" srcset="//codendesigner.com/cdn/shop/files/learnworld-Expert_Badge.png?v=1759311310&amp;width=350 350w" width="350" height="350" loading="lazy">
2612                </div>
2613              
2614            
2615              
2616                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-lccl.education.webp?v=1759311310&amp;width=350" alt="lccl.education" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-lccl.education.webp?v=1759311310&amp;width=350 350w" width="350" height="143" loading="lazy">
2617                </div>
2618              
2619            
2620              
2621                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/horon-black_076611a1-b59e-48fd-a00d-d9d0bdc93b43.jpg?v=1763377037&amp;width=350" alt="HornWatch" srcset="//codendesigner.com/cdn/shop/files/horon-black_076611a1-b59e-48fd-a00d-d9d0bdc93b43.jpg?v=1763377037&amp;width=350 350w" width="350" height="350" loading="lazy">
2622                </div>
2623              
2624            
2625              
2626                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-heavenroc.png?v=1759311310&amp;width=350" alt="HevenRock" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-heavenroc.png?v=1759311310&amp;width=350 350w" width="350" height="350" loading="lazy">
2627                </div>
2628              
2629            
2630              
2631                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/syntex.jpg?v=1763377686&amp;width=350" alt="SyntaxAcademy" srcset="//codendesigner.com/cdn/shop/files/syntex.jpg?v=1763377686&amp;width=350 350w" width="350" height="132" loading="lazy">
2632                </div>
2633              
2634            
2635              
2636                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/danhenry-watch-black-logo.png?v=1763377861&amp;width=350" alt="DanHandry" srcset="//codendesigner.com/cdn/shop/files/danhenry-watch-black-logo.png?v=1763377861&amp;width=350 350w" width="350" height="275" loading="lazy">
2637                </div>
2638              
2639            
2640              
2641                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/shopify-partner.png?v=1759311310&amp;width=350" alt="ShopifyPartner" srcset="//codendesigner.com/cdn/shop/files/shopify-partner.png?v=1759311310&amp;width=350 350w" width="350" height="135" loading="lazy">
2642                </div>
2643              
2644            
2645              
2646                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-borbonese.webp?v=1759311310&amp;width=350" alt="Borbonese" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-borbonese.webp?v=1759311310&amp;width=350 350w" width="350" height="38" loading="lazy">
2647                </div>
2648              
2649            
2650              
2651                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-talentcapability.png?v=1759311310&amp;width=350" alt="TalentCapability" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-talentcapability.png?v=1759311310&amp;width=350 350w" width="350" height="55" loading="lazy">
2652                </div>
2653              
2654            
2655              
2656                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-ilpasiapacific.png?v=1759311310&amp;width=350" alt="ILP" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-ilpasiapacific.png?v=1759311310&amp;width=350 350w" width="350" height="233" loading="lazy">
2657                </div>
2658              
2659            
2660              
2661                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/Schraf2.0-logo2.png?v=1763372396&amp;width=350" alt="Schraf2.0-logo" srcset="//codendesigner.com/cdn/shop/files/Schraf2.0-logo2.png?v=1763372396&amp;width=350 350w" width="350" height="76" loading="lazy">
2662                </div>
2663              
2664            
2665              
2666                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-the-rethink-group.png?v=1759311310&amp;width=350" alt="TheReThinkGroup" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-the-rethink-group.png?v=1759311310&amp;width=350 350w" width="350" height="233" loading="lazy">
2667                </div>
2668              
2669            
2670              
2671                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-vitaMemorials.png?v=1759311310&amp;width=350" alt="VitaMemorials" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-vitaMemorials.png?v=1759311310&amp;width=350 350w" width="350" height="142" loading="lazy">
2672                </div>
2673              
2674            
2675              
2676                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-simplyhoney.png?v=1759311310&amp;width=350" alt="SimplyHonny" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-simplyhoney.png?v=1759311310&amp;width=350 350w" width="350" height="38" loading="lazy">
2677                </div>
2678              
2679            
2680              
2681                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-adzimpact.png?v=1759311292&amp;width=350" alt="AdzImpact" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-adzimpact.png?v=1759311292&amp;width=350 350w" width="350" height="74" loading="lazy">
2682                </div>
2683              
2684            
2685          
2686            
2687              
2688                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-edu-egy.png?v=1777876531&amp;width=350" alt="The Educator" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-edu-egy.png?v=1777876531&amp;width=350 350w" width="350" height="357" loading="lazy">
2689                </div>
2690              
2691            
2692              
2693                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/SystemicAlly.png?v=1771914617&amp;width=350" alt="systemicAlly" srcset="//codendesigner.com/cdn/shop/files/SystemicAlly.png?v=1771914617&amp;width=350 350w" width="350" height="197" loading="lazy">
2694                </div>
2695              
2696            
2697              
2698                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/CareerAlly-Logo-Full-Colour_1.png?v=1771914605&amp;width=350" alt="CareerAlly" srcset="//codendesigner.com/cdn/shop/files/CareerAlly-Logo-Full-Colour_1.png?v=1771914605&amp;width=350 350w" width="350" height="142" loading="lazy">
2699                </div>
2700              
2701            
2702              
2703                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/muse-wellbeing-logo.png?v=1763294301&amp;width=350" alt="muse-wellbeing-logo" srcset="//codendesigner.com/cdn/shop/files/muse-wellbeing-logo.png?v=1763294301&amp;width=350 350w" width="350" height="150" loading="lazy">
2704                </div>
2705              
2706            
2707              
2708                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/surghub-logo.png?v=1763369879&amp;width=350" alt="surghub-logo" srcset="//codendesigner.com/cdn/shop/files/surghub-logo.png?v=1763369879&amp;width=350 350w" width="350" height="71" loading="lazy">
2709                </div>
2710              
2711            
2712              
2713                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/Vflat_Logo.avif?v=1753880815&amp;width=350" alt="v flat" srcset="//codendesigner.com/cdn/shop/files/Vflat_Logo.avif?v=1753880815&amp;width=350 350w" width="350" height="113" loading="lazy">
2714                </div>
2715              
2716            
2717              
2718                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-impact-ar.png?v=1759311312&amp;width=350" alt="impact ar" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-impact-ar.png?v=1759311312&amp;width=350 350w" width="350" height="350" loading="lazy">
2719                </div>
2720              
2721            
2722              
2723                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-Bellrose-Jewellers.png?v=1759311312&amp;width=350" alt="BellaRose" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-Bellrose-Jewellers.png?v=1759311312&amp;width=350 350w" width="350" height="133" loading="lazy">
2724                </div>
2725              
2726            
2727              
2728                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wix-experience-catalysts.png?v=1759311312&amp;width=350" alt="ExperienceCatalaistic" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wix-experience-catalysts.png?v=1759311312&amp;width=350 350w" width="350" height="124" loading="lazy">
2729                </div>
2730              
2731            
2732              
2733                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-RetouchSkillLab.png?v=1759311312&amp;width=350" alt="RetouchSkinLab" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-RetouchSkillLab.png?v=1759311312&amp;width=350 350w" width="350" height="97" loading="lazy">
2734                </div>
2735              
2736            
2737              
2738                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-culturaliq.png?v=1759311311&amp;width=350" alt="CulturalIQ" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-culturaliq.png?v=1759311311&amp;width=350 350w" width="350" height="349" loading="lazy">
2739                </div>
2740              
2741            
2742              
2743                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/asn-b.jpg?v=1763377686&amp;width=350" alt="AsianSustainableNetwork" srcset="//codendesigner.com/cdn/shop/files/asn-b.jpg?v=1763377686&amp;width=350 350w" width="350" height="109" loading="lazy">
2744                </div>
2745              
2746            
2747              
2748                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-million-academy.png?v=1759311311&amp;width=350" alt="MillionAcademy" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-million-academy.png?v=1759311311&amp;width=350 350w" width="350" height="141" loading="lazy">
2749                </div>
2750              
2751            
2752              
2753                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-ss-community-counter-png.png?v=1759311311&amp;width=350" alt="CommunityCounter" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-ss-community-counter-png.png?v=1759311311&amp;width=350 350w" width="350" height="350" loading="lazy">
2754                </div>
2755              
2756            
2757              
2758                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-freds.png?v=1759311311&amp;width=350" alt="Fred&quot;s" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-freds.png?v=1759311311&amp;width=350 350w" width="350" height="233" loading="lazy">
2759                </div>
2760              
2761            
2762              
2763                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-creativenco.png?v=1759311311&amp;width=350" alt="Creativ and Co" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-creativenco.png?v=1759311311&amp;width=350 350w" width="350" height="233" loading="lazy">
2764                </div>
2765              
2766            
2767              
2768                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-staryouniversity.png?v=1759311311&amp;width=350" alt="StarUniversity" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-staryouniversity.png?v=1759311311&amp;width=350 350w" width="350" height="105" loading="lazy">
2769                </div>
2770              
2771            
2772              
2773                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-ilp-academy.jpg?v=1759311311&amp;width=350" alt="ILP-Academy" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-ilp-academy.jpg?v=1759311311&amp;width=350 350w" width="350" height="231" loading="lazy">
2774                </div>
2775              
2776            
2777              
2778                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-form.png?v=1759311311&amp;width=350" alt="Form" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-form.png?v=1759311311&amp;width=350 350w" width="350" height="233" loading="lazy">
2779                </div>
2780              
2781            
2782              
2783                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-flowerisme.png?v=1759311311
2783&amp;width=350" alt="Flowerisme" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-flowerisme.png?v=1759311311&amp;width=350 350w" width="350" height="248" loading="lazy">
2784                </div>
2785              
2786            
2787              
2788                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-judinash.webp?v=1759311311&amp;width=350" alt="JudiNash" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-judinash.webp?v=1759311311&amp;width=350 350w" width="350" height="108" loading="lazy">
2789                </div>
2790              
2791            
2792              
2793                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-dan-henry-2.jpg?v=1759311311&amp;width=350" alt="DanHenry" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-dan-henry-2.jpg?v=1759311311&amp;width=350 350w" width="350" height="350" loading="lazy">
2794                </div>
2795              
2796            
2797              
2798                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-Avetsa-education.png?v=1759311311&amp;width=350" alt="Avesta" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-Avetsa-education.png?v=1759311311&amp;width=350 350w" width="350" height="217" loading="lazy">
2799                </div>
2800              
2801            
2802              
2803                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-ABSHoney.webp?v=1759311311&amp;width=350" alt="AB&#39;s Honneys" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-ABSHoney.webp?v=1759311311&amp;width=350 350w" width="350" height="79" loading="lazy">
2804                </div>
2805              
2806            
2807              
2808                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-vflatworld.jpg?v=1759311311&amp;width=350" alt="V-Flat" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-vflatworld.jpg?v=1759311311&amp;width=350 350w" width="350" height="350" loading="lazy">
2809                </div>
2810              
2811            
2812              
2813                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-bugleforklift.jpg?v=1759311311&amp;width=350" alt="BugelFurklift" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-bugleforklift.jpg?v=1759311311&amp;width=350 350w" width="350" height="350" loading="lazy">
2814                </div>
2815              
2816            
2817              
2818                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/shopify-canvas.png?v=1759311311&amp;width=350" alt="ShopifyCanvas" srcset="//codendesigner.com/cdn/shop/files/shopify-canvas.png?v=1759311311&amp;width=350 350w" width="350" height="350" loading="lazy">
2819                </div>
2820              
2821            
2822              
2823                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-ss-riley-group-inc.jpg?v=1759311311&amp;width=350" alt="riley-group-inc" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-ss-riley-group-inc.jpg?v=1759311311&amp;width=350 350w" width="350" height="350" loading="lazy">
2824                </div>
2825              
2826            
2827              
2828                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-ss-wall-street-bound.webp?v=1759311310&amp;width=350" alt="Wall Stat Bound" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-ss-wall-street-bound.webp?v=1759311310&amp;width=350 350w" width="350" height="77" loading="lazy">
2829                </div>
2830              
2831            
2832              
2833                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/the-space-safe.jpg?v=1763377686&amp;width=350" alt="SpaceSafe" srcset="//codendesigner.com/cdn/shop/files/the-space-safe.jpg?v=1763377686&amp;width=350 350w" width="350" height="122" loading="lazy">
2834                </div>
2835              
2836            
2837              
2838                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-sassyLab.webp?v=1759311310&amp;width=350" alt="SassyLab" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-sassyLab.webp?v=1759311310&amp;width=350 350w" width="350" height="109" loading="lazy">
2839                </div>
2840              
2841            
2842              
2843                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-purespective.png?v=1759311310&amp;width=350" alt="purespective" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-purespective.png?v=1759311310&amp;width=350 350w" width="350" height="350" loading="lazy">
2844                </div>
2845              
2846            
2847              
2848                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-Mid-western.png?v=1759311310&amp;width=350" alt="Mid-Western" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-Mid-western.png?v=1759311310&amp;width=350 350w" width="350" height="257" loading="lazy">
2849                </div>
2850              
2851            
2852              
2853                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-manchester-warehouse.jpg?v=1759311310&amp;width=350" alt="MancherteWarehouse" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-manchester-warehouse.jpg?v=1759311310&amp;width=350 350w" width="350" height="105" loading="lazy">
2854                </div>
2855              
2856            
2857              
2858                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/shopify-service.png?v=1759311310&amp;width=350" alt="ShopifyService" srcset="//codendesigner.com/cdn/shop/files/shopify-service.png?v=1759311310&amp;width=350 350w" width="350" height="350" loading="lazy">
2859                </div>
2860              
2861            
2862              
2863                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/learnworld-Expert_Badge.png?v=1759311310&amp;width=350" alt="LearWorldsExpert" srcset="//codendesigner.com/cdn/shop/files/learnworld-Expert_Badge.png?v=1759311310&amp;width=350 350w" width="350" height="350" loading="lazy">
2864                </div>
2865              
2866            
2867              
2868                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-lccl.education.webp?v=1759311310&amp;width=350" alt="lccl.education" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-lccl.education.webp?v=1759311310&amp;width=350 350w" width="350" height="143" loading="lazy">
2869                </div>
2870              
2871            
2872              
2873                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/horon-black_076611a1-b59e-48fd-a00d-d9d0bdc93b43.jpg?v=1763377037&amp;width=350" alt="HornWatch" srcset="//codendesigner.com/cdn/shop/files/horon-black_076611a1-b59e-48fd-a00d-d9d0bdc93b43.jpg?v=1763377037&amp;width=350 350w" width="350" height="350" loading="lazy">
2874                </div>
2875              
2876            
2877              
2878                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-heavenroc.png?v=1759311310&amp;width=350" alt="HevenRock" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-heavenroc.png?v=1759311310&amp;width=350 350w" width="350" height="350" loading="lazy">
2879                </div>
2880              
2881            
2882              
2883                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/syntex.jpg?v=1763377686&amp;width=350" alt="SyntaxAcademy" srcset="//codendesigner.com/cdn/shop/files/syntex.jpg?v=1763377686&amp;width=350 350w" width="350" height="132" loading="lazy">
2884                </div>
2885              
2886            
2887              
2888                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/danhenry-watch-black-logo.png?v=1763377861&amp;width=350" alt="DanHandry" srcset="//codendesigner.com/cdn/shop/files/danhenry-watch-black-logo.png?v=1763377861&amp;width=350 350w" width="350" height="275" loading="lazy">
2889                </div>
2890              
2891            
2892              
2893                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/shopify-partner.png?v=1759311310&amp;width=350" alt="ShopifyPartner" srcset="//codendesigner.com/cdn/shop/files/shopify-partner.png?v=1759311310&amp;width=350 350w" width="350" height="135" loading="lazy">
2894                </div>
2895              
2896            
2897              
2898                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-borbonese.webp?v=1759311310&amp;width=350" alt="Borbonese" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-borbonese.webp?v=1759311310&amp;width=350 350w" width="350" height="38" loading="lazy">
2899                </div>
2900              
2901            
2902              
2903                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-talentcapability.png?v=1759311310&amp;width=350" alt="TalentCapability" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-talentcapability.png?v=1759311310&amp;width=350 350w" width="350" height="55" loading="lazy">
2904                </div>
2905              
2906            
2907              
2908                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-ilpasiapacific.png?v=1759311310&amp;width=350" alt="ILP" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-ilpasiapacific.png?v=1759311310&amp;width=350 350w" width="350" height="233" loading="lazy">
2909                </div>
2910              
2911            
2912              
2913                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/Schraf2.0-logo2.png?v=1763372396&amp;width=350" alt="Schraf2.0-logo" srcset="//codendesigner.com/cdn/shop/files/Schraf2.0-logo2.png?v=1763372396&amp;width=350 350w" width="350" height="76" loading="lazy">
2914                </div>
2915              
2916            
2917              
2918                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-the-rethink-group.png?v=1759311310&amp;width=350" alt="TheReThinkGroup" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-the-rethink-group.png?v=1759311310&amp;width=350 350w" width="350" height="233" loading="lazy">
2919                </div>
2920              
2921            
2922              
2923                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-vitaMemorials.png?v=1759311310&amp;width=350" alt="VitaMemorials" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-vitaMemorials.png?v=1759311310&amp;width=350 350w" width="350" height="142" loading="lazy">
2924                </div>
2925              
2926            
2927              
2928                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-simplyhoney.png?v=1759311310&amp;width=350" alt="SimplyHonny" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-simplyhoney.png?v=1759311310&amp;width=350 350w" width="350" height="38" loading="lazy">
2929                </div>
2930              
2931            
2932              
2933                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-adzimpact.png?v=1759311292&amp;width=350" alt="AdzImpact" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-adzimpact.png?v=1759311292&amp;width=350 350w" width="350" height="74" loading="lazy">
2934                </div>
2935              
2936            
2937          
2938            
2939              
2940                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-edu-egy.png?v=1777876531&amp;width=350" alt="The Educator" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-edu-egy.png?v=1777876531&amp;width=350 350w" width="350" height="357" loading="lazy">
2941                </div>
2942              
2943            
2944              
2945                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/SystemicAlly.png?v=1771914617&amp;width=350" alt="systemicAlly" srcset="//codendesigner.com/cdn/shop/files/SystemicAlly.png?v=1771914617&amp;width=350 350w" width="350" height="197" loading="lazy">
2946                </div>
2947              
2948            
2949              
2950                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/CareerAlly-Logo-Full-Colour_1.png?v=1771914605&amp;width=350" alt="CareerAlly" srcset="//codendesigner.com/cdn/shop/files/CareerAlly-Logo-Full-Colour_1.png?v=1771914605&amp;width=350 350w" width="350" height="142" loading="lazy">
2951                </div>
2952              
2953            
2954              
2955                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/muse-wellbeing-logo.png?v=1763294301&amp;width=350" alt="muse-wellbeing-logo" srcset="//codendesigner.com/cdn/shop/files/muse-wellbeing-logo.png?v=1763294301&amp;width=350 350w" width="350" height="150" loading="lazy">
2956                </div>
2957              
2958            
2959              
2960                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/surghub-logo.png?v=1763369879&amp;width=350" alt="surghub-logo" srcset="//codendesigner.com/cdn/shop/files/surghub-logo.png?v=1763369879&amp;width=350 350w" width="350" height="71" loading="lazy">
2961                </div>
2962              
2963            
2964              
2965                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/Vflat_Logo.avif?v=1753880815&amp;width=350" alt="v flat" srcset="//codendesigner.com/cdn/shop/files/Vflat_Logo.avif?v=1753880815&amp;width=350 350w" width="350" height="113" loading="lazy">
2966                </div>
2967              
2968            
2969              
2970                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-impact-ar.png?v=1759311312&amp;width=350" alt="impact ar" srcset="//codendesigner.com/cdn/shop/files/cnd-client
2970logo-lw-impact-ar.png?v=1759311312&amp;width=350 350w" width="350" height="350" loading="lazy">
2971                </div>
2972              
2973            
2974              
2975                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-Bellrose-Jewellers.png?v=1759311312&amp;width=350" alt="BellaRose" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-Bellrose-Jewellers.png?v=1759311312&amp;width=350 350w" width="350" height="133" loading="lazy">
2976                </div>
2977              
2978            
2979              
2980                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wix-experience-catalysts.png?v=1759311312&amp;width=350" alt="ExperienceCatalaistic" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wix-experience-catalysts.png?v=1759311312&amp;width=350 350w" width="350" height="124" loading="lazy">
2981                </div>
2982              
2983            
2984              
2985                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-RetouchSkillLab.png?v=1759311312&amp;width=350" alt="RetouchSkinLab" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-RetouchSkillLab.png?v=1759311312&amp;width=350 350w" width="350" height="97" loading="lazy">
2986                </div>
2987              
2988            
2989              
2990                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-culturaliq.png?v=1759311311&amp;width=350" alt="CulturalIQ" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-culturaliq.png?v=1759311311&amp;width=350 350w" width="350" height="349" loading="lazy">
2991                </div>
2992              
2993            
2994              
2995                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/asn-b.jpg?v=1763377686&amp;width=350" alt="AsianSustainableNetwork" srcset="//codendesigner.com/cdn/shop/files/asn-b.jpg?v=1763377686&amp;width=350 350w" width="350" height="109" loading="lazy">
2996                </div>
2997              
2998            
2999              
3000                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-million-academy.png?v=1759311311&amp;width=350" alt="MillionAcademy" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-million-academy.png?v=1759311311&amp;width=350 350w" width="350" height="141" loading="lazy">
3001                </div>
3002              
3003            
3004              
3005                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-ss-community-counter-png.png?v=1759311311&amp;width=350" alt="CommunityCounter" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-ss-community-counter-png.png?v=1759311311&amp;width=350 350w" width="350" height="350" loading="lazy">
3006                </div>
3007              
3008            
3009              
3010                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-freds.png?v=1759311311&amp;width=350" alt="Fred&quot;s" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-freds.png?v=1759311311&amp;width=350 350w" width="350" height="233" loading="lazy">
3011                </div>
3012              
3013            
3014              
3015                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-creativenco.png?v=1759311311&amp;width=350" alt="Creativ and Co" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-creativenco.png?v=1759311311&amp;width=350 350w" width="350" height="233" loading="lazy">
3016                </div>
3017              
3018            
3019              
3020                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-staryouniversity.png?v=1759311311&amp;width=350" alt="StarUniversity" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-staryouniversity.png?v=1759311311&amp;width=350 350w" width="350" height="105" loading="lazy">
3021                </div>
3022              
3023            
3024              
3025                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-ilp-academy.jpg?v=1759311311&amp;width=350" alt="ILP-Academy" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-lw-ilp-academy.jpg?v=1759311311&amp;width=350 350w" width="350" height="231" loading="lazy">
3026                </div>
3027              
3028            
3029              
3030                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-form.png?v=1759311311&amp;width=350" alt="Form" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-form.png?v=1759311311&amp;width=350 350w" width="350" height="233" loading="lazy">
3031                </div>
3032              
3033            
3034              
3035                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-flowerisme.png?v=1759311311&amp;width=350" alt="Flowerisme" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-flowerisme.png?v=1759311311&amp;width=350 350w" width="350" height="248" loading="lazy">
3036                </div>
3037              
3038            
3039              
3040                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-judinash.webp?v=1759311311&amp;width=350" alt="JudiNash" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-judinash.webp?v=1759311311&amp;width=350 350w" width="350" height="108" loading="lazy">
3041                </div>
3042              
3043            
3044              
3045                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-dan-henry-2.jpg?v=1759311311&amp;width=350" alt="DanHenry" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-dan-henry-2.jpg?v=1759311311&amp;width=350 350w" width="350" height="350" loading="lazy">
3046                </div>
3047              
3048            
3049              
3050                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-Avetsa-education.png?v=1759311311&amp;width=350" alt="Avesta" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-Avetsa-education.png?v=1759311311&amp;width=350 350w" width="350" height="217" loading="lazy">
3051                </div>
3052              
3053            
3054              
3055                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-ABSHoney.webp?v=1759311311&amp;width=350" alt="AB&#39;s Honneys" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-ABSHoney.webp?v=1759311311&amp;width=350 350w" width="350" height="79" loading="lazy">
3056                </div>
3057              
3058            
3059              
3060                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-vflatworld.jpg?v=1759311311&amp;width=350" alt="V-Flat" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-vflatworld.jpg?v=1759311311&amp;width=350 350w" width="350" height="350" loading="lazy">
3061                </div>
3062              
3063            
3064              
3065                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-bugleforklift.jpg?v=1759311311&amp;width=350" alt="BugelFurklift" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-bugleforklift.jpg?v=1759311311&amp;width=350 350w" width="350" height="350" loading="lazy">
3066                </div>
3067              
3068            
3069              
3070                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/shopify-canvas.png?v=1759311311&amp;width=350" alt="ShopifyCanvas" srcset="//codendesigner.com/cdn/shop/files/shopify-canvas.png?v=1759311311&amp;width=350 350w" width="350" height="350" loading="lazy">
3071                </div>
3072              
3073            
3074              
3075                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-ss-riley-group-inc.jpg?v=1759311311&amp;width=350" alt="riley-group-inc" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-ss-riley-group-inc.jpg?v=1759311311&amp;width=350 350w" width="350" height="350" loading="lazy">
3076                </div>
3077              
3078            
3079              
3080                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-ss-wall-street-bound.webp?v=1759311310&amp;width=350" alt="Wall Stat Bound" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-ss-wall-street-bound.webp?v=1759311310&amp;width=350 350w" width="350" height="77" loading="lazy">
3081                </div>
3082              
3083            
3084              
3085                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/the-space-safe.jpg?v=1763377686&amp;width=350" alt="SpaceSafe" srcset="//codendesigner.com/cdn/shop/files/the-space-safe.jpg?v=1763377686&amp;width=350 350w" width="350" height="122" loading="lazy">
3086                </div>
3087              
3088            
3089              
3090                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-sassyLab.webp?v=1759311310&amp;width=350" alt="SassyLab" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-sassyLab.webp?v=1759311310&amp;width=350 350w" width="350" height="109" loading="lazy">
3091                </div>
3092              
3093            
3094              
3095                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-purespective.png?v=1759311310&amp;width=350" alt="purespective" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-purespective.png?v=1759311310&amp;width=350 350w" width="350" height="350" loading="lazy">
3096                </div>
3097              
3098            
3099              
3100                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-Mid-western.png?v=1759311310&amp;width=350" alt="Mid-Western" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-Mid-western.png?v=1759311310&amp;width=350 350w" width="350" height="257" loading="lazy">
3101                </div>
3102              
3103            
3104              
3105                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-manchester-warehouse.jpg?v=1759311310&amp;width=350" alt="MancherteWarehouse" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-manchester-warehouse.jpg?v=1759311310&amp;width=350 350w" width="350" height="105" loading="lazy">
3106                </div>
3107              
3108            
3109              
3110                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/shopify-service.png?v=1759311310&amp;width=350" alt="ShopifyService" srcset="//codendesigner.com/cdn/shop/files/shopify-service.png?v=1759311310&amp;width=350 350w" width="350" height="350" loading="lazy">
3111                </div>
3112              
3113            
3114              
3115                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/learnworld-Expert_Badge.png?v=1759311310&amp;width=350" alt="LearWorldsExpert" srcset="//codendesigner.com/cdn/shop/files/learnworld-Expert_Badge.png?v=1759311310&amp;width=350 350w" width="350" height="350" loading="lazy">
3116                </div>
3117              
3118            
3119              
3120                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-lccl.education.webp?v=1759311310&amp;width=350" alt="lccl.education" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-lccl.education.webp?v=1759311310&amp;width=350 350w" width="350" height="143" loading="lazy">
3121                </div>
3122              
3123            
3124              
3125                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/horon-black_076611a1-b59e-48fd-a00d-d9d0bdc93b43.jpg?v=1763377037&amp;width=350" alt="HornWatch" srcset="//codendesigner.com/cdn/shop/files/horon-black_076611a1-b59e-48fd-a00d-d9d0bdc93b43.jpg?v=1763377037&amp;width=350 350w" width="350" height="350" loading="lazy">
3126                </div>
3127              
3128            
3129              
3130                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-heavenroc.png?v=1759311310&amp;width=350" alt="HevenRock" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-heavenroc.png?v=1759311310&amp;width=350 350w" width="350" height="350" loading="lazy">
3131                </div>
3132              
3133            
3134              
3135                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/syntex.jpg?v=1763377686&amp;width=350" alt="SyntaxAcademy" srcset="//codendesigner.com/cdn/shop/files/syntex.jpg?v=1763377686&amp;width=350 350w" width="350" height="132" loading="lazy">
3136                </div>
3137              
3138            
3139              
3140                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/danhenry-watch-black-logo.png?v=1763377861&amp;width=350" alt="DanHandry" srcset="//codendesigner.com/cdn/shop/files/danhenry-watch-black-logo.png?v=1763377861&amp;width=350 350w" width="350" height="275" loading="lazy">
3141                </div>
3142              
3143            
3144              
3145                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/shopify-partner.png?v=1759311310&amp;width=350" alt="ShopifyPartner" srcset="//codendesigner.com/cdn/shop/files/shopify-partner.png?v=1759311310&amp;width=350 350w" width="350" height="135" loading="lazy">
3146                </div>
3147              
3148            
3149              
3150                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-borbonese.webp?v=1759311310&amp;width=350" alt="Borbonese" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-sp-borbonese.webp?v=1759311310&amp;width=350 350w" width="350" height="38" loading="lazy">
3151                </div>
3152              
3153            
3154              
3155                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-talentcapability.png?v=1759311310&amp;width=350" alt="TalentC
3155apability" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-talentcapability.png?v=1759311310&amp;width=350 350w" width="350" height="55" loading="lazy">
3156                </div>
3157              
3158            
3159              
3160                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-ilpasiapacific.png?v=1759311310&amp;width=350" alt="ILP" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-ilpasiapacific.png?v=1759311310&amp;width=350 350w" width="350" height="233" loading="lazy">
3161                </div>
3162              
3163            
3164              
3165                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/Schraf2.0-logo2.png?v=1763372396&amp;width=350" alt="Schraf2.0-logo" srcset="//codendesigner.com/cdn/shop/files/Schraf2.0-logo2.png?v=1763372396&amp;width=350 350w" width="350" height="76" loading="lazy">
3166                </div>
3167              
3168            
3169              
3170                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-the-rethink-group.png?v=1759311310&amp;width=350" alt="TheReThinkGroup" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-the-rethink-group.png?v=1759311310&amp;width=350 350w" width="350" height="233" loading="lazy">
3171                </div>
3172              
3173            
3174              
3175                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-vitaMemorials.png?v=1759311310&amp;width=350" alt="VitaMemorials" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-vitaMemorials.png?v=1759311310&amp;width=350 350w" width="350" height="142" loading="lazy">
3176                </div>
3177              
3178            
3179              
3180                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-simplyhoney.png?v=1759311310&amp;width=350" alt="SimplyHonny" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-wp-simplyhoney.png?v=1759311310&amp;width=350 350w" width="350" height="38" loading="lazy">
3181                </div>
3182              
3183            
3184              
3185                <div class="logo-carousel__item-template--18633345794095clientlogocarouselzylqk8" ><img src="//codendesigner.com/cdn/shop/files/cnd-clientlogo-adzimpact.png?v=1759311292&amp;width=350" alt="AdzImpact" srcset="//codendesigner.com/cdn/shop/files/cnd-clientlogo-adzimpact.png?v=1759311292&amp;width=350 350w" width="350" height="74" loading="lazy">
3186                </div>
3187              
3188            
3189          
3190        
3191      </div>
3192    </div>
3193  </div>
3194</div>
3195
3196</div><section id="shopify-section-template--18633345794095__section_showcase_single_c3cb4E" class="shopify-section section">
3197
3198<section class="cd-services" style="--page-bg: #ffffff;">
3199  <div class="cd-container page-width">
3200    
3201    
3202  </div>
3203
3204  <div
3205    class="cd-service"
3206    style="--row-bg: #f1f7ff; --row-text: #0f172a;"
3207  >
3208      <div class="cd-grid">
3209        <!-- Col 1: Title, summary, button -->
3210        <div class="cd-col">
3211          <div class="cd-titlewrap">
3212            <h3 class="cd-title">Platforms that sell your courses online</h3>
3213          </div>
3214
3215          
3216            <p class="cd-summary">Turn your knowledge into income. Learning platforms where students enroll, learn, and pay — all in one place.</p>
3217          
3218
3219          
3220            <a
3221              class="cd-btn"
3222              style="--btn-bg: #0f172a;"
3223              href="https://codendesigner.com/pages/learnworld"
3224            >
3225              Start Here
3226              <svg
3227                class="cd-btn-icon"
3228                viewBox="0 0 24 24"
3229                fill="none"
3230                stroke="currentColor"
3231                stroke-width="2"
3232                aria-hidden="true"
3233              >
3234                <path d="m9 18 6-6-6-6"/>
3235              </svg>
3236            </a>
3237          
3238        </div>
3239
3240        <!-- Col 2: Features & Audience -->
3241        <div class="cd-col">
3242          
3243            <h4 class="cd-coltitle">What We Handle</h4>
3244          
3245          
3246            <div class="cd-list rte"><p><strong>Course Building </strong>— modules, learning paths, certifications. <strong>API & Integrations</strong> — CRM, payments, email, internal tools. <strong>School Management</strong> — multi-instructor, multi-cohort, admin controls. <strong>Custom Development</strong> — features beyond platform defaults. <strong>Marketing</strong> — funnels and email sequences that sell the course.<strong> Content Creation</strong> — video and copy for course pages. <strong>Design</strong> — UI/UX matched to your brand. <strong>Strategy & Consulting</strong> — platform and pricing decisions</p></div>
3247          
3248
3249          
3250            <h4 class="cd-coltitle cd-coltitle--aud">Built For</h4>
3251          
3252          
3253            <p class="cd-aud">Industry Experts, Professional Coaches, Content Creators, Corporate Training, Continuing Education, Medical Education, Associations</p>
3254          
3255
3256          
3257          
3258            <div class="cd-logos">
3259              
3260                
3261                  <img src="//codendesigner.com/cdn/shop/files/2_6547b1a4-06fa-4640-a75d-092be46d8181.png?v=1759325037&amp;width=160" alt="" srcset="//codendesigner.com/cdn/shop/files/2_6547b1a4-06fa-4640-a75d-092be46d8181.png?v=1759325037&amp;width=160 160w" width="160" height="160" loading="lazy" class="cd-logo">
3262                
3263              
3264                
3265                  <img src="//codendesigner.com/cdn/shop/files/1_0c612d85-8711-4e95-8ad5-09a0d701a0d1.png?v=1759325037&amp;width=160" alt="" srcset="//codendesigner.com/cdn/shop/files/1_0c612d85-8711-4e95-8ad5-09a0d701a0d1.png?v=1759325037&amp;width=160 160w" width="160" height="160" loading="lazy" class="cd-logo">
3266                
3267              
3268                
3269                  <img src="//codendesigner.com/cdn/shop/files/3_a77325c5-98c0-4402-be14-f14ac4ba6651.png?v=1759325037&amp;width=160" alt="" srcset="//codendesigner.com/cdn/shop/files/3_a77325c5-98c0-4402-be14-f14ac4ba6651.png?v=1759325037&amp;width=160 160w" width="160" height="160" loading="lazy" class="cd-logo">
3270                
3271              
3272                
3273                  <img src="//codendesigner.com/cdn/shop/files/4_f53e7e0b-24a2-4970-aa66-6c2dd5d29b7f.png?v=1759325037&amp;width=160" alt="" srcset="//codendesigner.com/cdn/shop/files/4_f53e7e0b-24a2-4970-aa66-6c2dd5d29b7f.png?v=1759325037&amp;width=160 160w" width="160" height="160" loading="lazy" class="cd-logo">
3274                
3275              
3276            </div>
3277          
3278        </div>
3279
3280        <!-- Col 3: Media — each "image" block can be an uploaded image OR an icon.
3281             1 media item = shown static (no carousel). 2+ = carousel. 0 = section-level icon placeholder. -->
3282        <div class="cd-col cd-media">
3283          
3284          
3285          
3286          
3287
3288          
3289            
3290              <img src="//codendesigner.com/cdn/shop/files/syntax.png?v=1759325113&amp;width=1600" alt="Service preview" srcset="//codendesigner.com/cdn/shop/files/syntax.png?v=1759325113&amp;width=480 480w, //codendesigner.com/cdn/shop/files/syntax.png?v=1759325113&amp;width=720 720w, //codendesigner.com/cdn/shop/files/syntax.png?v=1759325113&amp;width=960 960w, //codendesigner.com/cdn/shop/files/syntax.png?v=1759325113&amp;width=1200 1200w, //codendesigner.com/cdn/shop/files/syntax.png?v=1759325113&amp;width=1600 1600w" width="1600" height="1076" loading="lazy" class="cd-img" sizes="(min-width: 1024px) 33vw, 100vw">
3291            
3292
3293          
3294        </div>
3295      </div>
3296  </div>
3297</section>
3298
3299<style>
3300  .cd-services {
3301    background: var(--page-bg, #fff);
3302    color: #0f172a;
3303  }
3304  .cd-container {
3305    text-align: center;
3306  }
3307  .cd-heading {
3308    font-weight: 800;
3309    line-height: 1.1;
3310    margin: 0 0 10px;
3311  }
3312  .cd-subheading {
3313    color: #475569;
3314    margin: 0 0 28px;
3315  }
3316
3317  .cd-service {
3318    background: var(--row-bg, #f7fafc);
3319    color: var(--row-text, #0f172a);
3320    padding: clamp(24px, 4vw, 48px);
3321    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
3322  }
3323  .cd-grid {
3324    display: grid;
3325    grid-template-columns: 1fr;
3326    gap: clamp(16px, 3vw, 32px);
3327    align-items: center;
3328    max-width: 1600px;
3329    margin: 0 auto;
3330  }
3331  .cd-col {
3332    display: flex;
3333    flex-direction: column;
3334    gap: 12px;
3335  }
3336
3337  .cd-titlewrap {
3338    margin-bottom: 6px;
3339  }
3340  .cd-title {
3341    margin: 0;
3342    color: currentColor;
3343  }
3344  .cd-summary {
3345    color: currentColor;
3346  }
3347
3348  .cd-btn {
3349    --_bg: var(--btn-bg, #111827);
3350    display: inline-flex;
3351    align-items: center;
3352    gap: 8px;
3353    background: var(--_bg);
3354    color: #fff;
3355    text-decoration: none;
3356    padding: 10px 18px;
3357    border-radius: 8px;
3358    font-weight: 700;
3359    transition: transform 0.2s ease, filter 0.2s ease;
3360    width: fit-content;
3361  }
3362  .cd-btn:hover {
3363    transform: translateY(-1px);
3364    filter: brightness(0.95);
3365  }
3366  .cd-btn:focus-visible {
3367    outline: 3px solid rgba(0, 0, 0, 0.2);
3368    outline-offset: 2px;
3369  }
3370  .cd-btn-icon {
3371    width: 18px;
3372    height: 18px;
3373    transition: transform 0.2s ease;
3374  }
3375  .cd-btn:hover .cd-btn-icon {
3376    transform: translateX(4px);
3377  }
3378
3379  .cd-coltitle {
3380    margin-bottom: 0px;
3381    color: currentColor;
3382  }
3383  .cd-coltitle--aud {
3384    margin-top: 10px;
3385  }
3386  .cd-list {
3387    list-style: none;
3388    display: flex;
3389    flex-direction: column;
3390    gap: 6px;
3391    margin: 0 0 6px;
3392    padding: 0;
3393  }
3394  .cd-li {
3395    display: flex;
3396    gap: 8px;
3397    color: currentColor;
3398  }
3399  .cd-bullet {
3400    color: currentColor;
3401    margin-top: 2px;
3402  }
3403  .cd-aud {
3404    color: currentColor;
3405  }
3406
3407  .cd-logos {
3408    display: flex;
3409    flex-wrap: wrap;
3410    gap: 10px;
3411    margin-top: 10px;
3412    align-items: center;
3413  }
3414  .cd-logo {
3415    width: auto;
3416    height: 44px;
3417   /* border-radius: 9999px; */
3418    object-fit: cover;
3419  /*  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */
3420  /*  background: #fff;  */
3421  }
3422
3423  .cd-media {
3424    order: -1;
3425  }
3426
3427  /* Carousel Styles */
3428  .cd-carousel-container {
3429    position: relative;
3430    width: 100%;
3431  }
3432  .cd-carousel {
3433    position: relative;
3434    overflow: hidden;
3435    border-radius: 12px;
3436    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
3437    height: clamp(220px, 28vw, 340px);
3438  }
3439  .cd-carousel-track {
3440    display: flex;
3441    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
3442    height: 100%;
3443  }
3444  .cd-carousel-slide {
3445    min-width: 100%;
3446    flex-shrink: 0;
3447  }
3448  .cd-img {
3449    width: 100%;
3450    height: 100%;
3451    object-fit: cover;
3452    display: block;
3453  }
3454  .cd-img--placeholder {
3455    display: flex;
3456    align-items: center;
3457    justify-content: center;
3458    background: var(--icon-accent, #08c48a);
3459    background: linear-gradient(135deg, var(--icon-accent, #08c48a), color-mix(in srgb, var(--icon-accent, #08c48a) 65%, #000 10%));
3460    border-radius: 12px;
3461    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
3462    height: clamp(220px, 28vw, 340px);
3463  }
3464  .cd-placeholder-icon {
3465    display: inline-flex;
3466    align-items: center;
3467    justify-content: center;
3468    width: clamp(72px, 10vw, 112px);
3469    height: clamp(72px, 10vw, 112px);
3470    border-radius: 50%;
3471    background: rgba(255, 255, 255, 0.16);
3472    color: #fff;
3473  }
3474  .cd-placeholder-icon svg {
3475    width: 55%;
3476    height: 55%;
3477  }
3478
3479  @media (min-width: 1024px) {
3480    .cd-grid {
3481      grid-template-columns: 1fr 1fr 1fr;
3482      gap: clamp(18px, 3vw, 40px);
3483    }
3484    .cd-media {
3485      order: 0;
3486    }
3487  }
3488  .cd-carousel-slide {
3489  min-width: 100%;
3490  flex-shrink: 0;
3491  opacity: 0;
3492  transition: opacity 0.6s ease-in-out;
3493}
3494.cd-carousel-slide.active {
3495  opacity: 1;
3496}
3497</style>
3498<script>
3499(function() {
3500  function initCarousels() {
3501    const carousels = document.querySelectorAll('.cd-carousel');
3502    
3503    carousels.forEach(carousel => {
3504      const track = carousel.querySelector('.cd-carousel-track');
3505      const slides = carousel.querySelectorAll('.cd-carousel-slide');
3506      
3507      if (!track || slides.length <= 1) return;
3508      
3509      let currentIndex = 0;
3510      let autoplayInterval;
3511      const autoplayDelay = parseInt(carousel.dataset.interval) || 4000;
3512      
3513      if (slides.length > 0) {
3514        slides[0].classList.add('active');
3515      }
3516      
3517      function updateCarousel() {
3518        slides.forEach((slide, idx) => {
3519          slide.classList.toggle('active', idx === currentIndex);
3520        });
3521        track.style.transform = `translateX(-${currentIndex * 100}%)`;
3522      }
3523      
3524      function nextSlide() {
3525        currentIndex = (currentIndex + 1) % slides.length;
3526        updateCarousel();
3527      }
3528      
3529      function startAutoplay() {
3530        if (carousel.dataset.autoplay === 'true' && !document.hidden) {
3531          autoplayInterval = setInterval(nextSlide, autoplayDelay);
3532        }
3533      }
3534      
3535      function stopAutoplay() {
3536        clearInterval(autoplayInterval);
3537      }
3538      
3539      document.addEventListener('visibilitychange', () => {
3540        if (document.hidden) {
3541          stopAutoplay();
3542        } else {
3543          startAutoplay();
3544        }
3545      });
3546      
3547      startAutoplay();
3548    });
3549  }
3550  
3551  if (document.readyState === 'loading') {
3552    document.addEventListener('DOMContentLoaded', initCarousels);
3553  } else {
3554    initCarousels();
3555  }
3556})();
3557</script>
3557
3558</section><section id="shopify-section-template--18633345794095__section_showcase_single_ctUcKj" class="shopify-section section">
3559
3560<section class="cd-services" style="--page-bg: #ffffff;">
3561  <div class="cd-container page-width">
3562    
3563    
3564  </div>
3565
3566  <div
3567    class="cd-service"
3568    style="--row-bg: #ffffff; --row-text: #0f172a;"
3569  >
3570      <div class="cd-grid">
3571        <!-- Col 1: Title, summary, button -->
3572        <div class="cd-col">
3573          <div class="cd-titlewrap">
3574            <h3 class="cd-title">Websites that sell your products online</h3>
3575          </div>
3576
3577          
3578            <p class="cd-summary">A store your customers can trust — smooth checkout, mobile-friendly, and designed to turn visitors into buyers.</p>
3579          
3580
3581          
3582            <a
3583              class="cd-btn"
3584              style="--btn-bg: #0f172a;"
3585              href="https://calendly.com/frontendengineer/30-minutes-meeting"
3586            >
3587              Start My Store
3588              <svg
3589                class="cd-btn-icon"
3590                viewBox="0 0 24 24"
3591                fill="none"
3592                stroke="currentColor"
3593                stroke-width="2"
3594                aria-hidden="true"
3595              >
3596                <path d="m9 18 6-6-6-6"/>
3597              </svg>
3598            </a>
3599          
3600        </div>
3601
3602        <!-- Col 2: Features & Audience -->
3603        <div class="cd-col">
3604          
3605            <h4 class="cd-coltitle">Key Features</h4>
3606          
3607          
3608            <div class="cd-list rte"><ul><li>Lightning Setup</li><li>Conversion Focused</li><li>Mobile Optimized</li><li>Growth Ready</li></ul></div>
3609          
3610
3611          
3612            <h4 class="cd-coltitle cd-coltitle--aud">Target Audience</h4>
3613          
3614          
3615            <p class="cd-aud">New Brands, Retail Stores, Subscription Sellers, Specialty Brands, Dropshippers</p>
3616          
3617
3618          
3619          
3620            <div class="cd-logos">
3621              
3622                
3623                  <img src="//codendesigner.com/cdn/shop/files/shopify_037bcfe3-7812-41ce-9932-4d307c72f665.png?v=1759324217&amp;width=160" alt="" srcset="//codendesigner.com/cdn/shop/files/shopify_037bcfe3-7812-41ce-9932-4d307c72f665.png?v=1759324217&amp;width=160 160w" width="160" height="160" loading="lazy" class="cd-logo">
3624                
3625              
3626                
3627                  <img src="//codendesigner.com/cdn/shop/files/woo.png?v=1759324217&amp;width=160" alt="" srcset="//codendesigner.com/cdn/shop/files/woo.png?v=1759324217&amp;width=160 160w" width="160" height="160" loading="lazy" class="cd-logo">
3628                
3629              
3630                
3631                  <img src="//codendesigner.com/cdn/shop/files/squarespace.png?v=1759324217&amp;width=160" alt="" srcset="//codendesigner.com/cdn/shop/files/squarespace.png?v=1759324217&amp;width=160 160w" width="160" height="160" loading="lazy" class="cd-logo">
3632                
3633              
3634                
3635                  <img src="//codendesigner.com/cdn/shop/files/wix_e32a666a-9e20-4383-afab-1325daff0ade.png?v=1759324217&amp;width=160" alt="" srcset="//codendesigner.com/cdn/shop/files/wix_e32a666a-9e20-4383-afab-1325daff0ade.png?v=1759324217&amp;width=160 160w" width="160" height="160" loading="lazy" class="cd-logo">
3636                
3637              
3638            </div>
3639          
3640        </div>
3641
3642        <!-- Col 3: Media — each "image" block can be an uploaded image OR an icon.
3643             1 media item = shown static (no carousel). 2+ = carousel. 0 = section-level icon placeholder. -->
3644        <div class="cd-col cd-media">
3645          
3646          
3647          
3648          
3649
3650          
3651            
3652              <img src="//codendesigner.com/cdn/shop/files/form_6aa87f29-be86-4830-90c1-bcddc178ead9.png?v=1759324054&amp;width=1600" alt="Service preview" srcset="//codendesigner.com/cdn/shop/files/form_6aa87f29-be86-4830-90c1-bcddc178ead9.png?v=1759324054&amp;width=480 480w, //codendesigner.com/cdn/shop/files/form_6aa87f29-be86-4830-90c1-bcddc178ead9.png?v=1759324054&amp;width=720 720w, //codendesigner.com/cdn/shop/files/form_6aa87f29-be86-4830-90c1-bcddc178ead9.png?v=1759324054&amp;width=960 960w, //codendesigner.com/cdn/shop/files/form_6aa87f29-be86-4830-90c1-bcddc178ead9.png?v=1759324054&amp;width=1200 1200w, //codendesigner.com/cdn/shop/files/form_6aa87f29-be86-4830-90c1-bcddc178ead9.png?v=1759324054&amp;width=1600 1600w" width="1600" height="1076" loading="lazy" class="cd-img" sizes="(min-width: 1024px) 33vw, 100vw">
3653            
3654
3655          
3656        </div>
3657      </div>
3658  </div>
3659</section>
3660
3661<style>
3662  .cd-services {
3663    background: var(--page-bg, #fff);
3664    color: #0f172a;
3665  }
3666  .cd-container {
3667    text-align: center;
3668  }
3669  .cd-heading {
3670    font-weight: 800;
3671    line-height: 1.1;
3672    margin: 0 0 10px;
3673  }
3674  .cd-subheading {
3675    color: #475569;
3676    margin: 0 0 28px;
3677  }
3678
3679  .cd-service {
3680    background: var(--row-bg, #f7fafc);
3681    color: var(--row-text, #0f172a);
3682    padding: clamp(24px, 4vw, 48px);
3683    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
3684  }
3685  .cd-grid {
3686    display: grid;
3687    grid-template-columns: 1fr;
3688    gap: clamp(16px, 3vw, 32px);
3689    align-items: center;
3690    max-width: 1600px;
3691    margin: 0 auto;
3692  }
3693  .cd-col {
3694    display: flex;
3695    flex-direction: column;
3696    gap: 12px;
3697  }
3698
3699  .cd-titlewrap {
3700    margin-bottom: 6px;
3701  }
3702  .cd-title {
3703    margin: 0;
3704    color: currentColor;
3705  }
3706  .cd-summary {
3707    color: currentColor;
3708  }
3709
3710  .cd-btn {
3711    --_bg: var(--btn-bg, #111827);
3712    display: inline-flex;
3713    align-items: center;
3714    gap: 8px;
3715    background: var(--_bg);
3716    color: #fff;
3717    text-decoration: none;
3718    padding: 10px 18px;
3719    border-radius: 8px;
3720    font-weight: 700;
3721    transition: transform 0.2s ease, filter 0.2s ease;
3722    width: fit-content;
3723  }
3724  .cd-btn:hover {
3725    transform: translateY(-1px);
3726    filter: brightness(0.95);
3727  }
3728  .cd-btn:focus-visible {
3729    outline: 3px solid rgba(0, 0, 0, 0.2);
3730    outline-offset: 2px;
3731  }
3732  .cd-btn-icon {
3733    width: 18px;
3734    height: 18px;
3735    transition: transform 0.2s ease;
3736  }
3737  .cd-btn:hover .cd-btn-icon {
3738    transform: translateX(4px);
3739  }
3740
3741  .cd-coltitle {
3742    margin-bottom: 0px;
3743    color: currentColor;
3744  }
3745  .cd-coltitle--aud {
3746    margin-top: 10px;
3747  }
3748  .cd-list {
3749    list-style: none;
3750    display: flex;
3751    flex-direction: column;
3752    gap: 6px;
3753    margin: 0 0 6px;
3754    padding: 0;
3755  }
3756  .cd-li {
3757    display: flex;
3758    gap: 8px;
3759    color: currentColor;
3760  }
3761  .cd-bullet {
3762    color: currentColor;
3763    margin-top: 2px;
3764  }
3765  .cd-aud {
3766    color: currentColor;
3767  }
3768
3769  .cd-logos {
3770    display: flex;
3771    flex-wrap: wrap;
3772    gap: 10px;
3773    margin-top: 10px;
3774    align-items: center;
3775  }
3776  .cd-logo {
3777    width: auto;
3778    height: 44px;
3779   /* border-radius: 9999px; */
3780    object-fit: cover;
3781  /*  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */
3782  /*  background: #fff;  */
3783  }
3784
3785  .cd-media {
3786    order: -1;
3787  }
3788
3789  /* Carousel Styles */
3790  .cd-carousel-container {
3791    position: relative;
3792    width: 100%;
3793  }
3794  .cd-carousel {
3795    position: relative;
3796    overflow: hidden;
3797    border-radius: 12px;
3798    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
3799    height: clamp(220px, 28vw, 340px);
3800  }
3801  .cd-carousel-track {
3802    display: flex;
3803    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
3804    height: 100%;
3805  }
3806  .cd-carousel-slide {
3807    min-width: 100%;
3808    flex-shrink: 0;
3809  }
3810  .cd-img {
3811    width: 100%;
3812    height: 100%;
3813    object-fit: cover;
3814    display: block;
3815  }
3816  .cd-img--placeholder {
3817    display: flex;
3818    align-items: center;
3819    justify-content: center;
3820    background: var(--icon-accent, #08c48a);
3821    background: linear-gradient(135deg, var(--icon-accent, #08c48a), color-mix(in srgb, var(--icon-accent, #08c48a) 65%, #000 10%));
3822    border-radius: 12px;
3823    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
3824    height: clamp(220px, 28vw, 340px);
3825  }
3826  .cd-placeholder-icon {
3827    display: inline-flex;
3828    align-items: center;
3829    justify-content: center;
3830    width: clamp(72px, 10vw, 112px);
3831    height: clamp(72px, 10vw, 112px);
3832    border-radius: 50%;
3833    background: rgba(255, 255, 255, 0.16);
3834    color: #fff;
3835  }
3836  .cd-placeholder-icon svg {
3837    width: 55%;
3838    height: 55%;
3839  }
3840
3841  @media (min-width: 1024px) {
3842    .cd-grid {
3843      grid-template-columns: 1fr 1fr 1fr;
3844      gap: clamp(18px, 3vw, 40px);
3845    }
3846    .cd-media {
3847      order: 0;
3848    }
3849  }
3850  .cd-carousel-slide {
3851  min-width: 100%;
3852  flex-shrink: 0;
3853  opacity: 0;
3854  transition: opacity 0.6s ease-in-out;
3855}
3856.cd-carousel-slide.active {
3857  opacity: 1;
3858}
3859</style>
3860<script>
3861(function() {
3862  function initCarousels() {
3863    const carousels = document.querySelectorAll('.cd-carousel');
3864    
3865    carousels.forEach(carousel => {
3866      const track = carousel.querySelector('.cd-carousel-track');
3867      const slides = carousel.querySelectorAll('.cd-carousel-slide');
3868      
3869      if (!track || slides.length <= 1) return;
3870      
3871      let currentIndex = 0;
3872      let autoplayInterval;
3873      const autoplayDelay = parseInt(carousel.dataset.interval) || 4000;
3874      
3875      if (slides.length > 0) {
3876        slides[0].classList.add('active');
3877      }
3878      
3879      function updateCarousel() {
3880        slides.forEach((slide, idx) => {
3881          slide.classList.toggle('active', idx === currentIndex);
3882        });
3883        track.style.transform = `translateX(-${currentIndex * 100}%)`;
3884      }
3885      
3886      function nextSlide() {
3887        currentIndex = (currentIndex + 1) % slides.length;
3888        updateCarousel();
3889      }
3890      
3891      function startAutoplay() {
3892        if (carousel.dataset.autoplay === 'true' && !document.hidden) {
3893          autoplayInterval = setInterval(nextSlide, autoplayDelay);
3894        }
3895      }
3896      
3897      function stopAutoplay() {
3898        clearInterval(autoplayInterval);
3899      }
3900      
3901      document.addEventListener('visibilitychange', () => {
3902        if (document.hidden) {
3903          stopAutoplay();
3904        } else {
3905          startAutoplay();
3906        }
3907      });
3908      
3909      startAutoplay();
3910    });
3911  }
3912  
3913  if (document.readyState === 'loading') {
3914    document.addEventListener('DOMContentLoaded', initCarousels);
3915  } else {
3916    initCarousels();
3917  }
3918})();
3919</script>
3919
3920<style> #shopify-section-template--18633345794095__section_showcase_single_ctUcKj /* @media (max-width: 1699px) {.cd-grid {grid-template-columns: 1fr 1fr; } .cd-col.cd-media {display: none; }}*/.cd-carousel-slide {width: 100%; flex-shrink: 0;} #shopify-section-template--18633345794095__section_showcase_single_ctUcKj .cd-img {width: 100%; height: auto; display: block;} #shopify-section-template--18633345794095__section_showcase_single_ctUcKj # {margin-top: 60px;} </style></section><section id="shopify-section-template--18633345794095__section_showcase_single_RthpNJ" class="shopify-section section">
3921
3922<section class="cd-services" style="--page-bg: #ffffff;">
3923  <div class="cd-container page-width">
3924    
3925    
3926  </div>
3927
3928  <div
3929    class="cd-service"
3930    style="--row-bg: #f1f7ff; --row-text: #0f172a;"
3931  >
3932      <div class="cd-grid">
3933        <!-- Col 1: Title, summary, button -->
3934        <div class="cd-col">
3935          <div class="cd-titlewrap">
3936            <h3 class="cd-title">Email marketing that brings customers back</h3>
3937          </div>
3938
3939          
3940            <p class="cd-summary">Responsive campaigns and landing pages that reach your audience, build loyalty, and drive repeat sales.</p>
3941          
3942
3943          
3944            <a
3945              class="cd-btn"
3946              style="--btn-bg: #0f172a;"
3947              href="https://calendly.com/frontendengineer/30-minutes-meeting"
3948            >
3949              Boost My Opens
3950              <svg
3951                class="cd-btn-icon"
3952                viewBox="0 0 24 24"
3953                fill="none"
3954                stroke="currentColor"
3955                stroke-width="2"
3956                aria-hidden="true"
3957              >
3958                <path d="m9 18 6-6-6-6"/>
3959              </svg>
3960            </a>
3961          
3962        </div>
3963
3964        <!-- Col 2: Features & Audience -->
3965        <div class="cd-col">
3966          
3967            <h4 class="cd-coltitle">Key Features</h4>
3968          
3969          
3970            <div class="cd-list rte"><ul><li>Story-Driven Copy<br/></li><li>Smart Automation<br/></li><li>A/B Tested</li></ul></div>
3971          
3972
3973          
3974            <h4 class="cd-coltitle cd-coltitle--aud">Target Audience</h4>
3975          
3976          
3977            <p class="cd-aud">Online retailers, brands, startups</p>
3978          
3979
3980          
3981          
3982            <div class="cd-logos">
3983              
3984                
3985                  <img src="//codendesigner.com/cdn/shop/files/1_3c75492f-7ad3-4bb8-8da3-ac127f186efe.png?v=1788154112&amp;width=160" alt="" srcset="//codendesigner.com/cdn/shop/files/1_3c75492f-7ad3-4bb8-8da3-ac127f186efe.png?v=1788154112&amp;width=160 160w" width="160" height="160" loading="lazy" class="cd-logo">
3986                
3987              
3988                
3989                  <img src="//codendesigner.com/cdn/shop/files/Campaign_Monitor.png?v=1788154111&amp;width=160" alt="" srcset="//codendesigner.com/cdn/shop/files/Campaign_Monitor.png?v=1788154111&amp;width=160 160w" width="160" height="83" loading="lazy" class="cd-logo">
3990                
3991              
3992                
3993                  <img src="//codendesigner.com/cdn/shop/files/2_0700b44a-bde4-481c-9aa9-116d2f181029.png?v=1788154111&amp;width=160" alt="" srcset="//codendesigner.com/cdn/shop/files/2_0700b44a-bde4-481c-9aa9-116d2f181029.png?v=1788154111&amp;width=160 160w" width="160" height="160" loading="lazy" class="cd-logo">
3994                
3995              
3996            </div>
3997          
3998        </div>
3999
4000        <!-- Col 3: Media — each "image" block can be an uploaded image OR an icon.
4001             1 media item = shown static (no carousel). 2+ = carousel. 0 = section-level icon placeholder. -->
4002        <div class="cd-col cd-media">
4003          
4004          
4005          
4006          
4007
4008          
4009            
4010              <img src="//codendesigner.com/cdn/shop/files/email-2.png?v=1789647215&amp;width=1600" alt="Service preview" srcset="//codendesigner.com/cdn/shop/files/email-2.png?v=1789647215&amp;width=480 480w, //codendesigner.com/cdn/shop/files/email-2.png?v=1789647215&amp;width=720 720w, //codendesigner.com/cdn/shop/files/email-2.png?v=1789647215&amp;width=960 960w, //codendesigner.com/cdn/shop/files/email-2.png?v=1789647215&amp;width=1200 1200w, //codendesigner.com/cdn/shop/files/email-2.png?v=1789647215&amp;width=1600 1600w" width="1600" height="1200" loading="lazy" class="cd-img" sizes="(min-width: 1024px) 33vw, 100vw">
4011            
4012
4013          
4014        </div>
4015      </div>
4016  </div>
4017</section>
4018
4019<style>
4020  .cd-services {
4021    background: var(--page-bg, #fff);
4022    color: #0f172a;
4023  }
4024  .cd-container {
4025    text-align: center;
4026  }
4027  .cd-heading {
4028    font-weight: 800;
4029    line-height: 1.1;
4030    margin: 0 0 10px;
4031  }
4032  .cd-subheading {
4033    color: #475569;
4034    margin: 0 0 28px;
4035  }
4036
4037  .cd-service {
4038    background: var(--row-bg, #f7fafc);
4039    color: var(--row-text, #0f172a);
4040    padding: clamp(24px, 4vw, 48px);
4041    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
4042  }
4043  .cd-grid {
4044    display: grid;
4045    grid-template-columns: 1fr;
4046    gap: clamp(16px, 3vw, 32px);
4047    align-items: center;
4048    max-width: 1600px;
4049    margin: 0 auto;
4050  }
4051  .cd-col {
4052    display: flex;
4053    flex-direction: column;
4054    gap: 12px;
4055  }
4056
4057  .cd-titlewrap {
4058    margin-bottom: 6px;
4059  }
4060  .cd-title {
4061    margin: 0;
4062    color: currentColor;
4063  }
4064  .cd-summary {
4065    color: currentColor;
4066  }
4067
4068  .cd-btn {
4069    --_bg: var(--btn-bg, #111827);
4070    display: inline-flex;
4071    align-items: center;
4072    gap: 8px;
4073    background: var(--_bg);
4074    color: #fff;
4075    text-decoration: none;
4076    padding: 10px 18px;
4077    border-radius: 8px;
4078    font-weight: 700;
4079    transition: transform 0.2s ease, filter 0.2s ease;
4080    width: fit-content;
4081  }
4082  .cd-btn:hover {
4083    transform: translateY(-1px);
4084    filter: brightness(0.95);
4085  }
4086  .cd-btn:focus-visible {
4087    outline: 3px solid rgba(0, 0, 0, 0.2);
4088    outline-offset: 2px;
4089  }
4090  .cd-btn-icon {
4091    width: 18px;
4092    height: 18px;
4093    transition: transform 0.2s ease;
4094  }
4095  .cd-btn:hover .cd-btn-icon {
4096    transform: translateX(4px);
4097  }
4098
4099  .cd-coltitle {
4100    margin-bottom: 0px;
4101    color: currentColor;
4102  }
4103  .cd-coltitle--aud {
4104    margin-top: 10px;
4105  }
4106  .cd-list {
4107    list-style: none;
4108    display: flex;
4109    flex-direction: column;
4110    gap: 6px;
4111    margin: 0 0 6px;
4112    padding: 0;
4113  }
4114  .cd-li {
4115    display: flex;
4116    gap: 8px;
4117    color: currentColor;
4118  }
4119  .cd-bullet {
4120    color: currentColor;
4121    margin-top: 2px;
4122  }
4123  .cd-aud {
4124    color: currentColor;
4125  }
4126
4127  .cd-logos {
4128    display: flex;
4129    flex-wrap: wrap;
4130    gap: 10px;
4131    margin-top: 10px;
4132    align-items: center;
4133  }
4134  .cd-logo {
4135    width: auto;
4136    height: 44px;
4137   /* border-radius: 9999px; */
4138    object-fit: cover;
4139  /*  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */
4140  /*  background: #fff;  */
4141  }
4142
4143  .cd-media {
4144    order: -1;
4145  }
4146
4147  /* Carousel Styles */
4148  .cd-carousel-container {
4149    position: relative;
4150    width: 100%;
4151  }
4152  .cd-carousel {
4153    position: relative;
4154    overflow: hidden;
4155    border-radius: 12px;
4156    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
4157    height: clamp(220px, 28vw, 340px);
4158  }
4159  .cd-carousel-track {
4160    display: flex;
4161    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
4162    height: 100%;
4163  }
4164  .cd-carousel-slide {
4165    min-width: 100%;
4166    flex-shrink: 0;
4167  }
4168  .cd-img {
4169    width: 100%;
4170    height: 100%;
4171    object-fit: cover;
4172    display: block;
4173  }
4174  .cd-img--placeholder {
4175    display: flex;
4176    align-items: center;
4177    justify-content: center;
4178    background: var(--icon-accent, #08c48a);
4179    background: linear-gradient(135deg, var(--icon-accent, #08c48a), color-mix(in srgb, var(--icon-accent, #08c48a) 65%, #000 10%));
4180    border-radius: 12px;
4181    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
4182    height: clamp(220px, 28vw, 340px);
4183  }
4184  .cd-placeholder-icon {
4185    display: inline-flex;
4186    align-items: center;
4187    justify-content: center;
4188    width: clamp(72px, 10vw, 112px);
4189    height: clamp(72px, 10vw, 112px);
4190    border-radius: 50%;
4191    background: rgba(255, 255, 255, 0.16);
4192    color: #fff;
4193  }
4194  .cd-placeholder-icon svg {
4195    width: 55%;
4196    height: 55%;
4197  }
4198
4199  @media (min-width: 1024px) {
4200    .cd-grid {
4201      grid-template-columns: 1fr 1fr 1fr;
4202      gap: clamp(18px, 3vw, 40px);
4203    }
4204    .cd-media {
4205      order: 0;
4206    }
4207  }
4208  .cd-carousel-slide {
4209  min-width: 100%;
4210  flex-shrink: 0;
4211  opacity: 0;
4212  transition: opacity 0.6s ease-in-out;
4213}
4214.cd-carousel-slide.active {
4215  opacity: 1;
4216}
4217</style>
4218<script>
4219(function() {
4220  function initCarousels() {
4221    const carousels = document.querySelectorAll('.cd-carousel');
4222    
4223    carousels.forEach(carousel => {
4224      const track = carousel.querySelector('.cd-carousel-track');
4225      const slides = carousel.querySelectorAll('.cd-carousel-slide');
4226      
4227      if (!track || slides.length <= 1) return;
4228      
4229      let currentIndex = 0;
4230      let autoplayInterval;
4231      const autoplayDelay = parseInt(carousel.dataset.interval) || 4000;
4232      
4233      if (slides.length > 0) {
4234        slides[0].classList.add('active');
4235      }
4236      
4237      function updateCarousel() {
4238        slides.forEach((slide, idx) => {
4239          slide.classList.toggle('active', idx === currentIndex);
4240        });
4241        track.style.transform = `translateX(-${currentIndex * 100}%)`;
4242      }
4243      
4244      function nextSlide() {
4245        currentIndex = (currentIndex + 1) % slides.length;
4246        updateCarousel();
4247      }
4248      
4249      function startAutoplay() {
4250        if (carousel.dataset.autoplay === 'true' && !document.hidden) {
4251          autoplayInterval = setInterval(nextSlide, autoplayDelay);
4252        }
4253      }
4254      
4255      function stopAutoplay() {
4256        clearInterval(autoplayInterval);
4257      }
4258      
4259      document.addEventListener('visibilitychange', () => {
4260        if (document.hidden) {
4261          stopAutoplay();
4262        } else {
4263          startAutoplay();
4264        }
4265      });
4266      
4267      startAutoplay();
4268    });
4269  }
4270  
4271  if (document.readyState === 'loading') {
4272    document.addEventListener('DOMContentLoaded', initCarousels);
4273  } else {
4274    initCarousels();
4275  }
4276})();
4277</script>
4277
4278</section><section id="shopify-section-template--18633345794095__testimonial_1_H7JkN6" class="shopify-section testimonials-section"><style>
4279  /* Section Container Styles */
4280  .testimonials-section {
4281    padding: 80px 0;
4282    background-color: var(--bg-color, #ffffff);
4283    width: 100%;
4284    position: relative;
4285  }
4286  
4287  .section-container {
4288    max-width: 100%;
4289    margin: 0 auto;
4290    padding: 0 20px;
4291  }
4292  
4293  /* Section Header Styles */
4294  .section-header {
4295    text-align: center;
4296    margin-bottom: 60px;
4297    max-width: 700px;
4298    margin-left: auto;
4299    margin-right: auto;
4300  }
4301  
4302  .section-title-tag {
4303    display: inline-block;
4304    padding: 5px 16px;
4305    border-radius: 4px;
4306    font-size: 14px;
4307    margin-bottom: 16px;
4308    font-weight: 500;
4309    background-color: rgba(0, 0, 0, 0.05);
4310  }
4311  
4312  .section-title {
4313    font-size: 36px;
4314    font-weight: 700;
4315    margin-bottom: 16px;
4316    line-height: 1.2;
4317  }
4318  
4319  .section-subtitle {
4320    font-size: 16px;
4321    opacity: 0.75;
4322    line-height: 1.6;
4323  }
4324  
4325  /* Testimonials Container */
4326  .testimonials-wrapper {
4327    position: relative;
4328    height: 600px;
4329    overflow: hidden;
4330    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
4331    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
4332    padding: 0 5%; /* Increased padding to prevent cut-off */
4333  }
4334  
4335  /* Grid Layout */
4336  .testimonials-grid {
4337    display: grid;
4338    grid-template-columns: repeat(1, 1fr);
4339    gap: 24px;
4340    position: relative;
4341    padding: 12px 0;
4342    width: calc(100% - 10px); /* Ensure grid doesn't overflow container */
4343  }
4344  
4345  /* Responsive Grid Adjustments */
4346  @media (min-width: 768px) {
4347    .testimonials-grid {
4348      grid-template-columns: repeat(2, 1fr);
4349    }
4350    
4351    .section-title {
4352      font-size: 42px;
4353    }
4354    
4355    /* Handle double-width cards properly */
4356    .testimonial-card.double-width {
4357      grid-column: span 2;
4358    }
4359    
4360    /* Hover effects only on desktop */
4361    .testimonial-card:hover {
4362      transform: translateY(-5px);
4363      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
4364    }
4365    
4366    /* Animation play state control only on desktop */
4367    .scrolling-testimonials:hover {
4368      animation-play-state: paused;
4369    }
4370  }
4371  
4372  @media (min-width: 1024px) {
4373    .testimonials-grid {
4374      grid-template-columns: repeat(var(--column-count, 3), 1fr);
4375    }
4376    
4377    .section-title {
4378      font-size: 48px;
4379    }
4380    
4381    /* Handle double-width cards properly in 3-column layout */
4382    .testimonial-card.double-width {
4383      grid-column: span 2;
4384    }
4385  }
4386  
4387  /* Mobile Adjustments */
4388  @media (max-width: 767px) {
4389    .testimonial-card.double-width {
4390      grid-column: span 1;
4391    }
4392    
4393    .testimonials-wrapper {
4394      height: 550px;
4395      padding: 0 10px;
4396    }
4397    
4398    .testimonials-grid {
4399      width: 100%;
4400      padding: 12px 0;
4401    }
4402    
4403    .section-header {
4404      margin-bottom: 40px;
4405    }
4406    
4407    /* Slightly smaller card padding on mobile */
4408    .testimonial-card {
4409      padding: 25px 20px;
4410    }
4411    
4412    /* Slower scroll for mobile */
4413    .scrolling-testimonials {
4414      animation-duration: 35s !important;
4415    }
4416  }
4417  
4418  /* Testimonial Card Styling */
4419  .testimonial-card {
4420    background-color: #ffffff;
4421    border-radius: 12px;
4422    padding: 30px;
4423    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
4424    border: 1px solid rgba(0, 0, 0, 0.05);
4425    display: flex;
4426    flex-direction: column;
4427    height: 100%;
4428    position: relative;
4429    transition: transform 0.3s ease, box-shadow 0.3s ease;
4430    margin: 3px;
4431    width: auto; /* Auto width to fit container */
4432    max-width: 100%; /* Ensure it doesn't overflow */
4433    box-sizing: border-box; /* Include padding in width calculation */
4434    overflow-wrap: break-word; /* Important for text wrapping */
4435    word-wrap: break-word; /* Legacy support */
4436    -ms-word-break: break-all; /* For IE */
4437    word-break: break-word; /* Modern browsers */
4438  }
4439  
4440  /* Card border accent */
4441  .testimonial-card::before {
4442    content: "";
4443    position: absolute;
4444    top: 0;
4445    left: 0;
4446    width: 100%;
4447    height: 4px;
4448    background: linear-gradient(to right, var(--accent-start, #4facfe), var(--accent-end, #00f2fe));
4449    border-radius: 12px 12px 0 0;
4450    opacity: 0.8;
4451  }
4452  
4453  /* Left quotation mark - subtle and barely visible */
4454  .quote-mark-left {
4455    position: absolute;
4456    top: 15px;
4457    left: 15px;
4458    font-size: 32px;
4459    font-family: serif;
4460    color: var(--accent-start, #4facfe);
4461    opacity: 0.5;
4462    z-index: 0;
4463    line-height: 1;
4464  }
4465  
4466  /* Card accent color variations */
4467  .testimonial-card:nth-child(4n-3) {
4468    --accent-start: #4facfe;
4469    --accent-end: #00f2fe;
4470  }
4471  
4472  .testimonial-card:nth-child(4n-2) {
4473    --accent-start: #43e97b;
4474    --accent-end: #38f9d7;
4475  }
4476  
4477  .testimonial-card:nth-child(4n-1) {
4478    --accent-start: #fa709a;
4479    --accent-end: #fee140;
4480  }
4481  
4482  .testimonial-card:nth-child(4n) {
4483    --accent-start: #6a11cb;
4484    --accent-end: #2575fc;
4485  }
4486  
4487  /* Testimonial Content */
4488  .testimonial-text {
4489    font-size: 16px;
4490    line-height: 1.7;
4491    margin-bottom: 10px;
4492    flex-grow: 1;
4493    overflow-wrap: break-word;
4494    word-wrap: break-word;
4495    word-break: break-word;
4496    hyphens: auto;
4497    position: relative;
4498    z-index: 1;
4499  }
4500  
4501  /* Star Rating */
4502  .star-rating {
4503    display: flex;
4504    margin-bottom: 15px;
4505    gap: 4px;
4506  }
4507  
4508  .star {
4509    color: #FFD700;
4510    font-size: 14px;
4511  }
4512  
4513  .star-empty {
4514    color: #e0e0e0;
4515  }
4516  
4517  /* Quotation mark */
4518  .testimonial-card::after {
4519    content: """;
4520    position: absolute;
4521    top: 10px;
4522    right: 20px;
4523    font-size: 100px;
4524    line-height: 1;
4525    font-family: serif;
4526    opacity: 0.08;
4527    color: var(--accent-start, #4facfe);
4528    pointer-events: none;
4529  }
4530  
4531  /* Author Information */
4532  .testimonial-author {
4533    display: flex;
4534    align-items: center;
4535    margin-top: auto;
4536    position: relative;
4537    z-index: 1;
4538    padding-top: 10px;
4539    border-top: 1px solid rgba(0, 0, 0, 0.05);
4540  }
4541  
4542  .author-image {
4543    width: 48px;
4544    height: 48px;
4545    border-radius: 50%;
4546    overflow: hidden;
4547    margin-right: 14px;
4548    flex-shrink: 0;
4549    border: 2px solid #f5f5f5;
4550    background-color: #f9f9f9;
4551    position: relative;
4552  }
4553  
4554  /* Initial letter avatar */
4555  .author-initial {
4556    width: 100%;
4557    height: 100%;
4558    display: flex;
4559    align-items: center;
4560    justify-content: center;
4561    background: linear-gradient(45deg, var(--accent-start), var(--accent-end));
4562    color: white;
4563    font-weight: 700;
4564    font-size: 20px;
4565    text-transform: uppercase;
4566  }
4567  
4568  .author-image img {
4569    width: 100%;
4570    height: 100%;
4571    object-fit: cover;
4572  }
4573  
4574  .author-info {
4575    flex-grow: 1;
4576    min-width: 0; /* Prevent text overflow */
4577  }
4578  
4579  .author-name {
4580    font-weight: 600;
4581    font-size: 15px;
4582    line-height: 1.4;
4583    white-space: normal; /* Allow wrapping */
4584    overflow-wrap: break-word;
4585  }
4586  
4587  .author-role {
4588    font-size: 13px;
4589    opacity: 0.6;
4590    line-height: 1.4;
4591    margin-top: 2px;
4592    white-space: normal; /* Allow wrapping */
4593    overflow-wrap: break-word;
4594  }
4595  
4596  /* Animation Styles */
4597  @keyframes scrollTestimonials {
4598    0% {
4599      transform: translateY(0);
4600    }
4601    100% {
4602      transform: translateY(-50%);
4603    }
4604  }
4605  
4606  .scrolling-testimonials {
4607    animation: scrollTestimonials var(--scroll-duration, 30s) linear infinite;
4608    will-change: transform;
4609    padding: 1px 0;
4610  }
4611  
4612  /* Ensure proper spacing between grid duplicates */
4613  .duplicate-grid {
4614    margin-top: 24px;
4615  }
4616</style>
4617
4618<section class="testimonials-section" style="--bg-color: #ffffff;">
4619  <div class="section-container">
4620    
4621      <div class="section-header">
4622        
4623          <div class="section-title-tag">Testimonials</div>
4624        
4625        
4626        
4627          <h2 class="section-title">Our Clients Love Us</h2>
4628        
4629        
4630        
4631          <div class="section-subtitle">See what our customers have to say about us.</div>
4632        
4633      </div>
4634    
4635    
4636    <div class="testimonials-wrapper">
4637      <div class="scrolling-testimonials" style="--scroll-duration: 60s;">
4638        <div class="testimonials-grid" style="--column-count: 3;">
4639          
4640            
4641              <div class="testimonial-card double-width" >
4642                <div class="quote-mark-left">"</div>
4643                <div class="testimonial-text">Over the past 6 years Mahmudul has never disappointed in either the timing
4644or the quality of the work being delivered. Mahmudul is highly proficient in all aspects of design,
4645website development, email newsletters, landing pages and Shopify. He is very reliable and
4646hard-working. No job is too hard, too small or too big with problem solving being one of Mahmudul's
4647strengths.
4648
4649I have presented him with many challenges for projects that required an exceptional level of
4650high-resolution layouts. Mahmudul excelled every time. He has proven himself to be patient in
4651helping me structure my articles, my social media posts and even my marketing plan. To that end, his
4652communication skills are excellent.</div>
4653                
4654                <!-- Star Rating -->
4655                
4656                <div class="star-rating">
4657                  
4658                  
4659                    
4660                      <span class="star">★</span>
4661                    
4662                  
4663                    
4664                      <span class="star">★</span>
4665                    
4666                  
4667                    
4668                      <span class="star">★</span>
4669                    
4670                  
4671                    
4672                      <span class="star">★</span>
4673                    
4674                  
4675                    
4676                      <span class="star">★</span>
4677                    
4678                  
4679                </div>
4680                
4681                
4682                <div class="testimonial-author">
4683                  <div class="author-image">
4684                    
4685                      <img src="//codendesigner.com/cdn/shop/files/Judi_Nash_avater_100x100_crop_center.jpg?v=1746946473" alt="Judi Nash">
4686                    
4687                  </div>
4688                  <div class="author-info">
4689                    <div class="author-name">Judi Nash</div>
4690                    <div class="author-role">When Time Means Nothing - Author</div>
4691                  </div>
4692                </div>
4693              </div>
4694            
4695          
4696            
4697              <div class="testimonial-card " >
4698                <div class="quote-mark-left">"</div>
4699                <div class="testimonial-text">I have used Codendesigner for adhoc CSS support, to troubleshoot web integrations and support with the development of websites and landing pages. They always provide high quality services, delivered professionally. Most importantly to my business, they are responsive to our needs.</div>
4700                
4701                <!-- Star Rating -->
4702                
4703                <div class="star-rating">
4704                  
4705                  
4706                    
4707                      <span class="star">★</span>
4708                    
4709                  
4710                    
4711                      <span class="star">★</span>
4712                    
4713                  
4714                    
4715                      <span class="star">★</span>
4716                    
4717                  
4718                    
4719                      <span class="star">★</span>
4720                    
4721                  
4722                    
4723                      <span class="star">★</span>
4724                    
4725                  
4726                </div>
4727                
4728                
4729                <div class="testimonial-author">
4730                  <div class="author-image">
4731                    
4732                      <img src="//codendesigner.com/cdn/shop/files/2.Jenni_Walke_100x100_crop_center.jpg?v=1747289617" alt="Jenni Walke">
4733                    
4734                  </div>
4735                  <div class="author-info">
4736                    <div class="author-name">Jenni Walke</div>
4737                    <div class="author-role">Founder, Principal Consultant -Elephant in the Room Consulting</div>
4738                  </div>
4739                </div>
4740              </div>
4741            
4742          
4743            
4744              <div class="testimonial-card " >
4745                <div class="quote-mark-left">"</div>
4746                <div class="testimonial-text">Codendesigner has always been very responsive and attentive to our requests. It was a real pleasure to work use their services. I recommend!</div>
4747                
4748                <!-- Star Rating -->
4749                
4750                <div class="star-rating">
4751                  
4752                  
4753                    
4754                      <span class="star">★</span>
4755                    
4756                  
4757                    
4758                      <span class="star">★</span>
4759                    
4760                  
4761                    
4762                      <span class="star">★</span>
4763                    
4764                  
4765                    
4766                      <span class="star">★</span>
4767                    
4768                  
4769                    
4770                      <span class="star">★</span>
4771                    
4772                  
4773                </div>
4774                
4775                
4776                <div class="testimonial-author">
4777                  <div class="author-image">
4778                    
4779                      <img src="//codendesigner.com/cdn/shop/files/3.Bilal_Afkir_100x100_crop_center.png?v=1747290080" alt="Bilal Afkir">
4780                    
4781                  </div>
4782                  <div class="author-info">
4783                    <div class="author-name">Bilal Afkir</div>
4784                    <div class="author-role">
4784Senior Software Engineer @ Genymobile</div>
4785                  </div>
4786                </div>
4787              </div>
4788            
4789          
4790            
4791              <div class="testimonial-card " >
4792                <div class="quote-mark-left">"</div>
4793                <div class="testimonial-text">I have done plenty of projects with Mahmudul and he is great to work with. Reliable, professional and always walks an extra mile. I highly recommend his services for anything to do with website.</div>
4794                
4795                <!-- Star Rating -->
4796                
4797                <div class="star-rating">
4798                  
4799                  
4800                    
4801                      <span class="star">★</span>
4802                    
4803                  
4804                    
4805                      <span class="star">★</span>
4806                    
4807                  
4808                    
4809                      <span class="star">★</span>
4810                    
4811                  
4812                    
4813                      <span class="star">★</span>
4814                    
4815                  
4816                    
4817                      <span class="star">★</span>
4818                    
4819                  
4820                </div>
4821                
4822                
4823                <div class="testimonial-author">
4824                  <div class="author-image">
4825                    
4826                      <img src="//codendesigner.com/cdn/shop/files/4.Hetas_Pandya_100x100_crop_center.jpg?v=1747290472" alt="Hetas Pandya">
4827                    
4828                  </div>
4829                  <div class="author-info">
4830                    <div class="author-name">Hetas Pandya</div>
4831                    <div class="author-role">Co-Owner Brisbane Business Centre</div>
4832                  </div>
4833                </div>
4834              </div>
4835            
4836          
4837            
4838              <div class="testimonial-card " >
4839                <div class="quote-mark-left">"</div>
4840                <div class="testimonial-text">I have been a client for 4+ years and have never been disappointed. I have given hundreds of tasks with all being delivered with above exceptional quality and in decent time. Codendesigner team is one of the best I have worked with and will continue to do so and 10/10 recommend to anyone else.</div>
4841                
4842                <!-- Star Rating -->
4843                
4844                <div class="star-rating">
4845                  
4846                  
4847                    
4848                      <span class="star">★</span>
4849                    
4850                  
4851                    
4852                      <span class="star">★</span>
4853                    
4854                  
4855                    
4856                      <span class="star">★</span>
4857                    
4858                  
4859                    
4860                      <span class="star">★</span>
4861                    
4862                  
4863                    
4864                      <span class="star">★</span>
4865                    
4866                  
4867                </div>
4868                
4869                
4870                <div class="testimonial-author">
4871                  <div class="author-image">
4872                    
4873                      <img src="//codendesigner.com/cdn/shop/files/5.T_Rainson_100x100_crop_center.png?v=1747291462" alt="T Rainson">
4874                    
4875                  </div>
4876                  <div class="author-info">
4877                    <div class="author-name">T Rainson</div>
4878                    <div class="author-role">Role/Position</div>
4879                  </div>
4880                </div>
4881              </div>
4882            
4883          
4884            
4885              <div class="testimonial-card " >
4886                <div class="quote-mark-left">"</div>
4887                <div class="testimonial-text">Very Good Service and Trustable Company.</div>
4888                
4889                <!-- Star Rating -->
4890                
4891                <div class="star-rating">
4892                  
4893                  
4894                    
4895                      <span class="star">★</span>
4896                    
4897                  
4898                    
4899                      <span class="star">★</span>
4900                    
4901                  
4902                    
4903                      <span class="star">★</span>
4904                    
4905                  
4906                    
4907                      <span class="star">★</span>
4908                    
4909                  
4910                    
4911                      <span class="star">★</span>
4912                    
4913                  
4914                </div>
4915                
4916                
4917                <div class="testimonial-author">
4918                  <div class="author-image">
4919                    
4920                      <img src="//codendesigner.com/cdn/shop/files/6.Osman_Hayat_100x100_crop_center.jpg?v=1747291454" alt="Osman Hayat">
4921                    
4922                  </div>
4923                  <div class="author-info">
4924                    <div class="author-name">Osman Hayat</div>
4925                    <div class="author-role">Graphic Designer & Calligraphy Artist</div>
4926                  </div>
4927                </div>
4928              </div>
4929            
4930          
4931            
4932              <div class="testimonial-card double-width" >
4933                <div class="quote-mark-left">"</div>
4934                <div class="testimonial-text">I was very pleased with the web design job accomplished by Mahmud and his team at Codendesigner this month. From the beginning of the project, I felt like I was working with professionals, with regular updates, communication and progress shared. Once the transition was completed, the work did not stop as UX features were tested and revised. They certainly went the extra mile to make sure all my needs were exceeded! Net result: Project delivered to my standard, on time and to budget.</div>
4935                
4936                <!-- Star Rating -->
4937                
4938                
4939                <div class="testimonial-author">
4940                  <div class="author-image">
4941                    
4942                      <img src="//codendesigner.com/cdn/shop/files/7.Paul_Kanwar_100x100_crop_center.jpg?v=1747291805" alt="Paul Kanwar">
4943                    
4944                  </div>
4945                  <div class="author-info">
4946                    <div class="author-name">Paul Kanwar</div>
4947                    <div class="author-role">COO & Co-Founder Asian Sustainability Network</div>
4948                  </div>
4949                </div>
4950              </div>
4951            
4952          
4953            
4954              <div class="testimonial-card " >
4955                <div class="quote-mark-left">"</div>
4956                <div class="testimonial-text">I have used Codeendesigner for my new website. Their work is simple and fast. Satisfied with their services and response time.</div>
4957                
4958                <!-- Star Rating -->
4959                
4960                <div class="star-rating">
4961                  
4962                  
4963                    
4964                      <span class="star">★</span>
4965                    
4966                  
4967                    
4968                      <span class="star">★</span>
4969                    
4970                  
4971                    
4972                      <span class="star">★</span>
4973                    
4974                  
4975                    
4976                      <span class="star">★</span>
4977                    
4978                  
4979                    
4980                      <span class="star">★</span>
4981                    
4982                  
4983                </div>
4984                
4985                
4986                <div class="testimonial-author">
4987                  <div class="author-image">
4988                    
4989                      <img src="//codendesigner.com/cdn/shop/files/8.Hari_Thiruvanam_100x100_crop_center.webp?v=1747292415" alt="Harikrishnan Thiruvanam">
4990                    
4991                  </div>
4992                  <div class="author-info">
4993                    <div class="author-name">Harikrishnan Thiruvanam</div>
4994                    <div class="author-role">Managing Director - AvetsA.education</div>
4995                  </div>
4996                </div>
4997              </div>
4998            
4999          
5000            
5001              <div class="testimonial-card " >
5002                <div class="quote-mark-left">"</div>
5003                <div class="testimonial-text">A great experience working with Mahdi. He's incredibly patient, very thorough, and at a very reasonable cost. We've worked with him on several projects, and will continue doing so in the future.</div>
5004                
5005                <!-- Star Rating -->
5006                
5007                <div class="star-rating">
5008                  
5009                  
5010                    
5011                      <span class="star">★</span>
5012                    
5013                  
5014                    
5015                      <span class="star">★</span>
5016                    
5017                  
5018                    
5019                      <span class="star">★</span>
5020                    
5021                  
5022                    
5023                      <span class="star">★</span>
5024                    
5025                  
5026                    
5027                      <span class="star">★</span>
5028                    
5029                  
5030                </div>
5031                
5032                
5033                <div class="testimonial-author">
5034                  <div class="author-image">
5035                    
5036                      <div class="author-initial">T</div>
5037                    
5038                  </div>
5039                  <div class="author-info">
5040                    <div class="author-name">Troy</div>
5041                    <div class="author-role">US Client</div>
5042                  </div>
5043                </div>
5044              </div>
5045            
5046          
5047            
5048              <div class="testimonial-card " >
5049                <div class="quote-mark-left">"</div>
5050                <div class="testimonial-text">I recently engaged Mahmudul for development assistance with a website and was immediately impressed with his responsiveness and skill. I'll certainly be reaching out to Mahmudul again for future projects.</div>
5051                
5052                <!-- Star Rating -->
5053                
5054                <div class="star-rating">
5055                  
5056                  
5057                    
5058                      <span class="star">★</span>
5059                    
5060                  
5061                    
5062                      <span class="star">★</span>
5063                    
5064                  
5065                    
5066                      <span class="star">★</span>
5067                    
5068                  
5069                    
5070                      <span class="star">★</span>
5071                    
5072                  
5073                    
5074                      <span class="star">★</span>
5075                    
5076                  
5077                </div>
5078                
5079                
5080                <div class="testimonial-author">
5081                  <div class="author-image">
5082                    
5083                      <img src="//codendesigner.com/cdn/shop/files/10._Sheridan_Murphy_100x100_crop_center.jpg?v=1747293808" alt="Sheridan Murphy">
5084                    
5085                  </div>
5086                  <div class="author-info">
5087                    <div class="author-name">Sheridan Murphy</div>
5088                    <div class="author-role">Marketing Consultant </div>
5089                  </div>
5090                </div>
5091              </div>
5092            
5093          
5094            
5095              <div class="testimonial-card " >
5096                <div class="quote-mark-left">"</div>
5097                <div class="testimonial-text">I have worked with Mahmudul for a few different projects in last 3-4 years and I highly recommend his expertise. He is reliable and flexible. He is prompt in responses.</div>
5098                
5099                <!-- Star Rating -->
5100                
5101                <div class="star-rating">
5102                  
5103                  
5104                    
5105                      <span class="star">★</span>
5106                    
5107                  
5108                    
5109                      <span class="star">★</span>
5110                    
5111                  
5112                    
5113                      <span class="star">★</span>
5114                    
5115                  
5116                    
5117                      <span class="star">★</span>
5118                    
5119                  
5120                    
5121                      <span class="star">★</span>
5122                    
5123                  
5124                </div>
5125                
5126                
5127                <div class="testimonial-author">
5128                  <div class="author-image">
5129                    
5130                      <div class="author-initial">H</div>
5131                    
5132                  </div>
5133                  <div class="author-info">
5134                    <div class="author-name">Hetas Pandya</div>
5135                    <div class="author-role">Startup CEO</div>
5136                  </div>
5137                </div>
5138              </div>
5139            
5140          
5141            
5142              <div class="testimonial-card " >
5143                <div class="quote-mark-left">"</div>
5144                <div class="testimonial-text">Mahdi has worked with us for three years on various client projects. He is super talented at solving whatever challenge we throw at him. He works hard and completes projects to a high degree of quality, on time and on budget. His style is friendly and easy going. I highly recommend him.</div>
5145                
5146                <!-- Star Rating -->
5147                
5148                <div class="star-rating">
5149                  
5150                  
5151                    
5152                      <span class="star">★</span>
5153                    
5154                  
5155                    
5156                      <span class="star">★</span>
5157                    
5158                  
5159                    
5160                      <span class="star">★</span>
5161                    
5162                  
5163                    
5164                      <span class="star">★</span>
5165                    
5166                  
5167                    
5168                      <span class="star">★</span>
5169                    
5170                  
5171                </div>
5172                
5173                
5174                <div class="testimonial-author">
5175                  <div class="author-image">
5176                    
5177                      <img src="//codendesigner.com/cdn/shop/files/11.Carl_Riley_100x100_crop_center.jpg?v=1747294132" alt="Carl Riley">
5178                    
5179                  </div>
5180                  <div class="author-info">
5181                    <div class="author-name">Carl Riley</div>
5182                    <div class="author-role">Founder & Strategy Director, The Riley Group</div>
5183                  </div>
5184                </div>
5185              </div>
5186            
5187          
5188            
5189              <div class="testimonial-card " >
5190                <div class="quote-mark-left">"</div>
5191                <div class="testimonial-text">I know Mehedi from our college life and he really develop few web based solution for e-store, custom and easily manageable web app for his customers across the globe. All the best and keep doing such great things.</div>
5192                
5193                <!-- Star Rating -->
5194                
5195                <div class="star-rating">
5196                  
5197                  
5198                    
5199                      <span class="star">★</span>
5200                    
5201                  
5202                    
5203                      <span class="star">★</span>
5204                    
5205                  
5206                    
5207                      <span class="star">★</span>
5208                    
5209                  
5210                    
5211                      <span class="star">★</span>
5212                    
5213                  
5214                    
5215                      <span class="star">★</span>
5216                    
5217                  
5218                </div>
5219                
5220                
5221                <div class="testimonial-author">
5222                  <div class="author-image">
5223                    
5224                      <img src="//codendesigner.com/cdn/shop/files/12.Iqbal_Mahmud_100x100_crop_center.jpg?v=1747294465" alt="Iqbal Mahmud">
5225                    
5226                  </div>
5227                  <div class="author-info">
5228                    <div class="author-name">Iqbal Mahmud</div>
5229                    <div class="author-role">Google Certified Data Analyst | Python wizard</div>
5230                  </div>
5231                </div>
5232              </div>
5233            
5234          
5235            
5236              <div class="testimonial-card double-width" >
5237                <div class="quote-mark-left">"</div>
5238                <div class="testimonial-text">We have been using Mahmudul's services for the past four years. He has always been reliable and goe
5238s above and beyond to find the best solution for ILP. He has helped us with designing a new website, creating new webpages, customizing membership systems, Wordpress plugins and IT solutions. I highly recommend Mahmudul services and now consider him a valued member of our team.</div>
5239                
5240                <!-- Star Rating -->
5241                
5242                <div class="star-rating">
5243                  
5244                  
5245                    
5246                      <span class="star">★</span>
5247                    
5248                  
5249                    
5250                      <span class="star">★</span>
5251                    
5252                  
5253                    
5254                      <span class="star">★</span>
5255                    
5256                  
5257                    
5258                      <span class="star">★</span>
5259                    
5260                  
5261                    
5262                      <span class="star">★</span>
5263                    
5264                  
5265                </div>
5266                
5267                
5268                <div class="testimonial-author">
5269                  <div class="author-image">
5270                    
5271                      <img src="//codendesigner.com/cdn/shop/files/1.Kerry_Brocks_100x100_crop_center.jpg?v=1747294666" alt="Kerry Brocks">
5272                    
5273                  </div>
5274                  <div class="author-info">
5275                    <div class="author-name">Kerry Brocks</div>
5276                    <div class="author-role">Founder - Asia Pacific Institute of Learning & Performance</div>
5277                  </div>
5278                </div>
5279              </div>
5280            
5281          
5282          
5283          
5284        </div>
5285        
5286        <!-- Duplicate testimonials for infinite scroll -->
5287        <div class="testimonials-grid duplicate-grid" style="--column-count: 3;">
5288          
5289            
5290              <div class="testimonial-card double-width">
5291                <div class="quote-mark-left">"</div>
5292                <div class="testimonial-text">Over the past 6 years Mahmudul has never disappointed in either the timing
5293or the quality of the work being delivered. Mahmudul is highly proficient in all aspects of design,
5294website development, email newsletters, landing pages and Shopify. He is very reliable and
5295hard-working. No job is too hard, too small or too big with problem solving being one of Mahmudul's
5296strengths.
5297
5298I have presented him with many challenges for projects that required an exceptional level of
5299high-resolution layouts. Mahmudul excelled every time. He has proven himself to be patient in
5300helping me structure my articles, my social media posts and even my marketing plan. To that end, his
5301communication skills are excellent.</div>
5302                
5303                <!-- Star Rating -->
5304                
5305                <div class="star-rating">
5306                  
5307                  
5308                    
5309                      <span class="star">★</span>
5310                    
5311                  
5312                    
5313                      <span class="star">★</span>
5314                    
5315                  
5316                    
5317                      <span class="star">★</span>
5318                    
5319                  
5320                    
5321                      <span class="star">★</span>
5322                    
5323                  
5324                    
5325                      <span class="star">★</span>
5326                    
5327                  
5328                </div>
5329                
5330                
5331                <div class="testimonial-author">
5332                  <div class="author-image">
5333                    
5334                      <img src="//codendesigner.com/cdn/shop/files/Judi_Nash_avater_100x100_crop_center.jpg?v=1746946473" alt="Judi Nash">
5335                    
5336                  </div>
5337                  <div class="author-info">
5338                    <div class="author-name">Judi Nash</div>
5339                    <div class="author-role">When Time Means Nothing - Author</div>
5340                  </div>
5341                </div>
5342              </div>
5343            
5344          
5345            
5346              <div class="testimonial-card ">
5347                <div class="quote-mark-left">"</div>
5348                <div class="testimonial-text">I have used Codendesigner for adhoc CSS support, to troubleshoot web integrations and support with the development of websites and landing pages. They always provide high quality services, delivered professionally. Most importantly to my business, they are responsive to our needs.</div>
5349                
5350                <!-- Star Rating -->
5351                
5352                <div class="star-rating">
5353                  
5354                  
5355                    
5356                      <span class="star">★</span>
5357                    
5358                  
5359                    
5360                      <span class="star">★</span>
5361                    
5362                  
5363                    
5364                      <span class="star">★</span>
5365                    
5366                  
5367                    
5368                      <span class="star">★</span>
5369                    
5370                  
5371                    
5372                      <span class="star">★</span>
5373                    
5374                  
5375                </div>
5376                
5377                
5378                <div class="testimonial-author">
5379                  <div class="author-image">
5380                    
5381                      <img src="//codendesigner.com/cdn/shop/files/2.Jenni_Walke_100x100_crop_center.jpg?v=1747289617" alt="Jenni Walke">
5382                    
5383                  </div>
5384                  <div class="author-info">
5385                    <div class="author-name">Jenni Walke</div>
5386                    <div class="author-role">Founder, Principal Consultant -Elephant in the Room Consulting</div>
5387                  </div>
5388                </div>
5389              </div>
5390            
5391          
5392            
5393              <div class="testimonial-card ">
5394                <div class="quote-mark-left">"</div>
5395                <div class="testimonial-text">Codendesigner has always been very responsive and attentive to our requests. It was a real pleasure to work use their services. I recommend!</div>
5396                
5397                <!-- Star Rating -->
5398                
5399                <div class="star-rating">
5400                  
5401                  
5402                    
5403                      <span class="star">★</span>
5404                    
5405                  
5406                    
5407                      <span class="star">★</span>
5408                    
5409                  
5410                    
5411                      <span class="star">★</span>
5412                    
5413                  
5414                    
5415                      <span class="star">★</span>
5416                    
5417                  
5418                    
5419                      <span class="star">★</span>
5420                    
5421                  
5422                </div>
5423                
5424                
5425                <div class="testimonial-author">
5426                  <div class="author-image">
5427                    
5428                      <img src="//codendesigner.com/cdn/shop/files/3.Bilal_Afkir_100x100_crop_center.png?v=1747290080" alt="Bilal Afkir">
5429                    
5430                  </div>
5431                  <div class="author-info">
5432                    <div class="author-name">Bilal Afkir</div>
5433                    <div class="author-role">Senior Software Engineer @ Genymobile</div>
5434                  </div>
5435                </div>
5436              </div>
5437            
5438          
5439            
5440              <div class="testimonial-card ">
5441                <div class="quote-mark-left">"</div>
5442                <div class="testimonial-text">I have done plenty of projects with Mahmudul and he is great to work with. Reliable, professional and always walks an extra mile. I highly recommend his services for anything to do with website.</div>
5443                
5444                <!-- Star Rating -->
5445                
5446                <div class="star-rating">
5447                  
5448                  
5449                    
5450                      <span class="star">★</span>
5451                    
5452                  
5453                    
5454                      <span class="star">★</span>
5455                    
5456                  
5457                    
5458                      <span class="star">★</span>
5459                    
5460                  
5461                    
5462                      <span class="star">★</span>
5463                    
5464                  
5465                    
5466                      <span class="star">★</span>
5467                    
5468                  
5469                </div>
5470                
5471                
5472                <div class="testimonial-author">
5473                  <div class="author-image">
5474                    
5475                      <img src="//codendesigner.com/cdn/shop/files/4.Hetas_Pandya_100x100_crop_center.jpg?v=1747290472" alt="Hetas Pandya">
5476                    
5477                  </div>
5478                  <div class="author-info">
5479                    <div class="author-name">Hetas Pandya</div>
5480                    <div class="author-role">Co-Owner Brisbane Business Centre</div>
5481                  </div>
5482                </div>
5483              </div>
5484            
5485          
5486            
5487              <div class="testimonial-card ">
5488                <div class="quote-mark-left">"</div>
5489                <div class="testimonial-text">I have been a client for 4+ years and have never been disappointed. I have given hundreds of tasks with all being delivered with above exceptional qual
5489ity and in decent time. Codendesigner team is one of the best I have worked with and will continue to do so and 10/10 recommend to anyone else.</div>
5490                
5491                <!-- Star Rating -->
5492                
5493                <div class="star-rating">
5494                  
5495                  
5496                    
5497                      <span class="star">★</span>
5498                    
5499                  
5500                    
5501                      <span class="star">★</span>
5502                    
5503                  
5504                    
5505                      <span class="star">★</span>
5506                    
5507                  
5508                    
5509                      <span class="star">★</span>
5510                    
5511                  
5512                    
5513                      <span class="star">★</span>
5514                    
5515                  
5516                </div>
5517                
5518                
5519                <div class="testimonial-author">
5520                  <div class="author-image">
5521                    
5522                      <img src="//codendesigner.com/cdn/shop/files/5.T_Rainson_100x100_crop_center.png?v=1747291462" alt="T Rainson">
5523                    
5524                  </div>
5525                  <div class="author-info">
5526                    <div class="author-name">T Rainson</div>
5527                    <div class="author-role">Role/Position</div>
5528                  </div>
5529                </div>
5530              </div>
5531            
5532          
5533            
5534              <div class="testimonial-card ">
5535                <div class="quote-mark-left">"</div>
5536                <div class="testimonial-text">Very Good Service and Trustable Company.</div>
5537                
5538                <!-- Star Rating -->
5539                
5540                <div class="star-rating">
5541                  
5542                  
5543                    
5544                      <span class="star">★</span>
5545                    
5546                  
5547                    
5548                      <span class="star">★</span>
5549                    
5550                  
5551                    
5552                      <span class="star">★</span>
5553                    
5554                  
5555                    
5556                      <span class="star">★</span>
5557                    
5558                  
5559                    
5560                      <span class="star">★</span>
5561                    
5562                  
5563                </div>
5564                
5565                
5566                <div class="testimonial-author">
5567                  <div class="author-image">
5568                    
5569                      <img src="//codendesigner.com/cdn/shop/files/6.Osman_Hayat_100x100_crop_center.jpg?v=1747291454" alt="Osman Hayat">
5570                    
5571                  </div>
5572                  <div class="author-info">
5573                    <div class="author-name">Osman Hayat</div>
5574                    <div class="author-role">Graphic Designer & Calligraphy Artist</div>
5575                  </div>
5576                </div>
5577              </div>
5578            
5579          
5580            
5581              <div class="testimonial-card double-width">
5582                <div class="quote-mark-left">"</div>
5583                <div class="testimonial-text">I was very pleased with the web design job accomplished by Mahmud and his team at Codendesigner this month. From the beginning of the project, I felt like I was working with professionals, with regular updates, communication and progress shared. Once the transition was completed, the work did not stop as UX features were tested and revised. They certainly went the extra mile to make sure all my needs were exceeded! Net result: Project delivered to my standard, on time and to budget.</div>
5584                
5585                <!-- Star Rating -->
5586                
5587                
5588                <div class="testimonial-author">
5589                  <div class="author-image">
5590                    
5591                      <img src="//codendesigner.com/cdn/shop/files/7.Paul_Kanwar_100x100_crop_center.jpg?v=1747291805" alt="Paul Kanwar">
5592                    
5593                  </div>
5594                  <div class="author-info">
5595                    <div class="author-name">Paul Kanwar</div>
5596                    <div class="author-role">COO & Co-Founder Asian Sustainability Network</div>
5597                  </div>
5598                </div>
5599              </div>
5600            
5601          
5602            
5603              <div class="testimonial-card ">
5604                <div class="quote-mark-left">"</div>
5605                <div class="testimonial-text">I have used Codeendesigner for my new website. Their work is simple and fast. Satisfied with their services and response time.</div>
5606                
5607                <!-- Star Rating -->
5608                
5609                <div class="star-rating">
5610                  
5611                  
5612                    
5613                      <span class="star">★</span>
5614                    
5615                  
5616                    
5617                      <span class="star">★</span>
5618                    
5619                  
5620                    
5621                      <span class="star">★</span>
5622                    
5623                  
5624                    
5625                      <span class="star">★</span>
5626                    
5627                  
5628                    
5629                      <span class="star">★</span>
5630                    
5631                  
5632                </div>
5633                
5634                
5635                <div class="testimonial-author">
5636                  <div class="author-image">
5637                    
5638                      <img src="//codendesigner.com/cdn/shop/files/8.Hari_Thiruvanam_100x100_crop_center.webp?v=1747292415" alt="Harikrishnan Thiruvanam">
5639                    
5640                  </div>
5641                  <div class="author-info">
5642                    <div class="author-name">Harikrishnan Thiruvanam</div>
5643                    <div class="author-role">Managing Director - AvetsA.education</div>
5644                  </div>
5645                </div>
5646              </div>
5647            
5648          
5649            
5650              <div class="testimonial-card ">
5651                <div class="quote-mark-left">"</div>
5652                <div class="testimonial-text">A great experience working with Mahdi. He's incredibly patient, very thorough, and at a very reasonable cost. We've worked with him on several projects, and will continue doing so in the future.</div>
5653                
5654                <!-- Star Rating -->
5655                
5656                <div class="star-rating">
5657                  
5658                  
5659                    
5660                      <span class="star">★</span>
5661                    
5662                  
5663                    
5664                      <span class="star">★</span>
5665                    
5666                  
5667                    
5668                      <span class="star">★</span>
5669                    
5670                  
5671                    
5672                      <span class="star">★</span>
5673                    
5674                  
5675                    
5676                      <span class="star">★</span>
5677                    
5678                  
5679                </div>
5680                
5681                
5682                <div class="testimonial-author">
5683                  <div class="author-image">
5684                    
5685                      <div class="author-initial">T</div>
5686                    
5687                  </div>
5688                  <div class="author-info">
5689                    <div class="author-name">Troy</div>
5690                    <div class="author-role">US Client</div>
5691                  </div>
5692                </div>
5693              </div>
5694            
5695          
5696            
5697              <div class="testimonial-card ">
5698                <div class="quote-mark-left">"</div>
5699                <div class="testimonial-text">I recently engaged Mahmudul for development assistance with a website and was immediately impressed with his responsiveness and skill. I'll certainly be reaching out to Mahmudul again for future projects.</div>
5700                
5701                <!-- Star Rating -->
5702                
5703                <div class="star-rating">
5704                  
5705                  
5706                    
5707                      <span class="star">★</span>
5708                    
5709                  
5710                    
5711                      <span class="star">★</span>
5712                    
5713                  
5714                    
5715                      <span class="star">★</span>
5716                    
5717                  
5718                    
5719                      <span class="star">★</span>
5720                    
5721                  
5722                    
5723                      <span class="star">★</span>
5724                    
5725                  
5726                </div>
5727                
5728                
5729                <div class="testimonial-author">
5730                  <div class="author-image">
5731                    
5732                      <img src="//codendesigner.com/cdn/shop/files/10._Sheridan_Murphy_100x100_crop_center.jpg?v=1747293808" alt="Sheridan Murphy">
5733                    
5734                  </div>
5735                  <div class="author-info">
5736                    <div class="author-name">Sheridan Murphy</div>
5737                    <div class="author-role">Marketing Consultant </div>
5738                  </div>
5739                </div>
5740              </div>
5741            
5742          
5743            
5744              <div class="testimonial-card ">
5745                <div class="quote-mark-left">"</div>
5746                <div class="testimonial-text">I have worked with Mahmudul for a few different projects in last 3-4 years and I highly recommend his expertise. He is reliable and flexible. He is prompt in responses.</div>
5747                
5748                <!-- Star Rating -->
5749                
5750                <div class="star-rating">
5751                  
5752                  
5753                    
5754                      <span class="star">★</span>
5755                    
5756                  
5757                    
5758                      <span class="star">★</span>
5759                    
5760                  
5761                    
5762                      <span class="star">★</span>
5763                    
5764                  
5765                    
5766                      <span class="star">★</span>
5767                    
5768                  
5769                    
5770                      <span class="star">★</span>
5771                    
5772                  
5773                </div>
5774                
5775                
5776                <div class="testimonial-author">
5777                  <div class="author-image">
5778                    
5779                      <div class="author-initial">H</div>
5780                    
5781                  </div>
5782                  <div class="author-info">
5783                    <div class="author-name">Hetas Pandya</div>
5784                    <div class="author-role">Startup CEO</div>
5785                  </div>
5786                </div>
5787              </div>
5788            
5789          
5790            
5791              <div class="testimonial-card ">
5792                <div class="quote-mark-left">"</div>
5793                <div class="testimonial-text">Mahdi has worked with us for three years on various client projects. He is super talented at solving whatever challenge we throw at him. He works hard and completes projects to a high degree of quality, on time and on budget. His style is friendly and easy going. I highly recommend him.</div>
5794                
5795                <!-- Star Rating -->
5796                
5797                <div class="star-rating">
5798                  
5799                  
5800                    
5801                      <span class="star">★</span>
5802                    
5803                  
5804                    
5805                      <span class="star">★</span>
5806                    
5807                  
5808                    
5809                      <span class="star">★</span>
5810                    
5811                  
5812                    
5813                      <span class="star">★</span>
5814                    
5815                  
5816                    
5817                      <span class="star">★</span>
5818                    
5819                  
5820                </div>
5821                
5822                
5823                <div class="testimonial-author">
5824                  <div class="author-image">
5825                    
5826                      <img src="//codendesigner.com/cdn/shop/files/11.Carl_Riley_100x100_crop_center.jpg?v=1747294132" alt="Carl Riley">
5827                    
5828                  </div>
5829                  <div class="author-info">
5830                    <div class="author-name">Carl Riley</div>
5831                    <div class="author-role">Founder & Strategy Director, The Riley Group</div>
5832                  </div>
5833                </div>
5834              </div>
5835            
5836          
5837            
5838              <div class="testimonial-card ">
5839                <div class="quote-mark-left">"</div>
5840                <div class="testimonial-text">I know Mehedi from our college life and he really develop few web based solution for e-store, custom and easily manageable web app for his customers across the globe. All the best and keep doing such great things.</div>
5841                
5842                <!-- Star Rating -->
5843                
5844                <div class="star-rating">
5845                  
5846                  
5847                    
5848                      <span class="star">★</span>
5849                    
5850                  
5851                    
5852                      <span class="star">★</span>
5853                    
5854                  
5855                    
5856                      <span class="star">★</span>
5857                    
5858                  
5859                    
5860                      <span class="star">★</span>
5861                    
5862                  
5863                    
5864                      <span class="star">★</span>
5865                    
5866                  
5867                </div>
5868                
5869                
5870                <div class="testimonial-author">
5871                  <div class="author-image">
5872                    
5873                      <img src="//codendesigner.com/cdn/shop/files/12.Iqbal_Mahmud_100x100_crop_center.jpg?v=1747294465" alt="Iqbal Mahmud">
5874                    
5875                  </div>
5876                  <div class="author-info">
5877                    <div class="author-name">Iqbal Mahmud</div>
5878                    <div class="author-role">
5878Google Certified Data Analyst | Python wizard</div>
5879                  </div>
5880                </div>
5881              </div>
5882            
5883          
5884            
5885              <div class="testimonial-card double-width">
5886                <div class="quote-mark-left">"</div>
5887                <div class="testimonial-text">We have been using Mahmudul's services for the past four years. He has always been reliable and goes above and beyond to find the best solution for ILP. He has helped us with designing a new website, creating new webpages, customizing membership systems, Wordpress plugins and IT solutions. I highly recommend Mahmudul services and now consider him a valued member of our team.</div>
5888                
5889                <!-- Star Rating -->
5890                
5891                <div class="star-rating">
5892                  
5893                  
5894                    
5895                      <span class="star">★</span>
5896                    
5897                  
5898                    
5899                      <span class="star">★</span>
5900                    
5901                  
5902                    
5903                      <span class="star">★</span>
5904                    
5905                  
5906                    
5907                      <span class="star">★</span>
5908                    
5909                  
5910                    
5911                      <span class="star">★</span>
5912                    
5913                  
5914                </div>
5915                
5916                
5917                <div class="testimonial-author">
5918                  <div class="author-image">
5919                    
5920                      <img src="//codendesigner.com/cdn/shop/files/1.Kerry_Brocks_100x100_crop_center.jpg?v=1747294666" alt="Kerry Brocks">
5921                    
5922                  </div>
5923                  <div class="author-info">
5924                    <div class="author-name">Kerry Brocks</div>
5925                    <div class="author-role">Founder - Asia Pacific Institute of Learning & Performance</div>
5926                  </div>
5927                </div>
5928              </div>
5929            
5930          
5931          
5932          
5933        </div>
5934      </div>
5935    </div>
5936  </div>
5937</section>
5938
5939
5940</section><section id="shopify-section-template--18633345794095__case_study_gallery_v3_9Uz7mH" class="shopify-section case-study-gallery">
5941
5942
5943<div
5944  id="Websites"
5945  class="project-gallery-wrapper"
5946  style="--heading-color: #1a1a1a; --text-color: #4a4a4a; --background-color: #ffffff; --gap: 16px;"
5947>
5948  <div class="project-gallery-container">
5949    <div class="project-gallery-header">
5950      <h2 class="project-gallery-heading">Our Projects</h2>
5951      
5952        <div class="project-gallery-description">Explore our latest work and successful projects.</div>
5953      
5954
5955      <!-- Filter Buttons -->
5956      <div class="project-filters filters button-group js-radio-button-group">
5957        <button class="filter-button button is-checked" data-filter="*">ALL</button>
5958        
5959        
5960        <button class="filter-button button" data-filter=".shopify">Shopify</button>
5961        <button class="filter-button button" data-filter=".learnworlds">LearnWorlds</button>
5962        <button class="filter-button button" data-filter=".wordpress">WordPress</button>
5963        
5964        
5965      </div>
5966    </div>
5967
5968    <div
5969      class="project-gallery grid project-gallery-masonry"
5970      style="--columns: 2; --columns-mobile: 1;"
5971    >
5972      
5973      
5974      
5975        
5976          <div
5977            class="project-item element-item learnworld"
5978            data-category="learnworld"
5979            data-page="1"
5980            
5981          >
5982            <div class="project-image-container">
5983              
5984                <img src="//codendesigner.com/cdn/shop/files/CompreHelp-home.png?v=1789888846&amp;width=800" alt="CompreHelp" srcset="//codendesigner.com/cdn/shop/files/CompreHelp-home.png?v=1789888846&amp;width=200 200w, //codendesigner.com/cdn/shop/files/CompreHelp-home.png?v=1789888846&amp;width=400 400w, //codendesigner.com/cdn/shop/files/CompreHelp-home.png?v=1789888846&amp;width=600 600w, //codendesigner.com/cdn/shop/files/CompreHelp-home.png?v=1789888846&amp;width=800 800w" width="800" height="6006" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="0">
5985              
5986              <div class="project-overlay">
5987                <div class="project-magnify">
5988                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
5989                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
5990                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
5991                  </svg>
5992                </div>
5993              </div>
5994            </div>
5995            <div class="project-info">
5996              <h3 class="project-title">CompreHelp</h3>
5997              
5998                <div class="project-category">LearnWorld</div>
5999              
6000            </div>
6001          </div>
6002        
6003      
6004        
6005          <div
6006            class="project-item element-item learnworld"
6007            data-category="learnworld"
6008            data-page="1"
6009            
6010          >
6011            <div class="project-image-container">
6012              
6013                <img src="//codendesigner.com/cdn/shop/files/lartdusavoir-Home.png?v=1784108759&amp;width=800" alt="Lart du Savoir" srcset="//codendesigner.com/cdn/shop/files/lartdusavoir-Home.png?v=1784108759&amp;width=200 200w, //codendesigner.com/cdn/shop/files/lartdusavoir-Home.png?v=1784108759&amp;width=400 400w, //codendesigner.com/cdn/shop/files/lartdusavoir-Home.png?v=1784108759&amp;width=600 600w, //codendesigner.com/cdn/shop/files/lartdusavoir-Home.png?v=1784108759&amp;width=800 800w" width="800" height="2387" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="1">
6014              
6015              <div class="project-overlay">
6016                <div class="project-magnify">
6017                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6018                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6019                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6020                  </svg>
6021                </div>
6022              </div>
6023            </div>
6024            <div class="project-info">
6025              <h3 class="project-title">Lart du Savoir</h3>
6026              
6027                <div class="project-category">LearnWorld</div>
6028              
6029            </div>
6030          </div>
6031        
6032      
6033        
6034          <div
6035            class="project-item element-item shopify"
6036            data-category="shopify"
6037            data-page="1"
6038            
6039          >
6040            <div class="project-image-container">
6041              
6042                <img src="//codendesigner.com/cdn/shop/files/MKNCC_global-Port3.png?v=1789808950&amp;width=800" alt="MKNCC Global" srcset="//codendesigner.com/cdn/shop/files/MKNCC_global-Port3.png?v=1789808950&amp;width=200 200w, //codendesigner.com/cdn/shop/files/MKNCC_global-Port3.png?v=1789808950&amp;width=400 400w, //codendesigner.com/cdn/shop/files/MKNCC_global-Port3.png?v=1789808950&amp;width=600 600w, //codendesigner.com/cdn/shop/files/MKNCC_global-Port3.png?v=1789808950&amp;width=800 800w" width="800" height="500" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="2">
6043              
6044              <div class="project-overlay">
6045                <div class="project-magnify">
6046                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6047                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6048                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6049                  </svg>
6050                </div>
6051              </div>
6052            </div>
6053            <div class="project-info">
6054              <h3 class="project-title">MKNCC Global</h3>
6055              
6056                <div class="project-category">Shopify</div>
6057              
6058            </div>
6059          </div>
6060        
6061      
6062        
6063          <div
6064            class="project-item element-item squarespace"
6065            data-category="squarespace"
6066            data-page="1"
6067            
6068          >
6069            <div class="project-image-container">
6070              
6071                <img src="//codendesigner.com/cdn/shop/files/with-helen.com-careerally-Home.png?v=1784031914&amp;width=800" alt="with helen CareerAlly" srcset="//codendesigner.com/cdn/shop/files/with-helen.com-careerally-Home.png?v=1784031914&amp;width=200 200w, //codendesigner.com/cdn/shop/files/with-helen.com-careerally-Home.png?v=1784031914&amp;width=400 400w, //codendesigner.com/cdn/shop/files/with-helen.com-careerally-Home.png?v=1784031914&amp;width=600 600w, //codendesigner.com/cdn/shop/files/with-helen.com-careerally-Home.png?v=1784031914&amp;width=800 800w" width="800" height="1898" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="3">
6072              
6073              <div class="project-overlay">
6074                <div class="project-magnify">
6075                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6076                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6077                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6078                  </svg>
6079                </div>
6080              </div>
6081            </div>
6082            <div class="project-info">
6083              <h3 class="project-title">with helen CareerAlly</h3>
6084              
6085                <div class="project-category">Squarespace</div>
6086              
6087            </div>
6088          </div>
6089        
6090      
6091        
6092          <div
6093            class="project-item element-item wordpress"
6094            data-category="wordpress"
6095            data-page="1"
6096            
6097          >
6098            <div class="project-image-container">
6099              
6100                <img src="//codendesigner.com/cdn/shop/files/FoodSurety-Home.png?v=1784028281&amp;
6100width=800" alt="Food Surety" srcset="//codendesigner.com/cdn/shop/files/FoodSurety-Home.png?v=1784028281&amp;width=200 200w, //codendesigner.com/cdn/shop/files/FoodSurety-Home.png?v=1784028281&amp;width=400 400w, //codendesigner.com/cdn/shop/files/FoodSurety-Home.png?v=1784028281&amp;width=600 600w, //codendesigner.com/cdn/shop/files/FoodSurety-Home.png?v=1784028281&amp;width=800 800w" width="800" height="5813" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="4">
6101              
6102              <div class="project-overlay">
6103                <div class="project-magnify">
6104                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6105                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6106                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6107                  </svg>
6108                </div>
6109              </div>
6110            </div>
6111            <div class="project-info">
6112              <h3 class="project-title">Food Surety</h3>
6113              
6114                <div class="project-category">WordPress</div>
6115              
6116            </div>
6117          </div>
6118        
6119      
6120        
6121          <div
6122            class="project-item element-item learnworld"
6123            data-category="learnworld"
6124            data-page="1"
6125            
6126          >
6127            <div class="project-image-container">
6128              
6129                <img src="//codendesigner.com/cdn/shop/files/careerally-home.png?v=1789886522&amp;width=800" alt="SystemicAlly" srcset="//codendesigner.com/cdn/shop/files/careerally-home.png?v=1789886522&amp;width=200 200w, //codendesigner.com/cdn/shop/files/careerally-home.png?v=1789886522&amp;width=400 400w, //codendesigner.com/cdn/shop/files/careerally-home.png?v=1789886522&amp;width=600 600w, //codendesigner.com/cdn/shop/files/careerally-home.png?v=1789886522&amp;width=800 800w" width="800" height="3779" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="5">
6130              
6131              <div class="project-overlay">
6132                <div class="project-magnify">
6133                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6134                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6135                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6136                  </svg>
6137                </div>
6138              </div>
6139            </div>
6140            <div class="project-info">
6141              <h3 class="project-title">SystemicAlly</h3>
6142              
6143                <div class="project-category">LearnWorld</div>
6144              
6145            </div>
6146          </div>
6147        
6148      
6149        
6150          <div
6151            class="project-item element-item learnworld"
6152            data-category="learnworld"
6153            data-page="1"
6154            
6155          >
6156            <div class="project-image-container">
6157              
6158                <img src="//codendesigner.com/cdn/shop/files/Home-new-05-04-2026_12_20_PM.png?v=1777877289&amp;width=800" alt="L&#39;Art du Savoir Academy " srcset="//codendesigner.com/cdn/shop/files/Home-new-05-04-2026_12_20_PM.png?v=1777877289&amp;width=200 200w, //codendesigner.com/cdn/shop/files/Home-new-05-04-2026_12_20_PM.png?v=1777877289&amp;width=400 400w, //codendesigner.com/cdn/shop/files/Home-new-05-04-2026_12_20_PM.png?v=1777877289&amp;width=600 600w, //codendesigner.com/cdn/shop/files/Home-new-05-04-2026_12_20_PM.png?v=1777877289&amp;width=800 800w" width="800" height="2577" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="6">
6159              
6160              <div class="project-overlay">
6161                <div class="project-magnify">
6162                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6163                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6164                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6165                  </svg>
6166                </div>
6167              </div>
6168            </div>
6169            <div class="project-info">
6170              <h3 class="project-title">L'Art du Savoir Academy </h3>
6171              
6172                <div class="project-category">LearnWorld</div>
6173              
6174            </div>
6175          </div>
6176        
6177      
6178        
6179          <div
6180            class="project-item element-item wordpress"
6181            data-category="wordpress"
6182            data-page="1"
6183            
6184          >
6185            <div class="project-image-container">
6186              
6187                <img src="//codendesigner.com/cdn/shop/files/edu-egy-Home-WP.png?v=1777876640&amp;width=800" alt="The EducatorThe Educator" srcset="//codendesigner.com/cdn/shop/files/edu-egy-Home-WP.png?v=1777876640&amp;width=200 200w, //codendesigner.com/cdn/shop/files/edu-egy-Home-WP.png?v=1777876640&amp;width=400 400w, //codendesigner.com/cdn/shop/files/edu-egy-Home-WP.png?v=1777876640&amp;width=600 600w, //codendesigner.com/cdn/shop/files/edu-egy-Home-WP.png?v=1777876640&amp;width=800 800w" width="800" height="3111" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="7">
6188              
6189              <div class="project-overlay">
6190                <div class="project-magnify">
6191                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6192                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6193                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6194                  </svg>
6195                </div>
6196              </div>
6197            </div>
6198            <div class="project-info">
6199              <h3 class="project-title">The EducatorThe Educator</h3>
6200              
6201                <div class="project-category">Wordpress</div>
6202              
6203            </div>
6204          </div>
6205        
6206      
6207        
6208          <div
6209            class="project-item element-item learnworlds"
6210            data-category="learnworlds"
6211            data-page="1"
6212            
6213          >
6214            <div class="project-image-container">
6215              
6216                <img src="//codendesigner.com/cdn/shop/files/Curriculum_Design.png?v=1763296834&amp;width=800" alt="The Muse Wellbeing" srcset="//codendesigner.com/cdn/shop/files/Curriculum_Design.png?v=1763296834&amp;width=200 200w, //codendesigner.com/cdn/shop/files/Curriculum_Design.png?v=1763296834&amp;width=400 400w, //codendesigner.com/cdn/shop/files/Curriculum_Design.png?v=1763296834&amp;width=600 600w, //codendesigner.com/cdn/shop/files/Curriculum_Design.png?v=1763296834&amp;width=800 800w" width="800" height="3333" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="8">
6217              
6218              <div class="project-overlay">
6219                <div class="project-magnify">
6220                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6221                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6222                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6223                  </svg>
6224                </div>
6225              </div>
6226            </div>
6227            <div class="project-info">
6228              <h3 class="project-title">The Muse Wellbeing</h3>
6229              
6230                <div class="project-category">LearnWorlds</div>
6231              
6232            </div>
6233          </div>
6234        
6235      
6236        
6237          <div
6238            class="project-item element-item learnworlds"
6239            data-category="learnworlds"
6240            data-page="1"
6241            
6242          >
6243            <div class="project-image-container">
6244              
6245                <img src="//codendesigner.com/cdn/shop/files/surghub-complex_lower.png?v=1789886696&amp;width=800" alt="SURGhub" srcset="//codendesigner.com/cdn/shop/files/surghub-complex_lower.png?v=1789886696&amp;width=200 200w, //codendesigner.com/cdn/shop/files/surghub-complex_lower.png?v=1789886696&amp;width=400 400w, //codendesigner.com/cdn/shop/files/surghub-complex_lower.png?v=1789886696&amp;width=600 600w, //codendesigner.com/cdn/shop/files/surghub-complex_lower.png?v=1789886696&amp;width=800 800w" width="800" height="5180" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="9">
6246              
6247              <div class="project-overlay">
6248                <div class="project-magnify">
6249                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6250                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6251                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6252                  </svg>
6253                </div>
6254              </div>
6255            </div>
6256            <div class="project-info">
6257              <h3 class="project-title">SURGhub</h3>
6258              
6259                <div class="project-category">LearnWorlds</div>
6260              
6261            </div>
6262          </div>
6263        
6264      
6265        
6266          <div
6267            class="project-item element-item shopify"
6268            data-category="shopify"
6269            data-page="1"
6270            
6271          >
6272            <div class="project-image-container">
6273              
6274                <img src="//codendesigner.com/cdn/shop/files/SassyLab-slide-image.png?v=1695463807&amp;width=800" alt="SassyLAB" srcset="//codendesigner.com/cdn/shop/files/SassyLab-slide-image.png?v=1695463807&amp;width=200 200w, //codendesigner.com/cdn/shop/files/SassyLab-slide-image.png?v=1695463807&amp;width=400 400w, //codendesigner.com/cdn/shop/files/SassyLab-slide-image.png?v=1695463807&amp;width=600 600w, //codendesigner.com/cdn/shop/files/SassyLab-slide-image.png?v=1695463807&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="10">
6275              
6276              <div class="project-overlay">
6277                <div class="project-magnify">
6278                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6279                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6280                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6281                  </svg>
6282                </div>
6283              </div>
6284            </div>
6285            <div class="project-info">
6286              <h3 class="project-title">SassyLAB</h3>
6287              
6288                <div class="project-category">Shopify</div>
6289              
6290            </div>
6291          </div>
6292        
6293      
6294        
6295          <div
6296            class="project-item element-item wordpress"
6297            data-category="wordpress"
6298            data-page="1"
6299            
6300          >
6301            <div class="project-image-container">
6302              
6303                <img src="//codendesigner.com/cdn/shop/files/bellrosejewellers.jpg?v=1696685508&amp;width=800" alt="Bellrose Fine Jewellers" srcset="//codendesigner.com/cdn/shop/files/bellrosejewellers.jpg?v=1696685508&amp;width=200 200w, //codendesigner.com/cdn/shop/files/bellrosejewellers.jpg?v=1696685508&amp;width=400 400w, //codendesigner.com/cdn/shop/files/bellrosejewellers.jpg?v=1696685508&amp;width=600 600w, //codendesigner.com/cdn/shop/files/bellrosejewellers.jpg?v=1696685508&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="11">
6304              
6305              <div class="project-overlay">
6306                <div class="project-magnify">
6307                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6308                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6309                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6310                  </svg>
6311                </div>
6312              </div>
6313            </div>
6314            <div class="project-info">
6315              <h3 class="project-title">Bellrose Fine Jewellers</h3>
6316              
6317                <div class="project-category">WordPress</div>
6318              
6319            </div>
6320          </div>
6321        
6322      
6323        
6324          <div
6325            class="project-item element-item wordpress"
6326            data-category="wordpress"
6327            data-page="1"
6328            
6329          >
6330            <div class="project-image-container">
6331              
6332                <img src="//codendesigner.com/cdn/shop/files/11_4190db51-2aab-4a82-86d2-1ff36f819a0c.png?v=1676711736&amp;width=800" alt="ILP Asia Pacific" srcset="//codendesigner.com/cdn/shop/files/11_4190db51-2aab-4a82-86d2-1ff36f819a0c.png?v=1676711736&amp;width=200 200w, //codendesigner.com/cdn/shop/files/11_4190db51-2aab-4a82-86d2-1ff36f819a0c.png?v=1676711736&amp;width=400 400w, //codendesigner.com/cdn/shop/files/11_4190db51-2aab-4a82-86d2-1ff36f819a0c.png?v=1676711736&amp;width=600 600w, //codendesigner.com/cdn/shop/files/11_4190db51-2aab-4a82-86d2-1ff36f819a0c.png?v=1676711736&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="12">
6333              
6334              <div class="project-overlay">
6335                <div class="project-magnify">
6336                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6337                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6338                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6339                  </svg>
6340                </div>
6341              </div>
6342            </div>
6343            <div class="project-info">
6344              <h3 class="project-title">ILP Asia Pacific</h3>
6345              
6346                <div class="project-category">wordpress</div>
6347              
6348            </div>
6349          </div>
6350        
6351      
6352        
6353          <div
6354            class="project-item element-item shopify"
6355            data-category="shopify"
6356            data-page="1"
6357            
6358          >
6359            <div class="project-image-container">
6360              
6361                <img src="//codendesigner.com/cdn/shop/files/8_6b99a8ed-2680-4c3c-b6f9-dad5c3603678.png?v=1676711723&amp;width=800" alt="HEAVEN ROC NEW YORK" srcset="//codendesigner.com/cdn/shop/files/8_6b99a8ed-2680-4c3c-b6f9-dad5c3603678.png?v=1676711723&amp;width=200 200w, //codendesigner.com/cdn/shop/files/8_6b99a8ed-2680-4c3c-b6f9-dad5c3603678.png?v=1676711723&amp;width=400 400w, //codendesigner.com/cdn/shop/files/8_6b99a8ed-2680-4c3c-b6f9-dad5c3603678.png?v=1676711723&amp;width=600 600w, //codendesigner.com/cdn/shop/files/8_6b99a8ed-2680-4c3c-b6f9-dad5c3603678.png?v=1676711723&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="13">
6362              
6363              <div class="project-overlay">
6364                <div class="project-magnify">
6365                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6366                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6367                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6368                  </svg>
6369                </div>
6370              </div>
6371            </div>
6372            <div class="project-info">
6373              <h3 class="project-title">HEAVEN ROC NEW YORK</h3>
6374              
6375                <div class="project-category">Shopify</div>
6376              
6377            </div>
6378          </div>
6379        
6380      
6381        
6382          <div
6383            class="project-item element-item shopify"
6384            data-category="shopify"
6385            data-page="1"
6386            
6387          >
6388            <div class="project-image-container">
6389              
6390                <img src="//codendesigner.com/cdn/shop/files/21_f30e035a-7477-4f4a-8d34-8b4ec891e6d3.png?v=1676711800&amp;width=800" alt="V-Flat World" srcset="//codendesigner.com/cdn/shop/files/21_f30e035a-7477-4f4a-8d34-8b4ec891e6d3.png?v=1676711800&amp;width=200 200w, //codendesigner.com/cdn/shop/files/21_f30e035a-7477-4f4a-8d34-8b4ec891e6d3.png?v=1676711800&amp;width=400 400w, //codendesigner.com/cdn/shop/files/21_f30e035a-7477-4f4a-8d34-8b4ec891e6d3.png?v=1676711800&amp;width=600 600w, //codendesigner.com/cdn/shop/files/21_f30e035a-7477-4f4a-8d34-8b4ec891e6d3.png?v=1676711800&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="14">
6391              
6392              <div class="project-overlay">
6393                <div class="project-magnify">
6394                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6395                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6396                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6397                  </svg>
6398                </div>
6399              </div>
6400            </div>
6401            <div class="project-info">
6402              <h3 class="project-title">V-Flat World</h3>
6403              
6404                <div class="project-category">Shopify</div>
6405              
6406            </div>
6407          </div>
6408        
6409      
6410        
6411          <div
6412            class="project-item element-item learnworlds"
6413            data-category="learnworlds"
6414            data-page="1"
6415            
6416          >
6417            <div class="project-image-container">
6418              
6419                <img src="//codendesigner.com/cdn/shop/files/LearnWorlds_website.png?v=1709179156&amp;width=800" alt="Cultural iQ" srcset="//codendesigner.com/cdn/shop/files/LearnWorlds_website.png?v=1709179156&amp;width=200 200w, //codendesigner.com/cdn/shop/files/LearnWorlds_website.png?v=1709179156&amp;width=400 400w, //codendesigner.com/cdn/shop/files/LearnWorlds_website.png?v=1709179156&amp;width=600 600w, //codendesigner.com/cdn/shop/files/LearnWorlds_website.png?v=1709179156&amp;width=800 800w" width="800" height="472" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="15">
6420              
6421              <div class="project-overlay">
6422                <div class="project-magnify">
6423                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6424                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6425                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6426                  </svg>
6427                </div>
6428              </div>
6429            </div>
6430            <div class="project-info">
6431              <h3 class="project-title">Cultural iQ</h3>
6432              
6433                <div class="project-category">LearnWorlds</div>
6434              
6435            </div>
6436          </div>
6437        
6438      
6439        
6440          <div
6441            class="project-item element-item wordpress"
6442            data-category="wordpress"
6443            data-page="1"
6444            
6445          >
6446            <div class="project-image-container">
6447              
6448                <img src="//codendesigner.com/cdn/shop/files/Flowerism-slide-image.png?v=1695463682&amp;width=800" alt="Flowerisme" srcset="//codendesigner.com/cdn/shop/files/Flowerism-slide-image.png?v=1695463682&amp;width=200 200w, //codendesigner.com/cdn/shop/files/Flowerism-slide-image.png?v=1695463682&amp;width=400 400w, //codendesigner.com/cdn/shop/files/Flowerism-slide-image.png?v=1695463682&amp;width=600 600w, //codendesigner.com/cdn/shop/files/Flowerism-slide-image.png?v=1695463682&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="16">
6449              
6450              <div class="project-overlay">
6451                <div class="project-magnify">
6452                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6453                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6454                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6455                  </svg>
6456                </div>
6457              </div>
6458            </div>
6459            <div class="project-info">
6460              <h3 class="project-title">Flowerisme</h3>
6461              
6462                <div class="project-category">wordpress</div>
6463              
6464            </div>
6465          </div>
6466        
6467      
6468        
6469          <div
6470            class="project-item element-item shopify"
6471            data-category="shopify"
6472            data-page="1"
6473            
6474          >
6475            <div class="project-image-container">
6476              
6477                <img src="//codendesigner.com/cdn/shop/files/6_3fdf899d-ed6c-4e2a-857f-943bff6c36af.png?v=1676711722&amp;width=800" alt="FORM Premium Insoles" srcset="//codendesigner.com/cdn/shop/files/6_3fdf899d-ed6c-4e2a-857f-943bff6c36af.png?v=1676711722&amp;width=200 200w, //codendesigner.com/cdn/shop/files/6_3fdf899d-ed6c-4e2a-857f-943bff6c36af.png?v=1676711722&amp;width=400 400w, //codendesigner.com/cdn/shop/files/6_3fdf899d-ed6c-4e2a-857f-943bff6c36af.png?v=1676711722&amp;width=600 600w, //codendesigner.com/cdn/shop/files/6_3fdf899d-ed6c-4e2a-857f-943bff6c36af.png?v=1676711722&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="17">
6478              
6479              <div class="project-overlay">
6480                <div class="project-magnify">
6481                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6482                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6483                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6484                  </svg>
6485                </div>
6486              </div>
6487            </div>
6488            <div class="project-info">
6489              <h3 class="project-title">FORM Premium Insoles</h3>
6490              
6491                <div class="project-category">Shopify</div>
6492              
6493            </div>
6494          </div>
6495        
6496      
6497        
6498          <div
6499            class="project-item element-item wordpress"
6500            data-category="wordpress"
6501            data-page="1"
6502            
6503          >
6504            <div class="project-image-container">
6505              
6506                <img src="//codendesigner.com/cdn/shop/files/avetsa.education-
6506portfolio.jpg?v=1734762058&amp;width=800" alt="AVETSA Education" srcset="//codendesigner.com/cdn/shop/files/avetsa.education-portfolio.jpg?v=1734762058&amp;width=200 200w, //codendesigner.com/cdn/shop/files/avetsa.education-portfolio.jpg?v=1734762058&amp;width=400 400w, //codendesigner.com/cdn/shop/files/avetsa.education-portfolio.jpg?v=1734762058&amp;width=600 600w, //codendesigner.com/cdn/shop/files/avetsa.education-portfolio.jpg?v=1734762058&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="18">
6507              
6508              <div class="project-overlay">
6509                <div class="project-magnify">
6510                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6511                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6512                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6513                  </svg>
6514                </div>
6515              </div>
6516            </div>
6517            <div class="project-info">
6518              <h3 class="project-title">AVETSA Education</h3>
6519              
6520                <div class="project-category">WordPress</div>
6521              
6522            </div>
6523          </div>
6524        
6525      
6526        
6527          <div
6528            class="project-item element-item shopify"
6529            data-category="shopify"
6530            data-page="1"
6531            
6532          >
6533            <div class="project-image-container">
6534              
6535                <img src="//codendesigner.com/cdn/shop/files/13_dd567775-2c23-4b6f-8158-d8df62782569.png?v=1676711736&amp;width=800" alt="Manchester Warehouse" srcset="//codendesigner.com/cdn/shop/files/13_dd567775-2c23-4b6f-8158-d8df62782569.png?v=1676711736&amp;width=200 200w, //codendesigner.com/cdn/shop/files/13_dd567775-2c23-4b6f-8158-d8df62782569.png?v=1676711736&amp;width=400 400w, //codendesigner.com/cdn/shop/files/13_dd567775-2c23-4b6f-8158-d8df62782569.png?v=1676711736&amp;width=600 600w, //codendesigner.com/cdn/shop/files/13_dd567775-2c23-4b6f-8158-d8df62782569.png?v=1676711736&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="19">
6536              
6537              <div class="project-overlay">
6538                <div class="project-magnify">
6539                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6540                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6541                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6542                  </svg>
6543                </div>
6544              </div>
6545            </div>
6546            <div class="project-info">
6547              <h3 class="project-title">Manchester Warehouse</h3>
6548              
6549                <div class="project-category">Shopify</div>
6550              
6551            </div>
6552          </div>
6553        
6554      
6555        
6556          <div
6557            class="project-item element-item wordpress"
6558            data-category="wordpress"
6559            data-page="1"
6560            
6561          >
6562            <div class="project-image-container">
6563              
6564                <img src="//codendesigner.com/cdn/shop/files/vitamemorials.jpg?v=1696685459&amp;width=800" alt="VITA Memorials" srcset="//codendesigner.com/cdn/shop/files/vitamemorials.jpg?v=1696685459&amp;width=200 200w, //codendesigner.com/cdn/shop/files/vitamemorials.jpg?v=1696685459&amp;width=400 400w, //codendesigner.com/cdn/shop/files/vitamemorials.jpg?v=1696685459&amp;width=600 600w, //codendesigner.com/cdn/shop/files/vitamemorials.jpg?v=1696685459&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="20">
6565              
6566              <div class="project-overlay">
6567                <div class="project-magnify">
6568                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6569                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6570                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6571                  </svg>
6572                </div>
6573              </div>
6574            </div>
6575            <div class="project-info">
6576              <h3 class="project-title">VITA Memorials</h3>
6577              
6578                <div class="project-category">WordPress</div>
6579              
6580            </div>
6581          </div>
6582        
6583      
6584        
6585          <div
6586            class="project-item element-item shopify"
6587            data-category="shopify"
6588            data-page="1"
6589            
6590          >
6591            <div class="project-image-container">
6592              
6593                <img src="//codendesigner.com/cdn/shop/files/15_4966d82c-ceda-4cb0-834d-22bc03170119.png?v=1676711736&amp;width=800" alt="Purespective" srcset="//codendesigner.com/cdn/shop/files/15_4966d82c-ceda-4cb0-834d-22bc03170119.png?v=1676711736&amp;width=200 200w, //codendesigner.com/cdn/shop/files/15_4966d82c-ceda-4cb0-834d-22bc03170119.png?v=1676711736&amp;width=400 400w, //codendesigner.com/cdn/shop/files/15_4966d82c-ceda-4cb0-834d-22bc03170119.png?v=1676711736&amp;width=600 600w, //codendesigner.com/cdn/shop/files/15_4966d82c-ceda-4cb0-834d-22bc03170119.png?v=1676711736&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="21">
6594              
6595              <div class="project-overlay">
6596                <div class="project-magnify">
6597                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6598                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6599                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6600                  </svg>
6601                </div>
6602              </div>
6603            </div>
6604            <div class="project-info">
6605              <h3 class="project-title">Purespective</h3>
6606              
6607                <div class="project-category">Shopify</div>
6608              
6609            </div>
6610          </div>
6611        
6612      
6613        
6614          <div
6615            class="project-item element-item shopify"
6616            data-category="shopify"
6617            data-page="1"
6618            
6619          >
6620            <div class="project-image-container">
6621              
6622                <img src="//codendesigner.com/cdn/shop/files/space-lock-landingPage-portfolio.jpg?v=1734762141&amp;width=800" alt="The Space Safe" srcset="//codendesigner.com/cdn/shop/files/space-lock-landingPage-portfolio.jpg?v=1734762141&amp;width=200 200w, //codendesigner.com/cdn/shop/files/space-lock-landingPage-portfolio.jpg?v=1734762141&amp;width=400 400w, //codendesigner.com/cdn/shop/files/space-lock-landingPage-portfolio.jpg?v=1734762141&amp;width=600 600w, //codendesigner.com/cdn/shop/files/space-lock-landingPage-portfolio.jpg?v=1734762141&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="22">
6623              
6624              <div class="project-overlay">
6625                <div class="project-magnify">
6626                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6627                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6628                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6629                  </svg>
6630                </div>
6631              </div>
6632            </div>
6633            <div class="project-info">
6634              <h3 class="project-title">The Space Safe</h3>
6635              
6636                <div class="project-category">Shopify</div>
6637              
6638            </div>
6639          </div>
6640        
6641      
6642        
6643          <div
6644            class="project-item element-item wordpress"
6645            data-category="wordpress"
6646            data-page="1"
6647            
6648          >
6649            <div class="project-image-container">
6650              
6651                <img src="//codendesigner.com/cdn/shop/files/Home-page.jpg?v=1746955941&amp;width=800" alt="Fred&#39;s One Stop Shopping" srcset="//codendesigner.com/cdn/shop/files/Home-page.jpg?v=1746955941&amp;width=200 200w, //codendesigner.com/cdn/shop/files/Home-page.jpg?v=1746955941&amp;width=400 400w, //codendesigner.com/cdn/shop/files/Home-page.jpg?v=1746955941&amp;width=600 600w, //codendesigner.com/cdn/shop/files/Home-page.jpg?v=1746955941&amp;width=800 800w" width="800" height="450" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="23">
6652              
6653              <div class="project-overlay">
6654                <div class="project-magnify">
6655                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6656                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6657                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6658                  </svg>
6659                </div>
6660              </div>
6661            </div>
6662            <div class="project-info">
6663              <h3 class="project-title">Fred's One Stop Shopping</h3>
6664              
6665                <div class="project-category">WordPress</div>
6666              
6667            </div>
6668          </div>
6669        
6670      
6671        
6672          <div
6673            class="project-item element-item wordpress"
6674            data-category="wordpress"
6675            data-page="1"
6676            
6677          >
6678            <div class="project-image-container">
6679              
6680                <img src="//codendesigner.com/cdn/shop/files/talentcapability-Home-Port_0abf2920-18be-42c0-84b8-f532038063d7.jpg?v=1748931781&amp;width=800" alt="Talent Capability" srcset="//codendesigner.com/cdn/shop/files/talentcapability-Home-Port_0abf2920-18be-42c0-84b8-f532038063d7.jpg?v=1748931781&amp;width=200 200w, //codendesigner.com/cdn/shop/files/talentcapability-Home-Port_0abf2920-18be-42c0-84b8-f532038063d7.jpg?v=1748931781&amp;width=400 400w, //codendesigner.com/cdn/shop/files/talentcapability-Home-Port_0abf2920-18be-42c0-84b8-f532038063d7.jpg?v=1748931781&amp;width=600 600w, //codendesigner.com/cdn/shop/files/talentcapability-Home-Port_0abf2920-18be-42c0-84b8-f532038063d7.jpg?v=1748931781&amp;width=800 800w" width="800" height="436" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="24">
6681              
6682              <div class="project-overlay">
6683                <div class="project-magnify">
6684                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6685                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6686                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6687                  </svg>
6688                </div>
6689              </div>
6690            </div>
6691            <div class="project-info">
6692              <h3 class="project-title">Talent Capability</h3>
6693              
6694                <div class="project-category">WordPress</div>
6695              
6696            </div>
6697          </div>
6698        
6699      
6700        
6701          <div
6702            class="project-item element-item shopify"
6703            data-category="shopify"
6704            data-page="1"
6705            
6706          >
6707            <div class="project-image-container">
6708              
6709                <img src="//codendesigner.com/cdn/shop/files/Judinash-When-Time-Means-Nothing-portfolio.png?v=1700744349&amp;width=800" alt="Judi Nash" srcset="//codendesigner.com/cdn/shop/files/Judinash-When-Time-Means-Nothing-portfolio.png?v=1700744349&amp;width=200 200w, //codendesigner.com/cdn/shop/files/Judinash-When-Time-Means-Nothing-portfolio.png?v=1700744349&amp;width=400 400w, //codendesigner.com/cdn/shop/files/Judinash-When-Time-Means-Nothing-portfolio.png?v=1700744349&amp;width=600 600w, //codendesigner.com/cdn/shop/files/Judinash-When-Time-Means-Nothing-portfolio.png?v=1700744349&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="25">
6710              
6711              <div class="project-overlay">
6712                <div class="project-magnify">
6713                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6714                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6715                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6716                  </svg>
6717                </div>
6718              </div>
6719            </div>
6720            <div class="project-info">
6721              <h3 class="project-title">Judi Nash</h3>
6722              
6723                <div class="project-category">Shopify</div>
6724              
6725            </div>
6726          </div>
6727        
6728      
6729        
6730          <div
6731            class="project-item element-item squarespace"
6732            data-category="squarespace"
6733            data-page="1"
6734            
6735          >
6736            <div class="project-image-container">
6737              
6738                <img src="//codendesigner.com/cdn/shop/files/16_4801b2cd-71c4-4b7c-ac03-976975402ea2.png?v=1676711736&amp;width=800" alt="RILEY GROUP INC" srcset="//codendesigner.com/cdn/shop/files/16_4801b2cd-71c4-4b7c-ac03-976975402ea2.png?v=1676711736&amp;width=200 200w, //codendesigner.com/cdn/shop/files/16_4801b2cd-71c4-4b7c-ac03-976975402ea2.png?v=1676711736&amp;width=400 400w, //codendesigner.com/cdn/shop/files/16_4801b2cd-71c4-4b7c-ac03-976975402ea2.png?v=1676711736&amp;width=600 600w, //codendesigner.com/cdn/shop/files/16_4801b2cd-71c4-4b7c-ac03-976975402ea2.png?v=1676711736&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="26">
6739              
6740              <div class="project-overlay">
6741                <div class="project-magnify">
6742                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6743                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6744                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6745                  </svg>
6746                </div>
6747              </div>
6748            </div>
6749            <div class="project-info">
6750              <h3 class="project-title">RILEY GROUP INC</h3>
6751              
6752                <div class="project-category">Squarespace</div>
6753              
6754            </div>
6755          </div>
6756        
6757      
6758        
6759          <div
6760            class="project-item element-item squarespace"
6761            data-category="squarespace"
6762            data-page="1"
6763            
6764          >
6765            <div class="project-image-container">
6766              
6767                <img src="//codendesigner.com/cdn/shop/files/Wall-Street-Bound-Inc-portfolio.png?v=1700745203&amp;width=800" alt="Wall Street Bound" srcset="//codendesigner.com/cdn/shop/files/Wall-Street-Bound-Inc-portfolio.png?v=1700745203&amp;width=200 200w, //codendesigner.com/cdn/shop/files/Wall-Street-Bound-Inc-portfolio.png?v=1700745203&amp;width=400 400w, //codendesigner.com/cdn/shop/files/Wall-Street-Bound-Inc-portfolio.png?v=1700745203&amp;width=600 600w, //codendesigner.com/cdn/shop/files/Wall-Street-Bound-Inc-portfolio.png?v=1700745203&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="27">
6768              
6769              <div class="project-overlay">
6770                <div class="project-magnify">
6771                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6772                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6773                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6774                  </svg>
6775                </div>
6776              </div>
6777            </div>
6778            <div class="project-info">
6779              <h3 class="project-title">Wall Street Bound</h3>
6780              
6781                <div class="project-category">Squarespace</div>
6782              
6783            </div>
6784          </div>
6785        
6786      
6787        
6788          <div
6789            class="project-item element-item wix"
6790            data-category="wix"
6791            data-page="1"
6792            
6793          >
6794            <div class="project-image-container">
6795              
6796                <img src="//codendesigner.com/cdn/shop/files/Home-Experience-Catalyst.jpg?v=1736317991&amp;width=800" alt="Experience Catalysts" srcset="//codendesigner.com/cdn/shop/files/Home-Experience-Catalyst.jpg?v=1736317991&amp;width=200 200w, //codendesigner.com/cdn/shop/files/Home-Experience-Catalyst.jpg?v=1736317991&amp;width=400 400w, //codendesigner.com/cdn/shop/files/Home-Experience-Catalyst.jpg?v=1736317991&amp;width=600 600w, //codendesigner.com/cdn/shop/files/Home-Experience-Catalyst.jpg?v=1736317991&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="28">
6797              
6798              <div class="project-overlay">
6799                <div class="project-magnify">
6800                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6801                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6802                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6803                  </svg>
6804                </div>
6805              </div>
6806            </div>
6807            <div class="project-info">
6808              <h3 class="project-title">Experience Catalysts</h3>
6809              
6810                <div class="project-category">wix</div>
6811              
6812            </div>
6813          </div>
6814        
6815      
6816        
6817          <div
6818            class="project-item element-item wordpress"
6819            data-category="wordpress"
6820            data-page="1"
6821            
6822          >
6823            <div class="project-image-container">
6824              
6825                <img src="//codendesigner.com/cdn/shop/files/18_7a66b6b2-b878-4a12-8915-3ea3d6aa13ae.png?v=1676711736&amp;width=800" alt="Simply Honey" srcset="//codendesigner.com/cdn/shop/files/18_7a66b6b2-b878-4a12-8915-3ea3d6aa13ae.png?v=1676711736&amp;width=200 200w, //codendesigner.com/cdn/shop/files/18_7a66b6b2-b878-4a12-8915-3ea3d6aa13ae.png?v=1676711736&amp;width=400 400w, //codendesigner.com/cdn/shop/files/18_7a66b6b2-b878-4a12-8915-3ea3d6aa13ae.png?v=1676711736&amp;width=600 600w, //codendesigner.com/cdn/shop/files/18_7a66b6b2-b878-4a12-8915-3ea3d6aa13ae.png?v=1676711736&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="29">
6826              
6827              <div class="project-overlay">
6828                <div class="project-magnify">
6829                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6830                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6831                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6832                  </svg>
6833                </div>
6834              </div>
6835            </div>
6836            <div class="project-info">
6837              <h3 class="project-title">Simply Honey</h3>
6838              
6839                <div class="project-category">WordPress</div>
6840              
6841            </div>
6842          </div>
6843        
6844      
6845        
6846          <div
6847            class="project-item element-item learnworlds"
6848            data-category="learnworlds"
6849            data-page="1"
6850            
6851          >
6852            <div class="project-image-container">
6853              
6854                <img src="//codendesigner.com/cdn/shop/files/impact-ar-Home-final.png?v=1700471394&amp;width=800" alt="Impact - قيادة الوعي الذاتي" srcset="//codendesigner.com/cdn/shop/files/impact-ar-Home-final.png?v=1700471394&amp;width=200 200w, //codendesigner.com/cdn/shop/files/impact-ar-Home-final.png?v=1700471394&amp;width=400 400w, //codendesigner.com/cdn/shop/files/impact-ar-Home-final.png?v=1700471394&amp;width=600 600w, //codendesigner.com/cdn/shop/files/impact-ar-Home-final.png?v=1700471394&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="30">
6855              
6856              <div class="project-overlay">
6857                <div class="project-magnify">
6858                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6859                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6860                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6861                  </svg>
6862                </div>
6863              </div>
6864            </div>
6865            <div class="project-info">
6866              <h3 class="project-title">Impact - قيادة الوعي الذاتي</h3>
6867              
6868                <div class="project-category">LearnWorlds</div>
6869              
6870            </div>
6871          </div>
6872        
6873      
6874        
6875          <div
6876            class="project-item element-item learnworlds"
6877            data-category="learnworlds"
6878            data-page="1"
6879            
6880          >
6881            <div class="project-image-container">
6882              
6883                <img src="//codendesigner.com/cdn/shop/files/Syntax-home.png?v=1695379496&amp;width=800" alt="Syntax Academy" srcset="//codendesigner.com/cdn/shop/files/Syntax-home.png?v=1695379496&amp;width=200 200w, //codendesigner.com/cdn/shop/files/Syntax-home.png?v=1695379496&amp;width=400 400w, //codendesigner.com/cdn/shop/files/Syntax-home.png?v=1695379496&amp;width=600 600w, //codendesigner.com/cdn/shop/files/Syntax-home.png?v=1695379496&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="31">
6884              
6885              <div class="project-overlay">
6886                <div class="project-magnify">
6887                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6888                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6889                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap=
6889"round" />
6890                  </svg>
6891                </div>
6892              </div>
6893            </div>
6894            <div class="project-info">
6895              <h3 class="project-title">Syntax Academy</h3>
6896              
6897                <div class="project-category">LearnWorlds</div>
6898              
6899            </div>
6900          </div>
6901        
6902      
6903        
6904          <div
6905            class="project-item element-item learnworlds"
6906            data-category="learnworlds"
6907            data-page="1"
6908            
6909          >
6910            <div class="project-image-container">
6911              
6912                <img src="//codendesigner.com/cdn/shop/files/millon-slide-image.png?v=1695463767&amp;width=800" alt="Million Creator Academy" srcset="//codendesigner.com/cdn/shop/files/millon-slide-image.png?v=1695463767&amp;width=200 200w, //codendesigner.com/cdn/shop/files/millon-slide-image.png?v=1695463767&amp;width=400 400w, //codendesigner.com/cdn/shop/files/millon-slide-image.png?v=1695463767&amp;width=600 600w, //codendesigner.com/cdn/shop/files/millon-slide-image.png?v=1695463767&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="32">
6913              
6914              <div class="project-overlay">
6915                <div class="project-magnify">
6916                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6917                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6918                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6919                  </svg>
6920                </div>
6921              </div>
6922            </div>
6923            <div class="project-info">
6924              <h3 class="project-title">Million Creator Academy</h3>
6925              
6926                <div class="project-category">LearnWorlds</div>
6927              
6928            </div>
6929          </div>
6930        
6931      
6932        
6933          <div
6934            class="project-item element-item shopify"
6935            data-category="shopify"
6936            data-page="1"
6937            
6938          >
6939            <div class="project-image-container">
6940              
6941                <img src="//codendesigner.com/cdn/shop/files/14_0bc97b67-e033-40ba-84f5-5002b89c9457.png?v=1676711736&amp;width=800" alt="OMEGA ONLINE" srcset="//codendesigner.com/cdn/shop/files/14_0bc97b67-e033-40ba-84f5-5002b89c9457.png?v=1676711736&amp;width=200 200w, //codendesigner.com/cdn/shop/files/14_0bc97b67-e033-40ba-84f5-5002b89c9457.png?v=1676711736&amp;width=400 400w, //codendesigner.com/cdn/shop/files/14_0bc97b67-e033-40ba-84f5-5002b89c9457.png?v=1676711736&amp;width=600 600w, //codendesigner.com/cdn/shop/files/14_0bc97b67-e033-40ba-84f5-5002b89c9457.png?v=1676711736&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="33">
6942              
6943              <div class="project-overlay">
6944                <div class="project-magnify">
6945                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6946                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6947                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6948                  </svg>
6949                </div>
6950              </div>
6951            </div>
6952            <div class="project-info">
6953              <h3 class="project-title">OMEGA ONLINE</h3>
6954              
6955                <div class="project-category">Shopify</div>
6956              
6957            </div>
6958          </div>
6959        
6960      
6961        
6962          <div
6963            class="project-item element-item wordpress"
6964            data-category="wordpress"
6965            data-page="1"
6966            
6967          >
6968            <div class="project-image-container">
6969              
6970                <img src="//codendesigner.com/cdn/shop/files/2_bca795ea-0ca0-4106-9e83-cdb9ff7e62e7.png?v=1676711722&amp;width=800" alt="Adzimpact" srcset="//codendesigner.com/cdn/shop/files/2_bca795ea-0ca0-4106-9e83-cdb9ff7e62e7.png?v=1676711722&amp;width=200 200w, //codendesigner.com/cdn/shop/files/2_bca795ea-0ca0-4106-9e83-cdb9ff7e62e7.png?v=1676711722&amp;width=400 400w, //codendesigner.com/cdn/shop/files/2_bca795ea-0ca0-4106-9e83-cdb9ff7e62e7.png?v=1676711722&amp;width=600 600w, //codendesigner.com/cdn/shop/files/2_bca795ea-0ca0-4106-9e83-cdb9ff7e62e7.png?v=1676711722&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="34">
6971              
6972              <div class="project-overlay">
6973                <div class="project-magnify">
6974                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
6975                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
6976                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
6977                  </svg>
6978                </div>
6979              </div>
6980            </div>
6981            <div class="project-info">
6982              <h3 class="project-title">Adzimpact</h3>
6983              
6984                <div class="project-category">WordPress</div>
6985              
6986            </div>
6987          </div>
6988        
6989      
6990        
6991          <div
6992            class="project-item element-item wordpress"
6993            data-category="wordpress"
6994            data-page="1"
6995            
6996          >
6997            <div class="project-image-container">
6998              
6999                <img src="//codendesigner.com/cdn/shop/files/abhoney.com.au-Home-WP.png?v=1747562208&amp;width=800" alt="AB&#39;s Honey" srcset="//codendesigner.com/cdn/shop/files/abhoney.com.au-Home-WP.png?v=1747562208&amp;width=200 200w, //codendesigner.com/cdn/shop/files/abhoney.com.au-Home-WP.png?v=1747562208&amp;width=400 400w, //codendesigner.com/cdn/shop/files/abhoney.com.au-Home-WP.png?v=1747562208&amp;width=600 600w, //codendesigner.com/cdn/shop/files/abhoney.com.au-Home-WP.png?v=1747562208&amp;width=800 800w" width="800" height="2061" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="35">
7000              
7001              <div class="project-overlay">
7002                <div class="project-magnify">
7003                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
7004                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
7005                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
7006                  </svg>
7007                </div>
7008              </div>
7009            </div>
7010            <div class="project-info">
7011              <h3 class="project-title">AB's Honey</h3>
7012              
7013                <div class="project-category">WordPress</div>
7014              
7015            </div>
7016          </div>
7017        
7018      
7019        
7020          <div
7021            class="project-item element-item wordpress"
7022            data-category="wordpress"
7023            data-page="1"
7024            
7025          >
7026            <div class="project-image-container">
7027              
7028                <img src="//codendesigner.com/cdn/shop/files/4_d6e19fc2-1147-4312-803d-ce8d056b515d.png?v=1676711722&amp;width=800" alt="Community COVID Counter" srcset="//codendesigner.com/cdn/shop/files/4_d6e19fc2-1147-4312-803d-ce8d056b515d.png?v=1676711722&amp;width=200 200w, //codendesigner.com/cdn/shop/files/4_d6e19fc2-1147-4312-803d-ce8d056b515d.png?v=1676711722&amp;width=400 400w, //codendesigner.com/cdn/shop/files/4_d6e19fc2-1147-4312-803d-ce8d056b515d.png?v=1676711722&amp;width=600 600w, //codendesigner.com/cdn/shop/files/4_d6e19fc2-1147-4312-803d-ce8d056b515d.png?v=1676711722&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="36">
7029              
7030              <div class="project-overlay">
7031                <div class="project-magnify">
7032                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
7033                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
7034                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
7035                  </svg>
7036                </div>
7037              </div>
7038            </div>
7039            <div class="project-info">
7040              <h3 class="project-title">Community COVID Counter</h3>
7041              
7042                <div class="project-category">WordPress</div>
7043              
7044            </div>
7045          </div>
7046        
7047      
7048        
7049          <div
7050            class="project-item element-item wordpress"
7051            data-category="wordpress"
7052            data-page="1"
7053            
7054          >
7055            <div class="project-image-container">
7056              
7057                <img src="//codendesigner.com/cdn/shop/files/5_0f5335f1-ca8a-4bed-b5cf-8d0c0dd64181.png?v=1676711722&amp;width=800" alt="Creative &amp; co" srcset="//codendesigner.com/cdn/shop/files/5_0f5335f1-ca8a-4bed-b5cf-8d0c0dd64181.png?v=1676711722&amp;width=200 200w, //codendesigner.com/cdn/shop/files/5_0f5335f1-ca8a-4bed-b5cf-8d0c0dd64181.png?v=1676711722&amp;width=400 400w, //codendesigner.com/cdn/shop/files/5_0f5335f1-ca8a-4bed-b5cf-8d0c0dd64181.png?v=1676711722&amp;width=600 600w, //codendesigner.com/cdn/shop/files/5_0f5335f1-ca8a-4bed-b5cf-8d0c0dd64181.png?v=1676711722&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="37">
7058              
7059              <div class="project-overlay">
7060                <div class="project-magnify">
7061                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
7062                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
7063                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
7064                  </svg>
7065                </div>
7066              </div>
7067            </div>
7068            <div class="project-info">
7069              <h3 class="project-title">Creative & co</h3>
7070              
7071                <div class="project-category">WordPress</div>
7072              
7073            </div>
7074          </div>
7075        
7076      
7077        
7078          <div
7079            class="project-item element-item wordpress"
7080            data-category="wordpress"
7081            data-page="1"
7082            
7083          >
7084            <div class="project-image-container">
7085              
7086                <img src="//codendesigner.com/cdn/shop/files/10_1b67068f-f049-40fb-ad4c-b98128b0b37c.png?v=1676711722&amp;width=800" alt="ILP Academy" srcset="//codendesigner.com/cdn/shop/files/10_1b67068f-f049-40fb-ad4c-b98128b0b37c.png?v=1676711722&amp;width=200 200w, //codendesigner.com/cdn/shop/files/10_1b67068f-f049-40fb-ad4c-b98128b0b37c.png?v=1676711722&amp;width=400 400w, //codendesigner.com/cdn/shop/files/10_1b67068f-f049-40fb-ad4c-b98128b0b37c.png?v=1676711722&amp;width=600 600w, //codendesigner.com/cdn/shop/files/10_1b67068f-f049-40fb-ad4c-b98128b0b37c.png?v=1676711722&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="38">
7087              
7088              <div class="project-overlay">
7089                <div class="project-magnify">
7090                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
7091                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
7092                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
7093                  </svg>
7094                </div>
7095              </div>
7096            </div>
7097            <div class="project-info">
7098              <h3 class="project-title">ILP Academy</h3>
7099              
7100                <div class="project-category">wordpress</div>
7101              
7102            </div>
7103          </div>
7104        
7105      
7106        
7107          <div
7108            class="project-item element-item wordpress"
7109            data-category="wordpress"
7110            data-page="1"
7111            
7112          >
7113            <div class="project-image-container">
7114              
7115                <img src="//codendesigner.com/cdn/shop/files/12_9b67e49c-9c3d-49e6-98e3-1f8bb8c081b3.png?v=1676711736&amp;width=800" alt="ILP Learning &amp; Development MARKETPLACE" srcset="//codendesigner.com/cdn/shop/files/12_9b67e49c-9c3d-49e6-98e3-1f8bb8c081b3.png?v=1676711736&amp;width=200 200w, //codendesigner.com/cdn/shop/files/12_9b67e49c-9c3d-49e6-98e3-1f8bb8c081b3.png?v=1676711736&amp;width=400 400w, //codendesigner.com/cdn/shop/files/12_9b67e49c-9c3d-49e6-98e3-1f8bb8c081b3.png?v=1676711736&amp;width=600 600w, //codendesigner.com/cdn/shop/files/12_9b67e49c-9c3d-49e6-98e3-1f8bb8c081b3.png?v=1676711736&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="39">
7116              
7117              <div class="project-overlay">
7118                <div class="project-magnify">
7119                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
7120                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
7121                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
7122                  </svg>
7123                </div>
7124              </div>
7125            </div>
7126            <div class="project-info">
7127              <h3 class="project-title">ILP Learning & Development MARKETPLACE</h3>
7128              
7129                <div class="project-category">wordpress</div>
7130              
7131            </div>
7132          </div>
7133        
7134      
7135        
7136          <div
7137            class="project-item element-item wordpress"
7138            data-category="wordpress"
7139            data-page="1"
7140            
7141          >
7142            <div class="project-image-container">
7143              
7144                <img src="//codendesigner.com/cdn/shop/files/17_42881cf3-ec8a-49ca-9abf-35d57da26555.png?v=1676711736&amp;width=800" alt="Schraft&#39;s 2.0" srcset="//codendesigner.com/cdn/shop/files/17_42881cf3-ec8a-49ca-9abf-35d57da26555.png?v=1676711736&amp;width=200 200w, //codendesigner.com/cdn/shop/files/17_42881cf3-ec8a-49ca-9abf-35d57da26555.png?v=1676711736&amp;width=400 400w, //codendesigner.com/cdn/shop/files/17_42881cf3-ec8a-49ca-9abf-35d57da26555.png?v=1676711736&amp;width=600 600w, //codendesigner.com/cdn/shop/files/17_42881cf3-ec8a-49ca-9abf-35d57da26555.png?v=1676711736&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="40">
7145              
7146              <div class="project-overlay">
7147                <div class="project-magnify">
7148                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
7149                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
7150                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
7151                  </svg>
7152                </div>
7153              </div>
7154            </div>
7155            <div class="project-info">
7156              <h3 class="project-title">Schraft's 2.0</h3>
7157              
7158                <div class="project-category">WordPress</div>
7159              
7160            </div>
7161          </div>
7162        
7163      
7164        
7165          <div
7166            class="project-item element-item wordpress"
7167            data-category="wordpress"
7168            data-page="1"
7169            
7170          >
7171            <div class="project-image-container">
7172              
7173                <img src="//codendesigner.com/cdn/shop/files/19_f314389d-aa4e-4825-b2cb-93a05f1eceeb.png?v=1676711736&amp;width=800" alt="The ReThink Group" srcset="//codendesigner.com/cdn/shop/files/19_f314389d-aa4e-4825-b2cb-93a05f1eceeb.png?v=1676711736&amp;width=200 200w, //codendesigner.com/cdn/shop/files/19_f314389d-aa4e-4825-b2cb-93a05f1eceeb.png?v=1676711736&amp;width=400 400w, //codendes
7173igner.com/cdn/shop/files/19_f314389d-aa4e-4825-b2cb-93a05f1eceeb.png?v=1676711736&amp;width=600 600w, //codendesigner.com/cdn/shop/files/19_f314389d-aa4e-4825-b2cb-93a05f1eceeb.png?v=1676711736&amp;width=800 800w" width="800" height="498" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="41">
7174              
7175              <div class="project-overlay">
7176                <div class="project-magnify">
7177                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
7178                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
7179                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
7180                  </svg>
7181                </div>
7182              </div>
7183            </div>
7184            <div class="project-info">
7185              <h3 class="project-title">The ReThink Group</h3>
7186              
7187                <div class="project-category">WordPress</div>
7188              
7189            </div>
7190          </div>
7191        
7192      
7193        
7194          <div
7195            class="project-item element-item learnworlds"
7196            data-category="learnworlds"
7197            data-page="1"
7198            
7199          >
7200            <div class="project-image-container">
7201              
7202                <img src="//codendesigner.com/cdn/shop/files/ASN-About-Us-LearnWorlds.png?v=1747139845&amp;width=800" alt="Asian Sustainability Network" srcset="//codendesigner.com/cdn/shop/files/ASN-About-Us-LearnWorlds.png?v=1747139845&amp;width=200 200w, //codendesigner.com/cdn/shop/files/ASN-About-Us-LearnWorlds.png?v=1747139845&amp;width=400 400w, //codendesigner.com/cdn/shop/files/ASN-About-Us-LearnWorlds.png?v=1747139845&amp;width=600 600w, //codendesigner.com/cdn/shop/files/ASN-About-Us-LearnWorlds.png?v=1747139845&amp;width=800 800w" width="800" height="5284" loading="lazy" class="project-image" sizes="(max-width: 768px) 100vw, 800px" data-project-index="42">
7203              
7204              <div class="project-overlay">
7205                <div class="project-magnify">
7206                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
7207                    <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
7208                    <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
7209                  </svg>
7210                </div>
7211              </div>
7212            </div>
7213            <div class="project-info">
7214              <h3 class="project-title">Asian Sustainability Network</h3>
7215              
7216                <div class="project-category">LearnWorlds</div>
7217              
7218            </div>
7219          </div>
7220        
7221      
7222    </div>
7223    
7224    <!-- Pagination -->
7225    <div class="project-gallery-pagination">
7226      <button class="pagination-prev" aria-label="Previous page" disabled>
7227        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
7228          <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
7229        </svg>
7230      </button>
7231      <div class="pagination-numbers"></div>
7232      <button class="pagination-next" aria-label="Next page">
7233        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
7234          <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
7235        </svg>
7236      </button>
7237    </div>
7238  </div>
7239</div>
7240
7241<!-- Project Modal -->
7242<div id="projectModal" class="project-modal">
7243  <div class="project-modal-backdrop"></div>
7244  <div class="project-modal-content">
7245    <button type="button" class="project-modal-close" aria-label="Close">
7246      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
7247        <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
7248      </svg>
7249    </button>
7250
7251    <div class="project-modal-body">
7252      <div class="project-modal-image-container">
7253        <div class="project-slideshow">
7254          <!-- Slides will be dynamically generated -->
7255        </div>
7256        
7257        <div class="slideshow-controls">
7258          <button type="button" class="slideshow-prev" aria-label="Previous slide">
7259            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
7260              <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
7261            </svg>
7262          </button>
7263          <button type="button" class="slideshow-next" aria-label="Next slide">
7264            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
7265              <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
7266            </svg>
7267          </button>
7268        </div>
7269        
7270        <div class="slideshow-thumbnails">
7271          <!-- Thumbnails will be dynamically generated -->
7272        </div>
7273      </div>
7274
7275      <div class="project-modal-info">
7276        <div class="project-modal-header">
7277          <h3 class="project-modal-title"></h3>
7278          <div class="project-modal-category"></div>
7279        </div>
7280
7281        <div class="project-modal-description"></div>
7282
7283        <div class="project-modal-link-container">
7284          <a href="#" class="project-modal-link" target="_blank" rel="noopener">View Project</a>
7285        </div>
7286      </div>
7287    </div>
7288
7289    <div class="project-modal-navigation">
7290      <button type="button" class="project-modal-prev" aria-label="Previous project">
7291        Previous Project
7292      </button>
7293      <button type="button" class="project-modal-next" aria-label="Next project">
7294        Next Project
7295      </button>
7296    </div>
7297  </div>
7298</div>
7299
7300<style>
7301  /* Base Styles */
7302  .project-gallery-wrapper {
7303    background-color: var(--background-color);
7304    padding: 80px 0;
7305  }
7306
7307  .project-gallery-container {
7308    max-width: 1600px;
7309    margin: 0 auto;
7310    padding: 0 25px;
7311  }
7312
7313  /* Header Styles */
7314  .project-gallery-header {
7315    text-align: center;
7316    margin-bottom: 48px;
7317  }
7318
7319  .project-gallery-heading {
7320    color: var(--heading-color);
7321    font-size: 36px;
7322    font-weight: 700;
7323    margin-bottom: 16px;
7324    letter-spacing: -0.02em;
7325  }
7326
7327  .project-gallery-description {
7328    color: var(--text-color);
7329    font-size: 18px;
7330    line-height: 1.6;
7331    max-width: 700px;
7332    margin: 0 auto;
7333  }
7334
7335  /* Gallery Grid Layout */
7336  .grid {
7337    max-width: 100%;
7338    margin: 40px auto;
7339    display: flex;
7340    flex-wrap: wrap;
7341    gap: var(--gap);
7342  }
7343
7344  .project-gallery-grid,
7345  .project-gallery-masonry {
7346    display: flex;
7347    flex-wrap: wrap;
7348  }
7349  
7350  .project-gallery.grid.project-gallery-grid {
7351    justify-content: space-evenly;
7352  }
7353
7354  .element-item {
7355    width: calc((100% / var(--columns)) - var(--gap));
7356    margin-bottom: var(--gap);
7357    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
7358    will-change: opacity, transform;
7359    backface-visibility: hidden;
7360    transform: translateZ(0);
7361  }
7362
7363  .project-item {
7364    position: relative;
7365    overflow: hidden;
7366    border-radius: 12px;
7367    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
7368    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
7369    cursor: pointer;
7370    background-color: #fff;
7371  }
7372
7373  .project-item:hover {
7374    transform: translateY(-4px);
7375    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
7376  }
7377
7378  .project-image-container {
7379    position: relative;
7380    width: 100%;
7381    padding-bottom: 75%; /* 4:3 aspect ratio */
7382    overflow: hidden;
7383  }
7384
7385  .project-image {
7386    position: absolute;
7387    top: 0;
7388    left: 0;
7389    width: 100%;
7390    height: 100%;
7391    object-fit: cover;
7392    object-position: top;
7393    transition: transform 0.5s ease;
7394  }
7395
7396  .project-item:hover .project-image {
7397    transform: scale(1.05);
7398  }
7399
7400  .project-overlay {
7401    position: absolute;
7402    top: 0;
7403    left: 0;
7404    width: 100%;
7405    height: 100%;
7406    background: rgba(0, 0, 0, 0.4);
7407    display: flex;
7408    align-items: center;
7409    justify-content: center;
7410    opacity: 0;
7411    transition: opacity 0.3s ease;
7412  }
7413
7414  .project-item:hover .project-overlay {
7415    opacity: 1;
7416  }
7417  
7418  .project-magnify {
7419    display: flex;
7420    align-items: center;
7421    justify-content: center;
7422    width: 60px;
7423    height: 60px;
7424    border-radius: 50%;
7425    background-color: rgba(255, 255, 255, 0.9);
7426    color: #000;
7427    transform: scale(0.8);
7428    transition: transform 0.3s ease;
7429  }
7430  
7431  .project-item:hover .project-magnify {
7432    transform: scale(1);
7433  }
7434
7435  .project-info {
7436    padding: 16px;
7437  }
7438
7439  .project-title {
7440    color: var(--heading-color);
7441    font-size: 18px;
7442    font-weight: 600;
7443    margin-bottom: 4px;
7444  }
7445
7446  .project-category {
7447    color: var(--text-color);
7448    opacity: 0.8;
7449    font-size: 14px;
7450    font-weight: 500;
7451  }
7452
7453  /* Modal Styles */
7454  .project-modal {
7455    position: fixed;
7456    top: 0;
7457    left: 0;
7458    width: 100%;
7459    height: 100%;
7460    z-index: 1000;
7461    display: none;
7462    align-items: center;
7463    justify-content: center;
7464  }
7465
7466  .project-modal.active {
7467    display: flex;
7468  }
7469
7470  .project-modal-backdrop {
7471    position: absolute;
7472    top: 0;
7473    left: 0;
7474    width: 100%;
7475    height: 100%;
7476    background-color: rgba(0, 0, 0, 0.8);
7477    animation: fadeIn 0.3s ease forwards;
7478  }
7479
7480  .project-modal-content {
7481    position: relative;
7482    width: 90%;
7483    max-width: 1100px;
7484    max-height: 90vh;
7485    overflow: auto;
7486    background-color: #fff;
7487    border-radius: 12px;
7488    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.3);
7489    z-index: 1;
7490    animation: modalEnter 0.4s ease forwards;
7491  }
7492
7493  .project-modal-close {
7494    position: absolute;
7495    top: 16px;
7496    right: 16px;
7497    width: 40px;
7498    height: 40px;
7499    background: rgba(0, 0, 0, 0.6);
7500    border: none;
7501    border-radius: 50%;
7502    color: #fff;
7503    display: flex;
7504    align-items: center;
7505    justify-content: center;
7506    cursor: pointer;
7507    z-index: 10;
7508    transition: background-color 0.2s ease;
7509  }
7510
7511  .project-modal-close:hover {
7512    background: rgba(0, 0, 0, 0.8);
7513  }
7514
7515  .project-modal-body {
7516    display: flex;
7517    flex-direction: column;
7518  }
7519
7520  .project-modal-image-container {
7521    width: 100%;
7522    position: relative;
7523    overflow: visible;
7524  }
7525  
7526  .project-slideshow {
7527    width: 100%;
7528    position: relative;
7529    padding-bottom: 0;
7530    max-height: 70vh;
7531    overflow-y: auto;
7532    scrollbar-width: thin;
7533  }
7534  
7535  /* Custom scrollbar for webkit browsers */
7536  .project-slideshow::-webkit-scrollbar {
7537    width: 6px;
7538  }
7539  .project-slideshow::-webkit-scrollbar-track {
7540    background: #f1f1f1;
7541    border-radius: 4px;
7542  }
7543  .project-slideshow::-webkit-scrollbar-thumb {
7544    background: #888;
7545    border-radius: 4px;
7546  }
7547  .project-slideshow::-webkit-scrollbar-thumb:hover {
7548    background: #555;
7549  }
7550  
7551  .slideshow-slide {
7552    position: relative;
7553    width: 100%;
7554    opacity: 0;
7555    transition: opacity 0.6s ease;
7556    display: none;
7557  }
7558  
7559  .slideshow-slide.active {
7560    opacity: 1;
7561    display: block;
7562  }
7563  
7564  .slideshow-image {
7565    width: 100%;
7566    height: auto;
7567    max-height: none;
7568    object-fit: contain;
7569  }
7570  
7571  .slideshow-controls {
7572    position: absolute;
7573    top: 50%;
7574    left: 0;
7575    right: 0;
7576    transform: translateY(-50%);
7577    display: flex;
7578    justify-content: space-between;
7579    padding: 0 16px;
7580    pointer-events: none;
7581  }
7582  
7583  .slideshow-prev,
7584  .slideshow-next {
7585    width: 44px;
7586    height: 44px;
7587    background: rgba(0, 0, 0, 0.6);
7588    border: none;
7589    border-radius: 50%;
7590    color: #fff;
7591    display: flex;
7592    align-items: center;
7593    justify-content: center;
7594    cursor: pointer;
7595    transition: background-color 0.2s ease;
7596    pointer-events: auto;
7597  }
7598  
7599  .slideshow-prev:hover,
7600  .slideshow-next:hover {
7601    background: rgba(0, 0, 0, 0.8);
7602  }
7603  
7604  .slideshow-thumbnails {
7605    display: flex;
7606    gap: 8px;
7607    margin-top: 16px;
7608    overflow-x: auto;
7609    padding-bottom: 8px;
7610  }
7611  
7612  .slideshow-thumbnails::-webkit-scrollbar {
7613    height: 6px;
7614  }
7615  
7616  .slideshow-thumbnails::-webkit-scrollbar-track {
7617    background: #f1f1f1;
7618    border-radius: 3px;
7619  }
7620  
7621  .slideshow-thumbnails::-webkit-scrollbar-thumb {
7622    background: #888;
7623    border-radius: 3px;
7624  }
7625  
7626  .slideshow-thumbnails::-webkit-scrollbar-thumb:hover {
7627    background: #555;
7628  }
7629  
7630  .slideshow-thumbnail {
7631    width: 80px;
7632    height: 60px;
7633    flex-shrink: 0;
7634    cursor: pointer;
7635    border-radius: 6px;
7636    overflow: hidden;
7637    border: 2px solid transparent;
7638    transition: border-color 0.2s ease;
7639  }
7640  
7641  .slideshow-thumbnail.active {
7642    border-color: var(--heading-color);
7643  }
7644  
7645  .slideshow-thumbnail img {
7646    width: 100%;
7647    height: 100%;
7648    object-fit: cover;
7649  }
7650
7651  .project-modal-info {
7652    padding: 32px;
7653  }
7654
7655  .project-modal-header {
7656    margin-bottom: 16px;
7657  }
7658
7659  .project-modal-title {
7660    font-size: 24px;
7661    font-weight: 700;
7662    margin-bottom: 8px;
7663    color: #1a1a1a;
7664  }
7665
7666  .project-modal-category {
7667    font-size: 16px;
7668    color: #666;
7669    font-weight: 500;
7670  }
7671
7672  .project-modal-description {
7673    font-size: 16px;
7674    line-height: 1.6;
7675    color: #4a4a4a;
7676    margin-bottom: 24px;
7677  }
7678
7679  .project-modal-link-container {
7680    margin-top: 24px;
7681  }
7682
7683  .project-modal-link {
7684    display: inline-block;
7685    padding: 12px 24px;
7686    background-color: #2563eb;
7687    color: #fff;
7688    font-weight: 600;
7689    text-decoration: none;
7690    border-radius: 6px;
7691    transition: background-color 0.2s ease;
7692  }
7693
7694  .project-modal-link:hover {
7695    background-color: #1d4ed8;
7696  }
7697
7698  .project-modal-navigation {
7699    position: absolute;
7700    bottom: 16px;
7701    right: 16px;
7702    display: flex;
7703    gap: 12px;
7704  }
7705
7706  .project-modal-prev,
7707  .project-modal-next {
7708    width: auto;
7709    height: auto;
7710    padding: 10px 16px;
7711    background: rgba(0, 0, 0, 0.6);
7712    border: none;
7713    border-radius: 6px;
7714    color: #fff;
7715    display: flex;
7716    align-items: center;
7717    justify-content: center;
7718    cursor: pointer;
7719    transition: background-color 0.2s ease;
7720    font-size: 14px;
7721    font-weight: 600;
7722    min-width: 130px;
7723  }
7724
7725  .project-modal-prev:hover,
7726  .project-modal-next:hover {
7727    background-color: rgba(0, 0, 0, 0.8);
7728  }
7729  
7730  /* Visual indicator for scrollable content */
7731  .project-slideshow.scrollable::after {
7732    content: "";
7733    position: absolute;
7734    bottom: 16px;
7735    left: 50%;
7736    transform: translateX(-50%);
7737    width: 40px;
7738    height: 40px;
7739    background-color: #FF5722; /* Bold orange color */
7740    border: 2px solid rgba(255, 255, 255, 0.8);
7741    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
7742    border-radius: 50%;
7743    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M19 12l-7 7-7-7'/%3E%3C/svg%3E");
7744    background-position: center;
7745    background-repeat: no-repeat;
7746    background-size: 60%;
7747    pointer-events: none;
7748    opacity: 0.95;
7749    animation: pulse 1.5s infinite;
7750    z-index: 10;
7751    transition: transform 0.3s ease, background-color 0.3s ease;
7752  }
7753  
7754  /* Change opacity on hover but keep it visible */
7755  .project-slideshow:hover.scrollable::after {
7756    opacity: 0.9;
7757    transform: translateX(-50%) scale(1.1);
7758    background-color: #FF7043; /* Lighter orange on hover */
7759  }
7760  
7761  @keyframes pulse {
7762    0% {
7763      transform: translateX(-50%) translateY(0);
7764      opacity: 0.9;
7765    }
7766    50% {
7767      transform: translateX(-50%) translateY(10px);
7768      opacity: 1;
7769    }
7770    100% {
7771      transform: translateX(-50%) translateY(0);
7772      opacity: 0.9;
7773    }
7774  }
7775
7776  /* Animations */
7777  @keyframes fadeIn {
7778    from {
7779      opacity: 0;
7780    }
7781    to {
7782      opacity: 1;
7783    }
7784  }
7785  
7786  @keyframes pulse {
7787    0% {
7788      transform: translateX(-50%) translateY(0);
7789      opacity: 0.7;
7790    }
7791    50% {
7792      transform: translateX(-50%) translateY(10px);
7793      opacity: 1;
7794    }
7795    100% {
7796      transform: translateX(-50%) translateY(0);
7797      opacity: 0.7;
7798    }
7799  }
7800
7801  @keyframes modalEnter {
7802    from {
7803      opacity: 0;
7804      transform: scale(0.95);
7805    }
7806    to {
7807      opacity: 1;
7808      transform: scale(1);
7809    }
7810  }
7811
7812  /* Media Queries */
7813  @media (min-width: 768px) {
7814    .project-modal-body {
7815      flex-direction: row;
7816    }
7817
7818    .project-modal-image-container {
7819      width: 60%;
7820      height: auto;
7821      min-height: 400px;
7822    }
7823
7824    .project-modal-info {
7825      width: 40%;
7826    }
7827    
7828    .slideshow-thumbnails {
7829      max-width: 100%;
7830    }
7831    
7832    .project-slideshow {
7833      max-height: 75vh;
7834    }
7835  }
7836  
7837  @media (max-width: 1024px) {
7838    .project-gallery-wrapper {
7839      padding: 60px 0;
7840    }
7841
7842    .project-gallery-heading {
7843      font-size: 32px;
7844    }
7845
7846    .project-gallery-description {
7847      font-size: 16px;
7848    }
7849
7850    .project-gallery-grid,
7851    .project-gallery-masonry {
7852      grid-template-columns: repeat(min(var(--columns), 3), 1fr);
7853    }
7854    
7855    .project-title {
7856      font-size: 16px;
7857    }
7858  }
7859
7860  @media (max-width: 768px) {
7861    .project-gallery-wrapper {
7862      padding: 40px 0;
7863    }
7864
7865    .project-gallery-header {
7866      margin-bottom: 32px;
7867    }
7868
7869    .project-gallery-heading {
7870      font-size: 28px;
7871    }
7872
7873    .project-gallery-grid,
7874    .project-gallery-masonry {
7875      grid-template-columns: repeat(min(var(--columns), 2), 1fr);
7876    }
7877
7878    .project-modal-image-container {
7879      padding-bottom: 0;
7880    }
7881
7882    .filters button {
7883      padding: 5px 10px;
7884      margin: 5px;
7885    }
7886
7887    .element-item {
7888      width: calc((100% / var(--columns-mobile)) - var(--gap));
7889    }
7890    
7891    .project-info {
7892      padding: 12px;
7893    }
7894    
7895    .project-title {
7896      font-size: 15px;
7897    }
7898    
7899    .project-category {
7900      font-size: 13px;
7901    }
7902    
7903    .slideshow-thumbnails {
7904      justify-content: center;
7905    }
7906    
7907    .slideshow-thumbnail {
7908      width: 70px;
7909      height: 50px;
7910    }
7911
7912    .project-modal-prev,
7913    .project-modal-next {
7914      padding: 8px 12px;
7915      font-size: 13px;
7916      min-width: auto;
7917    }
7918  }
7919
7920  @media (max-width: 480px) {
7921    .project-gallery-grid,
7922    .project-gallery-masonry {
7923      grid-template-columns: 1fr;
7924    }
7925
7926    .project-gallery-container {
7927      padding: 0 16px;
7928    }
7929
7930    .project-modal-content {
7931      width: 95%;
7932    }
7933
7934    .project-modal-info {
7935      padding: 24px 16px;
7936    }
7937
7938    .filters {
7939      display: flex;
7940      justify-content: center;
7941      flex-wrap: wrap;
7942    }
7943    
7944    .slideshow-thumbnail {
7945      width: 60px;
7946      height: 45px;
7947    }
7948  }
7949
7950  /* Animation for filtering */
7951  .element-item {
7952    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
7953  }
7954  
7955  /* Filter Buttons Styles */
7956  .project-filters {
7957    margin-top: 40px;
7958    display: flex;
7959    flex-wrap: wrap;
7960    justify-content: center;
7961    gap: 12px;
7962  }
7963  
7964  .filter-button,
7965  .filters button {
7966    padding: 10px 20px;
7967    margin: 0;
7968    background-color: rgba(0, 0, 0, 0.1);
7969    border: none;
7970    border-radius: 10px;
7971    transition: 150ms;
7972    color: var(--text-color);
7973    font-size: 16px;
7974    line-height: 1.2;
7975    font-weight: 700;
7976    position: relative;
7977    outline: none;
7978    cursor: pointer;
7979    text-align: center;
7980    min-width: 80px;
7981    white-space: nowrap;
7982  }
7983  
7984  .filter-button.is-checked,
7985  .filters button.is-checked {
7986    background-color: var(--heading-color);
7987    color: #fff;
7988  }
7989  
7990  .filter-button:hover:not(.is-checked),
7991  .filters button:hover:not(.is-checked) {
7992    background-color: rgba(0, 0, 0, 0.15);
7993  }
7994  
7995  /* Media Queries for Filter Buttons */
7996  @media (max-width: 768px) {
7997    .project-filters {
7998      gap: 8px;
7999    }
8000    
8001    .filter-button,
8002    .filters button {
8003      padding: 8px 16px;
8004      font-size: 14px;
8005      min-width: 70px;
8006    }
8007  }
8008  
8009  @media (max-width: 480px) {
8010    .project-filters {
8011      gap: 6px;
8012      margin-top: 30px;
8013    }
8014    
8015    .filter-button,
8016    .filters button {
8017      padding: 6px 12px;
8018      font-size: 13px;
8019      border-radius: 8px;
8020      min-width: 60px;
8021    }
8022  }
8023
8024  /* Pagination Styles */
8025  .project-gallery-pagination {
8026    display: flex;
8027    justify-content: center;
8028    align-items: center;
8029    margin-top: 40px;
8030    gap: 12px;
8031  }
8032  
8033  .pagination-numbers {
8034    display: flex;
8035    gap: 8px;
8036  }
8037  
8038  .pagination-number {
8039    display: flex;
8040    align-items: center;
8041    justify-content: center;
8042    width: 40px;
8043    height: 40px;
8044    border-radius: 8px;
8045    background-color: rgba(0, 0, 0, 0.1);
8046    color: var(--text-color);
8047    font-weight: 700;
8048    cursor: pointer;
8049    transition: background-color 0.2s ease, color 0.2s ease;
8050  }
8051  
8052  .pagination-number.active {
8053    background-color: var(--heading-color);
8054    color: #fff;
8055  }
8056  
8057  .pagination-prev,
8058  .pagination-next {
8059    display: flex;
8060    align-items: center;
8061    justify-content: center;
8062    width: 40px;
8063    height: 40px;
8064    border-radius: 8px;
8065    background-color: rgba(0, 0, 0, 0.1);
8066    color: var(--text-color);
8067    border: none;
8068    cursor: pointer;
8069    transition: background-color 0.2s ease, opacity 0.2s ease;
8070  }
8071  
8072  .pagination-prev:hover:not([disabled]),
8073  .pagination-next:hover:not([disabled]),
8074  .pagination-number:hover:not(.active) {
8075    background-color: rgba(0, 0, 0, 0.15);
8076  }
8077  
8078  .pagination-prev[disabled],
8079  .pagination-next[disabled] {
8080    opacity: 0.5;
8081    cursor: not-allowed;
8082  }
8083  
8084  /* Media Queries for Pagination */
8085  @media (max-width: 768px) {
8086    .project-gallery-pagination {
8087      margin-top: 30px;
8088      gap: 10px;
8089    }
8090    
8091    .pagination-numbers {
8092      gap: 6px;
8093    }
8094    
8095    .pagination-number,
8096    .pagination-prev,
8097    .pagination-next {
8098      width: 36px;
8099      height: 36px;
8100      font-size: 14px;
8101    }
8102  }
8103  
8104  @media (max-width: 480px) {
8105    .project-gallery-pagination {
8106      margin-top: 24px;
8107      gap: 8px;
8108    }
8109    
8110    .pagination-numbers {
8111      gap: 4px;
8112    }
8113    
8114    .pagination-number,
8115    .pagination-prev,
8116    .pagination-next {
8117      width: 32px;
8118      height: 32px;
8119      font-size: 13px;
8120      border-radius: 6px;
8121    }
8122  }
8123
8124  /* Add video styles */
8125  .project-video-wrapper {
8126    position: absolute;
8127    top: 0;
8128    left: 0;
8129    width: 100%;
8130    height: 100%;
8131    overflow: hidden;
8132  }
8133
8134  .project-video {
8135    position: absolute;
8136    top: 0;
8137    left: 0;
8138    width: 100%;
8139    height: 100%;
8140    object-fit: cover;
8141    transition: transform 0.5s ease;
8142  }
8143
8144  .video-play-indicator {
8145    position: absolute;
8146    top: 50%;
8147    left: 50%;
8148    transform: translate(-50%, -50%);
8149    opacity: 0.8;
8150    transition: opacity 0.3s ease;
8151    pointer-events: none;
8152    z-index: 2;
8153  }
8154
8155  .project-item:hover .project-video,
8156  .project-item:hover .project-image {
8157    transform: scale(1.05);
8158  }
8159
8160  /* Add video styles for modal */
8161  .slideshow-video {
8162    width: 100%;
8163    height: auto;
8164    max-height: none;
8165    object-fit: contain;
8166  }
8167
8168  .video-thumbnail-indicator {
8169    position: absolute;
8170    top: 0;
8171    left: 0;
8172    width: 100%;
8173    height: 100%;
8174    display: flex;
8175    align-items: center;
8176    justify-content: center;
8177    background-color: rgba(0, 0, 0, 0.2);
8178  }
8179</style>
8180
8181<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
8181
8182
8183<script>
8184  document.addEventListener('DOMContentLoaded', function() {
8185    // Shuffle on every page refresh (only when selected in section settings)
8186    if ("shuffle_refresh" === 'shuffle_refresh') {
8187      const shuffleGallery = document.querySelector('.project-gallery');
8188      if (shuffleGallery) {
8189        const shuffleItems = Array.from(shuffleGallery.children);
8190        for (let i = shuffleItems.length - 1; i > 0; i--) {
8191          const j = Math.floor(Math.random() * (i + 1));
8192          [shuffleItems[i], shuffleItems[j]] = [shuffleItems[j], shuffleItems[i]];
8193        }
8194        shuffleItems.forEach(item => shuffleGallery.appendChild(item));
8195      }
8196    }
8197
8198    // First, ensure all elements have the proper class applied
8199    const allItems = document.querySelectorAll('.element-item');
8200    
8201    allItems.forEach(item => {
8202      const category = item.getAttribute('data-category');
8203      
8204      if (category) {
8205        // Add the category as a class
8206        item.classList.add(category);
8207      }
8208    });
8209    
8210    // Start gallery functionality 
8211    initProjectGallery();
8212    
8213    // Initialize pagination first (before filters)
8214    initPagination();
8215    
8216    // Initialize custom filter functionality
8217    initCustomFilter();
8218  });
8219  
8220  // Function to get items per page based on screen size
8221  function getItemsPerPage() {
8222    // Get the configured values from section settings or use defaults
8223    const desktopItems = 40;
8224    const mobileItems = 10;
8225    
8226    // Check screen width to determine which value to use
8227    return window.innerWidth <= 768 ? mobileItems : desktopItems;
8228  }
8229  
8230  function initCustomFilter() {
8231    // Get all elements that need to be filtered
8232    const items = document.querySelectorAll('.element-item');
8233    
8234    // Get all filter buttons container
8235    const filterContainer = document.querySelector('.filters');
8236    
8237    // Create a set to store unique categories
8238    const uniqueCategories = new Set();
8239    
8240    // Collect all used categories from items
8241    items.forEach(item => {
8242      const category = item.getAttribute('data-category');
8243      if (category) {
8244        uniqueCategories.add(category.toLowerCase());
8245      }
8246    });
8247    
8248    // Check if we already have hardcoded buttons
8249    const existingButtons = filterContainer.querySelectorAll('button[data-filter]');
8250    const existingFilters = Array.from(existingButtons).map(btn => 
8251      btn.getAttribute('data-filter').replace('.', '')
8252    );
8253    
8254    // Add any missing category buttons
8255    uniqueCategories.forEach(category => {
8256      if (category && !existingFilters.includes(category)) {
8257        const button = document.createElement('button');
8258        button.className = 'filter-button button';
8259        button.setAttribute('data-filter', `.${category}`);
8260        button.textContent = category.charAt(0).toUpperCase() + category.slice(1);
8261        filterContainer.appendChild(button);
8262      }
8263    });
8264    
8265    // Get all filter buttons (including newly added ones)
8266    const filterButtons = document.querySelectorAll('.filters button');
8267    
8268    // Set initial state - all items visible but respecting pagination
8269    applyPagination(items, 1);
8270    
8271    // Add click event to filter buttons
8272    filterButtons.forEach(button => {
8273      button.addEventListener('click', function() {
8274        // Remove active class from all buttons
8275        filterButtons.forEach(btn => {
8276          btn.classList.remove('is-checked');
8277        });
8278        
8279        // Add active class to clicked button
8280        this.classList.add('is-checked');
8281        
8282        // Get filter value
8283        const filterValue = this.getAttribute('data-filter');
8284        
8285        // Apply filtering
8286        filterItems(filterValue);
8287      });
8288    });
8289  }
8290  
8291  function filterItems(filterValue) {
8292    const items = document.querySelectorAll('.element-item');
8293    
8294    // First make all items available for filtering
8295    items.forEach(item => {
8296      // Reset item visibility for filtering purposes
8297      item.classList.remove('filtered-out');
8298      item.style.display = '';
8299    });
8300    
8301    if (filterValue !== '*') {
8302      const categoryClass = filterValue.substring(1); // Remove the leading dot
8303      
8304      items.forEach(item => {
8305        if (!item.classList.contains(categoryClass)) {
8306          // Mark items that don't match the filter
8307          item.classList.add('filtered-out');
8308        }
8309      });
8310    }
8311    
8312    // Apply pagination to the filtered items
8313    applyPagination(
8314      Array.from(items).filter(item => !item.classList.contains('filtered-out')), 
8315      1
8316    );
8317  }
8318  
8319  function initPagination() {
8320    // Get items per page based on screen size
8321    const itemsPerPage = getItemsPerPage();
8322    const paginationContainer = document.querySelector('.pagination-numbers');
8323    const prevButton = document.querySelector('.pagination-prev');
8324    const nextButton = document.querySelector('.pagination-next');
8325    const items = document.querySelectorAll('.element-item');
8326    
8327    // Global pagination state
8328    window.paginationState = {
8329      currentPage: 1,
8330      itemsPerPage: itemsPerPage,
8331      totalPages: Math.ceil(items.length / itemsPerPage)
8332    };
8333    
8334    // Set initial UI
8335    updatePaginationUI();
8336    
8337    // Apply initial pagination
8338    applyPagination(items, 1);
8339    
8340    // Add event listeners for pagination controls
8341    prevButton.addEventListener('click', function() {
8342      if (window.paginationState.currentPage > 1) {
8343        navigateToPage(window.paginationState.currentPage - 1);
8344      }
8345    });
8346    
8347    nextButton.addEventListener('click', function() {
8348      if (window.paginationState.currentPage < window.paginationState.totalPages) {
8349        navigateToPage(window.paginationState.currentPage + 1);
8350      }
8351    });
8352    
8353    // Function to navigate to a specific page
8354    function navigateToPage(page) {
8355      // Get the currently visible items (not filtered out)
8356      const visibleItems = Array.from(items).filter(
8357        item => !item.classList.contains('filtered-out')
8358      );
8359      
8360      applyPagination(visibleItems, page);
8361    }
8362    
8363    // Expose navigateToPage to global scope
8364    window.navigateToPage = navigateToPage;
8365    
8366    // Update pagination on window resize (to handle desktop/mobile switch)
8367    window.addEventListener('resize', function() {
8368      // If the items per page changes due to screen size change
8369      const newItemsPerPage = getItemsPerPage();
8370      if (newItemsPerPage !== window.paginationState.itemsPerPage) {
8371        // Update the items per page
8372        window.paginationState.itemsPerPage = newItemsPerPage;
8373        
8374        // Get the currently visible items
8375        const visibleItems = Array.from(items).filter(
8376          item => !item.classList.contains('filtered-out')
8377        );
8378        
8379        // Recalculate total pages
8380        window.paginationState.totalPages = Math.ceil(visibleItems.length / newItemsPerPage);
8381        
8382        // Stay on current page or go to last page if current page no longer exists
8383        const validPage = Math.min(window.paginationState.currentPage, window.paginationState.totalPages);
8384        applyPagination(visibleItems, validPage);
8385      }
8386    });
8387  }
8388  
8389function updatePaginationUI() {
8390    const paginationContainer = document.querySelector('.pagination-numbers');
8391    const prevButton = document.querySelector('.pagination-prev');
8392    const nextButton = document.querySelector('.pagination-next');
8393    
8394    // Clear existing pagination numbers
8395    paginationContainer.innerHTML = '';
8396
8397    // Get current state from the global object
8398    const currentPage = window.paginationState.currentPage;
8399    const totalPages = window.paginationState.totalPages;
8400
8401    // Hide pagination entirely if there's only one page
8402    if (totalPages <= 1) {
8403        document.querySelector('.project-gallery-pagination').style.display = 'none';
8404        return;
8405    } else {
8406        document.querySelector('.project-gallery-pagination').style.display = 'flex';
8407    }
8408
8409    // Helper function to create a page number button
8410    const createPageButton = (page) => {
8411        const pageButton = document.createElement('div');
8412        pageButton.className = 'pagination-number' + (page === currentPage ? ' active' : '');
8413        pageButton.textContent = page;
8414        pageButton.addEventListener('click', function() {
8415            window.navigateToPage(page);
8416        });
8417        paginationContainer.appendChild(pageButton);
8418    };
8419
8420    // Helper function to create an ellipsis element
8421    const createEllipsis = () => {
8422        const ellipsis = document.createElement('div');
8423        ellipsis.className = 'pagination-number';
8423 // Use same class for consistent styling
8424        ellipsis.textContent = '...';
8425        ellipsis.style.cursor = 'default'; // Make it not clickable
8426        paginationContainer.appendChild(ellipsis);
8427    };
8428
8429    // --- NEW Core Pagination Logic ---
8430
8431    // The threshold is now 5 pages.
8432    if (totalPages <= 5) {
8433        // If 5 or fewer pages, show all numbers.
8434        for (let i = 1; i <= totalPages; i++) {
8435            createPageButton(i);
8436        }
8437    } else {
8438        // If more than 5 pages, use the new compact ellipsis logic.
8439        const pagesToShow = new Set();
8440
8441        // 1. Always show the first page.
8442        pagesToShow.add(1);
8443
8444        // 2. Always show the last page.
8445        pagesToShow.add(totalPages);
8446
8447        // 3. Show the current page and its direct neighbors.
8448        pagesToShow.add(currentPage - 1);
8449        pagesToShow.add(currentPage);
8450        pagesToShow.add(currentPage + 1);
8451
8452        // Convert the Set to a sorted array and render the buttons.
8453        const sortedPages = Array.from(pagesToShow).filter(p => p > 0 && p <= totalPages).sort((a, b) => a - b);
8454        
8455        let lastPage = 0;
8456        for (const page of sortedPages) {
8457            // If there's a gap between the last rendered button and the current one, add an ellipsis.
8458            if (page > lastPage + 1) {
8459                createEllipsis();
8460            }
8461            createPageButton(page);
8462            lastPage = page;
8463        }
8464    }
8465
8466    // --- End of Core Logic ---
8467
8468    // This part remains unchanged.
8469    prevButton.disabled = currentPage === 1;
8470    nextButton.disabled = currentPage === window.paginationState.totalPages;
8471}
8472  
8473  // Function to apply pagination to a set of items
8474  function applyPagination(itemsArray, page) {
8475    // Update global state
8476    window.paginationState.currentPage = page;
8477    window.paginationState.totalPages = Math.ceil(itemsArray.length / window.paginationState.itemsPerPage);
8478    
8479    // Calculate start and end indices
8480    const startIndex = (page - 1) * window.paginationState.itemsPerPage;
8481    const endIndex = Math.min(startIndex + window.paginationState.itemsPerPage, itemsArray.length);
8482    
8483    // Hide all items first
8484    const allItems = document.querySelectorAll('.element-item');
8485    allItems.forEach(item => {
8486      item.style.opacity = '0';
8487      item.style.transform = 'scale(0.95)';
8488      
8489      setTimeout(() => {
8490        item.style.display = 'none';
8491      }, 300);
8492    });
8493    
8494    // Show only the items for the current page
8495    itemsArray.forEach((item, index) => {
8496      if (index >= startIndex && index < endIndex) {
8497        // Show items for current page with animation
8498        setTimeout(() => {
8499          item.style.display = 'block';
8500          
8501          // Trigger reflow to make sure display change is registered
8502          void item.offsetWidth;
8503          
8504          item.style.opacity = '1';
8505          item.style.transform = 'scale(1)';
8506        }, 350);
8507      }
8508    });
8509    
8510    // Update the pagination UI
8511    updatePaginationUI();
8512  }
8513  
8514  function initProjectGallery() {
8515    // Elements
8516    const gallery = document.querySelector('.project-gallery');
8517    const projectItems = document.querySelectorAll('.project-item');
8518    const modal = document.getElementById('projectModal');
8519    const modalSlideshow = modal.querySelector('.project-slideshow');
8520    const modalThumbnails = modal.querySelector('.slideshow-thumbnails');
8521    const modalTitle = modal.querySelector('.project-modal-title');
8522    const modalCategory = modal.querySelector('.project-modal-category');
8523    const modalDescription = modal.querySelector('.project-modal-description');
8524    const modalLink = modal.querySelector('.project-modal-link');
8525    const modalLinkContainer = modal.querySelector('.project-modal-link-container');
8526    const modalClose = modal.querySelector('.project-modal-close');
8527    const modalPrev = modal.querySelector('.project-modal-prev');
8528    const modalNext = modal.querySelector('.project-modal-next');
8529    const modalBackdrop = modal.querySelector('.project-modal-backdrop');
8530    const slideshowPrev = modal.querySelector('.slideshow-prev');
8531    const slideshowNext = modal.querySelector('.slideshow-next');
8532    
8533    // Store project data for modal
8534    const projectData = [
8535      
8536      
8537      
8538        
8539          {
8540            images: [
8541              "//codendesigner.com/cdn/shop/files/CompreHelp-home_1400x.png?v=1789888846"
8542              
8543              
8544              
8545              
8546              
8547            ],
8548            
8549            title: "CompreHelp",
8550            category: "LearnWorld",
8551            description: "Codendesigner designed and developed a professional, user-friendly online learning experience for CompreHelp’s Parent\/Guardian Training Course. The project includes a structured course layout, engaging video modules, interactive exercises, gamified learning activities, curriculum sections, instructor information, testimonials, and a seamless enrollment experience. Built to make learning simple and accessible, the platform provides parents and guardians with an organized pathway to support their children’s reading comprehension development.",
8552            link: null
8553          },
8554        
8555      
8556        
8557          {
8558            images: [
8559              "//codendesigner.com/cdn/shop/files/lartdusavoir-Home_1400x.png?v=1784108759"
8560              
8561                ,"//codendesigner.com/cdn/shop/files/lartdusavoir-Langue_anglaise_1400x.png?v=1784108759"
8562              
8563              
8564                ,"//codendesigner.com/cdn/shop/files/lartdusavoir-Activites_Scientifiques_1400x.png?v=1784108758"
8565              
8566              
8567                ,"//codendesigner.com/cdn/shop/files/lartdusavoir-Langue_francaise_1400x.png?v=1784108758"
8568              
8569              
8570                ,"//codendesigner.com/cdn/shop/files/lartdusavoir-Mathematiques_1400x.png?v=1784108758"
8571              
8572              
8573                ,"//codendesigner.com/cdn/shop/files/lartdusavoir-Education_islamique_1400x.png?v=1784108758"
8574              
8575            ],
8576            
8577            title: "Lart du Savoir",
8578            category: "LearnWorld",
8579            description: "A sophisticated LearnWorlds e-learning portal designed to deliver structured, bilingual digital education across Morocco and France, featuring carefully organized course structures for academic supp
8579ort, languages, and personal development.",
8580            link: null
8581          },
8582        
8583      
8584        
8585          {
8586            images: [
8587              "//codendesigner.com/cdn/shop/files/MKNCC_global-Port3_1400x.png?v=1789808950"
8588              
8589                ,"//codendesigner.com/cdn/shop/files/MKNCC_Global-about_us_1400x.png?v=1784035879"
8590              
8591              
8592                ,"//codendesigner.com/cdn/shop/files/MKNCC_Global-Course_1400x.png?v=1784035880"
8593              
8594              
8595                ,"//codendesigner.com/cdn/shop/files/MKNCC_Global-contact_1400x.png?v=1784035876"
8596              
8597              
8598              
8599            ],
8600            
8601            title: "MKNCC Global",
8602            category: "Shopify",
8603            description: "A comprehensive LearnWorlds e-learning platform developed for MKNCC Global, featuring structured university pathway courses, a self-paced LMS architecture, and a streamlined user journey for international students.",
8604            link: null
8605          },
8606        
8607      
8608        
8609          {
8610            images: [
8611              "//codendesigner.com/cdn/shop/files/with-helen.com-careerally-Home_1400x.png?v=1784031914"
8612              
8613                ,"//codendesigner.com/cdn/shop/files/with-helen.com-careerally-Full_Online_Program_1400x.png?v=1784031912"
8614              
8615              
8616                ,"//codendesigner.com/cdn/shop/files/with-helen.com-CareerAlly_1-1_Coaching_Program-1-1-Program_1400x.png?v=1784031912"
8617              
8618              
8619              
8620              
8621            ],
8622            
8623            title: "with helen CareerAlly",
8624            category: "Squarespace",
8625            description: "A purposeful digital presence built for CareerAlly, an online coaching program for mid-career professionals. The site features a streamlined user journey, responsive layout, and strategic calls-to-action to maximize course enrollments.",
8626            link: null
8627          },
8628        
8629      
8630        
8631          {
8632            images: [
8633              "//codendesigner.com/cdn/shop/files/FoodSurety-Home_1400x.png?v=1784028281"
8634              
8635                ,"//codendesigner.com/cdn/shop/files/FoodSurety-10_1400x.png?v=1784028595"
8636              
8637              
8638                ,"//codendesigner.com/cdn/shop/files/FoodSurety-7_1400x.png?v=1784028609"
8639              
8640              
8641                ,"//codendesigner.com/cdn/shop/files/FoodSurety-3_1400x.png?v=1784028605"
8642              
8643              
8644                ,"//codendesigner.com/cdn/shop/files/FoodSurety-9_1400x.png?v=1784028597"
8645              
8646              
8647                ,"//codendesigner.com/cdn/shop/files/FoodSurety-14_1400x.png?v=1784028574"
8648              
8649            ],
8650            
8651            title: "Food Surety",
8652            category: "WordPress",
8653            description: "A custom WordPress platform designed to showcase Kathrin Meister’s photography and written work, seamlessly blending an inspiring Encouragement Journal with an elegant storefront for postcards and wall art.",
8654            link: null
8655          },
8656        
8657      
8658        
8659          {
8660            images: [
8661              "//codendesigner.com/cdn/shop/files/careerally-home_1400x.png?v=1789886522"
8662              
8663                ,"//codendesigner.com/cdn/shop/files/with-helen.com-CareerAlly_1-1_Coaching_Program-1-1-Program_1400x.png?v=1784031912"
8664              
8665              
8666                ,"//codendesigner.com/cdn/shop/files/with-helen.com-careerally-Full_Online_Program_1400x.png?v=1784031912"
8667              
8668              
8669              
8670              
8671            ],
8672            
8673            title: "SystemicAlly",
8674            category: "LearnWorld",
8675            description: "A clean, conversion-focused landing page for CareerAlly, designed to guide mid-career professionals into Helen's structured online coaching program with intuitive navigation and compelling messaging.",
8676            link: null
8677          },
8678        
8679      
8680        
8681          {
8682            images: [
8683              "//codendesigner.com/cdn/shop/files/Home-new-05-04-2026_12_20_PM_1400x.png?v=1777877289"
8684              
8685              
8686              
8687              
8688              
8689            ],
8690            
8691            title: "L'Art du Savoir Academy ",
8692            category: "LearnWorld",
8693            description: "Developed by Codendesigner (CND), the **L'art du Savoir** landing page is a premium LearnWorlds-based digital hub designed to bridge professional education with a sophisticated user experience. The project focuses on a high-conversion architecture that utilizes structured content blocks, a clean academic aesthetic, and intuitive navigation to showcase specialized course modules. By prioritizing mobile responsiveness and a seamless information flow, the platform provides an authoritative and accessible entry point for learners, transforming complex educational curricula into an engaging, professional learning environment.",
8694            link: null
8695          },
8696        
8697      
8698        
8699          {
8700            images: [
8701              "//codendesigner.com/cdn/shop/files/edu-egy-Home-WP_1400x.png?v=1777876640"
8702              
8703                ,"//codendesigner.com/cdn/shop/files/edu-egy-About-WP_1400x.png?v=1777877133"
8704              
8705              
8706                ,"//codendesigner.com/cdn/shop/files/edu-egy-Become-an-International-School-in-Egypt-THE-EDUCATOR--WP_1400x.png?v=1777877152"
8707              
8708              
8709                ,"//codendesigner.com/cdn/shop/files/edu-egy-Contact-THE-EDUCATOR-WP_1400x.png?v=1777877152"
8710              
8711              
8712                ,"//codendesigner.com/cdn/shop/files/edu-egy-Services-THE-EDUCATOR-WP_1400x.png?v=1777877153"
8713              
8714              
8715                ,"//codendesigner.com/cdn/shop/files/edu-egy-Growing-Ambitions-WP-THE-EDUCATOR_1400x.png?v=1777877154"
8716              
8717            ],
8718            
8719            title: "The EducatorThe Educator",
8720            category: "Wordpress",
8721            description: "Developed by Codendesigner (CND), The Educator is a comprehensive WordPress-based educational portal designed to centralize academic resources and institutional communication for the Egyptian learning community. The project features a custom-built, responsive ar
8721chitecture that integrates RTL (Arabic) language support with a clean, high-legibility interface to ensure accessibility for students and educators alike. By merging a robust resource library with a streamlined user journey, CND created a high-performance digital ecosystem that prioritizes information clarity, site security, and seamless navigation across all devices.",
8722            link: null
8723          },
8724        
8725      
8726        
8727          {
8728            images: [
8729              "//codendesigner.com/cdn/shop/files/Curriculum_Design_1400x.png?v=1763296834"
8730              
8731                ,"//codendesigner.com/cdn/shop/files/KS1_Page_1400x.png?v=1763378335"
8732              
8733              
8734                ,"//codendesigner.com/cdn/shop/files/KS2_Page_1400x.png?v=1763378352"
8735              
8736              
8737              
8738              
8739            ],
8740            
8741            title: "The Muse Wellbeing",
8742            category: "LearnWorlds",
8743            description: "At Codendesigner, we had the opportunity to collaborate with Muse Wellbeing UK, where our team handled a range of design improvements, new page creations, and overall site refinements to enhance user experience and brand consistency. As a full-stack web design agency, we deliver high-quality solutions across LearnWorlds, Shopify, WordPress, and other platforms. Our work focuses on clean UI, smooth functionality, and conversion-driven design ensuring every project we touch reflects the client’s vision with a polished, professional finish.",
8744            link: null
8745          },
8746        
8747      
8748        
8749          {
8750            images: [
8751              "//codendesigner.com/cdn/shop/files/surghub-complex_lower_1400x.png?v=1789886696"
8752              
8753                ,"//codendesigner.com/cdn/shop/files/surghub-landing-page_1400x_9dd6ca29-45ee-4220-971e-85bf77bef2e6_1400x.webp?v=1789808509"
8754              
8755              
8756                ,"//codendesigner.com/cdn/shop/files/surghub3_1400x.png?v=1789808510"
8757              
8758              
8759                ,"//codendesigner.com/cdn/shop/files/surghub_1400x.png?v=1789808510"
8760              
8761              
8762              
8763            ],
8764            
8765            title: "SURGhub",
8766            category: "LearnWorlds",
8767            description: "At Codendesigner, we worked with SurgHub, a professional healthcare learning platform, to design and develop a modern, high-converting landing page along with a fully structured online course within their LearnWorlds environment. Our focus was on clean layout design, intuitive navigation, and a seamless learning experience that aligns with the organization’s mission. From visual strategy to course setup, we ensured every element was crafted with precision to deliver a user-friendly and engaging educational platform.",
8768            link: null
8769          },
8770        
8771      
8772        
8773          {
8774            images: [
8775              "//codendesigner.com/cdn/shop/files/SassyLab-slide-image_1400x.png?v=1695463807"
8776              
8777              
8778              
8779              
8780              
8781            ],
8782            
8783            title: "SassyLAB",
8784            category: "Shopify",
8785            description: "SassyLAB: This website is a Danish online store specializing in curated secondhand fashion for women and men. SassyLAB offers a wide selection of quality-checked pre-owned clothing, shoes, and accessories at affordable prices. The platform promotes combating textile waste and provides features like free shipping and a return policy.",
8786            link: null
8787          },
8788        
8789      
8790        
8791          {
8792            images: [
8793              "//codendesigner.com/cdn/shop/files/bellrosejewellers_1400x.jpg?v=1696685508"
8794              
8795              
8796              
8797              
8798              
8799            ],
8800            
8801            title: "Bellrose Fine Jewellers",
8802            category: "WordPress",
8803            description: "Bellrose Fine Jewellers: This website showcases Bellrose Fine Jewellers, offering a range of exquisite jewellery, including diamonds, as well as clocks, watches, and giftware. The site highlights their repair and services, positioning itself as the ultimate destination for all jewellery needs.",
8804            link: null
8805          },
8806        
8807      
8808        
8809          {
8810            images: [
8811              "//codendesigner.com/cdn/shop/files/11_4190db51-2aab-4a82-86d2-1ff36f819a0c_1400x.png?v=1676711736"
8812              
8813              
8814              
8815              
8816              
8817            ],
8818            
8819            title: "ILP Asia Pacific",
8820            category: "wordpress",
8821            description: "ILP Asia Pacific: The website for the Institute for Learning \u0026 Performance in the Asia Pacific region, an industry body for L\u0026D professionals. ILP Asia Pacific offers memberships, events like the Learning Impact Summit, and a range of professional development resources. It aims to 
8821support and connect L\u0026D professionals to enhance their skills and impact.",
8822            link: "\/pages\/case-study-adzimpact"
8823          },
8824        
8825      
8826        
8827          {
8828            images: [
8829              "//codendesigner.com/cdn/shop/files/8_6b99a8ed-2680-4c3c-b6f9-dad5c3603678_1400x.png?v=1676711723"
8830              
8831                ,"//codendesigner.com/cdn/shop/files/fs-Heaven-Roc-collection-01-19-2025_06_27_PM_1400x.png?v=1737293905"
8832              
8833              
8834                ,"//codendesigner.com/cdn/shop/files/fs-Heaven-Roc-collections2-01-19-2025_06_28_PM_1400x.png?v=1737293905"
8835              
8836              
8837                ,"//codendesigner.com/cdn/shop/files/heavenroc.com-The-Elizabeth-18k-White-Gold-SHOPIFY_1400x.png?v=1747222809"
8838              
8839              
8840                ,"//codendesigner.com/cdn/shop/files/fs-Heaven-Roc-Gifts-01-19-2025_06_28_PM_1400x.png?v=1737293903"
8841              
8842              
8843            ],
8844            
8845            title: "HEAVEN ROC NEW YORK",
8846            category: "Shopify",
8847            description: "HEAVEN ROC NEW YORK: This website showcases fashion jewelry characterized by elegance and glamour, based in New York. HEAVEN ROC NEW YORK features various collections, including engagement pieces and gifts. It serves as an online destination for stylish and sophisticated jewelry.",
8848            link: "\/pages\/case-study-heavenroc"
8849          },
8850        
8851      
8852        
8853          {
8854            images: [
8855              "//codendesigner.com/cdn/shop/files/21_f30e035a-7477-4f4a-8d34-8b4ec891e6d3_1400x.png?v=1676711800"
8856              
8857                ,"//codendesigner.com/cdn/shop/files/vflatworld.com-HOME-SHOPIFY_1400x.png?v=1748147885"
8858              
8859              
8860                ,"//codendesigner.com/cdn/shop/files/vflatworld.com-AboutUs-SHOPIFY_1400x.png?v=1748147884"
8861              
8862              
8863                ,"//codendesigner.com/cdn/shop/files/vflatworld.com--Blog-SHOPIFY_1400x.png?v=1748147883"
8864              
8865              
8866                ,"//codendesigner.com/cdn/shop/files/vflatworld.com-Influencers-SHOPIFY_1400x.png?v=1748147882"
8867              
8868              
8869                ,"//codendesigner.com/cdn/shop/files/vflatworld.com-Press-Media-SHOPIFY_1400x.png?v=1748147882"
8870              
8871            ],
8872            
8873            title: "V-Flat World",
8874            category: "Shopify",
8875            description: "V-Flat World: This website is an online store specializing in photography backdrops and accessories, including their signature V-flats and Duo Boards. V-Flat World offers high-quality, realistic backdrops and tools designed to help photographers enhance their work. The site provides resources and showcases product results.",
8876            link: "\/pages\/case-study-v-flat-world"
8877          },
8878        
8879      
8880        
8881          {
8882            images: [
8883              "//codendesigner.com/cdn/shop/files/LearnWorlds_website_1400x.png?v=1709179156"
8884              
8885                ,"//codendesigner.com/cdn/shop/files/culturaliq.com.au-HOME-LearnWorlds_1400x.png?v=1747140743"
8886              
8887              
8888                ,"//codendesigner.com/cdn/shop/files/culturaliq.com.au-Foundations-LearnWorlds_1400x.png?v=1747140742"
8889              
8890              
8891                ,"//codendesigner.com/cdn/shop/files/culturaliq.com.au-About-LearnWorlds_1400x.png?v=1747140742"
8892              
8893              
8894                ,"//codendesigner.com/cdn/shop/files/culturaliq.com.au-COURSES-LearnWorlds_1400x.png?v=1747222377"
8895              
8896              
8897            ],
8898            
8899            title: "Cultural iQ",
8900            category: "LearnWorlds",
8901            description: "Cultural iQ: An e-learning platform focused on developing cultural awareness and competence, particularly regarding First Nation Australians. Cultural iQ provides self-paced courses and resources designed to help individuals and organizations address bias and create culturally safe environments. The platform aims to elevate cultural intelligence for meaningful diversity and inclusion outcomes.",
8902            link: "\/pages\/case-study-culturaliq"
8903          },
8904        
8905      
8906        
8907          {
8908            images: [
8909              "//codendesigner.com/cdn/shop/files/Flowerism-slide-image_1400x.png?v=1695463682"
8910              
8911              
8912              
8913              
8914              
8915            ],
8916            
8917            title: "Flowerisme",
8918            category: "wordpress",
8919            description: "Flowerisme: Specializing in high-quality faux flowers, Flowerisme creates new styles and trends in floral design for commercial spaces. Sourcing durable, hand-picked flowers from Europe, they offer lasting arrangements for office
8919s, shops, and showrooms. Flowerisme brings a distinct vision to elevate interior aesthetics with unique floral statements.",
8920            link: null
8921          },
8922        
8923      
8924        
8925          {
8926            images: [
8927              "//codendesigner.com/cdn/shop/files/6_3fdf899d-ed6c-4e2a-857f-943bff6c36af_1400x.png?v=1676711722"
8928              
8929                ,"//codendesigner.com/cdn/shop/files/forminsoles.com-HOME-SHOPIFY_1400x.png?v=1747222453"
8930              
8931              
8932                ,"//codendesigner.com/cdn/shop/files/forminsoles.com-Arch-SHOPIFY_1400x.png?v=1747222453"
8933              
8934              
8935                ,"//codendesigner.com/cdn/shop/files/forminsoles.com-Discover-SHOPIFY_1400x.png?v=1747222452"
8936              
8937              
8938                ,"//codendesigner.com/cdn/shop/files/forminsoles.com-Contact-Us-SHOPIFY_1400x.png?v=1747222451"
8939              
8940              
8941            ],
8942            
8943            title: "FORM Premium Insoles",
8944            category: "Shopify",
8945            description: "FORM Premium Insoles: Specializing in heat-moldable and wear-moldable shoe inserts designed for custom comfort and support. FORM Premium Insoles help alleviate various foot, knee, and back pains by providing personalized arch support. They offer enhanced stability and shock absorption for improved foot health.",
8946            link: "\/pages\/case-study-form-insoles"
8947          },
8948        
8949      
8950        
8951          {
8952            images: [
8953              "//codendesigner.com/cdn/shop/files/avetsa.education-portfolio_1400x.jpg?v=1734762058"
8954              
8955                ,"//codendesigner.com/cdn/shop/files/Avetsa.Education-Recognition-WordPress_1400x.png?v=1747140187"
8956              
8957              
8958                ,"//codendesigner.com/cdn/shop/files/avetsa.education-About-Us-LearnWorlds_1400x.png?v=1747140184"
8959              
8960              
8961                ,"//codendesigner.com/cdn/shop/files/Avetsa.EducationOur-Services-WordPress_1400x.png?v=1747140180"
8962              
8963              
8964                ,"//codendesigner.com/cdn/shop/files/Avetsa.Education-Portfolio-WordPress_1400x.png?v=1747140174"
8965              
8966              
8967                ,"//codendesigner.com/cdn/shop/files/Avetsa.EducationContact-WordPress_1400x.png?v=1747140174"
8968              
8969            ],
8970            
8971            title: "AVETSA Education",
8972            category: "WordPress",
8973            description: "AVETSA: Specializes in the Recognition of Prior Learning and Experience to grant accredited global qualifications. AVETSA offers Vocational Education and Training, Higher Education Placement, and Executive Education programs. They empower individuals by valuing their existing experience for future opportunities.",
8974            link: "\/pages\/case-study-avetsa-education"
8975          },
8976        
8977      
8978        
8979          {
8980            images: [
8981              "//codendesigner.com/cdn/shop/files/13_dd567775-2c23-4b6f-8158-d8df62782569_1400x.png?v=1676711736"
8982              
8983                ,"//codendesigner.com/cdn/shop/files/manchesterwarehouse.com.au-HOME-SHOPIFY_1400x.png?v=1748071382"
8984              
8985              
8986                ,"//codendesigner.com/cdn/shop/files/manchesterwarehouse.com.au-New-Season-SHOPIFY_1400x.png?v=1748071564"
8987              
8988              
8989                ,"//codendesigner.com/cdn/shop/files/manchesterwarehouse.com.au-News-SHOPIFY_071acbca-74d3-4ec5-b2e7-eddbdb2619b0_1400x.png?v=1748071563"
8990              
8991              
8992                ,"//codendesigner.com/cdn/shop/files/manchesterwarehouse.com.au-Our-Store-SHOPIFY_1400x.png?v=1747222815"
8993              
8994              
8995            ],
8996            
8997            title: "Manchester Warehouse",
8998            category: "Shopify",
8999            description: "An Australian-owned online retailer with over 50 years of experience, specializing in bedding and soft furnishings. Manchester Warehouse offers an extensive collection including quilt covers, sheets, quilts, pillows, and bath accessories for retail and commercial customers. The site provides Australia-wide delivery and a price match guarantee.",
9000            link: "\/pages\/case-study-manchester-warehouse"
9001          },
9002        
9003      
9004        
9005          {
9006            images: [
9007              "//codendesigner.com/cdn/shop/files/vitamemorials_1400x.jpg?v=1696685459"
9008              
9009                ,"//codendesigner.com/cdn/shop/files/fs-Vitamemorials.au-Home-01-19-2025_04_05_PM_1400x.png?v=1737294066"
9010              
9011              
9012                ,"//codendesigner.com/cdn/shop/files/vitamemorials.au-Join-Now-WP_1400x.png?v=1747828501"
9013              
9014              
9015                ,"//codendesigner.com/cdn/shop/files/fs-Vitamemorials.au-Blog-01-19-2025_04_17_PM_1400x.png?v=1737294064"
9016              
9017              
9018                ,"//codendesigner.com/cdn/shop/files/fs-Vitamemorials.au-Contact-Us-01-19-2025_04_17_PM_1400x.png?v=1737294064"
9019              
9020              
9021                ,"//codendesigner.com/cdn/shop/files/fs-Vitamemorials.au-About-Us-01-19-2025_04_17_PM_1400x.png?v=1737294065"
9022              
9023            ],
9024            
9025            title: "VITA Memorials",
9026            category: "WordPress",
9027            description: "Vitamemorials: An online platform providing tools and guidance for personalized funeral and life celebration planning. Vitamemorials empowers individuals to design their own farewell or create a lasting memorial for loved one
9027s, easing the burden on families. The site helps preserve life stories and facilitates sharing with friends and family.",
9028            link: "\/pages\/case-study-vitamemorials"
9029          },
9030        
9031      
9032        
9033          {
9034            images: [
9035              "//codendesigner.com/cdn/shop/files/15_4966d82c-ceda-4cb0-834d-22bc03170119_1400x.png?v=1676711736"
9036              
9037                ,"//codendesigner.com/cdn/shop/files/purespective.de-Uber-purespective--SHOPIFY_1400x.png?v=1747222776"
9038              
9039              
9040                ,"//codendesigner.com/cdn/shop/files/purespective.de-HOME-SHOPIFY_1400x.png?v=1748350344"
9041              
9042              
9043                ,"//codendesigner.com/cdn/shop/files/purespective.de-Kategorien-SHOPIFY_1400x.png?v=1747222680"
9044              
9045              
9046                ,"//codendesigner.com/cdn/shop/files/purespective.de-Meister-SHOPIFY_1400x.png?v=1747222659"
9047              
9048              
9049            ],
9050            
9051            title: "Purespective",
9052            category: "Shopify",
9053            description: "purespec:tive: This website showcases the photographic and written work of Kathrin Meister, offering products like postcard collections and photo wall art. purespec:tive features an Encouragement Journal with inspiring content and serves as a platform for her artistic creations and mindful themes.",
9054            link: "\/pages\/case-study-purespective"
9055          },
9056        
9057      
9058        
9059          {
9060            images: [
9061              "//codendesigner.com/cdn/shop/files/space-lock-landingPage-portfolio_1400x.jpg?v=1734762141"
9062              
9063                ,"//codendesigner.com/cdn/shop/files/fs-The-Space-Safe-products-01-19-2025_09_41_AM_1400x.png?v=1737294455"
9064              
9065              
9066                ,"//codendesigner.com/cdn/shop/files/fs-The-Space-Safe-the-lock-01-19-2025_09_58_AM_1400x.png?v=1737294455"
9067              
9068              
9069                ,"//codendesigner.com/cdn/shop/files/fs-The-Space-Safe-airbnb-01-19-2025_09_53_AM_1400x.png?v=1737294453"
9070              
9071              
9072                ,"//codendesigner.com/cdn/shop/files/fs-The-Space-Safe-the-app-01-19-2025_09_52_AM_1400x.png?v=1737294449"
9073              
9074              
9075            ],
9076            
9077            title: "The Space Safe",
9078            category: "Shopify",
9079            description: "The Space Safe: A futuristic smart safe featuring advanced security like biometric authentication, integrated cameras, and app connectivity. 1  Designed with reinforced steel and a discreet, modern aesthetic, it offers secure and accessible storage for valuables at home or office. The Space Safe provides enhanced peace of mind with remote monitoring and control.",
9080            link: "\/pages\/case-study-space-safe"
9081          },
9082        
9083      
9084        
9085          {
9086            images: [
9087              "//codendesigner.com/cdn/shop/files/Home-page_1400x.jpg?v=1746955941"
9088              
9089                ,"//codendesigner.com/cdn/shop/files/fredsfruit.com-Deli-WP_1400x.png?v=1747224421"
9090              
9091              
9092                ,"//codendesigner.com/cdn/shop/files/fredsfruit.com-Recipes-WP_1400x.png?v=1747224420"
9093              
9094              
9095                ,"//codendesigner.com/cdn/shop/files/fredsfruit.com-Grocery-WP_1400x.png?v=1747224420"
9096              
9097              
9098                ,"//codendesigner.com/cdn/shop/files/fredsfruit.com-Grocery-WP_1400x.png?v=1747224420"
9099              
9100              
9101                ,"//codendesigner.com/cdn/shop/files/fredsfruit.com-About-WP_1400x.png?v=1747224418"
9102              
9103            ],
9104            
9105            title: "Fred's One Stop Shopping",
9106            category: "WordPress",
9107            description: "Fred's One Stop Shopping: A convenient retail destination designed for efficiency, offering a wide variety of products under a single roof. Fred's aims to save customers time by allowing them to find everything they need in one easy trip. It provides a comprehensive shopping experience across multiple categories.",
9108            link: "\/pages\/case-study-freds"
9109          },
9110        
9111      
9112        
9113          {
9114            images: [
9115              "//codendesigner.com/cdn/shop/files/talentcapability-Home-Port_0abf2920-18be-42c0-84b8-f532038063d7_1400x.jpg?v=1748931781"
9116              
9117              
9118                ,"//codendesigner.com/cdn/shop/files/talentcapability-About-WP_1400x.png?v=1748867299"
9119              
9120              
9121                ,"//codendesigner.com/cdn/shop/files/screencapture-talentcapability-services-2025-06-02-17_59_44_1400x.png?v=1748867298"
9122              
9123              
9124                ,"//codendesigner.com/cdn/shop/files/talentcapability-contact-Wp_1400x.png?v=1748867298"
9125              
9126              
9127            ],
9128            
9129            title: "Talent Capability",
9130            category: "WordPress",
9131            description: "A clean, professional WordPress website built to showcase Talent Capability’s consulting expertise, training programs, and leadership solutions.",
9132            link: "\/pages\/case-study-talent-capability"
9133          },
9134        
9135      
9136        
9137          {
9138            images: [
9139              "//codendesigner.com/cdn/shop/files/Judinash-When-Time-Means-Nothing-portfolio_1400x.png?v=1700744349"
9140              
9141                ,"//codendesigner.com/cdn/shop/files/judinash.com-Home-SHOPIFY_1400x.png?v=1747223032"
9142              
9143              
9144                ,"//codendesigner.com/cdn/shop/files/judinash.com-MY-WHY-SHOPIFY_1400x.png?v=1747223032"
9145              
9146              
9147                ,"//codendesigner.com/cdn/shop/files/judinash.com-The-Turning-Point-SHOPIFY_1400x.png?v=1747223031"
9148              
9149              
9150                ,"//codendesigner.com/cdn/shop/files/judinash.com-purchase-SHOPIFY_1400x.png?v=1747223031"
9151              
9152              
9153                ,"//codendesigner.com/cdn/shop/files/judinash.com-Contact-SHOPIFY_1400x.png?v=1747223031"
9154              
9155            ],
9156            
9157            title: "Judi Nash",
9158            category: "Shopify",
9159            description: "Judi Nash: This is the official website for author Judi Nash, highlighting her powerful memoir \"When Time Means Nothing.\" The site delves into her personal journey of self
9159-discovery and healing. It serves as a platform for the book and shares Judi Nash's inspiring story of resilience.",
9160            link: "\/pages\/case-study-judi-nash"
9161          },
9162        
9163      
9164        
9165          {
9166            images: [
9167              "//codendesigner.com/cdn/shop/files/16_4801b2cd-71c4-4b7c-ac03-976975402ea2_1400x.png?v=1676711736"
9168              
9169                ,"//codendesigner.com/cdn/shop/files/rileygroupinc.com-HOMEV2-Squarespace_1400x.png?v=1747223526"
9170              
9171              
9172                ,"//codendesigner.com/cdn/shop/files/rileygroupinc.com-Why-We-re-Different-Squarespace_1400x.png?v=1747223494"
9173              
9174              
9175                ,"//codendesigner.com/cdn/shop/files/rileygroupinc.com-How-We-Work-Squarespace_1400x.png?v=1747223478"
9176              
9177              
9178                ,"//codendesigner.com/cdn/shop/files/rileygroupinc.com-Case-Studies-Squarespace_1400x.png?v=1747223509"
9179              
9180              
9181            ],
9182            
9183            title: "RILEY GROUP INC",
9184            category: "Squarespace",
9185            description: "RILEY GROUP INC.: This website represents a company focused on creating strategy-driven customer experiences. RILEY GROUP INC. specializes in the retail sector, aiming to unlock the full potential of the retail guest journey through expert strategies.",
9186            link: "\/pages\/case-study-rileygroupinc"
9187          },
9188        
9189      
9190        
9191          {
9192            images: [
9193              "//codendesigner.com/cdn/shop/files/Wall-Street-Bound-Inc-portfolio_1400x.png?v=1700745203"
9194              
9195                ,"//codendesigner.com/cdn/shop/files/wallstreetbound.org-HOME-Squarespace_1400x.png?v=1747223557"
9196              
9197              
9198                ,"//codendesigner.com/cdn/shop/files/wallstreetbound.org-Inc-Squarespace_1400x.png?v=1747223750"
9199              
9200              
9201                ,"//codendesigner.com/cdn/shop/files/wallstreetbound.org-Programs-Squarespace_b8e51e1d-ba72-4b8e-bb83-b20ae62c5c04_1400x.png?v=1747223688"
9202              
9203              
9204                ,"//codendesigner.com/cdn/shop/files/wallstreetbound.org-Media-Squarespace_1400x.png?v=1747223561"
9205              
9206              
9207                ,"//codendesigner.com/cdn/shop/files/wallstreetbound.org-Our-Team-Squarespace_1400x.png?v=1747223541"
9208              
9209            ],
9210            
9211            title: "Wall Street Bound",
9212            category: "Squarespace",
9213            description: "Wall Street Bound: A non-profit organization dedicated to empowering underrepresented youth for careers in the finance industry. Through targeted education, training, mentorship, and career support, Wall Street Bound increases diversity on Wall Street. The organization equips students with essential skills and networks to succeed in finance.",
9214            link: "\/pages\/wall-street-bound"
9215          },
9216        
9217      
9218        
9219          {
9220            images: [
9221              "//codendesigner.com/cdn/shop/files/Home-Experience-Catalyst_1400x.jpg?v=1736317991"
9222              
9223              
9224              
9225              
9226              
9227            ],
9228            
9229            title: "Experience Catalysts",
9230            category: "wix",
9231            description: "Experience Catalysts: Founded by Diane Magers, Experience Catalysts is a consultancy focused on embedding sustainable Experience Management capabilities within organizations. They empower clients through knowledge transfer and co-creation, helping them design intentional, human-centered customer and employee experiences. The firm drives business impact by breaking down silos and fostering a culture of continuous improvement in experience design.",
9232            link: null
9233          },
9234        
9235      
9236        
9237          {
9238            images: [
9239              "//codendesigner.com/cdn/shop/files/18_7a66b6b2-b878-4a12-8915-3ea3d6aa13ae_1400x.png?v=1676711736"
9240              
9241                ,"//codendesigner.com/cdn/shop/files/simplyhoney.com.au-HOME-WP_1400x.png?v=1747223904"
9242              
9243              
9244                ,"//codendesigner.com/cdn/shop/files/simplyhoney.com.au-About-WP_1400x.png?v=1747223897"
9245              
9246              
9247                ,"//codendesigner.com/cdn/shop/files/simplyhoney.com.au-Faq-WP_1400x.png?v=1747223883"
9248              
9249              
9250                ,"//codendesigner.com/cdn/shop/files/simplyhoney.com.au-Manuka-WP_1400x.png?v=1747223866"
9251              
9252              
9253            ],
9254            
9255            title: "Simply Honey",
9256            category: "WordPress",
9257            description: "Simply Honey: This website is an online store offering 100% pure, raw Australian honey sourced from renowned beekeepers. Simply Honey provides a variety of honey types, including Manuka, along with other bee products. The site focuses on easy purchasing and quick direct-to-door shipping of high-quality Australian honey.",
9258            link: "\/pages\/case-study-simply-honey"
9259          },
9260        
9261      
9262        
9263          {
9264            images: [
9265              "//codendesigner.com/cdn/shop/files/impact-ar-Home-final_1400x.png?v=1700471394"
9266              
9267              
9268              
9269              
9270              
9271            ],
9272            
9273            title: "Impact - قيادة الوعي الذاتي",
9274            category: "LearnWorlds",
9275            description: "This website focuses on Self-Awareness Leadership, offering programs or courses designed to help individuals achieve personal growth. It emphasizes the importance of self-awareness for leadership effectiveness and personal achievement. The site appears to provide training and resources in this area.",
9276            link: null
9277          },
9278        
9279      
9280        
9281          {
9282            images: [
9283              "//codendesigner.com/cdn/shop/files/Syntax-home_1400x.png?v=1695379496"
9284              
9285              
9286              
9287              
9288              
9289            ],
9290            
9291            title: "Syntax Academy",
9292            category: "LearnWorlds",
9293            description: "Syntax Academy: This website offers a vast library of engaging, hands-on online courses covering technology and business skills. Syntax Academy provides thousands of courses designed to help students gain practical knowledge. The platform features subjects ranging from web development to data analysis and business tools.",
9294            link: null
9295          },
9296        
9297      
9298        
9299          {
9300            images: [
9301              "//codendesigner.com/cdn/shop/files/millon-slide-image_1400x.png?v=1695463767"
9302              
9303              
9304              
9305              
9306              
9307            ],
9308            
9309            title: "Million Creator Academy",
9310            category: "LearnWorlds",
9311            description: "Million Creator Academy: This online academy focuses on enhancing skills and unleashing creative potential. Million Creator Academy offers courses designed to help individuals develop their creative abilities across various fields. It serves as a platform for creators seeking to improve their craft and achieve their goals.",
9312            link: null
9313          },
9314        
9315      
9316        
9317          {
9318            images: [
9319              "//codendesigner.com/cdn/shop/files/14_0bc97b67-e033-40ba-84f5-5002b89c9457_1400x.png?v=1676711736"
9320              
9321              
9322              
9323              
9324              
9325            ],
9326            
9327            title: "OMEGA ONLINE",
9328            category: "Shopify",
9329            description: "OMEGA ONLINE: This website is an online store specializing in Gifts \u0026 Souvenirs. OMEGA ONLINE offers a variety of products for sale, including home accessories and watches, providing customers with a range of items for purchase.",
9330            link: null
9331          },
9332        
9333      
9334        
9335          {
9336            images: [
9337              "//codendesigner.com/cdn/shop/files/2_bca795ea-0ca0-4106-9e83-cdb9ff7e62e7_1400x.png?v=1676711722"
9338              
9339                ,"//codendesigner.com/cdn/shop/files/adzimpact.com.au-Home-WORDPRESS_1400x.png?v=1747138980"
9340              
9341              
9342                ,"//codendesigner.com/cdn/shop/files/adzimpact.com.au-All-Categories-WORDPRESS_1400x.png?v=1747138979"
9343              
9344              
9345                ,"//codendesigner.com/cdn/shop/files/adzimpact.com.au-Blog-WORDPRESS_1400x.png?v=1747138979"
9346              
9347              
9348                ,"//codendesigner.com/cdn/shop/files/adzimpact.com.au-Contact-WORDPRESS_1400x.png?v=1747138978"
9349              
9350              
9351            ],
9352            
9353            title: "Adzimpact",
9354            category: "WordPress",
9355            description: "Adzimpact: An Australian-owned provider of branded merchandise and promotional products, operating since 2002. Adzimpact focuses on building collaborative partnerships and offering a wide range of high-quality, ethically sourced items. They provide innovative solutions for businesses looking for impactful branded products.",
9356            link: "\/pages\/case-study-adzimpact-1"
9357          },
9358        
9359      
9360        
9361          {
9362            images: [
9363              "//codendesigner.com/cdn/shop/files/abhoney.com.au-Home-WP_1400x.png?v=1747562208"
9364              
9365                ,"//codendesigner.com/cdn/shop/files/abhoney.com.au-Beekeepers-WP_1400x.png?v=1747223742"
9366              
9367              
9368                ,"//codendesigner.com/cdn/shop/files/abhoney.com.au-Quality-Food-WP_1400x.png?v=1747223752"
9369              
9370              
9371                ,"//codendesigner.com/cdn/shop/files/abhoney.com.au--News-and-Industry-WP_1400x.png?v=1747223744"
9372              
9373              
9374                ,"//codendesigner.com/cdn/shop/files/abhoney.com.au-Contact-Us-WO_1400x.png?v=1747223753"
9375              
9376              
9377                ,"//codendesigner.com/cdn/shop/files/abhoney.com.au--News-and-Industry-WP_1400x.png?v=1747223744"
9378              
9379            ],
9380            
9381            title: "AB's Honey",
9382            category: "WordPress",
9383            description: "AB's Honey: An Australian family-owned business with over 30 years of experience as bulk honey suppliers. AB's Honey provides businesses with a reliable supply of high-quality, 100% pure Australian honey, including Manuka honey. They offer various formats and private label services to meet wholesale honey needs.",
9384            link: "\/pages\/ab-honey-wp"
9385          },
9386        
9387      
9388        
9389          {
9390            images: [
9391              "//codendesigner.com/cdn/shop/files/4_d6e19fc2-1147-4312-803d-ce8d056b515d_1400x.png?v=1676711722"
9392              
9393              
9394              
9395              
9396              
9397            ],
9398            
9399            title: "Community COVID Counter",
9400            category: "WordPress",
9401            description: "Community COVID Counter: A volunteer initiative focused on suppressing the spread of COVID-19 within the Chicagoland Jewish community. This site enables anonymous reporting of positive cases to facilitate contact tracing. Community COVID Counter helps protect the community by providing information to curb the virus's spread.",
9402            link: null
9403          },
9404        
9405      
9406        
9407          {
9408            images: [
9409              "//codendesigner.com/cdn/shop/files/5_0f5335f1-ca8a-4bed-b5cf-8d0c0dd64181_1400x.png?v=1676711722"
9410              
9411              
9412              
9413              
9414              
9415            ],
9416            
9417            title: "Creative \u0026 co",
9418            category: "WordPress",
9419            description: "creative and co.: A creative agency specializing in graphic design and print services to elevate brands. creative and co. provides a step-by-step process from design to high-quality printed products. They offer fast, well-executed solutions for all graphic needs.",
9420            link: "\/pages\/case-study-creative-n-co"
9421          },
9422        
9423      
9424        
9425          {
9426            images: [
9427              "//codendesigner.com/cdn/shop/files/10_1b67068f-f049-40fb-ad4c-b98128b0b37c_1400x.png?v=1676711722"
9428              
9429              
9430              
9431              
9432              
9433            ],
9434            
9435            title: "ILP Academy",
9436            category: "wordpress",
9437            description: "ILP Academy: The ultimate destination for professional development aimed at learning and development professionals of all levels. ILP Academy offers a range of programs, courses, and resources, including opportunities to earn CPD points and digital badges. The platform supports L\u0026D professionals in growing their skills and advancing their careers.",
9438            link: null
9439          },
9440        
9441      
9442        
9443          {
9444            images: [
9445              "//codendesigner.com/cdn/shop/files/12_9b67e49c-9c3d-49e6-98e3-1f8bb8c081b3_1400x.png?v=1676711736"
9446              
9447              
9448              
9449              
9450              
9451            ],
9452            
9453            title: "ILP Learning \u0026 Development MARKETPLACE",
9454            category: "wordpress",
9455            description: "This website serves as a marketplace connecting the Learning \u0026 Development community. It allows users to find and browse various L\u0026D workshops, events, and services. The platform also enables learning providers to showcase their offerings.",
9456            link: null
9457          },
9458        
9459      
9460        
9461          {
9462            images: [
9463              "//codendesigner.com/cdn/shop/files/17_42881cf3-ec8a-49ca-9abf-35d57da26555_1400x.png?v=1676711736"
9464              
9465                ,"//codendesigner.com/cdn/shop/files/fs-schrafts2.com-Homepage-01-19-2025_06_43_PM_1400x.png?v=1737292236"
9466              
9467              
9468                ,"//codendesigner.com/cdn/shop/files/schrafts2.com-Our-reviews-WP_1400x.png?v=1747571200"
9469              
9470              
9471                ,"//codendesigner.com/cdn/shop/files/fs-schrafts2.com-Team-01-19-2025_06_43_PM_1400x.png?v=1737292237"
9472              
9473              
9474                ,"//codendesigner.com/cdn/shop/files/fs-schrafts2.com-Contact-01-19-2025_06_46_PM_1400x.png?v=1737292236"
9475              
9476              
9477            ],
9478            
9479            title: "Schraft's 2.0",
9480            category: "WordPress",
9481            description: "Schraft's 2.0: This website is dedicated to supporting individuals on their fertility journey. Schraft's 2.0 offers services or products related to fertility, providing support and potential savings upon registration. The site highlights positive customer feedback and reviews.",
9482            link: "\/pages\/case-study-schrafts2"
9483          },
9484        
9485      
9486        
9487          {
9488            images: [
9489              "//codendesigner.com/cdn/shop/files/19_f314389d-aa4e-4825-b2cb-93a05f1eceeb_1400x.png?v=1676711736"
9490              
9491                ,"//codendesigner.com/cdn/shop/files/therethinkgroup.net-1-1-Coac
9491hing-Advising-WP_1400x.png?v=1747223961"
9492              
9493              
9494                ,"//codendesigner.com/cdn/shop/files/therethinkgroup.net-Keynotes-WP_1400x.png?v=1747223959"
9495              
9496              
9497                ,"//codendesigner.com/cdn/shop/files/therethinkgroup.net-1-1-Coaching-Advising-WP_1400x.png?v=1747223961"
9498              
9499              
9500                ,"//codendesigner.com/cdn/shop/files/therethinkgroup.net-Homepage-WP_1400x.png?v=1747223969"
9501              
9502              
9503                ,"//codendesigner.com/cdn/shop/files/therethinkgroup.net-Intuition-Brain-Game-WP_1400x.png?v=1747223971"
9504              
9505            ],
9506            
9507            title: "The ReThink Group",
9508            category: "WordPress",
9509            description: "The ReThink Group: Specializing in Performance and Risk Decision Consulting, The ReThink Group helps clients improve decision-making and achieve optimal results. Utilizing The Shull Method, which leverages neuroscience and psychology, they offer coaching, e-learning, and workshops. The group works with professionals across finance, sport, and business to overcome mental challenges and enhance performance.",
9510            link: "\/pages\/case-study-the-rethink-group"
9511          },
9512        
9513      
9514        
9515          {
9516            images: [
9517              "//codendesigner.com/cdn/shop/files/ASN-About-Us-LearnWorlds_1400x.png?v=1747139845"
9518              
9519                ,"//codendesigner.com/cdn/shop/files/ASN-Home-LearnWorlds_1400x.png?v=1747139842"
9520              
9521              
9522                ,"//codendesigner.com/cdn/shop/files/asn-contuct-us-4-3_1400x.jpg?v=1746515541"
9523              
9524              
9525                ,"//codendesigner.com/cdn/shop/files/asn-Peoples-Feedback-1-1_1400x.jpg?v=1746516277"
9526              
9527              
9528                ,"//codendesigner.com/cdn/shop/files/ASN-About-Us-LearnWorlds_1400x.png?v=1747139845"
9529              
9530              
9531                ,"//codendesigner.com/cdn/shop/files/ASN-Courses-LearnWorlds_1400x.png?v=1747139843"
9532              
9533            ],
9534            
9535            title: "Asian Sustainability Network",
9536            category: "LearnWorlds",
9537            description: "Asian Sustainability Network (ASN): A dedicated platform providing resources, courses, and networking for sustainability professionals. ASN helps individuals and companies in Southeast Asia build skills and accelerate their transition to green practices. It serves as a vital hub for career development and industry connections in the sustainability sector.",
9538            link: "\/pages\/case-asn"
9539          }
9540        
9541      
9542    ];
9543    
9544    let currentIndex = 0;
9545    let currentSlideIndex = 0;
9546    
9547    // Setup masonry layout if enabled
9548    if (gallery.classList.contains('project-gallery-masonry')) {
9549      setupMasonryLayout();
9550      window.addEventListener('resize', setupMasonryLayout);
9551    }
9552    
9553    // Click event for project items
9554    projectItems.forEach((item, index) => {
9555      item.addEventListener('click', function() {
9556        const projectIndex = item.querySelector('.project-image, .project-video').dataset.projectIndex;
9557        openModal(parseInt(projectIndex));
9558      });
9559    });
9560    
9561    // Add hover events for videos in the gallery and handle clicks
9562    projectItems.forEach((item, index) => {
9563      // Get video if it exists
9564      const video = item.querySelector('.project-video');
9565      const videoIndicator = item.querySelector('.video-play-indicator');
9566      
9567      if (video) {
9568        // Play video on hover
9569        item.addEventListener('mouseenter', function() {
9570          video.play().catch(e => console.log('Auto-play prevented:', e));
9571          if (videoIndicator) videoIndicator.style.opacity = '0';
9572        });
9573        
9574        // Pause on mouse leave
9575        item.addEventListener('mouseleave', function() {
9576          video.pause();
9577          if (videoIndicator) videoIndicator.style.opacity = '0.8';
9578        });
9579      }
9580      
9581      // Click to open modal
9582      item.addEventListener('click', function() {
9583        const projectIndex = item.querySelector('.project-image, .project-video').dataset.projectIndex;
9584        openModal(parseInt(projectIndex));
9585      });
9586    });
9587    
9588    // Close modal events
9589    modalClose.addEventListener('click', closeModal);
9590    modalBackdrop.addEventListener('click', closeModal);
9591    
9592    // Navigation events
9593    modalPrev.addEventListener('click', showPrevProject);
9594    modalNext.addEventListener('click', showNextProject);
9595    
9596    // Slideshow control events
9597    slideshowPrev.addEventListener('click', function() {
9598      showSlide(currentSlideIndex - 1);
9599    });
9600    
9601    slideshowNext.addEventListener('click', function() {
9602      showSlide(currentSlideIndex + 1);
9603    });
9604    
9605    // No auto-scroll, just check if content is scrollable for the indicator
9606    
9607    // Keyboard events
9608    document.addEventListener('keydown', function(event) {
9609      if (!modal.classList.contains('active')) return;
9610      
9611      if (event.key === 'Escape') {
9612        closeModal();
9613      } else if (event.key === 'ArrowLeft') {
9614        if (event.altKey || event.shiftKey) {
9615          showPrevProject();
9616        } else {
9617          slideshowPrev.click();
9618        }
9619      } else if (event.key === 'ArrowRight') {
9620        if (event.altKey || event.shiftKey) {
9621          showNextProject();
9622        } else {
9623          slideshowNext.click();
9624        }
9625      }
9626    });
9627    
9628    // Functions
9629    function setupMasonryLayout() {
9630      const gridItems = document.querySelectorAll('.project-gallery-masonry .project-item');
9631      
9632      // Reset styles first
9633      gridItems.forEach(item => {
9634        item.style.gridRow = '';
9635      });
9636      
9637      // Only apply masonry effect on larger screens
9638      if (window.innerWidth >= 768) {
9639        gridItems.forEach((item, index) => {
9640          // Randomly assign different heights to create masonry effect
9641          if (index % 3 === 0) {
9642            item.style.gridRow = 'span 2';
9643          } else {
9644            item.style.gridRow = 'span 1';
9645          }
9646        });
9647      }
9648    }
9649    
9650    function openModal(index) {
9651      currentIndex = index;
9652      currentSlideIndex = 0; // Reset to first slide
9653      
9654      // Reset scroll position
9655      if (modalSlideshow) {
9656        modalSlideshow.scrollTop = 0;
9657        modalSlideshow.classList.remove('scrollable');
9658      }
9659      
9660      updateModalContent();
9661      
9662      // Display the modal
9663      modal.classList.add('active');
9664      document.body.style.overflow = 'hidden';
9665    }
9666    
9667    function closeModal() {
9668      modal.classList.remove('active');
9669      document.body.style.overflow = '';
9670    }
9671    
9672    function updateModalContent() {
9673      const project = projectData[currentIndex];
9674      
9675      // Clear existing slideshow and thumbnails
9676      modalSlideshow.innerHTML = '';
9677      modalThumbnails.innerHTML = '';
9678      
9679      // First handle main item (image or video)
9680      const mainSlide = document.createElement('div');
9681      mainSlide.className = 'slideshow-slide active';
9682      mainSlide.dataset.index = 0;
9683      
9684      // Check if there's a video
9685      if (project.video_url) {
9686        const video = document.createElement('video');
9687        video.className = 'slideshow-video';
9688        video.src = project.video_url;
9689        video.controls = true;
9690        video.autoplay = true; // Auto-play when opened
9691        video.muted = false; // Sound on
9692        video.playsInline = true;
9693        video.loop = true;
9694        
9695        // Attempt to play the video after a small delay
9696        setTimeout(() => {
9697          video.play().catch(e => console.log('Video play prevented:', e));
9698        }, 500);
9699        
9700        mainSlide.appendChild(video);
9701        modalSlideshow.appendChild(mainSlide);
9702        
9703        // Create video thumbnail
9704        const videoThumb = document.createElement('div');
9705        videoThumb.className = 'slideshow-thumbnail active';
9706        videoThumb.dataset.index = 0;
9707        
9708        const thumbContainer = document.createElement('div');
9709        thumbContainer.className = 'video-thumbnail-indicator';
9710        thumbContainer.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)"/><path d="M16 12L10 16V8L16 12Z" fill="white"/></svg>';
9711        
9712        // Use first image as thumbnail background
9713        const thumbBg = document.createElement('img');
9714        thumbBg.src = project.images[0];
9715        thumbBg.alt = 'Video Thumbnail';
9716        
9717        videoThumb.appendChild(thumbBg);
9718        videoThumb.appendChild(thumbContainer);
9719        
9720        modalThumbnails.appendChild(videoThumb);
9721        
9722        // Add click event
9723        videoThumb.addEventListener('click', function() {
9724          showSlide(parseInt(this.dataset.index));
9725        });
9726      }
9727      
9728      // Add all images (starting from index 0 if no video, or index 1 if there's a video)
9729      const startIndex = project.video_url ? 1 : 0;
9730      
9731      project.images.forEach((imageUrl, i) => {
9732        // Skip first image if we already added a video
9733        if (project.video_url && i === 0) return;
9734        
9735        // Create slide
9736        const slide = document.createElement('div');
9737        slide.className = `slideshow-slide ${project.video_url ? '' : (i === 0 ? 'active' : '')}`;
9738        slide.dataset.index = project.video_url ? i : i;
9739        
9740        const img = document.createElement('img');
9741        img.className = 'slideshow-image';
9742        img.src = imageUrl;
9743        img.alt = `${project.title} - ${project.video_url ? 'Image ' + i : 'Image ' + (i + 1)}`;
9744        
9745        slide.appendChild(img);
9746        modalSlideshow.appendChild(slide);
9747        
9748        // Create thumbnail
9749        const thumbnail = document.createElement('div');
9750        thumbnail.className = `slideshow-thumbnail ${project.video_url ? '' : (i === 0 ? 'active' : '')}`;
9751        thumbnail.dataset.index = project.video_url ? i : i;
9752        
9753        const thumbImg = document.createElement('img');
9754        thumbImg.src = imageUrl;
9755        thumbImg.alt = `Thumbnail ${project.video_url ? i : i + 1}`;
9756        
9757        thumbnail.appendChild(thumbImg);
9758        modalThumbnails.appendChild(thumbnail);
9759        
9760        // Add click event to thumbnail
9761        thumbnail.addEventListener('click', function() {
9762          showSlide(parseInt(this.dataset.index));
9763        });
9764      });
9765      
9766      // Update project info
9767      modalTitle.textContent = project.title;
9768      modalCategory.textContent = project.category;
9769      modalDescription.textContent = project.description;
9770      
9771      // Update link
9772      if (project.link) {
9773        modalLink.href = project.link;
9774        modalLinkContainer.style.display = 'block';
9775      } else {
9776        modalLinkContainer.style.display = 'none';
9777      }
9778      
9779      // Update navigation visibility
9780      modalPrev.style.visibility = currentIndex > 0 ? 'visible' : 'hidden';
9781      modalNext.style.visibility = currentIndex < projectData.length - 1 ? 'visible' : 'hidden';
9782      
9783      // Show/hide slideshow controls based on number of images
9784      const showControls = project.images.length > 1;
9785      slideshowPrev.style.display = showControls ? 'flex' : 'none';
9786      slideshowNext.style.display = showControls ? 'flex' : 'none';
9787      modalThumbnails.style.display = showControls ? 'flex' : 'none';
9788    }
9789    
9790    function showPrevProject() {
9791      if (currentIndex > 0) {
9792        currentIndex--;
9793        currentSlideIndex = 0; // Reset to first slide
9794        updateModalContent();
9795      }
9796    }
9797    
9798    function showNextProject() {
9799      if (currentIndex < projectData.length - 1) {
9800        currentIndex++;
9801        currentSlideIndex = 0; // Reset to first slide
9802        updateModalContent();
9803      }
9804    }
9805    
9806    function showSlide(index) {
9807      const slides = modalSlideshow.querySelectorAll('.slideshow-slide');
9808      const thumbnails = modalThumbnails.querySelectorAll('.slideshow-thumbnail');
9809      
9810      // Ensure index is within bounds
9811      if (index < 0) index = slides.length - 1;
9812      if (index >= slides.length) index = 0;
9813      
9814      currentSlideIndex = index;
9815      
9816      // Pause any playing videos
9817      modalSlideshow.querySelectorAll('video').forEach(video => {
9818        video.pause();
9819      });
9820      
9821      // Reset scroll position when changing slides
9822      modalSlideshow.scrollTop = 0;
9823      
9824      // Remove scrollable class - will be added if needed
9825      modalSlideshow.classList.remove('scrollable');
9826      
9827      // Update slides
9828      slides.forEach((slide, i) => {
9829        if (i === index) {
9830          slide.classList.add('active');
9831          
9832          // Play video if this slide has one
9833          const video = slide.querySelector('video');
9834          if (video) {
9835            // Attempt to play the video
9836            video.play().catch(e => console.log('Video play prevented:', e));
9837          } else if (index > 0) {
9838            // Scroll arrow: never on the 1st slide, only if this slide really scrolls
9839            const img = slide.querySelector('.slideshow-image');
9840            const checkScrollable = function() {
9841              if (slide.classList.contains('active') && modalSlideshow.scrollHeight > modalSlideshow.clientHeight + 1) {
9842                modalSlideshow.classList.add('scrollable');
9843              }
9844            };
9845            if (img.complete) {
9846              checkScrollable();
9847            } else {
9848              img.onload = checkScrollable;
9849            }
9850          }
9851        } else {
9852          slide.classList.remove('active');
9853        }
9854      });
9855      
9856      // Update thumbnails
9857      thumbnails.forEach((thumb, i) => {
9858        if (i === index) {
9859          thumb.classList.add('active');
9860          // Scroll thumbnail into view if needed
9861          thumb.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
9862        } else {
9863          thumb.classList.remove('active');
9864        }
9865      });
9866    }
9867    
9868        // All auto-scroll functionality has been removed
9869  }
9870</script>
9870
9871
9872
9873<style> #shopify-section-template--18633345794095__case_study_gallery_v3_9Uz7mH .project-gallery-container {max-width: 100%; padding: 0 4%;} #shopify-section-template--18633345794095__case_study_gallery_v3_9Uz7mH .project-filters {display: none;} #shopify-section-template--18633345794095__case_study_gallery_v3_9Uz7mH .project-modal-link-container {display: none !important;} </style></section><section id="shopify-section-template--18633345794095__custom_liquid_XCbjAU" class="shopify-section section"><style data-shopify>.section-template--18633345794095__custom_liquid_XCbjAU-padding {
9874    padding-top: calc(0px * 0.75);
9875    padding-bottom: calc(0px  * 0.75);
9876  }
9877
9878  @media screen and (min-width: 750px) {
9879    .section-template--18633345794095__custom_liquid_XCbjAU-padding {
9880      padding-top: 0px;
9881      padding-bottom: 0px;
9882    }
9883  }</style><div class="color-background-1 gradient">
9884  <div class="section-template--18633345794095__custom_liquid_XCbjAU-padding">
9885    <style>
9886@media screen and (max-width: 641px) {
9887  .logos {
9888    top: 350px !important;
9889  }
9890}
9891@media screen and (max-width: 500px) {
9892  /*.mobile-3d {
9893    display: none;
9894  } */
9895  .logos {
9896    top: 270px !important;
9897  }
9898}
9899</style>
9900  </div>
9901</div>
9902
9903
9904</section>
9905    </main>
9906
9907    <!-- BEGIN sections: footer-group -->
9908<div id="shopify-section-sections--18633344024623__footer" class="shopify-section shopify-section-group-footer-group">
9909<link href="//codendesigner.com/cdn/shop/t/19/assets/section-footer.css?v=29640687956118599371748333775" rel="stylesheet" type="text/css" media="all" />
9910<link href="//codendesigner.com/cdn/shop/t/19/assets/section-footer-modern.css?v=145159197766983346851784095132" rel="stylesheet" type="text/css" media="all" />
9911<link rel="stylesheet" href="//codendesigner.com/cdn/shop/t/19/assets/component-list-menu.css?v=151968516119678728991748333774" media="print" onload="this.media='all'">
9912<link rel="stylesheet" href="//codendesigner.com/cdn/shop/t/19/assets/component-list-payment.css?v=69253961410771838501748333774" media="print" onload="this.media='all'">
9913<link rel="stylesheet" href="//codendesigner.com/cdn/shop/t/19/assets/component-list-social.css?v=52211663153726659061748333775" media="print" onload="this.media='all'">
9914
9915<noscript><link href="//codendesigner.com/cdn/shop/t/19/assets/component-list-menu.css?v=151968516119678728991748333774" rel="stylesheet" type="text/css" media="all" /></noscript>
9916<noscript><link href="//codendesigner.com/cdn/shop/t/19/assets/component-list-payment.css?v=69253961410771838501748333774" rel="stylesheet" type="text/css" media="all" /></noscript>
9917<noscript><link href="//codendesigner.com/cdn/shop/t/19/assets/component-list-social.css?v=52211663153726659061748333775" rel="stylesheet" type="text/css" media="all" /></noscript><style data-shopify>.footer { margin-top: 0px; }
9918  @media screen and (min-width: 750px) {
9919    .footer { margin-top: 0px; }
9920  }</style><footer class="footer footer-modern color-inverse gradient">
9921
9922  <div class="footer__inner page-width"><div class="footer__brand"></div><nav class="footer__nav" aria-label="Footer navigation"></nav>
9923
9924  </div><div class="footer__bottom">
9925    <div class="footer__bottom-inner page-width">
9926
9927      <p class="footer__copyright">
9928        &copy; 2026 Codendesigner
9929&nbsp;&middot;&nbsp;<a href="/policies/privacy-policy">Privacy policy</a>&nbsp;&middot;&nbsp;<a href="/policies/terms-of-service">Terms of service</a>&nbsp;&middot;&nbsp;<a href="/policies/contact-information">Contact information</a></p></div>
9930  </div>
9931
9932</footer>
9933
9934
9935
9936
9937<style> #shopify-section-sections--18633344024623__footer .footer__localization:empty {display: none !important;} #shopify-section-sections--18633344024623__footer .shopify-policy__title {display: none !important;} </style></div>
9938<!-- END sections: footer-group -->
9939
9940    <ul hidden>
9941      <li id="a11y-refresh-page-message">Choosing a selection results in a full page refresh.</li>
9942      <li id="a11y-new-window-message">Opens in a new window.</li>
9943    </ul>
9944 </div>
9945    
9945<script>
9946      window.shopUrl = 'https://codendesigner.com';
9947      window.routes = {
9948        cart_add_url: '/cart/add',
9949        cart_change_url: '/cart/change',
9950        cart_update_url: '/cart/update',
9951        cart_url: '/cart',
9952        predictive_search_url: '/search/suggest'
9953      };
9954
9955      window.cartStrings = {
9956        error: `There was an error while updating your cart. Please try again.`,
9957        quantityError: `You can only add [quantity] of this item to your cart.`
9958      }
9959
9960      window.variantStrings = {
9961        addToCart: `Add to cart`,
9962        soldOut: `Sold out`,
9963        unavailable: `Unavailable`,
9964        unavailable_with_option: `[value] - Unavailable`,
9965      }
9966
9967      window.accessibilityStrings = {
9968        imageAvailable: `Image [index] is now available in gallery view`,
9969        shareSuccess: `Link copied to clipboard`,
9970        pauseSlideshow: `Pause slideshow`,
9971        playSlideshow: `Play slideshow`,
9972      }
9973    </script>
9973<script src="//codendesigner.com/cdn/shop/t/19/assets/predictive-search.js?v=16985596534672189881748333777" defer="defer"></script>
9973<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js" defer="defer"></script>
9973
9974    
9974<script src="//codendesigner.com/cdn/shop/t/19/assets/cnd.js?v=98624883729582473891758556141" defer="defer"></script>
9974
9975  <!-- [if lte IE 9]>
9975<script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script>
9975<![endif] -->
9976  
9976<script src="//cdn.shopify.com/s/files/1/0194/1736/6592/t/1/assets/booster-page-speed-optimizer.js?23" type="text/javascript"></script>
9976
9977 
9978
9979    
9979<script>
9980      var sburlToPreload, sbmouseoverTimer, sblastTouchTimestamp;
9981    var sbprefetcher = document.createElement("link")
9982      , sbisSupported = sbprefetcher.relList && sbprefetcher.relList.supports && sbprefetcher.relList.supports("prefetch")
9983      , sbisDataSaverEnabled = navigator.connection && navigator.connection.saveData
9984      , sballowQueryString = "instantsballowQueryString"in document.body.dataset
9985      , sballowExternalLinks = "instantsballowExternalLinks"in document.body.dataset;
9986    if (sbisSupported && !sbisDataSaverEnabled) {
9987        //console.log('sbisSupported',sbisSupported,'sbisDataSaverEnabled',sbisDataSaverEnabled);
9988        sbprefetcher.rel = "prefetch",
9989        document.head.appendChild(sbprefetcher);
9990        var e = {
9991            capture: !0,
9992            passive: !0
9993        };
9994        document.addEventListener("touchstart", touchstartListener, e),
9995        document.addEventListener("mouseover", mouseoverListener, e)
9996    }
9997    function touchstartListener(e) {
9998        //console.log('touchstartListener');
9999        sblastTouchTimestamp = performance.now();
10000        var t = e.target.closest("a");
10001        isPreloadable(t) && (t.addEventListener("touchcancel", touchendAndTouchcancelListener, {
10002            passive: !0
10003        }),
10004        t.addEventListener("touchend", touchendAndTouchcancelListener, {
10005            passive: !0
10006        }),
10007        sburlToPreload = t.href,
10008        preload(t.href))
10009    }
10010    function touchendAndTouchcancelListener() {
10011        //console.log('touchendAndTouchcancelListener');
10012        sburlToPreload = void 0,
10013        stopPreloading()
10014    }
10015    function mouseoverListener(e) {
10016        //console.log('mouseoverListener');
10017        if (performance.now() - sblastTouchTimestamp < 1100)
10018            return;
10019        var t = e.target.closest("a");
10020        isPreloadable(t) && (t.addEventListener("mouseout", mouseoutListener, {
10021            passive: !0
10022        }),
10023        sburlToPreload = t.href,
10024        sbmouseoverTimer = setTimeout(()=>{
10025            preload(t.href),
10026            sbmouseoverTimer = void 0
10027        }
10028        , 65))
10029    }
10030    function mouseoutListener(e) {
10031      //console.log('mouseoutListener');
10032      
10033        e.relatedTarget && e.target.closest("a") == e.relatedTarget.closest("a") || (sbmouseoverTimer ? (clearTimeout(sbmouseoverTimer),
10034        sbmouseoverTimer = void 0) : (sburlToPreload = void 0,
10035        stopPreloading()))
10036    }
10037    function isPreloadable(e) {
10038      //console.log('isPreloadable');
10039        if (!e || !e.href)
10040            return;
10041        if (sburlToPreload == e.href)
10042            return;
10043        var t = new URL(e.href);
10044        return !(!(sballowExternalLinks || t.origin == location.origin || "instant"in e.dataset) || !["http:", "https:"].includes(t.protocol) || "http:" == t.protocol && "https:" == location.protocol || !(sballowQueryString || !t.search || "instant"in e.dataset) || t.hash && t.pathname + t.search == location.pathname + location.search || "noInstant"in e.dataset) || void 0
10045    }
10046    function preload(e) {
10047      //console.log('preload');
10048        sbprefetcher.href = e
10049    }
10050    function stopPreloading() {
10051      //console.log('stop preloading');
10052        sbprefetcher.removeAttribute("href")
10053    }
10054    </script>
10054
10055    
10056    
10057  <style> @media screen and (max-width: 1100px) {.hero-text {padding-right: 50px; }} @media screen and (max-width: 640px) {.hero-left.services {margin-bottom: 40px; } .hero-section.home {min-height: 1250px; } ._3d-container {box-sizing: border-box; } .client_review {min-height: ; } .hero-bottom-bg {height: 322px; } .hero-bottom-bg {padding-bottom: 50px; height: 230px !important; } .hero-text {font-size: 40px; } .team-text-box div:last-child {font-size: 16px; } .intro-box .intro-mobile {padding-bottom: 90px; } .curve-text-box a {font-size: 18px; }} @media screen and (max-width: 479px) {a.brand.w-inline-block {width: 80%; display: flex; align-items: center; } .navigation .content-wrapper.w-container {display: flex; align-items: center; }} </style>
10058<div id="shopify-block-AU3RpOHNzMElZU0pJQ__6143736321357441667" class="shopify-block shopify-app-block">
10059<script src="//code.tidio.co/roxzy11vnkhpvse2cetv0sumdnztcllz.js?extensionVersion=1.4.1" async></script>
10059
10060
10061    <!-- BEGIN app snippet: visitor-identity-verification -->
10062
10063
10064
10065
10066<!-- END app snippet -->
10067
10068</div>
10068<script src="https://cdn.shopify.com/storefront/standard-actions.js" type="module" data-source-attribution="shopify.standard_actions"></script>
10068
10069</body>
10070</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.