body{

    padding-top: 171px !important;

}



header{

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 1050;

}



.navbar{

    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23220045' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

    background-color: var(--light-color);

    box-shadow: 0 0 0 rgba(0,0,0,0);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}

header.sticky {

    box-shadow: 0 2px 16px rgba(0,0,0,0.08);

    position: fixed;

    background-color: var(--light-color);

    width: 100%;

    top: 0;

    left: 0;

    right: 0;

    z-index: 1050;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}

header.sticky.headerup {

    transform: translateY(-100%);

    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}

header.sticky.headerdown {

    transform: translateY(-42px);

    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}

header .navbar-brand{

    margin-left: -45px;

}

header.sticky .navbar-brand {

    margin-left: -32px;

}

.navbar .navbar-brand img {

    height: 100px;

    transition: height 0.3s;

}

header.sticky .navbar-brand img {

    height: 69.5px !important;

    transition: height 0.3s;

}



.navbar-nav{

    --bs-navbar-nav-link-padding-x: 1rem;

    --bs-navbar-nav-link-padding-y: 0.5rem;

    --bs-nav-link-color: #220045;

    --bs-nav-link-hover-color: #220045;

    align-items: center;

    gap: 0.5rem;

}

    .navbar-nav .nav-link{

        background-color: transparent;

        display: inline-flex;

        align-items: center;

        font-weight: 600;

        border-radius: var(--border-radius);

        padding-bottom: .5rem;

        padding-top: .5rem;

    }

    .navbar-nav .nav-link:hover,

    .navbar-nav .nav-link:focus{

        background-color: var(--color-3);

        color: var(--bs-nav-link-hover-color);

    }

    

    /* Keep nav-link hover state when dropdown is hovered (desktop only) */

    @media (min-width: 1200px) {

        .navbar-nav .nav-item.dropdown:hover > .nav-link.dropdown-toggle,

        .navbar-nav .nav-item.dropdown:focus > .nav-link.dropdown-toggle {

            background-color: var(--color-3);

            color: var(--bs-nav-link-hover-color);

        }

    }



    .navbar-toggler{

        font-size: 1rem;

        font-weight: 600;

        color: var(--color-2);

        padding: .5rem .75rem;

        display: inline-flex;

        align-items: center;

    }

    .navbar-toggler span{

        margin-left: .5rem;

        font-size: 0.9rem;

    }

    

    .navbar-nav .nav-link.dropdown-toggle {

        border-bottom-left-radius: 0;

        border-bottom-right-radius: 0;

        padding-bottom: 1.5rem;

        margin-bottom: -.5rem;

    }

    .navbar-nav .dropdown-toggle::after {

        transition: all 0.3s ease;

        content: '';

        background-repeat: no-repeat;

        background-position: center;

        width: 15px;

        height: 15px;

        display: inline-block;

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.034' height='8' viewBox='0 0 14.034 8'%3E%3Cg transform='translate(-0.001 -97.141)'%3E%3Cpath d='M7.018,105.141a.98.98,0,0,1-.695-.288L.289,98.818a.983.983,0,1,1,1.39-1.39l5.339,5.34,5.339-5.40a.983.983,0,0,1,1.39,1.39l-6.034,6.035A.98.98,0,0,1,7.018,105.141Z' transform='translate(0 0)' fill='%233558fe'/%3E%3C/g%3E%3C/svg%3E");

        background-size: 10px;

        margin-left: 8px;

        vertical-align: middle;

        border: 0;

    }

    @media (max-width: 1199px) {

        .navbar-nav .dropdown-toggle::after {

            display: none !important;

        }

    }

    .navbar-nav .dropdown-toggle-icon {

        position: absolute;

        right: 15px;

        top: 28px;

        transform: translateY(-50%);

        transition: all 0.3s ease;

        margin-left: 8px;

        margin-top: 4px;

        cursor: pointer;

        width: 15px;

        height: 15px;

        display: inline-block;

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.034' height='8' viewBox='0 0 14.034 8'%3E%3Cg transform='translate(-0.001 -97.141)'%3E%3Cpath d='M7.018,105.141a.98.98,0,0,1-.695-.288L.289,98.818a.983.983,0,1,1,1.39-1.39l5.339,5.34,5.339-5.34a.983.983,0,0,1,1.39,1.39l-6.034,6.035A.98.98,0,0,1,7.018,105.141Z' transform='translate(0 0)' fill='%233558fe'/%3E%3C/g%3E%3C/svg%3E");

        background-size: 10px;

        background-repeat: no-repeat;

        background-position: center;

        border: 0;

    }

    .dropdown .nav-item,

    .mega-dropdown .nav-item {

        position: relative;

    }

    .navbar-nav .nav-item .btn{

        margin-left: 1rem;

    }

    .navbar-nav .nav-item .btn:hover,

    .navbar-nav .nav-item .btn:focus{

        padding-left: 2.5rem;

        padding-right: 1.5rem;

        margin-right: 1rem;

        margin-left: 0;

    }

    .navbar-nav .nav-item .btn-primary{

        background-color: var(--color-1);

        color: var(--light-color);

        margin-left: 1rem;

        padding: .75rem 1.5rem;

        border-radius: var(--border-radius);

        transition: all 0.3s ease;

    }

    .navbar-nav .nav-item .btn-primary:hover,

    .navbar-nav .nav-item .btn-primary:focus{

        margin-left: 1rem;

    }



