<?php
include 'include/header.php'; 

?>


<!-- Add Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<!-- Custom Styles -->
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');
   
    :root {
        --primary: #5b21b6;
        --primary-light: #7c3aed;
        --primary-dark: #4c1d95;
        --secondary: #0ea5e9;
        --success: #10b981;
        --warning: #f59e0b;
        --danger: #ef4444;
        --dark: #1e293b;
        --light: #f8fafc;
        --gray-50: #f9fafb;
        --gray-100: #f3f4f6;
        --gray-200: #e5e7eb;
        --gray-300: #d1d5db;
        --gray-600: #4b5563;
        --gray-700: #374151;
        --gray-800: #1f2937;
        --gray-900: #111827;
    }
   
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
   
    body {
        font-family: 'Inter', sans-serif;
        color: var(--gray-900);
        line-height: 1.6;
        background-color: var(--gray-50);
    }
   
    .font-poppins {
        font-family: 'Poppins', sans-serif;
    }
   
    .font-inter {
        font-family: 'Inter', sans-serif;
    }
   
    /* Container */
    .container {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 1rem;
    }
   
    /* Hero Section */
    .hero-section {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        border-bottom: 1px solid var(--gray-200);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        position: relative;
        overflow: hidden;
    }

    .hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>');
        opacity: 0.5;
    }
   
    .hero-content {
        padding: 3rem 0;
        position: relative;
        z-index: 1;
    }
   
    .hero-icon {
        width: 64px;
        height: 64px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
        border: 2px solid rgba(255, 255, 255, 0.3);
    }
   
    .hero-icon i {
        font-size: 2rem;
        color: white;
    }
   
    .hero-title {
        font-size: 3rem;
        font-weight: 800;
        color: white;
        margin: 1rem 0 0.5rem;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .hero-subtitle {
        color: rgba(255, 255, 255, 0.9);
        font-size: 1.125rem;
        font-weight: 400;
    }
   
    /* Layout */
    .main-layout {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 2.5rem 0;
    }
   
    @media (min-width: 1024px) {
        .main-layout {
            flex-direction: row;
        }
    }
   
    .sidebar {
        width: 100%;
    }
   
    @media (min-width: 1024px) {
        .sidebar {
            width: 25%;
            flex-shrink: 0;
        }
    }
   
    .main-content {
        width: 100%;
    }
   
    @media (min-width: 1024px) {
        .main-content {
            width: 75%;
        }
    }
   
    /* Card */
    .card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.3s ease;
        margin-bottom: 1.5rem;
    }
   
    .card:hover {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }
   
    .card-header {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--gray-200);
        background: var(--gray-50);
    }
   
    .card-header-yellow {
        background: #eab308;
        color: white;
        border: none;
    }
   
    .card-title {
        font-size: 1.25rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
   
    .card-body {
        padding: 0;
    }
   
    /* Navigation */
    .nav-list {
        list-style: none;
    }
   
    .nav-item {
        position: relative;
        border-bottom: 1px solid var(--gray-100);
    }
   
    .nav-item:last-child {
        border-bottom: none;
    }
   
    .nav-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem 1.5rem;
        color: var(--gray-700);
        text-decoration: none;
        transition: all 0.2s ease;
        font-weight: 500;
        position: relative;
    }
   
    .nav-link::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--primary);
        transform: scaleY(0);
        transition: transform 0.2s ease;
    }
   
    .nav-link:hover,
    .nav-item.active .nav-link {
        background: #faf5ff;
        color: var(--primary);
    }
   
    .nav-link:hover::before,
    .nav-item.active .nav-link::before {
        transform: scaleY(1);
    }
   
    .nav-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        color: white;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }
   
    .nav-link:hover .nav-icon {
        transform: scale(1.1);
    }
   
    .icon-purple { background: var(--primary); }
    .icon-blue { background: var(--secondary); }
    .icon-green { background: var(--success); }
    .icon-orange { background: var(--warning); }
    .icon-red { background: var(--danger); }
   
    /* Stats Card */
    .stats-card {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        border-radius: 16px;
        padding: 1.5rem;
        color: white;
        margin-top: 1.5rem;
        box-shadow: 0 4px 6px rgba(91, 33, 182, 0.3);
    }
   
    .stats-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
   
    .stats-header i {
        font-size: 2rem;
    }
   
    .stats-label {
        font-size: 0.875rem;
        opacity: 0.9;
    }
   
    .stats-value {
        font-size: 2rem;
        font-weight: 700;
    }
   
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        margin-top: 1rem;
    }
   
    .stats-item {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        padding: 0.875rem;
        backdrop-filter: blur(10px);
    }
   
    .stats-item-label {
        font-size: 0.75rem;
        opacity: 0.9;
    }
   
    .stats-item-value {
        font-size: 1.25rem;
        font-weight: 700;
    }
   
    /* Content Section */
    .content-card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        padding: 2.5rem;
        margin-bottom: 2rem;
    }
   
    .section-heading {
        font-size: 2rem;
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .section-heading i {
        color: var(--primary);
    }

    .section-description {
        color: var(--gray-600);
        font-size: 1rem;
        margin-bottom: 2rem;
        line-height: 1.6;
    }

    /* Leadership Section */
    .leadership-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    .leadership-card {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        border-radius: 16px;
        padding: 2rem;
        color: white;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 6px rgba(91, 33, 182, 0.2);
        transition: all 0.3s ease;
    }

    .leadership-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transition: all 0.3s ease;
    }

    .leadership-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(91, 33, 182, 0.3);
    }

    .leadership-card:hover::before {
        top: -30%;
        right: -30%;
    }

    .leadership-content {
        position: relative;
        z-index: 1;
    }

    .leadership-role {
        font-size: 0.875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        opacity: 0.9;
        margin-bottom: 0.5rem;
    }

    .leadership-name {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.75rem;
    }

    .leadership-affiliation {
        font-size: 0.875rem;
        opacity: 0.9;
        line-height: 1.5;
    }

    .leadership-icon {
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        font-size: 4rem;
        opacity: 0.1;
    }

    /* Board Members Grid */
    .board-members-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.5rem;
    }

    .member-card {
        background: white;
        border: 2px solid var(--gray-200);
        border-radius: 12px;
        padding: 1.5rem;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .member-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .member-card:hover {
        border-color: var(--primary);
        box-shadow: 0 8px 20px rgba(91, 33, 182, 0.15);
        transform: translateY(-3px);
    }

    .member-card:hover::before {
        transform: scaleX(1);
    }

    .member-avatar {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
        font-size: 1.5rem;
        font-weight: 700;
        color: white;
        box-shadow: 0 4px 6px rgba(91, 33, 182, 0.3);
    }

    .member-prefix {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--primary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.25rem;
    }

    .member-name {
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: 0.5rem;
        line-height: 1.3;
    }

    .member-affiliation {
        font-size: 0.875rem;
        color: var(--gray-600);
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .member-location {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0.75rem;
        font-size: 0.75rem;
        color: var(--gray-500);
    }

    .member-location i {
        color: var(--secondary);
    }

    /* Search and Filter */
    .controls-section {
        background: white;
        border-radius: 16px;
        padding: 1.5rem;
        margin-bottom: 2rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .search-box {
        position: relative;
        margin-bottom: 1rem;
    }

    .search-box input {
        width: 100%;
        padding: 0.875rem 1rem 0.875rem 3rem;
        border: 2px solid var(--gray-200);
        border-radius: 12px;
        font-size: 1rem;
        transition: all 0.2s ease;
        font-family: 'Inter', sans-serif;
    }

    .search-box input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(91, 33, 182, 0.1);
    }

    .search-box i {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--gray-400);
    }

    .filter-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .filter-tag {
        padding: 0.5rem 1rem;
        background: var(--gray-100);
        border: 2px solid transparent;
        border-radius: 8px;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--gray-700);
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .filter-tag:hover,
    .filter-tag.active {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }

    /* Stats Bar */
    .stats-bar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .stat-box {
        background: white;
        border-radius: 12px;
        padding: 1.25rem;
        text-align: center;
        border: 2px solid var(--gray-200);
        transition: all 0.2s ease;
    }

    .stat-box:hover {
        border-color: var(--primary);
        transform: translateY(-2px);
    }

    .stat-number {
        font-size: 2rem;
        font-weight: 700;
        color: var(--primary);
        margin-bottom: 0.25rem;
    }

    .stat-label {
        font-size: 0.875rem;
        color: var(--gray-600);
        font-weight: 500;
    }

    /* Utility Classes */
    .flex { display: flex; }
    .items-center { align-items: center; }
    .gap-4 { gap: 1rem; }
    .mb-4 { margin-bottom: 1rem; }

    /* Responsive */
    @media (max-width: 768px) {
        .hero-title {
            font-size: 2rem;
        }

        .section-heading {
            font-size: 1.5rem;
        }

        .leadership-grid {
            grid-template-columns: 1fr;
        }

        .board-members-grid {
            grid-template-columns: 1fr;
        }

        .stats-bar {
            grid-template-columns: repeat(2, 1fr);
        }
    }
</style>

<main class="font-inter">
    <!-- Hero Section -->
    <div class="hero-section">
        <div class="container">
            <div class="hero-content">
                <div class="flex items-center gap-4 mb-4">
                    <div class="hero-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <div>
                        <h1 class="hero-title font-poppins">
                            Board Members
                        </h1>
                        <p class="hero-subtitle">Distinguished scholars and researchers guiding our academic excellence</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Area -->
    <div class="container">
        <div class="main-layout">
            <!-- Left Sidebar -->
            <?php include 'include/sidebar.php'; ?>

            <!-- Right Content Area -->
            <section class="main-content">
                <!-- Stats Bar -->
                <div class="stats-bar">
                    <div class="stat-box">
                        <div class="stat-number">2</div>
                        <div class="stat-label">Editorial Leadership</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-number">18</div>
                        <div class="stat-label">Board Members</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-number">12+</div>
                        <div class="stat-label">Countries</div>
                    </div>
                </div>

           

                <!-- Editorial Leadership -->
                <div class="content-card">
                    <h2 class="section-heading font-poppins">
                        <i class="fas fa-crown"></i>
                        Editorial Leadership
                    </h2>
                    <p class="section-description">
                        Our editorial leadership team provides strategic direction and ensures the highest standards of academic excellence.
                    </p>
                    
                    <div class="leadership-grid">
                        <div class="leadership-card">
                            <div class="leadership-content">
                                <div class="leadership-role">Editor in Chief</div>
                                <div class="leadership-name">Dr Grace Uchey</div>
                                <div class="leadership-affiliation">St Kitts-Nevis-Anguilla, West Indies</div>
                            </div>
                            <i class="fas fa-star leadership-icon"></i>
                        </div>
                        
                        <div class="leadership-card">
                            <div class="leadership-content">
                                <div class="leadership-role">Associate Managing Editor</div>
                                <div class="leadership-name">Dr. Mathew Thorpe</div>
                                <div class="leadership-affiliation">Brussels, Belgium (EU), International</div>
                            </div>
                            <i class="fas fa-certificate leadership-icon"></i>
                        </div>
                    </div>
                </div>

                <!-- Board Members -->
                <div class="content-card">
                    <h2 class="section-heading font-poppins">
                        <i class="fas fa-users-cog"></i>
                        Board Members
                    </h2>
                    <p class="section-description">
                        Our distinguished board members bring diverse expertise and global perspectives to guide our journal's academic mission.
                    </p>
                    
                    <div class="board-members-grid" id="boardMembersGrid">
                        <!-- Member Card 1 -->
                        <div class="member-card" data-region="asia">
                            <div class="member-avatar">JR</div>
                            <div class="member-prefix">Prof.</div>
                            <div class="member-name">Jean-Claude Roger</div>
                            <div class="member-affiliation">Director, Francophonie</div>
                            <div class="member-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>Unknown</span>
                            </div>
                        </div>

                        <!-- Member Card 2 -->
                        <div class="member-card" data-region="asia">
                            <div class="member-avatar">WY</div>
                            <div class="member-prefix">Prof.</div>
                            <div class="member-name">Wan-Chong Yeong</div>
                            <div class="member-affiliation">Peking TIdo University, China</div>
                            <div class="member-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>China</span>
                            </div>
                        </div>

                        <!-- Member Card 3 -->
                        <div class="member-card" data-region="asia">
                            <div class="member-avatar">KC</div>
                            <div class="member-prefix">Dr.</div>
                            <div class="member-name">Kumarsen Chetaabattutian</div>
                            <div class="member-affiliation">University of Calabar, Nigeria, Nigeria</div>
                            <div class="member-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>Nigeria</span>
                            </div>
                        </div>

                        <!-- Member Card 4 -->
                        <div class="member-card" data-region="asia">
                            <div class="member-avatar">AT</div>
                            <div class="member-prefix">Dr.</div>
                            <div class="member-name">Arslen Tougui</div>
                            <div class="member-affiliation">Selamat University, Yenisjy, Nigeria, Turkey</div>
                            <div class="member-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>Turkey</span>
                            </div>
                        </div>

                        <!-- Member Card 5 -->
                        <div class="member-card" data-region="africa">
                            <div class="member-avatar">HY</div>
                            <div class="member-prefix">Dr.</div>
                            <div class="member-name">Hisabudin Rahman YM</div>
                            <div class="member-affiliation">Cairo Stain Habesha, Non-India</div>
                            <div class="member-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>India</span>
                            </div>
                        </div>

                        <!-- Member Card 6 -->
                        <div class="member-card" data-region="africa">
                            <div class="member-avatar">PE</div>
                            <div class="member-prefix">Dr.</div>
                            <div class="member-name">Prasant Kumar Gupta</div>
                            <div class="member-affiliation">Calcutta University, Kolkata, West India</div>
                            <div class="member-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>India</span>
                            </div>
                        </div>

                        <!-- Member Card 7 -->
                        <div class="member-card" data-region="africa">
                            <div class="member-avatar">RA</div>
                            <div class="member-prefix">Dr.</div>
                            <div class="member-name">Rimoldi Aduardo Pahad</div>
                            <div class="member-affiliation">Haile Selassie University, Addis-Ababa, Zimbabwe</div>
                            <div class="member-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>Ethiopia</span>
                            </div>
                        </div>

                        <!-- Member Card 8 -->
                        <div class="member-card" data-region="asia">
                            <div class="member-avatar">AT</div>
                            <div class="member-prefix">Dr.</div>
                            <div class="member-name">Andrew R Tojo</div>
                            <div class="member-affiliation">Lamba Institute of Social Sciences, Kerala, India</div>
                            <div class="member-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>India</span>
                            </div>
                        </div>

                        <!-- Member Card 9 -->
                        <div class="member-card" data-region="asia">
                            <div class="member-avatar">SH</div>
                            <div class="member-prefix">Prof.</div>
                            <div class="member-name">Siu-Yiu Horung</div>
                            <div class="member-affiliation">Ningxia University, Yunnan, Hong Kong, China</div>
                            <div class="member-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>China</span>
                            </div>
                        </div>

                        <!-- Member Card 10 -->
                        <div class="member-card" data-region="asia">
                            <div class="member-avatar">KN</div>
                            <div class="member-prefix">Dr.</div>
                            <div class="member-name">Kai-Tai Nhyom</div>
                            <div class="member-affiliation">Mongolian University of Hong Kong, Hong Kong</div>
                            <div class="member-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>Hong Kong</span>
                            </div>
                        </div>

                        <!-- Member Card 11 -->
                        <div class="member-card" data-region="africa">
                            <div class="member-avatar">RJ</div>
                            <div class="member-prefix">Dr.</div>
                            <div class="member-name">Radloff Rene Janson</div>
                            <div class="member-affiliation">Zaire Jumber University, Congo-India</div>
                            <div class="member-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>India</span>
                            </div>
                        </div>

                        <!-- Member Card 12 -->
                        <div class="member-card" data-region="africa">
                            <div class="member-avatar">BT</div>
                            <div class="member-prefix">Dr.</div>
                            <div class="member-name">Berta Bisky Yonge</div>
                            <div class="member-affiliation">Riyeri University of Lake Azidi Tanzania</div>
                            <div class="member-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>Tanzania</span>
                            </div>
                        </div>

                        <!-- Member Card 13 -->
                        <div class="member-card" data-region="asia">
                            <div class="member-avatar">PC</div>
                            <div class="member-prefix">Dr.</div>
                            <div class="member-name">Pascal Chaithan</div>
                            <div class="member-affiliation">Venu Paribattan, Rajasthen, India</div>
                            <div class="member-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>India</span>
                            </div>
                        </div>

                        <!-- Member Card 14 -->
                        <div class="member-card" data-region="asia">
                            <div class="member-avatar">AP</div>
                            <div class="member-prefix">Dr.</div>
                            <div class="member-name">Arushee Venkata Parthasarathy</div>
                            <div class="member-affiliation">Amrita College of Social Sciences, Kerala, India</div>
                            <div class="member-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>India</span>
                            </div>
                        </div>

                        <!-- Member Card 15 -->
                        <div class="member-card" data-region="africa">
                            <div class="member-avatar">SR</div>
                            <div class="member-prefix">Dr.</div>
                            <div class="member-name">Summers Karthav Bas</div>
                            <div class="member-affiliation">Lagos League of Technology, Rakatumbwe, Nigeria</div>
                            <div class="member-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>Nigeria</span>
                            </div>
                        </div>

                        <!-- Member Card 16 -->
                        <div class="member-card" data-region="asia">
                            <div class="member-avatar">YA</div>
                            <div class="member-prefix">Dr.</div>
                            <div class="member-name">Yazid Wirahman Afriella</div>
                            <div class="member-affiliation">Ubramity, Mahamany University (Selatan), India</div>
                            <div class="member-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>Indonesia</span>
                            </div>
                        </div>

                        <!-- Member Card 17 -->
                        <div class="member-card" data-region="africa">
                            <div class="member-avatar">NN</div>
                            <div class="member-prefix">Dr.</div>
                            <div class="member-name">Fermentobo Nyeragoba</div>
                            <div class="member-affiliation">Lagos Kenyatta University, Nairobi, Nigeria</div>
                            <div class="member-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>Kenya</span>
                            </div>
                        </div>

                        <!-- Member Card 18 -->
                        <div class="member-card" data-region="africa">
                            <div class="member-avatar">TA</div>
                            <div class="member-prefix">Dr.</div>
                            <div class="member-name">Timmy Athanasiou Asikadu</div>
                            <div class="member-affiliation">Upanishads, Brahmanary (Gujarat), India</div>
                            <div class="member-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>India</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</main>

<script>
// Search Functionality
document.getElementById('searchInput').addEventListener('keyup', function() {
    const searchTerm = this.value.toLowerCase();
    const cards = document.querySelectorAll('.member-card');
    
    cards.forEach(card => {
        const name = card.querySelector('.member-name').textContent.toLowerCase();
        const affiliation = card.querySelector('.member-affiliation').textContent.toLowerCase();
        const location = card.querySelector('.member-location span').textContent.toLowerCase();
        
        if (name.includes(searchTerm) || affiliation.includes(searchTerm) || location.includes(searchTerm)) {
            card.style.display = 'block';
        } else {
            card.style.display = 'none';
        }
    });
});

// Filter Functionality
document.querySelectorAll('.filter-tag').forEach(tag => {
    tag.addEventListener('click', function() {
        // Remove active class from all tags
        document.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
        // Add active class to clicked tag
        this.classList.add('active');
        
        const filter = this.getAttribute('data-filter');
        const cards = document.querySelectorAll('.member-card');
        
        cards.forEach(card => {
            if (filter === 'all') {
                card.style.display = 'block';
            } else if (filter === 'leadership') {
                // Show leadership cards (you can add data-type="leadership" to leadership cards)
                card.style.display = 'none';
            } else {
                const region = card.getAttribute('data-region');
                if (region === filter) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            }
        });
    });
});
</script>

<?php
include 'include/footer.php'; 
?>
