
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Primary SEO -->
<title>Enterprise Group Inc</title>
<meta name="description" content="Enterprise Group provides specialized equipment and services in the build out of infrastructure for energy, pipeline, and construction industries.">
<link rel="canonical" href="https://enterprisegrp.ca/">

<!-- Robots control -->
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">

<!-- Open Graph / Facebook -->
<meta property="og:locale" content="en_US">
<meta property="og:type" content="website">
<meta property="og:title" content="Enterprise Group Inc">
<meta property="og:description" content="Enterprise Group provides specialized equipment and services in the build out of infrastructure for energy, pipeline, and construction industries.">
<meta property="og:url" content="https://enterprisegrp.ca/">
<meta property="og:site_name" content="Enterprise Group Inc">
<meta property="og:image" content="https://enterprisegrp.ca/images/og-enterprise-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Enterprise Group Inc">
<meta name="twitter:description" content="Enterprise Group provides specialized equipment and services in the build out of infrastructure for energy, pipeline, and construction industries.">
<meta name="twitter:image" content="https://enterprisegrp.ca/images/og-enterprise-image.jpg">

<!-- Structured Data / Schema.org -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "WebPage",
      "@id": "https://enterprisegrp.ca/#webpage",
      "url": "https://enterprisegrp.ca/",
      "name": "Enterprise Group Inc",
      "isPartOf": {
        "@id": "https://enterprisegrp.ca#website"
      },
      "datePublished": "2022-01-12T17:31:15+00:00",
      "dateModified": "2025-05-24T00:00:00+00:00",
      "description": "Enterprise Group provides specialized equipment and services in the build out of infrastructure for energy, pipeline, and construction industries.",
      "breadcrumb": {
        "@id": "https://enterprisegrp.ca/#breadcrumb"
      },
      "inLanguage": "en-US",
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": ["https://enterprisegrp.ca/"]
        }
      ]
    },
    {
      "@type": "BreadcrumbList",
      "@id": "https://enterprisegrp.ca/#breadcrumb",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "name": "Home"
        }
      ]
    },
    {
      "@type": "WebSite",
      "@id": "https://enterprisegrp.ca#website",
      "url": "https://enterprisegrp.ca/",
      "name": "Enterprise Group Inc",
      "description": "Specialized equipment and services for energy, pipeline, and construction industries",
      "potentialAction": [
        {
          "@type": "SearchAction",
          "target": {
            "@type": "EntryPoint",
            "urlTemplate": "https://enterprisegrp.ca/?s={search_term_string}"
          },
          "query-input": "required name=search_term_string"
        }
      ],
      "inLanguage": "en-US"
    },
    {
      "@type": "Organization",
      "@id": "https://enterprisegrp.ca#organization",
      "name": "Enterprise Group Inc",
      "url": "https://enterprisegrp.ca/",
      "logo": {
        "@type": "ImageObject",
        "inLanguage": "en-US",
        "url": "https://enterprisegrp.ca/images/enterprise-logo.png",
        "width": 512,
        "height": 128,
        "caption": "Enterprise Group Inc"
      },
      "image": {
        "@id": "https://enterprisegrp.ca#logo"
      },
      "sameAs": [
        "https://twitter.com/EnterpriseGrp",
        "https://www.linkedin.com/company/enterprise-group-inc-"
      ]
    }
  ]
}
</script>

<!-- Favicon -->
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">

<!-- Google Fonts - Open Sans and Lato -->
<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=Open+Sans:wght@300;400;500;600;700&family=Lato:wght@300;400;700;900&display=swap" rel="stylesheet">

<!-- Font styles -->
<style>
    @font-face {
        font-family: 'NovareseStd-Book';
        src: url('../fonts/NovareseStd-Book.otf') format('opentype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'NovareseStd-Bold';
        src: url('../fonts/NovareseStd-Bold.otf') format('opentype');
        font-weight: bold;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'NovareseStd-Medium';
        src: url('../fonts/NovareseStd-Medium.otf') format('opentype');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'NovareseStd-Ultra';
        src: url('../fonts/NovareseStd-Ultra.otf') format('opentype');
        font-weight: 900;
        font-style: normal;
        font-display: swap;
    }
</style>

<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    gold: '#957d4e',
                    darkblue: '#0a1b35',
                },
                fontFamily: {
                    'novarese': ['NovareseStd-Book', 'serif'],
                    'novarese-bold': ['NovareseStd-Bold', 'serif'],
                    'novarese-medium': ['NovareseStd-Medium', 'serif'],
                    'novarese-ultra': ['NovareseStd-Ultra', 'serif'],
                    'open-sans': ['Open Sans', 'sans-serif'],
                    'lato': ['Lato', 'sans-serif'],
                },
                fontSize: {
                    '7xl': '4.5rem',
                    '3xl': ['1.55rem', '2rem']
                }
            }
        }
    }
</script>

<!-- Custom CSS for specific elements not covered by Tailwind -->
<style>
    /* Custom heading style with improved rendering */
    .enterprise-heading {
        font-family: 'NovareseStd-Bold', serif;
        line-height: 1;
        letter-spacing: -0.01em;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        font-size: 3rem; /* Base size for mobile */
    }
    
    /* Responsive sizes for enterprise-heading */
    @media (min-width: 640px) {
        .enterprise-heading {
            font-size: 3.5rem;
        }
    }
    
    @media (min-width: 768px) {
        .enterprise-heading {
            font-size: 4.5rem;
        }
    }
    
    /* Banner subtitle style with reduced line height */
    .banner-subtitle {
        line-height: 1;
        letter-spacing: 0.05em;
    }
    
    /* Additional custom styles */
    .banner-social-icons {
        display: flex;
        gap: 2rem;
        margin-bottom: 1.5rem;
    }
    
    .banner-social-icons a {
        color: #fff;
        font-size: 1.75rem;
        transition: color 0.3s;
    }
    
    .banner-social-icons a:hover {
        color: #957d4e;
    }
    
    /* Add scrolled header background */
    .bg-transparent.scrolled {
        background-color: rgba(10, 27, 53, 0.95);
        transition: background-color 0.3s ease;
    }
    
    /* Ensure the header stays on top */
    .swiper-slide {
        padding-top: 80px;
    }
    
    @media (min-width: 640px) {
        .swiper-slide {
            padding-top: 100px;
        }
    }
    
    /* Add extra padding for mobile stock price bar */
    @media (max-width: 639px) {
        .swiper-slide {
            padding-top: 110px;
        }
    }
    
    /* Fix for slide overlap */
    .swiper-slide {
        opacity: 0 !important;
        transition: opacity 0.5s ease;
    }
    
    .swiper-slide-active {
        opacity: 1 !important;
    }
    
    /* Ensure swiper container is positioned correctly */
    .swiper {
        position: relative;
        overflow: hidden;
    }
    
    /* Responsive swiper height to match banner */
    @media (max-width: 639px) {
        .swiper {
            height: 650px;
        }
    }
    
    @media (min-width: 640px) and (max-width: 767px) {
        .swiper {
            height: 700px;
        }
    }
    
    @media (min-width: 768px) {
        .swiper {
            height: 750px;
        }
    }
    
    /* Dropdown navigation styles */
    .nav-dropdown {
        position: relative;
    }
    
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 200px;
        background-color: rgba(10, 27, 53, 0.95);
        border-top: 2px solid #957d4e;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s ease;
        z-index: 100;
        padding: 0.5rem 0;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    .nav-dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .dropdown-menu li {
        display: block;
        width: 100%;
    }
    
    .dropdown-menu a {
        display: block;
        padding: 0.5rem 1rem;
        white-space: nowrap;
        font-weight: normal;
        font-size: 0.9rem;
    }
    
    /* Add dropdown arrow */
    .has-dropdown::after {
        content: '▾';
        margin-left: 0.3rem;
        display: inline-block;
        font-size: 0.75rem;
        transition: transform 0.2s ease;
    }
    
    .nav-dropdown:hover .has-dropdown::after {
        transform: rotate(180deg);
    }
    
    /* Ensure mobile menu doesn't overlap other content */
    #mobile-menu {
        z-index: 100;
    }
    
    /* Add subtle shadow to the gold bar */
    .h-2.bg-gold {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    /* Custom slider pagination rectangle styles */
    .swiper-pagination-bullet {
        width: 30px !important;
        height: 4px !important;
        border-radius: 0 !important;
        background-color: rgba(255, 255, 255, 0.5);
        opacity: 1;
        margin: 0 5px;
    }
    
    .swiper-pagination-bullet-active {
        background-color: #957d4e !important;
    }
    
    /* Modal styles */
    .modal-container {
        transition: all 0.3s ease;
    }
    
    .modal-overlay {
        transition: opacity 0.3s ease;
    }
    
    /* Company cards hover effect */
    .company-card {
        transition: all 0.35s ease;
        height: 280px;
    }
    
    .company-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
    }
    
    .company-logo {
        transition: all 0.3s ease;
        filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
        max-width: 85%;
        max-height: 85%;
    }
    
    .company-card:hover .company-logo {
        transform: scale(1.05);
        filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.1)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
    }
    
    .company-card .absolute.bg-cover {
        transition: all 0.35s ease;
    }
    
    .company-card:hover .absolute.bg-cover {
        opacity: 0.3;
        transform: scale(1.05);
    }
    
    .company-card .absolute.bg-darkblue {
        transition: opacity 0.35s ease;
    }
    
    .company-card:hover .absolute.bg-darkblue {
        opacity: 0.6;
    }
    
    .company-card h3,
    .company-card p {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
    
    .company-card:hover h3 {
        color: #957d4e;
    }
    
    .modal-open {
        font-weight: 600;
        letter-spacing: 0.025em;
    }
    
    /* Quick Links Modal Animation */
    .modal-container {
        transition: all 0.3s ease-out;
    }
    
    .modal-container.scale-100 {
        transform: scale(1);
        opacity: 1;
    }
    
    .modal-container.scale-95 {
        transform: scale(0.95);
        opacity: 0;
    }
    
    #quick-links-button {
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(10, 27, 53, 0.7);
        }
        70% {
            box-shadow: 0 0 0 10px rgba(10, 27, 53, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(10, 27, 53, 0);
        }
    }
</style>

<!-- Font Awesome for social icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<!-- Swiper for slider -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" /> </head>
<body class="font-open-sans">
    <!-- Header Section -->
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enterprise Group Inc.</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
    
    <!-- Custom Styles -->
    <style>
        :root {
            --darkblue: #0A1B35;
            --gold: #C4A777;
        }
        
        body {
            font-family: 'Open Sans', sans-serif;
            background-color: #fff;
        }
        
        .nav-dropdown {
            position: relative;
        }
        
        .dropdown-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: var(--darkblue);
            min-width: 200px;
            padding: 0.5rem 0;
            border-radius: 0.25rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            z-index: 1000;
        }
        
        .nav-dropdown:hover .dropdown-menu {
            display: block;
        }
        
        .dropdown-menu li {
            padding: 0.5rem 1rem;
        }
        
        .mobile-dropdown-menu {
            display: none !important;
        }
        
        .mobile-dropdown-menu.active {
            display: block !important;
        }
    </style>
