/* Global Navigation Menu Styles - Enhanced Version */

/* Global Font Override - Helvetica for entire page */
body,
html,
* {
    font-family: "Helvetica", "Helvetica Neue", Arial, sans-serif !important;
}

/* Logo Styling */
#logo {
    width: 108% !important; /* 50% bigger than previous 72% (72% × 1.5 = 108%) */
    height: auto !important;
    max-width: 173px; /* 115px × 1.5 = 173px */
    transition: all 0.3s ease;
}

#logo:hover {
    transform: scale(1.05);
}

/* Header Layout Modifications */
.et_menu_container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 20px !important;
}

.logo_container {
    order: 1 !important;
    margin: 0 20px 0 0 !important;
    padding: 0 !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    z-index: auto !important;
}

#et-top-navigation {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    justify-content: flex-start !important;
}

/* Main Navigation Container */
#et-top-navigation {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    position: relative;
    z-index: 1000;
}

/* Top Menu Navigation */
#top-menu-nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    flex: 1;
}

#top-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    gap: 5px;
}

/* Main Menu Items */
.menu-item {
    position: relative;
    margin: 0;
}

.menu-item > a {
    display: block;
    padding: 20px 18px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    position: relative;
}

.menu-item > a:hover,
.menu-item > a:focus {
    color: #2ea3f2;
    border-bottom-color: #2ea3f2;
}

/* Current Page Styling */
.current-menu-item > a,
.menu-item-quotation > a {
    color: #2ea3f2;
    border-bottom-color: #2ea3f2;
    font-weight: 600;
}

/* Dropdown Menu Styling */
.menu-item-has-children {
    position: relative;
}

.menu-item-has-children > a::after {
    content: '▼';
    font-size: 10px;
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

/* Sub Menu */
.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 200px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    list-style: none;
    margin: 0;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1001;
}

.menu-item-has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sub-menu .menu-item {
    margin: 0;
}

.sub-menu .menu-item a {
    padding: 12px 20px;
    color: #555;
    font-size: 14px;
    border-bottom: none;
    border-radius: 0;
    transition: all 0.3s ease;
}

.sub-menu .menu-item a:hover {
    background: #f8f9fa;
    color: #2ea3f2;
    padding-left: 25px;
}

/* Mobile Navigation */
#et_mobile_nav_menu {
    display: none;
    padding: 15px 20px;
}

.mobile_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.select_page {
    color: #333;
    font-weight: 500;
    font-size: 16px;
}

/* Mobile Menu Toggle Button */
.mobile_menu_bar_toggle {
    width: 24px;
    height: 20px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mobile_menu_bar_toggle::before,
.mobile_menu_bar_toggle::after,
.mobile_menu_bar_toggle {
    background: #333;
    height: 3px;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile_menu_bar_toggle::before,
.mobile_menu_bar_toggle::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
}

.mobile_menu_bar_toggle::before {
    top: 0;
}

.mobile_menu_bar_toggle::after {
    bottom: 0;
}

/* Mobile Menu Animation States */
.mobile_nav:not(.closed) .mobile_menu_bar_toggle {
    background: transparent;
}

.mobile_nav:not(.closed) .mobile_menu_bar_toggle::before {
    transform: rotate(45deg);
    top: 50%;
    margin-top: -1.5px;
}

.mobile_nav:not(.closed) .mobile_menu_bar_toggle::after {
    transform: rotate(-45deg);
    bottom: 50%;
    margin-bottom: -1.5px;
}

/* Mobile Menu Dropdown */
.mobile-menu-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-top: 1px solid #e5e5e5;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    z-index: 999;
}

.mobile-menu-dropdown.open {
    max-height: 500px;
}

.mobile-menu-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu-dropdown li {
    border-bottom: 1px solid #f0f0f0;
}

.mobile-menu-dropdown li:last-child {
    border-bottom: none;
}

