/* Hero Section */
#hero {
  background: no-repeat url("../images/hero-solar.jpg") center bottom/cover;
  min-height: 30vh;
  position: relative;
}

#hero .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 30vh;
  color: var(--white);
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-content h1 {
  font-size: 2.5rem;
}

/* General Styles */

#services {
  padding: var(--mb-4) 0;
}

#services .information-center {
  margin-bottom: 2rem;
}

#services h2 {
  margin-bottom: 2rem;
  color: var(--light-gray);
  text-align: center;
}

#services p {
  color: var(--primary);
  text-align: left;
}

.services {
  display: flex;
}

.services__content {
  width: 50%;
  padding: 2rem;
  text-align: center;
}

.services:nth-child(even) {
  flex-direction: row-reverse;
}

.services__image {
  width: 50%;
}

.services__image.solar {
  background: no-repeat url("../images/services-solar.jpg") center center/cover;
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
}

.services__image.wind {
  background: no-repeat url("../images/wind-turbines.jpg") center center/cover;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}

.services__image.power-backup {
  background: no-repeat url("../images/power-backup.png") center center/cover;
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
}

.services__image.solar-thermal {
  background: no-repeat url("../images/solar-thermal.jpg") center center/cover;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}

.services__image.industrial-heat-pumps {
  background: no-repeat url("../images/industrial-heat-pump.png") center
    center/cover;
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
}

.services__image.water-heating {
  background: no-repeat url("../images/water-heating.jpg") center center/cover;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}

.services__image.hydro-electric {
  background: no-repeat url("../images/hydro-electric.png") center center/cover;
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
}

.services__image.solar-lights {
  background: no-repeat url("../images/solar-lights.jpg") center center/cover;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}

/* Media Queries */

@media (max-width: 850px) {
  .services {
    display: block;
  }
  .services__content {
    width: 100%;
  }
  .services__image {
    width: 100%;
    height: 200px;
  }
  .services__image.solar {
    clip-path: none;
  }

  .services__image.wind {
    clip-path: none;
  }

  .services__image.power-backup {
    clip-path: none;
  }

  .services__image.solar-thermal {
    clip-path: none;
  }

  .services__image.industrial-heat-pumps {
    clip-path: none;
  }

  .services__image.water-heating {
    clip-path: none;
  }

  .services__image.hydro-electric {
    clip-path: none;
  }

  .services__image.solar-lights {
    clip-path: none;
  }
}