</head>
<body>
<!-- Top Bar with stock price and careers button -->
<div class="bg-transparent absolute w-full z-50 transition-colors duration-300">
    <!-- Mobile Stock Price Bar -->
    <div class="sm:hidden bg-black/20 backdrop-blur-sm w-full py-1 px-4 flex justify-center items-center border-b border-gold/30">
        <div id="stockDataDisplayMobile" class="text-white text-sm text-center">
            <span>Loading stock data...</span>
        </div>
    </div>

    <!-- Top bar for larger screens -->
    <div class="container mx-auto px-4 py-2 hidden sm:flex justify-between items-center">
        <!-- Empty space (removed social icons) -->
        <div class="flex-grow"></div>
        
        <div class="flex items-center">
            <div id="stockDataDisplay" class="text-white text-sm mr-6">
                <span>Loading stock data...</span>
            </div>
        </div>
    </div>

    <!-- Main Navigation -->
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <!-- Logo - Increased size for mobile -->
        <div class="w-2/3 sm:w-1/4 mb-4">
            <a href="/">
                <img src="images/NewELogo-ai3-1024x616-p1.png" alt="Enterprise Group Inc Logo" class="w-56 sm:w-56 md:w-64">
            </a>
        </div>
        
        <!-- Mobile Menu Button - Increased size -->
        <button id="mobile-menu-button" class="block sm:hidden text-white hover:text-gold focus:outline-none">
            <i class="fas fa-bars text-4xl"></i>
        </button>
        
        <!-- Menu Items for larger screens -->
        <nav class="hidden sm:flex items-center">
            <ul class="flex space-x-4 md:space-x-8">
                <!-- Home -->
                <li><a href="index.php" class="text-gray-200 hover:text-gold font-open-sans uppercase tracking-wider font-normal transition duration-300 text-xs md:text-sm">Home</a></li>
                
                <!-- About Dropdown -->
                <li class="nav-dropdown">
                    <a href="company-overview.php" class="text-gray-200 hover:text-gold font-open-sans uppercase tracking-wider font-normal transition duration-300 text-xs md:text-sm has-dropdown">About</a>
                    <ul class="dropdown-menu">
                        <li><a href="company-overview.php" class="text-gray-200 hover:text-gold transition duration-300">Company Overview</a></li>
                        <li><a href="leadership-directors.php" class="text-gray-200 hover:text-gold transition duration-300">Leadership & Directors</a></li>
                        <li><a href="corporate-directory.php" class="text-gray-200 hover:text-gold transition duration-300">Corporate Directory</a></li>
                        <li><a href="corporate-governance.php" class="text-gray-200 hover:text-gold transition duration-300">Corporate Governance</a></li>
                        <li><a href="operations-map.php" class="text-gray-200 hover:text-gold transition duration-300">Operations Map</a></li>
                    </ul>
                </li>
                
                <!-- ESG -->
                <li><a href="esg.php" class="text-gray-200 hover:text-gold font-open-sans uppercase tracking-wider font-normal transition duration-300 text-xs md:text-sm">ESG</a></li>
                
                <!-- Investors Dropdown -->
                <li class="nav-dropdown">
                    <a href="#" class="text-gray-200 hover:text-gold font-open-sans uppercase tracking-wider font-normal transition duration-300 text-xs md:text-sm has-dropdown">Investors</a>
                    <ul class="dropdown-menu">
                        <li><a href="news-releases.php" class="text-gray-200 hover:text-gold transition duration-300">News Releases</a></li>
                        <li><a href="financial-statements.php" class="text-gray-200 hover:text-gold transition duration-300">Financial Statements</a></li>
                        <li><a href="analyst-coverage.php" class="text-gray-200 hover:text-gold transition duration-300">Analyst Coverage</a></li>
                        <li><a href="corporate-governance.php" class="text-gray-200 hover:text-gold transition duration-300">Corporate Governance</a></li>
                        <li><a href="stock-information.php" class="text-gray-200 hover:text-gold transition duration-300">Stock Information</a></li>
                    </ul>
                </li>
                
                <!-- Gallery Dropdown -->
                <li class="nav-dropdown">
                    <a href="#" class="text-gray-200 hover:text-gold font-open-sans uppercase tracking-wider font-normal transition duration-300 text-xs md:text-sm has-dropdown">Gallery</a>
                    <ul class="dropdown-menu">
                        <li><a href="evolution-power.php" class="text-gray-200 hover:text-gold transition duration-300">Evolution Power</a></li>
                        <li><a href="artic-therm-gallery.php" class="text-gray-200 hover:text-gold transition duration-300">Artic Therm</a></li>
                        <li><a href="hart-gallery.php" class="text-gray-200 hover:text-gold transition duration-300">Hart Oilfield Rentals</a></li>
                        <li><a href="westar-gallery.php" class="text-gray-200 hover:text-gold transition duration-300">Westar Oilfield Rentals</a></li>
                    </ul>
                </li>
                
                <!-- Contact -->
                <li><a href="contact.php" class="text-gray-200 hover:text-gold font-open-sans uppercase tracking-wider font-normal transition duration-300 text-xs md:text-sm">Contact</a></li>
                
                <!-- Phone - Made bigger for desktop -->
                <li><a href="tel:+17804184400" class="text-white hover:text-gold font-open-sans font-bold transition duration-300 text-sm md:text-base lg:text-lg ml-2">+1.780.418.4400</a></li>
            </ul>
        </nav>
    </div>
    
    <!-- Mobile Menu (hidden by default) -->
    <div id="mobile-menu" class="hidden absolute w-full py-4 px-4 sm:hidden" style="background-color: rgba(10, 27, 53, 0.95);">
        <ul class="space-y-3">
            <li><a href="index.php" class="block text-gray-200 hover:text-gold font-open-sans uppercase tracking-wider font-normal transition duration-300 py-2">Home</a></li>
            
            <!-- Mobile About Dropdown -->
            <li class="relative">
                <button class="mobile-dropdown-toggle flex w-full items-center justify-between text-gray-200 hover:text-gold font-open-sans uppercase tracking-wider font-normal transition duration-300 py-2">
                    About
                    <i class="fas fa-chevron-down text-xs ml-1"></i>
                </button>
                <ul class="mobile-dropdown-menu pl-4 pt-2 pb-1">
                    <li><a href="company-overview.php" class="block text-gray-200 hover:text-gold transition duration-300 py-2 text-sm">Company Overview</a></li>
                    <li><a href="leadership-directors.php" class="block text-gray-200 hover:text-gold transition duration-300 py-2 text-sm">Leadership & Directors</a></li>
                    <li><a href="corporate-directory.php" class="block text-gray-200 hover:text-gold transition duration-300 py-2 text-sm">Corporate Directory</a></li>
                    <li><a href="corporate-governance.php" class="block text-gray-200 hover:text-gold transition duration-300 py-2 text-sm">Corporate Governance</a></li>
                    <li><a href="operations-map.php" class="block text-gray-200 hover:text-gold transition duration-300 py-2 text-sm">Operations Map</a></li>
                </ul>
            </li>
            
            <li><a href="esg.php" class="block text-gray-200 hover:text-gold font-open-sans uppercase tracking-wider font-normal transition duration-300 py-2">ESG</a></li>
            
            <!-- Mobile Investors Dropdown -->
            <li class="relative">
                <button class="mobile-dropdown-toggle flex w-full items-center justify-between text-gray-200 hover:text-gold font-open-sans uppercase tracking-wider font-normal transition duration-300 py-2">
                    Investors
                    <i class="fas fa-chevron-down text-xs ml-1"></i>
                </button>
                <ul class="mobile-dropdown-menu pl-4 pt-2 pb-1">
                    <li><a href="news-releases.php" class="block text-gray-200 hover:text-gold transition duration-300 py-2 text-sm">News Releases</a></li>
                    <li><a href="financial-statements.php" class="block text-gray-200 hover:text-gold transition duration-300 py-2 text-sm">Financial Statements</a></li>
                    <li><a href="analyst-coverage.php" class="block text-gray-200 hover:text-gold transition duration-300 py-2 text-sm">Analyst Coverage</a></li>
                    <li><a href="corporate-governance.php" class="block text-gray-200 hover:text-gold transition duration-300 py-2 text-sm">Corporate Governance</a></li>
                    <li><a href="stock-information.php" class="block text-gray-200 hover:text-gold transition duration-300 py-2 text-sm">Stock Information</a></li>
                </ul>
            </li>
            
            <!-- Mobile Gallery Dropdown -->
            <li class="relative">
                <button class="mobile-dropdown-toggle flex w-full items-center justify-between text-gray-200 hover:text-gold font-open-sans uppercase tracking-wider font-normal transition duration-300 py-2">
                    Gallery
                    <i class="fas fa-chevron-down text-xs ml-1"></i>
                </button>
                <ul class="mobile-dropdown-menu pl-4 pt-2 pb-1">
                    <li><a href="evolution-power.php" class="block text-gray-200 hover:text-gold transition duration-300 py-2 text-sm">Evolution Power</a></li>
                    <li><a href="artic-therm-gallery.php" class="block text-gray-200 hover:text-gold transition duration-300 py-2 text-sm">Artic Therm</a></li>
                    <li><a href="hart-gallery.php" class="block text-gray-200 hover:text-gold transition duration-300 py-2 text-sm">Hart Oilfield Rentals</a></li>
                    <li><a href="westar-gallery.php" class="block text-gray-200 hover:text-gold transition duration-300 py-2 text-sm">Westar Oilfield Rentals</a></li>
                </ul>
            </li>
            
            <li><a href="contact.php" class="block text-gray-200 hover:text-gold font-open-sans uppercase tracking-wider font-normal transition duration-300 py-2">Contact</a></li>
            <li><a href="tel:+17804184400" class="block text-gray-200 hover:text-gold font-open-sans font-bold transition duration-300 py-2">+1.780.418.4400</a></li>
        </ul>
    </div>
</div>

<!-- Prevent navigation background change on scroll -->
<style>
    .bg-transparent.scrolled {
        background-color: transparent !important;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Override navbar scroll behavior
        const navbar = document.querySelector('.bg-transparent');
        window.addEventListener('scroll', function() {
            // Remove the 'scrolled' class regardless of scroll position
            navbar.classList.remove('scrolled');
        });
    });

fetch('https://stock.sw7ft.com/fetch-stock-data')
  .then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    // Prepare the text with green checkmark inline
    const displayText = `<b>OTC: ETOLF & TSX:E</b> ${data.open} CAD <svg class="checkmark inline-block" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#2ecc71" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="margin-left: 6px; vertical-align: middle;">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>`;

    // Update both mobile and desktop displays
    document.getElementById('stockDataDisplay').innerHTML = displayText;
    document.getElementById('stockDataDisplayMobile').innerHTML = displayText;
  })
  .catch(error => {
    console.error('Error fetching stock data:', error);
    const errorText = `<b>OTC: ETOLF & TSX:E</b> <svg class="checkmark inline-block" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#2ecc71" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="margin-left: 6px; vertical-align: middle;">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>`;
    document.getElementById('stockDataDisplay').innerHTML = errorText;
    document.getElementById('stockDataDisplayMobile').innerHTML = errorText;
  });
</script>
</body>
</html>     
    <!-- Main Banner Section -->
    
