/* Body & Navbar */
body { background-color: #f8f9fa; }
.navbar { border-bottom: 3px solid #0d6efd; }

/* Accent Borders */
.border-start-blue  { border-left: .25rem solid #0d6efd !important; }
.border-start-green { border-left: .25rem solid #198754 !important; }
.border-start-red   { border-left: .25rem solid #dc3545 !important; }
.border-start-teal  { border-left: .25rem solid #20c997 !important; }

/* Icon Colors */
.icon-blue   { color: #0d6efd; font-size: 2.5rem; }
.icon-green  { color: #198754; font-size: 2.5rem; }
.icon-red    { color: #dc3545; font-size: 2.5rem; }
.icon-teal   { color: #20c997; font-size: 2.5rem; }

/* Text */
.display-6 { font-weight: 500; }
small { font-size: 0.8rem; }

/* Add hover effect and pointer cursor to clickable cards */
.col-12.col-sm-6.col-lg-3 > .card {
  cursor: pointer; /* Change cursor to pointer on hover */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth transition for hover effects */
}

.col-12.col-sm-6.col-lg-3 > .card:hover {
  transform: translateY(-5px); /* Lift the card slightly */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* Add a stronger shadow */
}