@font-face {
    font-family: SfProBlack;
    src: url("./Font/SF-Pro-Display-Black.otf");
}

@font-face {
    font-family: SfProMedium;
    src: url("./Font/SF-Pro-Display-Medium.otf");
}



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "SfProMedium";
}
html, body{
    height: 100%;
    width: 100%;
}

#main{
    position: relative;
    overflow: hidden;
}

#page{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0, 0, 0);
}

#page nav{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0vw 3vw;
    height: 7vh;
    width: 50vw;
    top: 0;
    left: 50%;
    /* background-color: rgb(133, 133, 133); */
    transform: translateX(-50%);
}

#page nav h2{
    
    color: #fff;
}

#page video{
    height: 100%;
    width: 50%;
    object-fit: cover;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#page-bottom{
    height: 20%;
    width: 35%;
    position: absolute;
    /* background-color: antiquewhite; */
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#page-bottom h3{
    font-size: large; 
}

#page-bottom h2{
    
    font-size: 5vw;
    display: flex;
    align-items: center;

}

#page-bottom img{
    height: 5vw;
    height: 5vw;  
}

#page nav button{
    padding: 7px 20px;
    border-radius: 50px;
    border: none;
    background-color: white;
    color: black;
}


/* Page1 */
#page1{
    position: relative;
    width: 100vw;
    height: 100vh;
    /* background-color: rgb(14, 56, 42); */
}



#page1>video{
    /* position: absolute; */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#page1>h1{
    position: absolute;
    font-size: 4vw;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10%;
    color: white;
}

#page2{
    position: relative;
    width: 100vw;
    height: 100vh;
}

#page2>video{
    /* position: absolute; */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#page2>h1{
    font-size: 4vw;
    position: absolute;
    
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    text-align: center;
    color: #fff;
    font-weight: 400;
}

/* Page3 */
#page3{
    position: relative;
    min-height: 100vh;
    width: 100vw;
    background-color: #fff;
    margin: 40px 0px;

}

#page3-upper img{
    position: absolute;
    width: 20vw;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
} 

#page3>img{
    width: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#page3 button{
    position: absolute;
    bottom: 0;
    font-size: 3vh;
    padding: 1.5vw 5vw;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border-radius: 50px;
    border: 2px solid black;
    transition: 0.6s;

}

#page3 button:hover{
    background-color: black;
    color: white;
    cursor: pointer;
}

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

#page4>video  {
    width: 100%;
    height: 100vh; 
    object-fit: cover;
}

#page4 h3{
    color: white;
    font-size: 2vw;
    
    left: 50%;

    font-size: 1.5vw;
    
}


#page4 h2{
    
    color: white;
    
    font-size: 5.5vw;
    text-align: center;
}

#page4 #text{
    color: white;
    position: absolute;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    bottom: 40%;
}

#page4-bottom {
    display: flex;
    align-items: flex-start; 
    justify-content: space-between;
    padding: 4vw 6vw;
    margin-top: 5vh;
    width: 80vw;
    /* background-color: aliceblue; */
    margin-left: auto;
    margin-right: auto;
    height: auto; 
    position: relative; 
}

#page4-bottom #right {
    width: 40vw;
}

#page4-bottom h4 {
    font-size: 2.5vw;
    
}

#page4-bottom h5 {
    font-size: 1.5vw;
    
    color: gray;
}

#page4-bottom button {
    padding: 1vw 3vw;
    margin-top: 35px;
    border-radius: 50px;
    background-color: orange;
    color: white;
    border: none;
    font-size: large;
}

/* page5 */
#page5 {
    position: relative;
    width: 100vw;
    min-height: 100vh; 
    /* background-color: rgb(194, 160, 115); */
    padding-bottom: 10vh; 
}

#page5>video  {
    width: 100%;
    height: 100vh; 
    object-fit: cover;
}

#page5 h3{
    color: white;
    font-size: 2vw;
    
    left: 50%;

    font-size: 1.5vw;
    
}


#page5 h2{
    
    color: white;
    
    font-size: 5.5vw;
    text-align: center;
}

#page5 #text{
    color: white;
    position: absolute;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    bottom: 40%;
}

