.heroContainer {
  background-color: var(--primary-background-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding-top: 84px;
  padding-bottom: 0px;
  transition:
    background-color 400ms ease-in-out,
    color 400ms ease-in-out,
    border-color 400ms ease-in-out;
}

.heroTitle {
  font-size: 2.167em;
}

.heroButtonContainer {
  display: flex;
  gap: 32px;
}

.heroDivider {
  fill: var(--primary-off-background-color);
  transition: fill 400ms ease-in-out;
  display: block;
  bottom: -1px;
  left: 0px;
  right: 0px;
  width: 100%;
  background-color: transparent;
  pointer-events: none;
  user-select: none;
  vertical-align: middle;
  overflow: hidden;
  padding-top: 96px;
}

.projectFourDivider {
  fill: var(--primary-off-background-color);
  display: block;
  bottom: -1px;
  left: 0px;
  right: 0px;
  width: 100%;
  background-color: transparent;
  pointer-events: none;
  user-select: none;
  vertical-align: middle;
  overflow: hidden;
  padding-top: 136px;
}

.waveFooterOne {
  transition: fill 400ms ease-in-out;
  fill: var(--wave-footer-one);
}

.waveFooterTwo {
  transition: fill 400ms ease-in-out;
  fill: var(--wave-footer-two);
}

.waveFooterThree {
  transition: fill 400ms ease-in-out;
  fill: var(--wave-footer-three);
}

.aboutMeContainer {
  background-color: var(--primary-off-background-color);
  transition:
    background-color 400ms ease-in-out,
    color 400ms ease-in-out,
    border-color 400ms ease-in-out;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 24px;
  padding-bottom: 0px;
}

.aboutMeContentContainer {
  width: 90%;
  max-width: 1200px;
}

.aboutMeTitle {
  font-size: 2em;
  padding-bottom: 12px;
}

.aboutMeDesc {
  font-size: 1.26562em;
  width: 60%;
  line-height: 1.5em;
}

@media (max-width: 768px) {
  .aboutMeContentContainer {
    width: 85%;
    padding: 0 16px;
  }

  .aboutMeDesc {
    width: 100%;
    font-size: 1.15em;
    line-height: 1.6em;
  }

  .aboutMeTitle {
    font-size: 1.75em;
    line-height: 1.2em;
  }

  .heroTitle {
    font-size: 2em;
    line-height: 1.2em;
  }
}