#contact-sectie {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background: #ffffff;
display: flex;
align-items: flex-start;
gap: 0;
padding: 80px 8vw;
border-top: 1px solid #e8e2d9;
}
#contact-links {
flex: 1;
padding-right: 6vw;
max-width: 420px;
}
#contact-eyebrow {
font-family: var(--font-body-family, 'Helvetica Neue', sans-serif);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: #b8975a;
margin: 0 0 14px;
font-weight: 500;
}
#contact-heading {
font-family: var(--font-heading-family, 'Helvetica Neue', sans-serif);
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 300;
color: #111111;
line-height: 1.1;
letter-spacing: -0.01em;
text-transform: uppercase;
margin: 0 0 28px;
}
#contact-tekst {
font-family: var(--font-body-family, 'Helvetica Neue', sans-serif);
font-size: 14px;
line-height: 1.8;
color: #555555;
font-weight: 300;
margin: 0 0 14px;
}
#contact-email {
color: #111111;
font-weight: 500;
text-decoration: underline;
text-underline-offset: 3px;
}
#contact-email:hover {
color: #b8975a;
}
#contact-uren {
font-family: var(--font-body-family, 'Helvetica Neue', sans-serif);
font-size: 13px;
line-height: 1.7;
color: #888888;
font-weight: 300;
margin: 20px 0 0;
padding-top: 20px;
border-top: 1px solid #e8e2d9;
}
#contact-rechts {
flex: 1.2;
}
#contact-rij {
display: flex;
gap: 16px;
}
#contact-rij .contact-veld-wrap {
flex: 1;
}
.contact-veld-wrap {
margin-bottom: 16px;
}
.contact-input {
width: 100%;
padding: 14px 16px;
background: #faf8f5;
border: 1px solid #e8e2d9;
border-radius: 0;
font-family: var(--font-body-family, 'Helvetica Neue', sans-serif);
font-size: 13px;
color: #111111;
font-weight: 300;
letter-spacing: 0.02em;
outline: none;
transition: border-color 0.2s ease;
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
}
.contact-input::placeholder {
color: #aaaaaa;
font-weight: 300;
}
.contact-input:focus {
border-color: #111111;
background: #ffffff;
}
.contact-textarea {
resize: vertical;
min-height: 140px;
}
#contact-verzenden {
display: inline-block;
width: 100%;
padding: 15px 40px;
background: #111111;
border: 1px solid #111111;
color: #ffffff;
font-family: var(--font-body-family, 'Helvetica Neue', sans-serif);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 500;
cursor: pointer;
transition: background 0.3s ease, color 0.3s ease;
margin-top: 4px;
}
#contact-verzenden:hover {
background: #b8975a;
border-color: #b8975a;
color: #ffffff;
}
@media screen and (max-width: 749px) {
#contact-sectie {
flex-direction: column;
padding: 56px 6vw;
gap: 48px;
}
#contact-links {
max-width: 100%;
padding-right: 0;
}
#contact-rij {
flex-direction: column;
gap: 0;
}
}
