body {
  overflow-x: hidden;
  width: 100vw;
}

.highlight {
  color: transparent;
  background-image: linear-gradient(to left, #b980c0, #c068b1);
  -webkit-background-clip: text;
  background-clip: text;
}

.highlight-alt {
  color: transparent;
  background-image: linear-gradient(to left, #9268be, #ac67aa);
  -webkit-background-clip: text;
  background-clip: text;
}

.title-gradient-subtile {
  color: transparent;
  background-image: linear-gradient(to top, #680b7c, #95287d);
  -webkit-background-clip: text;
  background-clip: text;
}

.cta-button {
  background-color: #3D63EA;
  border: none;
  border-radius: 0.5em;
  box-shadow: 0px 0px 5em rgba(0, 0, 0, 0.1490196078);
  color: white;
  padding: 20px 30px;
  margin-top: 20px;
  font-size: 1em;
  font-weight: 600;
  font-family: Inter, sans-serif;
  align-self: start;
  transition: all 0.3s ease;
}
.cta-button:hover {
  cursor: pointer;
  background-color: rgb(255, 255, 255);
  color: black;
  box-shadow: 0px 0px 5em rgb(255, 242, 58);
}

.divider {
  display: block;
  width: 4em;
  height: 5px;
  border-radius: 1em;
  background-image: linear-gradient(to right, #5f057b, #f16280);
}

h1 {
  width: 40vw;
  font-size: 4em;
  font-weight: 300;
}
h1 span {
  font-weight: 700;
}

h2 {
  text-align: center;
  color: #1A202C;
  font-size: 2.5em;
  font-weight: 600;
}

p {
  color: #4A5568;
  line-height: 1.8em;
  font-size: larger;
}

.circle {
  position: absolute;
  width: 8em;
  height: 8em;
}

@keyframes scrolling-paralax {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(40vw);
  }
}
.onscroll {
  animation: scrolling-paralax linear;
  animation-timeline: scroll(root);
}

.circle-ofset-develop-software {
  translate: 0px -5vh;
}

.nav-bar {
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  height: 3em;
  background-color: white;
  box-shadow: 0px 14px 2em rgba(141, 141, 141, 0.1450980392);
}
.nav-bar img {
  height: 40px;
  width: auto;
  transition: all 0.3s ease;
}
.nav-bar img:hover {
  cursor: pointer;
  scale: 1.05;
}
.nav-bar button {
  background-image: linear-gradient(to left, #570480, #656ff1);
  border: none;
  border-radius: 0.5em;
  color: white;
  padding: 12px 22px;
  font-size: 1em;
  font-weight: 600;
  font-family: Inter, sans-serif;
}
.nav-bar button:hover {
  cursor: pointer;
  background-image: linear-gradient(to left, #45036a, #4e5ccc);
}
.nav-bar div {
  display: flex;
  gap: 15px;
  transition: color 0.3s ease;
}
.nav-bar div a {
  transition: color 0.3s ease;
  translate: 0px 0.4em;
  padding: 10px 15px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}
.nav-bar div a span {
  height: 2px;
  width: 0%;
  background-color: transparent;
  display: block;
  margin-top: 5px;
  transition: all 0.3s ease;
}
.nav-bar div a:hover {
  color: blue;
}
.nav-bar div a:hover span {
  height: 2px;
  width: 100%;
  background-color: blue;
  display: block;
  margin-top: 5px;
  transition: all 0.3s ease;
}

header {
  position: relative;
  overflow: hidden;
}
header .circle-ofset {
  left: 40%;
  translate: 0px -5em;
}

.hero {
  margin-top: 2em;
  margin-bottom: 3em;
  height: 90vh;
  display: flex;
  gap: 2%;
  justify-content: center;
  align-items: center;
}
.hero h1 {
  width: 40vw;
  font-size: 4em;
  font-weight: 300;
}
.hero h1 span {
  font-weight: 700;
}
.hero div {
  width: 40vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.hero img {
  width: 100%;
  height: auto;
}

.service-showcase {
  width: 100%;
  height: 80vh;
  min-height: 40em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-top: 3px solid #e7daed;
  border-bottom: 3px solid #e7daed;
  background-color: #f9f9ff;
}
.service-showcase .service-cards {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.service-showcase .service-cards div {
  width: 20em;
  min-width: 20em;
  height: 18em;
  min-height: 18em;
  padding: 18px;
  box-shadow: 0px 0px 1.5em rgba(0, 0, 0, 0.1490196078);
  border-radius: 1em;
  background-color: #fafafa;
  transition: all 0.3s ease;
}
.service-showcase .service-cards div:hover {
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 5;
  translate: 0px 10px;
  border-color: #d34f7f;
  border-style: solid;
  border-width: 2px;
}
.service-showcase .service-cards div h2 {
  margin-bottom: 0%;
}
.service-showcase .service-cards div h3 {
  font-size: 1.3em;
  font-weight: 600;
}
.service-showcase .service-cards div p {
  color: #4A5568;
  line-height: 1.5em;
}
.service-showcase .service-cards div img {
  width: 50px;
  height: auto;
  margin-top: 20px;
}
.service-showcase #index-map {
  width: 10em;
  height: 3em;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.service-showcase #index-map .marker {
  width: 1em;
  height: 1em;
  border-style: solid;
  border-width: 2px;
  border-radius: 50%;
  border-color: #cbd5e0;
}
.service-showcase #index-map #_3 {
  background-color: #77147c;
}
.service-showcase #index-map-fancier {
  position: absolute;
  translate: 30em 15em;
  width: 10em;
  height: 3em;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.service-showcase #index-map-fancier .progress-bar {
  width: 6em;
  height: 3px;
  border-radius: 10px;
  background-color: #e2e8f0;
}
.service-showcase #index-map-fancier .progress-bar .liquid {
  display: block;
  width: 30%;
  height: 100%;
  background-color: #57007b;
}

.develop-software {
  overflow: hidden;
  position: relative;
  margin-top: 0px;
  margin-bottom: 0px;
}
.develop-software .circle-ofset {
  position: absolute;
  width: 8em;
  height: 8em;
  top: -18vh;
  left: 10%;
}
.develop-software {
  gap: 5%;
}
.develop-software h2 {
  text-align: left;
  font-size: 2.5em;
  font-weight: 400;
}
.develop-software span {
  font-weight: 700;
}
.develop-software img {
  width: 100%;
  height: auto;
}
.develop-software button {
  background-color: transparent;
  box-shadow: none;
  color: #57007b;
  padding: 0px;
}
.develop-software button span {
  height: 2px;
  width: 0%;
  background-color: transparent;
  display: block;
  margin-top: 5px;
  transition: all 0.3s ease;
}
.develop-software button:hover {
  color: blue;
}
.develop-software button:hover span {
  height: 2px;
  width: 100%;
  background-color: blue;
  display: block;
  margin-top: 5px;
  transition: all 0.3s ease;
}
.develop-software button:hover {
  box-shadow: none;
}
.develop-software button div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  width: 100%;
}
.develop-software button div img {
  width: 2em;
  height: 2em;
  color: #57007b;
}
.develop-software .image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40%;
  height: 60%;
  border-radius: 1em;
  overflow: hidden;
  background-color: wheat;
  background-image: url(/assets/develop-software.jpg);
  background-size: cover;
  background-position: center;
}
.develop-software .image-wrapper span {
  z-index: 10;
  display: flex;
  justify-content: center;
  align-content: center;
  width: 6em;
  height: 6em;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
}
.develop-software .image-wrapper span span {
  display: block;
  width: 4em;
  height: 4em;
  background-color: #57007b;
  border-radius: 50%;
  border-style: solid;
  border-color: #ffffff;
  border-width: 0.2em;
  margin-top: 15%;
  background-image: url(/assets/icons/playbutton.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 30%;
}

.sponsors {
  margin-top: 4em;
  margin-bottom: 3em;
  width: 100vw;
  height: 70vh;
}
.sponsors .titles {
  margin: 5em;
}
.sponsors h3 {
  width: 40vw;
  font-size: 2em;
  font-weight: 300;
}
.sponsors h3 span {
  font-weight: 700;
}
.sponsors .logo-carousel {
  background-color: #F7F7FA;
  border-style: solid;
  border-width: 1px;
  border-color: #E7DAED;
  border-left: 0px;
  border-right: 0px;
  width: 100%;
  height: 50%;
}
.sponsors .logo-carousel div {
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-repeat: repeat-x;
  background-position-y: center;
  background-image: url(/assets/logo-carousel.png);
  animation: 15s linear 1s infinite running sliding;
}
@keyframes sliding {
  from {
    background-position-x: 0evw;
  }
  to {
    background-position-x: 100vw;
  }
}

.customers {
  width: 100vw;
  height: 80vh;
}
.customers .text-part {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  margin-bottom: 5em;
}
.customers .text-part h3 {
  text-align: center;
  font-size: 2em;
  font-weight: 400;
  text-align: center;
  margin-top: 1.5%;
  line-height: 1.4em;
}
.customers .text-part span {
  font-weight: 700;
}
.customers .text-part p {
  width: 50%;
  text-align: center;
}
.customers .text-part #starting-quote {
  position: absolute;
  translate: -28em 10em;
}
.customers .text-part #ending-quote {
  position: absolute;
  translate: 28em 19em;
}
.customers .customers-rating {
  display: flex;
  align-items: center;
  justify-content: space-around;
  scale: 85%;
}
.customers .customers-rating #btn-left {
  position: absolute;
  top: 0px;
  left: -4em;
}
.customers .customers-rating #btn-right {
  position: absolute;
  top: 0px;
  right: -7em;
}
.customers .customers-rating p {
  margin-top: 0px;
  margin-bottom: 2px;
}
.customers .customers-rating .undertext {
  margin: 0px;
  font-size: 1em;
  color: gray;
  opacity: 70%;
}
.customers .customers-rating .Romena-De-Silva {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
}
.customers .customers-rating .Romena-De-Silva .image-wrapper {
  width: 8em;
  height: 8em;
  background-image: url(/assets/customers/4de5ee43416a180e121b6d036b1ee22fdc94b647.png);
  display: block;
  border-radius: 50%;
  background-size: 120%;
  background-position: 100% 30%;
  background-repeat: no-repeat;
  opacity: 60%;
}
.customers .customers-rating .Romena-De-Silva .star-rating {
  display: flex;
  width: 80%;
  justify-content: space-around;
  align-items: center;
  margin: 1em;
}
.customers .customers-rating .Romena-De-Silva .star-rating .star {
  width: 1em;
  height: 1em;
}
.customers .customers-rating .Romena-De-Silva .star-rating #_1 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Romena-De-Silva .star-rating #_2 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Romena-De-Silva .star-rating #_3 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Romena-De-Silva .star-rating #_4 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Romena-De-Silva .star-rating #_5 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Romena-De-Silva2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
}
.customers .customers-rating .Romena-De-Silva2 .image-wrapper {
  width: 8em;
  height: 8em;
  background-image: url(/assets/customers/816e55f6a9c5df90cf55132a114710192b094769.png);
  display: block;
  border-radius: 50%;
  background-size: 120%;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 60%;
}
.customers .customers-rating .Romena-De-Silva2 .star-rating {
  display: flex;
  width: 80%;
  justify-content: space-around;
  align-items: center;
  margin: 1em;
}
.customers .customers-rating .Romena-De-Silva2 .star-rating .star {
  width: 1em;
  height: 1em;
}
.customers .customers-rating .Romena-De-Silva2 .star-rating #_1 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Romena-De-Silva2 .star-rating #_2 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Romena-De-Silva2 .star-rating #_3 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Romena-De-Silva2 .star-rating #_4 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Romena-De-Silva2 .star-rating #_5 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Imran-Khan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
}
.customers .customers-rating .Imran-Khan .image-wrapper {
  width: 8em;
  height: 8em;
  background-image: url(/assets/customers/20bddc413821884b1b750f32eb71e3d8454f450e.jpg);
  display: block;
  border-radius: 50%;
  background-size: 120%;
  background-position: 50% 20%;
  background-repeat: no-repeat;
  opacity: 60%;
}
.customers .customers-rating .Imran-Khan .star-rating {
  display: flex;
  width: 80%;
  justify-content: space-around;
  align-items: center;
  margin: 1em;
}
.customers .customers-rating .Imran-Khan .star-rating .star {
  width: 1em;
  height: 1em;
}
.customers .customers-rating .Imran-Khan .star-rating #_1 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Imran-Khan .star-rating #_2 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Imran-Khan .star-rating #_3 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Imran-Khan .star-rating #_4 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Imran-Khan .star-rating #_5 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Romena-De-Silva3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
}
.customers .customers-rating .Romena-De-Silva3 .image-wrapper {
  width: 8em;
  height: 8em;
  background-image: url(/assets/customers/1e5fb31fc0336221ceab7b3d7e32f85064455486.png);
  display: block;
  border-radius: 50%;
  background-size: 120%;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 60%;
}
.customers .customers-rating .Romena-De-Silva3 .star-rating {
  display: flex;
  width: 80%;
  justify-content: space-around;
  align-items: center;
  margin: 1em;
}
.customers .customers-rating .Romena-De-Silva3 .star-rating .star {
  width: 1em;
  height: 1em;
}
.customers .customers-rating .Romena-De-Silva3 .star-rating #_1 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Romena-De-Silva3 .star-rating #_2 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Romena-De-Silva3 .star-rating #_3 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Romena-De-Silva3 .star-rating #_4 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Romena-De-Silva3 .star-rating #_5 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Romena-De-Silva4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
}
.customers .customers-rating .Romena-De-Silva4 .image-wrapper {
  width: 8em;
  height: 8em;
  background-image: url(/assets/customers/e9adccaef71c7c5ac22433b04c2da96d31a0bdcf.png);
  display: block;
  border-radius: 50%;
  background-size: 120%;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 60%;
}
.customers .customers-rating .Romena-De-Silva4 .star-rating {
  display: flex;
  width: 80%;
  justify-content: space-around;
  align-items: center;
  margin: 1em;
}
.customers .customers-rating .Romena-De-Silva4 .star-rating .star {
  width: 1em;
  height: 1em;
}
.customers .customers-rating .Romena-De-Silva4 .star-rating #_1 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Romena-De-Silva4 .star-rating #_2 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Romena-De-Silva4 .star-rating #_3 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Romena-De-Silva4 .star-rating #_4 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .Romena-De-Silva4 .star-rating #_5 {
  background-image: url(/assets/icons/filled-star.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.customers .customers-rating .bookmarked {
  scale: 120%;
  translate: 0px 2em;
}
.customers .customers-rating .bookmarked .image-wrapper {
  opacity: 100%;
}
.customers .customers-rating .bookmarked p {
  color: blue;
  font-weight: 600;
}
.customers .customers-rating .bookmarked .undertext {
  margin: 0px;
  font-size: 1em;
  color: black;
  opacity: 70%;
}

.case-studie {
  width: 100vw;
  height: auto;
  padding-bottom: 3em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3em;
  background-color: #F7F7FA;
  border-style: solid;
  border-width: 1px;
  border-color: #E7DAED;
  border-left: 0px;
  border-right: 0px;
}
.case-studie .title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2em;
  margin: 3em;
}
.case-studie .title h3 {
  text-align: center;
  font-size: 2em;
  font-weight: 400;
  text-align: center;
  margin-top: 1.5%;
  line-height: 1.4em;
}
.case-studie .title span {
  font-weight: 700;
}
.case-studie .title p {
  width: 50%;
  text-align: center;
}
.case-studie .card {
  display: flex;
  height: 28em;
  gap: 1em;
}
.case-studie #_1 {
  background-color: #f1f2ff;
  border-color: #d1e1f0;
  border-style: solid;
  border-width: 1px;
  border-radius: 1em;
  border-top-right-radius: 2em;
  border-bottom-right-radius: 2em;
  height: 28em;
  margin-left: 10em;
  margin-right: 10em;
}
.case-studie #_1 .image-wrapper {
  background-image: url(/assets/cf00e01c33e587f7051a755a12924ff02714b828.jpg);
  background-position: center center;
  background-size: cover;
  border-radius: 0.9em;
  width: 45%;
  height: 100%;
}
.case-studie #_1 .text-area {
  width: 50%;
  margin: 2em;
}
.case-studie #_1 .text-area h3 {
  font-size: 2em;
  color: #2d3748;
}
.case-studie #_1 .text-area p {
  color: #4a5568;
  width: 100%;
}
.case-studie #_1 .text-area button {
  background-color: transparent;
  color: #4a5568;
  border: transparent;
  font-family: Inter, sans-serif;
  position: absolute;
  right: 15em;
}
.case-studie #_1 .text-area button span {
  height: 2px;
  width: 0%;
  background-color: transparent;
  display: block;
  margin-top: 5px;
  transition: all 0.3s ease;
}
.case-studie #_1 .text-area button:hover {
  color: blue;
}
.case-studie #_1 .text-area button:hover span {
  height: 2px;
  width: 100%;
  background-color: blue;
  display: block;
  margin-top: 5px;
  transition: all 0.3s ease;
}
.case-studie #_2 {
  background-color: #f0fff7;
  border-color: #d1e1f0;
  border-style: solid;
  border-width: 1px;
  border-radius: 1em;
  border-top-right-radius: 2em;
  border-bottom-right-radius: 2em;
  height: 28em;
  margin-left: 10em;
  margin-right: 10em;
}
.case-studie #_2 .image-wrapper {
  background-image: url(/assets/af19f7dccd07e129bd606a5f1b38eb0f49e88e10.jpg);
  background-position: center center;
  background-size: cover;
  border-radius: 0.9em;
  width: 45%;
  height: 100%;
}
.case-studie #_2 .text-area {
  width: 50%;
  margin: 2em;
}
.case-studie #_2 .text-area h3 {
  font-size: 2em;
  color: #2d3748;
}
.case-studie #_2 .text-area p {
  color: #4a5568;
  width: 100%;
}
.case-studie #_2 .text-area button {
  background-color: transparent;
  color: #4a5568;
  border: transparent;
  font-family: Inter, sans-serif;
  position: absolute;
  right: 15em;
}
.case-studie #_2 .text-area button span {
  height: 2px;
  width: 0%;
  background-color: transparent;
  display: block;
  margin-top: 5px;
  transition: all 0.3s ease;
}
.case-studie #_2 .text-area button:hover {
  color: blue;
}
.case-studie #_2 .text-area button:hover span {
  height: 2px;
  width: 100%;
  background-color: blue;
  display: block;
  margin-top: 5px;
  transition: all 0.3s ease;
}
.case-studie #_3 {
  background-color: #fff4f4;
  border-color: #d1e1f0;
  border-style: solid;
  border-width: 1px;
  border-radius: 1em;
  border-top-right-radius: 2em;
  border-bottom-right-radius: 2em;
  height: 28em;
  margin-left: 10em;
  margin-right: 10em;
}
.case-studie #_3 .image-wrapper {
  background-image: url(/assets/d3e26e2ddf8ab2a7507f9f19331d52e50cf953e1.jpg);
  background-position: center center;
  background-size: cover;
  border-radius: 0.9em;
  width: 45%;
  height: 100%;
}
.case-studie #_3 .text-area {
  width: 50%;
  margin: 2em;
}
.case-studie #_3 .text-area h3 {
  font-size: 2em;
  color: #2d3748;
}
.case-studie #_3 .text-area p {
  color: #4a5568;
  width: 100%;
}
.case-studie #_3 .text-area button {
  background-color: transparent;
  color: #4a5568;
  border: transparent;
  font-family: Inter, sans-serif;
  position: absolute;
  right: 15em;
}
.case-studie #_3 .text-area button span {
  height: 2px;
  width: 0%;
  background-color: transparent;
  display: block;
  margin-top: 5px;
  transition: all 0.3s ease;
}
.case-studie #_3 .text-area button:hover {
  color: blue;
}
.case-studie #_3 .text-area button:hover span {
  height: 2px;
  width: 100%;
  background-color: blue;
  display: block;
  margin-top: 5px;
  transition: all 0.3s ease;
}
.case-studie .bottom-button {
  background-color: transparent;
  color: #4a5568;
  border: transparent;
  font-family: Inter, sans-serif;
  font-size: 1em;
  position: relative;
  align-self: flex-end;
  bottom: 0;
  right: 10%;
}
.case-studie .bottom-button span {
  height: 2px;
  width: 0%;
  background-color: transparent;
  display: block;
  margin-top: 5px;
  transition: all 0.3s ease;
}
.case-studie .bottom-button:hover {
  color: blue;
}
.case-studie .bottom-button:hover span {
  height: 2px;
  width: 100%;
  background-color: blue;
  display: block;
  margin-top: 5px;
  transition: all 0.3s ease;
}

