:root {
  --text--primary: "Plus Jakarta Sans", sans-serif;
  --color--text--heading: #e5e7eb;
  --color--border--container: #1f2937;
  --color--bg--surface-primary: #0a0a0a;
  --color--interactive--default: #d1d5db;
  --color--interactive--active: #e5e7eb;
  --color--bg--surface-secondary: #161616;
  --color--text--body: #9ca3af;
  --color--text--caption: #9ca3af;
  --corner-radius--16: 16px;
  --color--brand--primary: #0c65f6;
  --color--text--on-brand: white;
  --color--bg--surface-tertiary: #1f2937;
  --corner-radius--24: 24px;
  --color--brand--logo: #e5e7eb;
  --text--slash: Prompt, sans-serif;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-form-formradioinput--inputType-custom {
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 12px;
  height: 12px;
}

.w-form-formradioinput--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-form-formradioinput--inputType-custom.w--redirected-checked {
  border-width: 4px;
  border-color: #3898ec;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

h1 {
  font-family: var(--text--primary);
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 38px;
  font-weight: 700;
  line-height: 44px;
}

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 48px;
  font-weight: 700;
  line-height: 60px;
}

h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 38px;
}

h5 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
}

h6 {
  color: var(--color--text--heading);
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.page-wrapper {
  position: relative;
  overflow: hidden;
}

.page-main {
  min-width: 480px;
  margin-left: 64px;
  margin-right: 64px;
}

.footer-nav {
  border-top: 1px solid var(--color--border--container);
  margin-top: 176px;
  margin-left: 0;
  margin-right: 0;
  padding-left: 64px;
  padding-right: 64px;
}

.container {
  flex-flow: row;
  align-items: flex-start;
  max-width: 1216px;
  display: flex;
}

.container.hero {
  justify-content: center;
  align-items: center;
}

.container.footer {
  padding-top: 63px;
  padding-bottom: 63px;
}

.container.experience, .container.process, .container.contact-hero {
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.container.form {
  justify-content: flex-start;
  align-items: center;
  max-width: 1024px;
  display: block;
}

.container.work-with {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 1024px;
}

.container.faq {
  border-top: 1px solid var(--color--border--container);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 96px;
  padding-bottom: 0;
}

.container.portfolio-hero {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
}

.container.client-projects {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.container.case-study-hero {
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}

.body {
  background-color: var(--color--bg--surface-primary);
  font-family: var(--text--primary);
}

.navbar {
  border-bottom: 1px solid var(--color--border--container);
  background-color: #0a0a0a;
  height: 66px;
  padding-left: 64px;
  padding-right: 44px;
  display: flex;
  position: sticky;
  top: 0;
}

.navbar.mobile {
  display: none;
}

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

.brand {
  flex: 0 auto;
  margin-right: auto;
}

.nav-link {
  font-family: var(--text--primary);
  color: var(--color--interactive--default);
  font-weight: 500;
}

.nav-link:hover {
  color: var(--color--interactive--active);
  text-underline-offset: 40%;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.nav-link.active {
  color: var(--color--interactive--active);
  text-underline-offset: 40%;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.nav-menu {
  flex: 0 auto;
}

.heading-1 {
  color: var(--color--text--heading);
  -webkit-text-fill-color: inherit;
  background-clip: content-box;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 72px;
  line-height: 90px;
}

.heading-1.blue {
  color: #e5e7eb;
  text-align: center;
}

.heading-1.google-case-study {
  font-size: 58px;
  font-weight: 800;
  line-height: 75px;
}

.heading-1.clinet-project {
  font-size: 58px;
  line-height: 75px;
}

.gradient-name {
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #3b82f6, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
}

.paragraph {
  color: var(--color--text--body);
  margin-top: 20px;
  margin-bottom: 32px;
  font-size: 20px;
  line-height: 28px;
}

.paragraph.small {
  max-width: 317px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 150%;
}

.paragraph.small.experience {
  max-width: 100%;
}

.paragraph.small.process {
  height: 100%;
}

.paragraph.small.process.mobile {
  display: none;
}

.paragraph.small.work-with {
  max-width: 260px;
}

.paragraph.small.faq-answer {
  max-width: 512px;
  font-size: 16px;
}

.paragraph.small.form {
  text-align: center;
  max-width: none;
  margin-top: 16px;
  margin-bottom: 48px;
}

.paragraph.contact-hero {
  text-align: center;
  max-width: 602px;
  margin-top: 24px;
  margin-bottom: 0;
}

.paragraph.medium {
  color: var(--color--text--heading);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.paragraph.portfolio-hero {
  text-align: center;
  max-width: 674px;
  margin-top: 24px;
  margin-bottom: 0;
}

.alert {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  vertical-align: sub;
  background-color: #3b82f64d;
  border-radius: 999px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 6px;
  padding: 4px 12px;
  display: flex;
}

.circle {
  background-color: #3b82f6;
  border-radius: 999px;
  width: 8px;
  height: 8px;
}

.text--label {
  color: var(--color--text--caption);
  text-transform: capitalize;
  flex: 0 auto;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.text--label.chips {
  color: var(--color--text--caption);
  padding: 0;
}

.text--label.chips.big {
  white-space: nowrap;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 14px;
  line-height: 20px;
}

.text--label.links {
  color: var(--color--text--body);
  text-transform: none;
  align-self: center;
  font-size: 14px;
  line-height: 20px;
}

.text--label.links._2 {
  text-transform: none;
  align-self: flex-end;
}

.text--label.copyright {
  border-top: 1px none var(--color--border--container);
  max-width: 1216px;
  color: var(--color--text--caption);
  text-transform: none;
  flex: 1;
  margin-left: auto;
  margin-right: auto;
  padding-top: 32px;
  padding-bottom: 32px;
}

.text--label.big {
  color: var(--color--text--caption);
  text-transform: none;
  font-size: 24px;
  line-height: 30px;
}

.text--label.certificate {
  color: var(--color--text--heading);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
}

.text--label.association {
  margin-top: 2px;
}

.text--label.status {
  color: #60a5fa;
  text-transform: none;
}

.text--label.info {
  color: #64748b;
  text-align: center;
  text-transform: none;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.text--label.case-study-card-details {
  color: var(--color--text--heading);
  text-transform: none;
  padding-left: 0;
  font-size: 14px;
  font-weight: 600;
}

.text--label.case-study-brief {
  color: var(--color--text--body);
  text-transform: none;
}

.text--label.case-study-info-title {
  text-transform: uppercase;
}

.text--label.case-study-category {
  z-index: 1;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: #3b82f6;
  text-transform: uppercase;
  background-color: #3b82f633;
  border: 1px solid #3b82f6b3;
  border-radius: 6px;
  padding: 1px 8px;
  font-weight: 700;
  position: absolute;
  inset: 20px 20px auto auto;
}

.text--label.google-case-study {
  color: #3b82f6;
  text-transform: uppercase;
  font-size: 14px;
}

.text--label.caae-study-info {
  color: var(--color--text--heading);
  font-size: 18px;
  line-height: 28px;
}

.text--label.caae-study-info.clinet-pr-2 {
  text-transform: none;
}

.button {
  border-radius: var(--corner-radius--16);
  background-color: var(--color--brand--primary);
  color: var(--color--text--on-brand);
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.button:hover {
  background-color: #0950c2;
}

.button:active {
  background-color: #062f73;
}

.button.secondary {
  background-color: var(--color--bg--surface-primary);
  padding-top: 15px;
  padding-bottom: 15px;
}

.button.secondary:hover {
  background-image: linear-gradient(#08224c4d, #08224c4d);
}

.button.secondary:active {
  background-color: #08224c;
}

.button.form {
  min-width: 100%;
}

.button.case-card {
  justify-content: center;
  align-items: center;
  min-width: 100%;
  display: flex;
}

.cta-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  align-items: center;
  margin-bottom: 32px;
  display: flex;
}

.button-gradient-border {
  border-radius: 16px;
  padding: 1px;
}

.hero-wrapper {
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.overlay-blur {
  z-index: -1;
  position: absolute;
  inset: -10% auto auto 50%;
  transform: translate(-50%, -10%);
}

.overlay-blur.about-me {
  inset: -1% auto 0% 50%;
  transform: none;
}

.overlay-blur.case-study {
  top: -104px;
  left: -515px;
  transform: translate(0, 10px);
}

.section {
  margin-top: 54px;
}

.section.experience {
  margin-top: 128px;
  margin-bottom: 128px;
}

.section.certificates {
  margin-top: 128px;
}

.section.form {
  margin-top: 0;
}

.section.work-with {
  margin-top: 128px;
  margin-bottom: 128px;
}

.section.faq {
  margin-top: 128px;
  margin-bottom: 176px;
}

.section.client-projects, .section.google-case-studies {
  margin-top: 128px;
}

.section.case-study-hero {
  margin-bottom: 108px;
}

.section.google-case-study-info-wrapper {
  margin-top: 0;
  margin-bottom: 0;
}

.section.problem-solution, .section.product-experience, .section.research-insights, .section.competitor-analysis, .section.user-persona {
  margin-top: 108px;
}

.section.journey-map {
  width: auto;
  margin-top: 108px;
  overflow: visible;
}

.section.user-flow {
  margin-top: 92px;
}

.section.high-fidelity-prototype, .section.low-fidelity-prototype {
  margin-top: 108px;
}

.section.sticker-sheet {
  margin-top: 128px;
}

.section.reflection, .section.more-projects {
  margin-top: 108px;
}

.section.competitor-analysis-mobile {
  margin-top: 108px;
  display: none;
}

.section.project-overview, .section.business-challenge {
  margin-top: 108px;
}

.section.my-process {
  width: auto;
  margin-top: 108px;
  overflow: visible;
}

.section.ux-improvements, .section.responsive-ui {
  margin-top: 108px;
}

.section.tamkeen-sticker-sheet {
  margin-top: 128px;
}

.section.business-impact {
  margin-top: 108px;
}

.section.crazy-8 {
  margin-top: 128px;
}

.section.project-vision, .section.target-users, .section.product-experience, .section.product-strategy {
  margin-top: 108px;
}

.chips {
  background-color: var(--color--bg--surface-tertiary);
  border-radius: 999px;
  padding: 6px 16px;
}

.chips.big {
  height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
}

.chips.big.tools {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.chips-wrapper {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: wrap;
  align-items: center;
  display: flex;
}

.chips-wrapper.freelance-projects {
  margin-bottom: auto;
}

.heading-4 {
  color: var(--color--text--heading);
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 24px;
  line-height: 32px;
}

.heading-4.case-study-card-title {
  padding-left: 0;
}

.heading-4.success-message-title {
  margin-top: 12px;
  margin-bottom: 12px;
  font-weight: 600;
}

.heading-4.error-message-title {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
  font-weight: 600;
}

.quick-links-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  flex: 1;
  align-self: auto;
  align-items: flex-start;
  display: flex;
}

.link {
  color: var(--color--interactive--default);
  padding: 2px 8px;
  font-weight: 500;
  text-decoration: none;
}

.links-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  align-self: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.links-wrapper.social {
  flex-flow: row;
}

.footer-message {
  flex: 1;
}

.social-links-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  justify-content: center;
  align-self: flex-end;
  align-items: flex-start;
  display: flex;
}

.connect-wrapper {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.social-media-icons {
  width: 40px;
  height: 40px;
}

.copyright-wrapper {
  border-top: 1px solid var(--color--border--container);
  justify-content: flex-start;
  align-items: center;
  max-width: 1216px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.text-icon-wrapper {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.big-heading {
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(0deg, #1f2937, #fff);
  -webkit-background-clip: text;
  background-clip: text;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 128px;
  font-weight: 800;
  line-height: 128px;
  display: flex;
}

.experience-wrapper {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.card {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border: 1px solid var(--color--border--container);
  border-radius: var(--corner-radius--24);
  background-color: var(--color--bg--surface-secondary);
  flex-flow: column;
  flex: 0 auto;
  justify-content: center;
  align-items: flex-start;
  padding: 32px;
  display: flex;
}

.card.small {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex: 1;
  min-width: 25%;
  max-width: 31%;
  padding: 24px;
}

.card.small.portfoi {
  max-width: 31%;
  min-height: 214px;
}

.card.small.contact {
  max-width: 32%;
}

.card.certificate {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: flex-start;
  align-items: flex-start;
  min-width: 384px;
}

.card.skills {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
}

.card.info {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex: 1;
  justify-content: center;
  align-items: center;
}

.section-title {
  min-width: 100%;
  color: var(--color--text--heading);
  margin: 0 auto;
  font-size: 32px;
  line-height: 38px;
}

.section-title.client-projects {
  text-align: left;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  min-width: 230px;
  margin-right: 16px;
}

.section-title.google {
  text-align: left;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  min-width: 296px;
  margin-right: 16px;
}

.section-title.faq {
  justify-content: center;
  align-items: center;
  display: flex;
}

.section-title.faq.mobile {
  display: none;
}

.section-title.conversation, .section-title.work-with {
  text-align: center;
}

.cards-experience-wrapper {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  justify-content: flex-start;
  align-items: stretch;
  margin-top: 64px;
  display: flex;
}

.cards-process-wrapper {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: wrap;
  margin-top: 64px;
  display: flex;
}

.heading-2 {
  color: #6b7280;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 48px;
  line-height: 60px;
}

.heading-2.google-case-study {
  color: #3b82f6;
  font-size: 46px;
  font-weight: 800;
}

.heading-2.client--project {
  color: #3b82f6;
  text-align: left;
  font-size: 46px;
  font-weight: 700;
}

.text-span {
  color: var(--color--text--heading);
}

.heading-5 {
  color: var(--color--text--heading);
  margin-top: 16px;
  margin-bottom: 12px;
  font-size: 20px;
  line-height: 26px;
}

.cards-skills-wrapper {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  display: flex;
}

.heading-6 {
  color: var(--color--text--heading);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 24px;
}

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

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

.certificate-info-wrapper {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.skill-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: auto;
  display: flex;
}

.skills-wrapper {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.cards-work-with-wrapper {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  min-width: 100%;
  margin-top: 48px;
  display: flex;
}

.form-block {
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 0;
  display: flex;
  position: relative;
}

.name-form-wrapper, .email-form-wrapper {
  flex: 1;
}

.form--contact-wrapper {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  min-width: 100%;
  display: flex;
}

.text-field {
  color: #fff;
  background-color: #1f2229;
  border: 1px solid #fff0;
  border-radius: 16px;
  height: 58px;
  margin-bottom: 0;
  padding-left: 16px;
  padding-right: 16px;
}

.text-field::placeholder {
  color: #6f747c;
}

.field-label {
  color: #64748b;
  margin-bottom: 8px;
}

.name-mail-form-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  min-width: 100%;
  display: flex;
}

.text-field-form-wrapper {
  flex: 1;
  min-width: 100%;
}

.textarea {
  color: #fff;
  background-color: #1f2229;
  border: 1px solid #fff0;
  border-radius: 16px;
  min-height: 154px;
  margin-bottom: 0;
}

.textarea::placeholder {
  color: #6f747c;
}

.project-type-form-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  min-width: 100%;
  display: flex;
}

.projects-type-radio-button-wrapper {
  flex: 1;
}

.radio-button {
  z-index: -1;
  background-color: var(--color--bg--surface-primary);
  border: 1px #fff0;
  border-radius: 16px;
  min-width: 100%;
  min-height: 100%;
  margin-top: 0;
  margin-left: 0;
  display: block;
  position: absolute;
  inset: auto 0% 0%;
}

.radio-button:hover {
  background-color: #08224c4d;
  border-style: none;
  border-radius: 16px;
}

.radio-button.w--redirected-checked {
  background-color: #08224c;
  border-style: none;
  border-color: #0c65f6;
  border-radius: 16px;
  overflow: hidden;
}

.radio-button-label {
  font-family: var(--text--primary);
  color: var(--color--text--on-brand);
  text-align: center;
  font-weight: 700;
  display: block;
}

.radio-button-field {
  border-radius: 16px;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 56px;
  margin-bottom: 0;
  padding: 0;
  display: flex;
  position: relative;
}

.radio-button-field:hover {
  background-color: #08224c4d;
}

.radio-buttons-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.projects-type-radio-button-field {
  border-radius: 16px;
  flex: 1;
  padding: 1px;
}

.budget-form-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  min-width: 100%;
  display: flex;
}

.budget-radio-button-wrapper {
  flex: 1;
}

.budget-radio-button-field {
  border-radius: 16px;
  flex: 1;
  padding: 1px;
}

.cards-info {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 80px;
  display: flex;
}

.faq-wrapper {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  min-width: 100%;
  margin-top: 48px;
  margin-bottom: 0;
  display: grid;
}

.questions-wrapper {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  border: 1px solid var(--color--border--container);
  background-color: var(--color--bg--surface-secondary);
  border-radius: 24px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 24px 32px;
  display: flex;
}

.bold-text-4 {
  color: #3b82f6;
}

.line {
  border-style: solid none none;
  border-width: 1px;
  border-color: var(--color--border--container);
  width: 100%;
  margin-top: 10px;
}

.title-portfolio-wrapper {
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 48px;
  display: flex;
}

.case-study-cards-wrapper {
  grid-column-gap: 2.4vw;
  grid-row-gap: 2.4vw;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
}

.case-study-card {
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  width: auto;
  min-width: 48.6%;
  max-width: 48.6%;
  display: flex;
  position: relative;
  overflow: visible;
}

.case-study-info-label-wrapper {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 0;
  margin-bottom: 12px;
  display: flex;
}

.info-label-wrapper {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  border-bottom: 1px solid var(--color--border--container);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.info-label-vertical-wrapper {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.list {
  padding-left: 0;
}

.list.case-study-card-brief {
  margin-top: 19px;
  margin-bottom: 24px;
  padding-left: 18px;
}

.list-item {
  color: #3b82f6;
  list-style-type: disc;
}

.list-item.plot-blue {
  margin-bottom: 8px;
}

.case-study-image {
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  min-width: 100%;
  max-width: none;
  position: static;
}

.info-case-study-wrapper {
  background-color: var(--color--bg--surface-secondary);
  border-bottom-right-radius: 24px;
  border-bottom-left-radius: 24px;
  min-width: 100%;
  padding: 20px;
}

.success-message {
  z-index: 2;
  border: 1px solid var(--color--border--container);
  background-color: #3b8bff08;
  border-radius: 24px;
  flex: 1;
  min-width: 100%;
  margin-top: -48px;
  padding: 24px;
}

.text-block-success-message {
  color: var(--color--text--body);
}

.error-message {
  z-index: 2;
  border: 1px solid var(--color--border--container);
  text-align: center;
  background-color: #f8717108;
  border-radius: 24px;
  flex: 1;
  min-width: 100%;
  margin-top: 32px;
  padding: 24px;
}

.text-block-error-message {
  color: var(--color--text--body);
  text-align: center;
}

.case-study-title-wrapper {
  position: absolute;
  inset: auto auto 32px 32px;
}

.container.problem-solution {
  flex-flow: column;
}

.container.journey-map {
  justify-content: center;
  align-items: center;
  width: auto;
  overflow: visible;
}

.container.case-study-2 {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
}

.container.my-process {
  justify-content: center;
  align-items: center;
  width: auto;
  overflow: visible;
}

.container.ux-improvements, .container.project-overview, .container.business-impact, .container.project-vision, .container.product-experience, .container.product-experience, .container.product-strategy, .container.product-strategy {
  flex-flow: column;
}

.info-wrapper {
  border-top: 1px solid var(--color--border--container);
  border-bottom: 1px solid var(--color--border--container);
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
  display: flex;
}

.info-case-study {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin-right: auto;
  display: flex;
}

.problem-solution-section {
  grid-row-gap: 0px;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.wrapper {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.problem-solution-cards-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 1216px;
  text-decoration: none;
  display: flex;
}

.card-1-the-challenge {
  grid-row-gap: 24px;
  border: 1px solid var(--color--border--container);
  background-color: var(--color--bg--surface-secondary);
  border-radius: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  margin-right: auto;
  padding: 32px;
  text-decoration: none;
  display: flex;
}

.challenge-title {
  grid-column-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.icon {
  object-fit: cover;
}

.text-card {
  color: var(--color--text--heading);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  text-decoration: none;
}

.text-card-pargraph {
  width: 100%;
  color: var(--color--text--body);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  text-decoration: none;
}

.problem-wrapper {
  grid-row-gap: 16px;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.problem-item-1 {
  background-color: #26262666;
  border: 0 solid #ff716c4d;
  border-left-width: 2px;
  border-radius: 24px;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 20px;
  text-decoration: none;
  display: flex;
}

.problem-item-wrapper {
  grid-row-gap: 4px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.text--title {
  width: 100%;
  color: var(--color--text--heading);
  text-transform: none;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: none;
}

.text-brief {
  width: 100%;
  color: var(--color--text--body);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  text-decoration: none;
}

.solution-item-1 {
  background-color: #26262666;
  border: 0 solid #3b82f64d;
  border-left-width: 2px;
  border-radius: 24px;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 20px;
  text-decoration: none;
  display: flex;
}

.card-2-the-solution {
  grid-row-gap: 24px;
  border: 1px solid var(--color--border--container);
  background-color: var(--color--bg--surface-secondary);
  border-radius: 24px;
  flex-direction: column;
  order: 9999;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  max-width: 592px;
  padding: 32px;
  text-decoration: none;
  display: flex;
}

.heading-3 {
  color: var(--color--text--heading);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 32px;
  line-height: 38px;
}

.heading-3.title {
  min-width: 100%;
  margin-bottom: 16px;
  font-weight: 700;
}

.challenge-title-wrapper {
  grid-column-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.paragraph-wrapper {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.solution-title {
  grid-column-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.solution-icon {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.solution-wrapper {
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.solution-item-wrapper {
  grid-row-gap: 4px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.product-experience-section {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.section-title-wrapper {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 1216px;
  margin-bottom: 48px;
  text-decoration: none;
  display: flex;
}

.screen-title {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.section-divider {
  object-fit: cover;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  height: 4px;
  text-decoration: none;
  display: flex;
}

.key-features-wrapper {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column wrap-reverse;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  padding: 0;
  text-decoration: none;
  display: flex;
  transform: translate(0);
}

.key-features-wrapper.case-3 {
  grid-column-gap: 96px;
  grid-row-gap: 96px;
  flex-flow: column;
}

.screen-wrapper {
  flex-direction: column;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  width: 41%;
  margin-right: auto;
  text-decoration: none;
  display: flex;
}

.screen-wrapper.case-3 {
  width: 100%;
  margin-right: 0;
}

.home-screen {
  object-fit: cover;
  width: 780%;
  margin-bottom: 40px;
}

.screen-content-wrapper {
  grid-row-gap: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  min-width: 374px;
  height: 108px;
  padding-left: 8px;
  padding-right: 8px;
  display: flex;
}

.screen-content-wrapper.case-3 {
  flex: 1;
  width: 100%;
  min-width: auto;
}

.text-3 {
  width: 100%;
  color: var(--color--text--heading);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 140%;
  text-decoration: none;
}

.text-3.case-3 {
  text-align: center;
}

.text-4 {
  width: 100%;
  color: var(--color--text--body);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  text-decoration: none;
}

.text-4.case-3 {
  text-align: center;
}

.screen-brief {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.screen-wrapper-2 {
  flex-direction: column;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  width: 41%;
  max-width: none;
  padding-top: 0;
  text-decoration: none;
  display: flex;
}

.screen-wrapper-2.case-3 {
  width: 100%;
}

.research-insights-section {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.section-title-2 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.result-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: wrap;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.partticipants-card {
  border: 1px solid var(--color--border--container);
  background-color: #161616;
  border-radius: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 270px;
  height: 216px;
  margin-right: 8px;
  padding: 32px;
  text-decoration: none;
  display: flex;
}

.card-number-wrapper {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-bottom: 8px;
  text-decoration: none;
  display: flex;
}

.card-number {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.text-6 {
  color: #e5e7eb;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 48px;
  text-decoration: none;
}

.participants-label {
  opacity: .8;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.text-7 {
  color: #e5e7eb;
  text-align: center;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.participants-describtion-wrapper {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 16px;
  text-decoration: none;
  display: flex;
}

.participants-describtion {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 206px;
  padding-left: 0;
  padding-right: 0;
  text-decoration: none;
  display: flex;
}

.deep-dive-moderated-interviews-and-usability-testing-sessions {
  color: #9ca3af;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  text-decoration: none;
}

.insight-card {
  border: 1px solid #1f2937;
  border-left-width: 0;
  border-radius: 24px;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  min-width: 25%;
  max-width: 288px;
  margin-right: 0;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.card-content {
  grid-row-gap: 8px;
  background-color: #161616;
  border: 0 solid #3b82f6;
  border-left-width: 4px;
  border-radius: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: auto;
  height: 216px;
  padding: 24px;
  display: flex;
}

.text-8 {
  color: #e5e7eb;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
}

.text-9 {
  color: #9ca3af;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  text-decoration: none;
}

.competitor-analysis-section {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.comparison-table-wrapper {
  border: 1px solid var(--color--border--container);
  background-color: #161616;
  border-radius: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 48px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.table-header-row {
  background-color: #26262666;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.table-cell {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 24px;
  text-decoration: none;
  display: flex;
}

.text-10 {
  color: #e5e7eb;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 140%;
  text-decoration: none;
}

.table-cell-2 {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 74px;
  padding: 24px;
  text-decoration: none;
  display: flex;
}

.source-beauty-logo {
  object-fit: cover;
  height: 20px;
  overflow: hidden;
}

.jumia-logo {
  object-fit: cover;
}

.table-cell-3 {
  background-image: linear-gradient(117.71deg, #3b82f61a 0%, #3b82f600 100%);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 74px;
  padding: 24px;
  text-decoration: none;
  display: flex;
}

.text-11 {
  color: #e5e7eb;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 100%;
  text-decoration: none;
}

.comparison-row {
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.comparison-cell {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 74px;
  padding: 24px;
  text-decoration: none;
  display: flex;
}

.comparison-cell-2 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 74px;
  padding: 24px;
  text-decoration: none;
  display: flex;
}

.comparison-cell-3 {
  background-image: linear-gradient(117.71deg, #3b82f61a 0%, #3b82f600 100%);
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 74px;
  padding: 24px;
  text-decoration: none;
  display: flex;
}

.comparison-row-2 {
  border: 0 solid #1f2937;
  border-top-width: 1px;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.key-insight-card {
  grid-row-gap: 24px;
  border: 1px solid var(--color--border--container);
  background-color: #161616;
  border-radius: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 24px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.key-insight-header {
  grid-column-gap: 10px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.key-insight-icon {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.key-insight-title {
  grid-column-gap: 10px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.text-12 {
  color: #e5e7eb;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 100%;
  text-decoration: none;
}

.text-13 {
  color: #9ca3af;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  text-decoration: none;
}

.insight-label, .insight-describtion, .table-body {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.key-insight-content {
  grid-row-gap: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.key-insight-description {
  grid-column-gap: 10px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.nefertari-logo {
  object-fit: cover;
  width: 70px;
}

.status-icon-success, .status-icon-unavailable {
  object-fit: cover;
  overflow: hidden;
}

.user-persona-section {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.persona-card {
  border: 1px solid var(--color--border--container);
  background-color: #161616;
  border-radius: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 32px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.persona-content-wrapper {
  grid-column-gap: 40px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.persona-profile {
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.profile-image-wrapper {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
  position: relative;
}

.profile-content {
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.profile-details {
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 256px;
  text-decoration: none;
  display: flex;
}

.profile-details.case-3 {
  max-width: 350px;
}

.persona-identity {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.persona-name {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 192px;
  text-decoration: none;
  display: flex;
}

.persona-name.case-3 {
  width: auto;
}

.text-15 {
  color: #e5e7eb;
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  text-decoration: none;
}

.text-15.case-3 {
  white-space: nowrap;
}

.text-16 {
  color: #9ca3af;
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
}

.text-17 {
  color: #9ca3af;
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  text-decoration: none;
}

.persona-goals {
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.goals-header {
  grid-column-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.icon-2 {
  object-fit: cover;
}

.text-18 {
  color: #e5e7eb;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  text-decoration: none;
}

.goal-item {
  background-color: #3b82f60d;
  border: 0 solid #3b82f64d;
  border-left-width: 2px;
  border-radius: 8px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 16px;
  text-decoration: none;
  display: flex;
}

.text-19 {
  color: #9ca3af;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
}

.frustrations-item {
  background-color: #9f05190d;
  border: 0 solid #ff716c4d;
  border-left-width: 2px;
  border-radius: 8px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 16px;
  text-decoration: none;
  display: flex;
}

.journey-map-section {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  min-width: 100%;
  text-decoration: none;
  display: flex;
}

.section-title-4 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.journey-map {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: wrap;
  place-content: stretch flex-start;
  align-items: stretch;
  width: 100%;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.journey-step {
  grid-row-gap: 8px;
  border: 1px solid var(--color--border--container);
  background-color: #161616;
  border-radius: 24px;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  min-width: 252px;
  max-width: 252px;
  height: auto;
  min-height: 236px;
  margin-bottom: 16px;
  margin-right: 0;
  padding: 24px;
  text-decoration: none;
  display: flex;
}

.text-21 {
  color: #3b82f6;
  text-transform: uppercase;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  text-decoration: none;
}

.text-21.product-strategy {
  margin-bottom: 8px;
}

.step-content {
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

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

.text-22 {
  color: #e5e7eb;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
}

.step-description {
  grid-column-gap: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.text-23 {
  color: #9ca3af;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  text-decoration: none;
}

.text-24 {
  color: #ff716c99;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.journey-connector {
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  min-width: 24px;
  max-width: 24px;
  height: 100%;
  min-height: 236px;
  margin: 0;
  text-decoration: none;
  display: flex;
}

.journey-connector._2 {
  display: none;
}

.svg {
  object-fit: cover;
  overflow: hidden;
}

.text-25 {
  color: #3b82f6cc;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.connector-icon {
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-width: 24px;
  max-width: 24px;
  height: 100%;
  text-decoration: none;
  display: flex;
}

.user-flow-section, .section-title-5 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.user-flow-section-2 {
  grid-row-gap: 48px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.flow-diagram {
  object-fit: cover;
  width: 70%;
}

.insights-grid-2 {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 1216px;
  height: 270px;
  text-decoration: none;
  display: flex;
}

.process-insights-card {
  grid-row-gap: 24px;
  border: 1px solid var(--color--border--container);
  background-color: #161616;
  border-radius: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 270px;
  padding: 40px;
  text-decoration: none;
  display: flex;
}

.text-27 {
  color: #e5e7eb;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 100%;
  text-decoration: none;
}

.insights-list {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.insight-item {
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.insight-content {
  grid-row-gap: 6px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.text-28 {
  color: #e5e7eb;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
}

.each-step-in-the-flow-was-validated-through-user-interviews-identifying-key-drop-off-points-in-routi {
  color: #9ca3af;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  text-decoration: none;
}

.completion-rate-card {
  border: 1px solid var(--color--border--container);
  background-color: #161616;
  border-radius: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 300px;
  height: auto;
  min-height: 270px;
  padding: 40px;
  text-decoration: none;
  display: flex;
}

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

.metric-value {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.text-29 {
  color: #3b82f6;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  text-decoration: none;
}

.metric-label {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-bottom: 24px;
  text-decoration: none;
  display: flex;
}

.text-30 {
  color: #e5e7eb;
  text-align: center;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration: none;
}

.metric-divider {
  border: 0 solid #ffffff0d;
  border-top-width: 1px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-top: 32px;
  text-decoration: none;
  display: flex;
}

.text-31 {
  color: #9ca3af;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  text-decoration: none;
}

.high-fidelity-prototype-section {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.high-fidelity-prototype-wrapper {
  grid-row-gap: 30.4533px;
  border: 1px solid var(--color--border--container);
  background-color: #161616;
  border-radius: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-height: 924.068px;
  padding: 30.4533px;
  text-decoration: none;
  display: flex;
}

.hfp {
  object-fit: cover;
}

.low-fidelity-prototype-section {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.low-fidelity-prototype-wrapper {
  grid-row-gap: 30.4533px;
  border: 1px solid var(--color--border--container);
  background-color: #161616;
  border-radius: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-height: 924.068px;
  padding: 30.4533px 30.4533px 28.55px;
  text-decoration: none;
  display: flex;
}

.lfp {
  object-fit: cover;
}

.sticker-sheet-section {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.sticker-sheet-wrapper {
  grid-row-gap: 10px;
  border: 1px solid var(--color--border--container);
  background-color: #161616;
  border-radius: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.sticker-sheet-wrapper.case-study-2 {
  grid-column-gap: 16px;
  grid-row-gap: 0px;
  background-color: #16161600;
  border-style: none;
  border-radius: 0;
  flex-flow: row;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
}

.sticker-sheet-image {
  object-fit: cover;
}

.sticker-sheet-image.case-3 {
  border-radius: 24px;
}

.reflection-section {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.reflection-content {
  grid-column-gap: 24px;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.key-insights-card {
  grid-row-gap: 32px;
  background-color: #161616;
  border: 1px solid #1f2937;
  border-radius: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  min-width: 580px;
  height: auto;
  padding: 32px 32px 104px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.key-insights-card.client-project {
  padding: 32px;
}

.insights-header {
  grid-column-gap: 10px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.insights-icon {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.icon-3 {
  object-fit: cover;
}

.insights-title {
  grid-column-gap: 10px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.text-35 {
  color: #e5e7eb;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  text-decoration: none;
}

.insights-list-2 {
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.insight-item-2 {
  grid-column-gap: 24px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.insight-number {
  opacity: .2;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: auto;
  min-width: 42px;
  height: 44px;
  text-decoration: none;
  display: flex;
}

.text-36 {
  color: #3b82f6;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  text-decoration: none;
}

.insight-description {
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 536px;
  height: auto;
  text-decoration: none;
  display: flex;
}

.text-37 {
  color: #9ca3af;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  text-decoration: none;
}

.insight-item-3 {
  grid-column-gap: 24px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 595px;
  text-decoration: none;
  display: flex;
}

.insight-description-2 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: auto;
  text-decoration: none;
  display: flex;
}

.lessons-learned-card {
  grid-row-gap: 16px;
  background-color: #161616;
  border: 1px solid #1f2937;
  border-radius: 24px;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 32px;
  text-decoration: none;
  display: flex;
}

.card-title {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 307.333px;
  text-decoration: none;
  display: flex;
}

.text-38 {
  color: #3b82f6;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 140%;
  text-decoration: none;
}

.text-39 {
  color: #9ca3af;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  text-decoration: none;
}

.next-steps-card {
  grid-row-gap: 16px;
  background-color: #161616;
  border: 1px solid #1f2937;
  border-radius: 24px;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 32px;
  text-decoration: none;
  display: flex;
}

.card-title-2 {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.next-step-item {
  grid-column-gap: 24px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: auto;
  display: flex;
}

.step-content-2 {
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.bullet-icon {
  grid-column-gap: 10px;
  justify-content: center;
  align-items: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  margin-right: 8px;
  padding: 2px;
  text-decoration: none;
  display: flex;
}

.bullet-icon._2 {
  min-width: 24px;
  padding-right: 2px;
}

.ellipse {
  object-fit: cover;
  width: 6px;
  height: 6px;
  text-decoration: none;
  display: flex;
}

.text-40 {
  color: #9ca3af;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
  text-decoration: none;
}

.case-study-cta-card {
  grid-row-gap: 16px;
  background-color: #161616;
  border: 1px solid #1f2937;
  border-radius: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: 48px;
  padding-top: 64px;
  padding-bottom: 32px;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}

.cta-content {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.cta-title {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-bottom: 16px;
  text-decoration: none;
  display: flex;
}

.text-41 {
  color: #e5e7eb;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
}

.cta-description {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 606px;
  padding-bottom: 24px;
  text-decoration: none;
  display: flex;
}

.text-42 {
  color: #9ca3af;
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  text-decoration: none;
}

.users-preferred-a-shopping-first-experience-with-educational-content-available-as-supportive-guidanc {
  color: #9ca3af;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  text-decoration: none;
}

.users-preferred-a-shopping-first-experience-with-educational-content-available-as-supportive-guidanc-2 {
  color: #9ca3af;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  text-decoration: none;
}

.users-preferred-a-shopping-first-experience-with-educational-content-available-as-supportive-guidanc-3 {
  width: 100%;
  color: var(--color--text--heading);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 140%;
  text-decoration: none;
}

.next-project-section {
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.section-title-10 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.text-44 {
  color: #e5e7eb;
  text-transform: none;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 28px;
  text-decoration: none;
}

.project-grid {
  grid-column-gap: 32px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.project-card {
  grid-row-gap: 4px;
  background-image: url('../images/Insigh-X-link-card.avif');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 592px;
  border: 2px solid #1f2937;
  border-radius: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-height: 163px;
  padding: 48px;
  text-decoration: none;
  display: flex;
}

.project-card.tamkeen {
  background-image: url('../images/Insigh-X-link-card.avif'), linear-gradient(#f0f2f5, #f0f2f5);
  background-position: 50%, 0 0;
  background-repeat: no-repeat, repeat;
  background-size: 592px, auto;
}

.project-card.pure-beauty {
  background-image: url('../images/project-card.avif'), linear-gradient(#f0f2f5, #f0f2f5);
  background-position: 50%, 0 0;
  background-repeat: repeat-x, repeat;
  background-size: 592px, auto;
}

.project-card.pure-beauty.case-3 {
  background-image: url('../images/Pure-beauty-link-card.avif'), linear-gradient(#f0f2f5, #f0f2f5);
  background-position: 50%, 0 0;
  background-repeat: repeat-x, repeat;
  background-size: 592px, auto;
}

.project-card.i-x {
  background-image: url('../images/tamkeen-link-card.avif'), linear-gradient(#f0f2f5, #f0f2f5);
  background-position: 50%, 0 0;
  background-repeat: no-repeat, repeat;
  background-size: 592px, auto;
}

.project-category-badge {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background-color: #3b82f61a;
  border: 1px solid #3b82f6b3;
  border-radius: 6px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 2px 8px;
  text-decoration: none;
  display: flex;
}

.booking-case-study {
  color: #3b82f6;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
  text-decoration: none;
}

.text-45 {
  color: #121212;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 140%;
  text-decoration: none;
}

.project-card-2 {
  grid-row-gap: 4px;
  background-image: url('../images/talent-bridge-link-card.avif');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 592px;
  background-attachment: scroll;
  border: 2px solid #1f2937;
  border-radius: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-height: 163px;
  padding: 48px;
  text-decoration: none;
  display: flex;
}

.project-card-2.pure-beauty {
  background-image: url('../images/project-card-2.avif'), linear-gradient(#f0f2f5, #f0f2f5);
  background-position: 50%, 0 0;
  background-repeat: repeat-x, repeat;
  background-size: 592px, auto;
  background-attachment: scroll, scroll;
}

.project-card-2.tamkeen {
  background-image: url('../images/talent-bridge-link-card.avif'), linear-gradient(#f0f2f5, #f0f2f5);
  background-position: 50% 30%, 0 0;
  background-repeat: no-repeat, repeat;
  background-size: 592px, auto;
  background-attachment: scroll, scroll;
}

.project-card-2.nile-bank {
  background-image: url('../images/Pure-beauty-link-card.avif'), linear-gradient(#f0f2f5, #f0f2f5);
  background-position: 50%, 0 0;
  background-repeat: repeat-x, repeat;
  background-size: 592px, auto;
  background-attachment: scroll, scroll;
}

.project-card-2.i-x {
  background-image: url('../images/talent-bridge-link-card.avif'), linear-gradient(#f0f2f5, #f0f2f5);
  background-position: 50% 30%, 0 0;
  background-repeat: no-repeat, repeat;
  background-size: 592px, auto;
  background-attachment: scroll, scroll;
}

.project-card-2.bt {
  background-image: url('../images/Insigh-X-link-card.avif'), linear-gradient(#f0f2f5, #f0f2f5);
  background-position: 50% 30%, 0 0;
  background-repeat: no-repeat, repeat;
  background-size: 592px, auto;
  background-attachment: scroll, scroll;
}

.process-insights-icon {
  object-fit: cover;
}

.bold-text-5 {
  font-size: 58px;
  font-weight: 700;
  line-height: 75px;
}

.bold-text-6 {
  color: #3b82f6;
  text-align: left;
  text-transform: none;
  font-size: 46px;
  font-weight: 700;
  line-height: 60px;
}

.competitor-analysis-section-2 {
  grid-row-gap: 40px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.section-title-11 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.comparison-table-wrapper-2, .comparison-table {
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.comparison-card {
  grid-row-gap: 20px;
  background-color: #161616;
  border: 1px solid #1f2937;
  border-radius: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-top: 22px;
  text-decoration: none;
  display: flex;
}

.comparison-card-header {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  text-decoration: none;
  display: flex;
}

.text-47 {
  color: #fff;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  text-decoration: none;
}

.competitor-list {
  grid-row-gap: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.competitor-items {
  grid-row-gap: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.competitor-item {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 20px;
  text-decoration: none;
  display: flex;
}

.brand-logo {
  object-fit: cover;
  overflow: hidden;
}

.brand-logo-2 {
  object-fit: cover;
}

.competitor-item-2 {
  background-image: linear-gradient(108.43deg, #3b82f61a 0%, #3b82f600 100%);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 22px 20px;
  text-decoration: none;
  display: flex;
}

.text-48 {
  color: #e5e7eb;
  letter-spacing: .7px;
  text-transform: capitalize;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}

.competitor-item-3 {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 42px;
  padding: 8px 20px;
  display: flex;
}

.key-insight-card-2 {
  grid-row-gap: 24px;
  background-color: #161616;
  border: 1px solid #1f2937;
  border-radius: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 22px 20px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.key-insight-wrapper {
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.key-insight-header-2 {
  grid-column-gap: 10px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.key-insight-title-2 {
  grid-column-gap: 10px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.text-49 {
  color: #e5e7eb;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 100%;
  text-decoration: none;
}

.key-insight-description-2 {
  grid-column-gap: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.text-50 {
  color: #9ca3af;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 29.25px;
  text-decoration: none;
}

.persona-frustrations {
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.image-3 {
  width: 40%;
  margin-left: 40px;
}

.background-decoration-mobile {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1216px;
  height: 4px;
  text-decoration: none;
  display: block;
  position: absolute;
  top: 32px;
  left: 0;
}

.image-2-mobile {
  display: none;
}

.faq-question {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.lottie-animation {
  width: 24px;
  margin-left: auto;
}

.text-span-4, .text-span-5 {
  color: #3b82f6;
}

.case-study-title-2-wrapper {
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: auto;
  max-width: 100%;
  text-decoration: none;
  display: flex;
}

.paragraph-case-study-2 {
  color: #9ca3af;
  align-items: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  text-decoration: none;
  display: flex;
  position: sticky;
}

.paragraph-case-study-2.business-challenge, .paragraph-case-study-2.product-strategy {
  width: 0;
  min-width: 716px;
}

.chips-wrapper-case-study {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.chips-2 {
  background-color: #1f2937;
  border: 1px solid #374151;
  border-radius: 9999px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 30px;
  padding: 6px 16px;
  text-decoration: none;
  display: flex;
}

.text--label-2 {
  color: #9ca3af;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-decoration: none;
}

.hero-image-wrapper {
  background-image: linear-gradient(#2626261a 20%, #4d4d4d33);
  border-radius: 24px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 438px;
  margin-top: 40px;
  display: flex;
}

.project-overview-wrapper {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
  position: relative;
}

.paragraph-wrapper-case-study {
  grid-column-gap: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.cover {
  border-radius: 24px;
  min-width: 46%;
  max-width: 50%;
  margin-left: auto;
}

.business-challenge-section {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.challenge-grid {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: wrap;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.challenge-card-content {
  grid-row-gap: 8px;
  background-color: #161616;
  border: 0 solid #3b82f6;
  border-left-width: 4px;
  border-radius: 24px;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 216px;
  padding: 24px;
  display: flex;
}

.challenge-card-content.target-users {
  border-style: none;
  border-width: 1px;
}

.challenge-card-content.product-strategy {
  grid-row-gap: 0px;
  border-style: none;
  border-width: 1px;
}

.challenge-card-content.product-strategy._2 {
  grid-row-gap: 0px;
}

.challenge-card {
  border: 1px solid #1f2937;
  border-left-width: 0;
  border-radius: 24px;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  min-width: 25%;
  max-width: none;
  margin-right: 0;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.challenge-card.target-users, .challenge-card.product-strategy {
  min-width: 40%;
}

.challenge-card.product-strategy.hidden {
  opacity: 0;
}

.card-icon, .challenge-card-title, .card-description {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.challenge-heading-text {
  color: var(--color--text--heading);
  text-transform: none;
  flex: 1;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}

.challenge-container, .challenge-container.product-strategy {
  margin-top: 48px;
}

.comparison-gallery-image {
  border: 1px solid var(--color--border--container);
  border-radius: 24px;
  margin-top: 48px;
}

.my-process-section {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  min-width: 100%;
  text-decoration: none;
  display: flex;
}

.process-steps {
  grid-row-gap: 32px;
  flex-flow: wrap;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
  position: relative;
}

.connecting-line-desktop {
  z-index: -1;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1216px;
  height: 1px;
  text-decoration: none;
  display: block;
  position: absolute;
  top: 24px;
  left: 0;
}

.connecting-line-desktop._2 {
  max-width: 50%;
}

.connecting-line-desktop._2.mobile {
  display: none;
}

.process-step {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-width: 25%;
  max-width: 25%;
  text-decoration: none;
  display: flex;
}

.step-content-3 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 48px;
  height: 64px;
  padding-bottom: 16px;
  text-decoration: none;
  display: flex;
}

.step-card {
  background-color: #161616;
  border: 1px solid #3b82f6;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  text-decoration: none;
  display: flex;
}

.icon-container {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.search-line-icon {
  object-fit: cover;
  overflow: hidden;
}

.step-header {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-bottom: 8px;
  text-decoration: none;
  display: flex;
}

.step-title-text {
  color: #e5e2e1;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  text-decoration: none;
}

.step-description-2 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  text-decoration: none;
  display: flex;
}

.step-description-text {
  color: #b9cacb;
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  text-decoration: none;
}

.icon-container-2 {
  object-fit: cover;
}

.process-step-2 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-width: 25%;
  max-width: 25%;
  text-decoration: none;
  display: flex;
}

.icon-container-3 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 19px;
  height: 16px;
  text-decoration: none;
  display: flex;
}

.ux-improvements-wrapper {
  grid-row-gap: 72px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 1216px;
  text-decoration: none;
  display: flex;
}

.improvements-list {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.improvement-item {
  grid-row-gap: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 596px;
  margin-bottom: 24px;
  text-decoration: none;
  display: flex;
}

.improvement-title {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.improvement-title-text {
  color: #e5e7eb;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 140%;
  text-decoration: none;
}

.improvement-description {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.improvement-description-text {
  color: #9ca3af;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  text-decoration: none;
}

.improvement-image-1 {
  background-color: #f6f7f7;
  border: 1px solid #1f2937;
  border-radius: 24px;
  width: 100%;
  min-height: 221px;
  overflow: hidden;
}

.responsive-ui-section {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.responsive-ui-image {
  border: 1px solid var(--color--border--container);
  border-radius: 24px;
  margin-top: 48px;
}

.tamkeen-sticker-image {
  border: 1px solid var(--color--border--container);
  border-radius: 24px;
}

.business-impact-section {
  min-width: 100%;
}

.outcomes-section {
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-top: 48px;
  margin-bottom: 48px;
  text-decoration: none;
  display: flex;
}

.outcomes-section.product-strategy {
  margin-bottom: 0;
}

.outcomes-heading {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.outcomes-heading-text {
  color: #e5e7eb;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 140%;
  text-decoration: none;
}

.outcomes-list {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.outcome-chip {
  grid-row-gap: 8px;
  background-color: #161616;
  border: 1px solid #1f2937;
  border-radius: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 24px;
  text-decoration: none;
  display: flex;
}

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

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

.outcome-label-text {
  color: #9ca3af;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  text-decoration: none;
}

.outcome-chip-2 {
  grid-column-gap: 8px;
  background-color: #161616;
  border: 1px solid #1f2937;
  border-radius: 24px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding: 24px;
  text-decoration: none;
  display: flex;
}

.text-span-7 {
  color: var(--color--text--heading);
  font-weight: 600;
}

.text-span-8, .text-span-9 {
  color: var(--color--text--heading);
}

.growth-header {
  grid-column-gap: 10px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.growth-card {
  grid-row-gap: 16px;
  background-color: #161616;
  border: 1px solid #1f2937;
  border-radius: 24px;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 32px;
  text-decoration: none;
  display: flex;
}

.growth-item {
  grid-column-gap: 24px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: auto;
  display: flex;
}

.growth-content {
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.sticker-sheet-container {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.process-last-2-steps-wrapper {
  width: 100%;
  display: flex;
  position: relative;
}

.process-step-desktop {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-width: 25%;
  max-width: 25%;
  text-decoration: none;
  display: none;
}

.process-last-2-steps-wrapper-mobile {
  width: 100%;
  display: none;
  position: relative;
}

.process-step--desktop {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-width: 25%;
  max-width: 25%;
  text-decoration: none;
  display: flex;
}

.process-step-first-four-wrapper-mobile {
  width: 100%;
  display: none;
}

.process-step--last-3, .process-step--first-3 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-width: 25%;
  max-width: 25%;
  text-decoration: none;
  display: flex;
}

.step-content-wrapper {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.outcomes-list-mobile {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: none;
}

.outcome-chip-2-mobile {
  grid-column-gap: 8px;
  background-color: #161616;
  border: 1px solid #1f2937;
  border-radius: 24px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding: 24px;
  text-decoration: none;
  display: flex;
}

.info-mobile {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin-right: auto;
  display: none;
}

.info-case-study-desktop {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin-right: auto;
  display: flex;
}

.image-4.clinet-pr-2 {
  width: 60%;
}

.tamkeen-sticker-image--mobile {
  border: 1px solid var(--color--border--container);
  border-radius: 24px;
  display: none;
}

.responsive-ui-image-mobile {
  border: 1px solid var(--color--border--container);
  border-radius: 24px;
  margin-top: 48px;
  display: none;
}

.text-span-10, .text-span-11, .text-span-12 {
  color: var(--color--text--heading);
  font-weight: 600;
}

.logo {
  object-fit: cover;
  width: 98px;
  height: auto;
  overflow: hidden;
}

.logo.eg-bank {
  width: 126px;
}

.logo.cib-bank {
  width: 52px;
}

.logo.egypt-air {
  width: 112px;
}

.logo.fly-dubai {
  width: 88px;
}

.logo.qatar-airway {
  width: 62px;
}

.image-5 {
  border: 1px solid var(--color--border--container);
  border-radius: 24px;
  min-width: 20%;
}

.image-5._2 {
  min-width: 15%;
}

.cazy-8-section {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.carzy-8-wrapper {
  grid-row-gap: 10px;
  border: 1px solid var(--color--border--container);
  background-color: #161616;
  border-radius: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.carzy-8-wrapper.case-study-2 {
  grid-column-gap: 16px;
  grid-row-gap: 0px;
  background-color: #16161600;
  border-style: none;
  border-radius: 0;
  flex-flow: row;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
}

.image-7 {
  border: 1px solid var(--color--border--container);
  border-radius: 24px;
  width: 100%;
}

.text-span-13, .text-span-14, .text-span-15 {
  color: var(--color--text--heading);
  font-weight: 600;
}

.link-block, .link-block-2 {
  width: 100%;
  text-decoration: none;
}

.project-vision-wrapper {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  display: flex;
  position: relative;
}

.text-card-heading {
  color: var(--color--text--heading);
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.project-vision-card {
  border: 1px solid var(--color--border--container);
  background-color: var(--color--bg--surface-secondary);
  border-radius: 24px;
  width: 100%;
  padding: 40px;
}

.goals-wrapper {
  margin-top: 16px;
}

.goals-item {
  grid-column-gap: 24px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: auto;
  display: flex;
}

.goals {
  grid-column-gap: 10px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.goals-content {
  align-items: stretch;
  width: 100%;
  display: flex;
}

.dashboard-overview-big-2 {
  border: 1px solid var(--color--border--container);
  border-radius: 24px;
  margin-top: 48px;
}

.process-icon {
  object-fit: cover;
  width: 20px;
}

.process-icon._2 {
  width: 20px;
  height: 24px;
}

.process-icon._3 {
  width: 24px;
  height: 24px;
}

.target-users-title {
  color: var(--color--text--heading);
  flex: 1;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}

.target-users-title.product-strategy {
  margin-bottom: 6px;
}

.target-users-title.product-strategy._2 {
  margin-bottom: 4px;
  font-size: 16px;
}

.product-experience-image {
  border: 1px solid var(--color--border--container);
  border-radius: 24px;
  width: 100%;
  min-height: 221px;
  margin-top: 32px;
  overflow: hidden;
}

.product-experience-container {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.ix-sticker-sheet-image {
  border: 1px solid var(--color--border--container);
  border-radius: 24px;
}

.text-span-16, .text-span-17, .text-span-18, .text-span-19, .text-span-20, .bold-text-8, .bold-text-9, .bold-text-10, .bold-text-11, .text-span-21, .text-span-22 {
  color: var(--color--text--heading);
  font-weight: 600;
}

.ix-sticker-image--mobile {
  border: 1px solid var(--color--border--container);
  border-radius: 24px;
  display: none;
}

.product-experience-content-wrapper {
  flex-flow: column;
  display: flex;
}

.business-challeng-icons {
  width: 24px;
  height: 24px;
}

.text-span-23, .text-span-24, .text-span-25, .text-span-26, .text-span-27, .text-span-28 {
  color: var(--color--text--heading);
  font-weight: 600;
}

.bold-text-12, .bold-text-13, .bold-text-14, .bold-text-15, .bold-text-16, .bold-text-17 {
  font-weight: 600;
}

.text-span-29, .text-span-30 {
  color: var(--color--text--heading);
  font-weight: 600;
}

.bold-text-18, .bold-text-19, .bold-text-20, .bold-text-21, .bold-text-22, .bold-text-23, .bold-text-24, .bold-text-25, .bold-text-26, .bold-text-27, .bold-text-28, .bold-text-29, .bold-text-30, .bold-text-31 {
  font-weight: 600;
}

.tb-sticker-sheet-image-copy {
  border: 1px solid var(--color--border--container);
  border-radius: 24px;
}

.pulse-dot {
  background-color: #0c65f6;
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.text--label-3 {
  color: #9ca3af;
  text-transform: capitalize;
  flex: 0 auto;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.text--label-3.status {
  color: #60a5fa;
  text-transform: none;
}

@media screen and (min-width: 1280px) {
  .footer-nav {
    padding-left: 64px;
    padding-right: 64px;
  }

  .navbar {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 64px;
    padding-right: 44px;
  }

  .nav-menu {
    margin-left: 0;
    padding-right: 0;
  }

  .paragraph.small.process {
    height: 100%;
  }

  .text--label.chips.big {
    white-space: nowrap;
  }

  .overlay-blur.about-me {
    left: 56%;
    right: auto;
    transform: none;
  }

  .overlay-blur.case-study {
    left: -515px;
  }

  .section.tamkeen-sticker-sheet {
    margin-top: 108px;
  }

  .card.small.portfoi {
    max-width: 31.5%;
  }

  .case-study-card {
    min-width: 45%;
    max-width: 48.6%;
  }

  .case-study-image, .info-case-study-wrapper {
    min-width: 100%;
  }

  .container.case-study-2 {
    flex-flow: row;
    justify-content: space-between;
    align-items: stretch;
  }

  .problem-solution-cards-wrapper {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .card-1-the-challenge {
    height: 100%;
    min-height: 578px;
  }

  .card-2-the-solution {
    height: auto;
    min-height: 578px;
    max-height: 100%;
    overflow: visible;
  }

  .key-features-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: row;
    justify-content: space-between;
    align-items: stretch;
  }

  .screen-wrapper {
    flex: 0 auto;
    width: 30%;
    margin-right: 0;
  }

  .home-screen {
    width: 100%;
    overflow: visible;
  }

  .screen-wrapper-2 {
    flex: 0 auto;
    width: 30%;
    min-width: 0;
    padding-top: 64px;
  }

  .screen-wrapper-2.case-3 {
    padding-top: 0;
  }

  .result-wrapper {
    flex-flow: row;
  }

  .partticipants-card {
    min-width: 270px;
  }

  .insight-card {
    min-width: 20%;
  }

  .text-10 {
    line-height: 140%;
  }

  .comparison-cell {
    padding-right: 12px;
  }

  .journey-map {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .journey-connector._2 {
    display: none;
  }

  .flow-diagram {
    width: 75%;
    max-width: 60%;
  }

  .insights-grid-2 {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

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

  .completion-rate-card {
    max-width: 374px;
  }

  .lfp {
    overflow: visible;
  }

  .sticker-sheet-wrapper {
    justify-content: center;
    align-items: center;
  }

  .reflection-content {
    align-items: stretch;
  }

  .key-insights-card {
    height: auto;
    padding: 48px;
  }

  .key-insights-card.client-project {
    padding: 48px;
  }

  .insights-list-2 {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .lessons-learned-card {
    padding: 48px;
  }

  .next-steps-card {
    flex: 1;
    max-width: none;
    padding: 48px;
  }

  .card-title-2 {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .next-step-item {
    height: auto;
  }

  .bullet-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
  }

  .text-40 {
    margin-bottom: auto;
  }

  .project-card.tamkeen {
    background-image: url('../images/Insigh-X-link-card.avif'), linear-gradient(#f0f2f5, #f0f2f5);
    background-position: 0%, 0 0;
  }

  .project-card.i-x {
    background-image: url('../images/tamkeen-link-card.avif'), linear-gradient(#f0f2f5, #f0f2f5);
    background-position: 0%, 0 0;
  }

  .project-card-2.tamkeen, .project-card-2.i-x {
    background-image: url('../images/talent-bridge-link-card.avif'), linear-gradient(#f0f2f5, #f0f2f5);
    background-position: 0 30%, 0 0;
  }

  .project-card-2.bt {
    background-image: url('../images/Insigh-X-link-card.avif'), linear-gradient(#f0f2f5, #f0f2f5);
    background-position: 0 30%, 0 0;
  }

  .process-insights-icon {
    max-width: 60%;
  }

  .bold-text-5 {
    font-size: 60px;
    line-height: 76px;
  }

  .bold-text-6 {
    font-size: 48px;
    line-height: 60px;
  }

  .image-3 {
    width: 35%;
  }

  .case-study-title-2-wrapper {
    margin-right: 48px;
  }

  .paragraph-case-study-2.project-overview {
    max-width: 466px;
  }

  .hero-image-wrapper {
    justify-content: center;
    align-items: center;
    height: auto;
    margin-top: 0;
  }

  .challenge-grid {
    flex-flow: wrap;
  }

  .challenge-card {
    min-width: 30%;
  }

  .challenge-card.target-users, .challenge-card.product-strategy {
    min-width: 20%;
  }

  .challenge-card.product-strategy.hidden {
    display: none;
  }

  .process-steps {
    flex-flow: row;
  }

  .connecting-line-desktop._2 {
    display: none;
  }

  .process-step, .process-step-2 {
    min-width: 0%;
    max-width: none;
  }

  .ux-improvements-wrapper {
    grid-row-gap: 96px;
    flex: 0 auto;
  }

  .improvements-list {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: row;
  }

  .growth-card {
    flex: 1;
    max-width: none;
    padding: 48px;
  }

  .growth-item {
    height: auto;
  }

  .process-last-2-steps-wrapper {
    display: none;
  }

  .process-step-desktop {
    min-width: 0%;
    max-width: none;
    display: flex;
  }

  .process-last-2-steps-wrapper-mobile {
    display: none;
  }

  .process-step--desktop, .process-step--last-3, .process-step--first-3 {
    min-width: 0%;
    max-width: none;
  }

  .image-4.clinet-pr-2 {
    width: 80%;
  }

  .carzy-8-wrapper {
    justify-content: center;
    align-items: center;
  }

  .goals-item {
    height: auto;
  }

  .product-experience-image {
    width: 56%;
    margin-top: 0;
  }

  .product-experience-container {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }

  .product-experience-content-wrapper {
    order: -9999;
  }

  .product-experience-content-wrapper._2 {
    order: 9999;
  }
}

@media screen and (min-width: 1440px) {
  .footer-nav {
    padding-left: 0;
    padding-right: 0;
  }

  .navbar {
    padding-left: 64px;
    padding-right: 44px;
  }

  .container-nav {
    max-width: 1440px;
  }

  .overlay-blur.about-me {
    right: auto;
  }

  .overlay-blur.case-study {
    left: -490px;
  }

  .section.case-study-hero {
    margin-bottom: 128px;
  }

  .section.problem-solution, .section.product-experience, .section.research-insights, .section.competitor-analysis, .section.user-persona {
    margin-top: 128px;
  }

  .section.journey-map {
    margin-top: 128px;
    display: block;
  }

  .section.user-flow, .section.high-fidelity-prototype, .section.low-fidelity-prototype, .section.reflection, .section.more-projects, .section.competitor-analysis-mobile, .section.project-overview, .section.business-challenge {
    margin-top: 128px;
  }

  .section.my-process {
    margin-top: 128px;
    display: block;
  }

  .section.ux-improvements, .section.responsive-ui, .section.tamkeen-sticker-sheet, .section.business-impact, .section.project-vision, .section.target-users, .section.product-experience, .section.product-strategy {
    margin-top: 128px;
  }

  .card.small {
    min-width: 20%;
    max-width: 31%;
  }

  .case-study-cards-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: row;
    align-items: stretch;
  }

  .case-study-card {
    min-width: 32%;
    max-width: 40%;
  }

  .container.journey-map, .container.my-process {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .info-wrapper {
    padding-top: 46px;
    padding-bottom: 46px;
  }

  .screen-wrapper {
    flex: 0 auto;
    margin-right: 0;
  }

  .screen-wrapper-2 {
    flex: 0 auto;
  }

  .comparison-cell {
    margin-right: 12px;
  }

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

  .journey-step {
    min-width: 262px;
    max-width: 262px;
    margin-bottom: 0;
  }

  .process-insights-card {
    max-width: 100%;
  }

  .sticker-sheet-wrapper {
    justify-content: center;
    align-items: center;
  }

  .lessons-learned-card {
    flex: 1;
  }

  .bullet-icon {
    width: 24px;
    margin-right: 8px;
  }

  .case-study-title-2-wrapper {
    margin-right: 48px;
  }

  .carzy-8-wrapper {
    justify-content: center;
    align-items: center;
  }
}

@media screen and (min-width: 1920px) {
  .container.hero, .container.footer, .container.experience, .container.process, .container.certificate, .container.contact-hero {
    max-width: 1420px;
  }

  .container.form {
    max-width: 1216px;
  }

  .container.work-with, .container.faq, .container.portfolio-hero, .container.client-projects, .container.case-study-hero, .container.sticker-sheet, .container.tamkeen-sticker-sheet, .container.crazy-8 {
    max-width: 1420px;
  }

  .navbar {
    margin-left: 8px;
    padding-left: 140px;
    padding-right: 120px;
  }

  .container-nav {
    max-width: 1640px;
  }

  .overlay-blur.about-me {
    transform: none;
  }

  .overlay-blur.case-study {
    left: -400px;
  }

  .section.case-study-hero {
    margin-top: 64px;
    margin-bottom: 128px;
  }

  .section.problem-solution, .section.product-experience, .section.research-insights, .section.competitor-analysis, .section.user-persona {
    margin-top: 128px;
  }

  .section.journey-map {
    margin-top: 128px;
    display: block;
  }

  .section.user-flow, .section.high-fidelity-prototype, .section.low-fidelity-prototype, .section.reflection, .section.more-projects, .section.competitor-analysis-mobile, .section.project-overview, .section.business-challenge {
    margin-top: 128px;
  }

  .section.my-process {
    margin-top: 128px;
    display: block;
  }

  .section.ux-improvements, .section.responsive-ui, .section.business-impact, .section.project-vision, .section.target-users, .section.product-experience, .section.product-strategy {
    margin-top: 128px;
  }

  .copyright-wrapper {
    max-width: 1420px;
  }

  .card.certificate {
    min-width: 484px;
  }

  .case-study-cards-wrapper {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .case-study-card {
    flex: 1;
    min-width: 30%;
  }

  .case-study-image, .info-case-study-wrapper {
    min-width: 100%;
  }

  .container.google-case-study-info-wrapper, .container.problem-solution, .container.product-experience, .container.research-insights, .container.competitor-analysis, .container.user-persona {
    max-width: 1420px;
  }

  .container.journey-map {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    justify-content: space-between;
    align-items: stretch;
    max-width: 1420px;
  }

  .container.user-flow, .container.high-fidelity-prototype, .container.low-fidelity-prototype, .container.reflection, .container.more-projects, .container.case-study-2, .container.business-challenge {
    max-width: 1420px;
  }

  .container.my-process {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    justify-content: space-between;
    align-items: stretch;
    max-width: 1420px;
  }

  .container.ux-improvements, .container.project-overview, .container.responsive-ui, .container.business-impact, .container.project-vision, .container.product-experience, .container.product-experience, .container.product-strategy, .container.product-strategy {
    max-width: 1420px;
  }

  .info-wrapper {
    padding-top: 46px;
    padding-bottom: 46px;
  }

  .problem-solution-cards-wrapper {
    max-width: 1420px;
  }

  .card-1-the-challenge, .card-2-the-solution {
    max-width: 100%;
  }

  .section-title-wrapper {
    max-width: 1420px;
  }

  .screen-wrapper {
    flex: 0 auto;
    margin-right: 0;
  }

  .screen-wrapper-2 {
    flex: 0 auto;
  }

  .result-wrapper {
    justify-content: space-between;
  }

  .partticipants-card {
    max-width: 100%;
  }

  .insight-card {
    flex: 0 auto;
    min-width: auto;
    max-width: 100%;
  }

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

  .journey-step {
    max-width: 100%;
    margin-bottom: 0;
  }

  .journey-connector, .connector-icon {
    height: auto;
  }

  .flow-diagram {
    max-width: 55%;
  }

  .insights-grid-2 {
    max-width: 1420px;
  }

  .process-insights-card {
    max-width: 100%;
  }

  .completion-rate-card {
    width: 50%;
    max-width: 100%;
  }

  .sticker-sheet-wrapper {
    justify-content: center;
    align-items: center;
  }

  .sticker-sheet-wrapper.case-study-2 {
    grid-column-gap: 24px;
  }

  .project-card {
    background-repeat: repeat-x;
  }

  .project-card-2.tamkeen, .project-card-2.i-x, .project-card-2.bt {
    background-image: url('../images/talent-bridge-link-card.avif'), linear-gradient(to bottom, null, null);
    background-repeat: repeat-x, repeat;
  }

  .image-2 {
    flex: 1;
  }

  .image-3 {
    margin-left: 70px;
  }

  .background-decoration-mobile {
    flex: 1;
    max-width: none;
    overflow: clip;
  }

  .image-2-mobile {
    flex: 1;
  }

  .hero-image-wrapper {
    overflow: hidden;
  }

  .challenge-grid {
    justify-content: space-between;
  }

  .challenge-card {
    flex: 0 auto;
    min-width: auto;
    max-width: 32%;
  }

  .challenge-card.target-users, .challenge-card.product-strategy {
    flex: 1;
  }

  .comparison-gallery-image {
    width: 100%;
    max-width: none;
  }

  .connecting-line-desktop, .ux-improvements-wrapper {
    max-width: 1420px;
  }

  .responsive-ui-image, .tamkeen-sticker-image {
    width: 100%;
    max-width: none;
  }

  .sticker-sheet-container {
    width: 1420px;
    margin-left: auto;
    margin-right: auto;
  }

  .image-4.clinet-pr-2 {
    width: 80%;
  }

  .tamkeen-sticker-image--mobile, .responsive-ui-image-mobile {
    width: 100%;
    max-width: none;
  }

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

  .image-5._2 {
    min-width: 18%;
  }

  .image-5._3 {
    min-width: 25.5%;
  }

  .carzy-8-wrapper {
    justify-content: center;
    align-items: center;
  }

  .dashboard-overview-big-2 {
    width: 100%;
    max-width: none;
  }

  .product-experience-image {
    width: 50%;
  }

  .ix-sticker-sheet-image, .ix-sticker-image--mobile, .tb-sticker-sheet-image-copy {
    width: 100%;
    max-width: none;
  }
}

@media screen and (max-width: 991px) {
  .page-wrapper {
    overflow: visible;
  }

  .page-main {
    margin-left: 48px;
    margin-right: 48px;
  }

  .footer-nav {
    margin-top: 124px;
    padding-left: 48px;
    padding-right: 48px;
  }

  .container.hero {
    flex-flow: wrap-reverse;
  }

  .container.footer {
    grid-column-gap: 48px;
    grid-row-gap: 48px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .body {
    overflow: clip;
  }

  .navbar {
    background-color: var(--color--bg--surface-primary);
    padding-left: 48px;
    padding-right: 28px;
    top: 0;
  }

  .heading-1.blue {
    white-space: nowrap;
  }

  .heading-1.google-case-study {
    margin-bottom: -16px;
    line-height: 66px;
  }

  .heading-1.clinet-project {
    font-size: 44px;
    line-height: 58px;
  }

  .paragraph {
    max-width: 80%;
  }

  .paragraph.small {
    text-align: center;
  }

  .paragraph.small.experience {
    text-align: left;
    max-width: 80%;
  }

  .paragraph.small.process {
    text-align: left;
    height: 100%;
  }

  .paragraph.small.work-with, .paragraph.small.faq-answer {
    text-align: left;
  }

  .text--label.links._2 {
    text-align: center;
    width: 100%;
  }

  .text--label.info {
    min-width: 100%;
  }

  .text--label.case-study-card-details {
    text-transform: none;
  }

  .button.case-card {
    margin-top: 0;
  }

  .overlay-blur {
    transform: translate(-50%, -10%);
  }

  .overlay-blur.about-me {
    top: -6%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -1%);
  }

  .section.experience {
    margin-top: 80px;
    margin-bottom: 80px;
  }

  .section.process, .section.certificates {
    margin-top: 80px;
  }

  .section.work-with {
    margin-top: 80px;
    margin-bottom: 80px;
  }

  .section.faq {
    margin-top: 80px;
    margin-bottom: 0;
  }

  .section.client-projects, .section.google-case-studies {
    margin-top: 80px;
  }

  .section.case-study-hero {
    margin-bottom: 80px;
  }

  .section.problem-solution, .section.product-experience, .section.research-insights, .section.competitor-analysis, .section.user-persona, .section.journey-map, .section.user-flow, .section.high-fidelity-prototype, .section.low-fidelity-prototype, .section.sticker-sheet, .section.reflection, .section.more-projects, .section.project-overview, .section.business-challenge, .section.my-process, .section.ux-improvements, .section.responsive-ui, .section.tamkeen-sticker-sheet, .section.business-impact, .section.crazy-8, .section.project-vision, .section.target-users, .section.product-experience, .section.product-strategy {
    margin-top: 80px;
  }

  .chips-wrapper, .chips-wrapper.industries {
    max-width: 80%;
  }

  .heading-4 {
    text-align: center;
  }

  .heading-4.case-study-card-title {
    text-align: left;
  }

  .links-wrapper.social {
    justify-content: center;
    align-items: center;
  }

  .social-links-wrapper {
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }

  .connect-wrapper {
    justify-content: flex-start;
    align-items: center;
  }

  .card.small {
    flex: 1;
    min-width: 47.7%;
    max-width: 47.7%;
    height: auto;
    min-height: 50%;
  }

  .card.small.contact {
    flex: 1;
    width: auto;
    min-width: 47.7%;
    max-width: 47.7%;
  }

  .cards-experience-wrapper {
    flex-flow: column;
  }

  .heading-2.google-case-study {
    line-height: 56px;
    overflow: visible;
  }

  .heading-2.client--project {
    margin-top: 2px;
    font-size: 32px;
    line-height: 40px;
  }

  .cards-skills-wrapper {
    flex-flow: column;
  }

  .cards-work-with-wrapper {
    grid-column-gap: 4vw;
    grid-row-gap: 4vw;
    flex-flow: wrap;
  }

  .case-study-cards-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    align-items: stretch;
  }

  .case-study-card {
    justify-content: center;
    align-items: stretch;
    min-width: 40%;
    max-width: 48.6%;
    height: auto;
  }

  .list.case-study-card-brief {
    height: 100%;
  }

  .case-study-image {
    width: 100%;
    min-width: auto;
  }

  .info-case-study-wrapper {
    aspect-ratio: auto;
    flex-flow: column;
    flex: 1;
    height: auto;
    display: flex;
  }

  .info-wrapper {
    justify-content: space-between;
  }

  .info-case-study {
    width: auto;
  }

  .info-case-study._2 {
    margin-right: 0;
  }

  .problem-solution-cards-wrapper {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
  }

  .card-1-the-challenge, .card-2-the-solution {
    max-width: none;
  }

  .heading-3.title {
    margin-bottom: 12px;
  }

  .section-title-wrapper {
    margin-bottom: 40px;
  }

  .screen-title {
    width: auto;
  }

  .key-features-wrapper {
    grid-column-gap: 48px;
    grid-row-gap: 48px;
    flex-flow: column wrap-reverse;
  }

  .key-features-wrapper.case-3 {
    grid-column-gap: 76px;
    grid-row-gap: 76px;
  }

  .screen-wrapper {
    width: 50%;
  }

  .home-screen {
    width: 100%;
  }

  .screen-content-wrapper {
    min-width: auto;
  }

  .screen-content-wrapper.case-3 {
    justify-content: flex-start;
    align-items: center;
  }

  .text-4 {
    width: auto;
  }

  .screen-brief.case-3 {
    justify-content: flex-start;
    align-items: center;
  }

  .screen-wrapper-2 {
    width: 50%;
  }

  .partticipants-card {
    width: 100%;
    min-width: 48.25%;
    max-width: 48.25%;
    margin-right: 0;
  }

  .insight-card {
    min-width: 48.25%;
    max-width: 48.25%;
  }

  .comparison-table-wrapper {
    margin-bottom: 40px;
  }

  .text-10 {
    font-size: 14px;
  }

  .table-cell-2 {
    padding: 16px;
  }

  .comparison-cell {
    padding: 24px;
  }

  .comparison-cell-2 {
    padding: 16px;
  }

  .persona-content-wrapper {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
  }

  .persona-profile {
    margin-bottom: 40px;
  }

  .profile-details, .profile-details.case-3 {
    justify-content: flex-start;
    align-items: center;
  }

  .persona-goals {
    grid-row-gap: 24px;
    margin-bottom: 40px;
  }

  .journey-step {
    min-width: 252px;
    max-width: 350px;
  }

  .journey-connector._2 {
    opacity: 0;
    display: block;
  }

  .user-flow-section-2 {
    grid-row-gap: 40px;
  }

  .flow-diagram {
    width: 90%;
  }

  .insights-grid-2 {
    flex-flow: column;
    height: auto;
  }

  .completion-rate-card {
    max-width: none;
  }

  .reflection-content {
    flex-flow: column;
  }

  .key-insights-card {
    margin-bottom: 24px;
    padding-bottom: 32px;
  }

  .card-title {
    max-width: none;
  }

  .case-study-cta-card {
    margin-top: 40px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .project-grid {
    grid-row-gap: 32px;
    flex-flow: column;
  }

  .project-card, .project-card.pure-beauty {
    background-image: url('../images/project-card.avif'), linear-gradient(#f0f2f5, #f0f2f5);
    background-position: 50%, 0 0;
    background-repeat: no-repeat, repeat;
    background-size: 592px, auto;
  }

  .project-card.pure-beauty.case-3 {
    background-image: url('../images/Pure-beauty-link-card.avif'), linear-gradient(to bottom, null, null);
    background-repeat: no-repeat, repeat;
  }

  .project-card-2 {
    background-image: url('../images/project-card-2.avif'), linear-gradient(#f0f2f5, #f0f2f5);
    background-position: 50%, 0 0;
    background-repeat: no-repeat, repeat;
    background-size: 592px, auto;
    background-attachment: scroll, scroll;
  }

  .project-card-2.pure-beauty {
    background-image: url('../images/Pure-beauty-link-card.avif'), linear-gradient(#f0f2f5, #f0f2f5);
    background-position: 50%, 0 0;
    background-repeat: no-repeat, repeat;
    background-size: 592px, auto;
    background-attachment: scroll, scroll;
  }

  .project-card-2.pure-beauty.case-3, .project-card-2.pure-beauty.case-1 {
    background-image: url('../images/project-card-2.avif'), linear-gradient(#f0f2f5, #f0f2f5);
    background-position: 50%, 0 0;
    background-repeat: no-repeat, repeat;
    background-size: 592px, auto;
    background-attachment: scroll, scroll;
  }

  .project-card-2.nile-bank {
    background-image: url('../images/Pure-beauty-link-card.avif'), linear-gradient(#f0f2f5, #f0f2f5);
    background-position: 50%, 0 0;
    background-repeat: no-repeat, repeat;
    background-size: 592px, auto;
    background-attachment: scroll, scroll;
  }

  .bold-text-5 {
    font-size: 44px;
    line-height: 58px;
  }

  .bold-text-6 {
    font-size: 32px;
    line-height: 40px;
  }

  .persona-frustrations {
    grid-row-gap: 24px;
    margin-bottom: 0;
  }

  .image-3 {
    width: 50%;
    margin-bottom: 48px;
  }

  .challenge-grid.target-users, .challenge-grid.product-strategy {
    justify-content: flex-start;
  }

  .challenge-card {
    min-width: 48.25%;
    max-width: 48.25%;
  }

  .challenge-card.target-users, .challenge-card.product-strategy {
    max-width: 49%;
  }

  .challenge-container, .challenge-container.product-strategy, .comparison-gallery-image {
    margin-top: 40px;
  }

  .process-steps {
    grid-row-gap: 32px;
    flex-flow: wrap;
    justify-content: flex-start;
  }

  .connecting-line-desktop._2 {
    max-width: 50%;
    position: absolute;
    inset: 24px 0% auto;
  }

  .process-step {
    width: auto;
    min-width: 25%;
    max-width: 25px;
  }

  .step-description-text {
    min-width: 164px;
  }

  .process-step-2 {
    width: auto;
    min-width: 25%;
    max-width: 25%;
    height: auto;
  }

  .ux-improvements-wrapper {
    grid-row-gap: 72px;
  }

  .responsive-ui-image {
    margin-top: 40px;
  }

  .outcomes-section {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .process-last-2-steps-wrapper {
    width: 100%;
    display: flex;
    position: relative;
  }

  .process-step-desktop {
    width: auto;
    min-width: 25%;
    max-width: 25px;
  }

  .process-last-2-steps-wrapper-mobile {
    width: 100%;
    display: none;
    position: relative;
  }

  .process-step--desktop, .process-step--last-3 {
    width: auto;
    min-width: 25%;
    max-width: 25%;
    height: auto;
  }

  .process-step--first-3 {
    width: auto;
    min-width: 25%;
    max-width: 25px;
  }

  .info-mobile, .info-case-study-desktop {
    width: auto;
  }

  .image-4.clinet-pr-2 {
    width: 75%;
  }

  .responsive-ui-image-mobile {
    margin-top: 40px;
  }

  .image-5 {
    min-width: 22%;
  }

  .image-5._2 {
    min-width: 12%;
  }

  .image-5._3 {
    min-width: 22%;
  }

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

  .dashboard-overview-big-2 {
    margin-top: 40px;
  }
}

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

  .page-main {
    min-width: auto;
    margin-left: 24px;
    margin-right: 24px;
  }

  .container.faq {
    padding-top: 80px;
    padding-bottom: 0;
  }

  .body {
    overflow: clip;
  }

  .navbar {
    background-color: var(--color--bg--surface-primary);
  }

  .brand {
    padding-left: 0;
  }

  .heading-1 {
    font-size: 48px;
    line-height: 60px;
  }

  .heading-1.blue {
    white-space: normal;
  }

  .heading-1.google-case-study, .heading-1.clinet-project {
    font-size: 38px;
    line-height: 110%;
  }

  .paragraph {
    margin-top: 16px;
    margin-bottom: 24px;
    font-size: 18px;
  }

  .paragraph.small.form {
    margin-bottom: 40px;
  }

  .overlay-blur {
    top: -8%;
    transform: translate(-50%, -8%);
  }

  .overlay-blur.about-me {
    top: -6%;
    right: auto;
  }

  .overlay-blur.case-study {
    z-index: -2;
    left: -480px;
  }

  .section.hero {
    margin-top: 56px;
  }

  .section.case-study-hero {
    margin-top: 56px;
    margin-bottom: 56px;
  }

  .section.problem-solution {
    margin-top: 56px;
  }

  .section.product-experience, .section.research-insights {
    margin-top: 80px;
  }

  .section.competitor-analysis {
    display: none;
  }

  .section.user-persona, .section.journey-map, .section.user-flow {
    margin-top: 80px;
  }

  .section.competitor-analysis-mobile {
    margin-top: 80px;
    display: block;
  }

  .section.project-overview, .section.business-challenge, .section.my-process, .section.ux-improvements, .section.responsive-ui, .section.business-impact, .section.project-vision, .section.target-users, .section.product-experience, .section.product-strategy {
    margin-top: 80px;
  }

  .big-heading {
    font-size: 104px;
    line-height: 104px;
  }

  .card.small.portfoi {
    min-width: 46.9%;
    max-width: 100%;
  }

  .card.info {
    min-width: 100%;
    max-width: none;
  }

  .section-title.faq {
    display: none;
  }

  .section-title.faq.mobile {
    display: flex;
  }

  .cards-experience-wrapper {
    flex-flow: wrap;
    margin-top: 40px;
  }

  .cards-process-wrapper {
    margin-top: 40px;
  }

  .heading-2 {
    font-size: 32px;
    line-height: 40px;
  }

  .heading-2.google-case-study {
    font-size: 28px;
    line-height: 130%;
  }

  .heading-2.client--project {
    margin-top: 4px;
    font-size: 28px;
    line-height: 130%;
  }

  .text-span {
    font-size: 32px;
    line-height: 40px;
  }

  .cards-work-with-wrapper {
    margin-top: 40px;
  }

  .name-form-wrapper, .email-form-wrapper {
    width: 100%;
  }

  .name-mail-form-wrapper, .radio-buttons-wrapper {
    flex-flow: column;
  }

  .projects-type-radio-button-field, .budget-radio-button-field {
    width: 100%;
  }

  .cards-info {
    flex-flow: wrap;
    margin-top: 40px;
  }

  .faq-wrapper {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    grid-template-columns: 1fr;
    margin-top: 40px;
  }

  .title-portfolio-wrapper {
    margin-bottom: 40px;
  }

  .case-study-cards-wrapper {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
  }

  .case-study-card {
    min-width: 100%;
    max-width: 100%;
  }

  .case-study-title-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    display: flex;
  }

  .container.journey-map, .container.my-process {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: 100%;
  }

  .info-wrapper {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: wrap;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    place-items: center stretch;
    display: flex;
  }

  .heading-3 {
    font-size: 24px;
    line-height: 24px;
  }

  .heading-3.title {
    margin-bottom: 0;
    font-size: 30px;
    line-height: 38px;
  }

  .section-divider {
    margin-top: 12px;
  }

  .key-features-wrapper {
    flex-flow: column;
  }

  .key-features-wrapper.case-3 {
    grid-column-gap: 72px;
    grid-row-gap: 72px;
  }

  .screen-wrapper {
    width: 100%;
  }

  .screen-content-wrapper {
    min-width: 100%;
  }

  .text-4, .screen-wrapper-2 {
    width: 100%;
  }

  .partticipants-card {
    min-width: 0%;
    max-width: none;
  }

  .insight-card {
    min-width: 100%;
    max-width: none;
  }

  .journey-map-section {
    width: 100%;
  }

  .journey-map {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: column;
  }

  .journey-step {
    min-width: auto;
    max-width: none;
    margin-bottom: 0;
  }

  .journey-connector {
    min-height: auto;
    margin-left: auto;
    margin-right: auto;
    transform: rotate(90deg);
  }

  .journey-connector._2 {
    display: none;
  }

  .connector-icon {
    justify-content: center;
    align-items: stretch;
  }

  .user-flow-section-2 {
    grid-row-gap: 32px;
  }

  .flow-diagram {
    width: 100%;
  }

  .process-insights-card {
    height: auto;
  }

  .insights-list {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
  }

  .sticker-sheet-wrapper.case-study-2 {
    grid-column-gap: 8px;
  }

  .key-insights-card {
    min-width: auto;
  }

  .case-study-cta-card {
    justify-content: flex-start;
    align-items: stretch;
    margin-top: 48px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .bold-text-5 {
    font-size: 38px;
    line-height: 110%;
  }

  .bold-text-6 {
    font-size: 28px;
    line-height: 130%;
  }

  .image-2 {
    box-sizing: border-box;
    object-fit: cover;
    min-height: 250px;
  }

  .competitor-analysis-section-2 {
    grid-row-gap: 0px;
  }

  .image-3 {
    width: 60%;
    margin-bottom: 40px;
  }

  .background-decoration-mobile {
    align-self: stretch;
    width: auto;
    min-width: 100%;
    max-width: none;
    padding-left: 20px;
    padding-right: 20px;
    overflow: clip;
  }

  .image-2-mobile {
    box-sizing: border-box;
    object-fit: cover;
    min-height: 250px;
  }

  .bold-text-7 {
    font-size: 32px;
    line-height: 40px;
  }

  .paragraph-case-study-2.business-challenge, .paragraph-case-study-2.product-strategy {
    width: 100%;
    min-width: auto;
  }

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

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

  .challenge-card {
    min-width: 100%;
    max-width: none;
  }

  .challenge-container, .comparison-gallery-image {
    margin-top: 32px;
  }

  .my-process-section {
    width: 100%;
  }

  .process-steps {
    flex-flow: wrap;
  }

  .connecting-line-desktop._2.mobile {
    max-width: none;
    display: block;
  }

  .process-step {
    flex: 1;
    max-width: 30%;
  }

  .process-step-2 {
    flex: 0 auto;
    max-width: 30%;
  }

  .ux-improvements-wrapper {
    grid-row-gap: 64px;
  }

  .responsive-ui-image {
    margin-top: 32px;
    display: none;
  }

  .tamkeen-sticker-image {
    display: none;
  }

  .outcomes-section {
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .outcomes-list, .process-last-2-steps-wrapper {
    display: none;
  }

  .process-last-2-steps-wrapper-mobile {
    display: flex;
  }

  .process-step--desktop {
    display: none;
  }

  .process-step--last-3, .process-step--first-3 {
    flex: 1;
    max-width: none;
  }

  .outcomes-list-mobile {
    display: flex;
  }

  .outcome-chip-2-mobile {
    padding: 16px;
  }

  .image-4.clinet-pr-2 {
    width: 80%;
  }

  .tamkeen-sticker-image--mobile {
    width: 100%;
    max-width: none;
    display: inline-flex;
  }

  .responsive-ui-image-mobile {
    width: 100%;
    max-width: none;
    margin-top: 32px;
    display: inline-flex;
  }

  .logo.egypt-air {
    width: 100px;
  }

  .image-5 {
    border-radius: 12px;
  }

  .project-vision-wrapper {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
  }

  .dashboard-overview-big-2 {
    margin-top: 32px;
  }

  .ix-sticker-sheet-image {
    display: none;
  }

  .ix-sticker-image--mobile {
    width: 100%;
    max-width: none;
    display: inline-flex;
  }

  .tb-sticker-sheet-image-copy {
    display: none;
  }
}

@media screen and (max-width: 479px) {
  .page-wrapper {
    overflow: visible;
  }

  .page-main {
    min-width: auto;
    margin-left: 16px;
    margin-right: 16px;
    overflow: hidden;
  }

  .footer-nav {
    margin-top: 80px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 48px;
    padding-right: 48px;
  }

  .container.footer {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    justify-content: space-between;
    padding-top: 0;
    padding-bottom: 0;
  }

  .container.faq {
    padding-top: 80px;
  }

  .body {
    overflow: visible;
  }

  .navbar {
    z-index: 5;
    background-color: var(--color--bg--surface-primary);
    min-width: 100%;
    height: auto;
    min-height: 66px;
    padding-left: 16px;
    padding-right: 0;
    display: none;
    position: sticky;
    top: 0;
  }

  .navbar.mobile {
    padding-left: 0;
    padding-right: 16px;
    display: flex;
  }

  .container-nav {
    justify-content: space-between;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
  }

  .brand, .brand.w--current {
    margin-right: 0;
  }

  .nav-link {
    justify-content: center;
    align-items: center;
    font-size: 16px;
    display: flex;
  }

  .nav-link.active {
    background-color: var(--color--bg--surface-secondary);
    text-decoration: none;
  }

  .nav-menu {
    border-bottom: 1px solid var(--color--border--container);
    background-color: var(--color--bg--surface-primary);
  }

  .heading-1 {
    text-align: center;
  }

  .heading-1.blue {
    white-space: normal;
    word-break: normal;
    min-width: 100%;
    max-width: none;
    font-size: 48px;
    line-height: 60px;
  }

  .heading-1.clinet-project {
    text-align: left;
  }

  .paragraph, .paragraph.small.experience {
    max-width: none;
  }

  .paragraph.small.process.mobile {
    display: block;
  }

  .paragraph.small.process.desktop {
    display: none;
  }

  .paragraph.contact-hero {
    max-width: 390px;
    margin-top: 16px;
  }

  .paragraph.portfolio-hero {
    max-width: 360px;
    margin-top: 16px;
  }

  .text--label.copyright {
    flex: 0 auto;
    max-width: none;
    height: 16px;
    max-height: none;
    padding-top: 0;
    padding-bottom: 0;
  }

  .text--label.caae-study-info {
    white-space: nowrap;
  }

  .button {
    white-space: nowrap;
    flex: 1;
  }

  .button.secondary {
    white-space: nowrap;
  }

  .cta-wrapper {
    text-align: center;
    flex-flow: wrap;
  }

  .button-gradient-border {
    flex: 1;
  }

  .overlay-blur {
    width: 500px;
    top: -3%;
    bottom: auto;
    right: auto;
    transform: translate(-50%, -3%);
  }

  .overlay-blur.about-me {
    width: 100vw;
    max-width: none;
    top: -1%;
    right: auto;
    transform: translate(-50%, -1%);
  }

  .overlay-blur.case-study {
    width: 600px;
    max-width: 300%;
    left: -529px;
    transform: translate(60px);
  }

  .section.experience {
    margin-top: 80px;
    margin-bottom: 80px;
  }

  .section.process, .section.certificates {
    margin-top: 80px;
  }

  .section.case-study-hero {
    margin-bottom: 56px;
  }

  .section.problem-solution, .section.product-experience, .section.research-insights, .section.user-persona, .section.journey-map, .section.user-flow, .section.high-fidelity-prototype, .section.low-fidelity-prototype, .section.sticker-sheet, .section.reflection, .section.more-projects, .section.competitor-analysis-mobile, .section.project-overview, .section.business-challenge, .section.my-process, .section.ux-improvements, .section.responsive-ui, .section.tamkeen-sticker-sheet, .section.business-impact, .section.project-vision, .section.target-users, .section.product-experience, .section.product-strategy {
    margin-top: 80px;
  }

  .chips-wrapper, .chips-wrapper.industries {
    max-width: none;
  }

  .quick-links-wrapper.footer {
    margin-bottom: 48px;
  }

  .footer-message.footer {
    margin-top: 32px;
    margin-bottom: 48px;
  }

  .connect-wrapper {
    grid-column-gap: 48px;
    grid-row-gap: 48px;
  }

  .connect-wrapper.footer {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    margin-bottom: 32px;
  }

  .copyright-wrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: column;
    max-width: none;
    max-height: none;
    margin-bottom: 0;
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .text-icon-wrapper {
    max-height: 16px;
  }

  .card {
    padding: 22px 20px;
  }

  .card.small {
    min-width: 100%;
    max-width: none;
    min-height: auto;
    padding: 22px 20px;
  }

  .card.small.portfoi {
    min-width: 100%;
    max-width: none;
    min-height: auto;
  }

  .card.small.contact {
    min-width: 100%;
    max-width: none;
  }

  .card.certificate {
    min-width: auto;
  }

  .cards-experience-wrapper {
    margin-top: 40px;
  }

  .cards-process-wrapper {
    flex-flow: column;
    min-width: 100%;
    margin-top: 40px;
  }

  .heading-2.google-case-study {
    text-align: left;
    flex: none;
  }

  .heading-2.client--project {
    margin-top: 8px;
  }

  .text-span {
    white-space: nowrap;
  }

  .cards-skills-wrapper {
    min-width: 100%;
  }

  .heading-6 {
    max-width: 85%;
  }

  .skills-wrapper {
    flex-flow: wrap;
  }

  .cards-work-with-wrapper {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
    margin-top: 40px;
  }

  .cards-info {
    margin-top: 40px;
  }

  .questions-wrapper {
    padding-left: 24px;
    padding-right: 24px;
  }

  .title-portfolio-wrapper {
    margin-bottom: 40px;
  }

  .case-study-cards-wrapper {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .case-study-title-wrapper {
    align-items: flex-start;
    bottom: 16px;
    left: 16px;
    right: 16px;
  }

  .info-wrapper {
    grid-column-gap: 36px;
    grid-row-gap: 32px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr minmax(170px, 1fr);
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    align-items: stretch;
    display: flex;
  }

  .info-case-study {
    flex: 0 auto;
    align-items: stretch;
    width: auto;
    min-width: 40%;
    margin-right: auto;
    padding-right: 0;
  }

  .info-case-study._2 {
    flex: 1;
    min-width: 50.5%;
  }

  .card-1-the-challenge {
    grid-row-gap: 16px;
    margin-right: 0;
    padding: 22px 20px;
  }

  .problem-wrapper {
    grid-row-gap: 14px;
  }

  .problem-item-1 {
    padding: 16px;
  }

  .solution-item-1 {
    border-radius: 14px;
    padding: 16px;
  }

  .card-2-the-solution {
    grid-row-gap: 16px;
    padding: 22px 20px;
  }

  .solution-wrapper {
    grid-row-gap: 14px;
  }

  .section-divider {
    margin-top: 8px;
  }

  .home-screen {
    margin-bottom: 24px;
  }

  .screen-content-wrapper {
    height: 80px;
  }

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

  .partticipants-card {
    padding: 22px 20px;
  }

  .card-content {
    flex: 1;
    height: 140px;
    padding: 22px 20px;
  }

  .persona-card, .journey-step {
    padding: 22px 20px;
  }

  .user-flow-section-2 {
    grid-row-gap: 32px;
  }

  .insights-grid-2 {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .process-insights-card, .completion-rate-card, .key-insights-card, .lessons-learned-card, .next-steps-card {
    padding: 22px 20px;
  }

  .bullet-icon {
    padding-top: 2px;
  }

  .case-study-cta-card {
    margin-top: 48px;
  }

  .project-card {
    grid-row-gap: 2px;
    background-image: url('../images/project-card.avif'), linear-gradient(to bottom, null, null);
    background-size: cover, auto;
    max-height: 106px;
    padding: 32px 24px;
  }

  .project-card.tamkeen {
    background-image: url('../images/Insigh-X-link-card.avif'), linear-gradient(to bottom, null, null);
    background-size: cover, auto;
  }

  .project-card.pure-beauty {
    background-position: 50%;
    background-repeat: repeat-y;
    background-size: cover;
    background-attachment: scroll;
  }

  .project-card.pure-beauty.case-3 {
    background-image: url('../images/Pure-beauty-link-card.avif'), linear-gradient(to bottom, null, null);
    background-size: cover, auto;
  }

  .project-card.i-x {
    background-image: url('../images/Insigh-X-link-card.avif'), linear-gradient(to bottom, null, null);
    background-size: cover, auto;
  }

  .project-category-badge {
    border-radius: 4px;
    padding-left: 4px;
    padding-right: 4px;
  }

  .booking-case-study {
    font-size: 8px;
    line-height: 9px;
  }

  .text-45 {
    font-size: 18px;
  }

  .project-card-2 {
    grid-row-gap: 2px;
    background-image: url('../images/project-card-2.avif'), linear-gradient(#0000, #0000);
    background-size: cover, auto;
    max-height: 106px;
    padding: 32px 24px;
  }

  .project-card-2.pure-beauty {
    background-size: cover;
  }

  .project-card-2.pure-beauty.case-3, .project-card-2.pure-beauty.case-1 {
    background-image: url('../images/project-card-2.avif'), linear-gradient(to bottom, null, null);
    background-size: cover, auto;
  }

  .project-card-2.tamkeen {
    background-image: url('../images/talent-bridge-link-card.avif'), linear-gradient(to bottom, null, null);
    background-size: cover, auto;
  }

  .project-card-2.nile-bank {
    background-size: cover;
  }

  .project-card-2.i-x, .project-card-2.bt {
    background-image: url('../images/talent-bridge-link-card.avif'), linear-gradient(to bottom, null, null);
    background-size: cover, auto;
  }

  .bold-text-6 {
    max-width: none;
  }

  .image-2 {
    min-height: 450px;
    display: none;
  }

  .image-3 {
    width: 90%;
    margin-left: 0;
  }

  .background-decoration-mobile {
    width: auto;
    min-width: auto;
    max-width: 100%;
  }

  .image-2-mobile {
    min-height: 450px;
    display: inline-flex;
  }

  .menu-button-2 {
    margin-right: auto;
    padding: 16px;
  }

  .menu-button-2.w--open {
    background-color: var(--color--bg--surface-primary);
  }

  .icon-5 {
    color: var(--color--text--body);
    display: none;
  }

  .faq-question {
    justify-content: space-between;
    align-items: center;
  }

  .lottie-animation-2 {
    width: 24px;
  }

  .case-study-title-2-wrapper {
    grid-row-gap: 16px;
  }

  .hero-image-wrapper {
    height: auto;
  }

  .challenge-grid.target-users, .challenge-grid.product-strategy {
    flex-flow: column;
  }

  .challenge-card-content {
    height: 140px;
    padding: 22px 20px;
  }

  .challenge-card.target-users, .challenge-card.product-strategy {
    max-width: none;
  }

  .challenge-card.product-strategy.hidden {
    display: none;
  }

  .challenge-container.product-strategy {
    margin-top: 32px;
  }

  .process-steps {
    flex-flow: column;
  }

  .connecting-line-desktop {
    width: 1px;
    height: 92%;
    display: block;
    inset: 0% auto 0% 24px;
  }

  .connecting-line-desktop._2.mobile {
    display: none;
  }

  .step-description-2 {
    padding-left: 0;
    padding-right: 0;
  }

  .step-description-text {
    text-align: left;
  }

  .improvement-image-1 {
    min-height: auto;
  }

  .responsive-ui-image, .tamkeen-sticker-image {
    display: none;
  }

  .growth-card {
    padding: 22px 20px;
  }

  .process-last-2-steps-wrapper-mobile {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
    position: static;
  }

  .process-step--last-3 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: row;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .process-step--first-3 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: row;
    justify-content: center;
    align-items: flex-start;
  }

  .step-content-wrapper {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
  }

  .info-mobile {
    flex: 1;
    align-items: stretch;
    min-width: 50.5%;
    margin-right: auto;
    padding-right: 0;
    display: flex;
  }

  .info-case-study-desktop {
    flex: 0 auto;
    align-items: stretch;
    width: auto;
    min-width: 40%;
    margin-right: auto;
    padding-right: 0;
    display: none;
  }

  .image-4 {
    max-width: 80%;
  }

  .image-4.clinet-pr-2 {
    width: 100%;
  }

  .tamkeen-sticker-image--mobile {
    aspect-ratio: auto;
    width: 100%;
    max-width: none;
    display: inline-flex;
  }

  .responsive-ui-image-mobile {
    width: 100%;
    max-width: none;
    display: inline-flex;
  }

  .product-experience-image {
    min-height: auto;
  }

  .ix-sticker-sheet-image {
    display: none;
  }

  .ix-sticker-image--mobile {
    aspect-ratio: auto;
    width: 100%;
    max-width: none;
    display: inline-flex;
  }

  .tb-sticker-sheet-image-copy {
    display: none;
  }
}