@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300&family=Kdam+Thmor+Pro&family=Montserrat:wght@800;900&family=Space+Grotesk:wght@600&display=swap');

* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
  /* color: #fff; */
  /* font-family: 'Jost', sans-serif; */
}

html,
body {
  height: 100%;
  width: 100%;
}

*::selection {
  background-color: #000;
  color: #fff;
}

body::-webkit-scrollbar {
  display: block;
  height: 50px;
  width: 10px;
  background: transparent;
}

body::-webkit-scrollbar-thumb {
  background-color: #fff;
  border-radius: 50px;

}

#main {
  position: relative;
  overflow: hidden;
  background-color: #0D34C4;
}

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

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

#page1>nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 50px 70px;
  position: absolute;
  height: 10vh;
  width: 100vw;

}

#page1>nav>img {
  height: 80px;
  margin-left: -28px;
  margin-top: .4vw;
  width: 7.3%;
}

#right-nav>button {
  margin-right: 10px;
  padding: 8px 20px;
  border-radius: 50px;
  background-color: transparent;
  border: 1pt solid #fff;
  color: #fff;
  font-family: 'Jost', sans-serif;
  font-size: 15px;
}

.bottom-page1 {
  position: absolute;
  bottom: 5%;
  height: 55vh;
  width: 50vw;
  left: 10%;
}

.bottom-page1>h1 {
  font-family: 'Jost', sans-serif;
  font-size: 6vw;
  font-weight: 550;
  line-height: 1;
  color: #fff;
}

.bottom-page1-inner {
  position: absolute;
  bottom: 0%;
  height: 55%;
  width: 100%;
}

.bottom-page1-inner {

  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: 'Jost', sans-serif;
  /* padding: 00px 120px; */
}

.bottom-page1-inner>button {
  margin-left: 50px;
  padding: 13px 40px;
  border: none;
  border-radius: 50px;
  background-color: #fff;
  color: #0b48ed;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Jost', sans-serif;

}

.bottom-page1-inner>h4 {
  font-size: 1.7vw;
  font-weight: 100;
  color: #fff;
}



/**:::::::::::::::::       Page 2      ::::::::::::::::*/

#page2 {
  display: flex;
  align-items: start;
  font-family: 'Jost', sans-serif;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  position: relative;
  padding: 0vw 8vw;
  color: #fff;
  background-color: #0a3cce;
  z-index: 1;
}

#page2>h2 {
  margin-bottom: 3vw;
  font-weight: 100;
}

#page2>h1 {
  font-weight: 600;
  line-height: 1.2;
  width: 95%;
  font-size: 4vw;
  color: #dadada69;
}

/* * *::::::::::         Page 3        ::::::::::::::::::: */ */

#page3 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #0F52FF;
  z-index: 0;
}

#page3>canvas {
  max-height: 100vh;
  max-width: 100vw;
  position: relative;
}

/* *::::::::::         Page 4        ::::::::::::::::::: */

#page4 {
  display: flex;
  align-items: start;
  font-family: 'Jost', sans-serif;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  position: relative;
  padding: 0vw 9vw;
  color: #fff;
  /* background-color: #0F35C5; */
  z-index: 1;
}

#page4>h2 {
  margin-top: -6vh;
  margin-bottom: 2vh;
  font-weight: 100;
}

#page4>h1 {
  font-weight: 600;
  line-height: 1.2;
  width: 95%;
  font-size: 4vw;
  color: #dadada69;
}

/* *::::::::::         Page 5        ::::::::::::::::::: */

#page5{
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: transparent;
}
#page5>canvas{
  position: relative;
  max-width: 100vw;
  max-height: 100vh;
}


/* *::::::::::         Page 6        ::::::::::::::::::: */

#page6 {
  display: flex;
  align-items: start;
  font-family: 'Jost', sans-serif;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  position: relative;
  padding: 0vw 9vw;
  color: #fff;
  background-color: transparent;
  z-index: 1;
}

#page6>h2 {
  margin-top: -6vh;
  margin-bottom: 2vh;
  font-weight: 100;
}

#page6>h1 {
  font-weight: 600;
  line-height: 1.2;
  width: 95%;
  font-size: 4vw;
  color: #dadada69;
}


/* *::::::::::         Page 7        ::::::::::::::::::: */
#page7{
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #0D34C4;
}
#page7>canvas{
  position: relative;
  max-width: 100vw;
  max-height: 100vh;
}
.page7-cir{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 9;
  height: 15vw;
  width: 15vw;
  border-radius: 50%;
  border: 1px solid #fff;
}
.page7-cir-inner{
  height: 70%;
  width: 70%;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid #fff;
}
#heading{
  margin-top: 50%;
  text-align: center;
  font-size: .8rem;
  width: 100%;
  color: #fff;
}

/* *::::::::::         Page 8        ::::::::::::::::::: */


