@import url(components/nav.css);
@import url(components/hero.css);
@import url(components/project.css);
@import url(components/client.css);
@import url(components/philosophy.css);
@import url(components/follow.css);
@import url(components/footer.css);

:root {
    --white: #fff;
    --black: #000;
    --grey: #8D8D8D;
    --grey2: #4D4D4D;
}

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

html, body {
    overflow-x: hidden;
    font-family: NeuHaasM, sans-serif !important;
}

html.has-scroll-smooth 
{
    overflow: hidden;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;  
}


@font-face {
    font-family: NeuHaasB, sans-serif !important;
    src: url(../fonts/NeueHaasDisplayBold.ttf);
}

@font-face {
    font-family: NeuHaasM, sans-serif !important;
    src: url(../fonts/NeueHaasDisplayMediu.ttf);
}

@font-face {
    font-family: NeuHaasRoman, sans-serif !important;
    src: url(../fonts/NeueHaasDisplayRoman.ttf);
}

@font-face {
    font-family: NeuHaasL, sans-serif !important;
    src: url(../fonts/NeueHaasDisplayLight.ttf);
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

section {
    width: 100%;
    overflow-x: hidden;
}

.bgBlack {
    background: #000;
}

#hr {
    width: 100%;
    height: 2px;
    background: var(--black);
}

#hrw {
    width: 100%;
    height: 2px;
    background: var(--white);
}

/*------------------------ Canvas ---------------------*/
#gradient-canvas {
    width: 100%;
    --gradient-color-1: #0112B1;
    --gradient-color-2: #F870EA;
    --gradient-color-3: #066AC5;
    --gradient-color-4: #0CCFDC;
    z-index: 0;
    clip-path: circle(88.6% at 33% 0);
    border-radius: 0 0 100% 60%;
    filter: blur(40px);
    pointer-events: none;
    overflow: hidden;
    position: relative;
}

.canvas1 {
    height: 50vw;
}

.canvas2 {
    height: 40vw;
}
/*------------------------------------------------------*/

.btn {
    color: #fff;
    border: 2px solid #fff;
    background: transparent;
    font-size: 24px;
    padding: 18px 36px;
    border-radius: 50px;
    font-weight: bold;
    transition: all .5s ease;
}

.btn:hover {
    color: #000;
    border: 2px solid #fff;
    background: #fff;
}

/*- LONG ARROW BTN -*/
.arrowbtn {
    display: flex;
    align-items: baseline;
    font-size: 24px;
    color: #000;
    font-weight: bold;
    position: relative;
    width: fit-content;
}

.arrowbtn span {
    margin-left: 30px;
    transition: all .3s ease
}

.arrowbtn span img {
    width: 5.2vw;
}

.arrowbtn:hover span {
    margin-left: 50px;
}

.arrowbtn::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1.7px;
    bottom: 0;
    left: 0;
    background-color: #000;
    transform-origin: right;
    transition: transform 0.2s ease-out;
}

.arrowbtn:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}


/*- ROUND BTN -*/
.roundbtn {
    background: #000;
    display: inline-block;
    color: #fff;
    border-radius: 50%;
    padding: 1vw;
    height: 10.4vw;
    width: 10.4vw;
    position: relative;
    outline: none;
    border: 2px solid #000;
    box-sizing: content-box;
    mix-blend-mode: difference;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5vw;
    text-align: center;
    font-weight: bold;
    letter-spacing: -1px;
}

.roundbtn::before {
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
    display: inline-block;
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 0;
    box-sizing: border-box;
    z-index: -2;
    left: 50%;
    top: 50%;
    height: 0;
}

.roundbtn:hover::before {
    background: #fff;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.roundbtn:hover {
    color: #000;
}

/*----------------- FOTNS Styling ---------------*/

.font-220 {
    font-size: 10.5vw;
    font-family: NeuHaasB, sans-serif !important;
    line-height: 11.5vw;
    letter-spacing: -5px;
    word-spacing: -2px;
}

.font-80 {
    font-size: 4.16vw;
    font-family: NeuHaasRoman, sans-serif !important;
    line-height: 130%;
    letter-spacing: -3px;
}

.font-56 {
    font-size: 2.9vw;
    letter-spacing: -1.5px;
    word-spacing: -2px;
    font-family: NeuHaasRoman, sans-serif !important;
}

