#primary-nav_wrapper{margin: 0 auto; max-width: 1248px; width: 100%; padding: 10px 0;}

/*#########################################################################################

   Nav_v1 Style 
	
#########################################################################################*/
#primary-nav{display: flex; padding-left: 2px; justify-content: space-between;  align-items: center;}

#nav_logo{width: 290px;height: 66px;flex-shrink: 0;}
#nav_logo img{width: 100%;height: 100%;object-fit: contain;} /* BY ALEX */

#nav_item > ul{display: flex; padding: 20px; align-items: flex-start; gap: 10px; list-style-type: none; margin: 0;}

#nav_item > ul > li{display: flex; padding: 8px 16px; align-items: flex-start; gap: 8px;}

#nav_item > ul > li:last-child{padding-right: 0px;}

#nav_item > ul > li > a, #nav_item > ul > li span{
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    /* font-family: "Raleway", sans-serif; */
    /* font-size: 16px; */
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
   
   /* Added BY ALEX */
   font-family: var(--Serif400);
   font-size: 18px;
   transition: color 0.5s; /* Added BY ALEX */
}


#nav_item > ul > li > a:hover, #nav_item > ul > li span:hover{color:var(--ZLK-Green);} /* Added BY ALEX */

#nav_item > ul > .zlk_nav_dropdown_wrapper > .zlk_nav_dropdown > .zlk_nav_dropdown_content_wrapper > .zlk_nav_dropdown_content > li > a{
   color: #000;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 20px;
   text-decoration: none;

   /* Added BY ALEX */
   font-family: var(--Serif400);
}

/* Added BY ALEX */
#nav_item > ul > .zlk_nav_dropdown_wrapper > .zlk_nav_dropdown > .zlk_nav_dropdown_content_wrapper > .zlk_nav_dropdown_content > li > a::after {
  content: "";
  position: absolute;
  inset: 0;
}

#nav_item > ul > .zlk_nav_dropdown_wrapper > .zlk_nav_dropdown > .zlk_nav_dropdown_name > span{display: flex; gap: 8px; align-items: center; cursor: pointer;}

#nav_item_btn_jac{border-radius: 2px; background: #3F9F7F;}

/*
.zlk_nav_dropdown_icon, .sidebar_dropdown_icon{ display: grid; grid-template-columns: 1fr; }

.zlk_nav_dropdown_icon_style, .sidebar_dropdown_icon_style{grid-row-start: 1; grid-column-start: 1;}
*/

.zlk_nav_dropdown_icon > .fa-chevron-up{visibility: hidden;}

.zlk_nav_dropdown{position: relative;}

.zlk_nav_dropdown_content_wrapper{
   position: absolute;
   z-index: 999999;
   min-width: 180px;
   left: -16px;
   top: 100%;
   opacity: 0;
   visibility: hidden;
   transition: .2s;
}

.zlk_nav_dropdown_content{
   background: #FFF; 
   list-style: none; 
   /* padding: 0 16px; */
   margin-top: 13px; 
   /* border: 1px solid rgba(0, 0, 0, 0.10); */

   padding:0px; /* Added BY ALEX */
}

.zlk_nav_dropdown_content > li{
   /* padding: 8px 0 8px; */

   padding: 8px 16px 8px; /* Added BY ALEX */
   transition: var(--ZLK-Transitions); /* Added BY ALEX */
   position: relative; /* Added BY ALEX */
}


.zlk_nav_dropdown_content > li:hover{
   background-color: var(--ZLK-Green);
}
.zlk_nav_dropdown_content > li:hover > a, .zlk_nav_dropdown_content > li:hover > span {
   color:#FFF !important;
}


.zlk_nav_dropdown:hover .zlk_nav_dropdown_content_wrapper{
  opacity: 1;
  visibility: visible;
}

.zlk_nav_dropdown:hover .DownArrow{
   bottom: -5px;
}

.zlk_nav_dropdown .DownArrow{
   width:24px;
   height:24px;

   --icon-stroke: 4;
   position: relative;
   bottom: 0px;

   transition: var(--ZLK-Transitions);
}




/*#########################################################################################

   Nav_v2 Style 
	
#########################################################################################*/
#nav_2 > #primary-nav_wrapper{padding-top: 25px;}






/*#########################################################################################

   Sidebar Style 
	
#########################################################################################*/
#hamburger_menu{display: none; color: #3F9F7F; cursor: pointer;}

/* #hamburger_menu i{font-size: 30px;} */

#hamburger_menu .Lines{
   width:40px;
   height:40px;

   --icon-stroke: 4;
   position: relative;
   bottom: 0px;

   transition: var(--ZLK-Transitions);
}




#sidebar{
   margin: 0;
   width: 280px;
   height: 100%;
   position: fixed;
   z-index: 99999999;
   display: none;
   top: 0;
   right: -380px;
   font-size: 20px;
   box-shadow: 0px 5px 15px #aaa;
   transition: right 0.5s;
   background-color: #ffffff;

   font-family: var(--Serif400);
}  

#sidebar a, .sidebar_btn_dropdown{
   display: block;
   text-decoration: none;
   font-weight: 700;
   color: #333333;
   margin: 30px 0;
   transition: var(--ZLK-Transitions);
}

#sidebar_inner{padding: 24px 24px 0;}

#sidebar a:hover{color:var(--ZLK-Green);}

.sidebar_dropdown_wrapper{margin: 30px 0;}

.sidebar_btn_dropdown{
   margin: 0; background-color: #fff; padding: 0; display: flex; 
   font-family: var(--Serif700);
   font-size: 20px; border: none; cursor: pointer;
   
}

.sidebar_btn_dropdown:hover{color:var(--ZLK-Green);}

.sidebar_btn_dropdown .fa-chevron-down{padding: 1px 0 0 4px;}

.sidebar_btn_dropdown .fa-chevron-up{padding: 4px 0 0 4px; display: none;}

#sidebar .sidebar_dropdown a{
   font-weight: 400; 
   margin: 24px 0 0 16px;
}

.sidebar_dropdown{display: none;}


/*
.sidebar_dropdown_icon i{transition: transform .5s ease;}

.sidebar_active i {transform: rotate(180deg);}
*/

.sidebar_dropdown_icon .DownArrow{
   width:24px;
   height:24px;
   margin-left: 5px;

   --icon-stroke: 4;
   vertical-align: bottom;

   transition: var(--ZLK-Transitions);
}

.sidebar_active{color:var(--ZLK-Green) !important;}
.sidebar_active .DownArrow{transform: rotate(180deg);}


#sidebar_close{
   width:40px;
   height:40px;
   
   display: block;
   margin-left: auto;

   --icon-stroke: 4;
   color: var(--ZLK-Green);

   transition: var(--ZLK-Transitions);
   cursor: pointer;
}


/*#########################################################################################

   Responsive

#########################################################################################*/
@media only screen and (max-width: 1024px) {

   /*===== Top Banner =========================*/
   #nav_item > ul{display:none;}


   /*===== Sidebar =========================*/
   #hamburger_menu{display: block; }

   #sidebar{display: block;}

}







@media only screen and (max-width: 768px) {

   /*===== Top Banner =========================*/
   #nav_logo{width:218px; height: 50px;}

}