/**---------------------- the below css is used for personality test --------------------------------******/

.outer-container {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    
    }
    
    .quiz-section {
    width: 69%;
    padding: 20px;
    background-color: #ffffff;
    margin:1%;
    
    
    }
    
    .welcome-section {
    width: 29%;
    height: auto;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #ddd; /* Box outline */
    border-radius: 16px; /* Rounded edges */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow for the square box */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:1%;
    }
    
    .welcome-section img {
    width: 50%;
    
    margin-bottom: 20px;
    }
    
    .progress-bar-container {
    width: 100%;
    margin-bottom: 20px;
    position: relative;
    }
    
    .progress-bar-bg {
    width: 100%;
    height: 10px;
    flex-shrink: 0;
    background: var(--Primary-100, #D4DCF8);
    border-radius: 4px;
    overflow: hidden;
    }
    
    .progress-bar {
    width: 0%; /* Start at 0% progress */
    height: 100%;
    background-color: #7186DF;
    border-radius: 4px;
    }
    
    .progress-indicators {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    color:rgba(97, 97, 97, 0.50);
    }
    
    .restart-test-btn-ai-assessment {
    display: flex;
    width: 30%;
    height: 53px;
    padding: 12px 25px;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--Primary, red);
    background: #FFF;
    color: red;
    box-shadow: 14px 22px 7px 0px rgba(0, 0, 0, 0.00), 9px 14px 7px 0px rgba(0, 0, 0, 0.01), 5px 8px 6px 0px rgba(0, 0, 0, 0.05), 2px 4px 4px 0px rgba(0, 0, 0, 0.09), 1px 1px 2px 0px rgba(0, 0, 0, 0.10);
    }
    
    .restart-test-btn-ai-assessment:hover {
        background: red; /* or use #ff0000 */
        color: #fff;
    }
    







    
    .next-question-btn-container {
    display: flex;
    width: 100%;
    gap: 2%;
    justify-content: flex-end;
    align-items: center;
    }
    
    .next-question-btn {
    display: flex;
    width: 30%;
    height: 53px;
    padding: 12px 78px;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--Primary, #3f4dcb);
    background: #FFF;
cursor:pointer;
    color:#3f4dcb;
    box-shadow: 14px 22px 7px 0px rgba(0, 0, 0, 0.00), 9px 14px 7px 0px rgba(0, 0, 0, 0.01), 5px 8px 6px 0px rgba(0, 0, 0, 0.05), 2px 4px 4px 0px rgba(0, 0, 0, 0.09), 1px 1px 2px 0px rgba(0, 0, 0, 0.10);
    }

    .next-question-btn:hover,
    .next-question-btn:focus {
        background-color: white;
        color: #3f4dcb;
        border: 1px solid var(--Primary, #3f4dcb);
cursor:pointer;
    }

    .next-question-btn:disabled {
        color: #848484 !important;  /* Change text color */
        border: 1px solid #848484 !important; /* Change border color */
        cursor: not-allowed; /* Show disabled cursor */
    }    


    #interest_next-question-btn:hover,
    #interest_next-question-btn:focus{
        background-color: white;
        color: #3f4dcb;
        border: 1px solid var(--Primary, #3f4dcb);  
cursor:pointer;
    }

    #interest_next-question-btn:disabled{
        color: #848484 !important;  /* Change text color */
        border: 1px solid #848484 !important; /* Change border color */
        cursor: not-allowed; /* Show disabled cursor */   
    }

    #skill_next-question-btn:hover,
    #skill_next-question-btn:focus{
        background-color: white;
        color: #3f4dcb;
        border: 1px solid var(--Primary, #3f4dcb); 
cursor:pointer;
    }

    #skill_next-question-btn:disabled{
        color: #848484 !important;  /* Change text color */
        border: 1px solid #848484 !important; /* Change border color */
        cursor: not-allowed; /* Show disabled cursor */  
    }

    .subject_next-question-btn:hover,
    .subject_next-question-btn:focus{
        background-color: white;
        color: #3f4dcb;
        border: 1px solid var(--Primary, #3f4dcb); 
cursor:pointer;
    }

    .subject_next-question-btn:disabled{
        color: #848484 !important;  /* Change text color */
        border: 1px solid #848484 !important; /* Change border color */
        cursor: not-allowed; /* Show disabled cursor */  
    }





    
    .per-mobile-next-question-btn:hover, 
    .per-mobile-next-question-btn:focus  {
        background-color: white;
        color: #3f4dcb;
        border: 1px solid var(--Primary, #3f4dcb);
cursor:pointer;
    }
    

    .per-mobile-next-question-btn:disabled{
        color: #848484 !important;  /* Change text color */
        border: 1px solid #848484 !important; /* Change border color */
        cursor: not-allowed; /* Show disabled cursor */
    } 
    

    #skill_mobile_next-question-btn:hover,
    #skill_mobile_next-question-btn:focus {
        background-color: white;
        color: #3f4dcb;
        border: 1px solid var(--Primary, #3f4dcb);
cursor:pointer;
    }

    #skill_mobile_next-question-btn:disabled {
        color: #848484 !important;  /* Change text color */
        border: 1px solid #848484 !important; /* Change border color */
        cursor: not-allowed; /* Show disabled cursor */
    }



    .subject_test_mobile_next-question-btn:hover,
    .subject_test_mobile_next-question-btn:focus{
        background-color: white;
        color: #3f4dcb;
        border: 1px solid var(--Primary, #3f4dcb);
cursor:pointer;
    }

    .subject_test_mobile_next-question-btn:disabled{
        color: #848484 !important;  /* Change text color */
        border: 1px solid #848484 !important; /* Change border color */
        cursor: not-allowed; /* Show disabled cursor */
    }

    #interest_mobile_next-question-btn:hover,
    #interest_mobile_next-question-btn:focus{
        background-color: white;
        color: #3f4dcb;
        border: 1px solid var(--Primary, #3f4dcb);
cursor:pointer;
    }

    #interest_mobile_next-question-btn:disabled{
        color: #848484 !important;  /* Change text color */
        border: 1px solid #848484 !important; /* Change border color */
        cursor: not-allowed; /* Show disabled cursor */
    }









/* Container for each question */
.question-container {
    margin-bottom: 25px;
}

/* Row that holds options side by side */
.options-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Each option (radio + card inside label) */
.option-box {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    flex: 1 1 220px;
   
    transition: transform 0.2s ease;
}

.option-box:hover {
    transform: translateY(-3px);
}

/* Radio button */
.option-box input[type="radio"] {
    position: absolute;   /* remove it from layout */
    opacity: 0;           /* invisible */
    width: 0;
    height: 0;
    margin: 0;
}

/* Card content (image + text) */
.option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    width: 100%;
    min-height: 180px;
    padding: 15px;

    background: #fff;
    border: 2px solid #ddd;
    border-radius: 10px;
    text-align: center;
    transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}

