#box-mountain-container {
    width: clamp(300px,77vw, 1200px); /*1200px max width is for viewport of 1558px*/
    position: relative;
    margin-top: min(2vw,20px);
}

#fig-mountain {
    width: 100%;    
    position: relative;
    top: 0px;          
    z-index:1;
    height: clamp(210px,55vw,600px); 
}

#fig-mountain *{
    line-height: normal !important;
    /*outline: solid #a4d7ff;*/
}

.left-box, .middle-box, .right-box {
    outline: solid white; /*this property is set to prevent pixel bleeding between div gaps*/
}

.no-outline-laptop {
    outline: none; /*this property ensures aligned vertical edges of mountain*/
}

.left-mt-block {
    width: 20%;
    height: 44%;  
    position: absolute;
    bottom: 5%;
    left: 0;
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;  
    width: 23%;
}

.edge-box {
    width: 100%;
    height: 100%;
    background-color: white;
}

.left-box {
    transform-origin: top right; 
    transform: skew(0deg, -12deg);   
    border-top-left-radius: min(0.75vw, 20px);
    overflow: visible;  
}

.left-box .ledge-shadow {
    position: absolute;
    top: 1.5%;
    left: 1%;
    width: 200%;
    height: 5vw;
    transform-origin: top left; 
    transform: skew(0deg, 30deg);   
    background: linear-gradient(
        165deg, 
        #efefefef 10%, 
        transparent 40%,
        transparent 100%    
    );  
    border-radius: 0.2vw 0 0 0;
    opacity: 0;
    border: none;  
}

.left-box.row1-box {
    grid-row: 1 /5;
    grid-column: 4 /5;
}

.left-box.row2-box {
    grid-row: 2/5;
    grid-column: 3/4;    
}

.left-box.row3-box {
    grid-row: 3/5;
    grid-column: 2/3;    
}

.left-box.row4-box {
    grid-row: 4/5;
    grid-column: 1/2;
}

.middle-mt-block {
    width: 29%;
    height: 42%;
    position: absolute;
    bottom: 7%;
    left: 20%;
    display: grid; 
    grid-template-columns: 5fr 5fr;
    left: 23%;
}

.middle-box:nth-of-type(1) {
    background-color: white;
    transform-origin: top left; 
    transform: skew(0deg, -12deg);
    height: 110%;
    border-top-right-radius: 2px;
}

.middle-box:nth-of-type(2) {
    background-color: white;
    transform-origin: top right; 
    transform: skew(0deg, 12deg);
    height: 110%;
    border-top-left-radius: 2px;
}

.right-mt-block {
    width: 47%;
    height: 48%;
    position: absolute;
    bottom: 1%;
    right: 0;
    display: grid;
    grid-template-columns: 1.2fr 2.5fr 2.5fr 2fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    width: 48%;
}

.right-box {
    transform-origin: top left; 
    transform: skew(0deg, 12deg);
    border-top-right-radius: min(0.75vw,20px);
}

.right-box.row1-box {
    grid-row: 1 /5;
    grid-column: 1 /2;    
}

.right-box.row2-box {
    grid-row: 2/5;
    grid-column: 2/3;
    position: absolute;
    top: 3%;
}

.right-box.row3-box {
    grid-row: 3/5;
    grid-column: 3/4;
    position: absolute;
    top: 12%;
}

.right-box.row4-box {
    grid-row: 4/5;
    grid-column: 4/5;
    position: absolute;
    top: 30%;
}

#mt-base {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: min(6vw, 90px);  
    background-color: white;
    border-radius: min(2vw, 10px) min(2vw, 20px) 0 0;    
    height: 60px;
    width: 80%;
    border-radius: 0px;
}

#mt-base-2 {
    position: absolute;
    top: calc(100% - 10px);
    width: 100%;
    background-color: white;    
    height: 250px;
}

.background_banner_design_for_curriculum_menu {
    background-color: transparent !important;
}

.mountain-people {
    position: relative;
    width: 100%;
    height: 500px;
    border: none;
}

