/* header drop down */
     
     .dropdown:hover .dropdown-menu {
        display: block;
        /* transition: bottom 300ms linear; */
        background-color: red;
        transition: background-color ease 0.2s;
        /* position: absolute;
   width: 100%; */
    }
    /* lg sreen category side menu css  */
    
    #body-overlay {
        width: 100vw;
        height: 100vh;
        display: none;
        position: fixed;
        z-index: 20;
        top: 0;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.5);
    }
    
    .real-menu {
        position: fixed;
        top: 0;
        left: -320px;
        z-index: 25;
        width: 320px;
        height: 100%;
        /* padding: 0.5rem 1rem; */
        padding: 1px;
        box-shadow: 0 6px 12px rgba(107, 82, 82, 0.3);
        background-color: white;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        transition: ease 0.4s all;
    }
    
    body.menu-open #body-overlay {
        display: block;
    }
    
    body.menu-open .real-menu {
        left: 0;
    }
    /*lg-screen header position */
    
    .fixed-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }
    /*sm-screen header position */
    
    .small-screen-fixed-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }
    
    @media only screen and (max-width:800px) {
        /* md and lg screen logo height*/
        .logo-height {
            height: auto;
            width: 100%;
            object-fit: contain;
        }
    }
    /* sm screen bottom sticky nav bar*/
    
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 5;
        will-change: transform;
        transform: translateZ(0);
        display: flex;
        height: 50px;
        box-shadow: 0 -2px 5px -2px #333;
        background-color: #fff;
    }
    
    .mobile-bottom-nav__item {
        flex-grow: 1;
        text-align: center;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        stroke: #000000;
    }
    
    .mobile-bottom-nav__item--active {
        color: red;
        stroke: #ff2825;
    }
    
    .mobile-bottom-nav__item-content {
        display: flex;
        flex-direction: column;
    }
    
    @media only screen and (max-width:374px) {
        .text-size {
            font-size: 12px;
        }
    }
    /* #Mega Menu Styles
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
    
    .mega-menu {
        display: none;
        left: 0;
        position: absolute;
        text-align: left;
        width: 100%;
    }
    /* #hoverable Class Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
    
    .hoverable {
        position: static;
    }
    
    .hoverable>a:after {
        /* content: "\25BC"; */
        font-size: 10px;
        padding-left: 6px;
        position: relative;
        top: -1px;
    }
    
    .hoverable:hover .mega-menu {
        display: block;
    }
    /* #toggle Class Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
    
    .toggleable>label:after {
        /* content: "\25BC"; */
        font-size: 10px;
        padding-left: 6px;
        position: relative;
        top: -1px;
    }
    
    .toggle-input {
        display: none;
    }
    
    .toggle-input:not(checked)~.mega-menu {
        display: none;
    }
    
    .toggle-input:checked~.mega-menu {
        display: block;
    }
    
    .toggle-input:checked+label {
        color: white;
        background: #2c5282;
        /*@apply bg-blue-800 */
    }
    
    .toggle-input:checked~label:after {
        content: "\25B2";
        font-size: 10px;
        padding-left: 6px;
        position: relative;
        top: -1px;
    }