/* ============================================= Formspree Contact Form Styles Link this file in your page : ============================================= */ .formspree-form-wrap { width: 100%; } .formspree-form-wrap form { display: flex; flex-direction: column; gap: 16px; width: 100%; font-family: 'Open Sans', sans-serif; } /* First Name + Last Name side by side */ .formspree-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .formspree-field { display: flex; flex-direction: column; gap: 6px; } .formspree-field label { font-size: 13px; font-weight: 600; color: #4c607b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0; } .formspree-field input, .formspree-field textarea { font-family: 'Open Sans', sans-serif; font-size: 15px; color: #1d3557; background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 2px; padding: 10px 14px; width: 100%; box-sizing: border-box; outline: none; transition: border-color 0.2s, background 0.2s; } .formspree-field input:focus, .formspree-field textarea:focus { border-color: #1d3557; background: #fff; } .formspree-field textarea { resize: vertical; min-height: 140px; } .formspree-form-wrap button[type="submit"] { align-self: flex-start; padding: 15px 35px; font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: #fff; background-color: #e73a46; border: none; border-radius: 0; cursor: pointer; transition: background-color 0.2s; } .formspree-form-wrap button[type="submit"]:hover { background-color: #1d3557; } /* Mobile: stack name fields */ @media (max-width: 600px) { .formspree-name-row { grid-template-columns: 1fr; } }