#page5-bottom {
    display: flex;
    align-items: flex-start; 
    justify-content: space-between;
    padding: 4vw 6vw;
    margin-top: 5vh;
    width: 80vw;
    /* background-color: aliceblue; */
    margin-left: auto;
    margin-right: auto;
    height: auto; 
    position: relative; 
}

#page5-bottom #right {
    width: 40vw;
}

#page5-bottom h4 {
    font-size: 2.5vw;
    
}

#page5-bottom h5 {
    font-size: 1.5vw;
    
    color: gray;
}

#page5-bottom button {
    padding: 1vw 3vw;
    margin-top: 35px;
    border-radius: 50px;
    background-color: orange;
    color: white;
    border: none;
    font-size: large;
}


/* Page6 */
#page6 {
    position: relative;
    width: 100vw;
    min-height: 100vh; 
    padding-bottom: 10vh;
}

#page6>video  {
    width: 100%;
    height: 100vh; 
    object-fit: cover;
}

#page6 h3{
    color: white;
    font-size: 2vw;
    
    left: 50%;

    font-size: 1.5vw;
    
}


#page6 h2{
    
    color: white;
    
    font-size: 5.5vw;
    text-align: center;
}

#page6 #text{
    color: white;
    position: absolute;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    bottom: 40%;
}

#page6-bottom {
    display: flex;
    align-items: flex-start; 
    justify-content: space-between;
    padding: 4vw 6vw;
    margin-top: 5vh;
    width: 80vw;
    /* background-color: aliceblue; */
    margin-left: auto;
    margin-right: auto;
    height: auto; 
    position: relative; 
}

#page6-bottom #right {
    width: 40vw;
}

#page6-bottom h4 {
    font-size: 2.5vw;
    
}

#page6-bottom h5 {
    font-size: 1.5vw;
    
    color: gray;
}

#page6-bottom button {
    padding: 1vw 3vw;
    margin-top: 35px;
    border-radius: 50px;
    background-color: orange;
    color: white;
    border: none;
    font-size: large;
}



/* Page7 */
#page7{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    position: relative;
    height: 70vh;
    width: 100vw;
    background-color: #f5f5f7;
}


#page7 h3{
    margin-bottom: 1vw;
    font-size: 2vw;
}
#page7 h2{
    margin-bottom: 1.5vw;
    font-size: 4vw;
}
#page7 p{
    font-size: 1.2vw;
    width: 60%;
    font-weight: 700;
    color: #545454c9;
}

#page8-responsive{
    display: none;
}

#page8{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f7;   
}

#page8>canvas{
    position: absolute;
    height: 100vh;
    width: 100vw;
    z-index: 99;
}


/* Canvas pages */
#canvaspage1{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f7;
}

#canvaspage1 h5{
    position: relative;
    z-index: 99;
    left: 20%;
    top: 30%;
    width: 15%;
    font-size: 1.2vw;
    color: gray;
}

#canvaspage1 span{
    color: black;
}

#canvaspage2{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f7;
}

#canvaspage2 h5{
    position: relative;
    z-index: 99;
    left: 65%;
    top: 30%;
    width: 15%;
    font-size: 1.2vw;
    color: gray;
}

#canvaspage2 span{
    color: black;
}


#canvaspage3{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f7;
}

#canvaspage3 h5{
    position: relative;
    z-index: 99;
    left: 20%;
    top: 30%;
    width: 15%;
    font-size: 1.2vw;
    color: gray;
}

#canvaspage3 span{
    color: black;
}


#canvaspage4{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f7;
}

#canvaspage4 h5{
    position: relative;
    z-index: 99;
    left: 20%;
    top: 30%;
    width: 15%;
    font-size: 1.2vw;
    color: gray;
}

#canvaspage4 span{
    color: black;
}

#canvaspage5{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f7;
}

#canvaspage5 h5{
    position: relative;
    z-index: 99;
    left: 65%;
    top: 30%;
    width: 15%;
    font-size: 1.2vw;
    color: gray;
}

#canvaspage5 span{
    color: black;
}

#canvaspage6{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f7;
}

