/* ===============================
   COMPLAIN SECTION
================================= */
.complain-section {
  background: #f2f2f2;
  padding: 80px 20px;

  display: flex;
  justify-content: center;
}

/* CARD */
.complain-card {
  background: #e9e9e9;
  padding: 40px;
  border-radius: 12px;

  width: 100%;
  max-width: 700px;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* TITLE */
.complain-card h2 {
  text-align: center;
  color: #0a7a4d;
  margin-bottom: 10px;
}

/* SUBTEXT */
.subtitle {
  text-align: center;
  color: #555;
  margin-bottom: 25px;
}

/* FORM */
form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* ROW */
.row {
  display: flex;
  gap: 15px;
}

/* INPUTS */
input,
textarea {
  width: 100%;
  padding: 12px;

  border: 1px solid #ccc;
  border-radius: 6px;

  font-size: 14px;
  outline: none;

  background: #f9f9f9;
}

/* TEXTAREA */
textarea {
  resize: none;
}

/* FILE LABEL */
.file-label {
  font-size: 14px;
  color: #333;
}

/* FILE INPUT */
input[type="file"] {
  background: #fff;
  padding: 10px;
}

/* BUTTON */
.submit-btn {
  margin-top: 10px;

  padding: 14px;
  border: none;
  border-radius: 6px;

  background: #ff6e00;
  color: white;
  font-weight: bold;

  cursor: pointer;
  transition: 0.3s;
}

/* HOVER */
.submit-btn:hover {
  background: #e65c00;
  transform: scale(1.02);
}

/* ===============================
   MOBILE
================================= */
@media (max-width: 600px) {
  .row {
    flex-direction: column;
  }

  .complain-card {
    padding: 25px;
  }
}