#hero-header {
  margin-top: 188px;
}

#who-am-i {
  display: flex;
}

.iam {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  font-weight: 400;
  font-size: clamp(20px, 4.5vw + 0.5rem, 48px);
  color: white;
  padding-left: 35px;
  margin-bottom: 10px;
  line-height: 120%;
}

.hero-name-job {
  display: flex;
  flex-direction: column;
  color: white;
}

#hero-name {
  font-size: clamp(36px, 6vw + 1rem, 128px);
  font-weight: 700;
  margin: 0;
  line-height: 120%;
}

#hero-job {
  font-size: clamp(20px, 3.5vw + 0.5rem, 64px);
  font-weight: 400;
  margin: 0;
  color: rgb(113, 93, 254);
  line-height: 120%;
  display: inline-block;
  transform-origin: center;
  animation: heroWavePass 3s ease-in-out infinite;
}

@keyframes heroWavePass {
  0% {
    transform: translateY(0) skewX(0deg) scaleY(1);
  }
  6% {
    transform: translateY(-3px) skewX(-4deg) scaleY(1.02);
  }
  12% {
    transform: translateY(2px) skewX(4deg) scaleY(0.98);
  }
  18% {
    transform: translateY(-2px) skewX(-3deg) scaleY(1.01);
  }
  24% {
    transform: translateY(1px) skewX(2deg) scaleY(0.99);
  }
  30% {
    transform: translateY(0) skewX(0deg) scaleY(1);
  }
  100% {
    transform: translateY(0) skewX(0deg) scaleY(1);
  }
}

#lets-talk-btn-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 72px;
}

#hero-seperator {
  width: 56px;
  height: 0;
  border-top: 3px solid rgb(112, 230, 28);
}

#hero-footer-wrapper {
  margin-bottom: 0;
  margin-left: 0;
}

#hero-footer {
  height: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 20px;
}

#hero-position-div {
  display: flex;
  align-items: center;
  gap: 24px;
}

#hero-social-links {
  display: flex;
  gap: 42px;
}

#scroll-down-span {
  display: flex;
  justify-content: center;
  writing-mode: vertical-rl;
  cursor: pointer;
  width: 100%;
}

#scroll-down-span span {
  margin-bottom: 3px;
  color: white;
  font-size: 23px;
  font-weight: 400;
  line-height: 120%;
  padding-right: 97px;
}

#scroll-down {
  width: 24px;
  padding-right: 100px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

#hero {
  min-height: calc(100vh - 114px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url('../assets/imgs/hero-purpel.png'), url('../assets/imgs/hero-blue1.png');
  background-repeat: no-repeat;
  background-position: center left 15px, center right -63px;
  background-size: 500px, 500px;
}

#hero-flex-div {
  display: flex;
  justify-content: space-between;
}

#hero-social-links a:hover img{
  transform: scale(1.5);
  transition: transform 0.3s ease;
}

@media(max-width: 500px){
  #scroll-down-span{
    visibility: hidden;
  }

  #scroll-down{
    padding-right: 0;
    visibility: hidden;
  }

  #scroll-down img{
    visibility: hidden;
  }
}