.font-36 {
    font-size: 1.87vw;
    font-family: NeuHaasM, sans-serif !important;
    letter-spacing: -1px;
}

.font-32 {
    font-size: 1.67vw;
    font-family: NeuHaasRoman, sans-serif !important;
}

.font-30 {
    font-size: 1.56vw;
    font-family: NeuHaasRoman, sans-serif !important;
    line-height: 150%;
    letter-spacing: -.8px;
}

.font-24 {
    font-size: 1.25vw;
}

.font-22 {
    font-size: 1.14vw;
    letter-spacing: -.5px;
}

.font-14 {
    font-size: 0.72vw;
    font-family: NeuHaasL, sans-serif !important;
}

.text-white {
    color: #fff;
}

.text-bold {
    font-weight: bold;
    font-family: NeuHaasB, sans-serif !important;
}

.text-grey {
    color: #4D4D4D;
}

/*------------- Spacing -------------------*/
.container {
    padding-left: 6.250vw;
    padding-right: 6.250vw;
}

.containerV {
    padding-top: 15.6vw;
    padding-bottom: 15.6vw;
}

.containerpt {
    padding-top: 15.6vw;
}

.containerpb {
    padding-bottom: 15.6vw;
}

.mL50 {
    margin-left: 2.6vw;
}

.mT150 {
    margin-top: 7.8vw;
}

.mT100 {
    margin-top: 5.2vw;
}

.mT70 {
    margin-top: 3.6vw;
}

.mT50 {
    margin-top: 2.6vw;
}

.mT20 {
    margin-top: 1vw;
}

/*----------------- similar-code ------------------*/
.col-2 {
    display: flex;
}

.col-2 .col-2-L {
    width: 33%;
}

.col-2 .col-2-R {
    width: 67%;
}

/**------------------ Flip-Text-hover -----------------------**/
.m-flip {
    overflow: hidden;
    cursor: pointer;
}

.m-flip_item {
    display: block;
    position: relative;
    top: 0;
    transition: top 0.4s ease-out 0s;
}

/**------------------  Parallax-img -----------------------**/
.cnt {
    overflow: hidden;
}

.cnt img {
    width: 100%;
    object-fit: cover;
}

/*---------- parallax vedio --------*/
.cnt2 {
    overflow: hidden;
}

.cnt2 img {
    width: 100%;
    object-fit: cover;
}
/*------------------- Vedio ------------------------*/

#vedio{
    position: relative;
}

#vedio img:nth-child(2) {
    cursor: pointer;
    width: 5vw;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all .3s ease;
}


#vedio img:nth-child(2):hover{
    scale: .9;
} 

@media (max-width: 1660px) {

    /*- Nav -*/
    .nav-container header p {
        font-size: 1vw;
    }

    .nav-s {
        margin-right: 8vw;
    }

    .nav a {
        padding: 0;
        font-size: 3vw;
        margin-bottom: .3vw;
    }

    .nav-s a {
        margin-bottom: 1em;
        font-size: 1vw;
    }

    .follow-us a {
        margin-top: .5vw;
        font-size: 1.5vw;
    }
}

@media (max-width: 1440px) {

    /*- Nav -*/
    .navbar p {
        margin-left: 8vw;
    }
}

@media (max-width: 1280px) {

    .canvas1 {
        height: 60vw;
    }

    /*- Nav -*/
    .mforB {
        margin-right: 7vw;
    }

    .navbar p {
        margin-left: 10vw;
    }

    /*- Hero -*/
    .hero {
        padding-top: 18vw;
        top: 0%;
    }

    #circle1 {
        top: 27%;
    }
}

@media (max-width: 1028px) {

    /* btns */
    .btn {
        font-size: 18px;
        padding: 12px 24px;
    }

    /* nav */
    .logo {
        font-size: 25px;
    }

    .navbar p {
        font-size: 12px;
        margin-left: 10vw;
    }

    .hamburger {
        right: 6.25vw;
        top: 46px;
        padding: 5px;
    }

    .nav-trigger {
        width: 40px;
        height: 40px;
    }

    .nav-trigger span,
    .nav-trigger span::before,
    .nav-trigger span::after {
        width: 30px;
    }

    .nav-trigger span {
        left: 10px;
    }

    /* Footer */
    .slider {
        padding: 5.2vw 0 8vw 0;
    }

    .slider a {
        font-size: 2.5vw;
        border-radius: 5.2vw;
        padding: 1.5vw 2vw;
        margin: 0 10px;
    }

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

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

    .fbtn {
        font-size: 18px;
        padding: 12px 24px;
        margin-right: 10px;
    }
}

