<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Inozix Portfolio - Our projects and success stories across various industries">
    <title>Portfolio - Inozix</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Orbitron:wght@400;500;700&display=swap" rel="stylesheet">
    
    <!-- AOS Animation Library -->
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    
    <!-- Isotope (for filtering) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/styles.css">
    
    <!-- JavaScript Libraries -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
</head>
<body>
    <!-- Preloader -->
    <div class="loader-wrapper">
        <div class="loader"></div>
    </div>
    
    <!-- Scroll Progress Bar -->
    <div class="scroll-progress"></div>
    
    <!-- Back to Top Button -->
    <div class="back-to-top">
        <i class="fas fa-arrow-up"></i>
    </div>

    <!-- Dynamic Header -->
    <div id="dynamic-header"></div>
    
    <!-- Page Header Section -->
    <section class="page-header">
        <div class="page-header-bg"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="page-header-content" data-aos="fade-up">
                        <h1 class="page-title">Our Portfolio</h1>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Portfolio</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Portfolio Intro -->
    <section class="portfolio-intro">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10 text-center" data-aos="fade-up">
                    <span class="section-badge">Our Work</span>
                    <h2 class="section-title">Transforming Businesses Through Technology Since 2014</h2>
                    <p class="section-subtitle">Discover how we started, where we've been, and where we're going.</p>
                </div>
            </div>
            
            <div class="row mt-5">
                <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <h3><span class="counter" data-target="240">0</span>+</h3>
                        <p>Projects Completed</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <h3><span class="counter" data-target="120">0</span>+</h3>
                        <p>Happy Clients</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-globe"></i>
                        </div>
                        <h3><span class="counter" data-target="18">0</span>+</h3>
                        <p>Countries Served</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Portfolio Filter and Grid -->
    <section class="portfolio-section">
        <div class="container">
            <!-- Filter Buttons -->
            <div class="portfolio-filter">
                <ul class="filter-buttons" data-aos="fade-up">
                    <li class="active" data-filter="*">All Projects</li>
                    <li data-filter=".web">Web Development</li>
                    <li data-filter=".mobile">Mobile Apps</li>
                    <li data-filter=".ui-ux">UI/UX Design</li>
                    <li data-filter=".ecommerce">E-Commerce</li>
                    <li data-filter=".enterprise">Enterprise</li>
                </ul>
            </div>
            
            <!-- Portfolio Grid -->
            <div class="row portfolio-grid" data-aos="fade-up">
                <!-- Project 1 -->
                <div class="col-lg-4 col-md-6 portfolio-item web ecommerce">
                    <div class="portfolio-card">
                        <div class="portfolio-img">
                            <img src="images/portfolio/project1.jpg" alt="E-commerce Website" class="img-fluid">
                            <div class="portfolio-overlay">
                                <div class="overlay-content">
                                    <a href="images/portfolio/project1.jpg" class="view-project"><i class="fas fa-search-plus"></i></a>
                                    <a href="portfolio-details.html?project=1" class="project-link"><i class="fas fa-link"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="portfolio-info">
                            <h4>Modern E-commerce Platform</h4>
                            <p>Web Development, E-Commerce</p>
                        </div>
                    </div>
                </div>
                
                <!-- Project 2 -->
                <div class="col-lg-4 col-md-6 portfolio-item mobile ui-ux">
                    <div class="portfolio-card">
                        <div class="portfolio-img">
                            <img src="images/portfolio/project2.jpg" alt="Fitness Mobile App" class="img-fluid">
                            <div class="portfolio-overlay">
                                <div class="overlay-content">
                                    <a href="images/portfolio/project2.jpg" class="view-project"><i class="fas fa-search-plus"></i></a>
                                    <a href="portfolio-details.html?project=2" class="project-link"><i class="fas fa-link"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="portfolio-info">
                            <h4>Fitness Tracking App</h4>
                            <p>Mobile App, UI/UX Design</p>
                        </div>
                    </div>
                </div>
                
                <!-- Project 3 -->
                <div class="col-lg-4 col-md-6 portfolio-item web ui-ux">
                    <div class="portfolio-card">
                        <div class="portfolio-img">
                            <img src="images/portfolio/project3.jpg" alt="Financial Dashboard" class="img-fluid">
                            <div class="portfolio-overlay">
                                <div class="overlay-content">
                                    <a href="images/portfolio/project3.jpg" class="view-project"><i class="fas fa-search-plus"></i></a>
                                    <a href="portfolio-details.html?project=3" class="project-link"><i class="fas fa-link"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="portfolio-info">
                            <h4>Financial Dashboard</h4>
                            <p>Web Development, UI/UX Design</p>
                        </div>
                    </div>
                </div>
                
                <!-- Project 4 -->
                <div class="col-lg-4 col-md-6 portfolio-item enterprise web">
                    <div class="portfolio-card">
                        <div class="portfolio-img">
                            <img src="images/portfolio/project4.jpg" alt="Enterprise CRM" class="img-fluid">
                            <div class="portfolio-overlay">
                                <div class="overlay-content">
                                    <a href="images/portfolio/project4.jpg" class="view-project"><i class="fas fa-search-plus"></i></a>
                                    <a href="portfolio-details.html?project=4" class="project-link"><i class="fas fa-link"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="portfolio-info">
                            <h4>Enterprise CRM System</h4>
                            <p>Enterprise, Web Development</p>
                        </div>
                    </div>
                </div>
                
                <!-- Project 5 -->
                <div class="col-lg-4 col-md-6 portfolio-item mobile">
                    <div class="portfolio-card">
                        <div class="portfolio-img">
                            <img src="images/portfolio/project5.jpg" alt="Food Delivery App" class="img-fluid">
                            <div class="portfolio-overlay">
                                <div class="overlay-content">
                                    <a href="images/portfolio/project5.jpg" class="view-project"><i class="fas fa-search-plus"></i></a>
                                    <a href="portfolio-details.html?project=5" class="project-link"><i class="fas fa-link"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="portfolio-info">
                            <h4>Food Delivery App</h4>
                            <p>Mobile App</p>
                        </div>
                    </div>
                </div>
                
                <!-- Project 6 -->
                <div class="col-lg-4 col-md-6 portfolio-item ecommerce ui-ux">
                    <div class="portfolio-card">
                        <div class="portfolio-img">
                            <img src="images/portfolio/project6.jpg" alt="Luxury Brand Store" class="img-fluid">
                            <div class="portfolio-overlay">
                                <div class="overlay-content">
                                    <a href="images/portfolio/project6.jpg" class="view-project"><i class="fas fa-search-plus"></i></a>
                                    <a href="portfolio-details.html?project=6" class="project-link"><i class="fas fa-link"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="portfolio-info">
                            <h4>Luxury Brand E-Store</h4>
                            <p>E-Commerce, UI/UX Design</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Load More Button -->
            <div class="text-center mt-5" data-aos="fade-up">
                <a href="#" class="btn load-more-btn">
                    <span>Load More Projects</span>
                    <i class="fas fa-spinner"></i>
                </a>
            </div>
        </div>
    </section>
    
    <!-- Contact Banner Container -->
    <div id="contact-banner-container"></div>
    
    <!-- Dynamic Footer -->
    <footer id="dynamic-footer"></footer>

    <!-- Custom JavaScript -->
    <script src="js/components.js"></script>
    <script src="js/main.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize AOS animation
            AOS.init({
                duration: 800,
                easing: 'ease-in-out',
                once: true
            });
            
            // Initialize Isotope for filtering
            var $grid = $('.portfolio-grid').isotope({
                itemSelector: '.portfolio-item',
                layoutMode: 'fitRows'
            });
            
            // Filter items on button click
            $('.filter-buttons').on('click', 'li', function() {
                var filterValue = $(this).attr('data-filter');
                $grid.isotope({ filter: filterValue });
                
                // Add active class
                $('.filter-buttons li').removeClass('active');
                $(this).addClass('active');
            });
            
            // Initialize Magnific Popup for lightbox
            $('.view-project').magnificPopup({
                type: 'image',
                gallery: {
                    enabled: true
                }
            });
            
            // Load more button functionality (demo - normally would load via AJAX)
            $('.load-more-btn').on('click', function(e) {
                e.preventDefault();
                
                // Add loading state
                var $btn = $(this);
                $btn.addClass('loading');
                
                // Simulate loading (would be an AJAX call in real implementation)
                setTimeout(function() {
                    $btn.removeClass('loading');
                    $btn.html('<span>All Projects Loaded</span>');
                    $btn.addClass('disabled');
                }, 1500);
            });
            
            // Counter animation
            const counters = document.querySelectorAll('.counter');
            
            counters.forEach(counter => {
                const target = +counter.dataset.target;
                const duration = 2000; // Animation duration in milliseconds
                const step = target / (duration / 16); // 60fps (approximately)
                
                let count = 0;
                const updateCounter = () => {
                    count += step;
                    if (count < target) {
                        counter.innerText = Math.ceil(count);
                        requestAnimationFrame(updateCounter);
                    } else {
                        counter.innerText = target;
                    }
                };
                
                // Start the counter animation when the element is visible
                const observer = new IntersectionObserver(entries => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            updateCounter();
                            observer.unobserve(entry.target);
                        }
                    });
                }, { threshold: 0.5 });
                
                observer.observe(counter);
            });
        });
    </script>
    
