/*
 * Custom styles for Tree Services Huntsville Website
 *
 * This stylesheet defines the colour palette, typography, layout and
 * component styles used across all pages of the site. It uses CSS
 * variables to keep the design consistent and easy to adjust. All
 * elements are designed to be responsive and provide a pleasant
 * browsing experience on desktop, tablet and mobile devices.
 */

/* CSS Variables for easy theming */
:root {
  --primary: #2c6e49;    /* Dark evergreen for headings and accents */
  --secondary: #88b04b;  /* Light green accent for buttons and icons */
  --light-bg: #f7f9f5;   /* Soft off‑white background */
  --text-color: #333333; /* Default text colour */
  --font-main: 'Poppins', sans-serif;
}

/* Global Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}







.benefits {
  display: flex;
  justify-content: center;
  gap: 40px; /* space between each benefit box */
  text-align: center;
}

.benefits .benefit-item {
  flex: 1;
  max-width: 300px;
}

.benefits .benefit-item h4 {
  margin: 0 0 10px 0;
  font-weight: 600;
}











body {
  font-family: var(--font-main);
  color: var(--text-color);
  background: var(--light-bg);
  line-height: 1.6;
  min-height: 100vh;
}

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

a:hover {
  text-decoration: underline;
  color: var(--secondary);
}

img {
  max-width: 100%;
  display: block;
}

/* Top bar with contact info */
.top-bar {
  background: var(--light-bg);
  font-size: 0.875rem;
  padding: 0.5rem 2rem;
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
  color: var(--primary);
}

.top-bar a {
  color: var(--primary);
}

.top-bar a:hover {
  color: var(--secondary);
}

/* Hide the top bar on small screens.  The contact bar with phone and email
   links makes sense on desktop but can occupy valuable screen space on
   mobile devices.  When the viewport is 768px wide or less, we remove
   the top bar entirely. */
@media (max-width: 991px) {
  .top-bar {
    display: none;
  }
}

/* Two‑column layout helper
   In rare cases some browsers may not respect flexbox styles defined on
   `.service-section`. The `.two-col` class forces a flexbox layout on
   the section contents. When combined with `.reverse`, it flips the
   ordering. Elements wrap on smaller screens thanks to the existing
   media queries. */
.two-col {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}
.two-col.reverse {
  flex-direction: row-reverse;
}

/* Service row layout
   Provides a reliable two‑column layout similar to the About page preview.
   Use `.service-row` on a wrapper containing an image and text.  On
   desktop screens, items are displayed side by side with a 40/60 split.
   On mobile screens, items stack vertically.  The `.reverse` modifier
   flips the order so the image appears on the right. */
.service-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: nowrap;
}
.service-row .image {
  flex: 1 1 45%;
}
.service-row .image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  max-height: 350px;
}
.service-row .text {
  flex: 1 1 55%;
}
.service-row.reverse {
  flex-direction: row-reverse;
}
@media (max-width: 991px) {
  .service-row {
    flex-direction: column;
    flex-wrap: wrap;
    text-align: center;
  }
  .service-row.reverse {
    flex-direction: column;
  }
  .service-row .image,
  .service-row .text {
    flex: 1 1 100%;
  }
  .service-row .text {
    margin-top: 1rem;
  }
}

/* Main header and navigation */
.header {
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  flex-wrap: wrap;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

/* When the logo is an image, constrain its height so it fits neatly
   within the header without overflowing.  The width auto scales to
   maintain the aspect ratio of the graphic. */
.logo img {
  height: 40px;
  width: auto;
  display: block;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  align-items: center;
}

nav ul li {
  position: relative;
}

nav ul li a {
  color: var(--text-color);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  display: block;
  font-weight: 500;
}

nav ul li a:hover {
  background: var(--light-bg);
  color: var(--primary);
}

/* Dropdown menu for services */
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 0.5rem 0;
  min-width: 220px;
  z-index: 500;
}

nav ul li:hover > .dropdown {
  display: block;
}

