/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Description: A child theme of Hello Elementor.
Author: Your Name
Author URI: https://yourwebsite.com
Template: hello-elementor
Version: 1.0.0
*/

/* Custom CSS goes below this line */
/* GENERAL RESET FOR DEMO PURPOSES */

.one{
    color:black !important;
}
.word {
  opacity: 0;
  transform: translateX(calc(var(--slide-dir, 1) * 40px)) scale(0.95);
  animation-fill-mode: forwards;
  animation-name: slideFadeScaleIn;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-delay: var(--delay, 0s);
}

@keyframes slideFadeScaleIn {
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
.hero-headline {
  display: flex;
  gap: 0.5em;
  font-weight:400;
  font-size: 4.5rem;
  user-select: none;
  overflow: visible;
}

.word {
  opacity: 1;  /* visible by default */
  transform: translateX(0) scale(1);
  display: inline-block;
}

.word.primary,
.word.secondary {
  color: #444444; /* normal text color */
}

/* Metallic words get gradient and animation */
.metallic {
  background: linear-gradient(
    90deg,
    #e0e0e0 0%,
    #f8f8f8 25%,
    #b0b0b0 50%,
    #f8f8f8 75%,
    #e0e0e0 100%
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: metallicGradient 3s linear infinite alternate;
}
@keyframes metallicGradient {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}