@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.holo-wrapper {
    background-color: #fff;
    border-radius: 15px;
}

.holo-model-viewer{
    --holo-container-width: 100%;
}

/* Baseline styling for both embedded and modal usage. The modal-specific
   overrides further down (.holo-3d-modal .model-viewer-wrapper etc.)
   layer on top of these for the modal case (height calc for 630px frame).
   CSS variables let the consumer page (embedded.html, modal styles)
   override margin/background/radius without needing to reach into the
   shadow root — variables cross the shadow boundary, selectors don't. */

.model-viewer-wrapper {
    position: relative;
    box-sizing: border-box;
    width: calc(100% - 2 * var(--holo-wrapper-margin, 16px));
    height: calc(100% - 2 * var(--holo-wrapper-margin, 16px));
    /* Floor for when the percentage cascade collapses. Matches
       <holo-viewer-root>'s min-height (300px) minus 2 * 16px default
       margin. Embedded mode sets --holo-wrapper-margin: 0 so this floor
       still leaves the model viewer something to render against. */
    min-height: calc(300px - 2 * var(--holo-wrapper-margin, 16px));
    margin: var(--holo-wrapper-margin, 16px);
    background-color: var(--holo-wrapper-background, #F9F9FB);
    border-radius: var(--holo-wrapper-border-radius, 10px);
    overflow: auto;
    max-height: calc(100% - 2 * var(--holo-wrapper-margin, 16px));
}

.holo-model-inside {
    position: relative;
    width: 100%;
    height: 100%;
}

.holo-model-container{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;

}

@supports (-webkit-touch-callout: none) and (hover: hover) {
    /* CSS rules specific to desktop Safari */
    @media not all and (pointer: coarse) {
        .holo-model-container {
            position: relative;
            display: -webkit-box; /* Old Safari/ iOS, old Chrome, old Android */
            display: -webkit-flex; /* Safari 6.1+ */
            -webkit-box-pack: center; /* Old Safari/ iOS, old Chrome, old Android */
            -webkit-justify-content: center; /* Safari 6.1+ */
            -webkit-box-align: center; /* Old Safari/ iOS, old Chrome, old Android */
            -webkit-align-items: center; /* Safari 6.1+ */
            width: -webkit-calc(100% - 32px); /* Safari 6.1+ */
            height: -webkit-calc(100% - 32px); /* Safari 6.1+ */
        }
    }
}

.holo-3d-modal .holo-model-inside {
    position: static;
    z-index: 0;
    flex: auto;
    text-align: center;
    height:100%;
    /*max-height: 630px; */
}

.holo-3d-modal {
    --holo-modal-background-color: rgba(30, 30, 30, 0.40);
    --holo-modal-content-shadow-displacement: 0px;
    --holo-modal-content-shadow-color: rgba(0, 0, 0, 0.25);
    --holo-modal-width: 935px;
    /* Set an explicit --holo-modal-height (not just min-height) so the
       modal frame has a definite size in the layout. This makes child
       percentage heights (e.g. <holo-viewer-root>'s :host { height:100% })
       resolve correctly. Without this, the cascade breaks at the modal
       and the viewer falls back to its 300px min-height floor. */
    --holo-modal-height: 630px;
    --holo-modal-min-height: 630px;
    --holo-modal-z-index: 2147483641;
}

.holo-3d-modal .model-viewer-wrapper {
    /* Modal frame has fixed --holo-modal-min-height: 630px; override the
       baseline percentage height to the frame's pixel-based calc.
       Visual styling (bg, border-radius, margin, overflow) is inherited
       from the baseline .model-viewer-wrapper rule above. */
    max-height: 100%;
    height: calc(630px - 32px);
}

holo-3d-button {
     animation: heartbeat 2.9s ease-in-out infinite;
}

.model-viewer-wrapper holo-powered-by {
    position: absolute;
    z-index: 1;
    left: 20px;
    top: 16px;
    max-height: 16px;
}

.holo-modal-open {
    overflow: hidden;
}

.model-viewer-wrapper holo-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    /* Embedded mode hides the close button via --holo-close-button-display.
       Default 'block' preserves modal behaviour. */
    display: var(--holo-close-button-display, block);
}

