@font-face {
    font-family: 'nb';
    src: url(./NBInternationalProBoo.ttf) format('truetype');
  }
  @font-face {
    font-family: 'rejoy';
    src: url(./Rejouice-Headline.ttf) format('truetype');
  }
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:'nb';
    /* color:white; */
}
html,
body {
    height:100%;
    width: 100%;
}


.page1{
    height: 100vh;
    width:100%;
    background-color: #dadada;
    position: relative;
}
.cursor{
    height: 7.5vw;
    width:7.5vw;
    background-color: #ff6038;
    border-radius: 50%;
    z-index:9;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%,-50%);
}
.cursor h5{
    font-size: 1.5;
    font-weight: 500;
}
.page1 video {
    height: 100%;
    width: 100%;
    object-fit:fill ;
    position: absolute;
}
.page1-content{
    height: 100%;
    width:100%;
    /* background-color: rgb(23, 22, 22); */
    position: relative;
    z-index:10;
    color:#fff;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content:space-between ;
    /* padding-bottom: 5vw; */
}
nav {
    /* height: 100px; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3vw 3vw;
    width: 100%;
    /* background-color: red;  */
}
nav h3 {
    font-size:1.5vw ;
    font-weight: 100;
}
nav h4 {
    font-size: 1.4vw;
    font-weight: 100;
}

.page1-content h1{
    font-family: 'rejoy';
    font-size: 27vw;
    font-weight: 100;
    line-height:27vw ;
}

.page1-content h1 span {
    font-family:'rejoy';
    display: inline-block;
}

.page2{
    height: 100vh;
    width:100%;
    /* background-color: beige; */
    position: relative;
    padding: 5vw 2.8vw;
}
.page2 .top{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 1.2vw;
    margin-bottom: 1vw;
    /* border-bottom: 1px solid #00000092; */
}
.page2 hr{
    color: #00000092;
}
.page2 .top h2{
    font-size: 1.7vw;
    font-weight: 500;
    width: 26%;
}

.page2 .top h3{
    font-size: 1.7vw;
    font-weight: 500;
}

.elem {
    overflow: hidden;
}

.elem h1{
    /* display: inline-block; */
    font-size: 4.5vw;
    font-weight: 500;
    position: relative;
}
.elem h1 span {
  display: inline-block;
}
.page3{
    min-height: 100vh;
    width:100%;
    position: relative;
    padding: 3vw;
}
.page3-top{
    /* background-color: #ff5f38; */
    text-align: center;
}

.page3-top h4{
    margin-bottom: 1vw;
    font-size: 1vw;
    font-weight: 500;
}

