#card-swap-container {
  position: relative;
  height: 100%; 
  width: 100%; 
  overflow: hidden;
}

.swap-card {
  position: absolute;
  top: 100%;
  left: 100%;
  width: 100%; 
  height: 100%; 
  transform: translate(-50%, -50%);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transform-style: preserve-3d;
  transition: transform 0.3s;
  overflow: hidden;
}

@media (max-width: 768px) {
  #card-swap-container {
    height: 50vh;
  }

  .swap-card {
    left: 50%;
  }
}