#page-title {
  background-color: #2c532c; /* green background */
  color: #ffffff;             /* text color */
  padding: 15px;            /* space inside the box */
  border-radius: 10px;      /* optional: rounded corners */
  text-align: center;       /* center the text */
  font-family: "Helvetica", "Arial", sans-serif; /* ensure it stays Helvetica */
}

.info-container {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

#info {
  font-size: 18px;   /* bigger text */
  line-height: 1.6;  /* spacing between lines */
}

.info-box {
  background: #ffffff;
  padding: 15px;
  border-radius: 8px;
  font-size: 18px;  /* increase this value to make text bigger */
  line-height: 1.6; /* optional, makes text easier to read */
}


.info-image-box img {
  width: 180px;  /* adjust size */
  height: auto;
  border-radius: 15px;
}

.info-block {
  /*text-align: center; /* centers everything */
  margin: 20px 0;
}

.info-block img {
  max-width: 200px;  /* keeps image from being too large */
  margin: 3px 0;
  border-radius: 15px;
}

.info-block p {
  background: #ffffff;
  padding: 15px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.6;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  background-color: #9ac2a2;
  color: #313053;
}

h1, h2, h3, h4, h5, h6,
button, input, select, textarea {
  font-family: "Helvetica", "Arial", sans-serif;
}

button {
  background-color: #0077cc;
  color: #ffffff;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#battery-input {
  width: 150px;   /* increase to make it longer */
  padding: 8px;
  font-size: 16px;
}

input[type="text"], input[type="number"], input[type="email"] {
  background-color: #ffffff;
  color: black;
  border: 2px solid #ccc;
  padding: 8px;
  border-radius: 5px;
  font-family: "Helvetica", Arial, sans-serif;
}

#city {
  width: 150px;     /* makes the dropdown wider */
  padding: 8px;     /* increases the height and space inside */
  font-size: 16px;  /* makes the text bigger */
  #city {
  color: darkgreen;     /* changes the text color of the selected value */
  background-color: #ffffff; /* optional: background color of the dropdown */
  padding: 8px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ccc;
}
}

/* Optional: change the color of the dropdown options in some browsers */
#city option {
  color: rgb(0, 0, 0);        /* text color of each option */
  background-color: #ffffff; /* background of each option */
}

#result {
  background-color: #ffffff;       /* white interior */
  color: black;                  /* text color */
  padding: 15px;                 /* space inside the box */
  border: 2px solid #ffffff;        /* optional: border color */
  border-radius: 8px;            /* rounded corners */
  font-family: "Helvetica", Arial, sans-serif; /* keep font consistent */
  margin-top: 15px;              /* space above the box */
  /*box-shadow: 2px 2px 5px rgba(0,0,0,0.2); /* optional: subtle shadow */
}

.recycling-section {
  display: flex;
  flex-direction: column; /* stacks image above text */    /* centers everything horizontally */
  gap: 15px;              /* space between image and text */
  margin: 20px 0;
}

.recycling-image {
  /*text-align: center; /* centers only the image */
  margin-bottom: 10px; /* optional spacing between image and text */
}

.recycling-image img {
  max-width: 300px; /* adjust size */
  border-radius: 15px;
  height: auto;
}

.recycling-info {
  width: 100%;            /* or set a max-width if you like */

}

button:hover {
  background-color: #2c532c;
}

footer {
  margin-top: 15px;
  padding: 5px;
  background-color: #dde2e7;
  /* border-top: 2px solid #ffffff; */
  text-align: center;
}

footer h2 {
  margin-bottom: 2px;
}

footer ul {
  list-style-type: none; /* remove bullets */
  padding: 0;
}

footer li {
  margin-bottom: 2px;
}

footer a {
  color: #2c532c;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}