.dropdown-menu{

    --bs-dropdown-bg: var(--color-3);

    --bs-dropdown-link-hover-bg: var(--color-2);

    --bs-dropdown-border-radius: 5px;

    --bs-dropdown-link-hover-color: var(--light-color);

    --bs-dropdown-link-hover-bg: var(--color-2);

    --bs-dropdown-link-active-color: var(--light-color);

    --bs-dropdown-link-active-bg: var(--color-2);

    --bs-dropdown-item-padding-y: 0.5rem;

    --bs-dropdown-item-padding-x: 2rem;

    box-shadow: none !important;

    margin-top: 0 !important;

    border-top-left-radius: 0;

    border: 0;

}

    .dropdown-menu .dropdown-item{

        position: relative;

        display: flex;

        align-items: center;

        justify-content: space-between;

    }

    .dropdown-menu .dropdown-item::after{

        transition: all 0.3s ease;

        content: '';

        background-repeat: no-repeat;

        background-position: center;

        width: 20px;

        height: 20px;

        display: inline-block;

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.799' height='19.799' viewBox='0 0 19.799 19.799'%3E%3Cg transform='translate(-4 9) rotate(-45)'%3E%3Cpath d='M16,1H0A1,1,0,0,1-1,0,1,1,0,0,1,0-1H16a1,1,0,0,1,1,1A1,1,0,0,1,16,1Z' transform='translate(0 8)' fill='%23FFFFFF'/%3E%3Cpath d='M0,17a1,1,0,0,1-.707-.293,1,1,0,0,1,0-1.414L6.586,8-.707.707a1,1,0,0,1,0-1.414,1,1,0,0,1,1.414,0l8,8a1,1,0,0,1,0,1.414l-8,8A1,1,0,0,1,0,17Z' transform='translate(8 0)' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E");

        background-size: contain;

        margin-left: 1rem;

        border: 0;

        transform: translateX(0px);

        opacity: 0;

    }

    .dropdown-menu .dropdown-item:hover::after{

        transform: translateX(5px);

        opacity: 1;

    }

    .topmenu-mobile-container {

        width: 100%;
    }
    .topmenu-mobile-container .nav {
        display: flex;
        flex-flow: row wrap;
        margin-top: 1rem;
        gap: 1rem;
    }
    .topmenu-mobile-container .nav .nav-item {
        width: auto;
    }
    .topmenu-mobile-container .nav .nav-item a{
        padding: 0.5rem 1rem;
        border-radius: var(--border-radius);
        background-color: var(--color-3);
        color: var(--color) !important;
        font-weight: 600;
    }
    .topmenu-mobile-container .nav .nav-item a::after{
        display: inline-block;
        content: '';
        background-repeat: no-repeat;
        background-position: center;
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.828' viewBox='0 0 18 18.828'%3E%3Cg id='Laag_1' data-name='Laag 1' transform='translate(0 0.414)'%3E%3Cpath id='Path_1130' data-name='Path 1130' d='M1,9H17' fill='rgba(0,0,0,0)' stroke='%23220045' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Path_1131' data-name='Path 1131' d='M9,1l8,8L9,17' fill='rgba(0,0,0,0)' stroke='%23220045' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
        background-size: contain;
        margin-left: 1rem;
        transform: translateX(0px) rotate(-45deg);
    }



