<!DOCTYPE html>
<html lang="en">
<head>

    <!-- Include Data Variables -->
    <!-- Dynamic Variables for Index Page -->


<!-- Main Content Section -->









<!-- History Section -->











<!-- Meta Data -->





<!-- Open Graph Data -->






<!-- Twitter Card Data -->






<!-- Organization Data -->








<!-- Favicon -->


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
	<style>
	.icon-white {
 	 font-size: 3rem; /* Adjust icon size as needed */
 	 color: white;
		}
	</style>
	
	<style>
	
	  /* Custom styles for the lightbox modal */
        #lightbox-modal {
            display: none; /* Hidden by default */
        }
        #lightbox-modal.active {
            display: flex; /* Show the modal when active */
        }
		
		/* Add margin above the lightbox image */
#lightbox-image {
    margin-top: 20px; /* Adjust the value as needed */
}
		
        /* Custom styles for the lightbox */
        .lightbox-overlay {
            @apply fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50;
        }

        .lightbox-content {
            @apply bg-white rounded-lg overflow-hidden shadow-lg max-w-lg w-full relative;
        }

        .lightbox-close {
            @apply absolute top-2 right-2 text-gray-700 hover:text-gray-900;
        }

        .lightbox-image {
            @apply w-full h-64 object-cover;
        }

        .lightbox-details {
            @apply p-4;
        }

        .lightbox-title {
            @apply text-2xl font-semibold mb-2;
        }

        .lightbox-description {
            @apply text-gray-700 mb-4;
        }

        .lightbox-link {
            @apply text-blue-500 hover:underline font-semibold;
        }
    </style>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO Meta Tags -->
    <meta name="description" content="Swift Media Group Ltd. provides premium web and software solutions for Western Canada's Energy, Mining, and Construction sectors.">
    <meta name="keywords" content="resource sector websites, energy industry web development, mining digital solutions, construction software, Western Canada web agency">
    <meta name="author" content="Swift Media Group Ltd.">
    <link rel="canonical" href="https://swiftmedia.ca">

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="Swift Media Group Ltd. - Premium Web Solutions for the Resource Sector">
    <meta property="og:description" content="Swift Media Group Ltd. delivers specialized digital solutions for Western Canada's Energy, Mining, and Construction industries.">
    <meta property="og:image" content="https://swiftmedia.ca/assets/images/og-image.jpg">
    <meta property="og:url" content="https://swiftmedia.ca">
    <meta property="og:type" content="website">

    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Swift Media Group Ltd. - Resource Sector Digital Solutions">
    <meta name="twitter:description" content="Premium web and software solutions for Western Canada's Energy, Mining, and Construction industries.">
    <meta name="twitter:image" content="https://swiftmedia.ca/assets/images/twitter-card.jpg">
    <meta name="twitter:site" content="@swiftmediaca">

    <!-- Dynamic Page Title -->
    <title>Swift Media Group Ltd | Premium Web Solutions for the Resource Sector</title>

    <!-- Favicon -->
    <link rel="icon" href="https://swiftmedia.ca/assets/images/favicon.png" type="image/png">

    <!-- Include Tailwind CSS -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.0/dist/tailwind.min.css" rel="stylesheet">

	
    <!-- style Include -->
      <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap" rel="stylesheet">
    <style>
        /* Gradient button styling */
        .gradient-button {
            background: linear-gradient(to right, #6a0dad, #00d4ff);
            color: white;
        }
        /* Overlay for the slider */
        .slider-overlay {
            background: rgba(0, 0, 0, 0.5);
        }
        /* Custom navigation font and size */
        .nav-link {
          font-family: "Open Sans", sans-serif;
            font-size: 1.125rem;
        }
        /* Hide dropdown menu initially */
        .dropdown-menu {
            display: none;
        }
		
		/* Modal Styles */
		
		.w-72 {
width: 14rem;
}
    </style>

<style>
    /* Optional: Transition for Desktop Dropdowns */
    nav .group:hover ul {
        opacity: 1;
        visibility: visible;
    }

    /* Ensure dropdowns have a minimum width */
    nav .group ul {
        min-width: 12rem; /* Adjust as needed */
    }

    /* Mobile submenu transitions */
    .toggle-submenu svg {
        transition: transform 0.3s;
    }

    .toggle-submenu.active svg {
        transform: rotate(180deg);
    }
</style>

</head>
<body class="font-sans antialiased">

    <!-- Header Include -->
    <!-- Header Section -->
<header class="absolute top-0 left-0 w-full p-4 z-10 bg-transparent">
    <div class="max-w-screen-xl mx-auto flex items-center justify-between">
        <!-- Logo -->
        <a href="http://swiftmedia.ca/">
            <img src="http://swiftmedia.ca/images/SVG-3.png" alt="Logo" class="w-72">
        </a>
        <!-- Hamburger Icon for Mobile -->
        <div class="md:hidden">
            <button id="menu-toggle" class="text-white focus:outline-none">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                     xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M4 6h16M4 12h16m-7 6h7"></path>
                </svg>
            </button>
        </div>

        <!-- Desktop Navigation -->
        <nav class="hidden md:flex space-x-4 items-center">
            <a href="/" class="text-white hover:text-gray-300">Home</a>

            <!-- About Dropdown -->
            <div class="relative group">
                <button class="flex items-center text-white hover:text-gray-300 focus:outline-none">
                    About
                    <svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                              d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.14.976l-4.25 4.5a.75.75 0 01-1.14 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                              clip-rule="evenodd" />
                    </svg>
                </button>
                <ul class="absolute left-0 top-full w-48 bg-gray-900 text-white rounded-md shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 invisible group-hover:visible">
                    <li><a href="/about.shtml" class="block px-4 py-2 hover:bg-gray-700">Our Business</a></li>
                </ul>
            </div>

            <!-- Articles Dropdown -->
            <div class="relative group">
                <button class="flex items-center text-white hover:text-gray-300 focus:outline-none">
                    Articles
                    <svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                              d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.14.976l-4.25 4.5a.75.75 0 01-1.14 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                              clip-rule="evenodd" />
                    </svg>
                </button>
                <ul class="absolute left-0 top-full w-48 bg-gray-900 text-white rounded-md shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 invisible group-hover:visible">
                    <li><a href="/publications.shtml" class="block px-4 py-2 hover:bg-gray-700">Publications</a></li>
                </ul>
            </div>

            <!-- Services Dropdown -->
            <div class="relative group">
                <button class="flex items-center text-white hover:text-gray-300 focus:outline-none">
                    Services
                    <svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                              d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.14.976l-4.25 4.5a.75.75 0 01-1.14 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                              clip-rule="evenodd" />
                    </svg>
                </button>
                <ul class="absolute left-0 top-full w-48 bg-gray-900 text-white rounded-md shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 invisible group-hover:visible">
                    <li><a href="/websites.shtml" class="block px-4 py-2 hover:bg-gray-700">Websites</a></li>
                    <li><a href="/applications.shtml" class="block px-4 py-2 hover:bg-gray-700">Applications</a></li>
                    <li><a href="/support.shtml" class="block px-4 py-2 hover:bg-gray-700">Support</a></li>
                    <li><a href="/hosting.shtml" class="block px-4 py-2 hover:bg-gray-700">Hosting</a></li>
                </ul>
            </div>

            <a href="/contact.shtml" class="text-white hover:text-gray-300">Contact</a>
            <a href="/swift-sites" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 focus:outline-none text-sm relative">
                Get Online
            </a>
        </nav>

        <!-- Mobile Dropdown Menu -->
        <div id="dropdown" class="dropdown-menu absolute top-full left-0 w-full bg-gray-900 text-white md:hidden hidden">
            <a href="/" class="block px-4 py-2 border-b border-gray-700 hover:bg-gray-700">Home</a>

            <!-- About Mobile Dropdown -->
            <div class="border-b border-gray-700">
                <button class="w-full text-left px-4 py-2 flex items-center justify-between focus:outline-none toggle-submenu">
                    About
                    <svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                              d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.14.976l-4.25 4.5a.75.75 0 01-1.14 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                              clip-rule="evenodd" />
                    </svg>
                </button>
                <ul class="hidden pl-4">
                    <li><a href="/about.shtml" class="block py-2 hover:bg-gray-700">Our Business</a></li>
                </ul>
            </div>

            <!-- Articles Mobile Dropdown -->
            <div class="border-b border-gray-700">
                <button class="w-full text-left px-4 py-2 flex items-center justify-between focus:outline-none toggle-submenu">
                    Articles
                    <svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                              d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.14.976l-4.25 4.5a.75.75 0 01-1.14 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                              clip-rule="evenodd" />
                    </svg>
                </button>
                <ul class="hidden pl-4">
                    <li><a href="/publications.shtml" class="block py-2 hover:bg-gray-700">Publications</a></li>
                </ul>
            </div>

            <!-- Services Mobile Dropdown -->
            <div class="border-b border-gray-700">
                <button class="w-full text-left px-4 py-2 flex items-center justify-between focus:outline-none toggle-submenu">
                    Services
                    <svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                              d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.14.976l-4.25 4.5a.75.75 0 01-1.14 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                              clip-rule="evenodd" />
                    </svg>
                </button>
                <ul class="hidden pl-4">
                    <li><a href="/websites.shtml" class="block py-2 hover:bg-gray-700">Websites</a></li>
                    <li><a href="/applications.shtml" class="block py-2 hover:bg-gray-700">Applications</a></li>
                    <li><a href="/support.shtml" class="block py-2 hover:bg-gray-700">Support</a></li>
                    <li><a href="/hosting.shtml" class="block py-2 hover:bg-gray-700">Hosting</a></li>
                </ul>
            </div>

            <a href="/contact.shtml" class="block px-4 py-2 hover:bg-gray-700">Contact</a>
            <a href="/swift-sites" class="block bg-blue-500 text-white w-full px-4 py-2 mt-2 text-center rounded hover:bg-blue-600 focus:outline-none">
                Get Online
            </a>
        </div>
    </div>
</header>

<script>
    document.getElementById('menu-toggle').addEventListener('click', function () {
        const dropdown = document.getElementById('dropdown');
        dropdown.classList.toggle('hidden');
    });

    const toggleSubmenus = document.querySelectorAll('.toggle-submenu');
    toggleSubmenus.forEach(button => {
        button.addEventListener('click', function () {
            const submenu = this.nextElementSibling;
            submenu.classList.toggle('hidden');
        });
    });
</script>
	
	    <!-- Slider Include -->
     <!-- Slider Section -->
  <section id="slider" class="relative overflow-hidden" style="height: 600px;">
    <!-- Slide Container -->
    <div class="absolute inset-0">
      <!-- Slide 1 -->
      <div
        class="slide absolute inset-0 bg-cover bg-center transition-opacity duration-1000 ease-in-out opacity-100"
        style="background-image: url('images/slide1.jpg');"
      ></div>
      <!-- Slide 2 -->
      <div
        class="slide absolute inset-0 bg-cover bg-center transition-opacity duration-1000 ease-in-out opacity-0"
        style="background-image: url('images/slide2.jpg');"
      ></div>
      <!-- Slide 3 -->
      <div
        class="slide absolute inset-0 bg-cover bg-center transition-opacity duration-1000 ease-in-out opacity-0"
        style="background-image: url('images/slide3.jpg');"
      ></div>
    </div>

    <!-- Text Content Overlay -->
    <div
      class="slider-overlay absolute inset-0 flex flex-col items-center justify-center text-white text-center px-4"
    >
      <h1 id="slider-title" class="text-4xl md:text-5xl font-bold mb-4">
        Creative Software Solutions
      </h1>
      <p id="slider-text" class="text-lg md:text-xl max-w-xl mb-6">
        We create cutting-edge software and web solutions tailored to your needs.
      </p>
      <a
        id="slider-button"
        href="/contact"
        class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg transition-all"
      >
        Learn More
      </a>

      <!-- Social Media Icons -->
      <div class="mt-8 flex space-x-6">
        <!-- YouTube -->
        <a href="https://www.youtube.com/yourchannel" target="_blank" rel="noopener noreferrer" aria-label="YouTube" class="text-white hover:text-red-600 transition-colors duration-300">
          <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24">
            <path d="M19.615 3.184C18.4 2.75 12 2.75 12 2.75s-6.4 0-7.615.434C3.215 3.618 2 4.75 2 6.384v11.232c0 1.633 1.215 2.766 2.385 2.15C5.6 20.25 12 20.25 12 20.25s6.4 0 7.615-.434c1.17-.616 2.385-1.777 2.385-3.412V6.384c0-1.633-1.215-2.766-2.385-3.2zM9.545 15.568V8.432l6.545 3.568-6.545 3.568z"/>
          </svg>
        </a>

        <!-- TikTok -->
        <a href="https://www.tiktok.com/@yourprofile" target="_blank" rel="noopener noreferrer" aria-label="TikTok" class="text-white hover:text-black transition-colors duration-300">
          <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24">
            <path d="M12 2C6.477 2 2 6.477 2 12c0 4.76 3.162 8.768 7.437 10.14v-6.91H7.898v-3.23h1.539V9.844c0-1.513.898-2.35 2.202-2.35.638 0 1.326.114 1.326.114v1.454h-.744c-.732 0-0.957.453-0.957 0.918v1.098h1.63l-.26 3.23h-1.37v6.91C18.838 20.768 22 16.76 22 12c0-5.523-4.477-10-10-10z"/>
          </svg>
        </a>

        <!-- LinkedIn -->
        <a href="https://www.linkedin.com/company/swift-media-group/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="text-white hover:text-blue-700 transition-colors duration-300">
          <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24">
            <path d="M4.98 3.5C4.98 4.88 3.88 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1 4.98 2.12 4.98 3.5zM0 8h5V24H0V8zm7.5 0h4.843v2.163h.07c.675-1.28 2.326-2.63 4.785-2.63 5.125 0 6.075 3.376 6.075 7.778V24h-5V16.443c0-1.865-.034-4.267-2.604-4.267-2.606 0-3.0 2.043-3.0 4.147V24h-5V8z"/>
          </svg>
        </a>

        <!-- X (Twitter) -->
        <a href="https://x.com/swiftmediagroup" target="_blank" rel="noopener noreferrer" aria-label="Twitter" class="text-white hover:text-blue-400 transition-colors duration-300">
          <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24">
            <path d="M24 4.557a9.93 9.93 0 01-2.828.775 4.932 4.932 0 002.165-2.724 9.864 9.864 0 01-3.127 1.195 4.916 4.916 0 00-8.38 4.482A13.94 13.94 0 011.671 3.149a4.916 4.916 0 001.523 6.573 4.897 4.897 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.918 4.918 0 004.588 3.417A9.867 9.867 0 010 21.542a13.94 13.94 0 007.548 2.213c9.056 0 14.01-7.496 14.01-13.986 0-.213-.005-.425-.014-.636A10.012 10.012 0 0024 4.557z"/>
          </svg>
        </a>
      </div>
    </section>

    <!-- JavaScript for Slider Functionality -->
    <script>
      const slides = document.querySelectorAll(".slide");
      const titles = [
        "Creative Software Solutions",
        "Crafting Modern Web Solutions",
        "Innovative Software Development",
      ];
      const texts = [
        "We create cutting-edge software and web solutions tailored to your needs.",
        "Transform your business with scalable, responsive, and user-focused websites.",
        "Delivering innovative software to help your business thrive in the digital age.",
      ];
      const buttonLinks = [
        "/contact", // For Slide 1
        "/contact", // For Slide 2
        "/contact", // For Slide 3
      ];

      let currentIndex = 0;
      const sliderTitle = document.getElementById("slider-title");
      const sliderText = document.getElementById("slider-text");
      const sliderButton = document.getElementById("slider-button");

      function changeSlide() {
        const nextIndex = (currentIndex + 1) % slides.length;

        // Fade out current slide
        slides[currentIndex].classList.remove("opacity-100");
        slides[currentIndex].classList.add("opacity-0");

        // Fade in next slide
        slides[nextIndex].classList.remove("opacity-0");
        slides[nextIndex].classList.add("opacity-100");

        // Update text
        sliderTitle.textContent = titles[nextIndex];
        sliderText.textContent = texts[nextIndex];
        sliderButton.href = buttonLinks[nextIndex];

        // Update index
        currentIndex = nextIndex;
      }

      // Start the slider
      function startSlider() {
        setInterval(changeSlide, 7000); // Change slides every 7 seconds
      }

      // Initialize slider on page load
      document.addEventListener("DOMContentLoaded", startSlider);
    </script>

    <!-- Main Content Section with Two Columns, White Background, and Centered Button -->
   <section class="py-16 px-8 bg-white">
        <div class="container mx-auto grid md:grid-cols-2 gap-8">
            <!-- Left Column Content -->

            <div class="p-8 bg-white">
						                <h1 class="text-4xl font-extrabold mb-6">Swift Media Group Ltd | Premium Web Solutions for the Resource Sector</h1>

                <h2 class="text-2xl font-bold mb-4">Resource Sector Specialists</h2>
                <p>Serving Western Canada's Energy, Mining, and Construction industries with premium digital solutions. Our team of experts understands the unique challenges of the resource sector, delivering high-performance websites and applications that drive operational efficiency and growth.</p>

                <h2 class="text-2xl font-bold mt-8 mb-4">Industry-Focused Technology</h2>
                <p>We combine deep expertise in both technology and resource industries to create digital solutions that address real-world challenges. From data visualization to field operations management, our solutions help you optimize processes and maintain your competitive edge.</p>
            </div>

            <!-- Right Column Content -->
            <div class="p-8 bg-white flex flex-col items-center">
                <img src="https://swiftmedia.ca/images/pf-s73-eve-set-14-mockup-2.jpg" alt="Resource Sector Technology Solutions" class="w-full mb-8">
            </div>
        </div>

        <!-- Call to Action -->
        <div class="flex justify-center mt-8">
            <a href="/contact.shtml" class="gradient-button px-8 py-4 text-lg font-semibold rounded-md hover:opacity-90 transition-opacity">
                Book a Consultation
            </a>
        </div>
    </section>

<!-- What We Do Section -->
  <section
    class="py-16 px-8 bg-cover bg-center relative"
    style="background-image: url('images/home-section-bg.jpg');"
  >
    <!-- Dark Overlay -->
    <div class="absolute inset-0 bg-black bg-opacity-80"></div>

    <!-- Content -->
    <div class="relative container mx-auto text-center text-white">
      <h2 class="text-3xl font-bold mb-8">Resource Sector Solutions</h2>
      
      <!-- Grid Container -->
      <div class="grid md:grid-cols-3 lg:grid-cols-3 gap-8">
        
        <!-- Service 1: Energy Solutions -->
        <div
          class="group p-6 shadow-lg rounded-lg transition-all transform hover:-translate-y-2"
          style="opacity: 0.9;"
        >
          <div class="flex justify-center mb-4">
            <i class="fas fa-bolt icon-white"></i>
          </div>
          <h3 class="text-xl font-bold mb-2">Energy Solutions</h3>
          <p>
            Digital platforms tailored for oil & gas, renewables, and utilities that enhance
            operational efficiency and support regulatory compliance.
          </p>
        </div>

        <!-- Service 2: Mining Technology -->
        <div
          class="group p-6 shadow-lg rounded-lg transition-all transform hover:-translate-y-2"
          style="opacity: 0.9;"
        >
          <div class="flex justify-center mb-4">
            <i class="fas fa-mountain icon-white"></i>
          </div>
          <h3 class="text-xl font-bold mb-2">Mining Technology</h3>
          <p>
            Advanced digital tools for mining operations that improve safety, streamline 
            reporting, and optimize resource management.
          </p>
        </div>

        <!-- Service 3: Construction Solutions -->
        <div
          class="group p-6 shadow-lg rounded-lg transition-all transform hover:-translate-y-2"
          style="opacity: 0.9;"
        >
          <div class="flex justify-center mb-4">
            <i class="fas fa-hard-hat icon-white"></i>
          </div>
          <h3 class="text-xl font-bold mb-2">Construction Solutions</h3>
          <p>
            Specialized web applications for construction management, safety compliance,
            and project communications for Western Canada's builders.
          </p>
        </div>

        <!-- Service 4: Field Operations -->
        <div
          class="group p-6 shadow-lg rounded-lg transition-all transform hover:-translate-y-2"
          style="opacity: 0.9;"
        >
          <div class="flex justify-center mb-4">
            <i class="fas fa-tablet-alt icon-white"></i>
          </div>
          <h3 class="text-xl font-bold mb-2">Field Operations</h3>
          <p>
            Mobile-friendly applications that connect field personnel with office systems 
            for real-time data collection, reporting, and communication.
          </p>
        </div>

        <!-- Service 5: Data Visualization -->
        <div
          class="group p-6 shadow-lg rounded-lg transition-all transform hover:-translate-y-2"
          style="opacity: 0.9;"
        >
          <div class="flex justify-center mb-4">
            <i class="fas fa-chart-line icon-white"></i>
          </div>
          <h3 class="text-xl font-bold mb-2">Data Visualization</h3>
          <p>
            Custom dashboards and reporting tools that transform complex resource sector
            data into actionable insights for decision-makers.
          </p>
        </div>

        <!-- Service 6: Compliance Systems -->
        <div
          class="group p-6 shadow-lg rounded-lg transition-all transform hover:-translate-y-2"
          style="opacity: 0.9;"
        >
          <div class="flex justify-center mb-4">
            <i class="fas fa-clipboard-check icon-white"></i>
          </div>
          <h3 class="text-xl font-bold mb-2">Compliance Systems</h3>
          <p>
            Digital solutions designed to manage the complex regulatory requirements
            facing energy, mining, and construction companies in Western Canada.
          </p>
        </div>

        <!-- Service 7: DevOps -->
        <div
          class="group p-6 shadow-lg rounded-lg transition-all transform hover:-translate-y-2"
          style="opacity: 0.9;"
        >
          <div class="flex justify-center mb-4">
            <i class="fas fa-tools icon-white"></i>
          </div>
          <h3 class="text-xl font-bold mb-2">DevOps</h3>
          <p>
            Implementing continuous integration and deployment pipelines to enhance
            collaboration and accelerate software delivery.
          </p>
        </div>

        <!-- Service 8: Infrastructure -->
        <div
          class="group p-6 shadow-lg rounded-lg transition-all transform hover:-translate-y-2"
          style="opacity: 0.9;"
        >
          <div class="flex justify-center mb-4">
            <i class="fas fa-network-wired icon-white"></i>
          </div>
          <h3 class="text-xl font-bold mb-2">Infrastructure</h3>
          <p>
            Designing and managing robust IT infrastructure to ensure scalability,
            reliability, and security for your business operations.
          </p>
        </div>

        <!-- Service 9: Software Development -->
        <div
          class="group p-6 shadow-lg rounded-lg transition-all transform hover:-translate-y-2"
          style="opacity: 0.9;"
        >
          <div class="flex justify-center mb-4">
            <i class="fas fa-laptop-code icon-white"></i>
          </div>
          <h3 class="text-xl font-bold mb-2">Software Development</h3>
          <p>
            Creating innovative software solutions tailored to your specific business needs,
            ensuring efficiency and effectiveness in your operations.
          </p>
        </div>
        
      </div>
    </div>
  </section>

  <!-- History Section -->
    <section class="py-16 px-8 bg-gray-50">
        <div class="container mx-auto">
            <!-- Section Header -->
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold">Our History</h2>
                <p class="mt-4 text-gray-600">Discover how Swift Media Group Ltd. has evolved to become the leading digital partner for Western Canada's resource sector.</p>
            </div>

            <!-- History Content -->
            <div class="grid md:grid-cols-2 gap-8">
                <div class="p-8">
                    <h3 class="text-2xl font-semibold mb-4">Our Journey</h3>
                    <p class="mb-4">Founded with a vision to serve the unique digital needs of the resource sector, Swift Media Group Ltd. has grown into Western Canada's premier web agency for Energy, Mining, and Construction companies. Our deep industry knowledge and technological expertise set us apart in delivering high-value solutions.</p>
                    <h3 class="text-2xl font-semibold mb-4">Our Services</h3>
                    <ul class="list-disc list-inside space-y-2">
                        <li>Industry-Specific Websites: Custom web solutions tailored to the resource sector's unique requirements.</li>
                        <li>Digital Strategy: Developing comprehensive digital roadmaps for resource companies.</li>
                        <li>Data Security: Enterprise-grade security solutions protecting sensitive industry data.</li>
                        <li>Field Operations Software: Custom applications that connect office and field operations seamlessly.</li>
                        <li>Compliance Solutions: Digital tools to help manage regulatory compliance and reporting.</li>
                    </ul>
                </div>
                <div class="p-8 bg-gray-100 flex flex-col">
                    <div class="mb-6">
                        <div class="flex space-x-4 justify-center">
                            <button id="tab-websites" class="px-4 py-2 bg-blue-500 text-white rounded-md focus:outline-none hover:bg-blue-600 transition-colors">Websites</button>
                            <button id="tab-applications" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md focus:outline-none hover:bg-gray-300 transition-colors">Applications</button>
                            <button id="tab-special-projects" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md focus:outline-none hover:bg-gray-300 transition-colors">Special Projects</button>
                        </div>
                    </div>

                    <!-- Thumbnails Container -->
                    <div>
                        <!-- Websites Thumbnails -->
                        <div id="content-websites" class="grid grid-cols-2 gap-4">
                            <!-- Thumbnail 1 -->
                            <button class="thumbnail-button" data-index="0">
                                <img src="images/thumbnail1.png" alt="Website Project 1" class="w-full h-48 object-cover rounded-lg shadow-md hover:opacity-90 transition-opacity duration-300 cursor-pointer">
                            </button>
                            <!-- Thumbnail 2 -->
                            <button class="thumbnail-button" data-index="1">
                                <img src="images/thumbnail2.jpg" alt="Website Project 2" class="w-full h-48 object-cover rounded-lg shadow-md hover:opacity-90 transition-opacity duration-300 cursor-pointer">
                            </button>
                            <!-- Thumbnail 3 -->
                            <button class="thumbnail-button" data-index="2">
                                <img src="images/thumbnail3.jpg" alt="Website Project 3" class="w-full h-48 object-cover rounded-lg shadow-md hover:opacity-90 transition-opacity duration-300 cursor-pointer">
                            </button>
                            <!-- Thumbnail 4 -->
                            <button class="thumbnail-button" data-index="3">
                                <img src="images/thumbnail4.jpg" alt="Website Project 4" class="w-full h-48 object-cover rounded-lg shadow-md hover:opacity-90 transition-opacity duration-300 cursor-pointer">
                            </button>
                        </div>

                        <!-- Applications Thumbnails -->
                        <div id="content-applications" class="grid grid-cols-2 gap-4 hidden">
                            <!-- Thumbnail 5 -->
                            <button class="thumbnail-button" data-index="4">
                                <img src="images/thumbnail5.jpg" alt="Application Project 1" class="w-full h-48 object-cover rounded-lg shadow-md hover:opacity-90 transition-opacity duration-300 cursor-pointer">
                            </button>
                            <!-- Thumbnail 6 -->
                            <button class="thumbnail-button" data-index="5">
                                <img src="images/thumbnail6.jpg" alt="Application Project 2" class="w-full h-48 object-cover rounded-lg shadow-md hover:opacity-90 transition-opacity duration-300 cursor-pointer">
                            </button>
                            <!-- Thumbnail 7 -->
                            <button class="thumbnail-button" data-index="6">
                                <img src="images/thumbnail7.jpg" alt="Application Project 3" class="w-full h-48 object-cover rounded-lg shadow-md hover:opacity-90 transition-opacity duration-300 cursor-pointer">
                            </button>
                            <!-- Thumbnail 8 -->
                            <button class="thumbnail-button" data-index="7">
                                <img src="images/thumbnail8.jpg" alt="Application Project 4" class="w-full h-48 object-cover rounded-lg shadow-md hover:opacity-90 transition-opacity duration-300 cursor-pointer">
                            </button>
                        </div>

                        <!-- Special Projects Thumbnails -->
                        <div id="content-special-projects" class="grid grid-cols-2 gap-4 hidden">
                            <!-- Thumbnail 9 -->
                            <button class="thumbnail-button" data-index="8">
                                <img src="images/thumbnail9.jpg" alt="Special Project 1" class="w-full h-48 object-cover rounded-lg shadow-md hover:opacity-90 transition-opacity duration-300 cursor-pointer">
                            </button>
                            <!-- Thumbnail 10 -->
                            <button class="thumbnail-button" data-index="9">
                                <img src="images/thumbnail10.jpg" alt="Special Project 2" class="w-full h-48 object-cover rounded-lg shadow-md hover:opacity-90 transition-opacity duration-300 cursor-pointer">
                            </button>
                            <!-- Thumbnail 11 -->
                            <button class="thumbnail-button" data-index="10">
                                <img src="images/thumbnail11.jpg" alt="Special Project 3" class="w-full h-48 object-cover rounded-lg shadow-md hover:opacity-90 transition-opacity duration-300 cursor-pointer">
                            </button>
                            <!-- Thumbnail 12 -->
                            <button class="thumbnail-button" data-index="11">
                                <img src="images/thumbnail12.jpg" alt="Special Project 4" class="w-full h-48 object-cover rounded-lg shadow-md hover:opacity-90 transition-opacity duration-300 cursor-pointer">
                            </button>
                        </div>
                    </div>

                    <!-- "View Past Projects" Link -->
                    <div class="mt-6 flex justify-center">
                        <a href="/past-projects" class="text-blue-500 hover:underline font-semibold">
                            View Past Projects
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- Lightbox Modal -->
        <div id="lightbox-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
            <div class="bg-white rounded-lg overflow-hidden shadow-lg max-w-lg w-full relative">
                <button id="lightbox-close" class="absolute top-2 right-2 text-gray-700 hover:text-gray-900 text-3xl">&times;</button>
                <img id="lightbox-image" src="" alt="Lightbox Image" class="w-full h-64 object-cover">
                <div class="p-4">
                    <h3 id="lightbox-title" class="text-2xl font-semibold mb-2"></h3>
                    <p id="lightbox-description" class="text-gray-700 mb-4"></p>
                    <a id="lightbox-url" href="#" target="_blank" class="text-blue-500 hover:underline font-semibold">Visit Website</a>
                </div>
            </div>
        </div>

        <!-- JavaScript -->
        <script>
            // Lightbox Content Array
            const lightboxContent = [
                {
                    image: "images/thumbnail1.png",
                    title: "Artic Therm International",
                    description: "Artic Therm International provides innovative heating solutions for various industries, specializing in flameless heating technology[1].",
                    url: "https://artictherm.com"
                },
                {
                    image: "images/thumbnail2.jpg",
                    title: "Evolution Power",
                    description: "Evolution Power offers advanced power generation and distribution solutions for industrial and commercial applications[2].",
                    url: "https://evolutionpower.ca"
                },
                {
                    image: "images/thumbnail3.jpg",
                    title: "Enterprise Group",
                    description: "Enterprise Group is a diversified construction services company providing specialized equipment and services to various sectors[3].",
                    url: "https://enterprisegrp.ca"
                },
                {
                    image: "images/thumbnail4.jpg",
                    title: "Fusion Industries",
                    description: "Fusion Industries specializes in innovative industrial solutions, focusing on efficiency and sustainability in manufacturing processes[4].",
                    url: "https://fusionindustries.ca"
                },
                {
                    image: "images/thumbnail5.jpg",
                    title: "The Instant Link",
                    description: "The Instant Link offers a comprehensive payment processing app, streamlining transactions for businesses of all sizes[5].",
                    url: "https://theinstantlink.com"
                },
                {
                    image: "images/thumbnail6.jpg",
                    title: "Campaign Builder",
                    description: "Campaign Builder provides a powerful email newsletter and SMS app for creating and managing marketing campaigns[6].",
                    url: "https://campaignbuilder.ca"
                },
                {
                    image: "images/thumbnail7.jpg",
                    title: "E-Tunez",
                    description: "E-Tunez specializes in engine tuning services, offering performance enhancements for various vehicle types[7].",
                    url: "https://e-tunez.com"
                },
                {
                    image: "images/thumbnail8.jpg",
                    title: "Huron Windows Winnipeg",
                    description: "Huron Windows Winnipeg provides high-quality window solutions for residential and commercial properties[8].",
                    url: "https://huronwin.com"
                },
                {
                    image: "images/thumbnail9.jpg",
                    title: "Premium Rentals",
                    description: "Premium Rentals offers quality edmonton apartments for rent.",
                    url: "https://premiumrentals.ca"
                },
                {
                    image: "images/thumbnail10.jpg",
                    title: "SwiftGrid",
                    description: "SwiftGrid provides innovative cloud hosting and web hosting solutions",
                    url: "https://swiftgrid.net"
                },
                {
                    image: "images/thumbnail11.jpg",
                    title: "WSA Engineering",
                    description: "WSA Engineering offers comprehensive engineering services across multiple disciplines, focusing on sustainable and efficient designs[11].",
                    url: "https://wsaeng.ca"
                },
                {
                    image: "images/thumbnail12.jpg",
                    title: "Modern Earth Landscaping",
                    description: "Modern Earth Landscaping provides professional landscaping services, creating beautiful and sustainable outdoor spaces[12].",
                    url: "https://modernearthlandscaping.com"
                }
            ];

            // Select all thumbnail buttons
            const thumbnailButtons = document.querySelectorAll('.thumbnail-button');

            // Select lightbox elements
            const lightboxModal = document.getElementById('lightbox-modal');
            const lightboxImage = document.getElementById('lightbox-image');
            const lightboxTitle = document.getElementById('lightbox-title');
            const lightboxDescription = document.getElementById('lightbox-description');
            const lightboxURL = document.getElementById('lightbox-url');
            const lightboxClose = document.getElementById('lightbox-close');

            // Function to open lightbox with specific content
            function openLightbox(index) {
                const content = lightboxContent[index];
                if (content) {
                    lightboxImage.src = content.image;
                    lightboxImage.alt = content.title;
                    lightboxTitle.textContent = content.title;
                    lightboxDescription.textContent = content.description;
                    lightboxURL.href = content.url;
                    lightboxModal.classList.add('active');
                    document.body.style.overflow = 'hidden'; // Prevent background scrolling
                } else {
                    console.error(`No content found for index: ${index}`);
                }
            }

            // Function to close lightbox
            function closeLightbox() {
                lightboxModal.classList.remove('active');
                document.body.style.overflow = 'auto'; // Restore scrolling
            }

            // Add click event listeners to all thumbnails
            thumbnailButtons.forEach(button => {
                button.addEventListener('click', () => {
                    const index = button.getAttribute('data-index');
                    if (index !== null && index >= 0 && index < lightboxContent.length) {
                        openLightbox(index);
                    } else {
                        console.error(`Invalid data-index: ${index}`);
                    }
                });
            });

            // Add click event listener to close button
            lightboxClose.addEventListener('click', closeLightbox);

            // Add click event listener to overlay to close lightbox when clicking outside content
            lightboxModal.addEventListener('click', (e) => {
                if (e.target === lightboxModal) {
                    closeLightbox();
                }
            });

            // Optional: Close lightbox with 'Escape' key
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape' && lightboxModal.classList.contains('active')) {
                    closeLightbox();
                }
            });

            // Tab Functionality
            const tabWebsites = document.getElementById('tab-websites');
            const tabApplications = document.getElementById('tab-applications');
            const tabSpecialProjects = document.getElementById('tab-special-projects');

            const contentWebsites = document.getElementById('content-websites');
            const contentApplications = document.getElementById('content-applications');
            const contentSpecialProjects = document.getElementById('content-special-projects');

            function showTab(tab) {
                // Hide all content
                contentWebsites.classList.add('hidden');
                contentApplications.classList.add('hidden');
                contentSpecialProjects.classList.add('hidden');

                // Reset button styles
                tabWebsites.classList.remove('bg-blue-500', 'text-white');
                tabWebsites.classList.add('bg-gray-200', 'text-gray-700');
                tabApplications.classList.remove('bg-blue-500', 'text-white');
                tabApplications.classList.add('bg-gray-200', 'text-gray-700');
                tabSpecialProjects.classList.remove('bg-blue-500', 'text-white');
                tabSpecialProjects.classList.add('bg-gray-200', 'text-gray-700');

                // Show selected tab content and update button styles
                if (tab === 'websites') {
                    contentWebsites.classList.remove('hidden');
                    tabWebsites.classList.remove('bg-gray-200', 'text-gray-700');
                    tabWebsites.classList.add('bg-blue-500', 'text-white');
                } else if (tab === 'applications') {
                    contentApplications.classList.remove('hidden');
                    tabApplications.classList.remove('bg-gray-200', 'text-gray-700');
                    tabApplications.classList.add('bg-blue-500', 'text-white');
                } else if (tab === 'special-projects') {
                    contentSpecialProjects.classList.remove('hidden');
                    tabSpecialProjects.classList.remove('bg-gray-200', 'text-gray-700');
                    tabSpecialProjects.classList.add('bg-blue-500', 'text-white');
                }
            }

            // Add event listeners to tabs
            tabWebsites.addEventListener('click', () => showTab('websites'));
            tabApplications.addEventListener('click', () => showTab('applications'));
            tabSpecialProjects.addEventListener('click', () => showTab('special-projects'));

            // Initialize default tab
            showTab('websites');
        </script>



    <!-- JavaScript for Tab Functionality -->
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        // Get all tab buttons
        const tabs = document.querySelectorAll('button[id^="tab-"]');
        // Get all content containers
        const contents = document.querySelectorAll('div[id^="content-"]');

        // Function to remove active classes from all tabs
        function clearActiveTabs() {
          tabs.forEach(tab => {
            tab.classList.remove('bg-blue-500', 'text-white');
            tab.classList.add('bg-gray-200', 'text-gray-700');
          });
        }

        // Function to hide all content
        function hideAllContents() {
          contents.forEach(content => {
            content.classList.add('hidden');
          });
        }

        // Add click event to each tab
        tabs.forEach(tab => {
          tab.addEventListener('click', function() {
            const target = this.id.replace('tab-', 'content-');
            const targetContent = document.getElementById(target);

            // Clear active classes and hide all contents
            clearActiveTabs();
            hideAllContents();

            // Add active classes to the clicked tab
            this.classList.remove('bg-gray-200', 'text-gray-700');
            this.classList.add('bg-blue-500', 'text-white');

            // Show the target content
            targetContent.classList.remove('hidden');
          });
        });
      });
    </script>

    <style>
      /* Hover effect for changing background gradient */
      .group:hover {
        background: rgba(88, 24, 140, 0.8) !important;
        opacity: 1 !important;
      }
    </style>

    <!-- Slider Include -->
    <!-- Footer Section -->
