/* Universal values */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
}

/* Universal values ends */



/* Text font used */
@font-face {
    font-family: 'Byte';
    src: url('../font/Byte.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Aeonik';
    src: url('../font/Aeonik.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Ogg';
    src: url('../font/Ogg.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Iki';
    src: url('../font/Iki.otf');
    font-weight: normal;
    font-style: normal;
}


/* Loader */
.loader {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    background-color: rgb(0, 0, 0);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5vw;
    color: white;
}

.loader h2 {
    font-size: 7vw;
    text-transform: uppercase;
    font-family: "Byte";
    color: yellow;
}

/* For mobile & tablet responsivity */
@media (max-width:850px) {
    .loader {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        padding: 0 0 0 30vw;
        gap: 2vw;
    }

    .loader h2 {
        font-size: 12vw;
    }
}

/* Header starts */
header {
    width: 100%;
}

/* Navbar for PCs */
.nav-pc {
    background-color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.8vw 4vw 1.8vw 4vw;

}

.navpc-l {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.navpc-l h2 {
    background: linear-gradient(360deg, rgb(241, 241, 241), rgb(255, 30, 0));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    font-size: 5vw;
    font-family: 'Byte';
}

.navpc-r {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4vw;
}

.navpc-r h3 {
    color: #060606bd;
    font-size: 3vw;
    font-family: 'Byte';
}

.navpc-r h3 a {
    color: #060606bd;
    text-decoration: none;
}

.navpc-r h3 a:hover {
    border-bottom: 1px solid #060606bd;
}

.navpc-r i {
    display: none;
}

.nav-ph {
    display: none;
}


/* For mobile & tablet responsivity */
@media (max-width:650px) {

    .nav-pc {
        padding: 3vw 8vw 3vw 4vw;
    }

    .navpc-l h2 {
        font-size: 8.5vw;
    }

    .navpc-r h3 {
        display: none;
    }

    .navpc-r i {
        display: block;
        font-size: 5vw;
        color: #060606bd;
    }

}

@media (min-width: 650px) and (max-width: 1000px) {

    .nav-pc {
        padding: 2.8vw 3.5vw 2.8vw 3.5vw;
    }

    .navpc-l h2 {
        font-size: 5.5vw;
    }

    .navpc-r h3 {
        font-size: 3.5vw;
    }

}

/* Navbar for Phones */
.nav-ph {
    background-color: white;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 2;
    padding: 30px;
    border-radius: 0 0 35px 35px;
    top: -100%;
    transition: all ease 0.8s;
    padding: 8vw 6vw 8vw 6vw;
    
}

.navph-l {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.navph-l h3 {
    color: #060606bd;
    font-size: 8vw;
    font-family: 'Byte';
}

.navph-l h3 a {
    color: #060606bd;
    text-decoration: none;
}

.navph-l h3 a:hover {
    border-bottom: 1px solid #060606bd;
}

.navph-r {
    display: flex;
    align-items: center;
    justify-content: center;
}

.navph-r button {
    border: 1px solid rgb(161, 156, 156);
    padding: 13px 13px 13px 13px;
    background: linear-gradient(360deg, rgb(241, 241, 241), rgb(255, 30, 0));
    font-size: 4.4vw;
    border-radius: 30px;
    color: #060606bd;
    font-family: 'Byte';
}

@media (min-width:650px) {

    .nav-ph {
        display: none;
    }
}

/* Navbar Ends */
/* Header ends */

/* Animated Cursor */
.cursor {
    height: 9vw;
    width: 9vw;
    border-radius: 50%;
    background-color: rgb(255, 255, 0);
    position: fixed;
    z-index: 3;
    transform: translate(-100%, -100%);
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
}

/* Main starts */
main {
    min-height: 100vh;
    width: 100%;
    background-color: black;
    position: relative;
}


/* Heading section */
.heading {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 15vw 10vw 10vw 10vw;
}

.head-up {
    display: flex;
    align-items: center;
    justify-content: center;
}

.head-up h1 {
    background: linear-gradient(360deg, rgb(241, 241, 241), rgb(255, 30, 0));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    font-size: 20vw;
    font-family: 'Byte';
    text-align: center;
}

.head-up img {
    height: 45vw;
    width: auto;
    position: absolute;
    transition: all ease 1s;
}

.head-up img:hover {
    height: 50vw;
}

.head-dn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7vw 5vw 5vw 7vw;
}

.head-dn h2 {
    font-size: 6vw;
    color: white;
    font-family: 'Aeonik';
}


/* For Mobile & tablet responsivity */
@media (max-width:820px) {

    .heading {
        align-items: start;
    }

    .head-up h1 {
        font-size: 25vw;
    }

    .head-up img {
        top: 15;
        height: 52vw;
        transition: all ease 1s;
    }

    .head-up img:hover {
        height: 60vw;
    }

}

/* Heading section Ends */


/* About Section */
.about {
    min-height: 100%;
    width: 100%;
}

.ab-1 {
    height: 10vw;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: rgb(255, 255, 255);
    padding-left: 10vw;
}

.ab-1 h1 {
    font-size: 5vw;
    color: black;
}

.ab-2 {
    padding: 15vw 15vw 10vw 15vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ab-2 h1 {
    opacity: 0;
    font-weight: 900;
    animation-name: text-ani;
    position: absolute;
    background: linear-gradient(360deg, rgb(241, 241, 241), rgb(255, 30, 0));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: 'Byte';
    font-size: 10vw;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-timing-function: linear;
    animation-play-state: paused;
    animation-fill-mode: forwards;
}

.ab-2.animate h1 {
    animation-play-state: running;
}

.ab-2 h1:nth-child(2) {
    animation-delay: 2s;
}

.ab-2 h1:nth-child(3) {
    animation-delay: 3s;
}

.ab-2 h1:nth-child(4) {
    animation-delay: 4s;
    animation-name: text-ani-last;
}

@keyframes text-ani {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


@keyframes text-ani-last {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}


.ab-3 {
    padding: 0 5vw 0 5vw;
    color: white;
    text-align: right;
}

.ab-3 h1 {
    font-size: 16vw;
    font-family: "Aeonik";
}

.ab-3 h2 {
    font-size: 8vw;
    font-family: "Ogg";
}

.ab-3 h3 {
    font-size: 4.5vw;
    font-family: "Aeonik";
    padding-top: 10px;
}

.ab-4 {
    width: 60%;
    color: white;
    padding-left: 6vw;
    padding-top: 10vw;
    padding-bottom: 15vw;
}

.ab-4 {
    font-size: 2.5vw;
    font-family: "Aeonik";
}

/* About Section Ends */


/* Collection Section */
.collection {
    min-height: 100%;
    width: 100%;
}

.cl-1 {
    height: 10vw;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: rgb(255, 255, 255);
    padding-left: 10vw;
}

.cl-1 h1 {
    font-size: 5vw;
    color: black;
    font-family: "Aeonik";
}

.cl-2 {
    color: white;
    padding: 6vw 6vw 0 6vw;
    display: flex;
    align-items: center;
    justify-content: center;
}


.cl2-l h1 {
    font-size: 18vw;
    background: linear-gradient(360deg, rgb(241, 241, 241), rgb(255, 30, 0));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: "Ogg";
}

.cl2-r {
    padding-left: 2vw;
}

.cl2-r h1 {
    font-size: 4vw;
    font-family: "Aeonik";
}

.cl-3 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vw 10vw 0vw 10vw;
}

.cl-3 p {
    color: white;
    font-size: 2.5vw;
    font-family: "Aeonik";
    font-weight: 700;
}

.cl-4 {
    padding: 10vw;
}

.cl-4 {
    display: flex;
    flex-direction: column;
}

.cl4-up {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.cl4-up i {
    font-size: 5vw;
}

.cl4-up img {
    height: 37vw;
    transition: all ease 0.8s;
}

.cl4-up img:hover {
    height: 40vw;
}


.cl4-dn {
    color: white;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 5vw;
    padding-bottom: 10vw;
}

.cl4-dn h3 {
    font-size: 4vw;
    font-family: "Byte";
}

.cl4-dn button {
    border: 1px solid rgb(161, 156, 156);
    padding: 10px 10px 10px 10px;
    background: linear-gradient(360deg, rgb(241, 241, 241), rgb(255, 30, 0));
    font-size: 3vw;
    border-radius: 0px;
    color: #060606bd;
    font-family: 'Byte';
}

.cl4-dn p {
    font-size: 2vw;
    font-family: "Aeonik";
}

/* For Mobile & tablet responsivity */
@media (max-width:850px) {

    .cl4-dn h3 {
        font-size: 6vw;

    }

    .cl4-dn button {
        padding: 12px;
        font-size: 4vw;
    }

    .cl4-dn p {
        font-size: 2.8vw;
    }

}

/* Collection Ends */



/* Expertise Section */
.expertise {
    min-height: 100%;
    width: 100%;
    position: relative;
}

.e-1 {
    height: 10vw;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: rgb(255, 255, 255);
    padding-left: 10vw;
}

.e-1 h1 {
    font-size: 5vw;
    color: black;
    font-family: "Aeonik";
}

.e-2 {
    padding: 10vw 0vw 0 0vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.e2-v {
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.e2-v video {
    height: 48vw;
    width: auto;
    border-radius: 2.5rem;
}

.e2-t {
    top: 25vw;
    display: flex;
    align-items: center;
    color: white;
    justify-content: center;
    position: absolute;
    transition: all ease 1.5s;
}

.e2-t h1 {
    font-size: 9vw;
    font-family: Aeonik;
}

.e2-t-h-i {
    font-size: 28vw;
    background: linear-gradient(360deg, rgb(241, 241, 241), rgb(255, 30, 0));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.e-3 {
    padding: 30vw 10vw 5vw 10vw;
    color: white;
}

.e-3 p {
    font-size: 2.5vw;
    font-family: "Aeonik";
    font-weight: 700;
}

.e-4 {
    display: flex;
    flex-direction: column;
    gap: 10vw;
    padding: 10vw 10vw 15vw 10vw;
}

.e4-1 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

.e41-r {
    opacity: 0;
    height: 9vw;
    width: 18vw;
    background-color: rgba(255, 255, 255, 0.788);
    position: absolute;
    right: 32vw;
    top: 2vw;
    clip-path: polygon(15% 0%, 100% 0%, 100% 80%, 85% 100%, 0% 100%, 0% 20%);
    transition: all ease 1s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.e41-r h3 {
    color: black;
    padding: 3vw 2vw 2vw 2vw;
    font-size: 3vw;
    font-family: "Byte";
}

.e41-r p {
    color: black;
    padding: 1vw 2vw 4vw 2vw;
    font-size: 1.2vw;
    font-weight: 600;
    font-family: "Iki";
}

.e4-1 button {
    width: 50%;
    display: flex;
    align-items: center;
    gap: 1.5vw;
    justify-content: flex-start;
    background: linear-gradient(360deg, rgb(241, 241, 241), rgb(255, 30, 0));
    padding: 1vw 2vw;
    text-align: left;
    font-family: "Byte";
    font-size: 3.5vw;
    transition: all ease 0.5s;
}

.e4-1 button:hover {
    filter: blur(2px);
}

.e4-2 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}

.e42-l {
    opacity: 0;
    height: 9vw;
    width: 18vw;
    background-color: rgba(255, 255, 255, 0.788);
    position: absolute;
    z-index: 2;
    left: 32vw;
    bottom: 4vw;
    clip-path: polygon(15% 0%, 100% 0%, 100% 80%, 85% 100%, 0% 100%, 0% 20%);
    transition: all ease 1s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.e42-l h3 {
    color: black;
    padding: 3vw 2vw 2vw 2vw;
    font-size: 3vw;
    font-family: "Byte";
}

.e42-l p {
    color: black;
    padding: 1vw 2vw 4vw 2vw;
    font-size: 1.2vw;
    font-weight: 600;
    font-family: "Iki";
}


.e4-2 button {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5vw;
    background: linear-gradient(360deg, rgb(241, 241, 241), rgb(255, 30, 0));
    padding: 1vw 2vw;
    text-align: left;
    font-family: "Byte";
    font-size: 3.5vw;
    transition: all ease 0.5s;
    z-index: 1;
}

.e4-2 button:hover {
    filter: blur(2px);
}

/* For Mobile & tablet responsivity */
@media (max-width:850px) {

    .e-4 {
        gap: 15vw;
    }

    .e41-r {
        height: 15vw;
        width: 15vw;
        right: 14vw;
        top: 3vw;
    }

    .e41-r h3 {
        font-size: 6vw;
    }

    .e41-r p {
        font-size: 1.7vw;

    }

    .e4-1 button {
        width: 70%;
        padding: 2vw 3vw;
        font-size: 4vw;

    }

    .e42-l {
        height: 15vw;
        width: 15vw;
        left: 14vw;
        bottom: 3vw;
    }

    .e42-l h3 {
        font-size: 6vw;
    }

    .e42-l p {
        padding: 1vw 2vw 4vw 2vw;
        font-size: 1.7vw;
    }

    .e4-2 button {
        width: 70%;
        padding: 2vw 3vw;
        font-size: 4vw;
    }

}

/* Expertise Ends */
/* Main Section Ends */


/* Footer Starts */
footer {
    min-height: 100vh;
    width: 100%;
    background-color: rgb(0, 0, 0);
    position: relative;
    z-index: 1;
    padding-top: 5vw;
}

.f-1 {
    display: flex;
    flex-direction: column;
    gap: 5vw;
    position: relative;
    color: white;
}

.f1-up {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 25vw;
}

.f1-up p {
    text-transform: uppercase;
    font-size: 1vw;
    font-family: "Iki";
}

.f1-m {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 8vw;
    padding-right: 10vw;
    padding-top: 5vw;
}

.f1-m h1 {
    font-size: 12vw;
    font-family: "Aeonik";
    font-weight: 100;
}

.f1-m h1 i {
    background: linear-gradient(360deg, rgb(241, 241, 241), rgb(255, 30, 0));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.f1-dn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 5vw;
    padding-right: 10vw;
}

.f1-dn button {
    width: 25%;
    padding: 1vw 2vw;
    border-radius: 40px;
    border: none;
    background: linear-gradient(360deg, rgb(241, 241, 241), rgb(255, 30, 0));
    font-size: 1.5vw;
    font-weight: 700;
    font-family: "Iki";
}

.f-2 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 15vw 10vw 0 10vw;
    color: white;
    font-family: "Iki";
}

.f2-s {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 2vw;
}

.f2-s h3 {
    text-transform: uppercase;
    font-size: 0.8vw;
    font-weight: 100;
    padding-bottom: 2vw;
}

.f2-s a {
    text-decoration: none;
    color: white;
    font-family: "Aeonik";
    font-size: 2.5vw;
    font-weight: 100;
}

.f2-s a:hover {
    border-bottom: 1px solid white;
}

.f2-a {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

.f2-a h1 {
    text-transform: uppercase;
    font-size: 0.8vw;
    font-weight: 100;
}

.f2-a h2 {
    padding-top: 3vw;
    font-size: 2.5vw;
    font-family: "Aeonik";
}

.f2-a h2:hover {
    border-bottom: 1px solid white;
}

.f2-a h3 {
    padding-top: 4vw;
    font-size: 0.8vw;
    font-family: "Aeonik";
    text-transform: uppercase;
}

.f2-a h4 {
    padding-top: 3vw;
    font-size: 2.5vw;
    font-family: "Aeonik";
}

.f2-a h4:hover {
    border-bottom: 1px solid white;
}

.f2-a h5 {
    padding-top: 3vw;
    font-size: 0.8vw;
}

.fpc-3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    padding: 15vw 7vw 8vw 7vw;
}

.fpc-3 a {
    font-size: 1vw;
    text-decoration: none;
    color: white;
    font-family: "Iki";
    text-transform: uppercase;
}

.fpc-3 a:hover {
    border-bottom: 1px solid white;
}

.fph-3 {
    display: none;
}

@media (max-width:850px) {

    .f1-up {
        justify-content: flex-start;
        padding-left: 10vw;
    }

    .f1-up p {
        text-transform: uppercase;
        font-size: 2vw;
        font-family: "Iki";
    }

    .f1-dn {
        justify-content: center;
    }

    .f1-dn button {
        width: 50%;
        padding: 2vw 3vw;
        font-size: 2.5vw;
    }

    .f-2 {
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        gap: 10vw;
    }


    .f2-s h3 {
        font-size: 2vw;
        padding-bottom: 2vw;
    }

    .f2-s a {
        font-size: 5vw;
    }

    .f2-a {
        padding-top: 5vw;
    }

    .f2-a h1 {
        font-size: 2vw;
    }

    .f2-a h2 {
        padding-top: 5vw;
        font-size: 5vw;
    }

    .f2-a h3 {
        padding-top: 6vw;
        font-size: 1.6vw;
    }

    .f2-a h4 {
        font-size: 5vw;
        padding-top: 6vw;
    }

    .f2-a h5 {
        padding-top: 5vw;
        font-size: 1.7vw;
    }

    .fpc-3 {
        display: none;
    }

    .fph-3 {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 15vw 10vw 10vw 10vw;
        color: white;
        font-family: "Iki";
        color: white;
        text-transform: uppercase;
    }

    .fph3-l {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3vw;
    }

    .fph3-l a {
        text-decoration: none;
        color: white;
        font-size: 1.8vw;
    }

    .fph3-l a:nth-child(3) {
        padding-top: 8vw;
    }

    .fph3-l a:hover {
        border-bottom: 1px solid white;
    }

    .fph3-r {
        display: flex;
        align-items: flex-start;
    }

    .fph3-r a {
        text-decoration: none;
        color: white;
        font-size: 1.8vw;
    }

    .fph3-r a:hover {
        border-bottom: 1px solid white;
    }

}

/* Footer End */
/* The whole CODE & UI is written and designed by SHIVA aka @curioushiva */