@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

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

#main{
  /* position relative se jo pages hai wo overlap nai karenge */
  position: relative;
  overflow: hidden; /* excess chize jo bhi bahar jaa rahi hai use hide kar dega*/
}


/* page */

#page{
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: white;
}

#page nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 7vh;
  width: 100%;
  background-color: #f5f5f5;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}
  
#page nav h3{
  padding-left: 10%;
  font-weight: 450;
  font-size: 1.5vw;
}

#page nav #grp{
  padding-right: 10%;
}

#page #grp{
  display: flex;
}

#grp p,#b,#bb{
  margin: 1vw;
  font-weight: 350;

  
}

#grp button{
  padding: 0.3vw;
  border: 1px solid black;
  border-radius: 50px;
}

#b{
  border: 1px solid black;
  background-color: #fff;
  padding: 0.2vw 1vw !important;
}

#bb{
  background-color: rgb(5, 146, 222);
  color: #f2ebeb;
  padding: 0.2vw 1vw !important; 
  border: none !important;
}

#b:hover{
  background-color: black;
  color: #fff;
}

#page #v1{
  display: block;
  height: 100%;
  width: 65%;
  object-fit: contain;
  position: absolute;
  top:1%;
  left: 50%;
  transform: translateX(-50%);
}

#page-bottom{
  height: 25%;
  width: 25%;
  /* background-color: green; */
  position: absolute;
  top: 72%;
  transform: translateX(-50%) ;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
  
#page-bottom #vision{
  width: 23vw;
}

#page-bottom #demo{
  font-size: 1.3vw;
  font-weight: 520;
  text-align: center;
}

#demo1{
  padding-top: 6vh
}
  
#page-bottom #demo1 p a{
  color: #ff5a00;
  text-decoration: none;
}
  
#page-bottom #demo1 p{
  padding: 0.5vh;
}



/* page1 */

#page1 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: rgb(19, 18, 18); 
  overflow: hidden;
}

#page1 video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* Keep video behind text */
}

#saman {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 135%);
  text-align: center;
  z-index: 99;  
  color: white;
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#saman p {
  font-size: 2.5vw;
  font-weight: 500;
  margin: 10px 0;
  text-align: center; 
  width: 70%;
  margin-bottom: 2vw;
}

 

 

#page1 button{
  background-color: transparent;
  color: #ff5a00;
  font-size: 1.2vw;
  font-weight: 400;
  z-index: 999;
  border: 3px solid #ff5a00;
  border-radius: 50px;
  padding: 0.8vw 1.8vw; 
  bottom: 5%;
 
}

#page1 button:hover{
  background-color: #ff5a00;
  color: #fff;
}


/* page2 */

#page2 {
  position: relative;
  height: 100vh;  
  width: 100vw;
  background-color: #fff;
}
#page2 img{
  width: 55%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-40%);
}

#page2 #page2-upper{
  position: absolute;
  width: 35%;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  background-color: burlywood;

}

#page2 button{
  border: 3px solid black;
  border-radius: 50px;
  padding: 1vw 2vw;
  font-size: 1vw;
  font-weight: 450;
  position: absolute;
  bottom: 17%;
  left: 50%;
  transform: translateX(-50%);
  background-color: transparent;
}

#page2 button:hover{
  background-color: black;
  color: #fff;

}











/* page3 */

#page3{
  position: relative;
  height: 100vh;
  width: 100vw;
}
  
#page3 video{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

#page3 h1,h5{

  font-size: 5vw;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  transform: translateX(-50%);
  text-align: center;  z-index: 999;
  font-weight: 800;
}

#page3 h5{

  font-size: 1.8vw;
  color: #fff;
  position: absolute;
  top: 45%;
  z-index: 999;
  font-weight: 800;
  

} 

#page3-written{
  display:flex;
  position: relative;
  height: 60vh;
  width: 100vw;
  background-color: #fff;
}
.left3{
  position: relative;
  height: 100%;
  width: 50%;
  /* background-color: blue; */
}
.left3 h1{
  font-size: 2.3vw;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10%;
}

.right3{
  height: 100%;
  width: 50%;
  /* background-color: rgb(255, 247, 0); */
}
  
