@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900;1000&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,900;1,800&family=Roboto:wght@100;300;400;500;700;900&display=swap');

@font-face {
    font-family: "Arial-Regular";
    font-style: normal;
    font-weight: 400;
    src: url("https://fonts.animaapp.com/Arial-Regular") format("truetype");

    
  }
  
  @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic,600|Playfair+Display:400,700|Roboto:400,700,500,600|Lato:400,700,400italic|Inter:400,700|Nunito:400,700");
  
  @font-face {
    font-family: "Arial-Bold";
    font-style: normal;
    font-weight: 700;
    src: url("https://fonts.animaapp.com/Arial-Bold") format("truetype");
  }
/* for  800 600 300 */
  /* .preloader{
    align-items: center;
    background: rgb(23, 22, 22);
    display: flex;
    height: 100vh;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    transition: opacity 0.3s linear;
    width: 100%;
    z-index: 9999;
    opacity: 1;
    transform: opacity 1s linear;
  }
  --silent 
  .preloader .loaded{
    opacity: 0;
    pointer-events: none;
  } */
 
  
  .lo-sojascreen {
    align-items: flex-start;
    background-color: #fff;
    border: 1px none;
    display: flex;
    height: 15010px;
    overflow: hidden;
    width: 1512px;
    
  }
  
  .hidden,
  .hidden * {
    pointer-events: none;
    visibility: hidden;
  }
  
  .overlap-group14 {
    height: 26803px;
    position: relative;
    width: 1512px;
  }
  
  .title {
    color: #353738;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 96px;
    font-weight: 400;
    height: 78px;
    left: 219px;
    letter-spacing: 0;
    line-height: 36px;
    position: absolute;
    text-align: center;
    top: 13742px;
    width: 290px;
  }
  
  .valign-text-middle {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .footer {
    align-items: flex-start;
    background-color: 
  transparent;
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: flex-start;
    left: 0;
    min-height: 292px;
    position: absolute;
    top: 14745px;
    width: 1512px;
  }
  
  .div-17 {
    align-items: center;
    background-color: 
  #f3f7f8;
    display: flex;
    gap: 48px;
    height: 204px;
    min-width: 1512px;
    padding: 0 183.4px;
  }
  
  .div-22 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 124px;
    width: 747px;
  }
  
  .see-more-of-my-work {
    color: 
#9fa6a9;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 600;
  font-weight: 600;
  height: 18px;
  letter-spacing: 0;
  line-height: 21px;
  white-space: nowrap;
  }
  
  .div-23 {
    align-items: flex-start;
    background-color: #fff;
    box-shadow: 0px 20px 20px -20px 
  #0000001a;
    cursor: pointer;
    display: flex;
    width: 362px;
  }
  
  .div-24 {
    background-color: #fff;
    height: 60px;
    width: 302px;
  }
  
  .qat-ph9-ek-sp-xc-nx-jtpng {
    height: 60px;
    object-fit: cover;
    width: 60px;
  }
  
  .div-18 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 124px;
    width: 350px;
  }
  
  .div-19 {
    align-items: center;
    display: flex;
    gap: 12px;
    min-width: 182px;
  }
  
  .div-20 {
    align-items: flex-start;
    background-color: var(--athens-gray);
    border-radius: 30px;
    display: flex;
    overflow: hidden;
    width: 60px;
  }
  
  .basma-profile-pic_xoxpng-1 {
    height: 60px;
    object-fit: cover;
    width: 60px;
  }
  
  .overlap-group-3 {
    height: 39px;
    margin-bottom: 5.91px;
    position: relative;
    width: 240px;
  }
  
  .product-designer-1 {
    color: #353738;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  height: 17px;
  left: 0;
  letter-spacing: 0;
  line-height: 21px;
  position: absolute;
  top: 22px;
  white-space: nowrap;
  width: 108px;
  font: italic;
  }
  
  .wale-durojaye-ayotomiwa-1 {
    color: #353738;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    height: 22px;
    left: 0;
    letter-spacing: 0;
    line-height: 18px;
    position: absolute;
    top: 0;
    width: 240px;
  }
  
  .div-21 {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    height: 40px;
    min-width: 174px;
  }
  
  .a-5 {
    align-items: flex-start;
    background-color: var(--white);
    border: 1px solid;
    border-color: var(--athens-gray-2);
    border-radius: 18px;
    cursor: pointer;
    display: flex;
    padding: 10px 19.42px 12px 17px;
    width: fit-content;
  }
  
  .place-1 {
    letter-spacing: 0;
  line-height: 18px;
  margin-top: 2px;
  white-space: nowrap;
  width: fit-content;
  font: 700;
  font-size: 11px;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color:#778390;
  text-transform: uppercase;
  align-items: center;
  display: flex;
  }
  
  .a-6 {
    align-items: flex-start;
    background-color: #fff;
    border: 1px solid;
    border-color: #EDF0F1;
    border-radius: 18px;
    display: flex;
    padding: 10px 19.36px 12px 17px;
    width: fit-content;
  }
  
  .resum {
    letter-spacing: 0;
    line-height: 18px;
    margin-top: -1px;
    white-space: nowrap;
    width: fit-content;
  }
  
  .div-25 {
    height: 60px;
    width: 1512px;
    background: #1D2227;
  }
  .div-25 ul
  {
    color: #fff;
    display: flex;
    position: absolute;
    gap: 15px;
    list-style: none;
    align-items: center;
    justify-content: center;
    top: 220px;
    right: 699px;
    left: 699px;
    padding: 0px;
    
  }
  .fa-behance:hover{
    color: #1769ff;
    transition: 1s;
    transform: rotateY(360deg);
  }
  .fa-twitter:hover{
    color: #1DA1F2;
    transition: 1s;
    transform: rotateY(360deg);
  }
  .fa-instagram:hover
  {
    color: #c13584;
    transition: 1s;
    transform: rotateY(360deg);
  }
  
  .fa-linkedin:hover
  {
    color:  #0077B5;
    transition: 1s;
    transform: rotateY(360deg);
  }


  .introduction-1 {
    height: 80px;
    left: 465px;
    letter-spacing: 0;
    line-height: 68px;
    position: absolute;
    text-align: center;
    top: 1300px;
    white-space: nowrap;
    width: 582px;
    font-family: 'Playfair Display', serif;
    font-size: 60px;
    color: #fff;
  }
  
  .group-6 {
    align-items: flex-start;
    display: flex;
    gap: 50px;
    height: 72px;
    left: 226px;
    min-width: 416px;
    position: absolute;
    top: 14242px;
  }
  
  .rectangle-3 {
    background-color: 
  #101010;
    border-radius: 15px;
    box-shadow: 4px 4px 12px 
  #00000040;
    height: 72px;
    width: 183px;
  }
  
  .rectangle-5 {
    background-color: 
  #ffb900;
    border-radius: 15px;
    box-shadow: 4px 4px 12px 
  #00000040;
    height: 72px;
    width: 183px;
  }
  
  .frame-1 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    left: 0;
    min-height: 26803px;
    position: absolute;
    top: 0;
    width: 1512px;
  }
  
  .i-phone-13-pro-2 {
    height: 651px;
    margin-left: 239px;
    margin-top: 205px;
    object-fit: cover;
    width: 322px;
  }
  
  .iphone-pro-container-3 {
    margin-left: 27.62px;
    margin-top: 205px;
  }
  
  .lo-soja .iphone-pro-container-4 {
    align-items: flex-start;
    align-self: center;
    display: flex;
    gap: 418px;
    min-width: 1062px;
  }
  
  .i-phone-13-pro-5 {
    height: 650px;
    width: 322px;
  }
  
  .i-phone-13-pro-1 {
    height: 650px;
    object-fit: cover;
    width: 322px;
  }
  
  .iphone-pro-container {
    align-items: flex-start;
    align-self: center;
    display: flex;
    gap: 418px;
    margin-left: 28px;
    margin-top: 105px;
    min-width: 1062px;
  }
  
  .i-phone-13-pro {
    height: 651px;
    object-fit: cover;
    width: 322px;
  }
  
  .iphone-pro-container-1 {
    margin-left: 27.62px;
    margin-top: 204px;
  }
  
  .i-phone-13-pro-6 {
    height: 650px;
    margin-left: 239px;
    margin-top: 205px;
    width: 322px;
  }
  
  .iphone-pro-container-2 {
    margin-left: 28px;
    margin-top: 205px;
  }
  
  .flex-row {
    align-items: flex-start;
    display: flex;
    gap: 16514px;
    height: 6612px;
    margin-left: -17306px;
    min-width: 18818px;
  }
  
  .flex-col {
    align-items: center;
    display: flex;
    flex-direction: column;
    min-height: 6612px;
    width: 1512px;
  }
  
  .tion-container {
    background-image: url(https://anima-uploads.s3.amazonaws.com/projects/63c95053dd437d8e499e5775/releases/63c95165849bf3e1deaa69cd/img/8b1zwjmpyvxt5hlc-jpg-1.png);
    background-size: 100% 100%;
    height: 168px;
    margin-top: 173px;
    position: relative;
    width: 1512px;
  }
  
  .ideation-testing-1 {
    height: 80px;
    left: 465px;
    letter-spacing: 0;
    line-height: 68px;
    position: absolute;
    text-align: center;
    top: 50px;
    white-space: nowrap;
    width: 582px;
    font-family: 'Playfair Display', serif;
    font-size: 60px;
    color: #fff;
  }
  
  .divsection-16before {
    background-color: 
  #253238d9;
    height: 168px;
    left: 0;
    position: absolute;
    top: 0;
    width: 1512px;
  }
  
  .overlap-group5 {
    align-items: flex-start;
    background-image: url(https://anima-uploads.s3.amazonaws.com/projects/63c95053dd437d8e499e5775/releases/63c95165849bf3e1deaa69cd/img/hw9w6cra8vigtvj7-jpg-1.png);
    background-size: 100% 100%;
    display: flex;
    margin-top: 70px;
    min-width: 1512px;
  }
  
  .divsection-6before {
    height: 168px;
    width: 1512px;
  }
  
  .overlap-group13 {
    height: 745px;
    position: relative;
    width: 1512px;
  }
  
  .divsection-0 {
    align-items: flex-start;
    background: url(https://anima-uploads.s3.amazonaws.com/projects/63c95053dd437d8e499e5775/releases/63c95165849bf3e1deaa69cd/img/div-section-0-1.png);
    background-position: 50% 50%;
    background-size: cover;
    display: flex;
    height: 745px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 1512px;
  }
  
  .overlap-group {
    height: 766px;
    margin-top: -7px;
    position: relative;
    width: 1512px;
  }
  
  .rectangle-1 {
    background: black;
    height: 759px;
    left: 0;
    opacity: 0.3;
    position: absolute;
    top: 0;
    width: 1512px;
  }
  
  .div {
    height: 570px;
    left: 36px;
    position: absolute;
    top: 196px;
    width: 1440px;
  }
  @media screen and(max-width:800px) {
    .div {
      height: 570px;
      left: 36px;
      position: absolute;
      top: 196px;
      width: 1440px;
    }
    
  }
  .group-1 {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 11px;
    left: 257px;
    min-height: 153px;
    position: absolute;
    top: 336px;
    width: 1003px;
  }
  
  .a-market-app-that-al {
    color: #fff;
    font-family: 'Roboto' sans-serif;
    font-size: 22px;
    font-weight: 400;
    height: 25px;
    letter-spacing: 0;
    line-height: 25px;
    margin-right: 4px;
    text-align: center;
    white-space: nowrap;
    width: 999px;
  }
  
  .lo-soja-1 {
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: 88px;
    font-weight: 700;
    height: 117px;
    letter-spacing: 0;
    line-height: 91px;
    margin-right: 5px;
    text-align: center;
    width: 762px;
  }
  
  .div-1 {
    align-items: center;
    display: flex;
    gap: 10px;
    height: 50px;
    left: 183px;
    min-width: 152px;
    position: absolute;
    top: 29px;
  }
  
  .overlap-group-1 {
    height: 34px;
    margin-bottom: 6px;
    position: relative;
    width: 186px;
  }
  
  .wale-durojaye-ayotomiwa {
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    height: 20px;
    left: 0;
    letter-spacing: 0;
    line-height: 16px;
    position: absolute;
    top: 0;
    width: 186px;
  }
  
  .wale-durojaye-ayotomiw {
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    height: 20px;
    letter-spacing: 0;
    line-height: 16px;
    position: absolute;
    top: 0;
    width: 186px;
  }
  
  .product-designer {
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    height: 15px;
    left: 0;
    letter-spacing: 0;
    line-height: 18px;
    position: absolute;
    top: 19px;
    white-space: nowrap;
    width: 87px;
  }
  
  .div-2 {
    align-items: flex-start;
    background-color: var(--athens-gray);
    border-radius: 25px;
    display: flex;
    overflow: hidden;
    width: 50px;
  }
  
  .basma-profile-pic_xoxpng {
    height: 50px;
    object-fit: cover;
    width: 50px;
  }
  
  .overlap-group10 {
    height: 168px;
    margin-top: 91px;
    position: relative;
    width: 1512px;
  }
  
  .overlap-group8 {
    align-items: flex-start;
    background-image: url(https://anima-uploads.s3.amazonaws.com/projects/63c95053dd437d8e499e5775/releases/63c95165849bf3e1deaa69cd/img/h8u2dfftbjepecbg-jpg.png);
    background-size: 100% 100%;
    display: flex;
    height: 168px;
    left: 0;
    min-width: 1512px;
    position: absolute;
    top: 0;
  }
  
  .divsection-26before {
    height: 168px;
    width: 1512px;
  }
  
  .wireframes-1 {
    height: 80px;
    left: 465px;
    letter-spacing: 0;
    line-height: 68px;
    position: absolute;
    text-align: center;
    top: 43px;
    white-space: nowrap;
    width: 582px;
    font-family: 'Playfair Display', serif;
    font-size: 60px;
    color: #fff;
  }
  
  .div-10 {
    align-items: flex-start;
    display: flex;
    gap: 138px;
    height: 630px;
    margin-top: 100px;
    min-width: 1440px;
    padding: 0 147.4px;
  }
  
  .i-phone-13-pro-3 {
    height: 591px;
    margin-top: -7px;
    width: 292px;
  }
  
  .div-11 {
    align-items: flex-start;
    align-self: center;
    display: flex;
    flex-direction: column;
    min-height: 425px;
    width: 648px;
  }
  
  .text {
    height: 30px;
    letter-spacing: 0;
    line-height: 30px;
    margin-top: 66px;
    white-space: nowrap;
  }
  
  .introduction {
    font-family: 'Playfair Display',serif;
    color: #282A2B;
    font: bold;
    font-size: 30px;
    font-weight: 700;
    height: 28px;
    letter-spacing: 0;
    line-height: 36px;
    text-align: center;
    white-space: nowrap;
    width: 166px;
  }
  
  .lo-soja-is-a-mobile {
    letter-spacing: 0;
    line-height: 36px;
    margin-left: -0.42px;
    margin-top: 26px;
    min-height: 184px;
    width: 619px;
  }
  
  .span2 {
    text-decoration: underline;
  }
  
  .overlap-group11 {
    background-image: url(https://anima-uploads.s3.amazonaws.com/projects/63c95053dd437d8e499e5775/releases/63c95165849bf3e1deaa69cd/img/qiji02nbo3jm2wpu-jpg-1.png);
    background-size: 100% 100%;
    height: 168px;
    margin-top: 51px;
    position: relative;
    width: 1512px;
  }
  
  .divsection {
    height: 168px;
    left: 0;
    position: absolute;
    top: 0;
    width: 1512px;
  }
  
  .user-research-1 {
    height: 80px;
    left: 494px;
    line-height: 68px;
    position: absolute;
    text-align: center;
    top: 39px;
    width: 523px;
    font: bold;
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: 60px;
  }
  
  .lo-soja .user-research-3 {
    letter-spacing: 0;
    white-space: nowrap;
  }
  
  .overlap-group12 {
    height: 918px;
    margin-top: 39px;
    position: relative;
    width: 1440px;
  }
  
  .div-12 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    left: 346px;
    min-height: 774px;
    position: absolute;
    top: 0;
    width: 747px;
  }
  
  .user-research-2 {
    height: 40px;
    line-height: 36px;
    margin-left: -0.28px;
    margin-top: -1px;
    font: bold;
    font-size: 30px;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
  }
  
  .i-tracked-down-20-ma {
    color: #353738;
    font-size: 18px;
    font-weight: 600;
    height: 60px;
    letter-spacing: 0;
    line-height: 30px;
    margin-left: -0.28px;
    margin-top: 20px;
    width: 701px;
    font-family: 'Roboto', sans-serif;
    font: medium;
  }
  
  .find-out-if-they-can {
    letter-spacing: 0;
    line-height: 30px;
    margin-left: -9.28px;
    min-height: 32px;
    white-space: nowrap;
  }
  
  .div-item-1 {
    height: 40px;
    line-height: 36px;
    margin-left: -0.28px;
    margin-top: 15px;
    font: bold;
    font-size: 30px;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
  }
  .div-item-8 {
    height: 40px;
    line-height: 36px;
    margin-left: -0.28px;
    margin-top: 15px;
    font: bold;
    font-size: 30px;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
  }
  
  .overlap-group6 {
    height: 62px;
    margin-left: -9.28px;
    position: relative;
    width: 743px;
  }
  
  .determine-whether-th {
    left: 0;
    letter-spacing: 0;
    line-height: 30px;
    position: absolute;
    top: 0;
    white-space: nowrap;
    width: 743px;
  }
  
  .find-out-if-it-is-ea {
    left: 0;
    letter-spacing: 0;
    line-height: 30px;
    position: absolute;
    top: 30px;
    white-space: nowrap;
    width: 743px;
  }
  
  .find-out-what-frustr {
    letter-spacing: 0;
    line-height: 30px;
    min-height: 32px;
    white-space: nowrap;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 400;
    margin: 0;
  }
  
  .group-2 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    margin-left: -9.28px;
    margin-top: 20px;
    min-height: 247px;
    width: 753px;
  }
  
  .x75-agreed-to-rely-o {
    letter-spacing: 0;
    line-height: 30px;
    min-height: 62px;
    width: 743px;
  }
  
  .they-all-agreed-that {
    letter-spacing: 0;
    line-height: 30px;
    min-height: 32px;
    white-space: nowrap;
  }
  
  .x90-of-them-said-goi {
    letter-spacing: 0;
    line-height: 30px;
    min-height: 32px;
    white-space: nowrap;
  }
  
  .they-all-agreed-that-1 {
    letter-spacing: 0;
    line-height: 30px;
    min-height: 57px;
    width: 743px;
  }
  
  .x95-said-they-dont {
    letter-spacing: 0;
    line-height: 30px;
    margin-top: 32px;
    min-height: 32px;
    white-space: nowrap;
  }
  
  .div-13 {
    align-items: flex-end;
    display: flex;
    gap: 48px;
    height: 234px;
    left: 0;
    min-width: 1440px;
    padding: 0 147.4px;
    position: absolute;
    top: 684px;
  }
  
  .div-14 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 26px;
    min-height: 234px;
    width: 350px;
  }
  
  .design-challenge {
    height: 40px;
  letter-spacing: 0;
  line-height: 36px;
  margin-top: -3px;
  white-space: nowrap;
  font: bold;
  font-size: 30px;
  font-family: 'Playfair Display',sans-serif;
  font-weight: 700;
  }
  
  .how-can-i-ensure-tha {
    letter-spacing: 0;
  line-height: 30px;
  min-height: 141px;
  width: 345px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 18px;
  }
  
  .div-item-2 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 26px;
    margin-bottom: -24px;
    min-height: 234px;
    width: 350px;
  }
  
  .impact {
    height: 40px;
  letter-spacing: 0;
  line-height: 36px;
  margin-top: -25px;
  white-space: nowrap;
  font: bold;
  font-size: 30px;
  font-family: 'Playfair Display',sans-serif;
  font-weight: 700;
  }
  
  .when-this-app-is-rel {
    letter-spacing: 0;
    line-height: 30px;
    margin-left: 0.16px;
    min-height: 132px;
    width: 345px;
  }
  
  .main-audience-expat {
    letter-spacing: 0;
    line-height: 30px;
    min-height: 81px;
    width: 346px;
  }
  
  .target-audience {
    height: 40px;
  letter-spacing: 0;
  line-height: 36px;
  margin-top: -25px;
  white-space: nowrap;
  font: bold;
  font-size: 30px;
  font-family: 'Playfair Display',sans-serif;
  font-weight: 700;
  }
  
  .overlap-group9 {
    height: 168px;
    margin-top: 206px;
    position: relative;
    width: 1512px;
  }
  
  .prototyping-1 {
    height: 80px;
    left: 465px;
    letter-spacing: 0;
    line-height: 68px;
    position: absolute;
    text-align: center;
    top: 50px;
    white-space: nowrap;
    width: 582px;
    font-family: 'Playfair Display', serif;
    font-size: 60px;
    color: #fff;  
  }
  
  .divsection-54 {
    align-items: flex-start;
    background-image: url(https://anima-uploads.s3.amazonaws.com/projects/63c95053dd437d8e499e5775/releases/63c95165849bf3e1deaa69cd/img/div-section-54.png);
    background-position: 50% 50%;
    background-size: cover;
    display: flex;
    height: 168px;
    left: 0;
    min-width: 1512px;
    position: absolute;
    top: 0;
  }
  
  .d45a-h-pjs-krc-era9-zjpg {
    height: 168px;
    width: 1512px;
  }
  
  .iphone-pro-front-container {
    align-items: flex-start;
    display: flex;
    gap: 392px;
    margin-left: 2px;
    margin-top: 192px;
    min-width: 1036px;
  }
  
  .i-phone-13-pro-front {
    align-items: flex-start;
    background-image: url(./first.png);
    background-size: 100% 100%;
    display: flex;
    height: 650px;
    justify-content: flex-end;
    min-width: 322px;
    padding: 14.9px 16.9px;
  }
  .i-phone-13-pro-front-2 {
    align-items: flex-start;
    background-image: url(./second.png);
    background-size: 100% 100%;
    display: flex;
    height: 650px;
    justify-content: flex-end;
    min-width: 322px;
    padding: 14.9px 16.9px;
  }
  .i-phone-13-pro-front-3 {
    align-items: flex-start;
    background-image: url(./last.png);
    background-size: 100% 100%;
    display: flex;
    height: 650px;
    justify-content: flex-end;
    min-width: 322px;
    padding: 14.9px 16.9px;
  }
  .lo-soja .mockup-4 {
    background-size: 100% 100%;
    height: 620px;
    width: 287px;
  }
  
  .mockup-1 {
    background-image: url(https://anima-uploads.s3.amazonaws.com/projects/63c95053dd437d8e499e5775/releases/63c95165849bf3e1deaa69cd/img/mask-group-1.png);
  }
  
  .mockup {
    background-image: url(https://anima-uploads.s3.amazonaws.com/projects/63c95053dd437d8e499e5775/releases/63c95165849bf3e1deaa69cd/img/mask-group.png);
    background-size: 100% 100%;
    height: 620px;
    width: 287px;
  }
  
  .iphone-pro-front-container-1 {
    align-items: flex-start;
    display: flex;
    gap: 392px;
    height: 665px;
    margin-left: 2px;
    margin-top: 148px;
    min-width: 1036px;
  }
  
  .mockup-3 {
    background-image: url(https://anima-uploads.s3.amazonaws.com/projects/63c95053dd437d8e499e5775/releases/63c95165849bf3e1deaa69cd/img/mask-group-3.png);
  }
  
  .i-phone-13-pro-front-1 {
    align-items: flex-start;
    align-self: flex-end;
    background-image: url(./third.png);
    background-size: 100% 100%;
    display: flex;
    height: 650px;
    justify-content: flex-end;
    min-width: 322px;
    padding: 14.9px 16.9px;
  }
  
  .mockup-2 {
    background-image: url(https://anima-uploads.s3.amazonaws.com/projects/63c95053dd437d8e499e5775/releases/63c95165849bf3e1deaa69cd/img/mask-group-2.png);
  }
  
  .divsection-3 {
    background-color: 
  #eaeef1;
    height: 20px;
    margin-top: 50px;
    width: 1512px;
  }
  
  .div-4 {
    align-items: center;
    background-color: var(--white);
    display: flex;
    height: 146px;
    margin-right: 0.02px;
    margin-top: 70px;
    min-width: 1145px;
  }
  
  .overlap-group4 {
    height: 106px;
    margin-left: -5px;
    position: relative;
    width: 1151px;
  }
  
  .overlap-group2 {
    height: 106px;
    left: 635px;
    position: absolute;
    top: 0;
    width: 286px;
  }
  
  .divbefore {
    background-color: #D1D9DD;
    height: 2px;
    left: 0;
    position: absolute;
    top: 23px;
    width: 115px;
  }
  
  .a-2 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 29px;
    left: 57px;
    min-height: 106px;
    padding: 0 27.5px;
    position: absolute;
    top: 0;
    width: 229px;
  }
  
  .wireframes {
    height: 28px;
  letter-spacing: 0;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
  width: 203px;
  font-family: 'Roboto', sans-serif;
  color: #282A2B;
  font: bold;
  font-size: 24px;
  font-weight: 700;
  }
  
  .div-7 {
    align-items: flex-start;
    align-self: center;
    border: 2px solid;
    border-color: #D1D9DD;
    border-radius: 50%;
    display: flex;
    width: 50px;
    height: 50px;
    justify-content: flex-end;
    padding: 8px 16px;
    top: 0px;
  }
  
  .number {
    height: 28px;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    width: 14px;
    font-family: 'Roboto', sans-serif;
    color: #282A2B;
    font: bold;
    font-weight: 700;
    font-size: 24px;
  }
  
  .overlap-group-2 {
    height: 106px;
    left: 177px;
    position: absolute;
    top: 0;
    width: 286px;
  }
  
  .a {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 29px;
    left: 59px;
    min-height: 106px;
    position: absolute;
    top: 0;
    width: 227px;
  }
  
  .user-research {
    height: 28px;
    letter-spacing: 0;
    line-height: 24px;
    text-align: center;
    white-space: nowrap;
    width: 203px;
    font-family: 'Roboto', sans-serif;
    color: #282A2B;
    font: bold;
    font-size: 24px;
    font-weight: 700;
  }
  
  .div-5 {
    align-items: flex-start;
    border: 2px solid #D1D9DD;
    border-radius: 50%;
    display: flex;
    width: 50px;
    height: 50px;
    justify-content: flex-end;
    margin-left: 0.03px;
    padding: 8px 16px;
    top: 0px;
  }
  
  .overlap-group1 {
    height: 106px;
    left: 406px;
    position: absolute;
    top: 0;
    width: 286px;
  }
  
  .a-1 {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 29px;
    left: 57px;
    min-height: 106px;
    position: absolute;
    top: 0;
    width: 229px;
  }
  
  .div-6 {
    align-items: flex-start;
    border: 2px solid;
    border-color: #D1D9DD;
    border-radius: 50%;
    display: flex;
    width: 50px;
    height: 50px;
    justify-content: flex-end;
    padding: 8px 16px;
    top: 0px;
  }
  
  .ideation-testing {
    height: 28px;
  letter-spacing: 0;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
  width: 203px;
  font-family: 'Roboto', sans-serif;
  color: #282A2B;
  font: bold;
  font-size: 24px;
  font-weight: 700;
  }
  
  .overlap-group3 {
    height: 106px;
    left: 864px;
    position: absolute;
    top: 0;
    width: 286px;
  }
  
  .a-3 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 29px;
    left: 57px;
    min-height: 106px;
    padding: 0 31.5px;
    position: absolute;
    top: 0;
    width: 229px;
  }
  
  .div-8 {
    align-items: flex-start;
    align-self: center;
    border: 2px solid;
    border-color: var(--mischka);
    border-radius: 24px;
    display: flex;
    height: 48px;
    justify-content: flex-end;
    min-width: 48px;
    padding: 8px 16.9px;
  }
  
  .prototyping {
    height: 28px;
  letter-spacing: 0;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
  width: 203px;
  font-family: 'Roboto', sans-serif;
  color: #282A2B;
  font: bold;
  font-size: 24px;
  font-weight: 700;
  }
  
  .a-4 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 29px;
    left: 0;
    min-height: 106px;
    padding: 0 30px;
    position: absolute;
    top: 0;
    width: 229px;
  }
  
  .intorduction {
    height: 28px;
  letter-spacing: 0;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
  width: 203px;
  font-family: 'Roboto', sans-serif;
  color: #282A2B;
  font: bold;
  font-size: 24px;
  font-weight: 700;
  }
  
  .div-9 {
    align-items: flex-start;
    align-self: center;
    border: 2px solid;
    border-color: #D1D9DD;
    border-radius: 50%;
    display: flex;
    width: 50px;
    height: 50px;
    justify-content: flex-end;
    padding: 8px 16.9px;
    top: 0px;
  }
  .div-5:hover,
.div-7:hover ,
.div-6:hover,
.div-9:hover
{
  cursor: pointer;
  color: white;
  background-color: #BB91FF;
}
.div-7:hover h1
{
  color: white;
}
.div-6:hover h1
{
  color: white;
}
.div-5:hover h1
{
  color: white;
}
.div-9:hover h1
{
  color: white;
}
  .div-15 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    margin-top: 98px;
    min-height: 567px;
    width: 748px;
  }
  
  .competitive-analysis {
    height: 40px;
    letter-spacing: 0;
    line-height: 36px;
    margin-left: 25.72px;
    margin-top: 104px;
    white-space: nowrap;
    font: bold;
    font-size: 30px;
    font-family: 'Playfair Display',sans-serif;
    font-weight: 700;
  }
  
  .place {
    height: 40px;
    letter-spacing: 0;
    line-height: 36px;
    margin-left: 25.72px;
    margin-top: -20px;
    white-space: nowrap;
    font-family: 'Playfair Display', serif;
    font: bold;
    font-size: 30px;
    font-weight: 700;
  }
  
  .solutions {
    height: 40px;
    letter-spacing: 0;
    line-height: 36px;
    margin-left: 25.72px;
    margin-top: 59px;
    white-space: nowrap;
    font: bold;
    font-size: 30px;
    font-family: 'Playfair Display',sans-serif;
    font-weight: 700;
  }
  
  .group-2-1 {
    align-items: flex-start;
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    margin-right: -18.31px;
    margin-top: 11px;
    min-height: 122px;
    width: 750px;
  }
  
  .allowing-users-to-se {
    letter-spacing: 0;
    line-height: 30px;
    min-height: 32px;
    white-space: nowrap;
  }
  
  .users-will-be-able-t {
    letter-spacing: 0;
    line-height: 30px;
    min-height: 32px;
    white-space: nowrap;
  }
  
  .allowing-users-acces {
    letter-spacing: 0;
    line-height: 30px;
    min-height: 58px;
    width: 744px;
  }
  
  .i-began-thinking-abo {
    align-self: center;
  letter-spacing: 0;
  line-height: 30px;
  margin-left: 0.02px;
  margin-top: 10px;
  min-height: 100px;
  width: 696px;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 400;
  }
  
  .because-the-applicat {
    align-self: center;
    letter-spacing: 0;
    line-height: 30px;
    margin-left: 11.02px;
    margin-top: 26px;
    min-height: 231px;
    width: 707px;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 400;
  }
  
  .div-3 {
    align-items: flex-start;
    display: flex;
    gap: 48px;
    height: 73px;
    margin-top: 70px;
    min-width: 1440px;
    padding: 0 147.4px;
  }
  
  .div-item {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 73px;
    padding: 1px 0;
    width: 250px;
  }
  
  .tools {
    height: 21px;
  letter-spacing: 0;
  line-height: 30px;
  margin-top: 2px;
  white-space: nowrap;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  color: #353738;
  font: 900;
  }
  
  .figma-adobe-xd {
    height: 19px;
  letter-spacing: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 19px;
  white-space: nowrap;
  color: #7B7E80;
  }
  
  .duration {
    height: 21px;
  letter-spacing: 0;
  line-height: 30px;
  margin-top: 2px;
  white-space: nowrap;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  color: #353738;
  font: 900;
  }
  
  .address {
    height: 19px;
  letter-spacing: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 19px;
  white-space: nowrap;
  color: #7B7E80;
  }
  
  .team {
    height: 21px;
  letter-spacing: 0;
  line-height: 30px;
  margin-top: 2px;
  white-space: nowrap;
   font-family: 'Roboto', sans-serif;
  font-size: 18px;
  color: #353738;
  font: 900;
  }
  
  .solo-designer {
    height: 19px;
  letter-spacing: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 19px;
  white-space: nowrap;
  color: #7B7E80;
  }
  
  .role {
    height: 21px;
    letter-spacing: 0;
    line-height: 30px;
    margin-top: 2px;
    white-space: nowrap;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    color: #353738;
    font: 400;
  }
  
  .product-designer-ux-researcher {
    height: 19px;
  letter-spacing: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 19px;
  white-space: nowrap;
  color: #7B7E80;
  }
  
  .rectangle {
    height: 706px;
    margin-top: 252px;
    width: 792px;
  }
  
  .flex-row-1 {
    align-items: flex-start;
    display: flex;
    margin-left: -17684px;
    margin-top: 450px;
    min-width: 18985px;
  }
  
  .i-phone-13-pro-4 {
    height: 651px;
    margin-left: 418px;
    margin-top: 14px;
    object-fit: cover;
    width: 322px;
  }
  
  .i-phone-13-pro-1-1 {
    height: 651px;
    margin-left: 17067px;
    margin-top: 14px;
    object-fit: cover;
    width: 322px;
  }
  
  .rectangle-2 {
    height: 764px;
    width: 856px;
  }
  
  .group-3 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 117px;
    left: 226px;
    min-height: 529px;
    position: absolute;
    top: 13893px;
    width: 1030px;
  }
  
  .regular-1 {
    align-self: flex-end;
    font-family: Arial;
    font-size: 40px;
    font-weight: 400;
    text-align: left;
    color: #353738;
    font-weight: 400;
    height: 36px;
    letter-spacing: 0;
    line-height: 36px;
    margin-right: 10px;
    min-width: 141px;
    white-space: nowrap;
  }
  
  .flex-row-2 {
    align-items: center;
    display: flex;
    gap: 204px;
    height: 376px;
    min-width: 994px;
  }
  
  .flex-col-1 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 62px;
    min-height: 376px;
    width: 701px;
  }
  
  .flex-row-3 {
    align-items: center;
    display: flex;
    min-width: 437px;
  }
  
  .bold {
    height: 36px;
  letter-spacing: 0;
  line-height: 36px;
  margin-left: 56px;
  min-width: 89px;
  white-space: nowrap;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 40px;
  }
  
  .ellipse-2 {
    background-color: 
  #84888b;
  }
  
  .lo-soja  {
    border-radius: 10.5px;
    height: 21px;
    margin-bottom: 1px;
    width: 21px;
  }
  .ellipse
{
  border-radius: 10.5px;
  height: 21px;
  margin-bottom: 1px;
  width: 21px;
}

  .ellipse-1 {
    background-color: #353738;
    margin-left: 55px;
  }
  
  .regular {
    height: 36px;
    letter-spacing: 0;
    line-height: 36px;
    margin-left: 55px;
    min-width: 141px;
    white-space: nowrap;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 40px;
  }
  
  .a-b-c-d-e-f-g-h-i-j {
    letter-spacing: 0;
  line-height: 50px;
  min-height: 278px;
  width: 701px;
  font-weight: 400;
  font-size: 40px;
  font-family: Arial, Helvetica, sans-serif;
  }
  
  .bold-1 {
    color:  #353738;
    font-weight: 700;
    height: 36px;
    letter-spacing: 0;
    line-height: 36px;
    margin-bottom: 2px;
    min-width: 89px;
    white-space: nowrap;
    font-family: Arial;
    font-size: 40px;
    font-weight: 700;
    text-align: left;

  }
  
  .after-checkout-the {
    left: 635px;
    letter-spacing: 0;
    line-height: 30px;
    position: absolute;
    top: 11400px;
    width: 697px;
    font-family: 'Roboto',sans-serif;
    font-weight: 500;
    font-size: 18px;
    font: medium;
  }
  
  .the-app-will-display {
    left: 635px;
    letter-spacing: 0;
    line-height: 30px;
    position: absolute;
    top: 13048px;
    width: 697px;
    font-family: 'Roboto',sans-serif;
    font-weight: 500;
    font-size: 18px;
    font: medium;
  }
  
  .the-user-can-browse {
    left: 635px;
    letter-spacing: 0;
    line-height: 30px;
    position: absolute;
    top: 9820px;
    width: 697px;
    font-family: 'Roboto',sans-serif;
    font-weight: 500;
    font-size: 18px;
    font: medium;
  }
  
  .aa {
    color: #353738;
    font-family: 'Nunito';
    font-size: 256px;
    font-weight: 700;
    left: 1006px;
    letter-spacing: 0;
    line-height: normal;
    position: absolute;
    top: 13781px;
  }
  
  .typography-colors {
    height: 44px;
    left: 408px;
    letter-spacing: 0;
    line-height: 36px;
    position: absolute;
    top: 13601px;
    width: 337px;
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    font-weight: 700;
    text-align: left;

  }
  
  .divsection-58 {
    align-items: flex-end;
    background-color: 
  #fafafa;
    display: flex;
    height: 166px;
    left: 0;
    min-width: 1512px;
    padding: 40px 334.3px;
    position: absolute;
    top: 14579px;
  }
  
  .div-16 {
    align-items: flex-start;
    display: flex;
    overflow: hidden;
    width: 843px;
  }
  
  .ul {
    align-items: flex-start;
    display: flex;
    height: 66px;
    padding: 0 214.3px;
    width: 853px;
  }
  
  .thank-you-for-scrolling-down {
    height: 40px;
    letter-spacing: 0;
    line-height: 36px;
    margin-top: -3px;
    text-align: center;
    white-space: nowrap;
    width: 415px;
    font-family: 'Playfair Display', sans-serif;
    font-weight: 700;
    font-size: 30px;
    color: #353738;
  }
  
  .tomdu-r-logistics {
    color: 
  #475461;
    font-family: 'Roboto' ,sans-serif;
    font-size: 18px;
    font-weight: 400;
    height: 20px;
    left: 654px;
    letter-spacing: 0;
    line-height: 19.2px;
    position: absolute;
    top: 14864px;
    white-space: nowrap;
    width: 163px;
  }
  
  .aa-1 {
    color: #353738;
    font-family: 'Nunito';
    font-size: 256px;
    font-weight: 400;
    left: 1006px;
    letter-spacing: 0;
    line-height: normal;
    position: absolute;
    top: 14107px;
  }
  .wow
  {
    color: 353738;
  font-family: 'Roboto' sans-serif;
  font-size: 26px;
  font-weight: 400;
  font: bold;
  font-weight: 700;
  }
  .nice
  {
    color: 353738;
  font-family: 'Roboto' sans-serif;
  font-size: 26px;
  font-weight: 400;
  }
  .main-audience-expat
  {
    letter-spacing: 0;
  line-height: 30px;
  min-height: 81px;
  width: 346px;
  font-weight: 700;
  font-size: 18px;
  font-family: 'Roboto', sans-serif;
  font: bold;
  }

  @media screen and (max-width: 428px) {
    .hidden,
    .hidden * {
   pointer-events: none;
  visibility: hidden;
}

.lo-sojascreen {
  align-items: flex-start;
  background-color: #fff;
  border: 1px none;
  display: flex;
  flex-direction: column;
  height: 20094px;
  width: 428px;
}

.iphone-13-pro-max-8 .flex {
  align-items: center;
  display: flex;
}

.flex-col {
  flex-direction: column;
  margin-left: -9px;
  min-height: 18552px;
  width: 437px;
}

.overlap-group8 {
  height: 14394px;
  margin-left: 9px;
  position: relative;
  width: 428px;
}

.div-18 {
  align-items: flex-start;
  background-image: url(https://anima-uploads.s3.amazonaws.com/projects/63d488db08bd875715dfcdce/releases/63d48b1fa06de72f520e13d1/img/div-3@2x.png);
  background-position: 50% 50%;
  background-size: cover;
  display: flex;
  height: 267px;
  left: 0;
  min-width: 428px;
  position: absolute;
  top: 0;
}

.overlap-group7 {
  align-items: flex-start;
  background-image: url(https://anima-uploads.s3.amazonaws.com/projects/63d488db08bd875715dfcdce/releases/63d48b1fa06de72f520e13d1/img/rectangle-1-1.svg);
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  gap: 67px;
  min-height: 267px;
  padding: 18px 24px;
  width: 428px;
}

.div-19 {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  min-width: 112px;
}

.div-20 {
  align-items: flex-start;
  background-color: var(--athens-gray-2);
  border-radius: 15px;
  display: flex;
  overflow: hidden;
  width: 30px;
}

.basma-profile-pic_xoxpng {
  height: 30px;
  object-fit: cover;
  width: 30px;
}

.div-21 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 0.5px;
  padding: 0px 0.98px 0px 0px;
  width: fit-content;
}

.wale-durojaye-ayotomiwa {
  color: var(--white);
  font-family: var(--font-family-source_sans_pro);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 12px;
  margin-top: -1px;
  white-space: nowrap;
  width: fit-content;
}

.valign-text-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product-designer {
  color: var(--white);
  font-family: var(--font-family-source_sans_pro);
  font-size: 10px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 15px;
  white-space: nowrap;
  width: fit-content;
}

.div-22 {
  align-items: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-height: 96px;
  width: 342px;
}

.lo-soja {
  color: var(--white);
  font-family: var(--font-family-playfair_display);
  font-size: 40px;
  font-weight: 700;
  height: 36px;
  letter-spacing: 0;
  line-height: 36px;
  margin-top: -2px;
  min-width: 118px;
  text-align: center;
  white-space: nowrap;
}

.a-market-app-that-al {
  color: var(--white);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xs);
  font-weight: 400;
  height: 40px;
  letter-spacing: 0;
  line-height: 20px;
  text-align: center;
  width: 342px;
}

.div {
  align-items: center;
  display: flex;
  flex-direction: column;
  left: 19px;
  min-height: 14394px;
  position: absolute;
  top: 0;
  width: 390px;
}

.i-phone-13-pro {
  height: 651px;
  margin-top: 104px;
  object-fit: cover;
  width: 322px;
}

.overlap-group1 {
  height: 814px;
  margin-top: 95px;
  position: relative;
  width: 342px;
}

.i-phone-13-pro-2 {
  height: 591px;
  left: 25px;
  position: absolute;
  top: 223px;
  width: 292px;
}

.div-12 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 24px;
  left: 0;
  padding: 0px 0px 24px;
  position: absolute;
  top: 0;
  width: fit-content;
}

