/* ==========================================================
   PREMIUM NAVBAR V4
   SaiRam Herbals
========================================================== */

:root{

    --primary:#2E7D32;
    --primary-light:#43A047;
    --secondary:#C8A45D;

    --text:#222;
    --text-light:#666;

    --white:#fff;

    --border:#e9ecef;

    --bg:#f8faf8;

    --radius:16px;

    --transition:.3s ease;

    --shadow:
        0 10px 30px rgba(0,0,0,.08);

}

/* ==========================================================
    HEADER
========================================================== */

.header-wrapper{

    position:sticky;

    top:0;

    z-index:1050;

    width:100%;

}

/* ==========================================================
    NAVBAR
========================================================== */

.premium-navbar{

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(0,0,0,.05);

    box-shadow:var(--shadow);

    min-height:78px;

    padding:10px 0;

    transition:var(--transition);

}

/* ==========================================================
    CONTAINER
========================================================== */

.premium-navbar .container-xl{

    display:flex;

    align-items:center;

}

/* ==========================================================
    BRAND
========================================================== */

.brand{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

}

.brand-logo{

    width:48px;

    height:48px;

    object-fit:contain;

}

.brand-text{

    height:42px;

    width:auto;

    object-fit:contain;

}

/* ==========================================================
    DESKTOP MENU
========================================================== */

.premium-nav{

    gap:12px;

}

.premium-nav .nav-link{

    position:relative;

    color:var(--text);

    font-size:15px;

    font-weight:600;

    padding:12px 18px !important;

    transition:var(--transition);

}

.premium-nav .nav-link:hover{

    color:var(--primary);

}

.premium-nav .nav-link.active{

    color:var(--primary);

}

/* underline animation */

.premium-nav .nav-link::after{

    content:"";

    position:absolute;

    left:18px;

    bottom:6px;

    width:0;

    height:2px;

    background:var(--primary);

    border-radius:50px;

    transition:.25s;

}

.premium-nav .nav-link:hover::after,

.premium-nav .nav-link.active::after{

    width:calc(100% - 36px);

}

/* ==========================================================
    RIGHT ACTIONS
========================================================== */

.desktop-actions{

    gap:12px;

}

/* ==========================================================
    ICON BUTTON
========================================================== */

.icon-btn{

    width:44px;

    height:44px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    background:#fff;

    border:1px solid var(--border);

    color:#222;

    position:relative;

    transition:var(--transition);

}

.icon-btn:hover{

    color:#fff;

    background:var(--primary);

    border-color:var(--primary);

    transform:translateY(-2px);

}

.icon-btn i{

    font-size:22px;

}

/* ==========================================================
    BADGE
========================================================== */

.badge-count{

    position:absolute;

    top:-5px;

    right:-4px;

    min-width:20px;

    height:20px;

    border-radius:50px;

    background:#e53935;

    color:#fff;

    font-size:11px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    padding:0 5px;

}

/* ==========================================================
    MOBILE BUTTON
========================================================== */

.navbar-toggler{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

}

.navbar-toggler i{

    font-size:30px;

    color:var(--text);

}

.navbar-toggler:focus{

    box-shadow:none;

}

/* ==========================================================
    USER DROPDOWN
========================================================== */

.user-dropdown{

    display:flex;
    align-items:center;
    gap:10px;

    background:#fff;
    border:1px solid var(--border);

    border-radius:50px;

    padding:8px 10px;

    transition:var(--transition);

}

.user-dropdown:hover{

    border-color:var(--primary);
    box-shadow:0 8px 20px rgba(46,125,50,.15);

}

.user-dropdown::after{

    margin-left:8px;

}

.user-avatar{

    width:40px;
    height:40px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-weight:700;
    font-size:15px;

}

.user-name{

    color:var(--text);

    font-weight:600;

    max-width:110px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

}

/* ==========================================================
    USER MENU
========================================================== */

.user-menu{

    border:none;

    border-radius:18px;

    padding:10px;

    min-width:240px;

    box-shadow:0 20px 50px rgba(0,0,0,.12);

}

.user-menu .dropdown-header{

    color:var(--primary);

    font-weight:700;

    margin-bottom:8px;

}

.user-menu .dropdown-item{

    display:flex;

    align-items:center;

    gap:12px;

    border-radius:12px;

    padding:11px 14px;

    transition:.25s;

}

.user-menu .dropdown-item i{

    font-size:20px;

}

.user-menu .dropdown-item:hover{

    background:#f5faf5;

    color:var(--primary);

}

/* ==========================================================
    GUEST BUTTONS
========================================================== */

.guest-actions{

    display:flex;

    gap:10px;

}

.guest-actions .btn{

    border-radius:50px;

    padding:10px 20px;

    font-weight:600;

}

/* ==========================================================
    MEGA DROPDOWN
========================================================== */

.mega-dropdown{

    border:none;

    border-radius:18px;

    min-width:290px;

    padding:12px;

    box-shadow:0 20px 60px rgba(0,0,0,.10);

    animation:dropdownFade .25s ease;

}

.mega-dropdown .dropdown-item{

    border-radius:12px;

    padding:12px 14px;

    display:flex;

    align-items:center;

    transition:.25s;

}

.mega-dropdown .dropdown-item i{

    font-size:20px;

    color:var(--primary);

}

.mega-dropdown .dropdown-item:hover{

    background:#f3faf3;

    color:var(--primary);

    transform:translateX(5px);

}

/* ==========================================================
    MOBILE DRAWER
========================================================== */

