<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edunet - Mobile-Optimized Navbar</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- Slick Slider CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&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");


?>

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

        .hero-section {
            position: relative;
            width: 100%;
            height: 85vh;
            
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #0c2461 0%, #1e3799 100%);
        }

        /* Banner Images Container */
        .banner-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .banner-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transform: scale(1.1);
            transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 7s linear;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .banner-slide.active {
            opacity: 1;
            transform: scale(1);
        }

        .banner-slide::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(12, 36, 97, 0.85) 0%, rgba(30, 55, 153, 0.75) 100%);
        }

        /* Banner 1 - University Campus */
        .banner-1 {
            background-image: url('https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2064&q=80');
        }

        /* Banner 2 - Students Learning */
        .banner-2 {
            background-image: 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');
        }

        /* Banner 3 - Graduation */
        .banner-3 {
            background-image: url('https://images.unsplash.com/photo-1541339907198-e08756dedf3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
        }

        /* Banner 4 - Science Lab */
        .banner-4 {
            background-image: url('https://images.unsplash.com/photo-1532094349884-543bc11b234d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
        }

        /* Hero Content */
        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 1200px;
            width: 90%;
            padding: 40px;
            text-align: center;
            color: white;
        }

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

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

        .hero-title {
            font-size: 3.8rem;
            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.5rem;
            font-weight: 400;
            max-width: 700px;
            margin: 0 auto 35px;
            color: #e2e8ff;
            transform: translateY(40px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 0.7s forwards;
        }

        .hero-stats {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-bottom: 40px;
            flex-wrap: wrap;
        }

        .stat-item {
            text-align: center;
            transform: translateY(40px);
            opacity: 0;
        }

        .stat-item:nth-child(1) {
            animation: fadeUp 0.8s ease-out 0.9s forwards;
        }

        .stat-item:nth-child(2) {
            animation: fadeUp 0.8s ease-out 1.1s forwards;
        }

        .stat-item:nth-child(3) {
            animation: fadeUp 0.8s ease-out 1.3s forwards;
        }

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

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

        .hero-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            margin-top: 30px;
            transform: translateY(40px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 1.5s forwards;
        }

        .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: 10px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .btn-primary {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            box-shadow: 0 10px 25px rgba(79, 172, 254, 0.3);
        }

        .btn-primary:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(79, 172, 254, 0.4);
        }

        .btn-primary::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: -1;
        }

        .btn-primary:hover::after {
            opacity: 1;
        }

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

        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-5px);
            border-color: rgba(255, 255, 255, 0.5);
            box-shadow: 0 10px 25px rgba(255, 255, 255, 0.1);
        }

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

        /* Banner Navigation Dots */
        .banner-dots {
            position: absolute;
            bottom: 40px;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 15px;
            z-index: 3;
        }

        .banner-dot {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: all 0.4s ease;
            position: relative;
        }

        .banner-dot.active {
            background: #4facfe;
            transform: scale(1.2);
            box-shadow: 0 0 10px rgba(79, 172, 254, 0.8);
        }

        .banner-dot::after {
            content: '';
            position: absolute;
            top: -8px;
            left: -8px;
            right: -8px;
            bottom: -8px;
            border-radius: 50%;
        }

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

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

        .floating-element:nth-child(1) {
            width: 60px;
            height: 60px;
            top: 15%;
            left: 10%;
            animation-delay: 0s;
            background: rgba(79, 172, 254, 0.15);
        }

        .floating-element:nth-child(2) {
            width: 40px;
            height: 40px;
            top: 70%;
            right: 15%;
            animation-delay: -5s;
            background: rgba(255, 106, 0, 0.15);
            animation-duration: 25s;
        }

        .floating-element:nth-child(3) {
            width: 80px;
            height: 80px;
            bottom: 20%;
            left: 5%;
            animation-delay: -10s;
            background: rgba(0, 242, 254, 0.1);
            animation-duration: 30s;
        }

        .floating-element:nth-child(4) {
            width: 50px;
            height: 50px;
            top: 30%;
            right: 10%;
            animation-delay: -15s;
            background: rgba(255, 154, 0, 0.15);
        }

        @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);
            }
        }

        /* Scroll Indicator */
        .scroll-indicator {
            position: absolute;
            bottom: 30px;
            right: 30px;
            z-index: 3;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
            opacity: 0.8;
            transform: translateY(0);
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-10px);
            }
            60% {
                transform: translateY(-5px);
            }
        }

        .scroll-indicator i {
            font-size: 1.5rem;
        }

        /* Responsive Styles */
        @media (max-width: 992px) {
            .hero-title {
                font-size: 3rem;
            }
            
            .hero-subtitle {
                font-size: 1.3rem;
            }
            
            .stat-number {
                font-size: 2.2rem;
            }
        }

        @media (max-width: 768px) {
            .hero-section {
                min-height: 800px;
                height: auto;
                padding: 100px 0;
            }
            
            .hero-content {
                padding: 20px;
            }
            
            .hero-title {
                font-size: 2.5rem;
            }
            
            .hero-subtitle {
                font-size: 1.1rem;
            }
            
            .hero-stats {
                gap: 30px;
            }
            
            .stat-item {
                flex: 0 0 calc(50% - 30px);
            }
            
            .hero-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .btn {
                width: 100%;
                max-width: 300px;
            }
            
            .floating-element {
                display: none;
            }
            
            .scroll-indicator {
                display: none;
            }
        }

        @media (max-width: 576px) {
            .hero-title {
                font-size: 2rem;
            }
            
            .hero-subtitle {
                font-size: 1rem;
            }
            
            .stat-item {
                flex: 0 0 100%;
            }
            
            .stat-number {
                font-size: 1.8rem;
            }
            
            .hero-badge {
                font-size: 0.8rem;
                padding: 6px 15px;
            }
            
            .banner-dots {
                bottom: 20px;
            }
        }

        /* Demo Content Section */
        .demo-section {
            max-width: 1200px;
            margin: 60px auto;
            padding: 0 20px;
        }

        .demo-section h2 {
            color: #1e3a8a;
            margin-bottom: 20px;
            font-size: 2.2rem;
        }

        .demo-section p {
            color: #475569;
            margin-bottom: 20px;
            font-size: 1.1rem;
        }

        .demo-features {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            margin-top: 40px;
        }

        .demo-feature {
            flex: 1 1 300px;
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease;
        }

        .demo-feature:hover {
            transform: translateY(-10px);
        }

        .demo-feature h3 {
            color: #1e40af;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .demo-feature h3 i {
            color: #3b82f6;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-section">
        <!-- Banner Images -->
        <div class="banner-container">
            <div class="banner-slide banner-1 active"></div>
            <div class="banner-slide banner-2"></div>
            <div class="banner-slide banner-3"></div>
            <div class="banner-slide banner-4"></div>
        </div>
        
        <!-- Floating Elements -->
        <div class="floating-elements">
            <div class="floating-element"></div>
            <div class="floating-element"></div>
            <div class="floating-element"></div>
            <div class="floating-element"></div>
        </div>
        
        <!-- Hero Content -->
        <div class="hero-content">
            <div class="hero-badge">
                <i class="fas fa-graduation-cap"></i> Top Ranked Education Platform
            </div>
            
            <h1 class="hero-title">
                Transform Your Future With <span>Edunet</span>
            </h1>
            
            <p class="hero-subtitle">
                Discover thousands of courses from top universities and colleges worldwide. 
                Join over 500,000 successful students who have advanced their careers with our programs.
            </p>
            
            <div class="hero-stats">
                <div class="stat-item">
                    <span class="stat-number">10,000+</span>
                    <span class="stat-label">Online Courses</span>
                </div>
                <div class="stat-item">
                    <span class="stat-number">500+</span>
                    <span class="stat-label">Partner Institutions</span>
                </div>
                <div class="stat-item">
                    <span class="stat-number">98%</span>
                    <span class="stat-label">Success Rate</span>
                </div>
            </div>
            
            
        </div>
        
        <!-- Banner Navigation Dots -->
        <div class="banner-dots">
            <div class="banner-dot active" data-slide="0"></div>
            <div class="banner-dot" data-slide="1"></div>
            <div class="banner-dot" data-slide="2"></div>
            <div class="banner-dot" data-slide="3"></div>
        </div>
        
        <!-- Scroll Indicator -->
        <div class="scroll-indicator">
            <span>Scroll</span>
            <i class="fas fa-chevron-down"></i>
        </div>
    </section>
    
  

    <script>
        // Banner Slider Functionality
        const slides = document.querySelectorAll('.banner-slide');
        const dots = document.querySelectorAll('.banner-dot');
        let currentSlide = 0;
        
        // Function to show a specific slide
        function showSlide(index) {
            // Reset all slides
            slides.forEach(slide => {
                slide.classList.remove('active');
            });
            
            // Reset all dots
            dots.forEach(dot => {
                dot.classList.remove('active');
            });
            
            // Show the selected slide
            slides[index].classList.add('active');
            dots[index].classList.add('active');
            currentSlide = index;
        }
        
        // Function to go to next slide
        function nextSlide() {
            let nextIndex = (currentSlide + 1) % slides.length;
            showSlide(nextIndex);
        }
        
        // Initialize slider
        let slideInterval = setInterval(nextSlide, 5000);
        
        // Add click event to dots
        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                clearInterval(slideInterval);
                showSlide(index);
                slideInterval = setInterval(nextSlide, 5000);
            });
        });
        
        // Add hover effect to dots
        dots.forEach(dot => {
            dot.addEventListener('mouseenter', () => {
                dot.style.transform = 'scale(1.4)';
            });
            
            dot.addEventListener('mouseleave', () => {
                if (!dot.classList.contains('active')) {
                    dot.style.transform = 'scale(1)';
                }
            });
        });
        
        // Animate stats counter
        const statNumbers = document.querySelectorAll('.stat-number');
        const observerOptions = {
            threshold: 0.5,
            rootMargin: '0px 0px -50px 0px'
        };
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const statNumber = entry.target;
                    const targetValue = parseInt(statNumber.textContent);
                    const suffix = statNumber.textContent.replace(/[0-9]/g, '');
                    const duration = 2000;
                    const step = targetValue / (duration / 16); // 60fps
                    let currentValue = 0;
                    
                    const timer = setInterval(() => {
                        currentValue += step;
                        if (currentValue >= targetValue) {
                            currentValue = targetValue;
                            clearInterval(timer);
                        }
                        statNumber.textContent = Math.floor(currentValue) + suffix;
                    }, 16);
                    
                    observer.unobserve(statNumber);
                }
            });
        }, observerOptions);
        
        statNumbers.forEach(statNumber => {
            observer.observe(statNumber);
        });
        
        // Add scroll behavior for demo
        window.addEventListener('scroll', () => {
            const heroSection = document.querySelector('.hero-section');
            const scrollPosition = window.scrollY;
            
            // Parallax effect for banner images
            if (scrollPosition < heroSection.clientHeight) {
                const translateY = scrollPosition * 0.5;
                document.querySelector('.banner-container').style.transform = `translateY(${translateY}px)`;
            }
        });
        
        // Button hover effects
        const buttons = document.querySelectorAll('.btn');
        buttons.forEach(button => {
            button.addEventListener('mouseenter', (e) => {
                const x = e.pageX - button.getBoundingClientRect().left;
                const y = e.pageY - button.getBoundingClientRect().top;
                
                button.style.setProperty('--x', x + 'px');
                button.style.setProperty('--y', y + 'px');
            });
        });
        
        // Floating elements randomizer on load
        document.addEventListener('DOMContentLoaded', () => {
            const floatingElements = document.querySelectorAll('.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() * 40 + 30;
                element.style.width = `${randomSize}px`;
                element.style.height = `${randomSize}px`;
                
                // Randomize animation duration
                const randomDuration = Math.random() * 20 + 20;
                element.style.animationDuration = `${randomDuration}s`;
            });
        });
    </script>



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

        .aboutpart {
            background-color: #f8fafc;
            color: #333;
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        /* About Us Section */
        .about-section {
            width: 100%;
            max-width: 1300px;
            background: white;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
            position: relative;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s forwards;
        }

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

        /* Decorative Elements */
        .about-decoration {
            position: absolute;
            z-index: 0;
        }

        .decoration-1 {
            top: -50px;
            right: -50px;
            width: 200px;
            height: 200px;
            background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
            border-radius: 50%;
            opacity: 0.7;
        }

        .decoration-2 {
            bottom: -80px;
            left: -80px;
            width: 300px;
            height: 300px;
            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
            border-radius: 50%;
            opacity: 0.5;
        }

        .decoration-3 {
            top: 40%;
            left: 5%;
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 100%);
            border-radius: 20px;
            transform: rotate(45deg);
            opacity: 0.6;
            animation: float 6s ease-in-out infinite;
        }

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

        /* Section Content */
        .about-container {
            display: flex;
            flex-wrap: wrap;
            min-height: 700px;
            position: relative;
            z-index: 1;
        }

        /* Left Side - Image */
        .about-image-container {
            flex: 1;
            min-width: 300px;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
        }

        .about-image-wrapper {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .about-main-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transform: scale(1.1);
            animation: imageReveal 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s forwards;
            filter: brightness(0.95) contrast(1.05);
        }

        @keyframes imageReveal {
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(30, 58, 138, 0.3) 0%, rgba(59, 130, 246, 0.2) 100%);
            z-index: 1;
        }

        .image-badge {
            position: absolute;
            top: 40px;
            left: 40px;
            background: linear-gradient(135deg, #ff9a00 0%, #ff6a00 100%);
            color: white;
            padding: 12px 24px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 1rem;
            letter-spacing: 1px;
            box-shadow: 0 10px 20px rgba(255, 106, 0, 0.3);
            z-index: 2;
            transform: translateX(-30px);
            opacity: 0;
            animation: slideInLeft 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.8s forwards;
        }

        @keyframes slideInLeft {
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .image-badge i {
            margin-right: 8px;
        }

        /* Image Stats */
        .image-stats {
            position: absolute;
            bottom: 40px;
            right: 40px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            z-index: 2;
        }

        .image-stat {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            padding: 15px 20px;
            color: white;
            text-align: center;
            min-width: 120px;
            transform: translateY(30px);
            opacity: 0;
        }

        .image-stat:nth-child(1) {
            animation: slideInUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 1s forwards;
        }

        .image-stat:nth-child(2) {
            animation: slideInUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 1.2s forwards;
        }

        .image-stat:nth-child(3) {
            animation: slideInUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 1.4s forwards;
        }

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

        .stat-number {
            display: block;
            font-size: 1.8rem;
            font-weight: 800;
            line-height: 1;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 0.85rem;
            font-weight: 500;
            opacity: 0.9;
        }

        /* Right Side - Content */
        .about-content {
            flex: 1.2;
            min-width: 300px;
            padding: 60px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .section-subtitle {
            color: #3b82f6;
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 15px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.6s forwards;
        }

        .section-title {
            font-size: 2.8rem;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 25px;
            color: #1e293b;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.8s forwards;
        }

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

        .about-description {
            color: #64748b;
            font-size: 1.1rem;
            line-height: 1.7;
            margin-bottom: 35px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 1s forwards;
        }

        /* Features List */
        .about-features {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-bottom: 40px;
        }

        .feature-item {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            opacity: 0;
            transform: translateY(20px);
        }

        .feature-item:nth-child(1) {
            animation: fadeInUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 1.2s forwards;
        }

        .feature-item:nth-child(2) {
            animation: fadeInUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 1.4s forwards;
        }

        .feature-item:nth-child(3) {
            animation: fadeInUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 1.6s forwards;
        }

        .feature-item:nth-child(4) {
            animation: fadeInUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 1.8s forwards;
        }

        .feature-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1e40af;
            font-size: 1.3rem;
            flex-shrink: 0;
            transition: all 0.4s ease;
        }

        .feature-item:hover .feature-icon {
            transform: translateY(-5px) rotate(5deg);
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
            color: white;
        }

        .feature-content h4 {
            font-size: 1.1rem;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 8px;
        }

        .feature-content p {
            font-size: 0.95rem;
            color: #64748b;
            line-height: 1.5;
        }

        /* CTA Button */
        .about-cta {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
            color: white;
            padding: 16px 32px;
            border-radius: 12px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.05rem;
            box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 2s forwards;
            max-width: fit-content;
        }

        .about-cta:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(59, 130, 246, 0.4);
            gap: 18px;
        }

        .about-cta i {
            transition: transform 0.4s ease;
        }

        .about-cta:hover i {
            transform: translateX(5px);
        }

        /* Responsive Styles */
        @media (max-width: 1100px) {
            .about-container {
                min-height: auto;
            }
            
            .about-content {
                padding: 50px 40px;
            }
            
            .section-title {
                font-size: 2.5rem;
            }
        }

        @media (max-width: 900px) {
            .about-container {
                flex-direction: column;
            }
            
            .about-image-container {
                min-height: 400px;
            }
            
            .about-content {
                padding: 50px 40px;
            }
            
            .image-badge {
                top: 25px;
                left: 25px;
            }
            
            .image-stats {
                bottom: 25px;
                right: 25px;
            }
        }

        @media (max-width: 600px) {
            .about-section {
                border-radius: 20px;
            }
            
            .about-content {
                padding: 40px 25px;
            }
            
            .section-title {
                font-size: 2.2rem;
            }
            
            .about-features {
                grid-template-columns: 1fr;
                gap: 25px;
            }
            
            .image-badge {
                padding: 10px 20px;
                font-size: 0.9rem;
            }
            
            .image-stats {
                flex-direction: row;
                bottom: 20px;
                left: 20px;
                right: 20px;
                justify-content: space-between;
            }
            
            .image-stat {
                min-width: 90px;
                padding: 12px 15px;
            }
            
            .stat-number {
                font-size: 1.5rem;
            }
            
            .stat-label {
                font-size: 0.75rem;
            }
            
            .decoration-1,
            .decoration-2,
            .decoration-3 {
                display: none;
            }
        }

        @media (max-width: 400px) {
            .section-title {
                font-size: 1.9rem;
            }
            
            .about-description {
                font-size: 1rem;
            }
            
            .image-stats {
                flex-wrap: wrap;
                gap: 10px;
            }
            
            .image-stat {
                flex: 1;
                min-width: 80px;
            }
        }
    </style>

<div class = "aboutpart">
    <!-- About Us Section -->
    <section class="about-section">
        <!-- Decorative Elements -->
        <div class="about-decoration decoration-1"></div>
        <div class="about-decoration decoration-2"></div>
        <div class="about-decoration decoration-3"></div>
        
        <div class="about-container">
            <!-- Left Side - Image -->
            <div class="about-image-container">
                <div class="about-image-wrapper">
                    <div class="image-overlay"></div>
                    <img src="https://plus.unsplash.com/premium_photo-1713296255442-e9338f42aad8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fEVkdWNhdGlvbnxlbnwwfHwwfHx8MA%3D%3D" 
                         alt="Edunet Students Learning" class="about-main-image">
                    
                  
                    
                    <div class="image-stats">
                        <div class="image-stat">
                            <span class="stat-number">500K+</span>
                            <span class="stat-label">Students</span>
                        </div>
                        <div class="image-stat">
                            <span class="stat-number">150+</span>
                            <span class="stat-label">Countries</span>
                        </div>
                        <div class="image-stat">
                            <span class="stat-number">10K+</span>
                            <span class="stat-label">Courses</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Right Side - Content -->
            <div class="about-content">
                <h3 class="section-subtitle">About Edunet</h3>
                <h2 class="section-title">Transforming Education <span>Worldwide</span></h2>
                
                <p class="about-description">
                    Edunet is a leading global education platform dedicated to making quality education accessible to everyone, everywhere. 
                    Founded in 2010, we've revolutionized how people learn by connecting students with top universities and industry experts 
                    through innovative online programs.
                </p>
                
                <p class="about-description">
                    Our mission is to empower learners to achieve their personal and professional goals through flexible, 
                    career-relevant education. We believe that education is the most powerful tool for personal transformation 
                    and social change.
                </p>
                
                <div class="about-features">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-globe"></i>
                        </div>
                        <div class="feature-content">
                            <h4>Global Reach</h4>
                            <p>We serve students from over 150 countries with localized content and support.</p>
                        </div>
                    </div>
                    
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-chalkboard-teacher"></i>
                        </div>
                        <div class="feature-content">
                            <h4>Expert Instructors</h4>
                            <p>Learn from industry leaders and top academics from premier institutions.</p>
                        </div>
                    </div>
                    
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-laptop-code"></i>
                        </div>
                        <div class="feature-content">
                            <h4>Innovative Technology</h4>
                            <p>Cutting-edge learning platform with interactive tools and personalized pathways.</p>
                        </div>
                    </div>
                    
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-handshake"></i>
                        </div>
                        <div class="feature-content">
                            <h4>Industry Partnerships</h4>
                            <p>Strong collaborations with leading companies for career-ready skills.</p>
                        </div>
                    </div>
                </div>
                
                <a href="#" class="about-cta">
                    <span>Learn More About Us</span>
                    <i class="fas fa-arrow-right"></i>
                </a>
            </div>
        </div>
    </section>
</div>
    <script>
        // Image lazy loading enhancement
        document.addEventListener('DOMContentLoaded', function() {
            const aboutImage = document.querySelector('.about-main-image');
            
            // Simulate image loading with a small delay
            setTimeout(() => {
                aboutImage.style.filter = 'brightness(1) contrast(1)';
            }, 500);
            
            // Add interaction to feature items
            const featureItems = document.querySelectorAll('.feature-item');
            
            featureItems.forEach(item => {
                item.addEventListener('mouseenter', () => {
                    const icon = item.querySelector('.feature-icon');
                    icon.style.transform = 'translateY(-5px) rotate(5deg)';
                });
                
                item.addEventListener('mouseleave', () => {
                    const icon = item.querySelector('.feature-icon');
                    icon.style.transform = 'translateY(0) rotate(0)';
                });
            });
            
            // Add parallax effect to decorative elements on scroll
            window.addEventListener('scroll', () => {
                const scrollPosition = window.scrollY;
                const decoration1 = document.querySelector('.decoration-1');
                const decoration2 = document.querySelector('.decoration-2');
                const decoration3 = document.querySelector('.decoration-3');
                
                if (decoration1 && decoration2 && decoration3) {
                    decoration1.style.transform = `translateY(${scrollPosition * 0.1}px)`;
                    decoration2.style.transform = `translateY(${scrollPosition * 0.05}px)`;
                    decoration3.style.transform = `rotate(45deg) translateY(${scrollPosition * 0.07}px)`;
                }
            });
            
            // Animate elements when they come into view
            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('animated');
                    }
                });
            }, observerOptions);
            
            // Observe elements for animation triggers
            const elementsToAnimate = document.querySelectorAll('.feature-item, .about-cta, .image-stat');
            elementsToAnimate.forEach(el => {
                observer.observe(el);
            });
            
            // Button hover effect enhancement
            const ctaButton = document.querySelector('.about-cta');
            
            ctaButton.addEventListener('mouseenter', function(e) {
                const x = e.pageX - this.getBoundingClientRect().left;
                const y = e.pageY - this.getBoundingClientRect().top;
                
                this.style.setProperty('--mouse-x', x + 'px');
                this.style.setProperty('--mouse-y', y + 'px');
            });
        });
    </script>



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

        /* Courses Section */
        .courses-section {
            padding: 100px 20px;
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
        }

        .section-header {
            text-align: center;
            margin-bottom: 70px;
            position: relative;
        }

        .section-subtitle {
            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);
            transform: translateY(20px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 0.2s forwards;
        }

        .section-title {
            font-size: 3rem;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 20px;
            color: #1e3a8a;
            transform: translateY(30px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 0.4s forwards;
        }

        .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.2rem;
            color: #64748b;
            max-width: 700px;
            margin: 0 auto;
            transform: translateY(30px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 0.6s forwards;
        }

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

        /* Courses Filter */
        .courses-filter {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 60px;
            transform: translateY(30px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 0.8s forwards;
        }

        .filter-btn {
            padding: 12px 28px;
            background: white;
            border: 2px solid #e2e8f0;
            border-radius: 50px;
            font-weight: 600;
            color: #64748b;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .filter-btn i {
            font-size: 1.1rem;
        }

        .filter-btn:hover, .filter-btn.active {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            border-color: transparent;
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(79, 172, 254, 0.3);
        }

        /* Courses Grid */
        .courses-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
            margin-bottom: 60px;
        }

        .course-card {
            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);
            position: relative;
            transform: translateY(40px);
            opacity: 0;
        }

        .course-card:nth-child(1) { animation: fadeUp 0.8s ease-out 1s forwards; }
        .course-card:nth-child(2) { animation: fadeUp 0.8s ease-out 1.1s forwards; }
        .course-card:nth-child(3) { animation: fadeUp 0.8s ease-out 1.2s forwards; }
        .course-card:nth-child(4) { animation: fadeUp 0.8s ease-out 1.3s forwards; }
        .course-card:nth-child(5) { animation: fadeUp 0.8s ease-out 1.4s forwards; }
        .course-card:nth-child(6) { animation: fadeUp 0.8s ease-out 1.5s forwards; }
        .course-card:nth-child(7) { animation: fadeUp 0.8s ease-out 1.6s forwards; }
        .course-card:nth-child(8) { animation: fadeUp 0.8s ease-out 1.7s forwards; }

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

        .course-image {
            height: 220px;
            width: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            overflow: hidden;
        }

        .course-image::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;
        }

        .course-card:hover .course-image::after {
            opacity: 1;
        }

        .course-category {
            position: absolute;
            top: 20px;
            right: 20px;
            background: white;
            color: #1e3a8a;
            padding: 6px 16px;
            border-radius: 30px;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            z-index: 2;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .course-duration {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            color: #1e3a8a;
            padding: 6px 14px;
            border-radius: 30px;
            font-size: 0.8rem;
            font-weight: 600;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* Course Content */
        .course-content {
            padding: 25px;
        }

        .course-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1e3a8a;
            margin-bottom: 12px;
            line-height: 1.3;
        }

        .course-description {
            color: #64748b;
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 20px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .course-features {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 25px;
        }

        .course-feature {
            background: #f0f9ff;
            color: #1e40af;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .course-feature i {
            font-size: 0.9rem;
        }

        .course-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #f1f5f9;
            padding-top: 20px;
        }

        .course-instructor {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .instructor-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            border: 2px solid #e2e8f0;
        }

        .instructor-name {
            font-weight: 600;
            color: #475569;
            font-size: 0.95rem;
        }

        .course-action {
            background: linear-gradient(135deg, #1e3a8a 0%, #4facfe 100%);
            color: white;
            border: none;
            padding: 10px 24px;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 8px 20px rgba(30, 58, 138, 0.2);
        }

        .course-action:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 25px rgba(30, 58, 138, 0.3);
        }

        /* View All Button */
        .view-all-container {
            text-align: center;
            transform: translateY(30px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 1.8s forwards;
        }

        .view-all-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 16px 40px;
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            background: white;
            color: #1e3a8a;
            border: 2px solid #e2e8f0;
            gap: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        .view-all-btn:hover {
            background: linear-gradient(135deg, #1e3a8a 0%, #4facfe 100%);
            color: white;
            border-color: transparent;
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(30, 58, 138, 0.2);
        }

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

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

        .circle-1 {
            width: 120px;
            height: 120px;
            background: #4facfe;
            top: 10%;
            left: 5%;
            animation-delay: 0s;
        }

        .circle-2 {
            width: 80px;
            height: 80px;
            background: #ff9a00;
            top: 70%;
            right: 10%;
            animation-delay: -5s;
            animation-duration: 25s;
        }

        .circle-3 {
            width: 160px;
            height: 160px;
            background: #1e3a8a;
            bottom: 10%;
            left: 10%;
            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);
            }
        }

        /* Responsive Styles */
        @media (max-width: 1200px) {
            .courses-grid {
                grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            }
        }

        @media (max-width: 992px) {
            .section-title {
                font-size: 2.5rem;
            }
            
            .courses-grid {
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                gap: 25px;
            }
        }

        @media (max-width: 768px) {
            .courses-section {
                padding: 80px 20px;
            }
            
            .section-title {
                font-size: 2.2rem;
            }
            
            .section-description {
                font-size: 1.1rem;
            }
            
            .courses-grid {
                grid-template-columns: 1fr;
                max-width: 500px;
                margin-left: auto;
                margin-right: auto;
            }
            
            .courses-filter {
                gap: 10px;
            }
            
            .filter-btn {
                padding: 10px 20px;
                font-size: 0.9rem;
            }
        }

        @media (max-width: 576px) {
            .section-title {
                font-size: 1.8rem;
            }
            
            .section-subtitle {
                font-size: 0.8rem;
                padding: 6px 18px;
            }
            
            .course-card {
                max-width: 100%;
            }
            
            .course-content {
                padding: 20px;
            }
            
            .course-footer {
                flex-direction: column;
                gap: 15px;
                align-items: flex-start;
            }
            
            .course-action {
                width: 100%;
                justify-content: center;
            }
            
            .circle {
                display: none;
            }
        }

        /* Demo Info Section */
        .demo-info {
            max-width: 1200px;
            margin: 60px auto;
            padding: 0 20px;
        }

        .demo-info h3 {
            color: #1e3a8a;
            margin-bottom: 20px;
            font-size: 1.8rem;
        }

        .demo-info p {
            color: #475569;
            margin-bottom: 20px;
            font-size: 1.1rem;
        }

        .features-list {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 30px;
        }

        .feature-item {
            flex: 1 1 250px;
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
        }

        .feature-item h4 {
            color: #1e40af;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .feature-item h4 i {
            color: #4facfe;
        }
    </style>
</head>
<body>
    <!-- Courses Section -->
    <section class="courses-section">
        <!-- Floating Background Elements -->
        <div class="floating-circles">
            <div class="circle circle-1"></div>
            <div class="circle circle-2"></div>
            <div class="circle circle-3"></div>
        </div>
        
        <!-- Section Header -->
        <div class="section-header">
            <div class="section-subtitle">
                <i class="fas fa-graduation-cap"></i> Explore Programs
            </div>
            <h2 class="section-title">Our Featured <span>Courses</span></h2>
            <p class="section-description">
                Discover a wide range of professional and academic programs designed to help you achieve your career goals. 
                Learn from industry experts and join a community of successful graduates.
            </p>
        </div>
        
        <!-- Courses Filter -->
        <div class="courses-filter">
            <button class="filter-btn active" data-filter="all">
                <i class="fas fa-th"></i> All Courses
            </button>
            <button class="filter-btn" data-filter="education">
                <i class="fas fa-chalkboard-teacher"></i> Education
            </button>
            <button class="filter-btn" data-filter="law">
                <i class="fas fa-gavel"></i> Law
            </button>
            <button class="filter-btn" data-filter="business">
                <i class="fas fa-chart-line"></i> Business
            </button>
            <button class="filter-btn" data-filter="technology">
                <i class="fas fa-laptop-code"></i> Technology
            </button>
        </div>
        
        <!-- Courses Grid -->
        <div class="courses-grid">
            <!-- B.Ed -->
            <div class="course-card" data-category="education">
                <div class="course-image" style="background-image: url('https://images.unsplash.com/photo-1501504905252-473c47e087f8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y291cnNlfGVufDB8fDB8fHww');">
                    <div class="course-category">Education</div>
                    <div class="course-duration">
                        <i class="far fa-clock"></i> 2 Years
                    </div>
                </div>
                <div class="course-content">
                    <h3 class="course-title">Bachelor of Education (B.Ed)</h3>
                    <p class="course-description">
                        A professional undergraduate degree that prepares students for a career in teaching at the secondary and higher secondary levels.
                    </p>
                    <div class="course-features">
                        <span class="course-feature">
                            <i class="fas fa-user-graduate"></i> Teaching Methodology
                        </span>
                        <span class="course-feature">
                            <i class="fas fa-book"></i> Educational Psychology
                        </span>
                        <span class="course-feature">
                            <i class="fas fa-chalkboard"></i> Classroom Management
                        </span>
                    </div>
                    <div class="course-footer">
                        
                        <a href = "b.ed-course.php" class="course-action">
                            <i class="fas fa-info-circle"></i> Details
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- M.Ed -->
            <div class="course-card" data-category="education">
                <div class="course-image" style="background-image: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fGNvdXJzZXxlbnwwfHwwfHx8MA%3D%3D');">
                    <div class="course-category">Education</div>
                    <div class="course-duration">
                        <i class="far fa-clock"></i> 2 Years
                    </div>
                </div>
                <div class="course-content">
                    <h3 class="course-title">Master of Education (M.Ed)</h3>
                    <p class="course-description">
                        An advanced postgraduate program focusing on educational research, curriculum development, and educational leadership.
                    </p>
                    <div class="course-features">
                        <span class="course-feature">
                            <i class="fas fa-search"></i> Educational Research
                        </span>
                        <span class="course-feature">
                            <i class="fas fa-tasks"></i> Curriculum Design
                        </span>
                        <span class="course-feature">
                            <i class="fas fa-user-tie"></i> Educational Leadership
                        </span>
                    </div>
                    <div class="course-footer">
                        
                        <a href = "m.ed-course.php" class="course-action">
                            <i class="fas fa-info-circle"></i> Details
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- LLB -->
            <div class="course-card" data-category="law">
                <div class="course-image" style="background-image: url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');">
                    <div class="course-category">Law</div>
                    <div class="course-duration">
                        <i class="far fa-clock"></i> 3 Years
                    </div>
                </div>
                <div class="course-content">
                    <h3 class="course-title">Bachelor of Laws (LLB)</h3>
                    <p class="course-description">
                        A foundational law degree providing comprehensive knowledge of legal principles, constitutional law, and judicial procedures.
                    </p>
                    <div class="course-features">
                        <span class="course-feature">
                            <i class="fas fa-balance-scale"></i> Constitutional Law
                        </span>
                        <span class="course-feature">
                            <i class="fas fa-gavel"></i> Criminal Law
                        </span>
                        <span class="course-feature">
                            <i class="fas fa-file-contract"></i> Contract Law
                        </span>
                    </div>
                    <div class="course-footer">
                      
                        <a href = "llb-course.php" class="course-action">
                            <i class="fas fa-info-circle"></i> Details
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- LLM -->
            <div class="course-card" data-category="law">
                <div class="course-image" style="background-image: url('https://images.unsplash.com/photo-1434030216411-0b793f4b4173?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fGNvdXJzZXxlbnwwfHwwfHx8MA%3D%3D');">
                    <div class="course-category">Law</div>
                    <div class="course-duration">
                        <i class="far fa-clock"></i> 2 Years
                    </div>
                </div>
                <div class="course-content">
                    <h3 class="course-title">Master of Laws (LLM)</h3>
                    <p class="course-description">
                        A specialized postgraduate law degree allowing students to focus on specific legal fields like corporate law, international law, or human rights.
                    </p>
                    <div class="course-features">
                        <span class="course-feature">
                            <i class="fas fa-landmark"></i> Corporate Law
                        </span>
                        <span class="course-feature">
                            <i class="fas fa-globe"></i> International Law
                        </span>
                        <span class="course-feature">
                            <i class="fas fa-handshake"></i> Human Rights Law
                        </span>
                    </div>
                    <div class="course-footer">
                        
                        <a href = "llm-course.php" class="course-action">
                            <i class="fas fa-info-circle"></i> Details
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- MBA -->
            <div class="course-card" data-category="business">
                <div class="course-image" style="background-image: url('https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');">
                    <div class="course-category">Business</div>
                    <div class="course-duration">
                        <i class="far fa-clock"></i> 2 Years
                    </div>
                </div>
                <div class="course-content">
                    <h3 class="course-title">Master of Business Administration (MBA)</h3>
                    <p class="course-description">
                        A prestigious postgraduate program focusing on business management, leadership, and strategic decision-making for corporate success.
                    </p>
                    <div class="course-features">
                        <span class="course-feature">
                            <i class="fas fa-chart-line"></i> Business Strategy
                        </span>
                        <span class="course-feature">
                            <i class="fas fa-users"></i> Leadership
                        </span>
                        <span class="course-feature">
                            <i class="fas fa-money-bill-wave"></i> Finance
                        </span>
                    </div>
                    <div class="course-footer">
                        
                        <a href = "mba.php" class="course-action">
                            <i class="fas fa-info-circle"></i> Details
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- BBA -->
            <div class="course-card" data-category="business">
                <div class="course-image" style="background-image: url('https://images.unsplash.com/photo-1527689368864-3a821dbccc34?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fGNvdXJzZXxlbnwwfHwwfHx8MA%3D%3D');">
                    <div class="course-category">Business</div>
                    <div class="course-duration">
                        <i class="far fa-clock"></i> 3 Years
                    </div>
                </div>
                <div class="course-content">
                    <h3 class="course-title">Bachelor of Business Administration (BBA)</h3>
                    <p class="course-description">
                        An undergraduate program providing foundational knowledge in business management, marketing, accounting, and entrepreneurship.
                    </p>
                    <div class="course-features">
                        <span class="course-feature">
                            <i class="fas fa-bullhorn"></i> Marketing
                        </span>
                        <span class="course-feature">
                            <i class="fas fa-calculator"></i> Accounting
                        </span>
                        <span class="course-feature">
                            <i class="fas fa-lightbulb"></i> Entrepreneurship
                        </span>
                    </div>
                    <div class="course-footer">
                       
                        <a href = "bba.php" class="course-action">
                            <i class="fas fa-info-circle"></i> Details
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- B.Tech -->
            <div class="course-card" data-category="technology">
                <div class="course-image" style="background-image: url('https://images.unsplash.com/photo-1598981457915-aea220950616?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fHN0dWRlbnQlMjBzdHVkeWluZ3xlbnwwfHwwfHx8MA%3D%3D');">
                    <div class="course-category">Technology</div>
                    <div class="course-duration">
                        <i class="far fa-clock"></i> 4 Years
                    </div>
                </div>
                <div class="course-content">
                    <h3 class="course-title">Bachelor of Technology (B.Tech)</h3>
                    <p class="course-description">
                        An engineering undergraduate program with specializations in Computer Science, Mechanical, Civil, Electrical, and Electronics engineering.
                    </p>
                    <div class="course-features">
                        <span class="course-feature">
                            <i class="fas fa-laptop-code"></i> Computer Science
                        </span>
                        <span class="course-feature">
                            <i class="fas fa-cogs"></i> Mechanical
                        </span>
                        <span class="course-feature">
                            <i class="fas fa-bolt"></i> Electrical
                        </span>
                    </div>
                    <div class="course-footer">
                        
                        <a href = "b.tech-course.php" class="course-action">
                            <i class="fas fa-info-circle"></i> Details
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- BCA -->
            <div class="course-card" data-category="technology">
                <div class="course-image" style="background-image: url('https://images.unsplash.com/photo-1513258496099-48168024aec0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8c3R1ZGVudCUyMHN0dWR5aW5nfGVufDB8fDB8fHww');">
                    <div class="course-category">Technology</div>
                    <div class="course-duration">
                        <i class="far fa-clock"></i> 3 Years
                    </div>
                </div>
                <div class="course-content">
                    <h3 class="course-title">Bachelor of Computer Applications (BCA)</h3>
                    <p class="course-description">
                        An undergraduate program focusing on computer applications, software development, database management, and web technologies.
                    </p>
                    <div class="course-features">
                        <span class="course-feature">
                            <i class="fas fa-code"></i> Programming
                        </span>
                        <span class="course-feature">
                            <i class="fas fa-database"></i> Database Management
                        </span>
                        <span class="course-feature">
                            <i class="fas fa-globe"></i> Web Development
                        </span>
                    </div>
                    <div class="course-footer">
                        
                        <a href = "bca.php" class="course-action">
                            <i class="fas fa-info-circle"></i> Details
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- View All Button -->
        <div class="view-all-container">
            <button class="view-all-btn">
                <i class="fas fa-eye"></i> View All Courses
            </button>
        </div>
    </section>
    

    <script>
        // Course Filter Functionality
        const filterButtons = document.querySelectorAll('.filter-btn');
        const courseCards = document.querySelectorAll('.course-card');
        
        filterButtons.forEach(button => {
            button.addEventListener('click', () => {
                // Remove active class from all buttons
                filterButtons.forEach(btn => btn.classList.remove('active'));
                
                // Add active class to clicked button
                button.classList.add('active');
                
                const filterValue = button.getAttribute('data-filter');
                
                // Filter course cards
                courseCards.forEach(card => {
                    const cardCategory = card.getAttribute('data-category');
                    
                    if (filterValue === 'all' || filterValue === cardCategory) {
                        card.style.display = 'block';
                        setTimeout(() => {
                            card.style.opacity = '1';
                            card.style.transform = 'translateY(0)';
                        }, 10);
                    } else {
                        card.style.opacity = '0';
                        card.style.transform = 'translateY(20px)';
                        setTimeout(() => {
                            card.style.display = 'none';
                        }, 300);
                    }
                });
            });
        });
        
        // Course Action Button Hover Effects
        const courseActions = document.querySelectorAll('.course-action');
        courseActions.forEach(button => {
            button.addEventListener('mouseenter', (e) => {
                const x = e.pageX - button.getBoundingClientRect().left;
                const y = e.pageY - button.getBoundingClientRect().top;
                
                button.style.setProperty('--x', x + 'px');
                button.style.setProperty('--y', y + 'px');
            });
            
            button.addEventListener('click', function() {
                const courseTitle = this.closest('.course-card').querySelector('.course-title').textContent;
                alert(`More details about ${courseTitle} would be displayed here.`);
            });
        });
        
        // View All Button
        const viewAllBtn = document.querySelector('.view-all-btn');
        viewAllBtn.addEventListener('click', () => {
            alert('All courses would be displayed in a separate page.');
        });
        
        // 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 course cards for scroll animations
        courseCards.forEach(card => {
            observer.observe(card);
        });
        
        // Randomize floating circles position on load
        document.addEventListener('DOMContentLoaded', () => {
            const circles = document.querySelectorAll('.circle');
            circles.forEach(circle => {
                // Randomize initial position
                const randomTop = Math.random() * 80 + 10;
                const randomLeft = Math.random() * 80 + 10;
                circle.style.top = `${randomTop}%`;
                circle.style.left = `${randomLeft}%`;
                
                // Randomize size
                const randomSize = Math.random() * 100 + 60;
                circle.style.width = `${randomSize}px`;
                circle.style.height = `${randomSize}px`;
                
                // Randomize animation duration
                const randomDuration = Math.random() * 20 + 20;
                circle.style.animationDuration = `${randomDuration}s`;
            });
        });
    </script>



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

        /* Universities Section */
        #universitySection {
            padding: 100px 20px;
            background: linear-gradient(135deg, #f8fafc 0%, #f0f9ff 100%);
            position: relative;
            overflow: hidden;
        }

        .university-container {
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        .university-header {
            text-align: center;
            margin-bottom: 70px;
            position: relative;
        }

        .university-subtitle {
            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);
            transform: translateY(20px);
            opacity: 0;
            animation: eduFadeUp 0.8s ease-out 0.2s forwards;
        }

        .university-title {
            font-size: 3rem;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 20px;
            color: #1e3a8a;
            transform: translateY(30px);
            opacity: 0;
            animation: eduFadeUp 0.8s ease-out 0.4s forwards;
        }

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

        .university-description {
            font-size: 1.2rem;
            color: #64748b;
            max-width: 700px;
            margin: 0 auto;
            transform: translateY(30px);
            opacity: 0;
            animation: eduFadeUp 0.8s ease-out 0.6s forwards;
        }

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

        /* Slider Container */
        .university-slider-container {
            position: relative;
            padding: 0 40px;
            margin-bottom: 60px;
            transform: translateY(30px);
            opacity: 0;
            animation: eduFadeUp 0.8s ease-out 0.8s forwards;
        }

        /* University Card */
        .edu-university-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            margin: 15px;
            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);
            height: 650px;
            display: flex;
            flex-direction: column;
            position: relative;
        }

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

        .university-image-container {
            height: 200px;
            width: 100%;
            position: relative;
            overflow: hidden;
        }

        .university-image {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            transition: transform 0.7s ease;
        }

        .edu-university-card:hover .university-image {
            transform: scale(1.05);
        }

        .university-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            color: #1e3a8a;
            padding: 6px 16px;
            border-radius: 30px;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            z-index: 2;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .university-rank {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1.2rem;
            z-index: 2;
            box-shadow: 0 8px 20px rgba(79, 172, 254, 0.3);
        }

        .university-content {
            padding: 25px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .university-name {
            font-size: 1.6rem;
            font-weight: 800;
            color: #1e3a8a;
            margin-bottom: 10px;
            line-height: 1.3;
        }

        .university-location {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #64748b;
            font-size: 0.95rem;
            margin-bottom: 15px;
        }

        .university-location i {
            color: #ff9a00;
        }

        .university-description-text {
            color: #64748b;
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 20px;
            flex: 1;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .university-features {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 25px;
        }

        .university-feature {
            background: #f0f9ff;
            color: #1e40af;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .university-feature i {
            font-size: 0.9rem;
        }

        .university-button {
            background: linear-gradient(135deg, #1e3a8a 0%, #4facfe 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            box-shadow: 0 8px 20px rgba(30, 58, 138, 0.2);
            margin-top: auto;
        }

        .university-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 25px rgba(30, 58, 138, 0.3);
        }

        /* Slider Navigation */
        .edu-slider-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: white;
            border: none;
            color: #1e3a8a;
            font-size: 1.2rem;
            cursor: pointer;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .edu-slider-nav:hover {
            background: linear-gradient(135deg, #1e3a8a 0%, #4facfe 100%);
            color: white;
            transform: translateY(-50%) scale(1.1);
        }

        .edu-slider-prev {
            left: -10px;
        }

        .edu-slider-next {
            right: -10px;
        }

        /* Slider Dots */
        .edu-slider-dots {
            text-align: center;
            margin-top: 40px;
        }

        .edu-slider-dots .slick-dots {
            position: relative;
            bottom: 0;
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        .edu-slider-dots .slick-dots li {
            margin: 0;
        }

        .edu-slider-dots .slick-dots li button {
            width: 14px;
            height: 14px;
            padding: 0;
            border-radius: 50%;
            background: rgba(30, 58, 138, 0.2);
            border: none;
            text-indent: -9999px;
            transition: all 0.3s ease;
        }

        .edu-slider-dots .slick-dots li.slick-active button {
            background: linear-gradient(135deg, #1e3a8a 0%, #4facfe 100%);
            transform: scale(1.3);
        }

        /* View All Button */
        .edu-view-all-container {
            text-align: center;
            transform: translateY(30px);
            opacity: 0;
            animation: eduFadeUp 0.8s ease-out 1s forwards;
        }

        .edu-view-all-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 16px 40px;
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            background: white;
            color: #1e3a8a;
            border: 2px solid #e2e8f0;
            gap: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        .edu-view-all-btn:hover {
            background: linear-gradient(135deg, #1e3a8a 0%, #4facfe 100%);
            color: white;
            border-color: transparent;
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(30, 58, 138, 0.2);
        }

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

        .edu-floating-element {
            position: absolute;
            border-radius: 50%;
            opacity: 0.08;
            animation: eduFloat 25s infinite linear;
        }

        .edu-float-1 {
            width: 120px;
            height: 120px;
            background: #4facfe;
            top: 10%;
            left: 5%;
            animation-delay: 0s;
        }

        .edu-float-2 {
            width: 80px;
            height: 80px;
            background: #ff9a00;
            top: 70%;
            right: 10%;
            animation-delay: -5s;
            animation-duration: 30s;
        }

        .edu-float-3 {
            width: 160px;
            height: 160px;
            background: #1e3a8a;
            bottom: 10%;
            left: 15%;
            animation-delay: -10s;
            animation-duration: 35s;
        }

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

        /* Responsive Styles */
        @media (max-width: 1200px) {
            .university-slider-container {
                padding: 0 30px;
            }
            
            .edu-slider-prev {
                left: -5px;
            }
            
            .edu-slider-next {
                right: -5px;
            }
        }

        @media (max-width: 992px) {
            .university-title {
                font-size: 2.5rem;
            }
            
            .edu-university-card {
                height: 500px;
            }
        }

        @media (max-width: 768px) {
            #universitySection {
                padding: 80px 20px;
            }
            
            .university-title {
                font-size: 2.2rem;
            }
            
            .university-description {
                font-size: 1.1rem;
            }
            
            .university-slider-container {
                padding: 0 15px;
            }
            
            .edu-slider-nav {
                width: 40px;
                height: 40px;
                font-size: 1rem;
            }
            
            .edu-slider-prev {
                left: 0;
            }
            
            .edu-slider-next {
                right: 0;
            }
            
            .edu-university-card {
                height: 480px;
                margin: 10px;
            }
            
            .university-content {
                padding: 20px;
            }
        }

        @media (max-width: 576px) {
            .university-title {
                font-size: 1.8rem;
            }
            
            .university-subtitle {
                font-size: 0.8rem;
                padding: 6px 18px;
            }
            
            .edu-university-card {
                height: 500px;
            }
            
            .university-name {
                font-size: 1.4rem;
            }
            
            .edu-floating-element {
                display: none;
            }
        }

        /* Demo Info Section */
        .edu-demo-info {
            max-width: 1200px;
            margin: 60px auto;
            padding: 0 20px;
        }

        .edu-demo-info h3 {
            color: #1e3a8a;
            margin-bottom: 20px;
            font-size: 1.8rem;
        }

        .edu-demo-info p {
            color: #475569;
            margin-bottom: 20px;
            font-size: 1.1rem;
        }

        .edu-features-list {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 30px;
        }

        .edu-feature-item {
            flex: 1 1 250px;
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
        }

        .edu-feature-item h4 {
            color: #1e40af;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .edu-feature-item h4 i {
            color: #4facfe;
        }
    </style>
</head>
<body>
    <!-- Universities & Colleges Section -->
    <section id="universitySection">
        <!-- Floating Background Elements -->
        <div class="edu-floating-elements">
            <div class="edu-floating-element edu-float-1"></div>
            <div class="edu-floating-element edu-float-2"></div>
            <div class="edu-floating-element edu-float-3"></div>
        </div>
        
        <div class="university-container">
            <!-- Section Header -->
            <div class="university-header">
                <div class="university-subtitle">
                    <i class="fas fa-university"></i> Top Institutions
                </div>
                <h2 class="university-title">Featured <span>Universities & Colleges</span></h2>
                <p class="university-description">
                    Explore our network of prestigious universities and colleges offering world-class education, 
                    modern facilities, and excellent placement opportunities.
                </p>
            </div>
            
            <!-- Slider Container -->
            <div class="university-slider-container">
                <!-- Navigation Buttons -->
                <button class="edu-slider-nav edu-slider-prev">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button class="edu-slider-nav edu-slider-next">
                    <i class="fas fa-chevron-right"></i>
                </button>
                
                <!-- Slick Slider -->
                <div class="edu-university-slider" id="universitySlider">
                    <!-- Subharti University -->
                    <div class="edu-university-card">
                        <div class="university-image-container">
                            <div class="university-image" style="background-image: url('https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2064&q=80');"></div>
                            <div class="university-badge">NAAC A+</div>
                            <div class="university-rank">1</div>
                        </div>
                        <div class="university-content">
                            <h3 class="university-name">Subharti University</h3>
                            <div class="university-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>Meerut, Uttar Pradesh</span>
                            </div>
                            <p class="university-description-text">
                                A premier private university offering diverse programs in Medical, Engineering, Management, 
                                and Humanities with state-of-the-art infrastructure and industry collaborations.
                            </p>
                            <div class="university-features">
                                <span class="university-feature">
                                    <i class="fas fa-graduation-cap"></i> 200+ Programs
                                </span>
                                <span class="university-feature">
                                    <i class="fas fa-users"></i> 25,000+ Students
                                </span>
                                <span class="university-feature">
                                    <i class="fas fa-building"></i> 500 Acre Campus
                                </span>
                            </div>
                            <button class="university-button">
                                <i class="fas fa-info-circle"></i> View Details
                            </button>
                        </div>
                    </div>
                    
                    <!-- Hrit University -->
                    <div class="edu-university-card">
                        <div class="university-image-container">
                            <div class="university-image" style="background-image: url('https://images.unsplash.com/photo-1541339907198-e08756dedf3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
                            <div class="university-badge">UGC Approved</div>
                            <div class="university-rank">2</div>
                        </div>
                        <div class="university-content">
                            <h3 class="university-name">Hrit University</h3>
                            <div class="university-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>Haridwar, Uttarakhand</span>
                            </div>
                            <p class="university-description-text">
                                Focused on holistic education with emphasis on research and innovation. Offers specialized 
                                programs in Technology, Pharmacy, and Management with excellent placement records.
                            </p>
                            <div class="university-features">
                                <span class="university-feature">
                                    <i class="fas fa-flask"></i> Research Focus
                                </span>
                                <span class="university-feature">
                                    <i class="fas fa-handshake"></i> 300+ Recruiters
                                </span>
                                <span class="university-feature">
                                    <i class="fas fa-award"></i> Industry Partnerships
                                </span>
                            </div>
                            <button class="university-button">
                                <i class="fas fa-info-circle"></i> View Details
                            </button>
                        </div>
                    </div>
                    
                    <!-- Mind Power University -->
                    <div class="edu-university-card">
                        <div class="university-image-container">
                            <div class="university-image" style="background-image: 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');"></div>
                            <div class="university-badge">Innovation Hub</div>
                            <div class="university-rank">3</div>
                        </div>
                        <div class="university-content">
                            <h3 class="university-name">Mind Power University</h3>
                            <div class="university-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>Bengaluru, Karnataka</span>
                            </div>
                            <p class="university-description-text">
                                A modern university emphasizing creative thinking, entrepreneurship, and technology. 
                                Known for its innovative curriculum and startup incubation center.
                            </p>
                            <div class="university-features">
                                <span class="university-feature">
                                    <i class="fas fa-lightbulb"></i> Innovation Center
                                </span>
                                <span class="university-feature">
                                    <i class="fas fa-rocket"></i> Startup Incubation
                                </span>
                                <span class="university-feature">
                                    <i class="fas fa-laptop-code"></i> Tech Focus
                                </span>
                            </div>
                            <button class="university-button">
                                <i class="fas fa-info-circle"></i> View Details
                            </button>
                        </div>
                    </div>
                    
                    <!-- Mahaveer University -->
                    <div class="edu-university-card">
                        <div class="university-image-container">
                            <div class="university-image" style="background-image: url('https://images.unsplash.com/photo-1532094349884-543bc11b234d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
                            <div class="university-badge">NAAC A</div>
                            <div class="university-rank">4</div>
                        </div>
                        <div class="university-content">
                            <h3 class="university-name">Mahaveer University</h3>
                            <div class="university-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>Kota, Rajasthan</span>
                            </div>
                            <p class="university-description-text">
                                A comprehensive university with excellence in Engineering, Medicine, Law, and Management. 
                                Features advanced laboratories, library resources, and international collaborations.
                            </p>
                            <div class="university-features">
                                <span class="university-feature">
                                    <i class="fas fa-globe"></i> International Ties
                                </span>
                                <span class="university-feature">
                                    <i class="fas fa-book"></i> Advanced Library
                                </span>
                                <span class="university-feature">
                                    <i class="fas fa-microscope"></i> Modern Labs
                                </span>
                            </div>
                            <button class="university-button">
                                <i class="fas fa-info-circle"></i> View Details
                            </button>
                        </div>
                    </div>
                    
                    <!-- Delhi Technical College -->
                    <div class="edu-university-card">
                        <div class="university-image-container">
                            <div class="university-image" style="background-image: url('https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80');"></div>
                            <div class="university-badge">AICTE Approved</div>
                            <div class="university-rank">5</div>
                        </div>
                        <div class="university-content">
                            <h3 class="university-name">Delhi Technical College</h3>
                            <div class="university-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>New Delhi, Delhi</span>
                            </div>
                            <p class="university-description-text">
                                Premier engineering college with focus on practical learning and industry exposure. 
                                Excellent placement records with top technology companies and research organizations.
                            </p>
                            <div class="university-features">
                                <span class="university-feature">
                                    <i class="fas fa-industry"></i> Industry Ready
                                </span>
                                <span class="university-feature">
                                    <i class="fas fa-briefcase"></i> 95% Placements
                                </span>
                                <span class="university-feature">
                                    <i class="fas fa-wrench"></i> Practical Focus
                                </span>
                            </div>
                            <button class="university-button">
                                <i class="fas fa-info-circle"></i> View Details
                            </button>
                        </div>
                    </div>
                    
                    <!-- Mumbai Business College -->
                    <div class="edu-university-card">
                        <div class="university-image-container">
                            <div class="university-image" style="background-image: url('https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
                            <div class="university-badge">NBA Accredited</div>
                            <div class="university-rank">6</div>
                        </div>
                        <div class="university-content">
                            <h3 class="university-name">Mumbai Business College</h3>
                            <div class="university-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>Mumbai, Maharashtra</span>
                            </div>
                            <p class="university-description-text">
                                Top-ranked business school with global accreditation. Specializes in Management, 
                                Finance, and Marketing programs with strong corporate connections and alumni network.
                            </p>
                            <div class="university-features">
                                <span class="university-feature">
                                    <i class="fas fa-chart-line"></i> Management Focus
                                </span>
                                <span class="university-feature">
                                    <i class="fas fa-network-wired"></i> Strong Alumni
                                </span>
                                <span class="university-feature">
                                    <i class="fas fa-handshake"></i> Corporate Links
                                </span>
                            </div>
                            <button class="university-button">
                                <i class="fas fa-info-circle"></i> View Details
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- Slider Dots -->
                <div class="edu-slider-dots"></div>
            </div>
            
           
        </div>
    </section>
    
    

    <!-- jQuery and Slick Slider JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    
    <script>
        // Initialize Slick Slider
        $(document).ready(function(){
            $('#universitySlider').slick({
                slidesToShow: 3,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 4000,
                dots: true,
                appendDots: $('.edu-slider-dots'),
                dotsClass: 'slick-dots',
                arrows: true,
                prevArrow: $('.edu-slider-prev'),
                nextArrow: $('.edu-slider-next'),
                responsive: [
                    {
                        breakpoint: 1200,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 1
                        }
                    },
                    {
                        breakpoint: 768,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1,
                            arrows: false,
                            dots: true
                        }
                    }
                ]
            });
            
            // Button click events
            $('.university-button').on('click', function() {
                const uniName = $(this).closest('.edu-university-card').find('.university-name').text();
                alert(`More details about ${uniName} would be displayed here.`);
            });
            
            $('.edu-view-all-btn').on('click', function() {
                alert('All universities and colleges would be displayed in a separate page.');
            });
            
            // Randomize floating elements position on load
            const floatingElements = document.querySelectorAll('.edu-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() * 100 + 60;
                element.style.width = `${randomSize}px`;
                element.style.height = `${randomSize}px`;
                
                // Randomize animation duration
                const randomDuration = Math.random() * 20 + 25;
                element.style.animationDuration = `${randomDuration}s`;
            });
            
            // 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
            const animatedElements = document.querySelectorAll('.university-slider-container, .edu-view-all-container');
            animatedElements.forEach(element => {
                observer.observe(element);
            });
            
            // Add hover effect to slider navigation
            $('.edu-slider-nav').on('mouseenter', function() {
                $(this).css('transform', 'translateY(-50%) scale(1.1)');
            }).on('mouseleave', function() {
                if (!$(this).hasClass('slick-disabled')) {
                    $(this).css('transform', 'translateY(-50%) scale(1)');
                }
            });
            
            // Add active state to slider dots on hover
            $('.edu-slider-dots .slick-dots li').on('mouseenter', function() {
                $(this).find('button').css('transform', 'scale(1.3)');
            }).on('mouseleave', function() {
                if (!$(this).hasClass('slick-active')) {
                    $(this).find('button').css('transform', 'scale(1)');
                }
            });
        });
    </script>



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

        /* Why Choose Us Section */
        .why-choose-section {
            padding: 100px 20px;
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }

        /* Section Header */
        .section-header {
            text-align: center;
            margin-bottom: 80px;
            position: relative;
        }

        .section-subtitle {
            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);
            transform: translateY(20px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 0.2s forwards;
        }

        .section-title {
            font-size: 3rem;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 20px;
            color: #1e3a8a;
            transform: translateY(30px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 0.4s forwards;
        }

        .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.2rem;
            color: #64748b;
            max-width: 700px;
            margin: 0 auto;
            transform: translateY(30px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 0.6s forwards;
        }

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

        /* Stats Banner */
        .stats-banner {
            background: linear-gradient(135deg, #1e3a8a 0%, #4facfe 100%);
            border-radius: 20px;
            padding: 40px;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 30px;
            margin-bottom: 80px;
            box-shadow: 0 20px 50px rgba(30, 58, 138, 0.2);
            transform: translateY(40px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 0.8s forwards;
        }

        .stat-item {
            text-align: center;
            color: white;
            flex: 1;
            min-width: 200px;
        }

        .stat-number {
            display: block;
            font-size: 3.5rem;
            font-weight: 800;
            line-height: 1;
            margin-bottom: 10px;
            text-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .stat-label {
            font-size: 1.2rem;
            font-weight: 500;
            opacity: 0.9;
        }

        /* Features Grid */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 40px;
            margin-bottom: 60px;
        }

        .feature-card {
            background: white;
            border-radius: 20px;
            padding: 40px 30px;
            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;
            z-index: 1;
            transform: translateY(40px);
            opacity: 0;
        }

        .feature-card:nth-child(1) { animation: fadeUp 0.8s ease-out 1s forwards; }
        .feature-card:nth-child(2) { animation: fadeUp 0.8s ease-out 1.1s forwards; }
        .feature-card:nth-child(3) { animation: fadeUp 0.8s ease-out 1.2s forwards; }
        .feature-card:nth-child(4) { animation: fadeUp 0.8s ease-out 1.3s forwards; }
        .feature-card:nth-child(5) { animation: fadeUp 0.8s ease-out 1.4s forwards; }
        .feature-card:nth-child(6) { animation: fadeUp 0.8s ease-out 1.5s forwards; }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            z-index: 2;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .feature-card:hover::before {
            transform: scaleX(1);
        }

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

        .feature-icon {
            width: 80px;
            height: 80px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
            font-size: 2.2rem;
            color: white;
            background: linear-gradient(135deg, #1e3a8a 0%, #4facfe 100%);
            box-shadow: 0 10px 25px rgba(30, 58, 138, 0.2);
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .feature-card:hover .feature-icon {
            transform: rotate(15deg) scale(1.1);
            background: linear-gradient(135deg, #ff9a00 0%, #ff6a00 100%);
        }

        .feature-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1e3a8a;
            margin-bottom: 15px;
            line-height: 1.3;
        }

        .feature-description {
            color: #64748b;
            font-size: 1rem;
            line-height: 1.7;
            margin-bottom: 0;
        }

        /* Testimonial Section */
        .testimonial-section {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            border-radius: 30px;
            padding: 60px;
            margin-top: 80px;
            position: relative;
            overflow: hidden;
            transform: translateY(40px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 1.6s forwards;
        }

        .testimonial-section::before {
            content: '"';
            position: absolute;
            top: 20px;
            left: 40px;
            font-size: 12rem;
            color: rgba(30, 58, 138, 0.05);
            font-family: serif;
            line-height: 1;
            z-index: 1;
        }

        .testimonial-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        .testimonial-text {
            font-size: 1.4rem;
            font-weight: 500;
            color: #1e3a8a;
            line-height: 1.6;
            margin-bottom: 30px;
            font-style: italic;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }

        .author-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            border: 3px solid white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .author-info {
            text-align: left;
        }

        .author-name {
            font-weight: 700;
            color: #1e3a8a;
            font-size: 1.1rem;
        }

        .author-role {
            color: #64748b;
            font-size: 0.9rem;
        }

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

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

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

        .shape-2 {
            width: 100px;
            height: 100px;
            background: #ff9a00;
            top: 70%;
            left: 10%;
            animation-delay: -5s;
            animation-duration: 25s;
        }

        .shape-3 {
            width: 200px;
            height: 200px;
            background: #1e3a8a;
            bottom: 10%;
            right: 15%;
            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);
            }
        }

        /* CTA Section */
        .cta-section {
            text-align: center;
            margin-top: 80px;
            transform: translateY(40px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 1.8s forwards;
        }

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

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

        .cta-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 18px 45px;
            font-size: 1.2rem;
            font-weight: 600;
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            background: linear-gradient(135deg, #1e3a8a 0%, #4facfe 100%);
            color: white;
            border: none;
            cursor: pointer;
            gap: 12px;
            box-shadow: 0 15px 40px rgba(30, 58, 138, 0.2);
        }

        .cta-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 50px rgba(30, 58, 138, 0.3);
            background: linear-gradient(135deg, #ff9a00 0%, #ff6a00 100%);
        }

        /* Responsive Styles */
        @media (max-width: 1200px) {
            .features-grid {
                grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            }
        }

        @media (max-width: 992px) {
            .section-title {
                font-size: 2.5rem;
            }
            
            .features-grid {
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                gap: 30px;
            }
            
            .stat-number {
                font-size: 2.8rem;
            }
            
            .testimonial-section {
                padding: 40px;
            }
        }

        @media (max-width: 768px) {
            .why-choose-section {
                padding: 80px 20px;
            }
            
            .section-title {
                font-size: 2.2rem;
            }
            
            .section-description {
                font-size: 1.1rem;
            }
            
            .stats-banner {
                flex-direction: column;
                align-items: center;
                gap: 40px;
                padding: 30px;
            }
            
            .stat-item {
                min-width: 100%;
            }
            
            .features-grid {
                grid-template-columns: 1fr;
                max-width: 500px;
                margin-left: auto;
                margin-right: auto;
            }
            
            .testimonial-text {
                font-size: 1.2rem;
            }
            
            .cta-title {
                font-size: 1.8rem;
            }
            
            .cta-description {
                font-size: 1.1rem;
            }
        }

        @media (max-width: 576px) {
            .section-title {
                font-size: 1.8rem;
            }
            
            .section-subtitle {
                font-size: 0.8rem;
                padding: 6px 18px;
            }
            
            .feature-card {
                padding: 30px 20px;
            }
            
            .feature-icon {
                width: 70px;
                height: 70px;
                font-size: 1.8rem;
            }
            
            .feature-title {
                font-size: 1.3rem;
            }
            
            .testimonial-section {
                padding: 30px 20px;
            }
            
            .testimonial-text {
                font-size: 1.1rem;
            }
            
            .cta-button {
                padding: 15px 35px;
                font-size: 1.1rem;
                width: 100%;
                max-width: 300px;
            }
            
            .shape {
                display: none;
            }
        }

        /* Demo Info Section */
        .demo-info {
            max-width: 1200px;
            margin: 60px auto;
            padding: 0 20px;
        }

        .demo-info h3 {
            color: #1e3a8a;
            margin-bottom: 20px;
            font-size: 1.8rem;
        }

        .demo-info p {
            color: #475569;
            margin-bottom: 20px;
            font-size: 1.1rem;
        }
    </style>
</head>
<body>
    <!-- Why Choose Us Section -->
    <section class="why-choose-section">
        <!-- Floating Background Shapes -->
        <div class="floating-shapes">
            <div class="shape shape-1"></div>
            <div class="shape shape-2"></div>
            <div class="shape shape-3"></div>
        </div>
        
        <!-- Section Header -->
        <div class="section-header">
            <div class="section-subtitle">
                <i class="fas fa-star"></i> Our Advantages
            </div>
            <h2 class="section-title">Why Choose <span>Edunet</span>?</h2>
            <p class="section-description">
                Discover the unique advantages that make us the preferred choice for thousands of students
                seeking quality education and career advancement.
            </p>
        </div>
        
        
        
        <!-- Features Grid -->
        <div class="features-grid">
            <!-- Feature 1 -->
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-user-tie"></i>
                </div>
                <h3 class="feature-title">Expert Faculty Members</h3>
                <p class="feature-description">
                    Learn from industry experts and experienced academicians with real-world experience. 
                    Our faculty brings practical knowledge and theoretical expertise to the classroom.
                </p>
            </div>
            
            <!-- Feature 2 -->
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-chart-line"></i>
                </div>
                <h3 class="feature-title">Industry-Relevant Curriculum</h3>
                <p class="feature-description">
                    Our courses are regularly updated to match industry requirements. We collaborate with 
                    leading companies to ensure our curriculum prepares you for current job market demands.
                </p>
            </div>
            
            <!-- Feature 3 -->
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-handshake"></i>
                </div>
                <h3 class="feature-title">Strong Industry Partnerships</h3>
                <p class="feature-description">
                    We have partnerships with over 500+ companies for internships, placements, and 
                    industry projects. Our students get exclusive opportunities to work with top organizations.
                </p>
            </div>
            
            <!-- Feature 4 -->
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-laptop-house"></i>
                </div>
                <h3 class="feature-title">Flexible Learning Options</h3>
                <p class="feature-description">
                    Choose from online, hybrid, or on-campus learning modes. Our flexible schedules allow 
                    working professionals and students to balance education with other commitments.
                </p>
            </div>
            
            <!-- Feature 5 -->
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-graduation-cap"></i>
                </div>
                <h3 class="feature-title">Global Recognition</h3>
                <p class="feature-description">
                    Our degrees and certificates are recognized nationally and internationally. 
                    We have academic collaborations with universities across 20+ countries.
                </p>
            </div>
            
            <!-- Feature 6 -->
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-hands-helping"></i>
                </div>
                <h3 class="feature-title">Comprehensive Student Support</h3>
                <p class="feature-description">
                    From admission to placement, we provide complete support including career counseling, 
                    mentorship programs, and personalized academic guidance for every student.
                </p>
            </div>
        </div>
        
       
        
        
        
    </section>
    
    
    

    <script>
        // Animated Statistics Counter
        const statNumbers = document.querySelectorAll('.stat-number');
        const observerOptions = {
            threshold: 0.5,
            rootMargin: '0px 0px -50px 0px'
        };
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const statNumber = entry.target;
                    const originalText = statNumber.textContent;
                    const numericValue = parseInt(originalText.replace(/[^0-9]/g, ''));
                    const suffix = originalText.replace(/[0-9]/g, '');
                    
                    // Only animate if it contains a number
                    if (!isNaN(numericValue)) {
                        const duration = 2000;
                        const step = numericValue / (duration / 16); // 60fps
                        let currentValue = 0;
                        
                        const timer = setInterval(() => {
                            currentValue += step;
                            if (currentValue >= numericValue) {
                                currentValue = numericValue;
                                clearInterval(timer);
                            }
                            statNumber.textContent = Math.floor(currentValue) + suffix;
                        }, 16);
                        
                        observer.unobserve(statNumber);
                    }
                }
            });
        }, observerOptions);
        
        statNumbers.forEach(statNumber => {
            observer.observe(statNumber);
        });
        
        // Feature Card Hover Effects
        const featureCards = document.querySelectorAll('.feature-card');
        featureCards.forEach(card => {
            card.addEventListener('mouseenter', () => {
                // Add a subtle scale effect
                card.style.transform = 'translateY(-15px) scale(1.02)';
            });
            
            card.addEventListener('mouseleave', () => {
                // Reset to normal position
                card.style.transform = 'translateY(-15px)';
            });
        });
        
        // Animated CTA Button
        const ctaButton = document.querySelector('.cta-button');
        ctaButton.addEventListener('mouseenter', (e) => {
            const x = e.pageX - ctaButton.getBoundingClientRect().left;
            const y = e.pageY - ctaButton.getBoundingClientRect().top;
            
            ctaButton.style.setProperty('--x', x + 'px');
            ctaButton.style.setProperty('--y', y + 'px');
            
            // Add a subtle pulse animation
            ctaButton.style.animation = 'pulse 1s infinite';
        });
        
        ctaButton.addEventListener('mouseleave', () => {
            ctaButton.style.animation = '';
        });
        
        ctaButton.addEventListener('click', () => {
            alert('Thank you for your interest! You would be redirected to the enrollment page.');
        });
        
        // 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 + 80;
                shape.style.width = `${randomSize}px`;
                shape.style.height = `${randomSize}px`;
                
                // Randomize animation duration
                const randomDuration = Math.random() * 20 + 20;
                shape.style.animationDuration = `${randomDuration}s`;
            });
        });
        
        // Animate elements on scroll
        const scrollObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        });
        
        // Observe feature cards for scroll animations
        featureCards.forEach(card => {
            scrollObserver.observe(card);
        });
        
        // Add pulse animation for CTA
        const style = document.createElement('style');
        style.textContent = `
            @keyframes pulse {
                0% { transform: translateY(-5px) scale(1); }
                50% { transform: translateY(-5px) scale(1.05); }
                100% { transform: translateY(-5px) scale(1); }
            }
        `;
        document.head.appendChild(style);
    </script>


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

        /* Gallery Section */
        .gallery-section {
            padding: 100px 20px;
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
        }

        .section-header {
            text-align: center;
            margin-bottom: 70px;
            position: relative;
        }

        .section-subtitle {
            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);
            transform: translateY(20px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 0.2s forwards;
        }

        .section-title {
            font-size: 3rem;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 20px;
            color: #1e3a8a;
            transform: translateY(30px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 0.4s forwards;
        }

        .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.2rem;
            color: #64748b;
            max-width: 700px;
            margin: 0 auto;
            transform: translateY(30px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 0.6s forwards;
        }

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

        /* Gallery Filter */
        .gallery-filter {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 60px;
            transform: translateY(30px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 0.8s forwards;
        }

        .filter-btn {
            padding: 12px 28px;
            background: white;
            border: 2px solid #e2e8f0;
            border-radius: 50px;
            font-weight: 600;
            color: #64748b;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .filter-btn i {
            font-size: 1.1rem;
        }

        .filter-btn:hover, .filter-btn.active {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            border-color: transparent;
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(79, 172, 254, 0.3);
        }

        /* Gallery Grid */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 25px;
            margin-bottom: 60px;
        }

        .gallery-item {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
            transform: translateY(40px);
            opacity: 0;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            height: 300px;
        }

        .gallery-item:nth-child(1) { animation: fadeUp 0.8s ease-out 1s forwards; }
        .gallery-item:nth-child(2) { animation: fadeUp 0.8s ease-out 1.1s forwards; }
        .gallery-item:nth-child(3) { animation: fadeUp 0.8s ease-out 1.2s forwards; }
        .gallery-item:nth-child(4) { animation: fadeUp 0.8s ease-out 1.3s forwards; }
        .gallery-item:nth-child(5) { animation: fadeUp 0.8s ease-out 1.4s forwards; }
        .gallery-item:nth-child(6) { animation: fadeUp 0.8s ease-out 1.5s forwards; }
        .gallery-item:nth-child(7) { animation: fadeUp 0.8s ease-out 1.6s forwards; }
        .gallery-item:nth-child(8) { animation: fadeUp 0.8s ease-out 1.7s forwards; }
        .gallery-item:nth-child(9) { animation: fadeUp 0.8s ease-out 1.8s forwards; }

        .gallery-item:hover {
            transform: translateY(-15px) scale(1.03);
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
        }

        .gallery-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .gallery-item:hover .gallery-image {
            transform: scale(1.1);
        }

        /* Simplified Overlay - Only subtle color overlay on hover */
        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(30, 58, 138, 0.2) 0%, rgba(79, 172, 254, 0.15) 100%);
            opacity: 0;
            transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

        .gallery-category {
            position: absolute;
            top: 20px;
            right: 20px;
            background: white;
            color: #1e3a8a;
            padding: 6px 16px;
            border-radius: 30px;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            z-index: 2;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transform: translateY(-10px);
            opacity: 0;
            transition: all 0.4s ease 0.1s;
        }

        .gallery-item:hover .gallery-category {
            transform: translateY(0);
            opacity: 1;
        }

        /* Zoom icon on hover */
        .gallery-zoom {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            width: 60px;
            height: 60px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1e3a8a;
            font-size: 1.5rem;
            opacity: 0;
            transition: all 0.4s ease 0.2s;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

        .gallery-item:hover .gallery-zoom {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }

        /* View More Button */
        .view-more-container {
            text-align: center;
            transform: translateY(30px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 2s forwards;
        }

        .view-more-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 16px 40px;
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            background: linear-gradient(135deg, #1e3a8a 0%, #4facfe 100%);
            color: white;
            border: none;
            gap: 12px;
            box-shadow: 0 10px 30px rgba(30, 58, 138, 0.2);
            cursor: pointer;
        }

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

        /* Lightbox Modal */
        .lightbox-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .lightbox-modal.active {
            display: flex;
            opacity: 1;
            animation: fadeIn 0.3s ease-out forwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .lightbox-content {
            position: relative;
            max-width: 90%;
            max-height: 90%;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }

        .lightbox-modal.active .lightbox-content {
            transform: scale(1);
        }

        .lightbox-image {
            width: 100%;
            height: auto;
            display: block;
            max-height: 80vh;
            object-fit: contain;
        }

        .lightbox-info {
            background: white;
            padding: 20px;
        }

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

        .lightbox-category {
            display: inline-block;
            background: #f0f9ff;
            color: #1e40af;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 15px;
        }

        .lightbox-description {
            color: #475569;
            line-height: 1.6;
        }

        .lightbox-close {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(255, 255, 255, 0.9);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: #1e3a8a;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .lightbox-close:hover {
            background: white;
            transform: rotate(90deg);
        }

        .lightbox-nav {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            transform: translateY(-50%);
            z-index: 10;
        }

        .lightbox-prev, .lightbox-next {
            background: rgba(255, 255, 255, 0.9);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: #1e3a8a;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .lightbox-prev:hover, .lightbox-next:hover {
            background: white;
            transform: scale(1.1);
        }

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

        .shape {
            position: absolute;
            border-radius: 10px;
            opacity: 0.1;
            animation: float 20s infinite linear;
        }

        .shape-1 {
            width: 120px;
            height: 120px;
            background: #4facfe;
            top: 15%;
            left: 5%;
            animation-delay: 0s;
        }

        .shape-2 {
            width: 80px;
            height: 80px;
            background: #ff9a00;
            top: 70%;
            right: 10%;
            animation-delay: -5s;
            animation-duration: 25s;
        }

        .shape-3 {
            width: 160px;
            height: 160px;
            background: #1e3a8a;
            bottom: 15%;
            left: 10%;
            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);
            }
        }

        /* Responsive Styles */
        @media (max-width: 1200px) {
            .gallery-grid {
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            }
        }

        @media (max-width: 992px) {
            .section-title {
                font-size: 2.5rem;
            }
            
            .gallery-grid {
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                gap: 20px;
            }
        }

        @media (max-width: 768px) {
            .gallery-section {
                padding: 80px 20px;
            }
            
            .section-title {
                font-size: 2.2rem;
            }
            
            .section-description {
                font-size: 1.1rem;
            }
            
            .gallery-grid {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            }
            
            .gallery-filter {
                gap: 10px;
            }
            
            .filter-btn {
                padding: 10px 20px;
                font-size: 0.9rem;
            }
            
            .gallery-item {
                height: 250px;
            }
        }

        @media (max-width: 576px) {
            .section-title {
                font-size: 1.8rem;
            }
            
            .section-subtitle {
                font-size: 0.8rem;
                padding: 6px 18px;
            }
            
            .gallery-grid {
                grid-template-columns: 1fr;
                max-width: 400px;
                margin-left: auto;
                margin-right: auto;
            }
            
            .gallery-item {
                height: 280px;
            }
            
            .lightbox-content {
                max-width: 95%;
            }
            
            .shape {
                display: none;
            }
        }

        /* Demo Info Section */
        .demo-info {
            max-width: 1200px;
            margin: 60px auto;
            padding: 0 20px;
        }

        .demo-info h3 {
            color: #1e3a8a;
            margin-bottom: 20px;
            font-size: 1.8rem;
        }

        .demo-info p {
            color: #475569;
            margin-bottom: 20px;
            font-size: 1.1rem;
        }

        .features-list {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 30px;
        }

        .feature-item {
            flex: 1 1 250px;
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
        }

        .feature-item h4 {
            color: #1e40af;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .feature-item h4 i {
            color: #4facfe;
        }
    </style>
</head>
<body>
    <!-- Gallery Section -->
    <section class="gallery-section">
        <!-- Floating Background Elements -->
        <div class="floating-shapes">
            <div class="shape shape-1"></div>
            <div class="shape shape-2"></div>
            <div class="shape shape-3"></div>
        </div>
        
        <!-- Section Header -->
        <div class="section-header">
            <div class="section-subtitle">
                <i class="fas fa-images"></i> Our Campus Gallery
            </div>
            <h2 class="section-title">Explore <span>Edunet</span> Life</h2>
            <p class="section-description">
                Take a visual journey through our campus facilities, student life, events, and academic excellence. 
                Experience the vibrant community that makes Edunet special.
            </p>
        </div>
        
        <!-- Gallery Filter -->
        <div class="gallery-filter">
            <button class="filter-btn active" data-filter="all">
                <i class="fas fa-th"></i> All
            </button>
            <button class="filter-btn" data-filter="campus">
                <i class="fas fa-university"></i> Campus
            </button>
            <button class="filter-btn" data-filter="students">
                <i class="fas fa-user-graduate"></i> Students
            </button>
            <button class="filter-btn" data-filter="events">
                <i class="fas fa-calendar-alt"></i> Events
            </button>
            <button class="filter-btn" data-filter="facilities">
                <i class="fas fa-flask"></i> Facilities
            </button>
        </div>
        
        <!-- Gallery Grid -->
        <div class="gallery-grid">
            <!-- Campus Image 1 -->
            <div class="gallery-item" data-category="campus" data-index="1">
                <img src="assests/cl1.jpeg" alt="Main Campus Building" class="gallery-image">
                <div class="gallery-category">Campus</div>
                <div class="gallery-overlay"></div>
                <div class="gallery-zoom">
                    <i class="fas fa-search-plus"></i>
                </div>
            </div>
            
            <!-- Students Image -->
            <div class="gallery-item" data-category="students" data-index="2">
                <img src="assests/cl2.jpeg" alt="Students in Library" class="gallery-image">
                <div class="gallery-category">Students</div>
                <div class="gallery-overlay"></div>
                <div class="gallery-zoom">
                    <i class="fas fa-search-plus"></i>
                </div>
            </div>
            
            <!-- Events Image -->
            <div class="gallery-item" data-category="events" data-index="3">
                <img src="assests/cl3.jpeg" alt="Graduation Ceremony" class="gallery-image">
                <div class="gallery-category">Events</div>
                <div class="gallery-overlay"></div>
                <div class="gallery-zoom">
                    <i class="fas fa-search-plus"></i>
                </div>
            </div>
            
            <!-- Facilities Image -->
            <div class="gallery-item" data-category="facilities" data-index="4">
                <img src="assests/cl4.jpeg" alt="Science Laboratory" class="gallery-image">
                <div class="gallery-category">Facilities</div>
                <div class="gallery-overlay"></div>
                <div class="gallery-zoom">
                    <i class="fas fa-search-plus"></i>
                </div>
            </div>
            
            <!-- Campus Image 2 -->
            <div class="gallery-item" data-category="campus" data-index="5">
                <img src="assests/cl5.jpeg" alt="Campus Garden" class="gallery-image">
                <div class="gallery-category">Campus</div>
                <div class="gallery-overlay"></div>
                <div class="gallery-zoom">
                    <i class="fas fa-search-plus"></i>
                </div>
            </div>
            
            <!-- Students Image 2 -->
            <div class="gallery-item" data-category="students" data-index="6">
                <img src="assests/cl6.jpeg" alt="Student Discussion" class="gallery-image">
                <div class="gallery-category">Students</div>
                <div class="gallery-overlay"></div>
                <div class="gallery-zoom">
                    <i class="fas fa-search-plus"></i>
                </div>
            </div>
            
            <!-- Events Image 2 -->
            <div class="gallery-item" data-category="events" data-index="7">
                <img src="assests/cl7.jpeg" alt="Cultural Festival" class="gallery-image">
                <div class="gallery-category">Events</div>
                <div class="gallery-overlay"></div>
                <div class="gallery-zoom">
                    <i class="fas fa-search-plus"></i>
                </div>
            </div>
            
            <!-- Facilities Image 2 -->
            <div class="gallery-item" data-category="facilities" data-index="8">
                <img src="assests/cl8.jpeg" alt="Computer Lab" class="gallery-image">
                <div class="gallery-category">Facilities</div>
                <div class="gallery-overlay"></div>
                <div class="gallery-zoom">
                    <i class="fas fa-search-plus"></i>
                </div>
            </div>
            
            <!-- Campus Image 3 -->
            <div class="gallery-item" data-category="campus" data-index="9">
                <img src="assests/cl9.jpeg" alt="Sports Facilities" class="gallery-image">
                <div class="gallery-category">Campus</div>
                <div class="gallery-overlay"></div>
                <div class="gallery-zoom">
                    <i class="fas fa-search-plus"></i>
                </div>
            </div>
        </div>
        
        <!-- View More Button -->
        <!-- <div class="view-more-container">
            <button class="view-more-btn">
                <i class="fas fa-images"></i> View More Photos
            </button>
        </div> -->
        
        <!-- Lightbox Modal -->
        <div class="lightbox-modal" id="lightboxModal">
            <div class="lightbox-content">
                <div class="lightbox-close" id="lightboxClose">
                    <i class="fas fa-times"></i>
                </div>
                <div class="lightbox-nav">
                    <div class="lightbox-prev" id="lightboxPrev">
                        <i class="fas fa-chevron-left"></i>
                    </div>
                    <div class="lightbox-next" id="lightboxNext">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                <img id="lightboxImage" class="lightbox-image" src="" alt="">
                <div class="lightbox-info">
                    <div id="lightboxCategory" class="lightbox-category"></div>
                    <h3 id="lightboxTitle" class="lightbox-title"></h3>
                    <p id="lightboxDescription" class="lightbox-description"></p>
                </div>
            </div>
        </div>
    </section>
    
   

    <script>
        // Gallery Filter Functionality
        const filterButtons = document.querySelectorAll('.filter-btn');
        const galleryItems = document.querySelectorAll('.gallery-item');
        
        filterButtons.forEach(button => {
            button.addEventListener('click', () => {
                // Remove active class from all buttons
                filterButtons.forEach(btn => btn.classList.remove('active'));
                
                // Add active class to clicked button
                button.classList.add('active');
                
                const filterValue = button.getAttribute('data-filter');
                
                // Filter gallery items
                galleryItems.forEach(item => {
                    const itemCategory = item.getAttribute('data-category');
                    
                    if (filterValue === 'all' || filterValue === itemCategory) {
                        item.style.display = 'block';
                        setTimeout(() => {
                            item.style.opacity = '1';
                            item.style.transform = 'translateY(0)';
                        }, 10);
                    } else {
                        item.style.opacity = '0';
                        item.style.transform = 'translateY(20px)';
                        setTimeout(() => {
                            item.style.display = 'none';
                        }, 300);
                    }
                });
            });
        });
        
        // Lightbox Functionality
        const lightboxModal = document.getElementById('lightboxModal');
        const lightboxImage = document.getElementById('lightboxImage');
        const lightboxTitle = document.getElementById('lightboxTitle');
        const lightboxCategory = document.getElementById('lightboxCategory');
        const lightboxDescription = document.getElementById('lightboxDescription');
        const lightboxClose = document.getElementById('lightboxClose');
        const lightboxPrev = document.getElementById('lightboxPrev');
        const lightboxNext = document.getElementById('lightboxNext');
        
        let currentImageIndex = 0;
        const galleryImages = Array.from(galleryItems);
        
        // Image data for lightbox (titles and descriptions)
        const imageData = [
            {
                title: "Main Campus Building",
                category: "Campus",
                description: "Modern architecture with state-of-the-art facilities for an inspiring learning environment."
            },
            {
                title: "Study Sessions",
                category: "Students",
                description: "Students engaged in collaborative learning at our modern library facilities."
            },
            {
                title: "Graduation Day",
                category: "Events",
                description: "Celebrating the achievements of our graduating students in an annual ceremony."
            },
            {
                title: "Science Laboratory",
                category: "Facilities",
                description: "Advanced laboratories equipped with modern technology for practical learning."
            },
            {
                title: "Green Campus",
                category: "Campus",
                description: "Beautifully landscaped gardens providing a peaceful environment for study and relaxation."
            },
            {
                title: "Group Discussion",
                category: "Students",
                description: "Students engaging in academic discussions to enhance their learning experience."
            },
            {
                title: "Cultural Festival",
                category: "Events",
                description: "Annual cultural events showcasing the diverse talents of our student community."
            },
            {
                title: "Computer Laboratory",
                category: "Facilities",
                description: "High-tech computer labs with the latest software and hardware for technical education."
            },
            {
                title: "Sports Complex",
                category: "Campus",
                description: "Modern sports facilities for physical education and extracurricular activities."
            }
        ];
        
        // Open lightbox with specific image
        function openLightbox(index) {
            const item = galleryImages[index];
            const imgSrc = item.querySelector('.gallery-image').src;
            const data = imageData[index];
            
            lightboxImage.src = imgSrc;
            lightboxTitle.textContent = data.title;
            lightboxCategory.textContent = data.category;
            lightboxDescription.textContent = data.description;
            currentImageIndex = index;
            
            lightboxModal.classList.add('active');
            document.body.style.overflow = 'hidden';
        }
        
        // Close lightbox
        function closeLightbox() {
            lightboxModal.classList.remove('active');
            document.body.style.overflow = 'auto';
        }
        
        // Navigate to previous image
        function prevImage() {
            currentImageIndex = (currentImageIndex - 1 + galleryImages.length) % galleryImages.length;
            openLightbox(currentImageIndex);
        }
        
        // Navigate to next image
        function nextImage() {
            currentImageIndex = (currentImageIndex + 1) % galleryImages.length;
            openLightbox(currentImageIndex);
        }
        
        // Add click event to gallery items
        galleryItems.forEach((item, index) => {
            item.addEventListener('click', () => {
                openLightbox(index);
            });
        });
        
        // Add event listeners to lightbox controls
        lightboxClose.addEventListener('click', closeLightbox);
        lightboxPrev.addEventListener('click', prevImage);
        lightboxNext.addEventListener('click', nextImage);
        
        // Close lightbox when clicking outside the content
        lightboxModal.addEventListener('click', (e) => {
            if (e.target === lightboxModal) {
                closeLightbox();
            }
        });
        
        // Keyboard navigation for lightbox
        document.addEventListener('keydown', (e) => {
            if (lightboxModal.classList.contains('active')) {
                if (e.key === 'Escape') {
                    closeLightbox();
                } else if (e.key === 'ArrowLeft') {
                    prevImage();
                } else if (e.key === 'ArrowRight') {
                    nextImage();
                }
            }
        });
        
        // View More Button
        const viewMoreBtn = document.querySelector('.view-more-btn');
        viewMoreBtn.addEventListener('click', () => {
            alert('More gallery images would be loaded here. This is a demo.');
        });
        
        // 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 gallery items for scroll animations
        galleryItems.forEach(item => {
            observer.observe(item);
        });
        
        // 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 + 60;
                shape.style.width = `${randomSize}px`;
                shape.style.height = `${randomSize}px`;
                
                // Randomize animation duration
                const randomDuration = Math.random() * 20 + 20;
                shape.style.animationDuration = `${randomDuration}s`;
            });
        });
    </script>


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

        /* Testimonials Section */
        .testimonials-section {
            padding: 100px 20px;
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            border-radius: 30px;
            margin-top: 60px;
            margin-bottom: 60px;
            overflow: hidden;
        }

        /* Section Header */
        .section-header {
            text-align: center;
            margin-bottom: 70px;
            position: relative;
        }

        .section-subtitle {
            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: 3rem;
            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.2rem;
            color: #64748b;
            max-width: 700px;
            margin: 0 auto;
        }

        /* Testimonial Slider Container */
        .testimonial-slider-container {
            position: relative;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Testimonial Cards - Equal Height Configuration */
        .testimonial-slider {
            position: relative;
            z-index: 2;
        }

        .testimonial-card {
            background: white;
            border-radius: 20px;
            padding: 40px;
            margin: 15px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            height: 520px; /* Fixed height for all cards */
            display: flex !important; /* Slick slider requirement */
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        /* Card hover effect */
        .testimonial-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
        }

        /* Quote icon */
        .quote-icon {
            font-size: 2.5rem;
            color: #4facfe;
            opacity: 0.2;
            margin-bottom: 25px;
            line-height: 1;
        }

        /* Testimonial text */
        .testimonial-text {
            color: #475569;
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 30px;
            flex-grow: 1; /* Ensures text area expands to fill space */
            overflow-y: auto; /* Handles overflow if text is too long */
            padding-right: 10px;
        }

        .testimonial-text::-webkit-scrollbar {
            width: 5px;
        }

        .testimonial-text::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 10px;
        }

        .testimonial-text::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }

        /* Student info */
        .student-info {
            display: flex;
            align-items: center;
            margin-top: 30px;
            padding-top: 25px;
            border-top: 1px solid #f1f5f9;
        }

        .student-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 20px;
            border: 4px solid #f0f9ff;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        .student-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .student-details {
            flex: 1;
        }

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

        .student-course {
            font-size: 0.95rem;
            color: #64748b;
            margin-bottom: 10px;
            font-weight: 500;
        }

        /* Star ratings */
        .star-rating {
            color: #ff9a00;
            font-size: 1rem;
            letter-spacing: 2px;
        }

        .star-rating i {
            margin-right: 3px;
        }

        /* Slick Slider Custom Styling */
        .slick-prev, .slick-next {
            width: 60px;
            height: 60px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            z-index: 3;
            transition: all 0.4s ease;
        }

        .slick-prev:hover, .slick-next:hover {
            background: linear-gradient(135deg, #1e3a8a 0%, #4facfe 100%);
            transform: scale(1.1);
        }

        .slick-prev:before, .slick-next:before {
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            color: #1e3a8a;
            font-size: 1.5rem;
            opacity: 1;
            transition: all 0.3s ease;
        }

        .slick-prev:hover:before, .slick-next:hover:before {
            color: white;
        }

        .slick-prev {
            left: -80px;
        }

        .slick-prev:before {
            content: "\f104";
        }

        .slick-next {
            right: -80px;
        }

        .slick-next:before {
            content: "\f105";
        }

        /* Slick dots customization */
        .slick-dots {
            bottom: -60px;
        }

        .slick-dots li button:before {
            font-size: 12px;
            color: #cbd5e1;
            opacity: 1;
        }

        .slick-dots li.slick-active button:before {
            color: #4facfe;
        }

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

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

        .shape-1 {
            width: 120px;
            height: 120px;
            background: #4facfe;
            top: 10%;
            left: 5%;
            animation-delay: 0s;
        }

        .shape-2 {
            width: 80px;
            height: 80px;
            background: #ff9a00;
            top: 70%;
            right: 10%;
            animation-delay: -5s;
            animation-duration: 25s;
        }

        .shape-3 {
            width: 160px;
            height: 160px;
            background: #1e3a8a;
            bottom: 10%;
            left: 10%;
            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);
            }
        }

        /* Responsive Styles */
        @media (max-width: 1200px) {
            .slick-prev {
                left: -30px;
            }
            .slick-next {
                right: -30px;
            }
        }

        @media (max-width: 992px) {
            .section-title {
                font-size: 2.5rem;
            }
            
            .testimonial-card {
                height: 550px; /* Slightly taller for tablet */
            }
        }

        @media (max-width: 768px) {
            .testimonials-section {
                padding: 80px 20px;
                border-radius: 20px;
                margin-top: 40px;
                margin-bottom: 40px;
            }
            
            .section-title {
                font-size: 2.2rem;
            }
            
            .section-description {
                font-size: 1.1rem;
            }
            
            .testimonial-card {
                padding: 30px;
                height: 580px; /* Taller for mobile to accommodate text */
                margin: 10px;
            }
            
            .slick-prev, .slick-next {
                width: 50px;
                height: 50px;
            }
            
            .slick-prev {
                left: -10px;
            }
            
            .slick-next {
                right: -10px;
            }
            
            .shape {
                display: none;
            }
        }

        @media (max-width: 576px) {
            .section-title {
                font-size: 1.8rem;
            }
            
            .section-subtitle {
                font-size: 0.8rem;
                padding: 6px 18px;
            }
            
            .testimonial-card {
                padding: 25px;
                height: 600px;
            }
            
            .student-info {
                flex-direction: column;
                text-align: center;
            }
            
            .student-avatar {
                margin-right: 0;
                margin-bottom: 15px;
            }
            
            .slick-prev, .slick-next {
                display: none !important;
            }
        }

        /* Demo Info Section */
        .demo-info {
            max-width: 1200px;
            margin: 60px auto;
            padding: 0 20px;
        }

        .demo-info h3 {
            color: #1e3a8a;
            margin-bottom: 20px;
            font-size: 1.8rem;
        }

        .demo-info p {
            color: #475569;
            margin-bottom: 20px;
            font-size: 1.1rem;
        }

        .features-list {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 30px;
        }

        .feature-item {
            flex: 1 1 250px;
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
        }

        .feature-item h4 {
            color: #1e40af;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .feature-item h4 i {
            color: #4facfe;
        }
    </style>
