.portfolio {
  background-color: #ffffff;
  width: 100%;
  min-width: 1440px;
  min-height: 6517px;
  position: relative;
}

.portfolio .desktop {
  top: 0;
  height: 1024px;
  position: absolute;
  left: 0;
  width: 1440px;
}

.portfolio .div {
  top: 1024px;
  height: 2374px;
  overflow: hidden;
  background: linear-gradient(163deg, rgba(0, 0, 0, 1) 53%, rgba(107, 11, 90, 1) 100%);
  position: absolute;
  left: 0;
  width: 1440px;
}

.portfolio .rectangle {
  position: absolute;
  top: 282px;
  left: 0;
  width: 293px;
  height: 5px;
  background-color: #ff00fa;
}

.portfolio .rectangle-2 {
  position: absolute;
  top: 1118px;
  left: -1px;
  width: 517px;
  height: 5px;
  background-color: #ff00fa;
}

.portfolio .text-wrapper {
  position: absolute;
  top: 490px;
  right: 86px;
  width: 768px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 32px;
  letter-spacing: 0;
  line-height: 39.9px;
}

.portfolio .UX-UI-designer {
  position: absolute;
  top: 1328px;
  left: 398px;
  width: 834px;
  font-family: "Inter-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 36px;
  letter-spacing: 0;
  line-height: 43.8px;
}

.portfolio .looper-group {
  position: absolute;
  top: 614px;
  left: 1047px;
  width: 393px;
  height: 507px;
}

.portfolio .group {
  position: absolute;
  top: 440px;
  left: 111px;
  width: 380px;
  height: 380px;
  background-image: url(./img/ellipse-4.svg);
  background-size: 100% 100%;
}

