#box_mountain_modal_root_div {      
    display: none;
    position: fixed;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #0000001c;
    font-size: clamp(11px, 0.95vw, 14px);
    overflow-y: scroll;
}

.box_mountain_modal_content_container_white_box {
    position: relative;
    margin-top: clamp(30px, 5vw, 50px);
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 160px;
    padding: clamp(40px,8vw,80px) clamp(10px,7vw,80px);
    width: clamp(310px,70vw,950px);
    background-color: #fff;        
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: clamp(10px,2vw,30px);        
}

.modal_box_mountain_close_button {        
    color: rgb(33, 33, 33);
    font-family: 'Times New Roman', Times, serif;
    font-size: clamp(30px, 4vw,40px);
    font-weight: 400;
    line-height: 0;
    position: absolute;
    top: clamp(21px, 4vw, 40px);
    right: clamp(13px, 3vw, 32px);
}

.modal_box_mountain_close_button:hover, .modal_box_mountain_close_button:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

#container_active_video_box_mountain_modal {
    width: 100%;
    aspect-ratio: 16/9; 
    box-shadow: 0 1px 7px 1px rgb(0 0 0 / 37%);
}

#container_active_image_and_text_of_benefit_box_mountain_modal {
    width: 100%;
    aspect-ratio: 30/9;
    box-shadow: 0 1px 7px 1px rgb(0 0 0 / 37%);
    display: flex;
    align-items: center;
    gap: 10px;
}

#container_active_image_of_benefit_box_mountain_modal, #container_active_text_of_benefit_box_mountain_modal {
    width: 50%;
    padding: 10px;
}

#container_active_image_of_benefit_box_mountain_modal {
    min-height: 200px;
}

#container_active_text_of_benefit_box_mountain_modal {
    padding: 30px 40px 30px 10px;
}


#nav_menu_top_box_mountain_modal {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0px, 0.2vw, 5px) clamp(10px, 2vw, 25px) ;
    padding: 15px 5px 30px 5px;
    color: #afafaf;
    visibility: hidden;
}

#see_demo_intro:hover, #see_demo_video_learning:hover, #see_demo_self_tests:hover, #see_demo_super_tips:hover {
    color: #212121;
    font-weight: 600;        
    cursor: pointer;
}

#see_demo_intro.active, #see_demo_video_learning.active, #see_demo_self_tests.active, #see_demo_super_tips.active {
    color: #727272;
    font-weight: 600;        
}

#article_benefit_overview_bm_modal:hover, #article_benefit_focus_bm_modal:hover, #article_benefit_understanding_bm_modal:hover, #article_benefit_correct_stuff_bm_modal:hover, #article_benefit_support_agent_bm_modal:hover {
    color: #212121;
    font-weight: 600;        
    cursor: pointer;
}

#article_benefit_overview_bm_modal.active, #article_benefit_focus_bm_modal.active, #article_benefit_understanding_bm_modal.active, #article_benefit_correct_stuff_bm_modal.active, #article_benefit_support_agent_bm_modal.active {
    color: #727272;;
    font-weight: 600;        
}

#nav_menu_bottom_box_mountain_modal {
    display: flex;
    flex-wrap: wrap;    
    gap: clamp(0px, 0.2vw, 5px) clamp(10px, 2vw, 25px);
    padding: 15px 5px;
    color: #afafaf;
}

/* Override styles for screen widths below 480px */
@media screen and (max-width: 480px) {
    #container_active_image_and_text_of_benefit_box_mountain_modal {
        flex-direction: column;
    }

    #container_active_image_of_benefit_box_mountain_modal, #container_active_text_of_benefit_box_mountain_modal {
        width: 100%;    
    }

    #container_active_text_of_benefit_box_mountain_modal {
        padding: 0px 25px 20px 25px;    
    }

    .box_mountain_modal_content_container_white_box {
        width: 100vw;
        margin-top: 0px;
        margin-bottom: 0px;
    }
}