*{
box-sizing: border-box;
margin: 0%;
padding: 0%;
font-family: 'SF Pro Display', sans-serif;
}
html,body{
height: 100%;
width: 100%;
}
#main{
position: relative;
overflow: hidden;
}
#page{
position: relative;
background-color: black;
height: 100vh;
width: 100vw;
}
#page>nav{
height:10vh;
width:50vw;
position: absolute;
transform: translateX(-50%);
left: 50%;
border-radius: 10px;
top: 0%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 20px;
}
#page>nav>button{
padding: 7px 20px;
border-radius: 50px;
border: none;
background-color: #fff;
}
#page>nav>h3{
color:#fff ;
font-weight: 100;
}
#page>video{
height: 100%;
width: 50%;
position: absolute;
object-fit: cover;
left: 50%;
transform: translateX(-50%);
}
#first{
background-color: rgba(0, 0, 0, 0);
width: 25%;
height: 20%;
bottom: 5%;
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#first>h4{
color: #ffffff91;
margin-bottom: 1vw;
font-weight: 700;
}
#page1{
position: relative;
background-color: #fff;
height: 100vh;
width: 100vw;
}
#page1>video{
height: 100%;
width: 100%;
object-fit: cover;
}
#page1>h1{
color: white;
font-size: 4vw;
font-weight: 400;
position: absolute;
bottom: 10%;
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{
color: white;
font-size: 4vw;
font-weight: 400;
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);

}

#page3{
position: relative;
height: 100vh;
width: 100vw;
}
#page3>video{
height: 100%;
width: 100%;
object-fit: cover;
}
#page3>h1{
color: white;
font-size: 4vw;
font-weight: 400;
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);

}


#page4{
position: relative;
height: 100vh;
width: 100vw;
background-color: #fff;
}
#page4>img{
width: 60%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
}
#page4-upper{
height: 30%;
width:35%;
position: absolute;
top:5%;
z-index: 9;
left: 50%;
transform: translateX(-50%);
}
#page4-upper>img{
width:70%;
position: absolute;
top:10%;
left: 50%;
transform: translateX(-50%);
}
#page4-upper-inner{
height:60%;
width: 100%;
position: absolute;
bottom: 0%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0px 80px;
color: #ff823d;
}
#page4-upper-inner>h3{
font-weight: 500;
}
#page4>button{
position: absolute;
bottom: 7%;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
border-radius: 50px;
padding: 10px 30px;
font-size: 1rem;
white-space: nowrap;
font-weight: 1.4vw;
scale: 1.5;
transition: all 0.3s ease-in;
cursor: pointer;
}
#page4>button:hover{
background-color: black;
color: #fff;
transition: all 0.3s ease-in;
}

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

#page5>video{
width: 100%;
height: 100%;
object-fit: cover;
}
#centre-page5{
position: absolute;
top:50%;
left:50%;
transform: translateX(-50%);
text-align: center;
color: #FFF;
font-size: 2vw;
}
#page6{
display: flex;
position: relative;
height: 60vh;
width: 100vw;
}
#left6{
position: relative;
height: 100%;
width:50%;
}
#right6{
height: 100%;
width:50%;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;

}
#left6>h1{
position: absolute;
font-size: 2.3vw;
left:50%;
transform: translateX(-50%);
top: 10%;
}
#right6>p{
font-size: 2vw;
width:90%;
color:#484848d7;
}
#right6>button{
padding:10px 20px;
border: none;
background-color: #ff823d;
color: #fff;
font-weight: 400;
border-radius: 50px;
font-size: 1.3vw;
margin-top: 1.5vw;
}

#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>h1{
margin-bottom: 1vw;
font-size: 4vw;
}
#page7>p{
font-size: 1.2vw;
width :50%;
font-weight: 500;
color: #545454c9;
}
#page8{
position: relative;
height: 100vh;
width: 100vw;
background-color: #f5f5f7;
}
#page8>canvas{
position: relative;
max-width: 100vw;
max-height: 100vh;
z-index: 99;
}
#page9{
position: relative;
height: 100vh;
width: 100vw;
background-color: #f5f5f7;
}
#page9>h1{
width: 20%;
font-size: 1.3vw;
color: #4d4d4d;
z-index: 99;
position: absolute;
top: 50%;
transform: translateY(50%);
left: 5%;
}
#page9>h1>span{
color:black
}
#page10{
position: relative;
height: 100vh;
width: 100vw;
background-color: #f5f5f7;
}
#page10>h1{
width: 20%;
font-size: 1.3vw;
color: #4d4d4d;
z-index: 99;
position: absolute;
top: 50%;
transform: translateY(50%);
right: 5%;
}
#page10>h1>span{
color:black
}


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

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

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

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

