* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rajdhani', sans-serif;
}

:root {
    --textc: #FCF7F0;
    --blue: #7A4FF4;
    --red: #EC4E00;
    --back: #111119;
    --purple: #A58EFC;
    --pink: #F0AAF3;
    --white: #FFFFFF;
    --subhead: 70px;
    --card: #212126;
}

body,
html {
    background-color: var(--back);
    max-width: 100%;
    overflow-x: hidden;
}


video {
    min-width: 100vw;
    min-height: 100vh;
    width: auto;
    height: auto;
    object-position: -755px -100px;
}

.front .title {
    position: absolute;
    top: 45%;
    font-size: 70px;
    color: var(--textc);
    font-weight: 700;
    text-align: center;
    /* background-image: url(../img/textbg.jpg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-position: -1200px 0px; */
}

.front .lettalk {
    position: absolute;
    top: 80%;
    width: 150px;
    height: 50px;
    border-radius: 100px;
    line-height: 2.5;
    font-size: 20px;
    color: var(--textc);
    font-weight: 700;
    text-align: center;
    background: linear-gradient(to right, var(--purple), var(--pink));
    margin-left: 34%;
    text-decoration: none;
    cursor: pointer;
}

/*----------------------------
------- who starts ----------
------------------------------*/

.who {
    width: 100vw;
    background-image: url(../img/bg.png);
    background-position: -500px 0px;
    padding-bottom: 50px;
}

.who .who-heading {
    margin-top: -25px;
    margin-left: -20px;
    width: fit-content;
    transform: rotate(270deg);
}

.who .who-heading .who-title {
    color: var(--textc);
}

.who .who-heading .who-line {
    background-color: var(--purple);
    width: 35px;
    height: 2px;
}

.who .sub {
    width: 80%;
    margin-left: 15%;
    margin-top: -18%;
}

.who .sub .sub-heading {
    width: 75%;
    font-size: 35px;
    font-weight: 700;
    background: linear-gradient(to right, var(--purple), var(--pink));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* color: var(--red); */
}

.who .build {
    padding-left: 11%;
    margin-top: 5%;
}

.who .build .backed {
    color: var(--white);
    font-size: 60px;
}

.who .build span {
    visibility: hidden;
}

.who .build #backed {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 70px;
    background-image: url(../img/textbg.jpg);
    background-size: cover;
    background-position: -199px -250px;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.who .getstarted {
    position: relative;
    width: 150px;
    height: 50px;
    border: 1px solid var(--purple);
    border-radius: 100px;
    line-height: 2.5;
    font-size: 20px;
    color: var(--textc);
    font-weight: 700;
    text-align: center;
    background: transparent;
    margin-left: 30%;
    margin-top: 30px;
    text-decoration: none;
    transition: all 1s ease-in;
}

.who .getstarted:hover {
    background: linear-gradient(to right, var(--purple), var(--pink));
}

.who .who-desc {
    margin-top: 20px;
    font-size: 17px;
    font-weight: 500;
    color: var(--textc);
    letter-spacing: 1.5px;
}


/*----------------------------
------- who ends ----------
------------------------------*/


/*----------------------------
------ features starts -------
------------------------------*/

.features {
    position: relative;
    background-image: url(../img/bg.png);
    margin-top: 30%;
    background-position: -750px -200px;
    padding-bottom: 20px;
}

.features .features-heading {
    margin-top: -25px;
    margin-left: -20px;
    width: fit-content;
    transform: rotate(270deg);
}

.features .features-heading .features-title {
    color: var(--textc);
}

.features .features-heading .features-line {
    background-color: var(--purple);
    width: 35px;
    height: 2px;
}

.features .sub {
    width: 80%;
    margin-left: 10%;
    margin-top: -15%;
}

.features .sub #hand,
.features .sub #hand1 {
    display: none;
}

.features .sub .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-left: -5%;
}

.features .fgrid>div {
    display: block;
}

.features .sub .sub-heading {
    font-size: 30px;
    font-weight: 700;
    background: linear-gradient(to right, var(--purple), var(--pink));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* color: var(--red); */
}

.features .sub .work-list {
    margin-top: 20px;
    background: transparent;
    transition: all 1s ease-in;
    border-radius: 10px;
}