<!-- Floating Notification Message -->
<!-- Floating Notification Message -->
<!-- Floating Notification Message -->
<div
  id="notification-message"
  class="fixed bottom-6 left-6 bg-black text-white py-2 px-4 rounded-lg shadow-lg z-50 max-w-xs"
>
  <p id="notification-text">
    Hey, we're currently updating our website. Apologies for any glitches! Last updated: calculating...
  </p>
</div>

<script>
  // Calculate the last updated time
  const currentTime = new Date();
  const updatedTime = new Date(currentTime.getTime() - 1.4 * 60 * 60 * 1000); // 1.4 hours ago
  const formattedTime = updatedTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });

  // Update the notification message
  document.getElementById("notification-text").innerHTML = `
    Hey, we're currently updating our website. Apologies for any glitches! Last updated: ${formattedTime}.
  `;
</script>


<!-- Footer Section -->
<footer class="bg-gray-800 text-white py-8 relative">
  <div class="max-w-screen-xl mx-auto px-4">
    <!-- Top Section: Company Info and Links -->
    <div class="flex flex-col md:flex-row justify-between items-center mb-6">
      <!-- Company Info -->
      <div class="mb-4 md:mb-0">
        <p>&copy; 2024 SwiftMedia. All rights reserved.</p>
      </div>

      <!-- Navigation Links -->
      <div class="flex space-x-4">
        <a href="/terms-of-use" class="hover:text-gray-400">Terms of Use</a>
        <a href="/privacy-policy" class="hover:text-gray-400">Privacy Policy</a>
      </div>
    </div>

    <!-- Chat Icon -->
    <button
      id="chat-button"
      class="fixed bottom-6 right-6 bg-blue-500 hover:bg-blue-600 text-white p-4 rounded-full shadow-lg focus:outline-none z-50"
      aria-label="Chat with us"
    >
      <!-- Chat Icon SVG -->
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
        <path d="M2 2h20v16H6l-4 4V2z" />
      </svg>
    </button>
  </div>
