.elementor-219 .elementor-element.elementor-element-63fef5b{--display:flex;--position:absolute;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--padding-top:1.5vw;--padding-bottom:1.5vw;--padding-left:1.5vw;--padding-right:1.5vw;top:0px;--z-index:999999;}body:not(.rtl) .elementor-219 .elementor-element.elementor-element-63fef5b{left:0px;}body.rtl .elementor-219 .elementor-element.elementor-element-63fef5b{right:0px;}.elementor-219 .elementor-element.elementor-element-73be5df{width:var( --container-widget-width, 4.5vw );max-width:4.5vw;--container-widget-width:4.5vw;--container-widget-flex-grow:0;}.elementor-219 .elementor-element.elementor-element-73be5df img{width:100%;transition-duration:0.3s;}.elementor-219 .elementor-element.elementor-element-fc08828{width:auto;max-width:auto;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-219 .elementor-element.elementor-element-63fef5b{--padding-top:1.5vw;--padding-bottom:1.5vw;--padding-left:1.5vw;--padding-right:1.5vw;}.elementor-219 .elementor-element.elementor-element-73be5df{--container-widget-width:5vw;--container-widget-flex-grow:0;width:var( --container-widget-width, 5vw );max-width:5vw;}}@media(max-width:767px){.elementor-219 .elementor-element.elementor-element-63fef5b{--padding-top:2vw;--padding-bottom:2vw;--padding-left:2vw;--padding-right:2vw;}.elementor-219 .elementor-element.elementor-element-73be5df{--container-widget-width:15vw;--container-widget-flex-grow:0;width:var( --container-widget-width, 15vw );max-width:15vw;}}/* Start custom CSS for html, class: .elementor-element-fc08828 */.custom-menu-toggle {
    position: relative;
    z-index: 999999;

    --menu-blue: #002569;

    /* Button */
    width: 4.25vw !important;
    height: 3vw;
    padding: 0 !important;

    /* Lines */
    --line-width: 2vw;
    --line-height: 0.2vw;
    --line-gap: 0.35vw;

    /* X position */
    --x-offset: calc(var(--line-height) + var(--line-gap));

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--line-gap);

    border: 0.2vw solid var(--menu-blue);
    border-radius: 999vw;

    background: transparent;
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.25);

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}


/* =========================
   HAMBURGER LINES
   ========================= */

.custom-menu-toggle span {
    display: block;

    width: var(--line-width) !important;
    height: var(--line-height) !important;

    background: var(--menu-blue);
    border-radius: 999vw;

    transition:
        background-color 0.2s ease,
        transform 0.25s ease,
        opacity 0.2s ease;
}


/* =========================
   CLOSED / HAMBURGER HOVER
   ========================= */

.custom-menu-toggle:hover {
    background: var(--menu-blue);
}

.custom-menu-toggle:hover span {
    background: #fff;
}


/* =========================
   FOCUS / ACTIVE RESET
   ========================= */

.custom-menu-toggle:focus,
.custom-menu-toggle:focus-visible,
.custom-menu-toggle:active {
    outline: none;
}


/* =========================
   OPEN / X STATE
   ========================= */

.custom-menu-toggle.is-open {
    border-color: #00D6FF;
    background: transparent;
}

.custom-menu-toggle.is-open span {
    background: #00D6FF;
}


/* IMPORTANT:
   Keep X cyan when hovered */
.custom-menu-toggle.is-open:hover {
    background: transparent;
}

.custom-menu-toggle.is-open:hover span {
    background: #00D6FF;
}


/* =========================
   X TRANSFORMATION
   ========================= */

.custom-menu-toggle.is-open span:nth-child(1) {
    transform: translateY(var(--x-offset)) rotate(45deg);
}

.custom-menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.custom-menu-toggle.is-open span:nth-child(3) {
    transform: translateY(calc(var(--x-offset) * -1)) rotate(-45deg);
}


/* =========================
   X HOVER ANIMATION
   X → — → X → — → X
   ========================= */

