/* =========================================================
   FILE CSS 1 - MAIN THEME / GLOBAL
========================================================= */

/* =========================================================
   ROOT
========================================================= */
:root {
    --exj-primary: #0d47a1;
    --exj-primary-dark: #0b2f6b;
    --exj-primary-soft: #eaf3ff;
    --exj-accent: #2a6fbe;
    --exj-accent-soft: #d8e8fb;
    --exj-border: #d7e1ea;
    --exj-border-strong: #bfd0df;
    --exj-text: #1f2937;
    --exj-text-soft: #5b6472;
    --exj-title: #10243a;
    --exj-card: #ffffff;
    --exj-bg: #f5f9fb;
    --exj-shadow-sm: 0 8px 24px rgba(13, 71, 161, 0.08);
    --exj-shadow-md: 0 14px 34px rgba(13, 71, 161, 0.14);
    --exj-radius: 14px;
}

/* =========================================================
   DARK MODE
========================================================= */
html.dark,
body.dark,
.dark {
    --exj-primary: #3e7ab0;
    --exj-primary-dark: #274f74;
    --exj-primary-soft: #163046;
    --exj-accent: #6ea3d3;
    --exj-accent-soft: #1a3449;
    --exj-border: #2b4256;
    --exj-border-strong: #3a5570;
    --exj-text: #e6edf5;
    --exj-text-soft: #b8c4d1;
    --exj-title: #ffffff;
    --exj-card: #0f1b26;
    --exj-bg: #0b141c;
    --exj-shadow-sm: 0 10px 26px rgba(0, 0, 0, 0.28);
    --exj-shadow-md: 0 16px 40px rgba(0, 0, 0, 0.34);
}

/* =========================================================
   BASE
   Perubahan 1: hapus background motif putih
========================================================= */
html,
body {
    background: var(--exj-bg) !important;
    color: var(--exj-text);
}

body,
.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main,
.page,
.page_index_journal {
    color: var(--exj-text);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* =========================================================
   MAIN LAYOUT
========================================================= */
#headerNavigationContainer {
    max-height: 200% !important;
}

.pkp_structure_page {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
}

/* =========================================================
   HEADER / LOGO
========================================================= */
.pkp_site_name {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-align: center;
    width: 100%;
}

.pkp_site_name .is_img img {
    display: block;
    width: 100vw;
    max-width: 100%;
    max-height: 300px;
    height: auto;
    margin: 0 auto;
    object-fit: cover;
}

.pkp_site_name_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Perubahan 2: paksa teks header tetap putih */
.pkp_site_name,
.pkp_site_name *,
.pkp_site_name_wrapper,
.pkp_site_name_wrapper *,
.pkp_site_name a,
.pkp_site_name h1,
.pkp_site_name h2,
.pkp_site_name h3,
.pkp_site_name .is_text,
.pkp_site_name_wrapper .is_text,
.pkp_site_name_wrapper .pkp_site_name_head,
.pkp_site_name_wrapper .pkp_site_name_head a,
.page_index_journal .pkp_site_name,
.page_index_journal .pkp_site_name *,
.page_index_journal .pkp_site_name a,
.page_index_journal .pkp_site_name h1,
.page_index_journal .pkp_site_name h2,
.page_index_journal .pkp_site_name h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

/* =========================================================
   USER NAV
========================================================= */
.pkp_navigation_user_wrapper {
    top: 0;
    right: 0;
    padding-right: 30px;
}

.pkp_navigation_user_wrapper a {
    color: #fff !important;
    text-decoration: none;
}

/* =========================================================
   GENERIC TEXT SAFETY FOR DARK MODE
========================================================= */
h1,
h2,
h3,
h4,
h5,
h6,
label,
strong,
em,
small,
span,
li,
p,
td,
th,
div,
section,
article {
    color: inherit;
}

a {
    color: var(--exj-primary);
    transition: all 0.25s ease;
}

.dark a,
html.dark a,
body.dark a {
    color: #8fc0ea;
}

a:hover {
    color: var(--exj-primary-dark);
}

/* =========================================================
   OJS CONTENT AREA
========================================================= */
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_block,
.block,
.block_make_submission,
.block_information,
.block_web_feed,
.block_language {
    color: var(--exj-text);
}

