.hamburger {background:var( --e-global-color-secondary );border-radius:10px;width: 50px;height: 50px;display: flex;flex-direction: column;justify-content: center;transition: all 0.3s ease;align-items: center;gap: 4px;padding:10px;cursor: pointer;position: relative;}
.hamburger span {display: block;width: 100%;height: 4px;border-radius:999rem;background-color:#fff;transition: all 0.3s ease;transform-origin: center;position: relative;}

.hamburger.close {background:#fff;}
.hamburger.close span{background-color:var( --e-global-color-secondary );}
.hamburger.close span:nth-child(1) {transform: rotate(45deg);position: absolute;top: 50%;left: 50%;transform-origin: center;width:30px;margin-left:-15px;}
.hamburger.close span:nth-child(2) {opacity: 0;}
.hamburger.close span:nth-child(3) {transform: rotate(-45deg);position: absolute;top: 50%;left: 50%;transform-origin: center;width:30px;margin-left:-15px;}

.hamburger.open:hover{padding:8px;gap:6px;}
.hamburger.close:hover span{width:20px;margin-left:-10px;}