/* Ensure full scrolling on mobile devices */
html, body {
    height: auto;
    overflow: auto;
}

.row-full {
    height: auto;
    overflow: auto;
}

.container {
    height: auto;
}

.col-right {
    overflow: visible;
}

img {
    max-width: 100%; /* Ensure images are responsive */
}

.form-group {
    margin-bottom: 1rem;
}

/* Customizations for small screens */
@media (max-width: 768px) {
    .col-md-5, .col-md-7 {
        width: 100%; /* Make columns take full width on small screens */
        padding: 0;
    }

    .img-bg, .img-logo, .img-logo-tap {
        width: 100%; /* Ensure images are responsive */
    }

    .btn-login {
        width: 100%; /* Ensure buttons take full width */
    }

    .row-full {
        flex-direction: column; /* Stack columns on smaller screens */
    }
}

/* Customizations for larger screens (Restore desktop layout) */
@media (min-width: 769px) {
    .col-md-5 {
        width: 50%; /* Set the original column width */
    }

    .col-md-7 {
        width: 50%; /* Set the original column width */
    }

    .row-full {
        display: flex;
        flex-direction: row; /* Ensure side-by-side layout for larger screens */
        height: 100vh; /* Ensure full-screen height */
    }

    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh; /* Ensure content is centered vertically */
    }

    .img-logo {
        margin-bottom: 20px; /* Adjust spacing for logo on larger screens */
    }

    .img-logo-tap {
        margin-bottom: 10px; /* Adjust spacing for logo on larger screens */
    }
}
.input-group {
    position: relative;
}

.input-group-text {
    cursor: pointer;
}

.form-control {
    padding-right: 40px; /* Ensure there's enough space for the icon */
}

/* Container should be relatively positioned to contain the absolute eye icon */
.position-relative {
    position: relative;
}

/* Position the eye icon absolutely inside the input field */
.eye-icon {
    position: absolute;
    top: 50%;
    right: 10px; /* Adjust this value to control how far the icon is from the right */
    transform: translateY(-50%);
    cursor: pointer; /* Indicate that the icon is clickable */
}

/* Eye icon sizing */
.eye-icon img {
    width: 20px; /* Adjust the icon size */
    height: 20px;
}

/* Add padding-right to ensure text doesn't overlap the icon */
.form-control {
    padding-right: 40px; /* Adjust padding to make space for the icon */
}