@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy-Thin.ttf') format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

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

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

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy-UltraLight.ttf') format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy-Light.ttf') format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

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

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

@font-face {
  font-family: Pepi;
  src: url('../fonts/Pepi.ttf') format("truetype");
  font-weight: 10 260;
  font-style: normal;
  font-display: swap;
}

:root {
  --kleur_off_wit: #eeeae5;
  --kleur_paragraaf: #6e6e6e;
  --kleur_black: #1a1a1a;
  --kleur_wit: #f7f6f2;
  --kleur_primary: #c3821f;
  --kleur_secondary: #715952;
}
html {
  height: auto;
}
.body {
  background-color: var(--kleur_off_wit);
  color: var(--kleur_paragraaf);
  font-family: Gilroy, Tahoma, sans-serif;
  font-weight: 400;
}

.page-wrapper {
  width: 100%;
  max-width: none;
  height: auto;
  font-size: 1vw;
  position: relative;
}

.header-section {
  background-color: #71595200;
  width: 100%;
  height: 10vh;
  padding-top: 2em;
  padding-bottom: 2em;
  position: absolute;
  inset: 0% 0% auto;
}

.navbar {
  background-color: #71595200;
  margin-left: 3vw;
  margin-right: 3vw;
}

.container {
  max-width: none;
  font-size: 1vw;
}

.nav-menu {
  margin-top: .3em;
  font-size: 1em;
  font-weight: 500;
}

.image {
  height: 3.5em;
}

