/*==================================================
                GOOGLE FONT
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f8f9fa;
    color:#333;
    overflow-x:hidden;
}

a{
    text-decoration:none;
}

img{
    max-width:100%;
    display:block;
}

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

.top-header{

    background:#0b8a3e;

    color:#fff;

    font-size:12px;

    padding:10px 0;

}

.top-left,
.top-right{

    display:flex;

    align-items:center;

    gap:25px;

}

.top-right{

    justify-content:flex-end;

}

.top-header a{

    color:#fff;

    transition:.3s;

    font-weight:500;

}

.top-header a:hover{

    color:#ffd54f;

}

.top-header i{

    margin-right:6px;

    color:#ffd54f;

}

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

.main-header{

    background:#fff;

    padding:20px 0;

    box-shadow:0 8px 30px rgba(0,0,0,.06);

    position:relative;

    z-index:999;

}

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

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    height:85px;

    transition:.3s;

}

.logo img:hover{

    transform:scale(1.05);

}

/*==================================================
                SEARCH BOX
==================================================*/

.search-box{

    display:flex;

    width:100%;

    height:56px;

    border:2px solid #0b8a3e;

    border-radius:12px;

    overflow:hidden;

    background:#fff;

    transition:.35s;

}

.search-box:hover{

    box-shadow:0 12px 35px rgba(11,138,62,.18);

}

.search-box input{

    flex:1;

    border:none;

    outline:none;

    padding:0 22px;

    font-size:15px;

}

.search-box input::placeholder{

    color:#999;

}

.search-box button{

    width:70px;

    border:none;

    background:#0b8a3e;

    color:#fff;

    font-size:22px;

    transition:.35s;

}

.search-box button:hover{

    background:#087534;

}

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

.header-icons{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:25px;

}

.header-icons>a,
.account-btn{

    position:relative;

    display:flex;

    align-items:center;

    gap:8px;

    color:#333;

    font-size:15px;

    font-weight:600;

    transition:.3s;

}

.header-icons>a:hover,
.account-btn:hover{

    color:#0b8a3e;

}

.header-icons i{

    font-size:24px;

}

.cart-icon{

    position:relative;

}

.cart-count{

    position:absolute;

    top:-8px;

    right:-10px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#dc3545;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:11px;

    font-weight:700;

}

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

.account-menu{

    min-width:230px;

    border:none;

    border-radius:15px;

    padding:12px 0;

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

}

.account-menu .dropdown-item{

    padding:12px 18px;

    transition:.3s;

    font-weight:500;

}

.account-menu .dropdown-item:hover{

    background:#0b8a3e;

    color:#fff;

}

.account-menu i{

    margin-right:10px;

}

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

.main-header.fixed{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    animation:headerDown .4s ease;

}

@keyframes headerDown{

    from{

        transform:translateY(-100%);

    }

    to{

        transform:translateY(0);

    }

}

/*==================================================
            TABLET
==================================================*/

@media(max-width:991px){

.top-header{

display:none;

}

.main-header{

padding:15px 0;

}

.logo{

justify-content:center;

}

.logo img{

height:72px;

}

.header-icons{

justify-content:flex-end;

gap:15px;

}

.header-icons span{

display:none;

}

.header-icons i{

font-size:25px;

}

.search-box{

margin-top:18px;

}

}

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

@media(max-width:576px){

.logo img{

height:58px;

}

.search-box{

height:48px;

}

.search-box input{

font-size:14px;

padding:0 15px;

}

.search-box button{

width:55px;

font-size:18px;

}

.header-icons{

gap:20px;

}

.cart-count{

width:18px;

height:18px;

font-size:10px;

}

}
/*==================================================
                PREMIUM NAVBAR
==================================================*/

.rcw-navbar{

    background:#0b8a3e;

    padding:0;

    box-shadow:0 5px 18px rgba(0,0,0,.08);

    z-index:990;

}

.rcw-navbar .navbar-nav{

    align-items:center;

}

.rcw-navbar .nav-item{

    position:relative;

}

.rcw-navbar .nav-link{

    color:#fff;

    font-size:15px;

    font-weight:600;

    padding:18px 20px;

    transition:.35s;

    position:relative;

}

.rcw-navbar .nav-link:hover{

    color:#ffd54f;

}