/* Image inside card */
.option-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-bottom: 10px;
    border-radius: 8px;
}

/* Text */


/* Hover effect for card */
.option-card:hover {
    border-color: #0073e6;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Selected state (radio checked) */
.option-box input[type="radio"]:checked + .option-card {
    border-color: #0073e6;
    background: #f0f8ff;
}

    /**---------------------- the above css is used for personality test --------------------------------******/
    
    
    
    /*------------------ the below css is used for the subject test *-----------------------------------------*/
    
    .subject_outer-container {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    }
    
    .subject_quiz-section {
    width: 69%;
    padding: 20px;
    background-color: #ffffff;
    margin:1%;
    }
    
    .subject_welcome-section {
    width: 29%;
    height: auto;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #ddd; /* Box outline */
    border-radius: 16px; /* Rounded edges */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow for the square box */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:1%;
    }
    
    .subject_welcome-section img {
    width: 50%;
    
    margin-bottom: 20px;
    }
    
    .subject_progress-bar-container {
    width: 100%;
    margin-bottom: 20px;
    position: relative;
    }
    
    .subject_progress-bar-bg {
    width: 100%;
    height: 10px;
    flex-shrink: 0;
    background: var(--Primary-100, #D4DCF8);
    border-radius: 4px;
    overflow: hidden;
    }
    
    .subject_progress-bar {
    width: 0%; /* Start at 0% progress */
    height: 100%;
    background-color: #7186DF;
    border-radius: 4px;
    }
    
    .subject_progress-indicators {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: bold;
    }
    
    .subject_test_next-question-btn-container {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 2%;
    }
    
    .subject_next-question-btn {
    display: flex;
    width: 30%;
    height: 53px;
    padding: 12px 78px;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--Primary, #3F4DCB);
    background: #FFF;
    color:rgba(63, 77, 203, 1);
    box-shadow: 14px 22px 7px 0px rgba(0, 0, 0, 0.00), 9px 14px 7px 0px rgba(0, 0, 0, 0.01), 5px 8px 6px 0px rgba(0, 0, 0, 0.05), 2px 4px 4px 0px rgba(0, 0, 0, 0.09), 1px 1px 2px 0px rgba(0, 0, 0, 0.10);
    cursor:pointer;
    }
    
    
    
    .subject_question-container {
    margin-bottom: 20px;
    }
    
    .subject_options-box{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 10px;
    }
    
    .subject_option-box {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    transition: background-color 0.3s, border-color 0.3s;
    width: 49%;
    margin: 0 0.5% 0.5% 0;
    }
    
    
    .subject_option-box input[type="radio"] {
    margin-right: 10px;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    stroke-width: 1px;
    stroke: #242424;
    }
    
    .subject_option-box input[type="radio"]:checked{
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    fill: var(--Blue-900, #003F6B);
    stroke-width: 1px;
    stroke: var(--Blue-900, #003F6B);
    border-color: var(--Blue-900, #003F6B);
    background-color: var(--Blue-900, #003F6B);
    }
    
    /*------------------ the above css is used for the subject test *-----------------------------------------*/
    
    
    
    
    
    
    
    
    
/*------------------ Interest Test Full CSS ------------------*/

/* Outer container */
#interest_outer-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center; /* <-- CENTER vertically */
    gap: 1%; /* space between quiz and welcome */
    position: relative;
}

/* Quiz section */
#interest_quiz-section {
    width: 69%;
    padding: 20px;
    background-color: #ffffff;
    flex-shrink: 0;
}

/* Welcome section */
#interest_welcome-section {
    width: 29%;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* vertically center content */
    flex-shrink: 0;
}

/* Welcome section image */
#interest_welcome-section img {
    width: 50%;
    margin-bottom: 20px;
}

/* Progress bar */
#interest_progress-bar-container {
    width: 100%;
    margin-bottom: 20px;
    position: relative;
}

#interest_progress-bar-bg {
    width: 100%;
    height: 10px;
    flex-shrink: 0;
    background: var(--Primary-100, #D4DCF8);
    border-radius: 4px;
    overflow: hidden;
}

#interest_progress-bar {
    width: 0%;
    height: 100%;
    background-color: #7186DF;
    border-radius: 4px;
}

/* Progress indicators */
.interest_progress-indicators {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    color: rgba(97, 97, 97, 0.50);
}

/* Next button container */
.interest_mobile_next-question-btn-container {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 2%;
}

#interest_next-question-btn {
    display: flex;
    width: 30%;
    height: 53px;
    padding: 12px 78px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--Primary, #3F4DCB);
    background: #FFF;
    color: rgba(63, 77, 203, 1);
    box-shadow: 14px 22px 7px 0px rgba(0,0,0,0.00),
                9px 14px 7px 0px rgba(0,0,0,0.01),
                5px 8px 6px 0px rgba(0,0,0,0.05),
                2px 4px 4px 0px rgba(0,0,0,0.09),
                1px 1px 2px 0px rgba(0,0,0,0.10);
cursor:pointer;
}

/* Question container spacing */
.interest_question-container {
    margin-bottom: 20px;
}

/*------------------ Options layout ------------------*/

/* Wrapper for side by side options */
.interest-options-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* space between options */
    margin-top: 10px;
}

/* Each option box */
.interest_option-box {
    flex: 1; /* equal width */
    display: flex;
    flex-direction: column; /* image -> label -> radio */
    align-items: center;
  
    background-color: #FFFFFF;
    border: 2px solid #ddd; /* default border */
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.3s, box-shadow 0.3s;
   
}

