:root {
  --100: #dad7cd;
  --500: #344e41;
  --300: #588157;
  --white: white;
  --400: #3a5a40;
  --200: #a3b18a;
  --secondary-colour: #c2bfb4;
}

body {
  background-color: var(--100);
  color: var(--500);
  font-family: Aeonik2, sans-serif;
  font-size: 1vw;
  font-weight: 400;
  line-height: 1.8;
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.6em;
  font-weight: 400;
  line-height: 1.3;
}

h2 {
  letter-spacing: .5px;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Majesti banner, sans-serif;
  font-size: 2.5em;
  font-weight: 500;
  line-height: 1.2;
}

h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.4;
}

p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1em;
}

a {
  cursor: pointer;
  font-size: 1em;
  text-decoration: none;
}

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

blockquote {
  border-left: 5px solid var(--500);
  margin-bottom: 0;
  padding: 0 1.5em;
  font-size: 2.2em;
  line-height: 1.5;
}

.container {
  z-index: 2;
  width: 85%;
  max-width: 1380px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: visible;
}

.container.nav-container {
  justify-content: center;
  align-items: center;
  display: flex;
}

.container.absolute-container {
  position: absolute;
}

.big-paragraph {
  font-size: 1.6em;
  font-weight: 300;
  line-height: 1.6;
}

.bottom-margin-1-5em {
  margin-bottom: 1.5em;
}

.button-wrapper {
  grid-column-gap: 2.5em;
  grid-row-gap: 1.5em;
  display: flex;
}

