/* ===========================================
   RISE - HEADER.CSS
=========================================== */

#header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    background:#ffffff;

    transition:.3s;

    border-bottom:1px solid rgba(255,255,255,.08);

}

/* Added by JavaScript after scrolling */

/* header.scrolled{

    background:#ffffff;

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

} */

/* ---------------- NAVBAR ---------------- */

.navbar{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/* ---------------- LOGO ---------------- */

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    height:55px;

    width:auto;

    transition:.3s ease;

}

.logo:hover img{

    transform:scale(1.03);

}

/* ---------------- NAVIGATION ---------------- */

.nav-links{

    display:flex;

    list-style:none;

    gap:45px;

}

.nav-links li{

    position:relative;

}

.nav-links a{

    font-size:.9rem;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

    padding:5px 0;

}

/* Underline Animation */

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;

    height:2px;

    background:#111;

    transition:.3s ease;

}

.nav-links a:hover::after{

    width:100%;

}

/* ---------------- ICONS ---------------- */

.nav-icons{

    display:flex;

    align-items:center;

    gap:25px;

}

.nav-icons a{

    position:relative;

    font-size:1.1rem;

    transition:.3s ease;

}

.nav-icons a:hover{

    transform:translateY(-2px);

}

/* Cart Counter */

#cart-count{

    position:absolute;

    top:-8px;
    right:-10px;

    min-width:20px;
    height:20px;

    padding:0 5px;

    border-radius:999px;

    background:#111;
    color:#fff !important;

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

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

    line-height:1;

    z-index:10000;

}

/* ---------------- MOBILE MENU BUTTON ---------------- */

.menu-toggle{

    display:none;

    cursor:pointer;

    font-size:1.5rem;

}

/* ---------------- ACTIVE LINK ---------------- */

.nav-links a.active{

    font-weight:700;

}

.nav-links a.active::after{

    width:100%;

}

/* ---------------- HEADER SPACING ---------------- */

/* Prevents sections from hiding behind fixed header */

section{

    scroll-margin-top:100px;

    

}

/* ===========================================
   FORCE HEADER STYLE
=========================================== */

#header{

    position:fixed !important;

    top:0 !important;

    left:0 !important;

    width:100% !important;

    z-index:9999 !important;

    background:#ffffff !important;

    opacity:1 !important;

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

    box-shadow:0 2px 12px rgba(0,0,0,.05);

}

#header a,
#header i,
#header li,
#header nav,
#header .logo{
    color:#111;
}

#header .logo img{

    opacity:1 !important;

}