<style>
/* Page Header Styles */
.page-header {
    position: relative;
    padding: 120px 0 80px;
    background-color: #0f172a;
    overflow: hidden;
}

.page-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    opacity: 0.8;
    z-index: 0;
}

.page-header-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiMzYjgyZjYiIGZpbGwtb3BhY2l0eT0iMC4xIj48cGF0aCBkPSJNMzYgMzRjMC0yLjIxLTEuNzktNC00LTRzLTQgMS43OS00IDQgMS43OSA0IDQgNCAzLjk4LTEuNzggNC00eiIvPjwvZz48L2c+PC9zdmc+');
    opacity: 0.5;
}

.page-header-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.page-title {
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    background: linear-gradient(45deg, #3b82f6, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.breadcrumb {
    display: inline-flex;
    padding: 10px 20px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 0;
    justify-content: center;
}

.breadcrumb-item, 
.breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.breadcrumb-item a {
    color: #60a5fa;
    text-decoration: none;
    transition: all 0.3s ease;
}

.breadcrumb-item a:hover {
    color: #fff;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5);
}

/* Portfolio Intro Styles */
.portfolio-intro {
    padding: 100px 0 50px;
    background-color: #fff;
}

.section-badge {
    display: inline-block;
    padding: 6px 15px;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 30px;
    margin-bottom: 15px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 15px;
    line-height: 1.3;
}

.section-subtitle {
    color: #64748b;
    font-size: 1.1rem;
    margin-bottom: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.stat-card {
    background-color: #fff;
    border-radius: 15px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.stat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border-color: #bfdbfe;
}

.stat-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: linear-gradient(45deg, #3b82f6, #60a5fa);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.25);
}

.stat-card h3 {
    font-size: 3rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
    background: linear-gradient(45deg, #3b82f6, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-card p {
    color: #64748b;
    font-size: 1.1rem;
    margin-bottom: 0;
    font-weight: 500;
}

/* Portfolio Section Styles */
.portfolio-section {
    padding: 50px 0 100px;
    background-color: #f8fafc;
    position: relative;
    overflow: hidden;
}

.portfolio-filter {
    text-align: center;
    margin-bottom: 40px;
}

.filter-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.filter-buttons li {
    padding: 10px 20px;
    background-color: #fff;
    color: #64748b;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
    font-size: 0.95rem;
}

.filter-buttons li:hover {
    color: #3b82f6;
    border-color: #bfdbfe;
    transform: translateY(-2px);
}

.filter-buttons li.active {
    background: linear-gradient(45deg, #3b82f6, #60a5fa);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.25);
}

.portfolio-card {
    margin-bottom: 30px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    background-color: #fff;
    border: 1px solid #e2e8f0;
}

.portfolio-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border-color: #bfdbfe;
}

.portfolio-img {
    position: relative;
    overflow: hidden;
}

.portfolio-img img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: all 0.5s ease;
}

.portfolio-card:hover .portfolio-img img {
    transform: scale(1.1);
}

.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s ease;
}

.portfolio-card:hover .portfolio-overlay {
    opacity: 1;
}

.overlay-content {
    display: flex;
    gap: 15px;
}

.overlay-content a {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    font-size: 1.2rem;
    transform: scale(0);
    transition: all 0.3s ease;
}

.portfolio-card:hover .overlay-content a {
    transform: scale(1);
}

.overlay-content a:hover {
    background: #3b82f6;
    color: #fff;
}

.portfolio-info {
    padding: 25px;
}

.portfolio-info h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.portfolio-info p {
    color: #64748b;
    margin-bottom: 0;
    font-size: 0.95rem;
}

.load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    background: linear-gradient(45deg, #3b82f6, #60a5fa);
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.load-more-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    transition: all 0.4s ease;
    z-index: -1;
}

.load-more-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.35);
    color: #fff;
}