/* =========================================================
   ISSUE / ARTICLE CARDS
========================================================= */
.obj_issue_toc .articles > li {
    margin-bottom: 20px;
    padding: 1.2rem;
    border: 1px solid var(--exj-border);
    border-radius: 0 0 24px 0;
    background: var(--exj-card) !important;
    box-shadow: 0.2rem 0.2rem 0.8rem rgba(13, 71, 161, 0.14);
}

.dark .obj_issue_toc .articles > li,
html.dark .obj_issue_toc .articles > li,
body.dark .obj_issue_toc .articles > li {
    background: #12212e !important;
    border-color: var(--exj-border-strong) !important;
    box-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.32);
}

/* Important: fix hidden texts in dark mode */
.obj_issue_toc,
.obj_issue_toc *,
.cmp_article_list,
.cmp_article_list *,
.obj_article_summary,
.obj_article_summary *,
.current_issue,
.current_issue * {
    color: var(--exj-text);
}

.obj_issue_toc h3,
.obj_issue_toc h2,
.obj_issue_toc .title,
.obj_issue_toc .subtitle,
.obj_article_summary .title,
.obj_article_summary .subtitle,
.obj_article_summary .meta,
.obj_article_summary .pages,
.obj_article_summary .authors,
.obj_article_summary .published,
.obj_article_summary .date,
.obj_article_summary .references,
.obj_article_summary .galleys_links,
.obj_article_summary .galleys_links li,
.obj_article_summary .galleys_links a,
.cmp_article_list h3,
.cmp_article_list .title,
.cmp_article_list .meta,
.cmp_article_list .authors {
    color: var(--exj-text) !important;
}

.dark .obj_issue_toc h3,
.dark .obj_issue_toc h2,
.dark .obj_issue_toc .title,
.dark .obj_issue_toc .subtitle,
.dark .obj_article_summary .title,
.dark .obj_article_summary .subtitle,
.dark .obj_article_summary .meta,
.dark .obj_article_summary .pages,
.dark .obj_article_summary .authors,
.dark .obj_article_summary .published,
.dark .obj_article_summary .date,
.dark .obj_article_summary .references,
.dark .obj_article_summary .galleys_links a,
.dark .cmp_article_list h3,
.dark .cmp_article_list .title,
.dark .cmp_article_list .meta,
.dark .cmp_article_list .authors {
    color: #e6edf5 !important;
}

.obj_article_summary a,
.cmp_article_list a,
.current_issue a {
    color: var(--exj-primary) !important;
}

.dark .obj_article_summary a,
.dark .cmp_article_list a,
.dark .current_issue a {
    color: #8fc0ea !important;
}

/* =========================================================
   CURRENT ISSUE TITLE
========================================================= */
.current_issue .title,
.page_index_journal .current_issue h2,
.page_index_journal .current_issue h3 {
    color: var(--exj-title) !important;
}

.dark .current_issue .title,
.dark .page_index_journal .current_issue h2,
.dark .page_index_journal .current_issue h3 {
    color: #ffffff !important;
}

/* =========================================================
   BLOCKS / PANELS
========================================================= */
.pkp_block,
.block,
.block_make_submission,
.block_information {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* =========================================================
   OLD DROPDOWN LEGACY
========================================================= */
.container > ul {
    list-style: none;
}

.dropdown {
    position: relative;
}

.dropdown a {
    text-decoration: none;
}

.dropdown [data-toggle="dropdown"] {
    display: block;
    padding: 10px;
    color: #ffffff;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--exj-primary), var(--exj-primary-dark));
    box-shadow:
        0 1px 0 var(--exj-primary-dark) inset,
        0 -1px 0 var(--exj-primary-dark) inset;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.dropdown [data-toggle="dropdown"]:hover {
    background: linear-gradient(135deg, var(--exj-primary-dark), var(--exj-primary));
}

.dropdown [data-toggle="dropdown"]::before {
    position: absolute;
    top: 13px;
    right: 10px;
    display: block;
    content: "\25BC";
    font-size: 0.7em;
    color: #ffffff;
    transform: rotate(0deg);
    transition: transform 0.6s;
}

.dropdown > .dropdown-menu {
    max-height: 0;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
    transform: scaleY(0);
    transform-origin: 50% 0%;
    transition: max-height 0.6s ease-out;
}

.dropdown > .dropdown-menu li {
    padding: 0;
}

.dropdown > input[type="checkbox"] {
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dropdown > input[type="checkbox"]:checked ~ .dropdown-menu {
    display: block;
    max-height: 9999px;
    transform: scaleY(1);
    transition: max-height 2s ease-in-out;
}

.dropdown > input[type="checkbox"]:checked + a[data-toggle="dropdown"]::before {
    transform: rotate(-180deg);
}

/* =========================================================
   LEGACY CUSTOM BLOCK
========================================================= */
#main-menu-custom {
    padding: 12px;
    border: 1px solid var(--exj-border);
    border-radius: var(--exj-radius);
    background-color: var(--exj-card);
    box-shadow: var(--exj-shadow-sm);
}

#main-menu-custom h3 {
    margin: 0 0 10px 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--exj-primary), var(--exj-primary-dark));
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}

