.container2 {
    display: flex;
    margin: 40px auto; /* Center the container horizontally */
    align-items: center;
    padding-right: 200px;
}

.left-side {
    flex: 2; /* Increase the size of the left side */
    padding-left: 300px; /* Increase padding */
}

/* Add transition effect */
.slide-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}

.slide-content {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

    .slide-content > div {
        min-width: 100%;
        box-sizing: border-box;
    }

.right-side {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 200px;
}

.phoneInput {
    display: flex;
    flex-direction: column;
    width: fit-content;
    position: static;
    max-width: 300px; /* Increase max-width */
}

    .phoneInput label.text {
        font-size: 1.5rem; /* Increase font size */
        color: #37A15B;
        font-weight: 700;
        position: relative;
        top: 0.5rem;
        margin: 0 0 0 7px;
        padding: 0 3px;
        background: #ffffff;
        width: fit-content;
    }

    .phoneInput input[type="text"].input {
        padding: 20px 15px; /* Increase padding */
        font-size: 1.2rem; /* Increase font size */
        border: 2px #37A15B solid;
        border-radius: 10px;
        background: #ffffff;
    }

    .phoneInput button {
        padding: 15px 20px; /* Increase padding */
        font-size: 1.2rem; /* Increase font size */
        background-color: #37A15B;
        color: #ffffff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 10px; /* Add margin for spacing */
    }

    .phoneInput input[type="text"].input:focus {
        outline: none;
    }

.otpInput {
    display: flex;
    gap: 10px; /* Increase gap */
    margin-top: 20px; /* Increase margin */
}

    .otp-label {
        font-size: 1.1rem; /* Increase font size */
        color: #000;
        font-weight: 700;
        margin-bottom: 10px; /* Add margin below */
    }

    .otpInput input[type="text"] {
        width: 50px; /* Increase width */
        height: 50px; /* Increase height */
        text-align: center;
        font-size: 1.5rem; /* Increase font size */
        border: 2px #37A15B solid;
        border-radius: 5px;
        background: #ffffff;
    }

        .otpInput input[type="text"]:focus {
            outline: none;
            border-color: #2a7a4b;
        }

/*OTP BUTTON*/
.verify-otp-button {
    padding: 15px 20px; /* Increase padding */
    font-size: 1.2rem; /* Increase font size */
    background-color: #37A15B; /* Set background color */
    color: #ffffff; /* Set text color */
    border: none; /* Remove border */
    border-radius: 5px; /* Add border radius */
    cursor: pointer; /* Change cursor to pointer */
    margin-top: 10px; /* Add margin for spacing */
    transition: background-color 0.3s ease; /* Add transition for background color */
}

    .verify-otp-button:hover {
        background-color: #2a7a4b; /* Change background color on hover */
    }

.loader {
    display: block;
    --height-of-loader: 6px; /* Increase height */
    --loader-color: #438058;
    width: 150px; /* Increase width */
    height: var(--height-of-loader);
    border-radius: 30px;
    background-color: rgba(0,0,0,0.2);
    position: relative;
}

    .loader::before {
        content: "";
        position: absolute;
        background: var(--loader-color);
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
        border-radius: 30px;
        animation: moving 1s ease-in-out infinite;
    }

/*PASSWORD FIELD*/
.passwordInput {
    display: flex;
    flex-direction: column;
    margin-top: 20px; /* Add margin for spacing */
}

    .passwordInput label.text {
        font-size: 1.5rem; /* Increase font size */
        color: #37A15B;
        font-weight: 700;
        position: relative;
        top: 0.5rem;
        margin: 0 0 0 7px;
        padding: 0 3px;
        background: #ffffff;
        width: fit-content;
    }

    .passwordInput input[type="password"].input {
        padding: 20px 15px;
        font-size: 1.2rem;
        border: 2px #37A15B solid;
        border-radius: 10px;
        background: #ffffff;
        width: 100%;
        max-width: 350px; /* Add this line */
        box-sizing: border-box; /* Ensure padding doesn't exceed max-width */
    }

        .passwordInput input[type="password"].input:focus {
            outline: none;
        }

    .passwordInput button {
        padding: 15px 20px;
        font-size: 1.2rem;
        background-color: #37A15B;
        color: #ffffff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 10px;
        width: 100%;
        max-width: 350px; /* Match the input field width */
        box-sizing: border-box;
    }

@keyframes moving {
    50% {
        width: 100%;
    }

    100% {
        width: 0;
        right: 0;
        left: unset;
    }
}

/* New styles for OTP Verification title and instruction */
.left-side h4 {
    font-size: 2rem; /* Set font size */
    color: #37A15B; /* Set color */
    margin-bottom: 10px; /* Add margin below */
}

.left-side p {
    font-size: 1.2rem; /* Set font size */
    color: #555; /* Set color */
    margin-bottom: 20px; /* Add margin below */
}

@media (max-width: 768px) {
    .container2 {
        flex-direction: column; /* Stack elements vertically */
        padding-right: 0; /* Remove right padding */
        margin: 50px auto; /* Adjust margin for mobile */
    }

    .left-side {
        flex: 1; /* Make left side take full width */
        padding-left: 20px; /* Adjust padding for mobile */
        padding-right: 20px; /* Add right padding for mobile */
        display: flex;
        flex-direction: column;
        align-items: center; /* Center content horizontally */
    }

    .right-side {
        display: none; /* Hide right side on mobile */
    }

    .phoneInput {
        max-width: 100%; /* Make inputs take full width */
    }

    .otpInput {
        justify-content: space-between; /* Distribute OTP inputs evenly */
        gap: 0px; /* Reduce gap between OTP inputs */
    }

        .otpInput input[type="text"] {
            width: 40px; /* Adjust width for mobile */
            height: 40px; /* Adjust height for mobile */
        }

    .verify-otp-button, .phoneInput button, .passwordInput button {
        width: 100%; /* Make buttons take full width */
    }

    /* Center password input and button */
    .passwordInput {
        align-items: center; /* Center content horizontally */
        width: 100%; /* Make container take full width */
    }

    .passwordInput .text{
        align-items: center; /* Center content horizontally */
        width: 100%; /* Make container take full width */
    }

        .passwordInput input[type="password"].input {
            width: 100%; /* Make input take full width */
            max-width: 300px; /* Set max-width for input */
        }

        .passwordInput button {
            width: 100%; /* Make button take full width */
            max-width: 300px; /* Set max-width for button */
        }
}