{% extends "base.html" %}

{% block content %}
<!-- Hero Section -->
<section class="hero" id="home">
    <div class="hero-background"></div>
    <div class="hero-particles"></div>
    <div class="hero-content">
        <h2>Transform Your Home with <span>EnKart30</span></h2>
        <p>Professional home decor and painting services based in Westlands, Nairobi, serving all of Kenya. We bring your vision to life with expert craftsmanship and premium quality materials.</p>
        <div class="hero-btns">
            <a href="#contact" class="btn">Get Free Quote</a>
            <a href="#portfolio" class="btn btn-secondary">View Our Work</a>
        </div>
    </div>
</section>

<!-- About Section -->
<section class="section" id="about">
    <div class="container">
        <div class="section-title">
            <h2>About EnKart30</h2>
            <p>Your trusted partner for home transformation across Kenya</p>
           <p style="color: purple; animation: fadeSlide 3s ease-in-out forwards; opacity: 0;">Draw idea not things, action not poses, gestures not anatomical structures... creatively to its best</p>
<style>
@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

        </div>
        <div class="about-content-centered">
            <div class="about-main">
                <h3>Professional Home Transformation Services</h3>
                <p>EnKart30 specializes in comprehensive home decor and painting services across Kenya. Based in Westlands, Nairobi, we bring creative excellence and professional craftsmanship to every project, transforming spaces into beautiful, functional environments.</p>
                
                <div class="about-features-grid">
                    <div class="feature-item">
                        <i class="fas fa-palette"></i>
                        <div>
                            <h4>Interior Painting</h4>
                            <p>Expert wall painting and color consultation services</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <i class="fas fa-home"></i>
                        <div>
                            <h4>Home Decor</h4>
                            <p>Complete interior decoration and styling solutions</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <i class="fas fa-paint-brush"></i>
                        <div>
                            <h4>Custom Artwork</h4>
                            <p>Personalized art pieces and wall installations</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <i class="fas fa-tools"></i>
                        <div>
                            <h4>Renovation Services</h4>
                            <p>Professional home improvement and restoration</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Services Section -->
