.navbar a {
  text-decoration: none;
  color: white;
  font-size: 14px;
  transition: color 0.3s ease;
}

.navbar a:hover {
  color: rgb(229, 129, 63) !important;
}

.navbar li:nth-child(2) a{
  color: rgb(251, 117, 69) !important;
}

/* By default, show the text and hide icons */
.nav-text {
  display: inline;
  font-size: 15px;
  font-family: 'Lobster', sans-serif;
}

.nav-home {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 900;
  color: white !important;
}

.nav-home:hover {
  color: rgb(229, 129, 63) !important;
}

.intro {
  width: 100%;
  height: auto;
}

.intro>img {
  width: 100%;
  height: 800px;
}

.energy-footer-styles {
  width: 100%;
  margin-top: -80px;
  z-index: 999;
  padding: 0;
  /* Any background behind the SVG if needed */
  background: #fff;
}

.energy-footer-svg {
  display: block;
  /* Removes default inline spacing */
  width: 100%;
  /* Scales to parent container */
  height: auto;
  /* Maintains aspect ratio */
}

.about-us {
  height: 400px;
  border-bottom: 10px solid orangered;
}


.orange-about {
  font-size: 70px;
  font-weight: 800;
  letter-spacing: -5px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: rgb(251, 117, 69);
}

.about-us>h4 {
  color: black;
  font-size: 22px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  width: 70%;
}

.vision {
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: row;
}

.vision-text {
  width: 50%;
  height: 100%;
}

.vision-img {
  width: 50%;
  height: 100%;
}

.v-text,
.m-text {
  width: 60%;
  height: 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.v-text>p,
.m-text>p {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -2px;
  color: black;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: left;
}

.v-text>h4,
.m-text>h4 {
  font-size: 15px;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
  text-align: left;
}

/* styles.css */

/* Container holding all energy icons */
.energy-icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  /* Optional spacing around container */
  margin: 50px auto;
  max-width: 1200px;
  height: 400px;
}

/* Each icon + label set */
.energy-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* The diamond shape itself */
.diamond {
  width: 80px;
  height: 80px;
  transform: rotate(45deg);
  /* turn square into diamond */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  /* dark shadow */
  margin-bottom: 10px;
}

/* Center and style the Font Awesome icon */
.diamond i {
  transform: rotate(-45deg);
  /* rotate icon back so it appears upright */
  color: #fff;
  /* white icon */
  font-size: 1.8rem;
}

/* Text label below each diamond */
.energy-icon p {
  color: #000;
  font-size: 1.4rem;
  font-weight: 800;
  margin-top: 10px;
  text-align: center;
}

/* Individual background colors for each diamond */
.diamond-environmental {
  background-color: #f8cf3d;
  /* approximate yellow from the image */
}

.diamond-innovative {
  background-color: #f39c12;
  /* orange */
}

.diamond-sustainable {
  background-color: #2c3e50;
  /* dark/black */
}

.diamond-efficient {
  background-color: #27ae60;
  /* green */
}

.oil-gas,
.power-plant,
.turbines {
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: row;
}

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

.turbine-text {
  width: 35%;
  height: 100%;
}

.turbine-text>p {
  font-size: 28px;
  font-weight: 300;
  font-family: 'Montserrat', sans-serif;
  width: 90%;
}

.oil-gas-img {
  width: 50%;
  height: 100%;
}

.oil-gas-text,
.power-plant-text {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}


.oil-gas-text>p {
  font-size: 150px;
  font-weight: 900;
  color: #f37f12;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.oil-gas-text>p>span {
  font-weight: 300;
}

