<?php
// Start session
session_start();

// Include database configuration
require_once 'admin/database/db_config.php';

// Include header
include 'includes/header.php';
?>

<!-- Page Header -->
<div class="page-header">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1 class="page-title">About Us</h1>
                <p class="page-description">Learn more about our institution and mission</p>
            </div>
            <div class="col-lg-6">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb justify-content-lg-end">
                        <li class="breadcrumb-item"><a href="index.php">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">About Us</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    
    <!-- 3D Objects Animation -->
    <div class="floating-shapes">
        <div class="shape shape-1" data-parallax='{"y": 150, "x": 50}'></div>
        <div class="shape shape-2" data-parallax='{"y": -100, "x": -70}'></div>
        <div class="shape shape-3" data-parallax='{"y": 80, "x": -120}'></div>
        <div class="shape shape-4" data-parallax='{"y": -50, "x": 100}'></div>
            </div>
        </div>
        
<!-- Main Content -->
<div class="about-page-content">
    <!-- About Section -->
    <section class="about-section py-5">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 mb-5 mb-lg-0">
                    <div class="about-image-wrapper wow fadeInLeft" data-wow-delay="0.2s">
                        <img src="assets/img/about/about.jpg" alt="About Our Institution" class="about-image img-fluid rounded-4">
                        <div class="about-experience">
                            <h3>15+</h3>
                            <p>Years of Experience</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="about-content wow fadeInRight" data-wow-delay="0.2s">
                        <h6 class="section-badge">Our Story</h6>
                        <h2 class="section-title">Empowering Students Through Quality Education Since 2004</h2>
                        <p class="section-text">We are dedicated to providing high-quality education that empowers students to achieve their goals and succeed in their chosen careers. Our institution was founded with the vision of making quality education accessible to all.</p>
                        <p class="section-text">Over the years, we have helped thousands of students gain the skills and knowledge they need to excel in today's competitive job market. Our comprehensive curriculum, experienced instructors, and state-of-the-art facilities ensure that our students receive the best possible education.</p>
                        <div class="about-stats">
                            <div class="stat-item">
                                <div class="stat-number">5,000+</div>
                                <div class="stat-label">Students Trained</div>
            </div>
                            <div class="stat-item">
                                <div class="stat-number">50+</div>
                                <div class="stat-label">Expert Instructors</div>
        </div>
                            <div class="stat-item">
                                <div class="stat-number">10+</div>
                                <div class="stat-label">Courses Offered</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
        </div>
        

<style>
/* Page Header */
.page-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    padding: 100px 0 100px;
    color: white;
    margin-bottom: 60px;
    position: relative;
    overflow: hidden;
}

.page-title {
    font-size: 2.75rem;
    font-weight: 700;
    margin-bottom: 15px;
    animation: fadeInUp 1s ease;
}

.page-description {
    font-size: 1.2rem;
    opacity: 0.9;
    animation: fadeInUp 1s ease 0.2s;
    animation-fill-mode: both;
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    animation: fadeInRight 1s ease 0.3s;
    animation-fill-mode: both;
}

.breadcrumb-item a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
    color: white;
}

.breadcrumb-item.active {
    color: white;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5);
}

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

.shape {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    animation: float 8s infinite ease-in-out;
}

.shape-1 {
    width: 100px;
    height: 100px;
    top: 20%;
    left: 15%;
    animation-delay: 0s;
    transform: rotateZ(25deg);
}

.shape-2 {
    width: 150px;
    height: 150px;
    top: 60%;
    left: 75%;
    animation-delay: 2s;
    transform: rotateZ(-15deg);
}

.shape-3 {
    width: 80px;
    height: 80px;
    top: 30%;
    left: 85%;
    animation-delay: 4s;
    transform: rotateZ(45deg);
}

.shape-4 {
    width: 120px;
    height: 120px;
    top: 70%;
    left: 25%;
    animation-delay: 6s;
    transform: rotateZ(-30deg);
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotateZ(0deg);
    }
    50% {
        transform: translateY(-20px) rotateZ(10deg);
    }
}

.container {
    position: relative;
    z-index: 2;
}

/* About Section */
.about-image-wrapper {
    position: relative;
    margin-bottom: 30px;
}

.about-image {
    width: 100%;
    height: auto;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.about-experience {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: var(--primary-color);
    color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.about-experience h3 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1;
}

.about-experience p {
    margin-bottom: 0;
    font-size: 0.9rem;
}

.section-badge {
    display: inline-block;
    padding: 5px 15px;
    background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 20px;
    margin-bottom: 15px;
}

.section-title {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1a202c;
    line-height: 1.3;
}

.section-text {
    font-size: 1rem;
    color: #4a5568;
    margin-bottom: 20px;
    line-height: 1.7;
}

.about-stats {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.stat-item {
    text-align: center;
    padding: 0 15px;
}

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

.stat-label {
    font-size: 0.9rem;
    color: #4a5568;
}

</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
        // Initialize WOW.js for animations
        new WOW().init();
        
    // Initialize parallax effect for 3D shapes
    const shapes = document.querySelectorAll('.shape');
    shapes.forEach(shape => {
        const data = shape.getAttribute('data-parallax');
        if (data) {
            const options = JSON.parse(data);
            window.addEventListener('mousemove', function(e) {
                const x = (window.innerWidth - e.pageX * options.x) / 90;
                const y = (window.innerHeight - e.pageY * options.y) / 90;
                
                shape.style.transform = `translateX(${x}px) translateY(${y}px)`;
            });
        }
    });
    });
</script>

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