.portfolio .ellipse {
  position: absolute;
  top: 443px;
  left: 442px;
  width: 59px;
  height: 59px;
  border-radius: 29.5px;
  transform: rotate(-70.21deg);
  box-shadow: 0px 4px 8.1px #00000040;
  background: linear-gradient(266deg, rgba(255, 0, 251, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

.portfolio .ellipse-2 {
  position: absolute;
  top: 444px;
  left: 525px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  transform: rotate(-70.21deg);
  background: linear-gradient(270deg, rgba(255, 0, 251, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

.portfolio .image {
  position: absolute;
  top: 485px;
  left: 156px;
  width: 290px;
  height: 290px;
  aspect-ratio: 1;
  object-fit: cover;
}

.portfolio .during-my-time-at {
  position: absolute;
  top: 1580px;
  left: calc(50% - 622px);
  width: 1293px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 36px;
  letter-spacing: 0;
  line-height: 43.8px;
}

.portfolio .rectangle-3 {
  position: absolute;
  top: 1279px;
  left: 114px;
  width: 230px;
  height: 230px;
  background-color: #ff00fa;
  border-radius: 11px;
  filter: blur(25.5px);
}

.portfolio .ccaef-a-f {
  position: absolute;
  top: 1278px;
  left: 109px;
  width: 240px;
  height: 240px;
  aspect-ratio: 1;
  object-fit: cover;
}

.portfolio .img {
  position: absolute;
  top: 59px;
  left: 311px;
  width: 337px;
  height: 351px;
}

.portfolio .text-wrapper-2 {
  position: absolute;
  top: 103px;
  left: 22px;
  text-shadow: 0px 4px 4px #00000040;
  -webkit-text-stroke: 1px #ffebfb;
  background: linear-gradient(180deg, rgba(0, 0, 0, 1) 25%, rgba(255, 0, 251, 1) 90%);
  -webkit-background-clip: text !important;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  font-family: "Inter-Black", Helvetica;
  font-weight: 900;
  color: transparent;
  font-size: 96px;
  letter-spacing: 0;
  line-height: 255.4px;
  white-space: nowrap;
}

.portfolio .text-wrapper-3 {
  top: 929px;
  position: absolute;
  left: 22px;
  text-shadow: 0px 4px 4px #00000040;
  -webkit-text-stroke: 1px #ffffff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 1) 25%, rgba(255, 0, 251, 1) 90%);
  -webkit-background-clip: text !important;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  font-family: "Inter-Black", Helvetica;
  font-weight: 900;
  color: transparent;
  font-size: 96px;
  letter-spacing: 0;
  line-height: 255.4px;
  white-space: nowrap;
}

.portfolio .p {
  position: absolute;
  top: 1834px;
  left: 98px;
  width: 1269px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 36px;
  letter-spacing: 0;
  line-height: 43.8px;
}

.portfolio .line {
  position: absolute;
  top: 48px;
  left: 676px;
  width: 739px;
  height: 2px;
}

.portfolio .line-2 {
  position: absolute;
  top: 0;
  left: 1372px;
  width: 6px;
  height: 567px;
}

.portfolio .untitled-design {
  position: absolute;
  top: 50px;
  left: 969px;
  width: 405px;
  height: 273px;
  aspect-ratio: 1.49;
}

.portfolio .desktop-2 {
  top: 3319px;
  height: 2623px;
  background: linear-gradient(194deg, rgba(107, 11, 90, 1) 0%, rgba(0, 0, 0, 1) 27%);
  position: absolute;
  left: 0;
  width: 1440px;
}

.portfolio .rectangle-4 {
  position: absolute;
  top: 300px;
  left: 22px;
  width: 1395px;
  height: 2259px;
  background-color: #ff00fa2e;
  border: 5px solid;
  border-color: #a300a0;
}

.portfolio .rectangle-5 {
  top: 197px;
  width: 517px;
  position: absolute;
  left: 0;
  height: 5px;
  background-color: #ff00fa;
}

.portfolio .text-wrapper-4 {
  position: absolute;
  top: 309px;
  left: 76px;
  width: 231px;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #da4dd8;
  font-size: 48px;
  text-align: center;
  letter-spacing: 0;
  line-height: 127.7px;
  white-space: nowrap;
}

.portfolio .text-wrapper-5 {
  position: absolute;
  top: 1456px;
  left: 76px;
  width: 417px;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #da4dd8;
  font-size: 48px;
  text-align: center;
  letter-spacing: 0.48px;
  line-height: 127.7px;
  white-space: nowrap;
}

.portfolio .frame {
  position: absolute;
  top: 464px;
  left: 57px;
  width: 405px;
  height: 404px;
  display: flex;
  flex-direction: column;
  gap: 23px;
  background-color: #ffffff24;
  border-radius: 50px;
  border: 1px solid;
  border-color: #ff00fa;
}

.portfolio .mask-group {
  margin-left: 1px;
  width: 403px;
  height: 288px;
  margin-top: 1px;
}

.portfolio .text-wrapper-6 {
  margin-left: 19px;
  width: 274px;
  height: 59px;
  font-family: "Inter-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 25px;
  text-align: center;
  letter-spacing: 0.25px;
  line-height: 66.5px;
  white-space: nowrap;
}

.portfolio .frame-2 {
  position: absolute;
  top: 1611px;
  left: 58px;
  width: 405px;
  height: 404px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #ffffff24;
  border-radius: 50px;
  border: 1px solid;
  border-color: #ff00fa;
}

.portfolio .untitled-design-2 {
  margin-left: 1px;
  width: 403px;
  height: 291px;
  margin-top: 1px;
}

.portfolio .text-wrapper-7 {
  margin-left: 19px;
  width: 132px;
  height: 59px;
  font-family: "Inter-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 25px;
  text-align: center;
  letter-spacing: 0.25px;
  line-height: 66.5px;
  white-space: nowrap;
}

.portfolio .frame-3 {
  position: absolute;
  top: 1612px;
  left: 523px;
  width: 405px;
  height: 404px;
  background-color: #ffffff24;
  border-radius: 50px;
  border: 1px solid;
  border-color: #ff00fa;
}

.portfolio .text-wrapper-8 {
  position: absolute;
  top: 312px;
  left: 19px;
  width: 172px;
  font-family: "Inter-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 25px;
  text-align: center;
  letter-spacing: 0.25px;
  line-height: 66.5px;
  white-space: nowrap;
}

.portfolio .rectangle-6 {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 403px;
  height: 292px;
  background-color: #ffffff;
  border-radius: 14px 14px 0px 0px;
}

.portfolio .untitled-design-3 {
  position: absolute;
  top: 1px;
  left: calc(50% - 116px);
  width: 233px;
  height: 292px;
  aspect-ratio: 0.8;
  object-fit: cover;
}

.portfolio .frame-4 {
  position: absolute;
  top: 2104px;
  left: 524px;
  width: 405px;
  height: 404px;
  display: flex;
  flex-direction: column;
  gap: 21px;
  background-color: #ffffff24;
  border-radius: 50px;
  border: 1px solid;
  border-color: #ff00fa;
}

.portfolio .rectangle-7 {
  background-color: #ffffff;
  margin-left: 1px;
  width: 403px;
  height: 292px;
  margin-top: 1px;
  border-radius: 14px 14px 0px 0px;
}

.portfolio .text-wrapper-9 {
  margin-left: 19px;
  width: 237px;
  height: 59px;
  font-family: "Inter-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 25px;
  text-align: center;
  letter-spacing: 0.25px;
  line-height: 66.5px;
  white-space: nowrap;
}

.portfolio .frame-5 {
  position: absolute;
  top: 2105px;
  left: 981px;
  width: 405px;
  height: 404px;
  background-color: #ffffff24;
  border-radius: 50px;
  border: 1px solid;
  border-color: #ff00fa;
}

.portfolio .flower-glow {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 403px;
  height: 292px;
  object-fit: cover;
}

.portfolio .frame-6 {
  position: absolute;
  top: 2104px;
  left: 58px;
  width: 405px;
  height: 404px;
  display: flex;
  flex-direction: column;
  gap: 19px;
  background-color: #ffffff24;
  border-radius: 50px;
  border: 1px solid;
  border-color: #ff00fa;
}

.portfolio .rectangle-8 {
  background-color: #252525;
  margin-left: 1px;
  width: 403px;
  height: 292px;
  margin-top: 1px;
  border-radius: 14px 14px 0px 0px;
}

.portfolio .text-wrapper-10 {
  margin-left: 19px;
  width: 281px;
  height: 59px;
  font-family: "Inter-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 25px;
  text-align: center;
  letter-spacing: 0.25px;
  line-height: 66.5px;
  white-space: nowrap;
}

.portfolio .div-wrapper {
  position: absolute;
  top: 1611px;
  left: 981px;
  width: 405px;
  height: 404px;
  display: flex;
  background-color: #ffffff24;
  border-radius: 50px;
  border: 1px solid;
  border-color: #ff00fa;
}

.portfolio .text-wrapper-11 {
  margin-top: 312px;
  width: 203px;
  height: 59px;
  margin-left: 19px;
  font-family: "Inter-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 25px;
  text-align: center;
  letter-spacing: 0.25px;
  line-height: 66.5px;
  white-space: nowrap;
}

.portfolio .frame-7 {
  position: absolute;
  top: 978px;
  left: 522px;
  width: 405px;
  height: 404px;
  display: flex;
  flex-direction: column;
  gap: 19px;
  background-color: #ffffff24;
  border-radius: 50px;
  border: 1px solid;
  border-color: #ff00fa;
}

.portfolio .iphone-pro {
  margin-left: 1px;
  width: 403px;
  height: 292px;
  margin-top: 1px;
}

.portfolio .text-wrapper-12 {
  margin-left: 19px;
  width: 349px;
  height: 59px;
  font-family: "Inter-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 25px;
  letter-spacing: 0.25px;
  line-height: 26.2px;
}

.portfolio .frame-8 {
  position: absolute;
  top: 465px;
  left: 522px;
  width: 405px;
  height: 404px;
  display: flex;
  flex-direction: column;
  gap: 44px;
  background-color: #ffffff24;
  border-radius: 50px;
  border: 1px solid;
  border-color: #ff00fa;
}

.portfolio .image-2 {
  margin-left: 1px;
  width: 403px;
  height: 288px;
  margin-top: 1px;
  object-fit: cover;
}

.portfolio .text-wrapper-13 {
  margin-left: 33px;
  width: 325px;
  height: 36px;
  font-family: "Inter-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 30px;
  letter-spacing: 0.3px;
  line-height: 31.5px;
  white-space: nowrap;
}

.portfolio .frame-9 {
  position: absolute;
  top: 465px;
  left: 978px;
  width: 405px;
  height: 404px;
  display: flex;
  flex-direction: column;
  gap: 19px;
  background-color: #ffffff24;
  border-radius: 50px;
  border: 1px solid;
  border-color: #ff00fa;
}

.portfolio .macbook-air {
  margin-left: 1px;
  width: 403px;
  height: 292px;
  margin-top: 1px;
  object-fit: cover;
}

.portfolio .text-wrapper-14 {
  margin-left: 23px;
  width: 325px;
  height: 64px;
  font-family: "Inter-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 30px;
  text-align: center;
  letter-spacing: 0.3px;
  line-height: 79.8px;
  white-space: nowrap;
}

.portfolio .group-2 {
  position: absolute;
  top: 978px;
  left: 57px;
  width: 405px;
  height: 404px;
  background-color: #ffffff24;
  border-radius: 14px;
  border: 1px solid;
  border-color: #ff00fa;
}

.portfolio .text-wrapper-15 {
  position: absolute;
  top: 1288px;
  left: 75px;
  width: 368px;
  font-family: "Inter-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 30px;
  letter-spacing: 0.3px;
  line-height: 31.5px;
}

.portfolio .text-wrapper-16 {
  position: absolute;
  top: 13px;
  left: 22px;
  text-shadow: 0px 4px 4px #00000040;
  -webkit-text-stroke: 1px #ffffff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 1) 25%, rgba(255, 0, 251, 1) 90%);
  -webkit-background-clip: text !important;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  font-family: "Inter-Black", Helvetica;
  font-weight: 900;
  color: transparent;
  font-size: 96px;
  letter-spacing: 0;
  line-height: 255.4px;
  white-space: nowrap;
}

.portfolio .image-3 {
  position: absolute;
  top: 2105px;
  left: 114px;
  width: 292px;
  height: 292px;
  aspect-ratio: 1;
  object-fit: cover;
}

.portfolio .orange {
  position: absolute;
  top: 2105px;
  left: 524px;
  width: 404px;
  height: 292px;
  object-fit: cover;
}

.portfolio .streamline-arrow {
  position: absolute;
  top: 2565px;
  left: 1389px;
  width: 46px;
  height: 46px;
  border: 1px solid;
  border-color: #000000;
  aspect-ratio: 1;
}

.portfolio .vector {
  position: absolute;
  width: 85.08%;
  height: 85.16%;
  top: 7.7%;
  left: 7.79%;
}

.portfolio .frame-10 {
  position: absolute;
  top: 1365px;
  left: 1226px;
  width: 156px;
  height: 156px;
  background-color: #ff00fa36;
  border-radius: 78px;
  box-shadow: 0px 15px 4px #00000040, inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 1px 0 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 1px rgba(0, 0, 0, 0.13), inset -1px 0 1px rgba(0, 0, 0, 0.11);
  backdrop-filter: blur(2px) brightness(100%) saturate(100%);
  -webkit-backdrop-filter: blur(2px) brightness(100%) saturate(100%);
}

.portfolio .trifold-brochure {
  position: absolute;
  top: 1626px;
  left: 996px;
  width: 375px;
  height: 314px;
  object-fit: cover;
}

.portfolio .image-4 {
  position: absolute;
  top: 271px;
  left: 785px;
  width: 637px;
  height: 77px;
  aspect-ratio: 9.39;
}

.portfolio .free-iphone-pro {
  position: absolute;
  top: 979px;
  left: 58px;
  width: 403px;
  height: 292px;
  object-fit: cover;
}

.portfolio .desktop-3 {
  top: 5942px;
  height: 575px;
  background-color: #000000;
  position: absolute;
  left: 0;
  width: 1440px;
}

.portfolio .rectangle-9 {
  top: 107px;
  width: 485px;
  position: absolute;
  left: 0;
  height: 5px;
  background-color: #ff00fa;
}

.portfolio .text-wrapper-17 {
  position: absolute;
  top: 178px;
  left: 76px;
  width: 478px;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #da4dd8;
  font-size: 48px;
  text-align: center;
  letter-spacing: 0.48px;
  line-height: 127.7px;
  white-space: nowrap;
}

.portfolio .ellipse-3 {
  position: absolute;
  top: 347px;
  left: 76px;
  width: 140px;
  height: 140px;
  border-radius: 70px;
  border: 1px solid;
  border-color: #a300a0;
  box-shadow: 0px 16px 4.8px #00000040;
  background: conic-gradient(from 318deg at 487% 398%, rgba(0, 0, 0, 1) 8%, rgba(255, 96, 227, 1) 57%);
}

.portfolio .ellipse-4 {
  position: absolute;
  top: 347px;
  left: 366px;
  width: 140px;
  height: 140px;
  border-radius: 70px;
  border: 1px solid;
  border-color: #a300a0;
  box-shadow: 0px 16px 4.8px #00000040;
  background: conic-gradient(from 318deg at 487% 398%, rgba(0, 0, 0, 1) 8%, rgba(255, 96, 227, 1) 57%);
}

.portfolio .ellipse-5 {
  position: absolute;
  top: 347px;
  left: 656px;
  width: 140px;
  height: 140px;
  border-radius: 70px;
  border: 1px solid;
  border-color: #a300a0;
  box-shadow: 0px 16px 4.8px #00000040;
  background: conic-gradient(from 318deg at 487% 398%, rgba(0, 0, 0, 1) 8%, rgba(255, 96, 227, 1) 57%);
}

.portfolio .ellipse-6 {
  position: absolute;
  top: 347px;
  left: 946px;
  width: 140px;
  height: 140px;
  border-radius: 70px;
  border: 1px solid;
  border-color: #a300a0;
  box-shadow: 0px 16px 4.8px #00000040;
  background: conic-gradient(from 318deg at 487% 398%, rgba(0, 0, 0, 1) 8%, rgba(255, 96, 227, 1) 57%);
}

.portfolio .ellipse-7 {
  position: absolute;
  top: 347px;
  left: 1236px;
  width: 140px;
  height: 140px;
  border-radius: 70px;
  border: 1px solid;
  border-color: #a300a0;
  box-shadow: 0px 16px 4.8px #00000040;
  background: conic-gradient(from 318deg at 487% 398%, rgba(0, 0, 0, 1) 8%, rgba(255, 96, 227, 1) 57%);
}

.portfolio .image-5 {
  position: absolute;
  top: 372px;
  left: 101px;
  width: 90px;
  height: 90px;
  aspect-ratio: 1;
  object-fit: cover;
}

.portfolio .image-6 {
  position: absolute;
  top: 382px;
  left: 400px;
  width: 73px;
  height: 69px;
  aspect-ratio: 1.06;
}

.portfolio .image-7 {
  position: absolute;
  top: 382px;
  left: 665px;
  width: 122px;
  height: 68px;
  aspect-ratio: 1.78;
  object-fit: cover;
}

.portfolio .image-8 {
  position: absolute;
  top: 372px;
  left: 971px;
  width: 90px;
  height: 90px;
  aspect-ratio: 1;
  object-fit: cover;
}

.portfolio .image-9 {
  position: absolute;
  top: 357px;
  left: 1247px;
  width: 117px;
  height: 117px;
  aspect-ratio: 1;
}

.portfolio .text-wrapper-18 {
  top: -78px;
  position: absolute;
  left: 22px;
  text-shadow: 0px 4px 4px #00000040;
  -webkit-text-stroke: 1px #ffffff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 1) 25%, rgba(255, 0, 251, 1) 90%);
  -webkit-background-clip: text !important;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  font-family: "Inter-Black", Helvetica;
  font-weight: 900;
  color: transparent;
  font-size: 96px;
  letter-spacing: 0;
  line-height: 255.4px;
  white-space: nowrap;
}