/* ----------------------------------------------------------------------
    STYLE GUIDE
---------------------------------------------------------------------- */

:root {
	/*? font family */
	--font-rubik: "Rubik";

	/*? font size */
	--heading1: 56px;
	--heading2: 48px;
	--heading3: 36px;
	--heading4: 24px;
	--paragraph1: 20px;
	--paragraph2: 18px;
	--paragraph3: 14px;

	/*? font weight */
	--semi-bold: 600;
	--medium: 500;
	--regular: 400;
	--thin: 300;

	--primary: #f1ff99;
	--secondary: #3e4436;

	/*? neutral color */
	--neutral-50: #f6f6f6;
	--neutral-100: #e7e7e7;
	--neutral-200: #d1d1d1;
	--neutral-300: #b0b0b0;
	--neutral-400: #888888;
	--neutral-500: #6d6d6d;
	--neutral-600: #5d5d5d;
	--neutral-700: #4f4f4f;
	--neutral-800: #454545;
	--neutral-900: #3d3d3d;
	--neutral-950: #1d1d1d;

	--primary-50: #fdf4f3;
	--primary-100: #fce5e4;
	--primary-200: #fad1ce;
	--primary-300: #f5b0ac;
	--primary-400: #ee827b;
	--primary-500: #e25951;
	--primary-600: #cb3a31;
	--primary-700: #ad3028;
	--primary-800: #8f2b25;
	--primary-900: #772a25;
	--primary-950: #40120f;

	--secondary-50: #f6f7f9;
	--secondary-100: #eceef2;
	--secondary-200: #d5dae2;
	--secondary-300: #afb9ca;
	--secondary-400: #8494ac;
	--secondary-500: #657792;
	--secondary-600: #505f79;
	--secondary-700: #424e62;
	--secondary-800: #374050;
	--secondary-900: #333a47;
	--secondary-950: #22262f;
	/*? transition  */
	--default-transition: all ease-in-out 300ms;
}

/* ----------------------------------------------------------------------
    Typography
---------------------------------------------------------------------- */
.heading1 {
	font-size: var(--heading1);
	font-weight: var(--semi-bold);
}
.heading2 {
	font-size: var(--heading2);
	font-weight: var(--semi-bold);
}
.heading3 {
	font-size: var(--heading3);
	font-weight: var(--semi-bold);
}
.heading4 {
	font-size: var(--heading4);
	font-weight: var(--semi-bold);
}
.paragraph1 {
	font-size: var(--paragraph1);
	font-weight: var(--medium);
}
.paragraph2 {
	font-size: var(--paragraph2);
	font-weight: var(--regular);
}
.paragraph3 {
	font-size: var(--paragraph3);
	font-weight: var(--regular);
}

/* ----------------------------------------------------------------------
    Components
---------------------------------------------------------------------- */
.primary50 {
	color: var(--primary-50);
}
.primary100 {
	color: var(--primary-100);
}
.primary200 {
	color: var(--primary-200);
}
.primary300 {
	color: var(--primary-300);
}
.primary400 {
	color: var(--primary-400);
}
.primary500 {
	color: var(--primary-500);
}
.primary600 {
	color: var(--primary-600);
}
.primary700 {
	color: var(--primary-700);
}
.primary800 {
	color: var(--primary-800);
}
.primary900 {
	color: var(--primary-900);
}
.primary950 {
	color: var(--primary-950);
}
.secondary50 {
	color: var(--secondary-50);
}
.secondary100 {
	color: var(--secondary-100);
}
.secondary200 {
	color: var(--secondary-200);
}
.secondary300 {
	color: var(--secondary-300);
}
.secondary400 {
	color: var(--secondary-400);
}
.secondaary500 {
	color: var(--secondary-500);
}
.secondary600 {
	color: var(--secondary-600);
}
.secondary700 {
	color: var(--secondary-700);
}
.secondary800 {
	color: var(--secondary-800);
}
.secondary900 {
	color: var(--secondary-900);
}
.secondary950 {
	color: var(--secondary-950);
}

.bg-primary-50 {
    background-color: var(--primary-50);
}
.bg-primary-100 {
    background-color: var(--primary-100);
}
.bg-primary-200 {
    background-color: var(--primary-200);
}
.bg-primary-300 {
    background-color: var(--primary-300);
}
.bg-primary-400 {
    background-color: var(--primary-400);
}
.bg-primary-500 {
    background-color: var(--primary-500);
}
.bg-primary-600 {
    background-color: var(--primary-600);
}
.bg-primary-700 {
    background-color: var(--primary-700);
}
.bg-primary-800-siakad {
    background-color: var(--primary-800 !important);
}
.bg-primary-900 {
    background-color: var(--primary-900);
}
.bg-primary-950 {
    background-color: var(--primary-950);
}
.bg-secondary-800 {
    background-color: var(--secondary-800);
}
.bg-secondary-50 {
    background-color: var(--secondary-50);
}
.bg-secondary-100 {
    background-color: var(--secondary-100);
}
.bg-secondary-200 {
    background-color: var(--secondary-200);
}
.bg-primary-300 {
    background-color: var(--secondary-300);
}
.bg-secondary-400 {
    background-color: var(--secondary-400);
}
.bg-secondary-500 {
    background-color: var(--secondary-500);
}
.bg-secondary-600 {
    background-color: var(--secondary-600);
}
.bg-secondary-700 {
    background-color: var(--secondary-700);
}
.bg-secondary-800 {
    background-color: var(--secondary-800);
}
.bg-secondary-900 {
    background-color: var(--secondary-900);
}
.bg-secondary-950 {
    background-color: var(--secondary-950);
}
/* ----------------------------------------------------------------------
    Components
---------------------------------------------------------------------- */
.btn-primary-siakad {
    padding: 12px 24px;
    font-size: var(--paragraph3);
    background-color: var(--primary-700);
    color:var(--neutral-50);
    border-radius: 8px;
    border: none;
}

.badge-primary {
	background-color: var(--primary-900);
    color: var(--primary-50);
    font-size: var(--paragraph3);
    padding: 3px 6px;
    border-radius: 4px;
}

.badge-secondary {
	background-color: var(--secondary-900);
    color: var(--secondary-50);
    font-size: var(--paragraph3);
    padding: 3px 6px;
    border-radius: 4px;
}

.title-info{
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient:vertical;
    display:-webkit-box;
}