<section class="section" id="services">
    <div class="container">
        <div class="section-title">
            <h2>Our Services</h2>
            <p>Comprehensive home transformation solutions</p>
        </div>
        <div class="services-grid">
            <div class="service-card">
                <div class="service-img">
                    <img src="{{ url_for('static', filename='images/interior-painting.jpg') }}" alt="Interior Painting">
                </div>
                <div class="service-content">
                    <h3>Interior Painting</h3>
                    <p>Professional interior painting services using premium paints and expert techniques. We transform your walls with precision and care.</p>
                    <ul class="service-features">
                        <li>Color consultation</li>
                        <li>Wall preparation</li>
                        <li>Premium paint brands</li>
                        <li>Clean finish guarantee</li>
                    </ul>
                </div>
            </div>
            
            <div class="service-card">
                <div class="service-img">
                                       <img src="{{ url_for('static', filename='images/hero-background.png') }}" alt="Home Decor">
                </div>
                <div class="service-content">
                    <h3>Home Decor</h3>
                    <p>Complete home decoration services to create beautiful, functional spaces that reflect your style and personality.</p>
                    <ul class="service-features">
                        <li>Space planning</li>
                        <li>Furniture arrangement</li>
                        <li>Accessory selection</li>
                        <li>Lighting design</li>
                    </ul>
                </div>
            </div>
            
            <div class="service-card">
                <div class="service-img">
                    <img src="{{ url_for('static', filename='images/portfolio/portrait1.png') }}" alt="Portrait Art">
                </div>
                <div class="service-content">
                    <h3>Portrait Art</h3>
                    <p>Professional custom portrait drawings capturing special moments, family memories, and individual personalities with artistic precision.</p>
                    <ul class="service-features">
                        <li>Pencil portraits</li>
                        <li>Family drawings</li>
                        <li>Individual portraits</li>
                        <li>Custom artwork</li>
                    </ul>
                </div>
            </div>
            
            <div class="service-card">
                <div class="service-img">
                    <img src="{{ url_for('static', filename='images/branding/bonnys_butchery_shop.png') }}" alt="Signage">
                </div>
                <div class="service-content">
                    <h3>Signage</h3>
                    <p>Professional signage services for businesses and homes, creating impactful visual communication solutions.</p>
                    <ul class="service-features">
                        <li>Business signage</li>
                        <li>Corporate branding</li>
                        <li>Custom lettering</li>
                        <li>Directional signs</li>
                    </ul>
                </div>
            </div>
            
            <div class="service-card">
                <div class="service-img">
                    <img src="https://images.unsplash.com/photo-1541961017774-22349e4a1262?ixlib=rb-4.0.3" alt="Interior Decorating">
                </div>
                <div class="service-content">
                    <h3>Interior Decorating</h3>
                    <p>Complete interior decorating services to transform your living spaces with style and functionality.</p>
                    <ul class="service-features">
                        <li>Room styling</li>
                        <li>Color schemes</li>
                        <li>Furniture placement</li>
                        <li>Décor accessories</li>
                    </ul>
                </div>
            </div>
            
            <div class="service-card">
                <div class="service-img">
                    <img src="{{ url_for('static', filename='images/portfolio/graduation_portrait_3.jpg') }}" alt="Graduation Portrait Drawing">
                </div>
                <div class="service-content">
                    <h3>Portraits Drawing</h3>
                    <p>Professional pencil work and coloured drawings capturing memories and personalities with artistic precision.</p>
                    <ul class="service-features">
                        <li>Graduation portraits</li>
                        <li>Academic artwork</li>
                        <li>Professional portraits</li>
                        <li>Custom compositions</li>
                    </ul>
                </div>
            </div>
            
            <div class="service-card">
                <div class="service-img">
                     <img src="{{ url_for('static', filename='images/portfolio/graduation_portrait_framed.jpg') }}" alt="Graduation Portrait Drawing">
                </div>
                <div class="service-content">
                    <h3>Picture Framing</h3>
                    <p>Custom picture framing services to preserve and display your precious memories and artwork beautifully.</p>
                    <ul class="service-features">
                        <li>Custom frames</li>
                        <li>Matting services</li>
                        <li>Glass protection</li>
                        <li>Professional mounting</li>
                    </ul>
                </div>
            </div>
            
            <div class="service-card">
                <div class="service-img">
                    <img src="https://images.unsplash.com/photo-1562259949-e8e7689d7828?ixlib=rb-4.0.3" alt="House Painting">
                </div>
                <div class="service-content">
                    <h3>House Painting</h3>
                    <p>Complete house painting services for both interior and exterior surfaces using premium quality paints.</p>
                    <ul class="service-features">
                        <li>Interior walls</li>
                        <li>Exterior painting</li>
                        <li>Surface preparation</li>
                        <li>Quality finishes</li>
                    </ul>
                </div>
            </div>
            
            <div class="service-card">
                <div class="service-img">
                    <img src="{{ url_for('static', filename='images/arts/blue_bowling_pins_sculpture.jpg') }}" alt="Custom Sculptures">
                </div>
                <div class="service-content">
                    <h3>Custom Sculptures</h3>
                    <p>Creative sculptural artwork and custom decorative pieces for unique artistic expression and interior enhancement.</p>
                    <ul class="service-features">
                        <li>Decorative sculptures</li>
                        <li>Custom art pieces</li>
                        <li>Creative installations</li>
                        <li>Artistic transformations</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Featured Work Carousel -->
