/* Add here all your CSS customizations */
/* Styles for the loader container */
.loader-container {
  display: none; /* Initially hidden */
  position: fixed; /* Fixed positioning */
  top: 50%; /* Vertically center */
  left: 50%; /* Horizontally center */
  transform: translate(-50%, -50%); /* Offset to center exactly */
  z-index: 1050; /* Ensure it's above other content */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background overlay */
  display: flex; /* Use flexbox to center the loader */
  justify-content: center; /* Horizontally center the loader */
  align-items: center; /* Vertically center the loader */
}

/* Loader spinner */
.loader {
  border: 8px solid #f3f3f3; /* Light gray border */
  border-top: 8px solid #3498db; /* Blue color for the spinner */
  border-radius: 50%; /* Make it circular */
  width: 50px; /* Set width */
  height: 50px; /* Set height */
  animation: spin 2s linear infinite; /* Animation to spin the loader */
}

/* Keyframes for spin animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}