:root {
    --main-background: rgb(208, 208, 208);
    --widget-background: #3d3d3d;
    --font-overall: Arial, sans-serif;
    --text-color: #d3d3d3;

    --icon-circle-size: 90px;
    --icon-size: 3.5rem;

    --choice-bg: #2b2b2b;
    --choice-border-default: #555;
    --choice-border-active: #ffffff;
}

body { background-color: black;
    margin:0; font-family: Arial, sans-serif; }

/* HEADER */
.vacature-header { text-align:center; color: var(--text-color); background-color:#3d3d3d; padding-top:40px; }
.vacature-header h2 { font-size:2.3rem; margin-bottom:10px; }
.vacature-header p { font-size:1.1rem; max-width:700px; margin:0 auto; line-height:1.5; padding-bottom:20px; }
.header-icon { font-size:3rem; margin-bottom:10px; }

/* VACATURE KAARTEN */
.vacature-wrapper { display:flex; justify-content:center; gap:2%; padding:60px 40px 40px 40px; flex-wrap:wrap; background-color:#3d3d3d; }
.rectangle { margin-bottom: 100px; position: relative; background-color:var(--widget-background); color:var(--text-color); border-radius:25px; padding:calc(var(--icon-circle-size)/2 + 20px) 20px 20px 20px; width:390px; height: fit-content; display:flex; flex-direction:column; align-items:center; box-shadow:0 5px 15px rgba(0,0,0,0.3); transition:transform 0.3s ease; text-align:center; }
.rectangle:hover { transform: scale(1.03); }
.card-icon { position:absolute; top:calc(-1 * var(--icon-circle-size)/2); left:50%; transform:translateX(-50%); background-color:#fff; color:#3d3d3d; border-radius:50%; width:var(--icon-circle-size); height:var(--icon-circle-size); display:flex; align-items:center; justify-content:center; font-size:var(--icon-size); box-shadow:0 2px 10px rgba(0,0,0,0.2); z-index:1; }

@media (max-width:600px){ .rectangle { width:90%; margin:40px auto 10px auto; } }

/* SOLLICITATIE CTA BALK */
.sollicitatie-balk { width:100%; background-color:#2e2e2e; padding:60px 0; display:flex; justify-content:center; text-align:center; }
.sollicitatie-content { color:var(--text-color); }
.sollicitatie-content h2 { font-size:2.5rem; margin:0 0 10px 0; }
.sollicitatie-content p { font-size:1.2rem; opacity:0.85; }

/* CONTACTFORMULIER */
.contact-section { background-color:#3d3d3d; color:var(--text-color); padding:60px 8%; text-align:center; }
.contact-section h2 { font-size:2.3rem; margin-bottom:10px; }
.contact-section p { font-size:1.1rem; max-width:600px; margin:0 auto 50px; line-height:1.5; }

.contact-form { background-color:var(--widget-background); padding:40px; border-radius:20px; max-width:600px; margin:auto; box-shadow:0 5px 15px rgba(0,0,0,0.4); }
.form-group { margin-bottom:25px; display:flex; flex-direction:column; }
.form-group input, .form-group textarea { padding:14px; border:none; border-radius:10px; background-color:#2b2b2b; color:#fff; font-size:1rem; }
textarea { height:140px; resize:none; }
.form-button { margin-top:10px; padding:14px 24px; background-color:#fff; color:#3d3d3d; border:none; border-radius:10px; font-size:1.1rem; cursor:pointer; font-weight:bold; transition:0.2s ease; }
.form-button:hover { transform:scale(1.05); box-shadow:0 4px 10px rgba(255,255,255,0.2); }

/* KEUZEKNOPPEN */
.choice-wrapper { margin-bottom:30px; }
.choice-buttons { display:flex; justify-content:center; gap:20px; }
.choice-btn { background-color:var(--choice-bg); border:2px solid var(--choice-border-default); color:var(--text-color); padding:14px 24px; border-radius:12px; cursor:pointer; font-size:1rem; transition:0.2s ease; display:flex; flex-direction:column; align-items:center; gap:8px; }
.choice-btn:hover { transform:scale(1.05); }
.choice-btn.active { border-color: var(--choice-border-active); }

/* SUCCES MELDING */
.success-box { display:none; background-color:#4caf50; padding:15px; color:white; border-radius:10px; max-width:600px; margin:20px auto; }