n


<script type="text/javascript">
        var gk_isXlsx = false;
        var gk_xlsxFileLookup = {};
        var gk_fileData = {};
        function filledCell(cell) {
          return cell !== '' && cell != null;
        }
        function loadFileData(filename) {
        if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
            try {
                var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
                var firstSheetName = workbook.SheetNames[0];
                var worksheet = workbook.Sheets[firstSheetName];

                // Convert sheet to JSON to filter blank rows
                var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
                // Filter out blank rows (rows where all cells are empty, null, or undefined)
                var filteredData = jsonData.filter(row => row.some(filledCell));

                // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
                var headerRowIndex = filteredData.findIndex((row, index) =>
                  row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
                );
                // Fallback
                if (headerRowIndex === -1 || headerRowIndex > 25) {
                  headerRowIndex = 0;
                }

                // Convert filtered JSON back to CSV
                var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
                csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
                return csv;
            } catch (e) {
                console.error(e);
                return "";
            }
        }
        return gk_fileData[filename] || "";
        }
        </script>o<script type="text/javascript">
        var gk_isXlsx = false;
        var gk_xlsxFileLookup = {};
        var gk_fileData = {};
        function filledCell(cell) {
          return cell !== '' && cell != null;
        }
        function loadFileData(filename) {
        if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
            try {
                var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
                var firstSheetName = workbook.SheetNames[0];
                var worksheet = workbook.Sheets[firstSheetName];

                // Convert sheet to JSON to filter blank rows
                var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
                // Filter out blank rows (rows where all cells are empty, null, or undefined)
                var filteredData = jsonData.filter(row => row.some(filledCell));

                // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
                var headerRowIndex = filteredData.findIndex((row, index) =>
                  row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
                );
                // Fallback
                if (headerRowIndex === -1 || headerRowIndex > 25) {
                  headerRowIndex = 0;
                }

                // Convert filtered JSON back to CSV
                var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
                csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
                return csv;
            } catch (e) {
                console.error(e);
                return "";
            }
        }
        return gk_fileData[filename] || "";
        }
        </script><script type="text/javascript">
        var gk_isXlsx = false;
        var gk_xlsxFileLookup = {};
        var gk_fileData = {};
        function filledCell(cell) {
          return cell !== '' && cell != null;
        }
        function loadFileData(filename) {
        if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
            try {
                var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
                var firstSheetName = workbook.SheetNames[0];
                var worksheet = workbook.Sheets[firstSheetName];

                // Convert sheet to JSON to filter blank rows
                var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
                // Filter out blank rows (rows where all cells are empty, null, or undefined)
                var filteredData = jsonData.filter(row => row.some(filledCell));

                // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
                var headerRowIndex = filteredData.findIndex((row, index) =>
                  row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
                );
                // Fallback
                if (headerRowIndex === -1 || headerRowIndex > 25) {
                  headerRowIndex = 0;
                }

                // Convert filtered JSON back to CSV
                var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
                csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
                return csv;
            } catch (e) {
                console.error(e);
                return "";
            }
        }
        return gk_fileData[filename] || "";
        }