.hero-section {
  background-image: url('../images/studio_fortuna_banner_image.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  height: 100svh;
  display: flex;
  position: relative;
}

.hero-section-div {
  z-index: 5;
  grid-column-gap: 11%;
  grid-row-gap: 11%;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 56% 33%;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  width: 40svw;
  height: auto;
  margin-left: 3vw;
  font-size: 1vw;
  display: flex;
  position: relative;
}

.heading {
  color: var(--kleur_black);
  letter-spacing: -.03em;
  text-transform: none;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 4.25em;
  font-weight: 300;
  line-height: 1;
}

.heading.color-white {
  color: var(--kleur_wit);
  letter-spacing: -.01em;
  font-weight: 400;
}

.hero-paragraaftekst {
  color: #cf953c;
  letter-spacing: -.02em;
  width: 79%;
  margin-top: 3svh;
  margin-bottom: 4svh;
  font-size: 1.8em;
  font-weight: 300;
  line-height: 1.1;
}

.hero-section-image-div {
  aspect-ratio: 16 / 9;
  background-image: url('../images/studio_fortuna_banner_image.webp');
  background-position: 50% 80%;
  background-size: cover;
  margin-bottom: 7em;
}

.nav-link {
  color: var(--kleur_off_wit);
  padding: .8em 1.8em;
  font-size: 1.1em;
  line-height: 1;
  transition: color .35s cubic-bezier(.645, .045, .355, 1);
}

.nav-link:hover {
  color: #daa049;
}

.nav-link.contact {
  display: none;
}

.hero-section-div-2 {
  grid-column-gap: 6.4%;
  grid-row-gap: 6.4%;
  grid-template-rows: auto;
  grid-template-columns: 25% 29% 33%;
  grid-auto-columns: 1fr;
  width: 100%;
  height: auto;
  margin-bottom: 6em;
  font-size: 1vw;
  display: grid;
}

.paragraph {
  color: var(--kleur_paragraaf);
  letter-spacing: -.01em;
  margin-bottom: 0;
  font-size: 1.2em;
  font-weight: 300;
  line-height: 1.2;
}

.paragraph.margin-top-small {
  margin-top: 2em;
}

.paragraph.mb_20 {
  margin-bottom: 1.7em;
}

.hero-section-div-titel {
  grid-column-gap: 0%;
  grid-row-gap: 0%;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 56% 33%;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  width: 100%;
  height: auto;
  margin-top: 7em;
  margin-bottom: 2.5em;
  font-size: 1vw;
  display: flex;
}

.hero-section-titel-2 {
  color: var(--kleur_black);
  letter-spacing: -.01em;
  width: 100%;
  font-size: 4.1em;
  font-weight: 400;
  line-height: 1;
}

.hero-section-div-2-image-left {
  background-image: url('../images/studio_fortuna_hero_image_2.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-section-div-2-image-right {
  background-image: url('../images/studio_fortuna_hero_image_3.webp');
  background-position: 50% 80%;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-section-div-3 {
  grid-column-gap: 6.4%;
  grid-row-gap: 6.4%;
  grid-template-rows: auto;
  grid-template-columns: 33% 21% 33%;
  grid-auto-columns: 1fr;
  width: 100%;
  height: auto;
  margin-bottom: 7em;
  font-size: 1vw;
  display: grid;
}

.hero-section-div-3-image-middle {
  background-image: url('../images/studio_fortuna_hero_image_4.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-section-titel-3 {
  color: var(--kleur_black);
  letter-spacing: -.01em;
  width: 100%;
  font-size: 4em;
  font-weight: 400;
  line-height: 1;
}

.button-hero {
  background-color: var(--kleur_primary);
  margin-top: 1.5em;
  padding: .8em 1.8em;
  font-size: 1.1em;
  font-weight: 500;
  transition: color .35s cubic-bezier(.785, .135, .15, .86), background-color .35s cubic-bezier(.645, .045, .355, 1);
}

.button-hero:hover {
  background-color: var(--kleur_secondary);
}

.button-nav {
  z-index: 1;
  background-color: var(--kleur_primary);
  margin-left: 1.8em;
  padding: .8em 1.8em;
  font-size: 1.1em;
  font-weight: 500;
  line-height: 1;
  transition: color .35s cubic-bezier(.645, .045, .355, 1), background-color .35s cubic-bezier(.645, .045, .355, 1);
  display: inline-block;
  position: relative;
  right: auto;
}

.button-nav:hover {
  background-color: var(--kleur_off_wit);
  color: var(--kleur_black);
}

.contact-section {
  background-color: var(--kleur_wit);
  padding: 7em 3vw;
}

.over-mij-section-div {
  grid-column-gap: 6%;
  grid-row-gap: 6%;
  grid-template-rows: auto;
  grid-template-columns: 44% 50%;
  grid-auto-columns: 1fr;
  width: 100%;
  height: auto;
  font-size: 1vw;
  display: grid;
}

.overmij-titel {
  color: var(--kleur_black);
  letter-spacing: -.01em;
  width: 100%;
  margin-bottom: .6em;
  margin-left: auto;
  font-size: 4.2em;
  font-weight: 400;
  line-height: 1;
}

.over-mij-section-rechts-div {
  grid-column-gap: 0%;
  grid-row-gap: 0%;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 56% 33%;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  width: 100%;
  height: auto;
  font-size: 1vw;
  display: flex;
}

.subtitel {
  color: var(--kleur_black);
  letter-spacing: -.02em;
  margin-bottom: .6em;
  font-size: 2.1em;
  font-weight: 400;
  line-height: 1;
}

.over-mij-section-div2 {
  grid-column-gap: 6%;
  grid-row-gap: 6%;
  grid-template-rows: auto;
  grid-template-columns: 56% 38%;
  grid-auto-columns: 1fr;
  width: 100%;
  height: auto;
  margin-top: 5em;
  font-size: 1vw;
  display: grid;
}

.banner-section {
  background-color: var(--kleur_primary);
  padding: 7em 3vw;
}

.banner-titel {
  color: var(--kleur_wit);
  letter-spacing: -.01em;
  width: 100%;
  margin-left: auto;
  font-size: 4em;
  font-weight: 400;
  line-height: 1;
}

.stappenplan-section {
  background-color: var(--kleur_wit);
  padding: 7em 3vw;
}

.stappenplan-titel {
  color: var(--kleur_black);
  letter-spacing: -.01em;
  width: 100%;
  margin-bottom: .7em;
  margin-left: auto;
  font-size: 4.2em;
  font-weight: 400;
  line-height: 1;
}

.stappenplan-section-div {
  grid-column-gap: 6%;
  grid-row-gap: 6%;
  grid-template-rows: auto;
  grid-template-columns: 42% 52%;
  grid-auto-columns: 1fr;
  width: 100%;
  height: auto;
  margin-bottom: 2em;
  font-size: 1vw;
  display: grid;
}

.stappenplan-section-links-div {
  grid-column-gap: 0%;
  grid-row-gap: 0%;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 56% 33%;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  width: 100%;
  height: auto;
  font-size: 1vw;
  display: flex;
}

.stappenplan-section-rechts-div {
  grid-column-gap: 0%;
  grid-row-gap: 0%;
  aspect-ratio: auto;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 56% 33%;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  font-size: 1vw;
  display: flex;
}

.video {
  width: 100%;
  height: auto;
  max-width: 95svw;
}

.over-mij-section-div-2-image-left {
  background-image: url('../images/studio_fortuna_over_mij_image.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.stappenlijst {
  margin-top: .5em;
  margin-bottom: 2em;
  font-size: 1.2em;
  font-weight: 300;
  line-height: 1.2;
}

.pakketten-section {
  margin-left: 3vw;
  margin-right: 3vw;
}

.pakketten-section-div-titel {
  grid-column-gap: 0%;
  grid-row-gap: 0%;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 56% 33%;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  width: 100%;
  height: auto;
  margin-top: 7em;
  margin-bottom: 2em;
  font-size: 1vw;
  display: flex;
}

.pakketten-section-pakketten-div {
  grid-column-gap: 4em;
  grid-row-gap: 4em;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 7em;
  margin-bottom: 4em;
  display: grid;
}

.pakketten-div-card {
  background-color: var(--kleur_wit);
  border: 1px solid #d6d6d6;
  flex-flow: column;
  justify-content: space-between;
  padding: 3em 2.5em;
  display: flex;
}

.pakketten-card-titel {
  color: var(--kleur_primary);
  margin-bottom: .5em;
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1;
}

.pakketten-card-subtitel {
  color: var(--kleur_black);
  letter-spacing: -.02em;
  font-size: 2.1em;
  font-weight: 400;
  line-height: 1;
}

.pakketten-card-prijzen-div {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: flex-end;
  margin-top: 2em;
  margin-bottom: 2em;
  line-height: 1;
  display: flex;
}

.pakketten-card-prijzen-voor {
  margin-bottom: .25em;
  margin-right: 1em;
  font-size: 1.2em;
}

.pakketten-card-prijzen-voor-prijs {
  color: var(--kleur_black);
  letter-spacing: -.02em;
  font-size: 2.4em;
  font-weight: 500;
}

.button-pakketten-card {
  background-color: var(--kleur_primary);
  text-align: center;
  width: 100%;
  margin-top: 2em;
  margin-bottom: .5em;
  padding: .8em 1.8em;
  font-size: 1.1em;
  font-weight: 500;
  transition: color .35s cubic-bezier(.785, .135, .15, .86), background-color .35s cubic-bezier(.645, .045, .355, 1);
}

.button-pakketten-card:hover {
  background-color: var(--kleur_secondary);
}

.pakket-card-list-div {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  grid-template-rows: auto;
  grid-template-columns: 3em auto;
  grid-auto-columns: 1fr;
  place-items: start;
  width: 90%;
  margin: .5em auto;
  display: grid;
}

.pakket-list-checkmark {
  width: 1.4em;
  margin-top: .2em;
}

.text-block-3 {
  font-size: 1.2em;
  font-weight: 300;
  line-height: 1.3;
}

.pakketten-card-optioneel {
  color: var(--kleur_black);
  margin-top: 2em;
  margin-bottom: 1em;
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1.2;
}

.pakketten-onderschrift {
  color: var(--kleur_black);
  text-align: center;
  letter-spacing: -.02em;
  margin-bottom: 4em;
  margin-left: auto;
  margin-right: auto;
  font-size: 2.1em;
  font-weight: 300;
  line-height: 1;
}

.projecten-section {
  background-color: var(--kleur_secondary);
  padding: 7em 3vw;
}

.projecten-titel {
  color: var(--kleur_off_wit);
  text-align: center;
  letter-spacing: -.01em;
  width: 100%;
  margin-bottom: .5em;
  margin-left: auto;
  font-size: 4.2em;
  font-weight: 400;
  line-height: 1;
}

.projecten-paragraaf-centered {
  color: var(--kleur_off_wit);
  text-align: center;
  letter-spacing: -.01em;
  width: 58%;
  margin-bottom: 7em;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.2em;
  font-weight: 300;
  line-height: 1.2;
}

.projecten-grid {
  grid-column-gap: 5em;
  grid-row-gap: 5em;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.projecten-grid-div {
  background-color: var(--kleur_wit);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0;
  display: flex;
}

.projecten-card-titel {
  color: var(--kleur_black);
  letter-spacing: -.01em;
  width: 88%;
  margin-bottom: .4em;
  margin-left: auto;
  margin-right: auto;
  font-size: 3.36em;
  font-weight: 400;
  line-height: 1;
  display: block;
}

.projecten-card-paragraaf {
  color: var(--kleur_paragraaf);
  letter-spacing: -.01em;
  width: 88%;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.2em;
  font-weight: 300;
  line-height: 1.2;
}

.projecten-card-button {
  background-color: var(--kleur_primary);
  text-align: center;
  width: auto;
  margin: 2em 2.5em 2.5em auto;
  padding: .8em 1.8em;
  font-size: 1.1em;
  font-weight: 500;
  transition: color .35s cubic-bezier(.645, .045, .355, 1), background-color .35s cubic-bezier(.645, .045, .355, 1);
}

.projecten-card-button:hover {
  background-color: var(--kleur_secondary);
}

.pakketten-sectie-titel {
  color: var(--kleur_black);
  letter-spacing: -.01em;
  width: auto;
  font-size: 4.2em;
  font-weight: 400;
  line-height: 1;
}

.over-mij-section-div3 {
  grid-column-gap: 6%;
  grid-row-gap: 6%;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  height: auto;
  margin-top: 5em;
  font-size: 1vw;
  display: grid;
}

.pakketten-text-subtitel {
  color: var(--kleur_primary);
  text-transform: uppercase;
  width: 88%;
  margin: 2.2em auto .3em;
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1;
}

.contact-section-grid {
  grid-column-gap: 5em;
  grid-row-gap: 5em;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  height: auto;
  font-size: 1vw;
  display: grid;
}

.contact-grid-contactform-div {
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.contactform-titel {
  color: var(--kleur_black);
  letter-spacing: -.01em;
  width: 88%;
  margin-bottom: .4em;
  font-size: 3.36em;
  font-weight: 400;
  line-height: 1;
  display: block;
}

.contact-paragraaf {
  color: var(--kleur_paragraaf);
  letter-spacing: -.01em;
  width: 95%;
  margin-bottom: 4em;
  font-size: 1.2em;
  font-weight: 300;
  line-height: 1.2;
}

.form-block {
  width: 95%;
}

.text-field {
  border-style: none none solid;
  border-width: 1px;
  border-color: var(--kleur_primary);
  background-color: var(--kleur_wit);
  color: var(--kleur_black);
  margin-bottom: 2em;
  font-size: 1.1em;
  font-weight: 400;
}

.text-field-2, .text-field-3 {
  font-size: 1.2em;
  font-weight: 300;
}

.textarea {
  border-bottom: 1px solid var(--kleur_primary);
  background-color: var(--kleur_wit);
  color: var(--kleur_black);
  height: auto;
  margin-bottom: 2em;
  font-size: 1.1em;
  font-weight: 400;
}

.submit-button {
  background-color: var(--kleur_primary);
  width: 100%;
  padding-top: .8em;
  padding-bottom: .8em;
  font-size: 1.2em;
}

.contact-grid-gegevens-grid {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.contactgegevens-grid-div {
  flex-flow: column;
  align-items: flex-start;
  height: auto;
  display: flex;
}

.contactgegevens-grid-div-subtitel {
  color: var(--kleur_black);
  letter-spacing: -.02em;
  margin-bottom: .6em;
  font-size: 2.1em;
  font-weight: 400;
  line-height: 1;
}

.contactgegevens-grid-div-inhoud {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  align-items: center;
  margin-bottom: .7em;
  display: flex;
}

.wa_icon {
  width: 1.3em;
  margin-right: .5em;
}

.link_tekst {
  letter-spacing: -.01em;
  text-transform: none;
  margin-top: .1em;
  font-size: 1.2em;
  font-weight: 300;
  text-decoration: none;
  text-decoration-thickness: 0;
  transition: color .35s cubic-bezier(.645, .045, .355, 1);
}

.contact_link {
  color: var(--kleur_paragraaf);
  text-decoration: none;
}

.contact_link:hover {
  color: var(--kleur_primary);
}

.footer-section {
  margin-left: 3vw;
  margin-right: 3vw;
  padding-top: 5em;
  padding-bottom: 5em;
}

.footer-grid {
  grid-column-gap: 5em;
  grid-row-gap: 5em;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.footer-list {
  margin-left: auto;
  margin-right: 3vw;
}

.footer-links {
  color: var(--kleur_paragraaf);
  margin-bottom: .9em;
  text-decoration: none;
}

.footer-links:hover {
  color: var(--kleur_primary);
}

.link_tekst-footer {
  color: var(--kleur_black);
  letter-spacing: -.01em;
  text-transform: none;
  font-size: 1.2em;
  font-weight: 500;
  text-decoration: none;
  text-decoration-thickness: 0;
  transition: color .35s cubic-bezier(.645, .045, .355, 1);
}

.link_tekst-footer:hover {
  color: var(--kleur_primary);
}

.copyright {
  text-align: center;
  letter-spacing: -.01em;
  font-size: 1em;
  font-weight: 300;
}

.iwurx_link {
  color: var(--kleur_black);
  font-weight: 500;
  text-decoration: none;
}

.iwurx_link:hover {
  color: var(--kleur_primary);
}

.copyright-section {
  background-color: var(--kleur_wit);
  padding-top: 1em;
  padding-bottom: 1em;
}

.intro-sectie {
  margin-left: 3vw;
  margin-right: 3vw;
}

.hero-gradient-links {
  background-image: linear-gradient(90deg, #000, #0000);
  width: 60%;
  position: absolute;
  inset: 0%;
}

.hero-gradient-top {
  background-image: linear-gradient(#000, #0000);
  height: 20%;
  position: absolute;
  inset: 0%;
}

.hero-button {
  background-color: var(--kleur_primary);
  justify-content: space-between;
  align-items: center;
  width: auto;
  padding: .8em 1.8em;
  font-size: 1.1em;
  font-weight: 500;
  line-height: 1;
  transition: color .35s cubic-bezier(.645, .045, .355, 1), background-color .35s cubic-bezier(.645, .045, .355, 1);
  display: block;
}

.hero-button:hover {
  background-color: var(--kleur_off_wit);
  color: var(--kleur_black);
}

.background-video {
  width: 100%;
  height: 100%;
}

.image-2, .image-3, .image-4, .image-5 {
  width: 100%;
}

.intro-sectie-mobiel {
  margin-left: 3vw;
  margin-right: 3vw;
  display: none;
}

.hero-section-div-2-mobiel, .hero-section-div-2-mobiel-2 {
  grid-column-gap: 6.4%;
  grid-row-gap: 6.4%;
  grid-template-rows: auto;
  grid-template-columns: 25% 29% 33%;
  grid-auto-columns: 1fr;
  width: 100%;
  height: auto;
  margin-bottom: 6em;
  font-size: 1vw;
  display: grid;
}

.hero-section-div-3-mobiel {
  grid-column-gap: 6.4%;
  grid-row-gap: 6.4%;
  grid-template-rows: auto;
  grid-template-columns: 33% 21% 33%;
  grid-auto-columns: 1fr;
  width: 100%;
  height: auto;
  margin-bottom: 7em;
  font-size: 1vw;
  display: grid;
}

.over-mij-section {
  background-color: var(--kleur_wit);
  padding: 7em 3vw;
}

.hero-gradient-onder {
  background-image: linear-gradient(0deg, #000, #0000);
  width: 100%;
  height: 50%;
  display: none;
  position: absolute;
  inset: auto 0% 0%;
}

.contactgegevens-grid-div-direct {
  flex-flow: column;
  align-items: flex-start;
  width: auto;
  height: auto;
  margin-bottom: 1.3em;
  display: flex;
}

.contactgegevens-grid-div-locatie {
  flex-flow: column;
  align-items: flex-start;
  width: auto;
  height: auto;
  display: flex;
}

.contactgegevens-grid-div-socials {
  flex-flow: column;
  align-items: flex-start;
  width: auto;
  height: auto;
  margin-bottom: 1.3em;
  display: flex;
}

.project-hero-section {
  background-image: url('../images/project1_banner.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: 100svh;
  padding-bottom: 3em;
  display: flex;
  position: relative;
}

.project-hero-section-div {
  z-index: 5;
  grid-column-gap: 11%;
  grid-row-gap: 11%;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 56% 33%;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  width: 40svw;
  height: auto;
  margin-left: 3vw;
  font-size: 1vw;
  display: flex;
  position: relative;
}

.project-heading {
  color: var(--kleur_black);
  letter-spacing: -.03em;
  text-transform: none;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 4.25em;
  font-weight: 300;
  line-height: 1;
}

.project-heading.color-white {
  color: var(--kleur_wit);
  letter-spacing: -.01em;
  font-weight: 400;
}

.project-hero-paragraaftekst {
  color: #cf953c;
  letter-spacing: -.02em;
  width: 79%;
  margin-bottom: 0;
  font-size: 1.8em;
  font-weight: 300;
  line-height: 1.1;
}

.project-hero-gradient-links {
  background-image: linear-gradient(45deg, #000, #0000);
  width: 60%;
  position: absolute;
  inset: 0%;
}

.project-info-section {
  grid-column-gap: 5vw;
  grid-row-gap: 5vw;
  background-color: var(--kleur_off_wit);
  justify-content: space-between;
  align-items: flex-start;
  margin: 3vw;
  display: flex;
  position: relative;
}

.project-hero-gradient-onder {
  background-image: linear-gradient(0deg, #000, #0000);
  width: 100%;
  height: 50%;
  display: block;
  position: absolute;
  inset: auto 0% 0%;
}

.project-info-section-details {
  width: 100%;
  position: sticky;
  top: 3vw;
}

.project-info-section-fotos {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: 6em;
  display: flex;
}

.project-info-beschrijving-titel {
  color: var(--kleur_black);
  margin-bottom: .5em;
  font-size: 4.25em;
  line-height: 1;
}

.project-foto-landscape {
  aspect-ratio: 3 / 2;
  width: 100%;
  margin-bottom: 3vw;
}

.project-foto-portret {
  aspect-ratio: 3 / 4;
  width: 60%;
  margin-bottom: 3vw;
}

.project2-hero-section {
  background-image: url('../images/project2_banner.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: 100svh;
  padding-bottom: 3em;
  display: flex;
  position: relative;
}

.home-button-project {
  z-index: 1;
  background-color: var(--kleur_primary);
  align-self: center;
  margin-left: 1.8em;
  padding: .8em 1.8em;
  font-size: 1.1em;
  font-weight: 500;
  line-height: 1;
  transition: color .35s cubic-bezier(.645, .045, .355, 1), background-color .35s cubic-bezier(.645, .045, .355, 1);
  display: block;
  position: relative;
  right: auto;
}

.home-button-project:hover {
  background-color: var(--kleur_off_wit);
  color: var(--kleur_black);
}

.project-header-section {
  background-color: #71595200;
  justify-content: flex-end;
  width: 100%;
  height: 10vh;
  padding-top: 2em;
  padding-bottom: 2em;
  padding-right: 3vw;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
  z-index: 99999;
}

.project4-hero-section {
  background-image: url('../images/Warm-Inspirerend-Banner.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: 100svh;
  padding-bottom: 3em;
  display: flex;
  position: relative;
}

.project3-hero-section {
  background-image: url('../images/project3_banner.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: 100svh;
  padding-bottom: 3em;
  display: flex;
  position: relative;
}

@media screen and (max-width: 991px) {
  .nav-menu {
    text-align: left;
    background-color: #000;
    margin-top: auto;
    padding-top: 2em;
    padding-bottom: 2em;
    font-size: 1.4em;
    line-height: 1;
    display: inline-block;
    position: absolute;
  }

  .image {
    margin-top: 2em;
  }

  .hero-section {
    aspect-ratio: 3 / 2;
    object-fit: fill;
    width: 100vw;
    height: auto;
  }

  .hero-section-div {
    width: 50svw;
  }

  .heading.color-white {
    font-size: 5.1em;
  }

  .hero-paragraaftekst {
    margin-top: 1svh;
    margin-bottom: 2svh;
    font-size: 2.3em;
  }

  .nav-link {
    text-align: center;
    margin-bottom: 1em;
    font-size: 1.4em;
  }

  .nav-link.contact {
    display: block;
  }

  .paragraph {
    font-size: 1.6em;
  }

  .button-hero {
    font-size: 1.4em;
  }

  .button-nav {
    text-align: left;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    display: none;
  }

  .subtitel {
    font-size: 2.4em;
  }

  .stappenlijst {
    font-size: 1.6em;
  }

  .pakketten-card-titel {
    font-size: 1.5em;
  }

  .pakketten-card-subtitel {
    font-size: 2.4em;
  }

  .pakketten-card-prijzen-voor {
    font-size: 1.6em;
  }

  .pakketten-card-prijzen-voor-prijs {
    font-size: 2.7em;
  }

  .button-pakketten-card {
    font-size: 1.4em;
  }

  .pakket-list-checkmark {
    margin-top: .3em;
  }

  .text-block-3, .projecten-paragraaf-centered {
    font-size: 1.6em;
  }

  .projecten-card-titel {
    font-size: 3.7em;
  }

  .projecten-card-paragraaf {
    font-size: 1.6em;
  }

  .projecten-card-button {
    font-size: 1.4em;
  }

  .pakketten-text-subtitel {
    font-size: 1.5em;
  }

  .contact-paragraaf {
    font-size: 1.6em;
  }

  .contact-grid-gegevens-grid {
    width: auto;
  }

  .contactgegevens-grid-div-inhoud {
    margin-bottom: 0;
  }

  .link_tekst {
    font-size: 1.6em;
  }

  .footer-links {
    margin-bottom: .4em;
  }

  .link_tekst-footer {
    font-size: 1.5em;
  }

  .copyright {
    font-size: 1.3em;
  }

  .hero-button {
    font-size: 1.4em;
  }

  .menu-button {
    color: var(--kleur_off_wit);
  }

  .menu-button.w--open {
    background-color: var(--kleur_primary);
  }

  .hero-section-div-2-mobiel, .hero-section-div-2-mobiel-2 {
    grid-template-rows: auto auto auto;
    grid-template-columns: 40% 40%;
  }

  .project-hero-section {
    aspect-ratio: 3 / 2;
    object-fit: fill;
    width: 100vw;
    height: auto;
  }

  .project-hero-section-div {
    width: 50svw;
  }

  .project-heading.color-white {
    font-size: 5.1em;
  }

  .project-hero-paragraaftekst {
    font-size: 2.3em;
  }

  .project2-hero-section {
    aspect-ratio: 3 / 2;
    object-fit: fill;
    width: 100vw;
    height: auto;
  }

  .home-button-project {
    text-align: left;
    justify-content: flex-end;
    width: auto;
    font-size: 1.6em;
    display: flex;
  }

  .project-header-section {
    height: 10em;
  }

  .project4-hero-section, .project3-hero-section {
    aspect-ratio: 3 / 2;
    object-fit: fill;
    width: 100vw;
    height: auto;
  }
}

@media screen and (max-width: 767px) {
  .image {
    height: 5em;
    margin-top: 10px;
    font-size: 1.3vw;
  }

  .hero-paragraaftekst {
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: 400;
  }

  .nav-link {
    font-size: 13px;
  }

  .nav-link.contact {
    display: block;
  }

  .paragraph {
    font-size: 15px;
  }

  .paragraph.margin-top-small {
    margin-top: 1.2em;
  }

  .paragraph.mb_20 {
    margin-bottom: 1.3em;
  }

  .hero-section-titel-2, .hero-section-titel-3 {
    margin-bottom: 10px;
  }

  .button-hero {
    font-size: 13px;
  }

  .over-mij-section-div {
    aspect-ratio: 3 / 2;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    width: 100%;
    height: auto;
  }

  .overmij-titel {
    margin-bottom: 30px;
  }

  .subtitel {
    font-size: 18px;
    font-weight: 400;
  }

  .over-mij-section-div2 {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    margin-top: 8em;
  }

  .stappenplan-titel {
    margin-bottom: 30px;
  }

  .stappenplan-section-div {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  .stappenplan-section-rechts-div, .over-mij-section-div-2-image-left {
    aspect-ratio: 16 / 9;
  }

  .stappenlijst {
    font-size: 15px;
  }

  .pakketten-section-pakketten-div {
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
  }

  .pakketten-div-card {
    padding: 4em;
  }

  .pakketten-card-titel {
    font-size: 15px;
  }

  .pakketten-card-subtitel {
    font-size: 22px;
  }

  .pakketten-card-prijzen-div {
    margin-top: 3em;
    margin-bottom: 3em;
  }

  .pakketten-card-prijzen-voor {
    font-size: 15px;
  }

  .pakketten-card-prijzen-voor-prijs {
    font-size: 28px;
  }

  .button-pakketten-card {
    margin-bottom: 0;
    font-size: 15px;
  }

  .pakket-card-list-div {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .pakket-list-checkmark {
    width: 16px;
  }

  .text-block-3 {
    font-size: 15px;
  }

  .pakketten-card-optioneel {
    font-size: 13px;
  }

  .pakketten-onderschrift {
    font-size: 15px;
  }

  .projecten-paragraaf-centered {
    width: 80%;
    margin-bottom: 3em;
    font-size: 15px;
  }

  .projecten-grid {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr;
  }

  .projecten-card-titel {
    width: 92%;
    font-size: 22px;
  }

  .projecten-card-paragraaf {
    width: 92%;
    font-size: 15px;
  }

  .projecten-card-button {
    width: auto;
    margin-top: 1.2em;
    margin-bottom: 2em;
    margin-right: 5%;
    font-size: 14px;
  }

  .pakketten-sectie-titel {
    margin-bottom: 10px;
  }

  .pakketten-text-subtitel {
    width: 92%;
    font-size: 14px;
  }

  .contact-section-grid {
    grid-column-gap: 3em;
    grid-row-gap: 3em;
    grid-template-rows: auto auto;
    grid-template-columns: 1.3fr;
  }

  .contactform-titel {
    font-size: 22px;
  }

  .contact-paragraaf {
    font-size: 15px;
  }

  .contact-grid-gegevens-grid {
    flex-flow: row;
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
    justify-content: space-around;
    width: 100%;
  }

  .contactgegevens-grid-div-subtitel {
    font-size: 18px;
  }

  .wa_icon {
    width: 14px;
  }

  .link_tekst {
    font-size: 15px;
  }

  .footer-grid {
    grid-template-columns: 1.3fr .7fr;
  }

  .link_tekst-footer {
    font-size: 13px;
  }

  .copyright {
    width: 75%;
    margin: 10px auto;
    font-size: 15px;
  }

  .intro-sectie {
    display: none;
  }

  .hero-button {
    font-size: 13px;
  }

  .intro-sectie-mobiel {
    display: block;
  }

  .hero-section-div-2-mobiel {
    grid-template-rows: auto;
    grid-template-columns: 52% 40%;
    margin-bottom: 40px;
  }

  .hero-section-div-2-mobiel-2 {
    grid-template-rows: auto;
    grid-template-columns: 40% 52%;
    margin-bottom: 40px;
  }

  .hero-section-div-3-mobiel {
    grid-template-columns: 52% 40%;
  }

  .project-hero-section-div {
    grid-column-gap: 0%;
    grid-row-gap: 0%;
  }

  .project-heading.color-white {
    font-size: 32px;
  }

  .project-hero-paragraaftekst {
    margin-top: 20px;
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 400;
  }

  .project-info-section {
    flex-flow: column;
  }

  .project-info-section-details {
    position: relative;
  }

  .project-info-beschrijving-titel {
    font-size: 32px;
  }

  .home-button-project {
    font-size: 15px;
  }

  .project-header-section {
    padding-top: 3em;
    padding-bottom: 2em;
  }
}

@media screen and (max-width: 479px) {
  .navbar {
    margin-left: 0;
    margin-right: 0;
    padding-left: 1vw;
    padding-right: 2vw;
  }

  .nav-menu {
    background-color: #000;
  }

  .image {
    margin-top: 15px;
    font-size: 1.8vw;
  }

  .hero-section {
    aspect-ratio: auto;
    justify-content: flex-end;
    width: auto;
    height: 100svh;
    display: block;
  }

  .hero-section-div {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    justify-content: flex-end;
    align-items: center;
    width: 90%;
    height: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .heading.color-white {
    text-align: center;
    font-size: 10em;
  }

  .hero-paragraaftekst {
    text-align: center;
    width: 82%;
    margin: 5px auto 10px;
    font-size: 4em;
  }

  .nav-link {
    font-size: 15px;
  }

  .hero-section-titel-2 {
    margin-top: 10px;
    font-size: 32px;
  }

  .hero-section-div-2-image-left, .hero-section-div-2-image-right, .hero-section-div-3-image-middle {
    aspect-ratio: 1;
  }

  .hero-section-titel-3 {
    font-size: 32px;
  }

  .contact-section {
    padding-top: 40px;
    padding-bottom: 10px;
  }

  .over-mij-section-div {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin-bottom: 20px;
  }

  .overmij-titel {
    margin-bottom: 20px;
    font-size: 32px;
  }

  .over-mij-section-div2 {
    margin-top: 30px;
  }

  .banner-titel {
    text-align: center;
    font-size: 29px;
  }

  .stappenplan-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .stappenplan-titel {
    font-size: 32px;
  }

  .pakketten-section-div-titel {
    margin-top: 40px;
  }

  .pakketten-card-prijzen-div {
    margin-top: 4em;
    margin-bottom: 4em;
  }

  .pakket-card-list-div {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .pakket-list-checkmark {
    margin-top: 3px;
  }

  .pakketten-onderschrift {
    margin-bottom: 40px;
    font-size: 18px;
  }

  .projecten-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .projecten-titel {
    font-size: 32px;
  }

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

  .projecten-card-button {
    width: 92%;
    margin-right: auto;
  }

  .pakketten-sectie-titel {
    font-size: 32px;
  }

  .contact-section-grid {
    grid-template-rows: auto auto;
    grid-template-columns: 1.3fr;
    padding-bottom: 20px;
  }

  .contact-grid-contactform-div {
    margin-bottom: 20px;
  }

  .contactform-titel {
    width: auto;
    font-size: 32px;
  }

  .contact-paragraaf {
    width: 100%;
    margin-bottom: 20px;
  }

  .form-block {
    width: 100%;
  }

  .text-field, .textarea, .submit-button {
    font-size: 14px;
  }

  .contact-grid-gegevens-grid {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    flex-flow: column;
    grid-template-rows: auto auto;
    grid-template-columns: .9fr 1.1fr;
    justify-content: flex-start;
    align-items: center;
    width: auto;
  }

  .contactgegevens-grid-div {
    align-items: center;
  }

  .footer-section {
    margin-top: 40px;
    margin-bottom: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .footer-grid {
    grid-template-rows: auto auto;
    grid-template-columns: 1.3fr;
  }

  .footer-list {
    text-align: center;
    margin-bottom: 20px;
    margin-right: auto;
    font-size: 15px;
  }

  .link_tekst-footer {
    font-size: 14px;
  }

  .hero-gradient-links {
    display: none;
  }

  .hero-gradient-top {
    height: 10%;
  }

  .hero-button {
    text-align: center;
    width: auto;
  }

  .menu-button.w--open {
    background-color: var(--kleur_primary);
  }

  .hero-section-div-2-mobiel, .hero-section-div-2-mobiel-2 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
  }

  .hero-section-div-3-mobiel {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    margin-bottom: 40px;
  }

  .over-mij-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .hero-gradient-onder {
    background-image: linear-gradient(0deg, #000, #0000);
    width: 100%;
    height: 70%;
    display: block;
    inset: auto 0% 0%;
  }

  .contactgegevens-grid-div-direct, .contactgegevens-grid-div-locatie, .contactgegevens-grid-div-socials {
    align-items: center;
  }

  .project-hero-section {
    aspect-ratio: 4 / 3;
    background-position: 56%;
    justify-content: flex-end;
    width: 100%;
    height: auto;
    display: block;
  }

  .project-hero-section-div {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    justify-content: flex-end;
    align-items: center;
    width: 90%;
    height: 98%;
    margin-left: auto;
    margin-right: auto;
  }

  .project-heading.color-white {
    text-align: center;
    font-size: 32px;
  }

  .project-hero-paragraaftekst {
    text-align: center;
    width: 82%;
    margin: 5px auto 0;
    font-size: 15px;
  }

  .project-hero-gradient-links {
    display: none;
  }

  .project-hero-gradient-onder {
    background-image: linear-gradient(0deg, #000, #0000);
    width: 100%;
    display: block;
    inset: auto 0% 0%;
  }

  .project2-hero-section {
    aspect-ratio: 4 / 3;
    justify-content: flex-end;
    width: 100%;
    height: auto;
    display: block;
  }

  .home-button-project {
    margin-left: 0;
  }

  .project-header-section {
    justify-content: center;
    height: auto;
    padding-top: 20px;
    padding-right: 0;
  }

  .project4-hero-section, .project3-hero-section {
    aspect-ratio: 4 / 3;
    justify-content: flex-end;
    width: 100%;
    height: auto;
    display: block;
  }

  #w-node-df50f1f6-235b-a5b6-2ca4-49418d7bbe2e-33cf2e8b {
    order: -9999;
  }
}


@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-UltraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Black.ttf') format('truetype'), url('../fonts/Gilroy-Heavy.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-ExtraBold.ttf') format('truetype'), url('../fonts/Gilroy-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pepi';
  src: url('../fonts/Pepi.ttf') format('truetype');
  font-weight: 10 260;
  font-style: normal;
  font-display: swap;
}