/* Import organic fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Varela+Round&display=swap');

/* Color Variables - all colors defined in one place */
:root {
                                                                                                                                      /* Primary colors */
                                                                                                                                      --color-primary: #6A9429;        /* Main green color */
                                                                                                                                      --color-primary-light: #a1e07a;  /* Lighter green for hovers */
                                                                                                                                      --color-primary-lighter: #8BC34A; /* For visited links */
  
                                                                                                                                      /* Secondary colors */
                                                                                                                                      --color-secondary: #d4b726;      /* Gold/yellow accent */
  
                                                                                                                                      /* Background colors */
                                                                                                                                      --color-bg-dark: #2a2a2a;        /* Main background (graphite) */
                                                                                                                                      --color-bg-light: #333333;       /* Lighter background elements */
                                                                                                                                      --color-bg-lighter: #3a3a3a;     /* Even lighter background */
                                                                                                                                      --color-bg-lightest: #444444;    /* Lightest background/borders */
  
                                                                                                                                      /* Text & misc colors */
                                                                                                                                      --color-text-light: #aaaaaa;     /* Light gray text */
                                                                                                                                      --color-shadow: rgba(0,0,0,0.3); /* Shadow color */
                                                                                                                                      --color-overlay: rgba(106, 148, 41, 0.2); /* Semi-transparent overlay */
                                                                                                                                      --color-overlay-light: rgba(106, 148, 41, 0.1); /* Lighter overlay */
}

/* Responsive Typography */
html {
                                                                                                                                      /* Base font size - adjust for readability */
                                                                                                                                      font-size: 16px;
}

/* Update body padding to prevent content from being hidden behind fixed nav */
body {
                                                                                                                                  padding-top: 80px; /* Increase padding to ensure content is below the nav bar */
                                                                                                                                  background-color: #2a2a2a; /* Graphite color */
                                                                                                                                  color: #6FCF3F; /* Green color */
                                                                                                                                  font-family: 'Varela Round', sans-serif;
                                                                                                                                  line-height: 1.6;
                                                                                                                                  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
                                                                                                                                    font-family: 'Kalam', cursive;
                                                                                                                                    color: #d4b726; /* Toned down yellow toward brown */
                                                                                                                                    font-weight: 700;
}

/* Increase text size on mobile for better readability */
@media (max-width: 768px) {
                                                                                                                                      html {
                                                                                                                                        font-size: 18px; /* Slightly larger base font size on mobile */
                                                                                                                                      }
  
                                                                                                                                      h1 {
                                                                                                                                        font-size: 1.8rem; /* Slightly smaller heading but still readable */
                                                                                                                                      }
  
                                                                                                                                      h2 {
                                                                                                                                        font-size: 1.5rem;
                                                                                                                                      }
  
                                                                                                                                      h3 {
                                                                                                                                        font-size: 1.3rem;
                                                                                                                                      }
  
                                                                                                                                      p {
                                                                                                                                        font-size: 1rem;
                                                                                                                                        line-height: 1.7; /* Increased line height for readability */
                                                                                                                                      }
}

/* For very small screens */
@media (max-width: 375px) {
                                                                                                                                      html {
                                                                                                                                        font-size: 17px; /* Slightly adjust down for very small screens */
                                                                                                                                      }
}

/* Responsive Images */
img {
                                                                                                                                      max-width: 100%;
                                                                                                                                      height: auto;
}

/* Service images */
.service-image img {
                                                                                                                                      width: 100%;
                                                                                                                                      height: auto;
                                                                                                                                      max-height: 300px; /* Limit height on desktop */
                                                                                                                                      object-fit: contain; /* Maintain aspect ratio */
}

@media (max-width: 768px) {
                                                                                                                                      .service-image {
                                                                                                                                        max-width: 100%;
                                                                                                                                        margin-bottom: 1rem;
                                                                                                                                      }
  
                                                                                                                                      .service-image img {
                                                                                                                                        max-height: 200px; /* Smaller max height on mobile */
                                                                                                                                      }
  
                                                                                                                                      #greenImage {
                                                                                                                                        max-width: 90%; /* Slightly smaller than container */
                                                                                                                                        margin: 0 auto; /* Center the image */
                                                                                                                                      }
}

/* LinkedIn post images */
@media (max-width: 768px) {
                                                                                                                                      .post-image {
                                                                                                                                        height: 150px; /* Smaller height on mobile */
                                                                                                                                      }
}

/* Keep all your existing styles below this point */
#combinedContainer {
                                                                                                                                        display: flex;
                                                                                                                                        justify-content: space-between;
                                                                                                                                        flex-wrap: nowrap; 
                                                                                                                                        width: 100%;
}

