@font-face {
    font-family: 'plain Light';
    src: url('fonts/Plain-Light.ttf');
}

@font-face {
    font-family: 'silk serif';
    src: url('fonts/SilkSerif-Regular.ttf');
}

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

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

main {
    position: relative;
    background: #111;
}
.mouseFollower{
    border: 2px solid #fff;
    background: none;
    scale:2;
    mix-blend-mode: difference;
}
#loader {
    height: 100%;
    width: 100%;
    position: fixed;
    background: #0B0B0B;
    z-index: 99;
    padding: 25vh 10vw;
}

.line {
    /* background: red; */
    height: fit-content;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3vw;
}

.line #line1-part1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5vw;
}

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

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

.line h1 {
    font-size: 6vw;
    font-weight: 500;
    text-transform: uppercase;
}

.line h2 {
    font-size: 4.5vw;
    text-transform: uppercase;
    font-weight: 500;
    animation-name: now;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    opacity: 0;
}

@keyframes now {
    0% {
        font-family: 'plain Light';
        -webkit-text-stroke: 1px #fff;
        opacity: 1;
    }

    47% {
        font-family: 'plain Light';
        -webkit-text-stroke: 1px #fff;
        opacity: 0;
    }

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

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



#page1 {
    width: 100%;
    height: 100vh;
    background: #111;
    margin-bottom: 4vh;
}

#page1 nav {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 7vh 5.5vw;
    position: relative;
}

#logo {
    height: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

#logo img {
    height: 100%;
    margin-right: 2vw;
}
#logo svg {
    height: 100%;
}

#nav-part1 {
    position: absolute;
    left: 30%;
}

#nav-part1 h3 {
    font-size: 1vw;
    font-weight: 500;
}

#nav-part2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3vw;
}

#nav-part2 h3 {
    font-size: 1vw;
    font-weight: 500;
}

.hero {
    /* background: salmon; */
    width: 70%;
    margin-left: 30%;
    height: fit-content;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 9999;
}

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

.hero h1 {
    font-size: 7vw;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 7vw;
}

#hero1::before {
    content: '01';
    font-size: 3vw;
    font-family: 'silk serif';
    position: absolute;
    top: 10%;
    left: -10%;
}
#hero3{
    position: relative;
    z-index: 99;
}
#hero3 h1 span {
    text-decoration: underline;
    transition: all 0.5s ease;
}

#hero3 h1 span:hover {
    -webkit-text-stroke: 1px #fff;
    color: transparent;
    font-weight: 500;
    text-decoration: none;
}
#flag{
    height: 25vw;
    position: absolute;
    top: 0;
    left:0;
    transform: translate(-50%, -50%);
    opacity: 0;
}

#page2 {
    width: 100%;
    min-height: 100vh;
    background: #111;
    padding: 5vh 0;
    position: relative;
    display: flex;
    align-items: flex-end;
    margin-bottom: 8vh;

}

#video-container {
    width: 69vw;
    height: 70vh;
    position: relative;
    left: 28%;
    background: url('https://obys.agency/wp-content/uploads/2022/11/Showreel-2022-preview-1.jpg');
    background-size: cover;
}

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

#video-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    overflow: hidden;
}

#video-crsr {
    height: 9vw;
    width: 9vw;
    border-radius: 50%;
    background: #FFA63D;
    position: absolute;
    top: 15%;
    left: 69.5%;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

#video-crsr i {
    font-size: 3vw;
}

#page3 {
    min-height: 100vh;
    width: 100%;
    margin-bottom: 8vh;
    position: relative;
    padding: 17vh 2vw;

}

#page3 h1 {
    font-size: 7vw;
    text-transform: uppercase;
    font-weight: 600;
    margin-left: 28%;
    position: relative;
    margin-bottom: 1vw;
}

#page3 h1::before {
    content: '02';
    font-size: 3vw;
    font-family: 'silk serif';
    position: absolute;
    top: 22%;
    left: -10%;
}

#page3 .underline {
    margin-left: 28vw;
    opacity: 1;
}

