/* Header 
--------------------------------------------- */

/* Desktop Header */

header {
    padding: 13px 0 0px;
    display: block;
}
    /*BY A Start*/
.removeHeaderLine header {
    padding: 13px 0px 13px;
}
    .removeHeaderLine header .mobileHeaderBorder {
        display:none;
    }
    /*BY A End*/
    header #scrollingSVG {
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        margin: 0 auto;
        width: 100%;
        padding: 0 84px;
    }
header .container {
    position:relative;
}
.readTop {
    position: absolute;
    bottom: 0px;
    left: 11px;    
    
}

.desktopMenu {
    display: flex;
    align-items: center;
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
}

.menuRightSide {
    display: flex;
    align-items: center;
    width: 48px;
}

.desktopLogo {
    margin-right: 0px;
}

.desktopMenuList ul {
    display: flex;
    /* margin-right: 237px; */
  /*  flex-wrap: wrap;*/
}


    .desktopMenuList ul li {
        list-style: none;
        margin-right: 32px;
    }

        .desktopMenuList ul li:last-child {
            margin-right: 0;
        }

        .desktopMenuList ul li a {
            text-decoration: none;
            font-size: 20px;
            line-height: 36px;
            color: var(--menuColor);
            font-family: 'AkhandGujarati-Black';
            transition:0.5s all;
        }
            .desktopMenuList ul li a:hover {
                color: var(--filter-active);
            }

            .headerSearch {
                margin-right: 0px;
                position: relative;
                width: calc(100% - 48px);
                padding-right: 15px;
            }

    .headerSearch img {
        position: absolute;
        left: 18px;
        top: 25px;
        cursor:pointer;
        width: 19px;
    }
                .headerSearch input:hover {
                    background: #F2D8C5;
                }
                .headerSearch .formWrapper .autoIcon {
                    display: inline;
                }

    .headerSearch .formWrapper .activeIcon {
        display: none;
    }

    .headerSearch .formWrapper input[type="text"]:focus + .autoIcon {
        display: none;
    }

    .headerSearch .formWrapper input[type="text"]:focus ~ .activeIcon {
        display: inline !important;
    }

.headerLoginBtn.userloginData .linkBtn {
    position: relative;
    left: 0;
    top: 0;
}

.mobileNav .btnCenter.userloginData {
   /* display: none;*/
}
.mobileNav .login img,
.mobileNav .login {
    width: 100%;
}
.mobileNav .linkBtn {
    position:initial;
}
.mobileNav .btnCenter.userloginData.userhaveLogin {
    display: block;
}
.mobileNav .userloginData {
    display: block;
    margin-bottom:20px;
}

.mobileNav .btnCenter.userloginData.userhaveLogin > a {
    display: none
}
.mobileNav .userNamePhoto.clearfix img {
    max-width: 50px;
    width: 50px;
    border-radius: 50%;
    margin: 0
}

.mobileNav .userWorldLink a {
    display: block;
    font-size: 16px;
    line-height: 27px;
    color: #210000;
    font-family: 'AkhandGujarati-Extrabold', 'latoxbold';
    text-align: left;
    margin-bottom: 8px;
    position: relative;
}

    .mobileNav .userWorldLink a:before {
        position: absolute;
        content: '';
        width: 100%;
        height: 1px;
        background: #EED7C6;
        bottom: -3px;
    }

        .mobileNav .userWorldLink a:last-child:before{
            display:none;
        }

        .mobileNav .userWorldLink a:last-child {
            margin-bottom: 0;
        }
.mobileNav .userNamePhoto.clearfix {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 10px;
    border-radius: 15px;
    background: #FFECDE;
    justify-content: flex-end;
    position:relative;
    z-index:1;
}
    .mobileNav .userNamePhoto.clearfix:after {
        content: "";
        background: url(../images/down_arrow.png) no-repeat center center;
        width:24px;
        height:24px;
        background-size:cover;
        position:absolute;
        right:14px;
        top:50%;
        transform:translateY(-50%);
    }

    .mobileNav .userNamePhoto.clearfix h5 {
        font-size: 16px;
        line-height: 30px;
        color: #210000;
        margin-left: 15px;
        font-family: latoxbold;
    }
.mobileNav .userDetails.clearfix {
    background: #EED7C6;
    border-radius: 15px;
    margin-top: 16px;
    padding: 10px;
}
.mobileNavBottom .userDetails .userWorldLink.active {
    padding-bottom: 30px;
}
.headerSearch input {
    width: 100%;
    height: 56px;
    border-radius: 90px;
    background: #F8E2D2;
    padding: 0 50px;
    margin: 0 0px;
    box-sizing: border-box;
    font-family: latoxregular;
    font-size: 16px;
    transition:all 0.3s ease-in-out;
    margin-top: 8px;
}

