: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
************************************/
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: 9;
    padding-block: 30px;
    padding-inline: 30px;
    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 .profile-user-name{
    font-size: 21px;
    line-height: 27px;
    color: var(--text-grey);
}
.header-user-menu .account-menu .profile-user-email{
    margin-top: 10px;
    font-size: 14px;
    line-height: normal;
    color: var(--text-grey);
}
.header-user-menu .account-menu .profile-user-link{
    margin-top: 16px;
}
.header-user-menu .account-menu .profile-user-link a {
    color: var(--green);
    text-decoration: none;
    font-weight: bold;
}
.header-user-menu.open .account-menu{
    opacity: 1;
    visibility: visible;
}
.header-user-menu.open .user-menu-toggle .fa-chevron-down{
    transform: rotate(180deg);
}