/* ==========================================
   INSURANCE LAW - PROFESSIONAL STYLESHEET
   Educational Resource for Vidyasagar University
   ========================================== */

/* ==========================================
   RESET AND BASE STYLES
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Professional Color Palette */
    --primary-bg: rgb(240, 248, 255);  /* Alice Blue - Soft, professional background */
    --secondary-bg: rgb(255, 250, 240);  /* Floral White - Warm secondary background */
    --nav-bg: rgb(25, 25, 112);  /* Midnight Blue - Strong navigation */
    --content-bg: rgb(255, 255, 255);  /* Pure White - Content cards */
    --border-color: rgb(70, 130, 180);  /* Steel Blue - Professional borders */
    --heading-color: rgb(0, 51, 102);  /* Dark Blue - Strong headings */
    --text-color: rgb(33, 37, 41);  /* Dark Gray - Readable text */
    --accent-color: rgb(220, 53, 69);  /* Crimson - Accent elements */
    --success-color: rgb(40, 167, 69);  /* Success Green */
    --warning-color: rgb(255, 193, 7);  /* Warning Amber */
    --element-card-bg: rgb(248, 249, 250);  /* Light Gray */
    --case-card-bg: rgb(255, 248, 220);  /* Light Yellow - Case cards */
    --example-bg: rgb(230, 247, 255);  /* Light Blue - Examples */
    --definition-bg: rgb(240, 255, 240);  /* Honeydew - Definitions */
    --shadow: rgba(0, 0, 0, 0.1);
    --strong-shadow: rgba(0, 0, 0, 0.2);
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Georgia', 'Times New Roman', serif;
    line-height: 1.8;
    color: var(--text-color);
    background: linear-gradient(135deg, var(--primary-bg) 0%, var(--secondary-bg) 100%);
    font-weight: 400;
}

/* ==========================================
   TYPOGRAPHY - ALL BOLD
   ========================================== */
h1, h2, h3, h4, h5, h6, p, li, span, div, a, button, strong {
    font-weight: 700 !important;
}

h1 {
    font-size: 2.5rem;
    color: var(--heading-color);
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px var(--shadow);
}

h2 {
    font-size: 2rem;
    color: var(--heading-color);
    margin-bottom: 0.8rem;
    border-bottom: 3px solid var(--border-color);
    padding-bottom: 0.5rem;
}

h3 {
    font-size: 1.6rem;
    color: var(--heading-color);
    margin-bottom: 0.6rem;
}

h4 {
    font-size: 1.3rem;
    color: var(--heading-color);
    margin-bottom: 0.5rem;
}

h5 {
    font-size: 1.1rem;
    color: var(--heading-color);
    margin-bottom: 0.4rem;
}

p {
    margin-bottom: 1rem;
    font-size: 1.05rem;
    font-weight: 700;
}

/* ==========================================
   NAVIGATION BAR
   ========================================== */