#main-content {
                                                                                                                                        flex: 1;
                                                                                                                                        max-width: 50%;
                                                                                                                                        margin: 0 auto;
                                                                                                                                        display: flex;
                                                                                                                                        align-items: center;
                                                                                                                                        flex-direction: column;
                                                                                                                                        justify-content: center;
}

#wcb_p {
                                                                                                                                        display: flex;
                                                                                                                                        width: 100%;
                                                                                                                                        justify-content: space-between;
                                                                                                                                        margin: auto;
}
 
#wcb_g, #wcb_a {
                                                                                                                                        flex: 1;
                                                                                                                                        white-space: nowrap;
}

#imageContainer {
                                                                                                                                        max-width: 50%;
                                                                                                                                        margin: 0 auto;
}

#greenImage {
                                                                                                                                        display: block;
                                                                                                                                        max-width: 100%;
                                                                                                                                        margin-left: auto;
                                                                                                                                        margin-right: 3%;
}

@media (max-width: 600px) {
                                                                                                                                        #combinedContainer {
                                                                                                                                            flex-direction: column;
                                                                                                                                            max-width: 100%;
                                                                                                                                            justify-content: center;
                                                                                                                                            padding: 0 15px;
                                                                                                                                            box-sizing: border-box;
                                                                                                                                            width: 100%;
                                                                                                                                        }
                                                                                                                                        #imageContainer {
                                                                                                                                            max-width: 100%;
                                                                                                                                            padding: 0 15px;
                                                                                                                                            box-sizing: border-box;
                                                                                                                                            width: 100%;
                                                                                                                                        }
                                                                                                                                        #main-content {
                                                                                                                                            max-width: 100%;
                                                                                                                                            padding: 0 15px;
                                                                                                                                            box-sizing: border-box;
                                                                                                                                            width: 100%;
                                                                                                                                        }
                                                                                                                                        #wcb_g, #wcb_a {
                                                                                                                                            padding: .3em .2em; /* Reduce padding */
                                                                                                                                            width: auto; /* Allow elements to scale */
                                                                                                                                            min-width: auto; /* Allow elements to scale */
                                                                                                                                        }
}

/* Better container spacing for mobile */
@media (max-width: 768px) {
                                                                                                                                      #combinedContainer {
                                                                                                                                        padding: 0 15px; /* Add some padding on the sides */
                                                                                                                                      }
  
                                                                                                                                      #main-content {
                                                                                                                                        padding: 0;
                                                                                                                                        max-width: 100%;
                                                                                                                                      }
  
                                                                                                                                      .service-section {
                                                                                                                                        margin-bottom: 2em; /* Reduce vertical spacing between sections */
                                                                                                                                      }
  
                                                                                                                                      .service-container {
                                                                                                                                        gap: 1em; /* Reduce gap between image and content */
                                                                                                                                      }
}