.page3-top h4 .models {
    font-size: 0.7vw;
    background-color: #000;
    color: #fff;
    padding: 4px 10px;
    border-radius: 10px;
}
.page3-top h4 .arrow img{
    margin-left:0.7vw;
    width: 1.2vw;
    margin-bottom: -0.5vw;
    opacity: 0.55;
}
.page3-top h2{
    font-size: 5vw;
    font-weight: 500;
}
.page3-top h2 a{
  color: #000;
  text-decoration:underline 4px ;
}
.box-up{
    margin-top: 8vw;
    height: 5vh;
    width: 100%;
    /* border:2px solid black; */
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.box-up h4 {
    font-size: 2vw;
    font-weight: 500;
}
.box-up h4 img {
    width: 1.9vw;
    opacity: 0.777;
    margin-right: 0.6vw;
    margin-bottom: -0.3vw;
}
.page3-elements{
    height: 75vh;
    width: 100%;
    /* background-color: aqua; */
    display: flex;
    align-items: center;
    margin-top: 0.5vw;
    justify-content: space-between;
}

.page3-elements .box{
    height: 100%;
    width:32.5%;
    /* background-color: bisque; */
    position: relative;
}
.page3-elements .box video{
    height: 100%;
    width:100%;
    object-fit: cover;
    object-position: center;
}
.page3-elements .box img {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transform: all linear 0.8s;
}
.page3-elements .box:hover img {
    opacity: 0;
}

.page4{
    height: 100vh;
    width:100%;
    /* background-color: beige; */
    position: relative;
    padding: 5vw 2.8vw;
    margin-top: 8vh;
}
.page4-top{
    padding-bottom: 1.2vw;
    overflow: hidden;
}
.page4-top span{
    font-size: 2vw;
    font-weight: 300;
    display: inline-block;
}

.page4 .page4-mid {
    margin-top: 1vw;
    overflow: hidden;
}
.page4-mid h1{
    font-size: 4.5vw;
    font-weight: 500;
}
.page5{
    height: 100vh;
    width: 100%;
    position: relative;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    /* background-color: #000; */
}
.page5 video{
    height: 100%;
}
.page5-content{
  height: 100%;
  width:100%;
  /* background-color: rgb(18, 225, 115); */
  position: relative;
  z-index:8;
  color:#000000;
  display: flex;
  align-items: center;
  flex-direction: column;
  /* justify-content:space-between ;  */
   padding-bottom: 5vw;
}
.page5 svg{
    position: absolute;
    height: 65%;
    margin-top: 12vh;
}
.cursor-page5 {
  height: 7.5vw;
    width:7.5vw;
    background-color: #000000da;
    border-radius: 50%;
    z-index:9;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    color:#fff;
    transform: translate(-50%,-50%);
}
.page5-content h1{
  position: absolute;
  z-index:11;
  margin-top:38vh;
  font-size: 4vw;
  font-weight: 200;
}
.page5-content h4{
  position: absolute;
  z-index:11;
  margin-top:47vh;
  font-size: 1.5vw;
  font-weight: 200;
}
.page6{
    height: 100vh;
    width: 100%;
    padding:4vw 0;
    position: relative;
}
.page6-top h1{
    font-size: 10vw;
    font-family: rejoy;
    font-weight: 100;
    border-bottom: 1px solid #000;
    /* background-color: #ff5f38; */
    width: 96%;
    margin-left: 2%;
}
.swiperdiv{
    height: 60vh;
    width: 100%;
    position: relative;
    margin-top: -5%;
    /* background-color: violet; */
}
.swiper {
    width: 130%;
    height: 100%;
  }

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

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

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

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

  .page7{
    height: 60vh;
    width:100%;
    /* background-color: rgb(26, 198, 69); */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .page7 h4{
    font-size: 1.2vw;
    font-weight: 100;
    opacity: 0.777;
  }

  .page7 h4 img {
    width:1.5vw;
    margin-left: 0.7vw;
    margin-bottom: -0.5vw;
  }
  .page7 h2{
    font-size: 5vw;
    padding: 2vh 0;
    font-weight: 100;
  }
  .page7 h2 a{
    color: #000;
    text-decoration:underline 4px ;
  }
  .page8{
    height: 100vh;
    width:100%;
    background-color:#000;
    position: relative;
    color: #fff;
    display: flex;
    flex-direction: column;
  }
  .page8 .page8-top{
    height: 30vh;
    width: 100%;
    display: flex;
    /* align-items:flex-start; */
    justify-content: space-between;
    margin-left: 2vw;
  }
  .page8-top .top-left h2{
    font-size: 2vw;
    font-weight: 200;
    opacity: 0.777;
    margin-top: 1vw;
  }
  .page8-top .top-left button{
    font-size: 1.5vw;
    font-weight: 200;
    opacity: 0.777;
    border-radius: 20px;
    width: 8vw;
    height: 7vh;
    background-color: #000;
    color: #fff;
    border-color: #fff;
    margin-top: 1vw;
  }
  .page8-top .top-right{
    display: flex;
    margin-right: 5vw;
    margin-top: 1vw;
    opacity: 0.777;
  }
  .page8-top .top-right .first-list{
    margin-right: 6vw;
    list-style: none;
  }
  .page8-top .top-right .second-list{
    list-style: none;
  }
  .page8-mid{
    height: 30vh;
    width: 100%;
    margin-top: 10vw;
    display: flex;
    justify-content: space-between;
  }
  .page8-mid .mid-left h4 {
    font-size: 1.5vw;
    font-weight: 200;
    opacity: 0.777;
    margin-top: 1vw;
    margin-left: 2vw;
  }
  .page8-mid .mid-right{
    display: flex;
    justify-content: space-between;
    width: 25vw;
    margin-right: 2.5vw;
    font-size: 1.5vw;
    font-weight: 200;
    opacity: 0.777;
  }
  .page8 h1{
    font-family: 'rejoy';
    font-size: 30vw;
    font-weight: 100;
    line-height:27vw ;
    margin-bottom: 5vw;
  }
  .page8 h1 span {
    display: inline-block;
  }
  .page9{
    height: 40vh;
    width:100%;
    /* background-color: aqua; */
  }