.features .sub .work-list .work-single {
    display: flex;
    padding-right: 10px;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
}

.features .sub .work-list .work-single .work-title {
    text-decoration: none;
}

.features .sub .work-list .work-single h5 {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 17px;
    font-weight: 300;
    color: var(--textc);
}

.features .sub .work-list .work-single .work-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}


/*----------------------------
------- features ends --------
------------------------------*/

/*----------------------------
------- why starts ----------
------------------------------*/

.why {
    background-image: url(../img/bg.png);
    background-position: -1000px 0px;
}

.why .why-heading {
    margin-top: -25px;
    margin-left: -40px;
    width: fit-content;
    transform: rotate(270deg);
}

.why .why-heading .why-title {
    color: var(--textc);
}

.why .why-heading .why-line {
    background-color: var(--purple);
    width: 35px;
    height: 2px;
}

.why .sub {
    margin-left: 15%;
    margin-top: -21%;
    margin-bottom: 30px;
}

.why .sub .sub-heading {
    width: 75%;
    font-size: 35px;
    font-weight: 700;
    background: linear-gradient(to right, var(--purple), var(--pink));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* color: var(--red); */
}

.why .why-desc {
    margin-top: 20px;
    font-size: 17px;
    font-weight: 500;
    color: var(--textc);
    letter-spacing: 1.5px;
}

.why .tab {
    width: 90%;
    overflow: hidden;
    border: 1px solid var(--purple);
    margin-top: 20px;
}

/* Style the buttons that are used to open the tab content */
.why .tab button {
    width: 100%;
    /* color: var(--red); */
    background-color: transparent;
    font-weight: 700;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    margin-right: 1px;

    background: linear-gradient(to right, var(--purple), var(--pink));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

/* Change background color of buttons on hover */
.why .tab button:hover {
    color: var(--back);
    background-color: var(--textc);
}

/* Create an active/current tablink class */
.why .tab button.active {
    color: var(--back);
    background-color: var(--textc);
}

/* Style the tab content */
.why .tabcontent {
    display: none;
    width: 90%;
    color: white;
    padding: 6px 12px;
    border: 1px solid var(--pink);
    border-radius: 0px 0px 10px 10px;
    border-top: none;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 17px;
    font-weight: 500;
    animation: fadeEffect 1s;
}


@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



/*----------------------------
------- why ends ----------
------------------------------*/

/*----------------------------
------- services starts ----------
------------------------------*/

.services {
    background-image: url(../img/girl.png);
    background-size: cover;
    background-position: -100px 0px;
    padding-bottom: 20px;
}

.services .services-heading {
    margin-top: -25px;
    margin-left: -20px;
    width: fit-content;
    transform: rotate(270deg);
}

.services .services-heading .services-title {
    color: var(--textc);
    margin-top: 10px;
}

.services .services-heading .services-line {
    background-color: var(--purple);
    width: 35px;
    height: 2px;
}

.services .sub {
    width: 80%;
    margin-left: 17%;
    margin-top: -18%;
}

.services .sub .sub-heading {
    width: 95%;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(to right, var(--purple), var(--pink));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* color: var(--red); */
}

.services .sub .services-desc {
    margin-top: 20px;
    font-size: 17px;
    font-weight: 500;
    color: var(--textc);
    letter-spacing: 1.5px;
}

marquee {
    color: white;
    font-size: 100px;
    font-weight: bolder;
}

.services .srv-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 2fr);
    margin-top: 20px;
    background-color: rgba(1, 1, 1, 0.5);

}

.services .srv-grid .srv {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    padding-left: 7%;
    padding-right: 7%;

}

.services .srv-grid .srv .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(to right, var(--purple), var(--pink));
    ;
}

.services .srv-grid .srv i {
    position: relative;
    font-size: 20px;
    border-radius: 50%;
}

.services .srv-grid .srv .srv-title {
    color: white;
    margin-top: 10px;
}

.services .srv-grid .srv .srv-desc {
    margin-top: 10px;
    color: white;
    font-size: 17px;
    font-weight: 500;
    padding-bottom: 30px;
    text-align: center;
}