/* Navigation styles with language switcher */
.site-nav {
                                                                                                                                  display: flex;
                                                                                                                                  justify-content: space-between; /* Space between nav links and language switcher */
                                                                                                                                  align-items: center;
                                                                                                                                  padding: 15px 10px; /* Reduce horizontal padding */
                                                                                                                                  margin-bottom: 20px;
                                                                                                                                  border-bottom: 1px solid #333;
                                                                                                                                  width: 100%;
                                                                                                                                  box-sizing: border-box; /* Ensure padding is included in width calculation */
                                                                                                                                  text-align: center;
                                                                                                                                  font-family: 'Kalam', cursive;
                                                                                                                                  font-weight: 400;
                                                                                                                                  position: fixed;
                                                                                                                                  top: 0;
                                                                                                                                  left: 0;
                                                                                                                                  z-index: 1000;
                                                                                                                                  background-color: #2a2a2a;
                                                                                                                                  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.nav-links {
                                                                                                                                  display: flex;
                                                                                                                                  align-items: center;
                                                                                                                                  flex: 1; /* Take up available space */
                                                                                                                                  justify-content: center; /* Center the navigation links */
}

.site-nav a {
                                                                                                                                        color: var(--color-primary);
                                                                                                                                        text-decoration: none;
                                                                                                                                        margin: 0 15px;
                                                                                                                                        padding: 5px 10px;
                                                                                                                                        border-radius: 4px;
                                                                                                                                        transition: all 0.3s ease;
                                                                                                                                        font-weight: bold;
}

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

.site-nav a.active {
                                                                                                                                        color: var(--color-primary-light);
                                                                                                                                        border-bottom: 2px solid var(--color-primary-light);
}

/* Language Switcher Styles */
.language-switcher {
                                                                                                                                  display: flex;
                                                                                                                                  gap: 5px;
                                                                                                                                  margin-left: 10px; /* Add some space between nav links and language switcher */
                                                                                                                                  min-width: 90px; /* Ensure minimum width for the language switcher */
}

.lang-btn {
                                                                                                                                  background: none;
                                                                                                                                  border: 1px solid #6FCF3F;
                                                                                                                                  color: #6FCF3F;
                                                                                                                                  font-family: inherit;
                                                                                                                                  padding: 5px 8px; /* Slightly reduce padding */
                                                                                                                                  cursor: pointer;
                                                                                                                                  border-radius: 4px;
                                                                                                                                  font-weight: bold;
                                                                                                                                  transition: all 0.3s ease;
                                                                                                                                  min-width: 40px; /* Ensure minimum width for buttons */
}

.lang-btn:hover {
                                                                                                                                  background-color: rgba(111, 207, 63, 0.2);
}

.lang-btn.active {
                                                                                                                                  background-color: #6FCF3F;
                                                                                                                                  color: #2a2a2a;
}

/* Mobile adjustments for language switcher */
@media (max-width: 768px) {
                                                                                                                                  .site-nav {
                                                                                                                                      flex-wrap: wrap;
                                                                                                                                      padding: 10px 5px; /* Further reduce padding on mobile */
                                                                                                                                  }
    
                                                                                                                                  .nav-links {
                                                                                                                                      order: 2;
                                                                                                                                      width: 100%;
                                                                                                                                      justify-content: center;
                                                                                                                                      margin-top: 10px;
                                                                                                                                  }
    
                                                                                                                                  .language-switcher {
                                                                                                                                      order: 1;
                                                                                                                                      margin-left: auto;
                                                                                                                                      margin-right: 5px; /* Add right margin on mobile */
                                                                                                                                  }
    
                                                                                                                                  .lang-btn {
                                                                                                                                      padding: 4px 6px; /* Smaller padding on mobile */
                                                                                                                                      font-size: 0.9em; /* Slightly smaller font on mobile */
                                                                                                                                  }
}

/* Navigation dropdown styling */
.nav-dropdown {
                                                                                                                                  position: relative;
                                                                                                                                  display: inline-block;
}

.nav-dropdown-content {
                                                                                                                                  display: none;
                                                                                                                                  position: absolute;
                                                                                                                                  top: 100%;
                                                                                                                                  left: 0;
                                                                                                                                  background-color: #333;
                                                                                                                                  min-width: 220px;
                                                                                                                                  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
                                                                                                                                  z-index: 1001;
                                                                                                                                  border-radius: 4px;
                                                                                                                                  margin-top: 5px;
}

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

.nav-dropdown-content a {
                                                                                                                                  color: #6FCF3F;
                                                                                                                                  padding: 12px 16px;
                                                                                                                                  text-decoration: none;
                                                                                                                                  display: block;
                                                                                                                                  border-bottom: 1px solid #444;
                                                                                                                                  white-space: nowrap;
}

.nav-dropdown-content a:last-child {
                                                                                                                                  border-bottom: none;
}

.nav-dropdown-content a:hover {
                                                                                                                                  background-color: #444;
                                                                                                                                  color: #a1e07a;
}

/* Add a small indicator for the dropdown */
.nav-dropdown > a::after {
                                                                                                                                  content: ' ▼';
                                                                                                                                  font-size: 0.7em;
                                                                                                                                  vertical-align: middle;
}

/* Mobile navigation adjustments */
@media (max-width: 768px) {
                                                                                                                                  .site-nav {
                                                                                                                                      flex-wrap: wrap;
                                                                                                                                  }
    
                                                                                                                                  .nav-dropdown {
                                                                                                                                      position: static;
                                                                                                                                      display: block;
                                                                                                                                      width: 100%;
                                                                                                                                      text-align: center;
                                                                                                                                  }
    
                                                                                                                                  .nav-dropdown-content {
                                                                                                                                      position: static;
                                                                                                                                      width: 100%;
                                                                                                                                      margin-top: 0;
                                                                                                                                      box-shadow: none;
                                                                                                                                      border-top: 1px solid #444;
                                                                                                                                      border-bottom: 1px solid #444;
                                                                                                                                  }
    
                                                                                                                                  .nav-dropdown:hover .nav-dropdown-content {
                                                                                                                                      display: none; /* Don't show on hover for mobile */
                                                                                                                                  }
    
                                                                                                                                  /* Add a click handler in JavaScript instead */
                                                                                                                                  .nav-dropdown.active .nav-dropdown-content {
                                                                                                                                      display: block;
                                                                                                                                  }
}

/* Link styling for better visibility on dark background */
a {
                                                                                                                                        color: var(--color-primary); /* Updated green for unvisited links */
                                                                                                                                        text-decoration: underline;
                                                                                                                                        transition: color 0.3s ease;
}

a:visited {
                                                                                                                                        color: var(--color-primary-lighter); /* Lighter green for visited links */
}

a:hover, a:focus {
                                                                                                                                        color: var(--color-primary-light); /* Very bright green when hovering/focusing */
                                                                                                                                        text-decoration: underline;
}

a:active {
                                                                                                                                        color: var(--color-secondary); /* Toned down yellow when clicking */
}

/* Keep navigation links as previously defined */
.site-nav a {
                                                                                                                                        text-decoration: none; /* Override the underline for nav links */
}

/* Make sure LinkedIn badge links follow LinkedIn's styling */
.badge-base__link {
                                                                                                                                        color: inherit !important; /* Use LinkedIn's colors for their badge */
}

/* Carbon badges styling */
.carbon-badges {
                                                                                                                                        display: flex;
                                                                                                                                        flex-direction: row;
                                                                                                                                        align-items: center;
                                                                                                                                        justify-content: center;
                                                                                                                                        gap: 32px; /* space between badges */
                                                                                                                                        margin: 20px 0;
}

.carbonbadge, .green-web-badge {
                                                                                                                                        margin: 0;
                                                                                                                                        /* Optionally set a max-width for each badge to keep them tidy */
                                                                                                                                        max-width: 320px;
                                                                                                                                        flex: 1 1 0;
                                                                                                                                        display: flex;
                                                                                                                                        justify-content: center;
                                                                                                                                        align-items: center;
}

/* Make sure the green web badge image is centered */
.green-web-badge img {
                                                                                                                                        display: block;
                                                                                                                                        max-width: 100%;
                                                                                                                                        height: auto;
}

/* Stack vertically on mobile */
@media (max-width: 700px) {
    .carbon-badges {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    .carbonbadge, .green-web-badge {
        max-width: 100%;
    }
}

/* LinkedIn Company Badge Styling */
.linkedin-company {
                                                                                                                                        background-color: var(--color-bg-light); /* Darker background */
                                                                                                                                        border-radius: 8px;
                                                                                                                                        padding: 20px;
                                                                                                                                        margin: 25px 0;
                                                                                                                                        border: 1px solid var(--color-bg-lightest); /* Lighter border */
                                                                                                                                        text-align: center;
}

.linkedin-company h3 {
                                                                                                                                        color: var(--color-secondary); /* Toned down yellow */
                                                                                                                                        margin-top: 0;
                                                                                                                                        margin-bottom: 15px;
}

.linkedin-badge-container {
                                                                                                                                        display: flex;
                                                                                                                                        justify-content: center;
                                                                                                                                        margin: 15px 0;
}

/* LinkedIn Posts Styling - Side by Side Layout */
.linkedin-posts {
                                                                                                                                        margin: 30px 0;
}

.linkedin-posts h3 {
                                                                                                                                        color: var(--color-secondary); /* Toned down yellow */
                                                                                                                                        text-align: center;
                                                                                                                                        margin-bottom: 20px;
                                                                                                                                        padding-bottom: 10px;
                                                                                                                                        border-bottom: 1px solid var(--color-bg-lightest); /* Lighter border */
}

.linkedin-posts-scroll-wrapper {
                                                                                                                  display: flex;
                                                                                                                  align-items: center;
                                                                                                                  position: relative;
                                                                                                                  width: 100%;
                                                                                                                  max-width: 100vw;
}

.linkedin-arrow {
                                                                                                                  background: rgba(30,30,30,0.8);
                                                                                                                  color: #fff;
                                                                                                                  border: none;
                                                                                                                  font-size: 3rem;
                                                                                                                  width: 60px;
                                                                                                                  height: 60px;
                                                                                                                  border-radius: 50%;
                                                                                                                  cursor: pointer;
                                                                                                                  z-index: 2;
                                                                                                                  display: flex;
                                                                                                                  align-items: center;
                                                                                                                  justify-content: center;
                                                                                                                  margin: 0 8px;
                                                                                                                  transition: background 0.2s;
                                                                                                                  user-select: none;
}

.linkedin-arrow:active,
.linkedin-arrow:focus {
                                                                                                                  background: #222;
                                                                                                                  outline: none;
}

.linkedin-posts-container {
                                                                                                                  display: flex;
                                                                                                                  flex-direction: row;
                                                                                                                  flex-wrap: nowrap;        /* Prevent stacking vertically */
                                                                                                                  gap: 1.5rem;
                                                                                                                  overflow-x: hidden;
                                                                                                                  scroll-snap-type: x mandatory;
                                                                                                                  padding-bottom: 1rem;
                                                                                                                  -webkit-overflow-scrolling: touch;
                                                                                                                  scroll-behavior: smooth;
}

.linkedin-post {
                                                                                                                  flex: 0 0 48%;
                                                                                                                  max-width: 48%;
                                                                                                                  min-width: 320px;
                                                                                                                  scroll-snap-align: start;
                                                                                                                  margin: 0;
                                                                                                                  display: flex;
                                                                                                                  flex-direction: column;
}

@media (max-width: 900px) {
                                                                                                                  .linkedin-arrow {
                                                                                                                      display: none;
                                                                                                                  }
                                                                                                                  .linkedin-posts-container {
                                                                                                                      gap: 1rem;
                                                                                                                      overflow-x: auto;
                                                                                                                      /* Keep flex-direction: row and flex-wrap: nowrap */
                                                                                                                  }
                                                                                                                  .linkedin-post {
                                                                                                                      flex: 0 0 100%;
                                                                                                                      max-width: 100%;
                                                                                                                      min-width: 90vw;
                                                                                                                  }
}

/* Post image styling - same for both posts */
.post-image {
                                                                                                                                        height: 200px; /* Consistent height for all images */
                                                                                                                                        background-color: var(--color-bg-dark); /* Lighter background for image area */
                                                                                                                                        padding: 5px 0; /* Reduced padding top and bottom */
}

.post-image img {
                                                                                                                                        width: 100%;
                                                                                                                                        height: 100%;
                                                                                                                                        object-fit: contain; /* Preserve aspect ratio */
                                                                                                                                        display: block;
}

.post-content {
                                                                                                                                        padding: 15px;
                                                                                                                                        flex-grow: 1; /* Allow content to fill available space */
                                                                                                                                        display: flex;
                                                                                                                                        flex-direction: column;
}

.post-content h4 {
                                                                                                                                        color: var(--color-primary); /* Updated green color */
                                                                                                                                        margin-top: 0;
                                                                                                                                        margin-bottom: 5px;
}

.post-date {
                                                                                                                                        color: var(--color-text-light); /* Lighter gray for dates */
                                                                                                                                        font-size: 0.85em;
                                                                                                                                        margin-bottom: 10px;
                                                                                                                                        font-style: italic;
}

.post-excerpt {
                                                                                                                                        margin-bottom: 15px;
                                                                                                                                        flex-grow: 1; /* Push the read more link to the bottom */
}

.read-more {
                                                                                                                                        display: inline-block;
                                                                                                                                        color: var(--color-primary); /* Updated green color */
                                                                                                                                        font-weight: bold;
                                                                                                                                        margin-top: auto; /* Push to bottom of container */
                                                                                                                                        font-family: 'Kalam', cursive;
}

/* LinkedIn Snippet Styles - Updated to match site theme */
.linkedin-snippet {
                                                                                                                                      background-color: var(--color-bg-light); /* Darker background */
                                                                                                                                      border-radius: 8px;
                                                                                                                                      padding: 15px;
                                                                                                                                      margin: 20px 0;
                                                                                                                                      border: 1px solid var(--color-bg-lightest); /* Lighter border */
                                                                                                                                      color: var(--color-primary); /* Updated green color */
}

.linkedin-snippet h3 {
                                                                                                                                      color: var(--color-secondary); /* Toned down yellow */
                                                                                                                                      margin-top: 0;
                                                                                                                                      border-bottom: 1px solid var(--color-bg-lightest); /* Lighter border */
                                                                                                                                      padding-bottom: 10px;
                                                                                                                                      text-align: center;
}

.linkedin-content {
                                                                                                                                      display: flex;
                                                                                                                                      align-items: flex-start;
                                                                                                                                      flex-wrap: wrap; /* Allow wrapping on smaller screens */
                                                                                                                                      justify-content: center;
}

.profile-photo-container {
                                                                                                                                      margin-right: 20px;
                                                                                                                                      margin-bottom: 15px;
                                                                                                                                      /* The LinkedIn badge will handle its own styling */
}

.linkedin-text {
                                                                                                                                      flex: 1;
                                                                                                                                      min-width: 250px;
}

.linkedin-text p {
                                                                                                                                      margin: 8px 0;
                                                                                                                                      font-size: 0.95em;
                                                                                                                                      line-height: 1.4;
}

.linkedin-text p:first-child {
                                                                                                                                      margin-top: 0;
}

.linkedin-text strong {
                                                                                                                                      color: var(--color-secondary); /* Toned down yellow */
}

.linkedin-link {
                                                                                                                                      color: var(--color-primary); /* Updated green color */
                                                                                                                                      text-decoration: none;
                                                                                                                                      transition: color 0.3s ease;
                                                                                                                                      font-family: 'Kalam', cursive;
}

.linkedin-link:hover {
                                                                                                                                      color: var(--color-primary-light); /* Lighter green */
                                                                                                                                      text-decoration: underline;
}

/* Override LinkedIn badge styles to better match our theme */
.LI-profile-badge.LI-badge-container {
                                                                                                                                      background-color: var(--color-bg-light) !important; /* Darker background */
                                                                                                                                      border: 1px solid var(--color-bg-lightest) !important; /* Lighter border */
}

/* Responsive adjustments for LinkedIn posts */
@media (max-width: 768px) {
                                                                                                                                        .linkedin-posts-container {
                                                                                                                                            flex-direction: column; /* Stack vertically on mobile */
                                                                                                                                        }
    
                                                                                                                                        .linkedin-post {
                                                                                                                                            width: 100%;
                                                                                                                                        }
    
                                                                                                                                        .linkedin-content {
                                                                                                                                            flex-direction: column;
                                                                                                                                            align-items: center;
                                                                                                                                        }
    
                                                                                                                                        .profile-photo-container {
                                                                                                                                            margin-right: 0;
                                                                                                                                            margin-bottom: 20px;
                                                                                                                                        }
    
                                                                                                                                        .linkedin-text {
                                                                                                                                            text-align: center;
                                                                                                                                        }
}

/* Service Section Styling with centered headers and precise alignment */
.service-section {
                                                                                                                            margin-bottom: 4em;
                                                                                                                            position: relative;
                                                                                                                            scroll-margin-top: 90px; /* Adjust this value to your navbar height + some margin */
}

/* Centered service header */
.service-header {
                                                                                                                            text-align: center;
                                                                                                                            margin-bottom: 1.5em;
                                                                                                                            color: var(--color-secondary);
                                                                                                                            border-bottom: 1px dotted var(--color-bg-lightest);
                                                                                                                            padding-bottom: 10px;
                                                                                                                            width: 100%;
}

.service-container {
                                                                                                                            display: flex;
                                                                                                                            gap: 30px;
                                                                                                                            align-items: flex-start; /* Critical: Align items from the top */
}

/* Explicit image positioning classes */
.left-image {
                                                                                                                            flex-direction: row;
}

.right-image {
                                                                                                                            flex-direction: row-reverse;
}

.service-image {
                                                                                                                            flex: 0 0 40%;
                                                                                                                            max-width: 40%;
                                                                                                                            /* No margin-top needed when align-items is flex-start */
}

.service-image img {
                                                                                                                            width: 100%;
                                                                                                                            height: auto;
                                                                                                                            border-radius: 8px;
                                                                                                                            border: 1px solid var(--color-bg-lightest);
                                                                                                                            transition: transform 0.3s ease;
                                                                                                                            display: block; /* Prevent any unexpected spacing */
}

.service-image img:hover {
                                                                                                                            transform: scale(1.02);
}

.service-content {
                                                                                                                            flex: 0 0 55%;
                                                                                                                            max-width: 55%;
                                                                                                                            display: flex;
                                                                                                                            flex-direction: column;
}

/* First paragraph styling */
.service-content p:first-child {
                                                                                                                            margin-top: 0; /* Ensure first paragraph has no top margin */
}

/* Responsive adjustments */
@media (max-width: 768px) {
                                                                                                                            .service-container {
                                                                                                                              flex-direction: column !important;
                                                                                                                            }
  
                                                                                                                            .service-image, 
                                                                                                                            .service-content {
                                                                                                                              flex: 0 0 100%;
                                                                                                                              max-width: 100%;
                                                                                                                            }
  
                                                                                                                            .service-image {
                                                                                                                              margin-bottom: 20px;
                                                                                                                              order: -1; /* Place image above content on mobile */
                                                                                                                            }
}
/* Highlight effect for direct links */
@keyframes highlightSection {
                                                                                                                                      0% { background-color: var(--color-overlay-light); } /* Updated green with transparency */
                                                                                                                                      50% { background-color: var(--color-overlay); } /* Updated green with transparency */
                                                                                                                                      100% { background-color: transparent; }
}

.highlight-section {
                                                                                                                                      animation: highlightSection 2s ease-out;
                                                                                                                                      border-radius: 8px;
}

.service-container {
                                                                                                                                      display: flex;
                                                                                                                                      align-items: flex-start;
                                                                                                                                      gap: 30px;
}

/* Explicit image positioning classes */
.left-image {
                                                                                                                                      flex-direction: row; /* Image on left, content on right */
}

.right-image {
                                                                                                                                      flex-direction: row-reverse; /* Content on left, image on right */
}

.service-image {
                                                                                                                                      flex: 0 0 40%;
                                                                                                                                      max-width: 40%;
}

.service-image img {
                                                                                                                                      width: 100%;
                                                                                                                                      height: auto;
                                                                                                                                      border-radius: 8px;
                                                                                                                                      border: 1px solid var(--color-bg-lightest); /* Lighter border */
                                                                                                                                      transition: transform 0.3s ease;
}

.service-image img:hover {
                                                                                                                                      transform: scale(1.02);
}

.service-content {
                                                                                                                                      flex: 0 0 55%;
                                                                                                                                      max-width: 55%;
}

.service-content h3 {
                                                                                                                                      margin-top: 0;
                                                                                                                                      color: var(--color-secondary); /* Toned down yellow */
                                                                                                                                      border-bottom: 1px dotted var(--color-bg-lightest); /* Lighter dotted border */
                                                                                                                                      padding-bottom: 10px;
                                                                                                                                      margin-bottom: 15px;
}

/* Responsive adjustments for service sections */
@media (max-width: 768px) {
                                                                                                                                      .service-container, .left-image, .right-image {
                                                                                                                                        flex-direction: column !important; /* Force column layout on mobile regardless of original direction */
                                                                                                                                      }
  
                                                                                                                                      .service-image, 
                                                                                                                                      .service-content {
                                                                                                                                        flex: 0 0 100%;
                                                                                                                                        max-width: 100%;
                                                                                                                                      }
  
                                                                                                                                      .service-image {
                                                                                                                                        margin-bottom: 20px;
                                                                                                                                      }
}

/* Language Switcher Styles */
.language-switcher {
                                                                                                                                      display: flex;
                                                                                                                                      margin-left: auto;
                                                                                                                                      gap: 5px;
}

.lang-btn {
                                                                                                                                      background: none;
                                                                                                                                      border: 1px solid var(--color-primary); /* Updated green color */
                                                                                                                                      color: var(--color-primary); /* Updated green color */
                                                                                                                                      font-family: inherit;
                                                                                                                                      padding: 5px 10px;
                                                                                                                                      cursor: pointer;
                                                                                                                                      border-radius: 4px;
                                                                                                                                      font-weight: bold;
                                                                                                                                      transition: all 0.3s ease;
}

.lang-btn:hover {
                                                                                                                                      background-color: var(--color-overlay); /* Updated green with transparency */
}

.lang-btn.active {
                                                                                                                                      background-color: var(--color-primary); /* Updated green color */
                                                                                                                                      color: var(--color-bg-dark); /* Match the graphite background for contrast */
}

/* For mobile responsiveness */
@media (max-width: 600px) {
                                                                                                                                      .language-switcher {
                                                                                                                                        margin-top: 10px;
                                                                                                                                        margin-left: 0;
                                                                                                                                      }
  
                                                                                                                                      .lang-btn {
                                                                                                                                        padding: 3px 6px;
                                                                                                                                        font-size: 0.9em;
                                                                                                                                      }
}

/* Touch-friendly improvements */
@media (max-width: 768px) {
                                                                                                                                      /* Increase spacing between clickable elements */
                                                                                                                                      a, button {
                                                                                                                                        padding: 8px 12px; /* Larger touch targets */
                                                                                                                                        margin-bottom: 5px; /* Space between stacked elements */
                                                                                                                                      }
  
                                                                                                                                      /* Increase spacing in LinkedIn sections */
                                                                                                                                      .linkedin-snippet {
                                                                                                                                        padding: 20px 15px;
                                                                                                                                      }
  
                                                                                                                                      /* Make sure form elements are touch-friendly */
                                                                                                                                      input, select, textarea, button {
                                                                                                                                        min-height: 44px; /* Apple's recommended minimum touch target size */
                                                                                                                                      }
}

/* Better service section layout on mobile */
@media (max-width: 768px) {
                                                                                          .service-container {
                                                                                            display: flex;
                                                                                            flex-direction: column !important;
                                                                                            gap: 1em;
                                                                                          }

                                                                                          .service-image {
                                                                                            order: 0;
                                                                                            margin: 0 auto 20px auto;
                                                                                            text-align: center;
                                                                                            max-width: 100%;
                                                                                          }

                                                                                          .service-image img {
                                                                                            margin: 0 auto;
                                                                                            display: block;
                                                                                            max-height: 200px;
                                                                                          }

                                                                                          .service-content {
                                                                                            order: 1;
                                                                                            text-align: left;
                                                                                            padding: 0 10px;
                                                                                            flex: 0 0 100%;
                                                                                            max-width: 100%;
                                                                                          }

                                                                                          /* Ensure consistent spacing */
                                                                                          .service-content h3 {
                                                                                            margin-top: 0.5rem;
                                                                                            margin-bottom: 1rem;
                                                                                          }

                                                                                          /* Reduce vertical spacing between service sections on mobile */
                                                                                          .service-section {
                                                                                            margin-bottom: 2.5em;
                                                                                          }
}

/* Services heading specific styling */
.services-heading {
                                                                                                                            text-align: center;
                                                                                                                            width: 100%;
                                                                                                                            line-height: 1.3;
                                                                                                                            margin-bottom: 1.5em;
                                                                                                                            font-size: 2rem;
}

/* Responsive adjustment for smaller screens */
@media (max-width: 768px) {
                                                                                                                            .services-heading {
                                                                                                                                font-size: 1.7rem;
                                                                                                                            }
}

@media (max-width: 480px) {
                                                                                                                            .services-heading {
                                                                                                                                font-size: 1.5rem;
                                                                                                                            }
}

/* Hamburger button */
.hamburger-btn {
                                                display: none;
                                                background: none;
                                                border: none;
                                                font-size: 2.2rem;
                                                color: #FFD700;
                                                position: absolute;
                                                top: 18px;
                                                right: 18px;
                                                z-index: 1101;
                                                cursor: pointer;
                                                padding: 0;
}
.hamburger-icon {
                                                display: inline-block;
                                                width: 32px;
                                                height: 32px;
                                                position: relative;
}
.hamburger-icon:before, .hamburger-icon:after, .hamburger-icon span {
                                                content: '';
                                                display: block;
                                                height: 4px;
                                                background: #FFD700;
                                                border-radius: 2px;
                                                margin: 6px 0;
                                                transition: all 0.3s;
}
.hamburger-icon:before {
                                                width: 100%;
}
.hamburger-icon span {
                                                width: 100%;
}
.hamburger-icon:after {
                                                width: 100%;
}

/* Mobile nav menu */
.mobile-nav {
                                                display: none;
                                                flex-direction: column;
                                                background: #2a2a2a;
                                                position: fixed;
                                                top: 0;
                                                left: 0;
                                                width: 100vw;
                                                height: 100vh;
                                                z-index: 1100;
                                                padding: 32px 24px 24px 24px;
                                                box-sizing: border-box;
                                                font-size: 1.2rem;
                                                overflow-y: auto;
                                                animation: fadeInMenu 0.25s;
}
@keyframes fadeInMenu {
                                                from { opacity: 0; transform: translateY(-20px);}
                                                to   { opacity: 1; transform: translateY(0);}
}
.mobile-nav.show {
                                                display: flex;
}

.mobile-menu-item {
                                                color: #6FCF3F;
                                                text-decoration: none;
                                                padding: 18px 0 8px 0;
                                                font-size: 1.2rem;
                                                display: block;
                                                border-bottom: 1px solid #333;
                                                background: none;
                                                border: none;
                                                text-align: left;
                                                width: 100%;
                                                cursor: pointer;
}
.mobile-menu-item:last-child {
                                                border-bottom: none;
}
.mobile-menu-dropdown {
                                                width: 100%;
}
.mobile-dropdown-toggle {
                                                color: #6FCF3F;
                                                background: none;
                                                border: none;
                                                font-size: 1.2rem;
                                                padding: 18px 0 8px 0;
                                                width: 100%;
                                                text-align: left;
                                                cursor: pointer;
                                                display: flex;
                                                align-items: center;
                                                border-bottom: 1px solid #333;
}
.mobile-dropdown-toggle .arrow {
                                                margin-left: 8px;
                                                font-size: 1rem;
}
.mobile-dropdown-content {
                                                display: none;
                                                flex-direction: column;
                                                background: #232323;
                                                margin-left: 10px;
                                                border-left: 2px solid #6FCF3F;
}
.mobile-dropdown-content.show {
                                                display: flex;
}
.mobile-dropdown-content .mobile-menu-item {
                                                padding-left: 18px;
                                                font-size: 1.08rem;
                                                border-bottom: none;
}
.mobile-lang-switcher {
                                                margin-top: 24px;
                                                display: flex;
                                                gap: 12px;
}
.mobile-lang-switcher .lang-btn {
                                                background: #232323;
                                                color: #FFD700;
                                                border: 1px solid #FFD700;
                                                border-radius: 6px;
                                                padding: 6px 16px;
                                                font-size: 1rem;
                                                cursor: pointer;
                                                transition: background 0.2s, color 0.2s;
}
.mobile-lang-switcher .lang-btn.active,
.mobile-lang-switcher .lang-btn:hover {
                                                background: #FFD700;
                                                color: #232323;
}

/* Hide desktop nav and show hamburger on mobile */
@media (max-width: 768px) {
                                                .site-nav {
                                                    display: none !important;
                                                }
                                                .hamburger-btn {
                                                    display: block;
                                                }
                                                .mobile-nav {
                                                    display: none !important;
                                                }
                                                .mobile-nav.show {
                                                    display: flex !important;
                                                }
                                                body.mobile-menu-open {
                                                    overflow: hidden;
                                                }
}
@media (min-width: 769px) {
                                                .mobile-nav,
                                                .hamburger-btn {
                                                    display: none !important;
                                                }
}
const mobileMenu = document.getElementById('mobileMenu');
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.attributeName === 'class') {
      console.log('[MUTATION] mobileMenu class changed:', mobileMenu.className, 'at', new Date().toISOString());
    }
  });
});
observer.observe(mobileMenu, { attributes: true });