.model-viewer-wrapper holo-measurement-button {
    position: absolute;
    z-index: 1;
    bottom: 34px;
    max-height: 16px;
    left: 12px;

}

/* Holo Action Menu Styles */

.holo-action-menu {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    -webkit-transition: max-height 0.3s ease-in-out;
    transition: max-height 0.3s ease-in-out;
    text-align: -webkit-right;
}

.holo-action-menu.open {
    max-height: 400px;
}

.holo-action-button {
    all: unset;
    box-sizing: border-box;
    display: flex;
    justify-content: end;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    opacity: 0;
    visibility: hidden;
}

/* Holo Opening animations */

.holo-action-menu.open .holo-action-button {
    -webkit-animation: holo-slideInUp 0.25s ease forwards;
    animation: holo-slideInUp 0.25s ease forwards;
    visibility: visible;
}

.holo-action-menu.open .holo-action-button:nth-child(1) {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.holo-action-menu.open .holo-action-button:nth-child(2) {
    -webkit-animation-delay: 0.15s;
    animation-delay: 0.15s;
}

.holo-action-menu.open .holo-action-button:nth-child(3) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.holo-action-menu.open .holo-action-button:nth-child(4) {
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
}

.holo-action-menu.open .holo-action-button:nth-child(5) {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

/* Icon animations - slide up first */

.holo-action-menu.open .holo-icon-wrapper {
    -webkit-animation: holo-iconSlideUp 0.2s ease forwards;
    animation: holo-iconSlideUp 0.2s ease forwards;
}

.holo-action-menu.open .holo-action-button:nth-child(1) .holo-icon-wrapper {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.holo-action-menu.open .holo-action-button:nth-child(2) .holo-icon-wrapper {
    -webkit-animation-delay: 0.15s;
    animation-delay: 0.15s;
}

.holo-action-menu.open .holo-action-button:nth-child(3) .holo-icon-wrapper {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.holo-action-menu.open .holo-action-button:nth-child(4) .holo-icon-wrapper {
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
}

.holo-action-menu.open .holo-action-button:nth-child(5) .holo-icon-wrapper {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

/* Text animations - slide from right to left after icons */

.holo-action-menu.open .holo-button-text {
    -webkit-animation: holo-textSlideLeft 0.2s ease forwards;
    animation: holo-textSlideLeft 0.2s ease forwards;
}

.holo-action-menu.open .holo-action-button:nth-child(1) .holo-button-text {
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
}

.holo-action-menu.open .holo-action-button:nth-child(2) .holo-button-text {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.holo-action-menu.open .holo-action-button:nth-child(3) .holo-button-text {
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s;
}

.holo-action-menu.open .holo-action-button:nth-child(4) .holo-button-text {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.holo-action-menu.open .holo-action-button:nth-child(5) .holo-button-text {
    -webkit-animation-delay: 0.45s;
    animation-delay: 0.45s;
}

/* Holo Closing animations */

/* Holo Closing animations - only text and icons, no button animation */

/* Text closing animations - slide from left to right first */

.holo-action-menu:not(.open) .holo-button-text {
    -webkit-animation: holo-textSlideRight 0.2s ease-in forwards;
    animation: holo-textSlideRight 0.2s ease-in forwards;
}

.holo-action-menu:not(.open) .holo-action-button:nth-child(1) .holo-button-text {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.holo-action-menu:not(.open) .holo-action-button:nth-child(2) .holo-button-text {
    -webkit-animation-delay: 0.05s;
    animation-delay: 0.05s;
}

.holo-action-menu:not(.open) .holo-action-button:nth-child(3) .holo-button-text {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.holo-action-menu:not(.open) .holo-action-button:nth-child(4) .holo-button-text {
    -webkit-animation-delay: 0.15s;
    animation-delay: 0.15s;
}

.holo-action-menu:not(.open) .holo-action-button:nth-child(5) .holo-button-text {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

/* Icon closing animations - slide down after each text completes */

.holo-action-menu:not(.open) .holo-icon-wrapper {
    -webkit-animation: holo-iconSlideDown 0.2s ease-in forwards;
    animation: holo-iconSlideDown 0.2s ease-in forwards;
}

.holo-action-menu:not(.open) .holo-action-button:nth-child(1) .holo-icon-wrapper {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.holo-action-menu:not(.open) .holo-action-button:nth-child(2) .holo-icon-wrapper {
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
}

.holo-action-menu:not(.open) .holo-action-button:nth-child(3) .holo-icon-wrapper {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.holo-action-menu:not(.open) .holo-action-button:nth-child(4) .holo-icon-wrapper {
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s;
}

.holo-action-menu:not(.open) .holo-action-button:nth-child(5) .holo-icon-wrapper {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.holo-action-button:hover {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
}

.holo-action-button:active {
    -webkit-transform: translateY(0) scale(0.98);
    transform: translateY(0) scale(0.98);
}

.holo-inner-button-wrapper {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: end;
    width: 100%;
}

.holo-button-text {
    color: #374151;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    text-align: left;
    flex: 1;
    -webkit-transition: color 0.15s ease;
    transition: color 0.15s ease;
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
    margin: 0 .5em;
    text-align: right;
}

.holo-action-button:hover .holo-button-text {
    color: #1f2937;
}

.holo-icon-wrapper {
    width: 48px;
    height: 48px;
    background: #2d3e4f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
    opacity: 0;
    -webkit-transform: translateY(20px) scale(0.8);
    transform: translateY(20px) scale(0.8);
    box-shadow: 0 2px 8px rgba(45, 62, 79, 0.3);
}

.holo-button-icon {
    width: 20px;
    height: 20px;
    color: #ffffff;
    flex-shrink: 0;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

.holo-action-button:hover .holo-icon-wrapper {
    background: #34495e;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(45, 62, 79, 0.4);
}

.holo-action-button:hover .holo-button-icon {
    color: #ffffff;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.holo-more-button {
    width: 48px;
    height: 48px;
    background: #2d3e4f;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
    align-self: flex-end;
}

.holo-horizontal,
.holo-vertical {
    position: absolute;
    background: white;
    border-radius: 1px;
    -webkit-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transform-origin: center;
    transform-origin: center;
}

.holo-horizontal {
    width: 16px;
    height: 2px;
}

.holo-vertical {
    width: 2px;
    height: 16px;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

/* Closed state: Show both lines as plus (+) with breathing effect */

.holo-action-menu:not(.open) .holo-vertical {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);

}

/* Open state: Show only horizontal line as minus (-) */

.holo-action-menu.open .holo-horizontal {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    -webkit-animation: holo-rotateIn 0.3s ease-out forwards;
    animation: holo-rotateIn 0.3s ease-out forwards;
}

.holo-action-menu.open .holo-vertical {
    opacity: 0;
    -webkit-transform: scale(0) rotate(0deg);
    transform: scale(0) rotate(0deg);
    -webkit-animation: holo-scaleRotateIn 0.3s ease-out 0.1s forwards;
    animation: holo-scaleRotateIn 0.3s ease-out 0.1s forwards;
}

.holo-more-button:hover .holo-horizontal,
.holo-more-button:hover .holo-vertical {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

/* Fullscreen styles to maintain original background */

.holo-model-container:fullscreen {
    background: #F9F9FB !important;
    background-color: #F9F9FB !important;
}

.holo-model-container:-webkit-full-screen {
    background: #F9F9FB !important;
    background-color: #F9F9FB !important;
}

.holo-model-container:-moz-full-screen {
    background: #F9F9FB !important;
    background-color: #F9F9FB !important;
}

.holo-model-container:-ms-fullscreen {
    background: #F9F9FB !important;
    background-color: #F9F9FB !important;
}

@-webkit-keyframes holo-slideInUp {
    0% {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateY(20px) scale(0.95);
        transform: translateY(20px) scale(0.95);
    }
    50% {
        -webkit-transform: translateY(-2px) scale(1.02);
        transform: translateY(-2px) scale(1.02);
    }
    100% {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1);
    }
}

@keyframes holo-slideInUp {
    0% {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateY(20px) scale(0.95);
        transform: translateY(20px) scale(0.95);
    }
    50% {
        -webkit-transform: translateY(-2px) scale(1.02);
        transform: translateY(-2px) scale(1.02);
    }
    100% {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1);
    }
}

@-webkit-keyframes holo-slideOutDown {
    0% {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateY(20px) scale(0.9);
        transform: translateY(20px) scale(0.9);
    }
}

@keyframes holo-slideOutDown {
    0% {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateY(20px) scale(0.9);
        transform: translateY(20px) scale(0.9);
    }
}

/* Icon slide up animation */

@-webkit-keyframes holo-iconSlideUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px) scale(0.8);
        transform: translateY(20px) scale(0.8);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1);
    }
}

@keyframes holo-iconSlideUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px) scale(0.8);
        transform: translateY(20px) scale(0.8);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1);
    }
}

/* Icon slide down animation */

@-webkit-keyframes holo-iconSlideDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(500px);
        transform: translateY(500px);
    }
}

@keyframes holo-iconSlideDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(500px);
        transform: translateY(500px);
    }
}

/* Text slide left animation (opening: right to left) */

@-webkit-keyframes holo-textSlideLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes holo-textSlideLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

/* Text slide right animation (closing: left to right) */

@-webkit-keyframes holo-textSlideRight {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }
}