<!-- Hero Banner Section with Swiper Slider -->
<div class="swiper hero-swiper h-[650px] sm:h-[700px] md:h-[750px] relative">
    <div class="swiper-wrapper">
        <!-- Slide 1 -->
        <div class="swiper-slide relative">
            <!-- Background Image -->
            <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('images/enterprise-bg.png');"></div>
            
            <!-- Blue Overlay matching Our Companies section -->
            <div class="absolute inset-0" style="background-color: rgba(11, 29, 59, 0.872);"></div>
            
            <!-- Content Container -->
            <div class="relative z-10 h-full flex items-center">
                <div class="container mx-auto px-4 sm:px-6 md:px-12 lg:px-24 pt-16 sm:pt-20">
                    <div class="max-w-4xl">
                        <!-- Social Media Icons -->
                        <div class="banner-social-icons">
                            <a href="https://x.com/EnterpriseGrp" target="_blank" aria-label="Follow on X (Twitter)">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="mailto:contact@enterprisegrp.ca" aria-label="Email us">
                                <i class="far fa-envelope"></i>
                            </a>
                            <a href="https://my.linkedin.com/company/enterprise-group-inc-" target="_blank" aria-label="Connect on LinkedIn">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                            <a href="https://www.youtube.com/channel/UCzQ85CXg44ZXs2U9DBRw4lw" target="_blank" aria-label="YouTube Channel">
                                <i class="fab fa-youtube"></i>
                            </a>
                        </div>
                        
                        <!-- Main Heading -->
                        <h2 class="text-gold font-lato text-xl sm:text-2xl md:text-2xl mb-2 tracking-wider font-semibold uppercase select-text banner-subtitle">
                            CELEBRATING 20 YEARS ADVANCING CANADA'S ENERGY INDUSTRY
                        </h2>
                        
                        <!-- Subheading -->
                        <h1 class="text-white enterprise-heading mb-4 select-text">
                            ENTERPRISE GROUP INC
                        </h1>
                        
                        <!-- Description -->
                        <p class="text-white font-novarese text-base sm:text-lg md:text-xl mb-6 md:mb-8 max-w-2xl select-text">
                            Enterprise Group provides specialized equipment and services in the build out of infrastructure
                            for energy, pipeline, and construction industries. The innovation and expertise of our operating
                            companies have distinguished them as "best-in-class" to their blue-chip client base.
                        </p>
                        
                        <!-- CTA Buttons -->
                        <div class="flex flex-wrap gap-4">
                            <a href="/ASGM.php" class="inline-block bg-gold text-white px-6 sm:px-8 py-2 sm:py-3 font-open-sans hover:bg-white hover:text-gold transition duration-300 tracking-wider font-semibold select-text text-sm sm:text-base">
                                ASGM MEETING
                            </a>
                            <a href="/PRESENTATION-DECK-MAY-20-2025.pdf" class="inline-block bg-darkblue text-white px-6 sm:px-8 py-2 sm:py-3 font-open-sans hover:bg-white hover:text-darkblue transition duration-300 tracking-wider font-semibold select-text text-sm sm:text-base">
                                PRESENTATION
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- New Slide 2 (Natural Gas Power Infrastructure) -->
        <div class="swiper-slide relative">
            <!-- Background Image -->
            <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('images/nature-gas-powered-site.png');"></div>
            
            <!-- Dark Overlay - 60% opacity (same as slide 1) -->
            <div class="absolute inset-0 bg-black bg-opacity-60"></div>
            
            <!-- Content Container -->
            <div class="relative z-10 h-full flex items-center">
                <div class="container mx-auto px-4 sm:px-6 md:px-12 lg:px-24 pt-16 sm:pt-20">
                    <div class="max-w-4xl">
                        <!-- Social Media Icons -->
                        <div class="banner-social-icons">
                            <a href="https://x.com/EnterpriseGrp" target="_blank" aria-label="Follow on X (Twitter)">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="mailto:contact@enterprisegrp.ca" aria-label="Email us"><i class="far fa-envelope"></i></a>
                            <a href="https://my.linkedin.com/company/enterprise-group-inc-" target="_blank" aria-label="Connect on LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                            <a href="https://www.youtube.com/channel/UCzQ85CXg44ZXs2U9DBRw4lw" target="_blank" aria-label="YouTube Channel"><i class="fab fa-youtube"></i></a>
                        </div>
                        
                        <!-- Main Content -->
                        <h2 class="text-gold font-lato text-xl sm:text-2xl md:text-3xl mb-2 tracking-wider font-semibold uppercase select-text banner-subtitle">
                            CLEANER ENERGY SOLUTIONS
                        </h2>
                        
                        <h1 class="text-white enterprise-heading mb-4 select-text">
                            NATURAL GAS POWER
                        </h1>
                        
                        <p class="text-white font-novarese text-base sm:text-lg md:text-xl mb-6 md:mb-8 max-w-2xl select-text">
                            Our NG to Electricity micro grid replaces up to 15 diesel generators per site, eliminating up to 5,000 litres of diesel fuel daily while reducing sound volumes.
                        </p>
                        
                        <!-- CTA Buttons -->
                        <div class="flex flex-wrap gap-4">
                            <a href="https://evolutionpower.ca/wp-content/uploads/2025/04/Flare-Combustion-Case-Study-compressed.pdf" class="inline-block bg-gold text-white px-6 sm:px-8 py-2 sm:py-3 font-open-sans hover:bg-white hover:text-gold transition duration-300 tracking-wider font-semibold select-text text-sm sm:text-base">
                                CASE STUDY
                            </a>
                            <a href="/PRESENTATION-DECK-MAY-20-2025.pdf" class="inline-block bg-darkblue text-white px-6 sm:px-8 py-2 sm:py-3 font-open-sans hover:bg-white hover:text-darkblue transition duration-300 tracking-wider font-semibold select-text text-sm sm:text-base">
                                PRESENTATION
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Slide 2 (Innovation & Expertise) -->
        <div class="swiper-slide relative">
            <!-- Background Image -->
            <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://enterprisegrp.ca/wp-content/uploads/2024/03/09-03-pipeline-Feb-12-19-7-scaled.jpg');"></div>
            
            <!-- Blue Overlay matching Our Companies section -->
            <div class="absolute inset-0" style="background-color: rgba(11, 29, 59, 0.872);"></div>
            
            <!-- Content Container -->
            <div class="relative z-10 h-full flex items-center">
                <div class="container mx-auto px-4 sm:px-6 md:px-12 lg:px-24 pt-16 sm:pt-20">
                    <div class="max-w-4xl">
                        <!-- Social Media Icons -->
                        <div class="banner-social-icons">
                            <a href="https://x.com/EnterpriseGrp" target="_blank" aria-label="Follow on X (Twitter)">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="mailto:contact@enterprisegrp.ca" aria-label="Email us"><i class="far fa-envelope"></i></a>
                            <a href="https://my.linkedin.com/company/enterprise-group-inc-" target="_blank" aria-label="Connect on LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                            <a href="https://www.youtube.com/channel/UCzQ85CXg44ZXs2U9DBRw4lw" target="_blank" aria-label="YouTube Channel"><i class="fab fa-youtube"></i></a>
                        </div>
                        
                        <!-- Main Content -->
                        <h2 class="text-gold font-lato text-xl sm:text-2xl md:text-3xl mb-2 tracking-wider font-semibold uppercase select-text banner-subtitle">
                            INNOVATION & EXPERTISE
                        </h2>
                        
                        <h1 class="text-white enterprise-heading mb-4 select-text">
                            LEADING THE INDUSTRY
                        </h1>
                        
                        <p class="text-white font-novarese text-base sm:text-lg md:text-xl mb-6 md:mb-8 max-w-2xl select-text">
                            Leading the way in natural gas power solutions and thermal pipeline expansion services, delivering innovative infrastructure solutions for the energy sector.
                        </p>
                        
                        <!-- CTA Buttons -->
                        <div class="flex flex-wrap gap-4">
                            <a href="/company-overview.php" class="inline-block bg-gold text-white px-6 sm:px-8 py-2 sm:py-3 font-open-sans hover:bg-white hover:text-gold transition duration-300 tracking-wider font-semibold select-text text-sm sm:text-base">
                                LEARN MORE
                            </a>
                            <a href="/PRESENTATION-DECK-MAY-20-2025.pdf" class="inline-block bg-darkblue text-white px-6 sm:px-8 py-2 sm:py-3 font-open-sans hover:bg-white hover:text-darkblue transition duration-300 tracking-wider font-semibold select-text text-sm sm:text-base">
                                PRESENTATION
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Slide 3 (Excellence in Service) -->
        <div class="swiper-slide relative">
            <!-- Background Image -->
            <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://enterprisegrp.ca/wp-content/uploads/2024/04/704-hauling-shack-through-dust-1024x768.jpg');"></div>
            
            <!-- Dark Overlay -->
            <div class="absolute inset-0 bg-black bg-opacity-60"></div>
            
            <!-- Content Container -->
            <div class="relative z-10 h-full flex items-center">
                <div class="container mx-auto px-4 sm:px-6 md:px-12 lg:px-24 pt-16 sm:pt-20">
                    <div class="max-w-4xl">
                        <!-- Social Media Icons -->
                        <div class="banner-social-icons">
                            <a href="https://x.com/EnterpriseGrp" target="_blank" aria-label="Follow on X (Twitter)">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="mailto:contact@enterprisegrp.ca" aria-label="Email us"><i class="far fa-envelope"></i></a>
                            <a href="https://my.linkedin.com/company/enterprise-group-inc-" target="_blank" aria-label="Connect on LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                            <a href="https://www.youtube.com/channel/UCzQ85CXg44ZXs2U9DBRw4lw" target="_blank" aria-label="YouTube Channel"><i class="fab fa-youtube"></i></a>
                        </div>
                        
                        <!-- Main Content -->
                        <h2 class="text-gold font-lato text-xl sm:text-2xl md:text-3xl mb-2 tracking-wider font-semibold uppercase select-text banner-subtitle">
                            COMPREHENSIVE EQUIPMENT SOLUTIONS
                        </h2>
                        
                        <h1 class="text-white enterprise-heading mb-4 select-text">
                            SITE INFRASTRUCTURE
                        </h1>
                        
                        <p class="text-white font-novarese text-base sm:text-lg md:text-xl mb-6 md:mb-8 max-w-2xl select-text">
                            Through Hart and Westar Oilfield Rentals, we provide comprehensive equipment and site infrastructure solutions for energy operations across Western Canada, ensuring reliable and efficient project execution.
                        </p>
                        
                        <!-- CTA Buttons -->
                        <div class="flex flex-wrap gap-4">
                            <a href="#" class="inline-block bg-gold text-white px-6 sm:px-8 py-2 sm:py-3 font-open-sans hover:bg-white hover:text-gold transition duration-300 tracking-wider font-semibold select-text text-sm sm:text-base">
                                VIEW EQUIPMENT
                            </a>
                            <a href="/PRESENTATION-DECK-MAY-20-2025.pdf" class="inline-block bg-darkblue text-white px-6 sm:px-8 py-2 sm:py-3 font-open-sans hover:bg-white hover:text-darkblue transition duration-300 tracking-wider font-semibold select-text text-sm sm:text-base">
                                PRESENTATION
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Slide 5 (Duplicated content from Slide 1 with new image) -->
        <div class="swiper-slide relative">
            <!-- Background Image -->
            <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('images/slider-esg.png');"></div>
            
            <!-- Dark Overlay - 60% opacity -->
            <div class="absolute inset-0 bg-black bg-opacity-60"></div>
            
            <!-- Content Container -->
            <div class="relative z-10 h-full flex items-center">
                <div class="container mx-auto px-4 sm:px-6 md:px-12 lg:px-24 pt-16 sm:pt-20">
                    <div class="max-w-4xl">
                        <!-- Social Media Icons -->
                        <div class="banner-social-icons">
                            <a href="https://x.com/EnterpriseGrp" target="_blank" aria-label="Follow on X (Twitter)">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="mailto:contact@enterprisegrp.ca" aria-label="Email us">
                                <i class="far fa-envelope"></i>
                            </a>
                            <a href="https://my.linkedin.com/company/enterprise-group-inc-" target="_blank" aria-label="Connect on LinkedIn">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                            <a href="https://www.youtube.com/channel/UCzQ85CXg44ZXs2U9DBRw4lw" target="_blank" aria-label="YouTube Channel">
                                <i class="fab fa-youtube"></i>
                            </a>
                        </div>
                        
                        <!-- Main Heading -->
                        <h2 class="text-gold font-lato text-xl sm:text-2xl md:text-2xl mb-2 tracking-wider font-semibold uppercase select-text banner-subtitle">
                            CELEBRATING 20 YEARS ADVANCING CANADA'S ENERGY INDUSTRY
                        </h2>
                        
                        <!-- Subheading -->
                        <h1 class="text-white enterprise-heading mb-4 select-text">
                            ENTERPRISE GROUP INC
                        </h1>
                        
                        <!-- Description -->
                        <p class="text-white font-novarese text-base sm:text-lg md:text-xl mb-6 md:mb-8 max-w-2xl select-text">
                            Enterprise Group provides specialized equipment and services in the build out of infrastructure
                            for energy, pipeline, and construction industries. The innovation and expertise of our operating
                            companies have distinguished them as "best-in-class" to their blue-chip client base.
                        </p>
                        
                        <!-- CTA Buttons -->
                        <div class="flex flex-wrap gap-4">
                            <a href="/ASGM.php" class="inline-block bg-gold text-white px-6 sm:px-8 py-2 sm:py-3 font-open-sans hover:bg-white hover:text-gold transition duration-300 tracking-wider font-semibold select-text text-sm sm:text-base">
                                ASGM MEETING
                            </a>
                            <a href="/PRESENTATION-DECK-MAY-20-2025.pdf" class="inline-block bg-darkblue text-white px-6 sm:px-8 py-2 sm:py-3 font-open-sans hover:bg-white hover:text-darkblue transition duration-300 tracking-wider font-semibold select-text text-sm sm:text-base">
                                PRESENTATION
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Add navigation arrows -->
    <div class="swiper-button-prev !hidden sm:!flex !left-4 text-white hover:text-gold transition-colors duration-300" style="filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));"></div>
    <div class="swiper-button-next !hidden sm:!flex !right-4 text-white hover:text-gold transition-colors duration-300" style="filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));"></div>
    
    <!-- Custom pagination/slider bar -->
    <div class="absolute bottom-0 w-full bg-darkblue/50 py-2">
        <div class="container mx-auto px-4">
            <div class="max-w-md mx-auto">
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>
</div>