.mobile-menu-dropdown a {
    display: block;
    padding: 15px 20px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.mobile-menu-dropdown a:hover,
.mobile-menu-dropdown .current-menu-item a {
    background: #f8f9fa;
    color: #2ea3f2;
    padding-left: 30px;
}

/* Sub-menu in mobile */
.mobile-menu-dropdown .sub-menu {
    position: static;
    box-shadow: none;
    border-radius: 0;
    background: #f8f9fa;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-menu-dropdown .menu-item-has-children.open .sub-menu {
    max-height: 200px;
}

.mobile-menu-dropdown .sub-menu a {
    padding-left: 40px;
    font-size: 14px;
    color: #666;
}

.mobile-menu-dropdown .sub-menu a:hover {
    padding-left: 45px;
}

/* Mobile submenu toggle */
.mobile-submenu-toggle {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.mobile-submenu-toggle.open {
    transform: translateY(-50%) rotate(180deg);
}

/* Responsive Breakpoints */
@media (max-width: 980px) {
    #top-menu-nav {
        display: none;
    }
    
    #et_mobile_nav_menu {
        display: block;
    }
    
    /* Reset logo position for mobile */
    .logo_container {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        order: 1 !important;
        margin-right: auto !important;
    }
    
    .et_menu_container {
        flex-wrap: wrap !important;
    }
    
    #et-top-navigation {
        order: 3 !important;
        width: 100% !important;
    }
}

@media (min-width: 981px) {
    #et_mobile_nav_menu {
        display: none !important;
    }
    
    #top-menu-nav {
        display: flex;
    }
}

/* Large screens optimization */
@media (min-width: 1200px) {
    .menu-item > a {
        padding: 20px 22px;
        font-size: 17px;
    }
}

/* Small tablet adjustments */
@media (max-width: 768px) {
    #et-top-navigation {
        padding: 0;
    }
    
    .mobile_nav {
        padding: 15px 20px;
    }
    
    .mobile-menu-dropdown a {
        padding: 12px 15px;
        font-size: 15px;
    }
}

/* CSS fallback hamburger for mobile when ETmodules/font glyph is missing
   Matches rules in sliding-tabs.css to ensure consistent mobile toggle display */
