.heading {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

.nat {
  position: relative;
  font-size: clamp(0.5rem, 14vw, 6.5rem);
  line-height: 0.9em;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #20e65b;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  margin: 30px;
}

.nat::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 26.9%;
  width: 20%;
  height: 100%;
  color: #0a06f8;
  -webkit-text-stroke: 1px #0a06f8;
  border-right: 2px solid #0a06f8;
  overflow: hidden;
  animation: move 8s alternate ease-in-out infinite;
}
.span {
  font-size: 0.25em;
  line-height: 1em;
  letter-spacing: 0.02em;
  display: block;
  position: relative;
  color: #f00c0cce;
  font-family: "Roboto", sans-serif;
}

.span::before {
  content: attr(data-span);
  position: absolute;
  top: 0;
  left: 16.6;
  width: 0%;
  height: 100%;
  color: #bed97e;
  -webkit-text-stroke: 0.6px #9ce7be;
  overflow: hidden;
  white-space: nowrap;
  animation: move 5s alternate ease-in-out infinite;
}

@keyframes move {
  0% {
    width: 0%;
  }
  100% {
    width: 50%;
  }
}

@media screen and (max-width: 768px) {
  .nat {
    font-size: clamp(
      0.5rem,
      7.4vw,
      4rem
    ); /* Adjust font size for smaller screens */
    margin: 15px;
  }
}

@media screen and (max-width: 1068px) {
  .nat {
    font-size: clamp(
      0.5rem,
      7.6vw,
      4rem
    ); /* Adjust font size for smaller screens */
    margin: 15px;
  }
}

@media screen and (max-width: 468px) {
  .nat {
    font-size: clamp(
      0.5rem,
      2vw,
      8rem
    ); /* Further reduce font size for smaller screens */
  }
}