/* General Layout for Left Background */
.leftBg {
    width: 100%;
    max-width: 411px; /* Limit width for larger screens */
    height: 100%; /* Adjust the height to fit the content */
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center the content vertically */
    align-items: center; /* Center horizontally */
    position: absolute;
    top: 8px;
    left: 8px;
    background-size: cover;
    background-position: center;
    z-index: 0; /* Lower than the main content */
}

/* Main text styling */
.mainText {
    color: #FFF;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-size: 62px;
    font-weight: 700;
    line-height: 64px;
    text-align: center;
    width: 100%;
    max-width: 200px; /* Adjust width for responsiveness */
    position: relative;
    z-index: 1; /* Ensure text is on top of other elements */
}

/* Details text styling */
.detailsText {
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    width: 100%;
    max-width: 200px; /* Adjust width for responsiveness */
    position: relative;
    z-index: 1;
}

/* Logo Styling */
.logoTale {
    height: 36px;
    width: 126px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 15px;
    z-index: 1;
}

/* Language Dropdown and Icon Styling */
.languageStyle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 10px;
    position: absolute;
    top: 8px;
    right: 8px; /* Move to top-right corner */
    padding: 8px;
    z-index: 1;
}

.language-dropdown {
    border: none;
    background-color: transparent;
    color: white;
    font-size: 14px;
}

/* Media Queries for Responsive Design */
/* Container for password reset form */
.container1 {
    display: flex;
    margin: 0 auto;
    gap: 10%;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding-top: 50px;
}

/* Password Strength Indicator */
.password-strength {
    padding-top: 20px;
}

.password-strength span {
    color: #dc3545;
}

/* Password Reset Button */
.reset-password-button {
    background: linear-gradient(90deg, #00BDA9 0%, #00C0FC 100%);
    width: 400px;
    height: 51px;
    padding: 16px;
    border-radius: 10px;
    color: white;
    text-align: center;
    line-height: 19px;
    font-family: 'TaleBlue', sans-serif;
    font-size: 14px;
    cursor: pointer;
    border: none;
    outline: none;
    margin-top: 20px;
}

/* Media Queries for Responsive Design */


/* For tablet devices */
@media (max-width: 768px) {
    .leftBg {
        max-width: 100%;
        height: auto;
        position: relative; /* Make leftBg relative to allow better positioning */
        margin-top: 30px; /* Ensure space between elements */
    }

    .mainText {
        font-size: 48px; /* Scale down the font size */
        max-width: 180px; /* Adjust max width */
    }

    .detailsText {
        font-size: 14px; /* Scale down font size */
        max-width: 180px; /* Adjust max width */
    }

    .logoTale {
        width: 30vw; /* Scale the logo */
        max-width: 150px;
    }

    .languageStyle {
        padding: 6px; /* Reduce padding */
    }
    .reset-password-button {
        width: 90%;
        font-size: 16px;
    }
}

/* For mobile devices */
@media (max-width: 480px) {
    .leftBg {
        /*max-width: 300px; !* Further reduce width *!*/
        height: auto;
        margin-top: 20px; /* Space above the leftBg */
    }

    .mainText {
        font-size: 36px; /* Scale down the font size */
        max-width: 160px; /* Adjust max width */
    }

    .detailsText {
        font-size: 14px; /* Scale down font size */
        max-width: 160px; /* Adjust max width */
    }

    .logoTale {
        width: 40vw; /* Increase logo size for smaller screens */
        max-width: 160px; /* Adjust max width */
    }

    .languageStyle {
        padding: 4px; /* Adjust padding */
    }

    .reset-password-button {
        width: 90%;
        font-size: 14px;
    }
}

/* Adjusting layout for mobile-friendly format */
@media (max-width: 600px) {
    .forgotPassword {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .leftBg {
        margin-top: 10px;
        width: 100%;
        position: relative;
    }

    .forgotPasswordTitle {
        font-size: 20px;
    }

    .forgotPasswordInfo {
        font-size: 14px;
    }

    .forgotPasswordForm input {
        width: 100%;
    }

    .languageStyle {
        position: absolute;
        top: 8px;
        right: 8px; /* Ensure the language dropdown stays in the top-right corner */
    }
}