.load-more-btn:hover::before {
    left: 100%;
}

.load-more-btn.loading i {
    animation: spin 1s linear infinite;
}

.load-more-btn.disabled {
    background: #94a3b8;
    pointer-events: none;
    box-shadow: none;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive Adjustments */
@media (max-width: 1199.98px) {
    .section-title {
        font-size: 2.2rem;
    }
    
    .portfolio-img img {
        height: 220px;
    }
}

@media (max-width: 991.98px) {
    .page-header {
        padding: 100px 0 60px;
    }
    
    .page-title {
        font-size: 2.5rem;
    }
    
    .portfolio-intro {
        padding: 70px 0 40px;
    }
    
    .portfolio-section {
        padding: 40px 0 70px;
    }
    
    .filter-buttons li {
        padding: 8px 15px;
        font-size: 0.9rem;
    }
    
    .stat-card {
        padding: 30px 20px;
    }
    
    .stat-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
    
    .stat-card h3 {
        font-size: 2.5rem;
    }
}

@media (max-width: 767.98px) {
    .page-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
    
    .filter-buttons {
        display: flex;
        overflow-x: auto;
        padding-bottom: 15px;
        margin-bottom: 15px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    
    .filter-buttons li {
        scroll-snap-align: start;
        white-space: nowrap;
    }
    
    .load-more-btn {
        padding: 12px 25px;
        font-size: 0.95rem;
    }
}

@media (max-width: 575.98px) {
    .page-title {
        font-size: 1.8rem;
    }
    
    .portfolio-intro,
    .portfolio-section {
        padding: 50px 0;
    }
    
    .section-badge {
        font-size: 0.8rem;
    }
    
    .section-title {
        font-size: 1.6rem;
    }
    
    .section-subtitle {
        font-size: 0.95rem;
    }
    
    .portfolio-info {
        padding: 20px;
    }
    
    .portfolio-info h4 {
        font-size: 1.1rem;
    }
    
    .portfolio-info p {
        font-size: 0.9rem;
    }
}
</style>
</body>
</html>