/* Custom styles to make the background white or light gray and enhance attractiveness */
body {
    background: #f8f9fa !important; /* Light gray */
}

.bg-primary {
    background: #f5f7fa !important; /* Very light gray-blue for hero */
    color: #222 !important;
}

.bg-white {
    background: #fff !important;
}

.bg-light {
    background: #f8f9fa !important;
}

.card {
    border-radius: 1rem !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}

.card-header {
    background: #f0f2f5 !important;
    color: #222 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.btn-warning {
    background: linear-gradient(90deg, #ffe259 0%, #ffa751 100%) !important;
    color: #222 !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(255,167,81,0.15);
}

.btn-outline-light {
    color: #222 !important;
    border-color: #e5e7eb !important;
    background: #fff !important;
}

.accordion-button {
    background: #f8f9fa !important;
    color: #222 !important;
}

.accordion-item {
    border-radius: 0.75rem !important;
    overflow: hidden;
}

/* Add a subtle gradient to hero section */
#hero {
    background: linear-gradient(120deg, #f8fafc 0%, #e2eafc 100%) !important;
}

/* Table of Contents card */
.card.shadow-lg {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
}

/* Section titles */
h2.fw-bold {
    letter-spacing: 0.5px;
    color: #2b3a67 !important;
}

/* Highlighted numbers */
.fs-3.fw-bold.text-primary, .fs-3.fw-bold.text-warning, .fs-3.fw-bold.text-success {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
}