body header {
	background: var(--page-bg);
}

body header .header-logo img{
    height: 100px;
}

header .pk-header-top {
	background-color: var(--brand-primary-purple);
	color: #ffffff; padding-top: 14px;
    z-index: 3;
    position: relative;
}
header .pk-header-top-wrapper {
	display: flex; justify-content: space-between; align-items: center;
    margin-inline: max( calc( ( 100vw - var(--pk-container-width) ) / 2 ), var(--pk-site-gutter) );
}
header .doelgroep-switches {
	display: flex;
}
header .doelgroep-switches .doelgroep-switch {
	appearance: none; background: transparent; color: inherit;
	border: none; font-size: var(--body-sm); padding: 0.75em 1em;
	position: relative; border-top-left-radius: 30px; border-top-right-radius: 30px;
	cursor: pointer; display: block; text-decoration: none;
    font-weight: 600; text-align: center;
}
header .doelgroep-switches .doelgroep-switch > svg {
	display: none;
	position: absolute; right: 100%; bottom: 0; max-height: 50%; width: auto;
}
header .doelgroep-switches .doelgroep-switch > svg.right-shape {
	right: auto; left: 100%; transform: scaleX(-1);
}
header .doelgroep-switches .doelgroep-switch.active {
	background-color: var(--page-bg); color: var(--brand-primary-purple);
}
header .doelgroep-switches .doelgroep-switch.active > svg {
	display: block;
}

header .pk-header-top-wrapper .top-menu .menu-item-has-children {
	position: relative;
}
header .pk-header-top-wrapper .top-menu .menu-item-has-children > a {
	display: flex;
	align-items: center;
	gap: 0.25em;
}
header .pk-header-top-wrapper .top-menu .menu-item-has-children > a::after {
	content: '';
	width: 1em; height: 1em;
	background-color: currentColor;
	mask: url('../icons/fi-sr-angle-small-down.svg') no-repeat center / contain;
	-webkit-mask: url('../icons/fi-sr-angle-small-down.svg') no-repeat center / contain;
}
header .pk-header-top-wrapper .top-menu .sub-menu {
	top: calc(100% + 1.5rem);
	min-width: 200px;
	display: none;
	position: absolute;
	background-color: #ffffff;
	list-style: none;
	padding: 1rem;
	border-radius: 0.5rem;
	color: var(--text-color-2);
	box-shadow: 0 5px 10px rgba(32, 30, 72, 0.1);
}
header .pk-header-top-wrapper .top-menu .sub-menu::before {
	content: ''; 
	position: absolute;
	bottom: 100%;
	width: 100%;
	height: 1.5rem;
}
header .pk-header-top-wrapper .top-menu  .menu-item-has-children:hover .sub-menu {
	display: block;
}
header .pk-header-top-wrapper .top-menu .sub-menu > li:not(:last-child) {
	margin-bottom: 0.25rem;
}


