PageSourceSearch

https://www.ciyota.org/

html ciyota.org collected 2026-10-09 16:56:08 UTC 109,287 bytes, 2,195 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8    <meta name="description" content="CIYOTA | Educate - Unite - Grow">
9    <meta name="keywords" content="Refugees, IDPs, Education, Empowerment, Inclusion, Leadership, Entrepreneurship, Livelihood, Sustainability, Transformation">
10    <meta name="author" content="Thierry Barata">
11
12    <!-- Open Graph / Social Media Meta Tags -->
13    <meta property="og:title" content="CIYOTA | Educate - Unite - Grow">
14    <meta property="og:description" content="CIYOTA is a refugee led, community-driven non-profit organisation dedicated to empowering refugees, Internally Displaced Persons (IDPs), and marginalised youth in Uganda and the Democratic Republic of Congo (DRC).">
15    <meta property="og:image" content="https://ciyota.org/assets/img/social-display/social-media-previewer.jpg" />
16    <meta property="og:url" content="https://ciyota.org/">
17    <meta property="og:type" content="website">
18    <meta name="description" content="CIYOTA is a refugee led, community-driven non-profit organisation dedicated to empowering refugees, Internally Displaced Persons (IDPs), and marginalised youth in Uganda and the Democratic Republic of Congo (DRC).">
19    <meta name="twitter:description" content="CIYOTA is a refugee led, community-driven non-profit organisation dedicated to empowering refugees, Internally Displaced Persons (IDPs), and marginalised youth in Uganda and the Democratic Republic of Congo (DRC).">
20    <title>CIYOTA - Build united, developed, and peaceful communities in Africa</title>
21
22    <!--  favicon -->
23    <link rel="shortcut icon" href="assets/img/ico/icon-ciyota.png">
24    <!--  apple-touch-icon -->
25    <link rel="apple-touch-icon" sizes="144x144" href="assets/img/ico/apple-touch-icon-144-ciyota.png">
26    <link rel="apple-touch-icon" sizes="114x114" href="assets/img/ico/apple-touch-icon-144-ciyota.png">
27    <link rel="apple-touch-icon" sizes="72x72" href="assets/img/ico/apple-touch-icon-72-ciyota.png.png">
28    <link rel="apple-touch-icon" sizes="57x57" href="assets/img/ico/apple-touch-icon-57-ciyota.png">
29    <link rel="canonical" href="https://www.ciyota.org/" />
30    
31    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
32    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
33
34    <!-- font awesome -->
35    <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.min.css">
36
37    
37<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
37
38    
38<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
38
39    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
40
41    <!-- font awesome -->
42    <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.min.css">
43    <!-- magnafic popup -->
44    <link rel="stylesheet" href="assets/magnific-popup/magnific-popup.css">
45    <!-- swiper -->
46    <link rel="stylesheet" href="assets/css/swiper.min.css">
47    <!-- bootsnav menu -->
48    <link rel="stylesheet" href="assets/css/bootsnav.css">
49    <!-- Bootstrap -->
50    <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
51    <!-- Style CSS -->
52    <link href="style.css?v=37" rel="stylesheet">
53    
53<script src="ciyota-leave-message.js" defer></script>
53
54    
54<script src="assets/js/topbar-lang.js"></script>
54
55    <!-- Google Business Profile Structured Data -->
56    
56<script type="application/ld+json">
57        {
58            "@context": "https://schema.org",
59            "@type": "LocalBusiness",
60            "name": "CIYOTA",
61            "image": "https://ciyota.org/assets/img/ciyota-main-logo.png",
62            "@id": "https://www.google.com/maps?cid=17185833987953838322",
63            "url": "https://ciyota.org",
64            "telephone": "+256775156681",
65            "priceRange": "$",
66            "address": {
67                "@type": "PostalAddress",
68                "streetAddress": "Sunna II Rd, Plot 7 Ntinda",
69                "addressLocality": "Kampala",
70                "addressRegion": "Nakawa Division",
71                "postalCode": "37403",
72                "addressCountry": "UG"
73            },
74            "geo": {
75                "@type": "GeoCoordinates",
76                "latitude": 0.355820,
77                "longitude": 32.621890
78            },
79            "openingHoursSpecification": [{
80                "@type": "OpeningHoursSpecification",
81                "dayOfWeek": [
82                    "Monday",
83                    "Tuesday",
84                    "Wednesday",
85                    "Thursday",
86                    "Friday"
87                ],
88                "opens": "08:00",
89                "closes": "16:30"
90            }],
91            "sameAs": [
92                "https://www.google.com/maps?cid=17185833987953838322",
93                "https://www.linkedin.com/company/ciyotaofficial",
94                "https://www.facebook.com/ciyotaofficial",
95                "https://www.instagram.com/ciyotaofficial/",
96                "https://www.youtube.com/@ciyotaofficial",
97                "https://x.com/ciyotaofficial"
98            ]
99        }
100    </script>
100
101    <!-- Organization Schema -->
102    
102<script type="application/ld+json">
103        {
104            "@context": "https://schema.org",
105            "@type": "Organization",
106            "name": "CIYOTA",
107            "url": "https://ciyota.org",
108            "logo": "https://ciyota.org/assets/img/ciyota-main-logo.png",
109            "contactPoint": {
110                "@type": "ContactPoint",
111                "telephone": "+256775156681",
112                "contactType": "customer service",
113                "areaServed": ["UG", "CD"],
114                "AvailableLanguage": ["en", "fr", "sw"]
115            },
116            "sameAs": [
117                "https://www.google.com/maps?cid=17185833987953838322",
118                "https://www.linkedin.com/company/ciyotaofficial",
119                "https://www.facebook.com/ciyotaofficial",
120                "https://www.instagram.com/ciyotaofficial/",
121                "https://www.youtube.com/@ciyotaofficial",
122                "https://x.com/ciyotaofficial"
123            ]
124        }
125    </script>
125
126    <!-- Google Business Profile Structured Data -->
127    
127<script type="application/ld+json">
128        {
129            "@context": "https://schema.org",
130            "@type": "LocalBusiness",
131            "name": "CIYOTA",
132            "image": "https://ciyota.org/assets/img/ciyota-main-logo.png",
133            "@id": "https://www.google.com/maps?cid=17185833987953838322",
134            "url": "https://ciyota.org",
135            "telephone": "+256775156681",
136            "priceRange": "$",
137            "address": {
138                "@type": "PostalAddress",
139                "streetAddress": "Sunna II Rd, Plot 7 Ntinda",
140                "addressLocality": "Kampala",
141                "addressRegion": "Nakawa Division",
142                "postalCode": "37403",
143                "addressCountry": "UG"
144            },
145            "geo": {
146                "@type": "GeoCoordinates",
147                "latitude": 0.355820,
148                "longitude": 32.621890
149            },
150            "openingHoursSpecification": [{
151                "@type": "OpeningHoursSpecification",
152                "dayOfWeek": [
153                    "Monday",
154                    "Tuesday",
155                    "Wednesday",
156                    "Thursday",
157                    "Friday"
158                ],
159                "opens": "08:00",
160                "closes": "16:30"
161            }],
162            "sameAs": [
163                "https://www.google.com/maps?cid=17185833987953838322",
164                "https://www.linkedin.com/company/ciyotaofficial",
165                "https://www.facebook.com/ciyotaofficial",
166                "https://www.instagram.com/ciyotaofficial/",
167                "https://www.youtube.com/@ciyotaofficial",
168                "https://x.com/ciyotaofficial"
169            ]
170        }
171    </script>
171
172    <!-- Organization Schema -->
173    
173<script type="application/ld+json">
174        {
175            "@context": "https://schema.org",
176            "@type": "Organization",
177            "name": "CIYOTA",
178            "url": "https://ciyota.org",
179            "logo": "https://ciyota.org/assets/img/ciyota-main-logo.png",
180            "contactPoint": {
181                "@type": "ContactPoint",
182                "telephone": "+256775156681",
183                "contactType": "customer service",
184                "areaServed": ["UG", "CD"],
185                "AvailableLanguage": ["en", "fr", "sw"]
186            },
187            "sameAs": [
188                "https://www.google.com/maps?cid=17185833987953838322",
189                "https://www.linkedin.com/company/ciyotaofficial",
190                "https://www.facebook.com/ciyotaofficial",
191                "https://www.instagram.com/ciyotaofficial/",
192                "https://www.youtube.com/@ciyotaofficial",
193                "https://x.com/ciyotaofficial"
194            ]
195        }
196    </script>
196
197    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
198    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
199    <!--[if lt IE 9]>
200          
200<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
200
201          
201<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
201
202        <![endif]-->
203</head>
204
205<body>
206
207    <!--header start-->
208    <header>
209<!-- top bar -->
210<div class="top-bar-ciyota-version2">
211    <div class="top-bar-ciyota-version2-container">
212
213        <!-- LEFT : Social icons + contact -->
214        <div class="top-bar-ciyota-version2-left">
215            <div class="top-bar-ciyota-version2-social">
216                <a href="https://www.linkedin.com/company/ciyotaofficial/" target="_blank" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
217                <a href="https://www.facebook.com/ciyotaofficial" target="_blank" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
218                <a href="https://www.instagram.com/ciyotaofficial/" target="_blank" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
219                <a href="https://twitter.com/ciyotaofficial" target="_blank" aria-label="X (Twitter)"><i class="fab fa-x-twitter"></i></a>
220            </div>
221            <div class="top-bar-ciyota-version2-contact">
222                <span><i class="fas fa-phone"></i>+1 (276) 650-9001</span>
223                <span><i class="fas fa-envelope"></i>[email protected]</span>
224            </div>
225        </div>
226
227        <!-- RIGHT : Nav links + Language Picker + CTA buttons -->
228        <div class="top-bar-ciyota-version2-nav">
229
230            <a href="traveltoafrica.html">Travel for Impact</a><span class="top-bar-ciyota-version2-pipe">|</span>
231
232            <!-- Language Picker -->
233            <div class="top-bar-ciyota-version2-lang">
234                <button class="lang-toggle" id="langToggleBtn" onclick="toggleLangDropdown()" aria-label="Select Language" aria-expanded="false" aria-haspopup="listbox">
235                    <i class="fas fa-globe"></i>
236                    <span class="lang-current">EN</span>
237                    <i class="fas fa-chevron-down lang-arrow"></i>
238                </button>
239                <div class="lang-dropdown" id="langDropdown" role="listbox" aria-label="Language options">
240                    <a href="#" class="lang-option active" role="option" aria-selected="true" onclick="setLanguage('EN','English',this);return false;">
241                        <span class="lang-flag">🇬🇧</span> English
242                    </a>
243                    <a href="#" class="lang-option" role="option" aria-selected="false" onclick="setLanguage('FR','Français',this);return false;">
244                        <span class="lang-flag">🇫🇷</span> Français
245                    </a>
246                </div>
247            </div><span class="top-bar-ciyota-version2-pipe">|</span>
248
249            <a href="donate.html" class="top-bar-ciyota-version2-donate">
250                <span class="top-bar-ciyota-version2-default">Donate Today</span>
251                <span class="top-bar-ciyota-version2-hover">DONATE NOW</span>
252                <div class="particles">
253                    <div class="particle"></div>
254                    <div class="particle"></div>
255                    <div class="particle"></div>
256                    <div class="particle"></div>
257                    <div class="particle"></div>
258                    <div class="particle"></div>
259                </div>
260                <div class="sparkle"></div>
261                <div class="sparkle"></div>
262            </a>
263
264        </div>
265    </div>
266</div>
267<!-- top bar -->
268
269        <!-- Start Navigation -->
270        <nav class="navbar navbar-default navbar-sticky bootsnav">
271
272            <!-- topbar visibilty toggole in mobile devices, you can remove this trigger if you dont want to show topbar in small devices -->
273
274
275
276            <!--<span class="tt-toggle-bar"><i class="fa fa-angle-down"></i></span>-->
277
278            <!-- Start Top Search -->
279
280            <!-- End Top Search -->
281
282            <div class="container">
283                <!-- Start Atribute Navigation -->
284
285                <!-- End Atribute Navigation -->
286
287                <!-- Start Header Navigation -->
288                <div class="navbar-header">
289                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
290                            <i class="fa fa-bars"></i>
291                        </button>
292                    <h1>
293                        <a class="navbar-brand" href="index.html"><img src="assets/img/ciyota-main-logo.png" class="logo logo-scrolled" alt=""></a>
294                    </h1>
295                </div>
296                <!-- End Header Navigation -->
297
298                <!-- Collect the nav links, forms, and other content for toggling -->
299                <div class="collapse navbar-collapse" id="navbar-menu">
300                    <ul class="nav navbar-nav navbar-right" data-in="" data-out="">
301                        <li class="active">
302                            <a href="index.html">Home</a>
303                        </li>
304                        <li class="dropdown" id="about-us">
305                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">About</a>
306                            <ul class="dropdown-menu">
307
308                                <li><a href="about-us.html">ABOUT US</a></li>
309                                <li><a href="timeline.html">OUR JOURNEY</a></li>
310
311                                <li><a href="team.html">OUR TEAM</a></li>
312                                <li><a href="partners.html">OUR PARTNERS</a></li>
313                                <li><a href="reports.html">REPORTS</a></li>
314                            </ul>
315                        </li>
316                        
316<script>
317                            // Get current page filename
318                            var currentPage = window.location.pathname.split("/").pop();
319
320                            // List of pages under the "News" dropdown
321                            var newsPages = ["about-us.html", "timeline.html", "team.html", "partners.html", "reports.html"];
322
323                            // If current page matches one of them, add 'active' class
324                            if (newsPages.includes(currentPage)) {
325                                document.getElementById('about-us').classList.add('active');
326                            }
327                        </script>
327
328                        <li class="dropdown" id="OurApproach">
329                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Approach</a>
330                            <ul class="dropdown-menu">
331
332                                <li><a href="our-approach-education.html">EDUCATION</a></li>
333                                <li><a href="our-approach-community.html">COMMUNITY</a></li>
334                            </ul>
335                        </li>
336                        
336<script>
337                            // Get current page filename
338                            var currentPage = window.location.pathname.split("/").pop();
339
340                            // List of pages under the "News" dropdown
341                            var newsPages = ["our-approach-education.html", "our-approach-community.html"];
342
343                            // If current page matches one of them, add 'active' class
344                            if (newsPages.includes(currentPage)) {
345                                document.getElementById('OurApproach').classList.add('active');
346                            }
347                        </script>
347
348                        <li class="dropdown" id="WhereWeWork">
349                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Where we work</a>
350                            <ul class="dropdown-menu">
351                                <li><a href="ciyota-uganda.html">UGANDA</a></li>
352                                <li><a href="ciyota-drc.html">DR CONGO</a></li>
353                            </ul>
354                        </li>
355                        
355<script>
356                            // Get current page filename
357                            var currentPage = window.location.pathname.split("/").pop();
358
359                            // List of pages under the "News" dropdown
360                            var newsPages = ["ciyota-uganda.html", "ciyota-drc.html"];
361
362                            // If current page matches one of them, add 'active' class
363                            if (newsPages.includes(currentPage)) {
364                                document.getElementById('WhereWeWork').classList.add('active');
365                            }
366                        </script>
366
367                        <li class="dropdown">
368                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Get Involved</a>
369                            <ul class="dropdown-menu">
370
371                                <li><a href="sponsorship.html">SPONSOR A STUDENT</a></li>
372                                <li><a href="donate.html">DONATE TODAY</a></li>
373                                <li><a href="traveltoafrica.html">TRAVEL FOR IMPACT</a></li>
374                                <li><a href="pre-qualification.html">PRE-QUALIFICATION</a></li>
375                                <li><a href="https://careers.ciyota.org/">JOIN OUR TEAM</a></li>
376                            </ul>
377                        </li>
378                        <li class="dropdown">
379                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">News</a>
380                            <ul class="dropdown-menu">
381                                <li><a href="events.html">EVENTS</a></li>
382                                <li><a href="news.html">UPDATES</a></li>
383                                <!-- <li><a href="success-stories.html">SUCCESS STORIES</a></li> -->
384                            </ul>
385                        </li>
386                    </ul>
387                </div>
388                <!-- /.navbar-collapse -->
389            </div>
390        </nav>
391        <!-- End Navigation -->
392        <div class="clearfix"></div>
393    </header>
394    <!--header end-->
395
396
397
398    <!--CIYOTA HERO SECTION starts-->
399
400    <!-- Hero Section with Slideshow -->
401    <!-- hero-3-ciyota-style Section -->
402
403
404 <!-- 6th Hero Section -->
405<section class="ciyota-6th-hero-section">
406    <div class="ciyota-6th-hero-container">
407
408        <!-- Slideshow Container -->
409        <div class="ciyota-6th-hero-slideshow">
410            <!-- Slide 1 -->
411            <div class="ciyota-6th-hero-slide active">
412                <div class="ciyota-6th-hero-slide-bg"></div>
413            </div>
414
415            <!-- Slide 2 -->
416            <div class="ciyota-6th-hero-slide">
417                <div class="ciyota-6th-hero-slide-bg"></div>
418            </div>
419
420            <!-- Slide 3 -->
421            <div class="ciyota-6th-hero-slide">
422                <div class="ciyota-6th-hero-slide-bg"></div>
423            </div>
424
425            <!-- Slide 4 -->
426            <div class="ciyota-6th-hero-slide">
427                <div class="ciyota-6th-hero-slide-bg"></div>
428            </div>
429
430            <!-- Slide 5 -->
431            <div class="ciyota-6th-hero-slide">
432                <div class="ciyota-6th-hero-slide-bg"></div>
433            </div>
434
435            <!-- Slide 6 -->
436            <div class="ciyota-6th-hero-slide">
437                <div class="ciyota-6th-hero-slide-bg"></div>
438            </div>
439
440            <!-- Slide 7 -->
441            <div class="ciyota-6th-hero-slide">
442                <div class="ciyota-6th-hero-slide-bg"></div>
443            </div>
444
445            <!-- Slide 8 -->
446            <div class="ciyota-6th-hero-slide">
447                <div class="ciyota-6th-hero-slide-bg"></div>
448            </div>
449
450            <!-- Slide 9 -->
451            <div class="ciyota-6th-hero-slide">
452                <div class="ciyota-6th-hero-slide-bg"></div>
453            </div>
454
455            <!-- Slide 10 -->
456            <div class="ciyota-6th-hero-slide">
457                <div class="ciyota-6th-hero-slide-bg"></div>
458            </div>
459
460            <!-- Add more slides as needed -->
461        </div>
462
463        <!-- Content Card -->
464        <div class="ciyota-6th-hero-content">
465            <div class="ciyota-6th-hero-card">
466                <div class="ciyota-6th-hero-card-content">
467                    <h3 class="ciyota-6th-hero-title">Where We Work</h3>
468
469                    <div class="ciyota-6th-hero-location">
470                        <p class="ciyota-6th-hero-text">We support refugees and vulnerable youth through the provision of quality education and skills development. We also provide scholarships and train communities in leadership, social entrepreneurship, and active non-violence.</p>
471
472                        <div class="ciyota-6th-hero-buttons">
473                            <button class="ciyota-6th-hero-button"><a href="ciyota-uganda.html">UGANDA</a></button>
474                            <button class="ciyota-6th-hero-button"><a href="ciyota-drc.html">DRC</a></button>
475                        </div>
476                    </div>
477                </div>
478            </div>
479
480            <!-- Navigation Dots -->
481            <div class="ciyota-6th-hero-dots">
482                <span class="ciyota-6th-hero-dot active" data-slide="0"></span>
483                <span class="ciyota-6th-hero-dot" data-slide="1"></span>
484                <span class="ciyota-6th-hero-dot" data-slide="2"></span>
485                <span class="ciyota-6th-hero-dot" data-slide="3"></span>
486                <span class="ciyota-6th-hero-dot" data-slide="4"></span>
487                <span class="ciyota-6th-hero-dot" data-slide="5"></span>
488                <span class="ciyota-6th-hero-dot" data-slide="6"></span>
489                <span class="ciyota-6th-hero-dot" data-slide="7"></span>
490                <span class="ciyota-6th-hero-dot" data-slide="8"></span>
491                <span class="ciyota-6th-hero-dot" data-slide="9"></span>
492                
493                <!-- Add more dots as needed to match your slides -->
494            </div>
495        </div>
496
497    </div>
498</section>
499
500<script>
501    document.addEventListener('DOMContentLoaded', function() {
502        const slides = document.querySelectorAll('.ciyota-6th-hero-slide');
503        const dots = document.querySelectorAll('.ciyota-6th-hero-dot');
504        let currentSlide = 0;
505        let slideInterval;
506
507        function showSlide(index) {
508            slides.forEach(slide => slide.classList.remove('active'));
509            dots.forEach(dot => dot.classList.remove('active'));
510
511            if (slides[index]) {
512                slides[index].classList.add('active');
513            }
514            if (dots[index]) {
515                dots[index].classList.add('active');
516            }
517
518            currentSlide = index;
519        }
520
521        function nextSlide() {
522            const next = (currentSlide + 1) % slides.length;
523            showSlide(next);
524        }
525
526        function startSlideshow() {
527            if (slides.length > 1) {
528                slideInterval = setInterval(nextSlide, 7000);
529            }
530        }
531
532        function stopSlideshow() {
533            clearInterval(slideInterval);
534        }
535
536        dots.forEach((dot, index) => {
537            dot.addEventListener('click', () => {
538                showSlide(index);
539                stopSlideshow();
540                startSlideshow();
541            });
542        });
543
544        startSlideshow();
545    });
546</script>
546
547    <!-- University Logos Section - Completely Independent -->
548    <section class="ciyota-logos-section">
549        <div class="ciyota-logos-bar">
550            <div class="ciyota-logos-header">
551                <h4 class="ciyota-logos-title">Universities Where CIYOTA students GO!</h4>
552            </div>
553            <div class="ciyota-logos-track">
554                <div class="ciyota-logos-slider">
555                    <!-- First set of logos -->
556                    <div class="ciyota-logo-item"><img src="assets/img/universities/sciencespo.png" alt="Sciences Po"></div>
557                    <div class="ciyota-logo-item"><img src="assets/img/universities/alu.png" alt="ALU"></div>
558                    <div class="ciyota-logo-item"><img src="assets/img/universities/asclogo_horizontal_print_color.png" alt="Agnes Scott"></div>
559                    <div class="ciyota-logo-item"><img src="assets/img/universities/unik.jpg" alt="UNIKIN"></div>
560                    <div class="ciyota-logo-item"><img src="assets/img/universities/kepler.png" alt="Kepler University"></div>
561                    <div class="ciyota-logo-item"><img src="assets/img/universities/makerere.png" alt="Makerere"></div>
562                    <div class="ciyota-logo-item"><img src="assets/img/universities/ashesi.webp" alt="ASHESI"></div>
563                    <div class="ciyota-logo-item"><img src="assets/img/universities/USIU_Africa_Logo.png" alt="USIU-AFRICA"></div>
564                    <div class="ciyota-logo-item"><img src="assets/img/universities/knust-logo-png_seeklogo-432012.png" alt="KNUST"></div>
565                    <div class="ciyota-logo-item"><img src="assets/img/universities/SSA_Zimbabwe_University_Africa University_logo.jpg" alt="Africa University"></div>
566                    <div class="ciyota-logo-item"><img src="assets/img/universities/univofmich.jpg" alt="University of Michigan"></div>
567                    <div class="ciyota-logo-item"><img src="assets/img/universities/unigom.jpg" alt="UNIGOM"></div>
568                    <div class="ciyota-logo-item"><img src="assets/img/universities/univofrocherster.jpg" alt="University of Rochester"></div>
569                    <div class="ciyota-logo-item"><img src="assets/img/universities/bugema.png" alt="Bugema University"></div>
570                    <div class="ciyota-logo-item"><img src="assets/img/universities/Westminster_College_F21.jpg" alt="Westminster College"></div>
571                    <div class="ciyota-logo-item"><img src="assets/img/universities/ucs.jpg" alt="UCS GOMA"></div>
572                    <div class="ciyota-logo-item"><img src="assets/img/universities/ua_stack_rgb_0.png" alt="University of Arizona"></div>
573                    <div class="ciyota-logo-item"><img src="assets/img/universities/logo_IFAD.webp" alt="IFAD"></div>
574                    <div class="ciyota-logo-item"><img src="assets/img/universities/univlum.png" alt="UNIV LUMIERE"></div>
575                    <div class="ciyota-logo-item"><img src="assets/img/universities/ulpgl.png" alt="ULPGL"></div>
576                    <!-- Duplicate set for seamless loop -->
577                    <div class="ciyota-logo-item"><img src="assets/img/universities/sciencespo.png" alt="Sciences Po"></div>
578                    <div class="ciyota-logo-item"><img src="assets/img/universities/alu.png" alt="ALU"></div>
579                    <div class="ciyota-logo-item"><img src="assets/img/universities/asclogo_horizontal_print_color.png" alt="Agnes Scott"></div>
580                    <div class="ciyota-logo-item"><img src="assets/img/universities/unik.jpg" alt="UNIKIN"></div>
581                    <div class="ciyota-logo-item"><img src="assets/img/universities/kepler.png" alt="Kepler University"></div>
582                    <div class="ciyota-logo-item"><img src="assets/img/universities/makerere.png" alt="Makerere"></div>
583                    <div class="ciyota-logo-item"><img src="assets/img/universities/ashesi.webp" alt="ASHESI"></div>
584                    <div class="ciyota-logo-item"><img src="assets/img/universities/USIU_Africa_Logo.png" alt="USIU-AFRICA"></div>
585                    <div class="ciyota-logo-item"><img src="assets/img/universities/knust-logo-png_seeklogo-432012.png" alt="KNUST"></div>
586                    <div class="ciyota-logo-item"><img src="assets/img/universities/SSA_Zimbabwe_University_Africa University_logo.jpg" alt="Africa University"></div>
587                    <div class="ciyota-logo-item"><img src="assets/img/universities/univofmich.jpg" alt="University of Michigan"></div>
588                    <div class="ciyota-logo-item"><img src="assets/img/universities/unigom.jpg" alt="UNIGOM"></div>
589                    <div class="ciyota-logo-item"><img src="assets/img/universities/univofrocherster.jpg" alt="University of Rochester"></div>
590                    <div class="ciyota-logo-item"><img src="assets/img/universities/bugema.png" alt="Bugema University"></div>
591                    <div class="ciyota-logo-item"><img src="assets/img/universities/Westminster_College_F21.jpg" alt="Westminster College"></div>
592                    <div class="ciyota-logo-item"><img src="assets/img/universities/ucs.jpg" alt="UCS GOMA"></div>
593                    <div class="ciyota-logo-item"><img src="assets/img/universities/ua_stack_rgb_0.png" alt="University of Arizona"></div>
594                    <div class="ciyota-logo-item"><img src="assets/img/universities/logo_IFAD.webp" alt="IFAD"></div>
595                    <div class="ciyota-logo-item"><img src="assets/img/universities/univlum.png" alt="UNIV LUMIERE"></div>
596                    <div class="ciyota-logo-item"><img src="assets/img/universities/ulpgl.png" alt="ULPGL"></div>
597                </div>
598            </div>
599
600            <!-- Vision & Mission Content - 4 columns -->
601            <div class="ciyota-vision-mission-desktop">
602                <div class="ciyota-vm-column">
603                    <h3 class="ciyota-vm-title">Our VISION</h3>
604                    <p class="ciyota-vm-text">We envision building united, developed, and peaceful communities in Africa.</p>
605                </div>
606
607                <div class="ciyota-vm-divider"></div>
608
609                <div class="ciyota-vm-column">
610                    <h3 class="ciyota-vm-title">Our MISSION</h3>
611                    <p class="ciyota-vm-text">Our mission is educating conflict-affected children and youth to lead and rebuild communities.</p>
612                </div>
613
614                <div class="ciyota-vm-divider"></div>
615
616                <div class="ciyota-vm-column">
617                    <h3 class="ciyota-vm-title">Get Involved</h3>
618                    <p class="ciyota-vm-text">You can support a child and youth's education today</p>
619                    <button class="ciyota-sponsor-button"><a href="sponsorship.html">Sponsor a Child</a></button>
620                </div>
621
622                <div class="ciyota-vm-divider"></div>
623
624                <div class="ciyota-vm-column">
625                    <h3 class="ciyota-vm-title">School Enrolment</h3>
626                    <p class="ciyota-vm-text">Track real-time student enrolment Data</p>
627                    <a href="enrolment.html" class="ciyota-live-stats-btn">
628                        <span class="ciyota-live-dot-btn"></span> LIVE Statistics
629                    </a>
630                </div>
631            </div>
632        </div>
633    </section>
634
635
636
637    <!-- CIYOTA CHRISTMASS ANIMATION LOOK--
638      <section class="christmas-ciyota-anima" id="christmasCiyotaAnima"></section>
639
640      
640<script>
641          (function() {
642              const container = document.getElementById('christmasCiyotaAnima');
643              const christmasEmojis = ['🎄', '⛄', '🎅', '🎁', '🔔', '⭐', '🕯️', '🛷', '🦌'];
644              
645              // Create snowflakes
646              function createSnowflake() {
647                  const snowflake = document.createElement('div');
648                  snowflake.classList.add('christmas-ciyota-anima-snowflake');
649                  snowflake.innerHTML = '❄';
650                  snowflake.style.left = Math.random() * 100 + '%';
651                  snowflake.style.animationDuration = (Math.random() * 3 + 5) + 's';
652                  snowflake.style.opacity = Math.random();
653                  snowflake.style.fontSize = (Math.random() * 1 + 0.5) + 'em';
654                  container.appendChild(snowflake);
655                  
656                  setTimeout(() => {
657                      snowflake.remove();
658                  }, 8000);
659              }
660  
661              // Create Christmas elements
662              function createChristmasElement() {
663                  const element = document.createElement('div');
664                  element.classList.add('christmas-ciyota-anima-element');
665                  element.innerHTML = christmasEmojis[Math.floor(Math.random() * christmasEmojis.length)];
666                  element.style.left = Math.random() * 100 + '%';
667                  element.style.animationDuration = (Math.random() * 5 + 8) + 's';
668                  element.style.opacity = Math.random() * 0.5 + 0.5;
669                  container.appendChild(element);
670                  
671                  setTimeout(() => {
672                      element.remove();
673                  }, 13000);
674              }
675  
676              // Create twinkling stars
677              function createStar() {
678                  const star = document.createElement('div');
679                  star.classList.add('christmas-ciyota-anima-star');
680                  star.style.left = Math.random() * 100 + '%';
681                  star.style.top = Math.random() * 100 + '%';
682                  star.style.animationDelay = Math.random() * 2 + 's';
683                  container.appendChild(star);
684              }
685  
686              // Initialize
687              for (let i = 0; i < 50; i++) {
688                  createStar();
689              }
690  
691              setInterval(createSnowflake, 200);
692              setInterval(createChristmasElement, 1500);
693          })();
694      </script>
694  -->
695
696
697
698
699    <section id="ciyota-main-para-and-title" class="ciyota-main-para-and-title-section">
700        <div class="ciyota-main-para-and-title">
701            <h2 class="ciyota-main-para-and-title-title">The Urgency Behind Our Mission</h2>
702            <div class="ciyota-main-para-and-title-content">
703                <p>
704                    Every year, millions of people are forced to flee their homes due to war and natural disasters, becoming refugees or internally displaced. This crisis disproportionately affects women, children, youth, and the elderly. In the
705                    <span class="ciyota-main-para-and-title-highlight">Democratic Republic of Congo (DRC)</span>, ongoing conflict and widespread poverty make access to education and other essential services a daily struggle for many children. Similarly,
706                    in <span class="ciyota-main-para-and-title-highlight">Uganda</span>, the rising influx of refugees in settlements has led to overcrowded classrooms, strained resources, and increased demands on refugee families. These challenges hinder
707                    the quality of education, depriving children of learning opportunities and limiting their prospects. Additionally, the loss of jobs and livelihoods for parents further entrenches cycles of poverty and instability.
708                </p>
709            </div>
710        </div>
711    </section>
712
713
714    <!-- Full width section with constrained content -->
715    <section class="home-video-short-ciyota">
716        <!-- Floating Elements -->
717        <div class="home-video-short-ciyota-floating-el home-video-short-ciyota-floating-1"></div>
718        <div class="home-video-short-ciyota-floating-el home-video-short-ciyota-floating-2"></div>
719        <div class="home-video-short-ciyota-floating-el home-video-short-ciyota-floating-3"></div>
720
721        <!-- Content container constrained to 1200px -->
722        <div class="home-video-short-ciyota-container">
723            <!-- Video Column -->
724            <div class="home-video-short-ciyota-video-column">
725                <!--  <h2 class="home-video-short-ciyota-video-title">Inspiring Change Through Education</h2>-->
726                <div class="home-video-short-ciyota-video-wrapper home-video-short-ciyota-parallax" data-depth="0.2">
727                    <iframe width="560" height="315" src="https://www.youtube.com/embed/8o9FTKm85Jo?si=rnDzsIaRzYAa2EcV&vq=hd720&hd=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
728                </div>
729            </div>
730
731            <!-- Content Column -->
732            <div class="home-video-short-ciyota-content-column home-video-short-ciyota-parallax" data-depth="0.1">
733                <div class="home-video-short-ciyota-content">
734                    <h3 class="ciyota-fifth-hero-style-title">Who we are!</h3>
735                    <p>
736                        CIYOTA is a <span class="amos-principle">refugee-led, community-driven non-profit organisation</span> dedicated to empowering refugees, Internally Displaced Persons (IDPs), and marginalised youth in Uganda and the Democratic Republic
737                        of Congo (DRC). We believe that education, leadership, and entrepreneurship are the keys to transforming conflict-affected communities into thriving, self-reliant societies.
738                    </p>
739                </div>
740                <div class="home-video-short-ciyota-button-wrapper">
741                    <a href="about-us.html" class="where-ciyota-works-country-link">Know More</a>
742                </div>
743            </div>
744        </div>
745    </section>
746
747    
747<script>
748        // Initialize Ciyota video section functionality
749        (function() {
750            // Mouse movement parallax effect for content elements
751            const parallaxElements = document.querySelectorAll('.home-video-short-ciyota-parallax');
752
753            document.addEventListener('mousemove', function(e) {
754                const x = e.clientX / window.innerWidth;
755                const y = e.clientY / window.innerHeight;
756
757                parallaxElements.forEach(element => {
758                    const depth = element.getAttribute('data-depth');
759                    const moveX = (x - 0.5) * depth * 100;
760                    const moveY = (y - 0.5) * depth * 100;
761
762                    element.style.transform = `translate(${moveX}px, ${moveY}px)`;
763                });
764            });
765
766            // Enhanced background parallax effect
767            let lastScrollY = window.scrollY;
768            let ticking = false;
769
770            function updateBackgroundPosition() {
771                const section = document.querySelector('.home-video-short-ciyota');
772                const rect = section.getBoundingClientRect();
773
774                // Only apply parallax when the section is visible
775                if (rect.bottom > 0 && rect.top < window.innerHeight) {
776                    // Calculate the relative position of the section in the viewport
777                    const viewportPercentage = 1 - (rect.top / window.innerHeight);
778
779                    // Apply a subtle movement based on the section's position
780                    // This creates a smoother, more controlled parallax
781                    section.style.backgroundPositionY = `${50 - (viewportPercentage * 10)}%`;
782                }
783
784                ticking = false;
785            }
786
787            window.addEventListener('scroll', function() {
788                lastScrollY = window.scrollY;
789
790                if (!ticking) {
791                    window.requestAnimationFrame(updateBackgroun
791dPosition);
792                    ticking = true;
793                }
794            });
795
796            // Fix for iframe aspect ratio
797            const iframe = document.querySelector('.home-video-short-ciyota-video-wrapper iframe');
798            const videoWrapper = document.querySelector('.home-video-short-ciyota-video-wrapper');
799
800            function resizeIframe() {
801                const width = videoWrapper.offsetWidth;
802                const height = width * 0.5625; // 16:9 aspect ratio
803                iframe.style.height = `${height}px`;
804            }
805
806            resizeIframe();
807            window.addEventListener('resize', resizeIframe);
808
809            // Intersection Observer for animations on scroll
810            if ('IntersectionObserver' in window) {
811                const observer = new IntersectionObserver((entries) => {
812                    entries.forEach(entry => {
813                        if (entry.isIntersecting) {
814                            entry.target.classList.add('visible');
815                        }
816                    });
817                }, {
818                    threshold: 0.1
819                });
820
821                const section = document.querySelector('.home-video-short-ciyota');
822                observer.observe(section);
823            }
824        })();
825    </script>
825
826
827    </div>
828    <!-- /.row -->
829    </div>
830    <!-- /.video-wrapper -->
831
832
833
834    </div>
835    </section>
836
837
838    <section class="ciyota-general-impact-statistics-container-impact-sect">
839        <!-- Total Impact -->
840        <div class="ciyota-general-impact-statistics-total-impact-sect">
841            <h2 class="ciyota-main-para-and-title-title">A Snapshot of Our Direct and Indirect Impact</h2>
842
843            <!-- Timeline Animation - NEW -->
844            <div class="impact-timeline-animation">
845                <div class="timeline-year-static">2005</div>
846                <div class="timeline-arrow">→</div>
847                <div class="timeline-current-year" id="timeline-year">2005</div>
848            </div>
849
850            <!-- Flower Rain Container -->
851            <div class="flower-rain-container" id="flower-rain"></div>
852
853            <div class="impact-statistics">
854                <div class="ciyota-general-impact-statistics-number-large" id="total-impact-count">0</div>
855                <h1>Lives Transformed</h1>
856            </div>
857
858            <p>through our programs and initiatives across education, Community Engagement, and humanitarian assistance in Uganda and DRC.</p>
859        </div>
860    </section>
861
862    <!-- Rest remains the same -->
863    <section class="ciyota-general-impact-statistics-container">
864        <div class="ciyota-general-impact-statistics-grid">
865            <!-- All 8 cards exactly as before -->
866            <!-- Card 1 -->
867            <div class="ciyota-general-impact-statistics-card" style="border-color: #79acf7;">
868                <div class="ciyota-general-impact-statistics-icon-container" style="background: linear-gradient(135deg, #79acf7 0%, #79acf7 100%);">
869                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
870                            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
871                            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
872                        </svg>
873                </div>
874                <div class="ciyota-general-impact-statistics-number" style="color: #79acf7;" id="primary-education-count">0</div>
875                <div class="ciyota-general-impact-statistics-title">Young people who received ECD & primary education</div>
876            </div>
877
878            <!-- Card 2 -->
879            <div class="ciyota-general-impact-statistics-card" style="border-color: #10235e;">
880                <div class="ciyota-general-impact-statistics-icon-container" style="background: linear-gradient(135deg, #10235e 0%, #10235e 100%);">
881                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
882                            <rect x="4" y="2" width="16" height="20" rx="2" ry="2"></rect>
883                            <path d="M12 6V2"></path>
884                            <path d="M8 22v-4h8v4"></path>
885                            <path d="M12 14v.01"></path>
886                        </svg>
887                </div>
888                <div class="ciyota-general-impact-statistics-number" style="color: #10235e;" id="secondary-education-count">0</div>
889                <div class="ciyota-general-impact-statistics-title">Young people who received secondary education</div>
890            </div>
891
892            <!-- Card 3 -->
893            <div class="ciyota-general-impact-statistics-card" style="border-color: #53bc7d;">
894                <div class="ciyota-general-impact-statistics-icon-container" style="background: linear-gradient(135deg, #53bc7d 0%, #53bc7d 100%);">
895                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
896                            <path d="M22 10v6M2 10l10-5 10 5-10 5z"></path>
897                            <path d="M6 12v5c0 2 2 3 6 3s6-1 6-3v-5"></path>
898                        </svg>
899                </div>
900                <div class="ciyota-general-impact-statistics-number" style="color: #53bc7d;" id="university-count">0</div>
901                <div class="ciyota-general-impact-statistics-title">Youth attended University</div>
902            </div>
903
904            <!-- Card 4 -->
905            <div class="ciyota-general-impact-statistics-card" style="border-color: #ffc32c;">
906                <div class="ciyota-general-impact-statistics-icon-container" style="background: linear-gradient(135deg, #ffc32c 0%, #ffc32c 100%);">
907                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
908                            <circle cx="12" cy="12" r="10"></circle>
909                            <line x1="2" y1="12" x2="22" y2="12"></line>
910                            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
911                        </svg>
912                </div>
913                <div class="ciyota-general-impact-statistics-number" style="color: #ffc32c;" id="community-count">0</div>
914                <div class="ciyota-general-impact-statistics-title">Our reach via community engagement</div>
915            </div>
916
917            <!-- Card 5 -->
918            <div class="ciyota-general-impact-statistics-card" style="border-color: #ffc32c;">
919                <div class="ciyota-general-impact-statistics-icon-container" style="background: linear-gradient(135deg, #ffc32c 0%, #ffc32c 100%);">
920                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
921                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
922                        </svg>
923                </div>
924                <div class="ciyota-general-impact-statistics-number" style="color: #ffc32c;" id="refugee-count">0</div>
925                <div class="ciyota-general-impact-statistics-title">
925Refugee Students Supported</div>
926            </div>
927
928            <!-- Card 6 -->
929            <div class="ciyota-general-impact-statistics-card" style="border-color: #53bc7d;">
930                <div class="ciyota-general-impact-statistics-icon-container" style="background: linear-gradient(135deg, #53bc7d 0%, #53bc7d 100%);">
931                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
932                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
933                            <circle cx="9" cy="7" r="4"></circle>
934                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
935                            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
936                        </svg>
937                </div>
938                <div class="ciyota-general-impact-statistics-number" style="color: #53bc7d;" id="ugandan-count">0</div>
939                <div class="ciyota-general-impact-statistics-title">Ugandan Students supported</div>
940            </div>
941
942            <!-- Card 7 -->
943            <div class="ciyota-general-impact-statistics-card" style="border-color: #10235e;">
944                <div class="ciyota-general-impact-statistics-icon-container" style="background: linear-gradient(135deg, #10235e 0%, #10235e 100%);">
945                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
946                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
947                        </svg>
948                </div>
949                <div class="ciyota-general-impact-statistics-number" style="color: #10235e;" id="humanitarian-count">0</div>
950                <div class="ciyota-general-impact-statistics-title">Humanitarian assistance for IDPs - Refugees</div>
951            </div>
952
953            <!-- Card 8 -->
954            <div class="ciyota-general-impact-statistics-card" style="border-color: #79acf7;">
955                <div class="ciyota-general-impact-statistics-icon-container" style="background: linear-gradient(135deg, #79acf7 0%, #79acf7 100%);">
956                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
957                            <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
958                            <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
959                        </svg>
960                </div>
961                <div class="ciyota-general-impact-statistics-number" style="color: #79acf7;" id="skills-count">0</div>
962                <div class="ciyota-general-impact-statistics-title">Ventures launched</div>
963            </div>
964        </div>
965    </section><br><br>
966
967    
967<script>
968        // Impact statistics configuration
969        const impactStats = {
970            primaryEducation: 6345,
971            secondaryEducation: 2317,
972            university: 108,
973            community: 200000,
974            communityHasPlus: true,
975            refugee: 5630,
976            ugandan: 3032,
977            humanitarian: 15000,
978            skills: 200
979        };
980
981        // Calculate Direct Impact (sum of all except refugee and ugandan)
982        function calculateDirectImpact() {
983            return impactStats.primaryEducation +
984                impactStats.secondaryEducation +
985                impactStats.university +
986                impactStats.community +
987                impactStats.humanitarian +
988                impactStats.skills;
989        }
990
991        // Calculate Indirect Impact (Direct Impact * 5)
992        function calculateIndirectImpact() {
993            return calculateDirectImpact() * 5;
994        }
995
996        // Calculate Total Impact (Direct + Indirect)
997        function calculateTotalImpact() {
998            return calculateDirectImpact() + calculateIndirectImpact();
999        }
1000
1001        // Get current year automatically
1002        function getCurrentYear() {
1003            return new Date().getFullYear();
1004        }
1005
1006        // Calculate years of existence
1007        function getYearsOfExistence() {
1008            return getCurrentYear() - 2005;
1009        }
1010
1011        // Get proper year/years text
1012        function getYearText(years) {
1013            return years === 1 ? 'year' : 'years';
1014        }
1015
1016        // Create confetti star element
1017        function createStar() {
1018            const star = document.createElement('div');
1019            star.className = 'confetti-star';
1020            star.innerHTML = '★';
1021
1022            // Random CIYOTA brand colors
1023            const colors = ['#10235e', '#79acf7', '#ffc32c'];
1024            star.style.color = colors[Math.floor(Math.random() * colors.length)];
1025            star.style.left = Math.random() * 100 + '%';
1026            star.style.animationDuration = (Math.random() * 3 + 2) + 's';
1027            star.style.opacity = Math.random() * 0.5 + 0.5;
1028            star.style.fontSize = (Math.random() * 15 + 15) + 'px';
1029
1030            return star;
1031        }
1032
1033        // Start confetti celebration
1034        function startConfetti() {
1035            const container = document.getElementById('flower-rain');
1036            const confettiCount = 25;
1037
1038            for (let i = 0; i < confettiCount; i++) {
1039                setTimeout(() => {
1040                    const star = createStar();
1041                    container.appendChild(star);
1042
1043                    // Remove star after animation
1044                    setTimeout(() => {
1045                        star.remove();
1046                    }, 5000);
1047                }, i * 100);
1048            }
1049        }
1050
1051        // Animate the timeline years from 2006 to current year with color transitions
1052        function animateTimeline() {
1053            const yearElement = document.getElementById('timeline-year');
1054            const startYear = 2006;
1055            const currentYear = getCurrentYear();
1056            const duration = 4000; // 4 seconds
1057            const startTime = performance.now();
1058
1059            function updateYear(currentTime) {
1060                const elapsed = currentTime - startTime;
1061                const progress = Math.min(elapsed / duration, 1);
1062
1063                // Easing function for smooth progression
1064                const easedProgress = progress < 0.5 ?
1065                    2 * progress * progress :
1066                    1 - Math.pow(-2 * progress + 2, 2) / 2;
1067
1068                const displayYear = Math.floor(startYear + (currentYear - startYear) * easedProgress);
1069
1070                // Calculate years from 2005 to display year
1071                const yearsFromStart = displayYear - 2005;
1072
1073                // Update text with year and years of existence in brackets (proper singular/plural)
1074                yearElement.textContent = displayYear + ' (' + yearsFromStart + ' ' + getYearText(yearsFromStart) + ')';
1075
1076                // Color transitions based on progress
1077                if (progress < 0.33) {
1078                    yearElement.style.color = '#10235e'; // Dark blue
1079                } else if (progress < 0.66) {
1080                    yearElement.style.color = '#79acf7'; // Sky blue
1081                } else {
1082                    yearElement.style.color = '#ffc32c'; // Yellow
1083                }
1084
1085                // Start confetti when approaching current year (90% progress)
1086                if (progress >= 0.9 && !yearElement.dataset.confettiStarted) {
1087                    yearElement.dataset.confettiStarted = 'true';
1088                    startConfetti();
1089                }
1090
1091                if (progress < 1) {
1092                    requestAnimationFrame(updateYear);
1093                } else {
1094                    const totalYears = getYearsOfExistence();
1095                    yearElement.textContent = currentYear + ' (' + totalYears + ' ' + getYearText(totalYears) + ')';
1096                    yearElement.style.color = '#ffc32c'; // Final yellow color
1097                }
1098            }
1099
1100            requestAnimationFrame(updateYear);
1101        }
1102
1103        // Observer to start animations when elements are in view - MORE SENSITIVE
1104        const observer = new IntersectionObserver((entries) => {
1105            entries.forEach(entry => {
1106                if (entry.isIntersecting) {
1107                    startCounters();
1108                    observer.unobserve(entry.target);
1109                }
1110            });
1111        }, {
1112            threshold: 0.1, // Changed from 0.2 to 0.1 - triggers when only 10% is visible
1113            rootMargin: '0px 0px -50px 0px' // Starts animation 50px before section enters viewport
1114        });
1115
1116        // Observe the impact section (the first section, not the cards)
1117        observer.observe(document.querySelector('.ciyota-general-impact-statistics-container-impact-sect'));
1118
1119        // Counter animation function
1120        function animateCounter(elementId, finalValue, duration, hasPlus = false) {
1121            const element = document.getElementById(elementId);
1122            const startValue = 0;
1123            const finalNumericValue = typeof finalValue === 'number' ? finalValue : parseInt(String(finalValue).replace(/,/g, ''));
1124
1125            const increment = finalNumericValue / (duration / 16);
1126            let currentValue = startValue;
1127
1128            const timer = setInterval(() => {
1129                currentValue += increment;
1130                if (currentValue >= finalNumericValue) {
1131                    // Set to final value with formatting
1132                    let displayValue = finalNumericValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
1133                    if (hasPlus) {
1134                        element.innerHTML = displayValue + '<sup style="font-size: 60%; position: relative; top: -0.7em; left: -0.1em; font-weight: bold;">+</sup>';
1135                    } else {
1136                        element.textContent = displayValue;
1137                    }
1138                    clearInterval(timer);
1139                } else {
1140                    // Display current value with formatting
1141                    let displayValue = Math.floor(currentValue).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
1142
1143                    if (hasPlus && currentValue >= finalNumericValue * 0.98) {
1144                        element.innerHTML = displayValue + '<sup style="font-size: 60%; position: relative; top: -0.7em; left: -0.1em; font-weight: bold;">+</sup>';
1145                    } else {
1146                        element.textContent = displayValue;
1147                    }
1148                }
1149            }, 16);
1150        }
1151
1152        // Start all counters
1153        function startCounters() {
1154            // Start timeline animation first
1155            animateTimeline();
1156
1157            // Individual statistics
1158            animateCounter('primary-education-count', impactStats.primaryEducation, 6300, false);
1159            animateCounter('secondary-education-count', impactStats.secondaryEducation, 6300, false);
1160            animateCounter('university-count', impactStats.university, 6300, false);
1161
1162            setTimeout(() => {
1163                animateCounter('community-count', impactStats.community, 6300, impactStats.communityHasPlus);
1164            }, 200);
1165
1166            animateCounter('refugee-count', impactStats.refugee, 6300, false);
1167            animateCounter('ugandan-count', impactStats.ugandan, 6300, false);
1168            animateCounter('humanitarian-count', impactStats.humanitarian, 6300, false);
1169            animateCounter('skills-count', impactStats.skills, 6300, false);
1170
1171            // Total impact starts after timeline animation
1172            setTimeout(() => {
1173                animateCounter('total-impact-count', calculateTotalImpact(), 10000, false);
1174            }, 4000);
1175        }
1176
1177        // Add scroll reveal animations
1178        document.addEventListener('DOMContentLoaded', () => {
1179            const cards = document.querySelectorAll('.ciyota-general-impact-statistics-card');
1180
1181            cards.forEach((card, index) => {
1182                card.style.transitionDelay = `${index * 0.1}s`;
1183            });
1184
1185            // Log the calculated values for verification
1186            console.log('Direct Impact:', calculateDirectImpact().toLocaleString());
1187            console.log('Indirect Impact:', calculateIndirectImpact(
1187).toLocaleString());
1188            console.log('Total Impact:', calculateTotalImpact().toLocaleString());
1189            console.log('Current Year:', getCurrentYear());
1190            console.log('Years of Existence:', getYearsOfExistence());
1191        });
1192    </script>
1192
1193
1194    <section class="ciyota-howwe-do-it">
1195        <div class="ciyota-howwe-do-it-container">
1196            <div class="ciyota-howwe-do-it-content">
1197                <h1 class="ciyota-howwe-do-it-title">Empowering Lives Through Education, Skilling, and Humanitarian Support</h1>
1198                <p class="ciyota-howwe-do-it-description">
1199                    We provide high-quality education for refugees and disadvantaged youth, supporting early childhood development, primary, secondary, university preparation, and skilling programs. We also partner with schools for teacher training, student scholarships,
1200                    university preparation, and psychosocial support while promoting socially responsible entrepreneurship and leadership. Additionally, we offer humanitarian aid to displaced individuals in need of food, clean water, and sanitary materials.
1201                    Our initiatives empower individuals, strengthen communities, and build a sustainable foundation for growth.
1202                </p>
1203            </div>
1204            <div class="ciyota-howwe-do-it-image-container">
1205                <div class="image-slider">
1206                    <div class="slider-track">
1207                        <img src="assets/img/students-relaxing-8.png" class="slider-image" alt="Education Program">
1208                        <img src="assets/img/humanitarian-action-sake-1.png" class="slider-image" alt="Community Support">
1209                        <img src="assets/img/activity-ciyota-1.png" class="slider-image" alt="Community Support">
1210                        <img src="assets/img/students-relaxing-1.png" class="slider-image" alt="Skills Training">
1211                        <img src="assets/img/activity-ciyota-3.png" class="slider-image" alt="Community Support">
1212                        <img src="assets/img/students-relaxing-4.png" class="slider-image" alt="Humanitarian Aid">
1213                        <img src="assets/img/activity-ciyota-8.png" class="slider-image" alt="Community Support">
1214                        <img src="assets/img/humanitarian-action-sake-2.png" class="slider-image" alt="Community Support">
1215                        <img src="assets/img/students-relaxing-2.png" class="slider-image" alt="Teacher Training">
1216                        <img src="assets/img/activity-ciyota-2.png" class="slider-image" alt="Community Support">
1217                        <img src="assets/img/students-relaxing-3.png" class="slider-image" alt="Community Support">
1218                        <img src="assets/img/activity-ciyota-4.png" class="slider-image" alt="Community Support">
1219                        <img src="assets/img/students-relaxing-5.png" class="slider-image" alt="Humanitarian Aid">
1220                        <img src="assets/img/activity-ciyota-7.png" class="slider-image" alt="Community Support">
1221                        <img src="assets/img/humanitarian-action-sake-3.png" class="slider-image" alt="Community Support">
1222                        <img src="assets/img/students-relaxing-6.png" class="slider-image" alt="Teacher Training">
1223                        <img src="assets/img/activity-ciyota-5.png" class="slider-image" alt="Community Support">
1224                        <img src="assets/img/activity-ciyota-6.png" class="slider-image" alt="Community Support">
1225                        <img src="assets/img/students-relaxing-7.png" class="slider-image" alt="Community Support">
1226
1227
1228                    </div>
1229                    <div class="slider-indicators">
1230                        <!-- Indicators will be generated automatically by JavaScript -->
1231                    </div>
1232                </div>
1233            </div>
1234        </div>
1235    </section>
1236
1237    
1237<script>
1238        // Dynamic slider setup - works with any number of images!
1239        document.addEventListener('DOMContentLoaded', function() {
1240            const track = document.querySelector('.slider-track');
1241            const originalImages = document.querySelectorAll('.slider-image');
1242            const indicatorsContainer = document.querySelector('.slider-indicators');
1243
1244            const imageCount = originalImages.length;
1245
1246            if (imageCount === 0) return; // No images, no slider
1247
1248            // Clone first image at the end for seamless loop
1249            const firstImageClone = originalImages[0].cloneNode(true);
1250            track.appendChild(firstImageClone);
1251
1252            const allImages = document.querySelectorAll('.slider-image');
1253            const totalImages = allImages.length; // imageCount + 1
1254
1255            // Set up dynamic CSS
1256            const imageWidth = 100 / totalImages;
1257            const trackWidth = totalImages * 100;
1258            const animationDuration = (imageCount + 1) * 3; // 3 seconds per image including transition to clone
1259
1260            // Apply dynamic styles
1261            track.style.width = trackWidth + '%';
1262            allImages.forEach(img => {
1263                img.style.width = imageWidth + '%';
1264            });
1265
1266            // Create pause-and-slide keyframes with original working calculations
1267            const styleName = 'dynamicSlide';
1268            let keyframes = `@keyframes ${styleName} {`;
1269
1270            const totalSteps = imageCount + 1;
1271            const stepPercent = 100 / totalSteps;
1272            const displayPercent = stepPercent * 0.85;
1273
1274            for (let i = 0; i <= imageCount; i++) {
1275                const startTime = i * stepPercent;
1276                const endDisplayTime = startTime + displayPercent;
1277                const endTransitionTime = startTime + stepPercent;
1278                const translateX = -(i / totalImages) * 100; // Back to original calculation
1279
1280                keyframes += `${startTime}% { transform: translateX(${translateX}%); }`;
1281                keyframes += `${endDisplayTime}% { transform: translateX(${translateX}%); }`;
1282
1283                if (i < imageCount) {
1284                    const nextTranslateX = -((i + 1) / totalImages) * 100;
1285                    keyframes += `${endTransitionTime}% { transform: translateX(${nextTranslateX}%); }`;
1286                }
1287            }
1288
1289            keyframes += '}';
1290
1291            const style = document.createElement('style');
1292            style.textContent = keyframes;
1293            document.head.appendChild(style);
1294
1295            // Apply animation
1296            track.style.animation = `${styleName} ${animationDuration}s infinite linear`;
1297
1298            // Generate indicators (only for original images)
1299            indicatorsContainer.innerHTML = '';
1300            for (let i = 0; i < imageCount; i++) {
1301                const indicator = document.createElement('div');
1302                indicator.className = i === 0 ? 'indicator active' : 'indicator';
1303                indicatorsContainer.appendChild(indicator);
1304            }
1305
1306            const indicators = document.querySelectorAll('.indicator');
1307
1308            // Update active indicator based on animation progress
1309            function updateActiveIndicator() {
1310                // Calculate current position based on animation
1311                const computedStyle = window.getComputedStyle(track);
1312                const matrix = computedStyle.transform;
1313
1314                if (matrix && matrix !== 'none') {
1315                    const values = matrix.split('(')[1].split(')')[0].split(',');
1316                    const translateX = parseFloat(values[4]) || 0;
1317                    const currentPosition = Math.abs(translateX) / (track.offsetWidth / totalImages);
1318
1319                    // Map to original image index (handle the clone case)
1320                    let activeIndex = Math.round(currentPosition);
1321                    if (activeIndex >= imageCount) {
1322                        activeIndex = 0; // Clone shows as first image indicator
1323                    }
1324
1325                    indicators.forEach((indicator, index) => {
1326                        indicator.classList.toggle('active', index === activeIndex);
1327                    });
1328                }
1329            }
1330
1331            // Update indicators regularly
1332            setInterval(updateActiveIndicator, 100);
1333
1334            // Pause animation on hover
1335            const container = document.querySelector('.ciyota-howwe-do-it-image-container');
1336            container.addEventListener('mouseenter', () => {
1337                track.style.animationPlayState = 'paused';
1338            });
1339
1340            container.addEventListener('mouseleave', () => {
1341                track.style.animationPlayState = 'running';
1342            });
1343
1344            // Click indicators to jump to specific slide
1345            indicators.forEach((indicator, index) => {
1346                indicator.addEventListener('click', () => {
1347                    const newTransform = `translateX(-${(index / totalImages) * 100}%)`;
1348                    track.style.animation = 'none';
1349                    track.style.transform = newTransform;
1350
1351                    // Resume animation after a brief pause
1352                    setTimeout(() => {
1353                        track.style.animation = `${styleName} ${animationDuration}s infinite linear`;
1354                        track.style.animationDelay = `-${(index / (imageCount + 1)) * animationDuration}s`;
1355                    }, 100);
1356                });
1357            });
1358        });
1359    </script>
1359
1360
1361
1362
1363    <section class="where-ciyota-works" id="mapSection">
1364        <div class="where-ciyota-works-container">
1365            <h3 class="where-ciyota-works-title">Where We Work</h3>
1366
1367            <div class="where-ciyota-works-countries">
1368                <!-- Uganda -->
1369                <div class="where-ciyota-works-country uganda" data-country="uganda">
1370                    <div class="where-ciyota-works-country-icon uganda">
1371                        <img src="assets/img/ugandam.webp" alt="Uganda Flag">
1372                    </div>
1373                    <div class="where-ciyota-works-country-content">
1374                        <h4 class="where-ciyota-works-country-name">Uganda</h4>
1375                        <p class="where-ciyota-works-country-description">
1376                            Around 8 million children start primary school, but less than half reach secondary. For refugees, only 40% attend primary, under 10% reach secondary, and even fewer make it to university.
1377                        </p>
1378                        <a href="ciyota-uganda.html" class="where-ciyota-works-country-link">Learn More</a>
1379                    </div>
1380                </div>
1381
1382                <!-- DRC -->
1383                <div class="where-ciyota-works-country drc" data-country="drc">
1384                    <div class="where-ciyota-works-country-icon drc">
1385                        <img src="assets/img/drcflag.svg" alt="DRC Flag">
1386                    </div>
1387                    <div class="where-ciyota-works-country-content">
1388                        <h4 class="where-ciyota-works-country-name">Democratic Republic of Congo</h4>
1389                        <p class="where-ciyota-works-country-description">
1390                            In the DRC, 3.5 million children are out of school, with 7.2 million IDPs facing even greater barriers. Girls and children with disabilities are most affected, struggling to complete primary education.
1391                        </p>
1392                        <a href="ciyota-drc.html" class="where-ciyota-works-country-link">Learn More</a>
1393                    </div>
1394                </div>
1395            </div>
1396        </div>
1397    </section>
1398
1399    <section class="ciyota-sponsorship-testimonial">
1400        <!-- Floating elements for background effect -->
1401        <div class="ciyota-sponsorship-testimonial__floating">
1402            <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
1403        <circle cx="25" cy="25" r="25" fill="rgba(74, 107, 255, 0.1)" />
1404      </svg>
1405        </div>
1406        <div class="ciyota-sponsorship-testimonial__floating">
1407            <svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
1408        <rect width="70" height="70" rx="15" fill="rgba(46, 201, 119, 0.1)" />
1409      </svg>
1410        </div>
1411        <div class="ciyota-sponsorship-testimonial__floating">
1412            <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
1413        <polygon points="30,0 60,30 30,60 0,30" fill="rgba(74, 107, 255, 0.1)" />
1414      </svg>
1415        </div>
1416        <div class="ciyota-sponsorship-testimonial__floating">
1417            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
1418        <circle cx="20" cy="20" r="20" fill="rgba(46, 201, 119, 0.1)" />
1419      </svg>
1420        </div>
1421
1422        <div class="ciyota-sponsorship-testimonial__container">
1423            <div class="ciyota-sponsorship-testimonial__heading">
1424                <h2>What Students say!</h2>
1425            </div>
1426
1427            <div class="ciyota-sponsorship-testimonial__slider">
1428                <div class="ciyota-sponsorship-testimonial__profiles">
1429                    <div class="ciyota-sponsorship-testimonial__profile" data-index="0">
1430                        <img src="assets/img/sponsorship-testimony/avatar/katusabe.png" alt="Student 1">
1431                    </div>
1432                    <div class="ciyota-sponsorship-testimonial__profile" data-index="1">
1433                        <img src="assets/img/sponsorship-testimony/avatar/maida.png" alt="Student 2">
1434                    </div>
1435                    <div class="ciyota-sponsorship-testimonial__profile active" data-index="2">
1436                        <img src="assets/img/sponsorship-testimony/avatar/naomi.png" alt="Student 3">
1437                    </div>
1438                    <div class="ciyota-sponsorship-testimonial__profile" data-index="3">
1439                        <img src="assets/img/sponsorship-testimony/avatar/isaac.png" alt="Student 4">
1440                    </div>
1441                    <div class="ciyota-sponsorship-testimonial__profile" data-index="4">
1442                        <img src="assets/img/sponsorship-testimony/avatar/gloria.png" alt="Student 5">
1443                    </div>
1444                </div>
1445
1446                <div class="ciyota-sponsorship-testimonial__content-container">
1447                    <div class="ciyota-sponsorship-testimonial__content" data-index="0">
1448                        <div class="ciyota-sponsorship-testimonial__content-text">
1449                            <p>CIYOTA’s basket weaving project taught me entrepreneurship, creativity, and problem-solving. The income I earn helps me buy scholastic materials and meet personal needs. </p>
1450                            <h3>Katusabe Immaculate</h3>
1451                            <h4>Student at CIYOTA secondary school</h4>
1452                        </div>
1453                    </div>
1454
1455                    <div class="ciyota-sponsorship-testimonial__content" data-index="1">
1456                        <div class="ciyota-sponsorship-testimonial__content-text">
1457                            <p>Through the Beekeeping Club, I gained hands-on skills in beekeeping and entrepreneurship. Selling honey helps me support my needs and improve my life.</p>
1458                            <h3>Maida Asimwe Baraka</h3>
1459                            <h4>Student at CIYOTA secondary school</h4>
1460                        </div>
1461                    </div>
1462
1463                    <div class="ciyota-sponsorship-testimonial__content active" data-index="2">
1464                        <div class="ciyota-sponsorship-testimonial__content-text">
1465                            <p>At CIYOTA, we learn values like respect and discipline. I’m part of the poultry project, where I’ve learned to feed, treat, and care for chickens. I’m proud to be a CIYOTA student.</p>
1466                            <h3>Naomi Dusabe</h3>
1467                            <h4>Student at CIYOTA secondary school</h4>
1468                        </div>
1469                    </div>
1470
1471                    <div class="ciyota-sponsorship-testimonial__content" data-index="3">
1472                        <div class="ciyota-sponsorship-testimonial__content-text">
1473                            <p>CIYOTA gave me free education and taught me to make liquid soap. These skills helped me develop business ideas and share them with my community.</p>
1474                            <h3>Isaac Uwimana</h3>
1475                            <h4>
1475Student at CIYOTA secondary school</h4>
1476                        </div>
1477                    </div>
1478
1479                    <div class="ciyota-sponsorship-testimonial__content" data-index="4">
1480                        <div class="ciyota-sponsorship-testimonial__content-text">
1481                            <p>The skilling program gave me hope and confidence. Basket weaving helped me become a leader, share knowledge, and empower my community.</p>
1482                            <h3>Bambu Gloria</h3>
1483                            <h4>Student at CIYOTA secondary school</h4>
1484                        </div>
1485                    </div>
1486
1487
1488                </div>
1489
1490                <div class="ciyota-sponsorship-testimonial__controls">
1491                    <button class="ciyota-sponsorship-testimonial__btn ciyota-sponsorship-testimonial__prev">❮</button>
1492                    <button class="ciyota-sponsorship-testimonial__btn ciyota-sponsorship-testimonial__next">❯</button>
1493                </div>
1494            </div>
1495        </div>
1496    </section>
1497
1498    
1498<script>
1499        document.addEventListener('DOMContentLoaded', function() {
1500            const profiles = document.querySelectorAll('.ciyota-sponsorship-testimonial__profile');
1501            const contents = document.querySelectorAll('.ciyota-sponsorship-testimonial__content');
1502            const prevBtn = document.querySelector('.ciyota-sponsorship-testimonial__prev');
1503            const nextBtn = document.querySelector('.ciyota-sponsorship-testimonial__next');
1504
1505            // Store the original images for each position
1506            const testimonialData = [{
1507                imgSrc: "assets/img/sponsorship-testimony/avatar/katusabe.png",
1508                alt: "Student 1",
1509                contentIndex: 0
1510            }, {
1511                imgSrc: "assets/img/sponsorship-testimony/avatar/maida.png",
1512                alt: "Student 2",
1513                contentIndex: 1
1514            }, {
1515                imgSrc: "assets/img/sponsorship-testimony/avatar/naomi.png",
1516                alt: "Student 3",
1517                contentIndex: 2
1518            }, {
1519                imgSrc: "assets/img/sponsorship-testimony/avatar/isaac.png",
1520                alt: "Student 4",
1521                contentIndex: 3
1522            }, {
1523                imgSrc: "assets/img/sponsorship-testimony/avatar/gloria.png",
1524                alt: "Student 5",
1525                contentIndex: 4
1526            }];
1527
1528            let currentDataIndex = 2; // Start with the middle content active
1529            let isAnimating = false; // Flag to prevent multiple clicks during animation
1530
1531            // Initialize
1532            initializeProfiles();
1533            updateContent(currentDataIndex);
1534
1535            // Previous button
1536            prevBtn.addEventListener('click', function() {
1537                if (isAnimating) return;
1538                isAnimating = true;
1539
1540                // Rotate the data array - shift right
1541                const lastItem = testimonialData.pop();
1542                testimonialData.unshift(lastItem);
1543
1544                // Animate the change with fade effect on images
1545                animateProfileChange();
1546
1547                // Update the content section
1548                updateContent(2); // Always show the middle position's content
1549
1550                // Re-enable clicks after animation completes
1551                setTimeout(() => {
1552                    isAnimating = false;
1553                }, 600);
1554            });
1555
1556            // Next button
1557            nextBtn.addEventListener('click', function() {
1558                if (isAnimating) return;
1559                isAnimating = true;
1560
1561                // Rotate the data array - shift left
1562                const firstItem = testimonialData.shift();
1563                testimonialData.push(firstItem);
1564
1565                // Animate the change with fade effect on images
1566                animateProfileChange();
1567
1568                // Update the content section
1569                updateContent(2); // Always show the middle position's content
1570
1571                // Re-enable clicks after animation completes
1572                setTimeout(() => {
1573                    isAnimating = false;
1574                }, 600);
1575            });
1576
1577            // Click on profile
1578            profiles.forEach((profile, index) => {
1579                profile.addEventListener('click', function() {
1580                    if (isAnimating || index === 2) return; // Already active or currently animating
1581
1582                    isAnimating = true;
1583
1584                    // Determine direction of rotation
1585                    const shiftsNeeded = index < 2 ? (2 - index) : -(index - 2);
1586
1587                    // Rotate the data array
1588                    if (shiftsNeeded > 0) {
1589                        // Shift right
1590                        for (let i = 0; i < shiftsNeeded; i++) {
1591                            const lastItem = testimonialData.pop();
1592                            testimonialData.unshift(lastItem);
1593                        }
1594                    } else {
1595                        // Shift left
1596                        for (let i = 0; i < Math.abs(shiftsNeeded); i++) {
1597                            const firstItem = testimonialData.shift();
1598                            testimonialData.push(firstItem);
1599                        }
1600                    }
1601
1602                    // Animate the change
1603                    animateProfileChange();
1604
1605                    // Update the content section
1606                    updateContent(2); // Always show the middle position's content
1607
1608                    // Re-enable clicks after animation completes
1609                    setTimeout(() => {
1610                        isAnimating = false;
1611                    }, 600);
1612                });
1613            });
1614
1615            // Auto slide every 5 seconds
1616            let autoSlide = setInterval(function() {
1617                if (!isAnimating) {
1618                    isAnimating = true;
1619
1620                    // Rotate the data array - shift left for next
1621                    const firstItem = testimonialData.shift();
1622                    testimonialData.push(firstItem);
1623
1624                    // Animate the change
1625                    animateProfileChange();
1626
1627                    // Update the content section
1628                    updateContent(2); // Always show the middle position's content
1629
1630                    // Re-enable clicks after animation completes
1631                    setTimeout(() => {
1632                        isAnimating = false;
1633                    }, 600);
1634                }
1635            }, 5000);
1636
1637            // Pause auto slide on interaction
1638            document.querySelector('.ciyota-sponsorship-testimonial__slider').addEventListener('mouseenter', function() {
1639                clearInterval(autoSlide);
1640            });
1641
1642            document.querySelector('.ciyota-sponsorship-testimonial__slider').addEventListener('mouseleave', function() {
1643                autoSlide = setInterval(function() {
1644                    if (!isAnimating) {
1645                        isAnimating = true;
1646
1647                        // Rotate the data array - shift left for next
1648                        const firstItem = testimonialData.shift();
1649                        testimonialData.push(firstItem);
1650
1651                        // Animate the change
1652                        animateProfileChange();
1653
1654                        // Update the content section
1655                        updateContent(2); // Always show the middle position's content
1656
1657                        // Re-enable clicks after animation completes
1658                        setTimeout(() => {
1659                            isAnimating = false;
1660                        }, 600);
1661                    }
1662                }, 5000);
1663            });
1664
1665            // Initialize profile positions and classes
1666            function initializeProfiles() {
1667                profiles.forEach((profile, index) => {
1668                    // Apply position classes
1669                    profile.classList.remove('active', 'prev', 'next', 'far-left', 'far-right');
1670
1671                    if (index === 2) { // Middle/active
1672                        profile.classList.add('active');
1673                    } else if (index === 1) { // Left of middle
1674                        profile.classList.add('prev');
1675                    } else if (index === 3) { // Right of middle
1676                        profile.classList.add('next');
1677                    } else if (index === 0) { // Far left
1678                        profile.classList.add('far-left');
1679                    } else { // Far right
1680                        profile.classList.add('far-right');
1681                    }
1682
1683                    // Set initial image
1684                    const img = profile.querySelector('img');
1685                    img.src = testimonialData[index].imgSrc;
1686                    img.alt = testimonialData[index].alt;
1687                });
1688            }
1689
1690            // Animate changing profile images with fade effect
1691            function animateProfileChange() {
1692                // Fade out all profile images
1693                profiles.forEach(profile => {
1694                    const img = profile.querySelector('img');
1695                    img.style.transition = 'opacity 0.3s ease';
1696                    img.style.opacity = 0;
1697                });
1698
1699                // After fade out, update images and fade in
1700                setTimeout(() => {
1701                    profiles.forEach((profile, index) => {
1702                        const img = profile.querySelector('img');
1703                        img.src = testimonialData[index].imgSrc;
1704                        img.alt = testimonialData[index].alt;
1705                        img.style.opacity = 1;
1706                    });
1707
1708                    // Update the content section
1709                    updateContent(2); // Always show the middle position's content
1710                }, 300);
1711            }
1712
1713            // Update the content section
1714            function updateContent(positionIndex) {
1715                const contentIndex = testimonialData[positionIndex].contentIndex;
1716
1717                // Fade out all content
1718                contents.forEach(content => {
1719                    content.classList.remove('active');
1720                    content.style.opacity = 0;
1721                    content.style.transform = 'translateY(20px)';
1722                });
1723
1724                // Fade in selected content
1725                setTimeout(() => {
1726                    contents[contentIndex].classList.add('active');
1727                    contents[contentIndex].style.opacity = 1;
1728                    contents[contentIndex].style.transform = 'translateY(0)';
1729
1730                    // Force redraw of content container to adjust height
1731                    const container = document.querySelector('.ciyota-sponsorship-testimonial__content-container');
1732                    const activeContent = contents[contentIndex];
1733                    container.style.minHeight = activeContent.offsetHeight + 'px';
1734                }, 300);
1735            }
1736
1737            // Create nice entrance animation on load
1738            profiles.forEach((profile, index) => {
1739                const img = profile.querySelector('img');
1740
1741                img.style.opacity = 0;
1742                profile.style.opacity = 0;
1743                profile.style.transform = 'translateY(30px)';
1744
1745                setTimeout(() => {
1746                    profile.style.transition = 'all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55)';
1747                    profile.style.opacity = 1;
1748
1749                    if (index === 2) { // Middle/active
1750                        profile.style.transform = 'translateY(0)';
1751                    } else {
1752                        profile.style.transform = 'translateY(0)';
1753                    }
1754
1755                    setTimeout(() => {
1756                        img.style.transition = 'opacity 0.5s ease';
1757                        img.style.opacity = 1;
1758                    }, 200);
1759                }, 100 + index * 100);
1760            });
1761        });
1762    </script>
1762
1763
1764    
1764<script>
1765        // Add interactive elements and animations
1766        document.addEventListener('DOMContentLoaded', function() {
1767            const mapSection = document.getElementById('mapSection');
1768
1769            // Add parallax effect on mouse move
1770            document.querySelector('.our-program-learn-more').addEventListener('mousemove', function(e) {
1771                const moveX = (e.clientX - window.innerWidth / 2) * 0.01;
1772                const moveY = (e.clientY - window.innerHeight / 2) * 0.01;
1773
1774                mapSection.style.transform = `translate(${moveX}px, ${moveY}px)`;
1775
1776                // Move floating elements for additional effect
1777                const floatingElements = document.querySelectorAll('.our-program-learn-more-floating');
1778                floatingElements.forEach((elem, index) => {
1779                    const factor = (index + 1) * 0.02;
1780                    elem.style.transform = `translate(${moveX * factor * 2}px, ${moveY * factor * 2}px)`;
1781                });
1782            });
1783
1784            // Add scroll reveal animation
1785            const observer = new IntersectionObserver((entries) => {
1786                entries.forEach(entry => {
1787                    if (entry.isIntersecting) {
1788                        entry.target.style.animationDelay = '0s';
1789                        entry.target.style.animationPlayState = 'running';
1790                        observer.unobserve(entry.target);
1791                    }
1792                });
1793            }, {
1794                threshold: 0.1
1795            });
1796
1797            const animatedElements = document.querySelectorAll('.our-program-learn-more-content, .our-program-learn-more-map');
1798            animatedElements.forEach(el => observer.observe(el));
1799
1800            // Add click interaction for country cards (in addition to hover)
1801            const countryCards = document.querySelectorAll('.our-program-learn-more-country');
1802            countryCards.forEach(card => {
1803                card.addEventListener('click', function() {
1804                    const cardElement = this.querySelector('.our-program-learn-more-country-card');
1805                    cardElement.style.transform =
1806                        cardElement.style.transform === 'rotateY(180deg)' ?
1807                        'rotateY(0deg)' : 'rotateY(180deg)';
1808                });
1809            });
1810
1811            // Mobile touch compatibility
1812            if ('ontouchstart' in window || navigator.maxTouchPoints) {
1813                // For mobile devices, make sure click works reliably
1814                document.querySelectorAll('.our-program-learn-more-country').forEach(card => {
1815                    // Remove hover effect for mobile
1816                    card.classList.add('mobile');
1817
1818                    // Handle touch explicitly
1819                    card.addEventListener('touchend', function(e) {
1820                        e.preventDefault();
1821                        const cardElement = this.querySelector('.our-program-learn-more-country-card');
1822
1823                        // Toggle the flipped class
1824                        if (cardElement.classList.contains('flipped')) {
1825                            cardElement.classList.remove('flipped');
1826                            cardElement.style.transform = 'rotateY(0deg)';
1827                        } else {
1828                            cardElement.classList.add('flipped');
1829                            cardElement.style.transform = 'rotateY(180deg)';
1830                        }
1831                    });
1832                });
1833            }
1834        });
1835    </script>
1835
1836
1837
1838
1839    
1839<script>
1840        // Function to animate counting up to a target number
1841        function animateCount(elementId, targetNumber, duration = 2000, isPlus = false) {
1842            const element = document.getElementById(elementId);
1843            const startTime = performance.now();
1844            let suffix = isPlus ? "+" : "";
1845
1846            // Format numbers with commas
1847            function formatNumber(num) {
1848                return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
1849            }
1850
1851            function updateCount(currentTime) {
1852                const elapsedTime = currentTime - startTime;
1853
1854                if (elapsedTime < duration) {
1855                    const progress = elapsedTime / duration;
1856                    const currentCount = Math.floor(targetNumber * progress);
1857                    element.textContent = formatNumber(currentCount) + suffix;
1858                    requestAnimationFrame(updateCount);
1859                } else {
1860                    element.textContent = formatNumber(targetNumber) + suffix;
1861                }
1862            }
1863
1864            requestAnimationFrame(updateCount);
1865        }
1866
1867        // Function to check if element is in viewport
1868        function isInViewport(element) {
1869            const rect = element.getBoundingClientRect();
1870            return (
1871                rect.top >= 0 &&
1872                rect.left >= 0 &&
1873                rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
1874                rect.right <= (window.innerWidth || document.documentElement.clientWidth)
1875            );
1876        }
1877
1878        // Function to start all animations when in viewport
1879        function startAnimationsWhenVisible() {
1880            const container = document.querySelector('.ciyota-impact-meter-container');
1881
1882            if (isInViewport(container) && !container.dataset.animated) {
1883                // Mark as animated to prevent re-animation
1884                container.dataset.animated = true;
1885
1886                // Start animations with a slight delay between each
1887                setTimeout(() => animateCount("ecd-count", 6345), 200);
1888                setTimeout(() => animateCount("secondary-count", 2317), 400);
1889                setTimeout(() => animateCount("university-count", 108), 600);
1890                setTimeout(() => animateCount("community-count", 200000, 2000, true), 800);
1891                setTimeout(() => animateCount("refugee-count", 15000), 1000);
1892            }
1893        }
1894
1895        // Check when scrolling or on page load
1896        window.addEventListener('scroll', startAnimationsWhenVisible);
1897        window.addEventListener('load', startAnimationsWhenVisible);
1898
1899        // Also check on resize
1900        window.addEventListener('resize', startAnimationsWhenVisible);
1901
1902        // Initial check
1903        startAnimationsWhenVisible();
1904    </script>
1904
1905
1906    <section class="ciyotapartners-section">
1907        <div class="ciyotapartners-header">
1908            <h2 class="ciyotapartners-title">Our Partners</h2>
1909
1910
1911        </div>
1912
1913        <p class="ciyotapartners-description">
1914            We collaborate with visionary organisations and partners to provide quality education, empower communities, and drive sustainable innovation forward.
1915        </p>
1916
1917        <div class="ciyotapartners-carousel">
1918            <div class="ciyotapartners-track">
1919                <!-- Original set -->
1920                <div class="ciyotapartners-logo">
1921                    <img src="assets/img/partner-logo/ala-logo.png" alt="African Leadership Academy">
1922                </div>
1923                <div class="ciyotapartners-logo">
1924                    <img src="assets/img/partner-logo/mcf-logo.png" alt="Mastercard Foundation">
1925                </div>
1926                <div class="ciyotapartners-logo">
1927                    <img src="assets/img/partner-logo/pfe-logo.png" alt="Partners for Equity">
1928                </div>
1929
1930                <div class="ciyotapartners-logo">
1931                    <img src="assets/img/partner-logo/efrusyfam-logo.png" alt="Efrusy Family Foundation">
1932                </div>
1933                <div class="ciyotapartners-logo">
1934                    <img src="assets/img/partner-logo/hali-logo.png" alt="HALI Access Network">
1935                </div>
1936                <div class="ciyotapartners-logo">
1937                    <img src="assets/img/partner-logo/lam-logo.png" alt="Love Africa mission">
1938                </div>
1939                <div class="ciyotapartners-logo">
1940                    <img src="assets/img/partner-logo/stch-logo.png" alt="Street Child">
1941                </div>
1942                <div class="ciyotapartners-logo">
1943                    <img src="assets/img/partner-logo/wcc-logo.png" alt="War Child Canada">
1944                </div>
1945                <div class="ciyotapartners-logo">
1946                    <img src="assets/img/partner-logo/deswos-logo.png" alt="Deswos Foundation">
1947                </div>
1948                <div class="ciyotapartners-logo">
1949                    <img src="assets/img/partner-logo/alforedu-logo.png" alt="AL Foreducation">
1950                </div>
1951                <div class="ciyotapartners-logo">
1952                    <img src="assets/img/partner-logo/nfs-logo.png" alt="Not For Sale">
1953                </div>
1954                <div class="ciyotapartners-logo">
1955                    <img src="assets/img/partner-logo/aird-logo.jpg" alt="AIRD">
1956                </div>
1957                <div class="ciyotapartners-logo">
1958                    <img src="assets/img/partner-logo/africancollabo.png" alt="African Collaborative">
1959                </div>
1960                <div class="ciyotapartners-logo">
1961                    <img src="assets/img/partner-logo/wusc-logo.png" alt="World University Services of Canada (WUSC)">
1962                </div>
1963                <div class="ciyotapartners-logo">
1964                    <img src="assets/img/partner-logo/peopleweaver-logo.png" alt="PeopleWeaver">
1965                </div>
1966
1967                <!-- Duplicate set for seamless loop --
1968                <div class="ciyotapartners-logo">
1969                  <img src="assets/img/partner-logo/ala-logo.png" alt="African Leadership Academy">
1970                </div>-->
1971
1972            </div>
1973        </div>
1974    </section>
1975    <!-- End partner section -->
1976
1977
1978    <!-- Pop-up HTML Structure --
1979<div class="ciyota-pop-up-boxwelcome-container">
1980    <!-- Pop-up Overlay --
1981    <div class="ciyota-pop-up-boxwelcome-overlay" id="ciyota-pop-up-boxwelcome-overlay">
1982        <!-- Pop-up Box --
1983        <div class="ciyota-pop-up-boxwelcome" id="ciyota-pop-up-boxwelcome">
1984            <div class="ciyota-pop-up-boxwelcome-accent"></div>
1985            <div class="ciyota-pop-up-boxwelcome-header">
1986                <h2 class="ciyota-pop-up-boxwelcome-animate ciyota-pop-up-boxwelcome-delay1">📢 WE ARE HIRING</h2>
1987                <button class="ciyota-pop-up-boxwelcome-close" id="ciyota-pop-up-boxwelcome-close">&times;</button>
1988            </div>
1989            <div class="ciyota-pop-up-boxwelcome-content">
1990                <p class="ciyota-pop-up-boxwelcome-animate ciyota-pop-up-boxwelcome-delay2">New job opportunities are now open at CIYOTA! Visit our Careers Portal to explore Available positions and apply today.</p>
1991                <button class="ciyota-pop-up-boxwelcome-btn ciyota-pop-up-boxwelcome-animate ciyota-pop-up-boxwelcome-delay3" id="ciyota-pop-up-boxwelcome-btn"><a href="https://careers.ciyota.org/jobs.php" target="_blank"> Explore All Opportunities</a></button>
1992            </div>
1993        </div>
1994    </div>
1995</div>
1996
1997<script>
1998    // Immediately invoked function to avoid global scope pollution
1999    (function() {
2000        // Function to show the popup
2001        function showCiyotaPopup() {
2002            const overlay = document.getElementById('ciyota-pop-up-boxwelcome-overlay');
2003            const popup = document.getElementById('ciyota-pop-up-boxwelcome');
2004            
2005            overlay.style.display = 'flex';
2006            
2007            // Trigger reflow to ensure transitions work
2008            void overlay.offsetWidth;
2009            
2010            overlay.style.opacity = '1';
2011            popup.classList.add('ciyota-pop-up-boxwelcome-active');
2012        }
2013        
2014        // Function to hide the popup
2015        function hideCiyotaPopup() {
2016            const overlay = document.getElementById('ciyota-pop-up-boxwelcome-overlay');
2017            const popup = document.getElementById('ciyota-pop-up-boxwelcome');
2018            
2019            overlay.style.opacity = '0';
2020            popup.classList.remove('ciyota-pop-up-boxwelcome-active');
2021            
2022            // Wait for transition to complete before hiding
2023            setTimeout(() => {
2024                overlay.style.display = 'none';
2025            }, 400);
2026        }
2027        
2028        // Show popup after 5 seconds
2029        document.addEventListener('DOMContentLoaded', () => {
2030            setTimeout(showCiyotaPopup, 5000);
2031        });
2032        
2033        // Setup event listeners when DOM is ready
2034        document.addEventListener('DOMContentLoaded', () => {
2035            // Close popup when clicking the close button
2036            document.getElementById('ciyota-pop-up-boxwelcome-close').addEventListener('click', hideCiyotaPopup);
2037            
2038            // Close popup when clicking the explore button
2039            document.getElementById('ciyota-pop-up-boxwelcome-btn').addEventListener('click', hideCiyotaPopup);
2040            
2041            // Close popup when clicking outside the popup
2042            document.getElementById('ciyota-pop-up-boxwelcome-overlay').addEventListener('click', (event) => {
2043                if (event.target === document.getElementById('ciyota-pop-up-boxwelcome-overlay')) {
2044                    hideCiyotaPopup();
2045                }
2046            });
2047        });
2048    })();
2049</script>
2049
2050<!-- CIYOTA POPUP SECTION END -->
2051
2052
2053
2054    <!-- Popup --
2055  <div class="ciyota-popup-traveltoafrica-forimpact-overlay" id="ciyotaPopup">
2056    <div class="ciyota-popup-traveltoafrica-forimpact-container">
2057        <div class="ciyota-popup-traveltoafrica-forimpact-header">
2058            <button class="ciyota-popup-traveltoafrica-forimpact-close" onclick="closePopup()">&times;</button>
2059        </div>
2060        <div class="ciyota-popup-traveltoafrica-forimpact-content">
2061            <h2 class="ciyota-popup-traveltoafrica-forimpact-title">TRAVEL TO AFRICA FOR IMPACT</h2>
2062            <p class="ciyota-popup-traveltoafrica-forimpact-text">
2063              A new programme has been launched at CIYOTA—experience meaningful connections with forcibly displaced persons and host communities in Uganda and the DRC.
2064            </p>
2065            <div class="ciyota-popup-traveltoafrica-forimpact-buttons">
2066                <a href="traveltoafrica.html" class="ciyota-popup-traveltoafrica-forimpact-btn ciyota-popup-traveltoafrica-forimpact-btn-primary">Check the Program</a>
2067                <button onclick="closePopup()" class="ciyota-popup-traveltoafrica-forimpact-btn ciyota-popup-traveltoafrica-forimpact-btn-secondary">Close</button>
2068            </div>
2069        </div>
2070    </div>
2071</div>
2072
2073<script>
2074    // Show popup after 5 seconds only if not previously closed
2075    setTimeout(function() {
2076        if (!sessionStorage.getItem('ciyotaPopupClosed')) {
2077            var popup = document.getElementById('ciyotaPopup');
2078            popup.style.display = 'block';
2079            
2080            // Trigger animation after element is displayed
2081            setTimeout(function() {
2082                popup.classList.add('show');
2083            }, 10);
2084        }
2085    }, 5000);
2086
2087    // Close popup function
2088    function closePopup() {
2089        var popup = document.getElementById('ciyotaPopup');
2090        popup.classList.remove('show');
2091        
2092        // Set session storage to prevent popup from showing again
2093        sessionStorage.setItem('ciyotaPopupClosed', 'true');
2094        
2095        // Hide popup after animation completes
2096        setTimeout(function() {
2097            popup.style.display = 'none';
2098            location.reload();
2099        }, 500);
2100    }
2101
2102    // Close on escape key
2103    document.addEventListener('keydown', function(e) {
2104        if (e.key === 'Escape') {
2105            closePopup();
2106        }
2107    });
2108
2109    // Close on overlay click
2110    document.getElementById('ciyotaPopup').addEventListener('click', function(e) {
2111        if (e.target === this) {
2112            closePopup();
2113        }
2114    });
2115</script>
2115 -->
2116
2117
2118    <!-- Footer Section -->
2119    <div id="footer-placeholder"></div>
2120    
2120<script src="footer/footer-scripts.js?v=4"></script>
2120
2121    
2121<script>
2122        fetch('footer/footer.html?v=4')
2123            .then(response => response.text())
2124            .then(data => {
2125                document.getElementById('footer-placeholder').innerHTML = data;
2126                // Initialize footer after it loads
2127                initializeFooter();
2128                attachFooterEventListeners();
2129            });
2130    </script>
2130
2131    <!-- End Footer Section -->
2132
2133
2134    
2134<script src="assets/js/jquery-2.1.3.min.js"></script>
2134
2135    
2135<script src="assets/bootstrap/js/bootstrap.min.js"></script>
2135
2136    
2136<script src="assets/js/bootsnav.js"></script>
2136
2137    
2137<script src="assets/js/jquery.inview.min.js"></script>
2137
2138    
2138<script src="assets/js/imagesloaded.js"></script>
2138
2139    
2139<script src="assets/js/masonry.pkgd.min.js"></script>
2139
2140    
2140<script src="assets/js/jquery.stellar.min.js"></script>
2140
2141    
2141<script src="assets/js/jquery.countTo.js"></script>
2141
2142    
2142<script src="assets/magnific-popup/jquery.magnific-popup.js"></script>
2142
2143    
2143<script src="assets/js/swiper.jquery.min.js"></script>
2143
2144    
2144<script src="assets/js/ajaxchimp.js"></script>
2144
2145    
2145<script src="assets/js/ajaxchimp-config.js"></script>
2145
2146    
2146<script src="assets/js/script.js"></script>
2146
2147
2148    <!--Disable right click--
2149            
2149<script>
2150                  document.addEventListener('contextmenu', function(e) {
2151                    e.preventDefault();  
2152                });
2153            </script>
2153
2154
2155            Disable keyboard shortcuts--
2156            
2156<script>
2157                document.addEventListener('keydown', function(e) {
2158                    // Prevent F12
2159                    if (e.keyCode === 123) {
2160                        e.preventDefault();
2161                    }
2162                    
2163                    // Prevent Ctrl+Shift+I, Ctrl+U, Ctrl+S
2164                    if (e.ctrlKey && (e.shiftKey && e.keyCode === 73 || 
2165                        e.keyCode === 85 || e.keyCode === 83)) {
2166                        e.preventDefault();}
2167                });
2168            </script>
2168-->
2169
2170    <!--Disable right click--
2171            
2171<script>
2172                  document.addEventListener('contextmenu', function(e) {
2173                    e.preventDefault();  
2174                });
2175            </script>
2175
2176
2177            Disable keyboard shortcuts--
2178            
2178<script>
2179                document.addEventListener('keydown', function(e) {
2180                    // Prevent F12
2181                    if (e.keyCode === 123) {
2182                        e.preventDefault();
2183                    }
2184                    
2185                    // Prevent Ctrl+Shift+I, Ctrl+U, Ctrl+S
2186                    if (e.ctrlKey && (e.shiftKey && e.keyCode === 73 || 
2187                        e.keyCode === 85 || e.keyCode === 83)) {
2188                        e.preventDefault();}
2189                });
2190            </script>
2190-->
2191
2192
2193</body>
2194
2195</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.