.mobile-drawer{

    width:330px;
    z-index: 1000000;

}

.mobile-drawer .offcanvas-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 20px;

    border-bottom:1px solid var(--border);

}

/*====================================
        MOBILE DRAWER BRAND
====================================*/

.drawer-brand{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    flex:1;

}

.drawer-logo-icon{

    width:52px;

    height:52px;

    object-fit:contain;

    flex-shrink:0;

}

.drawer-logo-text{

    height:38px;

    width:auto;

    max-width:170px;

    object-fit:contain;

}

.drawer-user{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

}

.drawer-avatar{

    width:52px;

    height:52px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    font-weight:700;

}

.drawer-links{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.drawer-links a{

    text-decoration:none;

    color:var(--text);

    padding:12px;

    border-radius:12px;

    transition:.25s;

}

.drawer-links a:hover{

    background:#f5faf5;

    color:var(--primary);

}

.drawer-links i{

    margin-right:10px;

    font-size:20px;

}

.drawer-logout{

    width:100%;

    border:none;

    background:#ffecec;

    color:#d32f2f;

    border-radius:12px;

    padding:12px;

    text-align:left;

    transition:.25s;

}

.drawer-logout:hover{

    background:#ffdcdc;

}

/* ==========================================================
    CATEGORY ACCORDION
========================================================== */

.drawer-category-btn{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border:none;

    background:none;

}

.drawer-submenu{

    list-style:none;

    padding-left:18px;

    margin-top:10px;

}

.drawer-submenu li{

    margin:8px 0;

}

.drawer-submenu a{

    color:var(--text-light);

    text-decoration:none;

    transition:.25s;

}

.drawer-submenu a:hover{

    color:var(--primary);

}

/* ==========================================================
    MOBILE ACTIONS
========================================================== */

.mobile-actions{

    display:flex;

    align-items:center;

    gap:10px;

}

/* ==========================================================
    ANIMATION
========================================================== */

@keyframes dropdownFade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
    RESPONSIVE
========================================================== */

@media(max-width:991px){

    .premium-navbar{

        min-height:72px;

    }

    .brand-text{

        height:34px;

    }

    .brand-logo{

        width:42px;
        height:42px;

    }

}

@media(max-width:576px){

    .premium-navbar{
        min-height:68px;
    }

    .premium-navbar .container-xl{
        min-height:68px;
        padding:0 12px;
    }

    .brand{
        gap:6px;
    }

    .brand-logo{
        width:34px;
        height:34px;
        object-fit:contain;
        flex-shrink:0;
    }

    .brand-text{
        display:block !important;
        width:auto;
        height:20px;
        max-width:105px;
        object-fit:contain;
    }

    .mobile-actions{
        gap:6px;
    }

    .icon-btn{
        width:36px;
        height:36px;
    }

    .icon-btn i{
        font-size:20px;
    }

    .navbar-toggler{
        width:36px;
        height:36px;
    }

    .navbar-toggler i{
        font-size:26px;
    }
}

/* ======================================
   Navbar Scroll Effect
====================================== */

.navbar-scrolled{

    background:rgba(255,255,255,.98);

    backdrop-filter:blur(24px);

    box-shadow:
        0 15px 45px rgba(0,0,0,.12);

}

.hero-section{
    margin-top:0;
    padding-top:0;
}

main{
    margin-top:0;
    padding-top:0;
}

.premium-navbar{
    min-height:88px;
    padding:0;
}

.premium-navbar .container-xl{
    min-height:88px;
    display:flex;
    align-items:center;
}

.brand-logo{
    width:58px;
    height:58px;
}

.brand-text{
    height:50px;
}

.premium-nav{

    height:88px;

    display:flex;

    align-items:center;

}

.guest-actions .btn{

    height:46px;

    padding:0 24px;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

}

.guest-actions .btn-success{

    background:#2E7D32;

    border:none;

}

.guest-actions .btn-success:hover{

    transform:translateY(-2px);

}

.guest-actions .btn-outline-success:hover{

    background:#2E7D32;

}

.guest-actions .btn{

    height:46px;

    padding:0 24px;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

}

.guest-actions .btn-success{

    background:#2E7D32;

    border:none;

}

.guest-actions .btn-success:hover{

    transform:translateY(-2px);

}

.guest-actions .btn-outline-success:hover{

    background:#2E7D32;

}

/* ==========================================
   MOBILE DRAWER SEARCH
========================================== */

.drawer-search {
    margin-bottom: 20px;
}


.drawer-search-box {
    width: 100%;
    height: 52px;

    display: flex;
    align-items: center;

    padding: 0 14px;

    border: 1px solid #dfe8e1;
    border-radius: 14px;

    background: #f8faf8;

    color: #7d8981;

    font-family: inherit;

    cursor: pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.drawer-search-box > i:first-child {
    color: #3c8145;
    font-size: 21px;
}


.drawer-search-box span {
    flex: 1;

    margin-left: 11px;

    text-align: left;

    color: #8c9790;

    font-size: 12px;
}


.drawer-search-box .search-arrow {
    color: #9ba69e;

    font-size: 19px;

    transition: transform .2s ease;
}


.drawer-search-box:hover {
    border-color: #a9c9ad;

    background: #ffffff;

    box-shadow:
        0 6px 18px rgba(46, 125, 50, .08);

    transform: translateY(-1px);
}


.drawer-search-box:hover .search-arrow {
    color: #3c8145;

    transform: translateX(3px);
}


.drawer-search-box:active {
    transform: scale(.99);
}