.brand-yellow {
        color: #ffd54f;
        /* softer yellow than default */
    }

    .bg-primary {
        --bs-bg-opacity: 1;
        background-color: rgb(7, 34, 74) !important;
    }

    .loader-text{color: rgb(7, 34, 74) !important;}

    .btn-primary {
        --bs-btn-bg: rgb(7, 34, 74);
        --bs-btn-border-color: rgb(7, 34, 74);
        --bs-btn-hover-bg: rgb(10, 45, 95);
        --bs-btn-hover-border-color: rgb(10, 45, 95);
    }

    /* Drawer styling */
    .offcanvas {
        background-color: #ffffff;
    }

    .offcanvas-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #e5e7eb;
    }

    .offcanvas-title {
        color: rgb(7, 34, 74);
        font-weight: 600;
    }

    .drawer-link {
        display: block;
        padding: 10px 12px;
        margin-bottom: 4px;
        border-radius: 6px;
        color: rgb(7, 34, 74);
        text-decoration: none;
        font-weight: 500;
    }

    .drawer-link:hover {
        background-color: #eef4ff;
        color: rgb(7, 34, 74);
    }

    .drawer-link.active {
        background-color: #eef4ff;
        border-left: 4px solid rgb(7, 34, 74);
        padding-left: 8px;
    }

    /* Footer */
    .site-footer {
        background-color: #f8f9fa;
        border-top: 1px solid #e5e7eb;
        font-size: 0.875rem;
    }

    .site-footer a {
        color: rgb(7, 34, 74);
        text-decoration: none;
        margin: 0 6px;
        font-weight: 500;
    }

    .site-footer a:hover {
        text-decoration: underline;
    }

    .site-footer .copyright {
        color: #6b7280;
        margin-top: 6px;
        font-size: 0.8rem;
    }

    .text-justify {
        text-align: justify;
    }

    /* Mobile spacing refinement */
    @media (max-width: 576px) {
        .container {
            padding-left: 12px;
            padding-right: 12px;
        }

        h1,
        h2 {
            margin-bottom: 0.75rem;
        }

        .calc-inner {
            background: transparent !important;
            padding: 0 !important;
            border-radius: 0 !important;
        }

        .btn-primary {
            position: sticky;
            bottom: 12px;
            z-index: 10;
        }

        .about-divider {
            border-top: 1px dashed #e5e7eb;
            margin: 2rem 0;
        }
    }

    @media (min-width: 768px) {
        .btn-primary {
            min-width: 220px;
        }
    }