.elementor-44747 .elementor-element.elementor-element-528702e{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--background-transition:0.3s;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-44747 .elementor-element.elementor-element-528702e{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-44747 .elementor-element.elementor-element-528702e{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for container, class: .elementor-element-528702e */.submit-results-btn:focus{
    background-color: rgb(173, 183, 97);
    color: rgb(255, 255, 255);
}
 .progress-segment {
    width: 10%;
    height: 8px;
    border: 0px solid #D1D1D1;
    border-radius: 20px;
    background: transparent;
    transition: all 0.3s ease;
}

.progress-segment.active {
    border-color: #ADB761;
    background: #ADB761;
}

.progress-segment.completed {
    border-color: #ADB761;
    background: #ADB761;
}
       /* --- HERO SECTION --- */
       #hero-wrapper {
           width: 100%;
           min-height: 85vh;
           display: flex;
           align-items: center;
           justify-content: center;
           background: url("https://ergoscience.com/wp-content/uploads/2026/08/bg-tofu-quiz.jpg") center left / cover no-repeat;
       }


       .hero-section {
           max-width: 1200px;
           width: 100%;
           padding: 40px 5%;
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: 60px;
       }


       .hero-content {
           flex: 1;
           max-width: 550px;
       }


       .hero-content h1 {
           font-weight: 600;
           font-size: 48px;
           line-height: 1.1;
           color: #1a1a1a;
           margin-top: 0;
           margin-bottom: 24px;
           font-family: Archivo;
       }


       .hero-content p {
           font-weight: 400;
           font-size: 20px;
           line-height: inherit!important;
           color: #333333;
           margin-bottom: 40px;
           font-family: Archivo;
       }


       .primary-btn {
           display: inline-flex!important;
           align-items: center!important;
           justify-content: center!important;
           background-color: #ADB761!important;
           color: #ffffff!important;
           font-weight: 600!important;
           font-size: 20px!important;
           padding: 18px 36px!important;
           border-radius: 8px!important;
           border: none!important;
           cursor: pointer!important;
           transition: background-color 0.3s ease, transform 0.1s ease;
           text-decoration: none!important;
           gap: 10px!important;
            font-family: Archivo!important;
       }


       .primary-btn:hover {
           background-color: #9aa455;
       }


       .hero-image {
           flex: 1;
           display: flex;
           justify-content: flex-end;
       }


       .hero-image img {
           width: 100%;
           max-width: 500px;
           height: auto;
           border-radius: 24px;
           box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.08);
       }


       /* --- QUIZ CONTAINER & MAIN CARD --- */
       #quiz-container {
           display: none;
           padding: 60px 20px;
           
           min-height: 100vh;
            background: url("https://ergoscience.com/wp-content/uploads/2026/08/quiz-bg.png") center left / cover no-repeat;
       }


       .quiz-card {
           background-color: #ffffff;
           border-radius: 16px;
           box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.08);
           max-width: 100%;
           margin: 0px 200px;
           padding: 0;
           overflow: hidden;
           position: relative;
       }


       .quiz-card-inner {
           padding: 50px 60px;
       }


       /* --- PROGRESS HEADER (Q1-Q10) --- */
       .question-meta {
           font-size: 18px;
           color: #6B7280;
           font-weight: 600;
           margin-bottom: 12px;
           text-transform: uppercase;
           letter-spacing: 0.5px;
       }


       .segmented-progress {
           display: flex;
           gap: 6px;
           margin-bottom: 40px;
       }


       .segment {
           height: 4px;
           flex: 1;
           background-color: #E5E7EB;
           border-radius: 2px;
           transition: background-color 0.3s ease;
       }


       .segment.active {
           background-color: #ADB761;
       }


       /* --- QUESTION UI --- */
       .step-container {
           display: none;
       }


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


       .question-title {
           font-size: 26px!important;
           color: #362022!important;
           margin-bottom: 24px!important;
           line-height: inherit!important;
           font-family: Archivo!important;
           font-weight: 600!important;
       }


       .options-list {
           display: flex;
           flex-direction: column;
           gap: 12px;
       }


       .option-label {
           display: flex;
           align-items: center;
           gap: 16px;
           padding: 18px 20px;
           border: 1px solid #D1D5DB!important;
           border-radius: 8px;
           cursor: pointer;
           transition: all 0.2s ease;
           font-size: 16px;
           color: #362022;
           background-color: #fff;
            line-height: inherit!important;
       }


       .option-label:hover {
           border-color: #9CA3AF!important;
       }


       .option-label:has(input:checked) {
           background-color: #FAFFD8!important;
           border-color: #ADB761!important;
       }


       .option-label input[type="radio"] {
           width: 20px;
           height: 20px;
           margin: 0;
           accent-color: #ADB761!important;
           cursor: pointer;
       }
        
        .option-label input[type="radio"]:focus,
        .option-label input[type="radio"]:focus-visible {
            outline: none;
            box-shadow: none;
        }
        .options-list .option-label input[type="radio"] {
            appearance: none;
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            min-width: 20px;
            min-height: 20px;
            flex-shrink: 0;
            border: 2px solid #ADB761;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            position: relative;
        }
        .options-list .option-label input[type="radio"]:checked {
            background: #ADB761;
            border-color: #ADB761;
        }
        
        .options-list .option-label input[type="radio"]:checked::before {
            content: "";
            display: block;
            width: 8px;
            height: 8px;
            margin: 4px;
            border-radius: 50%;
            background: #fff;
        }
       .nav-buttons {
           display: flex;
          justify-content: end;
           align-items: center;
           margin-top: 30px;
       }


       .nav-buttons.single-right {
           justify-content: end;
       }


       /* Back Button */
       .back-btn {
           background-color: #ffffff;
           color: #362022;
           border: 1px solid #362022;
           border-radius: 8px;
           padding: 14px 28px;
           font-size: 16px;
           font-weight: 600;
           cursor: pointer;
           display: inline-flex;
           align-items: center;
           gap: 8px;
           transition: all 0.3s ease;
           font-family: 'Archivo', sans-serif;
       }


       .back-btn:hover {
           background-color: #f7f5f5;
           color: #000!important;
       }


       /* Continue Button */
       .continue-btn {
           background-color: #362022;
           color: #ffffff;
           border: none;
           border-radius: 8px;
           padding: 14px 28px;
           font-size: 16px;
           font-weight: 600;
           cursor: pointer;
           display: inline-flex;
           align-items: center;
           gap: 8px;
           transition: background-color 0.3s;
           font-family: 'Archivo', sans-serif;
       }


       .continue-btn:hover {
           background-color: #241416;
       }


       /* --- STEP 11: LEAD CAPTURE PAGE --- */
       .lead-capture-wrapper {
           display: flex;
           width: 100%;
           min-height: 600px;
           background: #ffffff;
       }


       .lead-capture-image {
           width: 45%;
           flex-shrink: 0;
       }


       .lead-capture-image img {
           width: 100%;
            max-height: 750px;
            height: auto;
            display: block;
            object-fit: cover;
           
           border-top-left-radius: 16px;
           border-bottom-left-radius: 16px;
       }


       .lead-capture-content {
           width: 55%;
           padding: 50px 48px;
           display: flex;
           flex-direction: column;
           justify-content: center;
       }


       .lead-capture-content h2 {
           font-size: 30px;
           font-weight: 600;
           color: #111827;
           margin-top: 0;
           margin-bottom: 16px;
           line-height: inherit!important;
       }


       .lead-capture-content p {
           font-size: 15px;
           color: #4B5563;
           margin-bottom: 12px;
           line-height: inherit!important;
       }


       .lead-form-grid {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 16px;
           margin-top: 12px;
           margin-bottom: 24px;
       }


       .lead-form-group {
           display: flex;
           flex-direction: column;
           text-align: left;
       }


       .lead-form-group.full {
           grid-column: span 2;
       }


       .lead-form-group label {
           font-size: 14px;
           font-weight: 600;
           margin-bottom: 6px;
           color: #374151;
       }


       .required-asterisk {
           color: #ef4444;
       }


       .lead-form-group input {
           padding: 12px 14px;
           border: 1px solid #D1D5DB;
           border-radius: 8px;
           font-size: 15px;
           font-family: 'Archivo', sans-serif;
           transition: border-color 0.2s;
       }


       .lead-form-group input:focus {
           outline: none;
           border-color: #ADB761;
       }


       .submit-results-btn {
           width: 100%;
           background-color: #ADB761;
           color: #ffffff;
           border: none;
           border-radius: 8px;
           padding: 16px;
           font-size: 18px;
           font-weight: 600;
           cursor: pointer;
           display: flex;
           align-items: center;
           justify-content: center;
           gap: 10px;
           transition: background-color 0.3s;
           font-family: 'Archivo', sans-serif;
       }


       .submit-results-btn:hover {
           background-color: #9aa455;
       }


       /* --- STEP 12: RESULTS PAGE --- */
       .result-page-wrapper {
           padding: 50px 60px;
           text-align: center;
           background: #ffffff;
       }


       .result-subtitle {
           font-size: 22px;
           font-weight: 400;
           color: #222222;
           margin-bottom: 6px;
           text-align: start;
           
       }


       .result-main-title {
           font-size: 40px;
           font-weight: 700;
           color: #000000;
           margin-top: 0;
           margin-bottom: 32px;
           line-height: 42px!important;
            text-align: start;
            margin-top: 20px;
       }


       /* Callout Card with properly padded & floating Question Mark Graphic */
       
       .result-callout-card {
           background-color: #FFD389;
           border-radius: 14px;
           padding: 32px 36px;
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: 20px;
           position: relative;
           overflow: hidden;
           text-align: left;
           margin-bottom: 32px;
           min-height: 170px;
       }


       .callout-text {
           font-size: 16px;
           line-height: 1.6;
           color: #222222;
           flex: 1;
           z-index: 2;
           max-width: 65%;
       }


       /* Container with explicit bottom padding to float the graphic above the bottom edge */
       .callout-graphic {
           position: absolute;
           right: 15px;
           top: 0;
           bottom: 0;
           height: 100%;
           width: 40%;
           display: flex;
           align-items: center;
           justify-content: flex-end;
           z-index: 1;
           pointer-events: none;
           overflow: hidden;
           padding: 12px 10px 24px 0; /* 24px bottom padding keeps the stem floating */
       }


       .callout-graphic img {
           height: 100%;
           width: auto;
           object-fit: contain;
           object-position: right center;
           display: block;
       }


       /* Investment Card */
       .investment-card {
           background-color: #F9F8F6;
           border: 1px solid #E5E3DF;
           border-radius: 12px;
           overflow: hidden;
           margin-bottom: 36px;
           text-align: center;
       }


       .investment-heading {
           font-size: 20px!important;
           font-weight: 800!important;
           color: #111111!important;
           margin-top: 28px!important;
           margin-bottom: 20px!important;
       }


       .investment-tags-container {
           display: flex;
           align-items: center;
           justify-content: center;
           gap: 28px;
           flex-wrap: wrap;
           padding: 0 24px 28px 24px;
       }


       .investment-tag {
           align-items: center;
           font-size: 16px;
           font-weight: 600;
           color: #111111;
       }

        .investment-tag {
            display: flex;
            gap: 12px;
            padding: 12px 18px;
            margin-bottom: 12px;
        }

