<!DOCTYPE html>
<html lang="en">
<head>
    <title>Our Projects - Real Estate Portfolio</title>
    <link rel="icon" href="images/icon.webp" type="image/gif" sizes="16x16">
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="Explore our portfolio of premium real estate projects and developments" name="description">
    <meta content="real estate projects, property developments, residential projects, commercial properties" name="keywords">
    <!-- CSS Files -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" id="bootstrap">
    <link href="css/plugins.css" rel="stylesheet" type="text/css">
    <link href="css/swiper.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href="css/coloring.css" rel="stylesheet" type="text/css">
    <style>
        /* Custom Color Overrides */
        :root {
            --primary-color: #1A9A9A;  /* Teal from logo */
            --accent-color: #FF6B35;   /* Orange from logo */
            --accent-hover: #e65c2b;   /* Darker orange for hover */
            --light-bg: #f8f9fa;       /* Light gray for backgrounds */
        }
        
        /* Header Styling */
        .hero-section {
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('images/background/1.webp');
            background-size: cover;
            background-position: center;
            padding: 120px 0;
            color: white;
        }
        
        /* Project Cards */
        .project-card {
            border: none;
            border-radius: 15px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin-bottom: 30px;
            background: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .project-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.2);
        }
        
        .project-image {
            height: 220px;
            overflow: hidden;
            position: relative;
        }
        
        .project-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .project-card:hover .project-image img {
            transform: scale(1.05);
        }
        
        .project-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(26, 154, 154, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .project-card:hover .project-overlay {
            opacity: 1;
        }
        
        .project-status {
            position: absolute;
            top: 15px;
            right: 15px;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .status-ongoing {
            background-color: #FF6B35;
            color: white;
        }
        
        .status-completed {
            background-color: #1A9A9A;
            color: white;
        }
        
        .project-details {
            padding: 20px;
        }
        
        .project-details h4 {
            color: #333;
            font-weight: 700;
            margin-bottom: 10px;
        }
        
        .project-details p {
            color: #666;
            margin-bottom: 15px;
        }
        
        .project-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }
        
        .project-location {
            color: #777;
            font-size: 14px;
        }
        
        .project-price {
            color: #FF6B35;
            font-weight: 700;
            font-size: 18px;
        }
        
        /* Filter Buttons */
        .filter-buttons {
            margin-bottom: 30px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }
        
        .filter-btn {
            background: white;
            border: 2px solid #1A9A9A;
            color: #1A9A9A;
            padding: 8px 20px;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .filter-btn:hover,
        .filter-btn.active {
            background: #1A9A9A;
            color: white;
            border-color: #1A9A9A;
        }
        
        /* Call to Action */
        .cta-section {
            background: linear-gradient(135deg, #1A9A9A 0%, #0D7A7A 100%);
            color: white;
            padding: 60px 0;
            margin-top: 60px;
        }
        
        .cta-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .cta-text h2 {
            font-size: 36px;
            margin-bottom: 15px;
        }
        
        .cta-btn {
            background: #FF6B35;
            color: white;
            border: none;
            padding: 12px 35px;
            border-radius: 30px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
        }
        
        .cta-btn:hover {
            background: #e65c2b;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .cta-content {
                text-align: center;
                justify-content: center;
            }
            
            .cta-text {
                margin-bottom: 20px;
            }
            
            .filter-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .filter-btn {
                width: 100%;
                max-width: 250px;
            }
        }
    </style>
</head>

<body>
    <?php include 'header.php'; ?>

    <main>
        <!-- Hero Section -->
        <section class="hero-section">
            <div class="container">
                <div class="row">
                    <div class="col-12 text-center">
                        <h1 class="display-4 fw-bold mb-3" style="color:#ffffff;">Our Projects</h1>
                        <p class="lead">Discover our exceptional portfolio of premium properties and developments</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Projects Section -->
        <section class="py-5">
            <div class="container">
                <!-- Filter Buttons -->
                <div class="filter-buttons mb-5">
                    <button class="filter-btn active" data-filter="all">All Projects</button>
                    <button class="filter-btn" data-filter="residential">Residential</button>
                    <button class="filter-btn" data-filter="commercial">Commercial</button>
                    <button class="filter-btn" data-filter="completed">Completed</button>
                    <button class="filter-btn" data-filter="ongoing">Ongoing</button>
                </div>

                <!-- Projects Grid -->
                <div class="row">
                    <!-- Project 1 -->
                    <div class="col-lg-4 col-md-6" data-category="residential completed">
                        <div class="project-card">
                            <div class="project-image">
                                <img src="images/gallery/1.webp" alt="Luxury Apartments">
                                <div class="project-overlay">
                                    <!--<a href="ecogram-residency.php" class="btn btn-light rounded-pill px-4">View Details</a>-->
                                </div>
                                <span class="project-status status-completed">Completed</span>
                            </div>
                            <div class="project-details">
                                <h4>Ecogram Residency</h4>
                                <p>Luxury Apartments in the heart of the city with modern amenities and beautiful views.</p>
                                <div class="project-meta">
                                    <span class="project-location"><i class="fas fa-map-marker-alt me-2"></i>Mumbai, India</span>
                                    <span class="project-price">From ₹1.2 Cr*</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Project 2 -->
                    <div class="col-lg-4 col-md-6" data-category="residential ongoing">
                        <div class="project-card">
                            <div class="project-image">
                                <img src="images/gallery/Indraprastha.jfif" alt="Modern Villas">
                                <div class="project-overlay">
                                    <!--<a href="indraprastha-resorts.php" class="btn btn-light rounded-pill px-4">View Details</a>-->
                                </div>
                                <span class="project-status status-ongoing">Ongoing</span>
                            </div>
                            <div class="project-details">
                                <h4>Indraprastha Resorts</h4>
                                <p>Luxury Villas with Modern Amenities and beautiful landscapes.</p>
                                <div class="project-meta">
                                    <span class="project-location"><i class="fas fa-map-marker-alt me-2"></i>Lucknow, India</span>
                                    <span class="project-price">From ₹2.5 Cr*</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Project 3 -->
                    <div class="col-lg-4 col-md-6" data-category="commercial completed">
                        <div class="project-card">
                            <div class="project-image">
                                <img src="images/gallery/3.webp" alt="Business Tower">
                                <div class="project-overlay">
                                    <!--<a href="#" class="btn btn-light rounded-pill px-4">View Details</a>-->
                                </div>
                                <span class="project-status status-completed">Completed</span>
                            </div>
                            <div class="project-details">
                                <h4>Business Tower One</h4>
                                <p>Premium Office Spaces in Downtown with world-class facilities.</p>
                                <div class="project-meta">
                                    <span class="project-location"><i class="fas fa-map-marker-alt me-2"></i>Bangalore, India</span>
                                    <span class="project-price">From ₹3.5 Cr*</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Project 4 -->
                    <div class="col-lg-4 col-md-6" data-category="residential completed">
                        <div class="project-card">
                            <div class="project-image">
                                <img src="images/gallery/Garden.jpg" alt="Garden Residences">
                                <div class="project-overlay">
                                    <!--<a href="#" class="btn btn-light rounded-pill px-4">View Details</a>-->
                                </div>
                                <span class="project-status status-completed">Completed</span>
                            </div>
                            <div class="project-details">
                                <h4>Garden Residences</h4>
                                <p>Eco-friendly Living Spaces with lush green surroundings.</p>
                                <div class="project-meta">
                                    <span class="project-location"><i class="fas fa-map-marker-alt me-2"></i>Pune, India</span>
                                    <span class="project-price">From ₹85 Lacs*</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Project 5 -->
                    <div class="col-lg-4 col-md-6" data-category="commercial completed">
                        <div class="project-card">
                            <div class="project-image">
                                <img src="images/gallery/Retail.jpg" alt="Retail Hub">
                                <div class="project-overlay">
                                    <!--<a href="#" class="btn btn-light rounded-pill px-4">View Details</a>-->
                                </div>
                                <span class="project-status status-completed">Completed</span>
                            </div>
                            <div class="project-details">
                                <h4>Retail Hub Mall</h4>
                                <p>Premier Shopping Destination with international brands.</p>
                                <div class="project-meta">
                                    <span class="project-location"><i class="fas fa-map-marker-alt me-2"></i>Hyderabad, India</span>
                                    <span class="project-price">From ₹5 Cr*</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Project 6 -->
                    <div class="col-lg-4 col-md-6" data-category="residential ongoing">
                        <div class="project-card">
                            <div class="project-image">
                                <img src="images/gallery/Lakeside.jpg" alt="Lakeside Villas">
                                <div class="project-overlay">
                                    <!--<a href="#" class="btn btn-light rounded-pill px-4">View Details</a>-->
                                </div>
                                <span class="project-status status-ongoing">Ongoing</span>
                            </div>
                            <div class="project-details">
                                <h4>Lakeside Villas</h4>
                                <p>Waterfront Luxury Living with breathtaking views.</p>
                                <div class="project-meta">
                                    <span class="project-location"><i class="fas fa-map-marker-alt me-2"></i>Nanital, India</span>
                                    <span class="project-price">From ₹3.2 Cr*</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Call to Action Section -->
        <section class="cta-section">
            <div class="container">
                <div class="cta-content">
                    <div class="cta-text">
                        <h2>Have a Project in Mind?</h2>
                        <p class="mb-0">Let's discuss how we can help you find your dream property or investment opportunity.</p>
                    </div>
                    <a href="contact.php" class="cta-btn">Contact Us</a>
                </div>
            </div>
        </section>
    </main>

    <?php include 'footer.php'; ?>

    <!-- JavaScript -->
    <script src="js/vendors.js"></script>
    <script src="js/designesia.js"></script>
    <script>
        // Project Filtering
        document.addEventListener('DOMContentLoaded', function() {
            const filterButtons = document.querySelectorAll('.filter-btn');
            const projectItems = document.querySelectorAll('[data-category]');
            
            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 projects
                    projectItems.forEach(item => {
                        if (filterValue === 'all' || item.getAttribute('data-category').includes(filterValue)) {
                            item.style.display = 'block';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                });
            });
        });
    </script>
</body>
</html>