@keyframes holo-textSlideRight {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }
}

/* Cool animations for plus/minus button */

@-webkit-keyframes holo-horizontalPulse {
    0%, 100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: scaleX(1.2);
        transform: scaleX(1.2);
        opacity: 1;
    }
}

@keyframes holo-horizontalPulse {
    0%, 100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: scaleX(1.2);
        transform: scaleX(1.2);
        opacity: 1;
    }
}

@-webkit-keyframes holo-verticalPulse {
    0%, 100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: scaleY(1.2);
        transform: scaleY(1.2);
        opacity: 1;
    }
}

@keyframes holo-verticalPulse {
    0%, 100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: scaleY(1.2);
        transform: scaleY(1.2);
        opacity: 1;
    }
}

@-webkit-keyframes holo-breathingLine {
    0%, 100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        opacity: 0.6;
    }
    50% {
        -webkit-transform: scaleX(1.3);
        transform: scaleX(1.3);
        opacity: 1;
    }
}

@keyframes holo-breathingLine {
    0%, 100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        opacity: 0.6;
    }
    50% {
        -webkit-transform: scaleX(1.3);
        transform: scaleX(1.3);
        opacity: 1;
    }
}

@-webkit-keyframes holo-rotateIn {
    0% {
        -webkit-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1);
    }
    50% {
        -webkit-transform: rotate(22.5deg) scale(1.2);
        transform: rotate(22.5deg) scale(1.2);
    }
    100% {
        -webkit-transform: rotate(90deg) scale(1);
        transform: rotate(90deg) scale(1);
    }
}