.services .tokens {
    display: flex;
    margin-top: 18px;
}

.services .tokens img {
    width: 40px;
    height: 40px;
    margin-left: 40px;
}



.marquee {
    height: 80px;
    width: 500px;
    /*  Make sure marquee is wide enough to fit your content  */
    overflow: hidden;
    position: relative;
    margin-top: -25%;

    float: left;
}

.marquee.stretched {
    width: 660px;
}

.marquee div {
    display: block;
    width: 200%;
    height: 80px;
    position: absolute;
    overflow: hidden;

    animation: marquee 8s linear infinite;
}

.marquee span {
    float: left;
    width: 50%;
    color: #7A4FF4;
    font-size: 80px;
    font-weight: bolder;
}

@keyframes marquee {
    0% {
        left: 0;
    }

    100% {
        left: -100%;
    }
}


/*----------------------------
------- services ends ----------
------------------------------*/

/*----------------------------
------- VR starts ----------
------------------------------*/

.vr {
    position: relative;
    width: 100%;
    height: 100vh;
    position: relative;
    padding-top: 10%;
    padding-bottom: 10px;
    background-image: url('../img/vr.png');
    background-repeat: no-repeat;
    background-size: 250px 300px;
    background-position: 100px 200px;
    overflow: hidden;
    animation: vrb 3s both infinite;
}

.vr .sub .vra {
    position: absolute;
}


.vr .sub #ufo,
.vr .sub #asteroid {
    width: 100px;
    height: 100px;
}

.vr .sub #ufo {
    top: 25%;
    left: 5%;
    animation: bounceufo 3s both infinite;
}

.vr .sub #asteroid {
    top: 5%;
    right: 5%;
}

@keyframes bounceufo {
    0% {
        top: 25%;
        left: 5%;
    }

    50% {
        top: 26%;
        left: 6%;
    }

    100% {
        top: 25%;
        left: 4.5%;
    }
}

@keyframes vrb {
    0% {
        background-position: 100px 200px;
    }

    50% {
        background-position: 100px 210px;
    }

    100% {
        background-position: 100px 200px;
    }
}

.vr .vr-heading {
    margin-top: 15%;
    margin-left: -40px;
    width: fit-content;
    transform: rotate(270deg);
}

.vr .vr-heading .vr-title {
    color: var(--textc);
}

.vr .vr-heading .vr-line {
    background-color: var(--purple);
    width: 35px;
    height: 2px;
}

.vr .sub {
    width: 80%;
    margin-left: 15%;
    margin-top: -22%;
}

.vr .sub .sub-heading {
    width: 75%;
    font-size: 35px;
    font-weight: 700;
    background: linear-gradient(to right, var(--purple), var(--pink));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* color: var(--red); */
}

.vr .getstarted {
    width: 150px;
    height: 50px;
    border: 1px solid var(--purple);
    border-radius: 100px;
    line-height: 2.5;
    font-size: 20px;
    color: var(--textc);
    font-weight: 700;
    text-align: center;
    background: transparent;
    margin-left: 34%;
    margin-top: 30px;
    text-decoration: none;
    cursor: pointer;
}

.vr .vr-desc {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 500;
    color: var(--textc);
    letter-spacing: 1.5px;
}

.vr .explore {
    position: absolute;
    bottom: 10%;
    width: 150px;
    height: 50px;
    border: 2px solid var(--purple);
    border-radius: 100px;
    line-height: 2.5;
    font-size: 20px;
    color: var(--textc);
    font-weight: 700;
    text-align: center;
    background: transparent;
    margin-left: 30%;
    text-decoration: none;
    cursor: pointer;
}



/*----------------------------
------- VR ends ----------
------------------------------*/

/*----------------------------
------- Game starts ----------
------------------------------*/

.game {
    position: relative;
    background-image: url(../img/controller.png);
    background-position: -1000px 0px;
    height: 100vh;
}

.game .game-heading {
    margin-top: -25px;
    margin-left: -10px;
    width: fit-content;
    transform: rotate(270deg);
}

.game .game-heading .game-title {
    color: var(--textc);
}

.game .game-heading .game-line {
    background-color: var(--purple);
    width: 35px;
    height: 2px;
}