</footer>



<!-- Chat Modal -->
<div
  id="chat-modal"
  class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-60"
  aria-hidden="true"
>
  <div class="bg-white rounded-lg w-11/12 md:w-1/3 shadow-lg relative">
    <!-- Close Button -->
    <button
      id="close-chat"
      class="absolute top-2 right-2 text-gray-600 hover:text-gray-800 focus:outline-none"
      aria-label="Close chat"
    >
      <svg class="w-6 h-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" />
      </svg>
    </button>

    <!-- Chat Header -->
    <div class="bg-blue-500 text-white p-4 rounded-t-lg">
      <h2 class="text-lg font-semibold">Chat with Us</h2>
    </div>

    <!-- Chat Body -->
    <div class="p-4 h-64 overflow-y-auto">
      <!-- Placeholder for chat messages -->
      <div id="chat-messages" class="space-y-4">
        <div class="flex">
          <div class="bg-gray-200 p-2 rounded-lg">Hey, Thanks for Stopping by! I'm Swifty, how can I help you?</div>
        </div>
      </div>
    </div>

    <!-- Chat Input -->
    <div class="p-4 border-t border-gray-300">
      <form id="chat-form" class="flex space-x-2">
        <input
          type="text"
          id="chat-input"
          placeholder="Type your message..."
          class="flex-1 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          required
        />
        <button
          type="submit"
          class="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-md focus:outline-none"
        >
          Send
        </button>
      </form>
    </div>
  </div>
