/* ===========================================================
   FADFAR HEADER v2
   =========================================================== */

:root{

    --primary:#E74C3C;
    --secondary:#27AE60;
    --dark:#222;
    --light:#fff;
    --border:#e8e8e8;
    --bg:#f8f8f8;

    --header-height:78px;

}

/* ===========================================================
   RESET
   =========================================================== */

#header *{

    box-sizing:border-box;

}

#header{

    width:100%;
    background:#fff;
    border-bottom:1px solid var(--border);
    position:relative;
    z-index:999;

}

#header a{

    text-decoration:none;

}

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

.header-row{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    min-height:var(--header-height);
    padding:12px 0;

}

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

.header-logo{

    flex:0 0 auto;

}

.fadfar-logo{

    display:flex;
    align-items:center;
    font-family:'Segoe UI',Arial,sans-serif;
    font-weight:800;
    font-size:32px;
    line-height:1;

}

.fadfar-logo i{

    margin-right:8px;

}

.red-part{

    color:#E74C3C;

}

.green-part{

    color:#27AE60;

}


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

.header-search{

    flex:1;

}

.search-box{

    display:flex;
    align-items:center;

}

.search-box input{

    height:48px;
    border-radius:6px 0 0 6px;
    border:2px solid #27AE60;
    border-right:none;
    box-shadow:none;

}

.search-box button{

    width:60px;
    height:48px;

    border:none;

    background:#27AE60;

    color:#fff;

    border-radius:0 6px 6px 0;

    transition:.25s;

}

.search-box button:hover{

    background:#1e7e46;

}

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

.header-cart{

    flex:0 0 auto;

}

.header-cart a{

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

    width:54px;
    height:54px;

    background:#f5f5f5;

    border-radius:50%;

    position:relative;

    color:#333;

    transition:.3s;

}

.header-cart a:hover{

    background:#27AE60;

    color:#fff;

}

.header-cart i{

    font-size:24px;

}

.cart-count{

    position:absolute;

    top:-4px;

    right:-4px;

    width:22px;

    height:22px;

    background:#E74C3C;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:11px;

    font-weight:bold;

}

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

.header-account{

    min-width:140px;

}

.header-account small{

    display:block;

    color:#888;

    font-size:12px;

}

.header-account strong{

    display:block;

    color:#222;

    font-size:16px;

}

/* ===========================================================
   LOGIN
   =========================================================== */

.header-login a{

    background:#27AE60;

    color:#fff;

    padding:11px 18px;

    border-radius:6px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    font-weight:600;

    transition:.3s;

}

.header-login a:hover{

    background:#1c7b48;

}

/* ===========================================================
   TOOLBAR
   =========================================================== */

.header-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:12px;

    padding:12px 0;

    border-top:1px solid #eee;

}

.toolbar-left{

    display:flex;

    gap:30px;

}

.toolbar-left span{

    color:#666;

    font-size:13px;

}

.toolbar-left i{

    color:#27AE60;

    margin-right:6px;

}

.toolbar-right a{

    color:#E74C3C;

    font-weight:700;

}

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

.mega-navbar{

    margin-top:15px;

    position:relative;

}

.mega-navbar>ul{

    margin:0;

    padding:0;

    list-style:none;

}

.mega-item{

    position:relative;
    top:-8px;
    display:inline-block;

}

.mega-item>a{

    display:block;

    padding:14px 20px;

    background:#222;

    color:#fff;

    border-radius:6px;

}

.mega-item:hover>a{

    background:#27AE60;

}

.mega-dropdown{

    position:absolute;

    left:-210px;

    top:100%;

    width:1220px;

    background:#fff;

    border:1px solid #ddd;

    border-radius:8px;

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

    padding:30px;

    display:none;

}

.mega-item:hover .mega-dropdown{

    display:block;

}

.mega-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.mega-column h4{

    margin:0 0 15px;

    font-size:18px;

    color:#222;

}

.mega-column ul{

    list-style:none;

    padding:0;

    margin:0;

}

.mega-column li{

    margin-bottom:10px;

}

.mega-column a{

    color:#555;

    transition:.25s;

}

.mega-column a:hover{

    color:#27AE60;

    padding-left:5px;

}

.promo-box{

    background:linear-gradient(135deg,#27AE60,#1d6f46);

    color:#fff;

    border-radius:8px;

    padding:20px;

}

.promo-btn{

    display:inline-block;

    margin-top:15px;

    padding:10px 18px;

    background:#fff;

    color:#27AE60;

    border-radius:5px;

    font-weight:bold;

}

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

@media(max-width:1200px){

    .mega-dropdown{

        width:850px;

    }

}

@media(max-width:992px){

    .header-category,

    .header-account,

    .header-login,

    .toolbar-left,

    .mega-navbar{

        display:none;

    }

    .header-row{

        gap:10px;

    }

    .fadfar-logo{

        font-size:24px;

    }

}

@media(max-width:768px){

    .header-row{

        min-height:65px;

    }

    .header-search{

        display:none;

    }

    .fadfar-logo{

        font-size:30px;

    }

}

@media(max-width:576px){

    .fadfar-logo{

        font-size:26px;

    }

    .header-cart a{

        width:46px;

        height:46px;

    }

    .header-cart i{

        font-size:20px;

    }

}

@media(max-width:360px){

    .fadfar-logo{

        font-size:22px;

    }

}




/* Mega menu */

.nav-item-mega{
    position:relative;
}

.nav-item-mega .mega-dropdown-panel{
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    transition:.25s ease;
}

.nav-item-mega.mega-open .mega-dropdown-panel{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* Active mobile link */

.main-nav a.active{
    color:#27ae60;
    font-weight:600;
}

/* Sticky shadow */

#navbar{
    transition:box-shadow .25s ease;
}

#navbar.navbar-scrolled{
    box-shadow:0 3px 15px rgba(0,0,0,.12);
}