@keyframes holo-rotateIn {
    0% {
        -webkit-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1);
    }
    50% {
        -webkit-transform: rotate(22.5deg) scale(1.2);
        transform: rotate(22.5deg) scale(1.2);
    }
    100% {
        -webkit-transform: rotate(90deg) scale(1);
        transform: rotate(90deg) scale(1);
    }
}

@-webkit-keyframes holo-scaleRotateIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(0deg);
        transform: scale(0) rotate(0deg);
    }
        20% {
        opacity: 1;
        -webkit-transform: scale(1.3) rotate(-12.5deg);
        transform: scale(1.3) rotate(-12.5deg);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.3) rotate(-32.5deg);
        transform: scale(1.3) rotate(-32.5deg);
    }
            70% {
        opacity: 1;
        -webkit-transform: scale(1.3) rotate(-76.5deg);
        transform: scale(1.3) rotate(-76.5deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1) rotate(-90deg);
        transform: scale(1) rotate(-90deg);
    }
}

@keyframes holo-scaleRotateIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(0deg);
        transform: scale(0) rotate(0deg);
    }
        20% {
        opacity: 1;
        -webkit-transform: scale(1.3) rotate(-12.5deg);
        transform: scale(1.3) rotate(-12.5deg);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.3) rotate(-32.5deg);
        transform: scale(1.3) rotate(-32.5deg);
    }
            70% {
        opacity: 1;
        -webkit-transform: scale(1.3) rotate(-76.5deg);
        transform: scale(1.3) rotate(-76.5deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1) rotate(-90deg);
        transform: scale(1) rotate(-90deg);
    }
}