#image-div-container {
    /* background: lightcoral; */
    padding: 1vw;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 2vw;
}
.projectBoxes{
    height: 38vw;
    width: 25vw;
}
.projectBoxes h2{
    font-size: 2.7vw;
    text-transform: uppercase;
    font-weight: 500;
    padding: 2vw 0;
}
.image-div {
    height: 80%;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.projectBoxes .bottomBox {
    height: 10%;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 2.2vw 0;
}
.projectBoxes .bottomBox h5{
    font-size: 1.1vw;
    font-weight: 500;
    
}
.projectBoxes .bottomBox h5:nth-child(1){
    width: 50%;
}
.projectBoxUnderline{
    width: 100%;
    height: 1px;
    margin-top: 2vw;
    background: #fff;
}
.projectBoxmiddle{
    height: 48vw;
    width: 32vw;
}
#projectBox3{
    margin-top: 8vw;
    margin-left: 2vw;
}
.projectBoxright{
    margin-top: -2vw;
}
#projectBox5{
    margin-top: -12vw;
}
#projectBox6{
    margin-left: 8vw;
    margin-top: 4vw;
}
.image-div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.page3-circle {    
    height: 23vw;
    width: 23vw;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.page3-circle svg{
    height: 40%;
}
#page3-circle1{
    margin-top: 50vh;
    margin-left: 6vw;
}
#page3-circle2 svg{
    rotate: -45deg;
}
#page3-circle3 {
    margin-top: 25vw;
    margin-left: 1vw;
}
#page3-circle3 svg{
    rotate: -90deg;
}
.circle-in{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    scale: 0;
    border-radius: 50%;
    transition-delay: 0.3;

}
.circle-in p{
    font-size: 1vw;
    color: #000;
    font-weight: 500;
    width:80%;
    scale: 0;
    text-align: center;
    transition: all 0.5s ease;
    transition-delay: 0.2;
    opacity: 0;
}
.page3-circle:hover .circle-in{
    scale: 1;
}
.page3-circle:hover p{
    scale: 1;
    opacity: 1;
}
#project{
    width:100%;
    height: 100vh;
    display: grid;
    place-items: center;
}
#projectDetail{
    width: 50vh;
    height: 50vh;
    background: #FFA63D;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: all 0.5s ease;
}
#projectDetail:hover{
    scale:0.8;
}
#projectDetail h2{
    font-size: 1vw;
    font-weight: 500;
}
#projectDetail h2 span{
    font-family: 'silk serif';
}








#page4 {
    min-height: 100vh;
    width: 100%;
    margin-bottom: 4vh;

    position: relative;
    overflow-x: hidden;
}

#page4-content {
    width: 72vw;
    min-height: 100%;
    position: relative;
    margin-left: 28%;
    padding: 4vw 0;
}

#page4-content h1 {
    font-size: 7vw;
    text-transform: uppercase;
    font-weight: 600;
    padding: 1vw 0;
    position: relative;
}

#page4-content h1::before {
    content: '03';
    font-size: 3vw;
    font-family: 'silk serif';
    position: absolute;
    top: 12%;
    left: -12%;
}

#page4-content .underline,
footer .underline {
    width: 65vw;
    border-top: 1px solid #fff;
}

#page4-content>p {
    font-size: 2.5vw;
    width: 55%;
    margin-top: 4vw;

}

#page4-flex {
    height: 90vh;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 4vw;
    gap: 3vw;
}

#page4-flex img {
    width: 45%;
    height: 100%;
    object-fit: cover;
}

#page4-flex>p {
    width: 26%;
    height: 100%;
    font-size: 1vw;
    line-height: 1.7;
}

#page4-outer {
    width: 42vw;
    position: absolute;
    bottom: -20%;
    right: 5%;
    margin-left: 28%;
    padding: 4vw;
    background: #3F7DF4;

}

#page4-outer section {
    display: flex;
    align-items: center;
    gap: 3vw;
    padding: 1.4vw 0vw;
    border-bottom: 1px solid #fff;
}