/* Hide the radio button */
.interest_option-box input[type="radio"] {
    display: none;
}

/* Option image */
.interest_option-box img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    margin-bottom: 8px;
}

/* Option label */


/* Selected state (border + shadow) */
.interest_option-box:has(input[type="radio"]:checked) {
    border-color: #3F4DCB; /* primary color */
    box-shadow: 0 4px 12px rgba(63, 77, 203, 0.3);
}

/* Hover effect */
.interest_option-box:hover {
    border-color: #7186DF;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/*------------------ End of Interest Test CSS ------------------*/




    
    
    
    
    /*------------------------------------------------ Skill Test CSS ------------------------------------------------*/

/* Outer container */
#skill_outer-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center; /* <-- CENTER vertically */
    gap: 1%; /* space between quiz and welcome */
    position: relative;
}

/* Quiz section */
#skill_quiz-section {
    width: 69%;
    padding: 20px;
    background-color: #ffffff;
    flex-shrink: 0;
}

/* Welcome section */
#skill_welcome-section {
    width: 29%;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #ddd; /* Box outline */
    border-radius: 16px; /* Rounded edges */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* vertically center */
    flex-shrink: 0;
}

#skill_welcome-section img {
    width: 50%;
    margin-bottom: 20px;
}

/* Progress bar */
#skill_progress-bar-container {
    width: 100%;
    margin-bottom: 20px;
    position: relative;
}

#skill_progress-bar-bg {
    width: 100%;
    height: 10px;
    flex-shrink: 0;
    background: var(--Primary-100, #D4DCF8);
    border-radius: 4px;
    overflow: hidden;
}

#skill_progress-bar {
    width: 0%; /* Start at 0% progress */
    height: 100%;
    background-color: #7186DF;
    border-radius: 4px;
}

/* Progress indicators */
.skill_progress-indicators {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    color: rgba(97, 97, 97, 0.50);
}

/* Next button container */
.skill_next-question-btn-container {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 2%;
}

#skill_next-question-btn {
    display: flex;
    width: 30%;
    height: 53px;
    padding: 12px 78px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--Primary, #3F4DCB);
    background: #FFF;
    color: rgba(63, 77, 203, 1);
    box-shadow: 14px 22px 7px 0px rgba(0,0,0,0.00),
                9px 14px 7px 0px rgba(0,0,0,0.01),
                5px 8px 6px 0px rgba(0,0,0,0.05),
                2px 4px 4px 0px rgba(0,0,0,0.09),
                1px 1px 2px 0px rgba(0,0,0,0.10);
cursor:pointer;
}

/* Question container spacing */
.skill_question-container {
    margin-bottom: 20px;
}

/*------------------ Options layout ------------------*/

/* Wrapper for side-by-side options */
.skill-options-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* space between options */
    margin-top: 10px;
    flex-wrap: wrap; /* responsive */
}

/* Each option box */
.skill_option-box {
    flex: 1; /* equal width when side by side */
    display: flex;
    flex-direction: column; /* image -> label -> radio */
    align-items: center;
    justify-content: flex-start;
    background-color: #FFFFFF;
    border: 2px solid #ddd; /* default border */
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box; /* prevent shift */
}

/* Hide the radio button */
.skill_option-box input[type="radio"] {
    display: none;
}

/* Option image */
.skill_option-box img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    margin-bottom: 8px;
}

/* Selected state (border + shadow) */
.skill_option-box:has(input[type="radio"]:checked) {
    border-color: #3F4DCB; /* primary color */
    box-shadow: 0 4px 12px rgba(63, 77, 203, 0.3);
}

/* Hover effect */
.skill_option-box:hover {
    border-color: #7186DF;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}



.skill_option-box .option-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* centers the text under the image */
}
/*------------------------------------------------ End of Skill Test CSS ------------------------------------------------*/

    
    
    
    
    
    
    
    /*------------------------------------------------ the below css is used for the value  test----------------------------------------------------------------------------------------------------------------------*/
    /* Outer Box */
    #value_outer-box {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    }
    /* Inner Container (Holds both sections) */
    #values-test-container {
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    }
    /* Sections Inside Outer Box */
    #values-test-form {
    width: 69%;
    padding: 20px;
    background-color: #ffffff;
    margin:1%;
    }
    #value_welcome-section {
    width: 29%;
    height: auto;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #ddd; /* Box outline */
    border-radius: 16px; /* Rounded edges */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow for the square box */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:1%;
    }
    
    /* Drag-and-Drop List */
    #values-list {
    list-style: none;
    padding: 0;
    margin: 0;
    }
    .value_draggable-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    margin:2%;
    background: #FFF;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: grab;
    }
    
    .value_submit-next-question-btn-container{
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 2%;
    }
    
    /* Button */
    #value_submit-values-btn {
    display: flex;
    width: 30%;
    height: 53px;
    padding: 12px 78px;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--Primary, #3F4DCB);
    background: #FFF;
    color:rgba(63, 77, 203, 1);
    box-shadow: 14px 22px 7px 0px rgba(0, 0, 0, 0.00), 9px 14px 7px 0px rgba(0, 0, 0, 0.01), 5px 8px 6px 0px rgba(0, 0, 0, 0.05), 2px 4px 4px 0px rgba(0, 0, 0, 0.09), 1px 1px 2px 0px rgba(0, 0, 0, 0.10);
    cursor:pointer;
    }
    
    /* Welcome Section */
    #value_welcome-section img {
    width: 50%;
    
    margin-bottom: 20px;
    }
    /* Report Section */
    #value_report-container {
    display: none;
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    }
    /*------------------------------------------------ the above css is used for the value  test----------------------------------------------------------------------------------------------------------------------*/
    
    
    
    
    
    
    
    
    /*---------------------------------------------------------------------------------------------Mobile Screen Starts----------------------------------------------------------------------------------------------------------------------*/
    
    @media screen and (min-width: 320px) and (max-width: 480px) {
    
    
    /**---------------------- the below css is used for personality test --------------------------------******/
    
    .per-mobile-outer-container {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 100vh;
    }
    
    .per-mobile-quiz-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 5px;
    background-color: #ffffff;
    }
    
    .per-mobile-welcome-section {
    width: 100%;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #ddd; /* Box outline */
    border-radius: 16px; /* Rounded edges */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow for the square box */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:1%;
    }
    
    .per-mobile-welcome-section img {
    width: 35%;
    margin-bottom: 20px;
    }
    
    .per-mobile-progress-bar-container {
    width: 100%;
    margin-bottom: 20px;
    position: relative;
    }
    
    .per-mobile-progress-bar-bg {
    width: 100%;
    height: 10px;
    flex-shrink: 0;
    background: var(--Primary-100, #D4DCF8);
    border-radius: 4px;
    overflow: hidden;
    }
    
    .per-mobile-progress-bar {
    width: 0%; /* Start at 0% progress */
    height: 100%;
    background-color: #7186DF;
    border-radius: 4px;
    }
    
    .per-mobile-progress-indicators {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    color:rgba(97, 97, 97, 0.50);
    }
    .per-mobile-next-question-btn-container {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 2%;
    }
    
    .restart-test-btn-ai-assessment {
    display: flex;
    width: 49%;
    height: 40px;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--Primary, red);
    background: #FFF;
    color: red;
    box-shadow: 14px 22px 7px 0px rgba(0, 0, 0, 0.00), 9px 14px 7px 0px rgba(0, 0, 0, 0.01), 5px 8px 6px 0px rgba(0, 0, 0, 0.05), 2px 4px 4px 0px rgba(0, 0, 0, 0.09), 1px 1px 2px 0px rgba(0, 0, 0, 0.10);
cursor:pointer;    
}
    
    
    .per-mobile-next-question-btn {
    display: flex;
    width: 49%;
    height: 40px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--Primary, #3f4dcb);
    background: #FFF;
    color:#3f4dcb;
    box-shadow: 14px 22px 7px 0px rgba(0, 0, 0, 0.00), 9px 14px 7px 0px rgba(0, 0, 0, 0.01), 5px 8px 6px 0px rgba(0, 0, 0, 0.05), 2px 4px 4px 0px rgba(0, 0, 0, 0.09), 1px 1px 2px 0px rgba(0, 0, 0, 0.10);
   cursor:pointer;
 }
    
    
