* {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         font-family: "Inter", sans-serif !important;
     }

     body {
         background: #ffffff;
         height: 100vh;
         display: flex;
     }

     /* LEFT IMAGE PANEL */
     .left {
         width: 50%;
         height: calc(100vh - 40px);
         border-radius: 15px;
         overflow: hidden;
         margin: 20px 0 20px 20px;
         position: relative;
     }

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

     .logo-left {
         position: absolute;
         top: 20px;
         left: 20px;
         z-index: 10;
     }

     .logo-left img {
         width: 100px;
         height: auto;
     }

/* RIGHT SIDE DECORATION */
.right {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

/* decorative container */
.right-design {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* circle shapes */
.circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
}

/* big blue */
.circle1 {
    width: 350px;
    height: 350px;
    background: #1a7ab5;
    top: -120px;
    right: -120px;
}

/* medium red */
.circle2 {
    width: 250px;
    height: 250px;
    background: #d90000;
    bottom: -80px;
    right: 120px;
}

/* small blue */
.circle3 {
    width: 150px;
    height: 150px;
    background: #1a7ab5;
    bottom: 60px;
    right: -40px;
}

/* keep form above design */
.container {
    position: relative;
    z-index: 2;
}

     .container {
         max-width: 500px;
         width: 100%;
     }

     .logo {
         display: none;
         width: 100%;
         text-align: center;
         margin-bottom: 60px;
     }

     .logo img {
         width: 150px;
         height: auto;
         display: block;
         margin: 0 auto;
     }

     /* SECTION TITLE */
     .title {
         font-size: 26px;
         font-weight: 700;
         margin-bottom: 20px;
         color: #111;
     }

     .title.mobile-title {
         display: none;
     }


     /* FLOATING INPUT FIELDS */
     .input-group {
         width: 100%;
         margin-bottom: 20px;
     }

     .input-group .input-inner {
         position: relative;
         width: 100%;
     }

     .input-group input {
         width: 100%;
         padding: 14px 10px;
         font-size: 16px;
         border: 1.5px solid #1a7ab5;
         border-radius: 10px;
         outline: none;
         background: transparent;
     }

     .input-group-password input {
         padding-right: 48px;
     }

     .input-group .password-toggle {
         position: absolute;
         top: 50%;
         right: 12px;
         transform: translateY(-50%);
         background: none;
         border: none;
         padding: 4px;
         cursor: pointer;
         color: #666;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .input-group .password-toggle:hover {
         color: #333;
     }

     .input-group .password-toggle .icon-eye,
     .input-group .password-toggle .icon-eye-off {
         display: block;
     }

     .input-group label {
         position: absolute;
         top: 50%;
         left: 14px;
         transform: translateY(-50%);
         font-size: 16px;
         color: #777;
         pointer-events: none;
         background: #fff;
         padding: 0 6px;
         transition: 0.25s ease;
     }

     .input-group input:focus + label,
     .input-group input:not(:placeholder-shown) + label {
         top: -1px;
         font-size: 14px;
         color: #1a7ab5;
     }

     /* FOCUS EFFECT */
     .input-group input:focus {
         border-color: #1a7ab5;
         box-shadow: 0 0 0 2px rgba(26, 122, 181, 0.15);
     }

     /* VALIDATION ERROR STATE */
     .input-group.has-error input {
         border-color: #d90000;
         box-shadow: none;
     }

     .input-group.has-error input:focus {
         border-color: #d90000;
         box-shadow: 0 0 0 2px rgba(217, 0, 0, 0.15);
     }

     .input-group.has-error label {
         color: #777;
     }

     .input-group .error-text {
         display: block;
         color: #d90000;
         font-size: 13px;
         margin-top: 6px;
         font-weight: 500;
     }


     /* LOGIN BUTTON */
     .login-btn {
         width: 100%;
         padding: 14px;
         background: #d90000;
         border: none;
         border-radius: 10px;
         font-size: 16px;
         font-weight: 600;
         color: #fff;
         cursor: pointer;
         margin: 10px 0 25px;
     }

     /* DIVIDER */
     .divider {
         display: flex;
         align-items: center;
         color: #666;
         margin: 20px 0;
     }

     .divider::before,
     .divider::after {
         content: "";
         flex: 1;
         height: 1px;
         background: #ccc;
     }

     .divider span {
         margin: 0 10px;
         font-size: 13px;
     }

     /* GOOGLE BUTTON */
     .google-btn {
         width: 100%;
         padding: 12px;
         border: 1px solid #ccc;
         border-radius: 10px;
         background: #fff;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 10px;
         cursor: pointer;
         font-size: 15px;
         font-weight: 500;
         color: #000;
         margin-bottom: 20px;
     }

     .google-btn img {
         width: 22px;
     }

     /* SIGN UP */
     .signup {
         text-align: center;
         font-size: 14px;
     }

     .signup a {
         color: #d90000;
         font-weight: 600;
         text-decoration: none;
     }

     .forgot-password {
         text-align: right;
         margin-bottom: 15px;
         font-size: 13px;
     }

     .forgot-password a {
         color: #d90000;
         text-decoration: none;
         font-weight: 500;
     }

     .forgot-password a:hover {
         text-decoration: underline;
     }

     /* RESPONSIVE */
     @media (max-width: 1200px) {
         .left {
             width: 45%;
             margin-left: 15px;
             margin-right: 10px;
         }
     }

     @media (max-width: 900px) {
         body {
             flex-direction: column;
             justify-content: space-between;
             height: 100vh;
             padding: 20px 10px;
         }

         .left {
             display: none;
         }

         .right {
             width: 100%;
             display: flex;
             flex-direction: column;
             justify-content: space-between;
             height: 100%;
             align-items: center;
         }

         .container {
             max-width: 100%;
             width: 100%;
             display: flex;
             flex-direction: column;
             justify-content: center;
             flex-grow: 1;
         }

         .logo {
             display: block;
         }

         /* MOBILE FLOATING INPUT FIX */
         .input-group {
             margin-bottom: 18px;
         }

         .input-group.has-error {
             margin-bottom: 20px;
         }

         .input-group input {
             font-size: 16px;
             padding: 14px 12px;
         }

         .input-group-password input {
             padding-right: 48px;
         }

         .input-group label {
             display: block;
             font-size: 14px;
             left: 12px;
         }

         /* FLOAT LABEL WHEN INPUT HAS VALUE OR FOCUS */
         .input-group input:focus+label,
         .input-group input:not(:placeholder-shown)+label {
             top: -1px;
             font-size: 14px;
             color: #1a7ab5;
         }


         /* Change title */
         .title {
             font-size: 14px;
             font-weight: 500;
             margin-bottom: 20px;
         }

         .title.mobile-title {
             display: block;
         }

         .title.desktop-title {
             display: none;
         }

         .signup {
             margin-top: auto;
             width: 100%;
         }
     }