.mountain-person.person1 {
    position: absolute;
    top: min(65%, 20.9vw);
    left: 29.9%;
    width: clamp(75px, 9.4vw, 136px);         
    top: clamp(160px, 21vw, 210px);
    left: clamp(178px, 23vw, 340px);
}

@media screen and (max-width: 1400px) and (min-width: 982px) {    
    .mountain-person.person1 {        
        top: 230px;
    }
}

.mountain-person.person2 {
    position: absolute;
    top: min(97%, 31vw);
    left: 21.3%;
    width: clamp(50px, 6.4vw, 115px);     
    top: clamp(235px, 30vw, 325px);
    left: clamp(110px, 15vw, 210px);
}

.mountain-person.person3 {
    position: absolute;
    top: min(96%, 30.8vw);
    right: 44%;
    width: clamp(40px, 6.0vw, 104px);         
    top: clamp(235px, 30vw, 330px);
    right: clamp(255px, 33vw, 420px);
}

.mountain-person.person4 {
    position: absolute;  
    top: min(129%, 41.4vw);
    left: 10.1%;
    width: clamp(60px, 7.5vw, 125px);         
    left: 40px;    
    top: clamp(320px, 42vw, 445px);
}

.mountain-person.person5 {
    position: absolute;
    top: min(136%, 43.4vw);
    left: 35.4%;
    width: 8vw; 
    width: clamp(65px, 8vw, 134px);         
    top: clamp(330px, 43vw, 455px);
    left: clamp(205px, 29vw, 420px);
}

.mountain-person.person6 {
    position: absolute;
    top: min(103%, 33vw);
    right: 18.5%;
    width: 14.3vw; 
    width: clamp(120px, 14.3vw, 260px);     
    top: clamp(270px, 36vw, 385px);
    right: clamp(110px, 11vw, 120px);
}

.mountain-person-img {
    width: 90%;
}

.mt-text-bubble {
    position: absolute;
    border: solid min(0.25vw, 3px) #c8f4f8;
    box-shadow: max(-0.35vw, -5px) max(-0.18vw, -5px) 0vw #c8f4f8;
    background-color: white;
    border-radius: min(0.95vw, 11px);
    font-size: clamp(7px, 0.9vw, 12px);
    text-align: left;
    padding: auto 0;
    display: flex;
    justify-content: center;
    align-items: center; 
}

.mt-text-bubble:hover{    
    cursor: pointer;    
    /*
    background-color: #a1ff65;
    border: solid min(0.25vw,3px) #ffffff;
    box-shadow: max(-0.35vw,-5px) max(-0.18vw,-5px) 0vw white;
    */
}

.span_text_big_bubble {
    display: flex;
    align-items: center;
    justify-content: center;        
    height: 100%;
    width: 100%;
    border-radius: 10px;    
    letter-spacing: 0.17px;

}

.span_text_big_bubble:hover {      
    /*
    height: 100%;
    width: 100%;
    padding-left: 14px;
    font-weight: 600;
    background-color: #73ff53;
    border: solid white 5px;
    border-radius: 14px;
    color: #0f5700;
    */    
    height: 100%;
    width: 100%;
    padding-left: 13px;
    font-weight: 400;
    background-color: #adff8f;
    border: solid #ffffff 3px;
    border-radius: 14px;
    color: #1b420a;
}

.span_text_big_bubble p {
    margin: unset;
}

.span_text_small_bubbles {    
    padding: clamp(5px, 1vw, 8px) clamp(6px, 1vw, 11px);
    background-color: white;
    border-radius: clamp(5px, 0.7vw, 8px);
    box-sizing: border-box;
    white-space: nowrap;
}

.span_text_small_bubbles:hover {    
    /*
    background-color: #73ff53;
    color: #0f5700;
    font-weight: 600;
    letter-spacing: 0.17px;
    box-sizing: border-box;
    border: solid white 3px;
    padding: 7px 10px;
    */
    background-color: #adff8f;
    color: #1b420a;
    font-weight: 400;
    letter-spacing: 0.17px;
    border: solid #ffffff 3px;
    padding: 7px 10px;    
}

