Showing source for: https://legalaidrwanda.org/
Duration: 2.750983s
Server: Apache

<!DOCTYPE html>
<html lang="en">
<head>

  <!-- Basic Page Needs
================================================== -->
  <meta charset="utf-8">
  <title>The Legal Aid Forum</title>

  <!-- Mobile Specific Metas
================================================== -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="The Legal Aid Forum Website">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
  <meta name=author content="Themefisher">
  <meta name=generator content="The Legal Aid Forum Website v1.0">

  <!-- Favicon
================================================== -->
  <link rel="icon" type="image/png" href="images/favicon.png">

  <!-- CSS
================================================== -->
  <!-- Bootstrap -->
  <link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css">
  <!-- FontAwesome -->
  <link rel="stylesheet" href="plugins/fontawesome/css/all.min.css">
  <!-- Animation -->
  <link rel="stylesheet" href="plugins/animate-css/animate.css">
  <!-- slick Carousel -->
  <link rel="stylesheet" href="plugins/slick/slick.css">
  <link rel="stylesheet" href="plugins/slick/slick-theme.css">
  <!-- Colorbox -->
  <link rel="stylesheet" href="plugins/colorbox/colorbox.css">
  <!-- Template styles-->
  <link rel="stylesheet" href="css/style.css">

</head><body>

<style>
/* ============================================================
   LAF HEADER — WIEGO-style mega menu (site blue)
   ============================================================ */
:root {
    --brand-primary:      #3a9fc0;
    --brand-primary-dark: #2e88a6;
    --brand-dark:         #0f2b3d;
    --brand-accent:       #4fb3d1;
    --brand-accent-dark:  #3a9fc0;
    --ink:                #1e293b;
    --ink-muted:          #64748b;
    --border:             #e8edf3;
    --mega-bg:            #ffffff;
    --mega-hover:         #eef7fb;
}

/* ============================================================
   STICKY FIX — prevent ancestor styles from breaking position:sticky
   ============================================================ */
html { overflow-x: hidden; }
body {
    overflow-x: clip;
    transform: none;
    filter: none;
    perspective: none;
}

/* ---------- ROOT STACKING ---------- */
.laf-header-wrap {
    position: relative;
    z-index: 99999;
}

/* ---------- UTILITY BAR (sticky at very top) ---------- */
.laf-utility {
    background: #f6f8fb;
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--ink-muted);
    padding: 8px 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100000;
}
.laf-utility .util-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}
.laf-utility ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.laf-utility li { display: inline-flex; align-items: center; gap: 8px; }
.laf-utility i { color: var(--brand-accent); font-size: 0.8rem; }
.laf-utility .util-social { display: flex; align-items: center; gap: 14px; }
.laf-utility .util-social a {
    color: var(--ink-muted); text-decoration: none;
    transition: color 0.2s; font-size: 0.95rem;
}
.laf-utility .util-social a:hover { color: var(--brand-accent); }

/* ---------- MAIN HEADER (sticky below utility bar) ---------- */
.laf-main {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
    transition: padding 0.25s ease, box-shadow 0.25s ease;
    position: -webkit-sticky;
    position: sticky;
    top: 37px; /* JS syncs to actual utility bar height */
    z-index: 99999;
}
.laf-main.is-stuck {
    padding: 10px 0;
    box-shadow: 0 6px 22px -14px rgba(15, 23, 42, 0.35);
}
.laf-main .main-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; position: relative;
}
.laf-logo img {
    max-height: 62px; transition: max-height 0.25s ease; display: block;
}
.laf-main.is-stuck .laf-logo img { max-height: 46px; }

/* ---------- PRIMARY NAV ---------- */
.laf-nav { display: flex; align-items: center; }
.laf-nav > ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center;
}
.laf-nav > ul > li { position: relative; }

.laf-nav > ul > li > a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 14px 16px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    transition: color 0.2s;
    position: relative;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}
.laf-nav > ul > li > a:hover,
.laf-nav > ul > li.active > a,
.laf-nav > ul > li.has-open > a {
    color: var(--brand-accent-dark);
    border-bottom-color: var(--brand-accent);
}
.laf-nav > ul > li > a .chev {
    font-size: 0.6rem;
    transition: transform 0.2s;
}
.laf-nav > ul > li.has-open > a .chev { transform: rotate(180deg); }

/* ============================================================
   MEGA MENU
   ============================================================ */
.laf-mega {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--mega-bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 30px 60px -30px rgba(15, 23, 42, 0.25);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    padding: 0;
    pointer-events: none;
}
.laf-nav > ul > li.has-open > .laf-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.laf-mega-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    max-width: 1320px;
    margin: 0 auto;
    padding: 50px 40px 45px;
    position: relative;
}
.laf-mega-grid > .mega-col + .mega-col {
    border-left: 1px solid var(--border);
}
.mega-col { padding: 0 40px; }
.mega-col:first-child { padding-left: 0; }
.mega-col:last-child  { padding-right: 0; }

.mega-col-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--brand-dark);
    letter-spacing: -0.015em;
    margin-bottom: 22px;
    line-height: 1.25;
}

.mega-list {
    list-style: none; margin: 0 0 28px; padding: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.mega-list li a {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 8px 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: color 0.18s;
}
.mega-list li a:hover { color: var(--brand-accent-dark); }

.mega-arrow {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--brand-accent);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.65rem;
    transition: transform 0.2s, background 0.2s;
}
.mega-list li a:hover .mega-arrow {
    background: var(--brand-accent-dark);
    transform: translateX(3px);
}

