.menu-wrap, .mobile-menu { display: none; }


@media only screen and (max-width: 900px) {

    .logo { height: 60px; width: auto; margin-bottom: 0; }

    .menu { display: none; }

    .menu-wrap { display: flex; position: fixed; top: 0; left: 0; z-index: 10; width: 100%; background-color: white; min-height: 80px; }
    .logo-wrapper-mobile { position: absolute; top: 15px; left: 0px; }
    .logo-wrapper-mobile h2 { color: black; text-align: left; font-size: 23px; }
    .mobile-menu-phone { display: flex; flex-direction: row; justify-content: center; align-items: center; position: absolute; top: 30px; right: 0%; left: 19%; }
    .mobile-menu-phone img { height: 30px; width: auto; margin-right: 5px; }
    .mobile-menu-phone p { font-size: 16px; }
    .menu-wrap .toggler { position: absolute; top: 5px; right: 0px; z-index: 12; cursor: pointer; width: 60px; height: 60px; opacity: 0; }
    .menu-wrap .hamburger { position: absolute; top: 5px; right: 0px; z-index: 11; cursor: pointer; width: 60px; height: 60px; padding: 5px;
    display: flex; flex-direction: column; justify-content: center; align-items: center; }

    /* Hamburger Line */
    .menu-wrap .hamburger { padding: 3px; background-color: rgba(0, 0, 0, 0); }
    .menu-wrap .hamburger > div { position: relative; width: 30px; height: 3px; background-color: rgb(0, 0, 0); display: flex; align-items: center; justify-content: center; transition: all, .5s; }
    .menu-wrap .hamburger > div:before,
    .menu-wrap .hamburger > div:after { content: ''; position: absolute; z-index: 1; top: -10px; width: 100%; height: 3px; background: inherit; }
    .menu-wrap .hamburger > div:after { top: 10px; }

    .menu-wrap .toggler:checked + .hamburger > div { transform: rotate(132deg); }

    /* Turn Lines into 'X' */  
    .menu-wrap .toggler:checked + .hamburger > div:before,
    .menu-wrap .toggler:checked + .hamburger > div:after { top: 0; transform: rotate(90deg); }

    /* Show Menu */
    .menu-wrap .toggler:checked ~ .mobile-menu { visibility: visible; }

    .menu-wrap .toggler:checked ~ .mobile-menu > div { transform: scale(1); transition-duration: 0.7s; height: 100vh; }
    .menu-wrap .toggler:checked ~ .mobile-menu > div > div { opacity: 1; transition:  opacity 0.4s ease 0.4s; }

    .menu-wrap .mobile-menu {  top: 0;  right: 0; width: 100%; height: 100%; visibility: hidden; overflow: hidden; display: flex; align-items: center; justify-content: center; }
    .menu-wrap .mobile-menu > div { background-color: rgba(255, 255, 255, 0.822); transform: scale(0); transition: all 0.6s ease; width: 100vw; height: 0vw;  display: flex; flex: none; align-items: flex-start; justify-content: center; }
    .menu-wrap .mobile-menu > div > div { text-align: center; max-width: 90vw; max-height: 200vh; } 

    .nav-menu { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 90px; }
    .nav-item { font-size: 15px; margin-top: 10px; margin-right: 0px; margin-left: 0px; color: black; }



    .dropdown-content { display: none; background-color: #000000; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; margin: 1px 0; }
        
    .sub-dropdown-content { display: none; width: 100%; text-align: center;  background-color: rgb(51, 51, 51); }
    .sub-dropdown-content:hover {  background-color: rgb(0, 0, 0); }
    .sub-menu-text { font-size: 14px; color: white; text-align: left; text-decoration: none; line-height: 18px; padding: 8px 5px;  }
    .sub-dropdown:hover .sub-dropdown-content { display: flex; flex-direction: column; position: absolute; top: 0; left: 100%; }
    
    .dropdown-content-text { color: rgb(255, 255, 255); padding: 8px 16px; text-decoration: none; display: block; font-size: 14px; font-weight: 500; text-align: left; }

    .login-btn { background-color: #54954C; border: 1px solid #54954C; color: white; padding: 8px 65px; border-radius: 100px; letter-spacing: .2px; font-size: 13px; font-weight: 300; transition: all, .3s; }







    /* .menu { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 25px 0px; position: fixed; z-index: 10; width: 95%; }

    .scrolled { background-color: white; width: 100%; }
    .scrolled .nav-item { color: black; }

    .nav-menu { display: flex; flex-direction: row; justify-content: center; align-items: center; margin: 0 0px; }

    .nav-item { color: white; font-weight: 700; letter-spacing: .2px; text-decoration: none; font-size: 13px; margin-top: 5px; text-transform: uppercase; padding: 15px 0px; margin-right: 8px; margin-left: 8px; } */


}