.slide-in-left {
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-in-right {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.show {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 768px) { /* Adjust breakpoint as needed */
  .slide-in-left,
  .slide-in-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}