body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 20px;
  margin: 0; /* Remove margin to ensure full white background */
}

.header-section {
  background-color: #fff; /* Full white background for the header section */
  padding-bottom: 20px; /* Add space under the header section */
}

.header {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.subheader {
  font-size: 20px;
  color: #555;
  margin-bottom: 10px;
}

.separator {
  border-top: 2px solid #ccc;
  margin: 20px 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* Add a new CSS class for dynamic bubble color */
.dynamic-color-bubble {
  padding: 15px;
  border-radius: 15px;
  text-align: center;
  margin: 5px;
  display: inline-block;
  color: white;
  background: linear-gradient(90deg, #00316E 0%, #00316E 50%, #5D9B59 50%, #5D9B59 100%);
  transition: background 0.3s ease; /* Smooth transition for background color */
}

/* Style the percentage text as bold */
.dynamic-color-bubble .bottom-text {
  font-weight: bold;
}

/* Smoother colors for the gradient */
.dynamic-color-bubble.smooth-color {
  filter: saturate(80%) brightness(90%); /* Adjust saturation and brightness for smoother colors */
}

.bubble {
  background-color: #3498db;
  border-radius: 15px;
  padding: 15px;
  max-width: 200px;
  text-align: center;
  margin: 5px;
}

.small-bubble {
  background-color: #3498db;
  border-radius: 15px;
  padding: 15px;
  text-align: center;
  color: white;
  margin: 5px;
  display: inline-block;
}

.small-bubble .top-text {
  font-weight: bold;
}

.small-bubble .bottom-text {
  font-family: Arial, sans-serif;
  color: transparent; /* Make text transparent initially */
  background: linear-gradient(90deg, blue 0%, green 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

h3 {
  font-size: 24px; /* Adjust the section title font size */
  text-align: center;
  color: #333; /* Set section title color to a darker shade */
  margin: 10px 0; /* Add space around section titles */
}

/* ... (existing CSS rules) */

/* Center the "Other Statistics" title */
.large-bubbles .section-container {
  display: flex;
  flex-direction: column; /* Display children in a column layout */
  align-items: center; /* Center align children horizontally */
}

.large-bubbles .container {
  display: flex;
  flex-wrap: wrap; /* Allow large bubbles to wrap to the next line */
  justify-content: center; /* Center the large bubbles horizontally */
}

.large-bubbles {
  display: flex;
  flex-wrap: wrap; /* Allow large bubbles to wrap to the next line */
  justify-content: center; /* Center the large bubbles horizontally */
}

.large-bubble {
  background-color: #fff;
  border-radius: 15px;
  padding: 20px;
  text-align: center;
  margin-bottom: 15px;
}

header {
  margin-bottom: 5%;
}

/* Add 3.5% space under the end of the first section */
.small-bubbles {
  margin-bottom: 3.5%;
}

.large-bubble img {
  width: 100%; /* Make the width 100% to fit the image */
}

/* Style the images directly inside the .container in .large-bubbles */
.large-bubbles .container {
  display: flex;
  flex-direction: column; /* Display images in a column layout */
  align-items: center; /* Center align images horizontally */
}

/* Add margin to the images */
.large-bubbles .container img {
  margin: 10px 0; /* Add 10px margin vertically */
  transform: scale(0.5); /* Downscale the images by 2x */
  overflow: hidden; /* Hide any overflow from the scaled images */
}

/* Style the images inside the containers */
.image-container img {
  width: auto; /* Set width to auto to maintain the original aspect ratio */
  max-height: 50%; /* Limit the height to 50% of the original size */
  margin: 10px; /* Add 10px margin to each image */
  border-radius: 15px; /* Add rounded corners */
  overflow: hidden; /* Hide any overflow from the scaled images */
}

.large-bubbles .container-large {
  display: flex;
  flex-wrap: wrap; /* Allow images to wrap to the next line */
  justify-content: center; /* Center the images horizontally */
}

.large-bubbles .container-large img {
  margin: 10px; /* Add margin to each image */
  border-radius: 15px; /* Add rounded corners */
  max-width: calc(50% - 20px); /* Limit the width of each image to half the container width minus margins */
}