#main-menu-custom ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#main-menu-custom ul li {
    border-bottom: 1px solid #eef2f7;
}

#main-menu-custom ul li:last-child {
    border-bottom: none;
}

#main-menu-custom ul li a {
    display: block;
    margin-bottom: 8px;
    padding: 11px 12px;
    border-radius: 10px;
    background-color: #f8fbfe;
    color: var(--exj-primary-dark);
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.dark #main-menu-custom ul li a {
    background-color: #152636;
    color: #dce8f3;
}

#main-menu-custom ul li a:hover {
    background: linear-gradient(135deg, var(--exj-primary-soft), #ffffff);
    color: var(--exj-primary-dark);
    transform: translateX(4px);
}

/* =========================================================
   REMOVE OLD ORANGE LOOK
========================================================= */
.obj_issue_toc .articles > li,
#main-menu-custom,
.dropdown [data-toggle="dropdown"],
#main-menu-custom ul li a {
    outline: none;
}

/* =========================================================
   SIDEBAR MODERN STYLE
   Perubahan 3: sidebar lebih modern dan senada header
========================================================= */

/* card utama sidebar */
.pkp_structure_sidebar .bg-white,
.pkp_structure_sidebar .border.border-gray-300,
.pkp_structure_sidebar .rounded-md.shadow-sm,
.pkp_structure_sidebar .shadow-sm.bg-white {
    overflow: hidden !important;
    border: 1px solid #cddff1 !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #ffffff, #f6fbff) !important;
    color: var(--exj-text) !important;
    box-shadow: 0 12px 28px rgba(13, 71, 161, 0.10) !important;
}

