/* MG */
.top-bar {
	width: 100%;
}
.top-bar-content {
	width: calc((100vw - 425px) * 990 / 2135 + 360px);  /* 1350 -> 360 @2560-> 425 */
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: auto;
	margin-top: calc((100vw - 320px) * 5 / 2240 + 20px); /* 25->20 @2560->320*/
	z-index: 98;
}
.logo {
	width: calc((100vw - 320px) * 220 / 2240 + 180px); /*400->180 @2560->320*/
	height: auto;
    z-index: 99;
}
.main-menu {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.mobile-menu .menu-icon {
	width: calc((100vw - 320px) * 2 / 105 + 13px);  /*15->13 @425->320*/
	height: 25px;
}
.menu-items {
	width: auto;
	height: auto;
	display: flex;
	align-items: center;
	background-color: #ffffff;
	z-index: 99;
}
.menu-item a {
    font-family: RobotoCondLight;
    font-size: calc((100vw - 1024px) * 5 / 1536 + 11px);  /* Reduced font size for more items */
    line-height: calc((100vw - 1024px) * 5 / 1536 + 11px);  /* Reduced line height */
    letter-spacing: 0.03em;
    color: #231f20;
    text-decoration: none;
    padding-left: calc((100vw - 425px) * 12 / 2135 + 5px);  /* Reduced padding */
    white-space: nowrap; /* Prevent line wrapping */
}
.menu-item a:hover {
	color: #788130;
	opacity: 0.5;
	text-shadow: none;
}

/*sticky menu*/
.sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	align-items: flex-start;
	z-index: 99;
	box-shadow: 0 3px 5px rgba(0,0,50,0.1);
	background-color: #ffffff;	
}
.sticky .top-bar-content {
	width: 85%;
	height: calc((100vw - 320px) * 50 / 2240 + 30px);  /*80->40 @ 2560->320*/
	margin-top: 0px;
	align-items: center;
}
.sticky .logo {
	width: calc((100vw - 320px) * 170 / 2240 + 80px); /*250->80 @ 2560->320*/
	height: auto;
}
.sticky .main-menu {
	align-items: center;
}
.sticky .mobile-menu .menu-icon, .sticky .menu-item a {
    -webkit-filter: none;
    filter: none;
	text-shadow: none;
}
.sticky .menu-item a {
    font-size: calc((100vw - 320px) * 5 / 2240 + 12px);  /*17->12 @ 2560->320*/
}

/* lang*/

.menu-item.lang-switcher a {
    font-size: 70%;
    color: #929497;
    margin: 2px;
    padding: 2px;
}

/*=== RESPONSIVE ===*/
@media only screen and (max-width: 1024px) and (min-width: 768px){
	.top-bar-content {
		flex-direction: column;
	}
	.main-menu {
		margin-top: calc((100vw - 768px) * 15 / 256 + 10px);  /* 25 -> 10 @1024-> 768 */
	}
}
@media only screen and (max-width: 1024px) {
	.menu-item a {
	    font-size: calc((100vw - 320px) * 3 / 704 + 10px);  /*13->10 @ 2560->1024*/
	    line-height: calc((100vw - 320px) * 3 / 704 + 10px);  /*13->10 @ 2560->1024*/
	}
}
@media only screen and (min-width: 768px) {
	.mobile-menu {
		display: none;
	}
	.desktop {
		display: block;
	}
	.mobile {
		display: none;
	}
	.menu-item.lang-switcher {
	    border: 1px solid #d4d4d4;
	    padding: 1px 2px 2px;
	    margin-left: calc((100vw - 425px) * 17 / 2135 + 8px);
	}
}
@media only screen and (max-width: 767px) {
	.mobile {
		display: block;
	}
	.desktop {
		display: none;
	}
	.top-bar-content {
		width: 85%;
	}
	.main-menu {
	    display: flex;
		align-items: center;
	    cursor: pointer;
	    height: 100%;
	    width: 150px;
	}
	.menu-items {
		width: auto;
		flex-direction: column;
		justify-content: center;
		position: absolute;
		top: 23px;
		right: 0;
		padding: 4px 6px;
		box-shadow: 0 1px 3px #cecece;
		display: none;
	}
	.menu-item {
		padding: 5px 15px;
		text-align: left;
	}
	.menu-item a {
	    margin: 0px;
	    border: 0px;
	    padding: 0px;
	}
	.main-menu:hover .menu-items {
	    display: block;
	}
	.menu-item a:after {
		content: none;
		margin-left: 0px;
	}
}