.per_mobile_question-container {
    display: flex;
    flex-direction: column;
    align-items: center;    /* center the whole group */
    gap: 12px;              /* spacing between options */
    margin-bottom: 20px;
}
    
    
    
.per_mobile_option-box {
    width: 100%;
   
    display: flex;
    flex-direction: row;          /* image left, text right */
    align-items: center;          /* vertically center image + text */
    justify-content: flex-start;  /* align content to the left */
    gap: 12px;                    /* space between image and text */
    background-color: #FFFFFF;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    text-align: left;             /* text aligned left of its block */
    position: relative;           /* keeps radio button safe */
}
    
 .per_mobile_option-box input[type="radio"] {
    position: absolute;   /* remove it from layout */
    opacity: 0;           /* invisible */
    width: 0;
    height: 0;
    margin: 0;
}
    
.per_mobile_option-box input[type="radio"]:checked  {
  border-color: #3F4DCB; /* primary color */
  box-shadow: 0 4px 12px rgba(63, 77, 203, 0.3);
}





.per_mobile_option-box img.per_mobile_option-image {
           /* adjust as needed */
    height: 70px;
    object-fit: contain;
    margin-bottom: 0;     /* no bottom margin since text is beside image */
}


/* highlight selected option */
.per_mobile_option-box.selected {
  border-color: #3F4DCB;              /* Primary color border */
  background-color: #E8ECFF;          /* Light highlight background */
  box-shadow: 0 4px 12px rgba(63,77,203,0.3);
  transition: all 0.25s ease;         /* smooth highlight transition */
}




    /**---------------------- the above css is used for personality test --------------------------------******/
    
    
    
    
    
    
    /*------------------ the below css is used for the subject test *-----------------------------------------*/
    
    .subject_test_mobile_outer-containerr {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 100vh;
    }
    
    .subject_test_mobile_quiz-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 5px;
    background-color: #ffffff;
    }
    
    .subject_test_mobile_welcome-section {
    width: 100%;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #ddd; /* Box outline */
    border-radius: 16px; /* Rounded edges */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow for the square box */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:1%;
    }
    
    .subject_test_mobile_welcome-section img {
    width: 35%;
    margin-bottom: 20px;
    }
    
    .subject_test_mobile_progress-bar-container {
    width: 100%;
    margin-bottom: 20px;
    position: relative;
    }
    
    .subject_test_mobile_progress-bar-bg {
    width: 100%;
    height: 10px;
    flex-shrink: 0;
    background: var(--Primary-100, #D4DCF8);
    border-radius: 4px;
    overflow: hidden;
    }
    
    .subject_test_mobile_progress-bar {
    width: 0%; /* Start at 0% progress */
    height: 100%;
    background-color: #7186DF;
    border-radius: 4px;
    }
    
    .subject_test_mobile_progress-indicators {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    color:rgba(97, 97, 97, 0.50);
    }
    
    .subject_test_mobile_next-question-btn-container {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 2%;

    }
    
    
    .subject_test_mobile_next-question-btn {
    display: flex;
    width: 49%;
    height: 40px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--Primary, #3F4DCB);
    background: #FFF;
    color:rgba(63, 77, 203, 1);
    box-shadow: 14px 22px 7px 0px rgba(0, 0, 0, 0.00), 9px 14px 7px 0px rgba(0, 0, 0, 0.01), 5px 8px 6px 0px rgba(0, 0, 0, 0.05), 2px 4px 4px 0px rgba(0, 0, 0, 0.09), 1px 1px 2px 0px rgba(0, 0, 0, 0.10);
    cursor:pointer;
    }
    
    .subject_test_mobile_question-group{
    width: 100%;
    }
    
    .subject_test_mobile_question-container {
    margin-bottom: 10px;
    }
    
    
    
    .subject_test_mobile_option-box {
    display: flex;
    align-items: center;
    background-color: #FFFFFF;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    }
    
    
    .subject_test_mobile_option-box input[type="radio"] {
    margin-right: 10px;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    stroke-width: 1px;
    stroke: #242424;
    }
    
    .subject_test_mobile_option-box input[type="radio"]:checked{
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    fill: var(--Blue-900, #003F6B);
    stroke-width: 1px;
    stroke: var(--Blue-900, #003F6B);
    border-color: var(--Blue-900, #003F6B);
    background-color: var(--Blue-900, #003F6B);
    }
    

/* Highlight selected subject option */
.subject_test_mobile_option-box.selected {
  border-color: #3F4DCB;
  background-color: #F0F3FF;
  box-shadow: 0 0 10px rgba(63, 77, 203, 0.3);
}

    /*------------------ the above css is used for the subject test *-----------------------------------------*/
    
    
    
    
    
    
    
    
    
    
    
    
    
    /*------------------ the below css is used for the interest test *-----------------------------------------*/
    
    #interest_mobile_outer-container {
  overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 100vh;
    }
    
    #interest_mobile_quiz-section {
   display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 5px;
    background-color: #ffffff;
    }
    
    #interest_mobile_welcome-section {
      width: 100%;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #ddd; /* Box outline */
    border-radius: 16px; /* Rounded edges */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow for the square box */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:1%;
    }
    
    #interest_mobile_welcome-section img {
     width: 35%;
    margin-bottom: 20px;
    }
    
    #interest_mobile_progress-bar-container {
    width: 100%;
    margin-bottom: 20px;
    position: relative;
    }
    
    #interest_mobile_progress-bar-bg {
    width: 100%;
    height: 10px;
    flex-shrink: 0;
    background: var(--Primary-100, #D4DCF8);
    border-radius: 4px;
    overflow: hidden;
    }
    
    #interest_mobile_progress-bar {
     width: 0%; /* Start at 0% progress */
    height: 100%;
    background-color: #7186DF;
    border-radius: 4px;
    }
    
    .interest_mobile_progress-indicators {
   display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    color:rgba(97, 97, 97, 0.50);
    }
    .interest_mobile_next-question-btn-container {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 2%;
    }
    
    #interest_mobile_next-question-btn {
     display: flex;
    width: 49%;
    height: 40px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--Primary, #3f4dcb);
    background: #FFF;
    color:#3f4dcb;
    box-shadow: 14px 22px 7px 0px rgba(0, 0, 0, 0.00), 9px 14px 7px 0px rgba(0, 0, 0, 0.01), 5px 8px 6px 0px rgba(0, 0, 0, 0.05), 2px 4px 4px 0px rgba(0, 0, 0, 0.09), 1px 1px 2px 0px rgba(0, 0, 0, 0.10);
