body {
        line-height: normal;
        height: 100vh;
        margin: 0;
        padding: 0;
        overflow-y: hidden; /* Enable vertical scrolling */
        overflow-x: hidden; 
        display: flex;
      }

      .alter-image-for-login{
        position: fixed;
        height: 100%;
        left: 35%;
        z-index: 2;
        width: 100%;
      }


      input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #000 !important;
      }

      /* For Firefox */
      input:-moz-autofill {
          box-shadow: 0 0 0 30px white inset !important;
          -moz-text-fill-color: #000 !important;
      }

      /* General styling for the input fields */
      input {
          background-color: white; /* Your desired background color */
          color: black; /* Your desired text color */
      }
            :root {
        /* fonts */
        --font-inter: Inter;
        --font-poppins: Poppins;
        --button-label: Roboto;
        --checkbox: Montserrat;
        --font-gilroy: Gilroy;

        /* font sizes */
        --font-size-sm: 14px;
        --checkbox-size: 12px;
        --font-size-base: 16px;
        --font-size-33xl: 52px;
        --font-size-12xl: 31px;
        --font-size-23xl: 42px;
        --font-size-3xl-5: 22.5px;
        --font-size-base-3: 16.3px;
        --font-size-29xl: 48px;
        --font-size-10xl: 29px;
        --font-size-19xl: 38px;
        --button-label-size: 15px;
        --font-size-21xl: 40px;
        --font-size-5xl: 24px;
        --font-size-13xl: 32px;
        --font-size-lg: 18px;

        /* Colors */
        --color-white: #fff;
        --color-black: #000;
        --color-steelblue-200: #4796d6;
        --color-steelblue-100: #2271b1;
        --color-steelblue-300: rgba(88, 130, 193, 0.49);
        --color-steelblue-400: rgba(88, 130, 193, 0.28);
        --color-gray-500: #fcfcfc;
        --color-gray-100: #808080;
        --color-gray-400: #1e1e1e;
        --color-gray-200: #1a1a1a;
        --color-gray-300: rgba(255, 255, 255, 0.45);
        --color-dimgray-100: #6c6c6c;
        --color-dimgray: #666;
        --color-dimgray-200: #5b5b5b;
        --color-whitesmoke: #f2f2f5;
        --color-gainsboro: rgba(217, 217, 217, 0.04);
        --color-deepskyblue-200: #3faef1;
        --color-deepskyblue-100: #01bcf3;
        --color-deepskyblue-300: #00a3d9;
        --color-lightgray: #ccc;
        --color-darkgray: #a4a4a4;
        --color-darkgray-100: #999;
        --color-darkslateblue: #34395e;
        --color-darkslateblue-100: #003465;
        --color-darkslategray: #333;
        --color-silver: #bcbec0;

        /* Gaps */
        --gap-19xl: 38px;
        --gap-lgi: 19px;
        --gap-11xl: 30px;
        --gap-xs: 12px;
        --gap-xl: 20px;
        --gap-7xs: 6px;
        --gap-5xl: 24px;
        --gap-31xl: 50px;
        --gap-6xl: 25px;
        --gap-base: 16px;
        --gap-3xs: 10px;
        --gap-26xl: 45px;
        --gap-3xl: 22px;
        --gap-mini: 15px;
        --gap-5xs: 8px;
        --gap-8xs: 5px;

        /* Paddings */
        --padding-133xl: 152px;
        --padding-xl: 20px;
        --padding-22xl: 41px;
        --padding-sm: 14px;
        --padding-12xs: 1px;
        --padding-3xs: 10px;
        --padding-lgi: 19px;
        --padding-base: 16px;
        --padding-10xs-5: 2.5px;
        --padding-4xs: 9px;
        --padding-xs: 12px;
        --padding-101xl: 120px;
        --padding-41xl: 60px;
        --padding-19xl: 38px;
        --padding-31xl: 50px;
        --padding-6xl: 25px;
        --padding-11xl: 30px;
        --padding-lg: 18px;
        --padding-5xl: 24px;
        --padding-7xs: 6px;
        --padding-mini: 15px;
        --padding-sm-7: 13.7px;
        --padding-smi: 13px;
        --padding-4xl: 23px;
        --padding-8xs: 5px;
        --padding-7xs-1: 5.1px;
        --padding-43xl: 62px;
        --padding-63xl: 82px;
        --padding-151xl: 170px;
        --padding-97xl-3: 116.3px;
        --padding-66xl: 85px;
        --padding-21xl: 40px;
        --padding-7xl: 26px;
        --padding-8xl: 27px;
        --padding-5xs: 8px;
        --padding-81xl: 100px;
        --padding-91xl: 110px;
        --padding-52xl: 71px;
        --padding-3xl: 22px;

        /* Border radiuses */
        --br-5xs: 8px;
        --br-9xs: 4px;
        --br-51xl: 70px;
        --br-3xs: 10px;
        --br-lg-8: 18.8px;
        --br-5xl: 24px;
        --br-7xs: 6px;
        --br-17xl-5: 36.5px;
        --br-xs: 12px;
        --br-21xl: 40px;
      }


      .back,
      .welcome {
        margin: 0;
      }
      .welcome-back {
        margin: 0;
        width: 228px;
        position: relative;
        font-size: inherit;
        letter-spacing: -0.06em;
        line-height: 51.9px;
        font-weight: 700;
        font-family: inherit;
        display: inline-block;
        z-index: 3;
      }
      .username-or-email,
      .username-or-email1 {
        font-weight: 500;
        font-family: var(--font-inter);
        position: relative;
        line-height: 19px;
      }
      .username-or-email {
        font-size: var(--font-size-base);
        color: var(--color-gray-400);
        text-align: center;
        z-index: 3;
      }
      .username-or-email1 {
        width: 305px;
        border: 0;
        outline: 0;
        font-size: var(--font-size-sm);
        background-color: transparent;
        height: 19px;
        color: var(--color-dimgray-200);
        text-align: left;
        display: inline-block;
        padding: 0;
      }
      .username-container,
      .username-input-container {
        align-self: stretch;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
      }
      .username-input-container {
        border-radius: var(--br-5xs);
        border: 1px solid var(--color-dimgray-200);
        flex-direction: row;
        padding: var(--padding-xs) var(--padding-base);
        z-index: 3;
      }
      .username-container {
        flex-direction: column;
        padding: 0 0 var(--padding-4xs);
        gap: var(--gap-7xs);
      }
      .hidden-password-container,
      .password {
        font-family: var(--font-inter);
        font-weight: 500;
      }
      .password {
        position: relative;
        font-size: var(--font-size-base);
        line-height: 19px;
        color: var(--color-gray-400);
        text-align: center;
        display: inline-block;
        min-width: 75px;
        z-index: 3;
      }
      .hidden-password-container {
        width: 300px;
        border: 0;
        outline: 0;
        background-color: transparent;
        height: 21.5px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: var(--padding-10xs-5) 0 0;
        box-sizing: border-box;
        font-size: var(--font-size-sm);
        color: var(--color-dimgray-200);
      }
      .bxhide-icon {
        height: 24px;
        width: 24px;
        position: relative;
        overflow: hidden;
        flex-shrink: 0;
        min-height: 24px;
      }
      .password-container,
      .password-input-container {
        align-self: stretch;
        display: flex;
        align-items: flex-start;
      }
      .password-input-container {
        border-radius: var(--br-5xs);
        border: 1px solid var(--color-dimgray-200);
        flex-direction: row;
        justify-content: space-between;
        padding: var(--padding-3xs) var(--padding-lgi) var(--padding-3xs)
          var(--padding-base);
        gap: var(--gap-xl);
        z-index: 3;
      }
      .password-container {
        flex-direction: column;
        justify-content: flex-start;
        gap: var(--gap-7xs);
      }
      .forgot-password,
      .remember-me {
        position: relative;
        font-size: var(--checkbox-size);
        line-height: 20px;
        font-weight: 500;
        font-family: var(--font-inter);
        color: var(--color-black);
        text-align: center;
        display: inline-block;
        min-width: 83px;
        z-index: 3;
      }
      .forgot-password {
        letter-spacing: -0.01em;
        min-width: 95px;
      }
      .remember-forgot-password-conta,
      .remember-me-parent {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
      }
      .remember-me-parent {
        flex: 1;
        justify-content: space-between;
        gap: var(--gap-xl);
      }
      .remember-forgot-password-conta {
        width: 321px;
        justify-content: flex-end;
        padding: 0 var(--padding-12xs);
        box-sizing: border-box;
        max-width: 100%;
      }
      .username-password-container {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
        gap: var(--gap-xs);
        max-width: 100%;
      }
      .login {
        text-decoration: none;
        position: relative;
        font-size: var(--font-size-sm);
        line-height: 19px;
        font-weight: 600;
        font-family: var(--font-inter);
        color: var(--color-gray-500);
        text-align: center;
        display: inline-block;
        min-width: 38px;
      }
      .button-sign-in,
      .login-form-container {
        align-self: stretch;
        display: flex;
        align-items: flex-start;
      }
      .button-sign-in {
        cursor: pointer;
        border: 0;
        padding: var(--padding-sm) var(--padding-xl);
        background-color: var(--color-steelblue-100);
        border-radius: var(--br-5xs);
        flex-direction: row;
        justify-content: center;
        z-index: 3;
      }
      .button-sign-in:hover {
        background-color: var(--color-steelblue-200);
      }
      .login-form-container {
        margin: 0;
        flex-direction: column;
        justify-content: flex-start;
        gap: 60px;
        max-width: 100%;
      }
      .unsplashlpbydenbqqg-icon {
        position: absolute;
        top: -131px;
        left: -107px;
        width: 1513px;
        height: 1012px;
        object-fit: cover;
      }
      .circles-icon {
        position: absolute;
        top: -141px;
        left: -149.2px;
        width: 1169.4px;
        height: 1212px;
        z-index: 1;
      }
      .rectangle-input,
      .vector-icon {
        position: absolute;
        top: -39px;
        left: 640px;
        width: 977px;
        height: 828px;
        z-index: 2;
      }
      .rectangle-input {
        margin: 0;
        top: 474px;
        left: 877px;
        border-radius: var(--br-9xs);
        border: 1px solid var(--color-black);
        box-sizing: border-box;
        width: 14px;
        height: 14px;
        z-index: 3;
      }
      .image-8-icon {
        position: absolute;
        top: 275px;
        left: 135px;
        width: 338.7px;
        height: 200px;
        object-fit: contain;
        z-index: 2;
      }
      .background-image-container {
        width: 100%;
        height: 100%;
        position: absolute;
        margin: 0 !important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
      .new-login-1300750 {
        width: 100%;
        position: relative;
        box-shadow: -9px 4px 76px rgba(0, 0, 0, 0.25);
        border-radius: var(--br-5xs);
        background-color: var(--color-white);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: var(--padding-133xl) 83px var(--padding-133xl) 877px;
        box-sizing: border-box;
        gap: var(--gap-19xl);
        line-height: normal;
        letter-spacing: normal;
        text-align: left;
        font-size: var(--font-size-33xl);
        color: var(--color-steelblue-100);
        font-family: var(--font-inter);
      }
      @media screen and (max-width: 750px) {
        .welcome-back {
          font-size: var(--font-size-23xl);
          line-height: 42px;
        }
      }
      @media screen and (max-width: 675px) {
        .new-login-1300750 {
          gap: var(--gap-lgi);
          padding-left: 438px;
          padding-right: var(--padding-22xl);
          box-sizing: border-box;
        }
      }
      @media screen and (max-width: 450px) {
        .welcome-back {
          font-size: var(--font-size-12xl);
          line-height: 31px;
        }
        .remember-me-parent {
          flex-wrap: wrap;
          justify-content: center;
        }
        .login-form-container {
          gap: var(--gap-11xl);
        }
        .new-login-1300750 {
          padding-left: var(--padding-xl);
          box-sizing: border-box;
        }
      }