.login-required-popup {
    width: 100%;
    bottom: -100%;
     position: fixed;
        border-radius: 20px 20px 0 0;
        background-color: #fff;
        padding: 20px 5%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10001;
        transition: all 0.4s ease-in-out;
}
.login-required-popup.active {
    bottom: 0;
}



    .login-req-popup-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 15px;
    }

    .login-req-popup-content h2 {
        font-size: 17px;
        color: var(--txt-clr);
    }

    .login-req-popup-content img {
        width: 50px;
        text-align: center;

    }

    .login-req-popup-buttons {
        margin-top: 25px;
        width: 100%;
        display: flex;
        gap: 10px;
        font-weight: 800;
    }

    .login-req-popup-buttons button {
        padding: 10px 5%;
        border-radius: 8px;
        border: none;
        outline: none;
        color: var(--txt-clr);
        background: linear-gradient(180deg, var(--main-clr) 0%, var(--secoundry-clr) 100%);
        font-size: 14px;
    }







@media (min-width:1024px) {
    .login-required-popup {
        width: fit-content;
        max-width: 450px;
        /* height: 450px; */
        left: 50%;
        transform: translate(-50%, 50%);
        padding: 20px;
        border-radius: 8px;
    }

    .login-required-popup.active {
        bottom: 50%;
    }



    


}