<section class="section featured-carousel" id="featured-work">
    <div class="container">
        <div class="section-title">
            <h2>Featured Artwork</h2>
            <p>Recent masterpieces by EnKart30</p>
        </div>
        
        <div class="carousel-container">
            <div class="carousel-wrapper">
                <div class="carousel-slide active">
                    <img src="{{ url_for('static', filename='images/portfolio/graduation_portrait_1.jpg') }}" alt="Graduation Portrait - Academic Excellence">
                    <div class="slide-caption">
                        <h3>Academic Achievement Portrait</h3>
                        <p>Professional graduation portrait with classic academic styling and detailed shading</p>
                    </div>
                </div>
                <div class="carousel-slide">
                    <img src="{{ url_for('static', filename='images/portfolio/graduation_portrait_2.jpg') }}" alt="Graduation Portrait - Colorful Academic Robes">
                    <div class="slide-caption">
                        <h3>Vibrant Graduation Portrait</h3>
                        <p>Colorful academic portrait featuring traditional graduation attire with artistic flair</p>
                    </div>
                </div>
                <div class="carousel-slide">
                    <img src="{{ url_for('static', filename='images/portfolio/graduation_portrait_3.jpg') }}" alt="Graduation Portrait - Pink Background">
                    <div class="slide-caption">
                        <h3>Elegant Academic Portrait</h3>
                        <p>Sophisticated graduation portrait with warm pink background and professional finish</p>
                    </div>
                </div>
                <div class="carousel-slide">
                    <img src="{{ url_for('static', filename='images/portfolio/graduation_portrait_4.jpg') }}" alt="Graduation Portrait - Academic Excellence">
                    <div class="slide-caption">
                        <h3>Distinguished Graduate</h3>
                        <p>Masterful portrait capturing the pride and achievement of academic success</p>
                    </div>
                </div>
                <div class="carousel-slide">
                    <img src="{{ url_for('static', filename='images/portfolio/graduation_portrait_framed.jpg') }}" alt="Framed Graduation Portrait">
                    <div class="slide-caption">
                        <h3>Professionally Framed Masterpiece</h3>
                        <p>Complete artwork presentation with professional framing and gallery-quality finish</p>
                    </div>
                </div>
                <div class="carousel-slide">
                    <img src="{{ url_for('static', filename='images/arts/mzee_ndungu_himani_portrait_pencil.jpg') }}" alt="Historical Portrait">
                    <div class="slide-caption">
                        <h3>Historical Portrait Excellence</h3>
                        <p>Detailed pencil portrait showcasing masterful technique in capturing historical figures</p>
                    </div>
                </div>
                <div class="carousel-slide">
                    <img src="{{ url_for('static', filename='images/arts/african_leader_portrait_mural.png') }}" alt="African Leadership Mural">
                    <div class="slide-caption">
                        <h3>Cultural Heritage Mural</h3>
                        <p>Powerful mural artwork celebrating African leadership and natural landscape beauty</p>
                    </div>
                </div>
            </div>
            
            <button class="carousel-btn carousel-prev" id="carouselPrev">
                <i class="fas fa-chevron-left"></i>
            </button>
            <button class="carousel-btn carousel-next" id="carouselNext">
                <i class="fas fa-chevron-right"></i>
            </button>
            
            <div class="carousel-indicators">
                <span class="indicator active" data-slide="0"></span>
                <span class="indicator" data-slide="1"></span>
                <span class="indicator" data-slide="2"></span>
                <span class="indicator" data-slide="3"></span>
                <span class="indicator" data-slide="4"></span>
                <span class="indicator" data-slide="5"></span>
                <span class="indicator" data-slide="6"></span>
            </div>
        </div>
    </div>
</section>

