header {
	display: flex;
	flex-direction: row;
	min-height: 72px;
}

	header #brand {

	}

	header #brand .brand-logo {
	  display: none;
	  margin: 2rem 0 0 0;
	  border-radius: 50%;
	}
	header #brand .brand-logo-small {
		margin-left: 1rem;
		width: 36px;
		border-radius: 50%;
	}
	
	
	
	#brand-sub-header {
		color: #999;
		font-weight: 300;
		font-size: 0.8rem;
		letter-spacing: 1px;
		text-transform: uppercase;
		margin: 1rem 0;
		display: none;
	}




	header nav {
		text-transform: uppercase;
		text-decoration: none;
		letter-spacing: 1px;
	}
	
	
	header .navbar-menu {
		display: none;
	}



	.navbar-menu > ul , .mobile-menu {
		list-style: none;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin:0;
	}

	.navbar-menu > ul > a {
	  color: white;
	}

	.navbar-menu > ul > li {
		font-family: 'Montserrat', sans-serif;
		font-size:0.8rem;
		font-weight: 500;
		letter-spacing: 1px;
	  	padding: 0;
	 	margin-left: 1rem;
	}

	.navbar-menu > ul > li:hover {
	  transform: scale(1.1);
	  transition: 0.3s;
	}
	
	

	
	
	
	

	#login,
	#signup {
	  border-radius: 5px;
	  padding: 5px 8px;
	}

	#login {
	  border: 1px solid #498afb;
	}

	#signup {
	  border: 1px solid #ff3860;
	}

	#signup a {
	  color: #ff3860;
	}

	#login a {
	  color: #498afb;
	}

	#hamburger-icon {
	  margin: auto 0;
	  display: none;
	  cursor: pointer;
	}

	#hamburger-icon div {
	  width: 35px;
	  height: 3px;
	  background-color: white;
	  margin: 6px 0;
	  transition: 0.4s;
	}

	.open .bar1 {
	  -webkit-transform: rotate(-45deg) translate(-6px, 6px);
	  transform: rotate(-45deg) translate(-6px, 6px);
	}

	.open .bar2 {
	  opacity: 0;
	}

	.open .bar3 {
	  -webkit-transform: rotate(45deg) translate(-6px, -8px);
	  transform: rotate(45deg) translate(-6px, -8px);
	}

	.open .mobile-menu {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: flex-start;
	}

	.mobile-menu {
	  display: none;
	  position: absolute;
	  top: 50px;
	  left: 0;
	  height: calc(100vh - 50px);
	  width: 100%;
	}

	.mobile-menu li {
	  margin-bottom: 10px;
	}

	@media only screen and (max-width: 599px) {
	    header {
	        flex-direction: row;
	        align-items: center;
	        justify-content: space-between; /* Ensures brand is on the left and hamburger on the right */
	    }

	    header nav {
	        display: none;
	    }
		
		.mobile-menu {
			padding-top: 2rem;
			background-color: #101010;
		}
		
		.mobile-menu-item {
			font-family: 'Montserrat', sans-serif;
			font-size:0.9rem;
			font-weight: 700;
			letter-spacing: 1px;
		}

		.mobile-menu-item a {
			font-size: 2rem;
			text-transform: uppercase;
			text-decoration: none;
			letter-spacing: 1px;
		}

	    #hamburger-icon {
	        display: block;
	        margin-right: 1rem; /* Adjust as needed for spacing */
	    }
		
		
	}



	/* Larger screen styles */
	@media screen and (min-width: 600px) {
	    /* Navbar changes for larger screens: Brand stays left, menu on right */
		
	    header {
	        flex-direction: row;
	        align-items: center;
	        justify-content: space-between; /* Brand on the left, menu on the right */
	    }	
		


	    /* Show menu links instead of hamburger */
	    header .navbar-menu {
	        display: flex;
	        flex-direction: row;
	        justify-content: flex-end;
	        width: auto;
			margin-right: 1rem;
		}

	    header .navbar-menu-item {

	    }
	}

	@media screen and (min-width: 1080px) {
	    /* Center brand and place menu below */
		
	    header {
			flex-direction: column;
	        align-items: center;
		    justify-content: center;
			
	    }
		
	    header .navbar {
	        flex-direction: column;
	    }
		
		header #brand {
	        align-items: center;
		    justify-content: center;
		}
	
		header #brand .brand-logo-small {
		  display: none;
		}
	
		header #brand .brand-logo {
			display: flex;
		}
	
		header #brand img {
		  height:192px;
		}
		
		header #brand-sub-header {
			display: unset;
		}


	    header .navbar-menu {
	        justify-content: center;
	    }

	    header .navbar-menu-item {
	        padding: 0 15px;
	    }
	}


	/* Divider between main navigation and buttons */
	.navbar-menu-item .divider {
	    color: white;  /* Match the color of your navigation text */
	    margin: 0 1rem; /* Space around the divider */
	    font-size: 1.2rem;
	    display: inline-block;
	}

	/* Optional: Make the divider disappear on mobile (if needed) */
	@media only screen and (max-width: 599px) {
	    .divider {
	        display: none;
	    }
	}
	
	/* Styling for Signup and Login buttons */
	.navbar-menu-item .btn-signup,
	.navbar-menu-item .btn-login {
	    padding: 5px 10px;
	    border-radius: 30px;
	    text-decoration: none;
	    text-transform: uppercase;
	    font-weight: 500;
	    margin-left: 0;
	}

	.btn-signup {
	    border: 1px solid #555;
		background-color: #222;
	    color: #FFF;
	}

	.btn-login {
	    border: 1px solid #00CC33;
		background-color: #009933;
	    color: #FFF;
	}

	.btn-signup:hover {
	    background-color: rgba(0,0,0, 1); /* Darken slightly */
	    color: #FFF; /* Make the text pop on hover */
	}

	.btn-login:hover {
	    background-color: rgba(0, 153, 51, 0.3); /* Keep in line with the brand */
	}