/* PAGE-HEADER */
#page-header { position: relative; /*height: calc(50vh - 100px);*/ height: 50vh; background-color: #ccc; }
body.homepage #page-header { height: calc(100vh - 130px); min-height: 700px; max-height: 900px; }

#page-header .page-header-slide { height: 100%; }

#page-header .page-header-content { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; padding-top: 100px; width: 90%; max-width: 1600px; height: 100%; box-sizing: border-box; z-index: 2; }
body.homepage #page-header .page-header-content { padding-top: 90px; }
#page-header .page-header-content .center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 45px; margin-bottom: 0; width: 60%; text-align: center; }
#page-header .page-header-content .center span.title { position: relative; margin: 0; font-family: "PT Serif"; font-size: 48px; color: #fff; font-weight: 700; line-height: 1.1; /*text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.25);*/ }
/*#page-header .page-header-content .center span.title:before { position: absolute; content: ''; opacity: 1; z-index: -1; inset: -100px; background-color: rgb(0 0 0 / 50%); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(0px); mask: linear-gradient(to top, transparent 0%, red 100px calc(100% - 100px), transparent 100%), linear-gradient(to left, transparent 0%, red 100px calc(100% - 100px), transparent 100%); -webkit-mask: linear-gradient(to top, transparent 0%, red 100px calc(100% - 100px), transparent 100%), linear-gradient(to left, transparent 0%, red 100px calc(100% - 100px), transparent 100%); mask-composite: intersect; -webkit-mask-composite: source-in; }*/
#page-header .page-header-content .center span.title:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; border-radius: 50%; opacity: 0.5; filter: blur(30px); transform: scale(1.25); z-index: -1; background-color: #000; }

#page-header .page-header-content .center .btn.cta { margin: 0; font-size: 24px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25); background-color: var(--cta); }

#page-header .page-header-content .button.omgeving { position: absolute; display: flex; align-items: center; justify-content: center; top: 165px; right: -10px; width: 150px; height: 150px; font-size: 24px; color: #fff; font-weight: 700; line-height: 1; text-align: center; border-radius: 50%; transform: rotate(5deg); background-color: #872f76; }
body:not(.homepage) #page-header .page-header-content .button.omgeving { top: 165px; transform: rotate(5deg) scale(0.75); transform-origin: top right; }
#page-header .page-header-content .button.omgeving a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
#page-header .page-header-content .button.omgeving:hover { filter: brightness(1.1); }

#page-header .page-header-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
#page-header .page-header-image:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; opacity: 0.25; background: rgb(0,0,0); background: linear-gradient(35deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%); z-index: 1; }
body.homepage #page-header .page-header-image:before { opacity: 0.5; }
#page-header .page-header-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

#page-header .arrow-down {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    bottom: 50px;
    cursor: pointer;
    transform: translateX(-50%);
}
#page-header .arrow-down svg {
    width: 30px;
    height: 30px;
    fill: var(--lightergreen);
}


@media screen and (max-height: 800px) {

    body.homepage #page-header { height: 100vh; min-height: 0; }
    #page-header .page-header-content .center span.title { font-size: 40px; }
    #page-header .page-header-content .center .btn.cta { font-size: 21px; }
    
    #page-header .page-header-content .button.omgeving { transform: rotate(5deg) scale(0.75); transform-origin: top right; }

}


@media screen and (max-width: 1600px) and (min-width: 1100px) {

    #page-header .page-header-content .center { width: 100%; max-width: 80%; }
    
}
@media screen and (max-width: 1100px) {

    /* PAGE-HEADER */
    #page-header {
        height: 270px;
    }
    #page-header .page-header-content {
        width: 85%;
    }
    body.homepage #page-header {
        height: calc(100vh - 70px);
        min-height: auto;
        max-height: 600px;
    }
    body.homepage #page-header .page-header-content {
        padding-top: 70px;
    }
    #page-header .page-header-content .center span.title:before {
        opacity: 0.5;
    }
    #page-header .page-header-content .button.omgeving {
        top: 90px;
        right: -15px;
        width: 150px;
        height: 150px;
        font-size: 24px;
        transform: rotate(5deg) scale(0.6);
        transform-origin: top right;
    }
    body:not(.homepage) #page-header .page-header-content .button.omgeving {
        top: 90px;
        transform: rotate(5deg) scale(0.5);
    }
    #page-header .page-header-content .center {
        gap: 30px;
        width: 100%;
    }
    #page-header .page-header-content .center span.title {
        font-size: 24px;
    }
    #page-header .page-header-content .center .btn.cta {
        font-size: 18px;
    }
    
}