/* Desktop: Name + Email stay in one row but with a small gap */
@media (min-width: 948px){
  .contact .contact-content .right form .fields{
    display: flex;
    gap: 12px;              /* ✅ spacing between Name and Email */
    align-items: stretch;
  }

  /* Ensure both fields share the row evenly */
  .contact .contact-content .right form .fields .field{
    flex: 1 1 0;
    margin-bottom: 0;       /* avoid extra spacing inside the row */
  }
}

/* Desktop: Name + Email stay in one row but with a small gap */
@media (min-width: 948px){
  .contact .contact-content .right form .fields{
    display: flex;
    gap: 12px;              /* ✅ spacing between Name and Email */
    align-items: stretch;
  }

  /* Ensure both fields share the row evenly */
  .contact .contact-content .right form .fields .field{
    flex: 1 1 0;
    margin-bottom: 0;       /* avoid extra spacing inside the row */
  }
}

/* Desktop: center the whole contact form block */
@media (min-width: 948px){
  /* Center the column that contains the form */
  .contact .contact-content .column.right{
    margin: 0 auto;         /* ✅ centers the block */
    width: 100%;            /* allow centering logic */
    max-width: 620px;       /* ✅ controls form width on big screens */
  }

  /* Ensure the form itself fills the centered column nicely */
  #contactForm{
    width: 100%;
  }
}

/* Desktop: keep Name+Email in one row WITH gap,
   but restore spacing BELOW that row before the message field */
@media (min-width: 948px){
  /* keep the side-by-side gap */
  .contact .contact-content .right form .fields{
    gap: 12px;
    margin-bottom: 15px; /* ✅ spacing to message field */
  }

  /* keep the two fields aligned, but don't kill spacing from the row */
  .contact .contact-content .right form .fields .field{
    flex: 1 1 0;
    margin-bottom: 0; /* still fine because row provides spacing */
  }
}