<!-- Murals Section -->
<section class="section murals-carousel" id="murals">
    <div class="container">
        <div class="section-title">
            <h2>Wall Murals</h2>
            <p>Transform your space with stunning custom wall murals</p>
        </div>
        
        <div class="carousel-container murals-carousel-container">
            <div class="carousel-wrapper murals-carousel-wrapper">
                <div class="carousel-slide active">
                    <img src="{{ url_for('static', filename='images/murals/nighttime_city_mural.jpg') }}" alt="Nighttime City Street Mural">
                    <div class="slide-caption">
                        <h3>Nighttime City Scene</h3>
                        <p>Atmospheric nighttime cityscape with detailed architectural elements and warm lighting effects</p>
                    </div>
                </div>
                <div class="carousel-slide">
                    <img src="{{ url_for('static', filename='images/murals/football_stadium_mural_1.jpg') }}" alt="Football Stadium Mural - Action Scene">
                    <div class="slide-caption">
                        <h3>Football Stadium Action</h3>
                        <p>Dynamic football stadium mural featuring players in action with stadium crowd atmosphere</p>
                    </div>
                </div>
                <div class="carousel-slide">
                    <img src="{{ url_for('static', filename='images/murals/football_stadium_mural_2.jpg') }}" alt="Football Stadium Mural - Player Detail">
                    <div class="slide-caption">
                        <h3>Sports Action Detail</h3>
                        <p>Close-up view of football players with detailed facial features and team uniforms</p>
                    </div>
                </div>
                <div class="carousel-slide">
                    <img src="{{ url_for('static', filename='images/murals/football_stadium_mural_3.jpg') }}" alt="Football Stadium Mural - Wide View">
                    <div class="slide-caption">
                        <h3>Stadium Panorama</h3>
                        <p>Wide-angle stadium mural showing the full scale and immersive sports environment</p>
                    </div>
                </div>
                <div class="carousel-slide">
                    <img src="{{ url_for('static', filename='images/murals/hot_air_balloon_mural_1.jpg') }}" alt="Hot Air Balloon Sky Scene">
                    <div class="slide-caption">
                        <h3>Sky Adventure Scene</h3>
                        <p>Whimsical hot air balloon mural with colorful balloons and dreamy sky atmosphere</p>
                    </div>
                </div>
                <div class="carousel-slide">
                    <img src="{{ url_for('static', filename='images/murals/hot_air_balloon_mural_2.jpg') }}" alt="Hot Air Balloon Detailed View">
                    <div class="slide-caption">
                        <h3>Balloon Details</h3>
                        <p>Detailed view of decorative hot air balloons with animals and festive elements</p>
                    </div>
                </div>
                <div class="carousel-slide">
                    <img src="{{ url_for('static', filename='images/murals/sky_clouds_mural.jpg') }}" alt="Sky and Clouds Mural">
                    <div class="slide-caption">
                        <h3>Peaceful Sky Scene</h3>
                        <p>Serene sky mural with realistic clouds and hot air balloons creating a calm atmosphere</p>
                    </div>
                </div>
            </div>
            
            <button class="carousel-btn carousel-prev" id="muralsCarouselPrev">
                <i class="fas fa-chevron-left"></i>
            </button>
            <button class="carousel-btn carousel-next" id="muralsCarouselNext">
                <i class="fas fa-chevron-right"></i>
            </button>
            
            <div class="carousel-indicators murals-indicators">
                <span class="indicator active" data-slide="0"></span>
                <span class="indicator" data-slide="1"></span>
                <span class="indicator" data-slide="2"></span>
                <span class="indicator" data-slide="3"></span>
                <span class="indicator" data-slide="4"></span>
                <span class="indicator" data-slide="5"></span>
                <span class="indicator" data-slide="6"></span>
            </div>
        </div>
    </div>
</section>

<!-- Video Gallery Section -->
<section class="section video-gallery" id="videos">
    <div class="container">
        <div class="section-title">
            <h2>Project Videos</h2>
            <p>Watch our work in action - behind the scenes and finished projects</p>
        </div>
        
        <div class="video-carousel-container">
            <div class="video-carousel-wrapper">
                <div class="video-slide active">
                    <div class="video-item">
                        <video controls preload="metadata" poster="">
                            <source src="{{ url_for('static', filename='videos/yesssss_1749553950454.mp4') }}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                        <div class="video-caption">
                            <h4>Project Showcase</h4>
                            <p>Experience our creative process and attention to detail</p>
                        </div>
                    </div>
                </div>
                
                <div class="video-slide">
                    <div class="video-item">
                        <video controls preload="metadata" poster="">
                            <source src="{{ url_for('static', filename='videos/enkart332_1749554343649.mp4') }}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                        <div class="video-caption">
                            <h4>EnKart30 Highlights</h4>
                            <p>Discover the quality and craftsmanship we bring to every project</p>
                        </div>
                    </div>
                </div>
                
                <div class="video-slide">
                    <div class="video-item">
                        <video controls preload="metadata" poster="">
                            <source src="{{ url_for('static', filename='videos/enkarttt_1749554357496.mp4') }}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                        <div class="video-caption">
                            <h4>Creative Process</h4>
                            <p>See how we transform spaces with artistic vision and expertise</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <button class="carousel-btn carousel-prev" id="videoCarouselPrev">
                <i class="fas fa-chevron-left"></i>
            </button>
            <button class="carousel-btn carousel-next" id="videoCarouselNext">
                <i class="fas fa-chevron-right"></i>
            </button>
            
            <div class="carousel-indicators video-indicators">
                <span class="indicator active" data-slide="0"></span>
                <span class="indicator" data-slide="1"></span>
                <span class="indicator" data-slide="2"></span>
            </div>
        </div>
    </div>