.mobile_menu_bar {
  display: inline-block;
  width: 36px;
  height: 28px;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile_menu_bar::before,
.mobile_menu_bar::after,
.mobile_menu_bar .bar {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: #001b56; /* navy */
  border-radius: 2px;
  position: absolute;
  left: 7px;
  transition: transform .25s ease, opacity .25s ease;
}

.mobile_menu_bar::before { top: 6px; }
.mobile_menu_bar::after  { bottom: 6px; }

.mobile_menu_bar .bar { top: 13px; left: 7px; }

.mobile_nav.open .mobile_menu_bar::before {
  transform: translateY(7px) rotate(45deg);
}
.mobile_nav.open .mobile_menu_bar::after {
  transform: translateY(-7px) rotate(-45deg);
}
.mobile_nav.open .mobile_menu_bar .bar { opacity: 0; }

.mobile_menu_bar:focus { outline: 2px solid rgba(0,27,86,0.12); outline-offset: 2px; }

/* Accessibility improvements */
.menu-item a:focus,
.mobile_menu_bar_toggle:focus {
    outline: 2px solid #2ea3f2;
    outline-offset: 2px;
}

/* Animation for smooth transitions */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sub-menu {
    animation: slideDown 0.3s ease when visible;
}

/* Prevent text selection on menu toggles */
.mobile_nav,
.mobile_menu_bar_toggle,
.mobile-submenu-toggle {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.modern-nav{
  position: relative;
  /* full width translucent navigation background */
  background-color: var(--nav-bg);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-radius: 0;
  padding: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  margin-left: calc(-50vw + 50%);
  display: block;
}

.modern-nav .nav-inner{
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  max-width: 1300px;
  margin: 0 auto;
  /* reduced horizontal padding for a tighter layout (30% smaller) */
  padding: 4px 12px;
  width: 100%;
  box-sizing: border-box;
}

.modern-nav .brand img{height:22px;display:block;width:auto}

/* shrink the large header logo specifically (30% smaller) */
#main-header .logo_container a img#logo{height:28px !important;max-height:34px;width:auto !important}

.nav-toggle{display:none;background:transparent;border:0;font-size:18px;cursor:pointer;color:var(--nav-text)}

.nav-wrap{position:relative;flex:1;display:flex;justify-content:center;align-items:center}
.nav-active-indicator{position:absolute;top:4px;bottom:4px;border-radius:999px;background:linear-gradient(90deg,var(--nav-accent),rgba(14,138,63,0.18));z-index:0;transition:transform var(--nav-transition),width var(--nav-transition),opacity var(--nav-transition);opacity:0.12}
.nav-menu{display:flex;gap:var(--nav-gap);align-items:center;list-style:none;margin:0;padding:0}
.nav-menu li{position:relative}
.nav-menu a{color:var(--nav-text);text-decoration:none;padding:6px 8px;border-radius:5px;font-weight:600;white-space:nowrap;display:inline-block;background:transparent;position:relative;z-index:2;font-size:13px}
.nav-menu a:hover,.nav-menu a:focus{color:var(--nav-text);background:transparent}

/* orange capsule underline on hover/focus */
.nav-menu a::after{
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 0px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff9d00, #ffb86b);
  opacity: 0;
  transition: width var(--nav-transition), opacity var(--nav-transition), transform var(--nav-transition);
  z-index: 1; /* sit under the link text */
}

.nav-menu a:hover::after, .nav-menu a:focus::after{
  width: calc(100% + 22px);
  opacity: 1;
  transform: translateX(-50%) translateY(6px);
}

/* keep link text visually inside the capsule: no separate backgrounds, use indicator for focus */
.nav-wrap{padding:6px 6px}
.nav-menu a:focus{outline:2px solid rgba(0,0,0,.06);outline-offset:3px}

/* pill indicator behind the item */
.nav-active-indicator{position:absolute;top:6px;bottom:6px;border-radius:999px;background:linear-gradient(90deg,var(--nav-accent),rgba(14,138,63,0.18));z-index:0;transition:transform var(--nav-transition),width var(--nav-transition),opacity var(--nav-transition);opacity:0.12}

/* ensure links are above indicator */
.nav-menu li,.nav-menu a{position:relative;z-index:1}

/* dropdown */
.has-sub{position:relative}
.dropdown-menu{position:absolute;left:50%;transform:translateX(-50%) translateY(6px) scale(.98);min-width:220px;background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.96));border-radius:10px;padding:8px 6px;box-shadow:0 8px 30px rgba(0,0,0,.12);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--nav-transition),transform var(--nav-transition),visibility var(--nav-transition)}
.dropdown-menu a{display:block;padding:8px 12px;color:#001b56;font-weight:600;border-radius:6px}
.dropdown-menu a:hover{background:rgba(0,0,0,.03)}

.has-sub:hover > .dropdown-menu,
.has-sub:focus-within > .dropdown-menu,
.has-sub.open > .dropdown-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1);
}

/* mobile */
@media (max-width:920px){
  .nav-toggle{display:block}
  .nav-wrap{position:static}
  .nav-menu{position:fixed;left:0;right:0;top:68px;background:var(--nav-bg);flex-direction:column;padding:12px 18px;gap:6px;display:none;z-index:9999}
  .nav-menu.show{display:flex}
  .nav-active-indicator{display:none}
  .dropdown-menu{position:static;transform:none;box-shadow:none;padding-left:14px;display:none}
  .has-sub.open > .dropdown-menu{display:block}
}
@media (prefers-reduced-motion:reduce){
  .nav-active-indicator, .dropdown-menu, .nav-menu a{transition:none}
}

/* --- Capsule float / header transparency tweaks --- */
/* Make the site header transparent so the capsule can float on top of content */
#main-header, #main-header.et-fixed-header {
  background: transparent !important;
  box-shadow: none !important;
}