.dark .pkp_structure_sidebar .bg-white,
.dark .pkp_structure_sidebar .border.border-gray-300,
.dark .pkp_structure_sidebar .rounded-md.shadow-sm,
.dark .pkp_structure_sidebar .shadow-sm.bg-white {
    border: 1px solid #284760 !important;
    background: linear-gradient(180deg, #10263a, #0d1d2b) !important;
    color: #e6edf5 !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.30) !important;
}

/* header tiap blok sidebar */
.pkp_structure_sidebar .bg-primary {
    background: linear-gradient(135deg, #0d47a1, #123d7a 55%, #0b2f5b) !important;
    color: #ffffff !important;
}

/* teks header sidebar */
.pkp_structure_sidebar .bg-primary.text-white,
.pkp_structure_sidebar .bg-primary.text-white * {
    color: #ffffff !important;
    letter-spacing: 0.2px;
}

/* tombol / item menu */
.pkp_structure_sidebar a.border-primary,
.pkp_structure_sidebar .border-primary {
    border-color: #1b5ea8 !important;
}

.pkp_structure_sidebar a.border-primary {
    border-width: 2px !important;
    border-style: solid !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #ffffff, #f4f9ff) !important;
    color: #173b63 !important;
    font-weight: 500;
    text-decoration: none !important;
    box-shadow: 0 5px 14px rgba(20, 75, 130, 0.08);
    transition: all 0.28s ease !important;
}

.pkp_structure_sidebar a.border-primary:hover {
    border-color: #0d47a1 !important;
    background: linear-gradient(135deg, #e8f3ff, #ffffff) !important;
    color: #0d2e57 !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(13, 71, 161, 0.16) !important;
}

.dark .pkp_structure_sidebar a.border-primary {
    border-color: #4d86bd !important;
    background: linear-gradient(180deg, #16314b, #12293d) !important;
    color: #eaf4ff !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.dark .pkp_structure_sidebar a.border-primary:hover {
    border-color: #7fb3e4 !important;
    background: linear-gradient(135deg, #1b4061, #173650) !important;
    color: #ffffff !important;
}

/* tombol submission (pakai class khusus, bukan href) */
.exj-btn-primary {
    border-color: #0d47a1 !important;
    background: linear-gradient(135deg, #0d47a1, #1d5da8) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 22px rgba(13, 71, 161, 0.22) !important;
}

.exj-btn-primary:hover {
    border-color: #0b3c88 !important;
    background: linear-gradient(135deg, #0b3c88, #154d92) !important;
    color: #ffffff !important;
}

/* cover image sidebar */
.pkp_structure_sidebar img.rounded-md,
.pkp_structure_sidebar .rounded-md img {
    border-radius: 16px !important;
}

/* semua teks sidebar tetap aman */
.pkp_structure_sidebar,
.pkp_structure_sidebar *,
.pkp_structure_sidebar p,
.pkp_structure_sidebar li,
.pkp_structure_sidebar span,
.pkp_structure_sidebar strong,
.pkp_structure_sidebar div {
    color: inherit;
}

.dark .pkp_structure_sidebar,
.dark .pkp_structure_sidebar *,
.dark .pkp_structure_sidebar p,
.dark .pkp_structure_sidebar li,
.dark .pkp_structure_sidebar span,
.dark .pkp_structure_sidebar strong,
.dark .pkp_structure_sidebar div {
    color: #e6edf5 !important;
}

.dark .pkp_structure_sidebar a {
    color: #9ed0ff !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 768px) {
    .pkp_navigation_user_wrapper {
        padding-right: 10px;
    }

    .pkp_site_name .is_img img {
        max-height: 180px;
    }
}

/* FORCE semua bg merah & biru jadi teks putih */
[class*="bg-red"],
[class*="bg-blue"] {
    color: #ffffff !important;
}

/* =========================================================
   FOOTER PANEL
========================================================= */
.exj-footer-panel {
    margin: 24px 0 0 0;
    padding: 0;
}

.exj-footer-inner {
    overflow: hidden;
    border: 1px solid var(--exj-border);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f6fbff);
    box-shadow: var(--exj-shadow-sm);
}

.dark .exj-footer-inner,
html.dark .exj-footer-inner,
body.dark .exj-footer-inner {
    border-color: #284760;
    background: linear-gradient(180deg, #10263a, #0d1d2b);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.30);
}

.exj-footer-title {
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--exj-primary), var(--exj-primary-dark));
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.3px;
}

.exj-footer-content {
    padding: 20px 22px;
    color: var(--exj-text);
}

.exj-footer-content p {
    margin: 0 0 14px 0;
    line-height: 1.75;
    color: inherit;
}

.exj-footer-content p:last-child {
    margin-bottom: 0;
}

.exj-footer-journal {
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 700;
}

.exj-footer-journal a {
    color: var(--exj-primary-dark) !important;
    text-decoration: none;
}

.exj-footer-journal a:hover {
    color: var(--exj-primary) !important;
    text-decoration: underline;
}

.exj-footer-content strong {
    color: var(--exj-title);
    font-weight: 700;
}

.exj-footer-license {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(13, 71, 161, 0.12);
    border-radius: 14px;
    background: rgba(13, 71, 161, 0.05);
}

.exj-footer-license img {
    flex: 0 0 auto;
    margin-top: 2px;
    border-radius: 4px;
}

.exj-footer-license p {
    margin: 0;
    line-height: 1.7;
}

.exj-footer-content a {
    color: var(--exj-primary);
    text-decoration: none;
    transition: all 0.25s ease;
}

.exj-footer-content a:hover {
    color: var(--exj-primary-dark);
    text-decoration: underline;
}

.dark .exj-footer-content,
.dark .exj-footer-content p,
.dark .exj-footer-content div,
.dark .exj-footer-content strong {
    color: #e6edf5 !important;
}

.dark .exj-footer-journal a,
.dark .exj-footer-content a {
    color: #9ed0ff !important;
}

.dark .exj-footer-content a:hover,
.dark .exj-footer-journal a:hover {
    color: #ffffff !important;
}

.dark .exj-footer-license {
    border-color: rgba(110, 163, 211, 0.22);
    background: rgba(110, 163, 211, 0.10);
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 768px) {
    .exj-footer-content {
        padding: 16px;
    }

    .exj-footer-title {
        padding: 12px 14px;
        font-size: 16px;
    }

    .exj-footer-license {
        flex-direction: column;
        align-items: flex-start;
    }

    .exj-footer-license img {
        margin-bottom: 4px;
    }
}

/* =========================================================
   SIDEBAR BUTTONS & GROUP SPACING
========================================================= */

/* jarak antar group */
.exj-side-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* card group */
.exj-side-group {
    overflow: hidden !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 28px rgba(13, 71, 161, 0.10) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.exj-side-group:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(13, 71, 161, 0.16) !important;
}

.dark .exj-side-group {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28) !important;
}

/* title tiap group */
.exj-group-title {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* base button */
.exj-btn {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    text-decoration: none !important;
    border-radius: 18px !important;
    font-weight: 600;
    line-height: 1.35;
    transition: all 0.28s ease !important;
}

/* tombol utama */
.exj-btn-primary {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    border: 2px solid #0d47a1 !important;
    background: linear-gradient(135deg, #1d5da8, #0d47a1) !important;
    color: #ffffff !important;
    font-size: 1.02rem;
    box-shadow: 0 10px 22px rgba(13, 71, 161, 0.24) !important;
}

.exj-btn-primary:hover {
    background: linear-gradient(135deg, #0b3f8f, #0a336f) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(13, 71, 161, 0.32) !important;
}

/* tombol login/register */
.exj-btn-outline {
    border: 2px solid #1d5da8 !important;
    background: linear-gradient(180deg, #ffffff, #f4f9ff) !important;
    color: #17406e !important;
    font-size: 0.98rem;
    font-weight: 500;
    box-shadow: 0 6px 14px rgba(20, 75, 130, 0.08);
}

.exj-btn-outline:hover {
    border-color: #0d47a1 !important;
    background: linear-gradient(135deg, #e8f3ff, #ffffff) !important;
    color: #0d2e57 !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(13, 71, 161, 0.14) !important;
}

/* tombol menu */
.exj-menu-btn {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    border: 2px solid #1b5ea8 !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
    color: #173b63 !important;
    box-shadow: 0 5px 14px rgba(20, 75, 130, 0.08);
}

.exj-menu-btn:hover {
    border-color: #0d47a1 !important;
    background: linear-gradient(135deg, #e9f4ff, #ffffff) !important;
    color: #0d2e57 !important;
    transform: translateX(4px);
    box-shadow: 0 12px 24px rgba(13, 71, 161, 0.16) !important;
}

/* tombol template */
.exj-template-btn {
    width: auto;
    min-width: 190px;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #ffffff, #f7fbff) !important;
    box-shadow: 0 8px 18px rgba(13, 71, 161, 0.10);
}

.exj-template-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 24px rgba(13, 71, 161, 0.16);
}

/* tombol auth grid */
.exj-auth-grid {
    margin-top: 10px;
    gap: 10px !important;
}

/* cover card spacing */
.exj-cover-card .p-4 {
    padding: 18px !important;
}

.exj-action-wrap {
    margin-top: 14px !important;
}

/* dark mode */
.dark .exj-btn-outline,
.dark .exj-menu-btn,
html.dark .exj-btn-outline,
html.dark .exj-menu-btn,
body.dark .exj-btn-outline,
body.dark .exj-menu-btn {
    border-color: #4d86bd !important;
    background: linear-gradient(180deg, #16314b, #12293d) !important;
    color: #eaf4ff !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.dark .exj-btn-outline:hover,
.dark .exj-menu-btn:hover,
html.dark .exj-btn-outline:hover,
html.dark .exj-menu-btn:hover,
body.dark .exj-btn-outline:hover,
body.dark .exj-menu-btn:hover {
    border-color: #7fb3e4 !important;
    background: linear-gradient(135deg, #1b4061, #173650) !important;
    color: #ffffff !important;
}

.dark .exj-btn-primary,
html.dark .exj-btn-primary,
body.dark .exj-btn-primary {
    border-color: #4f8fca !important;
    background: linear-gradient(135deg, #2b6cb0, #1c4f84) !important;
    color: #ffffff !important;
}

/* responsive */
@media (max-width: 768px) {
    .exj-side-stack {
        gap: 16px;
    }

    .exj-group-title {
        font-size: 1rem;
    }

    .exj-btn-primary,
    .exj-btn-outline,
    .exj-menu-btn {
        border-radius: 16px !important;
    }
}

/* =========================================================
   FIX HEADER TITLE (CUSTOM HEADER)
========================================================= */
.custom-header-title h1,
.custom-header-title a,
.custom-header-title h1 a {
    color: #ffffff !important;
}