.custom-menu-toggle.is-open.is-hover-ready:hover span:nth-child(1),
.custom-menu-toggle.is-open.is-hover-ready:hover span:nth-child(3) {
    animation-duration: 0.45s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-iteration-count: 1;
}


/* Top line */
.custom-menu-toggle.is-open.is-hover-ready:hover span:nth-child(1) {
    animation-name: xTopRecoil;
}


/* Bottom line */
.custom-menu-toggle.is-open.is-hover-ready:hover span:nth-child(3) {
    animation-name: xBottomRecoil;
}


/* =========================
   TOP LINE ANIMATION
   ========================= */

@keyframes xTopRecoil {

    0% {
        transform: translateY(var(--x-offset)) rotate(45deg);
    }

    20% {
        transform: translateY(var(--x-offset)) rotate(0deg);
    }

    40% {
        transform: translateY(var(--x-offset)) rotate(45deg);
    }

    60% {
        transform: translateY(var(--x-offset)) rotate(0deg);
    }

    80%,
    100% {
        transform: translateY(var(--x-offset)) rotate(45deg);
    }
}


/* =========================
   BOTTOM LINE ANIMATION
   ========================= */

@keyframes xBottomRecoil {

    0% {
        transform: translateY(calc(var(--x-offset) * -1)) rotate(-45deg);
    }

    20% {
        transform: translateY(calc(var(--x-offset) * -1)) rotate(0deg);
    }

    40% {
        transform: translateY(calc(var(--x-offset) * -1)) rotate(-45deg);
    }

    60% {
        transform: translateY(calc(var(--x-offset) * -1)) rotate(0deg);
    }

    80%,
    100% {
        transform: translateY(calc(var(--x-offset) * -1)) rotate(-45deg);
    }
}

/* =========================
   HEADER LOGO
   ========================= */

.header-logo {
    transition: opacity 0.3s ease;
}

.header-logo.is-menu-hidden {
    opacity: 0;
    pointer-events: none;
}

/* =========================
   TABLET
   ========================= */

@media (max-width: 1024px) {

    .custom-menu-toggle {
        width: 5vw !important;
        height: 4vw !important;
        --line-width: 2.5vw;
        --line-height: 0.25vw;
        --line-gap: 0.4vw;
        --x-offset: calc(var(--line-height) + var(--line-gap));
        padding: 0 !important;
        border-width: 0.25vw;
    }
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 767px) {

    .custom-menu-toggle {
        width: 14vw !important;
        height: 10vw !important;
        --line-width: 7vw;
        --line-height: 0.5vw;
        --line-gap: 1.2vw;
        --x-offset: calc(var(--line-height) + var(--line-gap));
        padding: 0 !important;
        border-width: 0.5vw;
    }
}

/* =========================
   FOCUS COLOUR FIX
   Hello Elementor's reset.css sets
   button:focus / button:hover { background-color: #c36 }
   Its specificity (0,1,1) beats .custom-menu-toggle (0,1,0), so once the menu
   is closed and .is-open is removed, the still-focused button turned maroon.
   Order matters below: :focus first, then :hover, then .is-open.
   ========================= */

.custom-menu-toggle:focus,
.custom-menu-toggle:focus-visible,
.custom-menu-toggle:active {
    background: transparent;
    color: inherit;
}

.custom-menu-toggle:focus span,
.custom-menu-toggle:active span {
    background: var(--menu-blue);
}

/* hover repeated after focus so it still wins at equal specificity */
.custom-menu-toggle:hover {
    background: var(--menu-blue);
}

.custom-menu-toggle:hover span {
    background: #fff;
}

/* open state outranks both */
.custom-menu-toggle.is-open,
.custom-menu-toggle.is-open:focus,
.custom-menu-toggle.is-open:hover {
    background: transparent;
    border-color: #00D6FF;
}

.custom-menu-toggle.is-open span,
.custom-menu-toggle.is-open:focus span,
.custom-menu-toggle.is-open:hover span {
    background: #00D6FF;
}/* End custom CSS */