.navbar {
    background: linear-gradient(135deg, var(--nav-bg) 0%, rgb(15, 15, 80) 100%);
    padding: 1.5rem 2rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 12px var(--strong-shadow);
    border-bottom: 4px solid var(--border-color);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.nav-title {
    color: rgb(255, 255, 255);
    font-size: 1.8rem;
    font-weight: 900;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
}

.nav-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.nav-btn {
    background: linear-gradient(135deg, rgb(70, 130, 180) 0%, rgb(100, 149, 237) 100%);
    color: rgb(255, 255, 255);
    border: 2px solid rgb(255, 255, 255);
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: 900;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px var(--shadow);
}

.nav-btn:hover {
    background: linear-gradient(135deg, rgb(100, 149, 237) 0%, rgb(70, 130, 180) 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 12px var(--strong-shadow);
}

.print-btn {
    background: linear-gradient(135deg, var(--success-color) 0%, rgb(60, 187, 89) 100%);
}

.print-btn:hover {
    background: linear-gradient(135deg, rgb(60, 187, 89) 0%, var(--success-color) 100%);
}

/* ==========================================
   DISCLAIMER
   ========================================== */
.disclaimer {
    background: linear-gradient(135deg, rgb(255, 243, 205) 0%, rgb(255, 228, 181) 100%);
    border: 3px solid rgb(255, 193, 7);
    border-radius: 10px;
    padding: 1.5rem;
    margin: 2rem auto;
    max-width: 1400px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 900;
    color: rgb(133, 100, 4);
    box-shadow: 0 4px 12px var(--shadow);
}

/* ==========================================
   CONTAINER AND LAYOUT
   ========================================== */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.question-section {
    background: var(--content-bg);
    border: 4px solid var(--border-color);
    border-radius: 15px;
    padding: 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 8px 24px var(--strong-shadow);
}

.question-header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 4px solid var(--border-color);
}

.marks {
    background: linear-gradient(135deg, var(--accent-color) 0%, rgb(240, 73, 89) 100%);
    color: rgb(255, 255, 255);
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: 900;
    margin-top: 1rem;
    box-shadow: 0 4px 8px var(--shadow);
}

/* ==========================================
   QUICK NAVIGATION
   ========================================== */
.quick-nav {
    background: linear-gradient(135deg, var(--definition-bg) 0%, rgb(220, 245, 220) 100%);
    border: 3px solid var(--success-color);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.quick-nav h3 {
    color: var(--success-color);
    margin-bottom: 1rem;
    font-weight: 900;
}

.quick-nav-btn {
    background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(240, 255, 240) 100%);
    color: var(--success-color);
    border: 2px solid var(--success-color);
    padding: 0.7rem 1.3rem;
    font-size: 0.95rem;
    font-weight: 900;
    border-radius: 8px;
    cursor: pointer;
    margin: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px var(--shadow);
}

.quick-nav-btn:hover {
    background: linear-gradient(135deg, var(--success-color) 0%, rgb(60, 187, 89) 100%);
    color: rgb(255, 255, 255);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px var(--strong-shadow);
}

/* ==========================================
   CONTENT BLOCKS
   ========================================== */
.content-block {
    margin-bottom: 3rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(250, 250, 255) 100%);
    border: 3px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--shadow);
}

.section-heading {
    background: linear-gradient(135deg, var(--nav-bg) 0%, rgb(50, 50, 130) 100%);
    color: rgb(255, 255, 255);
    padding: 1.2rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-weight: 900;
    text-align: center;
    box-shadow: 0 4px 8px var(--shadow);
}

/* ==========================================
   DEFINITION BOXES
   ========================================== */
.definition-box {
    background: linear-gradient(135deg, var(--definition-bg) 0%, rgb(220, 245, 220) 100%);
    border: 3px solid var(--success-color);
    border-left: 8px solid var(--success-color);
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px var(--shadow);
}

.definition-box h3 {
    color: var(--success-color);
    font-weight: 900;
    margin-bottom: 1rem;
}

.definition-box ul {
    padding-left: 2rem;
}

.definition-box li {
    margin-bottom: 0.8rem;
    font-weight: 700;
}

.legal-provision {
    background: rgb(255, 255, 255);
    border: 3px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    box-shadow: 0 2px 6px var(--shadow);
}

.legal-text {
    font-style: italic;
    color: var(--heading-color);
    font-weight: 900;
    padding: 1rem;
    background: rgb(240, 248, 255);
    border-left: 4px solid var(--border-color);
    border-radius: 4px;
}

/* ==========================================
   EXAMPLE BOXES
   ========================================== */
.example-box {
    background: linear-gradient(135deg, var(--example-bg) 0%, rgb(210, 237, 255) 100%);
    border: 3px solid rgb(100, 149, 237);
    border-left: 8px solid rgb(100, 149, 237);
    border-radius: 10px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 4px 10px var(--shadow);
}

.example-box h3, .example-box h4 {
    color: rgb(30, 80, 180);
    font-weight: 900;
    margin-bottom: 1rem;
}

.example-box ul {
    padding-left: 2rem;
}

.example-box li {
    margin-bottom: 0.7rem;
    font-weight: 700;
}

/* ==========================================
   ELEMENT CARDS
   ========================================== */
.element-card {
    display: flex;
    background: linear-gradient(135deg, rgb(255, 255, 255) 0%, var(--element-card-bg) 100%);
    border: 3px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 2rem;
    overflow: hidden;
    box-shadow: 0 6px 16px var(--shadow);
    transition: all 0.3s ease;
}

.element-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 24px var(--strong-shadow);
}

.element-number {
    background: linear-gradient(135deg, var(--accent-color) 0%, rgb(240, 73, 89) 100%);
    color: rgb(255, 255, 255);
    font-size: 3rem;
    font-weight: 900;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 4px 0 8px var(--shadow);
}