<!-- Gold bar below banner -->
<div class="h-2 bg-gold w-full"></div> 

<!-- Floating Quick Links Button -->
<div class="relative z-20">
    <button id="quick-links-button" class="fixed bottom-6 right-6 bg-darkblue text-white px-4 py-3 rounded-lg shadow-lg hover:bg-gradient-to-r hover:from-gold hover:via-gold hover:to-gold/90 transition duration-300 flex items-center justify-center z-50 group">
        <i class="far fa-newspaper text-xl mr-2"></i>
        <span class="font-semibold text-sm">INVESTORS</span>
    </button>
</div>

<!-- Quick Links Modal -->
<div id="quick-links-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
    <div class="modal-overlay absolute inset-0 bg-black opacity-50"></div>
    <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded-lg shadow-lg z-50 overflow-y-auto max-h-[90vh] transform transition-all duration-300 scale-95 opacity-0">
        <div class="modal-content py-6 px-8">
            <div class="flex justify-between items-center border-b pb-4 mb-6 bg-darkblue text-white -mx-8 px-8 py-4 rounded-t">
                <h3 class="text-xl font-novarese-bold">Quick Links</h3>
                <button id="quick-links-close" class="text-white hover:text-gold">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>
            
            <div class="mb-6">
                <h4 class="text-lg font-novarese-bold text-darkblue mb-3">Latest News</h4>
                <div class="bg-gray-50 p-4 rounded mb-4">
                    <p class="text-gray-600 text-sm mb-1">May 8, 2025</p>
                    <h5 class="font-semibold text-darkblue">ENTERPRISE GROUP ANNOUNCES RESULTS FOR FIRST QUARTER 2025</h5>
                    <a href="news.php?id=5" class="text-gold hover:text-darkblue text-sm mt-2 inline-block">Read More →</a>
                </div>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
                <a href="/PRESENTATION-DECK-MAY-20-2025.pdf" class="bg-gray-50 p-4 rounded hover:shadow-md transition duration-300 flex flex-col items-center text-center">
                    <i class="far fa-file-pdf text-gold text-3xl mb-2"></i>
                    <span class="text-darkblue font-semibold text-sm">Investor Presentation</span>
                </a>
                <a href="financial-statements.php" class="bg-gray-50 p-4 rounded hover:shadow-md transition duration-300 flex flex-col items-center text-center">
                    <i class="far fa-chart-bar text-gold text-3xl mb-2"></i>
                    <span class="text-darkblue font-semibold text-sm">Financial Results</span>
                </a>
                <a href="news-releases.php" class="bg-gray-50 p-4 rounded hover:shadow-md transition duration-300 flex flex-col items-center text-center">
                    <i class="far fa-newspaper text-gold text-3xl mb-2"></i>
                    <span class="text-darkblue font-semibold text-sm">News Releases</span>
                </a>
                <a href="#" class="bg-gray-50 p-4 rounded hover:shadow-md transition duration-300 flex flex-col items-center text-center" data-modal="highlights-modal">
                    <i class="fas fa-star text-gold text-3xl mb-2"></i>
                    <span class="text-darkblue font-semibold text-sm">Highlights</span>
                </a>
            </div>
            
            <div class="text-center">
                <a href="stock-information.php" class="inline-block bg-gold text-white px-6 py-2 rounded transition hover:bg-darkblue">Stock Info</a>
            </div>
        </div>
    </div>
</div>     
    <!-- Main Content -->
    <main>
        <!-- Company Spotlight Section -->
        <section class="py-16 relative overflow-hidden bg-gradient-to-br from-white via-gray-50 to-white">
            <!-- Decorative floating elements -->
            <div class="absolute top-20 left-10 w-32 h-32 bg-gold opacity-5 rounded-full filter blur-xl"></div>
            <div class="absolute bottom-20 right-10 w-40 h-40 bg-darkblue opacity-5 rounded-full filter blur-xl"></div>
            
            <div class="container mx-auto px-4 relative z-10">
                <div class="text-center mb-12">
                    <h2 class="text-darkblue font-novarese-bold text-3xl md:text-4xl lg:text-5xl mb-4 enterprise-heading animate-fade-in">COMPANY SPOTLIGHT</h2>
                    <div class="w-24 h-1 bg-gold mx-auto mb-8"></div>
                    <p class="text-gray-600 max-w-3xl mx-auto">Highlighting our commitment to innovation and excellence in the energy sector.</p>
                </div>
                
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    <!-- Content Column - Now on the left -->
                    <div class="order-2 lg:order-1">
                        <h3 class="text-3xl md:text-4xl lg:text-5xl font-novarese-bold text-darkblue mb-4">Evolution Power Projects</h3>
                        <div class="h-1 w-16 bg-gold mb-6"></div>
                        <p class="text-gray-700 mb-6">
                            Our NG to Electricity micro grid and expanding generator rentals equipment replaces up to 15 diesel fired generators per site and eliminates diesel fuel usage by up to 5,000 litres per day while seriously reducing on-site sound volumes.
                        </p>
                        <p class="text-gray-700 mb-6">
                            Evolution Power Projects is reinventing the way mobile power is provided on site. This in the interest of developing efficiencies, streamlining generator rentals management, supporting critical services and promoting natural gas alternatives.
                            Our Concept to Completion Approach assists our customers in evaluating their overall power demand and offer innovative, low carbon, environmentally responsible options.
                        </p>
                        <p class="text-gray-700 mb-6">
                            Evolution Power is Leading the way by advancing the Natural Gas to Electricity methods of mobile power supply. We have over ten years experience optimizing electrical distribution and technology development.
                            We deliver value to our customers through emission reduction technology and support their ESG initiatives. Natural gas electrification is the future of the energy evolution. Cleaner, quieter, safer and most importantly – Measurable.
                        </p>
                        <div class="flex flex-wrap justify-start mt-8 gap-4">
                            <a href="https://evolutionpower.ca" target="_blank" class="inline-block bg-gold text-white px-8 py-3 rounded hover:bg-darkblue transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg">LEARN MORE</a>
                            <a href="https://evolutionpower.ca/wp-content/uploads/2025/04/Flare-Combustion-Case-Study-compressed.pdf" target="_blank" class="inline-block bg-darkblue text-white px-8 py-3 rounded hover:bg-gold transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg">FLARE GAS CASE STUDY</a>
                        </div>
                    </div>
                    
                    <!-- Image Column - Now on the right -->
                    <div class="order-1 lg:order-2 mb-8 lg:mb-0 transform transition-all">
                        <div class="rounded-lg overflow-hidden shadow-xl mb-6 ring-1 ring-gray-200 hover:ring-gold hover:ring-opacity-50 transition-all duration-300 hover:shadow-2xl relative">
                            <!-- Loading Indicator -->
                            <div id="image-loader" class="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center z-10 opacity-0 transition-opacity duration-300 pointer-events-none">
                                <div class="w-12 h-12 border-4 border-gray-200 border-t-gold rounded-full animate-spin"></div>
                            </div>
                            <img id="featured-image" src="images/DSC_3857-min-1024x684.jpg" alt="Evolution Power Projects" class="w-full h-auto object-cover">
                        </div>
                        
                        <!-- Image Caption -->
                        <div id="image-caption" class="text-center text-gray-600 mb-4 text-sm italic h-6 transition-all duration-300">
                            Evolution Power Equipment - Natural Gas to Electricity Solutions
                        </div>
                        
                        <!-- Thumbnail Gallery -->
                        <div class="flex flex-col gap-4">
                            <!-- First row of thumbnails -->
                            <div class="grid grid-cols-4 gap-3">
                                <div class="thumbnail-container cursor-pointer rounded-md overflow-hidden border-2 border-transparent hover:border-gold transition-all duration-300 transform hover:scale-105 shadow-sm hover:shadow-md">
                                    <img src="images/DSC_3857-min-300x200.jpg" alt="Evolution Power Equipment" class="w-full h-16 object-cover thumbnail" onclick="changeImage('images/DSC_3857-min-1024x684.jpg')">
                                </div>
                                <div class="thumbnail-container cursor-pointer rounded-md overflow-hidden border-2 border-transparent hover:border-gold transition-all duration-300 transform hover:scale-105 shadow-sm hover:shadow-md">
                                    <img src="images/DSC_3870-min-300x200.jpg" alt="Evolution Power Installation" class="w-full h-16 object-cover thumbnail" onclick="changeImage('images/DSC_3870-min-300x200.jpg')">
                                </div>
                                <div class="thumbnail-container cursor-pointer rounded-md overflow-hidden border-2 border-transparent hover:border-gold transition-all duration-300 transform hover:scale-105 shadow-sm hover:shadow-md">
                                    <img src="images/DSC_3880-min-300x200.jpg" alt="Evolution Power System" class="w-full h-16 object-cover thumbnail" onclick="changeImage('images/DSC_3880-min-1024x684.jpg')">
                                </div>
                                <div class="thumbnail-container cursor-pointer rounded-md overflow-hidden border-2 border-transparent hover:border-gold transition-all duration-300 transform hover:scale-105 shadow-sm hover:shadow-md">
                                    <img src="images/epp-gen.jpg" alt="Evolution Power Generator" class="w-full h-16 object-cover thumbnail" onclick="changeImage('images/epp-gen.jpg')">
                                </div>
                            </div>
                            
                            <!-- Second row of thumbnails -->
                            <div class="grid grid-cols-4 gap-3">
                                <div class="thumbnail-container cursor-pointer rounded-md overflow-hidden border-2 border-transparent hover:border-gold transition-all duration-300 transform hover:scale-105 shadow-sm hover:shadow-md">
                                    <img src="https://evolutionpower.ca/wp-content/uploads/2022/12/Frac_web.png" alt="Fracking Power Solutions" class="w-full h-16 object-cover thumbnail" onclick="changeImage('https://evolutionpower.ca/wp-content/uploads/2022/12/Frac_web.png')">
                                </div>
                                <div class="thumbnail-container cursor-pointer rounded-md overflow-hidden border-2 border-transparent hover:border-gold transition-all duration-300 transform hover:scale-105 shadow-sm hover:shadow-md">
                                    <img src="https://evolutionpower.ca/wp-content/uploads/2022/12/Drilling_web-1024x576.png" alt="Drilling Operations" class="w-full h-16 object-cover thumbnail" onclick="changeImage('https://evolutionpower.ca/wp-content/uploads/2022/12/Drilling_web-1024x576.png')">
                                </div>
                                <div class="thumbnail-container cursor-pointer rounded-md overflow-hidden border-2 border-transparent hover:border-gold transition-all duration-300 transform hover:scale-105 shadow-sm hover:shadow-md">
                                    <img src="https://evolutionpower.ca/wp-content/uploads/2022/12/Mining_web.png" alt="Mining Operations" class="w-full h-16 object-cover thumbnail" onclick="changeImage('https://evolutionpower.ca/wp-content/uploads/2022/12/Mining_web.png')">
                                </div>
                                <div class="thumbnail-container cursor-pointer rounded-md overflow-hidden border-2 border-transparent hover:border-gold transition-all duration-300 transform hover:scale-105 shadow-sm hover:shadow-md">
                                    <img src="https://evolutionpower.ca/wp-content/uploads/2022/12/Construction_web.png" alt="Construction Power Solutions" class="w-full h-16 object-cover thumbnail" onclick="changeImage('https://evolutionpower.ca/wp-content/uploads/2022/12/Construction_web.png')">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Our Companies Section -->
        <section id="our-companies" class="py-16 bg-white relative">
            <!-- Background Image with Overlay -->
            <div class="absolute inset-0 bg-cover bg-center bg-fixed" style="background-image: url('images/704-hauling-shack-through-dust-1.jpg');"></div>
            <div class="absolute inset-0" style="background-color: rgba(11, 29, 59, 0.872);"></div>
            
            <div class="container mx-auto px-4 relative z-10">
                <div class="text-center mb-12">
                    <h2 class="text-white font-novarese-bold text-3xl md:text-4xl mb-4">OUR COMPANIES</h2>
                    <div class="w-24 h-1 bg-gold mx-auto mb-6"></div>
                    <p class="text-gray-300 max-w-3xl mx-auto">Enterprise Group operates through specialized subsidiaries, each delivering best-in-class equipment and services to the energy, pipeline, and construction industries.</p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 sm:gap-16 md:gap-8">
                    <!-- Evolution Power (now first) -->
                    <div class="mb-8 md:mb-0">
                        <!-- Logo using section background -->
                        <div class="w-full h-32 flex items-center justify-center mb-6">
                            <img src="https://enterprisegrp.ca/wp-content/uploads/2022/04/westpower2.png" alt="Evolution Power" class="w-4/5 max-h-30 object-contain">
                        </div>
                        
                        <!-- Photo without LinkedIn icon -->
                        <div class="rounded-lg overflow-hidden shadow-lg mb-4 relative">
                            <img src="https://enterprisegrp.ca/wp-content/uploads/2024/04/DSC_3857-min-1024x684.jpg" alt="Evolution Power Equipment" class="w-full h-64 object-cover">
                        </div>
                        
                        <!-- Content -->
                        <div class="text-center">
                            <div class="flex justify-center space-x-4">
                                <a href="https://evolutionpower.ca" target="_blank" class="bg-gold text-white hover:bg-white hover:text-darkblue px-4 py-2 rounded text-sm transition-colors duration-300">Learn More</a>
                                <button data-modal="evolution-modal" class="modal-open bg-white text-darkblue hover:bg-gold hover:text-white px-4 py-2 rounded text-sm transition-colors duration-300">View Details</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Hart Oilfield Rentals (now second) -->
                    <div class="mb-8 md:mb-0">
                        <!-- Logo using section background -->
                        <div class="w-full h-32 flex items-center justify-center mb-6">
                            <img src="https://enterprisegrp.ca/wp-content/uploads/2022/01/hart.png" alt="Hart Oilfield Rentals" class="w-4/5 max-h-30 object-contain">
                        </div>
                        
                        <!-- Photo without LinkedIn icon -->
                        <div class="rounded-lg overflow-hidden shadow-lg mb-4 relative">
                            <img src="https://enterprisegrp.ca/wp-content/uploads/2024/02/20220408_135924-1024x768.jpg" alt="Hart Equipment" class="w-full h-64 object-cover">
                        </div>
                        
                        <!-- Content -->
                        <div class="text-center">
                            <div class="flex justify-center space-x-4">
                                <a href="https://hartoil.com" target="_blank" class="bg-gold text-white hover:bg-white hover:text-darkblue px-4 py-2 rounded text-sm transition-colors duration-300">Learn More</a>
                                <button data-modal="hart-modal" class="modal-open bg-white text-darkblue hover:bg-gold hover:text-white px-4 py-2 rounded text-sm transition-colors duration-300">View Details</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Arctic Therm International (now third) -->
                    <div class="mb-8 md:mb-0">
                        <!-- Logo using section background -->
                        <div class="w-full h-32 flex items-center justify-center mb-6">
                            <img src="https://enterprisegrp.ca/wp-content/uploads/2022/01/artic.png" alt="Arctic Therm International" class="w-4/5 max-h-30 object-contain">
                        </div>
                        
                        <!-- Photo without LinkedIn icon -->
                        <div class="rounded-lg overflow-hidden shadow-lg mb-4 relative">
                            <img src="https://enterprisegrp.ca/wp-content/uploads/2024/03/09-03-pipeline-Feb-12-19-6-1024x768.jpg" alt="Arctic Therm Equipment" class="w-full h-64 object-cover">
                        </div>
                        
                        <!-- Content -->
                        <div class="text-center">
                            <div class="flex justify-center space-x-4">
                                <a href="https://artictherm.com" target="_blank" class="bg-gold text-white hover:bg-white hover:text-darkblue px-4 py-2 rounded text-sm transition-colors duration-300">Learn More</a>
                                <button data-modal="arctic-modal" class="modal-open bg-white text-darkblue hover:bg-gold hover:text-white px-4 py-2 rounded text-sm transition-colors duration-300">View Details</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Westar Oilfield Rentals (now fourth) -->
                    <div class="mb-8 md:mb-0">
                        <!-- Logo using section background -->
                        <div class="w-full h-32 flex items-center justify-center mb-6">
                            <img src="https://enterprisegrp.ca/wp-content/uploads/2022/01/westar.png" alt="Westar Oilfield Rentals" class="w-4/5 max-h-30 object-contain">
                        </div>
                        
                        <!-- Photo without LinkedIn icon -->
                        <div class="rounded-lg overflow-hidden shadow-lg mb-4 relative">
                            <img src="https://enterprisegrp.ca/wp-content/uploads/2024/03/704-hauling-shack-through-dust-1.jpg" alt="Westar Equipment" class="w-full h-64 object-cover">
                        </div>
                        
                        <!-- Content -->
                        <div class="text-center">
                            <div class="flex justify-center space-x-4">
                                <a href="https://westaroilfieldrentals.com" target="_blank" class="bg-gold text-white hover:bg-white hover:text-darkblue px-4 py-2 rounded text-sm transition-colors duration-300">Learn More</a>
                                <button data-modal="westar-modal" class="modal-open bg-white text-darkblue hover:bg-gold hover:text-white px-4 py-2 rounded text-sm transition-colors duration-300">View Details</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- News & Media Section - Now after Our Companies -->
        <section class="py-16 bg-white">
            <div class="container mx-auto px-4">
                <div class="text-center mb-12">
                    <h2 class="text-darkblue font-novarese-bold text-3xl md:text-4xl lg:text-5xl mb-4 enterprise-heading">NEWS & MEDIA</h2>
                    <div class="w-24 h-1 bg-gold mx-auto mb-8"></div>
                    <p class="text-gray-600 max-w-3xl mx-auto">Stay updated with the latest news and media coverage from Enterprise Group Inc.</p>
                </div>
                
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                    <!-- News Releases Column -->
                    