@media only screen and (max-width: 935px) {
    .holo-3d-modal {
        --holo-modal-width: 100vw;
        --holo-modal-height: 100svh;
        --holo-modal-border-radius: 0;
        --holo-modal-min-height: auto;
        --holo-modal-content-top: 0;
        --holo-modal-content-position: absolute
    }

    /* At mobile width, drop the default wrapper margin from 16px to 12px.
       Must keep honouring --holo-wrapper-margin: embedded.html sets it to 0
       for full-bleed, and a hardcoded margin here collapses through the
       borderless <holo-viewer-root> host, pushing the whole 100svh element
       down and giving the iframe scrollbars. */
    .model-viewer-wrapper {
        margin: var(--holo-wrapper-margin, 12px);
        width: calc(100% - 2 * var(--holo-wrapper-margin, 12px));
        height: calc(100% - 2 * var(--holo-wrapper-margin, 12px));
        max-height: calc(100% - 2 * var(--holo-wrapper-margin, 12px));
    }

    .holo-3d-modal .model-viewer-wrapper {
        height: calc(100% - 24px);
    }

    .holo-action-menu {
        bottom: 12px;
        right: 12px;
    }

    .holo-action-button {
        min-width: 180px;
        font-size: 13px;
    }

    .holo-more-button {
        width: 44px;
        height: 44px;
    }
}

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

    .model-viewer-wrapper holo-model-viewer::part(viewer) {
        min-height: 250px;
    }

    .model-viewer-wrapper holo-powered-by{
        top: 12px;
        left: 20px;
    }

    .holo-action-menu {
        bottom: 8px;
        right: 8px;
    }

    .holo-action-button {
        min-width: 160px;
        font-size: 12px;
    }

    .holo-icon-wrapper {
        width: 40px;
        height: 40px;
    }

    .holo-button-icon {
        width: 16px;
        height: 16px;
    }

    .holo-more-button {
        width: 40px;
        height: 40px;
    }

    .holo-horizontal {
        width: 14px;
    }

    .holo-vertical {
        height: 14px;
    }
}

.qr-code-content-wrapper {
    display: flex;
    gap: 20px;
    height: 100%;
    background-color: white;
    border-radius: 12px;
}

.holo-qr-code-modal {
    --holo-modal-background-color: rgba(30, 30, 30, 0.40);
    --holo-modal-content-shadow-displacement: 0px;
    --holo-modal-content-shadow-color: rgba(0, 0, 0, 0);
    --holo-modal-width: 740px;
    --holo-modal-height: 420px;
    --holo-modal-content-background-color: transparent;
    --holo-modal-content-color: #243341;
    --holo-modal-animation-duration: 0.01s;
    --holo-modal-z-index: 2147483642;
    font-family: 'Poppins', serif;
}

.holo-qr-code-modal holo-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
}

.holo-qr-code-modal .qr-code-help-wrapper {
    width: 100%;
    height: 100%;
    max-width: 300px;
}

.holo-qr-code-modal .qr-code-wrapper{
    width: 100%;
    max-width: 420px;
    height: 100%;
}

.holo-qr-code-modal .holo-help-wrapper{
    display: flex;
    flex-flow: column;
}

.holo-qr-code-modal .holo-help-wrapper span:first-child {
    margin-top: 18px;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    height: 30px;
    align-content: center;
}

.holo-qr-code-modal .holo-help-wrapper ol  {
    margin-top: 26px;
    margin-bottom: 28px;
    margin-left: 26px;
    font-size: 14px;
    font-weight: 400;
    list-style-type: decimal;
    min-height: 108px;
    padding: 0;
    list-style-position: inside;
}

