@import url(https://db.onlinewebfonts.com/c/2b84539c32b7d1a739b9651ad495b4ef?family=Founders+Grotesk+X-Cond+SmBd);
@import url(https://db.onlinewebfonts.com/c/b374aadadff55ad5399d44d1adc6f7da?family=Neue+Haas+Unica+W04+XBlack+It);

:root {
    --secondary-font: "Neue Haas Unica W04 XBlack";
    --primary-font: "Founders Grotesk X-Cond SmBd";
    --ocour: rgb(255, 204, 0);
    --gray: gray
}

::selection {
    text-shadow: none;
    background-color: var(--ocour);
    color: black;
}

* {
    padding: 0px 0px;
    margin: 0px 0px;
    font-family: Segoe UI;
    box-sizing: border-box;
    font-family: "Founders Grotesk X-Cond SmBd";

}

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

li {
    list-style: none;
}

section {
    min-height: 80vh;
    background-color: black;
    max-width: 100vw;
}


nav {
    height: 7vh;
    width: 100vw;
    position: fixed;
    z-index: 2200;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    padding: 3vw 5vw;
}

nav div {
    display: flex;
    color: white;
    justify-content: space-between;
    width: 100%;
    font-size: 3rem;

}

.hero div {
    display: flex;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
}

.hero div h1 {
    font-size: 12vw;
    text-transform: uppercase;
    color: white;
    text-align: center;
    padding: 10vw 0;
    position: relative;
    z-index: 2;
}

.hero .imgLeft {
    height: 30%;
    position: absolute;
    left: 20%;
    top: 60%;
    border-radius: 1rem;
}

.imgRight {
    left: 65%;
    position: absolute;
    height: 55%;
    top: -10%;
    border-radius: 1rem;
}

.og {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    color: var(--ocour);
    z-index: 2000;
}

.sectionTitle {
    font-size: 3vw;
    color: white;
    font-weight: 400;
    text-align: center;
    letter-spacing: 7px;
}


.client,
.about {
    padding: 5vw 4vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
}


/* Swiper */
.swiper {
    width: 100%;
    height: 200px;
    margin: 4vw 0;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    /* background: #444; */
    width: 80%;
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.swiper-slide img {
    width: 50%;
}

.about {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.about img {
    width: 40%
}

.textWrapper {
    position: relative;
    text-align: center;
}

.textWrapper p {
    font-size: 1.4vw;
    max-width: 40vw;
    margin: 2vw 0;
    color: var(--gray);
    font-weight: 100;
    font-style: normal;
    font-family: var(--secondary-font);
}

.getStarted {
    background-color: transparent;
    font-size: 1.2vw;
    border: 0;
    color: white;
    font-family: var(--secondary-font);

}

.getStarted img {
    width: 20px;
    transform: rotate(95deg);
    display: inline-block;

}

.getStarted:hover {
    color: var(--ocour)
}

.bigText {
    font-size: 8vw;
    color: white;
    text-transform: uppercase;
    text-align: center;
}


/* Card Animation */
.services {
    padding: 10vw 4vw;
}

.cards {
    list-style: none;
    padding-left: 0;
    max-width: 80%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 90vh);
    gap: 4vw;
}

.card {
    position: sticky;
    top: 0;
    padding-top: calc(4vw * 2);
    background-color: black;
}

.card-body video {
    max-width: 40vw;
}

#card1 {
    --index: 1;
}

#card2 {
    --index: 2;
    /* background-color: green; */
}

#card3 {
    --index: 3;
    /* background-color: yellow; */
}

#card4 {
    --index: 4;
    /* background-color: pink; */
}

.card-body {
    display: flex;
    justify-content: space-evenly;
    border-top: 2px solid var(--gray);
    padding: 4vw;
    color: white;
}

.card-body h2 {
    font-size: 7vw;
    display: inline-block;
}

.card-body p {
    font-size: 1vw;
    max-width: 70%;
    font-family: var(--secondary-font);
    color: var(--gray);
}

/* Featured */
.featured {
    & .flex {
        display: flex;
        justify-content: space-between;
        color: white;
        align-items: center;
        max-width: 80%;
        margin: 0 auto;

        & span {
            font-size: 5vw;
        }

        & p {
            font-size: 2vw;
            max-width: 40%;
            color: var(--gray);
        }
    }

    border-top: 2px solid var(--gray);
}

.featured .img {
    max-width: 80%;
    margin: 0 auto;
}

.featured .img img {
    width: 100%;
}