.span_text_small_bubbles p {
    margin: unset;
    white-space: nowrap;
}


.person1 .bubble-right {
    position: absolute;
    top: -120%;
    left: 56%;
    width: clamp(117px, 15vw, 230px);
    height: 80%;
    border-width: min(0.25vw, 3px);
    border-radius: min(1.2vw, 14px);
    font-size: calc(clamp(7px, 0.9vw, 12px)* 1.10);
    box-shadow: min(0.5vw, 5px) max(-0.3vw, -5px) 0vw #c8f4f8;
    box-sizing: content-box !important;
    width: clamp(115px, 15vw, 187px);
}

.person1 .bubble-right:hover .span_text_small_bubbles {
    background-color: #73ff53;
    border-radius: 9px;
    padding: 3px 16px;
    color: #005d15;
}

.person1 .bubble-right .text-bubble-funnel img{  
    position: absolute;
    top: 100%;
    left: 35%;
    width: 20%;      
}

.person1 .bubble-left {
    top: -54%;
    right: 78%;
    width: 72%;
    height: 45%;
    border-width: min(0.23vw, 3px);
    border-color: #fce5cd;
    box-shadow: 0.25vw -0.15vw 0vw #fce5cd;
    border-radius: min(0.8vw, 10px);
    font-size: calc(clamp(7px, 0.9vw, 12px)*0.88);
    background: linear-gradient(to bottom, #ff965c 0%, #ff794f 100%);
    color: white;
    box-sizing: content-box !important;
}

.person1 .bubble-left .text-bubble-funnel img{  
    position: absolute; 
    top: 84%;
    left: 45%;
    width: 40%;   
}

.person2 .mt-text-bubble {        
    top: -72%;
    right: 37%;
}

.person2 .bubble-left .text-bubble-funnel img{  
    position: absolute; 
    transform: scaleX(-1);
    top: 100%;
    left: 35%;
    width: 33%;   
    height: 47%
}

.person3 .mt-text-bubble {
    top: -75%;
    left: 42%;  
}

.person3 .bubble-right .text-bubble-funnel img{  
    position: absolute;   
    top: 100%;
    left: 25%;
    width: 35%;   
    height: 49%;        
}

.person4 .mt-text-bubble {
    top: -57%;
    right: 54%;  
}
.person4 .bubble-left .text-bubble-funnel img{  
    position: absolute;
    transform: scaleX(-1);
    top: 100%;
    left: 45%;
    width: 37%;
    height: 47%;
}

.person5 .mt-text-bubble {
    top: -69%; 
    left: 42%;    
}

.person5 .bubble-right .text-bubble-funnel img{  
    position: absolute;  
    top: 100%;
    left: 35%;
    width: 37%;   
    height: 51%
}

.person6 .mt-text-bubble {
    top: 17%;
    left: 90%;    
}

.person6 .bubble-right .text-bubble-funnel img{  
    position: absolute;  
    top: 100%;
    left: 15%;
    width: 30%;   
    height: 53%
}

.mountain_person_righ_side_mobile_view {
    display: none;
    width: 100%;
}

/* Override styles for screen widths from 768px to 481px */
@media screen and (max-width: 768px) {
    #box-mountain-container {
        height: clamp(450px, 115vw, 790px);    
    }
        
    #mt-base {
    top: max(50vw,180px);
    height: clamp(300px, 62vw, 450px);        
    }

    #mt-base-2 {     
        height: 740px;        
    }
        
    .mountain-person.person4, .mountain-person.person5, .mountain-person.person6  {
        display: none;
    }
    
    .left-box, .middle-box, .right-box {
        outline: solid white; 
    }
    
    .no-outline-tablet {
        outline: none;     
    }
    
    .left-box {
        border-top-left-radius: min(2vw, 15px);    
    }
    
    .right-box {
        border-top-right-radius: min(2vw, 15px);    
    }
    
    .left-box.row1-box {
        grid-row: 1 /5;
        grid-column: 3 /5;
    }
    
    .left-box.row2-box {
        display: none;
    }
    
    .left-box.row3-box {
        grid-row: 3/5;
        grid-column: 1/3;    
    }
    
    .left-box.row4-box {
        display: none;
    }
    
    .right-box.row1-box {
        grid-row: 1 /5;
        grid-column: 1 /3;    
    }
    
    .right-box.row2-box {
        display: none;
    }
    
    .right-box.row3-box {
        grid-row: 3/5;
        grid-column: 3/5;
        position: absolute;
        top: 12%;
    }
    
    .right-box.row4-box {
        display: none;
    }
    
    .mountain-person.person1 {
        position: absolute;
        top: 21vw;
        left: 30%;
        width: max(15.4vw,60px); 
        z-index: 1;
    }
    
    .mountain-person.person2 {
        position: absolute;
        top: 33vw;
        left: 12%;
        width: max(11.5vw,50px); 
    }
    
    .mountain-person.person3 {
        position: absolute;
        top: 31vw;
        right: 26%;
        width: max(20vw,95px); 
    }

    .mountain-person.person3 .mountain-person-img {     
        display: none;
    }

    .mountain_person_righ_side_mobile_view {
        display: block;        
    }
    
    .mt-text-bubble {
        border-width: min(0.45vw,3px);
        box-shadow: max(-0.35vw,-5px) max(-0.18vw,-5px) 0vw #c8f4f8;     
        border-radius: min(1.5vw,18px);        
        font-size: clamp(6.5px, 1.5vw, 11px);
        padding: 0.2vw;
    }
    
    .person1 .bubble-right {
        border-width:  min(0.45vw,3px);
        box-shadow: max(-0.35vw,-5px) max(-0.18vw,-5px) 0vw #c8f4f8;     
        border-radius: min(1.5vw,18px);
        font-size: var(--person1-bubble-right_media);
        font-size: clamp(6px, 1.45vw, 15px);
        padding: 0.2vw;
        top: -140%;
        left: 60%;        
        width: clamp(90px, 21vw, 159px);
        height: 90%;    
    }
    
    .person1 .bubble-left {
        border-width:  min(0.45vw,3px);
        box-shadow: 0.25vw -0.15vw 0vw #fce5cd;
        border-radius: min(1.5vw,18px);
        font-size: var(--person1-bubble-left_media);
        font-size: clamp(6.5px, 1.3vw, 10px);
        padding: 0.2vw;
        top: -80%;
        right: 10vw;
        width: 90%;
        height: 50%; 
    }
    
    .person2 .bubble-left {
        top: -65%; 
        right: 6vw;
        width: 110%;
        height: 55%;
    }
    
    .person3 .bubble-right {
        top: -75%;
        left: 5vw;
        width: 60%;
        height: 55%;
    }    
}

