@font-face {
  font-family: "notosans";
  src: url("/css/fonts/notosans-regular-webfont.woff2") format("woff2"),
    url("/css/fonts/notosans-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
html {
  scroll-behavior: smooth;
}
body {
  overflow-x: hidden;
  color: #222;
  font-family: "notosans", sans-serif;
  font-size: 18px;
  line-height: 110%;
  background-color: #fff;
}
.contact-form {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.message-container {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 50px; /* Extra gap at the bottom */
  max-width: 600px; /* Limits the width on larger screens */
  margin-left: auto; /* Centers the container horizontally */
  margin-right: auto;
  line-height: 1.4; /* Increase space between lines */
}
@media (min-width: 992px) {
  .container {
    max-width: 800px;
  }
}
@media (max-width: 780px) {
  /* Remove horizontal gutters for rows below 720px */
  .row.mb-3 {
    margin-left: 0;
    margin-right: 0;
    --bs-gutter-x: 0;
  }
  /* Force full-width columns with no extra padding */
  .row.mb-3 > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 1rem !important;
  }
}
h1 {
  color: #666;
}
footer {
  font-size: 0.8em;
  color: #666;
  margin-bottom: 30px; /* Extra gap at the bottom */
}
.footer-content {
  max-width: 600px;
  padding: 0 15px;
}
input.form-control,
textarea.form-control {
  border: 1px solid #adb5bd; /* 1px border with a lighter grey */
  background-color: #fff;
}

input.form-control:focus,
textarea.form-control:focus {
  border-color: #37e01a; /* Focus color remains the same */
  box-shadow: 0 0 5px rgba(55, 224, 26, 0.5); /* Optional glow on focus */
}
.small_grey {
  font-size: 0.8em;
  color: #666;
}
.form-check {
  display: flex;
  align-items: center; /* Aligns the checkbox and label vertically */
}

input[type="checkbox"].form-check-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #adb5bd;
  border-radius: 3px;
  cursor: pointer;
  /* Remove vertical-align if using flexbox */
  margin: 0;
}

input[type="checkbox"].form-check-input:checked {
  background-color: #37e01a;
  border-color: #37e01a;
}

/* Optional: Add spacing between the checkbox and its label */
.form-check-label {
  margin-left: 0.5rem;
}
#captcha {
  display: block;
  max-width: 150px; /* Adjust this value to match the submit button's width */
  margin: 0 auto;   /* Centers the input */
}