.lo-soja-is-a-mobile {
  letter-spacing: 0;
  line-height: 21px;
  width: 333.9px;
}

.iphone-13-pro-max-8 .introduction-3 {
  letter-spacing: 0;
  white-space: nowrap;
}

.introduction-2 {
  line-height: 25px;
  margin-top: -1px;
  width: fit-content;
}

.we-aim-to-make-going {
  letter-spacing: 0;
  line-height: 21px;
  width: 339.09px;
}

.p {
  align-items: flex-start;
  display: flex;
  padding: 0px 342px 0px 0px;
  width: fit-content;
}

.text {
  letter-spacing: 0;
  line-height: 21px;
  margin-right: -1px;
  margin-top: -1px;
  white-space: nowrap;
  width: fit-content;
}

.users-will-be-able-t {
  align-self: flex-start;
  height: 42px;
  letter-spacing: 0;
  line-height: 21px;
  margin-left: 14px;
  margin-top: 11px;
  width: 330px;
}

.place {
  align-self: flex-start;
  height: 25px;
  letter-spacing: 0;
  line-height: 25px;
  margin-left: 24px;
  margin-top: 37px;
  white-space: nowrap;
}

.the-app-will-display {
  height: 84px;
  letter-spacing: 0;
  line-height: 21px;
  margin-right: 16.05px;
  margin-top: 45px;
  width: 330px;
}