/* Center the nav and allow the inner capsule to size to its content */
.modern-nav {
  display: flex;
  justify-content: center;
  width: 100%;
  z-index: 99999; /* keep above page content */
}

/* Capsule-style inner navigation: centered capsule over full-width background */
.modern-nav {
  background: transparent !important; /* background handled by inner capsule */
  box-shadow: none !important;
  padding: 0 !important;
}

.modern-nav .nav-inner {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1300px; /* keep content readable */
  margin: 12px auto; /* center the capsule */
  padding: 10px 20px; /* 20px side gutters */
  box-sizing: border-box;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 14px 30px rgba(10,20,30,0.12);
  border-radius: var(--nav-radius); /* capsule */
  z-index: 100000;
}

/* Strong capsule rule for the nav inner container */
.modern-nav .nav-inner.container {
  /* make the inner container a centered capsule */
  max-width: 1300px;
  width: auto;
  margin: 8px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nav-gap, 18px);

  /* capsule visuals */
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.9));
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  padding: 8px 18px;
  border-radius: var(--nav-radius, 999px);
  box-shadow: 0 10px 30px rgba(8,24,40,0.08);
  overflow: hidden;
  z-index: 9999;
}

/* Slightly smaller capsule on narrow screens */
@media (max-width: 640px) {
  .modern-nav .nav-inner.container {
    padding: 8px 12px;
    border-radius: 14px;
    margin: 6px auto;
  }
}

/* Responsive: on small screens the capsule becomes full-width with small gutters */
@media (max-width: 980px){
  .modern-nav .nav-inner{
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    padding: 8px 12px !important;
  }
}

.modern-nav .nav-wrap {
  display: flex;
  align-items: center;
}

.modern-nav .nav-menu {
  display: flex;
  gap: var(--nav-gap);
  align-items: center;
}

/* keep the container inside the nav from forcing full-width backgrounds */
.modern-nav .container {
  background: transparent !important;
  padding: 0 !important;
}

/* reduce the header's visual band so capsule appears to float on page content */
#main-header, #et-top-navigation {
  background: transparent !important;
  box-shadow: none !important;
}

/* if the theme added a white background to .et_menu_container, clear it */
.et_menu_container, .container.et_menu_container {
  background: transparent !important;
}

/* --- Hide duplicate large header logo (keep the nav brand logo) --- */
#main-header .logo_container img#logo,
#main-header .logo_container {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* --- Remove small submenu capsule toggles --- */
/* Visually remove the little capsule/button used to open submenus */
.modern-nav .submenu-toggle {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important; /* prevent accidental clicks */
}

/* If any tiny pseudo-elements are used for submenu markers, hide them too */
.modern-nav .nav-item.has-sub > a::after,
.modern-nav .nav-item.has-sub > a::before {
  display: none !important;
  content: none !important;
}

/* --- Fit all nav items inside the capsule --- */
/* Limit capsule width to viewport and allow content to size inside it */
.modern-nav .nav-inner {
  max-width: calc(100% - 40px) !important; /* leave small side gutters */
  width: auto !important;
  padding: 8px 16px !important; /* slightly smaller padding so more room for items */
  gap: 8px !important;
}

/* Reduce brand logo size so it doesn't push items out */
.modern-nav .brand img {
  height: 59px !important; /* another ~15% larger */
  width: auto !important;
  display: block;
}

/* Keep menu items on a single line, allow them to shrink but don't wrap */
.modern-nav .nav-menu {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  align-items: center !important;
  overflow: hidden; /* hide any overflow visually */
}

.modern-nav .nav-menu .nav-item {
  flex: 0 1 auto !important; /* allow items to shrink but not grow beyond content */
}

.modern-nav .nav-menu a {
  display: inline-block !important;
  padding: 14px 18px !important; /* ~15% larger padding */
  font-size: 24px !important;    /* ~15% larger text */
  line-height: 1.2 !important;
  white-space: nowrap !important;
  color: var(--nav-text) !important;
}

