/* xl - DESKTOP STYLES */ 
/* Contact Form 7 Design */

/* Style all form controls (inputs, selects, textareas) inside Contact Form 7 */
.wpcf7-form-control {
  border-radius: 10px; /* Round the corners of form fields */
/*  margin: 0px 10px;*/    /* Horizontal spacing between fields */
  padding: 10px !important;       /* Inner space for better readability */
  width: 100%;         /* Ensure fields take full width of container */
  box-sizing: border-box; /* Include padding in width calculation */
}

/* Style the main Contact Form 7 wrapper */
.wpcf7 {
  display: flex;
  flex-direction: column;      /* Stack all children vertically */
  align-items: center;
  width: 100%;
}

/* Style the form tag itself */
.wpcf7-form {
  flex-direction: column;     /* Stack fields vertically */
  align-items: center;
  width: 100%;
}

/* Style a custom file upload handler */
.codedropz-upload-handler {
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  max-width: 600px;
  width: 80vw !important;
  margin: 0 auto;
}

/* Center each paragraph inside the form */
.wpcf7-form p {
  display: flex;
  flex-wrap: wrap;            /* Allow wrapping on smaller screens */
  justify-content: center;
  gap: 10px;
  width: 100%;
}

/* Hide the loading spinner */
.wpcf7-form .wpcf7-spinner {
  display: none;
}

/* Style the submit button */
.wpcf7-form .wpcf7-submit {
  margin: 0 auto !important;
  padding: 10px 60px !important;
  display: flex;
  max-width: 200px;
}

/* Responsive behavior for smaller screens */
@media (max-width: 768px) {
  .wpcf7-form p {
    flex-direction: column;   /* Stack input fields vertically */
    align-items: stretch;     /* Make them full width */
  }

  .wpcf7-form-control {
    margin: 5px 0;            /* Reduce margin for smaller screens */
  }
}