@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -.02em;
    line-height: 120%;
    scroll-behavior: smooth;
    background-color: #010101;
}


:root{
    --background-color: #010101;
    --border-color: hsla(0, 0%, 56%, .6);
    --text-color: #fff;
    --inputText-color: hsla(0, 0%, 100%, 0.5);
    --desc-color: hsla(0, 0%, 100%, 0.7);



    --space4: 0.25rem;
    --space6: 0.375rem;
    --space8: 0.5rem;
    --space10: 0.625rem;
    --space12: 0.75rem;
    --space14: 0.875rem;
    --space16: 1rem;
    --space20: 1.25rem;
    --space24: 1.5rem;
    --space28: 1.75rem;
    --space32: 2rem;
    --space36: 2.25rem;
    --space40: 2.5rem;



    --font12:.75rem;
    --font14: 0.875rem;
    --font16: 1rem;
    --font18: 1.125rem;
    --font20: 1.25rem;
    --font22: 1.375rem;
    --font24: 1.5rem;
    --font28: 1.75rem;
    --font30: 1.875rem;
    --font32: 2rem;
    --font36: 2.25rem;
    --font40: 2.5rem;

}


@media only screen and (min-width: 1439px) {

    .main-container{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        padding: 2rem 3.5rem;


    }

    .left-section{
        display: flex;
        padding: var(--space20);
        width: 50%;
        height: 90vh;
        overflow: hidden;
        align-items: center;
        justify-content: center;
    }

    .left-section img{
        width: 90%;
        height: 100%;
        border-radius: 12px;
        object-fit: cover;

    }

    .form{
        display: flex;
        flex-direction: column;
        width: 50%;
        height: 90vh;
        align-items: center;
        justify-content: center;
    }

    .inner-form{
        width: 78%;
        display: flex;
        flex-direction: column;
        gap: var(--space32);
    }

    .headtext{
        gap: var(--space8);
        display: flex;
        flex-direction: column;
    }

    .headtext h1{
        font-size: var(--font32);
        color: var(--text-color);
        font-weight: bold;
    }

    .headtext p{
        font-size: var(--font16);
        color: var(--desc-color);
        font-weight: 300;
        color: var(--desc-color);
        line-height: 130%;
    }

    .form-content{
        display: flex;
        flex-direction: column;
        gap: var(--space24);
    }

    .input-box{
        display: flex;
        flex-direction: column;
        gap: var(--font16);
    }

    .input-box label{
        font-size: var(--font14);
        color: #fff;
        font-weight: 600;
    }


    .password-label{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: var(--font14);
        font-weight: 300;
        text-decoration: none;
    }

    .password-label a{
        color: var(--desc-color);
        text-decoration: none;
    }

    .password-label a:hover{
        text-decoration: underline;
        color: #fff;
    }

     .password-label a:focus{
        text-decoration: underline;
        color: #fff;
    }

    
    .input-container{
        padding: var(--space12) var(--space16);
        display: flex;
        border: .5px solid var(--border-color);
        border-radius: 8px;
        background-color: hsla(0, 0%, 100%, 0.05);
        gap: var(--space16);
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .input-container span{
        color: hsla(0, 0%, 100%, 0.7);
        background-color: transparent;
    }

    .input-container input{
        display: flex;
        flex-grow: 1;
        border: none;
        background-color: transparent;
        outline: none;
        color: var(--inputText-color);
        font-size: var(--font16);
        line-height: 130%;
    }

    .input-container:focus-within {
        border-color: #c4c4c4; /* Highlight border color */
        box-shadow: 0 0 0 3px rgba(75, 83, 92, 0.25); /* Optional: Adds a focus ring shadow */
  }


    .input-container:focus-within span {
        color: #fff; /* Change icon color on focus */
    }

    .rem-box{
        display: flex;
        justify-content: start;
        align-items: center;
        gap: var(--space8);
        margin: 0;
        padding: 0;
    }
    .rem-box label{
        font-size: var(--font14);
        color: var(--desc-color);
        font-weight: 300;
    }

    .rem-box input[type="checkbox"]{
        width: 1rem;
        height: 1rem;
    }

    .login-sign-btns{
        display: flex;
        flex-direction: column;
        gap: var(--space8);
        align-items: center;

    }

    .login-sign-btns button{
        padding: 0.844rem 1.5rem;
        font-size: var(--font16);
        font-weight: 600;
        background-color: #fff;
        color: #010101;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        width: 100%;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.15s ease;
        border: 1px solid hsla(0, 0%, 100%, 0);
    }

    .login-sign-btns button:hover{
        background-color: transparent;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }

     .login-sign-btns button:focus{
        background-color: transparent;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }

    .login-sign-btns button:active{
        transform: scale(0.98);
    }

    .login-sign-btns a{
        text-decoration: none;
        font-size: var(--font14);
        color: var(--desc-color);
    }

    .login-sign-btns a span:hover{
        color: #fff;
        text-decoration: underline;
    }

    .login-sign-btns a:active{
       text-decoration: underline;
    }

    .login-sign-btns a:visited{
       text-decoration: underline;
       color: var(--desc-color);
    }

    .login-sign-btns a span{
        color: #fff;
        font-weight: 600;
    }

    .separator{
        display: flex;
        align-items: center;
        text-align: center;
        color: var(--desc-color);
        font-size: var(--font14);
    }

    .separator::before,
    .separator::after {
        /* 2. Create the lines using pseudo-elements */
        content: '';
        
        /* Make the lines take up all available space */
        flex-grow: 1; 
        
        /* Style the actual line */
        height: 1px;
        background-color: #333; /* Dark gray color for the line on a black background */
    }

    .separator::before {
        /* 3. Add space between the left line and the "Or" text */
        margin-right: 1rem; 
        }

        .separator::after {
        /* 4. Add space between the "Or" text and the right line */
        margin-left: 1rem;
    }

    .social-login{
        display: flex;
        gap: var(--space16);
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .social-login button{
        padding: 0.75rem 2rem;
        width: 48%;
        font-size: var(--font16);
        font-weight: 500;
        background-color: transparent;
        color: var(--desc-color);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--space16);
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.15s ease, border-color 0.3s ease;
    }

    .social-login button img, .social-login button span{
        background-color: transparent;
    }

    .social-login button:active{
        transform: scale(0.98);
    }

    .social-login button:hover{
        background-color: #161616;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }

     .social-login button:focus{
        background-color: #252525;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }
            

    
}

@media only screen and (min-width: 1199px) and (max-width: 1439px) {

    .main-container{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        padding: 2rem 3rem;


    }

    .left-section{
        display: flex;
        padding: var(--space16);
        width: 50%;
        height: 90vh;
        overflow: hidden;
        align-items: center;
        justify-content: center;
    }

    .left-section img{
        width: 90%;
        height: 100%;
        border-radius: 12px;
        object-fit: cover;
    }

    .form{
        display: flex;
        flex-direction: column;
        width: 50%;
        height: 90vh;
        align-items: center;
        justify-content: center;
    }

    .inner-form{
        width: 80%;
        display: flex;
        flex-direction: column;
        gap: var(--space28);
    }

    .headtext{
        gap: var(--space8);
        display: flex;
        flex-direction: column;
    }

    .headtext h1{
        font-size: var(--font28);
        color: var(--text-color);
        font-weight: bold;
    }

    .headtext p{
        font-size: var(--font14);
        color: var(--desc-color);
        font-weight: 300;
        color: var(--desc-color);
        line-height: 130%;
    }

    .form-content{
        display: flex;
        flex-direction: column;
        gap: var(--space20);
    }

    .input-box{
        display: flex;
        flex-direction: column;
        gap: var(--font16);
    }

    .input-box label{
        font-size: var(--font14);
        color: #fff;
        font-weight: 600;
    }


    .password-label{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: var(--font14);
        font-weight: 300;
        text-decoration: none;
    }

    .password-label a{
        color: var(--desc-color);
        text-decoration: none;
    }

    .password-label a:hover{
        text-decoration: underline;
        color: #fff;
    }

     .password-label a:focus{
        text-decoration: underline;
        color: #fff;
    }

    
    .input-container{
        padding: var(--space12) var(--space16);
        display: flex;
        border: .5px solid var(--border-color);
        border-radius: 8px;
        background-color: hsla(0, 0%, 100%, 0.05);
        gap: var(--space16);
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .input-container span{
        color: hsla(0, 0%, 100%, 0.7);
        background-color: transparent;
    }

    .input-container input{
        display: flex;
        flex-grow: 1;
        border: none;
        background-color: transparent;
        outline: none;
        color: var(--inputText-color);
        font-size: var(--font16);
        line-height: 130%;
    }

    .input-container:focus-within {
        border-color: #c4c4c4; /* Highlight border color */
        box-shadow: 0 0 0 3px rgba(75, 83, 92, 0.25); /* Optional: Adds a focus ring shadow */
  }


    .input-container:focus-within span {
        color: #fff; /* Change icon color on focus */
    }

    .rem-box{
        display: flex;
        justify-content: start;
        align-items: center;
        gap: var(--space8);
        margin: 0;
        padding: 0;
    }
    .rem-box label{
        font-size: var(--font14);
        color: var(--desc-color);
        font-weight: 300;
    }

    .rem-box input[type="checkbox"]{
        width: 1rem;
        height: 1rem;
    }

    .login-sign-btns{
        display: flex;
        flex-direction: column;
        gap: var(--space8);
        align-items: center;

    }

    .login-sign-btns button{
        padding: 0.844rem 1.5rem;
        font-size: var(--font16);
        font-weight: 600;
        background-color: #fff;
        color: #010101;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        width: 100%;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.15s ease;
        border: 1px solid hsla(0, 0%, 100%, 0);
    }

    .login-sign-btns button:hover{
        background-color: transparent;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }

     .login-sign-btns button:focus{
        background-color: transparent;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }

    .login-sign-btns button:active{
        transform: scale(0.98);
    }

    .login-sign-btns a{
        text-decoration: none;
        font-size: var(--font14);
        color: var(--desc-color);
    }

    .login-sign-btns a span:hover{
        color: #fff;
        text-decoration: underline;
    }

    .login-sign-btns a:active{
       text-decoration: underline;
    }

    .login-sign-btns a:visited{
       text-decoration: underline;
       color: var(--desc-color);
    }

    .login-sign-btns a span{
        color: #fff;
        font-weight: 600;
    }

    .separator{
        display: flex;
        align-items: center;
        text-align: center;
        color: var(--desc-color);
        font-size: var(--font14);
    }

    .separator::before,
    .separator::after {
        /* 2. Create the lines using pseudo-elements */
        content: '';
        
        /* Make the lines take up all available space */
        flex-grow: 1; 
        
        /* Style the actual line */
        height: 1px;
        background-color: #333; /* Dark gray color for the line on a black background */
    }

    .separator::before {
        /* 3. Add space between the left line and the "Or" text */
        margin-right: 1rem; 
        }

        .separator::after {
        /* 4. Add space between the "Or" text and the right line */
        margin-left: 1rem;
    }

    .social-login{
        display: flex;
        gap: var(--space16);
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .social-login button{
        padding: 0.75rem 1.75rem;
        width: 48%;
        font-size: var(--font16);
        font-weight: 500;
        background-color: transparent;
        color: var(--desc-color);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--space12);
        white-space: nowrap;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.15s ease, border-color 0.3s ease;
    }

    .social-login button img, .social-login button span{
        background-color: transparent;
    }

    .social-login button:active{
        transform: scale(0.98);
    }

    .social-login button:hover{
        background-color: #161616;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }

     .social-login button:focus{
        background-color: #252525;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }
            

    
}

@media only screen and (min-width: 1023px) and (max-width: 1199px) {

    .main-container{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        padding: 2rem 3rem;


    }

    .left-section{
        display: flex;
        padding: var(--space16);
        width: 50%;
        height: 90vh;
        overflow: hidden;
        align-items: center;
        justify-content: center;
    }

    .left-section img{
        width: 90%;
        height: 100%;
        border-radius: 12px;
        object-fit: cover;
    }

    .form{
        display: flex;
        flex-direction: column;
        width: 50%;
        height: 90vh;
        align-items: center;
        justify-content: center;
    }

    .inner-form{
        width: 80%;
        display: flex;
        flex-direction: column;
        gap: var(--space28);
    }

    .headtext{
        gap: var(--space8);
        display: flex;
        flex-direction: column;
    }

    .headtext h1{
        font-size: var(--font24);
        color: var(--text-color);
        font-weight: bold;
    }

    .headtext p{
        font-size: var(--font12);
        color: var(--desc-color);
        font-weight: 300;
        color: var(--desc-color);
        line-height: 130%;
    }

    .form-content{
        display: flex;
        flex-direction: column;
        gap: var(--space16);
    }

    .input-box{
        display: flex;
        flex-direction: column;
        gap: var(--font12);
    }

    .input-box label{
        font-size: var(--font12);
        color: #fff;
        font-weight: 600;
    }


    .password-label{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: var(--font12);
        font-weight: 300;
        text-decoration: none;
    }

    .password-label a{
        color: var(--desc-color);
        text-decoration: none;
    }

    .password-label a:hover{
        text-decoration: underline;
        color: #fff;
    }

     .password-label a:focus{
        text-decoration: underline;
        color: #fff;
    }

    
    .input-container{
        padding: var(--space12) var(--space16);
        display: flex;
        border: .5px solid var(--border-color);
        border-radius: 8px;
        background-color: hsla(0, 0%, 100%, 0.05);
        gap: var(--space16);
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .input-container span{
        color: hsla(0, 0%, 100%, 0.7);
        background-color: transparent;
        font-size: var(--font20);
    }

    .input-container input{
        display: flex;
        flex-grow: 1;
        border: none;
        background-color: transparent;
        outline: none;
        color: var(--inputText-color);
        font-size: var(--font14);
        line-height: 130%;
    }

    .input-container:focus-within {
        border-color: #c4c4c4; /* Highlight border color */
        box-shadow: 0 0 0 3px rgba(75, 83, 92, 0.25); /* Optional: Adds a focus ring shadow */
  }


    .input-container:focus-within span {
        color: #fff; /* Change icon color on focus */
    }

    .rem-box{
        display: flex;
        justify-content: start;
        align-items: center;
        gap: var(--space8);
        margin: 0;
        padding: 0;
    }
    .rem-box label{
        font-size: var(--font12);
        color: var(--desc-color);
        font-weight: 300;
    }

    .rem-box input[type="checkbox"]{
        width: 1rem;
        height: 1rem;
    }

    .login-sign-btns{
        display: flex;
        flex-direction: column;
        gap: var(--space8);
        align-items: center;

    }

    .login-sign-btns button{
        padding: 0.844rem 1.5rem;
        font-size: var(--font14);
        font-weight: 600;
        background-color: #fff;
        color: #010101;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        width: 100%;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.15s ease;
        border: 1px solid hsla(0, 0%, 100%, 0);
    }

    .login-sign-btns button:hover{
        background-color: transparent;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }

     .login-sign-btns button:focus{
        background-color: transparent;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }

    .login-sign-btns button:active{
        transform: scale(0.98);
    }

    .login-sign-btns a{
        text-decoration: none;
        font-size: var(--font12);
        color: var(--desc-color);
    }

    .login-sign-btns a span:hover{
        color: #fff;
        text-decoration: underline;
    }

    .login-sign-btns a:active{
       text-decoration: underline;
    }

    .login-sign-btns a:visited{
       text-decoration: underline;
       color: var(--desc-color);
    }

    .login-sign-btns a span{
        color: #fff;
        font-weight: 600;
    }

    .separator{
        display: flex;
        align-items: center;
        text-align: center;
        color: var(--desc-color);
        font-size: var(--font14);
    }

    .separator::before,
    .separator::after {
        /* 2. Create the lines using pseudo-elements */
        content: '';
        
        /* Make the lines take up all available space */
        flex-grow: 1; 
        
        /* Style the actual line */
        height: 1px;
        background-color: #333; /* Dark gray color for the line on a black background */
    }

    .separator::before {
        /* 3. Add space between the left line and the "Or" text */
        margin-right: 1rem; 
        }

        .separator::after {
        /* 4. Add space between the "Or" text and the right line */
        margin-left: 1rem;
    }

    .social-login{
        display: flex;
        gap: var(--space12);
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .social-login button{
        padding: 0.75rem 1.75rem;
        width: 48%;
        font-size: var(--font14);
        font-weight: 500;
        background-color: transparent;
        color: var(--desc-color);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--space12);
        white-space: nowrap;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.15s ease, border-color 0.3s ease;
    }

    .social-login button img, .social-login button span{
        background-color: transparent;
    }

    .social-login button img{
        width: 20px;
        height: 20px;
    }

    .social-login button:active{
        transform: scale(0.98);
    }

    .social-login button:hover{
        background-color: #161616;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }

     .social-login button:focus{
        background-color: #252525;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }
            

    
}

@media only screen and (min-width: 767px) and (max-width: 1023px) {

    .main-container{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 1rem;


    }

    .left-section{
        display: flex;
        padding: var(--space16);
        width: 100%;
        height: 38vh;
        overflow: hidden;
        align-items: center;
        justify-content: center;
    }

    .left-section img{
        width: 100%;
        height: 100%;
        border-radius: 12px;
        object-fit: cover;
    }

    .form{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        align-items: center;
        padding: 1rem;
        justify-content: center;
    }

    .inner-form{
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--space28);
    }

    .headtext{
        gap: var(--space8);
        display: flex;
        flex-direction: column;
    }

    .headtext h1{
        font-size: var(--font30);
        color: var(--text-color);
        font-weight: bold;
    }

    .headtext p{
        font-size: var(--font14);
        color: var(--desc-color);
        font-weight: 300;
        color: var(--desc-color);
        line-height: 130%;
    }

    .form-content{
        display: flex;
        flex-direction: column;
        gap: var(--space24);
    }

    .input-box{
        display: flex;
        flex-direction: column;
        gap: var(--font16);
    }

    .input-box label{
        font-size: var(--font14);
        color: #fff;
        font-weight: 600;
    }


    .password-label{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: var(--font14);
        font-weight: 300;
        text-decoration: none;
    }

    .password-label a{
        color: var(--desc-color);
        text-decoration: none;
    }

    .password-label a:hover{
        text-decoration: underline;
        color: #fff;
    }

     .password-label a:focus{
        text-decoration: underline;
        color: #fff;
    }

    
    .input-container{
        padding: var(--space12) var(--space16);
        display: flex;
        border: .5px solid var(--border-color);
        border-radius: 8px;
        background-color: hsla(0, 0%, 100%, 0.05);
        gap: var(--space16);
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .input-container span{
        color: hsla(0, 0%, 100%, 0.7);
        background-color: transparent;
        font-size: var(--font24);
    }

    .input-container input{
        display: flex;
        flex-grow: 1;
        border: none;
        background-color: transparent;
        outline: none;
        color: var(--inputText-color);
        font-size: var(--font14);
        line-height: 130%;
    }

    .input-container:focus-within {
        border-color: #c4c4c4; /* Highlight border color */
        box-shadow: 0 0 0 3px rgba(75, 83, 92, 0.25); /* Optional: Adds a focus ring shadow */
  }


    .input-container:focus-within span {
        color: #fff; /* Change icon color on focus */
    }

    .rem-box{
        display: flex;
        justify-content: start;
        align-items: center;
        gap: var(--space8);
        margin: 0;
        padding: 0;
    }
    .rem-box label{
        font-size: var(--font14);
        color: var(--desc-color);
        font-weight: 300;
    }

    .rem-box input[type="checkbox"]{
        width: 1rem;
        height: 1rem;
    }

    .login-sign-btns{
        display: flex;
        flex-direction: column;
        gap: var(--space8);
        align-items: center;

    }

    .login-sign-btns button{
        padding: 0.844rem 1.5rem;
        font-size: var(--font16);
        font-weight: 600;
        background-color: #fff;
        color: #010101;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        width: 100%;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.15s ease;
        border: 1px solid hsla(0, 0%, 100%, 0);
    }

    .login-sign-btns button:hover{
        background-color: transparent;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }

     .login-sign-btns button:focus{
        background-color: transparent;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }

    .login-sign-btns button:active{
        transform: scale(0.98);
    }

    .login-sign-btns a{
        text-decoration: none;
        font-size: var(--font14);
        color: var(--desc-color);
    }

    .login-sign-btns a span:hover{
        color: #fff;
        text-decoration: underline;
    }

    .login-sign-btns a:active{
       text-decoration: underline;
    }

    .login-sign-btns a:visited{
       text-decoration: underline;
       color: var(--desc-color);
    }

    .login-sign-btns a span{
        color: #fff;
        font-weight: 600;
    }

    .separator{
        display: flex;
        align-items: center;
        text-align: center;
        color: var(--desc-color);
        font-size: var(--font14);
    }

    .separator::before,
    .separator::after {
        /* 2. Create the lines using pseudo-elements */
        content: '';
        
        /* Make the lines take up all available space */
        flex-grow: 1; 
        
        /* Style the actual line */
        height: 1px;
        background-color: #333; /* Dark gray color for the line on a black background */
    }

    .separator::before {
        /* 3. Add space between the left line and the "Or" text */
        margin-right: 1rem; 
        }

        .separator::after {
        /* 4. Add space between the "Or" text and the right line */
        margin-left: 1rem;
    }

    .social-login{
        display: flex;
        gap: var(--space12);
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .social-login button{
        padding: 0.75rem 1.75rem;
        width: 48%;
        font-size: var(--font16);
        font-weight: 500;
        background-color: transparent;
        color: var(--desc-color);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--space12);
        white-space: nowrap;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.15s ease, border-color 0.3s ease;
    }

    .social-login button img, .social-login button span{
        background-color: transparent;
    }

    .social-login button img{
        width: 24px;
        height: 24px;
    }

    .social-login button:active{
        transform: scale(0.98);
    }

    .social-login button:hover{
        background-color: #161616;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }

     .social-login button:focus{
        background-color: #252525;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }
            

    
}

@media only screen and (min-width: 413px) and (max-width: 767px) {

    .main-container{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 1rem;


    }

    .left-section{
        display: flex;
        padding: var(--space16);
        width: 100%;
        height: 48vh;
        overflow: hidden;
        align-items: center;
        justify-content: center;
    }

    .left-section img{
        width: 100%;
        height: 100%;
        border-radius: 12px;
        object-fit: cover;
    }

    .form{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        align-items: center;
        padding: 1rem;
        justify-content: center;
    }

    .inner-form{
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--space28);
    }

    .headtext{
        gap: var(--space8);
        display: flex;
        flex-direction: column;
    }

    .headtext h1{
        font-size: var(--font30);
        color: var(--text-color);
        font-weight: bold;
    }

    .headtext p{
        font-size: var(--font14);
        color: var(--desc-color);
        font-weight: 300;
        color: var(--desc-color);
        line-height: 130%;
    }

    .form-content{
        display: flex;
        flex-direction: column;
        gap: var(--space24);
    }

    .input-box{
        display: flex;
        flex-direction: column;
        gap: var(--font16);
    }

    .input-box label{
        font-size: var(--font14);
        color: #fff;
        font-weight: 600;
    }


    .password-label{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: var(--font14);
        font-weight: 300;
        text-decoration: none;
    }

    .password-label a{
        color: var(--desc-color);
        text-decoration: none;
    }

    .password-label a:hover{
        text-decoration: underline;
        color: #fff;
    }

     .password-label a:focus{
        text-decoration: underline;
        color: #fff;
    }

    
    .input-container{
        padding: var(--space12) var(--space16);
        display: flex;
        border: .5px solid var(--border-color);
        border-radius: 8px;
        background-color: hsla(0, 0%, 100%, 0.05);
        gap: var(--space16);
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .input-container span{
        color: hsla(0, 0%, 100%, 0.7);
        background-color: transparent;
        font-size: var(--font24);
    }

    .input-container input{
        display: flex;
        flex-grow: 1;
        border: none;
        background-color: transparent;
        outline: none;
        color: var(--inputText-color);
        font-size: var(--font14);
        line-height: 130%;
    }

    .input-container:focus-within {
        border-color: #c4c4c4; /* Highlight border color */
        box-shadow: 0 0 0 3px rgba(75, 83, 92, 0.25); /* Optional: Adds a focus ring shadow */
  }


    .input-container:focus-within span {
        color: #fff; /* Change icon color on focus */
    }

    .rem-box{
        display: flex;
        justify-content: start;
        align-items: center;
        gap: var(--space8);
        margin: 0;
        padding: 0;
    }
    .rem-box label{
        font-size: var(--font14);
        color: var(--desc-color);
        font-weight: 300;
    }

    .rem-box input[type="checkbox"]{
        width: 1rem;
        height: 1rem;
    }

    .login-sign-btns{
        display: flex;
        flex-direction: column;
        gap: var(--space8);
        align-items: center;

    }

    .login-sign-btns button{
        padding: 0.844rem 1.5rem;
        font-size: var(--font16);
        font-weight: 600;
        background-color: #fff;
        color: #010101;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        width: 100%;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.15s ease;
        border: 1px solid hsla(0, 0%, 100%, 0);
    }

    .login-sign-btns button:hover{
        background-color: transparent;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }

     .login-sign-btns button:focus{
        background-color: transparent;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }

    .login-sign-btns button:active{
        transform: scale(0.98);
    }

    .login-sign-btns a{
        text-decoration: none;
        font-size: var(--font14);
        color: var(--desc-color);
    }

    .login-sign-btns a span:hover{
        color: #fff;
        text-decoration: underline;
    }

    .login-sign-btns a:active{
       text-decoration: underline;
    }

    .login-sign-btns a:visited{
       text-decoration: underline;
       color: var(--desc-color);
    }

    .login-sign-btns a span{
        color: #fff;
        font-weight: 600;
    }

    .separator{
        display: flex;
        align-items: center;
        text-align: center;
        color: var(--desc-color);
        font-size: var(--font14);
    }

    .separator::before,
    .separator::after {
        /* 2. Create the lines using pseudo-elements */
        content: '';
        
        /* Make the lines take up all available space */
        flex-grow: 1; 
        
        /* Style the actual line */
        height: 1px;
        background-color: #333; /* Dark gray color for the line on a black background */
    }

    .separator::before {
        /* 3. Add space between the left line and the "Or" text */
        margin-right: 1rem; 
        }

        .separator::after {
        /* 4. Add space between the "Or" text and the right line */
        margin-left: 1rem;
    }

    .social-login{
        display: flex;
        gap: var(--space16);
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .social-login button{
        padding: 0.75rem 1.5rem;
        width: 100%;
        font-size: var(--font16);
        font-weight: 500;
        background-color: transparent;
        color: var(--desc-color);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--space12);
        white-space: nowrap;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.15s ease, border-color 0.3s ease;
    }

    .social-login button img, .social-login button span{
        background-color: transparent;
    }

    .social-login button img{
        width: 24px;
        height: 24px;
    }

    .social-login button:active{
        transform: scale(0.98);
    }

    .social-login button:hover{
        background-color: #161616;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }

     .social-login button:focus{
        background-color: #252525;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }
            

    
}

@media only screen and (min-width: 374px) and (max-width: 413px) {

    .main-container{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 1rem;


    }

    .left-section{
        display: flex;
        padding: var(--space16);
        width: 100%;
        height: 40vh;
        overflow: hidden;
        align-items: center;
        justify-content: center;
    }

    .left-section img{
        width: 100%;
        height: 100%;
        border-radius: 12px;
        object-fit: cover;
    }

    .form{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        align-items: center;
        padding: 1rem;
        justify-content: center;
    }

    .inner-form{
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--space28);
    }

    .headtext{
        gap: var(--space8);
        display: flex;
        flex-direction: column;
    }

    .headtext h1{
        font-size: var(--font24);
        color: var(--text-color);
        font-weight: bold;
    }

    .headtext p{
        font-size: var(--font14);
        color: var(--desc-color);
        font-weight: 300;
        color: var(--desc-color);
        line-height: 130%;
    }

    .form-content{
        display: flex;
        flex-direction: column;
        gap: var(--space24);
    }

    .input-box{
        display: flex;
        flex-direction: column;
        gap: var(--font16);
    }

    .input-box label{
        font-size: var(--font14);
        color: #fff;
        font-weight: 600;
    }


    .password-label{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: var(--font14);
        font-weight: 300;
        text-decoration: none;
    }

    .password-label a{
        color: var(--desc-color);
        text-decoration: none;
    }

    .password-label a:hover{
        text-decoration: underline;
        color: #fff;
    }

     .password-label a:focus{
        text-decoration: underline;
        color: #fff;
    }

    
    .input-container{
        padding: var(--space12) var(--space16);
        display: flex;
        border: .5px solid var(--border-color);
        border-radius: 8px;
        background-color: hsla(0, 0%, 100%, 0.05);
        gap: var(--space16);
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .input-container span{
        color: hsla(0, 0%, 100%, 0.7);
        background-color: transparent;
        font-size: var(--font24);
    }

    .input-container input{
        display: flex;
        flex-grow: 1;
        border: none;
        background-color: transparent;
        outline: none;
        color: var(--inputText-color);
        font-size: var(--font14);
        line-height: 130%;
    }

    .input-container:focus-within {
        border-color: #c4c4c4; /* Highlight border color */
        box-shadow: 0 0 0 3px rgba(75, 83, 92, 0.25); /* Optional: Adds a focus ring shadow */
  }


    .input-container:focus-within span {
        color: #fff; /* Change icon color on focus */
    }

    .rem-box{
        display: flex;
        justify-content: start;
        align-items: center;
        gap: var(--space8);
        margin: 0;
        padding: 0;
    }
    .rem-box label{
        font-size: var(--font14);
        color: var(--desc-color);
        font-weight: 300;
    }

    .rem-box input[type="checkbox"]{
        width: 1rem;
        height: 1rem;
    }

    .login-sign-btns{
        display: flex;
        flex-direction: column;
        gap: var(--space8);
        align-items: center;

    }

    .login-sign-btns button{
        padding: 0.844rem 1.5rem;
        font-size: var(--font16);
        font-weight: 600;
        background-color: #fff;
        color: #010101;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        width: 100%;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.15s ease;
        border: 1px solid hsla(0, 0%, 100%, 0);
    }

    .login-sign-btns button:hover{
        background-color: transparent;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }

     .login-sign-btns button:focus{
        background-color: transparent;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }

    .login-sign-btns button:active{
        transform: scale(0.98);
    }

    .login-sign-btns a{
        text-decoration: none;
        font-size: var(--font14);
        color: var(--desc-color);
    }

    .login-sign-btns a span:hover{
        color: #fff;
        text-decoration: underline;
    }

    .login-sign-btns a:active{
       text-decoration: underline;
    }

    .login-sign-btns a:visited{
       text-decoration: underline;
       color: var(--desc-color);
    }

    .login-sign-btns a span{
        color: #fff;
        font-weight: 600;
    }

    .separator{
        display: flex;
        align-items: center;
        text-align: center;
        color: var(--desc-color);
        font-size: var(--font14);
    }

    .separator::before,
    .separator::after {
        /* 2. Create the lines using pseudo-elements */
        content: '';
        
        /* Make the lines take up all available space */
        flex-grow: 1; 
        
        /* Style the actual line */
        height: 1px;
        background-color: #333; /* Dark gray color for the line on a black background */
    }

    .separator::before {
        /* 3. Add space between the left line and the "Or" text */
        margin-right: 1rem; 
        }

        .separator::after {
        /* 4. Add space between the "Or" text and the right line */
        margin-left: 1rem;
    }

    .social-login{
        display: flex;
        gap: var(--space16);
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .social-login button{
        padding: 0.75rem 1.5rem;
        width: 100%;
        font-size: var(--font16);
        font-weight: 500;
        background-color: transparent;
        color: var(--desc-color);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--space12);
        white-space: nowrap;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.15s ease, border-color 0.3s ease;
    }

    .social-login button img, .social-login button span{
        background-color: transparent;
    }

    .social-login button img{
        width: 22px;
        height: 22px;
    }

    .social-login button:active{
        transform: scale(0.98);
    }

    .social-login button:hover{
        background-color: #161616;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }

     .social-login button:focus{
        background-color: #252525;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }
            

    
}

@media only screen and (min-width: 319px) and (max-width: 374px) {

    .main-container{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: .5rem;


    }

    .left-section{
        display: flex;
        padding: var(--space12);
        width: 100%;
        height: 40vh;
        overflow: hidden;
        align-items: center;
        justify-content: center;
    }

    .left-section img{
        width: 100%;
        height: 100%;
        border-radius: 12px;
        object-fit: cover;
    }

    .form{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        align-items: center;
        padding: .5rem;
        justify-content: center;
    }

    .inner-form{
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--space24);
    }

    .headtext{
        gap: var(--space8);
        display: flex;
        flex-direction: column;
    }

    .headtext h1{
        font-size: var(--font24);
        color: var(--text-color);
        font-weight: bold;
    }

    .headtext p{
        font-size: var(--font12);
        color: var(--desc-color);
        font-weight: 300;
        color: var(--desc-color);
        line-height: 130%;
    }

    .form-content{
        display: flex;
        flex-direction: column;
        gap: var(--space24);
    }

    .input-box{
        display: flex;
        flex-direction: column;
        gap: var(--font16);
    }

    .input-box label{
        font-size: var(--font12);
        color: #fff;
        font-weight: 600;
    }


    .password-label{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: var(--font12);
        font-weight: 300;
        text-decoration: none;
    }

    .password-label a{
        color: var(--desc-color);
        text-decoration: none;
    }

    .password-label a:hover{
        text-decoration: underline;
        color: #fff;
    }

     .password-label a:focus{
        text-decoration: underline;
        color: #fff;
    }

    
    .input-container{
        padding: var(--space12) var(--space16);
        display: flex;
        border: .5px solid var(--border-color);
        border-radius: 8px;
        background-color: hsla(0, 0%, 100%, 0.05);
        gap: var(--space10);
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .input-container span{
        color: hsla(0, 0%, 100%, 0.7);
        background-color: transparent;
        font-size: var(--font20);
    }

    .input-container input{
        display: flex;
        flex-grow: 1;
        border: none;
        background-color: transparent;
        outline: none;
        color: var(--inputText-color);
        font-size: var(--font14);
        line-height: 130%;
    }

    .input-container:focus-within {
        border-color: #c4c4c4; /* Highlight border color */
        box-shadow: 0 0 0 3px rgba(75, 83, 92, 0.25); /* Optional: Adds a focus ring shadow */
  }


    .input-container:focus-within span {
        color: #fff; /* Change icon color on focus */
    }

    .rem-box{
        display: flex;
        justify-content: start;
        align-items: center;
        gap: var(--space8);
        margin: 0;
        padding: 0;
    }
    .rem-box label{
        font-size: var(--font12);
        color: var(--desc-color);
        font-weight: 300;
    }

    .rem-box input[type="checkbox"]{
        width: 1rem;
        height: 1rem;
    }

    .login-sign-btns{
        display: flex;
        flex-direction: column;
        gap: var(--space8);
        align-items: center;

    }

    .login-sign-btns button{
        padding: 0.844rem 1.5rem;
        font-size: var(--font14); 
        font-weight: 600;
        background-color: #fff;
        color: #010101;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        width: 100%;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.15s ease;
        border: 1px solid hsla(0, 0%, 100%, 0);
    }

    .login-sign-btns button:hover{
        background-color: transparent;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }

     .login-sign-btns button:focus{
        background-color: transparent;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }

    .login-sign-btns button:active{
        transform: scale(0.98);
    }

    .login-sign-btns a{
        text-decoration: none;
        font-size: var(--font12);
        color: var(--desc-color);
    }

    .login-sign-btns a span:hover{
        color: #fff;
        text-decoration: underline;
    }

    .login-sign-btns a:active{
       text-decoration: underline;
    }

    .login-sign-btns a:visited{
       text-decoration: underline;
       color: var(--desc-color);
    }

    .login-sign-btns a span{
        color: #fff;
        font-weight: 600;
    }

    .separator{
        display: flex;
        align-items: center;
        text-align: center;
        color: var(--desc-color);
        font-size: var(--font12);
    }

    .separator::before,
    .separator::after {
        /* 2. Create the lines using pseudo-elements */
        content: '';
        
        /* Make the lines take up all available space */
        flex-grow: 1; 
        
        /* Style the actual line */
        height: 1px;
        background-color: #333; /* Dark gray color for the line on a black background */
    }

    .separator::before {
        /* 3. Add space between the left line and the "Or" text */
        margin-right: 1rem; 
        }

        .separator::after {
        /* 4. Add space between the "Or" text and the right line */
        margin-left: 1rem;
    }

    .social-login{
        display: flex;
        gap: var(--space16);
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .social-login button{
        padding: 0.75rem 1.5rem;
        width: 100%;
        font-size: var(--font14);
        font-weight: 500;
        background-color: transparent;
        color: var(--desc-color);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--space12);
        white-space: nowrap;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.15s ease, border-color 0.3s ease;
    }

    .social-login button img, .social-login button span{
        background-color: transparent;
    }

    .social-login button img{
        width: 20px;
        height: 20px;
    }

    .social-login button:active{
        transform: scale(0.98);
    }

    .social-login button:hover{
        background-color: #161616;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }

     .social-login button:focus{
        background-color: #252525;
        color: #fff;
        border: 1px solid hsl(0, 0%, 89%);
    }
            

    
}