.company {
  height: 28px;
  flex: 1;
  position: relative;
  line-height: 27.5px;
  display: inline-block;
  cursor: pointer;
  z-index: 1;
}
.services {
  align-self: stretch;
  height: 28px;
  position: relative;
  line-height: 27.5px;
  display: inline-block;
  cursor: pointer;
  z-index: 1;
}
.services-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-12xs) 0px 0px;
}
.about {
  height: 28px;
  flex: 1;
  position: relative;
  line-height: 27.5px;
  display: inline-block;
  z-index: 1;
}
.projects {
  width: 75px;
  height: 28px;
  position: relative;
  line-height: 27.5px;
  display: inline-block;
  min-width: 75px;
  cursor: pointer;
  z-index: 1;
}
.projects-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-12xs) 0px 0px;
}
.company-parent {
  width: 495px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 29px;
  max-width: 100%;
}
.shape-container {
  width: 608px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 0px var(--padding-37xl) 0px;
  box-sizing: border-box;
  max-width: 100%;
}
.inbox-child {
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: var(--br-3xs);
  background-color: var(--color-darkslateblue-100);
  width: 100%;
  height: 100%;
  display: none;
}
.zakir-matloob {
  position: absolute;
  top: 21px;
  left: 33px;
  line-height: 27.5px;
  text-transform: uppercase;
  display: inline-block;
  width: 218px;
  z-index: 1;
}
.inbox {
  position: absolute;
  top: 69px;
  left: 0px;
  border-radius: var(--br-3xs);
  background-color: var(--color-darkslateblue-100);
  width: 1141px;
  height: 69px;
  text-align: left;
  font-size: var(--font-size-xl);
  color: var(--color-white);
  font-family: var(--font-radio-canada);
}
.background-circles-icon {
  position: absolute;
  top: -187px;
  left: 119px;
  width: 1525px;
  height: 1564px;
  z-index: 2;
}
.inbox-parent {
  height: 1377px;
  width: 1277px;
  position: absolute;
  margin: 0 !important;
  right: -745px;
  bottom: -731px;
}
.transforming-ideas-into {
  margin: 0;
  height: 231px;
  flex: 1;
  position: relative;
  font-size: inherit;
  line-height: 110%;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
  z-index: 3;
}
.frame-div {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  max-width: 100%;
}
.frame-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-69xl) 0px 0px;
  box-sizing: border-box;
  min-width: 330px;
  max-width: 100%;
}
.objectother-07-icon {
  height: 361px;
  width: 435px;
  position: relative;
  object-fit: cover;
  max-width: 100%;
  z-index: 3;
}
.frame-container {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 33px;
  max-width: 100%;
}
.as-a-software {
  width: 435px;
  height: 83px;
  position: relative;
  font-size: var(--font-size-xl);
  line-height: 27.5px;
  font-family: var(--font-roboto);
  display: inline-block;
  max-width: 100%;
  z-index: 3;
}
.frame-group {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
}
.linkedin-button-child {
  height: 63px;
  width: 165px;
  position: relative;
  border-radius: var(--br-3xs);
  background-color: var(--color-cornflowerblue-100);
  display: none;
}
.linkedin {
  height: 28px;
  width: 97px;
  position: relative;
  font-size: var(--font-size-xl);
  line-height: 27.5px;
  font-weight: 600;
  font-family: var(--font-ruda);
  color: var(--color-gray);
  text-align: left;
  display: inline-block;
  flex-shrink: 0;
  z-index: 1;
}
.linkedin-button {
  cursor: pointer;
  border: none;
  padding: var(--padding-lg) var(--padding-7xl) var(--padding-mid) 42px;
  background-color: var(--color-cornflowerblue-100);
  border-radius: var(--br-3xs);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  z-index: 3;
}
.linkedin-button:hover {
  background-color: var(--color-cornflowerblue-200);
}
.github-button-child {
  height: 63px;
  width: 165px;
  position: relative;
  border-radius: var(--br-3xs);
  border: 1px solid var(--color-cornflowerblue-100);
  box-sizing: border-box;
  display: none;
}
.github {
  height: 28px;
  width: 68px;
  position: relative;
  font-size: var(--font-size-xl);
  line-height: 27.5px;
  font-weight: 600;
  font-family: var(--font-ruda);
  color: var(--color-white);
  text-align: left;
  display: inline-block;
  min-width: 68px;
  z-index: 1;
}
.github-button {
  cursor: pointer;
  border: 1px solid var(--color-cornflowerblue-100);
  padding: var(--padding-lg) 48px var(--padding-mid);
  background-color: transparent;
  border-radius: var(--br-3xs);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  z-index: 3;
}
.github-button:hover {
  background-color: var(--color-cornflowerblue-300);
  border: 1px solid var(--color-cornflowerblue-200);
  box-sizing: border-box;
}
.linkedin-button-parent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-mini);
  max-width: 100%;
}
.frame-parent {
  width: 975px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 55px;
  max-width: 100%;
}
.desktop-1-inner {
  width: 1179px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 0px 98px 0px;
  box-sizing: border-box;
  max-width: 100%;
  text-align: left;
  font-size: var(--font-size-51xl);
  color: var(--color-white);
  font-family: var(--font-ruda);
}
.featured-on {
  height: 28px;
  flex: 1;
  position: relative;
  line-height: 27.5px;
  display: inline-block;
}
.featured-on-wrapper {
  width: 146px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-12xs);
  box-sizing: border-box;
}
.inbox-item {
  height: 109px;
  width: 1065px;
  position: relative;
  border-radius: var(--br-7xs);
  background-color: var(--color-darkslateblue-200);
  display: none;
  max-width: 100%;
}
.image-6-icon {
  align-self: stretch;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  z-index: 1;
}
.image-6-wrapper {
  height: 93px;
  width: 258px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-9xs) 0px 0px;
  box-sizing: border-box;
}
.image-5-icon {
  align-self: stretch;
  height: 36px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
  z-index: 1;
}
.image-5-wrapper {
  height: 64px;
  width: 227px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 0px var(--padding-9xl);
  box-sizing: border-box;
}
.image-7-icon {
  align-self: stretch;
  height: 49px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
  z-index: 1;
}
.image-7-wrapper {
  height: 70px;
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 9px 0px 0px;
  box-sizing: border-box;
}
.image-8-icon {
  align-self: stretch;
  height: 39px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
  z-index: 1;
}
.image-8-wrapper {
  height: 65px;
  width: 154px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 0px var(--padding-7xl);
  box-sizing: border-box;
}
.inbox1 {
  align-self: stretch;
  border-radius: var(--br-7xs);
  background-color: var(--color-darkslateblue-200);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--padding-5xs) var(--padding-11xl) var(--padding-5xs) 29px;
  box-sizing: border-box;
  max-width: 100%;
  gap: var(--gap-xl);
}
.frame-parent1 {
  width: 1065px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
  max-width: 100%;
}
.desktop-1-child {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0px var(--padding-12xs) 0px 0px;
  box-sizing: border-box;
  max-width: 100%;
  text-align: left;
  font-size: var(--font-size-xl);
  color: var(--color-white);
  font-family: var(--font-ruda);
}
.frame-child {
  align-self: stretch;
  height: 2px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: contain;
}
.services1 {
  margin: 0;
  height: 37px;
  width: 166px;
  position: relative;
  font-size: inherit;
  line-height: 37px;
  font-weight: 600;
  font-family: inherit;
  display: inline-block;
}
.services-container {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0px var(--padding-xl) 0px 523px;
}
.frame-item {
  height: 905px;
  width: 1.3px;
  position: absolute;
  margin: 0 !important;
  right: 442.9px;
  bottom: -481px;
  object-fit: contain;
  z-index: 1;
}
.from-sleek-uiux {
  align-self: stretch;
  height: 150px;
  position: relative;
  letter-spacing: 0.1em;
  line-height: 30px;
  display: inline-block;
}
.code-architect {
  height: 30px;
  flex: 1;
  position: relative;
  line-height: 27.5px;
  display: inline-block;
  max-width: 100%;
}
.code-architect-wrapper {
  width: 351px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-10xs);
  box-sizing: border-box;
  max-width: 100%;
  font-size: var(--font-size-base);
  font-family: var(--font-rock-salt);
}
.from-sleek-uiux-designs-to-po-parent {
  width: 506px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-15xl);
  min-width: 506px;
  max-width: 100%;
}
.ux-ui {
  align-self: stretch;
  height: 30px;
  position: relative;
  letter-spacing: 0.1em;
  line-height: 30px;
  display: inline-block;
}
.implementation {
  font-family: var(--font-oxanium);
}
.cms-implementation {
  height: 30px;
  flex: 1;
  position: relative;
  letter-spacing: 0.1em;
  line-height: 30px;
  display: inline-block;
}
.cms-implementation-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 0px var(--padding-mid);
  font-family: var(--font-saira);
}
.more-services {
  height: 28px;
  width: 98px;
  position: relative;
  font-size: var(--font-size-mini);
  line-height: 27.5px;
  font-weight: 600;
  font-family: var(--font-ruda);
  color: var(--color-white);
  text-align: left;
  display: inline-block;
}
.github-button1 {
  cursor: pointer;
  border: 1px solid var(--color-cornflowerblue-100);
  padding: var(--padding-7xs-5) var(--padding-11xl);
  background-color: transparent;
  border-radius: var(--br-3xs);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  white-space: nowrap;
}
.github-button1:hover {
  background-color: var(--color-cornflowerblue-300);
  border: 1px solid var(--color-cornflowerblue-200);
  box-sizing: border-box;
}
.custom-web-development-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-3xl);
  font-family: var(--font-oxanium);
}
.ux-ui-design-parent {
  width: 313px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-3xl);
  min-width: 313px;
  font-family: var(--font-oxygen);
}
.frame-parent4 {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 100%;
  gap: var(--gap-xl);
}
.line-group {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  max-width: 100%;
  font-size: var(--font-size-xl);
  font-family: var(--font-saira);
}
.frame-parent3 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-13xl);
  max-width: 100%;
}
.frame-wrapper2 {
  width: 983px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 7px;
  box-sizing: border-box;
  max-width: 100%;
}
.line-parent {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 87px;
  max-width: 100%;
}
.frame-wrapper1 {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-12xs) 0px 0px;
  box-sizing: border-box;
  max-width: 100%;
}
.frame-inner {
  height: 2px;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  object-fit: contain;
}
.input-transformers-inner {
  align-self: stretch;
  height: 2px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 0px 0px var(--padding-12xs);
  box-sizing: border-box;
  max-width: 100%;
}
.tools-i-specialize {
  margin: 0;
  height: 37px;
  width: 318px;
  position: relative;
  font-size: inherit;
  line-height: 110%;
  font-weight: 600;
  font-family: inherit;
  display: inline-block;
}
.tools-i-specialize-in-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-12xs);
}
.icons8-figma-100-1 {
  height: 40.9px;
  width: 40px;
  position: relative;
  object-fit: cover;
}
.figma {
  align-self: stretch;
  height: 28px;
  position: relative;
  line-height: 27.5px;
  display: inline-block;
}
.figma-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-8xs) 0px 0px;
}
.icons8-figma-100-1-parent {
  height: 40.9px;
  width: 186px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-mini);
}
.icons8-framer-the-only-tool-yo {
  width: 30px;
  height: 30px;
  position: relative;
  object-fit: cover;
}
.icons8-framer-the-only-tool-yo-wrapper {
  height: 33px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-10xs) 0px 0px;
  box-sizing: border-box;
}
.frame-parent10 {
  width: 160px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xl);
}
.frame-parent9 {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 100%;
  gap: var(--gap-xl);
}
.frame-wrapper4 {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-11xs) 0px var(--padding-12xs);
  box-sizing: border-box;
  max-width: 100%;
}
.icons8-webflow-48-1 {
  height: 40px;
  width: 40px;
  position: relative;
  object-fit: cover;
}
.webflow-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-7xs) 0px 0px;
}
.icons8-webflow-48-1-parent {
  height: 40px;
  width: 183px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-mini);
}
.icons8-vs-code-100-1-parent {
  height: 40px;
  width: 170px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-mini);
}
.frame-parent11 {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-xl);
}
.frame-parent8 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 23px;
  max-width: 100%;
  font-size: var(--font-size-xl);
  font-family: var(--font-roboto-mono);
}
.frame-parent7 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-15xl);
  max-width: 100%;
}
.frame-wrapper3 {
  width: 430px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 11px 0px 0px;
  box-sizing: border-box;
  min-width: 430px;
  max-width: 100%;
}
.experience {
  margin: 0;
  height: 37px;
  width: 241px;
  position: relative;
  font-size: inherit;
  line-height: 110%;
  font-weight: 600;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
}
.frame-parent6 {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 100%;
  gap: var(--gap-xl);
}
.icons8-notion-64-1-parent {
  width: 167px;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
  font-size: var(--font-size-xl);
  font-family: var(--font-roboto-mono);
}
.frame-parent5 {
  width: 910px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-16xl);
  max-width: 100%;
}
.input-transformers {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 0px var(--padding-17xl);
  box-sizing: border-box;
  gap: 56px;
  max-width: 100%;
  font-size: var(--font-size-16xl);
}
.projects1 {
  margin: 0;
  height: 105px;
  width: 345px;
  position: relative;
  font-size: inherit;
  line-height: 110%;
  text-transform: uppercase;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
  max-width: 100%;
}
.input-transforms-x {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0px var(--padding-xl) 0px 21px;
  box-sizing: border-box;
  max-width: 100%;
  text-align: center;
  font-size: 60px;
  font-family: var(--font-sarala);
}
.rectangle-div {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  border-radius: var(--br-5xs);
  background-color: var(--color-midnightblue);
}
.course-allocation-system {
  margin: 0;
  height: 33px;
  flex: 1;
  position: relative;
  font-size: inherit;
  line-height: 110%;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
  z-index: 1;
}
.course-allocation-system-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-45xl) 0px 71px;
  box-sizing: border-box;
  max-width: 100%;
}
.experience-my-java {
  align-self: stretch;
  height: 99px;
  position: relative;
  font-size: var(--font-size-xl);
  line-height: 110%;
  font-family: var(--font-share-tech);
  display: inline-block;
  flex-shrink: 0;
  z-index: 1;
}
.frame-parent14 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--gap-15xl);
  max-width: 100%;
}
.view {
  position: absolute;
  top: 5.5px;
  left: 40.5px;
  line-height: 27.5px;
  font-weight: 600;
  display: inline-block;
  min-width: 33px;
}
.github-button3 {
  height: 39px;
  flex: 1;
  position: relative;
  border-radius: var(--br-3xs);
  border: 1px solid var(--color-cornflowerblue-100);
  box-sizing: border-box;
  cursor: pointer;
  z-index: 2;
}
.github-button2 {
  width: 114px;
  border-radius: var(--br-3xs);
  border: 1px solid var(--color-cornflowerblue-100);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  z-index: 1;
}
.github-button-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0px var(--padding-xl);
  text-align: left;
  font-size: var(--font-size-mini);
  font-family: var(--font-ruda);
}
.rectangle-parent {
  position: absolute;
  top: 49px;
  left: 0px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--padding-82xl) var(--padding-12xs) var(--padding-6xl) 19px;
  box-sizing: border-box;
  gap: 14px;
  max-width: 100%;
}
.figma-component {
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 50%;
  background-color: var(--color-lightsteelblue);
  width: 100%;
  height: 100%;
  z-index: 1;
}
.icons8-course-assign-50-1 {
  position: absolute;
  top: 32px;
  left: 33px;
  width: 58px;
  height: 52px;
  object-fit: cover;
  z-index: 2;
}
.figma-component-parent {
  height: 116px;
  flex: 1;
  position: relative;
}
.frame-button {
  cursor: pointer;
  border: none;
  padding: 0;
  background-color: transparent;
  position: absolute;
  top: 0px;
  left: 199px;
  width: 123px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.frame-parent13 {
  height: 394px;
  flex: 1;
  position: relative;
  min-width: 325px;
  max-width: 100%;
}
.shape-cluster {
  width: 123px;
  height: 116px;
  position: absolute;
  margin: 0 !important;
  top: -48px;
  left: 174px;
  border-radius: 50%;
  background-color: var(--color-lightsteelblue);
  z-index: 1;
}
.full-stack-development-wrapper {
  width: 457px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-37xl);
  box-sizing: border-box;
  max-width: 100%;
}
.explore-my-full-stack {
  align-self: stretch;
  height: 83px;
  position: relative;
  font-size: var(--font-size-xl);
  line-height: 110%;
  font-family: var(--font-share-tech);
  display: inline-block;
  flex-shrink: 0;
  z-index: 1;
}
.view2 {
  height: 28px;
  width: 33px;
  position: relative;
  font-size: var(--font-size-mini);
  line-height: 27.5px;
  font-weight: 600;
  font-family: var(--font-ruda);
  color: var(--color-white);
  text-align: left;
  display: inline-block;
  min-width: 33px;
}
.github-button4 {
  cursor: pointer;
  border: 1px solid var(--color-cornflowerblue-100);
  padding: var(--padding-7xs-5) var(--padding-21xl) var(--padding-7xs-5) 39px;
  background-color: transparent;
  border-radius: var(--br-3xs);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  z-index: 1;
}
.github-button4:hover {
  background-color: var(--color-cornflowerblue-300);
  border: 1px solid var(--color-cornflowerblue-200);
  box-sizing: border-box;
}
.github-button-container {
  width: 452px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0px var(--padding-xl);
  box-sizing: border-box;
  max-width: 100%;
}
.image-set-parent {
  flex: 0.96;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-82xl) 10px var(--padding-6xl);
  box-sizing: border-box;
  position: relative;
  gap: var(--gap-13xl);
  min-width: 325px;
  max-width: 100%;
}
.frame-parent12 {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 65px;
  max-width: 100%;
  text-align: center;
  font-size: var(--font-size-11xl);
  font-family: var(--font-ruluko);
}
.frame-parent2 {
  width: 1066px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 106px;
  max-width: 100%;
}
.frame-section {
  width: 1180px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 0px 61px 0px;
  box-sizing: border-box;
  max-width: 100%;
  text-align: left;
  font-size: 40px;
  color: var(--color-white);
  font-family: var(--font-oxanium);
}
.company-website-view-child {
  width: 1294px;
  height: 492px;
  position: relative;
  border-radius: var(--br-xl);
  background-color: var(--color-dimgray);
  display: none;
  mix-blend-mode: normal;
  max-width: 100%;
}
.build {
  color: #013654;
}
.ready-to-build-container {
  margin: 0;
  height: 77px;
  width: 547px;
  position: relative;
  font-size: inherit;
  line-height: 110%;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
  max-width: 100%;
  z-index: 1;
}
.ready-to-build-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0px var(--padding-xl) 0px var(--padding-9xl);
  box-sizing: border-box;
  max-width: 100%;
}
.projects2 {
  color: var(--color-white);
}
.awesome-projects {
  margin: 0;
  align-self: stretch;
  height: 77px;
  position: relative;
  font-size: inherit;
  line-height: 110%;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  z-index: 1;
  color: var(--color-darkslategray-100);
}
.dropdown-menu {
  width: 705px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 10px;
  max-width: 100%;
}
.dropdown-menu-wrapper {
  width: 915px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0px var(--padding-xl);
  box-sizing: border-box;
  max-width: 100%;
}
.ready-to-elevate {
  align-self: stretch;
  height: 56px;
  position: relative;
  font-size: 25px;
  line-height: 110%;
  font-family: var(--font-ruluko);
  display: inline-block;
  z-index: 1;
}
.progress-bar {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 30px;
  max-width: 100%;
}
.hire-me {
  height: 28px;
  width: 56px;
  position: relative;
  font-size: var(--font-size-mini);
  line-height: 27.5px;
  font-weight: 600;
  font-family: var(--font-ruda);
  color: var(--color-white);
  text-align: left;
  display: inline-block;
  min-width: 56px;
}
.github-button5 {
  cursor: pointer;
  border: 1px solid var(--color-darkslategray-100);
  padding: var(--padding-5xs) 31px var(--padding-5xs) var(--padding-11xl);
  background-color: var(--color-darkslategray-100);
  border-radius: var(--br-3xs);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  white-space: nowrap;
  z-index: 1;
}
.github-button5:hover {
  background-color: var(--color-steelblue);
  border: 1px solid var(--color-steelblue);
  box-sizing: border-box;
}
.github-button-frame {
  width: 913px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  max-width: 100%;
}
.company-website-view {
  align-self: stretch;
  border-radius: var(--br-xl);
  background-color: var(--color-dimgray);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 53px 177px 75px 190px;
  box-sizing: border-box;
  gap: 70px;
  max-width: 100%;
}
.company-website-view-item {
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: var(--br-xl);
  background: linear-gradient(2.2deg, rgba(89, 89, 188, 0), #003a5c);
  width: 100%;
  height: 100%;
  display: none;
  mix-blend-mode: normal;
}
.company-website-view1 {
  align-self: stretch;
  height: 515px;
  position: relative;
  border-radius: var(--br-xl);
  background: linear-gradient(2.2deg, rgba(89, 89, 188, 0), #003a5c);
}
.company-website-view-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 0px 84px;
  box-sizing: border-box;
  gap: 108px;
  max-width: 100%;
  text-align: center;
  font-size: var(--font-size-51xl);
  color: var(--color-white);
  font-family: var(--font-ruda);
}
.logo {
  margin: 0;
  align-self: stretch;
  height: 35px;
  position: relative;
  font-size: inherit;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
}
.scroll-container {
  width: 321px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-9xs) 0px 0px;
  box-sizing: border-box;
  max-width: 100%;
}
.icon-linked-in {
  height: 39px;
  width: 40px;
  position: relative;
}
.icon-github {
  height: 39px;
  width: 40px;
  position: relative;
  cursor: pointer;
}
.icon-instagram {
  width: 40px;
  height: 39px;
  position: relative;
  cursor: pointer;
}
.date-picker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 0px var(--padding-11xs);
}
.icon-linked-in-parent {
  width: 220px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 50px;
}
.scroll-container-parent {
  width: 1065px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 100%;
  gap: var(--gap-xl);
}
.modal-window {
  width: 1231px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0px var(--padding-xl);
  box-sizing: border-box;
  max-width: 100%;
}
.divider-icon {
  align-self: stretch;
  height: 2px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: contain;
  margin-top: -1px;
}
.modal-window-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 37px;
  max-width: 100%;
}
.link {
  height: 20.1px;
  width: 96px;
  position: relative;
  line-height: 140.63%;
  display: inline-block;
}
.link1 {
  height: 20.1px;
  width: 103px;
  position: relative;
  line-height: 140.63%;
  display: inline-block;
}
.link-parent {
  width: 264px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-xl);
}
.frame-wrapper5 {
  width: 1210px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0px var(--padding-xl);
  box-sizing: border-box;
  max-width: 100%;
  text-align: center;
  font-size: var(--font-size-sm);
  font-family: var(--font-roboto);
}
.frame-parent15 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-8xl);
  max-width: 100%;
}
.desktop-1-inner1 {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-6xl);
  box-sizing: border-box;
  max-width: 100%;
  text-align: left;
  font-size: var(--font-size-9xl);
  color: var(--color-white);
  font-family: var(--font-righteous);
}
.desktop-1 {
  width: 100%;
  position: relative;
  background-color: var(--color-gray);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 89px 73px 59.89999999999963px;
  box-sizing: border-box;
  gap: 153px;
  letter-spacing: normal;
  text-align: left;
  font-size: var(--font-size-xl);
  color: var(--color-white);
  font-family: var(--font-roboto);
}

