<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edunet - About Us</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;
        }

        /* About Hero Section */
        .about-hero {
            position: relative;
            width: 100%;
            min-height: 80vh;
            padding: 100px 20px;
            background: linear-gradient(135deg, #0c2461 0%, #1e3799 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .about-hero-content {
            max-width: 1200px;
            width: 100%;
            z-index: 2;
            position: relative;
        }

        .hero-breadcrumb {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 30px;
            transform: translateY(30px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 0.3s forwards;
        }

        .hero-breadcrumb a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            font-size: 0.95rem;
            transition: color 0.3s ease;
        }

        .hero-breadcrumb a:hover {
            color: #4facfe;
        }

        .hero-breadcrumb span {
            color: #4facfe;
            font-size: 0.95rem;
        }

        .hero-breadcrumb i {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.6);
        }

        .about-hero-title {
            font-size: 4rem;
            font-weight: 800;
            line-height: 1.1;
            color: white;
            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;
        }

        .about-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;
        }

        .about-hero-description {
            font-size: 1.3rem;
            color: #e2e8ff;
            max-width: 800px;
            margin-bottom: 40px;
            transform: translateY(40px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 0.7s forwards;
        }

        .about-hero-stats {
            display: flex;
            gap: 40px;
            flex-wrap: wrap;
            transform: translateY(40px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 0.9s forwards;
        }

        .hero-stat {
            text-align: center;
        }

        .hero-stat-number {
            display: block;
            font-size: 3rem;
            font-weight: 800;
            color: #4facfe;
            margin-bottom: 5px;
            line-height: 1;
        }

        .hero-stat-label {
            font-size: 1rem;
            color: #e2e8ff;
            font-weight: 500;
        }

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

        .about-floating-element {
            position: absolute;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.1);
            animation: float 20s infinite linear;
        }

        .about-floating-element:nth-child(1) {
            width: 80px;
            height: 80px;
            top: 20%;
            left: 10%;
            animation-delay: 0s;
        }

        .about-floating-element:nth-child(2) {
            width: 60px;
            height: 60px;
            top: 70%;
            right: 15%;
            animation-delay: -5s;
            animation-duration: 25s;
        }

        .about-floating-element:nth-child(3) {
            width: 100px;
            height: 100px;
            bottom: 10%;
            left: 5%;
            animation-delay: -10s;
            animation-duration: 30s;
        }

        @keyframes float {
            0% {
                transform: translateY(0) rotate(0deg);
            }
            25% {
                transform: translateY(-20px) rotate(90deg);
            }
            50% {
                transform: translateY(-40px) rotate(180deg);
            }
            75% {
                transform: translateY(-20px) rotate(270deg);
            }
            100% {
                transform: translateY(0) rotate(360deg);
            }
        }

        /* Main About Content */
        .about-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 100px 20px;
        }

        /* Our Story Section */
        .our-story {
            display: flex;
            flex-wrap: wrap;
            gap: 60px;
            align-items: center;
            margin-bottom: 100px;
        }

        .story-content {
            flex: 1 1 500px;
        }

        .story-image {
            flex: 1 1 500px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
            transform: translateX(-30px);
            opacity: 0;
            transition: all 1s ease;
        }

        .story-image.in-view {
            transform: translateX(0);
            opacity: 1;
        }

        .story-image img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.8s ease;
        }

        .story-image:hover img {
            transform: scale(1.05);
        }

        .section-label {
            display: inline-block;
            background: linear-gradient(135deg, #ff9a00 0%, #ff6a00 100%);
            color: white;
            padding: 8px 24px;
            border-radius: 30px;
            font-size: 0.9rem;
            font-weight: 600;
            letter-spacing: 1px;
            margin-bottom: 20px;
            box-shadow: 0 8px 20px rgba(255, 106, 0, 0.2);
        }

        .section-title {
            font-size: 2.8rem;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 20px;
            color: #1e3a8a;
        }

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

        .section-description {
            font-size: 1.1rem;
            color: #64748b;
            line-height: 1.8;
            margin-bottom: 30px;
        }

        .story-points {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-top: 30px;
        }

        .story-point {
            display: flex;
            gap: 15px;
            align-items: flex-start;
        }

        .story-point-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            background: linear-gradient(135deg, #1e3a8a 0%, #4facfe 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.3rem;
            flex-shrink: 0;
        }

        .story-point-content h4 {
            font-size: 1.2rem;
            color: #1e3a8a;
            margin-bottom: 8px;
        }

        .story-point-content p {
            color: #64748b;
            font-size: 0.95rem;
        }

        /* Mission & Vision */
        .mission-vision {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
            margin-bottom: 100px;
        }

        .mission-card, .vision-card {
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .mission-card:hover, .vision-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
        }

        .mission-card::before, .vision-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            z-index: 2;
        }

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

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

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

        .mission-icon {
            background: linear-gradient(135deg, rgba(79, 172, 254, 0.15) 0%, rgba(0, 242, 254, 0.15) 100%);
            color: #4facfe;
        }

        .vision-icon {
            background: linear-gradient(135deg, rgba(255, 154, 0, 0.15) 0%, rgba(255, 106, 0, 0.15) 100%);
            color: #ff9a00;
        }

        .mission-card h3, .vision-card h3 {
            font-size: 1.8rem;
            color: #1e3a8a;
            margin-bottom: 15px;
        }

        /* Our Values */
        .our-values {
            margin-bottom: 100px;
        }

        .values-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

        .value-card {
            background: white;
            border-radius: 20px;
            padding: 35px 30px;
            text-align: center;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
        }

        .value-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
        }

        .value-icon {
            width: 80px;
            height: 80px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin: 0 auto 25px;
            background: linear-gradient(135deg, #1e3a8a 0%, #4facfe 100%);
            color: white;
        }

        .value-card h4 {
            font-size: 1.3rem;
            color: #1e3a8a;
            margin-bottom: 15px;
        }

        .value-card p {
            color: #64748b;
            font-size: 0.95rem;
            line-height: 1.6;
        }

        /* Leadership Team */
        .leadership-team {
            margin-bottom: 100px;
        }

        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

        .team-member {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .team-member:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
        }

        .member-photo {
            height: 250px;
            width: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
        }

        .member-photo::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(30, 58, 138, 0.7) 0%, rgba(79, 172, 254, 0.5) 100%);
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .team-member:hover .member-photo::after {
            opacity: 1;
        }

        .member-info {
            padding: 25px;
        }

        .member-name {
            font-size: 1.3rem;
            color: #1e3a8a;
            margin-bottom: 5px;
        }

        .member-role {
            color: #4facfe;
            font-weight: 600;
            margin-bottom: 15px;
            font-size: 0.95rem;
        }

        .member-bio {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .member-social {
            display: flex;
            gap: 15px;
        }

        .member-social a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #f1f5f9;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #64748b;
            transition: all 0.3s ease;
        }

        .member-social a:hover {
            background: linear-gradient(135deg, #1e3a8a 0%, #4facfe 100%);
            color: white;
            transform: translateY(-3px);
        }

        /* Achievements */
        .achievements {
            background: linear-gradient(135deg, #0c2461 0%, #1e3799 100%);
            border-radius: 30px;
            padding: 80px 60px;
            margin-bottom: 100px;
            position: relative;
            overflow: hidden;
        }

        .achievements::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
            background-position: center;
            opacity: 0.1;
        }

        .achievements-content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: white;
        }

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

        .achievements-description {
            font-size: 1.2rem;
            color: #e2e8ff;
            max-width: 800px;
            margin: 0 auto 60px;
        }

        .achievements-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
        }

        .achievement-stat {
            text-align: center;
        }

        .achievement-number {
            display: block;
            font-size: 3.5rem;
            font-weight: 800;
            color: #4facfe;
            margin-bottom: 10px;
            line-height: 1;
        }

        .achievement-label {
            font-size: 1.1rem;
            color: #e2e8ff;
            font-weight: 500;
        }

        /* Call to Action */
        .about-cta {
            text-align: center;
            padding: 80px 20px;
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            border-radius: 30px;
            margin-bottom: 100px;
        }

        .cta-title {
            font-size: 2.8rem;
            font-weight: 800;
            color: #1e3a8a;
            margin-bottom: 20px;
        }

        .cta-description {
            font-size: 1.2rem;
            color: #64748b;
            max-width: 700px;
            margin: 0 auto 40px;
        }

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

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 16px 32px;
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            border-radius: 12px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
            z-index: 1;
            border: none;
            cursor: pointer;
        }

        .btn-primary {
            background: linear-gradient(135deg, #1e3a8a 0%, #4facfe 100%);
            color: white;
            box-shadow: 0 10px 25px rgba(30, 58, 138, 0.2);
        }

        .btn-primary:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(30, 58, 138, 0.3);
        }

        .btn-secondary {
            background: white;
            color: #1e3a8a;
            border: 2px solid #e2e8f0;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
        }

        .btn-secondary:hover {
            background: #1e3a8a;
            color: white;
            border-color: #1e3a8a;
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(30, 58, 138, 0.15);
        }

        .btn i {
            margin-right: 10px;
            font-size: 1.2rem;
        }

        /* Footer */
        .about-footer {
            text-align: center;
            padding: 40px 20px;
            color: #64748b;
            border-top: 1px solid #e2e8f0;
        }

        .about-footer a {
            color: #1e3a8a;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
        }

        .about-footer a:hover {
            color: #4facfe;
        }

        /* Responsive Styles */
        @media (max-width: 1200px) {
            .about-hero-title {
                font-size: 3.5rem;
            }
            
            .section-title {
                font-size: 2.5rem;
            }
        }

        @media (max-width: 992px) {
            .about-hero-title {
                font-size: 3rem;
            }
            
            .about-hero-description {
                font-size: 1.1rem;
            }
            
            .hero-stat-number {
                font-size: 2.5rem;
            }
            
            .section-title {
                font-size: 2.2rem;
            }
            
            .achievements {
                padding: 60px 40px;
            }
            
            .achievements-title {
                font-size: 2.5rem;
            }
        }

        @media (max-width: 768px) {
            .about-hero {
                padding: 80px 20px;
                min-height: auto;
            }
            
            .about-hero-title {
                font-size: 2.5rem;
            }
            
            .about-hero-stats {
                gap: 30px;
            }
            
            .hero-stat {
                flex: 0 0 calc(50% - 30px);
            }
            
            .our-story {
                gap: 40px;
            }
            
            .mission-vision {
                grid-template-columns: 1fr;
            }
            
            .achievements {
                padding: 50px 30px;
                border-radius: 20px;
            }
            
            .achievements-title {
                font-size: 2rem;
            }
            
            .achievements-description {
                font-size: 1.1rem;
            }
            
            .achievements-stats {
                grid-template-columns: repeat(2, 1fr);
                gap: 30px;
            }
            
            .achievement-number {
                font-size: 2.8rem;
            }
            
            .cta-title {
                font-size: 2.2rem;
            }
            
            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .btn {
                width: 100%;
                max-width: 300px;
            }
            
            .about-floating-element {
                display: none;
            }
        }

        @media (max-width: 576px) {
            .about-hero-title {
                font-size: 2rem;
            }
            
            .hero-stat {
                flex: 0 0 100%;
            }
            
            .section-title {
                font-size: 1.8rem;
            }
            
            .mission-card, .vision-card {
                padding: 30px 25px;
            }
            
            .achievements {
                padding: 40px 20px;
            }
            
            .achievements-stats {
                grid-template-columns: 1fr;
            }
            
            .cta-title {
                font-size: 1.8rem;
            }
            
            .values-grid, .team-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Animation Classes */
        .fade-up {
            transform: translateY(40px);
            opacity: 0;
            transition: all 1s ease;
        }

        .fade-up.in-view {
            transform: translateY(0);
            opacity: 1;
        }

        .fade-left {
            transform: translateX(-40px);
            opacity: 0;
            transition: all 1s ease;
        }

        .fade-left.in-view {
            transform: translateX(0);
            opacity: 1;
        }

        .fade-right {
            transform: translateX(40px);
            opacity: 0;
            transition: all 1s ease;
        }

        .fade-right.in-view {
            transform: translateX(0);
            opacity: 1;
        }

        @keyframes fadeUp {
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <!-- About Hero Section -->
    <section class="about-hero">
        <!-- Floating Elements -->
        <div class="about-floating-elements">
            <div class="about-floating-element"></div>
            <div class="about-floating-element"></div>
            <div class="about-floating-element"></div>
        </div>
        
        <div class="about-hero-content">
            <div class="hero-breadcrumb">
                <a href="#">Home</a>
                <i class="fas fa-chevron-right"></i>
                <span>About Us</span>
            </div>
            
            <h1 class="about-hero-title">
                About <span>Edunet</span>
            </h1>
            
            <p class="about-hero-description">
                Edunet is a leading educational platform committed to transforming lives through accessible, 
                high-quality education. Since our inception in 2010, we've empowered over 500,000 students 
                to achieve their academic and professional goals.
            </p>
            
            <div class="about-hero-stats">
                <div class="hero-stat">
                    <span class="hero-stat-number">13+</span>
                    <span class="hero-stat-label">Years of Excellence</span>
                </div>
                <div class="hero-stat">
                    <span class="hero-stat-number">500K+</span>
                    <span class="hero-stat-label">Students Empowered</span>
                </div>
                <div class="hero-stat">
                    <span class="hero-stat-number">50+</span>
                    <span class="hero-stat-label">University Partners</span>
                </div>
                <div class="hero-stat">
                    <span class="hero-stat-number">10K+</span>
                    <span class="hero-stat-label">Courses Offered</span>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Main About Content -->
    <div class="about-content">
        <!-- Our Story Section -->
        <section class="our-story">
            <div class="story-content fade-up">
                <div class="section-label">
                    <i class="fas fa-history"></i> Our Journey
                </div>
                <h2 class="section-title">Our <span>Story</span></h2>
                <p class="section-description">
                    Edunet was founded in 2010 by a group of educators and technologists who believed that 
                    quality education should be accessible to everyone, regardless of geographical or financial 
                    constraints. What started as a small initiative to provide online coaching for competitive 
                    exams has now grown into one of India's most trusted educational platforms.
                </p>
                <p class="section-description">
                    Over the years, we've expanded our offerings to include degree programs, professional 
                    certifications, skill development courses, and career counseling services. Our commitment 
                    to innovation has led us to develop AI-powered learning tools, virtual classrooms, and 
                    personalized learning pathways that adapt to each student's pace and style.
                </p>
                
                <div class="story-points">
                    <div class="story-point">
                        <div class="story-point-icon">
                            <i class="fas fa-rocket"></i>
                        </div>
                        <div class="story-point-content">
                            <h4>Innovation in Education</h4>
                            <p>Pioneered AI-driven personalized learning paths and virtual reality classrooms.</p>
                        </div>
                    </div>
                    <div class="story-point">
                        <div class="story-point-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="story-point-content">
                            <h4>Community Building</h4>
                            <p>Created a vibrant community of learners, educators, and industry professionals.</p>
                        </div>
                    </div>
                    <div class="story-point">
                        <div class="story-point-icon">
                            <i class="fas fa-award"></i>
                        </div>
                        <div class="story-point-content">
                            <h4>Recognition & Awards</h4>
                            <p>Received multiple awards for excellence in online education and innovation.</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="story-image fade-right">
                <img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Edunet Team">
            </div>
        </section>
        
        <!-- Mission & Vision -->
        <section class="mission-vision">
            <div class="mission-card fade-up">
                <div class="mission-icon">
                    <i class="fas fa-bullseye"></i>
                </div>
                <h3>Our Mission</h3>
                <p class="section-description">
                    To democratize quality education by leveraging technology to make learning accessible, 
                    affordable, and effective for every aspiring individual. We aim to bridge the gap between 
                    academic knowledge and industry requirements through practical, skill-oriented programs.
                </p>
            </div>
            
            <div class="vision-card fade-up" style="transition-delay: 0.2s;">
                <div class="vision-icon">
                    <i class="fas fa-eye"></i>
                </div>
                <h3>Our Vision</h3>
                <p class="section-description">
                    To become the world's most trusted educational ecosystem that transforms lives through 
                    innovative learning solutions. We envision a future where anyone, anywhere can access 
                    world-class education and unlock their full potential, regardless of their background 
                    or circumstances.
                </p>
            </div>
        </section>
        
        <!-- Our Values -->
        <section class="our-values">
            <div class="section-label">
                <i class="fas fa-heart"></i> What We Believe In
            </div>
            <h2 class="section-title">Our <span>Core Values</span></h2>
            <p class="section-description" style="max-width: 800px;">
                These principles guide everything we do at Edunet, from course design to student support 
                and community engagement.
            </p>
            
            <div class="values-grid">
                <div class="value-card fade-up">
                    <div class="value-icon">
                        <i class="fas fa-graduation-cap"></i>
                    </div>
                    <h4>Excellence in Education</h4>
                    <p>We maintain the highest standards in curriculum design, teaching methodology, and student outcomes.</p>
                </div>
                
                <div class="value-card fade-up" style="transition-delay: 0.1s;">
                    <div class="value-icon">
                        <i class="fas fa-handshake"></i>
                    </div>
                    <h4>Integrity & Transparency</h4>
                    <p>We operate with honesty and openness in all our dealings with students, partners, and employees.</p>
                </div>
                
                <div class="value-card fade-up" style="transition-delay: 0.2s;">
                    <div class="value-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <h4>Student-Centric Approach</h4>
                    <p>Every decision we make is focused on enhancing the learning experience and outcomes for our students.</p>
                </div>
                
                <div class="value-card fade-up" style="transition-delay: 0.3s;">
                    <div class="value-icon">
                        <i class="fas fa-lightbulb"></i>
                    </div>
                    <h4>Innovation & Adaptability</h4>
                    <p>We continuously evolve our offerings to incorporate the latest educational technologies and methodologies.</p>
                </div>
                
                <div class="value-card fade-up" style="transition-delay: 0.4s;">
                    <div class="value-icon">
                        <i class="fas fa-globe"></i>
                    </div>
                    <h4>Inclusivity & Diversity</h4>
                    <p>We create learning environments that welcome and support students from all backgrounds and abilities.</p>
                </div>
                
                <div class="value-card fade-up" style="transition-delay: 0.5s;">
                    <div class="value-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h4>Lifelong Learning</h4>
                    <p>We believe education is a continuous journey and provide resources for growth at every career stage.</p>
                </div>
            </div>
        </section>
        
        <!-- Leadership Team -->
        <section class="leadership-team">
            <div class="section-label">
                <i class="fas fa-user-tie"></i> Meet The Team
            </div>
            <h2 class="section-title">Our <span>Leadership Team</span></h2>
            <p class="section-description" style="max-width: 800px;">
                Our experienced leadership team brings together expertise from education, technology, and 
                business to drive Edunet's mission forward.
            </p>
            
            <div class="team-grid">
                <div class="team-member fade-up">
                    <div class="member-photo" style="background-image: url('https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
                    <div class="member-info">
                        <h3 class="member-name">Dr. Anjali Sharma</h3>
                        <p class="member-role">Founder & CEO</p>
                        <p class="member-bio">Former professor at IIT Delhi with 20+ years in education technology and curriculum design.</p>
                        <div class="member-social">
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fas fa-envelope"></i></a>
                        </div>
                    </div>
                </div>
                
                <div class="team-member fade-up" style="transition-delay: 0.1s;">
                    <div class="member-photo" style="background-image: url('https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
                    <div class="member-info">
                        <h3 class="member-name">Rajesh Kumar</h3>
                        <p class="member-role">Chief Technology Officer</p>
                        <p class="member-bio">Tech entrepreneur with expertise in EdTech platforms, AI, and scalable learning systems.</p>
                        <div class="member-social">
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-github"></i></a>
                            <a href="#"><i class="fas fa-envelope"></i></a>
                        </div>
                    </div>
                </div>
                
                <div class="team-member fade-up" style="transition-delay: 0.2s;">
                    <div class="member-photo" style="background-image: url('https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80');"></div>
                    <div class="member-info">
                        <h3 class="member-name">Priya Mehta</h3>
                        <p class="member-role">Academic Director</p>
                        <p class="member-bio">PhD in Education with extensive experience in curriculum development and pedagogical research.</p>
                        <div class="member-social">
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fas fa-envelope"></i></a>
                        </div>
                    </div>
                </div>
                
                
            </div>
        </section>
        
        <!-- Achievements -->
        <section class="achievements fade-up">
            <div class="achievements-content">
                <h2 class="achievements-title">Our Achievements</h2>
                <p class="achievements-description">
                    Over the years, Edunet has been recognized for excellence in online education 
                    and innovation in learning technology.
                </p>
                
                <div class="achievements-stats">
                    <div class="achievement-stat">
                        <span class="achievement-number">15+</span>
                        <span class="achievement-label">National Awards</span>
                    </div>
                    <div class="achievement-stat">
                        <span class="achievement-number">98%</span>
                        <span class="achievement-label">Student Satisfaction</span>
                    </div>
                    <div class="achievement-stat">
                        <span class="achievement-number">50+</span>
                        <span class="achievement-label">University Partnerships</span>
                    </div>
                    <div class="achievement-stat">
                        <span class="achievement-number">25K+</span>
                        <span class="achievement-label">Placements Facilitated</span>
                    </div>
                </div>
            </div>
        </section>
        
    
    </div>
    
   

    <script>
        // Scroll animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('in-view');
                }
            });
        }, observerOptions);
        
        // Observe all elements with animation classes
        document.querySelectorAll('.fade-up, .fade-left, .fade-right, .story-image').forEach(element => {
            observer.observe(element);
        });
        
        // Animate achievement numbers
        const achievementNumbers = document.querySelectorAll('.achievement-number');
        const achievementObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const numberElement = entry.target;
                    const targetValue = parseInt(numberElement.textContent);
                    const suffix = numberElement.textContent.replace(/[0-9+]/g, '');
                    const duration = 2000;
                    const step = targetValue / (duration / 16);
                    let currentValue = 0;
                    
                    const timer = setInterval(() => {
                        currentValue += step;
                        if (currentValue >= targetValue) {
                            currentValue = targetValue;
                            clearInterval(timer);
                        }
                        numberElement.textContent = Math.floor(currentValue) + suffix;
                    }, 16);
                    
                    achievementObserver.unobserve(numberElement);
                }
            });
        }, { threshold: 0.5 });
        
        achievementNumbers.forEach(number => {
            achievementObserver.observe(number);
        });
        
        // Button click handlers
        document.querySelectorAll('.btn-primary, .btn-secondary').forEach(button => {
            button.addEventListener('click', function() {
                const buttonText = this.textContent.trim();
                alert(`You clicked: ${buttonText}. This would navigate to the relevant page.`);
            });
        });
        
        // Team member social links
        document.querySelectorAll('.member-social a').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const platform = this.querySelector('i').className.split(' ')[1];
                alert(`This would link to the team member's ${platform.replace('fa-', '')} profile.`);
            });
        });
        
        // Randomize floating elements position on load
        document.addEventListener('DOMContentLoaded', () => {
            const floatingElements = document.querySelectorAll('.about-floating-element');
            floatingElements.forEach(element => {
                // Randomize initial position
                const randomTop = Math.random() * 80 + 10;
                const randomLeft = Math.random() * 80 + 10;
                element.style.top = `${randomTop}%`;
                element.style.left = `${randomLeft}%`;
                
                // Randomize size
                const randomSize = Math.random() * 60 + 40;
                element.style.width = `${randomSize}px`;
                element.style.height = `${randomSize}px`;
                
                // Randomize animation duration
                const randomDuration = Math.random() * 20 + 20;
                element.style.animationDuration = `${randomDuration}s`;
                
                // Randomize border-radius for variety
                const borderRadius = Math.random() * 30 + 10;
                element.style.borderRadius = `${borderRadius}px`;
            });
        });
        
        // Breadcrumb navigation
        document.querySelector('.hero-breadcrumb a').addEventListener('click', function(e) {
            e.preventDefault();
            alert('This would navigate to the home page.');
        });
    </script>


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


?>