/* 1. SHARED STYLES (Both Mobile & Desktop) */
.added-scroll-container {
  width: 100%;
  padding: 20px 20px;
  display: flex;
  overflow: hidden; /* Keeps things tidy */
}

.added-scroll-content {
  display: flex;
  gap: 20px;
  /* We remove the animation from here and move it to the Media Query */
}

.added-scroll-content img {
  height: 450px; /* You might want to make this smaller on mobile, see below */
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 6px 30px rgba(100, 110, 255, 0.2);
  flex-shrink: 0; /* Important: stops images from shrinking */
}

/* 2. TABLET & MOBILE (Touch Swipe) 
   Targeting everything up to the "biggest" tablet (~1024px) */
@media screen and (max-width: 851px) {
  .added-scroll-container {
    overflow-x: auto; /* Enable swiping */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling for iOS */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
  }

  .added-scroll-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome/Safari */
  }

  .added-scroll-content {
     /* Turn off the auto-scroll  animation: none !important; */
    animation: scroll-loop 20s linear infinite;
  }

  .added-scroll-content img {
    margin-right: 5px;
    height: 400px; /* Slightly smaller for mobile screens */
    scroll-snap-align: center;
  }
}

/* 3. LAPTOP & BIG SCREENS (Auto-Loop Animation) */
@media screen and (min-width: 850px) {
  .added-scroll-content {
    animation: scroll-loop 20s linear infinite;
  }

  .added-scroll-container:hover .added-scroll-content {
    animation-play-state: play;
  }
}

/* The Animation remains the same */
@keyframes scroll-loop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}