:root{
    --header-height:100px;
    --header-px:30px;
}
@media screen and (max-width:1280px){
    :root{
        --header-height:80px;
    }   
}
header{
    padding-block: 20px;
    padding-inline: var(--header-px);
    height: var(--header-height);
    position: relative;
    background-color: var(--white);
}
header .header-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header .header-container .navbar-brand img{
    height: 60px;
}
@media screen and (max-width:1280px){
    header .header-container .navbar-brand img{
        height: 41px;
    }
}
/************************************
HEADER USER MENU
************************************/
:root{
    --header-menu-panel-py: 0;
    --header-menu-panel-px:20px;
}
header #block-wpctheme-account-menu{
    position: unset;
}
.header-user-menu .user-menu-toggle{
    display: flex;
    align-items: center;
    grid-gap: 5px 20px;
    cursor: pointer;
    user-select: none;
}
.header-user-menu .user-menu-toggle .text{
    font-size: 18px;
    font-weight: 700;
    color: var(--text-grey);
}
.header-user-menu .user-menu-toggle .fa-user{
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #C9C8C8;
    font-size: 23px;
    color: var(--white);
}
.header-user-menu .user-menu-toggle .fa-chevron-down{
    color: var(--green);
    font-size: 26px;
    transition: all 0.3s;
}
/**/
.header-user-menu .account-menu {
    min-width: 318px;
    position: absolute;
    top: var(--header-height);
    right: var(--header-px);
    background-color: var(--white);
    z-index: 99;
    padding-block:var(--header-menu-panel-py);
    border: 1px solid var(--border-grey);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}
.header-user-menu .account-menu ul{
    padding:0 0;
    list-style:none;
}
.header-user-menu .account-menu ul li{
    padding-inline:var(--header-menu-panel-px);
    padding-block:10px;
    line-height: 1;
}
.header-user-menu .account-menu ul li:not(:last-child){
    border-bottom:1px solid var(--border-grey);
}
.header-user-menu .account-menu .profile-user-name{
    font-size: 19px;
    line-height: 1.2;
    color: var(--text-grey);
}
.header-user-menu .account-menu .profile-user-email{
    margin-top: 5px;
    font-size: 12px;
    line-height: normal;
    color: var(--text-grey);
}
.header-user-menu .account-menu .profile-user-link{
    display:block;
    margin-top:15px;
}
.header-user-menu .account-menu a {
    font-size:13px;
    line-height:1;
    color: var(--green);
    text-decoration: none;
}
.header-user-menu.open .account-menu{
    opacity: 1;
    visibility: visible;
}
.header-user-menu.open .user-menu-toggle .fa-chevron-down{
    transform: rotate(180deg);
}
@media screen and (max-width:767px) {
    .header-user-menu .account-menu{
        min-width: 260px;
    }
}