.marquee-container {
    padding: 2rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  overflow-x: hidden;
}

.marquee-row {
  display: flex;
  width: 200%;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
  will-change: transform;
}

.row-1 {
  animation: scrollLeft 40s infinite linear;
  animation-fill-mode: forwards;
}

.row-2 {
  animation: scrollRight 45s infinite linear;
  animation-fill-mode: forwards;
}

.row-3 {
  animation: scrollLeft 35s infinite linear;
  animation-fill-mode: forwards;
}

.tech-icon {
  background: white;
  border-radius: 20px;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.tech-icon:hover {
  transform: translateY(-5px) scale(1.05);
}

.tech-icon img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.tech-text {
  font-size: 12px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-top: 8px;
}
@keyframes scrollLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes scrollRight {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

.icon-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}


@media (max-width: 500px) {
.marquee-container {
    padding: 1.4rem;
}

.tech-icon {
  border-radius: 20px;
  width: 100px;
  height: 100px;
 
}

.tech-icon img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

  .row-1 {
  animation: scrollLeft 20s infinite linear;
  animation-fill-mode: forwards;
}

.row-2 {
  animation: scrollRight 25s infinite linear;
  animation-fill-mode: forwards;
}

.row-3 {
  animation: scrollLeft 15s infinite linear;
  animation-fill-mode: forwards;
}
}