/* Ensure menu items are small (12px) */
.nav-menu .nav-item a {
  font-size: 12px !important;
  padding: 6px 8px !important;
}

/* Keep shop/quotation pill at 12px and slightly reduced padding */
.nav-shop-button, .nav-shop-button.orange-button {
  font-size: 12px !important;
  padding: 6px 12px !important;
}

/* Responsive: keep 12px on narrower screens */
@media (max-width: 900px) {
  .nav-menu .nav-item a {
    font-size: 12px !important;
    padding: 6px 8px !important;
  }
}

@media (max-width: 640px) {
  .nav-menu .nav-item a {
    font-size: 12px !important;
  }
  .nav-shop-button, .nav-shop-button.orange-button {
    font-size: 12px !important;
  }
}

/* --- Disable hover/hover-animation effects globally --- */
/* Hide the orange hover capsule pseudo-element */
.nav-menu a::after { display: none !important; opacity: 0 !important; }

/* Remove transitions so hover/focus do not animate */
.nav-menu a, .nav-active-indicator, .dropdown-menu, .nav-menu a::after {
  transition: none !important;
  -webkit-transition: none !important;
}

/* Prevent hover/background color changes */
.nav-menu a:hover, .nav-menu a:focus { background: transparent !important; color: var(--nav-text) !important; }

/* Stop the active indicator from animating or being visible */
.nav-active-indicator { transition: none !important; opacity: 0 !important; }

/* Dropdowns should open without transform/opacity animation */
.dropdown-menu { transition: none !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }

/* Reduce visual gap for the active indicator so it doesn't push layout */
.modern-nav .nav-active-indicator {
  height: 36px;
  top: 50%;
  transform: translateY(-50%);
}

/* Mobile: allow wrap and show toggle */
@media (max-width: 920px) {
  .modern-nav .nav-menu {
    flex-wrap: wrap !important;
    gap: 12px !important;
    max-width: 100%;
  }
  .modern-nav .nav-toggle {
    display: inline-block !important;
  }
  /* make nav-inner use full width on small screens so items don't overflow viewport */
  .modern-nav .nav-inner {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    padding: 8px 12px !important;
  }
}
/* --- Expand capsule to full viewport and render menu right-to-left --- */
/* Stretch the outer nav so the capsule appears edge-to-edge on large screens */
.modern-nav {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 0 !important; /* anchor to left edge */
  margin-right: 0 !important;
  padding: 0 !important;
}

.modern-nav .nav-inner {
  /* make the inner capsule fill the viewport width while keeping visual padding */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 8px 22px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--nav-bg) !important;
  border-radius: var(--nav-radius) !important;
}

/* Keep brand on the left side */
.modern-nav .brand {
  order: 0 !important;
  margin-right: 6px !important; /* reduced spacing to bring menu closer */
  margin-left: 0 !important;
  flex: 0 0 auto !important;
}

.modern-nav .nav-wrap {
  order: 1 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* left-align menu so it sits next to brand */
}

/* Render the menu items right-to-left so the first logical item sits at the far right */
.modern-nav .nav-inner {
  /* anchor the inner capsule to the left edge and keep compact padding */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 0 !important; /* no centering calc, stick to left */
  margin-right: 0 !important;
  padding: 6px 12px !important; /* slightly tighter horizontal padding */
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* left align inner content */
  /* remove inner capsule visuals */
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
  .modern-nav, .modern-nav .nav-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 6px 12px !important;
  }
  .modern-nav .nav-wrap {
    justify-content: flex-start !important;
  }
  .modern-nav .nav-menu {
    direction: ltr !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }


/* End expanded-capsule RTL rules */
/* End fit tweaks */
/* --- Compact mode: tighter padding and smaller text when space is constrained --- */
.modern-nav.compact .nav-menu a {
  padding: 8px 10px !important;    /* compact but still readable */
  font-size: 15px !important;     /* don't go below 15px in compact mode */
}
.modern-nav.compact .brand img {
  height: 36px !important;        /* slightly smaller brand in compact */
}
.modern-nav.compact .nav-menu {
  gap: 8px !important;            /* moderate gap in compact */
}