</section>

<!-- Branding & Signage Section -->
<section class="section branding-section" id="branding">
    <div class="container">
        <div class="section-title">
            <h2>Professional Signage & Branding</h2>
            <p>Custom signage solutions for businesses - from design to installation</p>
        </div>
        
        <div class="branding-carousel-container">
            <div class="branding-carousel-wrapper">
                <div class="branding-slide active">
                    <div class="branding-item">
                        <div class="branding-image">
                            <img src="{{ url_for('static', filename='images/branding/meat_shop_signage.jpg') }}" alt="Professional Meat Shop Signage">
                            <div class="branding-overlay">
                                <div class="branding-info">
                                    <h4>Outdoor Business Signage</h4>
                                    <p>Weather-resistant displays for retail businesses</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="branding-slide">
                    <div class="branding-item">
                        <div class="branding-image">
                            <img src="{{ url_for('static', filename='images/branding/divaza_salon_banner.jpg') }}" alt="Divaza Beauty Salon Banner Design">
                            <div class="branding-overlay">
                                <div class="branding-info">
                                    <h4>Beauty Salon Branding</h4>
                                    <p>Complete brand identity and promotional materials</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="branding-slide">
                    <div class="branding-item">
                        <div class="branding-image">
                            <img src="{{ url_for('static', filename='images/branding/divaza_salon_banner_alt.jpg') }}" alt="Divaza Salon Alternative Banner">
                            <div class="branding-overlay">
                                <div class="branding-info">
                                    <h4>Service Menu Design</h4>
                                    <p>Professional service listings and pricing displays</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="branding-slide">
                    <div class="branding-item">
                        <div class="branding-image">
                            <img src="{{ url_for('static', filename='images/branding/hollywood_nails_logo.png') }}" alt="Hollywood Nails Logo Design">
                            <div class="branding-overlay">
                                <div class="branding-info">
                                    <h4>Logo Design</h4>
                                    <p>Creative logo design for nail salon businesses</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="branding-slide">
                    <div class="branding-item">
                        <div class="branding-image">
                            <img src="{{ url_for('static', filename='images/branding/presidential_plaque.jpg') }}" alt="Presidential Commemoration Plaque">
                            <div class="branding-overlay">
                                <div class="branding-info">
                                    <h4>Commemoration Plaques</h4>
                                    <p>Official government and institutional plaques</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="branding-slide">
                    <div class="branding-item">
                        <div class="branding-image">
                            <img src="{{ url_for('static', filename='images/branding/bonnys_butchery_shop.png') }}" alt="Bonny's Butchery Shop Front">
                            <div class="branding-overlay">
                                <div class="branding-info">
                                    <h4>Shop Front Branding</h4>
                                    <p>Complete storefront design and signage solutions</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <button class="carousel-btn carousel-prev" id="brandingCarouselPrev">
                <i class="fas fa-chevron-left"></i>
            </button>
            <button class="carousel-btn carousel-next" id="brandingCarouselNext">
                <i class="fas fa-chevron-right"></i>
            </button>
            
            <div class="carousel-indicators branding-indicators">
                <span class="indicator active" data-slide="0"></span>
                <span class="indicator" data-slide="1"></span>
                <span class="indicator" data-slide="2"></span>
                <span class="indicator" data-slide="3"></span>
                <span class="indicator" data-slide="4"></span>
                <span class="indicator" data-slide="5"></span>
            </div>
        </div>
        
        <div class="branding-features">
            <div class="feature-grid">
                <div class="feature-item">
                    <i class="fas fa-paint-brush"></i>
                    <h4>Custom Design</h4>
                    <p>Tailored branding solutions that reflect your business identity</p>
                </div>
                <div class="feature-item">
                    <i class="fas fa-palette"></i>
                    <h4>Color Consultation</h4>
                    <p>Professional color schemes that attract and engage customers</p>
                </div>
                <div class="feature-item">
                    <i class="fas fa-tools"></i>
                    <h4>Installation Service</h4>
                    <p>Complete installation and mounting for all signage types</p>
                </div>
                <div class="feature-item">
                    <i class="fas fa-shield-alt"></i>
                    <h4>Durable Materials</h4>
                    <p>Weather-resistant materials built to last in Kenya's climate</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Portfolio Section -->