</div>

<script>
  // Chat interaction logic
  const chatButton = document.getElementById('chat-button');
  const chatModal = document.getElementById('chat-modal');
  const closeChat = document.getElementById('close-chat');
  const chatForm = document.getElementById('chat-form');
  const chatMessages = document.getElementById('chat-messages');
  const chatInput = document.getElementById('chat-input');

  const botResponses = [
    { keywords: ["hello", "hi", "hey"], response: "Hi there! How can I assist you today?" },
    { keywords: ["how are you", "how’s it going"], response: "I'm just a bot, but I'm here to help! How can I assist you?" },
    { keywords: ["services", "offer", "solutions"], response: "We offer a variety of services tailored to your needs, including marketing, web development, and consulting. What are you interested in?" },
    { keywords: ["price", "cost", "fees", "rates"], response: "Our pricing depends on your specific requirements. For details, please visit our <a href='/contact' class='text-blue-500 underline'>contact page</a>." },
    { keywords: ["support", "help", "assist"], response: "Our team is here to help! You can also reach us directly via the <a href='/contact' class='text-blue-500 underline'>contact page</a>." },
    { keywords: ["location", "where are you", "based"], response: "We operate online, but our team is globally distributed. What can we help you with today?" },
    { keywords: ["thank you", "thanks", "appreciate"], response: "You're welcome! Let me know if there's anything else I can assist with." },
    { keywords: ["contact", "reach out"], response: "You can reach us directly through our <a href='/contact' class='text-blue-500 underline'>contact page</a>. We look forward to hearing from you!" },
    { keywords: ["joke", "funny"], response: "Why did the computer go to the doctor? It had a bad case of 'byte'-flu! How can I assist you today?" },
    { keywords: ["goodbye", "bye", "see you"], response: "Goodbye! Feel free to reach out anytime. Have a great day!" },
    { keywords: ["hours", "availability"], response: "We're available 24/7 through our website. For direct inquiries, visit our <a href='/contact' class='text-blue-500 underline'>contact page</a>." },
    { keywords: ["team", "staff"], response: "Our team consists of experts dedicated to delivering the best services. How can we assist you?" },
    { keywords: ["projects", "portfolio"], response: "We’ve worked on diverse projects across industries. Visit our <a href='/contact' class='text-blue-500 underline'>contact page</a> to learn more." },
    { keywords: ["robot", "are you real"], response: "I’m a virtual assistant here to help you! Let me know how I can assist you today." },
    { keywords: ["time", "date"], response: `The current time is ${new Date().toLocaleTimeString()} and today’s date is ${new Date().toLocaleDateString()}. How can I assist you?` },
    { keywords: ["problems", "issues", "error"], response: "I'm sorry to hear that! Could you provide more details, or contact our support team via the <a href='/contact' class='text-blue-500 underline'>contact page</a>?" },
    { keywords: ["happy", "great"], response: "That’s awesome to hear! Is there anything specific I can help you with?" },
    { keywords: ["angry", "mad"], response: "I'm here to assist and make things right. Please let me know what’s troubling you." },
    { keywords: ["career", "jobs"], response: "We’re always looking for talented individuals. Visit our <a href='/careers' class='text-blue-500 underline'>careers page</a> to learn more." },
    { keywords: [], response: "I'm here to help! Could you provide more details, or visit our <a href='/contact' class='text-blue-500 underline'>contact page</a> for more information?" }
  ];

  function getBotResponse(message) {
    const lowerCaseMessage = message.toLowerCase();
    for (const botResponse of botResponses) {
      if (botResponse.keywords.some(keyword => lowerCaseMessage.includes(keyword))) {
        return botResponse.response;
      }
    }
    // Default response
    return botResponses[botResponses.length - 1].response;
  }

  function openChat() {
    chatModal.classList.remove('hidden');
    chatInput.focus();
  }

  function closeChatModal() {
    chatModal.classList.add('hidden');
  }

  chatButton.addEventListener('click', openChat);
  closeChat.addEventListener('click', closeChatModal);

  chatForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const userMessage = chatInput.value.trim();
    if (!userMessage) return;

    // Append user message
    chatMessages.innerHTML += `
      <div class="flex justify-end">
        <div class="bg-blue-500 text-white p-2 rounded-lg">${userMessage}</div>
      </div>
    `;
    chatInput.value = "";

    // Simulate bot response
    setTimeout(() => {
      const botResponse = getBotResponse(userMessage);
      chatMessages.innerHTML += `
        <div class="flex">
          <div class="bg-gray-200 p-2 rounded-lg">${botResponse}</div>
        </div>
      `;
      chatMessages.scrollTop = chatMessages.scrollHeight;
    }, 1000);
  });
</script>


    <!-- JavaScript for Dropdown Menu Toggle -->
    <script>
        const menuToggle = document.getElementById('menu-toggle');
        const dropdown = document.getElementById('dropdown');

        menuToggle.addEventListener('click', () => {
            dropdown.classList.toggle('active');
            dropdown.style.display = dropdown.classList.contains('active') ? 'block' : 'none';
        });
    </script>



</body>
</html>
