body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.8;
  margin: 0;
  padding: 0;
  background-color: #121212; /* Deep Dark Background */
  color: #ECEFF1; /* Light text color */
}

header {
  background: #1E88E5; /* Techy Blue */
  color: #fff;
  padding: 18px;
  text-align: center;
}

a {
  text-decoration: none;
  color: #64B5F6; /* Lighter Blue */
  font-weight: bold;
  font-size: 1.1em;
}

a:hover {
  color: #42A5F5; /* Hover color - Slightly brighter blue */
}

header h1 {
  margin: 0;
  font-size: 2em;
}

button {
  background-color: #29B6F6; /* Bright Blue */
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  font-size: 1em;
  border-radius: 5px;
}

button:hover {
  background-color: #0288D1; /* Darker Techy Blue */
}

button, #policy-button, .modal button { /* Ensure all buttons, including modal and policy buttons */
  color: #ffffff; /* White text color */
}

main {
  padding: 20px;
}

footer {
  background: #1E88E5; /* Techy Blue */
  color: #fff;
  text-align: center;
  padding: 15px;
}

b, center, em, h2, p {
  font-size: 1em;
  font-weight: 400;
}

/* Service Block */
.service {
  margin: 20px 0;
  padding: 20px;
  background: #263238; /* Dark Grey Background */
  border: 1px solid #37474F; /* Darker Grey Border */
  border-radius: 10px;
}

h3 {
  font-size: 1.5em;
  font-weight: 600;
}

#modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6); /* Darker modal background */
}

.modal-content {
  background-color: #37474F; /* Dark Modal content background */
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #616161; /* dark edge */
  width: 90%;
  max-width: 500px;  /* Increased max width for wider popups */
  border-radius: 10px;
  box-sizing: border-box; /* Ensure the border-box model is used */
}

#pre-built .modal-content,
#on-campus .modal-content {
  max-width: 500px;  /* Adjusted for consistency */
}

.close {
  color: #aaa;
  float: right;
  font-size: 2em;
  font-weight: bold;
}

.close:hover, .close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

#mode-switch {
  background: #29B6F6; /* Bright Blue */
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
}

.dark-mode {
  background-color: #1C1C1C; /* Deep Dark for dark mode */
  color: #E0E0E0;
}

.dark-mode .modal-content {
  background-color: #424242; /* Darker shade */
}

.dark-mode footer, .dark-mode header {
  background: #33691E; /* Different shade for header and footer */
}

.dark-mode button {
  background-color: #558B2F; /* Darker green */
  color: #E0E0E0;
}

#policy-button {
  margin-bottom: 5px;
  font-size: 1em;
  font-weight: bold; /* Make the policy button text bold */
}

#service-form .buttons {
  display: flex;
  gap: 10px;
}

#service-form button, #policy-button {
  flex-grow: 1;
  font-size: 1em;
}

#service-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

#service-form label {
  margin-bottom: 5px;
  font-size: 1em;
}

#service-form input,
#service-form select {
  padding: 10px;
  border: 1px solid #616161; /* Grey border */
  border-radius: 5px;
  font-family: 'Roboto', sans-serif;
  color: #121212; /* Dark text input on light background */
  font-size: 1em;
  width: calc(100% - 22px); /* to fit nicely inside the modal content */
  box-sizing: border-box; /* Ensure the border-box model is used */
}

.dark-mode #service-form input,
.dark-mode #service-form select {
  background-color: #616161; /* Dark input background in dark mode */
  color: #ECEFF1; /* Light text for input */
}

/* Review form styles */
#review-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

#review-form label {
  margin-bottom: 5px;
  font-size: 1em;
}

#review-form input,
#review-form textarea,
#review-form select {
  padding: 10px;
  border: 1px solid #616161; /* Grey border */
  border-radius: 5px;
  font-family: 'Roboto', sans-serif;
  color: #121212; /* Dark text input on light background */
  font-size: 1em;
  width: calc(100% - 22px); /* to fit nicely inside the modal content */
  box-sizing: border-box; /* Ensure the border-box model is used */
}

.dark-mode #review-form input,
.dark-mode #review-form textarea,
.dark-mode #review-form select {
  background-color: #616161; /* Dark input background in dark mode */
  color: #ECEFF1; /* Light text for input */
}

/* Section links styling */
#services h2 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  background-color: #29B6F6; /* Bright Blue */
  padding: 10px;
  border-radius: 10px;
  font-size: 1.2em;
}

#services h2 a {
  display: inline-block;
  margin: 5px;
  padding: 10px;
  background-color: #1E88E5; /* Techy Blue */
  border-radius: 5px;
  text-decoration: none;
  color: #ffffff; /* Ensure the link text is white */
}

#services h2 a:hover {
  background-color: #2196F3; /* Slightly brighter on hover */
}

/* Mobile responsive adjustments */
@media only screen and (max-width: 600px) {
  header h1 {
    font-size: 1.5em;
  }

  main {
    padding: 15px;
  }

  button {
    padding: 8px 18px;
    font-size: 0.9em;
  }

  .service {
    padding: 15px;
    margin: 10px 0;
  }

  .modal-content {
    width: 95%;
    max-width: 300px; /* Increased width for wider popups on mobile */
  }

  footer {
    padding: 12px;
  }

  #services h2 {
    flex-direction: column;
  }

  #services h2 a {
    padding: 5px;
  }
}