@media (max-width:600px) {
    #page{
        position: relative;
        width: 100vw;
        height: 100vh;
        background-color: rgb(0, 0, 0);
    }
    
    #page nav{
        padding: 0vw 6vw;
        width: 100vw;        
    }
    
    
    #page video{
        height: 100%;
        width: 100%;
        object-fit: cover;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    
    
    #page-bottom h3{
        font-size: 2vh; 
    }
    
    #page-bottom h2{
        font-size: 5vh;
        white-space: nowrap;
    }
    
    #page-bottom img{
        height: 5vh;
        height: 5vh;  
    }


    /* Page1 */
    
    

    /* Page3 */
    #page3{
        position: relative;
        min-height: 100vh;
        width: 100vw;
        background-color: #fff;
        margin: 40px 0px;
    
    }
    
    #page3-upper img{
        position: absolute;
        width: 30vh;
        top: 15%;
        left: 50%;
        transform: translate(-50%, -50%);
    } 
    
    #page3>img{
        width: 80%;
    }
    
    #page3 button{
        position: absolute;
        bottom: 15%;
        font-size: 2vh;
        padding: 2vw 6vw;    
    }

    
    /* Page4 */
    #page4 {
        position: relative;
        width: 100vw;
        min-height: 150vh; 
        /* background-color: rgb(194, 160, 115); */

    }

    #page4-bottom {
        display: flex;
        align-items: flex-start; 
        justify-content: space-between;
        flex-direction: column;
        padding: 4vw 1vw;
        margin-top: 5vh;
        width: 80vw;
        min-height: 40vh;
        /* background-color: #000;  */
        position: relative; 
    }
    
    #page4-bottom #right {
        width: 35vh;
    }
    
    #page4-bottom h4 {
        font-size: 3vh;
        margin-bottom: 20px;
        
    }
    
    #page4-bottom h5 {
        font-size: 2vh;
        color: gray;
    }
    
    #page4-bottom button {
        padding: 2vh 5vw;
        white-space: nowrap;
        background-color: #FE6918;
        
    }


    /* Page5 */
    #page4 {
        position: relative;
        width: 100vw;
        min-height: 150vh; 
        /* background-color: rgb(194, 160, 115); */

    }

    #page5-bottom {
        display: flex;
        align-items: flex-start; 
        justify-content: space-between;
        flex-direction: column;
        padding: 4vw 1vw;
        margin-top: 5vh;
        width: 80vw;
        min-height: 40vh;
        /* background-color: #000;  */
        position: relative; 
    }
    
    #page5-bottom #right {
        width: 35vh;
    }
    
    #page5-bottom h4 {
        font-size: 3vh;
        margin-bottom: 20px;
        
    }
    
    #page5-bottom h5 {
        font-size: 2vh;
        color: gray;
    }
    
    #page5-bottom button {
        padding: 2vh 5vw;
        white-space: nowrap;
        background-color: #FE6918;
        
    }

    /* Page6 */
    #page6 {
        position: relative;
        width: 100vw;
        min-height: 150vh; 
        /* background-color: rgb(194, 160, 115); */

    }

    #page6-bottom {
        display: flex;
        align-items: flex-start; 
        justify-content: space-between;
        flex-direction: column;
        padding: 4vw 1vw;
        margin-top: 5vh;
        width: 80vw;
        min-height: 40vh;
        /* background-color: #000;  */
        position: relative; 
    }
    
    #page6-bottom #right {
        width: 35vh;
    }
    
    #page6-bottom h4 {
        font-size: 3vh;
        margin-bottom: 20px;
        
    }
    
    #page6-bottom h5 {
        font-size: 2vh;
        color: gray;
    }
    
    #page6-bottom button {
        padding: 2vh 5vw;
        white-space: nowrap;
        background-color: #FE6918;
        
    }

    /* Page7 */
    #page7{
        height: 50vh;
        /* background-color: #FE6918; */
    }
    
    
    #page7 h3{
        margin-bottom: 1vw;
        font-size: 3vh;
    }

    #page7 h2{
        margin-bottom: 1.5vh;
        font-size: 4vh;
    }
    #page7 p{
        font-size: 2vh;
        width: 70%;
        
    }

    #page8{
        display: none;
    }

    .canvas-pages{
        display: none;
    }

    #page8-responsive{
        position: relative;
        width: 100vw;
        min-height: 100vh;
        background-color: #F5F5F7;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 2vh;
        padding: 4vh 2vh;
    }

    #page8-responsive h2{
        font-size: 4vw;
        color: gray;
    }

    #page8-responsive #sideImage{
        height: 100vh;
        width: 100vw;
        overflow: hidden;
    }

    #sideImage img{
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    #page8-responsive #frontImage{
        height: 100vh;
        width: 100vw;
        overflow: hidden;
    }
    #frontImage img{
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    h2 span{
        color: black;
    }

    /* Page9 */
    #images{
        display: block;
        padding: 2vw 2vw;
        gap: 3vw;
    }
    
    #images #img1{
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 90vw;
        height: 60vh;
        margin-bottom: 20px;
    }

 
    #images #img2{
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 90vw;
        height: 60vh;
        margin-bottom: 20px;
    
    }

    #video{
        padding: 1vw 0vw;
    }
    
    #video #video1{
        height: 100vw;   
    }

    #page10{
        min-height: 80vh;
        justify-content: flex-end;
        
    }

    #page10>h2{
        width: 70%;
        top: 10%;
        text-align: left;
        font-size: 2.2vh;
    }
    
    
    
    #image{
        height: 40vh;
    }
    
    #image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    #page10>button{
        position: absolute;
        bottom: 8%;
        padding: 12px 15px;
        font-size: 2vh;
        background-color: #FF6A19;
    }

    /* Page11 */
    #page11{
        /* background-color: #FF6A19; */
        justify-content: flex-start;
        padding: 3vh 0;
        gap: 1vh;
    }

    #page11 h3{
        font-size: 2.5vh;
    }
    
    #page11 h2{
        font-size: 5vh;
    }
    
    #page11 h4{
        width: 35vh;
        text-align: center;
        font-size: 2.5vh;
        line-height: 3vh;

    }

    /* Page12 */

    #page12{
        display: none;
    }

    #page12>canvas{
        display: none;
    }

    #page12-responsive {
        display: flex;
        gap: 20px;
        flex-direction: column;
        position: relative;
        width: 100vw;
        min-height: 100vw;
        background-color: #000000;
        padding: 0 2vh;
    }

    #page12-responsive img{
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 40vh;
        height: 50%;
        /* background-color: white; */
    }

    #page12-responsive h2{
        /* margin-top: 20px; */
        color: white;
        font-size: 2.5vh;
    }

    #page12-responsive h3{
        color: gray;
        font-size: 2.2vh;
    }

    /* Page13 */
    #page13{
        position: relative;
        height: 100vh;
        width: 100vw;
        background-color: #000000;
    }
    
    #page13 video{
        width: 100%;
        height: 40vh;
        object-fit: cover;
    
    }
    
    #page13 h2{
        top: 32%;   
        left: 10%;
        font-size: 3vh;
    }
    
    #page13 h3{
        top: 43%;
        left: 10%;
        width: 65vw;
        font-size: 2vh;
    }

    #page14{
        display: none;
    }

    #page14-responsive{
        position: relative;
        display: flex;
        /* align-items: center; */
        flex-direction: column;
        min-height: 100vw;
        width: 100vw;
        background-color: #000000;
        padding: 0 2vh;
    }

    #page14-responsive img{
        width: 45vh;
    }

    #page14-responsive h2{
        padding: 2vh 0;
        color: white;
        font-size: 3vh;
        text-align: left;
    }
    #page14-responsive h3{
        /* padding: 2vh 0; */
        color: gray;
        font-size: 2vh;
        text-align: left;
    }

    #page15{
        display: none;
    }

    #page15-responsive{
        position: relative;
        display: flex;
        /* align-items: center; */
        flex-direction: column;
        min-height: 100vw;
        width: 100vw;
        background-color: #000000;
        padding: 0 2vh;
    }

    #page15-responsive img{
        width: 45vh;
    }

    #page15-responsive h2{
        padding: 2vh 0;
        color: white;
        font-size: 3vh;
        text-align: left;
    }
    #page15-responsive h3{
        /* padding: 2vh 0; */
        color: gray;
        font-size: 2vh;
        text-align: left;
    }

    

    #page16 h2{
        margin-top: 30px;
        display: flex;
        text-align: left;
        padding-left: 20px;
        font-size: 3.5vh;
    }
    
    #page16 h3{
        color: gray;
        bottom: 10%;
        text-align: left;
        font-size: 2vh;
        padding-left: 20px;
        width: 90vw;
        left: 45%;
        margin-bottom: 20px;
        
        
    }
    
    #page16 button{
        padding: 2vh 6vh;
        background-color: white;
        color: #000;
        font-size: 2vh;
        left: 45%;

       
    }

    /* Page17 */
    #page17{
        display: flex;
        justify-content: flex-start;
        padding: 4vh 0;
    }
    #page17 p{
        font-size: 2.5vh;
    }
    
    #page17 h2{
        font-size: 4.5vh;

    }
    
    #page17 h3{
        font-size: 3vh;
        width: 60vw;
    }
    
    #page17 button{
        /* position: absolute; */
        /* bottom: 10%; */
        padding: 10px 20px;
        font-size: 2vh;
        border-radius: 50px;
        background-color: #FF6A19;
        
    }

    /* Page18 */

    #page18 #container1{
        display: flex;
        flex-direction: column;
         align-items: center; 
         justify-content: center;
    }

    #container1 #left img{
        position: relative;
        left: 50%;
        transform: translateX(-50%);   
    }
    
    #container1 #left h2{
        font-size: 3vh;
        line-height: 3vh;
        text-align: center;
        
    }
    
    #container1 #left h3{
        font-size: 2vh;
        text-align: center;   
    }

    #container1 #right img{
        width: 33vh;
        height: 45vh;  
    }

    /* container2 */
    #page18 #container2{
        display: flex;
        flex-direction: column-reverse;
         align-items: center; 
         justify-content: center;
    }

    #container2 #left h2{
        font-size: 4vh;
        line-height: 4vh;
        text-align: center;
        
    }
    
    #container2 #left a{
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        font-size: 2vh;
  
    }

    #container2 #right img{
        top: 20%;
        width: 33vh;
        height: 30vh;  
    }

    /* container3 */
    #page18 #container3{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        padding: 6vh 0;
        background-color: #F5F5F7;
        gap: 5vh;
        
        
    }

    #container3 img{
        height: 9vh;
    }
    
    #container3 h2{
        text-align: center;
        font-size: 4vh;
    }
    
    #container3 h3{
        width: 70vw;
        text-align: center;
        font-size: 2.5vh;
        color: gray;
    }
    
    #container3 a{
        font-size: 2.2vh;
        
    }
    

    
}