.top-divider, .bottom-divider {
  background-color: rgb(228, 251, 228);
  padding: 3px;
}

.solution-container {
  background-color: white;
  padding: 4%;
  box-sizing: border-box;
}

.solution-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

.solution-text {
  color: #666666;
  text-align: center;
}

.solution-text h2 {
  font-size: 3vw;
  color: #304530;
  position: relative;
  margin-bottom: 1em;
}

.solution-text h2::after {
  content: '';
  position: absolute;
  height: 3px;
  background-color: #304530;
  bottom: -3px;
  left: 0%;
  width: 0%;
  animation: expandBar 0.75s ease-in-out forwards;
}

@keyframes expandBar {
  0% {
      left: 0%;
      width: 0%;
  }
  100% {
      width: 100%;
  }
}

.soluion-text p {
  font-size: 1.5em;
  line-height: 1.6;
  margin-bottom: 15px;
}

.solution-column {
  background-color: #ffffff;
}

.solution-column-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.solution-graph{
  flex: 1;
  padding-top: 0%;
  position: relative;
}

.solution-graph img {
  max-width: 525px;
  height: auto;
  display: block;
  border-radius: 10px;
  transition: transform 0.75s ease, box-shadow 0.75s ease;
  box-shadow: 2.5px 5px 12px #0f0f0f90;
}

.solution-graph img:hover {
  transform: scale(1.05);
  box-shadow:5px 10px 25px #0f0f0f90;
}

.solution-column-text {
  flex: 1;
  color: #666666;
}

.solution-column-text h2 {
  font-size: 3.1em;
  margin-bottom: 20px;
  background-image: linear-gradient(to right, #006400 40%, #003300 90%);
  -webkit-background-clip: text;
  color: transparent;
}

.solution-column-text p {
  font-size: 1em;
  line-height: 1.6;
  margin-bottom: 15px;
}

/*button overlay*/

.solution-desc-container {
  display: flex;
  justify-content: space-around;
  background-color: white;
  padding-bottom: 5%;
}

.left-column {
  width: 40%;
}

.right-column {
  position: relative;
}

.solution-box {
  background-color: white;
  border: 2px solid black;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease;
}

.solution-box h2, p {
  color: black;
  transition: color 0.5s ease;
}

.turbine-img {
  max-width: 100%;
  height: auto;
}

.button-overlay {
  position: absolute;
  background-color: black;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.button-overlay:hover {
  background-color: gray;
  transform: scale(1.035);
}

#button1 {
  top: 7.5%;
  left: 10%;
}

#button2 {
  top: 30%;
  left: 25%;
}

#button3 {
  top: 80%;
  left: 35%;
}

.solution-box.inverted {
  background-color: black;
  border: 2px solid white;
}

.solution-box.inverted h2,
.solution-box.inverted p {
color: white;
}



.footer p{
color:white;
}