PageSourceSearch

https://www.maddatu.com/blog

html maddatu.com collected 2026-10-09 22:40:27 UTC 60,853 bytes, 2,129 lines download raw bytes

1
2<!DOCTYPE html>
3<html lang="en">
4
5<head>
6    <meta charset="UTF-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <meta http-equiv="X-UA-Compatible" content="ie=edge">
9    <meta name="referrer" content="origin">
10
11    <title>Making courses accessible for all, incl. those with disabilities</title>
12
13    <!--
13<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js?ver=2.43"></script>
13-->
14    
14<script src="/fe/js/jquery-3.6.0.min.js?ver=2.43"></script>
14
15    
15<script src="https://js.stripe.com/v3/"></script>
15
16
17            
17<script src="/fe/js/vue.min.js?ver=2.43"></script>
17
18    
19    
19<script src="/fe/js/axios.min.js?ver=2.43"></script>
19
20
21    
21<script src="/fe/js/[email protected]_dist_min_dropzone.min.js?ver=2.43"></script>
21
22    <link href="/fe/css/[email protected]_dist_min_dropzone.min.css?ver=2.43" rel="stylesheet">
23
24    <link rel="stylesheet" href="/fe/css/tailwind.css?ver=2.43">
25
26    <link rel="shortcut icon" type="image/png" sizes="32x32" href="https://membervault.s3-us-west-2.amazonaws.com/websitefae/favicon-32x32.png">
27    <link rel="apple-touch-icon" sizes="32x32" href="https://membervault.s3-us-west-2.amazonaws.com/websitefae/favicon-32x32.png">
28
29    <!-- font awesome icons -->
30    <link href="/fe/font-awesome/css/fontawesome.css" rel="stylesheet" />
31    <link href="/fe/font-awesome/css/brands.css" rel="stylesheet" />
32    <link href="/fe/font-awesome/css/solid.css" rel="stylesheet" />
33
34
35    <meta property="og:url" content="https://www.maddatu.com/blog" />
36    <meta property="og:type" content="product" />
37    <meta property="og:title" content="Making courses accessible for all, incl. those with disabilities" />
38    <meta property="og:description" content="Transform your online course platform with Website Fae. We specialize in making Membervault accessible for all learners, including those with disabilities. Learn more and improve your course platform today!" />
39    <meta name="description" content="Transform your online course platform with Website Fae. We specialize in making Membervault accessible for all learners, including those with disabilities. Learn more and improve your course platform today!" />
40    <meta property="og:image" content="https://s3.membervaultcdn.com/websitefae/6a96e7249cfe1_maddatu white.png?v=1788274469" />
41    <meta property="fb:app_id" content="1565181327351981" />
42
43
44            <!--------------- GOOGLE FONTS -------------------->
45        <link rel="preconnect" href="https://fonts.gstatic.com">
46
47                    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
48            <style>
49                body {
50                    font-family: 'Quicksand', sans-serif;
51                }
52            </style>
53                    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
54            <style>
55                h1,
56                h2,
57                h3,
58                h4,
59                h5,
60                h6 {
61                    font-family: 'Quicksand', sans-serif;
62                }
63            </style>
64            
65
66    <style>
67        .mv_custom_button,
68        .mv_content a.mv_custom_button {
69            background-color: #F51679;
70            border-color: #F51679;
71            color: #FFFFFF;
72        }
73
74        .mv_custom_second_button,
75        .mv_content a.mv_custom_second_button {
76            color: #F51679;
77            border-color: #F51679;
78        }
79
80        .mv_custom_text {
81            color: #F51679;
82        }
83
84        .mv_custom_border {
85            border-color: #F51679;
86        }
87
88        .mv_custom_bg {
89            background-color: #F51679;
90            color: #FFFFFF;
91        }
92
93        .mv_content a {
94            color: #F51679;
95        }
96
97        .pagination .paginate_button.active {
98            background-color: #F51679;
99            border-color: #F51679;
100            color: #FFFFFF;
101        }
102    </style>
103
104    <style>
105        /*MODULE/PRODUCT TEXT FONT AND COLOUR*/
106/* Force text-green-600 to use your brand green */
107.text-green-600 {
108  color: #003f2e !important;
109}
110
111/* Force bg-green-600 to use your brand green */
112.bg-green-600 {
113  background-color: #003f2e !important;
114}
115
116/* Optional: override hover/focus if used */
117.hover\:text-green-600:hover {
118  color: #003f2e !important;
119}
120.hover\:bg-green-600:hover {
121  background-color: #003f2e !important;
122}
123h2.text-lg.font-semibold {
124  color: #003f2e !important;
125  font-family: 'Rosario', sans-serif !important;
126  font-weight: 700 !important; /* Makes it bold */
127}
128/*END OF MODULE/PRODUCT TEXT FONT AND COLOUR*/
129
130/*PINK CUSTOM BUTTON*/
131a.mv_custom_button.mv_pink_button {
132    background-color: #f51679;
133    color: #FFFFFF;
134    border-radius: 10px;
135    padding: 10px 20px;
136    display: inline-block;
137    font-size: 20px;
138    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.65);
139}
140
141/*2 COLUMNS*/
142/* Row Layout (no automatic centering) */
143.row {
144    display: flex;
145    flex-wrap: wrap; /* Allow wrapping on smaller screens */
146    justify-content: flex-start; /* Set to 'flex-start' for left alignment, 'center' or 'space-between' can be used if you want other alignments */
147}
148/* Column Styling */
149.column {
150    flex: 1 1 45%; /* Adjust column size */
151    padding: 10px;
152    display: flex;
153    flex-direction: column; /* Stack icon and text vertically */
154    justify-content: center;
155    align-items: center; /* Can adjust if you want different positioning */
156}
157
158/* For mobile screens */
159@media screen and (max-width: 600px) {
160    .row {
161        flex-direction: column; /* Stack columns vertically */
162    }
163    .column {
164        width: 100%; /* Ensure columns take full width on mobile */
165    }
166}
167
168/* CUSTOM FONTS */
169h2 { font-family: 'Emilys Candy', cursive; color: #f51679; }
170h3, h4, h5, h6 { font-family: 'Rosario', sans-serif; }
171
172/* WELCOME AREA */
173#mv_welcome_area {
174  background: #003f2e !important;
175  color: #ffffff !important;
176}
177
178#mv_welcome_area img.shadow-lg {
179  box-shadow: none;
180  float: right;
181  margin-left: 20px;
182  margin-bottom: 20px;
183}
184
185/*
186  MADDATU HOMEPAGE CONTENT STYLES
187  Page-content CSS only.
188
189  IMPORTANT:
190  - Existing Maddatu HTML classes are preserved.
191  - MemberVault header and footer are intentionally NOT styled here.
192  - No global html/body/header/footer rules are used so MemberVault's site chrome remains unchanged.
193  - Quicksand is used only inside #main-content.
194  - Colour choices prioritise WCAG 2.2 AA and AAA where practical.
195*/
196
197@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');
198
199#main-content {
200  --color-primary: #0f3d32;
201  --color-primary-dark: #07241E;
202  --color-accent: #f51679;
203  --color-accent-accessible: #f51679;
204  --color-bg-cream: #faf7f4;
205  --color-bg-white: #FFFFFF;
206  --color-text-dark: #333333;
207  --color-text-light: #faf7f4;
208  --color-border: #9E9E9E;
209  --color-border-light: #E5E5EE;
210  --color-focus-dark: #07241E;
211  --color-focus-light: #FFFFFF;
212  --font-primary: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
213
214  font-family: var(--font-primary);
215  font-size: 100%;
216  line-height: 1.625;
217  color: var(--color-text-dark);
218  background: var(--color-bg-white);
219  margin: 0 !important;
220  padding: 0 !important;
221}
222
223#main-content,
224#main-content *,
225#main-content *::before,
226#main-content *::after {
227  box-sizing: border-box;
228}
229
230#main-content img {
231  max-width: 100%;
232}
233
234#main-content .image-placeholder {
235  display: flex;
236  align-items: center;
237  justify-content: center;
238  width: 100%;
239  min-height: 180px;
240  padding: 20px;
241  background-color: var(--color-bg-cream);
242  color: var(--color-primary);
243  border: 2px solid var(--color-accent);
244  font-size: 1rem;
245  font-weight: 700;
246  text-align: center;
247}
248
249#main-content a {
250  color: var(--color-accent-accessible);
251}
252
253/* Keyboard focus. No global focus reset so MemberVault remains unaffected. */
254#main-content :focus-visible,
255.skip-link:focus-visible {
256  outline: 3px solid var(--color-focus-light);
257  outline-offset: 4px;
258  box-shadow: 0 0 0 6px var(--color-focus-dark);
259}
260
261/* Skip link */
262.skip-link {
263  position: absolute;
264  left: -9999px;
265  top: 8px;
266  z-index: 10000;
267  width: auto;
268  height: auto;
269  padding: 12px 24px;
270  background: var(--color-accent-accessible);
271  color: #FFFFFF !important;
272  border-radius: 6px;
273  font-family: var(--font-primary);
274  font-size: 1rem;
275  font-weight: 700;
276  text-decoration: none;
277}
278
279.skip-link:focus-visible {
280  left: 8px;
281  top: 8px;
282  outline-color: #FFFFFF;
283  box-shadow: 0 0 0 6px var(--color-primary-dark);
284}
285
286/* Layout */
287#main-content .container {
288  width: 100%;
289  max-width: 1200px;
290  margin: 0 auto;
291  padding: 0 24px;
292}
293
294#main-content .section-padding {
295  padding: 90px 0;
296}
297
298#main-content .bg-cream {
299  background-color: var(--color-bg-cream);
300}
301
302#main-content .bg-white {
303  background-color: var(--color-bg-white);
304}
305
306#main-content .text-center {
307  text-align: center;
308}
309
310#main-content .max-width-800 {
311  max-width: 800px;
312  margin-right: auto;
313  margin-left: auto;
314}
315
316/* Typography */
317#main-content h1,
318#main-content h2,
319#main-content h3,
320#main-content h4 {
321  font-family: var(--font-primary);
322  color: var(--color-primary);
323  line-height: 1.2;
324  margin-top: 0;
325}
326
327#main-content h1 {
328  font-size: 3rem;
329  letter-spacing: -0.02em;
330  margin-bottom: 24px;
331  font-weight: 700;
332}
333
334#main-content h2 {
335  font-size: 2.25rem;
336  margin-bottom: 24px;
337  font-weight: 700;
338}
339
340#main-content h1,
341#main-content h3 {
342  color: var(--color-primary);
343}
344
345#main-content h2,
346#main-content h4 {
347  color: var(--color-accent);
348}
349
350#main-content h3 {
351  font-size: 1.625rem;
352  margin-bottom: 16px;
353  font-weight: 600;
354}
355
356#main-content h4 {
357  font-size: 1.25rem;
358  margin-bottom: 12px;
359  font-weight: 600;
360}
361
362#main-content p {
363  margin-top: 0;
364  margin-bottom: 24px;
365}
366
367#main-content em {
368  font-style: italic;
369}
370
371#main-content p.lead {
372  font-size: 1.25rem;
373  font-weight: 500;
374  line-height: 1.6;
375}
376
377/* Buttons: three existing classes remain three distinct styles. */
378#main-content .btn {
379  display: inline-flex;
380  align-items: center;
381  justify-content: center;
382  min-height: 48px;
383  font-family: var(--font-primary);
384  font-size: 1rem;
385  line-height: 1.2;
386  font-weight: 700;
387  text-decoration: none;
388  padding: 14px 28px;
389  border-radius: 6px;
390  border: 2px solid transparent;
391  cursor: pointer;
392  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
393}
394
395/* Pink filled */
396#main-content .btn-primary {
397  background-color: var(--color-accent-accessible);
398  color: #FFFFFF !important;
399  border-color: var(--color-accent-accessible);
400  box-shadow: 0 4px 8px rgba(15, 61, 50, 0.15);
401}
402
403#main-content .btn-primary:hover {
404  background-color: var(--color-primary-dark);
405  color: #FFFFFF !important;
406  border-color: var(--color-primary-dark);
407}
408
409/* Green filled */
410#main-content .btn-secondary {
411  background-color: var(--color-primary);
412  color: #FFFFFF !important;
413  border-color: var(--color-primary);
414  box-shadow: 0 4px 8px rgba(15, 61, 50, 0.15);
415}
416
417#main-content .btn-secondary:hover {
418  background-color: var(--color-primary-dark);
419  color: #FFFFFF !important;
420  border-color: var(--color-primary-dark);
421}
422
423/* Pink outline */
424#main-content .btn-outline {
425  background-color: #FFFFFF;
426  color: var(--color-accent-accessible) !important;
427  border-color: var(--color-accent-accessible);
428}
429
430#main-content .btn-outline:hover {
431  background-color: var(--color-accent-accessible);
432  color: #FFFFFF !important;
433  border-color: var(--color-accent-accessible);
434}
435
436#main-content .btn-full {
437  width: 100%;
438}
439
440/* Hero */
441#main-content .hero-section {
442  background-color: var(--color-primary-dark);
443  color: #FFFFFF;
444  padding: 80px 0;
445  overflow: hidden;
446  margin-top: 0 !important;
447}
448
449#main-content .hero-section h1 {
450  color: #ffffff;
451}
452
453#main-content .hero-grid {
454  display: grid;
455  grid-template-columns: 1.2fr 0.8fr;
456  gap: 60px;
457  align-items: center;
458}
459
460#main-content .hero-text-block {
461  text-align: left;
462}
463
464#main-content .byline-block {
465  display: flex;
466  align-items: center;
467  gap: 16px;
468  margin-bottom: 24px;
469  background-color: rgba(250, 247, 244, 0.06);
470  padding: 12px 18px;
471  border-radius: 8px;
472  border: 1px solid rgba(250, 247, 244, 0.45);
473}
474
475#main-content .byline-portrait-container {
476  width: 50px;
477  height: 50px;
478  border-radius: 50%;
479  overflow: hidden;
480  border: 2px solid var(--color-accent);
481  flex-shrink: 0;
482}
483
484#main-content .byline-portrait {
485  width: 100%;
486  height: 100%;
487  object-fit: cover;
488}
489
490#main-content .byline-text {
491  display: flex;
492  flex-direction: column;
493  font-size: 0.95rem;
494}
495
496#main-content .byline-author {
497  color: #FFFFFF;
498}
499
500#main-content .byline-desc {
501  color: #FFFFFF;
502}
503
504#main-content .byline-link {
505  color: #FFB3CB !important;
506  text-decoration: underline;
507  text-decoration-thickness: 0.12em;
508  text-underline-offset: 0.15em;
509  font-weight: 700;
510}
511
512#main-content .byline-link:hover {
513  color: #FFFFFF !important;
514}
515
516#main-content .hero-subheadline {
517  font-size: 1.4rem;
518  font-weight: 700;
519  color: #FFB3CB;
520  margin-bottom: 24px;
521  line-height: 1.55;
522}
523
524#main-content .answer-block {
525  background-color: rgba(250, 247, 244, 0.08);
526  border-left: 4px solid var(--color-accent);
527  padding: 16px 20px;
528  border-radius: 0 8px 8px 0;
529  margin-bottom: 30px;
530}
531
532#main-content .answer-block p {
533  margin: 0;
534  font-size: 1.05rem;
535  line-height: 1.6;
536  color: #FFFFFF;
537}
538
539#main-content .hero-image-block {
540  display: flex;
541  justify-content: center;
542  align-items: center;
543}
544
545#main-content .hero-large-img {
546  width: 100%;
547  max-width: 340px;
548  height: auto;
549  border-radius: 12px;
550  border: 4px solid var(--color-accent);
551  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
552}
553
554/* Problem */
555#main-content .problem-grid {
556  display: grid;
557  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
558  gap: 20px;
559  margin: 40px 0;
560}
561
562#main-content .problem-card {
563  background-color: var(--color-bg-white);
564  border-left: 4px solid var(--color-accent);
565  border-radius: 4px;
566  padding: 24px;
567  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
568  display: flex;
569  align-items: flex-start;
570  gap: 16px;
571  text-align: left;
572}
573
574#main-content .problem-bullet {
575  color: var(--color-accent-accessible);
576  font-size: 1.15rem;
577  flex-shrink: 0;
578  font-weight: 700;
579}
580
581#main-content .problem-text {
582  margin: 0;
583  font-weight: 500;
584  font-size: 1.05rem;
585}
586
587#main-content .problem-outro {
588  background-color: rgba(15, 61, 50, 0.04);
589  border: 1px dashed var(--color-primary);
590  border-radius: 8px;
591  padding: 30px;
592  max-width: 700px;
593  margin: 40px auto 0 auto;
594}
595
596#main-content .problem-outro p {
597  font-size: 1.15rem;
598  font-weight: 600;
599  color: var(--color-primary-dark);
600  margin-bottom: 20px;
601}
602
603/* Services */
604#main-content .services-subheading {
605  text-align: center;
606  margin-top: 50px;
607  margin-bottom: 35px;
608}
609
610#main-content .services-grid {
611  display: grid;
612  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
613  gap: 24px;
614  margin-bottom: 40px;
615}
616
617#main-content .service-card {
618  background-color: var(--color-bg-cream);
619  border: 1px solid var(--color-border);
620  border-radius: 8px;
621  padding: 30px;
622  display: flex;
623  flex-direction: column;
624  transition: transform 0.2s ease, box-shadow 0.2s ease;
625}
626
627#main-content .service-card:hover {
628  transform: translateY(-4px);
629  box-shadow: 0 8px 16px rgba(15, 61, 50, 0.08);
630}
631
632#main-content .service-image-container {
633  width: 100%;
634  height: auto;
635  border-radius: 6px;
636  overflow: hidden;
637  border: 1px solid var(--color-border);
638  margin-bottom: 20px;
639}
640
641#main-content .service-card-img {
642  width: 100%;
643  height: auto;
644  display: block;
645}
646
647#main-content .service-title-row {
648  display: flex;
649  align-items: center;
650  gap: 12px;
651  margin-bottom: 12px;
652}
653
654#main-content .service-card-icon {
655  font-size: 1.4rem;
656  color: var(--color-primary);
657}
658
659#main-content .service-card h4 {
660  margin: 0;
661  font-size: 1.25rem;
662}
663
664#main-content .service-card p {
665  margin: 0;
666  font-size: 1rem;
667  line-height: 1.6;
668}
669
670#main-content .services-notice {
671  text-align: center;
672  font-style: italic;
673  font-size: 1rem;
674  color: var(--color-text-dark);
675  max-width: 750px;
676  margin: 40px auto 0 auto;
677}
678
679/* Pricing */
680#main-content .work-grid {
681  display: grid;
682  grid-template-columns: 1fr 1fr;
683  gap: 32px;
684  margin-top: 50px;
685  align-items: stretch;
686}
687
688#main-content .work-card {
689  background-color: var(--color-bg-white);
690  border: 1px solid var(--color-border);
691  border-radius: 12px;
692  padding: 40px;
693  display: flex;
694  flex-direction: column;
695  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
696}
697
698#main-content .work-card-banner {
699  width: 100%;
700  border-radius: 8px;
701  overflow: hidden;
702  border: 1px solid var(--color-border);
703  margin-bottom: 24px;
704}
705
706#main-content .work-card-banner-img {
707  width: 100%;
708  height: auto;
709  display: block;
710}
711
712#main-content .work-card h3 {
713  font-size: 1.85rem;
714  border-bottom: 2px solid var(--color-border);
715  padding-bottom: 15px;
716  margin-bottom: 20px;
717}
718
719#main-content .work-card-desc {
720  font-size: 1.05rem;
721  margin-bottom: 30px;
722}
723
724#main-content .pricing-tiers-list {
725  list-style: none;
726  padding: 0;
727  margin: 0 0 30px 0;
728}
729
730#main-content .pricing-tier-item {
731  background-color: var(--color-bg-cream);
732  border: 1px solid var(--color-border);
733  border-radius: 8px;
734  padding: 20px;
735  margin-bottom: 16px;
736}
737
738#main-content .pricing-tier-header {
739  display: flex;
740  justify-content: space-between;
741  align-items: baseline;
742  flex-wrap: wrap;
743  gap: 8px;
744  margin-bottom: 6px;
745}
746
747#main-content .pricing-tier-name {
748  font-weight: 700;
749  font-size: 1.15rem;
750  color: var(--color-primary-dark);
751}
752
753#main-content .pricing-tier-hours {
754  font-size: 0.9rem;
755  font-weight: 700;
756  background-color: var(--color-primary);
757  color: #FFFFFF;
758  padding: 4px 10px;
759  border-radius: 4px;
760}
761
762#main-content .pricing-tier-cost {
763  font-weight: 700;
764  font-size: 1.3rem;
765  color: var(--color-text-dark);
766}
767
768#main-content .pricing-tier-sub {
769  font-size: 0.95rem;
770  color: #404740;
771  font-weight: 400;
772}
773
774#main-content .pricing-tier-desc {
775  margin: 8px 0 0 0;
776  font-size: 1rem;
777  line-height: 1.5;
778}
779
780#main-content .projects-list-title {
781  color: var(--color-primary-dark);
782  margin-bottom: 15px;
783}
784
785#main-content .projects-list {
786  list-style: none;
787  padding: 0;
788  margin: 0 0 30px 0;
789}
790
791#main-content .projects-list li {
792  padding: 10px 0;
793  border-bottom: 1px solid var(--color-border-light);
794  display: flex;
795  align-items: center;
796  gap: 12px;
797  font-size: 1rem;
798}
799
800#main-content .projects-list li:last-child {
801  border-bottom: none;
802}
803
804#main-content .project-list-bullet {
805  color: var(--color-accent-accessible);
806  font-weight: 700;
807}
808
809#main-content .project-minimum-tier {
810  margin-top: auto;
811  margin-bottom: 30px;
812}
813
814#main-content .work-card .btn {
815  margin-top: auto;
816}
817
818/* Why / comparison table */
819#main-content .why-grid {
820  display: grid;
821  grid-template-columns: 1fr 1fr;
822  gap: 24px;
823  margin-top: 40px;
824  margin-bottom: 60px;
825}
826
827#main-content .why-item {
828  background-color: var(--color-bg-cream);
829  border: 1px solid var(--color-border);
830  border-radius: 8px;
831  padding: 24px;
832  display: flex;
833  align-items: flex-start;
834  gap: 16px;
835}
836
837#main-content .why-icon {
838  background-color: var(--color-accent);
839  color: #FFFFFF;
840  width: 32px;
841  height: 32px;
842  border-radius: 50%;
843  display: flex;
844  align-items: center;
845  justify-content: center;
846  flex-shrink: 0;
847  font-size: 0.9rem;
848}
849
850#main-content .why-item p {
851  margin: 0;
852  font-size: 1.05rem;
853  line-height: 1.5;
854}
855
856#main-content .table-container {
857  width: 100%;
858  margin-bottom: 70px;
859  border: 1px solid var(--color-border);
860  border-radius: 8px;
861  overflow: hidden;
862}
863
864#main-content .table-title {
865  background-color: var(--color-primary-dark);
866  color: #FFFFFF;
867  margin: 0;
868  padding: 20px 24px;
869  font-size: 1.35rem;
870  text-align: left;
871}
872
873#main-content .comparison-table-wrapper {
874  width: 100%;
875  overflow-x: auto;
876}
877
878#main-content .comparison-table {
879  width: 100%;
880  border-collapse: separate;
881  border-spacing: 0;
882  text-align: left;
883  background-color: var(--color-bg-white);
884  min-width: 600px;
885}
886
887#main-content .comparison-table th,
888#main-content .comparison-table td {
889  padding: 16px 24px;
890  border-bottom: 1px solid var(--color-border-light);
891  font-size: 1rem;
892  vertical-align: top;
893}
894
895#main-content .comparison-table thead th {
896  background-color: var(--color-primary);
897  color: #FFFFFF;
898  font-weight: 700;
899}
900
901#main-content .comparison-table tbody th {
902  font-weight: 600;
903  color: var(--color-primary-dark);
904}
905
906#main-content .comparison-table .highlight-column {
907  background-color: rgba(245, 22, 121, 0.06);
908  font-weight: 600;
909  color: var(--color-primary-dark);
910  border-left: 3px solid var(--color-accent);
911  border-right: 3px solid var(--color-accent);
912}
913
914#main-content .comparison-table thead .highlight-column {
915  border-top: 3px solid var(--color-accent);
916}
917
918#main-content .comparison-table tbody tr:last-child .highlight-column {
919  border-bottom: 3px solid var(--color-accent);
920}
921
922/* Testimonials */
923#main-content .proof-block-container {
924  border-top: 2px solid var(--color-border-light);
925  padding-top: 50px;
926}
927
928#main-content .proof-title {
929  text-align: center;
930  font-size: 1.65rem;
931  margin-bottom: 40px;
932}
933
934#main-content .testimonials-grid {
935  display: grid;
936  grid-template-columns: 1fr 1fr;
937  gap: 32px;
938}
939
940#main-content .testimonial-card {
941  background-color: var(--color-bg-cream);
942  border-top: 4px solid var(--color-primary);
943  border-radius: 6px;
944  padding: 35px;
945  margin: 0;
946  display: flex;
947  flex-direction: column;
948}
949
950#main-content .testimonial-card > img,
951#main-content .testimonial-placeholder-img {
952  width: 84px;
953  height: 84px;
954  border-radius: 50%;
955  object-fit: cover;
956  margin: 0 auto 20px auto;
957  border: 2px solid var(--color-accent);
958}
959
960#main-content .testimonial-quote {
961  font-style: italic;
962  font-size: 1.05rem;
963  line-height: 1.65;
964  margin-bottom: 20px;
965}
966
967
968#main-content .testimonial-author {
969  font-weight: 700;
970  font-size: 1rem;
971  color: var(--color-primary-dark);
972  margin-top: auto;
973  font-style: normal;
974}
975
976/* FAQ */
977#main-content .faq-list {
978  max-width: 800px;
979  margin: 40px auto 0 auto;
980}
981
982#main-content .faq-item {
983  background-color: var(--color-bg-white);
984  border: 1px solid var(--color-border);
985  border-radius: 6px;
986  margin-bottom: 16px;
987  overflow: hidden;
988  transition: border-color 0.2s ease;
989}
990
991#main-content .faq-item[open] {
992  border-color: var(--color-primary);
993}
994
995#main-content .faq-item summary {
996  padding: 20px 24px;
997  font-weight: 600;
998  font-size: 1.1rem;
999  color: var(--color-primary-dark);
1000  cursor: pointer;
1001  list-style: none;
1002  display: flex;
1003  justify-content: space-between;
1004  align-items: center;
1005  user-select: none;
1006}
1007
1008#main-content .faq-item summary::-webkit-details-marker {
1009  display: none;
1010}
1011
1012#main-content .faq-item summary::after {
1013  content: "+";
1014  font-size: 1.5rem;
1015  font-weight: 700;
1016  color: var(--color-primary);
1017  transition: transform 0.2s ease;
1018}
1019
1020#main-content .faq-item[open] summary::after {
1021  content: "−";
1022  transform: rotate(180deg);
1023}
1024
1025#main-content .faq-content {
1026  padding: 0 24px 20px 24px;
1027  border-top: 1px solid var(--color-border-light);
1028}
1029
1030#main-content .faq-content p {
1031  margin: 0;
1032  font-size: 1rem;
1033  line-height: 1.6;
1034}
1035
1036/* Contact */
1037#main-content .contact-grid {
1038  display: grid;
1039  grid-template-columns: 4fr 5fr;
1040  gap: 50px;
1041  margin-bottom: 50px;
1042}
1043
1044#main-content .contact-info {
1045  text-align: left;
1046}
1047
1048#main-content .contact-guide-box {
1049  background-color: var(--color-bg-cream);
1050  border: 1px solid var(--color-border);
1051  border-radius: 8px;
1052  padding: 30px;
1053  margin-top: 25px;
1054}
1055
1056#main-content .contact-guide-box h4 {
1057  margin-top: 0;
1058  font-size: 1.2rem;
1059  color: var(--color-primary-dark);
1060}
1061
1062#main-content .contact-checklist {
1063  list-style: none;
1064  padding: 0;
1065  margin: 0 0 20px 0;
1066}
1067
1068#main-content .contact-checklist li {
1069  position: relative;
1070  padding-left: 28px;
1071  margin-bottom: 12px;
1072  font-weight: 500;
1073  font-size: 1rem;
1074}
1075
1076#main-content .contact-checklist li::before {
1077  content: "✔";
1078  position: absolute;
1079  left: 0;
1080  top: 0;
1081  color: var(--color-accent-accessible);
1082  font-weight: 700;
1083}
1084
1085#main-content .contact-note {
1086  margin: 0;
1087  font-size: 1rem;
1088}
1089
1090#main-content .contact-form-container {
1091  background-color: var(--color-bg-cream);
1092  border: 1px solid var(--color-border);
1093  border-radius: 8px;
1094  padding: 40px;
1095  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
1096}
1097
1098#main-content .contact-form {
1099  width: 100%;
1100}
1101
1102#main-content .form-row {
1103  display: grid;
1104  grid-template-columns: 1fr 1fr;
1105  gap: 20px;
1106}
1107
1108#main-content .form-group {
1109  margin-bottom: 24px;
1110  text-align: left;
1111}
1112
1113#main-content .form-group label {
1114  display: block;
1115  font-weight: 600;
1116  font-size: 1rem;
1117  margin-bottom: 8px;
1118  color: var(--color-primary-dark);
1119}
1120
1121#main-content .form-group input[type="text"],
1122#main-content .form-group input[type="email"],
1123#main-content .form-group textarea {
1124  width: 100%;
1125  padding: 12px 16px;
1126  border: 2px solid var(--color-border);
1127  border-radius: 4px;
1128  font-family: var(--font-primary);
1129  font-size: 1rem;
1130  line-height: 1.5;
1131  color: var(--color-text-dark);
1132  background-color: var(--color-bg-white);
1133  transition: border-color 0.2s ease, box-shadow 0.2s ease;
1134}
1135
1136#main-content .form-group input[type="text"]:focus,
1137#main-content .form-group input[type="email"]:focus,
1138#main-content .form-group textarea:focus {
1139  border-color: var(--color-primary-dark);
1140  box-shadow: 0 0 0 3px rgba(7, 36, 30, 0.18);
1141  outline: 3px solid transparent;
1142}
1143
1144#main-content .form-group input::placeholder,
1145#main-content .form-group textarea::placeholder {
1146  color: #4A4A4A;
1147  opacity: 1;
1148}
1149
1150#main-content .form-group textarea {
1151  resize: vertical;
1152  min-height: 150px;
1153}
1154
1155
1156/* Motion */
1157@media (prefers-reduced-motion: reduce) {
1158  #main-content *,
1159  #main-content *::before,
1160  #main-content *::after,
1161  .skip-link {
1162    animation-delay: -1ms !important;
1163    animation-duration: 1ms !important;
1164    animation-iteration-count: 1 !important;
1165    transition-duration: 0s !important;
1166    scroll-behavior: auto !important;
1167  }
1168}
1169
1170/* Responsive */
1171@media (max-width: 900px) {
1172  #main-content .hero-grid {
1173    grid-template-columns: 1fr;
1174    text-align: center;
1175    gap: 40px;
1176  }
1177
1178  #main-content .hero-text-block {
1179    text-align: center;
1180  }
1181
1182  #main-content .byline-block {
1183    justify-content: center;
1184    text-align: left;
1185  }
1186
1187  #main-content .hero-image-block {
1188    order: -1;
1189  }
1190
1191  #main-content .hero-large-img {
1192    max-width: 260px;
1193  }
1194
1195  #main-content .work-grid,
1196  #main-content .contact-grid {
1197    grid-template-columns: 1fr;
1198  }
1199
1200  #main-content .contact-grid {
1201    gap: 40px;
1202  }
1203}
1204
1205@media (max-width: 768px) {
1206  #main-content h1 { font-size: 2.25rem; }
1207  #main-content h2 { font-size: 1.875rem; }
1208  #main-content h3 { font-size: 1.4rem; }
1209  #main-content p.lead { font-size: 1.15rem; }
1210
1211  #main-content .why-grid,
1212  #main-content .testimonials-grid {
1213    grid-template-columns: 1fr;
1214  }
1215}
1216
1217@media (max-width: 600px) {
1218  #main-content .container {
1219    padding: 0 20px;
1220  }
1221
1222  #main-content .section-padding {
1223    padding: 70px 0;
1224  }
1225
1226  #main-content .form-row {
1227    grid-template-columns: 1fr;
1228  }
1229
1230  #main-content .contact-form-container {
1231    padding: 28px 20px;
1232  }
1233
1234  #main-content .work-card {
1235    padding: 28px 20px;
1236  }
1237}
1238
1239
1240/* Placeholder sizing */
1241#main-content .byline-portrait {
1242  width: 50px;
1243  height: 50px;
1244  min-height: 50px;
1245  padding: 6px;
1246  border-radius: 50%;
1247  font-size: 0.7rem;
1248}
1249
1250#main-content .hero-large-img {
1251  width: 100%;
1252  max-width: 340px;
1253  min-height: 340px;
1254  border-radius: 12px;
1255  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
1256}
1257
1258#main-content .service-card-img {
1259  min-height: 180px;
1260}
1261
1262#main-content .work-card-banner-img {
1263  min-height: 180px;
1264}
1265
1266#main-content .testimonial-placeholder-img {
1267  width: 84px;
1268  height: 84px;
1269  min-height: 84px;
1270  padding: 8px;
1271  border-radius: 50%;
1272  margin: 0 auto 20px auto;
1273  font-size: 0.8rem;
1274}
1275
1276
1277/* MemberVault paste cleanup */
1278.mv-block > p:empty,
1279.mv-block > div:empty {
1280  display: none !important;
1281  height: 0 !important;
1282  min-height: 0 !important;
1283  margin: 0 !important;
1284  padding: 0 !important;
1285  border: 0 !important;
1286}
1287
1288#main-content {
1289  margin-top: 0 !important;
1290  margin-bottom: 0 !important;
1291  padding-top: 0 !important;
1292}
1293
1294/* Remove the 50px MemberVault content gap above the hero */
1295.mv-block > #main-content:first-child {
1296  margin-top: -50px !important;
1297}
1298
1299html{ font-size: 100%}    </style>
1300
1301    
1301<script>
1302        var g_bAnnouncementStatus = false;var g_bProductUniform = true;    </script>
1302
1303
1304            
1304<script>
1305            var js_first_name = 'User';
1306            var js_last_name = 'User';
1307            var js_email = 'Email';
1308        </script>
1308
1309    
1310    <!-- COPY CODE TO CLIPBOARD -->
1311<script>
1312function copyCode() {
1313   var codeElement = document.getElementById('myCode');
1314   var textArea = document.createElement('textarea');
1315   textArea.value = codeElement.textContent;
1316   document.body.appendChild(textArea);
1317   textArea.select();
1318   document.execCommand('copy');
1319   document.body.removeChild(textArea);
1320
1321   alert('Code copied to clipboard!');
1322}
1323</script>
1323
1324<!-- END - COPY CODE TO CLIPBOARD -->
1325
1326<!-- MAILERLITE UNIVERSAL -->
1327<script>
1328    (function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[])
1329    .push(arguments);},l=d.createElement(e),l.async=1,l.src=u,
1330    n=d.getElementsByTagName(e)[0],n.parentNode.insertBefore(l,n);})
1331    (window,document,'script','https://assets.mailerlite.com/js/universal.js','ml');
1332    ml('account', '107223');
1333</script>
1333
1334<!-- END MAILERLITE UNIVERSAL -->
1335
1336<!-- HIDE WELCOME AREA ON ALL PAGES EXPECT SERVICES -->
1337<script>
1338document.addEventListener("DOMContentLoaded", function () {
1339    const welcomeArea = document.getElementById("mv_welcome_area");
1340
1341    if (!window.location.pathname.includes("/products")) {
1342        if (welcomeArea) {
1343            welcomeArea.style.display = "none";
1344        }
1345    }
1346});
1347</script>
1347
1348<!-- END - HIDE WELCOME AREA ON ALL PAGES EXPECT SERVICES -->
1349</head>
1350
1351<body class="bg-gray-100 text-gray-800 mv_not_logged_in " style="background-color:#FFFFFF; color:#0F3D32;">
1352    <canvas id="confetti"></canvas>
1353    <div class="w-full overflow-x-hidden">
1354
1355        <header class="w-full fixed bg-gray-800 text-white content-center tracking-wider shadow-xl z-20 max-h-full " style="background-color:#FFFFFF; color:#0F3D32;">
1356            
1357            
1358                            <div class="relative flex w-full h-20 max-w-screen-xl mx-auto p-4 lg:pl-10 lg:pr-10">
1359
1360                    <a href="/" class="flex-initial flex h-full mv_logo">
1361                        <img class="max-h-full my-auto" src="https://s3.membervaultcdn.com/websitefae/maddatu white.png?v=1788254145" alt="maddatu - Support You Can Rely On"/>                    </a>
1362
1363                    <div class="flex-auto hidden lg:flex ml-4 text-center">
1364                        <ul class="w-full inline-block my-auto text-center">
1365                                                            <li class="inline-block ml-4 mr-4 hover:border-b ">
1366                                    <a href="/home" >
1367                                        Home                                    </a>
1368                                </li>
1369                                                            <li class="inline-block ml-4 mr-4 hover:border-b ">
1370                                    <a href="/about" >
1371                                        About                                    </a>
1372                                </li>
1373                                                            <li class="inline-block ml-4 mr-4 hover:border-b ">
1374                                    <a href="/services" >
1375                                        Services                                    </a>
1376                                </li>
1377                                                            <li class="inline-block ml-4 mr-4 hover:border-b ">
1378                                    <a href="/contact" >
1379                                        Contact                                    </a>
1380                                </li>
1381                                                            <li class="inline-block ml-4 mr-4 hover:border-b border-b">
1382                                    <a href="/blog" >
1383                                        Blog                                    </a>
1384                                </li>
1385                                                    </ul>
1386                    </div>
1387
1388                    <div class="relative flex-auto lg:flex-initial my-auto mv_user_nav flex flex-row-reverse flex-nowrap">
1389                        <a class="my-auto ml-4" href="javascript:toggleMainNav()">
1390                            <i class="fas fa-grip-lines"></i>
1391                        </a>
1392                                                    <a href="javascript:toggleLogin()" class="text-sm flex my-auto">
1393                                Sign In <i class="fas fa-angle-right hidden lg:flex ml-2 my-auto"></i>
1394                            </a>
1395                        
1396                        
1397                        
1398                    </div>
1399
1400                    <div id="mv_user_nav" class="hidden absolute right-0 top-0 rounded-lg bg-white shadow-lg p-4 pt-2 pb-2 w-80 text-left text-gray-800 mr-4 lg:mr-10" style="top: calc(100% - 16px)">
1401                        <span class="text-sm font-light">(error)</span>
1402                        <hr>
1403                        <a class="inline-block pb-2 pt-2 w-full" href="/products/profile">Profile</a>
1404                                                
1405                        <a class="inline-block pb-2 pt-2 w-full font-bold" href="/logout">Logout</a>
1406
1407                        <hr class="inline-block w-full">
1408
1409                        Notifications
1410                        <ul class="mv_notifications mt-2">
1411                                                        <li class="italic text-right" style="list-style: none;"><a class="underline" href="/products/notifications">see all notifications</a></li>
1412                        </ul>
1413
1414
1415
1416                    </div>
1417
1418                    <div id="mv_text_nav" class="hidden absolute right-0 top-0 rounded-lg bg-white shadow-lg p-4 pt-2 pb-2 w-44 text-left text-gray-800 mr-4 lg:mr-10" style="top: calc(100% - 16px)">
1419                                                    <a class="inline-block pb-2 pt-2 w-full" href="javascript:changeTextSize(100)">
1420                                <span class="mv_text_nav_dot" id="mv_text_nav_dot_100">
1421                                                                            <i class="far fa-dot-circle"></i>
1422                                                                    </span>
1423                                Text Size
1424                            </a>
1425                                                <a class="inline-block pb-2 pt-2 w-full" style="font-size: 115%" href="javascript:changeTextSize(115)">
1426                            <span class="mv_text_nav_dot" id="mv_text_nav_dot_115">
1427                                                                    <i class="far fa-circle"></i>
1428                                                            </span>
1429                            Text Size
1430                        </a>
1431                        <a class="inline-block pb-2 pt-2 w-full" style="font-size: 130%" href="javascript:changeTextSize(130)">
1432                            <span class="mv_text_nav_dot" id="mv_text_nav_dot_130">
1433                                                                    <i class="far fa-circle"></i>
1434                                                            </span>
1435                            Text Size
1436                        </a>
1437                        <a class="inline-block pb-2 pt-2 w-full" style="font-size: 145%" href="javascript:changeTextSize(145)">
1438                            <span class="mv_text_nav_dot" id="mv_text_nav_dot_145">
1439                                                                    <i class="far fa-circle"></i>
1440                                                            </span>
1441                            Text Size
1442                        </a>
1443                    </div>
1444
1445                </div>
1446                    </header>
1447        <div id="mv_welcome_area_padding" class="h-20 bg-gray-800 " style="background-color:#FFFFFF;"></div>
1448
1449        <div class="border-b mv_breadcrumbs">
1450    <div class="max-w-screen-xl mx-auto p-4 lg:pl-10 lg:pr-10">
1451        <a href="/">
1452            <i class="fas fa-home"></i>
1453        </a>
1454        <i class="fas fa-caret-right ml-2 mr-2"></i>
1455        <a class="font-semibold" href="/blog">
1456            Blog        </a>
1457    </div>
1458
1459</div>
1460
1461<div class="flex flex-wrap max-w-screen-xl mx-auto lg:flex-nowrap lg:pl-6 lg:pr-6">
1462
1463    <div class="w-full flex-auto lg:w-auto lg:p-4 lg:pr-10 overflow-hidden">
1464
1465        <div class="p-4 text-sm lg:hidden">
1466            <form method="get" action="" class="flex gap-x-4 gap-y-2 flex-wrap md:flex-nowrap">
1467                <div class="flex-auto">
1468                    <input class="w-full border p-2 rounded-lg text-gray-900" type="text" id="search" name="search" placeholder="search" autocomplete="off" value="">
1469                </div>
1470                <button type="submit" class="flex-auto btn mv_custom_button mv_primary_button">Search</button>
1471
1472            </form>
1473        </div>
1474
1475
1476        
1477        <div class="w-full flex-auto overflow-hidden">
1478
1479            <div class="p-4 lg:pl-2 lg:pr-2">
1480
1481                                    <div class="rounded-lg shadow-lg overflow-hidden bg-white mb-6 text-gray-800 flex flex-col mv_blog_item mv_blog_4155">
1482                        <div class="content flex-auto flex flex-col">
1483                                                            <a href="/jewel">
1484                                    <img class="w-full" src="https://s3.membervaultcdn.com/websitefae/WF---MV---Blog.png?v=1706775209" alt="" loading="lazy">
1485                                </a>
1486                                                        <div class="w-full p-4 pb-0 flex-auto">
1487                                <h2 class="text-lg font-semibold mv_custom_text">
1488                                    <a class="text-lg font-semibold" href="/jewel">Jewel's MemberVault Transformation</a>
1489                                </h2>
1490                                <div class="mt-4 mb-4 mv_content">
1491                                    <p>
1492                                        Crafting a Digital Wonderland
1493
1494We're thrilled to take you behind the scenes of something special – the makeover of Jewel's MemberVault website. With a wave of our magic wand and a lot of collaboration, creativity, and a sprinkle of tech know-how.                                    </p>
1495                                </div>
1496                            </div>
1497                        </div>
1498                    </div>
1499                                    <div class="rounded-lg shadow-lg overflow-hidden bg-white mb-6 text-gray-800 flex flex-col mv_blog_item mv_blog_4156">
1500                        <div class="content flex-auto flex flex-col">
1501                                                            <a href="/mariam">
1502                                    <img class="w-full" src="https://s3.membervaultcdn.com/websitefae/WF---MV---Blog--1-.png?v=1706776094" alt="" loading="lazy">
1503                                </a>
1504                                                        <div class="w-full p-4 pb-0 flex-auto">
1505                                <h2 class="text-lg font-semibold mv_custom_text">
1506                                    <a class="text-lg font-semibold" href="/mariam">Mariam's MemberVault</a>
1507                                </h2>
1508                                <div class="mt-4 mb-4 mv_content">
1509                                    <p>
1510                                        Even before MemberVault (MV) started to roll out some of its newest features, Mariam wanted to have her MV account looking and functioning more like a website than just a normal course platform.                                     </p>
1511                                </div>
1512                            </div>
1513                        </div>
1514                    </div>
1515                
1516
1517
1518            </div>
1519        </div>
1520
1521            </div>
1522
1523
1524    <div class="w-full lg:flex-none lg:inline-block lg:w-1/3 p-4">
1525    <hr class="lg:hidden">
1526
1527    <div class="hidden lg:block">
1528        <h2 class="text-xl font-bold pt-4 pb-4">
1529            Search
1530        </h2>
1531        <form method="get" action="/posts/" class="flex gap-x-4 gap-y-2 flex-wrap md:flex-nowrap">
1532            <div class="flex-auto">
1533                <input class="w-full border p-2 rounded-lg text-gray-900" type="text" id="search" name="search" placeholder="search" autocomplete="off" value="">
1534            </div>
1535            <button type="submit" class="flex-auto btn mv_custom_button mv_primary_button">Search</button>
1536
1537        </form>
1538
1539        <hr class="mb-6 mt-6">
1540    </div>
1541
1542            <a target="_BLANK" href="https://appt.link/website-fae/coffee-chat">
1543                    <img class="rounded-lg mb-4" src="https://s3.membervaultcdn.com/websitefae/Chantelle-Venter--1-.png?v=1674545918" alt="" />
1544                    <h2 class="text-xl font-bold pb-2">Grab a coffee with me and lets discuss your course</h2>
1545                </a>
1546        <div class="mv_content">
1547        <p>Transform your online course platform with Website Fae. We specialize in making MemberVault accessible for all learners, including those with disabilities. Learn more and improve your course platform today!</p>    </div>
1548
1549
1550
1551    </a>
1552</div>
1553
1554</div>
1555</div>
1556<footer id="mv_footer" class="mv_footer border-t pb-10 text-sm ">
1557
1558	<div class="flex flex-wrap w-full max-w-screen-xl mx-auto p-4 lg:pl-10 lg:pr-10 font-light border-b justify-end ">
1559
1560					<div class="w-full lg:w-1/3 flex-none p-4 pr-10 text-center lg:text-left border-b lg:border-b-0">
1561				<h3 class="font-semibold mb-1">About</h3>
1562				<p>Maddatu provides practical, dependable operational support for established small businesses, handling the digital content, administration and day-to-day tasks that need to get done so you can focus fully on scaling your clinical or business impact.
1563
1564Website Fae Pty Ltd trading as Maddatu</p>
1565			</div>
1566		
1567					<div class="relative w-full lg:w-1/3 flex-none p-4 text-center border-b lg:border-b-0">
1568				<div class="inline-block text-center lg:text-left relative">
1569					<h3 class="font-semibold mb-1">Links</h3>
1570					<div class="w-full ">
1571													<a class="mb-1" href="https://maddatu.com/terms" target="_BLANK">
1572								Terms and Conditions							</a><br>
1573													<a class="mb-1" href="https://maddatu.com/privacy" target="_BLANK">
1574								Privacy Policy							</a><br>
1575													<a class="mb-1" href="https://maddatu.com/disclaimer" target="_BLANK">
1576								Disclaimer							</a><br>
1577													<a class="mb-1" href="https://maddatu.com/accessibility-statement" target="_BLANK">
1578								Accessibility Statement							</a><br>
1579											</div>
1580				</div>
1581			</div>
1582		
1583
1584
1585		<div class="w-full lg:w-1/3 flex-none p-4 text-center ">
1586			<div class="inline-block text-center lg:text-left">
1587				<h3 class="font-semibold mb-1">Social</h3>
1588				<div class="w-full">
1589
1590											<a class="mb-1 flex" href="https://facebook.com/maddatu.sa" target="_BLANK">
1591							<i class="fab fa-facebook-square inline-block my-auto mr-1"></i> Facebook
1592						</a>
1593																					<a class="mb-1 flex" href="https://instagram.com/maddatu.sa" target="_BLANK">
1594							<i class="fab fa-instagram inline-block my-auto mr-1"></i> Instagram
1595						</a>
1596																				
1597					
1598					
1599					
1600					
1601
1602				</div>
1603			</div>
1604		</div>
1605
1606
1607	</div>
1608
1609	<div class="w-full max-w-screen-xl p-4 mx-auto text-xs font-light">
1610		<div class="w-full flex flex-wrap pt-2">
1611			<div class="flex-none w-full text-center mt-2 lg:w-1/2 lg:text-left">
1612				&copy; 2026 - maddatu			</div>
1613			<div class="flex-none flex w-full pt-2 lg:w-1/2 lg:flex-row-reverse">
1614								<a href="https://membervault.co" class="flex-none mx-auto lg:mx-px flex hidden" target="_BLANK">
1615					<img class="my-auto w-6 h-6 mr-2 mv_footer_logo" src="/fe/images/fav/favicon-32x32.png" loading="lazy">
1616					<span class="my-auto">Powered By MemberVault</span>
1617				</a>
1618			</div>
1619		</div>
1620	</div>
1621
1622</footer>
1623
1624
1625
1626
1627
1628<div id="mv_main_nav" class="fixed bg-white text-gray-800 top-0 left-0 h-full shadow-2xl w-5/6 md:w-4/6 lg:w-2/6 overflow-scroll z-20" style="left:-100%">
1629
1630	<a href="javascript:toggleMainNav()" class="mv_close_button mt-2 mr-2">
1631		<i class="fas fa-times"></i>
1632	</a>
1633
1634	<div class="w-full p-4 border-b">
1635
1636		<form class="mv_search_container" method="get" action="/products">
1637			<a href="javascript:toggleTextSizeMobile()" class="mv_text_button mr-2">
1638				<i class="fas fa-text-height"></i>
1639			</a>
1640
1641			<i class="fas fa-search mr-1"></i>
1642			<input name="search" class="mv_search_box rounded pl-2 text-gray-800 w-32 opacity-50" type="text" placeholder="Search..." value="">
1643			<input type="submit" value="search" class="hidden mv_search_button rounded bg-gray-800 text-white opacity-50 pl-1 pr-1">
1644		</form>
1645
1646
1647
1648	</div>
1649
1650			<div class="flex text-center mt-4">
1651			<div class="flex-none w-full pt-4 pb-4 border-b-2 mv_custom_text mv_custom_border font-semibold">
1652				Menu
1653			</div>
1654		</div>
1655
1656		<ul class="w-full font-semibold">
1657							<li class="w-full border-b">
1658					<a href="/home" class="flex p-4">
1659						<span class="flex-none w-11/12 my-auto">
1660							Home						</span>
1661						<span class="flex-none w-1/12 my-auto text-right">
1662							<i class="fas fa-angle-right"></i>
1663						</span>
1664					</a>
1665				</li>
1666							<li class="w-full border-b">
1667					<a href="/about" class="flex p-4">
1668						<span class="flex-none w-11/12 my-auto">
1669							About						</span>
1670						<span class="flex-none w-1/12 my-auto text-right">
1671							<i class="fas fa-angle-right"></i>
1672						</span>
1673					</a>
1674				</li>
1675							<li class="w-full border-b">
1676					<a href="/services" class="flex p-4">
1677						<span class="flex-none w-11/12 my-auto">
1678							Services						</span>
1679						<span class="flex-none w-1/12 my-auto text-right">
1680							<i class="fas fa-angle-right"></i>
1681						</span>
1682					</a>
1683				</li>
1684							<li class="w-full border-b">
1685					<a href="/contact" class="flex p-4">
1686						<span class="flex-none w-11/12 my-auto">
1687							Contact						</span>
1688						<span class="flex-none w-1/12 my-auto text-right">
1689							<i class="fas fa-angle-right"></i>
1690						</span>
1691					</a>
1692				</li>
1693							<li class="w-full border-b">
1694					<a href="/blog" class="flex p-4">
1695						<span class="flex-none w-11/12 my-auto">
1696							Blog						</span>
1697						<span class="flex-none w-1/12 my-auto text-right">
1698							<i class="fas fa-angle-right"></i>
1699						</span>
1700					</a>
1701				</li>
1702					</ul>
1703	
1704	<div class="flex text-center">
1705		<a id="mv_main_nav_my_link" class="flex-none w-1/2 pt-4 pb-4 border-b border-b" href="javascript:void(0)" onclick="switchMainNav('my')">
1706			My Services		</a>
1707		<a id="mv_main_nav_available_link" class="flex-none w-1/2 pt-4 pb-4 border-b-2 mv_custom_text mv_custom_border font-semibold" href="javascript:void(0)" onclick="switchMainNav('available')">
1708			Available Services		</a>
1709	</div>
1710
1711
1712	<ul id="mv_main_nav_available_content" class="w-full font-semibold ">
1713					<li class="w-full border-b">
1714				<a href="/products/courses/view/1193365" class="flex p-4">
1715					<span class="flex-none w-11/12 my-auto">
1716						maddatu Ongoing Support					</span>
1717					<span class="flex-none w-1/12 my-auto text-right">
1718						<i class="fas fa-angle-right"></i>
1719					</span>
1720				</a>
1721			</li>
1722			</ul>
1723
1724	<ul id="mv_main_nav_my_content" class="w-full font-semibold hidden">
1725					<li class="w-full border-b">
1726				<a href="/login/?goto=/blog" class="flex p-4">
1727					Sign In to see your services				</a>
1728			</li>
1729			</ul>
1730
1731
1732	
1733</div>
1734
1735
1736
1737
1738<div id="mv_login" class="fixed right-0 top-0 w-full h-full bg-white text-gray-800 shadow-lg z-20 lg:w-2/6 overflow-scroll" style="right:-100%">
1739    <a href="javascript:toggleLogin()" class="mv_close_button">
1740        <i class="fas fa-times"></i>
1741    </a>
1742
1743    <div class="w-full bg-gray-200 p-4 text-center">
1744        <div class="inline-block border rounded-full bg-gray-600 w-10 h-10 pt-1 border-white shadow-md">
1745            <i class="fas fa-sign-in-alt text-white text-lg"></i>
1746        </div>
1747
1748        <div class="w-full mt-2 font-semibold">
1749            Sign In        </div>
1750    </div>
1751
1752            <div id="login_before" class="w-full p-4 pb-0 text-sm">
1753
1754            <h3 class="w-full  font-semibold">Sign In Details</h3>
1755
1756            <div class="flex flex-wrap mt-2">
1757                <input class="flex-none w-full border js_clean_email p-2 rounded" type="text" id="loginform_email" name="email" placeholder="Email" autocomplete="off" value="">
1758            </div>
1759            <div class="flex flex-wrap mt-2">
1760                <input class="flex-none w-full border p-2 rounded" type="password" id="loginform_password" name="email" placeholder="Password" autocomplete="off" value="">
1761            </div>
1762
1763            <div class="w-full relative text-red-700 font-bold hidden" id="loginform_error">
1764            </div>
1765
1766            <div class="w-full relative">
1767                <a href="javascript:void(0)" onclick="submitLoginForm()" class="mv_custom_button mt-4 block text-center w-full bg-green-600 border-2 border-green-600 text-white rounded-lg pt-2 pb-2 pl-4 pr-4">
1768                    Sign In                </a>
1769            </div>
1770
1771        </div>
1772
1773        <div class="w-full flex p-4 pt-0 text-sm italic mt-4">
1774            <div class="flex-none w-1/2">
1775                            </div>
1776            <div class="flex-none w-1/2 text-right">
1777                <a class="" href="javascript:void(0)" onclick="toggleLoginForgot()">forgot password?</a>
1778            </div>
1779        </div>
1780    
1781    <div id="login_forgot" class="w-full p-4 pb-0 text-sm hidden">
1782
1783        <h3 class="w-full  font-semibold">Forgot Password?</h3>
1784        <p class="font-light">Enter your email address and we will send you a link to reset your password.</p>
1785
1786        <div class="flex flex-wrap mt-2">
1787            <input class="flex-none w-full border js_clean_email p-2 rounded" type="text" id="loginforgot_email" name="email" placeholder="Email" autocomplete="off" value="">
1788        </div>
1789
1790        <div class="w-full relative text-red-700 font-bold hidden" id="loginforgot_error">
1791        </div>
1792
1793        <div class="w-full relative">
1794            <a href="javascript:void(0)" id="login_forgot_button" onclick="submitLoginForgot()" class="mv_custom_button mt-4 block text-center w-full bg-green-600 border-2 border-green-600 text-white rounded-lg pt-2 pb-2 pl-4 pr-4">
1795                Reset Password
1796            </a>
1797        </div>
1798
1799    </div>
1800
1801    <div class="loading"></div>
1802</div>
1803
1804
1805<div id="mv_reset" class="fixed right-0 top-0 w-full h-full bg-white text-gray-800 shadow-lg z-20 lg:w-2/6 overflow-scroll" style="right:-100%">
1806    <a href="javascript:toggleForgot()" class="mv_close_button">
1807        <i class="fas fa-times"></i>
1808    </a>
1809
1810    <div class="w-full bg-gray-200 p-4 text-center">
1811        <div class="inline-block border rounded-full bg-gray-600 w-10 h-10 pt-1 border-white shadow-md">
1812            <i class="fas fa-question text-white text-lg"></i>
1813        </div>
1814
1815        <div class="w-full mt-2 font-semibold">
1816            Forgot Password
1817        </div>
1818    </div>
1819
1820    <div id="reset_before" class="w-full p-4 pb-0 text-sm hidden">
1821
1822        <h3 class="w-full  font-semibold">Create New Password for </h3>
1823
1824        <div class="flex flex-wrap mt-2">
1825            <input class="flex-none w-full border p-2 rounded" type="password" id="resetform_password" name="password" placeholder="Password" autocomplete="off" value="">
1826        </div>
1827        <div class="flex flex-wrap mt-2">
1828            <input class="flex-none w-full border p-2 rounded" type="password" id="resetform_password2" name="password2" placeholder="Re-Type Password" autocomplete="off" value="">
1829        </div>
1830
1831        <div class="w-full relative">
1832            <a href="javascript:void(0)" onclick="submitResetForm()" class="mv_custom_button mt-4 block text-center w-full bg-green-600 border-2 border-green-600 text-white rounded-lg pt-2 pb-2 pl-4 pr-4">
1833                Reset Password
1834            </a>
1835        </div>
1836    </div>
1837
1838    <div class="w-full p-4 relative text-red-700 font-bold hidden" id="reset_error"></div>
1839
1840
1841    <div class="loading"></div>
1842</div>
1843
1844<script>
1845    function submitLoginForm() {
1846        var email = $('#loginform_email').val();
1847        var password = $('#loginform_password').val();
1848
1849                $('.loading').show();
1850        $.ajax({
1851                method: "POST",
1852                url: '/login/ajax_login',
1853                data: {
1854                    username: email,
1855                    password: password,
1856                    goto: '/blog'
1857                }
1858            })
1859            .done(function(msg) {
1860                var response = JSON.parse(msg);
1861
1862                if (response.goto) {
1863                    window.location = response.goto;
1864                } else {
1865                    $('.loading').hide();
1866                    $('#loginform_error').show().html(response.message);
1867                }
1868            });
1869    }
1870
1871    function toggleLoginForgot() {
1872        if ($('#login_forgot').css('display') == 'none') {
1873            $('#login_forgot').show();
1874            $('#login_before').addClass('opacity-25');
1875        } else {
1876            $('#login_forgot').hide();
1877            $('#login_before').removeClass('opacity-25');
1878        }
1879    }
1880
1881    function submitLoginForgot() {
1882        var email = $('#loginforgot_email').val();
1883
1884        $('.loading').show();
1885        $.ajax({
1886                method: "POST",
1887                url: '/login/ajax_forgot',
1888                data: {
1889                    username: email,
1890                }
1891            })
1892            .done(function(msg) {
1893                var response = JSON.parse(msg);
1894
1895                $('.loading').hide();
1896                if (response.status == 'success') {
1897                    $('#loginforgot_error').removeClass('text-red-700').addClass('text-green-700');
1898                    $('#login_forgot_button').hide();
1899                }
1900                $('#loginforgot_error').show().html(response.message);
1901            });
1902
1903    }
1904
1905    function submitResetForm() {
1906        var password = $('#resetform_password').val();
1907        var password2 = $('#resetform_password2').val();
1908
1909        if (password != password2) {
1910            $('#reset_error').show().html('Passwords Don\'t Match!');
1911            return false;
1912        }
1913        if (password == '') {
1914            $('#reset_error').show().html('Password can\'t be blank!');
1915            return false;
1916        }
1917
1918        $('.loading').show();
1919
1920        $.ajax({
1921                method: "POST",
1922                url: '/login/ajax_do_reset',
1923                data: {
1924                    user: '',
1925                    password: password,
1926                    hash: ''
1927                }
1928            })
1929            .done(function(msg) {
1930                var response = JSON.parse(msg);
1931
1932                $('.loading').hide();
1933
1934                $('#reset_before').hide();
1935                if (response.status == 'success') {
1936                    $('#reset_error').removeClass('text-red-700').addClass('text-green-700');
1937                }
1938                $('#reset_error').show().html(response.message);
1939            });
1940    }
1941
1942    $(".js_clean_email").keyup(function() {
1943        $(this).val(cleanEmail($(this).val()));
1944    });
1945</script>
1945
1946
1947
1948
1949
1950<div id="mv_cover" class="hidden fixed left-0 top-0 w-full h-full bg-black opacity-75 z-10">&nbsp;</div>
1951
1952<script src="/fe/js/app.js?ver=2.43"></script>
vendor: 1 bytes, line 1952
1952
1953<script src="/fe/js/sweetalert2.all.min.js?ver=2.43"></script>
vendor: 1 bytes, line 1953
1953
1954<script>
1955    // global variables
1956    const confetti = document.getElementById('confetti');
1957    const confettiCtx = confetti.getContext('2d');
1958    let container, confettiElements = [];
1959
1960    // helper
1961    rand = (min, max) => Math.random() * (max - min) + min;
1962
1963    // params to play with
1964    const confettiParams = {
1965        // number of confetti per "explosion"
1966        number: 200,
1967        // min and max size for each rectangle
1968        size: {
1969            x: [5, 20],
1970            y: [10, 18]
1971        },
1972        // power of explosion
1973        initSpeed: 50,
1974        // defines how fast particles go down after blast-off
1975        gravity: 0.65,
1976        // how wide is explosion
1977        drag: 0.08,
1978        // how slow particles are falling
1979        terminalVelocity: 20,
1980        // how fast particles are rotating around themselves
1981        flipSpeed: 0.017,
1982    };
1983    const colors = [{
1984            front: '#FFFFFF',
1985            back: '#FFFFFF'
1986        },
1987        {
1988            front: '#0F3D32',
1989            back: '#0F3D32'
1990        },
1991        {
1992            front: '#FFFFFF',
1993            back: '#FFFFFF'
1994        },
1995        {
1996            front: '#0F3D32',
1997            back: '#0F3D32'
1998        },
1999        {
2000            front: '#F51679',
2001            back: '#F51679'
2002        },
2003        {
2004            front: '#FFFFFF',
2005            back: '#FFFFFF'
2006        },
2007    ];
2008
2009    // -----------------------------------------------------------
2010
2011    setupCanvas();
2012    /*
2013    addConfetti({
2014        clientX: container.w * 0.5,
2015        clientY: container.h * 0.5
2016    });
2017    */
2018    updateConfetti();
2019
2020    //window.addEventListener('click', addConfetti);
2021    window.addEventListener('resize', () => {
2022        setupCanvas();
2023        hideConfetti();
2024    });
2025
2026    // -----------------------------------------------------------
2027
2028    // Confetti constructor
2029    function Conf() {
2030        this.randomModifier = rand(-1, 1);
2031        this.colorPair = colors[Math.floor(rand(0, colors.length))];
2032        this.dimensions = {
2033            x: rand(confettiParams.size.x[0], confettiParams.size.x[1]),
2034            y: rand(confettiParams.size.y[0], confettiParams.size.y[1]),
2035        };
2036        this.position = {
2037            x: clickPosition[0],
2038            y: clickPosition[1]
2039        };
2040        this.rotation = rand(0, 2 * Math.PI);
2041        this.scale = {
2042            x: 1,
2043            y: 1
2044        };
2045        this.velocity = {
2046            x: rand(-confettiParams.initSpeed, confettiParams.initSpeed) * 0.4,
2047            y: rand(-confettiParams.initSpeed, confettiParams.initSpeed)
2048        };
2049        this.flipSpeed = rand(0.2, 1.5) * confettiParams.flipSpeed;
2050
2051        if (this.position.y <= container.h) {
2052            this.velocity.y = -Math.abs(this.velocity.y);
2053        }
2054
2055        this.terminalVelocity = rand(1, 1.5) * confettiParams.terminalVelocity;
2056
2057        this.update = function() {
2058            this.velocity.x *= 0.98;
2059            this.position.x += this.velocity.x;
2060
2061            this.velocity.y += (this.randomModifier * confettiParams.drag);
2062            this.velocity.y += confettiParams.gravity;
2063            this.velocity.y = Math.min(this.velocity.y, this.terminalVelocity);
2064            this.position.y += this.velocity.y;
2065
2066            this.scale.y = Math.cos((this.position.y + this.randomModifier) * this.flipSpeed);
2067            this.color = this.scale.y > 0 ? this.colorPair.front : this.colorPair.back;
2068        }
2069    }
2070
2071    function updateConfetti() {
2072        confettiCtx.clearRect(0, 0, container.w, container.h);
2073
2074        confettiElements.forEach((c) => {
2075            c.update();
2076            confettiCtx.translate(c.position.x, c.position.y);
2077            confettiCtx.rotate(c.rotation);
2078            const width = (c.dimensions.x * c.scale.x);
2079            const height = (c.dimensions.y * c.scale.y);
2080            confettiCtx.fillStyle = c.color;
2081            confettiCtx.fillRect(-0.5 * width, -0.5 * height, width, height);
2082            confettiCtx.setTransform(1, 0, 0, 1, 0, 0)
2083        });
2084
2085        confettiElements.forEach((c, idx) => {
2086            if (c.position.y > container.h ||
2087                c.position.x < -0.5 * container.x ||
2088                c.position.x > 1.5 * container.x) {
2089                confettiElements.splice(idx, 1)
2090            }
2091        });
2092        window.requestAnimationFrame(updateConfetti);
2093    }
2094
2095    function setupCanvas() {
2096        container = {
2097            w: window.innerWidth,
2098            h: window.innerHeight
2099        };
2100        confetti.width = container.w;
2101        confetti.height = container.h;
2102
2103        //console.log(container);
2104    }
2105
2106    function addConfetti(e) {
2107        //var centerX = window.innerWidth / 2;
2108        //var centerY = window.innerHeight / 2;
2109
2110        var centerX = window.innerWidth;
2111        var centerY = window.innerHeight;
2112
2113        //clickPosition = [ e.clientX, e.clientY ];
2114        clickPosition = [centerX, centerY];
2115        for (let i = 0; i < confettiParams.number; i++) {
2116            confettiElements.push(new Conf())
2117        }
2118    }
2119
2120    function hideConfetti() {
2121        confettiElements = [];
2122        window.cancelAnimationFrame(updateConfetti)
2123    }
2124</script>
2124
2125
2126
2127</body>
2128
2129</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.