#canvaspage6 h5{
    position: relative;
    z-index: 99;
    left: 20%;
    top: 30%;
    width: 15%;
    font-size: 1.2vw;
    color: gray;
}

#canvaspage6 span{
    color: black;
}


#page9{
    position: relative;
    width: 100vw;
    min-height: 100vh;
    background-color: rgb(255, 255, 255);
}

#images{
    display: flex;
    justify-content: space-between;
    padding: 2vw 8vw;
    gap: 3vw;
}

#images #img1{
    width: 70vw;
    height: 100vh;
    border-radius: 10px;
    /* background-color: rgb(255, 255, 255); */
}

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



#images #img2{
    width: 70vw;
    height: 100vh;
    border-radius: 10px;
    /* background-color: rgb(255, 255, 255); */

}

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

#video{
    padding: 1vw 8vw;
    display: flex;
    justify-content: center;   
}


#video #video1{
    width: 85vw;
    height: 50vw;
    background-color: #f5f5f7;
}

#video1 video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


#page10{
    position: relative;
    width: 100vw;
    min-height: 120vh;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}



/* #page10{
    position: relative;
    min-height: 120vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    
} */
#page10>h2{
    position: absolute;
    width: 45%;
    color: #434343c7;
    font-weight: 500;
    top: 5%;
    text-align: center;
    padding-bottom: 4vw;
}
#page10>h2>span{
    color: #000;
}


#image{
    width: 100%;
    height: 100vh;
    background-color: #fff;
    margin-top: 20vw;  
    display: flex;
    align-items: center;
    justify-content: center;
}

#image img{
    width: 60vw;
    height: 100vh;
    object-fit: cover;
}

#page10>button{
    position: absolute;
    bottom: 10%;
    padding: 10px 20px;
    font-size: 1.5vw;
    border-radius: 50px;
    background-color: #FF6A19;
    color: #fff;
    font-weight: 500;
    border: none;
}

#page11{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
}

#page11 h3{
    font-size: 1.5vw;
}

#page11 h2{
    font-size: 5vw;
    text-align: center;
}

#page11 h4{
    width: 50vw;
    text-align: center;
    font-size: 1.5vw;
    padding: 2vw 0;
    line-height: 2vw;
    color: gray;
}

h4 span{
    color: #fff;
}

#page12-responsive{
    display: none;
}

#page12{
    position: relative;
    min-height: 100vh;
    width: 100vw;
    top: 0%;
    background-color: rgb(0, 0, 0);
}

#page12 > canvas {
    position: relative;
    max-width: 100vw;
    max-height: 100vh;
    
}
#page12 h2{
    position: relative;
    bottom: 10%;
    color: white;
    font-size: 2vw;
    text-align: center;
}

#page12 h3{
    position: relative;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 1.5vw;
    width: 60vw;
    text-align: center;
}


#page13{
    position: relative;
    min-height: 130vh;
    width: 100vw;
    background-color: #000000;
}

#page13 video{
    width: 100%;
    height: 100vh;
    object-fit: cover;

}

#page13 h2{
    position: absolute;
    top: 60%;   
    right: 20vw;
    font-size: 2vw;
    color: white;
}

#page13 h3{
    position: absolute;
    top: 70%;
    right: 18.5vw;
    width: 25vw;
    font-size: 1.5vw;
    color: gray;
}

#page14-responsive{
    display: none;
}

#page14{
    position: relative;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    flex-direction: column;
    padding: 4vw 0;
    gap: 2vw;
    width: 100vw;
    min-height: 120vh;
    background-color: rgb(0, 0, 0);
}


#page14 h2{
    color: white;
    font-size: 2.5vw;
    /* padding: 4vw 0; */
    position: absolute;
    bottom: 25%;
}

#page14 h3{  
    text-align: center;
    color: gray;
    font-size: 1.5vw;
    width: 36vw;
    position: absolute;
    bottom: 5%;
}

#page14 #trackingOff{
    top: 10%;
    left: 50%;
    transform: translate(-50%);
    position: absolute;
    width: 60%;
    /* height: 100%; */
    z-index: 9;
}

#page14 #trackingOn{
    top: 10%;
    left: 50%;
    transform: translate(-50%);
    position: absolute;
    width: 60%;
    /* height: 100%; */
}

