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

?>
<script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
    /* ====== Desktop (unchanged) ====== */
    .nav1-bg { background-color: #ffffff; }
    .nav2-bg { background-color: #F7F7F7; }

    .dropdown-content{
      visibility:hidden; opacity:0; pointer-events:none;
      position:absolute; top:100%; left:0; z-index:100;
      background:#fff; min-width:700px; padding:24px 32px;
      box-shadow:0 8px 20px rgba(0,0,0,.12); border-radius:8px;
      transition:all .3s ease;
      display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
      font-size:.95rem;
    }
    .dropdown:hover .dropdown-content{
      visibility:visible; opacity:1; pointer-events:auto; transform:translateY(0);
    }

    .dropdown-content h4{
      font-size:1rem; font-weight:600; color:#1e40af;
      margin-bottom:10px; border-bottom:1px solid #e5e7eb; padding-bottom:6px;
    }
    .dropdown-content a{
      color:#374151; padding:5px 0; text-decoration:none; display:block;
      font-size:.9rem; line-height:1.5; transition:color .2s, padding-left .2s;
    }
    .dropdown-content a:hover{ color:#1d4ed8; background:#f3f4f6; border-radius:4px; padding-left:6px; }

    .countdown-item { @apply inline-block mx-2 text-center text-black; }
    .countdown-digits { @apply text-xl font-bold; }

    /* Off-canvas sidebars */
    #sidebar-nav1, #sidebar-nav2 {
      position: fixed;
      top: 0;
      left: 0;
      width: min(92vw, 360px);
      height: 100dvh;                 /* modern mobile full height */
      background: #fff;
      padding: 20px;
      z-index: 9999;
      overflow-y: auto !important;    /* scroll sidebar if content exceeds */
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      transition: transform 0.3s ease;
      transform: translateX(-100%);
      box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }

    #sidebar-nav1.open, #sidebar-nav2.open {
      transform: translateX(0);
    }

    /* Lock background scroll when sidebar open */
    body.sidebar-open {
      overflow: hidden;
    }

    /* Dim background */
    #overlay{
      display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9990;
    }
    #overlay.open{ display:block; }

    /* ====== Mobile tweaks ====== */
    @media (max-width: 768px){
      /* Hide desktop nav rows; show hamburgers */
      #hamburger-nav1, #hamburger-nav2{ display:block; }
      nav.flex{ display:none; }

      /* Compact second bar row: IJRISS | timer | submit | ☰ */
      .nav2-bg .container{
        display:flex; align-items:center; justify-content:space-between; gap:6px;
      }
      #countdown{ font-size:12px; gap:4px; }
      .submission-deadline-text{ display:none; }
      .nav2-bg .submit-btn{ font-size:12px; padding:4px 6px; white-space:nowrap; }

      /* Ensure dropdowns inside sidebars are visible + stacked */
      #sidebar-nav1 .dropdown-content,
      #sidebar-nav2 .dropdown-content{
        display:block !important;
        position:static; min-width:100%; box-shadow:none;
        padding-left:15px; grid-template-columns:1fr;
        visibility:visible !important; opacity:1 !important; pointer-events:auto !important;
      }

      /* Comfortable link sizing in the sidebar */
      #sidebar-nav1 a, #sidebar-nav2 a{ line-height:1.6; }
      #sidebar-nav1 .dropdown-content a, #sidebar-nav2 .dropdown-content a{
        padding:6px 0; font-size:14px;
      }
    }
    </style>

