/*
  MLMind Pro Website Stylesheet
  This stylesheet defines the visual style for the advanced MLMind web presence.
  It extends the previous styles with additional components for statistics,
  dark sections, resource cards and case study highlights. The palette
  remains business‑friendly while introducing more contrast and emphasis on key
  information. Feel free to adapt the variables to match your brand.
*/

/* CSS Variables for easy theming */
:root {
  --primary: #094476;
  --secondary: #00a37a;
  --background: #f5f8fc;
  --text: #333333;
  --light-text: #555555;
  --dark-bg: #03244c;
  --accent-bg: #f0f5fb;
  --link-hover: #0066b2;
}

/* Global reset and typography */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background-color: var(--background);
  color: var(--text);
  line-height: 1.6;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--link-hover);
}

/* Header and navigation */
header {
  background-color: var(--dark-bg);
  color: #ffffff;
  padding: 0 10%;
  position: sticky;
  top: 0;
  z-index: 1000;
  /* subtle shadow to separate the menu bar from the content */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  flex-wrap: wrap; /* allow wrapping on larger screens */
}

.logo {
  font-size: 1.6rem;
  font-weight: 700;
}

/* Ensure logo image fits within the navigation bar */
.logo img {
  height: 40px;
  display: block;
}

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

.nav-links li a {
  color: #ffffff;
  font-weight: 500;
  /* increase horizontal padding for better click area */
  padding: 0.5rem 0.25rem;
  display: block;
  position: relative;
  font-size: 1rem;
}

.nav-links li a:hover {
  opacity: 0.8;
  text-decoration: none;
}

/* Active nav link */
.nav-links li a.active {
  /* thicker bottom border for active link */
  border-bottom: 3px solid var(--secondary);
  opacity: 1;
}

/* Dropdown menu styling */
.nav-links li.dropdown {
  position: relative;
}

/* Add a small triangle indicator to dropdown links */
.nav-links li.dropdown > a::after {
  content: "";
  border: 4px solid transparent;
  border-top-color: #ffffff;
  margin-left: 4px;
  display: inline-block;
}

.nav-links li.dropdown .dropdown-content {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: var(--dark-bg);
  padding: 1rem;
  min-width: 180px;
  border-radius: 4px;
  list-style: none;
  z-index: 999;
}

.nav-links li.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content li {
  margin-bottom: 0.5rem;
}

.dropdown-content li:last-child {
  margin-bottom: 0;
}

.dropdown-content li a {
  color: #ffffff;
  font-weight: 400;
  white-space: nowrap;
  display: block;
  padding: 0.25rem 0;
}

.dropdown-content li a:hover {
  opacity: 0.8;
}

/* Hero section */
.hero {
  height: 80vh;
  background: linear-gradient(rgba(3, 36, 76, 0.65), rgba(3, 36, 76, 0.65)),
    url("assets/de882191-6f17-4695-8e22-1ad9321accfb.png") center/cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  text-align: center;
  padding: 0 10%;
}

.hero h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.3rem;
  max-width: 800px;
  margin: 0 auto 2rem auto;
}

.cta-button {
  background-color: var(--secondary);
  color: #ffffff;
  padding: 0.8rem 2rem;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.3s ease;
  display: inline-block;
}

.cta-button:hover {
  background-color: #008f64;
}

/* Generic section styling */
section {
  padding: 60px 10%;
}

.section-heading {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: var(--dark-bg);
}

/* Statistics grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.stat-card {
  background-color: var(--primary);
  color: #ffffff;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  transition: transform 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
}

.stat-card h3 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.stat-card p {
  font-size: 1rem;
  color: #e6ecf5;
}

/* Dark section for problem explanations */
.dark-section {
  background-color: var(--dark-bg);
  color: #ffffff;
  padding: 60px 10%;
}

.dark-section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}

.dark-section .problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.problem-card {
  background-color: #043d78;
  padding: 1.5rem;
  border-radius: 8px;
  text-align: left;
}

.problem-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  color: #00c49a;
}

.problem-card p {
  color: #dbe8f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Solution cards */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.solution-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  text-align: left;
  transition: transform 0.2s ease;
}

.solution-card:hover {
  transform: translateY(-4px);
}

.solution-card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.solution-card p {
  color: var(--light-text);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Pricing table */
.pricing-plans {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}

.plan {
  background-color: #ffffff;
  border: 1px solid #e1e5ee;
  border-radius: 8px;
  flex: 1 1 280px;
  max-width: 320px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow 0.2s ease;
}

.plan:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.plan h3 {
  font-size: 1.6rem;
  margin-bottom: 0.3rem;
  color: var(--primary);
}

.plan .price {
  font-size: 2rem;
  margin: 0.8rem 0;
  color: var(--secondary);
}

.plan ul {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  text-align: left;
  flex: 1;
}

.plan ul li {
  margin-bottom: 0.5rem;
}

.plan-cta {
  margin-top: 1.5rem;
  background-color: var(--primary);
  color: #ffffff;
  padding: 0.6rem 1.4rem;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.2s ease;
}

.plan-cta:hover {
  background-color: var(--link-hover);
}

/* Resource card grid */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.resource-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.resource-card:hover {
  transform: translateY(-3px);
}

.resource-card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.resource-card p {
  font-size: 0.9rem;
  color: var(--light-text);
  line-height: 1.5;
}

.resource-card a {
  margin-top: 0.8rem;
  display: inline-block;
  color: var(--secondary);
  font-weight: 600;
  transition: color 0.2s ease;
}

.resource-card a:hover {
  color: #008f64;
}

/* Case studies */
.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.case-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.case-card:hover {
  transform: translateY(-4px);
}

.case-card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.case-card p {
  color: var(--light-text);
  font-size: 0.95rem;
  line-height: 1.5;
}

.case-card .result {
  margin-top: 1rem;
  font-weight: 700;
  color: var(--secondary);
}

/* Charts */
.chart-img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin: 1rem 0;
}

