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

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


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

html body {
    height: 100%;
    width: 100%;
}
 
#page1{
        height: 100vh;
        width: 100%;
        /* background-color: red;  */
        position : relative;
}

#cursor{
    height:2vw;
    width:2vw;
    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%;
     /* background-color: coral;  */
    position: relative;
    z-index: 10;
    color: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 5vw;
}

nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* background-color: blueviolet; */
    padding: 3vw 3vw;
}

nav h3{
    font-size: 1.4vw;
    font-weight: 100;
}

nav h4{
    font-size: 1.4vw;
    font-weight: 100;
}

#page1-content h1{
 font-family: yjh;
 font-size: 11vw;
 font-weight: 100;
 line-height: 11vw;

}

#page1-content h1 span{
    display: inline-block;
    font-family: yjh;
}

/*  */

#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-top h3{
    font-size: 1.7vw;
    font-weight: 500;
    width: 26%;
}

#page2-top h4{
    font-size: 1.7vw;
    font-weight: 500;
}

.elem h1{
    font-size: 4.2vw;
    font-weight: 500;
}


#page3{
    min-height: 100vh;
    width: 100%;
    background-color: beige;
    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: black;
    color: #fff;
    padding: 4px 10px;
    border-radius: 10px;
}

#page3-top h2{
    font-size: 4vw;
    font-weight: 500;
}

#page3-element{
    height: 70vh;
    width: 100%;
    /* background-color: #ff5f38; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8vw;

}

#page3-element .box{
    height: 100%;
    width: 32.5%;
    position: relative;
   /* background-color: darkred; */
}


#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 ease 0.5s;
}

#page3-element .box:hover img{
    opacity: 0;
}



#page4{
    height: 100vh;
    width: 100%;
    background-color: beige;
    position: relative;
    padding: 5vw 2.8vw;
}

#page4-top {

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 1.2vw;
    margin-bottom: 1vw;
    border-bottom: 1px solid #00000092;
}

#page4-top h3{
    font-size: 1.7vw;
    font-weight: 500;
    width: 26%;
}

#page4-top h4{
    font-size: 1.7vw;
    font-weight: 500;
}

.elem h1{
    font-size: 4.2vw;
    font-weight: 500;
}


#page5 {
    height: 100vh;
    width: 100%;
     background-color: beige; 
    position: relative;
    padding: 5vw 2.8vw;
}

/* #page5 video{
    height: 100%;
}
#page5 svg {
    position: absolute;
    height: 65%;
}
 */

/*  */

#page6{
    height: 100vh;
    width: 100%;
    background-color: beige;
    font-family: yjh;
    position: relative;
    padding: 5vw 2.8vw;
}

#page6-top {

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 1.2vw;
    margin-bottom: 1vw;
    border-bottom: 1px solid #00000092;
}

#page6-top h3{
    font-size: 1.7vw;
    font-weight: 500;
    width: 26%;
}

#page6-top h4{
    font-size: 1.7vw;
    font-weight: 500;
}



.elem h1{
    font-size: 4.2vw;
    font-weight: 500;
}

#loader{
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
  background-color: #000;
    z-index: 99;
display: flex;
align-items: center;
justify-content: center;
color: beige;
gap :  20px;
}

#loader h3{
    font-size: 2vw;
}


#page8{
    height: 100vh;
    width: 100%;
    background-color: beige;
    position: relative;
    padding: 5vw 2.8vw;
    background-color: beige;
}



#page9{
    
    height: 100vh;
    width: 100%;
    background-color: beige;
    position: relative;
    padding: 5vw 2.8vw;
    background-color: beige;
}

#page10 .custom-jumbotron {
    background-color:black; /* Replace with the desired color */
   color: beige; /* Adjust text color if necessary */
    border-radius: 10px;
    padding: 2rem;
}

#page11{
    height: 100vh;
    width: 100%;
    background-color: beige;
    position: relative;
    padding: 5vw 2.8vw;
    background-color: beige;
}

#page{
    
    height: 100vh;
    width: 100%;
    background-color: beige;
    position: relative;
    padding: 5vw 2.8vw;
    background-color: beige;
}