<!-- 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');
    
    .font-poppins {
        font-family: 'Poppins', sans-serif;
    }
    
    .font-inter {
        font-family: 'Inter', sans-serif;
    }
    
    .gradient-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    .gradient-secondary {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    
    .gradient-blue {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    
    .gradient-orange {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }
    
    .card-hover {
        transition: all 0.3s ease;
    }
    
    .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    
    .nav-item {
        position: relative;
        overflow: hidden;
    }
    
    .nav-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 3px;
        background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
        transform: scaleY(0);
        transition: transform 0.3s ease;
    }
    
    .nav-item:hover::before,
    .nav-item.active::before {
        transform: scaleY(1);
    }
    
    .discipline-card {
        position: relative;
        padding: 1rem;
        border-radius: 12px;
        background: white;
        border: 1px solid #e5e7eb;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .discipline-card:hover {
        border-color: #667eea;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
        transform: translateX(5px);
    }
    
    .discipline-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px 0 0 12px;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .discipline-card:hover::before {
        opacity: 1;
    }
    
    .icon-wrapper {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: white;
    }
    
    .category-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        margin-bottom: 8px;
    }
    
    .stats-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 16px;
        padding: 1.5rem;
        color: white;
        position: relative;
        overflow: hidden;
    }
    
    .stats-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%);
        animation: pulse 3s ease-in-out infinite;
    }
    
    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.1); }
    }
    
    .search-box {
        position: relative;
    }
    
    .search-box input {
        padding-left: 3rem;
    }
    
    .search-box i {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
    }
</style>

