/*=========================================================
                    RK DESKTOP HEADER
=========================================================*/

.rk-header{
    width:100%;
    background:#ffffff;
    position:sticky;
    top:0;
    left:0;
    z-index:99999;
    border-bottom:1px solid #ececec;
    box-shadow:0 4px 18px rgba(0,0,0,.06);
}

.rk-header *{
    box-sizing:border-box;
}

.rk-header .container{
    max-width:1320px;
    width:100%;
    margin:auto;
    padding:0 15px;
}

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

.rk-header-inner{

    display:grid;

    grid-template-columns:230px 1fr 170px;

    align-items:center;

    min-height:90px;

}

/*=========================================================
                        LOGO
=========================================================*/

.rk-logo{

    display:flex;

    align-items:center;

    justify-content:flex-start;

}

.rk-logo a{

    display:inline-flex;

}

.rk-logo img{

    height:70px;

    width:auto;

    display:block;

}

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

.rk-navigation{

    display:flex;

    justify-content:center;

    align-items:center;

}

.rk-nav{

    margin:0;

    padding:0;

    list-style:none;

    display:flex;

    align-items:center;

}

.rk-nav>li{

    position:relative;

}

.rk-nav>li>a{

    display:flex;

    align-items:center;

    gap:6px;

    padding:34px 18px;

    color:#222;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

    position:relative;

    white-space:nowrap;

}

.rk-nav>li>a:hover{

    color:#0c3f01;

}

.rk-nav>li>a.active{

    color:#0c3f01;

}

/* Active Line */

.rk-nav>li>a::after{

    content:'';

    position:absolute;

    left:18px;

    bottom:18px;

    width:0;

    height:3px;

    background:#0c3f01;

    border-radius:50px;

    transition:.3s;

}

.rk-nav>li>a:hover::after,

.rk-nav>li>a.active::after{

    width:calc(100% - 36px);

}

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

.rk-actions{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:14px;

}

.rk-action-btn{

    width:48px;

    height:48px;

    border:none;

    outline:none;

    border-radius:50%;

    background:#f5f5f5;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#222;

    text-decoration:none;

    cursor:pointer;

    transition:.3s;

    position:relative;

    font-size:18px;

}

.rk-action-btn:hover{

    background:#0c3f01;

    color:#fff;

}

.rk-action-btn i{

    pointer-events:none;

}

/*=========================================================
                        CART
=========================================================*/

.rk-cart-btn{

    position:relative;

}

.rk-cart-btn span{

    position:absolute;

    top:-4px;

    right:-4px;

    width:20px;

    height:20px;

    border-radius:50%;

    background:#ff5a00;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:10px;

    font-weight:700;

}

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

.rk-dropdown{

    position:relative;

}

.rk-dropdown-menu{

    position:absolute;

    top:100%;

    left:0;

    min-width:260px;

    background:#fff;

    margin:0;

    padding:10px 0;

    list-style:none;

    border-radius:10px;

    border:1px solid #eee;

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

    display:none;

    z-index:9999;

}

.rk-dropdown:hover .rk-dropdown-menu{

    display:block;

}

.rk-dropdown-menu li{

    display:block;

}

.rk-dropdown-menu li a{

    display:block;

    padding:12px 20px;

    color:#333;

    text-decoration:none;

    font-size:14px;

    transition:.3s;

}

.rk-dropdown-menu li a:hover{

    background:#0c3f01;

    color:#fff;

}
/*=========================================================
                RK MOBILE HEADER
=========================================================*/

.rk-mobile-header{
    display:none;
}

@media (max-width:991.98px){

/* Hide Desktop */

.rk-desktop-header{
    display:none !important;
}

/*=========================
        Mobile Header
=========================*/

.rk-mobile-header{

    display:block !important;

    position:sticky !important;

    top:0 !important;

    left:0 !important;

    width:100% !important;

    background:#ffffff !important;

    border-bottom:1px solid #e8e8e8 !important;

    box-shadow:0 3px 12px rgba(0,0,0,.08) !important;

    z-index:99999 !important;

}

.rk-mobile-header .container-fluid{

    padding-left:15px !important;

    padding-right:15px !important;

}

/*=========================
        Mobile Row
=========================*/

.rk-mobile-inner{

    display:grid !important;

    grid-template-columns:50px 1fr 90px !important;

    align-items:center !important;

    height:72px !important;

}

/*=========================
        Left Menu
=========================*/

.rk-mobile-menu-btn{

    width:42px !important;

    height:42px !important;

    border:none !important;

    background:transparent !important;

    color:#222 !important;

    font-size:24px !important;

    padding:0 !important;

    cursor:pointer !important;

    outline:none !important;

    box-shadow:none !important;

}

.rk-mobile-menu-btn:hover{

    color:#0c3f01 !important;

}

/*=========================
        Logo
=========================*/

.rk-mobile-logo{

    display:flex !important;

    justify-content:center !important;

    align-items:center !important;

}

.rk-mobile-logo img{

    height:46px !important;

    width:auto !important;

    display:block !important;

}

/*=========================
        Right Icons
=========================*/

.rk-mobile-actions{

    display:flex !important;

    justify-content:flex-end !important;

    align-items:center !important;

    gap:12px !important;

}

.rk-mobile-action{

    width:40px !important;

    height:40px !important;

    border:none !important;

    background:transparent !important;

    color:#222 !important;

    text-decoration:none !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    position:relative !important;

    font-size:20px !important;

    cursor:pointer !important;

}

.rk-mobile-action:hover{

    color:#0c3f01 !important;

}

/*=========================
        Cart Badge
=========================*/

.rk-mobile-cart span{

    position:absolute !important;

    top:-2px !important;

    right:-2px !important;

    width:18px !important;

    height:18px !important;

    border-radius:50% !important;

    background:#ff5a00 !important;

    color:#fff !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    font-size:10px !important;

    font-weight:700 !important;

}

/* Remove Bootstrap Button Focus */

.rk-mobile-action:focus,
.rk-mobile-menu-btn:focus{

    outline:none !important;

    box-shadow:none !important;

}

}
/*=========================================================
                RK OFFCANVAS
=========================================================*/

