<!--@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%%@@@@@%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%%%%#@@@@@@@%%%%%%
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%#****####%%@@@@@@@@@@@@@@@@@@@@@@%%%%%%##%%@@@@@@@@@%%%
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%@%%%%##**********%@@@@@@@@@@@@@@@@@@@@@%%%%%##%%#%@@@@@@@@@@%%
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%#**+++++++***%@@@@@@@@@@@@@@@@@@@@@%%##%##%%@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%%###******+*****%@@@@@@@@@@@@@@@@@@%%%%%##%%%@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%#%%%#*++*#%%%%#**#@%@@@@@@@@@@@@@@%@%%%####%%@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#+@%##*#*+*#%%#*+**%*+#@@@@@@@@@@@@%%%%%###%#@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%*%#%##%#****++++**#++*@@@@@@@@@@@@@%%%####%@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%###**#%#**+++++++*#+*#@@@@@@@@@@@%%%%%%##%@@@@@@@@%%@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%####*%#****++++++*#*+#@@@@@@@@%@@%%#%%%%%@@%%%%%%%%%%%@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%###*#%%%%##**+++*#%#@@@@@@@@@@%%%%%%%%@@@@%%%%%%%%%%%%%%@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@####%%@%%%%%%%#*+*#%%%@@@%%%%@%%%%%%%%%%%%%%%%%%%%%%%%%@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%#%%%%%#*****#***#%%@%%%%%%@%%%%%%%%%%%%%%%%%%%%%%%%%%%@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%###%%##*****#*#%%@@@@@%%@%%%#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%%%########%%%%%@@@@@%%%%#%@@@@@@@@%%%%%%%%%%%%%%%%%%%%%
%%%%%%%@@@@@@@@@@@@@@@@@@@@%%%%%%%%%%%%%%@@@@#%######%%@%%%@@@@@@%###%@@@@@@@@@@@@%%%%%%%%%%%%%%%%%%
#######%%%@@@@@@@@@@@@@@@@@%%%%%%%%%%%%%%@@@@@@%%%%#%%@%%%@@@@@@%###@@@@@@@@@@@@@@@%%%%%%%%%%%%%%%%%
####*####%%%@@@@@@@@@@@@@@@%%%%%%%%%%%%%@@@@@%%%%#*#@@%%%@@@@@@%###@@@@@@@@@@@@@@@@@@%%%%%%%%%%%%%%%
###**#####%%%@@@@@@@@@@@@@@@%%%%%%%%%%%@@@@@@@@%%@@@%%%%@@@@@@%##%@@@@@@@@@@@@@@@@@%@%%%%%%%%%%%%%%%
#######%%%%%%@@@@@%%%%%%%%%%%%%%%%%%@@@@@@@@@@@@%%%%%%@@@@@@@%##%@@@@@@@@@@@@@@@@@@@%%%@%%%%%%%%%%%%
#####%%%%%%%%%@@@%%%%%%%%%%%%%%%%%@@@@@@@@@@%@@@@@@%%@@@@@@%%##%@@@@@@@@@@@@@@@@@%@@@%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%@@@%%%%%%%%%%%%%%%@@@@@@@@@@@@@@%%@@@@@@@@%@%###@@@@@@@@@@@@@@@@@@@%@@@@%%@%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@@@@@@@@@@@@@@@@@@@@@@@%%######@@@@@@@@@@@@@@@@@@@@%%@@@@%%@%%#%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@@@@@@@@@@@@@@@@@@@@@@@%%#*******#%@%@%%@@@@@@@@@@@%@@@%%@@@%%#########
@%%%@@@@@@@@@%%%%%%%%%%%%%%%@@@@@@@@@@@@@@@@@@@@@@@%###*++*****#@@@@@@@@@@@@%@%%@%%%%%%@@@%#########
@@@@@@@@@@@@%%%%%%%%%%%%##%%%%@@@@@@@@@@@@@@@@@@@@%##****+++***%@@@@@@@@@@@@%%@@@%@@%%%%%@@%########
@@@@@@@@@@@%%%%%%%%%#######*%@%@@@@@@@@@@@@@@@@@@@#*+++++=+****@@@@@@@@@@@@@@@@@@@%%%%@@%%@@%#*#####
@%@@@@@@@@%%%%%%%%#########*#%@%@@@@@@@@@@@@@@@@@@@%####%#**++*@@@@@@@@@@@@@@@@@@%%%@@%%@@@@@#***###
@%%@@@@@@%%%%%%%%##########+*@@%@@@@@@@@#@@@@@@@@@%##%@@@@@@@@@@@@@@@@@@@%@@@@@@@%%@@@@%%%%@@@#***##
%%%%@@@%%%%%%%%%%##########+*@@@@@@@@@@@@@@%%@@@@%##%@@@@@@@@@@@@@@@@@@%%%%%%@@@@@@@@@@@@%%%%@%*****
%%%%%%%%%%%%%%%%###########+#@@#@@@@@@@@@@@#*%@@%##%@@@@@@@@@@@@@@@@@@@%%%%%%%%@@@@@@@@@@@%@@@%#****
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%%@@@@@%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%%%%#@@@@@@@%%%%%%
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%#****####%%@@@@@@@@@@@@@@@@@@@@@@%%%%%%##%%@@@@@@@@@%%%
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%@%%%%##**********%@@@@@@@@@@@@@@@@@@@@@%%%%%##%%#%@@@@@@@@@@%%
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%#**+++++++***%@@@@@@@@@@@@@@@@@@@@@%%##%##%%@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%%###******+*****%@@@@@@@@@@@@@@@@@@%%%%%##%%%@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%#%%%#*++*#%%%%#**#@%@@@@@@@@@@@@@@%@%%%####%%@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#+@%##*#*+*#%%#*+**%*+#@@@@@@@@@@@@%%%%%###%#@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%*%#%##%#****++++**#++*@@@@@@@@@@@@@%%%####%@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%###**#%#**+++++++*#+*#@@@@@@@@@@@%%%%%%##%@@@@@@@@%%@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%####*%#****++++++*#*+#@@@@@@@@%@@%%#%%%%%@@%%%%%%%%%%%@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%###*#%%%%##**+++*#%#@@@@@@@@@@%%%%%%%%@@@@%%%%%%%%%%%%%%@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@####%%@%%%%%%%#*+*#%%%@@@%%%%@%%%%%%%%%%%%%%%%%%%%%%%%%@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%#%%%%%#*****#***#%%@%%%%%%@%%%%%%%%%%%%%%%%%%%%%%%%%%%@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%###%%##*****#*#%%@@@@@%%@%%%#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%%%########%%%%%@@@@@%%%%#%@@@@@@@@%%%%%%%%%%%%%%%%%%%%%
%%%%%%%@@@@@@@@@@@@@@@@@@@@%%%%%%%%%%%%%%@@@@#%######%%@%%%@@@@@@%###%@@@@@@@@@@@@%%%%%%%%%%%%%%%%%%
#######%%%@@@@@@@@@@@@@@@@@%%%%%%%%%%%%%%@@@@@@%%%%#%%@%%%@@@@@@%###@@@@@@@@@@@@@@@%%%%%%%%%%%%%%%%%
####*####%%%@@@@@@@@@@@@@@@%%%%%%%%%%%%%@@@@@%%%%#*#@@%%%@@@@@@%###@@@@@@@@@@@@@@@@@@%%%%%%%%%%%%%%%
###**#####%%%@@@@@@@@@@@@@@@%%%%%%%%%%%@@@@@@@@%%@@@%%%%@@@@@@%##%@@@@@@@@@@@@@@@@@%@%%%%%%%%%%%%%%%
#######%%%%%%@@@@@%%%%%%%%%%%%%%%%%%@@@@@@@@@@@@%%%%%%@@@@@@@%##%@@@@@@@@@@@@@@@@@@@%%%@%%%%%%%%%%%%
#####%%%%%%%%%@@@%%%%%%%%%%%%%%%%%@@@@@@@@@@%@@@@@@%%@@@@@@%%##%@@@@@@@@@@@@@@@@@%@@@%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%@@@%%%%%%%%%%%%%%%@@@@@@@@@@@@@@%%@@@@@@@@%@%###@@@@@@@@@@@@@@@@@@@%@@@@%%@%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@@@@@@@@@@@@@@@@@@@@@@@%%######@@@@@@@@@@@@@@@@@@@@%%@@@@%%@%%#%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@@@@@@@@@@@@@@@@@@@@@@@%%#*******#%@%@%%@@@@@@@@@@@%@@@%%@@@%%#########
@%%%@@@@@@@@@%%%%%%%%%%%%%%%@@@@@@@@@@@@@@@@@@@@@@@%###*++*****#@@@@@@@@@@@@%@%%@%%%%%%@@@%#########
@@@@@@@@@@@@%%%%%%%%%%%%##%%%%@@@@@@@@@@@@@@@@@@@@%##****+++***%@@@@@@@@@@@@%%@@@%@@%%%%%@@%########
@@@@@@@@@@@%%%%%%%%%#######*%@%@@@@@@@@@@@@@@@@@@@#*+++++=+****@@@@@@@@@@@@@@@@@@@%%%%@@%%@@%#*#####
@%@@@@@@@@%%%%%%%%#########*#%@%@@@@@@@@@@@@@@@@@@@%####%#**++*@@@@@@@@@@@@@@@@@@%%%@@%%@@@@@#***###
@%%@@@@@@%%%%%%%%##########+*@@%@@@@@@@@#@@@@@@@@@%##%@@@@@@@@@@@@@@@@@@@%@@@@@@@%%@@@@%%%%@@@#***##
%%%%@@@%%%%%%%%%%##########+*@@@@@@@@@@@@@@%%@@@@%##%@@@@@@@@@@@@@@@@@@%%%%%%@@@@@@@@@@@@%%%%@%*****
%%%%%%%%%%%%%%%%###########+#@@#@@@@@@@@@@@#*%@@%##%@@@@@@@@@@@@@@@@@@@%%%%%%%%@@@@@@@@@@@%@@@%#****-->

