<style>
  #animated-hero {
    font-size: 48px;
    text-align: center;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    color: red;
    overflow: hidden;
  }
  .hero-content {
    position: relative;
    width: 90%;
    max-width: 1000px;
  }
  .problem-text {
    opacity: 0;
    position: absolute;
    width: 100%;
    transform-origin: center;
    transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  .problem-text.enter {
    animation: textEnter 1s forwards;
  }
  .problem-text.exit {
    animation: textExit 1s forwards;
  }
  @keyframes textEnter {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  @keyframes textExit {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-30px); }
  }
  #main-heading {
    font-weight: bold;
    font-size: 64px;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 1.2s, transform 1.2s;
  }
  #main-heading.show {
    opacity: 1;
    transform: scale(1);
  }
  .highlight {
    font-weight: bold;
  }
 
  
  .colored-text-new-age {
    color: #00acff;
  }
  
  @media (max-width: 768px) {
    #animated-hero {
      font-size: 36px;
      height: 250px;
    }
    #main-heading {
      font-size: 48px;
    }
  }
  @media (max-width: 480px) {
    #animated-hero {
      font-size: 28px;
      height: 200px;
    }
    #main-heading {
      font-size: 36px;
    }
  }
</style>


<div id="animated-hero">
  <div class="hero-content">
    <div class="problem-text" id="problem1">Your Email Has Been <span class="highlight">Marked As Spam?</span></div>
    <div class="problem-text" id="problem2">No Time For <span class="highlight">Prospecting?</span></div>
    <div class="problem-text" id="problem3">Getting Ghosted By <span class="highlight">"Interested Leads"?</span></div>
    <div id="main-heading"></div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const problems = document.querySelectorAll('.problem-text');
  const mainHeading = document.getElementById('main-heading');
  
  const showProblem = (index) => {
    if (index < problems.length) {
      problems[index].classList.add('enter');
      setTimeout(() => {
        problems[index].classList.remove('enter');
        problems[index].classList.add('exit');
        setTimeout(() => {
          problems[index].classList.remove('exit');
          showProblem(index + 1);
        }, 1000);
      }, 2500);
    } else {
      typeMainHeading();
    }
  };
  
  const typeMainHeading = () => {
    mainHeading.classList.add('show');
    const text = "Welcome to ";
    const coloredText = "New Age";
    const remainingText = " Sales Systems";
    let i = 0;
    const typing = setInterval(() => {
      if (i < text.length) {
        mainHeading.innerHTML += text.charAt(i);
        i++;
      } else if (i < text.length + coloredText.length) {
        if (i === text.length) {
          mainHeading.innerHTML += '<span class="colored-text-new-age">';
        }
        mainHeading.querySelector('.colored-text-new-age').innerHTML += coloredText.charAt(i - text.length);
        i++;
        if (i === text.length + coloredText.length) {
          mainHeading.innerHTML += '</span>';
        }
      } else if (i < text.length + coloredText.length + remainingText.length) {
        mainHeading.innerHTML += remainingText.charAt(i - (text.length + coloredText.length));
        i++;
        if (i === text.length + coloredText.length + remainingText.length) {
          clearInterval(typing);
        }
      }
    }, 80);
  };
  
  showProblem(0);
});
</script>