/*
GEEL: #da9702
ROOD: #bd0311
BRUIN: #57441a
ZWART: #000503
*/
@import url("//cdn.beasy.nl/assets/fonts/inter/inter.css");

::selection {
    color: #fff;
    background: #000503;
}

body {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 300;
    letter-spacing: 0;
    font-size: 17px;
    color: #000503;
}

p,
ul li,
ol li {
    font-size: 16px;
    color: #000503;
}

ul {
    margin-bottom: 20px;
}

ul li::marker {
    color: #bd0311;
}

a,
a:link,
a:active,
a:focus,
a:focus-visible,
a:visited {
    color: #bd0311;
    text-decoration: none;
    outline: none;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

a:hover {
    color: #00b3e0;
}

a.scroll-to-top {
    color: #fff;
}

a.scroll-to-top:hover {
    color: #bd0311;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 0;
    color: #000503;
}



/* =========================
   Porto header: groot menu fix
   ========================= */

/* 1) Inline heights in jouw HTML overrulen (header heeft vaste height styles) */
#header,
#header .header-container,
#header .header-body {
    /* height: auto !important; */
    min-height: 160px !important;
}

#header .header-body {
    background: #d9d9d9;
    border-top: 3px solid #bd0311;
}

/* 2) Logo heeft inline width:0px -> forceren naar normaal */
#header .header-logo {
    width: auto !important;
    flex: 0 0 auto;
}

/* 3) Nav-kolom mag ruimte pakken, anders knalt alles */
#header .header-column.justify-content-end {
    flex: 1 1 auto;
    min-width: 0;
    /* voorkomt overflow */
}

/* pt-3 maakt het vaak te hoog/rommelig bij wrapping */
#header .header-nav {
    padding-top: 0 !important;
}

/* 4) Menu WRAPPEN op desktop */
#header .header-nav-main nav,
#header .header-nav-main nav>ul#mainNav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end;
    gap: 6px 10px;
    /* rij/kolom spacing */
    align-items: center;
}

/* Porto gebruikt soms floats; die wil je niet bij flex */
#header #mainNav>li {
    float: none !important;
    display: flex;
}





#header #mainNav>li>a {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 8px;

    color: #000503;
    background-color: transparent;

    /* 2 lijnen (boven + onder) */
    background-image:
        linear-gradient(#bd0311, #bd0311),
        linear-gradient(#bd0311, #bd0311);
    background-repeat: no-repeat;
    /* start: onzichtbaar (0 breed) */
    background-size: 0% 2px, 0% 2px;
    /* positie: boven en onder, netjes binnen je padding */
    background-position: 10px 2px, 10px calc(100% - 2px);

    transition: color 180ms ease, background-size 220ms ease;
}

/* Hover + active */
#header #mainNav>li>a:hover,
#header #mainNav>li>a.active,
#header #mainNav>li>a.current-page-active {
    color: #000503;
    /* breedte van de lijnen: 100% min links/rechts padding (10px + 10px) */
    background-size: calc(100% - 20px) 2px, calc(100% - 20px) 2px;
}


#header .header-logo img {
    /* margin: 20px; */
    height: 97px !important;
}




/* Dropdown pijltje netjes */
#header #mainNav>li.dropdown>a i.fas.fa-chevron-down {
    margin-left: 6px;
    font-size: 0.85em;
}

/* 5) Dropdowns altijd bovenop */
#header .header-nav-main {
    position: relative;
    z-index: 9999;
}

#header #mainNav li.dropdown .dropdown-menu {
    z-index: 10000;
    min-width: 240px;
}

/* Submenu-items mogen wrappen */
#header #mainNav li.dropdown .dropdown-menu a {
    white-space: normal;
}

/* 6) Voorkom horizontale scrollbar door hele lange menu-items */
body {
    overflow-x: hidden;
}

/* 7) Tablet/mobiel: eerder hamburger (Porto stickyEnableOnMobile staat false; wij sturen layout via CSS) */
@media (max-width: 991.98px) {

    /* Toon hamburger knop */
    #header .header-btn-collapse-nav {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Verberg desktop menu standaard */
    #header .header-nav-main nav {
        display: none !important;
    }

    /* Als Bootstrap de collapse opent (nav krijgt .show) */
    #header .header-nav-main nav.show {
        display: block !important;
        width: 100%;
        margin-top: 10px;
    }

    /* Menu als lijst onder elkaar */
    #header .header-nav-main nav.show>ul#mainNav {
        display: block !important;
    }

    #header #mainNav>li {
        display: block;
    }

    #header #mainNav>li>a {
        display: block;
        max-width: 100%;
        white-space: normal;
    }
}

/* 8) Optioneel: compacter rond 1200px */
@media (max-width: 1199.98px) {
    #header #mainNav>li>a {
        padding: 6px 8px !important;
        font-size: 0.95rem;
        max-width: 220px;
    }
}

/* Header layout verticaal maken */
#header .header-row {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Logo rij bovenaan */
#header .header-column:first-child {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

/* Menu kolom daaronder */
#header .header-column.justify-content-end {
    order: 2;
    width: 100%;
}

/* Menu over volledige breedte */
#header .header-nav-main nav,
#header .header-nav-main nav>ul#mainNav {
    width: 100%;
    justify-content: center !important;
    text-align: center;
}

/* Menu-items centreren */
#header #mainNav {
    justify-content: center !important;
}

/* Ieder menu-item netjes in het midden */
#header #mainNav>li {
    justify-content: center;
}

/* Soepel in/uitklappen logo-kolom */
#header .header-column:first-child {
    overflow: hidden;
    /* nodig voor max-height animatie */
    /* max-height: 90px; */
    /* genoeg voor je logo + marge */
    opacity: 1;
    transform: translateY(0);
    transition: max-height 260ms ease, opacity 200ms ease, transform 260ms ease;
}

/* Logo zelf ook zacht laten reageren */
#header .header-logo {
    transition: opacity 200ms ease, transform 260ms ease;
    will-change: opacity, transform, max-height;
}

/* Sticky: klap logo-kolom dicht i.p.v. hard verbergen */
html.sticky-header-active #header .header-column:first-child {
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    margin-bottom: 0 !important;
}

/* (optioneel) menu iets compacter bij sticky */
/* html.sticky-header-active #header #mainNav > li > a {
  padding: 5px 8px !important;
  font-size: 0.95rem;
} */

.beasy_header_image_550 {
    height: 400px;
}

.beasy_header_image {

    display: flex;
    align-items: center;
    /* verticaal centreren */
    justify-content: center;
    /* horizontaal centreren */
    text-align: center;
}


.beasy_header_image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 0;
}

.beasy_header_image h1 {
    position: relative;
    z-index: 1;
    color: #fff !important;
    font-weight: 700;
    font-size: 4rem !important;
    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.5),
        0 0 1px rgba(0, 0, 0, 0.8) !important;
}


/* Referentiepunt */
.beasy_module_cta .call-to-action {
    position: relative;
    background: #bd0311 !important;
}

/* Onzichtbare stretched link */
.beasy_module_cta .call-to-action::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Zet alle inhoud boven de overlay */
.beasy_module_cta .call-to-action * {
    position: relative;
    z-index: 2;
}

/* Cursor feedback */
.beasy_module_cta .call-to-action {
    cursor: pointer;
}