.holo-qr-code-modal .holo-help-wrapper ol  li{
    line-height: 25px;
    text-align: left;
}

.holo-qr-code-modal .holo-help-wrapper .scan-hand-holder {
    display: flex;
    align-self: center;
}

.holo-qr-code-modal .holo-help-wrapper img {
    margin-bottom: 8px;

}

.holo-qr-code-modal .holo-back-to-product {
    font-size: 12px;
    color: rgba(36,51,65, 70%);
    display: flex;
    align-items: center;
    margin-left: 18px;
}

.holo-qr-code-modal .holo-back-to-product:hover {
    color: rgba(36,51,65, 40%);
}

.holo-qr-code-modal .holo-back-to-product:hover svg path {
    fill: rgba(36,51,65, 40%);
}

.holo-qr-code-modal svg {
    width: 12px;
    height: 13px;
    color: #66707A;
    margin-right: 3px;
}

.holo-qr-code-modal .qr-code-desc{
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 24px;
}

.holo-qr-code-modal .qr-code-desc canvas{
    width: 304px !important;
    height: 304px !important;
}

.holo-qr-code-modal .qr-code-desc p:first-of-type{
    line-height: 36px;
    font-weight: 500;
    font-size: 24px;
    margin: 0
}

.holo-qr-code-modal .qr-code-desc p:last-of-type{
    color: rgba(36,51,65, 70%);
    font-size: 16px;
    line-height: 20px;
    margin: 0
}

@media only screen and (max-width: 935px) {
    .holo-qr-code-modal {
        .qr-code-help-wrapper{
            display: none;
        }
        .qr-code-wrapper{
            margin-left: auto;
        }
    }
}

.ar-content-wrapper {
    display: flex;
    height: 100%;
    position: relative;
    font-weight: 300;
}

.holo-ar-modal {
    --holo-modal-background-color:rgba(32, 40, 51, 0.7);
    --holo-modal-content-shadow-displacement: 0px;
    --holo-modal-content-shadow-color: rgba(0, 0, 0, 0);
    --holo-modal-width: 903px;
    --holo-modal-height: 620px;
    --holo-modal-content-background-color: transparent;
    --holo-modal-content-color: #243341;
    --holo-modal-animation-duration: 0.01s;
    --holo-modal-z-index: 2147483642;
    font-family: 'Poppins', serif;
}

@media only screen and (max-width: 935px) {
    .holo-ar-modal {
        --holo-modal-width: 100%;
        --holo-modal-height: 100vh;
    }
}

.holo-ar-modal .back-box {
    position:absolute;
    top: 64px;
    left: 20px;
    display: flex;
    align-items: center;
    width:200px;
    height: 24px;
    cursor: pointer;
}

.holo-ar-modal .back-box .back-arrow {
    width: 24px;
    height: 24px;
}

.holo-ar-modal .back-box .back-arrow img {
    width: 24px;
    height: 24px;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.holo-ar-modal .title-box {
    margin:auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    max-width:400px;
    cursor: pointer;
}

.holo-ar-modal .back-box .back-text {
    color:white;
    font-size: 18px;
}

.holo-ar-modal .title1 {
    color:white;
    font-size: 32px;
    text-align: center;
    line-height: 38px;
    padding-bottom: 14px;
}

.holo-ar-modal .title2 {
    color:white;
    font-size: 18px;
    text-align: center;
    line-height: 22px;
}

.holo-ar-modal .launch-button, .holo-ar-modal .redirect-button {
    color: black;
    font-size: 18px;
    text-align: center;
    height: 50px;
    border-radius: 30px;
    min-width: 170px;
    margin-top: 50px;
    border: none;
    cursor: pointer;
    padding-left: 30px;
    padding-right: 30px;
}

.holo-cursor{
    cursor: pointer;
}

.holo-shadow{
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))
}

.d-none{
    display: none;
}

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    10% {
        transform: scale(0.9);
    }
    20% {
        transform: scale(0.95);
    }
    30% {
        transform: scale(0.9);
    }
    40% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    60% {
        transform: scale(1);
    }
}