#page15{
position: relative;
height: 100vh;
width: 100vw;
background-color: #f5f5f7;
display: flex;
align-items: center;
justify-content: space-around;
}
#left15{
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;
}
#right15{
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;
}
#page16{
position: relative;
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
#center-page16{
height: 90%;
width:95%;
position: relative;
}
#center-page16>video{
height: 100%;
width: 100%;
object-fit: cover;
}
#page17{
position: relative;
height: 120vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#page17>h2{
position: absolute;
width: 50%;
color: #434343c7;
font-weight: 500;
top: 0%;
}
#page17>h2>span{
color: #000;
}
#page17>img{
position: absolute;
width: 60%;
bottom: 0%;
}
#page17>button{
position: absolute;
bottom: 10%;
padding: 10px 20px;
font-size: 1.5vw;
border-radius: 50px;
background-color: #ff823d;
color: #FFF;
border: none;
}
#page18{
position: relative;
height: 100vh;
width: 100vw;
top: 0%;
}
#page18>canvas{
position: relative;
max-width: 100vw;
max-height: 100vw;
}




#page19{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: relative;
    height: 100vh;
    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: 100vh;
    width: 100vw;
    object-fit: cover;
    opacity:0
}
#page24{
width :100vw;
height: 100vh;
position: relative;
background-color:#d2d2d7;
display: flex;
flex-direction: row;
justify-content: center;
}
#footer-content{
position: absolute;
height:100%;
width: 50%;
background-color: #d2d2d7;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
#writings{
padding: 30px 40px;
display: flex;
flex-direction: column;
justify-content: center;

}
#writings>p{
font-size: smaller;
color: #4d4d4d;
}
hr{
color:#4d4d4d
}

#links{
display: flex;
flex-direction: row;
justify-content: space-between;

}
#sub-links>h6, #sub-links>ul>li{
color: #4d4d4d;
}
#sub-links>h6{
padding-bottom: 2vh;
}
#sub-links>ul>li{
list-style: none;
padding: 1% 0%;
transition: all 01s ease-in;
}

#sub-links>ul>li:hover{
text-decoration: underline;
transition: all 01s ease-in;
}
#footer-end{
display: flex;
flex-direction: column;
justify-content:space-between ;
width: 100%;
}
#two{
display: flex;
flex-direction: row;
justify-content: space-between;
}
#footer-end>#two>p,#footer-end>#two>ul{
font-size: x-small;
color: #4d4d4d;
}

#two>ul>li{
list-style: none;
display: inline-block;
padding: 0% 2%;
}


@media(max-width:762px){
#page4-upper-inner{
flex-direction: column;
}
#page4>button{
scale: none;
}

#page6{
flex-direction: column;
justify-content: center;
align-items: center;
}
#page8>canvas{
width: 100%;
height: 100%;
}
#page15{
flex-direction: column;
align-items: center;
justify-content: space-between;
}
#left15,#right15{
width:90%;
height:45%;
}
#center-page18{
display: none;
}
#footer-content{
height: 100%;
width:100%;
}
#writings>p{
font-size: 1vh;
}
#links{
flex-direction: column;
}

#footer-end{
display: none;
}
video{
object-fit: contain;
}
#center-page20{
   display: none;
}
#page18{
position: relative;
height: 100vh;
width: 100vw;
top: 0%;
}
#page18>canvas{
position: relative;
max-width: 100vw;
max-height: 100vh;
}
}

@media(max-width:930px){
#footer-content{
height: 100%;
width:100%;
}
video{
object-fit: cover;
}
#writings>p{
font-size: 1vh;
}
#links{
flex-direction: column;
}

#footer-end{
display: none;
}

}