@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
html, body {
    margin: 0;
    padding: 0
}
.BannerBar {
    height: 20px;
    background: #000;
}
/*-------------Navigation Bar-------------*/
/* navbar.css */
body {
    margin: 0;
	font-family: "Montserrat", sans-serif;
    /* to see that the navbar is sticky */
    height: 200vh; 
    background: #FFF
}

a {
    color: #000;
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
	padding: 5px;
}

a:hover {
    color: #FF26B9;
}
.navbar {
	box-shadow: 0 4px 4px -4px rgba(0,0,0,.2);
    /* make it stick */
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    /* in front of all other elements */
    z-index: 99;
    /* set background */
    background-color: #ECE9E0;
    padding: 10px 5%;

    /* define flex */
    display: flex;
    justify-content: space-between;
}

.logo-container {
    margin: auto;
    width: 50%;
    /*border: 3px solid green;*/
    padding: 10px;
}

.logo-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    height: 40%;
}

.nav-menu {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
}

.menu-item {
    display: inline-block;
    margin-left: 10px;
}
.bar {
    width: 20px;
    height: 3px;
    background-color: #000;
    margin: 4px auto;
}
.menu-icon {
    display: none;
}

/*Mobile View*/
@media only screen and (max-width: 1000px) {
    .navbar {
        flex-direction: column;
    }

    .logo-container {
        width: 100%;
        
    }
	.logo-image {
		display: block;
        width: 40%;
		height: 40%;
        
}

    .nav-menu {
		display: none;
        width: 100%;
        
    }
	
	.active {
    display: block;
    
}

    .menu-item {
        display: block;
        width: 100%;
        padding: 5px 0;
        text-align: end;
       
    }

    .menu-icon {
        display: block;
        position: absolute;
        top: 20px;
        right: 5%;
       
    }

    .menu-icon:hover .bar {
        background-color: #FF26B9;
    }
}