.mega-cta {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--brand-accent);
    color: #fff !important;
    padding: 13px 30px;
    border-radius: 50px;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 8px 20px -10px rgba(79, 179, 209, 0.6);
}
.mega-cta:hover {
    background: var(--brand-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -10px rgba(79, 179, 209, 0.8);
    color: #fff;
}

/* ============================================================
   LATEST ARTICLES / REPORTS — third column pattern
   ============================================================ */
.mega-col-articles { display: flex; flex-direction: column; }

.mega-articles {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.mega-article {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    padding: 8px;
    border-radius: 12px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.mega-article:hover {
    background: var(--mega-hover);
    border-color: rgba(79, 179, 209, 0.15);
    transform: translateX(3px);
}

.mega-article-thumb {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: 10px;
    overflow: hidden;
    background: #e2e8f0;
}
.mega-article-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.mega-article:hover .mega-article-thumb img { transform: scale(1.08); }

.mega-article-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; justify-content: center;
    gap: 6px;
}
.mega-article-title {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mega-article:hover .mega-article-title { color: var(--brand-accent-dark); }

.mega-article-date {
    font-size: 0.7rem;
    color: #94a3b8;
    display: inline-flex; align-items: center; gap: 5px;
}
.mega-article-date i { color: var(--brand-accent); font-size: 0.65rem; }

/* Hide mobile-only block on desktop */
.laf-mobile-mega { display: none; }

/* ---------- HEADER CTA ---------- */
.laf-cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--brand-accent);
    color: #fff;
    padding: 11px 22px;
    border-radius: 50px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}
.laf-cta:hover {
    background: var(--brand-accent-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -10px rgba(79, 179, 209, 0.7);
}

/* ---------- MOBILE TOGGLE ---------- */
.laf-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    width: 44px; height: 44px;
    border-radius: 10px;
    color: var(--ink);
    font-size: 1.1rem;
    cursor: pointer;
}

/* ---------- X (TWITTER) ICON FALLBACK ---------- */
.fab.fa-x-twitter::before,
.fa-x-twitter::before {
    content: "𝕏";
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 700;
    font-size: 0.95em;
    line-height: 1;
    display: inline-block;
    transform: translateY(-1px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .laf-nav > ul > li > a { padding: 12px 10px; font-size: 0.85rem; }
    .laf-cta { padding: 10px 16px; font-size: 0.82rem; }
    .mega-col { padding: 0 24px; }
    .mega-col-title { font-size: 1.15rem; }
    .laf-mega-grid { padding: 40px 24px 35px; }
    .mega-article-thumb { flex: 0 0 46px; width: 46px; height: 46px; }
    .mega-article-title { font-size: 0.78rem; }
}

@media (max-width: 991px) {
    .laf-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .laf-mega { display: none !important; }
    .laf-mobile-mega { display: none; }

    .laf-nav {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: #fff;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 20px 40px -20px rgba(15, 23, 42, 0.35);
        padding: 8px 0;
        max-height: 80vh;
        overflow-y: auto;
        z-index: 100000;
    }
    .laf-nav.is-open { display: block; }
    .laf-nav > ul { flex-direction: column; align-items: stretch; }
    .laf-nav > ul > li > a {
        padding: 14px 22px;
        justify-content: space-between;
        border-bottom: 1px solid #f1f5f9;
        margin-bottom: 0;
        white-space: normal;
    }
    .laf-nav > ul > li > a:hover,
    .laf-nav > ul > li.active > a,
    .laf-nav > ul > li.has-open > a {
        background: var(--mega-hover);
        border-bottom-color: #f1f5f9;
    }
    .laf-nav > ul > li.has-open .laf-mobile-mega { display: block; }
    .laf-mobile-mega {
        background: #fafcff;
        border-bottom: 1px solid #f1f5f9;
        padding: 16px 22px 22px;
    }
    .laf-mobile-mega .mega-col-title {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--brand-accent-dark);
        margin: 16px 0 8px;
    }
    .laf-mobile-mega .mega-col-title:first-child { margin-top: 0; }
    .laf-mobile-mega .mega-list { margin-bottom: 8px; }
    .laf-mobile-mega .mega-list li a { font-size: 0.9rem; }
    .laf-mobile-mega .mega-cta { display: none; }

    .laf-main .main-inner { flex-wrap: wrap; }
    .laf-cta { display: none; }
}

@media (max-width: 480px) {
    .laf-utility { font-size: 0.72rem; padding: 6px 0; }
    .laf-utility ul { gap: 14px; }
    .laf-main { top: 32px; }
}
</style>

<!-- ============ HEADER MARKUP ============ -->
<div class="laf-header-wrap">

    <!-- UTILITY BAR -->
    <div class="laf-utility">
        <div class="container">
            <div class="util-inner">
                <ul>
                    <li><i class="fas fa-map-marker-alt"></i> Kimihurura, KN 14, KG 668 St, Kigali — Rwanda</li>
                    <li><i class="fas fa-phone-alt"></i> Helpline: <strong>1022</strong></li>
                    <li><i class="fas fa-envelope"></i> <a href="mailto:[email protected]" style="color:inherit;text-decoration:none;">[email protected]</a></li>
                </ul>
                <div class="util-social">
                    <a title="Facebook" href="https://www.facebook.com/LegalAidRwanda" target="_blank" rel="noopener"><i class="fab fa-facebook-f"></i></a>
                    <a title="X" href="https://twitter.com/LegalAid_Rwanda" target="_blank" rel="noopener"><i class="fab fa-x-twitter"></i></a>
                    <a title="Instagram" href="https://www.instagram.com/legalaidforum/" target="_blank" rel="noopener"><i class="fab fa-instagram"></i></a>
                    <a title="YouTube" href="https://www.youtube.com/@legalaidforum9955" target="_blank" rel="noopener"><i class="fab fa-youtube"></i></a>
                    <a title="LinkedIn" href="https://www.linkedin.com/company/the-legal-aid-forum-rwanda/" target="_blank" rel="noopener"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
        </div>
    </div>

    <!-- MAIN HEADER -->
    <header class="laf-main" id="lafHeader">
        <div class="container">
            <div class="main-inner">

                <a class="laf-logo" href="Home">
                    <img loading="lazy" src="images/logo_laf2.png" alt="Legal Aid Forum">
                </a>

                <button class="laf-toggle" id="lafToggle" aria-label="Toggle navigation" aria-expanded="false">
                    <i class="fas fa-bars"></i>
                </button>

                <nav class="laf-nav" id="lafNav" aria-label="Primary">
                    <ul>
                        <li class="active"><a href="Home">Home</a></li>

                        <!-- ====== WHO WE ARE ====== -->
                        <li data-mega="mega-about">
                            <a href="#">Who we are <i class="fas fa-chevron-down chev"></i></a>

                            <div class="laf-mega" style="--cols: 2;">
                                <div class="laf-mega-grid">
                                    <div class="mega-col">
                                        <h3 class="mega-col-title">Who We Are</h3>
                                        <ul class="mega-list">
                                            <li><a href="about-us"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Our Mission</a></li>
                                            <li><a href="about-us"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Our History</a></li>
                                        </ul>
                                        <a href="about-us" class="mega-cta">Who We Are <i class="fas fa-arrow-right"></i></a>
                                    </div>
                                    <div class="mega-col">
                                        <h3 class="mega-col-title"> </h3>
                                        <ul class="mega-list">
                                            <li><a href="our-team"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Our Team</a></li>
                                            <li><a href="members.php"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Our Members</a></li>
                                            <li><a href="partners.php"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Our Partners</a></li>
                                        </ul>
                                        
                                    </div>
                                </div>
                            </div>

                            <div class="laf-mobile-mega">
                                <div class="mega-col-title">Who We Are</div>
                                <ul class="mega-list">
                                    <li><a href="about-us"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Who we are</a></li>
                                    <li><a href="our-team"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Our Team</a></li>
                                </ul>
                                <div class="mega-col-title">Our Network</div>
                                <ul class="mega-list">
                                    <li><a href="partners.php"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Our Partners</a></li>
                                    <li><a href="members.php"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Our Members</a></li>
                                </ul>
                            </div>
                        </li>

                        <!-- ====== WHAT WE DO ====== -->
                        <li data-mega="mega-what">
                            <a href="#">What We Do <i class="fas fa-chevron-down chev"></i></a>

                            <div class="laf-mega" style="--cols: 2;">
                                <div class="laf-mega-grid">
                                    <div class="mega-col">
                                        <h3 class="mega-col-title">Our strategic Areas</h3>
                                        <ul class="mega-list">
                                            <li><a href="legal-empowerment"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Community Legal Empowerment</a></li>
                                            <li><a href="knowledge-management"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Knowledge Management</a></li>
                                        </ul>
                                    </div>
                                    <div class="mega-col">
                                        <h3 class="mega-col-title"></h3>
                                        <ul class="mega-list">
                                            <li><a href="protection-human-rights"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Promotion &amp; Protection of Human Rights</a></li>
                                            <li><a href="institutional-development"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Institutional Development</a></li>
                                        </ul>
                                        
                                    </div>
                                </div>
                            </div>

                            <div class="laf-mobile-mega">
                                <div class="mega-col-title">Our Programmes</div>
                                <ul class="mega-list">
                                    <li><a href="legal-empowerment"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Community Legal Empowerment</a></li>
                                    <li><a href="knowledge-management"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Knowledge Management</a></li>
                                    <li><a href="protection-human-rights"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Promotion &amp; Protection of Human Rights</a></li>
                                    <li><a href="institutional-development"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Institutional Development</a></li>
                                </ul>
                            </div>
                        </li>

                        <!-- ====== MEDIA (3 columns) ====== -->
                        <li data-mega="mega-media">
                            <a href="#">Media <i class="fas fa-chevron-down chev"></i></a>

                            <div class="laf-mega" style="--cols: 3;">
                                <div class="laf-mega-grid">
                                    <div class="mega-col">
                                        <h3 class="mega-col-title">Stories &amp; Articles</h3>
                                        <ul class="mega-list">
                                            <li><a href="news-articles"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> News &amp; Articles</a></li>
                                            <li><a href="success-stories"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Success Stories</a></li>
                                        </ul>
                                        <a href="news-articles" class="mega-cta">Visit Newsroom <i class="fas fa-arrow-right"></i></a>
                                    </div>
                                    <div class="mega-col">
                                        <h3 class="mega-col-title">Resources</h3>
                                        <ul class="mega-list">
                                            <li><a href="newsletter"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Newsletters</a></li>
                                            <li><a href="gallery.php"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Photo Gallery</a></li>
                                        </ul>
                                    </div>
                                    <div class="mega-col mega-col-articles">
                                        <h3 class="mega-col-title">Latest Articles</h3>
                                                                                <div class="mega-articles">
                                                                                        <a class="mega-article" href="post?p_id=218">
                                                <div class="mega-article-thumb">
                                                    <img loading="lazy" src="includes/images/paralegal-art1.webp" alt="Bringing Justice Closer to Communities: The Role of Community-Based Paralegals in Rwanda">
                                                </div>
                                                <div class="mega-article-body">
                                                    <div class="mega-article-title">Bringing Justice Closer to Communities: The Role of Community-Based Paralegals in Rwanda</div>
                                                    <div class="mega-article-date">
                                                        <i class="far fa-calendar-alt"></i> Sep 15, 2026                                                    </div>
                                                </div>
                                            </a>
                                                                                        <a class="mega-article" href="post?p_id=216">
                                                <div class="mega-article-thumb">
                                                    <img loading="lazy" src="includes/images/kituo.jpg" alt="African Justice Leader Andrews Kananga Champions “People-Centered Justice” at Kituo Cha Sheria Strategic Plan Launch">
                                                </div>
                                                <div class="mega-article-body">
                                                    <div class="mega-article-title">African Justice Leader Andrews Kananga Champions “People-Centered Justice” at Kituo Cha Sheria Strategic Plan Launch</div>
                                                    <div class="mega-article-date">
                                                        <i class="far fa-calendar-alt"></i> Sep 3, 2026                                                    </div>
                                                </div>
                                            </a>
                                                                                        <a class="mega-article" href="post?p_id=215">
                                                <div class="mega-article-thumb">
                                                    <img loading="lazy" src="includes/images/Adr_visite.webp" alt="Rwanda’s justice system embraces Alternative Dispute Resolution: A public-private partnership">
                                                </div>
                                                <div class="mega-article-body">
                                                    <div class="mega-article-title">Rwanda’s justice system embraces Alternative Dispute Resolution: A public-private partnership</div>
                                                    <div class="mega-article-date">
                                                        <i class="far fa-calendar-alt"></i> Sep 3, 2026                                                    </div>
                                                </div>
                                            </a>
                                                                                    </div>
                                                                            </div>
                                </div>
                            </div>

                            <div class="laf-mobile-mega">
                                <div class="mega-col-title">Newsroom</div>
                                <ul class="mega-list">
                                    <li><a href="news-articles"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> News &amp; Articles</a></li>
                                    <li><a href="newsletter"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Newsletters</a></li>
                                    <li><a href="success-stories"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Success Stories</a></li>
                                    <li><a href="gallery.php"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Photo Gallery</a></li>
                                </ul>
                            </div>
                        </li>

                        <!-- ====== PUBLICATIONS (3 columns) ====== -->
                        <li data-mega="mega-pubs">
                            <a href="#">Publications <i class="fas fa-chevron-down chev"></i></a>

                            <div class="laf-mega" style="--cols: 3;">
                                <div class="laf-mega-grid">
                                    <div class="mega-col">
                                        <h3 class="mega-col-title">Research &amp; Reports</h3>
                                        <ul class="mega-list">
                                            <li><a href="research-reports.php"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Research Reports</a></li>
                                            <li><a href="annual-reports"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Annual Reports</a></li>
                                        </ul>
                                    </div>
                                    <div class="mega-col">
                                        <h3 class="mega-col-title">Advocacy &amp; Training</h3>
                                        <ul class="mega-list">
                                            <li><a href="upr-reports"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> UPR Reports</a></li>
                                            <li><a href="training-modules"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Manual &amp; Training Modules</a></li>
                                        </ul>
                                        <a href="research-reports.php" class="mega-cta">Browse Library <i class="fas fa-arrow-right"></i></a>
                                    </div>
                                    <div class="mega-col mega-col-articles">
                                        <h3 class="mega-col-title">Latest Reports</h3>
                                                                                <div class="mega-articles">
                                                                                        <a class="mega-article" href="research-report-detail?id=49">
                                                <div class="mega-article-thumb">
                                                    <img loading="lazy" src="includes/images/research_cover/UnWomen_2025 .jpg" alt="EQUALITY BEFORE
THE LAW IN RWANDA">
                                                </div>
                                                <div class="mega-article-body">
                                                    <div class="mega-article-title">EQUALITY BEFORE
THE LAW IN RWANDA</div>
                                                    <div class="mega-article-date">
                                                        <i class="far fa-calendar-alt"></i> 2025 &middot; Research Report
                                                    </div>
                                                </div>
                                            </a>
                                                                                        <a class="mega-article" href="research-report-detail?id=51">
                                                <div class="mega-article-thumb">
                                                    <img loading="lazy" src="includes/images/research_cover/1791148106_da532569_Exproriation_report_2026.png" alt="TOWARDS JUST AND EFFECTIVE EXPROPRIATION PRACTICES IN RWANDA">
                                                </div>
                                                <div class="mega-article-body">
                                                    <div class="mega-article-title">TOWARDS JUST AND EFFECTIVE EXPROPRIATION PRACTICES IN RWANDA</div>
                                                    <div class="mega-article-date">
                                                        <i class="far fa-calendar-alt"></i> 2026 &middot; Research Report
                                                    </div>
                                                </div>
                                            </a>
                                                                                        <a class="mega-article" href="research-report-detail?id=24">
                                                <div class="mega-article-thumb">
                                                    <img loading="lazy" src="includes/images/research_cover/baseline-2.jpg" alt="Final Report of the Legal Aid Baseline and Needs Analysis...">
                                                </div>
                                                <div class="mega-article-body">
                                                    <div class="mega-article-title">Final Report of the Legal Aid Baseline and Needs Analysis...</div>
                                                    <div class="mega-article-date">
                                                        <i class="far fa-calendar-alt"></i> 2007 &middot; Research Report
                                                    </div>
                                                </div>
                                            </a>
                                                                                    </div>
                                                                            </div>
                                </div>
                            </div>

                            <div class="laf-mobile-mega">
                                <div class="mega-col-title">Our Publications</div>
                                <ul class="mega-list">
                                    <li><a href="research-reports.php"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Research Reports</a></li>
                                    <li><a href="annual-reports"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Annual Reports</a></li>
                                    <li><a href="upr-reports"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> UPR Reports</a></li>
                                    <li><a href="training-modules"><span class="mega-arrow"><i class="fas fa-arrow-right"></i></span> Manual &amp; Training Modules</a></li>
                                </ul>
                            </div>
                        </li>

                        <li><a href="contact-us">Contact Us</a></li>
                    </ul>
                </nav>

            </div>
        </div>
    </header>

</div>
<!-- /.laf-header-wrap -->

<script>
/* ============================================================
   HEADER — mega menu, sticky, mobile toggle, active highlight
   ============================================================ */
(function () {
    'use strict';

    var header = document.getElementById('lafHeader');
    var nav    = document.getElementById('lafNav');
    var toggle = document.getElementById('lafToggle');
    var isDesktop = function () { return window.innerWidth > 991; };

    /* ---------- 1. Sticky header — dynamic top offset ---------- */
    if (header) {
        var util = document.querySelector('.laf-utility');

        function syncHeaderTop() {
            if (!util) return;
            var utilH = Math.round(util.getBoundingClientRect().height);
            header.style.top = utilH + 'px';
        }

        var onScroll = function () {
            var utilH = util ? util.getBoundingClientRect().height : 0;
            header.classList.toggle('is-stuck', window.scrollY > utilH + 10);
        };

        syncHeaderTop();
        window.addEventListener('resize', syncHeaderTop, { passive: true });
        window.addEventListener('orientationchange', syncHeaderTop);
        window.addEventListener('load', syncHeaderTop);
        window.addEventListener('scroll', onScroll, { passive: true });
        onScroll();
        setTimeout(syncHeaderTop, 1000);
    }

    /* ---------- 2. Mega menu positioning ---------- */
    function positionMega(li) {
        var mega = li.querySelector('.laf-mega');
        if (!mega || !header) return;
        var headerRect = header.getBoundingClientRect();
        var liRect     = li.getBoundingClientRect();
        mega.style.left  = (headerRect.left - liRect.left) + 'px';
        mega.style.right = 'auto';
        mega.style.width = headerRect.width + 'px';
    }

    var megaItems = document.querySelectorAll('.laf-nav > ul > li[data-mega]');
    var openTimer = null;
    var closeTimer = null;

    function closeAllMega() {
        megaItems.forEach(function (li) { li.classList.remove('has-open'); });
    }
    function openMega(li) {
        closeAllMega();
        positionMega(li);
        li.classList.add('has-open');
    }

    megaItems.forEach(function (li) {
        li.addEventListener('mouseenter', function () {
            if (!isDesktop()) return;
            clearTimeout(closeTimer);
            clearTimeout(openTimer);
            openTimer = setTimeout(function () { openMega(li); }, 60);
        });
        li.addEventListener('mouseleave', function () {
            if (!isDesktop()) return;
            clearTimeout(openTimer);
            clearTimeout(closeTimer);
            closeTimer = setTimeout(function () { li.classList.remove('has-open'); }, 200);
        });
        window.addEventListener('resize', function () {
            if (li.classList.contains('has-open')) positionMega(li);
        });
        window.addEventListener('scroll', function () {
            if (li.classList.contains('has-open')) positionMega(li);
        }, { passive: true });
    });

    document.addEventListener('click', function (e) {
        if (!e.target.closest('.laf-nav')) closeAllMega();
    });
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') closeAllMega();
    });

    /* ---------- 3. Mobile menu ---------- */
    if (toggle && nav) {
        toggle.addEventListener('click', function (e) {
            e.stopPropagation();
            var isOpen = nav.classList.toggle('is-open');
            toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
        });
        nav.querySelectorAll(':scope > ul > li > a').forEach(function (a) {
            a.addEventListener('click', function (e) {
                if (isDesktop()) return;
                var li = a.parentElement;
                if (li.querySelector('.laf-mobile-mega')) {
                    e.preventDefault();
                    li.classList.toggle('has-open');
                }
            });
        });
        document.addEventListener('click', function (e) {
            if (!nav.contains(e.target) && !toggle.contains(e.target)) {
                nav.classList.remove('is-open');
                toggle.setAttribute('aria-expanded', 'false');
            }
        });
        window.addEventListener('resize', function () {
            if (!isDesktop()) return;
            nav.classList.remove('is-open');
            toggle.setAttribute('aria-expanded', 'false');
        });
    }

    /* ---------- 4. Auto-highlight active nav item ---------- */
    (function highlightActive() {
        var path = (window.location.pathname.split('/').pop() || 'Home').split('?')[0];
        document.querySelectorAll('.laf-nav a').forEach(function (link) {
            var href = link.getAttribute('href');
            if (!href || href === '#') return;
            var hrefBase = href.split('?')[0].split('#')[0];
            if (hrefBase === path) {
                var li = link.closest('.laf-nav > ul > li');
                if (li) {
                    li.parentElement.querySelectorAll(':scope > li').forEach(function (s) {
                        s.classList.remove('active');
                    });
                    li.classList.add('active');
                }
            }
        });
    })();

})();
</script>
<!-- Modern Hero Carousel Section - 5 Slides with Clear Images -->
<div class="hero-carousel-wrapper">
    <div class="hero-carousel banner-carousel">
        <!-- Slide 1: Welcome / Introduction — VIDEO ONLY (bottom-aligned text) -->
        <div class="hero-slide hero-slide-video">
            <video class="hero-video-bg" muted playsinline preload="auto">
                <source src="images/slider-main/webintro.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <div class="hero-overlay-dark"></div>
            <div class="hero-container hero-container-bottom">
                <h1 class="hero-title" data-aos="fade-up" data-aos-delay="100">The Legal Aid Forum</h1>
                                <p class="hero-description" data-aos="fade-up" data-aos-delay="200">We are a membership-based network of 38 national and international NGOs, professional bodies, universities, legal aid clinics, faith-based organizations and trade unions that provide or support legal aid services to the indigent Rwandan population or vulnerable groups.</p>
                                <div class="hero-buttons" data-aos="fade-up" data-aos-delay="300">
                    <a href="#services" class="btn-hero-primary">Explore Our Services <i class="fas fa-arrow-down"></i></a>
                </div>
            </div>
        </div>

        <!-- Slide 2: Community Legal Empowerment (centered) -->
        <div class="hero-slide" style="background-image: url('images/slider-main/empowerment.jpg'); background-size: cover; background-position: center;">
            <div class="hero-overlay-dark"></div>
            <div class="hero-container">
                <h2 class="hero-service-title">Community Legal Empowerment</h2>
                <div class="hero-divider"></div>
                <p class="hero-description">Supporting and empowering vulnerable individuals to use the law to advance their rights and interests. We work directly with communities to build legal awareness and capacity.</p>
                <div class="hero-buttons">
                    <a href="legal-empowerment" class="btn-hero-primary">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>

        <!-- Slide 3: Knowledge Management (centered) -->
        <div class="hero-slide" style="background-image: url('images/slider-main/newlaw.webp'); background-size: cover; background-position: center;">
            <div class="hero-overlay-dark"></div>
            <div class="hero-container">
                <h2 class="hero-service-title">Knowledge Management</h2>
                <div class="hero-divider"></div>
                <p class="hero-description">Enduring the delivery of quality legal aid services for Rwandans, LAF has become a knowledge hub on access to justice, research, and best practices in legal empowerment.</p>
                <div class="hero-buttons">
                    <a href="knowledge-management" class="btn-hero-primary">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>

        <!-- Slide 4: Promotion & Protection of Human Rights (centered) -->
        <div class="hero-slide" style="background-image: url('images/slider-main/Human_rights.webp'); background-size: cover; background-position: center;">
            <div class="hero-overlay-dark"></div>
            <div class="hero-container">
                <h2 class="hero-service-title">Promotion & Protection of Human Rights</h2>
                <div class="hero-divider"></div>
                <p class="hero-description">Actively engaging with the government on protection of human rights, advocating for policy reforms, and ensuring that vulnerable populations have their voices heard.</p>
                <div class="hero-buttons">
                    <a href="protection-human-rights" class="btn-hero-primary">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>

        <!-- Slide 5: Institutional Development (centered) -->
        <div class="hero-slide" style="background-image: url('images/slider-main/institutionals.jpeg'); background-size: cover; background-position: center;">
            <div class="hero-overlay-dark"></div>
            <div class="hero-container">
                <h2 class="hero-service-title">Institutional Development</h2>
                <div class="hero-divider"></div>
                <p class="hero-description">Ensuring the Legal Aid Forum is an effective and sustainable membership-based network, strengthening organizational capacity and governance structures.</p>
                <div class="hero-buttons">
                    <a href="institutional-development" class="btn-hero-primary">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Experience Counter Bar -->
