/* Base Section Styling */
.tech-marquee-wrapper {
  /* background-color: #05030a; */
  padding: 30px 0;
  position: relative;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
}

.tech-marquee-wrapper *,
.tech-marquee-wrapper *::before,
.tech-marquee-wrapper *::after {
  box-sizing: border-box;
}

.tech-card img,
.tech-card .tech-svg {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  object-fit: contain;
  display: block;
}
/* Background Glows */
.tech-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  opacity: 0.2;
}
.glow-p { width: 350px; height: 350px; 
    /* background: #9333ea;  */
    top: -10%; left: 20%; }
.glow-b { width: 350px; height: 350px; 
    /* background: #3b82f6;  */
    bottom: -10%; right: 20%; }

/* Header Styling */
.tech-marquee-header {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
  padding: 0 20px;
}

.tech-badge {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(147, 51, 234, 0.15);
  border: 1px solid rgba(192, 132, 252, 0.4);
  border-radius: 20px;
  color: #c084fc;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.tech-title {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
  margin: 0;
}

/* Marquee Scroller Wrapper with Gradient Fades */
.marquee-container {
  width: 100%;
  padding:10px 0px 0px 0px;
  overflow: hidden;
  position: relative;
  z-index: 2;
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
}

/* Continuous Infinite Animation */
.marquee-content {
  display: flex;
  gap: 20px;
  padding-right: 20px;
  animation: tech-marquee-scroll 25s linear infinite;
}

.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

/* Technology Card Box */
.tech-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(18, 10, 32, 0.85) 0%, rgba(8, 4, 18, 0.75) 100%);
  border: 1px solid rgba(192, 132, 252, 0.2);
  border-radius: 12px;
  padding: 12px 24px;
  backdrop-filter: blur(10px);
  white-space: nowrap;
  transition: all 0.3s ease;
}

.tech-card:hover {
  border-color: rgba(192, 132, 252, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(147, 51, 234, 0.25);
}

.tech-card img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* Pure white filter for icons like WordPress and Next.js */
.tech-card img.white-icon {
  filter: brightness(0) invert(1);
}

.tech-card span {
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Animation Keyframes */
@keyframes tech-marquee-scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .tech-marquee-wrapper {
    padding: 20px 0;
  }
  .tech-title {
    font-size: 18px;
  }
  .tech-card {
    padding: 10px 18px;
  }
  .tech-card img {
    width: 22px;
    height: 22px;
  }
  .tech-card span {
    font-size: 13px;
  }
}