/* ================================
   SUSTAINABILITY DESIGN PAGE - MAIN CSS
   ================================ */
   @import url('../components/service-page-header.css');
@import url('../sections/services-page-shared.css');
/* Import Section Files */
@import url('../sections/sustainability-design/sd-hero.css');
@import url('../sections/sustainability-design/sd-services.css');
@import url('../sections/sustainability-design/sd-technology.css');
@import url('../sections/sustainability-design/sd-modal.css');
@import url('../sections/sustainability-design/sd-cta.css');

/* ================================
   SUSTAINABILITY DESIGN PAGE VARIABLES
   ================================ */

:root {
  /* Page-specific primary colors for service-page-header component */
  --page-primary: #2E7D32; /* Green theme for sustainability */
  --page-primary-dark: #1B5E20;
  --page-primary-light: #4CAF50;
  
  /* Forest & Nature Color Palette */
  --forest: #2E7D32;
  --forest-dark: #1B5E20;
  --forest-light: #388E3C;
  --nature: #4CAF50;
  --nature-light: #81C784;
  --nature-pale: #C8E6C9;
  
  /* Enhanced Card Colors - Sustainability Palette */
  --card-green-forest: #e8f5e8;
  --card-green-sage: #e4ece7;
  --card-green-mint: #e5f5ed;
  --card-green-muted: #d5e9cf;
  --card-green-pale: #f1f8e9;
  --card-eco-blue: #e0f2f1;
  --card-earth-tone: #f3e5ab;
  --card-natural-beige: #f5f5dc;
  
  /* Button Colors for Cards */
  --button-green-forest: #43a047;
  --button-green-sage: #689f38;
  --button-green-mint: #66bb6a;
  --button-green-muted: #8bc34a;
  --button-green-pale: #9ccc65;
  --button-eco-blue: #26a69a;
  --button-earth-tone: #fbc02d;
  --button-natural-beige: #d4af37;

  /* Card Shadow Colors */
  --shadow-green-forest: rgba(67, 160, 71, 0.25);
  --shadow-green-sage: rgba(104, 159, 56, 0.25);
  --shadow-green-mint: rgba(102, 187, 106, 0.25);
  --shadow-green-muted: rgba(139, 195, 74, 0.25);
  --shadow-green-pale: rgba(156, 204, 101, 0.25);
  --shadow-eco-blue: rgba(38, 166, 154, 0.25);
  --shadow-earth-tone: rgba(251, 192, 45, 0.25);
  --shadow-natural-beige: rgba(212, 175, 55, 0.25);
  
  /* Sustainability-specific gradients */
  --gradient-primary: linear-gradient(135deg, var(--forest) 0%, var(--nature) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--nature-light) 0%, var(--forest-light) 100%);
  --gradient-accent: linear-gradient(135deg, var(--nature-pale) 0%, var(--card-green-forest) 100%);
}

/* ================================
   PAGE LAYOUT & BASE STYLES
   ================================ */

/* Main Content Layout */
main {
  padding-top: var(--header-height + 60px);
  background-color: var(--white);
  display: block;
}

/* ================================
   BREADCRUMB NAVIGATION
   ================================ */

/* ================================
   SUSTAINABILITY-SPECIFIC STYLES
   ================================ */

/* Enhanced Container for sustainability */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Sustainability accent elements */
.sustainability-accent {
  border-left: 4px solid var(--forest);
  padding-left: 1.5rem;
  background: linear-gradient(90deg, var(--card-green-forest), transparent);
}

/* Eco-friendly indicators */
.eco-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--gradient-primary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
}

.eco-badge::before {
  content: '🌱';
  font-size: 1rem;
}

/* ================================
   UTILITY CLASSES
   ================================ */

/* Hidden Elements */
.hidden {
  display: none !important;
}

/* Fade in animation for sections */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.fade-in.animate {
  opacity: 1;
  transform: translateY(0);
}

/* ================================
   RESPONSIVE DESIGN
   ================================ */

@media (max-width: 768px) {
  main {
    padding-top: calc(var(--header-height, 60px));
  }
  
  .breadcrumb {
    padding: 0 1rem;
  }
  
  .container {
    padding: 0 1rem;
  }
}