/* Container for feedback form */
.feedback-form-container {
  background-color: #e9e7e7;
  border: 3px solid rgb(13, 13, 12);
  border-radius: 10px;
  padding: 50px;
  width: 600px; /* Slightly increased width for a spacious feel */
  margin: 50px auto;
  color: rgb(10, 10, 10);
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

/* Form headings */
.title {
  margin-bottom: 30px; /* Increased spacing below heading */
  font-size: 48px; /* Increased font size for the heading */
  color: #020202;
}

/* Input fields styling */
.name,
.email,
.message {
  margin-top: 30px; /* Increased top margin for space between inputs */
  width: 100%;
  padding: 10px; /* Increased padding for larger inputs */
  background-color: #faf5f5;
  border: 3px solid rgb(9, 9, 8);
  border-radius: 5px;
  color: rgb(21, 20, 20);
  font-size: 18px; /* Slightly increased font size for input text */
  box-sizing: border-box;
}

textarea {
  height: 100px; /* Increased height of the textarea */
  resize: none;
}

/* Star rating styling */
.stars {
  margin-top: 30px; /* Ensure consistent spacing */
  display: flex;
  justify-content: center;
  margin: 10px 0;
  gap: 20px;
}

.star,
.star-filled {
  font-size: 35px; /* Slightly larger stars for better visibility */
  cursor: pointer;
  transition: color 0.3s;
}

.star {
  color: rgb(108, 106, 106);
}

.star-filled {
  color: gold;
}

/* Submit button */
.post-button {
  margin-top: 40px; /* More space between the last input and button */
  background-color: #031cd8;
  color: #fdfafa;
  border: 2px solid black;
  padding: 15px 30px; /* Bigger button for easier clicking */
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.post-button:hover {
  background-color: #b6c2f3;
  color: black;
}

/* Pop-up overlay styling */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup {
  background-color: #f9f8fb;
  padding: 28px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
  color: black;
}

.popup h3 {
  margin-bottom: 10px;
  color: #0d0d0d;
}

.popup p {
  margin-bottom: 20px;
  color: #0f0e0e;
}

.close-popup-button {
  background-color: #0a0370;
  color: #fdfbfb;
  border: 2px solid rgb(245, 242, 242);
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

/* .close-popup-button:hover {
  background-color: #e3e4e5;
} */
