:root {
  --main: #131420;
  --border-color: #707072;
  --teal: #abd9d9;
}

.w-backgroundvideo-backgroundvideoplaypausebutton:focus-visible {
  outline-offset: 2px;
  border-radius: 50%;
  outline: 2px solid #3b79c3;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

body {
  height: 3000px;
  color: #fff;
  background-color: #000235;
  font-family: Outfit, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

h1 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 87px;
  font-weight: 700;
  line-height: 44px;
}

h2 {
  text-transform: uppercase;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 57px;
  font-weight: 700;
  line-height: 100%;
}

.body {
  height: auto;
  background-color: var(--main);
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  line-height: 100%;
}

.preview-mockup-container {
  width: 100%;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.preview-mockup {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}

.text-23 {
  width: 100%;
  max-width: none;
  color: #d2d2d2;
  letter-spacing: .03em;
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5em;
}

.a-website-redesign-for-a-nonprofit-organization-that-allows-volunteers-to-visit-schools-and-read-books-to-children-4 {
  letter-spacing: .05em;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(104.66deg, #14f1d9, #3672f8);
  -webkit-background-clip: text;
  background-clip: text;
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 36px;
}

.overview-section {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 6vw;
  display: flex;
  position: static;
}

.overview-wrapper {
  width: 100%;
  height: 100%;
  grid-column-gap: 64px;
  grid-row-gap: 64px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.overview-top-wrapper {
  grid-column-gap: 64px;
  grid-row-gap: 64px;
  flex-wrap: wrap;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.overview-top-left-wrapper {
  width: 80%;
  max-width: none;
  min-width: 0%;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-24 {
  color: #fff;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.15em;
}

.overview-top-left-bottom-wrapper {
  width: 100%;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-25 {
  width: 100%;
}

.overview-top-right-wrapper {
  width: 100%;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-wrap: nowrap;
  flex: 0 auto;
  justify-content: space-between;
  align-self: center;
  align-items: flex-start;
  display: flex;
}

.project-detail {
  color: #fff;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15em;
}

.project-type-wrapper {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-28 {
  color: #d2d2d2;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5em;
}

.key-contribution-container {
  grid-column-gap: 10.963px;
  grid-row-gap: 10.963px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.overview-bottom-wrapper {
  width: 100%;
  grid-column-gap: 4vw;
  grid-row-gap: 4vw;
  flex: 0 auto;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.videocontainer {
  width: 80%;
  height: 300px;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  color: #131420;
  background-color: #131420;
  border-radius: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.text-30 {
  color: #d2d2d2;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
}

.overview-bottom-right-container {
  width: 100%;
  max-width: 769px;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  line-height: 1.5em;
  display: flex;
}

.detail-contribution-container {
  width: 100%;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  line-height: 1.5em;
  display: flex;
}

.icon {
  font-size: 44px;
  display: none;
}

.left-arrow {
  margin-left: 40px;
  display: flex;
}

.right-arrow {
  color: #0f2349;
  margin-right: 40px;
  display: flex;
  position: absolute;
}

.icon-2 {
  opacity: 1;
  color: #0f2349;
  display: none;
}

.slider {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
}

.slider-screen-section {
  width: 100%;
  height: auto;
  position: static;
}

.videowrapper {
  width: 100%;
  height: 100%;
  color: #131420;
  background-color: #fff;
  border-radius: 16px;
  justify-content: center;
  align-self: flex-start;
  align-items: center;
  padding-top: 0;
  display: flex;
  overflow: hidden;
}

.videowrapper.withyou {
  width: 80%;
  justify-content: center;
  align-self: center;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide-nav {
  opacity: 1;
  outline-offset: 0px;
  outline: 3px #fff;
  display: none;
}

.slidetimerwrapper {
  z-index: 2;
  width: 28.5625rem;
  height: 2rem;
  align-items: center;
  margin-bottom: 16px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.timerbar {
  width: 100px;
  height: 6px;
  background-color: #3269d0;
  border-radius: 8px;
  flex: 0 auto;
}

.timerbar._2 {
  width: 200px;
}

.timerbar._4 {
  width: 400%;
}

.timerbar._3 {
  width: 300px;
}

.timerwrapper {
  width: 400px;
  height: 5px;
  background-color: #dcebfd;
  border-radius: 8px;
  flex: 0 auto;
  align-items: center;
  display: flex;
}

._1-4iconimage {
  margin-left: 16px;
}

.designprocesscard {
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: #131420;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 6vw;
  display: flex;
  position: relative;
}

.design-process-container {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-37 {
  color: #fff;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 700;
}

.design-process-bottom-container {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.design-process-stage-wrapper1 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-38 {
  color: #fff;
  -webkit-text-stroke-color: white;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 600;
}

.line-separator-design-process {
  width: 100%;
  height: 1px;
  max-width: none;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  object-fit: cover;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  display: flex;
}

.designprocesslistcontainer {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-39 {
  color: #d2d2d2;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5em;
}

.text-40 {
  color: #fff;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 600;
}

.define-problem-pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.defineproblemtext {
  color: #d2d2d2;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5em;
}

.define-problem-section {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 6vw;
  display: flex;
}

.define-problem-top-wrapper {
  width: 100%;
  max-width: 964px;
  min-width: 0;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-62 {
  color: #fff;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 100%;
}

.text-63 {
  font-weight: 400;
  line-height: 1.5em;
}

.define-problem-picture-wrapper {
  width: 100%;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.first-we-assessed-the-current-website-to-quickly-identify-the-usability-issues-we-found-that-the-two-main-usability-challenges-are-confusing-navigation-and-cluttered-interface-12 {
  letter-spacing: .05em;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(98.8deg, #2781f1, #72e0fa);
  -webkit-background-clip: text;
  background-clip: text;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
}

.user-pain-points-pic-container {
  width: 100%;
  max-width: 100%;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  overflow: visible;
}

.user-pain-points-section {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 6vw;
  display: flex;
}

.user-paint-points-container {
  width: 100%;
  max-width: 1312px;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.user-pain-points-top-container {
  width: 100%;
  max-width: 964px;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-73 {
  color: #fff;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 100%;
}

.text-74 {
  color: #d2d2d2;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5em;
}

.key-research-questions-wrapper {
  max-width: 610px;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  align-content: stretch;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-75 {
  color: #fff;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.text-76 {
  color: #d2d2d2;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5em;
}

.user-pain-points-pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-persona-withyou {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
  overflow: visible;
}

.target-user-section {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 6vw;
  display: flex;
}

.target-user-container {
  width: 100%;
  height: 100%;
  max-width: none;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-78 {
  color: #fff;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 700;
}

.target-user-pic-container {
  min-width: 0;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.featuresstatementsection {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 64px 4vw;
  display: flex;
}

.competitoranalysisstatementcontentcontainer {
  width: 100%;
  height: 100%;
  min-width: 0%;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.designchallengetitlecontainer {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.text-79 {
  color: #fff;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 600;
}

.text-80 {
  width: 100%;
  height: 100%;
  text-align: center;
}

.competitorslackstatementcontainer {
  color: #fff;
  text-align: center;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 56px;
}

.how-can-we-help-users-navigate-effortlessly-and-find-relevant-information-quickly-to-empower-users-to-understand-opportunities-and-take-purposeful-actions-2 {
  text-align: center;
  letter-spacing: .05em;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(108.33deg, #f86d5f, #f53083);
  -webkit-background-clip: text;
  background-clip: text;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 56px;
}

.address-design-challenge-section, .competitor-analysis-section {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 6vw;
  display: flex;
}

.competitor-analysis-container {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.competitor-analysis-top-wrapper {
  width: 100%;
  max-width: 964px;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-83 {
  height: 100%;
  color: #fff;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1em;
}

.text-84 {
  color: #d2d2d2;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5em;
}

.competitoranalysis, .userflowpic {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sitemap-section {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 6vw;
  display: flex;
}

.sitemap-container {
  width: 100%;
  height: 100%;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.sitemap-top-wrapper {
  width: 100%;
  max-width: 964px;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-87 {
  color: #fff;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 700;
}

.text-88 {
  color: #d2d2d2;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5em;
}

.sketching-section {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 6vw;
  display: flex;
  position: relative;
}

.sketch-container {
  width: 100%;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-89 {
  color: #fff;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 700;
}

.sketchingredesignconcept-text {
  max-width: 964px;
  color: #d2d2d2;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5em;
}

.sketch-container-pic {
  width: 100%;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: #fff;
  border-radius: 16px;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 32px 24px;
  display: flex;
}

.sketch-content-container {
  width: 100%;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-wrap: nowrap;
  flex: 0 auto;
  justify-content: center;
  align-items: stretch;
  display: flex;
}

.sketch-content-wireframes-container {
  width: 60%;
  height: auto;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.homepageinternship {
  width: 100%;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  justify-content: flex-start;
  align-self: center;
  align-items: flex-start;
  display: flex;
}

.text-90 {
  color: #3a3e3f;
  align-self: center;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.frame-695 {
  width: 100%;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex: 0 auto;
  justify-content: center;
  align-self: center;
  align-items: flex-start;
  display: flex;
}

.untitled-notebook-7 {
  width: 11.0625rem;
  height: 13.4375rem;
  max-width: none;
  object-fit: cover;
}

.untitled-notebook-7._2 {
  width: 13.25rem;
  height: 13.4375rem;
}

.untitled-notebook-7._3 {
  width: 16.75rem;
  height: 10.125rem;
}

.untitled-notebook-7._4 {
  width: 13.6875rem;
  height: 10.125rem;
}

.website-annotations-readingtokids-container {
  width: 100%;
  max-width: 749px;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.frame-1030 {
  width: 100%;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex: 0 auto;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.gif {
  width: 40%;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.text-91 {
  color: #3a3e3f;
  text-align: center;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
}

.moodboard-section {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 6vw;
  display: flex;
}

.designwalkthroughcontentcontainer {
  width: 100%;
  height: 100%;
  max-width: 1312px;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-self: center;
  align-items: flex-start;
  display: flex;
}

.designsolutioncontentcontainer {
  width: 100%;
  height: 100%;
  max-width: none;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-92 {
  color: #fff;
  text-align: left;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 700;
}

.text-93 {
  max-width: 963px;
  color: #d2d2d2;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5em;
}

.moodboard-pic-wrapper {
  grid-column-gap: 15.3481px;
  grid-row-gap: 15.3481px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.moodboard-pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.homepage-1-1 {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  position: static;
  top: 100px;
}

.solution-section {
  width: 100%;
  max-width: 1440px;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 6vw;
  display: flex;
}

.solution-wrapper {
  width: 100%;
  max-width: 1312px;
  grid-column-gap: 64px;
  grid-row-gap: 64px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: static;
}

.solution-text-container {
  width: 100%;
  max-width: 964px;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-106 {
  color: #fff;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 700;
}

.design {
  width: 100%;
  max-width: 1312px;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
  position: static;
}

.designsolutionbreakdown-container {
  max-width: 650px;
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-107 {
  color: #d2d2d2;
  letter-spacing: .05em;
  padding-left: 8.075rem;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5em;
}

.designsolutionbreakdown-wrapper {
  grid-column-gap: 120px;
  grid-row-gap: 120px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.simplified-navigation {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.solutionnumberframe {
  width: 104px;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.text-108 {
  color: #349eff;
  text-align: center;
  font-family: Poppins, sans-serif;
  font-size: 168px;
  font-weight: 600;
}

.solutionbreakdowntextcontainer {
  max-width: 514px;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.solutionbreakdowntitle {
  color: #fff;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5em;
}

.solutionbreakdownlistcontainer {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  letter-spacing: .05em;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.text-110 {
  color: #d2d2d2;
  letter-spacing: .05em;
  align-self: flex-start;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5em;
}

.frame-1053 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.text-111 {
  color: #d2d2d2;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5em;
}

.frame-1055 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.to-solve-the-problem-we-focused-on-two-main-design-solutions-revamping-the-information-architecture-and-content-organization-10 {
  max-width: 964px;
}

.to-solve-the-problem-we-focused-on-two-main-design-solutions-revamping-the-information-architecture-and-content-organization-11 {
  color: #d2d2d2;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
}

.to-solve-the-problem-we-focused-on-two-main-design-solutions-revamping-the-information-architecture-and-content-organization-12 {
  letter-spacing: .05em;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(95.28deg, #2781f1, #72e0fa);
  -webkit-background-clip: text;
  background-clip: text;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
}

.click-around-the-website-below {
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(93.98deg, #2781f1 0%, #72e0fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 24px;
  font-weight: 400;
  line-height: 42px;
}

.clickable-prototype-section {
  width: 100%;
  height: 100%;
  max-width: 1440px;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0;
  padding: 6vw;
  display: flex;
}

.clickable-prototype-wrapper {
  width: 100%;
  height: 100%;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0;
  display: flex;
}

.text-124 {
  color: #fff;
  letter-spacing: .05em;
  margin-top: 0;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 700;
}

.prototype-container {
  width: 100%;
  height: 100vh;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: #fff;
  border-radius: 16px;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  align-items: center;
  padding: 64px 40px;
  display: flex;
}

.prototype-container.rtk {
  height: auto;
  background-color: #fff;
}

.click-around-the-website-below-2 {
  letter-spacing: .05em;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(93.98deg, #f86d5f, #f53083);
  -webkit-background-clip: text;
  background-clip: text;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 42px;
}

.click-around-the-website-below-3 {
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(93.98deg, #f86d5f, #f53083);
  -webkit-background-clip: text;
  background-clip: text;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 42px;
}

.figma-prototype {
  width: 100%;
  height: 90vh;
  align-self: auto;
}

.text-block {
  color: #676b6c;
  border: 1px #000;
  margin-top: 64px;
  margin-bottom: 32px;
  font-size: 24px;
  font-weight: 700;
}

.text-block._2 {
  margin-top: 0;
}

.styleguide-section {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 6vw;
  display: flex;
}

.styleguide-container {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-126 {
  color: #fff;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 700;
}

.error-3373cf77-56f3-aa45-2636-3366b3559755 {
  max-width: 964px;
  color: #d2d2d2;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5em;
}

.styleguide-pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.paragraph {
  max-width: 964px;
  color: #d2d2d2;
  letter-spacing: .05em;
  margin-bottom: 0;
  line-height: 1.5em;
}

.link {
  color: #fff;
  font-weight: 700;
}

.homepagereadingtokidspic {
  width: 100%;
  height: 100%;
}

.image-3 {
  width: 100%;
  height: 100%;
  max-width: none;
}

.slide3, .mask, .slide2 {
  width: 100%;
  height: 100%;
}

.image-4 {
  width: 100%;
  height: 100%;
  max-width: none;
}

.featurescontentcontainer {
  width: 100%;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.feautrescontent-top-container {
  width: 100%;
  max-width: 964px;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-134 {
  color: #fff;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 700;
}

.text-135 {
  color: #d2d2d2;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5em;
}

.rtk-homepagepicwrapper {
  width: 40%;
  position: static;
  top: 0;
}

.mobileprototype-container {
  width: 100%;
  height: 80vh;
}

.desktopprototypecontainer {
  width: 100%;
  height: 100%;
}

.designprinciples-readingtokids {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.light-pink-blur {
  z-index: 7;
  width: 20vw;
  height: 20vw;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  opacity: .6;
  filter: blur(120px);
  background-color: #f581c1;
  border-radius: 50%;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0;
  display: flex;
  position: absolute;
  top: 11%;
  left: 10%;
}

.dark-purple-blur {
  z-index: 4;
  width: 20vw;
  height: 20vw;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  opacity: .7;
  filter: blur(120px);
  background-color: #491882;
  border-radius: 50%;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 0;
  padding: 0;
  font-size: 25%;
  line-height: 30%;
  display: flex;
  position: absolute;
  top: 8%;
  left: 53%;
}

.purple-blur {
  z-index: 5;
  width: 20vw;
  height: 15vw;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  opacity: .6;
  filter: blur(120px);
  background-color: #a06fcf;
  border-radius: 50%;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0;
  display: flex;
  position: absolute;
  top: 13%;
  left: 48%;
}

.orange-blur {
  z-index: 12;
  width: 20vw;
  height: 20vw;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  opacity: .8;
  filter: blur(120px);
  background-color: #fd860c;
  border-radius: 100%;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0;
  display: flex;
  position: absolute;
  top: 12%;
  left: 36%;
}

.bright-pink-blur {
  z-index: 8;
  width: 20vw;
  height: 15vw;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  filter: blur(120px);
  background-color: rgba(235, 2, 182, .8);
  border-radius: 50%;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0;
  display: flex;
  position: absolute;
  top: 16%;
  left: 65%;
}

.herosectionhomepage {
  z-index: auto;
  width: auto;
  height: 80vh;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
  position: relative;
}

.herosectionwrapper {
  z-index: 20;
  width: 100vw;
  height: 100vh;
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 14vh;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  position: static;
}

.h1-kathrina {
  width: 100vw;
  color: #fff;
  text-align: center;
  -webkit-text-stroke-width: 1px;
  align-self: center;
  font-family: Raleway, sans-serif;
  font-size: 14vw;
  font-weight: 900;
  line-height: 100%;
  position: static;
}

.h2-uxui {
  color: rgba(0, 0, 0, 0);
  text-align: center;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #d9d9d9;
  justify-content: center;
  align-items: center;
  font-family: Raleway, sans-serif;
  font-size: 6vw;
  font-weight: 900;
  line-height: 100%;
  display: flex;
}

.aboutmesection {
  z-index: 1;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: #131420;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1vw 6vw 6vw;
  display: flex;
  position: relative;
}

.aboutmewrapper {
  width: 100%;
  max-width: none;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.aboutmeleftsectionwrapper {
  width: 33.3125rem;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.aboutmeleftsectiontop {
  width: 100%;
  max-width: 533px;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.helloimkathrina {
  color: #fff;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.5em;
}

.aboutmedescription {
  color: #d2d2d2;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5em;
}

.figmaqueentext {
  color: #fff;
  letter-spacing: .005em;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5em;
}

.aboutmerightsection {
  width: 50%;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.figmaqueenneonlight {
  width: 100%;
  height: 100%;
  max-width: none;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  object-fit: cover;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  margin-left: 6vw;
  display: flex;
  position: static;
  left: 26px;
  overflow: visible;
}

.figmaqueenmypic {
  width: 40%;
  height: 65%;
  max-width: none;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  object-fit: cover;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 34%;
  left: 46%;
}

.dubbed-as-the-figma-queen-of-design-teams-1 {
  color: #fff;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
}

.h2-movingtext {
  aspect-ratio: auto;
  object-fit: fill;
  align-self: center;
  margin-top: 0;
  font-size: 3rem;
  font-weight: 900;
  line-height: 100%;
  position: absolute;
  top: 0%;
}

.vectors-wrapper-43 {
  width: 16px;
  height: 16px;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.project-summary {
  color: #d2d2d2;
  letter-spacing: .05em;
  font-size: 1.25rem;
  line-height: 2rem;
}

.image-5 {
  width: 100%;
  height: 100%;
  max-width: none;
}

.html-embed-2 {
  width: 100%;
  height: 100%;
  background-color: #fff;
  align-self: center;
  align-items: center;
  display: block;
  overflow: hidden;
}

.text-255 {
  color: #fff;
  text-align: center;
  letter-spacing: .05em;
  align-self: flex-start;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 700;
}

.whativelearnedsection {
  grid-column-gap: 4em;
  grid-row-gap: 4em;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 6vw;
  display: flex;
}

.whativelearnedcontentcontainer {
  width: 100%;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-self: center;
  align-items: center;
  display: flex;
}

.text-262 {
  max-width: 964px;
  color: #d2d2d2;
  text-align: left;
  letter-spacing: .05em;
  align-self: flex-start;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5em;
}

.rightarrowicon {
  height: 15%;
  align-self: center;
  transition: opacity .2s;
  display: block;
}

.rightarrowicon:hover {
  opacity: .6;
  color: #fff;
}

.leftarrowicon {
  height: 15%;
  align-self: center;
  transition: opacity .2s;
}

.leftarrowicon:hover {
  opacity: .6;
}

.whativelearnedcardscontainer {
  grid-column-gap: 82px;
  grid-row-gap: 82px;
  flex-wrap: wrap;
  flex: 0 auto;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.whativelearnedcards {
  width: 100%;
  max-width: none;
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  padding-left: 0;
  display: flex;
}

.learning1card {
  width: 100%;
  max-height: 459.512px;
  max-width: 383px;
  min-height: 459.512px;
  min-width: 383px;
  background-color: #fff;
  border-radius: 16px;
  justify-content: space-between;
  align-items: flex-start;
  padding: 32px;
  display: flex;
}

.learning1contentcontainer {
  height: 100%;
  min-width: 0;
  grid-column-gap: 1.15em;
  grid-row-gap: 1.15em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.accessbilityiconcontainer {
  width: 108px;
  height: 108px;
  object-fit: cover;
}

.text-269 {
  height: 100%;
  color: #3a3e3f;
  text-align: center;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15em;
}

.text-270 {
  color: #676b6c;
  text-align: center;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5em;
}

.learning2card {
  width: 100%;
  max-height: none;
  max-width: 383px;
  min-height: 461px;
  background-color: #fff;
  border-radius: 16px;
  justify-content: space-between;
  align-items: flex-start;
  padding: 32px;
  display: flex;
}

.learning2contentcontainer {
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 0;
  grid-column-gap: 1.15rem;
  grid-row-gap: 1.15rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.communicateicon {
  width: 108px;
  height: 108px;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.learning3card {
  width: 100%;
  max-height: none;
  max-width: 383px;
  min-height: 461px;
  min-width: 383px;
  background-color: #fff;
  border-radius: 16px;
  justify-content: space-between;
  align-items: flex-start;
  padding: 32px;
  display: flex;
}

.aboutmelinkwrapper {
  width: 100%;
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  flex: 0 auto;
  justify-content: flex-start;
  align-self: flex-start;
  align-items: flex-start;
  display: flex;
}

.see-my-work-or-listen-to-testimony-0 {
  color: #fff;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
}

.see-my-work-or-listen-to-testimony-2 {
  color: #fff;
  letter-spacing: .005em;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(92.2deg, #b926e9, #d83f95);
  -webkit-background-clip: text;
  background-clip: text;
  font-family: Poppins, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
}

.mainnavbar {
  z-index: 9999;
  width: 100vw;
  height: 6.75rem;
  -webkit-backdrop-filter: blur(100px);
  backdrop-filter: blur(100px);
  background-color: rgba(30, 30, 30, .4);
  justify-content: flex-start;
  align-items: center;
  margin-top: auto;
  margin-bottom: 0;
  padding: 0 6vw 0;
  display: flex;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.brandlogo {
  width: 44px;
  height: 44px;
}

.brand {
  width: 2.75rem;
}

.designprocesscontainer {
  width: 100%;
  height: 100%;
  max-width: 1313px;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  overflow: visible;
}

.designprocesstextwrapper {
  max-width: 656px;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-274 {
  color: #fff;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5em;
}

.text-275 {
  color: #d2d2d2;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5em;
}

.designcardscontainer {
  width: 100%;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
  display: flex;
  overflow: visible;
}

.designprcoesscardtextwrapper {
  z-index: 4;
  width: 100%;
  max-width: none;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  flex-grow: 1;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.text-282 {
  color: #fff;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.text-283 {
  color: #d2d2d2;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5em;
}

.designprocessbackgroundimage {
  position: absolute;
  top: 0;
}

.projectcontentcontainer {
  width: 100%;
  height: 100%;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.projectsection {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  outline-color: var(--border-color);
  outline-offset: 0px;
  outline-width: .5px;
  outline-style: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 6vw;
  display: flex;
}

.testimonialtitlecontainersection {
  width: auto;
  max-width: none;
  min-width: 0;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.projecttitlesection {
  color: #fff;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
}

.projectsubtitlecontainer {
  max-width: 963px;
  color: #d2d2d2;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5em;
}

.projectcardcontainer {
  width: 100%;
  height: 100%;
  max-width: none;
  -webkit-backdrop-filter: blur(100px);
  backdrop-filter: blur(100px);
  background-color: #131420;
  border: 1px solid #303142;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  padding: 3vw;
  transition: box-shadow .3s cubic-bezier(.165, .84, .44, 1);
  display: flex;
}

.projectcardcontainer:hover {
  box-shadow: 0 1px 16px 8px rgba(110, 107, 110, .66);
}

.nextprojectcontent {
  width: 100%;
  height: 100%;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.projectdetailscontainer {
  width: 100%;
  max-width: 1223.92px;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.tagscard {
  width: auto;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.tagcontainer {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  background-color: #202133;
  border-radius: 879.067px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: .5rem 1rem;
  display: flex;
}

.text-301 {
  color: #fff;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.projecttitle {
  width: 100%;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex: 0 auto;
  justify-content: flex-start;
  align-self: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.text-302 {
  color: #fff;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.15em;
}

.lineicon {
  width: 24px;
  height: 2px;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.text-303 {
  color: #d2d2d2;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5em;
  text-decoration: none;
}

.nextprojectpiccontainer {
  width: 100%;
  height: 100%;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
  overflow: hidden;
}

.withyouprojectpreviewpic {
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 8px;
}

.projecttags {
  width: auto;
  height: auto;
  justify-content: space-between;
  display: flex;
}

.footer {
  z-index: 1;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  border-style: solid;
  border-width: 1px 0 0;
  border-color: var(--border-color);
  background-color: #131420;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 3vh 12vw;
  display: flex;
  position: relative;
}

.footercontentwrapper {
  width: 100%;
  height: 345px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.footertopcontentwrapper {
  width: 100%;
  max-width: 1090px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.footericonwrapper {
  height: 152.215px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
  position: relative;
  top: .8rem;
}

.logoiconpic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.footerlinkswrapper {
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.footerinkwrapper {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.footermenucontainer {
  height: 44px;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 10px;
  display: flex;
}

.text-311 {
  color: #d2d2d2;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.frame-481725 {
  width: 100%;
  height: 44px;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
  display: flex;
}

.text-312 {
  color: #d2d2d2;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 400;
}

.frame-481726 {
  width: 100%;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
  display: flex;
}

.footerlinkexternalwrapper {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.arrowexternalicon {
  width: 24px;
  height: 24px;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.frame-481728 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px;
  display: flex;
}

.footerbottomcontentwrapper {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.copyrightcontainer {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.doticon {
  width: 6px;
  height: 6px;
  object-fit: cover;
  justify-content: center;
  align-self: center;
  align-items: center;
  display: flex;
}

.movingtextwrapper {
  width: 100%;
  height: 4rem;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.menu-outer-wrapper {
  z-index: 25;
  background-color: #131420;
  justify-content: center;
  align-items: center;
  display: none;
  position: fixed;
  top: 13%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  overflow: visible;
}

.menu-inner-wrapper {
  height: 100%;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.menu-item-wrapper {
  width: auto;
  flex-direction: column;
  align-self: center;
  padding: .5rem 0;
  display: block;
  overflow: hidden;
}

.menu-item-link {
  width: 100%;
  color: #fff;
  font-size: 3rem;
  font-weight: 300;
  line-height: 1.5em;
  text-decoration: none;
  display: block;
}

.hamburgericonwrapper {
  width: 44px;
  height: 44px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  display: flex;
}

.lottie-animation {
  width: 40px;
  height: 40px;
}

.navigationcontentwrapper {
  width: 100vw;
  justify-content: space-between;
  padding-top: 0;
  display: flex;
}

.menulink-underline {
  height: 2px;
  background-color: #fff;
  transform: translate(-110%);
}

.lottiescrollwrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.aboutmeintrosection {
  z-index: 1;
  width: 100%;
  max-width: none;
  background-color: #131420;
  justify-content: center;
  align-items: center;
  padding: 0 6vw 6vw;
  display: flex;
  position: relative;
}

.aboutmetext {
  width: 50%;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 4vh;
  display: flex;
}

.text-313 {
  color: #fff;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.5em;
}

.text-314 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5em;
}

.mypicture {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.i-find-joy-in-crafting-experiences-that-have-the-power-to-enrich-peoples-lives-for-me-design-is-not-just-about-aesthetics-its-a-meaningful-journey-of-creating-solutions-that-address-real-world-challenges-and-make-everyday-interactions-more-seamless-and-enjoyable-0 {
  color: #d2d2d2;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
}

.scrolllottiecontainer {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: -1%;
  display: flex;
  position: static;
  top: 40.8vw;
  left: auto;
}

.aboutmecontentcontainer {
  z-index: 1;
  width: 100%;
  height: 100%;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}

.aboutmestorywrapper {
  flex-direction: column;
  display: block;
}

.aboutmestorysection {
  z-index: 1;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  background-color: #131420;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32px;
  display: flex;
  position: relative;
}

.aboutmetextwrapper {
  z-index: 1;
  width: 100%;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  background-color: #131420;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0;
  padding: 6vh;
  display: flex;
  position: relative;
}

.aboutmetitle {
  color: #fff;
  text-align: center;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5em;
}

.aboutmesubtitle {
  max-width: 963px;
  color: #d2d2d2;
  text-align: center;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5em;
}

.timeline {
  z-index: 0;
  width: 100%;
  background-color: #131420;
  margin-bottom: 0;
  position: relative;
}

.timelinewrapper {
  z-index: 0;
  height: auto;
  flex-direction: column;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  position: relative;
}

.timelineitem {
  z-index: 2;
  width: auto;
  height: auto;
  max-width: 85vw;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 12.375rem 1fr;
  align-self: auto;
  margin-bottom: 0;
  padding-top: 64px;
  padding-bottom: 64px;
  position: relative;
}

.timelineleft {
  width: auto;
  height: auto;
  text-align: right;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  font-size: 1.5rem;
  line-height: 1.5rem;
  display: block;
  position: static;
}

.timelinecenter {
  text-align: center;
  justify-content: center;
  display: flex;
}

.timelineright {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.timelinelefttext {
  height: auto;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.15em;
  position: -webkit-sticky;
  position: sticky;
  top: 50vh;
}

.circle {
  width: 2rem;
  height: 2rem;
  background-color: #fff;
  border-radius: 100%;
  font-size: 2rem;
  line-height: 0%;
  display: block;
  position: -webkit-sticky;
  position: sticky;
  top: 50vh;
}

.text-block-5 {
  color: #d2d2d2;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5em;
}

.progressbar {
  z-index: -2;
  width: 3px;
  height: 100%;
  background-color: #323233;
  justify-content: center;
  align-self: center;
  align-items: center;
  display: flex;
  position: absolute;
}

.timelineprogressbar {
  z-index: -1;
  width: 3px;
  height: 50vh;
  background-color: #fff;
  position: fixed;
  bottom: 50vh;
}

.aboutmestorycard {
  width: 100%;
  height: 100%;
  grid-column-gap: 9.81072px;
  grid-row-gap: 9.81072px;
  -webkit-backdrop-filter: blur(35.6376px);
  backdrop-filter: blur(35.6376px);
  background-image: linear-gradient(156.17deg, rgba(19, 20, 32, 0) 9%, rgba(43, 43, 46, .69));
  border: 1px solid #303142;
  border-radius: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 16px;
  display: flex;
}

.aboutmecontentcardcontainer {
  width: 100%;
  height: 100%;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-316 {
  color: #fff;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 600;
}

.graphicdesigncollage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.friendster-logo-2009-5 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aboutmestorycontentcontainer {
  width: 100%;
  height: 100%;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.aboutmeprojectpreviewpic {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  border-radius: 8px;
  display: block;
  overflow: hidden;
}

.extracurricularsection {
  z-index: 1;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: #131420;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 6vw;
  display: flex;
  position: relative;
}

.extracurricularcontentcontainer {
  width: 100%;
  height: 100%;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.extracurriculartextcontainer {
  width: 100%;
  max-width: 1312px;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-left: 6vw;
  padding-right: 6vw;
  display: flex;
}

.whatilovecollagepic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.thanksforstoppingsection {
  z-index: 1;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  background-color: #131420;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 6vh;
  padding-bottom: 12vh;
  display: flex;
  position: relative;
}

.thankyoumessagecontainer {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.thanks-for-stopping-by {
  color: #d2d2d2;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 400;
}

.text-319 {
  color: #fff;
  letter-spacing: .005em;
  font-family: Yellowtail, sans-serif;
  font-size: 40px;
  font-weight: 400;
}

.footerlogocontainer {
  width: 100%;
  height: 100%;
}

.vectors-wrapper-77 {
  width: 29px;
  height: 24.9616px;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.defineproblemcontentcontainer {
  width: 100%;
  height: 100%;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  display: flex;
}

.sketchingvideo {
  z-index: 10;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  position: relative;
}

.problemstatscontainer {
  width: 100%;
  max-width: 1313px;
  grid-column-gap: 16vw;
  grid-row-gap: 16vw;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.statswrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.coupleiconcontainer {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  display: flex;
}

.coupleicon {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.frame-481790 {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.vectors-wrapper-81 {
  width: 37.376px;
  height: 40.2502px;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.text-323 {
  color: #fff;
  text-align: center;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5em;
}

.text-324 {
  color: #d2d2d2;
  text-align: center;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5em;
}

.hourglassiconcontainer {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding: 9px 16px;
  display: flex;
}

.hourglassicon {
  width: 46.8292px;
  height: 62.439px;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.frame-481791 {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.brokenhearticoncontainer {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 9px 5px;
  display: flex;
}

.brokenhearticon {
  width: 69.3767px;
  height: 62.439px;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.frame-481792 {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.features-section {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 64px;
  display: flex;
}

.iterationsection {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 6vw;
  display: flex;
}

.iterationcontentcontainer {
  width: 100%;
  height: 100%;
  grid-column-gap: 120px;
  grid-row-gap: 120px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.iterationtopcontainer {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-334 {
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 700;
}

.text-335 {
  max-width: 963px;
  color: #d2d2d2;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5em;
}

.iterationsbefore-after {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.learningsection {
  grid-column-gap: 4em;
  grid-row-gap: 4em;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 64px;
  display: flex;
}

.withyouarfeaturevideo {
  width: 100vw;
  height: 70vw;
}

.transition {
  z-index: 10000;
  width: 100%;
  height: 100vh;
  color: #000;
  background-color: #000;
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg');
  background-position: 0 0;
  background-size: auto;
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  right: 0%;
}

.transition-content {
  z-index: 1;
  width: 100%;
  height: 100vh;
  background-color: #000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
}

.transition-color {
  width: 100%;
  height: 100%;
  background-color: #000;
  border: 1px #000;
  position: relative;
}

.transition-trigger {
  display: none;
}

.transition-bg {
  object-fit: fill;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  display: flex;
  position: absolute;
}

.transition-color-border {
  width: 100%;
  height: 10px;
  background-color: #000;
  position: absolute;
  bottom: -8px;
}

.next-project-section {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  outline-color: var(--border-color);
  outline-offset: 0px;
  outline-width: .5px;
  outline-style: solid;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 6vw;
  display: flex;
}

.learning3contentcontainer {
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 0;
  grid-column-gap: 1.15rem;
  grid-row-gap: 1.15rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.checklisticoncontainer {
  width: 108px;
  height: 108px;
  object-fit: cover;
}

.withyouinfo {
  width: 100%;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex: 0 auto;
  justify-content: flex-start;
  align-self: center;
  align-items: center;
  display: flex;
}

._2-4iconimage, ._3-4iconimage, ._4-4iconimage {
  margin-left: 16px;
}

.design-challenge-container-copy {
  width: 100%;
  height: 100%;
  min-width: 0%;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.withyou-video-wrapper {
  width: 100%;
  height: 90%;
}

.design-challenge-section-withyou {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 64px 4vw 64px 6vw;
  display: flex;
}

.competitoranalysisstatementsection {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 64px 4vw;
  display: flex;
}

.featuressection {
  width: 100%;
  max-width: 964px;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.featuressectionlist {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featuresstatementcontentcontainer {
  width: 100%;
  height: 100%;
  min-width: 0%;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.featuresstatementcontainer {
  color: #fff;
  text-align: center;
  letter-spacing: .05em;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 56px;
}

.userflow-section {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 64px;
  display: flex;
}

.userflow-top-container {
  width: 100%;
  max-width: 964px;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.designwalkthroughsection {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 64px;
  display: flex;
}

.projectpreviewpic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.projectinfo {
  width: 100%;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex: 0 auto;
  justify-content: flex-start;
  align-self: center;
  align-items: center;
  display: flex;
}

.finalprototypeallscreenpic {
  width: 100%;
  height: 100%;
}

.finalprototypevideo-copy {
  width: 100%;
  height: 500px;
  background-color: #fff;
  justify-content: center;
  align-self: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.readingtokidspreviewpic {
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 0;
}

.sanbedauniversityprojectpreviewpic, .nationalparkserviceprojectpreviewpic, .lezgobillsplitprojectpreviewpic, .graphicdesigncollagepic {
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 8px;
}

.mypicwrapper {
  width: 50%;
  align-self: flex-start;
  position: static;
  left: 467px;
}

.designprocesscards2 {
  width: 280px;
  height: 312px;
  max-width: none;
  min-height: 100%;
  min-width: 0;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  border: 1px undefined undefined;
  background-color: #131420;
  border-radius: 16px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 123px 1.5vw 32px;
  transition: all .2s;
  display: flex;
  position: relative;
}

.designprocesscards3, .designprocesscards4 {
  width: 280px;
  height: 312px;
  max-width: none;
  min-height: 0%;
  min-width: 0;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  border: 1px undefined undefined;
  background-color: #131420;
  border-radius: 16px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 123px 1.5vw 32px;
  transition: all .2s;
  display: flex;
  position: relative;
}

.designprocesscards-copy {
  width: 280px;
  height: 312px;
  max-height: none;
  max-width: none;
  min-height: 0%;
  min-width: 0;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  border: 1px undefined undefined;
  background-color: #131420;
  border-radius: 16px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 123px 1.5vw 32px;
  transition: all .2s;
  display: flex;
  position: relative;
}

.quotationpic {
  width: 47px;
  height: 47px;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.testimonialsection {
  width: 100%;
  max-width: 1440px;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 64px;
  display: flex;
}

.testimonialcontentcontainer {
  width: 100%;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.testimonialdetailscontainer {
  min-height: 417px;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.testimonialcardcontainer {
  width: 100%;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: wrap;
  align-content: stretch;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.testimonialcard2 {
  min-height: 534px;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: #131420;
  border: 1px solid #333446;
  border-radius: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 32px;
  display: flex;
}

.testimonialtextcontainer {
  width: 100%;
  max-width: 357px;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.text-349 {
  height: 100%;
  min-height: 0;
  color: #d2d2d2;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  display: block;
}

.testimonialpersondetailscontainer {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.testimonialpersonpic {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.nametitlecontainer {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-350 {
  color: #fff;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.text-351 {
  color: #fff;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.testimonialcardcontent2container {
  min-height: 417px;
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.testimonialcard3 {
  min-height: 534px;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: #131420;
  border: 1px solid #333446;
  border-radius: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 32px;
  display: flex;
}

.testimonialcard {
  min-height: 534px;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: #131420;
  border: 1px solid #333446;
  border-radius: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 32px 24px;
  display: flex;
}

.footerlinkblock {
  width: 100%;
  height: auto;
  padding: 0;
  text-decoration: none;
  overflow: hidden;
}

.menulink-underline-footer {
  width: 100%;
  height: 1px;
  background-color: #fff;
  margin-top: 0;
  margin-bottom: 6px;
  padding-bottom: 0;
  transform: translate(-125%);
}

.footerlinkwrapper {
  height: 44px;
  padding: 10px;
  overflow: hidden;
}

.footerlinkcontainer {
  height: 44px;
  padding: 10px;
  display: flex;
}

.myworklink {
  text-decoration: none;
}

.uxuitextwrapper {
  width: 100%;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-direction: column;
  display: flex;
}

.aboutmeregulartextwrapper {
  height: 100%;
  overflow: hidden;
}

.footerlinkblock-copy {
  width: 100%;
  height: auto;
  color: #fff;
  padding: 0;
  text-decoration: none;
  overflow: hidden;
}

.text-312-copy {
  color: #d2d2d2;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 400;
}

.see-my-work-or-listen-to-testimony-2-copy {
  color: #fff;
  letter-spacing: .005em;
  -webkit-text-fill-color: transparent;
  background-color: #d2d2d2;
  -webkit-background-clip: text;
  background-clip: text;
  font-family: Poppins, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
}

.div-block-6 {
  width: 100%;
  height: 100%;
}

.aboutmetextcontainer {
  width: 100%;
  height: auto;
  display: inline-block;
}

.text-349-copy {
  height: 100%;
  min-height: 0;
  color: #d2d2d2;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.linkblock {
  text-decoration: none;
}

.projectcardlink {
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.click-around-the-website-below-copy {
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(93.98deg, #2781f1 0%, #72e0fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 24px;
  font-weight: 400;
  line-height: 42px;
}

.click-around-the-website-below-2-copy {
  letter-spacing: .05em;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(93.98deg, #2781f1, #72e0fa);
  -webkit-background-clip: text;
  background-clip: text;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 42px;
}

.click-around-the-website-below-3-copy {
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(93.98deg, #2781f1, #72e0fa);
  -webkit-background-clip: text;
  background-clip: text;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 42px;
}

.how-can-we-help-users-navigate-effortlessly-and-find-relevant-information-quickly-to-empower-users-to-understand-opportunities-and-take-purposeful-actions-2-copy {
  text-align: center;
  letter-spacing: .05em;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(108.33deg, #2781f1, #72e0fa);
  -webkit-background-clip: text;
  background-clip: text;
  text-align: center;
  letter-spacing: .05em;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(108.33deg, #2781f1, #72e0fa);
  -webkit-background-clip: text;
  background-clip: text;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 56px;
}

.design-process-stage-wrapper2, .design-process-stage-wrapper3, .design-process-stage-wrapper4 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.clickableprototypetextwrapper {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.designsolutiontextcontainer {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.clickableprototypetextcontainer {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  align-self: center;
  align-items: center;
  display: flex;
}

.footerlinktext {
  color: #d2d2d2;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 400;
}

.text-311-copy {
  color: #d2d2d2;
  letter-spacing: .005em;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.footerlinkexternalwrapper-copy {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.contacts-container {
  grid-column-gap: 3vw;
  grid-row-gap: 3vw;
  display: flex;
}

.lottie-animation-2 {
  width: 110px;
  height: 110px;
  position: static;
}

.aboutmedescriptioncontainer {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-direction: column;
  display: flex;
}

@media screen and (min-width: 1440px) {
  .body {
    object-fit: fill;
    background-color: #131420;
    display: block;
    overflow: visible;
  }

  .text-23 {
    line-height: 2.25rem;
  }

  .overview-top-wrapper {
    width: 100%;
    flex-wrap: wrap;
  }

  .overview-top-left-wrapper {
    width: 60%;
    min-width: 30%;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .text-25 {
    width: 100%;
  }

  .overview-top-right-wrapper {
    width: 100%;
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    justify-content: space-between;
  }

  .project-type-wrapper {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .text-28 {
    line-height: 1.5em;
  }

  .overview-bottom-wrapper {
    align-items: flex-start;
  }

  .videocontainer {
    width: 70%;
    height: 100%;
    border-radius: 0;
    justify-content: space-between;
  }

  .overview-bottom-right-container {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .icon:hover {
    -webkit-text-stroke-color: #4d7bd3;
  }

  .icon-2 {
    display: none;
  }

  .slider-screen-section {
    width: 100vw;
    height: auto;
  }

  .videowrapper {
    height: 350px;
    opacity: 1;
    border-radius: 16px;
    justify-content: center;
    align-self: center;
    align-items: flex-start;
    margin-top: 0;
    padding-top: 0;
    display: block;
    overflow: hidden;
  }

  .videowrapper.withyou {
    width: 80%;
    height: 100%;
    background-color: #131420;
    border-radius: 20px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display: block;
  }

  .design-process-container {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
  }

  .define-problem-pic {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .defineproblemtext {
    font-weight: 400;
  }

  .define-problem-section {
    align-self: center;
    align-items: flex-start;
  }

  .define-problem-picture-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 16px;
  }

  .first-we-assessed-the-current-website-to-quickly-identify-the-usability-issues-we-found-that-the-two-main-usability-challenges-are-confusing-navigation-and-cluttered-interface-12 {
    font-weight: 700;
  }

  .user-pain-points-pic-container {
    max-width: 100%;
  }

  .user-pain-points-pic {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .user-persona-withyou {
    width: 100%;
    height: 100%;
  }

  .target-user-container {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .featuresstatementsection {
    padding-left: 15vw;
    padding-right: 15vw;
  }

  .competitor-analysis-container {
    width: 100%;
    height: 100%;
  }

  .sketch-container {
    width: 100%;
  }

  .sketch-container-pic {
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
  }

  .sketch-content-container {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    flex-wrap: nowrap;
  }

  .sketch-content-wireframes-container {
    width: 749px;
  }

  .text-90 {
    font-size: 24px;
  }

  .untitled-notebook-7 {
    width: 267px;
    height: 324px;
  }

  .untitled-notebook-7._2 {
    width: 320px;
    height: 325px;
  }

  .untitled-notebook-7._3 {
    width: 404px;
    height: 244px;
  }

  .untitled-notebook-7._4 {
    width: 331px;
    height: 244px;
  }

  .gif {
    align-items: center;
  }

  .text-91 {
    font-size: 24px;
  }

  .designwalkthroughcontentcontainer {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    background-color: #131420;
    align-self: center;
  }

  .designsolutioncontentcontainer {
    max-width: none;
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    align-items: flex-start;
  }

  .text-92 {
    text-align: left;
    line-height: 1.15em;
  }

  .text-93 {
    max-width: 964px;
  }

  .moodboard-pic-wrapper {
    width: 100%;
    height: 100%;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    border-radius: 0;
  }

  .moodboard-pic {
    width: 100%;
    height: 100%;
  }

  .solution-text-container {
    max-width: 900px;
  }

  .text-107 {
    padding-left: 8.275rem;
  }

  .designsolutionbreakdown-wrapper {
    grid-column-gap: 176px;
    grid-row-gap: 176px;
  }

  .to-solve-the-problem-we-focused-on-two-main-design-solutions-revamping-the-information-architecture-and-content-organization-10 {
    color: #fff;
  }

  .to-solve-the-problem-we-focused-on-two-main-design-solutions-revamping-the-information-architecture-and-content-organization-12 {
    background-image: linear-gradient(95.28deg, #2781f1, #72e0fa);
  }

  .clickable-prototype-section, .clickable-prototype-wrapper {
    height: auto;
  }

  .prototype-container {
    height: auto;
    color: #fff;
    background-color: #fff;
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .figma-prototype {
    width: 100%;
    height: 100%;
  }

  .styleguide-section {
    border-radius: 0;
  }

  .styleguide-container {
    width: 100%;
    height: 100%;
    align-self: flex-start;
  }

  .error-3373cf77-56f3-aa45-2636-3366b3559755 {
    max-width: 964px;
  }

  .styleguide-pic {
    border-radius: 0;
  }

  .paragraph {
    max-width: 964px;
    color: #d2d2d2;
    font-size: 24px;
    font-weight: 400;
  }

  .link {
    color: #fff;
    font-weight: 700;
  }

  .featurescontentcontainer {
    width: 100%;
    height: 100%;
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    align-items: flex-start;
  }

  .mobileprototype-container {
    width: 100%;
    height: 700px;
    align-self: center;
  }

  .desktopprototypecontainer {
    width: 100%;
    height: 700px;
  }

  .designprinciples-readingtokids {
    width: 100%;
    max-width: none;
  }

  .design-challenge-picture-wrapper {
    width: 100%;
    height: 100%;
  }

  .light-pink-blur {
    width: 25vw;
  }

  .herosectionhomepage {
    width: auto;
    height: 90vh;
    justify-content: flex-start;
    position: relative;
  }

  .herosectionwrapper {
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    margin-top: 14vh;
    position: relative;
    top: -72.9062px;
  }

  .h2-uxui {
    color: rgba(0, 0, 0, 0);
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #d9d9d9;
    margin-bottom: 0;
  }

  .aboutmesection {
    padding-top: 1vw;
    padding-left: 6vw;
    position: relative;
  }

  .aboutmewrapper {
    justify-content: flex-start;
  }

  .aboutmeleftsectionwrapper {
    width: 33.3125rem;
  }

  .aboutmeleftsectiontop {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .aboutmedescription {
    font-size: 1.5rem;
  }

  .figmaqueentext {
    font-size: 24px;
  }

  .aboutmerightsection {
    width: 50%;
  }

  .figmaqueenneonlight {
    width: 100%;
    height: 100%;
    margin-left: 11vw;
  }

  .figmaqueenmypic {
    width: 35%;
    height: 70%;
    top: 14.7vw;
    left: 26.4vw;
  }

  .h2-movingtext {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
  }

  .project-summary {
    font-size: 20px;
    line-height: 1.5em;
  }

  .html-embed-2 {
    height: 100%;
    justify-content: center;
    padding-top: 0;
    display: block;
  }

  .text-262 {
    text-align: left;
    align-self: flex-start;
  }

  .rightarrowicon:hover {
    opacity: .6;
  }

  .leftarrowicon {
    opacity: 1;
  }

  .whativelearnedcards {
    width: 100%;
    max-width: none;
    grid-column-gap: 4em;
    grid-row-gap: 4em;
    flex-flow: row;
    justify-content: space-between;
  }

  .learning1card {
    min-width: 0;
  }

  .learning1contentcontainer {
    grid-column-gap: 1.15rem;
    grid-row-gap: 1.15rem;
    align-self: center;
  }

  .accessbilityiconcontainer {
    height: 100%;
  }

  .learning2contentcontainer {
    align-self: center;
  }

  .learning3card {
    min-width: 0;
  }

  .see-my-work-or-listen-to-testimony-0 {
    color: #fff;
  }

  .see-my-work-or-listen-to-testimony-2 {
    text-decoration: none;
  }

  .designprocesscontainer {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .designprocesstextwrapper {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .text-274 {
    font-size: 2.5rem;
  }

  .text-275 {
    font-size: 1.5rem;
    font-weight: 400;
  }

  .designcardscontainer {
    min-height: 100%;
    flex-wrap: nowrap;
    padding-top: 2rem;
    padding-bottom: 2rem;
    overflow: scroll;
  }

  .designprcoesscardtextwrapper {
    justify-content: flex-start;
  }

  .projectcontentcontainer {
    width: 100%;
    height: 100%;
  }

  .testimonialtitlecontainersection {
    width: 100%;
    height: 100%;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .projecttitlesection {
    font-size: 2.5rem;
  }

  .projectsubtitlecontainer {
    max-width: 963px;
    color: #d2d2d2;
    font-size: 1.5rem;
    font-style: normal;
  }

  .projectcardcontainer {
    transition: box-shadow .3s cubic-bezier(.165, .84, .44, 1);
  }

  .nextprojectcontent {
    width: 100%;
    height: 100%;
  }

  .projectdetailscontainer, .text-302, .text-303 {
    text-decoration: none;
  }

  .nextprojectpiccontainer {
    border-radius: 0;
  }

  .withyouprojectpreviewpic {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }

  .footer {
    background-color: #131420;
  }

  .logoiconpic {
    margin-top: 12px;
  }

  .footermenucontainer {
    height: 2.75rem;
    padding: .5rem .5rem .5rem 0;
  }

  .frame-481725 {
    height: 2.75rem;
    padding: .5rem;
  }

  .menu-outer-wrapper {
    z-index: 1000;
    display: none;
    top: 11%;
  }

  .menu-inner-wrapper {
    justify-content: center;
  }

  .menu-item-wrapper {
    flex-direction: column;
    order: 0;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
  }

  .menu-item-link {
    overflow: visible;
  }

  .menulink-underline {
    width: 100%;
  }

  .lottiescrollwrapper {
    align-items: center;
    display: flex;
  }

  .aboutmeintrosection {
    max-width: none;
    align-items: center;
    padding-top: 3vw;
    padding-bottom: 6vw;
    padding-right: 6vw;
  }

  .aboutmetext {
    width: 50%;
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    margin-top: 10vh;
  }

  .text-314 {
    color: #fff;
    font-weight: 600;
  }

  .mypicture {
    margin-top: -73px;
  }

  .i-find-joy-in-crafting-experiences-that-have-the-power-to-enrich-peoples-lives-for-me-design-is-not-just-about-aesthetics-its-a-meaningful-journey-of-creating-solutions-that-address-real-world-challenges-and-make-everyday-interactions-more-seamless-and-enjoyable-0 {
    font-size: 1.5rem;
  }

  .scrolllottiecontainer {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    margin-top: -5%;
    top: 40.8vw;
    left: auto;
    right: auto;
  }

  .aboutmecontentcontainer {
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: flex-start;
    display: flex;
  }

  .aboutmestorysection {
    margin-bottom: 0;
  }

  .aboutmetextwrapper {
    padding-top: 6vh;
  }

  .aboutmesubtitle {
    max-width: 963px;
  }

  .timelinewrapper {
    z-index: auto;
    padding-bottom: 6vh;
    padding-left: 6vh;
    padding-right: 6vh;
    font-weight: 600;
  }

  .timelineright {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    flex-direction: column;
    display: flex;
  }

  .timelineprogressbar {
    width: 3px;
    height: 50vh;
    position: fixed;
    bottom: 50vh;
  }

  .aboutmestorycard {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .graphicdesigncollage {
    align-self: center;
  }

  .text-span {
    color: #fff;
    font-weight: 600;
  }

  .text-span-2 {
    color: #fff;
    -webkit-text-stroke-color: #fff;
    font-weight: 600;
  }

  .text-span-4 {
    color: #fff;
    font-weight: 600;
  }

  .extracurricularsection {
    padding: 6vw;
  }

  .thanksforstoppingsection {
    padding-top: 6vh;
    padding-bottom: 12vh;
  }

  .text-319 {
    font-family: Yellowtail, sans-serif;
    font-weight: 400;
  }

  .sketchingvideo {
    width: 100%;
    height: 100%;
  }

  .problemstatscontainer {
    grid-column-gap: 16vw;
    grid-row-gap: 16vw;
  }

  .features-section {
    width: 100%;
  }

  .text-335 {
    max-width: 964px;
  }

  .withyouarfeaturevideosection {
    padding-top: 10vh;
    padding-bottom: 10vh;
  }

  .withyouarfeaturevideo {
    width: 100%;
    height: 100vh;
  }

  .transition {
    display: none;
  }

  .next-project-section {
    padding: 64px;
  }

  .learning3contentcontainer {
    align-self: center;
  }

  .checklisticoncontainer {
    height: 100%;
  }

  .withyou-video-wrapper {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-self: center;
    align-items: center;
    display: flex;
  }

  .design-challenge-section-withyou, .competitoranalysisstatementsection {
    padding-left: 15vw;
    padding-right: 15vw;
  }

  .featuressectionlist {
    width: 100%;
    max-width: none;
  }

  .featureslist {
    width: 100%;
    height: 100%;
  }

  .projectpreviewpic {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }

  .finalscreensoverview {
    padding-top: 0;
    padding-bottom: 0;
  }

  .finalprototypeallscreenpic {
    width: 100%;
    height: 100%;
  }

  .finalprototypevideo-copy {
    object-fit: fill;
    background-color: #fff;
    justify-content: center;
    align-self: flex-start;
    padding-top: 0;
    display: flex;
    overflow: hidden;
  }

  .readingtokidspreviewpic, .sanbedauniversityprojectpreviewpic, .nationalparkserviceprojectpreviewpic, .lezgobillsplitprojectpreviewpic, .graphicdesigncollagepic {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }

  .designprocesscards2:hover, .designprocesscards3:hover, .designprocesscards4:hover, .designprocesscards-copy:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  }

  .testimonialcardcontainer {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .testimonialcard2 {
    min-height: 549px;
  }

  .text-349 {
    min-height: 315px;
  }

  .testimonialpersonpic {
    border-radius: 8px;
  }

  .testimonialcardcontent2container {
    min-height: 0;
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .testimonialcard3, .testimonialcard {
    min-height: 550px;
  }

  .footerlinkblock {
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .menulink-underline-footer {
    width: 100%;
    margin-bottom: 0;
    transform: translate(-120%);
  }

  .footerlinkwrapper {
    align-self: flex-start;
    padding: 0;
  }

  .myworklink {
    color: #fff;
    text-decoration: none;
  }

  .uxuitextwrapper {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    flex-direction: column;
    display: flex;
  }

  .footerlinkblock-copy {
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .see-my-work-or-listen-to-testimony-2-copy {
    text-decoration: none;
  }

  .text-349-copy {
    min-height: 315px;
  }

  .projectcardlink {
    width: 100%;
    height: 100%;
  }

  .click-around-the-website-below-2-copy, .click-around-the-website-below-3-copy {
    background-image: linear-gradient(93.98deg, #2781f1, #72e0fa);
  }

  .lottie-animation-2 {
    width: 160px;
    height: 160px;
    align-items: center;
    display: flex;
  }

  .text-span-5 {
    color: #fff;
    font-weight: 600;
  }
}

@media screen and (max-width: 991px) {
  h1 {
    text-transform: uppercase;
    font-size: 60px;
    line-height: 100%;
  }

  .preview-mockup {
    width: 100%;
    height: 100%;
  }

  .text-23 {
    width: 100%;
    max-width: 512px;
    font-size: 16px;
    line-height: 24px;
  }

  .a-website-redesign-for-a-nonprofit-organization-that-allows-volunteers-to-visit-schools-and-read-books-to-children-4 {
    font-size: 20px;
    line-height: 24px;
  }

  .overview-section {
    align-items: center;
    padding: 6vw;
  }

  .overview-wrapper {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .overview-top-wrapper {
    grid-column-gap: 24px;
    justify-content: flex-start;
    align-self: flex-start;
    padding: 0;
  }

  .overview-top-left-wrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .text-24 {
    font-size: 32px;
  }

  .text-25 {
    width: 100%;
    font-size: 16px;
    line-height: 24px;
  }

  .overview-top-right-wrapper {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-wrap: nowrap;
    align-content: space-around;
    justify-content: space-between;
    font-size: 12px;
  }

  .project-detail {
    font-size: 20px;
  }

  .project-type-wrapper {
    width: 100%;
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .text-28 {
    font-size: 16px;
    line-height: 1.5em;
  }

  .overview-bottom-wrapper {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-direction: column;
    align-items: center;
  }

  .videocontainer {
    width: 100%;
    height: 50vh;
  }

  .overview-bottom-right-container {
    max-width: none;
    text-align: left;
  }

  .detail-contribution-container {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .icon {
    width: 46px;
    height: 46px;
    display: none;
  }

  .left-arrow {
    justify-content: center;
  }

  .right-arrow {
    justify-content: center;
    align-items: center;
  }

  .slider {
    width: 100%;
    height: 100%;
  }

  .slider-screen-section {
    width: 100%;
    height: auto;
  }

  .slidetimerwrapper {
    margin-bottom: 16px;
    bottom: -1%;
  }

  .designprocesscard {
    padding: 6vw;
  }

  .design-process-container {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .text-37 {
    font-size: 24px;
  }

  .text-38 {
    color: #fff;
    font-size: 16px;
  }

  .designprocesslistcontainer {
    flex-direction: column;
    align-items: flex-start;
  }

  .text-39 {
    align-self: auto;
    font-size: 12px;
  }

  .text-40 {
    font-size: 16px;
  }

  .define-problem-pic {
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
  }

  .defineproblemtext {
    width: 768px;
    font-size: 16px;
    line-height: 24px;
  }

  .define-problem-section {
    width: 100%;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    padding: 6vw;
  }

  .define-problem-top-wrapper {
    width: 100%;
    max-width: none;
    min-width: 0;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .text-62 {
    font-size: 24px;
  }

  .text-63 {
    width: 100%;
    max-width: none;
    font-size: 16px;
    line-height: 24px;
  }

  .first-we-assessed-the-current-website-to-quickly-identify-the-usability-issues-we-found-that-the-two-main-usability-challenges-are-confusing-navigation-and-cluttered-interface-12 {
    font-size: 16px;
    line-height: 24px;
  }

  .user-pain-points-pic-container {
    border-radius: 16px;
    overflow: hidden;
  }

  .user-pain-points-section {
    padding: 32px;
  }

  .user-paint-points-container {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    overflow: visible;
  }

  .user-pain-points-top-container {
    width: 100%;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .text-73 {
    font-size: 24px;
  }

  .text-74 {
    font-size: 16px;
    line-height: 24px;
  }

  .key-research-questions-wrapper {
    max-width: none;
    min-width: 0;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .text-75 {
    font-size: 16px;
  }

  .text-76 {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.15rem;
  }

  .user-pain-points-pic {
    width: auto;
    height: auto;
    border-radius: 0;
  }

  .user-persona-withyou {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .target-user-section {
    align-items: center;
    padding: 32px;
  }

  .target-user-container {
    width: 100%;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    overflow: visible;
  }

  .text-78 {
    font-size: 24px;
  }

  .target-user-pic-container {
    width: 100%;
    height: 100%;
    min-width: 0;
    overflow: visible;
  }

  .featuresstatementsection {
    padding: 6vw;
    line-height: 32px;
  }

  .competitoranalysisstatementcontentcontainer {
    width: 634px;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    align-self: center;
  }

  .text-79 {
    font-size: 16px;
  }

  .text-80 {
    font-size: 24px;
    line-height: 100%;
  }

  .competitorslackstatementcontainer, .how-can-we-help-users-navigate-effortlessly-and-find-relevant-information-quickly-to-empower-users-to-understand-opportunities-and-take-purposeful-actions-2 {
    font-size: 24px;
    line-height: 32px;
  }

  .address-design-challenge-section {
    padding: 32px;
  }

  .competitor-analysis-section {
    padding: 6vw;
  }

  .competitor-analysis-container, .competitor-analysis-top-wrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .text-83 {
    font-size: 24px;
  }

  .text-84 {
    width: 100%;
    font-size: 16px;
    line-height: 24px;
  }

  .competitoranalysis, .userflowpic {
    width: 100%;
    height: 100%;
  }

  .sitemap-section {
    padding: 32px;
  }

  .sitemap-container {
    height: auto;
    grid-column-gap: 21px;
    grid-row-gap: 21px;
  }

  .sitemap-top-wrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .text-87 {
    font-size: 24px;
  }

  .text-88 {
    width: 100%;
    font-size: 16px;
    line-height: 24px;
  }

  .sketching-section {
    padding: 6vw;
  }

  .sketch-container {
    width: 100%;
    height: 100%;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .text-89 {
    font-size: 24px;
  }

  .sketchingredesignconcept-text {
    width: 100%;
    font-size: 16px;
    line-height: 24px;
  }

  .sketch-container-pic {
    width: 100%;
    height: 100%;
    grid-column-gap: .625rem;
    grid-row-gap: .625rem;
    margin-bottom: 0;
    padding: 20px;
  }

  .sketch-content-container {
    width: 100%;
    height: 100%;
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
  }

  .sketch-content-wireframes-container {
    width: 398.97px;
    height: auto;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .homepageinternship {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .text-90 {
    font-size: 12px;
  }

  .frame-695 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .untitled-notebook-7 {
    width: 142.44px;
    height: 174px;
  }

  .untitled-notebook-7._2 {
    width: 170.46px;
    height: 174px;
  }

  .untitled-notebook-7._3 {
    width: 215.44px;
    height: 130.38px;
  }

  .untitled-notebook-7._4 {
    width: 176.57px;
    height: 130.44px;
  }

  .website-annotations-readingtokids-container {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .gif {
    height: 60vh;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .text-91 {
    text-align: center;
    font-size: 12px;
  }

  .moodboard-section {
    padding: 6vw;
  }

  .designwalkthroughcontentcontainer, .designsolutioncontentcontainer {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .text-92 {
    font-size: 24px;
  }

  .text-93 {
    width: 100%;
    font-size: 16px;
    line-height: 24px;
  }

  .moodboard-pic-wrapper {
    width: 100%;
    height: 100%;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .moodboard-pic, .homepage-1-1 {
    width: 100%;
    height: 100%;
  }

  .solution-section {
    height: auto;
    padding: 6vw;
  }

  .solution-text-container {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .text-106 {
    font-size: 24px;
  }

  .design {
    height: 1000px;
  }

  .designsolutionbreakdown-container {
    width: 348px;
    height: 891px;
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .text-107 {
    padding-left: 77px;
    font-size: 16px;
  }

  .designsolutionbreakdown-wrapper {
    grid-column-gap: 72px;
    grid-row-gap: 72px;
  }

  .simplified-navigation {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .solutionnumberframe {
    width: 55.67px;
  }

  .text-108 {
    width: 60px;
    font-size: 88px;
  }

  .solutionbreakdowntextcontainer {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .solutionbreakdowntitle {
    font-size: 16px;
    line-height: 24px;
  }

  .solutionbreakdownlistcontainer {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .text-110 {
    font-size: 12px;
  }

  .text-111 {
    font-size: 12px;
    line-height: 24px;
  }

  .to-solve-the-problem-we-focused-on-two-main-design-solutions-revamping-the-information-architecture-and-content-organization-10 {
    width: 513px;
    font-size: 16px;
    line-height: 0;
  }

  .to-solve-the-problem-we-focused-on-two-main-design-solutions-revamping-the-information-architecture-and-content-organization-11, .to-solve-the-problem-we-focused-on-two-main-design-solutions-revamping-the-information-architecture-and-content-organization-12, .click-around-the-website-below {
    font-size: 16px;
    line-height: 24px;
  }

  .clickable-prototype-section {
    height: auto;
    padding: 6vw;
  }

  .clickable-prototype-wrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .text-124 {
    font-size: 24px;
  }

  .prototype-container {
    height: 100%;
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    padding: 20px;
  }

  .click-around-the-website-below-2, .click-around-the-website-below-3, .text-block, .text-block._2 {
    font-size: 16px;
  }

  .styleguide-section {
    padding: 6vw;
  }

  .styleguide-container {
    width: 100%;
    height: 100%;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .text-126 {
    font-size: 24px;
  }

  .error-3373cf77-56f3-aa45-2636-3366b3559755 {
    width: 100%;
    font-size: 16px;
  }

  .styleguide-pic {
    width: 100%;
    height: 100%;
  }

  .paragraph {
    width: 100%;
    color: #d2d2d2;
    font-size: 16px;
    line-height: 24px;
  }

  .link {
    color: #fff;
    font-weight: 700;
  }

  .homepagereadingtokidspic {
    width: 100vw;
    height: 100%;
    max-width: none;
  }

  .image-3, .slide3, .slide4 {
    width: 100%;
    height: 100%;
  }

  .featurescontentcontainer, .feautrescontent-top-container {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .text-134 {
    font-size: 24px;
  }

  .text-135 {
    width: 100%;
    font-size: 16px;
    line-height: 24px;
  }

  .rtk-homepagepicwrapper {
    width: 265px;
    height: 960px;
  }

  .mobileprototype-container, .desktopprototypecontainer {
    width: 100%;
    height: 700px;
  }

  .styleguidepiccontainer, .designprinciples-readingtokids {
    width: 100%;
    height: 100%;
  }

  .light-pink-blur {
    width: 30vw;
    height: 35vw;
    border-radius: 0%;
    top: 5%;
    left: -1%;
  }

  .dark-purple-blur {
    height: 30vw;
    border-radius: 0%;
    top: 11%;
  }

  .purple-blur {
    width: 20vw;
    height: 30vw;
    border-radius: 0%;
    top: 2%;
    left: 2%;
  }

  .orange-blur {
    width: 25vw;
    height: 30vw;
    border-radius: 0%;
    top: 9%;
  }

  .bright-pink-blur {
    width: 20vw;
    height: 20vw;
    border-radius: 0%;
    top: 10%;
  }

  .herosectionhomepage {
    height: 65vh;
    padding-top: 0;
  }

  .herosectionwrapper {
    width: 100%;
    height: 100%;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    justify-content: center;
    margin-top: 4vh;
  }

  .h1-kathrina {
    font-size: 18vw;
  }

  .h2-uxui {
    font-size: 7vw;
  }

  .aboutmeleftsectionwrapper, .aboutmeleftsectiontop {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .helloimkathrina {
    font-size: 24px;
  }

  .aboutmedescription, .figmaqueentext {
    font-size: 16px;
  }

  .aboutmerightsection {
    height: 100%;
  }

  .figmaqueenneonlight {
    width: 120%;
    height: 120%;
    margin-left: -3vw;
  }

  .figmaqueenmypic {
    width: 50%;
    height: 80%;
    margin-right: 0;
    padding-bottom: 0;
    top: 30%;
    left: 28%;
    right: auto;
  }

  .dubbed-as-the-figma-queen-of-design-teams-1 {
    font-size: 16px;
  }

  .h2-movingtext {
    width: 100%;
    justify-content: center;
    align-items: center;
    font-size: 7vw;
    display: flex;
    position: static;
  }

  .project-summary {
    max-width: 80%;
    font-size: 20px;
  }

  .html-embed-2 {
    width: 100%;
  }

  .text-255 {
    align-self: center;
    font-size: 24px;
  }

  .whativelearnedsection {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    padding: 6vw;
  }

  .whativelearnedcontentcontainer {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    align-items: center;
  }

  .text-262 {
    width: 100%;
    text-align: center;
    align-self: center;
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 16px;
  }

  .rightarrowicon:hover {
    opacity: 1;
  }

  .leftarrowicon {
    transition-property: none;
  }

  .leftarrowicon:hover {
    opacity: 1;
  }

  .whativelearnedcards {
    flex-wrap: wrap;
    justify-content: center;
  }

  .learning1card {
    max-width: 360px;
    min-height: 0;
    min-width: 0;
    padding: 24px;
  }

  .text-269 {
    font-size: 20px;
  }

  .learning2card {
    max-width: 360px;
    min-height: 0;
    padding: 24px;
  }

  .learning3card {
    max-width: 360px;
    min-height: 1px;
    min-width: 0;
    padding: 24px;
  }

  .aboutmelinkwrapper {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
  }

  .text-271 {
    font-size: 1.25rem;
    line-height: 1.5em;
  }

  .see-my-work-or-listen-to-testimony-0, .see-my-work-or-listen-to-testimony-2 {
    font-size: 16px;
  }

  .mainnavbar {
    justify-content: space-between;
  }

  .designprocesstextwrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .text-274 {
    font-size: 24px;
  }

  .text-275 {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
  }

  .designcardscontainer {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    justify-content: flex-start;
    overflow: visible;
  }

  .text-282 {
    font-size: 20px;
  }

  .designprocessbackgroundimage {
    object-fit: fill;
  }

  .testimonialtitlecontainersection {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .projecttitlesection {
    font-size: 24px;
  }

  .projectsubtitlecontainer {
    font-size: 16px;
  }

  .nextprojectcontent {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .projectdetailscontainer {
    justify-content: center;
  }

  .tagscard {
    width: auto;
  }

  .tagcontainer {
    padding: .5rem 1rem;
  }

  .text-301 {
    font-size: .875rem;
  }

  .projecttitle {
    justify-content: flex-start;
  }

  .text-302 {
    font-size: 20px;
  }

  .lineicon {
    width: 1.5rem;
  }

  .text-303 {
    font-size: 16px;
  }

  .withyouprojectpreviewpic {
    border-radius: 8px;
  }

  .footericonwrapper {
    width: auto;
    height: 20vh;
    top: .8rem;
  }

  .logoiconpic {
    width: 100%;
    height: 100%;
  }

  .menu-outer-wrapper {
    display: none;
    top: 0%;
  }

  .menu-item-link, .menu-item-link.w--current {
    font-size: 2rem;
  }

  .menulink-underline {
    display: none;
    transform: none;
  }

  .lottiescrollwrapper {
    width: auto;
    height: auto;
    position: static;
  }

  .text-313 {
    font-size: 24px;
  }

  .text-314, .i-find-joy-in-crafting-experiences-that-have-the-power-to-enrich-peoples-lives-for-me-design-is-not-just-about-aesthetics-its-a-meaningful-journey-of-creating-solutions-that-address-real-world-challenges-and-make-everyday-interactions-more-seamless-and-enjoyable-0 {
    font-size: 16px;
  }

  .scrolllottiecontainer {
    margin-top: 3%;
  }

  .aboutmecontentcontainer {
    flex-wrap: wrap;
  }

  .aboutmetextwrapper {
    padding-top: 3vh;
    padding-bottom: 3vh;
  }

  .aboutmetitle {
    font-size: 24px;
  }

  .aboutmesubtitle {
    font-size: 16px;
  }

  .timelinecenter {
    justify-content: flex-start;
  }

  .timelineright {
    display: flex;
  }

  .timelinelefttext {
    margin-bottom: 1rem;
    font-size: 24px;
    bottom: 0;
  }

  .circle {
    align-self: auto;
  }

  .text-block-5 {
    font-size: 16px;
  }

  .progressbar {
    align-self: center;
    left: auto;
  }

  .timelineprogressbar {
    z-index: -1;
  }

  .aboutmestorycard {
    border-radius: 8px;
    padding: 16px;
  }

  .aboutmeprojectpreviewpic {
    border-radius: 4px;
  }

  .thanksforstoppingsection {
    padding-bottom: 6vh;
  }

  .thankyoumessagecontainer {
    font-size: 16px;
  }

  .thanks-for-stopping-by, .text-319 {
    font-size: 20px;
  }

  .sketchingvideo {
    height: 100%;
    border-radius: 4px;
  }

  .statswrapper {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
  }

  .coupleiconcontainer {
    transform: scale(.8);
  }

  .text-323 {
    font-size: 24px;
  }

  .text-324 {
    font-size: 16px;
  }

  .hourglassiconcontainer {
    transform: scale(.8);
  }

  .frame-481791 {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
  }

  .brokenhearticoncontainer {
    width: 80%;
    transform: scale(.8);
  }

  .frame-481792 {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
  }

  .features-section, .iterationsection {
    padding: 6vw;
  }

  .iterationcontentcontainer {
    grid-column-gap: 2em;
    grid-row-gap: 2em;
  }

  .iterationtopcontainer {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .text-334 {
    font-size: 24px;
  }

  .text-335 {
    width: 100%;
    font-size: 16px;
  }

  .learningsection {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    padding: 6vw;
  }

  .next-project-section {
    padding: 6vw;
  }

  .withyouinfo {
    justify-content: flex-start;
  }

  .design-challenge-container-copy {
    width: 634px;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    align-self: center;
  }

  .withyou-video-wrapper {
    width: 245.56px;
    height: 352.99px;
  }

  .design-challenge-section-withyou, .competitoranalysisstatementsection {
    padding: 6vw;
    line-height: 32px;
  }

  .featuressection {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .featuressectionlist {
    width: 100%;
    height: 100%;
  }

  .featuresstatementcontentcontainer {
    width: 634px;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    align-self: center;
  }

  .featuresstatementcontainer {
    font-size: 24px;
    line-height: 32px;
  }

  .userflow-section {
    padding: 6vw;
  }

  .userflow-top-container {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .designwalkthroughsection {
    padding: 6vw;
  }

  .projectpreviewpic {
    border-radius: 8px;
  }

  .projectinfo {
    justify-content: flex-start;
  }

  .finalprototypevideo-copy {
    width: 100%;
    height: 400px;
  }

  .readingtokidspreviewpic, .sanbedauniversityprojectpreviewpic, .nationalparkserviceprojectpreviewpic, .lezgobillsplitprojectpreviewpic, .graphicdesigncollagepic {
    border-radius: 8px;
  }

  .designprocesscards2, .designprocesscards3, .designprocesscards4, .designprocesscards-copy {
    border-color: #000;
    overflow: hidden;
  }

  .testimonialcardcontainer {
    justify-content: center;
  }

  .nametitlecontainer {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
  }

  .text-350 {
    font-size: 20px;
    line-height: 1.15em;
  }

  .testimonialcard {
    padding: 3vw;
  }

  .menulink-underline-footer {
    display: none;
    transform: none;
  }

  .uxuitextwrapper {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .see-my-work-or-listen-to-testimony-2-copy {
    font-size: 16px;
  }

  .click-around-the-website-below-copy {
    font-size: 16px;
    line-height: 24px;
  }

  .click-around-the-website-below-2-copy, .click-around-the-website-below-3-copy {
    font-size: 16px;
  }

  .how-can-we-help-users-navigate-effortlessly-and-find-relevant-information-quickly-to-empower-users-to-understand-opportunities-and-take-purposeful-actions-2-copy {
    font-size: 24px;
    line-height: 32px;
  }

  .lottie-animation-2 {
    width: 110px;
    height: 110px;
    position: static;
  }

  .aboutmedescriptioncontainer {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-direction: column;
    display: flex;
  }
}

@media screen and (max-width: 767px) {
  .body {
    overflow: visible;
  }

  .preview-mockup {
    width: 100%;
    height: 100%;
  }

  .text-23 {
    width: 100%;
    font-size: 16px;
    line-height: 1.5rem;
  }

  .a-website-redesign-for-a-nonprofit-organization-that-allows-volunteers-to-visit-schools-and-read-books-to-children-4 {
    text-align: center;
    font-size: 16px;
    line-height: 0;
  }

  .overview-section {
    padding: 32px 16px;
  }

  .overview-wrapper {
    width: 100%;
    height: 100%;
  }

  .overview-top-wrapper {
    width: 100%;
    height: 100%;
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    padding-left: 0;
    padding-right: 0;
  }

  .overview-top-left-wrapper {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    line-height: 12px;
  }

  .text-24 {
    font-size: 24px;
  }

  .text-25 {
    line-height: 16px;
  }

  .overview-top-right-wrapper {
    height: 100%;
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    flex-flow: row;
    align-content: flex-start;
    justify-content: space-between;
    overflow: hidden;
  }

  .project-detail {
    width: 100%;
    font-size: 16px;
  }

  .project-type-wrapper {
    width: 77px;
    overflow: visible;
  }

  .text-28 {
    width: 100%;
    overflow: visible;
  }

  .videocontainer {
    width: 100%;
    height: 40vh;
  }

  .text-30 {
    font-size: 16px;
  }

  .overview-bottom-right-container {
    padding-left: 0;
    padding-right: 0;
  }

  .left-arrow {
    justify-content: center;
    align-items: center;
    margin-left: 16px;
  }

  .right-arrow {
    justify-content: center;
    align-items: center;
    margin-right: 16px;
  }

  .icon-2 {
    opacity: 0;
  }

  .slider {
    width: 100%;
    height: 100%;
  }

  .slider-screen-section {
    width: 100%;
    height: auto;
  }

  .videowrapper {
    height: 300px;
  }

  .videowrapper.withyou {
    width: 100%;
    height: 100%;
    border-radius: 16px;
  }

  .slide {
    width: 100%;
    height: 100%;
  }

  .slidetimerwrapper {
    width: 28rem;
    margin-bottom: 2px;
    top: auto;
    bottom: 0%;
    transform: scale(.7);
  }

  .designprocesscard {
    padding: 6vw;
  }

  .design-process-bottom-container {
    flex-wrap: wrap;
  }

  .design-process-stage-wrapper1, .line-separator-design-process {
    width: 100%;
  }

  .defineproblemtext {
    width: 80%;
  }

  .define-problem-section {
    padding: 32px 16px;
  }

  .define-problem-top-wrapper {
    width: 100%;
  }

  .text-63 {
    width: 80%;
  }

  .first-we-assessed-the-current-website-to-quickly-identify-the-usability-issues-we-found-that-the-two-main-usability-challenges-are-confusing-navigation-and-cluttered-interface-12 {
    width: 100%;
  }

  .user-pain-points-pic-container {
    border-radius: 0;
  }

  .user-pain-points-section {
    padding: 32px 16px;
  }

  .user-pain-points-top-container {
    width: 100%;
  }

  .text-74 {
    width: 80%;
  }

  .key-research-questions-wrapper, .text-76 {
    width: 100%;
  }

  .user-pain-points-pic {
    border-radius: 0;
  }

  .target-user-section, .featuresstatementsection {
    padding: 32px 16px;
  }

  .competitoranalysisstatementcontentcontainer {
    width: 100%;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    line-height: 1.5rem;
  }

  .text-80 {
    font-size: 16px;
  }

  .competitorslackstatementcontainer, .how-can-we-help-users-navigate-effortlessly-and-find-relevant-information-quickly-to-empower-users-to-understand-opportunities-and-take-purposeful-actions-2 {
    font-size: 16px;
    line-height: 1.5rem;
  }

  .address-design-challenge-section, .competitor-analysis-section {
    padding: 32px 16px;
  }

  .competitor-analysis-container {
    width: 100%;
  }

  .competitor-analysis-top-wrapper {
    max-width: none;
  }

  .text-83 {
    line-height: 1.15em;
  }

  .text-84 {
    width: 80%;
  }

  .userflowpic {
    border-radius: 0;
    overflow: visible;
  }

  .sitemap-section {
    padding: 32px 16px;
  }

  .text-87 {
    line-height: 1.15em;
  }

  .text-88 {
    width: 80%;
  }

  .sketching-section {
    padding: 32px 16px;
  }

  .sketch-container {
    width: 100%;
  }

  .sketchingredesignconcept-text {
    width: 80%;
  }

  .sketch-container-pic {
    border-radius: 16px;
    padding: 24px 16px;
  }

  .sketch-content-container {
    flex-wrap: wrap;
    justify-content: center;
  }

  .sketch-content-wireframes-container {
    width: 100%;
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    align-items: center;
  }

  .frame-695 {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .untitled-notebook-7 {
    width: 217.44px;
    height: 264px;
  }

  .untitled-notebook-7._2 {
    width: 260px;
    height: 264px;
  }

  .untitled-notebook-7._3 {
    width: 278px;
    height: 168.38px;
  }

  .untitled-notebook-7._4 {
    width: 228px;
    height: 168px;
  }

  .website-annotations-readingtokids-container {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    align-items: center;
  }

  .frame-1030 {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .gif {
    width: 60%;
    height: 60vh;
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    margin-top: 0;
  }

  .text-91 {
    width: 100%;
    align-self: center;
  }

  .moodboard-section {
    padding: 32px 16px;
  }

  .designwalkthroughcontentcontainer {
    align-self: center;
  }

  .designsolutioncontentcontainer {
    width: 100%;
  }

  .text-92 {
    text-align: left;
  }

  .text-93 {
    width: 100%;
  }

  .solution-section {
    height: auto;
    margin-bottom: 0;
    padding: 32px 16px;
  }

  .solution-wrapper {
    height: auto;
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .design {
    height: auto;
    position: relative;
  }

  .designsolutionbreakdown-container {
    width: 60%;
    height: auto;
    max-width: none;
  }

  .text-107 {
    padding-left: 4.2rem;
  }

  .designsolutionbreakdown-wrapper {
    grid-column-gap: 56px;
    grid-row-gap: 56px;
  }

  .simplified-navigation {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .to-solve-the-problem-we-focused-on-two-main-design-solutions-revamping-the-information-architecture-and-content-organization-10 {
    width: 100%;
  }

  .clickable-prototype-section, .styleguide-section {
    padding: 32px 16px;
  }

  .error-3373cf77-56f3-aa45-2636-3366b3559755 {
    width: 100%;
  }

  .paragraph {
    width: 80%;
  }

  .homepagereadingtokidspic {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: inline-block;
  }

  .image-3, .slide3, .slide4, .mask {
    width: 100%;
    height: 100%;
  }

  .text-135 {
    width: 80%;
  }

  .rtk-homepagepicwrapper {
    width: 195px;
    height: 707px;
    position: -webkit-sticky;
    position: sticky;
    top: 32px;
  }

  .light-pink-blur {
    width: 20vw;
    height: 30vw;
    opacity: 1;
    top: 12%;
    left: 10%;
  }

  .dark-purple-blur {
    opacity: 1;
    top: 5%;
    left: 73%;
  }

  .purple-blur {
    height: 25vw;
    opacity: 1;
    top: -7%;
    left: 21%;
  }

  .orange-blur {
    height: 25vw;
    opacity: 1;
    top: 8%;
  }

  .bright-pink-blur {
    opacity: 1;
    top: 16%;
    left: 75%;
  }

  .herosectionhomepage {
    height: 60vh;
  }

  .herosectionwrapper {
    margin-top: 4vh;
  }

  .h1-kathrina {
    font-size: 14vw;
  }

  .h2-uxui {
    font-size: 7vw;
  }

  .aboutmesection {
    padding-top: 3vh;
  }

  .aboutmewrapper {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-wrap: wrap;
    justify-content: center;
    align-self: center;
  }

  .aboutmeleftsectionwrapper {
    justify-content: center;
    align-items: center;
  }

  .aboutmeleftsectiontop {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .helloimkathrina {
    align-self: center;
  }

  .aboutmedescription {
    text-align: center;
  }

  .figmaqueentext {
    width: 100%;
    text-align: center;
  }

  .aboutmerightsection {
    width: 80%;
    order: 0;
    justify-content: center;
    align-items: center;
  }

  .figmaqueenneonlight {
    width: 100%;
    height: 80%;
    align-self: center;
  }

  .figmaqueenmypic {
    width: 40%;
    height: 70%;
    top: 33%;
    left: 29%;
  }

  .h2-movingtext {
    font-size: 7vw;
    top: auto;
  }

  .project-summary {
    font-size: 16px;
    line-height: 1.15rem;
  }

  .html-embed-2 {
    width: 100%;
    height: 100%;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .text-255 {
    font-size: 24px;
  }

  .whativelearnedsection {
    padding: 32px 16px;
  }

  .whativelearnedcontentcontainer {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .text-262 {
    width: 100%;
    font-size: 16px;
  }

  .rightarrowicon, .leftarrowicon {
    height: 20%;
    transform: scale(.8);
  }

  .whativelearnedcards {
    grid-column-gap: 1.5em;
    grid-row-gap: 1.5em;
  }

  .learning1card {
    max-height: none;
    max-width: 340px;
    padding: 24px;
  }

  .text-269 {
    font-size: 16px;
  }

  .text-270 {
    font-size: 14px;
  }

  .learning2card, .learning3card {
    max-width: 340px;
  }

  .aboutmelinkwrapper {
    justify-content: center;
    align-self: center;
  }

  .designprocesscontainer {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .designprocesstextwrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    align-self: center;
    align-items: center;
  }

  .text-274 {
    text-align: center;
    font-size: 24px;
    line-height: 1.5em;
  }

  .text-275 {
    text-align: center;
    font-size: 16px;
    line-height: 1.5em;
  }

  .designcardscontainer {
    justify-content: center;
  }

  .projecttitlesection {
    font-size: 24px;
  }

  .projectsubtitlecontainer {
    font-size: 16px;
  }

  .projectcardcontainer {
    border-radius: 16px;
  }

  .nextprojectcontent, .projectdetailscontainer {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .tagscard {
    width: 100%;
  }

  .tagcontainer {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    padding: .5rem;
  }

  .text-301 {
    padding: .5vw 1vw;
  }

  .text-302 {
    width: auto;
  }

  .nextprojectpiccontainer {
    border-radius: 8px;
  }

  .footer {
    height: 80vh;
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    padding-left: 6vw;
    padding-right: 6vw;
  }

  .footercontentwrapper {
    height: 100%;
  }

  .footertopcontentwrapper {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-flow: column wrap;
  }

  .footericonwrapper {
    width: 25vw;
  }

  .logoiconpic {
    object-fit: contain;
    justify-content: flex-start;
  }

  .footerbottomcontentwrapper {
    margin-top: 16px;
  }

  .menu-outer-wrapper {
    display: none;
    overflow: visible;
  }

  .aboutmetext {
    width: 100%;
    align-items: center;
  }

  .text-313, .text-314 {
    text-align: center;
  }

  .mypicture {
    width: 70%;
    height: 70%;
  }

  .scrolllottiecontainer {
    align-items: flex-start;
  }

  .aboutmecontentcontainer {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
  }

  .aboutmetextwrapper {
    text-align: center;
    align-items: center;
    padding-top: 3vh;
    padding-bottom: 3vh;
    padding-left: 0;
  }

  .aboutmetitle {
    text-align: left;
  }

  .aboutmesubtitle {
    width: 100%;
    text-align: center;
  }

  .timeline {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
  }

  .timelinewrapper {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .timelineitem {
    grid-template-columns: 4rem 1fr;
  }

  .timelineleft {
    text-align: left;
  }

  .timelinecenter {
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
  }

  .timelinelefttext {
    margin-bottom: 1rem;
  }

  .progressbar {
    left: 14px;
  }

  .aboutmeprojectpreviewpic {
    border-radius: 4px;
  }

  .extracurriculartextcontainer {
    padding-left: 0;
    padding-right: 0;
  }

  .whatilovecollagepic {
    border-radius: 8px;
  }

  .footerlogocontainer {
    order: -1;
    align-self: flex-start;
  }

  .sketchingvideo {
    height: 100%;
  }

  .brokenhearticoncontainer {
    width: 100%;
  }

  .features-section {
    padding: 32px 16px;
  }

  .iterationsection {
    padding-left: 16px;
    padding-right: 16px;
  }

  .text-335 {
    width: 100%;
  }

  .learningsection {
    padding: 32px 16px;
  }

  .withyouarfeaturevideo {
    height: 80vh;
  }

  .withyouinfo {
    justify-content: space-between;
  }

  .design-challenge-container-copy {
    width: 100%;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    line-height: 1.5rem;
  }

  .withyou-video-wrapper {
    width: 15.3475rem;
    height: 22.0619rem;
  }

  .design-challenge-section-withyou, .competitoranalysisstatementsection {
    padding: 32px 16px;
  }

  .featuresstatementcontentcontainer {
    width: 100%;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    line-height: 1.5rem;
  }

  .featuresstatementcontainer {
    font-size: 16px;
    line-height: 1.5rem;
  }

  .userflow-section {
    padding: 32px 16px;
  }

  .userflow-container {
    border-radius: 16px;
  }

  .designwalkthroughsection {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 32px 16px;
  }

  .projectinfo {
    justify-content: space-between;
  }

  .finalprototypevideo-copy {
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .mypicwrapper {
    width: 100%;
    height: 100%;
    justify-content: center;
    display: flex;
  }

  .lottiewrapper {
    align-self: center;
  }

  .designprocesscards2, .designprocesscards3, .designprocesscards4, .designprocesscards-copy {
    padding-left: 2vw;
    padding-right: 2vw;
  }

  .how-can-we-help-users-navigate-effortlessly-and-find-relevant-information-quickly-to-empower-users-to-understand-opportunities-and-take-purposeful-actions-2-copy {
    font-size: 16px;
    line-height: 1.5rem;
  }

  .design-process-stage-wrapper2, .design-process-stage-wrapper3, .design-process-stage-wrapper4 {
    width: 100%;
  }
}

@media screen and (max-width: 479px) {
  body {
    height: 3000px;
  }

  h1 {
    font-size: 47px;
  }

  .body {
    overflow: visible;
  }

  .preview-mockup {
    width: 100%;
    height: 100%;
  }

  .a-website-redesign-for-a-nonprofit-organization-that-allows-volunteers-to-visit-schools-and-read-books-to-children-4 {
    line-height: 1.15em;
  }

  .overview-section {
    width: 100%;
    padding-left: 16px;
  }

  .overview-wrapper {
    width: 100%;
  }

  .overview-top-wrapper {
    width: 100%;
    height: 100%;
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-wrap: wrap;
    padding-left: 0;
    padding-right: 0;
  }

  .overview-top-left-wrapper {
    width: 100%;
  }

  .overview-top-right-wrapper {
    width: 100%;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    text-align: left;
    flex-wrap: wrap;
    padding-left: 0;
    padding-right: 0;
  }

  .project-type-wrapper {
    width: 100%;
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }

  .text-28 {
    font-weight: 400;
  }

  .overview-bottom-wrapper {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    justify-content: center;
  }

  .videocontainer {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .overview-bottom-right-container {
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .icon {
    z-index: 0;
    width: auto;
    height: auto;
    position: absolute;
    top: auto;
    overflow: visible;
  }

  .left-arrow {
    z-index: 2;
    height: auto;
    justify-content: center;
    margin-left: -2px;
    padding-top: 0;
    transform: scale(.8);
  }

  .right-arrow {
    z-index: 2;
    height: 100%;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding-bottom: 0;
    display: flex;
    position: absolute;
    transform: scale(.8);
  }

  .icon-2 {
    width: auto;
    height: auto;
    display: none;
    position: absolute;
    top: -106px;
    bottom: -205px;
  }

  .slider {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .videowrapper {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
  }

  .videowrapper.withyou {
    height: 100%;
  }

  .slide {
    width: 100%;
    height: 100%;
  }

  .slide-nav {
    display: none;
  }

  .slidetimerwrapper {
    width: 40%;
    height: 20%;
    object-fit: fill;
    justify-content: center;
    align-items: center;
    margin-bottom: -4px;
    margin-right: auto;
    position: absolute;
    bottom: 0%;
    left: 0%;
    right: 0%;
    transform: scale(1);
  }

  .timerbar {
    width: 25%;
  }

  .timerbar._2 {
    width: 50%;
  }

  .timerbar._4 {
    width: 100%;
  }

  .timerbar._3 {
    width: 75%;
  }

  .timerwrapper {
    width: 400px;
  }

  ._1-4iconimage {
    width: 100%;
    height: 100%;
    max-width: none;
  }

  .designprocesscard {
    overflow: visible;
  }

  .design-process-bottom-container {
    flex-wrap: wrap;
  }

  .defineproblemtext {
    line-height: 1.15em;
  }

  .define-problem-top-wrapper {
    width: 100%;
  }

  .text-62 {
    line-height: 1.15em;
  }

  .text-63 {
    width: 100%;
    line-height: 1.5em;
  }

  .user-pain-points-top-container {
    width: 100%;
  }

  .text-73 {
    line-height: 1.15em;
  }

  .text-74 {
    width: 100%;
    line-height: 1.5em;
  }

  .text-75 {
    line-height: 1.15em;
  }

  .text-76 {
    line-height: 1.5em;
  }

  .text-78 {
    line-height: 1.15em;
  }

  .featuresstatementsection {
    padding-left: 2vw;
    padding-right: 2vw;
  }

  .text-79 {
    text-align: center;
  }

  .text-80 {
    line-height: 1.5em;
  }

  .competitor-analysis-container {
    width: 100%;
  }

  .competitor-analysis-top-wrapper {
    max-width: none;
  }

  .text-83 {
    width: 100%;
    line-height: 1.15em;
  }

  .text-84 {
    width: 100%;
    line-height: 1.5em;
  }

  .text-87 {
    line-height: 1.15em;
  }

  .text-88 {
    width: 100%;
    line-height: 1.5em;
  }

  .text-89 {
    line-height: 1.15em;
  }

  .sketchingredesignconcept-text {
    width: 100%;
    max-width: none;
    line-height: 1.5em;
  }

  .sketch-container-pic {
    height: auto;
  }

  .sketch-content-wireframes-container {
    height: 100%;
  }

  .text-90 {
    text-align: center;
  }

  .frame-695 {
    flex-wrap: wrap;
    justify-content: center;
  }

  .untitled-notebook-7, .untitled-notebook-7._2 {
    width: auto;
    height: 216px;
    min-width: 9rem;
    object-fit: fill;
  }

  .untitled-notebook-7._3 {
    width: 50%;
    height: 138px;
    min-width: 9rem;
    object-fit: fill;
  }

  .untitled-notebook-7._4 {
    width: auto;
    height: 138px;
    min-width: 9rem;
    object-fit: fill;
  }

  .frame-1030 {
    grid-column-gap: .8rem;
    grid-row-gap: .8rem;
    flex-flow: wrap;
    justify-content: center;
  }

  .gif {
    width: 80%;
    height: 60vh;
    grid-column-gap: .2em;
    grid-row-gap: .2em;
  }

  .designsolutioncontentcontainer {
    width: 100%;
    align-items: center;
  }

  .text-92 {
    text-align: left;
    align-self: center;
    line-height: 1.15em;
  }

  .text-93 {
    width: 100%;
    line-height: 1.5em;
  }

  .homepage-1-1 {
    width: 100%;
    height: 100%;
  }

  .solution-section {
    height: auto;
    min-height: 0%;
    margin-bottom: 0;
  }

  .solution-wrapper {
    max-width: none;
  }

  .design {
    height: auto;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    position: relative;
  }

  .text-107 {
    padding-left: 0;
  }

  .designsolutionbreakdown-wrapper {
    grid-column-gap: 64px;
    grid-row-gap: 64px;
  }

  .simplified-navigation {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-direction: column;
    align-self: center;
    align-items: flex-start;
  }

  .text-108 {
    width: 40px;
    align-self: center;
  }

  .to-solve-the-problem-we-focused-on-two-main-design-solutions-revamping-the-information-architecture-and-content-organization-10 {
    width: 100%;
    max-width: none;
  }

  .click-around-the-website-below {
    text-align: center;
    line-height: 1.15rem;
  }

  .clickable-prototype-section {
    height: 100%;
    max-width: none;
  }

  .clickable-prototype-wrapper {
    height: 100%;
  }

  .text-124 {
    text-align: center;
    align-self: center;
    line-height: 1.15em;
  }

  .prototype-container {
    height: 100%;
  }

  .prototype-container.rtk {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .click-around-the-website-below-2 {
    height: 1.15rem;
    line-height: 1.15rem;
  }

  .click-around-the-website-below-3 {
    line-height: 1.15rem;
  }

  .figma-prototype {
    height: 70vh;
  }

  .figma-prototype._2 {
    height: 40vh;
  }

  .text-126 {
    line-height: 1.15em;
  }

  .error-3373cf77-56f3-aa45-2636-3366b3559755 {
    width: 100%;
    max-width: none;
  }

  .styleguide-pic {
    border-radius: 16px;
  }

  .paragraph {
    width: 100%;
    line-height: 1.5em;
  }

  .homepagereadingtokidspic, .image-3 {
    width: 100%;
    height: 100%;
  }

  .slide3 {
    z-index: 10;
    width: 100%;
    height: 100%;
    position: static;
  }

  .slide4 {
    width: 100%;
    height: 100%;
    position: static;
  }

  .mask {
    width: 100%;
    height: 100%;
  }

  .slide2 {
    width: 100%;
    height: 100%;
    position: static;
  }

  .image-4 {
    width: 100%;
    height: 100%;
  }

  .text-134 {
    line-height: 1.15em;
  }

  .text-135 {
    width: 100%;
    line-height: 1.5em;
  }

  .rtk-homepagepicwrapper {
    width: 110px;
    height: 400px;
    position: -webkit-sticky;
    position: sticky;
    top: 32px;
  }

  .mobileprototype-container {
    height: 70vh;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .desktopprototypecontainer {
    height: 40vh;
  }

  .light-pink-blur {
    width: 25vw;
    height: 25vw;
    top: 16%;
    left: -2%;
  }

  .dark-purple-blur {
    width: 30vw;
    height: 30vw;
    top: -6%;
    left: 50%;
  }

  .purple-blur {
    width: 25vw;
    height: 25vw;
    top: 11%;
    left: 5%;
  }

  .orange-blur {
    width: 30vw;
    height: 30vw;
    top: 21%;
    left: 27%;
  }

  .bright-pink-blur {
    width: 30vw;
    height: 30vw;
    top: 10%;
    left: 67%;
  }

  .herosectionhomepage {
    height: 50vh;
    justify-content: center;
    padding-top: 0;
    overflow: visible;
  }

  .herosectionwrapper {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    margin-top: 4vh;
    overflow: hidden;
  }

  .h1-kathrina {
    font-size: 12vw;
    overflow: visible;
  }

  .h2-uxui {
    font-size: 10vw;
  }

  .aboutmesection {
    overflow: visible;
  }

  .aboutmewrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .aboutmeleftsectionwrapper {
    align-items: center;
  }

  .aboutmeleftsectiontop {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .helloimkathrina {
    text-align: center;
    line-height: 1.15em;
  }

  .figmaqueentext {
    text-align: center;
  }

  .aboutmerightsection {
    align-items: center;
    margin-left: -16px;
    top: 6px;
    left: 0;
  }

  .figmaqueenneonlight {
    width: 150%;
    margin-left: 0;
  }

  .figmaqueenmypic {
    width: 60%;
    height: 60%;
    top: 39%;
    left: 20%;
  }

  .dubbed-as-the-figma-queen-of-design-teams-1 {
    text-align: center;
    font-size: 16px;
  }

  .h2-movingtext {
    margin-top: 0;
    font-size: 10vw;
  }

  .html-embed-2 {
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 0;
  }

  .text-255 {
    font-size: 24px;
    line-height: 1.15em;
  }

  .whativelearnedsection {
    align-items: center;
    padding: 32px 16px;
  }

  .whativelearnedcontentcontainer {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .text-262 {
    padding-left: 0;
    padding-right: 0;
    font-size: 16px;
  }

  .rightarrowicon {
    width: auto;
    height: 40%;
    position: static;
  }

  .leftarrowicon {
    width: auto;
    height: 40%;
    align-self: center;
  }

  .whativelearnedcardscontainer {
    flex-direction: column;
    align-items: center;
  }

  .whativelearnedcards {
    grid-column-gap: 1.5em;
    grid-row-gap: 1.5em;
  }

  .learning1card {
    max-width: 300px;
    min-height: 0;
    min-width: 0;
    padding: 16px;
  }

  .text-269 {
    font-size: 16px;
  }

  .text-270 {
    font-size: 14px;
  }

  .learning2card {
    max-width: 300px;
    min-height: 0;
    padding: 16px;
  }

  .learning3card {
    max-width: 300px;
    min-height: 0;
    min-width: 0;
    padding: 16px;
  }

  .aboutmelinkwrapper {
    width: 100%;
    grid-column-gap: .4rem;
    grid-row-gap: 0rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .text-271 {
    text-align: center;
  }

  .text-274 {
    line-height: 1.5em;
  }

  .designprcoesscardtextwrapper {
    width: 90%;
    min-width: 0%;
  }

  .designprocessbackgroundimage {
    width: 100%;
  }

  .testimonialtitlecontainersection {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .projectcardcontainer {
    border-radius: 8px;
    padding: 16px;
  }

  .tagscard {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
  }

  .tagcontainer {
    grid-column-gap: .2rem;
    grid-row-gap: .2rem;
    padding: .2rem .4rem .3rem;
  }

  .projecttitle {
    flex-wrap: wrap;
  }

  .withyouprojectpreviewpic {
    border-radius: 2px;
  }

  .projecttags {
    flex-wrap: wrap;
  }

  .footer {
    height: 100%;
    padding-left: 6vw;
    padding-right: 6vw;
  }

  .footericonwrapper {
    width: 20vw;
    height: 12vh;
  }

  .logoiconpic {
    height: 12vh;
  }

  .footerlinkswrapper {
    width: 100%;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-flow: wrap;
    justify-content: space-between;
  }

  .text-311 {
    width: auto;
    letter-spacing: .05em;
    font-size: 14px;
    line-height: 1.25em;
  }

  .frame-481725, .text-312 {
    font-size: 16px;
  }

  .footerbottomcontentwrapper {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .copyrightcontainer {
    width: 100%;
    justify-content: flex-start;
  }

  .movingtextwrapper {
    width: 100%;
    height: 2.5rem;
  }

  .menu-outer-wrapper {
    display: none;
  }

  .menu-inner-wrapper {
    display: flex;
  }

  .lottiescrollwrapper {
    transform: scale(.8);
  }

  .aboutmetext {
    text-align: center;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 6vh;
  }

  .aboutmecontentcontainer {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .aboutmetextwrapper {
    text-align: center;
    align-items: center;
    padding-left: 6vw;
    padding-right: 6vw;
  }

  .aboutmetitle, .aboutmesubtitle {
    text-align: center;
  }

  .timelineitem {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .timelinecenter {
    margin-left: 8px;
  }

  .circle {
    width: 1rem;
    height: 1rem;
  }

  .text-316 {
    font-size: 16px;
  }

  .aboutmestorycontentcontainer {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .aboutmeprojectpreviewpic {
    border-radius: 4px;
  }

  .extracurricularsection {
    padding: 6vw;
  }

  .whatilovecollagepic {
    border-radius: 8px;
  }

  .thanksforstoppingsection {
    padding: 6vw;
  }

  .thankyoumessagecontainer, .thanks-for-stopping-by {
    text-align: center;
  }

  .sketchingvideo {
    height: 100%;
    object-fit: fill;
    position: relative;
  }

  .problemstatscontainer {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    flex-wrap: wrap;
  }

  .iterationsection {
    padding: 32px 16px;
  }

  .iterationcontentcontainer {
    grid-column-gap: 2em;
    grid-row-gap: 2em;
  }

  .text-334 {
    font-size: 24px;
    line-height: 1.15em;
  }

  .text-335 {
    font-size: 16px;
    line-height: 1.5em;
  }

  .learningsection {
    align-items: center;
    padding: 32px 16px;
  }

  ._2-4iconimage, ._3-4iconimage, ._4-4iconimage {
    width: 100%;
    height: 100%;
    max-width: none;
  }

  .withyou-video-wrapper {
    width: 100%;
    min-width: 9rem;
    justify-content: center;
    align-self: center;
    padding-left: 0;
    padding-right: 0;
    display: flex;
  }

  .design-challenge-section-withyou, .competitoranalysisstatementsection {
    padding-left: 3vw;
    padding-right: 3vw;
  }

  .finalprototypevideo-copy {
    height: 100%;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 0;
  }

  .readingtokidspreviewpic, .sanbedauniversityprojectpreviewpic, .nationalparkserviceprojectpreviewpic {
    border-radius: 4px;
  }

  .designprocesscards2, .designprocesscards3, .designprocesscards4, .designprocesscards-copy {
    min-width: 0;
  }

  .testimonialsection {
    padding: 6vw;
  }

  .testimonialcard2 {
    padding: 1rem;
  }

  .nametitlecontainer {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
  }

  .text-350 {
    font-size: 20px;
    line-height: 1.15em;
  }

  .testimonialcard3, .testimonialcard {
    padding: 1rem;
  }

  .click-around-the-website-below-copy {
    text-align: center;
    line-height: 1.15rem;
  }

  .click-around-the-website-below-2-copy {
    height: 1.15rem;
    line-height: 1.15rem;
  }

  .click-around-the-website-below-3-copy {
    line-height: 1.15rem;
  }

  .footerlinktext {
    font-size: 16px;
  }

  .text-311-copy {
    width: 30%;
    letter-spacing: .05em;
    font-size: 14px;
    line-height: 1.25em;
  }

  .footerlinkexternalwrapper-copy {
    width: 30%;
  }

  .contacts-container {
    grid-column-gap: 3vw;
    grid-row-gap: 3vw;
  }

  .lottie-animation-2 {
    height: 110px;
  }
}

#w-node-_034de0f6-85d0-7f8d-7a3b-6a3d0cbcae72-f877a960 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: auto;
}

#w-node-_034de0f6-85d0-7f8d-7a3b-6a3d0cbcae75-f877a960 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: auto;
  justify-self: auto;
}

#w-node-_034de0f6-85d0-7f8d-7a3b-6a3d0cbcae77-f877a960 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_21372693-6eb7-4382-15e8-ca34221c1464-f877a960 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: auto;
}

#w-node-_21372693-6eb7-4382-15e8-ca34221c1467-f877a960 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: auto;
  justify-self: auto;
}

#w-node-_21372693-6eb7-4382-15e8-ca34221c1469-f877a960 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: center;
  justify-self: center;
}

#w-node-_4fc660af-1337-a8af-bad7-af3d331eb00a-f877a960 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: auto;
}

#w-node-_4fc660af-1337-a8af-bad7-af3d331eb00d-f877a960 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: auto;
  justify-self: auto;
}

#w-node-_4fc660af-1337-a8af-bad7-af3d331eb00f-f877a960 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: center;
  justify-self: center;
}

#w-node-_9f3e4be8-a344-2a9f-7904-5fb11f3f9565-f877a960 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: auto;
}

#w-node-_9f3e4be8-a344-2a9f-7904-5fb11f3f9568-f877a960 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: auto;
  justify-self: auto;
}

#w-node-_9f3e4be8-a344-2a9f-7904-5fb11f3f956a-f877a960 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: center;
  justify-self: center;
}

@media screen and (min-width: 1440px) {
  #w-node-_034de0f6-85d0-7f8d-7a3b-6a3d0cbcae77-f877a960 {
    align-self: center;
    justify-self: center;
  }

  #w-node-_4fc660af-1337-a8af-bad7-af3d331eb00f-f877a960 {
    grid-area: span 1 / span 1 / span 1 / span 1;
    align-self: center;
    justify-self: center;
  }

  #w-node-_9f3e4be8-a344-2a9f-7904-5fb11f3f956a-f877a960 {
    justify-self: start;
  }
}

@media screen and (max-width: 991px) {
  #w-node-_034de0f6-85d0-7f8d-7a3b-6a3d0cbcae75-f877a960 {
    grid-area: span 1 / span 1 / span 1 / span 1;
    align-self: auto;
    justify-self: center;
  }

  #w-node-_21372693-6eb7-4382-15e8-ca34221c1464-f877a960 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_21372693-6eb7-4382-15e8-ca34221c1467-f877a960 {
    grid-area: span 1 / span 1 / span 1 / span 1;
    justify-self: center;
  }

  #w-node-_4fc660af-1337-a8af-bad7-af3d331eb00a-f877a960 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_4fc660af-1337-a8af-bad7-af3d331eb00d-f877a960 {
    grid-area: span 1 / span 1 / span 1 / span 1;
    justify-self: center;
  }

  #w-node-_9f3e4be8-a344-2a9f-7904-5fb11f3f9565-f877a960 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_9f3e4be8-a344-2a9f-7904-5fb11f3f9568-f877a960 {
    grid-area: span 1 / span 1 / span 1 / span 1;
    justify-self: center;
  }
}

@media screen and (max-width: 767px) {
  #w-node-_034de0f6-85d0-7f8d-7a3b-6a3d0cbcae72-f877a960 {
    grid-area: 1 / 2 / 2 / 3;
  }

  #w-node-_034de0f6-85d0-7f8d-7a3b-6a3d0cbcae75-f877a960 {
    grid-area: 1 / 1 / 3 / 2;
    justify-self: auto;
  }

  #w-node-_21372693-6eb7-4382-15e8-ca34221c1464-f877a960 {
    grid-area: 1 / 2 / 2 / 3;
  }

  #w-node-_21372693-6eb7-4382-15e8-ca34221c1467-f877a960 {
    grid-area: 1 / 1 / 3 / 2;
    justify-self: start;
  }

  #w-node-_4fc660af-1337-a8af-bad7-af3d331eb00a-f877a960 {
    grid-area: 1 / 2 / 2 / 2;
  }

  #w-node-_4fc660af-1337-a8af-bad7-af3d331eb00d-f877a960 {
    grid-area: 1 / 1 / 3 / 2;
    justify-self: start;
  }

  #w-node-_9f3e4be8-a344-2a9f-7904-5fb11f3f9565-f877a960 {
    grid-area: 1 / 2 / 2 / 3;
  }

  #w-node-_9f3e4be8-a344-2a9f-7904-5fb11f3f9568-f877a960 {
    grid-area: 1 / 1 / 3 / 2;
    justify-self: start;
  }
}

@media screen and (max-width: 479px) {
  #w-node-_034de0f6-85d0-7f8d-7a3b-6a3d0cbcae75-f877a960 {
    justify-self: start;
  }
}