/*=========================================
  GOOGLE FONT
==========================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap');

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

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

html{
    scroll-behavior:smooth;
}

body{

    background:#050505;

    color:#fff;

    font-family:'Inter',sans-serif;

    overflow-x:hidden;

    min-height:100vh;

}

/*=========================================
  COLOR SYSTEM
==========================================*/

:root{

    --bg:#050505;

    --card:#0b120c;

    --card2:#111915;

    --primary:#39FF14;

    --primary-light:#7fff6d;

    --primary-dark:#17d300;

    --text:#ffffff;

    --text2:#b8c6b8;

    --line:rgba(57,255,20,.18);

    --glass:rgba(57,255,20,.05);

    --shadow:0 0 25px rgba(57,255,20,.25);

}

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

.container{

    width:min(1380px,92%);

    margin:auto;

}

/*=========================================
  BACKGROUND
==========================================*/

.background{

    position:fixed;

    inset:0;

    z-index:-100;

    overflow:hidden;

    background:#050505;

}

/*=========================================
 GRID
==========================================*/

.grid{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(57,255,20,.04) 1px,transparent 1px),

        linear-gradient(90deg,rgba(57,255,20,.04) 1px,transparent 1px);

    background-size:60px 60px;

    mask-image:radial-gradient(circle,#fff 20%,transparent 100%);

    opacity:.35;

}

/*=========================================
 BLOBS
==========================================*/

.blob{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    opacity:.22;

}

.blob1{

    width:420px;

    height:420px;

    background:#39FF14;

    top:-150px;

    left:-120px;

    animation:blobMove1 18s infinite ease-in-out;

}

.blob2{

    width:520px;

    height:520px;

    background:#00ff88;

    right:-180px;

    top:150px;

    animation:blobMove2 22s infinite ease-in-out;

}

.blob3{

    width:450px;

    height:450px;

    background:#39FF14;

    bottom:-200px;

    left:30%;

    animation:blobMove3 20s infinite ease-in-out;

}

/*=========================================
 NOISE
==========================================*/

.noise{

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.03;

    background-image:url("https://www.transparenttextures.com/patterns/asfalt-dark.png");

    z-index:-10;

}

/*=========================================
 SCROLLBAR
==========================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#090909;

}

::-webkit-scrollbar-thumb{

    background:#39FF14;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#67ff4e;

}

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

::selection{

    background:#39FF14;

    color:#000;

}

/*=========================================
 BUTTON
==========================================*/

.btn-primary{

    background:#39FF14;

    color:#000;

    border:none;

    padding:16px 34px;

    border-radius:40px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

    box-shadow:

        0 0 20px rgba(57,255,20,.35);

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:

        0 0 30px rgba(57,255,20,.6);

}

.btn-secondary{

    background:transparent;

    color:#39FF14;

    border:1px solid rgba(57,255,20,.3);

    padding:16px 34px;

    border-radius:40px;

    cursor:pointer;

    transition:.35s;

}

.btn-secondary:hover{

    background:#39FF14;

    color:#000;

}

/*=========================================
 ANIMATION
==========================================*/

@keyframes blobMove1{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(60px,40px);

    }

    100%{

        transform:translate(0,0);

    }

}

@keyframes blobMove2{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(-80px,60px);

    }

    100%{

        transform:translate(0,0);

    }

}

@keyframes blobMove3{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(-50px,-70px);

    }

    100%{

        transform:translate(0,0);

    }

}