body {
    display: flex;
    flex-direction: column; /* Stacks children vertically */
    align-items: center; /* Centers children horizontally in a column layout */
    justify-content: center; /* Centers content vertically if there's extra space */
    min-height: 100vh; /* Ensures body takes full viewport height */
    font-family: Arial, sans-serif;
    background-color: #f2f2f2; /* Light grey background for the body */
    margin: 0; /* Remove default body margin */
    padding: 0; /* Remove default body padding */
}

/* Styles for the image container */
.image-container {
    max-width: 100%; /* Ensures image container doesn't exceed viewport width */
    height: auto;
    display: block; /* Ensures block-level behavior */
    margin-bottom: 20px; /* Add some space below the image */
}

.image-container img {
    max-width: 100%; /* Makes image responsive within its container */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Removes extra space below image */
}

/* Styles for the section containing progress bar and text */
.progress-and-text-section {
    background-color: white; /* White background as requested */
    padding: 20px; /* Padding around the content inside this section */
    text-align: center; /* This helps center the H1 text */
    width: 90%; /* Give it a defined width relative to parent (body) */
    max-width: 800px; /* Limit max width for better readability on large screens */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow */
    border-radius: 8px; /* Optional: Rounded corners */
    /* Ensure this div itself is centered by the body's flexbox */
    margin-left: auto; /* Important for centering if not using body's flexbox directly for this element */
    margin-right: auto; /* Important for centering if not using body's flexbox directly for this element */
}

h1 {
    font-size: 40px;
    color: black; /* Ensure text color is black for contrast on white background */
    margin-top: 20px; /* Space between circular progress and text */
    margin-bottom: 0; /* Remove default bottom margin if not needed */
}

/* Responsive font size for h1 */
@media screen and (max-width: 600px) {
    h1 {
        font-size: 20px;
    }
}

.circular-progress {
    position: relative;
    width: 200px; /* Size of the outer circle */
    height: 200px;
    border-radius: 50%;
    /* Conic gradient for progress: 90% blue, 10% light gray */
    background: conic-gradient(#a30303 0%, #f70c0c 100.00%, #05fa4a 100.00%, #15e82a 100%);
    display: flex;
    align-items: center; /* Centers inner content vertically */
    justify-content: center; /* Centers inner content horizontally */
    margin: 0 auto; /* THIS IS KEY: Centers the block element horizontally */
    margin-bottom: 20px; /* Add some space below the progress bar */
}

.inner-circle {
    position: absolute; /* Allows positioning relative to .circular-progress */
    width: 160px; /* Size of the inner circle to create the donut effect */
    height: 160px;
    border-radius: 50%;
    background-color: white; /* Color of the inner circle */
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-text {
    font-size: 2.5em;
    font-weight: bold;
    color: #333; /* Dark gray for text for readability */
}