.way-of-building {
  margin-top: 1em;
  margin-bottom: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.way-of-building .title {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.way-of-building .title h3 {
  text-align: center;
  font-size: 2em;
  font-weight: 400;
  text-align: center;
  margin-top: 1.5%;
  line-height: 1.4em;
}
.way-of-building .title span {
  font-weight: 700;
}
.way-of-building .title p {
  width: 50%;
  text-align: center;
}
.way-of-building .title {
  gap: 2em;
  margin: 2em;
}
.way-of-building .explaination-area {
  margin-bottom: 8em;
  display: flex;
  width: 80%;
}
.way-of-building .explaination-area .text h3 {
  text-align: center;
  font-size: 2em;
  font-weight: 400;
  text-align: center;
  margin-top: 1.5%;
  line-height: 1.4em;
}
.way-of-building .explaination-area .text span {
  font-weight: 700;
}
.way-of-building .explaination-area .text p {
  width: 50%;
  text-align: center;
}
.way-of-building .explaination-area .text .overide-basic-title-alignement {
  text-align: left;
}
.way-of-building .explaination-area .text .semi-bold {
  font-weight: 600;
}
.way-of-building .explaination-area .text p {
  width: 80%;
}
.way-of-building .explaination-area .text {
  width: 52%;
}
.way-of-building .explaination-area .text .callout {
  border: 0px;
  border-left: 2px;
  border-color: #d24e7f;
  border-style: solid;
  font-style: italic;
  opacity: 60%;
  padding: 0.5em;
  text-align: left;
}
.way-of-building .explaination-area .text .credits {
  display: flex;
}
.way-of-building .explaination-area .text .credits div {
  width: 20em;
}
.way-of-building .explaination-area .text .credits div p {
  padding-left: 1em;
  font-size: 0.8em;
  text-align: left;
  margin: 0em;
}
.way-of-building .explaination-area .img-wrapper {
  width: 48%;
  height: 30em;
  border-radius: 0.5em;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.way-of-building .explaination-area .img-wrapper img {
  width: auto;
  height: auto;
}
.way-of-building .revert {
  flex-direction: row-reverse;
  gap: 6em;
}
.way-of-building #credit1 {
  background-position: center center;
  background-size: contain;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background-image: url(assets/customers/good-person-ig.png);
}
.way-of-building #credit2 {
  background-position: center center;
  background-size: contain;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background-image: url(assets/customers/lady.png);
}
.way-of-building #credit3 {
  background-position: center center;
  background-size: contain;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background-image: url(assets/customers/ihate-thatone.png);
}