.game .sub {
    width: 80%;
    margin-left: 15%;
    margin-top: -18%;
}

.game .sub .sub-heading {
    width: 75%;
    font-size: 35px;
    font-weight: 700;
    background: linear-gradient(to right, var(--purple), var(--pink));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* color: var(--red); */
}

.game .getstarted {
    position: relative;
    width: 150px;
    height: 50px;
    border: 1px solid var(--purple);
    border-radius: 100px;
    line-height: 2.5;
    font-size: 20px;
    color: var(--textc);
    font-weight: 700;
    text-align: center;
    background: transparent;
    margin-left: 34%;
    margin-top: 30px;
    text-decoration: none;
    cursor: pointer;
}

.game .game-desc {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 500;
    color: var(--textc);
    letter-spacing: 1.5px;
}

.game .gameengines {
    padding-top: 30%;
    padding-left: 5%;
}

.game .gameengines img {
    width: 100px;
    height: 100px;
}

.game .gameengines #unreal {
    width: 100px;
    height: 85px;
}

.game .explore {
    position: absolute;
    top: 80%;
    width: 150px;
    height: 50px;
    border: 2px solid var(--purple);
    border-radius: 100px;
    line-height: 2.5;
    font-size: 20px;
    color: var(--textc);
    font-weight: 700;
    text-align: center;
    background: transparent;
    margin-left: 30%;
    text-decoration: none;
    cursor: pointer;
}


/*----------------------------
------- VR ends ----------
------------------------------*/

/*----------------------------
------- blog starts ----------
------------------------------*/

.blogs .blog-title {
    text-align: center;
    color: white;
}

.blogs .blog-grid {
    display: grid;
    grid-template-columns: repeat(1, 2fr);
}

.blogs .blog-grid .single {
    width: 90%;
    margin-left: 5.5%;
    margin-top: 100px;
}

.blogs .blog-grid .single img {
    width: 90vw;
    height: 300px;
}

.blogs .blog-grid .single .blog-t {
    color: var(--white);
    text-align: center;
    min-height: 65px;
    height: auto;
    background-color: var(--card);
    padding-top: 13px;
    padding-bottom: 5px;
}


/*----------------------------
------- blog ends ------------
------------------------------*/



/*----------------------------
------- count starts ----------
------------------------------*/

.count {
    width: 100%;
}

.count .s-count {
    color: white;
    margin-top: 50px;
    margin-left: 25%;
}

.count .s-count h3 {
    font-size: 20px;
}

.count .s-count h1 {
    font-size: 50px;
}

/*----------------------------
------- count ends ----------
------------------------------*/

/*----------------------------
------- partners start ----------
------------------------------*/

.partners {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.partners .partner-title {
    color: var(--white);
    font-weight: 700;
    font-size: 40px;
}

.partners .partner-grid {
    display: grid;
    grid-template-columns: repeat(2, 2fr);
    margin-top: 5%;
}

.partners .partner-grid .part-single {
    margin-top: 15%;
}

.partners .partner-grid .part-single {
    margin-left: 25px;
}

.partners .partner-grid .part-single #c1 {
    width: 100px;
    height: 50px;
}

.partners .partner-grid .part-single #c2 {
    width: 120px;
    height: 50px;
}

.partners .partner-grid .part-single #c3 {
    width: 160px;
    height: 50px;
    margin-left: -10px;
}

.partners .partner-grid .part-single #c4 {
    width: 100px;
    height: 80px;
}

.partners .partner-grid .part-single #c5 {
    width: 110px;
    height: 70px;
}

.partners .partner-grid .part-single #c6 {
    width: 150px;
    height: 90px;
    margin-left: -30px;
}

.partners #see {
    text-decoration: none;
    color: white;
    font-size: 15px;
    font-weight: 400;
    margin-top: 20%;
    border: 1px solid var(--purple);
    border-radius: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    background: transparent;
    transition: all 0.5s;
}

.partners #see:hover {
    background: linear-gradient(to right, var(--purple), var(--pink));
}

/*----------------------------
------- partners ends ----------
------------------------------*/

/*----------------------------
------- contact start ----------
------------------------------*/

