*{
margin:0%;
padding:0%;
box-sizing:border-box;
font-family:SF-PRO-DISPLAY;
}
html,
body{
height:100%;
width:100%;
}
#main{
position:relative;
overflow:hidden;
}
#page{
position:relative;
height:100vh;
width:100vw;
background-color:#000;

}
#page>nav{
display:flex;
align-items:center;
justify-content:space-between;
padding:0px20px;
height:7vh;
width:50vw;
position:absolute;
top:0%;
left:50%;
transform:translateX(-50%);
color:#fff;
}
#page>nav>button{
padding:7px 20px;
border-radius:50px;
border:none;
background-color:#fff;
}
#page>nav>h3{
font-weight:400;
}
#page>video{
height:100%;
width:50%;
object-fit:cover;
position:absolute;
left:50%;
transform:translateX(-50%);
}
#page-bottom{
height:20%;
width:25%;
position:absolute;
bottom:5%;
left:50%;
transform:translateX(-50%);
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}
#page-bottom>h3{
color:#dadada93;
margin-bottom:1vw;
}
#page1{
position:relative;
height:100vh;
width:100vw;
background-color:#fff;
}
#page1>video{
height:100%;
width:100%;
object-fit:cover;
}
#page1>h1{
font-size:4vw;
color:#fff;
font-weight:400;
position:absolute;
bottom:20%;
left:50%;
transform:translateX(-50%);
white-space:nowrap;
}


#page2{
position:relative;
height:100vh;
width:100vw;
}
#page2>video{
height:100%;
width: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{
position:relative;
height:100vh;
width:100vw;
background-color:#fff;
}
#page3>img{
    direction: ltr;
    display: inline;
    
    padding: 150px;
    justify-content: right;
}
#page3-upper{
height:25%;
width:35%;
position:absolute;
z-index:9;
top:5%;
left:50%;
transform:translateX(-50%);
}
#page3-upper>img{
position:absolute;
top:10%;
left:50%;
transform:translateX(-50%);
width:70%;
}
#page3-upper-inner{
position:absolute;
bottom:0%;
height:60%;
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
padding:0px80px;
color:#612505;
}
#page3-upper-inner>h3{
font-weight:500;
}
#page3>button{
position:absolute;
bottom:7%;
left:50%;
transform:translateX(-50%);
padding:15px 30px;
border:1pxsolid#000;
font-weight:500;
background-color:red;
border-radius:50px;
font-size:1.4vw;
}
#page4{
position:relative;
height:100vh;
width:100vw;
}
#page4>video{
height:100%;
width:100%;
object-fit:cover;
}
#center-page4{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
color:#fff;
font-size:2vw;
}

#page5{
display:flex;
position:relative;
height:60vh;
width:100vw;
}
.left5{
position:relative;
height:100%;
width:50%;
}
.left5>h1{
font-size:2.3vw;
position:absolute;
left:50%;
transform:translateX(-50%);
top:10%;
}
.right5{
display:flex;
align-items:start;
justify-content:center;
flex-direction:column;
height:100%;
width:50%;
padding-left:5vw;
}
.right5>h3{
font-size:2vw;
width:90%;
color:#484848d7;
}
.right5>button{
padding:10px20px;
border:none;
background-color:#ff823d;
color:#fff;
font-weight:400;
border-radius:50px;
font-size:1.3vw;
margin-top:1.5vw;
}
#page6{
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
text-align:center;
position:relative;
height:70vh;
width:100vw;
background-color:#f5f5f7;
}
#page6>h3{
margin-bottom:1vw;
font-size:2vw;
}
#page6>h1{
margin-bottom:1.5vw;
font-size:4vw;
}
#page6>p{
font-size:1.2vw;
width:60%;
font-weight:700;
color:#545454c9;
}

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