<!-- News Releases Column -->
<div>
    <h3 class="text-2xl font-novarese-bold text-darkblue mb-6 pb-2 border-b-2 border-gold">NEWS RELEASES</h3>
    
    <!-- Featured News Release (Latest) -->
    <div class="bg-white rounded-lg shadow-xl p-0 mb-8 hover:shadow-2xl transition duration-300 overflow-hidden border-l-4 border-gold">
        <div class="bg-gray-100 px-4 py-2 flex items-center">
            <span class="text-darkblue font-bold uppercase text-sm tracking-wider">Latest Release</span>
            <div class="ml-auto flex items-center space-x-1">
                <span class="bg-gold h-2 w-2 rounded-full"></span>
                <span class="text-gray-600 text-xs">May 8, 2025</span>
            </div>
        </div>
        <div class="p-6">
            <h4 class="text-xl font-novarese-bold text-darkblue mb-3">ENTERPRISE GROUP ANNOUNCES RESULTS FOR FIRST QUARTER 2025</h4>
            <div class="h-1 w-16 bg-gold mb-4"></div>
            <p class="text-gray-600 mb-4">St. Albert, Alberta — (Newsfile Corp. – May 8, 2025) – Enterprise Group, Inc. (TSX: E) (OTCQB: ETOLF) (the “Company” or “Enterprise”).  Enterprise, a consolidator of energy services (including specialized equipment and services to the energy/resource sector), emphasizes technologies that mitigate, reduce, or eliminate CO2 and Green House Gas (GHG) and other harmful emissions for small local and Tier One resource clients is pleased to announce its Q1 2025 results.</p>
            <div class="flex justify-between items-center">
                <a href="news.php?id=5" class="bg-gold text-white px-4 py-2 rounded hover:bg-darkblue font-semibold transition duration-300">Read Full Release</a>
                <span class="text-xs text-gray-500">Source: </span>
            </div>
        </div>
    </div>
    
        <!-- News Release Item -->
    <div class="bg-gray-50 rounded-lg shadow-md p-6 mb-6 hover:shadow-lg transition duration-300">
        <h4 class="text-xl font-novarese-bold text-darkblue mb-2">Enterprise Group Signs Agreement to Acquire the Canadian Operations of FlexEnergy Solutions</h4>
        <p class="text-sm text-gray-500 mb-4">May 1, 2025</p>
        <p class="text-gray-600 mb-4">St. Albert, Alberta — (Newsfile Corp. – May 1, 2025) – Enterprise Group, Inc. (TSX: E) (OTCQB: ETOLF) (the “Company” or “Enterprise”).  Enterprise, a consolidator of energy services (including specialized equipment and services to the energy/resource sector), emphasizes technologies that mitigate, reduce, or eliminate CO2 and Green House Gas (GHG) and other harmful emissions for small local and Tier One resource clients, announces the signing of a Purchase and Sale Agreement to acquire 100% of the shares of Flex Leasing Power and Service ULC (“FlexEnergy Canada”) from Flex Leasing Power and Service LLC (“FlexEnergy Solutions”) for a purchase price of Cdn$20 million, subject to certain adjustments. Enterprise and FlexEnergy USA are finalizing the necessary documentation and anticipate closing the acquisition within the next few days. The acquisition will be financed using existing cash reserves and our new credit facility.</p>
        <div class="flex justify-between items-center">
            <a href="news.php?id=6" class="text-gold hover:text-darkblue font-semibold transition duration-300">Read More →</a>
            <span class="text-xs text-gray-500">Source: </span>
        </div>
    </div>
        
    <div class="text-center mt-8">
        <a href="news-releases.php" class="inline-block bg-darkblue text-white px-6 py-2 rounded hover:bg-gold transition duration-300">View All News</a>
    </div>
