body {
    font-family: 'Poppins', sans-serif; /* Apply Poppins font */
    background-color: #ffffff; /* White background for the body */
    color: #000000; /* Black text color for readability */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ensure body takes full viewport height */
    margin: 0;
}

.register-container {
    max-width: 400px;
    width: 100%;
    padding: 20px;
    padding-bottom: 0;
    background-color: #f9f9f9; /* Light gray background for the container */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* Slightly darker shadow for contrast */
    box-sizing: border-box; /* Include padding and border in element’s total width and height */
}

.register-container h1 {
    margin-bottom: 20px;
}

.register-container .alert {
    margin-bottom: 15px;
}

.register-container .alert-danger {
    background-color: #f44336; /* Red background for error alert */
    color: #fff; /* White text color */
}

.form-group{
    margin-bottom: 10px;
}

.register-container .form-control {
    color: #000; /* Black text color */
    border: 1px solid #ccc; /* Light gray border color */
    border-radius: 0;
}

.register-container .form-control::placeholder {
    color: #888; /* Placeholder text color */
}

.register-container .hai {
    background-color: #000; /* Black background for primary button */
    border: none; /* Remove border */
    color: #fff; /* White text color */
}

.register-container .hello {
    background-color: #9135ED; /* Black background for primary button */
    border: none; /* Remove border */
    color: #fff; /* White text color */
}

.register-container .hai:hover {
    background-color: #403f3f; /* Darker shade on hover */
}

.register-container .hello:hover {
    background-color: #8000ff; /* Darker shade on hover */
}

.register-container a {
    color: #12a4ff; /* Black color for links */
}

.register-container a:hover {
    color: #0088ff; /* Darker gray color for link hover */
}
.or{
    margin-bottom: 0px;
}
label{
    margin: 0;
}
.invalid-feedback {
    display: none;
    color: #b71c1c;
    font-size: 0.875em;
}
.form-control.is-invalid {
    border-color: #b71c1c;
    background: none;
}
.form-control.is-valid {
    border-color: #28a745;
    background: none;
}
.password-wrapper {
    position: relative;
}

/* Style for the password toggle button */
.toggle-password {
    border: none;
    background: none;
    cursor: pointer;
}

/* Adjust input group for password fields */
.input-group-append {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}

.input-group-append button {
    height: 100%;
    border: none;
    background: none;
}

/* Style for error messages */
.form-text.text-danger {
    font-size: 0.875em;
    margin-top: 0.25rem;
}

/* Input focus styles */
.form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Custom styles for valid/invalid inputs */
.form-control.is-valid {
    border-color: #28a745;
}

.form-control.is-invalid {
    border-color: #dc3545;
}

/* Adjust button styles if needed */
.btn-primary {
    border-radius: 0;
}

@media(max-width: 415px) {
    .register-container {
        width: 97%;
    }
}
.hello:hover{
    color:white;
}