.header_area{background: var(--secondarycolor); font-family:var(--primaryfont);padding: 32px 0;}
.header_area.navbar_fixed .main_menu {position: fixed;padding:24px 0;width: 100%;top: -71px;left: 0;right: 0;z-index: 997;background: #050505;transform: translateY(71px);transition: transform 500ms ease, background 500ms ease;-webkit-transition: transform 500ms ease, background 500ms ease;box-shadow: 0px 3px 16px 0px rgba(0,0,0,0.1);z-index: 9999;}
#fixednavgap.fixed {height:48px;width:100%;}


.site-navbar ul {list-style: none; display:flex; align-items:center; justify-content:end; gap:20px;}
.site-navbar ul li a{color: #fff; text-decoration: none;}
.site-navbar ul li{font-size:20px;font-weight:700;}
.site-navbar .toggle-btn{font-size: 32px; border-left:2px solid #fff; padding-left:20px;}

.clear{clear: both;}
.menu-bottom{margin-top:1rem;}
.headersocial{padding-left:0;line-height: 1;}
.headersocial i{color:#000;font-size:1.7rem}
a{text-decoration: none;}

.headercontact{border-top:2px solid rgba(0, 0, 0, 0.2);border-bottom:2px solid rgba(0, 0, 0, 0.2);margin:1rem 0;padding:13px 0;font-size: 17px;  display: flex;justify-content: space-between;width: 100%;gap: 4.5rem;letter-spacing:2%}
li{list-style-type: none}
.headercontact a{font-weight: 700;color:#000}
.mr-3{margin-right:1.5rem !important}

.privacylink{display:flex;justify-content:space-between;width:100%;padding-left: 0;margin-top:1rem;}
.privacylink a{color:#000}

.topright{float:right;display:flex;gap: 20px;align-items: center;}
.topright a{font-size: 20px;font-weight: 700;color:#fff;text-decoration: none}
.topright .js-menu-toggle{font-size: 32px;  border-left: 2px solid #fff;  padding-left: 20px;}
.site-navbar {  display: none;}

.site-mobile-menu {
width: 450px;
position: fixed;
right: 0;
z-index: 2000;
padding:1.7rem;
background: #fff;
height: calc(100vh);
-webkit-transform: translateX(-150%);
-ms-transform: translateX(-150%);
transform: translateX(150%);
-webkit-box-shadow: -10px 0 20px -10px rgba(0, 0, 0, 0.1);
box-shadow: -10px 0 20px -10px rgba(0, 0, 0, 0.1);
-webkit-transition: .5s all ease-in-out;
-o-transition: .5s all ease-in-out;
transition: .5s all ease-in-out;
top: 0%;
display: flex;
flex-direction: column;
max-width: 85%;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.offcanvas-menu .site-mobile-menu {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
.site-mobile-menu .site-mobile-menu-header {
  width: 100%;
  float: left;
  /*! padding-left: 20px; */
  padding-bottom: 20px;
  align-items: start;
  display: flex;justify-content: space-between;
  border-bottom: 1px solid #000;
}
.site-mobile-menu-header img{width:110px;height: auto}
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close i {
  font-size:20px;
display: inline-block;
padding-left: 0;
padding-right: 0px;
line-height: 1;
cursor: pointer;
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
color: #000;
}
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close i:hover {
color: var(--tertiarycolor);
}
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo {
float: left;
margin-top: 10px;
margin-left: 0px;
}
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a {
display: inline-block;
text-transform: uppercase;
}
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a img {
max-width: 70px;
}
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a:hover {
text-decoration: none;
}
.site-mobile-menu .site-mobile-menu-body {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
position: relative;
/* padding: 0 0px 20px 0px;
height: calc(100vh - 52px);
padding-bottom: 150px; */
scrollbar-width: none;
-webkit-scrollbar-width: none;
    /*! width:93%; */
margin: 1rem auto 0;
flex: 1;
}
.site-mobile-menu .site-nav-wrap {
padding: 0;
margin: 0;
list-style: none;
position: relative;

}
.site-mobile-menu .site-nav-wrap a {
padding: 5px 0;
display: block;
position: relative;
color: rgba(0, 0, 0, 0.4);
text-decoration: none;
	transition:0.4s ease-in-out;
}
.site-mobile-menu .site-nav-wrap a:hover,.site-mobile-menu .site-nav-wrap > li.menu-active a{
color: #000;
font-size:1.8rem;
  font-weight: 700;
}

.site-mobile-menu .site-nav-wrap li {
position: relative;
display: block;
}
.site-mobile-menu .site-nav-wrap li.active > a {
color: #2f89fc;
}
.site-mobile-menu .site-nav-wrap .arrow-collapse {
position: absolute;
right: 0px;
top: 10px;
z-index: 20;
width: 36px;
height: 36px;
text-align: center;
cursor: pointer;
border-radius: 50%;
color: #fff;
}
.site-mobile-menu .site-nav-wrap .arrow-collapse.collapsed:before {
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.site-mobile-menu .fade {
-webkit-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
@media screen and (prefers-reduced-motion: reduce) {
.site-mobile-menu.fade {
-webkit-transition: none;
-o-transition: none;
transition: none;
}
}
.site-mobile-menu .fade:not(.show) {
opacity: 0;
}
.site-mobile-menu .collapse:not(.show) {
display: none;
}
.site-mobile-menu .collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
@media screen and (prefers-reduced-motion: reduce) {
.site-mobile-menu.collapsing {
-webkit-transition: none;
-o-transition: none;
transition: none;
}
}
.site-mobile-menu .site-nav-wrap > li {
display: block;
position: relative;
float: left;
width: 100%;
/*! border-bottom: 1px solid #4F3F31; */
}
.site-mobile-menu .site-nav-wrap > li > a {
font-family: var(--primaryfont);
font-size: 1.3rem;
font-weight: 700;
line-height: 40px;
}
.site-mobile-menu .site-nav-wrap > li > ul {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.site-mobile-menu .site-nav-wrap > li > ul > li {
display: block;
}
.site-mobile-menu .site-nav-wrap > li > ul > li > a {
padding-left: 30px;
font-size: 15px;
text-transform: capitalize;
}
.site-mobile-menu .site-nav-wrap > li > ul > li > ul {
padding: 0;
margin: 0;
}
.site-mobile-menu .site-nav-wrap > li > ul > li > ul > li {
display: block;
}
.site-mobile-menu .site-nav-wrap > li > ul > li > ul > li > a {
font-size: 15px;
padding-left: 60px;
}



@media (max-width:600px){
    .site-mobile-menu{padding: 2rem 20px 5rem;}
  .site-mobile-menu .site-nav-wrap > li > a{font-size:17px;line-height: 34px;}
  .site-mobile-menu .site-nav-wrap a:hover, .site-mobile-menu .site-nav-wrap > li.menu-active a{font-size: 25px}
  .headercontact{flex-direction: column; gap: 1.5rem}
}