@media (max-width: 868px) {
    .canvas1 {
        height: 80vw;
    }
    .canvas2 {
        height: 75vw;
    }
    /* Btns */
    .arrowbtn {
        font-size: 20px;
    }

    .arrowbtn span {
        margin-left: 25px;
    }

    .arrowbtn span img {
        width: 8vw;
    }

    .roundbtn {
        padding: 1vw;
        height: 13vw;
        width: 13vw;
        margin: 0;
        font-size: 2vw;
    }

    /* Nav */
    .navbar {
        padding: 40px 4vw 0 4vw;
    }

    .mforB {
        margin-right: 8vw;
    }

    .navbar p {
        font-size: 12px;
        margin-left: 14vw;
    }

    .hamburger {
        right: 4vw;
        top: 40px;
    }

    /* slideNAV */
    .nav-container {
        max-width: 80vw;
    }

    .nav-container header p {
        font-size: 2vw;
    }

    .nav, .nav-s {
        margin-top: 5vw;
    }

    .nav-s {
        margin-right: 12.4vw;
    }

    .nav a {
        font-size: 7vw;
        margin: 0 0 1vw 0;
    }

    .nav-s a {
        margin: 1.3em 0;
        font-size: 2vw;
    }

    .follow-us {
        margin-top: 10vw;
    }

    .follow-us a {
        margin-top: 1vw;
        font-size: 3vw;
    }

    /* spacing */
    .container {
        padding-left: 4vw;
        padding-right: 4vw;
    }

    .containerV {
        padding-top: 20vw;
        padding-bottom: 20vw;
    }

    .containerpt {
        padding-top: 20vw;
    }

    .containerpb {
        padding-bottom: 20vw;
    }

    .mT100 {
        margin-top: 10.4vw;
    }

    .mT70 {
        margin-top: 7vw;
    }

    .mT50 {
        margin-top: 5.2vw;
    }

    .mT20 {
        margin-top: 2vw;
    }

    /* fonts */
    .font-220 {
        font-size: 13.5vw;
        line-height: 1.1;
        letter-spacing: -3px;
        word-spacing: -1px;
    }

    .font-80 {
        font-size: 6vw;
        line-height: 1.2;
        letter-spacing: -1px;
    }

    .font-56 {
        font-size: 4vw;
        line-height: 1.2;
    }

    .font-36 {
        font-size: 3.4vw;
    }

    .font-32 {
        font-size: 3vw;
        letter-spacing: -.5px;
    }

    .font-30 {
        font-size: 2.85vw;
        letter-spacing: -.3px;
    }

    .font-24 {
        font-size: 2.4vw;
    }

    .font-22 {
        font-size: 2.2vw;
        letter-spacing: 0;
    }

    /* similar-code */
    .col-2 .col-2-L {
        width: 30%;
    }

    .col-2 .col-2-R {
        width: 70%;
    }

    /* Hero */
    #gradient-canvas {
        clip-path: none;
        border-radius: 0 0 100% 80%;
    }

    .hero {
        padding-top: 25vw;
    }

    .circle {
        height: 20vw;
        width: 20vw;
    }

    .clogo {
        width: 4.5vw;
        height: 5vw;
        margin-left: 7px;
    }

    .ctext span {
        left: 50%;
        font-size: 2vw;
        transform-origin: 0 10vw;
    }

    #circle1 {
        top: 23%;
        right: 22%;
    }

    .roundicon {
        height: 6vw;
        width: 6vw;
    }

    .aicon {
        height: 3vw;
        width: 3vw;
    }

    /* project */
    #ptext {
        width: 70%;
    }

    .caseWrapper {
        gap: 4vw;
    }

    #caseitem2 {
        margin-top: 20vw;
    }

    #caseitem3 {
        margin-top: -25vw;
    }

    #caseitem4 {
        margin-top: 20vw;
    }

    .caseitem h3 {
        margin: 5vw 0 1.2vw 0;
    }

    .mrt {
        margin-top: -14vw;
        margin-left: 10vw;
    }

    /* clients */
    .clients {
        padding: 10vw 0 15vw 0;
    }

    .clientsname {
        padding: 8vw 0;
    }

    .clientsname p {
        font-size: 11vw;
    }

    #marquee {
        margin-top: 20vw;
    }

    .textcontainermarquee {
        gap: 5vw;
        flex-wrap: wrap;
    }

    .textcontainermarquee>div {
        width: 40vw;
    }

    .textcontainermarquee>div p {
        margin-top: 2vw;
    }

    .marquee {
        top: 10%;
    }

    .track p {
        font-size: 9vw;
        letter-spacing: -1px;
    }

    /* Philosophy */
    #circle2 {
        top: -10%;
        right: 0%;
    }

    .philR {
        width: 70%;
    }

    .philL {
        width: 30%;
    }

    /* follow */
    #circle3 {
        top: -10%;
        right: 20%;
    }

    .socialLinkscnt {
        margin-top: 15vw;
    }

    .panel a {
        height: 17vw;
    }

    #paneline {
        margin-top: 3.8vw;
    }

    .panel a .image img {
        width: 4vw;
        height: 4vw;
    }

    .panel a .image p {
        font-size: 8vw;
    }

    .hover-overlay {
        top: -27%;
    }

    .hover-marquee__text {
        font-size: 8vw;
    }

    .hover-marquee__text img {
        width: 4vw;
        height: 4vw;
        margin: 0 5vw;
    }

    .followdetails {
        display: flex;
        padding-top: 15vw;
        padding-bottom: 15vw;
        gap: 10vw;
    }

    .followdetails>div {
        width: 40%;
    }

    /*- footer -*/
    .footer {
        height: 113vw;
    }

    #gradient-canvass {
        width: 100%;
    }

    .footerContent p {
        font-size: 22vw;
        letter-spacing: -5px;
        line-height: 1;
        word-spacing: -10px;
    }

    .slider {
        padding: 8vw 0 12vw 0;
    }

    .slider a {
        font-size: 3vw;
        padding: 1.5vw 2.5vw;
    }

    .footerLink {
        margin: 5vw 0 3vw 0;
    }

    .footerLink a {
        font-size: 2.2vw;
        color: #000;
        position: relative;
    }

    .footerbottom {
        flex-direction: column;
    }

    .fcircle {
        height: 15vw;
        width: 15vw;
    }

    .ftext span {
        font-size: 1.8vw;
        transform-origin: 0 7.5vw;
    }

    /*-------------------------- Vedio -------------------------*/
    #vedio img:nth-child(2) {
        width: 8vw;
    }
}

