<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edunet - NIOS Admissions</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">



    
<?php
include("header.php");


?>


    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        body {
            background-color: #f8fafc;
            color: #333;
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* Admissions Hero */
        .admissions-hero {
            background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(30, 58, 138, 0.95) 100%), url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
            background-position: center;
            color: white;
            padding: 100px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero-content {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        .hero-badge {
            display: inline-block;
            background: linear-gradient(135deg, #ff9a00 0%, #ff6a00 100%);
            color: white;
            padding: 10px 28px;
            border-radius: 30px;
            font-size: 0.95rem;
            font-weight: 600;
            letter-spacing: 1px;
            margin-bottom: 25px;
            box-shadow: 0 8px 20px rgba(255, 106, 0, 0.3);
            transform: translateY(30px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 0.3s forwards;
        }

        @keyframes fadeUp {
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 20px;
            text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            transform: translateY(40px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 0.5s forwards;
        }

        .hero-title span {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
        }

        .hero-subtitle {
            font-size: 1.4rem;
            font-weight: 400;
            max-width: 800px;
            margin: 0 auto 35px;
            color: #e2e8ff;
            transform: translateY(40px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 0.7s forwards;
        }

        /* Main Admissions Section */
        .admissions-section {
            max-width: 1200px;
            margin: 80px auto;
            padding: 0 20px;
        }

        .section-intro {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-title {
            font-size: 2.8rem;
            font-weight: 800;
            color: #1e3a8a;
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            border-radius: 2px;
        }

        .section-description {
            font-size: 1.2rem;
            color: #64748b;
            max-width: 800px;
            margin: 30px auto 0;
        }

        /* NIOS Info Cards */
        .nios-info-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-bottom: 60px;
        }

        .info-card {
            background: white;
            border-radius: 20px;
            padding: 40px 30px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
            border-top: 5px solid;
            transform: translateY(40px);
            opacity: 0;
        }

        .info-card:nth-child(1) {
            border-top-color: #4facfe;
            animation: fadeUp 0.8s ease-out 0.9s forwards;
        }

        .info-card:nth-child(2) {
            border-top-color: #ff9a00;
            animation: fadeUp 0.8s ease-out 1.1s forwards;
        }

        .info-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
        }

        .card-icon {
            width: 70px;
            height: 70px;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin-bottom: 25px;
            color: white;
        }

        .card-1 .card-icon {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .card-2 .card-icon {
            background: linear-gradient(135deg, #ff9a00 0%, #ff6a00 100%);
        }

        .card-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: #1e3a8a;
            margin-bottom: 15px;
        }

        .card-description {
            color: #64748b;
            line-height: 1.7;
            margin-bottom: 25px;
        }

        .card-features {
            list-style: none;
        }

        .card-feature {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 15px;
            color: #475569;
        }

        .card-feature i {
            color: #4facfe;
            margin-top: 3px;
            font-size: 1.1rem;
        }

        /* Admissions Comparison */
        .comparison-section {
            margin-bottom: 80px;
        }

        .comparison-title {
            font-size: 2.2rem;
            font-weight: 700;
            color: #1e3a8a;
            text-align: center;
            margin-bottom: 50px;
        }

        .comparison-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
            gap: 40px;
        }

        @media (max-width: 600px) {
            .comparison-container {
                grid-template-columns: 1fr;
            }
        }

        .comparison-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
            transition: all 0.4s ease;
            transform: translateY(40px);
            opacity: 0;
        }

        .comparison-card:nth-child(1) {
            animation: fadeUp 0.8s ease-out 1.3s forwards;
        }

        .comparison-card:nth-child(2) {
            animation: fadeUp 0.8s ease-out 1.5s forwards;
        }

        .comparison-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
        }

        .comparison-header {
            background: linear-gradient(135deg, #1e3a8a 0%, #4facfe 100%);
            color: white;
            padding: 25px 30px;
            text-align: center;
        }

        .comparison-header-secondary {
            background: linear-gradient(135deg, #ff9a00 0%, #ff6a00 100%);
        }

        .comparison-class {
            font-size: 1.2rem;
            font-weight: 600;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .comparison-name {
            font-size: 2rem;
            font-weight: 800;
            margin-bottom: 5px;
        }

        .comparison-duration {
            font-size: 1rem;
            opacity: 0.9;
        }

        .comparison-content {
            padding: 30px;
        }

        .comparison-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 18px 0;
            border-bottom: 1px solid #f1f5f9;
        }

        .comparison-item:last-child {
            border-bottom: none;
        }

        .item-label {
            font-weight: 600;
            color: #475569;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .item-label i {
            color: #4facfe;
            width: 20px;
        }

        .item-value {
            font-weight: 700;
            color: #1e3a8a;
            background: #f0f9ff;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 0.95rem;
        }

        /* Admission Process */
        .process-section {
            margin-bottom: 80px;
        }

        .process-title {
            font-size: 2.2rem;
            font-weight: 700;
            color: #1e3a8a;
            text-align: center;
            margin-bottom: 50px;
        }

        .process-timeline {
            max-width: 900px;
            margin: 0 auto;
            position: relative;
        }

        .process-timeline::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 100%;
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            border-radius: 2px;
        }

        @media (max-width: 768px) {
            .process-timeline::before {
                left: 30px;
            }
        }

        .process-step {
            display: flex;
            align-items: center;
            margin-bottom: 50px;
            position: relative;
            transform: translateY(30px);
            opacity: 0;
        }

        .process-step:nth-child(1) { animation: fadeUp 0.8s ease-out 1.7s forwards; }
        .process-step:nth-child(2) { animation: fadeUp 0.8s ease-out 1.9s forwards; }
        .process-step:nth-child(3) { animation: fadeUp 0.8s ease-out 2.1s forwards; }
        .process-step:nth-child(4) { animation: fadeUp 0.8s ease-out 2.3s forwards; }
        .process-step:nth-child(5) { animation: fadeUp 0.8s ease-out 2.5s forwards; }

        .step-number {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            font-weight: 800;
            flex-shrink: 0;
            z-index: 2;
            box-shadow: 0 10px 25px rgba(79, 172, 254, 0.3);
        }

        .step-content {
            background: white;
            padding: 25px 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            margin-left: 30px;
            flex: 1;
            border-left: 4px solid #4facfe;
        }

        .step-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1e3a8a;
            margin-bottom: 10px;
        }

        .step-description {
            color: #64748b;
            line-height: 1.7;
        }

        @media (max-width: 768px) {
            .process-step {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .step-content {
                margin-left: 0;
                margin-top: 20px;
                width: 100%;
            }
        }

        /* Documents Required */
        .documents-section {
            margin-bottom: 80px;
        }

        .documents-title {
            font-size: 2.2rem;
            font-weight: 700;
            color: #1e3a8a;
            text-align: center;
            margin-bottom: 50px;
        }

        .documents-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
        }

        .document-item {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            gap: 20px;
            transition: all 0.3s ease;
            transform: translateY(30px);
            opacity: 0;
        }

        .document-item:nth-child(1) { animation: fadeUp 0.8s ease-out 2.7s forwards; }
        .document-item:nth-child(2) { animation: fadeUp 0.8s ease-out 2.8s forwards; }
        .document-item:nth-child(3) { animation: fadeUp 0.8s ease-out 2.9s forwards; }
        .document-item:nth-child(4) { animation: fadeUp 0.8s ease-out 3s forwards; }
        .document-item:nth-child(5) { animation: fadeUp 0.8s ease-out 3.1s forwards; }
        .document-item:nth-child(6) { animation: fadeUp 0.8s ease-out 3.2s forwards; }

        .document-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        }

        .document-icon {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            background: #f0f9ff;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4facfe;
            font-size: 1.8rem;
            flex-shrink: 0;
        }

        .document-text {
            flex: 1;
        }

        .document-name {
            font-weight: 700;
            color: #1e3a8a;
            margin-bottom: 5px;
            font-size: 1.1rem;
        }

        .document-detail {
            color: #64748b;
            font-size: 0.95rem;
        }

        /* CTA Section */
        .cta-section {
            background: linear-gradient(135deg, #1e3a8a 0%, #4facfe 100%);
            border-radius: 25px;
            padding: 70px 50px;
            text-align: center;
            color: white;
            margin: 100px auto;
            max-width: 1000px;
            box-shadow: 0 20px 60px rgba(30, 58, 138, 0.3);
            transform: translateY(40px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 3.5s forwards;
        }

        .cta-title {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 20px;
        }

        .cta-description {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 700px;
            margin: 0 auto 40px;
        }

        .cta-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .cta-btn {
            padding: 16px 40px;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 50px;
            border: none;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            min-width: 200px;
        }

        .cta-btn-primary {
            background: white;
            color: #1e3a8a;
        }

        .cta-btn-primary:hover {
            background: #f8fafc;
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(255, 255, 255, 0.2);
        }

        .cta-btn-secondary {
            background: rgba(255, 255, 255, 0.15);
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(10px);
        }

        .cta-btn-secondary:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-5px);
            border-color: rgba(255, 255, 255, 0.5);
        }

        /* Responsive Styles */
        @media (max-width: 992px) {
            .hero-title {
                font-size: 2.8rem;
            }
            
            .section-title {
                font-size: 2.4rem;
            }
            
            .nios-info-cards {
                grid-template-columns: 1fr;
                max-width: 600px;
                margin-left: auto;
                margin-right: auto;
            }
            
            .cta-section {
                padding: 50px 30px;
                margin: 80px 20px;
            }
        }

        @media (max-width: 768px) {
            .admissions-hero {
                padding: 80px 20px;
            }
            
            .hero-title {
                font-size: 2.2rem;
            }
            
            .hero-subtitle {
                font-size: 1.2rem;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .comparison-container {
                grid-template-columns: 1fr;
            }
            
            .cta-title {
                font-size: 2rem;
            }
            
            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .cta-btn {
                width: 100%;
                max-width: 300px;
            }
        }

        @media (max-width: 576px) {
            .hero-title {
                font-size: 1.8rem;
            }
            
            .hero-badge {
                font-size: 0.85rem;
                padding: 8px 20px;
            }
            
            .section-title {
                font-size: 1.8rem;
            }
            
            .info-card {
                padding: 30px 20px;
            }
            
            .card-title {
                font-size: 1.5rem;
            }
            
            .comparison-content {
                padding: 20px;
            }
            
            .comparison-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }
            
            .step-content {
                padding: 20px;
            }
        }

        /* Floating Elements */
        .floating-shapes {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .shape {
            position: absolute;
            border-radius: 50%;
            opacity: 0.1;
            animation: float 25s infinite linear;
        }

        .shape-1 {
            width: 150px;
            height: 150px;
            background: #4facfe;
            top: 15%;
            right: 10%;
            animation-delay: 0s;
        }

        .shape-2 {
            width: 100px;
            height: 100px;
            background: #ff9a00;
            bottom: 20%;
            left: 5%;
            animation-delay: -8s;
        }

        .shape-3 {
            width: 80px;
            height: 80px;
            background: #1e3a8a;
            top: 60%;
            right: 15%;
            animation-delay: -15s;
        }
    </style>
</head>
<body>
    <!-- Admissions Hero -->
    <section class="admissions-hero">
        <div class="floating-shapes">
            <div class="shape shape-1"></div>
            <div class="shape shape-2"></div>
            <div class="shape shape-3"></div>
        </div>
        
        <div class="hero-content">
            <div class="hero-badge">
                <i class="fas fa-user-graduate"></i> Open Schooling Admissions
            </div>
            
            <h1 class="hero-title">
                NIOS Admissions <span>10th & 12th</span>
            </h1>
            
            <p class="hero-subtitle">
                Open the door to flexible education with NIOS (National Institute of Open Schooling). 
                Complete your secondary (10th) or senior secondary (12th) education at your own pace.
            </p>
        </div>
    </section>
    
    <!-- Main Admissions Section -->
    <section class="admissions-section">
        <!-- Section Intro -->
        <div class="section-intro">
            <h2 class="section-title">About NIOS Admissions</h2>
            <p class="section-description">
                The National Institute of Open Schooling (NIOS) provides flexible learning opportunities for students who wish to complete their 10th (Secondary) or 12th (Senior Secondary) education outside the traditional school system.
            </p>
        </div>
        
        <!-- NIOS Info Cards -->
        <div class="nios-info-cards">
            <div class="info-card card-1">
                <div class="card-icon">
                    <i class="fas fa-university"></i>
                </div>
                <h3 class="card-title">What is NIOS?</h3>
                <p class="card-description">
                    NIOS is an autonomous institution under the Ministry of Education, Government of India. It's the largest open schooling system in the world, offering flexible learning options for students of all ages.
                </p>
                <ul class="card-features">
                    <li class="card-feature">
                        <i class="fas fa-check-circle"></i>
                        <span>Recognized by Government of India</span>
                    </li>
                    <li class="card-feature">
                        <i class="fas fa-check-circle"></i>
                        <span>Equivalent to CBSE and other boards</span>
                    </li>
                    <li class="card-feature">
                        <i class="fas fa-check-circle"></i>
                        <span>Flexible examination schedule</span>
                    </li>
                    <li class="card-feature">
                        <i class="fas fa-check-circle"></i>
                        <span>Credit accumulation system</span>
                    </li>
                </ul>
            </div>
            
            <div class="info-card card-2">
                <div class="card-icon">
                    <i class="fas fa-bullseye"></i>
                </div>
                <h3 class="card-title">Why Choose NIOS?</h3>
                <p class="card-description">
                    NIOS offers unique advantages for students who need flexibility due to various circumstances like sports training, artistic pursuits, health issues, or geographical constraints.
                </p>
                <ul class="card-features">
                    <li class="card-feature">
                        <i class="fas fa-check-circle"></i>
                        <span>Study at your own pace and schedule</span>
                    </li>
                    <li class="card-feature">
                        <i class="fas fa-check-circle"></i>
                        <span>Choose from a wide range of subjects</span>
                    </li>
                    <li class="card-feature">
                        <i class="fas fa-check-circle"></i>
                        <span>Examinations held twice a year</span>
                    </li>
                    <li class="card-feature">
                        <i class="fas fa-check-circle"></i>
                        <span>Transfer credits from other boards</span>
                    </li>
                </ul>
            </div>
        </div>
        
        <!-- Admissions Comparison -->
        <div class="comparison-section">
            <h3 class="comparison-title">10th vs 12th Admissions</h3>
            
            <div class="comparison-container">
                <!-- 10th Class Card -->
                <div class="comparison-card">
                    <div class="comparison-header">
                        <div class="comparison-class">Secondary Education</div>
                        <div class="comparison-name">10th Class</div>
                        <div class="comparison-duration">Matriculation Certificate</div>
                    </div>
                    
                    <div class="comparison-content">
                        <div class="comparison-item">
                            <div class="item-label">
                                <i class="fas fa-user-graduate"></i>
                                <span>Minimum Age</span>
                            </div>
                            <div class="item-value">14+ Years</div>
                        </div>
                        
                        <div class="comparison-item">
                            <div class="item-label">
                                <i class="fas fa-book"></i>
                                <span>Subjects Required</span>
                            </div>
                            <div class="item-value">5 Subjects</div>
                        </div>
                        
                        <div class="comparison-item">
                            <div class="item-label">
                                <i class="fas fa-clock"></i>
                                <span>Duration</span>
                            </div>
                            <div class="item-value">Flexible (Max 5 Years)</div>
                        </div>
                        
                        <div class="comparison-item">
                            <div class="item-label">
                                <i class="fas fa-check-circle"></i>
                                <span>Eligibility</span>
                            </div>
                            <div class="item-value">8th Pass or 14+ Age</div>
                        </div>
                        
                        <div class="comparison-item">
                            <div class="item-label">
                                <i class="fas fa-language"></i>
                                <span>Medium of Instruction</span>
                            </div>
                            <div class="item-value">Hindi, English & More</div>
                        </div>
                        
                        <div class="comparison-item">
                            <div class="item-label">
                                <i class="fas fa-calendar-alt"></i>
                                <span>Examination</span>
                            </div>
                            <div class="item-value">Twice a Year</div>
                        </div>
                    </div>
                </div>
                
                <!-- 12th Class Card -->
                <div class="comparison-card">
                    <div class="comparison-header comparison-header-secondary">
                        <div class="comparison-class">Senior Secondary Education</div>
                        <div class="comparison-name">12th Class</div>
                        <div class="comparison-duration">Intermediate Certificate</div>
                    </div>
                    
                    <div class="comparison-content">
                        <div class="comparison-item">
                            <div class="item-label">
                                <i class="fas fa-user-graduate"></i>
                                <span>Minimum Age</span>
                            </div>
                            <div class="item-value">15+ Years</div>
                        </div>
                        
                        <div class="comparison-item">
                            <div class="item-label">
                                <i class="fas fa-book"></i>
                                <span>Subjects Required</span>
                            </div>
                            <div class="item-value">5 Subjects (1 Language)</div>
                        </div>
                        
                        <div class="comparison-item">
                            <div class="item-label">
                                <i class="fas fa-clock"></i>
                                <span>Duration</span>
                            </div>
                            <div class="item-value">Flexible (Max 5 Years)</div>
                        </div>
                        
                        <div class="comparison-item">
                            <div class="item-label">
                                <i class="fas fa-check-circle"></i>
                                <span>Eligibility</span>
                            </div>
                            <div class="item-value">10th Pass or 15+ Age</div>
                        </div>
                        
                        <div class="comparison-item">
                            <div class="item-label">
                                <i class="fas fa-language"></i>
                                <span>Medium of Instruction</span>
                            </div>
                            <div class="item-value">Hindi, English & More</div>
                        </div>
                        
                        <div class="comparison-item">
                            <div class="item-label">
                                <i class="fas fa-calendar-alt"></i>
                                <span>Examination</span>
                            </div>
                            <div class="item-value">Twice a Year</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Admission Process -->
        <div class="process-section">
            <h3 class="process-title">Admission Process</h3>
            
            <div class="process-timeline">
                <div class="process-step">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <h4 class="step-title">Application Submission</h4>
                        <p class="step-description">
                            Fill the online application form or collect the form from the nearest NIOS study center. Provide accurate personal and educational details.
                        </p>
                    </div>
                </div>
                
                <div class="process-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h4 class="step-title">Document Verification</h4>
                        <p class="step-description">
                            Submit required documents for verification. This includes age proof, address proof, previous qualification certificates, and photographs.
                        </p>
                    </div>
                </div>
                
                <div class="process-step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h4 class="step-title">Fee Payment</h4>
                        <p class="step-description">
                            Pay the admission fees through online payment gateway, bank draft, or directly at the study center. Fee structure varies based on subjects chosen.
                        </p>
                    </div>
                </div>
                
                <div class="process-step">
                    <div class="step-number">4</div>
                    <div class="step-content">
                        <h4 class="step-title">Study Material Dispatch</h4>
                        <p class="step-description">
                            NIOS will dispatch study materials to your registered address. You can also access digital study materials through the NIOS portal.
                        </p>
                    </div>
                </div>
                
                <div class="process-step">
                    <div class="step-number">5</div>
                    <div class="step-content">
                        <h4 class="step-title">Commencement of Studies</h4>
                        <p class="step-description">
                            Start your self-paced learning journey. Attend personal contact programs (PCPs) at your study center if required for certain subjects.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Documents Required -->
        <div class="documents-section">
            <h3 class="documents-title">Required Documents</h3>
            
            <div class="documents-grid">
                <div class="document-item">
                    <div class="document-icon">
                        <i class="fas fa-id-card"></i>
                    </div>
                    <div class="document-text">
                        <div class="document-name">Age Proof</div>
                        <div class="document-detail">Birth certificate, Aadhaar card, or passport</div>
                    </div>
                </div>
                
                <div class="document-item">
                    <div class="document-icon">
                        <i class="fas fa-home"></i>
                    </div>
                    <div class="document-text">
                        <div class="document-name">Address Proof</div>
                        <div class="document-detail">Aadhaar card, voter ID, or utility bill</div>
                    </div>
                </div>
                
                <div class="document-item">
                    <div class="document-icon">
                        <i class="fas fa-certificate"></i>
                    </div>
                    <div class="document-text">
                        <div class="document-name">Previous Qualification</div>
                        <div class="document-detail">Mark sheet of last class passed</div>
                    </div>
                </div>
                
                <div class="document-item">
                    <div class="document-icon">
                        <i class="fas fa-camera"></i>
                    </div>
                    <div class="document-text">
                        <div class="document-name">Photographs</div>
                        <div class="document-detail">Recent passport-size photographs (4 copies)</div>
                    </div>
                </div>
                
                <div class="document-item">
                    <div class="document-icon">
                        <i class="fas fa-file-signature"></i>
                    </div>
                    <div class="document-text">
                        <div class="document-name">Transfer Certificate</div>
                        <div class="document-detail">If applicable, from previous school</div>
                    </div>
                </div>
                
                <div class="document-item">
                    <div class="document-icon">
                        <i class="fas fa-handshake"></i>
                    </div>
                    <div class="document-text">
                        <div class="document-name">Disability Certificate</div>
                        <div class="document-detail">If applicable, for special concessions</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- CTA Section -->
        <div class="cta-section">
            <h3 class="cta-title">Ready to Start Your NIOS Journey?</h3>
            <p class="cta-description">
                Join thousands of successful students who have completed their education through NIOS. Get personalized guidance and support throughout your learning journey.
            </p>
            
            <div class="cta-buttons">
                <button class="cta-btn cta-btn-primary">
                    <i class="fas fa-file-alt"></i> Apply Now
                </button>
                <button class="cta-btn cta-btn-secondary">
                    <i class="fas fa-phone-alt"></i> Contact Counselor
                </button>
            </div>
        </div>
    </section>

    <script>
        // Animate elements on scroll
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);
        
        // Observe elements for scroll animations
        document.querySelectorAll('.info-card, .comparison-card, .process-step, .document-item, .cta-section').forEach(element => {
            observer.observe(element);
        });
        
        // CTA Button Interactions
        const applyBtn = document.querySelector('.cta-btn-primary');
        const contactBtn = document.querySelector('.cta-btn-secondary');
        
        applyBtn.addEventListener('click', () => {
            alert('NIOS Admission application form would open here. For demo purposes, this is a simulation.');
        });
        
        contactBtn.addEventListener('click', () => {
            alert('You would be connected to an admissions counselor. For demo: Contact 9899944214 or email prajtyagi@gmail.com');
        });
        
        // Randomize floating shapes position on load
        document.addEventListener('DOMContentLoaded', () => {
            const shapes = document.querySelectorAll('.shape');
            shapes.forEach(shape => {
                // Randomize initial position
                const randomTop = Math.random() * 80 + 10;
                const randomLeft = Math.random() * 80 + 10;
                shape.style.top = `${randomTop}%`;
                shape.style.left = `${randomLeft}%`;
                
                // Randomize size
                const randomSize = Math.random() * 100 + 50;
                shape.style.width = `${randomSize}px`;
                shape.style.height = `${randomSize}px`;
                
                // Randomize animation duration
                const randomDuration = Math.random() * 20 + 25;
                shape.style.animationDuration = `${randomDuration}s`;
            });
            
            // Add hover effects to comparison cards
            const comparisonCards = document.querySelectorAll('.comparison-card');
            comparisonCards.forEach(card => {
                card.addEventListener('mouseenter', () => {
                    card.style.transform = 'translateY(-15px)';
                });
                
                card.addEventListener('mouseleave', () => {
                    card.style.transform = 'translateY(0)';
                });
            });
        });
    </script>


<?php
include("footer.php");


?>