.chart-title {
    text-align: center;
    font-size: 2em !important;
    font-weight: bold !important;
    margin-bottom: 10px; /* Space between title and chart */
    color: #333; /* or any color you prefer */
    padding: 0 10px; /* Padding might be necessary for smaller screens */
}

@media (max-width: 768px) {
    .overlay {
        bottom: 5px; /* Adjust for smaller screens */
        right: 5px; /* Adjust for smaller screens */
    }
    .yearCounter {
        bottom: 40px; /* Adjust for smaller screens */
        right: 5px; /* Adjust for smaller screens */
    }
}
.chartWithOverlay {
    position: relative;
    width: 100%; /* Adjust based on your layout */
    height: auto; /* Adjust based on your content */
}
.overlay {
    position: absolute;
    bottom: 10px; /* Adjust based on your needs */
    right: 10px; /* Adjust based on your needs */
    width: auto; /* Adjust based on your needs */
    height: 30px; /* Adjust based on your needs */
    z-index: 10; /* Ensure it appears above the chart */
}
.yearCounter {
    position: absolute;
    bottom: 8%; /* Adjust as needed */
    right: 5%; /* Adjust as needed */
    color: #000; /* Ensure good contrast */
    font-size: 20px; /* Adjust as needed */
    z-index: 10; /* Ensure it's above other elements */
}