* { box-sizing: border-box; }

.contact-section {
  display: flex;
  gap: 10px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
}

.contact-info {
  flex: 1 1 33.33%;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.contact-form {
  flex: 1 1 66.66%;
  display: flex;
  align-items: flex-start;
}

.form-wrapper {
  display: flex;
  gap: 10px;
  width: 100%;
}

.form-wrapper form {
  flex: 2 1 66.66%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}
.form-field label {
  color: #007acc; /* blue — same as your site’s theme */
  font-weight: 600; /* optional: make it a bit bolder */
}

.thank-you-message {
  flex: 1 1 33.33%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: #e6f7ff;
  border: 1px solid #007acc;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: opacity 0.5s ease;
}

.thank-you-message.hidden { display: none; }

/* Mobile styles */
@media (max-width: 768px) {
  .contact-section { flex-direction: column; }
  .contact-info, .contact-form { flex: 1 1 100%; }
  .form-wrapper { flex-direction: column; }
  .form-wrapper form, .thank-you-message { flex: 1 1 100%; }
}
/* contact Page Styles */
.error-message {
  color: #cc0000;
  font-size: 0.85rem;
  margin-top: 4px;
  display: block;
}
input.invalid,
textarea.invalid {
  border-color: #cc0000;
  background-color: #fff5f5;
}
/* Base button style */
.btn {
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  background-color: #007acc; /* default blue */
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover and focus */
.btn:hover,
.btn:focus {
  background-color: #005a99; /* darker blue */
  outline: none;
}

/* Disabled state */
.btn:disabled {
  background-color: #999;
  cursor: not-allowed;
}

/* Sending state */
.btn.sending {
  background-color: #28a745; /* green */
  color: #fff;
}
/* Make form fields bigger */
.form-field input,
.form-field textarea {
  font-size: 1.1rem;       /* slightly larger text */
  padding: 12px 10px;      /* more space inside the field */
  border-radius: 6px;      /* optional: keeps rounded corners */
  width: 100%;             /* full width of container */
  box-sizing: border-box;  /* ensures padding doesn't break layout */
}