<section class="exp-counter">
    <div class="container">
        <div class="exp-card">
            <div class="exp-icon"><i class="fas fa-chart-line"></i></div>
            <h3><span id="yearCount"></span> <span>Years of experience</span> in legal aid practices in Rwanda</h3>
        </div>
    </div>
</section>

<!-- Services Section - 2 Cards Per Row with Larger Cards -->
<section id="services" class="services-modern">
    <div class="container">
        <div class="section-header-modern">
            <div class="section-chip"><i class="fas fa-cogs"></i> Our Core Services</div>
            <h2>What We Do</h2>
            <div class="section-line"></div>
            <p>We are dedicated to promoting access to justice and protecting human rights through comprehensive legal aid services across Rwanda.</p>
        </div>
        
        <div class="services-flex-grid">
            <!-- Service 1 -->
            <div class="service-card-new">
                <div class="service-image-top">
                    <img loading="lazy" src="images/Community-legal-empowerement.webp" alt="Community Legal Empowerment">
                </div>
                <div class="service-content-wrapper">
                    <h3><a href="legal-empowerment">Community Legal Empowerment</a></h3>
                    <p>The legal aid forum supports and empowers vulnerable individuals to use the law to advance their rights and interest. We work directly with communities to build legal awareness and capacity.</p>
                    <a href="legal-empowerment" class="card-link">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
            
            <!-- Service 2 -->
            <div class="service-card-new">
                <div class="service-image-top">
                    <img loading="lazy" src="images/Knowledge-management.webp" alt="Knowledge Management">
                </div>
                <div class="service-content-wrapper">
                    <h3><a href="knowledge-management">Knowledge Management</a></h3>
                    <p>Enduring the delivery of quality legal aid services for Rwandans, LAF has become a knowledge hub on access to justice, research, and best practices in legal empowerment.</p>
                    <a href="knowledge-management" class="card-link">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
            
            <!-- Service 3 -->
            <div class="service-card-new">
                <div class="service-image-top">
                    <img loading="lazy" src="images/Human_right.webp" alt="Human Rights Protection">
                </div>
                <div class="service-content-wrapper">
                    <h3><a href="protection-human-rights">Promotion & Protection of Human Rights</a></h3>
                    <p>With aim of actively engaging with the government on protection of human rights, advocating for policy reforms, and ensuring that vulnerable populations have their voices heard.</p>
                    <a href="protection-human-rights" class="card-link">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
            
            <!-- Service 4 -->
            <div class="service-card-new">
                <div class="service-image-top">
                    <img loading="lazy" src="images/institutional-development.webp" alt="Institutional Development">
                </div>
                <div class="service-content-wrapper">
                    <h3><a href="institutional-development">Institutional Development</a></h3>
                    <p>To ensure the Legal Aid Forum is an effective and sustainable membership based network, strengthening organizational capacity and governance structures.</p>
                    <a href="institutional-development" class="card-link">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Helpline Banner -->
