.account-links{

    display:flex;
    align-items:center;
    gap:18px;

    position:relative;

}

.welcome-user{

    color:#fff;

    font-size:15px;

}

.welcome-user strong{

    font-weight:600;

}

.account-dropdown{

    position:relative;

}

.account-btn{

    display:flex;
    align-items:center;
    gap:6px;

    background:none;
    border:none;

    color:#fff;

    font-size:15px;

    cursor:pointer;

    transition:.25s;

    padding:0;

}

.account-btn:hover{

    color:var(--primary);

}

.account-btn i{

    font-size:12px;

    transition:.25s;

}

.account-btn.active i{

    transform:rotate(180deg);

}

.account-menu{

    position:absolute;

    top:calc(100% + 14px);

    right:0;

    width:220px;

    background:#fff;

    border-radius:10px;

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

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:.25s;

    z-index:9999;

}

.account-menu.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.account-menu a{

    display:block;

    padding:15px 20px;

    color:#333;

    text-decoration:none;

    transition:.25s;

}

.account-menu a:hover{

    background:#f5f5f5;

    color:var(--primary);

}

.logout-link{

    color:#fff;

    text-decoration:none;

    font-size:15px;

    transition:.25s;

}

.logout-link:hover{

    color:var(--primary);

}

/* mobile */
.mobile-account{

    padding:22px 25px;

}

.mobile-user{

    color:#fff;

    font-size:18px;

    margin-bottom:18px;

}

.mobile-user strong{

    font-weight:600;

}

.mobile-account a{

    display:block;

    padding:13px 0;

    color:#fff;

    text-decoration:none;

    transition:.25s;

}

.mobile-account a:hover{

    color:var(--primary);

}