:root {
    --primary: #556b2f;
    --gold: #c5a059;
    --dark: #1a1a1a;
}

body { font-family: 'Poppins', sans-serif; overflow-x: hidden; }

/* Hero Styling */
.about-hero {
    height: 100vh; position: relative; display: flex; 
    align-items: center; justify-content: center; color: white; text-align: center;
}
.hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center; filter: brightness(0.5); z-index: -1;
}
.about-hero h1 { font-family: 'Playfair Display', serif; font-size: 5rem; line-height: 1.1; }
.about-hero h1 span { color: var(--gold); }

/* Scrollytelling Section */
.story-wrapper { display: flex; position: relative; background: #fffdf9; }

.sticky-visual {
    flex: 1; height: 100vh; position: sticky; top: 0; overflow: hidden;
}
.img-container {
    position: absolute; width: 100%; height: 100%; 
    opacity: 0; transition: opacity 0.8s ease-in-out;
}
.img-container.active { opacity: 1; }
.img-container img { width: 100%; height: 100%; object-fit: cover; }

.scrolling-text { flex: 1; padding: 0 5%; }
.text-panel {
    height: 100vh; display: flex; flex-direction: column; justify-content: center;
    padding-bottom: 50px;
}
.step { font-weight: bold; color: var(--gold); font-size: 1.5rem; }
.text-panel h2 { font-size: 3rem; color: var(--primary); margin: 20px 0; }
.text-panel p { line-height: 2; color: #444; font-size: 1.1rem; }

/* Values Grid */
.values-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); 
    gap: 40px; padding: 100px 10%; background: #f4f4f4;
}
.value-item { text-align: center; background: white; padding: 40px; border-radius: 20px; transition: 0.3s; }
.value-item:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.05); }
.value-item i { font-size: 50px; color: var(--primary); margin-bottom: 20px; }

@media (max-width: 992px) {
    .story-wrapper { flex-direction: column; }
    .sticky-visual { height: 400px; position: relative; }
    .text-panel { height: auto; padding: 80px 0; }
}

:root {
    --primary: #556b2f; /* Earthy Green */
    --gold: #c5a059;
    --dark: #1a1a1a;
}

/* ... (rest of the file content) ... */

/* Values Grid */
.values-grid {
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px; 
    padding: 100px 10%; 
    /* Changed background to the brand's primary green */
    background: var(--primary); 
    color: white; /* Added to ensure text is readable on dark background */
}

/* Ensure icons and hover effects still look good on the new background */
.value-item { 
    text-align: center; 
    background: white; 
    padding: 40px; 
    border-radius: 20px; 
    transition: 0.3s; 
    color: #444; /* Reset text color for the cards */
}
.value-item:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.2); 
}
.value-item i { 
    font-size: 50px; 
    color: var(--gold); /* Switched icon color to gold for contrast */
    margin-bottom: 20px; 
}

@media (max-width: 992px) {
    /* ... (rest of media query) ... */
}