/************************
Main Header
************************/
/* topheader */

.topheader {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    z-index: 11;
}


.topheader .menu,
.topheader .logo,
.topheader .loginCart {
    width: 33%;
    display: flex;
    align-items: center;
}

.topheader .menu { 
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    justify-content: flex-start;
}
.topheader .menuItem {
    display: flex;
    flex-flow: row nowrap;
    gap: 32px;
    white-space: nowrap;
}

.topheader .logo {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    justify-content: center;
}
.topheader .loginCart { 
    color: inherit;   
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    justify-content: flex-end;
}
.topheader .loginCartitem {
    display: flex;
    flex-flow: row nowrap;
    gap: 32px;
}
.mHeader {
    display: none;
}

@media only screen and (max-width: 798px) {
    .topheader {
        display: none;
    }
    .mHeader {
        height: 100vh;
        max-height: 100vh;
        display: none;
        font-weight: 500;
        color: var(--main--heading--color);
        background: var(--mobile--header--background);
        overflow-y: auto;
        position: fixed;
        top: 0;
        width: 100%;
        color: var(--main-body--color);
        padding: var(--web-padding);
        padding-top: 50px;
    }
    .mHeaderMenu .loginCart {
        color: inherit;
        font-size: 18px;
        font-weight: inherit;
        font-family: inherit;
    }
    .mHeaderMenu .loginCartitem {
        display: flex;
        flex-flow: row nowrap;
        gap: 20px;
    }
    .mHeaderMenu #hamburger {
        width: 33%;
        border: none;
        background: transparent;
        font-size: 30px;
        text-align: left;
        outline: none;
    }
    .mHeaderMenu .logo {
        width: 33%;
        text-align: left;
    }
    .mHeaderAccordian,
    .mloginCart {
        max-width: 800px;
        font-size: 30px;
        font-weight: inherit;
    }
    .mHeaderAccordian .accordianBox,
    .mloginCart .loginCartitem {
        position: relative;
        margin: 10px 20px;
        border-bottom: 1px solid rgba(0,0,0,.1);
    }
    .mHeaderAccordian .accordianTitle {
        position: relative;
        font-size: inherit;
        color: inherit;
        background: transparent;
        cursor: pointer;
        width: 100%;
    }
    .mHeaderAccordian .accordianTitle::before {
        content: "+";
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        font-size: 1em;
    } 
    .mHeaderAccordian .accordianBox.active .accordianTitle::before {
        content: '-';
    }
    .mHeaderAccordian .accordianItem {
        position: relative;
        color: inherit;
        font-size: 22px;
        height: 0;
        overflow: hidden;
        transition: 0.5s;
        overflow-y: auto;
    }
    .mHeaderAccordian .accordianBox.active .accordianItem {
        height: auto;
    }
    .mHeaderAccordian .accordianList {
        padding: 5px 0;
    }
    .mloginCart .loginCartitem {
        font-size: 20px;
        font-weight: 600;
        border-bottom: none;
    }
    .mloginCart .loginCartList {
        font-size: inherit;
        font-weight: inherit;
        padding: 5px 0;
    }
}

/* banner */


/* bonusHeader */