<section class="helpline-modern">
    <div class="container">
        <div class="helpline-wrapper">
            <div class="helpline-text">
                <i class="fas fa-phone-volume"></i>
                <div>
                    <h4>Toll Free Legal Aid Helpline</h4>
                    <div class="helpline-number">1022</div>
                </div>
            </div>
            <div class="helpline-action">
                <a href="tel:1022" class="btn-helpline-call">Talk to us on 1022 toll free <i class="fas fa-headset"></i></a>
            </div>
        </div>
    </div>
</section>

<!-- Success Stories Section -->
<section class="stories-renovated">
    <div class="container">
        <div class="section-header-modern">
            <div class="section-chip"><i class="fas fa-medal"></i> Real Impact</div>
            <h2>Success Stories</h2>
            <div class="section-line"></div>
            <p>Inspiring journeys of justice, resilience, and transformation through legal aid</p>
        </div>
        
        <div class="stories-grid">
                        <div class="story-entry">
                <div class="story-visual">
                    <img loading="lazy" src="includes/images/1790330683_betty.jpeg" alt="MBABAZI Betty">
                    <div class="quote-mark"><i class="fas fa-quote-right"></i></div>
                </div>
                <div class="story-details">
                    <div class="story-quote-text"><i class="fas fa-quote-left"></i> <p>When MBABAZI Betty’s ownership of a parcel of land was challenged, legal aid helped her navigate the justice...</p></div>
                    <div class="story-meta">
                        <div class="beneficiary-info">
                            <img class="beneficiary-avatar" src="includes/images/1790330683_betty.jpeg" alt="MBABAZI Betty">
                            <div>
                                <h5>MBABAZI Betty</h5>
                                <span>Beneficiary</span>
                            </div>
                        </div>
                        <a href="success?p_id=9" class="story-cta">Read Story <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
                        <div class="story-entry">
                <div class="story-visual">
                    <img loading="lazy" src="includes/images/1789559186_dative.webp" alt="AYINKAMIYE Dative">
                    <div class="quote-mark"><i class="fas fa-quote-right"></i></div>
                </div>
                <div class="story-details">
                    <div class="story-quote-text"><i class="fas fa-quote-left"></i> <p>Dative, a resident of Niboye Sector, lost part of her property during the Sonatube–Sahara road construction ...</p></div>
                    <div class="story-meta">
                        <div class="beneficiary-info">
                            <img class="beneficiary-avatar" src="includes/images/1789559186_dative.webp" alt="AYINKAMIYE Dative">
                            <div>
                                <h5>AYINKAMIYE Dative</h5>
                                <span>Beneficiary</span>
                            </div>
                        </div>
                        <a href="success?p_id=8" class="story-cta">Read Story <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
                    </div>
        
        <div class="stories-footer">
            <a href="success-stories" class="btn-outline-accent">View All Stories <i class="fas fa-chevron-right"></i></a>
        </div>
    </div>
</section>

<!-- ===== YouTube Videos Section ===== -->
<section class="youtube-section">
    <div class="container">
        <div class="section-header-modern">
            <div class="section-chip"><i class="fab fa-youtube"></i> Watch</div>
            <h2>LAF Videos</h2>
            <div class="section-line"></div>
            <p>Explore our video content to learn more about our work, impact stories, and legal awareness campaigns</p>
        </div>

        <div class="youtube-grid">
            <!-- Video 1 -->
            <div class="youtube-item" data-aos="fade-up">
                <div class="youtube-iframe-wrapper">
                    <iframe 
                        loading="lazy"
                        src="https://www.youtube.com/embed/mhikjDuJikw?si=g1BVtGE27kv9qo1S" 
                        title="YouTube video player" 
                        frameborder="0" 
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                        referrerpolicy="strict-origin-when-cross-origin" 
                        allowfullscreen>
                    </iframe>
                </div>
            </div>

            <!-- Video 2 -->
            <div class="youtube-item" data-aos="fade-up" data-aos-delay="100">
                <div class="youtube-iframe-wrapper">
                    <iframe 
                        loading="lazy"
                        src="https://www.youtube.com/embed/WumzUy11fTM?si=ohD6A4ugUelQ3hSp" 
                        title="YouTube video player" 
                        frameborder="0" 
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                        referrerpolicy="strict-origin-when-cross-origin" 
                        allowfullscreen>
                    </iframe>
                </div>
            </div>

            <!-- Video 3 -->
            <div class="youtube-item" data-aos="fade-up" data-aos-delay="200">
                <div class="youtube-iframe-wrapper">
                    <iframe 
                        loading="lazy"
                        src="https://www.youtube.com/embed/aK898alNTec?si=6kUN6xKNNl4I24jN" 
                        title="YouTube video player" 
                        frameborder="0" 
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                        referrerpolicy="strict-origin-when-cross-origin" 
                        allowfullscreen>
                    </iframe>
                </div>
            </div>
        </div>

        <div class="youtube-footer">
            <a href="https://www.youtube.com/@legalaidforum9955" target="_blank" rel="noopener noreferrer" class="btn-solid-accent">
                <i class="fab fa-youtube"></i> Visit Our YouTube Channel
            </a>
        </div>
    </div>
</section>

