Make the hero background image a slideshow that changes automatically

departments.html

@@ -64,10 +64,15 @@
             </button>
         </div>
     </header>
-
     <!-- Hero Section -->
-    <section class="hero-section py-32">
-        <div class="container mx-auto px-4 text-center">
+    <section class="hero-section py-32 relative overflow-hidden">
+        <div class="slideshow-container absolute inset-0 w-full h-full">
+            <div class="slide fade" style="background-image: url('http://static.photos/government/1200x630/45')"></div>
+            <div class="slide fade" style="background-image: url('http://static.photos/government/1200x630/46')"></div>
+            <div class="slide fade" style="background-image: url('http://static.photos/government/1200x630/47')"></div>
+            <div class="slide fade" style="background-image: url('http://static.photos/government/1200x630/48')"></div>
+        </div>
+        <div class="container mx-auto px-4 text-center relative z-10">
             <h1 class="text-4xl md:text-6xl font-bold mb-6 text-gray-100">
                 Key West Departments
             </h1>
@@ -77,7 +82,43 @@
         </div>
     </section>
 
-    <!-- Departments Grid -->
+    <style>
+        .slideshow-container {
+            position: relative;
+            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7));
+        }
+        .slide {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-size: cover;
+            background-position: center;
+            opacity: 0;
+            transition: opacity 1s ease-in-out;
+        }
+        .slide.fade {
+            opacity: 1;
+        }
+    </style>
+
+    <script>
+        let currentSlide = 0;
+        const slides = document.querySelectorAll('.slide');
+        
+        function showSlides() {
+            for (let i = 0; i < slides.length; i++) {
+                slides[i].style.opacity = 0;
+            }
+            currentSlide = (currentSlide + 1) % slides.length;
+            slides[currentSlide].style.opacity = 1;
+            setTimeout(showSlides, 5000); // Change image every 5 seconds
+        }
+        
+        // Initialize first slide
+        slides[0].style.opacity = 1;
+        setTimeout(showSlides, 5000);
+    </script>
+<!-- Departments Grid -->
     <section class="py-20 bg-gray-900">
         <div class="container mx-auto px-4">
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

index.html

@@ -139,11 +139,16 @@
             </button>
         </div>
     </header>
-
     <!-- Hero Section -->
-    <section class="swat-hero py-32">
-        <div class="container mx-auto px-4 text-center">
-            <h1 class="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">
+    <section class="swat-hero py-32 relative overflow-hidden">
+        <div class="slideshow-container absolute inset-0 w-full h-full">
+            <div class="slide fade" style="background-image: url('http://static.photos/government/1200x630/45')"></div>
+            <div class="slide fade" style="background-image: url('http://static.photos/government/1200x630/46')"></div>
+            <div class="slide fade" style="background-image: url('http://static.photos/government/1200x630/47')"></div>
+            <div class="slide fade" style="background-image: url('http://static.photos/government/1200x630/48')"></div>
+        </div>
+        <div class="container mx-auto px-4 text-center relative z-10">
+<h1 class="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">
                 Special Weapons And Tactics
             </h1>
             <p class="text-xl md:text-2xl max-w-3xl mx-auto text-gray-300 mb-8">
@@ -160,7 +165,43 @@
         </div>
     </section>
 
-    <!-- About SWAT Section -->
+    <style>
+        .slideshow-container {
+            position: relative;
+            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7));
+        }
+        .slide {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-size: cover;
+            background-position: center;
+            opacity: 0;
+            transition: opacity 1s ease-in-out;
+        }
+        .slide.fade {
+            opacity: 1;
+        }
+    </style>
+
+    <script>
+        let currentSlide = 0;
+        const slides = document.querySelectorAll('.slide');
+        
+        function showSlides() {
+            for (let i = 0; i < slides.length; i++) {
+                slides[i].style.opacity = 0;
+            }
+            currentSlide = (currentSlide + 1) % slides.length;
+            slides[currentSlide].style.opacity = 1;
+            setTimeout(showSlides, 5000); // Change image every 5 seconds
+        }
+        
+        // Initialize first slide
+        slides[0].style.opacity = 1;
+        setTimeout(showSlides, 5000);
+    </script>
+<!-- About SWAT Section -->
     <section class="py-20 bg-gradient-to-b from-gray-950 to-black">
         <div class="container mx-auto px-4">
             <div class="text-center mb-16">

swat.html

@@ -158,9 +158,15 @@
         </div>
     </header>
     <!-- Hero Section -->
-    <section class="swat-hero py-20">
-<div class="container mx-auto px-4 text-center">
-            <h1 class="text-3xl md:text-4xl font-bold mb-6 gradient-text">
+    <section class="swat-hero py-20 relative overflow-hidden">
+        <div class="slideshow-container absolute inset-0 w-full h-full">
+            <div class="slide fade" style="background-image: url('http://static.photos/government/1200x630/45')"></div>
+            <div class="slide fade" style="background-image: url('http://static.photos/government/1200x630/46')"></div>
+            <div class="slide fade" style="background-image: url('http://static.photos/government/1200x630/47')"></div>
+            <div class="slide fade" style="background-image: url('http://static.photos/government/1200x630/48')"></div>
+        </div>
+        <div class="container mx-auto px-4 text-center relative z-10">
+<h1 class="text-3xl md:text-4xl font-bold mb-6 gradient-text">
                 SPECIAL WEAPONS AND TACTICS UNIT
             </h1>
                 <p class="text-lg md:text-xl max-w-3xl mx-auto text-gray-400 mb-8">
@@ -176,7 +182,44 @@ Official tactical response division serving Key West, Florida
             </div>
 </div>
     </section>
-    <!-- About SWAT Section -->
+
+    <style>
+        .slideshow-container {
+            position: relative;
+            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7));
+        }
+        .slide {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-size: cover;
+            background-position: center;
+            opacity: 0;
+            transition: opacity 1s ease-in-out;
+        }
+        .slide.fade {
+            opacity: 1;
+        }
+    </style>
+
+    <script>
+        let currentSlide = 0;
+        const slides = document.querySelectorAll('.slide');
+        
+        function showSlides() {
+            for (let i = 0; i < slides.length; i++) {
+                slides[i].style.opacity = 0;
+            }
+            currentSlide = (currentSlide + 1) % slides.length;
+            slides[currentSlide].style.opacity = 1;
+            setTimeout(showSlides, 5000); // Change image every 5 seconds
+        }
+        
+        // Initialize first slide
+        slides[0].style.opacity = 1;
+        setTimeout(showSlides, 5000);
+    </script>
+<!-- About SWAT Section -->
     <section class="bg-gradient-to-b bg-white">
 <div class="container mx-auto px-4">
             <div class="text-center mb-16">