/* Container for all “cards” */

.contact-card-container {
  display: flex;
  gap: 20px; /* space between divs */
}

.box {
  flex: 1; /* each div takes equal width */
  padding: 20px;
  /* background-color: #eee; */
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Responsive: stack vertically on small screens */
@media (max-width: 650px) {
  .contact-card-container {
    flex-direction: column;
  }
}

/* Form styling */
.box form .mb-4 {
  margin-bottom: 1rem;
}

.box label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
  color: #333;
}

.box input[type="text"],
.box input[type="email"],
.box textarea {
  width: calc(100% - 1.5rem);
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s ease-in-out;
}

.box input[type="text"]:focus,
.box input[type="email"]:focus,
.box textarea:focus {
  outline: none;
  border-color: #66afe9;
  box-shadow: 0 0 0 3px rgba(102, 175, 233, 0.3);
}

.box .text-red-600 {
  color: #c53030; /* for validation errors */
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* Honeypot hidden field */
.box .hidden {
  display: none !important;
}

/* Button styling */
.box button[type="submit"] {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  background-color: #3a9241;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.box button[type="submit"]:hover {
  background-color: #246e2b;
}

/* Direct Email section adjustments */
.box a[href^="mailto:"] {
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}

.box a[href^="mailto:"]:hover {
  text-decoration: underline;
}

/* Social media links */
.box ul.flex {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1rem;
}

.box ul.flex li img {
  display: block;
  width: 24px;
  height: 24px;
}

/* Privacy & Data Notice */
.box .text-sm {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.5;
}

.box .text-sm a {
  color: #007bff;
  text-decoration: none;
}

.box .text-sm a:hover {
  text-decoration: underline;
}