nav{
position: fixed;
z-index: 100;
  width: 100%; 
  color: #fff;
}
nav.scrolled{
  background: #fff;
  color: #101921;
}
.container{

}
.nav__flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 82px;
  transition: .3s ease-in-out height;
}
.nav__left{

}
.nav__logo{
height: 20px;
display: block;
}
.nav__logo img{
  height: 100%;
  width: auto;
  object-fit: contain;
}
.logo-dark{
  display: none;
}
nav.scrolled .logo-light,
nav.active .logo-light{
  display: none;
}
nav.scrolled .logo-dark,
nav.active .logo-dark{
  display: block;
  height: 100%;
}


.nav__menu{
  display: flex;
  height: 100%;
  gap: 8px;
  
}
.nav__item{
  display: flex;
  align-items: center;
  padding-left: 16px;
  padding-right: 16px;
}
a.nav__item:hover{
  color: #fc4f1a
}
.has_dropdown{

}
.dropdown__wrapper{

}

.nav__right{
  display: flex;
  align-items: center;
  gap: 16px;
}
.btn{

}

.nav__search-toggle{
  border: none;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  cursor: pointer;
}
.nav__search-toggle:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.nav__search-toggle svg{
  display: block;
}

@media(min-width: 992px){
  .dropdown__wrapper{
    background: white;
    position: absolute;
    top: 100%;
    padding: 24px;
    color: #101921;
    display: none;
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
    box-shadow: 10px 10px 50px 0px rgba(0,98,255,0.03);
    border-radius: 10px;
  }
  .has_dropdown:hover .dropdown__wrapper{
    display: block;
  }
}

@media(max-width: 992px){
  nav.scrolled,
  nav.active{
  background: #fff;
  color: #101921;
}
nav.scrolled .nav__flex{
  height: 56px;
}
  .nav__menu{
    background: #fff;
    position: fixed;
    color: #000;
    inset: 0;
    max-height: calc(100dvh - 82px);
    top: 82px;
    overflow-y: auto;
    flex-direction: column;
    padding: 24px 0;
    display: none;
  }
  nav.scrolled .nav__menu{
    max-height: calc(100dvh - 56px);
    top: 56px;
  }
  .nav__menu.active{
    display: flex;
  }

  .nav__item{
    flex-direction: column;
    align-items: stretch;

  }
  .nav__item>span{
    padding: 12px 0px;
    position: relative;
    width: 100%;
  }
    .nav__item.has_dropdown>span:after,
    .ddn__right--header:after{
    content: url('data:image/svg+xml,<svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L5 5L1 9" stroke="%23101921" stroke-width="2"/></svg>');
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    transform-origin: top; 
    transition: .3s linear
  }
  .nav__item.has_dropdown>span.active:after,
  .ddn__right--header.active:after{
    transform: rotate(90deg) translateY(-50%);
  }
.dropdown__wrapper{
  display: none;
}
}

/* Product Dropdown*/
.ddp__left-heading,.ddp__right-heading{
  opacity: 50%;
  text-transform: uppercase;
  padding-top: 24px;
  padding-bottom: 24px;
  display: block;
}
.ddp__left-item{
  padding-top: 24px;
  padding-bottom: 24px;
  display: block;
  border-bottom: 1px solid rgba(252,79,26, 0.20);
}
.ddp__left-item:first-of-type{
padding-top: 0;
}
.ddp__left-item:last-child{
  border-bottom: none;
}
.ddp__left-item p{
  margin-top: 8px;
}
.ddp__dropdown{
  margin-bottom: 16px;
}
.ddp__dropdown-title{
  color:  #fc4f1a;
  width: 100%;
  display: block;
  position: relative;
  padding-right: 16px;
}
.ddp__dropdown-title::after{
    content: '';
  height: 12px;
  width: 12px;
  border-right: 1px solid  #fc4f1a;
  border-bottom: 1px solid  #fc4f1a;
  transform:rotate(45deg);
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  transition: .3s ease-in-out
}
.ddp__dropdown:has(.active) .ddp__dropdown-title::after{
  transform: rotate(-45deg)
}
.ddp__dropdown-contents{
  padding-top: 8px;
}
.ddp__dropdown-contents.active{
  display: block
}
.ddp__dropdown-item{
  display: block;
  margin-bottom: 4px;
}
  .nav__button--mobile{
    display: none;
  }
