body 
{
    background-color: #f7f9fb;
    font-family: Arial, sans-serif;
}

h1 
{
    color: #1f3b57;
    margin-bottom: 15px;
    font-weight: 700;
}

h2, h3, h4 
{
    color: #2f4f68;
}

p 
{
    font-size: 16px;
    line-height: 1.5;
}

.card 
{
    margin-bottom: 18px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.navbar 
{
    background-color: #1f3b57 !important;
}

.navbar-brand 
{
    color: white !important;
    font-weight: 700;
}

.nav-link 
{
    color: white !important;
}

.nav-link.active 
{
    background-color: #2f4f68 !important;
    color: white !important;
    border-radius: 6px;
}

.value-text 
{
    font-size: 28px;
    font-weight: 700;
    color: #1f3b57;
}

.page-note 
{
    background-color: #eef3f7;
    border-left: 5px solid #1f3b57;
    padding: 12px;
    margin-bottom: 18px;
    border-radius: 8px;
}

.hero-section 
{
    background: linear-gradient(135deg, #1f3b57, #3f7ca6);
    color: white;
    padding: 45px;
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.hero-section h1 
{
    color: white;
    font-size: 42px;
    margin-bottom: 10px;
}

.hero-section h3 
{
    color: #e8f1f7;
    font-weight: 400;
    margin-bottom: 18px;
}

.hero-section p 
{
    font-size: 18px;
    max-width: 950px;
}

.step-box 
{
    background-color: #eef3f7;
    padding: 18px;
    border-radius: 12px;
    min-height: 150px;
    border-left: 5px solid #1f3b57;
}

.step-box h4 
{
    color: #1f3b57;
    margin-bottom: 10px;
}

.step-box p 
{
    font-size: 15px;
}