*{
    margin:0;
    padding:0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-family: 'Plain Light';
    color:#fff;
}

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

body{
    overflow-x: hidden;
}

#crsr{
    height:2.3vw;
    border-radius: 50%;
    width: 2.3vw;
    border: 1px solid #ffffffc8;
    position: fixed;
    z-index:999;
    mix-blend-mode:difference;
    -webkit-transform: translate(15%,-32%);
        -ms-transform: translate(15%,-32%);
            transform: translate(15%,-32%);
}

#loader{
    height:100%;
    width:100%;
    position: fixed;
    z-index: 999;
    background-color: #000000;
    padding:25vh 10vw;  
}

.line{
    /* background-color: red; */
    height:-webkit-fit-content;
    height:-moz-fit-content;
    height:fit-content;
    overflow:hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack:start;
        -ms-flex-pack:start;
            justify-content:flex-start;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    gap:3vw;
}

#l1p1{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    gap:1vw;
}

#l1p1 h5,h6{
    font-size:3vw;
    font-weight:100;
    font-family: 'silk serif'
}

#l1p1 h5{
    width:5vw;
    text-align:right;
}


.line h1{
    font-size:6.5vw;
    text-transform: uppercase;
    font-weight:900;
}

.line h2{
    font-size:5vw;
    text-transform: uppercase;
    font-weight:900;
    opacity: 0;
    -webkit-animation-duration:2s;
            animation-duration:2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}

#main{
    background-color: #030303;
    position: relative;
}

#page1{
    height:100vh;
    width:100%;
    background-color: #151515;
    margin-bottom:20vh;
    
}

#page1 #nav{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding:4.3vw 5.5vw;
}

#nav-part2{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap:3vw;
}

#nav-part2 h4{
    font-size:1.2vw;
    font-weight:400;
}

.hero{
    /* background-color: red; */
    width: 72%;
    margin-left:28%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    /* overflow:hidden; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    z-index:999;
    position: relative;
}

.hero:nth-child(2){
    margin-top:10vh;
}

.hero h1{
    font-size:7.3vw;
    text-transform: uppercase;
    line-height:7.3vw;
    letter-spacing: 0.3vw;
    font-weight:600;
}

#hero3{
    position: relative;
    z-index:999;
}

#flag{
    height: 25vw;
    position: absolute;
    top:0;
    left:0;
    opacity:0;
    -webkit-transform:translate(-50%,-50%);
        -ms-transform:translate(-50%,-50%);
            transform:translate(-50%,-50%);
}

#hero1 h1:before{
    content: "01";
    font-weight:100;
    left:-14%;
    top:-18%;
    position:absolute;
    font-size:3vw;
    font-family: 'silk serif';
}

.hero h2{
    font-size:7.3vw;
    text-transform: uppercase;
    line-height:7.3vw;
    letter-spacing: 0.3vw;
    font-weight:600;
    border-bottom:0.5vw solid #fff;
    padding-bottom:0.8vw;
    -webkit-transition:all ease 0.3;
    -o-transition:all ease 0.3;
    transition:all ease 0.3
}

.hero h2:hover{
    -webkit-text-stroke: 1px #fff;
    color:transparent;
    font-weight:500;
    border-bottom:0.5vw solid #ffffff00;
    
}

#page2{
    height:100vh;
    width:100%;
    position: relative;
    background-color: #000;
    margin-top:1vw;
    padding-top:2vh ;
    margin-bottom:9vw;
}

#video-container{
    height:100vh;
    width:100%;
    padding:2vh;
    position:relative;
    }

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


#page3{
    min-height:200vh;
    width:100%;
    padding:0vw 2vw;
}

#page3 h1{
    font-size:6vw;
    text-transform: uppercase;
    margin-left:27vw;
}

#page3 .underline2{
    height:2px;
    width:60%;
    background-color:#fff;
    margin-top:4vw;
    margin-bottom: 4vw;
    margin-left:28vw;
}

#page3 #img-div-container{
    /* background-color: red; */
    padding: 1vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
    -webkit-box-align: start; 
        -ms-flex-align: start; 
            align-items: flex-start;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    position: relative;
}

.p3-circle1{
    height:25vw;
    width:25vw;
    margin-top:36vh;
    margin-left:03vw;
    border-radius:50%;
    border:2px solid #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.p3-circle2{
    height:25vw;
    width:25vw;
    border-radius:50%;
    position: relative;
    border:2px solid #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top:-5vh;
}

.p3-circle1 svg{
    height:30%;
}