.overlap-group2 {
  background-image: url(https://anima-uploads.s3.amazonaws.com/projects/63d488db08bd875715dfcdce/releases/63d48b1fa06de72f520e13d1/img/qiji02nbo3jm2wpu-jpg-1@2x.png);
  background-position: 50% 50%;
  background-size: cover;
  height: 148px;
  margin-top: 108px;
  position: relative;
  width: 428px;
}

.user-research-1 {
  height: 56px;
  left: 60px;
  line-height: 48px;
  position: absolute;
  text-align: center;
  top: 45px;
  width: 308px;
}

.iphone-13-pro-max-8 .user-research-3 {
  letter-spacing: 0;
  white-space: nowrap;
}

.divsection {
  height: 148px;
  left: 0;
  position: absolute;
  top: 0;
  width: 428px;
}

.divsection-16 {
  align-items: flex-start;
  background-image: url(https://anima-uploads.s3.amazonaws.com/projects/63d488db08bd875715dfcdce/releases/63d48b1fa06de72f520e13d1/img/div-section-16@2x.png);
  background-position: 50% 50%;
  background-size: cover;
  display: flex;
  justify-content: center;
  margin-top: 54px;
  min-width: 390px;
}

.overlap-group {
  height: 148px;
  position: relative;
  width: 440px;
}

.ideation-testing-1 {
  height: 56px;
  left: 28px;
  letter-spacing: 0;
  line-height: 48px;
  position: absolute;
  text-align: center;
  top: 45px;
  white-space: nowrap;
  width: 384px;
}

.divsection-16before {
  background-color: var(--ebony-clay);
  height: 148px;
  left: 0;
  position: absolute;
  top: 0;
  width: 440px;
}

.x8-b1-zwj-mp-yvxt5-h-lcjpg {
  height: 148px;
  left: 6px;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 428px;
}

.overlap-group5 {
  background-image: url(https://anima-uploads.s3.amazonaws.com/projects/63d488db08bd875715dfcdce/releases/63d48b1fa06de72f520e13d1/img/h8u2dfftbjepecbg-jpg@2x.png);
  background-size: 100% 100%;
  height: 148px;
  margin-top: 151px;
  position: relative;
  width: 428px;
}

.wireframes-1 {
  height: 56px;
  left: 84px;
  letter-spacing: 0;
  line-height: 48px;
  position: absolute;
  text-align: center;
  top: 45px;
  white-space: nowrap;
  width: 260px;
}

.overlap-group6 {
  align-self: flex-end;
  height: 1181px;
  margin-right: -16px;
  margin-top: 43px;
  position: relative;
  width: 390px;
}

.div-13 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  left: 8px;
  min-height: 844px;
  position: absolute;
  top: 0;
  width: 342px;
}

.interview-insight {
  height: 25px;
  letter-spacing: 0;
  line-height: 25px;
  margin-top: 20px;
  white-space: nowrap;
}

.div-item-1 {
  letter-spacing: 0;
  line-height: 21px;
  margin-left: -8px;
  margin-top: 7px;
  width: 340px;
}

.div-item {
  letter-spacing: 0;
  line-height: 21px;
  margin-left: -8px;
  margin-top: 24px;
  width: 340px;
}

.determine-whether-th {
  letter-spacing: 0;
  line-height: 21px;
  margin-left: -11px;
  margin-top: 7px;
  width: 340px;
}

.research-objecive {
  height: 25px;
  letter-spacing: 0;
  line-height: 25px;
  margin-top: 24px;
  white-space: nowrap;
}

.find-out-if-it-is-ea {
  letter-spacing: 0;
  line-height: 21px;
  margin-left: -8px;
  margin-top: 7px;
  white-space: nowrap;
}

.i-tracked-down-20-ma {
  height: 63px;
  letter-spacing: 0;
  line-height: 21px;
  margin-top: 24px;
  width: 311px;
}

.user-research-2 {
  height: 25px;
  line-height: 25px;
  margin-top: -1px;
}

.div-14 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  left: 0;
  padding: 0px 24px;
  position: absolute;
  top: 797px;
  width: fit-content;
}

.div-15 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0px 2.77px 0px 0px;
  width: fit-content;
}