.contactus .ico img {
    width: 350px;
    margin-left: 30px;
    margin-bottom: 50px;
}

.contactus .title {
    color: white;
    margin-left: 10%;
}

.contactus form {
    display: flex;
    flex-direction: column;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 10px;
}

.contactus .box {
    height: 50px;
    font-size: 17px;
    padding-left: 20px;
    margin-top: 5px;
    border: 1px solid white;
    background-color: transparent;
    color: white;
}

option {
    height: 50px;
    color: var(--back);
}

.contactus textarea {
    padding-left: 20px;
    border: 1px solid white;
    background-color: transparent;
    font-size: 17px;
    color: white;
    margin-top: 5px;
    padding-top: 20px;
}

.contactus .btn-sbt {
    height: 50px;
    border: 1px solid white;
    background-color: white;
    color: black;
    margin-top: 15px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s;
}

.contactus .btn-sbt:hover {
    background-color: black;
    color: white;
}

/*----------------------------
------- contact ends ----------
------------------------------*/


/*----------------------------
------- footer starts ----------
------------------------------*/

.footer {
    position: relative;
    width: 100%;
    height: 80vh;
    background-image: url(../img/bg.png);
    background-position: -1000px 0px;
    color: white;
}

.footer .title {
    padding-top: 50px;
    padding-left: 20px;
}

.footer .links {
    display: flex;
    flex-direction: column;
    margin-left: 5%;
    margin-top: 30px;
}

.footer .links .link {
    text-decoration: none;
    color: white;
    margin-top: 5px;
}

.footer .address {
    width: 80%;
    margin-top: 30px;
    margin-left: 5%;
}

.footer #goblin {
    position: absolute;
    width: 95vw;
    bottom: 0px;
}

.footer .copy {
    width: 100%;
    position: absolute;
    font-weight: 400;
    bottom: 10px;
    text-align: center;
}

/*----------------------------
------- footer ends ----------
------------------------------*/

/*----------------------------
------- webient starts -------
------------------------------*/

.webient {
    width: 100%;
    font-family: 'DM Sans', sans-serif;
    font-size: 20vw;
    font-weight: 700;
    background-image: url(../img/webient_bg.jpg);
    background-size: cover;
    background-position: 0px 0px;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}

/*----------------------------
------- webient ends ---------
------------------------------*/