</head>
<body>
    <!-- Testimonials Section -->
    <section class="testimonials-section">
        <!-- Floating Background Shapes -->
        <div class="floating-shapes">
            <div class="shape shape-1"></div>
            <div class="shape shape-2"></div>
            <div class="shape shape-3"></div>
        </div>
        
        <!-- Section Header -->
        <div class="section-header">
            <div class="section-subtitle">
                <i class="fas fa-comment-dots"></i> Student Voices
            </div>
            <h2 class="section-title">What Our <span>Students Say</span></h2>
            <p class="section-description">
                Hear from our successful students who have transformed their careers with Edunet programs. 
                Their stories inspire us every day.
            </p>
        </div>
        
        <!-- Testimonial Slider -->
        <div class="testimonial-slider-container">
            <div class="testimonial-slider">
                <!-- Testimonial 1 -->
                <div class="testimonial-card">
                    <div class="quote-icon">
                        <i class="fas fa-quote-left"></i>
                    </div>
                    <div class="testimonial-text">
                        "Edunet's B.Ed program completely transformed my approach to teaching. The curriculum was perfectly balanced between theory and practical classroom techniques. My favorite part was the internship module where I got to implement modern teaching methodologies in a real classroom setting. The faculty support was exceptional throughout."
                    </div>
                    <div class="student-info">
                        <div class="student-avatar">
                            <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Priya Sharma">
                        </div>
                        <div class="student-details">
                            <h3 class="student-name">Priya Sharma</h3>
                            <p class="student-course">B.Ed, Class of 2023</p>
                            <div class="star-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Testimonial 2 -->
                <div class="testimonial-card">
                    <div class="quote-icon">
                        <i class="fas fa-quote-left"></i>
                    </div>
                    <div class="testimonial-text">
                        "The MBA program at Edunet provided me with not just theoretical knowledge but practical business insights. The case study approach helped me understand real-world business challenges. I particularly appreciated the networking opportunities with industry leaders. Within three months of completing the course, I received a promotion at my workplace."
                    </div>
                    <div class="student-info">
                        <div class="student-avatar">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Rajesh Kumar">
                        </div>
                        <div class="student-details">
                            <h3 class="student-name">Rajesh Kumar</h3>
                            <p class="student-course">MBA, Marketing Specialization</p>
                            <div class="star-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Testimonial 3 -->
                <div class="testimonial-card">
                    <div class="quote-icon">
                        <i class="fas fa-quote-left"></i>
                    </div>
                    <div class="testimonial-text">
                        "As a working professional, the flexible schedule of the LLM program was perfect for me. The online resources were comprehensive, and the faculty was always available for doubt resolution. The specialization in Corporate Law has directly helped me in my current role as a legal consultant. I highly recommend Edunet for anyone seeking quality legal education."
                    </div>
                    <div class="student-info">
                        <div class="student-avatar">
                            <img src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2067&q=80" alt="Anjali Mehta">
                        </div>
                        <div class="student-details">
                            <h3 class="student-name">Anjali Mehta</h3>
                            <p class="student-course">LLM, Corporate Law</p>
                            <div class="star-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Testimonial 4 -->
                <div class="testimonial-card">
                    <div class="quote-icon">
                        <i class="fas fa-quote-left"></i>
                    </div>
                    <div class="testimonial-text">
                        "The B.Tech Computer Science program had an excellent balance of fundamental concepts and cutting-edge technologies. The hands-on projects and hackathons organized by the institute gave me practical experience that was invaluable during campus placements. I secured a position at a leading tech company even before graduation."
                    </div>
                    <div class="student-info">
                        <div class="student-avatar">
                            <img src="https://images.unsplash.com/photo-1507591064344-4c6ce005-128?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Amit Patel">
                        </div>
                        <div class="student-details">
                            <h3 class="student-name">Amit Patel</h3>
                            <p class="student-course">B.Tech Computer Science</p>
                            <div class="star-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Testimonial 5 -->
                <div class="testimonial-card">
                    <div class="quote-icon">
                        <i class="fas fa-quote-left"></i>
                    </div>
                    <div class="testimonial-text">
                        "The M.Ed program deepened my understanding of educational psychology and curriculum development. The research component was particularly rewarding, allowing me to contribute to the field of special education. The faculty members were not just teachers but mentors who guided me throughout my research project. This program has prepared me for leadership roles in education."
                    </div>
                    <div class="student-info">
                        <div class="student-avatar">
                            <img src="https://images.unsplash.com/photo-1582750433449-648ed127bb54?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Dr. Sanjay Verma">
                        </div>
                        <div class="student-details">
                            <h3 class="student-name">Dr. Sanjay Verma</h3>
                            <p class="student-course">M.Ed, Educational Leadership</p>
                            <div class="star-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Testimonial 6 -->
                <div class="testimonial-card">
                    <div class="quote-icon">
                        <i class="fas fa-quote-left"></i>
                    </div>
                    <div class="testimonial-text">
                        "The BBA program provided a solid foundation in business principles. What stood out was the emphasis on entrepreneurship - we actually developed business plans and presented them to real investors. The internship placement assistance was excellent, and I gained valuable experience at a multinational corporation. This program definitely accelerated my career growth."
                    </div>
                    <div class="student-info">
                        <div class="student-avatar">
                            <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Neha Gupta">
                        </div>
                        <div class="student-details">
                            <h3 class="student-name">Neha Gupta</h3>
                            <p class="student-course">BBA, Entrepreneurship</p>
                            <div class="star-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    

    <!-- JavaScript Libraries -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    
    <script>
        // Initialize Slick Slider
        $(document).ready(function(){
            $('.testimonial-slider').slick({
                dots: true,
                infinite: true,
                speed: 800,
                autoplay: true,
                autoplaySpeed: 5000,
                slidesToShow: 3,
                slidesToScroll: 1,
                adaptiveHeight: false, // This ensures all slides have the same height
                centerMode: false,
                arrows: true,
                responsive: [
                    {
                        breakpoint: 1200,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 1
                        }
                    },
                    {
                        breakpoint: 768,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1,
                            arrows: false
                        }
                    }
                ]
            });
            
            // Card hover enhancement
            $('.testimonial-card').hover(
                function() {
                    $(this).css('transform', 'translateY(-15px)');
                },
                function() {
                    $(this).css('transform', 'translateY(0)');
                }
            );
            
            // 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 + 60;
                    shape.style.width = `${randomSize}px`;
                    shape.style.height = `${randomSize}px`;
                    
                    // Randomize animation duration
                    const randomDuration = Math.random() * 20 + 20;
                    shape.style.animationDuration = `${randomDuration}s`;
                });
            });
        });
    </script>



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

        /* Blogs Section */
        .blogs-section {
            padding: 100px 20px;
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
        }

        .section-header {
            text-align: center;
            margin-bottom: 70px;
            position: relative;
        }

        .section-subtitle {
            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);
            transform: translateY(20px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 0.2s forwards;
        }

        .section-title {
            font-size: 3rem;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 20px;
            color: #1e3a8a;
            transform: translateY(30px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 0.4s forwards;
        }

        .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.2rem;
            color: #64748b;
            max-width: 700px;
            margin: 0 auto;
            transform: translateY(30px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 0.6s forwards;
        }

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

        /* Blogs Grid */
        .blogs-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 40px;
            margin-bottom: 70px;
        }

        .blog-card {
            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);
            position: relative;
            transform: translateY(40px);
            opacity: 0;
        }

        .blog-card:nth-child(1) { animation: fadeUp 0.8s ease-out 0.8s forwards; }
        .blog-card:nth-child(2) { animation: fadeUp 0.8s ease-out 1s forwards; }
        .blog-card:nth-child(3) { animation: fadeUp 0.8s ease-out 1.2s forwards; }

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

        .blog-image {
            height: 220px;
            width: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            overflow: hidden;
        }

        .blog-image::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;
        }

        .blog-card:hover .blog-image::after {
            opacity: 1;
        }

        .blog-category {
            position: absolute;
            top: 20px;
            right: 20px;
            background: white;
            color: #1e3a8a;
            padding: 6px 16px;
            border-radius: 30px;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            z-index: 2;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .blog-card:hover .blog-category {
            background: linear-gradient(135deg, #1e3a8a 0%, #4facfe 100%);
            color: white;
            transform: scale(1.05);
        }

        /* Blog Content */
        .blog-content {
            padding: 30px;
        }

        .blog-meta {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 20px;
            color: #64748b;
            font-size: 0.9rem;
        }

        .blog-meta-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .blog-meta-item i {
            color: #4facfe;
        }

        .blog-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1e3a8a;
            margin-bottom: 15px;
            line-height: 1.3;
            transition: color 0.3s ease;
        }

        .blog-card:hover .blog-title {
            color: #4facfe;
        }

        .blog-excerpt {
            color: #64748b;
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 25px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .blog-author {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-top: 25px;
            padding-top: 25px;
            border-top: 1px solid #f1f5f9;
        }

        .author-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            border: 3px solid #e2e8f0;
            transition: all 0.3s ease;
        }

        .blog-card:hover .author-avatar {
            border-color: #4facfe;
            transform: scale(1.05);
        }

        .author-info h4 {
            font-weight: 600;
            color: #475569;
            font-size: 1rem;
            margin-bottom: 5px;
        }

        .author-info p {
            color: #94a3b8;
            font-size: 0.85rem;
        }

        .blog-read-more {
            position: absolute;
            bottom: 30px;
            right: 30px;
            background: linear-gradient(135deg, #1e3a8a 0%, #4facfe 100%);
            color: white;
            padding: 8px 20px;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 8px 20px rgba(30, 58, 138, 0.2);
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateX(20px);
        }

        .blog-card:hover .blog-read-more {
            opacity: 1;
            transform: translateX(0);
        }

        .blog-read-more:hover {
            transform: translateX(5px);
            box-shadow: 0 12px 25px rgba(30, 58, 138, 0.3);
        }

        /* Featured Blog */
        .featured-blog {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            margin-bottom: 80px;
            background: white;
            border-radius: 25px;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
            transform: translateY(40px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 1.4s forwards;
        }

        .featured-blog-image {
            height: 100%;
            min-height: 400px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
        }

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

        .featured-blog:hover .featured-blog-image::after {
            opacity: 0.3;
        }

        .featured-badge {
            position: absolute;
            top: 30px;
            left: 30px;
            background: linear-gradient(135deg, #ff9a00 0%, #ff6a00 100%);
            color: white;
            padding: 10px 24px;
            border-radius: 30px;
            font-size: 0.9rem;
            font-weight: 700;
            letter-spacing: 1px;
            z-index: 2;
            box-shadow: 0 8px 20px rgba(255, 106, 0, 0.3);
        }

        .featured-content {
            padding: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .featured-meta {
            display: flex;
            align-items: center;
            gap: 25px;
            margin-bottom: 20px;
            color: #64748b;
            font-size: 0.95rem;
        }

        .featured-title {
            font-size: 2.2rem;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 25px;
            color: #1e3a8a;
            transition: color 0.3s ease;
        }

        .featured-blog:hover .featured-title {
            color: #4facfe;
        }

        .featured-excerpt {
            color: #64748b;
            font-size: 1.1rem;
            line-height: 1.7;
            margin-bottom: 35px;
        }

        .featured-read-more {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #1e3a8a 0%, #4facfe 100%);
            color: white;
            padding: 14px 32px;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            font-size: 1rem;
            gap: 12px;
            box-shadow: 0 10px 25px rgba(30, 58, 138, 0.2);
            transition: all 0.3s ease;
            align-self: flex-start;
        }

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

        /* View All Button */
        .view-all-container {
            text-align: center;
            transform: translateY(30px);
            opacity: 0;
            animation: fadeUp 0.8s ease-out 1.6s forwards;
        }

        .view-all-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 16px 40px;
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            background: white;
            color: #1e3a8a;
            border: 2px solid #e2e8f0;
            gap: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        .view-all-btn:hover {
            background: linear-gradient(135deg, #1e3a8a 0%, #4facfe 100%);
            color: white;
            border-color: transparent;
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(30, 58, 138, 0.2);
        }

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

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

        .shape-1 {
            width: 100px;
            height: 100px;
            background: #4facfe;
            top: 15%;
            left: 8%;
            animation-delay: 0s;
        }

        .shape-2 {
            width: 70px;
            height: 70px;
            background: #ff9a00;
            top: 75%;
            right: 12%;
            animation-delay: -8s;
            animation-duration: 30s;
        }

        .shape-3 {
            width: 130px;
            height: 130px;
            background: #1e3a8a;
            bottom: 15%;
            left: 12%;
            animation-delay: -15s;
            animation-duration: 35s;
        }

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

        /* Responsive Styles */
        @media (max-width: 1200px) {
            .blogs-grid {
                grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
                gap: 30px;
            }
            
            .featured-blog {
                gap: 40px;
            }
        }

        @media (max-width: 992px) {
            .section-title {
                font-size: 2.5rem;
            }
            
            .featured-blog {
                grid-template-columns: 1fr;
            }
            
            .featured-blog-image {
                min-height: 300px;
            }
            
            .featured-content {
                padding: 40px;
            }
            
            .featured-title {
                font-size: 1.8rem;
            }
        }

        @media (max-width: 768px) {
            .blogs-section {
                padding: 80px 20px;
            }
            
            .section-title {
                font-size: 2.2rem;
            }
            
            .section-description {
                font-size: 1.1rem;
            }
            
            .blogs-grid {
                grid-template-columns: 1fr;
                max-width: 500px;
                margin-left: auto;
                margin-right: auto;
            }
            
            .featured-content {
                padding: 30px;
            }
            
            .featured-title {
                font-size: 1.6rem;
            }
            
            .featured-excerpt {
                font-size: 1rem;
            }
        }

        @media (max-width: 576px) {
            .section-title {
                font-size: 1.8rem;
            }
            
            .section-subtitle {
                font-size: 0.8rem;
                padding: 6px 18px;
            }
            
            .blog-content {
                padding: 25px;
            }
            
            .blog-title {
                font-size: 1.3rem;
            }
            
            .featured-badge {
                top: 20px;
                left: 20px;
                padding: 8px 18px;
            }
            
            .shape {
                display: none;
            }
        }

        /* Demo Info Section */
        .demo-info {
            max-width: 1200px;
            margin: 60px auto;
            padding: 0 20px;
        }

        .demo-info h3 {
            color: #1e3a8a;
            margin-bottom: 20px;
            font-size: 1.8rem;
        }

        .demo-info p {
            color: #475569;
            margin-bottom: 20px;
            font-size: 1.1rem;
        }

        .features-list {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 30px;
        }

        .feature-item {
            flex: 1 1 250px;
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
        }

        .feature-item h4 {
            color: #1e40af;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .feature-item h4 i {
            color: #4facfe;
        }
    </style>
</head>
<body>
    <!-- Blogs Section -->
    <section class="blogs-section">
        <!-- Floating Background Elements -->
        <div class="floating-shapes">
            <div class="shape shape-1"></div>
            <div class="shape shape-2"></div>
            <div class="shape shape-3"></div>
        </div>
        
        <!-- Section Header -->
        <div class="section-header">
            <div class="section-subtitle">
                <i class="fas fa-newspaper"></i> Latest Insights
            </div>
            <h2 class="section-title">Our Educational <span>Blogs</span></h2>
            <p class="section-description">
                Stay updated with the latest trends, research, and insights in education. 
                Explore articles written by our experts and industry leaders.
            </p>
        </div>
        
        <!-- Featured Blog -->
        <div class="featured-blog">
            <div class="featured-blog-image" style="background-image: url('https://images.unsplash.com/photo-1546410531-bb4caa6b424d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2073&q=80');">
                <div class="featured-badge">
                    <i class="fas fa-star"></i> Featured Article
                </div>
            </div>
            <div class="featured-content">
                <div class="featured-meta">
                    <div class="blog-meta-item">
                        <i class="far fa-calendar"></i> May 15, 2023
                    </div>
                    <div class="blog-meta-item">
                        <i class="far fa-clock"></i> 8 min read
                    </div>
                    <div class="blog-meta-item">
                        <i class="fas fa-eye"></i> 2.5k views
                    </div>
                </div>
                <h3 class="featured-title">The Future of Online Education: Trends to Watch in 2023</h3>
                <p class="featured-excerpt">
                    Discover how artificial intelligence, virtual reality, and personalized learning are transforming 
                    the online education landscape. Learn what educators and institutions need to prepare for in the 
                    coming years to stay ahead of the curve.
                </p>
                <a href="#" class="featured-read-more">
                    <i class="fas fa-book-open"></i> Read Full Article
                </a>
            </div>
        </div>
        
        <!-- Blogs Grid -->
        <div class="blogs-grid">
            <!-- Blog 1 -->
            <div class="blog-card">
                <div class="blog-image" style="background-image: url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fEVkdWNhdGlvbnxlbnwwfHwwfHx8MA%3D%3D');">
                    <div class="blog-category">Teaching Strategies</div>
                </div>
                <div class="blog-content">
                    <div class="blog-meta">
                        <div class="blog-meta-item">
                            <i class="far fa-calendar"></i> Apr 28, 2023
                        </div>
                        <div class="blog-meta-item">
                            <i class="far fa-clock"></i> 6 min read
                        </div>
                    </div>
                    <h3 class="blog-title">Effective Classroom Management Techniques for New Teachers</h3>
                    <p class="blog-excerpt">
                        Proven strategies to create a positive learning environment, establish rules and routines, 
                        and manage student behavior effectively in today's diverse classrooms.
                    </p>
                    <div class="blog-author">
                        <div class="author-avatar" 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="author-info">
                            <h4>Dr. Anjali Sharma</h4>
                            <p>Education Specialist</p>
                        </div>
                    </div>
                </div>
                <a href="#" class="blog-read-more">
                    <i class="fas fa-arrow-right"></i> Read
                </a>
            </div>
            
            <!-- Blog 2 -->
            <div class="blog-card">
                <div class="blog-image" style="background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');">
                    <div class="blog-category">Technology</div>
                </div>
                <div class="blog-content">
                    <div class="blog-meta">
                        <div class="blog-meta-item">
                            <i class="far fa-calendar"></i> May 5, 2023
                        </div>
                        <div class="blog-meta-item">
                            <i class="far fa-clock"></i> 7 min read
                        </div>
                    </div>
                    <h3 class="blog-title">AI in Education: How Machine Learning is Personalizing Learning</h3>
                    <p class="blog-excerpt">
                        Explore how artificial intelligence is revolutionizing education by providing personalized 
                        learning paths, automated assessments, and intelligent tutoring systems for students.
                    </p>
                    <div class="blog-author">
                        <div class="author-avatar" style="background-image: url('https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2067&q=80');"></div>
                        <div class="author-info">
                            <h4>Prof. Ankit Verma</h4>
                            <p>AI Researcher</p>
                        </div>
                    </div>
                </div>
                <a href="#" class="blog-read-more">
                    <i class="fas fa-arrow-right"></i> Read
                </a>
            </div>
            
            <!-- Blog 3 -->
            <div class="blog-card">
                <div class="blog-image" style="background-image: url('https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');">
                    <div class="blog-category">Career Guidance</div>
                </div>
                <div class="blog-content">
                    <div class="blog-meta">
                        <div class="blog-meta-item">
                            <i class="far fa-calendar"></i> May 10, 2023
                        </div>
                        <div class="blog-meta-item">
                            <i class="far fa-clock"></i> 5 min read
                        </div>
                    </div>
                    <h3 class="blog-title">Top 10 Emerging Careers in Education for 2023-2024</h3>
                    <p class="blog-excerpt">
                        Discover the most promising career paths in the education sector, including educational 
                        technology specialists, learning experience designers, and curriculum developers.
                    </p>
                    <div class="blog-author">
                        <div class="author-avatar" style="background-image: url('https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
                        <div class="author-info">
                            <h4>Prof. Neha Gupta</h4>
                            <p>Career Counselor</p>
                        </div>
                    </div>
                </div>
                <a href="#" class="blog-read-more">
                    <i class="fas fa-arrow-right"></i> Read
                </a>
            </div>
        </div>
        
        <!-- View All Button -->
        <!-- <div class="view-all-container">
            <a href="#" class="view-all-btn">
                <i class="fas fa-newspaper"></i> View All Blogs
            </a>
        </div> -->
    </section>
    
    

    <script>
        // Blog card hover effects
        const blogCards = document.querySelectorAll('.blog-card');
        const blogReadMoreLinks = document.querySelectorAll('.blog-read-more');
        
        blogCards.forEach(card => {
            card.addEventListener('mouseenter', () => {
                const readMoreLink = card.querySelector('.blog-read-more');
                if (readMoreLink) {
                    readMoreLink.style.opacity = '1';
                    readMoreLink.style.transform = 'translateX(0)';
                }
            });
            
            card.addEventListener('mouseleave', () => {
                const readMoreLink = card.querySelector('.blog-read-more');
                if (readMoreLink) {
                    readMoreLink.style.opacity = '0';
                    readMoreLink.style.transform = 'translateX(20px)';
                }
            });
        });
        
        // Blog read more button click
        blogReadMoreLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const blogTitle = this.closest('.blog-card').querySelector('.blog-title').textContent;
                alert(`"${blogTitle}" blog article would open in a new page.`);
            });
        });
        
        // Featured read more button
        const featuredReadMore = document.querySelector('.featured-read-more');
        featuredReadMore.addEventListener('click', function(e) {
            e.preventDefault();
            const featuredTitle = document.querySelector('.featured-title').textContent;
            alert(`"${featuredTitle}" featured article would open in a new page.`);
        });
        
        // View all button
        const viewAllBtn = document.querySelector('.view-all-btn');
        viewAllBtn.addEventListener('click', function(e) {
            e.preventDefault();
            alert('All blog articles would be displayed in a separate page.');
        });
        
        // 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 blog cards for scroll animations
        blogCards.forEach(card => {
            observer.observe(card);
        });
        
        // Observe featured blog
        const featuredBlog = document.querySelector('.featured-blog');
        observer.observe(featuredBlog);
        
        // 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() * 80 + 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`;
            });
        });
    </script>


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


?>