/* ==========================================================
   HASEEN TOOLS PREMIUM
   HEADER
========================================================== */

/* Header */

.whb-header,
.whb-main-header,
.whb-sticked .whb-main-header{

    background:rgba(11,11,13,.78);

    backdrop-filter:blur(22px);

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

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

    transition:all .35s ease;

}

/* Sticky Header */

.whb-sticked .whb-main-header{

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

}

/* Logo */

.site-logo img,
.whb-logo img{

    transition:.35s ease;

}

.site-logo:hover img,
.whb-logo:hover img{

    transform:scale(1.05);

}

/* Menu */

.whb-main-header .menu>li>a{

    color:#fff;

    font-weight:600;

    position:relative;

    transition:.3s;

}

/* Gold Underline */

.whb-main-header .menu>li>a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#F4B400;

    transition:.35s;

}

.whb-main-header .menu>li>a:hover::after,
.whb-main-header .menu>li.current-menu-item>a::after{

    width:100%;

}

.whb-main-header .menu>li>a:hover{

    color:#F4B400;

}

/* Dropdown */

.whb-main-header .sub-menu{

    background:rgba(18,18,20,.95);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.05);

    border-radius:18px;

    padding:12px 0;

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

}

/* Dropdown Links */

.whb-main-header .sub-menu a{

    color:#DDD;

    transition:.25s;

}

.whb-main-header .sub-menu a:hover{

    color:#F4B400;

    padding-left:8px;

}

/* Icons */

.whb-header svg,
.whb-header i{

    transition:.35s;

}

.whb-header svg:hover,
.whb-header i:hover{

    color:#F4B400;

    transform:scale(1.1);

}

/* Search */

.whb-search-form input{

    background:#18191D;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.06);

    color:#fff;

}

.whb-search-form input:focus{

    border-color:#F4B400;

}

/* Cart Badge */

.wd-cart-number{

    background:#F4B400;

    color:#111;

    font-weight:700;

}

/* Mobile Menu */

.mobile-nav{

    background:#111214;

}

.mobile-nav a{

    color:#fff;

}

.mobile-nav a:hover{

    color:#F4B400;

}

/* Header Animation */

.whb-header{

    animation:headerFade .7s ease;

}

@keyframes headerFade{

    from{

        opacity:0;

        transform:translateY(-30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}