.dr-nav-wrapper {
width: 100%;
display: flex;
justify-content: center;
}
.dr-nav-container {
display: inline-flex;
align-items: center;
background: #fff;
border-radius: 12px;
font-family: 'Geom', sans-serif;
font-size: 16px;
gap: 17px;
padding: 0 15px;
height: 49.3333px;
position: relative;
z-index: 99;
box-sizing: border-box;
}
.dr-nav-menu {
display: flex;
align-items: center;
}
.dr-nav-menu a {
text-decoration: none;
color: #12B0E7;
padding: 6px 0;
transition: color 0.3s;
}
.dr-nav-menu a.active {
color: #000 !important;
}
.dr-nav-menu a:hover:not(.active) {
color: #000;
}
.dr-separator {
margin: 0 8px;
color: #12B0E7;
}
.dr-menu-toggle {
display: none;
color: #12B0E7;
font-weight: bold;
cursor: pointer;
font-family: 'Geom', sans-serif;
padding: 6px 0;
transition: color 0.3s;
}
.dr-menu-toggle:hover {
color: #000;
}
.dr-mobile-menu {
position: absolute;
top: 120%;
left: 0;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
display: none;
z-index: 9999;
list-style: none;
min-width: max-content;
padding: 0;
overflow: hidden;
text-align: left;
}
.dr-mobile-menu li {
list-style: none;
}
.dr-mobile-menu li a {
display: block;
padding: 8px 16px;
color: #12B0E7;
text-decoration: none;
transition: background 0.3s, color 0.3s;
}
.dr-mobile-menu li a:hover {
background: #000;
color: #fff;
}
@media (max-width: 1024px) {
.dr-nav-menu {
display: none;
}
.dr-menu-toggle {
display: inline-block;
padding: 6px 0;
}
.dr-nav-container {
padding: 0 15px;
}
.dr-mobile-menu {
left: 0;
min-width: max-content;
padding: 0;
top: calc(80% + 5px);
}
.dr-mobile-menu li a {
padding-left: 16px;
padding-right: 16px;
}
}
@media (min-width: 1025px) {
.dr-menu-toggle,
.dr-mobile-menu {
display: none;
}
}