</div>                     
                    <!-- Recent Media Column -->
                    <div>
                        <h3 class="text-2xl font-novarese-bold text-darkblue mb-6 pb-2 border-b-2 border-gold">RECENT MEDIA</h3>
                        
                        <!-- Video 1 -->
                        <div class="bg-gray-50 rounded-lg shadow-md overflow-hidden mb-8 hover:shadow-lg transition duration-300">
                            <div class="relative pb-[56.25%] h-0">
                                <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/1YCofr4rKzw" title="Enterprise Group Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                            <div class="p-4">
                                <h4 class="text-lg font-semibold text-darkblue mb-2">Enterprise Group Corporate Overview</h4>
                                <p class="text-sm text-gray-500">Published on April 15, 2025</p>
                            </div>
                        </div>
                        
                        <!-- Video 2 -->
                        <div class="bg-gray-50 rounded-lg shadow-md overflow-hidden mb-8 hover:shadow-lg transition duration-300">
                            <div class="relative pb-[56.25%] h-0">
                                <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/_CSXgARuU9c" title="Enterprise Group Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                            <div class="p-4">
                                <h4 class="text-lg font-semibold text-darkblue mb-2">Evolution Power Technologies Showcase</h4>
                                <p class="text-sm text-gray-500">Published on March 22, 2025</p>
                            </div>
                        </div>
                        
                        <div class="text-center mt-8">
                            <a href="https://enterprise.sw7ft.com/analyst-coverage.php" class="inline-block bg-darkblue text-white px-6 py-2 rounded hover:bg-gold transition duration-300">View Media Gallery</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- CTA Section -->
        <section class="py-16 bg-darkblue text-white text-center">
            <div class="container mx-auto px-4">
                <h2 class="font-novarese-medium text-3xl md:text-4xl mb-6">Serving Western Canada</h2>
                <p class="max-w-3xl mx-auto mb-8 text-gray-300">With operations spanning across Alberta, British Columbia, and Saskatchewan, we provide comprehensive equipment and services to support energy, pipeline, and construction projects throughout Western Canada.</p>
                <div class="flex flex-wrap justify-center gap-4">
                    <a href="contact.php" class="inline-block bg-gold text-white px-6 py-3 font-open-sans hover:bg-white hover:text-gold transition duration-300 tracking-wider font-semibold">CONTACT US</a>
                    <a href="operations-map.php" class="inline-block bg-transparent border-2 border-white text-white px-6 py-3 font-open-sans hover:bg-white hover:text-darkblue transition duration-300 tracking-wider font-semibold">VIEW OPERATIONS MAP</a>
                </div>
            </div>
        </section>
    </main>
    
    <!-- Modal for Hart -->
    <div id="hart-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="modal-overlay absolute inset-0 bg-black opacity-50"></div>
        <div class="modal-container bg-white w-11/12 md:max-w-3xl mx-auto rounded shadow-lg z-50 overflow-y-auto max-h-[90vh]">
            <div class="modal-content py-6 px-8">
                <div class="flex justify-between items-center border-b pb-4 mb-6 bg-darkblue text-white -mx-8 px-8 py-4 rounded-t">
                    <div class="flex items-center">
                        <img src="https://enterprisegrp.ca/wp-content/uploads/2022/01/hart.png" alt="Hart Oilfield Rentals" class="h-16 mr-4">
                        <h3 class="text-2xl font-novarese-bold">Hart Oilfield Rentals</h3>
                    </div>
                    <button class="modal-close text-white hover:text-gold">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                </div>
                <div class="mb-6">
                    <p class="text-gray-600 mb-4">Hart Oilfield Rentals is a leading provider of specialized equipment rentals for oil and gas operations across Western Canada. With a comprehensive fleet of equipment designed for all-weather conditions, Hart supports exploration, production, and maintenance activities throughout the region.</p>
                    <p class="text-gray-600 mb-4">Our commitment to quality, safety, and customer service has established Hart as a preferred supplier for many blue-chip oil and gas producers.</p>
                    
                    <div class="mt-8">
                        <h4 class="text-xl font-novarese-bold text-darkblue mb-3">Key Services</h4>
                        <ul class="list-disc pl-5 text-gray-600 space-y-2">
                            <li>Site infrastructure equipment</li>
                            <li>Wellsite accommodations</li>
                            <li>Specialized pipeline equipment</li>
                            <li>Fuel storage and distribution systems</li>
                            <li>Temporary power generation</li>
                        </ul>
                    </div>
                </div>
                <div class="text-center">
                    <a href="https://hartoil.com" target="_blank" class="inline-block bg-gold text-white px-6 py-2 rounded transition hover:bg-darkblue">Visit Hart Website</a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Modal for Arctic Therm -->
    <div id="arctic-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="modal-overlay absolute inset-0 bg-black opacity-50"></div>
        <div class="modal-container bg-white w-11/12 md:max-w-3xl mx-auto rounded shadow-lg z-50 overflow-y-auto max-h-[90vh]">
            <div class="modal-content py-6 px-8">
                <div class="flex justify-between items-center border-b pb-4 mb-6 bg-darkblue text-white -mx-8 px-8 py-4 rounded-t">
                    <div class="flex items-center">
                        <img src="https://enterprisegrp.ca/wp-content/uploads/2022/01/artic.png" alt="Arctic Therm International" class="h-16 mr-4">
                        <h3 class="text-2xl font-novarese-bold">Arctic Therm International</h3>
                    </div>
                    <button class="modal-close text-white hover:text-gold">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                </div>
                <div class="mb-6">
                    <p class="text-gray-600 mb-4">Arctic Therm International specializes in providing flameless heating solutions for remote locations and extreme environments. Our patented technology delivers safe, efficient, and reliable heat for a wide range of applications in the energy, pipeline, and construction industries.</p>
                    <p class="text-gray-600 mb-4">Operating in temperatures as low as -40°C, Arctic Therm's equipment ensures continuous operations in the harshest winter conditions across Canada and the northern United States.</p>
                    
                    <div class="mt-8">
                        <h4 class="text-xl font-novarese-bold text-darkblue mb-3">Key Services</h4>
                        <ul class="list-disc pl-5 text-gray-600 space-y-2">
                            <li>Flameless heating for industrial applications</li>
                            <li>Pipeline thawing and drying</li>
                            <li>Ground thawing for winter construction</li>
                            <li>Heating for remote camps and facilities</li>
                            <li>Custom heating solutions for specialized requirements</li>
                        </ul>
                    </div>
                </div>
                <div class="text-center">
                    <a href="https://artictherm.com" target="_blank" class="inline-block bg-gold text-white px-6 py-2 rounded transition hover:bg-darkblue">Visit Arctic Therm Website</a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Modal for Westar -->
    <div id="westar-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="modal-overlay absolute inset-0 bg-black opacity-50"></div>
        <div class="modal-container bg-white w-11/12 md:max-w-3xl mx-auto rounded shadow-lg z-50 overflow-y-auto max-h-[90vh]">
            <div class="modal-content py-6 px-8">
                <div class="flex justify-between items-center border-b pb-4 mb-6 bg-darkblue text-white -mx-8 px-8 py-4 rounded-t">
                    <div class="flex items-center">
                        <img src="https://enterprisegrp.ca/wp-content/uploads/2022/01/westar.png" alt="Westar Oilfield Rentals" class="h-16 mr-4">
                        <h3 class="text-2xl font-novarese-bold">Westar Oilfield Rentals</h3>
                    </div>
                    <button class="modal-close text-white hover:text-gold">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                </div>
                <div class="mb-6">
                    <p class="text-gray-600 mb-4">Westar Oilfield Rentals provides specialized equipment and services for western Canadian energy producers, with a focus on safety, reliability, and environmental responsibility. Our comprehensive equipment fleet supports operations across Alberta, British Columbia, and Saskatchewan.</p>
                    <p class="text-gray-600 mb-4">With decades of experience in the energy industry, Westar delivers tailored solutions to meet the specific needs of our clients, from major producers to smaller independent operators.</p>
                    
                    <div class="mt-8">
                        <h4 class="text-xl font-novarese-bold text-darkblue mb-3">Key Services</h4>
                        <ul class="list-disc pl-5 text-gray-600 space-y-2">
                            <li>Wellsite equipment rentals</li>
                            <li>Tank farms and fluid storage solutions</li>
                            <li>Environmental protection equipment</li>
                            <li>Safety and spill containment systems</li>
                            <li>Equipment for regulatory compliance</li>
                        </ul>
                    </div>
                </div>
                <div class="text-center">
                    <a href="https://westaroilfieldrentals.com" target="_blank" class="inline-block bg-gold text-white px-6 py-2 rounded transition hover:bg-darkblue">Visit Westar Website</a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Modal for Evolution -->
    <div id="evolution-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="modal-overlay absolute inset-0 bg-black opacity-50"></div>
        <div class="modal-container bg-white w-11/12 md:max-w-3xl mx-auto rounded shadow-lg z-50 overflow-y-auto max-h-[90vh]">
            <div class="modal-content py-6 px-8">
                <div class="flex justify-between items-center border-b pb-4 mb-6 bg-darkblue text-white -mx-8 px-8 py-4 rounded-t">
                    <div class="flex items-center">
                        <img src="https://enterprisegrp.ca/wp-content/uploads/2022/04/westpower2.png" alt="Evolution Power" class="h-16 mr-4">
                        <h3 class="text-2xl font-novarese-bold">Evolution Power</h3>
                    </div>
                    <button class="modal-close text-white hover:text-gold">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                </div>
                <div class="mb-6">
                    <p class="text-gray-600 mb-4">Evolution Power provides specialized equipment and services for power generation and industrial applications. We offer innovative solutions for a wide range of industries, including energy, manufacturing, and utilities.</p>
                    <p class="text-gray-600 mb-4">With a focus on engineering excellence and reliability, Evolution Power has established itself as a trusted partner for companies requiring specialized power equipment and services.</p>
                    
                    <div class="mt-8">
                        <h4 class="text-xl font-novarese-bold text-darkblue mb-3">Key Services</h4>
                        <ul class="list-disc pl-5 text-gray-600 space-y-2">
                            <li>Power generation equipment and solutions</li>
                            <li>Industrial process equipment</li>
                            <li>Electrical systems and controls</li>
                            <li>Advanced energy management systems</li>
                            <li>Custom power solutions for specialized applications</li>
                        </ul>
                    </div>
                </div>
                <div class="text-center">
                    <a href="https://evolutionpower.ca" target="_blank" class="inline-block bg-gold text-white px-6 py-2 rounded transition hover:bg-darkblue">Visit Evolution Power Website</a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Modal for Highlights -->
    <div id="highlights-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="modal-overlay absolute inset-0 bg-black opacity-50"></div>
        <div class="modal-container bg-white w-11/12 md:max-w-5xl lg:max-w-6xl mx-auto rounded shadow-lg z-50 overflow-y-auto max-h-[90vh]">
            <div class="modal-content py-6 px-8">
                <div class="flex justify-between items-center border-b pb-4 mb-6 bg-darkblue text-white -mx-8 px-8 py-4 rounded-t">
                    <h3 class="text-2xl font-novarese-bold">ENTERPRISE AT A GLANCE</h3>
                    <button class="modal-close text-white hover:text-gold">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                </div>
                
                <div class="mb-6">
                    <div class="text-center mb-8">
                        <p class="text-gray-700 max-w-3xl mx-auto text-lg font-medium">Enterprise Group is a leading provider of mobile site infrastructure and services to the Canadian resource and construction industries.</p>
                    </div>
                    
                    <!-- Key Metrics Grid -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 lg:gap-8 mb-16">
                        <!-- Metric 1 -->
                        <div class="bg-white rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:shadow-xl hover:scale-105 border-t-4 border-gold">
                            <div class="p-6 text-center">
                                <span class="text-gold text-4xl font-bold block mb-3">12%</span>
                                <span class="text-darkblue font-medium text-sm">YoY revenue growth for 9 mths 2024</span>
                            </div>
                        </div>
                        
                        <!-- Metric 2 -->
                        <div class="bg-white rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:shadow-xl hover:scale-105 border-t-4 border-gold">
                            <div class="p-6 text-center">
                                <span class="text-gold text-4xl font-bold block mb-3">40%</span>
                                <span class="text-darkblue font-medium text-sm">Adj. EBITDA margin for 9 mths 2024</span>
                            </div>
                        </div>
                        
                        <!-- Metric 3 -->
                        <div class="bg-white rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:shadow-xl hover:scale-105 border-t-4 border-gold">
                            <div class="p-6 text-center">
                                <div class="text-darkblue font-novarese-bold text-xl mb-3">Market Leader</div>
                                <span class="text-gray-600 text-sm">In rapidly growing NG turbine electrification systems</span>
                            </div>
                        </div>
                        
                        <!-- Metric 4 -->
                        <div class="bg-white rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:shadow-xl hover:scale-105 border-t-4 border-gold">
                            <div class="p-6 text-center">
                                <span class="text-gold text-4xl font-bold block mb-3">$12.1M</span>
                                <span class="text-darkblue font-medium text-sm">Operating Cash Flow for 9 mths 2024</span>
                            </div>
                        </div>
                        
                        <!-- Metric 5 -->
                        <div class="bg-white rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:shadow-xl hover:scale-105 border-t-4 border-gold">
                            <div class="p-6 text-center">
                                <span class="text-gold text-4xl font-bold block mb-3">~28%</span>
                                <span class="text-darkblue font-medium text-sm">Insider ownership</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Geographical Presence -->
                    <div class="bg-darkblue rounded-lg shadow-lg p-8 mb-16 text-center transform transition duration-300 hover:shadow-xl relative overflow-hidden">
                        <div class="absolute top-0 left-0 w-2 h-full bg-gold"></div>
                        <div class="absolute top-0 right-0 w-2 h-full bg-gold"></div>
                        <p class="text-white text-xl font-medium">Strong presence across Western Canada with a concentration in Alberta and Northeastern British Columbia.</p>
                    </div>
                    
                    <!-- Key Investor Considerations -->
                    <div class="bg-white rounded-lg shadow-lg p-8 lg:p-10 relative overflow-hidden">
                        <div class="absolute top-0 right-0 w-40 h-40 bg-gold opacity-10 rounded-full -mr-16 -mt-16"></div>
                        <div class="absolute bottom-0 left-0 w-40 h-40 bg-darkblue opacity-10 rounded-full -ml-16 -mb-16"></div>
                        
                        <h3 class="text-darkblue font-novarese-bold text-2xl md:text-3xl lg:text-4xl mb-8 text-center relative z-10">KEY INVESTOR CONSIDERATIONS</h3>
                        
                        <!-- Main Value Proposition -->
                        <div class="mb-10 p-6 bg-darkblue bg-opacity-90 rounded-lg text-white relative z-10 shadow-md transform transition duration-300 hover:shadow-xl">
                            <p class="text-center text-white font-medium text-lg">Leader in mobile site infrastructure to the Canadian Energy sector and possess the current advantage of sole provider of low emission site electrification systems</p>
                        </div>
                        
                        <!-- Grid of considerations -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
                            <!-- Consideration 1 -->
                            <div class="flex items-start space-x-4 bg-gray-50 p-4 rounded-lg shadow-sm hover:shadow-md transition duration-300">
                                <div class="flex-shrink-0 w-6 h-6 mt-1 flex items-center justify-center bg-gold rounded-full">
                                    <div class="w-2 h-2 bg-white rounded-full"></div>
                                </div>
                                <p class="text-gray-700">Remarkably profitable with substantial margins and rapid expansion trajectory</p>
                            </div>
                            
                            <!-- Consideration 2 -->
                            <div class="flex items-start space-x-4 bg-gray-50 p-4 rounded-lg shadow-sm hover:shadow-md transition duration-300">
                                <div class="flex-shrink-0 w-6 h-6 mt-1 flex items-center justify-center bg-gold rounded-full">
                                    <div class="w-2 h-2 bg-white rounded-full"></div>
                                </div>
                                <p class="text-gray-700">Management & insider ownership now ~28%</p>
                            </div>
                            
                            <!-- Consideration 3 -->
                            <div class="flex items-start space-x-4 bg-gray-50 p-4 rounded-lg shadow-sm hover:shadow-md transition duration-300">
                                <div class="flex-shrink-0 w-6 h-6 mt-1 flex items-center justify-center bg-gold rounded-full">
                                    <div class="w-2 h-2 bg-white rounded-full"></div>
                                </div>
                                <p class="text-gray-700">Provider to the most reputable and sizeable producer clients in the sector</p>
                            </div>
                            
                            <!-- Consideration 4 -->
                            <div class="flex items-start space-x-4 bg-gray-50 p-4 rounded-lg shadow-sm hover:shadow-md transition duration-300">
                                <div class="flex-shrink-0 w-6 h-6 mt-1 flex items-center justify-center bg-gold rounded-full">
                                    <div class="w-2 h-2 bg-white rounded-full"></div>
                                </div>
                                <p class="text-gray-700">History of significant insider buying & share buy backs</p>
                            </div>
                            
                            <!-- Consideration 5 -->
                            <div class="flex items-start space-x-4 bg-gray-50 p-4 rounded-lg shadow-sm hover:shadow-md transition duration-300">
                                <div class="flex-shrink-0 w-6 h-6 mt-1 flex items-center justify-center bg-gold rounded-full">
                                    <div class="w-2 h-2 bg-white rounded-full"></div>
                                </div>
                                <p class="text-gray-700">Favorable trends in the energy market with avenues to venture into new markets, fostering considerable expansion organically and via acquisitions and mergers</p>
                            </div>
                            
                            <!-- Consideration 6 -->
                            <div class="flex items-start space-x-4 bg-gray-50 p-4 rounded-lg shadow-sm hover:shadow-md transition duration-300">
                                <div class="flex-shrink-0 w-6 h-6 mt-1 flex items-center justify-center bg-gold rounded-full">
                                    <div class="w-2 h-2 bg-white rounded-full"></div>
                                </div>
                                <p class="text-gray-700">NCIB program: Approx 11.3 million share reduction since inception</p>
                            </div>
                            
                            <!-- Consideration 7 -->
                            <div class="flex items-start space-x-4 bg-gray-50 p-4 rounded-lg shadow-sm hover:shadow-md transition duration-300">
                                <div class="flex-shrink-0 w-6 h-6 mt-1 flex items-center justify-center bg-gold rounded-full">
                                    <div class="w-2 h-2 bg-white rounded-full"></div>
                                </div>
                                <p class="text-gray-700">Healthy balance sheet and liquidity, facilitate the strategy for continued growth</p>
                            </div>
                            
                            <!-- Consideration 8 -->
                            <div class="flex items-start space-x-4 bg-gray-50 p-4 rounded-lg shadow-sm hover:shadow-md transition duration-300">
                                <div class="flex-shrink-0 w-6 h-6 mt-1 flex items-center justify-center bg-gold rounded-full">
                                    <div class="w-2 h-2 bg-white rounded-full"></div>
                                </div>
                                <p class="text-gray-700">Guided by a seasoned leadership team with a track record of effective strategic implementation, savvy downturn navigation, and a fervent dedication to enhancing value for investors</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Footer Section -->
    <footer class="bg-darkblue text-white py-12">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <!-- Column 1: Logo & Info -->
            <div>
                <img src="images/NewELogo-ai3-1024x616-p1.png" alt="Enterprise Group Inc Logo" class="w-48 mb-4">
                <p class="text-sm mt-4 text-gray-300">Enterprise Group provides specialized equipment and services in the build out of infrastructure for energy, pipeline, and construction industries.</p>
            </div>
            
            <!-- Column 2: Quick Links -->
            <div>
                <h3 class="font-open-sans text-xl mb-4 text-gold font-semibold tracking-wider uppercase">Quick Links</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-300 hover:text-gold transition duration-300">Home</a></li>
                    <li><a href="/company-overview.php" class="text-gray-300 hover:text-gold transition duration-300">About</a></li>
                    <li><a href="/esg.php" class="text-gray-300 hover:text-gold transition duration-300">ESG</a></li>
                    <li><a href="/news-releases.php" class="text-gray-300 hover:text-gold transition duration-300">Investors</a></li>
                    <li><a href="/evolution-power.php" class="text-gray-300 hover:text-gold transition duration-300">Gallery</a></li>
                    <li><a href="/contact.php" class="text-gray-300 hover:text-gold transition duration-300">Contact</a></li>
                </ul>
            </div>
            
            <!-- Column 3: Contact Info -->
            <div>
                <h3 class="font-open-sans text-xl mb-4 text-gold font-semibold tracking-wider uppercase">Contact</h3>
                <ul class="space-y-2 text-gray-300">
                    <li class="flex items-start">
                        <i class="fas fa-map-marker-alt mt-1 mr-3 text-gold"></i>
                        <span>Enterprise Group Inc.<br>Suite #2, 64 Riel Drive<br>St. Albert, Alberta T8N 4A4</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-phone mr-3 text-gold"></i>
                        <span>+1.780.418.4400</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-envelope mr-3 text-gold"></i>
                        <span>contact@enterprisegrp.ca</span>
                    </li>
                </ul>
            </div>
            
            <!-- Column 4: Newsletter -->
            <div>
                <h3 class="font-open-sans text-xl mb-4 text-gold font-semibold tracking-wider uppercase">Stay Updated</h3>
                <p class="mb-4 text-gray-300">Subscribe to our newsletter to receive updates and news.</p>
                <form class="flex flex-col space-y-3">
                    <input type="email" placeholder="Your Email" class="px-4 py-2 bg-white text-darkblue focus:outline-none focus:ring-2 focus:ring-gold">
                    <button type="submit" class="bg-gold hover:bg-white hover:text-gold text-white py-2 transition duration-300 font-open-sans tracking-wider font-semibold">Subscribe</button>
                </form>
            </div>
        </div>
        
        <!-- Social Media Icons -->
        <div class="flex justify-center space-x-6 mt-8">
            <a href="https://x.com/EnterpriseGrp" target="_blank" aria-label="Follow on X (Twitter)" class="text-white hover:text-gold transition-colors duration-300">
                <i class="fab fa-twitter text-xl"></i>
            </a>
            <a href="mailto:contact@enterprisegrp.ca" aria-label="Email us" class="text-white hover:text-gold transition-colors duration-300">
                <i class="far fa-envelope text-xl"></i>
            </a>
            <a href="https://my.linkedin.com/company/enterprise-group-inc-" target="_blank" aria-label="Connect on LinkedIn" class="text-white hover:text-gold transition-colors duration-300">
                <i class="fab fa-linkedin-in text-xl"></i>
            </a>
            <a href="https://www.youtube.com/channel/UCzQ85CXg44ZXs2U9DBRw4lw" target="_blank" aria-label="YouTube Channel" class="text-white hover:text-gold transition-colors duration-300">
                <i class="fab fa-youtube text-xl"></i>
            </a>
        </div>
        
        <!-- Copyright -->
        <div class="border-t border-gray-700 mt-10 pt-6 text-center text-sm text-gray-400">
            <p>&copy; 2025 Enterprise Group Inc. All rights reserved.</p>
            <div class="mt-4">
                <a href="tools.php" class="bg-gray-700 hover:bg-gold text-white text-xs px-3 py-1 rounded transition duration-300">TOOLS</a>
            </div>
        </div>
    </div>
