.rt-login-buttons {
    display: flex;
    column-gap: 10px;
    .react-button {
        display: flex;
        align-items: center;
        a {
            display: inline-block;
            color: #fff;
            padding: 6px 20px;
            font-size: 16px;
            font-weight: 400;
            font-family: var(--bodyFont);
            line-height: 26px;
            text-align: center;
            text-transform: capitalize;     
            border-radius: 4px;
            border: 1px solid var(--primaryColor);
            background: var(--primaryColor);
            transition: .3s;
            overflow: hidden;       
            &:hover {
                background: var(--whiteColor);
                color: var(--primaryColor);
            } 
        }
        &.secondary_btn {
            a {
                border: 1px solid var(--primaryColor);
                box-sizing: border-box;
                &:hover {
                    color: #fff;
                    background: var(--primaryColor);
                    border: 1px solid #fff;
                }
            }
        }
        &.profile_btn{
            position: relative;
            transition: all 0.4s;
            a{
                color: var(--secondaryColor);
                font-size: 14px;
                padding: 8px 0;
                margin: 0;
                border: none;
                &:hover{
                    border: none;
                }
                i{
                    color: var(--primaryColor);
                }
                svg{
                    fill: var(--primaryColor);
                }
            }
            .sub-menu{
                margin: 0;
                position: absolute;
                top: 100%;
                left: 0;
                visibility: hidden;
                opacity: 0;
                background: var(--whiteColor);
                transform: translateZ(0) translateY(15px);
                border-radius: 4px;
                transition: all 0.4s;
                box-shadow: 0px 7px 18px #1810100d;
                display: flex;
                flex-direction: column;
                width: 230px;
                padding: 12px 0;
                z-index: 99;
                li{
                    list-style: none;
                    width: 100%;
                    display: block;
                    margin: 0;
                    .profile-picture {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        padding: 15px;
                        img {
                            width: 52px;
                            min-width: 52px;
                            height: 52px;
                            border-radius: 100%;
                            border: 2px solid #2f57ef21;
                            box-shadow: 0px 6px 34px rgba(215, 216, 222, 0.41);
                            padding: 3px;
                        }
                        .info {
                            margin-top: -15px;
                            h6{
                                margin-bottom: 0;
                                line-height: 18px;;
                            }
                            a{
                                padding: 0;
                                margin: 0;
                                color: var(--primaryColor);
                                font-weight: 500;
                                position: absolute;
                                &::after {
                                    position: absolute;
                                    content: "";
                                    left: 0;
                                    bottom: 2px;
                                    height: 1px;
                                    background: var(--primaryColor);
                                    width: 0%;
                                    transition: 0.3s;
                                }
                                &:hover {
                                    &::after{
                                        width: 100%;
                                    }
                                }
                            }
                            
                        }
                    }
                    a{
                        color: var(--secondaryColor);
                        font-size: 14px;
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        padding: 4px 12px;
                        margin: 2px 10px;
                        transition: all 0.3s;
                        background: transparent;
                        i {
                            color: var(--primaryColor);
                            flex-basis: 30px;
                            font-size: 18px;
                        }
                        svg {
                            flex-basis: 30px;
                            width: 18px;
                            height: 18px;
                            fill: var(--primaryColor);;
                        }
                    }

                    &.list{
                        a{
                            margin: 0;
                        }
                    }
                }
                
            }
            &:hover{
                .sub-menu {
                    visibility: visible;
                    opacity: 1;
                    transform: translateZ(0) translateY(0);
                }
            }
        }
        
    }
}