cursor:pointer;    
}
    
    
    
    .mobile_interest-question {
     display: flex;
    flex-direction: column;
    align-items: center;    /* center the whole group */
    gap: 0px;              /* spacing between options */
    margin-bottom: 5px;
    }
    
    
    
    .mobile_interest-option-box {
 width: 100%;
   
    display: flex;
    flex-direction: row;          /* image left, text right */
    align-items: center;          /* vertically center image + text */
    justify-content: flex-start;  /* align content to the left */
    gap: 12px;                    /* space between image and text */
    background-color: #FFFFFF;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    text-align: left;             /* text aligned left of its block */
    position: relative; 
    }
    
    
    
    .mobile_interest-option-box input[type="radio"] {
    display: none;
    }
    
    .mobile_interest-option-box input[type="radio"]:checked{
     border-color: #3F4DCB; /* primary color */
    box-shadow: 0 4px 12px rgba(63, 77, 203, 0.3);
    }
    
#interest_mobile_question-group .mobile_interest-option-box .interest-mobile-option-image {
    height: 70px !important;
    object-fit: contain !important;
    margin-bottom: 0 !important;
   
}
    

/* Highlight selected option */
.mobile_interest-option-box.selected {
  border-color: #3F4DCB;
  background-color: #F0F3FF;
  box-shadow: 0 0 10px rgba(63, 77, 203, 0.3);
}

    /*------------------ the above css is used for the interest test *-----------------------------------------*/
    
    
    
    
    
    
    /*------------------------------------------------ the below css is used for the Skill test----------------------------------------------------------------------------------------------------------------------*/
    
    
    
    #skill_mobile_outer-container {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 100vh;
    }
    
    #skill_mobile_quiz-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 5px;
    background-color: #ffffff;
    }
    
    #skill_mobile_welcome-section {
    width: 100%;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #ddd; /* Box outline */
    border-radius: 16px; /* Rounded edges */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow for the square box */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:1%;
    }
    
    #skill_mobile_welcome-section img {
    width: 35%;
    margin-bottom: 20px;
    }
    
    #skill_mobile_progress-bar-container {
    width: 100%;
    margin-bottom: 20px;
    position: relative;
    }
    
    #skill_mobile_progress-bar-bg {
    width: 100%;
    height: 10px;
    flex-shrink: 0;
    background: var(--Primary-100, #D4DCF8);
    border-radius: 4px;
    overflow: hidden;
    }
    
    #skill_mobile_progress-bar {
    width: 0%; /* Start at 0% progress */
    height: 100%;
    background-color: #7186DF;
    border-radius: 4px;
    }
    
    .skill_mobile_progress-indicators {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    color:rgba(97, 97, 97, 0.50);
    }
    
    .skill_mobile_next-question-btn-container {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 2%;
    }
    
    #skill_mobile_next-question-btn {
    display: flex;
    width: 49%;
    height: 40px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--Primary, #3F4DCB);
    background: #FFF;
    color:rgba(63, 77, 203, 1);
    box-shadow: 14px 22px 7px 0px rgba(0, 0, 0, 0.00), 9px 14px 7px 0px rgba(0, 0, 0, 0.01), 5px 8px 6px 0px rgba(0, 0, 0, 0.05), 2px 4px 4px 0px rgba(0, 0, 0, 0.09), 1px 1px 2px 0px rgba(0, 0, 0, 0.10);
    cursor:pointer;
}
    
    
    
    .skill_mobile_question-container {
    margin-bottom: 10px;
    }
    
    
    .skill_mobile_option-box {
    width: 100%;
   
    display: flex;
    flex-direction: row;          /* image left, text right */
    align-items: center;          /* vertically center image + text */
    justify-content: flex-start;  /* align content to the left */
    gap: 12px;                    /* space between image and text */
    background-color: #FFFFFF;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    text-align: left;             /* text aligned left of its block */
    position: relative; 
    }
    
    
    .skill_mobile_option-box input[type="radio"] {
   display: none;
    }
    
    .skill_mobile_option-box input[type="radio"]:checked{
    border-color: #3F4DCB; /* primary color */
    box-shadow: 0 4px 12px rgba(63, 77, 203, 0.3);
    }


 .skill_mobile_option-box img {
               height: 70px !important;
    object-fit: contain !important;
    margin-bottom: 0 !important;
        }
    