.rcw-navbar .nav-link.active{

    color:#ffd54f;

}

/* Underline Animation */

.rcw-navbar .nav-link::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:8px;

    width:0;

    height:2px;

    background:#ffd54f;

    transition:.35s;

    transform:translateX(-50%);

}

.rcw-navbar .nav-link:hover::after{

    width:70%;

}

/*==================================================
            CATEGORY BUTTON
==================================================*/

.category-menu{

    background:#087534;

    padding-left:25px!important;

    padding-right:25px!important;

    font-weight:700!important;

}

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

.position-static{

    position:static!important;

}

.mega-menu{

    width:100%;

    left:0;

    right:0;

    top:100%;

    margin-top:0;

    border:none;

    border-radius:0 0 15px 15px;

    padding:35px;

    display:none;

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

    background:#fff;

    animation:megaFade .3s ease;

}

.dropdown:hover>.mega-menu{

    display:block;

}

@keyframes megaFade{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
            MEGA MENU TITLES
==================================================*/

.mega-menu h5{

    color:#0b8a3e;

    font-weight:700;

    margin-bottom:18px;

    padding-bottom:10px;

    border-bottom:2px solid #eeeeee;

}

/*==================================================
            CATEGORY LINKS
==================================================*/

.mega-menu a{

    display:flex;

    align-items:center;

    gap:12px;

    color:#444;

    text-decoration:none;

    padding:10px 0;

    transition:.3s;

    font-size:15px;

    font-weight:500;

}

.mega-menu a:hover{

    color:#0b8a3e;

    padding-left:10px;

}

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

.mega-menu img{

    width:35px;

    height:35px;

    object-fit:contain;

}

/*==================================================
            ICON LINKS
==================================================*/

.mega-menu i{

    width:32px;

    height:32px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;

    background:#eef8f1;

    color:#0b8a3e;

    font-size:18px;

}

/*==================================================
                OFFER BANNER
==================================================*/

.mega-banner{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    height:100%;

    min-height:300px;

}

.mega-banner img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:18px;

}

.banner-content{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.banner-content h6{

    font-size:18px;

    letter-spacing:2px;

}

.banner-content h2{

    font-size:55px;

    font-weight:800;

    margin:5px 0;

}

.banner-content p{

    font-size:20px;

    font-weight:600;

}

.banner-content .btn{

    margin-top:15px;

    border-radius:30px;

    padding:10px 28px;

}

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

.dropdown-toggle::after{

    margin-left:8px;

}

/*==================================================
            STICKY NAV
==================================================*/

.rcw-navbar.sticky-top{

    top:0;

    z-index:990;

}

/*==================================================
            SCROLL EFFECT
==================================================*/

.rcw-navbar.scrolled{

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

}

/*==================================================
            TABLET
==================================================*/

@media(max-width:991px){

.rcw-navbar{

padding:10px 0;

}

.rcw-navbar .navbar-collapse{

background:#0b8a3e;

margin-top:12px;

border-radius:12px;

padding:15px;

}

.rcw-navbar .nav-link{

padding:12px 18px;

}

.mega-menu{

position:relative;

display:block!important;

width:100%;

box-shadow:none;

padding:15px;

border-radius:10px;

margin-top:10px;

}

.banner-content h2{

font-size:36px;

}

}

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

@media(max-width:576px){

.rcw-navbar .nav-link{

font-size:14px;

padding:10px 15px;

}

.mega-menu{

padding:10px;

}

.mega-menu .col-lg-3{

margin-bottom:20px;

}

.mega-banner{

min-height:220px;

}

.banner-content h2{

font-size:30px;

}

}
/*==================================================
            PREMIUM EFFECTS
==================================================*/

/* Smooth Scroll */

html{
    scroll-behavior:smooth;
}

/* Smooth Transition */

*{
    transition:.3s ease;
}

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

.main-header{

    transition:.35s;

}

.main-header:hover{

    box-shadow:0 12px 35px rgba(0,0,0,.08);

}

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

.search-box{

    position:relative;

}

.search-box:focus-within{

    border-color:#15b85b;

    box-shadow:0 0 0 5px rgba(21,184,91,.15);

}

.search-box input{

    background:transparent;

}

.search-box button{

    position:relative;

    overflow:hidden;

}

.search-box button::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

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

    transition:.4s;

}

