.auth-navbar{
    width: calc(var(--dimension-ratio) * 329px);
    height: calc(var(--dimension-ratio) * 40px);
}

.navIcon-container{
    width: calc(var(--dimension-ratio) * 32px);
    height: calc(var(--dimension-ratio) * 32px);
}

.navIcon-container span{
    width: calc(var(--dimension-ratio) * 14px);
    height: calc(var(--dimension-ratio) * 14px);
    background-color: var(--sub-secondary-color);
    color: var(--light-color);
    border-radius: 50%;
    inset-inline-start: 0;
    top: 0;
}

.navIcon-container img{
    width: calc(var(--dimension-ratio) * 27px);
    height: calc(var(--dimension-ratio) * 27px);
}

.profile-nav{
    width: calc(var(--dimension-ratio) * 185px);
    height: calc(var(--dimension-ratio) * 40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.profile-img{
    width: calc(var(--dimension-ratio) * 40px);
    height: calc(var(--dimension-ratio) * 40px);
    border-radius: 50%;
    cursor: pointer;
}

.profile-nav h3{
    width: calc(var(--dimension-ratio) * 115px);
    height: calc(var(--dimension-ratio) * 25px);
    font-size: var(--font-size-20);
    font-weight: 500;
    line-height: var(--font-size-24);
    letter-spacing: 0.17249999940395355px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--light-color);
    overflow: hidden;
}

.profile-nav .dropdown-img{
    width: calc(var(--dimension-ratio) * 16.5px);
    height: calc(var(--dimension-ratio) * 9px);
    transition: transform 0.2s;
    transform-origin: center;
}


.profile-dropdown-menu {
    width: calc(var(--dimension-ratio) * 220px);
    height: calc(var(--dimension-ratio) * 244px);
    border-radius:  calc(var(--dimension-ratio) * 11px);
    border: 1.5px solid #EEEEEE;
    position: absolute;
    background-color: var(--light-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    top: calc(var(--dimension-ratio) * 50px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    inset-inline-end: calc(var(--dimension-ratio) * 10px);
}

.profile-dropdown-menu .dropdown-menu-link {
    height: calc(var(--dimension-ratio) * 40px);
    display: flex;
    justify-content: start;
    align-items: center;
    padding: calc(var(--dimension-ratio) * 10px) ;
    gap: calc(var(--dimension-ratio) * 15px) ;
    border-bottom: 0.5px solid #C7C4C4;
    cursor: pointer;
}

.profile-dropdown-menu .dropdown-menu-link p{
    font-size: var(--font-size-16);
    font-weight: 500;
    line-height: var(--font-size-20);
    letter-spacing: 0.17249999940395355px;
    text-align: start;
    color: var(--secondary-color);
}

.profile-dropdown-menu .dropdown-menu-link img{
    width: calc(var(--dimension-ratio) * 24px);
    height: calc(var(--dimension-ratio) * 24px);
}

.dropdown-menu-button{
    height: calc(var(--dimension-ratio) * 60px);
    height: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.dropdown-menu-button button{
    cursor: pointer;
    width: calc(var(--dimension-ratio) * 187px);
    height: calc(var(--dimension-ratio) * 32px);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:  var(--font-size-16);
    font-weight: 500;
    line-height:  var(--font-size-20);
    letter-spacing: 0.17249999940395355px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #BE1A1A;
    border: 1px solid #E75C5C;
    border-radius:  calc(var(--dimension-ratio) * 15px);
    background-color: var(--light-color);
    gap: calc(var(--dimension-ratio) * 10px) ;
}

.dropdown-menu-button button img{
    width: calc(var(--dimension-ratio) * 18px);
    height: calc(var(--dimension-ratio) * 18px);
}