body {
            font-family: 'Inter', sans-serif;
            scroll-padding-top: 100px;
            background-color: #f8fafc;
        }

        /* --- Animated Gradient (Header/Footer) --- */
        .header-gradient {
            background-image: linear-gradient(to right, #FF2C5D, #FF5C3A, #FFB820);
   
        }

        /* --- General Animation Classes --- */
        .fade-in-up {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

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

        /* --- Animated Blobs for Hero Section --- */
        .blob {
            position: absolute; border-radius: 50%;
            filter: blur(100px); opacity: 0.35;
            will-change: transform;
        }
        .blob-1 {
            width: 400px; height: 400px; top: -100px; left: -200px;
            background: rgba(255, 105, 0, 0.4);
            animation: move-blob-1 25s infinite alternate;
        }
        .blob-2 {
            width: 500px; height: 500px; bottom: -150px; right: -150px;
            background: rgba(252, 185, 0, 0.3);
            animation: move-blob-2 30s infinite alternate-reverse;
        }
        @keyframes move-blob-1 {
            from { transform: translate(0, 0) scale(1) rotate(0deg); }
            to { transform: translate(120px, 60px) scale(1.2) rotate(45deg); }
        }
        @keyframes move-blob-2 {
            from { transform: translate(0, 0) scale(1) rotate(0deg); }
            to { transform: translate(-100px, -50px) scale(0.9) rotate(-60deg); }
        }

        /* --- Nav Link Animation --- */
        .nav-link { position: relative; padding-bottom: 6px; }
        .nav-link::after {
            content: ''; position: absolute; left: 0; bottom: 0;
            width: 100%; height: 2px; background-color: white;
            transform: scaleX(0); transform-origin: right;
            transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); transform-origin: left; }

        /* --- Gradient Button --- */
        .gradient-button {
           
            background-image: linear-gradient(to right, #FF2C5D, #FF5C3A, #FFB820);
           
            transition: background-position 0.5s cubic-bezier(.25,.8,.25,1);
        }
        .gradient-button:hover { background-position: 100% 0; }
        
        /* --- Hero Image Specific Styles --- */
        .hero-img {
            position: absolute; inset: 0; width: 100%; height: 100%;
            object-fit: cover; object-position: center;
            transform: scale(1.1);
            transition: transform 0.8s ease-out;
        }
        .hero-img-loaded { transform: scale(1); }

        /* --- Cursor Click Wave Effect --- */
        .click-wave {
            position: fixed; width: 150px; height: 150px; border-radius: 50%;
            background: radial-gradient(circle, transparent 30%, rgba(252, 185, 0, 0.7) 45%, rgba(255, 105, 0, 0.5) 65%, rgba(207, 46, 46, 0.3) 85%, transparent 100%);
            transform: translate(-50%, -50%) scale(0);
            animation: wave-effect 0.6s ease-out;
            pointer-events: none; z-index: 9999;
        }
        @keyframes wave-effect {
            from { transform: translate(-50%, -50%) scale(0); opacity: 1; }
            to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
        }
        
        /* --- Background Pattern for Initiatives Section --- */
        .initiatives-background { position: relative; overflow: hidden; }
        .initiatives-background::before {
            content: ''; position: absolute; inset: 0;
            background-image: radial-gradient(circle at 50% 15%, hsla(45, 98%, 50%, 0.1) 0%, transparent 40%);
            background-repeat: no-repeat; z-index: 0;
        }
        .initiatives-background > .container { position: relative; z-index: 1; }

        /* === START: New Flip Card Styles === */
        .initiative-card-container {
            perspective: 1500px;
            min-height: 480px;
        }
        
        .card-flipper {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.7s cubic-bezier(0.3, 1.3, 0.6, 1);
            transform-style: preserve-3d;
        }

        .initiative-card-container:hover .card-flipper {
            transform: rotateY(180deg);
        }

        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            border-radius: 1rem; /* rounded-2xl */
            overflow: hidden;
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.07);
            border: 1px solid #e2e8f0;
        }
        
        .card-front {
            background: linear-gradient(to bottom, var(--tw-gradient-from), white 70%);
            display: flex;
            flex-direction: column;
            padding: 2rem;
        }
        .card-1 .card-front { --tw-gradient-from: #fee2e2; } /* red-50 */
        .card-2 .card-front { --tw-gradient-from: #ffedd5; } /* orange-50 */
        .card-3 .card-front { --tw-gradient-from: #fef9c3; } /* amber-50 */

        .card-back {
            transform: rotateY(180deg);
            color: white;
            background-size: 150% 150%;
        }
        .card-1 .card-back { background-image: linear-gradient(135deg, #ef4444, #b91c1c); }
        .card-2 .card-back { background-image: linear-gradient(135deg, #f97316, #c2410c); }
        .card-3 .card-back { background-image: linear-gradient(135deg, #f59e0b, #b45309); }

        .card-icon-wrapper {
            display: inline-block;
            padding: 1rem;
            border-radius: 0.75rem;
            margin-bottom: 1.5rem;
        }
        .card-1 .card-icon-wrapper { color: #cf2e2e; background-color: #fee2e2; }
        .card-2 .card-icon-wrapper { color: #ff6900; background-color: #ffedd5; }
        .card-3 .card-icon-wrapper { color: #b45309; background-color: #fef9c3; }
        
        .card-back-content {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding: 2rem;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .back-graphic-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60%;
            height: 60%;
            opacity: 0.1;
            color: white;
        }
        /* === END: New Flip Card Styles === */
        /* === START: Volunteer Modal Styles === */
        .modal-container {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            background-color: rgba(0, 0, 0, 0.6);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            z-index: 1000;
        }
        .modal-container.is-open {
            opacity: 1;
            visibility: visible;
        }
        .modal-content {
            background-color: white;
            padding: 2.5rem 2rem 2rem 2rem; /* Added more top padding for close btn */
            border-radius: 0.75rem;
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
            width: 100%;
            max-width: 32rem; /* max-w-lg */
            transform: scale(0.95);
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .modal-container.is-open .modal-content {
            transform: scale(1);
            opacity: 1;
        }
        /* === END: Volunteer Modal Styles === */