/**
 * Animated Header Addon Styles - Extracted from Reference Site
 * Version: 1.0.0
 */

/* CSS Variables from Reference Site */
:root {
    --dark-blue: #0e2043;
    --hover-color-to-dark-blue: #0e2043;
    --light-grey: #cfd2d9;
    --gold: #dcb060;
    --navbordercolor: #ffffff14;
    --shadow-color: #0003;
    --backgdrop-size: 80px;
    --hotspotindex: 2;
    --shadow-blur-size: 0px;
    --hover-color-to-white: white;
    --pulsing-width: 4vw;
    --pulsing-color-gold: #dcb06057;
    --header-hover-color-to-dark-blue: rgba(255, 255, 255, 1);
    --header-shadow-color: rgba(0, 0, 0, 0);
    --header-navbordercolor: rgba(255, 255, 255, 0.08);
    --header-backgdrop-size: 5px;
}

html.w-mod-touch * {
    background-attachment: scroll !important;
}

/* Contact Button */
.button {
    grid-column-gap: .8vw;
    grid-row-gap: .8vw;
    color: #fff;
    letter-spacing: .03em;
    cursor: pointer;
    background-color: #0000;
    border: 1px solid #fff;
    border-radius: 100vw;
    justify-content: flex-start;
    align-items: center;
    padding: .8vw 1.5vw .7vw;
    font-family: Ppneuemontreal Book, Arial, sans-serif;
    font-size: 1vw;
    line-height: 1.5em;
    text-decoration: none;
    transition: all .3s;
    display: flex;
}

.button:hover {
    color: var(--dark-blue);
    background-color: #fff;
}

.button.dark {
    border-color: var(--dark-blue);
    color: var(--dark-blue);
}

.button.dark:hover {
    background-color: var(--dark-blue);
    color: #fff;
}

.button.dark.contact-submit {
    width: auto;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    display: inline-flex;
    overflow: hidden;
}

.button.dark.desk.hm {
    margin-top: .5vw;
}

.button.dark.desk.hm.hide,
.button.dark.desk.hide,
.button.dark.mob,
.button.dark.mob.hide {
    display: none;
}

.button.dark.cth {
    border-color: var(--hover-color-to-dark-blue);
    color: var(--hover-color-to-dark-blue);
}

.button.dark.cth:hover {
    border-color: var(--dark-blue);
    background-color: var(--dark-blue);
    color: #fff;
}

.button.dark.cth.hide-first,
.button.hide {
    display: none;
}

/* Elementor Editor Styles */
.elementor-editor .header-wrapper {
    position: relative;
    z-index: 1;
}

.elementor-editor .header {
    position: relative;
    height: 80px;
}

.elementor-editor .header__popup {
    position: relative;
    height: 500px;
    transform: none;
    opacity: 1;
    visibility: visible;
}

.elementor-editor .image-left-menu {
    position: absolute;
    width: 50%;
}

.elementor-editor .menu-container-v2 {
    position: absolute;
    width: 50%;
    right: 0;
    height: 100%;
}

/* Webflow Classes Compatibility */
.w-inline-block {
    max-width: 100%;
    display: inline-block;
}

.w--current {
    color: var(--gold);
}

.w-embed {
    display: block;
}

/* Header Styles - Extracted from Reference Site */
.header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 999;
}

.header {
    border-bottom: 1px solid var(--header-navbordercolor);
    box-shadow: 0 2px 20px 0 var(--header-shadow-color);
    -webkit-backdrop-filter: blur(var(--header-backgdrop-size));
    backdrop-filter: blur(var(--header-backgdrop-size));
    background-color: rgba(255, 255, 255, 0.02);
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    width: 100% !important;
    height: 5vw;
    transition: all .4s;
    display: flex;
    position: relative;
}


.header.scrolled {
    background-color: rgba(255, 255, 255, 0.72);
    box-shadow: 0 2px 20px 0 var(--shadow-color);
}

@media screen and (max-width: 991px) {
    .header.scrolled {
        background-color: #ffffff !important;
        box-shadow: 0 2px 20px 0 var(--shadow-color);
    }
}

.div-block-13 {
    z-index: 1;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin-top: .85vw;
    display: flex;
    position: relative;
}

.link-block-3 {
    position: relative;
}

.logo-header-off {
    position: relative;
    opacity: 1;
}

.image-5 {
    width: 15vw;
    position: relative;
    opacity: 0 !important;
}

.header.scrolled .image-5 {
    opacity: 1 !important;
}

.image-5-color {
    width: 15vw;
    position: absolute;
    inset: 0% auto auto 0%;
    opacity: 1 !important;
}

.header.scrolled .image-5-color {
    opacity: 0 !important;
}

.logo-header-on {
    width: 15vw;
    position: absolute;
    inset: 0% auto auto 0%;
    opacity: 0;
    will-change: opacity;
}