</script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="enpro - Supplier of Mascot Workwear and Petzl Safety Gear">
    <meta name="keywords" content="workwear, safety gear, Mascot, Petzl, supplier, enpro">
    <meta name="author" content="enpro Team">
    <title>Enpro - Home</title>

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="/assets/assets/img/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/assets/assets/img/favicon-16x16.png" sizes="16x16">
    <link rel="shortcut icon" href="/assets/assets/img/favicon-32x32.png">

    <!-- CSS Assets -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-c42qTSw/wiW5tT5/JXS5OQ1qT3N0eS2J+Q9Mw2O9CWkXQV5d7eC0H7fJ9r5o1eMw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/assets/css/style.css">

    
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg fixed-top">
        <div class="container">
            <a href="/" class="navbar-brand d-flex align-items-center">
                <img src="/assets/img/logo/logo.png" alt="Logo" class="logo-img" style="height: 100px; transform: scale(3.5); object-fit: contain;">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto align-items-center">
                    <li class="nav-item mx-2">
                        <a href="/" class="nav-link nav-link-custom">Home</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a href="/about" class="nav-link nav-link-custom">About Us</a>
                    </li>
                    <li class="nav-item mx-2 dropdown">
                        <a href="/products" class="nav-link nav-link-custom dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                            Products
                        </a>
                        <ul class="dropdown-menu dropdown-menu-custom">
                            <!-- Mascot Workwear Categories -->
                            <li class="dropdown-header">Mascot Workwear</li>
                            
                                <li><a class="dropdown-item" href="/products/accessories">accessories</a></li>
                            
                                <li><a class="dropdown-item" href="/products/jackets">jackets</a></li>
                            
                                <li><a class="dropdown-item" href="/products/overalls">Overalls</a></li>
                            
                                <li><a class="dropdown-item" href="/products/polo-shirts">polo shirts</a></li>
                            
                                <li><a class="dropdown-item" href="/products/safety-footwear">safety footwear</a></li>
                            
                                <li><a class="dropdown-item" href="/products/shirts">shirts</a></li>
                            
                                <li><a class="dropdown-item" href="/products/softshell-jacket">Softshell Jacket</a></li>
                            
                                <li><a class="dropdown-item" href="/products/trousers">trousers</a></li>
                            
                                <li><a class="dropdown-item" href="/products/t-shirts">t-shirts</a></li>
                            
                            <!-- Petzl Safety Gear Categories -->
                            <li class="dropdown-header">Petzl Safety Gear</li>
                            
                                <li><a class="dropdown-item" href="/products/accessories">accessories</a></li>
                            
                                <li><a class="dropdown-item" href="/products/carabiners">carabiners</a></li>
                            
                                <li><a class="dropdown-item" href="/products/harnesses">harnesses</a></li>
                            
                                <li><a class="dropdown-item" href="/products/helmets">helmets</a></li>
                            
                                <li><a class="dropdown-item" href="/products/kits">Kits</a></li>
                            
                                <li><a class="dropdown-item" href="/products/lanyards">lanyards</a></li>
                            
                                <li><a class="dropdown-item" href="/products/ropes">ropes</a></li>
                            
                                <li><a class="dropdown-item" href="/products/spare-parts-lighting">Spare parts Lighting</a></li>
                            
                        </ul>
                    </li>
                    <li class="nav-item mx-2">
                        <a href="/blog" class="nav-link nav-link-custom">Latest</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a href="/contact" class="nav-link nav-link-custom">Contact Us</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a href="/products" class="btn btn-custom shop-now">Get a Quote</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="mt-5">
        
            
        
        
    <!-- Hero Section -->
    <section class="hero-area" data-background="/assets/img/hero/pexels-artempodrez-5726810.jpg">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 text-center text-lg-start wow fadeInLeft" data-wow-delay="0.2s">
                    <h1 class="hero-title">We Equip, You Conquer</h1>
                    <p class="lead fw-bold text-primary bg-light bg-opacity-75 p-2 rounded wow fadeInUp" data-wow-delay="0.4s">
                        Authorised Distributors of Mascot Workwear & Petzl Safety Solutions Across Africa
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- About Us Section -->
    <section class="about-section py-5">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 wow fadeInLeft" data-wow-delay="0.2s">
                    <h2 class="section-title mb-4">Discover Enpro</h2>
                    <p>We specialise in the distribution of premium safety workwear and protective accessories, sourced exclusively from trusted, certified manufacturers such as Mascot International and Petzl International. Our extensive product range is designed to meet the diverse needs of various industrial sectors, delivering exceptional protection, long-lasting durability, and all-day comfort, ensuring your workforce stays safe, confident, and ready for any challenge.</p>
                    <p>Our team provides expert guidance in selecting the most suitable protective workwear and accessories tailored to your specific industry requirements. Whether you're launching a new operation or enhancing existing safety standards, we deliver customised recommendations to ensure compliance and optimal protection for your workforce.<p>
                    <a href="/about" class="btn btn-outline-primary">Learn More</a>
                </div>
                <div class="col-lg-6 wow fadeInRight" data-wow-delay="0.4s">
                    <img src="/assets/img/about/winnew.jpg" class="img-fluid rounded" alt="About Enpro">
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section class="services-section py-5 bg-light">
        <div class="container">
            <h2 class="section-title text-center mb-4 wow fadeInUp">Our Services</h2>
            <div class="row">
                <div class="col-md-6 col-lg-3 mb-4 wow fadeInUp" data-wow-delay="0.2s">
                    <div class="card h-100 shadow-sm text-center">
                        <div class="card-body">
                            <img src="/assets/img/about/protective1.jpg?t="
                                 class="mb-3" alt="Protective Workwear" style="height: 200px; object-fit: cover;">
                            <!-- Debug: Display service image path -->

                            <h5 class="card-title">Supply of Certified Protective Workwear & Accessories</h5>
                            <p class="card-text">Distributing high-quality safety workwear and accessories from Mascot and Petzl.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 mb-4 wow fadeInUp" data-wow-delay="0.4s">
                    <div class="card h-100 shadow-sm text-center">
                        <div class="card-body">
                            <img src="/assets/img/about/protect.jpg?t="
                                 class="mb-3" alt="Safety Consultations" style="height: 200px; object-fit: cover;">
                            <!-- Debug: Display service image path -->

                            <h5 class="card-title">Professional Consultations on Safety Solutions</h5>
                            <p class="card-text">Expert guidance on selecting protective workwear for industry needs.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 mb-4 wow fadeInUp" data-wow-delay="0.6s">
                    <div class="card h-100 shadow-sm text-center">
                        <div class="card-body">
                            <img src="/assets/img/about/container-6751623_640.jpg?t="
                                 class="mb-3" alt="Export Support" style="height: 200px; object-fit: cover;">
                            <!-- Debug: Display service image path -->

                            <h5 class="card-title">Export Support Across Africa</h5>
                            <p class="card-text">Assisting with seamless export procedures across Africa.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 mb-4 wow fadeInUp" data-wow-delay="0.8s">
                    <div class="card h-100 shadow-sm text-center">
                        <div class="card-body">
                            <img src="/assets/img/about/Custom-clearance-completed.jpg?t="
                                 class="mb-3" alt="Customs Clearance" style="height: 200px; object-fit: cover;">
                            <!-- Debug: Display service image path -->

                            <h5 class="card-title">Customs Clearance & Doorstep Delivery</h5>
                            <p class="card-text">Managing customs clearance and doorstep delivery in Kenya.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Featured Products Section -->
    <section class="product-section py-5">
        <div class="container">
            <h2 class="section-title text-center mb-4 wow fadeInUp">Featured Products</h2>
            <!-- Inquiry Modal -->
            <div class="modal fade" id="inquiryModal" tabindex="-1" aria-labelledby="inquiryModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="inquiryModalLabel">Inquire About <span id="inquiryProductName"></span></h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form id="inquiryForm" method="POST" action="">
                                
                                <div class="mb-3">
                                    <label for="name" class="form-label">Name</label>
                                    <input type="text" class="form-control" id="name" name="name" required>
                                </div>
                                <div class="mb-3">
                                    <label for="email" class="form-label">Email</label>
                                    <input type="email" class="form-control" id="email" name="email" required>
                                </div>
                                <div class="mb-3">
                                    <label for="phone" class="form-label">Phone Number</label>
                                    <input type="text" class="form-control" id="phone" name="phone" required>
                                </div>
                                <div class="mb-3">
                                    <label for="location" class="form-label">Location (Optional)</label>
                                    <input type="text" class="form-control" id="location" name="location">
                                </div>
                                <div class="mb-3">
                                    <label for="message" class="form-label">Message</label>
                                    <textarea class="form-control" id="message" name="message" rows="4" required></textarea>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                    <button type="submit" class="btn btn-primary">Send Inquiry</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                
                    <div class="col-md-3 col-sm-6 mb-4 wow fadeInUp" data-wow-delay="0.0s">
                        <div class="card h-100 shadow-sm">
                            <!-- Product image fetched from static/img/products or fallback to placeholder -->
                            <img src="/assets/img/products/21814-984-06_P24.png?t="
                                 class="card-img-top" alt="21814-984-06 Shirt" style="max-height: 150px; object-fit: cover;">
                            <!-- Debug: Display image_url for troubleshooting -->
                            <p class="text-muted small text-center">Image: 21814-984-06_P24.png</p>
                            <div class="card-body text-center">
                                <h5 class="card-title">21814-984-06 Shirt</h5>
                                <p class="card-text text-muted">Mascot</p>
                                <a href="https://www.mascotworkwear.com/en/mascot-frontline-21814-984/?_gl=1*9tnv1r*_up*MQ..*_ga*MTYxNDA5MzI3MS4xNzQ1NTE2MTk0*_ga_XTYLSF6346*MTc0NTUxNjE5NC4xLjAuMTc0NTUxNjIwMy4wLjAuODI3MTgzOTc4#06"
                                   class="btn btn-outline-primary" target="_blank">View Details</a>
                                <button type="button" class="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#inquiryModal"
                                        data-product-id="4" data-product-name="21814-984-06 Shirt">
                                    Inquire  
                                </button>
                            </div>
                        </div>
                    </div>
                
                    <div class="col-md-3 col-sm-6 mb-4 wow fadeInUp" data-wow-delay="0.2s">
                        <div class="card h-100 shadow-sm">
                            <!-- Product image fetched from static/img/products or fallback to placeholder -->
                            <img src="/assets/img/products/A010LC00-Clip-VERTEX-avant-droitarriere-gauche_LowRes.jpeg?t="
                                 class="card-img-top" alt="Petzl Vertex Vent Helmet A010CA" style="max-height: 150px; object-fit: cover;">
                            <!-- Debug: Display image_url for troubleshooting -->
                            <p class="text-muted small text-center">Image: A010LC00-Clip-VERTEX-avant-droitarriere-gauche_LowRes.jpeg</p>
                            <div class="card-body text-center">
                                <h5 class="card-title">Petzl Vertex Vent Helmet A010CA</h5>
                                <p class="card-text text-muted">Petzl</p>
                                <a href="https://www.petzl.com/INT/en/Professional/Helmets/VERTEX-VENT"
                                   class="btn btn-outline-primary" target="_blank">View Details</a>
                                <button type="button" class="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#inquiryModal"
                                        data-product-id="7" data-product-name="Petzl Vertex Vent Helmet A010CA">
                                    Inquire  
                                </button>
                            </div>
                        </div>
                    </div>
                
                    <div class="col-md-3 col-sm-6 mb-4 wow fadeInUp" data-wow-delay="0.4s">
                        <div class="card h-100 shadow-sm">
                            <!-- Product image fetched from static/img/products or fallback to placeholder -->
                            <img src="/assets/img/products/20192-959-010_P02.jpg?t="
                                 class="card-img-top" alt="20192-959-010 T-shirt" style="max-height: 150px; object-fit: cover;">
                            <!-- Debug: Display image_url for troubleshooting -->
                            <p class="text-muted small text-center">Image: 20192-959-010_P02.jpg</p>
                            <div class="card-body text-center">
                                <h5 class="card-title">20192-959-010 T-shirt</h5>
                                <p class="card-text text-muted">Mascot</p>
                                <a href="https://www.mascotworkwear.com/en/mascot-crossover-20192-959/?_gl=1*19cy2h0*_up*MQ..*_ga*OTA4MzAzNjk3LjE3NDYwNTI0NDI.*_ga_XTYLSF6346*MTc0NjA1MjQ0Mi4xLjAuMTc0NjA1MjUwNy4wLjAuMzQ0MTQyNTM5#010"
                                   class="btn btn-outline-primary" target="_blank">View Details</a>
                                <button type="button" class="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#inquiryModal"
                                        data-product-id="23" data-product-name="20192-959-010 T-shirt">
                                    Inquire  
                                </button>
                            </div>
                        </div>
                    </div>
                
                    <div class="col-md-3 col-sm-6 mb-4 wow fadeInUp" data-wow-delay="0.6000000000000001s">
                        <div class="card h-100 shadow-sm">
                            <!-- Product image fetched from static/img/products or fallback to placeholder -->
                            <img src="/assets/img/products/L052BA-GRILLON-HOOK_LowRes.jpeg?t="
                                 class="card-img-top" alt="GRILLON HOOK European version" style="max-height: 150px; object-fit: cover;">
                            <!-- Debug: Display image_url for troubleshooting -->
                            <p class="text-muted small text-center">Image: L052BA-GRILLON-HOOK_LowRes.jpeg</p>
                            <div class="card-body text-center">
                                <h5 class="card-title">GRILLON HOOK European version</h5>
                                <p class="card-text text-muted">Petzl</p>
                                <a href="https://www.petzl.com/NL/en/Professional/Lanyards-and-energy-absorbers/GRILLON-HOOK-European-version"
                                   class="btn btn-outline-primary" target="_blank">View Details</a>
                                <button type="button" class="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#inquiryModal"
                                        data-product-id="35" data-product-name="GRILLON HOOK European version">
                                    Inquire  
                                </button>
                            </div>
                        </div>
                    </div>
                
            </div>
            <div class="text-center mt-4">
                <a href="/products" class="btn btn-primary">See More</a>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section class="testimonials-section py-5">
        <div class="container">
            <h2 class="section-title text-center mb-4 wow fadeInUp">What Our Clients Say</h2>
            <div class="row">
                <div class="col-md-4 mb-4 wow fadeInUp" data-wow-delay="0.2s">
                    <div class="card h-100 shadow-sm text-center">
                        <div class="card-body">
                            <p class="card-text">"Enpro provided us with top-notch safety gear that transformed our workplace safety standards."</p>
                            <h6 class="card-title mt-3">Sarah K.</h6>
                            <p class="card-text text-muted">Construction Manager</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4 wow fadeInUp" data-wow-delay="0.4s">
                    <div class="card h-100 shadow-sm text-center">
                        <div class="card-body">
                            <p class="card-text">"Their workwear is durable and comfortable. The team was very responsive to our needs."</p>
                            <h6 class="card-title mt-3">James M.</h6>
                            <p class="card-text text-muted">Factory Supervisor</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4 wow fadeInUp" data-wow-delay="0.6s">
                    <div class="card h-100 shadow-sm text-center">
                        <div class="card-body">
                            <p class="card-text">"Fast delivery and excellent customer service. Highly recommend Enpro!"</p>
                            <h6 class="card-title mt-3">Emily R.</h6>
                            <p class="card-text text-muted">Procurement Officer</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Latest News Section -->
    <section class="blog-section py-5 bg-light">
        <div class="container">
            <h2 class="section-title text-center mb-4 wow fadeInUp">Latest News</h2>
            <div class="row">
                
                    <div class="col-md-4 col-sm-6 mb-4 wow fadeInUp" data-wow-delay="0.0s">
                        <div class="card h-100 shadow-sm">
                            <img src="/assets/img/blog/de38250b7483480abed84470a3b6734b.png"
                                 class="card-img-top" alt="Image for Light the Way: Why the Petzl NAO RL Is a Game-Changer in Trail Safety">
                            <div class="card-body">
                                <h5 class="card-title">Light The Way: Why the Petzl NAO RL Is a Game-Changer in Trail Safety</h5>
                                <p class="card-text">As outdoor and industrial professionals, we know that vision is safety. When the trail darkens or......</p>
                                <a href="/blog/Petzl%20Rechargeable%20Headlamps"
                                   class="btn btn-outline-primary">Read More</a>
                            </div>
                        </div>
                    </div>
                
                    <div class="col-md-4 col-sm-6 mb-4 wow fadeInUp" data-wow-delay="0.2s">
                        <div class="card h-100 shadow-sm">
                            <img src="/assets/img/blog/2196e3c3c9944a8b94e474c85a12aa4c.png"
                                 class="card-img-top" alt="Enpro Delivers">
                            <div class="card-body">
                                <h5 class="card-title">Elevating Safety Standards in Africa: Why Quality Workwear Matters More Than Ever</h5>
                                <p class="card-text">In today’s rapidly evolving industrial landscape, the importance of safety has never been greater......</p>
                                <a href="/blog/Championing%20safety%20work%20wear%20across%20the%20African%20Region"
                                   class="btn btn-outline-primary">Read More</a>
                            </div>
                        </div>
                    </div>
                
                    <div class="col-md-4 col-sm-6 mb-4 wow fadeInUp" data-wow-delay="0.4s">
                        <div class="card h-100 shadow-sm">
                            <img src="/assets/img/blog/45e552cb0ac149cd9397bc11b9ae7c5e.png"
                                 class="card-img-top" alt="hikerjackets">
                            <div class="card-body">
                                <h5 class="card-title">WHY the MASCOT® ACCELERATE JACKET IS A GAME-CHANGER FOR HIKERS IN KENYA.</h5>
                                <p class="card-text">🌍 Why This Matters for Hikers &amp; Explorers
