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

.title {
  color: white;
  font-size: 37.5px;
  margin-bottom: 2.5px;
  margin-left: 5px;
}


main {
  color: white;
  display: flex;
  justify-content: space-around;
  padding: 5px;
 
}



#circle {
width: 200px; /* Initial size */
height: 200px; /* Initial size */



background-color: #8D9196;
border: 1.5px solid #A6A6A6; 

stroke: #A6A6A6;
border-radius: 50%;  
transition: transform 0.5s; 
transform-origin: center; 
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 0.5em;
}

span#title {
text-align: center;
}

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

.container {  display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 0.8fr 0.9fr 0.2fr 0.4fr 2.5fr;
gap: 0px 0px;
grid-auto-flow: row;
}

.step-indicator { grid-area: 1 / 1 / 2 / 5; }

.public-awareness { 
grid-area: 2 / 1 / 3 / 3; 
color: white;
width: 90%;
margin-left: 12.5px;


}

.education { 
grid-area: 2 / 3 / 3 / 5; 
color: white;
width: 90%;
margin-left: 12.5px;
}

.slider1 { 
grid-area: 3 / 1 / 4 / 3; 
-webkit-user-select: none;  
-ms-user-select: none;  
user-select: none;  
margin-left: 12.5px;
}

.slider2 { 
grid-area: 3 / 3 / 4 / 5; 
-webkit-user-select: none;  
-ms-user-select: none; 
user-select: none;  
margin-left: 12.50px;
}
.budget { 
grid-area: 4 / 1 / 5 / 5; 
display: flex;
width: 100%;
padding-top: 100px;
color: white;
font-size: 38px;
justify-content: center;
align-items: center;
}

.graphics { 
grid-area: 5 / 1 / 6 / 5; 
display: flex;
height: 375px;
margin:0px;
width: 100%;

align-items: center;
}

.circle-container { 
grid-area: 5 / 1 / 6 / 2; 
display: flex;
justify-content: center;
align-items: center; 
width: 425px;
}

.chart1-container { 
grid-area: 5 / 2 / 6 / 3; 
justify-content: center;
align-items: center; 
position: relative;

}

.chart2-container { 
grid-area: 5 / 3 / 6 / 4; 
justify-content: center;
align-items: center; 
position: relative;
}

.chart3-container { 
grid-area: 5 / 4 / 6 / 5; 
justify-content: center;
align-items: center; 
position: relative;
}



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

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


#box-left {
  float: left;
  width: 45%;
  margin: 12.5px;
  color: white;
  
  
}

#slider1,#slider2 {
user-select: none;  
-webkit-appearance: none;   
appearance: none;
position: relative;
top: 100px;
width: 75%;  
height: 6.25px; 
background: #d3d3d3;  
outline: none; 
opacity: 0.7;  
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}

 
#slider1:hover, #slider2:hover{
opacity: 1; /* Fully shown on mouse-over */
}

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

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


#divider {
  width: 80%; 
  height: 0.5px;  
  float: left;
  
  background-color: white;
  margin: 7.5px auto; 
}



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

.step {
  background-color: #ddd;  
  border-radius: 3.75px;  
  padding: 5px 10px;  
  margin: 0 25px; /* increased spacing between steps */
  text-align: center;
  position: relative;  
}

.step:not(:last-child):not(:nth-last-child(2))::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -50px;  
  width: 100px;  
  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;  
}