.burger-menu-container {
	display:flex;
	justify-content: space-between;
	align-items: center;	
	padding:1rem;
	width:auto; /* can not be 100% */
	background-color: var(--primary-color);
	z-index:10;   /* make sure it has the highest value. */
}
.burger-menu {
	display:flex;
	justify-content:center;	
	width:100%;
}	
.burger-menu ul {
    display:flex; 
    /* justify-content:space-around; */
	justify-content:flex-start;
	flex-wrap:wrap;
    white-space: nowrap;
    list-style: none;
    padding: 6px 0;
    margin: 0;
	margin-left:calc(2px + 2vw);
}	
.burger-menu ul li {
	display: flex;
	margin:0;
	/* text-transform:uppercase; */
}
.burger-menu ul li a{
    display: flex;
	color:white;
	font-size:1rem;
    text-decoration: none;
    margin: 0;
    padding: 0 calc(3px + 1vw);	
}	
.burger-menu ul li a:hover{
	color:var(--bg-accent);
}


/* Burger Icon */
.burger-icon {
    display: none; /* Hidden by default, will show on smaller screens */
    cursor: pointer;
    position: absolute; /* stay on top while scrolling */
    top: 10px;
    right: 20px;
    z-index: 20;
}

.burger-icon .bar {
    width: 25px;
    height: 3px;
    background-color:white; /* Replace with your desired color */
    margin: 5px 0;
    transition: 0.4s;
}

@media (max-width: 768px) {
    .burger-icon {
        display: block; /* Show burger icon only smaller screens */
    }
    .burger-menu-container { /* style when the burger icon is clicked */
        display: none; 	/* default state to ensure the menu is hidden */
        width: 100%;
		background-color: var(--primary-color);
        transition: max-height 0.3s ease-out; 
        overflow: hidden; /* Hide content when collapsed */
    }
    .burger-menu-container.active {		/* After clicking the burger icon */
        display: flex;
		align-items:flex-start;
 		padding-bottom:2rem;
   }
	.burger-menu ul {
		flex-wrap:nowrap;
		flex-direction:column; /* vertical list on small screen */
	}
}
@media (min-width: 769px) {
	.burger-menu-container {
		display:flex;
		justify-content: space-between;
		align-items: center;	
		padding:1rem;
		width:auto; /* can not be 100% */
		background-color: var(--primary-color);
		z-index:10;   /* make sure it has the highest value. */
	}
}
/*---------------------------*/

.horizontal-bar {
	display:flex;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--bg-accent);
}
@media (max-width: 768px) {
	.horizontal-bar {
		display:none;
	}
}


.horizontal-bar-base {
	display:flex;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--primary-color);
}