<?php
$page_title = "Open Access Policy";
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: white;
        border-bottom: 1px solid var(--gray-200);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
   
    .hero-content {
        padding: 3rem 0;
    }
   
    .hero-icon {
        width: 64px;
        height: 64px;
        background: var(--primary);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 6px rgba(91, 33, 182, 0.2);
    }
   
    .hero-icon i {
        font-size: 2rem;
        color: white;
    }
   
    .badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.375rem 0.875rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
    }
   
    .badge-purple {
        background: #f3e8ff;
        color: var(--primary);
    }
   
    .badge-blue {
        background: #dbeafe;
        color: var(--secondary);
    }

    .badge-orange {
        background: #fef3c7;
        color: var(--warning);
    }
   
    .hero-title {
        font-size: 3rem;
        font-weight: 800;
        color: var(--primary);
        margin: 1rem 0 0.5rem;
    }
   
    .hero-description {
        color: var(--gray-600);
        font-size: 1.125rem;
        max-width: 48rem;
    }
   
    /* 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-purple {
        background: var(--primary);
        color: white;
        border: none;
    }
   
    .card-header-blue {
        background: var(--secondary);
        color: white;
        border: none;
    }
   
    .card-header-orange {
        background: var(--warning);
        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: var(--primary);
        border-radius: 16px;
        padding: 1.5rem;
        color: white;
        margin-top: 1.5rem;
    }
   
    .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;
    }
   
    .section-heading {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: 2rem;
    }

    .section-subheading {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--gray-900);
        margin: 2rem 0 1.5rem;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid var(--gray-200);
    }

    .intro-text {
        color: var(--gray-700);
        font-size: 1.0625rem;
        line-height: 1.8;
        margin-bottom: 2rem;
    }

    .intro-text a {
        color: var(--secondary);
        text-decoration: none;
        font-weight: 600;
        transition: color 0.2s ease;
    }

    .intro-text a:hover {
        color: var(--primary);
        text-decoration: underline;
    }

    .content-paragraph {
        color: var(--gray-700);
        font-size: 1rem;
        line-height: 1.8;
        margin-bottom: 1.5rem;
    }

    /* Info Table */
    .info-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        margin-bottom: 2rem;
        border: 1px solid var(--gray-200);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .info-table tr {
        transition: background 0.2s ease;
    }

    .info-table tr:hover {
        background: var(--gray-50);
    }

    .info-table td {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--gray-200);
    }

    .info-table tr:last-child td {
        border-bottom: none;
    }

    .info-table td:first-child {
        font-weight: 600;
        color: var(--gray-900);
        width: 40%;
        background: var(--gray-50);
    }

    .info-table td:last-child {
        color: var(--gray-700);
    }

    .info-table td a {
        color: var(--secondary);
        text-decoration: none;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s ease;
    }

    .info-table td a:hover {
        color: var(--primary);
        gap: 0.75rem;
    }

    .info-table td a i {
        font-size: 0.875rem;
    }

    /* Volume Badge */
    .volume-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: #f3e8ff;
        color: var(--primary);
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.9375rem;
    }

    .volume-badge i {
        font-size: 1rem;
    }
   
    /* Utility Classes */
    .text-center { text-align: center; }
    .mb-1 { margin-bottom: 0.25rem; }
    .mb-2 { margin-bottom: 0.5rem; }
    .mb-3 { margin-bottom: 0.75rem; }
    .mb-4 { margin-bottom: 1rem; }
    .mb-6 { margin-bottom: 1.5rem; }
    .mt-4 { margin-top: 1rem; }
    .mt-6 { margin-top: 1.5rem; }
    .flex { display: flex; }
    .items-center { align-items: center; }
    .gap-2 { gap: 0.5rem; }
    .gap-3 { gap: 0.75rem; }
    .gap-4 { gap: 1rem; }
</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-bullhorn"></i>
                    </div>
                    <div>
                        <h1 class="hero-title font-poppins">
                            Open Access Policy
                        </h1>
                    </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">
                <div class="content-card">
                    <h2 class="section-heading font-poppins">Open Access Policy</h2>
                    
                    <div class="intro-text">
                        IJRISS follows a gold open access model, which means that all articles are freely accessible online without any subscription barriers. This approach ensures that our research is available to the entire scientific community.
                    </div>

                    <p class="content-paragraph">
                        By adopting an open access model, we uphold the principle that research and scientific discoveries should be universally accessible. This model not only boosts the visibility of authors' work but also enhances scholarly communication, thereby amplifying the impact and reach of the research published in our journal.
                    </p>
                </div>
            </section>
        </div>
    </div>
</main>


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