#page15-responsive{
    display: none;
}

#page15{
    position: relative;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    flex-direction: column;
    padding: 4vw 0;
    gap: 2vw;
    width: 100vw;
    min-height: 120vh;
    background-color: rgb(0, 0, 0);
}


#page15 h2{
    color: white;
    font-size: 2.5vw;
    /* padding: 4vw 0; */
    position: absolute;
    bottom: 25%;
}

#page15 h3{  
    text-align: center;
    color: gray;
    font-size: 1.5vw;
    width: 36vw;
    position: absolute;
    bottom: 5%;
}

#page15 #sensorsOff{
    top: 10%;
    left: 50%;
    transform: translate(-50%);
    position: absolute;
    width: 60%;
    /* height: 100%; */
    z-index: 9;
}

#page15 #sensorsOn{
    top: 10%;
    left: 50%;
    transform: translate(-50%);
    position: absolute;
    width: 60%;
    /* height: 100%; */
}

#page16{
    position: relative;
    min-height: 100vh;
    width: 100vw;
    background-color: #000;
    padding: 4vw 0;
}

#page16 img{
    /* position: absolute; */
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 4vw 0;
    opacity: 0;
}

#page16 h2{
    color: white;
    bottom: 20%;
    text-align: center;
    font-size: 2vw;
}

#page16 h3{
    color: gray;
    bottom: 10%;
    text-align: center;
    font-size: 1.5vw;
    padding: 3vw 0;
    width: 60vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    /* position: ; */
}

#page16 button{
    padding: 1vw 3vw;
    background-color: white;
    color: #000;
    font-size: 1.5vw;
    border-radius: 50px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

#page17{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    padding: 4vw 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3vw;
}

#page17 p{
    font-size: 1.5vw;
}

#page17 h2{
    font-size: 4vw;
    text-align: center;
}

#page17 h3{
    font-size: 1.5vw;
    color: gray;
    text-align: center;
    width: 50vw;
}

h3 span{
    color: black;
}

#page17 button{
    /* position: absolute; */
    /* bottom: 10%; */
    padding: 10px 20px;
    font-size: 1.5vw;
    border-radius: 50px;
    background-color: #FF6A19;
    color: #fff;
    font-weight: 500;
    border: none;
}

#page18{
    position: relative;
    width: 100vw;
    min-height: 100vh;
    background-color: #fff;
    padding: 2vw 2vw;
    overflow: hidden;
    display: flex;
    gap: 3vw;
    flex-direction: column;
}

#page18 #container1{
    position: relative;
    background-color: #F5F5F7;
    width: 95vw;
    height: 100vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 50%;
    align-items: center;
    overflow: hidden;
}

#container1 #left img{
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
}

#container1 #left h2{
    font-size: 4vw;
    line-height: 4vw;
    margin-bottom: 10px;
}

#container1 #left h3{
    font-size: 1.5vw;
    color: gray;
    /* line-height: 4vw; */
}

#container1 #right img{
    position: absolute;
    width: 33vw;
    height: 45vw;
    bottom: 0;
    right: 15%;
    /* background-color: #000; */
}




#page18 #container2{
    position: relative;
    background-color: #F5F5F7;
    width: 95vw;
    height: 100vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 50%;
    align-items: center;
    overflow: hidden;
}

#container2 h2{
    font-size: 4vw;
    line-height: 4vw;
    margin-bottom: 2vw;
}

#container2 #left a{
    font-size: 1.5vw;
    color: #0C6DCE;
}

#container2 #right img{
    position: absolute;
    width: 40vw;
    height: 25vw;
    bottom: 30%;
    right: 10%;
    /* background-color: #000; */
}

#page18 #container3{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #F5F5F7;
    gap: 4vw;
    width: 95vw;
    height: 100vh;
    left: 50%;
    transform: translateX(-50%);
    
}

#container3 img{
    height: 9vw;
}

#container3 h2{
    text-align: center;
    font-size: 3vw;
}

#container3 h3{
    width: 50vw;
    text-align: center;
    font-size: 1.5vw;
    color: gray;
}

#container3 a{
    font-size: 1.5vw;
}