body {
  font-family: Arial, sans-serif;
  background: #222222;
  
}

.title {
  color: white;
  font-size: 37.5px;
  margin-bottom: 2.5px;
  margin-left: 5px;
}
#divider {
  width: 80%;  
  height: 0.5px; 
  float: left;
  
  background-color: white;
  margin: 7.5px auto;   
}

.text-block {
  color: white;
  width: 90%;
  float: left;
  font-size: 0.75rem;
  margin: 0 auto;
  text-align: justify;
}

.bar .pop-label {
  display: block;
  font-size: 15px;
  color:aliceblue;
}

.bar {
  display: block;
  align-items: center;
  margin-left: 12.5px;
}

.gov-pop {
  width: 80%;
  
  background-color: #545454;
   
   border-radius: 2px;
   align-items: center;
  
  
}

.progress-bar {
  width: 100%;
  height: 5px;
  background-color: #4CAF50;
  text-align: center;
  color: white;
  align-items: center;
  font-size: 1rem;
  border-radius: 2px;
  transition: width 0.3s ease;
  height: 25px;  
  
}

.tax {
padding-bottom: 12.5px;
color: white;
align-items: center;
font-size: 1.25rem;
}



.container {  
  display: grid;
  height: 425px;
  grid-template-columns: 0.9fr 1.1fr;
  grid-template-rows: 0.8fr 1.4fr 0.9fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
  "step-indicator step-indicator"
  "single-use-packaging chart"
  "slider chart"
  "gov-pop chart";
    
}

.step-indicator { 
  grid-area: step-indicator; 
  display: flex;
  
  justify-content: center;  
  align-items: center;
  position: relative;  
  padding: 5px 0;  
}

.single-use-packaging { 
  grid-area: single-use-packaging; 
  width: 90%;
  margin-left: 12.5px;
}

.chart { 
  padding: 25px;
  position: relative;
 height: 100%;
 display: grid; 
 grid-template-columns: 1fr 1fr; 
 grid-template-rows: 1fr 1fr; 
 gap: 125px 0px; 
 grid-template-areas: 
   "circle1 circle2"
   "circle3 circle4"; 
 grid-area: chart; 
    
  
}




.slider-container { 
  padding-bottom: 50px;
  grid-area: slider; 
  margin-left: 12.5px
}

.gov-pop { grid-area: gov-pop; }

.circle1 { 
grid-area: circle1; 
display: flex;
justify-content: center;
align-items: center;
}

.circle-2 { 
grid-area: circle-2; 
display: flex;
justify-content: center;
align-items: center;
}

.circle3 { 
grid-area: circle3; 
display: flex;
justify-content: center;
align-items: center;
}

.circele4 { 
grid-area: circele4; 
display: flex;
justify-content: center;
align-items: center;
}


.circle {
  
  width: 150px;  
  height: 150px;  
  border-radius: 50%;  
  background-color: #00BF63;  
  transition: transform 0.5s;  
  transform-origin: center; 
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 0.25em;




}

span#title {
  text-align: center;
}

input[type=range] {
  width: 75px;
  margin-top: 5px;
}

#slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  position: relative;
  top: 15px;
  width: 75%;  
  height: 6.25px;  
  background: #d3d3d3;  
  outline: none; 
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

 
#slider:hover{
  opacity: 1;  
}

 
#slider::-webkit-slider-thumb {
  -webkit-appearance: none;  
  appearance: none;
  width: 25px;  
  height: 25px;  
  border-radius: 50%;
  background: #04AA6D;  
  cursor: pointer;  
}

#slider::-moz-range-thumb {
  width: 12.5px;  
  height: 12.5px;  
  background: #04AA6D;  
  cursor: pointer;  
}











.step {
  background-color: #ddd; /* Non-active step background color */
  border-radius: 3.75px; /* Adjusted for rounded corners */
  padding: 5px 10px; /* Adjusted padding inside each step */
  margin: 0 25px; /* Increased spacing between steps */
  text-align: center;
  position: relative; /* Needed for absolute positioning of lines */
}

.step:not(:last-child):not(:nth-last-child(2))::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -50px; /* Adjust based on the space between steps */
  width: 100px; /* Adjusted to equal the space between steps */
  height: 0.25px;
  border-top: 3.75px dotted #ccc;
  z-index: -1;
  transform: translateY(-50%);
}

.step.active {
  background-color: #4CAF50; 
  color: white; 
}

.step.prev {
  background-color: #307033; 
  color: #B4AEAE; 
}

.step-title {
  font-size: 1em; 
}

.button-link {
  display: inline-block; 
  font-size: 0.75rem;
  padding: 2.5px 5px; /*  */
  margin: 25px 0; 
  border-radius: 12.5px;
  background-color: #15A0EF; 
  color: white; 
  text-decoration: none; 
  border-radius: 1.25px; 
  border: none; 
  text-align: center; 
  transition: background-color 0.3s, color 0.3s; 
}

.button-link:hover {
  background-color: #0D6FA6; 
  color: #fff; 
}