#rkMobileMenu{

    width:320px !important;

    border:none !important;

    z-index:999999 !important;

}

/*=========================
        Header
=========================*/

#rkMobileMenu .offcanvas-header{

    height:75px !important;

    background:#0c3f01 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:space-between !important;

    padding:0 20px !important;

    border-bottom:none !important;

}

.rk-mobile-offcanvas-logo{

    height:46px !important;

    width:auto !important;

    display:block !important;

}

/* Close Button */

#rkMobileMenu .btn-close{

    filter:invert(1) !important;

    opacity:1 !important;

    box-shadow:none !important;

}

#rkMobileMenu .btn-close:focus{

    box-shadow:none !important;

}

/*=========================
        Body
=========================*/

#rkMobileMenu .offcanvas-body{

    padding:0 !important;

    background:#ffffff !important;

}

/*=========================
        Menu
=========================*/

.rk-mobile-menu{

    margin:0 !important;

    padding:0 !important;

    list-style:none !important;

}

.rk-mobile-menu>li{

    border-bottom:1px solid #f2f2f2 !important;

}

.rk-mobile-menu>li>a{

    display:flex !important;

    align-items:center !important;

    justify-content:space-between !important;

    padding:16px 20px !important;

    color:#222 !important;

    text-decoration:none !important;

    font-size:15px !important;

    font-weight:500 !important;

    transition:.3s !important;

}

.rk-mobile-menu>li>a:hover{

    background:#0c3f01 !important;

    color:#ffffff !important;

}

/*=========================
    Category Button
=========================*/

.rk-category-toggle{

    width:100% !important;

    background:#ffffff !important;

    border:none !important;

    display:flex !important;

    align-items:center !important;

    justify-content:space-between !important;

    padding:16px 20px !important;

    color:#222 !important;

    font-size:15px !important;

    font-weight:500 !important;

    cursor:pointer !important;

    transition:.3s !important;

}

.rk-category-toggle:hover{

    background:#0c3f01 !important;

    color:#fff !important;

}

/*=========================
    Category Submenu
=========================*/

.rk-mobile-submenu{

    display:none;

    margin:0 !important;

    padding:0 !important;

    list-style:none !important;

    background:#f9f9f9 !important;

}

.rk-mobile-submenu li{

    border-top:1px solid #ececec !important;

}

.rk-mobile-submenu li a{

    display:block !important;

    padding:14px 40px !important;

    color:#444 !important;

    text-decoration:none !important;

    font-size:14px !important;

    transition:.3s !important;

}

.rk-mobile-submenu li a:hover{

    background:#0c3f01 !important;

    color:#ffffff !important;

}

/*=========================
    Active Submenu
=========================*/

.rk-mobile-submenu.show{

    display:block !important;

}
/*=========================================================
                    RK SEARCH MODAL
=========================================================*/

.rk-search-modal{

    border:none !important;

    border-radius:15px !important;

    overflow:hidden !important;

    box-shadow:0 20px 60px rgba(0,0,0,.18) !important;

}

/* Header */

.rk-search-modal .modal-header{

    background:#0c3f01 !important;

    color:#ffffff !important;

    padding:18px 25px !important;

    border:none !important;

}

.rk-search-modal .modal-header h5{

    margin:0 !important;

    display:flex !important;

    align-items:center !important;

    gap:10px !important;

    font-size:20px !important;

    font-weight:600 !important;

}

.rk-search-modal .btn-close{

    filter:invert(1) !important;

    opacity:1 !important;

    box-shadow:none !important;

}

.rk-search-modal .btn-close:focus{

    box-shadow:none !important;

}

/* Body */

.rk-search-modal .modal-body{

    padding:30px !important;

    background:#ffffff !important;

}

/* Search Box */

.rk-search-box{

    display:flex !important;

    gap:12px !important;

}

.rk-search-box input{

    flex:1 !important;

    height:52px !important;

    border:2px solid #e6e6e6 !important;

    border-radius:8px !important;

    padding:0 18px !important;

    outline:none !important;

    font-size:15px !important;

    transition:.3s !important;

}

.rk-search-box input:focus{

    border-color:#0c3f01 !important;

}

.rk-search-box button{

    width:140px !important;

    border:none !important;

    border-radius:8px !important;

    background:#0c3f01 !important;

    color:#ffffff !important;

    font-weight:600 !important;

    transition:.3s !important;

}

.rk-search-box button:hover{

    background:#167108 !important;

}

/* Mobile */

@media(max-width:576px){

.rk-search-modal .modal-body{

    padding:20px !important;

}

.rk-search-box{

    flex-direction:column !important;

}

.rk-search-box button{

    width:100% !important;

    height:50px !important;

}

}