#page8{
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #0a3cce;
}
#page8>video{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.page8-bottom{
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: a;
}
.page8-bottom>h1{
  color: #fff;
  margin-bottom: 2vw;
  font-size: 5vw;
  font-weight: 100;
}
.page8-bottom>button{
  padding: 20px 30px;
  border-radius: 50px;
  border: none;
  background-color: #fff;
  color: #0a3cce;
}

/* *::::::::::         Page 9        ::::::::::::::::::: */


#page9{
  display: flex;
  position: relative;
  height: 100vh;
  width: 100%;
  background-color: #0a3cce;
}
.left9{
  height: 100%;
  width: 38%;
  position: relative;
  font-family: 'josh',sans-serif;
}
.left9>h1{
  position: absolute;
  top: 20%;
  left: 10rem;
  font-size: 5.8rem;
  font-weight: 500;
  color: #fff;
 
  
}
.right9{
  height: 100%;
  width: 60%;
  position: relative;
}
.right9-center{
  height: 70%;
  width: 85%;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-image: url(https://thisismagma.com/wp-content/uploads/2023/04/magma.wp2.cubdev.com-home-1.jpeg);
  background-size: cover;
  left: 4%;
}


/* *::::::::::         Page 10        ::::::::::::::::::: */


#page10{
  position: relative;
  height: 100vh;
  width: 100%;
  background-color: #0a3cce;
}
.right10{
  height: 100%;
  width: 60%;
  position: relative;
  left: 40%;
}
.right10-inner{
  display: flex;
  align-items: start;
  flex-direction: column;
  height: 33.3%;
  width: 100%;
  font-family: 'josh',sans-serif;
  color: #fff;
}
.right10-inner>h1{
  font-size: 1.5vw;
  font-weight: 500;
}
.right10-inner>p{
  color: #ffffff8e;
  margin-top: 2vw;
  font-size: 1.4vw;
  width: 85%;
  line-height: 1.5;
}


/* *::::::::::         Page 11        ::::::::::::::::::: */

#page11{
  position: relative;
  height: 150vh;
  width: 100%;
  background-color: #FFFFFF;
  font-family: 'jost',sans-serif;
}
#page11>h1{
  position: absolute;
  top: 12%;
  left: 10%;
  /* line-height: 1; */
  font-size: 5vw;
  /* width: 4rem; */
  color: #000;
  font-weight: 10;
}
.page11-inner{
  display: flex;
  top: 27%;
  left: 5%;
  position: relative;
  margin-bottom: 2.5vw;
  height: 20%;
  width: 90%;
}
.left11{
  position: relative;
  height: 100%;
  width: 40%;
  left: 5%;
  border-radius: 10px;
  overflow: hidden;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.left11>img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.right11{
  padding-top: 6vw;
  line-height: 1.8;
  left: 48%;
  position: absolute;
  height: 100%;
  width: 50%;
}
.right11>h4{
  color:  #0000007a;
  font-weight: 100;
}
.right11>h1{
  color: #000;
  font-size: 1.5vw;
  font-weight: 100;
}


/* *::::::::::         Page 12        ::::::::::::::::::: */

#page12{
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #02268e;
}
.page12-inner{
  position: absolute;
  top: 20%;
  right: 17%;
  color: #fff;
  line-height: 1.6;
  font-family: 'jost', sans-serif;
}
.page12-inner>h1{
  font-size: 6.7vw;
  font-weight: 500;
}
.page12-inner>p{
  font-size: 1.3vw;
  color: #ffffffb1;
}

/* *::::::::::         Page 13        ::::::::::::::::::: */

#page13{
  position: relative;
  height: 60vh;
  width: 100%;
  background-color: #0F0F17;
  color: #fff;
  font-family: 'jost', sans-serif;
  padding: 4vw 10vw;
}
#page13>h1{
  font-size: 7.1vw;
  line-height: 1;
  font-weight: 100;
}
#page13>button{
  padding: 18px 45px;
  border: none;
  background-color: #0a3cce;
  color: #fff;
  border-radius: 50px;
  margin-top: 2vw;
  cursor: pointer;
}


/* *::::::::::         Page 14        ::::::::::::::::::: */


#page14{
  position: relative;
  height: 50vh;
  width: 100vw;
  background-color: #0F0F17;
}
.page14-inner{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 130px;
  font-family: 'jost', sans-serif;
  height: 30%;
  width: 100%;
  color: #fff;
  border-top: .5px solid #ffffff5c;
  border-bottom: .5px solid #ffffff48;
}
.page14-inner>i{
  font-weight: 100;
  font-size: 2.4vw;
  position: relative;
  z-index: 9999;
}
.page14-inner>h1{
  font-size: 3vw;
  font-weight: 100;
  position: relative;
  z-index: 9999;
}

.center14{
  height: 0%;
  width: 100%;
  background-color: #0a3cce;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  transition: all ease .5s;
}

.page14-inner:hover .center14{
  height: 100%;
}

/* *::::::::::         Page 15        ::::::::::::::::::: */
/* 
#page15{
  min-height: 80vh;
  width: 100%;
  color: #fff;
  background-color:  #0F0F17;
} */