/* ===========================================================
   GP ANSOR WARULOR SYSTEM
   DESIGN SYSTEM
   THEME
=========================================================== */

/* ==========================
   GOOGLE FONT
========================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ==========================
   ROOT
========================== */

:root{
	
body{

    font-family:'Poppins',sans-serif;

}


    /* Brand */

    --primary:#0B7A3B;
    --primary-light:#2DBE60;
    --primary-dark:#06582A;

    /* Neutral */

    --white:#FFFFFF;
    --black:#111827;

    --gray-50:#F9FAFB;
    --gray-100:#F3F4F6;
    --gray-200:#E5E7EB;
    --gray-300:#D1D5DB;
    --gray-400:#9CA3AF;
    --gray-500:#6B7280;
    --gray-600:#4B5563;
    --gray-700:#374151;
    --gray-800:#1F2937;

    /* Background */

    --background:#F5F8F6;

    /* Success */

    --success:#16A34A;

    /* Warning */

    --warning:#F59E0B;

    /* Danger */

    --danger:#DC2626;

    /* Border Radius */

    --radius-xs:6px;
    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:22px;
    --radius-xl:30px;

    /* Shadow */

    --shadow-sm:
        0 2px 8px rgba(0,0,0,.05);

    --shadow-md:
        0 10px 25px rgba(0,0,0,.08);

    --shadow-lg:
        0 18px 45px rgba(0,0,0,.10);

    --shadow-xl:
        0 25px 60px rgba(0,0,0,.12);

    /* Transition */

    --transition:.30s ease;

}

/* ==========================
   RESET
========================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    font-size:16px;

    color:var(--gray-700);

    background:var(--background);

    line-height:1.7;

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

}

button{

    border:none;

    outline:none;

    background:none;

    font-family:inherit;

}

input,
select,
textarea{

    font-family:inherit;

    outline:none;

}

ul{

    list-style:none;

}

/* ==========================
   TYPOGRAPHY
========================== */

h1{

    font-size:64px;

    line-height:1.1;

    font-weight:800;

}

h2{

    font-size:42px;

    font-weight:700;

}

h3{

    font-size:28px;

    font-weight:700;

}

h4{

    font-size:22px;

    font-weight:600;

}

p{

    color:var(--gray-500);

}

/* ==========================
   SELECTION
========================== */

::selection{

    background:var(--primary);

    color:white;

}