<main class="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50 to-purple-50 font-inter">
    <!-- Hero Section with Gradient -->
    <div class="relative overflow-hidden bg-white border-b shadow-sm">
        <div class="absolute inset-0 gradient-primary opacity-5"></div>
        <div class="container mx-auto px-4 py-12 relative z-10">
            <div class="flex items-center gap-4 mb-4">
                <div class="w-16 h-16 rounded-2xl gradient-primary flex items-center justify-center shadow-lg">
                    <i class="fas fa-book-open text-3xl text-white"></i>
                </div>
                <div>
                    <div class="flex items-center gap-2 mb-2">
                        <span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-semibold">
                            <i class="fas fa-graduation-cap mr-1"></i>Social Sciences
                        </span>
                        <span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-semibold">
                            <i class="fas fa-globe mr-1"></i>Open Access
                        </span>
                    </div>
                    <h1 class="text-5xl font-bold font-poppins bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
                        Research Areas
                    </h1>
                </div>
            </div>
            <p class="text-gray-600 text-lg max-w-3xl">
                Explore our comprehensive coverage across multiple disciplines in social sciences
            </p>
        </div>
    </div>

    <!-- Main Content Area -->
    <div class="container mx-auto px-4 py-10">
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- Left Sidebar - Enhanced Modern Design -->
            <?php include 'include/sidebar.php'; ?>

            <!-- Right Content Area - Enhanced with Icons -->
            <section class="lg:w-3/4 w-full">
                <div class="bg-white rounded-2xl shadow-xl p-8 lg:p-10">
                    <!-- Header Section -->
                    <div class="mb-8">
                        <div class="flex items-center gap-4 mb-6">
                            <div class="w-14 h-14 rounded-xl gradient-primary flex items-center justify-center">
                                <i class="fas fa-atom text-2xl text-white"></i>
                            </div>
                            <div>
                                <h2 class="text-3xl font-bold font-poppins text-gray-900">Research Areas</h2>
                                <p class="text-gray-500 text-sm">Comprehensive coverage across disciplines</p>
                            </div>
                        </div>
                        
                        <div class="bg-gradient-to-r from-purple-50 to-blue-50 border-l-4 border-purple-600 rounded-r-lg p-6 mb-6">
                            <div class="flex items-start gap-3">
                                <i class="fas fa-info-circle text-purple-600 text-xl mt-1"></i>
                                <p class="text-gray-700 leading-relaxed">
                                    The aim of the journal is to provide publication of refereed, high-quality papers in all areas of Social Science. The journal covers the following disciplines:
                                </p>
                            </div>
                        </div>

                        <!-- Search Box -->
                        <div class="search-box mb-6">
                            <i class="fas fa-search"></i>
                            <input type="text" 
                                   id="disciplineSearch" 
                                   placeholder="Search disciplines..." 
                                   class="w-full px-4 py-3 pl-12 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition-colors"
                                   onkeyup="filterDisciplines()">
                        </div>
                    </div>

                    <!-- Disciplines Grid with Categories -->
                    <div class="space-y-8" id="disciplinesContainer">
                        <!-- Business & Economics -->
                        <div class="discipline-category">
                            <div class="flex items-center gap-3 mb-4">
                                <div class="w-12 h-12 rounded-lg gradient-blue flex items-center justify-center">
                                    <i class="fas fa-chart-line text-white text-xl"></i>
                                </div>
                                <h3 class="text-xl font-bold font-poppins text-gray-800">Business & Economics</h3>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-calculator text-purple-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Accounting</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-briefcase text-blue-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Administrative Sciences</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-rocket text-pink-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Entrepreneurship</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-chart-pie text-green-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Entrepreneurship Development</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-dollar-sign text-yellow-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Finance</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-cogs text-orange-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Operations Management</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-tasks text-indigo-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Operational Management</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-users-cog text-teal-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Organizational Behavior</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-sitemap text-red-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Organizational Theory</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Agriculture & Environment -->
                        <div class="discipline-category">
                            <div class="flex items-center gap-3 mb-4">
                                <div class="w-12 h-12 rounded-lg gradient-secondary flex items-center justify-center">
                                    <i class="fas fa-leaf text-white text-xl"></i>
                                </div>
                                <h3 class="text-xl font-bold font-poppins text-gray-800">Agriculture & Environment</h3>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-tractor text-green-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Agricultural</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-coins text-yellow-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Agricultural Economics</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-chart-area text-blue-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Agricultural Economy</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-hands-helping text-purple-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Agriculture Extension</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-fish text-cyan-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Aquaculture</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-tree text-green-700 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Environmental Studies</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-temperature-high text-red-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Environmental Change</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-globe-americas text-blue-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Environmental Sciences</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-apple-alt text-green-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Food Security</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Education & Language -->
                        <div class="discipline-category">
                            <div class="flex items-center gap-3 mb-4">
                                <div class="w-12 h-12 rounded-lg gradient-orange flex items-center justify-center">
                                    <i class="fas fa-graduation-cap text-white text-xl"></i>
                                </div>
                                <h3 class="text-xl font-bold font-poppins text-gray-800">Education & Language</h3>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-user-graduate text-purple-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Adult Education</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-book text-blue-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">English Literature</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-language text-pink-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Ancient And Modern Languages</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-comments text-green-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Anthropological Linguistics</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-brain text-indigo-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Motivation And Language Teaching</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Social Sciences & Humanities -->
                        <div class="discipline-category">
                            <div class="flex items-center gap-3 mb-4">
                                <div class="w-12 h-12 rounded-lg gradient-primary flex items-center justify-center">
                                    <i class="fas fa-users text-white text-xl"></i>
                                </div>
                                <h3 class="text-xl font-bold font-poppins text-gray-800">Social Sciences & Humanities</h3>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-user-friends text-purple-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Anthropological</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-globe text-blue-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Anthropology</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-paw text-orange-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Anthrozoology</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-map-marked-alt text-green-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">African Studies</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-flag-usa text-red-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">American Studies</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-network-wired text-indigo-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Analyzing Social Complexity</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-balance-scale text-purple-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Ethics</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-venus-mars text-pink-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Ethnic and Gender Studies</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-people-arrows text-cyan-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Ethnicity</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-user-secret text-gray-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Ethnography</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-home text-blue-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Family</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-search-location text-green-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Field Research</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-dna text-purple-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Evolutionary Complexity</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-lightbulb text-yellow-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Philosophical Research</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Cultural & Regional Studies -->
                        <div class="discipline-category">
                            <div class="flex items-center gap-3 mb-4">
                                <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-indigo-600 to-purple-600 flex items-center justify-center">
                                    <i class="fas fa-mosque text-white text-xl"></i>
                                </div>
                                <h3 class="text-xl font-bold font-poppins text-gray-800">Cultural & Regional Studies</h3>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-mosque text-indigo-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Middle East and Islamic Studies</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-plane-departure text-blue-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Migration</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-dove text-green-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Peace and Conflict</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-gavel text-orange-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Paralegal Studies</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Arts & Performance -->
                        <div class="discipline-category">
                            <div class="flex items-center gap-3 mb-4">
                                <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-pink-600 to-red-600 flex items-center justify-center">
                                    <i class="fas fa-music text-white text-xl"></i>
                                </div>
                                <h3 class="text-xl font-bold font-poppins text-gray-800">Arts & Performance</h3>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-music text-purple-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Music</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-guitar text-pink-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Musicology</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-theater-masks text-red-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Performing Arts (Music Theatre & Dance)</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Technology & Information -->
                        <div class="discipline-category">
                            <div class="flex items-center gap-3 mb-4">
                                <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-cyan-600 to-blue-600 flex items-center justify-center">
                                    <i class="fas fa-laptop-code text-white text-xl"></i>
                                </div>
                                <h3 class="text-xl font-bold font-poppins text-gray-800">Technology & Information</h3>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-database text-blue-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">MIS (Management Information System)</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Forensic & Research -->
                        <div class="discipline-category">
                            <div class="flex items-center gap-3 mb-4">
                                <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center">
                                    <i class="fas fa-fingerprint text-white text-xl"></i>
                                </div>
                                <h3 class="text-xl font-bold font-poppins text-gray-800">Forensic & Research</h3>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-fingerprint text-gray-700 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Forensic Sciences</span>
                                    </div>
                                </div>
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-trophy text-yellow-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Foundations of High-Performance</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- HR & Personnel -->
                        <div class="discipline-category">
                            <div class="flex items-center gap-3 mb-4">
                                <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-teal-600 to-green-600 flex items-center justify-center">
                                    <i class="fas fa-user-tie text-white text-xl"></i>
                                </div>
                                <h3 class="text-xl font-bold font-poppins text-gray-800">HR & Personnel</h3>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-handshake text-teal-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Personnel Relations</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Specialized Studies -->
                        <div class="discipline-category">
                            <div class="flex items-center gap-3 mb-4">
                                <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-amber-600 to-orange-600 flex items-center justify-center">
                                    <i class="fas fa-star text-white text-xl"></i>
                                </div>
                                <h3 class="text-xl font-bold font-poppins text-gray-800">Specialized Studies</h3>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                <div class="discipline-card">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-user-astronaut text-purple-600 text-lg"></i>
                                        <span class="text-gray-800 font-medium">Antropology</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Bottom CTA -->
                    <div class="mt-10 bg-gradient-to-r from-purple-600 to-blue-600 rounded-2xl p-8 text-white">
                        <div class="flex flex-col md:flex-row items-center justify-between gap-6">
                            <div class="flex-1">
                                <h3 class="text-2xl font-bold font-poppins mb-2">Ready to Submit Your Research?</h3>
                                <p class="text-purple-100">Join thousands of researchers publishing with IJRISS</p>
                            </div>
                            <div class="flex gap-4">
                                <button class="bg-white text-purple-600 px-8 py-3 rounded-xl font-semibold hover:shadow-lg transition-all hover:scale-105">
                                    <i class="fas fa-paper-plane mr-2"></i>Submit Paper
                                </button>
                                <button class="bg-purple-700 text-white px-8 py-3 rounded-xl font-semibold hover:bg-purple-800 transition-all">
                                    <i class="fas fa-info-circle mr-2"></i>Learn More
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <!-- Contribute Section - Enhanced -->
    <section class="relative py-20 overflow-hidden">
        <!-- Background Decorations -->
        <div class="absolute inset-0 bg-gradient-to-br from-slate-50 via-blue-50 to-purple-50"></div>
        <div class="absolute top-0 left-0 w-96 h-96 bg-purple-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
        <div class="absolute top-0 right-0 w-96 h-96 bg-blue-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
        <div class="absolute bottom-0 left-1/2 w-96 h-96 bg-pink-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
        
        <div class="container mx-auto px-4 relative z-10">
            <!-- Section Header -->
            <div class="text-center mb-16">
                <div class="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-purple-100 to-blue-100 rounded-full mb-6">
                    <i class="fas fa-hands-helping text-purple-600"></i>
                    <span class="text-sm font-semibold text-purple-700">JOIN OUR COMMUNITY</span>
                </div>
                <h2 class="text-5xl font-bold font-poppins mb-6 bg-gradient-to-r from-gray-900 via-purple-900 to-blue-900 bg-clip-text text-transparent">
                    Contribute to Scientific Excellence
                </h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
                    This journal is committed to swiftly sharing innovative and impactful research across various social science disciplines.
                </p>
            </div>

            <!-- Action Cards Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-7xl mx-auto">
                <!-- Card 1: Submit an Article -->
                <div class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 overflow-hidden transform hover:-translate-y-2">
                    <div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-cyan-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <div class="relative p-8">
                        <div class="mb-6 transform group-hover:scale-110 transition-transform duration-500">
                            <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-2xl flex items-center justify-center mx-auto shadow-lg group-hover:shadow-xl">
                                <i class="fas fa-file-upload text-3xl text-white"></i>
                            </div>
                        </div>
                        <h3 class="text-xl font-bold font-poppins mb-3 text-gray-900 group-hover:text-white transition-colors duration-500">
                            Submit an Article
                        </h3>
                        <p class="text-gray-600 group-hover:text-blue-50 transition-colors duration-500 mb-6 text-sm">
                            Share your groundbreaking research with the global academic community
                        </p>
                        <a href="#" class="inline-flex items-center gap-2 text-blue-600 group-hover:text-white font-semibold transition-colors duration-500">
                            <span>Get Started</span>
                            <i class="fas fa-arrow-right transform group-hover:translate-x-2 transition-transform duration-500"></i>
                        </a>
                    </div>
                    <!-- Decorative Element -->
                    <div class="absolute bottom-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-400/20 to-cyan-400/20 rounded-tl-full transform translate-x-16 translate-y-16 group-hover:translate-x-8 group-hover:translate-y-8 transition-transform duration-500"></div>
                </div>

                <!-- Card 2: Special Issue on Education -->
                <div class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 overflow-hidden transform hover:-translate-y-2">
                    <div class="absolute inset-0 bg-gradient-to-br from-purple-600 to-pink-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <div class="relative p-8">
                        <div class="mb-6 transform group-hover:scale-110 transition-transform duration-500">
                            <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center mx-auto shadow-lg group-hover:shadow-xl">
                                <i class="fas fa-graduation-cap text-3xl text-white"></i>
                            </div>
                        </div>
                        <h3 class="text-xl font-bold font-poppins mb-3 text-gray-900 group-hover:text-white transition-colors duration-500">
                            Special Issue on Education
                        </h3>
                        <p class="text-gray-600 group-hover:text-purple-50 transition-colors duration-500 mb-6 text-sm">
                            Contribute to our focused collection on educational innovation and research
                        </p>
                        <a href="#" class="inline-flex items-center gap-2 text-purple-600 group-hover:text-white font-semibold transition-colors duration-500">
                            <span>Learn More</span>
                            <i class="fas fa-arrow-right transform group-hover:translate-x-2 transition-transform duration-500"></i>
                        </a>
                    </div>
                    <!-- Decorative Element -->
                    <div class="absolute bottom-0 right-0 w-32 h-32 bg-gradient-to-br from-purple-400/20 to-pink-400/20 rounded-tl-full transform translate-x-16 translate-y-16 group-hover:translate-x-8 group-hover:translate-y-8 transition-transform duration-500"></div>
                </div>

                <!-- Card 3: Special Issue on Public Health -->
                <div class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 overflow-hidden transform hover:-translate-y-2">
                    <div class="absolute inset-0 bg-gradient-to-br from-green-600 to-teal-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <div class="relative p-8">
                        <div class="mb-6 transform group-hover:scale-110 transition-transform duration-500">
                            <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-teal-500 rounded-2xl flex items-center justify-center mx-auto shadow-lg group-hover:shadow-xl">
                                <i class="fas fa-heartbeat text-3xl text-white"></i>
                            </div>
                        </div>
                        <h3 class="text-xl font-bold font-poppins mb-3 text-gray-900 group-hover:text-white transition-colors duration-500">
                            Special Issue on Public Health
                        </h3>
                        <p class="text-gray-600 group-hover:text-green-50 transition-colors duration-500 mb-6 text-sm">
                            Submit research addressing critical public health challenges
                        </p>
                        <a href="#" class="inline-flex items-center gap-2 text-green-600 group-hover:text-white font-semibold transition-colors duration-500">
                            <span>Submit Now</span>
                            <i class="fas fa-arrow-right transform group-hover:translate-x-2 transition-transform duration-500"></i>
                        </a>
                    </div>
                    <!-- Decorative Element -->
                    <div class="absolute bottom-0 right-0 w-32 h-32 bg-gradient-to-br from-green-400/20 to-teal-400/20 rounded-tl-full transform translate-x-16 translate-y-16 group-hover:translate-x-8 group-hover:translate-y-8 transition-transform duration-500"></div>
                </div>

                <!-- Card 4: Special Issue on Public Health (Duplicate with different style) -->
                <div class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 overflow-hidden transform hover:-translate-y-2">
                    <div class="absolute inset-0 bg-gradient-to-br from-orange-600 to-red-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <div class="relative p-8">
                        <div class="mb-6 transform group-hover:scale-110 transition-transform duration-500">
                            <div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-red-500 rounded-2xl flex items-center justify-center mx-auto shadow-lg group-hover:shadow-xl">
                                <i class="fas fa-hospital-alt text-3xl text-white"></i>
                            </div>
                        </div>
                        <h3 class="text-xl font-bold font-poppins mb-3 text-gray-900 group-hover:text-white transition-colors duration-500">
                            Healthcare Research
                        </h3>
                        <p class="text-gray-600 group-hover:text-orange-50 transition-colors duration-500 mb-6 text-sm">
                            Explore opportunities in healthcare and medical social sciences
                        </p>
                        <a href="#" class="inline-flex items-center gap-2 text-orange-600 group-hover:text-white font-semibold transition-colors duration-500">
                            <span>Explore</span>
                            <i class="fas fa-arrow-right transform group-hover:translate-x-2 transition-transform duration-500"></i>
                        </a>
                    </div>
                    <!-- Decorative Element -->
                    <div class="absolute bottom-0 right-0 w-32 h-32 bg-gradient-to-br from-orange-400/20 to-red-400/20 rounded-tl-full transform translate-x-16 translate-y-16 group-hover:translate-x-8 group-hover:translate-y-8 transition-transform duration-500"></div>
                </div>
            </div>

            <!-- Stats Section -->
            <div class="mt-20 bg-white rounded-3xl shadow-2xl p-10 border border-gray-100">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                    <div class="text-center group cursor-pointer">
                        <div class="mb-4 transform group-hover:scale-110 transition-transform duration-300">
                            <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-2xl flex items-center justify-center mx-auto shadow-lg">
                                <i class="fas fa-users text-2xl text-white"></i>
                            </div>
                        </div>
                        <p class="text-4xl font-bold font-poppins mb-2 bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">10K+</p>
                        <p class="text-gray-600 font-medium">Active Researchers</p>
                    </div>
                    <div class="text-center group cursor-pointer">
                        <div class="mb-4 transform group-hover:scale-110 transition-transform duration-300">
                            <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center mx-auto shadow-lg">
                                <i class="fas fa-file-alt text-2xl text-white"></i>
                            </div>
                        </div>
                        <p class="text-4xl font-bold font-poppins mb-2 bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">5000+</p>
                        <p class="text-gray-600 font-medium">Published Papers</p>
                    </div>
                    <div class="text-center group cursor-pointer">
                        <div class="mb-4 transform group-hover:scale-110 transition-transform duration-300">
                            <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-teal-500 rounded-2xl flex items-center justify-center mx-auto shadow-lg">
                                <i class="fas fa-globe text-2xl text-white"></i>
                            </div>
                        </div>
                        <p class="text-4xl font-bold font-poppins mb-2 bg-gradient-to-r from-green-600 to-teal-600 bg-clip-text text-transparent">150+</p>
                        <p class="text-gray-600 font-medium">Countries</p>
                    </div>
                    <div class="text-center group cursor-pointer">
                        <div class="mb-4 transform group-hover:scale-110 transition-transform duration-300">
                            <div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-red-500 rounded-2xl flex items-center justify-center mx-auto shadow-lg">
                                <i class="fas fa-award text-2xl text-white"></i>
                            </div>
                        </div>
                        <p class="text-4xl font-bold font-poppins mb-2 bg-gradient-to-r from-orange-600 to-red-600 bg-clip-text text-transparent">98%</p>
                        <p class="text-gray-600 font-medium">Satisfaction Rate</p>
                    </div>
                </div>
            </div>

            <!-- Newsletter Signup -->
            <div class="mt-16 bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 rounded-3xl p-12 shadow-2xl relative overflow-hidden">
                <!-- Decorative circles -->
                <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -translate-y-32 translate-x-32"></div>
                <div class="absolute bottom-0 left-0 w-48 h-48 bg-white/10 rounded-full translate-y-24 -translate-x-24"></div>
                
                <div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8">
                    <div class="flex-1 text-center md:text-left">
                        <div class="inline-flex items-center gap-2 px-4 py-2 bg-white/20 rounded-full mb-4 backdrop-blur-sm">
                            <i class="fas fa-envelope text-white"></i>
                            <span class="text-sm font-semibold text-white">STAY UPDATED</span>
                        </div>
                        <h3 class="text-3xl md:text-4xl font-bold font-poppins text-white mb-3">
                            Never Miss an Update
                        </h3>
                        <p class="text-white/90 text-lg">
                            Subscribe to our newsletter for the latest research trends and publication opportunities
                        </p>
                    </div>
                    <div class="flex-shrink-0 w-full md:w-auto">
                        <div class="flex flex-col sm:flex-row gap-3 bg-white/20 backdrop-blur-md rounded-2xl p-2">
                            <input type="email" 
                                   placeholder="Enter your email address" 
                                   class="px-6 py-4 rounded-xl bg-white text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-white/50 min-w-[300px]">
                            <button class="px-8 py-4 bg-white text-purple-600 rounded-xl font-bold hover:shadow-lg transition-all hover:scale-105 whitespace-nowrap">
                                <i class="fas fa-paper-plane mr-2"></i>Subscribe Now
                            </button>
                        </div>
                        <p class="text-white/70 text-xs mt-3 text-center md:text-left">
                            <i class="fas fa-lock mr-1"></i>We respect your privacy. Unsubscribe anytime.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<style>
    @keyframes blob {
        0%, 100% { transform: translate(0, 0) scale(1); }
        33% { transform: translate(30px, -50px) scale(1.1); }
        66% { transform: translate(-20px, 20px) scale(0.9); }
    }
    
    .animate-blob {
        animation: blob 7s infinite;
    }
    
    .animation-delay-2000 {
        animation-delay: 2s;
    }
    
    .animation-delay-4000 {
        animation-delay: 4s;
    }
</style>

<script>
function filterDisciplines() {
    const searchInput = document.getElementById('disciplineSearch').value.toLowerCase();
    const disciplineCards = document.querySelectorAll('.discipline-card');
    const categories = document.querySelectorAll('.discipline-category');
    
    disciplineCards.forEach(card => {
        const text = card.textContent.toLowerCase();
        if (text.includes(searchInput)) {
            card.style.display = 'block';
        } else {
            card.style.display = 'none';
        }
    });
    
    // Hide empty categories
    categories.forEach(category => {
        const visibleCards = category.querySelectorAll('.discipline-card[style="display: block;"]');
        if (visibleCards.length === 0 && searchInput !== '') {
            category.style.display = 'none';
        } else {
            category.style.display = 'block';
        }
    });
}
</script>

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

?>