.element-content {
    padding: 2rem;
    flex-grow: 1;
}

.element-content h3 {
    color: var(--accent-color);
    font-weight: 900;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

/* ==========================================
   CASE CARDS
   ========================================== */
.case-card {
    background: linear-gradient(135deg, var(--case-card-bg) 0%, rgb(245, 238, 210) 100%);
    border: 4px solid rgb(218, 165, 32);
    border-radius: 12px;
    margin-bottom: 2.5rem;
    overflow: hidden;
    box-shadow: 0 6px 16px var(--shadow);
}

.case-header {
    background: linear-gradient(135deg, rgb(218, 165, 32) 0%, rgb(238, 185, 52) 100%);
    color: rgb(255, 255, 255);
    padding: 1.5rem;
    font-weight: 900;
}

.case-header h3 {
    color: rgb(255, 255, 255);
    margin-bottom: 0.5rem;
    font-weight: 900;
}

.citation {
    font-size: 1.1rem;
    font-weight: 900;
    color: rgb(255, 255, 255);
    background: rgba(0, 0, 0, 0.2);
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 6px;
}

.case-content {
    padding: 2rem;
}

.case-content h4 {
    color: rgb(139, 105, 20);
    font-weight: 900;
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
}

.case-content ul {
    padding-left: 2rem;
}

.case-content li {
    margin-bottom: 0.7rem;
    font-weight: 700;
}

/* ==========================================
   STATEMENT AND ANALYSIS
   ========================================== */
.statement-box {
    background: linear-gradient(135deg, rgb(255, 240, 245) 0%, rgb(255, 228, 225) 100%);
    border: 4px solid rgb(255, 105, 180);
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem;
    text-align: center;
    box-shadow: 0 4px 12px var(--shadow);
}

.statement-text {
    font-size: 1.3rem;
    color: rgb(199, 21, 133);
    font-weight: 900;
    font-style: italic;
}

.analysis-card {
    background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(245, 245, 255) 100%);
    border: 3px solid var(--border-color);
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px var(--shadow);
}

.analysis-card h3 {
    background: linear-gradient(135deg, var(--nav-bg) 0%, rgb(50, 50, 130) 100%);
    color: rgb(255, 255, 255);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-weight: 900;
}

.insurance-type-card {
    background: rgb(255, 255, 255);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 6px var(--shadow);
}

.insurance-type-card h5 {
    color: var(--accent-color);
    font-weight: 900;
    margin-bottom: 0.8rem;
}

/* ==========================================
   EXCEPTION CARDS
   ========================================== */
.exception-card {
    background: linear-gradient(135deg, rgb(255, 250, 240) 0%, rgb(255, 239, 213) 100%);
    border: 3px solid rgb(255, 140, 0);
    border-radius: 10px;
    margin-bottom: 2rem;
    overflow: hidden;
    box-shadow: 0 4px 12px var(--shadow);
}

.exception-header {
    background: linear-gradient(135deg, rgb(255, 140, 0) 0%, rgb(255, 160, 30) 100%);
    color: rgb(255, 255, 255);
    padding: 1.2rem;
    font-weight: 900;
}

.exception-header h4 {
    color: rgb(255, 255, 255);
    font-weight: 900;
}

.exception-content {
    padding: 2rem;
}

.exception-content h5 {
    color: rgb(205, 92, 0);
    font-weight: 900;
    margin-top: 1rem;
}

/* ==========================================
   REASON CARDS
   ========================================== */
.reason-card {
    display: flex;
    background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(240, 255, 240) 100%);
    border: 3px solid var(--success-color);
    border-radius: 12px;
    margin-bottom: 2rem;
    overflow: hidden;
    box-shadow: 0 6px 16px var(--shadow);
}

.reason-number {
    background: linear-gradient(135deg, var(--success-color) 0%, rgb(60, 187, 89) 100%);
    color: rgb(255, 255, 255);
    font-size: 1.5rem;
    font-weight: 900;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    box-shadow: 4px 0 8px var(--shadow);
}

.reason-content {
    padding: 2rem;
    flex-grow: 1;
}

.reason-content h3 {
    color: var(--success-color);
    font-weight: 900;
    margin-bottom: 1rem;
}