.power-plant-text>p {
  font-size: 90px;
  font-weight: 900;
  color: black;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.power-plant-text>p>span {
  font-weight: 400;
}

.hydro-power,
.nepa {
  height: 500px;
  width: 100%;
  position: relative;
  z-index: 1;
  background-image: url(/assets/images/zojieenergy/20.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nepa {
  background-image: url(/assets/images/zojieenergy/21.jpg);
  height: 700px;
}


.hydro-power>p,
.nepa>p {
  font-size: 60px;
  font-weight: 100;
  position: absolute;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  bottom: 80px;
  letter-spacing: 4px;
  z-index: 6;
}

.nepa>p {
  font-size: 25px;
  letter-spacing: normal;
  width: 80%;
  color: white;
}

.gas-turbine {
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.gas-turbine-text {
  width: 48%;
  height: 100%;
}

.gas-turbine-text>p {
  font-size: 100px;
  font-weight: 900;
  letter-spacing: -1px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 90px;
}

.gas-turbine-text>p>span {
  font-size: 90px;
  font-weight: 300;
}

.gas-turbine-text>h4 {
  margin-top: 50px;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  width: 70%;
  text-align: left;
  font-weight: 300;
}

.gas-turbine>img {
  width: 37%;
  height: 100%;
  border-radius: 30%;
}

.wind-energy {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 700px;
}

.wind-energy-text {
  width: 50%;
  height: 100%;
}

.wind-energy-text>p {
  font-size: 100px;
  font-weight: 900;
  letter-spacing: -1px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 90px;
}

.wind-energy-text>p>span {
  font-size: 90px;
  font-weight: 300;
}

.wind-energy-text>h4 {
  font-size: 22px;
  font-weight: 300;
  font-family: 'Montserrat', sans-serif;
  color: black;
  width: 85%;
  margin-top: 20px;
}

.wind-energy-img {
  width: 50%;
  height: 100%;
  background-image: url(/assets/images/zojieenergy/24.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 1;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.wind-energy-img>p {
  position: absolute;
  bottom: 70px;
  z-index: 6;
  width: 90%;
  color: white;
  font-size: 17px;
  font-weight: 300;
  font-family: 'Montserrat', sans-serif;
}

.solar-energy {
  width: 100%;
  height: 700px;
  display: flex;
  flex-direction: row;
}

.solar-energy-text {
  width: 50%;
  height: 100%;
}

.solar-energy-text>p {
  width: 90%;
  font-size: 20px;
  font-weight: 300;
  font-family: 'Montserrat', sans-serif;
  color: #000;
}

.solar-energy-img {
  width: 50%;
  height: 100%;
  background-image: url(/assets/images/zojieenergy/25.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 1;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.solar-energy-img>p {
  position: absolute;
  top: 70px;
  z-index: 6;
  color: #ffffff;
  font-size: 120px;
  font-weight: 900;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.items-grid {
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: row;
}

.light-house {
  width: 65%;
  height: 100%;
}

.panel-house {
  width: 35%;
  height: 100%;
}

.field {
  width: 100%;
  height: auto;
}

.field>img {
  width: 100%;
  height: auto;
}

.energy-orange-footer {
  font-family: Arial, sans-serif;
  background-color: #ff7f00;
  /* Approximate orange color */
  color: #fff;
  /* White text */
  margin: 0;
  padding: 0;
}

/* Container for the map background */
.map-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  /* Make sure it's tall enough */
  overflow: hidden;
  background-color: inherit;
}

/* Full-width responsive SVG background */
.map-container svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  color: grey;
  /* Behind the content */
}

/* Info container (the row of contact details) */
.info-container {
  position: relative;
  z-index: 1;
  /* Above the SVG */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 200px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Each contact item */
.info-item {
  flex: 1 1 200px;
  /* Grow/shrink with a minimum width of ~200px */
  max-width: 300px;
  margin: 20px;
  text-align: center;
}

/* Purple circle for icons */
.icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: purple;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
  /* Center the circle and add bottom spacing */
  font-size: 24px;
  color: #fff;
}

/* Paragraph styling */
.info-item p {
  line-height: 1.5;
}

@media screen and (max-width: 800px) {

  .about-us{
    padding-bottom: 30px;
  }

  .energy-footer-styles {
    margin-top: -60px;
  }

  .intro>img {
    height: 700px;
  }

  .info-container {
    flex-direction: column;
  }

  .items-grid {
    flex-direction: column;
    height: auto;
  }

  .light-house,
  .panel-house {
    width: 100%;
    height: auto;
  }

  .wind-energy,
  .solar-energy {
    flex-direction: column;
    height: auto;
  }

  .solar-energy {
    flex-direction: column-reverse;
  }

  .solar-energy-img {
    position: static;
    justify-content: center;
    align-items: center;
  }

  .solar-energy-img>p {
    position: static;
    font-size: 80px;
  }

  .wind-energy-text,
  .solar-energy-text {
    width: 100%;
    height: auto;
    padding: 30px 0px;
  }

  .wind-energy-img,
  .solar-energy-img {
    width: 100%;
    height: 600px;
  }

  .gas-turbine {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }

  .gas-turbine-text {
    width: 100%;
    height: auto;
    padding: 20px 0px;
  }


  .gas-turbine>img {
    width: 100%;
    height: auto;
    border-radius: 0;
  }

  .oil-gas,
  .power-plant,
  .turbines {
    flex-direction: column;
    height: auto;
  }

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

  .turbine-text {
    height: auto;
    width: 100%;
    padding: 60px 20px;
  }


  .oil-gas-text,
  .power-plant-text {
    height: auto;
    text-align: center;
    width: 100%;
    padding: 60px 0px;
  }

  .oil-gas-text>p,
  .power-plant-text>p {
    font-size: 90px;
  }

  .oil-gas-img {
    width: 100%;
    height: auto;
  }

  .energy-icons {
    flex-direction: column;
    height: 800px;
  }

  .vision {
    height: auto;
    flex-direction: column;
  }

  .vision-text {
    width: 100%;
    height: auto;
    padding: 30px;
  }

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

  .about-us>h4 {
    width: 90%;
  }

  .v-text,
  .m-text {
    width: 80%;
    height: 40%;
  }

  .wind-energy-text>p {
    font-size: 70px;
    font-weight: 900;
    letter-spacing: -1px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 90px;
  }

  .wind-energy-text>p>span {
    font-size: 60px;
    font-weight: 300;
  }

  .gas-turbine-text>p {
    font-size: 70px;
    font-weight: 900;
    letter-spacing: -1px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 90px;
  }

  .gas-turbine-text>p>span {
    font-size: 60px;
    font-weight: 300;
  }

  .hydro-power>p {
    position: static;
  justify-self: center;
  margin-left: 20px;
  }
}