:root {
  --primary-color: #71AF2E;
  --secondary-color: #284731;
  --accent-color: #D3D800;
  --cta-color: #0C0CF2;
  --cta-color--200: #0909be;
  --light-color: #F2F3F4;
  --dark-color: #1D1D1B;
  
  --background-color: var(--light-color);
  --text-color: var(--dark-color);
  --footer-bg: var(--secondary-color);
  --footer-text: var(--light-color);
  
  --cta--border-color--cta-button-primary: var(--cta-color);
  --cta--background-color--cta-button-primary: var(--cta-color);
  --cta--background-color--cta-button-primary-hover: var(--cta-color--200);
  --cta--text-color--cta-button-primary: var(--light-color);
}

* {
  box-sizing: border-box;
}

body, html {
  max-width: 100vw;
}

body {
  font-family: 'Poppins', Arial, sans-serif;
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 1.5vw;
  background: white;
  background: linear-gradient(90deg, rgb(255, 255, 255) 70%, var(--primary-color) 70%);
  position: relative;
}

/* home */

body.home {
  background-color: var(--primary-color);
  background-image: url(../images/background.svg);
  justify-content: flex-start
}

.home h1 {
  margin-top: 4vw;
  margin-bottom: 0;
  color: var(--light-color);
}

.home-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4vw;
  margin: 0;
  padding: 4vw;
}

.home-menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-menu li a {
  display: block;
  text-decoration: none;
  font-size: 2vw;
  font-weight: 700;
  text-align: center;
  border-radius: 2vw;
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: var(--background-color);
  padding: 3vw 0;
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.1);
}

/* main */

.page-main {
  display: flex;
}

.page-main__bg-green {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 70vw;
  background-color: var(--primary-color);
  background-image: url(../images/background.svg);
}

.page-main__content {
  min-width: 50vw;
  min-height: 100vh;
  line-height: 1.4;
  padding: 4vw;
}

.page-main__content h1 {
  font-size: 4vw;
  margin-top: 0;
  line-height: 1.2;
}

.page-main__content li {
  margin: 0 0 0.6vw;
}

.page-main__content h1 em {
  font-style: normal;
  background: linear-gradient(transparent 60%, var(--accent-color) 60%);
  box-decoration-break: clone; /* Zorgt dat de background netjes breekt */
  -webkit-box-decoration-break: clone;
}

.page-main__image {
  min-width: 50vw;
  min-height: 100vh;
  height: 40vw;
  padding: 4vw 8vw 4vw 0;
}

.page-main__image img{
  max-width: 100%;
  max-height: 100%;
}

/* page */

.page-title {
  margin: 0;
}



/* header */

.page-header {
  background: var(--light-color);
  padding: 3vw 4vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid var(--primary-color);
}

.page-header__logo {
  height: 10vw;
}

/* footer */

/* .page-footer {
  margin: 0 4vw 4vw;
  border-radius: 1vw;
}

.footer-menu {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}

.footer-menu li {
  list-style: none;
  margin: 0;
}

.footer-menu li a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 1.2vw 1.4vw;
  font-size: 1.4vw;
  font-weight: 500;
  text-transform: uppercase;
  background: var(--footer-bg);
  border-radius: 1vw;
} */

.page-footer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}

.footer-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-end;
  padding: 0 4vw 0 0;
  margin: 0;
  height: 100vh;
}

.footer-menu li {
  list-style: none;
  margin: 0;
}

.footer-menu li a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 1.2vw 1.4vw;
  font-size: 1.4vw;
  font-weight: 500;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1vw;
}

/* button */
input[type="submit"], .button, button {
  border-top-style: solid;
  border-top-width: 1.5px;
  border-top-color: var(--cta--border-color--cta-button-primary);
  border-right-style: solid;
  border-right-width: 1.5px;
  border-right-color: var(--cta--border-color--cta-button-primary);
  border-bottom-style: solid;
  border-bottom-width: 1.5px;
  border-bottom-color: var(--cta--border-color--cta-button-primary);
  border-left-style: solid;
  border-left-width: 1.5px;
  border-left-color: var(--cta--border-color--cta-button-primary);
  background-color: var(--cta--background-color--cta-button-primary);
  color: var(--cta--text-color--cta-button-primary);
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 9995px;
  padding: .625rem 1.125rem;
  font-size: 1.5vw;
  font-weight: 600;
  transition-property: all;
  transition-duration: .4s;
  transition-timing-function: ease;
  text-decoration: 0;
}

input[type="submit"]:hover, .button:hover, button:hover {
  background-color: var(--cta--background-color--cta-button-primary-hover);
}

input, textarea {
    font-size: 1.1vw;
    padding: 0.8rem;
    font-family: 'Poppins';
    border-radius: 1vw;
    border-width: 0;
    box-shadow: inset 0 0 2px 2px rgba(29, 29, 27, 0.1);
    background: rgba(29, 29, 27, 0.05);
}

input:focus, textarea:focus {
    box-shadow: inset 0 0 2px 2px rgba(29, 29, 27, 0.2);
    background: rgba(29, 29, 27, 0);
}

.hidden-fields-container {
  display: none;
}

.wpcf7-form-control-wrap {
  display: flex;
  flex-direction: column;
}

.invalid .wpcf7-not-valid-tip,
.invalid .wpcf7-response-output {
  color: red;
  font-size: 1vw;
}

.sent .wpcf7-not-valid-tip,
.sent .wpcf7-response-output {
  color: var(--primary-color);
  padding: 2vw;
  border: 1px solid var(--primary-color);
  border-radius: 1vw;
}

.sent p {
  display: none;
}

.wpcf7-not-valid {
  border: 1px solid red;
}

.screen-reader-response {
  display: none;
}