/* General Styles */
body {
  font-family: Arial, sans-serif;
  color: #2d2f53; /* Dark Slate Blue for text */
  background-color: #022e19; /* Dark green background */
  margin: 0; /* Ensure there is no margin */
  padding: 0; /* Remove any padding */
  overflow-x: hidden; /* Prevent horizontal overflow */
  box-sizing: border-box; /* Includes padding and border in element's total width and height */
}

/* Container Class */
.container {
  width: 100%; /* Full width of the viewport */
  max-width: 100%; /* Full width with padding */
  margin: 0 auto; /* Center the container horizontally */
  padding: 0 2rem; /* Padding inside the container */
}

/* Navigation */
nav {
  position: fixed; /* Fixes the nav to the top of the viewport */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* Full width of the viewport */
  padding: 0 2rem; /* Horizontal padding */
  z-index: 1000; /* Ensure nav is above other content */
  transition: background 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transitions */
  box-sizing: border-box; /* Includes padding and border in element's total width and height */
}

.menu-toggle {
  display: none; /* Hide toggle button by default */
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
}

/* Background color for navigation when scrolled past hero */
.scrolled {
  background: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
}

.scrolled .nav-links a {
  color: #262872; /* Change text color for navigation links (dark blue) */
}

/* Adjust logo image height if needed */
.logo img {
  height: 100px; /* Adjust based on your logo dimensions */
  width: auto;
}

/* Style for navigation links */
.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-links li {
  display: inline;
  margin-right: 1rem;
}

.nav-links a {
  color: #fdc113; /* Bright Yellow for navigation links */
  text-decoration: none;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Shadow effect black */
}

/* Hero Section */
.hero-section {
  background: url("images/solar-header.png") no-repeat center center/cover;
  color: #ffffff; /* White text for the hero section */
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Shadow effect gray */
}

/* Hero content styling */
.hero-content h2 {
  font-size: 3rem;
}

/* CTA Button */
.cta-btn {
  background-color: #fdc113;
  color: #262872;
  padding: 10px 20px;
  text-decoration: none;
  display: inline-block;
  border-radius: 5px;
  cursor: pointer; /* Ensure the cursor changes to pointer */
}

/* Section Styles */
.benefits-section,
.services-section,
.products-section,
.contact-section,
.about-section,
.testimonials-section {
  padding: 3rem 2rem;
  background-color: #fdc113; /* Bright yellow background for sections */
  margin: 2rem auto; /* Center sections and add vertical margin */
  max-width: 60%; /* Limit width for larger screens */
}

h2 {
  text-align: center;
  margin-bottom: 1rem;
}

/* Content Cards */
.service-card,
.product-card,
.about-card,
.benefit-card,
.contact-card {
  background-color: #e2ebc2b4; /* Light gray for service cards */
  padding: 2rem;
  border-radius: 5px;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

blockquote {
  font-style: italic;
  background-color: #4ab949; /* Bright green background for testimonials */
  color: #ffffff; /* White text for testimonials */
  padding: 1rem;
  border-left: 5px solid #022e19; /* Dark green border for blockquote */
  margin: 1rem auto; /* Center blockquote and add vertical margin */
  max-width: 800px; /* Limit width for larger screens */
}

/* Footer */
footer {
  text-align: center;
  padding: 1rem;
  background-color: #022e19; /* Dark green for footer */
  color: #ffffff; /* White text for footer */
}

/* Responsive Design */
@media (max-width: 768px) {
  .nav-links {
    display: none; /* Hide nav links by default on small screens */
    flex-direction: column;
    width: 100%;
    background: #ffffff;
    position: absolute;
    top: 100%;
    left: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    opacity: 0; /* Hide the menu initially */
    visibility: hidden; /* Hide menu visually */
    transform: translateY(-10px); /* Start with the menu slightly above */
  }

  /* Styles when menu is open */
  nav.active {
    background: rgba(
      255,
      255,
      255,
      0.9
    ); /* Semi-transparent white background */
    color: #262872; /* Dark blue text color */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition */
  }

  .nav-links.active {
    opacity: 1; /* Show the menu */
    visibility: visible; /* Ensure the menu is visible */
    transform: translateY(0); /* Move to its original position */
    display: flex; /* Show nav links when active */
    background-color: rgba(
      255,
      255,
      255,
      0.9
    ); /* Semi-transparent background */
  }

  .nav-links.active a {
    color: #262872; /* Dark blue for active menu links */
  }

  .menu-toggle {
    display: block; /* Show the toggle button on small screens */
  }

  /* Section Styles */
  .benefits-section,
  .services-section,
  .products-section,
  .contact-section,
  .about-section,
  .testimonials-section {
    padding: 1rem 1.5rem;
    background-color: #fdc113; /* Bright yellow background for sections */
    margin: 1rem auto; /* Center sections and add vertical margin */
    max-width: 100%; /* Limit width for larger screens */
    justify-content: center;
    align-items: center;
  }
}

@media (max-width: 1024px) {
  .hero-section,
  .about-section,
  .services-section,
  .products-section,
  .contact-section,
  .testimonials-section {
    padding: 2rem 1rem; /* Adjust padding for smaller screens */
  }

  .benefits-section,
  .services-section,
  .products-section,
  .contact-section,
  .about-section,
  .testimonials-section {
    margin: 1rem auto; /* Remove margins for smaller screens */
    justify-content: center;
    align-items: center;
  }

  .nav-links {
    text-align: center; /* Center navigation links on smaller screens */
  }

  .nav-links li {
    display: block;
    margin-bottom: 0.5rem;
  }

  .hero-content h2 {
    font-size: 2rem; /* Adjust font size for smaller screens */
  }

  form {
    margin: 0 1rem; /* Adjust margin for better spacing on mobile */
  }
}