#page4-outer section h2 {
    width: 40%;
    font-size: 1.5vw;
    font-weight: 500;
}

#page4-outer section h5 {
    font-size: 1vw;
    font-weight: 500;
}

#work-with {
    padding-top: 22vw;
    width: 72vw;
    position: relative;
    margin-left: 28%;
}

#work-with h5 {
    font-size: 1vw;
    font-weight: 500;
    margin-top: 1vw;
}

#page5 {
    width: 200%;
    min-height: 100vh;
    position: relative;
    background: #111;
    padding: 4vw 0;
}

.elem {
    white-space: nowrap;
    margin-bottom: -3vw;
}

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

.elem:nth-child(2n) h1 {
    transform: translateX(calc(-100% - 20px));
    animation-direction: reverse;
}

@keyframes anime {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - 20px));
    }
}

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

footer {
    width: 100%;
    height: 100vh;
    background: #111;
}

#footer-content {
    width: 72vw;
    position: relative;
    margin-left: 28%;
    padding: 4vw 0;
}

footer h1 {
    height: 10vw;
    font-size: 7.4vw;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1vw;
    display: flex;
    align-items: center;
    position: relative;
}

footer h1::before {
    content: '04';
    font-size: 3vw;
    font-family: 'silk serif';
    position: absolute;
    top: 10%;
    left: -12%;
}

footer h1 svg {
    height: 6vw;
    margin-left: 2.4vw;
}

#info {
    width: 80%;
    height: fit-content;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 2.5vw;
    margin-bottom: 4vw;

}

.info-elem h4 {
    margin-bottom: 2vw;
    font-weight: 500;
    font-size: 1.1vw;
}

.info-elem h2 {
    font-weight: 500;
    font-size: 2vw;
}

#footer-content>h3 {
    font-size: 1.4vw;
    line-height: 1vw;
    font-weight: 500;
    margin-top: 2.5vw;
}

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