/* --- Mega menu mobile behavior --- */

@media (max-width: 1199.98px) {

    #mainNavbar {
        align-items: start;
        flex-flow: row wrap;
    }
    #mainNavbar .menu-hoofdmenu-container{
        width: 100%;
    }

    body main{

        padding-top: 0;

    }

    .navbar .navbar-brand {

        margin-left: -40px;

    }

    .navbar .navbar-brand img{

        height: 80px;

    }

    .mega-menu-columns {

        display: block;

    }



    .mega-menu-categories {

        width: 100%;

        border: none;

        background: none;

        padding: 0;

        flex-direction: column;

    }



    .mega-menu-category {

        width: 100%;

        display: flex;

        justify-content: space-between;

        align-items: center;

        padding: 0.7rem 1.2rem;

        border-bottom: 1px solid var(--border);

        background: none;

        color: var(--text);

        font-weight: 600;

        cursor: pointer;

        text-decoration: none;

    }

    .mega-menu-category.active .toggle-icon {

        transform: rotate(180deg);

    }



    .mega-menu-category .toggle-icon {

        margin-left: 1rem;

        width: 45px;

        height: 45px;

        transition: transform 0.2s;

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.034' height='8' viewBox='0 0 14.034 8'%3E%3Cg transform='translate(-0.001 -97.141)'%3E%3Cpath d='M7.018,105.141a.98.98,0,0,1-.695-.288L.289,98.818a.983.983,0,1,1,1.39-1.39l5.339,5.34,5.339-5.34a.983.983,0,0,1,1.39,1.39l-6.034,6.035A.98.98,0,0,1,7.018,105.141Z' transform='translate(0 0)' fill='%233558fe'/%3E%3C/g%3E%3C/svg%3E");

        background-repeat: no-repeat;

        background-size: 10px;

        background-position: center;

        margin-right: -1.1rem;

    }



    .mega-menu-subitems {

        display: none;

        padding: 0.5rem 1.5rem;

        background: var(--surface);

        border-bottom: 1px solid var(--border);

    }



    .mega-menu-subitems.active {

        display: block;

    }

}



/* Mega menu: 2-column submenu layout */

@media (min-width: 1200px) {

    .mega-menu-subitems-list {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 0 2rem;

        margin: 0;

        padding: 0;

        list-style: none;

    }



    .mega-menu-subitems-list li .dropdown-item {

        border-bottom: 1px solid var(--color-3);

        font-weight: 600;

        padding: .5rem 0;

    }

    .mega-menu-subitems-list li .dropdown-item:hover,

    .mega-menu-subitems-list li .dropdown-item:focus {

        background: transparent;

        color: var(--color-1);

    }

    .mega-menu-subitems-list li .dropdown-item::after{

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.799' height='19.799' viewBox='0 0 19.799 19.799'%3E%3Cg transform='translate(-4 9) rotate(-45)'%3E%3Cpath d='M16,1H0A1,1,0,0,1-1,0,1,1,0,0,1,0-1H16a1,1,0,0,1,1,1A1,1,0,0,1,16,1Z' transform='translate(0 8)' fill='%233559FE'/%3E%3Cpath d='M0,17a1,1,0,0,1-.707-.293,1,1,0,0,1,0-1.414L6.586,8-.707.707a1,1,0,0,1,0-1.414,1,1,0,0,1,1.414,0l8,8a1,1,0,0,1,0,1.414l-8,8A1,1,0,0,1,0,17Z' transform='translate(8 0)' fill='%233559FE'/%3E%3C/g%3E%3C/svg%3E");

    }

}