.dropdown a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--text-color);
  white-space: nowrap;
}

.dropdown a:hover {
  background: var(--light-bg);
  color: var(--primary);
}

/* Quote button */
.quote-btn {
  background: var(--secondary);
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 600;
  transition: background 0.3s;
  white-space: nowrap;
}

.quote-btn:hover {
  background: var(--primary);
  color: #ffffff;
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--primary);
}

/* Responsive navigation */
@media (max-width: 991px) {
  nav ul {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0;
    margin-top: 1rem;
  }
  nav.open ul {
    display: flex;
  }
  .menu-toggle {
    display: block;
  }
  /* Hide the quote button on small screens.  On mobile, screen real estate
     is limited and users typically access contact forms via the menu or
     footer, so the primary call‑to‑action button is hidden. */
  .quote-btn {
    display: none;
  }
}

/* Hero section */
.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 4rem 2rem;
  color: #ffffff;
  background: linear-gradient(rgba(44, 110, 73, 0.6), rgba(44, 110, 73, 0.6)), url('../images/hero-bg.png') center/cover no-repeat;
}

.hero .hero-text {
  flex: 1 1 50%;
  padding-right: 2rem;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

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

.hero form {
  flex: 1 1 50%;
  background: rgba(255, 255, 255, 0.95);
  padding: 2rem;
  border-radius: 8px;
  color: var(--text-color);
}

.hero form h3 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: var(--primary);
}

.hero form input,
.hero form select,
.hero form textarea {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font-family: var(--font-main);
}

.hero form button {
  background: var(--secondary);
  color: #ffffff;
  border: none;
  padding: 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s;
  width: 100%;
}

.hero form button:hover {
  background: var(--primary);
}

/* Highlight bar */
.highlight-bar {
  background: var(--primary);
  color: #ffffff;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding: 1.5rem 2rem;
  gap: 1rem;
}

.highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-right: 1rem;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.highlight-item:last-child {
  border-right: none;
}

.highlight-item i {
  font-size: 1.75rem;
  color: var(--secondary);
  margin-top: 0.1rem;
}

.highlight-item h4 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.highlight-item p {
  font-size: 0.875rem;
}

/* Generic section styling */
.section {
  padding: 3rem 2rem;
}

.section-title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2rem;
  color: var(--primary);
}

.section p {
  margin-bottom: 1rem;
  text-align: center;
}

/* About preview layout */
/* About preview two-column layout */
.about-preview {
  display: flex;
  align-items: center;
  gap: 2rem;
  /* Prevent wrapping on larger screens so image and text sit side by side */
  flex-wrap: nowrap;
}

/* Stack the about preview items on small screens */
@media (max-width: 991px) {
  .about-preview {
    flex-direction: column;
    flex-wrap: wrap;
  }
}

.about-preview img {
  flex: 1 1 40%;
  /* Ensure the image scales within its flex width but doesn't force full row width */
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  /* Limit the height so the image doesn't dominate the section */
  max-height: 350px;
}

.about-preview .text {
  flex: 1 1 60%;
}

/* Buttons */
.btn {
  display: inline-block;
  background: var(--secondary);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  transition: background 0.3s;
}

.btn:hover {
  background: var(--primary);
  color: #ffffff;
}

/* Services grid on home and services page */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.service-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  text-align: center;
  transition: transform 0.3s;
}

.service-card:hover {
  transform: translateY(-5px);
}

.service-card i {
  font-size: 2rem;
  color: var(--secondary);
  margin-bottom: 0.75rem;
}

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

.service-card p {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* Process / How it works */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.process-step {
  text-align: center;
}

.process-step i {
  font-size: 2rem;
  color: var(--secondary);
  margin-bottom: 0.75rem;
}

.process-step h4 {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: var(--primary);
}

.process-step p {
  font-size: 0.9rem;
}

/* Gallery slider */
.gallery-slider {
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
  border-radius: 8px;
}

.gallery-wrapper {
  display: flex;
  transition: transform 0.5s ease;
}

.gallery-slide {
  min-width: 100%;
  position: relative;
}

.gallery-slide img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 8px;
}