.p3-circle2 svg{
    height:30%;
    rotate: -45deg;
}

.img-div{
    height:33vw;
    width:24vw;
    -ms-flex-negative:0;
        flex-shrink:0;
    position: relative;
    margin:2vw;
    /* background-color: blue; */
    overflow: hidden;
}

.img-div:nth-child(2){
    height:40vw;
    width:32vw;
}

#next{
    margin-top:30vh;
    width:28vw;
    height:36vw;
}

#next2{
    width:31vw;
    height:40vw;
}

.img-div img{
    -o-object-fit: cover;
       object-fit: cover;
    height:100%;
    width:100%;
    -o-object-position: center;
       object-position: center;
}

.circle-in{
    height:100%;
    border-radius: 50%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    scale:0;
    top:0;
    left:0;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    transition: all ease 0.3s;
    background-color: #fff;
    color:#000000;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: absolute;
}

.circle-in p{
    font-size: 1.1vw;
    -webkit-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    transition: all ease 0.5s;
    -webkit-transition-delay: 0.3s;
         -o-transition-delay: 0.3s;
            transition-delay: 0.3s;
    scale:0;
    opacity: 0;
    color: #000;
}

.p3-circle2:hover{
    .circle-in p{
        padding:35px;
    }
}
.p3-circle1:hover,.p3-circle2:hover{
    .circle-in{
        scale:1;
    }

    .circle-in p{
        scale: 1;
        opacity: 1;
    }
}



._canvas_container{
    z-index:999999 !important;
    pointer-events: none;
}

#page4{
    min-height:100vh;
    width:100%;
    /* background-color: #FFA63D; */
    position: relative;
    padding-top: 4vh;
}

#p4-content h1:before{
    content: "03";
    font-weight:100;
    left:-12%;
    position:absolute;
    font-size:3vw;
    font-family: 'silk serif';
}

#p4-content{
    width:60vw;
    margin-left:28%;
    position: relative;
}

#p4-content h1{
    font-size:6vw;
    text-transform: uppercase;
}

#p4-content .underline{
    height:2px;
    width:100%;
    background-color:#fff;
    margin:4vw 0;
}

#p4-content p{
    font-size:2.05vw;
    width:50%;
    margin-bottom:3vw;
}

#p4-pic{
    /* background-color: red; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* align-items:center; */
    /* justify-content: center; */
}

#p4-pic img{
    -o-object-fit: cover;
       object-fit: cover;
    height:40vw;
    width:48%;
}

#p4-pic p{
    font-size:1.2vw;
    height:100%;
    line-height: 1.8vw;
    width:38%;
    margin-left:2.5vw;
}

#p4-box{
    background-color: #3F7DF4;
    width:45vw;
    padding:4vw 4.2vw;
    position: relative;
    margin-top:-21vh;
    margin-left:45vh;
}

.box-elems{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    border-bottom:1px solid #fff;
    height: 4vw;
    margin-bottom: 0vw;
    margin-top: 1vw;
    /* background-color: red; */
    padding-top: 1vw;
    padding-bottom: 2vw;
}

.box-elems h4{
    font-weight:500;
     font-size:1.8vw;
     width:40%;
     margin-top: 2vw;
     margin-bottom: 2vw;
}

#p4-box .box-elems p{
    width:50%;
    font-size:1vw;
    font-weight: 400;
    margin-top:2vw;
    height:30%;
}

#page4 .underline2{
    margin-top:11vw;
    height:1.5px;
    margin-left:5.7vw;
    background-color: #fff;
    width:100%;
}

#page5{
    min-height:100vh;
    width:100%;
    padding:5vw 0vw;
    position:relative;
    margin-top:0vw;
}


.elem,.elem2{
    /* background-color: red; */
    white-space: nowrap;
    overflow-x: hidden;
    margin-top:-3vw;
    margin-bottom: 1vw;
}

.elem h1{
    /* font-size:2.85vw; */
    font-size:7vw;
    -webkit-text-stroke: 1px #fff;
    color: transparent;
    display:inline-block;
    text-transform: uppercase;
    font-weight:400;
    -webkit-animation-name:scroller;
            animation-name:scroller;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-duration:14s;
            animation-duration:14s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    margin-right:16px;
}

.elem2 h1{
    font-size:7vw;
    -webkit-text-stroke: 1px #fff;
    color: transparent;
    display:inline-block;
    text-transform: uppercase;
    font-weight:400;
    -webkit-animation-name:scroller;
            animation-name:scroller;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-duration:14s;
            animation-duration:14s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    margin-right:16px;
    animation-direction: reverse;
}

