/* Navbar styling */
.navbar {
position: relative;    
}
/* Menu styling */
.menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
/* Menu item styling */
.menu-item {
position: relative;
padding: 0;
}
.menu-toggle {
display: none;
}
/* Links and buttons within menu items */
.menu-item > a:link,
.menu-item > a:visited,
.menu-item > button {
display: block;
padding: 10px 15px;
color: #000;
text-decoration: none;
border: none;
cursor: pointer;
font-size: 16px;
font-weight: 400;
height: 100%;
width: 100%;
background: none;
}
.menu-item > button {
}
/* Focus styling for buttons */
.menu-item > button:focus {

}
.menu-item i {
font-size: 12px;
}
/* Hidden submenu */
.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
text-align: left;
list-style: none;
margin: 0;
padding: 0;
width: 220px;
z-index: 1000;
}
/* Submenu item styling */
.submenu-item > a:link, .submenu-item > a:visited {
display: block;
padding: 12px 20px;
color: #262434;
text-decoration: none;
background-color: #fff;
font-size: 14px;
-webkit-transition: all .35s;
transition: all .35s;
}
.submenu-item {
border-top: 1px solid #f0eaea;
}
.submenu-item:first-child {
border-top: none;
}
/* Hover and focus styling for submenu items */
.submenu-item > a:hover,
.submenu-item > a:focus {
padding-left: 15px;
color: var(--red);
}
.last-tab-sub .submenu-item > a:hover,
.last-tab-sub .submenu-item > a:focus {
padding-left: auto;
padding-right: 15px;
color: var(--red);
}
/* Display submenu on hover and focus */
.menu-item:hover .submenu,
.menu-item:focus-within .submenu {
display: block;
}
/* Responsive styling for smaller screens */
@media (max-width: 1000px) {
.menu {
flex-direction: column;
background-color: #fff;
}
/* Adjust the menu items to be full-width on small screens */
.menu-item > a:link,
.menu-item > a:visited,
.menu-item > button {
padding: 18px 0 18px 15px;
text-align: left;
}
/* Adjust the submenu to be positioned relative */
.submenu {
position: relative;
top: auto;
left: auto;
width: 100%;
text-align: left;
}
/* Adjust submenu item styling for mobile view */
.submenu-item > a:link, .submenu-item > a:visited {
padding: 15px 30px;
color: #262434;
text-align: left;
background-color: #fff;
text-indent: 15px;
}
/* Ensure the menu is hidden by default and toggleable */
.menu {
display: none;
}
.menu-toggle, .menu-toggle:visited {
display: inline-block;
font-weight: 400;
letter-spacing: 1px;
margin: -2px 8px 0 0;
width: 44px;
height: 44px;
padding: 10px;
color: #000;
text-decoration: none;
border: none;
cursor: pointer;
background-color: transparent;
position: relative;
}
/* Hamburger icon */
.hamburger,
.hamburger::before,
.hamburger::after {
display: block;
width: 24px;
height: 3px;
background-color: #000;
border-radius: 2px;
position: absolute;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hamburger::before,
.hamburger::after {
content: '';
left: 0;
}
.hamburger::before {
top: -7px;
}
.hamburger::after {
top: 7px;
}
/* Animate to X when open */
.menu-toggle.open .hamburger {
background-color: transparent;
}
.menu-toggle.open .hamburger::before {
top: 0;
transform: rotate(45deg);
}
.menu-toggle.open .hamburger::after {
top: 0;
transform: rotate(-45deg);
}
/* Focus styling for buttons */
.menu-item > button:focus {
outline: 1px solid #f0eaea;
}
.menu.open {
display: flex;
position: fixed;
top: 120px;
left: 0;
right: 0;
width: 100%;
z-index: 999;
}
.navbar {    
}
}