#page7>canvas{
position:relative;
max-width:100vw;
max-height:100vh;
z-index:99;
}
#page8{
position:relative;
height:100vh;
width:100vw;
background-color:#f5f5f7;

}
#page8>h1{
width:20%;
top:50%;
transform:translateY(-50%);
left:5%;
font-size:1.3vw;
font-weight:500;
color:#4d4d4d;
z-index:99;
position:absolute;
}
#page8>h1>span{
color:#000;
}
#page9{
position:relative;
height:100vh;
width:100vw;
background-color:#f5f5f7;
}
#page9>h1{
width:20%;
top:50%;
transform:translateY(-50%);
right:5%;
font-size:1.3vw;
font-weight:500;
color:#4d4d4d;
z-index:99;
position:absolute;
}
#page9>h1>span{
color:#000;
}
#page10{
position:relative;
height:100vh;
width:100vw;
background-color:#f5f5f7;

}
#page10>h1{
width:20%;
top:50%;
transform:translateY(-50%);
left:5%;
font-size:1.3vw;
font-weight:500;
color:#4d4d4d;
z-index:99;
position:absolute;
}
#page10>h1>span{
color:#000;
}
#page11{
position:relative;
height:100vh;
width:100vw;
background-color:#f5f5f7;
}
#page11>h1{
width:20%;
top:50%;
transform:translateY(-50%);
right:5%;
font-size:1.3vw;
font-weight:500;
color:#4d4d4d;
z-index:99;
position:absolute;
}
#page11>h1>span{
color:#000;
}
#page12{
position:relative;
height:100vh;
width:100vw;
background-color:#f5f5f7;

}
#page12>h1{
width:20%;
top:50%;
transform:translateY(-50%);
left:5%;
font-size:1.3vw;
font-weight:500;
color:#4d4d4d;
z-index:99;
position:absolute;
}
#page12>h1>span{
color:#000;
}
#page13{
position:relative;
height:100vh;
width:100vw;
background-color:#f5f5f7;
}
#page13>h1{
width:20%;
top:50%;
transform:translateY(-50%);
right:5%;
font-size:1.3vw;
font-weight:500;
color:#4d4d4d;
z-index:99;
position:absolute;
}
#page13>h1>span{
color:#000;
}
#page14{
display:flex;
align-items:center;
justify-content:space-around;
position:relative;
height:100vh;
width:100vw;
background-color:#fff;
}
.left14{
height:90%;
width:45%;
position:relative;
background-image:url(https://www.apple.com/v/apple-vision-pro/a/images/overview/design/glass_top__k3b8lzqd1l2m_large.jpg);
background-size:cover;
}
.right14{
height:90%;
width:45%;
position:relative;
background-image:url(https://www.apple.com/v/apple-vision-pro/a/images/overview/design/glass_side__gm4agomrwl2e_large.jpg);
background-size:cover;
}
#page15{
position:relative;
height:100vh;
width:100vw;
display:flex;
align-items:center;
justify-content:center;
}
#center-page15{
height:90%;
width:95%;
position:relative;
overflow:hidden;
}
#center-page15>video{
height:100%;
width:100%;
object-fit:cover;
}
#page16{
position:relative;
height:120vh;
width:100vw;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}
#page16>h2{
position:absolute;
width:50%;
color:#434343c7;
font-weight:500;
top:5%;
}
#page16>h2>span{
color:#000;
}
#page16>img{
width:60%;
position:absolute;
bottom:0%;
}
#page16>button{
position:absolute;
bottom:10%;
padding:10px20px;
font-size:1.5vw;
border-radius:50px;
background-color:#ff823d;
color:#fff;
font-weight:500;
border:none;
}
#page17{
position:relative;
height:100vh;
width:100vw;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
background-color:#000;
color:#fff;
}
#page17>h4{
font-size:2vw;
font-weight:500;
margin-bottom:2vw;
}
#page17>h1{
font-size:5vw;
line-height:1;
font-weight:500;
margin-bottom:3vw;
}
#page17>p{
font-size:1.5vw;
font-weight:500;
margin-bottom:2vw;
color:#ffffff7c;
width:50%;
text-align:center;
}
#page17>p>span{
color:#fff;
}


#page18{
position:relative;
height:100vh;
width:100vw;
top:0%;
}
#page18>canvas{
position:relative;
max-width:100vw;
max-height:100vw;
}
#page18>img{
    position: absolute;
    text-align: right;
    margin-left: 60px;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 50px;
}
#page18>h1{
display:flex;
align-items:center;
justify-content:center;
color : black;
position:relative;
height: 5vh;
width:100vw;
background-color: white;
flex-direction:column;
text-align:center;
font-size:3vw;
}
#page19{
display:flex;
align-items:center;
justify-content:center;
color:#fff;
position:relative;
height:30vh;
width:100vw;
background-color:#000;
flex-direction:column;
text-align:center;
font-size:1.5vw;
}
#page19>h5{
width:35%;
}
#page20{
position:relative;
height:100vh;
width:100vw;
background-color:#000;
}
#page20>video{
height:100%;
width:100%;
object-fit:cover;
}
#center-page20{
position:absolute;
height:20%;
width:20%;
bottom:18%;
right:5%;
color:#fff;
}
#center-page20>h1{
margin-bottom:1.7vw;
}
#page21{
position:relative;
height:100vh;
width:100vw;
background-color:#000;
}
#page21>#troff{
top:50%;
left:50%;
transform:translate(-50%,-50%);
position:absolute;
width:50%;
z-index:9;
}
#page21>#tron{
top:50%;
left:50%;
transform:translate(-50%,-50%);
position:absolute;
width:50%;
}
#page22{
position:relative;
height:100vh;
width:100vw;
background-color:#000;
}
#page22>#snroff{
top:50%;
left:50%;
transform:translate(-50%,-50%);
position:absolute;
width:50%;
z-index:9;
}
#page22>#snron{
top:50%;
left:50%;
transform:translate(-50%,-50%);
position:absolute;
width:50%;
}
#page23{
position:relative;
height:100vh;
width:100vw;
background-color:#000;
}
#page23>img{
height:100%;
width:100%;
object-fit:cover;
opacity:0
}