.developement-aproach {
  background-color: #F7F7FA;
  border-style: solid;
  border-width: 1px;
  border-color: #E7DAED;
  border-left: 0px;
  border-right: 0px;
  height: auto;
  padding-top: 3em;
  padding-bottom: 3em;
}
.developement-aproach .title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2em;
}
.developement-aproach .title h3 {
  text-align: center;
  font-size: 2em;
  font-weight: 400;
  text-align: center;
  margin-top: 1.5%;
  line-height: 1.4em;
}
.developement-aproach .title span {
  font-weight: 700;
}
.developement-aproach .title p {
  width: 50%;
  text-align: center;
}
.developement-aproach .card-part {
  height: auto;
  margin-left: 8%;
  margin-right: 8%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em;
}
.developement-aproach .card-part .card {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 2em;
  background-color: #fafafa;
  border-color: #e7daed;
  border-width: 2px;
  border-style: solid;
  padding: 2em;
  min-height: 10em;
  min-width: 35vw;
  height: 10em;
  width: 35vw;
}
.developement-aproach .card-part .card .icon-wrapper {
  display: flex;
  justify-content: center;
  padding-top: 1em;
  width: 5em;
  height: 100%;
}
.developement-aproach .card-part .card .icon-wrapper span {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1em;
  width: 5em;
  height: 5em;
}
.developement-aproach .card-part .card .icon-wrapper span img {
  width: 55%;
  height: 55%;
}
.developement-aproach .card-part .card .icon-wrapper #_1 {
  background-color: #27272e;
}
.developement-aproach .card-part .card .icon-wrapper #_2 {
  background-image: linear-gradient(to left, #52a0f6, #67d8f2);
}
.developement-aproach .card-part .card .icon-wrapper #_3 {
  background-image: linear-gradient(to left, #ff3e9a, #ff92ae);
}
.developement-aproach .card-part .card .icon-wrapper #_4 {
  background-image: linear-gradient(to left, #63e9ec, #28e79a);
}
.developement-aproach .card-part .card .icon-wrapper #_5 {
  background-image: linear-gradient(to left, #f8996e, #fee85e);
}
.developement-aproach .card-part .card .icon-wrapper #_6 {
  background-image: linear-gradient(to left, #ee6080, #60067c);
}

