/* Reset & Core Styles from Reference */
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}
html, body { width: 100%; overflow-x: hidden; scroll-behavior: smooth; color: #1e293b; line-height: 1.6; background-color: #f8fafc; }
.content-wrapper { max-width: 70%; margin: 0 auto; background-color: #ffffff; }
@media (max-width: 1024px) { .content-wrapper { max-width: 100%; } }


/* Introduction Paragraph Alighment */
.intro-grid { 
    display: flex; 
    gap: 40px; 
    padding: 40px 0; 
    border-bottom: 1px solid #e2e8f0; 
}
.intro-col { 
    flex: 1; 
    text-align: justify; 
}
.intro-col h3 { 
    color: #0b2c4d; 
    margin-bottom: 15px; 
    font-size: 1.2rem; 
    border-left: 4px solid #38bdf8; 
    padding-left: 10px; 
}

@media (max-width: 768px) { 
    .intro-grid { flex-direction: column; } 
}


/* Sections & Zigzag Layout */
.section { padding: 50px 0; width: 100%; }
.section.alt { background: #f5f7fa; }
.container { max-width: 1200px; margin: auto; padding: 0 20px; }
.zigzag { display: flex; align-items: center; justify-content: space-between; gap: 40px; width: 100%; }
.content-side, .chart-side { flex: 1 1 50%; min-width: 0; }
@media(max-width: 1023px) { .zigzag { flex-direction: column !important; text-align: center; } }

/* Intro Paragraphs */
.intro-section { display: flex; gap: 40px; margin: 40px 0; }
.intro-column { flex: 1; text-align: justify; }
.intro-column h3 { color: #0b2c4d; border-bottom: 3px solid #38bdf8; display: inline-block; margin-bottom: 15px; }

/* Table Styling */
.table-wrap { width: 100%; overflow-x: auto; margin-bottom: 20px; border-radius: 8px; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 12px; border: 1px solid #d6dde6; text-align: left; }
th { background: #0b2c4d; color: #fff; }

/* Chart Box */
.chart-box {
    width: 100%;
    height: 450px;
    margin: 0 auto;
    overflow: visible !important; /* Ensures any slight overflow isn't hidden */
}

.chart-side, .chart-box {
    padding-left: 10px; /* Provides a physical buffer on the container level */
}

.chart-box svg {
    overflow: visible !important;
}

@media (max-width: 768px) {
    .chart-box {
        height: 300px; /* Reducing height on mobile helps maintain a better 3D ratio */
    }
}

/* footer */
footer { background: #081f36; color: #cbd5e1; text-align: center; padding: 30px 20px; }

/* Summary Box */
.summary-box { 
    background: #f0f7ff; 
    padding: 40px; 
    border-radius: 8px; 
    margin-top: 40px; 
    border-top: 5px solid #0b2c4d; 
}
.summary-box h2 { 
    color: #0b2c4d; 
    margin-bottom: 20px; 
}