/* Translate X (horizontal) */
.element {
  transform: translateX(50px);
  /* Move right 50px */
}

/* Translate Y (vertical) */
.element {
  transform: translateY(-20px);
  /* Move up 20px */
}

/* Translate both (X, Y) */
.element {
  transform: translate(50px, -20px);
  /* Move right 50px and up 20px */
}

/* Translate Z (3D depth) */
.element {
  transform: translateZ(50px);
  /* Move toward viewer */
}

/* Center element */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Center both horizontally and vertically */
}

/* Hover lift effect */
.card {
  transition: transform 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  /* Lift card up slightly */
}

/* Loading animation */
.dot {
  animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}