/* Main styles */ /* Mobile View */ @media only screen and (max-width: 767px) { /* Center align the h1 text */ main h1 { text-align: center; } /* Add background color to the form */ main form { background-color: #f8f8f8; padding: 20px; border-radius: 10px; } /* Adjust the font size and margin of form elements */ main form label, main form input, main form button { font-size: 16px; margin-bottom: 10px; } /* Increase the font size of the result text */ main #result-emi { font-size: 24px; } /* Add padding and margin to the section headings */ main section h2 { padding: 10px; margin-top: 20px; } /* Add padding and margin to the section paragraphs */ main section p { padding: 10px; margin-bottom: 20px; } /* Add padding and margin to the unordered list */ main section ul { padding: 10px; margin-bottom: 20px; } } /* Add a border to the loan form */ #loan-form { border: 1px solid #007bff; border-radius: 10px; padding: 20px; margin-bottom: 2rem; } /* Add margin and border to the `mt-5` div */ .mt-5 { margin-top: 2rem; border: 1px solid #007bff; border-radius: 10px; padding: 20px; } @media (min-width: 576px) { #loan-form { padding: 40px; } .mt-5 { padding: 40px; } } /* Add margin and border to the `mt-4` div */ .mt-4 { margin-top: 2rem; border: 1px solid #007bff; border-radius: 10px; padding: 20px; } @media (min-width: 576px) { #loan-form { padding: 40px; } .mt-4 { padding: 40px; } } /* Contact form styles */ #contact-form { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 500px; margin: 0 auto; padding: 1rem; background-color: #f8f8f8; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .form-group { width: 100%; margin-bottom: 1rem; } label { font-weight: bold; } input, textarea { width: 100%; padding: 0.5rem; border: none; border-radius: 5px; background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } button[type="submit"] { background-color: #007bff; border: none; border-radius: 5px; color: #fff; padding: 0.5rem 1rem; cursor: pointer; } /* Form message styles */ #form-messages { margin-top: 1rem; width: 100%; text-align: center; } .success-message { color: #2ecc71; } .error-message { color: #e74c3c; } body { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.6; margin: 0; } .container { max-width: 960px; margin: 0 auto; padding: 0 15px; } h1, h2, h3, h4, h5, h6 { margin-top: 0; } a { color: #007bff; text-decoration: none; } a:hover { text-decoration: underline; } .btn-secondary { background-color: #6c757d; border-color: #6c757d; } /* Header styles */ header { position: relative; } header h3 { margin: 0; font-weight: bold; } /* Footer styles */ footer { background-color: #343a40; color: #fff; } footer a { color: #fff; } .back-to-top { position: fixed; bottom: 20px; right: 20px; display: none; } /* Media queries */ @media (max-width: 768px) { .container { padding: 0 10px; } footer { text-align: center; } .back-to-top { bottom: 10px; right: 10px; } }