/* Styles for FontAwesome icons in the data cards */
.bg-primary .fa-thin {
  color: white;
  font-size: 2rem; /* Adjust size as needed */
}

/* If you want a better background contrast for white icons */
.card-body .bg-primary {
  opacity: 1 !important; /* Override bg-opacity-10 */
  padding: 1.2rem !important; /* Larger padding for the icon container */
}

/* Button icon alignment */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #083658;
  color: white;
  /*border transparent*/
  border: none; /* Use a solid border for better visibility */
}

.btn:hover {
  background-color: #0a4a7d; /* Darker shade on hover */
  color: white; /* Ensure text remains white on hover */
}

/* Ensure consistent space between icon and text */
.btn i {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* For right-aligned icons */
.btn i.ms-2 {
  margin-top: -1px; /* Fine-tune vertical alignment */
}

/* For left-aligned icons */
.btn i.me-2 {
  margin-top: -1px; /* Fine-tune vertical alignment */
}

.data {
  background-color: #083658; /* Dark blue background */
  color: white; /* White text for better contrast */
  border-radius: 50%; /* Make it circular */
  width: 70px; /* Fixed width */
  height: 70px; /* Fixed height */
  display: flex; /* Use flexbox for centering */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
}

.data i {
  font-size: 1.8rem; /* Adjust icon size as needed */
  color: white; /* Ensure icon is white for contrast */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  line-height: 1; /* Ensure no extra space around the icon */
}