#page-header { position: relative; margin: 0 auto; width: 90%; height: 60vh; max-height: 600px; border-radius: 10px; overflow: hidden; background-color: #ccc; }

#page-header #page-header-content { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; margin: 0 auto; width: 90%; max-width: 1200px; height: 100%; z-index: 2; }

#page-header #page-header-content .center { margin-bottom: 90px; }
#page-header #page-header-content .center h1 { display: flex; flex-direction: column; margin: 0; font-size: 64px; color: #fff; line-height: 1; text-transform: none; }
#page-header #page-header-content .center h1 span { position: relative; }
#page-header #page-header-content .center h1 span:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; border-radius: 50%; opacity: .5; filter: blur(30px); transform: scale(1.25); z-index: -1; background-color: #000; }
#page-header #page-header-content .center h1 span.title { margin-bottom: 15px; font-family: "League Spartan", sans-serif; font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
#page-header #page-header-content .center h1 span.subtitle { padding-right: 30px; }

#page-header #page-header-content .center .ctas { display: flex; gap: 12px; margin-top: 45px; }
#page-header #page-header-content .center .ctas a.btn { display: flex; align-items: center; gap: 10px; padding: 15px 36px 16px 36px; font-size: 24px; font-weight: 600; border-radius: 60px; }
#page-header #page-header-content .center .ctas a.btn img { width: 28px; height: 28px; filter: var(--colorfilter1); }

#page-header #page-header-content .vanaf { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; top: 60px; right: 0; padding-top: 5px; width: 200px; height: 200px; font-family: "League Spartan", sans-serif; font-size: 32px; color: #fff; font-weight: 700; line-height: 1; text-transform: uppercase; text-align: center; border-radius: 50%; box-sizing: border-box; transform: rotate(5deg); background-color: var(--color1); }

#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; bottom: 0; left: 0; width: 100%; height: 100%; content: ""; opacity: 0.25; z-index: 1; background: #000000; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); }
#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(--bodycolor1);
}
#page-header .breadcrumbs {
    position: absolute;
    left: 20px;
    top: 20px;
}
#page-header .breadcrumbs ul {
    display: flex;
    text-transform: lowercase;
}
#page-header .breadcrumbs ul li {
    padding-right: 10px;
    color: var(--bodycolor1);
}
#page-header .breadcrumbs ul li:not(:last-child):after {
    content: "›";
    padding-left: 10px;
}
#page-header .breadcrumbs ul li a {
    color: var(--bodycolor1);
}

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

    #page-header { width: 85%; height: calc(100vh - 210px); border-radius: 8px; }
    #page-header #page-header-content { padding: 45px 30px; width: 100%; box-sizing: border-box; }
    
    #page-header #page-header-content .center { margin-bottom: 0; }
    #page-header #page-header-content .center h1 { font-size: 26px; }
    #page-header #page-header-content .center h1 span.title { font-size: 18px; }
    #page-header #page-header-content .center h1 span.subtitle br { display: none; }
    
    #page-header #page-header-content .center .ctas { display: flex; flex-direction: column; margin-top: 25px; }
    #page-header #page-header-content .center .ctas a.btn { padding: 12px 25px 12px 25px; font-size: 18px; }
    #page-header #page-header-content .center .ctas a.btn img { width: 24px; height: 24px; }
    
    #page-header #page-header-content .vanaf { top: 0; right: -15px; width: 160px; height: 160px; font-size: 28px; transform: rotate(5deg) scale(0.65); }
    
    body.homepage .row.first .content .page_content { flex-direction: column; padding: 0; color: var(--textcolor1); border-radius: 0; background-color: transparent; }
    
}