.icon-btn-container {
    flex: none;
    justify-content: flex-end;
    align-items: flex-start;
    width: .8vw;
    height: .8vw;
    display: flex;
    position: relative;
    overflow: hidden;
}

.icon-btn-grid {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex: none;
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    width: 2.4vw;
    height: 2.4vw;
    display: grid;
    position: absolute;
    inset: 0% 0% auto auto;
}

.empty-icon {
    width: .8vw;
    height: .8vw;
}

.div-block-14 {
    flex-flow: column;
    height: 100%;
    display: flex;
}

/* Menu Toggle Styles */
.menu-toggle {
    justify-content: flex-end;
    align-items: center;
    width: 4vw;
    height: 3vw;
    display: flex;
    position: relative;
}

.hamburger-menu {
    cursor: pointer;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-end;
    width: 4vw;
    height: 2vw;
    display: flex;
}

.hamburger-menu.color {
    position: absolute;
}

header:not(.scrolled) .hamburger-menu.white {
    opacity: 1 !important;
}

header:not(.scrolled) .hamburger-menu.color {
    opacity: 0 !important;
}

.header.scrolled .hamburger-menu.white {
    opacity: 0 !important;
}

.header.scrolled .hamburger-menu.color {
    opacity: 1 !important;
}

.hamburger-line {
    width: 100%;
    line-height: 0;
}

.hamburger-line.center {
    width: 80%;
}

.close-hamburger-menu {
    cursor: pointer;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 2.5vw;
    height: 2.5vw;
    display: none;
    position: absolute;
}

.x-line-1 {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    inset: 0% 0% auto auto;
}

.x-line-2 {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    inset: auto 0% 0% auto;
}

.x-line {
    flex: none;
    width: 2.5vw;
    height: 2.5vw;
    line-height: 0;
    position: relative;
}

.disable-menu-toggle {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0% 0% auto auto;
}

/* Header Popup Styles */
.header__popup {
    background-color: #0000;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    height: calc(100dvh - 5vw);
    display: none;
    position: relative;
}

.menu___popup--inner {
    grid-column-gap: 2vw;
    grid-row-gap: 2vw;
    width: 90%;
    padding-top: 2vw;
    padding-bottom: 2vw;
    display: flex;
}

.menu___popup--inner.v2 {
    grid-column-gap: 1vw;
    grid-row-gap: 1vw;
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
    padding-top: 6vw;
    position: relative;
}

.menu-container-v2 {
    grid-column-gap: 1vw;
    grid-row-gap: 1vw;
    flex-flow: column;
    display: flex;
}

.menu-card-new {
    color: var(--dark-blue);
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-end;
    width: 100%;
    height: 4vw;
    text-decoration: none;
    transition: color .3s;
    display: flex;
    position: relative;
    overflow: hidden;
}

.menu-card-new.w--current .menu-card--title-v2 {
    color: var(--gold);
}

.menu-card-new:hover,
.menu-card-new.w--current {
    color: var(--gold);
}

.menu-card--title-v2 {
    letter-spacing: -.06em;
    flex: none;
    height: 4vw;
    font-family: Aboreto, sans-serif;
    font-size: 4vw;
    line-height: 4vw;
}

.menu-footer {
    justify-content: space-between;
    align-self: flex-end;
    align-items: flex-end;
    width: 50%;
    display: flex;
}

.image-left-menu {
    pointer-events: none;
    width: 50%;
    height: 115%;
    position: absolute;
    inset: -5vw auto auto -5vw;
}

.image-20 {
    vertical-align: middle;
    max-width: 100%;
    display: inline-block;
    object-fit: cover;
    width: 100%;
    height: 100% !important;
}

