PageSourceSearch

https://newark.org.uk/

html newark.org.uk collected 2026-10-04 01:58:20 UTC 102,573 bytes, 3,597 lines download raw bytes

1<script>
2  const uid = '2167#6ac1b2bb9572f';
3  const client_id = '2167';
4	console.log(uid);
5</script>
5
6
7<!DOCTYPE html>
8<html lang="en">
9<head>
10  <meta charset="UTF-8" />
11  <meta name="viewport" content="width=device-width, initial-scale=1" />
12  <title></title>
13
14  <!-- Basic SEO -->
15  <meta name="description" content="At Newark Youth London, we are committed to creating meaningful opportunities for young people and the wider community." />
16  <meta name="author" content="Newark Youth London" />
17  <meta name="robots" content="index, follow" />
18
19  <!-- Open Graph / Facebook -->
20  <meta property="og:type" content="website" />
21  <meta property="og:url" content="https://newark.org.uk/" />
22  <meta property="og:title" content="Newark Youth London" />
23  <meta property="og:description" content="At Newark Youth London, we are committed to creating meaningful opportunities for young people and the wider community." />
24  <meta property="og:image" content="https://newark.org.uk/assets/images/logo/logo.png" />
25  <meta property="og:site_name" content="Newark Youth London" />
26
27  <!-- Twitter -->
28  <meta name="twitter:card" content="summary_large_image" />
29  <meta name="twitter:url" content="https://newark.org.uk/" />
30  <meta name="twitter:title" content="Newark Youth London" />
31  <meta name="twitter:description" content="At Newark Youth London, we are committed to creating meaningful opportunities for young people and the wider community." />
32  <meta name="twitter:image" content="https://newark.org.uk/assets/images/logo/logo.png" />
33  <meta name="twitter:creator" content="@YourTwitterHandle" />
34
35  <!-- Favicons and Icons -->
36  <link rel="shortcut icon" href="https://newark.org.uk/assets/images/icon/icon.png" type="image/png" />
37  <link rel="icon" href="https://newark.org.uk/assets/images/logo/logo.png" type="image/png" sizes="16x16" />
38  <link rel="apple-touch-icon" href="https://newark.org.uk/assets/images/logo/logo.png" />
39
40  <!-- Microsoft Tile -->
41  <meta name="msapplication-TileImage" content="https://newark.org.uk/assets/images/logo/logo.png" />
42
43  <!-- Google Fonts -->
44  <link rel="preconnect" href="https://fonts.googleapis.com">
45  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
46  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900,1,100..900&display=swap" rel="stylesheet">
47
48  <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
49
50  <!-- CSS -->
51	  <link rel="stylesheet" href="https://newark.org.uk/assets/css/owl.css" />
52  <link rel="stylesheet" href="https://newark.org.uk/assets/css/style.css" />
53  <link rel="stylesheet" href="https://newark.org.uk/assets/css/responsive.css" />
54  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
55  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
56  <link rel="stylesheet" href="https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css">
57	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
58<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
58
59	<style>
60		body p{
61			font-family:"Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
62			font-size:17px !important;
63		}
64	</style>
65	
66  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
67  
67<script src="https://newark.org.uk/assets/js/jquery.js"></script>
67
68
69	<!-- Magnific Popup CSS & JS -->
70<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
71<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
71
72
73  <!-- Page Name Slide Script -->
74  
74<script>
75    window.addEventListener('DOMContentLoaded', () => {
76        const path = window.location.pathname.toLowerCase();
77        let page = '';
78
79        if (path.includes('/about')) {
80            page = 'About';
81        } else if (path.includes('/services')) {
82            page = 'Services';
83        } else if (path.includes('/products')) {
84            page = 'Products';
85        } else if (path.includes('/blog')) {
86            page = 'Blog';
87        } else {
88            page = path.split("/").pop();
89            page = page.split(".")[0];
90            page = page.replace(/-/g, " ");
91            page = page.split(" ").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
92        }
93
94        if (page === "") page = "Home";
95
96        const showDiv = document.getElementById('showPageName');
97        showDiv.innerText = page;
98
99        setTimeout(() => {
100            showDiv.classList.add('show');
101            setTimeout(() => {
102                showDiv.classList.remove('show');
103                showDiv.classList.add('hide');
104            }, 3000);
105        }, 2000);
106    });
107  </script>
107
108
109  <style>
110	  #deskNav{
111	  	z-index:999 !important;
112	  }
113    #showPageName {
114      display: inline-block;
115      background-color: #002262;
116      color: #fff;
117      padding: 0.5rem 2rem;
118      border-radius: 4px;
119      font-weight: 600;
120      font-size: 1.5rem;
121      border: 1px solid #fff;
122      position: fixed;
123      bottom: 50%;
124      right: -100%;
125      max-width: fit-content;
126      white-space: nowrap;
127      z-index: 9999;
128      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
129      transition: right 1.5s ease;
130		border-radius:35px;
131    }
132    #showPageName.show { right: 20px; }
133    #showPageName.hide { right: -100%; }
134  </style>
135	
136<style>
137#bannerNav a {
138  color: white;
139  text-decoration: none;
140	font-size:20px
141}
142#bannerNav a:hover {
143  text-decoration: underline;
144}
145</style>
146
147<script>
148document.addEventListener('DOMContentLoaded', () => {
149  const banner = document.getElementById('bannerNav');
150  if (!banner) return; // element না থাকলে exit
151
152  // Get current URL path
153  let path = window.location.pathname.replace(/^\/|\/$/g, '');
154  const parts = path.split('/');
155
156  // Build breadcrumb HTML
157  let html = '<i class="fa fa-home"></i> <a href="/">Home</a>';
158  
159  if (parts.length >= 1 && parts[0]) {
160    const category = parts[0].replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
161    html += ` <i class="fa fa-caret-right"></i> <span class="categoryName">${category}</span>`;
162  }
163
164  if (parts.length >= 2 && parts[1]) {
165    const page = parts[1].replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
166    html += ` <i class="fa fa-caret-right"></i> <span class="pageName">${page}</span>`;
167  }
168
169  // Insert into DOM
170  banner.innerHTML = html;
171});
172
173</script>
173
174</head>
175<body id="myBody">
176
177<div id="showPageName" class="page-name"></div>
178<!-- preloader start -->
179<div id="loading">
180  <div class="loader-container">
181    <div class="logo-circle">
182      <img src="https://newark.org.uk/assets/images/logo/40.png" alt="Logo" class="logoSp" />
183      <span class="ripple ripple1"></span>
184      <span class="ripple ripple2"></span>
185      <span class="ripple ripple3"></span>
186    </div>
187  </div>
188</div>
189<!-- preloader end -->
190
191<style>
192#loading {
193  background-color: royalblue;
194  height: 100%;
195  width: 100%;
196  position: fixed;
197  z-index: 99999;
198  top: 0;
199  left: 0;
200  display: flex;
201  justify-content: center;
202  align-items: center;
203  transition: opacity 0.6s ease; /* smooth fade */
204}
205
206.loader-container {
207  position: relative;
208  width: 120px;
209  height: 120px;
210}
211
212.logo-circle {
213  position: relative;
214  width: 100%;
215  height: 100%;
216  display: flex;
217  justify-content: center;
218  align-items: center;
219}
220
221.logoSp {
222  width: 80px;
223  height: 80px;
224  z-index: 3;
225}
226
227.ripple {
228  position: absolute;
229  width: 100%;
230  height: 100%;
231  border: 5px solid #ffc107;
232  border-radius: 50%;
233  opacity: 0;
234  animation: ripple-wave 2s infinite;
235}
236
237.ripple1 { animation-delay: 0s; }
238.ripple2 { animation-delay: 0.6s; }
239.ripple3 { animation-delay: 1.2s; }
240
241@keyframes ripple-wave {
242  0% {
243    transform: scale(0.5);
244    opacity: 0.9;
245  }
246  100% {
247    transform: scale(2);
248    opacity: 0;
249  }
250}
251</style>
252
253<script>
254// Fade-out preloader when full page loaded
255window.addEventListener('load', function () {
256  const preloader = document.getElementById('loading');
257  preloader.style.opacity = '0'; // start fade-out
258
259  // wait until CSS transition ends, then hide element
260  preloader.addEventListener('transitionend', () => {
261    preloader.style.display = 'none';
262  });
263});
264</script>
264
265
266
267
268
269
270<style>
271marquee div, marquee p {
272  display: inline !important;
273  white-space: nowrap !important;
274  margin: 0 !important;
275  padding: 0 !important;
276}
277</style>
278<style>
279	.navbar-toggler-icon {
280    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
281}
282	.navbar{
283		padding: 0 10px !important;
284	}
285    .mega-menu-content{
286        border-left: 1px solid #ccc;
287    }
288    
289    .content-panel{
290        padding:20px !important
291    }
292    
293    h6 a{
294        color:#096BC9;
295        text-decoration: none;
296    }
297    .submenu a{
298        text-decoration: none;
299        color:#096BC9 !important;
300    }
301    .submenu a.small{
302        text-decoration: none;
303        color:#ddd !important;
304    }
305    
306.mega-menu-categories button {
307  display: flex;
308  flex-direction: column;
309  align-items: center;
310  justify-content: center;
311  gap: 6px;
312  width: 100%;
313  background: none;
314  border: none;
315  text-align: center;
316  padding: 16px 12px;
317  border-radius: 10px;
318  font-size: 14px;
319  cursor: pointer;
320  transition: all 0.3s;
321}
322
323.mega-menu-categories button i {
324  font-size: 22px;
325  color: #096BC9;
326}
327
328.mega-menu-categories button.active,
329.mega-menu-categories button:hover {
330  background: linear-gradient(90deg, #096BC9, #4169e1);
331  color: #fff;
332  font-weight: bold;
333}
334
335.mega-menu-categories button.active i,
336.mega-menu-categories button:hover i {
337  color: #fff;
338}
339
340.submenu a {
341  transition: background 0.3s, color 0.3s;
342  border-radius: 8px;
343  padding: 10px 12px;
344}
345
346.submenu a:hover {
347  background: linear-gradient(90deg, #096BC9, #002262);
348  color: #fff !important;
349}
350.submenu a.small:hover {
351  color: #fff !important;
352}
353.highlight-box{
354    margin-top: 3px;
355}
356.highlight-box img {
357  transition: transform 0.4s ease, box-shadow 0.4s ease;
358  border-radius: 10px;
359}
360
361.highlight-box img:hover {
362  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
363}
364.mega-menu-categories button i {
365  font-size: 40px;
366  color: #096BC9;
367  text-align: center;
368}
369.mega-menu-categories button.active i {
370  color: #fff;
371}
372#deskNav{
373    position:fixed;
374    width: 100%;
375    top:20px;
376    z-index: 99;
377}
378.menu-item:hover{
379    transform: scale(1.05);
380    transition: .5s;
381}
382.menu-item{
383    transform: scale(1);
384    transition: .5s;
385    cursor: pointer;
386}
387.nav-item.position-relative:hover .submenu {
388    display: block !important;
389}
390#deskNav{
391      transform: translateY(0);
392  opacity: 1;
393  transition: transform 0.4s ease, opacity 0.4s ease;
394
395}
396#deskNav.hide {
397  transform: translateY(-100%);
398  opacity: 0;
399}
400</style>
401
402<div id="deskNav">
403<nav class="navbar navbar-expand-lg navbar-custom">
404  <div class="container-fluid" style="padding:0">
405    <a class="navbar-brand" href="https://newark.org.uk/"><img src="https://newark.org.uk/assets/images/logo/logo.png" style="height:120px"></a>
406
407    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobileMenu">
408      <span class="navbar-toggler-icon"></span>
409    </button>
410
411    <div class="collapse navbar-collapse" id="mainMenu">
412      <ul class="navbar-nav mx-auto">
413        <!-- NORMAL LINKS -->
414        <li class="nav-item position-relative">
415          <a class="nav-link d-flex align-items-center" href="#" id="resourcesLink">
416           <i class="fas fa-info-circle"></i> About Us
417            <span class="ms-1 dropdown-toggle"></span>
418          </a>
419          <div class="submenu position-absolute bg-white shadow rounded p-3" style="display: none; top: 100%; left: 0; min-width: 250px;">
420            <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/about-us/about">
421              <strong><i class="fas fa-info"></i> About</strong><br>
422              <small class="">Team members working with us.</small>
423				<a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/about-us/timeline">
424				  <strong><i class="fas fa-clock"></i> Timeline</strong><br>
425				  <small>Our journey through the years.</small>
426				</a>
427            <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/about-us/our-people">
428              <strong><i class="fas fa-blog"></i>
428 Our People</strong><br>
429              <small class="">Team members working with us.</small>
430            </a>
431            <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/about-us/our-governance">
432              <strong><i class="fas fa-file-alt"></i> Our Governance</strong><br>
433              <small class="">Structure for organized management.</small>
434            </a>
435            <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/about-us/volunteer">
436              <strong><i class="fas fa-book"></i> Volunteer</strong><br>
437              <small class="">Help us achieve our goals.</small>
438            </a>
439            <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/about-us/contact">
440              <strong><i class="fas fa-phone-alt"></i> Contact</strong><br>
441              <small class="">Reach us anytime easily.</small>
442            </a>
443          </div>
444        </li>
445        <!-- NORMAL LINKS -->
446        <li class="nav-item position-relative">
447          <a class="nav-link d-flex align-items-center" href="#" id="products1">
448           <i class="fas fa-box"></i> What We Do
449            <span class="ms-1 dropdown-toggle"></span>
450          </a>
451          <div class="submenu position-absolute bg-white shadow rounded p-3" style="display: none; top: 100%; left: 0; min-width: 520px;">
452            <div class="row">
453                <div class="col-md-6">
454                    <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/what-we-do/youth-clubs">
455                      <strong><i class="fas fa-users"></i> Youth Clubs</strong><br>
456                      <small class="">Join sports and activities here.</small>
457                    </a>
458                    <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/what-we-do/sports-sessions">
459                      <strong><i class="fas fa-basketball-ball"></i> Sports Sessions</strong><br>
460                      <small class="">Various games every week session.</small>
461                    </a>
462                    <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/what-we-do/holiday-programme">
463                      <strong><i class="fas fa-plane-departure"></i> Holiday Programme</strong><br>
464                      <small class="">Fun events during holidays here.</small>
465                    </a>
466                    <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/what-we-do/football">
467                      <strong><i class="fas fa-futbol"></i> Football</strong><br>
468                      <small class="">Training and matches weekly scheduled.</small>
469                    </a>
470                    <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/what-we-do/women-and-girls">
471                      <strong><i class="fas fa-female"></i> Women and Girls</strong><br>
472                      <small class="">Programs for women and girls.</small>
473                    </a>
474                </div>
475                <div class="col-md-6">
476                    <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/what-we-do/employability">
477                      <strong><i class="fas fa-briefcase"></i> Employability</strong><br>
478                      <small class="">Skills training for employment opportunity.</small>
479                    </a>
480                    <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/what-we-do/accredited-courses">
481                      <strong><i class="fas fa-award"></i> Accredited Courses</strong><br>
482                      <small class="">Recognized programs and certificates awarded.</small>
483                    </a>
484                    <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/what-we-do/homework-club">
485                      <strong><i class="fas fa-book-open"></i> Homework Club</strong><br>
486                      <small class="">Various homework club available now.</small>
487                    </a>
488                    <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/wh
488at-we-do/just-smiles-original">
489                      <strong><i class="fas fa-smile"></i> Just Smiles Original</strong><br>
490                      <small class="">Creative activities for happy children.</small>
491                    </a>
492                </div>
493            </div>
494          </div>
495        </li>
496
497
498
499
500        <li class="nav-item position-relative">
501          <a class="nav-link d-flex align-items-center" href="#" id="aboutLink">
502           <i class="fas fa-hand-holding-heart"></i> Support Us
503            <span class="ms-1 dropdown-toggle"></span>
504          </a>
505          <div class="submenu position-absolute bg-white shadow rounded p-3" style="display: none; top: 100%; left: 0; min-width: 220px;">
506            <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/support-us/donate">
507              <strong><i class="fas fa-donate"></i> Donate</strong><br>
508              <small class="">Support projects financially today.</small>
509            </a>
510            <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/about-us/volunteer">
511              <strong><i class="fas fa-hands-helping"></i> Volunteer</strong><br>
512              <small class="">Join hands to help people.</small>
513            </a>
514            <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/support-us/vacancies">
515              <strong><i class="fas fa-user-check"></i> Vacancies</strong><br>
516              <small class="">Apply for open job positions.</small>
517            </a>
518          </div>
519        </li>
520
521        <!-- OTHER LINKS -->
522        <li class="nav-item"><a class="nav-link" href="https://newark.org.uk/impact-data"><i class="fas fa-chart-bar"></i> Impact & Data</a></li>
523        <li class="nav-item"><a class="nav-link" href="https://newark.org.uk/supporters"><i class="fas fa-comments"></i> Supporters</a></li>
524        <li class="nav-item"><a class="nav-link" href="https://newark.org.uk/gallery"><i class="fas fa-images"></i> Gallery</a></li>
525
526      </ul>
527
528      <div class="d-flex align-items-center gap-3">
529        <a href="https://newark.org.uk/registration" class="btn-gradient">Registration</a>
530      </div>
531    </div>
532  </div>
533</nav>
534
535</div>
536
537<script>
538document.addEventListener('DOMContentLoaded', () => {
539
540  function handleSubmenu(linkId) {
541    const link = document.getElementById(linkId);
542    const item = link.parentElement;
543    const submenu = item.querySelector('.submenu');
544    if (!submenu) return;
545
546    link.addEventListener('click', (e) => {
547      e.preventDefault();
548      const isVisible = submenu.style.display === 'block';
549      submenu.style.display = isVisible ? 'none' : 'block';
550      link.classList.toggle('active', !isVisible);
551    });
552
553    item.addEventListener('mouseenter', () => {
554      submenu.style.display = 'block';
555      link.classList.add('active');
556    });
557
558    item.addEventListener('mouseleave', () => {
559      submenu.style.display = 'none';
560      link.classList.remove('active');
561    });
562
563    document.addEventListener('click', (e) => {
564      if (!item.contains(e.target)) {
565        submenu.style.display = 'none';
566        link.classList.remove('active');
567      }
568    });
569  }
570
571  handleSubmenu('resourcesLink');
572  handleSubmenu('aboutLink');
573
574  const megaMenus = document.querySelectorAll('.nav-item.dropdown');
575  megaMenus.forEach(item => {
576    const dropdown = item.querySelector('.dropdown-menu');
577    if (!dropdown) return;
578    item.addEventListener('mouseenter', () => dropdown.classList.add('show'));
579    item.addEventListener('mouseleave', () => dropdown.classList.remove('show'));
580  });
581
582});
583
584document.querySelectorAll('.menu-item').forEach(item => {
585  let link = item.querySelector('a');
586  if(link){
587    item.addEventListener('click', () => {
588      window.location.href = link.href;
589    });
590  }
591});
592</script>
592
593
594
595<script>
596(function() {
597  const deskNav = document.getElementById('deskNav');
598  let lastScroll = 0;
599
600  window.addEventListener('scroll', () => {
601    const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
602
603    if (currentScroll > lastScroll && currentScroll > 50) {
604      // Scrolling down → hide nav
605      deskNav.classList.add('hide');
606    } else {
607      // Scrolling up → show nav
608      deskNav.classList.remove('hide');
609    }
610
611    lastScroll = currentScroll <= 0 ? 0 : currentScroll; // For Mobile or negative scrolling
612  });
613})();
614</script>
614
615<style>
616.btn-close {
617    --bs-btn-close-color: #fff; /* Icon color */
618    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234169e1'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
619}
620</style>
621<!-- Offcanvas Menu -->
622<div class="offcanvas offcanvas-end" tabindex="-1" id="mobileMenu" aria-labelledby="mobileMenuLabel" style="width:80%; border-left:2px solid royalblue;">
623  
624  <!-- Header: Logo + Close -->
625  <div class="offcanvas-header d-flex justify-content-between align-items-center" style="padding:10px 16px; background:;">
626    <img src="https://newark.org.uk/assets/images/logo/logo.png" alt="Logo" style="height:50px;">
627    <button type="button" class="btn-close text-reset custom-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
628  </div>
629
630  <div class="offcanvas-body p-0">
631    <ul class="offcanvas-menu list-unstyled m-0">
632
633      <!-- About Us -->
634      <li class="offcanvas-item">
635        <a href="#"><span>About Us</span><i class="fas fa-chevron-down float-end"></i></a>
636        <ul class="offcanvas-submenu list-unstyled">
637          <li><a href="https://newark.org.uk/about-us/about"><i class="fas fa-info"></i> About</a></li>
638		  <li><a href="https://newark.org.uk/about-us/timeline"><i class="fas fa-clock"></i> Timeline</a></li>
639          <li><a href="https://newark.org.uk/about-us/our-people"><i class="fas fa-users"></i> Our People</a></li>
640          <li><a href="https://newark.org.uk/about-us/our-governance"><i class="fas fa-landmark"></i> Governance</a></li>
641          <li><a href="https://newark.org.uk/about-us/volunteer"><i class="fas fa-hands-helping"></i> Volunteer</a></li>
642          <li><a href="https://newark.org.uk/about-us/contact"><i class="fas fa-envelope"></i> Contact</a></li>
643        </ul>
644      </li>
645
646	<li class="offcanvas-item">
647	  <a href="#"><span>What We Do</span><i class="fas fa-chevron-down float-end"></i></a>
648	  <ul class="offcanvas-submenu list-unstyled">
649		<li><a href="https://newark.org.uk/what-we-do/youth-clubs"><i class="fas fa-users"></i> Youth Clubs</a></li>
650		<li><a href="https://newark.org.uk/what-we-do/sports-sessions"><i class="fas fa-running"></i> Sports Sessions</a></li>
651		<li><a href="https://newark.org.uk/what-we-do/holiday-programme"><i class="fas fa-umbrella-beach"></i> Holiday Programme</a></li>
652		<li><a href="https://newark.org.uk/what-we-do/football"><i class="fas fa-futbol"></i> Football</a></li>
653		<li><a href="https://newark.org.uk/what-we-do/women-and-girls"><i class="fas fa-female"></i> Women and Girls</a></li>
654		<li><a href="https://newark.org.uk/what-we-do/employability"><i class="fas fa-briefcase"></i> Employability</a></li>
655		<li><a href="https://newark.org.uk/what-we-do/accredited-courses"><i class="fas fa-certificate"></i> Accredited Courses</a></li>
656		<li><a href="https://newark.org.uk/what-we-do/homework-club"><i class="fas fa-book"></i> Homework Club</a></li>
657		<li><a href="https://newark.org.uk/what-we-do/just-smiles-original"><i class="fas fa-smile"></i> Just Smiles Original</a></li>
658	  </ul>
659	</li>
660
661      <!-- Support Us -->
662      <li class="offcanvas-item">
663        <a href="#"><span>Support Us</span><i class="fas fa-chevron-down float-end"></i></a>
664        <ul class="offcanvas-submenu list-unstyled">
665          <li><a href="https://newark.org.uk/support-us/donate"><i class="fas fa-hand-holding-heart"></i> Donate</a></li>
666          <li><a href="https://newark.org.uk/support-us/volunteer"><i class="fas fa-hands-helping"></i> Volunteer</a></li>
667			 <li><a href="https://newark.org.uk/support-us/vacancies"><i class="fas fa-user-check"></i> Vacancies</a></li>
668        </ul>
669      </li>
670
671      <!-- Normal Links -->
672      <li class="offcanvas-item"><a href="https://newark.org.uk/impact-data">Impact & Data</a></li>
673      <li class="offcanvas-item"><a href="https://newark.org.uk/supporters">Supporters</a></li>
674	  <li class="offcanvas-item"><a href="https://newark.org.uk/gallery">Gallery</a></li>
675	  <li class="offcanvas-item"><a href="https://newark.org.uk/registration">Registration</a></li>
676
677      <!-- Footer Contact List -->
678      <li id="mobileMenuFooter" class="text-left mt-2 px-3">
679        <h6 class="fw-bold text-dark mb-3">Contact Info</h6>
680        <ul class="list-unstyled mb-3">
681          <li class="mb-0"><i class="fas fa-phone me-2 cicon"></i> <a href="tel:+4407 392 2121">0207 392 2121</a></li>
682          <li class="mb-0"><i class="fas fa-envelope me-2 cicon"></i> <a href="mailto:[email protected]">[email protected]</a></li>
683          <li><i class="fas fa-map-marker-alt me-2 cicon"></i> Unit S2, Whitechapel Centre<br> 85 Myrdle Street, London E1 1HL</li>
684        </ul>
685
686        <!-- Social Bar -->
687        <div class="d-flex justify-content-center gap-3 mt-3 mb-3 socialMenu">
688          <a href="https://www.facebook.com/newarkyl/" target="_blank" class="social-icon"><i class="fab fa-facebook-f cicon2"></i></a>
689          <a href="https://www.instagram.com/newarkyouthldn?igsh=MXRiODk2ZXN3YTVqcw==" target="_blank" class="social-icon"><i class="cicon2 fab fa-instagram"></i></a>
690			<a href="#" target="_blank" class="social-icon"><i class="fab fa-x-twitter cicon2"></i></a>
691		  <a href=" https://www.youtube.com/@NewarkYL" target="_blank" class="social-icon"><i class="fab fa-youtube cicon2"></i></a>
692			<a href="#" target="_blank" class="social-icon"><i class="fab fa-tiktok cicon2"></i></a>
693        </div>
694		  
695		<div class="pb-2 d-flex gap-2" style="margin-top:10px; width:100%;">
696		  <a href="https://play.google.com/store/apps/details?id=uk.co.signsoft.newarkyouthlondon" target="_blank">
697			<img src="https://newark.org.uk/assets/images/icons/googlePlay.png" class="img img-fluid mt-1" style="height:;" alt="">
698		  </a>
699		  <a href="https://apps.apple.com/us/app/newark-youth-london/id675891389
6991" target="_blank">
700			<img src="https://newark.org.uk/assets/images/icons/apple.png" class="img img-fluid mt-1" style="height:;" alt="">
701		  </a>
702		</div>
703 
704      </li>
705
706    </ul>
707  </div>
708</div>
709
710<!-- Script -->
711<script>
712document.addEventListener('DOMContentLoaded', () => {
713  const items = document.querySelectorAll('.offcanvas-item');
714  const currentUrl = window.location.href;
715
716  items.forEach(item => {
717    const link = item.querySelector('a');
718    const submenu = item.querySelector('.offcanvas-submenu');
719
720    // Highlight current URL
721    if (link.href === currentUrl || (submenu && [...submenu.querySelectorAll('a')].some(sublink => currentUrl.endsWith(sublink.getAttribute('href'))))) {
722      item.classList.add('active'); // add active to li
723      if (submenu) submenu.style.maxHeight = submenu.scrollHeight + 'px'; // expand submenu
724      if (submenu) submenu.querySelectorAll('a').forEach(sublink => {
725        if (currentUrl.endsWith(sublink.getAttribute('href'))) {
726          sublink.classList.add('active'); // highlight submenu link
727        }
728      });
729    }
730
731    // Click toggle for submenu
732    if (submenu) {
733      link.addEventListener('click', e => {
734        e.preventDefault();
735        const isVisible = submenu.style.maxHeight && submenu.style.maxHeight !== '0px';
736        submenu.style.maxHeight = isVisible ? '0' : submenu.scrollHeight + 'px';
737        item.classList.toggle('active', !isVisible); // toggle active on li
738      });
739    }
740  });
741});
742</script>
742
743
744<style>
745/* Parent menu active */
746.offcanvas-item.active > a {
747  background-color: royalblue !important;
748  color: #fff !important;
749}
750
751.offcanvas-item.active > a i {
752  transform: rotate(180deg);
753}
754
755/* Submenu active link */
756.offcanvas-submenu li a.active {
757  font-weight: 600;
758  background-color: rgba(0,0,0,0.1);
759}
760
761
762</style>
763
764
765<style>
766	.custom-close {
767  background-color: royalblue;   /* Royal Blue background */
768  border-radius: 50%;           /* Fully rounded */
769  opacity: 1;                   /* Default Bootstrap opacity remove */
770  padding:8px !important;
771  color:#fff !important
772}
773
774.custom-close:hover {
775  background-color: #27408b;    /* Darker shade on hover */
776}
777.cicon{
778	color:royalblue;
779}
780.cicon2{
781	color:#fff;
782}
783/* ===============================
784   OFFCANVAS MENU STYLING
785================================ */
786.offcanvas-body {
787  background: #fff;
788  color: #000;
789  /*padding: 0;*/
790  overflow-y: auto;
791  height: 100%;
792}
793
794.offcanvas-header .btn-close {
795  filter: none;
796}
797
798/* Main Menu Links */
799.offcanvas-item > a {
800  display: flex;
801  justify-content: space-between;
802  align-items: center;
803  padding: 14px 16px;
804  text-decoration: none;
805  color: #000;
806  font-weight: 600;
807  cursor: pointer;
808  transition: background 0.3s;
809  border-bottom: 1px solid #ccc;
810}
811
812.offcanvas-item > a:hover {
813  background: rgba(0,0,0,0.05);
814}
815
816.offcanvas-item > a i {
817  transition: transform 0.3s;
818}
819
820.offcanvas-item > a.active i {
821  transform: rotate(180deg);
822}
823
824/* Submenu */
825.offcanvas-submenu {
826  list-style: none;
827  margin: 0;
828  max-height: 0;
829  overflow: hidden;
830  transition: max-height 0.3s ease;
831}
832
833.offcanvas-submenu li a {
834  padding: 10px 20px;
835  display: flex;
836  align-items: center;
837  gap: 8px;
838	width:100%;
839  font-size: 0.95rem;
840}
841
842.offcanvas-submenu li:hover {
843  background: rgba(0,0,0,0.05);
844}
845
846.offcanvas-submenu li a {
847  text-decoration: none;
848  color: #000;
849}
850
851/* ===============================
852   FOOTER CONTACT & SOCIAL
853================================ */
854#mobileMenuFooter {
855  padding: 15px 16px;
856  background: #;
857  color: #000;
858  text-align: left;
859}
860
861#mobileMenuFooter ul {
862  padding: 0;
863  margin: 0 0 10px 0;
864  list-style: none;
865}
866
867#mobileMenuFooter ul li {
868  gap: 8px;
869  padding: 6px 0;
870  font-size: 0.95rem;
871}
872
873#mobileMenuFooter ul li a {
874  color: #000;
875	font-size:16px !important;
876  text-decoration: none;
877}
878
879#mobileMenuFooter ul li a:hover {
880  text-decoration: underline;
881}
882
883/* Social Icons Bar */
884#mobileMenuFooter .socialMenu {
885  display: flex;
886  justify-content: center;
887  gap: 8px !important;
888  margin-top: 10px;
889}
890
891#mobileMenuFooter .social-icon {
892  display: flex;
893  justify-content: center;
894  align-items: center;
895  width: 40px;
896  height: 40px;
897  border-radius: 50%;
898  background: royalblue;
899  color: #000;
900  font-size: 18px;
901  transition: all 0.3s ease;
902}
903
904#mobileMenuFooter .social-icon:hover {
905  background: royalblue;
906  color: #fff;
907}
908
909/* ===============================
910   MOBILE RESPONSIVE
911================================ */
912@media (max-width: 576px) {
913  .offcanvas-item > a {
914    padding: 12px 14px;
915    font-size: 15px;
916  }
917
918
919  #mobileMenuFooter ul li {
920    font-size: 14px;
921  }
922
923  #mobileMenuFooter .social-icon {
924    width: 36px;
925    height: 36px;
926    font-size: 16px;
927  }
928}
929</style>
930<style>
931/* ===== Video Slider ===== */
932#videoSlider {
933    position: unset !important;  /* desktop default */
934}
935
936/* Carousel item takes full height */
937#videoSlider .carousel-item {
938    height: auto;  /* desktop default */
939}
940
941/* Carousel caption container */
942.carousel-caption {
943    bottom: 10% !important;
944    left: 15px !important;
945    right: auto;
946    text-align: left;
947    max-width: 90%;
948    width: 40%;
949    background: rgba(0, 0, 0, 0.4); /* semi-transparent */
950    padding: 20px 25px;
951    border-radius: 12px;
952    text-align: center;
953    margin-top: 150px;
954}
955
956/* Keep final state after animation */
957.carousel-caption.animate__animated {
958    animation-fill-mode: forwards;
959}
960
961/* Animation speed */
962.carousel-caption.animate__fadeInUp {
963    animation-duration: 1s;
964}
965
966/* Title */
967.carousel-caption h3 {
968    font-size: 2.5rem;
969    color: #fff;
970    margin-bottom: 10px;
971    text-shadow: 2px 2px 10px rgba(0,0,0,0.6);
972}
973
974/* Description */
975.carousel-caption p {
976    font-size: 1.2rem;
977    color: #f1f1f1;
978    margin-bottom: 15px;
979    text-shadow: 1px 1px 8px rgba(0,0,0,0.5);
980}
981
982/* Buttons container */
983.carousel-caption .btn-group {
984    display: flex;
985    gap: 15px;
986    justify-content: center;
987    align-items: center;
988    flex-wrap: wrap;
989}
990.carousel-caption .custom-btn {
991    padding: 12px 28px;
992    font-size: 1rem;
993    font-weight: 600;
994    border-radius: 40px;
995    transition: all 0.3s ease;
996    text-decoration: none;
997    text-align: center;
998    cursor: pointer;
999    white-space: nowrap;
1000}
1001
1002/* Royal Blue filled button */
1003.primary-btn {
1004    background-color: #4169E1;
1005    color: #fff;
1006    border: none;
1007}
1008.primary-btn:hover {
1009    background-color: #274bdb;
1010    transform: translateY(-2px);
1011    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
1012}
1013
1014/* White outline button */
1015.outline-btn {
1016    background-color: #fff;
1017    color: #4169E1;
1018    border: 2px solid #4169E1;
1019}
1020.outline-btn:hover {
1021    background-color: #D7B468;
1022    color: #fff;
1023    transform: translateY(-2px);
1024    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
1025}
1026
1027/* ===== Responsive Settings ===== */
1028@media (max-width: 992px) {
1029    .carousel-caption { width: 60%; }
1030    .carousel-caption h3 { font-size: 2rem; }
1031    .carousel-caption p { font-size: 1rem; }
1032}
1033
1034@media (max-width: 768px) {
1035    #videoSlider {
1036        height: 55vh !important;
1037    }
1038
1039    #videoSlider .carousel-item {
1040        height: 55vh !important;
1041    }
1042
1043    #videoSlider video {
1044        height: 100% !important;   /* fill container */
1045        width: 100% !important;
1046        object-fit: cover;
1047    }
1048
1049    .carousel-caption { width: 80%; }
1050    .carousel-caption p { display: none; }  /* hide text */
1051    .carousel-caption h3 { font-size: 1.6rem; }
1052    .carousel-caption .btn-group { flex-direction: row; gap: 10px; }
1053    .carousel-caption .custom-btn { font-size: 0.9rem; padding: 8px 20px; }
1054}
1055
1056@media (max-width: 576px) {
1057    .carousel-caption {
1058        width: 95%;
1059        padding: 12px 15px;
1060        bottom: 5% !important;
1061    }
1062    .carousel-caption h3 { font-size: 1.3rem; }
1063    .carousel-caption p { display: none; } /* still hidden */
1064    .carousel-caption .btn-group { flex-direction: row; gap: 8px; }
1065    .carousel-caption .custom-btn { font-size: 0.85rem; padding: 6px 16px; }
1066}
1067
1068</style>
1069
1070<div id="videoSlider" style="z-index:-1" class="carousel slide carousel-fade" data-bs-ride="carousel">
1071  <div class="carousel-inner">
1072    <div class="carousel-item active">
1073      <video class="d-block w-100" poster="assets/images/slider/slider-1.jpg" autoplay muted loop playsinline>
1074        <source src="assets/images/slider/slider-1.mp4" type="video/mp4">
1075      </video>
1076      <!-- Carousel Caption -->
1077      <div class="carousel-caption animate__animated animate__fadeInUp">
1078		  <h3 class="fontOne"><b>Supporting young people since 1984</b></h3>
1079
1080      </div>
1081    </div>
1082  </div>
1083</div>
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105<!-- Include Bootstrap CSS & JS -->
1106<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
1107<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
1107
1108
1109<!-- Modal -->
1110<div class="modal fade" id="impactModal" tabindex="-1" aria-hidden="true">
1111  <div class="modal-dialog modal-dialog-centered modal-lg">
1112    <div class="modal-content border-3 border-warning rounded-3 overflow-hidden position-relative" 
1113         style="border-color:#D7B468!important;">
1114      
1115      <!-- Close Button (attached to top right of box) -->
1116      <button type="button" class="btn-close-custom" data-bs-dismiss="modal" aria-label="Close">×</button>
1117
1118      <div class="row g-0 align-items-stretch">
1119        <!-- Left Side -->
1120        <div class="col-md-6 d-flex flex-column justify-content-center p-4">
1121          <h2 class="text-primary text-center mb-2">
1122            Newark changes lives through its unwavering dedication and support          </h2>
1123          <p class="text-dark text-justify" style="font-size:15px;line-height:1.6;">
1124            <div style="white-space: pre-wrap;"><p style="margin: 0px 0px 0.25rem; line-height: 1.3;"><span style="color: rgb(0, 0, 0);">At Newark Youth London, we are more than just an organisation — we are a force for positive change in the London Borough of Tower Hamlets and neighbouring boroughs. </span></p><br><p style="margin: 0px 0px 0.25rem; line-height: 1.3;"><span style="color: rgb(0, 0, 0);">Since 1984, our roots have run deep, beginning as a local football club and growing into a beacon of hope for young people and adults alike.</span></p><br></div>          </p>
1125          <a href="https://newark.org.uk/support-us/donate" class="btn mt-3 text-white" style="background:royalblue;font-size:20px;">
1126            Support Us          </a>
1127        </div>
1128
1129        <!-- Right Side -->
1130        <div class="col-md-6">
1131          <img src="https://admin.newark.org.uk/uploads/2025/1766845488_Picture_1.jpeg" 
1132               alt="Happy child" class="img-fluid h-100 w-100 object-fit-cover">
1133        </div>
1134      </div>
1135    </div>
1136  </div>
1137</div>
1138<!-- Custom CSS -->
1139<style>
1140/* Close button — attached inside top right corner */
1141.btn-close-custom {
1142  position: absolute;
1143  top: 0px;
1144  right: 0px;
1145  background: royalblue;
1146  color: white;
1147  border: 2px solid gold;
1148  font-weight: bold;
1149  font-size: 30px;
1150  width: 45px;
1151  height: 45px;
1152  border-radius: 0 0 0 50%;
1153  line-height: 1;
1154  display: flex;
1155  align-items: center;
1156  justify-content: center;
1157  z-index: 1056;
1158  cursor: pointer;
1159  transition: 0.3s;
1160  box-shadow: 0 0 10px rgba(0,0,0,0.3);
1161}
1162.btn-close-custom:hover {
1163  background: #D7B468;
1164  color: royalblue;
1165}
1166
1167/* Responsive */
1168@media (max-width: 700px) {
1169  .modal-content h2 {
1170    font-size: 17px !important;
1171  }
1172  .modal-content p {
1173    font-size: 14px !important;
1174    line-height: 1.5 !important;
1175  }
1176  .modal-content .btn {
1177    font-size: 14px !important;
1178    padding: 7px 12px !important;
1179  }
1180  .modal-content img {
1181    height: 200px !important;
1182    object-fit: cover;
1183  }
1184  .btn-close-custom {
1185    top: 0px;
1186    right: 0px;
1187    width: 38px;
1188    height: 38px;
1189    font-size: 25px;
1190  }
1191}
1192</style>
1193
1194<!-- JS: Auto Show + 40min localStorage timer -->
1195<script>
1196window.addEventListener("load", () => {
1197  const MODAL_KEY = "impactModalShown";
1198
1199  // If the modal was not shown yet in this tab session
1200  if (!sessionStorage.getItem(MODAL_KEY)) {
1201    setTimeout(() => {
1202      const modal = new bootstrap.Modal(document.getElementById('impactModal'));
1203      modal.show();
1204
1205      const modalEl = document.getElementById('impactModal');
1206      modalEl.addEventListener('hidden.bs.modal', () => {
1207        // Mark as shown for this tab session
1208        sessionStorage.setItem(MODAL_KEY, "true");
1209      });
1210    }, 1000);
1211  }
1212
1213  // When tab closes, clear the session (automatic) and optionally clear localStorage
1214  window.addEventListener("beforeunload", () => {
1215    // Optional: if you still want to clear localStorage too
1216    localStorage.removeItem("impactModalClosedTime");
1217  });
1218});
1219</script>
1219
1220
1221
1222<section class="wpo-features-area">
1223    <div class="container">
1224        <div class="features-wrap">
1225            <div class="row">
1226
1227				<div class="col col-lg-3 col-md-6 col-12">
1228					<div class="feature-item-wrap">
1229						<div class="feature-item">
1230							<div class="cardsl" data-target="1600">
1231							  <div class="nuLabel">Participants Engaged</div>
1232							  <div class="number"><span class="count-number">1600</span></div>
1233							</div>
1234						</div>
1235						<div class="feature-item-hidden">
1236							<div class="feature-text">
1237								<p>In 2024-25, over 1600 individual participants engaged in our programmes.</p>
1238							</div>
1239						</div>
1240					</div>
1241				</div>
1242
1243				<div class="col col-lg-3 col-md-6 col-12">
1244					<div class="feature-item-wrap">
1245						<div class="feature-item">
1246							<div class="cardsl" data-target="41000">
1247							  <div class="nuLabel">Newark Contact Hours</div>
1248							  <div class="number"><span class="count-number">41,000</span></div>
1249							</div>
1250						</div>
1251						<div class="feature-item-hidden">
1252
1253							<div class="feature-text">
1254								<p>Over 41,000 hours of positive contact with participants.</p>
1255							</div>
1256						</div>
1257					</div>
1258				</div>
1259
1260				<div class="col col-lg-3 col-md-6 col-12">
1261					<div class="feature-item-wrap">
1262						<div class="feature-item">
1263							<div class="cardsl" data-target="144">
1264							  <div class="nuLabel">Accredited Outcome Achieved</div>
1265							  <div class="number"><span class="count-number">144</span></div>
1266							</div>
1267						</div>
1268						<div class="feature-item-hidden">
1269
1270							<div class="feature-text">
1271								<p>144 young people achieved an accredited outcome.</p>
1272							</div>
1273						</div>
1274					</div>
1275				</div>
1276
1277				<div class="col col-lg-3 col-md-6 col-12">
1278					<div class="feature-item-wrap">
1279						<div class="feature-item">
1280							<div class="cardsl" data-target="164">
1281							  <div class="nuLabel">Children went on International Visits</div>
1282							  <div class="number"><span class="count-number">164</span></div>
1283							</div>
1284						</div>
1285						<div class="feature-item-hidden">
1286
1287							<div class="feature-text">
1288								<p>164 children visited Spain, France, Italy and Bangladesh in 2025 as part of TurningProject.</p>
1289							</div>
1290						</div>
1291					</div>
1292				</div>
1293
1294
1295            </div>
1296        </div>
1297    </div>
1298</section>
1299<style>
1300.wpo-features-area {
1301    padding:0;
1302    background:transparent;
1303}
1304
1305/* Responsive padding */
1306@media (max-width: 991px) {
1307    .wpo-features-area {
1308        padding:0;
1309    }
1310}
1311
1312@media (max-width: 767px) {
1313    .wpo-features-area {
1314        padding: 0;
1315    }
1316}
1317
1318/* Features wrap */
1319.wpo-features-area .features-wrap {
1320    margin-top: -80px;
1321    z-index: 9;
1322    position: relative;
1323}
1324
1325@media (max-width: 991px) {
1326    .wpo-features-area .features-wrap {
1327        margin-top: 0;
1328    }
1329}
1330
1331/* Feature item wrap */
1332.wpo-features-area .feature-item-wrap {
1333    position: relative;
1334}
1335
1336/* Feature items */
1337.wpo-features-area .feature-item-wrap .feature-item,
1338.wpo-features-area .feature-item-wrap .feature-item-hidden {
1339    background: linear-gradient(135deg, #ffc107, #156293);
1340    padding: 60px;
1341    text-align: center;
1342    position: relative;
1343}
1344
1345/* bar/line inside item */
1346.wpo-features-area .feature-item-wrap .feature-item:before,
1347.wpo-features-area .feature-item-wrap .feature-item-hidden:before {
1348    position: absolute;
1349    left: -2px;
1350    top: 50%;
1351    transform: translateY(-50%);
1352    width: 4px;
1353    height: 100px;
1354    background: linear-gradient(180deg, #f8f8f8, #ffffff, #ffffff);
1355    content: "";
1356    border-radius:50%;
1357}
1358
1359/* -------- CENTERED HOVER BOX -------- */
1360.wpo-features-area .feature-item-wrap .feature-item-hidden {
1361    position: absolute;
1362    top: 50%;                 /* vertical center */
1363    left: 50%;                /* horizontal center */
1364    width: 90%;
1365    padding: 30px 25px;
1366    background: linear-gradient(180deg, #ffffff, #096BC9, #002262);
1367    border-radius: 20px;
1368    z-index: 11;
1369
1370    opacity: 0;
1371    visibility: hidden;
1372
1373    /* CENTER position + smooth zoom */
1374    transform: translate(-50%, -50%) scale(0);
1375    transform-origin: center center;
1376
1377    transition: all 0.35s ease;
1378}
1379
1380/* Hover — show popup */
1381.wpo-features-area .feature-item-wrap:hover .feature-item-hidden,
1382.wpo-features-area .feature-item-wrap.active .feature-item-hidden {
1383    opacity: 1;
1384    visibility: visible;
1385    transform: translate(-50%, -50%) scale(1);
1386}
1387
1388/* remove before bar in hidden box */
1389.wpo-features-area .feature-item-wrap .feature-item-hidden::before {
1390    display: none !important;
1391}
1392
1393/* hidden text color */
1394.wpo-features-area .feature-item-wrap .feature-item-hidden p {
1395    margin-bottom: 0;
1396    color: #ffffff;
1397}
1398
1399/* Column padding */
1400.wpo-features-area .col { padding: 0; }
1401
1402@media (max-width: 575px) {
1403    .wpo-features-area .col { padding: 0px; }
1404}
1405
1406/* First & last column border */
1407.wpo-features-area .col:first-child .feature-item {
1408    border-top-left-radius: 20px;
1409    border-bottom-left-radius: 20px;
1410}
1411.wpo-features-area .col:first-child .feature-item:before {
1412    display: none;
1413}
1414.wpo-features-area .col:last-child .feature-item {
1415    border-top-right-radius: 20px;
1416    border-bottom-right-radius: 20px;
1417}
1418
1419@media (max-width: 991px) {
1420    .wpo-features-area .col:first-child .feature-item,
1421    .wpo-features-area .col:last-child .feature-item {
1422        border-radius: 0;
1423    }
1424}
1425
1426@media (max-width: 767px) {
1427    .wpo-features-area .feature-item-wrap .feature-item::before {
1428        display: none !important;
1429    }
1430    .wpo-features-area .feature-item-wrap .feature-item {
1431        margin-top: 0px;
1432        border-bottom:1px solid #ccc;
1433    }
1434}
1435
1436</style><!-- About Section Start -->
1437<section class="about-section section-padding fix">
1438  <div class="container">
1439	   <h2 class="section-title-work text-royal-work text-center mb-3">About Us</h2>
1440    <div class="about-wrapper">
1441      <div class="row">
1442		  
1443        <!-- Right Images -->
1444        <div class="col-lg-6 d-flex justify-content-center align-items-center">
1445          <div class="about-item">
1446            <div class="mb-3">
1447              <img style="width:100%" src="assets/images/background/about3.png" alt="img" class="main-img">
1448            </div>
1449          </div>
1450        </div>
1451        <!-- Left Content -->
1452        <div class="col-lg-6">
1453          <div class="about-content">
1454            <div class="section-title mb-0">
1455              <h2>
1456                <span>N</span>ewark changes lives through its unwavering dedication and support.
1457              </h2>
1458            </div>
1459            <p class="text">
1460            "At Newark Youth London, we are more than just an organisation — we are a force forpositive change in the London Borough of Tower Hamlets and neighbouring boroughs.Since 1984, our roots have run deep, beginning as a local football club and growing intoa beacon of hope for young people and adults alike."
1461            </p>
1462			  <div class="section-title mb-0">
1463				  <h2 style="text-transform:capitalize">Our Values</h2>
1464			  </div>
1465            <!-- Icon Item 1 -->
1466            <div class="about-icon-item">
1467              <div class="icon">
1468                <img src="assets/images/icons/a.png" alt="img">
1469              </div>
1470              <div class="content">
1471                <h4>Open to All</h4>
1472                <p>We welcome every young person and ensure equal access for everyone.</p>
1473              </div>
1474            </div>
1475
1476            <!-- Icon Item 2 -->
1477            <div class="about-icon-item mb-0">
1478              <div class="icon">
1479                <img src="assets/images/icons/b.png" alt="img">
1480              </div>
1481              <div class="content">
1482                <h4>Inclusive</h4>
1483                <p>We celebrate diversity and create spaces where all voices are respected and represented.</p>
1484              </div>
1485            </div>
1486			  
1487            <div class="about-icon-item mb-0">
1488              <div class="icon">
1489                <img src="assets/images/icons/c.png" alt="img">
1490              </div>
1491              <div class="content">
1492                <h4>User Led</h4>
1493                <p>Young people shape what we do. Their needs, ideas, and experiences guide our decisions.</p>
1494              </div>
1495            </div>
1496
1497            <!-- Bottom Section -->
1498            <div class="about-bottom">
1499              <a href="about-us/about" class="theme-btn">More About Us <i class="fa-solid fa-arrow-right-long"></i></a>
1500            </div>
1501          </div>
1502        </div>
1503
1504
1505
1506      </div>
1507    </div>
1508  </div>
1509</section>
1510
1511<!-- CSS -->
1512<style>
1513.about-section {
1514  padding: 120px 0 90px;
1515  position: relative;
1516  font-family: Arial, sans-serif;
1517  background: linear-gradient(180deg, #ffffff, #4169e1);
1518}
1519
1520.about-content .section-title .sub-title {
1521  font-weight: 600;
1522  font-size: 16px;
1523  color: royalblue;
1524  margin-bottom: 10px;
1525}
1526
1527.about-content .section-title h2 {
1528  font-size: 36px;
1529  font-weight: 700;
1530  margin-bottom: 20px;
1531  line-height: 1.3;
1532}
1533
1534.about-content .text {
1535  max-width: 645px;
1536  margin-top: 20px;
1537  margin-bottom: 40px;
1538  font-size: 16px;
1539  color: #333;
1540}
1541
1542.about-icon-item {
1543  display: flex;
1544  align-items: flex-start;
1545  gap: 20px;
1546  margin-bottom: 30px;
1547}
1548
1549.about-icon-item .icon img {
1550  display: inline-block;
1551  width: 60px;
1552  height: 60px;
1553	background: #D7B468;
1554	border-radius: 50%;
1555	padding: 8px;
1556}
1557
1558.about-icon-item .content h4 {
1559  font-size: 20px;
1560  margin-bottom: 5px;
1561  color: #fff;
1562}
1563
1564.about-icon-item .content p {
1565  max-width: 565px;
1566  font-size: 14px;
1567  color: #fff;
1568}
1569
1570.about-bottom {
1571  display: flex;
1572  align-items: center;
1573  gap: 35px;
1574  margin-top: 40px;
1575}
1576
1577.about-bottom .theme-btn {
1578  background-color: #1e3aa8;
1579  color: #fff;
1580  padding: 10px 20px;
1581  text-decoration: none;
1582  border-radius: 5px;
1583  font-weight: 600;
1584}
1585
1586.about-bottom .theme-btn:hover {
1587  background-color: #D7B468;
1588}
1589
1590.about-item {
1591  display: flex;
1592  justify-content: right;
1593}
1594
1595.about-item .about-image {
1596  position: relative;
1597  max-width: 100%;
1598}
1599
1600.about-item .about-image img.main-img {
1601  width: 100%;
1602  border-radius: 20px;
1603}
1604
1605.about-item .shape,
1606.about-item .about-image-2,
1607.about-item .about-image-3 {
1608  position: absolute;
1609}
1610
1611.about-item .shape img {
1612  right: 0;
1613  top: 0;
1614  max-width: 100px;
1615}
1616
1617.about-item .about-image-2 img {
1618  left: -180px;
1619  top: 40px;
1620  max-width: 300px;
1621  border-radius: 20px;
1622}
1623
1624.about-item .about-image-3 img {
1625  left: -190px;
1626  bottom: -90px;
1627  max-width: 360px;
1628  border-radius: 20px;
1629}
1630
1631/* Responsive Fix */
1632@media (max-width: 1200px) {
1633  .about-item .about-image-2 img,
1634  .about-item .about-image-3 img {
1635    left: 0;
1636    top: 0;
1637    bottom: 0;
1638    max-width: 250px;
1639  }
1640}
1641
1642@media (max-width: 991px) {
1643  .about-section {
1644    padding: 20px 0 20px;
1645  }
1646
1647  .about-content .section-title h2 {
1648    font-size: 28px;
1649  }
1650
1651  .about-icon-item {
1652    gap: 15px;
1653  }
1654
1655  .about-icon-item .content h4 {
1656    font-size: 18px;
1657  }
1658
1659  .about-icon-item .content p {
1660    font-size: 13px;
1661  }
1662
1663  .about-item {
1664    justify-content: center;
1665    margin-top: 40px;
1666  }
1667
1668  .about-image {
1669    max-width: 350px;
1670  }
1671
1672  .about-image .about-image-2,
1673  .about-image .about-image-3 {
1674    display: none;
1675  }
1676}
1677
1678@media (max-width: 576px) {
1679  .about-section {
1680    padding: 20px 0 20px;
1681  }
1682
1683  .about-content .section-title h2 {
1684    font-size: 22px;
1685    line-height: 1.2;
1686  }
1687
1688  .about-content .text {
1689    font-size: 14px;
1690    margin-bottom: 25px;
1691  }
1692
1693  .about-icon-item {
1694    flex-direction: column;
1695    align-items: center;
1696    margin-bottom: 20px;
1697	  text-align:center
1698  }
1699
1700  .about-icon-item .icon img {
1701	width: 60px;
1702	height: 60px;
1703	background: #096BC9;
1704	border-radius: 50%;
1705	padding: 10px;
1706  }
1707
1708  .about-bottom {
1709    flex-direction: column;
1710    align-items: center;
1711    gap: 20px;
1712  }
1713
1714  .about-item {
1715    justify-content: center;
1716    margin-top: 30px;
1717  }
1718
1719  .about-image {
1720    max-width: 100%;
1721  }
1722
1723  .about-image .shape,
1724  .about-image .about-image-2,
1725  .about-image .about-image-3 {
1726    display: none;
1727  }
1728}
1729</style>
1730<!-- Social Feeds Section -->
1731<section class="social-feeds py-5" style="background:#f2f2f2;">
1732  <div class="container-fluid">
1733    <h2 class="section-title-work text-royal-work text-center mb-5">Stay Connected</h2>
1734    <div class="row" style="text-align:center;margin-bottom:30px">
1735      <div style="display:flex; gap:15px; justify-content:center; width:100%;">
1736        <a href="https://www.facebook.com/newarkyl/" target="_blank" rel="noopener noreferrer" style="display:flex; align-items:center; justify-content:center;
1737                width:40px; height:40px; border-radius:50%;
1738               background:#1DA1F2; color:#fff; font-size:1.2rem;
1739                border:3px solid #d9e6ff;
1740                box-shadow:0 4px 10px rgba(0,0,0,0.15);
1741                transition:0.3s;">
1742          <i class="fab fa-facebook"></i>
1743        </a>
1744        <a href="https://www.instagram.com/newarkyouthldn?igsh=MXRiODk2ZXN3YTVqcw==" target="_blank" rel="noopener noreferrer" style="display:flex; align-items:center; justify-content:center;
1745                width:40px; height:40px; border-radius:50%;
1746                 background:#1DA1F2; color:#fff; font-size:1.2rem;
1747                color:#fff; font-size:1.2rem;
1748                border:3px solid #cceaff;
1749                box-shadow:0 4px 10px rgba(0,0,0,0.15);
1750                transition:0.3s;">
1751          <i class="fab fa-instagram"></i>
1752        </a>
1753        <a href="https://www.youtube.com/@NewarkYL" target="_blank" rel="noopener noreferrer" style="display:flex; align-items:center; justify-content:center;
1754                width:40px; height:40px; border-radius:50%;
1755                background:#1DA1F2; color:#fff; font-size:1.2rem;
1756                border:3px solid #cceaff;
1757                box-shadow:0 4px 10px rgba(0,0,0,0.15);
1758                transition:0.3s;">
1759          <i class="fab fa-youtube"></i>
1760        </a>
1761        <a href="https://www.tiktok.com/@newark.youth.lond" target="_blank" rel="noopener noreferrer" style="display:flex; align-items:center; justify-content:center;
1762                width:40px; height:40px; border-radius:50%;
1763                background:#1DA1F2; color:#fff; font-size:1.2rem;
1764                border:3px solid #cceaff;
1765                box-shadow:0 4px 10px rgba(0,0,0,0.15);
1766                transition:0.3s;">
1767          <i class="fab fa-tiktok"></i>
1768        </a>
1769      </div>
1770    </div>
1771    <div class="row g-4 align-items-stretch">
1772      <!-- Facebook Feed -->
1773      <div class="col-lg-4 col-md-4 col-sm-12">
1774        <div class="feed-card">
1775          <div class="feed-header bg-royal-feed text-white text-center py-2">
1776            <i class="fab fa-facebook-f me-2"></i> Facebook
1777          </div>
1778          <div class="feed-body" class="ratio ratio-1x1">
1779            <div id="fb-root"></div>
1780            
1780<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v24.0&appId=934891490668105"></script>
1780
1781            <div class="fb-page" data-href="https://www.facebook.com/newarkyl/" data-tabs="timeline" data-width="500" data-height="480" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true">
1782              <blockquote cite="https://www.facebook.com/newarkyl/" class="fb-xfbml-parse-ignore">
1783                <a href="https://www.facebook.com/newarkyl/">Newark Youth London</a>
1784              </blockquote>
1785            </div>
1786          </div>
1787        </div>
1788      </div>
1789      <!-- Instagram Feed -->
1790<div class="col-lg-4 col-md-6 col-sm-12 mb-3">
1791  <div class="feed-card">
1792    <div class="feed-header bg-royal-feed text-white text-center py-2">
1793      <i class="fab fa-instagram me-2"></i> Instagram
1794    </div>
1795    <div class="feed-body">
1796      <div class="instagram-container" style="width:100%; overflow:hidden;">
1797        <blockquote class="instagram-media" 
1798          data-instgrm-permalink="https://www.instagram.com/newarkyouthldn/" 
1799          data-instgrm-version="14" 
1800          style="background:#FFF; border:0; margin:0 auto; max-width:100%; width:100%; padding:0;">
1801        </blockquote>
1802      </div>
1803    </div>
1804  </div>
1805</div>
1806
1807<script async src="https://www.instagram.com/embed.js"></script>
1807
1808
1809<style>
1810/* Instagram blockquote responsive fix */
1811.instagram-container blockquote.instagram-media {
1812    width: 100% !important;
1813    max-width: 100% !important;
1814    margin: 0 auto !important;
1815}
1816
1817/* Optional: keep aspect ratio */
1818.instagram-container {
1819    position: relative;
1820    padding-bottom: 100%; /* 1:1 square ratio */
1821    height: 0;
1822}
1823.instagram-container blockquote.instagram-media {
1824    position: absolute;
1825    top: 0;
1826    left: 0;
1827    width: 100% !important;
1828    height: 100% !important;
1829}
1830</style>
1831
1832      <div class="col-lg-4 col-md-4 col-sm-12">
1833        <div class="feed-card">
1834          <div class="feed-header bg-royal-feed text-white text-center py-2">
1835           <i class="fab fa-tiktok"></i> TikTok
1836          </div>
1837          <div class="feed-body">
1838				<blockquote style="" class="tiktok-embed" cite="https://www.tiktok.com/@newark.youth.lond" data-unique-id="newark.youth.lond" data-embed-type="creator" style="max-width: 780px; min-width: 288px;" > <section> <a target="_blank" href="https://www.tiktok.com/@newark.youth.lond?refer=creator_embed">@newark.youth.lond</a> </section> </blockquote> 
1838<script async src="https://www.tiktok.com/embed.js"></script>
1838
1839
1840			
1840<script async src="https://www.tiktok.com/embed.js"></script>
1840
1841          </div>
1842        </div>
1843      </div>
1844    </div>
1845  </div>
1846</section>
1847<style>
1848	.tiktok-embed{margin-top:0 !important}
1849  .bg-royal-feed {
1850    background-color: #4169e1 !important;
1851    /* Royal Blue */
1852  }
1853
1854  .text-royal-feed {
1855    color: #4169e1;
1856  }
1857
1858  /* Hover effect */
1859  .feed-card {
1860    transform: translateY(-8px) scale(1.02);
1861  }
1862
1863  .feed-header {
1864    font-weight: 600;
1865    font-size: 1.1rem;
1866    letter-spacing: .5px;
1867  }
1868
1869  .feed-body {
1870    padding: 0;
1871  }
1872
1873  .feed-iframe {
1874    width: 100% !important;
1875    height: 100% !important;
1876    border: none;
1877    display: block;
1878  }
1879
1880  /* Common title */
1881  .section-title-feed {
1882    font-size: 4rem;
1883    font-weight: 700;
1884    line-height: 1.2;
1885  }
1886
1887  .section-text-feed {
1888    font-size: 1rem;
1889    line-height: 1.7;
1890    color: #333;
1891  }
1892
1893  /* Responsive adjustments */
1894  @media (max-width: 991px) {
1895    .section-title-feed {
1896      font-size: 2.5rem;
1897    }
1898  }
1899
1900  @media (max-width: 575px) {
1901    .section-title-feed {
1902      font-size: 2rem;
1903    }
1904
1905    .feed-card {
1906      margin-bottom: 20px;
1907    }
1908  }
1909</style><!-- Our Work Section with Slick Slider -->
1910<section class="our-work py-5" style="background:linear-gradient(180deg, #ffffff, #4169e1)">
1911  <div class="container">
1912    <h2 class="section-title-work text-royal-work text-center mb-5">Our Work</h2>
1913    
1914    <!-- Slick Slider Wrapper -->
1915    <div class="our-work-slider">
1916      
1917
1918<div class="work-card-wrapper">
1919  <div class="work-card shadow-lg position-relative overflow-hidden">
1920
1921    <!-- Image -->
1922    <img src="https://admin.newark.org.uk/uploads/2025/1766730130_Picture_7_.jpeg" 
1923         class="card-img-top w-100 h-100" 
1924         alt="Education &amp; Employment">
1925
1926    <div class="overlay">
1927
1928      <!-- Title -->
1929      <h5 class="card-title-work text-royal-work">
1930        Education & Employment      </h5>
1931
1932      <div class="overlay-extra">
1933
1934        <!-- 10-word content -->
1935        <p class="card-text-work">
1936          Education &amp; EmploymentWe firmly believe a persons life chance improves...        </p>
1937
1938        <!-- Learn More -->
1939        <a href="work-details/Education--Employment" 
1940           class="btn btn-royal-work">
1941          Learn More
1942        </a>
1943
1944      </div>
1945
1946    </div>
1947  </div>
1948</div>
1949<div class="work-card-wrapper">
1950  <div class="work-card shadow-lg position-relative overflow-hidden">
1951
1952    <!-- Image -->
1953    <img src="https://admin.newark.org.uk/uploads/2025/1766730046_Picture_5.jpeg" 
1954         class="card-img-top w-100 h-100" 
1955         alt="Sports &amp; Recreation">
1956
1957    <div class="overlay">
1958
1959      <!-- Title -->
1960      <h5 class="card-title-work text-royal-work">
1961        Sports & Recreation      </h5>
1962
1963      <div class="overlay-extra">
1964
1965        <!-- 10-word content -->
1966        <p class="card-text-work">
1967          Sports &amp; RecreationStarting as a sports organisation, we believe sport...        </p>
1968
1969        <!-- Learn More -->
1970        <a href="work-details/Sports--Recreation" 
1971           class="btn btn-royal-work">
1972          Learn More
1973        </a>
1974
1975      </div>
1976
1977    </div>
1978  </div>
1979</div>
1980<div class="work-card-wrapper">
1981  <div class="work-card shadow-lg position-relative overflow-hidden">
1982
1983    <!-- Image -->
1984    <img src="https://admin.newark.org.uk/uploads/2025/1766730069_Picture_3.jpeg" 
1985         class="card-img-top w-100 h-100" 
1986         alt="Community Projects">
1987
1988    <div class="overlay">
1989
1990      <!-- Title -->
1991      <h5 class="card-title-work text-royal-work">
1992        Community Projects      </h5>
1993
1994      <div class="overlay-extra">
1995
1996        <!-- 10-word content -->
1997        <p class="card-text-work">
1998          Community ProjectsNewark believes in being part of the wider community...        </p>
1999
2000        <!-- Learn More -->
2001        <a href="work-details/Community-Projects" 
2002           class="btn btn-royal-work">
2003          Learn More
2004        </a>
2005
2006      </div>
2007
2008    </div>
2009  </div>
2010</div>
2011<div class="work-card-wrapper">
2012  <div class="work-card shadow-lg position-relative overflow-hidden">
2013
2014    <!-- Image -->
2015    <img src="https://admin.newark.org.uk/uploads/2025/1763622978_w3_(2).png" 
2016         class="card-img-top w-100 h-100" 
2017         alt="Youth Empowerment">
2018
2019    <div class="overlay">
2020
2021      <!-- Title -->
2022      <h5 class="card-title-work text-royal-work">
2023        Youth Empowerment      </h5>
2024
2025      <div class="overlay-extra">
2026
2027        <!-- 10-word content -->
2028        <p class="card-text-work">
2029          Youth Empowerment & LeadershipAt every step, we encourage young people...        </p>
2030
2031        <!-- Learn More -->
2032        <a href="work-details/Youth-Empowerment" 
2033           class="btn btn-royal-work">
2034          Learn More
2035        </a>
2036
2037      </div>
2038
2039    </div>
2040  </div>
2041</div>
2042
2043
2044		
2045    </div>
2046  </div>
2047</section>
2048
2049<!-- Custom CSS -->
2050<style>
2051.text-royal-work { color: #4169e1; }
2052
2053.work-card-wrapper { 
2054  padding: 0 10px; 
2055  box-sizing: border-box; 
2056}
2057
2058.work-card {
2059  border-radius: 12px;
2060  overflow: hidden;
2061  background: #fff;
2062  position: relative;
2063  height: 350px;      /* fixed height for uniform cards */
2064}
2065
2066.work-card img {
2067  width: 100%;
2068  height: 100%;
2069  object-fit: cover;
2070  transition: transform 0.5s ease;
2071}
2072
2073.work-card:hover img {
2074  transform: scale(1.1);
2075}
2076
2077.overlay {
2078  position: absolute;
2079  bottom: 0; left: 0;
2080  width: 100%;
2081  background: rgba(0,0,0,0.6);
2082  color: #fff;
2083  padding: 20px;
2084  transition: all 0.4s ease;
2085}
2086
2087.overlay h5 {
2088  margin: 0;
2089  font-size: 1.4rem;
2090  font-weight: 600;
2091  color: #fff;
2092  text-align: center;
2093}
2094
2095.overlay-extra {
2096  max-height: 0;
2097  overflow: hidden;
2098  opacity: 0;
2099  transition: max-height 0.5s ease, opacity 0.5s ease;
2100  text-align: center;
2101  margin-top: 10px;
2102}
2103
2104.work-card:hover .overlay-extra {
2105  max-height: 200px;
2106  opacity: 1;
2107}
2108
2109.card-text-work { 
2110  font-size: 1rem; 
2111  line-height: 1.6; 
2112  color: #fff; 
2113}
2114
2115.btn-royal-work {
2116  background-color: #4169e1;
2117  color: #fff;
2118  border-radius: 35px;
2119  padding: 8px 20px;
2120  transition: background .3s ease, transform .3s ease;
2121}
2122.btn-royal-work:hover {
2123  background-color: #2a3daa;
2124  transform: translateY(-2px);
2125  color: #fff;
2126}
2127
2128.section-title-work {
2129  width: 100%;
2130  text-align: center;
2131  font-size: 3rem;
2132  font-weight: 700;
2133  padding-bottom: 20px;
2134  color: #4169e1;
2135}
2136
2137/* Title animation */
2138.section-title-work::after {
2139  content: "";
2140  position: absolute;
2141  bottom: 0;
2142  left: 50%;
2143  transform: translateX(-50%);
2144  width: 0;
2145  height: 10px;
2146  border-radius: 5px;
2147  background: linear-gradient(90deg, #4169e1, #87cefa, #4169e1);
2148  animation: border-expand 2s ease forwards infinite;
2149}
2150
2151@keyframes border-expand {
2152  0% { width: 50px; }
2153  50% { width: 150px; }
2154  100% { width: 50px; }
2155}
2156
2157/* ------ MOBILE RESPONSIVE FIX ------ */
2158
2159@media (max-width: 992px) {
2160  .work-card {
2161    height: 320px;
2162  }
2163}
2164
2165@media (max-width: 768px) {
2166  .work-card {
2167    height: 300px;
2168  }
2169  .slick-prev { left: -20px !important; }
2170  .slick-next { right: -10px !important; }
2171}
2172
2173@media (max-width: 576px) {
2174  .section-title-work { font-size: 2.2rem; }
2175  
2176  .work-card {
2177    height: 260px;
2178  }
2179
2180  .overlay h5 {
2181    font-size: 1.2rem;
2182  }
2183
2184  .slick-prev, .slick-next { 
2185    display: none !important;  /* hide arrows for mobile */
2186  }
2187
2188  .our-work-slider {
2189    padding: 0 10px; /* center slider */
2190  }
2191}
2192
2193/* Slick customization */
2194.slick-next:before, .slick-prev:before{
2195  font-size: 40px !important;
2196}
2197.slick-prev { left: -50px !important; }
2198.slick-next { right: -30px !important; }
2199
2200.slick-dots li button:before {
2201    font-family: 'slick';
2202    font-size: 20px !important;
2203}
2204.slick-dots li.slick-active button:before {
2205    opacity: 1;
2206    color: #D7B468 !important;
2207}
2208	.slick-slide{height:auto !important}
2209	.slick-dots{bottom:-45px !important}
2210</style>
2211
2212<!-- Slick CSS & JS -->
2213<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
2214<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>
2215<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
vendor: 2 bytes, line 2215
2215
2216<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
2216
2217
2218<!-- Initialize Slick Slider -->
2219<script>
2220$(document).ready(function(){
2221  $('.our-work-slider').slick({
2222    slidesToShow: 3,
2223    slidesToScroll: 1,
2224    infinite: true,
2225    dots: true,
2226    autoplay: true,
2227    autoplaySpeed: 2500,
2228    responsive: [
2229      { breakpoint: 992, settings: { slidesToShow: 2 } },
2230      { breakpoint: 576, settings: { slidesToShow: 1, arrows: false } }
2231    ]
2232  });
2233});
2234
2235</script>
2235
2236<div class="feature_area d-none">		
2237  <div class="container">
2238    <div class="row">
2239      <div class="col-md-12">
2240        <div class="text-center wow fadeInUp">
2241          <h2 class="section-title-work text-royal-work text-center mb-5">Our Impact</h2>
2242        </div>					
2243      </div>				
2244    </div>
2245    <div class="row">
2246      <!-- Feature 1 -->
2247      <div class="col-md-4 col-sm-6 col-12">
2248        <div class="em-feature" style="background-image:url(assets/images/impact/1.png);">
2249          <div class="feature_inner_box">
2250            <div class="feature_inner">
2251              <div class="em_feature-icon">
2252                <span><i class="fa fa-location-arrow"></i></span>
2253              </div>
2254              <div class="em-feature-title">
2255                <h2>Our Campaign</h2>
2256              </div>
2257            </div>
2258            <div class="em_content_text">
2259              <div class="em-feature-desc">
2260                <p>At Newark Youth London, we are more than just an organization – we are a force for positive transformation in the London Borough of Tower Hamlets. Since 1984, our roots have run deep, </p>
2261              </div>
2262            </div>
2263            <div class="f-readmore">
2264              <div class="feature_button">
2265                <a href="#">Read More<span><i class="fa fa-long-arrow-right"></i></span></a>
2266              </div>				
2267            </div>
2268          </div>
2269        </div>
2270      </div>
2271      <!-- Feature 2 -->
2272      <div class="col-md-4 col-sm-6 col-12">
2273        <div class="em-feature" style="background-image:url(assets/images/impact/2.png);">
2274          <div class="feature_inner_box">
2275            <div class="feature_inner">
2276              <div class="em_feature-icon">
2277                <span><i class="fa fa-volume-up"></i></span>
2278              </div>
2279              <div class="em-feature-title">
2280                <h2>Become A Member</h2>
2281              </div>
2282            </div>
2283            <div class="em_content_text">
2284              <div class="em-feature-desc">
2285                <p>At Newark Youth London, we are more than just an organization – we are a force for positive transformation in the London Borough of Tower Hamlets. Since 1984, our roots have run deep, </p>
2286              </div>
2287            </div>
2288            <div class="f-readmore">
2289              <div class="feature_button">
2290                <a href="#">Read More<span><i class="fa fa-long-arrow-right"></i></span></a>
2291              </div>				
2292            </div>
2293          </div>
2294        </div>
2295      </div>
2296      <!-- Feature 3 -->
2297      <div class="col-md-4 col-sm-6 col-12">
2298        <div class="em-feature" style="background-image:url(assets/images/impact/3.png);">
2299          <div class="feature_inner_box">
2300            <div class="feature_inner">
2301              <div class="em_feature-icon">
2302                <span><i class="fa fa-mobile-phone"></i></span>
2303              </div>
2304              <div class="em-feature-title">
2305                <h2>Energy Policy</h2>
2306              </div>
2307            </div>
2308            <div class="em_content_text">
2309              <div class="em-feature-desc">
2310                <p>At Newark Youth London, we are more than just an organization – we are a force for positive transformation in the London Borough of Tower Hamlets. Since 1984, our roots have run deep, </p>
2311              </div>
2312            </div>
2313            <div class="f-readmore">
2314              <div class="feature_button">
2315                <a href="#">Read More<span><i class="fa fa-long-arrow-right"></i></span></a>
2316              </div>				
2317            </div>
2318          </div>
2319        </div>
2320      </div>										
2321    </div>
2322  </div>	
2323</div>
2324
2325<style>
2326	*, ::after, ::before{position:relative}
2327.feature_area {
2328  padding: 81px 0 100px;
2329}
2330
2331.em-feature {
2332  position: relative;
2333  transition: all 0.5s ease;
2334  border-radius: 10px;
2335  overflow: hidden;
2336  margin-bottom: 30px;
2337}
2338
2339.em-feature::before {
2340  position: absolute;
2341  inset: 0;
2342  background: rgba(0,0,0,.7);
2343  content: "";
2344}
2345
2346.feature_inner_box {
2347  padding: 30px;
2348  background: linear-gradient(180deg, #ffffff, #4169e1);
2349  transition: all 0.5s ease;
2350  position: relative;
2351  box-shadow: 0px 10px 40px 0px rgba(148,146,245,0.2);
2352  border-radius: 10px;
2353}
2354
2355.em-feature:hover .feature_inner_box {
2356  background: transparent;
2357}
2358
2359.em-feature:hover {
2360  margin-top: -10px;
2361}
2362
2363.em_feature-icon {
2364  display: inline-block;
2365  font-size: 21px;
2366  height: 45px;
2367  width: 45px;
2368  line-height: 46px;
2369  border-radius: 50%;
2370  text-align: center;
2371  background: #f9f9f9;
2372  color: #333;
2373  float: left;
2374  margin-right: 20px;
2375  transition: .5s;
2376}
2377
2378.em_content_text {
2379  padding-top: 10px;
2380}
2381
2382.em-feature-title h2 {
2383  font-size: 18px;
2384  font-weight: 600;
2385  text-transform: capitalize;
2386  transition: all 0.5s ease;
2387}
2388
2389.feature_inner {
2390  overflow: hidden;
2391}
2392
2393.f-readmore {
2394  padding-top: 7px;
2395}
2396
2397.feature_button a {
2398  color: #333;
2399  display: inline-block;
2400  font-weight: 600;
2401}
2402
2403.feature_button a span i {
2404  margin-left: 10px;
2405  font-size: 11px;
2406}
2407
2408.em-feature:hover .em_feature-icon {
2409  background: #D7B468;
2410  color: #fff;
2411}
2412
2413.em-feature:hover .feature_button a,
2414.em-feature:hover h2,
2415.em-feature:hover .em-feature-desc {
2416  color: #fff;
2417}
2418
2419/* Mobile Responsive */
2420@media (max-width: 767px) {
2421  .em-feature {
2422    margin-bottom: 20px;
2423  }
2424.feature_area {
2425    padding: 40px 0 30px !important;
2426}
2427  .feature_inner_box {
2428    text-align: center;
2429  }
2430
2431  .em_feature-icon {
2432    float: none;
2433    margin: 0 auto 15px;
2434    display: block;
2435  }
2436
2437  .em-feature-title h2 {
2438    font-size: 22px;
2439  }
2440
2441  .em_content_text p {
2442    font-size: 16px;
2443  }
2444
2445  .feature_button {
2446    text-align: center;
2447  }
2448}
2449</style>
2450<!-- Video Section -->
2451<section class="video-one">
2452  <div class="video-one__bg" style="background-image:url('https://newark.org.uk/assets/images/background/home_overlay.png');"></div>
2453  <div class="container">
2454    <div class="video-one__inner">
2455      <div class="video-one__video-link">
2456        <a href="https://www.youtube.com/embed/7PF7yu_xcuI?si=xU1AzpNB7Lf6GV8q" class="video-popup">
2457          <div class="video-one__video-icon">
2458            <span class="fa fa-play"></span>
2459          </div>
2460        </a>
2461      </div>
2462      <h2 class="video-one__video-title" style="font-size:25px">
2463       Since 1984, Newark has grown into a beacon of hope - driving positive change for young people and adults alike.
2464      </h2>
2465    </div>
2466  </div>
2467</section>
2468
2469<style>
2470
2471</style>
2472
2473<!-- Magnific Popup CSS & JS -->
2474<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
2475<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
2475
2476
2477<script>
2478$(document).ready(function() {
2479  $('.video-popup').magnificPopup({
2480    type: 'iframe',
2481    iframe: {
2482      patterns: {
2483        youtube: {
2484          index: 'youtube.com/',
2485          id: function(url) {
2486            var m = url.match(/[\\?\\&]v=([^\\?\\&]+)/);
2487            if (!m || !m[1]) return null;
2488            return m[1];
2489          },
2490          src: 'https://www.youtube.com/embed/7PF7yu_xcuI?si=xU1AzpNB7Lf6GV8q'
2491        }
2492      }
2493    }
2494  });
2495});
2496</script>
2496
2497<!-- Support Us Section -->
2498<section class="support-us py-5">
2499  <div class="container">
2500    <div class="row align-items-center g-4">
2501
2502      <!-- Left Content -->
2503      <div class="col-lg-6 col-md-12">
2504        <h2 class="section-title text-royal mb-4">Support Us</h2>
2505        <p class="section-text">
2506          Your support helps us create meaningful opportunities for young people 
2507          and build stronger, more resilient communities. By contributing, you 
2508          enable us to offer safe spaces, training, and resources that empower 
2509          individuals to thrive.
2510        </p>
2511        <p class="section-text">
2512          Whether through donations, volunteering, or spreading the word, your 
2513          involvement makes a real difference. Join us in shaping a brighter 
2514          future for the next generation.
2515        </p>
2516        <!-- Buttons -->
2517        <a href="support-us/donate" class="btn btn-royal  ">Donate Now</a>
2518        <a href="support-us/donate" class="btn btn-royal-outline">Support a Campaign</a>
2519      </div>
2520
2521      <!-- Right Image -->
2522      <div class="col-lg-6 col-md-12">
2523        <img src="assets/images/background/support1.png" alt="Support Us" class="img-fluid rounded ">
2524      </div>
2525
2526    </div>
2527
2528    <!-- Counter Section -->
2529    <div class="grid-container" style="display:none">
2530      <div class="grid">
2531        <div class="card" data-target="1984">
2532          <div class="nuLabel">Since</div>
2533          <div class="number"><span class="count-number">0</span></div>
2534        </div>
2535        <div class="card" data-target="40">
2536          <div class="nuLabel">Years Running</div>
2537          <div class="number"><span class="count-number">0</span><span class="suffix">+</span></div>
2538        </div>
2539        <div class="card" data-target="1600">
2540          <div class="nuLabel">Youth Mentored</div>
2541          <div class="number"><span class="count-number">0</span><span class="suffix">+</span></div>
2542        </div>
2543        <div class="card" data-target="1200">
2544          <div class="nuLabel">Programs</div>
2545          <div class="number"><span class="count-number">0</span><span class="suffix">+</span></div>
2546        </div>
2547      </div>
2548    </div>
2549
2550  </div>
2551</section>
2552
2553<style>
2554  .support-us {
2555    background: linear-gradient(135deg, #4169e1, #87cefa);
2556    padding: 80px 0;
2557  }
2558
2559  .section-title {
2560    font-size: 4rem;
2561    font-weight: 700;
2562  }
2563
2564  .text-royal { color: #fff; }
2565
2566  .section-text {
2567    font-size: 1rem;
2568    line-height: 1.7;
2569    color: #f8faff;
2570    margin-bottom: 1rem;
2571  }
2572
2573  /* Buttons */
2574  .btn-royal {
2575    background-color: #fff;
2576    color: #4169e1;
2577    border-radius: 35px;
2578    padding: 10px 30px;
2579    font-weight: 600;
2580    text-decoration: none;
2581    display: inline-block;
2582    transition: all 0.3s ease;
2583  }
2584  .btn-royal:hover {
2585    background-color: #e0e7ff;
2586    color: #2a3daa;
2587    transform: translateY(-2px);
2588  }
2589
2590  .btn-royal-outline {
2591    background-color: transparent;
2592    color: #fff;
2593    border: 2px solid #fff;
2594    border-radius: 35px;
2595    padding: 10px 30px;
2596    font-weight: 600;
2597    text-decoration: none;
2598    display: inline-block;
2599    transition: all 0.3s ease;
2600  }
2601  .btn-royal-outline:hover {
2602    background-color: #fff;
2603    color: #D7B468;
2604    transform: translateY(-2px);
2605  }
2606
2607  .support-us img {
2608    width: 100%;
2609    height: auto;
2610    object-fit: cover;
2611  }
2612
2613  /* Counter Section */
2614  .grid-container {
2615    margin-top: 40px;
2616    display: flex;
2617    justify-content: center;
2618    padding-top: 30px;
2619  }
2620
2621  .grid {
2622    display: grid;
2623    gap: 18px;
2624    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
2625    width: 100%;
2626    max-width: 1000px;
2627  }
2628
2629  .card {
2630   /* background: linear-gradient(135deg, #ffc107, #156293);
2631    border: 1px solid rgba(255, 255, 255, 0.04);
2632    padding: 20px;
2633    border-radius: 12px;
2634    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.6);
2635    text-align: center;
2636	  */
2637	  
2638  }
2639
2640  .nuLabel {
2641    font-size: 1.5rem !important;
2642    color: #fff;
2643  }
2644
2645  .number {
2646    font-weight: 700;
2647    font-size: 2.5rem;
2648    color: #fff;
2649  }
2650
2651  .suffix {
2652    font-size: 1.5rem;
2653    font-weight: 700;
2654    margin-left: 2px;
2655  }
2656
2657  /* Responsive adjustments */
2658  @media (max-width: 991px) {
2659    .section-title { font-size: 2.8rem; text-align: center; }
2660    .section-text { text-align: center; }
2661    .btn-royal, .btn-royal-outline { display: block; margin: 0 auto 10px; }
2662  }
2663
2664  @media (max-width: 768px) {
2665    .grid { grid-template-columns: repeat(2, 1fr); }
2666  }
2667
2668  @media (max-width: 575px) {
2669    .section-title { font-size: 2rem; }
2670    .section-text { font-size: 0.9rem; }
2671    .number { font-size: 1.8rem; }
2672	  .grid-container{margin-top:20px;}
2673	  .nuLabel {
2674    font-size: 1.5rem !important;
2675    color: #fff;
2676  }
2677  }
2678
2679</style>
2680
2681<script>
2682  document.addEventListener('DOMContentLoaded', () => {
2683    const cards = document.querySelectorAll('.cardsl');
2684    const observer = new IntersectionObserver((entries, obs) => {
2685      entries.forEach(entry => {
2686        if (entry.isIntersecting) {
2687          startCounting(entry.target);
2688          obs.unobserve(entry.target);
2689        }
2690      });
2691    }, { threshold: 0.5 });
2692
2693    cards.forEach(card => observer.observe(card));
2694  });
2695
2696  function startCounting(cardElement) {
2697    const countElement = cardElement.querySelector('.count-number');
2698    const target = parseInt(cardElement.getAttribute('data-target'));
2699    let current = 0;
2700    const duration = 2000;
2701    const step = target / (duration / 20);
2702
2703    function update() {
2704      current += step;
2705      if (current < target) {
2706        countElement.textContent = Math.ceil(current);
2707        setTimeout(update, 20);
2708      } else {
2709        countElement.textContent = target;
2710      }
2711    }
2712    update();
2713  }
2714</script>
2714
2715<style>
2716
2717  /* Cookie Bar */
2718  .cookie-bar {
2719	border:2px dashed royalblue;
2720    position: fixed;
2721    bottom: 20px;
2722    left: 50%;
2723    transform: translateX(-50%);
2724    width: 60%;
2725    max-width: 700px;
2726    background: #fff;
2727    box-shadow: 0 0 12px rgba(0,0,0,0.1);
2728    border-radius: 12px;
2729    padding: 20px;
2730    text-align: left;
2731    z-index: 10000;
2732    transition: all 0.5s ease;
2733    opacity: 1;
2734  }
2735
2736  .cookie-bar.hide {
2737    transform: translateX(-50%) translateY(100px);
2738    opacity: 0;
2739    pointer-events: none;
2740  }
2741
2742  .cookie-bar p {
2743    margin: 0 0 15px 0;
2744    font-size: 14px;
2745    color: #444;
2746    line-height: 1.5;
2747  }
2748
2749  .cookie-bar .actions {
2750    display: flex;
2751    gap: 10px;
2752    justify-content: flex-end;
2753  }
2754
2755  /* Buttons */
2756  .cookie-btn {
2757    border: none;
2758    cursor: pointer;
2759    border-radius: 8px;
2760    font-size: 14px;
2761    padding: 10px 18px;
2762    transition: 0.3s ease;
2763  }
2764
2765  .btn-preferences {
2766    background: #e9ecef;
2767    color: #333;
2768  }
2769
2770  .btn-preferences:hover {
2771    background: #d6d8da;
2772  }
2773
2774  .btn-accept {
2775    background: #007bff;
2776    color: white;
2777  }
2778
2779  .btn-accept:hover {
2780    background: #0056b3;
2781  }
2782
2783  /* Modal Overlay */
2784  .cookie-modal-overlay {
2785    position: fixed;
2786    inset: 0;
2787    background: rgba(0,0,0,0.5);
2788    display: none;
2789    justify-content: center;
2790    align-items: center;
2791    z-index: 10001;
2792  }
2793
2794  .cookie-modal-overlay.active {
2795    display: flex;
2796  }
2797
2798  /* Modal */
2799  .cookie-modal {
2800    background: #fff;
2801    width: 90%;
2802    max-width: 600px;
2803    max-height: 80vh;
2804    border-radius: 14px;
2805    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
2806    padding: 25px;
2807    overflow-y: auto;
2808    animation: slideUp 0.5s ease forwards;
2809  }
2810
2811  @keyframes slideUp {
2812    from { transform: translateY(100%); opacity: 0; }
2813    to { transform: translateY(0); opacity: 1; }
2814  }
2815
2816  .cookie-modal h2 {
2817    margin-top: 0;
2818    font-size: 20px;
2819    color: #222;
2820  }
2821
2822  .cookie-modal p {
2823    font-size: 14px;
2824    color: #555;
2825    margin-bottom: 20px;
2826  }
2827
2828  .cookie-category {
2829    border: 1px solid #eee;
2830    border-radius: 10px;
2831    padding: 15px;
2832    margin-bottom: 10px;
2833  }
2834
2835  .cookie-category h4 {
2836    display: flex;
2837    justify-content: space-between;
2838    align-items: center;
2839    font-size: 15px;
2840    color: #222;
2841    margin: 0;
2842  }
2843
2844  .cookie-category p {
2845    font-size: 13px;
2846    color: #555;
2847    margin-top: 8px;
2848  }
2849
2850  /* Toggle Switch */
2851  .switch {
2852    position: relative;
2853    display: inline-block;
2854    width: 46px;
2855    height: 24px;
2856  }
2857
2858  .switch input {
2859    opacity: 0;
2860    width: 0;
2861    height: 0;
2862  }
2863
2864  .sliderx {
2865    position: absolute;
2866    cursor: pointer;
2867    top: 0; left: 0;
2868    right: 0; bottom: 0;
2869    background-color: #ccc;
2870    border-radius: 24px;
2871    transition: 0.4s;
2872  }
2873
2874  .sliderx:before {
2875    position: absolute;
2876    content: "";
2877    height: 18px;
2878    width: 18px;
2879    left: 3px;
2880    bottom: 3px;
2881    background-color: white;
2882    border-radius: 50%;
2883    transition: 0.4s;
2884  }
2885
2886  input:checked + .sliderx {
2887    background-color: #28a745;
2888  }
2889
2890  input:checked + .sliderx:before {
2891    transform: translateX(22px);
2892  }
2893
2894  /* Modal Buttons */
2895  .modal-actions {
2896    text-align: right;
2897    margin-top: 20px;
2898  }
2899
2900  .modal-actions button {
2901    margin-left: 10px;
2902  }
2903
2904  .btn-save {
2905    background: #007bff;
2906    color: #fff;
2907  }
2908
2909  .btn-save:hover {
2910    background: #0056b3;
2911  }
2912
2913
2914
2915
2916
2917/* Responsive Design for Mobile Devices */
2918@media (max-width: 768px) {
2919  .cookie-bar {
2920    width: 95%;
2921    bottom: 10px;
2922    padding: 15px;
2923  }
2924
2925  .cookie-bar p {
2926    font-size: 13px;
2927  }
2928
2929  .cookie-btn {
2930    font-size: 13px;
2931    padding: 8px 14px;
2932  }
2933
2934  .cookie-modal {
2935    width: 95%;
2936    padding: 20px;
2937  }
2938
2939  .cookie-modal h2 {
2940    font-size: 18px;
2941  }
2942
2943  .cookie-modal p,
2944  .cookie-category p {
2945    font-size: 13px;
2946  }
2947
2948  .cookie-category h4 {
2949    font-size: 14px;
2950  }
2951
2952  .modal-actions button {
2953    font-size: 13px;
2954    padding: 8px 14px;
2955  }
2956}
2957
2958</style>
2959
2960<!-- Cookie Bar -->
2961<div class="cookie-bar" id="cookieBar">
2962  <p>
2963    We use essential cookies to make our site work. With your consent, we may also use non-essential cookies to improve user experience and analyze website traffic. By clicking “Accept,” you agree to our website's cookie use as described 
2963in our <a href="https://newark.org.uk/cookie-policy" style="color:#007bff;text-decoration:none;">Cookie Policy</a>.
2964  </p>
2965  <div class="actions">
2966	  <button class="cookie-btn btn-preferences" id="rejectAll">Reject All</button>
2967    <button class="cookie-btn btn-preferences d-none" id="openPrefs">Preferences</button>
2968    <button class="cookie-btn btn-accept" id="acceptCookies">I accept</button>
2969  </div>
2970</div>
2971
2972<!-- Cookie Preferences Modal -->
2973<div class="cookie-modal-overlay" id="cookieModal">
2974  <div class="cookie-modal">
2975    <h2>Cookie Preferences</h2>
2976    <p>You can choose which types of cookies to allow. Your preferences will be saved for 12 months under <b>YOUTH_LONDON_COOKIE_CONSENT</b>.</p>
2977
2978    <div class="cookie-category">
2979      <h4>Essential Cookies 
2980        <label class="switch"><input type="checkbox" checked disabled><span class="sliderx"></span></label>
2981      </h4>
2982      <p>These cookies are necessary for basic site functionality and cannot be disabled.</p>
2983    </div>
2984
2985    <div class="cookie-category">
2986      <h4>Performance Cookies
2987        <label class="switch"><input type="checkbox" id="performance"><span class="sliderx"></span></label>
2988      </h4>
2989      <p>Help us improve website performance and functionality.</p>
2990    </div>
2991
2992    <div class="cookie-category">
2993      <h4>Analytics Cookies
2994        <label class="switch"><input type="checkbox" id="analytics"><span class="sliderx"></span></label>
2995      </h4>
2996      <p>Used to understand how visitors interact with our site.</p>
2997    </div>
2998
2999    <div class="cookie-category">
3000      <h4>Advertising Cookies
3001        <label class="switch"><input type="checkbox" id="advertising"><span class="sliderx"></span></label>
3002      </h4>
3003      <p>Used to personalize ads and track marketing effectiveness.</p>
3004    </div>
3005
3006    <div class="cookie-category">
3007      <h4>Social Media Cookies
3008        <label class="switch"><input type="checkbox" id="social"><span class="sliderx"></span></label>
3009      </h4>
3010      <p>Enable content sharing on social media platforms.</p>
3011    </div>
3012
3013    <div class="modal-actions">
3014      <button class="cookie-btn" id="closeModal">Cancel</button>
3015      <button class="cookie-btn btn-save" id="savePrefs">Save Preferences</button>
3016    </div>
3017  </div>
3018</div>
3019
3020<script>
3021  const bar = document.getElementById("cookieBar");
3022  const modal = document.getElementById("cookieModal");
3023  const TERM_KEY = "YOUTH_LONDON_COOKIE_CONSENT";
3024
3025// hide bar for minimal setting
3026  // Accept all
3027  document.getElementById("rejectAll").onclick = () => {
3028    const data = {
3029      essential: true,
3030      performance: true,
3031      analytics: true,
3032      advertising: true,
3033      social: true,
3034      consent_date: new Date().toISOString(),
3035      duration_months: 12
3036    };
3037    localStorage.setItem(TERM_KEY, JSON.stringify(data));
3038    hideBarSmoothly();
3039  };
3040	
3041	
3042  // Show bar only first time
3043  if (localStorage.getItem(TERM_KEY)) {
3044    bar.style.display = "none";
3045  }
3046
3047  // Open modal
3048  document.getElementById("openPrefs").onclick = () => modal.classList.add("active");
3049  document.getElementById("closeModal").onclick = () => modal.classList.remove("active");
3050
3051  // Smooth hide function
3052  function hideBarSmoothly() {
3053    bar.classList.add("hide");
3054    setTimeout(() => {
3055      bar.style.display = "none";
3056    }, 600);
3057  }
3058
3059  // Accept all
3060  document.getElementById("acceptCookies").onclick = () => {
3061    const data = {
3062      essential: true,
3063      performance: true,
3064      analytics: true,
3065      advertising: true,
3066      social: true,
3067      consent_date: new Date().toISOString(),
3068      duration_months: 12
3069    };
3070    localStorage.setItem(TERM_KEY, JSON.stringify(data));
3071    hideBarSmoothly();
3072  };
3073
3074  // Save preferences
3075  document.getElementById("savePrefs").onclick = () => {
3076    const data = {
3077      essential: true,
3078      performance: document.getElementById("performance").checked,
3079      analytics: document.getElementById("analytics").checked,
3080      advertising: document.getElementById("advertising").checked,
3081      social: document.getElementById("social").checked,
3082      consent_date: new Date().toISOString(),
3083      duration_months: 12
3084    };
3085    localStorage.setItem(TERM_KEY, JSON.stringify(data));
3086    modal.classList.remove("active");
3087    hideBarSmoothly();
3088  };
3089</script>
3089<style>
3090/* ===============================
3091   FOOTER STYLING
3092================================ */
3093footer {
3094  background: #002262; /* Royal Blue */
3095  color: #ffffff;
3096  font-family: "Montserrat", sans-serif;
3097}
3098	a{
3099		text-decoration:none;
3100	}
3101footer h5 {
3102  font-size: 1.1rem;
3103  font-weight: 700;
3104  margin-bottom: 1rem;
3105  text-transform: uppercase;
3106  color: #ffffff;
3107  position: relative;
3108  padding-bottom: 6px;
3109  overflow: hidden;
3110}
3111
3112footer h5::after {
3113  content: "";
3114  position: absolute;
3115  bottom: 0;
3116  left: 0;
3117  width: 100px;
3118  height: 2px;
3119  background: linear-gradient(to right, #ffffff 30%, rgba(255,255,255,0) 70%);
3120  background-size: 200% 100%;
3121  animation: slide-border 2s linear infinite;
3122}
3123
3124@keyframes slide-border {
3125  0% { background-position: 0 0; }
3126  100% { background-position: -200% 0; }
3127}
3128
3129.footer-link {
3130  color: #fff;
3131  text-decoration: none;
3132  display: inline-block;
3133  margin: 2px 0;
3134  font-size: 18px;
3135  transition: all 0.3s ease;
3136}
3137
3138.footer-link:hover {
3139  color: #fff;
3140}
3141
3142.footer-icon {
3143  display: inline-flex;
3144  align-items: center;
3145  justify-content: center;
3146  width: 42px;
3147  height: 42px;
3148  margin: 0 6px 6px 0;
3149  border-radius: 50%;
3150  font-size: 18px;
3151  background-color: #ffffff;
3152  color: #002262;
3153  transition: all 0.3s ease;
3154}
3155
3156.footer-icon:hover {
3157  background-color: #002262;
3158  color: #ffffff;
3159  transform: scale(1.15);
3160}
3161
3162footer hr {
3163  border-color: rgba(255, 255, 255, 0.3);
3164}
3165
3166footer p {
3167  font-size: 17px;
3168  margin-bottom: 0.5rem;
3169  color: #ffffff;
3170}
3171
3172/* WhatsApp Fixed Button */
3173.whatsapp-btn {
3174  position: fixed;
3175  bottom: 90px;
3176  right: 20px;
3177  z-index: 1000;
3178}
3179
3180.whatsapp-img {
3181  width: 55px;
3182  border-radius: 50%;
3183  border: 2px solid #ffffff;
3184  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
3185  transition: transform 0.3s ease, box-shadow 0.3s ease;
3186  animation: pulse 2.5s infinite;
3187}
3188
3189.whatsapp-btn:hover .whatsapp-img {
3190  transform: scale(1.1);
3191  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
3192}
3193
3194@keyframes pulse {
3195  0%, 100% { transform: scale(1); }
3196  50% { transform: scale(1.15); }
3197}
3198
3199
3200
3201.link { text-decoration:none; }
3202
3203/* ===============================
3204   RESPONSIVE FOOTER
3205================================ */
3206@media (max-width: 991.98px) {
3207  footer .row.text-center.text-md-start {
3208    text-align: center;
3209  }
3210  
3211  footer .col-md-3 {
3212    margin-bottom: 2rem;
3213  }
3214
3215  footer h5 {
3216    font-size: 1rem;
3217  }
3218
3219  .footer-icon {
3220    margin: 6px 3px 6px 3px;
3221  }
3222
3223  footer p, .footer-link {
3224    font-size: 18px;
3225  }
3226	  footer h5::after {
3227    width: 100%; /* smaller underline for mobile */
3228	  display:none !important;
3229  }
3230
3231}
3232
3233@media (max-width: 575.98px) {
3234  footer .container-fluid {
3235    padding: 40px 15px 20px 15px;
3236  }
3237
3238
3239  .whatsapp-img {
3240    width: 50px;
3241  }
3242
3243	.footertitle{
3244		text-align:center;
3245		color:#fff !important;
3246	}
3247}
3248/* Mobile responsive */
3249@media (max-width: 767px) {
3250    #backToTop {
3251        width: 40px;       /* smaller circle */
3252        height: 40px;
3253        font-size: 16px;
3254        line-height: 40px;
3255        bottom: 10px;
3256        right: 10px;
3257    }
3258}
3259</style>
3260
3261
3262<!-- Footer Start -->
3263<footer class="text-white" style="background: linear-gradient(0deg, #002262, #0a40a4, #002262);">
3264  <div class="container-fluid" style="padding:50px 5% 10px 5%">
3265    
3266    <div class="row text-center text-md-start">
3267
3268      <!-- About Section -->
3269      <div class="col-md-4 mb-4">
3270        <div class="text-center mb-3">
3271          <img src="https://newark.org.uk/assets/images/logo/logo.png" style="height:100px" alt="Logo">
3272        </div>
3273			<div class="pb-2 d-flex gap-2" style="margin-top:10px; width:100%;display:flex;justify-content:center">
3274			  <a href="https://play.google.com/store/apps/details?id=uk.co.signsoft.newarkyouthlondon" target="_blank">
3275				<img src="https://newark.org.uk/assets/images/icons/googlePlay.png" class="img img-fluid mt-1" style="height:;" alt="">
3276			  </a>
3277			  <a href="https://apps.apple.com/us/app/newark-youth-london/id6758913891" target="_blank">
3278				<img src="https://newark.org.uk/assets/images/icons/apple.png" class="img img-fluid mt-1" style="height:;" alt="">
3279			  </a>
3280			</div>
3281      </div>
3282
3283
3284<!-- Quick Links Section -->
3285<div class="col-md-4 mb-4">
3286<div class="container">
3287    <div class="row">
3288        <div class="col-md-6 mb-1 p-1 col-6">
3289            <img src="https://newark.org.uk/assets/images/logo/11.jpg" class="img-fluid rounded">
3290        </div>
3291        <div class="col-md-6 mb-1 p-1 col-6">
3292            <img src="https://newark.org.uk/assets/images/logo/22.jpg" class="img-fluid rounded">
3293        </div>
3294        <div class="col-md-6 mb-1 p-1 col-6">
3295            <img src="https://newark.org.uk/assets/images/logo/33.jpg" class="img-fluid rounded">
3296        </div>
3297        <div class="col-md-6 mb-1 p-1 col-6">
3298            <img src="https://newark.org.uk/assets/images/logo/44.jpg" class="img-fluid rounded">
3299        </div>
3300
3301    </div>
3302</div>
3303</div>
3304
3305
3306      <!-- Contact Section -->
3307      <div class="col-md-4 mb-2">
3308        <p style="color:#fff;margin:0"><i class="fas fa-map-marker-alt"></i> Unit S2, Whitechapel Centre, 85 Myrdle Street, London E1 1HL</p>
3309        <p style="margin-bottom:0">
3310          <a class="footer-link" style="color:#fff" href="mailto:[email protected]">
3311            <i class="fas fa-envelope"></i> [email protected]
3312          </a>
3313        </p>
3314
3315        <p style="margin-bottom:0">
3316            <a class="footer-link" style="color:#fff" href="tel:+4407 392 2121">
3317              <i class="fas fa-phone "></i> 0207 392 2121
3318            </a>
3319        </p>
3320        <p >
3321             <i class="fas fa-dot-circle" style="color:#fff;"></i> Charity Reg: 1112289
3322        </p>
3323		  <div class="">
3324			  <a href="https://newark.org.uk/privacy-policy" style="font-size:16px;color:#fff" class="">
3325				<i class="fa fa-caret-right"></i> Privacy Policy
3326			  </a>
3327			  <span style="padding:0 15px"></span>
3328			  <a href="https://newark.org.uk/cookie-policy" style="font-size:16px;color:#fff" class="">
3329				<i class="fa fa-caret-right"></i> Cookie Policy
3330			  </a>
3331		  </div>
3332            <div class="text- mt-2">
3333              <a href="https://www.facebook.com/newarkyl/" target="_blank" class="footer-icon">
3334                <i class="fab fa-facebook-f"></i>
3335              </a>
3336              <a href="https://www.instagram.com/newarkyouthldn?igsh=MXRiODk2ZXN3YTVqcw==" target="_blank" class="footer-icon">
3337                <i class="fab fa-instagram"></i>
3338              </a>
3339              <a href="https://www.youtube.com/@NewarkYL" target="_blank" class="footer-icon">
3340                <i class="fab fa-youtube"></i>
3341              </a>
3342              <a href="https://www.tiktok.com/@newark.youth.lond" target="_blank" class="footer-icon">
3343                <i class="fab fa-tiktok"></i>
3344              </a>
3345            </div>
3346
3347
3348      </div>
3349
3350    </div>
3351
3352    <hr style="border-color: #fff;">
3353
3354    <!-- Footer Bottom -->
3355    <div class="row align-items-center">
3356      <div class="col-md-12 text-center">
3357      <div class="text-center">
3358		  <p class="mb-0 copywrite">© 2026 Newark Youth London</p>
3359      </div>
3360    </div>
3361  </div>
3362	</div>
3363</footer>
3364
3365<!-- WhatsApp Fixed Button 
3366<a href="https://wa.me/" target="_blank" class="whatsapp-btn">
3367  <img src="https://newark.org.uk/assets/images/icons/whatsapp2.png" class="whatsapp-img" alt="WhatsApp">
3368</a>-->
3369
3370<a href="#" id="scroll_top" class="scrolltop hideOnApp" title="Back to top" style="display: none;">
3371  <!-- SVG circular progress -->
3372  <svg class="progress-ring" width="56" height="56" viewBox="0 0 56 56" aria-hidden="true">
3373    <circle class="ring-bg" cx="28" cy="28" r="24"></circle>
3374    <circle class="ring-progress" cx="28" cy="28" r="20.66568047337278" style="stroke-dasharray: 129.846, 129.846; stroke-dashoffset: 72.1582;"></circle>
3375  </svg>
3376  <i class="fa fa-arrow-up icon" aria-hidden="true"></i>
3377</a>
3378
3379<style>
3380.scrolltop {
3381    position: fixed;
3382    right: 10px;
3383    bottom: 50px;
3384    width: 56px;
3385    height: 56px;
3386    border-radius: 50%;
3387    background: #4169e1;
3388    color: #fff;
3389    z-index: 80;
3390    text-decoration: none;
3391    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
3392    display: none;
3393    align-items: center;
3394    justify-content: center;
3395    overflow: hidden; /* 🔥 important */
3396}
3397
3398.progress-ring {
3399    position: absolute;
3400    top: 0;
3401    left: 0;
3402    transform: rotate(-90deg);
3403    pointer-events: none;
3404}
3405
3406.ring-progress {
3407    fill: none;
3408    stroke: #ffc107;
3409    stroke-width: 4;
3410    stroke-linecap: round;
3411    transition: stroke-dashoffset 0.2s linear;
3412}
3413
3414.scrolltop .icon {
3415    position: relative;
3416    z-index: 2;
3417}
3418
3419</style>
3420<script>
3421document.addEventListener("DOMContentLoaded", function () {
3422    const scrollBtn = document.getElementById("scroll_top");
3423    const progressCircle = scrollBtn.querySelector(".ring-progress");
3424
3425    const radius = progressCircle.r.baseVal.value;
3426    const circumference = 2 * Math.PI * radius;
3427
3428    progressCircle.style.strokeDasharray = circumference;
3429    progressCircle.style.strokeDashoffset = circumference;
3430
3431    function updateProgress() {
3432        const scrollTop = window.scrollY;
3433        const docHeight = document.documentElement.scrollHeight - window.innerHeight;
3434        const progress = scrollTop / docHeight;
3435
3436        progressCircle.style.strokeDashoffset =
3437            circumference - progress * circumference;
3438
3439        scrollBtn.style.display = scrollTop > 50 ? "flex" : "none";
3440    }
3441
3442    window.addEventListener("scroll", updateProgress);
3443
3444    scrollBtn.addEventListener("click", function (e) {
3445        e.preventDefault();
3446        window.scrollTo({ top: 0, behavior: "smooth" });
3447    });
3448});
3449</script>
3449
3450
3451
3452
3453
3454
3455
3456
3457<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
3457
3458<!-- WOW.js -->
3459
3460
3461<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
3461
3462
3463<script src="https://newark.org.uk/assets/js/jquery.waypoints.js"></script>
vendor: 1 bytes, line 3463
3463
3464<script src="https://newark.org.uk/assets/js/script.js"></script>
vendor: 1 bytes, line 3464
3464
3465<script src="https://newark.org.uk/assets/js/owl.js"></script>
3465
3466<!-- Google reCAPTCHA v3 script -->
vendor: 61 bytes, lines 3466-3467
3466
3467<script src="https://www.google.com/recaptcha/api.js?render=
34676LcwLQEVAAAAABvQvZ6J5sTC8K7scFUJXyNkjpLw
vendor: 13 bytes, lines 3467-3468
3467"></script>
3468
3469<script>
3470  new WOW().init();
3471	    // testimonial-slider
3472    $('.testimonial-slider').owlCarousel({
3473        loop: true,
3474        margin: 10,
3475        nav: false,
3476        dots: true,
3477        autoplay: true,
3478        responsive: {
3479            0: {
3480                items: 1
3481            },
3482            600: {
3483                items: 2
3484            },
3485            1000: {
3486                items: 4
3487            }
3488        }
3489    });
3490
3491	
3492	// blog post
3493$('.blog_post').owlCarousel({
3494    loop: true,
3495    margin: 10,
3496    nav: false,
3497    dots: false,
3498    autoplay: true,
3499    stagePadding: 30, // Pixel value, 30% হলে window width এর 30%
3500    responsive: {
3501        0: {
3502            items: 1,
3503            stagePadding: 30 // small screens
3504        },
3505        600: {
3506            items: 2,
3507            stagePadding: 60 // adjust for bigger screen
3508        },
3509        1000: {
3510            items: 4,
3511            stagePadding: 200 // adjust for large screen
3512        }
3513    }
3514});
3515
3516</script>
3516
3517
3518<script>
3519  // Switch panels on hover
3520  document.querySelectorAll('.mega-menu-categories button').forEach(btn => {
3521    btn.addEventListener('mouseenter', () => {
3522      const parent = btn.closest('.mega-menu');
3523      parent.querySelectorAll('.mega-menu-categories button').forEach(b => b.classList.remove('active'));
3524      parent.querySelectorAll('.content-panel').forEach(panel => panel.classList.remove('active'));
3525      btn.classList.add('active');
3526      parent.querySelector('#' + btn.dataset.target).classList.add('active');
3527    });
3528  });
3529  
3530 
3531    // update title 
3532    const currentPath = window.location.pathname;
3533    let currentPageName = currentPath.split("/").pop();
3534    
3535    // if empty, default to home
3536    if (!currentPageName || currentPageName === "index.html") {
3537      currentPageName = "Home";
3538    } else {
3539      currentPageName = currentPageName.split(".")[0];
3540    }
3541    
3542    // replace hyphen with space & capitalize each word
3543    currentPageName = currentPageName.replace(/-/g, " ");
3544    currentPageName = currentPageName
3545      .split(" ")
3546      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
3547      .join(" ");
3548    
3549    document.title = `${currentPageName} - Newark Youth London`;
3550
3551</script>
vendor: 1 bytes, line 3551
3551
3552<script>
3553// Show button when scrolling
3554window.onscroll = function() {
3555    const btn = document.getElementById("backToTop");
3556    if (!btn) return; // element না থাকলে script stop
3557
3558    if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
3559        btn.style.display = "block";
3560    } else {
3561        btn.style.display = "none";
3562    }
3563};
3564
3565
3566// Scroll to top smoothly
3567document.addEventListener("DOMContentLoaded", function() {
3568    const backToTop = document.getElementById("backToTop");
3569    if (backToTop) {
3570        backToTop.addEventListener("click", () => {
3571            window.scrollTo({ top: 0, behavior: 'smooth' });
3572        });
3573    }
3574});
3575
3576</script>
vendor: 1 bytes, line 3576
3576
3577<script>
3578  // Get the current page URL
3579  const currentUrl = window.location.href;
3580
3581  // Select all nav links
3582  const navLinks = document.querySelectorAll('.navbar a'); // adjust selector to your navbar links
3583
3584  navLinks.forEach(link => {
3585    // If the link href matches the current URL, add 'active' class
3586    if(currentUrl.includes(link.href)) {
3587      link.classList.add('active');
3588    }
3589  });
3590</script>
3590
3591<style>
3592	.submenu .active{color:#000 !important}
3593</style>
3594
3595<!-- app helper -->
3596<script src="https://newark.org.uk/assets/js/app-helper.js?v=1.28"></script>
3596
3597 

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.