.elementor-31 .elementor-element.elementor-element-f1f612a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:150px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;--z-index:0;}.elementor-widget-lottie{--caption-color:var( --e-global-color-text );}.elementor-widget-lottie .e-lottie__caption{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-31 .elementor-element.elementor-element-7eb2f1b{width:100%;max-width:100%;--lottie-container-width:100%;}.elementor-31 .elementor-element.elementor-element-ba50dba{--display:flex;--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;--padding-top:20px;--padding-bottom:20px;--padding-left:25px;--padding-right:25px;--z-index:99;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-31 .elementor-element.elementor-element-fff055b{padding:4.5px 0px 0px 0px;}.elementor-31 .elementor-element.elementor-element-fff055b .elementor-icon{font-size:30px;}.elementor-31 .elementor-element.elementor-element-fff055b .elementor-icon svg{height:30px;}.elementor-31 .elementor-element.elementor-element-fff055b .elementor-icon-wrapper svg{width:auto;}.elementor-31 .elementor-element.elementor-element-4814acf{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:15px;--padding-bottom:15px;--padding-left:50px;--padding-right:50px;}.elementor-31:not(.elementor-motion-effects-element-type-background), .elementor-31 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#00ABCC00;}.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-31 .elementor-element.elementor-element-f1f612a{--padding-top:100px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}}@media(max-width:767px){.elementor-31 .elementor-element.elementor-element-4814acf{--padding-top:0px;--padding-bottom:0px;--padding-left:30px;--padding-right:30px;}}/* Start custom CSS *//* 1) ICON WRAPPER: handle both cases - class on widget: .yvia-menu-toggle .elementor-icon - class on icon: .elementor-icon.yvia-menu-toggle */ .yvia-menu-toggle .elementor-icon, .elementor-icon.yvia-menu-toggle { position: relative; width: 32px; height: 24px; display: inline-flex; align-items: center; justify-content: center; } /* 2) Hide the actual icon glyph (font or SVG) so our bars are all you see */ .yvia-menu-toggle .elementor-icon i, .yvia-menu-toggle .elementor-icon svg, .elementor-icon.yvia-menu-toggle i, .elementor-icon.yvia-menu-toggle svg { opacity: 0; } /* 3) Draw the burger bars using pseudo-elements on .elementor-icon */ /* Shared base for both ::before and ::after */ .yvia-menu-toggle .elementor-icon::before, .yvia-menu-toggle .elementor-icon::after, .elementor-icon.yvia-menu-toggle::before, .elementor-icon.yvia-menu-toggle::after { content: ""; position: absolute; left: 50%; width: 26px; height: 2.8px; border-radius: 999px; background: #FFF; /* closed (burger) color */ transform-origin: center; transition: transform 250ms ease, box-shadow 250ms ease, background-color 250ms ease, opacity 250ms ease; } /* ::before = the three burger lines (top/middle/bottom) via box-shadow */ .yvia-menu-toggle .elementor-icon::before, .elementor-icon.yvia-menu-toggle::before { top: 50%; transform: translate(-50%, -50%); box-shadow: 0 -8px 0 0 #FFF, /* top bar */ 0 8px 0 0 #FFF; /* bottom bar */ } /* ::after = second stroke we'll use for the X (hidden in burger state) */ .yvia-menu-toggle .elementor-icon::after, .elementor-icon.yvia-menu-toggle::after { top: 50%; transform: translate(-50%, -50%) rotate(-45deg); opacity: 0; } /* Optional: give the icon a background shape + smooth transition */ .yvia-menu-toggle .elementor-icon, .elementor-icon.yvia-menu-toggle { border-radius: 5px; transition: background-color 250ms ease, box-shadow 250ms ease; } /* Background only after scroll threshold (class added by JS) */ .yvia-menu-toggle .elementor-icon.yvia-scrolled, .elementor-icon.yvia-menu-toggle.yvia-scrolled { background-color: var(--e-global-color-primary); /* change this */ } .elementor-icon.yvia-scrolled { padding: 18px !important; } /* ===================== */ /* 4) POPUP OPEN → X */ /* ===================== */ /* Elementor adds dialog-prevent-scroll on when any popup is open */ body.dialog-prevent-scroll .yvia-menu-toggle .elementor-icon::before, body.dialog-prevent-scroll .elementor-icon.yvia-menu-toggle::before { background: #ffffff; /* active color */ box-shadow: 0 0 0 0 #ffffff, /* collapse top/bottom */ 0 0 0 0 #ffffff; transform: translate(-50%, -50%) rotate(45deg); /* first diagonal */ } body.dialog-prevent-scroll .yvia-menu-toggle .elementor-icon::after, body.dialog-prevent-scroll .elementor-icon.yvia-menu-toggle::after { background: #ffffff; opacity: 1; transform: translate(-50%, -50%) rotate(-45deg); /* second diagonal */ }/* End custom CSS */