/* Override styles for screen widths below 480px */
@media screen and (max-width: 480px) {
    #box-mountain-container {            
        height: fit-content;
        width: 100%;
        margin-top: 47px;
        margin-bottom: 36px;
    }

    #mt-base {
        height: 335px;
    }

    
    #mt-base-2 {     
        height: 320px;        
    }


    .person3 .bubble-right, 
    .person2 .bubble-left 
    {
        display: none;
    }    

    .mountain-person.person1 {
        position: absolute;
        top: 17.7vw;
        left: 28%;
        width: max(15.4vw, 95px);
        z-index: 1;
    }

    .person1 .bubble-right {
        width: 135px;
        font-size: 9px;
        border-radius: 13px;
        top: -125%;
        left: 55%;
    }

    .span_text_big_bubble {                
    }

    .mountain-person.person2 {
        position: absolute;
        top: 38vw;
        left: 12%;
        width: max(11.5vw, 55px);
    }

    .mountain-person.person3 {
        position: absolute;
        top: 38.5vw;
        right: 17%;
        width: max(20vw, 95px);
    }

    .mountain_person_righ_side_mobile_view {
        display: block;
    }

    .person1 .bubble-left {
        right: 18vw;
        font-size: 8.5px;
        border-radius: 9px;
    }
}