/* Highlight selected option */
.skill_mobile_option-box.selected {
  border-color: #3F4DCB;
  background-color: #F0F3FF;
  box-shadow: 0 0 10px rgba(63, 77, 203, 0.3);
}



    /*------------------------------------------------ the above css is used for the Skill test----------------------------------------------------------------------------------------------------------------------*/
    
    
    
    
    
    
    
    
    /*------------------------------------------------ the below css is used for the value  test----------------------------------------------------------------------------------------------------------------------*/
    /* Outer Box */
    #mobile_value_outer-box {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    }
    /* Inner Container (Holds both sections) */
    #mobile_values-test-container {
    margin:1%;
    display: flex;
    flex-direction:column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    }
    /* Sections Inside Outer Box */
    #mobile_values-test-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px;
    background-color: #ffffff;
    }
    #mobile_value_welcome-section {
    width: 100%;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #ddd; /* Box outline */
    border-radius: 16px; /* Rounded edges */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow for the square box */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:1%;
    }
    
    /* Drag-and-Drop List */
    #mobile_values-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    }
    .mobile_value_draggable-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 6px;
    margin:6px 2px;
    background: #FFF;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: grab;
    }
    
    .mobile_value_submit-next-question-btn-container{
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 2%;
    }
    
    /* Button */
    #mobile_value_submit-values-btn {
    display: flex;
    width: 49%;
    height: 40px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--Primary, #3F4DCB);
    background: #FFF;
    color:rgba(63, 77, 203, 1);
    box-shadow: 14px 22px 7px 0px rgba(0, 0, 0, 0.00), 9px 14px 7px 0px rgba(0, 0, 0, 0.01), 5px 8px 6px 0px rgba(0, 0, 0, 0.05), 2px 4px 4px 0px rgba(0, 0, 0, 0.09), 1px 1px 2px 0px rgba(0, 0, 0, 0.10);
   cursor:pointer;
 }
    
    /* Welcome Section */
    #mobile_value_welcome-section img {
    width: 35%;
    margin-bottom: 20px;
    }
    /* Report Section */
    #mobile_value_report-container {
    display: none;
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    }
    /*------------------------------------------------ the above css is used for the value  test----------------------------------------------------------------------------------------------------------------------*/
    
    
    
    
    
    
    }
    
    /*---------------------------------------------------------------------------------------------Mobile Screen Ends----------------------------------------------------------------------------------------------------------------------*/
    
    
    /*---------------------------------------------------------------------------------------------Tablet Screen Start----------------------------------------------------------------------------------------------------------------------*/
    
    @media screen and (min-width: 481px) and (max-width: 1024px) {
    
    /**---------------------- the below css is used for personality test --------------------------------******/
    
    .per-mobile-outer-container {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    
    }
    
    .per-mobile-quiz-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px;
    background-color: #ffffff;
    margin:1%;
    }
    
    .per-mobile-welcome-section {
    width: 100%;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #ddd; /* Box outline */
    border-radius: 16px; /* Rounded edges */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow for the square box */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:1%;
    }
    
    .per-mobile-welcome-section img {
    width: 35%;
    margin-bottom: 20px;
    }
    
    .per-mobile-progress-bar-container {
    width: 100%;
    margin-bottom: 20px;
    position: relative;
    }
    
    .per-mobile-progress-bar-bg {
    width: 100%;
    height: 10px;
    flex-shrink: 0;
    background: var(--Primary-100, #D4DCF8);
    border-radius: 4px;
    overflow: hidden;
    }
    
    .per-mobile-progress-bar {
    width: 0%; /* Start at 0% progress */
    height: 100%;
    background-color: #7186DF;
    border-radius: 4px;
    }
    
    .per-mobile-progress-indicators {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 5px;
    color:rgba(97, 97, 97, 0.50);
    }
    .per-mobile-next-question-btn-container {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 2%;
    }
    
    
    .restart-test-btn-ai-assessment {
    display: flex;
    width: 49%;
    height: 40px;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--Primary, red);
    background: #FFF;
    color: red;
    box-shadow: 14px 22px 7px 0px rgba(0, 0, 0, 0.00), 9px 14px 7px 0px rgba(0, 0, 0, 0.01), 5px 8px 6px 0px rgba(0, 0, 0, 0.05), 2px 4px 4px 0px rgba(0, 0, 0, 0.09), 1px 1px 2px 0px rgba(0, 0, 0, 0.10);
  cursor:pointer;
  }
    
    
    
    .per-mobile-next-question-btn {
    display: flex;
    width: 49%;
    height: 40px;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--Primary, #3F4DCB);
    background: #FFF;
    color:rgba(63, 77, 203, 1);
    box-shadow: 14px 22px 7px 0px rgba(0, 0, 0, 0.00), 9px 14px 7px 0px rgba(0, 0, 0, 0.01), 5px 8px 6px 0px rgba(0, 0, 0, 0.05), 2px 4px 4px 0px rgba(0, 0, 0, 0.09), 1px 1px 2px 0px rgba(0, 0, 0, 0.10);
    cursor:pointer;
    }
    
    
.per_mobile_question-container {
    display: flex;
    flex-direction: column;
    align-items: center;    /* center the whole group */
    gap: 12px;              /* spacing between options */
    margin-bottom: 20px;
}
    
    
    