/* --- Mega menu two-column layout for desktop --- */

@media (min-width: 1200px) {

    .mega-menu {

        min-width: 600px;

    }

    .mega-menu-columns {

        display: grid;

        width: 100%;

        grid-template-columns: 403px auto;

    }

    .mega-menu-categories {

        width: 100%;

        background: transparent;

        padding: 3rem 0 3rem 2rem;

        display: flex;

        flex-direction: column;

    }

    .mega-menu-category {

        padding: 0.7rem 1.2rem;

        cursor: pointer;

        font-weight: 600;

        color: var(--text);

        background: none;

        border: none;

        text-align: left;

        transition: background 0.2s, color 0.2s;

        border-radius: 5px;

        border-top-right-radius: 0;

        border-bottom-right-radius: 0;

        display: flex;

        justify-content: space-between;

        align-items: center;

        text-decoration: none;

    }

    .mega-menu-category .toggle-icon {

        width: 20px;

        height: 20px;

        transition: transform 0.2s;

        opacity: 0;

        background-repeat: no-repeat;

        background-position: center;

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.799' height='19.799' viewBox='0 0 19.799 19.799'%3E%3Cg transform='translate(-4 9) rotate(-45)'%3E%3Cpath d='M16,1H0A1,1,0,0,1-1,0,1,1,0,0,1,0-1H16a1,1,0,0,1,1,1A1,1,0,0,1,16,1Z' transform='translate(0 8)' fill='%233559FE'/%3E%3Cpath d='M0,17a1,1,0,0,1-.707-.293,1,1,0,0,1,0-1.414L6.586,8-.707.707a1,1,0,0,1,0-1.414,1,1,0,0,1,1.414,0l8,8a1,1,0,0,1,0,1.414l-8,8A1,1,0,0,1,0,17Z' transform='translate(8 0)' fill='%233559FE'/%3E%3C/g%3E%3C/svg%3E");

        background-size: contain;

        display: inline-flex;

    }

    .mega-menu-category:hover .toggle-icon,

    .mega-menu-category.active .toggle-icon {

        opacity: 1;

    }





    .mega-menu-category:hover,

    .mega-menu-category.active {

        background: var(--light-color);

        color: var(--color-1);

    }



    .mega-menu-subitems {

        flex: 1;

        padding: 2rem 2.5rem;

        display: none;

        background: var(--light-color);

        border-radius: var(--border-radius);

                BORDER-BOTTOM-LEFT-RADIUS: 0px !important;
        border-top-left-radius: 0px !important;
    }



    .mega-menu-subitems.active {

        display: block;

    }

    .dropdown-menu.mega-menu {

        position: absolute;

        left: 0;

        right: 0;

        flex-wrap: nowrap;

        padding: 1rem;

        top: 100%;

        z-index: 1000;

        opacity: 0;

        transform: translateY(-29px);

        transition: opacity 0.3s ease, transform 0.3s ease;

        display: flex !important;

        pointer-events: none;

        width: 1100px;

        margin: 0 auto;

        padding: 0;

        border: 1px solid var(--color-3);

    }

    .nav-item.dropdown:hover>.dropdown-menu.mega-menu,

    .nav-item.dropdown:focus-within>.dropdown-menu.mega-menu {

        display: flex;

        opacity: 1;

        transform: translateY(-21px);

        pointer-events: auto;

    }

    .dropdown-menu.standard-dropdown {

        opacity: 0;

        transform: translateY(-10px);

        transition: opacity 0.3s ease, transform 0.3s ease;

        display: block !important;

        pointer-events: none;

    }

    .nav-item.dropdown:hover>.dropdown-menu.standard-dropdown {

        opacity: 1;

        transform: translateY(0);

        pointer-events: auto;

    }

    .nav-item.dropdown.mega-dropdown{

        position: static;

    }

    .dropdown-menu.standard-dropdown {

        display: none;

        position: absolute;

        top: 100%;

        z-index: 1000;

    }

    .nav-item.dropdown:hover>.dropdown-menu.standard-dropdown {

        display: block;

    }

    .mega-menu>li {

        flex: 1;

        list-style: none;

        margin: 0 0.5rem;

    }

    .mega-menu>li>a {

        font-weight: 600;

        margin-bottom: .5rem;

        display: block;

    }

    .mega-menu ul {

        list-style: none;

        padding: 0;

        margin: 0;

    }

    .mega-menu .mega-col-1 {

        background-color: #f8f9fa;

        padding: 1rem;

    }

}

