main {
  margin-top: 96px;
}
main section#animated-intro {
  height: calc(100vh - 96px);
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}
main section#animated-intro .text-container {
  color: white;
  position: absolute;
  font-size: xxx-large;
  width: 70%;
  margin-left: 32px;
  text-shadow: 0 0 128px black, 0 0 128px black;
}
main section#animated-intro .text-container h1 {
  margin-bottom: 16px;
  font-family: "tektur";
}
main section#animated-intro .text-container p {
  font-family: "inter";
}
main section#animated-intro video {
  min-width: 110%;
  min-height: 110%;
  z-index: -1;
  object-fit: cover;
}
main section#about {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: xx-large;
  text-align: center;
  padding: 64px 0;
}
main section#about p {
  width: 70%;
}
main section#boxes {
  display: grid;
  grid-template-columns: repeat(1, 450px);
  justify-content: center;
  gap: 3vw;
}
main section#boxes .box {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  border-radius: 10px;
  text-decoration: none;
}
main section#boxes .box:hover p {
  background-color: rgba(0, 0, 0, 0.6666666667);
  font-size: 155%;
}
main section#boxes .box:hover img {
  transform: scale(1.1);
}
main section#boxes .box img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: all 0.1s;
}
main section#boxes .box p {
  font-size: 150%;
  padding: 3%;
  color: white;
  background-color: rgba(0, 0, 0, 0.5333333333);
  transform: translateY(-100%);
  transition: all 0.1s;
  text-shadow: -0.5px -0.5px 0 black, 0.5px -0.5px 0 black, -0.5px 0.5px 0 black, 0.5px 0.5px 0 black;
}
main section#clients {
  padding: 64px 0;
  font-size: xx-large;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  width: 100%;
  justify-self: center;
}
main section#clients p {
  font-family: "inter";
}
main section#clients .client-list {
  margin: 32px auto 0 auto;
  display: flex;
  animation: slide 30s linear infinite;
}
main section#clients .client-list img {
  margin: 0 32px;
  height: 96px;
  transition: transform 0.3s;
}
main section#clients .client-list:hover {
  animation-play-state: paused;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@media (max-width: 950px) {
  main section#animated-intro .text-container {
    font-size: xx-large;
  }
  main section#boxes {
    grid-template-columns: repeat(2, 300px);
  }
  main section#boxes .box p {
    font-size: medium;
  }
}
@media (max-width: 630px) {
  main section#about {
    font-size: x-large;
    padding: 32px 0;
  }
  main section#boxes {
    grid-template-columns: 300px;
  }
  main section#clients {
    font-size: x-large;
    padding: 32px 0;
  }
}
@media (max-width: 450px) {
  main section#animated-intro .text-container {
    font-size: x-large;
  }
}