/* ==========================================
   OBLIGATIONS SECTION
   ========================================== */
.obligations-section {
    margin-bottom: 3rem;
}

.obligation-card {
    display: flex;
    background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(255, 248, 240) 100%);
    border: 3px solid rgb(138, 43, 226);
    border-radius: 12px;
    margin-bottom: 2rem;
    overflow: hidden;
    box-shadow: 0 6px 16px var(--shadow);
}

.obligation-number {
    background: linear-gradient(135deg, rgb(138, 43, 226) 0%, rgb(158, 63, 246) 100%);
    color: rgb(255, 255, 255);
    font-size: 3rem;
    font-weight: 900;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 4px 0 8px var(--shadow);
}

.obligation-content {
    padding: 2rem;
    flex-grow: 1;
}

.obligation-content h4 {
    color: rgb(138, 43, 226);
    font-weight: 900;
    margin-bottom: 1rem;
    font-size: 1.4rem;
}

/* ==========================================
   CONSEQUENCES SECTION
   ========================================== */
.consequence-card {
    background: linear-gradient(135deg, rgb(255, 245, 245) 0%, rgb(255, 228, 225) 100%);
    border: 4px solid var(--accent-color);
    border-radius: 12px;
    margin-bottom: 2rem;
    overflow: hidden;
    box-shadow: 0 6px 16px var(--shadow);
}

.consequence-header {
    background: linear-gradient(135deg, var(--accent-color) 0%, rgb(240, 73, 89) 100%);
    color: rgb(255, 255, 255);
    padding: 1.2rem;
    font-weight: 900;
}

.consequence-header h3 {
    color: rgb(255, 255, 255);
    font-weight: 900;
}

.consequence-content {
    padding: 2rem;
}

.exceptions-box {
    background: linear-gradient(135deg, rgb(255, 248, 220) 0%, rgb(250, 235, 215) 100%);
    border: 3px solid rgb(255, 165, 0);
    border-radius: 10px;
    padding: 2rem;
    margin-top: 2rem;
    box-shadow: 0 4px 12px var(--shadow);
}

.exceptions-box h3 {
    color: rgb(255, 140, 0);
    font-weight: 900;
    margin-bottom: 1rem;
}

.exception-example {
    font-style: italic;
    color: rgb(139, 90, 0);
    font-weight: 700;
    margin-left: 1rem;
    margin-top: 0.5rem;
}

/* ==========================================
   MATERIAL FACTS SECTION
   ========================================== */
.material-facts-types {
    margin-top: 2rem;
}

.insurance-material-card {
    background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(240, 248, 255) 100%);
    border: 3px solid rgb(70, 130, 180);
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px var(--shadow);
}

.insurance-material-card h4 {
    background: linear-gradient(135deg, rgb(70, 130, 180) 0%, rgb(100, 149, 237) 100%);
    color: rgb(255, 255, 255);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-weight: 900;
}

.material-fact-example {
    font-style: italic;
    color: rgb(25, 25, 112);
    font-weight: 700;
    margin-left: 2rem;
    margin-top: 0.3rem;
    margin-bottom: 1rem;
}

.applicability-box {
    background: linear-gradient(135deg, rgb(240, 248, 255) 0%, rgb(230, 230, 250) 100%);
    border: 3px solid rgb(100, 149, 237);
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px var(--shadow);
}

.applicability-box h3 {
    color: rgb(25, 25, 112);
    font-weight: 900;
    margin-bottom: 1rem;
}

/* ==========================================
   FLOWCHART, MINDMAP, ROADMAP CONTAINERS
   ========================================== */
.flowchart-container, .mindmap-container, .roadmap-container {
    background: rgb(255, 255, 255);
    border: 4px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    margin-top: 1.5rem;
    box-shadow: 0 4px 12px var(--shadow);
    overflow-x: auto;
}

/* SVG Styles */
svg text {
    font-weight: 700 !important;
    font-family: 'Georgia', 'Times New Roman', serif !important;
}

/* ==========================================
   FOOTER
   ========================================== */
.footer {
    background: linear-gradient(135deg, var(--nav-bg) 0%, rgb(15, 15, 80) 100%);
    color: rgb(255, 255, 255);
    padding: 2rem;
    text-align: center;
    margin-top: 4rem;
    border-top: 4px solid var(--border-color);
}