.gallery-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
  padding: 0 1rem;
}

.gallery-controls button {
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  border: none;
  padding: 0.5rem 0.75rem;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.3s;
}

.gallery-controls button:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* FAQ accordion */
.faq {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid #dddddd;
  padding: 1rem 0;
}

.faq-item h4 {
  cursor: pointer;
  position: relative;
  padding-right: 2rem;
  font-size: 1.1rem;
  color: var(--primary);
}

.faq-item h4::after {
  content: '+';
  position: absolute;
  right: 0;
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.3s;
}

.faq-item.open h4::after {
  transform: rotate(45deg);
}

.faq-item p {
  display: none;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  text-align: left;
}

.faq-item.open p {
  display: block;
}

/* Before you call checklist */
.checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  list-style: none;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.checklist li i {
  color: var(--secondary);
  margin-top: 0.25rem;
}

/* Testimonials slider */
.testimonials {
  position: relative;
  overflow: hidden;
}

.testimonials-wrapper {
  display: flex;
  transition: transform 0.5s ease;
}

.testimonial {
  min-width: 100%;
  padding: 2rem;
  text-align: center;
}

.testimonial p {
  font-style: italic;
  margin-bottom: 1rem;
}

.testimonial h5 {
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--primary);
}

.testimonial span {
  font-size: 0.875rem;
  color: #777777;
}

.testimonial-controls {
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}

.testimonial-controls button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #cccccc;
  cursor: pointer;
}

.testimonial-controls button.active,
.testimonial-controls button:hover {
  background: var(--secondary);
}

/* CTA banner */
.cta-banner {
  background: linear-gradient(rgba(44, 110, 73, 0.8), rgba(44, 110, 73, 0.8)), url('../images/cta-bg.png') center/cover no-repeat;
  color: #ffffff;
  text-align: center;
  padding: 3rem 2rem;
  border-radius: 8px;
  margin: 2rem 0;
}

.cta-banner h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.cta-banner p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

/* Footer styles */
footer {
  background: var(--primary);
  color: #ffffff;
  padding: 3rem 2rem;
}

footer .footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

footer h4 {
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  color: #ffffff;
}

footer ul {
  list-style: none;
}

footer ul li {
  margin-bottom: 0.5rem;
}

footer ul li a {
  color: #ffffff;
  font-size: 0.9rem;
}

footer ul li a:hover {
  text-decoration: underline;
}

footer .socials {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

footer .socials a {
  color: #ffffff;
  font-size: 1.2rem;
  transition: color 0.3s;
}

footer .socials a:hover {
  color: var(--secondary);
}

footer .bottom-bar {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 1rem;
  font-size: 0.8rem;
}

/* Page hero for other pages */
.page-hero {
  background: linear-gradient(rgba(44, 110, 73, 0.6), rgba(44, 110, 73, 0.6)), url('../images/cta-bg.png') center/cover no-repeat;
  color: #ffffff;
  text-align: center;
  padding: 3rem 2rem;
}

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

.page-hero p {
  font-size: 1.1rem;
}

/* Remove background image for About page hero */
/* .page-hero.about-hero {
  background: #f7f9f5;
  color: var(--primary);
} */

/* Service detail page */
.service-detail .intro {
  margin-bottom: 2rem;
}

.service-detail img {
  border-radius: 8px;
  margin-bottom: 1rem;
}

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

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.benefit-item i {
  color: var(--secondary);
  font-size: 1.5rem;
  margin-top: 0.25rem;
}

.related-services {
  margin-top: 2rem;
}

.related-services ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.related-services ul li a {
  background: var(--light-bg);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  color: var(--primary);
  border: 1px solid var(--light-bg);
  transition: background 0.3s;
}

.related-services ul li a:hover {
  background: var(--secondary);
  color: #ffffff;
}

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

.blog-post {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: transform 0.3s;
}

.blog-post:hover {
  transform: translateY(-5px);
}

.blog-post img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.blog-post .content {
  padding: 1rem;
  text-align: center;
}

.blog-post h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.blog-post p {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.blog-post .meta {
  font-size: 0.75rem;
  color: #777777;
  margin-bottom: 0.5rem;
}

/* Blog article */
.article-header img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
}

.article-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 0;
}

