@media (min-width: 640px) {
  .welcome-about-me-text {
    font-size: 1.5rem;
  }
}
@media (min-width: 768px) {
  .welcome-about-me,
  .about-me-info,
  .contact-info,
  .project-info {
    padding: 2rem 6rem;
  }
  .welcome-about-me::after,
  .about-me-info::after,
  .contact-info::after,
  .project-info::after {
    content: "";
  }

  .welcome-about-me::before,
  .about-me-info::before,
  .contact-info::before,
  .project-info::before {
    content: "";
  }
  .section-heading {
    padding: 0 6rem;
  }
  .section-heading p {
    width: 60%;
    font-size: 12px;
  }
  nav {
    padding: 0 6rem;
  }
  .menu-btn {
    right: 6rem;
  }
}
@media (min-width: 1024px) {
  html {
    box-sizing: border-box;
    scroll-snap-type: y mandatory;
  }

  .welcome-text-wrapper {
    position: relative;
    height: calc(100% - 9.25rem);
    z-index: 10;
  }

  #welcome,
  #about,
  #project,
  #contact {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: 100dvh;
  }

  .about-me-info-wrapper,
  .contact-info-wrapper,
  .project-info-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100%;
  }

  .about-bio {
    grid-column: 1 /6;
  }
  .prof-exp {
    grid-column: 1 / 6;
    max-height: 200px;
    overflow: auto;
  }

  #skills {
    grid-column: 6 / 13;
    grid-row: 1/ 3;
  }
  #education {
    grid-column: 1 / 13;
  }

  .welcome-about-me,
  .about-me-info,
  .contact-info,
  .project-info {
    height: calc(100dvh - 6rem);
  }
  .contact-info-wrapper {
    position: relative;
    max-height: calc(100% - 6rem);
    /* margin-bottom: 3rem; */
    z-index: 10;
  }

  .tab-wrapper {
    justify-content: start;
  }
  .contact-me-form {
    grid-column: 1 / 6;
  }

  .contact-info-item {
    grid-column: 6 / 13;
  }
  .section-heading p {
    width: 40%;
  }

  .menu-items {
    display: flex;
  }
  .menu-btn {
    display: none;
  }
  .section-subheading {
    display: block;
  }
  footer {
    bottom: 3rem;
  }
}
@media (min-width: 1280px) {
}
@media (min-width: 1536px) {
  .welcome-about-me,
  .about-me-info,
  .contact-info,
  .project-info {
    padding: 6rem 20rem;
  }
  .welcome-about-me::before,
  .about-me-info::before,
  .contact-info::before,
  .project-info::before {
    filter: blur(0);
  }

  .welcome-about-me::after,
  .about-me-info::after,
  .contact-info::after,
  .project-info::after {
    filter: blur(0);
  }

  .section-heading {
    padding: 0 20rem;
  }
  .section-heading p {
    width: 40%;
    font-size: 14px;
  }
  nav {
    padding: 0 20rem;
  }
  .menu-items {
    right: 20rem;
  }
}

@media (min-height: 700px) and (min-width: 390px) {
  .hero-cta {
    display: flex;
  }
}