@media (min-width: 1400px) {

    .dropdown-menu.mega-menu {

        width: 1290px;

    }

}

@media (max-width: 1199px) {

    .nav-item {

        width: 100%;

    }

    .nav-item .nav-link {

        width: 100%;

        padding: 1rem 1.5rem !important;

        border-radius: var(--border-radius) !important;

    }

    .dropdown-item.mega-menu-category::after {

        display: none;        

    }

    .mega-menu-subitems{

        padding: 0;

    }

    .mega-menu-subitems-list{

        list-style: none;

        padding-left: 0;

    }

    .mega-menu-subitems-list li .dropdown-item {

        padding: 1rem 1.5rem;

    }

    .navbar-collapse.justify-content-end.collapse.show{

        height: calc(100vh - 109px);
        display: flex;

    }

    .topbar .nav-item {

        width: auto;

    }

    #mainNavbar {

        width: 100%;

    }

    .navbar-nav .nav-item .btn:focus,

    .navbar-nav .nav-item .btn:hover{

        margin-left: 0;

        margin-right: 0;

    }

    .navbar-nav .nav-item .btn{

        margin-left: 0;

        width: 100%;

        justify-content: center;

    }

    .navbar-nav .dropdown-menu{

        padding: 0;

    }

    .mega-menu-category {

        border-radius: 5px;

    }

    .mega-menu-category:hover,

    .mega-menu-category:focus,

    .mega-menu-category.active {

        background: var(--color-2);

        color: var(--light-color);

    }

    .mega-menu-subitems-list{

        margin-top: -5px;

        border-bottom-left-radius: var(--border-radius);

        border-bottom-right-radius: var(--border-radius);

        overflow: hidden;

        padding-bottom: 10px;

        background-color: var(--color-2);

    }

    .dropdown-menu.standard-dropdown {

        padding: 1rem 0;

    }

    .mega-menu-subitems-list li a{

        color: var(--light-color);

        background-color: var(--color-2);

        padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x) !important;

    }

}

@media (max-width: 768px) {

    body{

        padding-top: 110px !important;

    }

    #breadcrumbs{

        margin-top: 0;

    }

    body main {

        padding-top: 0;

    }

}

@media (max-width: 576px) {

    header.sticky.headerdown{

        transform: translateY(0);

    }

    body{

        padding-top: 61px !important;

    }

    body main {

        padding-top: 0;

    }

    .navbar{

        padding-top: 0;

        padding-bottom: 0;

        top: 0;

    }

    .navbar > .container{

        align-items: end;

    }

    .navbar .navbar-brand,

    header.sticky .navbar-brand {

        margin-left: -21px;

    }

    .navbar .navbar-brand img {

        height: 50px;

    }

    header.sticky .navbar-brand img{

        height: 50px !important;

    }

    .navbar .btn-phone,

    .navbar .navbar-toggler{

        margin-bottom: .5rem;

    }

}