<!-- News & Articles Section -->
<section class="news-modern">
    <div class="container">
        <div class="section-header-modern">
            <div class="section-chip"><i class="far fa-newspaper"></i> The Legal aid forum in the news</div>
            <h2>Latest Updates</h2>
            <div class="section-line"></div>
        </div>
        
        <div class="news-cards">
                        <div class="news-item">
                <div class="news-thumb">
                    <img loading="lazy" src="includes/images/paralegal-art1.webp" alt="Post Image">
                </div>
                <div class="news-content">
                    <div class="news-badge"><i class="far fa-calendar-alt"></i> September 15th, 2026</div>
                    <h3><a href="post?p_id=218">Bringing Justice Closer to Communities: The Role of Community-Based Paralegals in Rwanda</a></h3>
                    <p>Community-based paralegals are a vital part of Rwanda&rsquo;s community-based approach to access to just...</p>
                    <a href="post?p_id=218" class="read-more-link">Read more <i class="fas fa-long-arrow-alt-right"></i></a>
                </div>
            </div>
                        <div class="news-item">
                <div class="news-thumb">
                    <img loading="lazy" src="includes/images/kituo.jpg" alt="Post Image">
                </div>
                <div class="news-content">
                    <div class="news-badge"><i class="far fa-calendar-alt"></i> September 3rd, 2026</div>
                    <h3><a href="post?p_id=216">African Justice Leader Andrews Kananga Champions &ldquo;People-Centered Justice&rdquo; at Kituo Cha Sheria Strategic Plan Launch</a></h3>
                    <p>At the official launch of Kituo Cha Sheria&rsquo;s 2026-2030 Strategic Plan, regional legal advocates an...</p>
                    <a href="post?p_id=216" class="read-more-link">Read more <i class="fas fa-long-arrow-alt-right"></i></a>
                </div>
            </div>
                        <div class="news-item">
                <div class="news-thumb">
                    <img loading="lazy" src="includes/images/Adr_visite.webp" alt="Post Image">
                </div>
                <div class="news-content">
                    <div class="news-badge"><i class="far fa-calendar-alt"></i> September 3rd, 2026</div>
                    <h3><a href="post?p_id=215">Rwanda&rsquo;s justice system embraces Alternative Dispute Resolution: A public-private partnership</a></h3>
                    <p>Rwanda has made significant progress in reforming its justice system, integrating Alternative Disput...</p>
                    <a href="post?p_id=215" class="read-more-link">Read more <i class="fas fa-long-arrow-alt-right"></i></a>
                </div>
            </div>
                    </div>
        
        <div class="news-footer">
            <a href="news-articles" class="btn-solid-accent">See more articles <i class="fas fa-arrow-right"></i></a>
        </div>
    </div>
</section>

<!-- ============================================================
     FOOTER — Legal Aid Forum Rwanda
     ============================================================ -->
<footer id="footer" class="laf-footer">

    <!-- ============ TOP: Newsletter strip ============ -->
    <div class="footer-newsletter">
        <div class="container">
            <div class="newsletter-inner">
                <div class="newsletter-text">
                    <span class="newsletter-eyebrow"><i class="fas fa-envelope-open-text"></i> Stay Informed</span>
                    <h3>Subscribe to our newsletter</h3>
                    <p>Get updates on our programs, publications and impact stories delivered to your inbox.</p>
                </div>
                <form class="newsletter-form" action="#" method="post" onsubmit="return false;">
                    <div class="newsletter-field">
                        <i class="fas fa-envelope"></i>
                        <input type="email" name="email" placeholder="Your email address" required aria-label="Email address">
                    </div>
                    <button type="submit" class="newsletter-btn">
                        Subscribe <i class="fas fa-arrow-right"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- ============ MIDDLE: Main footer columns ============ -->
    <div class="footer-main">
        <div class="container">
            <div class="footer-grid">

                <!-- Column 1: Brand + about + socials -->
                <div class="footer-col footer-brand">
                    <img loading="lazy" src="images/LAF Logo Watermark.png" alt="Legal Aid Forum" class="footer-logo">
                    <p class="footer-about-text">
                        Working together for equitable access to justice across Rwanda. We strengthen
                        the legal aid ecosystem and empower vulnerable communities.
                    </p>

                    <div class="footer-social">
                        <a href="https://www.facebook.com/LegalAidRwanda" target="_blank" rel="noopener" title="Facebook" aria-label="Facebook">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="https://twitter.com/LegalAid_Rwanda" target="_blank" rel="noopener" title="X (Twitter)" aria-label="X (Twitter)">
                            <i class="fab fa-x-twitter" aria-hidden="true"></i>
                        </a>
                        <a href="https://www.instagram.com/legalaidforum/" target="_blank" rel="noopener" title="Instagram" aria-label="Instagram">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="https://www.youtube.com/@legalaidforum9955" target="_blank" rel="noopener" title="YouTube" aria-label="YouTube">
                            <i class="fab fa-youtube"></i>
                        </a>
                        <a href="https://www.linkedin.com/company/the-legal-aid-forum-rwanda/" target="_blank" rel="noopener" title="LinkedIn" aria-label="LinkedIn">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                    </div>
                </div>

                <!-- Column 2: Quick links -->
                <div class="footer-col">
                    <h3 class="footer-title">Quick Links</h3>
                    <ul class="footer-links">
                        <li><a href="about-us">About Us</a></li>
                        <li><a href="our-team">Our Team</a></li>
                        <li><a href="members.php">Our Members</a></li>
                        <li><a href="partners.php">Our Partners</a></li>
                        <li><a href="jobs-careers">Jobs &amp; Careers</a></li>
                    </ul>
                </div>

                <!-- Column 3: Publications & resources -->
                <div class="footer-col">
                    <h3 class="footer-title">Resources</h3>
                    <ul class="footer-links">
                        <li><a href="annual-reports">Annual Reports</a></li>
                        <li><a href="research-reports.php">Research Reports</a></li>
                        <li><a href="upr-reports">UPR Reports</a></li>
                        <li><a href="training-modules">Training Modules</a></li>
                        <li><a href="https://legalaidrwanda.org/webmail">Webmail</a></li>
                    </ul>
                </div>

                <!-- Column 4: Contact & hours -->
                <div class="footer-col">
                    <h3 class="footer-title">Get in Touch</h3>

                    <ul class="footer-contact">
                        <li>
                            <i class="fas fa-map-marker-alt"></i>
                            <span>Kimihurura, KN 14, KG 668 St<br>Kigali — Rwanda</span>
                        </li>
                        <li>
                            <i class="fas fa-phone-alt"></i>
                            <span>
                                <strong>Helpline: 1022</strong><br>
                                (+250) 280-036-090
                            </span>
                        </li>
                        <li>
                            <i class="fas fa-envelope"></i>
                            <span>
                                <a href="mailto:[email protected]">[email protected]</a>
                            </span>
                        </li>
                    </ul>

                    <div class="footer-hours">
                        <div class="footer-hours-title">
                            <i class="far fa-clock"></i> Working Hours
                        </div>
                        <div class="footer-hours-row">
                            <span>Mon – Thu</span><span>08:00 – 17:00</span>
                        </div>
                        <div class="footer-hours-row">
                            <span>Friday</span><span>08:00 – 15:00</span>
                        </div>
                        <div class="footer-hours-row">
                            <span>Sat – Sun</span><span class="closed">Closed</span>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- ============ BOTTOM: Copyright ============ -->
    <div class="footer-bottom">
        <div class="container">
            <div class="footer-bottom-inner">
                <div class="copyright-info">
                    Copyright &copy; <script>document.write(new Date().getFullYear())</script>
                    <a href="https://legalaidrwanda.org">The Legal Aid Forum</a>. All rights reserved.
                </div>
                <ul class="footer-bottom-links">
                    <li><a href="contact-us">Contact</a></li>
                    <li><a href="about-us">Privacy</a></li>
                    <li><a href="https://legalaidrwanda.org/admin" target="_blank" rel="noopener">Login</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Back to top -->
    <div id="back-to-top" class="back-to-top position-fixed">
        <button class="btn btn-primary" title="Back to Top" aria-label="Back to top">
            <i class="fa fa-angle-double-up"></i>
        </button>
    </div>
</footer>

<!-- ============================================================
     FOOTER STYLES
     ============================================================ -->
<style>
/* ============================================================
   LAF FOOTER — redesigned
   ============================================================ */
:root {
    --f-primary:       #4fb3d1;
    --f-primary-dark:  #3a9fc0;
    --f-dark:          #0f2b3d;
    --f-dark-2:        #0b1f2c;
    --f-ink:           #e2e8f0;
    --f-muted:         #94a3b8;
    --f-muted-2:       #64748b;
    --f-border:        rgba(255,255,255,0.08);
    --f-card:          rgba(255,255,255,0.04);
}

.laf-footer {
    background: linear-gradient(180deg, var(--f-dark) 0%, var(--f-dark-2) 100%);
    color: var(--f-ink);
    font-family: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
    position: relative;
    overflow: hidden;
}

