@media screen {
    /*Ignore Spelling: Scrollable endregion*/
    :root {
        --header-height: 70px;
        --footer-height: 40px;
        --banner-area-height: 55px;
        --button-area-height: 45px;
        --contact-buttons-space: 10px;
        --contact-buttons-height: 10px;
    }

    html {
        position: relative;
        min-height: 100%;
    }

    body {
        margin-bottom: 60px;
    }


        body.hero-over-contact-panel .fixed-contact-panel {
            z-index: -1 !important;
            pointer-events: none;
        }

    .form {
        height: 100%
    }


    /*#region styles for fixed header and footer*/

    /* Style for the fixed header */
    .fixed-header {
        position: fixed;
        top: 0;
        width: 100%;
        height: var(--header-height);
        z-index: 1000;
        box-sizing: border-box;
        border-bottom: 5px solid var(--hpa-brand-mark-color);
        /*display: flex;*/
    }

    /* Fixed banner area inside the body */
    .fixed-banner-area {
        position: fixed;
        top: calc(var(--header-height));
        height: var(--banner-area-height);
        line-height: var(--banner-area-height);
        width: 100%; /* Ensure full width to allow proper alignment */
    }

    /* Fixed button area inside the body */
    .fixed-button-area {
        position: fixed;
        bottom: calc(var(--footer-height));
        height: calc(var(--button-area-height));
        line-height: calc(var(--button-area-height));
        width: 100%; /* Ensure full width to allow proper alignment */
    }

    /* Fixed footer */
    .fixed-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: var(--footer-height);
        line-height: calc(var(--footer-height) - 5px);
        box-sizing: border-box;
        border-top: 5px solid var(--hpa-brand-mark-color);
    }

    /* floating fixed contact panel (alignment wrapper) */
    .fixed-contact-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--footer-height) + var(--contact-buttons-space));
        z-index: 1 !important;
        /* CRITICAL:
       The wrapper spans the full width, so without this it blocks clicks/hover on underlying UI (carousel controls, etc.).
       We disable hit-testing on the wrapper and re-enable it only on the actual bubble. */
        pointer-events: none;
    }

        /* Re-enable pointer events only on the visible bubble */
        .fixed-contact-panel .contact-panel-shell,
        .fixed-contact-panel .contact-panel-shell * {
            pointer-events: auto;
        }

        /* scale only the actual panel */
        .fixed-contact-panel .contact-panel-shell {
            transform: scale(0.75);
            transform-origin: bottom right;
        }

        /* scale only the actual panel */
        .fixed-contact-panel .contact-panel-shell {
            transform: scale(0.75);
            transform-origin: bottom right;
        }

    /* justify-content-center (xs) and justify-content-md-end (>=md)
   but change the transform origin for small screens */
    @media (max-width: 767.98px) {
        .fixed-contact-panel .contact-panel-shell {
            transform-origin: bottom center;
        }
    }


        /* Scrollable body footer */
        .scrollable-body {
            position: fixed;
            top: var(--header-height);
            height: calc(100% - var(--header-height) - var(--footer-height));
            width: 100%;
            overflow-y: auto;
            scrollbar-gutter: stable;
        }

        .scrollable-body-with-buttons {
            position: fixed;
            top: var(--header-height);
            height: calc(100% - var(--header-height) - var(--footer-height) - var(--button-area-height));
            width: 100%;
            overflow-y: auto;
            scrollbar-gutter: stable;
        }

        .fixed-body-with-buttons-and-banner {
            position: fixed;
            top: calc(var(--header-height) + var(--banner-area-height));
            height: calc(100% - var(--header-height) - var(--footer-height) - var(--button-area-height) - var(--banner-area-height));
            width: 100%;
        }

        .fixed-background-image-layer {
            position: fixed;
            top: var(--header-height);
            height: calc(100% - var(--header-height) - var(--footer-height));
            overflow-y: hidden;
            width: 100%;
            z-index: -1;
        }

        /*#endregion*/

        /*#region background image*/
        .fixed-background-layer {
            position: fixed;
            inset: 0;
            z-index: -1;
        }

        .background-container {
            width: 100%;
            height: 100%;
        }

        /* A consistent “card width” that won’t scale with breakpoints */
        .contact-panel-shell {
            flex: 0 0 auto; /* don’t stretch like a Bootstrap column */
            width: 325px; /* pick your “one size” */
            max-width: calc(100vw - 2rem); /* mobile safety so it never goes off-screen */
        }

        /* Optional: make the inner layout behave better if space gets tight */
        .contact-panel-inner-xs {
            justify-content: space-between;
            gap: 0.75rem;
            flex-wrap: nowrap;
        }
        /*#endregion*/
    }