.div-block-37 {
    background-image: linear-gradient(90deg, #0000 60%, #fff 95%), linear-gradient(#0000 70%, #fff 90%);
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0% auto auto 0%;
}

/* Social Media Styles */
.sodial-media-wrapper {
    grid-column-gap: .5vw;
    grid-row-gap: .5vw;
    display: flex;
}

.social-media {
    background-color: #fff3;
    border-radius: 10vw;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 3vw;
    height: 3vw;
    transition: all .3s;
    display: flex !important;
}

.social-media:hover {
    background-color: var(--gold);
}

.social-media.blue {
    background-color: #08143724;
}

.social-media.hide {
    display: none;
}

.icon-social {
    width: 1.3vw;
    line-height: 0;
}

/* Contact Information Styles */
.maps-ct {
    grid-column-gap: .5vw;
    grid-row-gap: .5vw;
    flex-flow: column;
    display: flex;
}

.maps-ct.menu {
    width: auto;
}

.maps-ct-list {
    grid-column-gap: 1vw;
    grid-row-gap: 1vw;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
}

.image-19 {
    width: 1vw;
    height: 1.25vw !important;
}

.description {
    color: var(--dark-blue);
    letter-spacing: .03em;
    font-family: Ppneuemontreal Book, Arial, sans-serif;
    font-size: 1vw;
    line-height: 1.3em;
    letter-spacing: .03em;
}



/* Additional Utility Classes */
.hide-first {
    opacity: 1;
    visibility: visible;
}

/* Body Scroll Lock */
body.menu-open {
    overflow: hidden;
}

/* Focus States for Accessibility */
.button:focus,
.menu-card-new:focus,
.social-media:focus,
.description:focus {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .header {
        border-bottom: 2px solid #000000;
    }

    .menu-card--title-v2 {
        color: #000000;
    }

    .description {
        color: #000000;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


.main-menu-blue-overlay {
    z-index: 0;
    background-color: #0000;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0% auto auto 0%;
    opacity: 0;
}

.main-menu-blue-overlay.white {
    background: #ffffff;
}

svg:not(:root) {
    overflow: hidden;
}

@media (min-width: 992px) {
    .menu-card--title-v2 {
        transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
        transform-style: preserve-3d;
        transition: transform 0.5s ease;
    }

    .menu-card-new:hover .menu-card--title-v2 {
        transform: translate3d(0px, -100%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
        transform-style: preserve-3d;
        will-change: transform;
    }
}

/* Hide background image on mobile */
@media (max-width: 425px) {
    .image-left-menu {
        display: none;
    }
}

/* Responsive Design */
@media screen and (max-width: 479px) {
    .image-left-menu {
        display: none;
    }

    .button {
        grid-column-gap: 2vw;
        grid-row-gap: 2vw;
        padding: 2.5vw 5vw;
        font-size: 4vw;
    }

    .button.dark {
        padding: 2.5vw 5vw;
    }

    .button.dark.contact-submit {
        font-size: 4vw;
    }

    .button.dark.desk {
        display: none;
    }

    .button.dark.mob {
        display: flex;
    }

    .header {
        height: 19vw;
    }

    .header-wrapper {
        top: 0;
        left: 0;
    }

    .div-block-13 {
        margin-top: 4vw;
    }

    .image-5 {
        width: 40vw;
    }

    .image-5-color {
        width: 40vw;
    }

    .logo-header-on {
        width: 40vw;
    }

    .icon-btn-container {
        width: 5vw;
        height: 5vw;
    }

    .icon-btn-grid {
        width: 12vw;
        height: 12vw;
    }

    .div-block-14 {
        flex-flow: row;
        justify-content: space-between;
        height: auto;
    }

    .hamburger-menu {
        width: 10vw;
        height: 7vw;
    }

    .menu-toggle {
        width: 10vw;
        height: 10vw;
    }

    .menu-card--title {
        font-size: 7vw;
    }

    .menu-card--title.sub {
        font-size: 4.5vw;
    }

    .close-hamburger-menu {
        width: 8vw;
        height: 8vw;
    }

    .header__popup {
        height: calc(100svh - 19vw);
    }

    .menu-container-v2 {
        grid-column-gap: 6vw;
        grid-row-gap: 6vw;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .menu-card-content {
        padding: 4vw 0 6vw;
    }

    .x-line {
        width: 8vw;
        height: 8vw;
    }

    .menu-card {
        border-bottom: 1px solid #fff;
        height: auto;
    }

    .menu-card.sub {
        padding-top: 4vw;
        padding-bottom: 4vw;
        padding-left: 5vw;
    }

    .menu-disable-first {
        z-index: 4;
        display: block;
    }

    .menu___popup--inner {
        grid-column-gap: 4vw;
        grid-row-gap: 4vw;
        flex-flow: column;
        justify-content: center;
        width: 80%;
        padding-top: 8vw;
        padding-bottom: 8vw;
    }

    .menu-card-image {
        display: none;
    }

    .menu-block-wrapper {
        height: auto;
    }

    .menu-card--title-v2 {
        height: 8vw;
        font-size: 8vw;
        line-height: 8vw;
    }

    .menu-card-new {
        justify-content: flex-start;
        align-items: flex-start;
        height: 8vw;
    }

    .menu-footer {
        grid-column-gap: 5vw;
        grid-row-gap: 5vw;
        flex-flow: column-reverse;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
    }

    .sodial-media-wrapper {
        grid-column-gap: 2vw;
        grid-row-gap: 2vw;
    }

    .social-media {
        width: 10vw;
        height: 10vw;
    }

    .icon-social {
        width: 5vw;
    }

    .maps-ct {
        grid-column-gap: 2vw;
        grid-row-gap: 2vw;
        flex-flow: column;
        display: flex;
    }

    .maps-ct-list {
        grid-column-gap: 3vw;
        grid-row-gap: 3vw;
        justify-content: flex-start;
        align-items: flex-start;
        display: flex;
    }

    .image-19 {
        object-fit: contain;
        flex: none;
        width: 4vw;
        height: 5vw !important;
    }

    .description {
        font-size: 4vw;
    }


}