.laf-footer::before {
    content: "";
    position: absolute;
    top: -120px; right: -120px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(79, 179, 209, 0.18), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* ============ X (TWITTER) ICON FALLBACK ============ */
/* If FA 6.5+ is not loaded, render the mathematical X glyph.
   On FA 6.5+ the real glyph takes over (higher specificity is not needed
   because the real `content` comes from the class itself). */
@supports not (font-variation-settings: normal) {
    /* old browsers — no-op; kept for safety */
}
.fab.fa-x-twitter::before,
.fa-x-twitter::before {
    content: "𝕏";
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 0.95em;
    line-height: 1;
    display: inline-block;
    transform: translateY(-1px);
}

/* ============ NEWSLETTER STRIP ============ */
.footer-newsletter {
    border-bottom: 1px solid var(--f-border);
    padding: 40px 0;
    position: relative;
    z-index: 1;
}
.newsletter-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
.newsletter-text { flex: 1; min-width: 260px; }
.newsletter-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--f-primary);
    margin-bottom: 10px;
}
.newsletter-text h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.newsletter-text p {
    font-size: 0.9rem;
    color: var(--f-muted);
    margin: 0;
    max-width: 520px;
}
.newsletter-form {
    display: flex;
    gap: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--f-border);
    border-radius: 60px;
    padding: 6px 6px 6px 20px;
    min-width: 420px;
    transition: border-color 0.2s;
}
.newsletter-form:focus-within {
    border-color: rgba(79, 179, 209, 0.5);
    background: rgba(255,255,255,0.08);
}
.newsletter-field {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.newsletter-field i {
    color: var(--f-muted);
    font-size: 0.9rem;
}
.newsletter-field input {
    background: transparent;
    border: none;
    color: #fff;
    outline: none;
    width: 100%;
    font-size: 0.9rem;
    font-family: inherit;
    padding: 8px 0;
}
.newsletter-field input::placeholder {
    color: var(--f-muted-2);
}
.newsletter-btn {
    background: var(--f-primary);
    color: #fff;
    border: none;
    border-radius: 60px;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    white-space: nowrap;
}
.newsletter-btn:hover {
    background: #fff;
    color: var(--f-dark);
    transform: translateY(-1px);
}

/* ============ MAIN ============ */
.footer-main {
    padding: 70px 0 50px;
    position: relative;
    z-index: 1;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: 48px;
}

/* Brand col */
.footer-brand .footer-logo {
    max-width: 190px;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}
.footer-about-text {
    font-size: 0.88rem;
    line-height: 1.75;
    color: var(--f-muted);
    margin: 0 0 22px;
}
.footer-social {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.footer-social a {
    width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--f-card);
    border: 1px solid var(--f-border);
    color: var(--f-ink);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.22s;
}
.footer-social a:hover {
    background: var(--f-primary);
    border-color: var(--f-primary);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -10px rgba(79, 179, 209, 0.7);
}

/* Column titles */
.footer-title {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 22px;
    padding-bottom: 14px;
    position: relative;
}
.footer-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 32px; height: 3px;
    background: var(--f-primary);
    border-radius: 3px;
}

/* Links */
.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.footer-links a {
    color: var(--f-muted);
    text-decoration: none;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.18s;
    position: relative;
    padding-left: 0;
}
.footer-links a::before {
    content: "";
    width: 0;
    height: 1px;
    background: var(--f-primary);
    transition: width 0.25s;
}
.footer-links a:hover {
    color: #fff;
    gap: 12px;
    padding-left: 2px;
}
.footer-links a:hover::before {
    width: 14px;
}

/* Contact */
.footer-contact {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.footer-contact li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--f-muted);
}
.footer-contact i {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: rgba(79, 179, 209, 0.14);
    color: var(--f-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    margin-top: 1px;
}
.footer-contact strong {
    color: #fff;
    font-weight: 700;
}
.footer-contact a {
    color: var(--f-muted);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-contact a:hover { color: var(--f-primary); }

/* Working hours mini-card */
.footer-hours {
    background: var(--f-card);
    border: 1px solid var(--f-border);
    border-radius: 14px;
    padding: 16px 18px;
}
.footer-hours-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.footer-hours-title i { color: var(--f-primary); }
.footer-hours-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--f-muted);
    padding: 5px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.footer-hours-row:last-child { border-bottom: none; }
.footer-hours-row span:last-child { color: var(--f-ink); font-weight: 600; }
.footer-hours-row .closed { color: #f87171; font-weight: 700; }

/* ============ BOTTOM BAR ============ */
.footer-bottom {
    border-top: 1px solid var(--f-border);
    padding: 22px 0;
    background: rgba(0,0,0,0.15);
    position: relative;
    z-index: 1;
}
.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.copyright-info {
    font-size: 0.82rem;
    color: var(--f-muted);
}
.copyright-info a {
    color: var(--f-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}
.copyright-info a:hover { color: #fff; }
.footer-bottom-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 24px;
}
.footer-bottom-links a {
    color: var(--f-muted);
    font-size: 0.82rem;
    text-decoration: none;
    transition: color 0.2s;
}
.footer-bottom-links a:hover { color: var(--f-primary); }

/* ============ BACK TO TOP ============ */
#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    display: none;
}
#back-to-top.show { display: block; }
#back-to-top .btn {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--f-primary);
    border: none;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px -8px rgba(79, 179, 209, 0.7);
    transition: all 0.25s;
    padding: 0;
}
#back-to-top .btn:hover {
    background: var(--f-primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -10px rgba(79, 179, 209, 0.9);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
    .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 40px;
    }
    .footer-col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 991px) {
    .newsletter-form { min-width: 100%; }
    .newsletter-inner { flex-direction: column; align-items: stretch; }
}
@media (max-width: 768px) {
    .footer-newsletter { padding: 30px 0; }
    .newsletter-text h3 { font-size: 1.25rem; }
    .newsletter-form {
        padding: 5px;
        flex-direction: column;
        background: transparent;
        border: none;
        border-radius: 0;
        gap: 10px;
    }
    .newsletter-field {
        background: rgba(255,255,255,0.06);
        border: 1px solid var(--f-border);
        border-radius: 60px;
        padding: 6px 18px;
    }
    .newsletter-btn {
        width: 100%;
        justify-content: center;
        padding: 14px;
    }

    .footer-main { padding: 50px 0 40px; }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .footer-col:last-child { grid-column: auto; }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }
    .footer-bottom-links { gap: 16px; }

    #back-to-top { bottom: 20px; right: 20px; }
    #back-to-top .btn { width: 42px; height: 42px; }
}
</style>

<!-- ============================================================
     FONT AWESOME UPGRADE (loads 6.5.1 only if 6.4+ is not detected)
     Runs once, idempotent, no side effects on other page JS.
     ============================================================ -->
<script>
(function () {
    'use strict';

    // If FA 6.4+ is already loaded, nothing to do.
    // We detect by probing whether fa-x-twitter ::before has content.
    var probe = document.createElement('i');
    probe.className = 'fab fa-x-twitter';
    probe.style.cssText = 'position:absolute;left:-9999px;top:-9999px;font-size:20px;';
    document.body.appendChild(probe);

    // Force layout so ::before content is computed
    void probe.offsetWidth;

    var content = window.getComputedStyle(probe, '::before').getPropertyValue('content');
    document.body.removeChild(probe);

    // FA 6.4+ renders X icon with codepoint \f8d6 → content becomes "𝕏" or "\"\\f8d6\""
    // FA 6.0.0-beta3 has NO such glyph → content === 'none' or '"none"' or '""'
    var missing = !content || content === 'none' || content === '""' || content === 'normal';

    if (!missing) return; // Already have the X icon; do nothing.

    // Load FA 6.5.1 stylesheet on top (safe — same family, newer version)
    var link = document.createElement('link');
    link.rel  = 'stylesheet';
    link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css';
    link.crossOrigin = 'anonymous';
    link.onload = function () {
        // Re-apply the old FA classes in case 6.5.1 no longer styles them
        // (not needed for standard icons — this is a no-op safety net)
        document.documentElement.classList.add('fa-6-5-loaded');
    };
    document.head.appendChild(link);
})();
</script>

<!-- ============================================================
     FOOTER BEHAVIOR
     ============================================================ -->
<script>
(function () {
    'use strict';

    /* ---- Back to top: show after 300px scroll ---- */
    var btn = document.getElementById('back-to-top');
    if (btn) {
        var toggle = function () {
            btn.classList.toggle('show', window.scrollY > 300);
        };
        window.addEventListener('scroll', toggle, { passive: true });
        toggle();

        var backBtn = btn.querySelector('button');
        if (backBtn) {
            backBtn.addEventListener('click', function () {
                window.scrollTo({ top: 0, behavior: 'smooth' });
            });
        }
    }

    /* ---- Newsletter: fake submit with feedback ---- */
    var forms = document.querySelectorAll('.newsletter-form');
    forms.forEach(function (form) {
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            var input = form.querySelector('input[type="email"]');
            var button = form.querySelector('.newsletter-btn');
            if (!input || !input.value) return;

            var original = button.innerHTML;
            button.disabled = true;
            button.innerHTML = '<i class="fas fa-check"></i> Subscribed';
            input.value = '';
            setTimeout(function () {
                button.disabled = false;
                button.innerHTML = original;
            }, 2400);
        });
    });
})();
</script>
<!-- Styles -->
<style>
/* ============================================
   GLOBAL RESET OVERRIDES & CONTAINER WIDTH
   ============================================ */
:root {
    --primary: #32abc6;
    --primary-dark: #248cae;
    --primary-light: #e0f4fa;
    --dark: #1a2e3b;
    --gray: #5a6e7a;
    --light-bg: #f8fafc;
}
body {
    font-family: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
}