@media screen and (max-width: 1200px) {
  .frame-section {
    padding-bottom: var(--padding-21xl);
    box-sizing: border-box;
  }

  .company-website-view {
    padding-left: 95px;
    padding-right: var(--padding-69xl);
    box-sizing: border-box;
  }

  .company-website-view-parent {
    padding-bottom: 55px;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 1050px) {
  .transforming-ideas-into {
    font-size: var(--font-size-37xl);
    line-height: 62px;
  }

  .objectother-07-icon {
    flex: 1;
  }

  .frame-container {
    flex-wrap: wrap;
  }

  .inbox1 {
    flex-wrap: wrap;
  }

  .services1 {
    font-size: 32px;
    line-height: 35px;
  }

  .from-sleek-uiux-designs-to-po-parent {
    flex: 1;
  }

  .ux-ui-design-parent {
    flex: 1;
  }

  .frame-parent4 {
    flex-wrap: wrap;
    justify-content: center;
  }

  .line-parent {
    gap: 43px;
  }

  .tools-i-specialize {
    font-size: var(--font-size-9xl);
    line-height: 31px;
  }

  .experience {
    font-size: var(--font-size-9xl);
    line-height: 31px;
  }

  .projects1 {
    font-size: 48px;
    line-height: 53px;
  }

  .course-allocation-system {
    font-size: var(--font-size-5xl);
    line-height: 26px;
  }

  .frame-parent13 {
    flex: 1;
  }

  .image-set-parent {
    flex: 1;
  }

  .frame-parent12 {
    flex-wrap: wrap;
    gap: var(--gap-13xl);
  }

  .frame-parent2 {
    gap: 53px;
  }

  .frame-section {
    padding-bottom: var(--padding-7xl);
    box-sizing: border-box;
  }

  .ready-to-build-container {
    font-size: var(--font-size-37xl);
    line-height: 62px;
  }

  .awesome-projects {
    font-size: var(--font-size-37xl);
    line-height: 62px;
  }
}
@media screen and (max-width: 750px) {
  .frame-container {
    gap: var(--gap-base);
  }

  .frame-parent {
    gap: var(--gap-8xl);
  }

  .desktop-1-inner {
    padding-bottom: var(--padding-45xl);
    box-sizing: border-box;
  }

  .services-container {
    padding-left: 261px;
    box-sizing: border-box;
  }

  .from-sleek-uiux-designs-to-po-parent {
    gap: var(--gap-mid);
    min-width: 100%;
  }

  .frame-parent3 {
    gap: var(--gap-base);
  }

  .line-parent {
    gap: var(--gap-3xl);
  }

  .frame-wrapper3 {
    flex: 1;
    min-width: 100%;
  }

  .frame-parent6 {
    flex-wrap: wrap;
  }

  .input-transformers {
    gap: 28px;
  }

  .course-allocation-system-wrapper {
    padding-left: 35px;
    padding-right: 32px;
    box-sizing: border-box;
  }

  .frame-parent14 {
    gap: var(--gap-mid);
  }

  .image-set-parent {
    gap: var(--gap-base);
  }

  .frame-parent12 {
    gap: var(--gap-base);
  }

  .frame-parent2 {
    gap: 26px;
  }

  .company-website-view {
    gap: var(--gap-16xl);
    padding: 34px 44px 49px 47px;
    box-sizing: border-box;
  }

  .company-website-view-parent {
    gap: 54px;
    padding-bottom: var(--padding-17xl);
    box-sizing: border-box;
  }

  .scroll-container-parent {
    flex-wrap: wrap;
  }

  .modal-window-parent {
    gap: 18px;
  }

  .desktop-1 {
    gap: 76px;
    padding-left: var(--padding-17xl);
    padding-right: var(--padding-17xl);
    box-sizing: border-box;
  }
}
@media screen and (max-width: 450px) {
  .company-parent {
    display: none;
  }

  .shape-container {
    width: 113px;
  }

  .zakir-matloob {
    font-size: var(--font-size-base);
    line-height: 22px;
  }

  .transforming-ideas-into {
    font-size: var(--font-size-23xl);
    line-height: 46px;
  }

  .as-a-software {
    font-size: var(--font-size-base);
    line-height: 22px;
  }

  .linkedin {
    font-size: var(--font-size-base);
    line-height: 22px;
  }

  .github {
    font-size: var(--font-size-base);
    line-height: 22px;
  }

  .linkedin-button-parent {
    flex-wrap: wrap;
  }

  .featured-on {
    font-size: var(--font-size-base);
    line-height: 22px;
  }

  .services1 {
    font-size: var(--font-size-5xl);
    line-height: 26px;
  }

  .services-container {
    padding-left: var(--padding-xl);
    box-sizing: border-box;
  }

  .from-sleek-uiux {
    font-size: var(--font-size-base);
    line-height: 24px;
  }

  .ux-ui {
    font-size: var(--font-size-base);
    line-height: 24px;
  }

  .cms-implementation {
    font-size: var(--font-size-base);
    line-height: 24px;
  }

  .tools-i-specialize {
    font-size: var(--font-size-2xl);
    line-height: 23px;
  }

  .figma {
    font-size: var(--font-size-base);
    line-height: 22px;
  }

  .frame-parent9 {
    flex-wrap: wrap;
  }

  .frame-parent11 {
    flex-wrap: wrap;
  }

  .frame-parent7 {
    gap: var(--gap-mid);
  }

  .experience {
    font-size: var(--font-size-2xl);
    line-height: 23px;
  }

  .frame-parent5 {
    gap: var(--gap-mid);
  }

  .projects1 {
    font-size: 36px;
    line-height: 40px;
  }

  .course-allocation-system {
    font-size: var(--font-size-lg);
    line-height: 20px;
  }

  .experience-my-java {
    font-size: var(--font-size-base);
    line-height: 18px;
  }

  .full-stack-development-wrapper {
    padding-left: var(--padding-9xl);
    padding-right: var(--padding-9xl);
    box-sizing: border-box;
  }

  .explore-my-full-stack {
    font-size: var(--font-size-base);
    line-height: 18px;
  }

  .frame-section {
    padding-bottom: var(--padding-xl);
    box-sizing: border-box;
  }

  .ready-to-build-container {
    font-size: var(--font-size-23xl);
    line-height: 46px;
  }

  .awesome-projects {
    font-size: var(--font-size-23xl);
    line-height: 46px;
  }

  .ready-to-elevate {
    font-size: var(--font-size-xl);
    line-height: 22px;
  }

  .company-website-view {
    gap: var(--gap-mid);
    padding-left: var(--padding-xl);
    padding-right: var(--padding-xl);
    box-sizing: border-box;
  }

  .company-website-view-parent {
    gap: var(--gap-8xl);
  }

  .logo {
    font-size: 22px;
  }

  .desktop-1 {
    gap: 38px;
  }
}