@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");

:root {
--header-outer-height: 110px;
--header-inner-height: 70px;
--header-height-difference: calc(var(--header-outer-height) - var(--header-inner-height));
--header-bg: #fff;
--primary-green: #28a745;
--dark-green: #006400;
--dark-gray-1: #333;
}

*,
*:after,
*:before {
box-sizing: border-box;
}

body {
font-family: 'DM Sans', Arial, sans-serif;
line-height: 1.5;
background-color: #fff;
color: #000;
padding: 0 10px;
scroll-behavior: smooth;
}

.responsive-wrapper {
width: 90%;
max-width: 1280px;
margin: 0 auto;
}

/* Sticky header */
.header-outer {
height: var(--header-outer-height);
position: sticky;
top: calc(var(--header-height-difference) * -1);
display: flex;
margin-right: 1.25rem;
align-items: center;
background-color: var(--header-bg);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-inner {
height: var(--header-inner-height);
position: sticky;
color: var(--primary-green);
top: 0;
display: flex;
margin-right: 1.25rem;
align-items: center;
justify-content: space-between;
}

.header-logo img {
display: block;
height: calc(var(--header-inner-height) - 20px);
}

.header-navigation {
display: flex;
flex-wrap: wrap;
text-decoration: none;
justify-content: space-between;
}

.header-navigation a {
display: flex;
font-size: 1.125rem;
color: inherit;
text-decoration: none;
justify-content: space-between;
}

.header-navigation a:hover:after,
.header-navigation button:hover:after {
transform: scaleX(1);
}

.header-navigation a:after,
.header-navigation button:after {
transition: 0.25s ease;
content: "";
display: block;
width: 80%;
height: 2px;
background-color: var(--primary-green);
transform: scaleX(0);
position: absolute;
bottom: -2px;
left: 0;
}


.menu-button {
display: inline-block;
padding: 10px 20px;
margin: 5px;
background-color: var(--primary-green);
color: white;
border: none;
border-radius: 5px;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}

.menu-button:hover {
background-color: var(--dark-green);
}

.main {
margin-top: 3rem;
}

.widget {
width: 100%;
max-width: 900px;
border-radius: 8px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
background-color: #fff;
padding: 2.5rem;
margin: 0 auto 2rem;
font-size: 1.125rem;
}

.widget > * + * {
margin-top: 1.25em;
}

.widget h2 {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.25;
}

.widget code {
display: inline-block;
padding: 0.125em 0.25em;
border-radius: 2px;
background-color: #bee5d3;
}

.widget strong {
font-weight: 700;
}

.nav-menu {
display: flex;
justify-content: space-between;
list-style: none;
margin-right: 20px;
}

.nav-menu li {
margin-left: 20px;
}

.nav-menu a {
color: var(--primary-green);
text-decoration: none;
font-weight: bold;
}

.hero {
background-color: var(--primary-green);
color: white;
padding: 10px 10px;
text-align: center;
}

.banners {
display: flex;
width: 100%;
max-width: 900px;
text-align: center;
justify-content: space-around;
padding: 20px;
background-color: #eee;
}

.banner {
background-color: var(--primary-green);
color: white;
width: 100%;
max-width: 900px;
padding: 20px;
flex: 1;
margin: 10px;
text-align: center;
border-radius: 5px;
}

section {
margin: 40px auto;
max-width: 900px;
padding: 0 0px;
scroll-margin-top: 80px;
}

.footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: var(--dark-gray-1);
color: white;
padding: 20px;
gap: 20px;
}

.footer-left {
flex: 1 1 100%;
margin-bottom: 20px;
}

.footer-left a {
color: white;
text-decoration: none;
font-weight: bold;
}

.footer-left a:hover {
color: var(--primary-green);
}

.footer-right {
display: flex;
flex: 3 1 100%;
flex-wrap: wrap;
gap: 40px;
}

.footer-column {
flex: 1 1 200px;
}

.footer-column p {
margin: 0;
line-height: 1.6;
}

.footer i {
margin-right: 8px;
color: var(--primary-green);
}

/* Responsief gedrag */
@media (max-width: 700px) {
.footer-right {
flex-direction: column;
  }
}

form {
display: flex;
flex-direction: column;
max-width: 400px;
}
form input, form textarea, form button {
margin-bottom: 10px;
padding: 8px;
}