Kenya offers diverse terrains. from the foggy slopes o......</p>
                                <a href="/blog/mascot%20product%2018001-249%20%20review"
                                   class="btn btn-outline-primary">Read More</a>
                            </div>
                        </div>
                    </div>
                
            </div>
            <div class="text-center mt-4">
                <a href="/blog" class="btn btn-primary">View All Posts</a>
            </div>
        </div>
    </section>

    <!-- Contact Us Section -->
    <section class="contact-section py-5">
        <div class="container">
            <h2 class="section-title text-center mb-4 wow fadeInUp">Contact Us</h2>
            <div class="row">
                <div class="col-lg-6 mb-4 wow fadeInLeft" data-wow-delay="0.2s">
                    <form method="POST" action="/contact" class="contact-form">
                        <!-- CSRF Token -->
                        

                        <div class="mb-3">
                            <label for="name" class="form-label"><label for="name">Name</label></label>
                            <input class="form-control" id="name" maxlength="150" name="name" placeholder="Your Name" required type="text" value="">
                            
                        </div>

                        <div class="mb-3">
                            <label for="email" class="form-label"><label for="email">Email</label></label>
                            <input class="form-control" id="email" name="email" placeholder="Your Email" required type="text" value="">
                            
                        </div>

                        <div class="mb-3">
                            <label for="message" class="form-label"><label for="message">Message</label></label>
                            <textarea class="form-control" id="message" name="message" placeholder="Your Message" required rows="5">