<!--@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%%@@@@@%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%%%%#@@@@@@@%%%%%%
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%#****####%%@@@@@@@@@@@@@@@@@@@@@@%%%%%%##%%@@@@@@@@@%%%
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%@%%%%##**********%@@@@@@@@@@@@@@@@@@@@@%%%%%##%%#%@@@@@@@@@@%%
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%#**+++++++***%@@@@@@@@@@@@@@@@@@@@@%%##%##%%@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%%###******+*****%@@@@@@@@@@@@@@@@@@%%%%%##%%%@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%#%%%#*++*#%%%%#**#@%@@@@@@@@@@@@@@%@%%%####%%@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#+@%##*#*+*#%%#*+**%*+#@@@@@@@@@@@@%%%%%###%#@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%*%#%##%#****++++**#++*@@@@@@@@@@@@@%%%####%@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%###**#%#**+++++++*#+*#@@@@@@@@@@@%%%%%%##%@@@@@@@@%%@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%####*%#****++++++*#*+#@@@@@@@@%@@%%#%%%%%@@%%%%%%%%%%%@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%###*#%%%%##**+++*#%#@@@@@@@@@@%%%%%%%%@@@@%%%%%%%%%%%%%%@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@####%%@%%%%%%%#*+*#%%%@@@%%%%@%%%%%%%%%%%%%%%%%%%%%%%%%@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%#%%%%%#*****#***#%%@%%%%%%@%%%%%%%%%%%%%%%%%%%%%%%%%%%@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%###%%##*****#*#%%@@@@@%%@%%%#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%%%########%%%%%@@@@@%%%%#%@@@@@@@@%%%%%%%%%%%%%%%%%%%%%
%%%%%%%@@@@@@@@@@@@@@@@@@@@%%%%%%%%%%%%%%@@@@#%######%%@%%%@@@@@@%###%@@@@@@@@@@@@%%%%%%%%%%%%%%%%%%
#######%%%@@@@@@@@@@@@@@@@@%%%%%%%%%%%%%%@@@@@@%%%%#%%@%%%@@@@@@%###@@@@@@@@@@@@@@@%%%%%%%%%%%%%%%%%
####*####%%%@@@@@@@@@@@@@@@%%%%%%%%%%%%%@@@@@%%%%#*#@@%%%@@@@@@%###@@@@@@@@@@@@@@@@@@%%%%%%%%%%%%%%%
###**#####%%%@@@@@@@@@@@@@@@%%%%%%%%%%%@@@@@@@@%%@@@%%%%@@@@@@%##%@@@@@@@@@@@@@@@@@%@%%%%%%%%%%%%%%%
#######%%%%%%@@@@@%%%%%%%%%%%%%%%%%%@@@@@@@@@@@@%%%%%%@@@@@@@%##%@@@@@@@@@@@@@@@@@@@%%%@%%%%%%%%%%%%
#####%%%%%%%%%@@@%%%%%%%%%%%%%%%%%@@@@@@@@@@%@@@@@@%%@@@@@@%%##%@@@@@@@@@@@@@@@@@%@@@%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%@@@%%%%%%%%%%%%%%%@@@@@@@@@@@@@@%%@@@@@@@@%@%###@@@@@@@@@@@@@@@@@@@%@@@@%%@%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@@@@@@@@@@@@@@@@@@@@@@@%%######@@@@@@@@@@@@@@@@@@@@%%@@@@%%@%%#%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@@@@@@@@@@@@@@@@@@@@@@@%%#*******#%@%@%%@@@@@@@@@@@%@@@%%@@@%%#########
@%%%@@@@@@@@@%%%%%%%%%%%%%%%@@@@@@@@@@@@@@@@@@@@@@@%###*++*****#@@@@@@@@@@@@%@%%@%%%%%%@@@%#########
@@@@@@@@@@@@%%%%%%%%%%%%##%%%%@@@@@@@@@@@@@@@@@@@@%##****+++***%@@@@@@@@@@@@%%@@@%@@%%%%%@@%########
@@@@@@@@@@@%%%%%%%%%#######*%@%@@@@@@@@@@@@@@@@@@@#*+++++=+****@@@@@@@@@@@@@@@@@@@%%%%@@%%@@%#*#####
@%@@@@@@@@%%%%%%%%#########*#%@%@@@@@@@@@@@@@@@@@@@%####%#**++*@@@@@@@@@@@@@@@@@@%%%@@%%@@@@@#***###
@%%@@@@@@%%%%%%%%##########+*@@%@@@@@@@@#@@@@@@@@@%##%@@@@@@@@@@@@@@@@@@@%@@@@@@@%%@@@@%%%%@@@#***##
%%%%@@@%%%%%%%%%%##########+*@@@@@@@@@@@@@@%%@@@@%##%@@@@@@@@@@@@@@@@@@%%%%%%@@@@@@@@@@@@%%%%@%*****
%%%%%%%%%%%%%%%%###########+#@@#@@@@@@@@@@@#*%@@%##%@@@@@@@@@@@@@@@@@@@%%%%%%%%@@@@@@@@@@@%@@@%#****
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%%@@@@@%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%%%%#@@@@@@@%%%%%%
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%#****####%%@@@@@@@@@@@@@@@@@@@@@@%%%%%%##%%@@@@@@@@@%%%
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%@%%%%##**********%@@@@@@@@@@@@@@@@@@@@@%%%%%##%%#%@@@@@@@@@@%%
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%#**+++++++***%@@@@@@@@@@@@@@@@@@@@@%%##%##%%@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%%###******+*****%@@@@@@@@@@@@@@@@@@%%%%%##%%%@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%#%%%#*++*#%%%%#**#@%@@@@@@@@@@@@@@%@%%%####%%@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#+@%##*#*+*#%%#*+**%*+#@@@@@@@@@@@@%%%%%###%#@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%*%#%##%#****++++**#++*@@@@@@@@@@@@@%%%####%@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%###**#%#**+++++++*#+*#@@@@@@@@@@@%%%%%%##%@@@@@@@@%%@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%####*%#****++++++*#*+#@@@@@@@@%@@%%#%%%%%@@%%%%%%%%%%%@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%###*#%%%%##**+++*#%#@@@@@@@@@@%%%%%%%%@@@@%%%%%%%%%%%%%%@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@####%%@%%%%%%%#*+*#%%%@@@%%%%@%%%%%%%%%%%%%%%%%%%%%%%%%@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%#%%%%%#*****#***#%%@%%%%%%@%%%%%%%%%%%%%%%%%%%%%%%%%%%@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%###%%##*****#*#%%@@@@@%%@%%%#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%%%########%%%%%@@@@@%%%%#%@@@@@@@@%%%%%%%%%%%%%%%%%%%%%
%%%%%%%@@@@@@@@@@@@@@@@@@@@%%%%%%%%%%%%%%@@@@#%######%%@%%%@@@@@@%###%@@@@@@@@@@@@%%%%%%%%%%%%%%%%%%
#######%%%@@@@@@@@@@@@@@@@@%%%%%%%%%%%%%%@@@@@@%%%%#%%@%%%@@@@@@%###@@@@@@@@@@@@@@@%%%%%%%%%%%%%%%%%
####*####%%%@@@@@@@@@@@@@@@%%%%%%%%%%%%%@@@@@%%%%#*#@@%%%@@@@@@%###@@@@@@@@@@@@@@@@@@%%%%%%%%%%%%%%%
###**#####%%%@@@@@@@@@@@@@@@%%%%%%%%%%%@@@@@@@@%%@@@%%%%@@@@@@%##%@@@@@@@@@@@@@@@@@%@%%%%%%%%%%%%%%%
#######%%%%%%@@@@@%%%%%%%%%%%%%%%%%%@@@@@@@@@@@@%%%%%%@@@@@@@%##%@@@@@@@@@@@@@@@@@@@%%%@%%%%%%%%%%%%
#####%%%%%%%%%@@@%%%%%%%%%%%%%%%%%@@@@@@@@@@%@@@@@@%%@@@@@@%%##%@@@@@@@@@@@@@@@@@%@@@%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%@@@%%%%%%%%%%%%%%%@@@@@@@@@@@@@@%%@@@@@@@@%@%###@@@@@@@@@@@@@@@@@@@%@@@@%%@%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@@@@@@@@@@@@@@@@@@@@@@@%%######@@@@@@@@@@@@@@@@@@@@%%@@@@%%@%%#%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@@@@@@@@@@@@@@@@@@@@@@@%%#*******#%@%@%%@@@@@@@@@@@%@@@%%@@@%%#########
@%%%@@@@@@@@@%%%%%%%%%%%%%%%@@@@@@@@@@@@@@@@@@@@@@@%###*++*****#@@@@@@@@@@@@%@%%@%%%%%%@@@%#########
@@@@@@@@@@@@%%%%%%%%%%%%##%%%%@@@@@@@@@@@@@@@@@@@@%##****+++***%@@@@@@@@@@@@%%@@@%@@%%%%%@@%########
@@@@@@@@@@@%%%%%%%%%#######*%@%@@@@@@@@@@@@@@@@@@@#*+++++=+****@@@@@@@@@@@@@@@@@@@%%%%@@%%@@%#*#####
@%@@@@@@@@%%%%%%%%#########*#%@%@@@@@@@@@@@@@@@@@@@%####%#**++*@@@@@@@@@@@@@@@@@@%%%@@%%@@@@@#***###
@%%@@@@@@%%%%%%%%##########+*@@%@@@@@@@@#@@@@@@@@@%##%@@@@@@@@@@@@@@@@@@@%@@@@@@@%%@@@@%%%%@@@#***##
%%%%@@@%%%%%%%%%%##########+*@@@@@@@@@@@@@@%%@@@@%##%@@@@@@@@@@@@@@@@@@%%%%%%@@@@@@@@@@@@%%%%@%*****
%%%%%%%%%%%%%%%%###########+#@@#@@@@@@@@@@@#*%@@%##%@@@@@@@@@@@@@@@@@@@%%%%%%%%@@@@@@@@@@@%@@@%#****-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Volunteer |Tor Project </title>
    <meta name="description" content="Join our global matrix volunteer community and help protect privacy rights worldwide with custom beige theme experience. Contribute to Tor Project through development, advocacy, translation, and community support.">
    <meta name="keywords" content="Matrix Tor volunteer, privacy volunteer, digital rights, matrix community, custom beige theme, volunteer opportunities">
    <meta name="author" content="The Tor Project - shubham-shipt">
    <meta name="robots" content="index, follow">
    <meta name="language" content="en">
    <meta name="revisit-after" content="7 days">
    
    <!-- Enhanced Open Graph Meta Tags -->
    <meta property="og:title" content="Volunteer with Matrix Tor Project - Make Privacy Accessible to Everyone">
    <meta property="og:description" content="Join our global matrix volunteer community and help protect privacy rights worldwide with custom beige theme experience.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://torproject.org/volunteer">
    <meta property="og:image" content="../images/main.png">
    <meta property="og:site_name" content="The Tor Project">
    <meta property="og:locale" content="en_US">
    <meta property="article:author" content="shubham-shipt">
    
    <!-- Enhanced Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Volunteer with Matrix Tor Project - Make Privacy Accessible to Everyone">
    <meta name="twitter:description" content="Join our global matrix volunteer community with custom beige theme experience.">
    <meta name="twitter:image" content="../images/main.png">
    <meta name="twitter:site" content="@om_singh_213">
    <meta name="twitter:creator" content="@shubham_shipt">
    
    <!-- Additional Meta Tags -->
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-TileColor" content="#613976">
    <meta name="theme-color" content="#613976">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="Tor Volunteer">
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://torproject.org/volunteer">
    
    <!-- Enhanced Favicon Package -->
    <link rel="icon" type="image/png" sizes="32x32" href="../images/favicon.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../images/favicon.png">
    <link rel="apple-touch-icon" sizes="180x180" href="../images/main.png">
    <link rel="apple-touch-icon" sizes="152x152" href="../images/main.png">
    <link rel="apple-touch-icon" sizes="144x144" href="../images/main.png">
    <link rel="apple-touch-icon" sizes="120x120" href="../images/main.png">
    
    <!-- Preconnect for Performance -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://cdnjs.cloudflare.com">
    
    <!-- Preload Critical Resources -->
    <link rel="preload" href="../images/main.png" as="image">
    <link rel="preload" href="../images/volunteer-hero.png" as="image">
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" as="style">
    
    <!-- External Resources - Speed Optimized -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" media="print" onload="this.media='all'">
    <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"></noscript>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
    <noscript><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet"></noscript>
    
    <!-- JSON-LD Structured Data for SEO -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Organization",
        "name": "Tor Project Volunteer - Matrix Privacy Community",
        "description": "Join our global matrix volunteer community and help protect privacy rights worldwide with custom beige theme experience",
        "url": "https://torproject.org/volunteer",
        "sameAs": [
            "https://twitter.com/om_singh_213",
            "https://github.com/shubham-shipt"
        ],
        "volunteerOpportunity": [
            {
                "@type": "VolunteerOpportunity",
                "name": "Matrix Software Development",
                "description": "Contribute to matrix-enhanced Tor Browser and privacy tools",
                "organization": {
                    "@type": "Organization",
                    "name": "The Tor Project"
                }
            }
        ],
        "author": {
            "@type": "Person",
            "name": "shubham-shipt",
            "jobTitle": "Web Developer"
        },
        "dateModified": "2025-09-03T07:09:45Z"
    }
    </script>
    
    <style>
        /* VOLUNTEER PAGE - CUSTOM THEME WITH MATRIX EFFECTS */
        /* Developer: shubham-shipt | Copyright Reserved | Updated: 2025-09-03 07:09:45 */

        :root {
            /* CUSTOM THEME COLORS - SAME AS INDEX.HTML */
            --primary: #613976;
            --primary-dark: #4d2d5f;
            --primary-light: #7a4993;
            --primary-lighter: #9560b0;
            --primary-lightest: #b078cd;
            
            /* MAIN BACKGROUND COLORS - CUSTOM BEIGE */
            --main-bg: #e4e1c6;
            --main-bg-light: #ebe8d0;
            --main-bg-dark: #ddd9bc;
            --main-bg-darker: #d6d2b2;
            
            /* CUSTOM TEXT COLORS */
            --text-primary: #2c1a35;
            --text-secondary: #5d4a6b;
            --text-light: #8b7a9a;
            --text-accent: var(--primary);
            
            /* Theme Variables - UPDATED */
            --bg-primary: var(--main-bg);
            --bg-secondary: var(--main-bg-light);
            --bg-tertiary: var(--main-bg-dark);
            --border-color: #c9c5a8;
            
            /* Accent Colors */
            --success-green: #10b981;
            --warning-orange: #f59e0b;
            --error-red: #ef4444;
            --info-blue: #3b82f6;
            
            /* Spacing & Other */
            --spacing-xs: 0.25rem;
            --spacing-sm: 0.5rem;
            --spacing-md: 1rem;
            --spacing-lg: 1.5rem;
            --spacing-xl: 2rem;
            --spacing-2xl: 3rem;
            --spacing-3xl: 4rem;
            
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;
            --radius-2xl: 24px;
            
            --shadow-sm: 0 1px 3px rgba(97, 57, 118, 0.1);
            --shadow-md: 0 4px 6px rgba(97, 57, 118, 0.1);
            --shadow-lg: 0 10px 15px rgba(97, 57, 118, 0.1);
            --shadow-xl: 0 20px 25px rgba(97, 57, 118, 0.15);
            --shadow-2xl: 0 25px 50px rgba(97, 57, 118, 0.25);
            
            --transition-fast: 0.15s ease;
            --transition-base: 0.3s ease;
            --transition-slow: 0.5s ease;
        }

        /* Dark Mode */
        [data-theme="dark"] {
            --bg-primary: #1a1a1a;
            --bg-secondary: #2a2a2a;
            --bg-tertiary: #333333;
            --text-primary: #ffffff;
            --text-secondary: #cccccc;
            --border-color: #404040;
            --main-bg: #1a1a1a;
            --main-bg-light: #2a2a2a;
            --main-bg-dark: #333333;
        }

        /* Orange Rich Theme */
        [data-theme="orange"] {
            --primary: #561C24;
            --primary-dark: #4a1520;
            --primary-light: #6D2932;
            --primary-lighter: #8b3d47;
            --primary-lightest: #a8525c;
        }

        /* Blue Navy Theme */
        [data-theme="blue"] {
            --primary: #06141B;
            --primary-dark: #041116;
            --primary-light: #11212D;
            --primary-lighter: #1e3540;
            --primary-lightest: #2b4953;
        }

        /* Royal Gold Theme */
        [data-theme="gold"] {
            --primary: #10214b;
            --primary-dark: #0e1d42;
            --primary-light: #1a2f5f;
            --primary-lighter: #244073;
            --primary-lightest: #2e5087;
        }

        /* MATRIX EFFECTS - SAME AS INDEX.HTML */
        .cursor-matrix {
            position: fixed !important;
            font-family: 'Courier New', monospace !important;
            font-size: 18px !important;
            color: var(--primary) !important;
            pointer-events: none !important;
            z-index: 9999 !important;
            animation: matrix-fall-enhanced 2.5s ease-out !important;
            text-shadow: 0 0 10px var(--primary) !important;
            font-weight: 700 !important;
            user-select: none !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        /* Mobile Matrix Optimizations */
        @media (max-width: 768px) {
            .cursor-matrix {
                font-size: 14px !important;
                animation-duration: 2s !important;
            }
        }

        @media (max-width: 480px) {
            .cursor-matrix {
                font-size: 12px !important;
                animation-duration: 1.8s !important;
            }
        }

        @keyframes matrix-fall-enhanced {
            0% { 
                transform: translateY(0) rotateX(0deg) scale(1) !important; 
                opacity: 1 !important; 
                filter: brightness(1.8) blur(0px) !important;
                text-shadow: 0 0 15px var(--primary) !important;
            }
            25% {
                opacity: 0.9 !important;
                filter: brightness(1.5) blur(0px) !important;
                transform: translateY(45px) rotateX(90deg) scale(1.1) !important;
            }
            50% {
                opacity: 0.8 !important;
                filter: brightness(1.2) blur(1px) !important;
                transform: translateY(90px) rotateX(180deg) scale(1) !important;
            }
            75% {
                opacity: 0.6 !important;
                filter: brightness(0.9) blur(2px) !important;
                transform: translateY(135px) rotateX(270deg) scale(0.9) !important;
            }
            100% { 
                transform: translateY(180px) rotateX(360deg) scale(0.8) !important; 
                opacity: 0 !important;
                filter: brightness(0.3) blur(3px) !important;
            }
        }

        /* SMALLER SPOTLIGHT EFFECT - SAME AS INDEX.HTML */
        .spotlight {
            position: fixed !important;
            width: 80px !important;
            height: 80px !important;
            background: radial-gradient(circle, rgba(97, 57, 118, 0.3) 0%, rgba(97, 57, 118, 0.2) 30%, rgba(97, 57, 118, 0.08) 60%, transparent 80%) !important;
            border-radius: 50% !important;
            pointer-events: none !important;
            z-index: 9998 !important;
            animation: spotlight-pulse-micro 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
            box-shadow: 0 0 20px rgba(97, 57, 118, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.08) !important;
            backdrop-filter: blur(1px) !important;
        }

        /* Mobile Spotlight Optimizations */
        @media (max-width: 768px) {
            .spotlight {
                width: 60px !important;
                height: 60px !important;
                animation-duration: 0.5s !important;
            }
        }

        @media (max-width: 480px) {
            .spotlight {
                width: 50px !important;
                height: 50px !important;
                animation-duration: 0.4s !important;
            }
        }

        @keyframes spotlight-pulse-micro {
            0% { 
                transform: scale(0) rotate(0deg) !important;
                opacity: 1 !important;
                filter: blur(0px) saturate(1.2) !important;
            }
            40% {
                transform: scale(0.8) rotate(144deg) !important;
                opacity: 0.8 !important;
                filter: blur(1px) saturate(1.1) !important;
            }
            70% {
                transform: scale(1.1) rotate(252deg) !important;
                opacity: 0.6 !important;
                filter: blur(1.5px) saturate(1) !important;
            }
            100% { 
                transform: scale(1.3) rotate(360deg) !important;
                opacity: 0 !important;
                filter: blur(2px) saturate(0.8) !important;
            }
        }

        .cursor-matrix.bright {
            color: var(--primary-light) !important;
            text-shadow: 0 0 20px var(--primary-light) !important;
            font-size: 22px !important;
            animation: matrix-fall-enhanced 2.2s ease-out !important;
        }

        .cursor-matrix.dim {
            color: var(--primary-dark) !important;
            opacity: 0.7 !important;
            font-size: 16px !important;
            animation: matrix-fall-enhanced 2.8s ease-out !important;
        }

        .cursor-matrix.rich {
            color: var(--primary-lighter) !important;
            text-shadow: 0 0 12px var(--primary-lighter) !important;
            font-size: 20px !important;
            animation: matrix-fall-enhanced 2.4s ease-out !important;
        }

        /* Mobile Variations */
        @media (max-width: 768px) {
            .cursor-matrix.bright { font-size: 16px !important; }
            .cursor-matrix.dim { font-size: 12px !important; }
            .cursor-matrix.rich { font-size: 14px !important; }
        }

        /* Reset & Base Styles - CUSTOM COLORS */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
            font-size: 16px;
            -webkit-text-size-adjust: 100%;
            -moz-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: var(--text-primary);
            background: var(--bg-primary);
            transition: all var(--transition-base);
            overflow-x: hidden;
            font-weight: 400;
            font-size: 16px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 var(--spacing-xl);
        }

        /* CUSTOM GRADIENT HEADER - BIGGER LOGO */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: linear-gradient(135deg, var(--main-bg) 0%, var(--primary) 100%);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border-color);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 20px rgba(97, 57, 118, 0.1);
        }

        [data-theme="dark"] .header {
            background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, var(--primary) 100%);
        }

        .header.scrolled {
            box-shadow: var(--shadow-lg);
            background: linear-gradient(135deg, rgba(228, 225, 198, 0.98) 0%, rgba(97, 57, 118, 0.98) 100%);
        }

        [data-theme="dark"] .header.scrolled {
            background: linear-gradient(135deg, rgba(26, 26, 26, 0.98) 0%, rgba(97, 57, 118, 0.98) 100%);
        }

        .nav-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--spacing-lg);
            min-height: 85px;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 var(--spacing-lg);
        }

        .logo {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: var(--text-primary);
            flex-shrink: 0;
            transition: all var(--transition-base);
        }

        .logo:hover {
            transform: scale(1.05);
        }

        /* BIGGER LOGO SIZE - SAME AS INDEX.HTML */
        .logo-icon {
            width: 68px;
            height: 68px;
            background: url('../images/main.png') center/contain no-repeat;
            margin-right: var(--spacing-lg);
            transition: all var(--transition-base);
            filter: drop-shadow(0 2px 8px rgba(97, 57, 118, 0.3));
        }

        .logo-text {
            font-size: 1.45rem;
            font-weight: 700;
            transition: all var(--transition-base);
            color: var(--text-primary);
        }

        /* NAVIGATION */
        .nav-menu {
            display: flex;
            list-style: none;
            gap: var(--spacing-lg);
            align-items: center;
            justify-content: center;
            flex: 1;
        }

        .nav-menu li a {
            color: var(--text-secondary);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.875rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            white-space: nowrap;
            padding: var(--spacing-sm) var(--spacing-xs);
        }

        .nav-menu li a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--primary);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateX(-50%);
        }

        .nav-menu li a:hover,
        .nav-menu li a.active {
            color: var(--text-primary);
            transform: translateY(-1px);
        }

        .nav-menu li a:hover::after,
        .nav-menu li a.active::after {
            width: 80%;
        }

        .header-actions {
            display: flex;
            gap: var(--spacing-sm);
            align-items: center;
            flex-shrink: 0;
        }

        .theme-selector {
            position: relative;
        }

        .theme-btn {
            width: 42px;
            height: 42px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            color: var(--text-secondary);
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .theme-btn:hover {
            background: var(--primary);
            color: white;
            transform: scale(1.05) rotateZ(10deg);
        }

        .theme-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-xl);
            padding: var(--spacing-sm);
            min-width: 180px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px) scale(0.95);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1001;
        }

        .theme-dropdown.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }

        .theme-option {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            padding: var(--spacing-sm) var(--spacing-md);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 0.875rem;
        }

        .theme-option:hover {
            background: var(--bg-secondary);
            transform: translateX(5px);
        }

        .theme-color {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid var(--border-color);
        }

        .header-btn {
            padding: var(--spacing-sm) var(--spacing-lg);
            border-radius: var(--radius-md);
            font-weight: 600;
            font-size: 0.875rem;
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
            white-space: nowrap;
            flex-shrink: 0;
            min-height: 42px;
            justify-content: center;
        }

        .donate-btn {
            background: #f59e0b;
            color: white;
        }

        .donate-btn:hover {
            background: #e68900;
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
        }

        .download-btn-header {
            background: var(--primary);
            color: white;
        }

        .download-btn-header:hover {
            background: var(--primary-dark);
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 8px 25px rgba(97, 57, 118, 0.3);
        }

        /* Mobile Menu */
        .mobile-menu-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 1.5rem;
            color: var(--text-primary);
            cursor: pointer;
            padding: var(--spacing-sm);
            width: 42px;
            height: 42px;
            align-items: center;
            justify-content: center;
            transition: all var(--transition-base);
        }

        .mobile-menu-toggle:hover {
            transform: scale(1.1);
        }

        .mobile-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--bg-primary);
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
            box-shadow: var(--shadow-md);
            z-index: 999;
            backdrop-filter: blur(10px);
        }

        .mobile-menu.active {
            display: block;
            animation: slideDown 0.3s ease-out;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .mobile-menu ul {
            list-style: none;
            padding: var(--spacing-md) 0;
        }

        .mobile-menu li {
            padding: var(--spacing-sm) var(--spacing-xl);
            border-bottom: 1px solid var(--border-color);
            transition: all var(--transition-base);
        }

        .mobile-menu li:hover {
            background: var(--bg-secondary);
            transform: translateX(5px);
        }

        .mobile-menu li:last-child {
            border-bottom: none;
        }

        .mobile-menu a {
            color: var(--text-primary);
            text-decoration: none;
            font-weight: 500;
        }

        /* VOLUNTEER HERO WITH BACKGROUND IMAGE */
        .volunteer-hero {
            padding: 120px 0 80px;
            background: url('../images/volunteer-hero.png') center/cover no-repeat, linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
            min-height: 70vh;
            display: flex;
            align-items: center;
        }

        .volunteer-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(97, 57, 118, 0.3);
            z-index: 1;
        }

        .volunteer-hero-content {
            max-width: 900px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
            color: white;
        }

        .breadcrumb {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--spacing-sm);
            margin-bottom: var(--spacing-lg);
            font-size: 0.875rem;
            color: rgba(255, 255, 255, 0.8);
        }

        .breadcrumb a {
            color: white;
            text-decoration: none;
            transition: all var(--transition-base);
        }

        .breadcrumb a:hover {
            color: var(--main-bg);
        }

        .breadcrumb i {
            color: rgba(255, 255, 255, 0.6);
        }

        .page-title {
            font-family: 'Crimson Text', serif;
            font-size: clamp(3rem, 6vw, 4.5rem);
            font-weight: 600;
            color: white;
            margin-bottom: var(--spacing-lg);
            letter-spacing: -1px;
            text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
            animation: fadeInUp 1s ease-out;
        }

        .page-subtitle {
            font-size: 1.35rem;
            color: rgba(255, 255, 255, 0.95);
            line-height: 1.6;
            margin-bottom: var(--spacing-xl);
            text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
            animation: fadeInUp 1s ease-out 0.2s both;
        }

        .volunteer-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: var(--spacing-xl);
            margin-top: var(--spacing-2xl);
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }

        .volunteer-stat {
            text-align: center;
            background: rgba(255, 255, 255, 0.1);
            padding: var(--spacing-lg);
            border-radius: var(--radius-lg);
            backdrop-filter: blur(10px);
            transition: all var(--transition-base);
        }

        .volunteer-stat:hover {
            transform: translateY(-5px) scale(1.05);
            background: rgba(255, 255, 255, 0.2);
        }

        .stat-number {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.5rem;
            font-weight: 700;
            display: block;
            margin-bottom: var(--spacing-xs);
            color: white;
        }

        .stat-label {
            font-size: 0.875rem;
            opacity: 0.9;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.8);
        }

        /* Volunteer Opportunities */
        .volunteer-opportunities {
            background: var(--bg-primary);
            padding: var(--spacing-3xl) 0;
        }

        .section-header {
            text-align: center;
            margin-bottom: var(--spacing-3xl);
        }

        .section-title {
            font-family: 'Crimson Text', serif;
            font-size: clamp(2.5rem, 4vw, 3.5rem);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: var(--spacing-lg);
            letter-spacing: -1px;
        }

        .section-subtitle {
            font-size: 1.125rem;
            color: var(--text-secondary);
            line-height: 1.6;
        }

        .opportunities-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: var(--spacing-xl);
        }

        .opportunity-card {
            background: var(--bg-primary);
            border: 2px solid var(--border-color);
            border-radius: var(--radius-xl);
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            position: relative;
        }

        .opportunity-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(97, 57, 118, 0.1), transparent);
            transition: left 0.6s ease;
        }

        .opportunity-card:hover::before {
            left: 100%;
        }

        .opportunity-card:hover {
            transform: translateY(-12px) scale(1.02);
            box-shadow: var(--shadow-xl);
            border-color: var(--primary);
        }

        .opportunity-header {
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            color: white;
            padding: var(--spacing-xl);
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .opportunity-icon {
            width: 70px;
            height: 70px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto var(--spacing-md);
            font-size: 1.5rem;
            transition: all var(--transition-base);
        }

        .opportunity-card:hover .opportunity-icon {
            transform: scale(1.1) rotateZ(5deg);
        }

        .opportunity-title {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: var(--spacing-sm);
        }

        .opportunity-type {
            opacity: 0.9;
            font-size: 0.875rem;
        }

        .opportunity-content {
            padding: var(--spacing-xl);
            position: relative;
            z-index: 2;
        }

        .opportunity-description {
            color: var(--text-secondary);
            margin-bottom: var(--spacing-lg);
            line-height: 1.6;
        }

        .opportunity-requirements {
            list-style: none;
            margin-bottom: var(--spacing-lg);
        }

        .opportunity-requirements li {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            margin-bottom: var(--spacing-sm);
            font-size: 0.875rem;
            color: var(--text-secondary);
            transition: all var(--transition-base);
        }

        .opportunity-requirements li:hover {
            color: var(--text-primary);
            transform: translateX(3px);
        }

        .opportunity-requirements li i {
            color: var(--success-green);
            width: 16px;
        }

        .opportunity-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--spacing-lg);
            padding: var(--spacing-md);
            background: var(--bg-secondary);
            border-radius: var(--radius-md);
        }

        .opportunity-commitment {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--primary);
        }

        .opportunity-urgency {
            font-size: 0.75rem;
            font-weight: 600;
            padding: var(--spacing-xs) var(--spacing-sm);
            border-radius: var(--radius-sm);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .urgency-high {
            background: var(--error-red);
            color: white;
        }

        .urgency-medium {
            background: var(--warning-orange);
            color: white;
        }

        .urgency-low {
            background: var(--success-green);
            color: white;
        }

        .opportunity-btn {
            background: var(--primary);
            color: white;
            padding: var(--spacing-md) var(--spacing-lg);
            border: none;
            border-radius: var(--radius-md);
            font-weight: 600;
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--spacing-sm);
            text-decoration: none;
        }

        .opportunity-btn:hover {
            background: var(--primary-dark);
            transform: translateY(-2px) scale(1.05);
            box-shadow: var(--shadow-md);
        }

        /* Impact Stories */
        .impact-stories {
            background: var(--bg-secondary);
            padding: var(--spacing-3xl) 0;
            position: relative;
        }

        .impact-stories::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 70% 30%, rgba(97, 57, 118, 0.05) 0%, transparent 50%);
            z-index: 1;
        }

        .stories-grid {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: var(--spacing-xl);
        }

        .story-card {
            background: var(--bg-primary);
            border: 2px solid var(--border-color);
            border-radius: var(--radius-xl);
            padding: var(--spacing-xl);
            text-align: center;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .story-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(97, 57, 118, 0.1), transparent);
            transition: left 0.6s ease;
        }

        .story-card:hover::before {
            left: 100%;
        }

        .story-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: var(--shadow-xl);
            border-color: var(--primary);
        }

        .story-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto var(--spacing-lg);
            color: white;
            font-size: 1.25rem;
            font-weight: 700;
            transition: all var(--transition-base);
        }

        .story-card:hover .story-avatar {
            transform: scale(1.1) rotateZ(10deg);
        }

        .story-name {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: var(--spacing-xs);
        }

        .story-role {
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--primary);
            margin-bottom: var(--spacing-lg);
        }

        .story-quote {
            color: var(--text-secondary);
            font-style: italic;
            line-height: 1.6;
        }

        .story-quote::before {
            content: '“';
            font-size: 2rem;
            color: var(--primary);
            opacity: 0.3;
            margin-right: var(--spacing-xs);
        }

        .story-quote::after {
            content: '”';
            font-size: 2rem;
            color: var(--primary);
            opacity: 0.3;
            margin-left: var(--spacing-xs);
        }

        /* Call to Action Section */
        .cta-section {
            background: var(--primary);
            color: white;
            padding: var(--spacing-3xl) 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .cta-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 30px 30px;
            opacity: 0.5;
            animation: ctaPulse 10s linear infinite;
        }

        @keyframes ctaPulse {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .cta-content {
            position: relative;
            z-index: 2;
        }

        .cta-content h2 {
            font-family: 'Crimson Text', serif;
            font-size: clamp(2.5rem, 4vw, 3rem);
            font-weight: 700;
            margin-bottom: var(--spacing-lg);
            color: white;
        }

        .cta-content p {
            font-size: 1.125rem;
            margin-bottom: var(--spacing-xl);
            opacity: 0.9;
            line-height: 1.6;
        }

        .cta-btn {
            background: white;
            color: var(--primary);
            padding: var(--spacing-lg) var(--spacing-2xl);
            border-radius: var(--radius-lg);
            text-decoration: none;
            font-weight: 700;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-sm);
            font-size: 1.125rem;
            box-shadow: var(--shadow-md);
            border: 2px solid white;
        }

        .cta-btn:hover {
            background: transparent;
            color: white;
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
        }

        /* FOOTER - CUSTOM COLORS */
        .footer {
            background: #1a1a1a;
            color: white;
            padding: var(--spacing-3xl) 0 var(--spacing-xl);
            position: relative;
            overflow: hidden;
        }

        .footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(97, 57, 118, 0.1) 0%, transparent 50%);
            z-index: 1;
        }

        [data-theme="dark"] .footer {
            background: #0a0a0a;
        }

        .footer-content {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 2fr repeat(4, 1fr);
            gap: var(--spacing-2xl);
            margin-bottom: var(--spacing-2xl);
        }

        .footer-logo {
            display: flex;
            align-items: center;
            margin-bottom: var(--spacing-lg);
        }

        .footer-logo .logo-icon {
            width: 50px;
            height: 50px;
            background: url('../images/main.png') center/contain no-repeat;
            margin-right: var(--spacing-lg);
            filter: brightness(2);
        }

        .footer-logo .logo-text {
            font-size: 1.25rem;
            font-weight: 700;
            color: white;
        }

        .footer-description {
            color: rgba(255, 255, 255, 0.85);
            line-height: 1.7;
            margin-bottom: var(--spacing-2xl);
            font-size: 1rem;
        }

        .footer-section h3 {
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: var(--spacing-lg);
            color: white;
            position: relative;
        }

        .footer-section h3::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 30px;
            height: 2px;
            background: var(--primary);
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: var(--spacing-sm);
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 0.875rem;
            position: relative;
            display: inline-block;
        }

        .footer-links a::before {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1px;
            background: var(--primary);
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .footer-links a:hover {
            color: white;
            transform: translateX(5px);
        }

        .footer-links a:hover::before {
            width: 100%;
        }

        .social-links {
            display: flex;
            gap: var(--spacing-md);
            margin-top: var(--spacing-lg);
        }

        .social-links a {
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.8);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            text-decoration: none;
            position: relative;
            overflow: hidden;
        }

        .social-links a::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: var(--primary);
            border-radius: 50%;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translate(-50%, -50%);
        }

        .social-links a:hover::before {
            width: 100%;
            height: 100%;
        }

        .social-links a:hover {
            color: white;
            transform: translateY(-5px) scale(1.1) rotateZ(5deg);
            box-shadow: 0 15px 30px rgba(97, 57, 118, 0.4);
        }

        .social-links a i {
            position: relative;
            z-index: 2;
            font-size: 1.125rem;
        }

        .footer-bottom {
            position: relative;
            z-index: 2;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: var(--spacing-xl);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .footer-legal {
            display: flex;
            gap: var(--spacing-lg);
        }

        .footer-legal a {
            color: rgba(255, 255, 255, 0.6);
            text-decoration: none;
            font-size: 0.875rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        .footer-legal a::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 0;
            width: 0;
            height: 1px;
            background: var(--primary-light);
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .footer-legal a:hover {
            color: white;
            transform: translateY(-1px);
        }

        .footer-legal a:hover::after {
            width: 100%;
        }

        .footer-copyright {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.875rem;
        }

        .footer-copyright strong {
            color: var(--primary-light);
            font-weight: 600;
        }

        /* RESPONSIVE - MOBILE OPTIMIZED */
        @media (max-width: 1200px) {
            .nav-menu {
                gap: var(--spacing-md);
            }
            
            .nav-menu li a {
                font-size: 0.8rem;
                padding: var(--spacing-xs);
            }
            
            .header-btn {
                padding: var(--spacing-xs) var(--spacing-md);
                font-size: 0.8rem;
            }
        }

        @media (max-width: 1024px) {
            .nav-container {
                padding: 0 var(--spacing-lg);
            }
            
            .nav-menu {
                gap: var(--spacing-sm);
            }
        }

        @media (max-width: 768px) {
            .nav-container {
                grid-template-columns: auto 1fr auto;
                padding: 0 var(--spacing-md);
                gap: var(--spacing-sm);
                min-height: 90px;
            }

            .nav-menu {
                display: none;
            }

            .mobile-menu-toggle {
                display: flex;
                justify-self: center;
            }

            .logo {
                justify-self: start;
            }

            .header-actions {
                justify-self: end;
                gap: var(--spacing-xs);
            }

            /* BIGGER MOBILE LOGO */
            .logo-icon {
                width: 58px;
                height: 58px;
                margin-right: var(--spacing-md);
            }

            .logo-text {
                font-size: 1.3rem;
            }

            .header-btn {
                padding: var(--spacing-xs) var(--spacing-sm);
                font-size: 0.75rem;
                min-height: 36px;
            }

            .header-btn span {
                display: none;
            }

            .theme-btn {
                width: 36px;
                height: 36px;
                font-size: 14px;
            }

            .volunteer-hero {
                padding: 100px 0 60px;
                min-height: 60vh;
            }

            .opportunities-grid {
                grid-template-columns: 1fr;
            }

            .stories-grid {
                grid-template-columns: 1fr;
            }

            .footer-content {
                grid-template-columns: 1fr;
                gap: var(--spacing-xl);
                text-align: center;
            }

            .footer-section h3::after {
                left: 50%;
                transform: translateX(-50%);
            }

            .social-links {
                justify-content: center;
            }

            .footer-bottom {
                flex-direction: column;
                text-align: center;
                gap: var(--spacing-md);
            }

            .container {
                padding: 0 var(--spacing-md);
            }
        }

        @media (max-width: 480px) {
            .nav-container {
                min-height: 75px;
                padding: 0 var(--spacing-sm);
                gap: var(--spacing-xs);
            }

            /* BIGGER MOBILE LOGO FOR SMALL SCREENS */
            .logo-icon {
                width: 52px;
                height: 52px;
                margin-right: var(--spacing-sm);
            }

            .logo-text {
                font-size: 1.2rem;
            }

            .theme-btn {
                width: 32px;
                height: 32px;
                font-size: 12px;
            }

            .header-btn {
                padding: var(--spacing-xs);
                font-size: 0.7rem;
                min-height: 32px;
                min-width: 32px;
            }

            .volunteer-hero {
                padding: 80px 0 50px;
            }

            .page-title {
                font-size: 2.5rem;
            }

            .page-subtitle {
                font-size: 1rem;
            }
        }

        /* ANIMATIONS */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Enhanced Accessibility */
        a:focus,
        button:focus,
        input:focus {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
            border-radius: var(--radius-sm);
        }

        .skip-link {
            position: absolute;
            top: -40px;
            left: 6px;
            background: var(--primary);
            color: white;
            padding: 8px;
            text-decoration: none;
            border-radius: 4px;
            z-index: 10001;
        }

        .skip-link:focus {
            top: 6px;
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
    </style>
</head>
<body data-theme="purple">
    <!-- Skip to content link for accessibility -->
    <a href="#main-content" class="skip-link">Skip to main content</a>

    <!-- Custom Alert Overlay -->
    <div class="alert-overlay" id="alertOverlay" role="dialog" aria-labelledby="alertTitle" aria-describedby="alertMessage">
        <div class="alert-box">
            <div class="alert-header">
                <div class="alert-icon" aria-hidden="true">
                    <i class="fas fa-info-circle" id="alertIcon"></i>
                </div>
                <div class="alert-title" id="alertTitle">Information</div>
            </div>
            <div class="alert-message" id="alertMessage">This is a custom styled alert message.</div>
            <div class="alert-actions">
                <button class="alert-btn secondary" onclick="closeAlert()">Cancel</button>
                <button class="alert-btn primary" onclick="closeAlert()">OK</button>
            </div>
        </div>
    </div>

    <!-- UPDATED HEADER -->
     <header class="header" id="header" role="banner">
        <div class="nav-container">
            <a href="../index.html" class="logo" aria-label="Tor Project Homepage">
                <div class="logo-icon" aria-hidden="true"></div>
                <span class="logo-text"></span>
            </a>

            <nav class="nav-menu" role="navigation" aria-label="Main navigation">
                <li><a href="../index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="download.html">Download</a></li>
                <li><a href="support.html">Support</a></li>
                <li><a href="jobs.html">Jobs</a></li>
                <li><a href="community.html">Community</a></li>
                <li><a href="trademark.html">Trademark</a></li>
                <li><a href="training.html">Training</a></li>
                <li><a href="volunteer.html" class="active" aria-current="page">Volunteer</a></li>
                <li><a href="terms.html">Terms</a></li>
                <li><a href="contact.html">contact</a></li>
                <li><a href="history.html">History</a></li>
            </nav>

            <button class="mobile-menu-toggle" onclick="toggleMobileMenu()" aria-expanded="false" aria-controls="mobileMenu" aria-label="Toggle mobile menu">
                <i class="fas fa-bars" id="mobileMenuIcon" aria-hidden="true"></i>
            </button>

            <div class="header-actions">
                <div class="theme-selector">
                    <button class="theme-btn" onclick="toggleThemeDropdown()" title="Change Theme" aria-expanded="false" aria-controls="themeDropdown">
                        <i class="fas fa-palette" aria-hidden="true"></i>
                        <span class="sr-only">Change website theme</span>
                    </button>
                    <div class="theme-dropdown" id="themeDropdown" role="menu" aria-label="Theme options">
                        <div class="theme-option" onclick="setTheme('purple')" role="menuitem">
                            <div class="theme-color" style="background: #613976;" aria-hidden="true"></div>
                            <span>Custom Purple</span>
                        </div>
                        <div class="theme-option" onclick="setTheme('orange')" role="menuitem">
                            <div class="theme-color" style="background: #561C24;" aria-hidden="true"></div>
                            <span>Orange Rich</span>
                        </div>
                        <div class="theme-option" onclick="setTheme('blue')" role="menuitem">
                            <div class="theme-color" style="background: #06141B;" aria-hidden="true"></div>
                            <span>Navy Blue</span>
                        </div>
                        <div class="theme-option" onclick="setTheme('gold')" role="menuitem">
                            <div class="theme-color" style="background: #10214b;" aria-hidden="true"></div>
                            <span>Royal Gold</span>
                        </div>
                        <div class="theme-option" onclick="toggleDarkMode()" role="menuitem">
                            <div class="theme-color" style="background: linear-gradient(45deg, #1a1a1a, #ffffff);" aria-hidden="true"></div>
                            <span>Dark/Light Toggle</span>
                        </div>
                    </div>
                </div>

                <a href="donate.html" class="header-btn donate-btn" aria-label="Donate to Tor Project">
                    <i class="fas fa-heart" aria-hidden="true"></i>
                    <span>Donate</span>
                </a>
                <a href="download.html" class="header-btn download-btn-header" aria-label="Download Tor Browser">
                    <i class="fas fa-download" aria-hidden="true"></i>
                    <span>Download</span>
                </a>
            </div>

            <!-- Mobile Menu -->
            <nav class="mobile-menu" id="mobileMenu" role="navigation" aria-label="Mobile navigation">
                <ul>
                    <li><a href="../index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="download.html">Download</a></li>
                    <li><a href="support.html">Support</a></li>
                    <li><a href="jobs.html">Jobs</a></li>
                    <li><a href="community.html">Community</a></li>
                    <li><a href="trademark.html">Trademark</a></li>
                    <li><a href="training.html">Training</a></li>
                    <li><a href="volunteer.html" class="active" aria-current="page">Volunteer</a></li>
                    <li><a href="terms.html">Terms</a></li>
                    <li><a href="contact.html">contact</a></li>
                    <li><a href="team.html">Team</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="relay.html">Relay</a></li>
                    <li><a href="donate.html">Donate</a></li>
                    <li><a href="history.html">History</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main id="main-content" role="main">
        <!-- VOLUNTEER HERO WITH BACKGROUND IMAGE -->
        <section class="volunteer-hero" aria-labelledby="page-title">
            <div class="container">
                <div class="volunteer-hero-content">
                    <nav class="breadcrumb" aria-label="Breadcrumb">
                        <a href="../index.html">Home</a>
                        <i class="fas fa-chevron-right" aria-hidden="true"></i>
                        <span>Volunteer</span>
                    </nav>
                    <h1 id="page-title" class="page-title">Join Our Matrix Volunteer Community</h1>
                    <p class="page-subtitle">Help us make privacy accessible to everyone. Your contribution, big or small, strengthens the Tor network and protects digital rights worldwide.</p>
                    
                    <div class="volunteer-stats">
                        <div class="volunteer-stat">
                            <span class="stat-number" data-count="5000">0</span>
                            <span class="stat-label">Active Volunteers</span>
                        </div>
                        <div class="volunteer-stat">
                            <span class="stat-number" data-count="100">0</span>
                            <span class="stat-label">Countries Represented</span>
                        </div>
                        <div class="volunteer-stat">
                            <span class="stat-number" data-count="7000">0</span>
                            <span class="stat-label">Relays Operated</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Volunteer Opportunities -->
        <section class="volunteer-opportunities" aria-labelledby="opportunities-title">
            <div class="container">
                <div class="section-header">
                    <h2 id="opportunities-title" class="section-title">How You Can Contribute</h2>
                    <p class="section-subtitle">There are many ways to support our mission. Find an opportunity that matches your skills and passion.</p>
                </div>
                
                <div class="opportunities-grid">
                    <article class="opportunity-card">
                        <div class="opportunity-header">
                            <div class="opportunity-icon"><i class="fas fa-code"></i></div>
                            <h3 class="opportunity-title">Software Development</h3>
                            <p class="opportunity-type">Technical Contribution</p>
                        </div>
                        <div class="opportunity-content">
                            <p class="opportunity-description">Contribute to Tor Browser, Onion Services, and other privacy-enhancing tools. Help us write, review, and test code.</p>
                            <ul class="opportunity-requirements">
                                <li><i class="fas fa-check-circle"></i>Proficiency in C, Python, or JavaScript</li>
                                <li><i class="fas fa-check-circle"></i>Experience with Git and collaborative development</li>
                                <li><i class="fas fa-check-circle"></i>Passion for open-source software</li>
                            </ul>
                            <div class="opportunity-meta">
                                <span class="opportunity-commitment">Flexible Hours</span>
                                <span class="opportunity-urgency urgency-high">High Need</span>
                            </div>
                            <a href="#" class="opportunity-btn">View Projects <i class="fas fa-arrow-right"></i></a>
                        </div>
                    </article>

                    <article class="opportunity-card">
                        <div class="opportunity-header">
                            <div class="opportunity-icon"><i class="fas fa-language"></i></div>
                            <h3 class="opportunity-title">Translation & Localization</h3>
                            <p class="opportunity-type">Language Contribution</p>
                        </div>
                        <div class="opportunity-content">
                            <p class="opportunity-description">Make Tor accessible to more people by translating our software, documentation, and website into different languages.</p>
                            <ul class="opportunity-requirements">
                                <li><i class="fas fa-check-circle"></i>Fluency in English and at least one other language</li>
                                <li><i class="fas fa-check-circle"></i>Attention to detail and cultural context</li>
                                <li><i class="fas fa-check-circle"></i>No technical skills required</li>
                            </ul>
                            <div class="opportunity-meta">
                                <span class="opportunity-commitment">2-4 Hours/Week</span>
                                <span class="opportunity-urgency urgency-medium">Medium Need</span>
                            </div>
                            <a href="#" class="opportunity-btn">Join Translation Team <i class="fas fa-arrow-right"></i></a>
                        </div>
                    </article>

                    <article class="opportunity-card">
                        <div class="opportunity-header">
                            <div class="opportunity-icon"><i class="fas fa-server"></i></div>
                            <h3 class="opportunity-title">Run a Relay</h3>
                            <p class="opportunity-type">Network Contribution</p>
                        </div>
                        <div class="opportunity-content">
                            <p class="opportunity-description">Strengthen the Tor network by running a relay. Your contribution helps improve speed, stability, and censorship resistance for users worldwide.</p>
                            <ul class="opportunity-requirements">
                                <li><i class="fas fa-check-circle"></i>A stable internet connection</li>
                                <li><i class="fas fa-check-circle"></i>At least 1 Mbps bandwidth</li>
                                <li><i class="fas fa-check-circle"></i>Ability to run a server 24/7</li>
                            </ul>
                            <div class="opportunity-meta">
                                <span class="opportunity-commitment">Ongoing</span>
                                <span class="opportunity-urgency urgency-high">High Need</span>
                            </div>
                            <a href="relay.html" class="opportunity-btn">Learn How <i class="fas fa-arrow-right"></i></a>
                        </div>
                    </article>
                </div>
            </div>
        </section>

        <!-- Impact Stories -->
        <section class="impact-stories" aria-labelledby="impact-title">
            <div class="container">
                <div class="section-header">
                    <h2 id="impact-title" class="section-title">Volunteer Impact Stories</h2>
                    <p class="section-subtitle">Hear from our community members about their experiences and the impact of their contributions.</p>
                </div>
                <div class="stories-grid">
                    <article class="story-card">
                        <div class="story-avatar">A</div>
                        <h3 class="story-name">Alex</h3>
                        <p class="story-role">Relay Operator</p>
                        <blockquote class="story-quote">Running a relay has been a rewarding experience. I know I'm helping people access information freely and safely every day.</blockquote>
                    </article>
                    <article class="story-card">
                        <div class="story-avatar">M</div>
                        <h3 class="story-name">Maria</h3>
                        <p class="story-role">Translator</p>
                        <blockquote class="story-quote">Translating Tor's documentation into my native language has empowered my community to protect their privacy online.</blockquote>
                    </article>
                    <article class="story-card">
                        <div class="story-avatar">S</div>
                        <h3 class="story-name">Sam</h3>
                        <p class="story-role">Developer</p>
                        <blockquote class="story-quote">Contributing to the Tor Browser codebase has been an incredible learning experience and a meaningful way to support digital rights.</blockquote>
                    </article>
                </div>
            </div>
        </section>
        
        <!-- Call to Action Section -->
        <section class="cta-section" aria-labelledby="cta-title">
            <div class="container">
                <div class="cta-content">
                    <h2 id="cta-title">Ready to Make a Difference?</h2>
                    <p>Join our global community of volunteers and help us build a more private and free internet for everyone.</p>
                    <a href="#" class="cta-btn">
                        <i class="fas fa-rocket"></i>
                        Get Started Now
                    </a>
                </div>
            </div>
        </section>
    </main>
    
    <!-- FOOTER - CUSTOM COLORS -->
    <footer class="footer" role="contentinfo">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section brand">
                    <div class="footer-logo">
                        <div class="logo-icon" aria-hidden="true"></div>
                        <span class="logo-text">Tor Project</span>
                    </div>
                    <p class="footer-description">Advancing human rights and freedoms by creating and deploying free and open source anonymity and privacy technologies.</p>
                    <div class="social-links" role="list" aria-label="Social media links">
                        <a href="https://www.instagram.com/om_singh_213" target="_blank" rel="noopener" title="Follow Tor Project on Instagram" role="listitem">
                            <i class="fab fa-instagram" aria-hidden="true"></i>
                            <span class="sr-only">Instagram</span>
                        </a>
                        <a href="https://twitter.com/om_singh_213" target="_blank" rel="noopener" title="Follow @om_singh_213 on Twitter" role="listitem">
                            <i class="fab fa-twitter" aria-hidden="true"></i>
                            <span class="sr-only">Twitter</span>
                        </a>
                        <a href="https://github.com/shubham-shipt" target="_blank" rel="noopener" title="View shubham-shipt on GitHub" role="listitem">
                            <i class="fab fa-github" aria-hidden="true"></i>
                            <span class="sr-only">GitHub</span>
                        </a>
                        <a href="mailto:shubscript213@gmail.com" title="Email Tor Project at shubscript213@gmail.com" role="listitem">
                            <i class="fas fa-envelope" aria-hidden="true"></i>
                            <span class="sr-only">Email</span>
                        </a>
                    </div>
                </div>

                <div class="footer-section">
                    <h3>Tor Browser & Products</h3>
                    <ul class="footer-links" role="list">
                        <li><a href="download.html">Download Tor Browser</a></li>
                        <li><a href="download.html">Mobile Apps</a></li>
                        <li><a href="download.html">Source Code</a></li>
                        <li><a href="relay.html">Onion Services</a></li>
                        <li><a href="support.html">Tor Metrics</a></li>
                    </ul>
                </div>

                <div class="footer-section">
                    <h3>Privacy Resources</h3>
                    <ul class="footer-links" role="list">
                        <li><a href="support.html">Support Portal</a></li>
                        <li><a href="history.html">History</a></li>
                        <li><a href="support.html">FAQ & Help</a></li>
                        <li><a href="blog.html">Privacy News & Blog</a></li>
                        <li><a href="history.html">Project History</a></li>
                    </ul>
                </div>

                <div class="footer-section">
                    <h3>Community & Support</h3>
                    <ul class="footer-links" role="list">
                        <li><a href="community.html">Get Involved</a></li>
                        <li><a href="relay.html">Run a Relay</a></li>
                        <li><a href="donate.html">Donate</a></li>
                        <li><a href="community.html">Events & Meetups</a></li>
                        <li><a href="history.html">History</a></li>
                    </ul>
                </div>

                <div class="footer-section">
                    <h3>Organization</h3>
                    <ul class="footer-links" role="list">
                        <li><a href="about.html">About Tor Project</a></li>
                        <li><a href="community.html">Community</a></li>
                        <li><a href="donate.html">Donate</a></li>
                        <li><a href="download.html">Download</a></li>
                        <li><a href="relay.html">Relay</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </div>
            </div>

            <div class="footer-bottom">
                <div class="footer-legal" role="list">
                    <li><a href="history.html">History</a></li>
                    <li><a href="community.html">Community</a></li>
                    <li><a href="download.html">Download</a></li>
                    <li><a href="donate.html">Donate</a></li>
                </div>
                <div class="footer-copyright">
                    <p>&copy; 2024 The Tor Project. | Developer: <strong>shubham-shipt</strong> | </p>
                </div>
            </div>
        </div>
    </footer>
    
    <script>
        // VOLUNTEER PAGE SCRIPT - CUSTOM THEME WITH MATRIX EFFECTS
        // Developer: shubham-shipt | Copyright Reserved | Updated: 2025-09-03 07:09:45
        
        console.log('🤝 VOLUNTEER Page Loaded - Developer: shubham-shipt');
        
        // Theme Management - Custom Colors
        const themes = ['purple', 'orange', 'blue', 'gold'];
        let currentTheme = localStorage.getItem('torTheme') || 'purple';
        let isDarkMode = localStorage.getItem('torDarkMode') === 'true';
        
        // Apply saved theme on load
        document.body.setAttribute('data-theme', currentTheme);
        if (isDarkMode) {
            document.body.setAttribute('data-theme', 'dark');
        }

        // MATRIX RAIN CURSOR EFFECT
        let isMatrixActive = true;
        let activeElements = [];
        let letterIndex = 0;
        let lastInteraction = 0;
        
        const torSequence = ['T', 'o', 'r'];
        
        function initializeMatrixEffect() {
            isMatrixActive = true;
            document.addEventListener('mousemove', handleMatrixMouseMove, { passive: true });
            document.addEventListener('click', handleSpotlightClick, { passive: true });
            document.addEventListener('touchmove', handleMatrixTouchMove, { passive: false });
            document.addEventListener('touchstart', handleSpotlightTouch, { passive: false });
        }
        
        function handleMatrixMouseMove(e) {
            if (!isMatrixActive || Date.now() - lastInteraction < 120) return;
            lastInteraction = Date.now();
            createTorRain(e.clientX, e.clientY);
        }
        
        function handleMatrixTouchMove(e) {
            if (!isMatrixActive || Date.now() - lastInteraction < 80) return;
            lastInteraction = Date.now();
            createTorRain(e.touches[0].clientX, e.touches[0].clientY);
        }
        
        function createTorRain(x, y) {
            const currentLetter = torSequence[letterIndex];
            letterIndex = (letterIndex + 1) % torSequence.length;
            
            const matrixChar = document.createElement('div');
            matrixChar.className = 'cursor-matrix';
            matrixChar.textContent = currentLetter;
            
            const isMobile = window.innerWidth <= 768;
            const offsetRange = isMobile ? 30 : 45;
            matrixChar.style.left = (x + (Math.random() - 0.5) * offsetRange) + 'px';
            matrixChar.style.top = (y + (Math.random() - 0.5) * (isMobile ? 15 : 22)) + 'px';
            
            const styleVariant = Math.random();
            if (styleVariant > 0.8) matrixChar.classList.add('bright');
            else if (styleVariant > 0.5) matrixChar.classList.add('rich');
            else if (styleVariant < 0.2) matrixChar.classList.add('dim');
            
            document.body.appendChild(matrixChar);
            activeElements.push(matrixChar);
            
            setTimeout(() => {
                if (matrixChar.parentNode) matrixChar.parentNode.removeChild(matrixChar);
                activeElements = activeElements.filter(el => el !== matrixChar);
            }, isMobile ? 1800 : 2500);
        }
        
        function handleSpotlightClick(e) {
            if (isMatrixActive) createSpotlightEffect(e.clientX, e.clientY);
        }
        
        function handleSpotlightTouch(e) {
            if (isMatrixActive) createSpotlightEffect(e.touches[0].clientX, e.touches[0].clientY);
        }
        
        function createSpotlightEffect(x, y) {
            const spotlight = document.createElement('div');
            spotlight.className = 'spotlight';
            const size = window.innerWidth <= 768 ? 60 : 80;
            spotlight.style.left = (x - size / 2) + 'px';
            spotlight.style.top = (y - size / 2) + 'px';
            
            document.body.appendChild(spotlight);
            activeElements.push(spotlight);
            
            setTimeout(() => {
                if (spotlight.parentNode) spotlight.parentNode.removeChild(spotlight);
                activeElements = activeElements.filter(el => el !== spotlight);
            }, window.innerWidth <= 768 ? 400 : 600);
        }
        
        // Custom Alert System
        function showAlert(title, message, icon = 'fas fa-info-circle') {
            document.getElementById('alertTitle').textContent = title;
            document.getElementById('alertMessage').textContent = message;
            document.getElementById('alertIcon').className = icon;
            document.getElementById('alertOverlay').classList.add('show');
        }
        
        function closeAlert() {
            document.getElementById('alertOverlay').classList.remove('show');
        }
        
        document.getElementById('alertOverlay').addEventListener('click', (e) => {
            if (e.target === e.currentTarget) closeAlert();
        });
        
        // Theme Functions
        function setTheme(theme) {
            currentTheme = theme;
            document.body.setAttribute('data-theme', theme);
            localStorage.setItem('torTheme', theme);
            hideThemeDropdown();
        }
        
        function toggleDarkMode() {
            isDarkMode = !isDarkMode;
            document.body.setAttribute('data-theme', isDarkMode ? 'dark' : currentTheme);
            localStorage.setItem('torDarkMode', isDarkMode.toString());
            hideThemeDropdown();
        }
        
        function toggleThemeDropdown() {
            const dropdown = document.getElementById('themeDropdown');
            dropdown.classList.toggle('show');
            document.querySelector('.theme-btn').setAttribute('aria-expanded', dropdown.classList.contains('show'));
        }
        
        function hideThemeDropdown() {
            const dropdown = document.getElementById('themeDropdown');
            dropdown.classList.remove('show');
            document.querySelector('.theme-btn').setAttribute('aria-expanded', 'false');
        }

        document.addEventListener('click', (e) => {
            if (!e.target.closest('.theme-selector')) hideThemeDropdown();
        });
        
        // Mobile menu toggle
        function toggleMobileMenu() {
            const mobileMenu = document.getElementById('mobileMenu');
            const menuIcon = document.getElementById('mobileMenuIcon');
            const isActive = mobileMenu.classList.toggle('active');
            document.querySelector('.mobile-menu-toggle').setAttribute('aria-expanded', isActive);
            menuIcon.className = isActive ? 'fas fa-times' : 'fas fa-bars';
            document.body.style.overflow = isActive ? 'hidden' : '';
        }
        
        // Header scroll effect
        window.addEventListener('scroll', () => {
            const header = document.getElementById('header');
            if (window.scrollY > 50) header.classList.add('scrolled');
            else header.classList.remove('scrolled');
        }, { passive: true });

        // Counter animation
        function animateCounters() {
            document.querySelectorAll('.stat-number').forEach(counter => {
                const target = parseInt(counter.dataset.count);
                let current = 0;
                const increment = target / 100;

                const update = () => {
                    if (current < target) {
                        current += increment;
                        if (target >= 1000) {
                            counter.textContent = Math.ceil(current / 1000) + 'K';
                        } else {
                            counter.textContent = Math.ceil(current);
                        }
                        requestAnimationFrame(update);
                    } else {
                        counter.textContent = target >= 1000 ? (target/1000) + 'K' : target;
                    }
                };
                update();
            });
        }
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    if (entry.target.classList.contains('volunteer-stats')) animateCounters();
                    entry.target.classList.add('visible');
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.1 });

        document.querySelectorAll('.fade-in, .volunteer-stats').forEach(el => observer.observe(el));
        
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                closeAlert();
                hideThemeDropdown();
            }
        });

        initializeMatrixEffect();
    </script>
</body>
</html>