:root {
        --background: 0 0% 100%;
        --foreground: 220 13% 18%;
        --card: 0 0% 100%;
        --card-foreground: 220 13% 18%;
        --primary: 142 71% 45%;
        --primary-foreground: 0 0% 100%;
        --secondary: 142 15% 96%;
        --secondary-foreground: 142 71% 25%;
        --muted: 220 14% 96%;
        --muted-foreground: 220 9% 46%;
        --accent: 142 30% 92%;
        --accent-foreground: 142 71% 35%;
        --border: 220 13% 91%;
        --primary-glow: 142 71% 55%;
        --gradient-primary: linear-gradient(135deg, hsl(142 71% 45%), hsl(142 71% 55%));
        --gradient-hero: linear-gradient(135deg, hsl(142 71% 45%), hsl(142 71% 35%));
        --gradient-subtle: linear-gradient(180deg, hsl(var(--background)), hsl(var(--muted)/0.3));
        --shadow-elegant: 0 10px 30px -10px hsl(142 71% 45% / 0.3);
        --shadow-glow: 0 0 40px hsl(142 71% 55% / 0.4);
    }
    
    .bg-gradient-hero { background: var(--gradient-hero); }
    .bg-gradient-primary { background: var(--gradient-primary); }
    .bg-gradient-subtle { background: var(--gradient-subtle); }
    .shadow-elegant { box-shadow: var(--shadow-elegant); }
    .shadow-glow { box-shadow: var(--shadow-glow); }
    
    .contact-hero {
        position: relative;
        overflow: hidden;
        background:#16a34a;
        padding: 5rem 1rem;
    }
    
    .hero-overlay {
        position: absolute;
        inset: 0;
        background: rgba(34, 197, 94, 0.1);
    }
    
    .hero-content {
        position: relative;
        max-width: 72rem;
        margin: 0 auto;
    }
    
    .contact-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(8px);
        border-radius: 1rem;
        padding: 1.5rem;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: all 0.3s ease;
    }
    
    .contact-card:hover {
        transform: translateY(-4px);
        background: rgba(255, 255, 255, 0.15);
    }
    
    .contact-info-card {
        border: 1px solid hsl(var(--border));
        border-radius: 1rem;
        padding: 1.5rem;
        background: var(--gradient-subtle);
        transition: all 0.3s ease;
    }
    
    .contact-info-card:hover {
        border-color: hsl(142 71% 45% / 0.4);
        box-shadow: var(--shadow-elegant);
    }
    
    .icon-container {
        width: 3.5rem;
        height: 3.5rem;
        background:#16a34a;
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--shadow-glow);
        transition: transform 0.3s ease;
    }
    
    .contact-info-card:hover .icon-container {
        transform: scale(1.1);
    }
    
    .support-card {
        border: 1px solid hsl(var(--border));
        border-radius: 1rem;
        padding: 2rem;
        text-align: center;
        background: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(4px);
        transition: all 0.3s ease;
    }
    
    .support-card:hover {
        border-color: hsl(142 71% 45% / 0.4);
        box-shadow: var(--shadow-elegant);
    }
    
    .support-icon {
        width: 4rem;
        height: 4rem;
        background: var(--gradient-primary);
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
        box-shadow: var(--shadow-glow);
    }
    
    .map-container {
        position: relative;
        aspect-ratio: 16 / 9;
        border-radius: 1rem;
        overflow: hidden;
        border: 2px solid hsl(142 71% 45% / 0.2);
        box-shadow: var(--shadow-elegant);
    }
    
    .map-glow {
        position: absolute;
        inset: 0;
        background: var(--gradient-primary);
        border-radius: 1rem;
        filter: blur(4px);
        opacity: 0.3;
        transition: opacity 0.3s ease;
    }
    
    .map-container:hover .map-glow {
        opacity: 0.5;
    }
    
    .btn-primary {
        width: 100%;
        background: var(--gradient-primary);
        color: white;
        font-size: 1.125rem;
        padding: 1.5rem 2rem;
        border-radius: 0.75rem;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
    }
    
    .btn-primary:hover {
        box-shadow: var(--shadow-glow);
        transform: translateY(-2px);
    }