.right3 h3{
  padding-left: 4vw;
  font-size: 1.5vw;
  position: absolute;
  font-weight: 500;
  left: 65%;
  transform: translateX(-50%);
  top: 10%;
  color: gray;
}

  
.right3 button{
  border: none;
  border-radius: 50px;
  padding: 1vw 2vw;
  font-size: 0.5vw;
  font-weight: 450;
  background-color: #ff5a00;
  color: #fff;
  font-size: 1.3vw;
  position: absolute;
  bottom: 20%;
  margin-left: 1.2%;
}

.right3 button:hover{
  background-color: #ff5900bd;
}




/* page 4 */

#page4{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  position: relative;
  height: 70vh;
  width: 100vw;
  background-color: #f5f5f7;
}
  
 #page4 h3{
  margin-bottom: 1vw;
  font-size: 1.5vw;
  font-weight: 500;
 } 
 #page4 h1{
  margin-bottom: 1.5vw;
  font-size: 4.5vw;
  font-weight: 700;
 } 
 #page4 p{
  width: 60%;
  /* margin-top: 5vw; */
  font-size: 1.2vw;
  font-weight: 500;
  color: #898585;
  line-height: 1.8vw;
 } 




 /* page 5 */
 #page5{
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f7;

 }

 #page5 canvas{
  position: absolute;
  max-height: 100vh;
  max-width: 100vw;
  z-index: 9;
  
 }




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

#page6 h1{
  width: 20%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2vw;
  font-weight: 470;
  color: #898585;
  z-index: 999;
  position: absolute;
  left: 20%;
}
#page6 h1 span{
  color: #0f0f0f;
}
   




/* page7 */

 #page7{
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f7;
}
#page7 h1{
  width: 20%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2vw;
  font-weight: 470;
  color: #898585;
  z-index: 999;
  position: absolute;
  right: 15%;
}
#page7 h1 span{
  color: #0f0f0f;
}




/* page8 */

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

#page8 h1{
  width: 20%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2vw;
  font-weight: 470;
  color: #898585;
  z-index: 999;
  position: absolute;
  left: 20%;
}
#page8 h1 span{
  color: #0f0f0f;
}



/* page9 */

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

 }
 #page9 h1{
  width: 20%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2vw;
  font-weight: 470;
  color: #898585;
  z-index: 999;
  position: absolute;
  left: 20%;
}
#page9 h1 span{
  color: #0f0f0f;
}


/* page10 */

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

 }
 #page10 h1{
  width: 20%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2vw;
  font-weight: 470;
  color: #898585;
  z-index: 999;
  position: absolute;
  right: 15%;
}
#page10 h1 span{
  color: #0f0f0f;
}




/* page11 */

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

 }
 #page11 h1{
  width: 20%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2vw;
  font-weight: 470;
  color: #898585;
  z-index: 999;
  position: absolute;
  left: 20%;
}
#page11 h1 span{
  color: #0f0f0f;
}





/* page12 */

#page12{
  position: relative;
  height: 100vh;
  width: 100vw;
  /* background-color: #9797e9; */
  display: flex;
  align-items: center;
  justify-content: space-around;

 }
 #page12 #left{
  position: relative;
  height: 90%;
  width: 45%;
  background-image: url(assets/page12-left.jpg);
  background-size: cover;
  background-color: blanchedalmond;
 }
 #page12 #right{
  position: relative;
  height: 90%;
  width: 45%;
  background-image: url(assets/page12-right.jpg);
  background-size: cover;
  background-color: rgb(253, 153, 3);
 }



 /* page13 */

#page13{
  position: relative;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

#center-page13{
  height: 90%;
  width: 95%;
  position: relative;
}
#center-page13 video{
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: relative;
}




/* page14 */

#page14{
  height: 120vh;
  width: 100vw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#page14 h2{
  top: 0%;
  position: absolute;
  width: 50%;
  color: #434343c7;
  font-weight: 500;
  text-align: center;
}
#page14 h2 span{
  color: black;
}

#page14 img{
  width: 65%;
  position: absolute;
  bottom: 0%;
}
#page14 button{
  
  position: absolute;
  bottom: 10%;
  background-color: transparent;
  color: #fff;
  font-size: 1.2vw;
  font-weight: 400;
  z-index: 999;
  border: none;
  background-color: #ff5a00;
  border-radius: 50px;
  padding: 0.8vw 1.8vw; 
  bottom: 5%;
}