.how-can-i-ensure-tha {
  letter-spacing: 0;
  line-height: 21px;
  width: 339.23px;
}

.design-challenge {
  letter-spacing: 0;
  line-height: 25px;
  margin-top: -1px;
  white-space: nowrap;
  width: fit-content;
}

.div-17 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0px 0.17px 0px 0px;
  width: fit-content;
}

.impact {
  letter-spacing: 0;
  line-height: 25px;
  margin-top: -1px;
  white-space: nowrap;
  width: fit-content;
}

.when-this-app-is-rel {
  letter-spacing: 0;
  line-height: 21px;
  width: 341.83px;
}

.div-16 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0px 11.8px 0px 0px;
  width: fit-content;
}

.target-audience {
  letter-spacing: 0;
  line-height: 25px;
  margin-top: -1px;
  white-space: nowrap;
  width: fit-content;
}

.main-audience-expat {
  letter-spacing: 0;
  line-height: 21px;
  width: 328.04px;
}

.i-phone-13-pro-1 {
  height: 651px;
  margin-right: 8px;
  margin-top: 104px;
  object-fit: cover;
  width: 322px;
}

.divsection-16-1 {
  align-items: flex-start;
  background-image: url(https://anima-uploads.s3.amazonaws.com/projects/63d488db08bd875715dfcdce/releases/63d48b1fa06de72f520e13d1/img/div-section-16@2x.png);
  background-position: 50% 50%;
  background-size: cover;
  display: flex;
  justify-content: center;
  margin-top: 104px;
  min-width: 390px;
}

.prototyping-1 {
  height: 56px;
  left: 28px;
  letter-spacing: 0;
  line-height: 48px;
  position: absolute;
  text-align: center;
  top: 45px;
  white-space: nowrap;
  width: 384px;
}

.i-phone-13-pro-4 {
  height: 650px;
  margin-top: 104px;
  object-fit: cover;
  width: 322px;
}

.i-phone-13-pro-front-2 {
  margin-top: 145px;
}

.iphone-13-pro-max-8 .i-phone-13-pro-front-3 {
  align-items: flex-start;
  background-image: url(https://anima-uploads.s3.amazonaws.com/projects/63d488db08bd875715dfcdce/releases/63d48b1fa06de72f520e13d1/img/blue.png);
  background-size: 100% 100%;
  display: flex;
  height: 650px;
  justify-content: flex-end;
  min-width: 322px;
  padding: 14.9px 16.9px;
}

.mockup-1 {
  background-image: url(https://anima-uploads.s3.amazonaws.com/projects/63d488db08bd875715dfcdce/releases/63d48b1fa06de72f520e13d1/img/mask-group-1.png);
}

.iphone-13-pro-max-8 .mockup-4 {
  background-size: 100% 100%;
  height: 620px;
  width: 287px;
}

.i-phone-13-pro-5 {
  height: 650px;
  margin-right: 0.38px;
  margin-top: 104px;
  object-fit: cover;
  width: 322px;
}

.the-user-can-browse {
  height: 63px;
  letter-spacing: 0;
  line-height: 21px;
  margin-right: 0.05px;
  margin-top: 56px;
  width: 330px;
}

.i-phone-13-pro-front-1 {
  margin-top: 104px;
}

.mockup {
  background-image: url(https://anima-uploads.s3.amazonaws.com/projects/63d488db08bd875715dfcdce/releases/63d48b1fa06de72f520e13d1/img/mask-group.png);
  background-size: 100% 100%;
  height: 620px;
  width: 287px;
}

.because-the-applicat {
  height: 105px;
  letter-spacing: 0;
  line-height: 21px;
  margin-right: 12.05px;
  margin-top: 16px;
  width: 330px;
}

.i-phone-13-pro-front {
  align-items: flex-start;
  background-image: url(https://anima-uploads.s3.amazonaws.com/projects/63d488db08bd875715dfcdce/releases/63d48b1fa06de72f520e13d1/img/blue.png);
  background-size: 100% 100%;
  display: flex;
  height: 650px;
  justify-content: flex-end;
  margin-top: 77px;
  min-width: 322px;
  padding: 14.9px 16.9px;
}

.mockup-2 {
  background-image: url(https://anima-uploads.s3.amazonaws.com/projects/63d488db08bd875715dfcdce/releases/63d48b1fa06de72f520e13d1/img/mask-group-2.png);
}

.i-phone-13-pro-3 {
  height: 650px;
  margin-top: 58px;
  width: 322px;
}

.i-phone-13-pro-9 {
  height: 650px;
  margin-right: 8.38px;
  margin-top: 104px;
  object-fit: cover;
  width: 322px;
}

.solutions {
  align-self: flex-start;
  height: 25px;
  letter-spacing: 0;
  line-height: 25px;
  margin-left: 24px;
  margin-top: 42px;
  white-space: nowrap;
}

.competitive-analysis {
  align-self: flex-start;
  height: 25px;
  letter-spacing: 0;
  line-height: 25px;
  margin-left: 24px;
  margin-top: 32px;
  white-space: nowrap;
}

.allowing-users-to-se {
  align-self: flex-start;
  height: 42px;
  letter-spacing: 0;
  line-height: 21px;
  margin-left: 15px;
  margin-top: 11px;
  width: 330px;
}

.mockup-3 {
  background-image: url(https://anima-uploads.s3.amazonaws.com/projects/63d488db08bd875715dfcdce/releases/63d48b1fa06de72f520e13d1/img/mask-group-3.png);
}

.i-began-thinking-abo {
  height: 147px;
  letter-spacing: 0;
  line-height: 21px;
  margin-right: 12.05px;
  margin-top: 22px;
  width: 330px;
}

.ction-container {
  background-image: url(https://anima-uploads.s3.amazonaws.com/projects/63d488db08bd875715dfcdce/releases/63d48b1fa06de72f520e13d1/img/hw9w6cra8vigtvj7-jpg-1@2x.png);
  background-position: 50% 50%;
  background-size: cover;
  height: 148px;
  margin-top: 70px;
  position: relative;
  width: 428px;
}

.divsection-6before {
  background-color: var(--ebony-clay);
  height: 148px;
  left: 0;
  position: absolute;
  top: 0;
  width: 428px;
}

.introduction-1 {
  height: 56px;
  left: 87px;
  line-height: 48px;
  position: absolute;
  text-align: center;
  top: 45px;
  width: 254px;
}

.i-phone-13-pro-6 {
  height: 650px;
  margin-top: 104px;
  width: 322px;
}

.i-phone-13-pro-7 {
  height: 651px;
  margin-right: 8px;
  margin-top: 58px;
  object-fit: cover;
  width: 322px;
}

.div-6 {
  align-items: flex-start;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 360px;
  margin-top: 70px;
  overflow: hidden;
  width: 342px;
}

.iphone-13-pro-max-8 .a-7 {
  display: flex;
  width: fit-content;
}

.a-1 {
  align-items: center;
  gap: 14px;
  padding: 0px 204px 0px 0px;
}

.user-research {
  letter-spacing: 0;
  line-height: 26px;
  white-space: nowrap;
  width: fit-content;
}

.div-8 {
  border: 2px solid;
  border-color: var(--mischka);
  border-radius: 24px;
  height: 48px;
  min-width: 48px;
  position: relative;
}

.number {
  height: 28px;
  left: 17px;
  letter-spacing: 0;
  line-height: 25.9px;
  position: absolute;
  top: 7px;
  white-space: nowrap;
  width: 14px;
}

.a-2 {
  align-items: center;
  gap: 14px;
  padding: 0px 195px 0px 0px;
}

.ideation-testing {
  letter-spacing: 0;
  line-height: 26px;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.div-9 {
  border: 2px solid;
  border-color: var(--mischka);
  border-radius: 24px;
  height: 48px;
  min-width: 48px;
  position: relative;
}

.a-3 {
  align-items: center;
  gap: 14px;
  padding: 0px 205px 0px 0px;
}

.wireframes {
  letter-spacing: 0;
  line-height: 26px;
  white-space: nowrap;
  width: fit-content;
}

.div-10 {
  border: 2px solid;
  border-color: var(--mischka);
  border-radius: 24px;
  height: 48px;
  min-width: 48px;
  position: relative;
}

.a {
  align-items: center;
  display: flex;
  gap: 14px;
  padding: 0px 209px 0px 0px;
  width: fit-content;
}

.div-7 {
  border: 2px solid;
  border-color: var(--mischka);
  border-radius: 24px;
  height: 48px;
  min-width: 48px;
  position: relative;
}

.introduction {
  letter-spacing: 0;
  line-height: 26px;
  white-space: nowrap;
  width: fit-content;
}

.a-4 {
  align-items: center;
  gap: 14px;
  padding: 0px 179px 0px 0px;
}

.prototyping {
  color: var(--shark);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-l);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 26px;
  white-space: nowrap;
  width: fit-content;
}

.div-11 {
  border: 2px solid;
  border-color: var(--mischka);
  border-radius: 24px;
  height: 48px;
  min-width: 48px;
  position: relative;
}

.div-1 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 331px;
  padding: 0px 24px;
  width: fit-content;
}

.div-4 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 23px;
  padding: 0px 197px 1px 0px;
  width: fit-content;
}

.duration {
  letter-spacing: 0;
  line-height: 21px;
  margin-top: -1px;
  white-space: nowrap;
  width: fit-content;
}

.address {
  letter-spacing: 0;
  line-height: 16px;
  white-space: nowrap;
  width: fit-content;
}

.div-5 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 23px;
  padding: 0px 169px 1px 0px;
  width: fit-content;
}

.tools {
  letter-spacing: 0;
  line-height: 21px;
  margin-top: -1px;
  white-space: nowrap;
  width: fit-content;
}

.figma-adobe-xd {
  letter-spacing: 0;
  line-height: 16px;
  white-space: nowrap;
  width: fit-content;
}

.div-3 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 23px;
  padding: 0px 243px 1px 0px;
  width: fit-content;
}

.team {
  letter-spacing: 0;
  line-height: 21px;
  margin-top: -1px;
  white-space: nowrap;
  width: fit-content;
}

.solo-designer {
  letter-spacing: 0;
  line-height: 16px;
  white-space: nowrap;
  width: fit-content;
}

.div-2 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 23px;
  padding: 0px 108px 1px 0px;
  width: fit-content;
}

.product-designer-ux-researcher {
  letter-spacing: 0;
  line-height: 16px;
  white-space: nowrap;
  width: fit-content;
}

.role {
  letter-spacing: 0;
  line-height: 21px;
  margin-top: -1px;
  white-space: nowrap;
  width: fit-content;
}

.after-checkout-the {
  height: 105px;
  letter-spacing: 0;
  line-height: 21px;
  margin-right: 0.05px;
  margin-top: 56px;
  width: 330px;
}

.divsection-3 {
  background-color: 
#eaeef1;
  height: 20px;
  margin-top: 50px;
  width: 390px;
}

.allowing-users-acces {
  align-self: flex-start;
  height: 63px;
  letter-spacing: 0;
  line-height: 21px;
  margin-left: 15px;
  margin-top: 18px;
  width: 330px;
}

.typography-colors {
  color: var(--onyx);
  font-family: var(--font-family-playfair_display);
  font-size: var(--font-size-m);
  font-weight: 700;
  height: 44px;
  letter-spacing: 0;
  line-height: 21px;
  margin-right: 7px;
  margin-top: 3978px;
  width: 170px;
}

.title {
  align-self: flex-start;
  color: var(--onyx);
  font-family: var(--font-family-arial-regular);
  font-size: 66px;
  font-weight: 400;
  height: 78px;
  letter-spacing: 0;
  line-height: 36px;
  margin-top: 58px;
  text-align: center;
  width: 290px;
}

.flex-row {
  margin-left: 40px;
  min-width: 205px;
}

.ellipse-1 {
  background-color: var(--onyx);
  margin-left: 14px;
}

.iphone-13-pro-max-8 .ellipse {
  border-radius: 5.5px;
  height: 11px;
  margin-top: 1px;
  width: 11px;
}

.regular {
  height: 36px;
  letter-spacing: 0;
  line-height: 36px;
  margin-left: 10px;
  min-width: 92px;
  white-space: nowrap;
}

.ellipse-2 {
  background-color: 
#84888b;
}

.bold {
  height: 36px;
  letter-spacing: 0;
  line-height: 36px;
  margin-left: 10px;
  min-width: 57px;
  white-space: nowrap;
}

.flex-col-1 {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-left: -19px;
  margin-top: 22px;
  min-height: 1499px;
  padding: 0 1px;
  width: 466px;
}

.group-7 {
  align-items: flex-start;
  display: flex;
  gap: 41px;
  margin-right: 44.95px;
  margin-top: 44px;
  min-width: 339px;
}

.rectangle-3 {
  background-color: 
#101010;
}

.iphone-13-pro-max-8 .rectangle {
  border-radius: 15px;
  box-shadow: 4px 4px 12px 
#00000040;
  height: 59px;
  width: 149px;
}

.rectangle-5 {
  background-color: 
#ffb900;
}

.divsection-58 {
  align-items: center;
  align-self: flex-end;
  background-color: 
#fafafa;
  display: flex;
  justify-content: center;
  margin-top: 76px;
  padding: 60px 24px 40px;
  width: 446px;
}

.div-23 {
  height: 55px;
  min-width: 342px;
  overflow: hidden;
}

.ul {
  align-items: flex-start;
  display: flex;
  height: 55px;
  padding: 0 26px;
  width: 352px;
}

.thank-you-for-scrolling-down {
  height: 28px;
  letter-spacing: 0;
  line-height: 25px;
  margin-top: -3px;
  text-align: center;
  white-space: nowrap;
  width: 290px;
}

.a-b-c-d-e-f-g-h-i-j {
  color: var(--onyx);
  font-family: var(--font-family-nunito);
  font-size: var(--font-size-xxl);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 50px;
  margin-right: 33px;
  min-height: 313px;
  width: 303px;
}

.div-24 {
  align-items: flex-end;
  background-color: 
#f3f7f8;
  display: flex;
  height: 417px;
  min-width: 430px;
}

.overlap-group-1 {
  height: 403px;
  margin-bottom: -26px;
  position: relative;
  width: 429px;
}

.div-34 {
  height: 112px;
  left: 1px;
  position: absolute;
  top: 291px;
  width: 428px;
}

.div-25 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 24px;
  left: 0;
  min-height: 337px;
  position: absolute;
  top: 0;
  width: 390px;
}

.div-31 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 25px;
  min-height: 189px;
  width: 342px;
}

.see-more-of-my-work {
  color: 
#9fa6a9;
  font-family: var(--font-family-source_sans_pro);
  font-size: var(--font-size-s);
  font-weight: 600;
  height: 21px;
  letter-spacing: 0;
  line-height: 21px;
  margin-left: 0.31px;
  margin-top: -1px;
  min-width: 145px;
  text-align: center;
  white-space: nowrap;
}

.div-32 {
  align-items: flex-start;
  background-color: var(--white);
  box-shadow: 0px 20px 20px -20px 
#0000001a;
  display: flex;
  width: 342px;
}

.div-33 {
  align-items: flex-start;
  background-color: var(--white);
  display: flex;
  padding: 20.41px 161.25px 20.41px 24px;
  width: fit-content;
}

.h4 {
  height: 19.19px;
  min-width: 96.75px;
  overflow: hidden;
  position: relative;
}

.lo-soja-1 {
  color: 
#475461;
  font-family: var(--font-family-lato);
  font-size: var(--font-size-m);
  font-weight: 400;
  height: 19px;
  left: 0;
  letter-spacing: 0;
  line-height: 19.2px;
  position: absolute;
  top: -1px;
  white-space: nowrap;
  width: 97px;
}

.qat-ph9-ek-sp-xc-nx-jtpng {
  height: 60px;
  width: 60px;
}

.div-26 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 124px;
  width: 342px;
}

