:root {
    --color-primary: #BE5103;
    --color-secondary: #FF6F00;
    --color-assist: #FCD34D;
    --color-assist-2: #FBBF2A;
    /* --color-assist: #FBBF24; */
    --color-accent: #F59E0B;
    --color-placeholder: #a6a6a6;

    --color-yellow-50: #FDE68A;

    --color-white: #FFFFFF;
    --color-white-100: #FCFCFC;
    --color-black: #000000;
    --color-black-100: #0F1727;

    --color-cream: #FFF9EC;
    --color-cream-50: #FAF7EA;
    --color-cream-100: #F4EEDD;
    --color-cream-150: #FFFBEB;
    --color-cream-200: #EFE5C8;
    --color-cream-300: #FEF3C7;

    --color-stone: #F6F6F6;
    --color-stone-50: #F8F7F5;
    --color-stone-100: #E5E7EB;
    --color-stone-150: #9CA3AF;
    --color-stone-200: #6B7380;
    --color-stone-300: #707070;
    --color-stone-400: #D1D5DB;
    --color-ruby: #902109;
    --color-desert: #D97706;
    --color-desert-50: #D9771C;
    --color-desert-100: #D46516;
    --color-caramel: #78350F;
    --color-karry: #FEDBC0;
    --color-linen: #FFEFE2;
    --color-navy: #08386F;
    --color-mix: #d98312;
    --color-mix-2: #FCF6ED;
    --color-transparent: #FFFFFF00;
    --color-metallic-orange: #EB6D0D;
    --color-sinopia: #D54B16;

    --gradient-start: var(--color-primary);
    --gradient-end: var(--color-assist);

    --color-shadow-primary: rgba(190, 81, 3, 0.7);
    --color-shadow-secondary: rgba(255, 111, 0, 0.7);
    --color-shadow-assist: rgba(251, 191, 36, 0.7);

    --color-shadow-white-100: rgba(255, 255, 255, 0.5);
    --color-shadow-white-200: rgba(255, 255, 255, 0.3);
    --color-shadow-blue: rgba(32, 41, 56, 0.7);
    --color-shadow-accent: rgba(245, 158, 11, 0.7);

    --color-stone-dessert: #E9E8E7;

    --color-tab-special-1: #D2CD04;
    --color-tab-special-2: #7093D2;
    --color-tab-special-3: #C9B3DF;
    --color-tab-special-4: #FDA067;
    --color-tab-special-5: #FCCCE9;
    --color-tab-special-6: #F2E976;
    --color-tab-special-7: #83BC5C;
    --color-tab-special-8: #C79486;

    --rotate-0: 0deg;
    --rotate-45: 45deg;
    --rotate-90: 90deg;
    --rotate-135: 135deg;
    --rotate-180: 180deg;
    --rotate-270: 270deg;
    --rotate-315: 315deg;

    --text-52: 52px;
    --text-48: 48px;
    --text-36: 36px;
    --text-24: 24px;
    --text-20: 20px;
    --text-18: 18px;
    --text-16: 16px;
}

/* ========== COLORS ========== */
/* TEXT */
.text-primary {
    color: var(--color-primary) !important;
}

.text-secondary {
    color: var(--color-secondary) !important;
}

.text-assist {
    color: var(--color-assist) !important;
}

.text-accent {
    color: var(--color-accent) !important;
}

.text-white {
    color: var(--color-white) !important;
}

.text-white-100 {
    color: var(--color-white-100) !important;
}

.text-black {
    color: var(--color-black) !important;
}

.text-black-100 {
    color: var(--color-black-100) !important;
}

.text-cream {
    color: var(--color-cream) !important;
}

.text-cream-100 {
    color: var(--color-cream-100) !important;
}

.text-cream-200 {
    color: var(--color-cream-200) !important;
}

.text-stone {
    color: var(--color-stone) !important;
}

.text-stone-100 {
    color: var(--color-stone-100) !important;
}

.text-stone-150 {
    color: var(--color-stone-150) !important;
}

.text-ruby {
    color: var(--color-ruby) !important;
}

.text-desert {
    color: var(--color-desert) !important;
}

.text-caramel {
    color: var(--color-caramel) !important;
}

.text-karry {
    color: var(--color-karry) !important;
}

.text-navy {
    color: var(--color-navy) !important;
}

/* BACKGROUND */
.bg-transparent {
    background-color: transparent;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
}

.bg-assist {
    background-color: var(--color-assist) !important;
}

.bg-assist-2 {
    background-color: var(--color-assist-2) !important;
}

.bg-accent {
    background-color: var(--color-accent) !important;
}

.bg-white {
    background-color: var(--color-white) !important;
}

.bg-white-100 {
    background-color: var(--color-white-100) !important;
}

.bg-black {
    background-color: var(--color-black) !important;
}

.bg-black-100 {
    background-color: var(--color-black-100) !important;
}

.bg-cream {
    background-color: var(--color-cream) !important;
}