.tech-stack {
  margin-top: 4em;
  margin-bottom: 4em;
  width: 100vw;
  height: auto;
}
.tech-stack .titles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
}
.tech-stack .titles h3 {
  text-align: center;
  font-size: 2em;
  font-weight: 400;
  text-align: center;
  margin-top: 1.5%;
  line-height: 1.4em;
}
.tech-stack .titles span {
  font-weight: 700;
}
.tech-stack .titles p {
  width: 50%;
  text-align: center;
}
.tech-stack .titles {
  margin-top: 0px;
}
.tech-stack .tech-nav {
  display: flex;
  justify-content: space-around;
  margin-left: 25%;
  margin-right: 25%;
  gap: 0.5em;
}
.tech-stack .tech-nav button {
  font-size: 1em;
  font-weight: 400;
  font-family: Inter, sans-serif;
  transition: color 0.3s ease;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  background-color: transparent;
  border-style: hidden;
}
.tech-stack .tech-nav button span {
  height: 2px;
  width: 0%;
  background-color: transparent;
  display: block;
  margin-top: 5px;
  transition: all 0.3s ease;
}
.tech-stack .tech-nav button:hover {
  color: blue;
}
.tech-stack .tech-nav button:hover span {
  height: 2px;
  width: 100%;
  background-color: blue;
  display: block;
  margin-top: 5px;
  transition: all 0.3s ease;
}
.tech-stack .tech-nav .focused span {
  height: 2px;
  width: 100%;
  background-color: black;
  display: block;
  margin-top: 5px;
  transition: all 0.3s ease;
}
.tech-stack .logo-galery {
  width: auto;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5.5em;
  margin-left: 15%;
  margin-right: 15%;
  margin-top: 5em;
  padding: 1em;
}
.tech-stack .logo-galery img {
  width: auto;
  height: 4em;
}
.tech-stack .discrete-divider {
  display: block;
  width: 100vw;
  height: 2px;
  margin-top: 8em;
  background-color: rgba(128, 128, 128, 0.2);
}

