.elementor-63932 .elementor-element.elementor-element-5bb1748{padding:80px 0px 0px 0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Roboto;font-weight:var( --e-global-typography-text-font-weight );}.ee-tooltip.ee-tooltip-25b32c9.to--top,
							 .ee-tooltip.ee-tooltip-25b32c9.to--bottom{margin-left:0px;}.ee-tooltip.ee-tooltip-25b32c9.to--left,
							 .ee-tooltip.ee-tooltip-25b32c9.to--right{margin-top:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-df6d463 *//* Form Container */
.form-container {
  max-width: 100%;
  margin: 1rem auto;
  background: #fff;
  font-family: roboto;
}

/* Step Transitions */
.form-step {
  display: none;
  animation: fadeIn 0.3s ease-out;
}

.form-step.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Step Title */
.step-title {
  font-family: roboto;
  font-size: 3rem!important;
  font-weight: 500!important;
  margin-bottom: 3rem;
  color: #72ae47;
  text-align: center;
 
}

/* Option Group Styling */
.option-group {
  font-family: roboto;
  display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
  gap: 1.2rem;
  margin-bottom: 2rem;
  
}

.option {
  font-family: roboto;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  border:2px solid #72ae47;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 400;
  color: #72ae47;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;

}

.option:hover {
  background-color: rgba(92, 161, 70, 0.08);
  transform: translateY(-2px);
}

.option.selected {
    font-family: roboto;
  background-color: #5ca146;
  color: white;
  box-shadow: 0 4px 8px rgba(92, 161, 70, 0.2);
}

/* Input Fields */
.text-input {
  width: 100%;
  font-family: roboto;
  padding: 15px!important;
  margin-bottom: 0rem;
  border: 2px solid #72AE47!important;
  font-size: 1rem;
  transition: all 0.25s ease;
  box-sizing: border-box;
  font-weight: 500;
  border-color: #72AE47;
  font-size: 20px;
    text-align: center;
    color: #72AE47;
    border-width: 2px;
}

.text-input:focus {
  outline: none;
  border-color: #5ca146;
  box-shadow: 0 0 0 3px rgba(92, 161, 70, 0.15);
  font-family: roboto;
}

.text-input::placeholder {
  color: #72AE47;
  font-family: roboto;
}

/* Button Styles */
.btn {
    font-family: roboto;
  display: inline-block;
  padding: 15px;
  font-size: 1.5rem;
  font-weight: 600;
  border: none;
  background-color: #72AE47;
  color: white;
  cursor: pointer;
  transition: all 0.25s ease;
  width: 100%;
  margin-top: 1rem;
}

.btn:hover {
  background-color: #4a9136;
 /* transform: translateY(-2px);*/
  box-shadow: 0 4px 8px rgba(92, 161, 70, 0.2);
}

.btn:active {
    font-family: roboto;
  transform: translateY(0);
}

.btn-back {
    font-family: roboto;
  background-color: #f1f1f1;
  color: #555;
}

.btn-back:hover {
  background-color: #e0e0e0;
}


[type=button]:focus, [type=submit]:focus, button:focus{
    background: #72AE47!important;
}
/* Navigation */
.navigation {
    font-family: roboto;
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

/* Responsive Adjustments */
@media (max-width: 600px) {
  .form-container {
   
  }
  
  .step-title {
    font-size: 1.5rem;
  }
  
  .option-group {
    grid-template-columns: 1fr;
  }
}

/* Form Validation */
input:invalid {
  border-color: #e74c3c;
}

input:valid {
  border-color: #2ecc71;
}

/* Add to your existing CSS */
.checkbox-group {
  margin: 1.5rem 0;
  text-align: left;
  position: relative;
}

.checkbox-group input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

.checkbox-group label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  display: inline-block;
  color: #555;
  line-height: 1.5;
}

.checkbox-group label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #5ca146;
  border-radius: 4px;
  background: #fff;
  transition: all 0.2s ease;
}

.checkbox-group label:after {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: all 0.2s ease;
}

.checkbox-group input[type="checkbox"]:checked + label:before {
  background: #5ca146;
}

.checkbox-group input[type="checkbox"]:checked + label:after {
  opacity: 1;
}

.checkbox-group input[type="checkbox"]:focus + label:before {
  box-shadow: 0 0 0 3px rgba(92, 161, 70, 0.3);
}

.checkbox-group.invalid label:before {
  border-color: #e74c3c;
}

.checkbox-group .error-message {
  display: none;
  color: #e74c3c;
  font-size: 1rem;
  margin-top: 0.5rem;
}

.checkbox-group.invalid .error-message {
  display: block;
}

/* Error Handling Styles */
.input-group, .checkbox-group {
  margin-bottom: 1.5rem;
  position: relative;

}
#step9,#step10,#step11{
    max-width: 600px;
    margin: auto;
}


.error-message {
  color: #18a4c6!important;
  font-size: 0.85rem;
  margin-top: 0.5rem;
  display: none;
}
.elementor-63932 .elementor-element.elementor-element-df6d463 a{
    color:#4ca0c280;
    font-weight: 500;
    text-decoration: underline!important;
}
.elementor-63932 .elementor-element.elementor-element-df6d463 .invalid{
    background: #fff!important;
}
/* Input Error States */
.input-group.invalid .text-input {
  border-color: #e74c3c;
  background-color: #4ca0c280!important;
}

.input-group.invalid .error-message {
  display: block;
}

/* Checkbox Error State */
.checkbox-group.invalid label:before {
  border-color: #e74c3c;
}

.checkbox-group.invalid .error-message {
  display: block;
}

/* Validation Icons */
.input-group {
  position: relative;
}

.input-group.valid:after {
  content: "✓";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #2ecc71;
  font-weight: bold;
}
@media(max-width:768px){
    .option {
  width: 120px;
  height: 120px;
  margin: 4px;
  font-size: 20px;
        
    }
    .option-group{
        gap:0;
    }
    .step-title{
        font-size:22px!important;
        margin-bottom:20px;
    }
    
    
}
.elementor-63932 .elementor-element.elementor-element-df6d463 a{
    text-decoration: none!important;
   
    
}
.elementor-63932 .elementor-element.elementor-element-df6d463 #step10 a{
     color:#555555;
    font-weight: normal;
    text-decoration: underline!important;
}

.elementor-63932 .elementor-element.elementor-element-df6d463 input:focus::placeholder {
  color: transparent; /* hides placeholder */
}/* End custom CSS */