@media(min-width: 992px){
  
  .dd_product{
    width: 100vw;
    max-width: 768px;
    left:50%;
    transform: translateX(-50%);
    &:has(.ddp__right){
      max-width: 980px;
    }
  }
  .ddp__flex{
    display: flex;
  }
  .ddp__left{
    flex: 1 1 70%;
    &:has(+.ddp__right){
      padding-right: 24px;
      border-right: 1px solid #FD4E1A
    }
  }
  .ddp__right{
    flex: 1 1 30%;
    padding-left: 24px;
  }
  .mobile-nav__button{
    display: none;
  }
}

.nav__search-box[hidden]{
  display: none !important;
}
.nav__search-box{
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(16, 25, 33, 0.4);
  backdrop-filter: blur(8px);
  & .container{
    width: 100%;
    height: 100%;
      padding: 80px 24px 40px;
    position: relative;
    display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  }
}
.nav__search-box form{
  width: 100%;
  max-width: 620px;
}
.nav__search-box-input{
    background-image:url("data:image/svg+xml,%3Csvg version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' width='13px' height='14px' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='matrix(1 0 0 1 -741 -153 )'%3E%3Cpath d='M 7.97265625 8.5859375 C 8.6575520833334 7.848357371794862 9.000000000000025 6.960737179487174 9.000000000000025 5.923076923076927 C 9.000000000000025 4.885416666666679 8.6575520833334 3.997796474358992 7.97265625 3.260216346153854 C 7.2877604166665995 2.5226362179487154 6.4635416666665755 2.153846153846146 5.499999999999929 2.153846153846146 C 4.536458333333437 2.153846153846146 3.7122395833334134 2.5226362179487154 3.027343750000012 3.260216346153854 C 2.342447916666611 3.997796474358992 1.9999999999999882 4.885416666666679 1.9999999999999882 5.923076923076927 C 1.9999999999999882 6.960737179487174 2.342447916666611 7.848357371794862 3.027343750000012 8.5859375 C 3.7122395833334134 9.323517628205138 4.536458333333437 9.692307692307688 5.499999999999929 9.692307692307688 C 6.4635416666665755 9.692307692307688 7.2877604166665995 9.323517628205138 7.97265625 8.5859375 Z M 12.710937499999929 12.165865384615385 C 12.903645833333414 12.37339743589745 13 12.625801282051285 13 12.923076923076927 C 13 13.214743589743597 12.901041666666707 13.46714743589745 12.703124999999964 13.680288461538458 C 12.505208333333378 13.893429487179477 12.270833333333364 14 11.999999999999929 14 C 11.718749999999975 14 11.484374999999964 13.893429487179477 11.296875000000048 13.680288461538458 L 8.617187500000071 10.802884615384615 C 7.684895833333438 11.49839743589745 6.645833333333389 11.846153846153854 5.499999999999929 11.846153846153854 C 4.755208333333366 11.846153846153854 4.042968750000012 11.690504807692312 3.3632812500000235 11.379206730769228 C 2.6835937500000355 11.067908653846146 2.097656249999928 10.647235576923073 1.605468750000012 10.1171875 C 1.11328124999994 9.587139423076927 0.722656250000024 8.956129807692312 0.4335937499999521 8.224158653846146 C 0.14453125000003592 7.4921875 0 6.7251602564102475 0 5.923076923076927 C 0 5.120993589743597 0.14453125000003592 4.353966346153854 0.4335937499999521 3.621995192307687 C 0.722656250000024 2.8900240384615414 1.11328124999994 2.259014423076927 1.605468750000012 1.7289663461538538 C 2.097656249999928 1.1989182692307707 2.6835937500000355 0.7782451923076877 3.3632812500000235 0.4669471153846146 C 4.042968750000012 0.15564903846154152 4.755208333333366 0 5.499999999999929 0 C 6.2447916666666465 0 6.95703125 0.15564903846154152 7.6367187499999885 0.4669471153846146 C 8.316406249999975 0.7782451923076877 8.902343749999929 1.1989182692307707 9.39453125 1.7289663461538538 C 9.886718750000071 2.259014423076927 10.27734374999999 2.8900240384615414 10.56640625000006 3.621995192307687 C 10.855468749999975 4.353966346153854 11.00000000000001 5.120993589743597 11.00000000000001 5.923076923076927 C 11.00000000000001 7.157051282051285 10.677083333333378 8.27604166666668 10.031249999999952 9.280048076923073 L 12.710937499999929 12.165865384615385 Z ' fill-rule='nonzero' fill='%23000' stroke='none' transform='matrix(1 0 0 1 741 153 )' /%3E%3C/g%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:calc(100% - 16px) center;
    background-size: 20px 20px;
    padding-right: 52px;
}
.nav__search-box-input::placeholder{
  color: rgba(16, 25, 33, 0.6);
}
.search__close{
  position: absolute;
  top: 32px;
  right: 32px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.search__close:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.search__close svg{
  display: block;
}

body.nav-search-open{
  overflow: hidden;
}

@media(max-width:992px){
  nav{
    font-size: 18px;
  }
  .ddp__flex{
    display: block;
    width: 100%;
  }
  .ddp__dropdown-item{
    padding: 6px 0
  }
  .nav__button--mobile{
    position: fixed;
    bottom: 0;
    padding: 24px 0;
    left: 0;
    width: 100%;
    background: #fff;
  }
  .nav__menu{
    padding-bottom: 100px;
  }
  .nav__menu.active + .nav__button--mobile{
    display: block;
  }
  .mobile-nav__button{
    display: block;
    margin: 0 16px;
  }
}


/* Nested Dropdown */
.dd_nested{

}
.ddn__right-item{
  display: block;
  padding: 16px;
  border-bottom: 1px solid rgba(252,79,26, 0.20);
}
.ddn__right-item:last-child{
  border-bottom: none;
}
@media(min-width: 992px){
  .dd_nested{
    width: 100vw;
    max-width: 650px;
    left:50%;
    transform: translateX(-50%)
  }
  .ddn__flex{
    display: flex;
    
  }
  .ddn__left{
    flex: 1 1 50%;
    padding-right: 24px;
    border-right: 1px solid #FD4E1A
  }
  .ddn__left-item-wrapper{
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
  }
  .ddn__left-item-wrapper.active{
    background: rgba(252,79,26, 0.10);
  }
  .ddn__left-item{
    display: block;
    padding: 18px 12px;;
    flex: 1 1 100%;
  }
  .ddn__left-icon{
    height: inherit;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 14px;
  }
  .ddn__right{
    flex: 1 1 50%;
    padding-left: 24px;
  }
  .ddn__right-wrapper{
    position: relative;
    top: 0;
    display: none;
  }
  .ddn__right-wrapper.active{
    display: block
  }
  .ddn__right--header{
    padding: 24px 0 16px;
    display: block;
    font-size: 20px;
    line-height: 24px;
    
  }

  
  /* ghost elements to fix the height*/
  .ddn__height-checker{
    display: flex;
    visibility: hidden;
    opacity: 0;
  }
  .ddn__height-checker .ddn__right-wrapper{
    width: 0px !important;
    overflow: hidden !important;
    display: block !important;
  }
  .ddn__height-checker *{
    white-space: nowrap !important;
    text-wrap-mode: nowrap !important;
  }
}

@media(max-width:992px){
  .ddn__right-wrapper{
    margin-bottom: 16px;
  }
  .ddn__right--header{
    color: rgba(16, 25, 33, .5);
    text-transform: uppercase;
    padding: 8px 0 4px;
    display: block;
    position: relative; 
  }
  .ddn__right--header:after{
    opacity: .5
  }
  .ddn__right-items{
    display: none;
  }
  .ddn__left,
  .ddn__height-checker{
    display: none;
  }
}

/* One column Dropdown */
  .ddoc__item{
  padding: 18px 12px;
  border-radius: 10px;
  }
  .ddoc__item:hover{
  background: rgba(252,79,26, 0.10); 
  }
@media(min-width: 992px){
  .has_dropdown:hover .dd_one_column{
      display: flex;
      flex-direction: column;
      width: 100%; 
      max-width: 490px;
      left:50%;
      transform: translateX(-50%)
    }
}
@media(max-width:992px){
  .dd_one_column a{
    display: block;
  }
  .ddoc__item{
    border-bottom: 1px solid rgba(252,79,26, 0.20);
  }
  .ddoc__item:last-child{
    border-bottom: unset;
  }
}

/* Multi Column Dropdown */

@media(min-width: 992px){
  .dd_multi_column{
    width: 100vw;
    max-width: 978px;
    left:50%;
    transform: translateX(-50%)
  }
  .ddmc__grid{
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
  }
  .ddmc__column{
    flex: 1 1 calc(100% / 3 - 32px);
    border-right: 1px solid var(--primary);
    &:last-child{
      border-right: none;
    }
  }
  .ddmc__column-title{
    opacity: 50%;
    text-transform: uppercase;
    padding-top: 24px;
    padding-bottom: 24px;
    display: block;
    font-size: 16px;
    font-weight: 400;
  }
  .ddmc__items{
    display: flex;
    flex-direction: column;
    margin: 0 -12px;
    width: 100%;
  }
  .ddmc__column-item{
    padding: 12px 12px;
    border-radius: 10px
  }
  .ddmc__column-item:hover{
      background: rgba(252,79,26, 0.10);
  }
  /* Creating ghost elements for good layout */
    .ddmc__grid:has(.ddmc__column:nth-child(3n + 4):last-child):after {
    content: '';
    flex: 1 0 calc((100% / 3) * 2 - 24px);
  }
  .ddmc__grid:has(.ddmc__column:nth-child(3n + 5):last-child):after {
    content: '';
    flex: 1 1 calc(100% / 3 - 32px)
  }
}

@media(max-width:992px){
  .ddmc__column{
    margin-bottom: 16px;
  }
  .ddmc__column-title{
    color: rgba(16, 25, 33, .5);
    text-transform: uppercase;
    padding: 8px 0 4px;
    display: block;
    position: relative; 
    font-size:16px;
    line-height 1.4;
  }
  .ddmc__column-item{
    display: block;
    padding: 18px 12px;
    border-bottom: 1px solid rgba(252,79,26, 0.20);
  }
}

/* Hamburger */
.hamburger{
  display: none;
}
.hamburger .line{
  width: 24px;
  height: 2px;
  background-color: #ecf0f1;
  display: block;
  margin: 4px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  border-radius: 100px;
}

nav.scrolled .hamburger .line,
nav.active .hamburger .line{
  background: #101921;
}

.hamburger:hover{
  cursor: pointer;
}

#hamburger-6.is-active{
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#hamburger-6.is-active .line:nth-child(2){
  width: 0px;
}

#hamburger-6.is-active .line:nth-child(1),
#hamburger-6.is-active .line:nth-child(3){
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

#hamburger-6.is-active .line:nth-child(1){
  -webkit-transform: translateY(6px);
  -ms-transform: translateY(6px);
  -o-transform: translateY(6px);
  transform: translateY(6px);
}

#hamburger-6.is-active .line:nth-child(3){
  -webkit-transform: translateY(-6px) rotate(90deg);
  -ms-transform: translateY(-6px) rotate(90deg);
  -o-transform: translateY(-6px) rotate(90deg);
  transform: translateY(-6px) rotate(90deg);
}
@media(max-width:992px){
  .hamburger{
    display: block;
  }
  .nav__right .btn{
    display: none;
  }
}