{#.header-section { position: fixed; left: 0; right: 0; width: 100%; top: 0;z-index:9; transition:background-color 300ms ease-in; }#}

.header-section .container > div > div {display: flex; flex-wrap: wrap;align-items: center;}
.header-section .logo { width: 243px; display: flex; align-items: center;position:relative; }
.header-section .logo img{position:absolute; left:0;    top: 50%;transform: translateY(-50%); transition:all 0.3s ease-in;}
.header-section .logo .hwhite-logo{opacity:0;}
.header-section.has-scrolled .logo .hwhite-logo{opacity:1;}
.header-section.has-scrolled .logo .hblack-logo{opacity:0;}

.white-header.header-section .logo .hwhite-logo{opacity:1;}
.header-section.white-header .logo .hblack-logo{opacity:0;}

.header-section .menu{ width:calc(100% - 243px);padding: 0 0 0 20px;}
.work-btn-res{display:none}
.header-section .custom-menu-primary{width:calc(100% - 170px);}
.work-btn-desk {width: 170px;padding-left:30px;}
.work-btn-desk .black-btn a{border-radius:3px; font-size:17px;}


/*************************************Depth 1****************************************************/
.header-section .menu .hs-menu-wrapper > ul{display: flex; flex-wrap: wrap;    padding-left:12px;}
.header-section .menu ul > li.hs-menu-depth-1 > a{padding:22px 0;display: inline-block;}
.header-section .menu ul > li.hs-menu-depth-1{margin:0 14px;}

/*************************************Depth 2****************************************************/
.header-section .menu ul > li.hs-menu-depth-1.hs-item-has-children{position:relative;}
.header-section .menu ul > li.hs-menu-depth-2 > a{padding:0 0 13px;display: inline-block;}
.header-section .menu ul > li.hs-menu-depth-2:last-child a{padding-bottom:0;}
.header-section .menu ul > li.hs-menu-depth-1 > ul.hs-menu-children-wrapper{position: absolute;left:0; background-color:var(--third_color); width: 100%; min-width:419px; padding:28px 42px 33px 38px;visibility: hidden;}
.header-section .menu ul > li.hs-menu-depth-1:hover > ul.hs-menu-children-wrapper{visibility:visible;}
.header-section .menu ul > li.hs-menu-depth-1 > .child-trigger{position: absolute; top:19px;right:12px;}
.header-section .menu ul > li.hs-menu-depth-1 > .child-trigger i{position: relative;}
/*.header-section .menu ul > li.hs-menu-depth-1:hover > .child-trigger i:before{color:transparent;}*/


/*************************************Depth 3****************************************************/
.header-section .menu ul > li.hs-menu-depth-2.hs-item-has-children{position: relative;}
.header-section .menu ul > li.hs-menu-depth-2 > ul.hs-menu-children-wrapper{opacity:1; position: absolute; background-color:var(--third_color); width: 100%; min-width:150px;visibility: hidden;left:100%;top:0px;border-left:1px solid #fff;}
.header-section .menu ul > li.hs-menu-depth-2:hover > ul.hs-menu-children-wrapper{visibility:visible;}
.header-section .menu ul > li.hs-menu-depth-2 > .child-trigger{ position: absolute; top: 0px; right: 20px; }
.header-section .menu ul > li.hs-menu-depth-2 > .child-trigger i{position: relative;}
.header-section .menu ul > li.hs-menu-depth-2 > .child-trigger i:before{content: "\f0d7";font-family: FontAwesome;font-style: normal;font-weight: normal;text-decoration: inherit;color: #fff;font-size: 16px;position: absolute;top: 10px;left: 0;transition: all 0.5s ease ; -moz-transition: all 0.5s ease ; -ms-transition: all 0.5s ease ; -o-transition: all 0.5s ease ; -webkit-transition: all 0.5s ease ; }
/*.header-section .menu ul > li.hs-menu-depth-2:hover > .child-trigger i:before{color:transparent;}*/
.header-section .menu ul > li.hs-menu-depth-3 > a{padding:10px 15px;display: inline-block;font-size:inherit;}
@media(max-width:1430px){
.header-section .menu ul > li.hs-menu-depth-1{margin:0 35px;}  
}

@media(max-width:1366px){
  
  .header-section .menu ul > li.hs-menu-depth-1{margin:0 30px;}
  
}

@media(max-width:1200px){
.header-section .menu{padding:0;}
.header-section .menu ul > li.hs-menu-depth-1{margin:0 20px;}  

 .header-section .logo{width:180px;} 
  .header-section .menu{width: calc(100% - 180px);} 
}

@media(max-width:1024px){
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover>.hs-menu-children-wrapper{top:0;}
  .works-btn.work-btn-desk {display: none;}
   .header-section .logo{width:243px;} 
  .header-section { padding: 18.5px 0;}
  .work-btn-res{display:block;}
}

@media(min-width:1025px){
  .header-section .menu ul > li.hs-menu-depth-1:first-child{display:none;}
  .header-section .menu ul > li.hs-menu-depth-1 > .child-trigger{display:none;}
.header-section .hs-menu-wrapper{display:flex !important;overflow:visible !important; justify-content:flex-end;}
.header-section .mobile-trigger{display: none!important;}
  .header-section .menu ul > li.hs-menu-depth-1 a{position:relative}
  .header-section .menu ul > li.hs-menu-depth-1 a:after{position:absolute; content:""; width:0; transition:all 0.3s ease; height:2px; bottom:0; left:0; right:0;}
  .header-section .menu ul>li.hs-menu-depth-1>a:hover:after{width:100%;}
}

@media(max-width:1024px){

  .header-section .logo img{position:relative;    top: auto; transform: none;}
  .header-section .logo .hwhite-logo{display:none;}
  .header-section .menu .hs-menu-wrapper>ul{padding:0 17px;}  
  
  .header-section .menu ul>li.hs-menu-depth-1 ul.hs-menu-children-wrapper{min-width:inherit;} 
/**********************************************Toggle Icon***************************************/
.header-section .mobile-trigger{display: inline-block !important; cursor: pointer; position: absolute; right:17px; width:30px; padding:15px 0px; z-index: 12; top:21px;}
.header-section .mobile-trigger .line {display: block;background-color:var(--base_color);width:30px;height:2px;position:absolute;left: 0;border-radius: 4px;}
  .header-section .mobile-trigger.active-re .line{background-color:var(--white_color);}
  .header-section .mobile-trigger .line.line-3{top:52%;}
.header-section .mobile-trigger.active-re .line-3 { transform: translateY(-23px) translateX(0) rotate(-45deg); -webkit-transform: translateY(-23px) translateX(0) rotate(-45deg); -moz-transform: translateY(-23px) translateX(0) rotate(-45deg);}
.header-section .mobile-trigger.active-re .line.line-3 {top:102%;}
.header-section .mobile-trigger .line.line-2{top:25%;}
.header-section .mobile-trigger.active-re .line-2 { opacity: 0;}
  .header-section .mobile-trigger.active-re .line-1 { opacity: 1;}
.header-section .mobile-trigger .line.line-1{top:0;opacity: 0;}
  .header-section .mobile-trigger.active-re .line.line-1 { opacity: 1;}
.header-section .mobile-trigger.active-re .line-1{top:10%;}
.header-section .mobile-trigger.active-re .line-1 { transform: translateY(5px) translateX(0) rotate(45deg); -webkit-transform: translateY(5px) translateX(0) rotate(45deg); -moz-transform: translateY(5px) translateX(0) rotate(45deg);}

/**********************************************Depth 1***************************************/
.header-section .hs-menu-wrapper{display:none;padding:22vw 0 0;position: fixed;width: 100%;max-width: 100%;left:0;right:0;top:0;height:100%; background-color:var(--base_color);}
.header-section .menu ul > li.hs-menu-depth-1{ width: 100%;margin:0px;}
.header-section .menu ul > li.hs-menu-depth-1 > a{padding:0 0 22px;display: inline-block;letter-spacing: -0.51px;}

/**********************************************Depth 2***************************************/
.header-section .menu ul > li.hs-menu-depth-1 ul.hs-menu-children-wrapper{position: relative;display:none;visibility:visible;}
.header-section .menu ul > li.hs-menu-depth-1 .child-trigger {
    top:30px;
    right: 0;
    background-image: url();
    width: 15px;
    height: 15px;
    background-size: cover;
}
.header-section .menu ul > li.hs-menu-depth-1 .child-trigger.child-open {
    transform: rotate(180deg);
}
.header-section .menu ul > li.hs-menu-depth-2,.header-section .menu ul > li.hs-menu-depth-3 { border-bottom: 1px solid var(--base_color);margin-bottom:12px; }
  .header-section .menu ul > li.hs-menu-depth-2:last-child,.header-section .menu ul > li.hs-menu-depth-3:last-child{border:none; margin:0;}
.header-section .menu ul > li.hs-menu-depth-1 > ul.hs-menu-children-wrapper { padding: 0 22px 25px;  margin-top: 0;}

/**********************************************Depth 3***************************************/
.header-section .menu ul > li.hs-menu-depth-2 > ul.hs-menu-children-wrapper{position: relative;display:none;visibility:visible;left:0;}
}


@media(max-width:350px){
.header-section .logo {width: 200px;}
}