@media (max-width: 670px) {
    .canvas1 {
        height: 95vw;
    }
    .canvas2 {
        height: 95vw;
    }
    /* btns */
    .btn {
        font-size: 16px;
        padding: 10px 20px;
    }

    .arrowbtn {
        font-size: 16px;
    }

    .arrowbtn span {
        margin-left: 10px;
    }

    .arrowbtn:hover span {
        margin-left: 20px;
    }

    .arrowbtn span img {
        width: 12vw;
    }

    .roundbtn {
        height: 22vw;
        width: 22vw;
        font-size: 3.6vw;
    }

    /* fonts */
    .font-220 {
        font-size: 14vw;
        line-height: 1.3;
        letter-spacing: -3px;
    }

    .font-80 {
        font-size: 7vw;
        line-height: 1.2;
        letter-spacing: 0px;
    }

    .font-56 {
        font-size: 6vw;
        letter-spacing: -.5px;
    }

    .font-36 {
        font-size: 4.6vw;
        letter-spacing: -.5px;
    }

    .font-32 {
        font-size: 4vw;
        letter-spacing: .5px;
    }

    .font-30 {
        font-size: 3.8vw;
        letter-spacing: 0;
    }

    .font-24 {
        font-size: 3.6vw;
        letter-spacing: .5px;
    }

    .font-22 {
        font-size: 3vw;
        line-height: 1.2;
    }

    /* spacing */
    .containerV {
        padding-top: 30vw;
        padding-bottom: 30vw;
    }

    .containerpt {
        padding-top: 30vw;
    }

    .containerpb {
        padding-bottom: 30vw;
    }

    .mL50 {
        margin-left: 7vw;
    }

    .mT100 {
        margin-top: 15vw;
    }

    .mT70 {
        margin-top: 10vw;
    }

    .mT50 {
        margin-top: 8vw;
    }

    .mT20 {
        margin-top: 5vw;
    }

    /* Nav */
    .navbar {
        padding: 20px 4vw 0 4vw;
    }

    .mforB {
        margin-right: 15vw;
    }

    .navbar p {
        display: none;
    }

    .hamburger {
        top: 20px;
        padding: 2px;
    }

    .nav-trigger span {
        left: 7px;
    }

    /* slideNAV */
    .nav-container {
        max-width: 100vw;
        padding: 0 5vw;
    }

    .nav-container header p {
        font-size: 4vw;
        letter-spacing: 1px;
    }

    .nav, .nav-s {
        margin-top: 10vw;
    }

    .nav-s {
        margin-right: 15vw;
    }

    .nav a {
        font-size: 10vw;
        margin: 0 0 3vw 0;
    }

    .nav-s a {
        letter-spacing: 1px;
        font-size: 4vw;
    }

    .follow-us {
        margin-top: 15vw;
    }

    .follow-us a {
        margin-top: 3vw;
        font-size: 5vw;
    }

    /* Hero */

    .hero {
        padding-top: 35vw;
    }

    #circle1 {
        top: 28%;
        right: 22%;
    }

    .texticon {
        margin-top: 10vw;
    }

    .roundicon {
        height: 10vw;
        width: 10vw;
    }

    .aicon {
        height: 5vw;
        width: 5vw;
    }

    /* about */
    .col-2 {
        flex-direction: column;
    }

    .col-2 .col-2-L {
        width: 100%;
    }

    .col-2 .col-2-R {
        width: 100%;
        padding-top: 8vw;
    }

    /* projects */
    #ptext {
        width: 100%;
    }

    .caseWrapper {
        gap: 0;
        flex-direction: column;
    }

    .caseitem {
        margin-bottom: 15vw;
    }

    #caseitem1,
    #caseitem2,
    #caseitem3,
    #caseitem4 {
        width: 100%;
        margin-top: 0;
    }

    .caseitem h3 {
        margin: 8vw 0 1vw 0;
    }

    .mrt {
        margin: 0;
        display: flex;
        justify-content: center;
    }

    /* clients */
    .clients {
        padding: 15vw 0 20vw 0;
    }

    .clientsname {
        padding: 10vw 0;
    }

    .clientsname p {
        font-size: 13vw;
    }

    #marquee {
        margin-top: 25vw;
    }

    .textcontainermarquee {
        gap: 0vw;
    }

    .textcontainermarquee>div {
        width: 45vw;
    }

    .textcontainermarquee>div h1 {
        margin-top: 5vw;
    }

    .textcontainermarquee>div p {
        margin-top: 3vw;
    }

    .marquee {
        top: 6%;
    }

    .track p {
        font-size: 11vw;
        letter-spacing: -1px;
    }

    /* philosophy */
    .philR {
        width: 100%;
    }

    .philL {
        width: 0%;
    }

    /* follow */
    .hover-overlay {
        top: -32%;
    }

    .followdetails {
        flex-direction: column;
        gap: 0;
    }

    .followdetails>div {
        width: 70%;
        margin: 10vw 0;
    }

    /* footer */
    .footer {
        height: 145vw;
    }

    .footerContent p {
        word-spacing: -1px;
    }

    .slider {
        padding: 10vw 0 15vw 0;
    }

    .slider a {
        font-size: 5vw;
        padding: 2vw 3vw;
    }

    .fbtn {
        font-size: 16px;
        padding: 10px 20px;
        margin-right: 5px;
    }

    .footerLink {
        margin: 10vw 0 7vw 0;
    }

    .footerLink a {
        font-size: 4vw;
    }

    .fcircle {
        height: 20vw;
        width: 20vw;
    }

    .ftext span {
        font-size: 2vw;
        transform-origin: 0 10vw;
    }

    /*---------------------------- Vedio --------------------------*/
    #vedio img:nth-child(2) {
        width: 12vw;
    }
    .cnt2 .vedio {
        height: 40vh;
    }
}

@media (max-width: 320px) {
    .mforB {
        display: none;
    }

    .hamburger {
        top: 10px;
    }

    .footer {
        height: 180vw;
    }

    .fbtn {
        display: block;
        margin-top: 8px;
        margin-right: 0;
    }
}