</footer>     
    <!-- Scripts -->
    <!-- jQuery (if needed) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<!-- Initialize Swiper and other JavaScript -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Swiper slider
        const heroSwiper = new Swiper('.hero-swiper', {
            // Optional parameters
            loop: true,
            effect: 'fade',
            fadeEffect: {
                crossFade: true // Enable proper cross-fade transition
            },
            speed: 1000,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            
            // Enable touch interaction
            touchEventsTarget: 'wrapper',
            touchRatio: 1,
            touchAngle: 45,
            simulateTouch: true,
            
            // Enable navigation arrows
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            
            // Enhanced pagination as dots
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
                type: 'bullets', // Use bullets (dots) instead of progressbar
                bulletClass: 'swiper-pagination-bullet',
                bulletActiveClass: 'swiper-pagination-bullet-active',
                renderBullet: function (index, className) {
                    return '<span class="' + className + '"></span>';
                }
            },
            
            // Make sure only one slide is visible at a time
            slidesPerView: 1,
            allowTouchMove: true,
        });
        
        // Navbar color change on scroll
        const navbar = document.querySelector('.bg-transparent');
        
        window.addEventListener('scroll', function() {
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });
        
        // Mobile menu toggle functionality
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        
        if (mobileMenuButton && mobileMenu) {
            mobileMenuButton.addEventListener('click', function() {
                mobileMenu.classList.toggle('hidden');
            });
        }
        
        // Mobile dropdown toggle
        const mobileDropdownToggles = document.querySelectorAll('.mobile-dropdown-toggle');
        
        mobileDropdownToggles.forEach(toggle => {
            toggle.addEventListener('click', function() {
                // Get the dropdown menu
                const dropdownMenu = this.nextElementSibling;
                
                // Toggle the dropdown menu
                dropdownMenu.classList.toggle('active');
                
                // Toggle the arrow icon
                const icon = this.querySelector('i');
                if (icon) {
                    icon.classList.toggle('fa-chevron-down');
                    icon.classList.toggle('fa-chevron-up');
                }
                
                // Close other dropdowns
                mobileDropdownToggles.forEach(otherToggle => {
                    if (otherToggle !== toggle) {
                        const otherMenu = otherToggle.nextElementSibling;
                        const otherIcon = otherToggle.querySelector('i');
                        
                        if (otherMenu.classList.contains('active')) {
                            otherMenu.classList.remove('active');
                            if (otherIcon) {
                                otherIcon.classList.add('fa-chevron-down');
                                otherIcon.classList.remove('fa-chevron-up');
                            }
                        }
                    }
                });
            });
        });
        
        // Close mobile menu when clicking outside
        document.addEventListener('click', function(event) {
            const isClickInsideMenu = mobileMenu.contains(event.target);
            const isClickOnMenuButton = mobileMenuButton.contains(event.target);
            
            if (!isClickInsideMenu && !isClickOnMenuButton && !mobileMenu.classList.contains('hidden')) {
                mobileMenu.classList.add('hidden');
                
                // Reset all mobile dropdowns
                document.querySelectorAll('.mobile-dropdown-menu').forEach(menu => {
                    menu.classList.remove('active');
                });
                
                document.querySelectorAll('.mobile-dropdown-toggle i').forEach(icon => {
                    icon.classList.add('fa-chevron-down');
                    icon.classList.remove('fa-chevron-up');
                });
            }
        });
        
        // Modal functionality
        const modalOpenButtons = document.querySelectorAll('.modal-open');
        const modalCloseButtons = document.querySelectorAll('.modal-close');
        const modalOverlays = document.querySelectorAll('.modal-overlay');
        
        // Open modal when clicking button
        modalOpenButtons.forEach(button => {
            button.addEventListener('click', function() {
                const modalId = button.getAttribute('data-modal');
                const modal = document.getElementById(modalId);
                
                if (modal) {
                    modal.classList.remove('hidden');
                    document.body.classList.add('overflow-hidden'); // Prevent scrolling
                }
            });
        });
        
        // Close modal when clicking close button or overlay
        function closeAllModals() {
            const modals = document.querySelectorAll('[id$="-modal"]');
            modals.forEach(modal => {
                modal.classList.add('hidden');
            });
            document.body.classList.remove('overflow-hidden'); // Enable scrolling
        }
        
        modalCloseButtons.forEach(button => {
            button.addEventListener('click', closeAllModals);
        });
        
        modalOverlays.forEach(overlay => {
            overlay.addEventListener('click', closeAllModals);
        });
        
        // Close modals with Escape key
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                closeAllModals();
            }
        });
        
        // Initialize company mini slideshows
        const commonSliderConfig = {
            loop: true,
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
            speed: 800,
            slidesPerView: 1,
            effect: 'slide',
            pagination: {
                clickable: true,
                bulletClass: 'swiper-pagination-bullet',
                bulletActiveClass: 'swiper-pagination-bullet-active',
            }
        };
        
        // Hart slider
        if (document.querySelector('.hart-slider')) {
            const hartSlider = new Swiper('.hart-slider', {
                ...commonSliderConfig,
                pagination: {
                    el: '.hart-pagination',
                    clickable: true,
                }
            });
        }
        
        // Arctic Therm slider
        if (document.querySelector('.arctic-slider')) {
            const arcticSlider = new Swiper('.arctic-slider', {
                ...commonSliderConfig,
                pagination: {
                    el: '.arctic-pagination',
                    clickable: true,
                }
            });
        }
        
        // Westar slider
        if (document.querySelector('.westar-slider')) {
            const westarSlider = new Swiper('.westar-slider', {
                ...commonSliderConfig,
                pagination: {
                    el: '.westar-pagination',
                    clickable: true,
                }
            });
        }
        
        // Evolution slider
        if (document.querySelector('.evolution-slider')) {
            const evolutionSlider = new Swiper('.evolution-slider', {
                ...commonSliderConfig,
                pagination: {
                    el: '.evolution-pagination',
                    clickable: true,
                }
            });
        }
        
        // Quick Links Modal Functionality
        const quickLinksButton = document.getElementById('quick-links-button');
        const quickLinksModal = document.getElementById('quick-links-modal');
        const quickLinksClose = document.getElementById('quick-links-close');
        const quickLinksOverlay = quickLinksModal ? quickLinksModal.querySelector('.modal-overlay') : null;
        const quickLinksContainer = quickLinksModal ? quickLinksModal.querySelector('.modal-container') : null;
        
        if (quickLinksButton && quickLinksModal) {
            // Open quick links modal
            quickLinksButton.addEventListener('click', function() {
                quickLinksModal.classList.remove('hidden');
                document.body.classList.add('overflow-hidden');
                
                // Add animation after a tiny delay for smoother transition
                setTimeout(() => {
                    if (quickLinksContainer) {
                        quickLinksContainer.classList.remove('scale-95', 'opacity-0');
                        quickLinksContainer.classList.add('scale-100', 'opacity-100');
                    }
                }, 10);
            });
            
            // Close quick links modal
            function closeQuickLinksModal() {
                if (quickLinksContainer) {
                    quickLinksContainer.classList.add('scale-95', 'opacity-0');
                    quickLinksContainer.classList.remove('scale-100', 'opacity-100');
                }
                
                // Wait for animation to finish before hiding
                setTimeout(() => {
                    quickLinksModal.classList.add('hidden');
                    document.body.classList.remove('overflow-hidden');
                }, 300);
            }
            
            if (quickLinksClose) {
                quickLinksClose.addEventListener('click', closeQuickLinksModal);
            }
            
            if (quickLinksOverlay) {
                quickLinksOverlay.addEventListener('click', closeQuickLinksModal);
            }
            
            // Close with Escape key
            document.addEventListener('keydown', function(event) {
                if (event.key === 'Escape' && !quickLinksModal.classList.contains('hidden')) {
                    closeQuickLinksModal();
                }
            });
        }
        
        // Company Spotlight Image Gallery
        window.changeImage = function(imageSrc) {
            const featuredImage = document.getElementById('featured-image');
            const imageLoader = document.getElementById('image-loader');
            const imageCaption = document.getElementById('image-caption');
            
            // Image caption text based on the image
            const captionMap = {
                'images/DSC_3857-min-1024x684.jpg': 'Evolution Power Equipment - Natural Gas to Electricity Solutions',
                'images/DSC_3870-min-300x200.jpg': 'Evolution Power Installation - Mobile Power Generation Unit',
                'images/DSC_3880-min-1024x684.jpg': 'Evolution Power System - ESG-Compliant Energy Solutions',
                'images/epp-gen.jpg': 'Evolution Power Generator - Clean Energy Technologies'
            };
            
            if (featuredImage) {
                // Show loading indicator
                if (imageLoader) {
                    imageLoader.style.opacity = '1';
                }
                
                // Fade out caption
                if (imageCaption) {
                    imageCaption.style.opacity = '0';
                    imageCaption.style.transform = 'translateY(-5px)';
                }
                
                // Add fade-out and zoom-out effect
                featuredImage.style.opacity = '0';
                featuredImage.style.transform = 'scale(0.98)';
                
                // Change the image after a short delay for the fade effect
                setTimeout(function() {
                    featuredImage.src = imageSrc;
                    
                    // Update caption
                    if (imageCaption) {
                        setTimeout(function() {
                            imageCaption.textContent = captionMap[imageSrc] || 'Evolution Power Technologies';
                            imageCaption.style.opacity = '1';
                            imageCaption.style.transform = 'translateY(0)';
                        }, 200);
                    }
                    
                    // Preload the image to ensure it's loaded
                    const img = new Image();
                    img.onload = function() {
                        // Hide loading indicator
                        if (imageLoader) {
                            imageLoader.style.opacity = '0';
                        }
                        
                        // Fade back in with a slight delay to ensure image is loaded
                        featuredImage.style.opacity = '1';
                        featuredImage.style.transform = 'scale(1)';
                    };
                    img.src = imageSrc;
                    
                    // Fallback in case image load event doesn't fire
                    setTimeout(function() {
                        if (imageLoader) {
                            imageLoader.style.opacity = '0';
                        }
                        featuredImage.style.opacity = '1';
                        featuredImage.style.transform = 'scale(1)';
                    }, 500);
                }, 300);
            }
            
            // Update active thumbnail with enhanced animation
            document.querySelectorAll('.thumbnail-container').forEach(container => {
                const thumbnail = container.querySelector('.thumbnail');
                if (thumbnail && thumbnail.getAttribute('onclick').includes(imageSrc)) {
                    container.classList.add('border-gold');
                    container.classList.remove('border-transparent');
                    
                    // Add a subtle animation to the active thumbnail
                    thumbnail.style.transform = 'scale(1.1)';
                    setTimeout(() => {
                        thumbnail.style.transform = '';
                    }, 300);
                } else {
                    container.classList.remove('border-gold');
                    container.classList.add('border-transparent');
                }
            });
        };
        
        // Set the first thumbnail as active initially
        const firstThumbnail = document.querySelector('.thumbnail-container');
        if (firstThumbnail) {
            firstThumbnail.classList.add('border-gold');
            firstThumbnail.classList.remove('border-transparent');
        }
        
        // Initialize with DSC_3857 image selected
        document.addEventListener('DOMContentLoaded', function() {
            // Find the thumbnail containing DSC_3857 and make it active
            document.querySelectorAll('.thumbnail-container').forEach(container => {
                const thumbnail = container.querySelector('.thumbnail');
                if (thumbnail && thumbnail.getAttribute('onclick').includes('DSC_3857-min-1024x684.jpg')) {
                    container.classList.add('border-gold');
                    container.classList.remove('border-transparent');
                } else {
                    container.classList.remove('border-gold');
                    container.classList.add('border-transparent');
                }
            });
        });
    });
