#page-header { position: relative; height: 300px; background-color: #ccc; }

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

#page-header .page-header-content { position: absolute; display: flex; align-items: center; left: 0; right: 0;margin: 0 auto; width: 90%; max-width: 1400px; height: 100%; z-index: 2; }
#page-header .page-header-content .center { }
#page-header .page-header-content .center h1 { margin-bottom: 0; font-size: 48px; color: #fff; font-weight: 700; line-height: 1; text-shadow: 5px 5px 15px rgba(0, 0, 0, 0.25); }
#page-header .page-header-content .center h1 span { display: block; }
#page-header .page-header-content .center h1 span.subtitle { font-size: 28px; font-weight: 400; line-height: 1; text-transform: uppercase; letter-spacing: 4px; }
#page-header.home-slides .page-header-content .center h1 span.subtitle { text-transform: none; letter-spacing: 0; }
#page-header .page-header-content .center h1 span.title { font-size: 64px; font-weight: 800; text-transform: uppercase; }

body.homepage #page-header { height: calc(100vh - 405px); min-height: 480px; max-height: 720px; display: block; }
body.homepage #page-header .page-header-content .center { margin-bottom: -2%; }
body.homepage #page-header .page-header-content .center h1 { position: relative; font-size: 80px; font-weight: 900; line-height: initial; }
body.homepage #page-header .page-header-content .center h1:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; border-radius: 50%; opacity: .75; filter: blur(30px); transform: scale(1.5); z-index: -1; background-color: #293330; }

.center .buttons { display: flex; gap: 15px; margin-top: 30px; }
.center .buttons a.btn.cta { margin-top: 0; padding: 18px 35px; font-size: 20px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.25); }
.center .buttons a.btn.cta:hover { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); filter: brightness(1.1); }

#page-header .page-header-image { height: 100%; overflow: hidden; z-index: 1; }
#page-header .page-header-image:before { position: absolute; top: 0; left: 0; width: 75%; height: 100%; content: ""; opacity: 0.75; background: rgb(43, 78, 70); background: linear-gradient(90deg, rgba(43, 78, 70, 1) 0%, rgba(43, 78, 70, 0) 100%); }
#page-header .page-header-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

body.homepage #page-header .page-header-image img { object-position: center/* bottom*/; }

#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);
}

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

    #page-header { height: 120px; }
    body.homepage #page-header { height: calc(100vh - 210px); min-height: 0; max-height: none; }
    
    #page-header .page-header-content { align-items: flex-end; width: 85%; }
    
    #page-header .page-header-content .center { margin-bottom: 30px; width: 100%; }
    #page-header .page-header-content .center h1 { width: 90%; font-size: 24px; }
    body.homepage #page-header .page-header-content .center h1 { width: 80%!important; }
    #page-header .page-header-content .center h1 span.subtitle { font-size: 18px; letter-spacing: 2px; line-height: 1.1; }
    #page-header .page-header-content .center h1 span.title { font-size: 32px; line-height: 1; }
    
    body.homepage #page-header .page-header-content .center { margin-bottom: 20%; }
    body.homepage #page-header .page-header-content .center h1 { display: flex; flex-direction: column; gap: 15px; width: 100%; }
    
    .center .buttons { flex-direction: column; align-items: flex-start; }
    .center .buttons a.btn.cta { font-size: 18px; padding: 15px 30px; }

}