</textarea>
                            
                        </div>

                        <button type="submit" class="btn btn-primary">Send</button>
                    </form>
                </div>

                <div class="col-lg-6 wow fadeInRight" data-wow-delay="0.4s">
                    <h5>Contact Details</h5>
                    <p><i class="fas fa-map-marker-alt me-2"></i> Mbandu Complex, off Langata road, Near Galleria Mall, 4th Floor, room NO.5</p>
                    <p><i class="fas fa-phone-alt me-2"></i> +254732727414 / +254721554290</p>
                    <p><i class="fas fa-envelope me-2"></i> info@enpro.co.ke</p>
                    <div class="mt-4">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.743379300845!2d36.86660071475318!3d-1.333047799048093!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x182f10e1f097a5cb%3A0x4c3d1f8f7c4b7b3e!2sMbandu%20Complex!5e0!3m2!1sen!2ske!4v1698765432109" width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>

    </main>

    <!-- Footer -->
    <footer class="bg-dark text-white mt-5">
        <div class="container py-5">
            <div class="row">
                <div class="col-md-4 mb-4">
                    <h4 class="footer-title">Discover Enpro</h4>
                    <p>Your trusted supplier of Mascot Workwear and Petzl Safety Gear, committed to quality and safety.</p>
                </div>
                <div class="col-md-4 mb-4">
                    <h4 class="footer-title">Quick Links</h4>
                    <ul class="list-unstyled footer-links">
                        <li><a href="/">Home</a></li>
                        <li><a href="/products">Products</a></li>
                        <li><a href="/blog">Latest</a></li>
                        <li><a href="/contact">Contact</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h4 class="footer-title">Contact Info</h4>
                    <p>
                        <i class="fas fa-envelope me-2"></i>
                        <a href="mailto:mascot@enpro.co.ke" class="footer-links">mascot@enpro.co.ke</a> &
                        <a href="mailto:info@enpro.co.ke" class="footer-links">info@enpro.co.ke</a><br>
                        <i class="fas fa-phone me-2"></i>
                        <a href="tel:+254732727414" class="footer-links">0732727414</a> /
                        <a href="tel:+254721554290" class="footer-links">0721554290</a><br>
                        <i class="fas fa-map-marker-alt me-2"></i>Mbandu Complex, off Langata road, Near Galleria Mall, 4th Floor, room NO.5
                    </p>
                </div>
            </div>
            <div class="text-center pt-4 border-top border-secondary">
                <p class="mb-0">© 2025 enpro. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- JS Assets -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
    <script src="/assets/js/wow.min.js"></script>
    <script src="/assets/js/main.js"></script>

    <!-- Custom JS -->
    <script>
        $(document).ready(function() {
            $(window).scroll(function() {
                if ($(this).scrollTop() > 50) {
                    $('.navbar').addClass('scrolled');
                } else {
                    $('.navbar').removeClass('scrolled');
                }
            });
            new WOW().init();
        });
    </script>

    <!-- Custom CSS -->
    <style>
        /* Global Styles */
        body {
            font-family: 'Montserrat', sans-serif;
            color: #333333;
            background-color: #F7F7F7;
            margin: 0;
        }

        h1, h2, h3, h4, h5, h6 {
            font-weight: 600;
            color: #00A1B2; /* Teal */
        }

        p {
            font-size: 1rem;
            line-height: 1.6;
            color: #666666;
        }

        /* Navbar */
        .navbar {
            background-color: #FFFFFF;
            padding: 10px 0;
            transition: all 0.3s ease;
        }

        .navbar.scrolled {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .navbar-brand {
            display: flex;
            align-items: center;
        }

        .navbar-brand .logo-img {
            max-height: 80px;
            width: auto;
            object-fit: contain;
        }

        .navbar-brand .brand-text {
            font-size: 1.5rem;
            font-weight: 700;
            color: #00A1B2;
        }

        .nav-link-custom {
            font-size: 1rem;
            font-weight: 500;
            color: #333333 !important;
            padding: 8px 12px;
            transition: color 0.3s ease, transform 0.3s ease;
        }

        .nav-link-custom:hover {
            color: #F15A29 !important; /* Orange */
            transform: translateY(-2px);
        }

        .dropdown-menu-custom {
            background-color: #FFFFFF;
            border: 1px solid #00A1B2;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 0;
            max-height: 70vh;
            overflow-y: auto;
        }

        .dropdown-item {
            font-size: 0.9rem;
            color: #333333;
            padding: 8px 16px;
        }

        .dropdown-item:hover {
            background-color: #F15A29;
            color: #FFFFFF !important;
        }

        .dropdown-header {
            font-size: 0.9rem;
            font-weight: 600;
            color: #00A1B2;
            padding: 8px 16px;
        }

        .btn-custom {
            background-color: #F15A29; /* Orange */
            color: #FFFFFF;
            font-weight: 600;
            padding: 8px 16px;
            border-radius: 5px;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }

        .btn-custom:hover {
            background-color: #D94F24;
            transform: scale(1.05);
        }

        /* Buttons */
        .btn-primary {
            background-color: #00A1B2;
            border-color: #00A1B2;
            font-weight: 500;
            padding: 8px 16px;
            border-radius: 5px;
        }

        .btn-primary:hover {
            background-color: #008A9B;
            border-color: #008A9B;
        }

        .btn-outline-primary {
            color: #00A1B2;
            border-color: #00A1B2;
            font-weight: 500;
            padding: 6px 14px;
            border-radius: 5px;
        }

        .btn-outline-primary:hover {
            background-color: #00A1B2;
            color: #FFFFFF;
        }

        /* Sections */
        .hero-area {
            background-size: cover;
            background-position: center;
            padding: 80px 0;
            color: #FFFFFF;
            text-align: center;
        }

        .hero-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: #FFFFFF;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .hero-subtitle {
            font-size: 1.2rem;
            margin-bottom: 20px;
            color: #FFFFFF;
        }

        .section-title {
            font-size: 2rem;
            margin-bottom: 30px;
            position: relative;
        }

        .section-title::after {
            content: '';
            width: 50px;
            height: 3px;
            background-color: #F15A29;
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
        }

        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .card-img-top {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            object-fit: cover;
            width: 100%;
            height: auto;
        }

        /* Footer */
        .footer-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: #FFFFFF;
            margin-bottom: 15px;
        }

        .footer-links a {
            color: #CCCCCC;
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }

        .footer-links a:hover {
            color: #F15A29;
        }

        /* Responsive Adjustments */
        @media (max-width: 991px) {
            .navbar-nav {
                padding: 10px 0;
            }

            .nav-item {
                margin: 5px 0;
            }

            .nav-link-custom {
                padding: 8px 15px;
            }

            .btn-custom {
                margin: 10px 15px;
            }

            .dropdown-menu-custom {
                border: none;
                box-shadow: none;
                background-color: #f8f9fa;
            }
        }

        @media (max-width: 767px) {
            .navbar {
                padding: 8px 0;
            }

            .navbar-brand {
                margin-left: 10px;
            }

            .navbar-brand .logo-img {
                max-height: 60px;
                margin-right: 5px;
            }

            .navbar-brand .brand-text {
                font-size: 1.2rem;
            }

            .navbar-toggler {
                margin-right: 15px;
            }

            .hero-title {
                font-size: 2rem;
            }

            .hero-subtitle {
                font-size: 1rem;
            }

            .section-title {
                font-size: 1.5rem;
            }

            .hero-area {
                padding: 60px 0;
            }

            .footer .row > div {
                margin-bottom: 20px;
            }
        }

        @media (max-width: 576px) {
            .navbar-brand .logo-img {
                max-height: 50px;
                margin-left: 10px;
            }

            .hero-title {
                font-size: 1.8rem;
            }

            .hero-subtitle {
                font-size: 0.9rem;
            }

            .section-title {
                font-size: 1.3rem;
            }

            .btn-custom, .btn-primary, .btn-outline-primary {
                padding: 6px 12px;
                font-size: 0.9rem;
            }

            main {
                margin-top: 60px;
            }
        }
    </style>

    
    <script>
        $(document).ready(function() {
            // Apply background image from data-background attribute
            const heroSection = $('.hero-area');
            const bgUrl = heroSection.data('background');
            heroSection.css('background-image', `url('${bgUrl}')`);

            // Handle inquiry modal data
            $('#inquiryModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget); // Button that triggered the modal
                var productId = button.data('product-id');
                var productName = button.data('product-name');
                var modal = $(this);
                // Update modal title with product name
                modal.find('#inquiryProductName').text(productName);
                // Update form action with product inquiry route
                modal.find('#inquiryForm').attr('action', '/product/' + productId + '/inquire');
            });
        });
    </script>

</body>
</html>