a {
    text-decoration: none;
}
.login-page {
    width: 100%;
    height: 100vh;
    display: inline-block;
    display: flex;
    align-items: center;
}
.form-right i {
    font-size: 100px;
}


  /* Custom CSS for mobile view */
    @media (max-width: 767px) {
        .form-left,
        .form-right {
            padding: 20px; /* Add padding to both form sections */
        }

        .form-right {
            background-color: #007bff; /* Change background color for right section */
            color: #fff; /* Change text color for right section */
        }

        .form-right h2 {
            font-size: 24px; /* Adjust font size for heading */
        }

        .form-right h3 {
            font-size: 18px; /* Adjust font size for subheading */
        }

        .form-left .input-group-text,
        .form-left label {
            font-size: 14px; /* Adjust font size for labels and input group icons */
        }

        .form-left .btn-primary {
            width: 100%; /* Make login button full width */
        }
    }


    #alertPlaceholder {
        position: fixed; /* Fix position relative to the viewport */
        top: 20px; /* Distance from the top of the viewport */
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Adjust positioning to truly center it */
        width: 100%; /* Take full width but constrain to max-width */
        max-width: 400px; /* Maximum width of the alert box */
        z-index: 1050; /* Ensure it's above other content */
      }
      
      .custom-alert {
        font-size: 1.25rem; /* Adjust font size as needed */
        padding: 15px; /* Adjust padding as needed */
        border-radius: 0.5rem; /* Adjust border radius as needed */
      }