/* ===== INCREASE CONTENT SPACE - REDUCE MARGINS ===== */
.container {
    max-width: 1320px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

@media (min-width: 1400px) {
    .container {
        max-width: 1400px !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

@media (max-width: 1200px) {
    .container {
        max-width: 1140px !important;
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 960px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Hero Section - Completely Clear Images */
.hero-carousel-wrapper {
    position: relative;
    overflow: hidden;
}
.hero-slide {
    min-height: 600px;
    height: 85vh;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* ===== VIDEO-ONLY SLIDE 1 ===== */
.hero-slide-video {
    position: relative;
    overflow: hidden;
    background-color: #000;
    /* Override flex centering so bottom-aligned content works */
    display: block !important;
}

.hero-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* Dark overlay for text readability - NO BLUR */
.hero-overlay-dark {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 1;
}

/* Slide 1: gradient overlay (light at top so video shows, dark at bottom for text) */
.hero-slide-video .hero-overlay-dark {
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.10) 0%,
        rgba(0, 0, 0, 0.20) 45%,
        rgba(0, 0, 0, 0.75) 100%
    );
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
    z-index: 2;
    position: relative;
}

/* ===== BOTTOM-ALIGNED HERO CONTENT (slide 1 only) ===== */
.hero-container-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    padding: 0 24px 75px 24px;
    text-align: center;
    z-index: 3;
}

.hero-slide-video .hero-container {
    z-index: 3;
}

/* Slightly smaller text on slide 1 so it fits nicely at the bottom */
.hero-container-bottom .hero-title {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}
.hero-container-bottom .hero-description {
    font-size: 1rem;
    margin-bottom: 1.25rem;
    max-width: 820px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(10,35,45,0.85);
    padding: 8px 24px;
    border-radius: 60px;
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    margin-bottom: 1.5rem;
    border: none;
}
.hero-badge.service-badge {
    background: rgba(50,171,198,0.85);
}
.hero-service-icon {
    margin-bottom: 20px;
    animation: float 3s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.hero-service-icon img {
    width: 80px;
    height: 80px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}
.hero-title {
    font-size: 3.8rem;
    font-weight: 800;
    color: white;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.hero-service-title {
    font-size: 3rem;
    font-weight: 800;
    color: white;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.hero-service-title .highlight {
    color: #ffd966;
    position: relative;
    display: inline-block;
}
.hero-divider {
    width: 70px;
    height: 3px;
    background: var(--primary);
    margin: 1rem auto;
    border-radius: 4px;
}
.hero-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.95);
    max-width: 700px;
    margin: 0 auto 1.5rem;
    text-shadow: 0 1px 10px rgba(0,0,0,0.3);
}
.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.btn-hero-primary {
    background: var(--primary);
    color: white;
    padding: 12px 32px;
    border-radius: 50px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.25s;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.btn-hero-primary:hover {
    background: #ffd966;
    color: #1a2e3b;
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -8px rgba(0,0,0,0.25);
}

/* Slick Carousel Overrides */
.banner-carousel {
    position: relative;
}
.banner-carousel .slick-dots {
    bottom: 25px;
    z-index: 10;
}
.banner-carousel .slick-dots li button:before {
    color: white;
    opacity: 0.6;
    font-size: 10px;
}
.banner-carousel .slick-dots li.slick-active button:before {
    color: var(--primary);
    opacity: 1;
}
.banner-carousel .slick-prev, 
.banner-carousel .slick-next {
    width: 48px;
    height: 48px;
    background: rgba(0,0,0,0.4);
    border-radius: 50%;
    transition: all 0.2s;
    z-index: 10;
}
.banner-carousel .slick-prev:hover, 
.banner-carousel .slick-next:hover {
    background: var(--primary);
}
.banner-carousel .slick-prev:before, 
.banner-carousel .slick-next:before {
    font-size: 18px;
    opacity: 1;
}
.banner-carousel .slick-prev {
    left: 20px;
}
.banner-carousel .slick-next {
    right: 20px;
}

/* Experience Counter */
.exp-counter {
    padding: 50px 0;
    background: linear-gradient(135deg, var(--dark) 0%, #0f2c36 100%);
    margin-top: 0;
    position: relative;
    z-index: 5;
}
.exp-card {
    text-align: center;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(4px);
    border-radius: 60px;
    padding: 25px 30px;
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.exp-icon {
    width: 50px;
    height: 50px;
    background: rgba(50,171,198,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.exp-icon i {
    font-size: 1.5rem;
    color: var(--primary);
}
.exp-card h3 {
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
}
.exp-card h3 span:first-child {
    color: var(--primary);
    font-size: 2.2rem;
}

/* Section Headers */
.section-header-modern {
    text-align: center;
    margin-bottom: 60px;
}
.section-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-light);
    color: var(--primary-dark);
    padding: 6px 20px;
    border-radius: 60px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 20px;
}
.section-header-modern h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 15px;
}
.section-header-modern h2 .accent {
    color: var(--primary);
}
.section-line {
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), #7fcddf);
    margin: 0 auto 20px;
    border-radius: 4px;
}
.section-header-modern p {
    max-width: 750px;
    margin: 0 auto;
    color: var(--gray);
    font-size: 1rem;
}

/* ===== SERVICES - 2 CARDS PER ROW (LARGER) ===== */
.services-modern {
    padding: 80px 0;
    background: white;
}
.services-flex-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0;
}

/* Service Card - Larger */
.service-card-new {
    background: #ffffff;
    border-radius: 28px;
    overflow: hidden;
    transition: all 0.4s ease;
    border: 1px solid rgba(50,171,198,0.12);
    box-shadow: 0 8px 30px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
}

.service-card-new:hover {
    transform: translateY(-8px);
    border-color: rgba(50,171,198,0.3);
    box-shadow: 0 25px 50px -12px rgba(50,171,198,0.15);
}

/* Service Image - Larger */
.service-image-top {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
}

.service-image-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.service-card-new:hover .service-image-top img {
    transform: scale(1.06);
}

/* Service Content Wrapper */
.service-content-wrapper {
    padding: 30px 32px 34px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.service-content-wrapper h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 14px;
    line-height: 1.3;
}

.service-content-wrapper h3 a {
    color: var(--dark);
    text-decoration: none;
    transition: color 0.3s;
}

.service-content-wrapper h3 a:hover {
    color: var(--primary);
}

.service-content-wrapper p {
    color: var(--gray);
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 22px;
    flex: 1;
}

.service-content-wrapper .card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    transition: all 0.3s;
    align-self: flex-start;
    padding: 8px 0;
    border-bottom: 2px solid transparent;
}

.service-content-wrapper .card-link:hover {
    gap: 14px;
    color: var(--primary-dark);
    border-bottom-color: var(--primary);
}

/* Helpline Modern */
.helpline-modern {
    background: linear-gradient(120deg, #0e3b48, #166b7e);
    padding: 50px 0;
}
.helpline-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    border-radius: 80px;
    padding: 20px 45px;
}
.helpline-text {
    display: flex;
    align-items: center;
    gap: 20px;
}
.helpline-text i {
    font-size: 2.5rem;
    color: #ffd966;
}
.helpline-text h4 {
    color: white;
    margin: 0;
    font-size: 1.2rem;
}
.helpline-number {
    font-size: 2rem;
    font-weight: 800;
    color: #ffd966;
    letter-spacing: 1px;
}
.btn-helpline-call {
    background: white;
    color: #166b7e;
    padding: 14px 32px;
    border-radius: 60px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
    text-decoration: none;
}
.btn-helpline-call:hover {
    background: #ffd966;
    color: #0e3b48;
    transform: scale(1.02);
}

/* Stories Section */
.stories-renovated {
    padding: 80px 0;
    background: var(--light-bg);
}
.stories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 50px;
}
.story-entry {
    background: white;
    border-radius: 28px;
    overflow: hidden;
    transition: all 0.3s;
    box-shadow: 0 8px 20px rgba(0,0,0,0.03);
}
.story-entry:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 35px -12px rgba(0,0,0,0.1);
}
.story-visual {
    position: relative;
    height: 220px;
    overflow: hidden;
}
.story-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s;
}
.story-entry:hover .story-visual img {
    transform: scale(1.05);
}
.quote-mark {
    position: absolute;
    bottom: -20px;
    right: 20px;
    background: var(--primary);
    width: 50px;
    height: 50px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    box-shadow: 0 6px 15px rgba(50,171,198,0.3);
}
.story-details {
    padding: 28px 24px 24px;
}
.story-quote-text {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}
.story-quote-text i {
    color: var(--primary);
    font-size: 1.2rem;
    opacity: 0.7;
}
.story-quote-text p {
    color: var(--dark);
    font-style: italic;
    line-height: 1.6;
    font-size: 0.9rem;
}
.story-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.05);
}
.beneficiary-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.beneficiary-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
.beneficiary-info h5 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 4px;
}
.beneficiary-info span {
    font-size: 0.7rem;
    color: var(--primary);
    font-weight: 600;
}
.story-cta {
    background: var(--primary-light);
    padding: 8px 20px;
    border-radius: 40px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-dark);
    transition: all 0.2s;
    text-decoration: none;
}
.story-cta:hover {
    background: var(--primary);
    color: white;
}
.stories-footer {
    text-align: center;
}
.btn-outline-accent {
    border: 2px solid var(--primary);
    background: transparent;
    padding: 12px 36px;
    border-radius: 60px;
    font-weight: 600;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
    text-decoration: none;
}
.btn-outline-accent:hover {
    background: var(--primary);
    color: white;
    gap: 16px;
}

/* ===== YOUTUBE SECTION ===== */
.youtube-section {
    padding: 80px 0;
    background: #ffffff;
}

.youtube-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.youtube-item {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
    background: #0a0a0a;
    position: relative;
}

.youtube-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2);
}

.youtube-iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.youtube-iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* YouTube footer */
.youtube-footer {
    text-align: center;
}

.youtube-footer .btn-solid-accent {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #ff0000;
    color: white;
    padding: 14px 38px;
    border-radius: 60px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
}

.youtube-footer .btn-solid-accent:hover {
    background: #cc0000;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px -8px rgba(255, 0, 0, 0.3);
    gap: 16px;
    color: white;
}

.youtube-footer .btn-solid-accent i {
    font-size: 1.2rem;
}

/* YouTube placeholder when no videos */
.youtube-placeholder {
    text-align: center;
    padding: 60px 20px;
    background: var(--light-bg);
    border-radius: 32px;
    border: 2px dashed rgba(50, 171, 198, 0.2);
}

.youtube-placeholder i {
    font-size: 3.5rem;
    color: #ff0000;
    opacity: 0.5;
    margin-bottom: 20px;
    display: block;
}

.youtube-placeholder p {
    color: var(--gray);
    font-size: 1.1rem;
    margin: 0;
}

