:root {
            --grass-light: #8BC34A;
            --grass: #05e60d;
            --grass-dark: #2E7D32;
            --earth-light: #A1887F;
            --earth: #795548;
            --earth-dark: #5D4037;
        }

        body {
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
            color: #333;
            background: linear-gradient(to bottom, #317b53, #e8f8e8);
        }

        /* Custom color classes */
        .bg-grass-light { background-color: var(--grass-light); }
        .bg-grass { background-color: var(--grass); }
        .bg-grass-dark { background-color: var(--grass-dark); }
        .text-grass { color: var(--grass); }
        .text-grass-dark { color: var(--grass-dark); }
        .bg-earth { background-color: var(--earth); }

        /* Background elements */
        .grass-pattern {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M10,0 L10,40 C10,60 30,60 30,40 L30,10 L40,10 L40,70 C40,85 60,85 60,70 L60,40 L70,40 L70,90 C70,100 90,100 90,90 L90,0 Z' fill='%234CAF5022'/%3E%3C/svg%3E");
            background-size: 300px;
            animation: grass-bg 20s linear infinite;
        }

        @keyframes grass-bg {
            0% { background-position: 0 0; }
            100% { background-position: 300px 0; }
        }

        /* Animations */
        .animate-float {
            animation: float 6s ease-in-out infinite;
        }
        .animate-grass-grow {
            animation: grow 10s ease-in-out infinite;
        }
        .animate-leaf-sway {
            animation: sway 5s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        @keyframes grow {
            0% { transform: scaleY(0.97); }
            50% { transform: scaleY(1.03); }
            100% { transform: scaleY(0.97); }
        }
        @keyframes sway {
            0%, 100% { transform: rotate(-3deg); }
            50% { transform: rotate(3deg); }
        }

        /* Custom components */
        .btn-rounded {
            border-radius: 50px;
            padding: 0.5rem 1.5rem;
            transition: all 0.3s;
        }
        .btn-rounded:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        .card-grass {
            border-top: 4px solid var(--grass-light);
            transition: transform 0.3s;
            border-radius: 0.5rem;
            overflow: hidden;
        }
        .card-grass:hover {
            transform: translateY(-8px);
        }

        .hero-section {
            position: relative;
            height: 600px;
            background-size: cover;
            background-position: center;
        }
        .hero-overlay {
            background-color: rgba(0, 0, 0, 0.5);
        }

        .circle-icon {
            width: 4rem;
            height: 4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--grass) 0%, var(--grass-dark) 100%);
        }

        .gallery-card {
            position: relative;
            overflow: hidden;
            border-radius: 0.5rem;
            height: 300px;
        }
        .gallery-card img {
            transition: transform 0.5s;
            height: 100%;
            object-fit: cover;
        }
        .gallery-card:hover img {
            transform: scale(1.1);
        }
        .gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 1.5rem;
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
            transform: translateY(100%);
            transition: transform 0.3s;
        }
        .gallery-card:hover .gallery-overlay {
            transform: translateY(0);
        }

        .wave-separator {
            overflow: hidden;
            position: relative;
        }
        .wave-separator svg {
            display: block;
            width: 100%;
        }