@media (min-width: 768px){
    body {
        font-family: 'Poppins', sans-serif;
        background-image: url("bg..avif");
        background-repeat: no-repeat;
        background-size: cover;  
        background-position: center;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }
    .login-container {
        background: #414040;
        opacity: 0.9;
        border-radius: 15px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        display: inline-flex;
        justify-content: center;
        align-items: center;
    
        width:50vw;
        height:70vh;
        transition: transform 0.3s;
    }
    .signup-container {
        background: #414040;
        opacity: 0.9;
        border-radius: 15px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        display: inline-flex;
        justify-content: center;
        align-items: center;
    
        width:50vw;
        height:80vh;
        transition: transform 0.3s;
    }
    .left{

        float: left;
        width:50%;
        height: 70%;
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }
    .right{
        float: right;
        display: flex;
        flex-direction: column;
        justify-content: center;

        gap:15px;
        width:45%;
    
    }
    .login-container:hover {
        transform: scale(1.02);
    }

    .input-group {
        margin-bottom: 15px;
        text-align: left;
    }
    .input-group input {
        width: 80%;
        padding: 12px;
        gap:7px;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        background: #555;
        color: #fff;
        transition: background 0.3s;
    }
    .input-group input:focus {
        background: #666;
        outline: none;
    }
    .login-btn {
        width: 85%;
        padding: 12px;
        background: #6C5CE7;
        border: none;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        border-radius: 8px;
        margin-bottom: 10px;
        transition: 0.3s;
    }
    .login-btn:hover {
        background: #574B90;
    }
    .social-btn {
        width: 85%;
        padding: 5px;
        
        border: none;
        font-size: 16px;
        cursor: pointer;
        border-radius: 8px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: 0.3s;
    }
    .google-btn {
        background: #db4437;
        color: #fff;
    }
    .google-btn:hover {
        background: #b93b2e;
    }
    .instagram-btn {
        background: #bc2a8d;
        color: #fff;
    }
    .instagram-btn:hover {
        background: #9b2374;
    }
    .register-link {
        margin-top: 10px;
        display: block;
        font-size: 14px;
        color: #bbb;
    }
    .register-link a {
        color: #6C5CE7;
        text-decoration: none;
        font-weight: bold;
    }
    .register-link a:hover {
        text-decoration: underline;
    }
    .social-icon {
        width: 70px;
        height: 50px;
    }
}
@media (max-width: 768px){
    body {
        font-family: 'Poppins', sans-serif;
        background-image: url("bg..avif");
        background-repeat: no-repeat;
        background-size: cover;  
        background-position: center;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }
    .login-container {
        background: #3a3a3a;
        padding: 40px;
        opacity: 0.9;
        border-radius: 15px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        text-align: center;
        width: 80%;
        margin-left: 5%;
        margin-right: 5%;
        margin-bottom: 15px;
        margin-top: 15px;
        transition: transform 0.3s;
        max-width: 380px;
    }
    .login-container:hover {
        transform: scale(1.02);
    }
    .login-container img {
        width: 100px;
        margin-bottom: 20px;
    }
    .login-container h2 {
        margin-bottom: 20px;
        color: #e0e0e0;
    }
    .input-group {
        margin-bottom: 15px;
        text-align: left;
    }
    .input-group input {
        width: 93%;
        padding: 12px;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        background: #555;
        color: #fff;
        transition: background 0.3s;
    }
    .input-group input:focus {
        background: #666;
        outline: none;
    }
    .login-btn {
        width: 100%;
        padding: 12px;
        background: #6C5CE7;
        border: none;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        border-radius: 8px;
        margin-bottom: 10px;
        transition: 0.3s;
    }
    .login-btn:hover {
        background: #574B90;
    }
    .social-btn {
        width: 100%;
        padding: 12px;
        border: none;
        font-size: 16px;
        cursor: pointer;
        border-radius: 8px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: 0.3s;
    }
    .google-btn {
        background: #db4437;
        color: #fff;
    }
    .google-btn:hover {
        background: #b93b2e;
    }
    .instagram-btn {
        background: #bc2a8d;
        color: #fff;
    }
    .instagram-btn:hover {
        background: #9b2374;
    }
    .register-link {
        margin-top: 10px;
        display: block;
        font-size: 14px;
        color: #bbb;
    }
    .register-link a {
        color: #6C5CE7;
        text-decoration: none;
        font-weight: bold;
    }
    .register-link a:hover {
        text-decoration: underline;
    }
    .social-icon {
        width: 70px;
        height: 50px;
    }
}