@import url("https://fonts.googleapis.com/css?family=Jost&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*::selection {
    background: black;
    color: white;
}

--root {
    --blue: #0a3cce;
    --blue1: #0b48ed;
}

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

#main {
    position: relative;
    overflow: hidden;
    background-color: #1137ca;
}

@font-face {
    font-family: a;
    src: url(./assets/jost-variable.ttf);
}

@font-face {
    font-family: b;
    src: url(./assets/KFOlCnqEu92Fr1MmEU9fBBc4.ttf);
}

@font-face {
    font-family: c;
    src: url(./assets/KFOmCnqEu92Fr1Mu4mxK.ttf);
}

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

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

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

#page1 > nav > img {
    margin-top: -1.7vw;
    width: 9%;
}

#right-nav > button {
    margin-right: 10px;
    padding: 10px 20px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: #083fdc;
    /* background-color: rgb(11, 60, 204); */
    color: #fff;
    font-family: a;
    font-size: 15px;
    z-index: 10;
}

.bottom-page1 {
    position: absolute;
    bottom: 4%;
    left: 8%;
    height: 45vh;
    width: 50vw;
    z-index: 10;
}

.bottom-page1 > h1 {
    font-family: Raleway;
    font-family: a;
    font-size: 6.5vw;
    font-weight: 100;
    line-height: 1;
    color: #fff;
}

.bottom-page1 .inner {
    position: absolute;
    bottom: 0%;
    height: 35%;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: a;
}

.bottom-page1 .inner button {
    padding: 18px 50px;
    border: none;
    border-radius: 50px;
    background-color: #fff;
    color: #0a3cce;
    font-size: 1rem;
    font-family: b;
}

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

#page2 {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    background-color: #0a3cce;
    color: #fff;
    font-family: a;
    font-weight: 100;
    position: relative;
    padding: 0 8vw;
}

#page2 h1 {
    width: 90%;
    font-size: 4vw;
    line-height: 1.1;
    font-family: a;
    font-weight: 100;
    color: #dadada70;
}
#page2 h2 {
    margin-bottom: 3vw;
    font-family: a;
    font-weight: 100;
}

#page3 {
    height: 100vh;
    width: 100vw;
    background-color: #1137ca;
}

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

#page4 {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    position: relative;
    background-color: #1137ca;
    font-family: a;
}

#page4 h3 {
    margin-left: 15vw;
    margin-bottom: 2vw;
    font-weight: 100;
    color: #fff;
}
#page4 h1 {
    margin-left: 15vw;
    width: 70%;
    font-size: 3vw;
    font-weight: 100;
    color: #dadada70;
}

#page5 {
    height: 100vh;
    width: 100vw;
    background-color: #1137ca;
}

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

#page6 {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    position: relative;
    background-color: #0a3cce;
    font-family: a;
}

#page6 h3 {
    margin-left: 15vw;
    margin-bottom: 2vw;
    font-weight: 100;
    color: #fff;
}
#page6 h1 {
    margin-left: 15vw;
    width: 70%;
    font-size: 3vw;
    font-weight: 100;
    color: #dadada70;
}

#page7 {
    height: 100vh;
    width: 100vw;
    background-color: #1137ca;
}

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

.page7-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    height: 30vw;
    width: 30vw;
    border: 1px solid #fff;
    border-radius: 50%;
}

.inner-circle {
    height: 70%;
    width: 70%;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid white;
}

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

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

.page8-bottom {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: a;
    font-family: "Jost";
}
.page8-bottom h1 {
    font-family: "Jost";
    color: #fff;
    margin-bottom: 2vw;
    font-size: 85px;
    font-weight: 400;
}

.page8-bottom button {
    font-family: "Jost";
    padding: 20px 65px;
    border-radius: 50px;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    border: none;
    background-color: #fff;
    color: #0a3cce;
}

