:root {
            --primary-color: #4EA685;
            --secondary-color: #57B894;
            --black: #000000;
            --white: #ffffff;
            --gray: #efefef;
            --gray-2: #757575;

            --facebook-color: #4267B2;
            --google-color: #DB4437;
            --twitter-color: #1DA1F2;
            --insta-color: #E1306C;
        }

        @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@200;300;400;500;600&display=swap');

        * {
            font-family: 'Vazirmatn', sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* رفع اسکرول عرضی و مشکل فوتر */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
}

.login-container {
    min-height: 100vh !important;
    overflow: visible !important; /* تغییر از hidden به visible */
    padding-top: 200px;

}

.row {
    flex-wrap: wrap !important;
}

/* برای فوتر در صفحه لاگین */
.footer {
    position: relative !important;
    width: 100% !important;
    margin-top: 0 !important;
    background: #000 !important;
}

.container {
    max-width: 100% !important;
}

        .col {
            width: 50%;
        }

        .align-items-center {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .form-wrapper {
            width: 100%;
            max-width: 28rem;
        }

        .form {
            padding: 1rem;
            background-color: var(--white);
            border-radius: 1.5rem;
            width: 100%;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            transform: scale(0);
            transition: .5s ease-in-out;
            transition-delay: 1s;
        }

        .input-group {
            position: relative;
            width: 100%;
            margin: 1rem 0;
        }

        .input-group i {
            position: absolute;
            top: 50%;
            right: 1rem;
            transform: translateY(-50%);
            font-size: 1.4rem;
            color: var(--gray-2);
        }

        .input-group input {
            width: 100%;
            padding: 1rem 3rem;
            font-size: 1rem;
            background-color: var(--gray);
            border-radius: .5rem;
            border: 0.125rem solid var(--white);
            outline: none;
            text-align: right;
        }

        .input-group input:focus {
            border: 0.125rem solid var(--primary-color);
        }

        .form button {
            cursor: pointer;
            width: 100%;
            padding: .6rem 0;
            border-radius: .5rem;
            border: none;
            background-color: var(--primary-color);
            color: var(--white);
            font-size: 1.2rem;
            outline: none;
            margin-bottom: 0.5rem;
        }

        .phone-login-btn {
            cursor: pointer;
            width: 100%;
            padding: .6rem 0;
            border-radius: .5rem;
            border: 2px solid var(--primary-color);
            background-color: transparent;
            color: var(--primary-color);
            font-size: 1rem;
            outline: none;
            transition: all 0.3s ease;
        }

        .phone-login-btn:hover {
            background-color: var(--primary-color);
            color: var(--white);
        }

        .form p {
            margin: 1rem 0;
            font-size: .7rem;
        }

        .flex-col {
            flex-direction: column;
        }

        .social-list {
            margin: 2rem 0;
            padding: 1rem;
            border-radius: 1.5rem;
            width: 100%;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            transform: scale(0);
            transition: .5s ease-in-out;
            transition-delay: 1.2s;
        }

        .social-list>div {
            color: var(--white);
            margin: 0 .5rem;
            padding: .7rem;
            cursor: pointer;
            border-radius: .5rem;
            cursor: pointer;
            transform: scale(0);
            transition: .5s ease-in-out;
        }

        .social-list>div:nth-child(1) {
            transition-delay: 1.4s;
        }

        .social-list>div:nth-child(2) {
            transition-delay: 1.6s;
        }

        .social-list>div:nth-child(3) {
            transition-delay: 1.8s;
        }

        .social-list>div:nth-child(4) {
            transition-delay: 2s;
        }

        .social-list>div>i {
            font-size: 1.5rem;
            transition: .4s ease-in-out;
        }

        .social-list>div:hover i {
            transform: scale(1.5);
        }

        .facebook-bg {
            background-color: var(--facebook-color);
        }

        .google-bg {
            background-color: var(--google-color);
        }

        .twitter-bg {
            background-color: var(--twitter-color);
        }

        .insta-bg {
            background-color: var(--insta-color);
        }

        .pointer {
            cursor: pointer;
        }

        .login-container.sign-in .form.sign-in,
        .login-container.sign-in .social-list.sign-in,
        .login-container.sign-in .social-list.sign-in>div,
        .login-container.sign-up .form.sign-up,
        .login-container.sign-up .social-list.sign-up,
        .login-container.sign-up .social-list.sign-up>div {
            transform: scale(1);
        }

        /* استایل برای حالت موبایل */
        .phone-input-group {
            display: none;
        }

        .phone-login-active .username-input-group {
            display: none;
        }

        .phone-login-active .phone-input-group {
            display: block;
        }

        .content-row {
            position: absolute;
            top: 0;
            right: 0;
            pointer-events: none;
            z-index: 6;
            width: 100%;
        }

        .text {
            margin: 4rem;
            color: var(--white);
        }

        .text h2 {
            font-size: 3.5rem;
            font-weight: 800;
            margin: 2rem 0;
            transition: 1s ease-in-out;
        }

        .text p {
            font-weight: 600;
            transition: 1s ease-in-out;
            transition-delay: .2s;
        }

        .text.sign-in h2,
        .text.sign-in p,
        .img.sign-in {
            transform: translateX(250%);
        }

        .text.sign-up h2,
        .text.sign-up p,
        .img.sign-up {
            transform: translateX(-250%);
        }

        .login-container.sign-in .text.sign-in h2,
        .login-container.sign-in .text.sign-in p,
        .login-container.sign-in .img.sign-in,
        .login-container.sign-up .text.sign-up h2,
        .login-container.sign-up .text.sign-up p,
        .login-container.sign-up .img.sign-up {
            transform: translateX(0);
        }

        /* BACKGROUND */
        .login-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 100vh;
            width: 300vw;
            transform: translate(-35%, 0);
            background-image: linear-gradient(-45deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            transition: 1s ease-in-out;
            z-index: 6;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            border-bottom-left-radius: max(50vw, 50vh);
            border-top-right-radius: max(50vw, 50vh);
            pointer-events: auto;
            cursor: pointer;
        }

        .login-container.sign-in::before {
            transform: translate(0, 0);
            left: 50%;
        }

        .login-container.sign-up::before {
            transform: translate(-100%, 0);
            left: 50%;
        }

        /* RESPONSIVE */
        @media only screen and (max-width: 425px) {

            .login-container::before,
            .login-container.sign-in::before,
            .login-container.sign-up::before {
                height: 100vh;
                border-bottom-left-radius: 0;
                border-top-right-radius: 0;
                z-index: 0;
                transform: none;
                left: 0;
            }

            .login-container.sign-in .col.sign-in,
            .login-container.sign-up .col.sign-up {
                transform: translateY(0);
            }

            .content-row {
                align-items: flex-start !important;
            }

            .content-row .col {
                transform: translateY(0);
                background-color: unset;
            }

            .col {
                width: 100%;
                position: absolute;
                padding: 2rem;
                background-color: var(--white);
                border-top-right-radius: 2rem;
                border-top-left-radius: 2rem;
                transform: translateY(100%);
                transition: 1s ease-in-out;
            }

            .row {
                align-items: flex-end;
                justify-content: flex-end;
            }

            .form,
            .social-list {
                box-shadow: none;
                margin: 0;
                padding: 0;
            }

            .text {
                margin: 0;
            }

            .text p {
                display: none;
            }

            .text h2 {
                margin: .5rem;
                font-size: 2rem;
            }
        }




.lgsimm{
    padding-top: 200px;
}