:root {
    --navy: #0d2a5c;
    --navy-dark: #081b40;
    --bright-blue: rgb(0 8 157);
    --blue: #1e5fbf;
    --orange: #f5921e;
    --text-muted: #5b6472;
    --card-border: #e7ebf2;
    --bg-soft: #f6f8fb;
}

body {
    font-family: 'Inter', sans-serif;
    color: #333;
    background: #fff !important;
    overflow: visible;
}

#wrapper {
    overflow-x: visible !important;
}

h1,
h2,
h3,
h4,
.brand-font {
    font-family: 'Poppins', sans-serif;
}

section {
    padding: 100px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* ===== Hero ===== */
.hero-section-legal {
    background: linear-gradient(180deg, #eef3fb 0%, #ffffff 100%);
}

.breadcrumb-custom a {
    color: #6b7385;
    text-decoration: none;
    font-size: .85rem;
}

.breadcrumb-custom .current {
    color: var(--bright-blue);
    font-weight: 600;
    font-size: 1rem;
}

.hero-title {
    color: var(--bright-blue);
    font-weight: 800;
    font-size: 2.6rem;
}

.hero-sub {
    color: var(--orange);
    font-weight: 600;
    font-size: 1.15rem;
    border-bottom: 3px solid var(--orange);
    display: inline-block;
    padding-bottom: .6rem;
    margin-bottom: 1rem;
}

.hero-text p {
    color: #5c6473;
    font-size: .95rem;
    line-height: 1.75;
}

.hero-text a {
    color: var(--blue);
    text-decoration: underline;
}

.hero-illustration {
    max-width: 100%;
}

/* ===== Sidebar ===== */
.sidebar-nav .list-group-item {
    border: none;
    border-radius: 8px !important;
    margin-bottom: .35rem;
    font-size: .88rem;
    font-weight: 500;
    color: #3a445a;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .9rem;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.sidebar-nav .list-group-item:hover {
    background: var(--bg-soft);
}

.sidebar-nav .list-group-item.active {
    background: linear-gradient(135deg, #1e5fbf, var(--navy));
    color: #fff;
    box-shadow: 0 4px 12px rgba(13, 42, 92, 0.28);
}

.sidebar-nav .list-group-item.active .side-icon {
    color: #fff;
}

.sidebar-nav .list-group-item .side-icon {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    font-size: .8rem;
    color: #8a93a3;
}

.trust-card {
    background: linear-gradient(160deg, #eaf1fd, #dfeafd);
    border-radius: 14px;
    padding: 1.6rem 1.4rem;
    text-align: center;
}

.trust-card h5 {
    color: var(--navy);
    font-weight: 700;
}

.trust-card p {
    font-size: .85rem;
    color: #5c6473;
}

.trust-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e5fbf, var(--navy));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.3rem;
}

/* ===== Content Cards ===== */
.content-card {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 1.6rem 1.7rem;
    margin-bottom: 1.3rem;
    box-shadow: 0 2px 14px rgba(20, 40, 80, 0.04);
}

.content-card h4 {
    color: var(--bright-blue);
    font-weight: 600;
    font-size: 1.15rem;
    margin-bottom: .6rem;
}

.content-card p,
.content-card li {
    color: #5c6473;
    font-size: .9rem;
    line-height: 1.7;
}

.content-card ul {
    padding-left: 0;
    list-style: none;
    margin-bottom: .5rem;
}

.content-card ul li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: .35rem;
}

.content-card ul li::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--orange);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: .5rem;
}

.content-card ul.check-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    background: none;
    color: var(--bright-blue);
    font-size: .65rem;
    top: .15rem;
}

.content-card a {
    color: var(--blue);
    text-decoration: underline;
}

.section-icon {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: rgb(227 238 253);
    color: var(--bright-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    flex-shrink: 0;
}

/* ===== Bottom banner ===== */
.governance-banner {
    background: linear-gradient(120deg, var(--navy-dark), var(--blue));
    border-radius: 16px;
    padding: 2rem 2.2rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.governance-banner h4 {
    font-weight: 700;
}

.governance-banner p {
    font-size: .9rem;
    color: #dbe6f8;
    margin-bottom: 0;
}

.governance-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #c0d9ff;
    color: var(--bright-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}


/* Prevent flicker during active state changes */
.nav-link-item {
    transition: background-color 0.15s ease-in-out,
        color 0.15s ease-in-out,
        border-color 0.15s ease-in-out;
    will-change: background-color, color;
}

/* Use transform for smoother rendering */
.sidebar-sticky {
    will-change: transform;
    backface-visibility: hidden;
}

/* Prevent FOUC (Flash of Unstyled Content) */
.nav-link-item.active {
    background-color: #0d6efd !important;
    color: #ffffff !important;
}

@media (max-width: 991.98px) {
    .hero-title {
        font-size: 2rem;
    }

    .sidebar-sticky {
        position: static !important;
    }
}