/*
  Improved style sheet for the P&V Eastern Engineers website.

  The design takes inspiration from the original dark themed site but modernises
  the layout with clearer typography, generous spacing and a responsive
  navigation bar. Sections are separated by subtle backgrounds to improve
  readability.  The CSS uses media queries to adjust the layout on small
  screens, collapsing the navigation into a stacked menu when necessary.
*/

/* Reset some basic elements */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', Arial, sans-serif;
  line-height: 1.6;
  color: #f5f5f5;
  /* use a dark neutral background reminiscent of the night sky to allow warm accents to pop */
  background-color: #0d0d0d;
}

header {
  /* dark header to contrast with bright accent colours */
  background: #0a0a0a;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Navigation bar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.navbar .logo {
  font-weight: 700;
  font-size: 1.4rem;
  /* solar yellow for brand name */
  color: #FFD700;
}

.nav-links {
  list-style: none;
  display: flex;
}

.nav-links li {
  margin-left: 1.5rem;
}

.nav-links a {
  color: #f5f5f5;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  /* change hover to green to signify sustainability */
  color: #4DBD33;
}

/* Hero section */
.hero {
  /* Use a locally stored, wide solar‑farm photograph to give the hero
     section a truly panoramic feel.  A very light overlay ensures the
     text remains legible while allowing the bright, sunny image to
     shine through.  Adjust the file name here if you choose a
     different hero image in future. */
  /* Provide an initial hero background consisting of a light overlay and
     a sunny solar‑farm photograph.  The individual background
     properties (position, size, repeat) are specified separately so
     that JavaScript can later update only the `background-image`
     property without resetting these values. */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)),
    url('./images/solar_farm_landscape_bright.jpg');
  /* Allow the image to pan by enlarging it slightly beyond the container. */
  background-size: 120%;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  /* Reduce the hero height so that it appears wide across desktop screens
     while still scaling gracefully on smaller devices. */
  height: 50vh;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1rem;
  /* Apply a continuous pan animation to create a sense of movement.
     A 20‑second cycle provides perceptible motion without becoming
     distracting.  Combined with the enlarged background size this
     mimics a gentle camera pan. */
  animation: heroPan 20s linear infinite;
}

/* Keyframes for panning the hero image.  The image slowly drifts from
   centre to the top left and back, creating gentle movement. */
@keyframes heroPan {
  0% {
    background-position: center;
  }
  50% {
    background-position: top left;
  }
  100% {
    background-position: center;
  }
}

.hero h1 {
  font-size: 2.8rem;
  margin-bottom: 0.5rem;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.hero .btn {
  text-decoration: none !important;
  /* Primary call‑to‑action buttons use the same warm orange as section
     headings to maintain a cohesive palette. */
  background: #F0A500;
  color: #0a0a0a;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 3px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.hero .btn:hover {
  /* Darken the button on hover for visual feedback */
  background: #D48B00;
}

/* General section styles */
section {
  padding: 4rem 1rem;
  max-width: 1000px;
  margin: 0 auto;
}

section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  /* Section headings use the same sunset‑orange as the buttons for
     consistency. */
  color: #F0A500;
  text-align: center;
}

/* About section */
#about {
  background-color: #111;
  border-radius: 6px;
}

#about p {
  font-size: 1rem;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

/* Mission & Vision section */
#mission {
  background-color: #0f0f0f;
  border-radius: 6px;
}

.mission-vision {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.mission-vision > div {
  flex: 1;
  min-width: 280px;
  margin: 1rem;
  /* Match the appearance of the Renewable Energy card: use a uniform
     dark background without an accent strip. */
  background: #0f0f0f;
  padding: 1.5rem;
  border-radius: 6px;
  /* Remove the accent strip to replicate the Renewable Energy card */
  border-top: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.mission-vision h3 {
  /* Use the sunset‑orange tone for subheadings to match the main
     headings and call‑to‑action buttons. */
  color: #F0A500;
  margin-bottom: 0.5rem;
}

.mission-vision p {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Services section */
#services ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.services-list li {
  /* Standard cards replicate the Renewable Energy card: a uniform dark
     background with no accent strip. */
  background: #0f0f0f;
  padding: 1.5rem;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  /* Remove the accent strip entirely to match the Renewable Energy
     style */
  border-top: none;
}

.services-list h3 {
  /* Headings in cards use the same warm orange as other section headings
     for consistency. */
  color: #F0A500;
  margin-bottom: 0.5rem;
}

.services-list p {
  font-size: 0.9rem;
}

/* The featured project (Kelkang case study) is presented outside of the
   grid in its own container.  It shares the same dark background as
   the Renewable Energy card but spans the full width of the page. */
.project-featured {
  background: #0f0f0f;
  padding: 1.5rem;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin-bottom: 2rem;
}
.project-featured h3 {
  color: #F0A500;
  margin-bottom: 0.5rem;
}
.project-featured p {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Featured cards (used for detailed case studies like the Kelkang project)
   have no accent strip and use a slightly darker background to draw
   attention.  This styling is applied by adding a `featured` class to
   the `<li>` element in the HTML. */
.services-list li.featured {
  background: #0f0f0f;
  border-top: none;
}

/* Project list styling mirrors the services list.  This class is used
   to lay out case studies (other than the featured one) in a grid
   with the same look and feel as service cards. */
.projects-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.projects-list li {
  background: #0f0f0f;
  padding: 1.5rem;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.projects-list h3 {
  color: #F0A500;
  margin-bottom: 0.5rem;
}

.projects-list p {
  font-size: 0.9rem;
}

/* Team section */
#team ul {
  list-style: none;
  padding: 0;
  max-width: 800px;
  margin: 0 auto;
}

.team-list li {
  margin-bottom: 0.8rem;
  font-size: 1rem;
}

.team-list strong {
  /* Align the team role colour with the warm orange used elsewhere
     in the design.  This unifies the palette and avoids the neon
     yellow tone that previously stood out. */
  color: #F0A500;
}

/* Contact section */
#contact {
  background-color: #111;
  border-radius: 6px;
}

#contact p {
  text-align: center;
  margin-bottom: 2rem;
}

form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

form input,
form textarea {
  padding: 0.8rem;
  border: 1px solid #333;
  border-radius: 4px;
  font-size: 1rem;
  background: #0f0f0f;
  color: #f5f5f5;
}

form textarea {
  height: 120px;
  resize: vertical;
}

form button {
  background: #e7f10a;
  color: #0a0a0a;
  padding: 0.8rem;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

form button:hover {
  background: #c8d208;
}

/* Footer */
footer {
  text-align: center;
  padding: 2rem 1rem;
  background: #0a0a0a;
  color: #888;
  font-size: 0.9rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .nav-links {
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    background: #0a0a0a;
    width: 100%;
    display: none;
  }
  .nav-links li {
    margin: 0.5rem 0;
    text-align: center;
  }
  .navbar .menu-toggle {
    display: block;
    cursor: pointer;
    font-size: 1.5rem;
    color: #e7f10a;
  }
  .navbar .logo {
    font-size: 1.2rem;
  }
}

.mission-vision h2, .mission-vision h3 {
  text-align: center;
}

.btn,
.btn a,
a.btn,
.hero-buttons a {
  text-decoration: none !important;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.mission-vision {
  display: flex;
  justify-content: center;
  gap: 2rem;
  text-align: center;
}

.mission-vision h3 {
  text-align: center;
  margin-bottom: 0.5rem;
}