.a3m-hmb-wrap {
position: relative;
display: block;
width: 100%;
} .a3m-hmb-box {
background-color: #000;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
width: 100%;
box-sizing: border-box;
} .a3m-hmb-btn {
background: none;
border: none;
cursor: pointer;
padding: 0;
display: flex;
flex-direction: column;
gap: 5px;
width: 25px;
}
.a3m-hmb-btn span {
display: block;
width: 25px;
height: 2px;
background-color: #fff;
transition: all 0.3s ease;
} .a3m-hmb-wrap:hover .a3m-hmb-btn span:nth-child(1),
.a3m-hmb-wrap.is-open .a3m-hmb-btn span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.a3m-hmb-wrap:hover .a3m-hmb-btn span:nth-child(2),
.a3m-hmb-wrap.is-open .a3m-hmb-btn span:nth-child(2) {
opacity: 0;
}
.a3m-hmb-wrap:hover .a3m-hmb-btn span:nth-child(3),
.a3m-hmb-wrap.is-open .a3m-hmb-btn span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
} .a3m-hmb-nav {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
background-color: #000;
padding: 10px 0;
z-index: 99999;
box-sizing: border-box;
} .a3m-hmb-wrap:hover .a3m-hmb-nav {
display: flex;
} .a3m-hmb-nav a {
color: #fff;
text-decoration: none;
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 12px 20px;
display: block;
text-align: center;
transition: color 0.2s ease, background 0.2s ease;
white-space: nowrap;
}
.a3m-hmb-nav a:hover {
color: #aaa;
background: rgba(255,255,255,0.05);
}