@font-face {
    font-family: nb;
    src: url(./NBInternationalProBoo.ttf);
}

@font-face {
    font-family:re;
    src: url(./Rejouice-Headline.ttf);
}

* {
    margin:0px;
    padding:0px;
    box-sizing:border-box;
    font-family: 'nb';
}

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

.loader{
    height: 100%;
    width:100%;
    position:fixed;
    top:0;
    background-color: #000;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    color:#fff;
    gap:10px;
  }
  .loader h3{
    font-size: 2vw;
  }

.page1{
    height:100vh;
    width:100%;
    background-color:#212428;
    position: relative;
}
.cursor{
    height: 7.5vw;
    width: 7.5vw;
    background-color: #ff5f38;
    border-radius: 50%;
    position: fixed;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%,-50%);
}
.cursor h5{
    font-size: 1.15vw;
    font-weight: 500;
}
.page1 video{
    height:100%;
    width:100%;
    object-fit: cover;
    position: absolute;
}
.page1-content{
    height: 100%;
    width:100%;
    position: relative;
    z-index: 10;
    color:#fff;
    display:flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
}
nav{
    display: flex;
    align-items: center;
    width:100%;
    justify-content: space-between;
    padding:3vw 3vw;
}
nav h3{
    font-size: 1.4vw;
    font-weight: 100;
}
nav h3{
    font-size: 1.4vw;
    font-weight: 100;
}
nav h4{
    font-size: 1.4vw;
    font-weight: 100;
}
.page1-content h1{
    font-family: re;
    font-size: 27vw;
    font-weight: 100;
    line-height: 20vw;
    margin-bottom: 10vh;
}
.page1-content h1 span{
    font-family: re;
    display:inline-block;
}
.page2{
    height: 100vh;
    width:94%;
    margin: auto;
}
.page2content{
    width:100%;
    position: relative;
    display:flex;
    justify-content: space-between;
    padding:15vh 4vh 5vh 4vh;
    border-bottom: 1px solid #212428;
    margin-bottom: 3vh;
}
.page2content h3{
    font-size: 1.7vw;
    font-weight: 100;
    color:#0e0e0e;
}
.page2content h4{
    font-size: 1.7vw;
    font-weight: 100;
    color:#0e0e0e;
}
.page2content{
    width:100%;
    position: relative;
    display:flex;
    margin-bottom: 5vh;
}
.elem h1{
    font-size: 3.6vw;
    font-weight: 400;
   text-align: left;
   text-indent: 100px;
   letter-spacing:2px;
}
.page3{
    min-height: 100vh;
    width: 100%;
    position: relative;
    padding: 3vw;
}
.page3-top{
    text-align: center;
}
.page3-top h4{
    margin-bottom: 1vw;
    font-size: 1vw;
    font-weight: 500;
}
.page3-top h4 span{
    font-size: 0.7vw;
    background-color: #000;
    color:#fff;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 10px;
}
.page3-top h2{
    font-size: 4vw;
}
.page3-element{
    height:90vh;
    width:100%;
    margin-top: 8vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.page3-element .box{
    height:100%;
    width:32.5%;
    position: relative;
}
.page3-element .box video{
    height:100%;
    width:100%;
    object-fit: cover;
    object-position: center;
}
.page3-element .box img{
    position: absolute;
    height: 100%;
    width:100%;
    object-fit: cover;
    transition: all linear 0.7s;
}
.page3-element .box:hover img{
    opacity: 0;
}
.page4{
    height: 100%;
    width:94%;
    margin: auto;
    position: relative;
}
.page4content{
    width:100%;
    position:relative;
    display:flex;
    justify-content: space-between;
    padding:15vh 4vh 2vh 4vh;
    border-bottom: 1px solid #212428;
    margin-bottom: 3vh;
}
.page4content h3{
    font-size: 1.7vw;
    font-weight: 100;
    color:#0e0e0e;
    letter-spacing: 1px;
}
.elem2{
    width:100%;
    margin-bottom: 15vh;
}
.elem2 h1{
    font-size: 3.6vw;
    font-weight: 400;
   text-align: left;
   text-indent: 100px;
}
.page4 .blur{
    display:flex;
    align-items: center;
    justify-content: center;
}
.page4 .blur video{
    height: 100%;
    opacity: 1;
}
.page4 svg{
    position: absolute;
    height: 55%;
    width:320px;
}
.page4 .blurtxt{
    position: fixed;
}
.blurtxt h2{
    font-size: 3vw;
    color:#fff;
    font-weight: 500;
}
.blurtxt h4{
    font-size: 1.3vw;
    font-weight: 100;
    color:#fff;
}
.elem3{
    width:100%;
  
    margin-bottom: 15vh;
}
.elem3 h1{
    font-size: 3.6vw;
    font-weight: 400;
   text-align: left;
   text-indent: 100px;
}

.page5{
    height: 100vh;
    width:100%;
    padding:4vw 0;
    position: relative;
}
.page5 h1{
    font-size: 10vw;
    font-size: re;
    font-weight: 100;
    border-bottom: 1px solid #0e0e0e;
    width: 96%;
    margin-left: 2%;
}
.swiperdiv{
    height:60vh;
    width:100%;
    position: relative;
    margin-top: -5%;
}

.swiper {
    width: 130%;
    height: 100%;
  }

  .swiper-slide {
  
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: space-evenly;
    align-items:flex-end;
  }

  .swiper-slide img {
    display: block;
    width: 19%;
    object-fit: cover;
  }

  .swiper {
    margin-left: auto;
    margin-right: auto;
  }