/* version 1.0.0 */

#newsletter-email::placeholder {
  color: #fff;
}

.technology-media {
  flex: 1;
  position: relative;

  & img {
    width: 100%;
    border-radius: 1rem;
    filter: drop-shadow(0 0 20px rgba(12, 255, 185, 0.2));
  }
}

.technology-video {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 16/9;

  & iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
}

@keyframes floatCard {

  0%,
  100% {
    transform: translateY(0) rotateY(0);
  }

  50% {
    transform: translateY(-20px) rotateY(10deg);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.float-animation {
  animation: floatCard 6s ease-in-out infinite;
}

.fade-in-up {
  animation: fadeInUp 1s ease;
}

.fade-in-up-delay-200 {
  animation: fadeInUp 1s ease 0.2s backwards;
}

.fade-in-up-delay-400 {
  animation: fadeInUp 1s ease 0.4s backwards;
}

.fade-in-right {
  animation: fadeInRight 1s ease 0.6s backwards;
}

.flip-card {
  & .card {
    width: 270px;
    height: 170px;
  }
}

.card-container {
  max-width: 300px;
}

@media only screen and (max-width: 1000px) {
  #hero {
    margin-top: 100px;
  }
}

@media only screen and (max-width: 750px) {
  #hero {
    margin-top: 0px;
  }
}