.nav-menu { border-bottom: 1px solid var(--secondary); } .nav-menu .jdc7ud { display: flex; justify-content: center; position: sticky; top: 0px; z-index: 10; padding: 0 10px; height: 50px; background-color: var(--main); } .nav-menu .jdc7ud:hover { background-color: var(--main-hover); } .nav-menu-item .jdc7ud { text-decoration: none; font-weight: 400; padding: 10px 20px; color: inherit; display: flex; align-items: center; /* border-bottom:3px solid transparent */ } .nav-menu-item-label .jdc7ud { margin-left: 10px; } /* .nav-menu-item .jdc7ud:hover { background-color:var(--main-hover) } */ .nav-menu-mobile .jdc7ud { z-index: -1; max-height: calc(100vh - 51px); min-height: calc(100vh - 51px); width: 100%; position: absolute; background-color: var(--main); top: 51px; transform: translateY(-100vh); transition-property: transform opacity; transition: 0.4s ease; opacity: 0; } .nav-menu-mobile-open .jdc7ud { opacity: 1; transform: translateY(0); } .nav-bar-mobile-btn { width: 36px; height: 36px; } .nav-bar-mobile-btn:before, .nav-bar-mobile-btn:after { content: ""; display: block; height: 1px; width: 20px; background-color: var(--secondary-text); transition: transform 0.2s ease; } .nav-bar-mobile-btn:hover:before, .nav-bar-mobile-btn:hover:after { background-color: auto; } .nav-bar-mobile-btn:before { transform: translateY(-5px) rotate(0); } .nav-bar-mobile-btn:after { transform: translateY(4px) rotate(0); } .nav-bar-mobile-btn-expanded:before { transform: translateY(2px) rotate(45deg); } .nav-bar-mobile-btn-expanded:after { transform: translateY(0) rotate(-45deg); } @media (max-width: 950px) { .nav-menu-item-label .jdc7ud { display: none; } } /* Dropdown Menu Styles */ .dropdown:hover .dropdown-content { display: block; } .dropdown-content { min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } /* Bottom Sheet Menu Styles */ .quick-menu-button { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 106; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(to right, #60a5fa, #2563eb); padding: 0.75rem 1.25rem; border-radius: 1.75rem; box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); color: white; font-size: 1rem; white-space: nowrap; cursor: pointer; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); border: none; } .quick-menu-button:hover { box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04); transform: translateX(-50%) scale(1.05); } .quick-menu-hamburger { display: flex; align-items: center; width: 0.75rem; height: 0.75rem; margin-right: 1.25rem; } .quick-menu-hamburger-line { width: 100%; height: 1px; background: white; position: relative; box-shadow: 0 4px 0 white, 0 -4px 0 white; } .bottom-sheet-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); z-index: 100; transition: opacity 0.3s ease; } .bottom-sheet-menu { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; background: white; border-top-left-radius: 1.25rem; border-top-right-radius: 1.25rem; box-shadow: 0px -9px 50px -30px black; z-index: 105; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-family: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif; } .bottom-sheet-menu.hidden { transform: translateY(100%); } .bottom-sheet-menu.visible { transform: translateY(0); } .menu-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 2px solid #f3f4f6; } .menu-handle::after { content: ""; width: 2px; height: 0.625rem; background: #1f2937; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); } .menu-title { font-size: 1.125rem; font-weight: bold; color: #1f2937; } .menu-close { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; background: #4b5563; border-radius: 50%; cursor: pointer; border: none; } .menu-close-icon { width: 1rem; height: 2px; background: white; position: relative; transform: rotate(45deg); } .menu-close-icon::before { content: ""; width: 2px; height: 1rem; background: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .menu-links { display: flex; padding: 0.75rem 1rem; font-weight: bold; overflow-x: auto; border-bottom: 2px solid #f3f4f6; } .menu-link { flex: 1 1 auto; padding: 0.75rem 0.5rem; color: #1f2937; text-decoration: none; text-align: center; white-space: nowrap; border-radius: 0.375rem; transition: background-color 0.15s ease; } .menu-link:hover { background-color: #f9fafb; } .menu-contact { display: flex; padding: 0.5rem; padding-bottom: 1rem; } .menu-contact-item { flex: 1 1 33.333333%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.75rem; margin: 0 0.25rem; border-radius: 0.5rem; background: #f3f4f6; color: #2563eb; text-decoration: none; font-size: 0.875rem; font-weight: bold; transition: background-color 0.15s ease; } .menu-contact-item:hover { background-color: #e5e7eb; } .menu-contact-icon { width: 1.5rem; height: 1.5rem; margin-bottom: 0.25rem; fill: currentColor; }