/* Aggressive compact (applied only when space is very tight) */
.modern-nav.compact.aggressive .nav-menu a {
  padding: 6px 8px !important;
  font-size: 14px !important; /* minimum readable size */
}
.modern-nav.compact.aggressive .brand img {
  height: 30px !important;
}

/* --- "More" overflow dropdown styles --- */
.nav-item.nav-more{position:relative}
.nav-item.nav-more > .more-toggle{
  background:transparent;border:0;color:var(--nav-text);cursor:pointer;font-weight:700;padding:6px 10px;border-radius:8px}
.nav-item.nav-more > .more-toggle:after{content:' ▾';font-weight:600;margin-left:6px}
.nav-item.nav-more .more-menu{
  position:absolute;right:0;top:calc(100% + 8px);min-width:180px;background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));box-shadow:0 10px 30px rgba(0,0,0,0.12);border-radius:10px;padding:8px 0;display:none;z-index:200000;list-style:none}
.nav-item.nav-more[aria-expanded="true"] .more-menu{display:block}
.nav-item.nav-more .more-menu li{padding:0;margin:0}
.nav-item.nav-more .more-menu a{display:block;padding:8px 12px;color:var(--nav-text);text-decoration:none;font-weight:600}
.nav-item.nav-more .more-menu a:hover{background:rgba(0,0,0,0.03)}

/* When using RTL layout visually, ensure the more menu aligns correctly on very wide viewports */
.modern-nav .nav-menu{position:relative}

/* Orange "Get Quotation" button styling */
.nav-shop-button.orange-button {
  background: linear-gradient(135deg, #ff9d00, #ffb86b) !important;
  color: white !important;
  border-radius: 18px !important;
  padding: 8px 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 15px rgba(255, 157, 0, 0.3) !important;
  transition: all 0.3s ease !important;
  border: none !important;
}

.nav-shop-button.orange-button:hover {
  background: linear-gradient(135deg, #e88a00, #ff9d00) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(255, 157, 0, 0.4) !important;
  color: white !important;
}

.nav-shop-button.orange-button::after {
  display: none !important;
}

/* Regular "Shop" button styling */
.nav-shop-button:not(.orange-button) {
  background: transparent !important;
  color: var(--nav-text) !important;
  border-radius: 14px !important;
  padding: 7px 14px !important;
  font-weight: 600 !important;
  border: 2px solid var(--nav-accent) !important;
  transition: all 0.3s ease !important;
}

.nav-shop-button:not(.orange-button):hover {
  background: var(--nav-accent) !important;
  color: white !important;
  transform: translateY(-1px) !important;
}

/* Capsule nav overrides - ensures full-width background with a centered rounded capsule */
.modern-nav {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.modern-nav .nav-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nav-gap, 18px);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  padding: 8px 18px;
  border-radius: var(--nav-radius, 999px);
  box-shadow: 0 8px 24px rgba(8,24,40,0.08);
}

/* Keep nav items laid out inline inside the capsule */
.nav-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--nav-gap, 18px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu .nav-item a {
  display: inline-block;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--nav-text, #0b2130);
  text-decoration: none;
}

/* Emphasized orange button styling (quotation) */
.nav-shop-button.orange-button {
  padding: 8px 14px;
  border-radius: 20px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg,#ff9d00,#ffb86b);
  box-shadow: 0 6px 18px rgba(255,160,60,0.18);
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .modern-nav .nav-inner {
    padding: 8px 12px;
  }
  .nav-menu {
    gap: 12px;
  }
  .nav-menu .nav-item a {
    padding: 8px 10px;
    font-size: 12px;
  }
  .brand img { height: 26px; width: auto; }
}

@media (max-width: 640px) {
  .modern-nav .nav-inner {
    padding: 8px 10px;
    border-radius: 14px;
  }
  /* menu hidden on small screens (toggle will show it) */
  .nav-menu {
    display: none;
  }
}