:root {
  --dark-bg-color: rgb(15, 23, 42);
  --main-color: rgb(226, 232, 240);
  --highlight-color: rgb(56, 189, 248);
  --highlight-color2: rgb(236, 72, 153);
  --highlight-color3: rgb(8, 200, 115);
  --highlight-color4: rgb(99, 102, 241);
  --main-p-color: rgb(120, 134, 154);
  --alert-color: rgb(252, 150, 4);
}

.hidden {
  display: none !important;
}

body {
  font-family: Verdana, sans-serif;
  background-color: var(--dark-bg-color);
  color: var(--main-color);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.container {
  max-width: 900px;
  margin: 50px auto;
  padding: 5px;
  background-color: var(--main-color);
  color: var(--dark-bg-color);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%; /* Ensuring the container takes 80% width of the viewport */
  border: 3px solid var(--main-p-color);
}

.header {
  text-align: center;
}

.logo {
  width: 400px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.robot-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.robot {
  width: 100px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto; /* Center the image horizontally */
}

h1 {
  font-size: 1.5rem;
  text-align: center;
  color: var(--dark-bg-color);
  margin: 0; /* Removed margin */
  padding: 10px 0; /* Adjusted padding */
}

h2 {
  text-align: center;
  color: var(--main-p-color);
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0; /* Removed margin */
  padding: 10px 0; /* Adjusted padding */
}

h3 {
  text-align: center;
  color: var(--highlight-color4);
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0; /* Removed margin */
  padding: 10px 0; /* Adjusted padding */
}

.calculators {
  display: flex;
  justify-content: center; /* Center the calculators in the parent container */
  gap: 20px;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  width: 100%;
}

.calculator {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--main-p-color);
  border-radius: 8px;
  background-color: var(--dark-bg-color);
  color: var (--main-color);
  width: 80%; /* Set the width to 80% of the parent container */
  max-width: 100%; /* Ensure it doesn't exceed the parent container */
}

form {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center align all elements in the form */
  text-align: center;
  width: 100%; /* Ensure forms are the same width */
}

label {
  margin-top: 5px;
  margin-bottom: 5px;
  color: var(--main-p-color);
  text-align: center;
  width: 100%; /* Ensure labels have the same width */
}

.input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* Ensure input containers are the same width */
  margin: 0 auto;
}

input {
  font-size: 1.15rem;
  padding: 10px;
  margin-top: 5px;
  background-color: var(--main-color);
  color: var(--dark-bg-color);
  border: 1px solid var(--main-p-color);
  border-radius: 4px;
  width: 90%;
  max-width: 300px;
  text-align: center; /* Center text inside input fields */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Add drop shadow */
}

button {
  font-size: 1rem;
  font-weight: 500;
  margin-top: 20px;
  padding: 10px;
  background-color: var(--highlight-color);
  color: var(--dark-bg-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: var(--main-p-color);
}

.details-button {
  display: block;
  margin: 20px auto;
  font-size: 1rem;
  font-weight: 500;
  padding: 10px;
  background-color: var(--highlight-color);
  color: var(--dark-bg-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.details-button:hover {
  background-color: var(--main-p-color);
}

.details {
  display: none; /* Hide details initially */
  margin-top: 20px;
}

#result1,
#result2 {
  display: none; /* Hide payoff amount initially */
  margin-top: 12px; /* Increased margin-top for more space */
}

#result1 p,
#result2 p {
  text-align: center;
  font-size: 2rem;
  font-weight: 500;
  margin: auto; /* Adjusted margin to reduce space */
  color: var(--highlight-color3);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th,
td {
  border: 1px solid var(--main-p-color);
  padding: 10px;
  text-align: center;
  width: 33%; /* Ensures each column has a fixed width of 33% */
  box-sizing: border-box; /* Ensures padding is included in the width */
}

th {
  background-color: var(--highlight-color4);
  color: var (--main-color);
}

td {
  background-color: var(--main-color);
  color: var(--dark-bg-color);
}

.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 20px 0; /* Adjusted margin for uniform spacing */
  padding: 20px; /* Ensure consistent padding */
}

.form-container label {
  color: var(--dark-bg-color);
}

#loanAmountForm {
  width: 100%; /* Ensure form containers are the same width */
}

#nameForm {
  width: 100%; /* Ensure form containers are the same width */
}

.header img {
  margin-bottom: 20px; /* Adjust the margin to ensure consistent spacing between robot and text */
}

#loanAmountForm img,
#nameForm img {
  margin-bottom: 10px; /* Adjust the margin to ensure consistent spacing between robot and text */
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  padding-top: 60px;
}

.modal-content {
  background-color: var(--alert-color);
  margin: auto; /* Centered */
  padding: 10px;
  border: 2px solid var(--main-p-color);
  width: auto; /* Change to auto to fit the content */
  max-width: 250px; /* Maximum width */
  min-width: 250px; /* Minimum width to ensure it doesn't get too small */
  border-radius: 8px;
  text-align: center;
  color: var(--dark-bg-color);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.close-btn {
  color: var(--dark-bg-color);
  font-size: 24px; /* Reduced font size */
  font-weight: bold;
  align-self: flex-end; /* Move close button to the top-right */
}

.alert-image {
  width: 75px; /* Set a fixed width for the image */
  height: auto;
  margin-left: 10px; /* Reduced margin */
}

#alertTitle {
  font-weight: bold;
}

#alertMessage {
  text-transform: capitalize;
}

.reset-button {
  display: block;
  margin: 20px auto;
  font-size: 1rem;
  font-weight: 500;
  padding: 10px;
  background-color: var(--alert-color);
  color: var(--dark-bg-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.reset-button:hover {
  background-color: var(--main-p-color);
}

.accept-loan {
  margin-top: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center align all elements in the div */
  width: 100%; /* Ensure accept-loan div takes full width */
}

.accept-loan label {
  color: var(--main-p-color);
  display: block;
  margin-bottom: 10px;
}

.accept-loan input {
  font-size: 1.15rem;
  padding: 10px;
  background-color: var(--main-color);
  color: var(--dark-bg-color);
  border: 1px solid var(--main-p-color);
  border-radius: 4px;
  width: 90%; /* Set the width to 80% of the container */
  max-width: 300px;
  text-align: center;
  margin-bottom: 10px; /* Ensure margin-bottom for spacing */
}

.accept-loan .button-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.accept-loan button {
  font-size: 1rem;
  font-weight: 500;
  padding: 10px;
  background-color: var(--highlight-color3);
  color: var(--dark-bg-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px; /* Ensure margin-top for spacing */
}

.accept-loan button:hover {
  background-color: var(--main-p-color);
}

.footer {
  background-color: var(--dark-bg-color);
  color: var(--main-p-color);
  text-align: center;
  padding: 10px 20px; /* Adjusted padding for better alignment */
  margin-top: 10px;
  border-top: 1px solid var(--main-p-color);

  font-size: 0.85rem;
  font-weight: 300;
  width: 80%; /* Ensuring the footer takes 80% width of the viewport */
  max-width: 900px; /* Ensure the footer takes the same max-width as the container */
  margin-left: auto;
  margin-right: auto;
  word-wrap: break-word; /* Ensure long words or URLs wrap */
  line-height: 1.25; /* Reduce line-height to decrease the distance between lines */
}

.footer a {
  color: var(
    --highlight-color
  ); /* Match link color to your site's highlight color */
  text-decoration: none; /* Remove underline from links */
  font-weight: 500; /* Match the font weight */
}

.footer a:hover {
  color: var(
    --alert-color
  ); /* Change link color on hover to another highlight color */
  text-decoration: none; /* Add underline on hover */
}