@media (max-width:600) {
    
    #loader {
        margin-top: 20vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #loader h1{
        font-size: 4vw;
    }
    
    
    #page1 {
        width: 100%;
        height: 100vh;
        background: #111;
        margin-bottom: 4vh;
    }
    
    #page1 nav {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 7vh 5.5vw;
        position: relative;
    }
    
    #logo {
        height: 2vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    #logo img {
        height: 100%;
        margin-right: 2vw;
    }
    #logo svg {
        height: 100%;
    }
    
    #nav-part1 {
        display: none;
    }
    
    #nav-part2 {
        display: none;
    }
    
    .hero {
        /* background: salmon; */
        width: 70%;
        margin-left: 30%;
        height: fit-content;
        overflow: hidden;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 9999;
    }
    
    .hero:nth-child(2) {
        margin-top: 9vh;
    }
    
    .hero h1 {
        font-size: 7vw;
        text-transform: uppercase;
        font-weight: 600;
        line-height: 7vw;
    }
    
    #hero1::before {
        content: '01';
        font-size: 3vw;
        font-family: 'silk serif';
        position: absolute;
        top: 10%;
        left: -10%;
    }
    #hero3{
        position: relative;
        z-index: 99;
    }
    #hero3 h1 span {
        text-decoration: underline;
        transition: all 0.5s ease;
    }
    
    #hero3 h1 span:hover {
        -webkit-text-stroke: 1px #fff;
        color: transparent;
        font-weight: 500;
        text-decoration: none;
    }
    #flag{
        height: 25vw;
        position: absolute;
        top: 0;
        left:0;
        transform: translate(-50%, -50%);
        opacity: 0;
    }
    
    #page2 {
        width: 100%;
        min-height: 100vh;
        background: #111;
        padding: 5vh 0;
        position: relative;
        display: flex;
        align-items: flex-end;
        margin-bottom: 8vh;
    
    }
    
    #video-container {
        width: 69vw;
        height: 70vh;
        position: relative;
        left: 28%;
        background: url('https://obys.agency/wp-content/uploads/2022/11/Showreel-2022-preview-1.jpg');
        background-size: cover;
    }
    
    #video-container video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
    }
    
    #video-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        overflow: hidden;
    }
    
    #video-crsr {
        height: 9vw;
        width: 9vw;
        border-radius: 50%;
        background: #FFA63D;
        position: absolute;
        top: 15%;
        left: 69.5%;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #video-crsr i {
        font-size: 3vw;
    }
    
    #page3 {
        min-height: 100vh;
        width: 100%;
        margin-bottom: 8vh;
        position: relative;
        padding: 17vh 2vw;
    
    }
    
    #page3 h1 {
        font-size: 7vw;
        text-transform: uppercase;
        font-weight: 600;
        margin-left: 28%;
        position: relative;
        margin-bottom: 1vw;
    }
    
    #page3 h1::before {
        content: '02';
        font-size: 3vw;
        font-family: 'silk serif';
        position: absolute;
        top: 22%;
        left: -10%;
    }
    
    #page3 .underline {
        margin-left: 28vw;
        opacity: 1;
    }
    
    #image-div-container {
        /* background: lightcoral; */
        padding: 1vw;
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 2vw;
    }
    .projectBoxes{
        height: 38vw;
        width: 25vw;
    }
    .projectBoxes h2{
        font-size: 2.7vw;
        text-transform: uppercase;
        font-weight: 500;
        padding: 2vw 0;
    }
    .image-div {
        height: 80%;
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    .projectBoxes .bottomBox {
        height: 10%;
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 2.2vw 0;
    }
    .projectBoxes .bottomBox h5{
        font-size: 1.1vw;
        font-weight: 500;
        
    }
    .projectBoxes .bottomBox h5:nth-child(1){
        width: 50%;
    }
    .projectBoxUnderline{
        width: 100%;
        height: 1px;
        margin-top: 2vw;
        background: #fff;
    }
    .projectBoxmiddle{
        height: 48vw;
        width: 32vw;
    }
    #projectBox3{
        margin-top: 8vw;
        margin-left: 2vw;
    }
    .projectBoxright{
        margin-top: -2vw;
    }
    #projectBox5{
        margin-top: -12vw;
    }
    #projectBox6{
        margin-left: 8vw;
        margin-top: 4vw;
    }
    .image-div img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    .page3-circle {    
        height: 23vw;
        width: 23vw;
        border: 2px solid #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .page3-circle svg{
        height: 40%;
    }
    #page3-circle1{
        margin-top: 50vh;
        margin-left: 6vw;
    }
    #page3-circle2 svg{
        rotate: -45deg;
    }
    #page3-circle3 {
        margin-top: 25vw;
        margin-left: 1vw;
    }
    #page3-circle3 svg{
        rotate: -90deg;
    }
    .circle-in{
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        scale: 0;
        border-radius: 50%;
        transition-delay: 0.3;
    
    }
    .circle-in p{
        font-size: 1vw;
        color: #000;
        font-weight: 500;
        width:80%;
        scale: 0;
        text-align: center;
        transition: all 0.5s ease;
        transition-delay: 0.2;
        opacity: 0;
    }
    .page3-circle:hover .circle-in{
        scale: 1;
    }
    .page3-circle:hover p{
        scale: 1;
        opacity: 1;
    }
    #project{
        width:100%;
        height: 100vh;
        display: grid;
        place-items: center;
    }
    #projectDetail{
        width: 50vh;
        height: 50vh;
        background: #FFA63D;
        border-radius: 50%;
        display: grid;
        place-items: center;
        transition: all 0.5s ease;
    }
    #projectDetail:hover{
        scale:0.8;
    }
    #projectDetail h2{
        font-size: 1vw;
        font-weight: 500;
    }
    #projectDetail h2 span{
        font-family: 'silk serif';
    }
    
    
    
    
    
    
    
    
    #page4 {
        min-height: 100vh;
        width: 100%;
        margin-bottom: 4vh;
    
        position: relative;
        overflow-x: hidden;
    }
    
    #page4-content {
        width: 72vw;
        min-height: 100%;
        position: relative;
        margin-left: 28%;
        padding: 4vw 0;
    }
    
    #page4-content h1 {
        font-size: 7vw;
        text-transform: uppercase;
        font-weight: 600;
        padding: 1vw 0;
        position: relative;
    }
    
    #page4-content h1::before {
        content: '03';
        font-size: 3vw;
        font-family: 'silk serif';
        position: absolute;
        top: 12%;
        left: -12%;
    }
    
    #page4-content .underline,
    footer .underline {
        width: 65vw;
        border-top: 1px solid #fff;
    }
    
    #page4-content>p {
        font-size: 2.5vw;
        width: 55%;
        margin-top: 4vw;
    
    }
    
    #page4-flex {
        height: 90vh;
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        margin-top: 4vw;
        gap: 3vw;
    }
    
    #page4-flex img {
        width: 45%;
        height: 100%;
        object-fit: cover;
    }
    
    #page4-flex>p {
        width: 26%;
        height: 100%;
        font-size: 1vw;
        line-height: 1.7;
    }
    
    #page4-outer {
        width: 42vw;
        position: absolute;
        bottom: -20%;
        right: 5%;
        margin-left: 28%;
        padding: 4vw;
        background: #3F7DF4;
    
    }
    
    #page4-outer section {
        display: flex;
        align-items: center;
        gap: 3vw;
        padding: 1.4vw 0vw;
        border-bottom: 1px solid #fff;
    }
    
    #page4-outer section h2 {
        width: 40%;
        font-size: 1.5vw;
        font-weight: 500;
    }
    
    #page4-outer section h5 {
        font-size: 1vw;
        font-weight: 500;
    }
    
    #work-with {
        padding-top: 22vw;
        width: 72vw;
        position: relative;
        margin-left: 28%;
    }
    
    #work-with h5 {
        font-size: 1vw;
        font-weight: 500;
        margin-top: 1vw;
    }
    
    #page5 {
        width: 200%;
        min-height: 100vh;
        position: relative;
        background: #111;
        padding: 4vw 0;
    }
    
    .elem {
        white-space: nowrap;
        margin-bottom: -3vw;
    }
    
    .elem h1 {
        font-size: 7vw;
        -webkit-text-stroke: 1px #fff;
        font-weight: 400;
        text-transform: uppercase;
        color: transparent;
        display: inline-block;
        margin-right: 16px;
        animation-name: anime;
        animation-timing-function: linear;
        animation-duration: 15s;
        animation-iteration-count: infinite;
    }
    
    .elem:nth-child(2n) h1 {
        transform: translateX(calc(-100% - 20px));
        animation-direction: reverse;
    }
    
    @keyframes anime {
        from {
            transform: translateX(0);
        }
    
        to {
            transform: translateX(calc(-100% - 20px));
        }
    }
    
    .elem h1 span {
        font-family: 'silk serif';
        color: transparent
    }
    
    footer {
        width: 100%;
        height: 100vh;
        background: #111;
    }
    
    #footer-content {
        width: 72vw;
        position: relative;
        margin-left: 28%;
        padding: 4vw 0;
    }
    
    footer h1 {
        height: 10vw;
        font-size: 7.4vw;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 1vw;
        display: flex;
        align-items: center;
        position: relative;
    }
    
    footer h1::before {
        content: '04';
        font-size: 3vw;
        font-family: 'silk serif';
        position: absolute;
        top: 10%;
        left: -12%;
    }
    
    footer h1 svg {
        height: 6vw;
        margin-left: 2.4vw;
    }
    
    #info {
        width: 80%;
        height: fit-content;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-top: 2.5vw;
        margin-bottom: 4vw;
    
    }
    
    .info-elem h4 {
        margin-bottom: 2vw;
        font-weight: 500;
        font-size: 1.1vw;
    }
    
    .info-elem h2 {
        font-weight: 500;
        font-size: 2vw;
    }
    
    #footer-content>h3 {
        font-size: 1.4vw;
        line-height: 1vw;
        font-weight: 500;
        margin-top: 2.5vw;
    }
    
    ._canvas_container {
        z-index: 999999 !important;
        pointer-events: none;
    }
}