.elem span{
    font-family: 'silk serif';
    color:transparent;
    font-style:italic;
}

.elem2 span{
    font-family: 'silk serif';
    color:transparent;
    font-style:italic;
}

#footer-div{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

#footer{
    position: relative;
    margin-left:20vw;
    padding:2vw 6vw;
}

.blocks{
    margin-bottom:2vw;
}

.blocks h6{
    font-size:1.2vw;
    font-family: 'plain light';
    margin-bottom:2vw;
}

.blocks h5{
    font-size:1.5vw;
    font-weight:400;
}

#footer .underline2{
    margin:2vw 0;
    height:1px;
    /* margin-left:5.7vw; */
    background-color: #fff;
    width:100%;
}

#footer h1{
    text-transform: uppercase;
    font-size:5.6vw;
}

#footer h1:before{
    content: "04";
    font-weight:100;
    left:-2%;
    position:absolute;
    font-size:3vw;
    font-family: 'silk serif';
}
#copyright h6{
    font-family: 'plain-light';
    font-size:1.3vw;
}

@-webkit-keyframes scroller {
    from{
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    to{
        -webkit-transform: translateX(calc(-100% - 20px));
                transform: translateX(calc(-100% - 20px));
    }
}

@keyframes scroller {
    from{
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    to{
        -webkit-transform: translateX(calc(-100% - 20px));
                transform: translateX(calc(-100% - 20px));
    }
}


@-webkit-keyframes anime{
    0%{
        font-family: 'plain light';
        -webkit-text-stroke: 1px #fff;
        color:#fff;

        font-weight:500;
        opacity: 1;
    }

    48%{
        font-family: 'plain light';
        -webkit-text-stroke: 1px #fff;
        color:#fff;
        opacity: 0;
        font-weight:500;
    }

    50%{
        font-family: 'silk serif';
        -webkit-text-stroke: 1px #fff;
        color:transparent; 
        font-weight:500;
        opacity:1;
    }

    100%{
        font-family: 'silk serif';
        -webkit-text-stroke: 1px #fff;
        color:transparent;
        font-weight:500;
        opacity: 1;
    }
}


@keyframes anime{
    0%{
        font-family: 'plain light';
        -webkit-text-stroke: 1px #fff;
        color:#fff;

        font-weight:500;
        opacity: 1;
    }

    48%{
        font-family: 'plain light';
        -webkit-text-stroke: 1px #fff;
        color:#fff;
        opacity: 0;
        font-weight:500;
    }

    50%{
        font-family: 'silk serif';
        -webkit-text-stroke: 1px #fff;
        color:transparent; 
        font-weight:500;
        opacity:1;
    }

    100%{
        font-family: 'silk serif';
        -webkit-text-stroke: 1px #fff;
        color:transparent;
        font-weight:500;
        opacity: 1;
    }
}

@media (max-width:600px){
    body{
        background-color: #000;
    }

    #page1{
        /* background-color: rgb(159, 147, 147); */
        height:70vh;
        width:100%;
        /* background-color: #151515; */
    }
    
    #page1 #nav{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        padding:4.3vw 5.5vw;
    }
    
    #nav-part2{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap:3vw;
    }
    
    #nav-part2 h4{
        font-size:3vw;
        font-weight:400;
    }
    
    .hero{
        /* background-color: red; */
        width: 90%;
        /* overflow:hidden; */
        
    }
    
    .hero:nth-child(2){
        margin-top:10vh;
    }
    
    .hero h1{
        font-size:10vw;
        line-height:10vw;
    }
    .hero{
        margin-left:7%;
    }
    #hero1{
        margin-top:28vw;
    }
    
   
    #hero1 h1:before{
        content: "01";
        font-weight:100;
        left:2%;
        top:-95%;
        position:absolute;
        font-size:6.5vw;
        font-family: 'silk serif';
    }
    
    .hero h2{
        font-size:10vw;
        text-transform: uppercase;
        line-height:10vw;
        letter-spacing: 0.3vw;
        font-weight:600;
        border-bottom:0.8vw solid #fff;
        padding-bottom:0.8vw;
        -webkit-transition:all ease 0.3;
        -o-transition:all ease 0.3;
        transition:all ease 0.3
    }

    #page2{
        max-height:8vh;
        width:100%;
        position: relative;
        background-color: #000;
        margin-top:1vw;
        padding-top:2vh ;
        margin-bottom:180vw;

    }
    
    #video-container{
        padding:0.5vh;
        background-color: #000;
    }

    #page3{
        /* background-color: rgb(145, 135, 137); */
        min-height:100vh;
        width:100%;
        padding:2vw 2vw;
        margin-bottom:15vw;
    }
    
    #page3 h1{
        font-size:10vw;
        margin-left:7%;
    }

    /* #page3 h1:before{
        content: "03";
        font-weight:100;
        left:2%;
        top:-95%;
        position:absolute;
        font-size:6.5vw;
        font-family: 'silk serif';
    } */
    
    #page3 .underline2{
        width:90%;
        margin-top:9vw;
        margin-bottom: 14vw;
        margin-left:7%;
    }
    
    #page3 #img-div-container{
        padding: 1vw;
    }
    
    .p3-circle1,.p3-circle2{
        display: none;
    }
    
    .img-div{
        margin-left:5vw;
        height:70%;
        width:90%;
    }

    #pre-next{
        height:70%;
        width:90%;
    }

    #next{
        margin-top:2vw;
        height:30%;
        width:90%;
    }
    
    #next2{
        height:30%;
        width:90%;
    }
    
    /* ._canvas_container{
        z-index:999999 !important;
        pointer-events: none;
    } */

    #page4{
        min-height: 100vh;
        width:100%;
        /* background-color: red; */
        padding:2vw 2vw;
        /* padding-top: 4vh; */
    }
    
    /* #p4-content h1:before{
        content: "03";
        font-weight:100;
        left:-12%;
        position:absolute;
        font-size:3vw;
        font-family: 'silk serif';
    } */
    
    #p4-content{
        /* background-color: blue; */
        /* width:60vw; */
        width:100%;
        margin-left:2vw;
    }
    
    #p4-content h1{
        font-size:10vw;
        margin-left:7vw;
    }
    
    #p4-content .underline{
        width:90%;
        margin:8vw 7vw;
    }
    
    #p4-content p{
        font-size:6vw;
        width:90%;
        margin-top:12vw;
        margin-left:7vw;
        margin-bottom:12vw;
    }
    
    #p4-pic{
        display: block;
        /* align-items:center; */
        /* justify-content: center; */
    }
    
    #p4-pic img{
        -o-object-fit: cover;
           object-fit: cover;
        height:60vh;
        width:95%;
    }
    
    #p4-pic p{
        font-size:4vw;
        line-height: 6vw;
        width:80%;
        margin-left:7vw;
    }
    
    #p4-box{
        background-color: #3F7DF4;
        width:95%;
        height:60vh;
        padding:0vw 4.2vw;
        margin-top:-8vw;
        margin-left:0vw;
    }
    
    #crsr{
        display: none;
    }
    .box-elems{ 
        height: 20vw;
        margin-bottom: 0vw;
        margin-top: 1vw;
        /* background-color: red; */
        padding-top: 1vw;
        padding-bottom: 2vw;
    }
    
    .box-elems h4{
         font-size:4vw;
         line-height:9vw;
         margin-top: 2vw;
         margin-bottom: 2vw;
    }

    
    #p4-box .box-elems p{
        font-size:4vw;
        margin-top:10vw;
    }

    #p4-content .underline2{
        margin-top:10vw;
        margin-bottom:0vw;
        max-width:95%;
        margin-left:0vw;
    }

    #page5{
        margin-left: 4vw;
        min-height:50vh;
        width:95%;
        padding:5vw 0vw;
        margin-right:9vw;
    }
    
    
    .elem,.elem2{
        margin-bottom: -2vw;
    }

    .elem h1{
        font-size:10vw;
    }
    .elem2 h1{
        font-size:10vw;
    }
    
    #footer-div{
        display: block;
    }
    
    #footer{
        min-height:100vh;
        width:100%;
        position: relative;
        margin-left:4vw;
        padding:2vw 6vw;
    }
    
    .blocks{
        margin-bottom:10vw;
    }
    
    .blocks h6{
        font-size:4vw;
        font-weight:600;
        margin-bottom:4vw;
    }
    
    .blocks h5{
        font-size:6vw;
        font-weight:400;
    }
    
    #footer .underline2{
        margin:8vw 0;
        height:1.5px;
    }
    
    #footer h1{
        font-size:10vw;
    }
    
    #footer h1:before{
        top:-3%;
        left:5%;
        font-size:5vw;
    }
    #copyright h6{
        margin:1vw 0;
        font-size:5vw;
        font-family: 'plain text', sans-serif;
    }

    .blank{
        height:25vh;
        width:95%;
        background-color: #000;
    }

}