.bg-cream-100 {
    background-color: var(--color-cream-100) !important;
}

.bg-cream-200 {
    background-color: var(--color-cream-200) !important;
}

.bg-stone {
    background-color: var(--color-stone) !important;
}

.bg-stone-50 {
    background-color: var(--color-stone-50) !important;
}

.bg-stone-100 {
    background-color: var(--color-stone-100) !important;
}

.bg-ruby {
    background-color: var(--color-ruby) !important;
}

.bg-desert {
    background-color: var(--color-desert) !important;
}

.bg-caramel {
    background-color: var(--color-caramel) !important;
}

.bg-karry {
    background-color: var(--color-karry) !important;
}

.bg-navy {
    background-color: var(--color-navy) !important;
}

/* BORDER */
.border-primary {
    border-color: var(--color-primary) !important;
}

.border-secondary {
    border-color: var(--color-secondary) !important;
}

.border-assist {
    border-color: var(--color-assist) !important;
}

.border-accent {
    border-color: var(--color-accent) !important;
}

.border-white {
    border-color: var(--color-white) !important;
}

.border-white-100 {
    border-color: var(--color-white-100) !important;
}

.border-black {
    border-color: var(--color-black) !important;
}

.border-black-100 {
    border-color: var(--color-black-100) !important;
}

.border-cream {
    border-color: var(--color-cream) !important;
}

.border-cream-100 {
    border-color: var(--color-cream-100) !important;
}

.border-cream-200 {
    border-color: var(--color-cream-200) !important;
}

.border-stone {
    border-color: var(--color-stone) !important;
}

.border-stone-100 {
    border-color: var(--color-stone-100) !important;
}

.border-ruby {
    border-color: var(--color-ruby) !important;
}

.border-desert {
    border-color: var(--color-desert) !important;
}

.border-caramel {
    border-color: var(--color-caramel) !important;
}

.border-karry {
    border-color: var(--color-karry) !important;
}

.border-navy {
    border-color: var(--color-navy) !important;
}

