@import url(../css/main.css);

#contact {
  background-color: #f8f8f8;
  margin: 0 auto;
  width: 70%;
  max-width: 1200px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px; /* Add padding for spacing */
}

.contact-info {
  text-align: center;
  margin-bottom: 20px;
}

.contact-image {
  width: 100%;
  max-width: 100%;  /* Ensure it doesn't exceed the width of its container */
  height: auto;  /* Maintain the aspect ratio */
  display: block;
  margin: 20px auto;
  border-radius: 10px;
  object-fit: cover;  /* Ensures the image covers the container without stretching */
}

a:link, a:visited, a:hover, a:active {
  text-decoration: none;
  color: black;
}

footer {
  margin-top: 30px; /* Add spacing above footer */
}

/* Container for Airtable form */
.airtable {
  width: 100%;  /* Ensure the form container takes full width */
  margin-top: 20px; /* Space above form */
  display: flex;
  justify-content: center; /* Centers the iframe */
}

/* Airtable Form Styling */
.airtable-embed {
  width: 100%;
  border: none;
  border-radius: 10px;
}

/* Mobile View Adjustments */
@media (max-width: 768px) {
  #contact {
      width: 90%; /* Full width on smaller screens */
  }

  .airtable-embed {
      width: 100%;  /* Take up the full width */
      height: auto;  /* Adjust the height for better scaling */
      max-width: 100%; /* Prevent overflow */
  }
}

@media (max-width: 480px) {
  .airtable-embed {
      width: 100%;  /* Ensure it's full width on very small screens */
      height: auto;  /* Keep it proportional */
  }
}

/* For larger screens, ensure the image is contained within a specific max-height */
@media (min-width: 1200px) {
  .contact-image {
      max-height: 500px;  /* Set max-height to ensure it doesn't stretch too much */
  }
}