<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alex Morgan - Professional Photography</title>
    <link rel="stylesheet" href="styles.css">
    <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=Playfair+Display:wght@400;500;600;700&family=Inter: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">
</head>
<body>
    <!-- Preloader -->
    <div class="preloader">
        <div class="preloader-content">
            <div class="camera-loader">
                <i class="fas fa-camera"></i>
            </div>
            <div class="loading-text">Loading Portfolio...</div>
        </div>
    </div>

    <!-- Navigation -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">
                <h1><i class="fas fa-camera-retro"></i> Alex Morgan</h1>
                <span>Professional Photography</span>
            </div>
            <ul class="nav-menu">
                <li><a href="#home" class="nav-link"><i class="fas fa-home"></i> Home</a></li>
                <li><a href="#portfolio" class="nav-link"><i class="fas fa-images"></i> Portfolio</a></li>
                <li><a href="#about" class="nav-link"><i class="fas fa-user"></i> About</a></li>
                <li><a href="#services" class="nav-link"><i class="fas fa-briefcase"></i> Services</a></li>
                <li><a href="#contact" class="nav-link"><i class="fas fa-envelope"></i> Contact</a></li>
            </ul>
            <div class="nav-social">
                <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
                <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
            </div>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="hero">
        <div class="hero-content">
            <div class="hero-text">
                <div class="hero-badge">
                    <i class="fas fa-award"></i>
                    <span>Award Winning Photographer</span>
                </div>
                <h1 class="hero-title">
                    <span class="title-line">Capturing Life's</span>
                    <span class="title-line highlight">Beautiful Moments</span>
                </h1>
                <p class="hero-subtitle">
                    Professional photographer specializing in weddings, portraits, and lifestyle photography. 
                    Creating timeless memories that tell your unique story.
                </p>
                <div class="hero-stats">
                    <div class="stat">
                        <div class="stat-number" data-count="500">0</div>
                        <div class="stat-label">Happy Clients</div>
                    </div>
                    <div class="stat">
                        <div class="stat-number" data-count="200">0</div>
                        <div class="stat-label">Weddings</div>
                    </div>
                    <div class="stat">
                        <div class="stat-number" data-count="8">0</div>
                        <div class="stat-label">Years Experience</div>
                    </div>
                </div>
                <div class="hero-buttons">
                    <a href="#portfolio" class="btn btn-primary">
                        <i class="fas fa-images"></i>
                        <span>View Portfolio</span>
                    </a>
                    <a href="#contact" class="btn btn-outline">
                        <i class="fas fa-calendar-alt"></i>
                        <span>Book Session</span>
                    </a>
                </div>
            </div>
           
        </div>
        <div class="scroll-indicator">
            <div class="scroll-text">Scroll Down</div>
            <div class="scroll-arrow">
                <i class="fas fa-chevron-down"></i>
            </div>
        </div>
    </section>

    <!-- Portfolio Section -->
    <section id="portfolio" class="portfolio">
        <div class="container">
            <div class="section-header">
                <div class="section-badge">
                    <i class="fas fa-camera"></i>
                    <span>My Work</span>
                </div>
                <h2 class="section-title">Featured Portfolio</h2>
                <p class="section-subtitle">A curated collection of my finest photography work</p>
            </div>

            <!-- Portfolio Filter -->
            <div class="portfolio-filter">
                <button class="filter-btn active" data-filter="all">
                    <i class="fas fa-th"></i>
                    <span>All Work</span>
                </button>
                <button class="filter-btn" data-filter="wedding">
                    <i class="fas fa-ring"></i>
                    <span>Weddings</span>
                </button>
                <button class="filter-btn" data-filter="portrait">
                    <i class="fas fa-user-circle"></i>
                    <span>Portraits</span>
                </button>
                <button class="filter-btn" data-filter="lifestyle">
                    <i class="fas fa-home"></i>
                    <span>Lifestyle</span>
                </button>
            </div>

            <!-- Portfolio Grid -->
            <div class="portfolio-grid">
                <div class="portfolio-item" data-category="wedding">
                    <div class="portfolio-image">
                        <img src="https://images.unsplash.com/photo-1519741497674-611481863552?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Wedding Photography" />
                        <div class="image-overlay">
                            <div class="overlay-content">
                                <div class="portfolio-icons">
                                    <button class="icon-btn" data-action="view">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="icon-btn" data-action="like">
                                        <i class="fas fa-heart"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="portfolio-info">
                        <div class="portfolio-category">
                            <i class="fas fa-ring"></i>
                            <span>Wedding</span>
                        </div>
                        <h3>Romantic Garden Wedding</h3>
                        <p>Sarah & Michael's beautiful outdoor ceremony</p>
                    </div>
                </div>

                <div class="portfolio-item" data-category="portrait">
                    <div class="portfolio-image">
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Portrait Photography" />
                        <div class="image-overlay">
                            <div class="overlay-content">
                                <div class="portfolio-icons">
                                    <button class="icon-btn" data-action="view">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="icon-btn" data-action="like">
                                        <i class="fas fa-heart"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="portfolio-info">
                        <div class="portfolio-category">
                            <i class="fas fa-user-circle"></i>
                            <span>Portrait</span>
                        </div>
                        <h3>Executive Portrait</h3>
                        <p>Professional headshot for corporate branding</p>
                    </div>
                </div>

                <div class="portfolio-item" data-category="lifestyle">
                    <div class="portfolio-image">
                        <img src="https://images.unsplash.com/photo-1511895426328-dc8714191300?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Lifestyle Photography" />
                        <div class="image-overlay">
                            <div class="overlay-content">
                                <div class="portfolio-icons">
                                    <button class="icon-btn" data-action="view">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="icon-btn" data-action="like">
                                        <i class="fas fa-heart"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="portfolio-info">
                        <div class="portfolio-category">
                            <i class="fas fa-home"></i>
                            <span>Lifestyle</span>
                        </div>
                        <h3>Family Moments</h3>
                        <p>Candid family photography session</p>
                    </div>
                </div>

                <div class="portfolio-item" data-category="wedding">
                    <div class="portfolio-image">
                        <img src="https://images.unsplash.com/photo-1465495976277-4387d4b0e4a6?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Wedding Photography" />
                        <div class="image-overlay">
                            <div class="overlay-content">
                                <div class="portfolio-icons">
                                    <button class="icon-btn" data-action="view">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="icon-btn" data-action="like">
                                        <i class="fas fa-heart"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="portfolio-info">
                        <div class="portfolio-category">
                            <i class="fas fa-ring"></i>
                            <span>Wedding</span>
                        </div>
                        <h3>Beach Wedding Ceremony</h3>
                        <p>Emma & James's seaside celebration</p>
                    </div>
                </div>

                <div class="portfolio-item" data-category="portrait">
                    <div class="portfolio-image">
                        <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Portrait Photography" />
                        <div class="image-overlay">
                            <div class="overlay-content">
                                <div class="portfolio-icons">
                                    <button class="icon-btn" data-action="view">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="icon-btn" data-action="like">
                                        <i class="fas fa-heart"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="portfolio-info">
                        <div class="portfolio-category">
                            <i class="fas fa-user-circle"></i>
                            <span>Portrait</span>
                        </div>
                        <h3>Creative Portrait Session</h3>
                        <p>Artistic studio photography with dramatic lighting</p>
                    </div>
                </div>

                <div class="portfolio-item" data-category="lifestyle">
                    <div class="portfolio-image">
                        <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Nature Photography" />
                        <div class="image-overlay">
                            <div class="overlay-content">
                                <div class="portfolio-icons">
                                    <button class="icon-btn" data-action="view">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="icon-btn" data-action="like">
                                        <i class="fas fa-heart"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="portfolio-info">
                        <div class="portfolio-category">
                            <i class="fas fa-leaf"></i>
                            <span>Nature</span>
                        </div>
                        <h3>Mountain Sunrise</h3>
                        <p>Breathtaking landscape photography</p>
                    </div>
                </div>
            </div>

            <div class="portfolio-cta">
                <a href="#contact" class="btn btn-primary btn-large">
                    <i class="fas fa-images"></i>
                    <span>View Full Portfolio</span>
                </a>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="about">
        <div class="container">
            <div class="about-content">
                <div class="about-text">
                    <div class="section-badge">
                        <i class="fas fa-user"></i>
                        <span>About Me</span>
                    </div>
                    <h2 class="section-title">Passionate About Photography</h2>
                    <p class="about-description">
                        With over 8 years of experience in professional photography, I specialize in capturing authentic moments that tell your unique story. My passion lies in creating timeless images that you'll treasure for generations.
                    </p>
                    <p class="about-description">
                        From intimate portraits to grand celebrations, I approach each session with creativity, professionalism, and attention to detail. My goal is to make you feel comfortable and confident, resulting in natural, beautiful photographs.
                    </p>
                    
                    <div class="about-features">
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-award"></i>
                            </div>
                            <div class="feature-content">
                                <h4>Award Winning</h4>
                                <p>Multiple photography awards and recognitions</p>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div class="feature-content">
                                <h4>Fast Delivery</h4>
                                <p>Quick turnaround time for all projects</p>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-heart"></i>
                            </div>
                            <div class="feature-content">
                                <h4>Passionate Work</h4>
                                <p>Every shot is taken with love and dedication</p>
                            </div>
                        </div>
                    </div>

                    <div class="about-cta">
                        <a href="#contact" class="btn btn-primary">
                            <i class="fas fa-envelope"></i>
                            <span>Get In Touch</span>
                        </a>
                        <a href="#" class="btn btn-outline">
                            <i class="fas fa-download"></i>
                            <span>Download Resume</span>
                        </a>
                    </div>
                </div>
                
                <div class="about-visual">
                    <div class="about-image">
                        <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Alex Morgan - Photographer" />
                        <div class="image-frame"></div>
                    </div>
                    <div class="experience-badge">
                        <div class="badge-content">
                            <div class="badge-number">8+</div>
                            <div class="badge-text">Years<br>Experience</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section id="services" class="services">
        <div class="container">
            <div class="section-header">
                <div class="section-badge">
                    <i class="fas fa-briefcase"></i>
                    <span>Services</span>
                </div>
                <h2 class="section-title">Photography Services</h2>
                <p class="section-subtitle">Professional photography services tailored to your unique needs</p>
            </div>

            <div class="services-grid">
                <div class="service-card">
                    <div class="service-header">
                        <div class="service-icon">
                            <i class="fas fa-ring"></i>
                        </div>
                        <div class="service-badge">Most Popular</div>
                    </div>
                    <h3>Wedding Photography</h3>
                    <p>Complete wedding day coverage from preparation to reception. Includes engagement session and online gallery with high-resolution images.</p>
                    <div class="service-features">
                        <div class="feature">
                            <i class="fas fa-check"></i>
                            <span>8-10 hours coverage</span>
                        </div>
                        <div class="feature">
                            <i class="fas fa-check"></i>
                            <span>500+ edited photos</span>
                        </div>
                        <div class="feature">
                            <i class="fas fa-check"></i>
                            <span>Online gallery</span>
                        </div>
                        <div class="feature">
                            <i class="fas fa-check"></i>
                            <span>Engagement session</span>
                        </div>
                    </div>
                    <div class="service-price">
                        <span class="price">$2,500</span>
                        <span class="period">Starting Price</span>
                    </div>
                    <a href="#contact" class="btn btn-primary btn-full">
                        <i class="fas fa-calendar-alt"></i>
                        <span>Book Now</span>
                    </a>
                </div>

                <div class="service-card">
                    <div class="service-header">
                        <div class="service-icon">
                            <i class="fas fa-user-circle"></i>
                        </div>
                    </div>
                    <h3>Portrait Sessions</h3>
                    <p>Professional headshots, family portraits, and personal branding photography for individuals and businesses.</p>
                    <div class="service-features">
                        <div class="feature">
                            <i class="fas fa-check"></i>
                            <span>1-2 hours session</span>
                        </div>
                        <div class="feature">
                            <i class="fas fa-check"></i>
                            <span>50+ edited photos</span>
                        </div>
                        <div class="feature">
                            <i class="fas fa-check"></i>
                            <span>Multiple outfits</span>
                        </div>
                        <div class="feature">
                            <i class="fas fa-check"></i>
                            <span>Studio or location</span>
                        </div>
                    </div>
                    <div class="service-price">
                        <span class="price">$350</span>
                        <span class="period">Starting Price</span>
                    </div>
                    <a href="#contact" class="btn btn-outline btn-full">
                        <i class="fas fa-calendar-alt"></i>
                        <span>Book Now</span>
                    </a>
                </div>

                <div class="service-card">
                    <div class="service-header">
                        <div class="service-icon">
                            <i class="fas fa-building"></i>
                        </div>
                    </div>
                    <h3>Corporate Events</h3>
                    <p>Professional event photography for conferences, corporate gatherings, and business celebrations.</p>
                    <div class="service-features">
                        <div class="feature">
                            <i class="fas fa-check"></i>
                            <span>Full event coverage</span>
                        </div>
                        <div class="feature">
                            <i class="fas fa-check"></i>
                            <span>200+ edited photos</span>
                        </div>
                        <div class="feature">
                            <i class="fas fa-check"></i>
                            <span>Same day preview</span>
                        </div>
                        <div class="feature">
                            <i class="fas fa-check"></i>
                            <span>Commercial license</span>
                        </div>
                    </div>
                    <div class="service-price">
                        <span class="price">$800</span>
                        <span class="period">Starting Price</span>
                    </div>
                    <a href="#contact" class="btn btn-outline btn-full">
                        <i class="fas fa-calendar-alt"></i>
                        <span>Book Now</span>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section class="testimonials">
        <div class="container">
            <div class="section-header">
                <div class="section-badge">
                    <i class="fas fa-quote-left"></i>
                    <span>Testimonials</span>
                </div>
                <h2 class="section-title">What Clients Say</h2>
                <p class="section-subtitle">Real feedback from real clients</p>
            </div>
            
            <div class="testimonials-slider">
                <div class="testimonial-card active">
                    <div class="testimonial-content">
                        <div class="quote-icon">
                            <i class="fas fa-quote-left"></i>
                        </div>
                        <p>"Alex captured our wedding day perfectly. Every emotion, every detail - the photos are absolutely stunning and we couldn't be happier! The way he captured the golden hour shots was magical."</p>
                        <div class="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 class="testimonial-author">
                        <div class="author-image">
                            <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80" alt="Sarah Johnson" />
                        </div>
                        <div class="author-info">
                            <h4>Sarah & Michael Johnson</h4>
                            <span>Wedding Clients</span>
                        </div>
                    </div>
                </div>

                <div class="testimonial-card">
                    <div class="testimonial-content">
                        <div class="quote-icon">
                            <i class="fas fa-quote-left"></i>
                        </div>
                        <p>"Professional, creative, and so easy to work with. The family portraits exceeded our expectations and captured our personalities beautifully. Alex made everyone feel comfortable, even our shy kids!"</p>
                        <div class="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 class="testimonial-author">
                        <div class="author-image">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80" alt="David Wilson" />
                        </div>
                        <div class="author-info">
                            <h4>The Wilson Family</h4>
                            <span>Portrait Session</span>
                        </div>
                    </div>
                </div>

                <div class="testimonial-card">
                    <div class="testimonial-content">
                        <div class="quote-icon">
                            <i class="fas fa-quote-left"></i>
                        </div>
                        <p>"Outstanding work! Alex's attention to detail and artistic vision made our corporate event photography exceptional. The team was impressed with the quality and professionalism. Highly recommended!"</p>
                        <div class="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 class="testimonial-author">
                        <div class="author-image">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80" alt="Jennifer Chen" />
                        </div>
                        <div class="author-info">
                            <h4>Jennifer Chen</h4>
                            <span>Tech Solutions Inc.</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="testimonial-controls">
                <button class="control-btn prev-btn">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <div class="testimonial-dots">
                    <span class="dot active" data-slide="0"></span>
                    <span class="dot" data-slide="1"></span>
                    <span class="dot" data-slide="2"></span>
                </div>
                <button class="control-btn next-btn">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact">
        <div class="container">
            <div class="contact-content">
                <div class="contact-info">
                    <div class="section-badge">
                        <i class="fas fa-envelope"></i>
                        <span>Contact</span>
                    </div>
                    <h2 class="section-title">Let's Create Something Beautiful</h2>
                    <p class="contact-description">
                        Ready to capture your special moments? I'd love to hear about your vision and discuss how we can bring it to life together.
                    </p>

                    <div class="contact-details">
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div class="contact-text">
                                <h4>Email</h4>
                                <p>hello@alexmorgan.photography</p>
                                <a href="mailto:hello@alexmorgan.photography" class="contact-link">Send Email</a>
                            </div>
                        </div>

                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div class="contact-text">
                                <h4>Phone</h4>
                                <p>+1 (555) 123-4567</p>
                                <a href="tel:+15551234567" class="contact-link">Call Now</a>
                            </div>
                        </div>

                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div class="contact-text">
                                <h4>Location</h4>
                                <p>San Francisco Bay Area</p>
                                <a href="#" class="contact-link">View on Map</a>
                            </div>
                        </div>
                    </div>

                    <div class="social-links">
                        <a href="#" class="social-link">
                            <i class="fab fa-instagram"></i>
                            <span>Instagram</span>
                        </a>
                        <a href="#" class="social-link">
                            <i class="fab fa-facebook"></i>
                            <span>Facebook</span>
                        </a>
                        <a href="#" class="social-link">
                            <i class="fab fa-pinterest"></i>
                            <span>Pinterest</span>
                        </a>
                    </div>
                </div>

                <div class="contact-form">
                    <form class="form">
                        <div class="form-header">
                            <h3>Send a Message</h3>
                            <p>Fill out the form below and I'll get back to you soon!</p>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label for="firstName">First Name</label>
                                <input type="text" id="firstName" name="firstName" required>
                                <i class="fas fa-user"></i>
                            </div>
                            <div class="form-group">
                                <label for="lastName">Last Name</label>
                                <input type="text" id="lastName" name="lastName" required>
                                <i class="fas fa-user"></i>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label for="email">Email Address</label>
                                <input type="email" id="email" name="email" required>
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div class="form-group">
                                <label for="phone">Phone Number</label>
                                <input type="tel" id="phone" name="phone">
                                <i class="fas fa-phone"></i>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="service">Service Needed</label>
                            <select id="service" name="service" required>
                                <option value="">Select a service</option>
                                <option value="wedding">Wedding Photography</option>
                                <option value="portrait">Portrait Session</option>
                                <option value="corporate">Corporate Event</option>
                                <option value="lifestyle">Lifestyle Photography</option>
                                <option value="other">Other</option>
                            </select>
                            <i class="fas fa-camera"></i>
                        </div>
                        
                        <div class="form-group">
                            <label for="message">Tell me about your vision</label>
                            <textarea id="message" name="message" rows="5" placeholder="Describe your event, style preferences, location, and any special requirements..." required></textarea>
                            <i class="fas fa-comment"></i>
                        </div>
                        
                        <button type="submit" class="btn btn-primary btn-full">
                            <i class="fas fa-paper-plane"></i>
                            <span>Send Message</span>
                            <div class="btn-loader">
                                <i class="fas fa-spinner fa-spin"></i>
                            </div>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-main">
                    <div class="footer-logo">
                        <h3><i class="fas fa-camera-retro"></i> Alex Morgan Photography</h3>
                        <p>Capturing life's beautiful moments with passion and creativity. Professional photography services in the San Francisco Bay Area.</p>
                        <div class="footer-social">
                            <a href="#" class="social-icon">
                                <i class="fab fa-instagram"></i>
                            </a>
                            <a href="#" class="social-icon">
                                <i class="fab fa-facebook"></i>
                            </a>
                            <a href="#" class="social-icon">
                                <i class="fab fa-pinterest"></i>
                            </a>
                        </div>
                    </div>
                    
                    <div class="footer-links">
                        <div class="footer-column">
                            <h4>Services</h4>
                            <ul>
                                <li><a href="#services">Wedding Photography</a></li>
                                <li><a href="#services">Portrait Sessions</a></li>
                                <li><a href="#services">Corporate Events</a></li>
                            </ul>
                        </div>
                        
                        <div class="footer-column">
                            <h4>Quick Links</h4>
                            <ul>
                                <li><a href="#portfolio">Portfolio</a></li>
                                <li><a href="#about">About</a></li>
                                <li><a href="#contact">Contact</a></li>
                            </ul>
                        </div>
                        
                        <div class="footer-column">
                            <h4>Contact Info</h4>
                            <ul>
                                <li>
                                    <i class="fas fa-envelope"></i>
                                    <span>hello@alexmorgan.photography</span>
                                </li>
                                <li>
                                    <i class="fas fa-phone"></i>
                                    <span>+1 (555) 123-4567</span>
                                </li>
                                <li>
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>San Francisco Bay Area</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="footer-bottom">
                    <div class="footer-bottom-content">
                        <p>&copy; 2024 Alex Morgan Photography. All rights reserved.</p>
                        <div class="footer-bottom-links">
                            <a href="#">Privacy Policy</a>
                            <a href="#">Terms of Service</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Lightbox Modal -->
    <div id="lightbox" class="lightbox">
        <div class="lightbox-content">
            <button class="lightbox-close">
                <i class="fas fa-times"></i>
            </button>
            <div class="lightbox-image-container">
                <img class="lightbox-image" src="" alt="">
            </div>
            <div class="lightbox-info">
                <h3 class="lightbox-title"></h3>
                <p class="lightbox-description"></p>
                <div class="lightbox-meta"></div>
            </div>
            <div class="lightbox-controls">
                <button class="lightbox-prev">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button class="lightbox-next">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- Back to Top Button -->
    <button class="back-to-top">
        <i class="fas fa-chevron-up"></i>
    </button>

    <script src="script.js"></script>
</body>
</html>