/* page15 */
#page15{
  height: 70vh;
  width: 100vw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background-color: black;
  color: #fff;
}
#page15 h4{
  font-size: 1.3vw;
  top: 20%;
  position: absolute;
  width: 50%;
  color: #fff;
  font-weight: 500;
  text-align: center;
}
#page15 h1{
  position: absolute;
  font-size: 4vw;
  width: 50%;
  padding-bottom: 10vw;
}


#page15 p{
  position: absolute;
  padding-top: 4vw;
  font-size: 1.3vw;
  line-height: 1.8vw;
  width: 50%;
  color: #a5a3a3;
  bottom: 10%;
}

#page15 p span{
  color: #ffffff;
}



/* page16 */

#page16{
  position: relative;
  height: 100vh;
  width: 100vw;
  top: 0%;
}

#page16 canvas{
  position: relative;
  max-width: 100vw;
  max-height: 100vw;
}



/* page17 */
#page17{
  position: relative;
  height: 30vh;
  width: 100vw;
  background-color: rgb(0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  text-align: center;
}
#page17 h1{
  font-size: 2vw;
  padding-bottom: 3vw;
}
#page17 h4{
  font-size: 1.4vw;
  font-weight: 500;
  line-height: 1.7vw;
  color: #918e8e;
}
#page17 h4 span{
  color: #fff;
}





/* page 18 */

#page18{
  position: relative;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.961);

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

#page18 #center{
   position: absolute;
   height: 40%;
   width: 25%;
   bottom: 18%;
   right: 25%;
   color: #fff;
}

#page18 #center h1{
  font-size: 1.7vw;
  padding-bottom: 3vw;
}
#page18 #center p{
  font-size: 1.2vw;
  width: 100%;
  color: #918e8e;
}
#page18 #center p span{
  color: #fff;
}




/* page 19 */

#page19{
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: black;
}
#page19 img {
  padding-bottom: 20vw;
}
#page19 #troff{
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
  width: 60%;
  z-index: 99;
}
#page19 #tron{
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
  width: 60%;
}
  
#page19 #text{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* background-color: green; */
  bottom: 10%;
  width: 35%;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  color: #fff;
}

#page19 h1{
  font-size: 2vw;
  padding-bottom: 3vw;
  
}
#page19 p{
  font-size: 1.2vw;
  padding-bottom: 3vw;
  color: #918e8e;
}
#page19 p span{
  color: #fff;
}




/* page 21 */
#page20{
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: black;
}
#page20 img {
  padding-bottom: 20vw;
}
#page20 #troff{
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
  width: 60%;
  z-index: 99;
}
#page20 #tron{
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
  width: 60%;
}
  
#page20 #text{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* background-color: green; */
  bottom: 10%;
  width: 35%;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  color: #fff;
}

#page20 h1{
  font-size: 2vw;
  padding-bottom: 3vw;
  
}
#page20 p{
  font-size: 1.2vw;
  padding-bottom: 3vw;
  color: #918e8e;
}
#page20 p span{
  color: #fff;
}




/* page21 */
#page21{
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: black;
}

#page21 img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: 0;
}

#page21 #text{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  bottom: 10%;
  width: 35%;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  color: #fff;
}

#page21 h1{
  font-size: 2vw;
  padding-bottom: 3vw;
  
}
#page21 p{
  font-size: 1.2vw;
  padding-bottom: 3vw;
  color: #918e8e;
}
#page21 p span{
  color: #fff;
}

#page21 button{
  background-color: white;
  border: none;
  color: black;
  font-size: 1.2vw;
  font-weight: 400;
  z-index: 999;
  border-radius: 50px;
  padding: 0.8vw 1.8vw; 
  bottom: 5%;
 
}

#page21 button:hover{
  background-color: #e4e4e4;
  color: black;
}

#page22{
  position: relative;
  height: 20vh;
  width: 100vw;
  background-color: #222223;
}
#page22 footer{
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#page22 footer a{
  color: #cacaca;
  text-decoration: none;
  font-size: 1.3vw;
  font-weight: 500;
}
#page22 footer a:hover{
  color: #fff;
  text-decoration: underline;
  
}