/* Additional CSS for bolder and colored text in the call us section */
.info-box#box-3 {
  font-weight: bold; /* Make text bold */
  color: #1caade; /* Set desired color */
  display: flex;
  align-items: center;
  justify-content: center;
}
#num {
  color: #333;
  font-size: large;
}
.info-box1 {
  background-color: #f0f8ff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  color: #333;
  text-align: center;
  border: 1px solid #ccc;
  padding-bottom: 20px;
}
.info-box1#box-4 {
  font-weight: bold; /* Make text bold */
  color: #1caade; /* Set desired color */
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 2 / 2; /* Span both columns */
  grid-row: 3/4;
}

.phone-icon {
  width: 24px;
  height: 24px;
  margin: 0 10px;
}

/* Existing CSS for the form and layout */

h2 {
  text-align: left; /* Align to the left */
  color: #333;
}

.contact-title {
  grid-column: 1 / 2; /* Span the first column */
  grid-row: 1 / 2; /* First row */
}

.contact-title h2 {
  margin-bottom: 10px;
}

.map-title {
  grid-column: 2 / 3; /* Span the second column */
  grid-row: 1 / 2; /* First row */
  text-align: left;
}

.map-title h2 {
  margin-bottom: 10px;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto; /* Three rows */
  gap: 20px;
}

.contact-box {
  grid-column: 1 / 2;
  grid-row: 2 / 3; /* Adjusted to start from the second row */
  background-color: #1caade;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  color: white;
  display: flex;
  flex-direction: column;
}
#t{
  text-align: center;
  color: #1caade;
}
.emoji-icon {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-left: 8px;
}


form {
  display: flex;
  flex-direction: column;
  background-color: #f0f8ff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  flex-grow: 1; /* Make the form grow to fill the space */
}

.form-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Make the form group grow */
}

label {
  margin-top: 10px;
  color: #333;
}

input, textarea {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

textarea {
  resize: none;
  height: 100%; /* Make textarea take all available height */
  flex-grow: 1; /* Allow textarea to grow */
}

#contact-button {
  margin-top: 20px;
  padding: 10px;
  background-color: #1caade;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
}

#contact-button:hover {
  background-color: #1391a7;
}

.info-box {
  background-color: #f0f8ff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  color: #333;
  text-align: center;
}

/* Modified CSS for the map-box */

.map-container {
  grid-column: 2 / 3;
  grid-row: 2 / 3; /* Span the second row */
  border: 1px solid #ccc;
  padding: 20px;
  background: white;
  box-shadow: 0 0 10px #ccc;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto; /* Set height to auto */
  border-radius: 10px; /* Add border-radius for curved corners */
}

.map-box {
  height: auto; /* Let the height be determined by the content */
  display: flex;
  justify-content: center;
  align-items: center;
}

.map-box img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.info-box#box-3 {
  grid-column: 1 / 2; /* Span both columns */
  grid-row: 3/ 4; /* Place below contact and map box */
  border: 1px solid #ccc;
  padding: 20px;
  align-self: start;
  margin-top: 20px; /* Adjust margin to move it up */
}

@media (max-width: 768px) {
  .contact .grid-container {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
  }

  .contact-title, .map-title {
      grid-column: span 1;
      grid-row: auto;
  }

  .contact-box, .map-container, .info-box#box-3, .info-box1#box-4 {
      grid-column: span 1;
      grid-row: auto;
      margin-top: 0;
  }

  .map-container {
      height: auto; /* Ensure height is auto on smaller screens */
  }
}