.wp-block-gb-navigation {
    z-index: 1000;
    position: relative;
}

#search-button:hover svg {
    stroke: #e32026;
}

.wp-block-gb-navigation {
    z-index: 1000;
    position: relative;
}

#search-button:hover svg {
    stroke: #e32026;
}

.menu-button-lines span {
    display: block;
}

#menu-button.active span {
    margin-left: auto;
    margin-right: auto;
    animation: menuButton;
    animation-timing-function: ease;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
}

#menu-button:not(.active) span {

    animation: menuButtonReverse;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    position: relative;
}



#menu-button.open:before {
    animation-delay: 1s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    background: white;
    content: '';
}

#menu-button:not(.open):before {
    animation-delay: 1s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}


#menu-button.open span {
    opacity: 0;
}

#menu-button .menu-button-lines:before, #menu-button .menu-button-lines:after {
    margin-left: auto;
    margin-right: auto;
    transition: transform 500ms ease;
    display: block;
    width: 2rem;
    height: 20rem;
    background: white;
    content: '';
    position: absolute;
    padding: 0;
    opacity: 0;
    top:0;
    right: 8rem;
}

#menu-button.open .menu-button-lines:before, #menu-button.open .menu-button-lines:after {
    transition: all 500ms ease;
    
}

nav #menu-button.active {
    padding: 0;
}

#menu-button.open .menu-button-lines:before {
    transform: rotate(-45deg);
    opacity: 1;
}

#menu-button.open .menu-button-lines:after {
    transform: rotate(45deg);
    opacity: 1;
}

@keyframes menuButton {
    0% {
      margin-top: 5rem;
      margin-bottom: 5rem;
      padding-left: 10rem;
      padding-right: 10rem; 
      padding-bottom: 1rem;
      padding-top: 1rem;
      height: 2rem;
      width: 20rem;
      margin-left: auto;
      margin-right: auto;
    }
    
    
    25% {
       margin-top: 0;
      margin-bottom: 0;
      padding-left: 10rem;
      padding-right: 10rem; 
      padding-bottom: 3rem;
      padding-top: 3rem;
      height: 2rem;
      width: 20rem;
      margin-left: auto;
      margin-right: auto;
     
    }

    50% {
      margin-top: 0;
      margin-bottom: 0;
      padding-left: 10rem;
      padding-right: 10rem; 
      padding-bottom: 0;
      padding-top: 0;
      height: 2rem;
      width: 20rem;
      margin-left: auto;
      margin-right: auto;
     
    }
    
    75% {
      margin-top: 0;
      margin-bottom: 0;
      padding-left: 0;
      padding-right: 0; 
      padding-bottom: 0;
      padding-top: 0;
      height: 2rem;
      width: 2rem;
      margin-left: auto;
      margin-right: auto;
     
    }
    
     100% {
      margin-top: 0;
      margin-bottom: 0;
      padding-left: 0;
      padding-right: 0; 
      padding-bottom: 0;
      padding-top: 0;
      height: 7rem;
      width: 2rem;
      margin-left: auto;
      margin-right: auto;
     
    }
  
}

@keyframes menuButtonReverse {
    0% {
      margin-top: 0;
      margin-bottom: 0;
      padding-left: 0;
      padding-right: 0; 
      padding-bottom: 0;
      padding-top: 0;
      height: 7rem;
      width: 2rem;
      margin-left: auto;
      margin-right: auto;
    }
    
    
    25% {
      margin-top: 0;
      margin-bottom: 0;
      padding-left: 0;
      padding-right: 0; 
      padding-bottom: 0;
      padding-top: 0;
      height: 2rem;
      width: 2rem;
      margin-left: auto;
      margin-right: auto;
     
    }

    50% {
      margin-top: 0;
      margin-bottom: 0;
      padding-left: 10rem;
      padding-right: 10rem; 
      padding-bottom: 0;
      padding-top: 0;
      height: 2rem;
      width: 20rem;
      margin-left: auto;
      margin-right: auto;
     
    }
    
    75% {
      margin-top: 0;
      margin-bottom: 0;
      padding-left: 10rem;
      padding-right: 10rem; 
      padding-bottom: 3rem;
      padding-top: 3rem;
      height: 2rem;
      width: 20rem;
      margin-left: auto;
      margin-right: auto;
     
     
    }
    
     100% {
      margin-top: 5rem;
      margin-bottom: 5rem;
      padding-left: 10rem;
      padding-right: 10rem; 
      padding-bottom: 1rem;
      padding-top: 1rem;
      height: 2rem;
      width: 20rem;
      margin-left: auto;
      margin-right: auto;
     
    }
  
}

.wp-block-gb-navigation ul.flex.gap-x-\[30rem\].items-center.list-none {
    position: relative;
    padding-right: 50rem;
}

.wp-block-gb-navigation li:last-child {
    position: absolute;
    right: 0;
}

#menu-button.active .menu-button-lines:before, #menu-button.active .menu-button-lines:after {
    transition: all 500ms ease;
}