</script>

<!-- Add CSS for the image fade effect -->
<style>
    #featured-image {
        transition: all 0.5s ease-in-out;
        transform-origin: center;
    }
    
    .thumbnail-container {
        overflow: hidden;
        position: relative;
    }
    
    .thumbnail-container.border-gold {
        transform: scale(1.05);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        position: relative;
        z-index: 10;
    }
    
    .thumbnail-container.border-gold::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid #957d4e;
        z-index: 10;
        pointer-events: none;
    }
    
    .thumbnail {
        transition: all 0.4s ease;
    }
    
    .thumbnail:hover {
        transform: scale(1.15);
    }
    
    /* Add some nice fade-in animation */
    .animate-fade-in {
        animation: fadeIn 0.8s ease-in forwards;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    /* Subtle zoom effect on the main image when hovering */
    .rounded-lg:hover #featured-image {
        transform: scale(1.02);
    }
    
    /* Image caption styling */
    #image-caption {
        opacity: 1;
        transform: translateY(0);
        transition: all 0.4s ease;
        font-style: italic;
    }
    
    /* Loading spinner animation */
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    
    .animate-spin {
        animation: spin 1s linear infinite;
    }
    
    /* Swiper navigation arrows styling */
    .swiper-button-prev,
    .swiper-button-next {
        opacity: 0.7;
        width: 44px;
        height: 44px;
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        transition: all 0.3s ease;
    }
    
    .swiper-button-prev:hover,
    .swiper-button-next:hover {
        opacity: 1;
        background-color: rgba(149, 125, 78, 0.8); /* Gold color with transparency */
        transform: scale(1.1);
    }
    
    .swiper-button-prev:after,
    .swiper-button-next:after {
        font-size: 18px;
        font-weight: bold;
    }
</style>     <script>
        // Modal functionality
        function setupModal(modalId, openButtonId) {
            const modal = document.getElementById(modalId);
            const openButton = document.getElementById(openButtonId);
            const closeButton = modal.querySelector('.modal-close');
            const overlay = modal.querySelector('.modal-overlay');

            function openModal() {
                modal.classList.remove('hidden');
                document.body.style.overflow = 'hidden';
            }

            function closeModal() {
                modal.classList.add('hidden');
                document.body.style.overflow = '';
            }

            if (openButton) {
                openButton.addEventListener('click', openModal);
            }
            closeButton.addEventListener('click', closeModal);
            overlay.addEventListener('click', closeModal);
        }

        // Setup modals
        document.addEventListener('DOMContentLoaded', function() {
            // Setup specific modals
            setupModal('hart-modal', 'hart-button');
            setupModal('highlights-modal', 'highlights-button');
            
            // Setup all buttons with data-modal attribute
            document.querySelectorAll('[data-modal]').forEach(button => {
                button.addEventListener('click', function() {
                    const modalId = this.getAttribute('data-modal');
                    const modal = document.getElementById(modalId);
                    if (modal) {
                        modal.classList.remove('hidden');
                        document.body.style.overflow = 'hidden';
                    }
                });
            });
        });
    </script>
</body>
</html> 