.mobileNav .userWorldLink {
    margin-top: 8px;
    background: #FFECDE;
    border-radius: 15px;
    padding: 15px;
    display: none;
}

.menuLeftSide {
    display: flex;
    align-items: center;
    /* flex: 0 0 50%; */
    flex-wrap: wrap;
    /* max-width: 100%; */
    /* width: 100%; */
    width: calc(100% - 50px);
    padding-left: 15px;
    /* padding-right: 15px; */
}

.moreFromRekhta {
    margin-right: 0;
}

.login {
    width: 180px;
}

.mobileNavFlex {
    display: flex;
    align-items: center;
}

header {
    display: block;
    position: sticky;
}

.desktopMenuList {
    display: none;
}

.userloginData {
    display: none;
}

.mobileNav {
    display: block;
}

    .mobileNav .mobileNavBottom .socialLink li a img {
        transition: all 0.3s ease-in-out;
        opacity:1
    }

        .mobileNav .mobileNavBottom .socialLink li a img.hover,
        .mobileNav .mobileNavBottom .socialLink li a img.clicked {
            opacity: 0;
            position: absolute;
            top: 0;
        }

        .mobileNav .mobileNavBottom .socialLink li a:hover img.hover {
            opacity: 1;
        }

    .mobileNav .mobileNavBottom .socialLink li a:active img.default,
    .mobileNav .mobileNavBottom .socialLink li a:active img.hover,
    .mobileNav .mobileNavBottom .socialLink li a:hover img.default,
    .mobileNav .mobileNavBottom .socialLink li a:hover img.clicked {
        opacity: 0;
    }

        .mobileNav .mobileNavBottom .socialLink li a:active img.clicked {
            opacity: 1;
        }

/*.mobileNav .mobileNavBottom .socialLink li a {
    position: relative;
}

.mobileNav .mobileNavBottom .socialLink li a img.hover {
    position: absolute;
    top: 0;
}*/

