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

:root{
    --site-font:'Poppins', Arial, sans-serif;

    /* FONT SIZE */
    --fs-xs:11px;
    --fs-sm:12px;
    --fs-md:13px;
    --fs-base:14px;
    --fs-lg:15px;
    --fs-xl:18px;
    --fs-2xl:24px;
    --fs-3xl:32px;
    --fs-4xl:40px;

    /* FONT WEIGHT */
    --fw-light:300;
    --fw-regular:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;
    --fw-extra:800;

    /* LINE HEIGHT */
    --lh-tight:1.12;
    --lh-normal:1.55;
    --lh-relaxed:1.72;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--site-font);

    font-size:var(--fs-base);
    font-weight:var(--fw-regular);
    line-height:var(--lh-normal);

    color:#4f657c;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;
}

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

*{
    box-sizing:border-box;
}

h1,h2,h3,h4,h5,h6,
p,a,span,button,input,textarea,select,label,li,td,th{
    font-family:var(--site-font);
}

/* =========================================================
   HEADINGS
========================================================= */

h1{
    font-size:var(--fs-4xl);
    font-weight:var(--fw-extra);
    line-height:var(--lh-tight);
    letter-spacing:-0.04em;
}

h2{
    font-size:var(--fs-3xl);
    font-weight:var(--fw-bold);
    line-height:1.18;
    letter-spacing:-0.03em;
}

h3{
    font-size:var(--fs-2xl);
    font-weight:var(--fw-bold);
    line-height:1.22;
}

h4{
    font-size:var(--fs-xl);
    font-weight:var(--fw-semibold);
}

h5{
    font-size:var(--fs-lg);
    font-weight:var(--fw-semibold);
}

h6{
    font-size:var(--fs-base);
    font-weight:var(--fw-semibold);
}

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

p{
    font-size:var(--fs-base);
    font-weight:var(--fw-regular);
    line-height:var(--lh-relaxed);
}

small{
    font-size:var(--fs-xs);
}

span{
    line-height:inherit;
}

/* =========================================================
   LINKS
========================================================= */

a{
    color:inherit;
    text-decoration:none;
    transition:.25s ease;
}

/* =========================================================
   FORM
========================================================= */

button,
input,
textarea,
select{
    font:inherit;
    outline:none;
}

button{
    cursor:pointer;
}

/* =========================================================
   TABLE
========================================================= */

table{
    font-size:var(--fs-sm);
}

th{
    font-size:var(--fs-sm);
    font-weight:var(--fw-semibold);
}

td{
    font-size:var(--fs-sm);
    font-weight:var(--fw-regular);
}

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

@media(max-width:768px){

    :root{
        --fs-xs:10px;
        --fs-sm:11px;
        --fs-md:12px;
        --fs-base:13px;
        --fs-lg:14px;
        --fs-xl:16px;
        --fs-2xl:20px;
        --fs-3xl:26px;
        --fs-4xl:34px;
    }

}