@font-face {
  font-family: Generalsans;
  src: url('../fonts/GeneralSans-Medium.woff2') format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Generalsans;
  src: url('../fonts/GeneralSans-MediumItalic.woff2') format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

:root {
  --dark-color: #151515;
  --gray: #bbb;
  --light-color: #fefbf6;
}

body {
  color: #333;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.section-hero {
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  position: relative;
}

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

.vector {
  background-color: var(--dark-color);
  -webkit-text-fill-color: transparent;
  object-fit: cover;
  -webkit-background-clip: text;
  background-clip: text;
  width: 95vw;
  max-width: 95vw;
  max-height: 95vw;
  display: block;
  overflow: visible;
}

.main-hero {
  grid-column-gap: 7vw;
  grid-row-gap: 7vw;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.title-xl {
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Generalsans, Arial, sans-serif;
  font-size: 2vw;
  font-weight: 500;
  line-height: 120%;
}

.text-span {
  background-color: var(--gray);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.text-span-2, .text-span-3 {
  background-color: var(--dark-color);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.mantova {
  background-color: var(--gray);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.text-span-4 {
  background-color: var(--dark-color);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.main-header {
  z-index: 999;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  color: var(--dark-color);
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 100vw;
  height: 7vw;
  padding-top: 3vw;
  padding-left: 4vw;
  padding-right: 4vw;
  display: flex;
  position: fixed;
}

.body {
  background-color: var(--light-color);
}

.services {
  color: var(--dark-color);
  justify-content: center;
  align-items: center;
  width: 9vw;
  height: 2vw;
  display: flex;
}

.title-m {
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-text-decoration-color: var(--dark-color);
  text-decoration-color: var(--dark-color);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Generalsans, Arial, sans-serif;
  font-size: 1vw;
  font-weight: 500;
  line-height: 120%;
}

.buttons {
  grid-column-gap: 4vw;
  grid-row-gap: 4vw;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.about-us {
  color: var(--dark-color);
  justify-content: center;
  align-items: center;
  width: 9vw;
  height: 2vw;
  display: flex;
}

.contact-us {
  border: 1px solid #000;
  border-radius: 200vw;
  justify-content: center;
  align-items: center;
  width: 9vw;
  height: 2vw;
  display: flex;
}

.section-about {
  background-color: var(--dark-color);
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 100vw;
  height: 120vh;
  display: flex;
  position: relative;
}

.text-span-5 {
  background-color: var(--gray);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.title-m-about {
  color: var(--light-color);
  text-align: center;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Generalsans, Arial, sans-serif;
  font-size: 1vw;
  font-weight: 500;
  line-height: 120%;
  text-decoration: none;
}

.text-span-6, .text-span-7, .text-span-8, .text-span-9 {
  color: var(--gray);
}

.section-project {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100vw;
  height: 200vh;
  max-height: 200vh;
  display: flex;
  position: relative;
}

.text-span-10 {
  background-color: var(--gray);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.logo {
  justify-content: center;
  align-items: center;
  width: 10vw;
  height: 4vw;
  display: flex;
}

.section-project-intro {
  grid-column-gap: 7vw;
  grid-row-gap: 7vw;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  display: flex;
}

.hero-text {
  margin-bottom: 5vw;
}

.section-project-show {
  grid-column-gap: 4vw;
  grid-row-gap: 4vw;
  flex-flow: wrap;
  place-content: stretch flex-end;
  align-items: flex-start;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  max-height: 100vh;
  padding-top: 5vw;
  padding-left: 5vw;
  padding-right: 5vw;
  display: flex;
}

.project-title {
  color: var(--dark-color);
  text-align: right;
  justify-content: flex-end;
  align-items: flex-start;
  width: 20vw;
  height: 7vw;
  font-family: Generalsans, Arial, sans-serif;
  font-size: 3vw;
  font-weight: 500;
  line-height: 120%;
  display: block;
  position: absolute;
  inset: 0% 3vw 0% auto;
}

.light-text {
  background-color: var(--light-color);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.slider {
  width: 45vw;
  height: 40vw;
}

.project-description {
  text-align: left;
  width: 32vw;
  height: 15vw;
  position: relative;
  top: 20vw;
}

.title-m-projects {
  color: var(--dark-color);
  text-align: left;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Generalsans, Arial, sans-serif;
  font-size: 1vw;
  font-weight: 500;
  line-height: 120%;
  text-decoration: none;
}

.columns {
  width: 100vw;
  height: 100vh;
}

.column {
  height: 100vh;
}

.column-2 {
  height: 100vh;
  padding-left: 0;
  padding-right: 0;
}

.next-button {
  border: 1px solid #000;
  border-radius: 200vw;
  justify-content: center;
  align-items: center;
  width: 6vw;
  height: 2vw;
  display: flex;
  position: relative;
  top: 20vw;
}

.indicator {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  text-align: right;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 5vw;
  height: 2vw;
  display: flex;
  position: relative;
  inset: 18.1vw -36vw 0% auto;
  overflow: hidden;
}

.title-image {
  text-align: right;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Generalsans, Arial, sans-serif;
  font-size: 3vw;
  font-weight: 500;
  line-height: 120%;
}

.right-arrow {
  opacity: 0;
  width: 7vw;
  height: 3vw;
  position: absolute;
  top: 32vw;
  left: -128vw;
}

.icon {
  -webkit-text-fill-color: transparent;
  background-color: red;
  -webkit-background-clip: text;
  background-clip: text;
}

.left-arrow {
  display: none;
}

.image {
  width: 100%;
}

.count-10, .count-9, .count-8, .count-7, .count-6, .count-5, .count-4, .count-3, .count-2, .count-1 {
  text-align: right;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Generalsans, Arial, sans-serif;
  font-size: 1vw;
  font-weight: 500;
  line-height: 120%;
  text-decoration: none;
  display: none;
}

.image-2 {
  width: 100%;
  height: 100%;
}

.section-hi {
  grid-column-gap: 2vw;
  grid-row-gap: 2vw;
  background-color: var(--dark-color);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100vw;
  height: 50vh;
  max-height: 50vh;
  padding-bottom: 0;
  display: flex;
}

.section-hi-info {
  padding-top: 1vw;
}

.title-xxl {
  color: var(--gray);
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Generalsans, Arial, sans-serif;
  font-size: 4vw;
  font-weight: 500;
  line-height: 120%;
}

.title-xl-hi {
  color: var(--light-color);
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Generalsans, Arial, sans-serif;
  font-size: 3vw;
  font-weight: 500;
  line-height: 120%;
}

.text-span-11, .text-span-12 {
  color: var(--light-color);
}

.section-hi-social {
  width: 30vw;
}

.title-m-hi {
  color: var(--light-color);
  text-align: center;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Generalsans, Arial, sans-serif;
  font-size: 1vw;
  font-weight: 500;
  line-height: 120%;
  text-decoration: none;
}

.aftershape {
  justify-content: center;
  align-items: center;
  width: 9vw;
  height: 2vw;
  display: flex;
  position: absolute;
  left: 45%;
}

.link-block {
  text-decoration: none;
  -webkit-text-decoration-color: var(--dark-color);
  text-decoration-color: var(--dark-color);
  -webkit-text-decoration-skip-ink: auto;
  text-decoration-skip-ink: auto;
}

.link-block-2 {
  text-decoration: none;
}

.link {
  color: var(--light-color);
  text-decoration: none;
  -webkit-text-decoration-color: var(--light-color);
  text-decoration-color: var(--light-color);
}

.image-3 {
  width: 3vw;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.title-m-copy {
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-text-decoration-color: var(--dark-color);
  text-decoration-color: var(--dark-color);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Generalsans, Arial, sans-serif;
  font-size: 1vw;
  font-weight: 500;
  line-height: 120%;
}


@font-face {
  font-family: 'Generalsans';
  src: url('../fonts/GeneralSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Generalsans';
  src: url('../fonts/GeneralSans-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}