<section class="section portfolio" id="portfolio">
    <div class="container">
        <div class="section-title">
            <h2>Our Portfolio</h2>
            <p>Recent projects across Kenya</p>
        </div>
        
        <div class="portfolio-filters">
            <button class="filter-btn active" data-filter="all">All Projects</button>
            <button class="filter-btn" data-filter="portraits">Portrait Art</button>
            <button class="filter-btn" data-filter="painting">Paintings</button>
            <button class="filter-btn" data-filter="murals">Murals</button>
            <button class="filter-btn" data-filter="sculptures">Sculptures</button>
            <button class="filter-btn" data-filter="interior">Interior Design</button>
            <button class="filter-btn" data-filter="abstract">Abstract Art</button>
        </div>
        
        <div class="portfolio-grid">
            <div class="portfolio-item" data-category="portraits">
                <img src="{{ url_for('static', filename='images/portfolio/graduation_portrait_4.jpg') }}" alt="Distinguished Graduate Portrait">
                <div class="portfolio-overlay">
                    <h4>Distinguished Graduate</h4>
                    <p>Masterful portrait capturing the pride and achievement of academic success</p>
                </div>
            </div>
            
            </div>
            
            <div class="portfolio-item" data-category="portraits">
                <img src="{{ url_for('static', filename='images/portfolio/comparison_portrait.png') }}" alt="Portrait Comparison">
                <div class="portfolio-overlay">
                    <h4>Photo to Portrait</h4>
                    <p>Stunning transformation from photograph to detailed pencil artwork</p>
                </div>
            </div>
            
            <div class="portfolio-item" data-category="painting">
                <img src="{{ url_for('static', filename='images/portfolio/couple_painting.png') }}" alt="Couple Painting">
                <div class="portfolio-overlay">
                    <h4>Couple Portrait Painting</h4>
                    <p>Beautiful colored portrait with scenic African landscape background</p>
                </div>
            </div>
            
            <div class="portfolio-item" data-category="portraits">
                <img src="{{ url_for('static', filename='images/portfolio/blonde_portrait.png') }}" alt="Blonde Portrait">
                <div class="portfolio-overlay">
                    <h4>Contemporary Portrait</h4>
                    <p>Modern portrait style with precise detail and artistic flair</p>
                </div>
            </div>
            
            <div class="portfolio-item" data-category="portraits">
                <img src="{{ url_for('static', filename='images/portfolio/hat_portrait.png') }}" alt="Hat Portrait">
                <div class="portfolio-overlay">
                    <h4>Character Portrait</h4>
                    <p>Expressive portrait capturing personality and style with attention to detail</p>
                </div>
            </div>
            
            <div class="portfolio-item" data-category="portraits">
                <img src="{{ url_for('static', filename='images/portfolio/school_portrait.png') }}" alt="School Portrait">
                <div class="portfolio-overlay">
                    <h4>Young Professional</h4>
                    <p>Clean, professional portrait perfect for academic or business use</p>
                </div>
            </div>
            
            <div class="portfolio-item" data-category="portraits">
                <img src="{{ url_for('static', filename='images/portfolio/female_portrait.png') }}" alt="Female Portrait">
                <div class="portfolio-overlay">
                    <h4>Expressive Portrait</h4>
                    <p>Powerful portrait showcasing emotion and artistic skill</p>
                </div>
            </div>
            
            <div class="portfolio-item" data-category="portraits">
                <img src="{{ url_for('static', filename='images/portfolio/male_sketch.png') }}" alt="Male Sketch">
                <div class="portfolio-overlay">
                    <h4>Contemporary Sketch</h4>
                    <p>Modern portrait sketch with excellent proportions and detail</p>
                </div>
            </div>
            
            <div class="portfolio-item" data-category="abstract">
                <img src="{{ url_for('static', filename='images/portfolio/abstract_art.png') }}" alt="Abstract Art">
                <div class="portfolio-overlay">
                    <h4>Abstract Figures</h4>
                    <p>Creative abstract artwork exploring form and human connection</p>
                </div>
            </div>
            
            <div class="portfolio-item" data-category="interior">
                <img src="{{ url_for('static', filename='images/portfolio/wall_art.png') }}" alt="Wall Art Installation">
                <div class="portfolio-overlay">
                    <h4>Wall Art Installation</h4>
                    <p>Beautiful wall art display enhancing modern living space</p>
                </div>
            </div>
            
            <div class="portfolio-item" data-category="painting">
                <img src="{{ url_for('static', filename='images/portfolio/bird_artwork.png') }}" alt="Bird Artwork">
                <div class="portfolio-overlay">
                    <h4>Nature Art Series</h4>
                    <p>Colorful bird and floral artwork perfect for home decoration</p>
                </div>
            </div>
            
            <!-- New Artworks -->
            <div class="portfolio-item" data-category="murals">
                <img src="{{ url_for('static', filename='images/arts/african_leader_portrait_mural.png') }}" alt="African Leader Portrait Mural">
                <div class="portfolio-overlay">
                    <h4>African Leadership Mural</h4>
                    <p>Powerful mural featuring an African leader in natural landscape setting with traditional elements</p>
                </div>
            </div>
            
            <div class="portfolio-item" data-category="portraits">
                <img src="{{ url_for('static', filename='images/arts/mzee_ndungu_himani_portrait_pencil.jpg') }}" alt="Mzee Ndungu Himani Portrait">
                <div class="portfolio-overlay">
                    <h4>Mzee Ndungu Himani Portrait</h4>
                    <p>Detailed pencil portrait of Mzee Ndungu Himani (1910-1995) with exceptional realism and shading</p>
                </div>
            </div>
            
            <div class="portfolio-item" data-category="portraits">
                <img src="{{ url_for('static', filename='images/arts/mzee_ndungu_himani_portrait_detailed.jpg') }}" alt="Mzee Ndungu Himani Detailed Portrait">
                <div class="portfolio-overlay">
                    <h4>Detailed Portrait Study</h4>
                    <p>Close-up detailed pencil portrait showcasing masterful technique in facial features and expressions</p>
                </div>
            </div>
            
            <div class="portfolio-item" data-category="painting">
                <img src="{{ url_for('static', filename='images/arts/landscape_portrait_painting_progress_1.jpg') }}" alt="Landscape Portrait Painting in Progress">
                <div class="portfolio-overlay">
                    <h4>Landscape Portrait - Work in Progress</h4>
                    <p>African landscape portrait painting showing artistic process and vibrant color development</p>
                </div>
            </div>
            
            <div class="portfolio-item" data-category="painting">
                <img src="{{ url_for('static', filename='images/arts/landscape_portrait_painting_progress_2.jpg') }}" alt="Landscape Portrait Painting Detail">
                <div class="portfolio-overlay">
                    <h4>Landscape Portrait Detail</h4>
                    <p>Detailed view of landscape portrait featuring figure integration with natural environment</p>
                </div>
            </div>
            
            <div class="portfolio-item" data-category="portraits">
                <img src="{{ url_for('static', filename='images/arts/framed_portrait_drawing.jpg') }}" alt="Professional Framed Portrait">
                <div class="portfolio-overlay">
                    <h4>Professional Framed Portrait</h4>
                    <p>Expertly drawn and professionally framed portrait showcasing complete artwork presentation</p>
                </div>
            </div>
            
            <div class="portfolio-item" data-category="sculptures">
                <img src="{{ url_for('static', filename='images/arts/blue_bowling_pins_sculpture.jpg') }}" alt="Blue Bowling Pins Sculpture">
                <div class="portfolio-overlay">
                    <h4>Blue Bowling Pin Sculptures</h4>
                    <p>Creative sculptural work transforming everyday objects into artistic pieces with vibrant blue finish</p>
                </div>
            </div>
            
            <div class="portfolio-item" data-category="sculptures">
                <img src="{{ url_for('static', filename='images/arts/white_bowling_pins_collection.jpg') }}" alt="White Bowling Pins Collection">
                <div class="portfolio-overlay">
                    <h4>Bowling Pin Art Collection</h4>
                    <p>Artistic collection of customized bowling pins showcasing versatility in sculptural art forms</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials Section -->
