Making a website on Squarespace, added a desktop hamburger menu and having issues

I have been working on Squarespace 7.1 to create a website for my client and they wanted a navigation with links and a hamburger. I have done this successfully using this article:
Desktop Hamburger

I was able to successfully change the colors of the links inside the overlay but I am having issues changing colors of the closing ‘x’ in the top right corner.

the issue

This is the custom css code I have included into squarespace:

// BETTER BURGER
/* This will handle styling the burger icon color*/
a[href='/burger'] path {
  fill: white !important;
}

/*This deals with the burger size*/
a[href='/burger'] svg {
  height: 50px !important;
  width: 50px !important;
}

/* Removes the underline set by Squarespace active class */
a[href='/burger'] {
  background: none !important;
}

/* This removes the black hover box under the burger menu */
.header-nav-folder-content {
  display: none;
}

/* This will handle styling the background color of the burger overlay */
better-burger {
  background: #005798;
}

/* This will handle styling the links inside the burger menu */
better-burger a {
  color: white;
  font-size: 45px !important;
}
/* styling links inside burger menu when hovering */
better-burger a:hover{
  color: #F89623;
}

better-burger.burgerToggle svg path{
  --close-burger: white !important;
}

and this is the link for the javascript file:
https://cdn.jsdelivr.net/gh/ryandejaegher/better-burger@latest/script.js

I have tried doing

better-burger svg{
 color: white;
}

wanting to turn the ‘x’ white, but it just doesn’t wanna do it. Any help would be much appreciated, I can see the class names/issues, I just am struggling to know how to code it into the custom css that I have already existing. Thank you