/* Minimalist, attention-grabbing text color animation */
/* --- NAVIGATION BEAUTIFICATION (Update/Replace existing nav styles in styles.css) --- */
#header {
  height: 100px;
  background: #ffffff; /* Keep background white */
  z-index: 997;
  /* Add a softer, more professional shadow than the default */
  box-shadow: 0px 3px 15px rgba(53, 76, 145, 0.1); 
  /* Add a subtle blue border at the bottom for a clean, defined look */
  border-bottom: 2px solid #e3f2fd; 
}
/* 2. Navigation Bar (The wrapper around the links) */
.navbar {
  padding: 0;
  /* Add a very subtle inner shadow to make the bar look "set" or embossed */
  box-shadow: inset 0 -1px 3px rgba(53, 76, 145, 0.05); 
  margin: 0 10px; /* Optional: adds a slight margin from the edges */
}

/* 3. Refine the Links (Ensure padding is correct after wrapper change) */
.navbar ul {
    /* Add a slight radius to the overall list container */
    border-radius: 8px;
    /* Optional: Small padding if you want space inside the nav container */
    padding: 5px 0; 
}
.navbar .nav-link {
  /* Base Style */
  text-decoration: none;
  color: #1c5c93; /* Darker blue text for readability */
  font-size: 16px;
  font-weight: 600;
  position: relative;
  transition: all 0.4s ease-in-out; /* Smooth transition for everything */
  padding: 10px 15px; /* Increase padding for better click area */
  margin: 0 5px;
  border-radius: 5px; /* Soft corners */
  
}

/* Hover Effect: Glow & Color Shift */
.navbar .nav-link:hover {
  color: #007bff;
  background-color: rgba(102, 202, 240, 0.1); 
  box-shadow: 0 0 10px rgba(102, 202, 240, 0.5); /* The "glow" effect */
}

/* Underline Animation (Simulating a wave/flow effect) */
.navbar .nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #428bca; /* Active blue color */
  transition: width 0.4s ease-in-out; /* The animation */
}

.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
  width: 100%; /* Expands to full width on hover or when active */
}

/* Special Styling for the 'Complaints' button */
.navbar .nav-link.attention {
  color: #ffffff; /* White text */
  background-color: #ff4500; /* Distinct color (e.g., strong orange/red for attention) */
  border: 1px solid #ff6600;
  /* Keep your pulse animation for the attention button */
  animation: pulse 4s ease-in-out infinite; 
  box-shadow: 0 0 15px rgba(255, 69, 0, 0.6);
}

/* Ensure pulse keyframes are still in styles.css (they are, so this is just a reminder) */
/*
@keyframes pulse {
  0%, 100% { color: #ffffff; background-color: #ff4500; box-shadow: 0 0 15px rgba(255, 69, 0, 0.2); }
  50% { color: #fff; background-color: #ff6600; box-shadow: 0 0 25px rgba(255, 69, 0, 1); }
}
*/
/* Custom Carousel Height Fix */
#carouselExampleControls {
  /* You can change 450px to whatever height you want (e.g., 500px, 60vh) */
  height: 880px !important; 
  overflow: hidden;
}

#carouselExampleControls .carousel-inner,
#carouselExampleControls .carousel-item {
  height: 100% !important; /* Force internal slides to match the 450px height */
}

#carouselExampleControls .carousel-item img {
  width: 100% !important;
  height: 100% !important;
  /* CRITICAL: This ensures the image covers the 450px space without squishing */
  object-fit: cover !important; 
  display: block;
}
/* --- VISUAL THEME ENHANCEMENT (Add to styles.css) --- */

/* 1. Subtle, Professional Background */
body {
  /* We use a subtle radial gradient for a clean, flowing water feel */
  background: radial-gradient(
    circle at 50% 10%,
    #f0f8ff, /* Very light, cool white at the top */
    #e8f4fd, /* Light cyan/sky blue near the middle */
    #ffffff /* Pure white for the rest of the body */
  );
  /* Fallback color if gradient isn't supported */
  background-color: #f0f8ff;
  /* Ensure the body takes up at least the full viewport height */
  min-height: 100vh;
}

/* 2. Soft Shadow for Main Content (Makes content "float" above the background) */
.container-fluid {
  box-shadow: 0 4px 20px rgba(53, 76, 145, 0.1); /* Subtle dark blue shadow */
  background-color: #ffffff; /* Ensure inner content blocks remain white for readability */
}

/* 3. Highlighted Sections (Like the 'Counts' section) */
.section-bg {
  /* Use a wave-like or clean light blue background for section highlights */
  background-color: #e3f2fd; 
  border-top: 1px solid #cceeff;
  border-bottom: 1px solid #cceeff;
}