<section class="section testimonials" id="testimonials">
    <div class="container">
        <div class="section-title">
            <h2>Client Testimonials</h2>
            <p>What our clients across Kenya say about us</p>
        </div>
        <div class="testimonials-container">
            <div class="testimonial-card">
                <div class="testimonial-content">
                    "EnKart30 transformed our home in Westlands completely. Their attention to detail and professional approach made the entire process smooth and enjoyable. Highly recommended!"
                </div>
                <div class="testimonial-author">
                    <div class="author-info">
                        <h5>Sarah Njoki</h5>
                        <span>Westlands Resident</span>
                    </div>
                </div>
            </div>
            
            <div class="testimonial-card">
                <div class="testimonial-content">
                    "The painting job was exceptional. They completed our 3-bedroom apartment on time and within budget. The quality of work exceeded our expectations."
                </div>
                <div class="testimonial-author">
                    <div class="author-info">
                        <h5>David Kimani</h5>
                        <span>Satisfied Customer</span>
                    </div>
                </div>
            </div>
            
            <div class="testimonial-card">
                <div class="testimonial-content">
                    "Professional, reliable, and creative. EnKart30 helped us design our dream living room. The furniture selection and color coordination were perfect."
                </div>
                <div class="testimonial-author">
                    <div class="author-info">
                        <h5>Grace Wanjiku</h5>
                        <span>Happy Client</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section class="section" id="contact">
    <div class="container">
        <div class="section-title">
            <h2>Get In Touch</h2>
            <p>Ready to transform your home? Contact us today!</p>
        </div>
        <div class="contact-container">
            <div class="contact-info">
                <h3>Contact Information</h3>
                <p>Reach out to us for a free consultation and quote. We're here to help bring your vision to life.</p>
                
                <div class="contact-details">
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div>
                            <h5>Location</h5>
                            <p>Westlands, Nairobi, Kenya</p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-phone"></i>
                        </div>
                        <div>
                            <h5>Phone</h5>
                            <p><a href="tel:+254721740913">+254 721 740 913</a></p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fab fa-whatsapp"></i>
                        </div>
                        <div>
                            <h5>WhatsApp</h5>
                            <p><a href="https://wa.me/254721740913" target="_blank">Chat with us</a></p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div>
                            <h5>Email</h5>
                            <p>info@enkart30.com</p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div>
                            <h5>Working Hours</h5>
                            <p>Monday - Saturday: 24 Hours<br>
                               Sunday: Closed</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="contact-form">
                <form method="POST" action="{{ url_for('contact') }}">
                    <div class="form-group">
                        <input type="text" name="name" placeholder="Your Name *" required>
                    </div>
                    <div class="form-group">
                        <input type="email" name="email" placeholder="Your Email *" required>
                    </div>
                    <div class="form-group">
                        <input type="tel" name="phone" placeholder="Phone Number">
                    </div>
                    <div class="form-group">
                        <select name="service">
                            <option value="">Select Service</option>
                            <option value="interior-painting">Interior Painting</option>
                            <option value="home-decor">Home Decor</option>
                            <option value="furniture-design">Furniture Design</option>
                            <option value="home-renovation">Home Renovation</option>
                            <option value="consultation">Free Consultation</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <textarea name="message" placeholder="Tell us about your project *" required></textarea>
                    </div>
                    <button type="submit" class="btn">Send Message</button>
                </form>
            </div>
        </div>
    </div>
</section>
{% endblock %}