.textLeft {
    font-size: 5vw;
    text-transform: uppercase;
    padding: 1vw 0;
    color: white;
}

.mobileNav {
    display: none;
}

.whiteSection {
    background-color: white;
    padding: 4vw 6vw;


    & .flex {
        display: flex;
        gap: 4rem;
        justify-content: space-evenly;

        & .collab {
            width: 40%;
        }
    }

}



.btnWrapper {
    display: flex;
    align-items: center;
    color: black;

    & .getStarted {
        color: black;
    }

    & .getStarted:hover {
        color: var(--ocour);
    }
}

.btnWrapper img {
    width: 20px;
    transform: rotate(95deg);
    display: inline-block;
    margin: 0 1rem;

}


.content h2 {
    font-size: 2.5vw;
    font-family: var(--secondary-font);
    max-width: 80%;
}

.content p {
    font-size: 1.2vw;
    font-family: var(--secondary-font);
    max-width: 70%;
    margin: 1vw 0;
    color: var(--gray);
}

.contentWrapper {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
}

.end {
    padding: 2vw 6vw;
    display: flex;
    justify-content: space-between;

    & p {
        font-size: 2vw;
        color: white;
        padding: 1vw 0;
    }

    & .textLeft {
        flex: 1;
    }

    & .flexcol {
        display: flex;
        flex: 1;
        flex-direction: column;

        & video {
            max-width: 70%;
        }
    }


}

footer {
    border-top: 2px solid var(--gray);
    background-color: black;
    padding: 2vw 6vw;
}

footer ul li {
    font-family: var(--secondary-font);
    color: var(--gray);
    margin-bottom: 1rem;

}

.footerItems {
    display: flex;
    gap: 2vw;
    font-size: 1vw;
}

.footerItems ul li:hover {
    color: white;
}

.footerTitle {
    font-size: 1.5vw;
    color: white;
}

@media(max-width:769px) {

    .mobileNav {
        height: 100vh;
        background-color: var(--ocour);
        position: absolute;
        right: 0;
        top: 0;
        max-width: 500px;
        z-index: 10;
        display: block;
    }

    .moveNav {
        transform: translateX(100%);
        display: block;
    }

    .mobileNav ul li {
        font-size: 3.5vw;
        font-family: var(--primary-font);
        text-transform: uppercase;

    }

    section {
        min-height: 45vh;
    }

    .client,
    .about {

        & h3 {
            font-size: 11vw;
        }
    }

    .swiper-slide img {
        width: 100%;
    }

    .hero {
        min-height: 70vh;
        padding: 5vw;
    }

    .hero div h1 {
        font-size: 17vw;
        text-align: left;
        margin-bottom: 10vw;

    }

    .bigText {
        font-size: 15vw;
    }

    .textLeft {
        font-size: 15vw;
    }

    & .flex {
        flex-direction: column;
    }


    .about img {
        width: 100%;
    }

    .textWrapper p {
        font-size: 5vw;
        max-width: 100vw;
    }

    .getStarted {
        display: flex;
        margin: 4vw auto;
        font-size: 5vw;

        & span {
            font-size: 7vw;
        }

        & img {
            width: 30px;
            margin: 0 1rem;
        }
    }

    .featured .flex {
        align-items: start;
    }

    .whiteSection .flex {
        gap: 2rem;

        & .collab {
            width: 100%;
        }
    }

    .contentWrapper p {
        max-width: 100%;
        font-size: 4vw;
    }

    .contentWrapper h2 {
        font-size: 5vw;
        max-width: 100%;
    }

    .card-body {
        flex-direction: column;
    }

    .card-body div h2 {
        font-size: 12vw;
        margin-bottom: 4vw;
    }

    .card-body div p {
        font-size: 5.5vw;
        max-width: 100%;
        margin-bottom: 4vw;
    }

    .card-body video {
        max-width: 100%;
    }

    .btnWrapper .getStarted {
        color: black;
    }

    .contentWrapper {
        align-items: center;
    }

    .end {
        flex-direction: column;
    }

    .end {
        & .flexcol {
            & video {
                max-width: 100%;
            }
        }
    }

    .end {
        & p {
            font-size: 7vw;
        }
    }

    nav div h2 {
        font-size: 10vw;
    }

    nav p {
        font-size: 10vw;
    }

    .footerItems {
        font-size: 5vw;
    }

    .footerTitle {
        font-size: 5vw;
    }

    .imgRight,.imgLeft {
        display: none;
    }
}