.mobileNav {
    top: 0;
    z-index: 999999;
    background: var(--body-color);
    position: absolute;
    width: 100%;
}
    /*BY A Start*/
    .mobileNav .navigation {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .mobileNav .socialLink ul {
        justify-content:center;
    }
    .mobileNav .socialLink ul li {
        /*flex: 0 0 48px;*/
    }
    .mobileNav .headerLoginBtn .linkBtn {
        display:none;
    }
    /*BY A End*/
    .desktopLogo img,
    .headerBtn img {
        display: block;
        width: 48px;
    }

.menuToggle img {
    max-width: 48px;
    height: auto;
}



/* Mobile navigation */

.navigation {
    position: absolute;
    top: 0;
    background: #FFECDE;
    width: 100%;
    height: 100vh;
    padding: 50px 24px 24px;
    left: 0px;
    transition: 0.5s;
    opacity: 0;
    visibility: hidden;
}
.mobileNavBottom .userDetails .userWorldLink {
    position: absolute;
    bottom: 60px;
    left: 0px;
    width: 100%;
    padding: 10px;
    background: #EED7C6;
    padding-bottom:30px;
}
    .mobileNavBottom .userDetails .userWorldLink .userWorldLinkInner {
        padding: 15px;
        background: #FFECDE;
        border-radius: 15px;
    }
.mobileInnerLogo {
    text-align: center;
    position: relative;
}
.mobileNavTop .closeIcon {
    width: 48px;
    top:14px;
    right:24px;
}

.closeIcon {
    position: absolute;
    right: 0;
    width: 31px;
    top: -30px;
}
.navigation .footerWidget h3 {
    display:none;
}

.navigation img {
    display: block;
    margin: 0 auto;
}

.navigation .footerWidget h3 {
    color: var(--btnColor);
    font-size: 28px;
    line-height: normal;
}

.navigation .footerWidget ul li a {
    font-size: 24px;
    line-height:40px;
    line-height: normal;
}

.navigation .footerWidget {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 20px;
}


.secondMenuSpace {
    padding-left: 2rem;
}

.headerLoginBtn {
    /*margin-top: 52px;*/
    margin-top:0px;
    margin-bottom: 20px;
}
.mobileNavBottom {
    margin-bottom:60px;
    position:relative;
    bottom:0px;
}
.mobileNavTop {
    height: 100%;
    padding-bottom: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.navigation.showHeader {
    left: 0;
    overflow-y:auto;
    opacity:1;
    visibility:visible;
    transition:0.5s all;
}

.moreFromRekhta {
    display: none
}
/* End Mobile navigation */



@media screen and (min-width: 992px) {
    header {
        display: block;
        position: sticky;
        top: 0;
        z-index: 999999;
        background: var(--body-color);
        z-index: 9999999;
    }


    .headerSearch {
        margin-right: 120px;
        width:auto;
        /* flex: 0 0 65%; */
    }

        .headerSearch input {
            width: 251px;
            height: 53px;
            margin: 0;
            padding: 0 60px;
        }

    .desktopLogo img,
    .headerBtn img {
        display: block;
        width: auto;
    }

    .moreFromRekhta {
        margin-right: 24px;
    }
        .moreFromRekhta img {
            transition: all 0.3s ease-in-out;
        }
        .moreFromRekhta:hover img {
            filter: brightness(0.9);
        }

        .desktopLogo {
            /* margin-right: 85px; */
            flex: 0 0 30%;
            margin-right: 7%;
        }
        .desktopLogo img {
            width:100%;
        }
        .desktopMenuList {
            max-width: 83%;
            flex: 0 0 83%;
            display: inline-block;
            margin-right: 237px;
        }

    .userloginData, .moreFromRekhta {
        display: block;
    }

    .menuRightSide {
        width: calc(100% - 823px);
    }

    .mobileMenuButton {
        display: none;
    }

    .desktopMenuList ul {
        display: flex;
        margin-right:0px;
      
    }

    .mobileNav {
        display: none;
    }

    .headerBtn {
        display: flex;
        align-items: center;
        /* flex: 0 0 45%; */
    }

    .btnCenter img {
        width: 151px;
        height: auto;
    }

    .linkBtn {
        font-size: 24px;
        line-height: 34px;
        top: 41%;
    }
    .login.linkBtn {
        top: 48%
    }
    .headerBtn .deskHide {
        display:none;
    }
    .headerSearch img {
        position: absolute;
        left: 24px;
        top: 16px;
        width: 20px;
    }

    .menuLeftSide{
        max-width:100%;
        width:auto;
    }

    .readTop {
        bottom:-34px;
    }
    /*Header toggle menu start*/
    .headerBtn {
        position: relative;
    }
    .headerBtn .menu-dropdown {
        position: absolute;
        top: 77px;
        left: -71px;
        z-index: 9;
    }
    .headerBtn .menu-dropdown ul li {
        list-style: none;
        padding: 12px;
        border-bottom: 1px solid #E8CCB7;
        transition:all 0.3s ease-in-out;
    }
        .headerBtn .menu-dropdown ul li:hover {
            background: #DEBAA0;
        }
        .headerBtn .menu-dropdown ul li:first-child {
            border-top-left-radius: 21px;
            border-top-right-radius: 21px;
        }
    .headerBtn .menu-dropdown ul li:last-child {
        border-bottom-left-radius: 21px;
        border-bottom-right-radius: 21px;
    }

    .headerBtn .menu-dropdown ul li a {
        text-decoration: none;
        display: flex;
        align-items: center;
        color: #000000;
        font-size: 18px;
        line-height: 22px;
        font-family: 'AkhandGujarati-Black';
    }
    .headerBtn .menu-dropdown ul li a img {
        margin-right: 12px;
        max-width: 36px;
    }
    .headerBtn .menu-dropdown ul li:last-child {
        border-bottom: none;
    }
    .headerBtn .menu-dropdown ul {
        background: #EED7C6;
        border-radius: 21px;
        min-width: 200px;
        position: relative;
    }
    .headerBtn .menu-dropdown ul::before {
        position: absolute;
        /*content: url(../images/menu-arrow.svg);*/
        margin: 2rem;
        top: -47px;
        left: 58px;
    }
    /*Header toggle menu end*/

    .MoreMenuBtn {
        position: relative;
        
    }
    .subMenu {
        position: absolute;
        visibility: hidden;
        opacity: 0;
        background-color: var(--body-color);
        -moz-box-shadow: 0 6px 6px rgba(0, 0, 0, .14);
        -webkit-box-shadow: 0 6px 6px rgba(0, 0, 0, .14);
        box-shadow: 0 6px 6px rgba(0, 0, 0, .14);
        -webkit-transition: all .3s;
        transition: all .3s;
        z-index: 1;
        padding-top: 8px;
        left: 0;
        top: 30px;
    }
    .subMenu li a {
        padding: 12px 24px;
        white-space: nowrap;
        display: block;
        margin: 0;
        font-size: 14px;
    }
    li.MoreMenuBtn{
        position:relative;
    }
    .MoreMenuBtn ul.subMenu {
        display: block;
        position: absolute;
        left: -50px;
        top: 60px;
        background: #EED7C6;
        border-radius:20px;
    }
    .MoreMenuBtn:hover .subMenu {
        visibility: visible;
        opacity: 1;
    }
}
@media screen and (max-width: 992px) {
    header {
        top: 0px;
        z-index: 999;
        background: var(--body-color);
        max-width:100%;
    }
    .poetList .nextPoetIndex,
    .poetList .prevPoetIndex {
        display:none;
    }
    .removeHeaderLine header {
        /*box-shadow: 0px 1px 6px rgb(203, 203, 203, 0.5);*/
    }
    header.removezindex {
        z-index:0;
    }
    .mobileNavBottom .mobHide {
        display: none;
    }
   
}