.investment-tag::before {
    content: "";
    width: 20px;
    height: 20px;
    background: url('https://ergoscience.com/wp-content/uploads/2026/08/pointer.png') no-repeat center;
    background-size: contain;
    flex-shrink: 0;
}

       .investment-tag-arrow {
           color: #222222;
           font-size: 12px;
       }


       .next-step-banner {
           background-color: #362022;
           padding: 18px 28px;
           display: flex;
           align-items: center;
           justify-content: center;
           gap: 16px;
           text-align: left;
       }


       .next-step-label {
           color: #F3BD60;
           font-size: 16px;
           font-weight: 600;
           white-space: nowrap;
           display: flex;
           align-items: center;
           gap: 4px;
       }


       .next-step-text {
           color: #FFFFFF;
           font-size: 15px;
           font-weight: 400;
       }


       .result-cta-container {
           display: flex;
           justify-content: center;
       }


       /* --- RESPONSIVE MEDIA QUERIES --- */
       @media (max-width: 900px) {
           .investment-tags-container {
gap: 10px;
}
           .hero-section {
               flex-direction: column;
               text-align: center;
               gap: 40px;
               padding: 60px 5%;
           }


           .hero-content {
               max-width: 100%;
           }


           .hero-image {
               justify-content: center;
           }


           .lead-capture-wrapper {
               flex-direction: column;
           }



           .result-page-wrapper {
               padding: 40px 24px;
           }


           .result-main-title {
               font-size: 32px;
           }
       }


       @media (max-width: 600px) {
           .quiz-card-inner {
               padding: 30px 20px;
           }


           .lead-form-grid {
               grid-template-columns: 1fr;
           }


           .lead-form-group.full {
               grid-column: span 1;
           }


           .hero-content h1 {
               font-size: 34px;
           }


           .hero-content p {
               font-size: 18px;
           }


           .primary-btn {
               font-size: 18px;
               padding: 16px 28px;
           }


           .result-callout-card {
               flex-direction: column;
               text-align: center;
               padding: 24px;
               min-height: auto;
           }


           .callout-text {
               max-width: 100%;
           }


           .callout-graphic {
               position: relative;
               right: auto;
               top: auto;
               bottom: auto;
               width: 100%;
               height: 120px;
               margin-top: 16px;
               justify-content: center;
               padding: 0;
           }


           .callout-graphic img {
               height: 120px;
               margin-top: 0;
               margin-bottom: 0;
           }


           .next-step-banner {
               flex-direction: column;
               text-align: center;
               gap: 8px;
           }


           .investment-tags-container {
               flex-direction: column;
               gap: 12px;
           }
       }


@media (min-width: 321px) and (max-width:768px) {
    .question-title{
        font-size: 20px !important;
    }
    .option-label {
    font-size: 14px;
}
.nav-buttons {
    display: block;
}
.quiz-card {
        margin: 0px 0px;
    }
    
}
@media (min-width: 321px) and (max-width:350px) {
     .continue-btn{
         margin-top:20px!important;
     }
        .nav-buttons {
    display: block !important;
}
}
@media (min-width: 321px) and (max-width: 991px) {
    .lead-capture-content {
    width: 100%;}
        .lead-capture-image img {
        display: none;
    }
    .lead-capture-image {
        display: none;
    }
    .continue-btn{
        margin-top:-5px;
    }
    .nav-buttons {
    display: flex;
}
}
    @media (min-width: 992px) and (max-width: 1200px) {
    .quiz-card {
    margin: 0px 80px;
}
}
@media (min-width: 769px) and (max-width: 991px) {
    
    .quiz-card {
    margin: 0px 50px;}
}/* End custom CSS */