.div-30 {
  align-items: flex-start;
  display: flex;
  gap: 13.73px;
  margin-right: 0.02px;
  width: fit-content;
}

.a-6 {
  align-items: flex-start;
  background-color: var(--white);
  border: 1px solid;
  border-color: var(--athens-gray);
  border-radius: 18px;
  padding: 10px 16.36px 12px 17px;
}

.resum {
  letter-spacing: 0;
  line-height: 18px;
  margin-top: -1px;
  white-space: nowrap;
  width: fit-content;
}

.a-5 {
  align-items: flex-start;
  background-color: var(--white);
  border: 1px solid;
  border-color: var(--athens-gray);
  border-radius: 18px;
  padding: 10px 16.42px 12px 17px;
}

.place-1 {
  letter-spacing: 0;
  line-height: 18px;
  margin-top: -1px;
  white-space: nowrap;
  width: fit-content;
}

.div-27 {
  align-items: center;
  display: flex;
  gap: 12px;
  width: fit-content;
}

.div-28 {
  background-color: var(--athens-gray-2);
  border-radius: 30px;
  height: 60px;
  min-width: 60px;
  overflow: hidden;
  position: relative;
}

.basma-profile-pic_xoxpng-1 {
  height: 60px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 60px;
}

.div-29 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  padding: 0px 0.91px 0px 0px;
  width: fit-content;
}

.wale-durojaye-ayotomiwa-1 {
  color: var(--onyx);
  font-family: var(--font-family-lato);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 18px;
  margin-top: -1px;
  white-space: nowrap;
  width: fit-content;
}

.product-designer-1 {
  color: 
#424242;
  font-family: var(--font-family-lato);
  font-size: var(--font-size-s);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 21px;
  white-space: nowrap;
  width: fit-content;
}

.overlap-group9 {
  align-self: flex-start;
  height: 394px;
  margin-left: 61px;
  position: relative;
  width: 197px;
}

.aa {
  color: var(--onyx);
  font-family: var(--font-family-nunito);
  font-size: 150px;
  font-weight: 700;
  left: 3px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 0;
}

.bold-1 {
  height: 36px;
  left: 3px;
  letter-spacing: 0;
  line-height: 36px;
  position: absolute;
  top: 162px;
  white-space: nowrap;
}

.regular-1 {
  height: 36px;
  left: 3px;
  letter-spacing: 0;
  line-height: 36px;
  position: absolute;
  top: 358px;
  white-space: nowrap;
}

.aa-1 {
  color: var(--onyx);
  font-family: var(--font-family-nunito);
  font-size: 150px;
  font-weight: 400;
  left: 0;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 189px;
}
  }