/**
* Tech Stack styles
*
* @since 1.0.0
*/

.tech-stack {
  background: #05070f;
}

.tech-stack .logo {
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.031);
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
}

.tech-stack .first-row-marquee,
.tech-stack .second-row-marquee {
  animation: marquee-scroll 20s linear infinite alternate;
}

.tech-stack .first-row-marquee {
  animation-name: scroll-left;
}

.tech-stack .second-row-marquee {
  animation-name: scroll-right;
}

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

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

/**
* Mobile Responsiveness
*
* @since 1.0.0
*/

@media screen and (max-width: 1025px) {
  .tech-stack .tech-stack-text {
    font-size: 17px;
  }

  .tech-stack .col {
    width: 20%;
  }
}

@media screen and (max-width: 768px) {
  .tech-stack .tech-stack-text {
    font-size: 16px;
  }

  .tech-stack .col {
    width: 25%;
  }
}