/* ============================================================================
   PAGEBUILDER - HEADER SECTION
   ============================================================================ */

/* --- Section Container --- */
section.header-layer {
    position: relative;
    padding: var(--small-padding);
}

@media (min-width:768px) {
    section.header-layer {
        padding: var(--medium-padding);
    }
}

@media (min-width:1180px) {
    section.header-layer {
        padding: var(--large-padding);
    }
}

/* --- Text Alignment Utilities --- */
.text-align-left {
    text-align: left;
}

.text-align-center {
    text-align: center;
}

.text-align-right {
    text-align: right;
}

.text-align-left * {
    text-align: left;
}

.text-align-right * {
    text-align: right;
}

.box-width-small {
    max-width: 500px;
}

.box-width-medium {
    max-width: 800px;
}

.box-width-large {
    max-width: 1200px;
}

/* --- Typography --- */
.header-layer .content-box :is(h1, h2, h3, h4, h5, h6) {
    margin-bottom: 16px;
    display: block;
}

/* --- Text Content --- */
.header-layer .text-box {
    margin: 16px 0px;
}

.text-box * {
    margin: 16px 0px;
}

.text-box > :first-child {
    margin-top: 0;
}

.text-box > :last-child {
    margin-bottom: 0;
}

/* --- Lists / Bullets --- */
ul.bullets {
    margin: 16px 0px 16px 16px;
}

.text-align-center ul.bullets,
.text-align-right ul.bullets {
    list-style-type: none;
    margin-left: 0;
}

/* --- Button Groups --- */
.buttons-box {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

.text-align-center .buttons-box {
    justify-content: center;
}

.text-align-right .buttons-box {
    justify-content: flex-end;
}

/* --- Header elements --- */
section.header-layer.with-image span.mobile-header {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

section.header-layer.with-image span.desktop-header.placement-center {
    background-position: center center !important;
}

section.header-layer.with-image span.desktop-header.placement-top {
    background-position: center top !important;
}

section.header-layer.with-image span.desktop-header.placement-bottom {
    background-position: center bottom !important;
}

@media (min-width: 1024px) {

section.header-layer.with-image span.desktop-header {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}

section.header-layer.with-image span.mobile-header {
    display: none;
}
}