.image {
  z-index: -1;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.bg {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.bg._500-bg {
  background-image: linear-gradient(#344e41b3, #344e41b3), url("https://cdn.prod.website-files.com/62b55bdd711cff39f55d7b33/63c49ee00a00605b9be68c4e_Eastcoast-65.webp");
  background-position: 0 0, 50% 0;
  background-size: auto, cover;
  background-attachment: scroll, fixed;
}

.bg.popup-bg {
  cursor: pointer;
  background-color: #0009;
}

.button-text {
  z-index: 2;
  white-space: nowrap;
  position: relative;
}

.button {
  grid-column-gap: .5em;
  background-color: var(--500);
  color: var(--100);
  letter-spacing: .25px;
  flex-direction: row;
  flex: none;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  padding: 1em 1.5em;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: transform .3s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.button:hover {
  transform: scale(1.05);
}

.button.w--current {
  color: #fff;
}

.button.tertiary-button {
  color: var(--500);
  background-color: #0000;
  padding: 0;
}

.button.general-enquiries {
  cursor: pointer;
}

.button.white-button {
  background-color: var(--white);
  color: var(--500);
}

.button.cta-button {
  width: 154px;
}

.button._100-bg-button {
  background-color: var(--100);
  color: var(--500);
}

.button.submit-button {
  height: 4em;
}

.align-centre {
  text-align: center;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.bottom-margin-2-5em {
  margin-bottom: 2.5em;
}

.max-width-800 {
  max-width: 800px;
}

.on-load {
  z-index: 100;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  inset: 0%;
}

.on-load-logo {
  z-index: 10;
  width: 12em;
  position: relative;
}

.text-field {
  border: 2px solid var(--white);
  margin-bottom: 0;
  padding: 1.5em;
  font-size: 1.2em;
  transition: border-color .5s cubic-bezier(.165, .84, .44, 1);
}

.text-field:hover {
  border-color: var(--200);
}

.text-field:focus {
  border-color: var(--500);
}

.success-message {
  background-color: #0000;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  font-weight: 500;
  line-height: 1.5;
}

.brand-logo {
  width: 8em;
}

.hero-section {
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-height: 100vh;
  padding-top: 15em;
  display: flex;
  position: relative;
}

.bg-overlay {
  mix-blend-mode: multiply;
  background-color: #344e41b3;
  position: absolute;
  inset: 0%;
}

.text-field-label {
  font-size: 1.2em;
  font-weight: 500;
}

.form {
  grid-column-gap: 2.5em;
  grid-row-gap: 2.5em;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  display: grid;
}

.error-message {
  color: #dd5757;
  background-color: #fff0;
  border-radius: 8px;
  margin-top: 1.5em;
  padding: 0;
}

.thank-you-logo {
  width: 10em;
}

.success-message-wrapper {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.popup-form {
  z-index: 10;
  display: none;
  position: fixed;
  inset: 0%;
}

.popup-form-inner {
  flex-direction: column;
  align-items: center;
  padding: 10em 7.5%;
  display: block;
  position: absolute;
  inset: 0%;
  overflow: auto;
}

.icon {
  width: 24px;
  height: 24px;
  color: var(--500);
  justify-content: center;
  align-items: center;
  display: flex;
}

.close-wrapper {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 4em;
  height: 4em;
  display: flex;
  position: absolute;
  inset: 0% 0% auto auto;
}

.form-block-wrapper {
  z-index: 20;
  background-color: var(--100);
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 4em;
  position: relative;
  overflow: auto;
}

.popup-form-overlay {
  cursor: pointer;
  mix-blend-mode: multiply;
  background-color: #344e41b3;
  position: absolute;
  inset: 0%;
}

@media screen and (max-width: 991px) {
  body {
    font-size: 1.5vw;
  }

  .container {
    width: 85%;
  }

  .hide-desktop {
    display: block;
  }

  .hide-tablet {
    display: none;
  }

  .button {
    font-size: 1.2em;
  }

  .col.right-padding-2-5em, .col.right-padding-4em {
    padding-right: 0;
  }

  .col.right-padding-2-5em, .col.right-padding-4em {
    padding-right: 0;
  }

  .col.left-padding-2-5em {
    padding-left: 0;
  }

  ._12-col-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .frame-item-content {
    padding: 2.5em;
  }

  .email-button {
    font-size: 1.2em;
  }

  .menu-button {
    z-index: 100;
    cursor: pointer;
    width: 4em;
    height: 4em;
    display: flex;
    position: relative;
  }

  .register-your-interest {
    font-size: 1.2em;
  }

  .offplan-wrapper {
    flex-direction: row;
  }

  .map-heading {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-section-2 {
    height: auto;
  }

  .button-2 {
    font-size: 1.2em;
  }

  .nav-link {
    grid-column-gap: 1em;
  }

  .navbar-container {
    width: 85%;
  }

  .download-brochure {
    font-size: 1.2em;
  }

  .circle-text {
    z-index: 20;
    width: 30%;
    inset: -10% 2em auto auto;
  }
}

@media screen and (max-width: 767px) {
  body {
    font-size: 12px;
  }

  h1 {
    font-size: 1.4em;
  }

  h3 {
    font-size: 1.8em;
  }

  blockquote {
    font-size: 1.6em;
  }

  .hide-desktop {
    display: block;
  }

  .big-paragraph {
    font-size: 1.4em;
  }

  .style-guide-item {
    margin-bottom: 60px;
    padding-bottom: 60px;
  }

  .bottom-margin-5em {
    margin-bottom: 4em;
  }

  .image-wrapper, .image-wrapper.top-padding-150, .image-wrapper.top-padding-100.ml-top-padding-66-66, .image-wrapper.top-padding-150, .image-wrapper.top-padding-100.ml-top-padding-66-66, .image-wrapper.top-padding-100.ml-top-padding-66-66 {
    padding-top: 66.66%;
  }

  .hide-desktop-tablet {
    flex: none;
    display: block;
  }

  .hide-mobile-landscape-portrait {
    display: none;
  }

  .button.submit-button {
    height: 3.5em;
  }

  .button.cta-button {
    width: auto;
  }

  ._12-col-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .popup {
    padding-top: 4em;
    padding-bottom: 4em;
    display: none;
  }

  .form-wrapper {
    width: 80%;
    padding: 2em;
  }

  .success-message {
    padding: 4em;
  }

  .footer-section {
    padding-top: 8em;
    padding-bottom: 2.5em;
  }

  .contact-wrapper {
    grid-row-gap: .5em;
  }

  .social-link-wrapper {
    border-right-style: none;
    padding-right: 0;
  }

  .frame-item-content {
    color: var(--500);
    background-color: #0000;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    position: relative;
  }

  .popup-inner {
    padding-top: 4em;
    padding-bottom: 4em;
  }

  .hero-section {
    padding-top: 12em;
  }

  .form-block-wrapper {
    padding: 2.5em;
  }

  .email-button {
    padding: 1em 1.5em;
    font-size: 1.1em;
  }

  .slider-arrow {
    width: 1em;
    height: 1em;
    left: -.5em;
  }

  .slider-arrow.right-slider-arrow {
    right: -.5em;
  }

  .hero-heading {
    font-size: 1.8em;
  }

  .register-your-interest {
    padding: 1em 1.5em;
    font-size: 1.1em;
  }

  .offplan-wrapper {
    justify-content: flex-start;
  }

  .map-heading {
    padding-bottom: 0;
    padding-left: 0;
    position: relative;
  }

  .map-wrapper {
    grid-column-gap: 1.5em;
    grid-row-gap: 1.5em;
    flex-direction: column;
    display: flex;
  }

  .button-2 {
    padding: 1em 1.5em;
    font-size: 1.1em;
  }

  .grid._3-col-grid, .grid._3-col-grid.rows-5em, .grid._4-col-grid, .grid._3-col-grid, .grid._3-col-grid.rows-5em, .grid._3-col-grid.rows-5em, .grid._4-col-grid {
    grid-template-columns: 1fr 1fr;
  }

  .download-brochure {
    padding-top: 1em;
    padding-bottom: 1em;
  }

  .circle-text {
    top: -10%;
  }

  .image-text {
    padding-top: 0;
    padding-bottom: 2.5em;
    position: relative;
  }
}

@media screen and (max-width: 479px) {
  .small-icon {
    justify-content: center;
    align-items: center;
  }

  .hide-mobile {
    display: none;
  }

  .button-wrapper._2-button-wrapper {
    flex-direction: column;
  }

  .hide-desktop-tablet-mobile-landscape {
    display: block;
  }

  .hide-mobile-landscape-portrait {
    display: none;
  }

  .flex.col-gap-2-5em {
    grid-column-gap: 2em;
    grid-column-gap: 2em;
  }

  .social-link-wrapper, .badge-wrapper {
    grid-column-gap: 2em;
  }

  .slide-nav {
    display: none;
  }

  .circle-text {
    width: 40%;
    top: 0%;
  }
}

#w-node-_39b5c0b7-66d9-422d-fe85-9b33b015538e-955d7b36, #w-node-_39b5c0b7-66d9-422d-fe85-9b33b0155392-955d7b36 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_39b5c0b7-66d9-422d-fe85-9b33b0155396-955d7b36 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_39b5c0b7-66d9-422d-fe85-9b33b015539a-955d7b36, #w-node-_39b5c0b7-66d9-422d-fe85-9b33b015539e-955d7b36 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_39b5c0b7-66d9-422d-fe85-9b33b01553a2-955d7b36 {
  grid-area: 4 / 2 / 5 / 3;
}

@media screen and (max-width: 767px) {
  #w-node-_39b5c0b7-66d9-422d-fe85-9b33b015538e-955d7b36, #w-node-_39b5c0b7-66d9-422d-fe85-9b33b0155392-955d7b36, #w-node-_39b5c0b7-66d9-422d-fe85-9b33b015539a-955d7b36, #w-node-_39b5c0b7-66d9-422d-fe85-9b33b015539e-955d7b36 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }

  #w-node-_39b5c0b7-66d9-422d-fe85-9b33b01553a2-955d7b36 {
    grid-area: 6 / 2 / 7 / 3;
  }
}