/*
  Hippo Power Solutions - Stylesheet

  The colour palette is based on the provided brand assets: a deep forest green,
  a burnt orange accent and an off‑white secondary tone. Sections alternate
  between dark and light backgrounds to improve readability and draw attention
  to content. The layout is responsive, making use of flexbox and CSS grid
  where appropriate.
*/

/* Reset and global styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  scroll-behavior: smooth;
  /* Use our custom body font defined in variables */
  font-family: var(--font-body);
  background-color: var(--color-dark);
  color: var(--color-secondary);
  line-height: 1.6;
}

/* Colour variables */
:root {
  --color-dark: #012b21;        /* deep forest green */
  --color-primary: #b76a28;     /* burnt orange accent */
  --color-secondary: #f3efe8;   /* off‑white text */
  --color-light-bg: #f7f4ef;    /* light section background */
  --color-card-bg: #ffffff;     /* card background */
  --shadow: rgba(0, 0, 0, 0.1);

  /* Typography */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Open Sans', sans-serif;
}

/* Container utility class */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Navigation bar */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: rgba(1, 43, 33, 0.9);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 4px var(--shadow);
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.logo img {
  height: 48px;
  width: auto;
  display: block;
}

.nav-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.nav-links a {
  text-decoration: none;
  color: var(--color-secondary);
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.5rem 0;
  transition: color 0.2s ease-in-out;

  /* Base font size for navigation to avoid oversized headings when custom fonts load */
  font-size: 1rem;
}

.nav-links a:hover,
.nav-links a:focus {
  color: var(--color-primary);
}

/* Hero section */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Use our generated abstract swirl as the hero background for a more dynamic feel */
  background-image: url('images/hero-bg.png');
  background-size: cover;
  background-position: center;
  color: var(--color-secondary);
  overflow: hidden;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(120deg, rgba(1, 43, 33, 0.8) 0%, rgba(1, 43, 33, 0.5) 50%, rgba(1, 43, 33, 0.8) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.hero h1 {
  font-family: var(--font-heading);
  /* Responsive heading size: clamps between 2.5rem and 4rem based on viewport width */
  font-size: clamp(2.5rem, 4vw + 1rem, 4rem);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.hero p {
  font-family: var(--font-body);
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: var(--color-light-bg);
}

.cta-btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  background-color: var(--color-primary);
  color: var(--color-light-bg);
  text-decoration: none;
  font-weight: 600;
  border-radius: 4px;
  transition: background-color 0.3s ease-in-out;
}

.cta-btn:hover,
.cta-btn:focus {
  /* Darker shade of the primary colour for hover state */
  background-color: #8f4e1e;
}

/* About section */
.about-section {
  background-color: var(--color-light-bg);
  color: #333;
  padding: 4rem 0;
}

.about-content h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--color-dark);
  font-family: var(--font-heading);
  font-size: 2rem;
}

.about-content p {
  max-width: 900px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
}

/* Services section */
.services-section {
  /* Use the abstract swirl as a subtle backdrop blended with the dark colour. */
  background: var(--color-dark) url('images/abstract-bg.png') no-repeat center/cover;
  background-blend-mode: multiply;
  color: var(--color-secondary);
  padding: 4rem 0;
}

/* Features section */
.features-section {
  background-color: var(--color-dark);
  color: var(--color-secondary);
  padding: 4rem 0;
}

.features-content h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--color-secondary);
}

.features-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  max-width: 900px;
  margin: 0 auto;
}

.feature-card {
  background-color: var(--color-card-bg);
  color: #333;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 6px var(--shadow);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px var(--shadow);
}

.feature-card i {
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.feature-card h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--color-dark);
}

.feature-card p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Stats section */
.stats-section {
  background-color: var(--color-light-bg);
  color: #333;
  padding: 4rem 0;
}

.stats-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.stat-item span {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-primary);
  display: block;
}

.stat-item p {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-dark);
}

/* Process section */
.process-section {
  background-color: var(--color-dark);
  color: var(--color-secondary);
  padding: 4rem 0;
}

.process-content h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--color-secondary);
}

.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-primary);
}

.timeline-item {
  position: relative;
  padding-left: 4rem;
  margin-bottom: 2rem;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.icon-circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.timeline-content h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--color-secondary);
}

.timeline-content p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-secondary);
}

/* Contact form styles */
.contact-form {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

.contact-form form {
  background-color: var(--color-card-bg);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px var(--shadow);
  max-width: 600px;
  width: 100%;
}

.form-group {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 0.3rem;
  font-size: 0.95rem;
  color: var(--color-dark);
}

.form-group input,
.form-group textarea {
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form button {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-light-bg);
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.contact-form button:hover,
.contact-form button:focus {
  background-color: #8f4e1e;
}

/* Equipment section styles */
.equipment-section {
  /* Light background to contrast with dark sections */
  background-color: var(--color-light-bg);
  color: #333;
  padding: 4rem 0;
}

.equipment-content h2 {
  text-align: center;
  margin-bottom: 1rem;
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--color-dark);
}

.equipment-intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2rem auto;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
}

.equipment-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  max-width: 900px;
  margin: 0 auto;
}

.equipment-card {
  background-color: var(--color-card-bg);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 6px var(--shadow);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.equipment-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px var(--shadow);
}

.equipment-card i {
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.equipment-card h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--color-dark);
}

.equipment-card p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* WhatsApp floating button */
.whatsapp-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #25d366; /* WhatsApp brand green */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  z-index: 1000;
  box-shadow: 0 4px 6px var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-btn:hover,
.whatsapp-btn:focus {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px var(--shadow);
}

.services-content h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--color-secondary);
}

.services-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.service-card {
  background-color: var(--color-card-bg);
  color: #333;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 6px var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px var(--shadow);
}

.service-card h3 {
  margin-bottom: 1rem;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-dark);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.service-card p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Contact section */
.contact-section {
  background-color: var(--color-light-bg);
  color: #333;
  padding: 4rem 0;
}

.contact-content h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--color-dark);
  font-family: var(--font-heading);
}

.lead {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 2rem auto;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
}

.contact-details {
  list-style: none;
  max-width: 600px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.contact-details li {
  font-size: 1rem;
}

.contact-details a {
  color: var(--color-primary);
  text-decoration: none;
}

.contact-details a:hover,
.contact-details a:focus {
  text-decoration: underline;
}

/* Footer */
.site-footer {
  background-color: var(--color-dark);
  color: var(--color-secondary);
  text-align: center;
  padding: 1.5rem 0;
  font-size: 0.9rem;
}

/* Responsive typography adjustments */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.25rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .cta-btn {
    padding: 0.6rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .nav-links {
    gap: 1rem;
  }
  .hero h1 {
    font-size: 1.8rem;
  }
  .hero p {
    font-size: 0.9rem;
  }
}

/* Reveal animation for scroll effects */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}