/* ===============================
   VARIABLE WARNA
================================ */
:root{
    --brown-primary: #8B4513;
    --brown-soft: #896C6C;
    --dark-text: #3a3432;
    --blue-dark: #132440;
    --light-bg: #ECE4DB;
    --light-white-smoke: #EEEEEE;

    /* FONT SIZE */
    --font-12: 12px;
    --font-13: 13px;
    --font-14: 14px;
    --font-15: 15px;
    --font-16: 16px;
    --font-18: 18px;
    --font-20: 20px;

}

/* ===============================
   Ukuran Font
================================ */
body {
    font-family: Roboto, sans-serif;
    line-height: 1.9;
}
/* ===============================
   NAVIGATION
================================ */
nav a{
    color: var(--dark-text);
    transition: color 0.3s ease;
}

nav a:hover,
nav a:active{
    color: var(--brown-primary);
}

/* underline animation */
.nav-underline{
    position: relative;
}

.nav-underline::after{
    content: '';
    position: absolute;
    left: 15%;
    bottom: -12px;
    width: 0;
    height: 3px;
    background-color: var(--brown-primary);
    transition: width 0.3s ease;
}

.nav-underline:hover::after,
.nav-underline.active::after{
    width: 70%;
}


.text-12 {
    font-size:var(--font-12) ;
}

.text-13 {
    font-size:var(--font-13) ;
}
.text-14 {
    font-size:var(--font-14) ;
}
.text-15 {
    font-size:var(--font-15) ;
}
.text-16 {
    font-size:var(--font-16) ;
}
.text-18 {
    font-size:var(--font-18) ;
}

.text-20 {
    font-size:var(--font-20) ;
}

.bg-grey-em{
    background-color: var(--light-white-smoke);
}