/* logo */
@media screen and (max-width: 767px) {
body:not(:has(.announcement-bar)) .burger-menu-wrapper {
    height: calc(100vh - var(--header-height));
}
}
.index-logo,
.bg-transparent .normal-logo{
    display: none;
}
.bg-transparent .index-logo{
    display: block;
}
/* sticky header */
.sticky-header {
    position: absolute;
    top: 4.4rem;
    left: 0;
    /* transition: transform 0.3s ease-in-out; */
    /* z-index: 1000; */
}
@media screen and (max-width: 767px) {
    .layout-count-3 .sub-menu-wrapper .sub-item{
        margin-top: 2rem;
        
    }
    .sticky-header {
        /* top: 6rem; */
        top: 6.6rem;
    }
    /* menu */
    .burger-menu-wrapper .icon{
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .burger-menu-wrapper .hidden{
        display: none;
    }
    .burger-menu-wrapper .sub-item-tag.hidden{
        display: none !important;
    }
    .burger-menu-wrapper .icon.caret svg{
        object-fit: contain;
        height: 100%;
    }
    .burger-menu-wrapper svg{
        max-width: 100%;
        height: auto;
    }
    .burger-menu-wrapper svg *{
        stroke: black !important;
    }
    .burger-menu-wrapper .maj-menu-wrapper{
        padding: 5rem 0;
        border-bottom: 1px solid #00000020;        
    }
    .burger-menu-wrapper .maj-item.active .icon-plus,
    .burger-menu-wrapper .sub-item.active .icon-plus{
        display: none;
    }
    .burger-menu-wrapper .maj-item.active .icon-minus,
    .burger-menu-wrapper .sub-item.active .icon-minus{
        display: inline-flex;
    }
    .burger-menu-wrapper .maj-item{
        display: flex;
        justify-content: space-between;
        align-items: center;        
        cursor: pointer;
    }
    .burger-menu-wrapper .maj-item .text{
        font-family: Inter;
        font-weight: 700;
        font-size: 3.2rem;
        line-height: 112.99999999999999%;
        letter-spacing: -3%;
        text-transform: capitalize;
    }
    .burger-menu-wrapper .sub-menu-wrapper{
        transition: padding-left .3s ease;
    }
    .burger-menu-wrapper .sub-menu-wrapper:has(.sub-item.active){
        padding-left: 2rem;
    }
    .burger-menu-wrapper .sub-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .burger-menu-wrapper .sub-item:nth-of-type(1){
        margin-top: 4rem;
    }
    .burger-menu-wrapper .sub-item .text .heading{
        font-family: Inter;
        font-weight: 700;
        font-size: 3.2rem;
        line-height: 100%;
        letter-spacing: 0%;
        color: black;
    }
    .burger-menu-wrapper .sub-item .text .sub-item-tag{
        font-family: Inter;
        font-weight: 700;
        font-size: 2.2rem;
        line-height: 100%;
        letter-spacing: 0%;
        margin-top: 1.4rem;
        color: var(--main-blue);
        display: inline-block;
        border: 1px solid var(--main-blue);
        border-radius: 4rem;
        padding: .25rem 1.2rem;
    }
    .burger-menu-wrapper .sub-menu-wrapper .sub-link{
        display: flex;
        align-items: center;
        gap: 1.944rem;
        font-family: Inter;
        font-weight: 700;
        font-size: 3.2rem;
        line-height: 100%;
        letter-spacing: -3%;
        text-align: left;
    }
    .burger-menu-wrapper .sub-menu-wrapper .sub-link:nth-of-type(1){
        margin-top: 8rem;
    }
    .burger-menu-wrapper .sub-menu-wrapper .sub-link:nth-of-type(2){
        margin-top: 4rem;
    }
    .burger-menu-wrapper .sub-menu-wrapper .sub-link .icon{
        width: 2.916rem;
    }
    .burger-menu-wrapper .third-menu-wrapper{
        padding: 0 2rem;
    }
    .burger-menu-wrapper .third-menu-wrapper .third-item{
        display: flex;
        align-items: center;
        gap: 2rem;
        margin-top: 2rem;
    }
    .burger-menu-wrapper .third-menu-wrapper .third-item:nth-of-type(1){
        margin-top: 4rem;
    }
    .burger-menu-wrapper .third-menu-wrapper .third-item .media-wrapper{
        max-width: 8rem;
    }
    .burger-menu-wrapper .third-menu-wrapper .third-item .text{
        font-family: Inter;
        font-weight: 700;
        font-size: 2.4rem;
        line-height: 100%;
        letter-spacing: 0%;
        color: black;
    }
    .burger-menu-wrapper .layout-count-2 .sub-item{
        margin-top:3rem;
    }
    .burger-menu-wrapper .layout-count-2 .sub-item:nth-of-type(1){
        margin-top: 5rem;
    }
    .header .hw-container {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .header .tool-wrapper .w-\[2rem\]{
        width: 4rem;
    }
}
.not-in-index{
    top: 0;
    position: sticky !important;
}
.top-zero{
    top: 0;
}
.sticky-header-top {
    position: sticky;
    top: 0;
    left: 0;
    /* transition: transform 0.3s ease-in-out; */
    /* z-index: 1000; */
}

.sticky-header.scrolled-up {
    position: fixed;
    top: 0;
    transform: translateY(0);
}

.sticky-header.scrolled-down {
    position: fixed;
    top: 0;
    transform: translateY(-100%);
}
.sticky-header-top.scrolled-up,
.sticky-header-top.scrolled-down {
    position: sticky;
}

/* if has announcement bar */
.sticky-header.scrolled-up.has-announcement-bar {
    top: 4.4rem;
}
.announcement-bar{
    position: sticky;
    top: 0;
    left: 0;
    transition: all .3s ease;
    z-index: 3;
}
body:has(.sticky-header.scrolled-down) .announcement-bar{
    transform: translateY(-100%);
}
@media screen and (max-width: 767px) {
    .sticky-header.scrolled-up.has-announcement-bar {
        top: 6.4rem;
    }
}

.header-content {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* nav */
.header .nav-item .svg-wrapper{
    width: 1rem;
}
.header .nav-item .svg-wrapper svg{
    width: 100%;
    object-fit: cover;
}
.header .nav-item{
    font-family: Inter;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1;
    text-align: center;
    color: black;
}
.header .nav-item:hover .nav-item-mask{
    /*display: inline-block;*/
}
.header .nav-item:hover .mega-menu-wrapper{
    /*display: block;*/
}
.header .mega-menu-wrapper.block{display: block;}
.header.bg-transparent svg *{
    stroke: white;
}
.header.bg-transparent .nav-item{
    color: white;
}

/* pc mega-menu */
.header .mega-menu-wrapper .tab-item{
    color: var(--main-grey);
}
.header .mega-menu-wrapper .tab-item.active{
    color: var(--main-blue);
}
.header .mega-menu-wrapper .tab-item.active span:first-child{
    text-decoration: underline;
}

.header.bg-transparent{
    border: none;
    background-color: transparent;
}
@media screen and (max-width: 767px) {
    .header.bg-transparent{
        border-bottom: 1px solid #ffffff20;
    }    
}
.header .mega-menu-wrapper .tab-content.grid-cols-2 .grid-item {
    padding: 5.8rem 4rem;
    padding-right: 3rem;
}
.header .mega-menu-wrapper .tab-content.grid-cols-2 .grid-item .heading{
    font-size: 2.4rem;
}
.header .mega-menu-wrapper .tab-content.grid-cols-2 .grid-item .text-wrapper{
    max-width: 56%;
}   

/* v2 update */
@media screen and (min-width: 768px){
    .header .hw-container{
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .header .nav-item #pc-mega-menu-2>.mega-menu-item{
        padding-bottom: 6rem;
    }
    .header .nav-item #pc-mega-menu-1,
    .header .nav-item #pc-mega-menu-3,
    .header .nav-item #pc-mega-menu-4{        
        height: 90rem;  
    }
    .header .nav-item #pc-mega-menu-1>.mega-menu-item,
    .header .nav-item #pc-mega-menu-3>.mega-menu-item,
    .header .nav-item #pc-mega-menu-4>.mega-menu-item{      
        padding-bottom: 0;
    }  
    /* make larger action-area for nav-item */
    .header .nav-item>.relative::after{
        content: '';
        position: absolute;
        width: 100%;
        height: var(--header-height);
        z-index: 1;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        cursor: pointer;
    }
    .header .nav-item .left-section .btn-wrapper .link-btn{
        text-align: left;
        line-height: 1.3;
    }
    .header .nav-item .grid-item .text-wrapper .heading{
        line-height: 1.3;
    }
    .header .nav-item #titan-series.tab-content .content-wrapper{
        width: 100%;
    }
    .header .nav-item #titan-series.tab-content .content-wrapper .img-wrapper{
        --fix_h: 34rem;
        width: var(--fix_h);
        height: var(--fix_h);
    }
    .header #pc-mega-menu-2 .grid-item .text-wrapper .heading{
        font-weight: 700;
        line-height: 1.3;
    }
    .header #pc-mega-menu-2 .grid-item .text-wrapper .desc,
    .header #pc-mega-menu-2 .right-section .link-btn{
        line-height: 1.3;
    }
    .header #pc-mega-menu-4 .discount:nth-of-type(1){
        border-bottom: 1px solid #00000020;
    }
}
/* update v3 */
@media screen and (min-width: 768px){
    .header .mega-menu-wrapper {
        cursor: auto;
    }
    .header #pc-mega-menu-2 .right-section{
        display: flex;
      flex-direction: column;
    }
    .header #pc-mega-menu-2 .right-section .link-btn{
        width: fit-content;
    }
    
    .header .nav-bar .nav-item:nth-of-type(4) #pc-mega-menu-4 .discount{
        border-bottom: none;
    }
}
/* update v4 */
@media screen and (min-width: 768px){
    .header #pc-mega-menu-1 .right-section .grid-item,
    .header #pc-mega-menu-2 .right-section .grid-item{
        --t-col: black;
        --tw-content: "";
        color: var(--t-col);
    }
    .header #pc-mega-menu-1 .right-section .grid-item .heading,
    .header #pc-mega-menu-2 .right-section .grid-item .heading{
        position: relative;
        overflow: hidden;
        width: fit-content;
    }
    .header #pc-mega-menu-1 .right-section .grid-item .heading:before,
    .header #pc-mega-menu-2 .right-section .grid-item .heading:before {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        content: var(--tw-content);
        width: 100%;
    }
    .header #pc-mega-menu-1 .right-section .grid-item .heading:before,
    .header #pc-mega-menu-2 .right-section .grid-item .heading:before {
        
        /* animation: out 0.33s cubic-bezier(0.52, 0.02, 0.31, 0.99) both; */
        background-color: var(--t-col);
        opacity: 0;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 1.2s;
        --tw-content: "";
        content: var(--tw-content);
    }
    .header #pc-mega-menu-1 .right-section .grid-item .heading:before,
    .header #pc-mega-menu-2 .right-section .grid-item .heading:before {
        animation: out 0.33s cubic-bezier(0.52, 0.02, 0.31, 0.99) both;
    }
      
      .header #pc-mega-menu-1 .right-section .grid-item:hover .heading:before,
      .header #pc-mega-menu-2 .right-section .grid-item:hover .heading:before {
        animation: in 0.33s cubic-bezier(0.52, 0.02, 0.31, 0.99) normal;
        opacity: 1;
        content: var(--tw-content);
        transition-duration: 0.33s;
      }
      .header #pc-mega-menu-3 .text-wrapper a,
      .header #pc-mega-menu-4 .text-wrapper a,
      .header #pc-mega-menu-5 .text-wrapper a{
          --t-col: var(--main-grey);
          --tw-content: "";
          color: var(--t-col);
          position: relative;
          overflow: hidden;
          width: fit-content;
          line-height: 1.1;
        }
        .header #pc-mega-menu-3 .text-wrapper a::before,
        .header #pc-mega-menu-4 .text-wrapper a::before,
        .header #pc-mega-menu-5 .text-wrapper a::before{
            position: absolute;
            left: 0;
            bottom: 0;
        height: 1px;
        content: var(--tw-content);
        width: 100%;
        animation: out 0.33s cubic-bezier(0.52, 0.02, 0.31, 0.99) both;
        background-color: var(--t-col);
        opacity: 0;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 1.2s;
        --tw-content: "";
        content: var(--tw-content);
    }
    .header #pc-mega-menu-3 .text-wrapper a:hover,
    .header #pc-mega-menu-4 .text-wrapper a:hover,
    .header #pc-mega-menu-5 .text-wrapper a:hover{

        --t-col: var(--main-blue);
    }
    .header #pc-mega-menu-3 .text-wrapper a:hover::before,
    .header #pc-mega-menu-4 .text-wrapper a:hover::before,
    .header #pc-mega-menu-5 .text-wrapper a:hover::before{
        animation: in 0.33s cubic-bezier(0.52, 0.02, 0.31, 0.99) normal;
        opacity: 1;
        content: var(--tw-content);
        transition-duration: 0.33s;
    }
      
}
.header .tool-wrapper .w-\[2rem\]:nth-of-type(1){
    display: none;
}
@media screen and (min-width: 768px){
    .header .nav-bar .nav-item>.inline-flex span:nth-of-type(2){
        font-weight: 500;
    }
    
}
@media screen and (max-width: 767px){
    .header .logo{
        padding-right: 7rem;
    }
}
.header .logo{
    max-width: 115px;
}