/* BUTTON */
.btn-primary {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.btn-secondary {
    background-color: var(--color-secondary) !important;
    color: var(--color-white) !important;
}

.btn-assist {
    background-color: var(--color-assist) !important;
    color: var(--color-white) !important;
}

.btn-accent {
    background-color: var(--color-accent) !important;
    color: var(--color-white) !important;
}

.btn-white {
    background-color: var(--color-white) !important;
    color: var(--color-white) !important;
}

.btn-white-100 {
    background-color: var(--color-white-100) !important;
    color: var(--color-white) !important;
}

.btn-black {
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
}

.btn-black-100 {
    background-color: var(--color-black-100) !important;
    color: var(--color-white) !important;
}

.btn-cream {
    background-color: var(--color-cream) !important;
    color: var(--color-white) !important;
}

.btn-cream-100 {
    background-color: var(--color-cream-100) !important;
    color: var(--color-white) !important;
}

.btn-cream-200 {
    background-color: var(--color-cream-200) !important;
    color: var(--color-white) !important;
}

.btn-stone {
    background-color: var(--color-stone) !important;
    color: var(--color-white) !important;
}

.btn-stone-100 {
    background-color: var(--color-stone-100) !important;
    color: var(--color-white) !important;
}

.btn-ruby {
    background-color: var(--color-ruby) !important;
    color: var(--color-white) !important;
}

.btn-desert {
    background-color: var(--color-desert) !important;
    color: var(--color-white) !important;
}

.btn-caramel {
    background-color: var(--color-caramel) !important;
    color: var(--color-white) !important;
}

.btn-karry {
    background-color: var(--color-karry) !important;
    color: var(--color-white) !important;
}

.btn-navy {
    background-color: var(--color-navy) !important;
    color: var(--color-white) !important;
}

/* ========== FONTS ========== */
.font-xxl {
    font-size: 120px;
}

.font-xl {
    font-size: 96px;
}

.font-lg {
    font-size: 72px;
}

.font-md {
    font-size: 60px;
}

.font-sm {
    font-size: 14px;
}

/* ========== ROTATE ========== */
.rotate-0 {
    transform: rotate(var(--rotate-0));
}

.rotate-45 {
    transform: rotate(var(--rotate-45));
}

.rotate-90 {
    transform: rotate(var(--rotate-90));
}

.rotate-135 {
    transform: rotate(var(--rotate-135));
}

.rotate-180 {
    transform: rotate(var(--rotate-180));
}

.rotate-270 {
    transform: rotate(var(--rotate-270));
}

.rotate-315 {
    transform: rotate(var(--rotate-315));
}

/* ========== TYPOGRAPHY ========== */
.font-thin {
    font-weight: 100;
}

.font-extra-light {
    font-weight: 200;
}

.font-light {
    font-weight: 300;
}

.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semi-bold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.font-extra-bold {
    font-weight: 800;
}

.font-black {
    font-weight: 900;
}

/* ========== TABLE ========== */
/* TABLE STYLE 1 */
.table-style1 {
    overflow-x: hidden;
}

.table-style1 th,
.table-style1 td {
    font-size: 16px;
    border: 0;
}

.table-style1 thead th {
    color: var(--color-white);
    background-color: var(--color-primary);
}

.table-style1 tbody tr:first-child {
    color: var(--color-primary);
    font-weight: bold;
}

.table-style1 thead th:not(:first-child),
.table-style1 tbody td {
    text-align: center;
}

.table-style1 tbody tr:nth-child(odd)>td,
.table-style1 tbody tr:nth-child(odd)>th {
    background-color: var(--color-stone-50);
}

.table-style1 tbody tr:nth-child(even)>td,
.table-style1 tbody tr:nth-child(even)>th {
    background-color: var(--color-cream-100);
}

.table-style1 .col-highlight {
    align-content: center;
    border-left: 3px solid var(--color-white);
    font-weight: 600;
}

/* TABLE STYLE 2 */
.table-style2 {
    overflow-x: hidden;
}

.table-style2 th,
.table-style2 td {
    font-size: 16px;
    border: 0;
}

.table-style2 td {
    padding-left: 24px;
}

.table-style2 .left-col {
    color: var(--color-white);
    background-color: var(--color-primary) !important;
    text-align: center;
}

.table-style2 tbody tr:first-child {
    color: var(--color-primary);
    font-weight: bold;
}

.table-style2 tbody tr:nth-child(odd)>td,
.table-style2 tbody tr:nth-child(odd)>th {
    background-color: var(--color-stone-50);
}

.table-style2 tbody tr:nth-child(even)>td,
.table-style2 tbody tr:nth-child(even)>th {
    background-color: var(--color-cream-100);
}

.table-style2 .right-col {
    align-content: center;
    font-weight: bold;
    border-left: 3px solid var(--color-white);
    background-color: var(--color-cream-100) !important;
    text-align: center;
    align-items: center;
}

/* TABLE STYLE 3 */
.table-style3 {
    overflow-x: hidden;
}

.table-style3 th,
.table-style3 td {
    font-size: 16px;
    border: 0;
}

.table-style3 thead tr:first-child th {
    background-color: var(--color-primary);
    color: var(--color-white);
    text-align: center;
    padding: 16px;
}

.table-style3 tbody tr:first-child td {
    background-color: var(--color-stone-50) !important;
}

.table-style3 thead tr:last-child th,
.table-style3 tbody tr:last-child td {
    background-color: var(--color-cream-100);
    color: var(--color-primary);
    text-align: center;
    width: 50%;
    font-weight: bold;
}

.table-style3 tbody tr td:first-child {
    padding-left: 24px;
}

.table-style3 .border-end-white-3 {
    border-right: 3px solid var(--color-white);
}

/* TABLE STYLE 4 */
.table-style4 {
    overflow-x: hidden;
}

.table-style4 th,
.table-style4 td {
    font-size: 16px;
    border: 0;
}

.table-style4 tr td:first-child {
    padding-left: 24px;
}

.table-style4 tr td:last-child {
    border-left: 3px solid var(--color-white);
}

.table-style4 tbody tr td,
.table-style4 tbody tr:hover td {
    background-color: var(--color-stone-50);
}

/* SHADOW */
.bg-shadow-white-100 {
    background-color: var(--color-shadow-white-100);
}

/* CURSOR */
.cursor-default {
    cursor: default;
}

.clear-both {
    clear: both;
}

/* FLEX */
.flex-1 {
    flex: 1 !important;
}

.flex-2 {
    flex: 2 !important;
}

/* FONT SIZE */
.text-h2 {
    font-size: var(--text-52) !important;
}

.text-h3 {
    font-size: var(--text-48) !important;
}

.text-h4 {
    font-size: var(--text-36) !important;
}

.text-h5 {
    font-size: var(--text-24) !important;
}

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

.text-p-lg {
    font-size: var(--text-18) !important;
}

.text-p {
    font-size: var(--text-16) !important;
}

.text-scale {
    font-size: 2.72vw !important;
    /* start from 52px to 16px */
}

/* ELEMENTOR FONT SIZE */
.text-h5-e .elementor-heading-title {
    font-size: var(--text-24) !important;
}

.text-p-lg-e .elementor-heading-title {
    font-size: var(--text-18) !important;
}

.justify-self-center {
    justify-self: center;
}

/* POSITION */
.absolute {
    position: absolute !important;
}

.pos-abs-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.abs-x-0 {
    left: 0;
    right: 0;
}

.abs-y-0 {
    top: 0;
    bottom: 0;
}

.abs-0 {
    inset: 0;
}

/* Text limit 2 lines */
.text-2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#sis-loop-post-vertical .screensize-1536 {
    display: none;
}

/* Position */
.img-center-25 {
    object-position: center 25%;
}