@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Open+Sans:wght@400;600&display=swap');

:root {
  --color-green: #2E7D32;
  --color-brown: #5D4037;
  --color-blue: #4FC3F7;
  --color-beige: #F5F5DC;
  --color-yellow: #FBC02D;
}

body {
  font-family: 'Open Sans', Arial, sans-serif;
  background: #181c1f;
  color: var(--color-beige);
}
.font-montserrat {
  font-family: 'Montserrat', Arial, sans-serif;
}
.bg-beige {
  background-color: var(--color-beige);
}
.text-brown {
  color: var(--color-brown);
}
.text-green-800 {
  color: var(--color-green);
}
.bg-green-900 {
  background-color: #1b5e20;
}
.animate-fadeIn {
  animation: fadeIn 1.2s ease-in;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Eco section dividers */
section + section {
  border-top: 2px solid var(--color-green);
  background-image: url('images/eco-divider.png');
  background-repeat: repeat-x;
  background-size: contain;
}
/* Responsive image tweaks */
img {
  max-width: 100%;
  height: auto;
}

.glass-card, .glass-card-dark {
  border-radius: 1.25rem;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow 0.3s, background 0.3s;
}
.glass-card {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}
.glass-card-dark {
  background: rgba(34, 40, 49, 0.72);
  border: 1px solid rgba(60, 60, 60, 0.32);
  color: #fff;
}
.glass-card:hover, .glass-card-dark:hover {
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.22);
  background: rgba(34, 40, 49, 0.82);
}
.glass-icon, .glass-icon-dark {
  border-radius: 9999px;
  box-shadow: 0 2px 8px 0 rgba(31,38,135,0.10);
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  margin-bottom: 2px;
}
.glass-icon {
  background: rgba(34,40,49,0.32);
  border: 1px solid rgba(60,60,60,0.18);
}
.glass-icon-dark {
  background: rgba(34,40,49,0.62);
  border: 1px solid rgba(60,60,60,0.32);
}

/* Dark overlay for section backgrounds */
.section-dark-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(24, 28, 31, 0.82);
  z-index: -9;
  pointer-events: none;
}

/* Make text inside glass cards always light */
.glass-card, .glass-card-dark, .glass-icon, .glass-icon-dark {
  color: #fff !important;
}