header .top-menu .menu {
	display: flex; align-items: center; justify-content: center;
	list-style: none; padding: 0; gap: 1rem;
}
header .top-menu .menu li {
	font-weight: 600; font-size: var(--heading-xs);
}
header .top-menu .menu li a {
	color: inherit; text-decoration: none;
}
header .top-menu .menu li a[href^='tel:'] {
	display: flex; align-items: center; gap: 0.5em;
}
header .top-menu .menu li a[href^='tel:']::before {
	content: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_7274_5333)'%3E%3Cpath d='M23.0003 10.9996C22.7351 10.9996 22.4807 10.8942 22.2932 10.7067C22.1057 10.5191 22.0003 10.2648 22.0003 9.99956C21.9982 7.87848 21.1546 5.84488 19.6548 4.34505C18.155 2.84522 16.1214 2.00168 14.0003 1.99956C13.7351 1.99956 13.4807 1.89421 13.2932 1.70667C13.1057 1.51913 13.0003 1.26478 13.0003 0.999563C13.0003 0.734346 13.1057 0.479992 13.2932 0.292456C13.4807 0.104919 13.7351 -0.0004376 14.0003 -0.0004376C16.6516 0.002474 19.1934 1.05698 21.0681 2.93171C22.9429 4.80644 23.9974 7.34829 24.0003 9.99956C24.0003 10.2648 23.8949 10.5191 23.7074 10.7067C23.5199 10.8942 23.2655 10.9996 23.0003 10.9996ZM20.0003 9.99956C20.0003 8.40826 19.3682 6.88214 18.2429 5.75692C17.1177 4.6317 15.5916 3.99956 14.0003 3.99956C13.7351 3.99956 13.4807 4.10492 13.2932 4.29246C13.1057 4.47999 13.0003 4.73435 13.0003 4.99956C13.0003 5.26478 13.1057 5.51913 13.2932 5.70667C13.4807 5.89421 13.7351 5.99956 14.0003 5.99956C15.0612 5.99956 16.0786 6.42099 16.8287 7.17114C17.5789 7.92128 18.0003 8.9387 18.0003 9.99956C18.0003 10.2648 18.1057 10.5191 18.2932 10.7067C18.4807 10.8942 18.7351 10.9996 19.0003 10.9996C19.2655 10.9996 19.5199 10.8942 19.7074 10.7067C19.8949 10.5191 20.0003 10.2648 20.0003 9.99956ZM22.1833 22.1636L23.0933 21.1146C23.6725 20.5335 23.9977 19.7465 23.9977 18.9261C23.9977 18.1056 23.6725 17.3186 23.0933 16.7376C23.0623 16.7066 20.6563 14.8556 20.6563 14.8556C20.0788 14.3059 19.3118 13.9998 18.5146 14.0009C17.7174 14.0021 16.9512 14.3103 16.3753 14.8616L14.4693 16.4676C12.9135 15.8237 11.5002 14.8787 10.3106 13.6871C9.12098 12.4954 8.17851 11.0805 7.5373 9.52356L9.1373 7.62356C9.68901 7.04774 9.99759 6.28144 9.9989 5.48397C10.0002 4.68649 9.69413 3.91919 9.1443 3.34156C9.1443 3.34156 7.2913 0.938563 7.2603 0.907562C6.68975 0.333311 5.91618 0.00658442 5.10672 -0.00202282C4.29727 -0.01063 3.51693 0.299573 2.9343 0.861562L1.7843 1.86156C-5.0097 9.74356 9.62029 24.2606 17.7623 23.9996C18.5845 24.0043 19.3993 23.8443 20.1586 23.529C20.9179 23.2136 21.6064 22.7494 22.1833 22.1636Z' fill='%23FFFFFF'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_7274_5333'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
	width: 1em; height: 1em;
}


body header > .pk-header-wrapper {
	/*max-width: var(--pk-container-width);*/
    /*margin-inline: auto; padding: 0;*/
    padding-inline: max( calc( ( 100vw - var(--pk-container-width) ) / 2 ), var(--pk-site-gutter) );
}
body header > .pk-header-wrapper .menu a {
	text-decoration: none; color: var(--brand-primary-purple);
	font-weight: 600; font-size: var(--heading-xs);
}
body header > .pk-header-wrapper .menu .button a {
	display: flex; align-items: center; gap: 1em;
	background-color: var(--brand-secondary-orange);
	padding: 10px 24px; line-height: 1.5; border-radius: 100px;
	color: #ffffff; font-weight: 700;
	transition: all 0.3s ease-in-out;
}
body header > .pk-header-wrapper .menu .button a::after {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='15' viewBox='0 0 9 15' fill='none'%3E%3Cpath d='M7.14662 5.02513L2.56062 0.439127C2.27923 0.157865 1.89763 -9.37265e-05 1.49977 4.17235e-08C1.10191 9.38099e-05 0.720388 0.158232 0.439126 0.439627C0.157865 0.721021 -9.37263e-05 1.10262 4.17234e-08 1.50048C9.38098e-05 1.89834 0.158233 2.27986 0.439627 2.56113L5.02562 7.14613C5.07218 7.19257 5.10913 7.24775 5.13433 7.30849C5.15954 7.36924 5.17251 7.43436 5.17251 7.50013C5.17251 7.5659 5.15954 7.63102 5.13433 7.69176C5.10913 7.75251 5.07218 7.80768 5.02562 7.85413L0.439627 12.4391C0.158233 12.7204 9.38098e-05 13.1019 4.17234e-08 13.4998C-9.37263e-05 13.8976 0.157865 14.2792 0.439126 14.5606C0.720388 14.842 1.10191 15.0002 1.49977 15.0003C1.89763 15.0003 2.27923 14.8424 2.56062 14.5611L7.14662 9.97513C7.80185 9.31809 8.1698 8.42804 8.1698 7.50013C8.1698 6.57221 7.80185 5.68216 7.14662 5.02513Z' fill='white'/%3E%3C/svg%3E");;
	line-height: 0;
}
body header > .pk-header-wrapper .menu .button a:hover {
	background-color: var(--brand-orange-2);
    border-color: var(--brand-orange-2);
    color: var(--brand-primary-purple);
}

