Rather than white lets make it a dark theme, also for the teams each time would have a diffrent patch

swat.html

@@ -87,31 +87,28 @@
         section {
             padding: 3rem 0;
         }
-
         body {
-            background: #f8f9fa;
-            color: #212529;
+            background: #121212;
+            color: #e0e0e0;
             font-family: 'Helvetica Neue', Arial, sans-serif;
         }
 
         .bg-gradient-to-b {
-            background: #fff;
-            border-bottom: 1px solid #dee2e6;
+            background: #1e1e1e;
+            border-bottom: 1px solid #333;
         }
-
         .department-card {
-            background: #fff;
-            border: 1px solid #dee2e6;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-            transition: none;
+            background: #252525;
+            border: 1px solid #333;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+            transition: all 0.2s ease;
         }
 
         .department-card:hover {
-            transform: none;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+            transform: translateY(-3px);
+            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
         }
-
-        .btn-primary {
+.btn-primary {
             background: #005288;
             color: white;
             border: none;
@@ -166,8 +163,8 @@
             <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-700 mb-8">
-                Official tactical response division serving Key West, Florida
+                <p class="text-lg md:text-xl max-w-3xl mx-auto text-gray-400 mb-8">
+Official tactical response division serving Key West, Florida
             </p>
             <div class="flex flex-wrap justify-center gap-4">
                 <a href="https://asrp.us/apply" class="px-8 py-3 btn-primary rounded font-semibold">
@@ -186,20 +183,20 @@
                 <h2 class="text-2xl md:text-3xl font-bold mb-4 gradient-text">
                     ABOUT THE SWAT DIVISION
                 </h2>
-                <p class="max-w-3xl mx-auto text-gray-700">
-                    Specialized tactical unit handling high-risk situations with precision and professionalism
+                <p class="max-w-3xl mx-auto text-gray-400">
+Specialized tactical unit handling high-risk situations with precision and professionalism
                 </p>
 </div>
             
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                 <div>
-                    <h3 class="text-xl font-bold mb-4 text-gray-800">MISSION STATEMENT</h3>
-                    <p class="text-gray-700 mb-6">
+                    <h3 class="text-xl font-bold mb-4 text-white">MISSION STATEMENT</h3>
+<p class="text-gray-700 mb-6">
 The Atlantic Shores Roleplay SWAT Division is committed to providing specialized tactical response to high-risk situations that exceed the capabilities of standard law enforcement units. We operate with the highest standards of professionalism, precision, and dedication to public safety.
                     </p>
-                    <h3 class="text-xl font-bold mb-4 text-gray-800">CORE VALUES</h3>
-                    <ul class="space-y-3 text-gray-700">
-                        <li class="flex items-start">
+                    <h3 class="text-xl font-bold mb-4 text-white">CORE VALUES</h3>
+<ul class="space-y-3 text-gray-400">
+<li class="flex items-start">
                             <i class="fas fa-check text-gray-600 mt-1 mr-3"></i>
 <span>Tactical Excellence in all operations</span>
                         </li>
@@ -233,20 +230,20 @@ The Atlantic Shores Roleplay SWAT Division is committed to providing specialized
                 <h2 class="text-2xl md:text-3xl font-bold mb-4 gradient-text">
                     TACTICAL TEAMS
                 </h2>
-                <p class="max-w-2xl mx-auto text-gray-700">
-                    Specialized units within the SWAT division
+                <p class="max-w-2xl mx-auto text-gray-400">
+Specialized units within the SWAT division
                 </p>
 </div>
             
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                 <!-- Team Alpha -->
                 <div class="department-card rounded overflow-hidden">
-                    <div class="h-48 bg-gray-100 flex items-center justify-center">
-                        <div class="text-5xl font-bold text-gray-400">A</div>
-                    </div>
+                    <div class="h-48 bg-gray-800 flex items-center justify-center">
+                        <img src="http://static.photos/patches/640x360/1" alt="Team Alpha Patch" class="h-32">
+</div>
                     <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2 text-gray-800">TEAM ALPHA</h3>
-                        <p class="text-gray-700 mb-4">
+                    <h3 class="text-xl font-bold mb-2 text-white">TEAM ALPHA</h3>
+<p class="text-gray-400 mb-4">
 Primary assault team specializing in direct entry operations and high-risk warrant service.
                         </p>
                         <div class="flex items-center text-sm text-gray-500">
@@ -258,12 +255,12 @@ Primary assault team specializing in direct entry operations and high-risk warra
                 
                 <!-- Team Bravo -->
                 <div class="department-card rounded overflow-hidden">
-                    <div class="h-48 bg-gray-100 flex items-center justify-center">
-                        <div class="text-5xl font-bold text-gray-400">B</div>
-                    </div>
+                    <div class="h-48 bg-gray-800 flex items-center justify-center">
+                        <img src="http://static.photos/patches/640x360/2" alt="Team Bravo Patch" class="h-32">
+</div>
                     <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2 text-gray-800">TEAM BRAVO</h3>
-                        <p class="text-gray-700 mb-4">
+                    <h3 class="text-xl font-bold mb-2 text-white">TEAM BRAVO</h3>
+<p class="text-gray-700 mb-4">
 Sniper and reconnaissance team providing overwatch and precision engagement capabilities.
                         </p>
                         <div class="flex items-center text-sm text-gray-500">
@@ -275,12 +272,12 @@ Sniper and reconnaissance team providing overwatch and precision engagement capa
                 
                 <!-- Team Charlie -->
                 <div class="department-card rounded overflow-hidden">
-                    <div class="h-48 bg-gray-100 flex items-center justify-center">
-                        <div class="text-5xl font-bold text-gray-400">C</div>
-                    </div>
+                    <div class="h-48 bg-gray-800 flex items-center justify-center">
+                        <img src="http://static.photos/patches/640x360/3" alt="Team Charlie Patch" class="h-32">
+</div>
                     <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2 text-gray-800">TEAM CHARLIE</h3>
-                        <p class="text-gray-700 mb-4">
+                    <h3 class="text-xl font-bold mb-2 text-white">TEAM CHARLIE</h3>
+<p class="text-gray-700 mb-4">
 Breaching and entry specialists equipped with advanced tools for complex operations.
                         </p>
                         <div class="flex items-center text-sm text-gray-500">
@@ -292,12 +289,12 @@ Breaching and entry specialists equipped with advanced tools for complex operati
                 
                 <!-- Team Delta -->
                 <div class="department-card rounded overflow-hidden">
-                    <div class="h-48 bg-gray-100 flex items-center justify-center">
-                        <div class="text-5xl font-bold text-gray-400">D</div>
-                    </div>
+                    <div class="h-48 bg-gray-800 flex items-center justify-center">
+                        <img src="http://static.photos/patches/640x360/4" alt="Team Delta Patch" class="h-32">
+</div>
                     <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2 text-gray-800">TEAM DELTA</h3>
-                        <p class="text-gray-700 mb-4">
+                    <h3 class="text-xl font-bold mb-2 text-white">TEAM DELTA</h3>
+<p class="text-gray-700 mb-4">
 Crisis negotiation and tactical medical support team ensuring peaceful resolutions.
                         </p>
                         <div class="flex items-center text-sm text-gray-500">
@@ -326,8 +323,8 @@ Crisis negotiation and tactical medical support team ensuring peaceful resolutio
                     <div class="text-3xl mb-4">
                         <i class="fas fa-shield-alt text-gray-600"></i>
                     </div>
-                    <h3 class="text-lg font-bold mb-3 text-gray-800">LAW ENFORCEMENT EXPERIENCE</h3>
-                    <p class="text-gray-700">
+                    <h3 class="text-lg font-bold mb-3 text-white">LAW ENFORCEMENT EXPERIENCE</h3>
+<p class="text-gray-400">
 Minimum of 6 months active service in a law enforcement department with excellent performance record.
                     </p>
                 </div>
@@ -337,8 +334,8 @@ Minimum of 6 months active service in a law enforcement department with excellen
                     <div class="text-3xl mb-4">
                         <i class="fas fa-dumbbell text-gray-600"></i>
                     </div>
-                    <h3 class="text-lg font-bold mb-3 text-gray-800">PHYSICAL FITNESS</h3>
-                    <p class="text-gray-700">
+                    <h3 class="text-lg font-bold mb-3 text-white">PHYSICAL FITNESS</h3>
+<p class="text-gray-700">
 Must pass rigorous physical fitness tests including strength, endurance, and agility assessments.
                     </p>
                 </div>
@@ -348,8 +345,8 @@ Must pass rigorous physical fitness tests including strength, endurance, and agi
                     <div class="text-3xl mb-4">
                         <i class="fas fa-brain text-gray-600"></i>
                     </div>
-                    <h3 class="text-lg font-bold mb-3 text-gray-800">PSYCHOLOGICAL EVALUATION</h3>
-                    <p class="text-gray-700">
+                    <h3 class="text-lg font-bold mb-3 text-white">PSYCHOLOGICAL EVALUATION</h3>
+<p class="text-gray-700">
 Must successfully complete psychological screening to ensure mental stability under pressure.
                     </p>
                 </div>