.per_mobile_option-box {
    width: 100%;
              
    display: flex;
    flex-direction: row;          /* image left, text right */
    align-items: center;          /* vertically center image + text */
    justify-content: flex-start;  /* align content to the left */
    gap: 12px;                    /* space between image and text */
    background-color: #FFFFFF;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    text-align: left;             /* text aligned left of its block */
    position: relative;           /* keeps radio button safe */
}
    
    
 .per_mobile_option-box input[type="radio"] {
    position: absolute;   /* remove it from layout */
    opacity: 0;           /* invisible */
    width: 0;
    height: 0;
    margin: 0;
}
    
  .per_mobile_option-box input[type="radio"]:checked {
    border-color: var(--Blue-900, #003F6B);
    background-color: #E5EBFF; /* light blue background for selected option */
}

.per_mobile_option-box img.per_mobile_option-image {
           /* adjust as needed */
    height: 100px;
    object-fit: contain;
    margin-bottom: 0;     /* no bottom margin since text is beside image */
}



/* highlight selected option */
.per_mobile_option-box.selected {
  border-color: #3F4DCB;              /* Primary color border */
  background-color: #E8ECFF;          /* Light highlight background */
  box-shadow: 0 4px 12px rgba(63,77,203,0.3);
  transition: all 0.25s ease;         /* smooth highlight transition */
}

    /**---------------------- the above css is used for personality test --------------------------------******/
    
    
    
    
    
    
    /*------------------ the below css is used for the subject test *-----------------------------------------*/
    
    .subject_test_mobile_outer-containerr {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    }
    
    .subject_test_mobile_quiz-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px;
    background-color: #ffffff;
    margin:1%;
    }
    
    .subject_test_mobile_welcome-section {
    width: 100%;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #ddd; /* Box outline */
    border-radius: 16px; /* Rounded edges */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow for the square box */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:1%;
    }
    
    .subject_test_mobile_welcome-section img {
    width: 35%;
    margin-bottom: 20px;
    }
    
    .subject_test_mobile_progress-bar-container {
    width: 100%;
    margin-bottom: 20px;
    position: relative;
    }
    
    .subject_test_mobile_progress-bar-bg {
    width: 100%;
    height: 10px;
    flex-shrink: 0;
    background: var(--Primary-100, #D4DCF8);
    border-radius: 4px;
    overflow: hidden;
    }
    
    .subject_test_mobile_progress-bar {
    width: 0%; /* Start at 0% progress */
    height: 100%;
    background-color: #7186DF;
    border-radius: 4px;
    }
    
    .subject_test_mobile_progress-indicators {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    color:rgba(97, 97, 97, 0.50);
    }
    .subject_test_mobile_next-question-btn-container {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 2%;
    }
    .subject_test_mobile_next-question-btn {
    display: flex;
    width: 49%;
    height: 40px;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--Primary, #3F4DCB);
    background: #FFF;
    color:rgba(63, 77, 203, 1);
    box-shadow: 14px 22px 7px 0px rgba(0, 0, 0, 0.00), 9px 14px 7px 0px rgba(0, 0, 0, 0.01), 5px 8px 6px 0px rgba(0, 0, 0, 0.05), 2px 4px 4px 0px rgba(0, 0, 0, 0.09), 1px 1px 2px 0px rgba(0, 0, 0, 0.10);
    cursor:pointer;
}
    
    .subject_test_mobile_question-group{
    width: 100%;
    }
    
    .subject_test_mobile_question-container {
    margin-bottom: 20px;
    }
    
    
    
    .subject_test_mobile_option-box {
    display: flex;
    align-items: center;
    background-color: #FFFFFF;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    }
    
    
    .subject_test_mobile_option-box input[type="radio"] {
    margin-right: 10px;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    stroke-width: 1px;
    stroke: #242424;
    }
    
    .subject_test_mobile_option-box input[type="radio"]:checked{
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    fill: var(--Blue-900, #003F6B);
    stroke-width: 1px;
    stroke: var(--Blue-900, #003F6B);
    border-color: var(--Blue-900, #003F6B);
    background-color: var(--Blue-900, #003F6B);
    }
    

/* Highlight selected subject option */
.subject_test_mobile_option-box.selected {
  border-color: #3F4DCB;
  background-color: #F0F3FF;
  box-shadow: 0 0 10px rgba(63, 77, 203, 0.3);
}

    /*------------------ the above css is used for the subject test *-----------------------------------------*/
    
    
    
    
    
    
     /*------------------ the below css is used for the interest test *-----------------------------------------*/
    
    #interest_mobile_outer-container {
  overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 100vh;
    }
    
    #interest_mobile_quiz-section {
   display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 5px;
    background-color: #ffffff;
    }
    
    #interest_mobile_welcome-section {
      width: 100%;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #ddd; /* Box outline */
    border-radius: 16px; /* Rounded edges */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow for the square box */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:1%;
    }
    
    #interest_mobile_welcome-section img {
     width: 35%;
    margin-bottom: 20px;
    }
    
    #interest_mobile_progress-bar-container {
    width: 100%;
    margin-bottom: 20px;
    position: relative;
    }
    
    #interest_mobile_progress-bar-bg {
    width: 100%;
    height: 10px;
    flex-shrink: 0;
    background: var(--Primary-100, #D4DCF8);
    border-radius: 4px;
    overflow: hidden;
    }
    
    #interest_mobile_progress-bar {
     width: 0%; /* Start at 0% progress */
    height: 100%;
    background-color: #7186DF;
    border-radius: 4px;
    }
    
    .interest_mobile_progress-indicators {
   display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    color:rgba(97, 97, 97, 0.50);
    }
    .interest_mobile_next-question-btn-container {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 2%;
    }
    
    #interest_mobile_next-question-btn {
     display: flex;
    width: 49%;
    height: 40px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--Primary, #3f4dcb);
    background: #FFF;
    color:#3f4dcb;
    box-shadow: 14px 22px 7px 0px rgba(0, 0, 0, 0.00), 9px 14px 7px 0px rgba(0, 0, 0, 0.01), 5px 8px 6px 0px rgba(0, 0, 0, 0.05), 2px 4px 4px 0px rgba(0, 0, 0, 0.09), 1px 1px 2px 0px rgba(0, 0, 0, 0.10);
   cursor:pointer;
 }
    
    
    
    .mobile_interest-question {
     display: flex;
    flex-direction: column;
    align-items: center;    /* center the whole group */
    gap: 0px;              /* spacing between options */
    margin-bottom: 5px;
    }
    
    
    
    .mobile_interest-option-box {
 width: 100%;
   
    display: flex;
    flex-direction: row;          /* image left, text right */
    align-items: center;          /* vertically center image + text */
    justify-content: flex-start;  /* align content to the left */
    gap: 12px;                    /* space between image and text */
    background-color: #FFFFFF;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    text-align: left;             /* text aligned left of its block */
    position: relative; 
    }
    
    
    
    .mobile_interest-option-box input[type="radio"] {
    display: none;
    }
    
    .mobile_interest-option-box input[type="radio"]:checked{
     border-color: #3F4DCB; /* primary color */
    box-shadow: 0 4px 12px rgba(63, 77, 203, 0.3);
    }
    