#page9 {
    display: flex;
    position: relative;
    height: 100vh;
    width: 100vw;
    background-color: #0a3cce;
    display: flex;
    align-items: center;
    justify-content: center;
}

.left9 {
    position: relative;
    height: 100%;
    width: 30%;
}

.left9 h1 {
    position: absolute;
    top: 33%;
    right: 10%;
    transform: translateY(-50%);
    font-size: 95px;
    font-family: "Jost";
    font-weight: 300;
    letter-spacing: 0.5;
    color: #fff;
    line-height: 1;
}

.right9 {
    position: relative;
    height: 100%;
    width: 60%;
}

.right9-center {
    height: 65%;
    width: 90%;
    border-radius: 10px;
    position: absolute;
    top: 48%;
    left: 5%;
    transform: translateY(-50%);
    background-image: url(https://thisismagma.com/wp-content/uploads/2023/04/magma.wp2.cubdev.com-home-1.jpeg);
    background-size: cover;
}

#page10 {
    position: relative;
    height: 100vh;
    width: 100vw;
    background-color: #0a3cce;
}

.right10 {
    height: 100%;
    width: 62.5%;
    position: absolute;
    left: 37.5%;
    margin-left: 8px;
}

.inner10 {
    margin-top: -3rem;
    display: flex;
    align-items: start;
    flex-direction: column;
    height: 33.3%;
    width: 100%;
    font-family: a;
    color: white;
}

.inner10 h1 {
    font-size: 2vw;
}

.inner10 p {
    font-size: 1.3vw;
    width: 80%;
}

#page11 {
    position: relative;
    height: 120vh;
    width: 100vw;
    background-color: #fff;
    font-family: a;
}

#page11 > h1 {
    position: absolute;
    top: 5%;
    left: 10%;
    font-weight: 4vw;
    color: #000;
    font-weight: 100;
}

.inner11 {
    display: flex;
    position: relative;
    top: 15%;
    margin-bottom: 2vw;
    height: 25%;
    width: 100%;
}

.left11 {
    position: relative;
    height: 100%;
    width: 40%;
    left: 5%;
    border-radius: 10px;
    overflow: hidden;
}

.left11 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.right11 {
    padding-top: 3vw;
    position: absolute;
    left: 50%;
    color: #000;
    height: 100%;
    width: 50%;
    padding-right: 2rem;
}

.right11 h4 {
    font-weight: 100;
}

.right11 h1 {
    font-size: 2vw;
    font-weight: 200;
}

#page12 {
    position: relative;
    height: 100vh;
    width: 100vw;
    background-color: #02268e;
}

.page12-inner {
    position: absolute;
    top: 20%;
    right: 10%;
    color: white;
    font-family: a;
}

.page12-inner h1 {
    font-size: 5vw;
    font-weight: 100;
}

.page12-inner p {
    font-size: 1.3vw;
}

#page13 {
    position: relative;
    height: 50vh;
    width: 100vw;
    background-color: #000;
    color: white;
    font-family: a;
    padding: 7vw 10vw;
}

#page13 h1 {
    font-size: 5vw;
    line-height: 1;
    font-weight: 100;
}

#page13 > button {
    padding: 20px 30px;
    border: none;
    border-radius: 50px;
    background-color: #0a3cce;
    color: white;
    margin-top: 2vw;
    font-size: 20px;
}

#page14 {
    position: relative;
    height: 60vh;
    width: 100vw;
    background-color: #000;
}

.page14-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5vw;
    font-family: a;
    height: 33.3%;
    width: 100%;
    color: white;
    border-top: 0.5px solid #ffffff5c;
    border-bottom: 0.5px solid #ffffff5c;
    z-index: 100;
}

.page14-inner i {
    font-size: 2.4vw;
    font-weight: 100;
    position: relative;
    z-index: 1000;
}

.page14-inner h1 {
    font-size: 3vw;
    font-weight: 100;
    position: relative;
    z-index: 1000;
}

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

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