.main-header {
    height: 100svh !important;

    .banner,
    .preloader {
        height: 100% !important;
        isolation: isolate;
        position: relative;
    }

    .back-content {
        z-index: 1;
    }

    .full-image,
    .load-gif,
    .bg-foreground,
    .bg-background {
        position: absolute;
        left: 50%;
        top: 50%;
        translate: -50% -50%;

        will-change: transform, opacity;
        backface-visibility: hidden;
        transform: translateZ(0);
    }

    .bg-foreground,
    .bg-background {
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .banner,
    .load-gif {
        transition: var(--transition);
        opacity: 1;
    }

    .bp-button .full-image .img-box {
        position: relative;
    }

    .full-image {
        --overlay-opacity: 0.00000000001;
    }

    .full-image img {
        object-position: bottom;
    }

    .bp-group {
        --desktop-h: fit-content;
    }

    .banner {
        display: flex;
        align-items: center;
        justify-content: end;
        flex-direction: column;
    }

    .front-content {
        position: relative;
        z-index: 1;
    }

    .move-to-next-section {
        opacity: var(--arrow-opacity);
        cursor: pointer;
    }

}

.editor-styles-wrapper .main-header .banner>.block-editor-inner-blocks>.block-editor-block-list__layout {
    display: flex;
    align-items: center;
    justify-content: end;
    flex-direction: column;
}


@media only screen and (min-width : 0) and (max-width : 960px) {
    .main-header {
        .banner {
            padding: 2.3rem;
            padding-bottom: min(10rem, 9svh);
        }

        .full-image {
            width: min(39.74vh, calc(100% - 6rem));
            height: 39.33vh;

            transform: translateY(calc(-2vh - 10rem));
        }


        .back-content {
            padding-bottom: 1.3rem;
        }

        .back-content,
        .front-content {
            padding-inline: 4rem;
            text-wrap: balance;
            height: auto;
        }

        .front-content {
            gap: 1.3rem;
        }

        h1 {
            font-size: 4.5rem !important;
            line-height: 110% !important;
        }

    }
}

@media only screen and (min-width : 961px) {
    .main-header {
        .full-image {
            width: 82.4rem;
            height: min(53.5rem, 56.5vh);

        }

        .full-image img {
            object-position: left calc(100% + 3.1vw);
        }

        .banner {
            padding: 2rem;
        }

        .full-image {
            transform: translateY(-6.5rem);
        }

        .load-gif {
            width: 57.1rem;
        }

        .bg-foreground img {
            object-fit: contain;
            object-position: left bottom;
        }

        .front-content {
            gap: min(3rem, 1.5svh) !important;
        }

        .front-content p {
            margin-bottom: min(10rem, 12svw);
        }
    }
}

@media only screen and (min-width : 961px) and (min-height : 800px) {
    .main-header {
        .front-content p {
            margin-bottom: min(9rem, 11svw);
        }
    }
}


/* Animation */

.main-header {
    --gif-duration: 3;
    --transition: 0.5s;
    --arrow-opacity: 0;
}

body:has(.main-header:not([data-state="done"], [data-state="scroll"], [data-state="hidden"])) {
    overflow: hidden;
}

.main-header[data-state="initial"] {
    opacity: 0;
}

.main-header:not([data-state="start"]) .load-gif,
.main-header:is([data-state="start"], [data-state="initial"]) .banner {
    opacity: 0.000000000000000001;
    pointer-events: none;
}


/* @end */



body:has(.main-header:is([data-state="initial"], [data-state="start"])) .site-nav {
    opacity: 0;
}


body:has(.main-header:is([data-state="initial"], [data-state="start"])[data-state="done"]) .promo-bar {
    display: none;
}