.menu > a:nth-of-type(4) { color: var(--webheads-color-primary); }
nav { padding-bottom: 7rem !important; }
nav.scrolled { padding-bottom: 0 !important; }

.header-over-ons { position: relative; align-content: center; height: 25rem; }
.header-over-ons img { position: absolute; top: 0; left: 0; object-fit: cover; object-position: center; width: 100%; height: 100%; }
.header-over-ons h2 { font-size: 3rem; text-align: center; font-weight: bold; text-transform: uppercase; filter: var(--webheads-dropshadow); margin-top: 7rem; padding-inline: var(--webheads-inline-padding); }
.over-ons { display: flex; justify-content: space-between; gap: 5rem; padding-inline: var(--webheads-inline-padding); padding-top: 3rem; padding-bottom: 6rem; }
.over-ons-links { width: 60%; }
.over-ons-links p { margin-bottom: 1rem; }
.over-ons-links h2 { font-size: 2rem; font-weight: bold; }
.over-ons-links img { border-radius: 1rem; }
.over-ons-rechts { min-width: 25rem; }

.medewerker { width: 100%; height: 7.5rem; display: flex; background: var(--webheads-element-background-color); filter: var(--webheads-dropshadow); border-radius: .5rem; margin-bottom: 1rem; }
.medewerker:last-child { margin-bottom: 0; }
.medewerker .foto { min-width: 7rem; max-width: 8rem; max-height: 9rem; }
.medewerker .foto img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; }
.medewerker .socials { padding: 1rem; }
.medewerker .socials h2 { font-weight: bold; font-size: 1.2rem; }
.medewerker .socials p { color: var(--webheads-color-primary); font-size: .9rem; font-weight: bold; }

.medewerkers { position: sticky; top: 8.5rem; }

.medewerkers .bar { display: none; box-shadow: var(--webheads-boxshadow); background: linear-gradient(180deg, var(--webheads-color-primary), var(--webheads-color-secondary)); width: 100%; height: .3em; position: relative; border-radius: .5rem; margin-block: 2rem; }
.medewerker-contact { display: flex; gap: 1rem; margin-top: .5rem; }
.medewerker-tel svg path, .medewerker-email svg path, .medewerker-linkedin svg path { fill: white;}
.medewerker-tel:hover svg path, .medewerker-email:hover svg path, .medewerker-linkedin:hover svg path { fill: var(--webheads-color-primary); }
.medewerker-tel svg, .medewerker-email svg, .medewerker-linkedin svg { width: 1.8rem; border-radius: .3rem; }


@media screen and (max-width: 1050px) {  
    .over-ons { flex-wrap: wrap; gap: 0; }
    .over-ons > div { width: 100%; min-width: unset; }
    .medewerkers .bar { display: block; }
    .header-over-ons h2 { margin-top: 5rem; }
    
}

@media screen and (max-width: 615px) {  
    .header-over-ons h2 { margin-top: 4rem; font-size: 2.3rem; }
    .over-ons { gap: 0; }
}

@media screen and (max-width: 475px) { 
    .header-over-ons h2 { margin-top: 5rem; font-size: 2rem; }
    .header-over-ons { height: 18rem; }
    nav { padding-bottom: 5rem !important; }
    .over-ons { padding-top: 2rem; }
    .medewerker .foto { max-height: unset; }
    .medewerkers { min-width: unset; }
    .medewerker { display: block; height: unset; }
    .medewerker .foto { width: 100%; max-width: unset; max-height: unset; height: 12rem; }
    .medewerker .foto img { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-left-radius: .5rem; border-top-right-radius: .5rem; object-position: unset; }
}