body {
    font-family: 'Roboto', sans-serif;
    background-color: #ffffff;
    font-size: 14px;
}

.custom-checkbox {
    display: flex;
    align-items: center; /* This will vertically center the checkbox with the label */
    cursor: pointer;
}

.custom-checkbox .form-check-input {
    width: 20px; /* Adjust the width */
    height: 20px; /* Adjust the height */
    margin-right: 0.5rem; /* Adds spacing between the checkbox and label */
}

    .custom-checkbox .form-check-label {
        margin-bottom: 0; /* Removes bottom margin from label if any */
        margin-top: 5px; /* Adjust top margin for better vertical alignment */
        font-size: 14px; /* Smaller font size for the label */
        cursor: pointer;
        vertical-align: middle; /* Align text vertically with the checkbox */
        display: inline-block; /* Ensures label aligns properly next to the checkbox */
    }
.custom-background {
    background: url('/img/get-started.jpg') no-repeat center center;
    background-size: cover;
    background-position: center 10%; /* Adjust as needed for different screens */
}

.login-background {
    background: url('/img/welcome2.jpg') no-repeat center center;
    background-size: cover;
    background-position: center 0%; /* Adjust as needed for different screens */
}

/* Overriding Bootstrap's default input styles */

/* Overriding Bootstrap's default label styles */
.form-label {
    font-size: 15px; /* Increasing the font size from default 13px to 15px */
    color: #333333; /* Optional: Set a specific color for the labels if needed */
    font-weight: 400; /* Optional: Make the labels bold for better visibility */
    margin-bottom: 5px; /* Ensures sufficient space between the label and the input */
}

.form-control {
    border: 1px solid #ced4da; /* Lighter, more refined border */
    border-radius: 5px; /* Rounded borders for a smoother look */
    padding: 10px 15px; /* Comfortable padding around text */
    font-size: 16px; /* Readability-enhanced font size */
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; /* Smooth transition for interactive elements */
    background-image: linear-gradient(to right, #ffffff, #f8f9fa); /* Subtle background gradient */
    color: #495057; /* Custom text color for better visibility */
}

.form-control:focus {
    border-color: #80bdff; /* Blue border on focus for visibility */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Subtle glow effect on focus */
    outline: 0; /* Removes the default focus outline */
}

.form-control::placeholder {
    color: #6c757d; /* Styled placeholder text */
    opacity: 1; /* Ensures placeholder is clearly visible */
}


footer {
    padding: 20px 0;
    color: #6c757d; /* Gray text color for a subtle look */
    font-size: 14px; /* Smaller font size for footer text */
}

footer a {
    color: #007bff; /* Bootstrap primary blue for links */
}


/* Add this to your site's CSS file */
@media (min-width: 768px) { /* Target medium to large devices */
    .custom-background {
      background-position: center 10%; /* Adjust as needed for different screens */
    }

}