.rq-section {
   /* padding: 60px 0; */
   background-color: #e3e3e3;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
}
.rq-container {
   max-width: 1200px;
   width: 100%;
   margin: 0 auto;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #ffffff;
}
.rq-form-wrapper {
   padding: 10px;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(68, 69, 69, 0.1);
   width: 100%;
   height: 100%;
}

body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
#multiStepForm { padding: 20px; min-height: 400px; display: flex; justify-content: center; flex-wrap: wrap;}
h2 { margin-bottom: 20px; width: 100%; text-align: center; font-weight: 600; font-size: 1.5rem;}
.choiceOption { position: relative; margin: 10px; padding: 0; border: 2px solid #ccc; cursor: pointer; text-align: center; width: 100%; max-width: 30%; vertical-align: top; background: #fff; display: flex; flex-direction: column; justify-content: space-between; }
.choiceOption.design-option { width: 100%; max-width: 20%; max-height: 170px; }
.choiceOption.colour-option { width: 100%; max-width: 18%; max-height: 170px; }
.choiceOption.frame_colour { width: 100%; max-width: 20%; max-height: 170px; }
.choiceOption.wall-option { width: 100%; max-width: 31%; max-height: 260px; }
.choiceOption.glazing-option { width: 100%; max-width: 18%; height: 170px; }
.choiceOption.wall-variation { width: 100%; max-width: 18%; height: 170px; }
.choiceOption.base-option { width: 100%; max-width: 35%; }
.choiceOption img { width: auto; height: 100%; object-fit: cover; display: block; }
.choiceOption.design-option img { width: auto; height: 100%; }
.choiceOption.colour-option img { width: auto; height: 100%; }
.choiceOption.selected { border-color: #ed2426; background: #ed242620; }
.choiceOption span { display: block; padding: 10px; font-size: 14px; position: absolute; bottom: 0; width: 100%; color: #ffffff; background: rgba(0,0,0,0.65); box-sizing: border-box; }
.formField label { display: block; margin-bottom: 5px; font-weight: bold; font-size: 14px; }
.formField input, .formField select, .formField textarea { width: 100%; padding: 8px; font-size: 14px; border: 1px solid #000000; }
#formNavigation { padding: 20px; text-align: center; }
#formNavigation button { padding: 10px 20px; font-size: 16px; margin: 0 10px; cursor: pointer; background: #EFEFEF; color: #000;}
#formNavigation button#nextStep { background-color: #ed2426; color: #fff; border-color: #ed2426; outline: none; }
#progressBar { height: 6px; background: #a7a9ac; margin: 0; width: 100%; }
#progress { height: 100%; background: #ed2426; width: 0%; transition: width 0.3s; }
.error-message {
   color: #ed2426; 
   background-color: #f8d7da;
   border: 1px solid #f5c6cb;
   font-size: 14px; 
   font-weight: 500;
   letter-spacing: 0.5px; 
   margin: 5px auto;
   padding: 10px;
   border-radius: 4px;
   text-align: center;
   width: 90%;
   box-sizing: border-box;
   animation: fadeIn 0.3s ease-in;
}
.validation-error {
   color: #ed2426;
   font-size: 14px; 
   font-weight: 500;
   margin: 0;
}

@keyframes fadeIn {
   from { opacity: 0; transform: translateY(-10px); }
   to { opacity: 1; transform: translateY(0); }
}
.disclaimer-link { color: #000000; text-decoration: underline; }
.disclaimer-link:hover { color: #ed2426; }
.form-disclaimer {
   font-size: 14px;
   color: #444545;
   margin: 0;
   text-align: center;
   max-width: 100% !important;
}
.response-message { 
   display: block;
   width: auto;
   padding: 1rem;
   margin: 10px auto;
   text-align: center; 
   font-size: 14px;
}
.response-message.success {
   background-color: #d4edda;
   color: #155724;
   border: 1px solid #c3e6cb;
}
.response-message.error {
   background-color: #f8d7da;
   color: #721c24;
   border: 1px solid #f5c6cb;
}
.preview-container {
   position: relative;
   width: 50%;
   height: 400px;
   display: none;
}
.preview-container img {
   width: auto;
   max-width: 550px;
   height: 100%;
   object-fit: cover;
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
}
.formFieldWrapper {
   max-width: 600px;
   margin: 0 auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
.formFieldWrapper_group {
   width: 50%;
   align-content: center;
   justify-content: center;
}

.form_field_first_name {
   width: 48%;
   display: inline-block;
   margin-right: 4%;
}
.form_field_last_name {
   width: 48%;
   display: inline-block;
}
.form_field_email {
   width: 100%;
   display: block;
   margin-top: 15px;
}
.form_field_phone {
   width: 48%;
   display: inline-block;
   margin-right: 4%;
}
.form_field_postcode {
   width: 48%;
   display: inline-block;
}
.form_field_additional_info {
   width: 100%;
   display: block;
   margin-top: 15px;
   height: 100px;
}
.form_field_width_mm, .form_field_projection_mm {
   width: 46%;
   display: inline-block;
}
.form_field_property_type {
   width: 100%;
   display: block;
   margin-top: 15px;
}
.form_field_width_mm input, .form_field_projection_mm input {
   width: 90%;
}
.form_field_width_mm {
   margin-right: 8%;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
}

@media(max-width: 1200px) {
   .preview-container img {
      max-width: 400px;
   }
}
@media(max-width: 768px) {
   .preview-container img {
      max-width: 340px;
   }
}

@media (max-width: 600px) {
   h2 { margin-bottom: 0; }
   .choiceOption { max-width: 44%; }
   .choiceOption.colour-option { max-width: 27%; max-height: 120px; }
   .choiceOption.colour-option span { font-size: 12px; padding: 5px;}
   .choiceOption.wall-option { max-width: 52%; }
   .choiceOption.glazing-option { max-width: 27%; height: 100px; }
   .choiceOption.glazing-option span { font-size: 12px; padding: 5px;}
   .choiceOption.wall-variation { max-width: 40%; height: 150px; }
   .choiceOption.wall-variation span { font-size: 12px; padding: 5px;}
   .choiceOption.base-option { max-width: 70%; }
   .choiceOption.design-option { max-width: 44%; max-height: 150px; }
   .choiceOption.design-option img { height: 90px; }
   .choiceOption.wall-option img { height: 90px; }
   #multiStepForm { padding: 5px; }
   .rq-form-wrapper { padding: 10px; }
   .formField input {
      width: 87%;
   }
   .preview-container {
      position: relative;
      width: 100%;
      height: 250px;
      display: none;
   }
   .formFieldWrapper {
      max-width: 330px;
      justify-content: center;
   }
   .formFieldWrapper_group {
      width: 100%;
      justify-content: space-between;
   }
   .preview-container img {
      left: 50%;
      transform: translateX(-50%);
   }

   .form_field_first_name,
   .form_field_last_name,
   .form_field_email,
   .form_field_phone,
   .form_field_postcode,
   .form_field_additional_info,
   .form_field_property_type {
      width: 100%;
      margin: 0 0 10px 0;
   }
   .form_field_additional_info {
      height: 70px;
   }
   .form_field_additional_info textarea{
      width: 88%;
   }
   .form_field_width_mm, .form_field_projection_mm {
      width: 46%;
      display: inline-block;
      margin-bottom: 5px;
      margin-right: 0;
   }
}