
  :root {
    --Primary-color: #59981a;
    --Secondary-color: #81b622;
    --Tetiary-color: #ecf87f;
    --Primary-font: Open Sans;
    --Secondary-font: Montserrat;
    --Tetiary-font: Mitr;
    --Extra-font: Courgette;
    --Extrastyle-font: ;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.Navbar-section {
    padding: 2px;
    width: 100%;
    height: 60px;
    display: flex;
    position: sticky;
    top: 0px;
    margin-bottom: 50px;
    z-index: 1111;
}
/* .desktop-search .searchbar{
    width:200px;
    padding: 10px;
    margin-right: 20px;
    margin-left: -100px;
    border-radius: 10px;
    border: none;
    font-size: 16px;
}
.mobile-search .searchbar{
    width:200px;
    padding: 10px;
    margin-right: 20px;
    margin-left: -100px;
    border-radius: 10px;
    border: none;
    font-size: 16px;
    display: none;
} */
 /* Styling the menu button */ 
 .menu-btn { 
    position: absolute;  
    z-index: 3; 
    left: 15px; 
    top: 25px;  
    cursor: pointer; 
    transition: all 0.5s ease-out; 
    display: block;
    visibility: hidden;
} 
/* Styling the hamburger lines */ 
.menu-btn .btn-line { 
    width: 28px; 
    height: 3px; 
    margin: 0 0 5px 0; 
    background: var(--Tetiary-color); 
    transition: all 0.5s ease-out; 
} 
/* Adding tranform to the X */ 
.menu-btn.close {  
    transform: rotate(180deg); 
} 
/* Styling the three lines to make it an X */ 
.menu-btn.close .btn-line:nth-child(1) { 
    transform: rotate(45deg) translate(5px, 5px); 
} 
.menu-btn.close .btn-line:nth-child(2) {  
    opacity: 0; 
} 
.menu-btn.close .btn-line:nth-child(3) { 
    transform: rotate(-45deg) translate(7px, -6px); 
} 
/* Styling the position of the menu icon */ 
.menu { 
    position: absolute; 
    top: 0; 
    width: 100%;
    padding:25px;
    left: 0;
    visibility: visible;  
    background-color: var(--Primary-color);
    border-bottom: 1px solid black; 
} 
.menu.show {  
    visibility: visible;  
} 
/* styling menu items */
.menu-nav {
    width: 80%;
    list-style: none; 
    display: flex; 
    margin-left: 20%; 
    background-color: var(--Primary-color); 
    margin-top: 0px;
    padding: 5px;
 }
.nav-link { 
    color:  #fff; 
    text-transform: uppercase;
    font-weight: normal;
    font-size: 16px; 
    font-family: var(--Primary-font);
    text-decoration: none; 
    padding: 5px;
}
.gr { 
    width: auto;
    margin-right: 10px;
    display: flex;
}
.grh { 
    width: 500px;
    margin-top: 0px;
    margin-right: 10px;
    margin-left: 0px;
    display: flex;
    border-bottom: none;
    background-color: white;
}
/* Adding a transition delay  to the 4 items in the  navigation menu */ 
.signup {
    width: 120px;
    padding: 10px;
    background-color: var(--Tetiary-color);
    border: none;
    font-weight: normal;
    margin-left: 50px;
    margin-top: -10px;
    border-radius: 8px;
}
.signup a { 
    text-decoration: none; 
    color: var(--Primary-color);
    text-align: center;
    font-size: 16px;
    padding: 10px;
    font-weight: 600;
    font-family: var(--Primary-font);
}
.proavatar2{
    visibility: visible;
}
/*End of styling sub menu */
.rule {
    display: none;
}
.proavatar{
    width: 120px;
    height: 80px;
    left: 20px;
    position: absolute;
    visibility: visible;
    margin-top: -25px;
}
a { 
    text-decoration: none;
}





@media screen AND (max-width:500px) {
    .rule {display: block;}
    .Navbar-section {
        background-color: var(--Primary-color);
        padding: 0px;
        width: 100%;
        height: 80px;
        display: flex;
        position: sticky;
        top: 0px;
        margin-bottom: 0px;
    }
    .signup {
        padding: 10px;
        width: 150px;
        margin-left: 10px;
        border: none;
        font-weight: normal;
        margin-top: 10px;
        margin-bottom: 0px;
        background-color: var(--Primary-color);
        position: absolute;
        bottom: 170px;
    }
    .signup a{ 
        text-decoration: none; 
        font-weight: bolder;
        color: white;
        font-size: 18px;
        padding: 10px;
        font-family: var(--Primary-font);
    }
    .top-group{
        width: 300px;
        height: 40px;
        display: flex;
        margin-top: 20px;
    }
    .grh { 
        width: auto;
        margin-top: 0px;
        margin-right: 10px;
        margin-left: 0px;
        display: block;
        border-bottom: none;
        background-color: var(--Primary-color);
    }
    .proavatar2{
        visibility: visible;
        width: 200px;
        height: auto;
        margin-top: 0px;
        margin-left: 5px;
    }
    /* .mobile-search .searchbar{
        width:110px;
        padding: 7px;
        margin-right: 0px;
        margin-left: 10px;
        margin-top: 5px;
        border-radius: 5px;
        border: none;
        text-align: center;
        font-size: 16px;
        display: block;
        background-color: #fff;
        color: var(--Secondary-color);
    }
    .desktop-search .searchbar{
        width:200px;
        padding: 10px;
        margin-right: 20px;
        margin-left: -100px;
        border-radius: 10px;
        border: none;
        font-size: 16px;
        display: none;
        text-align: center;
    } */
    /* Styling the menu button */ 
    .menu-btn { 
        position: absolute;  
        z-index: 1111; 
        top: 20px; 
        margin-left: 80%; 
        margin-top: 0px;
        padding: 10px;
        cursor: pointer; 
        transition: all 0.5s ease-out; 
        display: block;
        visibility: visible;
    } 
    /* Styling the hamburger lines */ 
    .menu-btn .btn-line { 
        width: 30px; 
        height: 2px; 
        margin: 0 0 7px 0; 
        background: #fff; 
        transition: all 0.5s ease-out; 
    } 
    /* Adding tranform to the X */ 
    .menu-btn.close {  
        transform: rotate(180deg); 
    } 
    /* Styling the three lines to make it an X */ 
    .menu-btn.close .btn-line:nth-child(1) { 
        transform: rotate(45deg) translate(5px, 5px); 
    } 
    .menu-btn.close .btn-line:nth-child(2) {  
        opacity: 0; 
    } 
    .menu-btn.close .btn-line:nth-child(3) { 
        transform: rotate(-45deg) translate(7px, -6px); 
    } 
    /* Styling the position of the menu icon */ 
    .menu { 
        position: absolute; 
        top: 0; 
        width: 70%;
        height: 100vh; 
        left: 0;
        visibility: visible;  
        background-color: #fff; 
        overflow-y: auto;
        overflow-x: hidden;
        transition-delay: 0.2s;
        transition-duration: 0.5s;
        margin-left: -100%;
        margin-top: 80px;
    } 
    .proavatar{
        visibility: hidden;
        width: 120px;
        height: 80px;
        margin-top: 30px;
        margin-left: 15px;
    }
    .menu.show {  
        visibility: visible; 
        transition-delay: 0.2s;
        transition-duration: 0.5s; 
        margin-left: 0%;
    } 
    /* styling menu items */
    .menu-nav {
        width: 100%;
        list-style: none; 
        display: block; 
        margin-left: 0px; 
        background-color: transparent;
        margin-top: 20px;
        padding: 10px;
    }
    .nav-link { 
        color: var(--Primary-color); 
        font-size: 12px;
        text-transform: uppercase;
        font-weight: bolder;
        margin-top: 10px;
        text-decoration: none; 
        padding: 10px; 
    }
    .gr:hover { 
        color:  black; 
        text-decoration: none;  
    }
    .gr { 
        width: 100%;
        display: flex; 
        padding: 15px;
        margin: 0px;
        border-bottom: 1px solid wheat;
    }
    /* Adding a transition delay  to the 4 items in the  navigation menu */ 
    .nav-item:nth-child(1) { 
        transition-delay: 0.1s; 
    } 
    .nav-item:nth-child(2) {  
        transition-delay: 0.2s; 
    } 
    .nav-item:nth-child(3) { 
        transition-delay: 0.3s;
    } 
    .nav-item:nth-child(4) { 
        transition-delay: 0.4s; 
    } 
    .nav-item:nth-child(5) { 
        transition-delay: 0.4s; 
    } 
    .nav-item:nth-child(6) { 
        transition-delay: 0.4s; 
    }
}