/* NAV */
.desktop-nav i {font-size: 12px; font-weight: 600;}
.desktop-nav ul {margin: 0; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap;}
.desktop-nav ul li {position: relative; list-style-type: none; display: inline-flex; margin: 0 .75vw; padding: 0;}
.desktop-nav ul li:last-child {margin-right: 0;}
.desktop-nav ul li a {
    text-decoration: none;
    color: #ec1d23;
    transition: background-color 0.3s;
	font-family: 'Kanit', sans-serif!important;
	font-weight: 600;
    font-size: 15.5px;
    padding: 1.25em 0;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.desktop-nav ul li a:hover {color: #b50a0f;}
.desktop-nav li:hover > ul {display: block;}
.desktop-nav ul .dropdown li {width: 180px; /* Adjust width as needed */ border-bottom: 1px solid #e2e2e2; margin: 0;}
.desktop-nav ul .dropdown li:last-child > a, .desktop-nav ul .dropdown li.last-item > a {border-bottom: 0;}

.desktop-nav ul .dropdown li a {
	padding: 8px 15px;
    width: 250px;
    font-size: 15px;
	line-height: 24px;
	letter-spacing: .25px;
	font-weight: 300;
    text-decoration: none;
    color: #000;
    text-align: left;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	text-transform: none;
    z-index: 999;
    font-family: 'Kanit', sans-serif!important;
}

.desktop-nav ul .dropdown li:hover > a,
.desktop-nav ul .dropdown li a:hover {
  color: #000;
  background: #f9f9f9;
}
.desktop-nav ul ul {
	display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
    z-index: 999;
}
.desktop-nav ul ul ul {
  position: absolute;
  left: 100%;
  z-index: 5;
  top: 0;
  justify-content: center;
}

.mobile-nav-btn {display: none; justify-content: space-between; align-items: center; margin-right: 3em;}
.mobile-nav-btn p {color: #ec1d23; font-weight: 500; padding-right: 10px; font-size: 20px; margin-bottom: 5px;}

.mobile-nav-toggle {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.3s;
}

.mobile-nav-toggle span {
    width: 20px;
    height: 3px;
    background-color: #ec1d23;
    margin-bottom: 3px;
    transition: transform 0.3s;
}

/* Animation for 'x' icon */
.mobile-nav-toggle.open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.mobile-nav-toggle.open span:nth-child(2) {
    opacity: 0;
}

.mobile-nav-toggle.open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.mobile-nav-btn {display: none;}
.mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    z-index: 999;
    opacity: 0;
    pointer-events: none; /* Disable pointer events when closed */
    transition: opacity 0.3s ease-in-out;
}

.mobile-nav.open {
    display: block;
    opacity: 1;
    pointer-events: auto; /* Enable pointer events when open */
}

.mobile-nav ul {list-style-type: none; height: 290px; overflow-y: scroll;}
.mobile-nav ul ul, .mobile-nav ul ul ul {list-style-type: none; height: auto; overflow-y: auto;}

.mobile-nav ul li {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; border-bottom: 1px solid #e2e2e2;}
.mobile-nav ul li a {
	width: 100%;
    display: block;
    padding: 6px 20px;
    text-decoration: none;
	font-size: 15px;
	font-weight: 300;
    color: #000;
	margin-right: 0;
    transition: background-color 0.3s;
	letter-spacing: .5px;
}

.mobile-nav ul li a:hover, .mobile-nav ul ul li a:hover, .mobile-nav ul ul ul li a:hover {background-color: #f9f9f9;}

.mobile-nav ul ul li a {
	width: 100%;
    display: block;
    padding: 6px 35px;
    text-decoration: none;
	font-size: 15px;
	font-weight: 300;
    color: #000;
	margin-right: 0;
    transition: background-color 0.3s;
	letter-spacing: .5px;
}
.mobile-nav ul ul ul li a {
	width: 100%;
    display: block;
    padding: 6px 50px;
    text-decoration: none;
	font-size: 15px;
	font-weight: 300;
    color: #000;
	margin-right: 0;
    transition: background-color 0.3s;
	letter-spacing: .5px;
}

.mobile-nav ul .has-dropdown i {width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; text-align: center; cursor: pointer; position: absolute; right: 15px; top: 5px; z-index: 10; font-size: 10px;}

.mobile-nav ul .has-dropdown {position: relative;}
.mobile-nav ul .has-dropdown .dropdown {
    display: none;
    position: relative;
    background-color: #fff;
    z-index: 999;
	width: 100%;
}

.mobile-nav ul li, .mobile-nav ul ul li {
    width: 100%; /* Full width dropdown */
    border-bottom: 1px solid #ccc; /* Separator */
}

.no-scroll {overflow: hidden;}


/* MEDIA QUERIES (RESPONSIVE) */
@media screen and (max-width: 1320px){	
	.desktop-nav ul li a {padding: .5em 0;}
}
@media screen and (max-width: 1160px){	
	.desktop-nav {display: none;}
    .mobile-nav-btn {display: flex;}
    .mobile-nav {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
		text-align: left;
        z-index: 999;
        box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
        transition: transform 0.3s;
    }
    .mobile-nav.open {transform: translateY(22%); box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); transition: .3s ease-in-out all;}
    .mobile-nav ul .has-dropdown .dropdown.open {display: block; transition: transform 0.3s; border-top: 1px solid #ccc;}
}

@media screen and (max-width: 705px) {
	.mobile-nav-btn {margin-right: 2em;}
}

@media screen and (max-width: 640px) {	
	.mobile-nav.open {transform: translateY(40%);}
	.mobile-nav-btn {margin-right: 0;}
}