.elementor-2630 .elementor-element.elementor-element-0c45af7{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:5%;--padding-bottom:5%;--padding-left:5%;--padding-right:5%;}.elementor-2630 .elementor-element.elementor-element-0c45af7:not(.elementor-motion-effects-element-type-background), .elementor-2630 .elementor-element.elementor-element-0c45af7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5ECDE;}.elementor-2630 .elementor-element.elementor-element-32eabb7{--display:flex;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#524024;--border-color:#524024;--border-radius:12px 12px 12px 12px;--padding-top:3%;--padding-bottom:3%;--padding-left:3%;--padding-right:3%;}.elementor-2630 .elementor-element.elementor-element-32eabb7:not(.elementor-motion-effects-element-type-background), .elementor-2630 .elementor-element.elementor-element-32eabb7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-astglobalcolor4 );}@media(min-width:768px){.elementor-2630 .elementor-element.elementor-element-32eabb7{--width:50%;}}@media(max-width:1024px) and (min-width:768px){.elementor-2630 .elementor-element.elementor-element-32eabb7{--width:65%;}}/* Start custom CSS for html, class: .elementor-element-c6dc713 *//* General styles for the form */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'); /* Importing Inter font */

/* Apply Inter font to the entire form */
body {
  font-family: 'Inter', sans-serif;
}

.step {
  display: none;  /* All steps hidden by default */
  margin: 20px 0;
}

.step:first-of-type {
  display: block;  /* Make Step 1 visible initially */
}

/* Styling for questions (16px font size) */
h3 {
  font-size: 16px;
  font-weight: 600; /* Medium weight for questions */
  color: #333; /* Dark text for questions */
  margin-bottom: 15px;
}

/* Styling for options (14px font size) */
button.option {
  font-size: 14px;
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  border-radius: 5px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color 0.3s, color 0.3s;
}

/* Selected state for options */
button.selected {
  background-color: #E2DDD7 !important; /* Green color for selected option */
  border: 1px solid #2B2215; /* Darker green for selected border */
}

/* Green button styles */
button.green {
  background-color: #E2DDD7;  /* Green */
  color: #1A1A1A;
}

button.green:hover {
  background-color: #CD9F5A;  /* Darker green on hover */
}

button.green:active {
  opacity: 0.8;
}

button.green:focus {
  outline: none;
}

/* Red button styles */
button.red {
  background-color: #E2DDD7;  /* Red */
  color: #1A1A1A;
}

button.red:hover {
  background-color: #CD9F5A;  /* Darker red on hover */
}

button.red:active {
  opacity: 0.8;
}

button.red:focus {
  outline: none;
}

/* Submit button style */
button.submit {
  background-color: #CD9F5A;  /* Blue for submit */
  color: white;
  font-weight: bold;
}

button.submit:hover {
  background-color: #7B5F36;  /* Darker blue on hover */
}

button.submit:active {
  opacity: 0.8;
}

button.submit:focus {
  outline: none;
}

/* Make the submit button container visible when user reaches Step 7 */
#submitStep {
  margin-top: 20px;
  text-align: center;
}

/* Ensure buttons are responsive */
@media (max-width: 768px) {
  button.option {
    font-size: 14px;
    padding: 10px;
  }
}/* End custom CSS */