* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  background: #f6f7fb;
  color: #111827;
  overflow-x: hidden;
}

/* ================= POST REQUIREMENT ================= */ .post-requirement { padding: 70px 25px; background: #fffaf7; } .post-requirement-wrapper { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 65px; align-items: center; } /* ================= LEFT CONTENT ================= */ .requirement-content { max-width: 550px; } .requirement-badge { display: inline-flex; align-items: center; gap: 7px; padding: 9px 17px; background: #fff1e7; border: 1px solid #ffd4b5; border-radius: 50px; color: #ff6b00; font-size: 13px; font-weight: 600; margin-bottom: 20px; } .requirement-content h1 { margin: 0; color: #111827; font-size: 42px; line-height: 1.2; font-weight: 700; letter-spacing: -1px; } .requirement-content h1 span { display: block; color: #ff6b00; } .requirement-content > p { margin: 20px 0 30px; color: #64748b; font-size: 15px; line-height: 1.8; max-width: 500px; } /* ================= POINTS ================= */ .requirement-points { display: flex; flex-direction: column; gap: 18px; } .requirement-point { display: flex; align-items: flex-start; gap: 14px; } .point-icon { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #ff6b00; color: #fff; border-radius: 50%; font-size: 14px; font-weight: 700; box-shadow: 0 5px 12px rgba(255, 107, 0, .18); } .requirement-point strong { display: block; margin-bottom: 3px; color: #111827; font-size: 14px; font-weight: 600; } .requirement-point small { color: #64748b; font-size: 12px; line-height: 1.5; } /* ================= FORM CARD ================= */ .requirement-form-card { background: #fff; padding: 32px; border: 1px solid #eee4dd; border-radius: 22px; box-shadow: 0 18px 45px rgba(15, 23, 42, .08); } .form-card-header { display: flex; align-items: center; gap: 14px; padding-bottom: 22px; margin-bottom: 23px; border-bottom: 1px solid #f1eee9; } .form-card-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: #fff1e7; border: 1px solid #ffd4b5; border-radius: 13px; font-size: 21px; } .form-card-header h3 { margin: 0 0 4px; color: #111827; font-size: 19px; font-weight: 700; } .form-card-header p { margin: 0; color: #64748b; font-size: 12px; } /* ================= FORM ================= */ .requirement-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .requirement-input { display: flex; flex-direction: column; gap: 7px; } .requirement-input.full-width { grid-column: 1 / -1; } .requirement-input label { color: #374151; font-size: 12px; font-weight: 600; } .requirement-input input, .requirement-input select, .requirement-input textarea { width: 100%; box-sizing: border-box; border: 1px solid #e2e8f0; background: #fafafa; color: #111827; border-radius: 10px; padding: 12px 13px; font-family: inherit; font-size: 13px; outline: none; transition: .3s ease; } .requirement-input input, .requirement-input select { height: 46px; } .requirement-input textarea { resize: vertical; min-height: 95px; } .requirement-input input::placeholder, .requirement-input textarea::placeholder { color: #94a3b8; } .requirement-input input:focus, .requirement-input select:focus, .requirement-input textarea:focus { background: #fff; border-color: #ff6b00; box-shadow: 0 0 0 3px rgba(255, 107, 0, .09); } /* ================= SUBMIT ================= */ .requirement-submit { width: 100%; height: 50px; margin-top: 22px; border: none; border-radius: 11px; background: #ff6b00; color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: .3s ease; box-shadow: 0 8px 20px rgba(255, 107, 0, .18); } .requirement-submit span { font-size: 18px; transition: .3s ease; } .requirement-submit:hover { background: #e85d00; transform: translateY(-2px); box-shadow: 0 12px 25px rgba(255, 107, 0, .25); } .requirement-submit:hover span { transform: translateX(4px); } /* ================= NOTE ================= */ .form-note { margin: 13px 0 0; text-align: center; color: #94a3b8; font-size: 10px; } /* ================= TABLET ================= */ @media (max-width: 900px) { .post-requirement-wrapper { grid-template-columns: 1fr; gap: 45px; } .requirement-content { max-width: 700px; margin: 0 auto; text-align: center; } .requirement-content > p { margin-left: auto; margin-right: auto; } .requirement-point { text-align: left; max-width: 450px; margin: 0 auto; } } /* ================= MOBILE ================= */ @media (max-width: 600px) { .post-requirement { padding: 45px 16px; } .post-requirement-wrapper { gap: 35px; } .requirement-content h1 { font-size: 30px; } .requirement-content > p { font-size: 13px; } .requirement-form-card { padding: 23px 18px; border-radius: 18px; } .requirement-form-grid { grid-template-columns: 1fr; gap: 15px; } .requirement-input.full-width { grid-column: auto; } .form-card-header h3 { font-size: 17px; } } /* ================= SMALL MOBILE ================= */ @media (max-width: 400px) { .requirement-content h1 { font-size: 27px; } .requirement-badge { font-size: 11px; padding: 8px 13px; } .requirement-form-card { padding: 20px 15px; } }