:root {
    /* Colors */
    --primary-color: #2F6B4F;
    --secondary-color: #A7CC80;
    --background-color: #F0F5EB;
    --footer-bg-color: #1E4A35;
    --button-color: #5D9E71;
    --text-color-dark: #1E4A35;
    --text-color-light: #F0F5EB;
    --accent-color: #6C9F80; /* A slightly lighter shade of primary for subtle accents */

    /* Section Backgrounds */
    --section-bg-1: #E2EBDD;
    --section-bg-2: #F8FFF4;
    --section-bg-3: #D4E0CD;
    --section-bg-4: #EDEFE8;

    /* Fonts */
    --font-primary: 'Merriweather', serif;
    --font-secondary: 'Lato', sans-serif;

    /* Spacing */
    --spacing-unit: 1rem;
    --padding-sm: calc(var(--spacing-unit) * 1);
    --padding-md: calc(var(--spacing-unit) * 1.5);
    --padding-lg: calc(var(--spacing-unit) * 2);

    /* Border Radius */
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 1rem;
    --border-radius-pill: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

/* Base Styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-secondary);
    color: var(--text-color-dark);
    line-height: 1.7;
    background-color: var(--background-color);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: var(--primary-color);
    line-height: 1.2;
    margin-top: 2em;
    margin-bottom: 0.5em;
    letter-spacing: -0.02em;
}

h1 {
    font-size: 3.5rem;
    font-weight: 700;
}

h2 {
    font-size: 2.5rem;
    font-weight: 700;
}

h3 {
    font-size: 2rem;
    font-weight: 600;
}

h4 {
    font-size: 1.5rem;
    font-weight: 600;
}

p {
    margin-bottom: 1.5em;
}

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

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

ul, ol {
    list-style-position: inside;
    margin-bottom: 1.5em;
    padding-left: 0;
}

li {
    margin-bottom: 0.5em;
}

/* Header Styles */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(240, 245, 235, 0.8); /* background-color with transparency */
    backdrop-filter: blur(8px); /* Glassmorphism blur effect */
    -webkit-backdrop-filter: blur(8px);
    padding: var(--padding-md) var(--padding-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-glass);
    border-bottom: 1px solid rgba(47, 107, 79, 0.1); /* Subtle border */
}

.header__logo {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    display: flex;
    align-items: center;
}

.header__logo span {
    margin-left: 0.5rem;
}

/* Stylized Laurel Leaf for logo */
.header__logo::before {
    content: '🌿'; /* Unicode character for a leaf or similar organic symbol */
    display: inline-block;
    font-size: 1.5em;
    margin-right: 0.25em;
    transform: rotate(-15deg);
}


.header__nav ul {
    display: flex;
    gap: var(--padding-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

.header__nav a {
    color: var(--text-color-dark);
    font-weight: 500;
    font-size: 1.1rem;
    position: relative;
    padding-bottom: 0.25rem;
}

.header__nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.header__nav a:hover::after,
.header__nav a.active::after {
    width: 100%;
}

/* Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: var(--border-radius-lg); /* More rounded corners */
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    background: linear-gradient(145deg, var(--button-color), #4a805b); /* Subtle gradient */
    color: var(--text-color-light);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Soft shadow */
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn:hover {
    transform: translateY(-2px) scale(1.02); /* Slightly grow and lift */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    background: linear-gradient(145deg, #6aa97e, var(--button-color)); /* Slightly changed hue */
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Section Backgrounds */
.section-bg-1 {
    background-color: var(--section-bg-1);
}

.section-bg-2 {
    background-color: var(--section-bg-2);
}

.section-bg-3 {
    background-color: var(--section-bg-3);
}

.section-bg-4 {
    background-color: var(--section-bg-4);
}

/* Image Styles */
img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-md); /* Consistent rounding */
    box-shadow: var(--shadow-sm); /* Subtle shadow for depth */
}

/* Footer Styles */
.footer {
    background-color: var(--footer-bg-color);
    color: var(--text-color-light);
    padding: var(--padding-lg) var(--padding-md);
    text-align: center;
    position: relative;
    overflow: hidden; /* For organic ornaments */
}

.footer::before,
.footer::after {
    content: '';
    position: absolute;
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M50 0C22.3858 0 0 22.3858 0 50C0 77.6142 22.3858 100 50 100C77.6142 100 100 77.6142 100 50C100 22.3858 77.6142 0 50 0ZM50 10C72.0914 10 90 27.9086 90 50C90 72.0914 72.0914 90 50 90C27.9086 90 10 72.0914 10 50C10 27.9086 27.9086 10 50 10ZM50 30C38.9543 30 30 38.9543 30 50C30 61.0457 38.9543 70 50 70C61.0457 70 70 61.0457 70 50C70 38.9543 61.0457 30 50 30Z" fill="%232F6B4F" fill-opacity="0.1"/></svg>'); /* Organic, leaf-like pattern */
    background-repeat: repeat;
    opacity: 0.05; /* Very subtle */
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    transform: rotate(45deg);
    pointer-events: none;
}

.footer::before {
    transform: rotate(45deg);
}

.footer::after {
    transform: rotate(-15deg);
    opacity: 0.03;
}


.footer__content {
    position: relative; /* Ensure content is above pseudo-elements */
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

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

.footer__social-links {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.footer__social-links a {
    color: var(--text-color-light);
    font-size: 1.5rem;
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer__social-links a:hover {
    color: var(--secondary-color);
    transform: translateY(-3px) scale(1.1);
}

/* Brutalism inspired organic shapes, but softened */
.card {
    background-color: var(--section-bg-2); /* A lighter background for cards */
    border-radius: var(--border-radius-lg);
    padding: var(--padding-lg);
    box-shadow: var(--shadow-md);
    border: 2px solid var(--accent-color); /* A defined, but not harsh, border */
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(47, 107, 79, 0.2); /* Deeper shadow on hover */
}

/* Organic shape overlay for cards */
.card::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle at 60% 30%, rgba(167, 204, 128, 0.1) 0%, transparent 70%),
                radial-gradient(circle at 20% 90%, rgba(47, 107, 79, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
    transform: rotate(5deg);
}


/* Utility for containers for better spacing */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--padding-lg);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    .header {
        padding: var(--padding-sm) var(--padding-md);
    }

    .header__nav ul {
        gap: var(--padding-md);
    }

    .footer {
        padding: var(--padding-md);
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    .header__logo {
        font-size: 1.5rem;
    }

    .header__nav ul {
        flex-direction: column;
        align-items: center;
        gap: var(--padding-sm);
    }

    .header__nav {
        display: none; /* Consider a hamburger menu for very small screens */
    }

    .btn {
        padding: var(--padding-sm) var(--padding-md);
        font-size: 0.9rem;
    }
}


/* Cookie Banner Additional Styles for Tailwind */
.cookie-banner-hover-effect:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner-hover-effect:hover {
        transform: none;
    }
}