@font-face {
    font-family: 'Raleway-Bold';
    src: url('../fonts/Raleway-Bold.ttf');
}
@font-face {
    font-family: 'Raleway-SemiBoldItalic';
    src: url('../fonts/Raleway-SemiBoldItalic.ttf');
}
@font-face {
    font-family: 'Tofino Regular';
    src: url('../fonts/Tofino-Regular.ttf');
}

:root {
    --green:#50891A ;
    --lightgreen: #45C33D;
}

*{
    margin:0;
}

.nav{
    
    background-color: var(--green);
    font-family: Raleway-Bold;
    color: white;
    width: 100%;
    z-index: 999;
    position: absolute;
    
}

.nav_toggle{
position: absolute;
cursor: pointer;
margin: 0 1rem;
right: 0;
}

.nav_toggle svg{
    width: 7vw;
    fill: white;
    
}

.nav_toggle .close{
    display: none;
}

.nav_toggle .menu,
.nav_toggle .close{
    margin: 2vw;
}

.nav_checkbox{
    display: none;
}
.nav_menu{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
       


}
.nav_menu a{
text-decoration: none;
color: white;
font-size: 1rem;
}


.nav_menu li{
    list-style-type: none;
    display: none;
    transition: all .4s;
}
.nav_menu li:first-child{
    margin-right: auto;
    display:block;
}
.menu_logo{
    height: 12vw;
}

.menu_logo img{
    height: 80%;
    padding: 1vw;
}

.nav_menu a:hover{
    color: var(--lightgreen);
}



#nav_checkbox:checked ~ ul.nav_menu{
padding-bottom: 3vw;
}

#nav_checkbox:checked ~ ul.nav_menu li{
    display: block;

}

#nav_checkbox:checked ~ label.nav_toggle .close{
    display: block;
}

#nav_checkbox:checked ~ label.nav_toggle .menu{
    display: none;
}
.testu{
    font-family: Raleway-Bold;
}

.logo_desktop{
    display: none;
        }



.sub_menu{
    display: none;
}
 

@media (min-width:800px){
    .nav{
        background-color: white;
        
    }

    .nav_toggle{
        display: none;
        
    }
    .nav_menu{
        flex-direction: row;
        margin-right: 3vw;
        gap: 2.5rem;
    }
    .nav_menu li{
    display: block;
    }

    .nav_menu a{
     font-size: 1rem;
     color: #022D0B;
     
    }

    .menu_logo{
    height: 5vw;
    max-height: 80px;
    }

    .menu_logo img{
        padding: .5vw;
    }
   
    .logo_desktop{
        display: block;
        height: 5vw;
        max-height: 80px;
            }
 
    .logo_mobile{
display: none;
    }

    .sub_menu{
        height: 4vh;
        background-color: var(--green);
        display: block;
        flex-direction: row;
        text-align: right;
        padding-right: 2rem;
        
    }

    .sub_menu img{
      
        margin-top: .25%;
        margin-right: 1rem;
    }
}