@import url("navbar.css");
@import url("hero.css");
@import url("services.css");
@import url("approach.css");
@import url("work.css");
@import url("about.css");
@import url("cta.css");
@import url("footer.css");
@import url("loader.css");


/* =========================================
   SHARP GROTESK
   ========================================= */

@font-face {
    font-family: "Sharp Grotesk";
    src: url("../assets/fonts/SharpGrotesk-Thin.otf") format("opentype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sharp Grotesk";
    src: url("../assets/fonts/SharpGrotesk-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sharp Grotesk";
    src: url("../assets/fonts/SharpGrotesk-Book.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sharp Grotesk";
    src: url("../assets/fonts/SharpGrotesk-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sharp Grotesk";
    src: url("../assets/fonts/SharpGrotesk-SemiBold.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sharp Grotesk";
    src: url("../assets/fonts/SharpGrotesk-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sharp Grotesk";
    src: url("../assets/fonts/SharpGrotesk-Black.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


/* =========================================
   KURU DESIGN SYSTEM
   ========================================= */

:root {
    --kuru-lime: #DBE01F;

    --black: #000000;
    --white: #FFFFFF;
    --off-white: #F4F4F0;
    --dark-gray: #111111;
    --mid-gray: #777777;

    --border: 1px solid rgba(255, 255, 255, 0.2);

    --container: 1400px;

    --font-main: "Sharp Grotesk", Arial, Helvetica, sans-serif;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================
   RESET
   ========================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;

    width: 100%;
    max-width: 100%;

    scroll-behavior: smooth;

    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;

    width: 100%;
    max-width: 100%;

    background: var(--black);
    color: var(--white);

    font-family: var(--font-main);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    overflow-x: hidden;
}


/* =========================================
   MEDIA
   ========================================= */

img,
video {
    display: block;
    max-width: 100%;
}

button,
a {
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================
   GLOBAL CONTAINER
   ========================================= */

.kuru-container {
    width: min(
        calc(100% - 80px),
        var(--container)
    );

    margin-inline: auto;
}


/* =========================================
   SECTIONS
   ========================================= */

section {
    position: relative;
    width: 100%;
}


/* =========================================
   SELECTION
   ========================================= */

::selection {
    background: var(--kuru-lime);
    color: var(--black);
}


/* =========================================================
   KURU CUSTOM CURSOR
   ========================================================= */

html,
body {
    cursor: none;
}


a,
button,
[role="button"],
.kuru-project {
    cursor: none;
}


.kuru-cursor {
    position: fixed;

    left: 0;
    top: 0;

    width: 40px;
    height: 40px;

    pointer-events: none;

    z-index: 2147483647;

    opacity: 0;

    transform:
        translate3d(-50%, 0, 0);

    transition:
        opacity 0.15s ease;

    will-change: transform;
}


.kuru-cursor.is-visible {
    opacity: 1;
}


.kuru-cursor img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition:
        transform 0.12s
        cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;
}


.kuru-cursor.is-clicking img {
    transform: scale(0.65);
}


input,
textarea {
    cursor: text;
}


/* =========================================
   TOUCH DEVICES
   ========================================= */

@media (hover: none), (pointer: coarse) {

    html,
    body {
        cursor: auto;
    }

    .kuru-cursor {
        display: none;
    }

}




/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 768px) {

    .kuru-container {
        width: min(
            calc(100% - 40px),
            var(--container)
        );
    }


    
}