.header {
    display: flex;
    flex-direction: column; /* Stack items vertically */
}

.header-text {
    font-family: Verdana, sans-serif; /* Use Verdana with sans-serif as fallback */
    font-size: 18pt; /* Set font size to 1.2em */
    font-weight: bold; /* Make the text bold */
    margin: 20 auto; /* Center horizontally */
    text-align: center; /* Ensure text alignment in the center */
    color: #2b3a67; /* Blue text color */
}


/* Overall Font */
.body {
    margin: 0;
    padding: 0;
    background-color: #f4f4f9;
    color: #272728;
}

/* Report Container Styling */
.report-container {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Container for paragraphs and charts */
.content-container {
    display: flex; /* Flexbox layout to position items side by side */
    gap: 20px; /* Space between the sections */
    padding: 20px;
    max-width: 1200px;
    margin: auto;
    flex-wrap: wrap; /* Allow items to wrap to a new line if needed */
}

/* Paragraph section styling - positioned on the left */
.paragraph-section {
    flex: 1; /* Takes up remaining space on the left */
    max-width: 60%; /* Adjust as needed */
    padding-right: 20px; /* Optional padding for better spacing */
}

/* Report Section Styling */
.report-section {
    margin-bottom: 20px;
}

.heading-with-icon {
    font-family: Inter, sans-serif; 
    font-size: 16pt;
    font-weight: bold;
    color: #272728;
    margin-bottom: 10px;
    border-bottom: 2px solid #0056b3;
    padding-bottom: 5px;
    display: flex;
    width: 100%; /* Ensures it spans the full width of the container */
    align-items: center; /* Vertically aligns text and icon */
}

.report-section p, {
  font-family: Inter, sans-serif;
}

.heading-with-icon i {
    margin-left: auto; /* Pushes the icon to the far right */
    font-size: 1.5em; /* Adjusts icon size */
}

.phases-content h2.sub-section,
.resources-content h2.sub-section,
.risk-content h2.sub-section,
.financial-content h2.sub-section {
    font-family: Inter, sans-serif; 
    font-size: 14pt; 
    font-weight: bold;
    color: #272728;
    border: none;
    text-decoration: underline; 
}

.overview-content p,
.estimates-content p,
.complexity-content p,
.readiness-content p,
.regulatory-content p,
.market-content p,
.phases-content p,
.resources-content p,
.risk-content p,
.financial-content p {
    font-family: Inter, sans-serif;  
    font-size: 12pt;
    color: #272728;
}

.phases-content p,
.phases-content ul,
.phases-content li {
    font-family: Inter, sans-serif; 
    color: #272728;
    margin-top: 5px; /* Less space between paragraphs or lists */
    margin-bottom: 5px;
}

/* Chart section styling - positioned on the right */
.chart-section {
    flex: 1; /* Takes up space on the right */
    max-width: 40%; /* Adjust width to fit content */
    display: flex;
    flex-direction: column;
    /* gap: 30px; /* Increased space between charts for better readability */
    /* padding-bottom: 20px; /* Add space at the bottom */
}

.chart-section h2 {
    font-family: Inter, sans-serif;  
    font-size: 16pt;
    font-weight: bold;
    color: #272728;
    text-align: right;
    border-bottom: 2px solid #0056b3;
    padding-bottom: 5px;
}

/* Set specific dimensions for the charts */
.chart-section canvas {
    width: 100%; /* Full width of the container */
    height: 200px; /* Adjust height as needed */
    margin-bottom: 30px; 
}

#cost-by-phase-chart,
#time-by-phase-chart {
    margin-top: 30px;
}

#score-meter {
    width: 100%;      /* Ensures full width */
    height: 150px;    /* Adjust for a proportional bar height */
    display: block;
    margin-top: 0; 
    padding: 0;
}

/* Style for score explanation */
#score-explanation {
    margin-top: 15px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 2px solid #0056b3; 
    line-height: 1.6;
    border-radius: 5px; /* Optional: rounded corners */
}

#score-explanation h3 {
    font-family: Inter, sans-serif;  
    font-size: 12pt;
    color: #0056b3;
    margin-bottom: 10px;
}

#score-explanation p {
    font-family: Inter, sans-serif;   
    font-size: 10pt;
}

#score-explanation ul {
    font-family: Inter, sans-serif;
    font-size: 10pt;
    margin: 20px 0 20px 20px;
}

#score-explanation li {
    margin-bottom: 8px;
}

#cost-by-category-chart {
    margin-top: 20px;
}

#phaseI-legend,
#phaseII-legend,
#phaseIII-legend,
#phaseIV-legend,
#phaseV-legend {
    font-family: Inter, sans-serif;
    color: #272728;
}

#phaseI-cost-pie-chart,
#phaseI-time-pie-chart,
#phaseII-cost-pie-chart,
#phaseII-time-pie-chart,
#phaseIII-cost-pie-chart,
#phaseIII-time-pie-chart,
#phaseIV-cost-pie-chart,
#phaseIV-time-pie-chart,
#phaseV-cost-pie-chart,
#phaseV-time-pie-chart {
    margin-bottom: 10px; 
}


.full-width-section h2.sub-section {
    font-family: Inter, sans-serif;  
    font-size: 14pt; 
    font-weight: bold;
    color: #272728;
    border: none;
    text-decoration: underline; 
}

.full-width-section canvas.cost-by-phase-chart {
    flex: 1; /* Takes up remaining space on the left */
    max-width: 50%; /* Adjust as needed */
    padding-right: 20px; /* Optional padding for better spacing */
}

.full-width-section #disclaimer {
    margin-top: 15px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 2px solid #0056b3;
    line-height: 1.6;
    border-radius: 5px; /* Optional: rounded corners */
}

.canvas-container {
    display: flex;
    gap: 50px; /* Space between the canvases */
    justify-content: left; /* Center the content */
}

.canvas-container canvas {
    flex: 1; /* Each canvas takes up an equal portion */
    max-width: 45%; /* Adjust to control the width of each canvas */
}


.full-width-section #disclaimer .disclaimer-heading {
    font-family: Inter, sans-serif;  
    font-size: 12pt;
    color: #0056b3;
}

.disclaimer-content ul li {
    font-family: Inter, sans-serif;  
    font-size: 10pt; 
    color: #272728;
    margin-top: 5px; /* Less space between paragraphs or lists */
    margin-bottom: 5px;
}

ul.phase-list {
    padding: 0;
    margin: 0;
}

ul.phase-list li {
    font-family: Inter, sans-serif;
    font-size: 12pt;
    color: #272728;
    list-style-type: none;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.fa-square-check,
.fa-square {
    font-size: 14pt;
    color: #272728;
    margin-right: 10px;
}

.advanced-phase-message {
    margin-top: 25px;
    font-size: 12pt;
    font-style: italic;
    line-height: 1.6;
}