.alcaline-works {
  margin-left: 5%;
  margin-right: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: full;
  height: auto;
}
.alcaline-works .title {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 5em;
}
.alcaline-works .title h3 {
  text-align: center;
  font-size: 2em;
  font-weight: 400;
  text-align: center;
  margin-top: 1.5%;
  line-height: 1.4em;
}
.alcaline-works .title span {
  font-weight: 700;
}
.alcaline-works .title p {
  width: 50%;
  text-align: center;
}
.alcaline-works .diagram {
  height: 50em;
  display: flex;
  flex-direction: column;
}
.alcaline-works .diagram .top-row {
  height: 18em;
  display: flex;
  gap: 5%;
}
.alcaline-works .diagram .top-row .card-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 28%;
}
.alcaline-works .diagram .top-row .card-wrapper .card {
  padding: 0.2em;
  padding-left: 1em;
  padding-right: 1em;
  border-style: solid;
  border-width: 0.2em;
  border-color: #E7DAED;
  border-radius: 1em;
  width: auto;
  height: auto;
  min-height: 13em;
}
.alcaline-works .diagram .top-row .card-wrapper .card h4 {
  color: #1A202C;
  font-weight: 700;
  font-size: 1.2rem;
}
.alcaline-works .diagram .top-row .card-wrapper .card h4 span {
  background-image: linear-gradient(#da5380, #6d0e7c);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 0.8em;
}
.alcaline-works .diagram .top-row .card-wrapper .card p {
  color: #718096;
  font-size: 1.8vh;
}
.alcaline-works .diagram .top-row .card-wrapper .arrow {
  margin-top: 2em;
  height: 3em;
  width: 0.2rem;
  background-image: linear-gradient(#f76680, #b23a7e);
}
.alcaline-works .diagram .top-row {
  translate: -2em 0px;
}
.alcaline-works .diagram .bottom-row {
  height: 18em;
  display: flex;
  gap: 5%;
}
.alcaline-works .diagram .bottom-row .card-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column-reverse;
  height: 100%;
  width: 28%;
}
.alcaline-works .diagram .bottom-row .card-wrapper .card {
  padding: 0.2em;
  padding-left: 1em;
  padding-right: 1em;
  border-style: solid;
  border-width: 0.2em;
  border-color: #E7DAED;
  border-radius: 1em;
  width: auto;
  height: auto;
  min-height: 13em;
}
.alcaline-works .diagram .bottom-row .card-wrapper .card h4 {
  color: #1A202C;
  font-weight: 700;
  font-size: 1.2rem;
}
.alcaline-works .diagram .bottom-row .card-wrapper .card h4 span {
  background-image: linear-gradient(#da5380, #6d0e7c);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 0.8em;
}
.alcaline-works .diagram .bottom-row .card-wrapper .card p {
  color: #718096;
  font-size: 1.8vh;
}
.alcaline-works .diagram .bottom-row .card-wrapper .arrow {
  margin-bottom: 2em;
  height: 3em;
  width: 0.2rem;
  background-image: linear-gradient(#f76680, #b23a7e);
}
.alcaline-works .diagram .bottom-row {
  translate: 2em 0px;
}
.alcaline-works .diagram .timeline {
  height: 0.2em;
  width: full;
  display: flex;
  gap: 3em;
}
.alcaline-works .diagram .timeline span {
  width: 100%;
  height: 100%;
  display: block;
  background-image: linear-gradient(#f76680, #b23a7e);
}
.alcaline-works .diagram .timeline img {
  scale: 2000%;
}

.featured-resources {
  width: 100vw;
  height: auto;
}
.featured-resources .title {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.featured-resources .title h3 {
  text-align: center;
  font-size: 2em;
  font-weight: 400;
  text-align: center;
  margin-top: 1.5%;
  line-height: 1.4em;
}
.featured-resources .title span {
  font-weight: 700;
}
.featured-resources .title p {
  width: 50%;
  text-align: center;
}
.featured-resources .article-carousel {
  overflow-x: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  width: 100%;
  padding-top: 2em;
  padding-bottom: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5em;
  height: auto;
}
.featured-resources .article-carousel .card {
  width: 23em;
  height: 28em;
}
.featured-resources .article-carousel .card .image-wrapper {
  color: black;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 55%;
  border-radius: 1em;
}
.featured-resources .article-carousel .card .image-wrapper img {
  transition: all 0.2s ease-out;
  scale: 105%;
}
.featured-resources .article-carousel .card .image-wrapper:hover img {
  transition: all 0.2s ease-out;
  scale: 100%;
}
.featured-resources .article-carousel .card .card-content {
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.featured-resources .article-carousel .card .card-content button {
  font-size: 1em;
  font-weight: 400;
  font-family: Inter, sans-serif;
  transition: color 0.3s ease;
  color: blue;
  align-self: flex-end;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  background-color: transparent;
  border-style: hidden;
}
.featured-resources .article-carousel .card .card-content button span {
  height: 2px;
  width: 0%;
  background-color: transparent;
  display: block;
  margin-top: 5px;
  transition: all 0.3s ease;
}
.featured-resources .article-carousel .card .card-content button:hover {
  color: blue;
}
.featured-resources .article-carousel .card .card-content button:hover span {
  height: 2px;
  width: 100%;
  background-color: blue;
  display: block;
  margin-top: 5px;
  transition: all 0.3s ease;
}

.hire-cto {
  margin-top: 2em;
}
.hire-cto .large-card {
  background-image: linear-gradient(#F1F1F5, #E4ECF7);
  padding: 7em;
  margin: 5em;
  border-radius: 2em;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.hire-cto .large-card h3 {
  width: 60%;
  font-weight: 700;
  font-size: 3rem;
}
.hire-cto .large-card h3 h3 {
  text-align: center;
  font-size: 2em;
  font-weight: 400;
  text-align: center;
  margin-top: 1.5%;
  line-height: 1.4em;
}
.hire-cto .large-card h3 span {
  font-weight: 700;
}
.hire-cto .large-card h3 p {
  width: 50%;
  text-align: center;
}
.hire-cto .large-card .button-wrapper {
  width: 30em;
  height: 20em;
  background-image: url("/assets/icons/button-sparkles.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hire-cto .cta-overide {
  align-self: center;
  background-image: linear-gradient(#f26463, #ffc157);
  scale: 140%;
  translate: 0em -0.5em;
}
.hire-cto .cta-overide:hover {
  color: white;
}

footer {
  width: 100vw;
  height: 100vh;
}
footer .main-part {
  display: flex;
  justify-content: space-around;
}
footer .main-part h4 {
  color: black;
  font-weight: 700;
  font-size: large;
}
footer .main-part p {
  color: grey;
  width: 20em;
}
footer .main-part a {
  color: grey;
}
footer .main-part a span {
  height: 2px;
  width: 0%;
  background-color: transparent;
  display: block;
  margin-top: 5px;
  transition: all 0.3s ease;
}
footer .main-part a:hover {
  color: blue;
}
footer .main-part a:hover span {
  height: 2px;
  width: 100%;
  background-color: blue;
  display: block;
  margin-top: 5px;
  transition: all 0.3s ease;
}
footer .main-part .notice img {
  width: 15em;
  height: auto;
  margin-top: 1em;
  margin-top: 1em;
}
footer .main-part .links {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}
footer .main-part .socials {
  align-self: flex-end;
  display: flex;
  gap: 1em;
}
footer .main-part .socials button {
  width: 5em;
  height: 5em;
  background-color: #fafafa;
  border-radius: 50%;
  border-style: hidden;
  box-shadow: 0px 0px 3em rgba(0, 0, 0, 0.223);
}
footer .main-part .socials button .facebook {
  background-image: url("/assets/logo/facebook 1.png");
  background-position: center;
}

body {
  margin: 0;
  font-family: Inter, sans-serif;
}
body a {
  text-decoration: none;
  color: inherit;
}

/*# sourceMappingURL=build.css.map */