@font-face {
    font-family: nb;
    src: url(SuisseIntl-Regular);
}

@font-face {
    font-family: rejoy;
    src: url(./SuisseIntl-Light.ttf);
}







* {

    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

html,
body {

    height: 100%;
    width: 100%;
    background-color: black;
}

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

#page1 video {

    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
}

#cursor {
    height: 7vw;
    width: 7vw;
    background-color: #FF5F3F;
    border-radius: 50%;
    position: fixed;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cursor h5 {
    font-size: 1.2vw;
    font-weight: 500;
    color: white;
}


#page1-content {

    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.153);
    position: relative;
    z-index: 10;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 5vw;

}

nav {


    /* height: 100px; */
    width: 100%;
    /* background-color: black; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2vw 3vw;
}

nav h4 {


    font-size: 1.4w;
    font-family: nb;
    font-weight: 100;
}

#page1-content h1 {


    /* font-family:"rejoy"; */
    font-family: "nb";
    font-size: 27vw;
    font-weight: 100;
    line-height: 27vw;
    gap: 5px;
    color: white;

}

#page1-content h1 span {

    font-family: "rejoy";
    font-weight: 70;
    gap: 5px;
    display: inline-block;
}


/* 
#page2 {

     height: 100vh;
    width: 100%;
    background-color: bisque;
    
    margin: 40px auto;
    background: #fff;
    box-shadow: 0 0 30px 0 rgba(23, 23, 23, 0.07);
    padding: 48px 40px 40px 40px;
    border-radius: 8px;
    position: relative;
}

.header-top {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    color: #5c5c5c;
    margin-bottom: 28px;
}

.header-top .location {
    font-size: 15px;
    color: #666;
    align-self: flex-start;
    letter-spacing: 0.5px;
}

main h1 {
    font-size: 2.1rem;
    font-weight: 400;
    line-height: 1.28;
    margin: 30px 0 0 0;
    letter-spacing: -0.3px;
} */

#page2 {
    height: 50vh;
    width: 100%;
    margin: 40px auto;
    background: black;

    padding: 48px 40px 40px 40px;
    border-radius: 8px;
    position: relative;
}

.header-top {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    color: white;
    margin-bottom: 12px;
    font-family: nb;
    border-bottom: 1px solid white;
    padding: 2vw;
    margin-bottom: 2vw;
}

.header-top .location {
    font-size: 15px;
    color: white;
    align-self: center;
    letter-spacing: 0.5px;
}



main h1 {
    font-size: 2.1rem;
    font-weight: 400;
    line-height: 1.28;
    margin: 0 0 0 0;
    letter-spacing: -0.3px;
    font-family: rejoy;
    color: #fff;
}


#page3 {

    min-height: 100vh;
    width: 100%;
    position: relative;
    padding: 3vw;
    background-color: black;

}

#page3-top {
    /* background-color: red; */
    text-align: center;
}

#page3-top h4 {

    margin-bottom: 1vw;
    font-size: 1vw;
    font-weight: 1vw;
    font-family: rejoy;
    color: white;
}

#page3-top h4 span {


    font-size: 0.7vw;
    font-weight: 1vw;
    background-color: black;
    color: white;
    padding: 2px;
    padding-right: 3px;
    padding-left: 3px;
    border-radius: 5px;
    font-family: rejoy;
}

#page3-top h2 {


    font-size: 3vw;
    font-weight: 25;
    background-color: black;
    color: #fff;
}


#page3-elements {


    height: 75vh;
    width: 100%;
    background-color: black;
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 9vw;
    color: white;
}

#page3-elements .box {



    height: 100%;
    width: 32.5%;
    position: relative;


}

#page3-elements .box video {



    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;

}

#page3-elements .box img {

    position: absolute;
    height: 101%;
    width: 101%;
    object-fit: cover;
    transition: all linear 0.7s;


}

#page3-elements .box:hover img {



    opacity: 0;


}


#info {

    margin-top: 7vw;
    color: #fff;

}


#page4 {

    margin: 500;
    height: 100vh;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

#page4 video {


    height: 100%;
}

#page4 svg {

    position: absolute;
    height: 60%;

}


#page5 {

    height: 100vh;
    width: 100%;
    padding: 4vw 0;
    position: relative;
    margin: 500;
}

#page5 h1 {



    font-size: 7vw;
    font-family: rejoy;
    border-bottom: 1px solid white;
    color: white;


}

#swiperdiv {

    height: 60vh;
    width: 100%;

}


.swiper {
    width: 120%;
    height: 100%;
    margin-top: 6vw;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #444;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
}

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

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


#loader {


    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    background-color: black;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: "nb";
    font-size: 2vw;
    font-weight: 2vw;
    gap: 10px;
}

#page1-content img {


    height: 100vh;
    width: 100%;
    object-fit: cover;
    z-index: 10;
}

#page1-content nav {

    z-index: 9;
}