/* 1. Header / Information Widgets (#information-widgets) */
#information-widgets {
  background-color: rgba(20, 35, 65, 0.25) !important;
  padding: 16px !important;
  border-radius: 8px !important;
  color: #c0ccd4 !important;  /* Slightly darker text for improved contrast */
  margin-bottom: 14px !important;
}

/* 2. Service Widgets (first child div inside li.service) */
li.service > div:first-child {
  background-color: rgba(20, 35, 65, 0.3) !important;  /* Deep muted blue overlay */
  border: 1px solid rgba(20, 35, 65, 0.6) !important;
  border-radius: 6px !important;
  padding: 10px !important;
  color: #c0ccd4 !important;  /* Darker off-white for readability */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Hover: subtle cyan highlight effect */
li.service > div:first-child:hover {
  background-color: rgba(176, 224, 230, 0.15) !important; /* Light cyan tint */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Accent links inside service widgets */
li.service > div:first-child a,
li.service > div:first-child .widget-link {
  color: #00b7eb !important;  /* Muted cyan for gentle emphasis */
  text-decoration: underline !important;
}

/* 3. Typography & Spacing Consistency */
li.service > div:first-child,
#information-widgets {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.98rem !important;
}

/* 4. Reset Buttons to Default Styling */
button,
input[type="button"],
.input-highlight {
}