/* News Section */
.news-modern {
    padding: 80px 0;
    background: white;
}
.news-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}
.news-item {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #edf2f5;
    transition: all 0.3s;
}
.news-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 30px -12px rgba(0,0,0,0.08);
    border-color: rgba(50,171,198,0.2);
}
.news-thumb {
    height: 200px;
    overflow: hidden;
}
.news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}
.news-item:hover .news-thumb img {
    transform: scale(1.03);
}
.news-content {
    padding: 24px 22px;
}
.news-badge {
    font-size: 0.7rem;
    color: var(--gray);
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0f4f7;
    padding: 4px 12px;
    border-radius: 20px;
}
.news-content h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.4;
}
.news-content h3 a {
    color: var(--dark);
    text-decoration: none;
}
.news-content h3 a:hover {
    color: var(--primary);
}
.news-content p {
    color: var(--gray);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 16px;
}
.read-more-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.read-more-link:hover {
    gap: 12px;
    color: var(--primary-dark);
}
.news-footer {
    text-align: center;
}
.btn-solid-accent {
    background: var(--primary);
    color: white;
    padding: 12px 36px;
    border-radius: 60px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
    text-decoration: none;
}
.btn-solid-accent:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    gap: 16px;
    color: white;
}
.no-stories {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px;
    background: white;
    border-radius: 32px;
}

/* Responsive */
@media (max-width: 1100px) {
    .services-flex-grid {
        grid-template-columns: 1fr;
        max-width: 700px;
    }
    .service-image-top {
        height: 260px;
    }
}

@media (max-width: 992px) {
    .services-flex-grid {
        max-width: 600px;
    }
    .service-image-top {
        height: 240px;
    }
    .stories-grid { grid-template-columns: repeat(2, 1fr); }
    .news-cards { grid-template-columns: repeat(2, 1fr); }
    .youtube-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .hero-title { font-size: 2.2rem; }
    .hero-service-title { font-size: 1.8rem; }
    .hero-slide { min-height: 500px; height: auto; padding: 80px 0; }
    .hero-container-bottom { padding: 0 18px 60px 18px; }
    .hero-container-bottom .hero-title { font-size: 1.9rem; }
    .hero-container-bottom .hero-description { font-size: 0.9rem; }
    .services-flex-grid { grid-template-columns: 1fr; max-width: 100%; }
    .service-image-top { height: 200px; }
    .service-content-wrapper { padding: 20px 22px 26px; }
    .service-content-wrapper h3 { font-size: 1.2rem; }
    .stories-grid { grid-template-columns: 1fr; }
    .news-cards { grid-template-columns: 1fr; }
    .youtube-grid { grid-template-columns: 1fr 1fr; }
    .helpline-wrapper { flex-direction: column; text-align: center; border-radius: 40px; padding: 30px; }
    .exp-card h3 { font-size: 1.3rem; }
    .exp-card { flex-direction: column; }
    .section-header-modern h2 { font-size: 2rem; }
    .hero-service-icon img { width: 60px; height: 60px; }
    .section-header-modern p {
        max-width: 100%;
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .hero-title { font-size: 1.8rem; }
    .hero-service-title { font-size: 1.5rem; }
    .hero-container-bottom { padding: 0 14px 55px 14px; }
    .hero-container-bottom .hero-title { font-size: 1.6rem; }
    .hero-buttons { flex-direction: column; align-items: center; }
    .btn-hero-primary { width: 100%; justify-content: center; }
    .service-image-top { height: 170px; }
    .service-content-wrapper h3 { font-size: 1.1rem; }
    .service-content-wrapper p { font-size: 0.85rem; }
    .youtube-grid { grid-template-columns: 1fr; }
}
</style>

<!-- jQuery and Slick Carousel - Loaded BEFORE initialization -->
<script src="plugins/jQuery/jquery.min.js"></script>
<script src="plugins/slick/slick.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>

<script>
// Initialize AOS immediately
document.addEventListener('DOMContentLoaded', function() {
    AOS.init({
        duration: 800,
        once: true,
        offset: 50
    });
});

// Year counter - Execute immediately
(function() {
    var startYear = 2006;
    var currentYear = new Date().getFullYear();
    var yearsPassed = currentYear - startYear;
    var yearSpan = document.getElementById("yearCount");
    if (yearSpan) yearSpan.textContent = yearsPassed;
})();

// ================================================================
// SLICK CAROUSEL WITH VIDEO-FIRST BEHAVIOR
// Slide 1 = VIDEO ONLY, content aligned to bottom.
// Slide 1 waits for video to END, then advances.
// Video does NOT pause on hover — plays continuously to the end.
// Slides 2-5 auto-advance at normal speed.
// ================================================================
(function() {
    var carouselInitialized = false;
    var videoSlideIndex = 0; // Slide 1 (index 0) has the video
    var normalAutoplaySpeed = 5000; // 5 seconds for slides 2-5
    var $carousel;

    function initCarousel() {
        if (carouselInitialized) return;
        if (typeof $.fn.slick === 'undefined' || !$('.banner-carousel').length) return;

        carouselInitialized = true;
        $carousel = $('.banner-carousel');

        $carousel.slick({
            dots: true,
            arrows: true,
            infinite: true,
            speed: 800,
            fade: true,
            // Start autoplay DISABLED — we control it manually
            autoplay: false,
            autoplaySpeed: normalAutoplaySpeed,
            // ===== HOVER BEHAVIOR DISABLED =====
            // Video plays continuously, carousel doesn't pause on hover
            pauseOnHover: false,
            pauseOnFocus: false,
            pauseOnDotsHover: false,
            cssEase: 'ease-in-out',
            slidesToShow: 1,
            slidesToScroll: 1,
            lazyLoad: 'ondemand',
            preloadImages: false,
            waitForAnimate: false,
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                        arrows: false,
                        dots: true
                    }
                }
            ]
        });

        // Attach all event handlers
        setupVideoHandlers();

        // Kick things off
        handleSlideEntry(0);
    }

    // ===== CORE LOGIC: control autoplay based on slide =====
    function handleSlideEntry(slideIndex) {
        var video = document.querySelector('.hero-video-bg');

        if (slideIndex === videoSlideIndex) {
            // ---- SLIDE 1: Play video fully, THEN advance ----
            if (video) {
                // Disable slick's own autoplay so it doesn't cut the video short
                $carousel.slick('slickPause');

                // Reset video to start (in case it played before)
                try {
                    video.currentTime = 0;
                } catch (e) { /* ignore */ }

                // Play the video
                var playPromise = video.play();
                if (playPromise !== undefined) {
                    playPromise.catch(function(err) {
                        console.log('Video autoplay blocked:', err);
                        // Fallback: if browser blocks autoplay, advance after normal delay
                        setTimeout(function() {
                            $carousel.slick('slickNext');
                        }, normalAutoplaySpeed);
                    });
                }
            } else {
                // No video element? Just advance normally.
                setTimeout(function() {
                    $carousel.slick('slickNext');
                }, normalAutoplaySpeed);
            }
        } else {
            // ---- SLIDES 2-5: Normal timed autoplay ----
            if (video) {
                video.pause();
            }
            $carousel.slick('slickPlay');
        }
    }

    // ===== EVENT HANDLERS =====
    function setupVideoHandlers() {
        var video = document.querySelector('.hero-video-bg');
        if (!video) return;

        // ---- When the video ends, advance to slide 2 ----
        video.addEventListener('ended', function() {
            var slick = $carousel.slick('getSlick');
            if (slick && slick.currentSlide === videoSlideIndex) {
                $carousel.slick('slickNext');
            }
        });

        // ---- Pause video when leaving slide 1 ----
        $carousel.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
            if (currentSlide === videoSlideIndex && nextSlide !== videoSlideIndex) {
                video.pause();
            }
        });

        // ---- Handle slide entry after change completes ----
        $carousel.on('afterChange', function(event, slick, currentSlide) {
            handleSlideEntry(currentSlide);
        });

        // ===== NO HOVER PAUSE/RESUME =====
        // Video plays continuously until it ends, regardless of mouse position.
        // (Hover pause/resume handlers removed as requested)
    }

    // ===== INITIALIZATION =====
    function tryInit() {
        if (typeof $ !== 'undefined' && typeof $.fn.slick !== 'undefined') {
            initCarousel();
        } else {
            var checkInterval = setInterval(function() {
                if (typeof $ !== 'undefined' && typeof $.fn.slick !== 'undefined') {
                    clearInterval(checkInterval);
                    initCarousel();
                }
            }, 100);
            setTimeout(function() {
                clearInterval(checkInterval);
                initCarousel();
            }, 5000);
        }
    }

    // DOM ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', tryInit);
    } else {
        tryInit();
    }
})();
</script>

<script src="plugins/bootstrap/bootstrap.min.js" defer></script>
<script src="js/script.js" defer></script>

</body>
</html>

Latest requests

# Url Url Source Date
1 https://legalaidrwanda.org/ 2026-10-16 15:32:14
2 https://www.texarkanatwins.com/%25… 2026-10-16 15:32:11
3 https://www.texarkanatwins.com/%25… 2026-10-16 15:32:11
4 https://auth.mediacorp.sg/u/login?… 2026-10-16 15:32:10
5 https://www.texarkanatwins.com/%25… 2026-10-16 15:32:09
6 https://www.texarkanatwins.com/%25… 2026-10-16 15:32:06
7 https://auth.mediacorp.sg/u/login?… 2026-10-16 15:32:06
8 https://www.texarkanatwins.com/%25… 2026-10-16 15:32:04
9 https://www.thebolditalic.com/?gi=… 2026-10-16 15:32:03
10 https://www.texarkanatwins.com/%25… 2026-10-16 15:32:02
11 https://www.texarkanatwins.com/%25… 2026-10-16 15:32:01
12 https://www.texarkanatwins.com/%25… 2026-10-16 15:32:01
13 https://www.texarkanatwins.com/%25… 2026-10-16 15:32:00
14 https://auth.mediacorp.sg/u/login?… 2026-10-16 15:31:59
15 http://ww547.maturelovepics.com/?t… 2026-10-16 15:31:55
16 https://auth.mediacorp.sg/u/login?… 2026-10-16 15:31:54
17 https://www.texarkanatwins.com/%25… 2026-10-16 15:31:52
18 https://www.texarkanatwins.com/%25… 2026-10-16 15:31:52
19 https://www.thebolditalic.com/?gi=… 2026-10-16 15:31:51
20 https://www.thebolditalic.com/?gi=… 2026-10-16 15:31:47