PageSourceSearch

https://www.srisathyasaividyavahini.org/

html srisathyasaividyavahini.org collected 2026-10-02 10:07:52 UTC 69,123 bytes, 1,317 lines download raw bytes

1<!DOCTYPE html>
2<!--saved from url = (0038)https : //sssvv-landing-page.webflow.io/ -->
3<html class="w-mod-js wf-montserrat-n9-active wf-montserrat-n1-active wf-montserrat-n3-active wf-montserrat-n5-active wf-montserrat-n7-active wf-montserrat-n4-active wf-montserrat-n6-active wf-montserrat-n8-active wf-montserrat-n2-active wf-montserrat-i4-active wf-montserrat-i8-active wf-montserrat-i5-active wf-montserrat-i6-active wf-montserrat-i3-active wf-montserrat-i2-active wf-montserrat-i9-active wf-montserrat-i1-active wf-montserrat-i7-active wf-active">
4<head>
5    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6    <style>
7        .wf-force-outline-none[tabindex = "-1"]:focus {
8            outline: none;
9        }
10        /* The Mandala Modal (background) */
11        .modal {
12            display: none; /* Hidden by default */
13            position: fixed; /* Stay in place */
14            z-index: 2; /* Sit on top */
15            padding-top: 100px; /* Location of the box */
16            left: 0;
17            top: 0;
18            width: 100%; /* Full width */
19            height: 100%; /* Full height */
20            overflow: auto; /* Enable scroll if needed */
21            background-color: rgb(255,255,255); /* Fallback color */
22            background-color: rgba(255,255,255,0.4); /* White w/ opacity */
23        }
24
25        /* Modal Content */
26        .modal-content {
27            position: relative;
28            background-color: #fefefe;
29            margin: auto;
30            padding: 0;
31            border: 1px solid #888;
32            width: 4096px;
33            /* height: 4096px; */
34            transform: translate(-1%, -1%);
35            cursor: grab; /* for drag to scroll */
36            overflow: auto;
37            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
38            -webkit-animation-name: animatetop;
39            -webkit-animation-duration: 0.4s;
40            animation-name: animatetop;
41            animation-duration: 0.4s
42        }
43
44
45
46        .modal-body {
47            max-height: calc(100vh - 200px);
48            overflow-x: auto;
49            overflow-y: auto;
50            background: transparent url(/index_files/please-wait.gif) left top no-repeat;
51        
52        }
53
54        /* Add Animation */
55        @-webkit-keyframes animatetop {
56            from {
57                top: -300px;
58                opacity: 0
59            }
60
61            to {
62                top: 0;
63                opacity: 1
64            }
65        }
66
67        @keyframes animatetop {
68            from {
69                top: -300px;
70                opacity: 0
71            }
72
73            to {
74                top: 0;
75                opacity: 1
76            }
77        }
78
79        /* The Close Button */
80        .close {
81        z-index: 2; /* Sit on top */
82            color: white;
83            float: left;
84            font-size: 28px;
85            font-weight: bold;
86        }
87
88            .close:hover,
89            .close:focus {
90                color: #000;
91                text-decoration: none;
92                cursor: pointer;
93            }
94
95        .modal-header {
96            padding: 2px 16px;
97            background-color: #5cb85c;
98            color: white;
99        }
100
101        .modal-body {
102            padding: 2px 16px;
103        }
104
105        .modal-footer {
106            padding: 2px 16px;
107            background-color: #5cb85c;
108            color: white;
109        }
110
111        .mnavbar {
112        z-index: 2; /* Sit on top */
113        overflow: hidden;
114        background-color: #333;
115        position: fixed;
116        top: 0;
117        width: 100%;
118        }
119
120        .mnavbar a {
121        float: left;
122        display: block;
123        color: #f2f2f2;
124        text-align: center;
125        padding: 14px 16px;
126        text-decoration: none;
127        font-size: 17px;
128        }
129
130        .mnavbar a:hover {
131        background: #ddd;
132        color: black;
133        }
134
135 
136  #vms-banner {
137    /* Default spacing for Desktop */
138    margin-top: 100px; 
139  }
140  
141  @media (max-width: 768px) {
142    #vms-banner {
143      /* Adjusted spacing for Mobile */
144      margin-top: 80px; 
145    }
146  }
147 
148    
149    </style>
150    <title>Sri Sathya Sai Vidya Vahini</title>
151    <meta content="width=device-width, initial-scale=1" name="viewport">
152    <meta content="Webflow" name="generator">
153    <link href="https://www.srisathyasaividyavahini.org/index_files/sssvv-landing-page2.css" rel="stylesheet" type="text/css">
154    
154<script src="https://www.srisathyasaividyavahini.org/index_files/webfont.js.download" type="text/javascript"></script>
154
155    <link rel="stylesheet" href="https://www.srisathyasaividyavahini.org/index_files/css" media="all">
156    
156<script type="text/javascript">WebFont.load({ google: { families: ["Montserrat : 100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic"] } });</script>
156<!--[if lt IE 9]>
156<script src="https : //cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script>
156<![endif]-->
157    
157<script 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>
157
158
159
160    <link href="https://www.srisathyasaividyavahini.org/favicon/favicon.ico" rel="shortcut icon" type="image/x-icon">
161    <link href="https://www.srisathyasaividyavahini.org/favicon/apple-touch-icon.png" rel="apple-touch-icon">
162<!-- Youtube grid section -->
163    <link rel="preconnect" href="https://fonts.googleapis.com">
164    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
165    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
166
167<style>
168   
169
170  *{ box-sizing:border-box; }
171
172   
173
174  /* ---------- Marquee header ---------- */
175  .marquee{
176    background:var(--ink);
177    color:var(--cream);
178    padding: 28px 24px 18px;
179    text-align:center;
180    position:relative;
181  }
182  .sprockets{
183    display:flex;
184    justify-content:center;
185    gap:14px;
186    padding: 0 0 14px;
187  }
188  .sprockets span{
189    width:9px; height:9px;
190    border-radius:50%;
191    background:var(--cream);
192    opacity:0.85;
193  }
194  .marquee h1{
195    font-family:'Bebas Neue', sans-serif;
196    font-size: clamp(2.2rem, 6vw, 3.4rem);
197    letter-spacing: 0.08em;
198    margin: 0 0 4px;
199  }
200  .marquee h1 em{
201    font-style:normal;
202    color:var(--marquee-red);
203    text-shadow: 0 0 18px rgba(193,39,45,0.55);
204  }
205  .marquee p{
206    margin:0;
207    color: #C9C4BA;
208    font-size:0.92rem;
209    letter-spacing:0.02em;
210  }
211  .marquee .sprockets.bottom{ padding: 14px 0 0; }
212
213  /* ---------- Controls bar ---------- */
214  .controls{
215    max-width:1200px;
216    margin: 22px auto 0;
217    padding: 0 24px;
218    display:flex;
219    align-items:center;
220    justify-content:space-between;
221    gap:12px;
222    flex-wrap:wrap;
223  }
224  .status-line{
225    font-size:0.82rem;
226    color:var(--grey);
227  }
228  .status-line strong{ color:var(--ink); }
229  .refresh-btn{
230    font-family:'Inter', sans-serif;
231    font-weight:600;
232    font-size:0.82rem;
233    letter-spacing:0.03em;
234    background:var(--card-bg);
235    border:1px solid var(--ink);
236    color:var(--ink);
237    padding:8px 16px;
238    border-radius:999px;
239    cursor:pointer;
240    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
241  }
242  .refresh-btn:hover{ background:var(--ink); color:var(--cream); }
243  .refresh-btn:focus-visible, a:focus-visible, .ticket:focus-visible{
244    outline: 3px solid var(--gold);
245    outline-offset: 2px;
246  }
247
248  /* ---------- New-upload toast ---------- */
249  .toast{
250    position:fixed;
251    left:50%;
252    bottom:24px;
253    transform: translate(-50%, 120%);
254    background:var(--ink);
255    color:var(--cream);
256    padding:12px 20px;
257    border-radius:10px;
258    font-size:0.88rem;
259    max-width:90vw;
260    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
261    transition: transform 0.35s ease;
262    z-index:60;
263  }
264  .toast.show{ transform: translate(-50%, 0); }
265  .toast strong{ color:#F3C94A; }
266
267  /* ---------- Masonry grid ---------- */
268  .grid-wrap{
269    max-width:1200px;
270    margin: 20px auto 0;
271    padding: 0 24px;
272  }
273  .grid{
274    column-count:1;
275    column-gap:20px;
276  }
277  @media (min-width:640px){ .grid{ column-count:2; } }
278  @media (min-width:960px){ .grid{ column-count:3; } }
279  @media (min-width:1280px){ .grid{ column-count:4; } }
280
281  .ticket{
282    break-inside: avoid;
283    margin: 0 0 20px;
284    background:var(--card-bg);
285    border-radius:10px;
286    box-shadow: 0 6px 18px var(--shadow);
287    overflow:hidden;
288    display:block;
289    text-decoration:none;
290    color:inherit;
291    cursor:pointer;
292    border:none;
293    width:100%;
294    text-align:left;
295    padding:0;
296    position:relative;
297    transition: transform 0.2s ease, box-shadow 0.2s ease;
298  }
299  .ticket:nth-child(3n){ transform: rotate(-0.6deg); }
300  .ticket:nth-child(3n+1){ transform: rotate(0.5deg); }
301  .ticket:hover{
302    transform: translateY(-4px) rotate(0deg);
303    box-shadow: 0 14px 30px var(--shadow);
304  }
305
306  .ticket .new-flag{
307    position:absolute;
308    top:10px; right:-30px;
309    background:var(--marquee-red);
310    color:#fff;
311    font-size:0.65rem;
312    font-weight:700;
313    letter-spacing:0.08em;
314    padding:4px 34px;
315    transform: rotate(35deg);
316    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
317  }
318
319  .thumb-wrap{
320    position:relative;
321    width:100%;
322    aspect-ratio: 16 / 9;
323    background:#e4ddce;
324    overflow:hidden;
325  }
326  .thumb-wrap img{
327    width:100%; height:100%;
328    object-fit:cover;
329    display:block;
330  }
331  .play-badge{
332    position:absolute;
333    inset:0;
334    display:flex;
335    align-items:center;
336    justify-content:center;
337    background: rgba(26,24,23,0);
338    transition: background 0.2s ease;
339  }
340  .ticket:hover .play-badge{ background: rgba(26,24,23,0.18); }
341  .play-badge svg{
342    width:46px; height:46px;
343    opacity:0;
344    transform: scale(0.8);
345    transition: opacity 0.2s ease, transform 0.2s ease;
346    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
347  }
348  .ticket:hover .play-badge svg{ opacity:1; transform:scale(1); }
349
350  .perforation{
351    height:0;
352    border-top: 2px dashed #D9D2C2;
353    position:relative;
354    margin: 0 14px;
355  }
356  .perforation::before, .perforation::after{
357    content:'';
358    position:absolute;
359    top:-8px;
360    width:16px; height:16px;
361    border-radius:50%;
362    background:var(--cream);
363  }
364  .perforation::before{ left:-22px; }
365  .perforation::after{ right:-22px; }
366
367  .ticket-body{ padding: 14px 16px 16px; }
368  .ticket-body h3{
369    margin:0 0 6px;
370    font-size:0.98rem;
371    line-height:1.35;
372    font-weight:600;
373    display:-webkit-box;
374    -webkit-line-clamp:2;
375    -webkit-box-orient:vertical;
376    overflow:hidden;
377  }
378  .meta{
379    display:flex;
380    align-items:center;
381    gap:6px;
382    font-size:0.78rem;
383    color:var(--grey);
384  }
385  .meta .dot{
386    width:6px; height:6px;
387    border-radius:50%;
388    background:var(--marquee-red);
389    flex-shrink:0;
390  }
391
392  /* ---------- Empty / error / loading states ---------- */
393  .state-card{
394    max-width:560px;
395    margin: 60px auto;
396    background:var(--card-bg);
397    border-radius:12px;
398    padding:28px 26px;
399    text-align:center;
400    box-shadow: 0 6px 18px var(--shadow);
401  }
402  .state-card h2{
403    font-family:'Bebas Neue', sans-serif;
404    letter-spacing:0.05em;
405    font-size:1.6rem;
406    margin:0 0 8px;
407    color:var(--marquee-red);
408  }
409  .state-card p{ font-size:0.9rem; color:#444; line-height:1.5; }
410  .state-card code{
411    background:#F0EAD9;
412    padding:2px 6px;
413    border-radius:4px;
414    font-size:0.82rem;
415  }
416
417  .skeleton{
418    break-inside: avoid;
419    margin:0 0 20px;
420    border-radius:10px;
421    background:linear-gradient(100deg, #ece6d8 30%, #f5f0e4 45%, #ece6d8 60%);
422    background-size: 250% 100%;
423    animation: shimmer 1.4s ease infinite;
424    aspect-ratio: 16/12;
425  }
426  @keyframes shimmer{ 0%{background-position:120% 0;} 100%{background-position:-20% 0;} }
427
428  /* ---------- Modal ---------- */
429  .modal-overlay{
430    position:fixed; inset:0;
431    background:rgba(10,10,10,0.82);
432    display:none;
433    align-items:center;
434    justify-content:center;
435    z-index:100;
436    padding:24px;
437  }
438  .modal-overlay.open{ display:flex; }
439  .modal-box{
440    width:100%;
441    max-width:920px;
442    background:#000;
443    border-radius:10px;
444    overflow:hidden;
445    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
446  }
447  .modal-frame-wrap{ position:relative; width:100%; aspect-ratio:16/9; }
448  .modal-frame-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
449  .modal-close{
450    position:fixed;
451    top:24px; right:24px;
452    background:var(--cream);
453    color:var(--ink);
454    border:none;
455    width:40px; height:40px;
456    border-radius:50%;
457    font-size:1.2rem;
458    cursor:pointer;
459    z-index:101;
460  }
461
462  footer.credits{
463    text-align:center;
464    font-size:0.75rem;
465    color:var(--grey);
466    margin-top:36px;
467  }
468
469  @media (prefers-reduced-motion: reduce){
470    .ticket, .toast, .play-badge, .play-badge svg{ transition:none; }
471    .ticket:nth-child(3n), .ticket:nth-child(3n+1){ transform:none; }
472    .skeleton{ animation:none; }
473  }
474</style>
475
476
477<!-- Youtube grid section -->
478</head>
479<body class="body">
480    <!-- 1) Facebook SDK root + script (place once, right after <body>) -->
481    <div id="fb-root"></div>
482    
482<script async defer crossorigin="anonymous"
483      src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v25.0">
484    </script>
484
485
486    <div data-collapse="medium" data-animation="default" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="navigation w-nav">
487        <div class="navigation-wrap">
488            <a href="/" aria-current="page" class="logo-link w-nav-brand w--current" aria-label="home"><img src="/index_files/2026-SSSVV-logo.png" width="250" alt="" class="logo-image"></a>
489            <div class="menu">
490                <nav role="navigation" class="navigation-items w-nav-menu">
491                    <div class="div-block-21 sp">
492                        <a href="/" aria-current="page" class="navigation-item w-nav-link w--current">Home</a>
493                        <div data-hover="false" data-delay="0" class="dropdown w-dropdown">
494                            <div class="dropdown-toggle w-dropdown-toggle" id="w-dropdown-toggle-0" aria-controls="w-dropdown-list-0" aria-haspopup="menu" aria-expanded="false" role="button" tabindex="0">
495                                <div class="icon-2 w-icon-dropdown-toggle" aria-hidden="true"></div>
496                                <div class="text-block-12 no-caps">SSSVV Activities</div>
497                            </div>
498                            <nav class="dropdown-list w-dropdown-list" id="w-dropdown-list-0" aria-labelledby="w-dropdown-toggle-0"><a href="/activities/content-dissemination-and-training" class="dropdown-link w-dropdown-link" tabindex="0">Content Dissemination and Training</a><a href="/activities/mission-english" class="dropdown-link w-dropdown-link" tabindex="0">Mission English</a><a href="/activities/inclusive-education" class="dropdown-link w-dropdown-link" tabindex="0">Inclusive Education</a><a href="/activities/content-creation" class="dropdown-link w-dropdown-link" tabindex="0">Content Creation</a><a href="/activities/multimedia" class="dropdown-link w-dropdown-link" tabindex="0">Multimedia</a><a href="/activities/sopaan" class="dropdown-link w-dropdown-link" tabindex="0">SOPAAN</a></nav>
499                        </div>
500
501                        <div data-hover="false" data-delay="0" class="dropdown w-dropdown">
502                            <div class="dropdown-toggle w-dropdown-toggle" id="w-dropdown-toggle-0" aria-controls="w-dropdown-list-0" aria-haspopup="menu" aria-expanded="false" role="button" tabindex="0">
503                                <div class="icon-2 w-icon-dropdown-toggle" aria-hidden="true"></div>
504                                <div class="text-block-12 no-caps">About</div>
505                            </div>
506                            <nav class="dropdown-list w-dropdown-list" id="w-dropdown-list-0" aria-labelledby="w-dropdown-toggle-0"><a href="/about" class="dropdown-link w-dropdown-link" tabindex="0">About us</a><a href="/testimonials" class="dropdown-link w-dropdown-link" tabindex="0">Testimonials</a><a href="/lastq" class="dropdown-link w-dropdown-link" tabindex="0">Quarterly Milestones</a></nav>
507                        </div>
508
509                    </div>
510                    <div><a href="https://volunteer.srisathyasaividyavahini.org/" target="_blank" class="navigation-item w-nav-link"><img border="0" alt="VMS" title="VMS" src="/index_files/VMS.png" width="125" height="125"></a><a href="https://contentmanagement.srisathyasaividyavahini.org/" target="_blank" class="navigation-item w-nav-link"><img border="0" alt="CMS" title="CMS" src="/index_files/CMS.png" width="125" height="125"></a><a href="https://learning.srisathyasaividyavahini.org/" target="_blank" class="navigation-item w-nav-link"><img border="0" alt="LMS" title="LMS" src="/index_files/LMS.png" width="125" height="125"></a></div>
511                </nav>
512                <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"><img src="./index_files/61bfb478d143ca4acf03cdf3_menu-icon.png" width="22" alt="" class="menu-icon"></div>
513            </div>
514        </div>
515        <div class="w-nav-overlay" data-wf-ignore="" id="w-nav-overlay-0"></div>
516    </div>
517    <div class="section cc-store-home-wrap">
518
519<!-- START CC2026 Banner -->
520<div id="vms-banner" style="background-color: #f0f7ff; border-bottom: 2px solid #0056b3; padding: 20px; text-align: center; font-family: 'Open Sans', Arial, sans-serif; color: #333;">
521    
522    <a href="./SSSVV-Collaborators-Conference-2026.html" ><img border="0" alt="CC2026" title="CC2026" src="/index_files/CC2026Banner.jpg" style="display: block; margin: 0 auto; width: 100%; max-width: 900px; height: auto;" ></a>
523
524</div>
525<!-- END CC2026 Banner -->
526        
527       <!-- <div class="intro-header homepage-banner-edusummit2025" style="cursor: pointer" onclick="window.open('https://forms.gle/BsrAXpo3mEiE3UuEA', '_blank');"> --> 
528            <div class="intro-content cc-homepage">
529                <div class="intro-text">
530
531                    <div class="heading-jumbo">Integral Education<br>For all, By all</div>
532                    <div class="paragraph-bigger cc-bigger-white-light">
532Built by Sri Sathya Sai Vidya Vahini <br>with the Blessings of Sri Sathya Sai Baba<br></div>
533                </div>
534            </div>
535        <!-- </div> -->
536        <div class="container clear">
537            <div class="w-layout-grid about-grid">
538                <div>
539                    <img src="https://www.srisathyasaividyavahini.org/index_files/Mandala-1-4-2023-964.jpg" loading="lazy" width="400" sizes="25vw" alt="Mandala illustration" class="image-11">
540                    <button id="MandalaBtn">Click here to view full size</button>
541                    <!-- The Mandala Modal -->
542                    <div id="mandalaModal" class="modal">
543
544                        <!-- Modal content -->
545                        <div id="mandalaModalContent" class="modal-content">
546
547                            <div class="mnavbar">
548                                <a href="#">&nbsp;</a><br>
549                                <span class="close">&times;</span>
550                                <!-- <a href="#" >Close</a> -->
551                                <a href="#" onclick="closemodal()">Close &nbsp; On a computer, Scrollwheel for vertical scroll, 
552                                    Shift+scrollwheel for horizontal scroll, ESC or click here to close. 
553                                    Click here to close. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
554                                    Click here to close. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
555                                    Click here to close. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
556                                    Click here to close. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
557                                    Click here to close. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
558                                    Click here to close. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
559                                    Click here to close. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
560                                    Click here to close. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
561                                    Click here to close. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
562                                    Click here to close. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
563                                    Click here to close. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
564                                    Click here to close. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
565                                    </a>
566                                
567                                </div>
568                                <!--
569                            <div class="modal-header">
570                                <span class="close">&times;</span>
571                                <h6><a href="#" onclick="closemodal()">Close</a></h6>
572                                
573                            </div> -->
574                            <div class="modal-body">
575                                <img src="/index_files/Mandala-1-4-2023-4096.jpg" loading="lazy" height="4096" width="4096" alt="Mandala illustration large size">
576
577                            </div>
578
579                        </div>
580
581                    </div>
582                </div>
583                <div class="heading-jumbo-small"><strong class="bold-text">Welcome to Sri Sathya Sai Vidya Vahini <br></strong>A unique ed-tech platform that provides values-based teaching resources for teachers and students<br></div>
584            </div>
585            
586            <p class="paragraph-16">This project is a global collaboration between educators, trainers and technologists inspired by Bhagawan Sri Sathya Sai Baba’s teachings. It combines the latest in pedagogy, teacher training, teaching aids and technology. The shared values that unite humanity drive this project. Apart from academic excellence which is inclusive, it focuses on universality while celebrating diversity, and promoting social justice, environmental sensitivity and responsible citizenship. This platform offers you free access to content in the form of master lesson plans and supporting digital teaching aids, mapped to learning outcomes, as per the <a href="https://www.education.gov.in/sites/upload_files/mhrd/files/NEP_Final_English_0.pdf" target="_blank">National Education Policy.</a><br><br>We encourage you to contact us (details given below) should you want yourself and your school 
586community to be a supported school of Sri Sathya Sai Vidya Vahini. Supported schools that are registered with us can access content, and benefit from free access to a hybrid training program which offers a mix of virtual training and self-paced learning. Please join us in our efforts to open the ed-tech advantage to every teacher and every future citizen of the nation.<br><br>Sai Ram</p>
587            <div class="divider"></div>
588            <div class="home-content-wrap">
589                <div class="w-layout-grid about-grid">
590                    <div id="w-node-_86e64837-0616-515b-4568-76c147234d34-12f1ba88">
591                        <div class="home-section-wrap">
592                            <div class="label cc-light">About</div>
593                            <h2 class="section-heading">What is Sri Sathya Sai Vidya Vahini?</h2>
594                            <p class="paragraph-light">Sri Sathya Sai Vidya Vahini (SSSVV) is a volunteer driven digital initiative of the Sri Sathya Sai Central Trust focusing on providing Integral Education to rural schools. Using its unique IIEPx4C Framework, it creates and offers content, teaching/learning aids and training to the schools. All of these are offered free to strengthen the hands of the teachers.</p>
595                        </div>
596                    </div>
597                    <div style="padding-top:56.17021276595745%" class="w-video w-embed"><iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F6Aq64OIBm0E%3Ffeature%3Doembed&amp;display_name=YouTube&amp;url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D6Aq64OIBm0E&amp;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F6Aq64OIBm0E%2Fhqdefault.jpg&amp;key=96f1f04c5f4143bcb0f2e68c87d65feb&amp;type=text%2Fhtml&amp;schema=youtube" scrolling="no" allowfullscreen="" title="Introduction to SSSVV"></iframe></div>
598                </div>
599                <div class="w-layout-grid about-grid cc-about-2">
600                    <img src="./index_files/iiep.png" loading="lazy" id="w-node-_19aeea12-be04-7863-39a5-8bc2296cb2d9-12f1ba88" sizes="(max-width: 479px) 100vw, (max-width: 767px) 68vw, 69vw" alt="" class="image-5">
601                    <div id="w-node-_86e64837-0616-515b-4568-76c147234d41-12f1ba88">
602                        <div class="home-section-wrap">
603                            <div class="label cc-light">Team</div>
604                            <h2 class="section-heading">What we do</h2>
605                            <p class="paragraph-light">
606                                &bull; Provide inspiring, inclusive content for teaching and learning to reduce the educational inequities that exist in India.
607
608                                <br>
609
610                                &bull; Empower teachers with appropriate knowledge and skills to enthuse learners with insightful ideas.
611
612                                <br>
613
614                                &bull; Help learners become active participants while enjoying the learning process.
615
616                                <br>
617
618                                &bull; Develop digital content, tools and teaching aids with the latest pedagogy using holistic frameworks.
619
620                                <br>
621
622                                &bull; Forge partnerships with technologists and other organisations
623                                to develop digital technologies and aids for bringing better efficiencies in the teaching-learning process.
624                                <br>
625
626
627                            </p>
628                        </div>
629                    </div>
630                </div>
631            </div>
632        </div>
633    </div>
634    <div class="container-4 w-container">
635        <div class="columns-5 rv w-row">
636            <div class="column-25 w-col w-col-6 w-col-tiny-tiny-stack">
637                <p class="paragraph-light">The SSSVV learning process is extended across 4 domains (4Cs), viz., Classroom, Corridor, Campus and Community. This forms the IIEP x 4C matrix of 16 cells. SSSVV creates content, samples, process documents and standard operating processes for each of these 16 cells. And to enable the teachers and the school ecosystem to effectively and efficie
637ntly deliver, SSSVV provides required training, both in person and virtually.</p>
638                <a href="/about" class="styleguide-button-wrap w-button">Learn More</a>
639            </div>
640            <div class="w-col w-col-6 w-col-tiny-tiny-stack"><img src="./index_files/62c6358f1c97ea310a3b4c36_Asset 3IIEP graphic fan SSSVV.png" loading="lazy" srcset="/index_files/62c6358f1c97ea310a3b4c36_Asset%203IIEP%20graphic%20fan%20SSSVV-p-500.png 500w, /index_files/62c6358f1c97ea310a3b4c36_Asset%203IIEP%20graphic%20fan%20SSSVV-p-800.png 800w, /index_files/62c6358f1c97ea310a3b4c36_Asset%203IIEP%20graphic%20fan%20SSSVV-p-1080.png 1080w, /index_files/62c6358f1c97ea310a3b4c36_Asset%203IIEP%20graphic%20fan%20SSSVV.png 1115w" sizes="(max-width: 479px) 100vw, (max-width: 767px) 46vw, (max-width: 991px) 354px, 1125px" alt="" class="image-6"></div>
641        </div>
642    </div>
643    <div class="section">
644        <div class="container padded-beige">
645            <div class="blog-heading">
646                <div class="label cc-light">About Us</div>
647
648                <div class="home-content-wrap">
649                    <div class="w-layout-grid about-grid">
650                        <div id="w-node-_86e64837-0616-515b-4568">
651                            <div class="home-section-wrap">
652                                <div class="label cc-light">&nbsp;</div>
653                                <h2 class="section-heading">Inclusive Education</h2>
654                                <p class="paragraph-light" style="text-align: left">
655                                    <b>Enabling Holistic Inclusion </b><br>
656The <b>National Education Policy (NEP) 2020</b> envisions every school in India becoming inclusive by 2030, aligning with the <b>UNESCO Sustainable Development Goals 2030</b>. NEP 2020 offers a transformative framework - shifting from mere physical inclusion to true <b>holistic inclusion</b>, where every learner thrives. At <b>Sri Sathya Sai Vidya Vahini (SSSVV)</b>, we are deeply committed to this vision. With the immense grace and blessings of <b>Bhagawan Sri Sathya Sai Baba</b>, we are privileged to support and implement inclusive practices that address the diverse needs of all learners within the same classroom without compromising on quality or learning outcomes.
657                                    <br /><br />
658                                    Every child, regardless of ability, deserves to learn, grow and succeed in a supportive and inclusive environment. Through our initiatives aligned with NEP 2020, SSSVV strives to make a lasting difference in the lives of children with special needs and all learners by fostering <b>equity, empathy and excellence</b> in education.
659                                </p>
660                            </div>
661                        </div>
662                        <div style="padding-top:56.17021276595745%" class="w-video w-embed"><iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FvGuyal4BtNg%3Ffeature%3Doembed&amp;display_name=YouTube&amp;url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DvGuyal4BtNg&amp;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FvGuyal4BtNg%2Fhqdefault.jpg&amp;key=96f1f04c5f4143bcb0f2e68c87d65feb&amp;type=text%2Fhtml&amp;schema=youtube" scrolling="no" allowfullscreen="" title="Introduction to SSSVV"></iframe></div>
663                    </div>
664                </div>
665
666                <h2 class="work-heading">Activities</h2>
667            </div>
668            <div data-current="Tab 2" data-easing="ease" data-duration-in="300" data-duration-out="100" class="w-tabs">
669                <div class="w-tab-menu" role="tablist">
670                    <a data-w-tab="Tab 1" class="tab-link-tab-1 w-inline-block w-tab-link" tabindex="-1" id="w-tabs-0-data-w-tab-0" href="/#w-tabs-0-data-w-pane-0" role="tab" aria-controls="w-tabs-0-data-w-pane-0" aria-selected="false">
671                        <div>Content Creation</div>
672                    </a>
673                    <a data-w-tab="Tab 5" class="tab-link-tab-5 w-inline-block w-tab-link" tabindex="-1" id="w-tabs-0-data-w-tab-1" href="/#w-tabs-0-data-w-pane-1" role="tab" aria-controls="w-tabs-0-data-w-pane-1" aria-selected="false">
674                        <div>Multimedia</div>
675                    </a>
676                    <a data-w-tab="Tab 2" class="tab-link-tab-2 w-inline-block w-tab-link w--current" id="w-tabs-0-data-w-tab-2" href="/#w-tabs-0-data-w-pane-2" role="tab" aria-controls="w-tabs-0-data-w-pane-2" aria-selected="true">
677                        <div>Content Dissemination</div>
678                    </a>
679                    <a data-w-tab="Tab 3" class="tab-link-tab-3 w-inline-block w-tab-link" tabindex="-1" id="w-tabs-0-data-w-tab-3" href="/#w-tabs-0-data-w-pane-3" role="tab" aria-controls="w-tabs-0-data-w-pane-3" aria-selected="false">
680                        <div>Mission English</div>
681                    </a>
682                    <a data-w-tab="Tab 4" class="tab-link-tab-4 w-inline-block w-tab-link" tabindex="-1" id="w-tabs-0-data-w-tab-4" href="/#w-tabs-0-data-w-pane-4" role="tab" aria-controls="w-tabs-0-data-w-pane-4" aria-selected="false">
683                        <div>Inclusive Education</div>
684                    </a>
685                    <a data-w-tab="Tab 6" class="tab-link-tab-6 w-inline-block w-tab-link" tabindex="-1" id="w-tabs-0-data-w-tab-6" href="/#w-tabs-0-data-w-pane-6" role="tab" aria-controls="w-tabs-0-data-w-pane-6" aria-selected="false">
686                        <div>SOPAAN</div>
687                    </a>
688                </div>
689                <div class="w-tab-content">
690                    <div data-w-tab="Tab 1" class="w-tab-pane" id="w-tabs-0-data-w-pane-0" role="tabpanel" aria-labelledby="w-tabs-0-data-w-tab-0">
691                        <p class="paragraph">SSSVV creates content as 'teaching learning resources' for Classroom usage, along with visually appealing multimedia teaching aids. Ideas and suggestions are provided to create immersive spaces within the school for the Corri
691dor domain. 'Process documents' are developed to nurture culture in the school for the 'Campus' domain. SOPs are generated for outreach programs with the 'Community'. Volunteers collaboratively create; Teacher Resource Materials that align with the National Curriculum Framework [NCF]. <br><br><a href="/activities/content-creation">To know more about the process, click here.</a></p>
692                    </div>
693                    <div data-w-tab="Tab 5" class="w-tab-pane" id="w-tabs-0-data-w-pane-1" role="tabpanel" aria-labelledby="w-tabs-0-data-w-tab-1">
694                        <p class="paragraph">The purpose of the MM team is to enrich content using effective original audio-visuals that creates a transformative experience for the stakeholders of SSSVV. <br><a href="/activities/multimedia">To know more about our Multimedia activities, click here.</a><br></p>
695                    </div>
696                    <div data-w-tab="Tab 2" class="w-tab-pane w--tab-active" id="w-tabs-0-data-w-pane-2" role="tabpanel" aria-labelledby="w-tabs-0-data-w-tab-2">
697                        <p class="paragraph">SSSVV content needs to be distributed to the supported schools, especially rural schools, to enable teachers to access and navigate through the content easily based on the CBSE or state boards. School teachers also need to be provided training on how to use this content in the classroom. This is done through the Learning Management System (LMS). <br><a href="/activities/content-dissemination-and-training">For more details click here.</a></p>
698                    </div>
699                    <div data-w-tab="Tab 3" class="w-tab-pane" id="w-tabs-0-data-w-pane-3" role="tabpanel" aria-labelledby="w-tabs-0-data-w-tab-3">
700                        <p class="paragraph">The PYF (Phone Your Friend)&nbsp;program is an SSSVV initiative to teach English to a large number of School teachers and youth who have studied in vernacular languages and are unable to communicate fluently in English. The program is a volunteer driven initiative wherein a PYF volunteer mentors a teacher over the phone for a one-hour English immersion class.&nbsp;<br>You can be a part of this delightful journey for English teaching. <a href="/activities/mission-english">To know more about the process, click here.</a><br></p>
701                    </div>
702                    <div data-w-tab="Tab 4" class="w-tab-pane" id="w-tabs-0-data-w-pane-4" role="tabpanel" aria-labelledby="w-tabs-0-data-w-tab-4">
703                        <p class="paragraph">The SSSVV Inclusive Education Project provides an inclusive vision of National Education Policy 2020 (NEP 2020) that provides an education system that contributes to an equitable and vibrant knowledge society, by providing high-quality education to all. It also develops awareness of one's role and responsibility and instills skills, values and disposition. <br>‍<br><a href="/activities/inclusive-education">To know more about the SSSVV Inclusive Education Project, click here</a>.<br></p>
704                    </div>
705                    <div data-w-tab="Tab 6" class="w-tab-pane" id="w-tabs-0-data-w-pane-6" role="tabpanel" aria-labelledby="w-tabs-0-data-w-tab-6">
706                        <p class="paragraph">SOPAAN, which means a ladder in Sanskrit, is a bilingual, foundational learning program that aims to help children ascend the learning ladder through structured and enjoyable activities, blossoming into lifelong learners. <br>‍<br><a href="/activities/sopaan">To know more about SSSVV's SOPAAN, click here</a>.<br></p>
707                    </div>
708                </div>
709            </div>
710            <div class="div-block-11">
711                <div id="w-node-_25c03127-3716-25f0-b64d-f9c6ea27fb15-12f1ba88">
712                    <h1 class="heading-17">1 Million+</h1>
713                    <div class="text-block">Beneficiary students and teachers</div>
714                </div>
715            
716                
717                <div id="w-node-_4ba4b86f-d41b-812b-bd0a-6618ba3925e8-12f1ba88">
718                    <h1 class="heading-17">3,000+</h1>
719                    <div class="text-block">Master Lesson Plans</div>
720                </div>
721                <div id="w-node-_10b410c9-c717-cbe0-aad1-97b536e753e7-12f1ba88">
722                    <h1 class="heading-17">33,000+</h1>
723                    <div class="text-block">Digital assets</div>
724                </div>
725
726                <div id="w-node-_72db628e-f630-8eea-d941-c7bbd545bd76-12f1ba88">
727                    <h1 class="heading-17">5,00,000+</h1>
728                    <div class="text-block">Number of learning sessions of SSSVV digital content on DIKSHA</div>
729                </div>
730                
731            </div>
732        </div>
733    </div>
734    <div class="section cc-cta pink">
735        <div class="container">
736            <div class="cta-wrap">
737                <div class="heading-jumbo-small">National Footprint:<br>SSSVV's Govt Collaborations&nbsp;<br></div>
738                <div class="columns-15 w-row">
739                    <div class="w-col w-col-3">
740                        <div class="div-block-6">
741                            <h5 class="heading-9 center">NITI&nbsp;Aayog</h5>
742                        </div>
743                    </div>
744                    <div class="w-col w-col-9">
745                        <p class="paragraph-10">Under the Hon. Prime Minister's Aspirational District program, SSSVV is serving two districts, Virudhunagar in Tamil Nadu and Vidisha in Madhya Pradesh. We provide effective interventions to government teachers for improving teaching-learning outcomes in foundational Literacy as per <a href="https://www.education.gov.in/sites/upload_files/mhrd/files/nipun_bharat_eng1.pdf" target="_blank"> NIPUN Bharat Guidelines</a>.</p>
746                    </div>
747                </div>
748                <div class="columns-15 w-row">
749                    <div class="w-col w-col-3">
750                        <div class="div-block-6">
751                            <h5 class="heading-9 center">NCERT - CIET</h5>
752                        </div>
753                    </div>
754                    <div class="w-col w-col-9">
755                        <p class="paragraph-11">SSSVV is the single largest contributor of digital content under Teacher Resources on the open-source platform. So far, SSSVV has contributed 7,243+ digital assets to empower teachers across the country with world-class teaching resources.&nbsp;These cover the entire CBSE syllabus for Classes 1-9 for EVS, Science, Maths &amp; Social Studies through the Hon. PM's <a href="https://diksha.gov.in/" target="_blank" style="display:inline-block">VidyaDaan initiative</a>. The SSSVV content is based on its unique 7 assets methodology, ideation method and enriched with multimedia, activity based learning and human values.&nbsp;Apart from CBSE content, we are now uploading Karnataka State Board content on <a href="https://diksha.gov.in/" target="_blank" style="display:inline-block">diksha.gov.in</a> to enable teachers across the state of Karnataka to have free access to SSSVV's high quality content. 
756                            Several other State Boards' syllabi are in the process of being uploaded. These include AP and Gujarat and others.</p>
757                    </div>
758                </div>
759                <div class="columns-15 w-row">
760                    <div class="w-col w-col-3">
761                        <div class="div-block-6">
762                            <h5 class="heading-9 center">Adi Dravidar and Tribal Welfare, Tamil Nadu</h5>
763                        </div>
764                    </div>
765                    <div class="w-col w-col-9">
766                        <p class="paragraph-12">SSSVV's team for the Mission English program is teaching English to the teachers of the ADW Board of Tamil Nadu government. The pilot project involves one-on-one teaching of English through phone interaction between the selected teachers and their mentors from SSSVV.</p>
767                    </div>
768                </div>
769                <div class="columns-15 w-row">
770                    <div class="w-col w-col-3">
771                        <div class="div-block-6">
772                            <h5 class="heading-9 center">IIT - Chennai</h5>
773                        </div>
774                    </div>
775                    <div class="w-col w-col-9">
776                        <p class="paragraph-12">IIT-M has been designated by the Ministry of Education ("MoE") and SWAYAM BOARD
777to oversee and execute the implementation of the SWAYAM Plus Initiative. SWAYAM Plus portal, an enhanced initiative of the SWAYAM platform is focused on expanding the existing offerings to incorporate industry aligned courses, thereby improving learners' skills and employability. SWAYAM Plus aims to establish itself as a premier digital platform, providing high-quality micro-credentials and certifications to a diverse range of learners. SSSVV is collaborating with IIT Madras to create certificate courses for teachers in the education domain. So far, SSSVV has already contributed 5 Courses.</p>
778                    </div>
779                </div>
780                
781            </div>
782        </div>
783    </div>
784    <section id="gallery" class="gallery wf-section">
785        <div class="centered-container w-container">
786            <div data-delay="8000" data-animation="slide" class="slider w-slider" data-autoplay="true" data-easing="ease" data-hide-arrows="false" data-disable-swipe="false" data-autoplay-limit="0" data-nav-spacing="3" data-duration="2000" data-infinite="true" role="region" aria-label="carousel" style="width:100%">
787
788      <div class="w-slider-mask" id="w-slider-mask-0">
789        
790        <!-- Slide 1 -->
791        <div class="slide-2 w-slide" aria-label="1 of 10" role="group">
792            <img src="index_files/LMS-sliders-_Swayam-Plus-courses-1.jpg" loading="lazy" alt="Swayam Plus Course 1" style="width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto;">
793        </div>
794
795        <!-- Slide 2 -->
796        <div class="slide-2 w-slide" aria-label="2 of 10" role="group" aria-hidden="true">
797            <img src="index_files/LMS-sliders-_Swayam-Plus-courses-2.jpg" loading="lazy" alt="Swayam Plus Course 2" style="width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto;" aria-hidden="true">
798        </div>
799
800        <!-- Slide 3 -->
801        <div class="slide-2 w-slide" aria-label="3 of 10" role="group" aria-hidden="true">
802            <img src="index_files/LMS-sliders-_Swayam-Plus-courses-3.jpg" loading="lazy" alt="Swayam Plus Course 3" style="width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto;" aria-hidden="true">
803        </div>
804
805        <!-- Slide 4 -->
806        <div class="slide-2 w-slide" aria-label="4 of 10" role="group" aria-hidden="true">
807            <img src="index_files/LMS-sliders-_Swayam-Plus-courses-4.jpg" loading="lazy" alt="Swayam Plus Course 4" style="width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto;" aria-hidden="true">
808        </div>
809
810        <!-- Slide 5 -->
811        <div class="slide-2 w-slide" aria-label="5 of 10" role="group" aria-hidden="true">
812            <img src="index_files/LMS-sliders-_Swayam-Plus-courses-5.jpg" loading="lazy" alt="Swayam Plus Course 5" style="width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto;" aria-hidden="true">
813        </div>
814
815        <!-- Slide 6 -->
816        <div class="slide-2 w-slide" aria-label="6 of 10" role="group" aria-hidden="true">
817            <img src="index_files/LMS-sliders-_Swayam-Plus-courses-6.jpg" loading="lazy" alt="Swayam Plus Course 6" style="width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto;" aria-hidden="true">
818        </div>
819
820        <!-- Slide 7 -->
821        <div class="slide-2 w-slide" aria-label="7 of 10" role="group" aria-hidden="true">
822            <img src="index_files/LMS-sliders-_Swayam-Plus-courses-7.jpg" loading="lazy" alt="Swayam Plus Course 7" style="width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto;" aria-hidden="true">
823        </div>
824
825        <!-- Slide 8 -->
826        <div class="slide-2 w-slide" aria-label="8 of 10" role="group" aria-hidden="true">
827            <img src="index_files/LMS-sliders-_Swayam-Plus-courses-8.jpg" loading="lazy" alt="Swayam Plus Course 8" style="width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto;" aria-hidden="true">
828        </div>
829
830        <!-- Slide 9 -->
831        <div class="slide-2 w-slide" aria-label="9 of 10" role="group" aria-hidden="true">
832            <img src="index_files/LMS-sliders-_Swayam-Plus-courses-9.jpg" loading="lazy" alt="Swayam Plus Course 9" style="width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto;" aria-hidden="true">
833        </div>
834
835        <!-- Slide 10 -->
836        <div class="slide-2 w-slide" aria-label="10 of 10" role="group" aria-hidden="true">
837            <img src="index_files/LMS-sliders-_Swayam-Plus-courses-10.jpg" loading="lazy" alt="Swayam Plus Course 10" style="width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto;" aria-hidden="true">
838        </div>
839        
840        <div aria-live="off" aria-atomic="true" class="w-slider-aria-label" data-wf-ignore="">Slide 1 of 10.</div>
841
842    </div>
843    
844    <div class="w-slider-arrow-left" role="button" tabindex="0" aria-controls="w-slider-mask-0" aria-label="previous slide">
845        <div class="icon w-icon-slider-left"></div>
846    </div>
847    <div class="w-slider-arrow-right" role="button" tabindex="0" aria-controls="w-slider-mask-0" aria-label="next slide">
848        <div class="icon-3 w-icon-slider-right"></div>
849    </div>
850    
851    <div class="padded-paragraph w-slider-nav w-round">
852        <div class="w-slider-dot w-active" data-wf-ignore="" aria-label="Show slide 1 of 10" aria-pressed="true" role="button" tabindex="0" style="margin-left: 3px; margin-right: 3px;"></div>
853        <div class="w-slider-dot" data-wf-ignore="" aria-label="Show slide 2 of 10" aria-pressed="false" role="button" tabindex="-1" style="margin-left: 3px; margin-right: 3px;"></div>
854        <div class="w-slider-dot" data-wf-ignore="" aria-label="Show slide 3 of 10" aria-pressed="false" role="button" tabindex="-1" style="margin-left: 3px; margin-right: 3px;"></div>
855        <div class="w-slider-dot" data-wf-ignore="" aria-label="Show slide 4 of 10" aria-pressed="false" role="button" tabindex="-1" style="margin-left: 3px; margin-right: 3px;"></div>
856        <div class="w-slider-dot" data-wf-ignore="" aria-label="Show slide 5 of 10" aria-pressed="false" role="button" tabindex="-1" style="margin-left: 3px; margin-right: 3px;"></div>
857        <div class="w-slider-dot" data-wf-ignore="" aria-label="Show slide 6 of 10" aria-pressed="false" role="button" tabindex="-1" style="margin-left: 3px; margin-right: 3px;"></div>
858        <div class="w-slider-dot" data-wf-ignore="" aria-label="Show slide 7 of 10" aria-pressed="false" role="button" tabindex="-1" style="margin-left: 3px; margin-right: 3px;"></div>
859        <div class="w-slider-dot" data-wf-ignore="" aria-label="Show slide 8 of 10" aria-pressed="false" role="button" tabindex="-1" style="margin-left: 3px; margin-right: 3px;"></div>
860        <div class="w-slider-dot" data-wf-ignore="" aria-label="Show slide 9 of 10" aria-pressed="false" role="button" tabindex="-1" style="margin-left: 3px; margin-right: 3px;"></div>
861        <div class="w-slider-dot" data-wf-ignore="" aria-label="Show slide 10 of 10" aria-pressed="false" role="button" tabindex="-1" style="margin-left: 3px; margin-right: 3px;"></div>
862    </div>
863</div>
864
865      </div>
866    </div>
867        </div>
868        <div>
869            <!--
870  FACEBOOK PAGE PLUGIN — pure client-side embed, no API key / no server needed.
871  Shows your Page's latest posts. Facebook renders this as an iframe, so you
872  can't restyle the posts themselves, but you CAN control the container size,
873  spacing, and placement on your homepage like any other widget.
874
875  HOW TO USE:
876  1. Paste the <div id="fb-root"></div> and the SDK 
876<script> block once,
877     right after the opening <body> tag of your page (only once per page,
878     even if you have multiple FB widgets on it).
879  2. Paste the .fb-feed-wrapper block wherever on the homepage you want
880     the feed to appear.
881  3. That's it — no build step, no npm packages, no backend.
882-->
883
884
885<!-- 2) The feed itself (place wherever you want it on the homepage) -->
886<!--
887    Facebook hard-caps the Page Plugin at 500px wide. To visually match
888    our 940px dev boxes, we render the plugin at its native 500x450
889    size, then scale it up 1.88x with a CSS transform (500 * 1.88 = 940).
890    Height is set to 450 pre-scale (25% smaller than the original 600),
891    which becomes 846px once scaled — a 25% reduction either way you
892    calculate it, since scaling is linear.
893 
894    The outer .fb-scale-outer div is sized to the FINAL scaled dimensions
895    (940x846) so it reserves the correct space in the page layout — a
896    transform alone doesn't do that, since it only affects how the
897    element is painted, not the space it occupies in flow.
898  -->
899<section class="fb-feed-wrapper">
900  <h2 class="fb-feed-title">Latest Facebook updates</h2>
901  <div class="fb-feed-inner">
902    <div class="fb-scale-outer" style="width: 940px; height: 846px; overflow: hidden;">
903      <div class="fb-scale-wrapper" style="transform: scale(1.88); transform-origin: top left; width: 500px; height: 450px;">
904        <div class="fb-page"
905          data-href="https://www.facebook.com/profile.php?id=61587747644525"
906          data-tabs="timeline"
907          data-width="500"
908          data-height="450"
909          data-small-header="true"
910          data-adapt-container-width="false"
911          data-hide-cover="false"
912          data-show-facepile="false">
913          <blockquote cite="https://www.facebook.com/profile.php?id=61587747644525"
914            class="fb-xfbml-parse-ignore">
915            <a href="https://www.facebook.com/profile.php?id=61587747644525">
916              Our Facebook Page
917            </a>
918          </blockquote>
919        </div>
920      </div>
921    </div>
922  </div>
923</section>
924 
925<style>
926  /* Basic responsive container — matches the 940px max-width used by
927     other dev boxes on this site. NOTE: Facebook hard-caps the Page
928     Plugin itself at 500px wide (their iframe, their limit — this
929     can't be overridden via CSS or data-width). The widget will sit
930     inside this wider box rather than stretching to fill it. */
931  .fb-feed-wrapper {
932    max-width: 940px;
933    margin: 2rem auto;
934    padding: 1rem;
935    box-sizing: border-box;
936  }
937 
938  .fb-feed-title {
939  text-align: center;
940  font-size: 1.8rem;
941  margin-bottom: 1rem;
942  color: #1877F2;
943  }
944 .yt-feed-title {
945  text-align: center;
946  font-size: 1.8rem;
947  margin-bottom: 1rem;
948  color: #FF0000;
949  }
950 
951  .fb-feed-inner {
952    display: flex;
953    justify-content: center; /* centers the 500px-capped widget within the 940px box */
954    width: 100%;
955    overflow: hidden; /* keeps the iframe from overflowing on small screens */
956  }
957 
958  /* On small screens, let the plugin shrink with the container.
959     data-adapt-container-width="true" (set above) handles the resizing,
960     this just makes sure the wrapper itself doesn't force horizontal scroll. */
961  @media (max-width: 540px) {
962    .fb-feed-wrapper {
963      padding: 0.5rem;
964    }
965  }
966</style>
967 
968<script>
969  // Since we turned off data-adapt-container-width (needed for the fixed
970  // scale math above), we handle responsiveness manually: recalculate the
971  // scale factor whenever the wrapper is narrower than 940px, so the plugin
972  // shrinks to fit instead of overflowing on smaller dev boxes / mobile.
973  (function () {
974    var BASE_WIDTH = 500;
975    var BASE_HEIGHT = 450;
976    var MAX_WIDTH = 940;
977 
978    function rescaleFbPlugin() {
979      var outer = document.querySelector('.fb-scale-outer');
980      var wrapper = document.querySelector('.fb-scale-wrapper');
981      if (!outer || !wrapper) return;
982 
983      var containerWidth = outer.parentElement.clientWidth;
984      var targetWidth = Math.min(containerWidth, MAX_WIDTH);
985      var scale = targetWidth / BASE_WIDTH;
986 
987      wrapper.style.transform = 'scale(' + scale + ')';
988      outer.style.width = targetWidth + 'px';
989      outer.style.height = (BASE_HEIGHT * scale) + 'px';
990    }
991 
992    window.addEventListener('load', rescaleFbPlugin);
993    window.addEventListener('resize', rescaleFbPlugin);
994  })();
995</script>
995
996<!-- Youtube grid section -->
997
998<section class="fb-feed-wrapper" id=videos>
999  <h2 class="yt-feed-title">Latest videos</h2>
1000
1001
1002<div class="controls">
1003    <div class="status-line" id="statusLine">Loading…</div>
1004    <button class="refresh-btn" id="refreshBtn"> </button>
1005  </div>
1006
1007  <div class="grid-wrap">
1008    <div class="grid" id="grid">
1009      <div class="skeleton"></div>
1010      <div class="skeleton"></div>
1011      <div class="skeleton"></div>
1012      <div class="skeleton"></div>
1013    </div>
1014  </div>
1015
1016  <footer class="credits"> </footer>
1017
1018  <div class="modal-overlay" id="modalOverlay">
1019    <button class="modal-close" id="modalClose" aria-label="Close video">✕</button>
1020    <div class="modal-box">
1021      <div class="modal-frame-wrap" id="modalFrameWrap"></div>
1022    </div>
1023  </div>
1024
1025  <div class="toast" id="toast"></div>
1026
1027<script>
1028/* =========================================================================
1029   CONFIGURE ME
1030   ========================================================================= */
1031const CONFIG = {
1032  // Your channel ID (starts with "UC…") — found in YouTube Studio > Settings
1033  // > Channel > Advanced. You can also pass a handle like "@yourchannel" and
1034  // it will be resolved automatically.
1035  CHANNEL_ID: 'UChZyM9rpHrRytHO6zd8Gxwg', // <-- replace with your channel ID
1036
1037  // A YouTube Data API v3 key, restricted to your domain via HTTP referrer
1038  // restrictions in Google Cloud Console (APIs & Services > Credentials).
1039  API_KEY: 'AIzaSyCzb2CjmkEa6O0ffGQIoTB3Zvsbia9xGt0', // <-- replace with your key
1040
1041  MAX_RESULTS: 20,          // how many videos to show
1042  POLL_INTERVAL_MINUTES: 10 // how often to check for new uploads
1043};
1044/* ========================================================================= */
1045
1046const API_BASE = 'https://www.googleapis.com/youtube/v3';
1047const grid = document.getElementById('grid');
1048const statusLine = document.getElementById('statusLine');
1049const refreshBtn = document.getElementById('refreshBtn');
1050const toast = document.getElementById('toast');
1051const modalOverlay = document.getElementById('modalOverlay');
1052const modalFrameWrap = document.getElementById('modalFrameWrap');
1053const modalClose = document.getElementById('modalClose');
1054
1055let knownIds = new Set();
1056let uploadsPlaylistId = null;
1057let isFirstLoad = true;
1058
1059function timeAgo(iso){
1060  const diffMs = Date.now() - new Date(iso).getTime();
1061  const mins = Math.floor(diffMs / 60000);
1062  if (mins < 60) return `${mins}m ago`;
1063  const hrs = Math.floor(mins / 60);
1064  if (hrs < 24) return `${hrs}h ago`;
1065  const days = Math.floor(hrs / 24);
1066  if (days < 30) return `${days}d ago`;
1067  const months = Math.floor(days / 30);
1068  if (months < 12) return `${months}mo ago`;
1069  return `${Math.floor(months / 12)}y ago`;
1070}
1071
1072function showState(title, message){
1073  grid.innerHTML = `
1074    <div class="state-card" style="column-span: all;">
1075      <h2>${title}</h2>
1076      <p>${message}</p>
1077    </div>`;
1078}
1079
1080// Resolve "@handle" style channel identifiers to a real channel ID.
1081async function resolveChannelId(idOrHandle){
1082  if (idOrHandle.startsWith('UC')) return idOrHandle;
1083  const handle = idOrHandle.replace(/^@/, '');
1084  const url = `${API_BASE}/channels?part=id&forHandle=${encodeURIComponent(handle)}&key=${CONFIG.API_KEY}`;
1085  const res = await fetch(url);
1086  const data = await res.json();
1087  if (data.error) throw new Error(data.error.message);
1088  if (!data.items || !data.items.length) throw new Error('Could not resolve channel handle.');
1089  return data.items[0].id;
1090}
1091
1092// The uploads playlist ID is always the channel ID with "UC" swapped for "UU" —
1093// this avoids an extra API call (and extra quota) vs. calling channels.list.
1094function deriveUploadsPlaylistId(channelId){
1095  return channelId.startsWith('UC') ? 'UU' + channelId.slice(2) : null;
1096}
1097
1098async function fetchLatestVideos(){
1099  const url = `${API_BASE}/playlistItems?part=snippet&playlistId=${uploadsPlaylistId}&maxResults=${CONFIG.MAX_RESULTS}&key=${CONFIG.API_KEY}`;
1100  const res = await fetch(url);
1101  const data = await res.json();
1102  if (data.error) throw new Error(data.error.message);
1103  return (data.items || [])
1104    .filter(item => item.snippet && item.snippet.resourceId)
1105    .map(item => ({
1106      id: item.snippet.resourceId.videoId,
1107      title: item.snippet.title,
1108      publishedAt: item.snippet.publishedAt,
1109      thumbnail:
1110        item.snippet.thumbnails?.high?.url ||
1111        item.snippet.thumbnails?.medium?.url ||
1112        item.snippet.thumbnails?.default?.url
1113    }));
1114}
1115
1116function renderCard(video, isNew){
1117  const el = document.createElement('button');
1118  el.className = 'ticket';
1119  el.type = 'button';
1120  el.setAttribute('aria-label', `Play video: ${video.title}`);
1121  el.innerHTML = `
1122    ${isNew ? '<div class="new-flag">NEW</div>' : ''}
1123    <div class="thumb-wrap">
1124      <img src="${video.thumbnail}" alt="" loading="lazy">
1125      <div class="play-badge">
1126        <svg viewBox="0 0 64 64" fill="none"><circle cx="32" cy="32" r="32" fill="rgba(255,255,255,0.92)"/><path d="M26 20L46 32L26 44V20Z" fill="#1A1817"/></svg>
1127      </div>
1128    </div>
1129    <div class="perforation"></div>
1130    <div class="ticket-body">
1131      <h3>${video.title}</h3>
1132      <div class="meta"><span class="dot"></span>
1132 ${timeAgo(video.publishedAt)}</div>
1133    </div>
1134  `;
1135  el.addEventListener('click', () => openModal(video.id, video.title));
1136  return el;
1137}
1138
1139function openModal(videoId, title){
1140  modalFrameWrap.innerHTML = `<iframe src="https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0" title="${title}" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
1141  modalOverlay.classList.add('open');
1142}
1143function closeModal(){
1144  modalOverlay.classList.remove('open');
1145  modalFrameWrap.innerHTML = '';
1146}
1147modalClose.addEventListener('click', closeModal);
1148modalOverlay.addEventListener('click', (e) => { if (e.target === modalOverlay) closeModal(); });
1149document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });
1150
1151function showToast(msg){
1152  toast.innerHTML = msg;
1153  toast.classList.add('show');
1154  setTimeout(() => toast.classList.remove('show'), 4200);
1155}
1156
1157async function loadVideos({ silent } = {}){
1158  try{
1159    if (!silent){
1160      statusLine.textContent = 'Loading…';
1161    }
1162
1163    if (!uploadsPlaylistId){
1164      const resolvedChannelId = await resolveChannelId(CONFIG.CHANNEL_ID);
1165      uploadsPlaylistId = deriveUploadsPlaylistId(resolvedChannelId);
1166    }
1167
1168    const videos = await fetchLatestVideos();
1169
1170    if (!videos.length){
1171      showState('No uploads yet', 'This channel doesn\'t have any public videos to show.');
1172      return;
1173    }
1174
1175    const newOnes = videos.filter(v => !knownIds.has(v.id));
1176
1177    if (isFirstLoad){
1178      grid.innerHTML = '';
1179      videos.forEach(v => grid.appendChild(renderCard(v, false)));
1180      videos.forEach(v => knownIds.add(v.id));
1181      isFirstLoad = false;
1182    } else if (newOnes.length){
1183      newOnes.reverse().forEach(v => {
1184        grid.prepend(renderCard(v, true));
1185        knownIds.add(v.id);
1186      });
1187      showToast(`🎬 New upload: <strong>${newOnes[0].title}</strong>`);
1188    }
1189
1190    const now = new Date();
1191    // statusLine.innerHTML = `<strong>${videos.length}</strong> videos shown · checked at ${now.toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'})}`;
1192    statusLine.innerHTML = ` `;
1193
1194  } catch(err){
1195    console.error(err);
1196    showState(
1197      'Setup needed',
1198      `Couldn't load videos (${err.message}). Double-check <code>CHANNEL_ID</code> and <code>API_KEY</code> at the top of the script, and make sure the YouTube Data API v3 is enabled for your key in Google Cloud Console.`
1199    );
1200    statusLine.textContent = 'Not connected';
1201  }
1202}
1203
1204loadVideos();
1205setInterval(() => loadVideos({ silent: true }), CONFIG.POLL_INTERVAL_MINUTES * 60 * 1000);
1206</script>
1206
1207
1208</section>
1209            
1210<!-- Youtube grid section -->
1211            
1212                <section id="contact-form" class="contact-form-2 wf-section">
1213        <div class="w-container">
1214            <h2 class="heading-13">We would love to have your help!</h2>
1215            <div id="formInstructions" class="small-text">
1216                <div class="w-row">
1217                    <div class="w-col w-col-6">
1218                        <h4 class="heading-14"><a href="/cdn-cgi/l/email-protection#4e2a273c2b2d3a213c0e3d3d3d383860213c29" class="link-5"><span class="__cf_email__" data-cfemail="1f7b766d7a7c6b706d5f6c6c6c696931706d78">[email&#160;protected]</span></a>&nbsp; +91 9177890308</h4>
1219                    </div>
1220                    <div class="w-col w-col-6">
1221                        <h4><a href="/cdn-cgi/l/email-protection#ceaaa7bcabadbaa1bc8ebdbdbdb8b8e0a1bca9" class="link-4"><span class="__cf_email__" data-cfemail="3b4b575a555552555c7b4848484d4d1554495c">[email&#160;protected]</span> <br>+91 8105658625</a>‍</h4>
1222                    </div>
1223                </div>
1224            </div>
1225        </div>
1226    </section>
1227    <footer id="footer" class="footer wf-section">
1228        <div class="w-container">
1229            <div class="footer-flex-container grid">
1230                <a href="/#" class="footer-logo-link"><img src="/index_files/2026-SSSVV-logo.png" alt="" class="footer-image"></a>
1231                <div class="div-block-8">
1232                    <h2 class="footer-heading">Sitemap</h2>
1233                    <ul role="list" class="list w-list-unstyled">
1234                        <li><a href="/" target="_blank" aria-current="page" class="footer-link w--current">Home</a></li>
1235                        <li><a href="/about" target="_blank" class="footer-link">About us</a></li>
1236                        <li><a href="/testimonials" target="_blank" class="footer-link">Testimonials</a></li>
1237                        <li><a href="/lastq" target="_blank" aria-current="page" class="footer-link w--current">Quarterly Milestones</a></li>
1238                        <li><a href="/activities/content-creation" target="_blank" class="footer-link">Content Creation</a></li>
1239                        <li><a href="/activities/multimedia" target="_blank" class="footer-link">Multimedia</a></li>
1240                        <li><a href="/activities/content-dissemination-and-training" target="_blank" class="footer-link">Content Dissemination &amp; Training</a></li>
1241                    </ul>
1242                    <a href="/activities/mission-english" target="_blank" class="footer-link">Mission English</a><a href="/activities/inclusive-education" target="_blank" class="footer-link">Inclusive Education</a><a href="/activities/sopaan" target="_blank" class="footer-link">SOPAAN</a>
1243                </div>
1244                <div class="div-block-9">
1245                    <h2 class="footer-heading">Important</h2>
1246                    <ul role="list" class="w-list-unstyled">
1247                        <li><a href="https://www.srisathyasai.org/" target="_blank" class="footer-link">Sri Sathya Sai Central Trust</a></li>
1248                        <li><a href="https://www.sssmediacentre.org/" target="_blank" class="footer-link">Sri Sathya Sai Media Centre</a><a href="https://www.sssihl.edu.in/" target="_blank" class="footer-link">Sri Sathya Sai Institute of Higher Learning</a><a href="https://www.ssshss.edu.in/" target="_blank" class="footer-link">Sri Sathya Sai Higher Secondary School</a><a href="https://www.ssssoindia.org/" target="_blank" class="footer-link">Sri Sathya Sai Seva Organization</a><a href="https://www.srisathyasaiglobalcouncil.org/" target="_blank" class="footer-link">Sri Sathya Sai Global Council</a><a href="https://ssschv.srisathyasai.org/" target="_blank" class="footer-link">Sri Sathya Sai Centre for Human Values</a><a href="https://sssihms.org/" target="_blank" class="footer-link">Sri Sathya Sai Institute of Higher Medical Sciences</a></li>
1249                    </ul>
1250                </div>
1251                <div class="div-block-10">
1252                    <h2 class="footer-heading">Social</h2>
1253                    <ul role="list" class="list-2 w-list-unstyled">
1254                        <li class="list-item-2"><a href="https://www.facebook.com/profile.php?id=61587747644525" target="_blank" class="w-inline-block"><img src="./index_files/626d6e83910685814921ecdd_Asset 21FB icon.png" loading="lazy" width="60" alt="" class="image-2"></a></li>
1255                        <li class="list-item"><a href="https://www.instagram.com/srisathyasaividyavahini/" target="_blank" class="w-inline-block"><img src="/index_files/insta-icon.png" loading="lazy" width="60" alt="" class="image-3"></a></li><li class="list-item"><a href="https://youtube.com/@sssvv?si=O4cZT9K5AyyDVX0c" target="_blank" class="w-inline-block"><img src="./index_files/626d6e8304af2a45e9df9174_Asset 23YT icon.png" loading="lazy" width="60" alt="" class="image-3"></a></li>
1256                        <li><a href="https://www.linkedin.com/company/sri-sathya-sai-vidya-vahini/" target="_blank" class="w-inline-block"><img src="./index_files/626d6e83795d94f79ab52ec1_Asset 22LinkedIn icon.png" loading="lazy" width="60" alt="" class="image-3"></a></li>
1257                    </ul>
1258                </div>
1259            </div>
1260            <div class="text-block-2">
1260Copyright © 2026 Sri Sathya Sai Central Trust. All rights reserved.</div>
1261        </div>
1262    </footer>
vendor: 114 bytes, lines 1262-1264
1262
1263
1264    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
1264<script src="./index_files/jquery-3.5.1.min.dc5e7f18c8.js.download" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
1264
1265    
1265<script src="/index_files/modwebflow.js" type="text/javascript"></script>
1265
1266
1267    <!--[if lte IE 9]>
1267<script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script>
1267<![endif]-->
1268    <!-- Modal script -->
1269    
1269<script>
1270        // Get the modal
1271        var modal = document.getElementById("mandalaModal");
1272        var modalcont = document.getElementById("mandalaModalContent");
1273        
1274        // Get the button that opens the modal
1275        var btn = document.getElementById("MandalaBtn");
1276
1277        // Get the <span> element that closes the modal
1278        var span = document.getElementsByClassName("close")[0];
1279        
1280        // When the user clicks the button, open the modal
1281        btn.onclick = function () {
1282            modal.style.display = "block";
1283            //window.scrollTo(1000,1000);
1284            modalcont.scrollLeft = 2000;
1285            modalcont.scrollTop = 1500;
1286        }
1287
1288        // When the user clicks on <span> (x), close the modal
1289        span.onclick = function () {
1290            modal.style.display = "none";
1291            
1292        }
1293
1294        function closemodal() {
1295            modal.style.display = "none";
1296        }
1297
1298        // When the user clicks anywhere outside of the modal, close it
1299        window.onclick = function (event) {
1300            if (event.target == modal) {
1301                modal.style.display = "none";
1302            }
1303        }
1304        window.addEventListener('keydown', function (event) {
1305            if (event.key === 'Escape') {
1306                modal.style.display = "none";
1307            }
1308        });
1309
1310    
1311        
1312        
1313    </script>
1313
1314
1315<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"68eade3ca0be4e52ae025f7297aa3a10","r":1,"spa":2}' crossorigin="anonymous"></script>
1315
1316</body>
1317</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.