.footer-content p {
    margin-bottom: 0.5rem;
    font-weight: 900;
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
        text-align: center;
    }
    
    .element-card, .reason-card, .obligation-card {
        flex-direction: column;
    }
    
    .element-number, .reason-number, .obligation-number {
        width: 100%;
        padding: 1rem;
        font-size: 2rem;
        writing-mode: horizontal-tb;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.6rem;
    }
    
    .container {
        padding: 1rem;
    }
    
    .question-section {
        padding: 1.5rem;
    }
}

/* ==========================================
   PRINT STYLES
   ========================================== */
@media print {
    body {
        background: white;
    }
    
    .navbar, .quick-nav, .nav-buttons, .print-btn {
        display: none;
    }
    
    .question-section {
        page-break-inside: avoid;
        box-shadow: none;
        border: 2px solid black;
    }
    
    .content-block {
        page-break-inside: avoid;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    
    .element-card, .case-card, .analysis-card {
        page-break-inside: avoid;
    }
}

/* ==========================================
   UTILITIES
   ========================================== */
.text-center {
    text-align: center;
}

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.p-1 { padding: 1rem; }
.p-2 { padding: 2rem; }

ul, ol {
    padding-left: 2rem;
}

li {
    margin-bottom: 0.8rem;
    font-weight: 700;
    line-height: 1.6;
}

strong {
    font-weight: 900 !important;
}

/* Additional styles for Q4-Q5 */

.distinction-card {
    background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(248, 249, 250) 100%);
    border: 3px solid rgb(138, 43, 226);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.distinction-card h3 {
    color: rgb(138, 43, 226);
    font-weight: 900;
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
}

.comparison-row {
    display: flex;
    gap: 2rem;
    margin: 1rem 0;
}

.comparison-col {
    flex: 1;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.life-insurance {
    background: linear-gradient(135deg, rgb(230, 247, 255) 0%, rgb(210, 237, 255) 100%);
    border: 2px solid rgb(100, 149, 237);
}

.other-insurance {
    background: linear-gradient(135deg, rgb(255, 248, 220) 0%, rgb(250, 235, 215) 100%);
    border: 2px solid rgb(218, 165, 32);
}

.comparison-col h4 {
    color: rgb(0, 51, 102);
    font-weight: 900;
    margin-bottom: 0.8rem;
}

.peril-card {
    background: linear-gradient(135deg, rgb(240, 255, 255) 0%, rgb(224, 255, 255) 100%);
    border: 3px solid rgb(0, 206, 209);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.peril-card h4 {
    color: rgb(0, 128, 128);
    font-weight: 900;
    margin-bottom: 0.8rem;
}

.essential-list {
    background: linear-gradient(135deg, rgb(240, 255, 240) 0%, rgb(220, 245, 220) 100%);
    border: 3px solid rgb(40, 167, 69);
    border-radius: 10px;
    padding: 2rem;
    margin: 1rem 0;
}

.essential-list li {
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

.not-perils-list {
    background: linear-gradient(135deg, rgb(255, 245, 245) 0%, rgb(255, 228, 225) 100%);
    border: 3px solid rgb(220, 53, 69);
    border-radius: 10px;
    padding: 2rem;
    margin: 1rem 0;
}

.not-perils-list li {
    margin-bottom: 1rem;
    font-size: 1.05rem;
    color: rgb(139, 0, 0);
}

@media (max-width: 768px) {
    .comparison-row {
        flex-direction: column;
    }
    
    .comparison-col {
        margin-bottom: 1rem;
    }
}

/* Additional consequence card styling */
.consequence-card {
    background: linear-gradient(135deg, rgb(255, 250, 240) 0%, rgb(255, 245, 230) 100%);
    border: 3px solid rgb(255, 140, 0);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.consequence-header h4 {
    color: rgb(204, 85, 0);
    font-weight: 900;
    margin-bottom: 1rem;
}

.consequence-content {
    margin-top: 1rem;
}

/* Footer styling */
.footer {
    background: linear-gradient(135deg, rgb(25, 25, 112) 0%, rgb(70, 130, 180) 100%);
    color: white;
    padding: 2rem;
    text-align: center;
    margin-top: 3rem;
}

.footer-content p {
    margin: 0.5rem 0;
    font-weight: 700;
}

@media print {
    .navbar, .footer {
        display: none;
    }
}