@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Poppins', sans-serif;
 }
 
 :root {
     --primary-color: #4a4a4a;
     --secondary-color: #fefefe;
     --accent-color: #ff5722;
 }
 /* Override background behavior for small screens */
 /* Ensure page-content does not inherit background */
 /* Background overlay */
 /* Ensure content remains visible above overlay */
 
 body {
     display: flex;
     justify-content: center;
     align-items: center;
     /* Adjust height for better mobile view */
     flex-direction: column;
 }
 
 .logo-container {
     display: flex;
     padding: 20px;
 }
 
 .btn {
     background-color: var(--accent-color);
     padding: 8px 14px;
     cursor: pointer;
     border: 2px solid #0f0f0f;
     box-shadow: 2px 2px 0 0 white, 4px 4px 0 0 #0f0f0f;
     transition-duration: 200ms;
 }
 
 .btn:hover {
     box-shadow: 3px 3px, 6px 6px 0 0 #0f0f0f;
     transform: translate(-2px, -2px);
     background-color: var(--primary-color);
     box-shadow: 4px 4px 0 var(--accent-color);
     transform: translate(-4px, -4px);
 }
 
 .navigation {
     position: fixed;
     bottom: 0;
     width: 100%;
     padding: 10px 0;
     background-color: var(--secondary-color);
     z-index: 40;
     /* Ensures it's above all other elements */
 }
 /* Bootstrap-Based Layout */
 /* Navigation Bar */
 /* Navigation Bar */
 
 .navigation ul {
     display: flex;
     flex-wrap: nowrap;
     justify-content: space-between;
     /* ✅ Ensures even spacing */
     align-items: center;
     width: 100%;
     padding: 0;
 }
 /* Ensure Each <li> Uses Full Width */
 
 .navigation ul li {
     flex: 1;
     /* ✅ Allows automatic width expansion */
     text-align: center;
     padding: 15px 0;
 }
 /* Responsive Fixes for iPhone SE & iPhone 12 Pro */
 /* Anchor Styles */
 
 .navigation ul li a {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-decoration: none;
     padding: 5px;
     transition: all 0.3s ease-in-out;
 }
 /* Icon Wrapper */
 
 .icon-wrapper {
     position: relative;
     width: 80px;
     height: 80px;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: transparent;
     border-radius: 50%;
     transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
 }
 /* Active State - Moves Up & Highlights Background */
 
 .list.active .icon-wrapper {
     background-color: var(--accent-color);
     transform: translateY(-65px);
     /* ✅ Moves up for active state */
     border: 4px solid var(--secondary-color);
 }
 /* Icon Styling */
 
 .icon {
     font-size: 2rem;
     /* ✅ Reduced for better mobile scaling */
     color: var(--primary-color);
     transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
 }
 /* Text Styling */
 
 .text {
     font-size: 0.85rem;
     transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
     opacity: 0;
 }
 /* Active State - Moves Text Up & Reveals */
 
 .list.active .text {
     opacity: 1;
     transform: translateY(-15px);
 }
 /* Hover Effects */
 
 .navigation ul li:hover a .icon {
     transform: translateY(-5px);
 }
 /* Responsive Bootstrap Adjustments */
 
 @media (max-width: 576px) {
     .icon-wrapper {
         width: 65px;
         height: 65px;
     }
     .icon {
         font-size: 1.8rem;
     }
     .text {
         font-size: 0.75rem;
     }
 }
 
 .hero-bg {
     background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80');
     background-size: cover;
     background-position: center;
 }
 
 .about-bg {
     background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/images/police-officer-standing.jpg');
     background-size: cover;
     background-position: center;
 }
 
 #mapu {
     height: 600px;
     border-radius: 0.75rem;
     z-index: 0;
 }
 
 .map-container {
     position: relative;
 }
 
 .violations-bg {
     background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/images/police-finning.jpg');
     background-size: cover;
     background-position: center;
 }
 
 .feature-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }
 
 .fine-search {
     box-shadow: 0 10px 30px rgba(0, 123, 255, 0.2);
 }
 
 @keyframes pulse {
     0% {
         transform: scale(1);
     }
     50% {
         transform: scale(1.05);
     }
     100% {
         transform: scale(1);
     }
 }
 
 .pulse-animation {
     animation: pulse 2s infinite;
 }
 /* Box Variants */
 
 .large-box,
 .small-box {
     height: 300px;
     justify-content: center;
     align-items: center;
 }
 
 .wide-box {
     height: 250px;
 }
 /* Image Styling */
 
 .flip-card {
     width: 100%;
     height: 250px;
     perspective: 1000px;
 }
 
 .flip-card-inner {
     width: 100%;
     height: 100%;
     transition: transform 0.6s;
     transform-style: preserve-3d;
     position: relative;
 }
 
 .flip-card:hover .flip-card-inner {
     transform: rotateY(180deg);
 }
 
 .flip-card-front,
 .flip-card-back {
     position: absolute;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 20px;
     text-align: center;
     border-radius: 12px;
 }
 
 .flip-card-front {
     background: var(--primary-color);
     color: var(--secondary-color);
 }
 
 .flip-card-back {
     background: var(--accent-color);
     color: var(--secondary-color);
     transform: rotateY(180deg);
 }