@font-face {
  font-family: Interdisplay;
  src: url('../fonts/InterDisplay-Bold.ttf') format("truetype"), url('../fonts/InterDisplay-ExtraBold.ttf') format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Interdisplay;
  src: url('../fonts/InterDisplay-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Interdisplay;
  src: url('../fonts/InterDisplay-Medium.ttf') format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Interdisplay;
  src: url('../fonts/InterDisplay-Black.ttf') format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Interdisplay;
  src: url('../fonts/InterDisplay-SemiBold.ttf') format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --_color---white-shade--white: white;
  --body-font: Boldonse, sans-serif;
  --_color---dark-shade--black: #212121;
  --_typography---font-size--body-text-1: 16px;
  --_typography---line-height--xl: 170%;
  --_typography---font-weight--regular: 400;
  --_typography---font-size--h1: 64px;
  --_typography---line-height--l: 150%;
  --_typography---font-size--h2: 48px;
  --_typography---font-size--h3: 40px;
  --_typography---font-size--h4: 32px;
  --_typography---font-size--h5: 24px;
  --_typography---font-size--h6: 20px;
  --secondary-font: Interdisplay, Arial, sans-serif;
  --_spacing---container-padding--spacing--s: 50px;
  --_spacing---container-padding--spacing--m: 100px;
  --_spacing---container-padding--spacing--l: 200px;
  --_color---grey-shade--stroke-black: #22222224;
  --_spacing---container-padding--default: 15px;
  --_color---white-shade--transparent: transparent;
  --_typography---font-size--body-text-2: 18px;
  --_typography---font-size--button-text: 14px;
  --_typography---line-height--s: 100%;
  --_typography---font-weight--bold: 700;
  --_color---dark-shade--body-black: #555;
  --_color---white-shade--stroke-white: #ffffff29;
  --_color---primary-color--primary: #de6040;
  --_color---grey-shade--grey: #f1f1f1;
  --_color---white-shade--body-white: #ffffffb3;
  --_typography---font-size--big-text: 116px;
  --_typography---letter-spacing--big-text: -2px;
  --_typography---font-weight--medium: 500;
  --_color---white-shade--white-600: #ffffff0f;
  --_typography---font-weight--semi-bold: 600;
  --_typography---line-height--m: 120%;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

body {
  background-color: var(--_color---white-shade--white);
  font-family: var(--body-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--body-text-1);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font-weight--regular);
  --_spacing---container-padding--spacing--s: 50px;
  --_spacing---container-padding--spacing--m: 100px;
  --_spacing---container-padding--spacing--l: 200px;
  --_spacing---container-padding--default: 15px;
  --body-font: Boldonse, sans-serif;
  --secondary-font: Interdisplay, Arial, sans-serif;
  --_color---white-shade--white: white;
  --_color---dark-shade--black: #212121;
  --_color---grey-shade--stroke-black: #22222224;
  --_color---white-shade--transparent: transparent;
  --_color---dark-shade--body-black: #555;
  --_color---white-shade--stroke-white: #ffffff29;
  --_color---primary-color--primary: #de6040;
  --_color---grey-shade--grey: #f1f1f1;
  --_color---white-shade--body-white: #ffffffb3;
  --_color---white-shade--white-600: #ffffff0f;
  --_typography---font-size--body-text-1: 16px;
  --_typography---line-height--xl: 170%;
  --_typography---font-weight--regular: 400;
  --_typography---font-size--h1: 64px;
  --_typography---line-height--l: 150%;
  --_typography---font-size--h2: 48px;
  --_typography---font-size--h3: 40px;
  --_typography---font-size--h4: 32px;
  --_typography---font-size--h5: 24px;
  --_typography---font-size--h6: 20px;
  --_typography---font-size--body-text-2: 18px;
  --_typography---font-size--button-text: 14px;
  --_typography---line-height--s: 100%;
  --_typography---font-weight--bold: 700;
  --_typography---font-size--big-text: 116px;
  --_typography---letter-spacing--big-text: -2px;
  --_typography---font-weight--medium: 500;
  --_typography---font-weight--semi-bold: 600;
  --_typography---line-height--m: 120%;
}

h1 {
  font-family: var(--body-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--h1);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
  margin-top: 0;
  margin-bottom: 0;
}

h2 {
  font-family: var(--body-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--h2);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
  margin-top: 0;
  margin-bottom: 0;
}

h3 {
  font-family: var(--body-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--h3);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
  margin-top: 0;
  margin-bottom: 0;
}

h4 {
  font-family: var(--body-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--h4);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
  margin-top: 0;
  margin-bottom: 0;
}

h5 {
  font-family: var(--body-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--h5);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
  margin-top: 0;
  margin-bottom: 0;
}

h6 {
  font-family: var(--body-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--h6);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font-weight--regular);
  margin-top: 0;
  margin-bottom: 0;
}

p {
  font-family: var(--secondary-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--body-text-1);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font-weight--regular);
  margin-bottom: 0;
}

