.webform-progress-tracker {
  margin: 20px 0;
}

.webform-progress-tracker .progress-step {
  flex: 1;
  text-align: center;
  background-color: #00354F; 
  color: white;
  padding: 5px 10px;
  margin: 0 5px;
  border-radius: 5px;
  position: relative;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.webform-progress-tracker .progress-step:first-child {
  margin-left: 0;
}

.webform-progress-tracker .progress-step:last-child {
  margin-right: 0;
}


.webform-progress-tracker .progress-step.is-active {
  background-color: #007d8b; 
  color: white;
}


.webform-progress-tracker .progress-text {
  font-size: 14px;
  font-weight: bold;
  color: inherit;
}


.webform-progress-tracker .progress-step:hover {
  background-color: #00354F;
  cursor: pointer;
}

@media (max-width: 768px) {
  .webform-progress-tracker {
    flex-direction: column;
  }

  .webform-progress-tracker .progress-step {
    margin: 5px 0;
  }
}

.webform-progress-tracker .progress-step .progress-text {
    padding-top: 5px;
    padding-bottom: 0;
    color: #fff;
}
.webform-progress-tracker .progress-step.is-active .progress-text, .webform-progress-tracker .progress-step.is-complete .progress-text {
    color: #fff;
}

.webform-section-title {
  text-align: center;
}

.webform-submission-form .form-item label {
    display: inline-block; /* Makes the labels visible */
}

.webform-section-wrapper {
  display: flex; /* Enable flexbox layout */
  flex-wrap: wrap; /* Allow wrapping to the next row */
  gap: 20px; /* Adds space between rows and columns */
}

.webform-section-wrapper > .form-item {
  flex: 1 1 48%; /* Each item takes 48% of the row */
  box-sizing: border-box; /* Ensures padding and borders are included in the width */
  min-width: 300px; /* Minimum width for fields */
}

.webform-section-wrapper label {
  display: block; /* Ensure labels are displayed above inputs */
  margin-bottom: 5px; /* Adds spacing between label and input */
  font-weight: bold; /* Makes the label text bold */
}

.webform-section-wrapper input,
.webform-section-wrapper textarea {
  width: 100%; /* Inputs and textareas span full width */
  padding: 10px; /* Add padding for better spacing */
  border: 1px solid #ddd; /* Light border */
  border-radius: 5px; /* Rounded corners */
  background: #f9f9f9; /* Light gray background */
}

.webform-section-wrapper textarea {
  resize: none; /* Disable resizing for consistency */
}

.js-form-required.form-required::after {
  content: " *";
  color: red;
}

.webform-section-wrapper{
    background-color: #DAE6F2;
  padding: 15px;
  border-radius: 5px;
}

.progress-step.is-active .progress-marker::before {
    background-color: #007d8b;
}

.progress-step.is-active .progress-marker::after {
    background-color: #00354F;
}

.webform-progress-tracker .progress-step:not(.is-active) .progress-marker::before, .webform-progress-tracker .progress-step:hover .progress-marker::before, .webform-progress-tracker .progress-step .progress-marker::after {
    background-color:  #00354F;
}