.article-content h1 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 2rem;
  color: var(--primary);
}

.article-content h2 {
  font-size: 1.6rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--primary);
}

.article-content h3 {
  font-size: 1.3rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--primary);
}

.article-content p {
  margin-bottom: 1rem;
  font-size: 1rem;
}

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

/* Contact page */
.contact-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.contact-info .info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-form {
  background: #ffffff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.contact-form h3 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: var(--primary);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font-family: var(--font-main);
}

.contact-form button {
  background: var(--secondary);
  color: #ffffff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s;
}

.contact-form button:hover {
  background: var(--primary);
}

.map {
  margin-top: 2rem;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

/* =====================================
   Custom enhancements per client feedback
   ===================================== */

/* Center button in about preview */
.about-preview .about-btn-wrapper {
  text-align: center;
  margin-top: 1.5rem;
}
.about-preview .about-btn-wrapper .btn {
  margin: 0 auto;
}

/* Service cards with images */
.services-grid .service-card img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  margin-bottom: 1rem;
}

/* Process step cards */
.process-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
}
.process-steps .process-step {
  flex: 1 1 220px;
  background: #f7f9f5;
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}
.process-steps .process-step i {
  font-size: 2rem;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}
.process-steps .process-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

/* Areas served grid */
.areas-served .areas-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
  /* Center the grid items horizontally */
  justify-content: center;
}
.areas-served .area-item {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: #f7f9f5;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
  /* Remove extra left padding now that we are using inline icons */
  position: relative;
  padding-left: 1rem;
}

/* Style the inline SVG map icons */
.areas-served .area-item svg {
  width: 1rem;
  height: 1rem;
  fill: var(--secondary);
  flex-shrink: 0;
}
.areas-served .area-item i {
  /* Ensure the Font Awesome icon displays correctly within flex context */
  display: inline-block;
  color: var(--secondary);
  font-size: 1.25rem;
}

/* Hover effect for service area cards */
.areas-served .area-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

/* Center-align the description below Areas We Serve */
.areas-served p {
  text-align: center;
}

/* Icon wrapper and number badges for the How It Works section */
.process-step .icon-wrapper {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5rem;
}

.process-step .icon-wrapper i {
  font-size: 2rem;
  color: var(--secondary);
}

.process-step .number-badge {
  position: absolute;
  /* Position the number badge slightly outside the icon and enlarge it */
  top: -0.6rem;
  right: -0.6rem;
  background: var(--secondary);
  color: #ffffff;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Before you call us (preparation) grid */
.call-prep .prep-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}
.call-prep .prep-item {
  flex: 1 1 220px;
  background: #f7f9f5;
  padding: 1.25rem;
  border-radius: 6px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}
.call-prep .prep-item i {
  font-size: 1.6rem;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}
.call-prep .prep-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

/* Mission & Values icons on About page */
/* Mission & Values section (about page)
   The parent section uses both .section and .mission-values classes which unintentionally picks up
   flex styling from this rule. To ensure the heading and descriptive paragraph are centered,
   override the section-level styling and separate the grid of values into its own container. */
.section.mission-values {
  text-align: center;
  /* Reset any flex display applied unintentionally */
  display: block;
}

/* Container for mission & values cards */
.mission-values {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2rem;
  justify-content: center;
}
.mission-values .value-item {
  flex: 1 1 220px;
  background: #f7f9f5;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}
.mission-values .value-item i {
  font-size: 2rem;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}
.mission-values .value-item strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--primary);
}
.mission-values .value-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

