.elementor-widget-off-canvas {
    z-index: 99998;
    position: absolute;
}
    
/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
    
 .hamburger.hamburger.hamburger {
   padding: 8px; /* Icon padding, easier for mobile user to click */
   background-color: transparent;/* Change to a color if you would like the navicon to have a background color */
   transform: scale(0.6); /* Edit this to change the size of the icon */
   display: inline-block;
   cursor: pointer;
   transition-property: opacity, filter;
   transition-duration: 0.15s;
   transition-timing-function: linear;
   font: inherit;
   color: black;
   text-transform: none;
   border: 0;
   margin: 0;
   overflow: visible;
   z-index: 99999;
   position: relative;
}

.hamburger.hamburger.hamburger:hover {
   opacity: 0.7;
}

.hamburger.hamburger.hamburger:focus:not(:focus-visible) {
    outline: none; /* remove outline but keep A11Y friendly */
}

.hamburger-box {
   width: 40px; /* width of the container, needs to be atleast that of the lines below */
   height: 24px;
   position: relative;
}

.hamburger-inner {
   display: block;
   top: 50%;
   margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
   width: 40px; /* width of the lines */
   height: 1.5px; /* height of the lines */
   background-color: black; /* Color of the lines before the icon is active*/
   border-radius: 4px; /* Border radius of the lines */
   position: absolute;
   transition-property: transform;
   transition-duration: 0.15s;
   transition-timing-function: ease;
}


.hamburger-inner::before{
    /* background-color: transparent;  Remove the comment to make the hamburger 2 lines instead of 3. Doesn't work will all hamburger styles */
}

.hamburger-inner::before,
.hamburger-inner::after {
   content: "";
   display: block;
}

.hamburger-inner::before {
   top: -10px; /* Spacing of the top line, can't be changed */
}

.hamburger-inner::after {
   bottom: -10px; /* Spacing of the bottom line, can't be changed */
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
   background-color: black; /* Color of the lines after the icon is active */
}
/*
   * Spring
   */
.hamburger--spring .hamburger-inner {
  top: 2.2px;
  transition: background-color 0s 0.13s linear; }
  .hamburger--spring .hamburger-inner::before {
    top: 10px;
    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spring .hamburger-inner::after {
    top: 20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spring.is-active .hamburger-inner {
  transition-delay: 0.22s;
  background-color: transparent !important; }
  .hamburger--spring.is-active .hamburger-inner::before {
    top: 0;
    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 10px, 0) rotate(45deg); }
  .hamburger--spring.is-active .hamburger-inner::after {
    top: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 10px, 0) rotate(-45deg); }