/* Calculator form styles */
.calculator-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 0;
}

.calculator-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.calculator-form label {
  font-weight: 600;
  color: var(--primary);
}

.calculator-form input,
.calculator-form select {
  padding: 0.6rem;
  border: 1px solid #ccd5e0;
  border-radius: 4px;
  font-size: 1rem;
}

.btn-calc {
  padding: 0.7rem 1.5rem;
  background-color: var(--secondary);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  max-width: 200px;
  transition: background-color 0.2s ease;
}

.btn-calc:hover {
  background-color: #008f64;
}

.calculator-results {
  background-color: var(--accent-bg);
  padding: 1.5rem;
  border-radius: 8px;
}

.calculator-results h3 {
  color: var(--primary);
  margin-bottom: 1rem;
}

.calculator-results p {
  margin-bottom: 0.5rem;
}

/* Steps grid for how‑it‑works */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.step-card {
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  text-align: left;
  transition: transform 0.2s ease;
}

.step-card:hover {
  transform: translateY(-4px);
}

.step-number {
  background-color: var(--secondary);
  color: #ffffff;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 50%;
  text-align: center;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* FAQ styles */
.faq-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 0;
}

.faq-item {
  margin-bottom: 1.5rem;
}

.faq-item h3 {
  color: var(--primary);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.faq-item p {
  color: var(--light-text);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Footer */
footer {
  background-color: var(--dark-bg);
  color: #ffffff;
  text-align: center;
  padding: 2rem 10%;
}

footer p {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

footer .footer-links {
  margin-left: 0.5rem;
  font-weight: 500;
}

footer .footer-links a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 1px;
}

footer .footer-links a:hover {
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

footer ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
}

footer ul li a {
  color: #ffffff;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

footer ul li a:hover {
  opacity: 0.8;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  nav {
    flex-direction: column;
    height: auto;
    padding: 1rem 0;
  }
  .nav-links {
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.5rem;
  }
  .pricing-plans {
    flex-direction: column;
  }
  .stat-card h3 {
    font-size: 1.6rem;
  }
}

/* Blog listing */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.blog-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  transition: transform 0.2s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
}

.blog-card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.3rem;
  color: var(--primary);
}

.blog-card .date {
  font-size: 0.8rem;
  color: var(--light-text);
  margin-bottom: 0.5rem;
}

.blog-card p {
  color: var(--light-text);
  font-size: 0.9rem;
  line-height: 1.5;
}

.blog-card a {
  display: inline-block;
  margin-top: 0.8rem;
  color: var(--secondary);
  font-weight: 600;
  transition: color 0.2s ease;
}

.blog-card a:hover {
  color: #008f64;
}

/* Blog post styling */
.post-hero {
  background-color: var(--primary);
  color: #ffffff;
  padding: 100px 10%;
  text-align: center;
}

.post-hero h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.post-hero p {
  font-size: 1rem;
  max-width: 800px;
  margin: 0 auto;
  opacity: 0.9;
}

.post-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 0;
  line-height: 1.7;
  font-size: 1rem;
  color: var(--text);
}

.post-content h2 {
  font-size: 1.6rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.post-content p {
  margin-bottom: 1rem;
}

.post-content ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.post-content li {
  margin-bottom: 0.5rem;
}

.post-content img.chart-img {
  display: block;
  margin: 1rem auto;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* New styles for Live Savings counter and Before/After simulator */
.savings-counter {
  padding: 60px 10%;
  text-align: center;
  background-color: var(--accent-bg);
}

.savings-counter .counter {
  font-size: 3rem;
  font-weight: 700;
  margin: 1rem 0;
  color: var(--secondary);
}

.bar-sim {
  padding: 60px 10%;
  text-align: center;
}

.bar-sim .comparison {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 600px;
  margin: 0 auto;
}

.bar-container label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
  color: var(--primary);
}

.bar-container .bar {
  display: flex;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
  background-color: #e0e0e0;
}

.bar-waste {
  background-color: #ff6b6b;
}

.bar-value {
  background-color: #00b894;
}

.bar-container .bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* New styles for role-based CTA grid */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.role-card {
  background-color: var(--dark-bg);
  color: #ffffff;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.role-card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.role-card p {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #e6ecf5;
}

.role-card .cta-button {
  align-self: center;
}

/* Google Form embed (free lead capture) */
.google-form-wrap {
  max-width: 980px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.google-form-wrap iframe {
  width: 100%;
  border: 0;
  display: block;
}

.form-note {
  max-width: 820px;
  margin: 0 auto 1.5rem auto;
  text-align: center;
  color: #2b3443;
}