/* Related services cards on single service pages */
.related-services .related-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}
.related-services .related-card {
  flex: 1 1 200px;
  background: #f7f9f5;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: transform 0.3s, box-shadow 0.3s;
}
.related-services .related-card i {
  font-size: 1.5rem;
  color: var(--secondary);
}
.related-services .related-card a {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s;
}
.related-services .related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  background: var(--secondary);
}
.related-services .related-card:hover i,
.related-services .related-card:hover a {
  color: #ffffff;
}

/* About page: Why choose us icons */
.why-choose .choose-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2rem;
}
.why-choose .choose-item {
  flex: 1 1 220px;
  text-align: center;
}
.why-choose .choose-item i {
  font-size: 2rem;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}

/* Related services design on single service pages */
.related-services ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.related-services ul li {
  list-style: none;
}
.related-services ul li a {
  display: block;
  padding: 0.5rem 1rem;
  background: #f7f9f5;
  border-radius: 4px;
  color: var(--primary);
  border: 1px solid #e0e8dc;
  transition: background 0.3s, transform 0.3s;
}
.related-services ul li a:hover {
  background: var(--secondary);
  color: #ffffff;
  transform: translateY(-3px);
}

/*
 * Alternating two‑column sections on service pages
 * Each service page features two primary informational sections after the hero.
 * The `.service-section` class sets up a flexible layout with an image and
 * accompanying text side by side. The `.reverse` modifier flips the order
 * so the image appears on the right and text on the left. On small screens
 * the elements stack vertically for readability.
 */
.service-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.service-section .image {
  flex: 1 1 45%;
}
.service-section .image img {
  /*
   * Keep service images from overtaking the layout. Constrain the height
   * so that images remain proportionate alongside their accompanying text.
   * On wider screens the image flex container is roughly 45% of the width; a
   * max‑height prevents the image from stretching too tall while maintaining
   * its aspect ratio. We still use object‑fit: cover to ensure the image
   * fills its container without distortion.
   */
  width: 100%;
  height: auto;
  max-height: 350px;
  border-radius: 8px;
  object-fit: cover;
}
.service-section .text {
  flex: 1 1 55%;
}
.service-section.reverse {
  flex-direction: row-reverse;
}
@media (max-width: 991px) {
  .service-section {
    flex-direction: column;
    text-align: center;
  }
  .service-section.reverse {
    flex-direction: column;
  }
  .service-section .image,
  .service-section .text {
    flex: 1 1 100%;
  }
  .service-section .text {
    margin-top: 1rem;
  }
}

/* Blog article header with overlay text
   Each blog post features a hero image at the top of the page. To
   integrate the article title and metadata directly within the hero,
   we position a text container over the image.  A semi‑transparent
   overlay ensures the text remains legible. */
.article-header {
  position: relative;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
}
.article-header img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  z-index: 1;
}
.article-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  z-index: 2;
}
.article-header .header-content {
  position: relative;
  z-index: 3;
}
.article-header .header-content .meta {
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
  opacity: 0.9;
  color: #ffffff;
}
.article-header .header-content h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
}
@media (max-width: 991px) {
  .article-header {
    height: 220px;
    padding: 1rem;
  }
  .article-header .header-content h1 {
    font-size: 1.5rem;
  }
  .article-header .header-content .meta {
    font-size: 0.75rem;
  }
}



/* Default desktop view */
.menu-toggle {
  display: none; /* Hide hamburger icon on desktop */
}

/* Mobile view */
@media (max-width: 768px) {
  nav {
    display: none; /* Hide navigation menu by default on mobile */
    position: absolute;
    top: 70px; /* adjust based on header height */
    left: 0;
    width: 100%;
    background: #fff;
    padding: 15px 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }

  nav ul {
    flex-direction: column;
    text-align: center;
  }

  nav ul li {
    margin: 10px 0;
  }

  .menu-toggle {
    display: block; /* Show hamburger icon on mobile */
    font-size: 24px;
    cursor: pointer;
  }

  nav.active {
    display: block; /* Show menu when active */
  }
}