#interest_mobile_question-group .mobile_interest-option-box .interest-mobile-option-image {
    height: 100px !important;
    object-fit: contain !important;
    margin-bottom: 0 !important;
   
}



/* Highlight selected option */
.mobile_interest-option-box.selected {
  border-color: #3F4DCB;
  background-color: #F0F3FF;
  box-shadow: 0 0 10px rgba(63, 77, 203, 0.3);
}
    
    /*------------------ the above css is used for the interest test *-----------------------------------------*/
    
    
    
    /*------------------------------------------------ the below css is used for the Skill test----------------------------------------------------------------------------------------------------------------------*/
    
    
    
    #skill_mobile_outer-container {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 100vh;
    }
    
    #skill_mobile_quiz-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 5px;
    background-color: #ffffff;
    }
    
    #skill_mobile_welcome-section {
    width: 100%;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #ddd; /* Box outline */
    border-radius: 16px; /* Rounded edges */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow for the square box */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:1%;
    }
    
    #skill_mobile_welcome-section img {
    width: 35%;
    margin-bottom: 20px;
    }
    
    #skill_mobile_progress-bar-container {
    width: 100%;
    margin-bottom: 20px;
    position: relative;
    }
    
    #skill_mobile_progress-bar-bg {
    width: 100%;
    height: 10px;
    flex-shrink: 0;
    background: var(--Primary-100, #D4DCF8);
    border-radius: 4px;
    overflow: hidden;
    }
    
    #skill_mobile_progress-bar {
    width: 0%; /* Start at 0% progress */
    height: 100%;
    background-color: #7186DF;
    border-radius: 4px;
    }
    
    .skill_mobile_progress-indicators {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    color:rgba(97, 97, 97, 0.50);
    }
    
    .skill_mobile_next-question-btn-container {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 2%;
    }
    
    #skill_mobile_next-question-btn {
    display: flex;
    width: 49%;
    height: 40px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--Primary, #3F4DCB);
    background: #FFF;
    color:rgba(63, 77, 203, 1);
    box-shadow: 14px 22px 7px 0px rgba(0, 0, 0, 0.00), 9px 14px 7px 0px rgba(0, 0, 0, 0.01), 5px 8px 6px 0px rgba(0, 0, 0, 0.05), 2px 4px 4px 0px rgba(0, 0, 0, 0.09), 1px 1px 2px 0px rgba(0, 0, 0, 0.10);
   cursor:pointer;
 }
    
    
    
    .skill_mobile_question-container {
    margin-bottom: 10px;
    }
    
    
    .skill_mobile_option-box {
    width: 100%;
   
    display: flex;
    flex-direction: row;          /* image left, text right */
    align-items: center;          /* vertically center image + text */
    justify-content: flex-start;  /* align content to the left */
    gap: 12px;                    /* space between image and text */
    background-color: #FFFFFF;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    text-align: left;             /* text aligned left of its block */
    position: relative; 
    }
    
    
    .skill_mobile_option-box input[type="radio"] {
   display: none;
    }
    
    .skill_mobile_option-box input[type="radio"]:checked{
    border-color: #3F4DCB; /* primary color */
    box-shadow: 0 4px 12px rgba(63, 77, 203, 0.3);
    }


 .skill_mobile_option-box img {
               height: 100px !important;
    object-fit: contain !important;
    margin-bottom: 0 !important;
        }



/* Highlight selected option */
.skill_mobile_option-box.selected {
  border-color: #3F4DCB;
  background-color: #F0F3FF;
  box-shadow: 0 0 10px rgba(63, 77, 203, 0.3);
}

    
    /*------------------------------------------------ the above css is used for the Skill test----------------------------------------------------------------------------------------------------------------------*/
    
    
    
    
    
    
    
    
    
    /*------------------------------------------------ the below css is used for the value  test----------------------------------------------------------------------------------------------------------------------*/
    /* Outer Box */
    #mobile_value_outer-box {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    }
    /* Inner Container (Holds both sections) */
    #mobile_values-test-container {
    margin:1%;
    display: flex;
    flex-direction:column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    }
    /* Sections Inside Outer Box */
    #mobile_values-test-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px;
    background-color: #ffffff;
    margin:1%;
    }
    #mobile_value_welcome-section {
    width: 100%;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #ddd; /* Box outline */
    border-radius: 16px; /* Rounded edges */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow for the square box */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:1%;
    }
    
    /* Drag-and-Drop List */
    #mobile_values-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    }
    .mobile_value_draggable-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    margin:2%;
    background: #FFF;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: grab;
    }
    
    .mobile_value_submit-next-question-btn-container{
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 2%;
    }
    
    
    /* Button */
    #mobile_value_submit-values-btn {
    display: flex;
    width: 49%;
    height: 40px;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--Primary, #3F4DCB);
    background: #FFF;
    color:rgba(63, 77, 203, 1);
    box-shadow: 14px 22px 7px 0px rgba(0, 0, 0, 0.00), 9px 14px 7px 0px rgba(0, 0, 0, 0.01), 5px 8px 6px 0px rgba(0, 0, 0, 0.05), 2px 4px 4px 0px rgba(0, 0, 0, 0.09), 1px 1px 2px 0px rgba(0, 0, 0, 0.10);
    cursor:pointer;
}
    
    /* Welcome Section */
    #mobile_value_welcome-section img {
    width: 35%;
    margin-bottom: 20px;
    }
    /* Report Section */
    #mobile_value_report-container {
    display: none;
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    }
    /*------------------------------------------------ the above css is used for the value  test----------------------------------------------------------------------------------------------------------------------*/
    
    
    
    
    }
    
    /*---------------------------------------------------------------------------------------------Tablet Screen Ends----------------------------------------------------------------------------------------------------------------------*/