.loader {
/*  border: 10px solid #f3f3f3;
  border-top: 10px solid #3498db;
  border-radius: 50%; */
  width: 100px;
  height: 100px;
  animation: spin 2s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-top: 10%;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*.load-more {
  background-color: #f0f0f0;
  border-radius: 4px;
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}*/

.emerging-element {
  animation-name: emerge;
  animation-duration: 1s; /* How long the animation takes */
  animation-timing-function: ease-out; /* Controls animation speed curve */
  animation-fill-mode: forwards; /* Keeps the final state after animation */
  opacity: 0; /* Initial state before animation starts */
}

@keyframes emerge {
  from {
    opacity: 0;
    transform: scale(0.8); /* Start slightly smaller */
  }
  to {
    opacity: 1;
    transform: scale(1); /* End at normal size */
  }
}