.appointment {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Center both left and right sections vertically */
  background-color: #236e63;
  padding: 15px 20px; /* Reduce padding to make the section more compact */
  color: white;
  gap: 15px; /* Reduce spacing between left and right sections */
}

.appointment .left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* vertical center */
  align-items: center;      /* horizontal center */
  text-align: center;
  gap: 10px;
  padding: 20px;
}
.appointment .left h6 {
  font-size: 40px; /* Reduce font size for the title */
  margin-bottom: 10px; /* Reduce bottom margin */
  font-weight: bolder;
}

.appointment .left div {
  font-size: 13px;
  margin-bottom: 4px;
}
.appointment .left p {
  max-width: 400px;
  font-size: 16px;
  line-height: 1.5;
}


.appointment .right {
  flex: 1;
  background: #f9f9f9;
  padding: 10px; /* Keep padding minimal to avoid height increase */
  border-radius: 8px;
  color: #000;
  max-width: 600px; /* Increase the width of the form */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.appointment-form-container {
background-color: #f5f8f9;
padding: 15px; /* Reduce padding inside the form container */
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.section-title {
text-align: center;
margin-bottom: 25px;
color: #236e63;
}

.appointment-form {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Keep the gap between form fields minimal */
  padding: 0; /* Remove extra padding inside the form */
}

.form-row {
display: flex;
gap: 10px; /* Reduce gap between form fields */
margin-bottom: 10px; /* Reduce bottom margin */
}

.form-group {
flex: 1;
display: flex;
flex-direction: column;
margin-bottom: 8px; /* Keep bottom margin minimal */
}

.form-group label {
  font-size: 12px; /* Keep font size small */
  margin-bottom: 4px; /* Add a small margin below the label */
  color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; /* Ensure input fields stretch to the full width */
  padding: 6px 8px; /* Keep padding minimal to avoid height increase */
  font-size: 12px; /* Keep font size small */
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.form-control {
  padding: 6px 8px !important; /* Override Bootstrap padding */
  font-size: 12px !important; /* Override Bootstrap font size */
  border-radius: 4px !important; /* Override Bootstrap border radius */
  border: 1px solid #ccc !important; /* Override Bootstrap border */
}

.error-message p {
  font-size: 11px; /* Reduce font size for error messages */
  color: red;
  margin: 4px 0 0;
}

.btn-submit {
  margin-top: 8px; /* Keep top margin minimal */
  padding: 6px 10px; /* Keep padding minimal */
  background-color: #236e63;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px; /* Keep font size small */
  cursor: pointer;
  width: 100%;
}

.btn-submit:hover {
  background-color: #1d5b52;
}

.right h3 {
  font-size: 16px; /* Keep font size small */
  margin-bottom: 8px; /* Keep bottom margin minimal */
}

.appointment-form {
  display: flex;
  flex-direction: column;
}

.form-group {
  margin-bottom: 15px;
}



.right p {
  text-align: center; /* Center the text horizontally */
  font-weight: bold; /* Keep the bold styling */
  margin: 10px 0; /* Add some spacing around the text */
  display: flex; /* Use Flexbox for vertical alignment */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 50px; /* Optional: Set a fixed height for better alignment */
}

.appointment-wrapper {
width: 100%;
max-width: 100vw;
box-sizing: border-box;
}

.appointment {
width: 100%;
display: flex;
flex-wrap: wrap; /* allow wrapping on small screens */
justify-content: space-between;
align-items: center;
background-color: #236e63;
color: white;
gap: 1.5vw;
box-sizing: border-box;
}

.appointment .left,
.appointment .right {
flex: 1 1 48%;
min-width: 300px;
box-sizing: border-box;
}

.appointment .left h6 {
font-size: clamp(20px, 4vw, 40px); /* Responsive font size */
}
.appointment .left p,
.appointment .left div,
.form-group label,
.form-group input,
.form-group select,
.form-group textarea,
.btn-submit {
font-size: clamp(12px, 2.5vw, 16px);
}