body .pk-menu .mega-menu > .pk-submenu > .pk-submenu-wrapper > .pk-menu-item > a{
    display: block;
    font-size: var(--heading-sm);
    margin-bottom: 1rem;
}

body .pk-menu .mega-menu > .pk-submenu .pk-submenu-wrapper{
    gap: 2rem;
}

.menu-heading{
    font-size: var(--heading-sm);
    font-weight: 600;
    color: var(--text-color-2);
    margin-bottom: 1rem;
    display: block;
}

.heading-subitem-wrapper{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mega-menu-item{
    display: flex;
    align-items: center;
    gap: .75rem;
    transition: transform 180ms ease-in-out;
}


.mega-menu-item .icon-wrapper{
    width: 3.5rem; height: 3.5rem;
    background-color: var(--brand-purple-1);
    border-radius: 1rem;
    display: flex;
    align-items: center; justify-content: center;
}

.mega-menu-item .icon{
    width: 1.5em; height: 1.5em;
    background-color: currentColor;
    mask: var(--icon) no-repeat center / contain;
    -webkit-mask: var(--icon) no-repeat center / contain;
}



.mega-menu-item .text{
    display: flex;
    flex-direction:column;
}

.mega-menu-item .title{
    font-size: var(--heading-xs);
}

.mega-menu-item .subtitle{
    font-size: var(--body-sm);
    font-weight: var(--pk-text-font-weight);
}

.mega-menu .image{
    mask: url(../images/menu_image_mask.svg) no-repeat center / contain;
    aspect-ratio: 261 / 274;
    position: relative;
}

.mega-menu .image img{
    position: absolute;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}

@media only screen and (min-width: 993px){
	body header .header-logo {
		translate: 20px 30%;
	}
	body.doelgroep-grootzakelijk header > .pk-header-wrapper .pk-menu {
		padding-left: 120px;
		flex-grow: 1;
	}
	body.doelgroep-grootzakelijk header > .pk-header-wrapper .menu li:first-child,
	body.doelgroep-grootzakelijk header > .pk-header-wrapper .menu li.button {
		margin-left: auto;
	}
    body .menu > .pk-menu-item:not(.button) > a{
        position: relative;
    }

    body .pk-menu .pk-menu-item > a{
        display: block;
    }

    body .menu > .pk-menu-item.current-menu-item > a{
        color: var(--brand-secondary-orange);
    }

    body .menu > .pk-menu-item.has-submenu > a{
        display: flex;
        align-items: center;
        gap: .25rem;
    }

    body .menu > .pk-menu-item.has-submenu:not(.current-menu-item) > a::after{
        content: '';
        width: 1em; height: 1em;
        background-color: currentColor;
        mask: url('../icons/fi-sr-angle-small-down.svg') no-repeat center / contain;
        -webkit-mask: url('../icons/fi-sr-angle-small-down.svg') no-repeat center / contain;
    }

    body .menu > .pk-menu-item:not(.button, .current-menu-item) > a::before{
        content: '';
        position: absolute;
        background-color: currentColor;
        bottom: 0; left: 0;
        width: 100%;
        height: 1px;

        transform: scaleX(0);
        transform-origin: right;
        transition: transform 250ms ease-in-out;
    }

    body .menu > .pk-menu-item:not(.button, .current-menu-item):is(:hover,:active,:focus, :focus-within) > a::before{
        transform: scaleX(1);
        transform-origin: left;
    }

    body .pk-menu .mega-menu > .pk-submenu{
        width: 100vw;
        left: 0;
        padding-inline: max(var(--pk-site-gutter), calc((100vw - var(--pk-container-width)) / 2));
        padding-block: 4.5rem;
    }

    body .pk-menu .mega-menu > .pk-submenu::before{
        height: 45px;
    }

    body .pk-menu .mega-menu > .pk-submenu > .pk-submenu-wrapper{
        grid-template-columns: 3fr 3fr 2fr;
    }

    .mega-menu-item:is(:hover,:active,:focus){
        transform: translateX(.25rem);
    }

    .nested-menu-wrapper{
        display: none;
    }

}

@media only screen and (min-width: 993px) and (max-width: 1140px) {
	body header > .pk-header-wrapper .menu a {
		font-size: var(--body-sm);
	}
}
@media only screen and (min-width: 993px) and (max-width: 1040px) {
	body header > .pk-header-wrapper .menu a {
		font-size: var(--body-xs);
	}
}

@media only screen and (max-width: 992px){
    header > .pk-header-wrapper, .pk-menu .menu{
        padding-inline: var(--pk-site-gutter) !important;
    }

    html body header > .pk-header-wrapper {
		padding-block: 0.5rem;
        padding-inline: var(--pk-site-gutter);
    }

    body header > .pk-header-wrapper .menu .button{
        width: 100%;
        margin-top: 1rem;
    }

    body header > .pk-header-wrapper .menu .button a{
        justify-content: center;
        font-size: var(--heading-xs) !important;
    }

    body .pk-menu .pk-menu-item > a{
        font-size: var(--heading-sm) !important;
        min-height: 44px;
        padding-block: 0.5rem;
        display: flex;
        align-items: center;
    }

    body .pk-menu .pk-menu-item.has-submenu > a{
        display: flex;
        align-items: center;
        width: 100%;
        gap: .5em;
    }

    body .pk-menu .mega-menu-item{
        min-height: 44px;
        padding-block: 0.35rem;
    }

    body .pk-menu .heading-subitem-wrapper{
        gap: 1.25rem;
    }

    body .pk-menu .pk-menu-item.has-submenu > a::after{
        content: '';
        width: 1em; height: 1em;
        background-color: currentColor;
        display: block;
        mask: url('../icons/fi-sr-angle-small-right.svg') no-repeat center / contain;
        -webkit-mask: url('../icons/fi-sr-angle-small-right.svg') no-repeat center / contain;

    }

    body .pk-menu .mega-menu > .pk-submenu{
        padding-inline: var(--pk-site-gutter);
    }


    .pk-menu .hamburger{
        border: none;
        background-color: transparent;
    }

    body .pk-menu .menu .back-button-wrapper{
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    body .pk-menu .menu .back-button-wrapper a{
        display: block;
        font-size: var(--heading-md);
    }

    body .pk-menu .menu button.back{
        border: none;
        background-color: transparent;
        color: var(--brand-primary-purple);
        font-size: var(--body-sm);
        font-weight: 700;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: .5em;
        cursor: pointer;
    }

    body .pk-menu .menu button.back::before{
        content: '';
        width: 1em; height: 1em;
        background-color: currentColor;
        display: block;
        mask: url('../icons/fi-sr-angle-small-left.svg') no-repeat center / contain;
        -webkit-mask: url('../icons/fi-sr-angle-small-left.svg') no-repeat center / contain;
    }


    body .pk-menu .menu{
        background-color: var(--page-bg);
    }

    body .pk-menu .image{
        max-width: 250px;
    }

    body header .pk-header-top-wrapper .top-menu{
        display: none;
    }

	.nested-menu-wrapper {
		margin-top: auto;
	}

}


@media screen and (max-width: 767px) {
	header .pk-header-top-wrapper {
		margin-inline: 1rem;
	}
	header .doelgroep-switches .doelgroep-switch {
		font-size: 1rem;
	}

	body header .header-logo img {
		height: 4rem;
	}
}
@media screen and (max-width: 350px) {
	header .doelgroep-switches .doelgroep-switch {
		font-size: 0.75rem; padding: 1rem;
	}
}