/*-----------------------------------------------
------- Media Query for desktop starts ----------
-------------------------------------------------*/
@media only screen and (min-width: 768px) {

    video {
        object-position: -200px 0px;
    }

    .front .title {
        width: 100vw;
        text-align: center;
        position: absolute;
        top: 45%;
        font-size: 70px;
    }

    .front .lettalk {
        position: absolute;
        top: 80%;
        margin-left: 45%;
    }

    /*----------------------------
    ------- who starts ----------
    ------------------------------*/

    .who {
        height: auto;
        position: relative;
        padding-top: 5%;
        padding-left: 10%;
        padding-bottom: 50px;
        background-position: -400px 0px;
    }

    .who .who-heading {
        position: absolute;
        left: 0;
        top: 20%;
    }

    .who .sub {
        width: 100%;
        margin-left: 5%;
        margin-top: 0%;
    }

    .who .sub .sub-heading {
        font-size: 60px;
    }

    .who .sub .who-desc {
        width: 80%;
    }

    .who .build {
        padding-left: 5%;
        margin-top: 5%;
    }

    .who .build span {
        visibility: visible;
    }

    .who .build .backed {
        font-size: 100px;
    }

    .who .build #backed {
        font-size: 100px;
        background-position: -900px 0px;
    }

    .who .getstarted {
        margin-top: 50px;
        margin-left: 38%;
        left: 0;
    }

    /*----------------------------
    ------- who ends -------------
    ------------------------------*/

    /*----------------------------
    ------- features starts-------
    ------------------------------*/

    .features {
        position: relative;
        margin-top: 0%;
        padding-top: 6%;
        min-height: 80vh;
        height: 100vh;
        background-position: -400px 0px;
    }

    .features .sub .work-list .work-title {
        text-decoration: none;
        cursor: pointer;
    }

    .features .sub .work-list {
        position: absolute;
        top: 25%;
        right: 20%;
        grid-template-columns: repeat(2, 1fr);
    }

    .features .features-heading {
        position: absolute;
        left: 1.2%;
        top: 27%;
    }

    .features .sub .sub-heading {
        font-size: var(--subhead)
    }

    .features .sub {
        margin-top: -5%;
        margin-left: 23%;
    }

    .features .sub #hand1 {
        display: block;
        position: absolute;
        width: 450px;
        height: 450px;
        top: 40%;
        left: 10%;
        transform: rotateY(180deg);
    }

    .features .sub .work-list .work-single {
        border: 1px solid var(--white);
        border-radius: 10px;
        font-size: 19px;
        margin-top: 35px;
        letter-spacing: 2px;
        margin-left: 50px;
    }

    .features .sub .work-list .work-single:hover {
        background: linear-gradient(to right, var(--purple), var(--pink));
        color: var(--white);
    }

    /*----------------------------
    ------- features ends --------
    ------------------------------*/

    /*----------------------------
    ---------- why starts----------
    ------------------------------*/

    .why {
        position: relative;
        padding-top: 50px;
        height: 80vh;
    }

    .why .why-heading {
        position: absolute;
        left: 0.7%;
        top: 30%;
    }

    .why .sub {
        margin-top: 0%;
        margin-left: 18%;
    }

    .why .sub .sub-heading {
        width: 100%;
    }

    .why .sub .sub-heading {
        font-size: var(--subhead);
    }

    .why .sub .tab,
    .why .sub .tabcontent {
        width: 75%;
        height: 160px;
    }

    .why .sub .tab .tablinks {
        font-size: 17px;
    }

    /*----------------------------
    --------- why ends -----------
    ------------------------------*/

    /*----------------------------------
    --------- Marquee Starts -----------
    ------------------------------------*/
    .marquee {
        width: 100vw;
        height: 150px;
        /*  Make sure marquee is wide enough to fit your content  */
        margin-top: -5%;
    }

    marquee {
        font-size: 150px;
    }

    .marquee div {
        height: 150px;
    }

    .marquee span {
        font-size: 150px;
    }

    /*--------------------------------
    --------- Marquee Ends -----------
    ----------------------------------*/

    /*-----------------------------------
    --------- services starts -----------
    -------------------------------------*/

    .services {
        position: relative;
        background-position: 700px;
        background-size: 1200px;
        background-repeat: no-repeat;
        height: auto;
    }

    .services .services-heading {
        position: absolute;
        left: 10px;
        top: 7%;
    }

    .services .sub .sub-heading {
        font-size: var(--subhead);
    }

    .services .sub {
        margin-top: 0%;
    }

    .services .srv-grid .srv {
        width: 60%;
    }

    .services .tokens {
        margin-left: 17%;
        margin-bottom: 30px;
    }

    .services .tokens img {
        margin-left: 150px;
    }

    /*-----------------------------------
    --------- services ends -------------
    -------------------------------------*/

    /*-----------------------------------
    ------------ VR starts --------------
    -------------------------------------*/

    .vr {
        position: relative;
        background-size: contain;
        background-image: url('../img/vrb.png');
        background-position: -300px -700px;
        background-repeat: no-repeat;
    }

    .vr .vr-heading {
        position: absolute;
        left: 0.7%;
        top: 27%;
        margin-top: 0px;
    }

    .vr .sub {
        position: absolute;
        right: 0;
        margin-top: -5%;
        width: 60%;
    }

    .vr .sub .sub-heading {
        font-size: var(--subhead);
    }

    .vr .explore {
        right: 30%;
        transition: all 0.5s;
    }

    .vr .explore:hover {
        background: linear-gradient(to right, var(--purple), var(--pink));
        color: var(--white);
    }


    /*-----------------------------------
    ------------- VR ends ---------------
    -------------------------------------*/

    /*----------------------------
    ------- Game starts ----------
    ------------------------------*/

    .game {
        position: relative;
        padding-top: 3%;
    }

    .game .game-heading {
        position: absolute;
        left: 1%;
        top: 20%;
    }

    .game .sub {
        margin-top: 0%;
        margin-left: 19%;
    }

    .game .sub .sub-heading {
        font-size: var(--subhead);
    }

    .game .game-desc {
        width: 70%;
    }

    .game .explore {
        top: 70%;
        margin-top: 5%;
        margin-left: 43%;
    }

    .game .explore:hover {
        background: linear-gradient(to right, var(--purple), var(--pink));
        color: var(--white);
    }

    .game .gameengines {
        padding-top: 5%;
        padding-left: 35%;
    }

    .game .gameengines #unreal {
        width: 120px;
        height: 100px;
    }


    /*----------------------------
    --------- Game ends ----------
    ------------------------------*/

    /*----------------------------
    ------- blog starts ----------
    ------------------------------*/

    .blogs .blog-title {
        text-align: center;
        color: white;
    }

    .blogs .blog-grid {
        display: grid;
        grid-template-columns: repeat(3, 2fr);
    }

    .blogs .blog-grid .single {
        width: 90%;
        margin-left: 5.5%;
        margin-top: 100px;
    }

    .blogs .blog-grid .single img {
        width: 100%;
        height: 350px;
        object-fit: fit;
    }

    .blogs .blog-grid .single .blog-t {
        color: var(--white);
        text-align: center;
        height: 65px;
        line-height: 1.5;
        background-color: var(--card);
    }


    /*----------------------------
    ------- blog ends ------------
    ------------------------------*/

    /*----------------------------
    ------- count starts ----------
    ------------------------------*/

    .count {
        display: flex;
        margin-top: 20px;
    }

    .count .s-count {
        margin-left: 200px;
    }


    /*----------------------------
    ------- count ends ----------
    ------------------------------*/

    /*----------------------------
------- partners start ----------
------------------------------*/


    .partners .partner-title {
        color: var(--white);
        font-weight: 700;
        font-size: 40px;
    }

    .partners .partner-grid {
        display: grid;
        grid-template-columns: repeat(4, 2fr);
        margin-top: 5%;
    }

    .partners .partner-grid .part-single {
        margin-left: 100px;
    }

    .partners .partner-grid .part-single #c1 {
        width: 100px;
        height: 50px;
    }

    .partners .partner-grid .part-single #c2 {
        width: 120px;
        height: 50px;
    }

    .partners .partner-grid .part-single #c3 {
        width: 160px;
        height: 50px;
    }

    .partners .partner-grid .part-single #c4 {
        width: 200px;
        height: 120px;
    }

    .partners .partner-grid .part-single #c5 {
        width: 110px;
        height: 70px;
        margin-left: 40px;
    }

    .partners .partner-grid .part-single #c6 {
        width: 200px;
        height: 100px;
    }

    .partners #see {
        margin-top: 5%;
    }

    /*----------------------------
------- partners ends ----------
------------------------------*/

    /*----------------------------
    ------- contact start ----------
    ------------------------------*/

    .contactus {
        display: flex;
        width: 100%;
        margin-left: 10%;
    }

    .contactus .fields {
        width: 50%;
    }



    /*----------------------------
    ------- contact ends ----------
    ------------------------------*/


    /*----------------------------
    ------- webient starts -------
    ------------------------------*/

    .webient {
        width: 100%;
        font-family: 'Nunito Sana', sans-serif;
        font-size: 18vw;
        font-weight: 800;
        background-image: url(../img/webient_bg.jpg);
        background-size: cover;
        background-position: 0px 0px;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
        transform: scaleY(1.2);
    }

    /*----------------------------
    ------- webient ends ---------
    ------------------------------*/


    /*----------------------------
    ------- footer starts ----------
    ------------------------------*/

    .footer {
        display: flex;
        background-position: -450px 0px;
    }

    .footer .title {
        width: 900px;
        font-size: 45px;
        padding-left: 40px;
    }

    .footer .links {
        margin-top: 65px;
        width: 500px;
    }

    .footer .links .useful {
        font-size: 25px;
    }

    .footer #goblin {
        width: 40vw;
        margin-left: 30%;
    }

    .footer .address {
        margin-top: 65px;
        font-size: 20px;
    }


    /*----------------------------
    ------- footer ends ----------
    ------------------------------*/



}

/*-----------------------------------------------
------- Media Query for desktop ends ----------
-------------------------------------------------*/