.search-box button:hover::before{

    left:100%;

}

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

.header-icons>a{

    padding:10px 14px;

    border-radius:12px;

}

.header-icons>a:hover{

    background:#f8f9fa;

    transform:translateY(-3px);

}

.header-icons i{

    transition:.35s;

}

.header-icons>a:hover i{

    color:#0b8a3e;

    transform:scale(1.15);

}

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

.cart-count{

    animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.15);

}

100%{

transform:scale(1);

}

}

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

.account-menu{

    animation:fadeMenu .25s ease;

}

@keyframes fadeMenu{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:translateY(0);

}

}

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

.rcw-navbar{

    transition:.35s;

}

.rcw-navbar.scrolled{

    background:#087534;

    box-shadow:0 10px 35px rgba(0,0,0,.18);

}

/*==================================================
            NAV LINKS
==================================================*/

.rcw-navbar .nav-link{

    overflow:hidden;

}

.rcw-navbar .nav-link:hover{

    transform:translateY(-2px);

}

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

.mega-menu{

    backdrop-filter:blur(15px);

}

.mega-menu .col-lg-3{

    transition:.35s;

}

.mega-menu .col-lg-3:hover{

    transform:translateY(-6px);

}

/*==================================================
            CATEGORY LINKS
==================================================*/

.mega-menu a{

    border-radius:10px;

    padding:10px 12px;

}

.mega-menu a:hover{

    background:#eef9f2;

}

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

.mega-menu img{

    transition:.35s;

}

.mega-menu a:hover img{

    transform:rotate(8deg) scale(1.08);

}

/*==================================================
            ICON HOVER
==================================================*/

.mega-menu i{

    transition:.35s;

}

.mega-menu a:hover i{

    background:#0b8a3e;

    color:#fff;

    transform:rotate(-8deg);

}

/*==================================================
            OFFER BANNER
==================================================*/

.mega-banner{

    cursor:pointer;

}

.mega-banner img{

    transition:.5s;

}

.mega-banner:hover img{

    transform:scale(1.08);

}

.banner-content{

    transition:.35s;

}

.mega-banner:hover .banner-content{

    background:rgba(0,0,0,.55);

}

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

.btn-success{

    border:none;

    transition:.35s;

}

.btn-success:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 20px rgba(25,135,84,.35);

}

/*==================================================
            DROPDOWNS
==================================================*/

.dropdown-menu{

    animation:dropdownFade .25s ease;

}

@keyframes dropdownFade{

from{

opacity:0;

transform:translateY(10px);

}

to{

opacity:1;

transform:translateY(0);

}

}

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

.logo img{

    transition:.4s;

}

.logo:hover img{

    transform:scale(1.05);

}

/*==================================================
            CUSTOM SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#ececec;

}

::-webkit-scrollbar-thumb{

    background:#0b8a3e;

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:#087534;

}

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

@media(max-width:991px){

.header-icons{

gap:15px;

}

.header-icons>a{

padding:8px;

}

.logo img{

height:70px;

}

}

@media(max-width:768px){

.main-header{

padding:15px 0;

}

.search-box{

height:48px;

}

.search-box input{

font-size:14px;

}

.header-icons{

justify-content:flex-end;

}

}

@media(max-width:576px){

.logo img{

height:55px;

}

.header-icons{

gap:10px;

}

.cart-count{

width:18px;

height:18px;

font-size:9px;

}

.search-box button{

width:55px;

}

}
/*===============================
Cart Animation
================================*/

.cart-animation{

    animation:cartShake .5s;

}

@keyframes cartShake{

0%{

transform:rotate(0deg);

}

25%{

transform:rotate(12deg);

}

50%{

transform:rotate(-12deg);

}

75%{

transform:rotate(8deg);

}

100%{

transform:rotate(0);

}

}

/*===============================
Back To Top
================================*/

#topBtn{

position:fixed;

bottom:30px;

right:30px;

width:50px;

height:50px;

background:#0b8a3e;

color:#fff;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:9999;

}

#topBtn.show{

opacity:1;

visibility:visible;

}

#topBtn:hover{

background:#087534;

transform:translateY(-5px);

}