.site-header {
  width: 100%;
  background-color: #ffffff; /* Adjust background as needed */
  padding: 10px 0;
  border-bottom: 1px solid #ffffff;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Center and contain the navigation */
.site-header .container {
  max-width: 1400px; /* Adjaust as needed for large screens */
  margin: 0 auto; /* Centering */
  padding: 0 20px; /* Prevents content touching edges */
}

/* Center align the navigation items */
.site-header .main-navigation .nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo adjustments - base styles */
.site-header .logo {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;  /* Add consistent base padding */
}

.site-header .logo img {
  max-width: 550px;
  width: 100%;
  height: auto;
  transition: all 0.3s ease;
}

/* Smaller header when scrolled */
.site-header.scrolled {
  padding: 5px 0;
}

.site-header.scrolled .logo img {
  max-width: 300px;
}

/* Left & Right Menus - equal flex to center menu items */
.site-header .nav-left,
.site-header .nav-right {
  flex: 1;
  display: flex;
  gap: 80px;
}

.site-header .nav-left {
  justify-content: flex-start;
}

.site-header .nav-right {
  justify-content: space-between;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.nav-left li a:hover {
  color: #747170 !important;
}

.nav-right li a:hover {
  color: #747170 !important;
}

/* Ensure the navigation menus stay balanced */
.nav-menu {
  display: flex;
  gap: 90px; /* Adjust to your preference */
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Center nav-right menu items, but keep search icon at the end */
.site-header .nav-right .nav-menu {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  gap: 90px;
  align-items: center;
  margin-left: 40px; /* Add space between logo and Shop menu item */
}

/* Center the About menu item between Shop and search icon */
/* Position it relative to nav-right container */
.site-header .nav-right .nav-menu li:nth-child(2) {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  z-index: 1;
}

/* Ensure search icon stays on the right */
.site-header .nav-right .search-icon {
  margin-left: auto;
  flex-shrink: 0;
  width: auto;
  position: relative;
  z-index: 1;
}

/* Default state - hide hamburger menu and mobile elements */
.hamburger-menu,
.nav-top,
.mobile-menu {
    display: none;
}

@media (max-width: 1024px) {
    .nav-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 10px 16px;
        position: relative;
        margin-top: 20px;
    }

    /* Center logo while allowing hamburger and search icon on sides */
    .nav-top .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        max-width: 300px;
        padding: 10px 0;  /* Match the desktop padding */
    }

    .nav-top .logo img {
        width: 100%;
        height: auto;
        display: block;
    }

    .hamburger-menu {
        display: block;
        font-size: 18px;  /* Increased from 15px */
        border: none;
        background: none;
        cursor: pointer;
        z-index: 1;
        color: #000;
        transition: color 0.3s ease;
        padding: 10px;  /* Add some padding around the icon */
    }

    .hamburger-menu:hover {
        color: #747170;
    }

    .search-icon-top {
        font-size: 18px;
        z-index: 1;
    }

    .search-icon-top a {
        color: #000;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .search-icon-top a:hover {
        color: #747170;  /* Same hover color as menu items */
        cursor: pointer;
    }

    /* Regular navigation container - hide completely in mobile */
    .nav-container {
        display: none !important;  /* Force hide the regular navigation in mobile */
    }

    .nav-container .nav-left,
    .nav-container .nav-right {
        display: none !important;  /* Force hide the menu items */
    }

    /* Hide desktop version of logo */
    .main-navigation > .logo {
        display: none !important;
    }

    /* Mobile menu specific styles */
    .mobile-menu {
        position: fixed;
        top: 0;
        left: -75%;  /* Start off-screen */
        width: 75%;
        height: 100vh;
        background: white;
        z-index: 2000;
        padding: 40px;
        display: flex;
        flex-direction: column;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        transition: left 0.3s ease-in-out;  /* Smooth slide-in animation */
    }

    .mobile-menu.hidden {
        left: -75%;  /* Slide out */
    }

    .mobile-menu:not(.hidden) {
        left: 0;  /* Slide in */
    }

    /* Overlay background */
    .mobile-menu::after {
        content: '';
        position: fixed;
        top: 0;
        left: 75%;
        width: 25%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    .mobile-menu:not(.hidden)::after {
        opacity: 1;
    }

    /* Hide menu content by default */
    .nav-left,
    .nav-right {
        display: none;
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }

    /* Show menu content when active */
    .nav-container.active .nav-left,
    .nav-container.active .nav-right {
        display: flex;
    }
}

/* Desktop styles */
@media (min-width: 1025px) {
    .nav-top,
    .hamburger-menu,
    .mobile-menu {
        display: none !important;
    }

    .nav-container {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    .nav-left,
    .nav-right {
        flex: 1;
        flex-direction: row;
        gap: 20px;
    }
    
    .nav-left {
        justify-content: flex-start;
    }
    
    .nav-right {
        justify-content: space-between;
        position: relative;
    }
    
    .nav-right .nav-menu {
        flex: 1;
        display: flex;
        justify-content: center;
        gap: 20px;
    }
    
    .nav-right .search-icon {
        margin-left: auto;
    }
}

.has-dropdown {
  position: relative;
}

.has-dropdown .sub-menu {
  display: none;
  position: absolute;
  left: 0; /* Aligns the dropdown to the left */
  top: 100%; /* Ensures it appears below the parent */
  background: white;
  border: 1px solid #ddd;
  list-style: none;
  padding: 10px;
  min-width: 200px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Ensure the sub-menu list items align left */
.has-dropdown .sub-menu li {
  text-align: left; /* Ensures the text inside each item is left-aligned */
  padding: 8px 12px; /* Adds padding for better spacing */
}

.has-dropdown:hover .sub-menu {
  display: block;
  opacity: 1;
  visibility: visible;
}

.dropdown-icon {
  display: inline-block;
  margin-left: 5px; /* Adjust spacing from text */
}


.dropdown-icon i {
  font-size: 12px; /* Change size of the icon */
  color:#333; /* Adjust color */
  transition: transform 0.3s ease-in-out, font-size 0.2s ease-in-out;
}

/* Style for search icon */
.search-icon {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 3px 15px; /* Adjust spacing */
  margin-left: auto; /* Push search icon to the right edge */
}

.search-icon a {
  font-size: 18px;
  color: #333;
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* Apply Roboto font to the entire navigation */
.main-navigation {
  font-family: 'Roboto', sans-serif;
  font-weight: 500; /* Bold */
}

/* Ensure left and right menus use Roboto */
.nav-left .nav-menu,
.nav-right .nav-menu,
.search-icon a {
  font-family: 'Roboto', sans-serif;
  font-weight: 500; /* Medium weight for readability */
  font-size: 16px; /* Adjust if needed */
}

/* 1. Remove underlines + set default black font color */
.nav-menu a,
.menu-item a,
.search-icon a {
    text-decoration: none !important;
    color: #000000 !important;
}

/* 2. Set hover/focus state — optional, you can style this how you want */
.nav-menu a:hover,
.menu-item a:hover,
.search-icon a:hover {
    color: #747170 !important;
    text-decoration: none !important;
}

/* 3. Remove bullet points on all menu items */
.nav-menu,
.nav-menu li,
.has-dropdown,
.sub-menu {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

/* 4. Reset the Recipes dropdown wrapper (it's not inside a <ul>, so it's acting weird) */
.has-dropdown {
    list-style: none !important;
    display: inline-block;
}

/* 5. Optionally fix spacing */
.nav-menu li {
    margin: 0;
    padding: 0;
}

/* Mobile Menu Styles */
.mobile-menu-list {
    list-style: none;
    padding: 0 40px;
    margin: 60px 0 0 0;
}

.mobile-menu-list li {
    margin-bottom: 35px;
    width: 100%;
}

.mobile-menu-list li a {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #000;
    text-decoration: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 400;
    width: 100%;
}

.mobile-menu-list .has-dropdown > a {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.mobile-menu-list .submenu-icon {
    font-size: 18px;
    transition: transform 0.3s ease;
    margin-left: auto;
}

/* Mobile Submenu Styles */
.mobile-menu-list .sub-menu {
    display: none;
    padding-left: 40px;
    margin: 25px 0 0 0;
    list-style: none;
    width: 100%;
}

.mobile-menu-list .has-dropdown.active > a .submenu-icon {
    transform: rotate(90deg);
}

.mobile-menu-list .has-dropdown.active > .sub-menu {
    display: block;
}

.mobile-menu-list .sub-menu li {
    margin-bottom: 20px;
}

.mobile-menu-list .sub-menu li:last-child {
    margin-bottom: 0;
}

.mobile-menu-list .sub-menu a {
    font-size: 14px;
    font-weight: 400;
    padding: 0;
}

/* Override any conflicting desktop styles for mobile */
@media (max-width: 1024px) {
    .mobile-menu-list .has-dropdown .sub-menu {
        position: static;
        border: none;
        min-width: auto;
        opacity: 1;
        visibility: visible;
    }
    
    .mobile-menu-list .has-dropdown:hover .sub-menu {
        display: none;
    }
    
    .mobile-menu-list .has-dropdown.active > .sub-menu {
        display: block;
    }
}

/* Mobile Menu Overlay */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 75%;  /* Changed from 100% to 75% */
    height: 100vh;
    background: white;
    z-index: 2000;
    padding: 40px;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);  /* Added subtle shadow on the right */
}

/* Add a semi-transparent overlay for the remaining 25% */
.mobile-menu::after {
    content: '';
    position: fixed;
    top: 0;
    left: 75%;
    width: 25%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

.mobile-menu.hidden {
    display: none;
}

#close-mobile-menu {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    padding: 10px;
    color: #000;
}

/* Update mobile menu visibility rules */
@media (max-width: 1024px) {
    .mobile-menu {
        display: flex;
    }
    
    .mobile-menu.hidden {
        display: none;
    }
}