a {
  color: var(--_color---dark-shade--black);
  text-decoration: none;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

.section {
  padding-top: var(--_spacing---container-padding--spacing--s);
  padding-bottom: var(--_spacing---container-padding--spacing--s);
}

.section.hero {
  padding-top: 152px;
}

.section.utility {
  background-color: var(--_color---white-shade--white);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 550px;
  display: flex;
}

.section.work-for-desktop {
  background-color: var(--_color---dark-shade--black);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: 120px;
  padding-bottom: 120px;
  display: flex;
  position: relative;
  overflow: clip;
}

.section.work-for-tablet {
  padding-top: var(--_spacing---container-padding--spacing--m);
  padding-bottom: var(--_spacing---container-padding--spacing--m);
  background-color: var(--_color---dark-shade--black);
  display: none;
}

.section.reach {
  padding-top: var(--_spacing---container-padding--spacing--l);
  padding-bottom: var(--_spacing---container-padding--spacing--l);
}

.section.blog {
  padding-top: var(--_spacing---container-padding--spacing--l);
  padding-bottom: var(--_spacing---container-padding--spacing--m);
}

.section.faq {
  padding-top: var(--_spacing---container-padding--spacing--m);
  padding-bottom: var(--_spacing---container-padding--spacing--m);
}

.section.footer {
  padding-top: var(--_spacing---container-padding--spacing--m);
  background-color: var(--_color---dark-shade--black);
  padding-bottom: 0;
}

.section.common-page {
  border-bottom: 1px solid var(--_color---grey-shade--stroke-black);
  padding-top: 192px;
  padding-bottom: 80px;
}

.section.all-project {
  padding-top: var(--_spacing---container-padding--spacing--l);
  padding-bottom: var(--_spacing---container-padding--spacing--l);
}

.section.project-details-page {
  padding-top: 292px;
  padding-bottom: var(--_spacing---container-padding--spacing--l);
  border-bottom: 1px solid var(--_color---grey-shade--stroke-black);
}

.section.common-details-wrap {
  padding-top: var(--_spacing---container-padding--spacing--m);
  padding-bottom: var(--_spacing---container-padding--spacing--l);
}

.section.common-page-2 {
  padding-top: 100px;
  padding-bottom: var(--_spacing---container-padding--spacing--m);
}

.section.get-in {
  padding-top: var(--_spacing---container-padding--spacing--l);
  padding-bottom: 0;
}

.section.license {
  padding-bottom: var(--_spacing---container-padding--spacing--l);
}

.container {
  width: 100%;
  max-width: 1330px;
  padding-right: var(--_spacing---container-padding--default);
  padding-left: var(--_spacing---container-padding--default);
  margin-left: auto;
  margin-right: auto;
}

.hero-wrapper {
  margin-bottom: 30px;
}

.navbar {
  background-color: var(--_color---white-shade--transparent);
  margin-top: 26px;
  position: absolute;
  left: 0;
  right: 0;
}

.navbar-content-flex {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.style-guide-hero-para {
  text-align: center;
  width: 100%;
  max-width: 444px;
}

.common-heading {
  font-family: var(--body-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--h1);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
  text-align: center;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}

.drop-menu-text {
  font-family: var(--body-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--body-text-2);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
  text-transform: uppercase;
  white-space: nowrap;
}

.drop-menu-list {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.button-text {
  font-family: var(--secondary-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--button-text);
  line-height: var(--_typography---line-height--s);
  font-weight: var(--_typography---font-weight--bold);
  text-transform: uppercase;
  white-space: nowrap;
}

.button-text.white {
  color: var(--_color---white-shade--white);
}

.button-text.get-in {
  opacity: .6;
  color: var(--_color---white-shade--white);
}

.brand-logo {
  width: 100%;
  max-width: 108px;
}

.color-box-wrapper {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.style-top-wrap {
  background-color: var(--_color---dark-shade--black);
  margin-bottom: 50px;
  padding: 20px;
}

.body-text-2 {
  font-family: var(--secondary-font);
  color: var(--_color---dark-shade--body-black);
  font-size: var(--_typography---font-size--body-text-2);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font-weight--regular);
}

.body-text-2.black {
  color: var(--_color---dark-shade--black);
}

.menu-colum {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
}

.color-code {
  font-family: var(--secondary-font);
  font-size: var(--_typography---font-size--body-text-1);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font-weight--regular);
  text-transform: uppercase;
}

.color-code._2 {
  color: #fff;
}

.all-paragraph-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.color-code-wrap {
  background-color: var(--_color---white-shade--white);
  justify-content: center;
  align-items: center;
  padding: 7px 10px;
  display: flex;
}

.color-code-wrap._2 {
  background-color: var(--_color---dark-shade--black);
}

.all-heading-wrapper {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.color-box {
  background-color: #1c1e3f;
  justify-content: flex-start;
  align-items: flex-end;
  height: 210px;
  padding: 20px;
  display: flex;
}

.color-box.body-daak-bg {
  background-color: var(--_color---dark-shade--body-black);
}

.color-box.white-200 {
  border: 1px solid var(--_color---grey-shade--stroke-black);
  background-color: var(--_color---white-shade--stroke-white);
}

.color-box.white-14 {
  background-color: var(--_color---grey-shade--stroke-black);
  border: 1px solid #d5edca;
}

.color-box.primary {
  background-color: var(--_color---primary-color--primary);
}

.color-box.black-bg {
  background-color: var(--_color---dark-shade--black);
}

.color-box.light-bg {
  border: 1px solid var(--_color---grey-shade--stroke-black);
  background-color: var(--_color---grey-shade--grey);
}

.color-box.dark-14 {
  border: 1px solid var(--_color---grey-shade--stroke-black);
  background-color: var(--_color---white-shade--body-white);
}

.button-wrap {
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.drop-inner-box {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  background-color: #fff;
  border: 1px solid #1c1e3f;
  border-radius: 10px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  padding: 40px;
  display: grid;
}

.drop-inner-box.tablet {
  display: none;
}

.drop-inner-box.desktop {
  border-width: 1px;
  border-color: var(--_color---grey-shade--stroke-black);
  background-color: var(--_color---white-shade--white);
  border-radius: 0;
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.style-top-title {
  color: var(--_color---white-shade--white);
  font-size: var(--_typography---font-size--h6);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font-weight--regular);
}

.style-guide-wrapper {
  grid-column-gap: 120px;
  grid-row-gap: 120px;
  flex-flow: column;
  display: flex;
}

.button-arrow-wrap {
  border: 1px solid var(--_color---primary-color--primary);
  background-color: var(--_color---primary-color--primary);
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  display: flex;
  overflow: hidden;
}

.all-button-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.button-arrow {
  display: inline-block;
}

.body-text-1 {
  font-family: var(--secondary-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--body-text-1);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font-weight--regular);
}

.body-text-1.body-white {
  color: var(--_color---white-shade--body-white);
}

.body-text-1.body-dark {
  color: var(--_color---dark-shade--body-black);
}

.body-text-1.white {
  color: var(--_color---white-shade--white);
}

.nav-menu-wrapper {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.nav-link {
  height: var(--_typography---font-size--button-text);
  font-family: var(--secondary-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--button-text);
  line-height: var(--_typography---line-height--s);
  font-weight: var(--_typography---font-weight--bold);
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0;
  overflow: hidden;
}

.nav-text {
  font-family: var(--secondary-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--button-text);
  line-height: var(--_typography---line-height--s);
  font-weight: var(--_typography---font-weight--bold);
  text-transform: uppercase;
  white-space: nowrap;
}

.colum-line {
  width: 1px;
  color: var(--_color---dark-shade--black);
}

.primary-button {
  justify-content: flex-start;
  align-items: stretch;
  padding-left: 0;
  display: flex;
}

.button-text-wrap {
  height: var(--_typography---font-size--button-text);
  overflow: hidden;
}

.menu-button-wrap {
  display: none;
}

.hero-big-text {
  width: 100%;
  font-family: var(--body-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--big-text);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font-weight--regular);
  text-align: left;
  letter-spacing: var(--_typography---letter-spacing--big-text);
}

.hero-content {
  grid-column-gap: 120px;
  grid-row-gap: 120px;
  grid-template-rows: auto;
  grid-template-columns: .8fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 10px;
  display: flex;
}

.footer-img-wrap {
  overflow: hidden;
}

.hero-img {
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 570px;
}

.overflow-hidden {
  overflow: hidden;
}

.hero-right-content {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  display: flex;
}

.para-wrap.hero {
  width: 100%;
  max-width: 525px;
}

.sub-heading-wrapper {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 80px;
  display: flex;
}

.sub-heading-wrapper.reach {
  width: 100%;
  max-width: 600px;
}

.sub-heading {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  font-family: var(--body-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--h1);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
  justify-content: flex-start;
  align-items: flex-start;
}

.project-cms {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.project-collection {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
}

.project-block {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}

.project {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

.project._1 {
  padding-bottom: 140px;
}

.project-img {
  object-fit: cover;
  width: 100%;
  height: 500px;
}

.project-img._2 {
  height: 640px;
}

.project-content {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.project-name {
  font-family: var(--body-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--h5);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
  text-transform: capitalize;
}

.project-logo {
  width: 100%;
  min-width: 30px;
  max-width: 30px;
}

.project-category-wrap {
  background-color: var(--_color---white-shade--white);
  justify-content: center;
  align-items: center;
  padding: 7px 10px;
  display: inline-flex;
}

.project-category-wrapper {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  display: flex;
  position: absolute;
  top: 10px;
  right: 10px;
}

.button-text-block {
  border: 1px solid var(--_color---grey-shade--stroke-black);
  justify-content: center;
  align-items: center;
  padding: 0 26px;
  display: flex;
}

.common-wrapper {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.sub-span {
  color: var(--_color---white-shade--transparent);
  background-image: url('../images/Ellipse-3.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
}

.sub-span.showcase {
  background-size: 24px 24px;
  margin-right: 10px;
}

.showcase-grid {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  grid-template-rows: auto;
  grid-template-columns: .5fr .5fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.shocase-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-height: 500px;
}

.showcase-right {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.showcase-right.tablet {
  margin-top: 50px;
  display: none;
}

.showcase-right.hiden {
  align-items: stretch;
}

.tag-wrap {
  border: 1px solid var(--_color---grey-shade--stroke-black);
  justify-content: center;
  align-items: center;
  padding: 7px 10px;
  display: inline-flex;
}

.shocase-para-wrap {
  width: 100%;
  max-width: 310px;
  margin-top: 50px;
  margin-bottom: 30px;
  display: inline-block;
}

.shocase-para {
  font-family: var(--body-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--h6);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font-weight--regular);
}

.show-box {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  width: 100%;
  display: flex;
}

.single-showcase {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-bottom: 1px solid var(--_color---grey-shade--stroke-black);
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
  display: flex;
}

.showcase-name-box {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: auto;
  grid-template-columns: .7fr 1fr .5fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: grid;
}

.year-box {
  text-align: right;
}

.showreel-main-wrap {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  height: 180rem;
  display: flex;
}

.showreel-sticky-wrap {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80vh;
  display: flex;
  position: sticky;
  top: 60px;
  left: 15px;
  right: 15px;
  overflow: clip;
}

.showreel-block {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80vh;
  display: flex;
  position: relative;
}

.show-reel {
  color: #161616;
  letter-spacing: -7.2px;
  text-transform: uppercase;
  font-size: 360px;
  font-weight: 400;
  line-height: 110%;
}

.show-reel._1 {
  font-family: var(--body-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--h1);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
  letter-spacing: 0;
  text-transform: capitalize;
  margin-right: 60px;
  position: absolute;
  left: auto;
  right: calc(100% + .25rem);
}

.show-reel._2 {
  z-index: -1;
  font-family: var(--body-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--h1);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
  letter-spacing: 0;
  text-transform: capitalize;
  margin-left: 60px;
  position: absolute;
  left: calc(100% + .25rem);
  right: auto;
}

.showreel-inner-img-wrap {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: clip;
}

.work-inner {
  object-fit: cover;
  width: 100vw;
  min-width: 100vw;
  max-width: none;
  height: 100vh;
  min-height: 100vh;
  display: block;
  overflow: clip;
}

.recognise-wrap {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.round-img {
  border-radius: 100%;
  width: 100%;
  min-width: 24px;
  max-width: 24px;
}

.recognise-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  width: 100%;
  display: flex;
}

.recognise-box {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-bottom: 1px solid var(--_color---grey-shade--stroke-black);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr .5fr;
  grid-auto-columns: 1fr;
  place-items: center stretch;
  padding: 20px;
  display: grid;
  position: relative;
}

.recognise-left {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.recongnice-img-grid {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.recognise-middle {
  width: 100%;
  max-width: 420px;
}

.recognise-right {
  text-align: right;
}

.recognise-img {
  width: 100%;
  height: 100%;
  max-height: 80px;
}

.company-name {
  font-family: var(--body-font);
  color: var(--_color---white-shade--white);
  font-size: var(--_typography---font-size--h5);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
}

.work-wrapper {
  flex-flow: column;
}

.work-wrapper.tablet {
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.work-title-wrap {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 803px;
  margin-bottom: 80px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: sticky;
  top: 80px;
}

.work-title {
  font-family: var(--body-font);
  color: var(--_color---white-shade--white);
  font-size: var(--_typography---font-size--big-text);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
  text-align: center;
}

.work-title.tablet {
  text-align: left;
}

.working-step-wrapper {
  z-index: 11;
  grid-column-gap: 100px;
  grid-row-gap: 100px;
  background-color: var(--_color---dark-shade--black);
  grid-template-rows: auto;
  grid-template-columns: 1fr .25fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  width: 100%;
  display: flex;
  position: relative;
}

.work-left {
  width: 100%;
  max-width: 500px;
}

.processing-wrap {
  background-color: var(--_color---dark-shade--body-black);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 2px;
  height: auto;
  display: flex;
}

.work-right {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  max-width: 500px;
}

.single-work-box {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.single-work-box._01 {
  margin-top: 100px;
  margin-bottom: 600px;
}

.single-work-box._03 {
  margin-bottom: 500px;
}

.single-work-box._02 {
  margin-top: 500px;
  margin-bottom: 600px;
}

.single-work-box._04 {
  margin-bottom: 100px;
}

.work-step-content {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 500px;
  display: flex;
}

.work-step-content.tablet {
  max-width: none;
}

.serial-number {
  font-family: var(--secondary-font);
  color: var(--_color---primary-color--primary);
  font-size: var(--_typography---font-size--body-text-2);
  line-height: var(--_typography---line-height--s);
  font-weight: var(--_typography---font-weight--medium);
}

.work-step-title {
  font-family: var(--body-font);
  color: var(--_color---white-shade--white);
  font-size: var(--_typography---font-size--h2);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
}

.processing-line {
  background-color: var(--_color---primary-color--primary);
  width: 2px;
  height: 25%;
}

.work-step-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.work-single-box {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.reach-out-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.reach-right {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.form-block {
  margin-bottom: 0;
}

.form {
  flex-flow: column;
  display: flex;
}

.success-message {
  background-color: var(--_color---grey-shade--stroke-black);
  padding: 20px;
}

.error-message {
  background-color: var(--_color---dark-shade--black);
  margin-top: 10px;
  padding: 20px;
}

.field-label {
  font-family: var(--secondary-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--body-text-2);
  line-height: var(--_typography---line-height--s);
  font-weight: var(--_typography---font-weight--medium);
  margin-bottom: 0;
}

.text-field {
  border-style: solid;
  border-width: 0 0 1px;
  border-color: black black var(--_color---grey-shade--stroke-black);
  background-color: var(--_color---white-shade--white);
  font-family: var(--secondary-font);
  color: var(--_color---dark-shade--body-black);
  font-size: var(--_typography---font-size--body-text-1);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font-weight--regular);
  margin-bottom: 0;
  padding: 10px 0;
  transition: border-color .4s;
}

.text-field:hover {
  border-bottom-color: var(--_color---primary-color--primary);
}

.text-field:focus {
  border-bottom-color: var(--_color---primary-color--primary);
  background-color: var(--_color---white-shade--white);
}

.text-field::placeholder {
  font-family: var(--secondary-font);
  color: var(--_color---dark-shade--body-black);
  font-size: var(--_typography---font-size--body-text-1);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font-weight--regular);
}

.text-field.message {
  height: 160px;
  overflow: visible;
}

.field-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.field-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 20px;
  display: flex;
}

.field-block.message {
  flex-flow: column;
  margin-bottom: 30px;
}

.submit-button {
  border: 1px solid var(--_color---grey-shade--stroke-black);
  background-color: var(--_color---white-shade--transparent);
  font-family: var(--secondary-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--button-text);
  line-height: var(--_typography---line-height--s);
  font-weight: var(--_typography---font-weight--bold);
  text-align: center;
  text-transform: uppercase;
  padding: 16px 26px;
  transition: all .6s;
}

.submit-button:hover {
  border-color: var(--_color---dark-shade--black);
  background-color: var(--_color---dark-shade--black);
  color: var(--_color---white-shade--white);
}

.submit-button._2 {
  background-color: var(--_color---dark-shade--black);
  color: var(--_color---white-shade--white);
}

.submit-button._2:hover {
  background-color: var(--_color---white-shade--white);
  color: var(--_color---dark-shade--black);
}

.success-message-text {
  font-family: var(--secondary-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--body-text-1);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font-weight--regular);
  text-align: center;
}

.error-message-text {
  font-family: var(--secondary-font);
  color: var(--_color---white-shade--white);
  font-size: var(--_typography---font-size--body-text-1);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font-weight--regular);
  text-align: center;
}

.chat-box {
  background-color: var(--_color---grey-shade--grey);
  justify-content: space-between;
  padding: 10px;
  display: flex;
  overflow: hidden;
}

.chat-left {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  display: flex;
}

.chat-img-wrap {
  overflow: hidden;
}

.chat-content {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.chat-icon {
  width: 100%;
  max-width: 40px;
}

.chat-title {
  font-family: var(--body-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--h5);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
}

.chat-link {
  font-family: var(--secondary-font);
  color: var(--_color---dark-shade--body-black);
  font-size: var(--_typography---font-size--body-text-1);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font-weight--regular);
  transition: color .4s;
}

.chat-link:hover {
  color: var(--_color---dark-shade--black);
  text-decoration: underline;
}

.chat-img {
  object-fit: cover;
  width: 100%;
  max-width: 286px;
  height: 100%;
}

.logo-loop-wrapper {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.logo-loop-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.logo-block {
  border: 1px solid var(--_color---grey-shade--stroke-black);
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  padding: 24px 40px;
  display: flex;
}

.logo-block._2 {
  width: 500px;
}

.logo-block._3 {
  width: 550px;
}

.logo-icon {
  width: 60px;
  height: 60px;
}

.logo-name-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  display: inline-flex;
}

.logo-name {
  font-family: var(--body-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--h2);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
}

.company-growth {
  font-family: var(--body-font);
  color: var(--_color---primary-color--primary);
  font-size: var(--_typography---font-size--h5);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
}

.logo-inner {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: flex-start;
  align-items: center;
  display: inline-flex;
}

.blog-cms {
  grid-column-gap: 100px;
  grid-row-gap: 100px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  width: 100%;
  display: grid;
}

.blog-wrapper {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.blog-left {
  grid-column-gap: 300px;
  grid-row-gap: 300px;
  flex-flow: column;
  display: flex;
}

.blog-right {
  grid-column-gap: 300px;
  grid-row-gap: 300px;
  flex-flow: column;
  margin-top: 300px;
  display: flex;
}

.blog {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

.blog-card-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-height: 500px;
}

.blog-content-wrap {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.blog-name {
  font-family: var(--body-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--h5);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
}

.post-date-wrap {
  background-color: var(--_color---primary-color--primary);
  justify-content: center;
  align-items: center;
  padding: 7px 10px;
  display: inline-flex;
  position: absolute;
  top: 10px;
  right: 10px;
}

.faq-wrapper {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.faq-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.faq-list {
  background-color: #0000;
  border-radius: 10px;
  flex-flow: column;
  width: 100%;
  display: flex;
  position: static;
  overflow: hidden;
}

.faq-list.w--open {
  background-color: #0000;
  display: flex;
  overflow: hidden;
}

.faq-question {
  font-family: var(--body-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--h6);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font-weight--regular);
  white-space: pre-wrap;
}

.faq-answer-wrap {
  margin-top: 10px;
}

.faq-toggle {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 30px 0 0;
  display: flex;
}

.faq-para {
  font-family: var(--secondary-font);
  color: var(--_color---dark-shade--body-black);
  font-size: var(--_typography---font-size--body-text-1);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font-weight--regular);
}

.plus-minus {
  justify-content: center;
  align-items: center;
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.faq-content {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  background-color: #0000;
  border-radius: 10px;
  justify-content: space-between;
  align-items: stretch;
  padding: 0;
  display: flex;
}

.faq-dropdown {
  background-color: var(--_color---grey-shade--grey);
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: 0 30px 30px;
  overflow: hidden;
}

.footer-wrap {
  grid-column-gap: 100px;
  grid-row-gap: 100px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: start stretch;
  display: grid;
}

.footer-left, .footer-right {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.footer-menu-list {
  grid-column-gap: 26px;
  grid-row-gap: 26px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.footer-img {
  width: 100%;
  max-width: 350px;
  height: 100%;
}

.footer-menu-link {
  font-family: var(--body-font);
  color: var(--_color---white-shade--white);
  font-size: var(--_typography---font-size--h4);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
  transition: color .4s;
}

.footer-menu-link:hover {
  color: var(--_color---primary-color--primary);
}

.footer-info-wrap {
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.info-block {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.info-title {
  opacity: .3;
  font-family: var(--secondary-font);
  color: var(--_color---white-shade--white);
  font-size: var(--_typography---font-size--button-text);
  line-height: var(--_typography---line-height--s);
  font-weight: var(--_typography---font-weight--bold);
  text-transform: uppercase;
}

.info-link {
  font-family: var(--secondary-font);
  color: var(--_color---white-shade--white);
  font-size: var(--_typography---font-size--button-text);
  line-height: var(--_typography---line-height--s);
  font-weight: var(--_typography---font-weight--bold);
  text-transform: uppercase;
  transition: color .4s;
}

.info-link:hover {
  color: var(--_color---primary-color--primary);
}

.location-wrap {
  width: 100%;
  max-width: 170px;
}

.follow-link-wrapper {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.utility-link-wrap {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.footer-bottom-wrap {
  border-top: 1px solid var(--_color---dark-shade--body-black);
  justify-content: space-between;
  align-items: center;
  margin-top: 120px;
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
}

.copywrite-text {
  font-family: var(--secondary-font);
  color: var(--_color---white-shade--body-white);
  font-size: var(--_typography---font-size--body-text-1);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font-weight--regular);
}

.company-link {
  color: var(--_color---primary-color--primary);
}

.company-link:hover {
  text-decoration: underline;
}

.common-hero {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.common-hero-img-wrap {
  overflow: hidden;
}

.common-hero-img {
  width: 100%;
  max-width: 500px;
}

.common-hero-content {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 580px;
  display: flex;
}

.common-hero-content.common-details {
  text-align: center;
  justify-content: flex-start;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.common-hero-title {
  font-family: var(--body-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--h1);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
}

.common-hero-title.white {
  color: var(--_color---white-shade--white);
}

.project-collection-list {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.common-banner-img-wrap {
  flex-flow: column;
  width: 100%;
  margin-bottom: 60px;
  position: relative;
  overflow: hidden;
}

.common-banner-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-height: 700px;
}

.details-wrap {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.common-details h5 {
  font-family: var(--body-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--h5);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
  margin-bottom: 20px;
}

.common-details p {
  font-family: var(--secondary-font);
  color: var(--_color---dark-shade--body-black);
  font-size: var(--_typography---font-size--body-text-1);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font-weight--regular);
}

.common-details ul {
  margin-top: 30px;
  margin-bottom: 0;
  padding-left: 30px;
}

.common-details li {
  font-family: var(--secondary-font);
  color: var(--_color---dark-shade--body-black);
  font-size: var(--_typography---font-size--body-text-1);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font-weight--regular);
}

.common-details ol {
  margin-top: 40px;
  margin-bottom: 0;
  padding-left: 0;
  list-style-type: none;
}

.project-detail-middle-content {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.featured-img-1 {
  object-fit: cover;
  width: 100%;
  max-width: 280px;
}

.featured-img-wrap {
  overflow: hidden;
}

.project-content-wrap {
  width: 100%;
  max-width: 450px;
}

.featured-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-height: 500px;
}

.social-wrapper {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.social-link-wrapper {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.social-link {
  border: 1px solid var(--_color---grey-shade--stroke-black);
  background-color: var(--_color---grey-shade--grey);
  justify-content: center;
  align-items: center;
  width: 54px;
  height: 54px;
  display: flex;
}

.common-hero-wrapper-2 {
  background-color: var(--_color---dark-shade--black);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  padding: 110px 15px;
  display: flex;
}

.blog-collection-list {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.get-in-wrapper {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: .55fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.map-wrap {
  overflow: hidden;
}

.map-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.get-in-left {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  background-color: var(--_color---dark-shade--black);
  flex-flow: column;
  justify-content: space-between;
  padding: 40px;
  display: flex;
}

.get-in-title {
  font-family: var(--body-font);
  color: var(--_color---white-shade--white);
  font-size: var(--_typography---font-size--h6);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font-weight--regular);
}

.get-info-block {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  display: flex;
}

.get-info-wrap {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  border: 1px solid var(--_color---white-shade--stroke-white);
  background-color: var(--_color---white-shade--white-600);
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  display: flex;
}

.get-info-icon {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
}

.get-info-content {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.get-in-link {
  font-family: var(--secondary-font);
  color: var(--_color---white-shade--white);
  font-size: var(--_typography---font-size--body-text-1);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font-weight--regular);
  transition: color .4s;
}

.get-in-link:hover {
  color: var(--_color---primary-color--primary);
}

.follow-block {
  grid-column-gap: 18px;
  grid-row-gap: 18px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.follow-us-text {
  font-family: var(--secondary-font);
  color: var(--_color---white-shade--white);
  font-size: var(--_typography---font-size--button-text);
  line-height: var(--_typography---line-height--s);
  font-weight: var(--_typography---font-weight--bold);
  text-transform: uppercase;
}

.follow-wrap {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  display: flex;
}

.follow-link {
  border: 1px solid var(--_color---white-shade--stroke-white);
  background-color: var(--_color---white-shade--white-600);
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 50px;
  min-width: 50px;
  height: 50px;
  min-height: 50px;
  transition: background-color .4s;
  display: flex;
}

.follow-link:hover {
  background-color: var(--_color---primary-color--primary);
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  padding: 200px 15px;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.licence-image {
  object-fit: cover;
  border-radius: 10px;
  width: 100%;
  max-width: 576px;
}

.licence-content-wrapper {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.lummi-image-wrapp, .licence-image-block {
  border-radius: 10px;
  overflow: hidden;
}

.photography-text {
  font-family: var(--body-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--h2);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
}

.license-wrapp {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.licence-wrapper {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.licence-content-wrapp-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  display: flex;
}

.licence-paragraph {
  font-family: var(--secondary-font);
  color: var(--_color---dark-shade--black);
  font-size: var(--_typography---font-size--body-text-1);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font-weight--medium);
}

.licence-content-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.lummi-image {
  object-fit: cover;
  border-radius: 10px;
  width: 100%;
  max-width: 576px;
}

.licence-content-wrapp {
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}

.license-link {
  color: var(--_color---dark-shade--black);
  font-weight: var(--_typography---font-weight--bold);
  text-decoration: none;
}

.license-link:hover {
  text-decoration: underline;
}

.license-main-wrapper {
  grid-column-gap: 120px;
  grid-row-gap: 120px;
  flex-flow: column;
  display: flex;
}

.changelog-wrapper {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  display: flex;
}

.changelog-box {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  background-color: var(--_color---grey-shade--grey);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 40px;
  display: flex;
}

.version-block {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.version-title {
  font-size: var(--_typography---font-size--h4);
  line-height: var(--_typography---line-height--l);
  font-weight: var(--_typography---font-weight--regular);
}

.version-para {
  font-family: var(--secondary-font);
  color: var(--_color---dark-shade--body-black);
  font-size: var(--_typography---font-size--body-text-1);
  line-height: var(--_typography---line-height--xl);
}

.list {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  margin-bottom: 0;
  padding-left: 20px;
  display: flex;
}

.password-img {
  width: 100%;
  max-width: 350px;
}

.field-label-2 {
  display: none;
}

.password-heading {
  margin-top: 20px;
  margin-bottom: 20px;
}

.password-heading._2 {
  margin-bottom: 60px;
}

.password-fiels-wrap {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  width: 100%;
  display: flex;
}

._404-img {
  width: 100%;
  max-width: 600px;
}

.project-button-wrap, .blog-button-wrap {
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  display: flex;
}

.nav-dropdown-toggle {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  display: flex;
}

.dropdown-menu-list {
  background-color: #0000;
}

.dropdown-menu-list.w--open {
  background-color: #0000;
  padding-top: 30px;
}

.nav-dropdown {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 100%;
}

.nav-dropdown-icon {
  color: var(--_color---dark-shade--black);
  margin-right: 0;
  position: relative;
}

.recognise-overlay {
  z-index: -1;
  background-color: var(--_color---dark-shade--black);
  width: 100%;
  position: absolute;
  inset: 0%;
}

.image-reveal-animation-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.image-reveal-animation-block {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  height: 100%;
  display: grid;
}

.image-revealer-one {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background-color: #21212133;
  width: 100%;
  height: 100%;
}

.image-revealer-two {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background-color: #de604033;
  width: 100%;
  height: 100%;
}

.image-revealer-three {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background-color: #21212133;
  width: 100%;
  height: 100%;
}

.hero-img-wrap {
  position: relative;
  overflow: hidden;
}

.hire-button-text-wrap {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.all-button-open-close {
  cursor: pointer;
  justify-content: flex-end;
  align-items: flex-end;
  display: flex;
}

.hire-team {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: #fff;
  border: 1px solid #3b3b3b4d;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 10px 12px;
  text-decoration: none;
  display: flex;
}

.purchase-button-text {
  color: #fff;
  letter-spacing: 0;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  text-decoration: none;
}

.plus-icon-2 {
  width: 100%;
  max-width: 18px;
}

.corner-icon {
  width: auto;
}

.corner-icon._01.filter, .corner-icon._02.filter {
  filter: invert();
}

.plus-minus-2 {
  background-color: #fff;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 34px;
  min-width: 16px;
  height: 34px;
  min-height: 16px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.icon-area {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 18px;
  height: 18px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.get-this-template {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  color: #fff;
  background-color: #00e;
  border-radius: 8px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.get-this-template.orange-bg {
  background-color: #dd5d1b;
  text-decoration: none;
}

.hire-button-text {
  color: #000;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 120%;
}

.hire-button-text.purple {
  color: #2208e9;
  font-size: 12px;
}

.remove-this-button {
  z-index: 999999;
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  width: auto;
  display: flex;
  position: fixed;
  bottom: 15px;
  right: 15px;
}

.all-button-wrapp {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  display: flex;
}

.purchase-button {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 12px;
  display: flex;
}

.animateted-dot {
  background-color: #0bb822;
  border-radius: 100%;
  width: 12px;
  height: 12px;
}

@media screen and (min-width: 1280px) {
  body {
    --_typography---font-size--body-text-1: 16px;
    --_typography---line-height--xl: 170%;
    --_typography---font-weight--regular: 400;
    --_typography---font-size--h1: 64px;
    --_typography---line-height--l: 150%;
    --_typography---font-size--h2: 48px;
    --_typography---font-size--h3: 40px;
    --_typography---font-size--h4: 32px;
    --_typography---font-size--h5: 24px;
    --_typography---font-size--h6: 20px;
    --_typography---font-size--body-text-2: 18px;
    --_typography---font-size--button-text: 14px;
    --_typography---line-height--s: 100%;
    --_typography---font-weight--bold: 700;
    --_typography---font-size--big-text: 154px;
    --_typography---letter-spacing--big-text: -2px;
    --_typography---font-weight--medium: 500;
    --_typography---font-weight--semi-bold: 600;
    --_typography---line-height--m: 120%;
  }

  .style-guide-wrapper {
    grid-column-gap: 170px;
    grid-row-gap: 170px;
  }
}

@media screen and (min-width: 1440px) {
  body {
    --_typography---font-size--body-text-1: 16px;
    --_typography---line-height--xl: 170%;
    --_typography---font-weight--regular: 400;
    --_typography---font-size--h1: 64px;
    --_typography---line-height--l: 150%;
    --_typography---font-size--h2: 48px;
    --_typography---font-size--h3: 40px;
    --_typography---font-size--h4: 32px;
    --_typography---font-size--h5: 24px;
    --_typography---font-size--h6: 20px;
    --_typography---font-size--body-text-2: 18px;
    --_typography---font-size--button-text: 14px;
    --_typography---line-height--s: 100%;
    --_typography---font-weight--bold: 700;
    --_typography---font-size--big-text: 157px;
    --_typography---letter-spacing--big-text: -2px;
    --_typography---font-weight--medium: 500;
    --_typography---font-weight--semi-bold: 600;
    --_typography---line-height--m: 120%;
  }

  .showcase-grid {
    grid-column-gap: 100px;
    grid-row-gap: 100px;
    grid-template-columns: .7fr .7fr 1fr;
  }
}

@media screen and (min-width: 1920px) {
  body {
    --_typography---font-size--body-text-1: 16px;
    --_typography---line-height--xl: 170%;
    --_typography---font-weight--regular: 400;
    --_typography---font-size--h1: 64px;
    --_typography---line-height--l: 150%;
    --_typography---font-size--h2: 48px;
    --_typography---font-size--h3: 40px;
    --_typography---font-size--h4: 32px;
    --_typography---font-size--h5: 24px;
    --_typography---font-size--h6: 20px;
    --_typography---font-size--body-text-2: 18px;
    --_typography---font-size--button-text: 14px;
    --_typography---line-height--s: 100%;
    --_typography---font-weight--bold: 700;
    --_typography---font-size--big-text: 157px;
    --_typography---letter-spacing--big-text: -2px;
    --_typography---font-weight--medium: 500;
    --_typography---font-weight--semi-bold: 600;
    --_typography---line-height--m: 120%;
  }

  .showcase-grid {
    grid-template-columns: .7fr .7fr 1fr;
  }

  .logo-block._3 {
    width: 550px;
  }
}

@media screen and (max-width: 991px) {
  body {
    --_spacing---container-padding--spacing--s: 40px;
    --_spacing---container-padding--spacing--m: 80px;
    --_spacing---container-padding--spacing--l: 140px;
    --_spacing---container-padding--default: 15px;
    --_color---white-shade--white: white;
    --_color---dark-shade--black: #212121;
    --_color---grey-shade--stroke-black: #22222224;
    --_color---white-shade--transparent: transparent;
    --_color---dark-shade--body-black: #555;
    --_color---white-shade--stroke-white: #ffffff29;
    --_color---primary-color--primary: #de6040;
    --_color---grey-shade--grey: #f1f1f1;
    --_color---white-shade--body-white: #ffffffb3;
    --_color---white-shade--white-600: #ffffff0f;
    --_typography---font-size--body-text-1: 16px;
    --_typography---line-height--xl: 170%;
    --_typography---font-weight--regular: 400;
    --_typography---font-size--h1: 44px;
    --_typography---line-height--l: 150%;
    --_typography---font-size--h2: 38px;
    --_typography---font-size--h3: 32px;
    --_typography---font-size--h4: 28px;
    --_typography---font-size--h5: 22px;
    --_typography---font-size--h6: 20px;
    --_typography---font-size--body-text-2: 18px;
    --_typography---font-size--button-text: 14px;
    --_typography---line-height--s: 100%;
    --_typography---font-weight--bold: 700;
    --_typography---font-size--big-text: 90px;
    --_typography---letter-spacing--big-text: -1px;
    --_typography---font-weight--medium: 500;
    --_typography---font-weight--semi-bold: 600;
    --_typography---line-height--m: 120%;
  }

  .section.hero {
    padding-top: 100px;
  }

  .section.utility {
    height: 450px;
  }

  .section.work-for-desktop {
    display: none;
  }

  .section.work-for-tablet {
    display: block;
  }

  .section.common-page {
    padding-top: 140px;
    padding-bottom: 70px;
  }

  .section.project-details-page {
    padding-top: 140px;
  }

  .container {
    max-width: none;
  }

  .drop-menu-text {
    color: var(--_color---dark-shade--black);
    font-size: var(--_typography---font-size--body-text-1);
    line-height: var(--_typography---line-height--l);
    font-weight: var(--_typography---font-weight--regular);
  }

  .color-box-wrapper {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .menu-colum {
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .drop-inner-box.tablet {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    border-width: 1px;
    border-color: var(--_color---grey-shade--stroke-black);
    background-color: var(--_color---white-shade--white);
    border-radius: 0;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    margin-left: 15px;
    margin-right: 15px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
  }

  .style-guide-wrapper {
    grid-column-gap: 100px;
    grid-row-gap: 100px;
  }

  .button-arrow.tablet {
    display: none;
  }

  .nav-menu {
    background-color: var(--_color---white-shade--transparent);
    margin-top: 20px;
  }

  .nav-menu-wrapper {
    flex-flow: column;
    padding: 20px;
    display: none;
  }

  .colum-line {
    background-color: var(--_color---grey-shade--stroke-black);
    width: 1px;
  }

  .menu-button-wrap {
    display: block;
  }

  .menu-button {
    background-color: var(--_color---white-shade--transparent);
    padding: 0;
  }

  .menu-button.w--open {
    background-color: var(--_color---white-shade--transparent);
  }

  .icon {
    color: var(--_color---dark-shade--black);
    font-size: 26px;
    line-height: var(--_typography---line-height--s);
  }

  .hero-content {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .project-cms {
    grid-template-columns: 1fr;
  }

  .project-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .project._1 {
    padding-bottom: 0;
  }

  .project-img, .project-img._2 {
    height: 400px;
  }

  .common-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .showcase-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    grid-template-columns: 1fr 1fr;
  }

  .shocase-img {
    max-height: 430px;
  }

  .showcase-left {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
  }

  .showcase-right.tablet {
    display: flex;
  }

  .showcase-right.hiden {
    display: none;
  }

  .showreel-main-wrap {
    height: 140rem;
  }

  .showreel-sticky-wrap {
    height: 70vh;
    top: 100px;
  }

  .showreel-block {
    height: 70vh;
  }

  .work-inner {
    height: 70vh;
    min-height: 70vh;
  }

  .recognise-wrap {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .recognise-box {
    grid-template-columns: 1fr;
  }

  .recognise-middle {
    max-width: 500px;
  }

  .recognise-right {
    text-align: left;
  }

  .work-wrapper.tablet {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    justify-content: flex-start;
    align-items: center;
  }

  .reach-out-grid {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-columns: 1fr;
  }

  .reach-right {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
  }

  .logo-loop-wrapper, .logo-loop-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .logo-block._1 {
    width: 370px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .logo-block._2 {
    width: 380px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .logo-block._3 {
    width: 400px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .blog-cms {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .blog-left {
    grid-column-gap: 200px;
    grid-row-gap: 200px;
  }

  .blog-right {
    grid-column-gap: 200px;
    grid-row-gap: 200px;
    margin-top: 200px;
  }

  .faq-block {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
  }

  .footer-wrap {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    grid-template-columns: 1fr;
  }

  .footer-bottom-wrap {
    margin-top: 80px;
  }

  .common-hero {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
  }

  .common-hero-img {
    object-fit: cover;
    max-width: none;
    height: 400px;
  }

  .project-collection-list {
    grid-column-gap: 15px;
    grid-row-gap: 40px;
  }

  .common-banner-img-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    margin-bottom: 40px;
  }

  .common-banner-img {
    max-height: 400px;
  }

  .details-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .common-details ul, .common-details ol {
    margin-top: 20px;
  }

  .project-detail-middle-content {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    align-items: stretch;
  }

  .featured-img-1 {
    height: 100%;
  }

  .blog-collection-list {
    grid-column-gap: 15px;
    grid-row-gap: 40px;
  }

  .utility-page-wrap {
    padding-top: 140px;
    padding-bottom: 140px;
  }

  .licence-content-wrapper, .licence-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .license-main-wrapper {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .changelog-wrapper {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
  }
}

@media screen and (max-width: 767px) {
  body {
    --_spacing---container-padding--spacing--s: 30px;
    --_spacing---container-padding--spacing--m: 60px;
    --_spacing---container-padding--spacing--l: 80px;
    --_spacing---container-padding--default: 15px;
    --_color---white-shade--white: white;
    --_color---dark-shade--black: #212121;
    --_color---grey-shade--stroke-black: #22222224;
    --_color---white-shade--transparent: transparent;
    --_color---dark-shade--body-black: #555;
    --_color---white-shade--stroke-white: #ffffff29;
    --_color---primary-color--primary: #de6040;
    --_color---grey-shade--grey: #f1f1f1;
    --_color---white-shade--body-white: #ffffffb3;
    --_color---white-shade--white-600: #ffffff0f;
    --_typography---font-size--body-text-1: 16px;
    --_typography---line-height--xl: 150%;
    --_typography---font-weight--regular: 400;
    --_typography---font-size--h1: 32px;
    --_typography---line-height--l: 150%;
    --_typography---font-size--h2: 32px;
    --_typography---font-size--h3: 24px;
    --_typography---font-size--h4: 22px;
    --_typography---font-size--h5: 20px;
    --_typography---font-size--h6: 18px;
    --_typography---font-size--body-text-2: 16px;
    --_typography---font-size--button-text: 14px;
    --_typography---line-height--s: 100%;
    --_typography---font-weight--bold: 700;
    --_typography---font-size--big-text: 54px;
    --_typography---letter-spacing--big-text: 0px;
    --_typography---font-weight--medium: 500;
    --_typography---font-weight--semi-bold: 600;
    --_typography---line-height--m: 120%;
  }

  .section.utility {
    height: 400px;
  }

  .section.common-page {
    padding-top: 100px;
    padding-bottom: 40px;
  }

  .section.project-details-page {
    padding-top: 100px;
  }

  .navbar {
    margin-top: 20px;
  }

  .brand-logo {
    max-width: 80px;
  }

  .color-box-wrapper {
    grid-template-columns: 1fr 1fr;
  }

  .style-top-wrap {
    margin-bottom: 20px;
  }

  .drop-inner-box {
    grid-column-gap: 45px;
    grid-row-gap: 45px;
  }

  .drop-inner-box.tablet {
    grid-template-columns: 1fr 1fr;
  }

  .style-guide-wrapper {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
  }

  .all-button-wrap {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .brand {
    padding-left: 0;
  }

  .hero-content {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .sub-heading-wrapper {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-bottom: 40px;
  }

  .sub-heading-wrapper.reach {
    max-width: none;
  }

  .project-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .project-img, .project-img._2 {
    height: 300px;
  }

  .common-wrapper {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .showcase-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: row;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .shocase-img {
    max-height: 368px;
  }

  .showcase-left {
    justify-content: space-between;
    height: 100%;
  }

  .showcase-right.tablet, .shocase-para-wrap {
    margin-top: 30px;
  }

  .showcase-name-box {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .showreel-main-wrap {
    height: 140rem;
  }

  .showreel-sticky-wrap {
    height: 50vh;
    top: 25%;
  }

  .showreel-block {
    height: 50vh;
  }

  .show-reel._1 {
    margin-right: 20px;
  }

  .show-reel._2 {
    margin-left: 20px;
  }

  .work-inner {
    height: 50vh;
    min-height: 50vh;
  }

  .recognise-middle {
    max-width: none;
  }

  .work-wrapper.tablet, .work-single-box {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .reach-out-grid {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
  }

  .field-block, .field-block.message {
    margin-bottom: 15px;
  }

  .logo-block._1, .logo-block._2 {
    width: 300px;
    padding: 16px;
  }

  .logo-block._3 {
    width: 320px;
    padding: 16px;
  }

  .logo-icon {
    width: 40px;
    height: 40px;
  }

  .logo-name-wrap, .logo-inner {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .blog-cms {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    grid-template-columns: 1fr;
  }

  .blog-left {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }

  .blog-right {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    margin-top: 0;
  }

  .blog-card-img {
    max-height: 400px;
  }

  .faq-question {
    white-space: pre-wrap;
  }

  .faq-toggle {
    padding-top: 20px;
  }

  .faq-content {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding-left: 0;
  }

  .faq-dropdown {
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer-img {
    max-width: 250px;
  }

  .footer-bottom-wrap {
    margin-top: 40px;
  }

  .common-hero {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .common-hero-img {
    height: 300px;
  }

  .common-hero-content {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    max-width: none;
  }

  .project-collection-list {
    grid-template-columns: 1fr;
  }

  .common-banner-img {
    max-height: 300px;
  }

  .common-details h5 {
    margin-bottom: 10px;
  }

  .common-details ul {
    margin-top: 10px;
  }

  .project-detail-middle-content {
    flex-flow: column;
    align-items: stretch;
  }

  .featured-img-1 {
    max-width: none;
    height: 300px;
  }

  .project-content-wrap {
    max-width: none;
  }

  .featured-img {
    max-height: 300px;
  }

  .blog-collection-list, .get-in-wrapper {
    grid-template-columns: 1fr;
  }

  .utility-page-wrap {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .licence-image {
    max-width: none;
    height: 300px;
  }

  .licence-content-wrapper {
    flex-flow: wrap-reverse;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    display: flex;
  }

  .lummi-image-wrapp, .licence-image-block {
    width: 100%;
  }

  .license-wrapp {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .licence-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    grid-template-columns: 1fr;
    display: flex;
  }

  .licence-content-wrapp-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .lummi-image {
    max-width: none;
    height: 300px;
  }

  .licence-content-wrapp {
    grid-column-gap: 100px;
    grid-row-gap: 100px;
  }

  .changelog-box {
    max-width: none;
  }

  .password-heading._2 {
    margin-bottom: 40px;
  }

  ._404-img {
    max-width: 300px;
  }

  .project-button-wrap, .blog-button-wrap {
    margin-top: 60px;
  }

  .remove-this-button {
    bottom: 15px;
    right: 15px;
  }
}

@media screen and (max-width: 479px) {
  body {
    --_spacing---container-padding--spacing--s: 20px;
    --_spacing---container-padding--spacing--m: 40px;
    --_spacing---container-padding--spacing--l: 60px;
    --_spacing---container-padding--default: 15px;
    --_color---white-shade--white: white;
    --_color---dark-shade--black: #212121;
    --_color---grey-shade--stroke-black: #22222224;
    --_color---white-shade--transparent: transparent;
    --_color---dark-shade--body-black: #555;
    --_color---white-shade--stroke-white: #ffffff29;
    --_color---primary-color--primary: #de6040;
    --_color---grey-shade--grey: #f1f1f1;
    --_color---white-shade--body-white: #ffffffb3;
    --_color---white-shade--white-600: #ffffff0f;
    --_typography---font-size--body-text-1: 14px;
    --_typography---line-height--xl: 140%;
    --_typography---font-weight--regular: 400;
    --_typography---font-size--h1: 21px;
    --_typography---line-height--l: 150%;
    --_typography---font-size--h2: 20px;
    --_typography---font-size--h3: 18px;
    --_typography---font-size--h4: 18px;
    --_typography---font-size--h5: 16px;
    --_typography---font-size--h6: 18px;
    --_typography---font-size--body-text-2: 14px;
    --_typography---font-size--button-text: 14px;
    --_typography---line-height--s: 100%;
    --_typography---font-weight--bold: 700;
    --_typography---font-size--big-text: 35px;
    --_typography---letter-spacing--big-text: 0px;
    --_typography---font-weight--medium: 500;
    --_typography---font-weight--semi-bold: 600;
    --_typography---line-height--m: 120%;
  }

  .section.hero {
    padding-top: 80px;
  }

  .section.utility {
    height: 280px;
  }

  .section.common-page {
    padding-top: 80px;
    padding-bottom: 30px;
  }

  .section.project-details-page {
    padding-top: 80px;
  }

  .section.common-page-2 {
    padding-top: 60px;
  }

  .navbar {
    margin-top: 15px;
  }

  .drop-menu-text {
    text-transform: uppercase;
    ---mode--collection-3afdc3d2-8a8b-6c97-9f29-f07d3754699c: mode-66dd0d5c-338f-7013-e76e-12d9367bba8f;
    font-weight: 600;
  }

  .button-text {
    ---mode--collection-1f898c28-fb8a-0baa-5732-e55d6e03364f: mode-79b1a12d-7f41-9353-c822-42143fd8328b;
  }

  .brand-logo {
    max-width: 60px;
  }

  .color-box-wrapper {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }

  .color-box {
    height: 150px;
  }

  .drop-inner-box {
    grid-column-gap: 40px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr 1fr;
    padding: 20px;
  }

  .drop-inner-box.tablet {
    grid-column-gap: 0px;
    grid-row-gap: 30px;
  }

  .style-guide-wrapper {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }

  .all-button-wrap {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .icon {
    font-size: 20px;
  }

  .hero-content {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: column;
  }

  .footer-img-wrap {
    width: 100%;
    overflow: hidden;
  }

  .hero-img {
    max-height: 300px;
  }

  .sub-heading-wrapper {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    --_typography---font-size--body-text-1: 14px;
    --_typography---line-height--xl: 140%;
    --_typography---font-weight--regular: 400;
    --_typography---font-size--h1: 21px;
    --_typography---line-height--l: 150%;
    --_typography---font-size--h2: 20px;
    --_typography---font-size--h3: 18px;
    --_typography---font-size--h4: 18px;
    --_typography---font-size--h5: 16px;
    --_typography---font-size--h6: 18px;
    --_typography---font-size--body-text-2: 14px;
    --_typography---font-size--button-text: 14px;
    --_typography---line-height--s: 100%;
    --_typography---font-weight--bold: 700;
    --_typography---font-size--big-text: 35px;
    --_typography---letter-spacing--big-text: 0px;
    --_typography---font-weight--medium: 500;
    --_typography---font-weight--semi-bold: 600;
    --_typography---line-height--m: 120%;
    margin-bottom: 20px;
  }

  .project-cms, .project-block {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .project {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .project._1 {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
  }

  .project-img, .project-img._2 {
    height: 240px;
  }

  .project-content {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: column-reverse wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  .common-wrapper {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .sub-span.showcase {
    margin-right: 5px;
    display: none;
  }

  .showcase-grid {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-columns: 1fr;
  }

  .shocase-img {
    max-height: 300px;
  }

  .showcase-name-box {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .showreel-main-wrap {
    height: 120rem;
  }

  .showreel-sticky-wrap {
    height: 40vh;
    top: 30%;
  }

  .showreel-block {
    height: 40vh;
  }

  .work-inner {
    height: 40vh;
    min-height: 40vh;
  }

  .round-img {
    min-width: 16px;
    max-width: 16px;
  }

  .recognise-block {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .recognise-box {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    padding-bottom: 10px;
  }

  .recognise-left {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .recongnice-img-grid {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
  }

  .work-single-box {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .reach-out-grid, .reach-right {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .text-field.message {
    height: 120px;
  }

  .field-block {
    flex-flow: column;
  }

  .field-block.message {
    margin-bottom: 10px;
  }

  .submit-button {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .chat-box {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .chat-left {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
  }

  .chat-content {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }

  .chat-icon {
    max-width: 30px;
  }

  .chat-img {
    max-width: 100px;
    height: 140px;
  }

  .logo-loop-wrapper, .logo-loop-wrap {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .logo-block._1, .logo-block._2 {
    width: 230px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .logo-block._3 {
    width: 250px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .logo-icon {
    width: 32px;
  }

  .blog-cms, .blog-left, .blog-right {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .blog {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .faq-question {
    font-size: 14px;
  }

  .faq-toggle {
    padding-top: 15px;
  }

  .plus-minus {
    width: 12px;
    min-width: 12px;
    height: 12px;
    min-height: 12px;
  }

  .faq-content {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-flow: column;
    padding-left: 0;
  }

  .faq-dropdown {
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .footer-left {
    flex-flow: wrap-reverse;
  }

  .footer-right {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    flex-flow: column;
  }

  .footer-img {
    object-fit: cover;
    max-width: none;
    height: 300px;
  }

  .footer-info-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .info-block {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .location-wrap {
    max-width: none;
  }

  .footer-bottom-wrap {
    text-align: center;
    justify-content: center;
    align-items: flex-start;
    margin-top: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .common-hero-content {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .common-banner-img-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin-bottom: 20px;
  }

  .details-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .common-details ol {
    margin-top: 10px;
  }

  .common-hero-wrapper-2 {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .blog-collection-list {
    grid-row-gap: 20px;
  }

  .utility-page-wrap {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .licence-image, .lummi-image {
    height: 250px;
  }

  .changelog-box {
    padding: 30px 15px;
  }

  .version-title {
    font-size: 24px;
  }

  .password-heading._2 {
    margin-bottom: 20px;
  }

  ._404-img {
    max-width: 200px;
  }

  .project-button-wrap, .blog-button-wrap {
    margin-top: 40px;
  }

  .purchase-button-text {
    font-size: 14px;
  }

  .plus-icon-2 {
    max-width: 12px;
  }

  .plus-minus-2 {
    width: 28px;
    min-width: 12px;
    height: 28px;
    min-height: 12px;
  }
}


@font-face {
  font-family: 'Interdisplay';
  src: url('../fonts/InterDisplay-Bold.ttf') format('truetype'), url('../fonts/InterDisplay-ExtraBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Interdisplay';
  src: url('../fonts/InterDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Interdisplay';
  src: url('../fonts/InterDisplay-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Interdisplay';
  src: url('../fonts/InterDisplay-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Interdisplay';
  src: url('../fonts/InterDisplay-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}